*{box-sizing: border-box;}
body{font-family: sans-serif; font-size: 1rem; background-image: linear-gradient(45deg,#CEE007,#339E35);
background: -webkit-linear-gradient(45deg,#CEE007,#339E35);
background: -moz-linear-gradient(45deg,#CEE007,#339E35);
background: -o-linear-gradient(45deg,#CEE007,#339E35);
background-attachment: fixed;}

html,body{box-sizing: border-box;}
h1{font-size: 2rem;}
h2{font-size: 1.5rem;}
h3{font-size: 1.2rem; color:darkgray; padding-top: 1rem;}
h3 a{text-decoration: none;}
h4{font-size: 1.2rem; color: #666666; text-align: center; padding:1rem 0;}
a{text-decoration: none; color: #666; font-weight: bolder;}
h2 a{color: #666;}
h5{font-size: 3rem;}

.titulo-secciones{text-decoration: none;}

p{line-height: 2rem; font-size: 1rem;}
span{text-decoration: underline;}
.titulo{text-align: center;}
strong{font-weight: 700;}


header{width: 90%; background-color: white; overflow: hidden; position: relative; padding: 1rem 0;}
header img{padding: 1rem;}
header{display: flex; align-items: center;}
header h1{position: absolute; right: 50px; color: #666; font-size: 2.2rem; }

header h1{font-weight: 600; color: #279989; font-style: italic;}

section{width: 90%; background-color: white; margin-top: 2rem; overflow: hidden; color: dimgray; padding: 1.5rem; box-sizing: border-box; line-height: 1.5rem;}

header,section,footer{margin: 1rem auto;}

#navegacion{width: 100%; overflow: hidden;}
#sig,#ant{width: 50%; box-sizing: border-box; padding: .5rem 0; font-weight: bolder;}
#sig a,#ant a{color: gray;}
#sig{float: right;}
#sig p{text-align: right;}
#ant{float: left;}
#ant p{text-align: left;}

#reciente{width: 100%; margin: 0 auto; overflow: hidden;}

#intro{line-height: 2rem;}
#mas{background-color: gray; padding: .5rem; color:white; font-weight: 600; border-radius: 6px; float: right;}

#imagen-reciente{width: 50%; float: left; box-sizing: border-box; padding: 1rem;}
#texto-reciente{width: 50%; float: right; padding: 1rem; box-sizing: border-box;}

#imagen-color,#imagen-pulso,#imagen-raiz,#imagen-gea{width: 65%; margin: 0 auto; }

.imagen-sola{width: 65%; margin: 0 auto; text-align: center;}
.imagen-80{width: 80%; margin: 0 auto;}
.imagen-80-marco{width: 80%; margin: 1rem auto; border: 5px solid #604D8D; padding: 2rem;}
#imagen-izq{width:30%; float:left; margin-right: 2rem;}
.textos{width: 30%; float: left; box-sizing: border-box; padding: 1rem;}
.texto-lateral{width: 60%; float: right; padding: 2rem 1rem; box-sizing: border-box;}

.tabla-datos{clear: both; width: 90%; margin: 0 auto; }
table{width: 100%; margin: 1rem 0;}
table caption{font-weight: bolder;}
table thead tr th{width: 20%; border: 1px solid gray; font-weight: bold;}
table tbody tr td{width: 20%; border: 1px solid gray; text-align: center;}


#grupo-fotos-libro,#grupo-fotos-revista{width:100%; overflow: hidden; border: 2px solid #dfdbdb; padding: .5rem;}
.listado-fotos{width:20%; float: left; padding: .5rem; box-sizing: border-box;}
.listado-fotos p{font-size: .6rem; line-height: .7rem;}

.dos-fotos{text-align: center; overflow: hidden; width: 50%; float: left; box-sizing: border-box;}
.dos-videos{text-align: center; overflow: hidden; width: 50%; float: left; box-sizing: border-box; padding: 1rem;}
.dos-fotos-texto{text-align: left; overflow: hidden; width: 50%; float: left; box-sizing: border-box;}
#dos-fotos{width: 50%; float: left; padding: 1rem; box-sizing: border-box;}
.dos-fotos img{width:100%; text-align: center; padding: .5rem; box-sizing: border-box;  }

.quarto{width: 25%; float: left; padding: .5rem;}
.bloque-de-cuatro{width: 100%; border: 2px solid #DFAA28; padding: 1rem; overflow: hidden;}

.imagen-peque{width:25%;}
.imagen-gif{width:35%; margin: 0 auto;}

.pie-foto{text-align: center; margin-top: 0;}

#referencias{width: 50%; text-align: left;}
#referencias p{font-size: .8rem;}
hr{color: #dfdbdb; clear:both;}
.frase-van{width: 100%; background-color: black; color: white; padding: 2rem 0; text-align: center; display: inline-block; border-radius: 8px; margin: 2rem 0;}
.frase-van p{font-style: italic; font-size: 1.5rem; font-weight: bolder;}
.frase-van .autor{font-size: 1rem; font-weight: lighter;}

.frase-okuda{width: 100%; background-color: #78c81a; padding: 2rem 0; text-align: center; color: purple;}
.frase-dali{width: 100%; background-color: brown; padding: 2rem 0; text-align: center; color: white;}

footer{width: 90%; background-color: white; overflow: hidden;}

nav ul li{list-style: none; float: left; box-sizing: border-box; width: 25%; text-align: center; border-right: 2px solid lightgrey; color: gray; padding: .5rem 0;}

nav ul li a{text-decoration: none; color: cadetblue;}

#ficha{border:3px solid gray; border-style-position:inside; width: 25%; margin: 0 auto;}

.imagen-vertical{width:35%; float: left;}
.foto-vertical{width: 40%; float: left; padding: 1rem; box-sizing: border-box;}

.tercio{width: 33%; float: left; padding: 1rem; box-sizing: border-box;}
.espacio-vertical{width: 50%; float: left; padding: 3rem; box-sizing: border-box;}
.imagen-horizontal{width:50%; float: right;}
.bloque p{clear: both; margin: 2rem 0;}
#referencia{width: 100%; overflow: hidden;}
.ref{width: 50%; float: left; box-sizing: border-box;}
.ref img{width: 20%; float: left; padding: .5rem;}
p a{text-decoration: none; color:#279989; font-weight: bold;}

#video{width:65%; margin: 1rem auto;}
.vertical{width: 50%; padding: 2rem 4rem; float: left; box-sizing: border-box;}
#pista-audio{border:2px solid gray; text-align: center; padding: 1rem; margin: 1rem 0;}

#texto-ref{clear:both;}
.liga{clear: both; text-align: center; padding: 1rem 0;}
.liga a{ text-decoration: none; color: darkgreen; font-weight: bold; display: block; background-color: gainsboro;}


.texto-lateral .imagen-sola img{padding: 1rem;}
#el-banner{width: 100%; }

.imagen-sola figure img{border:2px solid darkgray; padding: 1rem; box-sizing: border-box;}
.imagen-lateral-izq figure img{float: left; width: 65%;  border:2px solid darkgray; padding: 1rem; box-sizing: border-box;}
.imagen-lateral-izq figure figcaption{border: 1px solid red; width: 65%;}
.foto-vertical figure img{border:2px solid darkgray; padding: 1rem; box-sizing: border-box;}
figcaption{caption-side: top; clear: both; text-align: center; font-weight: bold;}
.imagen-vertical-der{width: 30%; box-sizing: border-box; float: right; padding: 1rem; border:2px solid darkgray;}
.video-solo{width: 65%; margin: 1rem auto; }
.video-solo video{border: 2px solid gray; padding: 2rem;}
.video-solo p{text-align: center;}

.videos{width: 50%; float: left; padding: 2rem; text-align: center;}
.videos video{border: 2px solid gray; padding: 2rem;}

#solo{ padding: .5rem 0; margin-bottom: 1rem; background-color: #CEE007;}
#solo-uv{ padding: .5rem 0; margin-bottom: 1rem; background-color: #604D8D;}
.pie-foto-80{width: 80%; margin: 0 auto; margin-bottom: 1rem;}
.subtitulo{text-align: center; padding: 1rem 0;}

#cuatro-fotos{width: 100%; overflow: hidden;}
#cuatro-fotos img{width: 25%; float: left;}
#cuatro-textos p{width: 25%; float: left; text-align: center;}
.nombre-foto{display: none;}
.media-imagen{width: 50%; margin:1rem auto;}

.marco{border: 3px double #F7827B; overflow: hidden;}

.carta{border: 5px solid #777777; border-style:double; text-align: left; padding: 1rem;}
.carta p{font-style: italic;}

.linea-de-tiempo{width: 100%; overflow: hidden;}
.anio{width: 20%; float: left; text-align: center; padding: 2rem 1rem;}
.numero{padding: 2rem 0; color: white;}
.listado{text-align: left;}
.listado p{font-size: .6rem;}
.del-anio{text-align: center; padding: 1.5rem 0; font-weight: bolder;}

.resaltado{padding: 1.5rem; background-color: #ececec; font-weight: 600;}

@media screen and (max-width:1024px)
{
    p{line-height: 3rem; font-size: 1.5rem; }
    h2{font-size: 1.5rem;}
    header,section,footer{width: 100%;}
    #imagen-reciente,#texto-reciente{float:none; width: 100%; }
    header h1{font-size: 1.2rem; display: none;}
    header img{max-width: 100px;}
    br{display: none;}
    .dos-fotos img{width: 95%; float: none;}
    .imagen-peque{width:50%;}
    #imagen-izq{width: 60%; float: none;}
    .textos{float:none; width: 100%;}
    .imagen-sola{width: 100%; padding: 2rem .5rem;}
    .ref{width: 50%; float: left; box-sizing: border-box; margin: 0 auto; text-align: center;}
    .ref p{clear: both;}
    .ref img{width: 30%; float: none;}
    .imagen-80{width: 95%;}
    .imagen-80-marco{width: 95%; padding: .5rem;}
    #video{width:85%;}
    .tabla-datos{width: 100%;}
    table{font-size: .8rem;}
    .texto-lateral{float: none; width: 100%;}
    .foto-vertical{float: none; width: 85%; margin: 0 auto;}
    .video-solo{width: 95%; margin: 1rem auto; }
    .videos{width:100%; float: none;}
    #cuatro-fotos img{width: 50%; float: left;}
    #cuatro-textos p{display: none;}
    .nombre-foto{display: block;}
    .nombre-foto p{width: 50%; text-align: center; float: left;}
    .dos-fotos{width: 100%; float: none;}
    .dos-videos{width: 100%; float: none;}
    .dos-fotos-texto{width: 100%; float: none;}
    .frase-van p{font-size: 2rem;}
    .dos-videos{width: 100%; float: none;}
    audio{width: 100%;}
    .tercio{width: 85%; margin: 0 auto; float: none;}
    #navegacion{font-size: 1rem;}
    h4{font-weight: bolder;}
    h3{color: cadetblue; font-weight: bolder; font-size: 1.5rem}
    h5{padding: 1rem;}
    .ref{width: 100%;}
    .ref img{width: 50%; float: none; margin: 0 auto; }
    nav ul li{float: none; width: 80%; margin: 0 auto; border: 0;}
    .anio{width: 90%; float: none; margin: 0 auto;}
    .listado p{font-size: 1rem;}
    #mas{float: none;}
}