/* CSS Document */
/* BEGIN reset css */
/* remove and neutralize the inconsistent default styling of HTML elements */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img {  border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
/* END reset css */
/* BEGIN includes */
.clearfix:after {
	clear:both;
	content:".";
	display:block;
	height:0pt;
	visibility:hidden;
}
/* END includes */
@font-face {
   font-family: 'Biko';
   font-weight: 700;
   font-style: normal;
   src: url('biko-bold.eot');
   src: url('biko-bold.eot?#iefix') format('embedded-opentype'),
      url('biko-bold.woff') format('woff'),
      url('biko-bold.ttf') format('truetype'),
      url('biko-bold.svg#bikobold') format('svg');
}
/* Apercu Mono */
@font-face {
	font-family: 'Apercu Mono';
	src: url("apercu_mono.eot");
	src: url("apercu_mono.eot#iefix") format('embedded-opentype'),
		 url('apercu_mono.woff2') format('woff2'),
		 url("apercu_mono.woff") format('woff'),
		 url("apercu_mono.ttf") format('truetype'),
		 url("apercu_mono.svg#apercumono") format('svg');
	font-weight: normal;
	font-style: normal;
}
/* BEGIN standard elements */
html, body {
    font-family: 'Apercu Mono', Helvetica, Arial, sans-serif;
	font-size: 100%;
	background-color: #CCCF29;
}
body {
}
/* END standard elements */

/* BEGIN layout */
#pageWrapper {
	min-width: 320px;
	width: 100%;
	position: relative;
	min-height: 667px;
}
@media screen and (min-width: 800px) { #pageWrapper { min-height: 768px; } }
@media screen and (min-width: 1130px) { #pageWrapper { min-height: 800px; } }

#headerWrapper {
	position: fixed;
	width: 100%;
	z-index: 1;
}
#headerWrapper #header {
	height: 95px;
	margin: 0 30px;
	padding-top: 85px;
	max-width: 1100px;
	position: relative;
}
#headerWrapper #header h1 {
	float: left;
	width: 142px;
	height: 65px;
}
#headerWrapper #header h1 img {
	max-width: 100%;
	height: auto;
}
#headerWrapper #header a.open,
#headerWrapper #header a.open:visited {
	float: right;
	width: 30px;
	height: 27px;
	line-height: 500px;
	overflow: hidden;
	background: url(../img/nav-icon.png) left top no-repeat transparent;
	background-size: contain;
}
#headerWrapper #header #navigation {
	position: absolute;
	/*top: 0; right: 0;*/
	width: 100%;
	background-color: #221E1F;
}
#headerWrapper #header #navigation ul {
	padding: 16px;
	text-align: right;
}
#headerWrapper #header #navigation ul li {
	line-height: 26px;
	font-size: 18px;
}
#headerWrapper #header #navigation ul li a,
#headerWrapper #header #navigation ul li a:visited {
	color: #ECE5C9;
	text-decoration: none;
	text-transform: lowercase;
}
#headerWrapper #header #navigation a.close,
#headerWrapper #header #navigation a.close:visited {
	position: absolute;
	left: 16px;
	top: 16px;
	width: 9px;
	height: 11px;
	line-height: 500px;
	overflow: hidden;
	background: url(../img/close-nav.png) left top no-repeat transparent;
}

@media screen and (min-width: 800px) {
	#headerWrapper #header {
		margin: 0 90px;
		padding-top: 85px;
		height: 167px;
	}
	#headerWrapper #header h1 {
		width: 212px;
		height: 98px;
	}
	/*#headerWrapper #header #navigation ul li {
		line-height: 89px;
		font-size: 63px;
	}*/
}
@media screen and (min-width: 1130px) {
	#headerWrapper #header {
		height: 95px;
		margin: 0 auto;
	}
	#headerWrapper #header h1 {
		width: 142px;
		height: 65px;
	}
	#headerWrapper #header #navigation {
		max-width: 200px;
		right: 0;
	}
	#headerWrapper #header #navigation ul li {
		line-height: 26px;
		font-size: 18px;
	}
}

