@font-face {
	font-family: "unisans";
    font-style: normal;
    font-weight: normal;
    src: local("?"), url("../fonts/uni.woff") format("woff"), url("../fonts/uni.ttf") format("truetype");
}
body{
	margin:0;
	padding:0;
	background: #cccccc;
	/*background: #c30020 url("../imagenes/fondo.jpg") repeat;
	background-position: top center;
	background-attachment: fixed;*/
}
.container-who{
	display: flex; 
	flex-direction: column;
}
.container-who .row-who{
	display: flex; 
	padding-bottom: 2rem;
}
.container-who .img-who{
	display: flex; 
	align-items: center;
	justify-content: center;
}
.img-who .space{
    padding: 1rem;
    width: 25rem;
    background-color: #00406D;
    border: 3px solid #cccccc;
}
.img-who .txt{
	color: #656565;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    line-height: 15px;
    padding: 5px 0px 0px 0px;
    margin: 0px;
}
.text-al{
	text-align: justify;
	padding: 1rem;
	display: flex;
	align-items: center;
}
.direction{
    text-align: start;
}
#contenedor{
	width:80%;
	position:relative;
	max-width:956px;
	margin:0 auto;
}
#header{
	position:relative;
	background-color:#F7F7F7;
	float:left;
	width:100%;
}
.ven{
	color:#04C62D;
	margin-top:10px;
	margin-bottom:10px;
}
#logo{
	position:relative;
	float:left;
	width:37%;
	text-align:center;
}
.redes{
	position:relative;
	float:left;
	top:10px;
}
.fb2{
	display:none;
}
.info{
	position:relative;
	float:right;
	font-family: 'Droid Sans';
	font-weight:bold;
	padding-top: 29px;
    right: 22px;
	font-size: 18px;
}
.arroba{
	color:#0ed337;
	padding-right: 5px;
	font-size: 1.5rem;

}
.arroba1{
	color:#00406D;
	padding-right: 5px;
}
.mail{
	margin-left:15px;
	text-decoration:none;
	color:black;
}
.mail:hover{
	color:#00406D;
}
.mail:hover .arroba{
	color: #00406D
}
#menu{
	position:relative;
	float:left;
	width:100%;
	background-color:white;
}
#inmenu{
	width: 85%;
    position: relative;
    float: left;
    margin-left: 7.5%;
}
.cuadro {
	width:50%;
	position:relative;
	float:left;
	text-align:center;
	font-family: 'Droid Sans';
}
.cuadro h1{
	font-family: "unisans";
}
.cuadroin{
	width:90%;
	position:relative;
	margin: 0 auto;
	margin-bottom:10px;
	margin-top:10px;
}
.cuadroin img {
	opacity: 0.4;
    filter: alpha(opacity=40);
}
.black{
	position: relative;
    float: left;
    width: 100%;
    background-color: #21618C;
}
.bla{
	background-color:#21618C;
	left:25%;
}
.verde{
	background-color:#85C1E9;
}
.lima{
	background-color:#5DADE2;
}
.pardo{
	background-color: #3498DB;
}
.green{
	background-color:#2E86C1;
}
.gris{
	background-color:#2874A6;
}
.negro{
	background-color:#464646;
}

.blain{
	border:10px solid #21618C;
}
.verdein{
	border:10px solid #85C1E9;
}
.limain{
	border:10px solid #5DADE2;
}
.pardoin{
	border:10px solid #3498DB;
}
.greenin{
	border:10px solid #2E86C1;
}
.grisin{
	border:10px solid #2874A6;
}
.negroin{
	border:10px solid #464646;
}
.cuadro:hover >.blain{
	border:10px solid #fff;
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}

