@font-face {
  font-family: kan415typos-std;
  src: url("./r.ttf");
}
* {
  font-family: kan415typos-std, sans-serif;
}
body {
  width: 100%;
  /* overflow-x: hidden; */
  background-image: url(d-bg.jpg);
  background-repeat: no-repeat;
  background-size: auto 920px;
  background-position: 50% 0%;
}
html {
  width: 100%;
  overflow-x: hidden;
}
body, html {
  scroll-behavior: smooth;
}
nav {
  border-bottom: 5px solid rgb(45, 164, 221);
  top:0;
  z-index: 999;
}
nav img {
    width: 250px;
    margin: 10px;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
}
.anchor {
  width: 6vw;
  display: flex;
  position: fixed;
  bottom: 2%;
  right: 2%;
  z-index: 100;
  opacity: 0;
  transition: 0.5s opacity;
}
.show {
  opacity: 1;
  transition: 0.5s opacity;
}
.anchor img {
  display: flex;
  width: 100%;
  height: 100%;
}
/* First LP */
.bluebg {
  background-image: url(d-bg.jpg);
  background-repeat: no-repeat;
  background-size: auto 90%;
  background-position: 50% 0%;
  background-color: #00398d;
}
#Section-1 {
  background-image: url(d-bg2.png);
  background-repeat: no-repeat;
  background-size: 2000px;
  background-position: 50% 0%;
  margin-top: 64px;
  padding-bottom: 40px;
  padding-bottom: 140px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#Section-1 > * {
  position: relative;
  z-index: 2;
}
#Section-1 h1 {
  color: #fff;
  font-size: 2.3rem;
  padding: 15px 0px;
  position: relative;
  z-index: 100;
  text-shadow: 2px 2px 3px #000000 , 0px 0px 13px #000000; 
}
.flueGlare {
  background-image: url("flueGlare.png");
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: 50% 0%;
  width: 100%;
  height: 842px;
  padding-bottom: 0;
  z-index: 0;
  position: absolute;
  animation-name: flueGlare;
  animation-duration: 30s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.4;
}

@keyframes flueGlare {
  from {
    background-position: 50% 310%;
}
  to {
    background-position: 50% 0%;
}
}

.cta {
  width: auto;
  color: #C733EF;
  background-color: #FFFD00;
  font-size: 2rem;
  padding: 2px 40px 14px;
  margin-bottom: 20px;
  border-radius: 5rem;
  font-weight: 900;
  position: relative;
  z-index: 100;
  box-shadow: 0px 5px 0px #2a3e50;
  border: none;
}
.first-cta{
        transform: scale(1.5);
    margin-top: 0.5rem;
}

.cta:hover {
  color: #C733EF;
  background-color: #fffd00;
  box-shadow: 0px 6px 0px #2a3e5000;
  text-decoration: none;
}

.manuTop{
  background-repeat: no-repeat;
  background-size: 482px;
  background-position: 58.5% 59px;
  background-image: url(d-manuTop2.png);
  height: 450px;
  position: relative;
  z-index: 90;
  animation-name: manuTop;
  animation-duration: 10s;
  margin-top: -27px;
}

@keyframes manuTop {
0% , 45% {
  background-size: 482px;
  background-position: 58.5% 59px;
  background-image: url(d-manuTop1.png);
}
 45.1% , 100%{
  background-size: 482px;
  background-position: 58.5% 59px;
  background-image: url(d-manuTop2.png);
}
}

