/* Fonts */

@font-face {
    font-family: Wadik;
    src: url('./fonts/Wadik.otf');
}

@font-face {
    font-family: Montserrat;
    src: url('./fonts/Montserrat-Regular.otf');
}

/* No Select */

.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome, Edge, Opera and Firefox */
}

input,
textarea,
button,
select,
a,
svg,
div {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

::selection {
    background-color: #f7971e;
}

/* Loading Page */

.loadingPage {
    position: fixed;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    width: 100vw;
    height: 100vh;
    z-index: 90000000000000000000000000000000000000;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Defaults */

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

html {
    background-color: #370b23;
    font-size: 10px;
    color: #ffffff;
    scroll-behavior: smooth;
    /* cursor: none; */
}

body {
    background-color: #370b23;
    box-sizing: border-box;
    z-index: 100;
    font-size: 10px;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    font-family: Wadik;
}

.webgl {
    position: fixed;
    outline: none;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    z-index: 100000000;
    pointer-events: none;
}

main {
    position: absolute;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: #ffffff;
}

/* Responsive */

/* Max-Width 1080px */

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

    .dnToggleDiv {
        display: none;
    }

    .testimonialsButtonsMobileDiv {
        display: flex !important;
        background-color: transparent !important;
    }

    .cursorFollowerDiv {
        display: none !important;
    }

    .testimonialsSliderIndicatorsContainerDiv {
        display: none !important;
    }

    .headerTextResponsive {
        font-size: 3.5rem !important;
    }

    .footerMiddleDiv {
        flex-direction: column !important;
    }

    .footerCompetitionsDiv {
        padding-left: 0 !important;;
        flex-direction: column !important;
    }

    .footerTrustPilotDiv {
        padding-right: 0 !important;
        border-right: none !important;
    }

    .footerCompetitionsText {
        width: 90vw !important;
        text-align: center !important;
    }

    .footerEmailSubmitDiv {
        width: 90vw !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    @media (orientation: portrait) {
        /* Portrait */

        html {
            font-size: 10px;
        }

        .videoIframe {
            width: 90vw !important;
            height: calc(90vw * 37/65) !important;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
            text-align: center !important;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .reverseSection {
            padding-top: 0 !important;
        }

        .ourTeamTextDiv, .reverseTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .ourTeamHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamVideoContainerDiv, .reverseVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .ourTeamVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
            padding-top: 0 !important;
        }

        .questIntroTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .questIntroHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questIntroBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .questIntroVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .questIntroVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .fundingProcessBodyDiv {
            width: 90vw !important;
        }

        .fundingProcessScrollContainerDiv {
            margin-left: 966px;
        }

        .fundingProcessButtonsMobileDiv {
            display: flex !important;
        }
        
        .chooseChallengeHeaderDiv {
            width: 90vw !important;
        }

        .leaderboardsSectionTopDiv {
            flex-direction: column !important;
        }

        .leaderboardsTextDiv {
            width: 90vw !important;
            align-items: center !important;
            text-align: center !important;
            margin-right: 0 !important;
        }

        .leaderboardsHeaderText {
            font-size: 2.5rem !important;
        }

        .leaderboardsHeaderDiv {
            justify-content: center !important;
        }

        .leaderboardsActualDiv {
            font-size: 1rem !important;
        }

        .leaderboardsDiv {
            width: min(90vw, 90rem) !important;
            padding: 0 !important;
        }

        .videosOverlaysBottomDiv {
            width: 300vw !important;
        }

        .videosBorderPhoto {
            width: 90vw !important;
        }

        .videoContainerDiv {
            width: 100vw !important;
        }

        .videosContainerVideoDiv {
            width: 100% !important;
            height: calc(27/48*90vw) !important;
        }

        .videoContainerBody {
            width: 90vw !important;
        }

        .videosButtonsMobileDiv {
            display: flex !important;
        }

        .comparisonsHeader {
            width: 90vw !important;
            text-align: center !important;
            font-size: 3.5rem !important;
        }

        .comparisonsActualContainerDiv {
            flex-direction: column !important;
        }

        .comparisonsTFTActualDiv {
            width: min(45rem, 90vw) !important;
        }

        .appShowcaseOverlaysDiv {
            justify-content: center !important;
        }

        .appShowcaseOverlaysActualRightDiv {
            padding-left: 0 !important;
            width: 100% !important;
            align-items: center !important;
        }

        .appShowcase8CapPhoto {
            width: 90vw !important;
        }

        .videosSection {
            flex-direction: column !important;
        }

        .faqScrollContainerDiv {
            justify-content: flex-start !important;
            align-items: center !important;
            flex-direction: column !important;
            height: 80rem !important;
        }

        .faqScrollTopTextDiv, .faqScrollBottomTextDiv {
            width: 90vw !important;
        }

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .chooseChallengeTableDiv {
            width: 90vw !important;
        }

        .chooseChallengeScrollBodyDiv {
            width: 100vw !important;
        }

        .chooseChallengeColumnDiv {
            font-size: 1rem !important;
            padding: 1rem 1rem 1rem 1rem !important;
        }
        
        .chooseChallengeColumnBalanceDiv {
            font-size: 1rem !important;
        }

        .chooseChallengeColumn1 {
            padding-left: 0 !important;
        }

        #buyChallengeMobile {
            display: flex !important;
            margin-top: 2rem !important;
        }

        .classChoicesTopDiv {
            width: 62.5% !important;
            flex-direction: column !important;
        }

        .classPriceContainerDiv {
            width: 37.5% !important;
            flex-direction: column !important;
            margin-top: 0 !important;
        }

        .classChoiceAllButtonsDiv {
            flex-direction: row !important;
            width: 100vw !important;
        }

        .classPriceContainerDiv {
            margin-top: 0 !important;
        }

        .classPriceButton {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .classChoiceButton {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }

        .contactOverlaysText {
            width: 90vw !important;
        }

    }
      
    @media (orientation: landscape) {
        /* Landscape */

        html {
            font-size: 10px;
        }

        .videoIframe {
            width: 88vw !important;
            height: calc(90vw * 37/65) !important;
        }

        .chatBubbleDiv, .torch, .scrollDownDiv, .heroHandPhotoDiv, .gem, .leaderboardsCrownPhoto, .appShowcaseOverlaysActualLeftDiv, .appKnightLottie, .chooseChallengeScrollLeftPhoto, .chooseChallengeScrollRightPhoto, #buyChallengeDefault {
            display: none !important;
        }

        .mobileMenuDiv {
            display: flex !important;
            flex-direction: row-reverse !important;
            align-items: flex-start !important;
        }

        .CTAButtonAnimate {
            transform: scale(0.8) !important;
        }

        .navLogoPhoto {
            transform: scale(0.75);
        }

        .navBar {
            position: absolute !important;
            padding: 0 !important;
            justify-content: flex-start !important;
        }

        .navMenuDiv {
            display: none !important;
        }

        .navBurgerMenuMobileDiv {
            display: flex !important;
        }
        
        .heroOverlaysContainerDiv {
            padding: 0 !important;
            align-items: center !important;
        }

        .heroHeaderDiv {
            width: 90vw !important;
            font-size: 5rem !important;
            line-height: 5rem !important;
            text-shadow: 0 0 1px #000000;
        }

        .heroSubHeaderDiv {
            width: 90vw !important;
        }

        .heroCTADiv {
            width: 100vw !important;
            justify-content: center !important;
            flex-direction: column !important;
        }

        .CTAButton {
            margin: 0 !important;
        }

        .ourTeamSection, .reverseSection, .newsSection {
            justify-content: space-between !important;
            flex-direction: column !important;
        }

        .reverseSection {
            padding-top: 0 !important;
        }

        .ourTeamTextDiv, .reverseTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .ourTeamHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .ourTeamVideoContainerDiv, .reverseVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .ourTeamVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .ourTeamVideoBackgroundPhoto {
            width: 90vw !important;
        }  

        .questIntroSection {
            justify-content: space-between !important;
            flex-direction: column !important;
            padding-top: 0 !important;
        }

        .questIntroTextDiv {
            padding: 0 !important;
            width: 100vw !important;
            align-items: center !important;
            margin-bottom: 5rem !important;
        }

        .questIntroHeaderDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questIntroBodyDiv {
            width: 90vw !important;
            text-align: center !important;
        }

        .questVideoContainerDiv {
            width: 100vw !important;
            justify-content: center !important;
            padding: 0 !important;
        }

        .questIntroVideoDiv {
            width: 90vw !important;
            height: calc(37/65 * 90vw) !important;
        }

        .questIntroVideoBackgroundPhoto {
            width: 90vw !important;
        }

        .fundingProcessBodyDiv {
            width: 90vw !important;
        }

        .fundingProcessScrollContainerDiv {
            margin-left: 966px;
        }

        .fundingProcessButtonsMobileDiv {
            display: flex !important;
        }
        
        .chooseChallengeHeaderDiv {
            width: 90vw !important;
        }

        .leaderboardsSectionTopDiv {
            flex-direction: column !important;
        }

        .leaderboardsTextDiv {
            width: 90vw !important;
            align-items: center !important;
            text-align: center !important;
            margin-right: 0 !important;
        }

        .leaderboardsHeaderText {
            font-size: 2.5rem !important;
        }

        .leaderboardsHeaderDiv {
            justify-content: center !important;
        }

        .leaderboardsActualDiv {
            font-size: 1rem !important;
        }

        .leaderboardsDiv {
            width: min(90vw, 90rem) !important;
            padding: 0 !important;
        }

        .videosOverlaysBottomDiv {
            width: 300vw !important;
        }

        .videosBorderPhoto {
            width: 90vw !important;
        }

        .videoContainerDiv {
            width: 100vw !important;
        }

        .videosContainerVideoDiv {
            width: 100% !important;
            height: calc(27/48*90vw) !important;
        }

        .videoContainerBody {
            width: 90vw !important;
        }

        .videosButtonsMobileDiv {
            display: flex !important;
        }

        .comparisonsHeader {
            width: 90vw !important;
            text-align: center !important;
            font-size: 3.5rem !important;
        }

        .comparisonsActualContainerDiv {
            flex-direction: column !important;
        }

        .comparisonsTFTActualDiv {
            width: min(45rem, 90vw) !important;
        }

        .appShowcaseOverlaysDiv {
            justify-content: center !important;
        }

        .appShowcaseOverlaysActualRightDiv {
            padding-left: 0 !important;
            width: 100% !important;
            align-items: center !important;
        }

        .appShowcase8CapPhoto {
            width: 90vw !important;
        }

        .videosSection {
            flex-direction: column !important;
        }

        .faqScrollContainerDiv {
            justify-content: flex-start !important;
            align-items: center !important;
            flex-direction: column !important;
            height: 80rem !important;
        }

        .footerLinksContainerDivMobileOnly {
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .footerLinksContainerDiv {
            width: 90vw !important;
            flex-direction: column !important;
        }

        .footerLinkText {
            margin-top: 1rem !important;
            margin-bottom: 1rem !important;
        }

        .footerTextDiv {
            width: 90vw !important;
            flex-direction: column !important;
            justify-content: center !important;
        }

        .footerText {
            text-align: center !important;
        }

        .footerButton {
            margin-top: 2.5rem !important;
            margin-left: 0 !important;
        }

        .footerBottomDiv {
            width: 90vw !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .footerBootomLeft {
            text-align: left !important;
        }

        .footerBottomLinkText {
            text-align: right !important;
        }

        .chooseChallengeTableDiv {
            width: 90vw !important;
        }

        .chooseChallengeScrollBodyDiv {
            width: 100vw !important;
        }

        .chooseChallengeColumnDiv {
            font-size: 1rem !important;
            padding: 1rem 1rem 1rem 1rem !important;
        }
        
        .chooseChallengeColumnBalanceDiv {
            font-size: 1rem !important;
        }

        .chooseChallengeColumn1 {
            padding-left: 0 !important;
        }

        #buyChallengeMobile {
            display: flex !important;
            margin-top: 2rem !important;
        }

        .classChoicesTopDiv {
            width: 62.5% !important;
            flex-direction: column !important;
        }

        .classPriceContainerDiv {
            width: 37.5% !important;
            flex-direction: column !important;
            margin-top: 0 !important;
        }

        .classChoiceAllButtonsDiv {
            flex-direction: row !important;
            width: 100vw !important;
        }

        .classPriceContainerDiv {
            margin-top: 0 !important;
        }

        .classPriceButton {
            margin-left: 0 !important;
            margin-right: 0 !important;
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .classChoiceButton {
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }

        .contactOverlaysText {
            width: 90vw !important;
        }
    }

    /* Responsive Common */

}

#buyChallengeMobile {
    display: none;
}

.navBurgerMenuMobileDiv {
    position: fixed;
    z-index: 999999;
    display: none;
    width: 100vw;
    height: 10rem;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.navBurgerMenuButton {
    width: 10rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: auto;
}

.navSword1 {
    transform: scale(0.15);
    position: absolute;
}

.navSword2 {
    transform: scale(0.15);
    position: absolute;
}

/* Cursor Follower */
.cursorFollowerDiv {
    position: fixed;
    z-index: 9999999999999999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.cursorFollowerContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center;
}

.cursorFollower {
    position: absolute;
    pointer-events: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #dab661;
    opacity: 0;
}

.cursorFollowerSwords {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cursorFollowerSword1 {
    transform: scale(0.25);
}

.cursorFollowerSword2 {
    transform: scaleY(-0.25) scaleX(0.25);
    margin-top: -25rem;
}

/* Nav Bar */
.navBar {
    position: fixed;
    z-index: 9999;
    width: 100vw;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Wadik;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.navMenuDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.navMenu {
    margin-left: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navMenuText {
    pointer-events: auto;
    cursor: pointer;
    font-size: 1.5rem;
    text-shadow: 0 0 2px #000000;
}

.currentNavBackgroundPhoto {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.navMenuButton {
    pointer-events: auto !important;
    margin-left: -3rem;
    margin-right: 0 !important;
}

/* Mobile Menu */
.mobileMenuDiv {
    position: fixed;
    z-index: 999990;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, #1a1926, 50%, #3e0a3d);
    pointer-events: auto;
    display: none;
    padding-top: 12.5rem;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelection {
    font-size: 2.5rem;
    margin-right: 3.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mobileMenuSelectionDiv {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
}

.mobileMenuSelectionLink {
    text-decoration: none;
    color: #ffffff;
}

.chatBubbleContainerMobile {
    margin-right: 2rem;
    margin-bottom: 1rem;
    margin-left: 2rem;
}

/* Scroll Down Div */
.scrollDownDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
    z-index: 9999;
}

.scrollDownScreenDiv {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    pointer-events: none;
}

.scrollDownContainerDiv {
    width: 15rem;
    height: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2rem;
}

.scrollDownTextDiv {
    transform: rotateZ(90deg);
}

/* Chat Bubble Div */
.chatBubbleDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubbleMobileDiv {
    position: fixed;
    z-index: 99999;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-right: 5rem;
    padding-bottom: 1rem;
    overflow: hidden;
    pointer-events: none;
}

.chatBubblePhoto {
    cursor: pointer;
    pointer-events: auto;
}

.chatBubbleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.chatBubbleText {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

.chatBubbleTextMobile {
    margin-top: 1rem;
    height: 3rem;
    width: 10rem;
    text-align: center;
}

/* Hero Section */
.heroSection {
    position: relative;
    z-index: 900;
    width: 100vw;
    height: 120rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: -55rem;
}

.heroDragonLottie {
    position: absolute;
    transform: scale(0.4) translateX(120rem) translateY(30rem);
}

.heroBackgroundFullPhoto {
    position: absolute;
}

.heroLayer3Photo {
    transform: translateX(8rem) translateY(-12rem);
}

.heroLayer3Div, .heroLayer2Div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.heroLayer2Photo {
    transform: translateX(1.25rem) translateY(-5.5rem);
}

.heroFilterLayer {
    position: absolute;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, #ffffff00, 70%, #370b23);
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroLightFilterDiv {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroLightFilter {
    position: absolute;
    width: 47.5rem;
    height: 47.5rem;
    border-radius: 50%;
    transform: translateX(1rem) translateY(-36.75rem);
    box-shadow: 0 0 200rem 23.75rem #f7971e2a;
    background-color:#f7971e2a;
}

.heroImageLayer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: translateY(-10px);
}

.heroLayer3ParallaxDiv, .heroLayer2ParallaxDiv {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.phaseHeaderTextDiv {
    width: auto !important;
}

/* Hero Overlays */

.heroOverlaysDiv {
    position: absolute;
    z-index: 3000;
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: auto;
}

.heroOverlaysContainerDiv {
    width: 100vw;
    padding-left: 15rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 20rem;
}

.heroHeaderDiv {
    width: 60rem;
    font-size: 6rem;
    line-height: 8rem;
}

.heroSubHeaderDiv {
    width: 60rem;
    font-size: 1.7rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.heroCTADiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 2px solid red;
}

.CTAButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right: 7rem;
    cursor: pointer;
    font-family: Wadik;
    pointer-events: none;
}

.CTAButtonText {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discordButtonLogoPhoto {
    margin-left: 1rem;
}

/* Phase 1 Section */
.phase1Section {
    background-color: transparent !important;
    background-image: none !important;
    z-index: 999 !important;
}

/* Phase 3 Section */

/* Reverse Section */

.reverseSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
    flex-direction: row-reverse;
}

.reverseTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 13.5rem;
}

.reverseVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 2rem;
    padding-right: 3rem;
}

.reverseOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

/* Out Team Section */

.ourTeamSection {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.ourTeamTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 27rem;
}

.ourTeamHeaderDiv {
    font-size: 5rem;
    width: 10rem;
    margin-bottom: 6.5rem;
}

.ourTeamBodyDiv {
    font-size: 1.8rem;
    width: 52rem;
    font-family: Montserrat;
    line-height: 3rem;
}

.ourTeamVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}

.ourTeamVideoDiv {
    background-color: black;
    width: 65rem;
    height: 37rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ourTeamVideoBackgroundPhoto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.ourTeamPurpleGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.ourTeamPinkGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.ourTeamPurpleGemDiv, .ourTeamPinkGemDiv {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ourTeamOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.ourTeamTorchDiv {
    width: 27rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Phase 2 Section */

.questIntroSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.questIntroTextDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 27rem;
}

.questIntroHeaderDiv {
    font-size: 5rem;
    width: 10rem;
    margin-bottom: 6.5rem;
}

.questIntroBodyDiv {
    font-size: 1.8rem;
    width: 52rem;
    font-family: Montserrat;
    line-height: 3rem;
}

.questVideoContainerDiv {
    position: relative;
    z-index: 100;
    width: 50%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 2rem;
}

.questIntroVideoDiv {
    background-color: black;
    width: 65rem;
    height: 37rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questIntroVideoBackgroundPhoto {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.questIntroPurpleGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.questIntroPinkGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.questIntroPurpleGemDiv, .questIntroPinkGemDiv {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questIntroOverlaysDiv {
    position: absolute;
    z-index: 2;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
}

.questIntroTorchDiv {
    width: 27rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Leaderboards Section */

.leaderboardsSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 5rem;
}

.torchKnight2Photo {
    transform: translateX(-10rem);
}

.leaderboardsSectionTopDiv {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.leaderboardsDiv {
    width: 90rem;
    height: 55rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding-left: 5rem;
    padding-right: 5rem;
}

.leaderboardsHeaderDiv {
    width: 100%;
    height: 15rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 3rem;
}

.leaderboardsCrownPhoto, .leaderboardsCrownHeaderPhoto {
    margin-right: 2rem;
}

.leaderboardsActualDiv {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    font-size: 2rem;
}

.leaderboardsActualRowDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.leaderboardsActualRowRankDiv {
    width: 15%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowNameDiv {
    width: 40%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowReturnDiv {
    width: 22.5%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.leaderboardsActualRowProfitDiv {
    width: 22.5%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.leaderboardsTopPlayerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerAnimateDiv {
    display: flex;
    justify-content: center;
    align-items: center; 
}

.leaderboardsBackgroundPhoto {
    position: absolute;
    z-index: -2;
    margin-top: 0.5rem;
}

.leaderboardsBorderPhoto {
    position: absolute;
    z-index: -1;
}

.leaderboardsTopPlayerOverlaysDiv {
    width: 25rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
}

.leaderboardsTopPlayerFramePhoto {
    position: absolute;
    z-index: 2;
}

.leaderboardsTopPlayerSwordLeftPhoto {
    position: absolute;
    z-index: 0;
    transform: translateX(-8rem);
}

.leaderboardsTopPlayerSwordRightPhoto {
    position: absolute;
    z-index: 0;
    transform: translateX(8rem);
}

.leaderboardsTopPlayerProfilePhotoDiv {
    position: absolute;
    z-index: 1;
    width: 15.5rem;
    height: 15.5rem;
    background-color: #000000;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerTextDiv {
    width: 100%;
    position: absolute;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leaderboardsTopPlayerNameDiv {
    position: absolute;
    z-index: 5;
    transform: translateY(12.5rem);
    font-size: 1.6rem;
}

.leaderboardsTopPlayerStreakDiv {
    position: absolute;
    z-index: 5;
    transform: translateY(20rem);
    font-size: 1.6rem;
}

.leaderboardsSectionBottomDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12rem;
}

.leaderboardsButton {
    width: 32rem;
    height: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    cursor: pointer;
}

.leaderboardsButtonText {
    margin-top: 0.6rem;
}

.leaderboardsButtonBackgroundPhoto {
    position: absolute;
    z-index: -1;
}

.leaderboardsTextDiv {
    width: 66rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
    margin-right: 5rem;
}

.leaderboardsTextHeader {
    font-size: 4rem;
    margin-bottom: 5rem;
}

.leaderboardsTextBody {
    font-size: 1.6rem;
    font-family: Montserrat;
    line-height: 2.2rem;
}

.leaderboardsOverlaysDiv {
    position: absolute;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
}

.leaderboardsTorchDiv {
    width: 27rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: -1;
}

.leaderboardsTorch {
    scale: 1.4;
}

.leaderboardsGreenGem, .leaderboardsYellowGem {
    position: absolute;
    z-index: -3;
    display: flex;
    justify-content: center;
    align-content: center;
}

.leaderboardsGreenGemPhoto {
    position: absolute;
    z-index: -3;
    transform: translateX(-47rem) translateY(5rem);
}

.leaderboardsYellowGemPhoto {
    position: absolute;
    z-index: -3;
    transform: translateX(47rem) translateY(42rem);
}

/* Testimonials Section */

.testimonialsSection {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    pointer-events: none;
    padding-top: 5rem;
    background-image: linear-gradient(to bottom, #370b23, 90%, #10064d);
}

.testimonialsHeader {
    font-size: 4rem;
    margin-top: 2rem;
}

.testimonialsSliderContainerDiv {
    width: 100%;
    padding-top: 7rem;
    padding-bottom: 7rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.testimonialsSliderDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    padding-left: 15rem;
    padding-right: 15rem;
    pointer-events: none;
}

.testimonialsCardDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 3rem;
    margin-right: 3rem;
}

.testimonialsSliderIndicatorsContainerDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.testimonialsIndicatorDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
}

.testimonialsIndicator {
    position: absolute;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #dab661;
    opacity: 0;
}

.testimonialsCardTextDiv {
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30rem;
}

.testimonialsCardTextHeader {
    font-size: 2.4rem;
}

.testimonialsCardTextBody {
    font-size: 1.5rem;
    font-family: Montserrat;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.testimonialsCardTextRating {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonialsStarPhoto {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

/* Mobile Only - Testimonials */
.testimonialsButtonsMobileDiv {
    width: 100vw;
    display: none;
    justify-content: center;
    align-items: center;
    height: 10rem;
}

.testimonialsBackButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-right: 2rem;
    pointer-events: auto;
}

.testimonialsNextButton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    width: 15rem;
    margin-left: 2rem;
    pointer-events: auto;
}

.testimonialsBackButtonPhoto {
    transform: scale(0.35) rotateZ(-90deg);
}

.testimonialsNextButtonPhoto {
    transform: scale(0.35) rotateZ(90deg);
}

/* News Section */

.newsSection {
    height: none !important;
    background-color: #10064d;
    background-image: linear-gradient(to bottom, #10064d, 50%, #00000000);
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.newsButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 5rem;
    pointer-events: auto;
}

.newsButtonText {
    position: absolute;
    z-index: 1;
    font-size: 1.6rem;
}

.newsRedGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(-32rem) translateY(-15rem)
}

.newsYellowGemPhoto {
    position: absolute;
    z-index: -1;
    transform: translateX(33rem) translateY(15rem)
}

.newsRedGem, .newsYellowGem {
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contact Section */

.contactSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    height: 80rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to top, #401639, 60%, #10064d);
    padding-top: 5rem;
    pointer-events: none;
}

.contactBackgroundDiv {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}

.contactOverlaysDiv {
    width: 100vw;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10rem;
}

.contactOverlaysText {
    width: 80rem;
    font-size: 2.6rem;
    line-height: 3.6rem;
    font-family: Montserrat;
    margin-bottom: 10rem;
    pointer-events: auto;
}

.contactButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    pointer-events: auto;
}

.contactButtonText {
    position: absolute;
    z-index: 1;
}

.contactSocialsDiv {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 2rem;
    margin-bottom: 10rem;
}

.contactSocialsPhoto {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    cursor: pointer;
}

.contactHeader {
    font-size: 5rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.contactAddressHeader, .contactEmailHeader, .contactPhoneHeader {
    font-size: 2.6rem;
}

.contactAddressBody, .contactEmailBody, .contactPhoneBody {
    font-size: 1.8rem;
    font-family: Montserrat;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.footerKnightLottie  {
    position: absolute;
    transform: scale(0.5) translateY(42rem) translateX(-100rem);
}

.footerKnightLottieNonContact {
    position: absolute;
    transform: scale(0.5) translateY(38.5rem) translateX(-100rem);
}

/* Footer Section */

.footerSection {
    position: relative;
    z-index: 999;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
    background-image: linear-gradient(to bottom, #4e1137, 30%, #3e0a3d);
    margin-top: -2px;
}

.footerContainerDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.footerLinksContainerDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerLinkText {
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
}

.footerTrustPilotDiv {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-right: 5rem;
    border-right: 1px solid #ffffff3a;
}

.footerTrustPilotRatingDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #ffffff;
    font-family: Montserrat;
    font-size: 1rem;
}

.footerRatingLinkText {
    color: #ffffff;
}

.footerTextDiv {
    width: calc(100vw - 30rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerText {
    text-align: left;
    font-family: Montserrat;
    font-size: 1.2rem;
}

.footerButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 5rem;
}

.footerButtonText {
    position: absolute;
}

.footerBottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15rem;
    padding-right: 15rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 5rem;
}

.footerBottomLinkText {
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
}

.footerLogoPhoto {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.footerMiddleDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footerCompetitionsText {
    font-size: 1.2rem;
    text-align: left;
    line-height: 2rem;
}

.footerEmailSubmitDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ffffff5a;
}

.footerCompetitionsDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 5rem;
}

.footerEmailInput {
    width: 40rem;
    height: 3.5rem;
    background-color: transparent;
    border: none;
    color: #ffffff;
    padding-left: 1rem;
}

.footerEmailSubmitButton {
    height: 4rem;
    width: 10rem;
    font-family: Montserrat;
    color: #f7971e;
    font-weight: bolder;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    margin-left: 2px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Torch Glow */

.torchGlow {
    position: absolute;
    z-index: -3;
    background-color: #ff4202;
    box-shadow: 0 0 6.5rem 6.5rem #ff4202;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}

/* Video IFRAME */

.videoIframe {
    cursor: pointer;
    pointer-events: auto;
    width: 65rem;
    height: 37rem;
    border: none;
    outline: none;
}

/* Current Link Text */

.currentLinkText {
    color: #f7971e !important;
}

/* D/N Toggle */

.dnToggleDiv {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transform: translateX(-15rem);
}

.dnToggleMobileDiv {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 99999999;
}

.dnSliderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
}

.dnSliderBody {
    position: relative;
    width: 8rem;
    height: 4rem;
    border-radius: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 5px 1px #0000005a;
    background-color: #092236;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.dnButtonBody {
    width: 2.75rem;
    height: 2.75rem;
    background-color: #FEFCD7;
    border-radius: 50%;
    transform: translateX(2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.crescentBody {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: #092236;
    transform: translateX(-0.7rem);
}

.stars {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.star1 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-0.5rem) translateY(-0.7rem);
    border-radius: 50%;
}

.star2 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(-2rem) translateY(0.65rem);
    border-radius: 50%;
}

.star3 {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    background-color: #ffffff;
    z-index: 100;
    transform: translateX(0.5rem) translateY(0rem);
    border-radius: 50%;
}

.cloud {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
}

.cloud1 {
    position: absolute;
    width: 2.5rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.8rem);
}

.cloud2 {
    position: absolute;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.35rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.5rem) translateY(-0.5rem);
}

.cloud3 {
    position: absolute;
    width: 3.75rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: #f5f5f5d0;
    transform: translateX(6.7rem) translateY(0.5rem);
}

/* D/N Toggle */
.day {
    opacity: 0;
    display: none;
}