* {
      box-sizing: border-box;
    }
    html, body {
      background-color:rgb(255,255,255);
      margin: 0;
      padding: 0;
    }
.header{
    position:fixed;
    width:100%;
    display:flex;
    z-index:1;         
}    

.header > img{
      width:100%;
}       
       
.header  >a{
      color:#ffffff;
      position: absolute;
      right:0;
      top:25%;
      font-size:160%;
      border:4px solid #fffffc;
      background: #000000;
      margin-right:6%;
      padding-right:1.5%;
      padding-left:1.5%;
      box-shadow:0.2px 0.3px 1px 1px #000000;
      border-radius:10px;
      
}       

@media all{ 
  * { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0;
  } 

  .parallax { 
    background-position: 50% 25%; 
    background-repeat: no-repeat; 
    bottom: 0; 
    content: " "; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
  } 

  section.module.parallax { 
    align-items: center; 
    background-blend-mode: luminosity; 
    background-color: RGBA(0,0,0,0.5); 
    background-position: 50% 25%; 
    background-repeat: no-repeat;
    background-size: cover; 
    color: white; 
    display: flex; 
    height: 61.8vh; 
    justify-content: center; 
    padding: 0 2em; 
    position: relative; 
    text-shadow: 0 0 5px #0d0d0d; 
    width: 100vw;
  } 

  .site-header { 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    z-index: 0;
  } 

  .site-title { 
    margin: 0 auto 0; 
    overflow: visible;
    position: relative; 
    width: 100%; 
    z-index: 3;
    align-items: center;
  } 

  h1 { 
    color: RGBA(125,10,28,1.00); 
    font-family: 'Fredericka'; 
    text-decoration: none;
  } 

  .site-title > h1  { 
    font-size: 5vw; 
    text-align: center; 
    line-height: 100%;
  } 

  p.site-description { 
    font-size: 2vw; 
    margin: 0 auto; 
    text-align: center; 
    color: #f0f0f0;
  } 

  h2 { 
    color: RGBA(125,10,28,1.00); 
    text-decoration: none;
  } 

  h2 { 
    font-size: 1.75em; 
    text-align: center;
  } 

  h2 { 
    clear: both; 
    display: block; 
    font-size: 1.5em; 
    margin: 1em; 
    text-align: center;
  } 

  h2.page-title { 
    background-color: RGBA(100,151,162,0.3); 
    color: RGBA(125,10,28,1.00); 
    display: block; 
    font-family: Raleway; 
    font-size: 1.5em; 
    font-weight: 700; 
    margin: 0 auto; 
    padding: .2em; 
    text-transform: uppercase; 
    width: 61.8%; 
    border-bottom: 2px solid RGBA(125,10,28,1.00);
  } 

  h1 a  { 
    color: RGBA(125,10,28,1.00); 
    font-family: 'Fredericka'; 
    text-decoration: none;
  } 

  .site-title > h1 > a  { 
    font-size: 5vw; 
    text-align: center; 
    line-height: 100%;
  } 

  a:hover,a:active { 
    opacity: .6; 
    transition: all .5s linear;
  } 

   h1 a:hover { 
    opacity: .7; 
    transition: all .3s linear;
  } 
}  

.menu{
    top:0;
    left:0;
    z-index:-1;
    opacity:0; 
    display: flex; 
    flex-direction: column;
    position:fixed;
    width:100%;
    height:100%;
    background:rgb(0,0,0,0.9);

}       
        
.menu:target{
        z-index:1;
        opacity:1;
}

.menu-content{
       display: table-cell;
       vertical-align: middle;
       text-align:center;
       justify-content: flex-start;
       overflow-y: auto;
}

.menu-content > a > button{
    width: 90%;
    margin:5%;
    padding:3.5%;
    font-family: times new Roman;
    font-weight:1000;
    border:2px solid #0076ff;
    color:#ffffff;
    background:#0076ff;
    border-radius:3em;
    
}

.contant-bu > h2 > a > button{
    width: 90%;
    margin:5%;
    padding:3.5%;
    font-family: times new Roman;
    font-weight:1000;
    border:2px solid #0076ff;
    color:#ffffff;
    background:#0076ff;
    border-radius:3em;
    
}

