html{
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
	height:100%;width:100%;
}
body{
	position: relative;
	height:100%;width:100%;
	font-family: "ACaslonPro-Regular";
	font-size: 16px;font-size: 1.6rem;
}
body.noscroll{overflow:hidden;}

*{box-sizing:border-box;}
h1{
	font-family: "Brandon-One";
	font-size: 44px;font-size: 4.4rem;
}
h2{
	font-family: "Brandon-One";
}

/* home */

.btn{
	position:absolute;
	z-index: 1;
	top:50px;left:50px;
	background:none;border:none;
	font-family: "ACaslonPro-Regular";
	font-size: 14px;font-size: 1.4rem;
	cursor: pointer;
}
.btn::before{
	content:"";
	position: absolute;
	bottom:0;left:5px;
	display: block;
	height:1px;
	width: 0;
	background: #000;
	-webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
.btn:hover::before{
	width:80px;
}

.home{
	position: relative;
	z-index: 0;
	height: 100%;width: 100%;
}
.home::before{
	height: 100%;width:0;
	content: '';
	display: inline-block;
	vertical-align: middle;
}
.home .title{
	display: inline-block;
	vertical-align: middle;
}
.home div{
	width: 100%;
	text-align: center;
}
.home p{line-height:24px;line-height:2.4rem;}
.home p strong{
	font-family: "ACaslonPro-Semibold";
}
.separation{
	margin:15px auto 24px auto;
	position: relative;
	height: 1px;
	background: #dcbd9a;
	border:none;
}
.home .separation{
	width: 142px;
}
.separation::before, .separation::after{
	content: "";
	display: block;
	position: absolute;
	top:-1.5px;
	height: 4px;width: 4px;
	background: #dcbd9a;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.separation:before{
	left: 0;
}
.separation:after{
	right: 0;
}

.latest-projects{
	position:absolute;
	bottom:60px;
}
.latest-projects h2{font-size:18px;font-size:1.8rem;}
.latest-projects hr{
	border:0;
	width:1px;height:25px;
	background:#dcbd9a;
	margin:15px auto;
}
.latest-projects li{
	display:inline-block;
}
.latest-projects li span{
	display:block;
	width:5px;height:5px;
	margin-bottom:2px;
	background:#dcbd9a;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.latest-projects li a{
	padding:0 7px;
	font-size:16px;font-size:1.6rem;
	color:#121113;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.latest-projects li a:hover{color:#dcbd9a;}

.wait{
	display: block;
	position: absolute;
	top: 50px;right: 50px;
	font-size: 14px;font-size: 1.4rem;
}

/* about */
.overlay-about{
	position:absolute;
	z-index:2; 
	top:0;left:0;width:100%;height:100%;
	background:transparent;
	background:rgba(0,0,0,.5);

	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.overlay-about.open{
	opacity: 1;
	visibility: visible;
}
.overlay-about.remove-transition{
	-webkit-transition: opacity 0.5s 0.3s, visibility 0s 0.4s;
  	transition: opacity 0.5s 0.3s, visibility 0s 0.4s;
}
.overlay-about > div{
	display: block;
	position:absolute;
	top:0;left:-350px;height:100%;width:350px;
	background: #fff;
	-webkit-transition: all 0.3s 0.3s ease-in-out;
  	transition: all 0.3s 0.3s ease-in-out;
}
.overlay-about > div.remove-transition{
	-webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
.overlay-about.open div{
	left:0;
}
.content-about{
	position: absolute;
	top:50%;
	margin-top:-210px;
}
.content-about .separation{
	width: 112px;
	margin: 30px auto 30px auto;
}
.content-about div.img{
	display:block;
	margin:0 auto;
	height:74px;width:74px;
	background: url("../img/kevinchapron.png") no-repeat center center;
	background-size: cover;
	border: 1px solid #dcbd9a;
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.content-about h2{
	font-size: 14px;font-size: 1.4rem;
	padding:0 50px;
	margin-bottom: 20px;
}
.content-about p{
	padding:0 50px;
	font-size: 14px;font-size: 1.4rem;
	line-height: 22px;line-height: 2.2rem;
	text-align: justify;
}
.content-about p a{
	color:#dcbd9a;
}
.social{
	position: absolute;
	height: 85px;
	width: 100%;
	bottom:0;left:0;
	text-align: center;
}
.social a{
	position:relative;
	text-decoration: none;
	display: inline-block;
	height: 33px;width: 33px;
	margin:0 13px;
	font-size: 18px;font-size: 1.8rem;
	color:#dcbd9a;
	border: 1px solid #dcbd9a;
	border: 1px solid rgba(220,189,154,.5);
	-ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}
.social a i{
	position:absolute;
	top:25%;left:25%;
	width:18px;height:18px;
	-ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.social a:hover{border: 1px solid rgba(220,189,154,1);}

@media screen and (max-width: 480px) {
	.home::before{
		display:none;
	}
 	.btn{display:none;} 
 	.wait{display:none;} 
 	.home div{margin-top:50px;}
 	.title{padding:0 10px;}
 	.latest-projects{
		position:static;
		padding:20px 0;
	}
	.latest-projects li{
		display:block;
		padding:5px 0;
	}
	.latest-projects li span{
		display:none;
	}
}