/* CSS Document */
/*@import url('reset.css');*/
@import url('fuentes.css');


@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:border-box;
}
body {
		Background="fondorojo2.jpg">
		padding-top:80px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}
.logos {
	float:left;
	width:300px;
	padding:10px 0px;
}

.menu_bar {
	display:none;
}

header {
	width:100%;
	float:left;
}

header nav {
	background:#896393;
	z-index:1000;
	max-width:1000px;
	width:95%;
	margin:20px auto;
}

header nav ul {
	list-style:none;
}

header nav ul li {
	display:inline-block;
	position:relative;
}

header nav ul li a {
	color:#fff;
}
header nav ul li:hover{
	background:#c09fdb;
}


header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding:20px;
	
}

header nav ul li a span {
	margin:right:10px;
}

header nav ul li:hover .children {
	display:block
	
}

header nav ul li .children{
	display:none;
	background:#896393;
	position:absolute;
	width:150%;
	z-index:1000;
}

header nav ul li .children li{
	display:block;
	overflow:hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}

header nav ul li .children li a{
	display:block;
}

header nav ul li .children li a span{
	float:right;
	position:relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
header nav ul li .caret {
	position:relative;
	top: 3px;
	margin-left:10px;
	margin-right:0px;
}


/*Estilos Base*/
.contenedor-img {
width: 250px;
height: 150px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
/*background: #fff;*/
}

.contenedor-img .mascara,.contenedor-img .contenido {
width: 100px;
height: 50px;
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: 10px;
background: rgba(0, 0, 0, .9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 12px;
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 #896393
}

/*Ejemplo 1*/
.ejemplo-1 img {
transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
opacity: 0;
background-color: rgba(137,99,147, 1);
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);
}

.boton1 {
    overflow:hidden;
    width:350px;
}
.wrapper1 div {
    /* cualquier altura mayor que el total de sumar la anchura de las img */
    width:800px;

    /* para evitar el margen superior de la primera fila */
    margin-top:-10px;
}
img1 {
    width:250px;
    height:150px;
    float:left;
    margin:50px 100px 0 0;
}



/*Estilos Base*/
.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
/*background: #fff;*/
}

.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
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: 10px;
background: #c09fdb;
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 12px;
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(137,99,147, 0.7);
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);
}

#wrap1{
	width:960px;
	margin:auto;
	clear:both;
}
/*--- formatea el bienvenidos---*/
 #bienvenidos{
	 font-family:CenturyGothic.ttf;
	 width:960px;
	 float:left;
	 padding:20px;
	 margin:20px 0px;
	text-align: justify;
 }
#bienvenidos article h2{
	font-family:CenturyGothic.ttf;
	font-size:20px;
	margin:bottom;
}
#bienvenidos article h3{
	font-family:CenturyGothic.ttf;
	font-size:15px;
	margin:bottom;
}
#bienvenidos article{
	line-height:25px;
}

/*---formatea el contenido---*/
#contenido{
	width:960px;
	float:left;
}
#contenido article{
	float:left;
	margin-bottom:20px;
}

/*---footer---*/
footer{
	width:100%;
	float:left;
	clear:both;
	box-shadow: 0 2 2 #FF817D;
	border-radius:5px;
}

footer section {
	width:480px;
	float:left;
	padding:20px;
}
footer #acreca-de{
	font-family:CenturyGothic.ttf;
	font-size:24px;
	line-height:20;
}
footer #acerca-de h4{
	fon-family:GOTHICI.ttf;
	font-size:12;
	margin-bottom:5px;
}


 footer #redes-s >div{
	 width:300px;
	 height:60px
	 float:left;
	 background:#ff8000;;
	 opacity:0.7;
	  }
	  
	  	  
	  #copyright {
	float:left;
	width:960;
	margin 10 px 0px;
}
#copyright p{
	text-align:center;
	font-family:CenturyGothic.ttf;
	font-size:18px;
}

#mibloque{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
        /*Espacio entre columnas*/
    column-gap: 2em;
    -webkit-column-gap: 2em;
    -moz-column-gap: 2em;
    -o-column-gap: 2em;
    /*Agrega una barra solida de color*/
    column-rule: 2px solid #666;
    -webkit-column-rule: 2px solid #666;
    -moz-column-rule: 2px solid #666;
    -o-column-rule: 2px solid #666;
}

aside {
	width:220px;
	float:left;
	margin-left:20px;
	background:#FC98A2;
	padding:10 10 0 10;
	border-radius:5px;
}
	  
@media screen and (max-width:950px ) {
	
	.menu_bar{
		display:block;
		width:100%;
		position:fixed;
		top:0;
		background:#E6344A;
	}
	.menu_bar .bt-menu{
		display:block;
		padding:20px;
		color:#fff;
		overflow:hidden;
		font-size:25px;
		font-weight:bold;
		text-decoration:none;
		
	}
	.menu_bar span{
		float:right;
		font-size:40px;
	}
	header nav {
		width:80%
		height:clac(100% - 80px);
		position:fixed;
		rigth:100%;
		margin:0;
		overflow:scroll;
	}
	header nav ul li{
		display:block;
		border-bottom:1px solid rgba(255,255,255,.5);
	}
	
	header nav ul li a{
		display:block;
	}
	header nav ul li:hover .children{
		display:none;
	}
	header nav ul li .children{
		width:100%;
		position:relative;
			}
	
	header nav ul li .children lia a{
		margin-left:20px;
	}
	header nav ul li .caret{
	float:right;
	
	}
	
	
	
}
#wrap1 #main1 div div .style12 {
	color: #FFF;
}