﻿* {margin: 0; padding: 0; font-family: verdana; position: relative;}

/*Навигация*/ 

/*РАсширение >= 1300*/
@media all and (min-width: 1300px) {
NAV {
	background-color: #f8f8f8;
	position: fixed; 
	width: 100%; 
	z-index: 1;
	-webkit-z-index: 1;
	border-bottom: 1px solid #00FA9A;
}

NAV .topnavy {width: 100%; }

NAV .topnavy .logo {
	display: inline-table;
	width: 15%;
	vertical-align: top;
	margin: 1%;
}

NAV .topnavy .logo IMG {
	width: 100%;
}

NAV .topnavy .pustosh {
	display: inline-table;
	width: 60%;
	vertical-align: top;
}

NAV .topnavy .wsap {
	display: inline-table;
	width: 20%;
	vertical-align: top;
	margin: 1%;
	font-size: 20px;
}

NAV .topnavy .wsap IMG {
	width: 25px;
	vertical-align: top;
}

NAV .topnavy .wsap A {
	text-decoration: none;
	vertical-align: top;
	font-weight: bold;
	color: green;
}

NAV .topnavy .wsap A:hover {
	text-decoration: underline;
	color: gold;
}





NAV .topnavy .wsap FORM {margin-top: 10px;}

NAV .topnavy .wsap FORM [type=text] {
	border-radius: 10px;
	border-color: green;
	padding-top: 1%;
	padding-bottom: 1%;
}

NAV .topnavy .wsap FORM [type=submit] {
	border-radius: 5px;
	border-color: green;
	font-weight: bold;
	text-transform: uppercase;
	padding: 1%;
	color: green;
	cursor: pointer;
}

NAV .topnavy .wsap FORM [type=submit]:hover {
	color: gold;
	border-color: gold;
	
}


NAV .bottomnavy {
	width: 100%; 
	background: linear-gradient(90deg, navy, black); 
	padding-top: 2%; 
	padding-bottom: 2%;

	}
NAV .bottomnavy .linavy {
	width: 15%;
	display: inline-table;
	text-align: center;
	}
	
NAV .bottomnavy .linavy A {
	text-decoration: none;
	color: azure;
	font-weight: bold;
	text-transform: uppercase;
}

NAV .bottomnavy .linavy A:hover {
	text-decoration: underline;
	color: gold;
}

NAV .mobil {display: none;}

}


/*Расширение < 1300 навигация*/

@media all and (max-width: 1300px) {
NAV {
	background-color: #f8f8f8;
	position: fixed; 
	width: 100%; 
	z-index: 1;
	-webkit-z-index: 1;
	border-bottom: 1px solid #00FA9A;
}

NAV .topnavy {width: 100%; }

NAV .topnavy .logo {
	display: inline-table;
	width: 15%;
	vertical-align: top;
	margin: 1%;
}

NAV .topnavy .logo IMG {
	width: 100%;
}

NAV .topnavy .pustosh {
	display: inline-table;
	width: 40%;
	vertical-align: top;
}

NAV .topnavy .wsap {
	display: inline-table;
	width: 40%;
	vertical-align: top;
	margin: 1%;
	font-size: 20px;
	text-align: right;
}

NAV .topnavy .wsap IMG {
	width: 25px;
	vertical-align: top;
}

NAV .topnavy .wsap A {
	text-decoration: none;
	vertical-align: top;
	font-weight: bold;
	color: green;
}

NAV .topnavy .wsap A:hover {
	text-decoration: underline;
	color: gold;
}





NAV .topnavy .wsap FORM {margin-top: 10px;}

NAV .topnavy .wsap FORM [type=text] {
	border-radius: 10px;
	border-color: green;
	padding-top: 1%;
	padding-bottom: 1%;
}

NAV .topnavy .wsap FORM [type=submit] {
	border-radius: 5px;
	border-color: green;
	font-weight: bold;
	text-transform: uppercase;
	padding: 1%;
	color: green;
	cursor: pointer;
}

NAV .topnavy .wsap FORM [type=submit]:hover {
	color: gold;
	border-color: gold;
	
}


NAV .bottomnavy {
	width: 100%; 
	background: linear-gradient(90deg, navy, black); 
	padding-top: 2%; 
	padding-bottom: 2%;

	}
NAV .bottomnavy .linavy {
	width: 15%;
	display: inline-table;
	text-align: center;
	}
	
NAV .bottomnavy .linavy A {
	text-decoration: none;
	color: azure;
	font-weight: bold;
	text-transform: uppercase;
}

NAV .bottomnavy .linavy A:hover {
	text-decoration: underline;
	color: gold;
}

NAV .mobil {display: none;}

}