.cuadro:hover >.verdein{
	border:10px solid #fff;
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.cuadro:hover >.limain{
	border:10px solid #fff;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.cuadro:hover >.pardoin{
	border:10px solid #fff;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.cuadro:hover >.greenin{
	border:10px solid #fff;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.cuadro:hover >.grisin{
	border:10px solid #fff;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.cuadro:hover >.negroin{
	border:10px solid #fff;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.blain:hover > .cuadroimg {
	opacity: 1;
    filter: alpha(opacity=100);
	 filter: alpha(opacity=100);
	-webkit-transition: opacity 500ms;
    transition: opacity 500ms;

}
.verdein:hover > .cuadroimg {
	opacity: 1;
    filter: alpha(opacity=100);
	 filter: alpha(opacity=100);
	-webkit-transition: opacity 500ms;
    transition: opacity 500ms;

}
.limain:hover > .cuadroimg {
	  opacity: 1;
    filter: alpha(opacity=100);
		-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
.pardoin:hover > .cuadroimg {
	  opacity: 1;
    filter: alpha(opacity=100);
		-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
.greenin:hover > .cuadroimg {
	  opacity: 1;
    filter: alpha(opacity=100);
		-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
.grisin:hover > .cuadroimg {
	  opacity: 1;
    filter: alpha(opacity=100);
		-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
.negroin:hover > .cuadroimg {
	  opacity: 1;
    filter: alpha(opacity=100);
		-webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}
#textoinsidebla{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafobla{
	display:none;
}
#linkinsidebla{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsideverde{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafoverde{
	display:none;
}
#linkinsideverde{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsidelima{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafolima{
	display:none;
}
#linkinsidelima{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsidepardo{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafopardo{
	display:none;
}
#linkinsidepardo{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsidegreen{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafogreen{
	display:none;
}
#linkinsidegreen{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsidegris{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafogris{
	display:none;
}
#linkinsidegris{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#textoinsidenegro{
	cursor: pointer;
    top: 100px;
    left: 40px;
	color:white;
}
.parrafonegro{
	display:none;
}
#linkinsidenegro{
	position: absolute;
    top: 230px;
    left: 365px;
	display:none;
}
#enlace{
	text-decoration:none;
	color:white;
}
#enlace:hover{
	color:black;
}

