html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
 }
 body {
  font-family: 'Open Sans', sans-serif;
  padding: 0px;
  margin: 0px;
  overflow-y: none
 }
 h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: #000;
 
 }
 h1, .h1 {
  font-size: 3rem;
  padding-bottom: 30px;
  margin: 0px;
  font-family: 'Neucha', cursive;
  font-weight: 100
 }
 h2, .h2 {
  font-size: 1.6rem;
  padding: 0px;
  padding-bottom: 15px;
  margin: 0px;
  font-family: 'Neucha', cursive;
 }
 h3, .h3 {
  font-size: 1.3rem;
  padding: 0px;
  padding-bottom: 15px;
  margin: 0px;
  font-family: 'Neucha', cursive;
 }
 p {
  font-size: 1rem;
  line-height: 2
 }
 a {
  transition: all .3s ease;
 }
 a:hover {
  text-decoration: none;
  color: #32577F;
 }
 ::selection {
  color: #000;
  /* Цвет текста */
  background: #fff;
  /* Цвет фона */
 }
 ::-webkit-input-placeholder {
  color: #333;
 }
 :-moz-placeholder {
  /* Firefox 18- */
  color: #333;
 }
 ::-moz-placeholder {
  /* Firefox 19+ */
  color: #333;
 }
 :-ms-input-placeholder {
  color: #333;
 }
  
 @media (max-width: 1024px) and (min-width: 200px) {
 
 }
  
 .wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
 }

 .b-preloadin {
background: rgb(31,62,74);
background: radial-gradient(circle, rgba(31,62,74,1) 22%, rgba(5,5,4,1) 100%);
  left: 0%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  z-index: 100;
  transition: all .6s ease-in-out;
  z-index: 101;
  transform-origin: center;
  opacity: 1;

}
  
   .b-preloadin img {
      transform: rotate(120deg);
   }

 .startpage .b-preloadin {
  display: none;
 }
 


 .head {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 30%;
  z-index: 3;
  padding: 3%;
  height: 100vh;
 }

 .section-page {
  width: 70%;
  float: right;
  position: relative;
  min-height: 100vh;
  z-index: 1;
 }

 .page {
  padding: 5%;
  min-height: 100vh;
  position: relative;
 }

  .page * {
    color: #fff;
  }

 .tizer {
  position: fixed;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 }



.main-pic {
  margin-right: -45px;
  position: absolute;
  bottom: -20%;
  z-index: -1
}







 
 .tizer .bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
background: rgb(31,62,74);
background: radial-gradient(circle, rgba(31,62,74,1) 22%, rgba(5,5,4,1) 100%);
 }

 .vodorosli {
  position: fixed;
    top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
   z-index: 2
 }

 .vodorosli .it {
position: absolute;
display: inline-block;
  padding-left: 0px;
 top: 3%;
 left: 14%;
 width: 100px;
 height: 100px;
 text-align: center;
 transition: all 3s ease;
 transform: rotate(0deg);
 }


  .vodorosli .active_move{
      transition: all 3s ease;
      padding-left: 30px;
  }


 .vodorosli .it img {
  display: inline-block;
  vertical-align: middle;
 }

 .vodorosli .it:nth-child(1) {
 top: 3%;
 left: 14%;
 animation-delay: .3s;
 }
  .vodorosli .it:nth-child(2) {
 top: 23%;
 left: 34%;
 animation-delay: .1s;

 }
   .vodorosli .it:nth-child(3) {
 top: 43%;
 left: 66%;
 }

   .vodorosli .it:nth-child(4) {
 top: 78%;
 left: 4%;
 }
 
   .vodorosli .it:nth-child(5) {
 top: 53%;
 left: 54%;
 }

   .vodorosli .it:nth-child(6) {
 top: 60%;
 left: 60%;
 }

   .vodorosli .it:nth-child(7) {
 top: 70%;
 left: 99%;
 }

   .vodorosli .it:nth-child(8) {
 top: 99%;
 left: 2%;
 }

   .vodorosli .it:nth-child(9) {
 top: 32%;
 left: 78%;
 }

   .vodorosli .it:nth-child(10) {
 top: 20%;
 left: 68%;
  animation-direction: alternate-reverse;
 }

   .vodorosli .it:nth-child(11) {
 top: 1%;
 left: 20%;
  animation-delay: .72s;
 }

   .vodorosli .it:nth-child(12) {
 top: 76%;
 left: 27%;
   animation-delay: 2s;
 }

   .vodorosli .it:nth-child(13) {
 top: 4%;
 left: 99%;
   animation-delay: .7s;
 }

   .vodorosli .it:nth-child(14) {
 top: 82%;
 left: 8%;
  animation-delay: 1s;
 }
 
   .vodorosli .it:nth-child(15) {
 top: 3%;
 left: 78%;
 }

   .vodorosli .it:nth-child(16) {
 top: 23%;
 left: 98%;
 }

   .vodorosli .it:nth-child(17) {
 top: 11%;
 left: 99%;
 animation-direction: alternate-reverse;
 }

   .vodorosli .it:nth-child(18) {
 top: 67%;
 left: 12%;
 }

   .vodorosli .it:nth-child(19) {
 top: 2%;
 left: 4%;
 }

   .vodorosli .it:nth-child(20) {
 top: 3%;
 left: 0%;
  animation-direction: alternate-reverse;
 }


 .startpage .it {
  animation: cirkus 20s cubic-bezier(.74, .22, .56, .61) infinite alternate;
 }

 @keyframes cirkus {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}

