/*
	Theme Name: Mario Theme
	Version: 1.0
	Author: Тарасов Андрей
*/




/*--------------------------------------------------------------
>>> СОДЕРЖАНИЕ:
----------------------------------------------------------------
	CSS RESET
	ОБЩИЕ СТИЛИ
		Текстовый контент
	ШАПКА
	СЛОГАН
	УСЛУГИ
	ПРОМО ТЕКСТ
	КАК СДЕЛАТЬ ЗАКАЗ
	ПРОИЗВОДСТВО
	ДРУГИЕ УСЛУГИ
	КАРТА
	ПОДВАЛ
	МЕДИА-ЗАПРОСЫ
--------------------------------------------------------------*/



/* ==========================================================================
	CSS RESET
========================================================================== */

body { margin: 0; }
main { display: block; }
hr { height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; margin: 0; }
a { background-color: transparent; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details { display: block; }
summary { display: list-item; }
template, [hidden] { display: none; }
figure { margin: 0; }



/* ==========================================================================
	ОБЩИЕ СТИЛИ
========================================================================== */

*:not(.ab-icon):not(.ab-item):not(.dashicons):not(.fa):not(ymaps),
*:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font: 14px/1.3 'Roboto',sans-serif;
}
body.admin-bar { padding-top: 32px; }
h1, h2, h3, h4, h5, h6 {
	line-height: 1.3;
	margin: 0;
}
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

a { transition: 0.3s; text-decoration: none; }
a img { vertical-align: bottom; }
em { font-style: italic; }
blockquote {
	border: dotted #666 1px;
	border-left: solid #ff5a00 5px;
	margin: 10px 40px;
	padding: 15px;
	color: #333;
	font-style: italic;
	background: #fcfcfc;
}
blockquote p { margin: 0; }
p { margin: 0;}
ul { margin: 0; padding: 0; list-style: none; }
ol { list-style: decimal inside; }
ol li { margin: 1rem 0; }
input[type='submit'] { cursor: pointer; }
*:focus {
	outline: none !important;
	border-color: inherit;
	-webkit-box-shadow: none;
	box-shadow: none;
}
img {max-width: 100%; max-height: 100%; height: auto; border-style: none; }
iframe { display: block; max-width: 100%; border: none; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
input, textarea { max-width: 100%; }
textarea { display: block; }
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
   color: transparent !important;
}
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    color: transparent !important;
}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    color: transparent !important;
}
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    color: transparent !important;
}
div#wpadminbar ~ span.select2-container, body.admin-bar > span.select2-container {
	padding-top: 32px !important;
}
@media screen and ( max-width: 782px ) {
	div#wpadminbar ~ span.select2-container, body.admin-bar > span.select2-container {
		padding-top: 46px !important;
	}
}

/* 								   Обтекание картинки текстом
------------------------------------------------------------- */
.aligncenter, [align="center"] {
	display: block;
	margin: 5px auto;
}
.alignright, [align="right"] {
	float:right;
	margin: 5px 0 20px 20px;
}
.alignleft, [align="left"] {
	float:left;
	margin: 5px 20px 20px 0;
}
.wp-caption {
	max-width: 100%;
	text-align: center;
	padding: 5px 3px 0;
	margin: 0 0 15px;
	background: #fff;
	border: 1px solid #f0f0f0;
}
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img {
	border: 0 none;
	height: auto;
	margin:0;
	padding:0;
	width: auto;
}
.wp-caption p.wp-caption-text {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}

/* 											Текстовый контент
------------------------------------------------------------- */
.text_content p, .text_content h2, .text_content h3,
.text_content h4, .text_content h5, .text_content h6 {
	margin: 0 0 30px;
}
.text_content table {
	margin: 0 0 30px;
}
.text_content tr:first-child > * {
	background: #eee;
}
.text_content td {
	font-size: 14px;
	padding: 15px;
	text-align: center;
	border: 1px solid #e6e2e3;
}
.text_content ul {
	list-style: disc inside;
	margin: 0 0 30px 30px;
}
.text_content ul li {
	margin: 0 0 5px;
}
.text_content ol {
	margin: 0 0 30px 30px;
	padding: 0;
}
.text_content ol li {
	margin: 0 0 5px;
}

