@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text&display=swap');

/* Responsive Resets
-------------------------------------------------------------- */
@-o-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
html {
  overflow-y: auto;
}

img,
audio,
video,
canvas {
    width: 100%;
    height: auto;
    max-width: 1024px;
}

/*generales*/
a:link {color: #69c; text-decoration: none }
body {	font-family: 'Roboto', sans-serif;}
.clr {clear:both;}
h1 {font: normal 2.5em 'Big Shoulders Text', cursive;/*'Anton', sans-serif;*/ color:#F66;text-align:center; margin:0.5% 0;}
h2 {font: 1.5em 'Roboto Condensed', sans-serif;color: #666;text-align:center;}
h4 {font: 1.5em 'Roboto Condensed', sans-serif; font-weight: bolder; color: #000; border-bottom: 2px dotted #000;text-align:center;} 
h5 {font-size: 1.5em; color: #F66; text-transform:uppercase;  border-bottom: 1px solid #F66;}
th { text-align:right; vertical-align:top; padding:0 2%;}
#logo {
	background:url(../img/oyp-color.png) top left no-repeat;
	width: 260px;
	height: 65px;
	display: block;
}
.fl {float: left;}
.fr {float: right;}
.rnd7 {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
p.capital:first-letter {float:left; color: #F66; font-size: 3em; font-weight:bolder; line-height:25px; padding:5px; margin-right: 5px;}
li > strong {color:#F33;}
li > ul > li { list-style: inside; }
.container {
  /*
    The `max-width` property is the width governer. I dare you to experiment
    with setting this larger, something like 1280px.
  */
	max-width: 1024px;
	width:100%;
	margin:0px auto;
	position: relative;
}
/*@media screen and (min-width: 640px) {img-gr {width: 30%; height: auto;}}*/

.menu-content {
    background-color: #FFF;
    max-height: 0;
    overflow: hidden;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    padding: 0 0 0 50px;
}
.collapsible-menu {
    width: 100%;
    background-color: #F66;
    padding: 0px;
    /*border-bottom: 3px solid #c33;*/
    font: 0.85em 'Roboto', sans-serif;
	color: #fff;
}
.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}
.collapsible-menu li {
    width: 98%;
    margin: 2px 0;
    border-bottom: 1px solid #666;
}
.collapsible-menu a {
    color: #000;
    display: block;
    padding: 5px;
    text-decoration: none;
    border-left: 0;
}
.collapsible-menu a:hover {
    background: #666;
    color: #fff;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms llinear;
    transition: all 200ms linear;
    border-left:5px solid #333;

}
.collapsible-menu label {
    font-size: 18px;
    display: block;
    cursor: pointer;
    background: url(../img/menu.png) no-repeat left center;
	background-position:1% center;
    padding: 10px 0 10px 50px;
}
input#menu {
    display: none;
}
input:checked +label {
    background-image: url(../img/close.png);
}

/* Toggle Effect */
input:checked ~ label {
    background-image: url(../img/close.png);
}
input:checked ~ .menu-content {
    max-height: 100%;
}

/* Sección anteriores */
.img-gran {text-align: center;}
.img-gran span {font-size: 0.8em;}

.seccion {
	color: #666;
	font-size:75%;
	text-align:right;
	font-weight:bold;
	margin: 4px 0 4px 10px;
	padding: 4px 0;
	border-bottom:#999 solid 1px;
	border-top:#999 solid 1px;
}

.clr {clear: both;}

#fecha_revista {
	float:right;
	text-align:right;
	margin-bottom: 15px;
}
#fecha_revista, #ruta_anteriores {
	font:12px 'Roboto', sans-serif;
}

a.ref:link { text-decoration: none; }
#ruta_anteriores {line-height:20px; clear:both; 	}
#ruta_anteriores ul {padding-left: 0 !important;}
#ruta_anteriores ul li { background: url(../nueva/img/bg_tag.png) no-repeat 0 0; float: left; height: 19px; padding-left: 10px; list-style: none; margin: 2px;}
#ruta_anteriores ul li a { background: url(../nueva/img/bg_tag.png) repeat-x 0 -38px; color: #fff; float: left; font-weight: bold; height: 19px; text-decoration: none;}
#ruta_anteriores ul li a:hover { color: #fc0;}
#ruta_anteriores ul li span { background: url(../nueva/img/bg_tag.png) no-repeat 0 -19px; float: left; height: 19px; width: 10px;}

.fuentes { margin-top: 15px; padding-top: 5px; border-top: 1px solid #666; font:bold 0.75em 'Source Serif Pro', serif /*"Courier New", Courier, monospace*/; color:#999;}
.fuentes a { text-decoration:none; color: #666;}
.firma {font: 1em 'Roboto Condensed', sans-serif; color:#999; text-align: center; border-bottom:1px dotted  #f66;}

/* Indice revistas */
.obra2 {width:100%;
		margin:10px auto;
		background-color: #ccc;
		text-align: center !important;
		color: #394862;
		padding: 0;
}
.obra2 img {
    margin: 4px 0 -4px 0;
	border-style:none;
}
.obra2 a {display: block; margin: 0;}
.obra2-cabecera { background-color: #fff; padding:7px 0 0 0;border-top:solid 3px #fc786a;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.obra2-seccion {font: 0.9em 'Roboto', sans-serif; text-transform:uppercase;}
.obra2 h1 { font-size:2.5em; color:#fc786a; padding: 5px; margin: 0;}
.cont {font-size: 0.9em; color:#333; border-top:dotted 1px #999; margin:0;padding:7px 10px 10px 5px;}
/* FIN OBRA2 */
/* Indice revistas Obra en 2 col*/
.obra3 {width:66%;
		margin:10px auto;
		background-color: #ccc;
		text-align: center !important;
		color: #394862;
		padding: 0;
}
.obra3 img {
    margin: 4px 0 -4px 0;
	border-style:none;
}
.obra3 a {display: block; margin: 0;}
.obra3-cabecera { background-color: #fff; padding:7px 0 0 0;border-top:solid 3px #fc786a;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
.obra3-seccion {font: 0.9em 'Roboto', sans-serif; text-transform:uppercase;}
.obra3 h1 { font-size:2.5em; color:#fc786a; padding: 5px; margin: 0;}
.cont {font-size: 0.9em; color:#333; border-top:dotted 1px #999; margin:0;padding:7px 10px 10px 5px;}
/* FIN Obra3 */

.notas2 {   width: 31.5%; 
            margin: 0.5% 0.67%;
			display:inline-table;
			background-color:#ccc;
			border: 1px solid #666;
			text-align:left;
}
.notas2 img {
	border-style:none;
}
.notas2 h1, .obra h1 {
    margin: 0 10px;
	color: #000;
	font: bold 0.85em 'Roboto', sans-serif;
}
.notas2 h2, .obra h2 {
	color:#999;
	font-size:12px;
}
.notas2 h3, .obra h3 {
	color:#999;
	font-size:11px;
}
.notas2 a, .obra a, .obra2 a {text-decoration:none;}
.ndx_blqtit {
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ndx_cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9em;
    background-color: #fff;
    padding: 8px;
    height: 70px;
}
.ndx_nota_seccion {
	font: 0.75em 'Roboto', sans-serif;
	text-transform: uppercase;
    background-color: #fff;
	color: #666;
    margin: 0;
    padding: 4px 0 2px 8px;
	text-align: left;
    border-bottom: 1px solid #ccc;
}
.ndx_nota_seccion hr {
  background-color: #CCC; 
  height:1px;
  border: 0;
}
.ndx_firma {font-size:0.75em;font-style:italic;text-align: center; color:#000;}
.ndx_firma a:link, a:visited { text-decoration:none;}
.ndx_firma hr {
	background-color: #999; 
	height:1px;
	border: dotted 0;
}
.ver a {text-decoration: none; color: brown;}
#ruta_anteriores { margin:10px 0 0 10px; line-height:20px;}
#ruta_anteriores ul li { background: url(../img/bg_tag.png) no-repeat 0 0; float: left; height: 19px; padding-left: 10px;}
#ruta_anteriores ul li a { background: url(../img/bg_tag.png) repeat-x 0 -38px; color: #fff; float: left; font-weight: bold; height: 19px; text-decoration:none;}
#ruta_anteriores ul li a:hover { color: #fc0; text-decoration: none; }
#ruta_anteriores ul li span { background: url(../img/bg_tag.png) no-repeat 0 -19px; float: left; height: 19px; width: 10px;}
.interior ol { list-style-type:decimal;padding:0 20px;}
.interior ul { list-style-type:square;padding:0 20px;}
.thmb {margin-top: 2%; text-align:center;}
.thmb li { list-style-type:none; display: inline-block; width:90px; height:90px;margin: 3px;}
.mosaico {margin-top: 2%;}
.mosaico img { width:auto; margin: 1%;}
.grisado {margin-top: 2%;border: 1px solid #999; padding:1%; overflow:auto;}
.grisado img {width:auto; float:right; margin:4px;}
.grisado1 {margin: 1% auto; width:80%; border-top: 1px solid #000; border-bottom: 1px solid #000; padding:1%; background-color:#f2f2f2; overflow:auto;}
.grisado1 h4 {font: bold 1.25em 'Roboto Condensed', sans-serif; border:none; color: #333; text-transform:uppercase; margin:0.5% 0;}
.grisado1 img {width:16%; float:left; margin:2%;}
.grisado1 ul { list-style:none;}
.grisado1 li { float:right; height:auto;}
#nof { float:none;}
.grisado2 {margin:2% auto; width:80%; border-top: 1px solid #000; border-bottom: 1px solid #000; padding:1%; background-color: #ffd600; overflow:auto;}
.grisado2 h4 {font: bold 1.25em 'Roboto Condensed', sans-serif; border:none; color: #333; text-transform:uppercase; margin:0.5% 0;}
.grisado3 {margin:2% auto; width:80%; border-top: 1px solid #000; border-bottom: 1px solid #000; padding:1%; overflow:auto;}
.grisado3 h4 {font: bold 1.25em 'Roboto Condensed', sans-serif; border:none; color: #333; text-transform:uppercase; margin:0.5% 0;}
.grisado2 img {width:10%; float:right; margin:2%;}
/* Grisado varias imagenes en linea c flex */
.grisado-imgs {margin: 1% auto; width:80%; border-top: 1px solid #000; border-bottom: 1px solid #000; padding:1%; background-color:#f2f2f2; overflow:auto;} 
.grisado-imgs div {display: flex; justify-content: center; flex-direction:row; flex-wrap: wrap;}
.grisado-imgs h4 {font: bold 1.25em 'Roboto Condensed', sans-serif; border:none; color: #333; text-transform:uppercase; margin:0.5% 0;}
.grisado-imgs ul { list-style:none; margin: 0;}
.grisado-imgs li { float:right; margin: 5px;}
.gr-destacado {font: 1.25em 'Oswald', sans-serif; border-top: 5px solid #F66; border-bottom: 3px solid #F66; margin: 10px 0px; padding:5px 0px;}
.item-gri { overflow:auto;}
.img-individual {float:right;border:4px solid #FC3;}
.img-ind2-p {float:right; width:auto; margin: 1%;}
.img-peque {float:right;width: 120px; height: auto;}
.img-peque2 {float:right;height: 160px; width: auto; margin:0.5%;}
.ficha { border-top: 4px solid #F90; border-bottom: 4px solid #F90; margin:5px 0px;}
.ficha span {font-weight: bolder; }
.ficha-matfut {font-family: 'Roboto'/*'Oswald'*/, sans-serif; border-top: 1px solid #999; }
.ficha-matfut strong {color: #F33;}
.ficha-matfut ul {list-style-type:square; }
.ficha-matfut1 { width: 50%; float: right; margin:2%; padding:2%; border: 1px solid #F66; }
.ficha-matfut1 p {font: 'Roboto'/*'Oswald'*/ sans-serif; color:#F66;}
.ficha-matfut1 ul {list-style-type: "❚ "; color: #F66; }
.fichaT {text-align: center; width: 50%; float: right; margin:2%; /*border:2px dotted #f66;*/}
.fichaT table {text-align: left; margin: 0 auto; border-collapse:collapse;}
.fichaT tr {border-bottom: 1px solid #CCC;}
.fichaT th {width:39%;}
.fichaT div {width: 100%; font-size:1.25em; font-weight:500; text-align:center;}
.Tabla-full {text-align: left; width: 98%; margin:1%; border-top:2px solid black;}
.Tabla-full table {text-align: left; margin: 0 auto; border-spacing: 0;}
.Tabla-full td, Tabla-full th { padding: 0 auto; border-bottom: 1px solid black;}
.Tabla-full div {width: 100%; font-size:1.25em; text-align:center;} 
/* Destacado dentro de grisado1 */
.list-2c {width:40%; background-color:#F66; color:#fff; float:right;margin:10px; font: 0.9em; border: 4px solid #F66;}
.list-2c h1 {color: #FFF;}
.list-2c ul {list-style:none; padding:0; }
.list-2c li::before{ content:"\25AA"; display: inline-block; width: 1em; margin-left: -.55em;}
.list-2c li { padding:5px 15px; background-color: #F66; }
.list-2c li:nth-child(odd)::before { content:"\25AA"; color:#F66; display: inline-block; width: 1em; margin-left: -.55em;}
.list-2c li:nth-child(odd) { background-color: #FFF; color: #F66;}
@media screen and (max-width: 720px) {
        .notas2 {	width: 98%; }
		.fichaT {float: none; width: 98%;}
		.firma {font-size: 0.75em;}
        .img-individual { float:none; border:none;}
		.img-individual img {width:auto;display: block; margin:auto;}
		.nota-gr h1 {font-size: 1.8em;}
		.interior h2 {font-size: 1em;}
		/*.grisado img {width: 98%; margin: auto; float:none;} */
		.grisado img, .grisado1 img, .grisado2 img, .img-ind2-p {width: 98%; margin: auto; float:none;}
}
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: #E73B02;
    color: #ffffff;
    text-align: left !important;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #E73B02;
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #E73B02;
}