/*
dark blue: #002E42 rgb(0,38,61)
light blue: #4dbce9 rgb(77,188,233)
blue: #26ade4 rgb(38,173,228)
lime: #d1e751 rgb(209,231,81)
white: #fff rgb(255,255,255)
black: #000 rgb(0,0,0)
*/
html{
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-family: open_sans, arial;
	color: #002E42;
	height: 100%;
}
body *{
	box-sizing: border-box;
}
body:not(.ru) .ru{
	display:none;
}
body.ru .en{
	display:none;
}

a:link{
	color:#002Eff;
}

h1{
	text-align: center;
	/*font-size: 40px;*/
	font-size: 3em;
	font-family: open_sanslight;
	margin:0;
	font-weight: normal;
	padding: 30px;
}

svg.background path,
svg.arrow path,
svg polyline{
	stroke-width: 1px;
	stroke: #26ade4;
	fill: none;
}

.blue{
	color: #26ade4;
}

.page{
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 400px;
}
.page:after{
	height:150px;
	content:"";
	clear:both;
	display:block;
}
#content{
	min-height: 100%;
	height:100%;
}

/********************** Cursor keyframes ************************/
@-webkit-keyframes cursor {
	0%	{			border-color:#002E42;		}
	1%	{			border-color:#fff;		}
	50%	{			border-color:#fff;		}
	51%	{			border-color:#002E42;		}
	100%{			border-color:#002E42;		}
}

@keyframes cursor {
	0%	{			border-color:#002E42;		}
	1%	{			border-color:#fff;		}
	50%	{			border-color:#fff;		}
	51%	{			border-color:#002E42;		}
	100%{			border-color:#002E42;		}
} 
.cursor:after{
	content:"";
	min-width:1px;
	min-height: 60px;
	position: relative;
	border-right: 2px solid #002E42;
	display: inline-block;
	top: 10px;
}
.cursor.anim:after{
	-webkit-animation-name: cursor;
	-webkit-animation-duration: 700ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-play-state: running;
	animation-name: cursor;
	animation-duration: 700ms;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

/********************** Vertical align ************************/
.table{
	display:table;
}
.cell{
	display: table-cell;
	vertical-align: middle;
}

/********************** Logo ************************/
#logo{
	position: absolute;
	top: 30px;
	left: 30px;
	font-family: forum, arial;
	/*font-size: 42px;*/
	font-size: 3em;

}

/********************** Screen footers ************************/
.footer:link{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;
	margin: 0 auto;
	font-size: 2em;
	text-align: center;
	color: #002E42;
	text-decoration: none;
}
.footer:hover{
	color: #26ade4;
}
.footer .text{
	width: 300px;
	margin: 0 auto;
}
.footer .arrow{
	width: 80px;
	height:80px;
	margin: 0 auto;
}


/********************** Home page ************************/
#home_page{
	position: relative;
	height: 100%;
	min-height:500px;
}
#home_page:after{
	height:200px;
}
#home_page .center{
	height:100%;
	margin: 0 auto 0px;
	font-size: 3.3em;
	font-family: open_sanslight;
}
/*#home_page svg.background{
	position:absolute;
	top:100px;
	left:50%;
	width:500px;
	margin-left: -200px;
}*/
#home_page svg.background{
	margin: 0 auto;
	width:500px;
}
#home_page svg.background path{
	stroke-width:2px;
}
#home_page .inner,
#home_page .footer{
	display:none;
}

#home_page .inner > span > span > span:not(.shown){
	display:none;
}


/*** debug lines ***/
svg.background path.lin{
	stroke:#ddd;
	stroke:none;
}
svg.background path.lin:nth-child(2n){
	stroke:#bbb;
	stroke:none;
}
/********************/

/********************** Works ************************/
#works{
	height: auto;
	background-color: #002E42;
	color: #4dbce9;
}
#works:after{
	height:200px;
}
#works .center{
	margin: 0 auto;
}
#works .item{
	position: relative;
	width: 400px;
	height: 200px;
	float: left;
	margin-top: 1px;
	background-size: cover;
}

#works .item:before{
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0;
	content: "";
	background-color: #fff;
	opacity: 0.5;
}
#works .item:hover:before{
	opacity: 0.9;
}
#works .item .description{
	position: absolute;
	width: 50%;
	height: 100%;
	right: 0;
	overflow: hidden;
	padding: 15px;
	color: #002E42;
}

#works .item .title{
	font-size: 1.5em;
	padding-bottom: 10px;
}
#works .item .body{
	padding-bottom: 5px;
}
#works .item:not(:hover) *{
	opacity:0;
}

#works .footer{
	color: #4dbce9;
}
#works .footer:hover{
	color: #fff;
}

