body {

    height: 100vh; /*for scroll*/

    overflow: hidden;

    scrollbar-color: black;

    background-color: black;

}



.form-control.is-valid, .was-validated .form-control:valid {

    border-color: #1468F4;

}



body::-webkit-scrollbar-track {

    background: black;

}



body::-webkit-scrollbar-thumb {

    background-color: black;

}



/* Smooth scroll */

.smooth-scroll-container {

    width: 100%;

    height: 100%;

    /*CSS Smoth scroll below*/

    overflow-y: scroll;

    scroll-behavior: smooth;

}



.background-image-container {

    font-family: 'Montserrat', sans-serif;

    background-color: black;

    background-image: url("../images/hero-shape.png");

    background-repeat: no-repeat;



}



/* slider */

.hero-right {

    z-index: 1;

}



.wrapper {

    width: 100%;

    height: auto;

    overflow: hidden;

}



.owl-dots {

    display: none;

}



.owl-item > div {

    /* margin: 6% 8%;

    transition: margin 0.4s ease; */

}



.owl-item.center > div {

    cursor: auto;

    margin: 0;

    background-color: #1468F4;

    box-shadow: 0px 3px 20px #1468F4;

}



.owl-item:not(.center) > div:hover {

    opacity: .75;

}



.item {

    background-color: black;

    height: 400px;

    padding: 50px;

}



.slide-title {

    font-size: 29px;

    font-weight: bold;

    padding-bottom: 15px;

}



.btn-slide-back {

    margin-right: -2px;

    background: url(../images/left-black.png);

    background-repeat: no-repeat;

    background-position: center;

}



.btn-slide-back:hover {

    background: url(../images/left-white.png);

    background-repeat: no-repeat;

    background-position: center;

}



.btn-slide-forward {

    margin-left: -2px;

    background: url(../images/right-black.png);

    background-repeat: no-repeat;

    background-position: center;

}



.btn-slide-forward:hover {

    background: url(../images/right-white.png);

    background-repeat: no-repeat;

    background-position: center;

}



.btn-slide-controls {

    border-radius: 0;

    border-color: none;

    background-color: white;

    height: 86px;

    width: 86px;

}



.btn-slide-controls:hover {

    background-color: #1468F4;

}



@media (max-width: 1200px) { 

    .slider-btn {

        text-align: center;

    }

}



.navbar {

    font-size: 20px;

    padding-left: 30px;

    padding-right: 30px;

    font-weight: 600;

    

    background-image:

    linear-gradient(

    rgb(0, 0, 0), rgba(255,0,0,0)

    );

}



.navbar-nav > li {

    padding-left:30px;

    padding-right:30px;

    text-align: center;

}



.nav-link {

    color: white !important;

    border-top: 5px solid transparent;

    padding-top: 20px;

    margin-top: -15px;

    

}



.nav-link:hover {

    color: #1468F4 !important;

}



@media (min-width: 1200px) { 

    .nav-link:hover {

        padding-top: 20px;

        margin-top: -15px;

        border-top: 5px solid #1468F4;

        -webkit-transition: all 0.3s ease;                  

        -moz-transition: all 0.3s ease;                 

        -o-transition: all 0.3s ease;   

        -ms-transition: all 0.3s ease;          

        transition: all 0.3s ease;

    }

}



/*menu full screen*/

.main-menu {

    width: 100%; 

    height: 100%; 

    opacity: 0; 

    visibility: hidden;

}



.nav-open .main-menu {

    opacity: 1; 

    visibility: visible; 

    background: rgba(0, 0, 0, 0.95); 

    z-index: 500000000;

}



.nav-open .main-menu .nav li{

    opacity: 1;

    -webkit-transform: translateY(0px);

    transform: translateY(0px);

    -webkit-transition: -webkit-transform .2s,opacity .2s;

    transition: transform .2s,opacity .2s;

}



.main-menu .nav li{

    opacity: 0;

    -webkit-transform: translateY(-40px);

    transform: translateY(-40px);

    -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1);

    -moz-animation-timing-function: cubic-bezier(.45,.005,0,1);

    -o-animation-timing-function: cubic-bezier(.45,.005,0,1);

    animation-timing-function: cubic-bezier(.45,.005,0,1);

}



.flex-center{

    display:-webkit-box;

    display:-webkit-flex;

    display:-ms-flexbox;

    display:flex;

    -webkit-box-pack:center;

    -webkit-justify-content:center;

    -ms-flex-pack:center;

    justify-content:center;

    -webkit-box-align:center;

    -webkit-align-items:center;

    -ms-flex-align:center;

    align-items:center;

    height:100%

}



