@import url(//fonts.googleapis.com/css?family=Roboto:300,500&subset=latin,cyrillic);

/* !RESET */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,h1,h2,h3,h4,h5,h6,p{box-sizing:border-box;margin:0;padding:0;border:0;outline:0;}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}


/* ROOT Roboto, */

	body
	{
		background: #fff;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 14px;
		font-weight: 300;
		max-width: 1920px;
		margin: 0 auto;
	}

	.w
	{
		margin: 0 auto;
		padding: 0 10px;
		min-width: 300px;
		max-width: 1200px;
		position: relative;
		font-weight: 300;
	}
	
	#txt
	{
		font-weight: 300;
	}
	
	h1
	{
		font-size: 24px;
		font-weight: 300;
		padding: 0 0 20px;
	}
	h1.crumbs
	{
		font-size: 16px;
	}

	h2
	{
		font-size: 28px;
		font-weight: 300;
		padding: 0 0 20px;
	}

	h3
	{
		padding: 0 0 10px;
		font-size: 26px;
		font-weight: 300;
	}

	h4
	{
		padding: 5px 0 10px;
		font-size: 28px;
		font-weight: 300;
		text-align: center;
	}
							
	.cls
	{
		clear: both;
		margin: 0;
		padding: 0;
		border: 0;
	}

	a:link, a:visited
	{
		color: #7b7b7b;
		text-decoration: underline;
	}
	a:hover
	{
		color: #333;
		text-decoration: none;
	}
	
	
/* TopSlide */

	#topslide,
	#topslide > div
	{
		width: 100%;
		height: 400px;
		overflow: hidden;
		position: relative;
	}
	#pg-home #topslide,
	#pg-home #topslide > div
	{
		height: 100vh;
	}
	
		#topslide > div
		{
			background: 50% 50% no-repeat;
			background-size: cover;
			width: 100%;			
			position: relative;
		}
		
			#topslide > div .w
			{
				height: 400px;
			}
			#pg-home #topslide > div .w
			{
				height: 100vh;
			}
		
			#pg-home #topslide > div span
			{
				background: rgba(0,0,0, .2);
				min-width: 300px;
				max-width: 400px;
				position: absolute;
				left: 0;
				bottom: 0;
				margin: 15px 0;
				padding: 15px;
				color: #fff;
				font-size: 15px;
				line-height: 115%;
			}
			#topslide > div span.algn1
			{
				left: auto;
				right: 0;
				text-align: right;
			}
			#topslide > div span.black1
			{
				background: rgba(255,255,255, .5);
				color: #000;
			}
		
				#topslide > div span h5
				{
					font-size: 150%;
					margin-bottom: 10px;
				}
				
								
		#topslide.quote > div span.box
		{
			position: absolute;
			bottom: 0px;
			left: 50px;
			opacity: 0;
			transition: all .5s;
			float: left;
			width: 100%;
		}
		#topslide.quote > div.visible span.box
		{
			left: 15px;
			opacity: 1;		
		}
		
			span.box > img
			{
				position: relative;
				display: block;
				height: 280px;
				float: left;
				z-index: 1;
			}
			
			span.box > span
			{
				background: rgba(0,0,0, .3);
				padding: 10px 15px 10px 120px;
				margin-left: -100px;
				color: #fff;
				position: relative;
				z-index: 0;
				position: absolute;
				bottom: 0;
			}
		

/* Top menu */

	#theader
	{
		margin-bottom: 20px;
	}
	
	#topmenu
	{
		background: rgba(0,0,0, .8);
		background: rgba(255,255,255, .9);
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
	}
	
		#topmenu #logo
		{
			background: url(../img/logo.png) 50% 50% no-repeat;
			background-size: 100% auto;
			height: 90px;
			width: 90px;
			display: block;
			margin: 10px 15px 10px 5px;
			float: left;
		}
		
		#topmenu #tbs_1
		{
			height: 110px;
			display: table-cell;
			vertical-align: middle;
		}
		
			#topmenu #tbs_1
			{
				
			}
		
			#topmenu #tbs_1 li
			{
				font-size: 16px;
				float: left;
				padding: 5px 10px 0;
			}
			
				#topmenu #tbs_1 li a
				{
					color: #333;
					text-decoration: none;
					padding-bottom: 5px;
					border-bottom: 1px solid rgba(70, 130, 180, 0);
					transition: all .3s;
					display: block;
				}
				
				#topmenu #tbs_1 li a:hover
				{
					border-bottom-color: rgba(70, 130, 180, 1);
				}
		
