/*  MAKE LAYOUT RESPONSIVE at 480px FOR IPHONE LANDSCAPE ============================================ */


	
		header section, #banner, #logo, #nota_portada, #conte_mapa, #titulo_mapa, #contenedor_respuesta, 
		#contenedor_lista_grupo, #contenedor_lista, #contenedor_lista_archivos, #contenedor_lista_imagenes, #wd_notas_horizontal
		{
			width: 90%; 
			margin: 0 auto;
			padding: 10px;
		}
		nav section, #parche, #creditos
		{
			display: none;
		}
		p
		{
			font-size: 16px;
		}
		h1 
		{ 
			font-size: 24px;
		}
		h2 
		{ 
			font-size: 21px;
		}
		h3
		{
			font-size: 18px;
 		}
#logo {
    background-position: center center;
    background-size: auto 40%;
    float: none;
    margin-top: 30px;
}
		#banner
		{
			background: transparent;
			height: 130px;
		}
		#menu_responsive
		{
			display: inherit;
			z-index: 100;
			position: absolute;
			width: 100%;
			margin: 0;
		}
		#wd_notas_horizontal, #wd_notas_horizontal_4
		{
			width: 90%;
		}
		#contenedor_lista_grupo ul, #contenedor_lista ul, #contenedor_lista_archivos ul, #contenedor_lista_imagenes ul
		{
			padding: 0;
		}
		#contenedor_lista_archivos li
		{
			height: 180px;
		}
		.contenido
		{
			margin: 0;
		}
		#nota_portada 
		{
    		overflow: hidden;
    		padding: 15px 0;
    		width: 90%;
    		border-radius: 5px;
    		margin-bottom: 10px;
    		text-align: center;
		}
		#nota_portada img {
		    margin: 15px auto;
		    max-width: 94%;
		}
		#carrusel_portada
		{
			width: 90%; 
			margin: 10px auto;
		}
		#carrusel_portada h1 
		{
    		border-radius: 5px 5px 0 0;
    		height: 41px;
    		margin: 0 auto;
    		padding: 15px 0 5px;
    		width: 100%;
		}
		#mapa h1
		{
			background-image: none;
			border-radius:5px 5px 0px 0px;
			padding-left: 0;
			text-align: center;
			font-size: 24px;
		}
		#fono
		{
			display: none;
		}
		#redes
		{
			overflow: hidden;
			margin: 0 auto;
			width: 240px;
			float: none;
		}
		#pie 
		{
			padding: 0;
		}
		.face, .twi
		{
			font-size: 12px;
		}
		#ubicacion_direccion, #ubicacion_fono
		{
			float: none;
			text-align: center;
		}
		footer
		{
			overflow:hidden;
			background-position:bottom center;
		}
		footer section
		{
			 height: auto;
			 min-height: 220px;
			 overflow: hidden;
		}
		footer h4
		{
			text-align: center;
			margin:10px 0 0;
		}
		footer h3
		{
			text-align: center;
			margin:10px 0 0;
		}
		footer p
		{
			margin:0;
			text-align: center;
			font-size: 12px;
		}
		#redes, #ubicacion
		{
			border: 0px solid#fff;
			width: 95%;
			margin: 10px auto;
			float: none;
		}
		.redes_sociales {
		    background-repeat: no-repeat;
		    float: none;
		    margin: 10px auto;
		    display: block;
		}
		#ubicacion_direccion, #ubicacion_fono {
		    font-size: 14px;
		    font-weight: 300;
		    margin: 0 auto;
		    width: 90%;
		    text-align: center;
		}
		#contenedor_lista li
		{
			margin: 4%;
		}
		.text, .textarea
		{
    		width: 60%;
		}

		/*#maincontent{
			width: 93.75%; /* 450px / 480px 
		}
		
	
		.maincontent{
			width: 93.75%; /* 450px / 480px 
		}
		
		
		footer {
			width: 93.75%; /* 450px / 480px 
		}*/
		
		

/*  GRID OF EIGHT TURNS INTO A GRID OF FOUR */
.span_1_of_4 
{
    width: 100%;
}
.span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}

.span_7_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_6_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_5_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_4_of_8 {
	width: 100%;
	margin-left: 0;
}

.span_3_of_8 {
	width: 74.2%;
	margin: 1% 0 1% 3.2%;
}

.span_2_of_8 {
	width: 48.4%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8 {
	width: 22.6%;
	margin: 1% 0 1% 3.2%; 
}

.span_1_of_8:nth-child(4n+1) { 
	clear: both;
	margin-left: 0;
}
		
/*  Except in the Example */

#example .maincontent .span_8_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_7_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_6_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_5_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_4_of_8 {
	width: 100%; 
	margin-left: 0;
}
#example .maincontent .span_3_of_8 {
	width: 100%;
	margin-left: 0; 
}
#example .maincontent .span_2_of_8 {
	width: 100%%; 
	margin-left: 0;
}
#example .maincontent .span_1_of_8 {
	width: 100%; 
	margin-left: 0;
}


#carrusel_portada h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    height: 45px;
    margin: 5px auto 0;
    padding: 5px;
    text-transform: uppercase;
    width: 220px;
}


#contenedor_galeria {
    background-color: #f2f2f2;
    background-image: url("../images/carrrusel_bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    margin: 0;
    padding: 1px 0 10px;
}


#contenedor_portada {
    background-color: #000;
    background-image: none;
    margin: 0;
    padding: 20px 0 10px;
}