@charset "utf-8";
/* CSS Document */

/* ==========================================================================
  Personalizados
========================================================================== */

body {font-family: 'Avenir Next LT Pro', sans-serif; text-align: center;}
h1 {color:#fff;  font-size: 3rem;  font-family: 'Avenir Next LT Pro Regular', sans-serif; font-weight: 300; padding: 10%; width: 80%;}
a, a:active, a:focus, a:hover {color:#fff;  font-size: 1.5rem;  font-weight: 300;}
.parallax-text { margin: 5% 0; width: 100%; padding: 0; text-align: left;}
p {font-size: 1.5rem; color:#fff;}
.datos {padding-left: 1%;}
ul {padding: 0% 10%; width: 80%;}
.loguete {margin-bottom: 40px; padding-bottom: 40px; overflow: hidden;
background-color: rgba(255, 255, 255, .8);
-webkit-background-color: rgba(255, 255, 255, .8);
-ms-background-color: rgba(255, 255, 255, .8);
}
.loguete img {max-width: 100%; width: 65%; margin-top: 40px;}
.recurso {background-image: url("img/recurso.png"); overflow: hidden; min-height: 750px; background-position: left top; background-size: cover; background-repeat: no-repeat;}

#logoizq {display: none!important;}
#logoder {display: block!important;}

@media screen and (max-width: 1920px) {
	h1 {padding: 5% 10%;}
	#logoizq {display: none!important;}
	#logoder {display: block!important;}
}
@media screen and (max-width: 1440px) {
	.recurso {min-height: 600px;}
	h1 {font-size: 2.5rem;}
}
@media screen and (max-width: 1280px) {
	.recurso {min-height: 550px;}
	h1 {font-size: 2.5rem;}
	a, a:active, a:focus, a:hover {font-size: 1.2rem;}
	ul img {width: 45px;}
}
@media screen and (max-width: 1024px) {
	.recurso {min-height: 450px;}
	h1 {font-size: 2rem;}
	a, a:active, a:focus, a:hover {font-size: 1.2rem;}
	ul img {width: 45px;}
}
@media screen and (max-width: 992px) {
	#logoizq {display: block!important; width: 100%;}
	#logoder {display: none!important;}
}	

@media screen and (max-width: 768px) {
	.recurso {min-height: 450px;}
	h1 {font-size: 2rem;}
	a, a:active, a:focus, a:hover {font-size: 1.2rem;}
	ul img {width: 45px;}
	.loguete img {max-width: 320px;}
	.parallax { background-position: 0 0; background-size: 120%;}
}
@media screen and (max-width: 670px) {
	.recurso {min-height: 376px; background-size: 200%; margin-bottom: 40px;}
	h1 {font-size: 1.5rem; width: 100%;}
	a, a:active, a:focus, a:hover {font-size: 1.2rem;}
	ul img {width: 45px;}
	.loguete {text-align: center;}
	.loguete img {max-width: 320px;}
	.parallax { background-position: 0 0; background-size: 165%;}
}
@media screen and (max-width: 480px) {
	.recurso {min-height: 376px; background-size: 300%; margin-bottom: 40px;}
	h1 {font-size: 1.3rem; width: 100%;}
	a, a:active, a:focus, a:hover {font-size: 1rem;}
	ul img {width: 35px;}
	.loguete {text-align: center;}
	.loguete img {max-width: 320px;}
	.parallax { background-position: 0 0; background-size: 165%;}
	ul {width: 100%; margin-top: 40px;}
	.parallax-text {margin: 10% 0;}
}