:root {
  --oblack: #000;
  --oblue: #0808c1;
  --ogreen: #356303;
  --ored: #910304;
  --main-blue: #000026;
  --dark-blue: #0a5856fa;
  --light-blue: rgba(0, 158, 153, 0.801);
  --passive-blue: #0a7d79;
  --text: #ddd;
  --side: rgb(217, 192, 168);
  --side-dark: #120e08;
  --coin-size: calc(10vh + 10vw);
  --o-transition: .3s all linear;
}

@font-face {
  font-family: 'SairaSemiCondensed Regular';

  src: url('/font/SairaSemiCondensed-Regular.ttf');
}

@font-face {
  font-family: 'DINbek Black';

  src: url('/font/DINbekBlack.ttf');
}

@font-face {
  font-family: 'SairaSemiCondensed ExtraBold';

  src: url('/font/SairaSemiCondensed-ExtraBold.ttf');
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'SairaSemiCondensed Regular' !important;
  background: rgb(245, 245, 245);
}

.main-pages {
  background: rgb(245, 245, 245);
}

.header {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 7px -3px;
  height: calc(3.5vw + 3.5vh);
  background: var(--main-blue);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  transition: var(--o-transition);
}

.main-container {
  background-color: #fff;
  width: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.logo-piece {
  position: absolute;
  width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.logo-anim {
  position: relative;
  height: 100%;
  background: var(--main-blue);
}

#logo_p3, #logo_p4, #logo_p5, #logo_p6, #logo_p7 {
  -webkit-animation: .5s linear 0s alternate logovoice2;
          animation: .5s linear 0s alternate logovoice2;
  transform-origin: 90% 33%;
}

#logo_p5 {
  -webkit-animation: .8s linear 0s alternate logovoice2;
          animation: .8s linear 0s alternate logovoice2;
  transform-origin: 90% 33%;
}

#logo_p6 {
  -webkit-animation: .9s linear 0s alternate logovoice2;
          animation: .9s linear 0s alternate logovoice2;
  transform-origin: 90% 33%;
}

#logo_p7 {
  -webkit-animation: 1s linear 0s alternate logovoice2;
          animation: 1s linear 0s alternate logovoice2;
  transform-origin: 90% 33%;
}

#logo_p1 {
  -webkit-animation: .5s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate logoload;
          animation: .5s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate logoload;
}

#logo_p2 {
  -webkit-animation: .5s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate logoload2;
          animation: .5s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate logoload2;
}

.logo-a {
  position: absolute;
  transition: filter .3s cubic-bezier(0.215, 0.610, 0.355, 1), transform .3s cubic-bezier(0.215, 0.610, 0.355, 1);
  opacity: 1;
  height: 100%;
  right: 0;
  left: 0;
}

.logo-a:hover {
  filter: brightness(1.05);
}

.logo-a:hover #logo_p3, .logo-a:hover #logo_p4, .logo-a:hover #logo_p5, .logo-a:hover #logo_p6, .logo-a:hover #logo_p7 {
  transform: scale(1.1)
}

@-webkit-keyframes logoload {
  from {
    left: -20px;
  }

  to {
    left: 0;
  }
}

@keyframes logoload {
  from {
    left: -20px;
  }

  to {
    left: 0;
  }
}

@-webkit-keyframes logoload2 {
  from {
    right: -20px;
  }

  to {
    right: 0;
  }
}

@keyframes logoload2 {
  from {
    right: -20px;
  }

  to {
    right: 0;
  }
}

@-webkit-keyframes logovoice2 {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes logovoice2 {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@-webkit-keyframes logoappear {
  from {
    display: none;
  }

  to {
    transform: block;
  }
}

@keyframes logoappear {
  from {
    display: none;
  }

  to {
    transform: block;
  }
}

.social-media-body {
  height: auto;
  margin-left: auto;
  position: relative;
  background: var(--main-blue);
  transition: var(--o-transition);
  align-content: center;
  justify-content: center;
  display: flex;
  margin-right: auto;
}

.header-button {
  cursor: pointer;
  display: block;
  transition: var(--o-transition);
}

.header-button a {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.header-button p {
  text-align: center;
  color: var(--text);
  width: 100%;
  position: relative;
  display: block;
  font-size: calc(0.7vw + 0.6vh);
  margin-top: auto;
  margin-bottom: auto;
  transition: var(--o-transition);
  letter-spacing: 0.5px;
  font-weight: 800;
}

.header-button:hover {
  background: var(--passive-blue);
  color: #fff;
}

.social-media {
  margin: auto 0.2vw;
  text-align: center;
}

.social-media i {
  color: var(--text);
  border: 2px solid var(--text);
  transition: var(--o-transition);
  border-radius: 50%;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: grid;
  justify-content: center;
  align-items: center;
}

.facebook-social-btn i:hover {
  color: #4267B2;
  background: #fff;
}

.youtube-social-btn i:hover {
  color: #FF0000;
  background: #fff;
}

.instagram-social-btn i:hover {
  color: #833AB4;
  background: #fff;
}

.linkedin-social-btn i:hover {
  color: #0072b1;
  background: #fff;
}

.twitter-social-btn i:hover {
  color: #1DA1F2;
  background: #fff;
}

.tiktok-social-btn i:hover {
  color: #000000;
  background: #fff;
}

.mobile-header {
  top: calc(4.5vw + 4.5vh);
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  overflow: hidden;
  transition: var(--o-transition);
  height: 0px;
}

.mobile-header.opened {
  height: 280px !important;
}

.mobile-header-btn {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.m-header-button {
  display: block;
  transition: var(--o-transition);
  background: #000e3fe8;
  border: 1px solid var(--main-blue);
  height: 40px;
  letter-spacing: 0.5px;
}

.m-header-button:hover {
  background: var(--main-blue);
  letter-spacing: 1.5px;
}

.m-header-button a {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}

.m-header-button p {
  text-align: center;
  color: var(--text);
  width: 100%;
  position: relative;
  display: block;
  font-size: calc(1vw + 1vh);
  margin-top: auto;
  margin-bottom: auto;
  transition: var(--o-transition);
}

.hamburder_div {
  right: 24px;
  position: absolute;
}

#icon {
  width: calc(3vw + 3vh);
  height: calc(2vw + 2vh);
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  margin-top: calc(0.8vw + 0.8vh);
}

path {
  fill: none;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-width: 40px;
  stroke-linecap: round;
  stroke: var(--text);
  stroke-dashoffset: 0px;
}

path#top,
path#bottom {
  stroke-dasharray: 240px 950px;
}

path#middle {
  stroke-dasharray: 240px 240px;
}

.cross path#top,
.cross path#bottom {
  stroke-dashoffset: -650px;
  stroke-dashoffset: -650px;
}

