@charset "utf-8";
/* CSS Document */
body{
	font-family: Centaur, Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;	font-size: 20px;
	color: black;
	float: left;
	margin: auto;
	width: 100%;
	height: auto;
	text-align: center;
	background-color: rgba(245,245,245,0.30);
}
body a{
	text-decoration: none;
}
body a:visited{
	text-decoration: none;
	color: white;
}
			/* header smaller */ @media (max-width: 320px) {
			header{
				width: 100%;
				padding: 2%;
				float: left;
				background-color: white;
				}
			#delab{
				width: 70%;
				height: auto;
				}}
			/*header small */ @media (min-width: 321px) and (max-width:480px) {
			header{
				width: 100%;
				padding: 2%;
				float: left;
				background-color: white;
				}
			#delab{
				width: 224px;
				height: auto;
				}}
			/* header smalless */ @media (min-width: 481px) and (max-width:768px) {
			header{
				width: 100%;
				padding: 10px;
				float: left;
				background-color: white;
				}
			#delab{
				width: 192px;
				float: left;
				height: auto;
				animation: action 10s ease 0s infinite normal;
				}}
			/*header normal */ @media (min-width: 769px) {
			header{
				width: 100%;
				height: 100px;
				float: left;
				position: fixed;
				z-index: 1;
				background-color: rgba(0,0,0,0.84);
				}
			#delab {
				width: 192px;
				margin: 1% 10%;
				float: left;
				animation: action 10s ease 0s infinite normal;
				}}
/*nav smaller */ @media (max-width: 768px) {
nav{
	width: 100%;
	float: left;
	margin: 0%;
}
#navigation {
	background-color: black;
	}
.control-menu {
    background-color: transparent;
    background-position: center center;
    border: 2px solid rgba(73,165,191,0.70);
	display: block;
    float: right;
    height: 40px;
    margin: 8px 4% 8px 0%;
    width: 40px;
}
.control-menu a span {
    display: inline-block;
    height: 40px;
    text-indent: -9999px;
    width: 40px;
}
.control-menu .close {
    background-image: url("Imagenes/close-menu.png");
    background-position: center center;
    background-repeat: no-repeat;
    display: none;
}
.control-menu .open {
    background-image: url("Imagenes/open-menu.png");
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
}
ul.nav-items {
    clear: both;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease-in-out 0s, background-color 2s ease 0s;
}
#navigation:target ul.nav-items {
    background: black none repeat scroll 0 0;
    height: 15.8em;
    transition: height 0.4s ease-in-out 0s, background-color 0.9s ease 0s; 
}
.close { 
   display:none;
}      
#navigation:target .open {
      display: none;
}
#navigation:target .close {
        display: block;
}
ul.nav-items li {
    display: block;
}
ul.nav-items a {
    border: 2px solid white;
    color: white;
    display: block;
    height: 33px;
	width: 87%;
    padding: 1.7% 0% 0%;
	margin: 1.5%;
}
ul.nav-items li a span {
    margin: 0.5% 0% 1% 3.5%;
	float: left;
}
#Contacto a{
	background-color: rgba(73,165,191,0.70);
}
.menu{
	width:20px;
	height: auto;
	margin: 0.8% 1% 0% 5%;
	float: left;
	}}
/*nav normal */ @media (min-width:769px){
nav{
	width: 70%;
	height: 100px;
	position: relative;
	float: right;
	background-color: transparent;
}
#navigation{
	background-color: transparent;
	position: fixed;
	width: inherit;
	margin-top: 0.5%;
	z-index: 1;
	padding-bottom: 1.5%;
}
.control-menu {
    display: none;
	visibility: hidden;
  }    
