﻿	
	/* САЙТ */
	
	/* РАЗРЕШЕНИЯ для перестройки шаблона */ 
	/* ПК 1024 - 1920 */
	/* Планшет 900 - 1024 */
	/* Планшет 600 - 900 */
	/* Мобильный 320 - 412 */
	/* Мобильный 412 - 600 */ 

body {font-family: 'Open Sans', sans-serif;}
@media all and (orientation: landscape) { .mob {display: none !important;} }
@media all and (orientation: portrait) { .pc {display: none !important;} }
	/* формы */
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: #1b7abe; /* синий */
	--color_light: #4FA3DF;
	--color_dark: #094C7C;
}
.color  {color: var(--color);}


	/* КАСТОМИЗАЦИЯ КВИЗА */

.quiz3 .quiz_style_1 .answer {width: 100%; display: inline-block;}




.basic {width: 100%; margin: 0 auto; max-width: 1200px; padding: 10px;}
.link {opacity: 1;}
.link:hover {opacity: 0.7;}
.pointer:hover {cursor: pointer}


	/* БЛОКИ и ШРИФТЫ */

@media all and (min-width: 610px) { /* ДЕСКТОП */

	h2 {font-size: 40px; padding: 10px 0;}
	h3 {font-size: 24px;}
	html, p {font-size: 16px;}
	.basic p {font-size: 18px;}
	.cell_1-2 {width: 49%; display: inline-block; vertical-align: top;}
	.cell_1-4 {width: 24%; display: inline-block; vertical-align: top;}
	.cell_1-3 {width: 32%; display: inline-block; vertical-align: top;}
	.cell_2-3 {width: 64%; display: inline-block; vertical-align: top;}
} @media all and (max-width: 609px) { /* МОБИЛЬНЫЙ */
	h2 {font-size: 26px;}
	h3 {font-size: 18px;}
	html, p {font-size: 16px;}
	.cell_1-2 {width: 100%; vertical-align: top;}
	.cell_1-4 {width: 48%; display: inline-block; vertical-align: top;}
	.cell_1-3 {width: 100%; display: inline-block; vertical-align: top;}
	.cell_2-3 {width: 100%; display: inline-block; vertical-align: top;}
}


