@charset "utf-8";
/* CSS Document */
	body{
	font-family: Verdana, Geneva, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	font-size: 20px;
	color: black;
	margin: auto;
	width: 580px;
	background-color: white;
}
body a:link {
	text-decoration:none; 
	color: black;
}
body a:visited {
	text-decoration:none;
	color: darkblue; 
	font-weight: bold;
}
header{
	width: 100%;
	height: auto;
	margin: auto;
}
#Logo {
	width: 90%;
	margin: 8% 5%;
	animation: primera;
}
#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%;
}
nav{
	width: 100%;
	margin: 5% 0% 0%;
	float: left;
	background-color: black;
}
#Fotoperfil {
	width: 580px;
	height: 327px;
	margin-top: -4%;
	float: left;
	position: relative;
}
.Fotoperfil{
	position: absolute;
	float: left;
}
.Fotoperfil img{
	width: 100%;
	height: 100%;
}
.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: 2% 4% 2% 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;
}
#Inicio a{
	background-color: rgba(0,51,153,1.00);
}
.menu{
	width:20px;
	height: auto;
	margin: 0.8% 1% 0% 5%;
	float: left;
}
section {
	float: left;
	margin: auto;
	width: 100%;
	height: auto;

	overflow-wrap: normal;
}
h2{
	text-align: center;
	font-size: 30px;
	color: 	black;
}
h3{
	text-align: center;
	font-size: 25px;
	color: white;
}
#principal p{
	display: block;
}
#principal a{
	font-size: 20px;
	color: 	rgba(0,51,153,1.00);
	float: right;
	margin: 1% 8%;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(0,0,0, 0.5);
}
.servicios{
	width: 100%;
	margin: 0%;
	color: white;
	float: left;
	display: block;
}
.servicios img{
	width: 100%;
	height: auto;
	color: white;
}
.servicios img:hover{
	transition: .5s ease-in-out;
	transform: scale(1.1);
}
#clima{
	background-color: rgba(86,212,251,0.70);
	margin-top: -10%;
	padding: 2% 3%;
	float: left;
	display: flex;
	text-align: justify;
	font-size: 16px;
}
#meca{
	background-color: rgba(86,212,251,0.70);
	margin-top: -10%;
	padding: 2% 3%;
	float: left;
	display: flex;
	text-align: justify;
	font-size: 16px;
}
#suspe{
	background-color: rgba(86,212,251,0.70);
	margin-top: -10%;
	padding: 2% 3%;
	float: left;
	display: flex;
	text-align: justify;
	font-size: 16px;
}

#chapa{
	background-color: rgba(86,212,251,0.70);
	margin-top: -10%;
	padding: 2% 3%;
	float: left;
	display: flex;
	text-align: justify;
	font-size: 16px;
}
.char{
            font-size: 17px;
            height: 17px;
            animation: an 1s ease-out 1 both;
            display: inline-block;
        }
.marco{
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
	float:left;
	width: 48%;
	margin: 0% 0% 1.46% 1.46%;
}
#principal a:hover{
	transform: scale(1.05);
	color: red;
	text-shadow: 1px 1px 0 rgba(255,255,255, 1);
}
#ventas{
	width: 98%;
	background-color: white;
	float: left;
	padding: 2% 1%;
}
#ventas h2{
	color: red;
}
#ventas p{
	text-align: center;
	margin: 5% 2%;
}
#ventas img{
	width: 76%;
	margin: 2% 12%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#ventas a{
	width: 30%;
	margin: 1% 33%;
	text-align:center;
	border-radius: 10px;
	color: white;
	float: left;
	font-weight: bold;
	font-size: 20px;
	background-color: red;
	padding: 1%;
	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);
}
#ventas a:hover{
	transition: .3s ease-in-out;
	transform: scale(1.1);
	background-color: white;
	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);
}
#noticia{
	width: 98%;
	background-color: white;
	float: left;
	padding: 2% 1%;
}
#noticia h2{
	color: rgba(0,51,153,1.00);
}
#noticia p{
	text-align: center;
	margin: 5% 2%;
}
#noticia img{
	width: 76%;
	margin: 2% 12%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.5), 0 6px 20px 0 rgba(0,0,0, 0.5);
}
#noticia a{
	width: 30%;
	margin: 1% 33%;
	text-align:center;
	border-radius: 10px;
	color: white;
	float: left;
	font-weight: bold;
	font-size: 20px;
	background-color: rgba(86,212,251,1.00);
	padding: 1%;
	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);
}
#noticia a:hover{
	transition: .3s ease-in-out;
	transform: scale(1.1);
	background-color: white;
	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);
}
.accion1{
	margin-left: 10%;
	margin-bottom: 2%;
}
.accion2{
	margin-left: 16%;
}
aside {
	margin-top: 1%;
	float: left;
	text-align:center;
 	color: white;
 	font-weight:300;
 	font-size:20px;
  	overflow:hidden;
  		-webkit-backface-visibility: hidden;
  		-webkit-perspective: 1000;
	width: 90%;
	height: auto;
	padding: 8% 5% 8%;
	background: rgba(0,51,153,1.00);
	box-shadow: 0 4px 8px 0 rgba(255,255,255, 0.5), 0 6px 20px 0 rgba(255,255,255, 0.5);
}
#siniestro{
	width: 64%;
	border: solid 2px white;
	margin: 5% 15% 0%;
}
aside p{
	text-align: justify;
	font-size: 17px;
	
	}
aside h4{
	text-align: justify;
	font-weight: normal;
	}
aside span{
	font-weight: bold;
}
aside div {
	font-size: 25px;
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

aside div:first-of-type {
  animation: showup 7s infinite;
}

aside div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

aside div:last-of-type span {
  margin-left:-250px;
  animation: slidein 7s infinite;
}
aside a{
	float: left;
	border-radius: 10px;
	width: 75%;
	text-align: center;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(185,185,185,1.00);
	font-size: 20px;
	background-color: white;
	padding: 2%;
	margin: 0% 10.5%;
	box-shadow: 0 4px 8px 0 rgba(255,255,255, 0.5), 0 6px 20px 0 rgba(255,255,255, 0.5)
}
aside 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;
}
article{
	float: left;
	width: 98%;
	padding: 1% 1%;
}
article h4{
	font-size: 25px;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(185,185,185,1.00);
}
article p{
	margin: 1% 2%;
}
.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: 15%;
	float: left;
	margin: -2% 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: -2% 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: -2% 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);
}

footer {
	text-align: center;
	clear: both;
	float: left;
	margin: auto;
	width: 96%;
	height: auto;
	padding: 3% 2%;
	color: white;
	font-size: 14px;
	background: rgba(0,0,0,1);
}
footer img{
	width: 176px;
	height: 34px;
}
@keyframes an{
            from{
                opacity: 0;
                transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
            }
            to{
                opacity: 1;
                transform: perspective(500px) translate3d(0, 0, 0);
            }
        }
@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}
@keyframes slidein {
    0% { margin-left:-700px; }
    20% { margin-left:-700px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:auto;}
    80% {opacity:1;}
    100% {opacity:0;width:auto;}
}