@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
body{margin:0px;display:flex; flex-direction:column; background:#e2e7e7; width:100%; align-items: center; justify-content: center; padding:0px;  overflow-x:hidden; font-family: 'Open Sans', sans-serif; font-size:14px; line-height:1.4; color:#333;}

/*
c5e3e4
#e2e7e7
*/
*{box-sizing:border-box;}
img{max-width:100%; display: block;}

a{color:#611c61}

h1{margin:0 0 20px 0; position:relative; display: block; font-weight: bold; font-size:28px; }

h1 a{text-decoration: none; color:#333;}

h2{margin:0 0 40px 0; position:relative; display: block; font-size:28px;}


.row{display: flex; width:100%;}
.col{display: flex; flex-direction:column; width:100%;}

.wrap{width:96%; max-width:1300px; margin: 0 auto;}

.home h1{font-size:38px; text-transform: uppercase; display: flex; flex-direction: column;}
.home h1 span{font-size:28px; }
.home{margin-bottom:15px; margin-top:75px;}
.home .wrap{background:#fff; border-radius: 15px; padding:15px; display: flex;}
.home .home-left{width: 58%; padding:0 15px; font-size: 18px; display: flex;flex-direction: column;  justify-content: center;}
.home .home-right{width: 42%; padding-left:15px;  border-left: 1px #e2e7e7 solid;}
.home .home-right img{width: 100%; height:640px; object-fit: cover; object-position: center  top; border-radius: 15px; overflow: hidden; display: block; }
.home .home-left p {font-weight: 300; margin:15px 0;}

.slider{position: relative; overflow:hidden; width: 100%; height:640px; }
.slide {position: absolute; left: 0; top: 0; opacity:0; transition:1s; z-index: 1; width: 100%; height: 100%;}
.slide.open{z-index: 10; opacity:1;}

#pag{position: absolute; width: 100%;  list-style: none; left:0; z-index: 200; bottom:10px; display: flex; margin:0; padding:0; align-items: center; justify-content: center;}
#pag li{padding:0; width:16px; cursor:pointer; border:1px #fff solid;  height:16px; border-radius: 50%; margin:0 5px; background-color: #fff;}

#pag li.active{background:#45A1A6;}

.home .home-left .flex-r{margin-top:15px;}

.home .home-left button{width:31%; border:none; }

@media (max-width: 800px)
{
.slider{height:440px;}
.home .wrap{flex-direction: column;}
.home .home-left,.home .home-right{width: 100%; border:none; padding:0;}
.home .home-left{order:2;}
.home .home-right{margin-top:0px;margin-bottom:20px; order:1;}
.home .home-right .slider, .home .home-right .slide{height:auto; position:relative;}
.home .home-right img{height:auto; display: none; object-fit: cover; object-position: center;}
.home .home-right .open img{display:block;}
.home .home-left button{font-size: 11px;}
}

.mapContacts{margin-top:15px;}
.mapContacts .wrap{background:#fff; border-radius: 15px; padding:15px; display: flex;}
.mapContacts-map{width:60%;padding-right:15px;}
.mapContacts-contacts{width:40%; padding-left:15px;  border-left: 1px #e2e7e7 solid;;}

@media (max-width: 800px)
{
.mapContacts .wrap{flex-direction: column;}
.mapContacts-map{width: 100%; margin-right: 0;}
.mapContacts-contacts{width:100%; padding-left:0px; margin-top:15px;  border:none; }
}

button{background:#45A1A6; border:none; font-size: 14px; display: flex; justify-content: center; align-items: center; cursor: pointer; height:42px; border-radius: 15px; color:#fff;}
button i{margin-right:5px; font-size: 16px;}

#presentation{position: fixed; display: flex; align-items: center; justify-content: center; left: 0;top: 0; width: 100%; height: 100%; z-index:100;}
#presentation .blacker{background:rgba(0,0,0,0.8); z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#presentation .video{padding:15px; position: relative; border-radius: 15px; z-index: 10; background:#fff;}
#presentation .video button{width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; position: absolute; right:-30px; top:-30px;}

#presentation .video button i{margin:0;}

.flex-r{display: flex; justify-content: space-between; width: 100%;}

nav{position:fixed; border-bottom:1px #e2e7e7 solid; z-index: 100; opacity:0.98;  display: flex;  left:0; top:0; width:100%; height:64px; background:rgba(255,255,255,1); }
nav a.logo img{width:auto; height:54px; margin:5px 0; display: block; }

nav .wrap{display: flex; justify-content: space-between; padding:0 15px;}

nav ul{list-style: none; margin:0; padding:0; display: flex;}
nav ul li a{height:64px; transition:0.3s;  color:#333; text-decoration:none; padding:0 25px; display: flex; justify-content: center; align-items: center; font-size:12px; text-transform: uppercase;}
nav ul li a:hover{background:#e2e7e7;}

nav ul li.current a{background: #45A1A6; color:#fff;}

nav ul li a.eng i{display: block; width: 28px; height: 28px; border-radius: 50%; background: url('../images/eng.png'); background-position: center; background-size: cover; }
/*
nav ul li a.inst i{display: flex; color:#fff; align-items: center; justify-content: center;  background:rgb(194, 2, 98);  border-radius: 50%; }

nav ul li a.ytb i{display: flex; color:#fff;align-items: center; justify-content: center;  background:rgb(194, 2, 2);  border-radius: 50%; }
*/

nav ul.socials li a{padding:0; margin-left: 15px;}
nav ul.socials li i{width:40px; font-size: 20px; border-radius: 15px; border:1px #e2e7e7 solid; height:40px; display: flex; align-items: center; justify-content: center;} 
nav ul.socials li a:hover i{background:#e2e7e7 ;}
nav ul.socials li a:hover{background:none;}
section{display: flex; flex-direction:column; width:100%; position: relative; z-index: 10;}



section.home-cats ul{list-style: none; margin:0; padding:0 0 0px 0; display: flex;}
section.home-cats ul li{width:25%;  border-radius:15px;  overflow:hidden; margin:0 0 0 15px; justify-content: space-between; padding:0px; background:#fff;}
section.home-cats ul li:first-child{margin-left:0;}
section.home  h2{margin-bottom:20px;}
section.home  h2:before{display:none;}
section.home-cats ul li a{display: flex; position:relative; text-align: center; font-size: 18px; flex-direction: column; align-items: center; justify-content: center; color:#333; text-decoration:none;}
section.home-cats ul li img{width:100%; height:auto; display: block; object-position: center; object-fit: cover;}

section.home-cats ul li a strong{padding:5px 0; font-size:14px;}
section.home-cats ul li a:hover strong{text-decoration:none;}
section.home-cats ul li a span{padding:5px 0; color:#fff; font-size: 20px; display: block; width: 100%; position: absolute; bottom: 0; left: 0; }

section.home-cats ul li a:before{content:""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background-image: linear-gradient(to top,rgba(0,0,0,0.1),rgba(0,0,0,0));}

section.home-cats.caption{margin-bottom: 20px;}
section.home-cats.caption h1{display: flex; flex-direction: column; margin:30px 0; font-size:36px; }
section.home.caption h1 span{font-size:24px; color:#777;}
section.home.caption h1:before{display: none;}

@media (max-width: 800px)
{
section.home-cats ul{flex-wrap: wrap; justify-content: space-between;}
section.home-cats ul li{width:49%; margin:0 0 10px 0;}
}

 .crumbs{margin-bottom: 10px; display: flex; justify-content: center;}
 .crumbs span:nth-child(2){display: none;}
 .crumbs span{display: block; padding:0 10px; color:#777;}
 .crumbs span a{color:#777;}

ul.catalog{list-style: none;  width: 100%; justify-content:flex-start; flex-wrap: wrap; margin:0; padding:0 0 30px 0; display: flex;  }
ul.catalog li{width:23%; border:1px #e2e7e7 solid; border-radius:15px; margin:0 1% 20px 1%; padding:0; background:#fff;}
ul.catalog li a{display: flex; flex-direction: column;padding:15px 15px;}
ul.catalog.related li{width:44%; }

ul.catalog li a{display: flex; text-align: center; flex-direction: column; align-items: center; justify-content: center; color:#333; text-decoration:none;}
ul.catalog li img{width:100%; height:240px; display: block; object-position: center; object-fit: contain;}

ul.catalog li a strong{padding:5px 0; font-size:14px;}
ul.catalog li a:hover strong{text-decoration:underline;}
ul.catalog li a span{padding:5px 0; color:#777;}


@media (max-width: 800px)
{
ul.catalog{flex-wrap: wrap; justify-content: space-between;}
ul.catalog li{width:49%; margin:0 0 10px 0;}
}


.prod{display: flex; width: 100%; align-items: flex-start;}
.prod .info{width: 60%; padding-left:30px;}

.prod .info ul{padding:0; margin:0; list-style: none;}
.prod .info ul h3{font-size: 24px; font-weight: normal; }
.prod .info ul li:first-child h3{margin-top:0;}
.prod .info ul li>div{padding-left:15px;}

.prod .gallery{width:40%; flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: center;}

.prod .gallery a{width:100px; display: flex;margin:5px; border-radius: 15px;; border:1px #e2e7e7 solid;}
.prod .gallery a img{width:100%;  height:120px; display: block; object-fit: contain; object-position: center; border-radius: 15px; overflow:hidden;}
.prod .gallery a.video img{object-fit: cover;}

.prod .gallery a.video{position: relative; overflow: hidden; border:none;}
.prod .gallery a.video:before{content:""; border-radius: 15px;; width: 100%;  z-index: 5; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.3);;}
.prod .gallery a.video i{color:#fff; z-index: 10; font-size:30px; position: absolute; left:50%;top:50%; margin-left:-30px;  margin-top:-30px; width:60px; height:60px; display: flex; align-items: center; justify-content: center;}
.prod .gallery a:first-child{width:100%; margin:0 0 10px 0;}
.prod .gallery a:first-child img{height:auto;}

@media (max-width: 800px)
{
    .prod{flex-direction: column;}
    .prod .gallery{width:100%; }
    .prod .info{width: 100%; padding-left:0px;}

    ul.socials{display: none;}
}

#staticForm{display: flex; flex-direction: column; justify-content: center; align-items: center;}
#staticForm form{max-width: 600px; width: 100%;  display: flex; flex-direction: column;}
#staticForm .form_row{display: flex; flex-direction: column; width: 100%; padding:0 0 20px 0;}
#staticForm .form_row span{font-size: 12px;}
#staticForm .form_row input, #staticForm .form_row textarea{width: 100%; font-size: 18px;  height:36px; padding:0 10px; border-radius: 5px; border:1px #bbb solid;}
#staticForm .form_row textarea{height:200px; cursor:pointer; padding:10px;}

#staticForm .form_row button{height:42px; margin:0 auto; max-width:300px; border:none; font-size: 18px; background: #ab76ab; color:#fff; }

ul.gallery{list-style: none;  width: 100%; justify-content: center; flex-wrap: wrap; margin:0; padding:0 0 30px 0; display: flex;}
ul.gallery li{width:20%; border:1px #dadada solid; border-radius:5px; margin:0 20px 20px 0px; justify-content: space-between; padding:15px 10px; background:#fff;}

ul.gallery li a{display: flex;  text-align: center; flex-direction: column; align-items: center; justify-content: center; color:#333; text-decoration:none;}
ul.gallery li img{width:100%; height:160px; display: block; object-position: center; object-fit: contain;}

ul.gallery li a strong{padding:5px 0; font-size:14px;}
ul.gallery li a:hover strong{text-decoration:underline;}
ul.gallery li a span{padding:5px 0; color:#777;}

#page{width:100%; margin:75px 0 15px; position: relative; z-index: 10;}

#page .wrap{display: flex; align-items: flex-start; }

#page main{background:#fff; border-radius: 15px; padding:15px;}

footer{ color:#333; margin-top: 20px; padding:30px 0; display: flex; width: 100%;}
footer .wrap{display: flex; justify-content: space-between;}
footer .col{width:33%;}

footer .col ul{list-style: none; margin:0; padding:0; display: flex; flex-direction: column; align-items: flex-end; width:100%; justify-content: flex-end;}
footer .col a{color:#333;}
footer .col ul li{display: block; padding:5px 0;}

article{padding:0; min-height:500px;  width: 100%;}

main{display: flex; width: 100%; }

#page aside{margin-right:15px; width:240px; flex-shrink: 0; background:#fff; border-radius: 15px; padding:15px;}

aside h2{font-weight: normal; margin:0 0 15px 0; font-size:28px;}

aside ul{display:flex; margin:0; padding:0; list-style:none; flex-direction:column;}

aside ul li ul li{}
aside ul li a{display: flex; margin:2px 0; color:#333; border-radius: 5px;  width: 100%; justify-content: space-between; align-items: center; width:100%; padding:10px 10px;  text-decoration:none; font-size:18px; }
aside ul li ul li a{font-weight: normal;  padding:5px 15px;  opacity:0.5s; text-transform:unset; display: flex; font-size:16px; }

 
aside ul li a:hover, aside ul li a.current{text-decoration:none; background:#e2e7e7;}

.prodImg{float:left; margin:0 15px 15px 0;}

.mobMenu{display: none;}
.mob{display: none;}

.shortPage{padding-bottom:10px; margin-bottom:10px; border-bottom:1px #ccc dotted;}
.shortPage h3 a{color:#000; font-weight:normal; font-size:18px;}
.shortPage h3 small{font-size:12px; font-style:italic; color:#808080;}

.imgBox{display: flex;}
.imgBox .img{width:40%; min-width:120px; flex-shrink: 0;  padding-right:20px;}
@media (max-width: 970px)
{

    .imgBox{flex-direction:column;}
.imgBox .img{width:100%; min-width:120px; padding-right:0px;}
    .mob{display: block;}
    nav .wrap{justify-content: center;}
    nav ul{flex-direction:column; left:-100%;z-index:100;  transition:0.5s; width:90%; height:80%; top:80px; padding:20px;  box-shadow:0 0 10px rgba(0,0,0,0.5);overflow-y: auto; border-radius: 5px; background:#fff; position: fixed;}
    .showMenu nav ul{left:5%;}

    #page aside{ padding-right:0; z-index:100; margin-right:0; border:none; right:-100%; transition:0.5s; width:90%; height:80%; top:80px; padding:20px; overflow-y: auto; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius: 5px;background:#fff; position: fixed;}
    .showProds #page aside{right:5%;}

    .mobMenu{display: flex; flex-direction: column; color:#48605e; text-decoration:none;  position: absolute; top:7px; }
    .mobMenu.l{left:10px;}
    .mobMenu.r{right:10px; align-items: flex-end;}
    .mobMenu i{font-size:24px; transition:0.5s;}

    body.showMenu .mobMenu.l i{transform:rotate(90deg);}
    body.showProds .mobMenu.r i{transform:rotate(90deg);}

    footer .wrap{flex-direction: column;}
    footer .col {width: 100%;}
    footer .col ul{display: none;}

    section.home.caption .crumbs{flex-direction: column; justify-content: center; align-items: center;}
    section.home.caption .crumbs span{display: block; padding:5px 0; text-align: center;}
    section.home.caption h1{font-size:24px;}
    
    article img{height:auto;}
}