@charset "UTF-8";
@import "../fonts/fonts.css?v.01";
body{
    box-sizing: border-box;
    height: 100%!important;
    font-family: "Formular", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.03em;
    color: var(--black);
    background: var(--white);
    margin: 0;
    padding: 0;
    --black: #141414;
    --white: #f4f4f4;
    --gold: #BFA676;
    --border: 1px solid rgba(36, 36, 36, 0.1);
}
div, h1, h2, h3, h4, p, ul, ol, li, a, input, textarea, label, button, span{
  box-sizing: border-box;
}
a{
  color: var(--black);
  cursor: pointer;
  transition: 0.3s;
}
a, a:hover{
  text-decoration: none;
}
p{
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3, h4, p, ul, ol{
    margin: 0;
}
ul, ol{
    list-style: none;
    margin: 0;
    padding: 0;
}
ol {
  counter-reset: list;
}
img{
    max-width: 100%;
}
input, button, textarea{
  font-family: "Formular", sans-serif;
  outline: none;
  background: transparent;
}
form{
  width: 100%;
}
textarea{
  resize: none;
}
*::-moz-selection {
  color: var(--black);
  background-color: var(--gold);
}
*::selection {
  color: var(--black);
  background-color: var(--gold);
}
.container{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
.wrapper{
  position: relative;
}
@media (min-width: 576px){.container{max-width: 540px;}}
@media (min-width: 768px){.container{max-width: 720px;}}
@media (min-width: 1024px){.container{max-width: 990px;}}
@media (min-width: 1200px){.container{max-width: 1140px;}}
@media (min-width: 1300px){.container{max-width: 1240px;}}
@media (min-width: 1400px){.container{max-width: 1340px;}}
@media (min-width: 1500px){.container{max-width: 1440px;}}
@media (min-width: 1880px){.container{max-width: 1840px;}}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.flex.between{
    justify-content: space-between;
}
.flex.align-center{
  align-items: center;
}
.d-none{
  display: none;
}
.ttl.lg{
  font-weight: 300;
  font-size: 70px;
  line-height: 0.92;
}
.ttl.slg{
  font-weight: 300;
  font-size: 60px;
  line-height: 1;
}
.ttl.md{
  font-weight: 300;
  font-size: 40px;
  line-height: 1; 
}
.ttl.sm{
  font-weight: 300;
  font-size: 22px;
}
.ttl.ssm{
  font-weight: 300;
  font-size: 20px;
}
.fz21{
  font-weight: 300;
  font-size: 21px;
}
.subttl{
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
}
.subttl .ttl{
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
.centered{
  text-align: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}
.white{
  color: var(--white);
}

.mt140{margin-top: 140px;}
.mt50{margin-top: 50px;}
.pt140{padding-top: 140px;}
.mb140{margin-bottom: 140px;}
.mb110{margin-bottom: 110px;}
.mb100{margin-bottom: 100px;}
.mb60{margin-bottom: 60px;}
.mb40{margin-bottom: 40px;}
.mb35{margin-bottom: 35px;}
.mb30{margin-bottom: 30px;}
.mb25{margin-bottom: 25px;}
.mb20{margin-bottom: 20px;}
.mb15{margin-bottom: 15px;}
.mb10{margin-bottom: 10px;}

.padding-section{
  padding: 7% 0;
}
@media(min-width: 1700px){
  .padding-section{padding: 140px 0;}
}
.img-absolute{
  position: absolute;
  display: block;
}
.img-box{display: flex; flex-direction: column;}

@media (min-width: 1024.1px){
   .arr-caption{
    position: absolute;
    padding-bottom: 25px;
  } 
  .arr-caption:after{
    content: '';
    width: 100%;
    height: 70px;
    transform: skew(45deg);
    position: absolute;
    top: 100%;
    left: 35px;
    border-top: var(--border);
    border-right: var(--border);
  }
  .arr-caption.right:after{
    transform: skew(-45deg);
    left: auto;
    right: 35px;
    border-right: none;
    border-left: var(--border);
  }
}

.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 160px;    
  height: 50px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  color: var(--white);
  cursor: pointer;
  transition: 0.4s;
  background: var(--black);
  position: relative;
  outline: none;
  border: none; 
}
.btn:hover{
  background: #313131;
}
.btn.blur{
  color: var(--black);
  background: rgba(244, 244, 244, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(244, 244, 244, 0.5);
}
.btn.blur:hover{
  background: rgba(244, 244, 244, 0.1);
  border-color: #F4F4F4;
}
.btn.white{
  background: var(--white);
  color: var(--black);
}
.btn.white:hover{
  background: #E4E4E4;
}
.btn.grey{
  color: var(--black);
  background: #D6D6D6;
}
button.btn{
  max-width: 100%;
}

.modal {
  display: none;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 1200;  
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  outline: 0;
}
.modal-inner{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,0,0,.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal-wrapper{
  background: #fff;
  padding: 40px;
  position: relative;
  width: calc(100% - 30px);
  max-width: 550px;
  overflow-y: auto;  
}
.modal-wrapper .close{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: .5;
  color: #000;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  transition: .3s;
}
.uForm__preload {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: url(/images/loading.svg) no-repeat center / 120px rgba(0, 0, 0, .7);
}
.bg-white{
  background: #fff;
}
.bg-lightgey{
  background: #F4F4F4;
}


.breadcrumb, .breadcrumb li{
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #828282;
}
.breadcrumb .divider{
  margin: 0 5px;
}
.breadcrumb{
    flex-wrap: wrap;
}
.breadcrumb span{
    color: #828282;
}
.pagination-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.pagination-list li a, .pagination-list li span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;   
    font-size: 14px;
    line-height: 1; 
    margin: 5px;
    transition: 0.5s;
}
.pagination-list li a{
    color: #000;
}
.pagination-list li span{
    color: #E44A51;
}
.pagination-list li.active span, .pagination-list li:hover a, .pagination-list li.arrow:hover a{
    background: #E44A51;
    color: #fff;
}
.pagination-list li.arrow a{
  background: #F8F8F8;
}
.pagination-list li.arrow span{
  color: #E1E1E1;
}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #F8F8F8;}
::-webkit-scrollbar-thumb {background-color:  var(--black); border-radius: 3px;}
html, body, div, * {scrollbar-width: thin; scrollbar-color:  var(--black) #F8F8F8;}

.burger-menu {
    width: 40px;
    height: 30px;
    position: relative;
    z-index: 1200;
    cursor: pointer;
    padding: 5px;
    margin-left: auto;
}

.burger-menu span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--gold);
    position: absolute;
    right: 0;
    opacity: 1;
    transition: all linear 0.3s;
}
.burger-menu span:first-child {
    top: 7px;
}
.burger-menu span:nth-child(2), .burger-menu span:nth-child(3) {
    top: 14px;
    width: 19px;
}
.burger-menu span:last-child {
    top: 21px;
}
.burger-menu.active span:first-child {
    top: 0;
    opacity: 0;
}
.burger-menu.active span:nth-child(2), .burger-menu.active span:nth-child(3) {
  width: 30px;
  background: rgba(20, 20, 20, 0.5);
}
.burger-menu.active span:nth-child(2) {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);

}
.burger-menu.active span:nth-child(3) {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
}
.burger-menu.active span:last-child {
    top: 40px;
    opacity: 0;
}

.body-wrapper{
  min-height: 100vh;
  display: flex;
  position: relative;
  flex-direction: column;
  overflow-x: hidden;
}
.main{flex: 1;}

#toTop {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: var(--white);
  background-color: rgba(191, 166, 118, 0.3);
  width: 80px;
  height: 50px;
  border-radius: 50%;
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 20;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s, background-color 0.5s;
  transform: rotate(20deg);
}
#toTop:before{
  transform: rotate(-20deg);
}
#toTop:hover{
  background-color: rgba(191, 166, 118, 0.5);
}
#toTop.show {
  visibility: visible;
  opacity: 1;
}
.header{
  position: relative;    
  width: 100%;
  height: 78px;    
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  background: var(--black);
  transition: left linear .4s;
}
.header.sticky{
  position: fixed;
  animation: flash 0.5s linear 1;
  background: rgba(20,20,20,.95);
}

