@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Rosario:700,400,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700);

*{margin:0; padding:0}
body {background-image:url(img/dark_wall.png);}

/* HEADER */

#contenedor {max-width:960px; background-color:#CCC; margin:0 auto 0 auto; position:relative;}

header {position:relative;width:100%;float:left; height:107px;z-index: 1;}

#logo{width:15%;float:left; background-color:#98CB32; position:relative; height:100%; background-image:url(img/logo.png); background-position:center; background-size:100%; background-repeat:no-repeat;}
#logo img {width:100%; position:relative;}


#headerderecha{width:85%; float:left; position:relative; height:100%;}
#catedracosgaya {background-color:#000; font-family:Rosario; font-weight:700; font-style:italic; color:white; padding:5px 0 0 4%; height:50%; float:left; display:table; width:96%;}
nav {background-color:#f2f2f2; width:100%;float:left; display:table; height:51%;}
nav ul {width: 100%}
nav li {
float: left;
list-style: none;
font-family: Rosario;
border-right: rgb(216, 216, 216) solid 1px;
width: 15%;
padding: 17px 2%;
height: 20px;
text-align: center;
font-size:14px;
cursor:pointer;
}

.iconosredes:hover {
	background-color: inherit;
	font-weight:bold;
	color:white;
}

nav ul li:hover {
	background-color:#E09317;
	font-weight:bold;
	color:white;
}

nav a {
	width:100%;
	color:inherit;
	text-decoration:none;
}

nav li img {
	margin: 10px 5%;
	width: 20%;
}

.iconosredes {
	float: right;
	margin: 0;
	padding: 0 2%;
	width: 19%;
}

nav ul li ol {
	position:absolute;
	float:left;
	width: 312px;
	left:0px;
	top: 107px;
}

nav ul li ol li {
	float:none;
	width:143px;
	background-color:#f2f2f2;
	border:none;
}

nav ul li:hover ol li {
	color:black;
	font-weight:normal;
}

nav ul li:hover ol li:hover {
	color:white;
	font-weight:bold;
}

#headermobile {
	display:none;
	background-color:#98CB32; 
	height:50px;
}
	
.headermobilelogo {
	float:left;
	width: 50%;
	height: 100%;
	background-image:url(img/logo.png);
	background-size: 75px;
	background-repeat: no-repeat;
	background-position: left;
}

.headermobilebotonnav {
	float:right;
	width:50px;
	height:50px;
	background-image:url(img/navmobile.png);
	background-size:100%;
}

/* LA CÁTEDRA */

#caminodepan{min-width:815px;float:right;min-height:20px;max-height:20px;border-style:solid;position:relative;background-color:#FFFFFF;border-width: 1px;border-color:#D8D8D8}

#caminodepan p {font-family:rosario;font-size:11px;color:#D8D8D8;margin:3px 0 3px 5px}

.bold {font-weight:bold;}
.parrafo {font-family:Rosario; font-size:14px; font-weight:normal; color:#FFF;margin-top:15px;}

section {
	width:100%;
	background-color:#FFFFFF;
	float: left;
}

.titulo {
	background-color:#FFFFFF;
	width:45%; 
	height:100%; 
	float:left;
	min-height:418px;
	position:relative;
	padding-left: 23px;
}
	 
.P {float:left;
	display:block;

	margin:20px 150px 20px 145px;

	}

.P h1 {
	font-family:"Roboto Slab";
	font-weight:bold;
	font-size:142px;
	line-height:90%;
	letter-spacing:-5px;
}

#P_	{	
	letter-spacing:-25px;
	}
	
.botonesnegros{
	float:left;
	margin:30px 0 0 0;
	width:100px}

.botonesnegros h4 {
	background-color: #000000;
	font-family: Roboto Slab;
	padding: 5px 2px 5px 2px;
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
	margin: 2px 0 0 0;
	text-align: center;
	margin-top: 5px;
	cursor:pointer;
}

.botonesnegros h4:hover {
	background-color: #E09317;
}

.contenido{
	float:left;
	width: calc(55% - 23px);
	background-color:#FFFFFF;
	position:relative;
	display:block;
	height:100%;
	margin:0%;
	}
	
.columnaizquierda {
	width:60%;
	float:left;
	position:relative;
	margin:30px 5px 0px 0;
}

.tituloconrecuadro{
	min-height:100px;
	border-style: solid;
    border-color:#000000;
	padding:10px 0 0 10px;
	}

.columnaizquierda h1{
	font-family:"Roboto Slab";
	font-size:28px;
	font-weight:bold;
	line-height:90%;}

.columnaizquierda p{
	margin:10px 0 0 0;
	font-family:"Roboto Slab";
	font-size:12px; 
	
	line-height:14px;
	word-spacing:0px;
	}
	
.botonestrabajos {
	margin:0 0 0 0;
	float:left;
	width:20%;
}

.botonestrabajos img {
	margin-bottom:5px;
	cursor:pointer;
}

.separador{float:left;position:absolute;margin:102px 0 0 0}
.columnaderecha{
	float:left;
	position:relative;
	width:37%;
	min-height:388px;
	margin:30px 0 0 10px;
	}
	

