/*Resetea la página para todos los navegadores*/

*, *::after, *::before {box-sizing: border-box;}
body {margin: 0;padding: 0;}

#cabecera {position: relative;}

/* Estilos para el menu de hamburguesa */

#menu_paginas {
  display: flex; /*100vw; medida que da el ancho del viewport de la pantalla*/
  height: calc(100vh - 100px); /*Todo el alto de la pantalla menos 100px*/
  width: 100%;
  max-width: 320px; 
  opacity: 0; 
  position: fixed; 
  right: -100vw; 
  top: 100px; 
  transition: 0.5s 0.75s; 
  z-index: 160; 
  overflow: hidden; 
  overflow-y: auto; 
  /*-webkit-overflow-scrolling: touch;*/
  background: #000e; 
  box-shadow: -3px 3px 6px #888;
}
#menu_paginas #menu {
  width: 100%;
  max-width: 300px;
  margin: auto;
  padding: 60px 0;
}
#menu_paginas #menu div {
  padding-left: 15px;
  background-image: linear-gradient(90deg, transparent 5px, #a07f52 5px, 6px, transparent 6px);
}
#menu_paginas #menu p {
  position: relative;
  padding: 0; 
  margin: 0; 
  font: 16px/22px arial; 
  color: #fff;
  text-indent: 15px;
}
#menu_paginas #menu p label {
  display: block; 
  text-transform: uppercase; 
  margin-left: -15px;
  color: #fff;
  cursor: pointer;
}
#menu_paginas #menu p label:hover {color:#fff;}
#menu_paginas #menu div p {
  padding: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
}
#menu_paginas #menu p label:last-child {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0000;
}
#menu_paginas #menu p label span {
  display: inline-block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #aaa;
  margin: 0 5px 0 0;
}
#menu_paginas #menu p a {
  color: #aaa;
  text-decoration: none;
  font: 16px/22px arial, sans-serif;
}
#menu_paginas #menu p a:hover {color: #fff;}
#menu_paginas #menu div p {height: 20px;}

input.abrir,
input.cerrar {display:none;}
#menu_paginas #menu div p {height: 0px; transition: 0.75s;}

/* Icono */

#menu_toggle {padding:0; margin:0; position:fixed; right:40px; top:20px; height:32px; width:36px; text-align:center; z-index: 140;}
#menu_toggle span {display:block; width:100%; height:100%; box-sizing:border-box; border:2px solid #000; border-width:4px 0 4px 0; transition:0.5s 0.5s;}
#menu_toggle span::before {display:block; content:""; width:36px; height:4px; background:#000; position:absolute; top:14px; left:0; z-index:1; transition:transform 0.5s;}
#menu_toggle span::after {display:block; content:""; width:36px; height:4px; background:#000; position:absolute; top:14px; left:0; z-index:1; transition:transform 0.5s;}
#menu_toggle label {display:block; width:100%; height:100%; position:absolute; left:0; top:0; cursor:pointer; z-index:2;}
#menu_toggle label:nth-of-type(2) {display:none;}

.abrir:checked ~ #menu_toggle {background:transparent; transition: 0.5s;}
.abrir:checked ~ #menu_toggle label {display:none;}
.abrir:checked ~ #menu_toggle label:last-child {display:block;}
.abrir:checked ~ #menu_toggle span {border-color:transparent; transition:0s;}
.abrir:checked ~ #menu_toggle span::before {transform:rotate(405deg); transform-origin:center center;}
.abrir:checked ~ #menu_toggle span::after {transform:rotate(495deg); transform-origin:center center;}

.abrir:checked ~ #menu_paginas {right:0; opacity:1; transition: 0.5s 0.5s;}

.menu1:checked ~ #menu_paginas #menu .pmenu1 + div > p,
.menu2:checked ~ #menu_paginas #menu .pmenu2 + div > p,
.menu3:checked ~ #menu_paginas #menu .pmenu3 + div > p,
.menu4:checked ~ #menu_paginas #menu .pmenu4 + div > p,
.menu5:checked ~ #menu_paginas #menu .pmenu5 + div > p,
.menu6:checked ~ #menu_paginas #menu .pmenu6 + div > p,
.menu7:checked ~ #menu_paginas #menu .pmenu7 + div > p,
.menu8:checked ~ #menu_paginas #menu .pmenu8 + div > p,
.menu9:checked ~ #menu_paginas #menu .pmenu9 + div > p,
.menu10:checked ~ #menu_paginas #menu .pmenu10 + div > p,
.menu11:checked ~ #menu_paginas #menu .pmenu11 + div > p,
.menu12:checked ~ #menu_paginas #menu .pmenu12 + div > p,
.menu13:checked ~ #menu_paginas #menu .pmenu13 + div > p {height:22px; color:#fff;}

