@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:700|Roboto+Slab:400,700,300&subset=latin,cyrillic);
@font-face {font-family: 'Geometria-Bold';src: url('../webfonts/2B2269_0_0.eot');src: url('../webfonts/2B2269_0_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/2B2269_0_0.woff') format('woff'),url('../webfonts/2B2269_0_0.ttf') format('truetype');}

* {
	margin: 0;
	padding: 0;
}



html, body {
	height: 100%;
	}

body {
	background: #fff;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

img {
	border: 0;
	}
	
a {
	color: #333;
	text-decoration: none;
	transition: color 0.4s;
	}
	a:hover {
		color: #0096ff;
		transition: color 0.2s;
		}
	a:active {
		transition: none;
		color: #2c2c2c;
		}
	

h1 {
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
	}


.menu, #homepage_menu {
	font-family: 'Roboto Slab', serif;
	}
	
	
#container {
	min-height: 100%;
	margin-bottom: -55px;
	}
	* html #container {
	    height: 100%;
	}
	#container .buffer {
		height: 55px;
		}
	

#footer {
	position: relative;
	width: 100%;
	height: 55px;
	bottom: 0;
	background: #fff;
	font-size: 11px;
	text-transform: uppercase;
	font-family: 'Geometria-Bold', Arial, sans-serif;
	}
	
	#footer .socnets {
		padding: 16px 0 0 55px;
		}
		
	#footer .kd {
		position: absolute;
		top: 24px;
		left: 234px;
		}
	#footer .who {
		position: absolute;
		top: 24px;
		right: 55px;
		}
	
.socnets a, .socnets a .blue {
	display: block;
	width: 24px;
	height: 21px;
	background: url(../img/socnets.png) no-repeat;
	transition: all 0.1s;
	}
	.socnets a {
		float: left;
		margin-right: 20px;
		}
	.socnets a .blue {
		visibility: hidden;
		opacity: 0;
		}
		
	.socnets a:hover .blue {
		visibility: visible;
		opacity: 1;
		}
		
	
	.socnets .vimeo .blue {
		background-position: 0 -22px;
	}
		
	.socnets .instagram {
		background-position: -24px 0;
		}
		.socnets .instagram .blue {
			background-position: -24px -22px;
		}
		
	.socnets .facebook {
		background-position: -50px 0;
		}
		.socnets .facebook .blue {
			background-position: -50px -22px;
		}
	
	
	




#homepage {
	min-height: 655px;
	}
	
#homepage #logo {
		position: absolute;
		width: 80px;
		height: 73px;
		top: 34px;
		left: 55px;
		background-image: url(../img/v.png);
		background-repeat: no-repeat;
		background-size: 80px 73px;
		background-position: center bottom;
		}

#homepage .top_menu {
	position: absolute;
	top: 34px;
	right: 55px;
	font-size: 13px;
	text-transform: uppercase;
	font-family: 'Geometria-Bold', Arial, sans-serif; 
	}
	#homepage .top_menu li {
		float: left;
		margin-left: 20px;
		}
		
#homepage .menu {
	display: none;
	}


#homepage_menu {
	position: absolute;
	top: 170px;
	left: 55px;
	text-transform: uppercase;
	font-weight: bold;
	}
	#homepage_menu ul {
		font-size: 30px;
		margin-left: -6px;
		}
	#homepage_menu ul li {
		position: relative;
		margin: 5px 0;
		}
		#homepage_menu ul li:after {
			content: "";
			display: block;
			width: 0;
			transition: width 5s ease;
		}
	#homepage_menu ul li .data {
		display: none;
		}
	#homepage_menu ul a {
		position: relative;
		text-decoration: none;
		color: #333;
		padding: 0 6px;
		background: #fff;
		background-size: 0 100%;
		background-position: -1px;
		transition: all 0.25s;
		white-space: nowrap;
		}
		
		#homepage_menu ul a .menu_hover {
			position: absolute;
			top: 0;
			left: 0;
			width: auto;
			height: 100%;
			color: #fff;
			background: #0096ff;
			padding: 0 6px;
			overflow: hidden;
			display: none;
			}
			#homepage_menu ul a .menu_hover:active {
				background: #333;
				}
		
		
	#homepage_menu .reel {
		display: block;
		margin-top: 40px;
		width: 240px;
		transition: all 0.2s;
		}
		#homepage_menu .reel .title {
			font-size: 18px;
			background: #fff;
			}
		#homepage_menu .reel video {
			width: 240px;
			margin-bottom: -4px;
			}
			
	#homepage_menu .preloader:after {
		top: 14px;
		position: absolute;
		width: 100%;
		height: 11px;
		background: #0096ff;
	}
			
		
