/**************custom css****************/


html {scroll-behavior: smooth; box-sizing: border-box;}

a{text-decoration: none;}
body{width: 100%; font-size:12pt; color: #fff; position: relative; width: 100%; overflow-x: hidden;  font-family: "Montserrat", sans-serif;}

@font-face {
    font-family: 'japanese_3017regular';
    src: url('../fonts/japanese_3017-webfont.woff2') format('woff2'),
         url('../fonts/japanese_3017-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.font-jp{ font-family: 'japanese_3017regular' !important;}
.gameplay  .main-heading2{ font-family: 'japanese_3017regular' !important;}
.fs-20{font-size: 20px !important;}
p{font-family: "Montserrat", sans-serif;}
.open-sans{font-family: "Montserrat", sans-serif;}
.bold{font-weight: 700;}

img{max-width:100%;}

*{margin:0px; padding:0px;}

.text-right{text-align: right;}
.text-left{text-align: left;}
.text-center{text-align: center;}
.uppercase{text-transform: uppercase;}
.black{color: #000;}
.white{color: #fff;}
.pt-150{padding-top: 150px;}
.relative{position: relative;}
.pl-100{padding-left: 100px;}
.pr-100{padding-right: 100px;}

/******** home page start here ***********/

.home-body {
    overflow: hidden;
}
.home-page{background: url(../images/new-images/home-bg.jpg) no-repeat; background-size: cover; background-position: center bottom; width: 100%; height: 100vh; position: relative; z-index: 9;}
img.home-red-shape {position: absolute; top: 0; left: 0; width: 100%;}
img.home-japanese {position: absolute; left: 200px; top: 100px;}
img.home-character {position: absolute; max-width: 1290px; bottom: -190px; left: -80px;}

.home-banner-text {position: relative;}


.banner-images {width: 100%; position: relative; height: 100vh;}
img.banner-center-img {position: absolute; bottom: -150px; left: 0; right: 0; margin: 0 auto; z-index: 1; animation: /**float1 10s ease-in-out infinite;**/}

@keyframes float {
    0% {
       
        transform: translatey(0px);
    }
    50% {
     
        transform: translatey(-20px);
    }
    100% {
       
        transform: translatey(0px);
    }
}

.banner-images img.banner-left-img {position: absolute; left: 0; bottom: 50px; z-index: 0; animation: float 7s ease-in-out infinite;}

@keyframes float1 {
    0% {
       
        transform: translatey(-20px);
    }
    50% {
       
        transform: translatey(-0px);
    }
    100% {
       
        transform: translatey(-20px);
    }
}

.banner-images img.banner-right-img {position: absolute; right:-70px; bottom:50px; z-index: 0; animation: float2 6s ease-in-out infinite;}

@keyframes float2 {
    0% {
       
        transform: translatey(0px);
    }
    50% {
       
        transform: translatey(-20px);
    }
     100% {
       
        transform: translatey(0px);
    }
}

.hero-video {
    position: absolute;
    left: 0;
    top: auto;
    right: 0;
    bottom: 0;
    z-index: 4;
    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: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    mix-blend-mode: screen;
    z-index: 0;
    opacity: .8;
}

.html-embed-3 {
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

section.home-page .container {
    position: relative;
    z-index: 1;
}

.fs-22{font-size: 22px;}
.section-1{background: url(../images/section1-bg.jpg) !important; background-size: cover !important; min-height: 100vh;}
.section-1 img{height: 100vh;}
.banner-text{max-width:660px; text-align: left;}
.banner-text h4{font-size: 40px; font-family: 'japanese_3017regular' !important;}
.banner-text h2{font-size: 60px; font-family: 'japanese_3017regular' !important;}
.red{color:#f20810;}
.register-btn{width: 301px; height:68px; background: url(../images/btn-red.png) no-repeat; background-size: 100% 100%; font-size: 16px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.5s ease;}
.register-btn:hover{transform: scale(1.02); color: #fff}
.section-2{background: url(../images/section2-bg.jpg) !important; background-size:cover; min-height: 100vh;}
.gold-btn{background: url(../images/btn-brown.png) no-repeat;}
.golden{color: #e1ab3e;}


footer{background: url(../images/footer-bg.jpg) no-repeat; background-size: cover; padding-top: 100px !important;}
.join-us{font-size: 46px; color: #fff; font-family: 'japanese_3017regular' !important; line-height:46px; margin-top: 15px;}

.gradient-line.green {
    background-image: linear-gradient(80deg, #1f2410, rgba(31, 36, 16, 0) 73%);
}
.green {
    color: #a2de14;
}

.gradient-line {
    height: 20px;
    margin-left: 20px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-image: linear-gradient(80deg, rgba(53, 11, 29, .9), rgba(53, 11, 29, 0));
}

.gradient-line-2.green {
    background-image: -webkit-gradient(linear, right top, left top, from(#1f2410), color-stop(82%, rgba(31, 36, 16, 0)));
    background-image: linear-gradient(270deg, #1f2410, rgba(31, 36, 16, 0) 82%);
}

.gradient-line-2 {
    height: 20px;
    margin-right: 20px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(53, 11, 29, .9)), to(rgba(53, 11, 29, 0)));
    background-image: linear-gradient(270deg, rgba(53, 11, 29, .9), rgba(53, 11, 29, 0));
}


.button-primary {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
;
    margin: 5px;
    padding: 14px 20px;
    -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;
    border: 1px solid #ff1848;
    border-radius: 4px;
    background-color: rgba(55, 14, 24, .3);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
}

.green {
    color: #a2de14;
}

.button-primary.green {
    border-color: #4b883e;
    background-color: rgba(34, 77, 25, .3);
}

.buttons-holder  a:hover{color: #fff;}
.green-btn{background: url(../images/btn-green.png) no-repeat;}
img.footer-left {
    position: absolute;
    left: 0;
    bottom: 0px;
        height: 85%;
}
img.footer-right {
    position: absolute;
    right: 0;
    bottom: 0px;
    height: 85%;
}

/*********************************/
.fog {
    width: 100%;
    position: absolute;
    left: 0;
    height: 100%;
    overflow: hidden;
}
.foggy {
  -webkit-filter: blur(2px);filter: blur(2px);
}
.foggy::before {
  content: "";
 background-image:  linear-gradient(to top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.7) 100%);
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  height: 100%;
  display: block;
  left: 0;
  top: 0;
  bottom:0;
  z-index: 9999;
  opacity: 0.9;
}

/* ---------- Fog ---------- */
.fogwrapper {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;

  filter: blur(3px) grayscale(0.2) saturate(1.2) sepia(0.2);
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  filter: brightness(1.7) contrast(1.2);
  height: 100%;
  position: absolute;
  width: 200%;
  filter: blur(4px);
  margin-top: -85px;

}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 20s linear infinite, foglayer_moveme 30s linear infinite;
  -moz-animation: foglayer_01_opacity 20s linear infinite, foglayer_moveme 30s linear infinite;
  animation: foglayer_01_opacity 20s linear infinite, foglayer_moveme 30s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 42s linear infinite, foglayer_moveme 26s linear infinite;
  -moz-animation: foglayer_02_opacity 42s linear infinite, foglayer_moveme 26s linear infinite;
  animation: foglayer_02_opacity 42s linear infinite, foglayer_moveme 26s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("../images/fog1.png"), url("../images/fog1.png") center center/cover no-repeat transparent; opacity: 1;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("../images/fog2.png"), url("../images/fog2.png") center center/cover no-repeat transparent;
  opacity: 1;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }





.login-sec{background: url(../images/home-background.png) no-repeat right center; background-size: cover; height: 100vh;}

.home-banner-text {margin: 0px 5rem; width: 100%;}
.register-a {
  background: url(../images/text-bg.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  padding: 15px 15px;
  display: block;
  border-radius: .25rem;
  border: 1px solid #f20810;
  margin-top: 10px;
}

.register-a h5{font-size: 1.25rem; color: #f20810; margin-bottom: 0px; }
.register-a p{font-size:.8rem; color: #fff; margin-bottom: 0px; margin-top: 0px !important;}
button.btn-connect, .btn-white:hover {border: 1px solid #7b0105; background: #7b0105; color: #fff; transition: all 0.5s ease; font-size: 1rem;}
button.btn-connect:hover, .btn-white {border: 1px solid #fff; background: #fff; color: #000; transition: all 0.5s ease;  font-size: 1rem;}
.referal-code h5 {font-size: 1rem; text-transform: uppercase;}
.referal-code input {
  width: 100%;
  padding: 15px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 5px;
}

/***********************************/




.pre-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
/**  background: url(../images/new-images/main-bg-img.png) no-repeat !important;**/
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  z-index: 1000;
}

.pre-loader .holder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pre-loader .logo {
  position: relative;
  height: 65px;
}

@media screen and (max-width: 1399px) {
  .pre-loader .logo {
    height: 48px;
  }
}

@media screen and (max-width: 991px) {
  .pre-loader .logo {
    height: 40px;
  }
}

.pre-loader .logo img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  -webkit-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}





.pre-loader .progress-holder {
  width: 540px;
  height: 5px;
  margin-top: 115px;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

@media screen and (max-width: 767px) {
  .pre-loader .progress-holder {
    width: 195px;
    margin-top: 45px;
  }
}

.pre-loader .progress-holder .progress-line {
  display: block;
  width: 0;
  height: 5px;
  background: #302d2d;
  background: linear-gradient(47deg, #f20810 0%, #980308 100%);
}

body.show-page .pre-loader {
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
    opacity: 0;
    visibility: hidden;
    display: none !important;
}


.banner-images-mob{display: none;}
div#events {z-index: 9;}

.mob{display: none !important;}
.lines-right{position: absolute; right: 0; top: 0; z-index: 99;}

.banner-images{
  max-width: 900px;
  margin: 0 auto;
}

.home-container{position: relative; z-index: 999;}
.right-images{width: 100%;}
.home-text-left {
  background: rgb(0, 0, 0, 0.65);
  height: 100vh;
  width: 100%;
  max-width: 550px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(4px);
}

/******** media query start here ***********/
@media screen and (min-width: 1220px) {

 
}


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


}

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


       .banner-images {max-width: 700px; margin: 0 auto;}
  .banner-images img.banner-left-img{bottom: 60px;}
  img.banner-center-img {bottom: -50px;}
        .main-heading{background-size: 100%;}
       
        .main-heading, .main-heading2 {color: #fff; font-size: 54pt;}
       
    
         .banner-images img.banner-left-img, .banner-images img.banner-right-img{max-height: 600px;}
         img.banner-center-img{max-width: 540px;}

}

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

}

@media screen and (max-width: 1400px) {
 .banner-images img.banner-left-img, .banner-images img.banner-right-img{max-height: 430px;}
img.banner-center-img{max-height:640px;}
.banner-images {max-width: 600px; margin: 0 auto;}
.home-text-left {max-width: 450px;}
.home-banner-text {margin: 0px 1.5rem;}

.section-1 img {
    height: auto;
    max-width: 720px;

}
.section-1{min-height: inherit;}

}

@media screen and (max-width: 1260px) {
.section-1 img {
    height: auto;
    max-width: 500px;

}
}


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

img.home-character{max-width: 100%;}
.section-1 .row .col-12 {flex-wrap: wrap !important;}
.banner-text{max-width: 100%;}

    .section-1 .row .col-12 {
        flex-wrap: wrap !important;
        flex-direction: column-reverse;
    }
    .section-2 .row .col-12 {
        flex-wrap: wrap !important;
        flex-direction: inherit !important;
    }

    .section-1{background-size: cover !important; padding-top: 60px !important;}
.banner-text{text-align: center !important;}
    .section-1 img { height: auto;  max-width: 760px; margin:0 auto;}
    .section-1 .register-btn{margin: 0 auto; margin-bottom: 30px;}
        .banner-images {max-width: 540px;}

}


@media screen and (max-width: 1024px) {
 
.banner-images-mob {display: block; padding-top: 80px;}
.home-banner-text {text-align: center;}
.right-images{display: none;}
.home-text-left{max-width: 100%; justify-content: center;}
.home-banner-text {max-width: 520px; margin: 0 auto; margin-left: 1.5rem; margin-right: 1.5rem;}
    .section-1 {padding-right: 0px !important;padding-left: 0px !important;}


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

      .section-1 img{height:auto; max-width: 100% !important; margin: 0 auto}
      img.footer-left{display: none;}
      img.footer-right{display: none;}
      .banner-text h2 {font-size: 40px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
      .banner-text {  margin: 0px !important; padding: 0px 15px;}
      .row .col-12{padding: 0px !important;}
      .row{margin: 0px !important;}
          .banner-text h4 {font-size: 30px; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
}



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


}