@charset "utf-8";

body{ background-color: gray;}	


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

/*----------------------------------------SLIDER--------------------------------------------------------------------------*/

.container {  width: 100%;
		      height: 127vw; min-height: 127vw;			 
	          overflow: hidden;
			  position: relative;}



.photo { width: 100%;
		 height: 100%;min-height: 100%;
	     position: absolute;
	     animation: round 16s infinite;}



@keyframes round { 25% {    opacity: 0;  }
				   40% {    opacity: 0;  }}



img:nth-child(1) {  animation-delay: 12s;}




img:nth-child(2) {  animation-delay: 8s;}




img:nth-child(3) {  animation-delay: 4s;}




img:nth-child(4) {  animation-delay: 0s;}






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


#estructura2{ width:100%;      min-width: 100%;
			  height:254vw;    min-height: 254vw;
			  display:flex;
			  position:relative;
			  margin: auto;}


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




.box1{ width:92vw;    min-width: 92vw;
	   height: 156vw;  min-height: 156vw;
	   margin: 1.6%;	
	   position: relative;
	   top: 1.7%;
	   left: -0.1%;
	   box-sizing: 10px;}
	



.box2{ width:89vw;    min-width:87vw;
	   height: 80vw;  min-height: 80vw;
	   position: relative;
	   left:0.2%;
	   top: 0.4vw;}

	
.inicio{ font-size: 15vw;
	width: 100%;
	text-align: center;
	margin-top: 8.8vw;}


h3{ font-size: 7vw;
	width: 86%;
	position: relative;
	left: 6vw;
	top: 3%;
	text-align:justify;}

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

#estructura3{ width:100%;      min-width: 100%;
			  height:422vw;    min-height: 422vw;
			  display:flex;
			  position:relative;
			  margin: auto;}


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


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



.box3{ width:90vw;    min-width: 40vw;/* foto*/
	   height: 80vw;  min-height: 35vw;
	   overflow: hidden;
	   position: relative;
	   top: 335vw;
	   left: 0.1%;
	   box-sizing: 10px;}



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


.box4{  width:90vw;    min-width: 90vw;
	    height: 485vw;  min-height: 485vw;
	    top: -80vw;
	    left: 1.9vw;
	    background-repeat: no-repeat;
	    background-image: url(../../img/margen.png);
	    background-size: 97% 67%;
	    position: relative;
	   }



.vision{ font-size: 17vw;	
	     top: 25vw;
		 position: relative;}



.PV{ width: 85%;
	 height: 160vw;
	 top: 23vw;
	 position: relative;
	}


.parrafovision{  width:auto;
				 left: 8.2vw;
				 line-height: 10vw;
				 text-align: justify;
				 font-size: 7vw;}

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

.mision{ font-size: 17vw;
		 position: relative;
		 top: 25vw;}



.PM{ width: 85%;	
	 top: 23vw;
	 height: 78vw;
	 position: relative;
	 overflow: hidden;}


.parrafomision{  width: auto;
				 left: 8.2vw;
				 line-height: 10vw;
				 text-align: justify;
				 font-size: 7vw;}


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

#estructura4{ width:100%;      min-width: 100%;
			  height:240vw;    min-height: 240vw;
			  display:flex;
			  position:relative;
			  margin: auto;}


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


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


.box5{ width:90vw;    min-width: 40vw;
	   height: 80vw;  min-height: 35vw;
	   top: 158vw;
	   position: relative;
	   background-image: url(  ../../img/mundo.png);
	   background-size: 100% 100%;
	   background-repeat: no-repeat;
	   margin: 3.9%;
	   left: 1vw;
	   box-sizing: 10px;}


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


.box6{ width:90vw;    min-width: 40vw;
	   height:181vw;   min-height: 145vw;
	   top: -85vw;
	   left: 5vw;
	   position: relative;  }



.materia{ font-size: 14vw; 
		  margin-top: 12vw;
		  margin-left: -1.3%;}



.parrafomateria{  width: 82%;
				  height: 100vw;
				  position: absolute;
				  left: 7.4vw;
				  line-height: 11vw;
				  text-align: justify;
				  font-size: 7vw;}


.cajaparrafo{ width: 100%;
			  position: relative;
			  height: 100%;}


/*-------------------------------------------------------------------------------------------------------------------------*/
footer{ width:100%;    min-width: 100%;
		height:20vw;   min-height:20vw;
		background-color:#353535;
		box-shadow: 1px 2px 3px 4px #212121;
		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-image: url(../../img/face.png);
		   background-size: 100% 100%;
		   background-repeat: no-repeat;
		   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-image: url( ../../img/Ins.png);
		     background-size: 100% 100%;
		     background-repeat: no-repeat;
		     box-sizing: 10px;
			 border-radius: 100% 100% 100% 100%;}

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


.twiter{ width:18vw;    min-width: 18vw;
	     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%;}