/*******Hover adentro del cuadro*******/
/* .blain:hover > #textoinsidebla {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.blain:hover > #textoinsidebla > .parrafobla{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.blain:hover > #linkinsidebla{
	display:block;
} 
.verdein:hover > #textoinsideverde {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
}
.verdein:hover > #textoinsideverde > .parrafoverde{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.verdein:hover > #linkinsideverde{
	display:block;
}  
.limain:hover > #textoinsidelima {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.limain:hover > #textoinsidelima > .parrafolima{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.limain:hover > #linkinsidelima{
	display:block;
} 
.pardoin:hover > #textoinsidepardo {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
}
.pardoin:hover > #textoinsidepardo > .parrafopardo{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.pardoin:hover > #linkinsidepardo{
	display:block;
}
.greenin:hover > #textoinsidegreen {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.greenin:hover > #textoinsidegreen > .parrafogreen{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.greenin:hover > #linkinsidegreen{
	display:block;
}   
.grisin:hover > #textoinsidegris{
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.grisin:hover > #textoinsidegris > .parrafogris{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.grisin:hover > #linkinsidegris{
	display:block;
}  
.negroin:hover > #textoinsidenegro {
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
	top: 0px;
    left: 0px;
    height: 100%;
	-webkit-transition: color 300ms, background 500ms, border-color 700ms;
    transition: color 300ms, background 500ms, border-color 700ms;
}
.negroin:hover > #textoinsidenegro > .parrafonegro{
	display:block;
	margin-bottom:20px;
	width: 90%;
    margin: 0 auto;
}
.negroin:hover > #linkinsidenegro{
	display:block;
}   */
/*************************************/
#textoinside{
	position: absolute;
     top: 100px;
    left: 15px;
	background-color:rgba(0, 0, 0, 0.43);
	color:white;
}
#linkinside{
	position: absolute;
    top: 230px;
    left: 365px;
}
#descripcion{
	background-color:white;
	position:relative;
	float:left;
	width: 100%;
}
.indescripcion{
	position:Relative;
	width:90%;
	margin-left:5%;
	float:left;
	margin-bottom:10px;
	margin-top:30px;
	font-family: 'Droid Sans';
}
h3{
	font-family: "unisans";
    margin-top: 0px;
}
#imagen{
	position:Relative;
	float:left;
	width:100%;
	height:259px;
	background-image:url('../imagenes/imagenindex.png');
}
#imagen h1{
	font-family: "unisans";
	color:white;
	font-style:italic;
	font-size:31pt;
}
#inimagen{
	width:90%;
	position:relative;
	float:left;
	margin-left:5%;
	margin-top:20px;
}
#greenh{
	color:#04fc38;
	font-size:42pt;
}
#mapa{
	position:Relative;
	float:left;
	width:100%;
	height:391px;
	
}
.nav-collapse a:before, .nav-collapse a.active {
	content: "";
	position: absolute;
	width: 60%;
	height: 2px;
	bottom: 15;
	left: 20%;
	background-color: #f10028;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.nav-collapse li a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
#super{
	position:relative;
	float:left;
	margin-top:-391px;
	width:100%;
	background-color:rgba(0, 0, 0, 0.7);
}
#ubica{
	width:60%;
	position:relative;
	float:left;
}
#ubica h2{
	font-family: "unisans";
	color:#04fc38;
	margin-left:30px;
}
#textoubica{
	width:60%; 
	position:relative;
	float:left;
	color:#04fc38;
	top:140px
}
#textoin{
	width:90%;
	position:relative;
	font-family: 'Droid Sans';
	margin-left:5%;
	font-size:10pt;
}
#contacto{
	width:30%; 
	position:relative;
	float:right;
	font-family: 'Droid Sans';
	margin-bottom: 30px;
}
#tblcontacto{
	color:white;
}
#tblcontacto2{
	color:white;
}
#enviar{
	border:2px solid #00406D;
	background-color:transparent;
	color:white;
	padding:8px;
}
#footer{
	width:100%;
	float:left;
	text-align:center;
	color:white;
	font-family: 'Droid Sans';
}
#canvas{
	width:100%;
}
.grafica{
	position:relative;
	float:left;
	width:25%;
}
.graficaimg{
	position:relative;
	width:100%;
	text-align:center;
}
.graficatxt{
	position:relative;
	width:100%;
	text-align:center;
}
#contact{
	width:100%;
	position:relative;
	float:left;
	background-color: rgba(0, 0, 0, 0.52);
}
#txtcontact{
	width:50%;
	position:relative;
	float:left;
}
.textcontact{
	width:80%;
	position:relative;
	margin-top:30px;
	margin-left:10%;
	font-family: 'Droid Sans';
	color:white;
}
.imag{
	width:25%;
	position:relative;
	float:left;
	text-align:center;
}
.imag img{
	max-width:80%;
}
.nombre{
	display:none;
}
.imag:hover > .nombre{
	display:block;
	-webkit-transition: visibility 0s linear 0.5s,opacity 0.5s line;
   transition: visibility 0s linear 0.5s,opacity 0.5s line;
}
.imag:hover > .nombre2{
	display:none;
}
#ventana-flotante2 {
	width: 184px;
    height: 130px;
    background: #fff;
    position: fixed;
    top: 100px;
    left: 86%;
    /* margin-left: -180px; */
    z-index: 99999;
    font-size: 16px;
    font-weight: bold;
	color:#000;
}
#ventana-flotante2 img{
	width:50%;
}
#ventana-flotante2 #contenedor {
	padding: 25px 10px 10px 10px;
}
#ventana-flotante2 .cerrar {
	float: right;
	border-bottom: 1px solid #bbb;
	border-left: 1px solid #bbb;
	color: #999;
	background: white;
	line-height: 17px;
	text-decoration: none;
	padding: 0px 14px;
	font-family: Arial;
	border-radius: 0 0 0 5px;
	box-shadow: -1px 1px white;
	font-size: 18px;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
}
#ventana-flotante2 .cerrar:hover {
	background: #ff6868;
	color: white;
	text-decoration: none;
	text-shadow: -1px -1px red;
	border-bottom: 1px solid red;
	border-left: 1px solid red;
}
#ventana-flotante2 #contenedor .contenido {
	padding: 15px;
	box-shadow: inset 1px 1px white;
	background: #deffc4;  /* Fondo del mensaje */
	border: 1px solid #9eff9e;  /* Borde del mensaje */
	font-size: 20px;  /* Tamaño del texto del mensaje */
	color: #555;  /* Color del texto del mensaje */
	text-shadow: 1px 1px white;
	margin: 0 auto;
	border-radius: 4px;
}
.oculto {
	-webkit-transition:1s;
	-moz-transition:1s;
	-o-transition:1s;
	-ms-transition:1s;
	opacity:0;
	-ms-opacity:0;
	-moz-opacity:0;
	visibility:hidden;
}
			