.nav-button{

    position:relative; 

    z-index:1111111111111; 

    border:solid 1px #f8f8f8;  

    height:42px; 

    display:block;

     width:50px; 

     padding:12px; 

    

}



.flex-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}



.nav-button:focus {

    box-shadow: none !important;

    outline: none !important; 

}



.navbar-dark .navbar-toggler {

    border-color: transparent !important;

}



.bg-black {

    background-color: black;

}



.navbar-inverse .navbar-toggler-icon {

    background-image: url("data:image/svg+xml;..") !important;

}



.hero-left {

    color: white;

    padding-left: 0;

    padding-right: 0;

}





.hero-left {

    padding-top: 125px;

    padding-left: 80px;

    padding-right: 40px;

    padding-bottom: 60px;

}



.hero-right-pic {

    image-rendering: -webkit-optimize-contrast;

    image-rendering: crisp-edges;

}



.main-title {

    font-size: 75px;

}



.main-title-two {

    margin-top: -26px;

    padding-bottom: 40px;

}



.main-info {

    font-size: 20px;

}



.main-button {

    padding-top: 40px;

}



/* Smaller screen */

@media (min-width: 1500px) {

    .hero-right-pic {

        margin-top: 140px;

    }

}





@media (max-width: 1555px) { 

    .hero-left {

        padding: 40px;

    }



    .main-title {

        font-size: 40px;

    }



    .main-title-two {

        margin-top: 0;

        padding-bottom: 30px;

    }



    .main-info {

        font-size: 14px;

    }

}



@media (max-width: 768px) { 

    .hero-left {

        padding: 20px;

    }



    .main-button {

        text-align: center;

    }



    body {

        background-size: 295px;

    }

}



@media (max-width: 392px) { 

    .main-title {

        font-size: 35px;

    }



}





@media (max-width: 346px) { 

    .main-title {

        font-size: 30px;

    }



    .navbar {

        padding-left: 5px;

        padding-right: 5px;

    }



}



/* .hero-right-pic {

    margin-top: 63px;

} */



/* Game section */

.no-padding {

    padding: 0;

}



.img-eclipse {

    position: absolute;

    margin-top: 225px;

    z-index: 5;

    padding-left: 37px;

}



/* About Us */

.about-main {

    color: white;

}



.about-title {

    font-size: 55px;

    font-weight: bold;

}



.about-info {

    font-size: 20px;

    padding-top: 40px;

    padding-bottom: 40px;

    padding-right: 180px;

}



.about-pic {

    text-align: center;

}



.img-about-btn, .btn-play-video {

    position: absolute;

    margin-top: 440px;

    margin-left: 450px;

}



.btn-play-video {

    height: 117px;

    width: 117px;

    background-color: red;

    background: url(../images/play-button.png);

    background-repeat: no-repeat;

    background-position: center;

}



.btn-play-video:hover {

    background: url(../images/play-button-inverted.png);

    background-repeat: no-repeat;

    background-position: center;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

}



.img-about {

    margin-right: -150px; /* big screens */

}



@media (max-width: 1360px) { 

    .img-about {

        margin-right: auto;

        margin-bottom: 50px;

    }



    .img-about-btn, .btn-play-video {

        height: 94px;

        margin-top: 381px;

        margin-left: 246px;

    }



}



@media (max-width: 1200px) { 

    .about-info {

    padding-top: 40px;

    padding-bottom: 40px;

    padding-right: 20px;

    padding-left: 20px;

    }



    .about-title {

        font-size: 40px;

        padding-left:20px;

        text-align: center;

    }



    .about-btn {

        text-align: center;

    }



}



@media (max-width: 650px) { 

    .img-about-btn, .btn-play-video {

        margin-top: 230px;

        margin-left: 143px;

    }



    .about-info {

        font-size: 14px;

        padding-left: 15px;

        padding-right: 15px;

        padding-top: 15px;

        padding-bottom: 20px;

    }

}



@media (max-width: 392px) { 

    .img-about {

        margin-right: auto;

        margin-bottom: 150px;

    }



    .img-about-btn, .btn-play-video {

        height: 94px;

        margin-top: 230px;

        margin-left: 107px;

    }

}



/* Slider */

.slide-section {

    margin-top: 80px;

    margin-bottom: 50px;

    color: white;

}



