*{
	padding: 0;
	margin: 0;
	border: 0;
}
*,*::before,*::after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}


.title{
 
    width: 100vw;
     object-fit: cover;
     height: auto;
   
     
} 

html,body{

	scroll-behavior: smooth; /* Плавный скрол */
    
    

}
	


input,button,textarea{font-family:inherit;}

input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}


@font-face {
	font-family: centro;
	src: url('../fonts/20016.ttf');
	font-weight: normal;
	font-style:normal; 
}

@font-face {
    font-family: VCASGARDG;
    src: url('../fonts/VCASGARDG.ttf');
    font-weight: normal;
    font-style:normal; 
}

@font-face {
	font-family: secondary;
	src: url('../fonts/19514.otf');
	font-weight: normal;
	font-style:normal; 
}


@font-face {
    font-family: foma;
    src: url('../fonts/foma.ttf');
    font-weight: normal;
    font-style:normal; 
}


body{
	background-image: url('../img/fon.png');
	background-size: cover;
	background-repeat: no-repeat;
    overflow-x: hidden;
}


.preloader {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #00BFFE;
  z-index: 1001;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
  opacity: 1;

    

}



.loaded_hiding .preloader {
  -webkit-transition: 0.3s opacity;
  -o-transition: 0.3s opacity;
  transition: 0.3s opacity;
  opacity: 0;
}

.loaded .preloader {
  display: none;
}


.loader {
  margin: 100px auto;
  font-size: 65px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 1002;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
          align-items: center;
}


@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}




h1{
    text-align: center;
    font-family: foma, sans-serif;
    font-size: 40px; 
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #4D8EB1, -20px -20px 40px #1A37E4, 20px -40px 50px #585DA6, -20px -60px 60px #2F15E9, 0 -80px 70px #973716, 10px -90px 80px #6D10EE;
    position: sticky;
    top: 0;
    z-index: 199;
    transition: all 0.8s;

}


.front1{
	background-image: url('../img/audi.png');
}
.front2{
	background-image: url('../img/travel.png');
}

.front3{
    background-image: url('../img/million.png');
}

 .front4{
    background-image: url('../img/tele.png');
} 

.front5{
    background-image: url('../img/ndpi.png');

} 

.front6{
    background-image: url('../img/Logik.png');

} 

.front7{
    background-image: url('../img/kurs.jpg');

} 

.front8{
    background-image: url('../img/ads.png');

} 
   
.block-figure {
    margin: 20px auto;
    padding: 0;
    position: relative;
    max-width: 600px;
    width: 100%;
    overflow: hidden;
    transition: all 2s;
  
}
.block-figure .figure-txt {
    border: 6px solid #BFE
}



    







.block-figure .image-wrap {
    border: 6px solid #BFE2FF;
    border-radius: 100%;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 30px;
    background: #FFF;
    z-index: 1;
    right: 0;
}





.block-figure .image-lay {
    width: 100px;
    height: 200px;
    position: absolute;
    top: -6px;
    background: #FFF;
    z-index: 2;
    right: -6px;
    
}
.block-figure .image {
    transform-style: preserve-3d;
    perspective: 1000px;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    height: 176px;
    width: 176px;
    top: 6px;
    right: 6px;
}
.block-figure .front,
.block-figure .back {
    background-size: cover;
    background-position: center;
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    backface-visibility: hidden;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    height: 176px;
    width: 176px;    
    border: 6px solid #BFE2FF;    
    position: absolute;
}
.block-figure .inner {
    transform: translateY(-50%) translateZ(60px);
    top: 50%;
    position: absolute;
    margin: auto;
    z-index: 4;
    width: 100%;
}
.block-figure .image .back{
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}
.block-figure:hover .back{
    transform: rotateY(0deg);
    transform-style: preserve-3d;
}
.block-figure:hover .front{
    transform: rotateY(-180deg);
    transform-style: preserve-3d;
}
.block-figure .inner a {
    font-weight: bold;
    font-family: Verdana, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #337AB7;
    text-align: center;
    margin: auto;
    display:block;
    font-size: 14px; 
    line-height: 130px;
    height: 142px;
    width: 142px;
    border:6px solid #BFE2FF;
    border-radius: 50%;
    transition:all .6s ease-in-out;
    overflow:hidden;    
}
.block-figure .inner a::before{
    content:'';
    position:absolute;
    top:-12px;
    margin:auto;
    display:block;
    border-radius:50%;
    width:166px;
    height:166px;
    left:-1px;
    transition:box-shadow .6s ease-in-out;
    z-index:-1;
}
.block-figure .inner a:hover{
    color:#fff;
}

.block-figure .inner a:hover::before{
box-shadow: inset 0 0 0 166px rgb(66, 47, 231);
            }
.block-figure .figure-txt {
    position: relative;
    z-index: 1;
    padding: 10px 20px;
    margin-right: 100px;
    min-height: 260px;
}
.block-figure .figure-txt h3 {  
    text-transform: uppercase;
    color:rgb(66, 47, 231);
    font-weight: bold;
    font-family: secondary, sans-serif;
    font-size: 25px; 
    margin: 6px 100px 12px 0;    
}
.block-figure .figure-txt p { 
    font-family: centro, sans-serif;
    font-size: 22px; 
    margin: 10px 100px 10px 0;
}


@keyframes swingHover {


100%{
    transform: translateX(-400px);
}
    

}


@keyframes swingIn {


100%{
    transform: translateX(10px);
}
    

}




@keyframes swing1 {

    25% {
   

   
            transform: translateX(10px);
  }

  50% {
   

   
            transform: translateX(0px);
  }

  75% {
   
   
            transform: translateX(-10px);
  }
 
  
  100% {
   
   
            transform: translateX(0);
  }
}







