@charset "utf-8";
/* CSS Document */

* {	padding: 0;
	margin: 0;}

#estructura1{ width:100%;      min-width: 100%;
			  height:48.4vw;     min-height: 48.4vw;
			  display:flex;
			  top:6.1vw;
			  position:relative;
			  margin: auto;}

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


.box1{  width:30vw;    min-width: 29vw;
	    height: 27vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 0.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:2vw;
			padding:34px;/* 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: -5.6vw;/* cambias el centrado del titulo.*/}




.box1 p { padding:23px;
		  font-size:2vw;
		  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, .banner:hover a { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}



/*--------------------------------------------------------------------------------------------------------------------------*/
#estructura2{width:100%;      min-width: 150px;
			  height:40vw;    min-height: 40vw;
			  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: nowrap;}



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

.box2{  width:30vw;    min-width: 29vw;
	    height: 27vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 0.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:2vw;
			padding:34px;/* 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: -5.6vw;/* cambias el centrado del titulo.*/}




.box2 p { padding:23px;
		  font-size:2vw;
		  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, .banner:hover a { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}


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


	
.box3{  width:30vw;    min-width: 29vw;
	    height: 27vw;  min-height: 27vw;
	    overflow: hidden;
		position:relative;
		border:solid 0.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:2vw;
			padding:34px;/* 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: -5.6vw;/* cambias el centrado del titulo.*/}




.box3 p { padding:30px;
		  font-size:2vw;
		  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, .banner:hover a { transform:translateX(0px);
								 -moz-transform:translateX(0px);
								 -ms-transform:translateX(0px);
								 -o-transform:translateX(0px);
								 -webkit-transform:translateX(0px);}

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

#estructura3{ width:100%;      min-width: 100%;
			  height:38vw;   min-height: 38vw;
			  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:nowrap;}

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



.box4{ width:30vw;    min-width: 30vw;
	   height: 16vw;  min-height: 16vw;
	   background-image: url( ../img/logo.png);
	   background-size: 100% 76%;
	   background-repeat: no-repeat;
	  top: 16vw;
	   position: relative;
	   left: 1.5%;
	   box-sizing: 10px;}
	

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

.box5{ width:50vw;    min-width: 46vw;
	   height: 30vw;  min-height: 26vw;
	   margin: 1.6%;	
	   position: relative;
	   top: 2vw;
	   left: -1%;
	   box-sizing: 10px;}
	


h1{ font-size: 5vw;
	font-family:Source Sans Pro Semibold;
	width: 120%;
	margin-left: -4.8vw;
	text-align: center;
	margin-top: 2%}




h2{ font-size: 2.2vw;
	font-family:Calibri Light;
	text-align: center;
	margin-top: 2%;}




h3{ font-size: 1.6vw;
	width: 109%;
	font-family: Source Sans Pro Semibold;
	line-height: 2.6vw;
	position: relative;
	margin-left: -2vw;
	top: 5%;
	text-align:justify;}
/*--------------------------------------------------------------------------------------------------------------------------*/

#estructura4{ width:100%;      min-width: 100%;
			  height:43vw;   min-height: 43vw;
			  display:flex;
			  background-color:#B93E34;
			  position:relative;
			  margin: auto;}


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


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


.box6{ width:54vw;    min-width: 40vw;
	   height: 27vw;  min-height: 27vw;
	   overflow: hidden;
	   margin: 6.9%;
	   box-sizing: 10px;}


.h1{ width: 100%;
	 }


.tituloE4{ font-size: 4vw;
	font-family:Source Sans Pro Semibold;
		   text-align: center;}


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



.ParrafoE4 {
	width: 90%;
	font-family: "Source Sans Pro Semibold";
	font-size: 2.2vw;
	position: absolute;
	top: 8.6%;
	left: 5.8%;
	text-align: justify;
}
/*--------------------------------------------------------------------------------------------------------------------------*/

.box7{ width:30vw;    min-width: 40vw;
	   height: 34.9vw;  min-height: 34.9vw;
	   margin: 3.9%;
left: -1vw;
	   border: solid 0.4vw  #FFFFFF;
	   position: relative;
	   overflow: hidden;}


.boximg {  width: 38vw; min-width:31vw;
		   height: 33.2vw;
		   position: absolute;
		   top: 0.9vw;
		   left: 1vw;
		   background-size: 100% 100%;
		   background-repeat: no-repeat;
		   background-image: url( ../img/maquinas.jpg);}

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

#estructura5{ width:100%;      min-width: 100%;
			  height:30vw;   min-height: 30vw;
			  display:flex;
		box-shadow:50px 50px 50px 50px rgba(9,9,9,0.9);

			  background-color:#353535;
			  position:relative;
			  margin: auto;}


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



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



