@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Neucha|Open+Sans:400,700&subset=latin,cyrillic);

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address,
img, center, ol, ul, li, dl, dt, dd, form, fieldset, label, legend, input, select, button, textarea, table, tbody, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, time, mark, audio, video {
	border: 0; font-size: 100%; font: inherit; vertical-align: baseline; padding: 0; margin: 0; }
header, footer, nav, section, article { display: block; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
button::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=button]::-moz-focus-inner { padding:0; border:0; }

/* basic */

html, body { height: 100%; }
body { background: #bfeafb; color: #000; font: normal 1em/1 'Open Sans', Tahoma, Geneva, sans-serif; overflow-x: hidden; }
a { color: #0e75c0; text-decoration: underline; outline: none; }
a:hover { text-decoration: none; }
b { font-weight: 700; }
::-moz-selection { background: #f1688b; }
::-webkit-selection { background: #f1688b; }
::selection { background: #f1688b; }
input:focus { outline: none; }
input::-webkit-input-placeholder { color: #333; }
input::-moz-placeholder { color: #333; }
input::-ms-placeholder { color: #333; }
.nojs { background: #eb3d16; color: #fff; display: block; padding: 1em; }
.nowrap { white-space: nowrap; }
.center { text-align: center; margin: 0 auto; }
.red { color: #9e0000; }

/* layout */

.wrapper {
	overflow: hidden;
	min-width: 62.25em;
	min-height: 100%;
	margin-bottom: -47.25em;
}
		
	header[role=banner] {
		background: -moz-linear-gradient(top, #bfeafb, #fff 80%);
	 	background: -o-linear-gradient(top, #bfeafb, #fff 80%);
		background: -webkit-linear-gradient(top, #bfeafb, #fff 80%);
		background: -ms-linear-gradient(top, #bfeafb, #fff 80%);
		background: linear-gradient(top, #bfeafb, #fff 80%);
	}
  
		header .inner {
			background: url(../images/sand.png) center bottom repeat-x, url(../images/clouds.png) center top repeat-x;
			margin-top: 2em;
			animation: sky 60s linear infinite;
		}
		
	
		@keyframes sky {
			  0% { background: url(../images/sand.png) center bottom repeat-x, url(../images/clouds.png) 0 0 repeat-x; }
			  100% { background: url(../images/sand.png) center bottom repeat-x, url(../images/clouds.png) -1039px 0 repeat-x; }
		}
	  
	  .container {
		  background: #ecbc43;
		  background: -moz-linear-gradient(top, #ecbc43, #fbdd61 50%);
		  background: -o-linear-gradient(top, #ecbc43, #fbdd61 50%);
		  background: -webkit-linear-gradient(top, #ecbc43, #fbdd61 50%);
		  background: -ms-linear-gradient(top, #ecbc43, #fbdd61 50%);
		  background: linear-gradient(top, #ecbc43, #fbdd61 50%);
		  margin-bottom: 47.25em;
		  overflow: hidden;
	 }
	 
	.container .inner, .footer_content {
		width: 61.25em;
		margin: 0 auto;
	}
	
	header .additional {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 61.25em;
		margin: auto;
	}
	
		header .additional:before, header .additional:after {
			display: block;
			position: absolute;
		}
		
		header .additional:before {
			content: url(../images/umbrella.png);			
			top: 2em;
			right: -15em;
		}
		
		header .additional:after {
			content: url(../images/ball.png);			
			top: 10em;
			left: -5em;
		}

/* menu */

nav {
	background: #ecbc43;	
}

	nav .menu {
		text-align: center;
		height: 2.5em;
		width: 61.25em;
		padding: 1em 0 0;
		margin: 0 auto;
	}
	
		nav li, nav .menu:after {
			display: inline-block;
			vertical-align: middle;
		}
		
		nav li {
			position: relative;
			margin: 0 1em;
			cursor: pointer;
		}
		
		nav .menu:after {
			content: '';
			width: 100%;
		}
		
			nav a {
			  background: #a76131;
			  border-radius: 1em;
			  font-family: 'Neucha', serif;
			  color: #fff;
			  font-size: 112.5%;
			  line-height: 2;
			  text-decoration: none;
			  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
			  display: block;
			  position: relative;
			  z-index: 2;
			  padding: 0 1em;
			  transition: all 0.2s linear;
			}
			
			nav .current a, nav a:hover { background: #f26522; }
		  	nav a:hover { transform: translateY(-0.25em); }
		  
			nav .menu li:after {
				content: '';
				background: -moz-linear-gradient(top, transparent, #000);
				background: -o-linear-gradient(top, transparent, #000);
				background: -webkit-linear-gradient(top, transparent, #000);
				background: -ms-linear-gradient(top, transparent, #000);
				background: linear-gradient(top, transparent, #000);
				border-radius: 1em;
				font-size: 112.5%;
				display: block;
				position: absolute;
				z-index: 1;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 2em;
				margin: 0 auto;
				opacity: 0.4;
				transform-origin: 100% 100%;
				transform: scaleY(0.5);
				transition: all 0.2s linear;
			}
			
			nav .menu li:hover:after {
				width: 95%;
				opacity: 0.3;
				transform: scaleY(0.2);
			}
			
		.switch { display: none; }
			
	.logo {
		text-align: center;
		display: block;
	}

/* content */

.content, aside {
	padding: 1em 0 5em;
}

.content.double {
	float: right;
	clear: both;
	width: 100%;
	padding: 1em 0 5em;
	margin-left: -100%;
}

	.content.double .main {
			float: right;
			width: 50%;
		}
			
		aside {
			float: left;
			width: 50%;
			padding-right: 4em;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		h1 {
			background: url(../images/stain.png) 0 0 no-repeat;
			font: normal 300%/1.2 'Neucha', serif;
			min-height: 1.5em;
			padding: 0.75em 0 0 1.25em;
			margin: 0 0 0.25em -1.25em;
		}
		
		h2 {
			font: normal 200%/1.2 'Neucha', serif;
			margin-top: 2em;
		}
		
		h1 + h2 { margin-top: 1em; }
		.content .main article h2 { margin-top: 0; }		
		
		.content p, .content li {
			line-height: 1.4;
			text-align: justify;
		}
		
		.content p, .content ul {			
			padding-top: 1.4em;
		}
		
		.content ul {
			list-style: disc outside;
			margin-left: 1.4em;
		}
		
			.content li {
				padding-left: 0.5em;
				margin-top: 0.5em;
			}
			
			.content ul li:first-child { margin: 0; }
		
		h1 + ul, h1 + p { padding-top: 0 !important; }

/* articles */

	.main { clear: both; }

	section.main {
		padding-bottom: 2em;
		float: left;
		width: 100%;
	}

		.main article {
			background: #FFF;
			box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 3px 4px 0 rgba(0,0,0,0.3);
			float: left;
			overflow: hidden;
			width: 15em;
			height: 18em;
			padding: 0.5em;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-transition: all 0.3s linear;
			transition: all 0.3s linear;
			
		}
		
		.main article:nth-child(even) { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
		.main article:nth-child(odd) { -webkit-transform: rotate(7deg); transform: rotate(7deg); }
		
			.main article h2 {
				background: #FFF;
				font: 140%/1.2 Neucha, Georgia, "Times New Roman", Times, serif;
				text-align: center;
				display: block;
				position: absolute;
				z-index: 98;
				left: 0;
				bottom: 0;
				width: 100%;
				padding: 0.9em 0;
				-webkit-transition: opacity 0.3s linear;
				transition: opacity 0.3s linear;
			}
			
			.main article p {
				color: #000;
				font-size: 85%;
				line-height: 1.2;
				text-align: left;
				display: block;
				position: absolute;
				z-index: 99;
				left: 0.5em;
				top: 0.5em;			
				width: 90%;
				padding: 0.5em;
				opacity: 0;
			}
			
				.main article img { display: none; }
				
				.main article .img {
					background: center no-repeat;
					background-size: cover;
					display: block;
					width: 100%;
					height: 100%;
					-webkit-transition: opacity 0.3s linear;
					transition: opacity 0.3s linear;
				}
				
		.main article:hover {
			z-index: 99;
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}
		
			.main article:hover .img { opacity: 0.2; }
			.main article:hover time, .main article:hover p { opacity: 1; }
	
			.main article .readmore {
				display: block;
				position: absolute;
				z-index: 98;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
/* gallery */

.content .gallery {
	font-size: 100%;
	display: block;
	float: left;
	list-style: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

	.gallery li:nth-child(even) { -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
	.gallery li:nth-child(odd) { -webkit-transform: rotate(7deg); transform: rotate(7deg); }

	.gallery li {
		border: 0.75em solid #FFF;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 3px 4px 0 rgba(0,0,0,0.3);
		white-space: nowrap;
		display: block;
		float: left;
		overflow: hidden;
		width: 180px;
		height: 180px;
		padding: 0;
		margin: 0;
		-webkit-transition: transform 0.3s linear;
		transition: transform 0.3s linear;
	}
	
			.gallery img {
				display: inline-block;
				vertical-align: middle;
				min-width: 180px;
				min-height: 180px;
				padding: 0;
				margin: 0;
			}


/* sidebar gallery */

aside .gallery { margin-top: 2em; }
	
	aside .gallery li:nth-child(odd) { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
	aside .gallery li:nth-child(even) { -webkit-transform: rotate(5deg); transform: rotate(5deg); }
	
	aside .gallery li {
		width: auto;
		height: auto;
	}
	
		aside .gallery img { width: 100%; }
		
	.gallery li:hover, aside .gallery li:hover {
		z-index: 99;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	
/* article gallery */

article.main .gallery { margin: 1em; }

	article.main .gallery li {
		width: 33.333%;
		height: auto;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
		article.main .gallery img {
			width: 100%;
			height: auto;
		}
		
	.content article.main  .gallery + p {
		background: #FFF;
		box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 3px 4px 0 rgba(0,0,0,0.3);
		border-radius: 0.5em;
		clear: both;
		padding: 2em;
	}
	
/* portfolio gallery */

.portfolio .gallery {
	padding-bottom: 2em;
	margin-top: 1em;
}

	.portfolio .main .gallery li {
		border-width: 0.25em;
		width: 11.25em;
		height: 11.25em;
	}
	
		.portfolio .main .gallery img {
			width: auto;
		}
		
/* breadcrumbs */

	.breadcrumbs {
		background: #fbdd61;
		border-radius: 0.75em;
		position: relative;
		z-index: 1;
		float: left;
		padding: 0.25em 0.75em;
		margin: 1.5em 0 -1.5em;
	}
		
		.breadcrumbs li { float: left; }
		
			.breadcrumbs a, .breadcrumbs span, .breadcrumbs li:after {
				display: inline-block;
				vertical-align: middle;
			}
			
			.breadcrumbs a, .breadcrumbs span {
				font-size: 82.75%;
				line-height: 1.5;
			}
			
			.breadcrumbs span { color: #a76131; }
			
			.breadcrumbs li:after {
				content: '>';
				margin: 0 0.5em;
			}
			
			.breadcrumbs li:last-child:after { display: none; }

/* footer */

footer[role=contentinfo] {
	background: #a9d6d3;	
	position: relative;
	overflow: hidden;
	clear: both;
	height: 47.25em;
}

footer[role=contentinfo], footer[role=contentinfo] a { color: #fff; }

	footer[role=contentinfo]:before {
		content: '';
		background: #fbdd61;
		display: block;
		position: absolute;
		z-index: 1;
		top: 0;
		width: 100%;
		height: 12em;
	}
	
	@keyframes water {
		0% { background-position: 0 0; }
		50% { background-position: -30px 50px; }
		100% { background-position: 0 0; }
	}
	
	@keyframes water2 {
		0% { background-position: 0 0; }
		50% { background-position: -30px 25px; }
		100% { background-position: 0 0; }
	}

	footer .water {
		background: url(../images/water1.png) center top repeat-x;
		padding-top: 7em;
		position: relative;
		z-index: 2;
		animation: water 5s ease-in-out infinite;
	}
	
		footer .inner { overflow: hidden; }

		footer .inner.first {
			background: url(../images/water2.png) center top repeat-x;
			padding: 7em 0 0;
			animation: water2 10s ease-in-out infinite;

		}
		
		footer .inner.second {
			background: #32b4c2 url(../images/water3.png) center top repeat-x;
			padding: 7em 0 4em;
			animation: water 7s ease-in-out infinite;
		}
		
		footer .inner.third {
			background: #219fa8 url(../images/water4.png) center top repeat-x;
			padding: 4em 0;
			min-height: 10em;
			animation: water2 5s ease-in-out infinite;
		}
		
			.footer_menu {
				text-align: justify;
			}
			
				.footer_menu li, .footer_menu:after {
					display: inline-block;
					vertical-align: middle;
				}
				
				.footer_menu:after {
					content: '';
					width: 100%;
				}
				
					.footer_menu a {
						color: #fff;
						font-family: 'Neucha', serif;
						font-size: 112.5%;
						line-height: 2;
						text-shadow: 0 2px 0 rgba(0,0,0,0.15);
					}
			
			.contacts { overflow: hidden; }			
			.main p + .contacts { margin-top: 2em; }
					
				.contacts .phones, .contacts .email {
					float: left;
					width: 33.333%;
				}
				
				.contacts .phones li, .contacts .email, .contacts .address {
					font-size: 112.5%;
					line-height: 1.3;
				}
				
				.contacts .phones {
					position: relative;
					padding-left: 2.5em;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
				}
				
				.main .contacts .phones {
					list-style: none;
					padding-top: 0;
					margin-left: 0;
				}
				
					.contacts .phones:before {
						content: url(../images/icon_phone.png);
						display: block;
						position: absolute;
						left: 0;
						top: 0;
					}
					
					.main .contacts .phones:before { content: url(../images/icon_phone_dark.png); }
				
					.contacts .phones li {
						font-size: 112.5%;
						padding: 0;
						margin-top: 0;
					}
					
						.contacts .phones a, .touch  .contacts .phones span { display: none; }
						.touch .contacts .phones a { display: inline-block; }
				
				.contacts .email {
					text-align: center;
					padding: 0;
				}
				
					.contacts .email:before {
						content: url(../images/icon_email.png);
						display: inline-block;
						vertical-align: middle;
						margin-right: 0.5em;
					}
					
					.main .contacts .email:before { content: url(../images/icon_email_dark.png); }
					
				.contacts .address {
					float: right;
					padding: 0;
				}
				
					.contacts .address:before, .contacts .address span {
						display: inline-block;
						vertical-align: middle;
					}
				
					.contacts .address:before {
						content: url(../images/icon_location.png);
						margin-right: 0.5em;
					}
					
					.main .contacts .address:before { content: url(../images/icon_location_dark.png); }
					
			.socials {
				text-align: center;
				clear: both;
				margin-top: 1em;
			}
			
			.main .socials { padding: 0; }
			
				.socials li {
					display: inline-block;
					vertical-align: middle;
					margin: 0 0.5em;
				}
				
					.socials:before {
						content: 'Мы в соц.сетях';
						font-size: 87.5%;
						line-height: 1.2;
						text-align: center;
						display: block;
						margin-bottom: 0.75em;
					}
				
					.socials a, .socials img { display: block; }
					
					.socials a { transition: opacity 0.3s linear; }
					.socials a:hover { opacity: 0.5; }
				
			footer .copyrights {
				font-size: 87.5%;
				float: left;
			}
			
			.fogma {
				background: url(../images/fogma.png) center no-repeat;
				text-indent: -9999em;
				display: block;
				float: right;
				width: 2em;
				height: 2em;
				opacity: 0.5;
				transition: opacity 0.3s ease-in;
			}
			
			.fogma:hover { opacity: 1; }
			
/* contacts page */

.message_form {
			float: left;
			min-width: 40em;
			margin-top: 1.4em;
		}
		
	.message_form fieldset {
		position: relative;
		overflow: hidden;
		padding-left: 11em;
		margin-bottom: 1em;
	}
	
		.message_form .required:before {
			content: '*';
			color: #f26522;
			position: absolute;
			left: 0;
			top: 0.25em;
		}
	
		.message_form label {
			font-size: 87.5%;
			min-width: 10em;
			display: block;
			position: absolute;
			left: 1em;
			top: 0.25em;
		}
	
		.message_form input[type=text], .message_form input[type=email], .message_form input[type=tel], .message_form textarea {
			background: #F4F4F4;
			border: 1px solid #FFF;
			border-radius: 0.25em;
			font-size: 87.5%;
			display: block;
			width: 100%;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		
		.message_form input[type=text], .message_form input[type=email], .message_form input[type=tel] {
			height: 2.5em;
			padding: 0 0.75em;					
		}
		
		.message_form textarea {
			line-height: 1.4;
			height: 10em;
			padding: 0.75em;
			resize: vertical;
		}
		
		.message_form input[type=text]:focus, .message_form input[type=email]:focus, .message_form input[type=tel]:focus, .message_form textarea:focus {
			background: #FFF;
			border-color: #f26522;
		}
		
		.message_form input[type=submit] {
			background: #6ecff6;
			border-radius: 0.25em;
			color: #FFF;
			font-size: 87.5%;
			text-transform: uppercase;
			float: right;
			padding: 0.75em 1.5em;
			cursor: pointer;
			transition: background 0.3s linear;
		}
		
		.message_form input[type=submit]:hover { background: #3ea3d9; }
		
		
/* media queries, yeah! =) */

@media screen and (max-width: 63.25em) {
	
	.wrapper {
		min-width: inherit;
		padding-top: 2.5em;
	}
	
		.container .inner, .footer_content {
			width: auto;
			margin: 0 3%;
		}
	
	header .additional { display: none; }
			
	nav {
		background: #f26522;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100%;
		height: 2.5em;
	}	
	
		nav .menu, nav .menu:after {
			display: none;
		}
		
		.switch {
			display: block;
			position: relative;
			float: left;
			padding: 0.625em;
			cursor: pointer;
		}
		
			.switch:after {
				content: 'Меню';
				font: normal 150%/1.2 'Neucha', serif;
				color: #fff;
				display: block;
				position: absolute;
				left: 120%;
				top: 0.25em;
			}
		
			.switch li {
				background: #fff;
				font-size: 50%;
				display: block;				
				height: 0.5em;
				margin: 0.5em 0 0;
				width: 2.5em;
			}
			
			.switch li:first-child { margin: 0; }
		
		nav.open .menu {
			background: #f26522;
			box-shadow: 0 0.5em 0 rgba(0,0,0,0.3);
			text-align: left;
			display: block;
			clear: both;
			overflow: hidden;
			height: auto;
			padding: 1em 0;
			width: 100%;
		}
		
			nav .menu li {
				display: block;
				float: left;
				clear: both;
				margin-bottom: 1em;
			}
			
				nav .menu li:after { display: none; }				
				nav .menu a { background: #b24a14; transition: none; }
				nav .menu a:hover { transform: none; }
				nav .menu .current a { background: #fbdd61; color: #000; text-shadow: none; }
				
				
		#overlay {
			display: none;
			position: fixed;
			z-index: 998;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
		
		#overlay.active { display: block; }
		
}

@media screen and (max-height: 20em) {
	
	nav li { clear: none !important; }
	
}

@media screen and (max-width: 51em) { /* 816px */

	footer[role=contentinfo] { height: auto; }
	footer .water, footer .inner { animation: none !important; }
	footer .inner.third { min-height: inherit; }
	.footer_menu { display: none; }
	
	.contacts .phones, .contacts .email, .contacts .address {
		text-align: left;
		float: none;
		width: auto;
		margin-bottom: 2em;
	}
	
	.socials, .socials:before { text-align: left; }
	.socials { margin: 0 0 0 3%; }
	.socials li { margin: 0 1em 0 0; }
	
	.content.double, .content.double .main, aside {
		float: none;
		width: auto;
		margin: auto;
	}
	
		.content.double { padding-bottom: 0; }
	
	aside {
		text-align: center;
		padding: 0 0 3em 0;
		margin: 1em 3% 0;
	}
	
		aside .gallery li {
			display: inline-block;
			float: none;
		}
	
	article.main .gallery { text-align: center; }
		
		article.main .gallery li { display: none; }
	
		article.main .gallery li:first-child {
			display: inline-block;
			float: none;
			width: auto;
			margin-top: 2em;
		}
		
		.portfolio article.main .gallery li:first-child {
			display: block;
			float: left;
			width: 11.25em;
			margin: 0;
		}
		
		
		.portfolio article.main .gallery li { display: block; }
		
	.portfolio section.main {
		float: none;
		overflow: hidden;
		width: 30em;
		padding: 0 2em 2em;
		margin: 0 auto;
	}
	
}

@media screen and (max-width: 35em) {
	
	.portfolio section.main {
		text-align: center;
		width: auto;
		overflow: visible;
	}
	
		.portfolio section.main article {
			display: inline-block;
			float: none;
		}
	
}

@media screen and (max-width: 30em) {
	
	.logo img {
		max-width: 100%;
		width: auto;
	}
	
	.container .inner, .footer_content { margin: 0 5%; }
	.socials { margin: 0 0 0 5%; }
	aside { margin: 1em 5% 0; }	
	footer .copyrights { float: none; }
	
	.fogma{
		background-position: 0 0;
		line-height: 2em;
		text-indent: inherit;
		float: none;
		clear: both;
		width: auto;
		padding-left: 2.5em;
		margin-top: 2em;
	}
	
}