.slide-left {

    padding: 60px;

    padding-top: 0;

}



.slider-title {

    font-size: 55px;

    font-weight: bold;

}



.slider-btn {

    padding-top: 30px;

}



@media (max-width: 1200px) {

    .slide-left {

        padding: 30px;

    }



    .slider-title {

        font-size: 30px;

        text-align: center;

    }

}



/* Footer - contact form */

.contact-title {
    font-size: 2rem;
    color: white;
    text-align: left;
}

.contact-subtitle {
    font-size: 1.2rem;
    color: white;
    text-align: left;
    padding-bottom: 1rem;
}

footer {

    color: white;

}



.form-control {

    border-radius: 0;

    background-color: black;

    border: 3px solid rgba(255, 255, 255, 0.23);

}



.form-btn {

    text-align: right;

}



::-webkit-input-placeholder { /* Chrome/Opera/Safari */

    color: white !important;

}

::-moz-placeholder { /* Firefox 19+ */

    color: white !important;

}

:-ms-input-placeholder { /* IE 10+ */

    color: white !important;

}

:-moz-placeholder { /* Firefox 18- */

    color: white !important;

}



textarea {

    border: 3px solid rgba(255, 255, 255, 0.23);

}



textarea:focus {

    color: white !important;

    background-color: black !important;

    border: 3px solid #1468F4 !important;

}



input:focus {

    color: white !important;

    background-color: black !important;

    border: 3px solid #1468F4 !important;

}



input, select, textarea{

    color: white !important;

}



.contact-fixed-info {
    text-align: left;
    font-size: 18px;

}

@media (max-width: 768px) {
    .contact-fixed-info {
        margin-bottom: 150px;
    }
}



.footer-copyright {

    padding-top: 50px;

    padding-bottom: 50px;

    text-align: center;

    font-weight: bold;

}



.footer-copyright a:hover {

    text-decoration: none;

}



.contact-section {

    background-image: url(../images/f_img_l.png);

    background-repeat: no-repeat;

    background-position: bottom;

    margin-top: 60px;

    text-align: center;

}



.add-padding-l {

    padding-left: 100px;

    padding-right: 100px;

}



@media (max-width: 1200px) {

    .add-padding-l {

        padding-left: 15px;

        padding-right: 15px;

    }

}



@media (max-width: 756px) {

    .form-under-info {

        text-align: center;

    }



    .form-btn {

        text-align: center;

        padding-bottom: 20px;

    }



    .footer-copyright {

        padding-bottom: 150px;

    }





    .contact-section {

        background-image: url(../images/f_img_m.png);

        background-repeat: no-repeat;

        background-position: bottom;

    }

}



/*scrollbar*/

/* width */

::-webkit-scrollbar {

    width: 12px;

}

  

/* Track */

::-webkit-scrollbar-track {

    border-radius: 0;

}

   

/* Handle */

::-webkit-scrollbar-thumb {

    background: #0052F4; 

    border-radius: 0;

}

  

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: rgb(56, 110, 218); 

}



/* BUTTON */

.parallelogram {

    padding:20px 50px;

    font-size:20px;

    font-weight: 600;

    color: white;

    border:none;

    background:none;

    position:relative;

    z-index:0;

    margin:20px;

    filter:drop-shadow(0px 10px 25px #0052F4);

 }



.parallelogram:before,

.parallelogram:after {

    content:"";

    position:absolute;

    z-index:-1;

    top:0;

    left:0;

    right:0;

    bottom:0;

    clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);

    transition:1s all;

    background:#000;

}



.parallelogram:before {

    background:#0052F4;

    transform:scale(1.05,1.12);

}



.parallelogram:hover {

    color: rgb(183, 207, 255);

}



.parallelogram:hover:before,

.parallelogram:hover:after {

   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);

}

 

/* GAMES 3D */

.main-game-container {

    position: relative;

    -webkit-perspective: 600px;

    perspective: 600px;

    z-index: 2;

}



.g-one {

    background-image: url(../images/mg1.png);

    opacity:0.7;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    cursor: pointer;

}



.hg-coin-one:hover .g-one {

    opacity: 1;

}



.g-two {

    background-image: url(../images/mg2.png);

    opacity:0.7;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    cursor: pointer;

}



.g-two:hover {

    opacity: 1;

}



.hg-coin-two:hover .g-two {

    opacity: 1;

}



.g-three {

    background-image: url(../images/mg3.png);

    opacity:0.4;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    cursor: pointer;

}



