/*

квадраты уходят с лева на право

@color-red: #c40202;

*/

@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic);

*{
	padding:0px;
	margin:0px;
	font-family: 'Pontano Sans', sans-serif;
}

body{text-align:center;}

.hidden{display:none;}	
.nato_sans{font-family: 'Noto Sans', sans-serif;}
.pontano {font-family: 'Pontano Sans', sans-serif;}

nav,header,footer,main{display:block;}
#main{
	margin-top:5px;	
		}
	
#page_title{font-size:38px;			
			color:#c40202;
			padding-top:20px;
			z-index: 0;
			position:relative;
			margin:0 0 -5px 0;
			}
	
#page_title a{color:#c40202;}
#page_title span{
			display: block;
			margin-bottom: -5px;}

nav{
	background-color:#fff;
	border-top:3px solid #c40202;
	margin:0 0 10px 0;
	position: relative;
	}
				
nav ul{list-style-type:none;}
	
nav ul li{	display:inline-block;
		padding:8px 25px 15px 28px;
		font-size:16px;
		}	
		
a{
	text-decoration:none;
	color:#000;}
	a:hover{color:#c40202;}

footer{
    position:relative;
	left:50%;
	margin-left: -150px;
	padding: 20px 10px 0px 3px;
	font-size:14px;
	width: 300px;
	z-index: 0;
	}
footer span{font-size:12px;}




.arrow{
	position:fixed ;
	z-index:50;
	height:30px;
	width:14px;
	left:50%;
	cursor:pointer;
	background-size:100% 100%!important;	
	top:348px;
	}
	.arrow:hover{
		height:36px;
		width:16px;
		top:345px;
	}
	
	
#arrow_l,.arrow_l{
	background: url("../img/arrow_l.png") no-repeat;	
	margin-left: -310px;
	}
#arrow_r,.arrow_r{
	background: url("../img/arrow_r.png") no-repeat;	
	margin-left: 300px;
	}
.arrow_r{margin-left: 400px;}	
.arrow_l{margin-left: -410px;}
.arrow a{display:block;height: 35px;width: 15px;}	
.arrow_l.a01, .arrow_r.a45{display:none;}
	
	
#film_frame{
	border:0px solid black;
	width:530px;
	height:478px;
	position:relative;
	left:50%;
	margin-left: -262px;
	background-size: 100%;
	z-index:50;
	overflow:hidden;
}	
.film{
	border:0px solid black;
	width:530px;
	height:478px;
	position:absolute;
	background-size: 100%;
	z-index:50;
	top:0px;
	}
#film1{
		background: url("../img/film1.jpg") no-repeat;
		left:0px;
		}
#film2{
		background: url("../img/film2.jpg") no-repeat;
		left:530px;
		}
#film3{
		background: url("../img/film3.jpg") no-repeat;
		left:1060px;
		}
		
#preview{
		background: url("../img/loading.gif") no-repeat;
		background-position: center 185px;
		//background-size: 200px 200px;
		
		
		}		
		
.film_wrap{
	border:0px solid black;
	width:530px;
	height:478px;
	position:absolute;
	left:50%;
	margin-left: -260px;
	z-index:100;
	}	
.film_wrap  .row{
		border:0px solid green;
		width:530px;
		height:100px;
		position:relative;
		margin:15px 0px 15px 7px ;
}
.film_wrap .row div a{
		color:#fff;display: block;
		height: 75px;
		padding-top: 20px;
		//font-weight:bold;
		}
.film_wrap .row div{
	border:0px solid red;
	width:96px;
	height:96px;
	float:left;	
	margin-right:1px;
	color:rgba(0,0,0,0.0);
	opacity: 0.0;
	
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	
	
	}
.film_wrap .row div:hover{
			background-color: rgba(0,0,0,0.8);
			cursor:pointer;
			border:1px solid #c40202;
			color:#fff;
			opacity: 1	;
			}		
			
.film_wrap .row:nth-child(1) div{	
				height:97px;}

#film_wrap_3 .row div:nth-child(4){margin-left:-2px;}				
				
				
			
.film_wrap .row div span{
			margin-top:8px;
			//margin-top:-10px;
			display:block;
			font-size:14px;
			font-family: 'Noto Sans', sans-serif;
			}	
