html {
  scroll-behavior: smooth;
}
body {/*
  background-color: coral;
  background-size: cover;
  background-color: #fff;
  background-image: url("../img/arkaPlan.jpg"),
    linear-gradient(to top, #fff, #a6c7ed);
  background-repeat: no-repeat;
  background-position: center top;
  min-height: 2000px;
  
   */
   cursor: default;
   overscroll-behavior: smooth;
   overflow: hidden;
}



@font-face {
  font-family: "Chango";
  src: url("Chango-Regular.ttf");
}

/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
  /* Tam ekranken */
}

/* Firefox syntax */
:-moz-full-screen {
  /* Tam ekranken */
}

/* IE/Edge syntax */
:-ms-fullscreen {
  /* Tam ekranken */
}

/* Standard syntax */
:fullscreen {
  /* Tam ekranken */
}



.sariRenk {
  color: rgb(253, 253, 131);
}

.sariRenkPastel {
  color: rgb(214, 214, 113);
}

.beyazRenk {
  color: rgb(255, 255, 255);
}

.maviRenk {
  color: rgb(44, 44, 122);
}

.relativeDiv {
  position: relative;
}

@media screen and (orientation: portrait) {
  .anaBlok {
    /*transform: scale(0.75);
    transform-origin: top left;
    */
  }
}