@keyframes flash {
  from{opacity: 0; transform: translateY(-100%);}
  to {opacity: 1; transform: translateY(0);}
}
.burger-container{
  display: flex;
  align-items: center;
  position: fixed;
  height: 0;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 10000;
}
.header .logo{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  color: var(--gold);
  margin: 8px calc(50% - 41px) 0 0;
}
.header-tm{
  width: 50px;
  border-radius: 20px;
  margin-right: 20px;
}
.mod-languages{
  display: flex;
  align-items: center;
}
.mod-languages a, .mod-languages span {
  font-weight: 400;
  font-size: 14px;
  margin-right: 12px;
}
.header .mod-languages a, .header .mod-languages span{
  color: var(--gold);
}
.mod-languages a{
  opacity: .5;
}
.mod-languages a:hover{
  opacity: 1;
}
.main-menu{  
  background: var(--white);
  overflow-y: auto;  
}
.main-menu .container{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}
.main-menu .top{
  min-height: 80px;
}
.main-menu .logo{
  display: flex;
  align-items: center;
  font-size: 45px;
  margin: 8px 15px 0 0;
}
.main-menu .center{
  flex: 1;
}
.main-menu .center .img-wrap{
  width: 37.7%;
  height: 100%;
  background: url(/images/menu-img.jpg) no-repeat center / cover;
}
.main-menu .mod-languages{
  margin-right: 75px;
}
.main-menu .mod-languages a, .main-menu .mod-languages span{
  color: var(--black);
}
.main-menu .menu{
  width: 50%;
}
.main-menu .menu li{
  display: block;  
}
.main-menu .menu li:not(:last-child){
  margin-bottom: 20px;
}
.main-menu .menu a{
  display: block;
  font-size: 40px;
  line-height: 1;
  color: var(--black);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  position: relative;
}
.main-menu .menu a:after{
  content: '';
  width: 30px;
  height: 1px;
  background: #8D8D8D;
  position: absolute;
  left: 0;
  bottom: -1px;
  transition: 0.6s;
}
.main-menu .menu a:hover:after{
  background: var(--black);
  width: 100%;
}
.main-menu .menu:hover a{
  color: #9A9A9A;
}
.main-menu .menu:hover a:hover{
  color: var(--black);
}
.main-menu .bottom .links{
  flex: 1;
  margin-right: 10px;
}
.main-menu .bottom .links a{
  font-weight: 400;
  font-size: 13px;
  color: var(--black);
  text-transform: uppercase;
}
.social a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 13px;
}
.main-menu .social a{
  margin-left: 15px;
}
.ww{
  opacity: 0;
  visibility: hidden;
  transition-duration: .7s;
}
.ww.fadeUp{
  transform: translateY(200px);
}
.ww.fadeLeft{
  transform: translateX(-100%);
}
.ww.fadeRight{
  transform: translateX(100%);
}
.ww.zoomIn{
  transform: scale3d(0.3, 0.3, 0.3);
}
.ww.dn{
  transform: translate(0);
  opacity: 1;
  visibility: visible;
  transition-duration: 1s;
}


