@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: 1300px;
	background-color: white;
	align-items: center;
}
body a:link {
	text-decoration:none; 
	color: black;
}
body a:visited {
	text-decoration:none;
	color: darkblue; 
	font-weight: bold;
}
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{
	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.7% 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{
	background-color: rgba(0,51,153,1.00);
	margin-left: 5%;
}
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;
}
#Fotoperfil {
	width: 1300px;
	height: 520px;
	margin-top: 100px;
	float: left;
	position: relative;
}
.Fotoperfil{
	position: absolute;
	float: left;
}
.Fotoperfil img{
	width: 80%;
	height: 80%;
	margin: 0% 10%;
}
section {
	float: left;
	margin: auto;
	width: 1300px;
	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: 98%;
	margin: 0%;
	color: white;
	float: left;
	display: block;
}
.servicios img{
	width: 102.1%;
	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;
}
.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: 46%;
	margin: 0% 0% 1.46% 2.5%;
}
#principal a:hover{
	transform: scale(1.05);
	color: black;
	text-shadow: 1px 1px 0 rgba(255,255,255, 1);
}
#ventas{
	width: 98%;
	background-color: white;
	float: left;
	padding: 2% 1%;
}
.ventas{
	width: 50%;
	float: left;
}
#ventas h2{
	color: red;
}
#ventas p{
	text-align: center;
	margin: 5% 2%;
}
#ventas img{
	width: 96%;
	margin: 2% 2%;
	box-shadow: 0 4px 8px 0 rgba(253,1,5, 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{
	width: 50%;
	float: left;
}
#noticia h2{
	color: rgba(0,51,153,1.00);
}
#noticia p{
	text-align: center;
	margin: 5% 2%;
}
#noticia img{
	width: 96%;
	margin: 2% 2%;
	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);
}
aside {
	float: left;
	text-align:center;
 	color: white;
 	font-weight:300;
 	font-size:20px;
  	overflow:hidden;
  		-webkit-backface-visibility: hidden;
  		-webkit-perspective: 1000;
	width: 600px;
	height: auto;
	padding: 3% 1.8% 3%;
	background: rgba(0,51,153,1.00);

}
#siniestro{
	width: 73%;
	border: solid 2px white;
	margin: 5% 0% 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: 2% 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: 600px;
	padding: 1% 1.8%;
}
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% 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: 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:200px;
	margin: 2% 6%;
	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: 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;}
}