.connect{
    width: 90%;
    margin:5%;
    padding:3.5%;
    font-family: times new Roman;
    border:2px solid #ffffff;
    color:#00000;
    background:#ffffff;
    border-radius:2em;
      
}
.connectp{
    line-height: 150%;
    font-size:70%;
    font-family:times new Roman;
}

.box{       
        background-color:#f0f0fc;
        border-radius:20px;
        margin:5%;                      
        width:90%;
        box-shadow:0.2px 0.3px 1px 1px #fFFFF;
       }
.sbox{                             
        width:95%;
        text-align:center;
        margin:2.5%;
        border-radius:15px;
        font-family:times new Roman;
        color: rgb(20,20,20);
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20); 
   
       }
.sbox-name{
       padding-top:13px;
       padding-bottom:px;
       border-top-right-radius:10px;
       border-top-left-radius:10px;
       color:#000;
    
}       
 .sbox-name > b {
    color:sienna;
    font-weight:1000;
    padding-left:10px;
}     
.sbox-child {   
      font-size:15px;     
      margin-top:5%;
      height:10vh;
    
}          

   
  
.box2{
       background-image:url("img/rango.jpg");
       background-repeat:no-repeat;
       background-position: auto;
       background-size: 100%;
       border-radius:20px;
       margin:2.5%;                      
       width:95%;
       box-shadow:0.2px 0.3px 1px 1px #fFFFF;
}  


.box2 > table {
        background-color:rgb(0,0,0, 0.7);
        color:rgb(250,250,250); 
        border-radius:20px;
        width: 100%;
        padding:10px;
        line-height: 150%;
    font-size:80%;
    font-family:times new Roman;
}

th{
        padding:10px;
}
    
.login-mother-box{
  background-image:url("img/47_ronin.jpg");
       background-repeat:no-repeat;
       background-position: auto;
       background-size: 100%;
       border-radius:20px;
       width:95%;
       margin:2.5%;       
}  
     
.login-box{
        background-color:rgb(0,0,0, 0.5);
        border-radius:px;
        color:rgb(250,250,250); 
         border-radius:20px;                    
        width:100%;
        text-align:center;

}

.login-box > a >.button1 {
     width:40%;
    background:white;
     border:1px solid white;
       border-radius:10px;  
    padding:1%;
       margin-bottom:5%;
}       
  
.login-box > a > .button1 > img{ 
       width:65%;
   
       }
  
.login-box > a > .button2 {
       margin-bottom:5%;
       font-family: times new Roman;
       font-weight:1000;
       background: white;
       color:#1f1f1c;
       width:80%;
       padding:2%;
       border:1px solid white;
       border-radius:3em;
       
      
}         
       
 .imagebox{
         background-color:#010101;
         color:#ffffff;
         font-size:60%;
         text-align:right;
         width:100%;
         font-family: times new Roman;
         font-weight:1000;
        }
       
.imagebox > img{
         width:100%;      
}
.imagebox >p{
          padding-top:0;
          top:0;
} 
.contact-form {
      background-color: #fff;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 500px;
    }

    .contact-form h2 {
      margin-bottom: 20px;
      font-size: 24px;
      color: #333;
      text-align: center;
    }

    .contact-form label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #555;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 12px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .contact-form button {
      background-color: #0078D4;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
      width: 100%;
    }

    .contact-form button:hover {
      background-color: #005EA3;
    }   
.scrollbox{
          overflow: scroll;
          width:100%;               
          height:0 Auto;
          display: inline;
          float:right;
          border:px solid black;
}

section{
       column-count:8;
       width:300%;
       
}

.scrollbox-content{
          width:130px;
          background:#f0f0fc;
          border-radius:1em;
          text-align:center;
    
}

.scrollbox-content > a{
            color:green;
            font-weight:1000;
            font-size:65%;            
            text-decoration:none;
            
}


.scrollbox-content > a > img{
            width:115px;
            height:175px;
            margin-top:4.5%;
            margin-right:4.5%;
            margin-left:4.5%;
            border-radius:1em;  
}
   
            
 p{ 
    padding:10px;
    line-height: 150%;
    font-size:80%;
    font-family:times new Roman;
    
}

li{ 
    line-height: 150%;
    font-size:80%;
    font-family:times new Roman;  
}  
.headtext{
         font-family: time new Roman;
         font-weight:1000;
         color: rgb(0,56,135);
         font-size:120%;
         padding:2%;   
}

.space{
      min-height:10vh;   
}

