﻿	
	/* САЙТ */

	/* ШРИФТ */
	
body {font-family: "Rubik", sans-serif; background-color: #f7f7f7;}
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;} }
h2 {font-size: 1.6rem; text-align: center; margin: 40px 0;}


	/* СТИЛИЗАЦИЯ ФОРМ */
	
	/* все поля */
input, date, datetime-local, select, textarea, button.button, a.button, .butgrey {display: inline-block; padding: 10px 20px; margin: 5px 2px; box-sizing: border-box; border: 1px solid #4d4d4d; border-radius: 10px; font-size: .9rem;}
	/* кнопки */
input[type=submit], input[type=button], button.button, a.button, .butgrey {color: white; cursor: pointer; background-color: var(--color); border: 1px solid var(--color_dark); font-weight: bold; transition: .4s; line-height: 1;}
.butgrey {color: #222222; background-color: #dddddd; border: 1px solid #b2b2b2;}
	/* наведение */
input[type=submit]:hover, input[type=button]:hover, button.button:hover, a.button:hover {background-color: var(--color_dark); transition: .4s;}


	/* ЦВЕТА */
	
:root {
	--color: #df0b0b; /* red */
	--color_light: #EF7272;
	--color_dark: #A73030;
}
.color  {color: var(--color);}



	/* ПЕРВЫЙ */

#first {width: 100%;}

	/* ШАПКА */

#first .top {background-color: white; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--li); border-bottom: 2px solid var(--color);}
#first .top .logo img {height: 55px; margin-right: 10px;}
#first .top p.phone {font-size: 2.4rem; font-weight: bold;}
#first .top .right p {text-align: right;}

@media all and (max-width: 1024px) and (min-width: 801px) {
	#first .top p.phone {font-size: 1.8rem;}
}
@media all and (max-width: 800px) {
	#first .top p.phone {display: none;}
	#first .top .right p.none {display: block; font-size: 1.6rem;}
	#first .top .logo img {height: 42px;}
}
@media all and (max-width: 480px) {
	#first .top .logo img {height: 35px; margin-top: 10px;}
	#first .top .right p.none {font-size: 1.2rem;}
}
@media all and (max-width: 390px) {
	#first .top .logo img {height: 40px; margin: 0 0 10px 0;}
	#first .top {flex-direction: column;}
	#first .top .right p {text-align: center;}
	#first .top .right p.none {font-size: 1.6rem;}
}

	/* МЕНЮ */
	
/* #first .menu {display: flex; justify-content: space-evenly; background-color: #b30c0c; padding: 15px var(--li);}
#first .menu span {color: yellow; font-weight: bold;}
#first .menu a {color: white; font-weight: bold;}

@media all and (max-width: 480px) {
	#first .menu span {display: none;}
} */

	/* КОНТЕНТ */
	
#main img {display: block; width: 100%; height: calc(100vh - 100px); object-fit: cover; filter: brightness(.9) contrast(.85);}

@media all and (min-width: 481px) {
	#main {position: relative;}
	#main > div {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex;}
	#main > div > div {margin: auto 0; padding: var(--li); width: 100%;}
	#main h1 {font-size: 2.6rem; line-height: 1.7;}
	#main h1 span.bgw {display: inline; background-color: white; padding: 5px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: 5px;}
}
@media all and (max-width: 1280px) {
	#main h1 {font-size: 2.4rem;}	
}
@media all and (max-width: 900px) {
	#main h1 {font-size: 2.2rem;}
}
@media all and (max-width: 760px) {
	#main > img {height: calc(100vh - 130px);}
	#main h1 {font-size: 2rem;}
}
@media all and (max-width: 600px) {
	#main h1 {text-align: center; font-size: 1.8rem; line-height: 1.8;}
	#main p {text-align: center;}
}
@media all and (max-width: 480px) {
	#main > img {height: 80vw;}
	#main h1 {margin-top: 30px;}	
}
@media all and (max-width: 412px) {
	#main h1 {font-size: 1.6rem;}	
}
@media all and (max-width: 360px) {
	#main h1 {font-size: 1.4rem;}
	#main .button2 {font-size: 1rem;}
}


	/* ПРОДУКТ */

#product .tile {width: 100%; margin: 20px 0 40px 0; display: flex; flex-wrap: wrap; justify-content: space-evenly;}
#product .reverse {flex-direction: row-reverse;}
#product .tile .text {width: 40%; padding: 20px var(--li); background-color: white; box-shadow: 0 0 15px #cccccc; border-radius: 25px;}
#product .tile .text h3 {font-size: 1.4rem; margin: 15px 0;}
#product .tile .text p {font-size: .9rem;}
#product .tile .text p .button2 {font-size: 1rem;}
#product .tile .image {width: 50%; display: flex; flex-wrap: wrap;}
#product .tile .image img {width: calc(50% - 10px); margin: 5px; object-fit: cover; border-radius: 25px;}

@media all and (max-width: 1280px) {
	#product .tile .text h3 {font-size: 1.1rem; margin: 10px 0;}
	#product .tile .text p {font-size: .8rem;}
	#product .tile .text p .button2 {margin-top: 20px; padding: 12px 20px; min-height: auto;}
}
@media all and (max-width: 1024px) {
	#product .tile .text {width: 45%;}
	#product .tile .text h3 {font-size: 1rem; margin: 5px 0;}
	#product .tile .text p {font-size: .75rem;}
}
@media all and (max-width: 900px) and (min-width: 601px) {
 	#product .tile .text {width: 58%;}
	#product .tile .image {width: 37%;}
	#product .tile .image img {width: calc(100% - 10px);}
	#product .tile .image img.d {display: none;}
}
@media all and (max-width: 600px) {
	#product .tile {flex-direction: column; align-items: center; background-color: white; box-shadow: 0 0 15px #cccccc; border-radius: 25px; margin: 20px 0; padding: 20px var(--li) 30px var(--li);}
	#product .tile .text {width: 100%; background: none; box-shadow: none; padding: 0 0 20px 0;}
	#product .tile .text h3 {font-size: 1.2rem; margin: 10px 0;}
	#product .tile .text p {font-size: .9rem;}
	#product .tile .image {width: 100%;}
}


	/* РЕШЕНИЯ */
	
#solution .flex {justify-content: space-between; flex-wrap: wrap;}
#solution .flex .tile {width: 15%; margin: 15px .5%; background-color: white; box-shadow: 0 0 15px #cccccc; border-radius: 25px;}
#solution .flex img {border-radius: 25px 25px 0 0; object-fit: cover; width: 100%;}
#solution .flex .tile div {padding: 0 10px 10px 10px;}
#solution .flex h3 {margin: 10px 0; font-size: 1.1rem;}
#solution .flex p {margin: 10px 0; font-size: .8rem;}

@media all and (max-width: 1280px) {
	#solution .flex .tile {width: 30%;}
}
@media all and (max-width: 700px) {
	#solution .flex .tile {width: 48%;}	
}


	/* ПРОЕКТЫ */
	
#working .project {display: flex; justify-content: space-evenly; padding: 60px var(--li);}
#working .project div.tile img {border-radius: 25px;}

#working div.image {width: 45%;}
#working div.tile img.video {filter: brightness(0.85); transition: .4s;}
#working div.tile:hover img.video {filter: brightness(1.1); transition: .4s;}
#working div.tile svg {position: absolute; top: calc(50% - 48px); left: calc(50% - 48px); margin: auto; height: 96px; fill: white; transition: .4s;}
#working div.tile:hover svg {fill: var(--color); transition: .4s;}

#working .about {width: 50%; padding-left: var(--li);}
#working .about h3 {font-size: 1.4rem;}
#working .about p.price {font-weight: bold; margin: 10px 0;}
#working .about ul {margin: 20px 0;}
#working .about li {line-height: 1.7; margin-left: 20px;}
#working .about p.price_about {font-size: .8rem; margin: 20px 0;}
#working .about a.button2 {margin-top: 30px;}

@media all and (max-width: 1024px) and (min-width: 761px) {
	#working .about {width: 55%;}
	#working .about h3 {font-size: 1.3rem;}
	#working .about p.price {font-weight: bold; margin: 5px 0;}
	#working .about ul {margin: 10px 0;}
	#working .about ul li {line-height: 1.5; font-size: .9rem;}
	#working .about p.price_about {font-size: .8rem; margin: 10px 0;}
}
@media all and (max-width: 900px) and (min-width: 761px) {
	#working .about h3 {font-size: 1.1rem;}
	#working .about ul {margin: 5px 0;}
	#working .about ul li {line-height: 1.4; font-size: .8rem;}
	#working .about p.price_about {font-size: .7rem; margin: 5px 0;}
}
@media all and (max-width: 760px) {
	#working .project {flex-direction: column;}
	#working .fon_grey_mobile {background-color: #f5f5f5;}
	#working div.image {width: 100%;}
	#working .about {width: 100%; padding-left: 0;}
	#working .about h3 {margin-top: 20px;}
	#working .about p.but {text-align: center;}
}


	/* ВИДЕО */
	
#video {background-color: #222222;}
#video h2 {color: white; text-align: center;}
#video p {color: white;}
#video .tile img {border-radius: 10px; height: 320px; object-fit: cover;}
#video .tile p {margin: 10px 0; color: white; text-align: center;}


	/* ОТЗЫВЫ */

#feedbuck .sites {max-width: 900px; display: flex; margin: 30px auto; justify-content: space-evenly;}
#feedbuck .sites a {line-height: 1;}
#feedbuck .sites .tile {display: flex; justify-content: space-evenly; align-items: center; margin: 20px 10px; border-radius: 10px; padding: 10px 15px; background-color: white; box-shadow: 0 0 15px #cccccc; transition: transform 0.3s ease;}
#feedbuck .sites .tile:hover {transform: scale(1.05);}
#feedbuck .sites .tile img {height: 1.6rem; width: 90px; object-fit: contain; margin: 4px 0;}
#feedbuck .sites .tile div.b {margin: 0 0 0 10px; font-size: 1rem;}
#feedbuck .sites .tile .rating {color: #f6cf06;}

#feedbuck .columns {columns: auto 350px; column-fill: balance-all;}
#feedbuck .columns .tile {margin: 20px 10px; border-radius: 10px; padding: 10px 15px; break-inside: avoid; background-color: white; box-shadow: 0 0 15px #cccccc;}
#feedbuck .columns .tile > .flex {width: 100%; justify-content: space-between; margin: 5px 0;}
#feedbuck .columns .tile .rating {color: #f6cf06;}
#feedbuck .columns .tile .place {font-size: .8rem; color: #666666;}
#feedbuck .columns .tile .place img {vertical-align: middle; margin: -2px 3px 2px 0; height: .8rem;}
#feedbuck .columns .tile .date {font-size: .8rem; color: #666666;}
#feedbuck .columns .tile .text {font-size: .7rem; margin: 5px 0;}

@media all and (max-width: 860px) and (min-width: 661px) {
	#feedbuck .sites .tile {padding: 10px 5px; margin: 20px 5px;}
	#feedbuck .sites .tile img {height: 1.6rem; width: 60px;}
}
@media all and (max-width: 660px) {
	#feedbuck .sites {flex-direction: column; align-items: center;}
	#feedbuck .sites .tile {margin: 5px 10px;}
}


	/* РАССРОЧКА */
	
#credit > div {display: flex; align-items: center; justify-content: space-evenly; width: 100%;}
#credit .info {width: 55%; display: flex; background: var(--color); padding: 30px var(--li); border-radius: 25px;}
#credit .info > div {margin: auto 0;}
#credit .info h2 {color: white; text-align: left; font-size: 2.2rem; margin: 0 0 1rem 0;}
#credit .info p {color: white; font-size: 1.2rem; margin-bottom: 1rem;}
#credit > div > img {width: 35%;}

@media all and (max-width: 1024px) {
	#credit .info h2 {font-size: 1.8rem;}
	#credit .info p {font-size: 1rem;}
}
@media all and (max-width: 900px) {
	#credit .info h2 {font-size: 1.6rem;}
	#credit .info p {font-size: .9rem;}
}
@media all and (max-width: 760px) {
	#credit > div {width: 480px;}
	#credit .info {flex-direction: column; width: auto; background: var(--color); margin-bottom: 1rem;}
	#credit .info > div {width: 100%;}
	#credit .info h2 {text-align: center;}
	#credit .info p {text-align: center;}
	#credit .info img.none {display: block; margin: 20px 0;} 
	#credit > div > img {display: none;}
}


	/* АКЦИИ */

#actions img {border-radius: 25px; border: 3px solid var(--color);}


	/* КВИЗ В ТЕЛО */

#quiz {background-color: white;}


	/* ОБРАЩЕНИЕ */

#appeal > div {display: flex; justify-content: space-evenly; width: 100%;}
#appeal .info {width: 65%; display: flex; background-color: white; box-shadow: 0 0 15px #cccccc; padding: 20px var(--li); border-radius: 25px;}
#appeal .info > div {margin: auto 0;}
#appeal .info h2 {text-align: left; font-size: 1.8rem; margin: 0 0 1rem 0;}
#appeal .info p {font-size: 1rem; padding: .5rem 0;}
#appeal > div > img {width: 25%; border-radius: 25px; border: 2px solid white; object-fit: cover;}

@media all and (max-width: 1024px) {
	#appeal .info h2 {font-size: 1.6rem;}
	#appeal .info p {font-size: .9rem;}
	#appeal > div > img {width: 30%;}
}
@media all and (max-width: 900px) {
	#appeal .info h2 {font-size: 1.4rem; margin: 0 0 .2rem 0;}
	#appeal .info p {font-size: .8rem;}
}
@media all and (max-width: 760px) {
	#appeal > div > img {display: none;}
	#appeal .info {width: 480px;}
	#appeal .info p {font-size: 1rem;}
	#appeal .info img.none {display: block; border-radius: 50%; margin: 20px auto; width: 160px;}
	#appeal .info p.name {font-style: italic;}
}


	/* СЕРТИФИКАТЫ */

#certificate img {border-radius: 10px; margin-top: 5px; box-shadow: 0 0 10px #cccccc;}
#certificate .hints {font-size: .7rem;}


	/* ЗАПИСЬ НА ЗАМЕР */

#modal_measure main.modal__content {max-width: 420px;}
#modal_measure h3 {font-size: 1.1rem; padding: 10px 0 5px 0; text-align: center;}
#modal_measure p.offer {text-align: center; margin-bottom: 20px;}
#modal_measure p.hints {margin-top: 10px;}

#measure > div {display: flex; justify-content: space-evenly; width: 100%;}
#measure .info {width: 55%; display: flex; background: var(--color); padding: 20px var(--li); border-radius: 25px;}
#measure .info > div {margin: auto 0;}
#measure .info h2 {color: white; text-align: left; font-size: 2.2rem; margin: 0 0 1rem 0;}
#measure .info p {color: white; font-size: 1.2rem; padding-bottom: .5rem;}
#measure .info .button2 {font-size: 1rem;}
#measure .info .button2:before {background-color: white;}
#measure .info .button2:after {background-image: none; background: var(--color);}
#measure > div > img {width: 35%; border-radius: 25px; object-fit: cover;}

@media all and (max-width: 1024px) {
	#measure .info h2 {font-size: 1.8rem;}
	#measure .info p {font-size: 1rem;}
}
@media all and (max-width: 900px) {
	#measure .info h2 {font-size: 1.6rem;}
	#measure .info p {font-size: .9rem;}
}
@media all and (max-width: 760px) {
	#measure > div {max-width: 480px; flex-direction: column;}
	#measure .info {width: auto; border-radius: 25px 25px 0 0;}
	#measure .info > div {width: 100%;}
	#measure .info h2 {text-align: center;}
	#measure .info p {text-align: center;}
	#measure > div > img {width: 100%; border-radius: 0 0 25px 25px;}
}


	/* КОНТАКТЫ */


#requisites {justify-content: space-around;}
#requisites > div {padding: 10px 20px;}
#requisites img {width: 260px; margin: 10px 10px 30px 10px;}
#requisites p.b {margin-top: 10px; color: var(--color);}

#YaMaps {width: 100vw; max-width: 100%;}
#YaMaps iframe {border-radius: 10px;}

@media all and (max-width: 760px) {
	#requisites {flex-direction: column;}
}


	/* КНОПКА НА ПЕРВОМ ЭКРАНЕ ДЛЯ КВИЗА */

.button2 {align-items: center; appearance: none; background-clip: padding-box; background-color: initial; background-image: none; border-style: none; box-sizing: border-box; color: #fff; font-size: 1.2rem; cursor: pointer; display: inline-block; flex-direction: row; flex-shrink: 0; font-weight: bold; justify-content: center; line-height: 24px; margin: 30px 0 10px 0; min-height: 64px; outline: none; overflow: visible; padding: 19px 26px; pointer-events: auto; position: relative; text-align: center; text-decoration: none; text-transform: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: middle; width: auto; word-break: keep-all; z-index: 0;
}
.button2:before, .button2:after {border-radius: 30px;}
.button2:before {background-color: rgba(249, 58, 19, .32); content: ""; display: block; height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.button2:after {background-color: initial; background-image: linear-gradient(92.83deg, #ff7426 0, var(--color) 100%); bottom: 4px; content: ""; display: block; left: 4px; overflow: hidden; position: absolute; right: 4px; top: 4px; transition: all 100ms ease-out; z-index: -1;}
.button2:hover:not(:disabled):after {bottom: 1px; left: 1px; right: 1px; top: 1px; transition-timing-function: ease-in;}
.button2:active:not(:disabled) {color: #ccc;}
.button2:active:not(:disabled):after {background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%); bottom: 4px; left: 4px; right: 4px; top: 4px;}
.button2:disabled {cursor: default; opacity: .24;}