@charset "UTF-8";

/* RESET CSSS  Reajuste para exploradores antiguos */

/*  Esta parte del CSS sirve únicamente para definir ciertos estilos y etiquetas básicos 
    de forma que aquellos exploradores que no soportan HTML5 tengan algo a lo que agarrarse en las curvas.
    Se podría combinar con "general.css", pero yo prefiero tenerlos por separado */
    
/*  Obtenido de http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    Licencia: ninguna (dominio público) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 1;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* Etiquetas de HTML5 para exploradores antiguos */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Final del reajuste para exploradores antiguos */

/* Estilos generales: Defino las características generales: body, links, párrafos, imágenes, listas, etc */

/*{
   box-sizing: border-box;
} */

body { 
    margin: 0;
    font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 
    font-size: 1em;
    color:#031012;
    background-color:#A79777; /*#dedede;*/
    background-size: cover; /*contain; */
}


/* img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

img {
  aspect-ratio: attr(width) / attr(height);
}



img{
 max-width: 100%;
opacity: 1;
transition: 0.5s opacity;
}

img:hover{
opacity: 0.5;
}

*/

a:link,
a:visited {
	color:#000011; /*#27c1d9;*/
	text-decoration:none;
}
a:active {
	color:#000000; /*#27c1d9;*/
	text-decoration:none;
	img{
	opacity: 1;
        transition: 0.5s opacity;
	}
}
a:hover {
	color:#FFFFFF; /*#1b8899;*/
	text-decoration: underline;
	img{
	opacity: 0.5;
	}
}

h1 {
    font-family:'Titulares', serif; 
    margin:15px 0;
}
p {
    margin:10px;
    font-size:0.9em;
    line-height:1.4em;
}

/* Fuentes: Cargo las tipografías no habituales para que todos los usuarios vean la web como está previsto */
@font-face {
    font-family: 'Titulares'; /* Este será el nombre que habrá que utilizar cuando definamos la fuente en los otros CSS */
    src: url('fuentes/Chunkfive.otf'); /* la ruta relativa de dónde se encuentra la fuente en cuestión */ 
    font-weight: normal; /* peso: negrita, normal */
    font-style: normal; /* estilo: itálica, oblicua, normal */
}
	
/* Defino el Contenedor */
#warp	{ 
    width:900px; 
    margin:0 auto; 
    background-color:#f5f5f5;
    box-shadow:0px 0px 3px 3px #ccc;
} 

/* Header, Cabecera */
/* Creo los siguientes elementos específicos para diferenciar el header general del de los artículos */
header#top { 
    padding:20px 20px; 
    background-color:#27c1d9; 
}
header#top h1 { 
    font-size: 4em; 
}
header#top h2 { 
    text-align:right; 
    color:#031012; 
}
/* Aquí, las cabeceras de los artículos */
header#article { 
    margin:5px; 
    padding:10px; 
    border-radius:25px 0px; 
    background-color:#d9e87a; 
    font:1.1em Georgia, "Times New Roman", Times, serif; 
}
header#article h1 { 
    font-size: 2em; 
    text-align: left; 
    line-height: 0.9em;
}

/* Navegación */
nav	{ 
    padding:0 20px; 
    background-color:#f5f5f5;
    text-align:center;
}
nav a { 
    padding:0 25px 0 0; 
    line-height:3em;
    text-decoration:none;
}
	
/* Secciones */
section	{ 
    width:660px; 
    float:left !important; 
    padding:0 20px; 
    text-align:justify; 
}

/* Nuevamente, creo elementos específicos para que las secciones se distingan a simple vista, aunque no es necesario para la estructura */
section#uno	{ 
    background-color:#fafafa; 
}
section#dos	{ 
    background-color:#f2f2f2; 
}
	
/* Artículos */
article	{ 
    margin:0 0 15px; 
    padding:1px 0 0; 
    border-radius:25px 0px; 
    background-color:#FFF; 
}

/* Defino el siguiente elemento para conseguir que los artículos con esta id se alineen uno al lado del otro */
article#hz	{ width:49%; float:left; }

/*  Establezco el margen necesario para separar los artículos con la id="hz"
    Esta clase se debe aplicar a partir del 2º artículo <article class="space" id="hz"> */
article.space	{ margin-left:2%; }
	
/* Apartado */
aside { 
    width:160px; 
    float:right !important; 
    padding:10px 20px; 
    background-color:#ebe78b; 
}
	
/* Footer, Pie */
/* Finalmente, los elementos específicos para diferenciar los footers */		
footer#ft	{ 
    clear:both !important; 
    padding:5px 0px; 
    background-color:#27c1d9; 
    font-size:0.7em; 
    text-align:center; 
}
footer#article { 
    margin:10px 10px 0; 
    padding:0 10px 5px; 
    border-top:dotted 1px #CCC; 
    font-style:italic; 
    text-align:right;
}

/*  Cambios pertinentes para móviles con pantallas menores de 420px
    para sobrescribir algunos estilos de pantalla grande */
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

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

    /* Redefino el Contenedor */
    #warp	{ 
        width:320px; 
    }

    /* Ajusto los titulares de la cabecera */
    header#top h1 { 
        font-size:3.3em; 
    }
    header#top h2 { 
        font-size:0.9em; 
        text-align:left;
    }

    /* Cambio la disposición de los enlaces del menú para que queden mejor ordenados visualmente */
    nav	{ 
        margin-bottom:8px;
    }
    nav a { 
        display:block;
        border-bottom:1px dashed #27c1d9;
    }

    /* Redefino el tamaño de las Secciones */
    section	{ 
        width:280px; 
    }

    /* Redefino el ancho de estos artículos para forzar que se coloquen uno debajo de otro */
    article#hz	{ 
        width:100%; 
    }

    /*  Elimino el margen que antes era necesario para separar los artículos con la id="hz" */
    article.space	{ margin-left:0; }


    /* Redefino el tamaño del Apartado */
    aside { 
        width:300px; 
        padding:10px;
    }
}

/*  Cambios pertinentes para tablets con pantallas menores de 900px
    para sobrescribir algunos estilos de pantalla grande */

@media screen and (min-width:421px) and (max-width:900px) {

    /* Redefino el contenedor */
    #warp	{ 
        width:600px; 
    }

    /* Cambio la disposición de los enlaces del menú para que queden mejor ordenados visualmente */
    nav	{ 
        margin-bottom:8px;
    }
    nav a { 
        display:block;
        border-bottom:1px dashed #27c1d9;
    }

    /* Redefino el tamaño de las Secciones */
    section	{ 
        width:560px; 
    }

    /* Redefino el tamaño del Apartado */
    aside { 
        width:580px; 
        padding:10px;
    } 
}

/*  ATENCIÓN al orden: 
    Las hojas de estilo en cascada conceden mayor importancia siempre al último estilo llamado, 
    es decir, los de abajo priman sobre los de arriba siempre que no se especifiquen excepciones 
    como en el caso del tamaño de pantalla de tablets y móviles. */

#miobra{
max-width: 660px;
align:center;
max-height: 30px;
overflow: hidden;
transition: 2.5s max-height;
}
#miobra:hover{
 max-height: 400px;
}