ul.nav-items li {
    display: block;
}
ul.nav-items a {
    border: 2px solid white;
	text-align: center;
    color: white;
    display: block;
	float: left;
    height: 31px;
	width: 17%;
    padding: 1.4% 0% 0%;
	margin: 0% 0.5%;
}
ul.nav-items li a span {
	text-align: center;
}
#Inicio a{
	margin-left: 5%;
}
#Contacto a{
	background-color: rgba(73,165,191,0.70);	
}
ul.nav-items a:hover{
	transition: .3s ease-in-out;
	background-color: white;
	color: black;
	transform: scale(1.05);
}
.menu{
	width:25px;
	height: auto;
	margin: 0.8% 1% 0% 5%;
	float: left;
}}
		/*section smaller */ @media (max-width: 480px) {
	section {
	float: left;
	margin: auto;
	width: 100%;
	height: auto;
}
section p{
	padding: 2% 3%;
	margin: 2% 1% 0%;
}
section span{
	font-weight: bold;
}
#superior{
	background-color: white;
	color: black;
	width: 100%;
	float: left;
}
.texto img{
	width: 23%;
	float: left;
	margin: 2% 38.5%;
}}
		/*section small */ @media (min-width:481px) and (max-width: 768px) {
	section {
	float: left;
	margin: auto;
	width: 100%;
	height: auto;
}
section p{
	padding: 2% 3%;
	margin: 2% 1% 0%;
}
section span{
	font-weight: bold;
}
#superior{
	background-color: white;
	color: black;
	width: 100%;
	float: left;
}
.texto{
	width: 42%;
	float: left;
	margin: 2% 4%;
}
.texto img{
	width: 30%;
	float: right;
	margin: 2% 35%;
}
#texto3{
	float: left;
}}
		/*section normal */ @media (min-width: 769px) {
	section {
	float: left;
	margin: auto;
	width: 100%;
	height: auto;
}
section p{
	padding: 2% 2%;
	font-size: 24px; 
	margin: 0%;
}
section span{
	font-weight: bold;
}
#superior{
	background-color: white;
	color: black;
	width: 100%;
	float: left;
}
#texto1 {
	color: black;
	float: left;
	width: 46%;
	padding: 2%;
	margin-bottom: 2%;
}
#texto1 img{
	width: 20%;
	float: right;
	margin: 3% 0% 0% 2%;
}
#texto2 {
	color: black;
	float: left;
	width: 46%;
	padding: 2%;
	margin-bottom: 2%;
}
#texto2 img{
	width: 20%;
	float: right;
	margin: 3% 0% 0% 2%;
}
#texto3 {
	color: black;
	float: left;
	width: 94%;
	padding: 2%;
	margin-bottom: 2%;
}}
@keyframes latido{
	0% {transform: scale(1.00); filter: opacity(60%)}
	75% {transform: scale(1.15); filter: opacity(100%)}
	100% {transform: scale(1.00); filter: opacity(60%);}
}
footer {
	float: left;
	width: 100%;
	background: rgba(0,0,0,1.0);
}
footer p{
	color: white;
	margin: 0.5%;
	}
footer span{
	color: white;
}
footer h4{
	color: white;
}
footer div{
	float: left;
	text-align: center;
}
/* smaller */ @media (max-width: 320px) {
	footer p{
		font-size: 17px;
	}
	footer a{
		width: 80%;
		margin: 2% 8%;
	}
	footer img{		
	margin-top: 5%;
	width: 50%;
	}
	footer div{ 
	width: 100%
	}
#foot2{
		margin-top: 2%;
	}}
/* small */ @media (min-width: 321px) and (max-width: 480px) {
	footer p{
		font-size: 18px;
	}
	footer a{
		width: 70%;
		margin: 2% 13%;
	}
	footer img{
	margin-top: 3%;
	width: 50%;
	}
	footer div{ 
	width: 100%
	}
	#foot2{
		margin-top: 2%;
	}}
/* smalless */ @media (min-width: 481px) and (max-width: 768px) {
	footer p{
		font-size: 18px;
	}
	footer a{
		width: 80%;
		margin: 2% 8%;
	}
	footer img{
		margin-top: 3%;
	width: 40%;
	}
	#foot2{
		margin-top: 2%;
	}}
/* normal */ @media (min-width: 769px) {
	footer p{
		font-size: 18px;
	}
	footer a{
		width: 60%;
		margin: 1% 18%;
	}
	#foot2 img:hover{
		transform: scale(1.05);
	}
	footer img{
		margin-top: 2%;
	width: 30%;
	}
	footer div{ 
	width: 100%
	}
	#foot2{
	margin-top: 1%;
	}}