@import "fonts.css";
@import "template.css";
@import "callback-btn.css";
@import "callback-modal.css";
@import "gallery.css";
@import "reviews.css";
@import "mobmenu.css";

body {
    --prime: #b23731;
    --light: #d73b2c;
    --black: #585757;
}

button, input {outline: none;}
a:hover {cursor: pointer; text-decoration: none;}
p {font-size: 18px; letter-spacing: 1px}

h4 {font-size: 22px; letter-spacing: 1.2px}
li {font-size:  16px; letter-spacing: 1px}

.btn-prev {height: 50px; width: 50px; position: absolute; z-index: 99; border-radius: 50%; background: none; border: none; filter: invert(1); top: 50vh; left: 50px;}
.btn-next {height: 50px; width: 50px; position: absolute; z-index: 99; border-radius: 50%; background: none; border: none; filter: invert(1); top: 50vh; right: 50px;}

.row-svk {display: flex;justify-content: center;flex-wrap: wrap;}

main {background: #ffffff; }
body {font-family: 'PT Sans Narrow', sans-serif;}
h2 {text-transform: uppercase; font-size: 40px; text-align: center;}

.btn-std {text-transform: uppercase; color: white; font-size: 20px; text-align: center; background: var(--prime); padding: 10px 35px; transition: .5s;}
.btn-std:hover {color: white; box-shadow: 0 5px 15px #d3d3d3b0; }

/*header*/

header {display: flex; width: 100%; background: white; height: 90px; align-items: baseline;}
header .logo{width: 20%}
header .sblock{width: 20%; text-align: center}
header .sblock a {font-size: 20px; font-weight: bold; color: var(--prime)}
header nav{width: 65%; padding-left: 10% }
header nav ul{display: flex; padding-left: 0;}
header .__headline {display: none}
header li {list-style: none; width: 19%; text-align: center; padding-bottom: 5px; cursor: pointer; position: relative; }
header li:hover {border-bottom: 3px solid var(--prime)}
header li ul {display: none; }
header a {color: var(--black); font-size: 17px; letter-spacing: 2px}
h2 {color: var(--black); letter-spacing: 5px}
h2 span {color: var(--prime);}

header .__active{border-bottom: 3px solid var(--prime)}

.blue {background: radial-gradient( var(--light), var(--prime)); padding: 50px; }
.item-us{box-shadow: 0px 0px 10px lightgrey; border-radius: 20px; width:  90%; margin: 15px auto; padding: 10px; height: 150px; display: flex; justify-content: center; align-items: center}

.item-us .row-svk {align-items: center;padding: 15px 0;flex-wrap: nowrap;justify-content: flex-end;}
.item-us .row-svk .image {border-radius: 50%;background:  var(--prime);width: 60px;height: 60px;text-align: center;position: relative;/* width: -webkit-fill-available; */}
.item-us .row-svk .image img {width: 85%;position: absolute;top: 5px;left: 5px;}
.item-us .row-svk .info {width: 60%;margin-left: 20px;}
.item-us .row-svk .info .name {font-size: 24px;margin: 0;color: black;letter-spacing: 1px;line-height: 1.1;}
.item-us .row-svk .info .price {font-size: 24px; margin: 0; color: black}
.item-us .row-svk .info .price span {color:  var(--light); text-transform:uppercase  }

.item-all .row-svk{display: flex; flex-direction: column;}
.item-all p{margin: 0; text-transform: uppercase; letter-spacing: 2px; text-transform:capitalize; border-bottom: 2px solid var(--black); text-align: center}
.item-all .btn-std {font-size: 14px; padding: 5px 10px; color: white}
.item-all a {color: var(--black);}
.item-all span{text-transform:lowercase; letter-spacing: 2px; display: block; margin-bottom: 10px}

.section .image {padding-right: 0}
.section .image img {width: 100%}
.section .info {text-align: left; display: flex; align-items: center; flex-grow: 1; padding-left: 50px }
.section .headline h2 {text-align: left; font-size: 52px; letter-spacing: 10px; margin-bottom: 10px}
.section .headline .line {background: var(--prime); width: 160px; height: 8px}

.section .headline p {letter-spacing: 1px; width: 50%; font-size: 18px; margin-bottom: 50px; margin-top: 50px}
.section h3 {text-align: center; font-size: 42px; text-transform: uppercase; letter-spacing: 5px}
.section .col-xs-6 {min-height: 500px}
footer .col-xs-6 {min-height: 500px}
footer .map {padding-right: 0}

footer {color: white}
footer a {color: white; font-size: 24px}
footer h4 {text-align: left; font-size: 36px; font-weight: 100; width: 100%; margin-bottom: 40px; line-height: 1.2; letter-spacing: 2px; margin-top: 0px}
footer p {margin-top: 30px; letter-spacing: 2px}
footer .social .fa {font-size: 40px}
footer .row {margin-right: 0;}
.ymaps-2-1-78-copyright__link{display: none}

.offer h2 {text-align: left}
.offer .blue {margin-top: 100px; position: relative; color: white}
.offer .blue h3 {letter-spacing: 2px}
.offer .blue .callback {position: absolute; top: -200px; background: white; box-shadow: 0px 0px 10px var(--black); padding: 25px; text-align: center}
.offer .blue .callback .info {border: 1px solid var(--black); padding: 25px}
.offer .blue .callback .info p {text-transform: uppercase; letter-spacing: 1px; font-size: 25px; color: var(--black)}
.offer .blue .callback .info p span, .offer .blue .callback .info a {color: var(--prime)}
.offer .blue .callback .info a {font-size: 16px}
.offer .blue .callback .info .btn-std {color: white}


.spec .line {width: 80%; height: 2px; background: var(--prime); margin-top: 50px; margin-bottom: 50px;}
.spec .item {display: flex; align-items: center; width: 80%; margin-bottom: 20px; transition: .5s; padding: 10px}
.spec .item:hover {box-shadow: 0px 0px 10px lightgrey;}
.spec .item-big:hover {box-shadow: none}
.spec .item p{margin: 0; text-align: center}
.spec .item .image {width: 30%; text-align: center}
.spec .item .image img {width: 100%;}
.spec .item .info {width: 70%}
.spec .item .name {font-size: 24px; letter-spacing: 2px}

.spec .item-big {flex-direction: column; margin-top: 200px }
.spec .item-big .image {width: 100%;text-align: center;position: relative;}
.spec .item-big .image:after {width: 300px;height: 300px;border-radius: 50%;/* background: var(--prime); */content: '';position: absolute;left: 0;}
.spec .item-big .image img {position:relative; z-index: 1; top: -50px; left: 20px}
.spec .item-big .info {width: 100%;margin-top: 40px;/* background: white; */position: relative;top: -80px;z-index: 9;left: 25px;}
.spec .item-big .name {font-size: 34px;letter-spacing: 2px;/* text-align: center; */}

.spec {margin-top: 50px}
.spec .col-xs-6 > p {text-align: center;width: 87%;position: relative;top: -80px;}

header .logo img {height: 100px;}


.price p {display: flex; justify-content: space-between; width: 70%; margin: 2px auto; border-bottom: 1px solid lightgrey; padding: 2px}
.price .text {margin: 50px auto; border-bottom: 0; background: #ba3830; color: white; align-items: center; width: 90%; text-align: center; justify-content: space-evenly}
.price .text a {display: block; background: #ea5246; padding: 25px; color: white}

.callback-modal {width: 700px;padding-left: 250px}
.callback-modal__form {width: 400px;}
.callback-modal__form img {position: absolute; width: 300px; left: 0; bottom: 0;}
.callback-modal form {position: relative;}
.callback-modal__form input[type="checkbox"] {float: left; margin-right: 10px; position: relative; top: 4px}
.callback-modal__button {display: block!important; border: none; border-radius: 0; padding: 10px 50px; margin: 0 auto; text-transform: uppercase; }



.perechen {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 50px}
.perechen .item a {display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center;}
.perechen .item {margin-top: 10px}
.perechen .item img {margin-right: 15px; width: 30px; height: 30px}

.offer .blue b {font-size: 40px}


@media screen and (max-device-width: 450px) 
{
a, p, li, span {font-size: 50px;}
h3, h4 {font-size: 60px;}
h2, h1 {font-size: 70px}
.btn-std {font-size: 50px;}
.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 {width: 100%}

h2 span {font-size: 70px;}

.item-us {height: 250px}
.item-us .row-svk {width: 100%;}
.item-us > a {display: block; width: 100%;}
.item-us .row-svk .info .name {font-size: 50px}
.item-us .row-svk .info .price {font-size: 50px}
.item-us .row-svk .info .price span {font-size: 60px}
.item-us .row-svk .image {width: 200px; height: 200px; left: -80px}
.item-us .row-svk .image img {top: 15px; left: 15px}


.offer h2 {text-align: center}
.item-all .btn-std {font-size: 40px}
.offer p {text-align: center}
.offer .blue .callback {position: static; width: 70%; margin: 0 auto;}
.offer .blue b {font-size: 70px}
.offer .blue .callback .info p, .offer .blue .callback .info a {font-size: 50px}

.spec .line {width: 100%}
.spec .item {width: 100%}
.spec .item .name {font-size: 60px}

.spec .col-xs-6 > p {width: 100%; margin-left: 25px}
.price p {width: 95%}
.price p span {width: 25%; text-align: right}

.price .text {flex-direction: column; padding: 50px}
.price .text a {width: 100%; margin-top: 45px}

footer .ymaps-2-1-79-copyright__link {font-size: 18px}
footer {text-align: center}
footer a {font-size: 50px;}
footer h4 {font-size: 55px; text-align: center; width: 80%; margin: 0 auto}

.section h3 {font-size: 70px}
.section .info {width: 100%;}
.section .info .headline {width: 100%; text-align: center; }
.section .headline h2 {text-align: center; font-size: 74px}
.section .headline .line {width: 50%; margin: 0 auto}
.section .headline p {width: 100%; font-size: 50px}

header .logo img {height: 160px}
header {margin-bottom: 100px}
header nav {display: none;}
header .logo {width: 50%;}
header .sblock {width: 50%;}
header .sblock a {font-size: 70px; position: relative;     top: 15px;
    left: -100px;}

main .container .col-xs-6 .image img {height: 800px!important} 
strong {font-size: 50px}
.perechen .item img {width: 100px; height: 100px}

.spec .item .image {width: 60%; margin-bottom: 80px}
.spec .item .image img {width: 100%}
.spec .item  {flex-wrap: wrap; justify-content: center}
.spec .item-big .image {width: 100%}

.callback-modal {width: 100%; overflow: hidden; padding-left: 300px }
.callback-modal__form {width: 100%;}
.callback-modal__headline {font-size: 50px}
.callback-modal__form input {font-size: 50px}
.callback-modal__form label {font-size: 40px}
.callback-modal__form a {font-size: 40px}
.callback-modal__button {font-size: 50px; padding: 10px 100px}
.callback-modal img {left: -200px; width: 600px!important}
.callback-modal__form input[type="checkbox"] {transform: scale(3); margin-right: 50px; top: 22px; left: 10px}
.mfp-close {width: 70px; height: 70px; font-size: 80px}
}