@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Mediumd41d.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Blackd41d.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff'),
        url('../fonts/Roboto-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Boldd41d.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regulard41d.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
* {box-sizing: border-box}
.scene {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute!important;
    z-index: 2;
  }
  .scene>div{
  height: 100%;
  width: 100%;
  }
  .container {
    margin: 0 auto;
    max-width: 100%;
    padding: 0px;
    position: relative;
    overflow: hidden;
  }
  body, html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
  }
  body {
    color: #d2a96e;
    font-family: 'Roboto', sans-serif;
    font-size: 3vw;
    margin: 0;  
    font-weight: 500;
  }
  .bg {
    width: 100%;
    min-height: 99.9999vh;
    position: relative;
  }
  .main-content {
    width: 82%;
    margin: 0 auto;
    padding: 3% 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 99vh;
  }
  .responsive-img {
      display: block;
      max-width: 100%;
      max-height: 100%;
  }
  .header .logo{
    max-width: 45%;
    display: block;
  }
  .text-block {
      padding: 4% 0;
      width: 45%;
  }
  .flex-line {
      display: flex;
      align-items: center;
      align-content: center;
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.02);}
    100% {transform: scale(1);}
  }

  .title-1 {
    color: #ffffff;
    font-size: 3vw; 
    animation-fill-mode: both;
    animation-iteration-count: infinite; 
    animation-name: pulse;
    animation-duration: 1s;
  }
  .title-1-1 {
    color: #ffffff;
    font-size: 1vw; 
    animation-fill-mode: both;
    animation-iteration-count: infinite; 
    animation-name: pulse;
    animation-duration: 1s;
  }
  .plain-text {
   font-size: 1.9vw;
   line-height: 1;
   font-weight: normal;
   padding-left: 5%;   
  }
  .sub-title {
      font-size: 3vw;
  }
  .footer img {
      margin: 0 auto;
  }

  .btn-container, .btn-arrow {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    width: 35%;
    height: 35%;
    transform: translate(-50%, -50%);
    content: "";
    z-index: 2;  
  }
  .btn{
    display: block;
    color: #ffffff;
    width: 100%;
    height: 100%;
  }
  @keyframes pulse1 {
    0% { transform: scale(1) }
  30% { transform: scale(1) }
  40% { transform: scale(1.07)}
  50% { transform: scale(1)}
  60% { transform: scale(1)}
  70% { transform: scale(1.04)  }
  80% { transform: scale(1) }
  100% { transform: scale(1) }
  }

  .btn {
    background: url(../img/button.png) center no-repeat;
    background-size: contain;
    -webkit-animation-name: pulse1;
    animation-name: pulse1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .circle {
      position: absolute;
      right: -13vw;
      top: -12.5vw;
      width: 44vw;
      height: 44vw;
      color: #d2a96e;
      z-index: 1;
  }
  .circle::after {
    position: absolute;
    left: -8.5%;
    top: 57.5%;
    width: 25%;
    height: 25%;
    content: "";
    background: url(../img/arrow-body.png) center no-repeat;
    background-size: contain;
    z-index: -1;
  }
  .circle::before {
    position: absolute;
    left: -6%;
    top: 63%;
    width: 19%;
    height: 19%;
    content: "";
    background: url(../img/arrow.png) center no-repeat;
    background-size: contain;
    z-index: 2;
  }
  .circle-body {
      position: relative;
      width: 100%;
      height: 100%;
      background: url("../img/circle.png") center no-repeat;
      background-size: contain;
      transform: rotate( -25deg);
      animation-fill-mode: both;
  }
  .circle-body>div {
      position: absolute;
      width: 41%;
      z-index: 1;
      text-align: center;
  }
  .circle-first {
    transform: rotate(90deg);
    bottom: 42%;
    left: 3%;
    animation: texts 16s linear  infinite;
  }
  .circle-second {
    transform: rotate(-180deg);
    top: 18%;
    left: 30%;
    animation: texts 16s linear 4s infinite;
  }
  .circle-third {
    transform: rotate(270deg);
    top: 39%;
    left: 58%;
    animation: texts 16s linear 8s infinite;
  }
  .circle-forth {
    bottom: 18%;
    left: 28%;
    animation: texts 16s linear 12s infinite;
  }
  .circle-title {
      font-size: 3.3vw;
  }
  .circle-subtitle{
    font-size: 2.6vw;
  }
  @keyframes texts {
    0% {
      color: #d2a96e;
      }
      10% {
        color: #ffffff;
        }
      15% {
        color: #d2a96e;
      }
      95% {
        color: #d2a96e;
      }
    100% {
      color: #d2a96e;
    }
  }
  
  @keyframes lights {
    0% {
      opacity: 1;
      }
      1% {
        opacity: 0;
      }
      20% {
        opacity: 0;
      }
      21% {
        opacity: 1;
      }
      30% {
        opacity: 1;
      }
      31% {
        opacity: 0;
      }
      45% {
        opacity: 0;
      }
      46% {
        opacity: 1;
      }
      55% {
        opacity: 1;
      }
      56% {
        opacity: 0;
      }
      70% {
        opacity: 0;
      }
      71% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      81% {
        opacity: 0;
      }
      95% {
        opacity: 0;
      }
      65% {
        opacity: 0;
      }
    100% {
      opacity: 1;
    }
  }
  .btn-arrow::before {
    position: absolute;
    left: -83%;
    top: -9%;
    width: 132%;
    height: 186%;
    content: "";
    background: url(../img/ligth.png) center no-repeat;
    background-size: contain;
    z-index: 2; 
    animation: lights 16s linear 1s infinite;
  }
  @media only screen and (min-width: 769px) {
    .bg { 
        background: url("../img/bg.jpg") center no-repeat;
        background-size: cover;
    }
    .sm-show {
        display: none!important;
    }
    .footer-logo {
        max-width: 70%;
    }
    .girl {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 0;
        left: 0;
        background: url("../img/girl.png") bottom right no-repeat;
        background-size: contain;
        z-index: 0;
    }
    .girl:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 30%;
        bottom: 0;
        left: 0;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0.95) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0.95) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
        z-index: 1;
    }
    .lg-hidden {
      display: none !important;
    }
}
@media only screen and (max-width: 768px) {
    .bg { 
        background: url("../img/mobile-bg.png") center no-repeat;
        background-size: cover;
    } 
    .sm-hidden{
        display: none !important;
    }
    .circle {
      position: absolute;
      right: 50%;
      top: 60vw;
      width: 95vw;
      height: 95vw;
      transform: translate(50%, 0) rotate(-66deg);
    }
    .btn-container {
      transform: translate(-50%, -50%) rotate(66deg);
      width: 42%;
      height: 42%;
    }
    .btn-arrow {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    .header .logo{
      max-width: 100%;
      display: block;
      margin: 0.5vw auto;
    }
    .text-block {
      padding: 0;
      width: 79vw;
      font-size: 6vw;
      margin: 0 auto;
    }
    .title-1 {
      font-size: 5vw;
    }
    .plain-text {
      font-size: 5vw;
    }
    .sub-title {
      font-size: 5vw;
  }
  .title-1-1 {
    font-size: 5vw;
    font-weight: bold;
  }
  .casino-text{
    color: #ffffff;
  }
  .footer {
    margin-top: 110vw;
  }
  .circle-title {
    font-size: 5vw;
  }
  .circle-subtitle {
    font-size: 5vw;
}
.circle-first {
  bottom: 44%;
}
.circle-third {
  top: 41%;
}
}

@keyframes wheel {
    0% {
        transform: rotateZ(-25deg);
      }
      5% {
        transform: rotateZ(-25deg);
      }
      20% {
        transform: rotateZ(-115deg);
      }
      30% {
        transform: rotateZ(-115deg);
      }
      45% {
        transform: rotateZ(-205deg);
      }
      55% {
        transform: rotateZ(-205deg);
      }
      70% {
        transform: rotateZ(-295deg);
      }
      80% {
        transform: rotateZ(-295deg);
      }
      95% {
        transform: rotateZ(-385deg);
      }
    100% {
      transform: rotateZ(-385deg);
    }
  }
  .wheel {
    animation: wheel 16s linear 1s infinite;
  }
  
  .scene>div>div>div {
    position: absolute;
  }
  @media only screen and (min-width: 769px) {
 
  
  .item20 {
    background: url("../img/elemnts/Layer.html\ 92.png") center no-repeat;
    background-size: contain;
    width: 8vw;
    height: 5.5vw;
    bottom: 31%;
    left: 43%;
  }
  .item19 {
    background: url("../img/elemnts/Layer.html\ 78.png") center no-repeat;
    background-size: contain;
    width: 6vw;
    height: 6vw;
    bottom: 31%;
    left: 38%;
  }
  .item18 {
    background: url("../img/elemnts/Layer.html\ 82.png") center no-repeat;
    background-size: contain;
    width: 7vw;
    height: 4vw;
    bottom: 34%;
    right: 30%;
  }
  .item17 {
    background: url("../img/elemnts/Layer.html\ 79.png") center no-repeat;
    background-size: contain;
    width: 6vw;
    height: 3vw;
    bottom: 44%;
    right: 33%;
  }
  .item16 {
    background: url("../img/elemnts/Layer.html\ 93.png") center no-repeat;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    bottom: 40%;
    left: 45%;
  }
  .item15 {
    background: url("../img/elemnts/Layer.html\ 87.png") center no-repeat;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    bottom: 26%;
    left: 51%;
  }
  .item14 {
    background: url("../img/elemnts/Layer.html\ 75.png") center no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    top: 10%;
    left: 35%;
  }
  .item13 {
    background: url("../img/elemnts/Layer.html\ 80.png") center no-repeat;
    background-size: contain;
    width: 3vw;
    height: 3vw;
    bottom: 34%;
    right: 22%;
  }
  .item12 {
    background: url("../img/elemnts/Layer.html\ 88.png") center no-repeat;
    background-size: contain;
    width: 3vw;
    height: 3vw;
    bottom: 28%;
    right: 41%;
  }
  .item11 {
    background: url("../img/elemnts/Layer.html\ 86.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    top: 26%;
    left: 41%;
  }
  .item11_1 {
    background: url("../img/elemnts/Layer.html\ 86.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    top: 14%;
    right: 34%;
    transform: rotate(79deg);
  }
  .item10 {
    background: url("../img/elemnts/Layer.html\ 85.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    top: 17%;
    left: 45%;
  }
  .item9 {
    background: url("../img/elemnts/Layer.html\ 90.png") center no-repeat;
    background-size: contain;
    width: 2.5vw;
    height: 2.5vw;
    bottom: 31%;
    right: 39%;
  }
  .item8 {
    background: url("../img/elemnts/Layer.html\ 91.png") center no-repeat;
    background-size: contain;
    width: 3vw;
    height: 3.5vw;
    bottom: 27%;
    right: 36%;
  }
  .item7 {
    background: url("../img/elemnts/Layer.html\ 94.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    bottom: 25%;
    right: 25%;
  }
  .item6 {
    background: url("../img/elemnts/Layer.html\ 96.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    bottom: 42%;
    right: 44%;
  }
  .item5 {
    background: url("../img/elemnts/Layer.html\ 89.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    bottom: 42%;
    left: 34%;
  }
  .item4 {
    background: url("../img/elemnts/Layer.html\ 83.png") center no-repeat;
    background-size: contain;
    width: 3vw;
    height: 3vw;
    bottom: 39%;
    right: 38%;
  }
  .item3 {
    background: url("../img/elemnts/Layer.html\ 76.png") center no-repeat;
    background-size: contain;
    width: 4vw;
    height: 4vw;
    bottom: 38%;
    left: 30%;
  }
  .item2 {
    background: url("../img/elemnts/Layer.html\ 77.png") center no-repeat;
    background-size: contain;
    width: 4vw;
    height: 5vw;
    bottom: 28%;
    left: 34%;
  }
  .item1 {
    background: url("../img/elemnts/Layer.html\ 86.png") center no-repeat;
    background-size: contain;
    width: 2vw;
    height: 2vw;
    bottom: 39%;
    left: 51%;
  }
}