@charset "utf-8";

:root {
    --color:#d3b35e;
    --dark-color:#bb9c48;
    --light-color:#d3b35e;
    --font: 'Montserrat', sans-serif;
    --font-title: 'Yeseva One', cursive;
    --box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    --box-shadow-hover: 0 10px 20px rgba(0,0,0,0.2)
}

*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

body {font-family:var(--font);margin:0;padding:0;overflow-x:hidden}
body.modal-open {overflow:hidden}
a {text-decoration:none;color:unset;}

h1,h2,h3,h4,h5,h6 {font-family:var(--font-title);}

img {display:block;max-width:100%;}

form .line {padding:5px;}
form .line input,
form .line textarea {background:none;border: 0;padding: 20px;font-size: 20px;border-bottom:3px solid;max-width: 100%;font-family: var(--font);outline: none;width:100%}
form .line input::placeholder,
form .line textarea::placeholder {color:#bababa}
form .line textarea {min-height:200px}
form input.special-line {display:none}

ul.list li {display:block;position:relative;font-size: 25px;line-height: 1.5em;}
ul.list li:before {position:absolute;top: 15px;left: -25px;display:block;content:'';width: 10px;height: 10px;transform: rotate(45deg);background:var(--color);}

.button {display:inline-block;cursor: pointer;background:var(--color);color:#fff;padding: 25px 40px;border:0;font-size: 15px;text-transform: uppercase;font-weight:600;letter-spacing:1px;transition:.2s all}
.button:hover {background:var(--dark-color)}

.alt-link {display:inline-block;font-size:20px;border-bottom:2px dotted;font-weight:600;color:var(--dark-color);margin:15px 0}

#jGrowl .jGrowl-notification {padding:20px 30px;font-size: 25px;font-family:var(--font);border-radius: 0;width: 380px;opacity: 1;line-height: 1.5em;}
#jGrowl .jGrowl-notification.af-message-error {background:var(--color) !important;color:#fff}
#jGrowl .jGrowl-notification.af-message-success {background:#000!important;color:#fff}

.elem-25,.elem-33,.elem-40,.elem-50,.elem-60,.elem-66,.elem-70,.elem-75 {float:left}
.elem-25 {width:25%}.elem-33 {width:33.333333%}.elem-40 {width:40%}.elem-50{width:50%}.elem-60{width:60%;}.elem-66{width:66.666666%}.elem-70{width:70%}.elem-75{width:75%}

.left {float:left;}
.right {float:right;}

.clearfix:before,.clearfix:after {display:table;content:" "}
.clearfix:after {clear:both}

.container {margin: 0 auto;max-width: 1300px;padding: 0 1%;}

section.gray-bg {background:rgba(211,179,94,0.15);}

.logo img {display:inline-block;vertical-align:middle;width:80px;transition:.1s all;padding: 10px 0;}
.logo span {display:inline-block;vertical-align:middle;font-size:40px;font-weight:600;text-transform:uppercase;color: var(--color)}

footer {text-align:center;padding:30px 0}

.fancybox__counter {opacity:0}

nav {position:fixed;z-index:5;left: 0;right: 0;padding: 0;z-index:100;transition:.1s all}
nav.fixed {background:#fff}
nav .menu-list ul {display:inline-block;}
nav .menu-list ul li {display:inline-block;margin-right:20px;font-weight: 900;text-transform: uppercase;padding: 25px 0;transition:.1s all }
nav .menu-list ul li a {border-bottom:3px solid rgba(0,0,0,0);transition: .2s all;color: #fff;}
nav .menu-list ul li a:hover {color:var(--color)}
nav .menu-list ul li.active a {color:var(--color);border-bottom:3px solid;padding: 5px 0;}
nav .logo {float:left}
nav .right {float:right;}
nav .right svg {width: 40px;height: 40px;margin-left: 10px;fill: #fff;}
nav input[type=checkbox] {display:none}
nav label[for=menuCheck] {display:none}
nav .messenger {display:inline-block;vertical-align:middle;}
nav .messenger a {display:inline-block;vertical-align: middle;margin:0 5px;}
nav .messenger a:hover img {transform:scale(1.05)}
nav .messenger img {width:30px;transition:.2s all;filter:invert(100)}

nav.fixed {background:#fff}
nav.fixed .logo img {width:50px;}
nav.fixed .right svg {fill:#000}
nav.fixed .menu-block .phones ul li {color:#000;font-size:18px;}
nav.fixed .menu-list ul li a,
.other-menu .menu-list ul li a,
nav .menu-block.other .phones ul li {color:#333}
.other-menu .messenger img,
nav.fixed .messenger img {filter:unset}
.other-menu.right svg {fill:#333}

nav .menu-block {display:flex;}
nav .menu-block .phones ul {padding:0;display: inline-block;vertical-align: middle;}
nav .menu-block .phones ul li {display:block;color:#fff;font-weight:300;font-size:25px;margin-bottom:5px;transition:.1s all}

.top {background-image: url('../images/slide-1.jpg');background-size:cover}
.top .container {display:flex;min-height:80vh;padding-top: 100px;}
.top .block {position:relative;margin:auto 0;color:#fff;padding: 50px;}
.top .block h1 {font-size:60px;max-width:300px;margin:0 0 30px}
.top .block p {font-size:20px;margin:0;max-width: 500px;line-height: 1.6;}

section {padding:70px 0}
section .title-line.center {text-align:center}
section .title-line h2 {font-size:40px}

.mymodal {position:fixed;top:0;left:0;right:0;bottom:0;display:flex;z-index: 999;opacity:0;visibility:hidden;transition:.1s all}
.mymodal-mask {position:fixed;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,0.4);z-index:998}
.mymodal.open {visibility: visible;opacity:1}
.mymodal-window {position:relative;margin:auto;background:#fff;width:100%;max-width:500px;padding:50px;z-index:999}
.mymodal-window .mymodal-close {cursor:pointer;position:absolute;right:0;top:0;padding:30px 40px;}
.mymodal-window h3 {text-align:center;}
.mymodal-window .line input {border:1px solid #999;padding:15px 20px;}
.mymodal-window .button-line {text-align:center}

#top-slider .item {position:relative;background-size:cover}
#top-slider .item .mask {position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.3)}
#top-slider.slick-slider .slick-next,
#top-slider.slick-slider .slick-prev {visibility:hidden;opacity:0}
#top-slider .slick-dots {bottom:20px;right: 20px;width: auto;}
#top-slider .slick-dots li {font-size:0;height: 7px;width:30px;overflow: hidden;}
#top-slider .slick-dots li button {background:#fff;font-size:0;height: 3px;width:100%}
#top-slider .slick-dots li button:before {font-size:0}
#top-slider .slick-dots li.slick-active button {background:var(--color)}

section#calculator {padding-bottom:0}
section#calculator .calc-form {padding-right:50px}
section#calculator .line h3 {font-weight:300;font-family:var(--font);margin:0 0 10px}
section#calculator .radio {padding-bottom:20px}
section#calculator .calc-form label {font-size:14px}
section#calculator .calc-form .radio input[type=radio] {display:none;}
section#calculator .calc-form .radio input[type=radio] + label {display:inline-block;cursor:pointer;background:#f0f0f0;padding:20px 15px;}
section#calculator .calc-form .radio input[type=radio]:checked + label {background:#c5c5c5;}
section#calculator .calc-form .line input,
section#calculator .calc-form .line select {display:block;border:1px solid #999;padding:20px;font-size:20px;background:#fff;width:100%}
section#calculator .calc-form .line label b {color:red;padding:0 10px}
section#calculator .total {display:block;font-size:25px;font-weight:600;margin-top:20px;}
section#calculator .total i {font-style:unset}
section#calculator .button {width:100%}

section#calculator .re-call {background:rgba(211,179,94,0.15);margin: 70px 0 0;padding: 50px 0 70px;}
section#calculator .re-call form {max-width:600px;margin:0 auto}
section#calculator .re-call form input {border:0;background:#fff}

.ceiling-types h2 {text-align:center;}
.ceiling-types .tabs-head {text-align:center;margin-bottom:20px}
.ceiling-types .tabs-head .tab-link {cursor:pointer;display:inline-block;font-size:18px;font-weight:600;margin:0 10px;}
.ceiling-types .tabs-head .tab-link.active {color:var(--dark-color)}
.ceiling-types .tab {display:none}
.ceiling-types .tab.active {display:block}


section#contacts .title-line {text-align:center}
section#contacts .title-line p {max-width:500px;margin:20px auto;font-size:20px;line-height:1.7em;}
section#contacts .items {display:flex;max-width:800px;margin:0 auto}
section#contacts .items .item {background:#fff;padding:30px;margin:10px;width:100%;text-align:center}
section#contacts .items .item svg {width:50px;}
section#contacts .items .item h4 {font-family:var(--font);font-size:25px;margin:20px 0 15px}
section#contacts .items .item a {display:block;font-size:20px;line-height:1.7em}

section#gallery {padding-bottom:0}
section#gallery .item {display:block;width: 100%;margin: auto;background-size:cover;background-position:center;overflow: hidden;}
section#gallery .item:before {content: "";padding-top: 100%;float: left;}

section#reviews .slick-slider .slick-prev,
section#reviews .slick-slider .slick-next {visibility:hidden;opacity:0;}
section#reviews .item:before {display:block;content:'';width:50px;height:50px;background-image:url('../images/quote.svg')}
section#reviews .item p {font-size:18px;line-height:1.6em;padding:0 15px 0 0;}
section#reviews .item span {font-weight:600;}

section#about {font-size:18px;}
section#about p b {font-size:20px;}
section#about .content {max-width:900px;margin:0 auto}


.slick-slider .slick-prev,
.slick-slider .slick-next {width:40px;height:40px;z-index:99;background:rgba(255,255,255,0.9);border-radius:50px;padding:5px;transition:.2s all}
.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {background:#fff}
.slick-slider .slick-prev {left:30px;}
.slick-slider .slick-next {right:30px}
.slick-slider .slick-prev:before,
.slick-slider .slick-next:before {content:'';display:block;border: solid #000;border-width: 0 3px 3px 0;display: inline-block;padding: 5px;transform:rotate(135deg);}
.slick-slider .slick-next:before {transform:rotate(-45deg)}

.min-top.top {position:relative;}
.min-top.top .mask {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3)}
.min-top.top .title-line {position:relative;padding:10px 25px;margin:20px auto;color: #fff;font-size: 22px;}
.min-top.top .container {min-height:auto}

.light-page .block {padding-top:50px}
.light-page .block .title {text-align:center}
.light-page .block h2 {display:inline-block;position:relative;text-align:center;margin:20px auto;background: #fff;padding: 0 15px;}
.light-page .block h2:before {position:absolute;content:'';display:block;width:calc(100% + 70px);height:2px;background:var(--color);left: -35px;top: 15px;z-index: -1;}
.light-page .block p {font-size:18px;max-width:600px}
.light-page .block .gallery .item {padding:5px;text-align:center}
.light-page .block .gallery .item span {display:block;text-align:center;font-size:18px;margin-top:10px;}
.light-page .block .gallery img {display:inline-block;}
.light-page .block .gallery .button {padding:10px 10px;border-radius:5px;font-size:12px;margin-top:15px}

.pay-page .content {max-width:600px;margin:0 auto;}
.pay-page .content ul li {display:block;line-height: 30px;font-size: 18px;}
.pay-page .content ul li:before {display:inline-block;content:'';width:20px;height:12px;border:3px solid var(--dark-color);border-width:0 0 3px 3px;transform:rotate(-45deg);margin-right:10px;margin-bottom: 5px;}


.contacts-page {text-align:center;}
.contacts-page h3 {font-size:30px}
.contacts-page .line .messenger a {display:inline-block;vertical-align: middle;margin-right:10px;width:40px;}
.contacts-page .line .messenger img {width:100%}

@media only screen and (max-width : 1210px) {
    nav .phones {display:none;}
    
    section#calculator .elem-66 {width:100%;padding: 0;}
    section#calculator .elem-66 + .elem-33 {display:none}
}

@media only screen and (max-width : 975px) {
    .elem-33,
    .elem-50 {width:100%;}

    nav label[for=menuCheck] {display:block;padding: 20px;}
    nav #menuCheck:checked + .menu-block {visibility:visible;opacity:1}
    nav #menuCheck:checked + .menu-block li {margin-right: 0;}
    nav #menuCheck:checked + .menu-block + .menu-mask {visibility:visible;opacity:1}
    
    nav .menu .menu-block {display:block;position:fixed;visibility: hidden;opacity: 0;right: 0;top: 0;bottom:0;width: 100%;z-index: 3;background: #fff;transition:.2s all;}
    nav .menu .menu-block label[for=menuCheck] {position:relative;text-align:right;padding:20px 50px 20px 20px;}
    nav .menu .menu-block label[for=menuCheck]:before,
    nav .menu .menu-block label[for=menuCheck]:after {position:absolute;display: block;right: 20px;top: 50%;content:'';width: 20px;transform:rotate(45deg);height: 1px;background:#000;z-index: 1;}
    nav .menu .menu-block label[for=menuCheck]:after {transform: rotate(-45deg);}
    nav .menu .menu-block ul {width:100%;}
    nav .menu .menu-block li {display: block;margin-right: -180px;text-align: right;padding: 0;transition: .2s all;}
    nav .menu .menu-list ul li a {position: relative;display: inline-block;padding: 10px 25px;margin: 10px 0;width: auto;border: 0;font-size: 30px;font-weight: 900;color: #000;}
    nav .menu .menu-block .phones ul li {color:#000;font-size:25px;margin:10px;padding: 0 20px;}
    nav .menu .messenger {text-align:right;display: block;padding-right: 20px;}
    nav .menu .messenger img {width:50px;filter: unset;}
    
    nav.fixed .menu-list ul li {padding:0;}
    
    .slick-dotted.slick-slider {overflow:hidden;}
}

@media only screen and (max-width : 600px) {
    .elem-40,.elem-60 {width:100%}
    
    section {padding:40px 0;}
    section .title-line h2 {font-size:30px;}
    
    .top .block {padding:30px;}
    .top .block h1 {font-size:40px;}
    
    
    section#contacts .items .item {padding:10px;margin:5px;}
    section#contacts .items .item a {font-size:16px;}
}