@media screen and (orientation: landscape) {
}

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina 
@media only screen and (min-width : 320px) and (max-width : 767px) {
*/
@media only screen and (min-width: 30px) and (max-width: 767px),(min-aspect-ratio: 19/10) and (max-width: 1024px) {
/*
  input:focus{
    position: fixed;
    top:0px;
    left:auto;
  }
  
  input:not(:focus){
    font-size: x-small;
  }
*/


  .kucukteGizle {
    display: none;
  }

  .isimKisalt{
    max-width: 12rem;
    overflow-x: hidden;
    white-space: nowrap;
  }

  .ustBlok {
    height: 55px;
  }

  .fontSizeKucuk {
    font-size: 12px;
  }

  .fontSizeGenel {
    font-size: 13px;
  }

  .fontSizeBaslik {
    font-size: 15px;
  }

  .fontSizeButonGenel {
    font-size: 12px;
  }
  .fontSizeButonBaslik {
    font-size: 15px;
  }

  .buyukBaslik {
    font-size: 22px;
  }

  .kucukBaslik {
    font-size: 16px;
  }

  .zeyboxLogo {
    max-width: 120px;
  }

  .solKolon {
    max-width: 130px;
    font-size: 10px;
  }

  .haberBlok {
    height: 65px;
    font-size: 10px;
    margin: 10px 0px 10px 0px;
    padding: 5px;
  }

  .solKolonBoyutla{
    max-width: 160px;
  }

  .simgeHaber {
    position: absolute;
    left: -7px;
    top: 10px;
    max-width: 35px;
  }

  .simgeHaberHayati {
    position: absolute;
    left: -30px;
    top: 10px;
    max-width: 70px;
  }
  .menuButon {
    margin-top: 3px;
    padding: 1px;
    width: 110px;
    font-size: 15px;
    transition: 0.2s;
  }
  .menuButon:hover, .aktif {
    width: 115px;
    box-shadow: 0 0 0 2px white;
  }
  

  .maviButon{
    padding: 4px 8px 8px 4px;
    box-shadow: 0 0 0 1px white;
  }

  .maviButon:hover {
    box-shadow: 0 0 0 2px white;
  }

  .baslikBlok {
    text-shadow: 2px 2px 1px #000000;
  }
  .tabloBlok {
    padding: 3px 10px 3px 10px;
    /*max-height: 230px;*/
     height: 65vh;/*Js dosyasında ayarlıyorum burda değil*/
  }

  .akilliLogo {
    position: absolute;
    left: -18px;
    top: 0px;
    width: 22px;
  }

  .kutuphaneLogo {
    position: absolute;
    left: -18px;
    top: 0px;
    width: 22px;
  }

  .fullEkranButon {
    width: 25px;
    height: 25px;
    right: 4px;
    top: 10px;
  }

  .fullEkranButon:hover {
    right: 8px;
    top: 15px;
  }

  .toastMesaji{
    font-size: 14px;
  }

  .bilgiPaneli{
    font-size: 14px;
  }

  .cevapPaneli{
    width: 290px;
    height: auto;
    min-height: 70px;
    margin-left:-145px;
    margin-top:0px;
    left: 50%;
    top: 40%;
  }

  .onurYoutube{
    width:90px;
  }

  .markaResimBoyutu{
    width:24px;
  }

  .markaYaziBoyutu{
    font-size:small;
  }

  .img-hepsiBurada {
    max-width: 145px;
  }

  .sertifikaDiv{
    left: 1rem;
    bottom:-7rem;
    width: 5rem;
  }

  .scene {
    transform: rotateZ(-20deg) scale(0.5);
    left: -3%;
    top: -14%;
  }
  

  .cicekDonen{
    margin-left: -23px;
    margin-bottom: -23px;
    width: 90px;
    height: 90px;
  }
  
  .cicekDonen .resim{
    width: 90px;
    height: 90px;
  }

  @keyframes animasyon-cicek-boyut {
    0% {
      max-width: 30px;
    }
    50% {
      max-width: 10px;
    }
    100% {
      max-width: 30px;
    }
  }


}

/* Medium Devices, Desktops */
@media only screen and (min-width: 768px) and (max-width: 1368px) {
  /*Ara Laptop görüntüleri için*/

  .anaBlok {
    /*
    transform: scale(0.85);
    transform-origin: top;
    */
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 768px) and (max-aspect-ratio: 19/10),(min-width: 1024px){
  .buyukteGizle {
    display: none;
  }

  .ustBlok {
    height: 120px;
  }

  .fontSizeKucuk {
    font-size: 12px;
  }

  .fontSizeGenel {
    font-size: 15px;
  }

  .fontSizeBaslik {
    font-size: 25px;
  }

  .fontSizeButonGenel {
    font-size: 16px;
  }
  .fontSizeButonBaslik {
    font-size: 20px;
  }

  .buyukBaslik {
    font-size: 45px;
  }

  .kucukBaslik {
    font-size: 32px;
  }

  .zeyboxLogo {
    max-width: 235px;
  }

  .solKolon {
    max-width: 300px;
    font-size: 16px;
  }

  .haberBlok {
    height: 100px;
    font-size: 15px;
    margin: 10px;
    padding: 5px;
  }

  .solKolonBoyutla{
    max-width: 300px;
  }

  .simgeHaber {
    position: absolute;
    left: -15px;
    top: 10px;
    max-width: 60px;
  }

  .simgeHaberHayati {
    position: absolute;
    left: -55px;
    top: 10px;
    max-width: 120px;
  }

  .menuButon {
    margin-top: 10px;
    padding: 3px;
    width: 200px;
    font-size: 25px;
    font-weight: 600;
    transition: 0.2s;
  }
  .menuButon:hover, .aktif {
    width: 210px;
    box-shadow: 0 0 0 4px white;
  }
  

  .maviButon{
  padding: 5px 10px 10px 5px;
  box-shadow: 0 0 0 2px white;
  }
  .maviButon:hover {
    box-shadow: 0 0 0 4px white;
  }

  .baslikBlok {
    font-family: "Chango", Fallback, sans-serif;
    text-shadow: 2px 2px 1px #000000;
  }

  .tabloBlok {
    padding: 15px;
    /*max-height: 710px;*/
    height: 70vh;/*Js dosyasında ayarlıyorum burda değil*/
  }

  .akilliLogo {
    position: absolute;
    left: -45px;
    top: -3px;
    width: 45px;
  }

  .kutuphaneLogo {
    position: absolute;
    left: -43px;
    top: -5px;
    width: 50px;
  }

  .fullEkranButon {
    width: 45px;
    height: 45px;
    right: 50px;
    top: 10px;
  }

  .fullEkranButon:hover {
    right: 55px;
    top: 15px;
  }

  .toastMesaji{
    font-size: 20px;
  }

  .bilgiPaneli{
    font-size: 16px;
  }

  .onurYoutube{
    width:140px;
  }

  .markaResimBoyutu{
    width:32px;
  }

  .markaYaziBoyutu{
    font-size:medium;
  }

  .img-hepsiBurada {
    max-width: 255px;
  }

  .sertifikaDiv{
    right: -5rem;
    bottom:-12rem;
    width: 9rem;
  }

  .cevapPaneli{
    width: 450px;
    height: auto;
    min-height: 100px;
    margin-left:-225px;
    margin-top:0px;
    left: 50%;
    top: 60%;
  }

  .scene {
    transform: rotateZ(-20deg) scale(0.8);
    left: -2%;
    top: -5%;
  }

  .cicekDonen{
    margin-left: -33px;
    margin-bottom: -33px;
    width: 130px;
    height: 130px;
  }
  
  .cicekDonen .resim{
    width: 130px;
    height: 130px;
  }

  @keyframes animasyon-cicek-boyut {
    0% {
      max-width: 50px;
    }
    50% {
      max-width: 10px;
    }
    100% {
      max-width: 50px;
    }
  }

}

/* width */
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(234, 150, 88, 0.95);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background: rgba(255, 128, 0, 0.95);
}

.genelGolge{
  box-shadow:2px 2px 2px 0px #000000 ;
}

.anaBlok{
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 2200px;
  min-height: 250px;
  padding: 20px;
  margin: 0px;
  overflow: hidden;
  background-color: coral;
  background-size: cover;
  background-color: #fff;
  background-image: url("../img/arkaPlan.jpg?ver=2"),
    linear-gradient(to top, #fff, #a6c7ed);
  background-repeat: no-repeat;
  background-position: center top;
}

/*
.anaTablo{
  position: relative;
  margin: auto;
  padding: 5px 0px 20px 0px;
  height:95%;
  min-height: 250px;
  max-width: 1360px;
  max-height: 360px;
  border-radius: 20px;  
}
*/

.anaTablo{
  position: absolute;
  padding: 5px 0px 20px 0px;
  
  border-radius: 20px;  
  height: 90%;
  width: 94%;
  min-height: 250px;
  max-width: 1366px;
  max-height: 900px;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
}

.ortala {
  margin: auto;
}

.text-ortala {
  text-align: center;
}

.text-sola {
  text-align: left;
}

.text-saga {
  text-align: right;
}

.ustBlok {
  padding: 0px;
}

.solKolon {
  padding: 5px;
  text-align: center;
}

.sagBuyukKolon {
  padding: 5px;
  font-size: 16px;
  color: #000;
  text-align: left;
}

.baslikBlok {
  font-family: "Chango", Fallback, sans-serif;
}

.zeyboxLogo {
  font-size: medium;
}

.buyukBaslik {
  color: #fff;
  margin-left: 10px;
  text-align: left;
}

.kucukBaslik {
  margin-right: 10px;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

.versiyon {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #fff;
  font-weight: lighter;
  text-shadow: none;
  text-align: right;
}

.haberBlok {
  text-align: center;
  width: auto;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
}


.tabloBlok {
  overflow-y: scroll;
  margin: 10px;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  position: relative;
  width: 100%;
  transform: rotate(0deg);
  /*cursor: url('../img/fareikon.png') 16 0,auto;*/
}

.menuButon {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(234, 150, 88, 0.95);
}

.menuButon:hover, .aktif{
  color: #fff;
  background-color: rgba(255, 128, 0, 0.95);
}



.maviButon {
  cursor: pointer;
  color: #fff;
  border-radius: 10px;
  background-color: rgba(19, 124, 175, 0.95);
}

.maviButon:hover {
  color: #fff;
  background-color: rgba(234, 150, 88, 0.95);
}

.cicekler {
  position: absolute;
  top: 250px;
  left: 250px;
  background-color: #fff;
  width: 24px;
  height: 4px;
  display: block;
  border-radius: 2px;
  cursor: pointer;
  transform: rotate(-33deg);
}

.cicekOrtala {
  position: absolute;
  left: -50px;
  top: -50px;
  width: 100px;
  height: 100px;
}

.labeller {
  position: absolute;
  top: 250px;
  left: 250px;
  background-color: #fff;
  color: crimson;
  width: 200px;
  height: 40px;
  display: block;
  border-radius: 2px;
}

.fullEkranButon {
  position: absolute;
  cursor: pointer;
  transition: 0.3s;
  z-index: 9998;
  background-color: none;
}

.fullEkranButon:hover {
  background-color: rgba(0, 0, 0, 0.2);
}


.toastMesaji{
  position: absolute;
  text-align: center;
  padding: 5px;
  color: #fff;
  width: 300px;
  min-height: 50px;
  margin-left:-150px;
  /*margin-top:-50px;*/
  left: 50%;
  top: -200px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.95);
  transition: 0.4s;
  transform:translateZ(3px);/*z-index yerine bunu kullandım*/
  z-index: 99999;
}

.bilgiPaneli{
    position: absolute;
    text-align:center;
    padding: 20px 10px 40px 10px;
    color: #fff;
    width: 500px;
    height: auto;
    min-height: 150px;
    margin-left:-250px;
    margin-top:-75px;
    left: 50%;
    top: -800px;
    border-radius: 10px;
    /*background-color: rgba(33, 71, 110, 0.95);*/
    background-color: rgb(47, 72, 97);
    box-shadow:1px 1px 2px 0px #000000 ;
    transition: 0.9s;
    transform:translateZ(2px) rotate(90deg);/*z-index yerine bunu kullandım*/
    z-index: 100;
}

.cevapPaneli{
  position: absolute;
  text-align: center;
  padding: 10px 10px 20px 10px;
  color: #fff;
  border-radius: 10px;
  background-color: rgb(53, 53, 53,0.6);
  z-index: 0;
}


.ayarPaneli{
  position: absolute;
  text-align: center;
  padding: 20px 10px 10px 10px;
  color: #fff;
  width: 500px;
  height: auto;
  min-height: 60%;
  margin-left:-250px;
  left: 100%;
  top: 160%;
  border-radius: 10px;
  /*background-color: rgba(33, 71, 110, 0.95);*/
  background-color: rgb(47, 72, 97);
  box-shadow:1px 1px 2px 0px #000000 ;
  transition: 0.9s;
  transform:translateZ(1px) rotate(-90deg);/*z-index yerine bunu kullandım*/
  z-index: 99;
}

.panelEtiket{
  position: absolute;
  text-align: center;
  padding: 5px 10px 5px 10px;
  color: #fff;
  min-width: 50px;
  height: 30px;
  left:0px;
  top: -20px;
  border-radius: 10px 10px 0px 0px;
  background-color: inherit;
  
}

.panelEtiket2{
  position: absolute;
  text-align: center;
  padding: 5px 10px 5px 10px;
  color: #fff;
  min-width: 50px;
  /*height: 30px;*/
  left:0px;
  bottom: -20px;
  border-radius: 0px 0px 10px 10px;
  background-color: inherit;
  
}

.cevapInput{
  width: 200px;
  background-color:#fafafa;
  border-radius:20px;
  margin: auto;
}

.ekranKaranlik{
  position: absolute;
  background-color: black;
  opacity:0.7;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  transition: 0.6s;
  transform:translateZ(1px);/*z-index yerine bunu kullandım*/
}


.ekranCevirClass{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  transition: 0.6s;
  z-index: 200;
  
}


.ekranCevirResim{
  position: absolute;
  left:calc(50% - 150px);
  top:50px;
  width:300px;
  border-radius: 20px;
  
}

.ekranCevirYazi{
  position: absolute;
  left:auto;
  top:10px;
  width:100%;
  font-size: large;
  color: white;
  text-align: center;
}


.ekranCevirButon{
  position: absolute;
  left:0px;
  bottom:5px;
  width:100%;
  font-size: large;
  color: white;
  text-align: center;
}


.tamEkranUyariYazi{
  position: absolute;
  left:0px;
  top:45%;
  width:100%;
  font-size: large;
  color: white;
  text-align: center;
  cursor: pointer;
}

.tamEkranUyariMamat{
  position: absolute;
  left:0px;
  top:25%;
  width:100%;
  font-size: large;
  color: white;
  text-align: center;
  cursor: pointer;
}


.tamEkranUyariYaziIcindeki{
  background-color: #000;
  padding: 40px;
  border-radius: 5px;


}

#aktifDegilUyari{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  transition: 0.6s;
  z-index: 200;


}

.onurYoutube{
  border-radius: 10px;
  cursor:pointer;
}

.aktivasyonEskiFiyat{
  color:rgb(253, 253, 131);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.7;
}


.sagAltMarka{
  display: inline-block;
  position: absolute;
  padding: 5px 15px;
  width: auto;
  border-radius: 1rem;
  color:#fff;
  background-color: rgb(0, 0, 0,0.4);
  right: 190px;
  bottom: -5vh;
  transition: 0.2s;
  text-align: left;
  cursor: pointer;
}

.sagAltMarka2{
  display: inline-block;
  position: absolute;
  padding: 5px 15px;
  width: auto;
  border-radius: 1rem;
  color:#fff;
  background-color: rgb(0, 0, 0,0.4);
  right: 0px;
  bottom: -5vh;
  transition: 0.2s;
  text-align: left;
  cursor: pointer;
}


.kupaDiv{
  position:absolute;
  left:-3rem;
  bottom:2rem;
  width: 4rem;
  
}

.kupaDiv img{
  width: 100%;
  transition: 0.2s;
  cursor: pointer;
  transform:translate(-50%, -20%);
}

.kupaDiv img:hover{
  width: 130%;
}

.sertifikaDiv{
  position:absolute;
  z-index: 9999;
}

.sertifikaDiv img{
  width: 100%;
  transition: 0.2s;
  cursor: pointer;
  transform:translate(-50%, -20%);
}

.sertifikaDiv img:hover{
  width: 150%;
}

.puanDiv{
  position:absolute;
  left:-5.2rem;
  bottom:0px;
  white-space:nowrap;
  padding: 4px 10px;
  background-color: rgb(0, 0, 0,0.6);
  border-radius: 5px;
  cursor: pointer;
}

.puan2Div{
  position:absolute;
  right:-5.2rem;
  bottom:0px;
  white-space:nowrap;
  padding: 4px 10px;
  background-color: rgb(0, 0, 0,0.6);
  border-radius: 5px;
  cursor: pointer;
}

.puanDiv .siraEtiket{
  position:absolute;
  left:-2.3rem;
  top:0px;
  white-space:nowrap;
  padding: 4px 4px;
  font-size:0.8em;
  font-weight:400;
  background-color: rgb(189, 154, 89);
}

.puan2Div .siraEtiket{
  position:absolute;
  right:-2.3rem;
  top:0px;
  white-space:nowrap;
  padding: 4px 4px;
  font-size:0.8em;
  font-weight:400;
  background-color: rgb(189, 154, 89);
}




.img-animasyon {
  animation: animasyon 2s infinite;
  animation-direction: alternate;
}

@keyframes animasyon {
  0% {
    transform: rotate3d(0, 1, 0, -20deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 30deg);
  }
}


.img-animasyon-cevir {
  animation: animasyon-cevir 1.5s infinite;
  animation-direction: alternate;
}

@keyframes animasyon-cevir {
  0% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 10deg);
  }
}