#homepage #pictures {
	position: absolute;
	display: block;
	width: 80%;
	height: 83%;
	top: 77px;
	right: 55px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	}
	#homepage #pictures.top {
		background-position: center top;
		}
	#homepage #pictures.bottom {
		background-position: center bottom;
		}
		
	#homepage #pictures .info {
		position: absolute;
		bottom: 30px;
		right: 30px;
		padding-left: 20px;
		}
		#homepage #pictures .info h1 {
			font-size: 102px;
			line-height: 98px;
			color: #fff;
			margin-bottom: 4px;
			}
		#homepage #pictures .info .description {
			font-family: 'Roboto Slab', serif;
			color: #fff;
			font-size: 28px;
			font-weight: 300;
			text-transform: uppercase;
			text-align: left;
			max-width: 550px;
			}
			
	#homepage #pictures .data {
		display: none;
		}
		
		
		
#intro {
	width: 100%;
	height: 100%;
	top: 0;
	background: #fff;
	z-index: 4;
	}
	#intro .enter {
		display: block;
		width: 100%;
		height: 100%;
		}
	#intro .vostok {
		position: absolute;
		top: 50%;
		margin-top: -45px;
		width: 100%;
		height: 89px;
		background-image: url(../img/vostok.gif);
		background-repeat: no-repeat;
		background-position: center;
		}
	
	#intro .lang {
		position: absolute;
		width: 100%;
		height: 35px;
		left: 0;
		bottom: -86px;
		text-align: center;
		font-family: 'Geometria-Bold', Arial, sans-serif;
		background: url(../img/separate.png) no-repeat center center;
		}
	#intro .lang a {
		line-height: 35px;
		padding: 11px 12px;
		transition: all 0.2s;
		}		
		
		
		
.close_menu {
	display: none;
	}		
		
		
		
		
#header {
	height: 87px;
	}		
	#header .logo {
		position: absolute;
		width: 60px;
		height: 55px;
		top: 20px;
		left: 38px;
		background-image: url(../img/v.png);
		background-repeat: no-repeat;
		background-position: center bottom;
		background-size: 60px 55px;
		}
		#header .logo a {
			position: absolute;
			display: block;
			width: 60px;
			height: 55px;
			}
			
#header .title {
	display: none;
	}
		
.menu {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	}
		
	.menu .tab {
		position: absolute;
		width: 24px;
		height: 20px;
		top: 36px;
		right: 54px;
		cursor: pointer;
		transition: all 0.2s;
		}
		.menu .tab > div {
			position: absolute;
			width: 100%;
			height: 4px;
			border-radius: 4px;
			background: #333;
			}
		.menu .tab .t2 {
			top: 50%;
			margin-top: -2px;
			}
		.menu .tab .t3 {
			bottom: 0;
			}
		
		.menu .tab:hover {
			width: 28px;
			height: 24px;
			margin: -2px -2px 0 0;
			}
		
	.menu .menu_list {
		position: absolute;
		display: none;
		width: 340px;
		font-size: 18px;
		top: 87px;
		right: 0;
	}
		.menu .menu_list a {
			display: block;
			background: #2c2c2c;
			padding: 10px 0 10px 50px;
			color: #fff;
			border-bottom: 1px solid #4e4e4e;
			transition: background 0.2s;
			}
			.menu .menu_list a:hover {
				background: #1b1b1b;
				}
			.menu .menu_list a:active {
				background: #0096ff;
				transition: none;
				}
				
				
	.menu .mobile_menu_head {
		display: none;
		}
			



.tape {
	position: absolute;
	height: 100%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
	}
	.tape li {
		display: inline-block;
		position: relative;
		overflow: hidden;
		white-space: normal;
		height: 100%;
		background: #333;
		margin-right:5px;
		}
	.tape a {
		cursor: move;
		cursor: grab;
	    cursor: -moz-grab;
	    cursor: -webkit-grab;
		}
		.tape a:active { 
		    cursor: grabbing;
		    cursor: -moz-grabbing;
		    cursor: -webkit-grabbing;
		}
	.tape a img {
		transition: opacity 0.3s;
		opacity: 1;
		}
		.tape a:hover img {
			/* opacity: 0.3; */ 
			}
			
#preloader {
	position: absolute;
	top:0;
	width: 0;
	height: 11px;
	background: #0096ff;
	transition: width 1s;
	}
			




#projects {
	position: relative;
	width: 100%;
	min-height: 464px;
	background: #333;
	padding-top: 12px;
	overflow: hidden;
	}
			
