@charset "utf-8";

body{ background-color: gray;}	



#estructura1{ width:100%;      min-width: 100%;
			  height:280vw;     min-height: 280vw;
			  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: 31vw;  min-height: 31vw;
	  top: 26vw;
	  left: 0.2%;
	  position: relative;
	  box-sizing: 10px;}



.tituloE1{font-size: 13vw;
		  text-align: center;}


/*------------------------------------------------------------*/
.box2{width:86vw;    min-width: 65vw;
	  height: 120vw;  min-height: 35.6vw;
	  position: relative;	  
	  overflow: hidden;
	  left: 0.5vw;
	  top: 17vw;
	  box-sizing: 10px;}


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



.circulo1{	background-color: crimson;
			width: 28%;
			height: 24.3vw;
			position: absolute;
			top: 8.6%;
			left: 4%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}



.barra1{	
			width: 58%;
			height: 14vw;
			position: absolute;
			top:12%;
			left: 32.3vw;}

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



.circulo2{	background-color: crimson;
			width: 28%;
			height: 24.3vw;
			position: absolute;
			top: 8.6%;
			left: 4%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}




.barra2{    
			width: 58%;
			height: 14vw;
			position: absolute;
			top:31%;
			left: 32.3vw;}


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

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




.circulo3{	background-color: crimson;
			width: 28%;
			height: 24.3vw;
			position: absolute;
			top: 8.6%;
			left: 4%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}



.barra3{	
			width: 58%;
			height: 14vw;
			position: absolute;
			top:31%;
			left: 32.3vw;}

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

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




.circulo4{	background-color: crimson;
			width: 28%;
			height: 24.3vw;
			position: absolute;
			top: 8.6%;
			left: 4%;
		    opacity:  grey 100%;
			border-radius: 50% 50% 50% 50%;}




.barra4{	
			width: 58%;
			height: 14vw;
			position: absolute;
			top:26.2%;
			left: 32.3vw;}

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


.tulcan{text-align: center;
		font-size: 6.9vw;
margin-top: 1%;}


.ubicacion{ text-align: center;
			font-size: 14vw;
margin-top: 8%;}


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



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



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



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

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

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

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

#estructura2{ width:100%;      min-width: 100%;
			  height:173vw;     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: 30vw;  min-height: 8vw;
	top: 11vw;
	overflow: hidden;
	   position: relative;
	  box-sizing: 10px;}


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


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

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


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



/*--------------------------FOOTER----------------------------*/
	footer{width:100%;   min-width: 100%;
		   height:20vw;   min-height:20vw;
		     background-color:#5B5B5B;
		 box-shadow: 1px 2px 3px 4px #1F1F1F ;
		   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%;}