html, body{padding:0;margin:0;width: 100%;height: 100%;font-family: 'Merriweather', serif;}
*{box-sizing:border-box;}
a{transition: ease-out 0.3s;text-decoration: none;color:inherit;}
.wp{
	max-width: 1280px;
	width: 100%;
	padding: 0 40px;
	margin:auto;
	position: relative;
}
.anima{transition: all 1.5s cubic-bezier(.165,.84,.44,1);}
.hideme{transform: translateY(30px);opacity: 0}
.hidemeX{transform: translateX(-30px);opacity: 0}
header{
	text-align: center;
	padding: 20px 0;
	position: fixed;
	background-color: rgba(255,255,255,1);
	z-index: 99;
	width: 100%;
}
header h1 img{width: 240px}
header img.logoConfra{
	position: absolute;
	top:0px;right: 40px;
}
header nav{
	position: fixed;
	display: flex;
	width: 100%;
	z-index: 998;
	height: 100vh;
	top:0;left: 0;
	justify-content: center;
	align-items: center;
	background-color: #58595b;
	display: none;	
}
header nav ul{
	width: 240px;
	border: 1px solid #FFF;
	margin:auto;
	top: 50vh;
	transform: translateY(-50%);
	position: relative;
}
header nav ul li{
	padding: 20px;
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: .3em;
	position: relative;
}
header #burger{
	padding:2px 0px;
	position: absolute;
	padding-left: 0;
	display: block;
	cursor: pointer;
	bottom:0px;right: 40px;
	z-index: 999
}
header #burger i{width: 30px;height: 3px;background-color: #a0a0a0;margin:5px 0;display: block;transition: ease-out 0.5s;top:0;position: relative;}
header #burger.open i{background-color: #FFF}
header #burger.open i:nth-child(2){transform: scale(2);opacity: 0}
header #burger.open i:nth-child(1){transform: rotate(45deg);top:8px;}
header #burger.open i:nth-child(3){transform: rotate(-45deg);top:-8px;}
/*HOME*/
#home{
	padding-top: 130px;
	height: 100vh;
}
#home ul.slides,
#home ul.slides li,
#home ul.slides li .wp{
	height: 100%;
}
#home .flex-control-nav, #home .flex-direction-nav{display: none;}
#home ul.slides li{
	position: relative;	
	overflow: hidden;
}
#home ul.slides li .imgSlider{
	position: absolute;	
	width: 100%;
	height: 100%;
	background-size:cover;
	background-position: center;
	transition: all 9s cubic-bezier(.165,.84,.44,1);
	z-index: 0;
	opacity: 0;
	transform: scale(1.2)
}
#home ul.slides li.flex-active-slide .imgSlider{transform: scale(1);opacity: 1}
#home ul.slides li:after{
	content: '';
	width: 100%;
	height: 50%;
	bottom: 0;
	position: absolute;
	opacity: .8;
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); 
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); 
}
#home ul.slides li .wp{
	display: flex;
	align-items: flex-end;
	color: #FFF;
	z-index: 9
}
#home ul.slides li .wp h2{opacity:0;transform:translateY(30px);font-size: 60px;margin-bottom: 30px;font-weight: 300;transition: all 1s cubic-bezier(.165,.84,.44,1);}
#home ul.slides li .wp p{opacity:0;transform:translateY(30px);max-width: 490px;font-size: 30px;font-weight: 300;margin-bottom: 50px;line-height: 1.2;transition: all 1s cubic-bezier(.165,.84,.44,1);}
#home ul.slides li.flex-active-slide h2,
#home ul.slides li.flex-active-slide p{transform: translateY(0px);opacity: 1;transition-delay:1.5s;}

#proyecto{padding: 100px 0 50px;text-align: center;color:#58595b;}
#proyecto h3{letter-spacing: .1em;font-size: 24px; text-transform: uppercase;font-family: 'Open Sans', sans-serif;font-weight: 600}
#proyecto h2{font-size: 36px;font-weight: 300;padding: 40px 0px;max-width: 900px;margin: auto;line-height: 1.2}
#proyecto p{font-size: 19px;font-weight: 300;line-height: 1.6;color:#8a8c90;padding: 0 40px}
#proyecto small{
	display: block;
	max-width: 740px;
	font-weight: 600;
	color:#58595b;
	text-transform: uppercase;
	line-height: 1.4;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	margin:auto;
	margin-top: 40px;
	letter-spacing: .1em;
}
#contacto{
	padding-top: 100px;
	position: relative;
}
#contacto .wp{
	background-image: url(../img/img-footer.png);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: stretch;
	padding:0;
	max-width: 1200px;
}
#contacto .wp .mid{
	width: 50%;
	color: #FFF;
	padding: 40px
}
#contacto .wp .mid.form{
	background-color: rgba(42,54,60,.75);
	text-align: right;
}
#contacto .wp .titleVivi{
	position: absolute;
	background-color: #423d3d;
	color: #FFF;
	text-transform: uppercase;
	padding: 10px 20px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	letter-spacing: .7em;
	font-size: 2.5em;
	top:-30px;left: -30px;
}
#contacto .wp .titleVivi:after{
	content: '';
	height: 100%;
	width: 50vw;
	background-color: #423d3d;
	right: 100%;top:0;
	position: absolute;
}
#contacto .wp .mid.form h3{letter-spacing:.05em;margin-top:30px;font-size: 24px; text-transform: uppercase;font-family: 'Open Sans', sans-serif;font-weight: 600}
#contacto .wp .mid.form p{font-size: 17px;font-weight: 300;margin:20px 0;line-height: 1.4;letter-spacing: .05em}
#contacto .wp .mid.form input,
#contacto .wp .mid.form textarea{
	-webkit-appearance:none;
	appearance:none;
	outline: none;
	display: block;
	background-color: transparent;
	border:none;
	resize: none;
	color: #FFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: .1em;
	height: 40px;
	border-bottom: 1px solid #FFF;
	border-radius: 0;
	width: 100%;
	margin-bottom: 15px;
	padding-left: 10px
}