#projects .project {
	overflow: hidden;
	position: relative;
	display: block;
	background: #333;
	color: #fff;
	float: left;
	}
	#projects .project .info {
		position: relative;
		height: 260px;
		}
	#projects .project .info .back {
		position: absolute;
		background: #333;
		width: 100%;
		height: 0;
		bottom: 0;
		transition: all 0.4s;
		}
	#projects .project .title {
		position: absolute;
		bottom: 4px;
		margin: 0 12px;
		overflow: hidden;
		}
		#projects .project h1 {
			font-size: 33px;
			line-height: 33px;
			margin-bottom: 8px;
			word-wrap: break-word;
			}
			
	#projects .project .description {
		letter-spacing: 0.01em;
		overflow: hidden;
		height: 0;
		color: #333;
		font-family: 'Roboto Slab', serif;
		font-weight: 300;
		font-size: 28px;
		text-transform: uppercase;
		letter-spacing: -1px;
		visibility: hidden;
		opacity: 0;
		margin-left: 2px;
		}
				
		
	#projects .project:hover .info .back {
		height: 100%;
		background: #fff;
		}
	#projects .project:hover .title {
		top: 8px;
		}
		#projects .project:hover .title h1 {
			font-size: 60px;
			line-height: 58px;
			font-size: 5.5vh;
			line-height: 5.5vh;
			color: #333;
			}
			
	#projects .project:hover .description {
		letter-spacing: 0.01em;
		height: 200px;
		transition: opacity 0.7s, height 0.7s;
		transition-delay: 0.3s;
		visibility: visible;
		opacity: 1;
		margin-top: 1em;
		font-size: 2.3vh;
		text-transform: none;
		padding-right: 20%;

		}
		
		
		

		
		
#project {
	position: relative;
	min-height: 464px;
	background: #333;
	padding-top: 12px;
	color: #333;
	}
	#project .info {
		position: relative;
		height: 220px;
		margin: 0 12px;
		background: #fff;
		}

	#project .info .title {
		padding: 12px 0 8px 12px;
		width: 720px;
		white-space: nowrap;
		}

	#project h1 {
		display: inline;
		font-size: 60px;
		line-height: 60px;
		white-space: normal;
		}
	#project .description {
		letter-spacing: 0.01em !important;
		clear: both;
		font-family: 'Roboto Slab', serif;
		font-weight: 300;
		font-size: 28px;
		text-transform: uppercase;
		letter-spacing: -1px;
		max-width: 70%;
		margin-left: 13px;

		margin-top: 1em;
		font-size: 2.3vh;
		text-transform: none;
		}
		#project .description a{
			color: #0096ff;
		}
	#project .close {
		display: inline-block;
		width: 28px;
		height: 28px;
		margin: 0 0 8px 20px;
		background: url(../img/close.png) center center no-repeat;
		background-size: 100%;
		transition: all 0.3s;
		}
		#project .close:hover {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			transform: rotate(360deg);
			}
		#project .close:active {
			background-size: 90%;
			transition: none;
			}
			
			
			
	#project .picture_container {
		position: relative;
		height: 308px;
		overflow: hidden;
		}
		
			
	#project .next {
		position: absolute;
		height: 50px;
		top: 12px;
		right: 0;
		max-width: 333px;
		cursor: pointer;
		}
		#project .next .arrow {
			position: absolute;
			width: 70px;
			height: 24px;
			top: 30px;
			right: 10px;
			background: url(../img/arrow.png) no-repeat;
			background-position: 0;
			transition: background-position 0.3s;
			}
		#project .next a {
			position: relative;
			display: block;
			height: 0;
			background: #333;
			color: #fff;
			overflow: hidden;
			transition: all 0.2s;
			}
			#project .next a img {
				height: 63px;
				margin-right: 12px;
				float: left;
				}
			#project .next a h2 {
				text-transform: uppercase;
				font-size: 18px;
				float: left;
				line-height: 18px;
				margin-top: 23px;
				margin-right: 12px;
				max-width: 214px;
				font-family: 'Roboto Condensed', sans-serif;
				}
				#project .next a h2.r1{
					white-space:nowrap;
				}
				#project .next a h2.r2{
					margin-top:13px;
				}
				#project .next a h2.r3{
					margin-top:4px;
				}
				#project .next a h2:after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 12px;
					height: 100%;
					background: linear-gradient(to right, rgba(51,51,51, 0), #333 100%);
				   }
				
		#project .next:hover .arrow {
			background-position: 80px;
			}
		#project .next:hover a {
			transition-delay: 0.1s;
			height: 63px;
			}
			
		

		
		