.menu1:checked ~ #menu_paginas #menu .pmenu1 > label:last-child,
.menu2:checked ~ #menu_paginas #menu .pmenu2 > label:last-child,
.menu3:checked ~ #menu_paginas #menu .pmenu3 > label:last-child,
.menu4:checked ~ #menu_paginas #menu .pmenu4 > label:last-child,
.menu5:checked ~ #menu_paginas #menu .pmenu5 > label:last-child,
.menu6:checked ~ #menu_paginas #menu .pmenu6 > label:last-child,
.menu7:checked ~ #menu_paginas #menu .pmenu7 > label:last-child,
.menu8:checked ~ #menu_paginas #menu .pmenu8 > label:last-child,
.menu9:checked ~ #menu_paginas #menu .pmenu9 > label:last-child,
.menu10:checked ~ #menu_paginas #menu .pmenu10 > label:last-child,
.menu11:checked ~ #menu_paginas #menu .pmenu11 > label:last-child,
.menu12:checked ~ #menu_paginas #menu .pmenu12 > label:last-child,
.menu13:checked ~ #menu_paginas #menu .pmenu13 > label:last-child {display:block;}

.menu1:checked ~ #menu_paginas #menu .pmenu1 > label,
.menu2:checked ~ #menu_paginas #menu .pmenu2 > label,
.menu3:checked ~ #menu_paginas #menu .pmenu3 > label,
.menu4:checked ~ #menu_paginas #menu .pmenu4 > label,
.menu5:checked ~ #menu_paginas #menu .pmenu5 > label,
.menu6:checked ~ #menu_paginas #menu .pmenu6 > label,
.menu7:checked ~ #menu_paginas #menu .pmenu7 > label,
.menu8:checked ~ #menu_paginas #menu .pmenu8 > label,
.menu9:checked ~ #menu_paginas #menu .pmenu9 > label,
.menu10:checked ~ #menu_paginas #menu .pmenu10 > label,
.menu11:checked ~ #menu_paginas #menu .pmenu11 > label,
.menu12:checked ~ #menu_paginas #menu .pmenu12 > label,
.menu13:checked ~ #menu_paginas #menu .pmenu13 > label {color:#fff; cursor:pointer;}

.menu1:checked ~ #menu_paginas #menu .pmenu1 > label span,
.menu2:checked ~ #menu_paginas #menu .pmenu2 > label span,
.menu3:checked ~ #menu_paginas #menu .pmenu3 > label span,
.menu4:checked ~ #menu_paginas #menu .pmenu4 > label span,
.menu5:checked ~ #menu_paginas #menu .pmenu5 > label span,
.menu6:checked ~ #menu_paginas #menu .pmenu6 > label span,
.menu7:checked ~ #menu_paginas #menu .pmenu7 > label span,
.menu8:checked ~ #menu_paginas #menu .pmenu8 > label span,
.menu9:checked ~ #menu_paginas #menu .pmenu9 > label span,
.menu10:checked ~ #menu_paginas #menu .pmenu10 > label span,
.menu11:checked ~ #menu_paginas #menu .pmenu11 > label span, 
.menu12:checked ~ #menu_paginas #menu .pmenu12 > label span,
.menu13:checked ~ #menu_paginas #menu .pmenu13 > label span {border-top-color:#a07f52; transition: 0.5s; transform-origin: 50% 30%; transform: scale(1.5) rotate(180deg);}

/* estilo para el contenido */

#contenido-futbol {
  width: 100%;
  max-width: 90vw;
  margin: 30px auto;
  display: grid;
  place-content: center;
}
#contenido-futbol .card_header h1 {display: inline-block;}
#contenido-futbol .estrellas {display: grid; justify-items: center;}

/* Estilo para los contenedores de imágenes y escudos */

#contenido-futbol .back_img, #contenido-futbol .back_img1 {
  width: 100%;
  max-width: 300px;
  height: 220px;
  background-position: left, right;
  background-size: 150px 150px, 150px 150px;
  background-repeat: no-repeat;
  aspect-ratio: 4/3;
}