input::-webkit-input-placeholder { color: #FFF; } /* WebKit */
input::-moz-placeholder { color: #FFF; } /* Firefox 19+ */
textarea::-webkit-input-placeholder { color: #000; } /* WebKit */
textarea::-moz-placeholder { color: #000; } /* Firefox 19+ */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] { -moz-appearance:textfield; }

#contacto .wp .mid.form textarea{height: 150px;background:#FFF;color:#000;padding: 10px}
#contacto .wp .mid.form button{
	-webkit-appearance:none;
	appearance:none;
	outline: none;
	border:none;
	color: #FFF;
	background-color: #423d3d;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	cursor: pointer;
	display: inline-block;
	padding: 10px 30px;
	border-radius: 2px;
	transition: ease-out 0.3s
}
#contacto .wp .mid.text{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
#contacto .wp .mid.text > img{margin: 30px 0;}
#contacto .wp .mid.text > p{
	margin: 30px 0;
	font-size: 20px;
	font-weight: 300;
	max-width: 350px;
	line-height: 1.4;
	letter-spacing: .05em
}
#contacto .wp .valid-text{
	font-family: 'Open Sans', sans-serif;
	padding: 10px 0;
	text-align: center;
	font-size: 12px
}
footer{
	margin-top: 40px;
	background-color: #a39d9c;
	padding-bottom: 30px;
	text-align: center;
}
footer ul{
	background-color: #918a89;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	padding: 20px 40px;
	display: inline-block;
	margin-bottom: 50px;
}
footer ul li{display: inline-block;color:#423d3d;margin:0 10px 20px;}
footer img{margin:20px;}
footer p{color: #423d3d;margin-top: 50px;}
footer p span{padding:0 10px}

@media screen and (max-width: 960px) {
	.wp{padding: 0 15px;}
	header{text-align: left;padding: 10px 0;}
	header h1 img{width: 150px;}
	header img.logoConfra{right: 15px;width: 110px}
	header #burger{bottom: -5px;right: 15px;}
	header nav{text-align: center;}
	#home{padding-top: 78px}
	#contacto .wp .titleVivi{left: 0}
}
@media screen and (max-width: 720px) {
	#home{height: calc(100vh - 50px);}
	#home ul.slides li .wp h2{font-size: 40px;margin-bottom: 20px;}
	#home ul.slides li .wp p{font-size: 22px;margin-bottom: 70px}
	#proyecto{padding: 50px 0}
	#proyecto h3{font-size: 20px}
	#proyecto h2{font-size: 28px;padding: 35px 0;line-height: 1.3}
	#proyecto p{font-size: 16px;padding: 0;}
	#proyecto small{font-size: 16px;}
	#contacto .wp .titleVivi{font-size: 1.8em}
	#contacto .wp{display: block;background: none;}
	#contacto .wp .mid{width: 100%;padding: 20px;}
	#contacto .wp .mid.text{
		background-image: url(../img/img-footer.png);
		background-size: cover;
		background-position: center;
	}
	#contacto{padding-top: 40px}
	#contacto .wp .mid.text > img{max-width: 250px}
	#contacto .wp .mid.form{background-color: rgba(42,54,60,1);padding-bottom: 40px}
	#contacto .wp .mid.form p{font-size: 12px;line-height: 1.5}
	footer {margin-top: 25px; padding-bottom: 40px;}
	footer ul{padding: 20px;width: 100%;}
	footer > img{max-width: 80%;margin:15px;max-width: 250px;}
	footer > img.logoRO{margin-left: -20px;margin-bottom: 5px}
	footer > img.logoDev{max-width: 155px}
	footer p{line-height: 1.5;font-size: 14px}
	footer p span{display: none;}
	footer p a{display: block;}
	footer ul li{margin-bottom: 0}
	footer p.hideme{opacity: 1}
}
@media screen and (min-width: 1100px) {
	footer a:hover{color:#000;}
	#contacto .wp .mid.form button:hover{
		background-color: #FFF;
		color: #423d3d;
	}
	header nav ul li:after{
		content: '';
		width: 0;
		left: 50%;
		transform: translateX(-54%);
		height: 3px;
		transition: ease-out 0.4s;
		background-color: #FFF;
		bottom:10px;
		position: absolute;
	}
	header nav ul li:hover:after{
		width: 50px;
	}
}