/*Расширение < 1121 навигация*/

@media all and (max-width: 1121px) {
NAV {
	background-color: #f8f8f8;
	position: fixed; 
	width: 100%; 
	z-index: 1;
	-webkit-z-index: 1;
	border-bottom: 1px solid #00FA9A;
}

NAV .topnavy {width: 100%; }

NAV .topnavy .logo {
	display: inline-table;
	width: 15%;
	vertical-align: top;
	margin: 1%;
}

NAV .topnavy .logo IMG {
	width: 100%;
}

NAV .topnavy .pustosh {
	display: inline-table;
	width: 20%;
	vertical-align: top;
}

NAV .topnavy .wsap {
	display: inline-table;
	width: 55%;
	vertical-align: top;
	margin: 1%;
	font-size: 20px;
	text-align: right;
}

NAV .topnavy .wsap IMG {
	width: 25px;
	vertical-align: top;
}

NAV .topnavy .wsap A {
	text-decoration: none;
	vertical-align: top;
	font-weight: bold;
	color: green;
}

NAV .topnavy .wsap A:hover {
	text-decoration: underline;
	color: gold;
}





NAV .topnavy .wsap FORM {margin-top: 10px;}

NAV .topnavy .wsap FORM [type=text] {
	border-radius: 10px;
	border-color: green;
	padding-top: 1%;
	padding-bottom: 1%;
}

NAV .topnavy .wsap FORM [type=submit] {
	border-radius: 5px;
	border-color: green;
	font-weight: bold;
	text-transform: uppercase;
	padding: 1%;
	color: green;
	cursor: pointer;
}

NAV .topnavy .wsap FORM [type=submit]:hover {
	color: gold;
	border-color: gold;
	
}


NAV .bottomnavy {
	width: 100%; 
	background: linear-gradient(90deg, navy, black); 
	padding-top: 2%; 
	padding-bottom: 2%;

	}
NAV .bottomnavy .linavy {
	width: 15%;
	display: inline-table;
	text-align: center;
	}
	
NAV .bottomnavy .linavy A {
	text-decoration: none;
	color: azure;
	font-weight: bold;
	text-transform: uppercase;
}

NAV .bottomnavy .linavy A:hover {
	text-decoration: underline;
	color: gold;
}

NAV .mobil {display: none;}

}






/*Расширение мобильное*/
@media all and (max-width: 900px) {
	NAV {
	background-color: #f8f8f8;
	position: fixed; 
	width: 100%; 
	z-index: 1;
	-webkit-z-index: 1;
	border-bottom: 1px solid #00FA9A;
}

NAV .topnavy {width: 100%; }

NAV .topnavy .logo {
	display: inline-table;
	width: 15%;
	vertical-align: top;
	margin: 1%;
}

NAV .topnavy .logo IMG {
	width: 100%;
}

NAV .topnavy .pustosh {
	display: inline-table;
	width: 20%;
	vertical-align: top;
}

NAV .topnavy .wsap {
	display: inline-table;
	width: 55%;
	vertical-align: top;
	margin: 1%;
	font-size: 20px;
	text-align: right;
}

NAV .topnavy .wsap IMG {
	width: 25px;
	vertical-align: top;
}

NAV .topnavy .wsap A {
	text-decoration: none;
	vertical-align: top;
	font-weight: bold;
	color: green;
}

NAV .topnavy .wsap A:hover {
	text-decoration: underline;
	color: gold;
}





NAV .topnavy .wsap FORM {margin-top: 10px;}

NAV .topnavy .wsap FORM [type=text] {
	border-radius: 10px;
	border-color: green;
	padding-top: 1%;
	padding-bottom: 1%;
}

NAV .topnavy .wsap FORM [type=submit] {
	border-radius: 5px;
	border-color: green;
	font-weight: bold;
	text-transform: uppercase;
	padding: 1%;
	color: green;
	cursor: pointer;
}

NAV .topnavy .wsap FORM [type=submit]:hover {
	color: gold;
	border-color: gold;
	
}



	NAV  .bottomnavy {display: none;}
	NAV .mobil {display: block; width: 100%; border-top: 3px solid #00FA9A;}
	NAV .mobil #on-off #on-off-1, NAV .mobil #on-off #on-off-2 {cursor: pointer;}
	NAV .mobil #off-on {
		text-align: center;
		border-top: 3px solid white;
	}
	
	NAV .mobil #off-on UL LI {list-style: none; margin-top: 4%; margin-bottom: 4%;}
	NAV .mobil #off-on UL LI A {text-decoration: none; color: black;}
	NAV .mobil #off-on UL LI A:hover {color: gold; text-decoration: underline;}
	
}
			