#contenido-futbol .back_img {background-image: url("../imagenes/Lionel_Messi.jpg"), url("../imagenes/Cristiano_Ronaldo.jpg");}

#contenido-futbol .back_img1 {margin: 0 auto; background-image: url("../imagenes/madrid_barsa.jpg"), url("../imagenes/madrid_barsa1.jpg");} 

.back_img:hover, .back_img:focus, .back_img:active,
.back_img1:hover, .back_img1:focus, .back_img1:active  {
  animation: back 5s ease-out infinite;
}

@keyframes back {
  0% {background-position: left, right; background-size: 150px 150px, 150px 150px;} 
  17% {background-position: center, right; background-size: 200px 200px, 50px 50px;}
  34% {background-position: center, right; background-size: cover, 0px 0px;}
  51% {background-position: left, right; background-size: 150px 150px, 150px 150px;}
  68% {background-position: left, center; background-size: 50px 50px, 200px 200px;}
  85% {background-position: left, center; background-size: 0px 0px, cover;}
  100% {background-position: left, right; background-size: 150px 150px, 150px 150px;}
}

#contenido-futbol #rivales {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

#contenido-futbol #rivales .imagen {
  display: flex;
  flex-direction: column;
  margin: 10px;
  background-color: var(--body-bg);
}
#contenido-futbol #rivales .imagen p {
  text-align: center;
  margin: 1em;
  font-family: verdana, tahoma, nimrod;
  color: navy;
  transition: .3s linear;
}
#contenido-futbol #rivales .imagen a {
  text-decoration: none;
  font-weight: bold;
  font-size: calc(var(--font-size-base) * 1.2);
  transition: .3s linear;
}
#contenido-futbol #rivales .imagen img {width: 120px; height: 120px; transition: .3s linear;}
#contenido-futbol #rivales .imagen a:hover {transition: .3s linear; color: green; font-style: italic;}
#contenido-futbol #rivales .imagen a img:hover {transition: .3s linear; transform: translateY(5px) scale(1.2);}

/* Estilo para los details */

.pruebas {width: 100%; max-width: 100%; margin: auto;}
.pruebas details.mas summary {font: bolder 24px/30px arial; cursor: pointer;}
.pruebas .relleno {height: 0; font: 400 18px/0px 'Roboto'; overflow: hidden; transition: .5s;}
.pruebas .relleno p {max-width: 95%;}
.pruebas details.mas[open] ~ .relleno {transition: .5s; height: 100%; font: 400 18px/24px 'Roboto'; overflow: visible;}
.pruebas details.mas:not[open] ~ .relleno {transition: 1s;}
.pruebas details summary span:nth-child(2) {display:none;}
.pruebas details.mas[open] summary span:nth-child(1) {display:none;}
.pruebas details.mas[open] summary span:nth-child(2) {display:inline-block;}

/* CAPAS CONTENEDORAS DE CADA EQUIPO */

.listas {
  width: 100%;
  max-width: 90%;
  position: relative;
  display: flex;
  margin: 60px;
  padding: 50px 0;
}
.listas .messi, .listas .ronaldo {width: 100%; margin: 0 50px; display: flex; justify-content: flex-start;}
#amimessi, #amironaldo {
  display: flex;
  flex-direction: column;
  width: 12em;
  border-right: 1px solid #000;
  padding: 0 0 1em 0;
  font-family: sans-serif;
  text-align: center;
  background-color: #90bade;
  color: #333;
} 
#amimessi h3, #amironaldo h3 {text-align: center;}
#amimessi > a, #amironaldo > a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #1956b7;
  border-right: 10px solid #508fc4;
  border-bottom: 1px solid #90bade;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 10em;
}
#amimessi a:hover, #amironaldo a:hover {
  border-left: 10px solid #1c64d1;
  border-right: 10px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff;
}
#img_madrid, #img_barsa {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 50px;
  width: 180px;
  height: 312px;
}
#img_barsa a, #img_madrid a {
  display: block;
  height: 30px;
  width: 160px;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  transition: all .4s linear;
}
#img_barsa a img, #img_madrid a img {border: 0;}
#img_barsa a:hover, #img_madrid a:hover {transition: all .4s linear; height: 160px;}