.rotete{
  height: 30px;
  animation-name: rotete;
  animation-duration: 20s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotete {
0% {
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
}
100% {
  transform: rotate(3600deg);
  -webkit-transform: rotate(3600deg);
  -moz-transform: rotate(3600deg);
  -ms-transform: rotate(3600deg);
  -o-transform: rotate(3600deg);
}
}

.small{
  animation-name: small;
  animation-duration: 5s;
  transform-origin: 50% 50%;
}

@keyframes small {
0% , 50% {
 transform: scale(0);
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
}
60%,100% {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}
}

.blueTop {
  position: absolute;
  width: 100%;
margin-top: -342px;
z-index: 2;
}
.blueTop .row {
  margin-top: -11%;
}
.blueTop .row .col-6 img {
  height: 250px;
  margin-bottom: 20px;
}
.award{
  height: 290px !important;
}
.icon{
    height: 250px !important;
}
.comments {
  margin-top: 248px;
}

.purpleCard {
  background-color: #942D98;
  min-height: 80px;
  max-height: 80px;
  box-shadow: inset 0px 0px 20px #00000073,
            inset -0px -0px 20px #00000073;
}

.purpleCard img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.commentCard {
  border:none;
  box-shadow: 0 0 7px #00000078;
  margin: 15px;
}

.commentCard .card-header {
  background-color: #D7BA6B;
}

.commentCard .card-body {
  background-color: #CDECFB;
}

.card-body p {
  font-size: 1rem;
  min-height: 100px;
  color: #4b4b4b;
}

.blockquote-footer {
  font-size: 1rem;
  color: #000;
  font-weight: 900;
}

.starIcon {
  background-image: url("staricons.png");
  background-repeat: space;
  background-size: auto 25px;
  height: 26px;
  background-repeat: no-repeat;
}

.pulsate-fwd {
  color: #fffd00 !important;   
  background-color: #C733EF !important;
	-webkit-animation: pulsate-fwd 1s ease-out infinite both;
	        animation: pulsate-fwd 1s ease-out infinite both;
}

 @-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.c {
  width: 100%;
  max-width: 2000px;
  height: 875px;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0px;
  animation-name: canvas;
  animation-duration: 10s;
}

@keyframes canvas {
  0% , 45%{
    opacity: 0;
}
 55% , 100%{
  opacity: 1;
}
}

.left {
  animation-name: left;
  animation-duration: 2.5s;
}

@keyframes left {
  0%, 66%{
    transform: translatex(100vw);
    -webkit-transform: translatex(100vw);
    -moz-transform: translatex(100vw);
    -ms-transform: translatex(100vw);
    -o-transform: translatex(100vw);
}
 100%{
  transform: translatex(0vw);
  -webkit-transform: translatex(0vw);
  -moz-transform: translatex(0vw);
  -ms-transform: translatex(0vw);
  -o-transform: translatex(0vw);
}
}

.right {
  animation-name: right;
  animation-duration: 2.5s;
}

@keyframes right {
  0%, 66%{
    transform: translatex(-100vw);
    -webkit-transform: translatex(-100vw);
    -moz-transform: translatex(-100vw);
    -ms-transform: translatex(-100vw);
    -o-transform: translatex(-100vw);
}
 100%{
  transform: translatex(0vw);
  -webkit-transform: translatex(0vw);
  -moz-transform: translatex(0vw);
  -ms-transform: translatex(0vw);
  -o-transform: translatex(0vw);
}
}

.blueTop img {
  animation-duration: 3s;
}

.slick-next {
  right: 5px;
  height: 30px;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.slick-prev {
  left: 5px;
  height: 30px;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(    178deg    );
  -webkit-transform: translateY(-50%) rotate(    178deg    );
  -moz-transform: translateY(-50%) rotate(    178deg    );
  -ms-transform: translateY(-50%) rotate(    178deg    );
  -o-transform: translateY(-50%) rotate(    178deg    );
}
 
.yellowArea {
  background-image: url("yellowBG.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0% 27%;
}

.yellowArea h5 {
color: #FFFF00;
text-shadow: 0 0 5px #000;
font-size: 1.6rem;
}

.yellowRight.col-6 {
  padding: 0 !important;
}

.yellowRight .col-6:last-child img{
 width: 120%;
 margin-left: -10%;
}

.yellowArea ul {
  list-style-image: url("circleYellow.png");
  background-size: 5px;
  text-shadow: 0 0 5px #000;
font-size: 1.4rem;
color: #fff;
}

.yellowArea ul li:first-child {
  list-style: none;
}

.comments h3 {
      color: #98208B;
      text-shadow: 0 0 5px #FEFD0B;
      font-weight: 900;
      border: 1px double #d7ba6b;
      border-style:double;
      border-width:5px;
      border-radius:0.3rem ;
      -webkit-border-radius:0.3rem ;
      -moz-border-radius:0.3rem ;
      -ms-border-radius:0.3rem ;
      -o-border-radius:0.3rem ;
      padding: 0.3rem 0 1rem 0;
}

.yellowP {
  color: #fff;
font-size: 1.2rem;
font-weight: 900;
text-shadow: 0 0 5px #000;
}

.cta {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}

.phoneToWallet {
  width: 120% !important;
  margin: -10% 0 -20% -15%;
}

.paymentTop {
width: 100%;
    text-align: center;
}

.paymentTop img:first-child {
width: 75%;
margin: 36px 0 10px 12.5%;
}

.alignCenter {
  align-items: center;
}

.w_100 {
  width: 100%;
   margin: 0 !important; 
   display: inline-table; 
}

.mobileText {
display: none;
}
/* Second LP */
.secondPart p {
  text-shadow: 0px 5px 6px #00000029;
  padding: 0;
  font-weight: 700;
  color: white;
  font-size: 1.3em;
  font-family: 'Noto Sans JP', sans-serif;
}
/* Section 3 */
.section3 {
  width: 100%;
  height: auto;
  padding-bottom: 50px;
  background-color: #5033C8;
  -webkit-box-shadow: inset 0px -10px 14px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0px -10px 14px 0px rgba(0,0,0,0.3);
  box-shadow: inset 0px -10px 14px 0px rgba(0,0,0,0.3);
  overflow: hidden;
}
.section3 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section3 .container .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50px;
}
.section3 .container .row .text {
  width: 55%;
}
.section3 .container .row .text p {
  text-align: left;
}
.section3 .container .row .image {
  width: 41.5%;
}
.section3 .container .row .image img {
  width: 100%;
}
.section3 .container .row .text p {
  width: 100%;
}
.section3 .container .cta {
  margin-top: 30px;
}
/* Section 4 */
.section4 {
  width: 100%;
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  background-image: url("./desktop-bg.png");
  background-size: 100% 107%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.section4 .container .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.image1,
.image2 {
  width: 48.5%;
  position: relative;
}
.baccarat-mobile,
.sancho-mobile {
  display: none;
}
.baccarat-desktop,
.sancho-desktop {
  width: 100%;
}
.manu-baccarat,
.manu-sancho {
  position: absolute;
  z-index: 2;
}
.manu-baccarat {
  width: 33.8%;
  bottom: -5.8%;
  left: 3.7%;
  /* transform: translate(-200%, 0%); */
}
.manu-sancho {
  width: 47.3%;
  bottom: -7%;
  right: 3%;
  /* transform: translate(200%, 0%); */
}
@keyframes manu {
  to {
      transform: translate(0%, 0%);
  }
}
.manu-image {
  width: 50%; 
}
.section4 .container .row:nth-of-type(2) {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 100px;
}
.section4 .container .row:nth-of-type(2) p {
  margin-top: 50px;
}
.section4 .container:nth-of-type(1) .row:nth-of-type(1) {
  width: 100%;
  height: auto;
  padding-top: 4vw;
  padding-bottom: 4vw;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  animation: jump 1.5s infinite;
}
@keyframes jump {
  0% { transform: translate(0%, 0%)}
  50% { transform: translate(0%, 1%)}
  100% { transform: translate(0%, 0%)}
}
.moon-princess {
  width: 23.6vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-210%, -50%);
}
.hawaiian-dream {
  width: 15.7vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-195%, -47%);
}
.sweet-bonanza {
  width: 16.05vw;
  transform: translate(-48%, 9%);
}
.sweet-bonanza_mobile {
  display: none;
}
.tome-of-madness {
  width: 15.8vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-2%, -44%);
}
.gates-of-olympus {
  width: 15.06vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(101%, -46%);
}
.starlight-princess {
  width: 19vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(155%, -49%);
}
.monaco-mobile-bg,
.monaco-mobile {
  display: none;
}
.section4 .container:nth-of-type(2) .row {
  position: relative;
  margin-top: 100px;
}
.monaco-desktop {
  transform: scale(1.05);
}
.manu-monaco {
  width: 13.78%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-325%, -30%);
  z-index: 3;
}
.manu-arm {
  width: 11.6%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-315%, 182%) rotate(0deg);
  z-index: 2;
  animation: manu-arm 2s infinite;
}
.dice-1 {
  width: 7.4%;
  position: absolute;
  bottom: 36%;
  left: 21%;
  z-index: 3;
  transform: translate(0%, 0%) rotate(0deg);
  animation: dice-1 2s infinite linear;
}
@keyframes manu-arm {
  0%, 40%, 100% {
      transform: translate(-315%, 182%) rotate(0deg);
  }

  20% {
      transform: translate(-312%, 130%) rotate(-20deg);
  }
}
@keyframes dice-1 {
  0%,40.01%, 100% {
      transform: translate(0%, 0%) rotate(0deg);
  }
  20% {
      transform: translate(0%, -150%) rotate(-120deg);
  }
  40% {
      transform: translate(0%, 0%) rotate(-360deg);
  }
}
@keyframes dice-left-right {
  0%, 100% {
      transform: translateX(0%);
  }
  50% {
      transform: translateX(5%);
  }
}
@keyframes dice-right-left {
  0%, 100% {
      transform: translateX(0%);
  }
  50% {
      transform: translateX(-5%);
  }
}
.dice-2 {
  width: 7.03%;
  position: absolute;
  bottom: 22%;
  left: 16.5%;
}
.dice-3 {
  width: 8.8%;
  position: absolute;
  bottom: 83%;
  left: 20.5%;
  animation: dice-left-right 1s infinite;
}
.dice-4 {
  width: 9.9%;
  position: absolute;
  bottom: 58%;
  left: 26%;
  animation: dice-right-left 1s infinite;
}
.section4 .container:nth-of-type(3) p {
  margin: 0;
  margin-top: 100px;
}
/* Section 5 */
.section5 {
  width: 100%;
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: #5033C8;
  -webkit-box-shadow: inset 0px 10px 14px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0px 10px 14px 0px rgba(0,0,0,0.3);
  box-shadow: inset 0px 10px 14px 0px rgba(0,0,0,0.3);
}
.section5 .container .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.section5 .container .row p:nth-of-type(1) {
  margin-bottom: 50px;
}
.section5 .container .row .cta {
  margin-bottom: 50px;
}
.section5 .container .row .cta:nth-of-type(2) {
  margin-top: 20px;
  margin-bottom: 0px;
}
/* SECOND LP RESPONSIVE */
@media only screen and (max-width: 1024px) {
  .section2 {
      padding: 0;
  }
  .manu-arm {
      transform: translate(-316%, 182%) rotate(0deg);
  }
  @keyframes manu-arm {
      0%, 40%, 100% {
          transform: translate(-316%, 182%) rotate(0deg);
      }
      20% {
          transform: translate(-316%, 134%) rotate(-20deg);
      }
  }
}
@media only screen and (max-width: 992px) {
  nav {
      height: 60px;
  }
  .anchor {
      width: 11vw;
      right: 4%;
  }
  /* Section 2 */
  .section2 {
      height: 15vh;
  }
  .manu-monaco {
      transform: translate(-316%, -30%);
  }
  .dice-2 {
      bottom: 24%;
      left: 15.5%;
  }
  /* Section 3 */
  .section3 {
      padding-bottom: 50px;
  }
  .section3 .container .row {
      margin-top: 50px;
  }
}
@media only screen and (max-width: 576px) {
  .secondPart .row {
    margin-left: 0px;
    margin-right: 0px;
  }
  .secondPart p {
    font-size: 18px;
  }
  .anchor {
      width: 16vw;
      right: 5%;
  }
  .container {
      --bs-gutter-x: 6rem;
  }
  p,
  .section2 p {
      font-size: 4.5vw;
  }
  .cta {
      font-size: 3.8vw;
      padding: 1.5vw 2.2vw;
      border-radius: 10.5vw;
  }
  /* Section 3 */
  .section3 {
      padding-bottom: 25px;
  }
  .section3 .container .row {
      flex-direction: column;
      margin-top: 25px;
  }
  .section3 .container .row .image {
      width: 76.6%;
      padding: 0;
  }
  .section3 .container .row .text {
      margin-top: 20px;
      width: 100%;
  }
  .section3 .container .row .text p {
      text-align: center;
  }
  .section3 .container .cta {
      margin-top: 15px;
  }
  /* Section 4 */
  .section4 {
      height: auto;
      padding-bottom: 50px;
      background-image: url("./mobile-bg.png");
      background-size: 100% 107%;
      overflow: hidden;
  }
  .image1,
  .image2 {
      width: 50%;
      padding: 0;
  }
  .baccarat-desktop,
  .sancho-desktop {
      display: none;
  }
  .baccarat-mobile,
  .sancho-mobile {
      width: 110%;
      display: flex;
      transform: translateX(-7%);
  }
  .manu-baccarat {
      width: 55.8%;
      bottom: -30.8%;
      left: 3%;
      transition: 0.7s ease-out;
  }
  .manu-sancho {
      width: 76.66%;
      bottom: -33%;
      right: -14%;
      transition: 0.7s ease-out;
  }
  .manu-image {
      width: 84%;
      padding: 0;
  }
  .section4 .container .row:nth-of-type(2) {
    margin-bottom: 75px;
  }
  .section4 .container .row:nth-of-type(2) p {
      text-align: center;
      margin-top: 50px;
  }
  .section4 .container:nth-of-type(1) .row:nth-of-type(1) {
      height: 250vw;
      margin: 0;
      align-items: center;
  }
  .section4 .container:nth-of-type(1) .row:nth-of-type(1) img {
      padding: 0;
  }
  .moon-princess {
    width: 64.6vw;
    transform: translate(-84%, -137%);
  }
  .hawaiian-dream {
    width: 49vw;
    transform: translate(-8%, -140%);
  }
  .sweet-bonanza {
      /* width: 49vw; */
      display: none;
  }
  .sweet-bonanza_mobile {
    width: 54vw;
    display: block;
    margin-bottom: -25%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-93%, -38%);
  }
  .tome-of-madness {
    width: 49vw;
    transform: translate(0%, -37%);
  }
  .gates-of-olympus {
    width: 48.2vw;
    transform: translate(-100%, 70%);
  }
  .starlight-princess {
    width: 53vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-2%, 72%);
  }
  .secondPart .section4 .container:nth-of-type(2) {
      width: 100vw;
      height: auto;
      --bs-gutter-x: unset;
      padding: 0px;
      margin-top: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .section4 .container:nth-of-type(2) .row {
      width: 100%;
      --bs-gutter-x: unset;
      position: relative;
  }
  .monaco-desktop {
      display: none;
  }
  .monaco-mobile-bg {
      width: 100%;
      display: flex;
      position: relative;
      z-index: 1;
  }
  .monaco-mobile {
      width: 100%;
      display: flex;
      position: absolute;
      bottom: 8.9%;
      left: 0%;
      z-index: 3;
  }
  .manu-monaco {
      width: 30.7%;
      top: 50%;
      left: 50%;
      transform: translate(-80%, -44%);
      z-index: 2;
  }
  .manu-arm {
      width: 24.6%;
      top: 50%;
      left: 50%;
      transform: translate(-11%,0%) rotate(0deg);
      z-index: 1;
  }
  .dice-1 {
      width: 14.3%;
      bottom: 43%;
      left: 63%;
      z-index: 2;
  }
  .dice-2 {
      width: 13.6%;
      bottom: 34%;
      left: 50%;
      z-index: 1;
  }
  .dice-3 {
      width: 15.7%;
      bottom: 93%;
      left: 44%;
      z-index: 1;
  }
  .dice-4 {
      width: 18.2%;
      bottom: 63%;
      left: 61%;
      z-index: 1;
  }
  .section4 .container:nth-of-type(3) p {
      margin: 0;
      margin-top: 0px;
  }
  @keyframes manu-arm {
      0%, 40%, 100% {
          transform: translate(-11%,0%) rotate(0deg);
      }
  
      20% {
          transform: translate(-10%,-50%) rotate(-20deg);
      }
  }
  /* Section 5 */
  .section5 {
      padding-bottom: 25px;
  }
  .section5 p:nth-of-type(1) {
      text-align: center;
  }
  .visual-desktop {
      width: 100%;
      /* transform: scale(1.1); */
      padding: 0;
  }
  .section5 .container .row .cta {
      margin-bottom: 25px;
  }
  .section5 .container .row .cta:nth-of-type(2) {
      margin-top: 15px;
      margin-bottom: 0px;
  }
}