/********************** choice ************************/
#choice{
	height: auto;
}
#choice .center{
	width: 100%;
	text-align: center;
	font-size: 1.8em;
}
#choice .advantage{
	text-align: center;
}
#choice .image{
	margin-bottom:15px;
}
#choice .image path{
	stroke-width: 2px;
	stroke: #26ade4;
	fill: none;
}
#choice path.thin{
	stroke-width: 1px;
}
#choice path.fill{
	fill: #26ade4;
}

#choice .center .advantage{
	position: relative;
	display:inline-block;
	width: 250px;
	margin-left: 100px;
}
#choice .center .advantage:first-child{
	margin: 0;
}
#choice .center .advantage:not(:first-child):before{
	position: absolute;
	display: block;
	content:"";
	background-color: #26ade4;
	width: 1px;
	height: 50px;
	left: -50px;
	top: 100px;
}
#choice .center .advantage:not(:first-child):after{
	position: absolute;
	display: block;
	content:"";
	background-color: #26ade4;
	height: 1px;
	width: 50px;
	left: -75px;
	top: 125px;
}
#choice .center .image{
	width: 250px;
	height: 250px;
	background-color: #f7f7f7;
	box-shadow: 0 1px 2px 0 #777;
}

#choice .result{
	font-size: 1.8em;
}
#choice .result .advantage{
	width: 350px;
	margin: 30px auto;
}
#choice .result .image{
	width: 350px;
	height: 250px;
	background-color: #f7f7f7;
	box-shadow: 0 1px 2px 0 #777;
}
#choice .result .image .thin{
	stroke: #4dbce9;
	opacity: 0.3;
}

/********************** About ************************/
#about{
	background-color:#4dbce9;
	height: auto;
}
#about .center{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	font-size:1em;
}
#about .images{
	position:relative;
	width: 510px;
	float:left;
	height:280px;
}
#about .image{
	position:absolute;
	width: 200px;
	height: 240px;
	background-color:#fff;
	box-shadow: 0 1px 2px 0 #777;
}
#about .picture{
	position:absolute;
	width: 180px;
	height: 180px;
	top: 10px;
	left: 10px;
	background-color: #eee;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	box-shadow: inset 0 0 2px 0 #999;
}

#about .image:nth-child(1){
	right:260px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(-25deg);
	transform: rotate(-25deg);
}
#about .image:nth-child(2){
	right:150px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#about .image:nth-child(3){
	right:50px;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}
#about .image:nth-child(1) .picture{
	background-image: url(../images/about/1.jpg);
}
#about .image:nth-child(2) .picture{
	background-image: url(../images/about/2.jpg);
	background-position: 100% 50%;
}
#about .image:nth-child(3) .picture{
	background-image: url(../images/about/3.jpg);
}

#about .content{
	padding: 0 20px;
	min-height: 250px;
}

#about svg polyline{
	stroke: #fff;
}
#about .footer:hover{
	color: #fff;
}
/********************** Clients ************************/
#clients{
	height: auto;
}
#clients .center{
	width: 100%;
}
#clients .images{
	width: 750px;
	margin: 0 auto;
	text-align: center;
}
#clients .image{
	display:inline-block;
	width: 200px;
	height: 100px;
	margin: 0 0 30px 50px;
	background-size: contain;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

/********************** Contacts ************************/
#contacts{
	height: auto;
	background-color:#002E42;
	color: #4dbce9;
}

#contacts .center{
	font-size:1.5em;
	width:300px;
	margin: 0 auto;
}
#contacts .center input,
#contacts .center textarea{
	width:100%;
	margin: 5px 0 10px;
	padding:10px;
	border:none;
	border-radius: 4px;
	box-shadow: inset 0px 0px 2px 0px #000;
	color: #002E42;
	resize: none;
	font: inherit;
	font-size: 16px;
}
#contacts .center input[type="submit"]{
	width:auto;
	display:block;
	margin: 5px auto 10px;
	padding:10px 30px;
	box-shadow: 0px 1px 1px 0px #000;
	background-color:#d1e751;
	font-size: 1em;
	cursor: pointer;
}
#contacts .center input[type="submit"]:focus{
	outline: none;
}

/****************** Alert **************************/
#alert{
	position:fixed;
	top:100px;
	right:-250px;
	margin-right:-100px;
	width:250px;
	padding:20px;
	background-color:#eee;
	border-radius:4px;
	box-shadow: 0px 2px 2px 0px #000;
	opacity:0;
	transition: right 1ms ease 0.3s, margin-right 0.3s ease, opacity 0.2s;
}
#alert.active{
	right:100px;
	margin-right:0;
	opacity:1;
	transition: right 1ms ease, margin-right 0.3s ease, opacity 0.2s;
}
#alert .code{
	opacity:0.4;
}
#alert .footer{
	padding-top:15px;
	text-align:right;
}
#alert .button{
	padding:6px 30px;
	display: inline-block;
	border-radius:4px;
	border: none;
	font: inherit;
	box-shadow: 0px 1px 1px 0px #000;
	background-color:#d1e751;
	cursor: pointer;
}
#alert .button:active{
	transform: translateY(1px);
}
#alert .button:focus{
	outline: none;
}


