html, body{width: 100%;}
* {	/**/
padding: 0;
margin: 0;
font-family: 'Roboto';
}
.r3{-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;}
.r5{-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}
/* ШАПКА САЙТА */
div.header{
	width: 100%;
}
	div.header > a.logo{text-indent: -9999px; background: transparent url('logo.jpg') center no-repeat; width: 284px; height: 30px; border: 0; margin: 0 auto; position: relative; padding: 20px 0 0 0;}
		div.header > a.logo:hover{opacity: .8;filter:Alpha(Opacity=80);}
	div.header > p{font-size: 119.9%; text-align: center;}
	div.header > div{margin: 0 auto; width: 1024px; height: 380px; position: relative;}
	div.header a{display: block; position:absolute; z-index: 2; background-color: #fff; border: 2px solid #0067E6; color: #0067E6; padding: 5px; font-size: 129.9%; text-align: center;}
	div.header div.link:hover a{border-color: #333; color: #333;}
	div.header div.link:hover hr{border-color: #777;}
	div.header hr{position:absolute; z-index: 1;border:1px solid #0067E6;}
		div.header > div > div.top_left{background: transparent url("top_left.png") no-repeat center; width: 381px; height: 355px; position: absolute; left: 145px; top: 12px; z-index: 0;}
		div.header > div > div.top_right{background: transparent url("top_right.png") no-repeat center; width: 238px; height: 336px; position: absolute; right: 225px; top: 23px; z-index: 0; }
		/* барбекю */
		div.header > div > div.bb > hr{top:68px; left: 245px; width:125px;height:0px; -moz-transform:rotate(6deg);-ms-transform: rotate(6deg);-webkit-transform: rotate(6deg);-o-transform: rotate(6deg);transform: rotate(6deg);}
		div.header > div > div.bb > a{top:42px; left: 12px;}
		/* камины */
		div.header > div > div.k > hr{top:139px; left: 170px; width:124px;height:0px; -moz-transform:rotate(10deg);-ms-transform: rotate(10deg);-webkit-transform: rotate(10deg);-o-transform: rotate(10deg);transform: rotate(10deg);}
		div.header > div > div.k > a{top:111px; left: 63px;}
		/* отопительно-варочные */
		div.header > div > div.ovp > hr{top:256px;left: 193px;width:256px;height:0px; -moz-transform:rotate(17deg);-ms-transform: rotate(17deg);-webkit-transform: rotate(17deg);-o-transform: rotate(17deg);transform: rotate(17deg);}
		div.header > div > div.ovp > a{top:178px; left: 33px;}
		/* русские */
		div.header > div > div.rp > hr{top:61px;right: 164px;width:135px;height:0px; -moz-transform:rotate(-10deg);-ms-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);}
		div.header > div > div.rp > a{top:32px;right: 56px;}
		/* отопительные */
		div.header > div > div.op > hr{top:141px;right: 208px;width:85px;height:0px; -moz-transform:rotate(-10deg);-ms-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);-o-transform: rotate(-10deg);transform: rotate(-10deg);}
		div.header > div > div.op > a{top:116px;right: 28px;}
		/* банные */
		div.header > div > div.bp > hr{top:229px;right: 159px;width:87px;height:0px; -moz-transform:rotate(-12deg);-ms-transform: rotate(-12deg);-webkit-transform: rotate(-12deg);-o-transform: rotate(-12deg);transform: rotate(-12deg);}
		div.header > div > div.bp > a{top:202px;right: 61px;}
		/* каминопечи */
		div.header > div > div.kp > hr{top:312px;right: 190px;width:122px;height:0px; -moz-transform:rotate(-9deg);-ms-transform: rotate(-9deg);-webkit-transform: rotate(-9deg);-o-transform: rotate(-9deg);transform: rotate(-9deg);}
		div.header > div > div.kp > a{top:285px;right: 32px;}

/* основной контент */
div#content{max-width: 1300px; margin: 0 auto;}

/* унив. стили */
table.x1{border-spacing: 0;border-collapse: collapse;}
table.x1 thead tr td{border: 1px solid #777; background: #999; color: #f5f5f5; padding: 10px 15px;text-align: center; text-shadow: 1px 1px 1px #333;}
	table.x1 tbody tr td{border: 1px solid #ccc; color: #333; padding: 4px;}

/* контакты */
h3.phones{padding-left: 10px; background: transparent url('icons/phones.png') left center no-repeat; line-height: 28px; width: 200px; margin: 0 auto;}
h3.mail{padding-left: 10px; background: transparent url('icons/mail.png') left center no-repeat; line-height: 28px; width: 270px; margin: 0 auto;}
h3.instagram{padding-left: 10px; background: transparent url('icons/instagram.png') left center no-repeat; line-height: 35px; width: 210px; margin: 0 auto;}
h3.pikabu{padding-left: 10px; background: transparent url('icons/pikabu.png') left center no-repeat; line-height: 35px; width: 210px; margin: 0 auto;}
h3.telegram{padding-left: 10px; background: transparent url('icons/telegram.png') left center no-repeat; line-height: 40px; width: 200px; margin: 0 auto;}
h3.max{padding-left: 10px; background: transparent url('icons/max.png') left center no-repeat; line-height: 40px; width: 200px; margin: 0 auto;}
h3.dzen{padding-left: 10px; background: transparent url('icons/dzen.png') left center no-repeat; line-height: 40px; width: 200px; margin: 0 auto;}
h3.vk{padding-left: 10px; background: transparent url('icons/vk.png') left center no-repeat; line-height: 40px; width: 200px; margin: 0 auto;}
h3.rutube{padding-left: 10px; background: transparent url('icons/rutube.png') left center no-repeat; line-height: 40px; width: 200px; margin: 0 auto;}


/* изображения в заказах */
a.zakaz{border: 5px solid #ccc; display: block;}
	a.zakaz > img{width: 100%;}

body{
	color: #333333;
	line-height: 1.166;	
	/*background: #703e01;*/
}

/* nav */
div.nav{
	margin: 0 auto;
	width: 1120px;
}
div.nav2{
	margin: 0 auto;
	width: 620px;
}
ul.nav{margin: 7px 0 0 0; clear: both;text-align: center;}
ul.nav > li{position: relative; display: inline-block; margin: -2px -2px 10px -2px;}
ul.nav > li > span{
	display: block;
	-webkit-transform: skew(-20deg);
	-moz-transform: skew(-20deg);
	-o-transform: skew(-20deg);
	transform: skew(-20deg);
	border-left:1px solid #693304;
	background: #00a3e8;
	transition: background ease .2s;
	font-weight: bold;
}
ul.nav > li:last-child > span{border-right:1px solid #693304;}
	ul.nav > li > span:hover {background: #f4a351;}
		ul.nav > li > span > a {
			text-decoration: none;
			display: block;
			line-height: 40px;
			padding: 0 20px;
			color: #fff;
			-webkit-transform: skew(20deg);
			-moz-transform: skew(20deg);
			-o-transform: skew(20deg);
			transform: skew(20deg);
		}

/* ?????????? ???? */
ul.sub-nav{
    position: absolute;
    left: -9999px;
    list-style:none;
    padding:0;
	min-width: 220px; /* ??????????? ?????? ?????????? */
    width: auto !important; /* ??? ????????? IE6 */
    width: 220px; /* ??? IE6 */
	z-index: 3;
}
	ul.sub-nav > li{
		white-space: nowrap;
		min-width: 255px; /* ??????????? ?????? ?????????? */
		width: auto !important; /* ??? ????????? IE6 */
		width: 255px; /* ??? IE6 */
	}
		ul.sub-nav > li > a{
			text-decoration: none;
			display: block;
			position: relative;
			line-height: 40px;
			padding: 0 20px;
			color: #fff;
			font-size: 90%;
			margin: 2px;
			transition: background ease .2s;
			background: #00a3e8;
		}
			ul.sub-nav > li > a:hover {
				background: #f4a351;
			}

/* make submenu reappear */
ul.nav > li:hover .sub-nav {
    left: 0;
}
/* triangle
.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #8c4c00;
    position: absolute;
    margin-top: 5px;
    left: -9999px;
}
.nav li:hover .triangle {
    left: 15px;
}*/

div.paging{
	text-align: center;
	width: 100%;
	padding: 20px 0;
}
		div.paging > a{background: #efe3af; text-align: center; color: #000; padding: 10px; font-weight: 700;text-decoration: none;}
		div.paging > a:hover{color: #fff; text-decoration: none; background: #00a3e8;}
p.img{width: 980px; margin: 0 auto; display: block;clear: both;}
	p.img.p{width: 980px;}
	p.img.k{width: 518px;}
	p.img.b{width: 1150px;}
a.img{float: left; margin: 5px 0 0 5px; display: block; position: relative; height: 330px; border: 3px solid #99ccff; line-height: 1.2em; text-align: center; }
	a.img > span.name{font-size: 149.9%; display: block; margin-top: 5px;}
	a.img > span.descr{display: block; margin: 5px 15px 0 0; text-align: right;}
	a.img.o{width: 220px; background: #e1e1e1 url('pictures/o.png') bottom 15px center no-repeat;}
	a.img.ov{width: 220px; background: #e1e1e1 url('pictures/ov.png') bottom 5px center no-repeat;}
	a.img.r{width: 240px; background: #e1e1e1 url('pictures/r.png') bottom 15px center no-repeat;}
	a.img.bp{width: 240px; background: #e1e1e1 url('pictures/bp.png') bottom 15px center no-repeat;}
	a.img.k{width: 220px; background: #e1e1e1 url('pictures/k.png') bottom 5px center no-repeat;}
	a.img.kp{width: 240px; background: #e1e1e1 url('pictures/kp.png') bottom 10px center no-repeat;}
	a.img.bsb{width: 400px; background: #e1e1e1 url('pictures/bsb.png') bottom 2px center no-repeat;}
	a.img.bskb{width: 300px; background: #e1e1e1 url('pictures/bskb.png') bottom 10px center no-repeat;}
	a.img.bkb{width: 400px; background: #e1e1e1 url('pictures/bkb.png') bottom 2px center no-repeat;}
	
	a.img:hover{text-decoration: none; opacity: .9;filter:Alpha(Opacity=90); border-color: #efe3af;}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 8px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 8px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 8px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 8px;
}

/*************** list tag styles ***************/

ul{
 list-style-type: square;
 text-align:left;

 
}

ul ul{
 list-style-type: disc;

}

ul ul ul{
 list-style-type: none;

}

li {list-style-type: none;
}




/*pictures*/
.pictures {
width: 300px;
height:  350px;
}

.pictures2 {
width: 600px;
height: 450px; 
text-align:center;
border: 5px solid #FFD1BB;
}

.pictures3 {
width: 300px;
/*height: 280px; */
}

.pictures4 {
width: 270px;
height: 200px; 
}

.pictures5 {
width: 450px;
height: 500px; 
}

.pictures6 {
width: 250px;
height:  350px; }

.pictures7 {
width: 330px;
height:  280px; 
}

.pictures8 {
width: 450px;
height:  280px; 
}

.pictures9 {
width: 230px;
height:  280px; 
}

.pictures10 {
width: 400px;
height:  350px; 
}
.pictures11 {
width: 450px;
height:  500px; 
}
.pictures12 {
width: 400px;
height:  580px;
border: 5px solid #FFD1BB; 
}
.pictures13 {
width: 300px;
height:  430px; 
}

/************ search styles *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}





/*************** story styles ******************/

.story {

padding: 10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
	font-size: 100%;
	text-align: justify;
	color:#000;
	
}

.story2 {
padding: 10px 10px 10px 10px;
	margin:0px 0px 0px 0px;
	font-size: 100%;
	text-align: center;
	color:#000;
}

.story3 {
		font-size: 50%;
	text-align: justify;
	color:#fff;}
	
.story4 {padding: 10px 10px 10px 10px;
		font-size: 100%;
	text-align: center;
	
	color:#703e01;}


	
.story p {margin: 10px;}

.buy {color:#8C4C00;
font-weight: bold;}

.story h1{
	font-size: 100%;
	color:#fff;
	}

.story h2{
	font-size: 199.9%;
	color:#2B7ABD;
	text-align: center;
	font-variant: small-caps;
}

.story h3{
	font-size: 104.9%;
	color:#000;
		text-align: center;}
		
.story h4{
	font-size: 120%;
	color:#000;
		text-align: center;
		text-decoration: underline;
		margin: 20px}
		
.story h5{
	font-size: 120%;
	color:#000;
		text-align: center;
		text-decoration: underline;
		margin: 20px}
.story h6{
	font-size: 120%;
	color:#000;
		text-align: center;
		text-decoration: underline;
		margin: 20px}
.story h7{
font-size: 120%;
	color:#000;
		text-align: center;
		text-decoration: underline;
		margin: 20px}
.story h8{
	font-size: 120%;
	color:#000;
		text-align: center;
		text-decoration: underline;
		margin: 20px}
.story h9{
	font-size: 70%;
	color:#fff;
	}	
		
.story a {color:#000;}
/*.story a:hover {color: orange;}*/




.left_menu h3{
	color:#fce700;
	display:block;
	font-size:16px;
	font-style: italic;
	padding: 20px 10px 20px 10px;
	text-align: center;
}

.left_link {
	color: #fff;
	padding: 0px 10px 0px 10px;
	text-align: center;
	
		
		}
.left_link a{
color: #fff;
display:block;

padding: 5px}
.left_link a:hover{color: orange;}



/************** siteInfo styles ****************/

#siteInfo{
	position: absolute;
	color: #fff;
	width: 100%;
	background-color: #4C453E;
	font:  80% Arial,sans-serif;
	padding: 10px 0;
	text-align: center;
	
}
#siteInfo a{ color: #fff;}
#siteInfo a:hover {color: orange;}

div.table{display: table;border: 4px solid #dadada; padding: 5px;}
	div.table > a{float: left; margin: 5px 0 0 5px;}

.tablestyle {margin: auto;
width:100%;
font-size: 100%;
	border-spacing: 20px 20px; /* Расстояние между ячейками */
	margin-bottom:10px;  
		border: 4px solid #dadada; /* Рамка вокруг таблицы */
	border-radius: 10px;
}

.tablestyle2 {
color: #FF6626; font-weight: bold; font-size: 149.9%;}

.tablestyle3 {
	width:100%;
	font-size: 100%;
	border-spacing: 10px; /* Расстояние между ячейками */
	margin:10px;  
		
}

.tablestyle td { text-align:center;
valign:middle;}

.word { 
    width: 420px; 
    text-align:left;
 
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    }
        
.contact{
	position: fixed;
	z-index: 3;
    color: #fff;
    text-align: right width: 170px;
    background-color: #353535;
    font-size: 80%;
    padding: 0px 10px;
    border-radius: 10px;
    border: 2px solid #1A1A1A;
    opacity: 0.9;
    left: 2px;
    top: 3px;
}
	
.contact ul {text-align:center;
padding: 5px 0px 5px 0px;}
	
.contact ul h2{font-size:100%;
	font-style: italic;
	padding: 5px 0px 5px 0px;
color: #FFB863;}

 .contact a {color:#fff;}
 .contact a:hover{color: orange;}
 
 div#mobileOpen{display: none; width: 60px; height: 55px; background: transparent url('mobile.png') center no-repeat; text-indent: -9999px; background-size: contain; margin: 1%; opacity: .9;filter:Alpha(Opacity=90);}
	div#mobileOpen:hover{cursor: pointer; opacity: 1;filter:Alpha(Opacity=100);}
div#mobileClose{display: none; width: 100%; text-align: center; line-height: 40px; background-color: #dbdbdb;}
	div#mobileClose:hover, div#mobileClose:active{cursor: pointer; background-color: #f0f0f0;}
 /* экран меньше 1150px */
@media all and (max-width: 1150px) {
	div.nav{width: 100%;}
	div.nav2{width: 100%;}
	div.header > div{width: 100%;}
	div.header > div > img{width: 100%;}
	div.nav > ul.nav > li:first-child{display: none;}
	ul.nav{margin: 10px;}
		ul.nav > li{margin-top: 2px;}
	.tablestyle td{float: left;}
	.tablestyle2{padding: 15px; width: 100%;}
	
	div#content{width: 100%;}
	.story{width: 96%; padding: 2%;}
	.story2{width: 96%; padding: 2%;}
	.story3{width: 96%; padding: 2%;}
	p.img{width: 100% !important;}
	a.img{width: 48% !important; margin: 1% 0 0 1%;}
	
	div.paging > a{display: block; margin-bottom: 10px;}
	
	#siteInfo{width: 98%; padding: 1%;}
}

 /* экран меньше 500px */
@media all and (max-width: 500px) {
	div#mobileOpen{display: block;}
	.contact{position: relative; left: 0; top: 0; border: 0; background-color: #fff; color: #333; z-index: 1;}
	div.header > p{font-size: 69.9%;}
	div.header > div{display: none;}
	div.header > a.logo{max-width: 100%;}
	a.img{width: 98% !important;}
	.tablestyle, .tablestyle3{border-spacing: 0;}
	.tablestyle3 td{float: left;}
	
	div.nav{position: absolute; top: 0; left: 0; z-index: 2;}
	div.nav > ul.nav{display: none;}
	div.nav > ul.nav > li:first-child{display: block;}
		ul.nav{margin: 0;}
		ul.nav > li{display: block; margin: 0;}
			ul.nav > li > span{-webkit-transform: skew(0);-moz-transform: skew(0);-o-transform: skew(0);transform: skew(0);border-top: 1px solid #333; border-right: 0 !important; border-left: 0 !important;}
				ul.nav > li > span > a{-webkit-transform: skew(0);-moz-transform: skew(0);-o-transform: skew(0);transform: skew(0);}
		ul.sub-nav{position: relative; left: 0;min-width: 0;}
			ul.sub-nav > li{min-width: 0;}
				ul.sub-nav > li > a{margin: 0; line-height: 27px; font-size: 74.9%; border-top: 1px solid #2AB9F5;}
	.pictures,.pictures2,.pictures3,.pictures4,.pictures5,.pictures6,.pictures7,.pictures8,.pictures9,.pictures10,.pictures11,.pictures12,.pictures13 { width:100%; height: auto; border: 0;}
}
/* экран больше 500px */
@media all and (min-width: 500px) {
	div#mobileOpen, div#mobileClose{display: none;}
}