html {} body { padding-top: 50px; background: #fff; line-height: 150%; font-size: 16px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; color: #141311; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow-x: hidden; box-sizing: border-box; } .overflow-hidden { overflow: hidden; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 1024px) { body { padding-top: 80px; } } @media screen and (min-width: 1300px) { body { padding-top: 110px; } } .no-js .owl-carousel { display: block; } /*---------------------------------------- normalize.css v8.0.0 ----------------------------------------*/ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} /*---------------------------------------- Bootstrap Grid v4.0.0 ----------------------------------------*/ @-ms-viewport{width:device-width}html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,*::before,*::after{box-sizing:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:1320px){.container{max-width:1320px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*="col-"]{padding-right:0;padding-left:0}.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col,.col-auto,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm,.col-sm-auto,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md,.col-md-auto,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg,.col-lg-auto,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-1{margin-left:8.333333%}.offset-2{margin-left:16.666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.333333%}.offset-5{margin-left:41.666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.333333%}.offset-8{margin-left:66.666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.333333%}.offset-11{margin-left:91.666667%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.333333%}.offset-md-2{margin-left:16.666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.333333%}.offset-md-5{margin-left:41.666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.333333%}.offset-md-8{margin-left:66.666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.333333%}.offset-md-11{margin-left:91.666667%}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.333333%}.offset-lg-2{margin-left:16.666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.333333%}.offset-lg-5{margin-left:41.666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.333333%}.offset-lg-8{margin-left:66.666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.333333%}.offset-lg-11{margin-left:91.666667%}}@media (min-width:1320px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}} /*---------------------------------------- Fonts ----------------------------------------*/ /* @font-face { font-family: "Foros"; src: url("../fonts/Foros/Foros-Regular.eot"); src: url("../fonts/Foros/Foros-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Foros/Foros-Regular.woff") format("woff"), url("../fonts/Foros/Foros-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; } @font-face { font-family: "Foros"; src: url("../fonts/ForosM/Foros-Medium.eot"); src: url("../fonts/ForosM/Foros-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/ForosM/Foros-Medium.woff") format("woff"), url("../fonts/ForosM/Foros-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; } */ /*---------------------------------------- Main ----------------------------------------*/ .svg { display: block; } .center { text-align: center; } p { padding: 0; margin: 0 0 20px; line-height: 1.5; } p a { text-decoration: underline; } strong, b { font-weight: bold; } em { font-style: italic; } small { font-size: 0.75em; color: #b7b5c5; } small a { color: #b7b5c5; } pre { transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; } h1, h2, h3, h4, h5, h6 { position: relative; padding: 0; margin: 0; line-height: 1.2; -webkit-font-smoothing: antialiased !important; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; font-family: 'Montserrat', Arial, sans-serif; color: #141311; } .sblack h1, .sblack h2, .sblack h3, .sblack h4, .sblack h5, .sblack h6 { color: #fff; } h1 { position: relative; margin-bottom: 20px; line-height: 34px; font-size: 24px; font-weight: 700; } h2 { position: relative; margin-bottom: 20px; line-height: 34px; font-size: 24px; font-weight: 700; } h3 { margin-bottom: 15px; font-weight: 700; line-height: 22px; font-size: 18px; } h4 { font-weight: 500; font-size: 20px; } h5 { font-weight: 500; font-size: 18px; } h6 { font-weight: 500; font-size: 16px; } @media screen and (min-width: 768px) { h1, h2 { margin-bottom: 25px; line-height: 44px; font-size: 34px; } } @media screen and (min-width: 1024px) { h1, h2 { line-height: 48px; font-size: 38px; } } @media screen and (min-width: 1300px) { h1, h2 { margin-bottom: 27px; line-height: 57px; font-size: 44px; } h3 { margin-bottom: 10px; line-height: 31px; font-size: 22px; } } ol ol, ol ul, ul ol, ul ul { font-size: 100% !important; } ol, ul { margin: 20px 0; } ul { list-style-type: none; } ol { list-style-type: decimal; list-style-position: outside; } li { position: relative; margin-bottom: 3px; } li:last-child { margin-bottom: 0; } a { color: #E0BD69; text-decoration: none; cursor: pointer; -webkit-transition: all .25s cubic-bezier(.25,.8,.25,1); -moz-transition: all .25s cubic-bezier(.25,.8,.25,1); -o-transition: all .25s cubic-bezier(.25,.8,.25,1); transition: all .25s cubic-bezier(.25,.8,.25,1); } a:hover { text-decoration: underline; color: #BB9B4B; } a.black, a.black:hover { color: #141311; } img { display: block; max-width: 100%; height: auto; } .lazyloaded { opacity: 1; -webkit-transition: opacity .25s cubic-bezier(.25,.8,.25,1); -moz-transition: opacity .25s cubic-bezier(.25,.8,.25,1); -o-transition: opacity .25s cubic-bezier(.25,.8,.25,1); transition: opacity .25s cubic-bezier(.25,.8,.25,1); } .alignleft, .alignright { margin-right: auto; margin-left: auto; margin-bottom: 10px; display: block; clear: both; text-align: center; } .aligncenter { margin-right: auto; margin-left: auto; margin-bottom: 20px; display: block; clear: both; text-align: center; } .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px } .wp-caption img { border: 0 none; padding: 0; margin: 0 } .wp-caption p.wp-caption-text { line-height: 1.5; font-size: 0.8em; margin: 0 } input[type=submit], .button, .btn { position: relative; display: inline-block; align-items: center; justify-content: center; text-align: center; max-width: 100%; height: 40px; line-height: 40px; background: linear-gradient(180deg, #E0BD69 0%, #BB9B4B 100%); color: #141311; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); padding: 0 40px; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; font-weight: 700; outline: 0; cursor: pointer; border-radius: 5px; white-space: nowrap; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: all .25s cubic-bezier(.25,.8,.25,1); -moz-transition: all .25s cubic-bezier(.25, .8, .25, 1); -o-transition: all .25s cubic-bezier(.25, .8, .25, 1); transition: all .25s cubic-bezier(.25,.8,.25,1); overflow: hidden; } input[type=submit]::after, .button::after, .btn::after { -webkit-animation: movingFlare 4s ease-in-out .05s infinite; animation: movingFlare 4s ease-in-out .05s infinite; background: #fff; background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), color-stop(50%, #fff), to(hsla(0, 0%, 100%, .5))); background: linear-gradient(180deg, hsla(0, 0%, 100%, .5) 0, #fff 50%, hsla(0, 0%, 100%, .5)); content: ""; display: block; height: 200px; left: -40px; margin-left: 50px; position: absolute; top: -100px; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 20px; z-index: 1; } @-webkit-keyframes movingFlare{ 0%{ left:-30px; margin-left:0 }30%{ left:110%; margin-left:80px }to{ left:110%; margin-left:80px } } @keyframes movingFlare{ 0%{ left:-30px; margin-left:0 }30%{ left:110%; margin-left:80px }to{ left:110%; margin-left:80px } } input[type=submit] { outline: none; border: 0; } button:hover { box-shadow: none; } button:focus { outline: 0; } .btn:hover, button:hover, input[type=submit]:hover { background: linear-gradient(180deg, #BB9B4B 0%, #E0BD69 100%); text-decoration: none; color: #141311; } @media screen and (min-width: 768px) { .alignleft { margin-bottom: 7px; margin-left: 0; margin-right: 12px; display: inline; float: left; } .alignright { display: inline; float: right !important; text-align: right; margin-left: 12px; margin-right: 0; margin-bottom: 7px; } } @media screen and (min-width: 1024px) { input[type=submit], .button, .btn { height: 60px; line-height: 60px; font-size: 16px; } .btn.small { height: 40px; line-height: 40px; font-size: 14px; } } /*--------------- Контактная форма ---------------*/ .fancybox-container { z-index: 10030; } .modalio { display: none; width: 100%; max-width: 335px; padding: 20px 20px 30px; border-radius: 10px; } .modalio-title { margin-bottom: 15px; text-align: center; font-weight: 700; font-size: 26px; } /* #modalio.fancybox-content { padding: 0; } */ #modalio input { margin-bottom: 15px; } #modalio input:last-child { margin-bottom: 0; } /* .formio-elem { position: relative; margin-bottom: 15px; padding: 14px 18px; background: #F7F7F7; border: 1px solid #F7F7F7; border-radius: 10px; box-sizing: border-box; } */ .formio-error { position: relative; font-size: 13px; color: #FF6D00; } .sfirst .formio-error { position: absolute; top: -25px; left: 20px; font-size: 13px; color: #FF6D00; } .sfirst .agreee { margin: 10px 0 0; } #modalio .formio-error { top: -15px; } .message-success { position: relative; width: 100%; text-align: center; margin: 15px auto 0; font-size: 14px; } input:focus, textarea:focus { outline: none; } input[type=text], input[type=tel], input[type=email] { display: block; width: 100%; height: 36px; padding: 0 20px; background: #F7F7F7; border: 1px solid #E6E6E6; border-radius: 10px; line-height: 100%; font-size: 14px; font-weight: 400; box-sizing: border-box; color: #282321; } #modalio input { height: 40px; border-radius: 5px; } #modalio input[type=text] { padding-left: 40px; background: transparent url(../../images/art-name.svg) no-repeat 15px 50%; } #modalio input[type=tel] { padding-left: 40px; background: transparent url(../../images/art-tel.svg) no-repeat 15px 50%; } #modalio input.button { margin-bottom: 0; } input::-webkit-input-placeholder { color: #8C8785; } input:-ms-input-placeholder { color: #8C8785; } input::-ms-input-placeholder { color: #8C8785; } input::-moz-placeholder { color: #8C8785; } input:placeholder-shown { color: #8C8785; } textarea { display: block; width: 100%; height: 150px; padding: 10px 20px; background: #F7F7F7; border: 1px solid #E6E6E6; border-radius: 10px; line-height: 20px; font-size: 14px; font-weight: 400; box-sizing: border-box; color: #282321; overflow-y: auto; } input[type=submit] { width: 100%; } @media screen and (min-width: 768px) { textarea { height: 200px; } .modalio { max-width: 410px; padding: 40px 30px 50px; } .modalio-title { margin-bottom: 15px; text-align: center; line-height: 44.8px; font-size: 32px; } #modalio input { height: 60px; margin-bottom: 20px; border-radius: 5px; font-size: 16px; } } @media screen and (min-width: 992px) { textarea { height: 200px; } } @media screen and (min-width: 1200px) { input[type=text], input[type=tel], input[type=email] { height: 60px; line-height: 60px; font-size: 22px; } textarea { padding: 15px 20px; height: 280px; line-height: 22px; font-size: 16px; } } /*---------------------------------------- Header ----------------------------------------*/ #wrapper { min-height: 100vh; display: flex; flex-direction: column; backface-visibility: hidden; scroll-behavior: smooth; box-sizing: border-box; } #wrapper [role=main] { display: flex; flex: 1; flex-direction: column; background: #fff; position: relative; z-index: 20; } .overside { display: none; } #wrapper.open-menu .overside { display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(31, 33, 29, 0.1); backdrop-filter: blur(5px); z-index: 10021; touch-action: none; } .menu-toggle { position: relative; display: block; width: 26px; margin-left: 20px; background: transparent; border: 0; box-shadow: none; cursor: pointer; } .menu-toggle:focus { outline: 0; } .menu-toggle span { display: block; width: 26px; height: 2px; margin-bottom: 6px; background: #fff; } .menu-toggle span:last-child { margin-bottom: 0; } .side-panel { flex-direction: column; background: #141311; display: flex; padding: 50px 15px 0 15px; box-sizing: border-box; color: #fff; } .side-panel { position: fixed; top: 0; height: 100vh; z-index: 10022; width: 320px; max-width: 100%; overflow-x: hidden; overflow-y: auto; right: 0; will-change: transform; -moz-transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; } .side-panel.active { transform: matrix(1,0,0,1,0,0); } .side-panel a { color: #fff; } .mob-menu { display: flex; flex-direction: column; margin: 0 0 25px; padding: 0 0 20px; border-bottom: 1px solid #444; } .mob-menu li { margin-bottom: 10px; } .mob-menu a { font-size: 18px; font-weight: 600; line-height: 32px; } .smart-contacts { display: flex; flex-direction: column; align-items: center; font-size: 14px; margin: 0 0 25px; padding: 0 0 20px; border-bottom: 1px solid #444; } .smart-contacts a { display: flex; align-items: center; margin-bottom: 10px; } .smart-contacts a:last-child { margin: 0; } .smart-contacts a img, .smart-contacts a .svg { margin-right: 10px; } .smart-soc { display: flex; justify-content: center; align-items: center; } .smart-soc a { margin: 0 10px; } .thb-mobile-close { display: block; width: 20px; height: 20px; position: absolute; top: 20px; right: 20px; z-index: 40; -moz-transform: scale(0,0); -ms-transform: scale(0,0); -webkit-transform: scale(0,0); transform: scale(0,0); -moz-transition-duration: 0s; -o-transition-duration: 0s; -webkit-transition-duration: 0s; transition-duration: 0s; color: #fff; } .side-panel .thb-mobile-close { transform: matrix(1,0,0,1,0,0); } .thb-mobile-close div { display: block; width: 20px; height: 20px; position: relative; } .thb-mobile-close div span { height: 1px; display: block; width: 20px; position: absolute; left: 50%; top: 50%; margin-left: -8px; background: #fff; } .thb-mobile-close div span:nth-child(1) { -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .thb-mobile-close div span:nth-child(2) { -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .thb-mobile-close div span:before { content: ''; position: absolute; display: block; top: 0; left: 0; bottom: 0; width: 100%; height: 1px; background: #fff; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transform: scale(0,1); -ms-transform: scale(0,1); -webkit-transform: scale(0,1); transform: scale(0,1); } #header { position: fixed; display: block; top: 0; left: 0; width: 100%; padding: 7px 0; background: #141311; color: #fff; z-index: 10020; } .head { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .head-logo { } .head-logo .logo-small { display: block; width: 40px; } .head-logo .logo-big { display: none; } .head-logo .svg { width: 100%; height: auto; } .hmenu { display: none; margin: 0; padding: 0; } .hmenu li:last-child { margin: 0; } .hmenu a { letter-spacing: 1px; text-transform: uppercase; font-weight: 600; font-size: 12px; line-height: 18px; color: #fff; } .hmenu a:hover { text-decoration: none; color: #E0BD69; } .head-block { display: flex; align-items: center; } .head-tel { display: none; margin-right: 10px; line-height: 24px; font-weight: 500; font-size: 16px; color: #fff; } .head-tel:hover { text-decoration: none; } .head-soc { display: flex; align-items: center; } .head-soc a { position: relative; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; margin: 0 10px 0 0; background: #353330; border-radius: 5px; } .head-soc a:last-child { margin: 0; } .head-soc a img, .head-soc a .svg { } .head .btn { display: flex; align-items: center; height: 36px; padding: 0 8px; margin-left: 10px; } .head .btn img, .head .btn .svg { display: block; width: 90%; height: auto; transform: scaleX(-1); } .head .btn span { display: none; } @media screen and (max-width: 1023px) { .head-block { margin-left: auto; } } @media screen and (min-width: 768px) { #header { padding: 10px 0; } .head-tel { display: block; font-size: 20px; font-weight: 600; } .head-soc a { width: 40px; height: 40px; } .head .btn { height: 40px; } } @media screen and (min-width: 1024px) { #header { padding: 20px 0; } .hmenu { display: flex; align-items: center; } .hmenu li { display: block; margin: 0 15px 0 0; } .hmenu a { font-size: 10px; line-height: 20px; } .menu-toggle { display: none; } } @media screen and (min-width: 1100px) { .hmenu a { font-size: 12px; } } @media screen and (min-width: 1200px) { .hmenu a { font-size: 11px; } .head .btn { padding: 0 20px; margin-left: 0; } .head .btn img, .head .btn .svg { display: none; } .head .btn span { display: block; } } @media screen and (min-width: 1300px) { #header { padding: 35px 0; } .head-logo { width: 16%; } .head-logo .logo-small { display: none; } .head-logo .logo-big { display: block; } .hmenu li { margin: 0 10px 0 0; } .hmenu a { font-weight: 700; font-size: 12px; line-height: 21px; } .head-tel { margin-right: 10px; line-height: 30px; font-weight: 700; font-size: 18px; } .head .btn { padding: 0 10px; } .head .btn span { line-height: 40px; font-size: 12px; } } @media screen and (min-width: 1400px) { .hmenu li { margin: 0 16px 0 0; } .hmenu a { font-weight: 700; font-size: 12.5px; line-height: 21px; } .head-tel { margin-right: 10px; line-height: 30px; font-size: 19px; } .head-soc a { margin-right: 10px; } .head .btn { padding: 0 10px; } .head .btn span { line-height: 40px; font-size: 13px; } } @media screen and (min-width: 1500px) { .hmenu li { margin: 0 20px 0 0; } .hmenu a { font-size: 13px; line-height: 21px; } .head-tel { margin-right: 15px; line-height: 30px; font-size: 20px; } .head-soc a { margin-right: 15px; } .head .btn { padding: 0 20px; } .head .btn span { line-height: 40px; font-size: 14px; } } @media screen and (min-width: 1600px) { .hmenu li { margin: 0 25px 0 0; } .hmenu a { font-size: 14px; line-height: 21px; } .head-tel { margin-right: 20px; line-height: 33px; font-size: 22px; } .head-soc a { margin-right: 20px; } } /*---------------------------------------- Blocks ----------------------------------------*/ .section { position: relative; padding: 35px 0 45px; background: #FAF9F7; } .section.sblack { background-color: #141311; background-repeat: no-repeat; background-size: cover; background-position: 35% 50%; color: #fff; } /* .section.sblack::after { position: absolute; display: block; } */ .section.sfull { margin-left: -15px; margin-right: -15px; overflow-x: hidden; } .aftertitle { line-height: 20px; font-size: 14px; margin-bottom: 25px; } .overflow-x { margin-right: -15px; overflow-x: auto; } .overflow-inner { width: 1024px; overflow-x: auto; } .blackbg { position: relative; } .blackbg::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; border-radius: 10px; background: #fff; opacity: .08; z-index: 0; } @media screen and (min-width: 768px) { } @media screen and (min-width: 1024px) { .section { padding: 50px 0 70px; } .aftertitle { line-height: 24px; font-size: 16px; margin-bottom: 32px; } .overflow-x { margin-right: 0; overflow-x: unset; } .overflow-inner { width: auto; overflow-x: unset; } } @media screen and (min-width: 1300px) { .section { padding: 87px 0 100px; } .section.sfull { margin-left: calc((100vw - 100%) / -2); margin-right: 0; width: 100vw; } } /*--------------- Первый экран ---------------*/ .sfirst h1 { margin-bottom: 36px; } .sfirst-items { margin-bottom: 25px; } .sfirst-item { display: flex; align-items: center; margin-bottom: 10px; } .sfirst-item:last-child { margin-bottom: 0; } .sfirst-item-img { display: flex; justify-content: center; align-items: center; width: 25px; } .sfirst-item-txt { width: calc(100% - 25px); padding-left: 15px; line-height: 26px; font-size: 16px; box-sizing: border-box; } .sfirst-aftertitle { line-height: 28px; font-weight: 700; font-size: 18px; } .sfirst-txt { margin-bottom: 20px; line-height: 20px; font-size: 14px; } .sfirst-txt br { display: none; } .sfirst-form { position: relative; width: 100%; max-width: 410px; } .sfirst-form .message-success { color: #fff; } .first-form { position: relative; display: flex; flex-wrap: wrap; width: 100%; } .first-form input[type=tel] { width: 62%; height: 46px; padding-left: 35px; background: transparent url(../../images/form-tel.svg) no-repeat 10px 50%; border-radius: 5px 0 0 5px; border: 2px solid #E0BD69; border-right: 0; line-height: 46px; font-size: 16px; color: #fff; } .first-form input[type=tel]::-webkit-input-placeholder { color: #fff; } .first-form input[type=tel]:-ms-input-placeholder { color: #fff; } .first-form input[type=tel]::-ms-input-placeholder { color: #fff; } .first-form input[type=tel]::-moz-placeholder { color: #fff; } .first-form input[type=tel]:placeholder-shown { color: #fff; } .first-form input[type=submit] { width: 38%; height: 46px; padding: 0; text-align: center; border-radius: 0 5px 5px 0; } @media screen and (min-width: 768px) { .sfirst-txt br { display: block; } .first-form input[type=tel]::-webkit-input-placeholder { color: #8C8785; } .first-form input[type=tel]:-ms-input-placeholder { color: #8C8785; } .first-form input[type=tel]::-ms-input-placeholder { color: #8C8785; } .first-form input[type=tel]::-moz-placeholder { color: #8C8785; } .first-form input[type=tel]:placeholder-shown { color: #8C8785; } } @media screen and (min-width: 1024px) { .sfirst-items { margin-bottom: 42px; } .sfirst-item { margin-bottom: 20px; } .sfirst-item-img { width: 30px; } .sfirst-item-txt { width: calc(100% - 30px); padding-left: 20px; line-height: 33px; font-size: 22px; } .sfirst-aftertitle { line-height: 30.8px; font-weight: 700; font-size: 22px; } .sfirst-txt { margin-bottom: 24px; line-height: 24px; font-size: 16px; } .first-form input[type=tel] { height: 56px; padding-left: 45px; background: transparent url(../../images/form-tel.svg) no-repeat 20px 50%; line-height: 56px; font-size: 20px; } .first-form input[type=submit] { width: 38%; height: 56px; } } @media screen and (min-width: 1300px) { } /*--------------- Табы виды заборов ---------------*/ .tabs-top { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; } .stabtypes .tabs-top { margin-bottom: 0; } .stabtypes .tabs-bot .section-slides { margin-top: 15px; margin-bottom: 0; } .tab-name { margin-right: 10px; padding: 9px 10px; background: #E6E5E3; border-radius: 5px; line-height: 14px; font-weight: 700; font-size: 14px; color: #141311; cursor: pointer; } .stabtxt .tab-name { margin-bottom: 10px; } .tab-name:last-child { margin-right: 0px; } .tab-active { background: #141311; color: #fff; } .tab-content p { margin-bottom: 20px; line-height: 22px; font-size: 14px; } .tabtype-slider { } .tabtype-items { margin-left: -15px; margin-right: -15px; padding: 20px 15px; } .tabtype-item { position: relative; padding: 10px 15px 15px; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; } .type-pagination { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .type-pagination span { width: 15px; height: 3px; margin: 0 2.5px; background: #b8b8b6; border-radius: 100px; } .type-pagination span.swiper-pagination-bullet-active { background: #141311; } .tcosts { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .tcost { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 13px 0 15px; background: #FAF9F7; border-radius: 5px; } .tabtype-item-title { margin-top: 23px; text-align: center; line-height: 30px; font-weight: 700; font-size: 22px; } .tabtype-item-cost { margin-bottom: 10px; text-align: center; line-height: 36px; font-weight: 700; font-size: 28px; } .tcosts-cost { line-height: 26px; font-weight: 700; font-size: 18px; } .tcost:last-child .tcosts-cost { line-height: 26px; font-size: 13px; } .tcosts-size { line-height: 20px; font-size: 14px; } .tabtype-item .btn { width: 100%; margin-top: 15px; text-align: center; } .type-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; margin-top: 10px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 14.5px; text-align: center; line-height: 20px; font-size: 14px; } .type-foot b { margin-top: 10px; font-size: 20px; } @media screen and (min-width: 768px) { .type-foot b { margin-top: 0; margin-left: 10px; font-size: 20px; } } @media screen and (min-width: 1024px) { .tabs-top { margin-bottom: 30px; } .stabtypes .tabs-top { margin-bottom: 10px; } .tab-name { margin-right: 20px; padding: 9px 20px; line-height: 22.4px; font-size: 16px; } .tab-content p { margin-bottom: 25px; line-height: 24px; font-size: 16px; } .tabtype-item { padding: 10px 20px 20px; } .type-pagination span { width: 20px; height: 3px; } .tabtype-item-title { margin-top: 23px; line-height: 28px; font-size: 20px; } .tabtype-item-cost { line-height: 40px; font-size: 28px; } .tcosts-cost { line-height: 30.8px; font-size: 22px; } .tcost:last-child .tcosts-cost { line-height: 22.4px; font-size: 13px; } .tcosts-size { line-height: 22.4px; font-size: 16px; } .tabtype-item .btn { height: 50px; line-height: 50px; margin-top: 20px; } .type-foot { font-size: 16px; } .type-foot b { line-height: 30.8px; font-size: 22px; } } @media screen and (min-width: 1300px) { .tabs-top { margin-bottom: 40px; } .stabtypes .tabs-top { margin-bottom: 20px; } .tabtype-item { padding: 10px 30px 30px; } .tabtype-item-title { line-height: 30.8px; font-size: 22px; } .tabtype-item-cost { line-height: 44.8px; font-size: 32px; } .tcost:last-child .tcosts-cost { line-height: 22.4px; font-size: 16px; } } /*--------------- Табы цвета ---------------*/ .tab-col { margin-bottom: 25px; cursor: pointer; } .tab-col.tab-active, .tab-col:hover { color: #E0BD69; } .tab-col.tab-active, .tab-col:hover { top: -15px; padding-top: 15px; border-radius: 10px; } @media screen and (max-width: 992px) { .sblack .overflow-inner.tabs-top-clr.row { padding-top: 15px; margin-left: 0; } } .tab-col-img { position: relative; margin-bottom: 10px; border-radius: 10px; overflow: hidden; } .tab-col.tab-active .tab-col-img::after, .tab-col:hover .tab-col-img::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(224, 189, 105, 0.5); z-index: 1; } .tab-col-title { margin-bottom: 6px; font-weight: 700; line-height: 28px; font-size: 20px; } .tab-col-txt { line-height: 20px; font-size: 13px; } .tab-full { width: 100%; } .tab-video { position: relative; display: block; border-radius: 10px; overflow: hidden; } .tab-video:hover::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(20, 19, 17, 0.5) 0%, rgba(20, 19, 17, 0.9) 100%); border-radius: 10px; z-index: 1; } .tab-video:hover::before { position: absolute; display: block; content: ''; width: 70px; height: 70px; top: 50%; left: 50%; margin-top: -35px; margin-left: -35px; background: url(../../images/tab-video.svg) no-repeat; background-size: contain; z-index: 2; } @media screen and (min-width: 768px) { .tab-col { margin-bottom: 25px; } } @media screen and (min-width: 1024px) { .tab-col { margin-bottom: 35px; } .tab-col-img { margin-bottom: 13px; } .tab-video:hover::before { width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; } } @media screen and (min-width: 1300px) { .tab-col { margin-bottom: 44px; } .tab-col-title { line-height: 30.8px; font-size: 22px; } .tab-col-txt { line-height: 24px; font-size: 16px; } .tab-video:hover::before { width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; } } /*--------------- Табы текст ---------------*/ .tabtxt-slider { margin-top: 5px; overflow: visible; } .tabtxt-slider img { border-radius: 10px; } @media screen and (min-width: 768px) { } @media screen and (min-width: 1024px) { .tabtxt-slider { margin-top: 15px; } } @media screen and (min-width: 1300px) { .tabtxt-slider { margin-top: 20px; } } /*--------------- Как купить ---------------*/ .hb-items.row > div { margin-bottom: 16px; } .hb-item { height: 100%; padding: 20px; border-radius: 10px; box-sizing: border-box; line-height: 18px; font-size: 14px; } .hb-item-top { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 14px; z-index: 1; } .hb-item-top-img { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; } .hb-item-top img, .hb-item-top .svg { width: auto; height: 100%; } .hb-item-top-txt { width: calc(100% - 50px); padding-left: 16px; box-sizing: border-box; } .hb-name { font-weight: 700; font-size: 16px; } .hb-bot { display: flex; justify-content: center; } .hb-bot .btn { width: 300px; padding: 0; text-align: center; } @media screen and (min-width: 768px) { } @media screen and (max-width: 1023px) { .hb-items { margin-left: -8px; padding-right: 5px; } .hb-items .col-3 { padding: 0 8px; } } @media screen and (min-width: 1024px) { .hb-items.row > div { margin-bottom: 20px; } .hb-items { margin: 0 -10px; } .hb-items .col-lg-3 { padding: 0 10px; } } @media screen and (min-width: 1300px) { .hb-items.row > div { margin-bottom: 30px; } .hb-items { margin: 0 -15px; } .hb-items .col-lg-3 { padding: 0 15px; } .hb-item { padding: 29px 30px 24px; line-height: 24px; font-size: 16px; } .hb-item-top-img { width: 60px; height: 60px; } .hb-item-top-txt { width: calc(100% - 60px); padding-left: 20px; } .hb-name { line-height: 30.8px; font-size: 22px; } } /*--------------- Галерея ---------------*/ .sgallery .beforetitle { font-weight: 700; } .sgallery .aftertitle { margin-top: -15px; font-weight: 700; } .gal-top-txt { margin-top: -10px; margin-bottom: 15px; line-height: 20px; font-size: 14px; } .gallerys { margin-bottom: 30px; } .gallerys-mob { display: block; } .gallerys-desk { display: none; } .gal-first { position: relative; } .gal-first::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(20, 19, 17, 0.95) 0%, rgba(20, 19, 17, 0.7) 100%); border-radius: 10px; z-index: 1; } .gallery-item-inner { position: absolute; display: flex; flex-direction: column; top: 30px; bottom: 30px; left: 20px; right: 20px; color: #fff; z-index: 2; } .gals-items img { border-radius: 10px; } .form-gal { position: relative; padding: 5px 20px 20px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; } .form-gal-img { width: 60%; margin: 0 auto 5px; } .form-gal-info { width: 100%; box-sizing: border-box; } .form-gal-title { margin-bottom: 16px; font-weight: 700; line-height: 28px; font-size: 20px; text-align: center; } .form-gal .formio-elem { position: relative; margin-bottom: 16px; } .form-gal-form .art_tel { height: 44px; line-height: 44px; padding-left: 40px; background: transparent url(../../images/art-tel.svg) no-repeat 15px 50%; border-radius: 5px; font-size: 16px; } .form-gal-form .button { height: 44px; line-height: 44px; padding: 0; text-align: center; } .form-gal-form form .agreee { margin-top: 10px; } @media screen and (min-width: 768px) { .sgallery { padding-top: 50px; } .form-gal { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-left: 0; box-sizing: border-box; } .form-gal-img { width: 25%; margin: 0; } .form-gal-info { width: 75%; } .form-gal-title { margin-bottom: 10px; text-align: left; font-size: 22px; } .form-gal-form form { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .form-gal .formio-elem { width: 55%; margin-bottom: 0; padding-right: 16px; box-sizing: border-box; } .form-gal-form .button { width: 45%; } .form-gal .formio-error { position: absolute; top: -25px; left: 0; } .form-gal .message-success { margin-top: 5px; } } @media screen and (min-width: 1024px) { .sgallery { padding-top: 70px; } .gallerys { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 10px; margin-bottom: 70px; } .gallerys-mob { display: none; } .gallerys-desk { display: block; } .gallery-item { position: relative; width: 100%; height: 0; padding-bottom: 100%; border-radius: 10px; overflow: hidden; } .gallery-item:nth-of-type(1) { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3; padding-bottom: calc(100% + 10px); } .gallery-item:nth-of-type(2) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } .gallery-item:nth-of-type(3) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .gallery-item:nth-of-type(4) { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } .gallery-item:nth-of-type(5) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; } .gallery-item:nth-of-type(6) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; padding-bottom: 33%; } .gallery-item:nth-of-type(7) { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .gallery-item-img { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; } .gallery-item:nth-of-type(1) img { height: 100%; } .gallery-item-inner { top: 44px; bottom: 44px; left: 30px; right: 30px; } .gallerys .beforetitle { margin-bottom: 15px; line-height: 20.8px; font-size: 16px; } .gallerys h2 { margin-bottom: 15px; color: #E0BD69; } .gallerys .aftertitle { margin-bottom: 15px; line-height: 32px; font-size: 26px; } .gal-inner-txt { line-height: 20px; font-size: 14px; } .gal-inner-link { display: flex; align-items: center; margin-top: auto; font-weight: 700; } .gal-inner-link img, .gal-inner-link .svg { margin-left: 10px; } .form-gal { padding-left: 22%; box-sizing: border-box; } .form-gal-img { position: absolute; width: 20%; bottom: 0; left: 10px; margin: 0; } .form-gal-info { display: flex; justify-content: space-between; align-items: center; width: 100%; } .form-gal-title { width: 42%; margin: 0; padding: 0; } .form-gal-form { width: 57%; } .form-gal-form .art_tel { height: 50px; line-height: 50px; } .form-gal-form .button { height: 50px; line-height: 50px; } } @media screen and (min-width: 1300px) { .sgallery { padding-top: 100px; } .gallerys { margin-bottom: 100px; } .form-gal { padding: 30px 30px 30px 22%; } .form-gal-title { width: 46%; line-height: 44.8px; font-size: 32px; } .gallerys .aftertitle { line-height: 44.8px; font-size: 32px; } .gal-inner-txt { line-height: 24px; font-size: 16px; } .form-gal-form { width: 53%; } .form-gal-form .art_tel { height: 60px; font-size: 20px; line-height: 60px; } .form-gal-form .button { height: 60px; line-height: 60px; } } /*--------------- Слайдер ---------------*/ .section-slides { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; line-height: 21px; font-weight: 500; font-size: 14px; } .section-slides img, .section-slides .svg { margin-top: -2px; animation: horizontal-shaking 2.5s infinite; } .section-slides .svg path { fill: #141311; } .sblack .section-slides .svg path { fill: #fff; } @keyframes horizontal-shaking { 0% { transform: translateX(0) } 25% { transform: translateX(10px) } 50% { transform: translateX(-10px) } 75% { transform: translateX(10px) } 100% { transform: translateX(0) } } .swipe-bot-nav { display: none; justify-content: flex-end; margin-top: 20px; } .swipe-bot-nav .swiper-button-prev, .swipe-bot-nav .swiper-button-next { position: relative; top: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin-top: 0; padding: 0 12px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 5px; box-sizing: border-box; } .swipe-bot-nav .swiper-button-prev, .swipe-bot-nav .swiper-button-prev:hover { background: #E6E5E3; border: 0; cursor: default; } .swipe-bot-nav .swiper-button-prev .svg, .swipe-bot-nav .swiper-button-prev:hover .svg { opacity: .3; } .sblack .swipe-bot-nav .swiper-button-prev, .sblack .swipe-bot-nav .swiper-button-prev:hover { background: rgba(255, 255, 255, .05); border: 0; cursor: default; } .sblack .swipe-bot-nav .swiper-button-prev .svg, .sblack .swipe-bot-nav .swiper-button-prev:hover .svg { opacity: .3; } .sblack .swipe-bot-nav .swiper-button-prev .svg path, .sblack .swipe-bot-nav .swiper-button-prev:hover .svg path { fill: #fff; } .swipe-bot-nav .swiper-button-prev.active { background: #fff; border: 1px solid #E6E5E3; cursor: pointer; } .swipe-bot-nav .swiper-button-prev.active .svg, .swipe-bot-nav .swiper-button-prev.active:hover .svg { opacity: 1; } .sblack .swipe-bot-nav .swiper-button-prev.active { background: #fff; border: 1px solid #E6E5E3; cursor: pointer; } .sblack .swipe-bot-nav .swiper-button-prev.active .svg, .sblack .swipe-bot-nav .swiper-button-prev.active:hover .svg { opacity: 1; } .sblack .swipe-bot-nav .swiper-button-prev.active .svg path, .sblack .swipe-bot-nav .swiper-button-prev.active:hover .svg path { fill: #141311; } .swipe-bot-nav .swiper-button-prev::after, .swipe-bot-nav .swiper-button-next::after { display: none; } .swipe-bot-nav .swiper-button-next { margin-left: 10px; } .swipe-bot-nav .swiper-button-prev.active:hover, .swipe-bot-nav .swiper-button-next:hover, .sblack .swipe-bot-nav .swiper-button-prev.active:hover { background: #eee; } .slider-items { overflow: visible; } .slider-items .swiper-slide { height: auto; } .action-item { position: relative; height: 100%; border-radius: 10px; overflow: hidden; } .action-txt { position: relative; height: 100%; padding: 16px 20px; line-height: 20px; font-size: 14px; } .action-txt::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: #fff; opacity: .08; z-index: 0; } @media screen and (min-width: 768px) { } @media screen and (min-width: 1024px) { .section-slides { display: none; } .swipe-bot-nav { display: flex; } .action-txt { padding: 20px 25px; line-height: 20px; font-size: 14px; } } @media screen and (min-width: 1300px) { .action-txt { padding: 24px 30px; line-height: 24px; font-size: 16px; } } /*--------------- Ворота и калитки ---------------*/ .gates-items { margin-bottom: 30px; } .gates-items .col-md-4 { margin-bottom: 20px; } .gates-items .col-md-4:last-child { margin-bottom: 0; } .gates-item { position: relative; width: 100%; height: 0; padding-bottom: 70%; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 10px; overflow: hidden; } .gates-item::after { position: absolute; display: block; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(180deg, rgba(20, 19, 17, 0) 0%, rgba(20, 19, 17, 0.95) 100%); } .gates-item-inner { position: absolute; bottom: 16px; right: 15px; left: 15px; z-index: 2; color: #fff; } .gates-item-title { margin-bottom: 10px; font-weight: 700; line-height: 28px; font-size: 20px; } .gates-item-txt { margin-bottom: 10px; line-height: 18px; font-size: 13px; } .gates-item-link { display: flex; align-items: center; font-weight: 700; line-height: 20px; font-size: 14px; } .gates-item-link img, .gates-item-link .svg { margin-left: 10px; } .form-block { padding: 20px 20px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; } .form-block-img { width: 50%; margin: 0 auto 15px; } .form-block-info { width: 100%; box-sizing: border-box; } .form-block-title { margin-bottom: 16px; font-weight: 700; line-height: 28px; font-size: 20px; text-align: center; } .form-block-form form { } .form-block-form form .agreee { margin: 10px 0 0; } .form-block .formio-elem { position: relative; margin-bottom: 16px; } .form-block-form .art_name { height: 44px; line-height: 44px; padding-left: 40px; background: transparent url(../../images/art-name.svg) no-repeat 15px 50%; border-radius: 5px; font-size: 16px; } .form-block-form .art_tel { height: 44px; line-height: 44px; padding-left: 40px; background: transparent url(../../images/art-tel.svg) no-repeat 15px 50%; border-radius: 5px; font-size: 16px; } .form-block-form .button { height: 44px; line-height: 44px; } @media screen and (min-width: 768px) and (max-width: 1023px) { .gates-items { margin-left: -10px; margin-right: -10px; } .gates-items .col-md-4 { margin-bottom: 0; } .form-block-img { width: 15%; margin: 0; } .form-block-info { width: 85%; padding-left: 15px; } .gates-items .col-lg-4 { padding: 0 10px; } .gates-item { margin-bottom: 0; padding-bottom: 100%; } .gates-item-inner { bottom: 16px; right: 15px; left: 15px; } .gates-item-title { margin-bottom: 10px; font-weight: 700; line-height: 30px; font-size: 22px; } .gates-item-txt { margin-bottom: 10px; line-height: 18px; font-size: 13px; } .gates-item-link { line-height: 20px; font-size: 14px; } .form-block { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; } .form-block-title { margin-bottom: 16px; font-weight: 700; line-height: 32px; font-size: 26px; text-align: left; } .form-block-form form { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .form-block-form form .agreee { margin: 10px 0 0; } .form-block-form form .agreee .custom-checkbox { display: flex; align-items: center; } .form-block .formio-elem { width: 33%; padding-right: 16px; margin-bottom: 0; } .form-block .formio-error { position: absolute; bottom: -20px; left: 0; } .form-block .message-success { margin-top: 5px; } .form-block-form .art_name { height: 40px; font-size: 14px; } .form-block-form .art_tel { height: 40px; font-size: 14px; } .form-block-form .button { width: 33%; height: 40px; line-height: 40px; padding: 0; text-align: center; } } @media screen and (min-width: 1024px) { .gates-items { margin-bottom: 70px; } .gates-items .col-md-4 { margin-bottom: 0; } .form-block { display: flex; justify-content: space-between; align-items: center; padding: 22px 30px; } .form-block-img { width: 20%; margin: 0; } .form-block-info { width: 80%; padding-left: 27px; } .form-block-title { margin-bottom: 16px; line-height: 38.4px; font-size: 32px; text-align: left; } .gates-item-inner { bottom: 16px; right: 20px; left: 20px; } .gates-item { margin-bottom: 0; padding-bottom: 100%; } .gates-item-title { margin-bottom: 10px; line-height: 30px; font-size: 24px; } .gates-item-txt { margin-bottom: 10px; line-height: 20px; font-size: 14px; } .gates-item-link { line-height: 20px; font-size: 14px; } .form-block-form form { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .form-block-form form .agreee { margin: 10px 0 0; } .form-block-form form .agreee .custom-checkbox { display: flex; align-items: center; } .form-block .formio-elem { width: 32%; padding-right: 20px; margin-bottom: 0; box-sizing: border-box; } .form-block .formio-error { position: absolute; bottom: -20px; left: 0; } .form-block .message-success { margin-top: 5px; } .form-block .formio-elem.elem-two { width: 36%; } .form-block-form .art_name { height: 50px; } .form-block-form .art_tel { height: 50px; } .form-block-form .button { width: 32%; height: 50px; line-height: 50px; } } @media screen and (min-width: 1300px) { .gates-items { margin-bottom: 100px; } .gates-item-inner { bottom: 24px; right: 30px; left: 30px; } .gates-item-title { margin-bottom: 15px; line-height: 44.8px; font-size: 32px; } .gates-item-txt { margin-bottom: 17px; line-height: 24px; font-size: 16px; } .gates-item-link { line-height: 24px; font-size: 16px; } .form-block-form .art_name { height: 60px; font-size: 20px; } .form-block-form .art_tel { height: 60px; font-size: 20px; } .form-block-form .button { height: 60px; line-height: 60px; } } /*--------------- Преимущества ---------------*/ .block-items.row > div { margin-bottom: 16px; } .block-item { height: 100%; padding: 20px; border-radius: 10px; box-sizing: border-box; line-height: 18px; font-size: 14px; } .block-item-top { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 14px; z-index: 1; } .block-item-top-img { display: flex; justify-content: center; align-items: center; width: 25%; height: 50px; } .block-item-top img, .block-item-top .svg { width: auto; height: 100%; } .block-item-top-txt { width: 75%; padding-left: 20px; box-sizing: border-box; } .block-name { font-weight: 700; font-size: 16px; } .block-link { position: relative; display: flex; align-items: center; margin-top: 10px; font-weight: 500; font-size: 14px; color: #E0BD69; z-index: 1; } .block-link img, .block-link .svg { width: 12px; margin-left: 5px; } .block-link:hover { color: #E0BD69; } @media screen and (min-width: 768px) { } @media screen and (max-width: 1023px) { .block-items { margin-left: -8px; padding-right: 5px; } .block-items .col-3 { padding: 0 8px; } } @media screen and (min-width: 1024px) { .block-items.row > div { margin-bottom: 20px; } .block-items { margin: 0 -10px; } .block-items .col-lg-3 { padding: 0 10px; } } @media screen and (min-width: 1300px) { .block-items.row > div { margin-bottom: 30px; } .block-items { margin: 0 -15px; } .block-items .col-lg-3 { padding: 0 15px; } .block-item { padding: 29px 30px 24px; line-height: 24px; font-size: 16px; } .block-item-top-img { height: 60px; } .block-name { line-height: 30.8px; font-size: 22px; } } /*--------------- Команда ---------------*/ .team-items .col-6 { margin-bottom: 16px; } .team-item { padding: 16px 10px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; text-align: center; } .team-items .col-6.faq-fo { display: none; } .team-items .col-6.faq-fo.active { display: block; } .team-img { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 0 auto 13px; } .team-name { line-height: 140%; font-weight: 700; font-size: 16px; } .team-status { line-height: 150%; font-size: 14px; } .faq-btn { width: 100%; height: 40px; line-height: 40px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 5px; text-transform: uppercase; text-align: center; font-weight: 700; font-size: 12px; cursor: pointer; } @media screen and (min-width: 768px) { } @media screen and (max-width: 1023px) { .team-items { margin-left: -8px; margin-right: -8px; } .team-items .col-6 { padding: 0 8px; } } @media screen and (min-width: 1024px) { .team-item { padding: 30px 0 24px; } .team-img { width: 160px; height: 160px; } .team-name { line-height: 140%; font-weight: 700; font-size: 20px; } .team-name br { display: none; } .team-status { line-height: 150%; font-size: 15px; } .faq-btn { height: 60px; line-height: 60px; font-size: 16px; } .team-items { margin: 0 -10px; } .team-items .col-lg-3 { padding: 0 10px; margin-bottom: 20px; } } @media screen and (min-width: 1300px) { .team-name { font-size: 22px; } .team-status { font-size: 16px; } .team-items { margin: 0 -15px; } .team-items .col-lg-3 { padding: 0 15px; margin-bottom: 30px; } } /*--------------- Отзывы ---------------*/ .opi-items .swiper-slide { height: auto; } .opi-items { margin-right: -15px; } .opi-item { height: 100%; padding: 20px; box-sizing: border-box; } .opi-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; } .opi-item-top img { width: 50px; height: 50px; } .opi-name { width: calc(100% - 50px); padding-left: 15px; font-weight: 700; line-height: 24px; font-size: 16px; box-sizing: border-box; } .opi-txt { position: relative; padding-left: 21px; max-height: 144px; overflow: hidden; font-style: italic; line-height: 20px; font-size: 14px; box-sizing: border-box; z-index: 1; } .opi-txt::after { position: absolute; display: block; content: ''; width: 1px; height: 100%; top: 0; left: 0; background: #E0BD69; } .opi-txt.active { max-height: 1000px; } .opi-more { position: relative; display: flex; align-items: center; margin-top: 13px; font-weight: 700; line-height: 20px; font-size: 14px; color: #E0BD69; cursor: pointer; z-index: 1; } .opi-more img, .opi-more .svg { margin-left: 10px; } @media screen and (min-width: 768px) { .opi-items { margin-right: 0; } } @media screen and (min-width: 1024px) { } @media screen and (min-width: 1300px) { .opi-item { padding: 30px 30px 24px; } .opi-item-top { margin-bottom: 20px; } .opi-item-top img { width: 60px; height: 60px; } .opi-name { width: calc(100% - 60px); padding-left: 20px; line-height: 30.8px; font-size: 22px; } .opi-more { line-height: 24px; font-size: 16px; } } /*--------------- FAQ ---------------*/ .faq-item { position: relative; border-top: 1px solid #e6e5dc; box-sizing: border-box; cursor: pointer; } .faq-item::after { position: absolute; display: block; content: ''; width: 26px; height: 1px; top: 50%; right: 10px; background: #141311; } .faq-item::before { position: absolute; display: block; content: ''; height: 26px; width: 1px; top: 50%; right: 23px; margin-top: -13px; background: #141311; } .faq-item.active::before { display: none; } .faq-item:last-child { border-bottom: 1px solid #e6e5dc; } .faq-question { position: relative; padding: 16px 50px 16px 10px; line-height: 24px; font-weight: 700; font-size: 17px; } .faq-item.active .faq-question { padding-bottom: 15px; } .faq-answer { display: none; padding: 0px 50px 16px 10px; line-height: 20px; font-size: 14px; } .faq-answer p:last-child { margin-bottom: 0; } @media screen and (min-width: 768px) { .faq-question { padding: 20px 50px 20px 10px; } .faq-answer { padding: 0px 50px 20px 10px; } } @media screen and (min-width: 1024px) { .faq-item::after { width: 30px; } .faq-item::before { height: 30px; right: 25px; margin-top: -15px; } .faq-question { padding: 22px 60px 24px 10px; line-height: 28px; font-size: 20px; } .faq-answer { padding: 0px 60px 24px 10px; line-height: 24px; font-size: 16px; } } @media screen and (min-width: 1300px) { .faq-question { padding: 22px 60px 24px 10px; line-height: 30.8px; font-size: 22px; } } /*--------------- Контакты ---------------*/ .contacts { padding: 15px; } .contacts-info { position: relative; z-index: 1; } .contacts-item { display: flex; align-items: center; margin-bottom: 20px; color: #fff; } .contacts-img { display: flex; align-items: center; width: 36px; } .contacts-txt { font-weight: 700; line-height: 24px; font-size: 18px; } .contacts-txt span { font-weight: 400; line-height: 20px; font-size: 14px; } .contacts-bot { display: flex; flex-direction: column-reverse; align-items: center; } .contacts-bot .btn { width: 100%; max-width: 345px; margin-top: 15px; padding: 0; text-align: center; font-size: 14px; } .contacts-map { position: relative; margin-top: 20px; z-index: 1; } .contacts-map iframe { width: 100%; min-height: 300px; height: 100%; border-radius: 10px; overflow: hidden; } #map { position: relative; width: 100%; height: 100%; } @media screen and (max-width: 1024px) { #map { height: 300px; } } @media screen and (min-width: 768px) { .contacts-map { margin: 0; } .contacts-img { width: 44px; } .contacts-bot { margin-top: 22px; } .contacts-bot .btn { max-width: 218px; margin: 0 15px 0 0; } } @media screen and (min-width: 1024px) { .contacts { padding: 30px; } .contacts-txt { line-height: 26px; font-size: 20px; } .contacts-txt span { line-height: 24px; font-size: 16px; } .contacts-bot { display: flex; flex-direction: row; align-items: center; } .contacts-bot .btn { max-width: 218px; margin: 0 20px 0 0; } } @media screen and (min-width: 1300px) { .contacts { padding: 30px; } .contacts-txt { line-height: 30.8px; font-size: 22px; } .contacts-bot .btn { margin: 0 25px 0 0; } } /*--------------- Слайдер клиенты ---------------*/ .clients-items { margin-right: -15px; } .clients-item { display: flex; justify-content: center; align-items: center; padding: 10px; background: #FFFFFF; border: 1px solid #E6E5E3; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; } .clients-item img { height: 100%; width: auto; } @media screen and (min-width: 768px) { } @media screen and (min-width: 1024px) { .clients-items { margin-right: 0; } .clients-item { height: 140px; padding: 0; } } @media screen and (min-width: 1300px) { } /*---------------------------------------- Footer ----------------------------------------*/ #footer { padding: 35px 0; background: #141311; color: #fff; } .foot { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .foot-logo { width: 80%; margin-bottom: 15px; } .foot-logo .svg { width: 100%; height: auto; } .fmenu { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 0 10px; padding: 0; } .fmenu li { margin: 0 10px 8px 0; } .fmenu li:last-child { margin: 0; } .fmenu a { letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; font-size: 12px; line-height: 18px; color: #fff; } .fmenu a:hover { text-decoration: none; color: #E0BD69; } .foot-copy { font-size: 16px; line-height: 24px; opacity: .5; } @media screen and (min-width: 768px) { #footer { padding: 20px 0; } .foot-logo { width: 30%; margin-bottom: 15px; } .fmenu { display: flex; align-items: center; margin: 0 0 15px; } .fmenu li { display: block; margin: 0 15px 0 0; } .fmenu a { font-size: 11px; line-height: 18px; } .foot-copy { font-size: 14px; line-height: 18px; } } @media screen and (min-width: 1024px) { .foot { flex-direction: row; justify-content: space-between; align-items: center; } .foot-logo { width: 17%; margin: 0; } .fmenu { margin: 0; } .fmenu li { margin: 0 15px 0 0; } .fmenu a { font-size: 10px; line-height: 20px; } .foot-copy { font-size: 12px; line-height: 20px; } } @media screen and (min-width: 1300px) { #footer { padding: 35px 0; } .foot-logo { width: 17%; } .fmenu li { margin: 0 20px 0 0; } .fmenu a { font-size: 13px; line-height: 21px; } .foot-copy { font-size: 14px; line-height: 24px; } } @media screen and (min-width: 1400px) { .fmenu li { margin: 0 25px 0 0; } .fmenu a { font-size: 14px; line-height: 21px; } .foot-copy { font-size: 16px; line-height: 24px; } } .entry-thx { display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 208px); } @media screen and (min-width: 768px) { .entry-thx { height: calc(100vh - 168px); } } @media screen and (min-width: 1024px) { .entry-thx { height: calc(100vh - 145px); } } @media screen and (min-width: 1300px) { .entry-thx { height: calc(100vh - 220px); } } /*------------------------------------- Калькуляторы ----------------------------------------*/ .calc-top { display: flex; flex-direction: column; } .optioni { position: relative; display: inline-block; padding: 5px 10px; border: 1px solid #ccc; margin: 10px 10px 0 0; cursor: pointer; border-radius: 5px; } .color-elem { position: relative; display: inline-block; margin: 10px 10px 0 0; cursor: pointer; } .optioni.selectedi { border-color: #007bff; background-color: #e0f0ff; } .color-circle { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #fff; box-sizing: border-box; } .color-elem.selectedi .color-circle::after { position: absolute; display: block; content: ''; top: -4px; left: -4px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #007bff; } .color-name { text-align: center; margin-top: 5px; font-size: 14px; } .custom-tooltip { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); background-color: #fcfcfc; padding: 8px 12px; border-radius: 6px; font-size: 14px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 10; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .custom-tooltip::after { content: ""; position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; border-color: #ddd transparent transparent transparent; } .color-elem:hover .custom-tooltip { opacity: 1; visibility: visible; } /* .lamel-img { filter: brightness(0) saturate(100%) sepia(100%) hue-rotate(75deg); transition: filter 0.3s; } */ @media screen and (min-width: 768px) { .calc-top { flex-direction: row; justify-content: space-between; margin-top: 50px; } .calc-top-left { width: 50%; } .calc-top-right { width: 50%; display: flex; flex-direction: column; align-items: center; } .lamel-img { width: auto; max-height: 350px; margin: 20px auto; } } .calc-parameters { display: flex; flex-direction: column; } .calc-section { margin-bottom: 20px; } .calc-num { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .calc-section label { display: inline-block; width: 180px; margin-right: 10px; } .calc-nums label { display: inline-block; margin-right: 10px; } .calc-nums input, .calc-nums select { height: 30px; line-height: 30px; text-align: right; border: 1px solid #ccc; border-radius: 5px; } .calc-nums select { width: 120px; } .number-input-wrapper { display: flex; align-items: center; gap: 0px; } .number-input-wrapper input[type="number"] { width: 60px; text-align: center; padding: 5px; -moz-appearance: textfield; border-radius: 0; } .number-input-wrapper input[type="number"]::-webkit-outer-spin-button, .number-input-wrapper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .btn-minus, .btn-plus { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #ddd; border: none; font-size: 18px; cursor: pointer; transition: background-color 0.2s ease; } .btn-minus { border-radius: 5px 0 0 5px; } .btn-plus { border-radius: 0 5px 5px 0; } .btn-minus:hover, .btn-plus:hover { background-color: #bbb; } .lamel-top-info { display: flex; display: none; justify-content: center; } @media screen and (min-width: 1024px) { .calc-parameters { flex-direction: row-reverse; } .calc-image { width: 60%; padding-left: 50px; box-sizing: border-box; margin-bottom: 20px; } .calc-nums { width: 40%; text-align: right; } } .calc-nums h4 { margin-bottom: 20px; } .add-option { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .add-option-name { font-size: 18px; } .add-option label { margin: 0; } .acf-switch-wrapper { position: relative; display: inline-block; width: 50px; height: 24px; } .acf-switch-checkbox { display: none; } .acf-switch { background-color: #ccc; border-radius: 13px; width: 100%; height: 100%; position: relative; cursor: pointer; transition: background-color 0.3s ease; } .acf-switch-slider { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background-color: #fff; border-radius: 50%; transition: transform 0.3s ease; } .acf-switch-checkbox:checked + .acf-switch { background-color: #0073aa; } .acf-switch-checkbox:checked + .acf-switch .acf-switch-slider { transform: translateX(26px); } .add-option-hidden { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 15px; } .add-option-hidden label { display: flex; flex-direction: row-reverse; align-items: center; cursor: pointer; margin: 0 0 10px 0; } .add-option-hidden input { width: 16px; height: 16px; margin: 0 0 0 15px; cursor: pointer; } #calc-btn { display: block; margin: 20px auto 50px; } #calc-results ul { margin: 0 0 20px; padding: 0 0 0 20px; list-style: circle; } .screen-2-top { display: flex; flex-direction: column; } .screen-2-top-values { display: flex; flex-direction: column; margin: 15px 0 0; } .screen-2-top-value { margin: 0 15px 10px 0; color: #777; } .screen-2-top-value span { color: #333; } .screen-2-files { display: flex; align-items: center; } .screen-2-file { display: flex; align-items: center; margin-left: 15px; margin-bottom: 15px; padding: 10px 20px; font-size: 12px; border-radius: 10px; background: #eee; color: #333; } .screen-2-file:first-child { margin-left: 0; } .screen-2-file:hover { background: #ddd; text-decoration: none; } .screen-2-file img { margin-left: 10px; max-width: 40px; } .screen-2-table-head { display: table; height: 56px; width: 100%; } .screen-2-table-head > div { display: table-cell; vertical-align: middle; height: 100%; background: #eff1f4; padding: 0; font-weight: bold; font-size: 14px; } .data-lines__line .data-lines__line-wrapper > div:nth-child(1), .screen-2-table-head > div:nth-child(1) { min-width: 470px !important; box-sizing: border-box; } .screen-2-table-head > div:not(:last-child) { border-right: 1px solid #fff; } .data-lines__line { display: table; height: 56px; width: 100%; border-bottom: 1px solid #e5e5e5; } .data-lines__line .data-lines__line-wrapper { height: 100%; display: table; width: 100%; } .data-lines__line .data-lines__line-wrapper > div { display: table-cell; vertical-align: middle; height: 100%; padding: 0 15px; } .data-lines__line .data-lines__line-wrapper > div:nth-child(1), .screen-2-table-head > div:nth-child(1) { width: calc(100% - 480px); } .screen-2-table-head > div:nth-child(1) { padding-left: 20px; } .data-lines__line .data-lines__line-wrapper > div:not(:last-child) { border-right: 1px solid #e5e5e5; } .data-lines__line .data-lines__line-wrapper > div:nth-child(1).product-col { padding: 0; } .data-lines__line .data-lines__line-wrapper > div:not(:first-child), .screen-2-table-head > div:not(:first-child) { min-width: 100px; width: 120px; text-align: center; } .data-lines__line .data-lines__line-wrapper > div:not(:last-child) { border-right: 1px solid #e5e5e5; } .screen-2-table .product_wrap { display: flex; padding: 15px 15px 15px 0; } .screen-2-table .product_wrap .img-wrap { margin-right: 18px; width: 100px; text-align: center; } .screen-2-table .product_wrap .img-wrap img { margin: 0 auto; } .screen-2-table .product_wrap .product-info { width: calc(100% - 118px); } .screen-2-table .product-name { margin-bottom: 12px; } .screen-2-table .product-properties, .screen-2-table .product-unit, .screen-2__input_values { list-style: none; margin: 0; padding: 0; display: flex; margin-bottom: 12px; } .screen-2-table .product-properties-item, .screen-2-table .product-unit-item, .screen-2__input_value { font-size: 12px; color: #777; line-height: 1.25; margin-right: 16px; } .screen-2-table .product-properties-item span, .screen-2-table .product-unit-item span, .screen-2__input_value span { color: #333; } .screen-2-bot { margin: 20px 0 50px; } .screen-2-bot-text { font-size: 12px; } .screen-2-bot-summ { margin-top: 20px; font-size: 40px; font-weight: bold; } #back-to-calc { margin-top: 15px; margin-bottom: 10px; } @media screen and (min-width: 1024px) { .screen-2-top { flex-direction: row; align-items: flex-start; justify-content: space-between; } .screen-2-top-values { flex-direction: row; align-items: center; } .screen-2-top-value { margin: 0 15px 0 0; } .screen-2-top-right { display: flex; flex-direction: column; align-items: flex-end; } .screen-2-bot-summ { margin-top: 10px; text-align: right; } .screen-2-bot-text { font-size: 13px; } #back-to-calc { margin-bottom: 0; } } .agreee { margin-bottom: 15px; } .custom-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 11px; line-height: 1.4; cursor: pointer; user-select: none; } .custom-checkbox input[type="checkbox"] { display: none; } .custom-checkbox .checkmark { width: 18px; height: 18px; background: #E0BD69; border: 1px solid #E0BD69; border-radius: 4px; position: relative; flex-shrink: 0; margin-top: 2px; transition: all 0.2s ease; } .custom-checkbox input[type="checkbox"]:checked + .checkmark::after { content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .custom-checkbox .text a { color: #E0BD69; text-decoration: underline; } .custom-checkbox .text a:hover { text-decoration: none; } .required.error { border-color: #FF6D00; } .grecaptcha-badge { visibility: hidden!important; }