.cross path#middle {
  stroke-dashoffset: -115px;
  stroke-dasharray: 1px 220px;
}

.animation-page {
  font-family: 'SairaSemiCondensed ExtraBold' !important;
  overflow: hidden;
}

.pages {
  width: 100%;
  position: relative;
}

#pages1{
  width: 100%;
  height: 100%;
  display: grid;
  align-content: end;
}

#istaka_body {
  position: relative;
  width: 85%;
  height: 135%;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  font-family: 'DINbek Black' !important;
  z-index: 998;
}

#istaka {
  width: 100%;
  height: 92%;
  position: relative;
  bottom: 0;
  font-family: 'DINbek Black' !important;
}

#locates_body_top {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  padding-left: 3.6%;
  padding-right: 3.6%;
  display: flex;
}

#locates_body_bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  padding-left: 3.6%;
  padding-right: 3.6%;
  bottom: calc(0.7vw + 0.7vh);
  display: flex;
}

.topslot {
  width: 100%;
  height: 100%;
  position: relative;
  padding: .1vw;
}

.bottomslot {
  width: 100%;
  height: 100%;
  position: relative;
  padding: .1vw;
}

.non-empty {
  background-image: url('/storage/img/empty.svg');
  background-size: cover;
  height: 85%;
  width: 102%;
  position: relative;
  display: block;
  transition: .5s all;
  z-index: 500;
  cursor: move;
}

.non-empty::before {
  text-align: center;
  width: 100%;
  height: 50%;
  position: absolute;
  display: grid;
  align-content: center;
  font-size: calc(1.6vw + 1.6vh);
  font-weight: 1000;
  top: calc(0.2vw + 0.2vh);
  letter-spacing: -3px;
  left: -2px;
  font-family: 'DINbek Black' !important;
}

.non-empty.color-0::after, .non-empty.color-1::after, .non-empty.color-2::after, .non-empty.color-3::after {
  content: '';
  text-align: center;
  width: 23%;
  height: 16%;
  position: absolute;
  display: grid;
  align-content: center;
  font-size: calc(1.5vw + 1.5vh);
  font-weight: 1000;
  bottom: 15%;
  left: 40%;
  border-radius: 50%;
  font-family: 'DINbek Black' !important;
}

.non-empty.color-0::after{
  background-color: var(--oblack) !important;
}

.non-empty.color-1::after{
  background-color: var(--oblue) !important;
}

.non-empty.color-2::after{
  background-color: var(--ogreen) !important;
}

.non-empty.color-3::after{
  background-color: var(--ored) !important;
}

.number-1::before { content: '1'
}

.number-2::before { content: '2'
}

.number-3::before { content: '3'
}

.number-4::before { content: '4'
}

.number-5::before { content: '5'
}

.number-6::before { content: '6'
}

.number-7::before { content: '7'
}

.number-8::before { content: '8'
}

.number-9::before { content: '9'
}

.number-10::before { content: '10'
}

.number-11::before { content: '11'
}

.number-12::before { content: '12'
}

.number-13::before { content: '13'
}

.color-0 { color: var(--oblack) !important
}

.color-1 { color: var(--oblue) !important
}

.color-2 { color: var(--ogreen) !important
}

.color-3 { color: var(--ored) !important
}

.details1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.details2 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: .3s all;
  transform: scale(1);
  opacity: 1;
}

.turning2 {
  transform: scale(2);
  opacity: 0;
}

#serie, #couple {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 9;
  transition: transform .3s;
  cursor: pointer;
}

.couple-button {
  position: absolute;
  left: 4%;
  width: 100%;
  margin-top: 80%;
}

.serie-button {
  position: absolute;
  left: 4%;
  width: 100%;
  height: auto;
}

.left-bottom-buttons {
  position: absolute;
  width: 8.3%;
  left: 3.5%;
  display: block;
  height: 25%;
  bottom: 6%;
}

#gocouple {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 9;
  transition: transform .3s;
  cursor: pointer;
}

.go-couple-button {
  position: absolute;
  right: 3.8%;
  width: 9%;
  bottom: 26.4%;
}

#gocouple:hover, #serie:hover, #couple:hover {
  transform: scale(1.075);
}

#left_top {
  position: absolute;
  left: 2.2%;
  top: 6%;
  width: 5.2%;
  height: 17.7%;
  transform: scale(0.88);
}

#left_bottom {
  position: absolute;
  left: 2.2%;
  bottom: 23%;
  width: 5.2%;
  height: 17.7%;
  transform: scale(0.88);
}

#right_top {
  position: absolute;
  right: 2%;
  top: 6%;
  width: 5.2%;
  height: 17.7%;
  transform: scale(0.88);
}

#right_bottom {
  position: absolute;
  right: 2%;
  bottom: 23%;
  width: 5.2%;
  height: 17.7%;
}

#mid_left {
  position: absolute;
  right: 29.5%;
  top: 44.4%;
  width: 5.2%;
  height: 14.2%;
  transform: scale(0.92);
  background-image: url('/storage/img/okey.svg');
  background-size: cover;
  z-index: 1000;
}

#mid_left .non-empty {
  height: 100%;
  width: 95.7%;
  left: 2px;
}

#mid_right {
  position: absolute;
  right: 29.4%;
  top: 29%;
  width: 5.3%;
  height: 15.6%;
  transform: scale(0.88);
  background-size: cover;
}

#win_img {
  z-index: 999;
  width: 75%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
}

#lose_img {
  z-index: 1001;
  width: 55%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
}

#game-screen {
  position: relative;
  margin-top: 4%;
}

.game-texts {
  position: absolute;
  height: 100%;
  width: 100%;
}

.game-texts div {
  display: block;
  position: absolute;
}

.players-name, .players-gold {
  display: block;
  position: relative;
  font-size: 1.2vw;
  color: #02142d;
}

.players-name {
  left: -6%;
}

.players-gold {
  left: 36%;
  bottom: 6px;
}

.top-player {
  top: 7.1%;
  left: 48.4%;
}

.right-player {
  top: 33.1%;
  right: 7.4%;
}

.bottom-player {
  bottom: 34.6%;
  left: 48.4%;
}

.left-player {
  top: 32.9%;
  left: 9.8%;
}

.left-top-buttons {
  display: flex;
  position: absolute;
  font-size: 1.24vw;
  color: #02142d;
  height: 12%;
  width: 50%;
}

.lt-a, .lt-p, .lt-b {
  position: relative;
  display: block;
}

.lt-a {
  top: 41%;
  left: 13.4%;
}

.lt-p {
  top: 41%;
  left: 32.3%;
}

