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



body{	font-size:16px;  font-family: 'Open Sans', sans-serif; padding: 0px;	margin: 0px; background:url(../img/head/bg.png)  no-repeat fixed; background-size:100%; 	color:#333;	}
#contenedor{	width:100%;	border: 0px solid #F60;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor1{	width:90%;	border: 0px solid #000;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor2{	width:90%;	border: 0px solid #000;	margin: 0px auto 0px;	overflow:hidden; }
#contenedor3{	width:50%;	border: 0px solid #000;	margin: 70px auto 70px;	overflow:hidden; }


#header{height:160px;}
#logo{ width:300px;  margin: 15px auto 0px;	overflow:hidden;margin-bottom:20px; }	
#logo img{width:100%}

#LineaNaranja{width:100%; height:10px; background:#FFC315}
#licen{width:250}

#redes{margin-top:-140px; margin-bottom:10px; width:130px; float:right; border: 0px solid #f60; }	
#redes img{width:40px}

p{ font-size:21px; line-height:1.2;}

footer{	width:950px;margin:0px auto;	color:#039;	font-size:12px;	background:#ECECEC;}
#mapa{	width: 100%;	height: 187px;	color: #fff;	font-size:12px;	background:#4E6B8C;	border:0px solid #F00;}

#separador1{ width:100%; height:50px}
#separador2{ width:100%; height:20px}

.bg1{background:url(../img/PATTERN-BLACK.png) repeat; background-size:50%; width:100%;}
.bg11{background:url(../img/PATTERN-BLACK.png) no-repeat; background-size:100%; width:100%;}
.bg2{background:#FFF; width:100%;}
.bg22{background:#FFC315; width:100%;}
.bg3{background:url(../img/PATTERN-YELLOW.png);padding:2% 0; background-size:50%}
.bg33{background:#FFC315; padding:2% 0; }
a{   color: #000;	text-decoration: none;	}
a:hover{  color:#F47723;    text-decoration: none;	}

#titu{color:#232323; font-size: 30px; font-weight:600; 	}
#titu3{font-family: 'Roboto Slab', serif; color:#222; font-size: 30px; font-weight:600;	text-shadow: 0.1em 0.1em 0.2em #}

#f1{float:left; width:33%; border: 0px solid #0C6; margin-top:10px; font-size:16px; margin-top:25px; margin-bottom:25px; }
#f2{float:left; width:34%; text-align:center; border: 0px solid #0C6; font-size:14px; margin-top:15px; margin-bottom:25px; }
#f3{float:left; width:33%; text-align:right; border: 0px solid #0C6; font-size:16px; margin-top:25px; margin-bottom:25px; }

#mision-11{width:50%; float:left; padding:%; border:0px solid #999}
#mision-22{width:50%; float:right; padding:%; border:0px solid #999}

#conta1{width:45%; float:left; border:0px solid #C30;}
#conta2{width:45%; float:right; margin-top:px; border:0px solid #C30;}

#menform{width:100%; border:0px; border-bottom:1px solid #BBB; background:#ededed; height:35px; margin-bottom:8PX; margin-top:5px;}
#menform2{width:100%; border:0px; border-bottom:1px solid #BBB; background:#ededed; height:150px; margin-top:5px;}


.containeri{  position: relative;  width: 19%;  float:left;  margin-left:0.75% ; margin-bottom:10px;   }

.overlayii {  position: absolute;  bottom: 30%;  left: 0;  right: 0;    overflow: visible;  width: 100%;
  height: 0;  transition: .5s ease;  color:#fff;  text-align:center;  font-weight:500;  z-index:; }

#img-contenedor:hover  .overlayii .textii{  margin-top:-20px }

.textii {  white-space: nowrap;   color: white;   font-size: 18px;  position: absolute;  overflow: visible;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);   width:100%;	padding:10px 0; }

#img-contenedor img {
-webkit-transition:all 1.9s ease; /* Safari y Chrome */
-moz-transition:all 1.9s ease; /* Firefox */
-o-transition:all 1.9s ease; /* IE 9 */
-ms-transition:all 1.9s ease; /* Opera */
width:100%;
}
#img-contenedor:hover img {
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-ms-transform:scale(1.25);
-o-transform:scale(1.25);
transform:scale(1.25);
}
#img-contenedor {/*Ancho y altura son modificables al requerimiento de cada uno*/
overflow:hidden;
}

.container {
  position: relative;
  width: 24%;
  margin:0.5%;
  float:left; 
}

#dirs {
  display: block;
  width: 100%;
 height: auto;
}

#img-contenedor  .overlayii img{ width:45px; margin-bottom:10px}

#img-contenedor  .overlayii:hover img {
-webkit-transform:scale(1.10);
-moz-transform:scale(1.10);
-ms-transform:scale(1.10);
-o-transform:scale(1.10);
transform:scale(1.10);
}




@media screen and (min-width: 900px) and (max-width: 1099px) {
#contenedor1{	width:90%;	border:0px solid #f00;	margin: 0px auto 0px;	overflow:hidden; }

#titu{color:#232323; font-size: 25px; font-weight:600; 	}
#titu3{font-family: 'Roboto Slab', serif; color:#222; font-size: 25px; font-weight:600;	text-shadow: 0.1em 0.1em 0.2em #}
p{ font-size:19.5px; line-height:1.2;}

#separador1{ width:100%; height:40px}
#separador2{ width:100%; height:20px}

#licen{width:200px}

.containeri{  position: relative; width: 31.5%;
    float: left;
    margin-left: 1.5%;
    margin-bottom: 10px;
   }

.overlayii {  position: absolute;  bottom: 30%;  left: 0;  right: 0;    overflow: visible;  width: 100%;
  height: 0;  transition: .5s ease;  color:#fff;  text-align:center;  font-weight:500;  z-index:; }
#img-contenedor:hover  .overlayii .textii{  margin-top:-20px }

.textii {  white-space: nowrap; color: white; font-size: 16px;  position: absolute; overflow: visible;  top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%; padding: 10px 0; }
.textii img { width:120px}

}

@media screen and (min-width: 600px) and (max-width: 899px) {
#contenedor1{	width:90%;	border: 0px solid #00C;	margin: 0px auto 0px;	overflow:hidden; }

#header{height:148px;}
#logo{ width:250px;  margin: 15px auto 0px;	overflow:hidden; margin-bottom:20px; float:left }	
#logo img{width:100%}

#redes{margin-top:50px; margin-bottom:10px; width:130px; float:right; border: 0px solid #f60; }	
#redes img{width:40px}

#titu{color:#232323; font-size: 22px; font-weight:600; 	}
#titu3{font-family: 'Roboto Slab', serif; color:#222; font-size: 22px; font-weight:600;	text-shadow: 0.1em 0.1em 0.2em #}
p{ font-size:18px; line-height:1.2;}

#separador1{ width:100%; height:30px}
#separador2{ width:100%; height:20px}

#licen{width:170px}

.containeri{  position: relative; width: 31.5%;
    float: left;
    margin-left: 1.5%;
    margin-bottom: 10px;
   }

.overlayii {  position: absolute;  bottom: 30%;  left: 0;  right: 0;    overflow: visible;  width: 100%;
  height: 0;  transition: .5s ease;  color:#fff;  text-align:center;  font-weight:500;  z-index:; }
#img-contenedor:hover  .overlayii .textii{  margin-top:-20px }

.textii {  white-space: nowrap; color: white; font-size: 17px;  position: absolute; overflow: visible;  top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%; padding: 10px 0; }
.textii img { width:120px}

}

@media screen and (min-width: 480px) and (max-width: 599px) {
#contenedor1{	width:90%;	border: 0px solid #0C3;	margin: 0px auto 0px;	overflow:hidden; }

#header{height:125px;}
#logo{ width:200px;  margin: 15px auto 0px;	overflow:hidden; margin-bottom:20px; float:left }	
#logo img{width:100%}

#redes{margin-top:50px; margin-bottom:10px; width:130px; float:right; border: 0px solid #f60; }	
#redes img{width:40px}

#titu{color:#232323; font-size: 20px; font-weight:600; 	}
#titu3{font-family: 'Roboto Slab', serif; color:#222; font-size: 20px; font-weight:600;	text-shadow: 0.1em 0.1em 0.2em #}
p{ font-size:17px; line-height:1.2;}

#separador1{ width:100%; height:30px}
#separador2{ width:100%; height:20px}

#licen{width:170px}

.containeri{  position: relative;
    width: 47.5%;
    float: left;
    margin-left: 2.5%;
    margin-bottom: 10px;
   }

.overlayii {  position: absolute;  bottom: 30%;  left: 0;  right: 0;    overflow: visible;  width: 100%;
  height: 0;  transition: .5s ease;  color:#fff;  text-align:center;  font-weight:500;  z-index:; }
#img-contenedor:hover  .overlayii .textii{  margin-top:-20px }

.textii {  white-space: nowrap; color: white; font-size: 17px;  position: absolute; overflow: visible;  top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%; padding: 10px 0; }
.textii img { width:120px}

#LineaNaranja{width:100%; height:6px; background:#FFC315}

#conta1{width:100%; float:left; border:0px solid #C30;}
#conta2{width:100%; float:right; margin-top:px; border:0px solid #C30;}

#f1{float:left; width:100%; text-align:center; border: 0px solid #0C6; font-size:16px; margin-top:25px; margin-bottom:25px; }
#f2{float:left; width:50%; text-align:left; border: 0px solid #0C6; font-size:14px; margin-top:0px; margin-bottom:25px; }
#f2 img{ width:60px}
#f3{float:left; width:50%; text-align:right; border: 0px solid #0C6; font-size:16px; margin-top:0px; margin-bottom:25px; }

}


@media screen and (min-width: 320px) and (max-width: 479px) {
#contenedor1{	width:90%;	border: 0px solid #f00;	margin: 0px auto 0px;	overflow:hidden; }

#header{height:110px;}
#logo{ width:170px;  margin: 15px auto 0px;	overflow:hidden; margin-bottom:20px; float:left }	
#logo img{width:100%}

#redes{margin-top:33px; margin-bottom:10px; width:115px; float:right; border: 0px solid #f60; }	
#redes img{width:35px}

#titu{color:#232323; font-size: 18px; font-weight:600; 	}
#titu3{font-family: 'Roboto Slab', serif; color:#222; font-size: 18px; font-weight:600;	text-shadow: 0.1em 0.1em 0.2em #}
p{ font-size:17px; line-height:1.2;}

#separador1{ width:100%; height:20px}
#separador2{ width:100%; height:20px}

#licen{width:120px}

.containeri{  position: relative;
    width: 47.5%;
    float: left;
    margin-left: 2.5%;
    margin-bottom: 10px;
   }

.overlayii {  position: absolute;  bottom: 30%;  left: 0;  right: 0;    overflow: visible;  width: 100%;
  height: 0;  transition: .5s ease;  color:#fff;  text-align:center;  font-weight:500;  z-index:; }
#img-contenedor:hover  .overlayii .textii{  margin-top:-20px }

.textii {  white-space: nowrap; color: white; font-size: 15px;  position: absolute; overflow: visible;  top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); width: 100%; padding: 10px 0; }
.textii img { width:120px}

#LineaNaranja{width:100%; height:6px; background:#FFC315}

#conta1{width:100%; float:left; border:0px solid #C30;}
#conta2{width:100%; float:right; margin-top:px; border:0px solid #C30;}

#f1{float:left; width:100%; text-align:center; border: 0px solid #0C6; font-size:16px; margin-top:25px; margin-bottom:15px; }
#f2{float:left; width:50%; text-align:left; border: 0px solid #0C6; font-size:14px; margin-top:0px; margin-bottom:25px; }
#f2 img{ width:60px}
#f3{float:left; width:50%; text-align:right; border: 0px solid #0C6; font-size:16px; margin-top:0px; margin-bottom:25px; }
#f3 img{ width:70px}

}






/* CSS Carrusel */