/* 													   Прочее
------------------------------------------------------------- */
.clearfix:after {
	clear: both;
    content: "";
    display: block;
    height: 0;
}
.justify { text-align: justify; line-height: 0;  font-size: 0; }
.justify:after { content: ''; display: inline-block; width: 100%; }
.justify > * { line-height: 1.2; display: inline-block; vertical-align: top; font-size: initial; }
.container {
	max-width: 1140px;
	margin: 0 auto;
}
.block_title {
	font-weight: 600;
	font-size: 28px;
	color: #bd4428;
	margin: 0 0 30px;
}



/* ==========================================================================
	ШАПКА
========================================================================== */

#header {
	display: flex;
	justify-content: space-between;
	line-height: 1.4;
	font-size: 16px;
	font-weight: 500;
	padding-top: 20px;
}
#header .logo img {
	max-width: 200px;
}
#header .logo p {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
}
#header .work_time {
	padding-left: 35px;
	background: url(img/clock.svg) no-repeat 0 3px / 22px auto;
}
#header address {
	font-style: normal;
	margin: 10px 0 0;
	padding-left: 35px;
	background: url(img/location.svg) no-repeat 0 3px / 20px auto;
}
#header .scroll_link {
	display: inline-block;
	margin: 10px 0 0 35px;
	color: #216278;
	border-bottom: 1px solid;
}
#header .phone, #header .mail {
	display: block;
	padding: 0 0 0 35px;
	color: #000;
}
#header .phone {
	margin: 0 0 10px;
	background: url(img/phone.svg) no-repeat 0 0 / 20px auto;
}
#header .mail {
	background: url(img/mail.svg) no-repeat 0 0 / 20px auto;
}
#header .phone:hover span,
#header .mail:hover span {
	border-bottom: 1px solid;
}



/* ==========================================================================
	СЛОГАН
========================================================================== */

.intro {
	padding: 40px 0;
	margin: 40px 0 0;
}
.intro .container {
	text-align: center;
	font: 500 40px/1.6 'Roboto';
	color: #bd4428;
	margin-bottom: 40px;
}

/* 													   Кнопки
------------------------------------------------------------- */
.btns_wrp {
	display: flex;
	justify-content: center;
	margin: 0 auto;
}
.btn {
	color: #fff;
	padding: 10px 20px;
	background: #e8440e;
	border-radius: 7px;
	border: none;
}
.btn:hover {
	background: #b42e07;
}
.btns_wrp .btn {
	margin: 0 50px;
}

/* 											  Модальная форма
------------------------------------------------------------- */
#modal_form {
	display: none;
	position: relative;
	max-width: 400px;
}
#modal_form .title {
	color: #216278;
	font: 500 26px/1 'Roboto', sans-serif;
	margin: 0 0 20px;
}
#modal_form label {
	display: inline-block;
	position: relative;
	font-weight: 500;
	margin: 0 0 5px;
}
#modal_form label:after {
	content: '*';
	color: red;
	position: absolute;
	right: -7px;
	top: -5px;
}
.wpcf7-tel, .wpcf7-text {
	height: 40px;
	padding: 0 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
}
[data-name="tel"] {
	display: block;
	margin: 0 0 20px;
}
[data-name="file"] {
	display: none;
}
[name="file_name"] {
	cursor: pointer;
}

#modal_form .btn {
	width: 100%;
	margin: 20px 0 0;
	font-size: 16px;
}
.wpcf7-spinner {
	position: absolute;
	right: calc( 50% - 12px );
	bottom: 10px;
	margin: 0;
}

.wpcf7-not-valid-tip {
	display: none !important;
}
.invalid .wpcf7-response-output {
	position: relative;
	color: #D8000C;
	font-size: 12px;
	padding: 10px 10px 10px 40px !important;
	margin: 15px 0 0 !important;
	background-color: #FFBABA;
	border: 0 !important;
}
.invalid .wpcf7-response-output:before {
	content: "\f158";
	position: absolute;
    left: 10px;
    top: 6px;
	font: 22px / 23px dashicons;
}



/* ==========================================================================
	УСЛУГИ
========================================================================== */

.services {
	max-width: 700px;
	margin: 80px auto;
}
.table_title {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #216278;
	font-size: 22px;
	font-weight: 500;
	margin: 40px 0 20px;
}
.table_title .img {
	max-width: 70px;
	margin-right: 20px;
}
.services td {
	font-size: 16px;
	padding: 4px 10px;
	border: 1px solid #ccc;
}
.services td:last-child {
	width: 185px;
}
.services tr:not(.not_bold):first-child td {
	font-weight: 600;
}
.services [colspan='2'] {
	text-align: center;
}