.lt-b {
  top: 41%;
  left: 47%;
}

.mid-value-top {
  display: block;
  position: absolute;
  font-size: 1.25vw;
  left: 55.5%;
  top: 32.6%;
  color: #ddd;
}

.mid-value-bottom {
  display: block;
  position: absolute;
  font-size: 1.25vw;
  left: 55.5%;
  top: 37.9%;
  color: #ddd;
}

.animation-page {
  background-image: url('/storage/img/101_bg.png');
  align-content: center;
  display: grid;
  justify-content: center;
  background-size: cover;
}

.exit-btn::before {
  content: 'x';
  color: #fff;
  font-size: calc(2.7vw);
  position: absolute;
  text-align: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  z-index: 9999;
}

.exit-btn {
  position: absolute;
  right: 17.5%;
  top: 14%;
}

.unshow {
  display: none !important;
}

.show {
  display: block;
}

.w-download-button {
  height: auto;
  position: absolute;
  bottom: 16%;
  z-index: 999;
}

.download-button {
  height: auto;
  position: absolute;
  bottom: 1%;
  transition: .3s all;
}

#w_db_and {
  left: 13.5%;
}

#w_db_ios {
  right: 13.5%;
}

#db_and {
  left: 1%;
}

#db_ios {
  right: 1%;
}

#db_and img, #db_ios img, #w_db_ios img, #w_db_and img {
  width: calc(9vh + 9vw);
}

.exit-btn2::before {
  content: 'x';
  color: #fff;
  font-size: calc(2.7vw);
  position: absolute;
  text-align: center;
  cursor: pointer;
  width: 35px;
  height: 35px;
  z-index: 9999;
}

.exit-btn2 {
  position: absolute;
  right: 28%;
  top: 24%;
}

/* .download-button:hover {
    transform: scale(1.05);
} */

.info-padding {
  padding: calc(.5vw + .5vh) 1.5vw;
  display: grid;
  position: relative;
}

.infos{
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: calc(1vw + 1vh) calc(1.5vw + 1.5vh);
  border-radius: 8px;
}

.info-img img {
  width: 100%;
  height: auto;
  position: relative;
  transition: .3s all;
  margin: auto;
  display: block;
}

.mancium-img {
  width: 100%;
  height: 70%;
  position: absolute;
  overflow: hidden;
  border-radius: 12px;
  margin: auto;
  transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1) all;
  display: grid;
  top: 0 !important;
  bottom: 0 !important;
}

.mancium-img::after {
  content: '';
  background: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
  width: 20px;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  margin: auto;
  border-radius: 12px;
}

.mancium-logo {
  width: 40%;
  height: auto;
  position: relative;
  margin: auto;
}

.mancium-anim {
  top: 0%;
  z-index: 3;
}

.info img {
  padding: 4vw;
}

.infos span {
  font-size: calc(0.3vw + 14px);
  text-align: justify;
}

.page-title {
  font-size: calc(1.8vw + 1.8vh);
  font-weight: 600;
}

.alt-title {
  font-size: calc(1.5vw + 1vh + 10px);
  font-weight: 600;
}

.clasic-game {
  width: 80% !important;
  margin-left: auto;
  margin-right: auto;
  transform: translate(150%, 0%);
}

.questions-body{
  display: grid;
  align-content: center;
  padding: 0 calc(2.5vw + 1.5vh);
  position: relative;
}

.border-anim {
  width: 40%;
  position: absolute;
  left: 10%;
  margin-left: auto;
  height: 100%;
  bottom: 0;
}

.border-anim::before {
  content: '';
  background: linear-gradient(90deg, rgb(0, 181, 138, 0.65) 0%, rgb(0, 0, 38, 0.65) 50%, rgba(97, 115, 180, 0.65) 100%);
  width: 50%;
  height: 2px;
  position: absolute;
  bottom: 5%;
  right: 23%;
  -webkit-animation: borderline-width .6s cubic-bezier(.25,.46,.45,.94) both;
          animation: borderline-width .6s cubic-bezier(.25,.46,.45,.94) both;
}

.border-anim::after {
  content: '';
  background: linear-gradient(0deg,rgba(97, 115, 180, 0.65) 0%, rgb(0, 0, 38, 0.65) 50%, rgb(0, 181, 138, 0.65) 100%);
  width: 2px;
  height: 60%;
  position: absolute;
  left: -6%;
  top: 8%;
  -webkit-animation: borderline-height .6s cubic-bezier(.25,.46,.45,.94) both;
          animation: borderline-height .6s cubic-bezier(.25,.46,.45,.94) both;
}

.logo-border {
  width: 40%;
  position: absolute;
  right: 6%;
  margin-left: auto;
  height: 60%;
  top: -10%;
}

.logo-border::before {
  content: '';
  background: linear-gradient(90deg, rgb(0, 181, 138, 0.65) 0%, rgb(0, 0, 38, 0.65) 50%, rgba(97, 115, 180, 0.65) 100%);
  width: 50%;
  height: 2px;
  position: absolute;
  top: 5%;
  left: 4%;
  -webkit-animation: borderline-width .6s cubic-bezier(.25,.46,.45,.94) both;
  animation: borderline-width .6s cubic-bezier(.25,.46,.45,.94) both;
}

.logo-border::after {
  content: '';
  background: linear-gradient(0deg,rgba(97, 115, 180, 0.65) 0%, rgb(0, 0, 38, 0.65) 50%, rgb(0, 181, 138, 0.65) 100%);
  width: 2px;
  height: 60%;
  position: absolute;
  right: 7%;
  bottom: 8%;
  -webkit-animation: borderline-height .6s cubic-bezier(.25,.46,.45,.94) both;
          animation: borderline-height .6s cubic-bezier(.25,.46,.45,.94) both;
}