.g-three:hover {

    opacity: 1;

}



.hg-coin-three:hover .g-three {

    opacity: 1;

}



.g-four {

    background-image: url(../images/mg4.png);

    opacity:0.4;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    cursor: pointer;

}



.g-four:hover {

    opacity: 1;

}



.hg-coin-four:hover .g-four {

    opacity: 1;

}



.hero-game {

    height: 65vh;

    overflow: hidden;

    /* opacity:0.7;

    transition: all 0.5s;

    -webkit-transition: all 0.5s;

    cursor: pointer; */

    position: relative;

    -webkit-animation: animOpp 0.4s 1;

    animation: animOpp 0.4s 1;

    z-index: 999;

}



.hero-game:hover {

   /* opacity: 1; 

   -webkit-animation: anim ease-out 0.5s 1;

   animation: anim 1s 1;

   transform: translateZ(45px);

   cursor: pointer;

   -webkit-transition: all 0.3s ease;                  

   -moz-transition: all 0.3s ease;                 

   -o-transition: all 0.3s ease;   

   -ms-transition: all 0.3s ease;          

   transition: all 0.3s ease;

   z-index: 10000;*/

}



.hero:active {

    /* -webkit-transform: translateZ(6px);

    transform: translateZ(6px);

    z-index: 10000; */

}



.hg-coin-one:hover {

    -webkit-animation: anim ease-out 0.5s 1;

    animation: anim 1s 1;

    transform: translateX(65px) translateY(5px) translateZ(55px);

    cursor: pointer;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    z-index: 10000;

}



.hg-coin-two:hover {

    -webkit-animation: anim ease-out 0.5s 1;

    animation: anim 1s 1;

    transform: translateX(5px) translateY(5px) translateZ(35px);

    cursor: pointer;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    z-index: 10000;

}



.hg-coin-three:hover {

    -webkit-animation: anim ease-out 0.5s 1;

    animation: anim 1s 1;

    transform: translateX(-35px) translateY(5px) translateZ(55px);

    cursor: pointer;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    z-index: 10000;

}



.hg-coin-four:hover {

    -webkit-animation: anim ease-out 0.5s 1;

    animation: anim 1s 1;

    transform: translateX(-65px) translateY(5px) translateZ(35px);

    cursor: pointer;

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

    z-index: 10000;

}



.inner {

    width: 500px;

    height: 450px;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    box-shadow: 0 0 20px 4px black;

    color: white;

    transform-style: preserve-3d;

    z-index: -5;

    

}



.inner-game-info h2 {

    font-weight: bold;

    font-size: 30px;

    opacity: 1;

    color: white;

    text-decoration: none;

}



.inner-details {

    font-size: 20px;

    text-transform: uppercase;

    font-weight: 600;

    opacity: 1;

    color: white;

    text-decoration: none;

}



.inner-game-info {

    width: 100%;

    top: 20%;

    text-align: center;

    position: absolute;

    text-shadow: 0px 2px 6px black;

    transform: translateX(-50%) translateY(-50%) translateZ(50%);

    opacity: 1;

    z-index: 100;



}



.inner-game-info:hover {

    text-shadow: 0px 4px 8px rgb(8, 34, 78);

}



@media (max-width: 1200px) { 

    .inner-game-info {

        top: 25%;

        /* right: 10%; */

    }



    .inner-game-info h2 {

        font-size: 30px;

    }



    .inner-details {

        font-size: 14px;

    }



    .img-eclipse {

        padding-left: 0;

    }



    .hero-game {

        height: 80vh;

    }

}



/* SINGLE PAGE */

.single-page-body {

    /* background-image: url("../images/HeroArt.png");

    background-repeat: no-repeat;

    background-size: contain; */

}



.header{

    width: 100%;

    height: 50vh;

    background-position: center;

    background-size: cover;



    text-align: right;

}



.main-single-game {

    color: white;

    padding-left: 100px;

    padding-right: 100px;

    padding-top: 100px;

    padding-bottom: 100px;

}



.single-video {

    padding-left: 100px;

    padding-right: 100px;

    padding-top: 500px;

    padding-bottom: 100px;

}



.single-video-container {

    padding-left: 100px;

    padding-right: 100px;

    margin-bottom: 50px;

}



.img-single-char {

    /* position: absolute;

    bottom: 100px;

    right: 10px; */



    position: relative;

    top: 306px;

}



.game-title {

    padding-bottom: 40px;

}