/* ==========================================================================
	ПРОМО ТЕКСТ
========================================================================== */

.promo {
	text-align: center;
	margin: 80px 0;
}
.promo h2 {
	font-size: 34px;
}
.promo p {
	max-width: 700px;
	margin: auto;
	font-size: 24px;
	line-height: 1.5;
}
.promo .images {
	display: flex;
	justify-content: space-between;
	margin: 30px 0 0;
}
.promo .images a {
	width: 30%;
	padding-bottom: 28%;
}



/* ==========================================================================
	КАК СДЕЛАТЬ ЗАКАЗ
========================================================================== */

.zakaz {
	display: flex;
	justify-content: center;
	margin: 80px 0;
}
.zakaz p {
	position: relative;
	padding: 5px 0 5px 20px;
	font-size: 18px;
}
.zakaz p:before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #bd4428;
}
.zakaz p a {
	color: #216278;
	border-bottom: 1px solid;
}



/* ==========================================================================
	ПРОИЗВОДСТВО
========================================================================== */

.production {
	margin: 80px 0 20px;
}
.production h2 {
	text-align: center;
}
.production p {
	font-size: 16px;
}
.production .images {
	display: flex;
	flex-wrap: wrap;
}
.production .item {
	width: calc( 33.33% - 60px );
	margin: 0 30px 60px;
	padding-top: 27%;
}
.production .item:hover {
	transform: scale(1.15);
}



/* ==========================================================================
	ДРУГИЕ УСЛУГИ
========================================================================== */

.other_services {
	margin: 0 0 80px;
}
.other_services h2 {
	text-align: center;
}
.other_services .items {
	display: flex;
	justify-content: center;
}
.other_services .item {
	width: 20%;
	padding-top: 20%;
	transition: 0.3s;
}
.other_services .item:nth-of-type(2) {
	margin: 0 30px;
}
.other_services .item:hover {
	transform: scale(1.10);
}
.other_services p {
	margin: 30px 0 0;
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	color: #216278;
}



/* ==========================================================================
	КАРТА
========================================================================== */

.map {
	margin: 0 0 80px;
}
.map h2 {
	text-align: center;
}
.map iframe {
	height: 400px;
}



/* ==========================================================================
	ПОДВАЛ
========================================================================== */

#footer {
	padding-top: 15px;
	padding-bottom: 15px;
}
#footer div {
	display: flex;
	align-items: center;
	justify-content: center;
}
#footer a {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin: 0 20px;
	border-bottom: 1px solid transparent;
}
#footer a:hover {
	border-bottom: 1px solid;
}
#footer p {
	margin: 15px 0 0;
	text-align: center;
}



/* ==========================================================================
	МЕДИА-ЗАПРОСЫ
========================================================================== */

@media screen and (max-width: 1170px) {
	.container { padding-left: 20px !important; padding-right: 20px !important; }
}

@media screen and (max-width: 782px) {
	body.admin-bar { padding-top: 46px; }
}

@media screen and (max-width: 900px) {
	#footer p { max-width: 430px; margin: 15px auto 0; }
}

@media screen and (max-width: 800px) {
	.production .item { width: calc(33.33% - 40px); margin: 0 20px 40px; }
}

@media screen and (max-width: 700px) {
	#header { flex-direction: column; align-items: center; }
	#header .work_time { margin: 20px 0 0; }
	#header .scroll_link { margin: 10px 0 20px 35px; }
	.intro .container { font-size: 30px; }
	.btns_wrp .btn { margin: 0 20px; }
	.promo h2 { font-size: 30px; }
	.promo p { font-size: 20px; }
	.block_title { font-size: 26px; }
	.other_services p { font-size: 21px; }
	.map iframe { height: 300px; }
}

@media screen and (max-width: 500px) {
	.intro .container { font-size: 25px; }
	.btns_wrp .btn { text-align: center; }
	.services td { font-size: 14px; }
	.table_title .img { max-width: 50px; }
	.table_title { font-size: 20px; }
	.services td:last-child { width: 130px; }
	.production .item { width: calc(33.33% - 20px); margin: 0 10px 20px; }
	.block_title { font-size: 23px; }
	.other_services p { font-size: 16px; }
	.other_services .item { width: 25%; padding-top: 23%; }
	#footer a { margin: 0px 10px; }
	#modal_form { max-width: none; width: 90vw; }
}

@media screen and (max-width: 370px) {
	#modal_form { padding: 40px 20px; }
}



/* == IN CODE WE TRUST == */