/* Vars */
:root{
  --colorPrimary: #2c3440;
  --colorSecondary: #35455c;
  --colorIcons: #ff9c64;

  --backgroundPrimary: #ffc23c;
  --backgroundSecondary: #e2a826;
  --backgroundPrimaryHover: #ffcb59;
  --backgroundSection: #f2f6fc;
  --backgroundLight: #fafafa;

}

/* Animations */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(168,32,24,1)
  }
  70% {
    box-shadow: 0 0 0 20px rgba(168,32,24,0)
  }
  100% {
    box-shadow: 0 0 0 0 rgba(168,32,24,0)
  }
}

@keyframes slideme {
  0% {
      left: -30px;
      margin-left: 0
  }
  30% {
      left: 110%;
      margin-left: 80px
  }
  100% {
      left: 110%;
      margin-left: 80px
  }
}

/* General */
body{font-family: 'Montserrat', sans-serif; font-size: 16px; color: var(--colorPrimary); min-width: 375px; display: flex; flex-direction: column; overflow-x: hidden;}
.container{max-width: 1280px; padding: 0 40px; margin: 0 auto;}
.sctn-mrg{margin-top: 80px;}
a:hover{text-decoration: none;}
img{max-width: 100%; max-height: 100%;}
h1,h2,h3{font-weight: 700;}
b,strong{font-weight: 700;}
section h2{font-size: 40px; color: var(--colorSecondary); line-height: 120%;}
section:not(.about) h2{text-align: center;}