.img-animasyon-cevir-ada {
  animation: animasyon-cevir-ada 1.5s infinite;
  animation-direction: alternate;
}

@keyframes animasyon-cevir-ada {
  0% {
    transform: rotate3d(0, 0, 1, -4deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 4deg);
  }
}


.slide-right {
	-webkit-animation: slide-right 0.5s infinite alternate both;
	        animation: slide-right 0.5s infinite alternate both;
}


 @-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-10);
            transform: translateX(-10);
  }
  100% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-10);
            transform: translateX(-10);
  }
  100% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}


.slide-down {
	-webkit-animation: slide-down 0.5s infinite alternate both;
	        animation: slide-down 0.5s infinite alternate both;
}


 @-webkit-keyframes slide-down {
  0% {
    -webkit-transform: translateY(-10);
            transform: translateY(-10);
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}
@keyframes slide-down {
  0% {
    -webkit-transform: translateY(-10);
            transform: translateY(-10);
  }
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}


.cicek {
  position: absolute;
  max-width: 30px;
  left:100%;
  top:100%;
  opacity: 0.6;
  animation: animasyon-cicek-dondur 4s infinite linear,animasyon-cicek-salla 4s infinite ease-in-out,animasyon-cicek-boyut 10s infinite ease-in-out;
  transition: 3.5s;
  /*z-index: 0;*/
}


@keyframes animasyon-cicek-dondur {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animasyon-cicek-salla {
  0% {
    margin-top: -100px;
  }
  50% {
    margin-top: 100px;
  }
  100% {
    margin-top: -100px;
  }
}

.cicekDonen{
  position: absolute;
  padding: 0px;
  border-radius: 100px;
}

.cicekDonen .resim{
  transition: 1s;
}


.rotate {
  animation: rotation 0.4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#preloader {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  z-index: 99999;
}

.preloader {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.preloader span {
  display: inline-block;
  background-color: #6195FF;
  width: 25px;
  height: 25px;
  -webkit-animation: 1s preload ease-in-out infinite;
          animation: preload 1s ease-in-out infinite;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  border-radius:50%;
}

.preloader span:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.preloader span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

.preloader span:nth-child(3) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
}

.preloader span:nth-child(4) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

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

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


.scene {
  position: absolute;
  width: 100px;
  height: 100px;
  perspective: 75px;
  cursor: pointer;
  /*Yukarıda 
  
  transform: rotateZ(-20deg);
  left: -2%;
  top: -5%;
  */
  z-index: 1;
}

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  animation: spinCube 8s infinite ease-in-out;
}



  .cube.is-spinning {
      animation: spinCube 8s infinite ease-in-out;
  }

@keyframes spinCube {
  0% {
      transform: translateZ(-91px) rotateX( 0deg) rotateY( 0deg);
  }

  100% {
      transform: translateZ(-91px) rotateX(360deg) rotateY(360deg);
  }
}

.cube__face {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 7px solid rgb(255, 255, 255);
  box-shadow: 0px 0px 3px 1px #ebebeb;
  line-height: 100px;
  font-size: 20px;
  color: white;
  text-align: center;
}

  .cube__face img {
      margin-top: -12px;
      margin-left: -2px;
  }


.cube__face--front {
  background: rgba(214, 26, 85, 1);
}

.cube__face--right {
  background: rgba(214, 26, 85, 1);
}

.cube__face--back {
  background: rgba(214, 26, 85, 1);
}

.cube__face--left {
  background: rgba(214, 26, 85, 1);
}

.cube__face--top {
  background: rgba(214, 26, 85, 1);
}

.cube__face--bottom {
  background: rgba(214, 26, 85, 1);
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(49px);
}

.cube__face--right {
  transform: rotateY( 90deg) translateZ(49px);
}

.cube__face--back {
  transform: rotateY(180deg) translateZ(49px);
}

.cube__face--left {
  transform: rotateY(-90deg) translateZ(49px);
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(49px);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(49px);
}

.cube.is-backface-hidden .cube__face {
  backface-visibility: hidden;
}


.secimDiv{
  display: inline-block;
  position: relative;
  margin: 20px 10px 10px 10px;
}

.custom-switch{
  transform: scale(1.3);
}

.rangeRowClass{
  min-width:400px;
  max-width:500px;
  height: 30px;
}

.atlaButon{
  position: absolute;
  left: auto;
  bottom: auto;
}

.siralaButon{
  position: absolute;
  right: -2vw;
  bottom: 1rem;
  
}
.siralaButon span{
  color:white;
  background-color: #474747;
}

.siralaButon span:hover{
  color:white;
  background-color: #000;
}


.siralaButonAyar{
  position: absolute;
  right: 1vw;
  bottom: 1rem;
  
}
.siralaButonAyar span{
  color:white;
  background-color: #474747;
}

.siralaButonAyar span:hover{
  color:white;
  background-color: #000;
}

.zeyboxLogo {
  transition: 0.5s;
}

.zeyboxLogo:hover {
  scale: 1.05;
}