/* Mobile */
        @media screen and (max-width : 576px) {

            .embed-resizer {
                width: 250px;
                height: 150px;
            }

            .Mobile-Video2{
                
            }

            .Mobile-Spanner {
                height: 600px;
                position: relative;
            }

            .Mobile-Spanner2 {
                height: 400px;
                position: relative;
            }

            hr.screenbreak {
                width: 15%;
                border-top: 2px solid white;
                opacity: 0.5;
            }

            p.Title{
                font-family: aqua;
                font-size: 10px;
                margin-left: 12.5%;
                margin-right: 0%;
                padding: 5%;
                text-shadow: 0px 2px 18px rgba(0,0,0,0.85);
                transform: translate(0%,40%);
                background-color: rgba(0, 0, 0, 0.15);
            }

            .aboutgame {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 8px;
                opacity : 0.8;
                color: white;
                position: absolute;
                margin-top: 10.5%;
                text-align: center;

            }

            span.video-splitter {
                padding: 1%;
            }

            .character{
                padding-top: 11%;
            }

            .aboutcombat {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 15px;
                opacity : 0.8;
                color: white;
                z-index: 1;
                margin-top: 17.5%;
            }

            a.link-game {
                text-decoration: none;
            }

            .link-game-text {
                color: white;
                opacity: 0.75;
                text-decoration: none;
                text-align: center;

                padding-top: 3%;
                padding-right: 1%;
            }

            img.link-game {
                transition : 0.8s;
                background-position: 0px 0px;
                transform: translateX(5px);
                width: 20%;
                height: 20%;
            }

            img.link-game:hover{
                transform: scale(1.1);
            }

            iframe.embed-video {
                transform: scale(0.8,0.8);
                padding-left: 20%;
                padding-bottom: 10%;
                border: none;
                border-radius: 15px;
                /*
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-
                */
            }

            video.video-header-logo {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1,1);
            }

            video.video-header-combat {
                width: 100%;
                height: 480px;
                position: absolute;
                object-fit: cover;
                object-position: 50% 0px;
                transform: scale(1,1);
            }

            .parallax-image {
              /* The image used */
              background-image: url('../img/game/SS1.png');

              /* Set a specific height */
              width: 100%;
              min-height: 280px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50%,1600% !important;
              background-repeat: no-repeat;
              background-size: cover;

            }

            .parallax-image2 {
              /* The image used */
              background-image: url('../img/game/SS2.png');

              /* Set a specific height */
              width: 100%;
              min-height: 240px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50%,50%;
              background-repeat: no-repeat;
              background-size: cover;


            }

            .parallax-image3 {
              /* The image used */
              background-image: url('../img/game/SS_WORLD.png');

              /* Set a specific height */
              min-height: 240px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 33%, 75%;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image4 {
              /* The image used */
              background-image: url('../img/game/SS4.png');

              /* Set a specific height */
              min-height: 360px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50% 150px;
              
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image5 {
              /* The image used */
              background-image: url('../vid/fod_cover_4k/fod-cover.mp4');

              /* Set a specific height */
              min-height: 320px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image-text-inside {
                color: rgb(255,255,255);
                color: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(80,76,153,1) 26%, rgba(15,7,140,1) 50%, rgba(106,102,167,1) 77%, rgba(250,250,250,1) 100%);
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 9px;
                opacity: 70%;
                margin-bottom : 8%;
                margin-left: 8%;
                margin-right: 8%;
                padding-left: 8%;
                padding-right: 8%;
                letter-spacing: 1px;
                padding-top : 12%;
            }

            .parallax-image-text-inside2 {
                color: white;
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                margin-left: 5%;
                margin-right: 5%;
                padding-left: 5%;
                padding-right: 5%;
                letter-spacing: 2px;
            }


            .parallax-image-text-inside3 {
                color: white;
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                margin-left: 5%;
                margin-right: 5%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }

            .parallax-image-text-inside4 {
                color: white;
                background: rgba(0, 0, 0, 0.4);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside5 {
                color: white;
                background: rgba(0, 0, 0, 0.3);
                margin-left: 5%;
                margin-right: 5%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside6 {
                color: white;
                background: rgba(0, 0, 0, 0.4);
                margin-left: 3%;
                margin-right: 3%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 1px;
                z-index: -1;
            }

            .parallax-wrapper {    
                color: white;
                background: transparent;
                text-align: center;
                font-family: aqua;
                font-size: 12px !important;
                opacity: 70%;
                margin-left: 15%;
                margin-right: 15%;
                min-height: 480px;
            }

            .nav-link {
                color : white;
        
            }

            a.about {
                letter-spacing : 1px;
                color : #000 !important;
                text-decoration : none;
                transition : color 0.3s ease;
            }

            a.about:hover {
                color : #f00 !important;
                text-decoration : none;
            }
            .window-wrapper {
                width : 100%;
                height : 200px;
                background : #000;
            }

            .window-wrapper2 {
                width : 100%;
                height : 500px;
                background : transparent;
                opacity : 0.9;
            }

            .wrapper-about {
                width : 100%;
                height : auto;
                position : relative;
                max-height : 300px;
                bottom : 200px;
            }

            .wrapper-about img {
                position: absolute;
                width: 100%;
                height: auto;
                opacity: 0.3;
                max-height : 200px;
            }

            .wrapper-about h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-about p {
                position : relative;
                z-index : 2;
            }

            .wrapper-story {
                width : 100%;
                height : 250px; !important;
                position : relative;
            }

            .wrapper-story img {
                position: relative;
                width: 100%;
                height: auto;
                max-height : 360px;
                opacity: 0.6;
            }

            .wrapper-story h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-story p {
                position : relative;
                z-index : 2;
            }

            .parallax-window {
                min-height : 720px;
                max-height : 900px;
                color: white;
                background : transparent; 
            }

            .container-fluid {
                padding-right:0;
                padding-left:0;
                margin-right:auto;
                margin-left:auto
            }

            h2.Title { 
                color : #fff;
                font-family : aqua;
                letter-spacing : 7px;
                text-align : center;
                font-family : aqua;
                font-size : 2vw !important;
                padding-top : 50px !important;
                opacity : 1 !important;
            }

            p.Desc { 
                color : #fff;
                font-family : minimal;
                font-size : 25px ;
                text-shadow : 0 0 1px #fff, 0 0 15px #000;
                letter-spacing : 2px;
                text-align : center;
                padding-left : 45px;
                padding-right : 45px;
                margin-left : 15%;
                margin-right : 15%;
                opacity : 1 !important;
            }

            .preloader {
                position: fixed;
                display :block;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: #fff;
            }
            
            .bg-dark { 
                transition : 500ms ease;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#2579a8",GradientType=1);

                height : 70px;
            }

            .bg-dark.scrolled {
                opacity : 0.85;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
                
                
                height : 60px !important;
            }

            ul li a {
                color : #fff !important;
                letter-spacing : 2px;
                transition : color .5s ease;
            }

            ul li a:hover {
                color: rgb(182,0,0) !important;
                color : linear-gradient(0deg, rgba(182,0,0,1) 0%, rgba(255,250,250,0.8603641285615808) 96%) !important;
                text-decoration : none;
            }
            
            img.owl {
                transition : 0.8s;
                border-radius : 0px;
                width: 70%;
                height: 70%;
            }

            img.owl:hover {
                opacity : 0.8px;
                transform : scale(1.05);
            }

            img.Buy {
                transition : 0.7s;
            }

            img.Buy:Hover {
                cursor : pointer;
                box-shadow : 0 0 10px #fff, 0 0 5px #ffd700;
            }

            body {
                overflow: auto;
                overflow-x: hidden;

                background: linear-gradient(160deg, #000d1a 0%, #000d1a 20%, #000d1a 60%, #000000 100%);
            }

            .navbar-custom-background {
                background-image: url('<?php echo base_url('assets/img/header-fod.png'); ?>');
                background-repeat: repeat-x;
                background-color : #000;
                background-size : 100% 100%;
                width : auto;
                max-width : 100%;
                object-fit : contain;
            }

            .navbar-inner{
                background-image: url('<?php echo base_url('assets/img/FOD/ENV3.jpg'); ?>');
                background-repeat: repeat-x;
                background-color : transparent;
            }

            .abs-center-x {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .abs-center-xy {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                bottom : 50%;
                transform: translate(-50%,50%);
            }

            .nav-item {
                font-family : aqua;
                padding-top : 15px;
                width : 100px;
                margin : 10px;
                padding-left : 0px;
                font-size : 12px;
                transition : transform .5s;   
            }

            a.nav-link {
                color : #fff;
                letter-spacing : 4px;
                transition : color 500ms ease;
            }



            .about-section {
                background: #fff;
            }

            .navbar-brand-center
            {
                position:absolute;
                left:calc(50%);
            }

            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .centered-content {
                position : absolute;
                top : 70%;
                left : 50%;
                transform : translate(-50%, -50%);
            }

            img.game-logo {
                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink;
                -webkit-animation-duration : 3s;

                animation-name : blink;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
                transition : transform 0.5s ease;    
            }

            img.game-logo:hover {
                transform : scale(1.1);
            }

            @keyframes blink {
                from { filter: drop-shadow(0px 0px 0px #000); transform : translatey(0px);   }
                to { filter: drop-shadow(-3px 3px 5px #6495ED); transform : translatey(5px);  }
            }

            h1.fractals-title {
                background: rgb(255,255,255);

                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#053c96",GradientType=1);
                -webkit-background-clip : text;
                -webkit-text-fill-color : transparent;

                font-family : aqua;
                letter-spacing : 5px;
            }

            h2.fractals-subtitle {
                color : white;
                
                font-family : destiny;
                letter-spacing : 4px;

                animation : flow 10s ease-in-out infinite;
                animation-direction : normal;
                background : linear-gradient(-60deg,#07b3f7,#ededed,#4f9af0,#41b4d1);
                background-size : 300%;

                -webkit-background-clip : text;
                background-clip : text;
                -webkit-text-fill-color : transparent;

            }

            @keyframes flow {
                0% { background-position : 0 50% }
                50% { background-position : 100% 50% }
                100% { background-position : 0 50%}
            }

            a.fractal-link {
                position : relative;
                font-family : destiny;
                bottom : 10px;
            }

            .about-block {
            }

            img.fractals-head-img {
                width : 100% !important;
                height : auto !important;

                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink-header-img;
                -webkit-animation-duration : 3s;

                animation-name : blink-header-img;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
            }

            @keyframes blink-header-img {
                from { filter: drop-shadow(0px 0px 0px #000);   }
                to { filter: drop-shadow(-1px 1px 4px #6495ED);   }
            }

            .isDisabled {
                color: black !important;
                opacity: 0.8;
                text-decoration: none;
            }


            

            .about-link-active {
                color : #3bb0eb !important;
                text-shadow : 0 0 3px #3bb6eb;
            }

            a.nav-link:hover {
                color : rgba(0, 0.3, , 1.0) !important;
            }
            
            .footer {
              position: relative;
              opacity : 0.55;
              font-size : 8px;
              font-family : renner;
              margin: 5%;
              width: 100%;
              letter-spacing: 2px;
              background-color: transparent;
              color: white;
              text-align: center;
            }

            html {
                /* To make use of full height of page*/
                min-height: 100%;
                margin: 0;
            }
        }
        
        /* Tablet */
        @media only screen and (min-width : 600px) and (max-width : 992px) {
            .embed-resizer {
                width: 150px;
                height: 84px;
            }
            
            
            .Mobile-Video2 {
            }

            .Mobile-Spanner {
                height: 480px;
                position: relative;
            }

            .Mobile-Spanner2 {
                height: 400px;
                position: relative;
            }

            hr.screenbreak {
                width: 15%;
                border-top: 2px solid white;
                opacity: 0.5;
            }

            p.Title{
                font-family: aqua;
                font-size: 10px;
                margin-left: 5%;
                margin-right: 0%;
                padding: 5%;
                text-shadow: 0px 2px 18px rgba(0,0,0,0.85);
                transform: translate(0%,25%);
                background-color: rgba(0, 0, 0, 0.15);
            }

            .aboutgame {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 8px;
                opacity : 0.8;
                color: white;
                position: absolute;
                margin-top: 13.5%;
                text-align: center;

            }

            span.video-splitter {
                padding: 1%;
            }

            .character{
                padding-top: 11%;
            }

            .aboutcombat {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 15px;
                opacity : 0.8;
                color: white;
                z-index: 1;
                margin-top: 17.5%;
            }

            a.link-game {
                text-decoration: none;
            }

            .link-game-text {
                color: white;
                opacity: 0.75;
                text-decoration: none;
                text-align: center;

                padding-top: 3%;
                padding-right: 1%;
            }

            img.link-game {
                transition : 0.8s;
                background-position: 0px 0px;
                transform: translateX(5px);
                width: 20%;
                height: 20%;
            }

            img.link-game:hover{
                transform: scale(1.1);
            }


            iframe.embed-video {
                transform: scale(1, 1);
                border: none;
                border-radius: 5px;
                /*
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-
                */
            }

            video.video-header-logo {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1,1);
            }

            video.video-header-combat {
                width: 100%;
                height: 480px;
                position: absolute;
                object-fit: cover;
                object-position: 50% 0px;
                transform: scale(1,1);
            }

            .parallax-image {
              /* The image used */
              background-image: url('../img/game/SS1.png');

              /* Set a specific height */
              width: 100%;
              min-height: 240px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50%,50%;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image2 {
              /* The image used */
              background-image: url('../img/game/SS2.png');

              /* Set a specific height */
              width: 100%;
              min-height: 240px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50%,50%;
              background-repeat: no-repeat;
              background-size: cover;


            }

            .parallax-image3 {
              /* The image used */
              background-image: url('../img/game/SS_WORLD.png');

              /* Set a specific height */
              min-height: 240px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 33%, 75%;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image4 {
              /* The image used */
              background-image: url('../img/game/SS4.png');

              /* Set a specific height */
              min-height: 360px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 50% 210px;
              
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image5 {
              /* The image used */
              background-image: url('../vid/fod_cover_4k/fod-cover.mp4');

              /* Set a specific height */
              min-height: 320px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image-text-inside {
                color: rgb(255,255,255);
                color: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(80,76,153,1) 26%, rgba(15,7,140,1) 50%, rgba(106,102,167,1) 77%, rgba(250,250,250,1) 100%);
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 9px;
                opacity: 70%;
                margin-left: 2%;
                padding-left: 2%;
                padding-right: 2%;
                letter-spacing: 1px;
            }

            .parallax-image-text-inside2 {
                color: white;
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                margin-left: 5%;
                margin-right: 5%;
                padding-left: 5%;
                padding-right: 5%;
                letter-spacing: 2px;
            }


            .parallax-image-text-inside3 {
                color: white;
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                margin-left: 5%;
                margin-right: 5%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }

            .parallax-image-text-inside4 {
                color: white;
                background: rgba(0, 0, 0, 0.4);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside5 {
                color: white;
                background: rgba(0, 0, 0, 0.3);
                margin-left: 5%;
                margin-right: 5%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside6 {
                color: white;
                background: rgba(0, 0, 0, 0.25);
                margin-left: 3%;
                margin-right: 3%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 10px;
                opacity: 70%;
                letter-spacing: 1px;
                z-index: -1;
            }

            .parallax-wrapper {     
                color: white;
                background: transparent;
                text-align: center;
                font-family: aqua;
                font-size: 12px !important;
                opacity: 70%;
                margin-left: 15%;
                margin-right: 15%;
                min-height: 480px;
            }

            .nav-link {
                color : white;
        
            }

            a.about {
                letter-spacing : 1px;
                color : #000 !important;
                text-decoration : none;
                transition : color 0.3s ease;
            }

            a.about:hover {
                color : #f00 !important;
                text-decoration : none;
            }
            .window-wrapper {
                width : 100%;
                height : 200px;
                background : #000;
            }

            .window-wrapper2 {
                width : 100%;
                height : 500px;
                background : transparent;
                opacity : 0.9;
            }

            .wrapper-about {
                width : 100%;
                height : auto;
                position : relative;
                max-height : 300px;
                bottom : 200px;
            }

            .wrapper-about img {
                position: absolute;
                width: 100%;
                height: auto;
                opacity: 0.3;
                max-height : 200px;
            }

            .wrapper-about h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-about p {
                position : relative;
                z-index : 2;
            }

            .wrapper-story {
                width : 100%;
                height : 250px; !important;
                position : relative;
            }

            .wrapper-story img {
                position: relative;
                width: 100%;
                height: auto;
                max-height : 360px;
                opacity: 0.6;
            }

            .wrapper-story h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-story p {
                position : relative;
                z-index : 2;
            }

            .parallax-window {
                min-height : 720px;
                max-height : 900px;
                color: white;
                background : transparent; 
            }

            .container-fluid {
                padding-right:0;
                padding-left:0;
                margin-right:auto;
                margin-left:auto
            }

            h2.Title { 
                color : #fff;
                font-family : aqua;
                letter-spacing : 7px;
                text-align : center;
                font-family : aqua;
                font-size : 2vw !important;
                padding-top : 50px !important;
                opacity : 1 !important;
            }

            p.Desc { 
                color : #fff;
                font-family : minimal;
                font-size : 25px ;
                text-shadow : 0 0 1px #fff, 0 0 15px #000;
                letter-spacing : 2px;
                text-align : center;
                padding-left : 45px;
                padding-right : 45px;
                margin-left : 15%;
                margin-right : 15%;
                opacity : 1 !important;
            }

            .preloader {
                position: fixed;
                display :block;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: #fff;
            }
            
            .bg-dark { 
                transition : 500ms ease;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#2579a8",GradientType=1);

                height : 70px;
            }

            .bg-dark.scrolled {
                opacity : 0.85;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
                
                
                height : 60px !important;
            }

            ul li a {
                color : #fff !important;
                letter-spacing : 2px;
                transition : color .5s ease;
            }

            ul li a:hover {
                color: rgb(182,0,0) !important;
                color : linear-gradient(0deg, rgba(182,0,0,1) 0%, rgba(255,250,250,0.8603641285615808) 96%) !important;
                text-decoration : none;
            }
            
            img.owl {
                transition : 0.8s;
                border-radius : 0px;
                width: 70%;
                height: 70%;
            }

            img.owl:hover {
                opacity : 0.8px;
                transform : scale(1.05);
            }

            img.Buy {
                transition : 0.7s;
            }

            img.Buy:Hover {
                cursor : pointer;
                box-shadow : 0 0 10px #fff, 0 0 5px #ffd700;
            }

            body {
                overflow: auto;
                overflow-x: hidden;

                background: linear-gradient(160deg, #000d1a 0%, #000d1a 20%, #000d1a 60%, #000000 100%);
            }

            .navbar-custom-background {
                background-image: url('<?php echo base_url('assets/img/header-fod.png'); ?>');
                background-repeat: repeat-x;
                background-color : #000;
                background-size : 100% 100%;
                width : auto;
                max-width : 100%;
                object-fit : contain;
            }

            .navbar-inner{
                background-image: url('<?php echo base_url('assets/img/FOD/ENV3.jpg'); ?>');
                background-repeat: repeat-x;
                background-color : transparent;
            }

            .abs-center-x {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .abs-center-xy {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                bottom : 50%;
                transform: translate(-50%,50%);
            }

            .nav-item {
                font-family : aqua;
                padding-top : 15px;
                width : 100px;
                margin : 10px;
                padding-left : 0px;
                font-size : 12px;
                transition : transform .5s;   
            }

            a.nav-link {
                color : #fff;
                letter-spacing : 4px;
                transition : color 500ms ease;
            }



            .about-section {
                background: #fff;
            }

            .navbar-brand-center
            {
                position:absolute;
                left:calc(50%);
            }

            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .centered-content {
                position : absolute;
                top : 70%;
                left : 50%;
                transform : translate(-50%, -50%);
            }

            img.game-logo {
                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink;
                -webkit-animation-duration : 3s;

                animation-name : blink;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
                transition : transform 0.5s ease;    
            }

            img.game-logo:hover {
                transform : scale(1.1);
            }

            @keyframes blink {
                from { filter: drop-shadow(0px 0px 0px #000); transform : translatey(0px);   }
                to { filter: drop-shadow(-3px 3px 5px #6495ED); transform : translatey(5px);  }
            }

            h1.fractals-title {
                background: rgb(255,255,255);

                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#053c96",GradientType=1);
                -webkit-background-clip : text;
                -webkit-text-fill-color : transparent;

                font-family : aqua;
                letter-spacing : 5px;
            }

            h2.fractals-subtitle {
                color : white;
                
                font-family : destiny;
                letter-spacing : 4px;

                animation : flow 10s ease-in-out infinite;
                animation-direction : normal;
                background : linear-gradient(-60deg,#07b3f7,#ededed,#4f9af0,#41b4d1);
                background-size : 300%;

                -webkit-background-clip : text;
                background-clip : text;
                -webkit-text-fill-color : transparent;

            }

            @keyframes flow {
                0% { background-position : 0 50% }
                50% { background-position : 100% 50% }
                100% { background-position : 0 50%}
            }

            a.fractal-link {
                position : relative;
                font-family : destiny;
                bottom : 10px;
            }

            .about-block {
            }

            img.fractals-head-img {
                width : 100% !important;
                height : auto !important;

                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink-header-img;
                -webkit-animation-duration : 3s;

                animation-name : blink-header-img;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
            }

            @keyframes blink-header-img {
                from { filter: drop-shadow(0px 0px 0px #000);   }
                to { filter: drop-shadow(-1px 1px 4px #6495ED);   }
            }

            .isDisabled {
                color: black !important;
                opacity: 0.8;
                text-decoration: none;
            }


            

            .about-link-active {
                color : #3bb0eb !important;
                text-shadow : 0 0 3px #3bb6eb;
            }

            a.nav-link:hover {
                color : rgba(0, 0.3, , 1.0); !important;
            }
            
            .footer {
              position: relative;
              opacity : 0.55;
              font-size : 8px;
              font-family : renner;
              margin: 5%;
              width: 100%;
              letter-spacing: 2px;
              background-color: transparent;
              color: white;
              text-align: center;
            }

            html {
                /* To make use of full height of page*/
                min-height: 100%;
                margin: 0;
            }
        }

        /* Tablet Desktop */
        @media only screen and (min-width : 1024px) {

            .embed-splitter{
                display: none;
            }

            hr.screenbreak {
                width: 35%;
                border-top: 2px solid white;
                opacity: 0.5;
            }

            p.Title{
                margin-left: 5%;
                margin-right: 5%;
                text-shadow: 0px 2px 18px rgba(255,228,228,0.55);
            }

            .aboutgame {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 15px;
                opacity : 0.8;
                color: white;
                position: absolute;
                margin-top: 17.5%;

            }

            span.video-splitter {
                padding: 1%;
            }

            .character{
                padding-top: 11%;
            }

            .aboutcombat {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 15px;
                opacity : 0.8;
                color: white;
                z-index: 1;
                margin-top: 17.5%;
            }


            img.link-game {
                transition : 0.8s;
                object-position: center;
                width: 7%;
                height: 7%;
                text-decoration: none;
            }

            a.link-game {
                text-decoration: none;
            }

            .link-game-text {
                color: white;
                opacity: 0.75;
                text-decoration: none;
                text-align: center;

                padding-top: 1%;
                padding-right: 1%;
            }

            img.link-game:hover{
                transform: scale(1.1);
                text-decoration: none;
            }

            iframe.embed-video {
                border: none;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-
            }


            .video-header-logo {
                margin-top : -3.5%;
                width: 100%;
            }

            .video-header-combat {
                width: 100%;
                height: 640px;
                position: absolute;
                object-fit: none;
            }

            .parallax-image {
              /* The image used */
              background-image: url('../img/game/SS1.png');

              /* Set a specific height */
              min-height: 720px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: inherit;
            }

            .parallax-image2 {
              /* The image used */
              background-image: url('../img/game/SS2.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image3 {
              /* The image used */
              background-image: url('../img/game/SS3.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image4 {
              /* The image used */
              background-image: url('../img/game/SS4.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 0% 20vw;
              background-repeat: no-repeat;
              background-size: 100%;
            }

            .parallax-image5 {
              /* The image used */
              background-image: url('../vid/fod_cover_4k/fod-cover.mp4');

              /* Set a specific height */
              min-height: 640px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image-text-inside {
                color: rgb(255,255,255);
                color: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(80,76,153,1) 26%, rgba(15,7,140,1) 50%, rgba(106,102,167,1) 77%, rgba(250,250,250,1) 100%);
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 15px;
                opacity: 70%;
                margin-left: 2%;
                padding-left: 2%;
                padding-right: 2%;
                letter-spacing: 1px;
            }

            .parallax-image-text-inside2 {
                color: white;
                background: rgba(0,0,0,0.45);
                text-align: center;
                font-family: aqua;
                opacity: 70%;
                margin-left: 30%;
                margin-right: 30%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }


            .parallax-image-text-inside3 {
                color: white;
                background: rgba(0,0,0,0.45);
                text-align: right;
                font-family: aqua;
                opacity: 70%;
                margin-left: 25%;
                margin-right: 5%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }

            .parallax-image-text-inside4 {
                color: white;
                background: rgba(0, 0, 0, 0.45);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside5 {
                color: white;
                background: rgba(0, 0, 0, 0.45);
                margin-left: 5%;
                margin-right: 50%;
                text-align: left;
                padding: 2%;
                font-family: aqua;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside6 {
                color: white;
                background: rgba(0, 0, 0, 0.35);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 15px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-wrapper {     
                color: white;
                background: transparent;
                text-align: center;
                font-family: aqua;
                opacity: 70%;
                margin-left: 15%;
                margin-right: 15%;
                min-height: 480px;
            }

                    .nav-link {
                color : white;
        
            }

            a.about {
                letter-spacing : 1px;
                color : #000 !important;
                text-decoration : none;
                transition : color 0.3s ease;
            }

            a.about:hover {
                color : #f00 !important;
                text-decoration : none;
            }
            .window-wrapper {
                width : 100%;
                height : 200px;
                background : #000;
            }

            .window-wrapper2 {
                width : 100%;
                height : 500px;
                background : transparent;
                opacity : 0.9;
            }

            .wrapper-about {
                width : 100%;
                height : auto;
                position : relative;
                max-height : 300px;
                bottom : 200px;
            }

            .wrapper-about img {
                position: absolute;
                width: 100%;
                height: auto;
                opacity: 0.3;
                max-height : 200px;
            }

            .wrapper-about h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-about p {
                position : relative;
                z-index : 2;
            }

            .wrapper-story {
                width : 100%;
                height : 250px; !important;
                position : relative;
            }

            .wrapper-story img {
                position: relative;
                width: 100%;
                height: auto;
                max-height : 360px;
                opacity: 0.6;
            }

            .wrapper-story h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-story p {
                position : relative;
                z-index : 2;
            }

            .parallax-window {
                min-height : 720px;
                max-height : 900px;
                color: white;
                background : transparent; 
            }

            .container-fluid {
                padding-right:0;
                padding-left:0;
                margin-right:auto;
                margin-left:auto
            }

            h2.Title { 
                color : #fff;
                font-family : aqua;
                letter-spacing : 7px;
                text-align : center;
                font-family : aqua;
                font-size : 2vw !important;
                padding-top : 50px !important;
                opacity : 1 !important;
            }

            p.Desc { 
                color : #fff;
                font-family : minimal;
                font-size : 25px ;
                text-shadow : 0 0 1px #fff, 0 0 15px #000;
                letter-spacing : 2px;
                text-align : center;
                padding-left : 45px;
                padding-right : 45px;
                margin-left : 15%;
                margin-right : 15%;
                opacity : 1 !important;
            }

            .preloader {
                position: fixed;
                display :block;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: #fff;
            }
            
            .bg-dark { 
                transition : 500ms ease;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#2579a8",GradientType=1);

                height : 70px;
            }

            .bg-dark.scrolled {
                opacity : 0.85;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
                
                
                height : 60px !important;
            }

            ul li a {
                color : #fff !important;
                letter-spacing : 2px;
                transition : color .5s ease;
            }

            ul li a:hover {
                color: rgb(182,0,0) !important;
                color : linear-gradient(0deg, rgba(182,0,0,1) 0%, rgba(255,250,250,0.8603641285615808) 96%) !important;
                text-decoration : none;
            }

            .owl-images {
                width: 70%;
            }
            
            img.owl {
                transition : 0.8s;
                border-radius : 0px;
                
            }

            img.owl:hover {
                opacity : 0.8px;
                transform : scale(1.05);
            }

            img.Buy {
                transition : 0.7s;
            }

            img.Buy:Hover {
                cursor : pointer;
                box-shadow : 0 0 10px #fff, 0 0 5px #ffd700;
            }

            body {
                overflow: auto;
                overflow-x: hidden;

                background: linear-gradient(160deg, #000d1a 0%, #000d1a 20%, #000d1a 60%, #000000 100%);
            }

            .navbar-custom-background {
                background-image: url('<?php echo base_url('assets/img/header-fod.png'); ?>');
                background-repeat: repeat-x;
                background-color : #000;
                background-size : 100% 100%;
                width : auto;
                max-width : 100%;
                object-fit : contain;
            }

            .navbar-inner{
                background-image: url('<?php echo base_url('assets/img/FOD/ENV3.jpg'); ?>');
                background-repeat: repeat-x;
                background-color : transparent;
            }

            .abs-center-x {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .abs-center-xy {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                bottom : 50%;
                transform: translate(-50%,50%);
            }

            .nav-item {
                font-family : aqua;
                padding-top : 15px;
                width : 100px;
                margin : 10px;
                padding-left : 0px;
                font-size : 12px;
                transition : transform .5s;   
            }

            a.nav-link {
                color : #fff;
                letter-spacing : 4px;
                transition : color 500ms ease;
            }



            .about-section {
                background: #fff;
            }

            .navbar-brand-center
            {
                position:absolute;
                left:calc(50%);
            }

            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .centered-content {
                position : absolute;
                top : 70%;
                left : 50%;
                transform : translate(-50%, -50%);
            }

            img.game-logo {
                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink;
                -webkit-animation-duration : 3s;

                animation-name : blink;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
                transition : transform 0.5s ease;    
            }

            img.game-logo:hover {
                transform : scale(1.1);
            }

            @keyframes blink {
                from { filter: drop-shadow(0px 0px 0px #000); transform : translatey(0px);   }
                to { filter: drop-shadow(-3px 3px 5px #6495ED); transform : translatey(5px);  }
            }

            h1.fractals-title {
                background: rgb(255,255,255);

                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#053c96",GradientType=1);
                -webkit-background-clip : text;
                -webkit-text-fill-color : transparent;

                font-family : aqua;
                letter-spacing : 5px;
            }

            h2.fractals-subtitle {
                color : white;
                
                font-family : destiny;
                letter-spacing : 4px;

                animation : flow 10s ease-in-out infinite;
                animation-direction : normal;
                background : linear-gradient(-60deg,#07b3f7,#ededed,#4f9af0,#41b4d1);
                background-size : 300%;

                -webkit-background-clip : text;
                background-clip : text;
                -webkit-text-fill-color : transparent;

            }

            @keyframes flow {
                0% { background-position : 0 50% }
                50% { background-position : 100% 50% }
                100% { background-position : 0 50%}
            }

            a.fractal-link {
                position : relative;
                font-family : destiny;
                bottom : 10px;
            }

            .about-block {
            }

            img.fractals-head-img {
                width : 100% !important;
                height : auto !important;

                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink-header-img;
                -webkit-animation-duration : 3s;

                animation-name : blink-header-img;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
            }

            @keyframes blink-header-img {
                from { filter: drop-shadow(0px 0px 0px #000);   }
                to { filter: drop-shadow(-1px 1px 4px #6495ED);   }
            }

            .isDisabled {
                color: black !important;
                opacity: 0.8;
                text-decoration: none;
            }


            
            .about-link-active {
                color : #3bb0eb !important;
                text-shadow : 0 0 3px #3bb6eb;
            }

            a.nav-link:hover {
                color : rgba(0, 0.3, , 1.0); !important;
            }
            
            span.footer {
                position: relative;
                height: 400px;
            }

            .footer {
              position: relative;
              opacity : 0.75;
              font-size : 12px;
              font-family : renner;
              left: 0;
              right : 0%;
              bottom: 0;
              width: 100%;
              letter-spacing: 2px;
              background-color: transparent;
              color: white;
              text-align: center;
            }

            html {
                /* To make use of full height of page*/
                min-height: 100%;
                margin: 0;
            }
        }
        
        /* Desktop */
        @media only screen and (min-width : 1200px) {
            
            .embed-resizer {
                width: 540px;
                height: 304px;
            }

            .embed-splitter{
                display: none;
            }

            hr.screenbreak {
                width: 35%;
                border-top: 2px solid white;
                opacity: 0.5;
            }

            p.Title{
                margin-left: 5%;
                margin-right: 5%;
                text-shadow: 0px 2px 18px rgba(255,228,228,0.55);
            }

            .aboutgame {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 20px;
                opacity : 0.8;
                color: white;
                position: absolute;
                margin-top: 17.5%;

            }

            span.video-splitter {
                padding: 1%;
            }

            .character{
                padding-top: 11%;
            }

            .aboutcombat {
                font-family : destiny; 
                letter-spacing : 2px;
                font-size : 15px;
                opacity : 0.8;
                color: white;
                z-index: 1;
                margin-top: 17.5%;
            }


            img.link-game {
                transition : 0.8s;
                object-position: center;
                width: 7%;
                height: 7%;
                text-decoration: none;
            }

            a.link-game {
                text-decoration: none;
            }

            .link-game-text {
                color: white;
                opacity: 0.75;
                text-decoration: none;
                text-align: center;

                padding-top: 1%;
                padding-right: 1%;
            }

            img.link-game:hover{
                transform: scale(1.1);
                text-decoration: none;
            }

            iframe.embed-video {
                border: none;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;-moz-
            }


            .video-header-logo {
                margin-top : -3.5%;
                width: 100%;
            }

            .video-header-combat {
                width: 100%;
                height: 640px;
                position: absolute;
                object-fit: none;
            }

            .parallax-image {
              /* The image used */
              background-image: url('../img/game/SS1.png');

              /* Set a specific height */
              min-height: 720px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: inherit;
            }

            .parallax-image2 {
              /* The image used */
              background-image: url('../img/game/SS2.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image3 {
              /* The image used */
              background-image: url('../img/game/SS3.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image4 {
              /* The image used */
              background-image: url('../img/game/SS4.png');

              /* Set a specific height */
              min-height: 480px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: 0% 20vw;
              background-repeat: no-repeat;
              background-size: 100%;
            }

            .parallax-image5 {
              /* The image used */
              background-image: url('../vid/fod_cover_4k/fod-cover.mp4');

              /* Set a specific height */
              min-height: 640px;

              /* Create the parallax scrolling effect */
              background-attachment: fixed;
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
            }

            .parallax-image-text-inside {
                color: rgb(255,255,255);
                color: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(80,76,153,1) 26%, rgba(15,7,140,1) 50%, rgba(106,102,167,1) 77%, rgba(250,250,250,1) 100%);
                background: rgba(0,0,0,0.4);
                text-align: center;
                font-family: aqua;
                font-size: 15px;
                opacity: 70%;
                margin-left: 15%;
                padding-left: 2%;
                padding-right: 2%;
                letter-spacing: 1px;
            }

            .parallax-image-text-inside2 {
                color: white;
                background: rgba(0,0,0,0.45);
                text-align: center;
                font-family: aqua;
                opacity: 70%;
                margin-left: 30%;
                margin-right: 30%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }


            .parallax-image-text-inside3 {
                color: white;
                background: rgba(0,0,0,0.45);
                text-align: right;
                font-family: aqua;
                opacity: 70%;
                margin-left: 25%;
                margin-right: 5%;
                padding-left: 3%;
                padding-right: 3%;
                letter-spacing: 2px;
            }

            .parallax-image-text-inside4 {
                color: white;
                background: rgba(0, 0, 0, 0.45);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside5 {
                color: white;
                background: rgba(0, 0, 0, 0.45);
                margin-left: 5%;
                margin-right: 50%;
                text-align: left;
                padding: 2%;
                font-family: aqua;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-image-text-inside6 {
                color: white;
                background: rgba(0, 0, 0, 0.4);
                margin-left: 15%;
                margin-right: 15%;
                text-align: center;
                padding: 2%;
                font-family: aqua;
                font-size: 15px;
                opacity: 70%;
                letter-spacing: 2px;
                z-index: -1;
            }

            .parallax-wrapper {     
                color: white;
                background: transparent;
                text-align: center;
                font-family: aqua;
                opacity: 70%;
                margin-left: 15%;
                margin-right: 15%;
                min-height: 480px;
            }

                    .nav-link {
                color : white;
        
            }

            a.about {
                letter-spacing : 1px;
                color : #000 !important;
                text-decoration : none;
                transition : color 0.3s ease;
            }

            a.about:hover {
                color : #f00 !important;
                text-decoration : none;
            }
            .window-wrapper {
                width : 100%;
                height : 200px;
                background : #000;
            }

            .window-wrapper2 {
                width : 100%;
                height : 500px;
                background : transparent;
                opacity : 0.9;
            }

            .wrapper-about {
                width : 100%;
                height : auto;
                position : relative;
                max-height : 300px;
                bottom : 200px;
            }

            .wrapper-about img {
                position: absolute;
                width: 100%;
                height: auto;
                opacity: 0.3;
                max-height : 200px;
            }

            .wrapper-about h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-about p {
                position : relative;
                z-index : 2;
            }

            .wrapper-story {
                width : 100%;
                height : 250px; !important;
                position : relative;
            }

            .wrapper-story img {
                position: relative;
                width: 100%;
                height: auto;
                max-height : 360px;
                opacity: 0.6;
            }

            .wrapper-story h2 {
                position : relative;
                z-index : 2;
            }

            .wrapper-story p {
                position : relative;
                z-index : 2;
            }

            .parallax-window {
                min-height : 720px;
                max-height : 900px;
                color: white;
                background : transparent; 
            }

            .container-fluid {
                padding-right:0;
                padding-left:0;
                margin-right:auto;
                margin-left:auto
            }

            h2.Title { 
                color : #fff;
                font-family : aqua;
                letter-spacing : 7px;
                text-align : center;
                font-family : aqua;
                font-size : 2vw !important;
                padding-top : 50px !important;
                opacity : 1 !important;
            }

            p.Desc { 
                color : #fff;
                font-family : minimal;
                font-size : 25px ;
                text-shadow : 0 0 1px #fff, 0 0 15px #000;
                letter-spacing : 2px;
                text-align : center;
                padding-left : 45px;
                padding-right : 45px;
                margin-left : 15%;
                margin-right : 15%;
                opacity : 1 !important;
            }

            .preloader {
                position: fixed;
                display :block;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: #fff;
            }
            
            .bg-dark { 
                transition : 500ms ease;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.0) 0%, rgba(37,121,168,0.45) 95%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#2579a8",GradientType=1);

                height : 70px;
            }

            .bg-dark.scrolled {
                opacity : 0.85;

                background: rgb(255,255,255) !important;
                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                background: linear-gradient(0deg, rgba(255,255,255,0.05085784313725494) 0%, rgba(0,0,0,0.5) 100%) !important;
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#000000",GradientType=1);
                
                
                height : 60px !important;
            }

            ul li a {
                color : #fff !important;
                letter-spacing : 2px;
                transition : color .5s ease;
            }

            ul li a:hover {
                color: rgb(182,0,0) !important;
                color : linear-gradient(0deg, rgba(182,0,0,1) 0%, rgba(255,250,250,0.8603641285615808) 96%) !important;
                text-decoration : none;
            }

            .owl-images {
                width: 70%;
            }
            
            img.owl {
                transition : 0.8s;
                border-radius : 0px;
                
            }

            img.owl:hover {
                opacity : 0.8px;
                transform : scale(1.05);
            }

            img.Buy {
                transition : 0.7s;
            }

            img.Buy:Hover {
                cursor : pointer;
                box-shadow : 0 0 10px #fff, 0 0 5px #ffd700;
            }

            body {
                overflow: auto;
                overflow-x: hidden;

                background: linear-gradient(160deg, #000d1a 0%, #000d1a 20%, #000d1a 60%, #000000 100%);
            }

            .navbar-custom-background {
                background-image: url('<?php echo base_url('assets/img/header-fod.png'); ?>');
                background-repeat: repeat-x;
                background-color : #000;
                background-size : 100% 100%;
                width : auto;
                max-width : 100%;
                object-fit : contain;
            }

            .navbar-inner{
                background-image: url('<?php echo base_url('assets/img/FOD/ENV3.jpg'); ?>');
                background-repeat: repeat-x;
                background-color : transparent;
            }

            .abs-center-x {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            .abs-center-xy {
                padding-top : 25px;
                position: absolute;
                left: 50%;
                bottom : 50%;
                transform: translate(-50%,50%);
            }

            .nav-item {
                font-family : aqua;
                padding-top : 15px;
                width : 100px;
                margin : 10px;
                padding-left : 0px;
                font-size : 12px;
                transition : transform .5s;   
            }

            a.nav-link {
                color : #fff;
                letter-spacing : 4px;
                transition : color 500ms ease;
            }



            .about-section {
                background: #fff;
            }

            .navbar-brand-center
            {
                position:absolute;
                left:calc(50%);
            }

            .centered {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .centered-content {
                position : absolute;
                top : 70%;
                left : 50%;
                transform : translate(-50%, -50%);
            }

            img.game-logo {
                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink;
                -webkit-animation-duration : 3s;

                animation-name : blink;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
                transition : transform 0.5s ease;    
            }

            img.game-logo:hover {
                transform : scale(1.1);
            }

            @keyframes blink {
                from { filter: drop-shadow(0px 0px 0px #000); transform : translatey(0px);   }
                to { filter: drop-shadow(-3px 3px 5px #6495ED); transform : translatey(5px);  }
            }

            h1.fractals-title {
                background: rgb(255,255,255);

                background: -moz-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: -webkit-linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                background: linear-gradient(0deg, rgba(255,255,255,0.3757878151260504) 0%, rgba(5,60,150,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#053c96",GradientType=1);
                -webkit-background-clip : text;
                -webkit-text-fill-color : transparent;

                font-family : aqua;
                letter-spacing : 5px;
            }

            h2.fractals-subtitle {
                color : white;
                
                font-family : destiny;
                letter-spacing : 4px;

                animation : flow 10s ease-in-out infinite;
                animation-direction : normal;
                background : linear-gradient(-60deg,#07b3f7,#ededed,#4f9af0,#41b4d1);
                background-size : 300%;

                -webkit-background-clip : text;
                background-clip : text;
                -webkit-text-fill-color : transparent;

            }

            @keyframes flow {
                0% { background-position : 0 50% }
                50% { background-position : 100% 50% }
                100% { background-position : 0 50%}
            }

            a.fractal-link {
                position : relative;
                font-family : destiny;
                bottom : 10px;
            }

            .about-block {
            }

            img.fractals-head-img {
                width : 100% !important;
                height : auto !important;

                -webkit-filter: drop-shadow(1px 1px 2px #6495ED);
                -webkit-animation-name : blink-header-img;
                -webkit-animation-duration : 3s;

                animation-name : blink-header-img;
                animation-duration : 3s;
                animation-iteration-count: infinite;
                animation-direction: alternate;

                filter: drop-shadow(-1px 1px 2px #6495ED);
            }

            @keyframes blink-header-img {
                from { filter: drop-shadow(0px 0px 0px #000);   }
                to { filter: drop-shadow(-1px 1px 4px #6495ED);   }
            }

            .isDisabled {
                color: black !important;
                opacity: 0.8;
                text-decoration: none;
            }


            
            .about-link-active {
                color : #3bb0eb !important;
                text-shadow : 0 0 3px #3bb6eb;
            }

            a.nav-link:hover {
                color : rgba(0, 0.3, , 1.0); !important;
            }
            
            span.footer {
                position: relative;
                height: 400px;
            }

            .footer {
              position: relative;
              opacity : 0.75;
              font-size : 12px;
              font-family : renner;
              left: 0;
              right : 0%;
              bottom: 0;
              width: 100%;
              letter-spacing: 2px;
              background-color: transparent;
              color: white;
              text-align: center;
            }

            html {
                /* To make use of full height of page*/
                min-height: 100%;
                margin: 0;
            }
        }



        /*
        @media only screen and (max-width : 400px),(max-width : 576px),(max-width : 992px) {

            
            img.Header { 
                width : 150px;
            }

            h2.Title { 
                color : #fff;
                font-family : renner;
                font-size : 30px;
                letter-spacing : 3px;
                text-align : center;
                padding-top : 50px !important;
                opacity : 1 !important;
            }

            p.Desc { 
                color : #fff;
                text-decoration : none;
                font-family : minimal;
                font-size : 13px !important;
                text-shadow : 0 0 1px #fff, 0 0 15px #000;
                letter-spacing : 2px;
                text-align : center;
                padding-left : 35px;
                padding-right : 35px;
                opacity : 1 !important;
            }

            .parallax-window {
                min-height : 300px !important;
                background : transparent; 
            }

            .parallax-window2{
                min-height : 200px !important;
                background : transparent; 
            }

            .window-wrapper {
                width : 100%;
                height : 150px !important;
                background : #000;
            }

            .window-wrapper2 {
                position : relative;
                width : 100%;
                height : 450px !important;
                background : #000;
            }

            .window-wrapper3 {
                width : 100%;
                height : 300px !important;
                background: url('<?php echo base_url('assets/img/FOD/story-block.png'); ?>') !important;
                opacity : 0.75;
            }
        }
        */