.tuflia {
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 400px;
  padding: 4%;
  top: 99%;
  left: 99%;
  transform: scale(0.2);
}

 .startpage .tuflia {
  animation: cirkus_tuflia 60s cubic-bezier(.74, .22, .56, .61) infinite alternate;
 }


 @keyframes cirkus_tuflia {
from { transform: rotate(-360deg);  top: 99%; left:99%; }
50% { transform: rotate(360deg); top: -14%; left:-14%;  }
75% { transform: rotate(0deg); top: 10%; left:14%; }
to { transform: rotate(-360deg);  top: 12%; left:99%;  }
}

.ukleyka {
   position: absolute;
  z-index: 1;
  top: 29%;
  left: -120%;
transform: rotateY(0deg);
  
}
 .startpage .ukleyka {
  animation: ukleyka 30s cubic-bezier(.74, .22, .56, .61) infinite normal;
 }


 @keyframes ukleyka {
from {left: 120%; transform: rotateY(0deg); filter: blur(5px); opacity: 0.1;}
10% { transform: rotateY(0DEG);  }
15% { transform: rotateY(0DEG);  }
20% { transform: rotateY(20DEG);  }

 50% {left: -120%; transform: rotateY(0deg); filter: blur(0px); opacity: 0.2 }
 60% {  transform: rotateY(180deg); }
to { left: 120%; transform: rotateY(180deg); filter: blur(5px); opacity: 0.1 }
}


/* .cursor {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #007bff;
  z-index: 1000;
  transform-origin: center center
 }*/

 .logo {
  width: 100px;
display: inline-block;
margin-bottom: 30px;
 }


 .logo img {
  width: 100%;
 }

.navigator {
  padding: 0;
  margin: 0;
}

.navigator li {
  display: block;
  list-style: none;
  margin-bottom: 10px;
}

.navigator li a {
color: #fff;
opacity: 0.7;
transition: all .3s ease;
}

.navigator li a:hover {
opacity: 1;
border-bottom: 1px solid #007bffa6;
}


.contact {
margin-top: 30%;
position: relative;
}

.contact:before {
  position: absolute;
  border: 1px solid #007bffa6;
  border-radius: 15px; 
content: " ";
width: 100%;
padding: 40px;
left: -70px;
top: -15px;
}



.contact p {
  color: #fff;
  opacity: 0.9;
  font-size: 0.8rem;
  line-height: 1;
}

  .phone { 
    font-size: 1.3rem !important;
  font-weight: 300; 
}