/* First LP Responsive */

@media screen and (max-width: 1200px) {
   .manuTop{
    background-size: 482px;
    background-position: 61.8% 59px;
    background-image: url(d-manuTop2.png);
  }
  .blueTop {
      margin-top: -306px; 
  }
  .blueTop .row .col-6 img {
    height: 220px;
  }
  .award{
    height: 260px !important;
  }
  @keyframes manuTop {
    0% , 45% {
      background-size: 482px;
      background-position: 61.8% 59px;
      background-image: url(d-manuTop1.png);
    }
    45.1% , 100%{
      background-size: 482px;
      background-position: 61.8% 59px;
      background-image: url(d-manuTop2.png);
    }
  }

  .yellowArea {
    background-size: auto 100%;
  }
}

@media screen and (max-width: 1000px) {
  .comments {
    margin-top: 121px;
}
.paymentTop img:first-child {
  width: 75%;
  margin: -6px 0 10px 12.5%;
}
.blueTop .row .col-6 img {
  height: 180px;
  margin-bottom: 36px;
  margin-left: -10%;
}
.award{
  height: 220px !important;
  margin-right: -15%;
  margin-left: 0%;
}
.blueTop {
  margin-top: -326px;
}
.manuTop{
  background-size: 400px;
  background-position: 66.5% 120px;
  background-image: url(d-manuTop2.png);
}

@keyframes manuTop {
  0% , 45% {
    background-size: 400px;
    background-position: 66.5% 120px;
    background-image: url(d-manuTop1.png);
  }
  45.1% , 100%{
    background-size: 400px;
    background-position: 66.5% 120px;;
    background-image: url(d-manuTop2.png);
  }
  }
  .yellowRight .col-6 img {
    width: 200px !important;
  } 
  .yellowRight .col-6 {
    text-align: center;
  }

}
@media screen and (max-width: 755px) and (min-width: 600px) { 
  .blueTop {
    margin-top: -305px;
  }
  .manuTop{
    background-size: 369px;
    background-position: 83.5% 54px;
    background-image: url(d-manuTop2.png);
  }
  @keyframes manuTop {
    0% , 45% {
      background-size: 369px;
      background-position: 83.5% 54px;
      background-image: url(d-manuTop1.png);
    }
    45.1% , 100%{
      background-size: 369px;
      background-position: 83.5% 54px;
      background-image: url(d-manuTop2.png);
    }
  }
  .blueTop .row .col-6 img {
    height: 140px;
    margin-bottom: 36px;
    margin-left: -10%;
  }
  .award {
    height: 160px !important;
    margin-right: -15%;
    margin-left: 0%;
  }
  .phoneToWallet {
    width: 70% !important;
    margin: 0px;
  }
}

