@font-face{
    font-family:'Rajadhani';
    src:url("../fonts/Rajdhani-Regular.ttf") format("truetype");
    font-weight:normal;
    font-style:normal
}
@font-face{
    font-family:'Rajadhani';
    src:url("../fonts/Rajdhani-SemiBold.ttf") format("truetype");
    font-weight:bold;
    font-style:normal
}
@font-face{
    font-family:'Montserrat';
    src:url("../fonts/MontserratBold.ttf") format("truetype");
    font-weight:normal;
    font-style:normal
}
body{
    font-family:"Rajadhani",sans-serif;
    font-size:18px;
    color:#fff;
    background-color:#0f0f11
}
@media (max-width: 767px){

    .mt-40{
        margin-top: 4rem !important;
    }
    .container{
        padding:0 30px
    }
}
.height-100{
    height:100vh
}



#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black   ;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 300px;
  height: 250px;
  position: absolute;
  left: 45%;
  /* centers the loading animation horizontally one the screen */
  top: 40%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://media.discordapp.net/attachments/912501458581209103/912537294332895232/maskedsocietylogo.png);
  /* path to your loading animation */
  background-repeat: no-repeat;
background-size: contain !important;

  /* is width and height divided by two */
}

.common-title{
    font-family:"Montserrat",sans-serif !important;
    margin-bottom:15px !important;
    font-weight:bold !important;
    opacity:0 !important;
    -webkit-transform:translateX(-40px) !important;
    -moz-transform:translateX(-40px) !important;
    -ms-transform:translateX(-40px) !important;
    -o-transform:translateX(-40px) !important;
    transform:translateX(-40px) !important;
    -webkit-transition:all 500ms 0ms ease-out !important;
    -moz-transition:all 500ms 0ms ease-out !important;
    -o-transition:all 500ms 0ms ease-out !important;
    -ms-transition:all 500ms 0ms ease-out !important;
    transition:all 500ms 0ms ease-out !important;
}
.common-title.visible{
    opacity:1!important ;
    -webkit-transform:translateX(0) !important;
    -moz-transform:translateX(0) !important;
    -ms-transform:translateX(0) !important ;
    -o-transform:translateX(0) !important;
    transform:translateX(0) !important
}
.common-desc{
    margin-bottom:30px;
    opacity:0;
    -webkit-transform:translateX(-40px);
    -moz-transform:translateX(-40px);
    -ms-transform:translateX(-40px);
    -o-transform:translateX(-40px);
    transform:translateX(-40px);
    -webkit-transition:all 500ms 0ms ease-out;
    -moz-transition:all 500ms 0ms ease-out;
    -o-transition:all 500ms 0ms ease-out;
    -ms-transition:all 500ms 0ms ease-out;
    transition:all 500ms 0ms ease-out
}
.common-desc.visible{
    opacity:1;
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0)
}
.common-button{
    display:inline-block;
    padding:10px 30px;
    background-color:#fff;
    border-radius:13px;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    -webkit-transition:background-color 500ms 0ms ease;
    -moz-transition:background-color 500ms 0ms ease;
    -o-transition:background-color 500ms 0ms ease;
    -ms-transition:background-color 500ms 0ms ease;
    transition:background-color 500ms 0ms ease
}
.common-button:hover{
    background-color:#ff0;
    color:#000
}
.main-nav{
    background-color:transparent;
    -webkit-transition:background-color 300ms ease;
    -moz-transition:background-color 300ms ease;
    -o-transition:background-color 300ms ease;
    -ms-transition:background-color 300ms ease;
    transition:background-color 300ms ease
}
.main-nav .main-logo{
    height:60px;
    margin:15px 0
}
.main-nav .navbar-container{
    width:100%;
    padding:0;
    margin:15px 0;
    list-style:none;
    font-weight: 1000;
}
@media (max-width: 767px){
    #status {
        width: 300px;
        height: 250px;
        position: absolute;
        left: 10%;
        /* centers the loading animation horizontally one the screen */
        top: 40%;
        /* centers the loading animation vertically one the screen */
        background-image: url(https://i.imgur.com/oqDpPMT.png);
        /* path to your loading animation */
        background-repeat: no-repeat;
      background-size: contain !important;
      
        /* is width and height divided by two */
      }

    .main-nav .navbar-container{
        position:absolute;
        top:0;
        right:-50%;
        width:50%;
        background-color:#000;
        height:100vh;
        margin:0;
        padding-top:90px;
        -webkit-transform:translateX(0);
        -moz-transform:translateX(0);
        -ms-transform:translateX(0);
        -o-transform:translateX(0);
        transform:translateX(0);
        -webkit-transition:transform 300ms 0ms ease;
        -moz-transition:transform 300ms 0ms ease;
        -o-transition:transform 300ms 0ms ease;
        -ms-transition:transform 300ms 0ms ease;
        transition:transform 300ms 0ms ease
    }
    .main-nav .navbar-container.active{
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -ms-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%)
    }
}
.main-nav .navbar-container .navbar-item{
    display:inline-block;
    margin-left:50px;
    cursor:pointer
}
@media (max-width: 767px){
    .main-nav .navbar-container .navbar-item{
        display:block;
        margin-left:0;
        padding:15px 30px;
        border-bottom:2px solid #fff
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .main-nav .navbar-container .navbar-item{
        margin-left:40px
    }
}
.main-nav .nav-discord{
    display:inline-block;
    margin-left:50px;
    cursor:pointer
}
@media (max-width: 767px){
    .main-nav .nav-discord{
        width:100%;
        padding:15px 30px;
        margin-left:0;
        border-bottom:2px solid #fff
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .main-nav .nav-discord{
        margin-left:40px
    }
}
.main-nav .nav-discord a{
    display:inline-block
}
.main-nav .nav-discord a span{
    display:none;
    margin-right:10px;
    vertical-align:middle;
    color:#fff
}
@media (max-width: 767px){
    .main-nav .nav-discord a span{
        display:inline-block
    }
}
.main-nav .nav-discord a img{
    display:inline-block;
    vertical-align:middle;
    height:35px
}
.main-nav.dark{
    background-color:#0f0f11
}
.hamburger{
    display:none;
    position:absolute;
    top:15px;
    right:30px;
    width:30px;
    height:30px;
    padding:0;
    -webkit-transform:translateY(50%);
    -moz-transform:translateY(50%);
    -ms-transform:translateY(50%);
    -o-transform:translateY(50%);
    transform:translateY(50%)
}
@media (max-width: 767px){
    .hamburger{
        display:block
    }
}
.hamburger.active>span:nth-child(1){
    -webkit-transform:rotate(35deg);
    -moz-transform:rotate(35deg);
    -ms-transform:rotate(35deg);
    -o-transform:rotate(35deg);
    transform:rotate(35deg)
}
.hamburger.active>span:nth-child(2){
    opacity:0
}
.hamburger.active>span:nth-child(3){
    -webkit-transform:rotate(-35deg);
    -moz-transform:rotate(-35deg);
    -ms-transform:rotate(-35deg);
    -o-transform:rotate(-35deg);
    transform:rotate(-35deg)
}
.hamburger>span{
    display:block;
    width:30px;
    height:3px;
    margin:5px 0;
    background-color:#fff;
    -webkit-transition:all 300ms 0ms ease;
    -moz-transition:all 300ms 0ms ease;
    -o-transition:all 300ms 0ms ease;
    -ms-transition:all 300ms 0ms ease;
    transition:all 300ms 0ms ease
}
.hamburger>span:nth-child(1){
    -webkit-transform-origin:top left;
    -moz-transform-origin:top left;
    -ms-transform-origin:top left;
    -o-transform-origin:top left;
    transform-origin:top left
}
.hamburger>span:nth-child(3){
    -webkit-transform-origin:bottom left;
    -moz-transform-origin:bottom left;
    -ms-transform-origin:bottom left;
    -o-transform-origin:bottom left;
    transform-origin:bottom left
}
@keyframes arrow{
    from{
        bottom:0px
    }
    to{
        bottom:10px
    }
}
.section-banner{
    position:relative;
    height:100vh;
    background-image:url("https://media.discordapp.net/attachments/912501458581209103/912519514296557628/thesociety.png?width=1620&height=810");
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center -25px;

}
@media (max-width: 767px){
    .section-banner{
        height:100vh;
        background-position:center -.5px;
        background-image: url("/images/finalmobile.png") !important;
        background-size: 100% 100% !important;
    }

}
@media (min-width: 768px) and (max-width: 991px){
    .section-banner{
        height:75vh
    }
}

.wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;}
 
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.section-banner .scroll-container{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    animation-name:arrow;
    animation-duration:1000ms;
    animation-direction:alternate;
    animation-iteration-count:infinite
}
.section-banner .scroll-container .scroll-text{
    font-size:14px
}
.section-banner .scroll-container .scroll-arrow>img{
    height:30px
}
.section-banner .mobile-logo{
    position:absolute;
    bottom:60px;
    left:0;
    right:0;
    text-align:center;
    display:none
}
.section-banner .mobile-logo>img{
    height:135px
}
.section-about{
    position:relative
}
@media (max-width: 767px){
    .section-about{
        padding-top:20px
    }
}
.section-about .about-container{
    margin-right:5%
}
@media (max-width: 767px){
    .section-about .about-container{
        margin-right:0
    }
}
.section-about .img-container-float{
    position:absolute;
    top:0;
    right:0;
    width:40%;
    height:100%;
    background-image:url("https://i.imgur.com/oTNoO2b.gif");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:top center
}
@media (max-width: 767px){
    .section-about .img-container-float{
        display:none
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .section-about .img-container-float{
        display:none
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .section-about .img-container-float{
        width:50%;
        background-size:cover
    }
}
@media (max-width: 767px){
    .section-about .height-100{
        height:auto
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .section-about .height-100{
        height:50vh
    }
}
@media (max-width: 767px){
    .section-roadmap{
        padding:50px 0
    }

    .section-team{
        padding:50px 0
    }

}
@media (max-width: 767px){
    .section-roadmap{
        background-image:none
    }
}
.section-roadmap .roadmap-header{
    padding-top:75px;
    margin-bottom:50px
}
@media (max-width: 767px){
    .section-roadmap .roadmap-header{
        padding-top:0
    }
}
.section-roadmap .roadmap-container{
    position:relative
}
.section-roadmap .roadmap-container .roadmap-item{
    position:relative;
    margin-bottom:75px
}
@media (max-width: 767px){
    .section-roadmap .roadmap-container .roadmap-item{
        margin-bottom:50px
    }
}
.section-roadmap .roadmap-container .roadmap-item:last-child{
    margin-bottom:0;
    padding-bottom:75px
}
@media (max-width: 767px){
    .section-roadmap .roadmap-container .roadmap-item:last-child{
        padding-bottom:0
    }
}
.section-roadmap .roadmap-container .roadmap-item:last-child:after{
    height:0
}
.section-roadmap .roadmap-container .roadmap-item:before{
    content:'';
    position:absolute;
    left:-163px;
    top:8px;
    width:35px;
    height:35px;
    border-radius:100%;
    background: white;
    z-index: 9999;
}
@media (max-width: 767px){
  
    .qt{
        height: 161vh!important;
    }
    .section-roadmap .roadmap-container .roadmap-item:before{
        left:-88px;
        top:0
    }
}
.section-roadmap .roadmap-container .roadmap-item:after{
    content:'';
    position:absolute;
    left:-150px;
    top:15px;
    width:8px;
    height:-webkit-calc(100% + 75px);
    height:-moz-calc(100% + 75px);
    height:-o-calc(100% + 75px);
    height:calc(100% + 75px);
    background:white
}



@media (max-width: 767px){
    .section-roadmap .roadmap-container .roadmap-item:after{
        left:-75px;
        top:0
    }
}
.section-roadmap .roadmap-container .roadmap-content{
    opacity:0;
    -webkit-transform:translateX(-40px);
    -moz-transform:translateX(-40px);
    -ms-transform:translateX(-40px);
    -o-transform:translateX(-40px);
    transform:translateX(-40px);
    -webkit-transition:all 500ms 0ms ease-out;
    -moz-transition:all 500ms 0ms ease-out;
    -o-transition:all 500ms 0ms ease-out;
    -ms-transition:all 500ms 0ms ease-out;
    transition:all 500ms 0ms ease-out
}
.section-roadmap .roadmap-container .roadmap-content.visible{
    opacity:1;
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0)
}
.section-roadmap .roadmap-bg{
    width:100%;
    pointer-events:none;
    margin-top:90px
}
@media (max-width: 991px){
    .section-roadmap .roadmap-bg{
        display:none
    }
}
@keyframes ticker-kf{
    0%{
        transform:translate3d(0, 0, 0)
    }
    100%{
        transform:translate3d(-88rem, 0, 0)
    }
}
.section-preview .preview-title{
    padding:25px 0;
    text-align:center
}



.section-preview .ticker-container{
    overflow:hidden;
scroll-behavior: auto;}
.section-preview .ticker-container .img-ticker{
    display:flex;
    margin-left:-1rem;
    margin-right:-1rem;
    animation:ticker-kf 33s linear infinite;

}
.section-preview .ticker-container .img-ticker .ticker-item{
    width:20rem;
    margin-left:1rem;
    margin-right:1rem;
    flex:none;
    align-self:flex-start
}
.section-team{
    padding:75px 0
}
@media (max-width: 767px){
    .section-team{
        padding:40px 0 50px
    }
}
.section-team .team-desc{
    margin:0 0 45px
}
.section-team .team-container{
    text-align:center
}
@media (max-width: 767px){
    .section-team .team-container{
        height:400px;


    }
}
.section-team .team-container .team-wrapper{
    cursor:pointer;
}
.section-team .team-container .team-img,.section-team .team-container .team-details{
    display:none
}
.section-team .team-container .team-image{
    width:90%;
    margin:0 auto 25px;
    padding-top:90%;
    border-radius:10%;
    background-size:cover
}
@media (max-width: 767px){
    .section-team .team-container .team-image{
        width:70%;
        padding-top:65%
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .section-team .team-container .team-image{
        width:80%;
        padding-top:60%
    }
}
@media (min-width: 992px) and (max-width: 1199px){
    .section-team .team-container .team-image{
        width:80%;
        padding-top:60%
    }
}
.section-team .team-container .team-name{
    font-weight:bold;
    font-size:20px;
    text-transform:uppercase
}
@media (max-width: 767px){
    .section-team .team-container .team-name{
        font-size:17px
    }
}
.section-team .team-container .team-position{
    font-size:16px;
    text-transform:uppercase
}
@media (max-width: 767px){
    .section-team .team-container .team-position{
        font-size:12px
    }
}
.section-team .team-container .team-link{
    display:inline-block;
    margin:10px
}
.section-team .team-container .team-link>img{
    height:22px
}
.mobile-carousel{
    margin-top:0
}
.mobile-carousel .slick-slide{
    margin-left:10px;
    
}
#teamModal .modal-content{
    background-color:#000
}
#teamModal .modal-content .modal-wrapper{
    padding:20px 30px 20px 5px
}
@media (max-width: 991px){
    #teamModal .modal-content .modal-wrapper{
        padding:30px
    }
}
#teamModal .modal-content .modal-wrapper .modal-name{
    font-size:25px;
    font-family:"Montserrat",sans-serif
}
#teamModal .modal-content .modal-wrapper .modal-position{
    font-size:16px;
    margin-bottom:15px
}
#teamModal .modal-close{
    position:absolute;
    top:17px;
    right:10px;
    width:25px;
    height:25px;
    font-size:25px;
    font-weight:bold;
    text-align:center;
    line-height:25px;
    cursor:pointer
}
@media (max-width: 991px){
    #teamModal .modal-close{
        top:0;
        right:0;
        width:50px;
        height:50px;
        font-size:50px;
        line-height:50px;
        background-color:#000
    }
}
.section-join{
    padding:80px 0;
    background-color: #1d1d1d;
    background-size:100% auto;
    background-position:top right;
    background-repeat:no-repeat;
    margin-bottom: 10px;
}
@media (max-width: 767px){
    .section-join{
        background-size:cover;
        background-position:top left;
        height: 32vh !important;
        padding: 30px 0 !important;
        text-align: center;
    }
    .bttna{
        margin: auto !important;
    }
    #clockdiv {
        font-size: 25px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .section-join{
        height:auto;
        background-size:auto 100%
    }
}
#footer{
    padding:30px 0
}
#footer .footer-logo{
    height:100px
}
#footer .footer-terms{
    color:#fff
}
#footer .footer-terms:hover{
    color:#fff
}
#footer .footer-copy{
    margin-top:10px
}
@media (max-width: 767px){
    #footer .footer-copy{
        margin-top:15px;
        margin-bottom:15px
    }
}
#footer .footer-icon{
    display:inline-block;
    margin-left:15px
}
#footer .footer-icon>img{
    height:35px
}