/*===============================*/
.main-intro{
  background: url(/images/main/intro-1.jpg) no-repeat bottom / cover var(--white);
  padding: 8% 0 19.5%;
}
.main-intro .ttl{
  max-width: 60%;
  transition-duration: 1.2s;
}
.main-intro .btn-box{
  margin: 0 -10px;
}
.main-intro .btn{
  margin: 0 10px;
}
.main-intro .btn-box{
  transition-delay: .7s;
}
.main-caption{
  background: #F4F4F4;
}
.main-caption .wrapper{
  border-bottom: 1px solid var(--gold);
  padding: 100px 0;
}
.main-caption .icon-coco{
  max-width: 500px;
}
.main-caption .icon-coco:before{
  display: block;
  font-size: 34px;
  color: var(--gold);
  margin: 0 auto 25px;
}
.main-products{
  background: #F4F4F4;
}
.main-products .prod-item{
  width: calc(50% - 10px);
}
.main-products .prod-item .subttl{
  text-transform: none;
}
.main-products .prod-item .img-box{
  min-height: 520px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
}
.main-products .prod-item .img-box img{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
} 
.main-products .prod-item .img-box .ttl.md{
  position: absolute;
  left: 20px;
  bottom: 30px;
}
.main-products .prod-item .img-info{
  width: 337px;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: -337px;
  background: rgba(244, 244, 244, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: .7s;
  padding: 80px 40px;
}

.main-products .prod-item:hover .img-info{
  right: 0;
}
.main-products .prod-item .img-info .item:not(:last-child){
  border-bottom: var(--border);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.main-products .prod-item .add-info{
  flex-wrap: nowrap;
}
.main-products .prod-item .add-info .item:not(:last-child){
  margin-right: 15px;
}
.main-material{
  background: linear-gradient(104.47deg, #EBEBEB 0%, rgba(240, 240, 240, 0) 49.49%);
}
.main-material .ttl.lg{
  max-width: 1030px;
}
.main-material .wrapper{
  max-width: 1390px;
  margin-left: auto;
  margin-right: auto;
}
.main-material .img-wrap{
  width: 39%;
  position: relative;
  margin: 0 auto;
}
.main-material .img-wrap img{
  display: block;
  width: 100%;
}
.main-material .img-wrap .img-absolute{
  width: 64%;
  right: -1%;
  bottom: -3%;
  transition-delay: 1s;
  transition-duration: 2s;
}
.main-material .img-wrap .coconut-str{
  display: block;
  position: absolute;
  width: 25%;
  top: -3%;
  right: -12.5%;
}
.main-material .capt1{
  width: 25%;
  top: 3%;
  left: 0;
  transition-delay: .3s;
}
.main-material .capt2{
  width: 17%;
  top: 65%;
  left: 5%;
  transition-delay: .5s;
}
.main-material .capt3{
  width: 25%;
  top: 25%;
  left: 75%;
  transition-delay: .7s;
}
.main-material .btn.blur{
  position: absolute;
  top: 70%;
  left: 75%;
  border-color: rgba(170, 170, 170, 0.5);
}
.main-material .btn.blur:hover{
  border-color: rgba(170, 170, 170, 1);
}
.main-way .item{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: calc(50% - 10px);
  border-radius: 8px;
  padding: 60px 40px 60px 15px;
}
.main-way .way{
  background: url(/images/main/way-bg.png) no-repeat left bottom var(--black);
}
.main-way .tech{
  background: url(/images/main/tech-bg.png) no-repeat left top var(--white);
  border: var(--border);
}
.main-way .item .img-box{
  width: 46%;
  height: 100%;
  border-radius: 9px;
  overflow: hidden;
} 
.main-way .item .img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-way .item .text-box{
  width: 43%;
}
.main-way .icon-more{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);  
}
.main-way .icon-more:before{
  order: 2;
  color: var(--black);
  transition: inherit;
  padding-bottom: 5px;
}
.main-way .icon-more:hover:before{
  transform: translateX(10px);
}
.main-way .way .icon-more:before{
  color: var(--white);
}
.main-way .icon-more span{
  position: relative;
  padding-bottom: 5px;
}
.main-way .icon-more span:after{
  content: '';
  width: 0;
  height: 1px;
  background: var(--gold);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: .4s;
  margin: 0 auto;
}
.main-way .icon-more:hover span:after{
  width: 100%;
}
.main-beton .text-box{
  width: 38%;
  max-width: 710px;
  padding: 50px 0;
  margin: 0 6% 0 auto;
}
.main-beton .ttl.md{
  position: relative;
}
.main-beton .ttl.md:after{
  content: '';
  width: 280px;
  height: 70px;
  transform: skew(-45deg);
  position: absolute;
  top: -30%;
  right: -340px;
  border-bottom: var(--border);
  border-right: var(--border);
  z-index: 5;
}
.coco-list li{
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  padding-left: 24px;
}
.coco-list li:not(:last-child){
  border-bottom: var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.coco-list li:before{
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  content: "\e900";
  font-size: 16px;
  color: var(--gold);
  position: absolute;
  left: 0;
  top: 3px;
}
.main-beton .img-box{
  width: calc(50% - 10px);
  position: relative;
}
.main-beton .main-image{
  display: block;
  width: 100%;
}
.main-beton .beton1{
  width: 18.4%;
  top: 31%;
  left: 28%;
}
.main-beton .beton2{
  width: 82%;
  top: 53%;
  right: 0;
  transition-delay: .3s;
}
.main-beton .beton3{
  width: 10%;
  top: 52%;
  left: 25%;
  transition-delay: .6s;
}
.main-beton .arr-caption{
  position: absolute;
  top: 70%;
  left: 10%;
  transition-delay: .9s;
}    
.main-beton .arr-caption:after{
  content: '';
  width: 180px;
  height: 70px;
  transform: skew(45deg);
  position: absolute;
  top: -25px;
  bottom: auto;
  left: 35px;
  border-top: var(--border);
  border-right: var(--border); 
}

/*===============================*/

.main-form-section{
  background: url(/images/form-bg.jpg) no-repeat right center / cover var(--gold);
  position: relative;
}
.main-form-section .wrapper{
  width: calc(50% + 10px);
  height: 100%;
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 110px 0;
}
.main-form-section .form-box{
  width: 76%;
  max-width: 710px;
  margin: 0 12% 0 auto;
}
.input{
  width: 100%;
  border: none;
  font-size: 22px;
  color: var(--black);
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  transition: .4s;
  padding: 4px 0;
}
.input:focus{
  border-color: var(--black);
}
.input::placeholder{
  color: #9A9A9A;
}
.main-form-section .text{
  opacity: .8;
}
#mainForm .input{
  color: rgba(244, 244, 244, 0.8);
  border-color: rgba(244, 244, 244, 0.5);
}
#mainForm .input:focus{
  color: var(--white);
  border-color: var(--white);
}
#mainForm .btn{
  background: rgba(244, 244, 244, .05);
  color: var(--white);
  border: 1px solid rgba(244, 244, 244, .2);
}
#mainForm .btn:hover{
  border-color: rgba(244, 244, 244, .5);
}
.checkbox{
  position: relative;
  max-width: max-content;
  margin-top: 5px;
  margin-left: auto;
}
.checkbox input{
  width: 10px;
  height: 10px;
  opacity: 0;
  position: absolute;
  top: -2px;
  left: -4px;  
}
.checkbox label{
  display: flex;
  align-items: center;
  color: #9A9A9A;
  cursor: pointer;
}
.checkbox label:before{
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: #D9D9D9;
  border-radius: 2px;
  transition: .4s;
  margin-right: 10px;
}
.checkbox input:checked ~ label:before{
  background: var(--black);
}
.footer{
  background: var(--black);
}
.footer .top{
  padding: 120px 0 180px;
}
.footer .logo-box{
  width: 340px;
  margin-right: auto;
}
.footer .logo{
  display: flex;
  font-size: 50px;
  max-width: max-content;
  color: var(--gold);
}
.footer .logo-box .text{
  font-size: 13px;
  color: rgba(244, 244, 244, 0.8);  
}
.footer .social a{
  border-color: #5E4729;
  margin-right: 15px;
}
.footer .social a:hover{
  border-color: var(--gold);
}
.footer-prod{
  width: 21%;
  min-width: 300px;
}
.footer .link, .footer .menu a{
  display: block;
  font-size: 13px;
  color: rgba(244, 244, 244, 0.8);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer .link:hover, .footer .menu a:hover{
  color: var(--gold);
}
.footer-prod .link{
  width: 120px;
  margin-right: 20px;
}
.footer-prod .link img{
  display: block;
  width: 100%;
  opacity: .1;
  transition: 0.6s;
  margin-bottom: 14px;
}
.footer-prod .link:hover img{
  opacity: 1;
}
.footer-menu, .footer-contacts{
  width: 19%;
  border-left: 1px solid rgba(244, 244, 244, 0.1);
  padding-left: 40px;
}
.footer .bottom{
  border-top: 1px solid rgba(244, 244, 244, 0.1);
  padding: 19px 0;
}
.footer .copy{
  color: #5E4729;
}

/*==============================*/


.about-intro-img{
  background: url(/images/about/intro.jpg) no-repeat center / cover;
  min-height: 200px;
  padding-bottom: 23.4%;
}
.about-intro{
  background: var(--black);
}
.logo-slider{
  width: 47.4%;
  max-width: 910px;
  margin: 0 auto 120px;
}
.logo-slider .img-wrap{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 8px;
  padding-bottom: 44.5%;
}
.lg-backdrop {
  z-index: 10000;
}
.lg-outer {
  z-index: 10050;
}
.about-acc .item{
  margin-bottom: 10px;
}
.about-acc .title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  color: #C7C7C7;
  cursor: pointer;
  transition: .5s;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}
