@charset "utf-8";

body{ background-color: gray;}	


	
#estructura1{width:100%;      min-width: 150px;
			  height:160vw;   min-height: 44vw;
			  display:flex;
		      top:20vw;
			  position:relative;
			  margin: auto;}
/*----------------------------------------SLIDER-----------*/


@keyframes slidy {	0% { left: 0%; }
					20% { left: 0%; }
					25% { left: -100%; }
					45% { left: -100%; }
					50% { left: -200%; }
					70% { left: -200%; }
					75% { left: -300%; }
					95% { left: -300%; }
					100% { left: -400%; }}


div#slider { overflow: hidden; }




div#slider figure img { width: 20%; 
						float: left; 
						height:100%; min-height: 100%;}


div#slider figure {   position: relative;	
					  height: 160vw; min-height: 160vw;/* largo de la foto en la estructura*/
					  width: 500%;
					  margin: 0;
					  left: 0;
					  text-align: left;
					  font-size: 0;
					  animation: 30s slidy infinite; }

	

	
	
/*------------------------------------------------------------*/
#estructura2{ width:100%;    min-width: 150px;
			  height:auto;   min-height: 160vw;
			  display:flex;
			  background-color:#353533;
			  position:relative;
		      margin: auto;}


.container2{width: 100%;
		   height: auto;
		   display: flex;
		   flex-direction: row;
		   justify-content: space-around;
		   flex-flow: wrap;}





.box1{  width:85vw;    min-width: 29vw;
	  height: 70vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 1.5vw #000000;
		border-radius:10px;
		margin:5.6vw auto;
		background-color:#005C84;/* CAMBIO DE COLOR EN EL TEXTO*/
		box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
		font-family:Tahoma, Geneva, sans-serif;
		text-align:center;
		color:white;}


.box1 img{	position:absolute;
			top:0px;
			left:0px;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;}



.box1 h1 {  margin-top: -0.1vw;
			background-color:rgba(255,255,255,1);
			color:rgba(0,0,0,1);
			font-size:7vw;
			padding:7vw;/* cambia el largo del baner blanco de la imagen*/
			text-align: center;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;
			transform:translateY(-300px);
			-moz-transform:translateY(-300px);
			-ms-transform:translateY(-300px);
			-o-transform:translateY(-300px);
			-webkit-transform:translateY(-300px);}



.atencion{ text-align: center;
		   margin-left: -6.6vw;/* cambias el centrado del titulo.*/}




.box1 p { padding:3.3vw;
		  font-size:5.5vw;
		  text-align: justify;
		  transition:all 0.4s ease-in-out;
		  -moz-transition:all 0.4s ease-in-out;
		  -ms-transition:all 0.4s ease-in-out;
		  -o-transition:all 0.4s ease-in-out;
		  -webkit-transition:all 0.4s ease-in-out;
		  transform:translateX(500px);
		  -moz-transform:translateX(500px);
		  -ms-transform:translateX(500px);
		  -o-transform:translateX(500px);
		  -webkit-transform:translateX(500px);}




/* Deslizamiento en X y Y */
.box1:hover img {	transform:translateX(-510px);
					-moz-transform:translateX(-510px);
					-ms-transform:translateX(-510px);
					-o-transform:translateX(-510px);
					-webkit-transform:translateX(-510px);}





.box1:hover h1 { transform:translateY(0px);
				-moz-transform:translateY(0px);
				-ms-transform:translateY(0px);
				-o-transform:translateY(0px);
				-webkit-transform:translateY(0px);}





.box1:hover p { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}


	
/*--------------------------------------------------------------------------------------------------------------------------*/


.box2{  width:85vw;    min-width: 29vw;
	  height: 70vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 1.5vw #000000;
		border-radius:10px;
		margin:5.6vw auto;
		background-color:#93004F;/* CAMBIO DE COLOR EN EL TEXTO*/
		box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
		font-family:Tahoma, Geneva, sans-serif;
		text-align:center;
		color:white;}


.box2 img{	position:absolute;
			top:0px;
			left:0px;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;}



