/* rock it  */



/* globals - for main stylesheet */

html {
    margin-top: 0px !important;
}

body{
    margin:0;
}

.no-scroll {
    overflow: hidden;
}

svg {
    image-rendering: smooth;
}

.main-width{
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
}

.mob-hide{
    display: none;
}

.flex{
    display: flex;
}

@media only screen and (min-width: 900px) {
    .mob-show {
        display: none;
    }

    .mob-hide{
        display: inline-flex;
    }
}


header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}

header .flex{
    justify-content: space-between;
    align-items: center;
    gap:12px;
}

header .main-width{
    padding-left: 34px;
    padding-right: 34px;
    padding-top: 44px;
    max-width: 1400px;
}

header .logo img{
    width: 87.373px;
    height: auto;
}

header .navigation{
    display: none;
}


header {
    transition: all 0.3s ease-in-out;
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 1000;

}

header.sticky .main-width{
    transition: all 0.3s ease-in-out;
    padding-top: 20px;
    padding-bottom: 20px;
}



@media only screen and (min-width: 900px) {

    header .mob-login{
        display: none!important;
    }

    header .logo img{
        width: 127.373px;
        height: auto;
    }

    header .main-width{
        padding-top: 41px;
        padding-left: 45px;
        padding-right: 45px;
    }


    header .navigation{
        display: inline-flex;
    }

    header .nav{
        display: flex;
    }

    header .logo img{
        width: auto;
        height: 140px;
        transition: all 0.3s ease-in-out;
    }

    header.sticky .logo img{
        width: auto;
        height: 80px;
        transition: all 0.3s ease-in-out;
    }


}


.hamburger{
    cursor: pointer;
}

.hamburger span{
    transition: all 0.5s ease-in-out;
}

.hamburger > div{
    width: 20px;
    height: 4px;
    display: flex;
    margin-bottom: 4px;
}

.hamburger > div span{
    width: 4px;
    height: 4px;
    display: block;
    background: #fff;
    margin-bottom: 8px;

}


/* Hamburger animation */

.hamburger.open > div:nth-child(1) span:nth-child(2), .hamburger.open > div:nth-child(1) span:nth-child(4){
    transform: translateY(4px);
}

.hamburger.open > div:nth-child(3) span:nth-child(2), .hamburger.open > div:nth-child(3) span:nth-child(4){
    transform: translateY(-4px);
}

.hamburger.open > div:nth-child(2) span:nth-child(1){
    transform: translatex(8px);
}

.hamburger.open > div:nth-child(2) span:nth-child(2){
    transform: translatex(4px);
}

.hamburger.open > div:nth-child(2) span:nth-child(4){
    transform: translatex(-4px);
}

.hamburger.open > div:nth-child(2) span:nth-child(5){
    transform: translatex(-8px);
}

.hamburger.open > div:nth-child(1) span:nth-child(3){
    transform: translateY(8px);
}

.hamburger.open > div:nth-child(3) span:nth-child(3){
    transform: translateY(-8px);
}


.mob-menu {
    opacity: 0;
    z-index: -99;
    position: fixed;
    height: 100vh;
    width: 100%;
    background: #100D0C;
    top: 0;
    left: 0;
    padding-top: 192px;
    transition: all 0.3s ease-in-out;
}

.mob-menu.visible{
    opacity: 1;
    z-index: 98;
}

.nav .menu-item a{
    color: #FFF;
    font-family: "libre-franklin", sans-serif;
    text-align: right;
    font-size: 17px;
    font-style: italic;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.34px;
    text-decoration: none;
}

.nav .menu-item {
    margin-bottom: 48px;
    overflow: hidden;
}

.nav .sub-menu{
    opacity: 0;
    height: 0;
    transform: translateY(-300px);
    transition: all 0.5s ease-in-out;
    padding-left: 0;
}


header .nav .sub-menu{
    position: absolute;
}


.nav .sub-menu .menu-item{
    margin-bottom: 12px;
    margin-top: 24px;
}

.mob-menu .nav .menu-item-has-children.open .sub-menu, header .nav .menu-item-has-children:hover .sub-menu{
    opacity: 1;
    transform: translateY(0px);
    height: auto;
    width: 100%;
}

.nav .menu-item-has-children a{
    position: relative;
}

.nav .menu-item-has-children > a:after{
    content: url("./assets/images/arrow-nav.svg");
    position: absolute;
    right: -26px;
    top: -2px;
    width: 17.063px;
    height: 20px;
    transition: all 0.5s ease;
}

.nav .menu-item-has-children.open > a:after, header .nav .menu-item-has-children:hover > a:after{
    transform: rotate(540deg);
}

header .nav .menu-item-has-children:hover > a:after{
    filter: brightness(0) saturate(100%) invert(78%) sepia(55%) saturate(2359%) hue-rotate(92deg) brightness(90%) contrast(102%);
    top: 4px;
}

.nav #signout-button{
    cursor: pointer;
}

.nav .button{
    width: auto;
    padding-left: 25px;
    padding-right: 25px;
}