h2 {display: block; width: 100%; margin: 0 auto; margin-top: 30px; box-sizing: border-box; padding: 15px; text-align: center; color: #444;}
h3 {padding-bottom: 10px;}
.modal h3 {color: #666;}
.modal p {line-height: 1.6;}
.modal h3 img {height: 22px;}
.links p, .links a {color: var(--color) !important; font-size: 1.2rem;}


	/* ГЛАВНЫЙ ЭКРАН- ШАПКА */
 
#main .top {display: flex; justify-content: space-between; align-items: center; padding: 0 var(--lateral_indent);}
#main .top > div {padding: 10px 5px;}
#main .top_left img {float: left; max-height: 65px; margin: 5px 15px 5px 0;}
#main .top_left p {font-size: 28px;}
#main .top_left p.hints {font-size: 13px; max-width: 240px;}
#main .top_right p.phone {font-size: 1.4rem;}
#main .top_right p.city {max-width: 320px;}
#main .top_right img {height: 24px; margin: 2px;}
#main .top_right p {text-align: right; margin-bottom: 6px;}

#main .first_content {position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; min-height: calc(100vh - 150px);}
#main .first_content > div {position: avbsolute; top: 0; bottom: 0; right: 0; left: 0; background-color: rgba(32,32,32,.6); display: flex; padding: 10px var(--lateral_indent); min-height: calc(100vh - 150px);}
#main .first_content > div > div {margin: auto;}
#main .first_content h1 {margin: 20px 0; text-align: center; font-size: 4rem;}
#main .first_content p {margin: 20px 0; text-align: center;}
#main .first_content p.offer {font-size: 2.8rem;}
#main .first_content a.button {font-size: 1.6rem;}

@media all and (max-width: 900px) {
	#main .first_content h1 {font-size: 3.4rem;}
	#main .first_content p.offer {font-size: 2.2rem;}
	#main .first_content a.button {font-size: 1.2rem;}
	
}
@media all and (max-width: 600px) {
	#main .top_left img {float: left; max-height: 45px; margin: 7px 10px 7px 0;}
	#main .top_left p {font-size: 18px;}
	#main .top_left p.hints {font-size: 11px; max-width: 185px;}
	#main .top_right p.phone {font-size: 1.2rem;}
	#main .top_right p.city {font-size: .8rem;}
	
}
@media all and (max-width: 480px) {
	#main .top {flex-direction: column;}
	#main .top_right p {text-align: center;}
	#main .first_content h1 {font-size: 2.8rem;}
	#main .first_content p.offer {font-size: 1.6rem;}
	#main .first_content a.button {font-size: 1.1rem;}
}
@media all and (max-width: 412px) {
	#main .first_content h1 {font-size: 2.2rem;}
	#main .first_content p.offer {font-size: 1.4rem;}
	#main .first_content a.button {font-size: 1.1rem;}
}
@media all and (max-width: 360px) {
	#main .first_content h1 {font-size: 2rem;}
	#main .first_content p.offer {font-size: 1.2rem;}
	#main .first_content a.button {font-size: .9rem;}
}



	

	/* ПРЕИМУЩЕСТВА */

#advantages {margin: 40px auto 60px auto;}
#advantages div.cell_1-4 {padding: .4em .2em; margin-bottom: .6em; text-align: center;}
#advantages img {height: 64px; margin: 15px 0;}
#advantages p {text-align: center;}


	/* ГОТОВЫЕ РЕШЕНИЯ */

#ready {margin: 40px auto 60px auto;}
#ready div.cell_1-4 {padding: .4em .2em; margin-bottom: 40px; text-align: center;}
#ready img {max-height: 96px; padding: 15px 0;}
#ready p {text-align: center;}


	/* АРЕНДА */
	
#rent div{padding: 10px 5px 35px 5px;}
#rent_photo img {border-radius: 10px; box-shadow: 1px 1px 3px grey; width: 100%; height: 160px; object-fit: cover;}


	/* ОБРАЗЦЫ ДОГОВОРОВ */

#simple_docs div.cell_1-3 {margin-top: 10px;}
#simple_docs a {font-size: 1.2rem;}


	/* ЦВЕТА */
	
#colors div {display: inline-block; width: 19.5%; padding: 5px 0.2%;}
#colors img {width: 160px; max-width: 100%; border-radius: 5px;}
#colors p {padding-top: 25px;}

	/* ОТДЕЛКА */

#finish {margin: 40px auto 60px auto;}
#finish div.cell_1-4 {padding: .4em .2em; text-align: center;}
#finish img {max-height: 196px; margin: 10px 0; border-radius: 10px; box-shadow: 1px 1px 3px grey; }
#finish p {text-align: center;}


	/* ОСНАЩЕНИЕ */

#addition {margin: 40px auto 60px auto;}
#addition div.cell_1-4 {padding: .4em .2em; text-align: center;}
#addition img {max-height: 196px; margin: 10px 0; border-radius: 10px; box-shadow: 1px 1px 3px grey; }
#addition p {text-align: center;}


	/* ЛИД МАГНИТ: ПОСЧИТАТЬ */
	
#count {max-width: 100%; background-color: #eee; padding: 40px 0; margin: 40px auto 60px auto;}
#count p {font-size: 1.6rem; text-shadow: 1px 1px 5px white; padding-bottom: .6em; text-align: center;}


	/* КЛИЕНТЫ */
	
#clients {margin: 40px auto 60px auto;}
#clients div img {margin: 20px 0; padding: 5px; max-width: 90%; height: 50px;}
	
	
	/* ОТЗЫВЫ */
	
#views {background-color: #efefef; max-width: 100%;}
	#views li div {width: 96%; border-radius: 8px; margin: 10px auto; padding: 10px 2.2em; background-color: white;}
	#views .name {padding: 10px 0 0 0; font-size: 1.4rem; font-weight: 600;}
	#views .text {padding: 5px; font-size: 0.8rem;}
.flamp_insta {max-width: 100%; padding: 20px 0; margin: 0 auto;}
	.flamp_insta div {display: inline-block; vertical-align: middle; padding: 0 10px;}
	.flamp_insta p {padding: 10px 0; font-size: 1.6rem;}


	/* ПРОДАНО */

#solds {margin: 40px auto 60px auto;}
#solds div.c {margin: .2em .4em;}
#solds img {width: 100%; border-radius: 10px; margin-bottom: 5px;}
#solds div.c p {margin: 2px 0;}

	
	
	/* ЛИД МАГНИТ: ПОСЧИТАТЬ */

#no_type {max-width: 100%; background-color: #eee; padding: 40px 0; margin: 40px auto 0 auto;}
#no_type p {font-size: 1.6rem; text-shadow: 1px 1px 5px white; padding-bottom: .6em; text-align: center;}


	/* МЕНЮ */
	
.menu {max-width: 100%; background-color: #353535; padding: 20px 0;}
.menu div.basic {max-width: 100%; width: 800px;}
.menu div {padding: 15px 20px;}
.menu a img {height: 64px; transition: .6s;}
.menu a img:hover {transform: scale(1.1);}
.menu a {text-transform: uppercase;}


	/* ФУТЕР */
	
#footer {max-width: 100%; background-color: #353535; padding: 20px 0;}
#footer_left {padding: 20px 0; vertical-align: top;}
#footer_left img {float: left; max-height: 65px; padding: 5px 10px;}
#footer_left p {font-size: 28px; color: #CCC;}
#footer_left p.hints {font-size: 13px; max-width: 240px; color: #CCC;}