#contentWrapper {
	width: 100%;
	position: relative;
}
#contentWrapper .sectionWrapper {
	width: 100%;
	position: relative;
}
#contentWrapper .sectionWrapper .sectionContent {
	position: relative;
}
#contentWrapper .sectionWrapper a.sectionNav,
#contentWrapper .sectionWrapper a.sectionNav:visited {
	position: absolute;
	bottom: 85px;
	left: 50%;
	margin-left: -31px;
	width: 63px;
	height: 18px;
	line-height: 500px;
	overflow: hidden;
	background: url(../img/down-arrow.png) left top no-repeat transparent;
	background-size: contain;
}

#contentWrapper .sectionWrapper .sectionContent a.sectionNav,
#contentWrapper .sectionWrapper .sectionContent a.sectionNav:visited {
	bottom: 0;
}

@media screen and (min-width: 1130px) {
	#contentWrapper .sectionWrapper a.sectionNav,
	#contentWrapper .sectionWrapper a.sectionNav:visited {
		bottom: 30px;
	}
	#contentWrapper .sectionWrapper .sectionContent a.sectionNav,
	#contentWrapper .sectionWrapper .sectionContent a.sectionNav:visited	{
		display: none;
	}		
}

html, body { height: 100%; }
#pageWrapper { height: 100%; }
#contentWrapper { height: 100%; }
#contentWrapper #section1.sectionWrapper { height: 100%; }
@media screen and (min-width: 1130px) {
	#contentWrapper .sectionWrapper { height: 100%; }
}

#contentWrapper .sectionWrapper .section {
	padding-top: 180px;
}
@media screen and (min-width: 800px) {
	#contentWrapper .sectionWrapper .section {
		padding-top: 252px;
	}
}
@media screen and (min-width: 1130px) {
	#contentWrapper .sectionWrapper .section {
		padding-top: 180px;
	}
}
#contentWrapper .sectionWrapper .section.full {
	padding-top: 0;
	height: 100%;
	max-width: 942px;
	margin: 0 30px;
	position: relative;
}
@media screen and (min-width: 800px) {
	#contentWrapper .sectionWrapper .section.full {
		margin: 0 90px;
	}
}
@media screen and (min-width: 1130px) {
	#contentWrapper .sectionWrapper .section.full {
		margin: 0 auto;
	}
}

#contentWrapper .sectionWrapper .section.full .sectionContent {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	max-width: 100% !important;
}
#contentWrapper .sectionWrapper .section.full img {
	max-width: 100%;
	height: auto;
}

#contentWrapper .sectionWrapper .section {
}
#contentWrapper .sectionWrapper .section.normal .sectionContent {
	margin: 0 30px;
	height: 542px;
}
#contentWrapper .sectionWrapper .section .sectionContent h2 {
	font-family: 'Biko';
	font-size: 40px;
	line-height: 44px;
	color: #221F1F;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#contentWrapper .sectionWrapper .section .sectionContent p {
	font-size: 16px;
	line-height: 19px;
	color: #221F1F;
	/*padding: 0 10px;*/
}
#contentWrapper .sectionWrapper .section .sectionContent p a,
#contentWrapper .sectionWrapper .section .sectionContent p a:visited {
	color: #221F1F;
}

#contentWrapper #section2 .section .sectionImage {
	margin-top: 180px;
	width: 100%;
	height: 434px;
	margin-bottom: 200px;
	background: url(../img/section2-img.png) center center no-repeat transparent;
	background-size: contain;
}

#contentWrapper #section3 .section .sectionImage {
	/*position: absolute;*/
	margin-top: 180px;
	/*left: -135px;*/
	width: 100%;
	height: 415px;
	margin-bottom: 200px;
	margin-left: -90px;
	padding-right: 90px;
	background: url(../img/section3-img.png) center center no-repeat transparent;
	background-size: contain;
}

#contentWrapper #section4 .section .sectionImage {
	margin-top: 180px;
	margin-bottom: 200px;
}
#contentWrapper #section4 .section .sectionImage img {
	max-width: 100%;
	height: auto;
}
#contentWrapper #section5 .section .sectionImage {
	margin-top: 180px;
	margin-bottom: 200px;
}
#contentWrapper #section5 .section .sectionImage img {
	max-width: 100%;
	height: auto;
}
#contentWrapper #section5 .section .sectionContent h2 span { display: none; }
	