.tutorial-video {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.question-text span {
  font-size: calc(0.3vw + 14px);
  text-align: justify;
}

.page-title {
  font-size: calc(1.8vw + 1.8vh);
  font-weight: 600;
}

.animate-img-1 {
  opacity: 0;
  transition: .5s all;
}

.right-bottom-anim {
  opacity: 1;
  transform: translate(0%, 0%);
}

.gif-mockup {
  transform: translate(-100%, 0);
  opacity: 0;
  transition: .5s all;
}

.left-right-anim {
  opacity: 1;
  transform: translate(0%, 0%);
}

@media (prefers-reduced-motion: no-preference) {
  .video-anim {
    -webkit-animation: phone .3s cubic-bezier(.25,.46,.45,.94) both;
            animation: phone .3s cubic-bezier(.25,.46,.45,.94) both;
  }
}

@-webkit-keyframes phone {
  0% {
    transform: perspective(400px) rotatex(60deg) scaley(0.5);
    opacity: 0;
  }

  100% {
    transform: perspective(400px) rotatex(0deg) scaley(1);
    opacity: 1;
  }
}

@keyframes phone {
  0% {
    transform: perspective(400px) rotatex(60deg) scaley(0.5);
    opacity: 0;
  }

  100% {
    transform: perspective(400px) rotatex(0deg) scaley(1);
    opacity: 1;
  }
}

@-webkit-keyframes borderline-width {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes borderline-width {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes borderline-height {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

@keyframes borderline-height {
  0% {
    height: 0%;
  }

  100% {
    height: 100%;
  }
}

.video-anim {
  transform: perspective(400px) rotatex(0deg) scaley(1);
  transition: .3s cubic-bezier(.25,.46,.45,.94) all;
}

.question-video {
  position: relative;
  z-index: 1;
}

.yuzbir-body {
  margin-top: 7vw;
}

.yuzbir-img-body {
  position: relative;
  display: grid;
  align-content: center;
}

.yuzbir-img {
  width: 80%;
  height: auto;
  position: relative;
  background-image: url('/storage/img/okey-yatay-mock.png');
  background-size: contain;
  margin: 0 auto 2rem;
  background-repeat: no-repeat;
  background-position: 0% 100%;
}

.yuzbirtest {
  width: 109.1%;
  position: absolute;
  z-index: 0;
  left: 0;
  top: -34px;
}

.yuzbir-logo {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  transform: translate(0%, -10%);
  opacity: 0;
}

.yuzbir-svg {
  cursor: default;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 0;
  height: 0;
  transform: rotate(0deg) scale(0) translate(0, 0);
  overflow: hidden;
}

.yuzbir-svg::before {
  font-size: calc(1.9vw + 1.9vh) !important;
}

.yuzbir-stones {
  position: absolute;
  top: 0;
  width: 100%;
}

.yuzbir-anim-1 {
  -webkit-animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-1;
          animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-1;
  transform: rotate(-15deg) scale(1) translate(-270%, -75%);
  z-index: 2;
}

.yuzbir-anim-2 {
  -webkit-animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-2;
          animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-2;
  transform: rotate(14deg) scale(.88) translate(-255%, 30%);
  z-index: 3;
}

.yuzbir-anim-3 {
  -webkit-animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-3;
          animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-3;
  transform: rotate(-18deg) scale(0.88) translate(400%, 216%);
  z-index: 2;
}

.yuzbir-anim-4 {
  -webkit-animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-4;
          animation: .6s cubic-bezier(.25,.46,.45,.94) 0s alternate yuzbir-4;
  transform: rotate(24deg) scale(1) translate(491%, 46%);
  z-index: 3;
}

@-webkit-keyframes yuzbir-1 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(-15deg) scale(1) translate(-270%, -75%);
  }
}

@keyframes yuzbir-1 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(-15deg) scale(1) translate(-270%, -75%);
  }
}

@-webkit-keyframes yuzbir-2 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(14deg) scale(.88) translate(-255%, 30%);
  }
}

@keyframes yuzbir-2 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(14deg) scale(.88) translate(-255%, 30%);
  }
}

@-webkit-keyframes yuzbir-3 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(-18deg) scale(0.88) translate(400%, 216%);
  }
}

@keyframes yuzbir-3 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(-18deg) scale(0.88) translate(400%, 216%);
  }
}

@-webkit-keyframes yuzbir-4 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(24deg) scale(1) translate(491%, 46%);
  }
}

@keyframes yuzbir-4 {
  0% {
    transform: rotate(0deg) scale(0) translate(0, 0);
  }

  100% {
    transform: rotate(24deg) scale(1) translate(491%, 46%);
  }
}

#privacy {
  margin-top: calc(3.7vw + 3.7vh);
}

footer {
  position: relative;
  width: 100%;
  bottom: 0;
}

.footer-main {
  background: var(--dark-blue);
}

.footer-footer {
  background: var(--dark-blue);
}

.footer-button {
  cursor: pointer;
  display: block;
  transition: var(--o-transition);
}

.footer-button a {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  min-height: 42px;
}

.footer-button p {
  text-align: center;
  color: var(--text);
  width: 100%;
  position: relative;
  display: block;
  font-size: calc(0.8vw + 0.8vh);
  margin-top: auto;
  margin-bottom: auto;
  transition: var(--o-transition);
  letter-spacing: 0.5px;
}

.footer-button:hover {
  -webkit-text-decoration: underline #fff;
          text-decoration: underline #fff;
  color: #fff;
}

.privacy {
  display: flex;
  border-bottom: 2px solid var(--passive-blue);
}

.privacy-text {
  color: var(--passive-blue);
  font-size: calc(0.3vw + 14px);
  display: grid;
  align-content: center;
}

.footer-logo {
  height: auto;
  position: relative;
  display: grid;
  align-content: center;
}

.footer-main .social-media i {
  color: var(--passive-blue) !important;
  border: 2px solid var(--passive-blue) !important;
}

.footer-main .social-media i:hover {
  color: var(--dark-blue) !important;
  border: 2px solid var(--text) !important;
}

.footer-main .social-media-body {
  background: var(--dark-blue);
}

.logos {
  background: var(--main-blue);
  padding: 1.5rem !important;
}

.company-logos {
  position: relative;
  max-width: 100%;
}

.logos-body {
  display: grid;
  align-content: center;
  justify-content: center;
  padding: 0 2vw;
}

.desktop-footer .logos-body a{
  filter: grayscale(100%) brightness(75%) opacity(60%);
  transition: var(--o-transition);
}

.desktop-footer .logos-body a:hover{
  filter: grayscale(0%) brightness(100%) opacity(100%);
}

.reserved {
  color: var(--passive-blue);
  text-align: center;
  width: 100%;
}

.torightbottom {
  transform: scale(0.88);
  z-index: 999;
}

.torightp {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate torightp;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate torightp;
  transform: translate(10%, -150%) scale(0);
  z-index: 999;
}

.torighttop {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate torighttop;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate torighttop;
  transform: translate(0%, -300%) scale(0.88);
  z-index: 999;
}

.totopp {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate totopp;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate totopp;
  transform: translate(-850%, -350%) scale(0);
  z-index: 999;
}

.tolefttop {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate tolefttop;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate tolefttop;
  transform: translate(-1745%, -300%) scale(0.88);
  z-index: 999;
}

.toleftp {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate toleftp;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate toleftp;
  transform: translate(-1745%, -150%) scale(0);
  z-index: 999;
}