.botoneratipografica {
	
	position:relative;
	margin:130px 0 0 0
	}

.botoneratipografica ul{
	list-style: none;
	font-family:rosario; 
	font-size:9px; 
	}

.botoneratipografica ul li{margin:10px 0 0 0;}

.botonesimagenes

.imagenes {
	width:100%;
}

.imagenes img {
	width: calc(30% + 32px);
	float:left;
	background-color:#000000;
}

footer {background-color:#98CB32; position:relative; width:96%; float:left; margin:0; padding:15px 2% 6px 2%;}
.footeruno {width:33%;float:left;}
.footerdos {width:33%; float:left;text-align: center;margin-top: -5px;}
footer h1 {font-family:Rosario; font-size:12px; color:black; font-style:italic;}
footer a {font-family:Roboto Slab; font-size:15px; font-weight:bold; text-decoration:none; color:black;}
footer .faduuba {float:right; width:33%;margin-top: -5px;}
footer .faduuba img {float:right;}
footer .faduuba h2 {float:right; font-family:Rosario; font-size:12px; font-weight:bold; margin:5px 10px 0 0px;}

/* LA CATEDRA */
#contenedorcosgaya
	{width:100%;
	background-color:#FFFFFF;
	min-height:450px;
	display:block;}

#imagenytitulo{
	float:left;
	width:48%;
	background-image:url(img/una_gran_familia.jpg);
	min-height:300px;margin:0px 0 0 0;
	}
	
#unagranfamilia {min-height:100px;
	border-style: solid;
    border-color:#000000;
	padding:10px 0 0 10px;
	width:50%;
	float:left;
	margin:30px 0 0 10px
	}
	
#unagranfamilia h1{
	font-family:"Roboto Slab";
	font-size:28px;
	font-weight:bold;
	line-height:90%;
	}

#lacatedra{
	margin:21px 0 0 0;
	width:50%;
	float:left;
	position:relative;
	}

#lacatedra p  {
	margin:20px 15px 0 10px;
	font-family:"Roboto Slab";
	font-size:12px; 
	line-height:14px;
	word-spacing:0px;
	}

#lacatedra h4 {
	background-color:#000000;
	font-family:Roboto Slab;;
	padding:0 0 0 10px ;
	color: #FFF;
	font-size: 14px;
	font-weight: normal;
	margin:10px 10px 0 10px 
	}


#objetivos{
	width:100%;
	min-height:400px; 
	position:relative; 
	float:left
	;background-color:#FFFFFF;	padding:30px 0 0 0px;
	}

/*  OBJETIVOS */

#obetivosdos {
	min-height:100px;
	border-style: solid;
    border-color:#000000;
	padding:10px 0 0 10px;
	width:298px;
	float:left;
	margin:30px 0 0  -15px;
	position:relative;background:none;
	}
	
#obetivosdos h1	{
	font-family:"Roboto Slab";
	font-weight:bold;
	font-size:28px;
	line-height:90%;background-color:#FFFFFF;
	width:150px;
	
}



.botonesnegrosdos{width:130px;
	float:left;
	position:relative;
	margin:27px 10px 0 20px;
	cursor: pointer;
	}
	
.botonesnegrosdos h4{
	background-color:#000000;
	font-family:Roboto Slab;
	padding:2px 0 0 0 ;
	color: #FFF;
	font-size: 11px;
	font-weight:500;
	margin:5px 20px 0 0 
	;text-align:left;
	padding:5px 15px 5px 5px;line-height:95%;cursor: pointer;
	}

.botonesnegrosdos h4:hover {
	background-color:#E09317;
}

.botonesnegrosdos a{	
	text-decoration:none;font-family:Roboto Slab;
	}
.lerolero{background-color:#000000;color:#FFFFFF;}



#columnas{
	width:100%;
	min-height:400px; 
	position:relative; 
	float:left
	;background-color:#FFFFFF;
	margin: 20px 0 0 0 ;	
	}

.columnauno {
	width:124px;
	min-height:622px;
	float:left;
	margin:0 10px 20px 23px;
	
	
	position:relative;
	}

#a{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:0 0 90px 0;
	}

#e{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:20px 0px 70px 100px;
	}
	
#g{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:30px 0 80px 0;
	}
	
	
#j{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:20px 0 50px 0;
	}
	
#h{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:15px 0 85px 0;
	}	

	
#pandetextouno{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0 0 90px 0;
	}
	
	
#pandetextodos{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:104px 0 63px 0;
	}
	
#pandetextotres{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:33px 0 70px 0;
	}
	
#pandetextocuatro{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:140px 0 50px 0;
	}
#pandetextocinco{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 60px 0;
	}
#pandetextoseis{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 215px 0;
	}
#pandetextosiete{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 175px 0;
	}
	
#pandetextoocho{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 50px 0;
	}		
#pandetextonueve{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:130px 0 73px 0;
	}		
	
#pandetextodiez{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 205px 0;
	}		

