*{

padding:0px;
margin:0px;

 }


 body{
 	background: #000;
 	font-family: 'Barlow', sans-serif;
 	font-size: 1.2em;
 	color:#6a6767;
 }
@keyframes rotate {from {transform: rotate(0deg);}
    to {transform: rotate(200deg);}}
@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(200deg);}}
  
#logo3{
    -webkit-animation: 10s rotate linear infinite;
    animation: 10s rotate linear infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
 h1{
 	text-align: center;
 	color:purple;
 }
 h2{
 	text-align: center;
 	color:#6a6767;
 }
 h3{
 	text-align: center;
 	color:#6a6767;
 }
  a{
 	color:#6a6767;
 }


 /*Contenedor del contenido*/
 #contenedor{
 	width:100%;
 	margin:auto;
 	background:#fff;

 }

 header{
 	width: 100%;
 	background: #000;
 	
 	 }

 /*Menu*/
 nav{
background:black;
width: 100%;
heigth:auto;
float:right;

 }
 nav ul {

		margin: 0;
		padding: 0;
		list-style: none;
		padding-right: 20px;
	}
	
nav ul li {
			display: inline-block;
			line-height: 80px;
		}
			
nav ul li a {
				display: block;
				padding: 0 20px;
				text-decoration: none;
				font-family: 'Barlow Condensed', sans-serif;
				font-size: 1.1em;
				color:white;
			}
			
nav ul li a:hover {
					background: #434343;
                    height:auto;
                                                     
				}
#logotipo {
margin: 0px 0;
width:100%;
}
#logotipo ul {
padding:0;
margin:10;
list-style-type:none;
}
#logotipo ul li {
float: left;
margin:-5px 0px 0px 50px;
display: inline;
}

/*Todo el contenido*/
#contenido{
 width:85%;
 background: #fff;
 margin:auto;
}

.ContenedorConsejo{
display: block;
position: relative;
width: 70%;
height: 40%;
left:10%;
background: pink;
}

/*Estilos Base de imagenes perfil*/
.contenedor-img {
width: 200px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
margin: 30px 0px 0px 100px;
border:3px #ad2877 outset;

}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 200px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;


}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 5px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 18px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000;
}
/*Ejemplo 1*/
.ejemplo-1 img {
transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
opacity: 0;
/*background-color: rgba(173,40,119, 0.7);/*rosa*/
background-color: rgba(112,107,110, 0.7);/*gris */
transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.ejemplo-1 p {
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.ejemplo-1 a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.ejemplo-1:hover img {
transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 1;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover p {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}


/***********popup1**************/
.overlay {
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
 z-index:5; 

}
.overlay:target {
    visibility: visible;
    opacity: 1;
overflow:scroll;
}
#popupBody{
    width: 60%;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #FFF;
    position: relative;
    transition: all 5s ease-in-out;
    margin: 20% auto; 

  
 
}

#cerrar{
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #F00;
}
#url{
color:purple; 
text decoration: none;

}
#vision{
 width: 40%;
margin:auto;
 padding: 5%;
 background: #fff;
 float:right;
 text-align:center;
 font-size: 1.2em;
 word-wrap:break-word;


}
#mision{
 width: 40%;
 padding: 5%;
margin:auto;
 background: #fff;
 float:left;
 text-align:center;
 font-size: 1.2em;
 word-wrap:break-word;

}

footer{
    background: black;
clear:both;

}