@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap');
.s3{
background: rgb(186,44,198);
background: linear-gradient(180deg, rgba(186,44,198,1) 21%, rgba(183,52,136,1) 42%, rgba(88,22,30,1) 73%, rgba(0,0,0,1) 100%);
}
#club_heading{
    color:white;
    font-weight:bolder;
    text-align:center;
    font-size:10vh;
    top: 0;
    margin-bottom: -2.5rem;
    font-family: 'Indie Flower', cursive;
}
#scrollclubs{ 
    padding-top:32px;
    overflow-y: hidden;
   
}

@media(max-width:480px){
    #scrollclubs{
    
        padding-top:16px;
       
    }
    .display_logos{
        text-align: center;
        word-spacing: 30px;;
        
    }
    #originals_logo{
        width:30%;
        height:15%;
        z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 24px;

    }
    #kalamdot_logo{
        width:30%;
        height:15%;
    }
    #meraki_logo{
        width:30%;
        height:15%;
    }
    #eunoia_logo{
        width:30%;
        height:15%;
    }
    #mukhota_logo{
        width:30%;
        height:15%;
    }
    #orion_logo{
        width:30%;
        height:15%;
    }
    #panache_logo{
        width:30%;
        height:15%;
    }
    #sdt_logo{
        width:30%;
        height:15%;
    }
    .display_logos{
        text-align: center;
        padding :60px;
        box-sizing: border-box;
    }
    

    
    
    
    
}
.display_logos{
    text-align: center;
    padding :60px;
    box-sizing: border-box;
}
.display_logos>*{

    cursor: pointer;
    padding:12px;
    width:20%;
    height:auto;
    
   
}
@media (min-width:481px) and ( max-width:800px){
    #scrollclubs{
    
        padding-top:16px;
       
    }
    .display_logos{
        text-align: center;
        
        
    }
    #originals_logo{
        width:30%;
        height:40%;

    }
    #kalamdot_logo{
        width:30%;
        height:auto;
    }
    #meraki_logo{
        width:30%;
        height:auto;
    }
    #eunoia_logo{
        width:30%;
        height:auto;
    }
    #mukhota_logo{
        width:30%;
        height:auto;
    }
    #orion_logo{
        width:30%;
        height:auto;
    }
    #panache_logo{
        width:30%;
        height:auto;
    }
    #sdt_logo{
        width:30%;
        height:auto;
    }

    
    
    
    
}
#originals_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#sdt_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#mukhota_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#panache_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#orion_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#meraki_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#eunoia_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#kalamdot_logo:hover{
    opacity:0.6;
    z-index: 10;
      transform: scale(1.025);
      box-shadow: 0 1rem 2rem 1rem #100e1733;
      border-radius: 40px;
      transition: all .5s ease;
      box-shadow: 0 0 1rem 0 #100e1744;
}
#way-to-gallery{
    width:24%;
    
    border-radius:10px;
    border:none;
    background-color:#3f97d4;
    
    height:50px;

}
#way-to-gallery:hover{
    width:24%;
    border-radius:10px;
    border:1px solid black;

    border:none;
    color: white;
    background-color:#78b7e2;
    
    height:50px;

}
#way-to-gallery > *{
    color:black;
    font-weight:bold;
    font-size:100%;
    text-decoration: none;
}
.holder_club{display:flex;flex-direction: row;}
.club-head-details{
    vertical-align: middle;
    text-align:center;
    width:30vw;
}
.a2{
    padding:0px;
}

