/* САЙТ */
	
	/* РАЗРЕШЕНИЯ для перестройки шаблона */ 
	/* ПК 1024 - 1920 */
	/* Планшет 900 - 1024 */
	/* Планшет 600 - 900 */
	/* Мобильный 320 - 412 */
	/* Мобильный 412 - 600 */ 

	/* шрифты */
	
body {font-family: "Rubik", sans-serif; font-optical-sizing: auto; font-style: normal;}
p, html {font-size: 18px;}
@media all and (min-width: 1460px) { p, html {font-size: 20px;} }
@media all and (min-width: 1600px) { p, html {font-size: 22px;} }
@media all and (min-width: 1760px) { p, html {font-size: 24px;} }
@media all and (min-width: 1900px) { p, html {font-size: 26px;} }
@media all and (max-width: 600px) {	p, html {font-size: 16px;} }
h1 {}
h2 {font-size: 1.6rem; text-align: center; margin: 40px 0;}

	/* формы */
	
input, date, datetime-local, select, textarea, button.button, button.modal__btn, a.button {display: inline-block; padding: 10px 20px; margin: 5px 0; box-sizing: border-box; border: 1px solid #4d4d4d; border-radius: 10px; font-size: .9rem;}
input[type=submit], input[type=button], button.button, a.button {color: white; cursor: pointer; background-color: var(--color); border: 1px solid var(--color_dark); font-weight: bold; transition: .4s;}
input[type=submit]:hover, input[type=button]:hover, button.button:hover, a.button:hover {background-color: var(--color_dark); transition: .4s;}

	/* цвета */
	
:root {
	--color: #e11e24; /* красный */
	--color_light: #FF7373;
	--color_dark: #BF3030;
}
.color  {color: var(--color);}


	/* Если у заголовка есть пояснение, то оборачиваем в блок и добавляем класс */

.h2_exp h2 {margin-bottom: 20px;}
.h2_exp p {text-align: center; max-width: 700px; margin: 0 auto; margin-bottom: 40px;}

	
	/* ГЛАВНЫЙ */

#main {max-width: 1920px; width: 100%;}

#main .top {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--lateral_indent); border-bottom: 2px solid var(--color);}
#main .top .logo img {height: 80px;}
#main .top .right p {text-align: right;}
#main .top .right p.phone {font-size: 1.6rem;}
#main .top .right p.callbuck {font-size: 1.1rem;}

@media all and (max-width: 600px) {
	#main .top .logo img {height: 60px;}
}
@media all and (max-width: 480px) {
	#main .top .logo img {height: 50px;}
	#main .top .right p.phone {font-size: 1.2rem;}
	#main .top .right p.callbuck {font-size: 1rem; padding-top: 5px;}
	#main .top .right p.timework {font-size: .8rem; padding-top: 5px;}
}

#main .menu {display: flex; justify-content: space-evenly; background-color: #b30c0c; padding: 15px var(--lateral_indent);}
#main .menu span {color: yellow; font-weight: bold;}
#main .menu a {color: white; font-weight: bold;}


@media all and (max-width: 480px) {
	#main .menu span {display: none;}
}

#main .main_content img {display: block}
#main .main_content h1 {color: var(--color);}
#main .main_content input {font-size: 1.2rem; box-shadow: 0 0 5px white, 0 0 15px white;}

@media all and (min-width: 481px) {
	#main .main_content {position: relative;}
	#main .main_content h1 {position: absolute; top: calc(var(--lateral_indent) * 1.5); left: var(--lateral_indent); font-size: 2.2rem; max-width: 50%;}
	#main .main_content h1 span {display: inline; background-color: white; padding: 5px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
	#main .main_content input {position: absolute; bottom: calc(var(--lateral_indent) * 2.5); left: var(--lateral_indent);}
}
@media all and (max-width: 1280px) {
	#main .main_content h1 {font-size: 2rem;}	
	#main .main_content input {bottom: calc(var(--lateral_indent) * 1.5);}
}
@media all and (max-width: 900px) {
	#main .main_content h1 {font-size: 1.8rem; top: calc(var(--lateral_indent));}
	#main .main_content input {bottom: calc(var(--lateral_indent));}
}
@media all and (max-width: 760px) {
	#main .main_content img {height: 100vw; max-height: calc(100vh - 250px); object-fit: cover;}
	#main .main_content h1 {top: auto; bottom: calc(var(--lateral_indent) * 2 + 46px); max-width: calc(100% - (2 * var(--lateral_indent)));}
}
@media all and (max-width: 480px) {
	#main .main_content img {height: 100vw; max-height: 80vh; object-fit: cover;}
	#main .main_content h1 {margin: 15px var(--lateral_indent); text-align: center;}
	#main .main_content input {margin: 20px auto; display: block;}
}

		
	/* БЛОК УСЛУГИ */

#srv {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#srv > div {width: 100%; display: flex; justify-content: space-evenly; align-items: center;}
#srv > div > div {padding: 10px;}
#srv > div div.text {}
#srv > div div.image img {border-radius: 50%; padding: 20px 10px; display: block; margin: 0 auto; width: 300px; height: 300px; max-width: 30vw; max-height: 30vw; object-fit: cover;}
#srv h2 {margin: 10px 0;}
#srv h3 {margin: 20px 0 10px 0;}
#srv ul {padding: 10px 0 0 20px;}
#srv ul li {padding: 2px 0;}
#srv p.phone {margin-top: 20px;}

@media all and (max-width: 760px) {
	#srv > div {flex-direction: column-reverse;}
	#srv > div div.image img {max-width: 80vw; max-height: 80vw;}
}


	/* ПРЕИМУЩЕСТВА */
	
#advantages {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#advantages > div {width: 100%;}
#advantages .flex {width: 100%; display: flex; justify-content: space-evenly; margin: 20px 0;}
#advantages .flex > div {text-align: center; padding: 10px;}
#advantages .flex > div > img {height: 86px; margin: 15px;}
#advantages .flex > div > p {font-weight: bold; font-size: 1.2rem; text-align: center; max-width: 240px; margin: auto; color: var(--color);}

@media all and (max-width: 1024px) {
	#advantages .flex > div > p {font-size: 1.2rem;}
}
@media all and ( ((max-width: 900px) and (min-width: 761px)) or (max-width: 412px) ) { /* работает до 412, от 761 до 900 */
	#advantages .flex > div > img {height: 64px;}
	#advantages .flex > div > p {font-size: 1rem;}
}
@media all and (max-width: 760px) {
	#advantages .flex {flex-wrap: wrap;}
	#advantages .flex > div {width: 50%;}
}

	/* ВИДЕО */

#video {max-width: 100%; background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#video h2 {}
#video div.owl-carousel > div img {width: 100%; height: 200px; object-fit: cover; margin-bottom: 20px; border-radius: 5px;}
#video div.owl-carousel > div p {text-align: center;}
#video .owl-prev, #video .owl-next {font-size: 1.4rem;}


	/* РАБОТЫ */

#works {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}	
#works .work_block {padding: 10px 0;}
#works .work_block > h3 {text-align: center; font-size: 1rem; font-weight: normal;}
#works .work_block > img {margin: 10px 0; border-radius: 5px; max-height: 80vh; object-fit: cover;}
#works .work_block > p.c {font-size: .85rem;}


	/* ОТЗЫВЫ */

#feedbuck {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#feedbuck .tile > img {margin: 10px auto; border-radius: 5px; display: block; max-height: 75vh; width: auto;}


	/* УСЛУГИ */
	
#services {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#services .flex {width: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly;}
#services .flex > div {width: 25%; text-align: center; padding: 10px;}
#services .flex > div img {margin: 10px 0; border-radius: 5px;}
#services .flex > div > h3 {font-size: 1rem; font-weight: normal; text-align: center;}

@media all and (max-width: 900px) {
	#services .flex > div {width: 50%;}
}
@media all and (max-width: 420px) {
	#services .flex > div {padding: 5px;}
	#services .flex > div > h3 {font-size: .85rem;}
}


	/* СЕГОДНЯ */

#today {background: #e5e5e5;}
#today h2 {margin: 10px 0;}
#today a.button {margin-top: 40px;}


	/* КОМАНДА */

#staff {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#staff > div {width: 100%;}
#staff .staff_block {min-width: 280px;}	
#staff .staff_block p.name {padding-top: 10px;}
#staff .staff_block p.position {font-size:.9rem;}
#staff .staff_block img {width: 80%; object-fit: cover; border-radius: 50%; margin: 10px auto 40px auto;}


	/* СЕРТИФИКАТЫ */

#certificate {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#certificate img {border-radius: 5px;}

		
	/* ВОПРОС ОТВЕТ */

#faq {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
.p1_faq_container {display: flex; flex-wrap: wrap;}
.p1_faq_container > div {width: 50%; padding: 10px;}

@media all and (max-width: 900px) {
	.p1_faq_container > div {width: 100%; padding: 0;}
}

.p1_faq_container .box {margin-bottom: 20px;}
.p1_faq_container .box:last-child {margin-bottom: 0}
.p1_faq_container .box .label {position:relative; cursor:pointer; font-size:1.1rem; font-weight:bold; padding-right:40px}
.p1_faq_container .box .label::after {content:"+"; position:absolute; top:50%; transform:translateY(-50%); right:20px; font-size:25px; font-weight:bold}
.p1_faq_container .box.active .label::after {content:"\2012"}
.p1_faq_container .box .answer {position:relative; overflow:hidden; max-height:0; transition:0.3s}
.p1_faq_container .box .answer p {padding:20px; font-size:.9rem}


	/* АКЦИИ */

#action {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#action > div {width: 100%;}
#action div > img {margin: 10px 0; border-radius: 5px;}

		
	/* СЕРВИС ВОВРЕМЯ */

#on_time {background: linear-gradient(to bottom, #f9f9f9, #e5e5e5);}
#on_time > div {width: 100%; display: flex; justify-content: space-evenly;}
#on_time > div > div {padding: 10px;}
#on_time > div div.image img {border-radius: 50%; padding: 20px 10px; display: block; margin: 0 auto;}
#on_time > div div.image p {font-style: oblique; text-align: center;}
#on_time h2 {margin: 10px 0;}
#on_time > div form {margin-top: 15px; display: flex; flex-direction: column;}
#on_time > div form > div {display: flex; justify-content: space-evenly;}
#on_time > div form > div > div {padding: 10px; }
#on_time > div form p {padding: 5px 0 0 0; color: var(--color); font-weight: bold;}
#on_time > div form input, #on_time > div form select {width: 210px;}

@media all and (max-width: 760px) {
	#on_time > div {flex-direction: column;}
	#on_time > div div.image img {max-width: 50%;}
}
@media all and (max-width: 600px) and (min-width: 481px) {
	#on_time > div form input, #on_time > div form select {width: 180px;}
}
@media all and (max-width: 480px) {
	#on_time > div form > div {flex-direction: column; align-items: center;}
}


	/* ФУТЕР */

#footer {background: #525252;}
#footer > div {width: 100%; display: flex; justify-content: space-evenly;}
#footer > div > div {padding: 20px 10px;}
#footer p, #footer a {color: white;}
#footer p.color {color: var(--color_light);}

@media all and (max-width: 760px) {
	#footer > div {width: auto;}
	#footer > div {flex-direction: column;}
}


	/* МУЛЬТИКНОПКА */

#multibut {display: flex; height: 4rem; width: 4rem; background-color: var(--color); position: fixed; bottom: .75rem; right: .5rem; border-radius: 50%; z-index: 2;}
#multibut > img {width: 32px; height: 32px; margin: auto;}

.multimenu_over {position: fixed; top: 0; bottom: 0; right: 0; left: 0; /* background-color: rgba(255,255,255,.5); */ z-index: 11; opacity:0; visibility: hidden; transition: .5s;}
.multimenu {position: fixed; opacity: 100; z-index: 12; bottom: 100px; right: 15px;}
.multimenu > div {cursor: pointer; display: flex; justify-content: flex-end;}
.multimenu > div > div {background-color: rgba(0,0,0,.85); color: white; border-radius: 25px; padding: 10px 20px; margin: 2px;}

.multimenu .call, .multimenu .callbuck {height: 42px; width: 42px; display: flex; padding: 0;}
.multimenu .call {background-color: green;}
.multimenu .callbuck {background-color: red;}
.multimenu .call > img, .multimenu .callbuck > img {width: 24px; height: 24px; margin: auto;}