/**/

@media all and (min-width: 1370px) {
HEADER {
	background-image: url('../images/header.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	min-height: 600px;
}

HEADER .headleft, HEADER .headright {
	width: 49%;
	display: inline-table;
	vertical-align: top;
	text-align: center;
	margin-top: 14%;
}

HEADER .headleft H1 {
	color: azure;
}

HEADER .headleft HR {
	border: 3px solid green;
	margin: 2%;
}


HEADER .headleft UL {
	text-align: left;
	margin-top: 20px;
	font-size: 23px;
	padding: 2%;
}

HEADER .headleft UL LI{
	list-style: none;
	color: azure;
	padding: 1%;
}


HEADER .zakazat {
	margin-top: 2%;
	padding: 2%;
	cursor: pointer;
	border-radius: 5px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: green;
	color: azure;
	box-shadow: azure 1px 0 10px;
	margin-bottom: 2%;
}

HEADER .zakazat:hover {
	box-shadow: green 1px 0 10px;
	background-color: gold;
	color: navy;
}
}

/**/

@media all and (max-width: 1370px) {
HEADER {
	background: linear-gradient(45deg, black, navy);
	min-height: 600px;
	text-align: center;
}

HEADER .headleft {
	width: 90%;
	display: block;
	vertical-align: top;
	text-align: center;
	margin: auto;
	margin-top: 0%;
}

HEADER .headright {display: none;}

HEADER .headleft H1 {
	color: azure;
	font-size: 25px;
	padding-top: 50%;
}

HEADER .headleft HR {
	border: 3px solid green;
	margin: 2%;
}


HEADER .headleft UL {
	text-align: left;
	margin-top: 20px;
	font-size: 23px;
	padding: 2%;
}

HEADER .headleft UL LI{
	list-style: none;
	color: azure;
	padding: 1%;
}


HEADER .zakazat {
	margin-top: 2%;
	padding: 2%;
	cursor: pointer;
	border-radius: 5px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: green;
	color: azure;
	box-shadow: azure 1px 0 10px;
	margin-bottom: 2%;
}

HEADER .zakazat:hover {
	box-shadow: green 1px 0 10px;
	background-color: gold;
	color: navy;
}
}






/*MAIN*/

MAIN {
	background-color: #f8f8f8;
	padding: 2%;
}

/*более 1000*/
@media all and (min-width: 1000px) {
MAIN .mainleft, MAIN .mainright{
	display: inline-table;
	vertical-align: top;
}

MAIN .mainleft {
	width: 70%;
}

MAIN .mainright {
	width: 29%;
	text-align: center;	
	border-left: 1px solid gray;
}

}

/*менее 1000*/

@media all and (max-width: 1000px) {
MAIN .mainleft, MAIN .mainright{
	display: block;
	vertical-align: top;
	width: 95%;
	margin: auto;
}

MAIN .mainright {
	width: 75%;
	text-align: center;
}

}



/**/
MAIN .mainleft H2 {
	background: linear-gradient(45deg, navy, black);
	padding: 2%;
	text-align: center;
	color: azure;
	border-radius: 10px;
	width: 95%;
	margin: auto;
	text-transform: uppercase;
}

MAIN .mainright H2 { 
	text-transform: uppercase;
	margin-bottom: 30px;
	padding-top: 2%;
	padding-bottom: 2%;
	color: green;
	background-color: azure;
}



MAIN .mainright .lstat {
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	width: 100%;
	height: 150px;
}

MAIN .mainright  H3 A {
	text-transform: uppercase;
	text-decoration: none;
	color: gray;
}

MAIN .mainright  H3 A:hover {
	text-decoration: underline;
	color: green;
}


.pricelist {
	width: 95%;
	box-shadow: green 1px 0 10px;
	font-size: 18px;
	text-align: center;
	margin: auto;
	border: 3px solid navy;
}



.pricelist THEAD {
	color: white;
	text-transform: uppercase;
	background: linear-gradient(0deg, #008080, black);
	
}

.pricelist THEAD TR TH {
	height: 100px;
	vertical-align: center;
	
}

.pricelist THEAD TR TH:nth-child(1) {width: 5%;}
.pricelist THEAD TR TH:nth-child(3) {width: 50%;}

.pricelist TBODY TR TD {
	height: 100px;
	vertical-align: center;
}

.pricelist TBODY TR:nth-child(even) {
	background: linear-gradient(180deg, #C0C0C0, azure);
	
}

MAIN P {
	padding: 5px;
	text-indent: 30px;
}

MAIN .formul {color: green;}

MAIN UL {
	padding: 1%;
	list-style-position: inside;
}



/*Комментарии*/

.komment {
	width: 95%;
	margin: auto;
	margin-bottom: 10px;
	margin-top: 10px;
}

.komment H3 {padding: 2%; color: navy;}

.komid {
	width: 25%;
	display: inline-table;
	vertical-align: top;
}

.komid IMG {width: 100%; }

.komtxt {width: 70%; display: inline-table; vertical-align: top;}
.komtxt P {text-indent: 30px; padding: 2%;}


/*Формы*/

.formkomm {
	margin: auto;
	width: 90%;
	margin-bottom: 2%;
}

.formkomm H3 {margin-top: 1%; margin-bottom: 1%; text-shadow: green 1px 0 10px;}


.formkomm LABEL {font-size: 20px;}

@media all and (min-width: 801px) {
.formkomm LABEL [type=text], .formkomm LABEL SELECT {
	width: 50%; padding-top: 1%; padding-bottom: 1%; border-radius: 3px;
	border: 3px solid navy; box-shadow: green 1px 0 10px; margin-top: 1%;
	padding-left: 1%;
}


.formkomm LABEL TEXTAREA { margin-top: 1%; border: 3px solid navy; width: 50%; border-radius: 3px; resize: none; height: 150px; box-shadow: green 1px 0 10px; padding: 1%;}

.formkomm LABEL [type=submit] {background-color: green; color: white; text-transform: uppercase; font-weight: bold; padding: 2%;
box-shadow: green 1px 0 10px; border-radius: 10px;
}
}

@media all and (max-width: 800px) {
.formkomm LABEL [type=text], .formkomm LABEL SELECT {
	width: 90%; padding-top: 1%; padding-bottom: 1%; border-radius: 3px;
	border: 3px solid navy; box-shadow: green 1px 0 10px; margin-top: 1%;
	padding-left: 1%;
}


.formkomm LABEL TEXTAREA { margin-top: 1%; border: 3px solid navy; width: 90%; border-radius: 3px; resize: none; height: 150px; box-shadow: green 1px 0 10px; padding: 1%;}

.formkomm LABEL [type=submit] {background-color: green; color: white; text-transform: uppercase; font-weight: bold; padding: 4%;
box-shadow: green 1px 0 10px; border-radius: 10px;
}
}



.formkomm LABEL [type=submit]:hover {
	background-color: gold;
	color: navy;
	cursor: pointer;
}


/*Примеры парсинга*/

DETAILS {margin-left: 4%;  padding-left: 1%; 
 width: 90%;}

DETAILS SPAN {font-weight: bold; text-shadow: green 1px 0 10px;}

DETAILS SUMMARY {
	padding-top: 1%; padding-bottom: 1%; color: navy; font-weight: bold;
}

DETAILS P, MAIN P {
	font-size: 20px;
	padding-bottom: 1%;
}


MAIN HR {width: 90%; margin: auto; margin-top: 2%; margin-bottom: 2%; box-shadow: green 1px 0 10px;}


.tablebrand {width: 100%; text-align: center;}
.tablebrand TBODY TR {border-radius: 3px;}
.tablebrand TBODY TR TD {box-shadow: navy 1px 0 10px; height: 75px; padding: 1%;}
.tablebrand TBODY TR TD:nth-child(1) {width: 70%;}


/*Связь*/

.svyaz {
	
	padding: 2%;
	background: linear-gradient(45deg, navy, darkgreen);
	color: white;
	border-radius: 10px;
	width: 90%;
	margin: auto;
	margin-top: 1%;
}

.svyaz_wa {
	width: 100%;
	margin: auto;
	text-align: center;
}

.svyaz_wa IMG {width: 40px;}
.svyaz_wa A {font-size: 30px; color: white; vertical-align: top; text-decoration: none;}
.svyaz_wa A:hover {color: gold; text-decoration: underline;}

/*Модальное окно*/

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 35px;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
	
}

.modalDialog:target {
	display: block;
	pointer-events: auto;
}

.modalDialog > div {
	width: 70%;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	text-align: left;
}


.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
.pojelaniya {width: 95%;}

.elema {text-decoration: none; color: #ff00ff;}
.elema:hover {color: gold; text-decoration: underline;}


/*Подвал сайта*/

FOOTER {
	min-height: 300px;
	text-align: center;
	color: white;
	background-image: url('../images/header.jpg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

FOOTER P {padding-top: 150px;}