a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #b9cbe1;
}
strong {
	color: #525c6e;
}
header {
	padding: 2em 0.8em 0.5em 0.8em;
	width: 100%;
	box-sizing: border-box;
	transition: height 1s;
}
header.sec {
	position: fixed;
	height: 160px;
}
header img {
	width: 80%;
}
header h2 {
	font-size: 1em;
	font-weight: normal;
}
.logo-png {
	max-width: 250px;
	transition: width 1s;
}
#menu .logo-png {
	display: none;
}
#inicio {
	height: 80vh;
	background: #fff;
	background-image: url('../imgs/fivitec_1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	animation: fivitec-slideshow 15s 3s infinite;
}
@keyframes fivitec-slideshow {
	0% { background-image: url('../imgs/fivitec_1.jpg'); }
	33% { background-image: url('../imgs/fivitec_2.png'); }
	67% { background-image: url('../imgs/fivitec_3.jpg'); }
}
.sec h1 {
	color: #7f1710;
}
.sec h2 {
	color: #7f1710;
	text-align: center;
}
#quienes_somos .container {
	text-align: center;
}
#quienes_somos video {
	width: 100%;
}
#pergolas video {
	width: 100%;
}
#pergolas .container {
	padding: 0;
	text-align: center;
}
.pergolas {
	width: 100%;
	height: 256px;
	background-size: cover;
}
#contacto a {
	color: #1f3769;
}
#contacto a:hover {
	color: #1c7bc7;
}
#contacto #mapa {
	width: 100%;
	height: 500px;
}
#contacto #redes {
	list-style: none;
	padding: 0;
}
#contacto #redes li {
	margin: 0.5em 0 0.5em 0;
}
#contacto #redes img{
	width: 25px;
	position: relative;
	top: 5px;
	margin-right: 0.5em;
}
@media screen and (min-width: 600px) {
	header {
		text-align: center;
		display: none;
	}
	header .logo-png {
		display: none;
	}
	.seccontent h2 {
		text-align: left;
	}
	#menu .logo-png {
		position: relative;
		display: inline-block;
		visibility: visible;
		margin: 10px 50px 0 0.8em;
		max-width: 100px;
		top: 5px;
	}
	#menu ul a:first-of-type li {
		padding: 0.5em 0 0.5em 0;
	}
	#menu ul a:first-of-type li img {
		position: relative;
		top: -5px;
	}
	#menu ul a li {
		vertical-align: middle;
		height: 40px;
		padding-top: 1em;
		padding-bottom: 0;
	}
	#quienes_somos h2, #pergolas h2, #contacto h2 {
		display: none;
	}
	#logo-vertical {
		display: none;
	}
	#logo-horizontal {
		position: initial;
		display: inline-block;
		visibility: visible;
		width: 400px;
	}
	#inicio {
		height: 100vh;
	}
	#about {
		padding-bottom: 2em;
	}
	#about #vanpelt {
		display: flex;
		align-content: center;
	}
	#about #vanpelt img {
		float: left;
		margin-right: 1em;
	}
	#about #minic {
		float: right;
		margin-left: 1em;
	}
	footer.inicio {
		height: 50vh;
		text-align: center;
	}
	footer.inicio div {
		width: 50%;
		float: left;
	}
	#trademark {
		width: 100%;
	}
	.sec {
		padding-top: 1em;
	}
	#ofertas.seccontent .imgs {
		width: 100%;
	}
	#ofertas.seccontent img {
		margin: 1em;
	}
	#quienes_somos .container {
		padding-top: 6em;
	}
	#pergolas {
		padding-top: 0;
	}
	#pergolas video {
		width: 50%;
		height: 512px;
		float: left;
	}
	.pergolas {
		width: 25%;
		float: left;
	}
	#p9 {
		width: 50%;
		height: 512px;
	}
	#p22 {
		width: 100%;
		height: 1000px;
	}
	#contacto #data {
		width: 50%;
		float: right;
		padding: 1em 0 0 2em;
		box-sizing: border-box;
	}
	#contacto #mapa_box {
		width: 50%;
		float: left;
		margin: 0 0 2em 0;
	}
}
@media screen and (min-width: 1000px) {
	header.inicio {
		position: absolute;
		background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
		width: 100%;
		text-align: right;
		box-sizing: border-box;
		padding: 3em 2em 0 0;
	}
	header.inicio h2 {
		text-shadow: 2px 1px #000;
		font-size: 1.2em;
		width: 40%;
		float: right;
		clear: both;
	}
	header.sec .logo-png {
		width: 400px;
	}
	#quienes_somos .container {
		padding-top: 3em;
	}
}