.toleftbottom {
  -webkit-animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate toleftbottom;
          animation: .5s cubic-bezier(.25,.46,.45,.94) 0s alternate toleftbottom;
  transform: translate(-1745%, 10%) scale(0.88);
  z-index: 999;
}

@-webkit-keyframes torightp {
  0% {
    transform: translate(0, 0) scale(0.88);
  }

  100% {
    transform: translate(10%, -150%) scale(0);
  }
}

@keyframes torightp {
  0% {
    transform: translate(0, 0) scale(0.88);
  }

  100% {
    transform: translate(10%, -150%) scale(0);
  }
}

@-webkit-keyframes torighttop {
  0% {
    transform: translate(10%, -150%) scale(0);
  }

  100% {
    transform: translate(0%, -300%) scale(0.88);
  }
}

@keyframes torighttop {
  0% {
    transform: translate(10%, -150%) scale(0);
  }

  100% {
    transform: translate(0%, -300%) scale(0.88);
  }
}

@-webkit-keyframes totopp {
  0% {
    transform: translate(0%, -300%) scale(0.88);
  }

  100% {
    transform: translate(-850%, -350%) scale(0);
  }
}

@keyframes totopp {
  0% {
    transform: translate(0%, -300%) scale(0.88);
  }

  100% {
    transform: translate(-850%, -350%) scale(0);
  }
}

@-webkit-keyframes tolefttop {
  0% {
    transform: translate(-850%, -350%) scale(0);
  }

  100% {
    transform: translate(-1745%, -300%) scale(0.88);
  }
}

@keyframes tolefttop {
  0% {
    transform: translate(-850%, -350%) scale(0);
  }

  100% {
    transform: translate(-1745%, -300%) scale(0.88);
  }
}

@-webkit-keyframes toleftp {
  0% {
    transform: translate(-1745%, -300%) scale(0.88);
  }

  100% {
    transform: translate(-1745%, -150%) scale(0);
  }
}

@keyframes toleftp {
  0% {
    transform: translate(-1745%, -300%) scale(0.88);
  }

  100% {
    transform: translate(-1745%, -150%) scale(0);
  }
}

@-webkit-keyframes toleftbottom {
  0% {
    transform: translate(-1745%, -150%) scale(0);
  }

  100% {
    transform: translate(-1745%, 10%) scale(0.88);
  }
}

@keyframes toleftbottom {
  0% {
    transform: translate(-1745%, -150%) scale(0);
  }

  100% {
    transform: translate(-1745%, 10%) scale(0.88);
  }
}

.right-buttons {
  position: absolute;
  right: 1%;
  width: 10%;
  height: 40%;
  display: grid;
  top: 22%;
  overflow: hidden;
}

.right-button {
  background-image: url('/storage/img/btn_yatay.png');
  background-size: cover;
  height: 25%;
  position: absolute;
  transition: .3s all;
  width: 70%;
  right: 10%;
  display: grid;
  align-content: center;
  justify-items: center;
  cursor: pointer;
}

.right-button:hover {
  transform: scale(1.1);
}

.right-button span {
  font-size: calc(0.85vw + 0.85vh);
  text-align: center;
}

.turning-rights {
  right: -100%;
  transition: .3s all;
}

.go-serie img {
  width: 50%;
  top: 5%;
  position: relative;
  left: 4%;
}

.go-serie span {
  bottom: 30%;
  position: relative;
}

.go-couple span {
  bottom: 15%;
  position: relative;
}

.go-couple img {
  width: 35%;
  top: 5%;
  position: relative;
}

.go-serie {
  top: 0%;
}

.go-couple {
  top: 25%;
}

.taslari-isle {
  top: 50%;
}

.taslari-geri-topa {
  top: 75%;
}

.ex-nft{
  position: relative;
  justify-content: center;
  align-items: end;
  margin-top: 5vw;
}