.box2 h1 {  margin-top: -0.1vw;
			background-color:rgba(255,255,255,1);
			color:rgba(0,0,0,1);
			font-size:6vw;
			padding:7vw;/* cambia el largo del baner blanco de la imagen*/
			text-align: center;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;
			transform:translateY(-300px);
			-moz-transform:translateY(-300px);
			-ms-transform:translateY(-300px);
			-o-transform:translateY(-300px);
			-webkit-transform:translateY(-300px);}



.profesionales{ text-align: center;
		   margin-left: -6.6vw;/* cambias el centrado del titulo.*/}




.box2 p { padding:3.3vw;
		  font-size:5.5vw;
		  text-align: justify;
		  transition:all 0.4s ease-in-out;
		  -moz-transition:all 0.4s ease-in-out;
		  -ms-transition:all 0.4s ease-in-out;
		  -o-transition:all 0.4s ease-in-out;
		  -webkit-transition:all 0.4s ease-in-out;
		  transform:translateX(500px);
		  -moz-transform:translateX(500px);
		  -ms-transform:translateX(500px);
		  -o-transform:translateX(500px);
		  -webkit-transform:translateX(500px);}




/* Deslizamiento en X y Y */
.box2:hover img {	transform:translateX(-510px);
					-moz-transform:translateX(-510px);
					-ms-transform:translateX(-510px);
					-o-transform:translateX(-510px);
					-webkit-transform:translateX(-510px);}





.box2:hover h1 { transform:translateY(0px);
				-moz-transform:translateY(0px);
				-ms-transform:translateY(0px);
				-o-transform:translateY(0px);
				-webkit-transform:translateY(0px);}





.box2:hover p { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}


	
/*--------------------------------------------------------------------------------------------------------------------------*/

.box3{  width:85vw;    min-width: 29vw;
	  height: 70vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 1.5vw #000000;
		border-radius:10px;
		margin:5.6vw auto;
			background-color:#ADA103;/* CAMBIO DE COLOR EN EL TEXTO*/
		box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
		font-family:Tahoma, Geneva, sans-serif;
		text-align:center;
		color:white;}


.box3 img{	position:absolute;
			top:0px;
			left:0px;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;}



.box3 h1 {  margin-top: -0.1vw;
			background-color:rgba(255,255,255,1);
			color:rgba(0,0,0,1);
			font-size:7vw;
			padding:7vw;/* cambia el largo del baner blanco de la imagen*/
			text-align: center;
			transition:all 0.4s ease-in-out;
			-moz-transition:all 0.4s ease-in-out;
			-ms-transition:all 0.4s ease-in-out;
			-o-transition:all 0.4s ease-in-out;
			-webkit-transition:all 0.4s ease-in-out;
			transform:translateY(-300px);
			-moz-transform:translateY(-300px);
			-ms-transform:translateY(-300px);
			-o-transform:translateY(-300px);
			-webkit-transform:translateY(-300px);}



.trabajos{ text-align: center;
		   margin-left: -6.6vw;/* cambias el centrado del titulo.*/}




.box3 p { padding:5.3vw;
		  font-size:5.5vw;
		  text-align: justify;
		  transition:all 0.4s ease-in-out;
		  -moz-transition:all 0.4s ease-in-out;
		  -ms-transition:all 0.4s ease-in-out;
		  -o-transition:all 0.4s ease-in-out;
		  -webkit-transition:all 0.4s ease-in-out;
		  transform:translateX(500px);
		  -moz-transform:translateX(500px);
		  -ms-transform:translateX(500px);
		  -o-transform:translateX(500px);
		  -webkit-transform:translateX(500px);}




/* Deslizamiento en X y Y */
.box3:hover img {	transform:translateX(-510px);
					-moz-transform:translateX(-510px);
					-ms-transform:translateX(-510px);
					-o-transform:translateX(-510px);
					-webkit-transform:translateX(-510px);}





.box3:hover h1 { transform:translateY(0px);
				-moz-transform:translateY(0px);
				-ms-transform:translateY(0px);
				-o-transform:translateY(0px);
				-webkit-transform:translateY(0px);}





.box3:hover p { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}


	
	
/*------------------------------------------------------------*/

#estructura3{ width:100%;    min-width: 150px;
			  height:250vw;	min-height: 240vw;		
	          display:flex;
			  background-color: white;
			  position:relative;
			  margin: auto; }