@media screen and (max-width: 1345px){
	#ventana-flotante2{
		display:none;
	}
}
@media screen and (max-width: 1118px){
	#contenedor{
		width:100%;
	}
}
@media screen and (max-width: 960px){
	.nav-collapse a:before {
		content: "";
		position: absolute;
		width: 40%;
		height: 0px;
		bottom: 15;
		left: 30%;
		background-color: skyblue;
		visibility: hidden;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		-webkit-transition: all 0.3s ease-in-out 0s;
		transition: all 0.3s ease-in-out 0s;
	}
	.nav-collapse li a:hover:before {
		visibility: visible;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
	
	#menu{
		background-color:#f0f0f0;
	}
	#inmenu{
		width:100%;
		margin-left:0%;
	}
	.redes{
		display:none;
	}
	.fb2{
		display:block;
	}
}
@media screen and (max-width: 954px){
	#linkinsideverde {
		left: 340px;
	}
}
@media screen and (max-width: 870px){
	h1 {
		font-family: "unisans";
		font-size: 19pt;
	}
	#linkinsideverde {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	.verdein:hover > #textoinsideverde {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.limain:hover > #textoinsidelima {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafolima{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidelima {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	.grisin:hover > #textoinsidegris {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafogris{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidepardo {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	#linkinsidegreen {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	#linkinsidegris {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	.negroin:hover > #textoinsidenegro {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafonegro{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidenegro {
		bottom: 0px;
		left: 147px;
		margin: 0 auto;
		position: absolute;
	}
	.info {
		width: 100%;
		top:0px;
	}
	.ven{
		text-align:center;
	}
	#logo{
		width:100%;
	}
}
@media screen and (max-width: 778px){
	
}
@media screen and (max-width: 667px){
	#contenedor{
		width:100%;
	}
	#linkinsideverde {	
		left: 120px;
	}
	#linkinsidelima {
		left: 120px;
	}
	#linkinsidepardo{
		left: 120px;
	}
	#linkinsidegreen {
		left: 120px;
	}
	#linkinsidegris {
		left:120px;
	}
	#linkinsidenegro {
		left:120px;
	}
	#ubica{
		width:100%;
		text-align:center;
	}
	#textoubica{
		width:100%;
		top:0px;
		margin-bottom:20px;
		text-align:center;
	}
	#txtcontact{
		width:100%;
	}
	#contacto{
		width:100%;
	}
	.imag {
		width: 50%;
		height: 270px;
	}
	.imag img{
		width:70%;
	}
	.nombre{
		margin-bottom:20px;
	}
}
@media screen and (max-width: 600px){
    .space{
        padding: 1rem;
        width: 7rem;
    }
    .img-who{
	    flex-direction: column;
    }
    .indescripcion{
        text-align: center;
    }
	#contenedor{
		width:100%;
	}
	.bla{
		left:0%;
	}
	.redes{
		width:100%;
		top:0px;
		left:0px;
		text-align:center;
		margin-top:20px;
		margin-bottom:10px;
	}
	.info{
		width:100%;
		top:0px;
		right:0px;
		margin-bottom:20px;
		text-align:center;
	}
	.mail{
		margin-left:5px;
	}
	#menu{
		background-color:#f0f0f0;
	}
	#inmenu{
		width:100%;
		margin-left:0%;
	}
	h1 {
		font-family: "unisans";
		font-size: 19pt;
	}
	.parrafoverde{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	.cuadro{
		width:100%;
	}
	#linkinsideverde {
		top: -5px;
		left: 0px;
		margin: 0 auto;
		position: relative;
	}
	.verdein:hover > #textoinsideverde {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.limain:hover > #textoinsidelima {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafolima{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidelima {
		top: -5px;
		left: 0px;
		margin: 0 auto;
		position: relative;
	}
	.grisin:hover > #textoinsidegris {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafogris{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidegris {
		top: -5px;
		left: 0px;
		margin: 0 auto;
		position: relative;
	}
	.negroin:hover > #textoinsidenegro {
		background-color: rgba(0, 0, 0, 0.43);
		color: white;
		top: 0px;
		left: 0px;
		height: 100%;
	}
	.parrafonegro{
		position:relative;
		width:90%;
		margin-left:5%;
	}
	#linkinsidenegro {
		top: -5px;
		left: 0px;
		margin: 0 auto;
		position: relative;
	}
	#greenh{
		font-size:32pt;
	}
	#inimagen{
		margin-top: 0px;
	}
	#mapa{
		height:250px;
	}
	#super{
		margin-top:0px;
	}
	#ubica{
		width:100%;
	}
	#textoubica{
		width:100%;
		display:none;
	}
	#contacto{
		width:100%;
	}
	#contacto h3{
		margin-left:20px;
	}
	#tblcontacto {
		color: white;
		width: 90%;
		margin-left: 5%;
	}
	.imag {
		width: 100%;
	}
	.imag img{
		max-width:40%;
	}
}
@media screen and (max-width: 400px){
	.imag {
		width: 100%;
		height:240px;
	}
	.imag img{
		max-width:50%;
	}
	
}