/* Burger */

.artclose {
	height: 30px;
	width: 33px;
	cursor: pointer;
	display: none;
}

	.burgx, .burgx2, .burgx3 {
		margin-top: 3px;
		background: #201610;
		width: 33px;
		height: 4px;
		position: absolute;
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
	}
	.burgx2 {
		margin-top: 13px;
	}
	.burgx3 {
		margin-top: 23px;
 
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
	}

		
/* Left menu */
	
	#tcontent td
	{
		vertical-align: top;
	}
	
		.tright
		{
			margin-left: 240px;
			padding-left: 20px;
			border-left: 1px solid #ececec;
			float: left;
			min-height: 1050px;
			overflow: hidden;
		}
		
		.tleft
		{
			position: absolute;
			left: 0;
			top: 0;
			width: 250px;
		}
		
		#tbs_2
		{
			width: 250px;
			margin-bottom: 40px;
			text-align: right;
		}
		
		#tbs_2 li
		{
			display: block;
			padding: 15px 0;
			text-align: right;
			position: relative;
			clear: both;
		}
			
		#tbs_2 li a
		{
			color: #000;
			font-weight: 300;
			font-size: 16px;
			border: 1px solid rgba(70, 130, 180, .2);
			border-right: 0;
			text-decoration: none;			
			padding: 10px 10px 10px 10px;
			transition: all .5s;
			float: right;
		}		
		#tbs_2 li a:hover
		{
			padding: 10px 20px 10px 20px;
		}
		#tbs_2 li.lsel a
		{
			padding: 10px 10px 10px 20px;
			background: rgba(70, 130, 180, .5);
			height: 40px;
			color: #fff;
			border-color: transparent;
		}
		#tbs_2 li.lsel::after
		{
			content:''; 
			border-top: 19px solid transparent;
			border-left: 10px solid #A2C0D9;
			border-bottom: 20px solid transparent;     		
			position: absolute;
			right: -10px; 
			top: 15px;
		}
			
			
		#left
		{
			width: 240px;
			margin: 0 auto;
			font-weight: 300;
			font-size: 13px;
			text-align: center;
		}
		
			#left a
			{
				display: block;
				padding: 10px 0;
				transition: all .5s;
				opacity: .8;
			}
			#left a:hover
			{
				opacity: 1;
			}
			
			#left img
			{
				display: block;
				max-width: 240px;
				margin: 0 auto 10px;
			}
			
		
	
/* Bottom */	

	#subscribe
	{
		background: #ececec;
		background: #d3d7dc;
		padding: 10px 0;
		position: relative;
    	z-index: 2;
	}
	
		#subscribe .w > div
		{
			padding-left: 450px;
			z-index: 9;
			position: relative;
		}
		
		#subscribe input,
		#subscribe .skey
		{
			width: 180px;
			padding: 10px;
			border: 1px solid rgba(0,0,0, .2);
			margin: 0 10px 10px 0;
			float: left;
		}
		
		#subscribe .skey
		{
			width: 120px;
			text-decoration: none;
			background: #46535d;
			border-radius: 3px;
			text-align: center;
			color: #fff;
			border: 0;
		}
		#subscribe .skey:hover
		{
			transition: all 0.5s;
			background: #343e45;
		}
		
		.hd
		{
			padding: 0 0 10px;
		}
		
	#bottom
	{
		background: url(../img/noise.png) #46535d;
		color: #fff;
		colo;
		position: relative;
   	z-index: 3;		
	}
	
	#bottom #c
	{
		padding: 10px 0 10px 450px;
		position: relative;
		z-index: 1;
	}
	
		#grechanovsky
		{
			background: url(../img/grechanovsky.png) 50% 100% no-repeat;
			background-size: 100% auto;
			width: 420px;
			height: 165px;
			display: block;
			position: absolute;
			left: 20px;
			bottom: 0;	
		}
	
	#subscribe .w,
	#bottom .w
	{
		
	}	
	