.about-acc .title.open, .about-acc .title:hover{
  color: var(--white);
}
.about-acc .title:after{
  content: '';
  width: 30px;
  height: 1px;
  background: var(--white);
  position: absolute;
  left: 0;
  bottom: -1px;
  transition: inherit;
}
.about-acc .title.open:after{
  width: 100%;
}
.about-acc .arr{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  width: 60px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  transition: inherit;
  transform: rotate(20deg);
  margin-left: 10px;  
}
.about-acc .open .arr{
  transform: rotate(-20deg);
  background: rgba(244, 244, 244, 0.05);
}
.about-acc .arr i{
  transform: rotate(-20deg);
  position: relative;
  transition: inherit;
}
.about-acc .open .arr i{
  transform: rotate(20deg);
}
.about-acc .arr i:before, .about-acc .arr i:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -5px;
  display: block;
  width: 9px;
  height: 2px;
  transition: inherit;
  background-color: var(--black);
  transform: translate(-2.5px, -50%) rotate(45deg);
}
.about-acc .arr i:after{
  transform: translate(2.5px, -50%) rotate(-45deg);
}
.about-acc .open .arr i:before{
  transform: translate(-2.5px, -50%) rotate(-45deg);
  background: var(--white);
} 
.about-acc .open .arr i:after{
  transform: translate(2.5px, -50%) rotate(45deg);
  background: var(--white);
}
.about-acc .content{
  display: none;
  padding-top: 100px;
  margin-bottom: 40px;
}
.about-acc .content .text-box{
  color: var(--white);
  max-width: 1160px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.about-acc .content .text-box a{
  color: var(--white);
  text-decoration: underline;
}
.about-acc .content .text-box a:hover{
  color: var(--gold);
}
.about-acc .content img{
  display: block;
  border-radius: 8px;
  margin-right: auto;
  margin-left: auto;
}
.about-slider{
  position: relative;
}
.about-slider .swiper-slide{
  width: auto!important;
}
.about-slider .swiper-slide img{
  height: auto;
  max-height: 100%;
}
.about-slider .swiper-slide.vid{
  position: relative;
}
.about-slider .swiper-slide.vid:before{
  content: ''; 
  position: absolute; width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: url(/images/play.svg) no-repeat center rgba(0, 0, 0, .7);
}
.about-slider:before, .about-slider:after{
  content: '';
  width: 320px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
}
.about-slider:before{
  left: -15px;
  background: linear-gradient(90deg, #141414 0%, rgba(20, 20, 20, 0) 100%);
}
.about-slider:after{
  right: -15px;
  background: linear-gradient(-90deg, #141414 0%, rgba(20, 20, 20, 0) 100%);
}
.about-slider .swiper-container{
  width: 67.7%;
  height: 480px;
  margin-left: auto;
  margin-right: auto;  
}
.about-team{
  background: linear-gradient(104.47deg, #EBEBEB 0%, rgba(240, 240, 240, 0.5) 49.49%);
}
.team-slider .swiper-container{
  overflow: hidden;
}
.team-slider .img-box{
  transition: .5s;
  filter: grayscale(100%);
  margin-bottom: 40px;
}
.team-slider .swiper-slide:hover .img-box{
  filter: grayscale(0);
}
.team-slider .name{
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
}
.team-slider .position{
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
}
.team-slider-nav{
  width: calc(100% + 60px);
  height: 0;
  position: absolute;
  top: 27%;
  left: -30px;
  z-index: 2;
}
.slider-prev, .slider-next{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  width: 60px;
  height: 40px;
  border-radius: 50%;
  transform: rotate(-20deg);
  cursor: pointer;
}
.slider-next{
  transform: rotate(20deg);
}
.slider-prev:before{
  transform: rotate(20deg);
}
.slider-next:before{
  transform: rotate(-20deg);
}
.swiper-button-disabled{
  cursor: default;
  opacity: .5;
}
.slider-pagination{
  display: flex;
  justify-content: center;
  background: #D9D9D9;
  max-width: max-content;
  border-radius: 1px;
  margin: 0 auto;
}
.slider-pagination .swiper-pagination-bullet{
 width: 235px;
 height: 2px;
 border-radius: 1px;
 background: #D9D9D9;
 transition: 0.4s;
}
.slider-pagination .swiper-pagination-bullet-active{
  background: var(--gold);
}
.gallery-slider{  
  overflow: hidden;
  position: relative;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
.gallery-slider .swiper-slide{
  max-height: calc(100vh - 120px);
  border-radius: 40px;
  overflow: hidden;
}
.gallery-slider img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
} 
.gallery-slider-nav{
  width: 100%;
  height: 0;
  position: absolute;
  top: 47%;
  left: 0;
  z-index: 2;
}
.about-caption .icon-coco{
  max-width: 1070px;
}
.about-caption .icon-coco:before{
  display: block;
  font-size: 34px;
  color: var(--gold);
  margin: 0 auto 25px;
}
.tech-intro .ttl.lg{
  max-width: 1200px;
}
.tech-intro .img-box{
  max-width: 1060px;
}
.tech-intro .img-box img{
  border-radius: 8px;
}
.tech-tabs .tabs-flex{
  display: flex;
  justify-content: space-between;
  max-width: 910px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  margin-left: auto;
  margin-right: auto;
}
.tech-tabs .tabs-flex .tab{
  width: calc(50% - 10px);
  text-align: center;
  color: #9A9A9A;
  cursor: pointer;
  transition: .5s;
  position: relative;
  padding-bottom: 10px;
}
.tech-tabs .tabs-flex .tab:hover,
.tech-tabs .tabs-flex .tab.active{
  color: var(--black);
}
.tech-tabs .tabs-flex .tab:after{
  content: '';
  width: 0;
  height: 1px;
  background: var(--black);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  transition: inherit;
  margin: 0 auto;
}
.tech-tabs .tabs-flex .tab.active:after{
  width: 100%;
}
.tech-tabs .tab-content{
  max-width: 1500px;
  margin: 0 80px 80px;
}
.tech-tabs .inner-tabs{
  width: 37.3%;
}
.tech-tabs .tab-link{
  display: block;
  font-size: 22px;
  color: #9A9A9A;
  position: relative;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  transition: .5s;
  cursor: pointer;
  padding-left: 40px;
  margin-bottom: 20px;
}
.tech-tabs .tab-link:hover, .tech-tabs .tab-link.active{
  color: var(--black);  
}
@media(min-width:768.1px){
  .tech-tabs .tab-link.active:not(:last-child){
    margin-bottom: 60px;
  }
}
.tech-tabs .tab-link:before{
  counter-increment: list;
  content: '0'counter(list)'/';
  font-size: 60%;
  transition: inherit;
  position: absolute;
  left: 0;
  top: 0;
}
.tech-tabs .tab-link:after{
  content: '';
  width: 20px;
  height: 1px;
  background: #9A9A9A;
  position: absolute;
  left: 0;
  bottom: -1px;
  transition: inherit;
}
.tech-tabs .tab-link.active:after{
  width: 100%;
  background: var(--black);
}
.tech-tabs .text-box{
  width: 43.5%;
}
.tech-tabs .inner-tab-content img{
  display: block;
  width: 100%;
  border-radius: 8px;
}
.tech-patents{
  background: linear-gradient(104.47deg, #EBEBEB 0%, rgba(240, 240, 240, 0) 49.49%);
}
.tech-patents .wrapper{
  border-bottom: 1px solid var(--gold);
}
.tech-patents .text{
  max-width: 980px;
}
.tech-patents .patents-flex{
  max-width: 1060px;
}
.tech-patents .patents-flex a{
  display: flex;
  width: calc(25% - 15px);
  filter: grayscale(100%);
}
.tech-patents .patents-flex a:hover{
  filter: grayscale(0);
}
.tech-patents .patents-flex a img{
  border-radius: 8px;
}
.stores .ttl.lg{
  max-width: 1296px;
}
.stores .screen{
  display: block;
  width: 1060px;
  max-width: 100%;
  background: url(/images/stores/bg.jpg) no-repeat center / cover #141414;
  position: relative;
  border-radius: 20px 20px 0px 0px;
  padding: 50px 20px 35px;
}
.stores .screen .planet{
  display: block;
  width: 100%;
  max-width: 330px;
  margin: 0 auto 7px;
}
.stores .screen .ttl{
  color: #BFA676;
  font-size: 35px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 10px;
}
.stores .screen .caption{
  color: #C3C3C3;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}
.stores .tm{
  font-size: 24px;
  font-weight: 500;
}
.stores .tm img{
  width: 50px;
  flex-shrink: 0;
  border-radius: 20px;
  margin-right: 20px;
}
.warranty-ttl{
  position: relative;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}
.warranty-wrapper{
  max-width: 1680px;
  margin: 0 auto;
}
.warranty-ttl:after{
  content: '';
  width: 310px;
  height: 1px;
  background: var(--black);
  position: absolute;
  left: 0;
  bottom: -1px;
}
.warranty-txt{
  width: calc(50% - 10px);
  margin-left: auto;
}
.warranty-txt p{
  max-width: 652px;
}
.warranty-txt ul{
  max-width: 690px;
}
.warranty-txt a{
  text-decoration: underline;
}
.warranty-txt a.ico-pdf{
  display: flex;
}
.warranty-txt a.ico-pdf:before{
  content: '';
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url(/images/pdf.svg) no-repeat center / contain;
  margin-right: 15px;
}
.warranty-wrapper .form-ttl{
  display: flex;
  align-items: center;
}
.warranty-wrapper .form-ttl:before{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  font-size: 80%;
  color: var(--gold);
  margin-right: 20px;
}
/*====================*/

.hydra-intro{
  padding: 13% 0 90px;
}
.hydra-intro .ttl.lg{
  transition-delay: .3s;
  transition-duration: 1.2s;
}
.hydra-intro .ttl.lg b{
  display: block;
  margin-bottom: 8px;
}
.hydra-intro .img-box{
  justify-content: flex-end;
  width: 50%;
  max-width: 1000px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.hydra-intro .img-box img{
  width: 100%;
  position: relative;
  z-index: 2;
}
.hydra-intro .img-box .wave{
  position: absolute;
  width: 85%;
  left: -6%;
  bottom: 22.5%;
  z-index: 1;
  transition-duration: 2s;
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(0.55);
  } 
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.55);
  }
}
.hydra-intro .btn{
  transition-duration: 1.6s, .5s;
}
.hydra-solution{
  background: var(--black);  
}
.hydra-solution .wrapper{
  max-width: 1120px;
  overflow: hidden;
  padding: 140px 0 80px;
  margin-left: auto;
  margin-right: auto;
}
.hydra-solution .ttl-box{
  position: relative;
}

.hydra-solution .solution-flex{
  align-items: flex-start;
}
.hydra-solution .caption{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  font-size: 21px;
  color: rgba(244, 244, 244, 0.8);
  padding: 30px;
}
@media (min-width:768.1px){
  .hydra-solution .caption:first-child{
    transition-delay: .5s;
    margin-top: 190px;
  }
}
.hydra-solution .img-absolute{
  width: 30%;
  left: 0;
  right: 0;
  bottom: -70%;
  margin: 0 auto;
}
.hydra-slider-1{
  background: #0E0E0E;
  overflow: hidden;
  padding: 90px 0 150px;
}
.hydra-slider-1 .text-slider{
  position: absolute;
  width: 34%;
  top: 30%;
  left: 0;
}
.hydra-slider-1 .text-box{
  opacity: 0;
  visibility: hidden;
  transform: translateX(-400px);
  transition: 1.4s;
}
.hydra-slider-1 .swiper-slide-active .text-box{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.hydra-slider-1 .text-box p{
  font-size: 21px;
  color: rgba(244, 244, 244, 0.8);
}
.hydra-slider-1 .img-slider{
  position: relative;
  z-index: 2;
}
.hydra-slider-1 .img-slider .swiper-slide{
  position: relative;
  opacity: 0!important;
  transition: .8s;
  padding-bottom: 40%;
}
.hydra-slider-1 .img-slider .swiper-slide-prev,
.hydra-slider-1 .img-slider .swiper-slide-next {
  opacity: .1!important;
}
.hydra-slider-1 .img-slider .swiper-slide-active{
  opacity: 1!important;
}
.hydra-slider-1 .img-slider .swiper-slide img{
  position: absolute;
  height: 100%;
  border-radius: 40px;
  right: 0;
  top: 0;
}
/*.hydra-slider-1 .img-slider .swiper-slide-active img{
  transform: translateX(0);
  opacity: 1;
}*/
.hydra-slider-1 .img-slider-nav{
  display: none;
  width: 100%;
  height: 0;
  position: absolute;
  top: 47%;
  left: 0;
  z-index: 2;
}
.hydra-dynam{
  background: var(--black);
}

.hydra-dynam .content-box{
  background: var(--white);
  border-radius: 40px;
  overflow: hidden;
  padding: 60px 102px 50px;
}
.hydra-dynam .wrapper{
  padding-bottom: 31.5%;
}
.hydra-dynam .text-box{
  text-align: center;
  max-width: 575px;
  margin: 0 auto;
}
.hydra-dynam .img-absolute{
  z-index: 2;
}
.hydra-dynam .dyn-l{
  width: 16.5%;
  left: 0;
  bottom: 0;
  transition-delay: .3s;
}
.hydra-dynam .dyn-r{
  width: 14.5%;
  right: 2%;
  bottom: 0;
  transition-delay: .6s;
}
.hydra-dynam .dyn-amp{
  width: 22.5%;
  left: 40%;
  bottom: 0;  
}
.hydra-dynam .dyn-amp.on{
  z-index: 3;
  transition-delay: 1.2s;
  transition-duration: 1.8s;
}
.hydra-dynam .dyn-cable{
  width: 69%;
  left: 16%;
  bottom: 10%;
  z-index: 1;
  transition-delay: 1s;
}
.hydra-vid{
  background: url(/images/hydra/vid/bg.jpg) no-repeat center / cover var(--gold);
  position: relative;
  padding: 210px 0;
}
.hydra-vid:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(9, 9, 9, 0.6);
  z-index: 1;
}
.hydra-vid .container{
  position: relative;
  z-index: 2;
}
.hydra-vid .wrapper{
  max-width: 1470px;
} 
.hydra-vid .icon-coco:before{
  display: block;
  font-size: 34px;
  color: var(--gold);
  margin: 0 auto 25px;
}
.hydra-vid .ttl.slg{
  transition-delay: .25s;
} 
.hydra-vid .btn{
  background: var(--white);
  color: var(--black);
  transition-delay: .5s;
}
.hydra-vid .btn:hover{
  background: #E4E4E4;
}
.hydra-vid .video-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.hydra-vid .video-box video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hydra-mosaic .img-box{
  width: calc(50% - 10px);
  flex-direction: row;
}
.hydra-mosaic .img-wrap{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 1s;
  border-radius: 8px;
}
.hydra-mosaic .img-wrap-1{
  background-image: url(/images/hydra/mos-1.jpg);
  padding-bottom: 106.6%;
}
.hydra-mosaic .img-wrap-1:hover{
  background-image: url(/images/hydra/mos-1-h.jpg);
}
.hydra-mosaic .img-wrap-2, .hydra-mosaic .img-wrap-3{
  width: calc(50% - 10px);
  padding-bottom: 56.8%;
  margin-bottom: 20px;
}
.hydra-mosaic .img-wrap-2{
  background-image: url(/images/hydra/mos-2.jpg);
}
.hydra-mosaic .img-wrap-2:hover{
  background-image: url(/images/hydra/mos-2-h.jpg);
}
.hydra-mosaic .img-wrap-3{
  background-image: url(/images/hydra/mos-3.jpg);
}
.hydra-mosaic .img-wrap-3:hover{
  background-image: url(/images/hydra/mos-3-h.jpg);
}
.hydra-mosaic .img-wrap-4{
  background-image: url(/images/hydra/mos-4.jpg);
  padding-bottom: 47.6%;
}
.hydra-mosaic .img-wrap-4:hover{
  background-image: url(/images/hydra/mos-4-h.jpg);
}
.hydra-features{
  padding: 100px 0;
}
.hydra-features-slider{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hydra-features-ttl{
  position: absolute;
  top: 200px;
  left: 11%;
}

.hydra-features .counter{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  background: rgba(20, 20, 20, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.hydra-features-slider .swiper-slide{
  position: relative;
  z-index: 2;
  padding: 350px 0 350px 11%;
}
.hydra-features-slider .swiper-slide .text-box{
  width: 33%;
  font-size: 21px;
  opacity: .8;
  position: relative;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-200px);
  transition: .7s;
  padding-left: 50px;
}
.hydra-features-slider .swiper-slide:first-child .text-box{
  padding-left: 0;
}
.hydra-features-slider .swiper-slide-active .text-box{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.hydra-features-slider .swiper-slide .counter{
  top: -.2em;
  left: 0;
  font-size: 13px;
}
.hydra-features .img-box{
  width: calc(50% - 10px);
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.04) 0%, rgba(20, 20, 20, 0) 100%);
  border-radius: 40px;
  position: relative;
  overflow: hidden;
  margin-left: auto;
}
.hydra-features .img-wrap{
  width: 100%;
  background: url(/images/hydra/hydra2.png) no-repeat center / 19%;
  position: relative;
  transition: .7s;
  padding-bottom: 82%;
  margin: 0 auto;
}
.hydra-features .counters-wrap{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.hydra-features .img-box .counter{
  color: var(--white);
  transition: .6s;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.hydra-features .img-box[data-slide="0"] .counter1{
  top: 11%;
  left: 45%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box[data-slide="0"] .counter2{
  top: 45%;
  left: 40%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box[data-slide="0"] .counter3{
  top: 34%;
  left: 57%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box[data-slide="0"] .counter4{
  top: 70%;
  left: 55%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box[data-slide="0"] .counter5{
  top: 75%;
  left: 39%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box[data-slide="0"] .counter6{
  top: 80%;
  left: 52%;
  right: auto;
  bottom: auto;
}
.hydra-features .img-box:not([data-slide="0"]) .img-wrap{
  background-size: 120%;
}
.hydra-features .img-box[data-slide="1"] .img-wrap{
  background-position: 13% -2%;
}
.hydra-features .img-box[data-slide="2"] .img-wrap{
  background-position: -143% 46%;
}
.hydra-features .img-box[data-slide="3"] .img-wrap{
  background-position: 253% 32%;
}
.hydra-features .img-box[data-slide="4"] .img-wrap{
  background-position: 276% 82%;
}
.hydra-features .img-box[data-slide="5"] .img-wrap{
  background-position: -248% 86%;
}
.hydra-features .img-box[data-slide="6"] .img-wrap{
  background-position: 154% 97%;
}
/*.hydra-features .img-box[data-slide="1"] .img-wrap .counter,
.hydra-features .img-box[data-slide="2"] .img-wrap .counter,
.hydra-features .img-box[data-slide="3"] .img-wrap .counter,
.hydra-features .img-box[data-slide="4"] .img-wrap .counter,
.hydra-features .img-box[data-slide="5"] .img-wrap .counter
{
  opacity: 1;
  visibility: visible;
  top: 40%;
  left: calc(50% - 15px);
}
.hydra-features .img-box:not([data-slide="0"]) .counter{
  opacity: 0;
  visibility: hidden;
}*/
.hydra-features-nav{
  display: none;
  width: 100%;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
}
.hydra-acoust{
  background: #0E0E0E;
  padding: 90px 0 0;
}
.hydra-acoust .wrapper{
  background: var(--black);
  border-radius: 40px;
  overflow: hidden;
  padding: 165px 120px 95px;
}
.hydra-acoust .text-box{
  max-width: 630px;
  position: relative;
  z-index: 3;
}
.acoust-list li{
  width: calc(50% - 33px);
  font-size: 21px;
  color: #C7C7C7;
  margin-bottom: 70px;
}
.acoust-list li:before{
  counter-increment: list;
  content: counter(list);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  font-weight: 700;
  font-size: 13px;
  color: var(--black);
  margin-bottom: 20px ;
}
.acoust-list li:nth-child(2){
  transition-delay: .1s;
}
.acoust-list li:nth-child(3){
  transition-delay: .2s;
}
.acoust-list li:nth-child(4){
  transition-delay: .3s;
}
.acoust-list li:nth-child(4){
  transition-delay: .4s;
}
.hydra-acoust .img-wrap{
  position: absolute;
  width: 41.4%;
  height: 100%;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.hydra-acoust .img-absolute{
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  object-fit: cover;
  object-position: left;
  z-index: 2;
}
.hydra-acoust .circles{
  position: absolute;
  width: 135%;
  right: -16%;
  bottom: -33%;  
}
.hydra-acoust .circles .wrap{
  width: 100%;
  position: relative;
  padding-bottom: 100%;
}
.hydra-acoust .circles span{
  position: absolute;
  border-radius: 50%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.hydra-acoust .circle1{
  width: 48%;
  height: 48%;
  background: #040404;
}
.hydra-acoust .circle2{
  width: 82%;
  height: 82%;
  background: #0A0A0A;
  transition-duration: 1.4s;
}
.hydra-acoust .circle3{
  width: 100%;
  height: 100%;
  background: #101010;
  transition-duration: 2.1s;
}
.hydra-spec .wrapper{
  max-width: 1600px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.hydra-spec .column{
  width: 25%;
  padding-top: 140px;
}
.hydra-spec .img-box{
  width: 28.5%;
  position: relative;
  z-index: 2;
}
.hydra-spec .arr-caption{
  position: relative;
  transition-delay: .35s;
  margin-bottom: 90px;
}
.hydra-spec .arr-caption:last-child{
  transition-delay: .7s;
}
.hydra-spec .arr-caption .subttl{
  text-transform: none;
}
.hydra-balance{
  background: #0E0E0E;
}
.hydra-balance .wrapper{
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hydra-balance .icon-coco{
  max-width: 1080px;
  padding: 0 15px;
}
.hydra-balance .icon-coco:before{
  display: block;
  font-size: 34px;
  color: var(--gold);
  margin: 0 auto 25px;
}
.hydra-balance .img-wrap{
  position: relative;
  margin-bottom: 30px;
}
.hydra-balance .img-box{
  width: 30%;
  position: relative;
  z-index: 2;
  margin-left: 34%;
}
.hydra-balance .img-absolute{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: .7s;
  z-index: 2;
}
.hydra-balance .img-box:hover .img-absolute{
  opacity: 1;
  visibility: visible;
}

.hydra-balance .bg-wrap{
  width: 100%;
  height: 82%;
  background: url(/images/hydra/amplifier-wave.png) no-repeat center / contain;
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  transition-duration: 1.4s;
  margin: 0 auto;
}
.hydra-slider-2{
  background: #0E0E0E;
  padding: 80px 0 140px;
}
.hydra-slider-2 .text-slider{
  position: absolute;
  width: 460px;
  top: 25%;
  left: 5%;
}
.hydra-slider-2 .text-box{
  opacity: 0;
  visibility: hidden;
  transform: translateX(-400px);
  transition: 1.4s;
}
.hydra-slider-2 .swiper-slide-active .text-box{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.hydra-slider-2 .ttl{
  color: var(--gold);
  position: relative;
  padding-left: 80px;
}
.hydra-slider-2 .ico{
  width: 68px;
  height: 52px;
  position: absolute;
  top: -5px;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.hydra-slider-2 .text-box p{
  font-size: 21px;
  color: rgba(244, 244, 244, 0.8);
}
.hydra-slider-2 .img-slider{
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.hydra-slider-2 .img-slider .swiper-slide{
  position: relative;
  transition: .8s;
  padding-bottom: 38%;
}
.hydra-slider-2 .img-slider .swiper-slide img{
  position: absolute;
  height: 100%;
  border-radius: 40px;
  right: 0;
  top: 0;
}
.hydra-slider-2 .img-slider-nav{
  display: none;
  width: 100%;
  height: 0;
  position: absolute;
  top: 47%;
  left: 0;
  z-index: 2;
}
.hydra-info .item{
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px);
  height: 700px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 80px;
}
.hydra-info .item:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: .7s;
  z-index: 1;
}
.hydra-info .dyno:before{  
  background: url(/images/hydra/info2.png) no-repeat right bottom / cover #fff;  
}
.hydra-info .acoust:before{
  background: url(/images/hydra/info1.png) no-repeat right top / cover var(--black);
}
.hydra-info .acoust{
  justify-content: flex-end;
}
.hydra-info .item:hover:before{
  transform: scale(1.1);
}
.hydra-info .item .text-box{
  position: relative;
  z-index: 2;
  max-width: 390px;
}
.hydra-info .item p{
  opacity: .8;  
  font-size: 21px;
}
.hydra-form .wrapper{
  background: #fff;
  border-radius: 40px;
  max-width: 1680px;
  padding: 105px 30px;
  margin-left: auto;
  margin-right: auto;
}
.hydra-form .ttl{
  max-width: 1050px;
}
.hydra-form .contact-form{
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
.deal-intro{
  background: url(/images/deal-intro.jpg) no-repeat center / cover var(--gold);
  position: relative;
  margin-bottom: 65px;
}
.deal-intro:after{
  content: '';
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: url(/images/author.png) no-repeat center / cover;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -45px;
  margin: 0 auto;
}
.form-roles {
  width: 580px;
}
.form-roles .role{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 180px;
  height: 48px;
  border-radius: 24px;
  background: #E9E9E9;
  border: 1px solid #E9E9E9;
  color: #949494;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: .4s;
}
.form-roles .role.active, .form-roles .role:hover{
  color: var(--black);
}
.form-roles .role.active{
  background: transparent;
}
.deal-form .form-wrapper{
  max-width: 1060px;
  border: 1px solid rgba(191, 166, 118, 0.4);
  border-radius: 8px;
  position: relative;
  padding: 140px 75px 60px;
  margin: 65px auto 0;
}
.deal-form .form-wrapper:before{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border: 1px solid rgba(191, 166, 118, 0.4);
  border-radius: 50%;
  background: var(--white);
  font-size: 25px;
  color: var(--gold);
  position: absolute;
  top: -45px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.contacts-page .ttl.sm{
  font-weight: 400;
  opacity: .8;
}
.contacts-page .contacts-box{
  width: calc(50% + 10px);
  border-top: var(--border);
}
.contacts-page .contacts-box .item{
  width: 33.33%;
  border-right: var(--border);
  padding: 80px 20px 60px 7%;
}
.contacts-page .contacts-box a{
  display: flex;
}
.contacts-page .contacts-box .social a{
  margin-right: 20px;
}
.contacts-page .contacts-box .shedule{
  font-size: 13px;
  opacity: .4;
}
.contacts-page .cooperate{
  display: flex;
  border-top: var(--border);
  border-right: var(--border);
  padding: 56px 20px 150px 7%;
}
.contacts-page .cooperate:before{
  content: '';
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url(/images/author.png) no-repeat center / cover;
  margin-right: 40px;
}
.contacts-page .form-box{
  width: calc(50% - 10px);
  border-top: var(--border);
  padding: 80px;
}
.contacts-page .form-box .ttl{
  margin-bottom: 52px;
}
/*==============================*/
.cyclo-intro{
  background: url(/images/cyclop/cyclops-bg.jpg) no-repeat center / cover var(--black);
  overflow: hidden;
  padding: 13% 0;
}
.cyclo-intro .ttl.lg{
  line-height: 1;
  transition-delay: .3s;
  transition-duration: 1.2s;
}
.cyclo-intro .ttl.lg b{
  display: block;
  margin-bottom: 6px;
}
.cyclo-intro .img-box{
  width: 49.5%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
}
.cyclo-intro .intro-img-1{
  width: 33%;
  left: 18.5%;
  bottom: 0;
  z-index: 2;
}
.cyclo-intro .intro-img-2{
  width: 51.8%;
  left: 31.5%;
  bottom: 0;
  transition-delay: .5s;
  transition-duration: 2s;
}
.cyclo-intro .intro-img-3{
  width: 53.8%;
  right: 0;
  bottom: 0;
  transition-delay: 1s;
  transition-duration: 2.5s;
}
.cyclo-intro .wave{
  width: 70.8%;
  left: 0;
  bottom: 26.5%;
  z-index: 1;
  transition-duration: 2s;
  animation: pulse 5s infinite;
}
.cyclo-intro .btn{
  transition-duration: 1.6s, .5s;
}
.cyclo-intro .subttl-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 90px;
  z-index: 5;
}
.cyclo-intro .subttl-box .subttl{
  color: #B2B2B2;
}
.cyclo-persept .wrapper{
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.cyclo-persept .ttl.slg{
  max-width: 1150px;
}
.cyclo-persept .caption{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.03);
  font-size: 21px;
  color: rgba(20, 20, 20, 0.8);
  padding: 30px;
}
@media (min-width:768.1px){
  .cyclo-persept .caption:first-child{
    transition-delay: .7s;
    margin-top: 18.75%;
  }
  .cyclo-persept .caption:last-child{
    margin-top: 5%;
    transition-delay: .5s;
  }
}
.cyclo-persept .img-box{
  flex-direction: row;
  align-items: flex-end;
  width: calc(100% - 685px);
}
.cyclo-persept .img-box img:first-child{
  width: 21.4%;
}
.cyclo-persept .img-box img:nth-child(2){
  width: 27.7%;
  transition-delay: .2s;
}
.cyclo-persept .img-box img:last-child{
  width: 22%;
  transition-delay: .4s;
}
.cyclo-slider-1{
  overflow: hidden;
  padding: 90px 0 0;
}
.cyclo-slider-1 .text-box{
  position: absolute;
  width: 33%;
  top: 30%;
  left: 0;
}

.cyclo-slider-1 .text-box .text{
  max-width: 505px;
  font-size: 21px;
  color: rgba(20, 20, 20, 0.8);
}
.cyclo-slider-1 .img-slider{
  position: relative;
  z-index: 2;
}
.cyclo-slider-1 .img-slider .swiper-slide{
  position: relative;
  opacity: 0!important;
  transition: .8s;
  padding-bottom: 40%;
}
.cyclo-slider-1 .img-slider .swiper-slide-prev,
.cyclo-slider-1 .img-slider .swiper-slide-next {
  opacity: .1!important;
}
.cyclo-slider-1 .img-slider .swiper-slide-active{
  opacity: 1!important;
}
.cyclo-slider-1 .img-slider .swiper-slide img{
  position: absolute;
  height: 100%;
  border-radius: 40px;
  right: 0;
  top: 0;
}
.cyclo-slider-1 .img-slider-nav{
  display: none;
  width: 100%;
  height: 0;
  position: absolute;
  top: 47%;
  left: 0;
  z-index: 2;
}
.cyclo-real .wrapper{
  background: url(/images/cyclop/real-bg.jpg) no-repeat right top / cover var(--black);
  border-radius: 40px;
  overflow: hidden;
  padding: 13.6% 50% 13.6% 10.2%;
}
.cyclo-real .text-box{
  position: relative;
  z-index: 3;
}
.cyclo-real .ttl.slg{
  font-weight: 700;
}
.cyclo-real .text{
  max-width: 580px;
  opacity: .8;
}
.cyclo-real .img-absolute{
  width: 42.7%;
  right: 3.4%;
  bottom: 0;
  z-index: 2;
}
.hydra-vid.cyclo-vid{
  background-image: url(/images/cyclop/vid/bg.jpg);
}
.cyclo-mosaic .img-box{
  width: calc(50% - 10px);
  flex-direction: row;
}
.cyclo-mosaic{
  background: #0E0E0E;
  padding: 100px 0;
}
.cyclo-mosaic .img-wrap{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 8px;
  background-color: #fff;
  background-size: 80%;
}
.cyclo-mosaic .img-wrap-1{
  background-image: url(/images/cyclop/6-1.png);
  padding-bottom: 106.6%;
}

.cyclo-mosaic .img-wrap-2, .cyclo-mosaic .img-wrap-3{
  width: calc(50% - 10px);
  padding-bottom: 56.8%;
  margin-bottom: 20px;
}
.cyclo-mosaic .img-wrap-2{
  background-image: url(/images/cyclop/6-2.png);
  background-size: 40%;
  background-position: center bottom;
}

.cyclo-mosaic .img-wrap-3{
  background-image: url(/images/cyclop/6-3.png);
  background-size: 50%;
}

.cyclo-mosaic .img-wrap-4{
  background-image: url(/images/cyclop/6-4.png);
  background-size: 65%;
  padding-bottom: 47.6%;
}
.hydra-acoust.cyclo-benefits .img-wrap{
  width: 38.7%;  
}
.hydra-acoust.cyclo-benefits .img-absolute{
  height: auto;
  top: auto;
  bottom: 0;
}
.hydra-acoust.cyclo-benefits li{
  margin-bottom: 80px;
}
.cyclo-spec{
  background: #fff;
}
.cyclo-airplay .wrapper{
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
.cyclo-airplay .text-box{
  width: 40%;
}
.cyclo-airplay .ttl{
  max-width: 650px;
  font-weight: 700;
  text-transform: uppercase;
}
.cyclo-airplay .coco-list li{
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(20, 20, 20, 0.8);
}
.cyclo-airplay .coco-list li{
  top: 1px;
}
.cyclo-airplay .img-box{
  width: 38%;
}
.cyclo-airplay .lan .img-box{
  align-items: center;
  position: relative;
  margin-left: 5%;
}
.cyclo-airplay .lan .img-box img{
  width: 90.6%;
}
.cyclo-airplay .lan .img-box .img-absolute{
  width: 25.9%;
  right: 18%;
  bottom: 0;
}
.hydra-balance.cyclo-ampl .wrapper{
  padding: 140px 0 200px;
}
.hydra-balance.cyclo-ampl .icon-coco{
  max-width: 1150px;
}
.hydra-balance.cyclo-ampl .img-box {
  width: 50%;
  margin: 0 auto;
}
.hydra-balance.cyclo-ampl .bg-wrap {
  height: 165%;
  top: -12%;
}
.cyclo-apps{
  background: #0E0E0E;
  padding: 140px 0 90px;
}
.cyclo-apps .wrapper{
  max-width: 1550px;
  margin-left: auto;
  margin-right: auto;
}
.cyclo-apps .item{
  width: 30%;
}
.cyclo-apps .ttl.md{
  display: flex;
  align-items: center;
  color: var(--gold);
}
.cyclo-apps .item .ico{
  width: 68px;
  height: 52px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 23px;
}
.cyclo-apps .item:nth-child(2) .ico{
  transition-delay: .3s;
}
.cyclo-apps .item:nth-child(3) .ico{
  transition-delay: .6s;
}
.cyclo-apps .text{
  width: 90%;
  opacity: .8;
}
.cyclo-info .wrapper{
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
.cyclo-info .item{
  display: flex;
  flex-direction: column;
  width: calc(50% - 10px);
  height: 700px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  padding: 80px;
}
.cyclo-info .item:before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: .7s;
  z-index: 1;
}
.cyclo-info .sub:before{  
  background: url(/images/cyclop/10-1.jpg) no-repeat right bottom / cover var(--black);  
}
.cyclo-info .acoust:before{
  background: url(/images/cyclop/10-2.jpg) no-repeat right top / cover var(--gold);
}
.cyclo-info .acoust{
  justify-content: flex-end;
}
.cyclo-info .item:hover:before{
  transform: scale(1.1);
}
.cyclo-info .item .text-box{
  position: relative;
  z-index: 2;
  max-width: 390px;
}
.cyclo-info .item p{
  opacity: .8;  
  font-size: 21px;
}