@media (max-width: 1888px) { 

    .img-single-char {

        /* margin-top: -250px;

        margin-left: 900px; */

        top: 485px;

    }

}



@media (max-width: 1600px) { 

    .img-single-char {

        top: 185px;

    }

}



@media (max-width: 1416px) { 

    .img-single-char {

        /* margin-top: -316px;

        margin-left: 200px;

        height: 400px; 

        top: 190px;*/

    }

}



@media (max-width: 1025px) { 

    .img-single-char {

        top: 480px;

    }

}







@media (max-width: 992px) { 

    .img-single-char {

        /* margin-top: -295px;

        margin-left: 200px;

        height: 350px; */

        bottom: 230px;

        top: 300px;

    }



    .main-single-game {

        padding-left: 20px;

        padding-right: 20px;

    }

    

    .game-title {

        text-align: center;

        margin-top: 50px;

    }



    .single-video-container {

        padding-left: 0;

        padding-right: 0;

    }

}



@media (max-width: 768px) {

    .header {

        text-align: center;

    }

}



@media (max-width: 767px) { 

    .img-single-char {

        /* bottom: 150px; */

        margin-left: 0;

        margin-top: -123px;

    }



    .contact-section {

        background-image: url(../images/f_img_m.png);

        background-repeat: no-repeat;

        background-position: bottom;

    }

    /* .single-page-body {

        background-image: url("../images/singleback_m.png");

        background-repeat: no-repeat;

    } */

 }





@media (max-width: 368px) { 

    .img-single-char {

        margin-top: -116px;

        height: 300px;



    }

}



.navbar-gamepage {

    position: fixed;

    top: 0;

    z-index: 1030;

    left: 0;

    width: 100%;

}



#aboutus {

    padding-top: 60px;

}



.form-above-title {

    color: white;

    font-size: 1.6rem;

    padding-bottom: 60px;

}



/*Youtube play button on video*/

.video-style-frame {

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: transparent;

}



.video-poster {

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    /* background-image:url(http://c.fastcompany.net/multisite_files/cocreate/imagecache/inline-large/inline/2013/01/1682283-inline-inline-2-music-veteran-amani-duncan-on-marketing-cf-martin-the-worlds-oldest-guitar-maker.jpg); */

    background-size: 100%;

    background-color: transparent;

    border: none;

    text-indent: -999em;

    overflow: hidden;

    opacity: 1;

    -webkit-transition: opacity 800ms, height 0s;

    -moz-transition: opacity 800ms, height 0s;

    transition: opacity 800ms, height 0s;

    -webkit-transition-delay: 0s, 0s;

    -moz-transition-delay: 0s, 0s;

    transition-delay: 0s, 0s;

}



.video-poster:hover {

    cursor: pointer;

  }



.video-poster:before {

    content: '';

    position: absolute;

    top: 50.5%;

    left: 50.2%;

    width: 80px;

    height: 80px;

    margin: -40px 0 0 -40px;

    border: 5px solid #fff;

    background-color: black;

    border-radius: 0;

    -webkit-transition: border-color 300ms;

    -moz-transition: border-color 300ms;

    transition: border-color 300ms;

}



.video-poster:after {

      content: '';

      position: absolute;

      top: 50%;

      left: 50%;

      width: 0;

      height: 0;

      margin: -20px 0 0 -10px;

      border-left: 40px solid #fff;

      border-top: 25px solid transparent;

      border-bottom: 25px solid transparent;

      -webkit-transition: border-color 300ms;

      -moz-transition: border-color 300ms;

      transition: border-color 300ms;

}



.video-poster:hover:before,  .video-poster:focus:before {

      border-color: #1468F4;

}



.video-poster:hover:after, .video-poster:focus:after {

    border-left-color: #1468F4;

}



.videoWrapperActive .video-poster {

    opacity: 0;

    height: 0;

    -webkit-transition-delay: 0s, 800ms;

    -moz-transition-delay: 0s, 800ms;

    transition-delay: 0s, 800ms;

  }



.stores {

    display: inline;

}



.stores a {

    text-decoration: none;

    color: white;

}



.stores a:hover {

    color: #1468F4;        

    -webkit-transition: all 0.3s ease;                  

    -moz-transition: all 0.3s ease;                 

    -o-transition: all 0.3s ease;   

    -ms-transition: all 0.3s ease;          

    transition: all 0.3s ease;

}



.oculus-store-style {

    margin-top: -5px;

}



.store-oculus {

    margin-top: 20px;

}