.listas input {display: inline-block; position: absolute; cursor: pointer;}
#img_barsa input:nth-of-type(1) {transform: translate(-80px, 90px);}
#img_barsa input:nth-of-type(2) {transform: translate(-80px, 120px);}
#img_barsa input:nth-of-type(3) {transform: translate(-80px, 160px);}
#img_barsa input:nth-of-type(4) {transform: translate(-80px, 200px);}
#img_barsa input:nth-of-type(5) {transform: translate(-80px, 240px);}
#img_barsa input:nth-of-type(6) {transform: translate(-80px, 275px);}
#img_barsa input:nth-of-type(7) {transform: translate(-80px, 315px);}
#img_madrid input:nth-of-type(1) {transform: translate(-80px, 90px);}
#img_madrid input:nth-of-type(2) {transform: translate(-80px, 120px);}
#img_madrid input:nth-of-type(3) {transform: translate(-80px, 160px);}
#img_madrid input:nth-of-type(4) {transform: translate(-80px, 200px);}
#img_madrid input:nth-of-type(5) {transform: translate(-80px, 240px);}
#img_madrid input:nth-of-type(6) {transform: translate(-80px, 275px);}
#img_madrid input:nth-of-type(7) {transform: translate(-80px, 315px);}
.listas label {display: inline-block; position: relative; transition: all .4s linear;}
input:checked + label {box-shadow: 2px 2px 3px rgba(0,0,0,.5);}
#ini:checked ~ .ini > a {transition: all .4s linear; height: 160px;}
#lui:checked ~ .lui > a {transition: all .4s linear; height: 160px;}
#ney:checked ~ .ney > a {transition: all .4s linear; height: 160px;}
#ger:checked ~ .ger > a {transition: all .4s linear; height: 160px;}
#bus:checked ~ .bus > a {transition: all .4s linear; height: 160px;}
#rak:checked ~ .rak > a {transition: all .4s linear; height: 160px;}
#xav:checked ~ .xav > a {transition: all .4s linear; height: 160px;}
#mod:checked ~ .mod > a {transition: all .4s linear; height: 160px;}
#ben:checked ~ .ben > a {transition: all .4s linear; height: 160px;}
#gar:checked ~ .gar > a {transition: all .4s linear; height: 160px;}
#car:checked ~ .car > a {transition: all .4s linear; height: 160px;}
#ram:checked ~ .ram > a {transition: all .4s linear; height: 160px;}
#vin:checked ~ .vin > a {transition: all .4s linear; height: 160px;}
#cas:checked ~ .cas > a {transition: all .4s linear; height: 160px;}
#img_barsa > div, #img_madrid > div {position: absolute; left: 500px; transform-origin: 0% 0%; transform: scaleY(0); transition: all .4s linear;}
#ini:checked ~ .ini + div {transition: all .4s linear; transform: scaleY(1);}
#lui:checked ~ .lui + div {transition: all .4s linear; transform: scaleY(1);}
#ney:checked ~ .ney + div {transition: all .4s linear; transform: scaleY(1);}
#ger:checked ~ .ger + div {transition: all .4s linear; transform: scaleY(1);}
#bus:checked ~ .bus + div {transition: all .4s linear; transform: scaleY(1);}
#rak:checked ~ .rak + div {transition: all .4s linear; transform: scaleY(1);}
#xav:checked ~ .xav + div {transition: all .4s linear; transform: scaleY(1);}
#mod:checked ~ .mod + div {transition: all .4s linear; transform: scaleY(1);}
#ben:checked ~ .ben + div {transition: all .4s linear; transform: scaleY(1);}
#gar:checked ~ .gar + div {transition: all .4s linear; transform: scaleY(1);}
#car:checked ~ .car + div {transition: all .4s linear; transform: scaleY(1);}
#ram:checked ~ .ram + div {transition: all .4s linear; transform: scaleY(1);}
#vin:checked ~ .vin + div {transition: all .4s linear; transform: scaleY(1);}
#cas:checked ~ .cas + div {transition: all .4s linear; transform: scaleY(1);}

/* ELEMENTOS DE LA GALERIA DE IMAGENES */

#galeria {
  padding: 0;
  margin: 40px auto 0 auto;
  list-style-type: none;
  height: 300px;
  width: 774px;
  border: 1px solid #888;
}
#galeria li {
  width: 60px;
  height: 300px;
  float: left;
  border-left: 2px solid #000;
}
#galeria li img {height: 300px;width: 60px;border: 0;}
#galeria li:hover {background: #eee;width: 400px;}
#galeria li:hover img {width: 400px;}