@charset "utf-8";
/* CSS Document */
body{
	font-family: Verdana, Geneva, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-size: 18px;
	color: black;
	margin: auto;
	background-color: white;
}
/* body smaller*/ @media (max-width: 450px){ body{width: 380px;}}
/* body small*/ @media (min-width: 451px) and (max-width: 768px){ body{width:580px;}}
/* body normal*/ @media (min-width: 769px){ body{width:1300px;}}
body a:link {
	text-decoration:none; 
	color: black;
}
body a:visited {
	text-decoration:none;
	color: darkblue; 
	font-weight: bold;
}
/* header smaller*/ @media (max-width: 450px){
	header{
	width: 100%;
	height: auto;
	margin: auto;
}
#Logo {
	width: 90%;
	margin: 8% 5%;
}
#telefono{
	width: 90%;
	margin: 0% 5%;
	padding: 1% 0%;
	height: auto;
	float: left;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#telefono img{
	width: 15%;
	float: left;
	margin: 1.4% 5% 0% 10%;
}
#textotelefono{
	width: 60%;
	font-size: 25px;
	float: left;
	padding-right: 10%;
}
#textotelefono p{
	margin: auto;
	}}
/* header small*/ @media (min-width: 451px) and (max-width: 768px){
	header{
	width: 100%;
	height: auto;
	margin: auto;
}
#Logo {
	width: 90%;
	margin: 8% 5%;
}
#telefono{
	width: 90%;
	margin: 0% 5%;
	padding: 1% 0%;
	height: auto;
	float: left;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#telefono:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
}
#telefono img{
	width: 10%;
	float: left;
	margin: 1% 5% 0% 10%;
}
#textotelefono{
	width: 65%;
	font-size: 25px;
	float: left;
	padding-right: 10%;
}
#textotelefono p{
	float: left;
	width: auto;
	margin: 5% 2%;
}}
/* header normal*/ @media (min-width: 769px){
	header{
	position: fixed;
	float: left;
	width: 1300px;
	height: 100px;
	background-color: white;
	margin: auto;
	z-index: 1;
}
#Logo {
	width: 20%;
	float: left;
	margin: 1% 10%;
}
#telefono{
	width: 390px;
	margin: 1.6% 10% 0% 0%;
	height: auto;
	float: right;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#telefono:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
}
#telefono img{
	width: 10%;
	float: left;
	margin: 2% 5%;
}
#textotelefono{
	width: 70%;
	font-size: 20px;
	float: left;
}
#textotelefono p{
	float: left;
	width: auto;
	margin: 6% 1.5%;
}}
/* nav smaller-small*/ @media (max-width: 768px){
	nav{
	width: 100%;
	margin: 5% 0% 0%;
	float: left;
	background-color: black;
}
.control-menu {
    background-color: transparent;
    background-position: center center;
    border: 2px solid rgba(86,212,251,1.00);
	border-radius: 10px;
    display: block;
    float: right;
    height: 40px;
    margin: 4% 4% 0% 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 rgba(255,255,255,1.00);
    color: white;
    display: block;
    height: 33px;
	width: 87%;
    padding: 2% 0% 0%;
	margin: 1.5%;
}
ul.nav-items li a span {
    margin: 0.5% 0% 1% 3.5%;
	float: left;
}
#Servicios a{
	background-color: rgba(0,51,153,1.00);
}
.menu{
	width:20px;
	height: auto;
	margin: 0.8% 1% 0% 5%;
	float: left;
	}}
/* nav normal*/ @media (min-width: 769px){
	nav{
	width: 100%;
	margin: 100px 0% 0%;
	padding: 0% 0%;
	position: relative;
	float: left;
	background-color: black;
	
}
#navigation{
	background-color: rgba(0,0,0,0.85);
	position: fixed;
	top: 100px;
	width: 1300px;
	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 rgba(255,255,255,1.00);
    color: white;
    display: block;
	float: left;
    height: 33px;
	width: 15%;
    padding: 0.8% 0.5% 0.4%;
	margin: 0% 0.5%;
}
ul.nav-items li a span {
    margin: 0.5% 0% 1% 3.5%;
	float: left;
}
#Inicio a{
	margin-left: 5%;
}
#Servicios a{
	background-color: rgba(0,51,153,1.00);
}
ul.nav-items a:hover{
	transition: .3s ease-in-out;
	background-color: rgba(86,212,251,0.70);
	transform: scale(1.05);
}
.menu{
	width:25px;
	height: auto;
	margin: 0.8% 1% 0% 5%;
	float: left;
}}
/* section smaller*/ @media (max-width: 450px){
	section{
	float: left;
	width: 100%;
}
section h4{
	font-size: 25px;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(185,185,185,1.00);
}
section p{
	margin: 1% 3%;
	text-align: justify;
}
section span{
	color: black;
	text-align: left;
	font-weight: bold;
}
.servicios{
	width: 96%;
	margin: 3% 2%;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
.super{
	margin: 1%;
	text-align: justify;
}
.border{
	width: 90%;
	margin: 1% 5%;
	float: left;
	border-bottom: solid 2px black;
}
#clima a{
	color: black;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	width: 92%;
	margin: 1% 3%;
	padding: 1%;
	float: left;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
.article{
	float: left;
	width: 98%;
}
#article1 a{
	float: right;
	margin: 1% 5%;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	padding: 1% 2%;
}
#twitter img{
	width: 20%;
	float: left;
	margin: 0% 5% 8% 7.5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 17px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#instagram img{
	width: 20%;
	float: left;
	margin: 0% 7.5% 8% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 22px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#facebook img{
	width: 20%;
	float: left;
	margin: 0% 5% 8% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 17px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#maps{
	float: left;
	width:334px; 
	height:250px;
	margin: 2% 4%;
	border: solid 2px white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	}}