#pandetextoonce{
	float:left;
	font-family:"Roboto Slab";
	font-size:10px;
	margin:0px 0 50px 0;
	}		
#b{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:0px 0 90px 100px;
	}
#k {float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:20px 0 70px 0px;
	}
#d {float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:20px 0 70px 100px;
	}
#f{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:20px 0 95px 0px;
	}
#i {float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:10px 0 70px 0px;
	}
#objetivouno img{width:100%;	}
#objetivodos img{width:100%;	}
#objetivotres img{width:100%;	}
#objetivocuatro img{width:100%;	}
#objetivocinco img{width:100%;	}
#objetivoseis img{width:100%;	}
#c{float:right;
font-family:"Roboto Slab";
	font-size:40px;
	font-weight:bold;
	line-height:90%;
	margin:0px 0 100px 0;
	}	
.columna{width:200px;float:left;;position:relative;margin:0 20px 0 85px;min-height:550px}

.columna img{width:100%}

.columna h2{
	font-family:Roboto Slab;
	padding:12px 0 8px 0 ;
	
	font-size: 20px;
	font-weight:bold;
	margin:2px 0 0 0;
	line-height:90%;
	}
#bonoteracatedra
{font-family:Roboto Slab;
	padding:0px 0 0px 0 ;
	
	font-size: 20px;
	font-weight:bold;
	margin:-10px 0 0 0px;
	width:100%;
	background-color:#000000;float:left;text-decoration:none;
	}
#bonoteracatedra h4 {background-color:#000000;color:#FFFFFF;padding:10px 10px 10px 10px;text-decoration:none;cursor: pointer;width:auto;text-decoration:none;float:left;margin:0 106px 0 66px;}

#bonoteracatedra h4:hover {
	background-color:#E09317;
}


.paquetes{width:100%;margin:34px 0 34px 0;}
.paquetes h5{font-family:Roboto Slab;font-size: 12px;
	font-weight:bold;}
.paquetes p {font-family:Roboto Slab;font-size: 10px;line-height:12px;margin:5px 0 0 0}


/* TIPO */

#odiohtml{
	background-color:#FFFFFF;
	width:100%;
	float:left;
}

.cosgayaclase {
	background-image: url(img/cosgayita.jpg);
	width: 290px;
	height: 118px;
	position: absolute;
	top: 164px;
	left: 555px;
	z-index: 1;
}
	
#romero {
	width:813px;
	min-height:400px;
	background-color:#FFFFFF;
	float:left;
	position:relative;
	margin:10px 0 0 145px;
	padding-bottom: 30px;
}

.chiquito {
	width:180px;
	min-height:400px;
	background-color:#FFFFFF;
	float:left;
	position:relative;
	margin:10px 10px 10px 10px;
}

.banegam {
	margin:10px 10px 0 0px
}

.banega h6 {
	font-family:Roboto Slab;
	padding:12px 0 8px 0 ;
	font-size: 12px;
	font-weight:bold;
	margin:0px 0 0 0;
	line-height:90%;
}

.banega p {
	font-family:Roboto Slab;
	padding:12px 0 8px 0 ;
	font-size: 16px;
	font-weight:300;
	margin:0px 0 0 0;
	line-height:95%;cursor:pointer;
}

.banega p:hover {
	color:#E09317
}

#messi {
	width:360px;
	min-height:400px;
	float:left;
	position:relative;
	margin:30px 10px 10px 10px;
}


#messi h6{font-family:Roboto Slab;
	padding:12px 0 8px 0 ;
	
	font-size: 12px;
	font-weight:bold;
	margin:2px 0 0 0;
	line-height:95%;
	}

#messi p{font-family:Roboto Slab;
	padding:12px 0 8px 0 ;
	
	font-size: 12px;
	font-weight:normal;
	margin:2px 0 0 0;
	line-height:120%;
	width:294px;}
	
/* MIGA DE PAN (OBER) */

#migadepan {
	width:98%;
	background-color:#FFF;
	height:12px;
	float:left;
	padding:10px 9px 5px 10px;
}

#migadepan p {
	float:left;
	font-family:Rosario;
	font-size:10px;
	color:#4D4D4D;
	margin: 1px 0 0 10px;
}

#migadepan a {
	text-decoration:none;
	color:black;
}

#migadepan a:hover {
	text-decoration:underline;
	color:black;
}

.cuadradonegro {
	width:2px;
	height:8px;
	background-color:#000;
	float:left;
	margin: 4px 0 0 3px;
}

/* RESPONSIVE */

@media screen and (max-width:850px) {
	
/* HEADER */
nav li {
width: 14%;
}
.iconosredes {
float: right;
margin: 0;
padding: 0 0 0 0;
width: 18%;
}
nav li img { margin:13px 2%; width:25%;}


@media screen and (max-width:660px) {

/* HEADER */
#headermobile {
	display:block;
}

header {
	display:none;
}
	
/* FOOTER */
.footerdos {margin-top:5px; width:100%; text-align:center;}
.footeruno {width:100%; text-align:center;}
footer .faduuba {display:none;}