#browse {
	position: absolute;
	width: 100%;
	height: 100%;
	min-height: 618px;
	top: 0;
	background: #333;
	z-index: 2;
	overflow: hidden;
	display: none;
	}
	
		
	#browse #picture {
		position: relative;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		}
		#browse #picture.center {
			background-position: center center;
			}
		#browse #picture.top {
			background-position: center top;
			}
		#browse #picture.bottom {
			background-position: center bottom;
			}
		#browse #picture.vertical {
			background-size: contain;
			}
			
	
	#browse .links li {
		display: block;
		position: absolute;
		width: 46%;
		height: 100%;
		top: 0;
		overflow: hidden;
		display: none;
		}
					
	#browse .links a {
		position: absolute;
		display: block;
		top: 50%;
		margin-top: -33px;
		width: 100px;
		height: 67px;
		text-align: center;
		border: 5px solid #333;
		background: #333;
		transition: all 0.3s;
		overflow: hidden;
		background-size: cover;
		background-position: center center;
		}

		#browse .links a img {
			width: 100px;
			}
		#browse .links a .number {
			position: absolute;
			width: 100%;
			top: 0;
			font-size: 32px;
			color: #fff;
			line-height: 67px;
			font-family: 'Roboto Slab', serif;
			letter-spacing: 2px;
			}
		
		#browse .links .right {
			right: 0;
			display: block;
			}
			#browse .links .right a {
				right: -112px;
				}
			#browse .links .right.hover a {
				right: 0;
				}
		
		#browse .links .left {
			left: 0;
			display: block;
			}
			#browse .links .left a {
				left: -112px;
				}
			#browse .links .left.hover a {
				left: 0;
				}
			
			
	#browse .close {
		position: absolute;
		display: block;
		width: 46px;
		height: 46px;
		top: 0;
		right: 0;
		overflow: hidden;
		background: #333;
		}
		#browse .close div {
			width: 100%;
			height: 100%;
			transition: all 0.3s;
			background: url(../img/close_white.png) no-repeat center center;
			background-size: 23px;
			}
		#browse .close div:hover {
			-webkit-transform: rotate(360deg);
			-moz-transform: rotate(360deg);
			transform: rotate(360deg);
			}
		#browse .close div:active {
			background-size: 20px;
			transition: none;
			}
			
			
	#browse .preloader {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		background: rgba(2, 6, 5, 0.7);
		display: none;
	}
	#browse .preloader .v {
		position: absolute;
		width: 110px;
		height: 110px;
		top: 50%;
		left: 50%;
		margin: -55px 0 0 -55px;
		background: url(../img/preloader.gif) no-repeat;
		}
	

			
	#browse .share {
		position: absolute;
		width: 46px;
		height: 46px;
		bottom: 0;
		right: 0;
		}
		#browse .share:hover {
			width: 187px;
			}
		#browse .share:hover a {
			opacity: 1;
			visibility: visible;
			}
		#browse .share:hover .ico .blue {
			visibility: visible;
			opacity: 1;
			}
		
			#browse .share:hover .twitter { right: 47px; }
			#browse .share:hover .facebook { right: 94px; }
			
		#browse .share a, #browse .share a .blue {
			position: absolute;
			display: block;
			right: 0;
			bottom: 0;
			width: 46px;
			height: 46px;
			background: url(../img/share.png) no-repeat #333;
			margin-left: 1px;
			visibility: hidden;
			transition: all 0.2s;
			}
			#browse .share a .blue {
				right: 0;
				opacity: 0;
				}
			#browse .share a:hover .blue {
				visibility: visible;
				opacity: 1;
				}
			
		#browse .share .ico {
			background-position: left top;
			opacity: 1;
			right: 0;
			visibility: visible;
			}
			#browse .share .ico .blue {
				background-position: left -46px;
				}
				
		#browse .share .facebook {
			background-position: -46px top;
			transition-delay: 0.2s;
			}
			#browse .share .facebook .blue {
				background-position: -46px -46px;
				}
		
		#browse .share .twitter {
			background-position: -92px top;
			transition-delay: 0.1s;
			}
			#browse .share .twitter .blue {
				background-position: -92px -46px;
				}
			
		#browse .share .instagram {
			background-position: -138px top;
			
			}
			#browse .share .instagram .blue {
				background-position: -138px -46px;
				}
				
				
				
				
