*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body{
		background-image: url(../img/fondo.jpg);
		background-size: 100% 100%;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center;
}

/*----------------encabezado-----------------*/

header{
	width: 100%;
	height: 150px;
	background: #27408B;
}

header .centroHeader{
	width: 80%;
	height: 150px;
	margin: auto;
	display: flex;
}

header .centroHeader .logoHeader{
	width: 50%;
	height: 150px;
	display: flex;
	background-image: url(../img/logo.jpg);
	background-size: 65% 60%;
	background-repeat: no-repeat;
	background-position: center;
}

header .centroHeader .textoHeader{
	width: 50%;
	height: 150px;
	font-family: 'Arial';
	font-weight: bold;
	font-size: 150%;
	color: gold;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}


/*----------------imagen animacion slider o Flash-----------------*/

.centroBanner{
	width: 80%;
	height: 450px;
	margin: auto;
	display: flex;
	background: white;
	padding: 8px;
}

.centroBanner .bannerFlash{
	width: 100%;
	height: 100%;
	margin: auto;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	animation: banner 18s infinite linear;
	background-image: url(../img/banner1.jpg);
	/*animation-name: banner;
	animation-duration: 10s;
	animation-iteration-count: infinite;*/
}

@keyframes banner{
	0%{
		background-image: url(../img/banner1.jpg);
	}
	33%{
		background-image: url(../img/banner1.jpg);
	}

	34%{
		background-image: url(../img/banner2.jpg);
	}
	67%{
		background-image: url(../img/banner2.jpg);
	}

	68%{
		background-image: url(../img/banner3.jpg);
	}
	100%{
		background-image: url(../img/banner3.jpg);
	}
}

/*----------------caja menu-----------------*/

.menu{
	width: 100%;
	height: 50px;
	background: #27408B;
}

.menu .centroMenu{
	width: 80%;
	height: 50px;
	display: flex;
	margin: auto;
}

.menu .centroMenu .botonMenu{
	width: 25%;
	height: 50px;
	overflow: hidden;
}

.menu .centroMenu .botonMenu a{
	width: 100%;
	height: 50px;
	float: left;
	text-decoration: none;
	font-size: 150%;
	font-weight: bold;
	color: gold;
	font-family: 'Arial';
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	transition: all .10s ease;
}

.menu .centroMenu .botonMenu a:hover{
	background-color: gold;
	color: #3A5FCD;
	font-size: 175%
}

/*----------------caja principal general-----------------*/

main{
	width: 100%;
	height: auto;
	overflow: hidden;/*propiedad de desbordamiento de texto*/
	font-family: 'Century Gothic'
}

h1{
	font-size: 30px;
}



.encabezado{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

.imageMundo img{
	width: 40px;
	height: 40px;
	float: left;	
	margin: auto;
	margin-top: -3px;
	display: flex;
	align-items: center;
}

.imageMiniBanner img{
	width: 100%;
	height: 250px;
	margin-top: 20px;
}

/*----------------caja principal nosotros-----------------*/

.somos{
	width: 50%;
	height: 1200px;
	overflow: hidden;
	float: left;
	padding: 50px;
	text-align: justify;
}


.vision{
	width: 50%;
	height: 600px;
	overflow: hidden;
	float: left;
	padding: 50px;
	text-align: justify;
}

.mision{
	width: 50%;
	height: 600px;
	overflow: hidden;
	float: left;
	padding: 50px;
	text-align: justify;
}

#nosotros{
	width: 80%;
	height: 1200px;
	margin: auto;
	color: #27408B;
	background: white;
}

#nosotros p{
	font-size: 20px;
	margin-top:25px;
	line-height: 1.8;
	font-weight: bold;
}


/*----------------caja principal productos y marcas-----------------*/

.galeria{
	width: 80%;
	height: auto;
	overflow: hidden;
	padding: 50px;
	margin: auto;
	background: white;
	color: #27408B;
}

.contenedorImagen{
	margin-top: 25px;
	display: flex;
 	flex-wrap: wrap;
}

.contenedorImagen .imagen{
	width: 270px;
	height: 200px;
	position: relative;
	margin: 15px;
	box-shadow: 10px 10px 5px #aaaaaa;
	overflow:hidden;
}

.imagen img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all 1s;
}

.imagen:hover img{
	-webkit-transform:scale(1.1);
	transform:scale(1.1);
}

.overlay{
	position: absolute;
	bottom: 0;
	left: 0;
	background: gray;
	width: 75%;
	height: 15%;
}

.overlay h3{
	color: white;
	text-align: center;
}

/*https://www.youtube.com/watch?v=Ff8Acay5oXI    
Responsive para imagenes*/




/*----------------caja principal contactos-----------------*/

#contactos{
	width: 80%;
	height: 1360px;
	margin: auto;
	color: #27408B;
	background: white
}

.direccion{
	width: 100%;
	height: 650px;
	overflow: hidden;
	float: left;
	padding: 50px;
	text-align: justify;
	font-weight: bold;
}

.titleContact{
	font-size: 20px;
	margin-top:25px;
	line-height: 1.8;
}

.textContact{
	font-size: 20px;
	margin-top:-7px;
	line-height: 1.8;
}

.socialBar{
	width: 100%;
	height: 60px;
	display: flex;
	float: left;
	overflow: hidden;
}

.socialIcon{
	width: 100%;
	height: 60px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

.socialIcon ul li{
	float: left;
	list-style: none;
	margin-left: 10px;
}

.fb{
	background-image: url(../img/iconoFacebook.png);
	background-size: 100% 100%;
}
.msgr{
	background-image: url(../img/iconoMessenger.png);
	background-size: 100% 100%;
}
.wsapp{
	background-image: url(../img/iconoWhatsapp.png);
	background-size: 100% 100%;
}
.inst{
	background-image: url(../img/iconoInstagram.png);
	background-size: 100% 100%;
}
.mail{
	background-image: url(../img/iconoCorreo.png);
	background-size: 100% 100%;
}

.socialIcon ul li a{
	width: 50px;
	height: 50px;
	float: left;
	text-decoration: none;
	transition: all .10s ease;
	border-radius: 50%;
}

.socialIcon ul li a:hover{
	width: 60px;
	height: 60px;
}

.escribenos{
	width: 50%;
	height: 650px;
	overflow: hidden;
	float: left;
	padding: 50px;
	text-align: justify;
}


.formulario .textbox{
	width: 100%;
	background: #EDEDED;
	padding: 10px;
	margin-top: 20px;
	border-radius: 5px;
	border: 1px solid gray;
	font-family: "calibri";
	font-size: 20px;
}

.formulario .botonEnviar{
	width: 150px;
	padding: 10px;
	font-size: 20px;
	font-family:"calibri";
	margin: auto;
	margin-top: 20px;
	display: flex;
	float: right;
}

.mapa{
	width: 50%;
	height: 650px;
	overflow: hidden;
	float: left;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

/*----------------pie de pagina-----------------*/

footer{
	width: 100%;
	height: 100px;
	background: black;
	display: flex;
}

footer .centroFooter{
	width: 80%;
	height: 100px;
	margin: auto;
	color: white;
	padding: 27px;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

footer .centroFooter p{
	text-align: center;
	font-size: 16px;
}