/*   
Theme Name: LandingTheme
Theme URI: https://cyberworkers.ru
Version: 1.0
Tags: clean, development, html5
Description: Адаптивная тема для "Автодел-Сервис"
Author: Дмитрий Панкратов
Author E-mail: vivado@bk.ru
*/

/* === Вспомогательное === */
.hide-microrazmetka { display: none; } /* скрываем поля микроразметки */
.all-center { text-align: center; }
.all-left { text-align: left; }
.all-right { text-align: right; }
.center-block { text-align: center; margin: 0 auto; }
.block-inline { display: inline-table; vertical-align: top; }
.max-width { margin: 0 auto; }
.link { color: #f7630c; font-weight: 600; border-bottom: 1px dashed #f7630c; }
.link:hover { color: #e4bb2c; border-bottom: 1px dashed #e4bb2c; }
summary { border: 1px solid #000; padding: 5px; text-align: center; }
summary:hover { cursor: pointer; } 

.orange-btn, .link	{
	-webkit-transition: all 0.2s ease-in-out 0s;
	-moz-transition: all 0.2s ease-in-out 0s;
	-o-transition: all 0.2s ease-in-out 0s;
	-ms-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s;
}

/* === Стили для сайта === */
body { margin: 0; padding: 0; font-family: 'PT Sans Narrow', sans-serif; }

/* --- Фон --- */
.wrapper { margin: 0 auto; background-color: #fff; }

/* --- Шапка --- */
header { width: 100%; overflow: hidden; background-image: url('/img/banner-min.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }

.header-blocks { margin: 0 auto; min-height: 98px; }
.flex { display: flex;  justify-content: space-between; align-items: center; flex-wrap: wrap; }
.line { width: 100%; border-bottom: 1px solid #fff; }
.logo img { width: 100%; }

.phones a { font-size: 1.875em; line-height: 34px; font-weight: 700; color: #fff; }
.phones a span { color: #e4bb2c; }
.phones a:hover { opacity: 0.9; }

/* -- Информация в шапке -- */
.banner-info-block table td { vertical-align: top; }
.banner-info-block p { color: #fff; margin: 5px; padding: 5px; }
.gajka { width: 30px; height: 27px; display: block; content: "";  background-image: url(/img/gajka.png); background-repeat: no-repeat; background-size: cover; float: left; margin: 5px 10px 0 0; }

.orange-btn { width: 100%; text-align: center; color: #000; font-weight: 700; text-transform: uppercase; display: block; background-color: #e4bb2c; border-radius: 10px; cursor: pointer; border: none; }
.orange-btn:hover { background-color: #ffeeb2; }

/* -- Главное меню -- */
/* -- Все стили для Главного (адаптивного) меню находятся в файле /css/menu-style.css */

/* --- Контент --- */
.content { background-color: #fff; margin: 0 auto; }
/* .content { min-height: calc(100vh - 340px); } */ /* Прижимаем подвал к низу. (100vh) высота экрана минус высота всех элементов кроме контента  */

h1, h2, h3, h4 { font-style: normal; font-weight: 400; font-family: "PT Sans Narrow", sans-serf; }

h1 { color: #fff; margin: 5px 0 5px 15px;}
h1 span { color: #e4bb2c; display: block; }
h2 { text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #e2e1de; }

h3 { font-size: 1.875em; background-color: #000; padding: 5px 0; margin: 0 0 10px 0; color: #fff; text-align: center; }
h4 { font-size: 1em; }

a, a:link, a:visited, a:hover, a:focus  { text-decoration: none; }
p, .red-ramka .bold, .kontakty .bold { font-size: 1.25em; padding: 5px 0; }

/* --- Симптомы неисправности --- */
.simptomy { display: flex; justify-content: space-around; flex-wrap: wrap;  padding: 10px 0; }
.simptomy .block-inline { max-width: 320px; }
.simptomy .block-inline img { border: 1px solid #fff; background-color: #fff; border-radius: 50%; }
.block-inline .zagolozok { margin: 5px 0; text-transform: uppercase; }
.simptomy .block-inline p { color: #555; margin: 5px 0; padding: 0;  line-height: 1.3em;  }
.simptomy .block-inline .zagolozok, .usluga .block-inline .zagolozok { font-weight: 600; }

.red-alert img { float: left; margin-right: 5px; }
.red-alert { color: #e4bb2c!important; font-weight: 600; }

/* --- Цвет шрифта для черного фона --- */
.fon { background-color: #000; padding: 10px 0; }
.fon .zagolozok { color: #f7630c; }
.fon .block-inline p { color: #fff; }
.fon p { color: #b9b9b9; }
.fon .red-ramka h3 { background-color: #f7630c; }

/* SEO текст */
.seo-text {background-color: #eee; padding: 5px 15px; margin-bottom: 10px; }
.seo-text h2 { background-color: #fff; }
.seo-text h3 {  font-size: 1.7em; background-color: #888; }

/* --- Услуги диагностики и ремонта --- */
.usluga { display: grid; padding: 10px 0; grid-template-columns: 500px auto; }
.usluga .block-inline img { width: 100%; padding-right: 5%; }
.usluga .block-inline p { padding: 0; margin: 15px 0; }
.grey-line { width: 100%; height: 4px; margin-bottom: 14px; background-color: #ccc; display: block; }

/* --- Запишитесь на диагностику --- */
.red-ramka { border: 4px dashed red; padding: 10px; }
.red-ramka .block-inline { max-width: 49%; margin: 5px; }
.red-ramka .img-block img { width: 100%; border-radius: 10px; }
.rek-text  { text-align: left; }
.red-ramka .bold, .kontakty .bold { font-weight: 600; text-transform: uppercase; margin: 0 0 10px 0; }
.red-ramka .phones a, .kontakty .phones a, .grey { font-size: 1.25em; color: #999; font-weight: 600; text-transform: none; }
.vline { width: 4px; height: 4px; display: inline-block; }
.min_text_height p { margin: 0!important; }

/* --- Отличное качество --- */
.kachestvo { margin-bottom: 20px; }
.kachestvo .block-inline { max-width: 290px; margin: 4px; border: 1px solid #000; border-radius: 10px; overflow: hidden; }
.kachestvo .block-inline img { width: 100%; }
.kachestvo .block-inline .zagolozok { font-size: 1.25em; font-weight: 600; }
.kachestvo .block-inline p span { color: red; font-size: 1.5em; font-weight: 600; }

.kachestvo .block-inline:first-child { margin-left: 0; }
.kachestvo .block-inline:last-child { margin-right: 0; }

/* --- Стили для подвала --- */
.yandex-map { border-top: 1px solid #000; }

footer { min-height: 50px; background-color: #000; }
footer p { font-size: 1em; color: #fff; padding-top: 15px; margin: 0; }

/* -- Адаптация под разные экраны -- */
@media (max-width: 424px) {
	.max-width { max-width: 100%; padding: 0 15px; }
	.usluga { display: block; }
}
@media (min-width: 425px) and (max-width: 767px) {
	.max-width { max-width: 400px; }
	.usluga { grid-template-columns: 30% auto; }
}
@media (max-width: 767px) {
	.nomobile { display: none; }
	header { padding-top: 40px; }
	header .logo, header .phones { margin: 0 auto; }
	header .logo img { padding: 10px 20px 0 20px; }
	header .phones img { max-height: 60px; }
	.banner-info-block img { max-width: 75px; }
	.banner-info-block h1 { font-size: 1.7em; line-height: 30px; text-align: center; background-color: rgb(0 0 0 / 60%); padding: 5px 0; }
	.gajka { width: 20px; height: 17px; }
	.banner-info-block table { margin: 0 auto; }
	.banner-info-block p, h3 { margin: 0 5px; padding: 0 0 2px 5px; }
	.banner-info-block p { font-size: 1em; line-height: 25px; }
	p, .red-ramka .bold, .kontakty .bold, 
	.kachestvo .block-inline .zagolozok { font-size: 1em; padding: 0 0 2px 0; }
	h3 { font-size: 1.25em; line-height: 24px; }
	.seo-text h3 { font-size: 1.1em;}
	.phones a { font-size: 1.4em; line-height: 28px; }
	.red-ramka .phones a, .kontakty .phones a {  font-size: 1.2em; }
	.grey {  font-size: 1em; }
	.vline { width: 0; }
	h2 { font-size: 1.5em;  line-height: 26px; padding-bottom: 5px; margin: 20px 0 10px 0; }
	.orange-btn { max-width: 300px; font-size: 1em; line-height: 38px; margin: 10px auto; }
	.usluga { grid-template-columns: 40% auto; }
	.simptomy .block-inline { max-width: 240px; margin-bottom: 20px; border-bottom: 1px solid #f7630c; }
	.simptomy .block-inline .zagolozok, .usluga .block-inline .zagolozok { font-size: 1.2em;  }
	.red-ramka .block-inline { max-width: 100%; }
	.kachestvo .block-inline { max-width: 240px; }
	.min_text_height .phones, .kontakty .phones { display: block; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	 header { padding-bottom: 10px; }
	.banner-info-block img { max-width: 100px; }
	.banner-info-block h1 { font-size: 2.2em; line-height: 32px; }
	.gajka { width: 25px; height: 22px; }
	.banner-info-block p, h3 { margin: 0 5px; padding: 0 0 2px 5px; }
	.banner-info-block p { font-size: 1.2em; line-height: 25px; }
	p, .red-ramka .bold, .kontakty .bold, 
	.kachestvo .block-inline .zagolozok { font-size: 1.10em; padding: 2px 0; }
	h3, .phones a { font-size: 1.5em; line-height: 30px; }
	h2 { font-size: 1.8em; line-height: 34px; padding-bottom: 5px; margin: 30px 0 20px 0; }
	
	.orange-btn { max-width: 300px; font-size: 1em; line-height: 38px; margin: 10px; }
	.usluga { grid-template-columns: 40% auto; }
	.simptomy .block-inline { max-width: 240px; }
	.simptomy .block-inline .zagolozok, .usluga .block-inline .zagolozok { font-size: 1.2em;  }
	.kachestvo .block-inline { max-width: 240px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.max-width { max-width: 750px; }
	.red-ramka .block-inline { max-width: 340px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
	.max-width { max-width: 1000px; }
	.red-ramka .block-inline { max-width: 450px; }
}
@media (min-width: 1200px) {
	header { height: 600px; }
	.max-width { max-width: 1200px; }
	.banner-info-block table { margin-top: 40px; }
	.banner-info-block img { max-width: 120px; }
	.banner-info-block h1 { font-size: 3.75em; line-height: 60px; }
	.banner-info-block p, h3 { font-size: 1.875em; line-height: 30px; }
	h2 { font-size: 2.5em; line-height: 60px; padding-bottom: 5px; margin: 30px 0 20px 0; }
	.seo-text h2 { font-size: 2em; line-height: 40px; }
	
	.orange-btn { max-width: 400px; font-size: 1.25em; line-height: 48px; margin: 20px; }
	.block-inline .orange-btn { margin: 10px 0; }
	.simptomy .block-inline .zagolozok, .usluga .block-inline .zagolozok { font-size: 1.5em; }
	
}