@media only screen and (min-width: 900px) {

    .nav .menu-item-has-children > a:after{
        content: url("./assets/images/arrow-nav-desk.svg");
        position: absolute;
        right: -26px;
        top: -2px;
        width: 17.063px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header .nav .menu-item-has-children > a{
        padding-right: 24px;
    }

    header .nav .menu-item-has-children > a:after{
        right: 0px;
    }

    header .nav{
        list-style: none;
        display: flex;
        gap:40px;
        align-items: center;
    }

    .nav .menu-item {
        margin-bottom: 0px;
    }

    .nav .menu-item a{
        color: #FFF;
        font-family: "libre-franklin", sans-serif;
        font-size: 17px;
        font-style: italic;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.34px;

    }

    .nav .sub-menu .menu-item{
        margin-top: 0;
        margin-bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        padding:18px 28px;
        max-width: 200px;
        box-sizing: content-box;
    }

    .nav .sub-menu .menu-item a{
        color: #DCDAE8;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 16.8px */
        text-transform: uppercase;
    }

    .nav .sub-menu{
        padding-top:28px;
    }


}




/* globals - for main stylesheet */


.hero{
    background-image: url('./assets/images/Background-new.webp');
    background-size: contain;
    background-repeat: repeat-x;
    overflow: hidden;
    position: relative;
}

.hero:after{
    content: "";
    background-image: url('./assets/images/Header-Pixels.svg');
    background-size: contain;
    width: 140.001px;
    height: 232.465px;
    position: absolute;
    right:0;
    z-index: 0;
    top: 600px;
}

.hero .main-width{
    position: relative;
    max-width: 1280px;

}

.hero .main-width > div:nth-child(1){
    padding-top: 180px;
    z-index: 96;
}

.hero .main-width:after{
    content: "";
    background-image: url('./assets/images/glow-bottom-left.webp');
    background-size: contain;
    width: 935px;
    height: 978px;
    position: absolute;
    bottom: -300px;
    left: -600px;
    z-index: 0;
}

.hero .main-width > *{
    z-index:2;
}

.hero .flex{
    display: flex;
    flex-direction: column;
    gap:25px;
}


.hero .bg img{
    margin-bottom: -32px;
}


@media only screen and (min-width: 900px) {

    .hero:after{
        top: 210px;
    }

    .hero .main-width{
        padding-bottom:91px;
    }

    .hero .flex{
        flex-direction: row;
        gap:8px;
    }

    .hero .flex > div{
        max-width: 50%;
        width: 100%;
    }

    .hero .main-width:after{
        bottom: -500px;
        left: -750px;

    }

    .hero .main-width > div:nth-child(1){
        padding-top: 300px;
    }

    .hero .main-width:before{
        content: "";
        background-image: url('./assets/images/glow top-right.webp');
        background-size: contain;
        width: 935px;
        height: 978px;
        position: absolute;
        top: -300px;
        right: -500px;
        z-index: 0;
    }


}

@media only screen and (min-width: 1024px) {


    .hero .flex {

        gap: 110px;
    }
}

.hero h1{
    text-indent: 100vw;
    text-wrap: nowrap;
    width: calc(100vw - 48px);
    height: calc(100vw * 0.41);
    position: relative;
    margin-bottom: 42px;
}

.hero h1:after{
    content: '';
    background-image: url('./assets/images/hero-h1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: calc(100vw - 48px);
    height: calc(100vw * 0.41);
    left:0;

}

.hero h1:before{
    content: '';
    background-image: url('./assets/images/hero-floater.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 51.809px;
    height: 35.873px;
    right: 0;
    bottom: -28px;

}

@media only screen and (min-width: 576px) {

    .hero h1{
        width: 323px;
        height: 160.578px;
    }

    .hero h1:after{
        width: 323px;
        height: 160.578px;
    }

    .hero h1:before{
        width: 103.809px;
        height: 71.873px;
        right: -120px;
        bottom: -20px;
    }

}

.hero p{
    color: #FFF;
    font-family: "libre-franklin", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 24px;
}


.hero .cta{
    margin-top: 40px;
}

.hero .cta a{
    color: #10F26E;
    font-family: "libre-franklin", sans-serif;
    font-size: 25px;
    font-style: italic;
    font-weight: 800;
    line-height: 100%; /* 40px */
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hero:after{
    display: none;
}


@media only screen and (min-width: 464px) {

    .hero:after{
        display: block;
    }

    .hero .cta a{
        font-size: 40px;
    }
}

@keyframes moveDownUp {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(4px);
    }
    40% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(0);
    }
}

.hero .cta a:after{
    content: url("./assets/images/cta-arrow.svg");
    position: absolute;
    right: -26px;
    top: -2px;
    width: 17.063px;
    height: 9.598px;
    animation: moveDownUp 3s ease-in-out infinite;

}




@media only screen and (min-width: 900px) {


    .hero .bg{
        display: flex;
        align-items: flex-end;
    }

    .hero .bg img{
        margin-bottom: -126px;
        max-height: 600px;
    }
}
@media only screen and (min-width: 1100px) {


    .hero .bg img{
        margin-bottom: -88px;
        width: auto;
        transform: scale(1.3);
    }
}




/* Tournament Detail */

.hero.lol h1{
    color: #FFF;
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 45px */
    text-transform: uppercase;
    text-indent: unset;
    text-wrap: wrap;
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 42px;
    display: flex;
    flex-direction: column;
}



.hero.lol h1:after{
    display: none;
}

.hero.lol .main-width{
    padding-bottom:80px;
}

.hero.lol p{
    max-width: 600px;
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.hero.lol .main-width > div > p{

    margin-top:38px;
}


.hero.lol h1 strong{
    color: #D8F000;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 133%;
    text-transform: uppercase;
}


.hero.lol .flex {
    gap: 32px;
}


.hero.lol .dates{
    background: #003A29;
    background: #003A29;
    display: flex;
    flex-wrap: wrap;
    padding: 35px 35px;
    gap:32px;
    margin-top: 48px;
    justify-content: center;
}

.hero.lol .dates .item {
    width: 100%;
    text-align: center;
}


.hero.lol .dates .item p{
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}

.hero.lol .dates .item span{
    color: #08F86D;
    font-family: "libre-franklin", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 28px; /* 127.273% */
}

.hero.lol:after {
    display: none;
}

.hero.lol .bg img{
    transform: scale(1.5);
    margin-bottom: -108px;
    transform: scale(1.5) translateY(16px);
}

.hero.lol .bg{
    min-height: 200px;
}

@media only screen and (min-width: 900px) {

    .hero.lol .bg img{
            transform: scale(1.65) translateY(-40px);
        }


    .hero.lol h1{
        font-size: 80px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 80px */
        text-transform: uppercase;
    }

    .hero.lol h1 strong{
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 133%;
        text-transform: uppercase;
    }


    .hero.lol .flex {
        gap: 0;
    }

    .hero.lol .dates{
        padding: 50px 74px;
        gap:36px;
        margin-top: 60px;
    }

    .hero.lol .dates .item {
        width: calc(50% - 18px);
    }

    .hero.lol .bg img {
        margin-bottom: -12px;
        margin-left: 40px;
        max-height: unset;
        width: 130%;
        max-width: 130%;

    }
}


@media only screen and (min-width: 1024px) {
    .hero.lol .flex {
        gap: 0;
    }
}


@media only screen and (min-width: 3000px) {

    .hero.lol .bg img{
        margin-bottom: -8px;
        transform: scale(1.7) translateY(0px);
    }

}


/* Prizes component */


.button.secondary.arrow-right img {
   margin-top: 0;
}


.section-card.home  .card-sign-up p{
    margin-bottom: 24px;
}

.section-card.home p.sm{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 21px */
    margin-bottom: 70px;
}

.section-new-bg{
    background: url(/wp-content/themes/nedbank-esports/assets/images/prizes-bg.webp) left top repeat-x;
    background-size: auto 100%;
}

.section-card.lol-prizes {
    background:none;
    background-size: auto 100%;
    color: white;
    position: relative;
    padding-bottom: 115px;
}

.section-card.hp-prizes {

    padding-bottom: 0px;
}



@media screen and (min-width: 768px) {

    .section-card.home{
        padding-top: 0px;
    }


    .section-card.lol-prizes {
        background:none;
        background-size: auto 100%;
    }
}


.fan-prizes {
    background:none;
    background-size: auto 100%;
    color: white;
    position: relative;
}

.section-card .fan-prizes{
    background: none;
}

.fan-prizes .main-width{
    background: url(/wp-content/themes/nedbank-esports/images/fan_headshot_right.webp) left top no-repeat;
    background-size: 70vw;
    background-position: bottom;
    padding-bottom: 62vw;
}

@media screen and (min-width: 1300px) {

    .fan-prizes .main-width{
        background-size: 1000px;
    }
}
@media screen and (max-width: 1024px) {

    .section-card .fan-prizes .main-width{
        background-position: calc(100% + 90px) 100%;
        background-size: contain;
    }
}

.fan-prizes .flex{
    flex-direction: column;
}

.fan-prizes h2{
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    margin-bottom: 32px;
}

.fan-prizes p{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 21px */
    margin-bottom: 24px;
}

.fan-prizes .card p {
    max-width: 318px;
}



.fan-prizes .card{
    background: #000;
    padding: 40px 30px;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 18px */
    position: relative;
}

.fan-prizes .card > div{
    margin-bottom: 21px;
}

.fan-prizes .card h3{
    color: #FFF;
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 36px */
    margin-bottom: 21px;
}

.fan-prizes .card h3 span{
    color: #00E677;
}

.fan-prizes .card .button:nth-of-type(1){
    margin-bottom: 24px;
}

.fan-prizes .card .button{
    width: 100%!important;
}

.fan-prizes .heart {
    position: relative;
    width: 135.605px;
    height: 119.355px;
    top: -28px;
    left: 0;
}

.hp-prizes .fan-prizes .heart {

    top: 90px;
    left: 0;
}


.fan-prizes .parrallax.pixels-right {
    position: absolute;
    right: 0;
    top: -64px;
    width: 65px;
}


@media screen and (min-width: 768px) {

    .fan-prizes .card .button{
        width: 280px!important;
    }

    .fan-prizes .main-width{
        background-position: bottom right;
        padding-bottom: 0;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start !important;
    }
    .fan-prizes .copy{
        text-align:left !important;
    }

    .fan-prizes .flex {
        gap: 230px;
        justify-content: space-between;
        flex-direction: row;
    }

    .fan-prizes h2{

        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 60px */

    }

    .fan-prizes h3{
        color: #D8F000;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 197%; /* 47.28px */

    }

    .fan-prizes p{
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        max-width: 555px;
    }

    .fan-prizes .card {
        max-width: 480px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .fan-prizes .heart{
        position: absolute;
        top:0;
        left: 0;
        width: 208.395px;
        height: 183.422px;
    }

    .fan-prizes .parrallax.pixels-right {
        width: 140px;
        top: 0;
    }

}



.section-details {
    background: url(/wp-content/themes/nedbank-esports/assets/images/Background.webp) left top repeat-x;
    background-size: auto 100%;
    color: white;
    position: relative;
    overflow: visible;
    text-align: center;
    padding-bottom: 80px;
}

.section-details .flex{
    flex-wrap: wrap;
    gap:8px;
    top: -50px;
    position: relative;
}

.section-details .flex .item{
    background: #003A29;
    padding:25px;
    padding-top: 48px;
    padding-bottom: 54px;
    text-align: center;
}

.section-details .flex .item h4{
    color: #FFF;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 24px;
    margin-top: 24px;
}


.section-details .flex .item h4 span{
    color: #D8F000;
}

.section-details .terms{
    color: #868686;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 60px;
}

 .social {
    display: inline-flex;
    gap: 24px;
    margin: 40px auto;
    align-items: center;
}

.social a:hover img {
    filter: brightness(0) saturate(100%) invert(71%) sepia(89%) saturate(471%) hue-rotate(85deg) brightness(104%) contrast(106%);
}

.section-details h3{
    color: #FFF;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 32px;
}
.section-details h3 span{
    color: #D8F000;
}

.section-details .button{
    margin-bottom: 32px;
}

 .social a:hover img {
    transition: all .2s linear;
}


@media screen and (min-width: 768px) {

    .section-details .flex{
        flex-direction: row;
        gap:42px;
    }

    .section-details .flex .item{
        max-width: calc(50% - 21px);
    }

    .section-details .flex .item h4{
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 40px */
        text-transform: uppercase;

    }



}



/* Twitch  component */

.section-twitch {
    background: url(/wp-content/themes/nedbank-esports/assets/images/bg-reverse.webp) left top repeat-x;
    background-size: auto 100%;
    color: white;
    position: relative;
    overflow: visible;
    text-align: center;
    padding-bottom: 80px;
    padding-top: 132px;
    padding-bottom: 172px;
}

.section-twitch .main-width > .flex > img:first-of-type{
    position: relative;
    transform: scale(1.1);
    left: -64px;
}

.section-twitch .flex {
    align-items: center;
    flex-direction: column;
    gap:48px;
}

.section-twitch .flex.logo-flex{
    margin-top: 48px;
    max-height: 60px;
    gap:48px;
}

.section-twitch .logo-flex img{
    max-height: 60px;
    width: auto;
    height: 100%;
    max-width: unset;
}

.section-twitch .flex >div:nth-child(2){
    text-align: left;
}

.section-twitch p{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 22.5px */
    letter-spacing: -0.15px;
    margin-top: 32px;
}

.section-twitch .button{
    margin-top: 32px;
}

.section-twitch .button.secondary.arrow-right img:nth-last-of-type(n+2) {
    margin: 0px 12px 0 0;
    width: 14px;
}


@media screen and (min-width: 1140px) {
    .section-twitch .flex {
        align-items: center;
        flex-direction: row;
        gap:0px;
    }

    .section-twitch p{
        max-width: 541px;
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px; /* 140% */
    }

    .section-twitch .main-width > .flex > img:first-of-type{
        position: relative;
        transform: scale(1);
        left: -100px;
    }

}


/*  Modal Join */

.modal-join {
    display: none;
    position: relative;
    padding: 88px 92px;
    max-width: 986px;
    margin: auto;
    width: 100%;
    margin-left: calc(50% - 493px);
    margin-top: calc(50vh - 350px);
}
.modal-join.visible {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 9999;
}

.modal-join .close{
    width: 42px;
    height: 42px;
    position: absolute;
    top: 50px;
    right: 50px;
}

.modal-join .powerup{
    max-width: 374.245px;
    height: auto;
    margin-bottom: 48px;
}

.modal-join .nedbank{
    max-width: 78px;
    height: auto;

}

.modal-join .flex{
   align-items: center;
    margin-bottom: 32px;
    gap:24px;
}

.modal-join .flex h3{
    color: #000;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

}

.modal-join p{
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 48px;
}

.waitlist-form{
    display: flex;
    gap:16px;
    align-items: flex-start;
    flex-direction: column;
}

.waitlist-form .field-wrap{
    display: flex;
   flex-direction: row;
    gap:16px;
    align-items: flex-end;
}

.waitlist-form .field-wrap > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.waitlist-form > div{
    display: flex;
    flex-direction: column;
    position: relative;
}

@media screen and (max-width: 760px) {

    .waitlist-form .field-wrap{
        flex-direction: column;
    }
    .waitlist-form .field-wrap > div{
        width:100%;
    }
    .waitlist-form > div{
        width:100%;
    }

}

.waitlist-form > div label{
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.waitlist-form > div input{
    background: #E8E8E8;
    padding: 14px 24px;
    color: #000;
    height: 48px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    min-width: 281px;
}

.waitlist-form .button{
    color: #010504;
    text-align: center;
    font-size: 16px;
    font-style: italic;
    font-weight: 700;
    line-height: 32px; /* 200% */
    background: #10F555;
    height: 48px;
    cursor: pointer;
}

.waitlist-form .msg{
    color: #E60000;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    bottom: -24px;
    margin-bottom: 0;
}

.waitlist-form > div input.error{
    border: 1px solid #E60000;
}

.modal-join .close:hover {
    filter: brightness(0) saturate(100%) invert(71%) sepia(89%) saturate(471%) hue-rotate(85deg) brightness(104%) contrast(106%);
    cursor: pointer;
}

.modal-join  .button[disabled]{opacity:0.2;pointer-events: none;}

@media screen and (max-width: 980px) {

    .modal-join.visible {
        padding: 32px 32px;
        margin-left: 12px;
        width: calc(100% - 24px);
    }

    .modal-join .close{
        width: 32px;
        height: 32px;
        position: absolute;
        top: 32px;
        right: 32px;
    }

    .waitlist-form{
        flex-direction: column;
        align-items: flex-start;
    }

    .waitlist-form > div input{
        min-width: unset;
    }

    .waitlist-form .msg{
        position: relative;
        bottom: 0;
        margin-bottom: 0;
    }



}

@media screen and (max-width: 580px) {

    .modal-join.visible {
        padding-top: 94px;
        margin-top: 50px;
    }

    .modal-join p{
        font-size: 15px;
    }

    .waitlist-form > div input{
        width: 100%;
    }

}


/* Game Rules */

.game-rules{
    margin-top: 165px;
    max-width: 986px;
}

.game-rules .flex{
    flex-wrap: wrap;
    justify-content: space-evenly;
}


.game-rules .flex > div{
   justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 24px;
}

.game-rules .flex > div p{
    color: #D4D3DB;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 361px;
}

.game-rules .button{
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.game-rules h2{
    color: #FFF;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 40px */
    margin-bottom: 40px;
}

.game-rules .button.secondary.arrow-right img.rulebook{
    margin-right: 8px;
    width: 12px;
    height: 15.273px;
}

.game-rules .flex > div strong{
    margin-bottom: 12px;
}

@media screen and (min-width: 980px) {

    .game-rules h2{
        font-size: 60px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 60px */
        margin-bottom: 70px;
    }
}




.competition-details .parrallax.pixels-right {
    position: absolute;
    display: none;
    right: 0;
    width: 65px;
}

@media screen and (min-width: 768px) {
    .competition-details .parrallax.pixels-right {
        width: 140px;
        display: block;
    }
}




.section-prize-details{
    text-align: center;
    background: url(/wp-content/themes/nedbank-esports/assets/images/bg-reverse.webp);
    background-size: auto 100%;
    color: white;
    position: relative;
    padding-bottom: 117px;
    padding-top:106px;
}


.section-prize-details span{
    color: #D8F000;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 197%; /* 47.28px */

}

.section-prize-details h3{
    color: #FFF;
    text-align: center;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

.section-prize-details .item{
    border-bottom: 1px solid #D4D3DB;
    padding-top: 29px;
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
}

.section-prize-details .item h4{
    color: #FFF;
    text-align: center;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 197%; /* 28.368px */

}

.section-prize-details .item h5{
    color: #FFF;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;

    margin-top: 6px;
    margin-bottom: 3px;
}

.section-prize-details .item span{
    color: #D4D3DB;
    text-align: center;
    font-size: 14.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 197%; /* 28.368px */

}

.section-prize-details .item p{
    color:#fff;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 197%; /* 27.58px */
    max-width: 336px;
}

.section-prize-details .item:last-child{
    border-bottom: none;
}

.section-prize-details .item .flex{
    justify-content: center;
    gap:41px;
    margin-bottom: 16px;
}


@media screen and (max-width: 768px) {
    .section-prize-details .item h5{

        font-size: 20px;
    }
    .section-prize-details h3{
        font-size: 38px;
    }


}



/* Updated BGs */

.section-card.hp-prizes{
    background: url(/wp-content/themes/nedbank-esports/assets/images/prizes-bg.webp);
    background-size: auto 100%;
}



.general-modal .modal-content .flex:first-of-type{
    margin-bottom: 24px;
}


@media screen and (max-width: 768px) {

    .general-modal .flex{
        flex-direction: column;
        align-items:  flex-start!important;
    }

    .general-form .textfield{
        max-width: 100%!important;
    }

    .general-modal .form-group {
        margin-bottom: 8px!important;
        width: 100%;
    }

}



@media screen and (min-width: 768px) {
    .section-card .grid .trip {
        grid-column: 1 / span 3;
    }
}

.trip h4{
    color: #D8F000;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 14px;
}

.trip p,.section-card .grid .trip p{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.trip.left, .trip.left p{
    text-align: left;
}


.trip .details strong{
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.trip .details{
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 32px;
}

.trip .details span,.section-card .grid .trip .details span{
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
}

.main-width-alt {
    margin: 0px auto;
    width: 100%;
    max-width: 890px;
    padding-left: 24px;
    padding-right: 24px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.general-form .button[disabled]{
    background: #E8E8E8;
    color: #010504;
}


/* Questions section */

.section-questions{
    background: url(/wp-content/themes/nedbank-esports/assets/images/play-along-background.webp);
    background-size: cover;
    background-position: center;
    min-height: 693px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.section-questions .main-width{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.section-questions .unverified-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.section-questions .play{
    width: 523px;
    height: 167px;
    margin-bottom: 24px;
}

.section-questions strong{
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
    max-width: 776px;

}

.section-questions .unverified-content strong{
    margin-bottom: 32px;
}

.section-questions .left strong{
    text-align:left;
}

.section-questions p{
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 186.667% */
}

.section-questions .left p{
    text-align: left;
}

.section-questions .button-holder{
    margin-top: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:16px;
}


.section-questions .flex{
    gap:78px;
    width: 100%;
    padding-left: 78px;
    padding-right: 78px;
}

.section-questions .left{
    max-width: 512px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-questions .right{
    max-width: 764px;
    width: 100%;
    background: rgba(0,0,0,0.9);
    padding: 55px 60px;
    color: white;
}

.section-questions .right .button{
    margin-top: 24px;
    cursor: pointer;
}

.section-questions .right{
    font-size: 20px;
    font-style: normal;
    line-height: 28px;

}

.question-option label, .question-option input {
    cursor: pointer;
}

.section-questions .right h3{
    font-weight: 700;
    margin-bottom: 24px;
}

.section-questions .right .error-msg h3{
    color: #10F555;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
}

.section-questions input[type='radio'] {
    box-sizing: border-box;
    appearance: none;
    background: none;
    outline: none;
    border: 2px solid white;
    width: 16px;
    height: 16px;
}

.section-questions input[type='radio']:checked {
    background: #fff;
}

.section-questions .left h2{
    color: #D8F000;
    font-size: 60px;
    font-style: italic;
    font-weight: 700;
    line-height: 100%; /* 60px */
    margin-bottom: 24px;
}

.section-questions .success-msg h3{
    color: #10F555;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
}

.section-questions .success-msg p{
    text-align: left;
}

.section-questions .streak {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding-top: 40px;
    margin-top: 40px;
}

.section-questions .success-msg .ticket{
    display: flex;
    margin-top: 24px;
    gap:16px;
}


.section-questions .success-msg .total{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.section-questions .success-msg .total span{
    color: #10F555;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 50px */
}

.section-questions .success-msg .ticket strong{
    color: #10F555;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
}

.section-questions .success-msg .ticket p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}


.section-questions .failure-msg h3{
    color: #D8F000;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 140% */
}

.section-questions .failure-msg p{
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
    text-align: left;
    margin-bottom: 24px;
}



.tickets {
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    padding: 47px 68px;
    display: flex;
    column-gap:80px;
    justify-content: space-between;
    margin-left: 16px;
    margin-right: 16px;
    flex-wrap: wrap;
    max-width: 520px;
}

.tickets p{
    display: flex;
    flex-direction: column;

}

.tickets p strong{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 20px */
}

.tickets p span{
    color: #D8F000;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 50px */
    margin-top: 8px;
}

#progress-text{
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 20px */
    margin-top: 24px;
    margin-bottom: 6px;
}

.section-questions .right .button{
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
}

.section-questions .streak-detail strong{
    color: black;
    font-size: 16px;
    line-height: 1.2em;
}


@media screen and (max-width: 868px) {

    .tickets {
        position: absolute;
        right: 0;
        bottom: calc(-100% + 180px);
        background: rgba(0, 0, 0, 0.9);
        padding: 24px 32px;
        display: flex;
        gap:20px;
        justify-content: space-between;

    }

    .tickets p span{
        font-size: 28px;
    }

    .section-questions .play{
        width: 100%;
        height: auto;
        margin-bottom: 24px;
    }

    .section-questions .right{
        font-size: 16px;
        font-style: normal;
        line-height: 18px;
        padding:32px;
    }
    .section-questions .right h3{
        font-size: 18px;
    }

    .section-questions .main-width{
            padding-top: 64px;
            padding-bottom: 64px;
    }

    .section-questions .flex{
        gap:32px;
    }

    .section-questions .flex{
        flex-direction: column;
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-questions .left h2{
        font-size: 32px;
    }



}

.footer .social{
    align-items: center;
}


/* Waitlist Form updates -refer */



.referral-form{
    display: flex;
    gap:24px;
    align-items:flex-end;
    flex-direction: column;

}

.referral-form > div{
    display: flex;
    flex-direction: row;
    gap: 16px;
    position: relative;
    align-items: center;
}

@media screen and (max-width: 740px) {

    .referral-form > div{
        flex-direction: column;
        width:100%;
    }

    .referral-form > div input {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
    }
    .referral-form > div > div{
        width: 100%;
    }

}

.referral-form > div > div{
    display: flex;
    flex-direction: column;
}

.referral-form > div > div.friend strong{
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.referral-form > div > div.friend{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-right: 24px;
}

.referral-form > div label{
    color: #000;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.referral-form > div input{
    background: #E8E8E8;
    padding: 14px 24px;
    color: #000;
    height: 48px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border: none;
    min-width: 332px;
}

.referral-form .button{
    color: #010504;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 200% */
    background: #10F555;
    height: 48px;
    cursor: pointer;
}

.referral-form .msg{
    color: #E60000;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    bottom: -24px;
    margin-bottom: 0;
}

.referral-form > div input.error{
    border: 1px solid #E60000;
}

.modal-join .close:hover {
    filter: brightness(0) saturate(100%) invert(71%) sepia(89%) saturate(471%) hue-rotate(85deg) brightness(104%) contrast(106%);
    cursor: pointer;
}

.modal-join  .button[disabled]{opacity:0.2;pointer-events: none;}

@media screen and (max-width: 980px) {

    .modal-join.visible {
        padding: 32px 32px;
        margin-left: 12px;
        width: calc(100% - 24px);
    }

    .modal-join .close{
        width: 32px;
        height: 32px;
        position: fixed;
        top: 62px;
        z-index: 99;
        right: 32px;
    }

    .referral-form{
        flex-direction: column;
        align-items: flex-start;
    }

    .referral-form > div input{
        min-width: unset;
    }

    .referral-form .msg{
        position: relative;
        bottom: 0;
        margin-bottom: 0;
    }



}

@media screen and (max-width: 580px) {

    .modal-join.visible {
        padding-top: 94px;
        margin-top: 50px;
    }

    .modal-join p{
        font-size: 15px;
    }

    .referral-form > div input{
        width: 100%;
    }

}



.page-template-template_waitlist_landing header .navigation,.page-template-template_waitlist_landing header .hamburger{
   /* display: none;*/
}

.page-template-template_waitlist_landing .hero h1:after {
    content: '';
    background-image: url(./assets/images/Wl-heading.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: calc(100% - 48px);
    height: 100%;
    left: 0;
}

.page-template-template_waitlist_landing .hero h3{
    color: #FFF;
    font-size: 25px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 93.333% */
    margin-bottom: 16px;
}

.page-template-template_waitlist_landing .hero p{
    color: #FFF;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 26px */
}

.page-template-template_waitlist_landing .hero .flex{
    gap:10px;
}

.page-template-template_waitlist_landing .hero h1:before{
    display:none;
}

.page-template-template_waitlist_landing .hero .bg img.burst{
    top: 170px;
    left: 18px;
}

.page-template-template_waitlist_landing .hero .bg img.burst.small{
    top: 230px;
    left: 32px;
    width: 41px;
    height: 40.999px;
    z-index: 99;
}

.page-template-template_waitlist_landing .competition-details .sword{
    width: 118.286px;
    height: 120px;
    margin-bottom: 28px;
    transform: scaleX(-1);
}

.page-template-template_waitlist_landing .hero .cta a:after{

    right: -14px;
    top: 16px;
    animation: moveSide 3s ease-in-out infinite;
}


@media screen and (min-width: 576px) {

.page-template-template_waitlist_landing .hero h3{font-size: 30px;}

.page-template-template_waitlist_landing .hero p{font-size: 20px;}
}


@media screen and (max-width: 468px) {
    .page-template-template_waitlist_landing .hero .cta a:after{

        right: -18px;
        top: 10px;

    }

}

.page-template-template_waitlist_landing .competition-details .main-width img.icon{
    right: -10px;
    position: relative;
    top: -8px;
    width: auto;
    height: 100%;
    max-height: 62px;

}


.page-template-template_waitlist_landing .competition-detail strong{
    color: #0FFF73;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.32px;

}

.page-template-template_waitlist_landing .competition-detail h4{
    color: #FFF;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    margin-bottom: 16px;
}

.page-template-template_waitlist_landing .competition-details .pixels-right {
    display:none;
}

@media screen and (min-width: 768px) {
    .page-template-template_waitlist_landing .competition-details .pixels-right {
        position: absolute;
        display: block;
        left: 0;
        transform: scaleX(-1);
    }
}


@keyframes moveSide {
    0% {

        transform: rotate(-90deg) translateY(0);
    }
    20% {
        transform: rotate(-90deg) translateY(4px);
    }
    40% {
        transform: rotate(-90deg) translateY(0px);
    }
    100% {
        transform: rotate(-90deg) translateY(0);
    }
}


@media only screen and (min-width: 494px) {
    .page-template-template_waitlist_landing   .hero h1 {
        width: 534px;
        height: 350px;
    }
}


@media only screen and (min-width: 1100px) {
    .page-template-template_waitlist_landing .hero .bg img {
        margin-bottom: 0px;
        width: auto;
        transform: scale(1);
    }
}

@media only screen and (min-width: 900px) {
    .page-template-template_waitlist_landing .hero .bg img {
        margin-bottom: 0px;
        max-height: 600px;
    }

    .page-template-template_waitlist_landing .hero .bg img.arrow{
        bottom: 20px;
        left: 111px;
    }
}


.page-template-template_waitlist_landing .competition-details  .flex {flex-direction:column;gap:16px;}
.page-template-template_waitlist_landing .competition-details  .card {background:var(--dark-green);padding:80px 35px 55px 35px;text-align:center;flex:1;}
.page-template-template_waitlist_landing .competition-details  .card p {font-size:20px;}
.page-template-template_waitlist_landing .competition-details  .card span {background:var(--green);color:black;display:inline-flex;margin:0px auto;font-size:30px;font-weight:700;font-family:"libre-franklin", sans-serif;width:50px;height:50px;align-items: center;justify-content: center;margin-bottom:40px; margin-top: 8px;}

.page-template-template_waitlist_landing .competition-details a{
    margin-top: 80px;
}

.competition-detail{
    margin-top: 142px;
}

@media screen and (min-width:768px){
    .page-template-template_waitlist_landing .competition-details  h2 {font-size:32px;margin-bottom:28px;text-align:center;}
    .page-template-template_waitlist_landing .competition-details  .flex {flex-direction:row;gap:36px;}
    .page-template-template_waitlist_landing .competition-details  .card {padding:80px 55px 85px 55px;}
    .page-template-template_waitlist_landing .competition-details  {margin-top:0px;}
}

.competition-details .competition-detail ul {list-style:none;margin:0 auto;padding:0;max-width:640px;}
.competition-details .competition-detail ul li {background:black;padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:16px;align-items: center;justify-content: space-between;font-size:20px;}
.competition-details .competition-detail ul li p {display:flex;align-items: center;margin:0;text-transform: none;font-size:20px;font-weight: 500;}
.competition-details .competition-detail ul li p img {display:flex;margin-right:20px;width:30px;}
.competition-details .competition-detail ul li div {color:var(--green);font-family:"libre-franklin", sans-serif;font-weight:700;}

@media screen and (min-width:768px){
    .competition-details .competition-detail ul li {flex-direction:row;gap:30px;}
    .competition-details .competition-detail ul li div {text-align:left;}
}

.page-template-template_waitlist_landing .section-twitch .flex >div:nth-child(2){
    position: relative;
}

.page-template-template_waitlist_landing .section-twitch .burst{
    position: absolute;
    right: 20px;
}

.page-template-template_waitlist_landing .section-twitch p{
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

@media screen and (min-width: 1140px) {
    .page-template-template_waitlist_landing .section-twitch .flex {
        flex-direction: row-reverse;
        gap:60px;
    }

    .page-template-template_waitlist_landing .section-twitch .main-width > .flex > img:first-of-type{
        left: 0;

    }

}

.page-template-template_waitlist_landing .section-twitch .video-player, .page-template-template_waitlist_landing .section-twitch .video-container{
    width: 100%;
    height: 100%;
}

.page-template-template_waitlist_landing .section-twitch .video-player iframe{
    height: 100%;
    min-height: 406px;
    max-width: 686px;
}

.page-template-template_waitlist_landing .section-twitch .main-width > .flex  .video-wrap{
    position: relative;
}

.page-template-template_waitlist_landing .section-twitch .main-width > .flex  .video-wrap:first-of-type:after{
    content: "";
    width: 112px;
    cursor: pointer;
    height: 112px;
    position: absolute;
    left:  calc(50% - 56px);;
    top: calc(50% - 56px);
    display: inline-flex;
    background-image: url(./assets/images/play-wl.png);
}
.page-template-template_waitlist_landing .section-twitch .main-width > .flex  .video-wrap:hover:first-of-type:after{
    filter:grayscale(1);
}
.page-template-template_waitlist_landing .section-twitch .main-width > .flex  .video-wrap img {cursor:pointer;}
.page-template-template_waitlist_landing header.sticky{

}

@media screen and (max-width: 900px) {
    .page-template-template_waitlist_landing .section-twitch .video-player iframe{
        height: 100%;
        min-height: 60vw;
        max-width: 686px;
    }

}

.page-template-template_waitlist_landing .section-twitch{
    padding-bottom: 100px;
    padding-top: 240px;

}

.page-template-template_waitlist_landing .section-twitch .flex{
    justify-content: space-between;
}

.page-template-template_waitlist_landing .section-twitch .proof{
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    padding:80px 100px;
    flex-wrap: wrap;
    gap:16px;
    margin-top: 90px;
}

.page-template-template_waitlist_landing .section-twitch .proof p{
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    max-width: 140px;
}
.page-template-template_waitlist_landing .section-twitch .proof p strong{

    color: #0FFF73;
}



.page-template-template_waitlist_landing  .section-card.hp-prizes{
    padding-bottom: 0;
}

.page-template-template_waitlist_landing  .section-card.hp-prizes .fan-prizes .flex{
    flex-direction: row-reverse;
}

.page-template-template_waitlist_landing .section-card .fan-prizes .main-width{
    background: none;
    padding-top:100px;
}

.page-template-template_waitlist_landing .section-card .fan-prizes {
    background: url(/wp-content/themes/nedbank-esports/assets/images/comp-wl.webp);
    background-position: -100px bottom;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 100px;
}


.page-template-template_waitlist_landing .fan-prizes .heart {
        position: absolute;
        top: 100px;
        left: calc(50% - 242px);
        width: 239px;

    }


.page-template-template_waitlist_landing .fan-prizes h3{
    color: #D8F000;
    font-size: 80px;
    font-style: italic;
    font-weight: 700;
    line-height: 90%; /* 72px */
    max-width: 414px;
}

.page-template-template_waitlist_landing .fan-prizes  p strong{
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
}

.page-template-template_waitlist_landing .fan-prizes .competition-details {
    background: none;
    padding-top: 100px;
    padding-bottom: 0;
}
.page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .competition-details  .flex{
    flex-direction: row;
}


.page-template-template_waitlist_landing .fan-prizes .main-width{
    padding-bottom: 0;
	min-height:60vw
}

.page-template-template_waitlist_landing .competition-details .competition-detail .flex{
    margin-bottom: -190px;
    z-index: 999;
}

.page-template-template_waitlist_landing .fan-prizes .card-small{
    width: 213.999px;
    height: 230.319px;
    position: absolute;
    right: 0px;
    top: -21px;
}

.page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .flex:nth-child(1) > div:nth-child(1){
    position: relative;
    padding-right: 106px;
}


.page-template-template_waitlist_landing .section-follow{
    background:#000;
}

.page-template-template_waitlist_landing .section-card.hp-prizes {
    background: linear-gradient(180deg, #020202 -29.94%, #003A29 57.38%);
    position: relative;
}

.page-template-template_waitlist_landing .section-card.hp-prizes:after{
    content: "";
    height: 100%;
    width: 100%;
    background-image: url(/wp-content/themes/nedbank-esports/assets/images/waitlist-glow.webp);
    bottom: 0;
    right: 0;
    display: inline-flex;
    position: absolute;
    background-repeat: no-repeat;
    background-position: right bottom;
    z-index: 0;
}

.page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes {
    z-index: 1;
}


.page-template-template_waitlist_landing .section-card .fan-prizes{
    margin-top: 0;
}

@media screen and (max-width: 900px) {


    .page-template-template_waitlist_landing .fan-prizes h3{
        font-size: 40px;
    }


    .page-template-template_waitlist_landing .fan-prizes p strong{
        font-size: 22px;
        max-width: 500px;
    }

    .page-template-template_waitlist_landing .fan-prizes p{
         font-size: 14px;
        max-width: 306px;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .flex:nth-child(1) > div:nth-child(1){
        padding-right: 250px;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .flex:nth-child(1){
        gap:0;
        justify-content: flex-end;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .flex:nth-child(1) > div:nth-child(2){
        display: none;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .competition-details .flex{
        flex-direction: column;
        align-items: center;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .competition-details .flex {}
}
@media screen and (max-width: 540px) {



  
    .page-template-template_waitlist_landing .section-twitch .main-width > .flex  .video-wrap:first-of-type:after{
        width: 56px;
        height: 56px;
        position: absolute;
        left:  calc(50% - 28px);;
        top: calc(50% - 28px);
        background-size: contain;
    }

    .page-template-template_waitlist_landing .fan-prizes .card-small{
        position: relative;
    }

    .page-template-template_waitlist_landing .section-card.hp-prizes .fan-prizes .flex:nth-child(1) > div:nth-child(1){
        padding-right: 0;
    }

}

.page-template-template_waitlist_landing .section-follow .main-width{
    padding-top: 140px;
    padding-bottom: 80px;
    text-align: center;
}

.page-template-template_waitlist_landing .section-follow h2{
    color: #FFF;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-align: center;
}

.page-template-template_waitlist_landing .section-follow h2 strong{
    color: #D8F000;
}

.follow-images{
    display: flex;
    gap:3px;
    flex-wrap: wrap;
    justify-content: center;
    background: black;
}

.follow-images img{
    max-width: calc(25% - 3px);
}


@media screen and (max-width: 900px) {

    .follow-images img{
        max-width: calc(50% - 3px);
    }

    .page-template-template_waitlist_landing .hero h1{
        width: 100%;
    }

    .page-template-template_waitlist_landing .hero h1:after{
        width: 100%;
    }

}

@media screen and (max-width: 640px) {

    .page-template-template_waitlist_landing .competition-detail{
        margin-top: 60px;
    }

    .page-template-template_waitlist_landing .hero .bg img.burst.small {
        bottom: -60px;
       top:unset;
        width: 20.5px;
        height: 20px;
    }

    .page-template-template_waitlist_landing .hero .bg img.burst {
        bottom: -40px;
        left: 18px;
        top: unset;
        width: 41px;
        height: 40.999px;
    }


    .page-template-template_waitlist_landing .section-twitch .proof{
        gap:32px;
    }

    .page-template-template_waitlist_landing .section-twitch .proof .item{
        width: 100%;
    }

    .page-template-template_waitlist_landing .section-twitch .proof p{
        margin-left: auto;
        margin-right: auto;
    }

    .page-template-template_waitlist_landing .section-twitch .burst{
        width: 41px;
        height: 40.999px;
    }

    .page-template-template_waitlist_landing .hero .bg img.arrow {
        height: 60px;
        width: 60px;
    }

}

@media screen and (max-width: 340px) {

    .follow-images img{
        max-width:100%;
    }

}



@media screen and (max-width: 740px) {
    .modal-join.visible {
        max-height: 90vh;
        overflow: scroll;

    }

    .modal-join .flex h3{
        font-size: 22px;
    }
}


@media screen and (max-width: 340px) {
    .modal-join.visible {
        max-height: 90vh;
        overflow: scroll;
        padding-top: 180px;
    }
}

.modal-join .flex h2{
    color: #00E677;
    font-size: 61.883px;
    font-style: italic;
    font-weight: 700;
    line-height: 100%; /* 61.883px */
}

.modal-join a.copyclip{
    background: #E8E8E8;
    display: flex;
    width: calc(100% - 60px);
    padding: 16px 24px;
    justify-content:flex-start;
    align-items: center;
    gap: 8px;
    position: relative;
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.modal-join a.copyclip:after{
    content: "";
    background-image: url(/wp-content/themes/nedbank-esports/assets/images/copy.png);
    width: 24px;
    height: 24px;
    padding: 8px;
    border: 2px solid #00E677;
    border-radius: 6px;
    background-color: #FFF;
    position: absolute;
    right: -50px;
    background-repeat: no-repeat;
    background-position: center;
}


.page-template-template_waitlist_landing .hero .counter{
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    padding: 40px;
    background: rgba(0, 0, 0, 0.9);
    height: 130px;
    position: absolute;
    right: 0;
    gap: 8px;
    display: flex;
    bottom: 80px;
    justify-content: center;
    width: auto;
}

.page-template-template_waitlist_landing .hero .counter span{
    color: #D8F000;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 50px */
}

@media screen and (max-width: 740px) {

    .page-template-template_waitlist_landing .hero .main-width{
        padding-bottom: 120px;
    }

    .page-template-template_waitlist_landing .hero .counter{
        bottom: 30px;
    }
}


.page-template-template_waitlist_landing .hero:before{
    content: "";
    background-image: url(/assets/images/yellow-glow.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 935px;
    height: 933px;
    position: absolute;
    right: 0;
    z-index: 0;
    bottom: 0;
}

.page-template-template_waitlist_landing .hero:after{
    z-index: 1;
}


.fan-prizes h2 {max-width:780px;}
.fan-prizes h2 span {color:var(--yellow);display: block;font-style:italic;}

.fan-prizes .copy {max-width:100%;padding-bottom:200px;position:relative;padding-top:100px}
.fan-prizes .copy .icon-wallet {position:absolute;bottom:50px;right:0px;max-width:200px;}
	  
.page-template-template_waitlist_landing .fan-prizes h3 {
    max-width: 519px;
}

@media screen and (min-width: 768px) {
    .fan-prizes .card {
        max-width: 500px;
          width:100%;
    }

    .fan-prizes .card .button {
          width: 380px !important;
      }
      .fan-prizes .copy {max-width:540px;padding-bottom:200px;position:relative;padding-top:0}
      .fan-prizes .copy .icon-wallet {bottom:130px;} 
      .fan-prizes h2 span {display: inline;} 
}

      .page-template-template_waitlist_landing .fan-prizes .heart {
          height: auto;
      }

@media screen and (min-width: 768px) {
    .fan-prizes .main-width {
        padding-top: 30vw;
    }
}

.section-card .fan-prizes{
    margin-top:115px;
}

.section-card.hp-prizes{
padding-bottom:60px;
}


@media screen and (min-width: 768px) {
    .section-card .fan-prizes{
        margin-top:0px;
    }
}