/* BlogSlider */	
	
	#blog
	{
		
		background: #fff url(../img/pen.jpg) 50% 50% repeat fixed;
		background2: #f7f7f7;
		padding: 10px 0 40px;
		margin-top: 20px;
		position: relative;
   	 z-index: 1;
	}
	
	#blogslider { height: 200px; width: 100%; padding: 0 50px; overflow: hidden; }			
	.jcarousel-clip { margin: 0 auto; width: 100%; height: 200px; display: block; overflow: hidden; }
	
		.jcarousel-prev, .jcarousel-next { transition: all 1s; opacity: .5; background: transparent url(../img/arrow.png) 0 0 no-repeat; display: block; height: 45px; width: 32px; position: absolute; top: 50%; margin-top: -22px; text-indent: -9999px; cursor: pointer; }

		.jcarousel-prev { background-position: 0 0; left: 5px; } 
		.jcarousel-next { background-position: 100% 0; right: 5px; }
		.jcarousel-prev:hover, 
		.jcarousel-next:hover { opacity: 1; transition: all 1s; } 

		.jcarousel-prev-disabled, .jcarousel-next-disabled
		{
			display: none !important;
		}
		
	#blogslider li
	{
		float: left;
		width: 300px;
		height: 200px;
	}
	
		#blogslider li a
		{
			background: 50% 50% no-repeat;
			background-size: 100% auto;
			display: block;
			width: 290px;
			height: 190px;
			overflow: hidden;
			margin: 5px 5px;
			position: relative;
		}
		
			#blogslider li a p
			{
				background: rgba(0,0,0, .7);
				padding: 5px 7px;
				display: block;
				width: 290px;
				color: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				font-size: 12px;
			}
			
				#blogslider li a b
				{
					display: block;
					font-size: 120%;
					margin-bottom: 5px;
					font-weight: 300;
				}
	
						
/* Blog */	

	.date
	{
		font-size: 13px;
		color: #555;
		display: block;
		float: none;
		margin-bottom: 10px;
	}

	.blogbic
	{
		display: block;
		max-width: 700px;
		margin-bottom: 10px;
		width: 100%;
	}

	.blogmpic
	{
		width: 200px;
		margin-right: 10px;
	}

	.news td
	{
		padding-bottom: 20px !important;
	}
	
	.news P {
    	color: #333;
	}	

	
/* Gallery */	

	.block li
	{
		float: left;
		width: 33.33%;
		min-width: 280px;
		height: 280px;
	}
	
	.block li a
	{
		display: block;
		width: 260px;
		margin: 10px auto;
		transition: all .5s;
		opacity: .9;
	}	
	.block li a:hover
	{
		opacity: 1;
	}

	.block li a img
	{
		display: block;
		width: 260px;
		height: 150px;
		margin: 0 auto 10px;
	}
	
	.img li a
	{
		float: left;
		margin: 0 5px 5px 0;
		transition: all .5s;
		opacity: .9;
	}
	.img li a:hover
	{
		opacity: 1;
	}
	
	
	.tright img
	{
		
	}
	
@media (max-width: 980px)
{
	#form_frm
	{
		max-width: 300px;
		margin: 0 auto;
		text-align: center;
	}
	
	.hd
	{
		text-align: center;
	}
	
	#subscribe .w > div input
	{
		width: 100%;
		max-width: 300px;
		float: none;
	}
	
	#subscribe .skey
	{
		margin: 0 auto;
		float: none;
		display: block;
	}
	
	#blogslider { padding: 0 22px; }
	.jcarousel-prev { left: -7px; } 
	.jcarousel-next { right: -7px; }
		
	.block li
	{
		width: 50%;
	}
	
}	
	
