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

/* === Ядро WordPress === */
img.alignright { float: right; margin: 5px 0 20px 20px; }
img.alignnone { margin: 5px 20px 20px 0; }
img.alignleft { float: left; margin: 5px 20px 20px 0; }
img.aligncenter { display: block; margin: 5px auto; }

.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus {	clip: auto !important; display: block; font-size: 14px; height: auto; left: 5px; line-height: normal; text-decoration: none; top: 5px; width: auto; z-index: 999; }
.hide-microrazmetka { display: none; } /* скрываем поля микроразметки */

/* === Стили для сайта === */
*{ 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;             /* Opera/IE 8+ */
}

html { -webkit-font-smoothing: antialiased; }
body { margin:0; padding: 0; background-color: #fff; font-family: Arial, sans-serif; }

/* -- Объекты для плавной анимации -- */
.menu li a, .big-text, .phone, .privacy, .orange-btn, .phone-num, .filialy p{
	-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;
}

/* -- Вспомогательное -- */
.all-center { text-align: center; }
.all-left { text-align: left; }
.all-right { text-align: right; }
.clear { clear: both; }
.grid { display: grid; }
.block-inline { display: inline-table; vertical-align: top; }

/* --- Фон --- */
.wrapper { background-color: #fff; overflow: hidden; padding-bottom: 50px; box-shadow: 0 0 10px 0 #fff; }

/* --- Максимальная ширина контента --- */
.max-width { margin: 0 auto; }

/* --- Шапка --- */
header { width: 100%; min-height: 90px; }
header, nav, .footer-green-block { background-color: rgb(63 104 8 / 80%); border-bottom: 1px solid #fff; border-top: 1px solid #fff; }

.header-logo-block { display: grid; }
.header-logo-block .logo { margin-right: 10px; }
.header-logo-block .logo img { width: 100%;  }

.big-text, .phone { font-weight: bold; color: #ff9800; text-shadow: 0 0 6px #000; }
.big-text:hover, .phone:hover { color: #f1a93f; }
.small-text { color: #fff; text-shadow: 0 0 6px #000;  margin: 0 5px; }
.small-text span { color: #ff9800; }

.header-phone-block { text-align: right; }

/* -- Баннер -- */
.banner, footer { background-position: center center; background-repeat: no-repeat; background-size: cover; }
.banner { background-image: url('/wp-content/themes/IlososMSK-Theme/img/banner.jpg'); width: 100%; display: block; }
.banner .forma-fancybox { box-shadow: 0 0 10px 0 #fff; }


/* --------- Главное меню --------- */
nav { display: block; width: 100%; }

.menu { display: block; padding: 0; margin: 0 auto; }
.menu li { display: inline-block; position: relative; z-index:100; padding: 0px; }
.menu li:first-child { margin-left: 0; }

/* -- Пункты меню -- */
.menu li a { font-size: 16px; font-weight: bold; line-height: 40px; text-transform: uppercase; text-decoration: none; margin: 0px; display: block; color: #ddd; text-shadow: 0 0 6px #000; }
.menu li a:hover, .menu li:hover > a, .current-menu-item a { color: #fff!important; }

/* -- Пункты подменю -- */
.menu ul { display: none; margin: 0; padding: 0; min-width: 150px; position: absolute; background: #fff; }
.menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; }
.menu ul li a {	font-size: 14px; display: block; color: #000; background: #fff; }
.menu ul li a:first-child { padding-left: 0; }
.menu ul li a:hover, .menu ul li:hover > a { background: #f0f0f0; }
.menu li:hover > ul { display: block; }
.menu ul ul { left: 149px; top: 0px; }

/* -- Мобильное меню -- */
.mobile-menu { 
	display: none; width: 100%; padding: 5px 10px; background: #666; color: #fff; text-transform: uppercase; 
	position: absolute; top: 0px;
}
.mobile-menu:hover { background: background: #777; color: #fff; text-decoration: none; }

@media (max-width: 767px) {
	nav { margin: 0; background: none; position: absolute; top: 40px; }
	.menu { display: none; }
	.mobile-menu, .mobile-menu:hover { display: block; margin-top: 0px; text-decoration: none; background-color: #000; color: #fff; }
	.menu li { display: block; margin: 0; padding: 0px; }
	.menu li a { background: rgb(0 0 0 / 60%); border-top: 1px solid #ddd; line-height: 30px; padding-left: 15px;  text-transform: none; }
	.menu li a:hover, .menu li:hover > a { background: #000; color: #fff; border-left: 5px solid #000; }
	.menu li.current_page_item > a { color: #fff; border-left: 5px solid #ff0000; }
	.menu ul { display: block; position: relative; top: 0; left: 0; width: 100%; }
	.menu ul ul { left: 0px; }
	.menu .sub-menu { padding-left: 10px; }
}
@media (min-width: 768px) {
	nav { position: absolute; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	nav { top: 300px; }
	.menu li a { padding: 0 12px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	nav { top: 335px; }
	.menu li a { padding: 0 15px; }
}
@media (min-width: 1280px) {
	nav { top: 350px; }
		.menu li a { padding: 0 20px; }
}
/* --------- END Главное меню --------- */


/* --- Контент --- */
.content { background-color: #fff; }

h1, h2, h3, h4, .h4-title { font-style: normal; font-weight: bold; }
h1, h2 { text-align: center; }

h1 { font-size: 34px; border-radius: 10px; padding: 5px; box-shadow: 0 0 10px 0px rgb(0 0 0 / 80%); }

h2 { font-size: 30px; line-height: 34px;  overflow: hidden; }
h2:before, h2:after { content: ''; display: inline-block; vertical-align: middle; box-sizing: border-box; width: 100%; height: 8px; background: #658634; border: solid #fff; border-width: 0 10px; }
h2:before { margin-left: -100%; }
h2:after { margin-right: -100%; }

h3 { font-size: 24px; }
h4, .h4-title { font-size: 17px; }

p { font-size: 16px; }
a, a:link, a:visited, a:hover, a:focus { text-decoration: none; }

/* -- Хлебные крошки -- */
.breadcrumbs { margin-top: 5px; font-size: 12px; }
.breadcrumbs a { color: #658634; font-weight: bold; }

/* -- Салатовый блок призыва к действию с телефоном -- */
.green-block { margin: 10px auto; box-shadow: 0 0 10px 0px rgb(0 0 0 / 80%); text-align: center; background-color: #d8e6b2; border: 1px solid #658634; border-radius: 10px; }
.green-block p { margin: 5px; }
.green-block .phone { text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000; }
.green-block-title { font-weight: bold; }

/* -- Услуги / Преимущества аренды / Наш автопарк -- */
.uslugi .block-inline { display: inline-block; width: 240px; height: 180px; overflow: hidden; }
.uslugi .block-inline img { width: 100%; border-radius: 10px;  }

.uslugi .block-inline .h4-title { background-color: rgb(63 104 8 / 80%); color: #fff; display: grid; align-content: center; position: absolute; width: 240px; padding: 0 5px; min-height: 50px; margin: 120px 0 0 0; }

.uslugi .block-inline Img { transition: all 1s ease; width: 240px; height: 180px; }
.uslugi .block-inline Img:hover { width: 280px; height: 200px; margin: -20px 0px 0px -20px; }

.uslugi .block-inline,
.avtopark .block-inline { margin: 5px; border: 1px solid #b8b8b8; border-radius: 10px; overflow: hidden; text-align: center; }

/* Поворот картинок преимуществ при наведении*/
.preim .block-inline  img { transition: all 0.5s ease; }
.preim .block-inline img:hover {  transform: rotate(-30deg); }

.avtopark .block-inline p { margin: 5px 0; }
.avtopark .block-inline img.avto { width: 100%; }
.avtopark .block-inline .green-fon { background-color: #658634; line-height: 34px; }
.abs-img { position: absolute; }
.avtopark .block-inline .green-fon .h4-title { color: #fff; }
.avtopark .block-inline .cena { font-weight: bold; }
.avtopark .block-inline .cena span { font-size: 30px; color: red; }

/* -- Стили для таблиц -- */
table {  margin: 5px auto;  border-collapse: collapse;  border-spacing: 0; background-color: #d8e6b2; border: 1px solid #658634; box-shadow: 0 0 10px 0px rgb(0 0 0 / 80%); border-radius: 10px; overflow: hidden; }
table td, table th { border: 1px solid #658634; padding: 5px 10px; text-align: center; font-weight: bold; }

.price { text-align: center; }
.price h3 { margin-bottom: 15px; }
.price p { text-align: left; }
.price small { font-weight: bold; color: #ff9800; }


/* -- Формы обратной связи -- */
.forma-fancybox { background-color: #fff; display: block; border-radius: 10px; text-align: center; width: 280px; padding: 15px; }
.forma-fancybox h4 { margin: 0 0 10px 0; color: #000; }
.forma-fancybox p { margin: 0; padding: 0; font-size: 14px;}

.banner .forma-fancybox { position: absolute; }

.text-txt, .phone-txt, .mess-txt { font-size: 16px; width: 100%; font-family: Arial, sans-serif; text-align: left; padding: 0px 10px; border: 1px solid #000; outline: none; background-color: #eee; margin-bottom: 5px; }
.mess-txt { max-height: 90px; line-height: 20px; }
.text-txt:hover, .phone-txt:hover, .mess-txt:hover { border: 1px solid #000; box-shadow: 0 0 10px 0px #ff9800; }

.forma-fancybox .orange-btn { outline: none; cursor: pointer; }

.forma-fancybox .small-txt { font-size: 11px; line-height: 12px; color: #000; }
.forma-fancybox .small-txt a { color: #3f5b16; border-bottom: 1px dashed #3f5b16; }
.forma-fancybox .small-txt a:hover { opacity: 0.9; }
div.wpcf7 .ajax-loader { display: block; }

.orange-btn { margin: 10px auto 0 auto; font-size: 16px; text-align: center; color: #fff; font-weight: bold; width: 200px; border-radius: 10px; border: 1px solid #000; display: block; background-color: #ff9800; }
.orange-btn:hover { background-color: #f1a93f; }
.phone-num { color: #000; }
.phone-num:hover { color: #ff9800; }

/*-- Сообщенияоб ошибках / удачной отправке и пр. --*/
.wpcf7-not-valid-tip { margin: -15px 0px; padding: 0 10px; border: 1px dashed red; }
.wpcf7-not-valid-tip, 
.wpcf7 form.sent .wpcf7-response-output, 
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output { font-weight: 700; position: absolute; font-size: 11px; line-height: 13px; text-align: center; border-radius: 10px; background-color: rgb(255 255 255 / 0.9); z-index: 100; }
.wpcf7 form.sent .wpcf7-response-output, 
.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output { padding: 2px 5px; position: absolute; margin: -36px 0 0 0; color: #000; }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-color: #ff0000; }
.forma-fancybox .wpcf7-spinner { position: absolute; }


/* -- Кнопки филиалов -- */
.filialy { text-align: center; }
.filialy p { display: inline-table; vertical-align: top; width: 250px; margin: 5px; background-color: #ff9800; border-radius: 10px; border: 1px solid #000; }
.filialy p a { width: 100%; line-height: 36px; display: block; color: #fff; }
.filialy p:hover { background-color: #fff; }
.filialy p:hover a {color: #000; }


/* --- Стили для подвала --- */
footer { min-height: 150px; padding-top: 29px;  background-image: url('/wp-content/themes/IlososMSK-Theme/img/footer-fon.jpg'); }
footer .footer-green-block { height: 90px; padding-top: 13px; }
footer .footer-green-block p { font-size: 14px; color: #fff; margin: 0; }
footer .phone { font-size: 16px; margin: 5px 0 2px 0; display: block; }
footer .privacy { color: #ddd; border-bottom: 1px dashed #ddd; }
footer .privacy:hover { color: #fff; border-bottom: 1px dashed #fff; }


/* --- Прижимаем подвал к низу. 100% (100vh) высота экрана минус высота всех элементов кроме контента --- */
.content, .colonka-left, .colonka-right { min-height: calc(100vh - 550px); }


/* -- Адаптация под разные экраны -- */
@media (max-width: 767px) {
	.no-mobile { display: none; }
	.max-width { max-width: 100%; padding: 0 10px; }
	header { padding: 50px 0 0 0; }
	.header-logo-block { display: grid; grid-template-columns: 80px auto; }
	.header-logo-block .logo { margin-right: 5px; }
	.big-text { font-size: 34px; }
	.small-text { font-size: 14px; }
	.small-text span { display: block; }
	.header-phone-block { text-align: center; border-top: 1px dashed #fff; margin-top: 5px; padding: 5px 0; }
	.phone { font-size: 28px; }
	.banner { height: 150px; }
	h1 { font-size: 26px; }
	h2 { font-size: 22px; }
	h3 { font-size: 18px; }
	h4 { font-size: 16px; }
	p, table td, table th { font-size: 14px; }
	table td, table th { padding: 2px 5px; }
	.price table { width: 100%; }
	.preim .block-inline { width: 150px; }
	.avtopark .block-inline { width: 300px; }
	.avtopark .block-inline .cena span { font-size: 20px; }
	.abs-img { width: 120px; height: 120px; margin: -8px 0 0 -8px; }
	.text-txt, .phone-txt, .orange-btn  { line-height: 26px; }
	.mtop20 { margin: 10px auto; }
}
@media (min-width: 768px) {
	.no-desktop { display: none; }
	.max-width { padding: 0 15px; }
	header { position: absolute; padding: 5px 0; }
	.header-logo-block { grid-template-columns: 90px auto; }
	.preim .block-inline { width: 240px; }
	.abs-img { width: 141px; height: 141px; margin: -10px 0 0 -10px; }
	.mtop20 { margin: 20px auto; }
	.price table { min-width: 700px; }
}
@media (min-width: 768px) and (max-width: 1023px){
	.max-width, .menu { max-width: 768px; }
	header { top: 5px; }
	header .grid { grid-template-columns: 1fr auto 300px; }
	.big-text { font-size: 40px; }
	.small-text { font-size: 16px; }
	.header-phone-block { padding-top: 6px; }
	.phone { font-size: 34px; }
	.banner { height: 350px; }
	.banner .forma-fancybox { margin: 105px 0 0 460px; }
	.forma-fancybox { padding: 15px; }
	.avtopark .block-inline { width: 350px; }
	.text-txt, .phone-txt, .orange-btn { line-height: 26px; }
}
@media (min-width: 1024px) {
	header { top: 10px; }
	header .grid { grid-template-columns: 1fr auto 360px; }
	.big-text { font-size: 50px; }
	.small-text { font-size: 18px; }
	.header-phone-block { padding-top: 10px; }
	.phone { font-size: 40px; }
	.avtopark .block-inline { width: 400px; }
	.text-txt, .phone-txt, .orange-btn { line-height: 30px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.max-width, .menu { max-width: 1024px; }
	.banner { height: 390px; }
	.banner .forma-fancybox { margin: 125px 0 0 710px; }
	.forma-fancybox { padding: 15px; }
	.small-text span { display: block; }
}
@media (min-width: 1280px) {
	.max-width, .menu { max-width: 1280px; }
	.banner { height: 400px;  }
	.banner .forma-fancybox { margin: 120px 0 0 970px;  }
	.green-block { width: 990px; padding: 14px 0 16px 0;  }
	.green-block-title { font-size: 24px; }
	.green-block-text { font-size: 20px; }
	.forma-fancybox { padding: 20px 15px; }
}