@media screen and (min-width: 800px) {
	#contentWrapper .sectionWrapper .section {
		
	}
	#contentWrapper .sectionWrapper .section.normal .sectionContent {
		margin: 0 90px;
		height: 613px;
	}
	#contentWrapper .sectionWrapper .section .sectionContent h2 {
		font-size: 60px;
		line-height: 66px;
		margin-bottom: 30px;
	}
	#contentWrapper .sectionWrapper .section .sectionContent p {
		/*font-size: 21px;
		line-height: 26px;*/
		font-size: 18px;
		line-height: 23px;
	}
}
@media screen and (min-width: 1130px) {
	#contentWrapper .sectionWrapper .section.normal .sectionContent {
		height: auto;
	}
	#contentWrapper .sectionWrapper .section {
		margin: 0 auto;
		max-width: 1100px;
	}
	#contentWrapper .sectionWrapper .section .sectionContent {
		margin: 0 auto;
		width: 554px;
		float: left;
	}
	#contentWrapper .sectionWrapper .section.normal .sectionContent {
		margin: 0 auto;
	}
	#contentWrapper #section3.sectionWrapper .section .sectionContent/*,
	#contentWrapper #section5.sectionWrapper .section .sectionContent*/ {
		float: right;
	}
	#contentWrapper #section5.sectionWrapper .section .sectionContent {
		width: 100%;
	}
	#contentWrapper #section5.sectionWrapper .section .sectionContent h2 {
		width: 360px;
		float: left;
	}
	#contentWrapper #section5.sectionWrapper .section .sectionContent p {
		width: 554px;
		float: right;
	}
	#contentWrapper #section5 .section .sectionContent h2 span {
		display: block;
		font-size: 20px;
		line-height: 25px;
		margin-bottom: 10px;
		text-decoration: underline;
		text-transform: lowercase;
		font-family: 'Apercu Mono', Helvetica, Arial, sans-serif;
	}
}

@media screen and (min-width: 1130px) {
	#contentWrapper #section2 .section .sectionImage {
		margin-top: 8px;
		float: right;
		width: 546px;
		height: 527px;
		background: url(../img/section2-img.png) center center no-repeat transparent;
		background-size: contain;
		margin-bottom: 0;
	}
	#contentWrapper #section3 .section {
		position: relative;
	}
	#contentWrapper #section3 .section .sectionImage {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		padding-right: 0;
		position: absolute;
		top: 188px;
		left: -135px;
		width: 606px;
		height: 529px;
		background: url(../img/section3-img.png) center center no-repeat transparent;
		background-size: contain;
	}
	#contentWrapper #section4 .section .sectionContent {
		z-index: 1;
		position: relative;
	}
	#contentWrapper #section4 .section .sectionImage {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../img/section4-img.png) center center no-repeat transparent;
		background-size: contain;
	}
	#contentWrapper #section5 .section .sectionContent {
		z-index: 1;
		position: relative;
	}
	#contentWrapper #section5 .section .sectionImage {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../img/section5-img.png) center bottom no-repeat transparent;
		background-size: contain;
	}
	#contentWrapper .section .sectionImage img { display: none !important; }
}

#servicesList {
	padding: 0 30px;
}
#servicesList .serviceItem {
	text-align: center;
	margin-bottom: 50px;
}
#servicesList .serviceItem img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	margin-bottom: 12px;
}
#servicesList .serviceItem h3 {
	font-family: 'Biko';
	font-size: 17px;
	line-height: 21px;
	color: #221F1F;
	margin-bottom: 5px;
}
#servicesList .serviceItem h4 {
	color: #221F1F;
	font-size: 15px;
	line-height: 19px;
	text-transform: lowercase;
}
#servicesList .serviceItem p {
	line-height: 15px;
	font-size: 11px;
}
#servicesList .serviceItem p a,
#servicesList .serviceItem p a:visited {
	color: #221F1F;
}
@media screen and (min-width: 800px) {
	#servicesList {
		padding: 0 90px;
	}
	#servicesList .serviceItem {
		float: left;
		width: 45%;
		padding: 0 2.5%;
	}
	#servicesList #service1.serviceItem,
	#servicesList #service3.serviceItem,
	#servicesList #service5.serviceItem	{
		clear: left;
	}
}
@media screen and (min-width: 1130px) {
	#servicesList {
		padding: 0;
	}
	#servicesList .serviceItem {
		width: 29.45%;
		padding: 0 1.94%;
	}
	#servicesList #service1.serviceItem { width: 215px; padding: 0; }
	#servicesList #service2.serviceItem { width: 564px; padding: 0 0 0 53px; }
	#servicesList #service3.serviceItem { width: 268px; padding: 0; float: right; }
	#servicesList #service4.serviceItem { width: 215px; padding: 0; }
	#servicesList #service5.serviceItem { width: 564px; padding: 0 0 0 53px; }
	#servicesList #service6.serviceItem { width: 268px; padding: 0; float: right;  }
	#servicesList .serviceItem img {
		max-width: 215px;
	}
	#servicesList #service1.serviceItem,
	#servicesList #service3.serviceItem,
	#servicesList #service5.serviceItem	{
		clear: none;
	}
	#servicesList #service1.serviceItem,
	#servicesList #service4.serviceItem {
		clear: left;
	}
	#servicesList .serviceItem h3 {
		font-size: 19px;
		line-height: 23px;
		margin-bottom: 5px;
	}
	#servicesList .serviceItem h4 {
		font-size: 17px;
		line-height: 21px;
	}
	#servicesList .serviceItem p {
		line-height: 18px;
		font-size: 14px;
	}
	
}