#browse .video_player .play_bar {
	position: absolute;
	width: 100%;
	height: 11px;
	margin-top: -5px;
	background: #333;
	top: 50%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	}
	#browse .video_player .play_bar.show {
		opacity: 1;
		visibility: visible;
		}
	#browse .video_player .play_bar .seek {
		position: absolute;
		width: 0%;
		height: 11px;
		background: #0096ff;
		}
	#browse .video_player .play_bar .time {
		position: absolute;
		margin-top: -30px;
		color: #fff;
		font-size: 24px;
		font-family: 'Roboto Slab', serif;
		left: 0;
		}
		
	#browse .video_player .screen {
		display:none;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		}

			
#browse .video_player .play_bar{
	display:none;
}		
			
			
			
			
#contacts {
	text-align: center;
	font-family: 'Roboto Slab', serif;
	border-top: 4px solid #333;
	border-bottom: 4px solid #333;
	height: 300px;
	}
	
	#contacts .container {
		position: relative;
		top: 50%;
		margin-top: -100px;
		}
	
	#contacts .manager {
		font-size: 22px;
		}
	#contacts .phone {
		font-size: 65px;
		letter-spacing: 5px;
		margin: 17px 0 9px 6px;
		}
	#contacts .email a {
		font-size: 42px;
		color: #0096ff;
		text-decoration: underline;
		}
		


		
#agency {
	position: relative;
	border-top: 4px solid #333;
	border-bottom: 4px solid #333;
	font-size: 16px;
	}
	
	#agency .screen {
		position: relative;
		width: 1160px;
		height: 500px;
		margin: auto;
		}

        #agency #screen1 {
            margin-top: -91px;
        }

        #agency #screen3 {
            margin-bottom: 40px;
        }
		
		
	

	#agency .block1, #agency .block2, #agency .block3 {
		position: absolute;
		width: 100%;
		top: 50%;
		}
		
		#agency .block1 {
			margin-top: 6px;
			}
			
		#agency .block2, #agency .block3 {
			margin-top: -212px;
			}

		
		
		
		
		
		
		

	#agency .h1 {
		position: absolute;
		top: 0;
		font-size: 57px;
		overflow: hidden;
		}
	#agency h2 {
		font-size: 36px;
		font-family: 'Roboto Slab', serif;
		text-transform: uppercase;
		font-weight: normal;
		overflow: hidden;
		}
	
	#agency a {
		color: #0096ff;
		font-size: 14px;
		}
		
	#agency .p1 {
		position: absolute;
		width: 500px;
		top: 16px;
		left: 657px;
		}
		
	#agency .arrow {
		position: absolute;
		width: 24px;
		height: 103px;
		bottom: 20px;
		left: 646px;
		background: url(../img/agency/arrow.png) no-repeat;
		}
		
	#agency .h2 {
		position: absolute;
		top: 187px;
		left: 350px;
		}
		
	#agency .p2 {
		position: absolute;
		width: 350px;
		top: 243px;
		left: 410px;
		}
		
	#agency .p3 {
		position: absolute;
		width: 470px;
		top: 194px;
		left: 737px;
		
		text-align: center;
		font-size: 24px;
		color: #728c21;
		font-style: italic;
		}
		
		
	#agency .h4 {
		position: absolute;
		top: 175px;
		left: 72px;
		width: 290px;
        line-height: 36px;
		overflow: hidden;
		}
		#agency .h4 span {
			display: block;
			width: 290px;
			}

		
	#agency .p4 {
		position: absolute;
		width: 383px;
		top: 178px;
		left: 380px;
		}
		
	#agency .p5 {
		display: block;
		width: 470px;		
		text-align: center;
		font-size: 24px;
		color: #ff5a56;
		font-style: italic;
		margin-left: -130px;
		padding: 10px 0 40px 0;
		}		
		
	#agency .photo {
		position: absolute;
		width: 495px;
		height: 424px;
		overflow: hidden;
		}
		#agency .photo .pic {
			position: absolute;
			top: 0;
			left: 0;
			width: 543px;
			height: 424px;
			}
		#agency .photo .frame {
			position: absolute;
			top: 0;
			left: 0;
			width: 543px;
			height: 424px;
			}
		
		
	#agency .photo1 {
		left: -100px;
		}
		#agency .photo1 .pic {
			margin-left: -30px;
			background: url(../img/agency/rikov.jpg) no-repeat;
			}
		#agency .photo1 .frame {
			background: url(../img/agency/f1.png) no-repeat;
			}
			
	#agency .photo2 {
		left: 720px;
		}
		#agency .photo2 .pic {
			margin-left: 40px;
			background: url(../img/agency/chistoprudov.jpg) no-repeat;
			}
		#agency .photo2 .frame {
			background: url(../img/agency/f2.png) no-repeat;
			}
		 
		 
#agency .mobile {
	display: none;
	}