/home/bdqbpbxa/demo-subdomains/smt.goodface.com.ua/wp-content/themes/smt/css/style.css
@font-face {
font-family: 'TT Firs Neue';
font-display: block;
src: url('../woff/ttfirsneue-black.woff') format('woff');
font-weight: 900;
}
@font-face {
font-family: 'TT Firs Neue';
font-display: block;
src: url('../woff/ttfirsneue-demibold.woff') format('woff');
font-weight: 600;
}
@font-face {
font-family: 'TT Firs Neue';
font-display: block;
src: url('../woff/ttfirsneue-regular.woff') format('woff');
font-weight: normal;
}
html {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html * {
box-sizing: inherit;
-webkit-box-sizing: inherit;
}
body {
display: flex;
display: -webkit-flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
font-family: 'TT Firs Neue';
background: #E1E1E1;
color: #0C0E0F;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
p {
margin: 0;
}
a {
text-decoration: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
img, svg {
display: block;
}
img {
-webkit-user-drag: none;
}
input {
display: flex;
display: -webkit-flex;
align-items: center;
width: 100%;
height: 80px;
background: #262829;
border: 1px solid transparent;
border-radius: 0;
-webkit-border-radius: 0;
outline: none;
margin: 0;
padding: 0 32px;
-webkit-appearance: none;
font-family: inherit;
font-weight: 600;
font-size: 20px;
line-height: 28px;
color: #E1E1E1;
transition: border-color .25s ease, opacity .25s ease;
-webkit-transition: border-color .25s ease, opacity .25s ease;
}
input[type="tel"] {
opacity: 0;
height: 78px;
border: none;
}
input[type="file"] {
display: none;
}
input[type="submit"] {
height: 104px;
justify-content: center;
background: #FF6501;
box-shadow: 0px 24px 40px rgba(255, 101, 1, .4);
-webkit-box-shadow: 0px 24px 40px rgba(255, 101, 1, .4);
border: none;
color: #0C0E0F;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: box-shadow .25s ease;
-webkit-transition: -webkit-box-shadow .25s ease;
}
input[type="submit"]:hover {
box-shadow: none;
-webkit-box-shadow: none;
}
input::-webkit-input-placeholder {
color: rgba(225, 225, 225, .4);
}
label {
display: block;
-webkit-tap-highlight-color: transparent;
font-size: 20px;
line-height: 28px;
color: rgba(225, 225, 225, .4);
position: absolute;
left: 32px;
top: 50%;
margin-top: -14px;
cursor: text;
transform-origin: 0 50%;
-webkit-transform-origin: 0 50%;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transition: transform .25s ease;
-webkit-transition: -webkit-transform .25s ease;
}
.form-focus label {
transform: translate3d(0, -20px, 0) scale3d(.6, .6, 1);
-webkit-transform: translate3d(0, -20px, 0) scale3d(.6, .6, 1);
}
.form-focus input[type="tel"] {
opacity: 1;
}
.container {
position: relative;
width: 100%;
max-width: 1204px;
margin: 0 auto;
font-size: 0;
}
.row-container {
display: flex;
display: -webkit-flex;
justify-content: space-between;
}
.left, .right {
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
}
.row {
position: relative;
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
margin: 0 -32px;
}
.col {
position: relative;
padding: 0 32px;
}
.col-1 {
flex: 0 1 8.33333333333%;
max-width: 8.33333333333%;
}
.col-2 {
flex: 0 1 16.6666666667%;
max-width: 16.6666666667%;
}
.col-3 {
flex: 0 1 25%;
max-width: 25%;
}
.col-4 {
flex: 0 1 33.3333333333%;
max-width: 33.3333333333%;
}
.col-5 {
flex: 0 1 41.6666666667%;
max-width: 41.6666666667%;
}
.col-6 {
flex: 0 1 50%;
max-width: 50%;
}
.col-7 {
flex: 0 1 58.3333333333%;
max-width: 58.3333333333%;
}
.col-8 {
flex: 0 1 66.6666666667%;
max-width: 66.6666666667%;
}
.col-9 {
flex: 0 1 75%;
max-width: 75%;
}
.col-10 {
flex: 0 1 83.3333333333%;
max-width: 83.3333333333%;
}
.col-11 {
flex: 0 1 91.6666666667%;
max-width: 91.6666666667%;
}
.col-12 {
flex: 0 1 100%;
max-width: 100%;
}
.no-scroll, .scroll {
position: fixed;
width: 100%;
}
.no-scroll body {
overflow-y: scroll;
}
.scroll body {
overflow-y: hidden;
}
.heading {
position: relative;
font-weight: 900;
}
.heading1 {
font-size: 56px;
line-height: 64px;
}
.heading2 {
font-size: 32px;
line-height: 40px;
}
.text {
position: relative;
}
.text1 {
font-size: 20px;
line-height: 28px;
}
.text2 {
font-size: 16px;
line-height: 24px;
}
.uppercase {
text-transform: uppercase;
}
.demibold {
font-weight: 600;
}
.center {
text-align: center;
}
.black-color {
color: #0C0E0F;
}
.gray-color {
color: #E1E1E1;
}
.orange-color {
color: #FF6501;
}
.light-background {
background: #E1E1E1;
}
.dark-background {
background: #0C0E0F;
}
.link {
display: inline-block;
position: relative;
font-size: 20px;
color: #FF6501;
text-shadow: 0px 4px 4px rgba(255, 101, 1, .5);
transition: color .25s ease, text-shadow .25s ease;
-webkit-transition: color .25s ease, text-shadow .25s ease;
}
.link:hover {
text-shadow: none;
}
.phone-link {
font-weight: 600;
text-shadow: none;
}
.phone-link-big {
font-size: 140px;
color: #E1E1E1;
padding-left: 140px;
letter-spacing: -2px;
}
.phone-link-big:hover {
color: #FF6501;
}
.phone-link-small {
font-size: 14px;
color: #0C0E0F;
padding-left: 28px;
}
.phone-link-small:hover {
color: #FF6501;
}
.phone-link-small:before, .phone-link-small:after {
content: '';
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
}
.phone-link-small:before {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsPSIjMEMwRTBGIiBkPSJNMTUuNTQzIDExLjMwNmwtMy41LTEuNWEuNzUuNzUgMCAwMC0uODc1LjIxNmwtMS41NSAxLjg5NGExMS41ODMgMTEuNTgzIDAgMDEtNS41MzctNS41MzdsMS44OTQtMS41NWEuNzQ4Ljc0OCAwIDAwLjIxNi0uODc1bC0xLjUtMy41YS43NTUuNzU1IDAgMDAtLjg2LS40MzVMLjU4MS43N0EuNzUuNzUgMCAwMDAgMS41QzAgOS41MTYgNi40OTcgMTYgMTQuNSAxNmEuNzUuNzUgMCAwMC43MzEtLjU4MWwuNzUtMy4yNWEuNzU4Ljc1OCAwIDAwLS40MzgtLjg2M3oiLz4KPC9zdmc+) center/contain no-repeat;
opacity: 1;
}
.phone-link-small:hover:before {
opacity: 0;
}
.phone-link-small:after {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBmaWxsPSIjRkY2NTAxIiBkPSJNMTUuNTQzIDExLjMwNmwtMy41LTEuNWEuNzUuNzUgMCAwMC0uODc1LjIxNmwtMS41NSAxLjg5NGExMS41ODMgMTEuNTgzIDAgMDEtNS41MzctNS41MzdsMS44OTQtMS41NWEuNzQ4Ljc0OCAwIDAwLjIxNi0uODc1bC0xLjUtMy41YS43NTUuNzU1IDAgMDAtLjg2LS40MzVMLjU4MS43N0EuNzUuNzUgMCAwMDAgMS41QzAgOS41MTYgNi40OTcgMTYgMTQuNSAxNmEuNzUuNzUgMCAwMC43MzEtLjU4MWwuNzUtMy4yNWEuNzU4Ljc1OCAwIDAwLS40MzgtLjg2M3oiLz4KPC9zdmc+) center/contain no-repeat;
opacity: 0;
}
.phone-link-small:hover:after {
opacity: 1;
}
.phone-link-big:before {
content: '';
display: block;
width: 96px;
height: 96px;
position: absolute;
left: 0;
top: 50%;
margin-top: -48px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDgiIGhlaWdodD0iMTA4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTA4IDEwOCI+CiAgPHBhdGggZmlsbD0iI0ZGNjUwMSIgZD0iTTEwNC45MTggNzYuMzE1TDgxLjI5MyA2Ni4xOWE1LjA2MyA1LjA2MyAwIDAwLTUuOTA2IDEuNDU2TDY0LjkyNCA4MC40MjlhNzguMTg2IDc4LjE4NiAwIDAxLTM3LjM3Ni0zNy4zNzdMNDAuMzMxIDMyLjU5YTUuMDUgNS4wNSAwIDAwMS40NTYtNS45MDZMMzEuNjYyIDMuMDU5QTUuMDk2IDUuMDk2IDAgMDAyNS44Ni4xMjdMMy45MjMgNS4xODlBNS4wNjMgNS4wNjMgMCAwMDAgMTAuMTIzYzAgNTQuMTA2IDQzLjg1NCA5Ny44NzUgOTcuODc1IDk3Ljg3NWE1LjA2MiA1LjA2MiAwIDAwNC45MzYtMy45MjNsNS4wNjItMjEuOTM4YTUuMTIxIDUuMTIxIDAgMDAtMi45NTUtNS44MjJ6Ii8+Cjwvc3ZnPg==) center/contain no-repeat;
filter: drop-shadow(0px 8px 24px rgba(255, 101, 1, .4));
-webkit-filter: drop-shadow(0px 8px 24px rgba(255, 101, 1, .4));
}
.mail-link {
font-weight: 900;
font-size: 56px;
letter-spacing: 1px;
text-transform: uppercase;
}
.mail-link:hover {
color: #E65C02;
}
.button {
position: relative;
display: inline-flex;
display: -webkit-inline-flex;
align-items: center;
justify-content: center;
padding: 0 32px;
font-weight: 600;
color: #0C0E0F;
text-transform: uppercase;
letter-spacing: 1px;
background: #FF6501;
transition: background .25s ease, box-shadow .25s ease;
-webkit-transition: background .25s ease, -webkit-box-shadow .25s ease;
}
.big-button {
width: 100%;
height: 104px;
box-shadow: 0px 24px 40px rgba(255, 101, 1, .4);
-webkit-box-shadow: 0px 24px 40px rgba(255, 101, 1, .4);
font-size: 20px;
}
.big-button:hover {
background: #E65C02;
box-shadow: none;
-webkit-box-shadow: none;
}
.small-button {
height: 48px;
box-shadow: 0px 8px 32px rgba(255, 101, 1, .5);
-webkit-box-shadow: 0px 8px 32px rgba(255, 101, 1, .5);
font-size: 12px;
}
.small-button:hover {
background: #F97E2E;
box-shadow: none;
-webkit-box-shadow: none;
}
.effect {
opacity: 0;
pointer-events: none;
transition: opacity .5s ease, transform .5s ease;
-webkit-transition: opacity .5s ease, -webkit-transform .5s ease;
}
.effect-top {
transform: translate3d(0, -20px, 0);
-webkit-transform: translate3d(0, -20px, 0);
}
.effect-bottom {
transform: translate3d(0, 20px, 0);
-webkit-transform: translate3d(0, 20px, 0);
}
.effect-left {
transform: translate3d(-20px, 0, 0);
-webkit-transform: translate3d(-20px, 0, 0);
}
.effect-right {
transform: translate3d(20px, 0, 0);
-webkit-transform: translate3d(20px, 0, 0);
}
.effect.done {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.header {
position: sticky;
position: -webkit-sticky;
top: 0;
background: rgba(225, 225, 225, .25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 32px;
z-index: 100;
}
.header .logo svg:lang(uk) {
max-height: 48px;
}
.header .logo svg:lang(ru) {
max-height: 46px;
}
.header .lang {
margin-left: 48px;
}
.lang li {
display: inline-block;
}
.lang li + li {
margin-left: 16px;
}
.lang li a {
display: block;
font-weight: 600;
font-size: 12px;
color: #0C0E0F;
letter-spacing: 1px;
text-transform: uppercase;
transition: color .25s ease;
-webkit-transition: color .25s ease;
}
.lang li a:hover, .lang li.current-lang a {
color: rgba(12, 14, 15, .3);
}
.lang li.current-lang a {
pointer-events: none;
}
.phone-link-small {
margin-right: 48px;
}
.content {
margin-top: -112px;
}
.footer {
background: #0C0E0F;
padding: 72px 32px;
}
.footer .logo svg {
width: auto;
}
.footer .logo svg:lang(uk) {
max-height: 42px;
}
.footer .logo svg:lang(ru) {
max-height: 40px;
}
.footer .logo svg path {
fill: #E1E1E1;
}
.footer .right {
flex-direction: column;
align-items: flex-end;
}
.footer .text1 {
text-align: right;
}
.footer .text1 a {
color: #FF6501;
text-shadow: 0px 4px 4px rgba(255, 101, 1, .5);
transition: color .25s ease, text-shadow .25s ease;
-webkit-transition: color .25s ease, text-shadow .25s ease;
}
.footer .text1 a:hover {
text-shadow: none;
}
.footer .lang {
display: none;
}
.intro {
height: 100vh;
display: flex;
display: -webkit-flex;
align-items: center;
padding: 112px 32px 0;
}
.intro .heading1, .intro .text {
z-index: 2;
}
.intro .heading1 {
max-width: min-content;
}
.intro .text1 {
display: inline-block;
}
.intro .right .text1 {
display: inline-block;
padding: 12px 0 12px 16px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.intro .row-container {
align-items: flex-start;
}
.intro .text1 + .heading1 {
margin-top: 24px;
}
.intro .left {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.intro .right {
max-width: 54%;
justify-content: flex-end;
padding-top: 52px;
}
.intro .heading1 + .circle-block {
margin-top: 40px;
}
.circle-block {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 16px 24px rgba(12, 14, 15, .3);
-webkit-box-shadow: 0px 16px 24px rgba(12, 14, 15, .3);
z-index: 2;
transition: box-shadow .25s ease;
-webkit-transition: -webkit-box-shadow .25s ease;
}
.circle-block:hover {
box-shadow: none;
-webkit-box-shadow: none;
}
.circle {
height: 100%;
background: #0C0E0F;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.circle a {
display: block;
}
.dynamic {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
animation: runCircle 5s linear infinite;
-webkit-animation: runCircle 5s linear infinite;
}
.circle-block:hover .dynamic {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.circle svg text {
font-weight: 600;
font-size: 11px;
line-height: 15px;
letter-spacing: 1.8px;
text-transform: uppercase;
}
.circle svg text:lang(uk) {
letter-spacing: .6px;
}
@keyframes runCircle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes runCircle {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.static {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.with-arrow:after {
content: '';
display: block;
width: 42px;
height: 42px;
float: right;
margin-top: 8px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDQyIDQyIj4KICA8cGF0aCBmaWxsPSIjRkY2NTAxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAyNC45MjlMMzQuNDY1LjQ2NGw3LjA3IDcuMDcyTDE3LjA3MiAzMkg0MXYxMEgwVjFoMTB2MjMuOTI5eiIgY2xpcC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPg==) center/contain no-repeat;
}
.intro .image, .intro .model {
display: none;
}
.intro .image {
margin-top: 16px;
}
.intro .image img {
width: 100%;
height: auto;
}
.models {
position: relative;
padding: 0 32px 100px;
}
.models .heading1 {
z-index: 2;
}
.slider-hint {
display: none;
font-size: 13px;
line-height: 16px;
color: rgba(12, 14, 15, .4);
padding: 0 40px;
text-align: center;
}
.models .slider-hint {
margin-top: 40px;
}
.slick-slider {
user-select: text;
-webkit-user-select: text;
font-size: 0;
}
.slick-slider .slick-slide {
outline: none;
}
.model-slider {
margin: 0 -32px;
}
.slick-list {
overflow: visible;
}
.slick-arrow {
width: 171px;
height: 171px;
position: absolute;
top: 50%;
margin-top: -85.5px;
z-index: 1;
cursor: pointer;
}
.slick-next {
right: calc(50vw - 610px);
}
.slick-next:before {
content: '';
display: block;
width: 171px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzEiIGhlaWdodD0iMTcxIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTcxIDE3MSI+CiAgPHBhdGggZmlsbD0iIzBDMEUwRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNODUuNSAwTDE3MSA4NS41IDg1LjUgMTcxbC0xMS4yOTMtMTEuMjkzIDY2LjIyMi02Ni4yMjJIMHYtMTUuOTdoMTQwLjQyOUw3NC4yMDcgMTEuMjkzIDg1LjUgMHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4=) right/auto no-repeat;
transition: width .25s linear;
-webkit-transition: width .25s linear;
}
.slick-prev {
left: 20px;
}
.slick-prev:before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTcyIDE3MiI+CiAgPHBhdGggZmlsbD0iIzBDMEUwRiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNODYuMzQzLjM0M0wuNjg2IDg2bDg1LjY1NyA4NS42NTcgMTEuMzE0LTExLjMxNEwzMS4zMTQgOTRIMTcyVjc4SDMxLjMxNGw2Ni4zNDMtNjYuMzQzTDg2LjM0My4zNDN6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) center/contain no-repeat;
}
.slick-next:hover:before {
width: 101px;
}
.model-slider .slick-slide {
position: relative;
height: 800px;
}
.model-slider .slick-center .slide {
position: absolute;
bottom: 0;
width: 800px;
}
.model-slider .slick-center .model {
position: sticky;
position: -webkit-sticky;
top: 56px;
z-index: 1;
}
.model-viewer {
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
--poster-color: transparent;
--progress-bar-color: transparent;
--progress-bar-height: 0;
--progress-mask: transparent;
filter: brightness(.85);
-webkit-filter: brightness(.85);
}
.model-slider .slick-slide .model-viewer {
opacity: 0;
pointer-events: none;
transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
}
.model-slider .slick-center .model-viewer, .model-slider .slick-cloned-center .model-viewer {
opacity: 1;
pointer-events: auto;
}
.model-fixed {
position: fixed;
left: 50%;
transform: translate3d(-50%, 0, 0);
-webkit-transform: translate3d(-50%, 0, 0);
bottom: 0;
z-index: 1;
}
.model-absolute {
position: absolute;
}
.model-slider .image, .model-slider .slide-content {
display: none;
}
.slick-slide .image img {
width: 100%;
height: auto;
}
.slider-content {
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
height: 656px;
width: 35%;
position: absolute;
left: 0;
bottom: 0;
}
.slider-content .heading2, .slider-content .text2 {
z-index: 2;
}
.slider-content .heading2 + .text2 {
margin-top: 28px;
}
.slider-content .text2 {
display: inline-block;
max-width: 90%;
padding: 12px 16px 12px 0;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.slider-content .text2 p + p {
margin-top: 32px;
}
.slider-content .slide-counter {
position: relative;
z-index: 2;
margin-top: 52px;
font-weight: 900;
font-size: 96px;
line-height: 96px;
letter-spacing: 2px;
color: rgba(12, 14, 15, .3);
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: rgba(12, 14, 15, .3);
}
.slider-content .slide-counter-hide {
display: none;
}
.company {
padding: 160px 32px 200px;
}
.company .row {
margin: 0 -90px;
align-items: center;
}
.company .col-6 {
padding: 0 90px;
}
.company .heading1 + .text-block {
margin-top: 72px;
}
.company .text-more {
overflow: hidden;
transition: max-height .25s ease;
-webkit-transition: max-height .25s ease;
}
.company .text1 p + p {
margin-top: 40px;
}
.company .more {
display: none;
position: relative;
font-size: 16px;
line-height: 24px;
color: #FF6501;
border-bottom: 2px dotted #FF6501;
margin-top: 16px;
cursor: pointer;
transition: opacity .25s ease, border-color .25s ease;
-webkit-transition: opacity .25s ease, border-color .25s ease;
-webkit-tap-highlight-color: transparent;
}
.company .more:hover {
border-bottom-color: transparent;
}
.company .more-hide {
opacity: 0;
pointer-events: none;
}
.company .more:before {
content: '';
display: block;
width: calc(100vw - 40px);
position: absolute;
left: 0;
bottom: 42px;
height: 80px;
background: linear-gradient(180deg, rgba(12, 14, 15, 0) 0%, #0C0E0F 100%);
background: -webkit-linear-gradient(270deg, rgba(12, 14, 15, 0) 0%, #0C0E0F 100%);
}
.company .row + .row-container {
align-items: flex-start;
margin-top: 80px;
}
.company .row + .row-container .right {
padding-left: 48px;
}
.company .numbers .row-container .right {
min-width: 48%;
}
.company .row-container .images {
display: flex;
display: -webkit-flex;
align-items: center;
margin-top: 4px;
}
.company .row-container .image + .image {
margin-left: 48px;
}
.company .row-container .image img {
min-width: 112px;
max-width: 112px;
height: auto;
}
.company .numbers .number {
padding: 54px 0;
}
.company .numbers .number:first-of-type {
border-top: 4px solid #E1E1E1;
}
.company .numbers .number:last-of-type {
border-bottom: 4px solid #E1E1E1;
}
.company .numbers .number + .number {
border-top: 4px solid #E1E1E1;
}
.company .numbers .character {
font-weight: 900;
font-size: 40px;
color: #E1E1E1;
white-space: nowrap;
padding-right: 4px;
}
.company .numbers .character span {
font-size: 96px;
letter-spacing: -4px;
}
.advantages {
padding: 160px 32px 200px;
}
.advantages .row-container .right {
padding-left: 64px;
}
.advantages .circle-block {
width: 192px;
height: 192px;
box-shadow: none;
-webkit-box-shadow: none;
}
.advantages .circle-block .dynamic {
animation-duration: 8s;
-webkit-animation-duration: 8s;
}
.advantages .circle-block .circle svg text {
letter-spacing: 3.4px;
}
.advantages .circle-block .circle svg text:lang(uk) {
letter-spacing: 4.5px;
}
.advantages .circle-block .static span {
font-weight: 900;
font-size: 96px;
color: #E1E1E1;
}
.advantages .row-container + .row {
margin-top: 100px;
}
.advantages .row {
margin: -44px 0;
}
.advantages .col-4 {
padding: 44px 48px 48px;
border-right: 4px solid transparent;
transition: .25s border-color .25s ease;
-webkit-transition: .25s border-color .25s ease;
}
.advantages .done .col-4 {
border-right-color: #0C0E0F;
}
.advantages .col-4:nth-of-type(3n+1) {
padding-left: 0;
}
.advantages .col-4:nth-of-type(3n+3) {
padding-right: 0;
border-right: none;
}
.advantages .col-4:nth-of-type(n+4) {
border-top: 4px solid transparent;
}
.advantages .done .col-4:nth-of-type(n+4) {
border-top-color: #0C0E0F;
}
.advantages .icon {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iMTEyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTEyIDExMiI+CiAgPGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfZikiPgogICAgPHBhdGggZmlsbD0iI0ZGNjUwMSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTUuNDEzIDE2LjMzOGMxMy4wNzMtLjg2NyAyOC4xLS44NDcgMzYuMTExIDkuOTMzIDcuOTM5IDEwLjY4IDMuNjQ2IDI1LjU3NS0uMTE4IDM4LjQ5NS0zLjM0MyAxMS40NzMtOC44MzkgMjIuNDctMTkuMTg0IDI3Ljc1Ny0xMC40MzggNS4zMzMtMjIuNjQgNC4xNjYtMzMuMTQ2LTEuMDE5LTEwLjU5LTUuMjI2LTE5LjE3NS0xNC4zNS0yMS45ODQtMjYuMTg2LTIuODY4LTEyLjA4NS4wMDItMjQuOTU4IDcuNTU2LTM0LjYxNCA3LjQ2NC05LjU0IDE4Ljk2Mi0xMy41ODMgMzAuNzY1LTE0LjM2NnoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgogIDwvZz4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9ImZpbHRlcjBfZiIgd2lkdGg9IjExMiIgaGVpZ2h0PSIxMTIiIHg9IjAiIHk9IjAiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz4KICAgICAgPGZlQmxlbmQgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciByZXN1bHQ9ImVmZmVjdDFfZm9yZWdyb3VuZEJsdXIiIHN0ZERldmlhdGlvbj0iOCIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgo8L3N2Zz4=) center/contain no-repeat;
margin-left: -16px;
}
.advantages .icon + .heading2 {
margin-top: 32px;
}
.advantages .heading2 + .text1 {
margin-top: 24px;
}
.with-star:after {
content: '';
display: block;
width: 48px;
height: 48px;
position: absolute;
right: 40px;
top: 40px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij4KICAJPHBhdGggZmlsbD0iI0ZGNjUwMSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTYuNTg2IDE2LjU4NkMyMC4wNzggMTMuMDkzIDIyIDcuNjkyIDIyIDBoNGMwIDcuNjkyIDEuOTIyIDEzLjA5MyA1LjQxNCAxNi41ODZDMzQuOTA3IDIwLjA3OCA0MC4zMDggMjIgNDggMjJ2NGMtNy42OTIgMC0xMy4wOTMgMS45MjItMTYuNTg2IDUuNDE0QzI3LjkyMiAzNC45MDcgMjYgNDAuMzA4IDI2IDQ4aC00YzAtNy42OTItMS45MjItMTMuMDkzLTUuNDE0LTE2LjU4NkMxMy4wOTMgMjcuOTIyIDcuNjkyIDI2IDAgMjZ2LTRjNy42OTIgMCAxMy4wOTMtMS45MjIgMTYuNTg2LTUuNDE0ek0xMi4yMzkgMjRjMi43NzkgMS4wNzQgNS4xODEgMi41OTIgNy4xNzUgNC41ODYgMS45OTQgMS45OTQgMy41MTIgNC4zOTYgNC41ODYgNy4xNzUgMS4wNzQtMi43NzkgMi41OTItNS4xODIgNC41ODYtNy4xNzUgMS45OTQtMS45OTQgNC4zOTYtMy41MTIgNy4xNzUtNC41ODYtMi43NzktMS4wNzQtNS4xODItMi41OTItNy4xNzUtNC41ODYtMS45OTQtMS45OTQtMy41MTItNC4zOTYtNC41ODYtNy4xNzUtMS4wNzQgMi43NzktMi41OTIgNS4xODEtNC41ODYgNy4xNzUtMS45OTQgMS45OTQtNC4zOTYgMy41MTItNy4xNzUgNC41ODZ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) center/contain no-repeat;
}
.clients {
padding: 160px 32px 200px;
}
.icons {
display: flex;
display: -webkit-flex;
align-items: center;
}
.icons svg + svg {
margin-left: 16px;
}
.clients .icons + .text1 {
margin-left: 32px;
}
.clients .row-container + .container {
margin-top: 80px;
}
.clients .client {
border: 4px solid #E1E1E1;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transition: border-color .25s ease, transform .25s ease;
-webkit-transition: border-color .25s ease, -webkit-transform .25s ease;
}
.clients .col-6:hover .client {
border-color: #E65C02;
transform: translate3d(0, -10px, 0);
-webkit-transform: translate3d(0, -10px, 0);
}
.clients .client .heading2 {
padding: 40px 88px 40px 48px;
border-bottom: 4px solid #E1E1E1;
transition: border-color .25s ease;
-webkit-transition: border-color .25s ease;
}
.clients .client:hover .heading2 {
border-bottom-color: #E65C02;
}
.clients .client .icon {
min-height: 454px;
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.clients .client .icon .path {
transition: fill .25s ease;
-webkit-transition: fill .25s ease;
}
.clients .client:hover .icon .path {
fill: #FF6501;
}
.clients .client .icon .group {
transition: transform .5s ease;
-webkit-transition: -webkit-transform .5s ease;
}
.clients .client1 .icon1 .group1 {
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
}
.clients .client1:hover .icon1 .group1 {
transform: translate3d(0, -10px, 0) rotate3d(0, 0, 1, 5deg);
-webkit-transform: translate3d(0, -10px, 0) rotate3d(0, 0, 1, 5deg);
}
.clients .client1:hover .icon1 .group2 {
transform: translate3d(0, 10px, 0) rotate3d(0, 0, 1, -5deg);
-webkit-transform: translate3d(0, 10px, 0) rotate3d(0, 0, 1, -5deg);
}
.clients .client2 .icon .group {
transform: translate3d(0, -32px, 0);
-webkit-transform: translate3d(0, -32px, 0);
}
.clients .client2:hover .icon .group {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.clients .row + .heading2 {
margin-top: 92px;
}
.clients .heading2 + .button-block {
margin-top: 48px;
}
.services {
padding: 160px 32px 80px;
}
.services .heading1 + .row {
margin-top: 80px;
}
.services .row {
margin: 0 4px 0 0;
align-items: stretch;
}
.services .col-4 {
padding: 40px 96px 96px 40px;
box-shadow: none;
-webkit-box-shadow: none;
transition: .25s box-shadow .25s ease;
-webkit-transition: .25s -webkit-box-shadow .25s ease;
}
.services .done .col-4 {
box-shadow: 4px 0 0 0 #0C0E0F, 0 4px 0 0 #0C0E0F, 4px 4px 0 0 #0C0E0F, 4px 0 0 0 #0C0E0F inset, 0 4px 0 0 #0C0E0F inset;
-webkit-box-shadow: 4px 0 0 0 #0C0E0F, 0 4px 0 0 #0C0E0F, 4px 4px 0 0 #0C0E0F, 4px 0 0 0 #0C0E0F inset, 0 4px 0 0 #0C0E0F inset;
}
.services .heading2 + .text1 {
margin-top: 32px;
}
.services .service .character {
position: absolute;
right: 36px;
bottom: 28px;
font-weight: 600;
font-size: 20px;
color: #0C0E0F;
}
.photos {
padding: 80px 32px;
}
.photos .slider-hint {
margin-top: 16px;
}
.photo-slider {
margin: 80px -98.5px 0;
}
.photo-slider .slick-next {
margin-right: 66.5px;
}
.photo-slider .slick-slide {
padding: 0 66.5px;
}
.photo-slider .slick-slide .image {
display: inline-block;
max-width: 900px;
border: 4px solid #0C0E0F;
opacity: .3;
transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
}
.photo-slider .slick-center .image, .photo-slider .slick-cloned-center .image {
opacity: 1;
}
.photo-slider + .container {
margin-top: 64px;
}
.photos .slider-counter {
font-weight: 600;
font-size: 20px;
color: #0C0E0F;
}
.photos .slider-counter span:nth-of-type(2) {
padding: 0 10px;
}
.questions {
padding: 80px 32px 120px;
}
.toggles {
margin-top: 60px;
}
.toggles .toggle {
padding: 40px 0 0;
}
.toggles .toggle + .toggle {
border-top: 4px solid #0C0E0F;
}
.toggles .toggle .toggle-label {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.toggles .toggle-open .toggle-label {
pointer-events: none;
}
.toggles .toggle-open .toggle-label .heading2 {
width: 100%;
padding-right: 40px;
}
.toggles .toggle .toggle-content {
max-height: 0;
margin-bottom: 0;
overflow: hidden;
transition: max-height .25s linear, margin-bottom .25s linear;
-webkit-transition: max-height .25s linear, margin-bottom .25s linear;
}
.toggles .toggle-open .toggle-content {
margin-bottom: 40px;
}
.toggles .circle-block {
width: 96px;
height: 96px;
box-shadow: 0px 12px 24px rgba(12, 14, 15, .3);
-webkit-box-shadow: 0px 12px 24px rgba(12, 14, 15, .3);
}
.toggles .circle-block:hover {
box-shadow: none;
-webkit-box-shadow: none;
}
.toggles .circle {
width: 96px;
}
.toggles .circle:before, .toggles .circle:after {
content: '';
display: block;
background: #E1E1E1;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
}
.toggles .circle:before {
width: 32px;
height: 4px;
}
.toggles .circle:after {
width: 4px;
height: 32px;
transition: height .25s linear;
-webkit-transition: height .25s linear;
}
.toggles .toggle-open .circle:after {
height: 4px;
}
.dots {
position: relative;
height: 100%;
transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
animation: runDots 5s linear infinite;
-webkit-animation: runDots 5s linear infinite;
}
@keyframes runDots {
from {
transform: rotate(-25deg);
}
to {
transform: rotate(335deg);
}
}
@-webkit-keyframes runDots {
from {
-webkit-transform: rotate(-25deg);
}
to {
-webkit-transform: rotate(335deg);
}
}
.toggles .circle-block:hover .dots {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.dots:before, .dots:after {
content: '';
display: block;
width: 3px;
height: 3px;
background: #E1E1E1;
position: absolute;
}
.dots:before {
left: 20%;
top: 20%;
}
.dots:after {
right: 20%;
bottom: 20%;
}
.contacts {
padding: 160px 32px 128px;
}
.contacts .heading1 + .row {
margin-top: 80px;
}
.contacts .row {
margin: 0 -56px;
}
.contacts .col {
padding: 0 56px;
}
.contacts .col:first-of-type {
flex: 0 1 55%;
max-width: 55%;
}
.contacts .col:last-of-type {
flex: 0 1 45%;
max-width: 45%;
}
.contacts .form {
margin-top: 32px;
}
.hidden-block {
display: none;
}
.form-block {
position: relative;
max-height: 80px;
margin-bottom: 24px;
transition: margin .25s ease;
-webkit-transition: margin .25s ease;
}
.invalid-block {
margin-bottom: 36px;
}
.tel-block {
background: #252829;
border: 1px solid transparent;
transition: border-color .25s ease;
-webkit-transition: border-color .25s ease;
}
.file-block {
margin-bottom: 48px;
}
.submit-block {
max-height: none;
margin-bottom: 0;
}
.tel-invalid {
border-color: #F83B33;
}
.contacts .video video {
max-width: 830px;
height: auto;
}
.contacts .row + .phone-link-block {
margin-top: 160px;
}
.contacts .heading2 + .phone-link-big {
margin-top: 40px;
}
.contacts .phone-link-block + .mail-link-block {
margin-top: 80px;
}
.contacts .heading2 + .mail-link {
margin-top: 16px;
}
.file {
display: flex;
display: -webkit-flex;
align-items: center;
position: relative;
height: 80px;
background: #252829;
}
.file label {
width: 100%;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
position: relative;
left: auto;
top: auto;
margin-top: 0;
padding: 0 28px 0 108px;
color: #E1E1E1;
transform: none;
-webkit-transform: none;
transition: none;
-webkit-transition: none;
z-index: 1;
cursor: pointer;
}
.file label:before {
content: '';
display: block;
width: 80px;
background: #E1E1E1;
position: absolute;
left: 0;
top: 0;
bottom: 0;
transition: background .25s linear;
-webkit-transition: background .25s linear;
}
.file label:hover:before {
background: #FF6501;
}
.file label:after {
content: '';
display: block;
width: 24px;
height: 32px;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIzMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDI0IDMyIj4KICA8cGF0aCBmaWxsPSIjMEMwRTBGIiBkPSJNMTkgNVYwbDUgNWgtNXoiLz4KICA8cGF0aCBmaWxsPSIjMEMwRTBGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNCAzMkgwVjBoMTd2N2g3djI1ek0xMC45MSA5LjhhMy4xMDggMy4xMDggMCAwMC0zLjExIDMuMTA5djkuMDlhNC4yIDQuMiAwIDAwOC40IDB2LTguNTYzaC0xLjQ5VjIyYTIuNzA4IDIuNzA4IDAgMTEtNS40MTggMHYtOS4wOTFhMS42MTkgMS42MTkgMCAwMTMuMjM2IDB2Ny42MzZhLjUyNy41MjcgMCAxMS0xLjA1NSAwdi03LjEwOWgtMS40OXY3LjExYTIuMDE5IDIuMDE5IDAgMDA0LjAzNiAwdi03LjYzN2EzLjEwOCAzLjEwOCAwIDAwLTMuMTEtMy4xMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4=) center/contain no-repeat;
position: absolute;
left: 28px;
top: 50%;
margin-top: -16px;
}
.file label span {
font-size: 12px;
line-height: 17px;
color: rgba(225, 225, 225, .4);
}
.file .file-info {
display: none;
align-items: center;
position: absolute;
left: 80px;
right: 0;
top: 0;
bottom: 0;
background: #252829;
padding: 0 80px 0 28px;
z-index: 1;
word-break: break-all;
}
.file .file-show {
display: flex;
display: -webkit-flex;
}
.file .file-info .text1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.file .file-info .remove {
width: 18px;
height: 18px;
position: absolute;
right: 31px;
top: 50%;
margin-top: -9px;
cursor: pointer;
}
.file .file-info .remove:before, .file .file-info .remove:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: opacity .25s ease;
-webkit-transition: opacity .25s ease;
}
.file .file-info .remove:before {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBzdHJva2U9IiNFMUUxRTEiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEgMWw4IDhtMCAwbC04IDhtOC04bDgtOE05IDlsOCA4Ii8+Cjwvc3ZnPg==) center/contain no-repeat;
opacity: 1;
}
.file .file-info .remove:hover:before {
opacity: 0;
}
.file .file-info .remove:after {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBzdHJva2U9IiNGRjY1MDEiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEgMWw4IDhtMCAwbC04IDhtOC04bDgtOE05IDlsOCA4Ii8+Cjwvc3ZnPg==) center/contain no-repeat;
opacity: 0;
}
.file .file-info .remove:hover:after {
opacity: 1;
}
.after-sent {
border: 4px solid #E1E1E1;
padding: 32px;
text-align: center;
position: absolute;
left: 56px;
right: 56px;
top: 32px;
}
.after-sent .heading2 + .text1 {
margin-top: 24px;
}
.sent-hide {
opacity: 0;
pointer-events: none;
}
.wpcf7-form-control-wrap {
display: block;
}
.wpcf7-not-valid {
border-color: #F83B33;
}
div.wpcf7 .ajax-loader {
display: none!important;
}
div.wpcf7-response-output {
display: none!important;
}
span.wpcf7-not-valid-tip {
font-size: 16px!important;
line-height: 20px;
color: #F83B33!important;
position: absolute;
bottom: -28px;
}
@media screen and (max-width: 1279px) {
body {
overflow-x: auto;
}
.row {
margin: 0 -20px;
}
.col {
padding: 0 20px;
}
.heading1 {
font-size: 42px;
line-height: 54px;
}
.heading2 {
font-size: 28px;
line-height: 36px;
}
.text1 {
font-size: 18px;
line-height: 26px;
}
.with-arrow:after {
width: 30px;
height: 30px;
}
.with-star:after {
right: 32px;
top: 32px;
}
.phone-link-big {
font-size: 110px;
padding-left: 110px;
}
.phone-link-big:before {
width: 72px;
height: 72px;
margin-top: -36px;
}
.content {
overflow-x: hidden;
}
.intro {
height: auto;
padding-top: 140px;
}
.intro .row-container {
flex-direction: column;
}
.intro .heading1 {
max-width: none;
}
.intro .circle-block {
display: none;
}
.intro .left + .right {
margin-top: 24px;
}
.intro .right {
max-width: 100%;
padding-top: 0;
}
.intro .text1 {
display: block;
}
.intro .text1 br {
display: none;
}
.models {
padding-top: 160px;
}
.model-slider .slick-slide {
height: 704px;
}
.model-slider .slick-slide > div {
height: 100%;
}
.model-slider .slick-center .slide {
top: 0;
}
.model-viewer {
width: 704px;
height: 704px;
}
.model-slider .slick-center .model {
position: absolute;
left: 50%;
margin-left: -352px;
bottom: 0;
}
.slick-next {
right: 32px;
}
.slider-content {
width: 40%;
}
.slider-content .slide-counter {
font-size: 80px;
line-height: 80px;
}
.company .row {
margin: 0 -32px;
}
.company .col-6 {
padding: 0 32px;
}
.company .numbers .number {
padding: 48px 0;
}
.company .numbers .character span {
font-size: 80px;
}
.advantages .col-4 {
padding: 32px 36px 36px;
}
.clients .client .heading2 {
padding: 32px 80px 32px 32px;
}
.services .col-4 {
padding: 32px 32px 80px;
}
.services .service .character {
font-size: 18px;
}
.photo-slider {
margin: 80px -32px 0;
}
.photo-slider .slick-slide {
padding: 0 16px;
}
.photo-slider .slick-next {
margin-right: 0;
}
.photo-slider .slick-slide .image {
max-width: calc(100% - 207px);
}
.photos .slider-counter {
font-size: 18px;
}
.contacts .row {
margin: 0 -32px;
}
.contacts .col {
padding: 0 32px;
}
.contacts .col:first-of-type, .contacts .col:last-of-type {
flex-basis: 50%;
max-width: 50%;
}
.file label span {
display: contents;
}
}
@media screen and (max-width: 1023px) {
.with-star:after {
top: 50%;
margin-top: -24px;
}
.phone-link-small {
display: none;
}
.phone-link-big {
font-size: 80px;
padding-left: 80px;
}
.phone-link-big:before {
width: 56px;
height: 56px;
margin-top: -28px;
}
.footer .row-container {
flex-direction: column;
align-items: flex-start;
}
.footer .left {
flex-direction: column;
align-items: flex-start;
}
.footer .left + .right {
margin-top: 40px;
}
.footer .right {
align-items: flex-start;
}
.footer .logo + .lang {
margin-top: 40px;
}
.footer .text1 + .text1 {
margin-top: 32px;
}
.slider-content {
width: 50%;
}
.slider-content .slide-counter {
margin-top: 48px;
}
.company .col-6 {
flex-basis: 100%;
max-width: 100%;
}
.company .col-6 + .col-6 {
margin-top: 72px;
}
.company .row + .row-container .right {
padding-left: 32px;
}
.company .numbers .row-container .right {
min-width: 50%;
}
.company .row-container .images {
margin-top: 3px;
}
.company .row-container .image + .image {
margin-left: 32px;
}
.advantages {
padding: 160px 32px 200px;
}
.advantages .row-container .right {
padding-left: 48px;
}
.advantages .col-4 {
flex-basis: 50%;
max-width: 50%;
}
.advantages .col-4:nth-of-type(3n+3) {
padding: 36px 32px 36px 0;
border-right: 4px solid #0C0E0F;
}
.advantages .col-4:nth-of-type(2n+1) {
padding-left: 0;
}
.advantages .col-4:nth-of-type(2n+2) {
padding: 36px 0 36px 36px;
border-right: none;
}
.advantages .col-4:nth-of-type(n+3) {
border-top: 4px solid #0C0E0F;
}
.advantages .row-container + .row {
margin-top: 96px;
}
.clients {
padding: 160px 32px 200px;
}
.clients .row-container {
flex-direction: column;
align-items: flex-start;
}
.clients .row-container .left + .right {
margin-top: 32px;
}
.clients .col-6 {
flex-basis: 100%;
max-width: 100%;
}
.clients .col-6 + .col-6 {
margin-top: 32px;
}
.clients .row + .heading2 {
margin-top: 80px;
}
.services {
padding: 160px 32px 80px;
}
.services .col-4 {
flex-basis: 50%;
max-width: 50%;
}
.photos {
padding: 80px 32px;
}
.toggles {
margin-top: 60px;
}
.questions {
padding: 80px 32px 120px;
}
.contacts {
padding: 160px 32px 120px;
}
.contacts .col:first-of-type, .contacts .col:last-of-type {
flex-basis: 100%;
max-width: 100%;
}
.contacts .col:last-of-type {
order: -1;
}
.contacts .col + .col {
margin-bottom: 80px;
}
.contacts .video {
margin: 0 -32px;
}
.contacts .video video {
max-width: 100%;
}
.after-sent {
left: 32px;
right: 32px;
}
}
@media screen and (max-width: 767px) {
input {
height: 64px;
padding: 0 20px;
font-size: 16px;
line-height: 20px;
}
input[type="tel"] {
height: 62px;
}
input[type="submit"] {
height: 88px;
box-shadow: 0px 12px 40px rgba(255, 101, 1, .4);
-webkit-box-shadow: 0px 12px 40px rgba(255, 101, 1, .4);
}
label {
font-size: 16px;
line-height: 20px;
left: 20px;
margin-top: -10px;
}
.heading1 {
font-size: 34px;
line-height: 44px;
}
.heading2 {
font-size: 24px;
line-height: 32px;
}
.text1 {
font-size: 16px;
line-height: 24px;
}
.text2 {
font-size: 13px;
line-height: 16px;
}
.mail-link {
font-size: 28px;
letter-spacing: normal;
}
.phone-link-big {
font-size: 36px;
padding-left: 36px;
letter-spacing: normal;
}
.phone-link-big:before {
width: 28px;
height: 28px;
margin-top: -14px;
}
.big-button {
height: 88px;
font-size: 16px;
box-shadow: 0px 16px 40px rgba(255, 101, 1, .4);
-webkit-box-shadow: 0px 16px 40px rgba(255, 101, 1, .4);
}
.small-button {
height: 40px;
}
.with-arrow:after {
width: 20px;
height: 20px;
margin-top: 6px;
}
.with-star:after {
width: 36px;
height: 36px;
right: 20px;
margin-top: -18px;
}
.effect-top {
transform: translate3d(0, -10px, 0);
-webkit-transform: translate3d(0, -10px, 0);
}
.effect-bottom {
transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}
.effect-left {
transform: translate3d(-10px, 0, 0);
-webkit-transform: translate3d(-10px, 0, 0);
}
.effect-right {
transform: translate3d(10px, 0, 0);
-webkit-transform: translate3d(10px, 0, 0);
}
.header {
padding: 20px;
}
.header .row-container {
flex-direction: column;
}
.header .logo {
width: 100%;
overflow: hidden;
transition: max-height .25s ease;
-webkit-transition: max-height .25s ease;
}
.header .logo:lang(uk) {
max-height: 58.5px;
}
.header .logo:lang(ru) {
max-height: 56px;
}
.header-scroll .logo:lang(uk) {
max-height: 38.5px;
}
.header-scroll .logo:lang(ru) {
max-height: 38.5px;
}
.header .logo svg {
width: 100%;
max-width: 335px;
height: auto;
margin: 0 auto;
}
.header .logo svg:lang(uk) {
max-height: 58.5px;
}
.header .logo svg:lang(ru) {
max-height: 56px;
}
.header .left + .right {
margin-top: 20px;
}
.header .lang {
display: none;
}
.header .small-button {
width: 100%;
}
.content {
transition: margin .25s ease;
-webkit-transition: margin .25s ease;
}
.content:lang(uk) {
margin-top: -158.5px;
}
.content:lang(ru) {
margin-top: -158.5px;
}
.header-scroll + .content:lang(uk) {
margin-top: -138.5px;
}
.header-scroll + .content:lang(ru) {
margin-top: -138.5px;
}
.footer {
padding: 40px 20px;
}
.footer .left + .right {
margin-top: 32px;
}
.footer .lang {
display: block;
}
.footer .lang li + li {
margin-left: 20px;
}
.footer .lang li a {
font-size: 16px;
line-height: 20px;
color: #E1E1E1;
}
.footer .lang li a:hover, .footer .lang li.current-lang a {
color: rgba(225, 225, 225, .3);
}
.footer .text1 {
text-align: left;
padding-right: 20px;
}
.footer .text1 + .text1 {
margin-top: 20px;
}
.intro {
padding: 186.5px 20px 0;
}
.intro .text1 + .heading1 {
margin-top: 16px;
}
.intro .left + .right {
margin-top: 16px;
}
.intro .image, .intro .model {
display: block;
}
.intro .right .text1 {
padding: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.models {
display: flex;
display: -webkit-flex;
flex-direction: column;
padding: 80px 20px;
}
.model-slider .container {
order: 0;
}
.model-slider {
margin: 20px -20px 0;
order: 2;
}
.model-slider + .container {
order: 1;
}
.models .heading1 {
font-size: 28px;
line-height: 36px;
}
.model-viewer {
width: calc(100vw - 40px);
height: calc(100vw - 40px);
}
.model-slider .model {
display: none;
}
.model-slider .slick-slide {
height: auto;
padding: 0 10px;
}
.model-slider .slick-center .slide {
top: auto;
}
.model-slider .slick-center .slide {
position: relative;
bottom: auto;
}
.model-slider .image, .model-slider .slide-content {
display: block;
}
.model-slider .image + .slide-content {
margin-top: 16px;
}
.model-slider .slide-content .text2 {
font-size: 16px;
line-height: 24px;
}
.model-slider .slide-content .heading2 + .text2 {
margin-top: 24px;
}
.model-slider .slide-content .text2 p + p {
margin-top: 24px;
}
.model-slider .slick-next {
opacity: .4;
pointer-events: auto;
}
.slider-content {
display: block;
width: 100%;
height: auto;
position: relative;
bottom: auto;
}
.slider-content .slide-content {
display: none;
}
.slider-content .slide-counter {
margin-top: 20px;
z-index: auto;
text-align: center;
font-size: 36px;
line-height: 36px;
}
.slider-hint {
display: block;
}
.slick-arrow {
width: 20px;
height: 20px;
margin-top: 0;
opacity: .4;
}
.model-slider .slick-arrow {
top: -94px;
}
.slick-next {
right: 20px;
}
.slick-next:before {
background-position: center;
background-size: contain;
}
.slick-next:before, .slick-next:hover:before {
width: 20px;
}
.company {
padding: 80px 20px 112px;
}
.company .heading1 {
font-size: 28px;
line-height: 36px;
}
.company .heading1 + .text-block {
margin-top: 24px;
}
.company .text1 p + p {
margin-top: 24px;
}
.company .text-more {
max-height: 216px;
}
.company .more {
display: inline-block;
}
.company .col-6 + .col-6 {
margin-top: 64px;
}
.company .numbers .number {
padding: 32px 0;
}
.company .numbers .number:first-of-type, .company .numbers .number + .number {
border-top-width: 2px;
}
.company .numbers .number:last-of-type {
border-bottom-width: 2px;
}
.company .numbers .row-container .right {
min-width: 48%;
max-width: 48%;
}
.company .numbers .number .text1 br {
display: none;
}
.company .row + .row-container {
flex-direction: column;
align-items: flex-start;
margin-top: 56px;
}
.company .row-container .image img {
min-width: 96px;
max-width: 96px;
}
.company .row + .row-container .right {
padding-left: 0;
}
.company .row + .row-container .left + .right {
margin-top: 32px;
}
.company .row-container .images {
margin-top: 0;
}
.advantages {
padding: 80px 20px;
}
.advantages .row-container {
flex-direction: column;
align-items: flex-start;
}
.advantages .row-container .right {
padding-left: 0;
}
.advantages .row-container .left + .right {
margin-top: 24px;
}
.advantages .heading1 {
font-size: 28px;
line-height: 36px;
}
.advantages .row-container + .row {
margin: 48px 0 0;
}
.advantages .col-4 {
border-width: 2px;
}
.advantages .col-4:nth-of-type(2n+1), .advantages .col-4:nth-last-of-type(-n+3) {
border-width: 2px;
}
.advantages .icon + .heading2 {
margin-top: 24px;
}
.advantages .heading2 + .text1 {
margin-top: 8px;
}
.clients {
padding: 80px 20px 120px;
}
.icons svg {
width: 36px;
height: 36px;
}
.icons svg + svg {
margin-left: 8px;
}
.clients .row-container .left + .right {
margin-top: 24px;
}
.clients .icons + .text1 {
margin-left: 20px;
}
.clients .row-container + .container {
margin-top: 40px;
}
.clients .col-6 + .col-6 {
margin-top: 20px;
}
.clients .heading2 {
font-size: 20px;
line-height: 28px;
}
.clients .client {
border-width: 2px;
}
.clients .col-6:hover .client {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.clients .client .heading2 {
padding: 20px;
border-bottom-width: 2px;
}
.clients .client .icon {
min-height: 285px;
}
.clients .client .icon svg {
max-width: 155px;
height: auto;
}
.clients .heading2 + .button-block {
margin-top: 40px;
}
.services {
padding: 80px 20px 40px;
}
.services .heading1 {
font-size: 28px;
line-height: 36px;
}
.services .heading1 + .row {
margin-top: 40px;
}
.services .row {
margin: 0 2px 0 0;
}
.services .col-4 {
padding: 22px 20px 54px 22px;
box-shadow: 2px 0 0 0 #0C0E0F, 0 2px 0 0 #0C0E0F, 2px 2px 0 0 #0C0E0F, 2px 0 0 0 #0C0E0F inset, 0 2px 0 0 #0C0E0F inset;
-webkit-box-shadow: 2px 0 0 0 #0C0E0F, 0 2px 0 0 #0C0E0F, 2px 2px 0 0 #0C0E0F, 2px 0 0 0 #0C0E0F inset, 0 2px 0 0 #0C0E0F inset;
}
.services .done .col-4 {
box-shadow: 2px 0 0 0 #0c0e0f, 0 2px 0 0 #0c0e0f, 2px 2px 0 0 #0c0e0f, 2px 0 0 0 #0c0e0f inset, 0 2px 0 0 #0c0e0f inset;
-webkit-box-shadow: 2px 0 0 0 #0c0e0f, 0 2px 0 0 #0c0e0f, 2px 2px 0 0 #0c0e0f, 2px 0 0 0 #0c0e0f inset, 0 2px 0 0 #0c0e0f inset;
}
.services .heading2 {
font-size: 20px;
line-height: 28px;
}
.services .heading2 br {
display: none;
}
.services .heading2 + .text1 {
margin-top: 16px;
}
.services .service .character {
font-size: 16px;
right: 20px;
bottom: 20px;
}
.photos {
padding: 40px 20px;
}
.photos .heading1 {
font-size: 28px;
line-height: 36px;
}
.photos .slider-counter {
font-size: 16px;
}
.photo-slider {
margin: 24px -20px 0;
}
.photo-slider + .container {
margin-top: 16px;
}
.photo-slider .slick-slide {
padding: 0 5px;
}
.photo-slider .slick-slide .image {
max-width: 100%;
border-width: 2px;
}
.photo-slider .slick-arrow {
top: -42px;
}
.questions {
padding: 40px 20px 60px;
}
.questions .heading1 {
font-size: 28px;
line-height: 36px;
}
.toggles {
margin-top: 20px;
}
.toggles .toggle {
padding: 20px 0 0;
}
.toggles .toggle + .toggle {
border-top-width: 2px;
}
.toggles .toggle .toggle-label {
margin-bottom: 20px;
}
.toggles .toggle .toggle-label .heading2 {
font-size: 16px;
line-height: 22px;
padding-right: 20px;
}
.toggles .toggle .toggle-label .heading2 br {
display: none;
}
.toggles .toggle-open .toggle-content {
margin-bottom: 20px;
}
.toggles .circle-block {
width: 60px;
height: 60px;
}
.toggles .circle {
width: 60px;
}
.toggles .circle:before {
width: 20px;
height: 2px;
}
.toggles .circle:after {
width: 2px;
height: 20px;
}
.toggles .toggle-open .circle:after {
height: 2px;
}
.dots:before, .dots:after {
width: 2px;
height: 2px;
}
.contacts {
padding: 80px 20px;
}
.contacts .row {
margin: 0 -20px;
}
.contacts .col {
padding: 0 20px;
}
.contacts .heading1 {
font-size: 28px;
line-height: 36px;
}
.contacts .heading1 + .row {
margin-top: 24px;
}
.contacts .col + .col {
margin-bottom: 24px;
}
.contacts .video {
margin: 0 -20px;
}
.contacts .form {
margin-top: 24px;
}
.form-block {
max-height: 64px;
margin-bottom: 12px;
}
.file-block {
margin-bottom: 40px;
}
.submit-block {
max-height: none;
margin: 0;
}
.file {
height: 64px;
}
.file label {
padding: 0 20px 0 84px;
}
.file label:before {
width: 64px;
}
.file label:after {
width: 20px;
height: 25px;
left: 22px;
margin-top: -12.5px;
}
.file label span {
font-size: 11px;
line-height: 16px;
}
.after-sent {
left: 20px;
right: 20px;
top: 24px;
}
.invalid-block {
margin-bottom: 31px;
}
span.wpcf7-not-valid-tip {
font-size: 12px!important;
line-height: 15px;
bottom: -23px;
}
.contacts .row + .phone-link-block {
margin-top: 80px;
}
.contacts .heading2 {
font-size: 20px;
line-height: 28px;
}
.contacts .heading2 + .phone-link-big {
margin-top: 24px;
}
.contacts .phone-link-block + .mail-link-block {
margin-top: 40px;
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
.advantages .row-container + .row {
margin: 48px -20px 0;
}
.advantages .col-4 {
padding: 0 20px;
border: none;
flex-basis: 100%;
max-width: 100%;
}
.advantages .col-4:nth-of-type(2n+1) {
padding-left: 20px;
}
.advantages .col-4:nth-of-type(2n+2), .advantages .col-4:nth-of-type(3n+3), .advantages .col-4:nth-of-type(3n+3), .advantages .col-4:nth-of-type(n+3) {
padding: 0 20px;
border: none;
}
.advantages .col-4 + .col-4 {
margin-top: 40px;
}
.services .col-4 {
flex-basis: 100%;
max-width: 100%;
}
}