/*   originals */
.modal_originals {
    
    text-align: center;
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .originals-close:hover,
.originals-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.originals-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .originals-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
    font-family: 'Poiret One', cursive;
    font-weight: bold;
    
    
  }
  .originals-images-content{
      width:68vw;
      text-align:center;
      padding-top:48px;
      height:100%;
      padding-left:10vw;
        padding-right:0%;
      

  }
 #originals-desc{
     text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
 }
 .holder-club-logo{
     display:flex;
     flex-direction: column;
     text-align:center;
 }
 @media (max-width:700px){
    #originals-desc{
        margin-left:0px;
        text-align:center;
        margin-right:0px;
    }
    .originals-images-content{
        width:100%;
        text-align:center;
        padding-top:48px;
        padding-right:0px;
        padding-left:0px;
    }
    .holder_club{display:flex;flex-direction: column;}
    .holder-club-logo{
        display:flex;
        flex-direction: row;
        text-align:center;
    }
    .club-head-details{
        width:100%;
        
        text-align:center;
        align-content: center;
        padding-left: 20%;
        padding-right:20%;
       
    }
    .a2{
        padding:20px;
        
    }
 }
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #originals-heading{
      text-align:center;
      color:white;
  }
  




/* kalamdot */
  .modal_kalamdot {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .kalamdot-close:hover,
.kalamdot-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.kalamdot-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .kalamdot-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .kalamdot-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#kalamdot-desc{
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #kalamdot-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .kalamdot-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #kalamdot-heading{
      text-align:center;
      color:white;
  }



  /* meraki */
  .modal_meraki {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .meraki-close:hover,
.meraki-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.meraki-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .meraki-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .meraki-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#meraki-desc{
   
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #meraki-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .meraki-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #meraki-heading{
      text-align:center;
      color:white;
  }




  /* mukhota  */

  .modal_mukhota {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .mukhota-close:hover,
.mukhota-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.mukhota-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .mukhota-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .mukhota-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#mukhota-desc{
   
  text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #mukhota-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .mukhota-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #mukhota-heading{
      text-align:center;
      color:white;
  }



  /*   orion    */


  .modal_orion {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .orion-close:hover,
.orion-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.orion-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .orion-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .orion-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#orion-desc{
   
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #orion-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .orion-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #orion-heading{
      text-align:center;
      color:white;
  }

  /* panache */
  .modal_panache {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .panache-close:hover,
.panache-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.panache-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .panache-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .panache-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#panache-desc{
   
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #panache-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .panache-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #panache-heading{
      text-align:center;
      color:white;
  }


  /* sdt */
  .modal_sdt {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .sdt-close:hover,
.sdt-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.sdt-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .sdt-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .sdt-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#sdt-desc{
   
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #sdt-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .sdt-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #sdt-heading{
      text-align:center;
      color:white;
      
      
  }
  @media (max-width:600px){
    #sdt-heading{
        text-align:center;
        color:white;
        
    }
  }

  /*  eunoia */
  .modal_eunoia {
    display: none; 
    position: fixed;
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.9); 
  }
  .eunoia-close:hover,
.eunoia-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.eunoia-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .eunoia-modal-content {  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    text-align:center;
  }
  .eunoia-images-content{
    width:68vw;
    text-align:center;
    padding-top:48px;
    height:100%;
    padding-left:10vw;
      padding-right:0%;
    

}
#eunoia-desc{
   
   text-align:center;
     color:white;
     font-family: 'Poiret One', cursive;
}
.holder-club-logo{
   display:flex;
   flex-direction: column;
   text-align:center;
}
@media (max-width:700px){
  #eunoia-desc{
      margin-left:0px;
      text-align:center;
      margin-right:0px;
  }
  .eunoia-images-content{
      width:100%;
      text-align:center;
      padding-top:48px;
      padding-right:0px;
      padding-left:0px;
  }
  .holder_club{display:flex;flex-direction: column;}
  .holder-club-logo{
      display:flex;
      flex-direction: row;
      text-align:center;
  }
  .club-head-details{
      width:100%;
      
      text-align:center;
      align-content: center;
      padding-left: 20%;
      padding-right:20%;
     
  }
  .a2{
      padding:20px;
      
  }
}
  
  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
  }
  #eunoia-heading{
      text-align:center;
      color:white;
      
  }