.nft-img {
  width: 40%;
  height: 75%;
  transition: .5s ease-in-out all;
  position: absolute;
  transform-origin: 50% -120%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.manc-logo {
  padding: 0 calc(7.5vw + 10px);
  position: relative;
  overflow: hidden;
  display: block;
}

.manc-img {
  width: 30%;
  margin-right: auto;
  display: block;
  margin-top: 1vw;
  height: auto;
  margin-left: auto;
}

.logo-shine {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding: 1vw 7.5vw;
  left: 100%;
  background: linear-gradient(53deg, rgba(255,255,255,0) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 75%);
}

.shine-anim {
  -webkit-animation: 2s cubic-bezier(.25,.46,.45,.94) 0s alternate shine;
          animation: 2s cubic-bezier(.25,.46,.45,.94) 0s alternate shine;
}

@-webkit-keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.manc-text{
  display: grid;
  align-content: center;
  padding: 1.5vw 4vw;
  position: relative;
}

.manc-text-main{
  display: grid;
  align-content: center;
  padding: calc(1vw + 1vh + 16px);
  position: relative;
}

.manc-text-main span {
  font-size: calc(0.3vw + 14px);
}

.faq-body {
  display: grid;
  justify-items: center;
}

.faq-qa {
  display: block;
  overflow: hidden;
  padding-bottom: 5px;
}

.faq-question {
  display: block;
  font-size: calc(0.3vw + 16px) !important;
  font-weight: 800;
  padding-bottom: .5vw;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.faq-answer {
  display: block;
  font-size: calc(0.3vw + 12px) !important;
  height: 100%;
  max-height: 0px;
  transition: .3s all;
  border-radius: 8px;
  overflow: auto;
}

.faq-img {
  max-width: 90%;
  height: auto;
  margin: auto;
}

.faq-img-body {
  padding: calc(.5vw + .5vh) 2vw;
  display: grid;
}

.opened-answer {
  max-height: calc(10vw + 10vh);
  padding: calc(.5vw + 0.5vh + 3px);
}

.faq-question i{
  font-size: calc(0.4vw + 10px);
  transition: .2s cubic-bezier(0.215, 0.610, 0.355, 1) all;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 4px;
}

.to-down {
  transform: rotate(90deg);
}

.privacy-body {
  display: block;
  padding: 0 4vw;
  display: grid;
  justify-items: center;
  margin-bottom: 5px;
}

.article-text {
  height: auto;
  overflow: hidden;
  display: block;
  transition: .2s cubic-bezier(0.215, 0.610, 0.355, 1) all;
  font-size: calc(0.3vw + 12px);
}

.article-text h5 {
  font-weight: 600;
}

.article-title {
  display: block;
  font-size: calc(0.3vw + 16px);
  padding-bottom: calc(.5vw + 5px);
  font-weight: 800;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.article-title i{
  font-size: calc(0.3vw + 10px);
  transition: .2s cubic-bezier(0.215, 0.610, 0.355, 1) all;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 4px;
}

.opened-privacy {
  max-height: calc(20vw + 20vh);
  overflow: scroll;
  padding: calc(.5vw + 0.5vh + 3px);
}

.embed-video {
  position: relative;
  width: 90%;
  height: auto;
  left: 0;
  right: 0;
  margin: auto;
  transition: .3s cubic-bezier(.25,.46,.45,.94) all;
  transform-origin: 50% 100%;
  transform: perspective(400px) rotatex(60deg) scaley(0.5);
}

.embed-video video {
  width: 100%;
  position: absolute;
  top: -10%;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
}

.glass {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
}

.phone-glass {
  position: absolute;
  width: 95%;
  height: 83%;
  border-radius: 26px;
  left: 2%;
  top: 7%;
  overflow: hidden;
}

.phone-mockup {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10;
}

.nft-okey-body {
  height: 100%;
  width: auto;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.nft-background, .nft-material, .nft-number {
  height: 100%;
  width: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: .3s all;
  right: 0;
  left: 0;
}

.nft-background {
  z-index: 10;
  border-radius: 8px;
}

.nft-material {
  z-index: 11;
}

.nft-number {
  z-index: 12;
}

.mid-border {
  height: 100px;
  width: 100%;
  position: relative;
  display: block;
}

.finish-game {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #0000009e;
  z-index: 999;
}

.logo-title {
  height: calc(2.5vw + 4.5vh);
  padding-bottom: calc(.8vh + .8vw);
  margin: auto;
}

.coin {
  height: var(--coin-size);
  width: var(--coin-size);
  margin: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.coin::before {
  content: '';
  display: block;
  position: relative;
  height: var(--coin-size);
  width: var(--coin-size);
  border-radius: 50%;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
  background: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
  background-image: url("/storage/img/mc.png");
  background-size: 100% 100%;
  background-position: center;
}

.coin.flip::before {
  -webkit-animation-name: flip;
          animation-name: flip;
}

.flip-coin {
  align-content: center;
  justify-content: center;
}

@-webkit-keyframes spin {
  0% {
    width: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  49.999% {
    width: 0.1rem;
    box-shadow:
        0.05rem 0 0 var(--side),
        0.1rem 0 0 var(--side),
        0.15rem 0 0 var(--side),
        0.2rem 0 0 var(--side),
        0.25rem 0 0 var(--side),
        0.3rem 0 0 var(--side),
        0.35rem 0 0 var(--side),
        0.4rem 0 0 var(--side),
        0.45rem 0 0 var(--side),
        0.5rem 0 0 var(--side),
        0.55rem 0 0 var(--side),
        0.6rem 0 0 var(--side),
        0.65rem 0 0 var(--side),
        0.7rem 0 0 var(--side),
        0.75rem 0 0 var(--side);
    transform: perspective(400px) translateX(-0.375rem);
    background-color:linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }

  50.001% {
    width: 0.1rem;
    box-shadow:
        -0.05rem 0 0 var(--side),
        -0.1rem 0 0 var(--side),
        -0.15rem 0 0 var(--side),
        -0.2rem 0 0 var(--side),
        -0.25rem 0 0 var(--side),
        -0.3rem 0 0 var(--side),
        -0.35rem 0 0 var(--side),
        -0.4rem 0 0 var(--side),
        -0.45rem 0 0 var(--side),
        -0.5rem 0 0 var(--side),
        -0.55rem 0 0 var(--side),
        -0.6rem 0 0 var(--side),
        -0.65rem 0 0 var(--side),
        -0.7rem 0 0 var(--side),
        -0.75rem 0 0 var(--side);
    transform: perspective(400px) translateX(0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    width: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
  }
}

@keyframes spin {
  0% {
    width: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  49.999% {
    width: 0.1rem;
    box-shadow:
        0.05rem 0 0 var(--side),
        0.1rem 0 0 var(--side),
        0.15rem 0 0 var(--side),
        0.2rem 0 0 var(--side),
        0.25rem 0 0 var(--side),
        0.3rem 0 0 var(--side),
        0.35rem 0 0 var(--side),
        0.4rem 0 0 var(--side),
        0.45rem 0 0 var(--side),
        0.5rem 0 0 var(--side),
        0.55rem 0 0 var(--side),
        0.6rem 0 0 var(--side),
        0.65rem 0 0 var(--side),
        0.7rem 0 0 var(--side),
        0.75rem 0 0 var(--side);
    transform: perspective(400px) translateX(-0.375rem);
    background-color:linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }

  50.001% {
    width: 0.1rem;
    box-shadow:
        -0.05rem 0 0 var(--side),
        -0.1rem 0 0 var(--side),
        -0.15rem 0 0 var(--side),
        -0.2rem 0 0 var(--side),
        -0.25rem 0 0 var(--side),
        -0.3rem 0 0 var(--side),
        -0.35rem 0 0 var(--side),
        -0.4rem 0 0 var(--side),
        -0.45rem 0 0 var(--side),
        -0.5rem 0 0 var(--side),
        -0.55rem 0 0 var(--side),
        -0.6rem 0 0 var(--side),
        -0.65rem 0 0 var(--side),
        -0.7rem 0 0 var(--side),
        -0.75rem 0 0 var(--side);
    transform: perspective(400px) translateX(0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    width: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
  }
}

@-webkit-keyframes flip {
  0% {
    height: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  49.999% {
    height: 0.1rem;
    box-shadow:
        0 0.05rem 0 var(--side),
        0 0.1rem 0 var(--side),
        0 0.15rem 0 var(--side),
        0 0.2rem 0 var(--side),
        0 0.25rem 0 var(--side),
        0 0.3rem 0 var(--side),
        0 0.35rem 0 var(--side),
        0 0.4rem 0 var(--side),
        0 0.45rem 0 var(--side),
        0 0.5rem 0 var(--side),
        0 0.55rem 0 var(--side),
        0 0.6rem 0 var(--side),
        0 0.65rem 0 var(--side),
        0 0.7rem 0 var(--side),
        0 0.75rem 0 var(--side);
    transform: perspective(400px) translateY(-0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }

  50.001% {
    height: 0.1rem;
    box-shadow:
        0 -0.05rem 0 var(--side),
        0 -0.1rem 0 var(--side),
        0 -0.15rem 0 var(--side),
        0 -0.2rem 0 var(--side),
        0 -0.25rem 0 var(--side),
        0 -0.3rem 0 var(--side),
        0 -0.35rem 0 var(--side),
        0 -0.4rem 0 var(--side),
        0 -0.45rem 0 var(--side),
        0 -0.5rem 0 var(--side),
        0 -0.55rem 0 var(--side),
        0 -0.6rem 0 var(--side),
        0 -0.65rem 0 var(--side),
        0 -0.7rem 0 var(--side),
        0 -0.75rem 0 var(--side);
    transform: perspective(400px) translateY(0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    height: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
  }
}

@keyframes flip {
  0% {
    height: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  49.999% {
    height: 0.1rem;
    box-shadow:
        0 0.05rem 0 var(--side),
        0 0.1rem 0 var(--side),
        0 0.15rem 0 var(--side),
        0 0.2rem 0 var(--side),
        0 0.25rem 0 var(--side),
        0 0.3rem 0 var(--side),
        0 0.35rem 0 var(--side),
        0 0.4rem 0 var(--side),
        0 0.45rem 0 var(--side),
        0 0.5rem 0 var(--side),
        0 0.55rem 0 var(--side),
        0 0.6rem 0 var(--side),
        0 0.65rem 0 var(--side),
        0 0.7rem 0 var(--side),
        0 0.75rem 0 var(--side);
    transform: perspective(400px) translateY(-0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }

  50.001% {
    height: 0.1rem;
    box-shadow:
        0 -0.05rem 0 var(--side),
        0 -0.1rem 0 var(--side),
        0 -0.15rem 0 var(--side),
        0 -0.2rem 0 var(--side),
        0 -0.25rem 0 var(--side),
        0 -0.3rem 0 var(--side),
        0 -0.35rem 0 var(--side),
        0 -0.4rem 0 var(--side),
        0 -0.45rem 0 var(--side),
        0 -0.5rem 0 var(--side),
        0 -0.55rem 0 var(--side),
        0 -0.6rem 0 var(--side),
        0 -0.65rem 0 var(--side),
        0 -0.7rem 0 var(--side),
        0 -0.75rem 0 var(--side);
    transform: perspective(400px) translateY(0.375rem);
    background-color: linear-gradient(0deg, rgba(252,235,218,1) 0%, rgba(121,107,97,1) 100%);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  100% {
    height: var(--coin-size);
    box-shadow:
        0 0 0 var(--side-dark);
  }
}

.coin__shadow {
  position: absolute;
  width: 360px;
  height: 20px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 100px 100px #000;
  opacity: 0.125;
  transform: translateZ(-330px) scale(0.5);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  bottom: 0;
  filter: blur(10px);
}

.scroll-down {
  position: relative;
  width: 100%;
  min-height: 90px;
  overflow: hidden;
}

.scroll-arrow {
  width: 90px;
  height: 90px;
  position: relative;
  display: block;
  margin: auto;
  top: 0;
  overflow: hidden;
  overflow: hidden;
}

.scroll-arrow::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: -80%;
  right: 0;
  left: 0;
  margin: auto;
  transform: rotate(45deg);
  border-right: 10px solid rgb(240, 240, 240);
  border-bottom: 10px solid rgb(240, 240, 240);
  cursor: pointer;
  -webkit-animation: 2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate before-anim infinite;
          animation: 2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate before-anim infinite;
}

.scroll-arrow::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: -10%;
  right: 0;
  left: 0;
  margin: auto;
  transform: rotate(45deg);
  border-right: 10px solid rgb(240, 240, 240);
  border-bottom: 10px solid rgb(240, 240, 240);
  cursor: pointer;
  -webkit-animation: 2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate after-anim infinite;
          animation: 2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s alternate after-anim infinite;
}

@-webkit-keyframes after-anim {
  from {
    top: -10%;
  }

  to {
    top: 90%;
  }
}

@keyframes after-anim {
  from {
    top: -10%;
  }

  to {
    top: 90%;
  }
}

@-webkit-keyframes before-anim {
  from {
    top: -80%;
  }

  to {
    top: 10%;
  }
}

@keyframes before-anim {
  from {
    top: -80%;
  }

  to {
    top: 10%;
  }
}

#the_table {
  position: absolute;
  width: 25%;
  height: 51%;
  top: 9.5%;
  left: 14%;
}

.table-slot {
  position: relative;
  width: 7.69%;
  height: 100%;
  padding: .1vw;
}

#per_0, #per_1, #per_2, #per_3, #per_4, #per_5, #per_6, #per_7 {
  display: flex;
  height: 12.4%;
}

.table-slot .non-empty::before {
  font-size: calc(0.6vw + 0.6vh);
  top: calc(0.1vw + 0.1vh);
}

.table-slot .non-empty {
  cursor: default;
}

.mobile-phone {
  width: 30%;
  height: auto;
  position: relative;
  display: flex;
  margin: auto;
  bottom: -100%;
  transition: .5s all;
}

.mobile-mockup {
  width: 100%;
  position: relative;
}

.manc-mobile-img {
  width: 70%;
  margin-right: auto;
  display: block;
  height: auto;
  margin-left: auto;
  top: 40%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: 1;
}

.mobile-glass {
  width: 89%;
  height: 96%;
  position: absolute;
  background: #000;
  z-index: 0;
  left: 7%;
  top: 2%;
  border-radius: 10%;
  transition: .3s all;
  transition-delay: .8s;
}

.mobile-phone.opened {
  bottom: 0%;
}

.opened .mobile-glass {
  background: #252161;
}

.opened .manc-mobile-img{
  opacity: 1;
  transition: .5s all;
  transition-delay: 1s;
}

.mobile-body {
  overflow: hidden;
}

.mobile-phone.rotate {
  transition: .5s all;
  transition-delay: 1s;
  transform: rotate(90deg) scale(1.5);
}

.rotate .manc-mobile-img {
  transform: rotate(-90deg) scale(2);
  transform-origin: 58% 75%;
}

#total_sum {
  font-size: calc(.6vw + .6vw);
  color: #fff;
  left: 64%;
  position: relative;
  display: grid;
  height: calc(1.1vw + 1.1vw);
  width: calc(3.2vw + 3.2vw);
  border: 2px solid #fff;
  align-content: center;
  justify-content: center;
  border-radius: 4px;
  bottom: 32%;
  background: #066e69;
  z-index: 9;
}

#total_sum::before {
  content: '';
  width: 20%;
  height: 2px;
  position: absolute;
  background: #fffafa;
  bottom: -20%;
  transform: rotate(-19deg);
  right: 31%;
}

#total_sum::after {
  content: '';
  width: 20%;
  height: 2px;
  position: absolute;
  background: #fffafa;
  bottom: -20%;
  transform: rotate(19deg);
  left: 31%;
}

.glass-border {
  height: calc(3vw + 3vh);
  width: 100%;
  position: relative;
  display: block;
}

.glass-border::before {
  content: '';
  width: 80%;
  height: 2px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background: #f5f5f5;
  position: absolute;
}

.coin-bg {
  position: absolute;
  z-index: 0;
  width: 80%;
  right: 0;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  height: 120%;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
}

.mobile-lang {
  right: 0;
}

.toggle-button-cover
{
  display: table-cell;
  position: relative;
  box-sizing: border-box;
}

.button-cover
{
  background-color: transparent;
  border-radius: 4px;
  display: grid;
  align-content: center;
  justify-content: end;
}

.button-cover, .knobs, .layer
{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button-toggle
{
  position: relative;
  width: calc(2vw + 2vh + 4px);
  height: calc(1vw + 1vh + 3px);
  overflow: hidden;
}

.button-toggle.r, .button-toggle.r .layer
{
  border-radius: 100px;
}

.button-toggle.b2
{
  border-radius: 2px;
}

.checkbox-toggle
{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs
{
  z-index: 2;
}

.layer
{
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

#button-6
{
  overflow: visible;
}

#button-6 .knobs:before
{
  content: 'TR';
  position: absolute;
  top: calc(0.1vw + 0.1vh + 0.4px);
  left: calc(0.1vw + 0.1vh + 0.4px);
  width: calc(0.8vw + 0.8vh + 2.2px);
  height: calc(0.8vw + 0.8vh + 2.2px);
  color: #fff;
  font-size: calc(0.5vw + 0.5vh);
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: calc(0.2vw + 0.2vh) 0;
  background-color: #03A9F4;
  border-radius: 50%;
}

#button-6 .layer, #button-6 .knobs, #button-6 .knobs:before
{
  transform: rotateZ(0);
  transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-6 .checkbox-toggle:checked + .knobs
{
  transform: rotateZ(-180deg);
}

#button-6 .checkbox-toggle:checked + .knobs:before
{
  content: 'EN';
  background-color: #f44336;
  transform: rotateZ(180deg);
}

#button-6 .checkbox-toggle:checked ~ .layer
{
  background-color: #fcebeb;
  transform: rotateZ(180deg);
}

.mobile-toggles {
  position: relative;
  right: 0;
  margin-left: auto;
  display: flex;
}

.gif-mockup {
  width: 90%;
  position: relative;
  border-radius: 20px;
  margin: auto;
}

.phone-mockup {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10;
}

.animate-img-2 {
  position: absolute !important;
  width: 100%;
  left: 0;
  padding: 10%;
  top: -12%;
  z-index: 1;
}

.phone-bg {
  background: #000;
  width: 96%;
  height: 89%;
  position: absolute;
  display: block;
  top: 4%;
  z-index: 0;
  left: 2%;
  border-radius: 10%;
}

.mobile-screen {
  display: none;
  width: 100%;
  height: 100%;
}

#game {
  overflow: hidden;
}

.phone-bg {
  border-radius: 10%;
}

.phone-glass {
  position: absolute;
  width: 95%;
  height: 83%;
  border-radius: 26px;
  left: 2%;
  top: 7%;
  overflow: hidden;
}

.error-msg {
  position: absolute;
  color: #f1e8c2;
  z-index: 1009;
  font-weight: 600;
  font-size: calc(2.7vw);
  width: 55%;
  text-align: center;
  display: grid;
  justify-content: center;
  margin: auto;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
}

.oriantation-msg {
  position: absolute;
  color: #f1e8c2;
  z-index: 1009;
  font-weight: 600;
  font-size: calc(5vw);
  width: 40%;
  text-align: center;
  display: grid;
  justify-content: center;
  margin: auto;
  left: 7%;
  top: 28%;
}

.win-msg {
  position: absolute;
  color: #f1e8c2;
  z-index: 1009;
  font-weight: 600;
  text-align: center;
  display: grid;
  height: auto;
  width: 55%;
  justify-content: center;
  margin: auto;
  right: 0;
  font-size: calc(5vw);
  letter-spacing: 8px;
  top: 20%;
  align-content: end;
  left: 20%;
}

.mobile-screen.off {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--main-blue);
  color: #fff;
  z-index: 1500;
  background-image: url('/storage/img/empty101.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.oriantation-screen {
  width: 70%;
  position: absolute;
  height: auto;
  right: 0;
  z-index: 2;
  -webkit-animation: 1s linear 0s alternate woman-anim;
          animation: 1s linear 0s alternate woman-anim;
}

@-webkit-keyframes woman-anim {
  from {
    right: -70%;
  }

  to {
    right: 0%;
  }
}

@keyframes woman-anim {
  from {
    right: -70%;
  }

  to {
    right: 0%;
  }
}

.oriantation-board {
  width: 80%;
  z-index: 1;
  height: auto;
  position: absolute;
  -webkit-animation: 1s linear 0s alternate board-anim;
          animation: 1s linear 0s alternate board-anim;
}

@-webkit-keyframes board-anim {
  from {
    left: -70%;
  }

  to {
    left: 0%;
  }
}

@keyframes board-anim {
  from {
    left: -70%;
  }

  to {
    left: 0%;
  }
}

.go-to-website {
  color: var(--main-blue);
  font-weight: 600;
  transition: .2s all;
}

.go-to-website:hover {
  letter-spacing: 1.05px;
  color: var(--passive-blue);
}

.page-mancium {
  display: grid;
  height: 0vh;
  width: 100%;
  position: fixed;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: .3s ease-in height;
  overflow: hidden;
  top: 0;
}

.page-mancium.active {
  height: 100vh
}

.page-mancium-inner {
  width: 90%;
  height: auto;
  display: flex;
  position: relative;
  justify-self: center;
}

.page-mancium a {
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  justify-self: center;
  border-radius: 8px;
  overflow: hidden;
}

.blured {
  filter: blur(10px);
}

.close-this {
  color: #8a8a8a;
  font-size: 22px;
  position: absolute;
  right: -18px;
  top: -18px;
  width: 36px;
  height: 36px;
  display: grid;
  align-items: center;
  justify-content: center;
  border: 3px solid #8a8a8a;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  z-index: 999;
}

main {
  transition: .3s ease-in filter;
}

.mancium-desktop {
  display: flex;
  width: 100%;
  height: auto;
}

.mancium-mobile {
  display: none;
  width: 100%;
  height: auto;
}

.video-adarea {
  position: absolute;
  bottom: 7.5%;
  left: 2.2%;
  width: 58.2%;
  height: 58.2%;
}

@media screen and (max-width: 992px) {
  .mancium-desktop {
    display: none;
  }

  .mancium-mobile {
    display: flex;
  }

  .video-adarea {
    position: absolute;
    bottom: 18%;
    left: 5%;
    width: 90%;
    height: 28.5%;
  }
}