@import url("../font/webfont.css");
*{
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
body{
	font: 0.8em/1.4 open_sanslight, promptregular, sans-serif;
	color: #e1d3c8;
	background-color: #282828;
}
header, footer{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.layout{
	height: 100vh;
}
h1{
	font: 700 4em pecitabook;
}
h2{
	font: 700 2.25em ostrich_sansmedium;
	padding: 80px 0 20px 5%;
}
h3{
	font-family: ostrich_sansmedium;
}
p, ol li, label{	
	font-size: 1em;
	text-align: justify;
}
em{
	font-family: open_sanslight, sans-serif;
	font-style: italic;
	padding: 0 5%;
}
a{
	text-decoration: none;
}
img{
	max-width: 100%;
}
/*home*/
.slideshow{ 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
.slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
 	/*name*/
    -webkit-animation-name: imageAnimation;
    -moz-animation-name: imageAnimation;
    -o-animation-name: imageAnimation;
    -ms-animation-name: imageAnimation;
    animation-name: imageAnimation;
	/*duration*/
    -webkit-animation-duration: 36s;
    -moz-animation-duration: 36s;
    -o-animation-duration: 36s;
    -ms-animation-duration: 36s;
    animation-duration: 36s;
    /*timing-function*/
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
    /*iteration count*/
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite 0s;
    -o-animation-iteration-count: infinite 0s;
    -ms-animation-iteration-count: infinite 0s;
    animation-iteration-count: infinite 0s;
    /*delay*/
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    -ms-animation-delay: 0s;
    animation-delay: 0s;
}
.slideshow li:nth-child(1) span { 
    background-image: url(../images/bg-img1.jpg) 
}
.slideshow li:nth-child(2) span { 
    background-image: url(../images/bg-img2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url(../images/bg-img3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url(../images/bg-img4.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url(../images/bg-img5.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.slideshow li:nth-child(6) span { 
    background-image: url(../images/bg-img6.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1; -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0; -moz-animation-timing-function: ease-in; }
    8% { opacity: 1; -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0; -o-animation-timing-function: ease-in; }
    8% { opacity: 1; -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0; -ms-animation-timing-function: ease-in; }
    8% { opacity: 1; -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
.no-cssanimations .slideshow li span{
	opacity: 1;
}
.home{
	height: 100vh;
}
.home h1 {
	line-height: 1;
	color: #e1d3c8;
	text-align: right;
	position: absolute;
	top: 40%;
	left: 12%;
}
.home h2{
	font: 1.4em ostrich_sansmedium;
	text-transform: uppercase;
	color: #e1d3c8;
	position: absolute;
	top: 48%;
	left: 40%;
	padding: 0;
}
strong{
    font-size: 1.2em;
    color: #e1d3c8;
    text-align: center;
    position: absolute;
    top: 55%;
    left: 25%;
}
.home-menu{
	width: 100%;
	overflow: hidden;
	position: absolute;
	bottom: 0;
}

.home-menu a{
	font: 1.6em ostrich_sansmedium;
	width: 25%;
	color: #e1d3c8;
	text-align: center;
	float: left;
	padding: 10px 0;
}
.home-menu a:hover{
	background-color: #e1d3c8;
	color: #282828;
	transition: 0.5s linear;
}
/*header*/
header{
	overflow: hidden;
}
.layout-header{
	max-width: 960px;
	margin: 0 auto;
}
header h1{
	font-size: 2.25em;
	color: #e1d3c8;
	float: left;
	margin: 10px 0 10px 5%;
}
header li a{
	font-family: ostrich_sansmedium;
}
.fixed{
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	background: #e1d3c8;
	transition: ease-in-out 300ms;
}
.fixed h1, .fixed ul li a{
	color: #282828;
}
.fixed .hamburger span{
	background: #282828;
}
.open header h1{
	color: #e1d3c8;
}
/*about*/
.about{
	overflow: hidden;
	padding-bottom: 220px;
}
.about-panorama-1{
	position: relative;
}
.about-img1, .about-img3 {
	position: absolute;
	top: 0px;
	left: -20%;
}
.about-img2, .about-img4{
	position: absolute;
	top: 100px;
	right: -20%;
}
.about-panorama-2{
	position: relative;
}
.about article{
	margin: 180px 5% 0;
}
.about-imgbox{
	overflow: hidden;
	margin: 0 5% 25px;
}
.about-imgbox img{
	width: 30%;
	margin: 0 1.5%;
	float: left;
}
.about h3{
	font-size: 1.8em;
	margin-bottom: 20px;
}
.about p{
	margin-bottom: 20px;
}
/*experience*/
em{
	text-align: center;
	display: block;
	margin-bottom: 40px;
}
.timeline{
	position: relative;
	padding: 0 5%;
}
.experience span{
	position: absolute;
	display: block;
	width: 20%;
	height: 5px;
	background-color: #e1d3c8;
	right: 5%;
}
.year{
	position: absolute;
	right: 5%;
	margin-top: 10px;
}
/*experience-timeline animation*/
.is-hidden {
	visibility: hidden;
}
.bounce-in {
	visibility: visible;
	animation: cd-bounce-1 1s;
}
@keyframes cd-bounce-1 {
	0% {
  		opacity: 0;
    	transform: scale(1.1);
    }
  	100% {
  		opacity: 1;
  		transform: scale(1);
  	}
}
/*experience-timeline animation-end/ timeline css-start*/
.timeline-block{
	overflow: hidden;
	padding-top: 40px;
}
.timeline-block:last-child{
	padding-bottom: 40px;
}
.timeline-icon{
	float: left;
	width: 15%;
	height: 100%;
}
.timeline-icon img{
	width: 100%;
}
.timeline-content{
	width: 80%;
	float: right;
}
.timeline-content p{
	padding-bottom: 10px;
}
.timeline-content ol li{
	width: 90%;
	list-style: disc;
	margin: 10px 0 0 8%;
	text-align: justify;
}
.timeline-content ol li:last-child{
	margin-bottom: 10px;
}
.date{
	font-style: italic;;
	clear: both;
	width: 80%;
	padding-left: 20%;
	font-size: 1.1em;
}
/*service*/
.service-block{
	text-align: center;
	margin: 0 auto;
	padding: 5%;
}
.service-block img{
	width: 40%;
	margin: 10px;
}
.service-block h3{
	font-size: 1.6em;
}
.service-block nav{
	width: 60%;
	height: 30px;
	line-height: 30px;
	border: 1px solid #e1d3c8;
	margin: 40px auto 0;
}
.service-block nav a{
	color: #e1d3c8;
}
/*contact*/
.card{
	width: 100%;
}
.contact p{
	text-align: center;
	margin-top: 20px;
}
.address li{
	text-align: center;
}
.address a{
	color: #e1d3c8;
}
.address li img{
	width: 30px;
	margin-top: 20px;
}
.social{
	padding: 20px 5% 0;
	overflow: hidden;
}
.social li {
	float: left;
	width: 100%;
	text-align: center;
}
.social li img{
	width: 30px;
	text-align: center;
}
form{
	width: 80%;
	margin: 20px auto;
}
form li{
	border-bottom: 1px solid #e1d3c8;
	margin: 5%;
}
form ul li:nth-child(5){
	border-bottom: none;
}
input, textarea{
	width: 100%;
	font-family: open_sanslight, sans-serif;
	color: #e1d3c8;
	background: none;
	border:none;
}
textarea{
	height: 100px;
}
.submit{
	width: 40%;
	height: 30px;
	line-height: 30px;
	border: 1px solid #e1d3c8;
	margin: 0 auto;
}
/*footer*/
footer{
	margin: 40px 0 10px;
}
small{
	display: block;
	font-size: 0.6em;
	text-align: center;
}
	@media screen and (min-width: 20em){
	.language{
		position: absolute;
		top: 18px;
		right: 10%;
		color: #e1d3c8;
		padding: 2px 5px;
	}
	.language-button{
		color: #e1d3c8;
		font-size: 0.7em;
		float: left;
	}
	.color{
		color: #282828;
	}
	.position{
		right: 20%;
	}
	/*Hamburger*/
	.hamburger{
		width: 30px;
		height: 30px;
		float: right;
		position: relative;
		margin: 10px 5% 10px 0;
	}
	.hamburger span{
		width: 30px;
		height: 2px;
		margin: 2px;
		background: #e1d3c8;
		display: block;
		position: absolute;
	}
	.hamburger span:nth-child(1) {
		top: 0px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		transition: ease-in 300ms;
	}
	.hamburger span:nth-child(2) {
		top: 10px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		transition: ease-in 300ms;
	}
	.hamburger span:nth-child(3) {
		top: 20px;
		-webkit-transform-origin: left center;
		-moz-transform-origin: left center;
		-o-transform-origin: left center;
		transform-origin: left center;
		transition: ease-in 300ms;
	}
	.hamburger.open span:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		transition: ease-in 300ms;
		background: #282828;
	}
	.hamburger.open span:nth-child(2) {
	  	width: 0%;
		opacity: 0;
	}
	.hamburger.open span:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
		transition: ease-in 300ms;
		background: #282828;
	}
	/*menu*/
	.menu{
		width: 100%;
		height: 100vh;
		background: #e1d3c8;
		padding-top: 40px;
		z-index: 1;
		display: none;
		transition: ease-in 300ms;
	}
	.menu li{
		width: 80%;
		margin: 20% auto;
		text-align: center;
	}
	.menu li a{
		font-size: 1.6em;
		color: #282828;
	}
	.menu li a:hover{
		font-weight:900;
	}
	.active{
		font-weight:900;
	}
	.expand{
		display: block;
		transition: ease-in 300ms;
	}
}
		@media screen and (min-width: 22em){
			body{
				font-size: 1em;
			}
			.hamburger{
				margin-top: 15px;
			}
			.home h1{
				left: 10%;
			}
			.about-img2, .about-img4{
				top: 100px;
			}
			.about article{
				margin-top: 200px;
			}
		}
			@media screen and (min-width: 25em){
				.about-img2, .about-img4{
					top: 120px;
				}
				.about article{
					margin-top: 240px;
				}
			}
				@media screen and (min-width: 37em){
					body{
						font-size: 1.2em;
					}
					h1{
						font-size: 3.5em;
					}

					/*about*/
					.about-img2, .about-img4{
						top: 160px;
					}
					.about article{
						margin-top: 300px;
					}
					/*header*/
					header h1{
						width: 30%;
					}
				}
					@media screen and (min-width: 48em){
						body{
							font-size: 1.5em;
						}
						h1{
							font-size: 4em;
						}
						h2{
							padding-left: 10%;
						}
						header h1{
							margin-left: 10%;
						}
						.hamburger{
							margin: 20px 10% 0 0;
						}
						/*home*/
						.home{
							padding-top: 60px;
						}
						.home h1{
							left: 23%;
						}
						.home h2{
							left: 45%;
						}
						strong{
							left: 33%;
						}
						/*about*/
						.about{
							padding-bottom: 400px;
						}
						.about-img2, .about-img4{
							top: 200px;
						}
						.about article{
							margin: 400px 10% 0;
						}
						/*experience*/
						.timeline{
							padding: 0 10%;
						}
						.experience span, .year{
							right: 10%;
						}
						/*service*/
						.service-block img{
							width: 25%;
						}
						/*contact*/
						.social{
							padding: 20px 30% 0;
						}
					}
						@media screen and (min-width: 60em){
						h1{
							font-size: 5em;
						}
						h2{
							padding-top: 100px;
						}
						/*home*/
						.home{
							padding-top: 100px;

						}
						.home h2{
							top: 47%;
							font-size: 2em;
						}
						strong{
							font-size: 1.5em;
						}
						/*header*/
						header{
							padding: 0 10%;
						}
						header h1{
							width: 20%;
							float: left;
							margin: 20px 0 10px;
						}
						.langauge{
							position: absolute;
							top: 15px;
							right: 160px;
						}
						.language-button{
							color: #e1d3c8;
						}
						.fixed nav, .fixed nav a{
							color: #282828;
						}
						.hamburger{
							margin-right: 0px;
						}
						/*about*/
						.about{
							padding-bottom: 500px;
						}
						.about-img2, .about-img4{
							top: 260px;
						}
						.about article{
							margin: 540px 10% 0;
						}
					}
						@media screen and (min-width: 65em){
							body{
								font-size: 1em;
							}
							.layout{
								max-width: 960px;
								height: 100vh;
								margin: 0 auto;
								position: relative;
							}
							h1{
								font-size: 5.2em;
							}
							h2{
								font-size: 3em;
								padding: 120px 0 20px;
								max-width: 960px;
								margin: 0 auto;
							}
							p, em, a, input, textarea, .date, ol li{
								font-size: 1.1em;
							}
							/*home*/
							.home{
								height: 100vh;
								background-image: none;
								background-color: #e1d3c8;
								background-attachment: all;
								padding-top: 0;
							}
							.home h1{
								left: 37%;
							}
							.home h2{
								top: 50%;
								left: 48% ;
							}
							strong{
								font-size: 1.25em;
								top: 60%;
								left: 42%;
							}
							.home li{
								font-size: 1.25em;
								bottom: 10px;
							}
							/*header*/
							header h1{
								width: 10%;
								font-size: 2em;
								color: #e1d3c8;
								float: left;
								margin: 20px 0 10px;
							}
							.language{
								position: fixed;
								top: 3%;
								right: 3%;
							}							
							.language-button{
								color: #e1d3c8;
							}
							.position{
								right: 3%;
							}
							.hamburger{
								display: none;
							}
							.menu{
								width: 72%;
								height: 80px;
								display: block;
								float: right;
								background: none;
								padding: 0;
							}
							.menu li{
								width: auto;
								float: left;
								margin: 0 0 0 12%;
								line-height: 80px;
							}
							.menu li a{
								font-size: 1.6em;
								color: #e1d3c8;
							}
							.hide{
								display: none;
							}
							/*about*/
							.about{
								padding-bottom: 600px;
							}
							.about-img1, .about-img2, .about-img3, .about-img4{
								width: 60%;
							}
							.about-img1, .about-img3{
								left: 0;
							}
							.about-img2, .about-img4{
								right: 0;
							}
							.about-img3{
								top: 40px;
							}
							.about-img4{
								top: 300px;
							}
							.about-imgbox{
								max-width: 960px;
								margin: 0 auto;
							}					
							.about article{
								max-width: 960px;
								margin: 500px auto 0;
							}
							.about h3{
								font-size: 2.5em;
								margin-bottom: 20px;
							}
							.about p:last-child{
								margin-bottom: 50px;
							}
							/*experience*/
							.experience, .service{
								max-width: 960px;
								margin: 0 auto;
							}
							.timeline{
								position: relative;
								overflow: hidden;
								padding: 0;
								margin-bottom: 20px;
							}
							.experience span, .year{
								right: 0;
							}
							.timeline::before {
								content: '';
							 	position: absolute;
								top: 40px;
								left: 45%;
							  	height: 100%;
							  	width: 2px;
							  	margin: 0 5%;
							  	background: #e1d3c8;
							  	z-index: -1;
							}
							.timeline-block{
								width: 100%;
								padding: 40px 0;
							}
							.timeline-icon{
								float: none;
								margin: 0 auto 20px;
								width: 10%;
							}
							.timeline-icon img{
								width: 100%;
								background-color: #282828;
								padding: 5px;
							}
							.timeline-content{
								width: 45%;
								float: right;
							}
							.timeline-content ol li{
								width: 90%;
								list-style: disc;
								margin: 10px 0 0 10%;
							}
							.date{
								clear: none;
								width: 45%;
								padding: 0;
							}
							.right{
								float: right;
								text-align: left;
							}
							.left{
								float: left;
								text-align: right;
							}
							/*service*/
							.service{
								height: 100vh;
							}
							.service-block{
								width: 33%;
								text-align: center;
								margin: 5% auto 0;
								padding: 1%;
								float: left;
							}
							.service-block img{
								width: 50%;
								margin: 10px;
							}
							.service-block h3{
								height: 100px;
								font-size: 2em;
							}
							.service-block nav{
								width: 90%;
							}
							/*contact*/
							.contact div{
								overflow: hidden;
								height: 300px;
							}
							.card{
								width: 50%;
								float: left;
							}
							.contact p{
								font-size: 1.4em;
								width: 50%;
								float: right;
								text-align: center;
								margin: 0 auto 10px;
							}
							.address{
								width: 50%;
								font-size: 1.4em;
								float: right;
							}
							.address li{
								width: 100%;
								text-align: center;
							}
							.address li img, .social li img{
								width: 40px;
							}
							.social{
								float: right;
								width: 50%;
								padding: 50px 10% 0;
							}
							}
							form{
								width: 60%;
								margin: 60px auto;
							}
							input, textarea{
								width: 100%;
								background: none;
								border:none;
							}
							.submit{
								width: 40%;
								height: 30px;
								line-height: 30px;
								border: 1px solid #e1d3c8;
								margin: 0 auto;
							}
							/*footer*/
							small{
								font-size: 0.8em;
							}
						}