.btn{cursor: pointer; font-size: 14px; color: var(--colorPrimary); text-decoration: none; text-transform: uppercase; text-align: center; line-height: 300%; font-weight: 700; padding: 0 35px; background-color: var(--backgroundPrimary); border: 0; border-radius: 20px; transition: all .2s; user-select: none; display: inline-block; position: relative; overflow: hidden;}
.btn:hover{color: #000; background-color: var(--backgroundPrimaryHover);}
.btn::after{content: ""; margin-left: -30px; width: 30px; height: 300px; background: #fff; opacity: 0.2; animation-delay: 50ms; position: absolute; left: -40px; top: -100px; transition: all .1s; animation-name: slideme; animation-duration: 5s; animation-iteration-count: infinite; transform: rotate(45deg)}


/* Header */
.header .top-line{padding: 25px 0; display: flex; align-items: center;}
.header .icon-menu{display: none;}

.header .logo{color: var(--colorSecondary); text-decoration: none; line-height: 100%; display: flex; align-items: center;}
.header .logo::before{content: '\f018'; font-family: 'Font Awesome Solid'; font-size: 40px; color: var(--backgroundPrimary); line-height: 0;}
.header .logo .sitename{font-size: 19px; font-weight: 700; margin-top: -2px; margin-left: 15px;}

.header .slogan{font-size: 13px; line-height: 130%; padding-left: 30px; margin-left: 30px; border-left: 1px solid #ccc;}

.header .phone{color: var(--colorSecondary); line-height: 100%; margin-left: 90px; position: relative; overflow: hidden; flex-shrink: 0;}
.header .phone .num{font-weight: 700; font-size: 21px;}
.header .phone .row{font-size: 13px; line-height: 100%; margin-top: 7px; display: flex; align-items: center;}
.header .phone .row .status{font-size: 11px; font-weight: 500; color: #fff; padding: 1px 7px 4px; margin-right: 7px; background-color: #55cd6c; border-radius: 3px;}
.header .phone .row .timetable{line-height: 0;}
.header .phone .row .timetable span::before{content: '\f111'; font-family: 'Font Awesome Solid'; font-size: 7px; color: rgba(0,0,0,0.4); line-height: 0; margin: 0 5px; display: inline-block; vertical-align: 1px;}

.header .btn-container{display: flex; flex-grow: 1; justify-content: flex-end; flex-shrink: 0;}


/* Menu */
.nav{background-color: var(--backgroundSection);}

.menu{font-size: 15px; font-weight: 600; line-height: 100%; display: flex;}
.menu li{position: relative;}
.menu li .fake-link{width: 210px; background-color: rgba(0,0,0,0.07);}
.menu li a, .menu li .fake-link{cursor: pointer; color: var(--colorSecondary); text-decoration: none; padding: 20px 40px; display: block; transition: all .2s;}

.menu li .fake-link{line-height: 100%; white-space: nowrap; display: flex; align-items: center; justify-content: center;}
.menu li .fake-link::before{content: '\f0c9'; font-family: 'Font Awesome Solid'; line-height: 100%; margin: -1px 7px -1px 0;}

.menu .drop-menu{display: none; opacity: 0; width: 100%; padding: 0; background-color: #fff; list-style-type: none; position: absolute; top: 100%; left: 0; z-index: 20;}
.menu .drop-menu a{line-height: 100%; padding: 13px 40px 15px;}

@media (-moz-touch-enabled: 0), (pointer: fine) {
  .menu > li:hover > a, .menu > li:hover .fake-link{background-color: var(--backgroundPrimary);}
  .menu .drop-menu li:hover{background-color: rgba(0,0,0,0.07);}
  .menu > li:hover .drop-menu{display: block; opacity: 1;}
}


/* Cover */
.cover{padding: 60px 0 90px; background: url('../img/header.jpg') bottom/cover no-repeat; position: relative;}
.cover::after{content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); position: absolute; top: 0; left: 0;}
.cover .cover-container{color: #fff; max-width: 600px; position: relative; z-index: 10;}

.cover h1{font-size: 60px; line-height: 120%;}

.cover ul{margin: 60px 0 50px 33px;}
.cover ul li{font-size: 19px; margin-top: 5px; position: relative;}
.cover ul li::after{content: ''; width: 15px; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; top: 14px; left: -28px;}

.cover .btn{line-height: 350%; border-bottom: 5px solid var(--backgroundSecondary);}


/* Main */
.main{flex-grow: 1;}


/* Text */
.text-block h2{margin-bottom: 40px;}
.text-block p, .text-block h3, .text-block ol, .text-block ul{margin-top: 20px;}
.text-block h3{font-size: inherit;}

.text-block ol, .text-block ul{margin-left: 30px;}
.text-block ul li{list-style-type: disc;}
.text-block ol{list-style-type: decimal;}
.text-block li:not(:last-child){margin-bottom: 5px;}


/* Small cards */
.cards-container{margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;}

.small-cards .card{width: 30%; margin-bottom: 4.5%; background-color: var(--backgroundSection); border: 1px solid #eeeeee; border-radius: 20px; display: flex; flex-direction: column;}
.small-cards .card .image{border-radius: 20px 20px 0 0;}
.small-cards .card .image img{width: 100%; border-radius: 20px 20px 0 0;}

.small-cards .card .body{padding: 25px 30px; display: flex; flex-direction: column; flex-grow: 1;}
.small-cards .card .body .title{font-size: 26px; font-weight: 700; color: var(--colorSecondary);}
.small-cards .card .body .desc{font-size: 15px; color: var(--colorPrimary); padding-top: 10px; flex-grow: 1;}

.small-cards .c-footer{padding-top: 30px; display: flex; align-items: center; justify-content: space-between;}
.small-cards .c-footer .price{font-size: 22px; font-weight: 700; color: var(--colorPrimary); position: relative;}
.small-cards .c-footer .btn-container{margin-top: 5px;}
.small-cards .c-footer .btn{font-size: 12px; line-height: 350%; padding: 0 25px; border-bottom: 0;}


/* Big cards */
.big-cards .bc-container{padding: 50px 50px 60px; background-color: var(--backgroundSection); border-radius: 20px;}
.big-cards .card{margin-top: 40px; background-color: #fff; border-radius: 20px; display: flex; transition: box-shadow .2s;}
.big-cards .card > .col:first-child{width: 40%; flex-shrink: 0;}
.big-cards .card > .col:last-child{padding: 20px 30px 40px; flex-grow: 1;}

@media (-moz-touch-enabled: 0), (pointer: fine) {
  .big-cards .card:hover{box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);}
}

.big-cards .card .title{font-size: 26px; font-weight: 700; color: var(--colorSecondary);}
.big-cards .card .subtitle{font-size: 17px; margin-top: 20px; font-weight: 700; color: var(--colorSecondary);}
.big-cards .card p{margin-top: 10px;}
.big-cards .card img{height: 100%; border-radius: 20px 0 0 20px; object-fit: cover;}

.big-cards .card ol{font-size: 15px; margin: 10px 0 0 20px; list-style-type: decimal;}
.big-cards .card ol li{margin-top: 3px;}

.big-cards .card .row{margin-top: 30px; display: flex; align-items: center;}
.big-cards .card .item{margin-right: 40px; display: flex;}
.big-cards .card .item .icon::before{font-family: 'Font Awesome Solid'; font-size: 30px; color: var(--colorIcons); line-height: 120%;}
.big-cards .card .item .icon.cost::before{content: '\f00c';}
.big-cards .card .item .icon.term::before{content: '\f073';}
.big-cards .card .item .cont{margin-left: 10px; display: flex; flex-direction: column;}
.big-cards .card .item .cont span{font-size: 13px; line-height: 100%;}
.big-cards .card .item .cont strong{font-size: 18px; color: var(--colorPrimary);}

.big-cards .card .btn-container{flex-grow: 1; display: flex; justify-content: flex-end;}


/* Portfolio */
.works .works-container{padding: 60px; background-color: var(--backgroundLight); border-radius: 20px;}
.works .items{display: flex; flex-wrap: wrap; justify-content: space-between;}
.works .items .item{margin-top: 4%; width: 48%; background-color: #fff; border: 1px solid #f5f5f5; border-radius: 20px; transition: box-shadow .2s;}

@media (-moz-touch-enabled: 0), (pointer: fine) {
  .works .items .item:hover{box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.07);}
}

.works .slider{border-radius: 20px 20px 0 0; position: relative;}
.works .slide img{border-radius: 20px 20px 0 0;}

.works .row{padding: 25px; display: flex; justify-content: space-between;}
.works .row .col{max-width: 33%; display: flex; align-items: flex-start;}

.works .col::before, .works .col img{flex-shrink: 0;}
.works .col::before{font-family: 'Font Awesome Solid'; color: var(--colorIcons); line-height: 100%;}
.works .col.cost::before{content: '\f00c'; font-size: 30px; margin-top: 5px;}
.works .col.term::before{content: '\f073'; font-size: 30px; margin-top: 5px;}
.works .col .desc{margin-left: 10px; display: flex; flex-direction: column;}
.works .col img{width: 40px; border-radius: 50%;}
.works .col span{font-size: 13px;}
.works .col strong{font-size: 15px; line-height: 120%;}

.works .prev::before, .works .next::before{font-family: 'Font Awesome Solid'; line-height: 0;}
.works .prev::before{content: '\f359';}
.works .next::before{content: '\f35a';}

.works .review{font-size: 13px; margin: 0 25px 25px; padding-top: 20px; border-top: 1px solid #e7e7e7;}
.works .review::after, .works .review::before{font-family: 'Font Awesome Solid'; font-size: 16px; color: var(--colorIcons);}
.works .review::before{content: '\f10d'; padding-right: 5px;}
.works .review::after{content: '\f10e'; padding-left: 5px;}


/* Reviews */
.reviews .items{margin: 40px 0 120px; position: relative;}
.reviews .slick-list{margin: 0 -20px;}

.reviews .prev, .reviews .next{cursor: pointer; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; position: absolute; top: -25px; z-index: 20;  transition: all .2s;}
.reviews .prev:hover, .reviews .next:hover{background-color: var(--colorSecondary);}
.reviews .prev{left: -25px;}
.reviews .next{right: -25px;}
.reviews .prev, .reviews .next .fa{font-size: 22px; color: var(--backgroundPrimary)}

.reviews .items .item{margin: 0 20px; display: flex; flex-direction: column;}
.reviews .items .item .txt{flex-grow: 1;}

.reviews .item .txt{padding: 30px; background-color: var(--backgroundSection); border-radius: 15px; position: relative;}
.reviews .item .txt::after{content: ''; width: 51px; height: 35px; background-image: url('../img/corner.jpg'); position: absolute; left: 0; bottom: -20px;}

.reviews .item .row{padding: 10px 0 0 7px; display: flex; position: relative; z-index: 10;}
.reviews .item img{width: 70px; height: 70px; border-radius: 50%;}
.reviews .item .desc{margin-left: 20px; display: flex; flex-direction: column;}
.reviews .item .desc .client{font-size: 13px; opacity: 0.6;}
.reviews .item .desc .name{font-size: 15px;}
.reviews .item .desc .addr{font-size: 12px;}


/* Stages */
.stages ul{padding-top: 150px; display: flex; justify-content: space-between; flex-wrap: wrap; counter-reset: num;}
.stages ul li{font-size: 15px; text-align: center; padding: 0 20px; margin-bottom: 120px; width: 33%; display: flex; flex-direction: column; position: relative;}
.stages ul li::after{content: counter(num); counter-increment: num; font-size: 175px; font-weight: 700; color: var(--colorIcons); line-height: 0; position: absolute; top: 30px; right: 70px; opacity: 0.2;}
.stages ul li span{position: relative; z-index: 10;}

.stages .name{font-weight: 700; font-size: 24px; color: var(--colorSecondary); margin: 5px 0 0 0;}
.stages .note{font-size: 17px; font-weight: 500; color: var(--colorSecondary); padding: 5px 0 6px; margin-bottom: 5px; position: relative; opacity: 0.7;}
.stages .note:after{content: ''; width: 36px; height: 1px; background-color: rgba(0,0,0,0.2); position: absolute; bottom: 0; left: calc(50% - 18px)}
.stages .desc{font-size: 16px;}

.stages ul li:nth-child(3n+1) .name:after, .stages ul li:nth-child(3n+2) .name:after{content: ''; width: 276px; height: 68px; background: url('../img/arrow.png'); position: absolute; left: calc(50% + 130px); opacity: 0.5;}
.stages ul li:nth-child(3n+1) .name:after{top: -90px;}
.stages ul li:nth-child(3n+2) .name:after{bottom: -180px; transform: matrix(1,0,0,-1,0,0);}


/* Before/After */
.ba-photo .items{padding-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.ba-photo .item{margin-bottom: 4%; width: 48%; border-radius: 20px; overflow: hidden;}
/* cocoen-component::part(drag){background: #ffc23c;}
cocoen-component::part(drag)::before{border-color: #ffc23c;} */


/* FAQ */
.faq .items{padding-top: 50px;}
.faq .items .item{padding: 25px 50px 25px 0; border-top: 1px solid #e4e4e4;}
.faq .items .item:last-child{border-bottom: 1px solid #e4e4e4;}

.faq .item{cursor: pointer; position: relative;}
.faq .item .icon{width: 26px; height: 2px; background-color: var(--colorSecondary); position: absolute; top: 33px; right: 10px; transition: all .2s ease;}
.faq .item .icon:after{content: ''; width: 2px; height: 26px; background-color: var(--colorSecondary); position: absolute; top: -12px; right: 12px; transition: all .2s ease;}
.faq .item.active .icon{transform: rotate(45deg);}

.faq .item.active .icon,
.faq .item.active .icon:after{background-color: var(--colorIcons);}

.faq .item .question{font-size: 17px; font-weight: 700; color: var(--colorSecondary);}
.faq .item.active .question{color: var(--colorSecondary);}
.faq .item .answer{font-size: 15px; line-height: 21px; font-weight: 400; padding: 5px 0; display: none;}
.faq .item .answer p:first-child{margin-top: 0;}
.faq .item .answer p:last-child{margin-bottom: 0;}


/* Contacts */
.contacts{padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.1);}
.contacts .items{display: flex; justify-content: space-between;}

.contacts .item .name{font-size: 16px; font-weight: 700; color: var(--colorSecondary); margin-bottom: 5px;}
.contacts .item .name::before{font-family: 'Font Awesome Solid'; font-size: 13px; line-height: 100%; margin-right: 7px; display: inline-block; vertical-align: 1px;}
.contacts .item .tel{font-weight: 700; margin-bottom: 5px;}

.contacts .item .name.phone::before{content: '\f095';}
.contacts .item .name.work-time::before{content: '\f017';}
.contacts .item .name.mail::before{content: '\f0e0';}
.contacts .item .name.addr::before{content: '\f3c5';}


/* Form expand */
.form-expand .row{padding: 40px; background-color: var(--backgroundSection); border-radius: 20px; display: flex; align-items: center;}
.form-expand .row .col:first-child{width: 50%; flex-shrink: 0;}
.form-expand .row .col:last-child{margin-left: 0; flex-grow: 1;}

.form-expand .title{font-size: 28px; font-weight: 700; color: var(--colorSecondary); line-height: 120%;}
.form-expand .title span{color: var(--colorIcons); display: block;}
.form-expand .privilege{font-size: 14px; font-weight: 500; margin-top: 15px; display: flex; align-items: center; flex-wrap: wrap;}
.form-expand .privilege span{display: flex; align-items: center;}
.form-expand .privilege span:not(:first-child):before{content: '\f111'; font-family: 'Font Awesome Solid'; font-size: 7px; line-height: 100%; color: rgba(0,0,0,0.2); margin: 2px 10px 0;}

.form-expand .note{font-size: 13px; margin-top: 10px;}
.form-expand .note .fa{color: rgba(0,0,0,0.4);}

.form-expand form{display: flex; align-items: center;}
.form-expand .field-text{height: 42px; margin-right: -20px; flex-grow: 1;}
.form-expand form input[type="text"]{padding: 0 30px 0 10px; width: 100%; height: inherit; border: 1px solid #adadad; outline: none;}
.form-expand form input[type="text"].error{border-color: #cb3c3c; box-shadow: 0px 0px 5px 0px rgba(203,60,60,1);}

.form-response{margin: 80px 0; display: none;}
.form-response .icon{flex-shrink: 0; margin-bottom: 25px;}
.form-response .icon::after{font: 400 75px 'Font Awesome Solid';}
.form-response .icon.success::after{content: '\f058';  color: #2aa45b;}
.form-response .icon.error::after{content: '\f071';  color: #cb3c3c;}

.form-response .title{font-size: 25px; margin-bottom: 15px;}

/* Qwiz */
.qwiz .qwiz-container{padding: 50px 50px 60px; border: 5px solid var(--colorIcons); border-radius: 20px;}
.qwiz .subtitle{text-align: center; margin-top: 15px; padding-bottom: 30px; position: relative;}
.qwiz .subtitle::after{content: ''; width: 160px; height: 5px; background-color: var(--backgroundPrimary); position: absolute; bottom: 0; left: calc(50% - 80px)}

.qwiz .back-step{cursor: pointer; position: absolute; left: 0; bottom: 15px; user-select: none;}
.qwiz .back-step:not(.active){display: none;}
.qwiz .back-step:hover span{text-decoration: underline;}
.qwiz .back-step::before{content: '\f177'; font-family: 'Font Awesome Solid'; color: var(--colorIcons); margin-right: 5px; line-height: 0; display: inline-block; vertical-align: -1px;}

.qwiz .num-steps{margin-top: 30px; padding-bottom: 15px; border-bottom: 1px solid #cfcfcf; display: flex; align-items: center; justify-content: center; position: relative;}
.qwiz .num-steps .nm-bullets{line-height: 0; margin-left: 20px; display: flex; position: relative; top: 1px;}
.qwiz .num-steps .nm-bullets::before{content: ''; width: 100%; height: 1px; background-color: var(--colorIcons); position: absolute; top: calc(50% - 1px);}
.qwiz .num-steps .nm-bullets .item:not(:last-child){margin-right: 13px;}
.qwiz .num-steps .nm-bullets .item{width: 13px; height: 13px; background-color: #fff; border: 2px solid var(--colorIcons); border-radius: 50%; position: relative; z-index: 10;}
.qwiz .num-steps .nm-bullets .item.active{background-color: var(--colorIcons);}

.qwiz .step{margin-top: 30px;}
.qwiz .step:not(.active){display: none;}
.qwiz .title-step{display: flex; align-items: center;}
.qwiz .title-step .num{font-size: 19px; font-weight: 600; text-align: center; line-height: 160%; width: 35px; height: 35px; margin-right: 15px; border: 2px solid var(--colorSecondary); border-radius: 50%; flex-shrink: 0;}
.qwiz .title-step .txt{font-weight: 600;}

.qwiz .cards{margin: 20px -30px 0; display: flex; justify-content: space-between; flex-wrap: wrap;}

.qwiz .card{cursor: pointer; padding: 30px; width: 33%; border-radius: 10px; transition: background-color .2s ease;}
.qwiz .card:hover{background-color: var(--backgroundSection);}
.qwiz .card img{width: 100%; border-radius: 10px;}
.qwiz .card .footer-card{margin-top: 20px; display: flex; align-items: flex-start;}
.qwiz .card .footer-card input{margin: 6px 10px 0 0;}

.qwiz .form-title{font-size: 26px; font-weight: 700; line-height: 120%; text-align: center;}
.qwiz .form-subtitle{text-align: center; margin: 10px 0 25px;}
.qwiz .user-fields{display: flex; flex-direction: column;}
.qwiz input[type="text"]{padding: 15px; border: 1px solid #adadad; border-radius: 10px; outline: none;}
.qwiz form input[type="text"].error{border-color: #cb3c3c; box-shadow: 0px 0px 5px 0px rgba(203,60,60,1);}
.qwiz .btn{line-height: 400%; margin-top: 20px; border-radius: 10px;}
.qwiz .note{font-size: 13px; margin-top: 15px;}

.qwiz-form{max-width: 524px; margin: 0 auto;}
.qwiz-form .form-response{text-align: center;}

/* Cities */
.cities .cities-container{padding: 60px; background-color: var(--backgroundLight); border-radius: 20px;}
.cities .items{font-weight: 500; margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.cities .item{margin: 5px 0; width: 25%;}

/* Error */
.error{margin-top: 80px;}
.error .notice{text-align: center; padding: 70px 0 60px; border: 1px solid var(--backgroundSection); border-radius: 15px;}
.error .notice::before{content: '\f071'; font-family: 'Font Awesome Solid'; font-size: 60px; color: #cb3c3c; line-height: 100%; display: inline-block;}
.error .notice p, .error .notice h1{margin-top: 10px;}

/* Footer */
.footer{padding: 40px 0; margin-top: 80px; background-color: var(--backgroundSection);}
.footer .f-row{display: flex; justify-content: space-between;}
.footer .f-row .col:first-child{margin-right: 10%; max-width: 350px;}

.footer .logo{color: var(--colorSecondary); text-decoration: none; line-height: 100%; display: flex; align-items: center;}
.footer .logo::before{content: '\f018'; font-family: 'Font Awesome Solid'; font-size: 30px; color: var(--backgroundPrimary);}
.footer .logo .sitename{font-weight: 700; margin-left: 15px;}

.footer .slogan{font-size: 13px; line-height: 130%; margin-top: 15px;}

.footer .btn{font-size: 13px; line-height: 260%; font-weight: 600; text-transform: none; padding: 0 25px 2px; margin-top: 15px;}

.footer .copyright{font-size: 13px;  color: rgba(0,0,0,0.6); margin-top: 30px;}
.footer .copyright p:first-child{margin-bottom: 10px;}
.footer .copyright a{margin-left: 5px;}

.footer .title{font-size: 14px; font-weight: 700; text-transform: uppercase; margin-top: 7px;}

.footer .f-nav{font-size: 15px; margin-top: 10px;}
.footer .f-nav li:not(:last-child){margin-bottom: 5px;}


/* Modal */
.popup{display: none;}
.mfp-content .popup{max-width: 930px; margin: 0 auto; display: block;}

.popup{width: 100%; background: #fff url('../img/modal.jpg') right bottom/contain no-repeat; border-radius: 20px;}
.popup-container{text-align: center; width: 524px; padding: 90px 60px;}

.popup .title, .qwiz-form .form-response .title{font-size: 36px; font-weight: 700; color: var(--colorSecondary); line-height: 100%;}
.popup .subtitle{margin-top: 20px;}

.popup form{margin: 30px 0; display: flex; flex-direction: column;}
.popup form input[type="text"]{padding: 15px; border: 1px solid #adadad; border-radius: 10px; outline: none;}
.popup form input[type="text"].error{border-color: #cb3c3c; box-shadow: 0px 0px 5px 0px rgba(203,60,60,1);}
.popup form .btn{line-height: 400%; margin-top: 20px; border-radius: 10px;}

.popup .note{font-size: 13px;}


/* Privacy */
.privacy.popup{padding: 40px; margin-top: 40px; margin-bottom: 40px; background: #fff;}
.privacy h1{font-size: 28px; margin: 0 0 20px;}
.privacy h2{font-size: 21px; margin: 20px 0;}
.privacy p{margin: 20px 0;}
.btn-privacy{cursor: pointer; text-decoration: underline;}
.btn-privacy:hover{text-decoration: none;}

@media (max-width: 1200px){
  /* General */
  .container{padding: 0 30px;}
  .btn::after{width: 10px;}
  .sctn-mrg{margin-top: 60px;}
  section h2{font-size: 38px;}

  /* Header */
  .header .logo::before{font-size: 35px;}
  .header .logo .sitename{font-size: 17px;}
  .header .phone .num{font-size: 19px;}
  .header .btn{padding: 0; width: 40px; height: 40px; background-color: var(--colorSecondary); border-radius: 50%;}
  .header .btn span{display: none;}
  .header .btn::before{content: '\f0e0'; font-family: 'Font Awesome Solid'; font-size: 17px; color: var(--backgroundPrimary);}

  /* Menu */
  .menu{font-size: 15px;}
  .menu li a, .menu li .fake-link{padding: 15px 25px;}
  .menu li .fake-link{min-width: 210px;}

  /* Cover */
  .cover h1{font-size: 50px;}

  /* Small cards */
  .small-cards .card{width: 48%; margin-bottom: 4%;}

  /* Big cards */
  .big-cards .card{flex-direction: column;}
  .big-cards .card > .col:first-child{width: 100%; height: 400px;}
  .big-cards .card img{height: 100%; width: 100%; border-radius: 20px 20px 0 0;}

  /* Big cards */
  .big-cards .bc-container{padding: 40px 30px 60px;}

  /* Form expand */
  .form-expand .row{flex-direction: column; align-items: initial;}
  .form-expand .row .col:first-child{width: 100%;}
  .form-expand .row .col:last-child{margin-top: 30px; max-width: 700px;}
  .form-expand .title span{display: inline;}
  .form-expand .privilege{margin-top: 10px;}

  /* Qwiz */
  .qwiz .qwiz-container{padding: 40px 30px 60px;}

  /* Error */
  .error .notice{padding: 40px 0 30px; border: 0;}
}


@media (max-width: 992px){
  /* General */
  body.active{overflow: hidden;}
  .container{padding: 0 20px;}
  section h2{font-size: 35px;}
  .btn{border-radius: 15px;}

  /* Header */
  .header .icon-menu{margin: 0 20px 0 0; display: block; position: relative;}
  .header .icon-menu.active{z-index: 110;}
  .header .icon-menu .bar1, .icon-menu .bar2, .icon-menu .bar3{width: 22px; height: 2px; background-color: var(--colorSecondary); margin: 5px 0; transition: 0.4s;}
  .header .icon-menu.active .bar1{transform: rotate(-45deg) translate(-4px, 5px);}
  .header .icon-menu.active .bar2 {opacity: 0;}
  .header .icon-menu.active .bar3{transform: rotate(45deg) translate(-5px, -6px);}

  .header .btn-container{flex-grow: initial;}

  .header .phone{margin: 0 30px 0; display: flex; flex-grow: 1; justify-content: flex-end;}
  .header .phone .num{width: 40px; height: 40px; background-color: var(--backgroundPrimary); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
  .header .phone .num::before{content: '\f095'; font-family: 'Font Awesome Solid'; font-size: 22px; color: var(--colorSecondary); line-height: 0;}
  .header .phone .num::after{content: ""; margin-left: -30px; width: 30px; height: 300px; background: #fff; opacity: 0.2; animation-delay: 50ms; position: absolute; left: -40px; top: -100px; transition: all .1s; animation-name: slideme; animation-duration: 5s; animation-iteration-count: infinite; transform: rotate(45deg)}
  .header .phone .num span{display: none;}
  .header .phone .row{display: none;}

  /* Menu */
  .nav:not(.active){display: none; opacity: 0;}
  .nav.active{opacity: 1; transition: opacity .5s ease; display: block; overflow: auto;}
  .nav{width: 100%; height: calc(100% - 90px); padding-top: 10px; background-color: #fff; border-top: 1px solid rgba(0,0,0,0.1); position: fixed; top: 90px; left: 0; z-index: 20;}
  .menu{padding-bottom: 20px; flex-direction: column;}
  .menu li a, .menu li .fake-link{padding: 10px 0;}
  .menu li .fake-link{font-weight: 700; width: auto; background-color: transparent; display: block;}
  .menu li .fake-link::before{display: none;}
  .menu > li:first-child{margin: -20px -20px 20px -20px; padding: 20px 0 20px 20px; background-color: var(--backgroundSection);}

  .menu .drop-menu{padding-left: 10px; background-color: transparent; display: block; opacity: 1; position: initial;}
  .menu .drop-menu a{padding: 10px 0; position: relative;}
  .menu .drop-menu a::before{content: '\203a'; font-size: 16px; padding-right: 10px;}
  
  /* Cover */
  .cover{padding: 40px 0 60px;}
  .cover h1{font-size: 45px;}
  .cover ul li{font-size: 17px;}
  .cover .btn{line-height: 310%; border-width: 3px;}

  /* Text */
  .text-block ol, .text-block ul{margin-left: 20px;}

  /* Small cards */
  .small-cards .card{border-radius: 15px;}

  /* Big cards */
  .big-cards .bc-container{padding: 40px 20px 60px; margin: 0 -20px; border-radius: 0;}
  .big-cards .card{border-radius: 15px;}
  .big-cards h2 + .card{margin-top: 30px;}
  .big-cards .card img{border-radius: 15px 15px 0 0;}

  /* Form expand */
  .form-expand .row{padding: 30px 30px 40px; border-radius: 15px;}
  .form-expand form input[type="text"]{padding: 0 10px 3px; border-radius: 15px;}

  /* Before/After */
  .ba-photo .items{padding-top: 30px; flex-direction: column;}
  .ba-photo .item{width: 100%; border-radius: 15px;}
  .ba-photo .item:not(:last-child){margin-bottom: 40px;}

  /* Portfolio */
  .works .works-container{padding: 40px 20px; margin: 0 -20px; border-radius: 0;}
  .works .items{flex-direction: column; justify-content: initial;}
  .works .items .item{margin-top: 40px; width: 100%; border-radius: 15px; }
  .works .items .item:first-child{margin-top: 30px;}
  .works .slide img{border-radius: 15px 15px 0 0; width: 100%;}

  /* Cities */
  .cities .cities-container{padding: 40px 20px; margin: 0 -20px; border-radius: 0;}
  .cities .item{width: 33.333%;}

  /* Reviews */
  .reviews .items{margin: 30px 0 110px;}

  /* Stages */
  .stages ul{padding-top: 80px;}
  .stages ul li{width: 50%}
  .stages ul li:nth-child(3n+1) .name:after, .stages ul li:nth-child(3n+2) .name:after{display: none;}

  .stages .name{font-size: 22px;}

  /* FAQ */
  .faq .items{padding-top: 40px;}
  .faq .item .answer{margin-top: 10px;}

  /* Contacts */
  .contacts .items{flex-wrap: wrap;}
  .contacts .item{margin: 10px 0; width: 50%;}

  /* Footer */
  .footer .f-row .col:nth-child(1), .footer .f-row .col:nth-child(2), .footer .f-row .col:nth-child(3){display: block;}
  .footer .f-row .col{display: none;}

  /* Modal */
  .mfp-content .popup{max-width: 524px;}
  .popup{background: #fff;}

  /* Qwiz */
  .qwiz .card{padding: 15px; width: 50%;}
  .popup .title, .qwiz-form .form-response .title{font-size: 34px;}
}


@media (max-width: 768px){
  /* Header */
  .header .slogan{display: none;}

  /* Text */
  .text-block h2 br{display: none;}

  /* Small cards */
  .cards-container{margin-top: 30px; flex-direction: column; justify-content: initial;}
  .small-cards .card{width: 100%; margin-bottom: 30px;}

  /* Big cards */
  .big-cards .card .row{flex-wrap: wrap;}
  .big-cards .card .btn-container{margin-top: 20px; width: 100%; justify-content: initial;}
  .big-cards .card .item:nth-child(2){margin-right: 0;}

  /* Cities */
  .cities .item{width: 50%;}

  /* Footer */
  .footer .f-row{justify-content: initial;}
  .footer .f-row .col:nth-child(3){display: none;}

  /* Qwiz */
  .qwiz .back-step span{display: none;}
}


@media (max-width: 576px){
  /* General */
  .sctn-mrg{margin-top: 40px;}
  section h2{font-size: 32px;}

  /* Header */
  .header .top-line{padding: 15px 0;}
  .header .logo .fa{font-size: 32px;}
  .header .logo .sitename{font-size: 16px; margin-left: 10px;}

  .header .phone{margin-right: 15px;}
  .header .phone .num{width: 32px; height: 32px;}
  .header .phone .num::before{font-size: 16px;}
  .header .btn{width: 32px; height: 32px; line-height: 220%;}
  .header .btn::before{font-size: 14px;}

  /* Menu */
  .nav{height: calc(100% - 62px); top: 62px;}

  /* Cover */
  .cover{padding: 40px 0 50px;}
  .cover h1{font-size: 35px;}
  .cover ul{margin-top: 50px;}
  .cover .btn-container{display: flex; justify-content: center;}

  /* Small cards */
  .small-cards .card .body{padding: 25px 20px 20px;}
  .small-cards .card .body .title{font-size: 22px;}

  /* Big cards */
  .big-cards .bc-container{padding: 40px 20px 50px;}
  .big-cards .card > .col:first-child{height: 350px;}
  .big-cards .card > .col:last-child{padding: 25px 20px 20px;}
  .big-cards .card .title{font-size: 22px;}
  .big-cards .card .row{justify-content: space-between; padding: 0 10px;}
  .big-cards .card .item{margin: 0;}
  .big-cards .card .item:nth-child(1){margin-left: -10px;}
  .big-cards .card .item:nth-child(2){margin-right: -10px;}
  .big-cards .card .btn-container{margin: 20px -10px 0;}
  .big-cards .card .btn-container .btn{width: 100%;}

  /* Form expand */
  .form-expand .title{font-size: 25px;}
  .form-expand .row{margin: 0 -20px; padding: 30px 20px 40px; border-radius: 0;}
  .form-expand .privilege span:last-child{display: none;}
  .form-expand form{flex-direction: column; align-items: initial;}
  .form-expand .field-text, .form-expand .field-btn{width: 100%;}
  .form-expand form .field-btn{margin-top: 15px;}
  .form-expand form .field-btn .btn{width: 100%;}
  .form-expand .note{font-size: 12px;}

  /* Portfolio */
  .works .works-container{padding: 0; background-color: transparent;}
  .works .items .item{border: 0; border-radius: 0; position: relative;}
  .works .items .item:not(:last-child){margin-bottom: 40px;}
  .works .items .item:not(:last-child)::after{content: ''; width: 60%; height: 1px; background-color: var(--backgroundPrimary); position: absolute; bottom: -25px; left: 20%;}
  .works .slide img{border-radius: 0; height: auto; object-fit: initial;}
  .works .row{padding: 20px; flex-wrap: wrap;}
  .works .row .col:nth-child(1){order: 1;}
  .works .row .col:nth-child(2){margin: 15px 0 0 0; width: 100%; max-width: 100%; order: 3;}
  .works .row .col:nth-child(3){order: 2;}
  .works .row .col{max-width: 48%;}
  .works .col .fa-check{line-height: 220%; margin-right: 4px; width: 38px; height: 38px;}
  .works .review{margin: 0 20px 25px;}

  /* Stages */
  .stages ul li{padding: 0; margin-bottom: 80px; width: 100%;}
  .stages ul li:last-child{margin-bottom: 40px;}
  .stages ul li:first-child:after{right: 55px;}
  .stages ul li::after{right: 30px;}

  /* Contacts */
  .contacts .item{width: 100%;}

  /* Footer */
  .footer .f-row .col:nth-child(2){display: none;}
  .footer .f-row .col:first-child{margin-right: 0; width: 100%; max-width: 100%;}
  .footer .slogan br{display: none;}
  .footer .btn{margin-top: 25px;}

  /* Modal */
  .mfp-content .popup{border-radius: 0;}
  .mfp-content .popup:not(.privacy){display: flex; align-items: center; justify-content: center;}
  .mfp-content .popup.privacy{margin: 0; padding: 40px 20px;}
  .popup-container{width: 90%; padding: 60px 0;}
  .mfp-content .popup{max-width: 100%; width: 100%; min-height: 100vh; overflow: auto;}
  .popup .title{font-size: 34px;}

  /* Qwiz */
  .qwiz .qwiz-container{padding: 30px 25px 40px;}
  .qwiz .card{padding: 25px; width: 100%;}
}


@media (max-width: 375px){

  /* Small cards */
  .small-cards .c-footer{flex-direction: column; align-items: initial; justify-content: initial;}

  .small-cards .c-footer .price{text-align: center; position: relative;}
  .small-cards .c-footer .price span{background-color: var(--backgroundSection); padding: 0 25px; position: relative; z-index: 10;}
  .small-cards .c-footer .price::before{content: ''; width: 100%; height: 1px; background-color: rgba(0,0,0,0.1); position: absolute; top: 52%; left: 0;}

  .small-cards .c-footer .btn-container{margin-top: 20px;}
  .small-cards .c-footer .btn-container .btn{font-size: 13px; width: 100%;}

  /* Modal */
  .popup .title{font-size: 30px;}
}

@media (max-width: 320px){
  .big-cards .card .item .icon{display: none;}
}