.container3{width: 100%;
		   height: auto;
		   display: flex;
		   flex-direction: row;
		   justify-content: space-around;
		   flex-flow:wrap;}




.box4{width:86vw;    min-width: 29vw;
	  height: 52vw;  min-height: 27vw;
	   background-image: url( ../img/logo.png);
	  background-size: 100% 76%;
	  background-repeat: no-repeat;
	  margin: 6.4%;
	  left:0.2%; 
	  position: relative;
	  box-sizing: 10px;}
	



.box5{width:86vw;    min-width: 29vw;
	  height: 57vw;  min-height: 27vw;
	  margin: 1.6%;	
	  position: relative;
	  top: -66vw;
	  bottom: -5vw;
	  left: 0.3vw;
	  box-sizing: 10px;}
	
h1{ font-size: 12vw;
	width: 100%;
	text-align: center;
	margin-top: 8vw;
margin-left: -1vw;}

h2{ font-size: 7vw;
	text-align: center;
	margin-top: 1%;}

h3{ 			 font-size: 5.6vw;

	width: 100%;
	position: relative;
	left: 2%;
	line-height:8vw;
	top: 6%;
	text-align:justify;}
/*------------------------------------------------------------*/

#estructura4{ width:100%;      min-width: 100%;
			  height:200vw;	min-height: 200vw;		
			  display:flex;
			  background-color:#BF3E34;			
		box-shadow: 5px 2px 0px 3px #8C8C8C;
			  position:relative;
			  margin: auto;}


.container4{ width: 100%;
		     height: auto;
		     display: flex;
		     flex-direction: row;
		     justify-content: space-around;
		     flex-flow:wrap;}


/*------------------------------------------------------------*/


.box6{ width:88vw;    min-width: 29vw;
	   height: 103vw;  min-height: 78vw;
	   margin: 1.6%;	
	   position: relative;
	   top: 3vw;	
	   left: -0.1vw;
	   box-sizing: 10px;}


.h1{ width: 100%;}


.tituloE4{font-size: 12vw;
	margin-left: 0.4%;
		  text-align: center;}


.cajaH2{ width: 100%;
		 height: 90vw;  
		 background-image: url(../img/marco2.png);
	     background-size: 100% 67%;
	     background-repeat: no-repeat;
		 position: relative;
		 top: 4.6%; }



.ParrafoE4 { width: 95%;
			 font-size: 5.6vw;
	line-height: 8.6vw;
	
			 position: absolute;
			 top: 6%;
			 left: 3%;
			 text-align: justify;}
/*------------------------------------------------------------*/

	
.box7{ width:86vw;    min-width: 29vw;
	   height: 70vw;   min-height: 27vw;
	   margin: 3.9%;
	   top: 1.2vw;
	   position: relative;
	   overflow: hidden;}



.boximg { width:80vw;      min-width: 80vw;
	  	  height: 64.2vw;  min-height: 64.2vw;
		  position: absolute;
		  top: 2.8vw;
		  left: 3.4vw;
		  background-image: url( ../img/maquinas.jpg);}


/*------------------------------------------------------------*/

#estructura5{width:100%;      min-width: 100%;
			  height:auto;   min-height: 43vw;
			  display:flex;
			 			  background-color:#353535;

			  position:relative;
			  margin: auto;}


.container5{width: 100%;
		   height: auto;
		   display: flex;
		   flex-direction: row;
		   justify-content: space-around;
		   flex-flow:wrap;}




.box8{width:86vw;    min-width: 29vw;
	  height: 70vw;  min-height: 27vw;	 
	  margin: 3.9%;
	  position: relative;
	  left: -0.1%;
	  box-sizing: 10px;}
	
/*-------------------------------------------------------*/

#box9{width:86vw;    min-width: 29vw;
	  height: 79vw;  min-height: 27vw;
	  position: relative;	  
	  overflow: hidden;
	  left: -3vw;
	  margin: 3.9%;
	  box-sizing: 10px;}
	
/*-------------------------------------------------------*/

.box10{width:80vw;    min-width: 80vw;
	  height: 40vw;  min-height: 27vw;
	   overflow: hidden;
	  top: -1vw;
       position: relative;
	   left:2%;
	   box-sizing: 10px;}
