@font-face {
    font-family: DisneyPark; /* Гарнитура шрифта */
    src: url(DisneyPark.ttf); /* Путь к файлу со шрифтом */
   }

html, body { left: 0; margin: 0; width: 100%; height: 100%; overflow:hidden; font-family: DisneyPark; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;}

.fon{ width: 100%; height: 100%; background: url(../images/tttu.jpg) no-repeat;  background-size: 100% 100%; }

.fon img {width: 15%; cursor:pointer;}

.fon .controls { width: 7%; height:60%; position: absolute; top: 20%; left: 2%; border-radius: 20px; background-image: linear-gradient( to bottom right, #000, #ddd); }

.fon .controls img { width: 64%; border-radius: 50%;}

.fon .controls table { width: 100%; text-align-last:center; }

.fon .controls img:hover { border-radius: 50%; box-shadow: 0px 0px 15px 21px #fff; animation: glow 1.5s linear infinite alternate; }

.normall { border-radius: 50%; transition:all 1s; }
.blink { border-radius: 50%; box-shadow: 0px 0px 15px 21px #fff; animation: glow 1.5s linear infinite alternate; transition:all 1s; }

.controls .cimg { width: 64%; margin: 20% 0 0 18%; }

.controls .cimg:hover { box-shadow:none; }

.center_div { width: calc(20% - 40px); height: calc(26% - 40px); position:absolute; top: 37%; right: 40%; background:#B30D0D; border-radius: 10px;  color: white; text-align:center; text-align-last:center; padding: 20px; font-size: 1.7vw; display: table; }

.center_div span { display: table-cell; vertical-align: middle; }

.no_blue{position:absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }

.main_img{width: 95%; margin: 0 10px; animation: scaling 2s infinite alternate;}
.main_img_an1{width: 95%; margin: 0 10px; animation: scaling 3s infinite alternate;}

.btn_an1{animation: scaling 3s infinite alternate;}

button{ width: 80%; padding: 5px; background:#B30D0D; border:none; border-radius: 3px; color: #fff; font-size: 1.7vw; cursor:pointer; outline:none; font-family: DisneyPark; -webkit-animation: scaling 3s infinite alternate; }

button:hover{ background:#aa00f9; color: #f9bb00; }

.fonmain{ width: 100%; height: 100%; background: url(../images/main.jpg) no-repeat;  background-size: 100% 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;  }

.fonbukvi{ width: 100%; height: 100%; background: url(../images/fff.jpg) no-repeat;  background-size: 100% 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;  }

.fonmain img {width: 15%; cursor:pointer; }

.disable-selection { -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

@keyframes scaling { From { -webkit-transform: scale(1.0); } To { -webkit-transform: scale(1.02); }


.fon .oblako {
	width: 100px;
  height: 100px;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:-200px; top:0px;}
  25%  {background-color:red; left:200px; top:0px;}
  50%  {background-color:red; left:200px; top:0px;}
  75%  {background-color:red; left:200px; top:0px;}
  100% {background-color:red; left:200px; top:0px;}
}