.box8{ width:31vw;      min-width: 31vw;
 	   height: 25vw;  min-height: 25vw;	 
	   top: 2.4vw;
	   position: relative;
	   left: 1.3vw;
	   box-sizing: 10px;}
	
/*--------------------------------------------------------------------------------------------------------------------------*/

#box9{ width:34vw;      min-width: 34vw;
 	   height: 25vw;  min-height: 25vw;	 
	   position: relative;	  
	   overflow: hidden;
	   left: 1vw;
	   top: 2.4vw;
	   box-sizing: 10px;}
	
.telefono{ 	width:100%;
			height: 6.7vw;
	       top: -1vw;
			position: relative;
		}



.circulo1{background-image: url( ../img/1.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 16%;
			height: 5.4vw;
			position: absolute;
			top: 15%;
			left: 1%;
			border-radius: 50% 50% 50% 50%;}



.barra1{width: 100%;
		height: 4vw;
		position: absolute;
		top:12%;
		left: 3vw;}

.numeros{
	text-align: center;
	font-family: "Source Serif Variable ExtraLigh";
	font-size: 1.7vw;
	color: white;
	margin-left: -1vw;
	margin-top: 1vw;
}
/*--------------------------------------------------------------------------------------------------------------------------*/

.box10{ width:26vw;    min-width: 25vw;
	    height: 14vw;  min-height: 14vw;
top: 9.3vw;
	position: relative;
	    left:-2.7vw;
	    box-sizing: 10px;}


/*--------------------------------------------------------------------------------------------------------------------------*/
.box10info{
			position: absolute;
			top: 1.7vw;
			width: 100%;
			height: 9vw;}


.infobox10{ color:white;
font-size: 1.5vw;
	
}


.Albert{ color:white;
	     text-align: center;}


/*--------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------*/
.pinterest{ width:100%;
			height: 6.2vw;
	       top: -1vw;
			position: relative;
			}



.circulo2{	background-image: url( ../img/2.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
					width: 16%;
			height: 5.4vw;
			position: absolute;
			top: 7%;
			left: 1%;
			border-radius: 50% 50% 50% 50%;}




.barra2{	width: 100%;
		height: 4vw;
		position: absolute;
		top:9%;
		left: 2vw;}


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

.hotmail{	width:100%;
			height: 6.2vw;
	       top: -1vw;
			position: relative;
		}




.circulo3{	background-image: url( ../img/3.png);
		    background-size: 100% 100%;
			background-repeat: no-repeat;
					width: 16%;
			height: 5.4vw;
			position: absolute;
			top: 15%;
			left: 1%;
			border-radius: 50% 50% 50% 50%;}



.barra3{	width: 100%;
		height: 4vw;
		position: absolute;
		top:24%;
		left: 3vw;}

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

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




.circulo4{	background-image:url( ../img/4.png);
		    background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 16%;
			height: 5.4vw;
			position: absolute;
			left: 1%;
			border-radius: 50% 50% 50% 50%;}




.barra4{	
			width: 100%;
		height: 4vw;
		position: absolute;
		top:8%;
		left: -0.1vw;}




.boceto{
	text-align: center;
	font-size: 1.7vw;
	color: white;
	margin-left: -3vw;
	margin-top: 1vw;
	font-family: "Source Serif Variable";
}


.infohotmail{
	text-align: center;
	font-size: 1.7vw;
	color: white;
	margin-left: -3.4vw;
	margin-top: 0.7vw;
	font-family: "Source Sans Pro Semibold";
}

.celularinfo{text-align: center;
		 font-size: 1.7vw;
		 color: white;
	margin-left: -3.7vw;
		 margin-top:1vw;}
/*--------------------------------------------------------------------------------------------------------------------------*/
	footer{ width:100%;   min-width: 100%;
		    height:6vw;   min-height:6vw;
		    background-color:#353535;
		    position:relative;
		   box-shadow: 1px 2px 0px 3px #7C7C7C;}



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



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


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

.facebook{ width:5.4vw;    min-width: 5.4vw;
		   height: 100%;   min-height: 100%;
		   background-image: url( ../img/face.png);
		   background-size: 100% 100%;
		   background-repeat: no-repeat;
		   box-sizing: 10px;
	       border-radius: 100% 100% 100% 100%;}


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


.instragram{ width:5.4vw;    min-width: 5.4vw;
		     height: 100%;   min-height: 100%;
		     background-size: 100% 100%;
			 background-repeat: no-repeat;
		     background-image: url( ../img/Ins.png);
		     box-sizing: 10px; 
		     border-radius: 100% 100% 100% 100%;}

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


.twiter{ width:5.4vw;    min-width: 5.4vw;
	     height: 100%;   min-height: 100%;
	     background-size: 100% 100%;
		 background-repeat: no-repeat;
		 background-image: url( ../img/Tw.png);
	     box-sizing: 10px;
 	     border-radius: 100% 100% 100% 100%;}