/*-------------------------------------------------------*/
.box10info{	position: absolute;
			top: 0.5vw;
			width: 90%;
			height: 36.5vw;}


.infobox10{ color:white;
margin-top: 2%;
margin-left: 1.2%;
font-size: 6vw;
line-height: 8vw;}


.Albert{color:white;
margin-top: 2%;
margin-left: 1.2%;
font-size: 6vw;
	    text-align: center;}


/*------------------------TELEFONO--------------------------*/
.telefono{ 	width:100%;
			height: 19.7vw;
			position: relative;
			}



.circulo1{	background-color: crimson;
			width: 22%;
			height: 18vw;
			position: absolute;
			top: 5%;
			left: 4%;
			border-radius: 50% 50% 50% 50%;}


	.numeros{ text-align: center;
		 font-size: 4.3vw;
		margin-left: -3vw;
		  color: white;
		line-height: 7vw;
		  margin-top:2vw;}

.barra1{	
			width: 70%;
			height: 15.6vw;
			position: absolute;
			top:10%;
			left: 29.3vw;}

/*---------------------------PINTEREST------------------------*/
.pinterest{ width:100%;
height: 19.7vw;			position: relative;
			}



.circulo2{	background-color: crimson;
			width: 22%;
			height: 18vw;
			position: absolute;
			top: 5%;
			left: 4%;
			border-radius: 50% 50% 50% 50%;}




.barra2{	
			width: 60%;
			height: 15.6vw;
			position: absolute;
			top:10%;
			left: 29.3vw;}


/*---------------------------CELULAR--------------------------*/

.hotmail{	width:100%;
height: 19.7vw;			position: relative;
			}




.circulo3{	background-color: crimson;
			width: 22%;
			height: 18vw;
			position: absolute;
			top: 5%;
			left: 4%;
			border-radius: 50% 50% 50% 50%;}



.barra3{	
			width: 63%;
			height: 15.6vw;
			position: absolute;
			top:10%;
			left: 29.3vw;}

/*---------------------------CELULAR--------------------------*/

.celular{width:100%;
height: 20.9vw;			position: relative;
		}




.circulo4{	background-color: crimson;
			width: 22%;
			height: 18vw;
			position: absolute;
			top: 8%;
			left: 4%;
			border-radius: 50% 50% 50% 50%;}




.barra4{	
			width: 63%;
			height: 15.6vw;
			position: absolute;
			top:10%;
			left: 29.3vw;}

/*--------------------------FOOTER----------------------------*/
	footer{width:100%;   min-width: 100%;
		   height:20vw;   min-height:20vw;
		box-shadow: 1px 2px 0px 3px #7C7C7C;
		    background-color:#353535;
		   position:relative;}

.iconos{ 
		 width: 90%;
		 height:17vw;
		 top: 7%;
		 left: 5%;
		 position: relative;
		 display: flex;
		 flex-direction: row;
		 justify-content: space-around;
		 flex-flow: nowrap;}


/*------------------------------------------------------------*/

.facebook{ width:18vw;    min-width: 18vw;
		   height: 100%;  min-height: 100%;
		   background-color: indianred;
		   overflow: hidden;
		   position: relative;
		   box-sizing: 10px;
		   border-radius: 100% 100% 100% 100%;}


/*------------------------------------------------------------*/


.instragram{ width:18vw;    min-width: 18vw;
		     height: 100%;  min-height: 100%;
		     background-color: red;
		     box-sizing: 10px;
			 border-radius: 100% 100% 100% 100%;}

/*------------------------------------------------------------*/


.twiter{ width:18vw;    min-width: 18vw;
	     height: 100%;  min-height: 100%;
	     background-color: indianred;
	     box-sizing: 10px;
	     border-radius: 100% 100% 100% 100%;}

/*------------------------------------------------------------------------------------------------------------------------*/

.boceto{ text-align: center;
		 font-size: 5.3vw;
	margin-left: -5vw;margin-left: -3vw;
		 color: white;
		 margin-top:9%;}


.infohotmail{text-align: center;
		 font-size: 5.3vw;
			 color: white;margin-left: -3vw;
			 margin-top:9%;}

.celularinfo{text-align: center;
		 font-size: 5.3vw;
			 color: white;
		margin-left: -11vw;

			 margin-top:9%;}