.film_wrap .row:nth-child(1){margin:17px 0px 15px 7px ;}		
.film_wrap .row:nth-child(3){margin:15px 0px 13px 7px ;}	
.film_wrap .row:nth-child(4){margin:14px 0px 0px 7px ;}	
.film_wrap .row div:nth-child(1){margin-right:8px;
								margin-left:-2px;}	
.film_wrap .row div:nth-child(2){margin-right:6px;}	
.film_wrap .row div:nth-child(3){margin-right:7px;}
.film_wrap .row div:nth-child(4){margin-right:7px;}
.film_wrap .row{border:0px solid green;}
.film_wrap .row div{border:0px solid red;}

/*full & half view */

#artist_title{
		padding:10px 0 5px;
		
		color:#c40202;
		font-size:24px;
		}
		
#artist_title img{height:14px;margin:0 25px;}
#artist_title img:hover{height:16px:margin:-2px 25px 0;}
		
#thumbs{
		margin-top:15px;
		width:700px;
		position:relative;
		left:50%;
		margin-left: -350px;
		z-index:5;
		min-height:200px;
		visibility:hidden;
			}

.img_prev{
			width:140px;
			height:200px;
			float:left;
			text-align:center;
			vertical-align:middle;}

.img_prev img{
		cursor:pointer;
		margin:2px;
		}
.img_prev img:hover{
		border:1px solid #c40202;
		margin:0px;
		}

#img_full img{cursor:pointer;}		
		
#sub_menu ul {padding:5px;}		
#sub_menu li {
		list-style-type:none; 
		display: inline-block;
		padding: 0px 10px;
		line-height:12px;
		cursor:pointer;
		font-size:12px;
		}		
#sub_menu li:hover{color:#c40202;}
#sub_menu li:nth-child(2){border-right:1px solid black;}
#sub_menu li:nth-child(1){border-right:1px solid black;}

#img_full{
		width: 700px;
		left: 50%;
		margin-left: -350px;
		position: relative;
	
		
		}
#img_full img{width:auto;	height:450px;
		}

#social .fb-share-button{margin-left: 585px;}

#artic {height:300px;}

article {  
		left: 50%;
		margin-left: ;
		margin:0px 0px 5px -300px;
		position: relative;
		width:600px;
		-webkit-column-count:2;  
		-moz-column-count:2;  
		column-count:2;  
	
		-webkit-column-gap: 30px;  
		-moz-column-gap: 30px;  
		column-gap: 30px;  

}

#proj {
	text-align:left;
	left: 50%;

	margin-left: -233px;
	position: relative;
	width:500px;
	} 

#contacts #proj{margin-left: -210px;}
	
.contacts{height:300px;}	


#fullscreen_Ico{
		width:15px;
		height:15px;
		position:absolute;
		left: 50%;
		top:3px;
		background: url("../img/ico.png") no-repeat;
		background-position:0px -70px;
		opacity:0.65;
		cursor:pointer;
}

#fullscreen_Ico:hover{opacity:1;}

#fullscreen{
	position:absolute;
	top:0px;
	z-index:100;
	width:100%;
	height:100%;
	background-color:rgba( 0, 0, 0, 1);
	display:none;
	background: url("../img/loading_black.gif") 50% 50% no-repeat transparent;
	background-color:rgba( 0, 0, 0, 1);
	left: 0px;
	}
	
#fullscreen #img{height:100%;cursor:pointer;}

#fullscreen #tips{
			position:absolute;
			left:-170px;
			top:100%;
			margin-top:-70px;
			opacity:0.1;
			color:#fff;
			width:200px;
			padding:5px ; 
			font-size:12px;
			line-height:14px;
			}
		#fullscreen #tips:hover{	
			opacity:1;	
		}
#fullscreen #tips img{float:right; cursor:pointer;height:36px;}
	
#fullscreen_Out	{
			position:absolute;
			top:0px;
			left:100%;
			margin-left:-35px;
			width:36px;
			height:36px;
			opacity:0.2;
			cursor:pointer;
			background: url("../img/cancel.png") no-repeat;
			background-size:contain;
			}
		#fullscreen_Out:hover{opacity:1;}