@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

        :root{
            /*colours*/
            --MainColour: rgba(255, 255, 255, 1);
            --DownloadColour: rgb(254, 179, 0);
            --DownloadHover: rgb(194, 160, 8);
            --activeColour: #feb300;
            --activeColourAlpha: rgba(254, 179, 0,.3);
            --SubscribeColour:rgb(255, 255, 255);
            --SubscribeHover:rgb(224, 222, 222);
            --MainFontColor: white;
            --NavBarColour: rgba(24, 25, 29,.9);
            --TextShadow: 4px 4px 5px black;
            --gradientBG: linear-gradient(to bottom,rgba(66, 19, 62, 0.75)40%, rgba(254, 179, 0,.75)), url("../images/backgrounds/Blue.jpg");
            
            /*spacings*/
            --borderRadius: 5px;
            --footerPadding: 10px 60px;

            /*timings*/
            --MainAnimTime: 0.3s;
            --SecondaryAnimTime: .5s;
            --MainTransitionTime: all .3s ease;

            
        }
        /* the * is the everything selector.*/
        *, *::after, *::before{
            box-sizing: border-box;/* important as includes padding and border in any elements height n width*/
            margin: 0;
            padding: 0;
            transition: var(--MainTransitionTime);
        }
        /* custom scroll bar, only works for webkit browsers*/
        ::-webkit-scrollbar{
            width: 0.6em;
            height: 0.6em;
            padding-right: 20px;
        }
        ::-webkit-scrollbar-track {
            cursor: pointer;
            background-color: rgba(0, 0, 0,1);
        }				 
        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            cursor: pointer;
            background-color: var(--activeColour);			  
        }
        img{
            max-width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }
        
        body{background-color: #18191D; overflow-x: hidden;}
        button, body{font-family: 'Russo One', sans-serif;}
        .MainSection{
            height: 100vh;
            width: 100vw;
        }
        @media only screen and (max-width: 1024px) {
            body{overflow-y: scroll;}
        }
        /* -------------typography-----------------*/
        h1{
            font-size: 6em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        .SecondWord{color: var(--activeColour);}
        h2{
            font-size: 3em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        h3{
            font-size: 2em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        h4{
            font-size: 1.5em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        .myheader{color: var(--activeColour);}
        h5{
            font-size: 1.1em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        p{
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
            font-family: 'Roboto', sans-serif;
        }
        .headings p, .heading p, .buttons> p{font-size: 1.5em;}
        a{text-decoration: none;}
        .legalLines{
            margin-top: 10px;
            font-style: italic;
            opacity: 0;
            animation-delay: calc(var(--MainAnimTime) *1.6)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.6)!important;
            font-size: .8em;
        }
        @media only screen and (max-width: 1024px) {
            body{overflow-y: scroll!important;}
            h1{font-size: 5em;}
            h2{font-size: 2em;}
            h3{font-size: 2em;}
            h4{font-size: 1em;}
            .headings p, .heading p, .buttons> p{font-size: 1.2em;}
        }
        @media only screen and (max-width: 768px) {
            body{overflow-y: scroll!important;}
            h1{font-size: 3em;}
            h2{font-size: 2em;}
            h3{font-size: 1em;}
            h4{font-size: 1em;}
        }
        /*---------------buttons-------------------*/
        .btn{
            border-radius: var(--borderRadius);
            border: none;
            cursor: pointer;
        }
        .btn:focus{outline: 0;}
        .btn-lg{
            padding: 10px;
            font-size: 20px;
        }
        .btn-download{
            background-color: var(--DownloadColour);
            color: var(--MainFontColor);
            box-shadow: var( --TextShadow);
        }
        .btn-download:hover{background-color: var(--DownloadHover);}
        .btn-subscribe{
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
            box-shadow: inset 0 0 0 5px var(--SubscribeColour), var( --TextShadow);
            background-color: transparent;
        }
        .btn-subscribe:hover{
            color: black;
            text-shadow: none;
            background-color: var(--SubscribeColour);
        }
        .fixedSize{width: 150px;}
        .fixedSizeXL{width: 250px; box-shadow: inset 0 0 0 5px var(--SubscribeColour)!important;}

        /* -------------nav bar-----------------*/
        .MainNav{
            position: fixed;
            z-index: 11;
            height: 100px;
            width: 100vw;
            display: flex;
            flex-direction: row;
            background: transparent;
        }
        .scrolled{
           background-color: var(--NavBarColour);
           border-bottom: 5px solid var(--activeColour);
        }
        .NavLogo, .NavLinks, .NavBtn{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%
        }
        .NavLogo{width: 10%;}
        .logo{
            max-width: 70%;
            height: auto;
        }
        .NavLinks{width: 80%;}
        .NavLinks li{
            list-style: none;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
            margin-left: 30px;
            font-size: 25px;
            position: relative;
            cursor: pointer;
        }
        .NavLinks li::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            background-color: var(--activeColour);
            top: 140%;
            left: 0px;
            right: 0px;
            opacity: 0;
            transition: var(--MainTransitionTime);
        }
        .NavLinks li.active::after, .NavLinks li:hover::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 5px;
            background-color: var(--activeColour);
            top: 120%;
            opacity: 1;
        }
        .NavBtn{
            width: 10%;
            margin-right: 10px;
        }
        .NavDownload{display: block;}
        .NavHamburger{display: none;}
        .SideNav{
            position: absolute;
            z-index: 10;
            top: 50vh;
            right: 3%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .SideNavBar{
            width: 7px;
            height: 40px;
            background-color: var(--MainColour);
            margin: 10px 0px;
            list-style: none;
            border-radius: var(--borderRadius);
            box-shadow: var(--TextShadow);
            position: relative;
            left: 38%;
        }
        .SideNavBar:nth-child(1){margin-top: 0px!important;}
        .SideArrow{list-style: none;}
        .SideArrow i{
            color: white;
            font-size: 2em;
            text-shadow: var(--TextShadow);
            margin: 0px!important;
            position: relative;
            cursor: pointer;
        }
        .innerbar{
            width: 100%;
            height: 100%;
            transform: scale(1,0);
            transform-origin: top;
            transition: var(--MainTransitionTime);
            border-radius: var(--borderRadius);
        }
        .innerbar.active{
            transform: scale(1,1);
            background-color: var(--activeColour);
        }
        .smallscreen{
            display: none;
            width: 100%;
            height: auto;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        @media only screen and (max-width: 1024px) {
            .smallscreen{display: flex;}
            .MainNav{
                position: fixed;
                background-color: var(--NavBarColour);
                height: 50px;
                border-bottom: none;
            }
            .NavDownload{display: none;}
            .NavHamburger{
                position: absolute;
                right: 15px;
                height: 100%;
                width: 60px;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
                cursor: pointer;
                /* padding: 0% 40px; */
            }
            .line{
                width: 40px;
                height: 5px;
                background-color: var(--MainFontColor);
                margin-bottom: 5px;
                transform-origin: left;
            }
            .line:nth-child(2){transform:scaleX(0.75);}
            .line:nth-child(3){transform:scaleX(0.5);margin-bottom: 0px;}
            .NavHamburger:hover .line{background-color: var(--activeColour)}
            .NavHamburger:hover .line:nth-child(2){transform:scaleX(1);}
            .NavHamburger:hover .line:nth-child(3){transform:scaleX(1);}
            .NavHamburger.XButton .line:nth-child(2){display: none}
            .NavHamburger.XButton .line:nth-child(1){transform: rotate(45deg) translateY(-12px)}
            .NavHamburger.XButton .line:nth-child(3){transform: rotate(-45deg)translateY(12px)}
            .NavHamburger.Xbutton .line{transform-origin: center!important}
            .NavHamburger.Xbutton .NavHamburger{align-items: center!important}

            .NavLogo{
                position: absolute;
                left: 20px;
                width: 100%;
                justify-content: flex-start;
                align-items: center;
                padding-top: 5px;
            }
            .logo{width: auto;height: 100%;}
            .NavBtn{
                position: absolute;
                right: 0;
                width: 100%;
                flex-direction: flex-end;
            }
            .NavLinks{
                position: absolute;
                top: 100vh;
                left: 0; 
                right: 0;
                height: 100vh;
                width: 100vw;
                background-color: rgba(24, 25, 29,.9);
                flex-direction: column;
                border-top: 5px solid var(--activeColour);
            }
            .links{opacity: 0;}
            .NavLinks li{
                opacity: 0!important;
                margin: 20px 0px;
                font-size: 25px;
            }
            .NavsocialIcons, #navDownload2{ opacity: 0;}
            /* #navDownload2{
                animation-delay: var(--MainAnimTime *3)!important;
                -webkit-animation-delay: var(--MainAnimTime*3)!important;
            }
            .NavsocialIcons{
                animation-delay: var(--MainAnimTime *2)!important;
                -webkit-animation-delay: var(--MainAnimTime*2)!important;
            } */
            .AnimateLinks{
                
            }
            .Navactive{top: 50px;}
            .socialIcons p{ display: none;}
            .SideNav{display: none;}
        }
        @media only screen and (max-width: 769px){
            .NavLinks li{
                margin: 10px 0px;
                font-size: 25px;
            }
        }
        /* -------------end nav bar-----------------*/

        /* -------------footer-----------------*/
        .footer{
            position: fixed;
            z-index: 10;
            width: 100%;
            height: 100px;
            background-color: transparent;
            bottom: 0;
            left:0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 1;
            padding: var(--footerPadding);
        }
        
        .subscribe, .mouse,.socialIcons, .NavsocialIcons{
            display: flex;
            flex-direction: row;
            align-items: center;
            height: auto;
        }
        .sectionFooter .socialIcons{
            justify-content: center;
            margin-bottom: 10px;
            padding: 10px;
            opacity: 0;
            animation-delay: calc(var(--MainAnimTime) *1.3)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.3)!important;
            width: 100%;
        }
        .sectionFooter .socialIcons i{
            font-size: 3em;
            margin-left: 20px;
            line-height: 1em;
        }
        .sectionFooter i[class^="fab "]{
            border-radius: 50%; 
            padding: 10px; 
            width: 80px; 
            height: 80px; 
            display: flex; 
            align-items: center; 
            justify-content: center;
        }
        .sectionFooter .fa-facebook-f{color: white; background-color: #3b5998; }
        .sectionFooter .fa-twitter{color: white; background-color: #26a7de; }
        .sectionFooter .fa-youtube{color: white; background-color:#b2071d;}
        .sectionFooter .fa-instagram{color: white; background:radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%),
                                                                radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%),
                                                                radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%),
                                                                radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%),
                                                                radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%),
                                                                radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%),
                                                                radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent),
                                                                linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);}

        .sectionFooter .fa-discord{color: white; background-color:#7289DA;}
        .subscribe{
            width: 45%;
            justify-content: flex-start;
        }
        .mouse{
            width: 10%;
            justify-content: center;
        }
        .scrollwheel{
            width: 30px;
            height: 50px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid white;
            display: flex;
            justify-content: center;
            box-shadow: 4px 4px 20px black;
        }
        .wheel{
            width: 5px;
            height: 13px;
            background-color: white;
            border-radius: 5px;
            transform: translateY(5px);
            animation: wheelAnim 2s ease infinite;
            -webkit-animation:  wheelAnim 2s ease infinite;
        }
        .socialIcons{
            justify-content: flex-end;
        }
        .NavsocialIcons{
            justify-content: center;
        }
        .socialIcons i, .NavsocialIcons i{
            margin-left: 10px;
            color: var(--MainFontColor);
            cursor: pointer;
            transition: all .2s ease;
            text-shadow: var( --TextShadow);
        }
        .NavsocialIcons i{margin: 10px;}
        .socialIcons i:hover, .NavsocialIcons i:hover{transform: scale(1.2);}
        .socialIcons p{
            margin-left: 10px;
            color: var(--MainFontColor);
            text-shadow: var( --TextShadow);
        }
        .socialIcons i, .socialIcons p, .NavsocialIcons i{
            font-size: 2em;
            line-height: 2em;
        }
        @media only screen and (max-width: 1240px){
            .sectionFooter .socialIcons i{
                font-size: 2em;
                margin-left: 10px;
                line-height: 1em;
            }
            .sectionFooter i[class^="fab "]{
                border-radius: 50%; 
                padding: 10px; 
                width: 60px; 
                height: 60px; 
            }
        }
        @media only screen and (max-width: 1024px) {
            .footer{display: none!important}
            .gameLogo{ max-width: 100%;}
            .altLogo {max-width: 100%;}
        }
        /* -------------end footer-----------------*/

        /* -------------Section footer-----------------*/
        .sectionFooter{
            width: 100%;
            min-height: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .footerImage{
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }
        .gameLogo{max-width: 70%;}
        .altLogo{
            max-width: 100%;
            animation-delay: calc(var(--MainAnimTime) *1.5)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.5)!important;
        }

        /* -------------end Section footer-----------------*/

        /* -------------main sections-----------------*/
        .section, .featureOne, .featureThree{
            width: 100vw;
            height: 100vh;
            padding: calc(10% *.80); 
        }
        .sectionFooter.Padding{
             padding: calc(10% *.80); 
             background-image:var(--gradientBG);
             background-position: center;
             background-size: cover;
             background-attachment: fixed;
        }
        .section{
            display: none;
            opacity: .9;
        }
        .featureOne{
            background-image:var(--gradientBG);
            background-position: bottom right;
            background-repeat: repeat-y;
            background-size: cover;
            background-attachment: fixed;
        }
        .featureFive{
            background: linear-gradient(to bottom,rgba(254, 179, 0,.75), rgba(66, 19, 62, .75)),url("../images/backgrounds/Blue.jpg") repeat-y center;      
            background-size: cover;
            background-attachment: fixed;
        }
        .featureOne, .featureTwo, .featureFive{
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .featureFive{
            padding: calc(10% *.80);
            width: 100vw;
            min-height: 100vh;
            height: auto;
        }
        .featureThree{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            overflow: hidden;
            padding: none;
            position: relative;
        }
        .mainFeatures{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            margin-top: 20px;
        }
        .mainFeatures.start{
            align-items: flex-start;
            text-align: left!important;
        }
        .mainFeatures.end{
            align-items: flex-end;
            text-align: right!important;
        }
        .mainFeature{
            width: 80%;
            height: auto;
            display: flex;
        }
        .mainFeatureImg{width: 40%; opacity: 0;display: flex;}
        .mainFeatureText{
            width: 60%; 
            opacity: 0; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            margin: 20px; 
            animation-delay: calc(var(--MainAnimTime) *1.2)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.2)!important;
        }
        @media only screen and (max-width: 768px){
            .mainFeatureImg{
                width: 100%;
                order: 1;
                justify-content: center;
            }
            .mainFeatureText{
                width: 100%;
                order: 2;
                margin: 20px 0px;
            }
            .mainFeature{flex-direction: column;}
            .mainFeatures.start{
                align-items: flex-start;
                text-align: center!important;
            }
            .mainFeatures.end{
                align-items: flex-start;
                text-align: center!important;
            }
        }
        @media only screen and (max-width: 1024px){
            .mainFeature{width: 100%}
        }
        .headings{
            display: flex;
            flex-direction: column;
            width: 70%;
            padding-right: 20px;
        }
        .headingsEnd{align-items: flex-end;}
        .heading, .buttons{
            opacity: 0;
            width: 70%;
        }
        .heading{
            animation-delay: var(--MainAnimTime);
            -webkit-animation-delay: var(--MainAnimTime); 
        }
        .headingEnd{
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            text-align: right;
        }
        .buttons{
            display: flex;
            flex-direction: row;
            animation-delay: calc(var(--MainAnimTime) *1.2)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.2)!important;
        }
        .sectionFooter .buttons{
            animation-delay: calc(var(--MainAnimTime) *1.4)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.4)!important;
        }
        
        .buttonsEnd{justify-content: flex-end;}
        .buttonsCenter{justify-content: center;}
        .buttons button{margin-right: 20px;}
        .buttonsEnd button{margin-left: 20px!important; margin-right: 0px;}
        .buttonsCenter button{margin: 10px}
        .featureBottom .buttons{
            flex-direction: column;
            align-items: flex-end;
        }
        .divider{
            width: 150px;
            height: 5px;
            background-color: var(--activeColour);
            margin: 20px 0px;
            box-shadow: var(--TextShadow);
        }
        @media only screen and (max-width: 1024px){
            .buttonsCenter{
                flex-direction: column;
                align-items: center;
            }
        }
        
        .section.active{display: flex!important; flex-direction: column; justify-content: center;}
        .section.One, .section.Two, .section.Three, .section.Four, .section.Features{
            width: 100vw;
            height: 100vh;
            animation: slideone var(--SecondaryAnimTime) ease  forwards;
            -webkit-animation: slideone var(--SecondaryAnimTime) ease forwards;
            background-size: cover;
        }
        .section.One{
            background-image: url("../images/backgrounds/PageBG1.jpg");
            background-position: bottom right;
        }
        .section.Features{
            background-image: url("../images/backgrounds/PageBG1.jpg");
            background-position: bottom right;
        }
        .section.Two{
            background-image: url("../images/backgrounds/PageBG2.png");
            background-position: bottom right;
        }
        .section.Three{
            padding: 0;
            background-image: url("../images/backgrounds/PageBG2.png");
            background-position: center;
        }
        .section.Four{
            background-image: url("../images/backgrounds/PageBG8.png");
            background-position: center;
        }
        .featureTop, .featureBottom{
            height: 50%;
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 12;
        }
        .featureTop{
            align-items: flex-start;
            justify-content: center;
            /* margin-top: 10%; */
            
        }
        .featureBottom{
            align-items: flex-end;
            justify-content: center;
        }
        
        @media only screen and (max-width: 1024px){
            .section{display: flex!important; flex-direction: column; justify-content: center; height: 100vh}
            .featureThree{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                overflow: hidden;
                padding: none;
                position: relative;
                height: auto;
            }
            .heading, .buttons{width: 100%;}
            .headings{width: 100%; margin-bottom: 30px;}
            .section.One, .section.Two, .section.Three, .section.Four{
                min-height: 100vh;
                height: auto;
            }
            .featureTop, .featureBottom{
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
            }
            .featureTop{
                align-items: flex-start;
                justify-content: center;
                margin-top: 0%;
                
            }
            .featureBottom{
                align-items: center;
                justify-content: center;
                
            }
        }
        @media only screen and (max-width: 1240px){
            .featureThree{
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                overflow: hidden;
                padding: none;
                position: relative;
                height: auto;
            }
            .featureOne{ height: auto;}
            .featureThree .headings{width: 100%; margin-bottom: 30px;}
        }
        .IframeContainer{
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 99;
            top: 0px;
            left:0px;
            right: 0px;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.7);
            transform: scale(0,0);
            transform-origin: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .closeBtn{
            position: absolute;
            height: 30px;
            width: 30px;
            top: 40px;
            right: 40px;
            z-index: 120;
            line-height: 30px;
            cursor: pointer;
            font-size: 30px;
            background-color:var(--activeColour);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--borderRadius);
        }
        .Closeline{position: absolute;width: 100%; height: 5px; background-color: white;}
        .Closeline:nth-child(1){transform: rotate(-45deg);}
        .Closeline:nth-child(2){transform: rotate(45deg);}
        .FrameActive{ transform: scale(1,1);}
        .dispalyNone{ display: none; }
        .popUpTrailerContainer{
            width: 60%;
            height: auto;
            margin: auto;
        }
        .TrailerContainer2{
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
        }
        .Trailer{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 2px solid white; 
            border-radius: var(--borderRadius);
            box-shadow: 0px 0px 60px 20px rgba(255, 255, 255,.3);
        }
        @media only screen and (max-width: 1240px){
            .popUpTrailerContainer{
                width: 70%;
            }
        }
        @media only screen and (max-width: 1024px){
            .popUpTrailerContainer{
                width: 80%;
            }
        }
        @media only screen and (max-width: 768px){
            .popUpTrailerContainer{
                width: 95%;
            }
        } 
        .slideShow{
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        .slide{
            width: 100vw;
            height: 100vh;
            background-size: 100%;
            background-position: center;
            display: none;
            flex-direction: column;
            padding: calc(10% *.80); 
            justify-content: center;
            animation-fill-mode: forwards;
            animation: slideone var(--MainAnimTime) ease; 
            -webkit-animation: slideone var(--MainAnimTime) ease; 
        }
        .slideEnd{align-items: flex-end;}
        .SlideBG{
            width: 100%!important;
            min-height: 100%!important;
            object-fit: cover;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            animation: expandBG 120s ease var(--MainAnimTime) infinite;
        }
        .SlideBGFromLeft{transform-origin: right center;}
        .indicators{
            position: absolute;
            z-index: 10;
            bottom: 20%;
            left: calc(10% *.80); 
            /* background-color: var(--activeColour); */
            width: 200px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .indicator{
            height: 5px;
            width: 30px;
            background-color: var(--MainColour);
            margin-right: 10px;
            border-radius: var(--borderRadius);
            box-shadow: var(--TextShadow);
            cursor: pointer;
        }
        .indicatorActive{
            width: 60px;
            background-color: var(--activeColour);
        }
        .arrows{
            position: absolute;
            z-index: 10;
            bottom: 20%;
            right: 3%;
            width: 120px;
            height: 50px;
            /* background-color: var(--MainColour); */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .arrow{
            width: 50px;
            height: 100%;
            background-color: transparent;
            margin-right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            border-radius: var(--borderRadius);
            box-shadow: inset 0 0 0 5px var(--SubscribeColour), var( --TextShadow);
            cursor: pointer;
            color: white;
        }
        @media only screen and (max-width: 768px){
            .arrows{width: 100px; height: 40px}
            .arrow{width: 40px;font-size: 1.3em;}
        }
        .featuresContainer{
            min-width: 100%;
            height: 420px;
            display: flex;
            align-items: center;
            padding-left: 40px;
            margin-top: 40px;
            /* padding-top: 40px; */
            overflow-x: scroll;
            overflow-y: hidden;
        }
        .featuresContainer::-webkit-scrollbar{
            width: 0.6em;
            height: 0.6em;
            margin: 0px;
        }
        .featuresContainer::-webkit-scrollbar-track {
            cursor: pointer;
            border-radius: 5px;
            background-color: rgba(0, 0, 0,.3);
        }				 
        .featuresContainer::-webkit-scrollbar-thumb {
            border-radius: 5px;
            cursor: pointer;
            background-color: var(--activeColourAlpha);			  
        }
        .featuresContainer:hover::-webkit-scrollbar-track {			    
            background-color: black;
        }
        .featuresContainer:hover::-webkit-scrollbar-thumb {			    
            background-color: rgba(254, 179, 0,1);
        }

        .feature{
            min-width: 300px;
            max-width: 300px;
            height: 300px;
            background-image: linear-gradient(rgba(66, 19, 62,1)70%, rgba(89, 26, 84, 0) );
            position: relative;
            border-radius: var(--borderRadius);
            /* box-shadow: var(--TextShadow); */
            margin-right: 50px; 
            opacity: 0;
        }
        .feature:nth-child(2){animation-delay: calc( var(--MainAnimTime) + .1s );}
        .feature:nth-child(3){animation-delay: calc( var(--MainAnimTime) + .2s );}
        .feature:nth-child(4){animation-delay: calc( var(--MainAnimTime) + .3s );}
        .featureIcon{
            min-width: 25px;
            height: 25px;
            background-color: var(--activeColour);
            position: absolute;
            top: -15px;
            left: -15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: var(--borderRadius);
            box-shadow: var(--TextShadow);
            transform: rotate(0deg); 
            opacity: 0;
        }
        
        .featureIcon i{
            font-size: 5em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        .featureIcon.download i{
            font-size: 3em!important;
            margin-bottom: .2em;
        }
        .featureIcon.download span{
            font-size: .9em;
            color: var(--MainFontColor);
            text-shadow: var(--TextShadow);
        }
        .featureText{
            width: calc(100%);
            height: calc(100% - 90px);
            margin-top: 10px;
            padding: 10px 10px;
            color: black;
            display: flex;
            flex-direction: column;
            /* overflow: hidden; */
            position: relative;
            
        }
        /* .featureText::after{
            content: url("volleyball-ball-solid_RED.svg");
            height: 100%;
            width: 100%;
            position: absolute;
            bottom: -10%;
            left: -20%;
            opacity: .2;
            color: var(--activeColour);
            overflow: hidden;
        } */
        .featureHeading{
            width: calc(100% - 70px);
            height: 70px;
            margin-top: 0px;
            margin-left: 38px;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .featureHeading h4{font-size: 2em;}
        .featureText p{font-size: 1.2em;}
        .TopPlayersContainer{
            width: 50%;
            height: 600px;
            position: relative;
            z-index: 2;
        }
        .TopPlayers{
            width: 100%;
            height: 100%;
            /* background-color: var(--MainColour); */
            border-radius: var(--borderRadius);
            position: relative;
            z-index: 5;
            box-shadow: var(--TextShadow);
            overflow-y: scroll;
        }
        .TopPlayers::-webkit-scrollbar{
            width: 0.6em;
            height: 0.6em;
            padding-right: 20px;
        }
        .TopPlayers::-webkit-scrollbar-track {
            cursor: pointer;
            background-color: rgba(0, 0, 0,1);
        }				 
        .TopPlayers::-webkit-scrollbar-thumb {
            border-radius: 5px;
            cursor: pointer;
            background-color: var(--activeColour);			  
        }
        .player{
            width: 100%;
            height: 33.3%;
            position: relative;
            display: flex;
            justify-content: flex-start;
            padding-left: 5%;
            align-items: flex-end;
            overflow: hidden;
            padding-right: 100px; 
        }
        .playerName{
            width: auto;
            min-width: 280px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }
        .playerCalibre{
            position: absolute;
            z-index: 5;
            top:0;
            left: 0;
            right: 0;
            width: 100%;
            height: 25%;
            /* background-color: #031331; */
            padding-left: 5%;
            display: flex;
            align-items: center;
        }
        .playerTeam{
            position: absolute;
            z-index: 4;
            left: 0;
            width: 25em;
            height: auto;
            opacity: 0.2;
        }
        .playerImage{
            position: relative;
            z-index: 5;
            bottom: 0;
            height: 95%;
            width: auto;
        }
        /*these are the badge positional classes*/
        .roostersTeam{top: -5%}
        .stormTeam{top: -20%!important}
        .sharksTeam{top: -50%!important}
        .raidersTeam{top: -40%!important}

        /* these are the colour classes for the teams*/
        .roostersPlayer{background-color:#0b2d5b; }
        .roostersCalibre{background-color: #001568;}

        .stormPlayer{background-color:#592b8c; }
        .stormCalibre{background-color: #140525;}

        .sharksPlayer{background-color:#1f7eb2; }
        .sharksCalibre{background-color: #00345d;}

        .raidersPlayer{background-color:#009a4d; }
        .raidersCalibre{background-color: #012611;}
        @media only screen and (max-width: 1240px){
            .TopPlayersContainer{
                width: 95%;
                margin-left: 0px;
            }
            .player{
                height: auto;
                padding-top: 80px;
                align-items: flex-start;
            }
            .playerImage{
                height: 300px;
                width: auto;
            }
            .playerCalibre{ height: 15%;}
            /* .playerCalibre{ height: 15%;} */
            .sharksTeam{top: -10%!important}
            .raidersTeam{top: -0%!important}
            .stormTeam{top: 0%!important}
            .playerTeam{
                left: 50%;
                transform:translateX(-55%);
            }
            .featuresContainer{
                min-width: 100%;
                height: auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-left: 40px;
                margin-top: 40px;
                /* padding-top: 40px; */
                overflow-x: scroll;
            }
            .feature{
                margin-top: 50px;
                min-width: 250px;
                max-width: 250px;
                height: 300px;
            }
            .featureIcon{
                min-width: 70px;
                height: 70px;
                top: -30px;
                left: -30px;
            }
            
            .featureIcon i{
                font-size: 3em;
            }
            .featureIcon.download i{
                font-size: 2em!important;
                margin-bottom: .2em;
            }
            .featureIcon.download span{
                font-size: .7em;
            }
            .featureText{
                width: calc(100%);
                height: calc(100% - 90px);
                margin-top: 10px;
                padding: 10px 10px;
            }
            .featureHeading{
                width: calc(100% - 20px);
                height: 70px;
                margin-top: 0px;
                margin-left: 20px;
            }
            .featureHeading h4{font-size: 1.5em;}
            .featureText p{font-size: 1em;}
        }
        @media only screen and (max-width: 1024px) {
            .player{
                height: auto;
                padding-top: 70px;
                align-items: center;
                flex-direction: column;
                padding-left: 5%;
                padding-right: 0px;
            }
            .playerCalibre{ height: 15%;}
            .playerName{min-width: 100%;}
            .sharksTeam{top: 10%!important}
            .raidersTeam{top: 10%!important}
            .roostersTeam{top: 10%}
            .stormTeam{top: 0%!important}
            .featuresContainer{
                min-width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-left: 40px;
                margin-top: 40px;
                /* padding-top: 40px; */
                overflow:hidden;
                flex-wrap: wrap;
            }
            .feature{
                margin-top: 50px;
                min-width: 250px;
                max-width: 250px;
                height: 300px;
            }
            .featuresContainer::-webkit-scrollbar-track {
                cursor: pointer;
                border-radius: 5px;
                background-color: rgba(0, 0, 0,1);
            }				 
            .featuresContainer::-webkit-scrollbar-thumb {
                border-radius: 5px;
                cursor: pointer;
                background-color: var(--activeColour);			  
            }
           .SlideBG{
               animation: none;
            }
            .slide{
                min-height: 100vh;
                height: auto;
            }
        }
        .timelineContainer{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 12;
            padding: 0px 5%;
            opacity: 0;
            animation-delay: calc(var(--MainAnimTime) *1.2)!important;
            -webkit-animation-delay: calc(var(--MainAnimTime) *1.2)!important;
        }
        .timeline{
            position: relative;
            width: 70%;
            z-index: 1;
        }
        .timeline::after{
            content: '';
            position: absolute;
            height: 5px;
            background-color: var(--activeColour);
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            right: 0;
            border-radius: var(--borderRadius);
            box-shadow: var(--TextShadow);
        }
        .timeslot{
            width: 200px;
            height: 200px;
            /* background-color: var(--activeColour); */
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: var(--borderRadius);
            /* box-shadow: var(--TextShadow); */
            z-index: 2;
            cursor: pointer;
        }
        .timeslot::after{
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            right: 50%;
            transform: translateX(50%);
            background-color: white;
            border: 4px solid var(--activeColour);
            top: calc(100% + 8px);
            border-radius: 50%;
            z-index: 2;
            box-shadow: var(--TextShadow);
        }
        .timeslot.bottom::after{top: calc(0% - 32px);}
        .topLeft{top: 50%; left:0; transform: translate(calc(-50%),calc(-100% - 20px))}
        .topRight{top: 50%; right: 0; transform: translate(calc(50%),calc(-100% - 20px))}
        .topCentre{top: 0%; right: 50%; transform: translate(calc(50%),calc(-100% - 20px))}
        @media only screen and (max-width: 1024px){
            .timeline{
                display: none;
            }
        }

        .ImageGallery{
            width: 100%;
            height: auto;
            border-radius: var(--borderRadius);
        }
        .GalleryRow{
            width: 100%;
            height: 300px;
            display: flex;
            flex-wrap: wrap;
            margin: 0px;
            padding:0px;
        }
        .GalleryCol2{
            width: 50%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .GalleryCol4{
            width: 25%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        .GalleryImage{
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }
        .GalleryImage:hover{
            transform: scale(1.1);
            opacity: 0.5;
        }
        .fa-images, .ImageText{
            color: white;
            position: absolute;
            z-index: 10;
            opacity: 0;
            text-shadow: var(--TextShadow);
        }
        .fa-images{
            top: 5%;
            right: 5%;
            font-size: 2em;
        }
        .ImageText{
            bottom: 5%;
            left: 5%;
            font-size: 1.5em;
        }
        .GalleryCol4:hover .fa-images{opacity: 1;}
        .GalleryCol4:hover .ImageText{opacity: 1;}

        .GalleryCol2:hover .fa-images{opacity: 1;}
        .GalleryCol2:hover .ImageText{opacity: 1;}
        @media only screen and (max-width: 1400px){
            .GalleryCol4{
                width: 50%;
                height: 100%;
            }
            .GalleryRow{
                transform: rotate(0deg);
                flex-wrap: wrap;
                height: auto;
            }
        }
        @media only screen and (max-width: 1024px){
            .GalleryImage{
                opacity: .7;
            }
            .GalleryImage:hover{
                transform: scale(1);
                opacity: 0.7;
            }
            .fa-images{opacity: 1;}
            .ImageText{opacity: 1; font-size: 1.2em;}
        }
        @media only screen and (max-width: 768px){
            /* .GalleryRow{
                transform: rotate(0deg);
                flex-wrap: wrap;
                height: auto;
            } */
            .GalleryCol2{
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            .GalleryCol4{
                width: 100%;
                height: 100%;
                overflow: hidden;
                position: relative;
            }
            .ImageGallery{height: auto;}
        }
        /* -------------end main sections-----------------*/

        /*--------------animations------------------------*/
        .slideUp{
            animation: slideUp var(--SecondaryAnimTime) ease-in-out var(--MainAnimTime) forwards;
            -webkit-animation: slideUp var(--SecondaryAnimTime) ease-in-out var(--MainAnimTime) forwards;
        }
        .slideUpAngle{
            animation: slideUpAngle var(--SecondaryAnimTime) ease-in-out var(--MainAnimTime) forwards;
            -webkit-animation: slideUpAngle var(--SecondaryAnimTime) ease-in-out var(--MainAnimTime) forwards;
        }

        @keyframes wheelAnim{
            0%{transform: translateY(5px); }
            70%{opacity: 1;}
            100%{transform: translateY(15px); opacity: 0;}
        }
        @keyframes slideUp{
            0%{transform: translateY(60px); opacity: 0;}
            70%{transform: translateY(-15px);}
            100%{transform: translateY(0px); opacity: 1;}
        }
        @keyframes slideUpAngle{
            0%{transform: translateY(60px) rotate(0deg); opacity: 0;}
            70%{transform: translateY(-15px)rotate(-10deg);}
            100%{transform: translateY(0px) rotate(-10deg); opacity: 1;}
        }
        @keyframes slideone {
            0%   {opacity: .9;transform: translateY(1.5%);} 
            100% {opacity: 1;transform: translateY(0%);} 
        }
        @keyframes expandBG{
            0%{transform: scale(1)}
            50%{transform: scale(1.3)}
            100%{transform: scale(1)}
        }