/*
Theme Name: CAE
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font:inherit;font-size:100%;-webkit-text-size-adjust:100%;–ms-text-size-adjust:100%;vertical-align:baseline;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
html{padding:0px;margin:0px !important;height:auto;min-height:100%;min-width:100%;scroll-behavior:smooth;overflow-x:hidden;}
body{
font-family: 'Averta Std CY';
font-size: 16px;
font-weight: normal;
font-style: normal;
font-display: swap;
background:#fff;background-position:center top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;text-align:left;margin:0px;padding:0px;font-size:16px;line-height:20px;color:#181818;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
*{-webkit-opacity:1;-webkit-appearance:none;border-radius:0;outline:medium none;margin:0;}
h1, h2, h3, h4, h5, h6{color:#181818;font-weight:600;margin-bottom:5px;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{}
h1{font-size:42px;line-height:48px;}
h2{font-size:32px;line-height:42px;}
h3{font-size:22px;line-height:28px;}
h4{font-size:15px;line-height:22px;}
h5{font-size:14px;line-height:18px;}
h6{font-size:13px;line-height:17px;}
.subheader{color:#777;}
p{font-size:16px;margin:10px 0px 10px 0px;}
p img{margin:0px;}
em{font-style:italic;}
strong{font-weight:bold;}
small{font-size:80%;}
blockquote, blockquote p{font-size:17px;line-height:24px;color:#777;font-style:italic;}
blockquote{margin:0 0 20px;padding:9px 20px 0 19px;border-left:1px solid #ddd;}
blockquote cite{display:block;font-size:12px;color:#777;}
blockquote cite:before{content:"\2014 \0020";}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited{color:#777;}
hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:30px 0 30px;height:0;}
a, a:visited{text-decoration:none;}
a:hover, a:focus{text-decoration:none;}
p a, p a:visited{}
.single-content p a, .single-content p a:visited{}
.single-content p a:hover, .single-content p a:focus{text-decoration:none;}
ul{list-style:none;margin:0 0 0 0;padding:0; padding-left: 1em;}
li{list-style:none; margin: 10px 0px 10px 0px;}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color: #219653; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
margin-left: -1em; /* Also needed for space (tweak if needed) */
}
ol{list-style-type:decimal;margin:0 0 0.892307em 0.6em;padding:0;}
ol ol{list-style:upper-roman}
ol ol ol{list-style:lower-roman}
ol ol ol ol{list-style:upper-alpha}
ol ol ol ol ol{list-style:lower-alpha}
ul ul, ol ol, ul ol, ol ul{margin-bottom:0}
dl{margin:0 0 0.092307em 5px}
dt{font-weight:bold;margin:0px 0 0 0}
dd{margin:5px 0 0 0.5em}
fn{font-weight:bold;}
img.scale-with-grid{max-width:100%;height:auto;}
.alignleft{float:left;text-align:left;}
.alignright{float:left;text-align:left;}
.aligncenter{margin:0px auto;text-align:center;}
.display-block{display:block;}
b {
font-weight: bold;
}
#wrapper{margin:0px auto;}
.wrapper-fullwidth {margin:0px auto; max-width: 100%; position: relative; overflow: hidden; box-sizing: border-box;}
.wrapper{margin:0px auto; max-width: 1280px; position: relative; box-sizing: border-box;}
.wrap-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.header-desktop {
align-items: center;
}
header {
width: 100%;
height: auto;
background: #fff;
padding: 20px 20px;
box-sizing: border-box;
position: relative;
z-index: 12;
}
header.header-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 12;
animation: headerSlideDown 0.25s ease;
}
@keyframes headerSlideDown {
from { opacity: 0; }
to { opacity: 1; }
}
.header-menu {
width: auto;
text-align: center;
}
.header-menu ul {
margin: 0;
justify-content: space-between;
display: flex;
list-style:none; padding:0;
}
.header-menu ul li {
display: inline-block;
margin: 0px 15px;
list-style:none;
}
.header-menu ul li::before {
content: '';
display: none;
}
.header-menu ul li a {
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 130%;
height: auto;
color: #303030;
display: block;
box-sizing: border-box;
border-bottom: 2px solid transparent;
transition:all .2s ease-in-out;
}
.header-menu ul li a:visited {
color: #303030;
text-decoration: none;
}
.header-menu ul li a:hover {
border-bottom: 2px solid #219653;
}
.language-chooser {
display: flex;
align-items: center;
gap: 0;
list-style: none;
margin: 0;
padding: 0;
}
.language-chooser li {
display: flex;
align-items: center;
list-style: none;
}
.language-chooser li:before {
content: "";
display: none;
}
.language-chooser li + li::before {
content: "";
display: block;
width: 1px;
height: 14px;
background: #c0c0c0;
margin: 0 6px;
}
.language-chooser a {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 1;
}
.language-chooser a span {
font-size: 0;
line-height: 1;
}
.language-chooser li.lang-ru a span::before { content: 'Ру'; font-size: 16px; font-weight: 600; color: #747681; }
.language-chooser li.lang-en a span::before { content: 'Eng'; font-size: 16px; font-weight: 600; color: #747681; }
.language-chooser li.active.lang-ru a span::before { color: #303030; }
.language-chooser li.active.lang-en a span::before { color: #303030; }
.language-chooser li.lang-ru a:hover span::before,
.language-chooser li.lang-en a:hover span::before { color: #303030; }
#myVideo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 70%;
display: block;
z-index: 1;
}
.overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
z-index: 2;
}
.homepage-frist {
position: absolute;
overflow: hidden;
height: 100vh;
width: 100%;
box-sizing: border-box;
}
.home-first-content {
position: absolute;
top: calc(50% - 44px);
transform: translateY(-50%);
color: #fff;
width: 100%;
z-index: 3;
box-sizing: border-box;
}
.homepage {
height: 100vh;
position: relative;
}
.homepage-first {
height: 100%;
width: 100%;
position: relative;
background-color: #000;
overflow: hidden;
}
.home-first-content .wrapper {
overflow: visible;
}
h1.homepage-title {
font-size: 60px;
line-height: 120%;
position: relative;
color: #F2F2F2;
margin-top: 0;
font-weight: 600;
display: block;
padding-left: 35px;
transition:all .2s ease-in-out;
}
h1.homepage-title span {
position: relative;
left: -200%;
transition: all 1.5s ease-in-out;
}
.homepage-first h1.homepage-title::before {
content: ' ';
border-left: 7px solid #27AE60;
width: auto;
display: block;
height: 100%;
position: absolute;
left: -50%;
transition: all 1.0s ease-in-out;
}
.homepage-first h1.homepage-title.show::before {
left: 0%;
}
.homepage-first h1.homepage-title.show span {
left: 20px;
}
.btn {
display: inline-block;
padding: 0px 24px;
background: #27AE60;
border-radius: 100px;
box-sizing: border-box;
font-weight: 600;
font-size: 16px;
/* identical to box height */
border: 1px solid #27AE60;
transition:all .2s ease-in-out;
height: 48px;
line-height: 46px;
cursor: pointer;
color: #FFFFFF;
}
.btn:hover {
background: #fff;
color: #27AE60;
}
#play {
display: block;
width: 100px;
height: 100px;
margin: 40px auto 0;
cursor: pointer;
z-index: 4;
background: url('images/play.svg') no-repeat center center;
background-size: 100% 100%;
transition: transform 0.2s ease-in-out;
}
#play:hover {
transform: scale(1.2);
}
.date {
text-transform: capitalize;
color: #828282;
font-size: 16px;
display: block;
}
.our-products {
background: #F1F2F3;
padding: 80px 20px;
box-sizing: border-box;
}
.our-products-page {
background: #F1F2F3;
padding: 48px 20px 80px;
box-sizing: border-box;
}
.error-page {
background: #F1F2F3;
height: calc(100vh - 200px);
padding: 48px 20px 80px;
box-sizing: border-box;
}
.why-we {
background: #fff;
padding: 80px 20px;
box-sizing: border-box;
}
.our-news {
background: #F1F2F3;
padding: 80px 20px;
box-sizing: border-box;
}
.homepage-list h2 {
font-weight: 600;
font-size: 36px;
line-height: 44px;
margin: 40px 0px;
color: #333333;
}
.card-block {
width: 32%;
font-weight: 400;
font-size: 16px;
line-height: 125%;
color: #4F4F4F;
}
.homepage-thumbnail {
width: 100%;
height: auto;
display: block;
margin: 20px 0px;
}
.homepage-thumbnail img {
width: 100%;
height: auto;
border-radius: 8px;
}
.card-block-title {
display: block;
font-weight: 600;
font-size: 24px;
line-height: 120%;
margin-bottom: 20px;
color: #333333;
}
.card-block-title:hover {
text-decoration: underline;
}
.why-we .card-block-title:hover {
text-decoration: unset;
}
.slick-prev {
left: auto;
right: 80px;
top: -40px;
width: 48px;
height: 48px;
border: 1px solid #27AE60;
border-radius: 100%;
}
.slick-next {
left: auto;
right: 20px;
top: -40px;
width: 48px;
height: 48px;
border: 1px solid #27AE60;
border-radius: 100%;
}
.slick-prev:hover, .slick-next:hover {
background: #27AE60;
}
.slick-next:before {
content: '';
display: block;
background: url('images/arrows.svg') no-repeat top left;
position: absolute;
width: 10px;
top: 15px;
left: 50%;
margin-left: -4px;
height: 18px;
}
.slick-prev:before {
content: '';
display: block;
background: url('images/arrows.svg') no-repeat top right;
position: absolute;
width: 10px;
top: 15px;
left: 50%;
margin-left: -6px;
height: 18px;
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
opacity: 1;
}
.slick-next:hover::before {
filter: contrast(0%) brightness(200%);
}
.slick-prev:hover::before {
filter: contrast(0%) brightness(200%);
}
footer {
background: #161616;
padding: 80px 10px 40px;
box-sizing: border-box;
}
.footer-menu {
width: calc(55% - 0px);
margin-left: 0px;
}
.footer-menu ul {
margin: 0px 0px 0px;
list-style:none; padding:0;
display: flex;
flex-wrap: wrap;
justify-content: end;
}
.footer-menu ul li {
display: block;
margin: 0px 0px 15px;
list-style:none;
width: calc(45% - 50px);
margin-left: 50px;
}
.footer-menu ul li::before {
content: '';
display: none;
}
.footer-menu ul li a, .footer-menu ul li a:visited {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 130%;
height: auto;
color: #fff;
display: inline-block;
box-sizing: border-box;
border-bottom: 1px solid transparent;
transition:all .2s ease-in-out;
}
.footer-menu ul li a:hover {
border-bottom: 1px solid #fff;
}
.footer-contacts {
width: 35%;
}
.footer_phone {
font-weight: bold;
font-size: 36px;
line-height: 130%;
color: #FFFFFF;
}
.footer_address {
font-weight: normal;
font-size: 16px;
line-height: 140%;
color: #747681;
display: block;
margin: 14px 0px;
}
.copyright {
margin-top: 65px;
font-size: 14px;
line-height: 17px;
color: #747681;
}
.copyright a, .copyright a:hover, .copyright a:visited {
font-size: 14px;
line-height: 17px;
color: #747681;
display: block;
}
.copyright a:hover {
text-decoration: underline;
}
.copyright span {
width: 40%;
}
.copyright a {
width: 30%;
margin: 0px 0px;
}
.single-products-bg,
.single-page-bg {
position: relative;
height: auto;
min-height: 306px;
padding: 40px 0;
background-repeat: no-repeat;
background-attachment: unset;
background-size: cover;
background-position: top center;
display: flex;
align-items: center;
justify-content: flex-start;
}
.single-products-title,
.single-page-title {
position: relative;
top: 0px;
color: #fff;
width: 100%;
padding-top: 0;
z-index: 3;
}
.single-products-title h1,
.single-page-title h1 {
color: #fff;
max-width: 55%;
line-height: 135%;
font-weight: 600;
margin-bottom: 20px;
}
.single-page-title h1 {
max-width: 100%;
}
.single-products-title p,
.single-page-title p {
font-size: 18px;
line-height: 135%;
color: #BDBDBD;
}
.single-products {
background: #F1F2F3;
padding: 0;
}
.single-products .post_content {
padding: 90px 20px 60px;
box-sizing: border-box;
}
.single-products h4 {
font-size: 24px;
line-height: 107.6%;
color: #333333;
margin-bottom: 20px;
}
.single-products .post_content p {
margin: 20px 0px;
font-size: 18px;
line-height: 155%;
}
.single-products .post_content img.alignleft {
margin-right: 40px;
}
.single-products-slider {
margin-top: 60px;
}
.single-products-slide {
width: 48%;
margin: 0px 0%;
margin-right: 0%;
background-color: #000;
border-radius: 8px;
position: relative;
overflow: hidden;
}
/*
.single-products-slide:first-child {
margin-right: 0%;
margin-left: 0%
}
.single-products-slide:nth-child(2n) {
margin-right: 0%;
margin-left: 0%
}
.single-products-slide:last-child {
margin-right: 0%;
margin-left: 0%
} */
.single-post-slide {
width: 33%;
margin: 0px 0%;
margin-right: 0%;
background-color: #000;
border-radius: 8px;
position: relative;
overflow: hidden;
aspect-ratio: 5/3;
}
/*
.single-post-slide:first-child {
margin-right: 0%;
margin-left: 0%
}
.single-post-slide:nth-child(2n) {
margin-right: 0%;
margin-left: 0%
}
.single-post-slide:last-child {
margin-right: 0%;
margin-left: 0%
} */
.single-post-slider {
margin: 80px auto 0 !important;
}
.post-slider-progress {
position: relative;
height: 4px;
background: #E0E0E0;
border-radius: 4px;
margin: 24px 0 60px;
cursor: pointer;
}
.post-slider-thumb {
position: absolute;
left: 0;
top: 0;
height: 4px;
background: #27AE60;
border-radius: 4px;
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.post-slider-thumb.dragging {
cursor: grabbing;
}
.single-post-archive-slider {
margin: 80px auto 20px !important;
}
.single-page-slide {
background-color: #000;
position: relative;
aspect-ratio: 23/15;
}
.single-post-slide img {
max-width: 100%;
}
.zoomin {
width: 64px;
position: absolute;
height: 64px;
top: -100%;
left: 50%;
display: block;
margin-left: -32px;
background: url('images/zoomin.svg') no-repeat center center;
transition:all .2s ease-in-out;
}
.single-products-slide:hover .zoomin,
.single-post-slide:hover .zoomin,
.single-page-slide:hover .zoomin {
top: calc(50% - 32px);
}
.single-products-slide img,
.single-post-slide img,
.single-page-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
transition:all .2s ease-in-out;
}
.single-products-slide:hover img,
.single-post-slide:hover img,
.single-page-slide:hover img {
opacity: 0.55;
}
.slick-dots {
display: flex;
margin: 40px 0px 40px;
align-items: end;
position: relative;
bottom: auto;
}
.slick-dots li {
font-size: 0px;
height: 2px;
width: 100%;
background: transparent;
display: block;
margin: 0px 0px;
padding: 0px 0px;
}
.slick-dots li button {
font-size: 0px;
height: 2px;
width: 100%;
background: #CBCBCB;
display: block;
margin: 0px 0px;
padding: 0px 0px;
}
.slick-dots li.slick-active {
height: 3px;
}
.slick-dots li.slick-active button {
background: #219653;
height: 3px;
}
.slick-dots li button:before {
content: '';
display: none;
}
.more-products {
background: #F1F2F3;
padding: 20px 0px 80px;
}
.more-products h3 {
margin-bottom: 55px;
font-weight: bold;
font-size: 36px;
line-height: 44px;
color: #333333;
}
.single-products-more {
width: 48%;
margin: 0px 0%;
}
.single-products-thumb {
display: block;
}
.single-products-thumb img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
margin-bottom: 20px;
border-radius: 8px;
}
.single-products-thumb img:hover {
}
a.single-products-more-link, a.single-products-more-link:visited {
font-size: 24px;
line-height: 135%;
font-weight: bold;
display: block;
margin: 0px 0px;
color: #333333;
}
a.single-products-more-link {
padding-right: 60px;
}
a.single-products-more-link:hover {
text-decoration: underline;
}
.fancybox__html5video, .fancybox__iframe {
border: 4px solid #fff !important;
}
.category-page {
background: #F1F2F3;
}
.category-page-title {
height: auto;
padding: 48px 0px 40px;
background: #fff;
}
.category-page-title h1 {
font-weight: 600;
font-size: 52px;
line-height: 1.116;
color: #333333;
margin-bottom: 0;
}
.news-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
row-gap: 60px;
padding: 60px 0 80px;
}
.news-list .card-block {
width: 100%;
margin: 0;
}
.news-list .card-block-title {
font-size: 22px;
line-height: 132%;
}
.ctis-finished-notice {
display: none !important;
}
#infinite-handle, #ctis-loading {
position: absolute;
bottom: 0;
right: 0px;
}
.navigation {
display: none;
}
article.single-post {
background: #F1F2F3;
padding: 48px 20px 60px;
box-sizing: border-box;
}
.single-page-default {
background: #F1F2F3;
padding: 0px 0px 0px;
box-sizing: border-box;
}
.single-page-default h1 {
text-align: center;
width: 100%;
}
.single-page-default p {
margin: 35px 0px;
}
.single-page-default-subtitle {
text-align: center;
font-size: 18px;
line-height: 155%;
color: #BDBDBD;
}
.single-post h1 {
text-align: center;
padding: 70px 80px 20px;
font-weight: 600;
font-size: 42px;
box-sizing: border-box;
max-width: 1080px;
line-height: 135%;
color: #333333;
margin: 0px auto;
}
.single-post-content p {
max-width: 640px;
margin: 30px auto;
font-weight: normal;
font-size: 18px;
line-height: 145%;
color: #333333;
}
.single-post-content h2 {
max-width: 640px;
margin: 50px auto 20px;
font-weight: 600;
font-size: 34px;
line-height: 135%;
color: #333333;
}
.single-post-content p.wp-caption-text {
font-weight: normal;
max-width: 100%;
font-size: 16px;
line-height: 150%;
color: #828282;
text-align: left;
margin: 20px 10px;
}
.single-post-header {
justify-content: unset;
}
.backlink {
color: #303030;
display: inline-block;
width: calc(50% - 120px);
}
.backlink:visited {
color: #303030;
}
.backlink svg {
margin-right: 10px;
display: inline-block;
vertical-align: middle;
transition:all .2s ease-in-out;
}
.backlink:hover svg {
margin-right: 5px;
}
.single-post .date {
display: inline-block;
height: 32px;
background: #1E1E1E;
box-sizing: border-box;
font-size: 14px;
line-height: 32px;
padding: 0px 16px;
color: #F2F2F2;
margin: 0px 10px;
border-radius: 100px;
}
.single-post-menu {
text-align: left;
}
.single-post .about-link, .single-post .about-link:visited {
display: inline-block;
height: 32px;
background: #57B3E7;
box-sizing: border-box;
font-size: 14px;
line-height: 32px;
padding: 0px 16px;
color: #F2F2F2;
margin: 0px 10px;
border-radius: 100px;
}
.single-post .about-link:hover {
background: #27AE60;
}
.single-page {
background: #F1F2F3;
padding-bottom: 80px;
}
.single-page-content {
background: #fff;
width: 100%;
}
.single-page-wrap {
width: 100%;
max-width: 860px;
margin: 0px auto;
padding: 90px 20px;
box-sizing: border-box;;
}
.single-page-subtitle {
font-size: 18px;
line-height: 155%;
color: #BDBDBD;
}
.single-page-content blockquote {
font-size: 20px;
line-height: 140%;
color: #333333;
font-weight: 600;
display: block;
margin: 0 0 20px;
padding: 0px 20px 0 45px;
font-style: normal;
border-left: 4px solid #27AE60;
}
.single-page-content blockquote p {
font-size: 20px;
line-height: 140%;
color: #333333;
font-style: normal;
font-weight: 600;
}
.company-play {
font-weight: 600;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
color: #F2F2F2;
margin-top: 40px;
margin-right: 25px;
}
.company-play .play-text {
margin-right: 25px;
display: inline-block;
color: #fff;
vertical-align: middle;
}
.company-play .play-text:hover {
text-decoration: underline;
}
.company-play #play {
width: 60px;
height: 60px;
display: block;
position: relative;
right: auto;
top: auto;
left: auto;
margin: 0px;
}
.play-circle-wrapper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
overflow: visible;
vertical-align: middle;
}
.play-circle-text {
display: none;
position: absolute;
width: 79px;
height: 79px;
pointer-events: none;
animation: play-text-spin 8s linear infinite;
}
@keyframes play-text-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
ol.single-page-about-list {
counter-reset: items;
}
ol.single-page-about-list li {
display: block;
counter-increment: items;
font-size: 16px;
line-height: 125%;
/* Gray 3 */
color: #828282;
width: calc(55% - 60px);
padding-right: 60px;
margin: 40px 0px;
}
ol.single-page-about-list li:nth-child(2n) {
padding-right: 0px;
padding-left: 60px;
width: calc(45% - 60px);
}
ol.single-page-about-list li h5 {
font-weight: 600;
font-size: 22px;
line-height: 135%;
margin: 15px 0px;
color: #333333;
}
ol.single-page-about-list li:before {
content: "0" counter(items)" ";
display: block;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
color: #27AE60;
margin-bottom: 20px;
}
ol.single-page-about-list li:nth-child(n+10):before {
content: "00" counter(items)". ";
}
ol.single-page-about-list li:nth-child(n+100):before {
content: counter(items)" ";
}
.single-page-grid {
max-width: 1020px;
margin: 0px auto;
padding: 80px 0px 20px;
}
.single-page-grid h2 {
margin-bottom: 40px;
}
.single-page-slider {
padding-top: 0;
}
.page-slider-arrows {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 16px;
}
.page-slider-prev,
.page-slider-next {
position: relative;
width: 48px;
height: 48px;
border-radius: 100%;
border: 1px solid #27AE60;
background: transparent;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.page-slider-prev:hover,
.page-slider-next:hover {
background: #27AE60;
}
.page-slider-next::before {
content: '';
display: block;
background: url('images/arrows.svg') no-repeat top left;
position: absolute;
width: 10px;
top: 15px;
left: 50%;
margin-left: -4px;
height: 18px;
}
.page-slider-prev::before {
content: '';
display: block;
background: url('images/arrows.svg') no-repeat top right;
position: absolute;
width: 10px;
top: 15px;
left: 50%;
margin-left: -6px;
height: 18px;
}
.page-slider-prev:hover::before,
.page-slider-next:hover::before {
filter: contrast(0%) brightness(200%);
}
.single-page-slider .slick-slide {
margin: 0;
padding: 0;
}
.single-page-slider .slick-list {
margin: 0;
overflow: hidden !important;
}
.single-page-slider .single-page-slide,
.single-page-slider .single-page-slide img {
border-radius: 0;
}
.question-form {
max-width: 840px;
margin: 80px auto 0px;
background-color: #fff;
border-radius: 8px;
padding: 80px 80px;
box-sizing: border-box;
text-align: center;
font-weight: normal;
font-size: 16px;
line-height: 125%;
text-align: center;
color: #333333;
}
.question-form h4, .question-form h5 {
font-size: 26px;
line-height: 135%;
font-weight: 600;
text-align: center;
color: #333333;
margin-bottom: 0px;
}
.question-form .btn {
margin: 20px auto;
display: inline-block;
}
.fixed-form .btn {
margin: 20px auto;
display: inline-block;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
border-width: 2px;
border-style: solid;
border-color: #27AE60;
}
.single-page-contact {
padding: 80px 0px 80px;
}
.contacts-info {
width: 45%;
padding-bottom: 60px;
font-size: 18px;
line-height: 133%;
color: #333333;
}
.contacts-info div {
margin-bottom: 40px;
}
.contacts-info span {
font-size: 16px;
line-height: 133%;
display: block;
color: #828282;
margin-bottom: 12px;
}
.map {
width: 55%;
}
.archive-projects {
background: #F1F2F3;
}
.archive-project {
padding: 80px 0px 80px;
border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.archive-project .excerpt p,
.single-project .excerpt p {
font-weight: normal;
font-size: 16px;
line-height: 150%;
color: #828282;
}
.archive-project-title {
width: 50%;
}
.archive-project .single-post-slider,
.single-project .single-post-slider {
margin: 50px auto 30px !important;
}
.archive-project .slick-prev,
.archive-project .slick-next,
.single-project .slick-prev,
.single-project .slick-next {
top: -60px;
}
.archive-project-content {
width: calc(60% - 62px);
padding-right: 60px;
margin-top: 40px;
}
.archive-project-content, .archive-project-content p {
font-weight: normal;
font-size: 16px;
line-height: 150%;
color: #333333;
}
.archive-project-content p {
margin: 20px 0px;
}
.archive-project-content blockquote {
font-size: 20px;
line-height: 140%;
color: #333333;
font-weight: normal;
display: block;
margin: 0 0 60px;
padding: 0px 20px 0 45px;
font-style: normal;
border-left: 4px solid #27AE60;
}
.archive-project-content blockquote p {
font-size: 20px;
line-height: 140%;
color: #333333;
font-style: normal;
font-weight: normal;
}
.archive-project-extra {
width: 40%;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
border: 1px solid #E4E4E4;
margin-top: 40px;
padding: 40px 40px;
}
.archive-project-extra li {
margin: 15px 0px;
font-size: 16px;
line-height: 155%;
}
.documents {
padding: 80px 20px 80px;
box-sizing: border-box;
}
.doc {
position: relative;
}
.doc img {
border-radius: 8px;
width: 100%;
height: auto;
display: block;
margin-bottom: 20px;
}
.doc-title {
}
.doc-icon {
background-color: orangered;
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 4px 10px;
border-radius: 8px;
position: absolute;
top: -10px;
right: -10px;
}
/**
Hamburger
**/
.hamburger {
position: absolute;
top: 0px;
right: 0px;
margin-left: 0px;
margin-top: 0px;
width: auto;
height: auto;
z-index: 5;
background: #1C1C1C;
padding: 6px 20px 13px;
border-radius: 100px;
}
.hamburger div {
position: relative;
width: 30px;
height: 2px;
border-radius: 3px;
background-color: #fff;
margin-top: 8px;
transition: all 0.3s ease-in-out;
cursor: pointer;
}
/**
Animations
**/
#toggle:checked + .hamburger .top-bun {
transform: rotate(-45deg);
margin-top: 16px;
}
#toggle:checked + .hamburger .bottom-bun {
opacity: 0;
margin-top: 10px;
transform: rotate(45deg);
}
#toggle:checked + .hamburger .meat {
transform: rotate(45deg);
margin-top: -7px;
}
#toggle:checked + .hamburger + .nav {
top: 0;
transform: scale(1);
}
.header-mobile {
display: none;
}
#toggle {
display:none;
}
.header-mobile-menu {
position: fixed;
background: #323232;
top: 0px;
left: -100%;
z-index: 1;
width: 100%;
padding-top: 100px;
height: 100%;
transition: left .2s ease-in-out;
}
.header-mobile-top {
width: 100%;
}
.header-mobile-top a {
z-index: 2;
}
.header-mobile-top .alter-logo {
display:none;
}
.header-mobile-top.active .mobile-logo {
display: none;
}
.header-mobile-top.active .alter-logo {
display: inline-block;
}
.header-mobile-menu.show {
left: 0%;
}
.header-mobile-menu ul {
padding-left: 0em;
}
.header-mobile-menu ul li {
width: 100%;
display: block;
text-align: center;
margin: 20px auto;
}
.header-mobile-menu ul li a {
font-size: 22px;
line-height: 125%;
color: #E5E5E5;
font-weight: bold;
}
.header-mobile-menu ul li::before {
content: "";
color: #219653;
font-weight: bold;
display: none;
width: 1em;
margin-left: -1em;
}
.footer-mobile-menu ul {
padding-left: 0em;
}
.footer-mobile-menu ul li {
width: 100%;
display: block;
text-align: center;
margin: 25px auto;
}
.footer-mobile-menu ul li a {
font-size: 16px;
line-height: 125%;
color: #E5E5E5;
font-weight: normal;
}
.footer-mobile-menu ul li::before {
content: "";
color: #219653;
font-weight: bold;
display: none;
width: 1em;
margin-left: -1em;
}
.footer-mobile-menu {
display:none;
}
.wrapper {
overflow: hidden;
}
/* the slides */
.slick-slide {
margin: 0 16px;
}
/* the parent */
.slick-list {
margin: 0 -16px;
overflow: hidden !important;
}
.fixed-overlay {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
height: 100%;
min-height: 100vh;
background: rgba(0,0,0, 0.7);
z-index: 13;
display: none;
}
.fixed-form {
position: fixed;
left: 50%;
top: 50%;
width: calc(90% - 80px);
height: auto;
max-width: 460px;
padding: 40px 40px;
border-radius: 8px;
box-sizing: border-box;
background: #fff;
z-index: 14;
/* Скрытое состояние: чуть выше центра + уменьшено + прозрачно */
opacity: 0;
pointer-events: none;
transform: translate(-50%, -46%) scale(0.94);
transition:
opacity 0.25s ease,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fixed-form.show {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, -50%) scale(1);
}
/* .fixed-form.success {
bottom: 25%;
transform: translate(-50%, -50%);
} */
.fixed-form h4, .fixed-form h5 {
font-size: 24px;
line-height: 135%;
color: #333333;
}
input[type="text"], input[type="email"], textarea {
background: #D9D9D9;
border-radius: 4px;
padding: 12px 16px;
margin: 5px auto;
box-sizing: border-box;
width: 100%;
max-width: 320px;
font-size: 16px;
line-height: 100%;
border: 1px solid #D9D9D9;
font-family: 'Averta Std CY';
}
textarea {
height: 100px;
font-family: 'Averta Std CY';
font-size: 16px;
font-weight: normal;
font-style: normal;
resize: none;
}
.question-fixed-form {
text-align: center;
}
.wpcf7-form {
margin: 20px auto 0px;
}
.wpcf7-form p {
margin: 0px 0px;
}
.form-desc {
display: block;
}
.form-success {
color: #27AE60;
display: none;
}
.close {
background: #1C1C1C url('images/close.svg') no-repeat center center;
background-size: auto auto;
transition:all .2s ease-in-out;
width: 48px;
height: 34px;
padding: 10px 15px;
box-sizing: border-box;
display: block;
position: absolute;
top: -16px;
cursor: pointer;
right: -24px;
border-radius: 100px;
}
.close:hover {
background-color: #27AE60;
}
.wpcf7-not-valid-tip {
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: none !important;
}
.wpcf7-spinner {
visibility: hidden;
display: block;
background-color: #23282d;
position: absolute;
opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 auto;
position: absolute;
right: 20px;
bottom: 20px;
}
input[type="text"].wpcf7-not-valid, input[type="email"].wpcf7-not-valid, textarea.wpcf7-not-valid {
border-color: #dc3232;
}
.wpcf7-response-output {
display: none !important;
}
.single-page-slide {
border-radius: 8px;
}
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.homepage { height: 70vh; }
h2 {
font-size: 24px;
line-height: 125%;
}
.single-page-grid h2 {
margin-bottom: 20px;
}
.fixed-form {
width: calc(100% - 60px);
height: auto;
max-width: 460px;
padding: 20px 20px;
}
.form-desc p, .form-desc {
font-size: 14px;
}
.header-desktop {
display: none;
}
.header-mobile {
display: flex;
}
.mobile-logo img,
.alter-logo img {
display: block;
height: 35px;
width: auto;
}
.header-mobile-top .btn {
height: 35px;
line-height: 33px;
padding: 0 14px;
font-size: 14px;
}
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 48px;
height: 35px;
padding: 0 14px;
box-sizing: border-box;
}
.hamburger div {
width: 20px;
margin-top: 0;
}
.menu-triger {
width: 48px;
height: 35px;
position: relative;
display:block;
}
/*.homepage-first {
width: 100%;
height: 380px;
overflow: hidden;
box-sizing: border-box;
} */
/*#myVideo {
position:unset;
width: 100%;
height: 100%;
}
.home-first-content {
top: 0px;
height: 100%;
}
*/
h1.homepage-title {
font-size: 26px;
position: relative;
color: #F2F2F2;
text-align: center;
margin-top: 0;
font-weight: 600;
display: block;
padding: 0px 15px;
box-sizing: border-box;
transition: all .2s ease-in-out;
}
.home-first-content h1.homepage-title.show span {
left: 0px;
}
.home-first-content h1.homepage-title:before {
content: '';
display: none;
}
.home-first-content h1.homepage-title.show:before {
content: '';
display: none;
}
#play {
width: 60px;
height: 60px;
left: auto;
top: auto;
margin: 24px auto 0;
}
.slick-prev,
.slick-next {
display: none !important;
}
.mobile-contacts {
position: fixed;
width: 100%;
height: auto;
bottom: 30px;
text-align: center;
display: block;
}
.mobile_phone {
font-size: 20px;
line-height: 135%;
color: #FFFFFF;
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.mobile_address {
display: block;
text-align: center;
font-weight: normal;
font-size: 14px;
line-height: 135%;
text-align: center;
color: #848489;
}
.footer-menu ul li {
width: 100%;
}
.our-products {
padding: 30px 0px;
margin: 0px 0px;
overflow: hidden;
}
.homepage-list h2 {
font-size: 24px;
line-height: 44px;
margin: 0px 0px 20px;
padding: 0px 20px;
}
.error-page .homepage-list h2 {
font-size: 24px;
line-height: 34px;
margin: 0px 0px 0px;
padding: 20px 0px 10px;
}
.our-products-page {
padding: 40px 0px 80px;
}
.our-products-page .homepage-list h2 {
padding: 0px 0px;
}
.single-products {
background: #F1F2F3;
padding: 0px 0px 0px;
}
.more-products h3 {
font-size: 24px;
line-height: 44px;
margin: 0px 0px 20px;
padding: 0px 20px;
}
.archive-project {
padding: 30px 0px 30px;
}
.archive-project-title {
font-size: 20px;
line-height: 135%;
margin: 0px 0px 0px;
padding: 0px 20px;
width: 100%;
box-sizing: border-box;
}
.archive-project .excerpt {
padding: 20px 20px;
font-size: 12px;
}
.archive-project-content {
width: 100%;
margin-top: 0px;
padding: 0px 20px;
box-sizing: border-box;
}
.archive-project-extra {
width: 100%;
margin: 20px 20px;
padding: 20px 20px;
}
.archive-project .excerpt p, .single-project .excerpt p {
font-size: 12px;
}
.single-post-archive-slider {
margin: 40px 0px 20px !important;
}
.archive-project-content blockquote p {
font-size: 16px;
line-height: 140%;
}
.archive-project-content, .archive-project-content p {
font-size: 14px;
}
.archive-project-extra li {
font-size: 14px;
}
.archive-project-content blockquote {
margin: 0 0 30px;
padding: 0px 20px 0 25px;
}
.single-products-more {
width: 100%;
margin: 0px 0%;
}
a.single-products-more-link, a.single-products-more-link:visited {
font-size: 16px;
}
.card-block-title {
font-size: 20px;
line-height: 120%;
margin-bottom: 20px;
}
.homepage-thumbnail {
border-radius: 8px;
}
.homepage-thumbnail img {
width: 100%;
}
.why-we {
/* background: #fff;
padding: 30px 20px; */
background: #fff;
padding: 30px 0px;
margin: 0px 0px;
overflow: hidden;
}
.our-news {
background: #F1F2F3;
padding: 30px 0px;
margin: 0px 0px;
overflow: hidden;
}
.slick-dots {
margin: 0px auto 0px;
width: calc(100% - 32px);
}
/* the slides */
.slick-slide {
margin: 0 16px;
}
/* the parent */
.slick-list {
margin: 0 -16px;
overflow: hidden !important;
padding-right: 40px !important;
padding-left: 20px !important;
}
.card-block {
width: 100%;
}
.why-we .wrap-flex {
padding-left: 0px;
box-sizing: border-box;
}
.footer-menu {
display: none;
}
.footer-mobile-menu {
display: block;
width: 100%;
order: 0;
}
.footer-logo {
order: 1;
text-align: center;
display: block;
margin: 20px auto;
}
.footer-contacts {
width: 100%;
order: 2;
text-align: center;
}
.copyright span {
width: 100%;
text-align: center;
display: block;
font-size: 12px;
line-height: 15px;
margin: 0px auto 40px;
}
.footer_phone {
font-size: 20px;
}
.footer_address {
font-size: 16px;
}
.copyright a, .copyright a:hover, .copyright a:visited {
font-size: 10px;
line-height: 16px;
color: #747681;
display: block;
width: 50%;
text-align: center;
}
.single-products-bg, .single-page-bg {
background-attachment: initial;
background-size: cover;
min-height: auto;
/* padding-bottom: 40px; */
background-position: center center;
}
.single-products-title, .single-page-title {
box-sizing: border-box;
padding: 20px 20px 20px;
overflow: visible;
}
.single-products-title h1, .single-page-title h1 {
font-size: 24px;
max-width: 100%;
margin-bottom: 5px;
}
.single-products-title p, .single-page-title p {
font-size: 14px;
}
.single-products .post_content p {
padding-left: 0px !important;
font-size: 14px;
}
.single-products-slider {
margin-top: 0px;
}
.single-products .post_content img.alignleft {
margin-right: 20px;
}
.single-products h4 {
font-size: 18px;
line-height: 107.6%;
color: #333333;
margin: 10px 0px 10px;
}
.single-products .post_content {
padding: 40px 20px 20px;
box-sizing: border-box;
}
article.single-post {
padding: 24px 0px 20px;
}
.single-post-header {
padding: 0px 20px 0px;
display: block;
text-align: left;
}
.backlink {
display: block;
width: calc(100%);
margin: 0px 0px 0px;
}
.backlink svg {
margin-right: 10px;
display: inline-block;
margin-top: 3px;
vertical-align: top;
}
.single-post-menu {
text-align: center;
margin: 40px auto 0px;
}
.single-post h1 {
text-align: center;
padding: 30px 20px 20px;
font-size: 24px;
box-sizing: border-box;
line-height: 125%;
}
.single-project .excerpt {
padding: 10px 20px;
}
.single-project .single-post-slider {
margin: 20px auto 30px !important;
}
.category-page .wrapper {
padding: 0px 20px;
}
.news-list .card-block {
margin: 0;
}
.single-post-content {
padding: 0px 20px;
}
.single-post-content p {
max-width: 100%;
font-size: 14px;
margin: 20px auto 30px;
}
.single-post-content img,
.wp-caption.aligncenter,
.wp-caption {
width: auto !important;
max-width: 100% !important;
height: auto;
box-sizing: border-box;
}
.single-post-content p.wp-caption-text {
font-size: 14px;
line-height: 135%;
margin: 10px 0px;
}
.single-post-slider {
margin: 20px auto 0 !important;
}
.post-slider-progress {
margin: 24px 20px;
}
.single-page-subtitle {
font-size: 16px;
line-height: 145%;
color: #BDBDBD;
}
.company-play {
font-weight: 600;
font-size: 10px;
line-height: 20px;
width: auto;
flex-shrink: 0;
align-self: center;
margin-top: 0;
}
.single-page-title .wrap-flex > div:first-child {
min-width: 0;
flex: 1;
}
.page-id-19 .single-page-subtitle {
display: none;
}
.single-page-bg,
.single-page-title,
.single-page-title .wrapper {
overflow: visible;
}
.single-page {
}
.company-play #play {
width: 40px;
height: 40px;
}
.play-circle-wrapper {
width: 40px;
height: 40px;
}
.play-circle-text {
display: block;
width: 79px;
height: 79px;
}
.company-play .play-text {
display: none;
}
.single-page-wrap {
padding: 30px 20px;
}
.single-page-content blockquote {
margin: 0 0 20px;
padding: 0;
border-left: none;
font-size: 16px;
line-height: 140%;
}
.single-page-content blockquote::after {
content: '';
display: block;
width: 55px;
height: 4px;
background: #27AE60;
border-radius: 2px;
margin-top: 16px;
}
.single-page-content blockquote p {
font-size: 16px;
line-height: 140%;
font-weight: 600;
}
.single-page-grid {
padding: 40px 20px 20px;
}
ol.single-page-about-list li {
width: 100%;
padding-right: 0px;
margin: 20px 0px;
}
ol {
list-style-type: decimal;
margin: 0 0 0em 0em;
}
ol.single-page-about-list li:nth-child(2n) {
padding-right: 0px;
padding-left: 0px;
width: 100%;
}
ol.single-page-about-list li h5 {
font-size: 20px;
line-height: 125%;
}
.single-page-slider {
padding-top: 0px;
}
.page-slider-arrows {
display: none;
}
.single-page-slider .slick-slide {
margin: 0 16px;
}
.single-page-slider .slick-list {
margin: 0 -16px;
}
.single-page-slider .single-page-slide,
.single-page-slider .single-page-slide img {
border-radius: 8px;
}
.single-page-slide {
border-radius: 8px;
}
.question-form {
width: calc(100% - 40px);
margin: 40px auto 0px;
font-size: 14px;
padding: 40px 40px;
line-height: 135%;
}
.single-page-contact {
padding: 40px 20px 0px;
background: #F1F2F3;
}
.contacts-info {
width: 100%;
padding-bottom: 0px;
font-size: 16px;
}
.map {
width: 100%;
height: 280px;
border-radius: 8px;
}
.single-products-bg, .single-page-bg {
padding: 30px 0;
}
.category-page-title {
height: auto;
padding: 24px 0px 24px;
}
.category-page-title h1 {
font-size: 20px;
line-height: 125%;
}
.news-list {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 32px;
padding: 32px 0 60px;
}
.news-list .card-block {
width: 100%;
}
.single-page-default-subtitle {
text-align: center;
font-size: 12px;
}
.news-list .card-block-title {
font-size: 18px;
margin-bottom: 10px;
}
.date {
font-size: 14px;
}
}
@media only screen and (max-width: 320px) {
.header-mobile-top a.btn {
display: none;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.mobile-contacts {
display: none;
}
}
@media only screen and (min-width: 767px) and (max-width: 980px) {
.header-desktop {
display: none;
}
.header-mobile {
display: block;
}
.homepage-first {
max-height: none;
}
h1.homepage-title {
margin-top: 100px;
font-size: 46px;
}
.single-products-title, .single-page-title {
padding: 20px 20px;
box-sizing: border-box;
}
.single-products-title h1, .single-page-title h1 {
color: #fff;
max-width: 80%;
font-size: 36px;
margin-bottom: 5px;
}
#play {
width: 80px;
height: 80px;
left: auto;
top: auto;
margin: 40px auto 0;
}
.more-products h3 {
padding: 0px 20px;
}
.archive-project-title {
width: 80%;
padding: 0px 20px;
}
.single-products-title h1, .single-page-title h1 {
max-width: 100%;
margin-bottom: 5px;
}
.excerpt {
padding: 10px 20px 0px;
}
.archive-project-content {
width: calc(60% - 62px);
padding: 0px 20px 0px;
margin-top: 0px;
}
.archive-project-extra {
margin-top: 20px;
padding: 40px 0px 0px 40px;
}
.single-page-grid h2 {
margin-bottom: 40px;
padding: 0px 20px;
}
ol.single-page-about-list {
padding: 0px 20px;
margin: 0px 0px;
}
.single-page-slide {
border-radius: 8px;
}
.question-form {
max-width: 600px;
}
.news-list {
grid-template-columns: repeat(2, 1fr);
column-gap: 24px;
row-gap: 40px;
padding: 40px 20px 60px;
}
.news-list .card-block {
width: 100%;
}
.category-page-title h1 {
font-size: 36px;
padding: 0px 20px;
}
.single-post h1 {
font-size: 36px;
line-height: 125%;
}
.single-page-contact {
padding: 40px 20px 40px;
}
.contacts-info {
width: 50%;
padding: 0px 20px 0px 0px;
box-sizing: border-box;
}
.map {
width: 50%;
}
.homepage-list h2 {
}
.footer-menu ul li {
display: block;
margin: 0px 0px 15px;
list-style: none;
width: calc(45% - 0px);
margin-left: 0px;
}
.slick-dots {
margin: 0px auto 0px;
width: calc(100% - 32px);
}
/* the slides */
.slick-slide {
margin: 0 16px;
}
/* the parent */
.slick-list {
margin: 0 -16px;
overflow: hidden !important;
padding-right: 40px !important;
padding-left: 20px !important;
}
.footer_phone {
font-size: 28px;
}
.copyright {
text-align: center;
}
.mobile-contacts {
display: none;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
@media only screen and (min-width: 981px) and (max-width: 1180px) {
.header-menu ul li a {
font-size: 14px;
}
.header-menu ul li {
margin: 0 8px;
}
header .btn {
font-size: 13px;
padding: 0 14px;
height: 40px;
line-height: 38px;
}
.wrapper {
padding: 0px 20px;
}
}
@media only screen and (min-width: 1180px) and (max-width: 1240px) {
.header-menu ul li {
margin: 0 10px;
}
header .btn {
font-size: 14px;
padding: 0 16px;
height: 42px;
line-height: 40px;
}
}
@media only screen and (min-width: 1180px) and (max-width: 1280px) {
.wrapper {
padding: 0 20px;
}
}
/* Hero Section Styles */
.hero-section {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
margin-top: 0;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: 1;
}
/* Для правильного отображения на мобильных устройствах */
@media (max-aspect-ratio: 16/9) {
.hero-video {
width: auto;
height: 100%;
}
}
@media (min-aspect-ratio: 16/9) {
.hero-video {
width: 100%;
height: auto;
}
}
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
/* Отступ для контента под hero-section */
.site-main {
margin-top: 100vh;
}
/* === Page hero (shared across all pages) === */
.page-hero {
position: relative;
min-height: 306px;
box-sizing: border-box;
background: #4b4b4b center/cover no-repeat;
padding: 40px 0;
display: flex;
align-items: center;
justify-content: flex-start;
}
.page-hero .overlay {
background: rgba(0, 0, 0, 0.45);
}
.page-hero .wrapper {
position: relative;
z-index: 3;
width: 100%;
}
.page-hero h1 {
font-size: 52px;
line-height: 1.116;
color: #f2f2f2;
font-weight: 600;
margin: 0;
}
.page-hero-subtitle {
color: #bdbdbd;
font-size: 18px;
line-height: 28px;
margin-top: 12px;
}
/* === Contacts page === */
/* --- Content section --- */
.contacts-content {
background: #fff;
padding: 80px 0;
}
.contacts-layout {
display: flex;
gap: 20px;
align-items: flex-start;
}
.contacts-left {
flex: 1;
min-width: 0;
}
.contacts-right {
width: 740px;
flex-shrink: 0;
}
/* --- Contact items --- */
.contacts-item {
margin-bottom: 24px;
}
.contacts-label {
display: block;
color: #828282;
font-size: 16px;
line-height: normal;
}
.contacts-value {
display: block;
color: #333;
font-size: 18px;
line-height: 24px;
margin-top: 12px;
}
a.contacts-value:hover {
color: #27ae60;
}
/* --- Telegram button --- */
.contacts-telegram {
margin-top: 32px;
}
.contacts-telegram-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border: 1px solid rgba(26, 25, 25, 0.2);
border-radius: 8px;
transition: border-color 0.2s;
}
.contacts-telegram-btn:hover {
border-color: #27ae60;
}
/* --- Map --- */
.contacts-map {
border-radius: 8px;
overflow: hidden;
}
.contacts-map iframe {
width: 100%;
height: 406px;
display: block;
border: none;
}
/* --- Question form (contacts page override) --- */
.single-page-contacts .question-form {
max-width: 840px;
margin: 80px auto 0;
text-align: center;
background: #fff;
border-radius: 8px;
padding: 80px 262px;
}
.single-page-contacts .question-form h2,
.single-page-contacts .question-form h3,
.single-page-contacts .question-form h4 {
font-size: 28px;
font-weight: 600;
color: #333;
line-height: 1.026;
margin-bottom: 12px;
}
.single-page-contacts .question-form p {
font-size: 16px;
color: #333;
line-height: 19px;
margin-bottom: 32px;
}
.single-page-contacts .question-form .btn {
color: #fff;
}
.single-page-contacts .question-form .btn:hover {
color: #27AE60;
}
.single-page-contacts .question-form br {
display: none;
}
/* === Contacts — Mobile === */
@media (max-width: 767px) {
/* Hero */
.page-hero {
min-height: 259px;
box-sizing: border-box;
padding: 30px 0;
}
.page-hero .wrapper {
padding-left: 16px;
padding-right: 16px;
}
.page-hero h1 {
font-size: 20px;
}
.page-hero-subtitle {
font-size: 14px;
line-height: 18.5px;
}
/* Contacts section: gray bg (page background), 16px horizontal, no bottom padding */
.contacts-content {
background: transparent;
padding: 40px 16px 0;
}
.contacts-layout {
flex-direction: column;
gap: 40px;
}
.contacts-left,
.contacts-right {
width: 100% !important;
}
/* Contact items */
.contacts-label {
font-size: 14px;
}
.contacts-value {
font-size: 16px;
}
/* Map */
.contacts-map {
border-radius: 8px;
overflow: hidden;
}
.contacts-map iframe {
height: 286px;
}
/* Question form card: 289px wide, left-aligned heading */
.single-page-contacts .question-form {
width: calc(100% - 32px);
box-sizing: border-box;
padding: 40px 30px;
margin: 40px auto 0;
}
.single-page-contacts .question-form h2,
.single-page-contacts .question-form h3,
.single-page-contacts .question-form h4 {
font-size: 24px;
text-align: left;
margin-bottom: 10px;
}
.single-page-contacts .question-form p {
font-size: 14px;
max-width: 194px;
margin: 0 auto 20px;
}
}
/* ============================================================
Documentation page (page-633)
============================================================ */
.docs-content {
padding: 60px 0 80px;
}
.docs-heading {
font-size: 36px;
font-weight: 600;
line-height: 1.011;
color: #333;
margin: 0 0 36px;
}
.docs-sections {
display: flex;
flex-direction: column;
gap: 24px;
}
/* --- Cards grid --- */
.docs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.docs-card {
background: #fff;
border-radius: 8px;
padding: 32px 24px 25px;
display: flex;
flex-direction: column;
gap: 24px;
}
.docs-card-header {
display: flex;
gap: 16px;
align-items: center;
}
.docs-card-icon-wrap {
width: 80px;
height: 80px;
min-width: 80px;
background: #eef7f1;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.docs-icon-img {
width: 44px;
height: 44px;
object-fit: contain;
}
.docs-card-title {
font-size: 20px;
font-weight: 600;
line-height: 1.011;
color: #333;
margin: 0 0 8px;
}
.docs-card-desc {
font-size: 15px;
color: #303030;
line-height: normal;
margin: 0;
}
/* --- File list --- */
.docs-file-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.docs-file-item {
list-style: none;
border: 1px solid #ededed;
border-radius: 12px;
margin: 0;
transition: border-color 0.2s;
}
.docs-file-item::before {
content: none;
}
.docs-file-item:hover {
border-color: #27ae60;
}
.docs-file-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
text-decoration: none;
}
.docs-file-item:hover .docs-file-name {
color: #333;
}
.docs-file-left {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.docs-file-icon {
flex-shrink: 0;
}
.docs-file-name {
font-size: 14px;
color: #747681;
line-height: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.docs-file-meta {
color: #9a9ba3;
}
.docs-file-download {
flex-shrink: 0;
margin-left: 8px;
}
/* --- Актуальность документов --- */
.docs-actuality {
background: #eef7f1;
border-radius: 8px;
padding: 44px 52px 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
}
.docs-actuality-icon-wrap {
width: 80px;
height: 80px;
min-width: 80px;
background: #fff;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.docs-actuality-title {
font-size: 20px;
font-weight: 600;
line-height: 1.011;
color: #333;
margin: 0 0 8px;
}
.docs-actuality-desc {
font-size: 15px;
color: #303030;
line-height: normal;
margin: 0;
}
/* === Documentation — Mobile === */
@media (max-width: 767px) {
.docs-content {
padding: 32px 0 60px;
}
.docs-content .wrapper {
padding-left: 16px;
padding-right: 16px;
}
.docs-heading {
font-size: 20px;
margin-bottom: 20px;
}
.docs-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.docs-card {
padding: 32px 16px 24px;
gap: 16px;
}
.docs-card-icon-wrap {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 12px;
}
.docs-icon-img {
width: 32px;
height: 32px;
}
.docs-card-title {
font-size: 15px;
}
.docs-card-desc {
font-size: 13px;
}
.docs-file-list {
gap: 6px;
}
.docs-file-link {
padding: 16px 8px;
}
.docs-file-name {
font-size: 13px;
white-space: normal;
}
.docs-actuality {
flex-direction: column;
align-items: center;
padding: 32px 16px;
gap: 24px;
text-align: center;
}
.docs-actuality-title {
font-size: 15px;
}
.docs-actuality-desc {
font-size: 13px;
}
}
/* ============================================================
Vacancies page (page-431)
============================================================ */
.vacancy-content { padding: 60px 0 0; }
.vacancy-section-header { margin-bottom: 32px; max-width: 668px; }
.vacancy-section-header h2 { font-size: 36px; font-weight: 600; line-height: 1.011; color: #333; margin: 0 0 16px; }
.vacancy-section-header p { font-size: 16px; color: #303030; line-height: normal; margin: 0; }
.vacancy-list { display: flex; flex-direction: column; gap: 12px; }
.vacancy-card { background: #fff; border-radius: 8px; padding: 42px 52px 42px 53px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; transition: background 0.2s; position: relative; }
.vacancy-card:hover { background: #e9e9e9; }
.vacancy-title-block { width: 410px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.vacancy-title { font-size: 20px; font-weight: 600; line-height: 1.011; color: #333; margin: 0; }
.vacancy-desc { font-size: 16px; color: #303030; line-height: normal; margin: 0; }
.vacancy-meta-block { width: 242px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.vacancy-meta-item { display: flex; align-items: center; gap: 12px; font-size: 16px; color: #303030; line-height: normal; }
.vacancy-meta-icon { flex-shrink: 0; }
.vacancy-arrow { flex-shrink: 0; }
.vacancy-cta { padding: 60px 0 80px; text-align: center; }
.vacancy-cta-title { font-size: 36px; font-weight: 600; line-height: 1.011; color: #333; margin: 0 0 16px; }
.vacancy-cta-text { font-size: 16px; color: #303030; line-height: normal; margin: 0 auto 32px; max-width: 572px; }
/* Resume popup */
.resume-fixed-form { text-align: center; }
.resume-fixed-form h4 { font-size: 24px; font-weight: 600; color: #333; margin: 0 0 16px; }
.resume-fixed-form input[type="file"] {
width: 100%;
max-width: 320px;
background: #f8fdf9;
border: 1.5px dashed #27ae60;
border-radius: 8px;
padding: 10px 14px;
margin: 5px auto;
box-sizing: border-box;
font-size: 14px;
color: #747681;
cursor: pointer;
display: block;
}
.resume-fixed-form input[type="file"]::file-selector-button {
background: #27ae60;
border: none;
border-radius: 6px;
color: #fff;
font-family: 'Averta Std CY', sans-serif;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
margin-right: 10px;
cursor: pointer;
transition: background 0.2s;
}
.resume-fixed-form input[type="file"]::file-selector-button:hover {
background: #219a52;
}
/* Чекбокс согласия с обработкой персональных данных (CF7 acceptance) */
.wpcf7-acceptance {
display: block;
margin: 10px auto 10px;
}
.wpcf7-acceptance label {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 10px;
cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
min-width: 14px;
border: 1px solid #989898;
border-radius: 2px;
background: #fff;
cursor: pointer;
position: relative;
margin-top: 2px;
transition: background 0.15s, border-color 0.15s;
}
.wpcf7-acceptance input[type="checkbox"]:checked {
background: #27ae60;
border-color: #27ae60;
}
.wpcf7-acceptance input[type="checkbox"]:checked::after {
content: '';
display: block;
position: absolute;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
.wpcf7-acceptance .wpcf7-list-item-label {
font-size: 12px;
color: #9a9a9a;
line-height: 1.4;
font-weight: 400;
text-align: left;
max-width: 196px;
}
.wpcf7-acceptance .wpcf7-list-item-label a {
color: #9a9a9a;
text-decoration: underline;
text-underline-offset: 2px;
}
.wpcf7-acceptance .wpcf7-list-item-label a:hover {
color: #27ae60;
}
@media (max-width: 767px) {
.vacancy-content { padding: 32px 0 0; }
.vacancy-content .wrapper, .vacancy-cta .wrapper { padding-left: 16px; padding-right: 16px; }
.vacancy-section-header h2 { font-size: 20px; margin-bottom: 12px; }
.vacancy-section-header p { font-size: 14px; }
.vacancy-list { gap: 8px; }
.vacancy-card { flex-direction: column; padding: 22px 12px; align-items: flex-start; gap: 20px; position: relative; }
.vacancy-arrow { position: absolute; right: 10px; bottom: 10px; }
.vacancy-title-block { width: 100%; }
.vacancy-title { font-size: 16px; }
.vacancy-desc { font-size: 13px; }
.vacancy-meta-block { gap: 8px; }
.vacancy-meta-item { font-size: 13px; }
.vacancy-cta { padding: 40px 0 60px; }
.vacancy-cta-title { font-size: 24px; }
.vacancy-cta-text { font-size: 14px; }
.fixed-form .btn { margin: 10px auto 20px; width: 100%; }
}
/* ============================================================
КАТАЛОГ ПРОДУКТОВ — archive-products.php
============================================================ */
/* Страница целиком — серый фон как в Figma */
.catalog-page {
background: #f1f2f3;
min-height: calc(100vh - 87px);
padding: 40px 0 80px;
}
/* Заголовок */
.catalog-title {
font-size: 52px;
line-height: 1.116;
font-weight: 600;
color: #333333;
margin: 0 0 40px;
}
/* Строка фильтра + прайс-лист */
.catalog-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.catalog-filters {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* Pill-кнопки фильтра */
.catalog-pill {
display: inline-flex;
align-items: center;
padding: 14px 24px;
border-radius: 57px;
border: none;
background: #fff;
color: #303030;
font-size: 16px;
font-weight: 600;
font-family: 'Averta Std CY', sans-serif;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
line-height: normal;
}
.catalog-pill:hover { background: #f0f0f0; color: #303030; }
.catalog-pill.is-active {
background: #27AE60;
color: #fff;
}
.catalog-pill.is-active:hover { background: #219a52; }
/* Кнопка «Скачать прайс-лист» */
.catalog-prajs-btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 24px;
border-radius: 100px;
background: #fff;
color: #303030;
font-size: 16px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.2s;
}
.catalog-prajs-btn:hover { background: #f0f0f0; color: #303030; }
.catalog-prajs-btn svg { flex-shrink: 0; }
/* Сетка карточек — gap 16px по Figma */
.catalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* Карточка */
.catalog-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
transition: box-shadow 0.2s;
}
.catalog-card:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.12); }
/* Зона изображения: 242px высота, object-contain по Figma */
.catalog-card-img {
height: 242px;
width: 100%;
overflow: hidden;
background: #fff;
flex-shrink: 0;
}
.catalog-card-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform 0.3s;
}
.catalog-card:hover .catalog-card-img img { transform: scale(1.04); }
/* Контент карточки: px-24 pb-32, gap-4 между title и desc */
.catalog-card-body {
padding: 32px 24px 32px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.catalog-card-title {
font-size: 16px;
font-weight: 600;
color: #0c0c0c;
line-height: normal;
margin: 0;
}
.catalog-card-desc {
font-size: 14px;
font-weight: 400;
color: #0c0c0c;
line-height: normal;
margin: 0;
}
.catalog-empty { color: #828282; padding: 40px 0; font-size: 16px; }
/* Кнопка «Показать ещё» */
.catalog-load-wrap {
display: flex;
justify-content: center;
margin-top: 40px;
}
.catalog-load-more {
padding: 14px 48px;
border-radius: 100px;
background: #fff;
border: none;
color: #303030;
font-size: 16px;
font-weight: 600;
font-family: 'Averta Std CY', sans-serif;
cursor: pointer;
transition: background 0.2s;
}
.catalog-load-more:hover { background: #e8e8e8; }
.catalog-load-more.is-loading {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Состояние загрузки сетки при смене таба */
.catalog-grid.is-loading {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.15s;
}
/* ============================================================
КАРТОЧКА ПРОДУКТА — single-products.php
============================================================ */
.single-products { background: #f1f2f3; }
/* Тэглайн + заголовок */
.sp-header { padding: 36px 0 0; }
.sp-tagline { font-size: 14px; color: #303030; line-height: normal; margin-bottom: 16px; }
.sp-title { font-size: 52px; line-height: 1.116; font-weight: 700; color: #333; margin: 0; }
/* Блок галерея + инфо */
.sp-body { padding: 36px 0 0; }
.sp-product-row { display: flex; align-items: flex-start; gap: 60px; }
/* Галерея */
.sp-gallery { display: flex; gap: 8px; flex-shrink: 0; }
.sp-gallery-main {
width: 524px;
height: 400px;
background: #fff;
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
}
.sp-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.sp-gallery-main model-viewer { width: 100%; height: 100%; background: transparent; }
.sp-model-download {
position: absolute;
bottom: 12px;
right: 16px;
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #666;
text-decoration: none;
z-index: 2;
transition: color 0.2s;
}
.sp-model-download:hover { color: #27ae60; }
.sp-gallery-thumbs { display: flex; flex-direction: column; gap: 8px; }
.sp-thumb {
width: 92px;
height: 71px;
background: #fff;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid transparent;
transition: border-color 0.2s;
flex-shrink: 0;
position: relative;
}
.sp-thumb.is-active { border-color: #27ae60; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb-3d {
position: absolute;
bottom: 4px;
left: 4px;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
color: #fff;
background: #27ae60;
border-radius: 4px;
padding: 3px 5px;
}
/* Инфо-колонка */
.sp-info { flex: 1; min-width: 0; padding-top: 4px; }
.sp-artikul-row { font-size: 13px; color: #303030; display: flex; gap: 4px; align-items: baseline; }
.sp-artikul-label { font-weight: 400; }
.sp-artikul-val { font-weight: 700; }
.sp-divider { border: none; border-top: 1px solid #e0e0e0; margin: 20px 0 24px; }
.sp-chars-label { font-size: 12px; color: #303030; margin-bottom: 24px; }
.sp-chars-table { display: flex; flex-direction: column; }
.sp-char-row { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 25px; }
.sp-char-row:last-of-type { margin-bottom: 25px; }
.sp-char-hidden { display: none !important; }
.sp-char-name { font-size: 14px; font-weight: 700; color: #303030; }
.sp-char-val { font-size: 14px; font-weight: 400; color: #303030; }
.sp-chars-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 5px;
padding: 14px 19px;
background: #fff;
border: none;
border-radius: 57px;
font-size: 16px;
font-weight: 600;
color: #303030;
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
}
.sp-chars-toggle:hover { background: #27ae60; color: #fff; }
.sp-chars-toggle:hover .sp-chars-icon path { stroke: #fff; }
.sp-chars-icon { transition: transform 0.25s; }
.sp-chars-toggle.is-open .sp-chars-icon { transform: scaleY(-1); }
.sp-deadline-btn { width: 100%; margin-top: 20px; box-sizing: border-box; }
/* Пилюльные якоря */
.sp-tabs-wrap { padding: 36px 0 0; }
.sp-tabs { display: flex; gap: 9px; flex-wrap: wrap; }
.sp-tab {
display: inline-block;
text-decoration: none;
border: none;
padding: 14px 24px;
border-radius: 57px;
background: #fff;
color: #303030;
font-size: 16px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: background 0.2s, color 0.2s;
}
.sp-tab:hover { background: #27ae60; color: #fff; }
.sp-tab.is-active { background: #27ae60; color: #fff; }
.sp-tab.is-active:hover { background: #27ae60; color: #fff; }
/* Секции контента — всегда видимы, якорная навигация */
.sp-section { display: block; padding: 60px 0; scroll-margin-top: 100px; }
.sp-section-title { font-size: 36px; line-height: 1.011; font-weight: 700; color: #333; margin: 0 0 40px; }
.sp-media-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.sp-media-header .sp-section-title { margin-bottom: 0; }
.sp-media-header .page-slider-arrows { margin-bottom: 0; }
/* Описание */
.sp-desc-layout { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; }
.sp-desc-left { flex: 1; min-width: 0; max-width: 668px; }
.sp-desc-text { margin-bottom: 32px; }
.sp-desc-text h3 { font-size: 20px; font-weight: 700; color: #333; margin: 0 0 8px; }
.sp-desc-text p { font-size: 16px; color: #303030; line-height: normal; }
.sp-features { display: flex; flex-direction: column; gap: 24px; }
.sp-feature { display: flex; gap: 24px; align-items: flex-start; }
.sp-feature-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: #27ae60;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.sp-feature-icon img { width: 34px; height: 34px; object-fit: contain; }
.sp-feature-body { flex: 1; min-width: 0; }
.sp-feature-title { font-size: 16px; font-weight: 700; color: #303030; margin: 0 0 8px; line-height: normal; }
.sp-feature-text { font-size: 16px; font-weight: 400; color: #303030; margin: 0; line-height: normal; }
.sp-desc-right { flex-shrink: 0; width: 291px; }
.sp-desc-image-card {
background: #e8e8e8;
border-radius: 8px;
overflow: hidden;
height: 504px;
position: relative;
}
/* Логотип компании — абсолютно, 40px, прижат к левому верхнему углу */
.sp-desc-logo {
position: absolute;
top: 20px;
left: 20px;
width: 40px;
height: auto;
z-index: 1;
object-fit: contain;
}
/* Фото товара — на всю карточку */
.sp-desc-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Фото/видео */
/* Медиа: без слайдера — просто flex-ряд */
.sp-media-row {
display: flex;
gap: 16px;
flex-wrap: nowrap;
}
/* Обёртка слайда в non-slider режиме */
.sp-media-row:not(.slick-initialized) .sp-media-slide {
flex-shrink: 0;
width: 416px;
}
/* Slick: сбрасываем глобальные margin/padding ДО и ПОСЛЕ инициализации.
Без pre-init сброса jQuery 2.x рекурсивно зависает на вычислении width() на мобиле. */
.sp-media-slider .slick-list {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
.sp-media-slider .slick-slide {
margin: 0 !important;
}
/* После инициализации — overflow visible для peek-эффекта */
.sp-media-slider.slick-initialized {
display: block;
}
.sp-media-slider.slick-initialized .slick-list {
overflow: visible !important;
}
/* Снимаем overflow:hidden со всей цепочки родителей в секции медиа */
#sp-media,
#sp-media .wrapper {
overflow: visible;
}
/* padding создаёт gap между слайдами */
.sp-media-slider.slick-initialized .slick-slide {
margin: 0 !important;
padding: 0 8px;
box-sizing: border-box;
height: 265px;
}
/* Элемент медиа */
.sp-media-item {
height: 265px;
border-radius: 8px;
overflow: hidden;
position: relative; /* якорь для position:absolute детей */
background: #e8e8e8; /* нейтральный фон если картинка не загрузилась */
}
/* Ссылка-обёртка растягивается на весь блок абсолютом */
.sp-media-item a {
position: absolute;
inset: 0;
display: block;
text-decoration: none;
}
.sp-media-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Видео-слайд: тёмный фон, кнопка play поверх */
.sp-media-item--video { background: #111; }
.sp-media-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: none;
display: flex;
transition: opacity 0.2s;
}
.sp-media-item--video a:hover .sp-media-play-btn { opacity: 0.8; }
/* Документация */
.sp-docs-grid { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.sp-docs-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 21px; }
.sp-docs-col-title { font-size: 16px; font-weight: 700; color: #333; line-height: 1.011; margin: 0; }
.sp-docs-list { display: flex; flex-direction: column; gap: 8px; }
.sp-doc-card {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #ededed;
border-radius: 12px;
padding: 16px;
text-decoration: none;
transition: border-color 0.2s;
}
.sp-doc-card:hover { border-color: #27ae60; }
.sp-doc-left { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; }
.sp-doc-icon { flex-shrink: 0; }
.sp-doc-name { font-size: 14px; color: #747681; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-doc-dl { flex-shrink: 0; margin-left: 8px; color: #27ae60; }
/* Другие наши продукты */
.sp-more-products { background: #e8e8e8; padding: 60px 0; }
.sp-more-title { font-size: 36px; font-weight: 700; color: #333; line-height: 1.011; margin: 0 0 40px; }
.sp-related { background: #e8e8e8; padding: 60px 0; }
.sp-related-title { font-size: 36px; font-weight: 700; color: #333; line-height: 1.011; margin: 0 0 40px; }
.sp-related-grid { display: flex; gap: 16px; }
.sp-related-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s;
}
.sp-related-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.sp-related-cover {
height: 242px;
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.sp-related-cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.3s;
}
.sp-related-card:hover .sp-related-cover img { transform: scale(1.04); }
.sp-related-content {
padding: 32px 24px 32px;
display: flex;
flex-direction: column;
gap: 4px;
}
.sp-related-name { font-size: 16px; font-weight: 700; color: #0c0c0c; margin: 0; }
.sp-related-sub { font-size: 14px; font-weight: 400; color: #0c0c0c; margin: 0; }
/* ============================================================
ACF ADMIN: языковые табы (admin-multilang.js)
============================================================ */
.cae-ml { position: relative; }
.cae-ml-tabs { display: flex; margin-bottom: 4px; }
.cae-ml-tab {
padding: 3px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
background: #f0f0f1;
border: 1px solid #c3c4c7;
border-bottom: none;
cursor: pointer;
color: #50575e;
transition: background 0.15s;
}
.cae-ml-tab:first-child { border-radius: 3px 0 0 0; }
.cae-ml-tab:last-child { border-radius: 0 3px 0 0; }
.cae-ml-tab.is-active {
background: #fff;
color: #1d2327;
font-weight: 800;
position: relative;
}
.cae-ml-field {
width: 100% !important;
box-sizing: border-box;
border-top-left-radius: 0 !important;
}
/* ============================================================
КАТАЛОГ — МОБИЛЬНАЯ ВЕРСИЯ
============================================================ */
@media only screen and (max-width: 767px) {
/* Архив — каталог */
.catalog-page { padding: 38px 0 48px; }
.catalog-page .wrapper { padding-left: 16px; padding-right: 16px; overflow: visible; }
.catalog-title { font-size: 24px; line-height: 0.99; margin-bottom: 16px; }
/* Кнопка прайса идёт первой, фильтры под ней */
.catalog-controls { flex-direction: column; align-items: stretch; gap: 0; margin-bottom: 16px; overflow: visible; }
.catalog-prajs-btn {
order: -1;
display: flex;
box-sizing: border-box;
width: 100%;
height: 34px;
font-size: 12px;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}
/* Фильтры: выходят за рамки wrapper на всю ширину экрана,
но с 16px отступом слева и справа при скролле */
.catalog-filters {
flex-wrap: nowrap;
overflow-x: auto;
gap: 4px;
margin-top: 20px;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 4px;
}
.catalog-filters::-webkit-scrollbar { display: none; }
.catalog-pill { padding: 6px 12px; font-size: 12px; flex-shrink: 0; }
/* Сетка карточек */
.catalog-grid { grid-template-columns: 1fr; gap: 16px; }
.home .catalog-grid { padding: 0px 15px; box-sizing: border-box; }
.catalog-card-img { height: 168px; }
.catalog-card-body { padding: 12px 24px 20px; }
.catalog-card-title { font-size: 14px; }
.catalog-card-desc { font-size: 12px; }
/* Кнопка «Показать ещё» */
.catalog-load-wrap { margin-top: 24px; }
.catalog-load-more { font-size: 14px; padding: 12px 32px; }
/* Пустой список */
.catalog-empty { font-size: 14px; padding: 24px 0; }
/* Карточка продукта */
.single-products .wrapper { padding-left: 16px; padding-right: 16px; overflow: visible; }
.sp-header { padding: 24px 0 0; }
.sp-tagline { font-size: 13px; }
.sp-title { font-size: 24px; }
.sp-body { padding: 24px 0 0; }
.sp-product-row { flex-direction: column; gap: 24px; }
/* Галерея */
.sp-gallery { flex-direction: column; width: 100%; }
.sp-gallery-main { width: 100%; height: 220px; border-radius: 8px; }
.sp-gallery-thumbs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
.sp-gallery-thumbs::-webkit-scrollbar { display: none; }
.sp-thumb { width: 74px; height: 56px; flex-shrink: 0; }
/* Инфо-колонка */
.sp-info {
width: 100%;
}
/* Табы — горизонтальный скролл за границы wrapper */
.sp-tabs-wrap {
overflow-x: auto;
padding: 24px 0 0;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
width: 100%;
}
.sp-tabs-wrap::-webkit-scrollbar { display: none; }
.sp-tabs { flex-wrap: nowrap; padding-right: 16px; }
.sp-tab { white-space: nowrap; font-size: 12px; padding: 6px 12px; }
/* Секции */
.sp-section { padding: 40px 0; }
.sp-section-title { font-size: 24px; margin-bottom: 20px; }
.sp-media-header { margin-bottom: 20px; }
/* Описание */
.sp-desc-layout { flex-direction: column; gap: 24px; }
.sp-desc-left { max-width: 100%; }
.sp-desc-right { width: 100%; }
.sp-desc-image-card { height: 260px; margin: 40px 0px 0px; }
.sp-desc-logo { width: 30px; top: 14px; left: 14px; }
.sp-desc-text h3 { font-size: 16px; }
.sp-desc-text p { font-size: 13px; }
/* Иконки-фичи */
.sp-feature-icon { width: 40px; height: 40px; }
.sp-feature-icon img { width: 24px; height: 24px; }
.sp-feature-title { font-size: 13px; }
.sp-feature-text { font-size: 13px; line-height: 20px; }
.sp-features { gap: 16px; }
/* Характеристики */
.sp-chars-label { font-size: 12px; margin-bottom: 15px; }
.sp-char-name { font-size: 12px; }
.sp-char-val { font-size: 12px; }
.sp-chars-toggle { margin-top: 5px; font-size: 14px; }
/* Фото/видео: CSS горизонтальный скролл (слайдер не инициализируется на мобиле) */
.sp-media-row {
flex-wrap: nowrap;
overflow-x: auto;
gap: 10px;
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 16px; /* snap-точка совпадает с grid-отступом */
}
.sp-media-row::-webkit-scrollbar { display: none; }
.sp-media-row .sp-media-slide,
.sp-media-row:not(.slick-initialized) .sp-media-slide {
flex-shrink: 0;
width: 234px;
scroll-snap-align: start;
}
.sp-media-item { height: 149px; }
/* Документация — плоский список на мобиле (без карточек) */
.sp-docs-grid { flex-direction: column; gap: 16px; }
.sp-docs-col { gap: 8px; }
.sp-docs-col-title { font-size: 14px; }
.sp-doc-card {
background: none;
border: none;
border-radius: 0;
padding: 0;
}
.sp-doc-card:hover { border-color: transparent; }
.sp-doc-left { gap: 11px; }
.sp-doc-icon { width: 20px; height: 20px; }
.sp-doc-icon svg { width: 20px; height: 20px; }
.sp-doc-name { font-size: 12px; color: #303030; white-space: normal; }
.sp-doc-dl { display: none; }
/* Другие продукты */
.sp-more-products { padding: 40px 0; }
.sp-more-title { font-size: 24px; margin-bottom: 24px; }
.sp-related { padding: 40px 0; }
.sp-related-title { font-size: 24px; margin-bottom: 24px; }
.sp-related-grid { flex-direction: column; gap: 16px; }
.sp-related-cover { height: 168px; }
.sp-related-content { padding: 12px 24px 20px; }
.sp-related-name { font-size: 14px; }
.sp-related-sub { font-size: 12px; }
}
/* ============================================================
КАРТОЧКА ПРОДУКТА — ПЛАНШЕТ 768px–1080px
Две колонки по 50%, уменьшенный gap
============================================================ */
@media only screen and (min-width: 768px) and (max-width: 1080px) {
/* Отступы от краёв экрана (на 768-980 их нет совсем) */
.single-products .wrapper { padding-left: 20px; padding-right: 20px; overflow: visible; }
/* Уменьшаем gap между колонками */
.sp-product-row { gap: 24px; }
/* Галерея — ровно 50% ширины, thumbs уходят под main */
.sp-gallery { width: calc(50% - 12px); flex-direction: column; }
.sp-gallery-main { width: 100%; height: 300px; }
.sp-gallery-thumbs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
.sp-gallery-thumbs::-webkit-scrollbar { display: none; }
.sp-thumb { flex-shrink: 0; }
/* Инфо-колонка — оставшиеся 50% */
.sp-info { flex: none; width: calc(50% - 12px); }
}
/* Language switcher in mobile menu (dark background) */
.header-mobile-menu .language-chooser {
justify-content: center;
margin: 20px 0;
}
/* Сбрасываем li-стили мобильного меню, которые ломают flex-строку */
.header-mobile-menu .language-chooser li {
display: flex;
align-items: center;
width: auto;
margin: 0 3px;
text-align: left;
}
/* Восстанавливаем разделитель, сбрасывая width/margin от ul li::before */
.header-mobile-menu .language-chooser li + li::before {
display: block;
width: 1px;
height: 14px;
margin: 0 6px;
margin-left: 0;
background: rgba(255,255,255,0.3);
color: transparent;
font-size: 0;
}
.header-mobile-menu .language-chooser li.lang-ru a span::before,
.header-mobile-menu .language-chooser li.lang-en a span::before { color: rgba(255,255,255,0.55); }
.header-mobile-menu .language-chooser li.active.lang-ru a span::before,
.header-mobile-menu .language-chooser li.active.lang-en a span::before { color: #fff; }