.space2{
      min-height:5vh;   
}


.custom-shape-divider-top-1736625228 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1736625228 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-top-1736625228 .shape-fill {
    fill: #FFFFFF;
}

/** For mobile devices **/
@media (max-width: 767px) {
    .custom-shape-divider-top-1736625228 svg {
        width: calc(100% + 1.3px);
        height: 50px;
    }
}

.footer{
    background-color:#000000;
    text-align:center;
    position: relative;
     
} 

.partners{
       
       background:#000000;
       color:#f0f0f0;
       min-height:25vh;   
    
} 

.partners > b {
        font-family: times new Roman;
        font-weight:1000;
        color: white;
        font-size:120%; 
        text-decoration: underline;  
}

.partners >a >img {
       width:26%;
       padding:5%;
}

sub{
    font-weight:100;
    font-size:10%;
    color: rgb(255,255,255);
   }  


.news-box{
    width:100%;
    line-height: 155%;
    font-size:70%;
    height:auto;
    font-family: times new Roman;
    padding:3%;
    border-radius:1em;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20);
 
   
}
.news-box > img {
     width:30%;
     height:16vh;
     padding-right:5px;
     border-radius:1em;
     float: left;
     
}

.image-gallery > img{
    width:45%;
    height:18vh;
    margin:2%;
    border-radius:1em;
}

.see-more{
    text-align: right;
    padding-right:3%;
    width:100%;
    display : block;
    color:blue;
    font-weight:1000;
    text-decoration:none;
    
}
.photos{
    padding:3%;
    font-weight:1000;
    font-size:150%;
    font-family: times new Roman;
}
.photos > img{
    width: 96%;
    margin:1%;
    border-radius:5px;
}
.Johnnyblur{
    background-image: url('img/Johnnyblur2.png');
    background-repeat:no-repeat;
       background-position: auto;
       background-size: 100%;
       height:60vh;
     
}
.blackbox{
    height:10vh;
    width:100%;
    background:black;
}
.blurbox{
    width:100%;
    margin-top:-25vh;
    height:20vh;   background-image:linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,1.0));
}
.debox{
    width:90%;
    margin-right:5%;
    margin-left:5%;
    border-radius:10px;
    padding:10px;
    background:#f3f3f3;
    margin-top:-10vh;
}
.debox > h2 {
    color:sienna;
    font-weight:1000;
    padding-left:10px;
}
.debox-child{
    width:95%;
    position:relative;
    padding:10px;
    margin-bottom:5%; 
    margin-top:5%;
    margin-right:2.5%; 
    margin-left:2.5%;   
    border-radius:5px;
    background:#fff;
    font-family: times new Roman;
}
.debox-child > i{
    background:#fff;
    position:absolute;
    right:0;
    text-decoration: none;
    margin-top:;
    padding-right:15px;
}
.moreDetials > a{
    color:green;
    text-decoration:none;
    font-weight:100;
}
.debox-child > p{
    background-color:#f3f3f3;
    padding:10px;
    color:black;
    display:none;
    border-radius:5px;
}
.moret{
    display: inline-block;
    position:absolute;
    right:0;
    padding-right:15px;
    padding-top:10px;
}
.h1-h6{
    margin-top:-150%;
    position:absolute;
}

 .highlighted {
      background-color: #d9dcf2;
      padding: 5px;
      border-radius: 5px;
      margin-right: 10px;
      user-select: text;
    }
    .copy-button {
      cursor: pointer;
      border: none;
      background: none;
      font-size: 1.2em;
    }
.copy-button:hover {
      color: #0076ff;
    }
    
/* slide image shows */
.slidebox{                             
        width:95%;
        text-align:center;
        margin:2.5%;
        border-radius:15px;
        font-family:times new Roman;
        color: rgb(20,20,20);
        box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 21px 0 rgba(0, 0, 0, 0.20); 
    
       }
.slidebox-name{
       padding-top:13px;
       padding-bottom:px;
       border-top-right-radius:10px;
       border-top-left-radius:10px;
       color:#000;
}       
      
.slidebox-child {   
      font-size:15px;     
      margin-top:5%;
      height:22vh;
    
}          

#slideshow {
    width: 95%;
    height: 20vh;     
    border-radius:15px;
    opacity: 0;
    transform: translateY(10px);
    animation-fill-mode: forwards;
  }

  @keyframes fadeInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }