

* {
  margin: 0;
  padding: 0;
}


.fondo {
    background-image: url(../img/estructura/fondofin5.png);
  background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.fondomision {
    background-image: url(../img/estructura/mision1.jpg);
  background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.parrafoinicios {
    text-align: justify;
}


.texto1 {
	text-align: justify;
	color:#fff; 
	margin-left: 7%;
	margin-right:65%;	
    font-size: 1.5vw;
    z-index: 1000;

}


.p1 {
font-family: sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
background: #889ccf;
margin: 0 0 25px;
overflow: hidden;
padding: 20px;	
}


.texto2 {
	text-align: justify;
	color:#fff; 
	margin-top: 3%;
	margin-left: 5%;
	margin-right:55%;	
    font-size: 1.5vw;
}

.texto3 {
	text-align: justify;
	color:#fff; 
	margin-top: -1%;
	margin-left: 56%;
	margin-right:5%;	
    font-size: 1.5vw;
}

.texto5 {
	text-align: justify;
	color:#fff; 
	margin-top: 10%;
	margin-left: 55%;
	margin-right:5%;	
    font-size: 1.5vw;
}

header .carou{
	margin: 0;
	padding:0;

}


.sec1 {
	background-image: url(../img/estructura/planos.jpg);
	width: 60%
	height:10px;
}

.cosmosmarca {
	position: relative;
	z-index:1000;
	margin-top: 0%;
	margin-left: 8%;
}



.box14{
	position:relative:;
}

.box15,.box17,.box18{
	box-shadow:0 0 5px #7e7d7d;
	text-align:center;
}

.box14:before{
	content:"";
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transition:all .35s ease 0s;
}

.box14:hover:before{
	opacity:1;
}

.box14 img{
	width:100%;
	height:auto;
}

.box14 .box-content{
	width:90%;
	height:90%;
	position:absolute;
	top:5%;
	left:5%;
	text-align:center;
}

.box14 .box-content:after,.box14 .box-content:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	opacity:0;
	transition:all .7s ease 0s;
}

.box14 .box-content:before{
	border-bottom:1px solid rgba(255,255,255,.5);
	border-top:1px solid rgba(255,255,255,.5);
	transform:scale(0,1);
	transform-origin:0 0 0;
}

.box14 .box-content:after{
	border-left:1px solid rgba(255,255,255,.5);
	border-right:1px solid rgba(255,255,255,.5);
	transform:scale(1,0);transform-origin:100% 0 0;
}

.box14:hover .box-content:after,.box14:hover .box-content:before{
	opacity:1;
	transform:scale(1);
	transition-delay:.15s;
}

.box14 .title{
	font-size:21px;
	font-weight:700;
	color:#fff;
	margin:15px 0;
	opacity:0;
	transform:translate3d(0,-50px,0);
	transition:transform .5s ease 0s;
}

.box14:hover .title{
	opacity:1;
	transform:translate3d(0,0,0);
}

.box14 .post{
	font-size:14px;
	color:#fff;
	padding:10px;
	background:#d79719;
	opacity:0;
	border-radius:0 19px;
	transform:translate3d(0,-50px,0);
	transition:all .7s ease 0s;
}

.box14 .icon,.box15 .icon{
	padding:0;
	list-style:none;
}

.box14:hover .post{
	opacity:1;
	transform:translate3d(0,0,0);
	transition-delay:.15s;
}

.box14 .icon{
	width:100%;
	margin:0;
	position:absolute;
	bottom:-10px;
	left:0;
	opacity:0;
	z-index:1;
	transition:all .7s ease 0s;
}

.box14:hover .icon{
	bottom:20px;
	opacity:1;
	transition-delay:.15s;
}

.box14 .icon li a{
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	border:1px solid #fff;
	border-radius:0 16px;
	font-size:14px;
	color:#fff;
	margin-right:5px;
	transition:all .4s ease 0s;
}

.box14 .icon li a:hover{
	background:#d79719;
	border-color:#d79719;
}

@media only screen and (max-width:990px){
	.box14{margin-bottom:30px;
	}
}




.container-portada {
	width: 100%;
	height: 320px;
	background-image: url(../img/estructura/Z2.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimiento 10s linear;

}

@keyframes movimiento{
	from{
		background-position: bottom left;
	}to{
		background-position: top right;
	}
}


.container-portada1 {
	width: 100%;
	height: 320px;
	background-image: url(../img/estructura/Z1.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientos 10s linear;
}

@keyframes movimientos{
	from{
		background-position: top left;
	}to{
		background-position: bottom right;
	}
}

.container-portada2 {
	width: 100%;
	height: 320px;
	background-image: url(../img/estructura/Z4.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientoss 10s linear;
}

@keyframes movimientoss{
	from{
		background-position: left bottom;
	}to{
		background-position: right top;
	}
}


.container-portada3 {
	width: 100%;
	height: 320px;
	background-image: url(../img/estructura/Z6.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientosss 10s linear ;
}

@keyframes movimientosss{
	from{
		background-position: right top;
	}to{
		background-position: left bottom;
	}
}











@media screen and (min-width: 1900px){

.texto1 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;

  
}



.texto2 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}



.texto3 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}

.texto4 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}

}



@media screen and (min-width: 1601px) and (max-width: 1899px){

.texto1 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;

  
}



.texto2 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}



.texto3 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}

.texto4 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.1vw;
    font-family: georgia;
}




}






@media screen and (min-width: 1300px) and (max-width: 1600px){

.icono1 {
	width: 108%;
}

.icono2 {
	width: 107%;
}

.icono3 {
	width: 107%;
}

.icono4 {
	width: 107%;
}

.icono5 {
	width: 107%;
}

.icono6 {
	width: 107%;
}


.texto1 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.4vw;
    font-family: georgia;
        
  
}






.texto2 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;	
    font-size: 1.4vw;
    font-family: georgia;

}


.texto3 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 3%;
	margin-right:60%;	
    font-size: 1.4vw;
    font-family: georgia; 
}

.texto4 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 55%;
	margin-left: 4%;
	margin-right:40%;	
    font-size: 1.4vw;
    font-family: georgia; 
}


}


@media screen and (min-width: 1025px) and (max-width: 1299px){

.margicontainer {
	margin-left: 20%;
}


.texto1 {
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;
	text-align: justify;
	color:#fff; 
    font-size: 1.4vw;
    font-family: georgia;

}






.texto2 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:60%;	
    font-size: 1.4vw;
    font-family: georgia;

}


.texto3 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 3%;
	margin-right:60%;	
    font-size: 1.4vw;
    font-family: georgia; 
}

.texto4 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 55%;
	margin-left: 4%;
	margin-right:40%;	
    font-size: 1.4vw;
    font-family: georgia; 
}


}


@media screen and (min-width: 781px) and (max-width: 1024px){







.texto1 {
	position: relative;
	margin-top:0%;
    top: 10%;
	margin-left: 2%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 1.7vw;
    font-family: georgia;

  
}



.texto2 {
	position: relative;
	margin-top:0%;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 1.7vw;
    font-family: georgia;
}



.texto3 {
	position: relative;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 1.7vw;
    font-family: georgia;
}

.texto4 {
	position: relative;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 1.7vw;
    font-family: georgia;
}



}

@media screen and (min-width: 641px) and (max-width: 780px){

.texto1 {
	position: relative;
	margin-top:0%;
    top: 10%;
	margin-left: 2%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 2vw;
    font-family: georgia;

  
}



.texto2 {
	position: relative;
	margin-top:0%;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 2vw;
    font-family: georgia;
}



.texto3 {
	position: relative;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 2vw;
    font-family: georgia;
}

.texto4 {
	position: relative;
    top: 10%;
	margin-left: 7%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 2vw;
    font-family: georgia;
}



}

@media screen and (min-width: 481px) and (max-width: 640px){
    
 .container-portada {
	width: 120%;
	height: 420px;
	margin-top: -15%;
	background-image: url(../img/estructura/Z12.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimiento 10s linear;

}

@keyframes movimiento{
	from{
		background-position: bottom left;
	}to{
		background-position: top right;
	}
}   






.container-portada2 {
	width: 140%;
	height: 405px;
	margin-top: -6%;
	background-image: url(../img/estructura/Z4.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientoss 10s linear;
}

@keyframes movimientoss{
	from{
		background-position: left bottom;
	}to{
		background-position: right top;
	}
}


.texto1 {
	position: relative;
	margin-top: 0%;
    top: 30%;
	margin-left: 2%;
	margin-right:50%;
	text-align: justify;
	color:#fff; 
    font-size: 2vw;
    font-family: georgia;
}






.texto2 {
    margin-top: 0%;
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:50%;	
    font-size: 2vw;
    font-family: georgia;

}


.texto3 {
    margin-top: 0%;
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 20%;
	margin-left: 2%;
	margin-right:50%;	
    font-size: 2vw;
    font-family: georgia; 
}

.texto4 {
    margin-top: 0%;
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 10%;
	margin-left: 2%;
	margin-right:50%;	
    font-size: 2vw;
    font-family: georgia; 
}


   
   
    
    
}





@media screen and (max-width: 480px){

.container-portada {
	width: 187%;
	height: 320px;
	margin-top: -15%;
	background-image: url(../img/estructura/Z12.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimiento 10s linear;

}

@keyframes movimiento{
	from{
		background-position: bottom left;
	}to{
		background-position: top right;
	}
}

.container-portada1 {
	width: 155%;
	height: 290px;
	margin-top: -15%;
	background-image: url(../img/estructura/Z1.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientos 10s linear;
}


@keyframes movimientos{
	from{
		background-position: top left;
	}to{
		background-position: bottom right;
	}
}



.container-portada2 {
	width: 185%;
	height: 280px;
	margin-top: -6%;
	background-image: url(../img/estructura/Z4.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientoss 10s linear;
}

@keyframes movimientoss{
	from{
		background-position: left bottom;
	}to{
		background-position: right top;
	}
}


.container-portada3 {
	width: 155%;
	height: 305px;
	margin-top: -18%;
	background-image: url(../img/estructura/Z6.jpg);
	 background-repeat: no-repeat;
	background-size: 100%;
	animation: movimientosss 10s linear ;
}

@keyframes movimientosss{
	from{
		background-position: right top;
	}to{
		background-position: left bottom;
	}
}










.icono1 {
	margin-top: -9%;
	width: 100%;
	margin-left: 4%;
}





.texto1 {
	position: relative;
    top: 20%;
	margin-left: 2%;
	margin-right:70%;
	text-align: justify;
	color:#fff; 
    font-size: 3.1vw;
    font-family: georgia;
}






.texto2 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 50%;
	margin-left: 16%;
	margin-right:40%;	
    font-size: 3.1vw;
    font-family: georgia;

}


.texto3 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 55%;
	margin-left: 3%;
	margin-right:50%;	
    font-size: 3.1vw;
    font-family: georgia; 
}

.texto5 {
	text-align: justify;
	color:#fff; 
	position: relative;
    top: 55%;
	margin-left: 4%;
	margin-right:40%;	
    font-size: 3.1vw;
    font-family: georgia; 
}


}



  .colord3{
background:#024959;
  }




			.carousel-caption1
			{
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				padding-top: 20px;
				padding-bottom: 20px;
				color: #fff;
				text-align: center;
				background: rgba(0,0,0,0.4);
			}
 



			.carousel-caption
			{
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 10;
				padding-top: 20px;
				padding-bottom: 20px;
				color: #fff;
				text-align: center;
				background: rgba(0,0,0,0.4);
			}
 


 /*********************** Demo - 3 *******************/
.box3{
	box-shadow:0 0 3px rgba(0,0,0,.3);
	position:relative
}


.box3 .box-content,.box3:after,.box3:before{
	position:absolute;
	left:7%;
	right:7%;
	transition:all .3s
}


.box3:after,.box3:before{display:block;background:rgba(0,0,0,.3);top:10%;bottom:10%;z-index:1;transform:scale(0,1)}
.box3:after{top:10.8%;bottom:10.8%;transform:scale(1,0)}
.box3:hover:after,.box3:hover:before{transform:scale(1);animation:animate 1.5s}
.box3:hover:before{border-top:3px solid #fff;border-bottom:3px solid #fff}
.box:hover:after{border-left:3px solid #fff;border-right:3px solid #fff}

.box img{
	width:100%;
	height:auto;
	transition:all .3s
}

.box3:hover img{
	transform:scale(1.0);
	filter:blur(5px);
	-moz-filter:blur(4px);
	-webkit-filter:blur(4px)
}

.box3 .box-content{
	padding:30px 10px;
	top:10%;
	bottom:10%;
	opacity:0;
	z-index:2
}



.box3:hover .box-content{
	box-shadow:0 0 0 15px rgba(255,255,255,.3);
	opacity:1;transition:all .3s
}



.box3 .title{font-size:24px;
	font-weight:600;
	color:#88c425;
	margin:0 0 5px
}

.box3 .post{
	display:block;
	margin:0 0 5px;
	font-size:14px;
	color:rgba(255,255,255,.8)
}


.box3 .description{font-size:14px;color:#fff;margin:0 0 20px}
.box3 .icon{padding:0;margin:0;list-style:none}
.box3 .icon li{display:inline-block;margin:0 10px 0 0}
.box3 .icon li a{display:block;width:30px;height:30px;line-height:30px;color:#fff;background:#88c425;transition:all .5s}
.box3 .icon a:hover{text-decoration:none;animation:animate-hover .5s;transition:all .3s}
@keyframes animate{0%,100%{opacity:1}
}
@keyframes animate-hover{0%{box-shadow:0 0 0 10px rgba(255,255,255,.3)}
50%{box-shadow:0 0 0 5px rgba(255,255,255,.3)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
}
.box10,.box11,.box12,.box14,.box4,.box5,.box6,.box7,.box9{box-shadow:0 0 3px rgba(0,0,0,.3)}
@media only screen and (max-width:990px){.box3{margin-bottom:30px}
.box3 .box-content{padding:10px}
.box3 .description{margin-bottom:10px}
}
@media only screen and (max-width:479px){.box3 .title{margin:0}
}