@keyframes swing2 {

    25% {
   
   
            transform: translateX(-10px);
  }

  50% {
   

   
            transform: translateX(0px);
  }

  75% {
   
    
   
            transform: translateX(10px);
  }
 
  
  100% {
   
   
            transform: translateX(0);
  }
}



/*@keyframes swing3 {

    25% {
   

   
            transform: translateX(10px);
  }

  50% {
   

   
            transform: translateX(0px);
  }

  75% {
   
   
            transform: translateX(-10px);
  }
 
  
  100% {
   
   
            transform: translateX(0);
  }
}*/





.buttons{
    position: absolute;
    width: 240px;
  height: 65px;
  top: 1vw;
  left: 10%;
}


.btnflip {
  position: absolute;
  max-width: 600px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 65px;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 1000px;
  transform-origin: center center;
  display: none;
}

.but1, .but2, .but3, .but4, .but5, .but6, .but7, .but8{
    position: absolute;

}



.btnflip-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 60px;
  font-size: 20px;
  background-color: rgba(255,255,255, .05);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border-radius: 30px;
  text-transform: uppercase;
  color: #fff;
  transition: 1s;
}

.btnflip-item.btnflip__front {
  transform: rotateX(0deg) translateZ(20px);
}
.btnflip:hover .btnflip-item.btnflip__front {
  transform: rotateX(-180deg) translateZ(20px);
}
.btnflip-item.btnflip__back {
  transform: rotateX(180deg) translateZ(20px);
}
.btnflip:hover .btnflip-item.btnflip__back {
  transform: rotateX(0deg) translateZ(20px);
}
.btnflip-item.btnflip__center {
  background: linear-gradient(to left, #06C0F8, #7129bd);
}
.btnflip-item.btnflip__center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #61659D, #2CD2BB);
  border-radius: 30px;
  transform: translateZ(-1px);
}
.btnflip:hover .btnflip-item.btnflip__center {
  transform: rotateX(-180deg);
}


 img{
    max-width: 100%;
}






footer{
    display: flex;
    width: 100vw;
    height: 50px;
    line-height: 50px;
    background-color: #3F3F3F;
    color: white;
    font-size: 20px;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
    padding: 0 4vw;
    transition: all 0.8s;
}





.reserv{
    width: 100vw;
    height: 50px;
}



.but_n1, .but_n2, .but_n3, .but_n4, .but_n5, .but_n6, .but_n7, .but_n8{
    position: absolute;
    left: 90%;

}




h2, h3{
    text-align: center;
    margin-bottom: 30px;
    opacity: 1;
}








canvas {
    position: absolute;
    width: 100vw;
    height: 100%;
    user-select: none;
    touch-action: none;
    content-zooming: none;
    background: #000;
    cursor: crosshair;
}

.rasvlek{
    opacity: 0;
    font-family: VCASGARDG, sans-serif;
    line-height: 2;
    text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #37079C, 0 0 30px #2821D7, 0 0 40px #4188BD, 0 0 55px #43BBB9, 0 0 75px #53ABC4, 4px 2px 8px rgba(43,218,233,0);
}





@media (min-width: 640px) {



.figure5, .figure4, .figure1, .figure3 {
  
  
  
          animation: swing1 5s linear;
   
   
   
           animation-iteration-count: infinite;
   
}



.figure8, .figure7, .figure2, .figure6{
  
  
  
          animation: swing2 5s linear;
   
   
   
           animation-iteration-count: infinite;
   
}


}

@media (max-width: 1280px) {

.btnflip{
    width: 150px;
}

.btnflip-item, .btnflip__back{
    font-size: 14px;
}


}

@media (max-width: 1236px) {

footer{
    height: 10vh;
    line-height: 1.5;
    font-size: 16px;
}


}


@media (max-width: 970px) {
.buttons{
    display: none;
}


.block-figure{
    margin-left: 20px;
}
    .btnflip{
        width: 120px;
    }

    footer{
        flex-wrap: wrap;
    }

}




@media (max-width: 790px) {
   
    
.reserv{
    height: 150px;
}

}



@media (max-width: 560px) {
    .block-figure.figure-txt h3,
    .block-figure .figure-txt p {
        margin-right: 0;
    }
    .block-figure .figure-txt {
        min-height: auto;
        border-bottom: none;
    }
    .block-figure .image-lay {
        display: none;
    }
    .block-figure .image-wrap {
        border: 6px solid #BFE2FF;
        border-top: none;
        border-radius: 0;
        width: 100%;
        height: 160px;
        position: static;
    }  
    .block-figure .image {
        border-radius: 0;
        position: static;
        height: 160px;
        width: 100%;
    }
    .block-figure .front,
    .block-figure .back {
        height: 154px;
        width: 90%;
        position: static;
        border-radius: 0;
        border: none;
    }
    .block-figure .inner {
        transform: translateY(-100%) translateZ(60px);
        top: -6px;
    }
    .block-figure .inner a::before{
        display: none;
    }
    .block-figure .inner a:hover{
        color:#000;
    }
    h1{
        font-size: 30px;
    }

    .rasvlek{

        font-size: 20px;
    }

    .rasvlek1{

        font-size: 15px;
    }
}


@media (max-width: 500px) {

h1{
        font-size: 25px;
    }

    .rasvlek{

        font-size: 15px;
    }

    .rasvlek1{

        font-size: 11px;
    }
.color-bars-list{
    display: none;
}

footer{
height:15vh;
}
}


@media (max-width: 350px) {

footer{
    height: 25vh;
}
}
@media (max-height: 500px) {

footer{
    height: 70px;
    line-height: 20px;
}


}