.hide-disctiop {
  display: none;
}
 

 .sn {
  position: absolute;
  z-index: 10;
  left: 30px; 
  bottom: 30px;
 }

  .sn a i {
    font-size: 1rem;
    opacity: 0.9;
  }

    .sn a {
      color: #fff;
      margin: 10px;
      display: inline-block;
    }

      .sn a:hover {
      color: #fff;
      text-decoration: none;
    }



 .item-cat {
  margin-bottom: 40px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

  .cat {
    padding-top: 160px;
  }

  .img-box {
  position: relative;
  left: 0%;
  transition: all .3s ease;
  transform: scale(1.01);
}


 .item-cat:hover>  .img-box {
    transform: scale(1.08);
 }



    .des {
    text-align: center;
    margin-top: 15px;
  }

  .anotation {
position: absolute;
right: -100%;
top: 0px;
width: 80%;
transition: all .3s ease;
  }

.open-anotation .anotation {
  right: 0%;
}

.open-anotation .img-box {
  position: relative;
  left: -130%;
}



.anotation p {
  font-size: 0.9rem;
}


.item_photo {
  width: 110px;
 height:110px;
overflow: hidden;
border-radius: 50%;
  border: 3px solid #007bff;
  display: inline-block;
  vertical-align: to;
  margin: 10px;
  margin-top: 30px;
}

.item_photo img {
  width: 150%;
}


.img-block {
  padding: 10%;
}
 
.desc span {
    font-family: 'Neucha', cursive;
    font-size: 2rem;
    color: #fff;
}

.desc {
  font-size: 0.9rem;
}

.copy {
display: inline-block;
margin-right: 30px;
color: #fff;
font-size: 0.7rem;
}

.developer {
  position: absolute;
  bottom: 30px;
  right: 60px;
z-index: 1;

}

.video .desc p{
font-size: 0.8rem;
margin-top: 30px;
}


 .button-menu {
  display: none;
 }

 .phone-mob-veiw {
  display: none;
 }

 @media (max-width: 1024px) and (min-width: 200px) {
 .head {
  width: 100%;
  height: 71px;
  z-index: 10;
  background: rgba(0,0,0,0.8);
 }

.logo {
 z-index: 4
}

.logo img {
  width: 50%;
}



 .button-menu {
  position: relative;
  float: right;
  top: 13px;
  right: 15px;
  width: 60px;
  height: 60px;
  padding: 5px;
  border: none;
  cursor: pointer;
  transition: all .3s ease-in-out;
  z-index: 200;
  display: block;
  }
 .button-menu span {
  background: #fff;
  display: block;
  width: 100%;
  height: 2px;
  margin: 0px 0px 3px 0px;
  transition: all .3s ease;
 }


 .button-menu span:nth-child(1) {
width: 100%;
 }
 .button-menu span:nth-child(2) {
width: 60%;
 }
 .button-menu span:nth-child(3) {
width: 80%;
 }

  .button-menu:hover > span {
    width: 100%;
  } 


 .open-menu span:nth-child(1) {
  opacity: 0;
 }
 .open-menu span:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: center;
  width: 100%;
 }
 .open-menu span:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: center;
  margin-top: -5px;
  margin-left: 0px;
  width: 100%;

 }


.navigator {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: -120%;
  top: 0px;
background: rgb(31,62,74);
background: radial-gradient(circle, rgba(31,62,74,1) 22%, rgba(5,5,4,1) 100%);
padding: 30% 20%;
transition: all .3s ease
}

.open-menu .navigator {
    left: 0%;
    background: rgb(31,62,74);
background: radial-gradient(circle, rgba(31,62,74,1) 22%, rgba(5,5,4,1) 100%);
}

.navigator li a {
  font-size: 1.2rem;
}

.section-page {
  width: 100%;
  margin-top: 120px;
  float: none;
}




.contact {
  display: none;
}

.sn {
    bottom: 13px;
    left: 27%;
}

.h1 {
  font-size: 2rem;
}

.item_photo {
  width: 85px;
  height: 85px;
}

.developer {
  position: relative;
  right: auto;
  width: 100%;
    text-align: center;
    margin-top: 60PX;
}

.anotation p {
    font-size: 0.6em;
}

 
 .hide-disctiop {
  display: block;
  position: absolute;
  top: 13px;
  right:  30%;
  background: #007bff;
  color: #fff;
  padding: 10px;
 }

.hide-disctiop i {
  font-size: 1.6rem;
}

.phone-mob-veiw {
  display: block;
  position: relative;
  z-index: 10;
}
.phone-mob-veiw *{
  color: #fff;
}

.ukleyka img{ 
width: 150px;
}

 }