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

* {	padding: 0;
	margin: 0;}


#estructura1{ width:100%;      min-width: 100%;
			  height:67vw;     min-height: 67vw;
			  display:flex;
			  background-color:#2D2D2D;
			  position:relative;
			  margin: auto;}



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

/*------------------------------------------------------------*/
.box1{width:93vw;    min-width: 48vw;
	  height: 10vw;  min-height: 10vw;
	  top: 8vw;
	  left: 0.2%;
	  position: relative;
	  box-sizing: 10px;}



.tituloE1{ font-size: 7vw;
		   color: white;
		   text-align: center;}


/*------------------------------------------------------------*/
.box2{width:40vw;      min-width: 40vw;/* tama;ao del cuadrado para alargar texto*/
	  height: 44vw;  min-height: 35.6vw;
	  position: relative;	  
	  overflow: hidden;
	  left: -0.2vw;
	  top: 3vw;
	  box-sizing: 10px;}


/*------------------------TELEFONO--------------------------*/
.telefono{ 	width:130%;/* icono*/
			height: 11vw;
			position: relative;
			}



.circulo1{	background-image: url(../../img/1.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 20%;
			height: 10vw;
			position: absolute;
			top: 5%;
			left: 1%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}



.barra1{	width: 68%;
			height: 5.2vw;
			position: absolute;
			top:15%;
			left: 8vw;}

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



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




.barra2{	width: 58%;
			height: 5.2vw;
			position: absolute;
			top:30%;
			left: 11vw;}


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

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




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



.barra3{	
			width: 58%;
			height: 5.2vw;
			position: absolute;
			top:32%;
			left: 11vw;}

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

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




.circulo4{	background-image:url(../../img/4.png);
		    background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 27%;
			height: 10vw;
			position: absolute;
			top: 5%;
			left: 1%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}




.barra4{	
			width: 58%;
			height: 5.2vw;
			position: absolute;
			top:28%;
			left: 8vw;}


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

.box3{	 width:37vw;    min-width: 37vw;
	  	 height: 35vw;  min-height: 35vw;
	  	 background-image:url(../../img/P.png);
		 background-size: 100% 100%;
		 background-repeat: no-repeat;
	   	 overflow: hidden;
		 top: 7vw;
	 	 border-radius: 50% 50% 50% 50%;
         position: relative;
	     box-sizing: 10px;}

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

#estructura2{ width:100%;      min-width: 100%;
			  height:69vw;     min-height: 69vw;
			  display:flex;
			  background-color:#EB7272;
			  position:relative;
			  margin: auto;}



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


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

.box4{ width:86vw;    min-width: 65vw;
	   height: 8vw;  min-height: 8vw;
  	   top: 4vw;
	   overflow: hidden;
	   position: relative;
	   box-sizing: 10px;}


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


.box5{width:86vw;    min-width: 65vw;
	  height: 40vw;  min-height: 40vw;
	  position: relative;
	  top: 2.3vw;	
	  box-sizing: 10px;}

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


.box6{width:86vw;    min-width: 65vw;
	  height: 12vw;  min-height: 8vw;
	  position: relative;
	  top: 0.1vw;	 
	  box-sizing: 10px;}

.oficinas{ text-align: center;
		   font-size: 6vw;}


.tulcan{text-align: center;
		font-size: 3vw;}


.ubicacion{ text-align: center;
			font-size: 8vw;
		    color: white;}


.numeros{ text-align: center;
		  font-size: 1.8vw;
		  color: white;
		  margin-top:7%;}



.boceto{ text-align: center;
		 font-size: 1.8vw;
		 color: white;
		 margin-top:7%;}



.infohotmail{text-align: center;
			 font-size: 1.8vw;
			 color: white;
			 margin-top:7%;}



.celularinfo{text-align: center;
			 font-size: 1.8vw;
			 color: white;
			 margin-top:7%;}
/*--------------------------FOOTER----------------------------*/
	footer{ width:100%;   min-width: 100%;
		    height:6vw;   min-height:6vw;
		    background-color:#5B5B5B;
		    box-shadow: 1px 2px 3px 4px #1F1F1F;
		    position:relative;}

.iconos{ width: 60%;
		 height:5.1vw;
		 top: 7%;
		 left: 19vw;
		 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-image: url(../../img/Tw.png);
		 background-size: 100% 100%;
		 background-repeat: no-repeat;
	     box-sizing: 10px;
 	     border-radius: 100% 100% 100% 100%;}