/**************** MEDIA QUERIES **********************/
@media screen and (min-width:1226px){
	#works .item:nth-child(3n-2){
		clear: left;
	}
	#works .item:nth-child(3n-2),
	#works .item:nth-child(3n-1){
		margin-right: 1px;
	}

	#works .item:nth-child(6n-2):before,
	#works .item:nth-child(6n-1):before,
	#works .item:nth-child(6n):before{
		right: auto;
		left: 0;
	}
	#works .item:nth-child(6n-2) .description,
	#works .item:nth-child(6n-1) .description,
	#works .item:nth-child(6n) .description{
		right: auto;
		left: 0;
	}
}

@media screen and (max-device-width:1225px), screen and (max-width:1225px){
	#works .item:nth-child(2n-1){
		clear: left;
	}
	#works .item:nth-child(2n-1){
		margin-right: 1px;
	}

	#works .item:nth-child(4n-1):before,
	#works .item:nth-child(4n):before{
		right: auto;
		left: 0;
	}
	#works .item:nth-child(4n-1) .description,
	#works .item:nth-child(4n) .description{
		right: auto;
		left: 0;
	}
}

@media screen and (max-device-width:990px), screen and (max-width:990px){
	#choice .center{
		width: 620px;
		margin: 0 auto;
	}
	#choice .center .advantage:last-child{
		margin: 50px 0 0;
	}
	#choice .center .advantage:not(:first-child):before,
	#choice .center .advantage:not(:first-child):after{
		display: none;
	}
	#choice .center .advantage:last-child:before{
		display: block;
		left: 125px;
		top: -75px;
	}
	#choice .center .advantage:last-child:after{
		display: block;
		left: 100px;
		top: -50px;
	}
}

@media screen and (max-device-width:840px), screen and (max-width:840px){
	#works .item{
		clear: left;
	}

	#works .item:nth-child(2n):before{
		right: auto;
		left: 0;
	}
	#works .item:nth-child(2n-1):before{
		left: auto;
		right: 0;
	}
	#works .item:nth-child(2n) .description{
		right: auto;
		left: 0;
	}
	#works .item:nth-child(2n-1) .description{
		left: auto;
		right: 0;
	}
	#home_page .center{
		font-size:2.5em;
	}
}

@media screen and (max-device-width:770px), screen and (max-width:770px){
	#clients .images{
		width: 500px;
	}
	#clients .image{
		margin: 0 0 10px 50px;
	}
	#clients .image:nth-child(2n+1){
		margin: 0 0 10px 0;
	}
	#home_page .center{
		position:relative;
		top:-50px;
		width:80%;
	}
}

@media screen and (min-device-width:771px), screen and (min-width:771px){
	#clients .image:nth-child(3n+1){
		margin: 0 0 30px 0;
	}
}

@media screen and (max-device-width:630px), screen and (max-width:630px){
	#choice .center{
		width: 400px;
		margin: 0 auto;
	}
	#choice .center .advantage{
		margin: 50px 0 0;
	}
	#choice .center .advantage:not(:first-child):before,
	#choice .center .advantage:not(:first-child):after{
		display: none;
	}
	#about .images{
		float:none;
		margin: 0 auto;
	}
	#about .center{
		font-size: 1.5em;
	}
	#about .content{
		padding: 0 20px;
		min-height: 250px;
	}

}

@media screen and (max-device-width:530px), screen and (max-width:530px){
	#home_page .inner{
		background-color:#fff;/* hack for android */
	}
	#about{
		overflow: hidden;
	}
	#about .images{
		width: 310px;
	}
	#about .image:nth-child(1){
		right:160px;
	}
	#about .image:nth-child(2){
		right:50px;
	}
	#about .image:nth-child(3){
		right:-50px;
	}
	#about .content{
		background-color:#4dbce9;
	}
	
	#clients .images{
		width: 250px;
	}
	#clients .image{
		margin: 0 0 10px 0;
	}
	#clients .image:nth-child(2n+1){
		margin: 0 0 10px 0;
	}

}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5){
	body{
		font-size:1.5em;
	}
	#home_page .center{
		position:relative;
		top:-50px;
	}
	.footer .arrow{
		width: 120px;
		height: 120px;
	}
	.page:after{
		height:300px;
		content:"";
		clear:both;
		display:block;
	}
	#home_page:after{
		height:400px;
	}
	#works:after{
		height:400px;
	}
}