@media (max-width: 700px)
{
	.tright,
	.tleft,
	#left
	{
		padding: 0;
		margin: 0;
		border: 0;
		float: none;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		min-height: 10px;
	}
	
	#tbs_2 li a
	{
		font-size: 14px;
		border: 1px solid rgba(70, 130, 180, .1);
		padding: 10px 15px !important;
		margin-bottom: 1px;
		float: left;
		height: auto !important;
	}		
	#tbs_2 li a:hover
	{
		background: #ececec;		
	}
	#tbs_2 li.lsel a
	{
		background: #000;
		color: #fff;
		border-color: transparent;
	}
	#tbs_2 li.lsel::after
	{
		display: none;
	}
	
	#left
	{
		margin: 20px 0;
	}

	#subscribe .w, 
	#bottom .w 
	{
		width: 100%;
	}
	
	#subscribe .w > div
	{
		width: 300px;
		padding: 10px 0;
		margin: 0 auto 110px;
	}
		
	#bottom #c
	{
		padding: 10px;
		text-align: center;
	}
	
	#grechanovsky
	{
		width: 300px;
		height: 130px;
		left: 50%;
		bottom: auto;
		top: -130px;
		margin-left: -150px;
	}
	
	#tbs_2
	{
		width: 100%;
	}
	
		#tbs_2 li
		{
			float: left;
			clear: none;
			padding: 5px;
		}
		
	#left a
	{
		margin: 0 auto;
		width: 240px;		
	}
	
	.block li
	{
		width: 100%;
	}
	
	#topslide, #topslide > div,
	#topslide > div .w
	{
		height: 450px;
	}
	
	#topslide.quote > div span.box 
	{
		left: 0 !important;
	}
	
	span.box > span
	{
		margin: 0;
		padding: 10px;
		left: 0;
		width: 100%;
		z-index: 9;
	}
}	
	
@media (max-width: 400px)
{
	#topmenu #logo 
	{
		margin: 10px auto;
		float: none;
	}
	
	#pg-home #topslide,
	#pg-home #topslide > div,
	#pg-home #topslide > div .w 
	{
    	height: 100vh;
	}
	
	#topslide, #topslide > div,
	#topslide > div .w
	{
		height: 500px;
		height: 100vh;
	}

	#blogslider { padding: 0 5px; }
	.jcarousel-prev { background-color: #fff; left: 5px; } 
	.jcarousel-next { background-color: #fff; right: 1px; }
	
	#pg-home #topslide > div span
	{
		margin: 0;
	}
	
	.artclose
	{
		display: block;
		position: absolute;
		top: 0;
		left: 10px;
	}

	
	#tbody.open
	{
		overflow: hidden;
	}
	
	#tbody.open #topmenu
	{
		height: 100vh;
		overflow: auto;
	}
	
		#mmenu
		{
			display: none;
		}
		#tbody.open #mmenu
		{
			display: block;
		}
	
		#tbs_1
		{
			width: 300px;
			margin: 10px auto;
			float: none;
			display: block !important;
		}
	
			#topmenu #tbs_1 li
			{
				float: none;
				display: block;
				margin: 15px 0;
				width: 100%;
				text-align: center;
			}
			
			#topmenu #tbs_1 li a
			{
				display: inline;
			}
	
}
	
	
	
	
	
	
	/* !ÑÒÐÀÍÈÖÛ */
.pages {text-align: right; font-size: 15px; display: block; height: 20px; margin: 15px 25px;}
.pages B {padding: 5px 8px; font-weight: normal; font-size: 15px; margin: 0 1px; display: block; float: right;}
.p1:link, .p1:visited {padding: 5px 8px;  color: #4B4B4B; background-color: #FFFFFF; font-size: 15px; margin: 0 1px; display: block; float: right; text-decoration: underline;}
.p1:hover {color: #FFFFFF; background-color: #4B4B4B; text-decoration: none;}
.p2 {color: #FFFFFF; background-color: #4B4B4B; text-decoration: none; margin: 0 1px; display: block; float: right; padding: 5px 15px; }
.pages { float: right; }