.contacts p.address {
	padding: 0 30px;
	padding-top: 20px;
	line-height: 21px;
	font-size: 15px;
	color: #221F1F;
	margin-bottom: 50px;
}
#contactsList {
	padding: 0 30px;
}
#contactsList .contactItem {
	text-align: center;
	margin-bottom: 75px;
}
#contactsList .contactItem img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	margin-bottom: 15px;
}
#contactsList .contactItem p {
	line-height: 18px;
	font-size: 16px;
}
#contactsList .contactItem p a,
#contactsList .contactItem p a:visited {
	color: #221F1F;
	text-decoration: none;
}
.socialLinks {
	width: 98px;
	height: 33px;
	margin: 0 auto;
	clear: both;
	margin-bottom: 30px;
}
.socialLinks a.vimeo,
.socialLinks a.vimeo:visited {
	float: left;
	width: 33px;
	margin-top: 2px;
	height: 30px;
	margin-right: 48px;
	line-height: 500px; overflow: hidden;
	background: url(../img/vimeo-icon.png) left top no-repeat transparent;
}
.socialLinks a.facebook,
.socialLinks a.facebook:visited {
	float: left;
	width: 17px;
	height: 33px;
	line-height: 500px; overflow: hidden;
	background: url(../img/facebook-icon.png) left top no-repeat transparent;
}
@media screen and (min-width: 800px) {
	.contacts p.address {
		padding: 0 90px;
		padding-top: 20px;
	}
	#contactsList {
		padding: 0 90px;
	}
	#contactsList .contactItem {
		float: left;
		width: 45%;
		padding: 0 2.5%;
	}
	#contactsList #contactItem1.contactItem,
	#contactsList #contactItem3.contactItem	{
		clear: left;
	}
}
@media screen and (min-width: 1130px) {
	.section.contacts { position: relative; }
	.contacts p.address {
		float: left;
		padding: 0;
		padding-top: 200px;
		font-size: 17px;
		line-height: 25px;
	}
	#contactsList {
		padding: 0;
		width: 556px;
		float: right;
	}
	#contactsList .contactItem {
		margin-bottom: 50px;
	}
	#contactsList .contactItem {
		width: 260px;
		padding: 0;
		/*padding-left: 3px;*/
	}
	#contactsList #contactItem1.contactItem { float: left; }
	#contactsList #contactItem2.contactItem { float: right; }
	#contactsList #contactItem3.contactItem { float: left; clear: left; }
	#contactsList #contactItem4.contactItem { float: right; }
	#contactsList .contactItem img {
		max-width: 250px;
		margin-bottom: 20px;
	}
	#contactsList .contactItem p {
		line-height: 23px;
		font-size: 17px;
	}
	#contactsList .contactItem p a:hover {
		text-decoration: underline;
	}
	.socialLinks {
		position: absolute;
		left: 0;
		bottom: 0;
		margin-bottom: 0;
		bottom: 50px;
	}	
	
}


#section1 { background-color: #CCCF29; }
#section2 { background-color: #FFDC14; }
#section3 { background-color: #0EA2A4; }
#section4 { background-color: #D3DE55; }
#section5 { background-color: #E96A46; }
#section6 { background-color: #ECE5C8; }
#section7 { background-color: #CCCF29; }
#section1,
#section2,
#section3,
#section4,
#section5 { display:block; }
#section6 { background-color: #ECE5C8; }
#section7 { background-color: #CCCF29; }
/* END layout */