/* section small*/ @media (min-width: 451px) and (max-width: 768px){
	section{
	float: left;
	width: 100%;
}
section h4{
	font-size: 25px;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(185,185,185,1.00);
}
section p{
	margin: 1% 3%;
	text-align: justify;
}
section span{
	color: black;
	text-align: left;
	font-weight: bold;
}
.servicios{
	width: 75%;
	margin: 2% 12.5%;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
.super{
	margin: 1%;
	text-align: justify;
}
.border{
	width: 90%;
	margin: 1% 5%;
	float: left;
	border-bottom: solid 2px black;}
#clima a{
	color: black;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	width: 80%;
	margin: 1% 9%;
	padding: 1%;
	float: left;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#clima a:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
}

.article{
	float: left;
	width: 98%;
}
#article1 a{
	float: right;
	margin: 1% 5% 1% 40%;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	padding: 1% 2%;
}
#twitter img{
	width: 15%;
	float: left;
	margin: 0% 5% 5% 17.5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 17px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#instagram img{
	width: 15%;
	float: left;
	margin: 0% 7.5% 5% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 22px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#facebook img{
	width: 15%;
	float: left;
	margin: 0% 5% 5% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 17px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#maps{
	float: left;
	width:520px; 
	height:250px;
	margin: 2% 4%;
	border: solid 2px white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#article1 a:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
	color: black;
	background-color: white;
	border: 2px solid white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	text-shadow: 0 0 0 white;
}
#article3 img:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
	}}
/* section normal*/ @media (min-width: 769px){
	section{
	float: left;
	width: 100%;
	margin-top: 100px;
}
section h4{
	font-size: 25px;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(185,185,185,1.00);
}
section p{
	margin: 1% 3%;
	text-align: justify;
}
section span{
	color: black;
	text-align: left;
	font-weight: bold;
}
.servicios{
	width: 35%;
	margin: 2%;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}
.super{
	margin: 1%;
	text-align: justify;
}
.border{
	width: 90%;
	margin: 1% 5%;
	float: left;
	border-bottom: solid 2px black;
}
#clima{
	margin-top: 10%;
}
#clima a{
	color: black;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	width: 40%;
	margin: 1% 29%;
	padding: 1%;
	float: left;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#clima a:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
}
.article{
	float: left;
	width: 30%;
	margin: 0% 1.16% 1%;
}
#article1 a{
	float: left;
	margin: 1% 5% 3%;
	border: solid 3px rgba(86,212,251,1.00);
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	padding: 1% 2%;
}
#twitter img{
	width: 15%;
	float: left;
	margin: 2% 5% 3% 17.5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 17px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#instagram img{
	width: 15%;
	float: left;
	margin: 2% 7.5% 3% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 22px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#facebook img{
	width: 15%;
	float: left;
	margin: 2% 5% 3% 5%;
	border: solid 3px rgba(255,255,255,1.00);
	border-radius: 15px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#maps{
	float: left;
	width:320px; 
	height:200px;
	margin: 2% 0% 2% 9.5%;
	border: solid 2px white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#article1 a:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
	color: white;
	background-color: black;
	border: 2px solid white;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	text-shadow: 0 0 0 white;
}
#article3 img:hover{
	transition: .2s ease-in-out;
	transform: scale(1.05);
}}
footer {
	text-align: center;
	clear: both;
	float: left;
	margin: auto;
	width: 96%;
	height: auto;
	padding: 1% 2%;
	color: white;
	font-size: 14px;
	background: rgba(0,0,0,1);
}
footer img{
	width: 176px;
	height: 34px;
}