@media screen and (max-width: 600px) { 
  body {
    width: 100%;
    overflow-x: hidden;
    background-image: none;
  }
  
  html {
    width: 100%;
    overflow-x: hidden;
  }
  
  nav {
      border-bottom: 5px solid rgb(45, 164, 221);
      top:0;
      z-index: 999;
  }
    .first-cta{
        transform: scale(1.2);
    margin-top: 0.3rem;
}
  
  nav img {
      width: 250px;
      margin: 10px;
  }
  
  .bluebg {
    background-image: url("TopBG.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 0%;
  }

  #Section-1 {
    background-image: unset;
    background-repeat: unset;
    background-size: unset;
    background-position: unset;
    margin-top: 60px;
    padding-bottom: 40px;
    background-color: unset;
  }
  
  #Section-1 h1 {
    color: #fff;
    font-size: 1.4rem;
    padding: 15px 0px;
  }
  
  .flueGlare {
    background-image: url("flueGlare.png");
    background-repeat: repeat-y;
    background-size: 150%;
    background-position: 0% 0%;
    width: 100%;
    height: 585px;
    z-index: 1;
    animation-name: flueGlare;
    animation-duration: 30s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes flueGlare {
    from {
      background-position: 50% -900%;
  }
    to {
      background-position: 50% 0%;
  }
  }
  
  .cta {
    color: #C733EF;
    background-color: #fffd00;
    font-size: 1.2rem;
    padding: 6px 25px;
    margin-bottom: 20px;
    border-radius: 5rem;
    font-weight: 900;
    position: relative;
    z-index: 100;
    box-shadow: 0px 5px 0px #2a3e50;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
  }
  #Section-1 .container{
    width: 100% !important;
    padding: 0 !important;
  }
  .manuTop {
    background-size: 125vw;
  background-position: -4vw 17vw;
      background-image: url(d-manuTop2.png);
  }
  @keyframes manuTop {
    0% , 45% {
      background-size: 125vw;
      background-position: -4vw 17vw;
        background-image: url(d-manuTop1.png);
    }
    45.1% , 100%{
      background-size: 125vw;
      background-position: -4vw 17vw;
        background-image: url(d-manuTop2.png);
    }
  } 
  /* @media only screen and (max-height: 900px) and (min-width: 400px) {
    .manuTop {
      background-size: 130vw;
      background-position: -6vw 14vw;
        background-image: url(d-manuTop2.png);
    }
    @keyframes manuTop {
    0% , 45% {
      background-size: 130vw;
      background-position: -6vw 14vw;
        background-image: url(d-manuTop1.png);
    }
     45.1% , 100%{
      background-size: 130vw;
      background-position: -6vw 14vw;
        background-image: url(d-manuTop2.png);
    }
    } 
  } */
  .rotete{
    height: 20px;
    animation-name: rotete;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  
  @keyframes rotete {
  0% {
   transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -o-transform: rotate(0deg);
  }
  100% {
    transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    -moz-transform: rotate(3600deg);
    -ms-transform: rotate(3600deg);
    -o-transform: rotate(3600deg);
  }
  }
  
  .small{
    animation-name: small;
    animation-duration: 5s;
    transform-origin: 50% 50%;
  }
  
  @keyframes small {
  0% , 50% {
   transform: scale(0);
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -ms-transform: scale(0);
   -o-transform: scale(0);
  }
  60%,100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
  }
  }
  
  .blueTop {
    background-image: url(mobile-blue.png);
    background-repeat: no-repeat;
    background-size: 114%;
    background-position: 50% 0px;
    height: 583px;
    margin-top: -48vw;
    position: relative;
    z-index: 100;
    padding-top: 29vw;
  }
  
  .blueTop .row .col-6 img {
    height: 24vw;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 29px;
  }
  .award{
    height: 28vw !important;
    margin-left: 0%;
    margin-right: 0%;
  }
  .mt-xs-10 {
    margin-top: 20px;
  }
  .purpleCard {
    background-color: #942D98;
    min-height: 80px;
    max-height: 80px;
    box-shadow: inset 0px 0px 20px #00000073,
              inset -0px -0px 20px #00000073;
  }
  
  .purpleCard img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
  
  .commentCard {
    border:none;
    box-shadow: 0 0 7px #00000078;
    margin: 15px;
    margin-top: calc(28vw - 95px);
  }

  .yellowRight .col-6 img {
    width: 160px !important;
    margin-top: 3px;
  } 

  .yellowRight .col-12 img[src="manu_and_lucky.png"] {
    position: relative;
    right: -11%;
  }
  
  .commentCard .card-body {
    background-color: #CDECFB;
  }

  .yellowArea .col-md-4 .float-right {
    float: left  !important;
  }

  .phoneToWallet {
    width: 100% !important;
    margin: -4% 0 -0% 0%;
  }
  
  .card-body p {
    font-size: 0.8rem;
    min-height: 100px;
    color: #4b4b4b;
  }
  
  .blockquote-footer {
    font-size: 1rem;
    color: #000;
    font-weight: 900;
  }
  
  .starIcon {
    background-image: url("staricons.png");
    background-size: auto 20px;
    height: 20px;
    background-repeat: no-repeat;
  }
  
  .pulsate-fwd {
    color: #fffd00;   
    background-color: #C733EF;
    -webkit-animation: pulsate-fwd 1s ease-out infinite both;
            animation: pulsate-fwd 1s ease-out infinite both;
  }
  
   @-webkit-keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }
  @keyframes pulsate-fwd {
    0% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
  }

  .c {
    z-index: 1;
    width: 100%;
    height: 665px;
    position: absolute;
    left: 0;
    top: 0;
    animation-name: canvas;
    animation-duration: 10s;
  }
  
  @keyframes canvas {
    0% , 45%{
      opacity: 0;
  }
   55% , 100%{
    opacity: 1;
  }
  }
  
  .left {
    animation-name: left;
    animation-duration: 2.5s;
  }
  
  @keyframes left {
    0%, 66%{
      transform: translatex(100vw);
      -webkit-transform: translatex(100vw);
      -moz-transform: translatex(100vw);
      -ms-transform: translatex(100vw);
      -o-transform: translatex(100vw);
  }
   100%{
    transform: translatex(0vw);
    -webkit-transform: translatex(0vw);
    -moz-transform: translatex(0vw);
    -ms-transform: translatex(0vw);
    -o-transform: translatex(0vw);
  }
  }
  
  .right {
    animation-name: right;
    animation-duration: 2.5s;
  }
  
  @keyframes right {
    0%, 66%{
      transform: translatex(-100vw);
      -webkit-transform: translatex(-100vw);
      -moz-transform: translatex(-100vw);
      -ms-transform: translatex(-100vw);
      -o-transform: translatex(-100vw);
  }
   100%{
    transform: translatex(0vw);
    -webkit-transform: translatex(0vw);
    -moz-transform: translatex(0vw);
    -ms-transform: translatex(0vw);
    -o-transform: translatex(0vw);
  }
  }  
  .slick-next {
    right: 5px;
    height: 30px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
   
  .slick-prev {
    left: 5px;
    height: 30px;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(    178deg    );
    -webkit-transform: translateY(-50%) rotate(    178deg    );
    -moz-transform: translateY(-50%) rotate(    178deg    );
    -ms-transform: translateY(-50%) rotate(    178deg    );
    -o-transform: translateY(-50%) rotate(    178deg    );
  }
  .yellowArea {
    background-image: url("yellowBG.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 100% 50%;
  }
  .yellowArea h5 {
  color: #FFFF00;
  text-shadow: 0 0 5px #000;
  font-size: 5vw;
  }
  .yellowRight.col-6 {
    padding: 0 !important;
  }
  .yellowRight .col-6:last-child img{
   width: 120%  !important;
   margin-left: -15%;
  }
  .yellowArea ul {
    list-style-image: url("circleYellow.png");
    background-size: 5px;
    text-shadow: 0 0 5px #000;
    font-size: 4.2vw;
  color: #fff;
  }
  .comments {
    margin-top: calc(100vw - 476px);
  }
  .comments h3 {
        color: #98208B;
        text-shadow: 0 0 5px #FEFD0B;
        font-weight: 900;
        border: 1px double #d7ba6b;
        border-style:double;
        border-width:5px;
        border-radius:0.3rem ;
        -webkit-border-radius:0.3rem ;
        -moz-border-radius:0.3rem ;
        -ms-border-radius:0.3rem ;
        -o-border-radius:0.3rem ;
        padding: 0.3rem 0 1rem 0;
  }
  .yellowP {
    color: fff;
    font-size: 5vw;
  font-weight: 900;
  text-shadow: 0 0px 5px #000;
  }  
}
@media (max-width:450px) {
  .blueTop {
    margin-top: -43vw;
}
}
@media (max-width:400px) {
  .blueTop {
    margin-top: -66vw;
    padding-top: 36vw;
}
}
@media (max-width:340px){
  .blueTop {
    margin-top: -87vw;
}
@media (max-width:300px){
  .blueTop {
    margin-top: -100vw;
}
}
/* /////////////////////// Loader Burada /////////////////////  */
.loader {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .loader.hidden {
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
  }
  
  @keyframes ldio-m2f8s5eyw7n {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
  }
  
  .ldio-m2f8s5eyw7n div {
    left: 47px;
    top: 24px;
    position: absolute;
    animation: ldio-m2f8s5eyw7n linear 0.78125s infinite;
    background: #6a63b6;
    width: 6px;
    height: 12px;
    border-radius: 3px / 6px;
    transform-origin: 3px 26px;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.7161458333333334s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -0.6510416666666667s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.5859375s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.5208333333333334s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.4557291666666667s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.390625s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.32552083333333337s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.2604166666666667s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.1953125s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.13020833333333334s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.06510416666666667s;
    background: #6a63b6;
  }
  
  .ldio-m2f8s5eyw7n div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
    background: #6a63b6;
  }
  
  .loadingio-spinner-spinner-bdy4r16rec9 {
    width: 54px;
    height: 54px;
    display: inline-block;
    overflow: hidden;
    background: transparent;
  }
  
  .ldio-m2f8s5eyw7n {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(0.54);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
  }
  
  .ldio-m2f8s5eyw7n div {
    box-sizing: content-box;
  }
  
  /* generated by https://loading.io/ */
  
  @-webkit-keyframes shakeY {
    0%,
    100% {
        transform: translatey(0);
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -ms-transform: translatey(0);
        -o-transform: translatey(0);
    }
  
    50% {
        transform: translatey(-50px);
        -webkit-transform: translatey(-50px);
        -moz-transform: translatey(-50px);
        -ms-transform: translatey(-50px);
        -o-transform: translatey(-50px);
    }
  }
  
  @keyframes shakeY {
    0%,
    90%,
    100% {
        transform: translatey(0);
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -ms-transform: translatey(0);
        -o-transform: translatey(0);
    }
  
    50% {
        transform: translatey(-50px);
        -webkit-transform: translatey(-50px);
        -moz-transform: translatey(-50px);
        -ms-transform: translatey(-50px);
        -o-transform: translatey(-50px);
    }
  }
  
  .animate__shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  /* triger animation*/
  /* triger animation*/
  /* triger animation*/
  /* triger animation*/
  /* triger animation*/
  .delay05 {
    animation-delay: 0.5s;
  }
  .delay1 {
    animation-delay: 1s;
  }
  .delay15 {
    animation-delay: 1.5s;
  }

@media screen and (max-width: 600px){
    #Section-1 h1 {
    font-size: 7.5vw;
}
    .desktopText {
        display: none;
    }
       .mobileText {
        display: block;
    }
}

}