@charset "utf-8"; 

* 
{   margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; /*Es para todo los textos*/
    list-style: none;
}

body 
{   background: linear-gradient(0deg, #2B4E72, #577B6D, #94BA65);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between; /*No lleva al footer al fondo*/
}

/*Tipografias para Textos/Titilos */
/*Roboto Regular(por ahora sin USO)*/
@font-face
{	font-family: 'MyWebFont';
	src: url('WebFont.eot');
	src: url('WebFont.eot?#iefix') format('embedded-opentype'),
	     url('WebFont.woff') format('woff'),
	     url('WebFont.ttf') format('truetype'),
	     url('WebFont.svg#webfont') format('svg');
}
/*Agrego: "font-family: 'Roboto', sans-serif;" para el texto*/
/*-------------------------------------*/

/*Estilo para cabeza y sus iconos */
header
{  width: 100%;
   top: 0;
   background: linear-gradient(0deg, #2790B0, #296F91, #2B4E72);
   height: 3.5em; 
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;    
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

header i
{  color: white;
   font-size: 1.5em;
   margin-top: 0.3em;    
}

#logoweb
{  	width: 10em;
	display: block;
	margin-left: 3.5em;
    margin-right: 3.5em;
}
/*------------------------------------*/

/*Estilo para los h1, h2 en menu */
nav h1
{  color: white;
   font-size: 0.85em;        
   font-weight: 600;    
} 

nav h2
{  color: white;
   font-size: 0.8em;
   font-weight: 500;    
}    
/*------------------------------------*/

/*Estilo para lista de menu*/
header nav
{   box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.3);
	background: linear-gradient(0deg, #2B4E72, #233F5D, #1B3047);
    position: fixed;
    right: -100vw;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    z-index: 999;
    transition: all .5s ease;
}

header nav:target 
{   right: 0;
}

#menu
{   flex-direction: column;
    justify-content: space-between;
    padding: 3.75rem 1.5rem 1rem 2.5rem;
}

#menu i
{  position: absolute;
   right: 0;
   top: 0;
   margin-right: 0.65em; 
   margin-top: 0.8em;    
}

#menu ul
{	text-align: right;
    flex-direction: column;
	margin-bottom: 1rem;
    margin-top:8em;
    margin-right: -0.5em;
}

#menu ul li 
{   align-items: center;
    font-weight: 300;
   	line-height: 1.5em;
}

#menu ul li a 
{   color: white;
    font-size: 0.7em;
    text-decoration: none;
}

.contenedorimg
{  width: 7em;
   height: 7em;
   background-color:#2B4E72;
   border-radius: 100%; 
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
   position: absolute; 
   right: 0;
   margin-right: 1em;    
}

.contenedorimg img
{  width: 6em;
   border-radius: 100%; 
   margin-top: 0.4em;    
}

nav div
{  margin-top: 0.5em;
   margin-bottom: 1em;    
}    
/*-----------------------------------------*/

/*Estilo para Noticia y Subnoticias*/

.noticias
{  width: 92%;
   background-color: white;
   height: 28em;
   display: flex;
   flex-direction:column; 
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 0px 0px 8px 8px;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
} 

.noticiadestacada 
{  width: 18em;
   border-radius: 0px 0px 0px 0px;     
}

.galeria figure 
{   position: relative;
    overflow: hidden;
    flex-grow: 1;
}

.galeria img { display: block; }

.galeria figcaption 
{   background-color: rgba(0,0,0,.5); /*Color de area visible*/
    border: solid 2px rgba(0,0,0,0);
    border-radius: 0 0 0 0;
    color: white;
    padding: .5em;
    line-height: 1.2em;
    position: absolute;
    height: 100%;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    transition: all .5s ease;
}

.galeria figure:hover figcaption 
{   background-color: rgba(0,0,0,.5); /*Color de transicion*/
    border: solid 2px rgba(0,0,0,0);
    border-radius: 0em 0em 0 0;
    padding: 1em;
    text-align: center;
    top: 0em;    /*Acomodamiento de transicion */
    left: 0em;   /*Acomodamiento de transicion */
    right: 0em;  /*Acomodamiento de transicion */
    transition: all .3s ease-out;  /*Duracion de transicion*/
}

.galeria figcaption span 
{   display: block;
    font-size: .75em;
    color: white;
}

.subnoticias 
{  display: flex;
   flex-direction: column;    
}

.areasubnoticia 
{  display: flex;
   margin-top: 0.8em;
   width: 18em;;    
}

.areasubnoticia p
{  font-size: 0.8em;
   font-weight: 600; 
   text-align: left;
   margin-left: 0.6em;
   color: #2B4E72;    
}

.areasubnoticia span
{  font-size: 0.75em;
   font-weight: 500; 
}

.areasubnoticia img
{  width: 10em;
}    

.botonsecundario
{  width: 17em;
   background-color: #2790B0;
   height: 2.2em;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 4.5px;
   text-decoration:none; 
}

.botonsecundario p
{  font-size: 0.7em;
   color: white;
   font-weight: 400;
}

/*Estilo para INFORMACION de Noticia*/

.noticiainf
{  width: 92%;
   background-color: white;
   height: 28em;
   display: flex;
   flex-direction:column; 
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 8px 8px 8px 8px;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.encabezado
{  text-align:left;
   width: 18em;    
}

.encabezado p
{  font-size:0.7em; 
   margin-bottom: 0.8em;
   background-color: #2B4E72;
   color:white;
   line-height: 2.2em;margin-left: 
}

.encabezado h3
{  font-size: 0.9em;
   margin-bottom: -0.2em;
   font-weight: 500;
}

.encabezado h1
{  font-size:1.7em;
   margin-bottom: -0.3em;
   color:#2B4E72;
}

.encabezado h2
{  font-size: 0.95em;
   font-weight: 600;
   color:#486c91;
}

.noticiainf img
{  width: 18em;
}

.compartir
{  display: flex;
   margin-left: -7.5em;    
}

.compartir p
{  font-size: 0.8em;
   color:#CE2B37;
   font-weight: 600;
   margin-top:0.2em;
}

.compartir a img
{  width: 1.4em;
   margin-left: 0.5em;    
}

.articulo
{  margin-top: 0.9em;
   width: 18em;    
}

.articulo p
{  font-size: 0.65em; 
   text-align:left;
}
/*------------------------------------*/

/*Estilo para resultados de partidos*/

.partidos
{  width: 92%;
   background-color: white;
   height: 29.5em;
   display: flex;
   flex-direction:column; 
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 0px 0px 8px 8px; 
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.areatemporizador
{ display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.6em;    
}

.areatemporizador h5
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;    
}

.areatemporizador span
{  font-size:1.2em;
   font-weight: 500;    
}

.areatemporizador p
{  font-size:0.8em;
}

.temporizador
{  width: 18em;
   background-color: #486c91;
   height: 2.2em;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   text-decoration:none;
}

#demo
{  font-weight: 700;
   font-size: 1.2em;    
   color: white;
   word-spacing: 0.5em;        
}

.arearesultados 
{  display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;  
}

.arearesultados h5
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;    
}
   
/*------------------------------------*/

.inicio 
{   padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	padding-right: 5%;
}

.inicio img
{   max-width: 18rem;
	padding-top: 0em;
	margin-top: 5em;
    width: 60%;
    margin-bottom:-1.5em;
}

.textoinicio
{  	padding-top: 1em;
    font-size: 0.9em;
	text-align: center;
    color: white;
}

h1
{   font-size: 1.5em;
    margin-bottom: -0.2em;
}

.botoncontinuar
{  	margin-top: 0.45em;
    margin-bottom: 4em; /*Ajustar segun la ventana*/
	width: 80%;
	background-color: #2B4E72;
	height: 2.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
	border-radius: 8px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    text-decoration:none; 
}

.datosusuario
{   margin-top: 3em;
	margin-bottom: 0.3em;
	width: 80%;
	background-color: rgba(255,255,255,0.9);
	height: 5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 8px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid;
}

.datosusuario2
{   margin-top: 1em;
	margin-bottom: 0.3em;
	width: 80%;
	background-color: rgba(255,255,255,0.9);
	height: 2.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 8px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid; 
}
.datosusuario3
{   margin-top: 2em;
	margin-bottom: 0.3em;
	width: 80%;
	background-color: rgba(255,255,255,0.9);
	height: 11.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.0);
	border-radius: 8px;
	border: rgba(0, 0, 0, 0.1) 0.5px solid; 
}

/*Estilo de Titulos y sus Areas*/
.areatitulos  /*Usar para todos los titulos*/
{  width: 92%;
   background-color: #2B4E72;
   height: 2.5em;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 8px 8px 0px 0px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.areatitulos i
{ color: white;
  font-size: 1.4em;
  margin-right: 0.4em;       
}

.areatitulos img /*IMPORTATE SACAR LUEGO DE PONER ICONOS*/
{ width: 2em;       
}

.titulos
{  color: white;
   font-size: 1em;    
}
/*---------------------------------------------*/

span
{  margin-right: 1em; 
}

.formulario
{  	width: 100%;
	background-color: rgba(255,255,255,0.0);
	overflow: hidden;
    visibility: visible;
}

.iniciarsecion
{   text-align: center;
	color:#2B4E72;
	background-color: rgba(255,255,255,0.0);
	display: block;
	padding: 8px 8px;
	width: 100%;
	font-size: 0.9em;
}

.p2
{  color: white;
}

#fondo
{   /*background-image: url(../imagenes/fondo.png); Quita/Pone fondo*/
   background-color: white;
   height: 100em;  /*Tamaño de alto TEMPORAL*/  
}

.paginasadicionales
{  display: flex;
   justify-content:space-around;
   margin-top: -4em;
}

.paginasadicionales a
{  text-decoration:none; /*Solo para quitar subrayado*/
}

.separador
{  width: 18em;
   background-color: #94BA65;
   height: 0.05em;
   display: flex;
   flex-direction: row;
}

/*Estilo para contactos*/
.contactos 
{  display: flex;
   align-items: center;
   justify-content: center;      
   height: 4em;
   margin-top: -3em;
   margin-bottom: 3em;
}

.contactos img 
{  width: 9em;
}

.contactos i 
{  color: white;
   font-size: 2em;
   margin-left: 0.5em;    
}
/*-----------------------------*/

/*Estilo para Perfil de usuario*/

.perfil
{ text-align: center;
  flex-direction: column;
  display: flex;
  align-items: center;
  align-content: center;
}

.perfil h1
{  font-size: 1.2em;
   color: white; 
   word-spacing: 0.2em;
   letter-spacing:0.05em;
   margin-top: 0.5em;
}

.perfil h2 
{  color: white;
   line-height: 2em;
   font-weight: 400;
   font-size: 0.75em;
}

.perfil h3
{  font-weight: 500;
   font-size: 0.9em;
   color: white;
   margin-top: 0.5em;
}

.foto
{  border-radius: 100px; 
   width: 11em;
   height: 11em;    
   display: flex;
   align-items: center;
   justify-content: center;    
   background-color: #94BA65; 
   box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
} 

.foto2
{  border-radius: 100px; 
   width: 10.5em;
   height: 10.5em;    
   display: flex;
   align-items: center;
   justify-content: center;    
   background-color: #709343; 
   box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
}

.foto2 i
{  color: #94BA65;
   font-size: 5em;
   cursor: pointer;    
}

.foto2 p
{  font-size: 1em;
   color: #94BA65;
   font-weight: 600;    
}

.image-upload > input
{  display: none;
}

.perfil img
{  border-radius: 100%;
   width: 10.5em; 
   display: block;
   margin: auto;
}

.datosperfil
{  width: 92%;
   background-color: white;
   height: 18em;
   display: flex;
   flex-direction: column;    
   align-items: center;
   align-content: center;    
   justify-content: center;
   border-radius: 0px 0px 8px 8px;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);     
}  

.datosperfil h5
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;
   margin-bottom: -0.5em;    
}

.datos
{  display: flex;
   flex-direction: column;
   text-align: left;
   width: 18em;  
   margin-bottom: 0.5em;    
}

.datos p
{  font-size: 0.9em;
   margin-bottom: 0.3em;    
}

.datos span
{  font-size: 1em;
   font-weight: 600;
   color:#2B4E72 ;    
}

.album
{  display: flex;
   flex-direction: column;
   width: 17em;   
}

.albumtitulo
{  display: flex;
}

.albumfila
{  width: 17em;
   display: flex;
   justify-content: space-between;
   align-content: center;
   align-items: center;    
}

.albumfila img
{  width: 8.2em;
}

.albumtitulo h1
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;
   margin-bottom: 0.2em; 
    
}

/*-----------------------------*/

/*Estilo para OTROS DEPORTES*/

.deportes
{ width: 92%;
}

.deporteclub
{  display: flex;
   flex-direction: column; 
   align-content: center;
   align-items: center; 
   justify-content: center;    
   width: 9em;
   height: 11em;
   background-color: #223d58;
   border-radius: 9px 9px 9px 9px;
    
}

.deportesfila
{  display: flex;
   justify-content: space-between;
}

.deportesfila a 
{   text-decoration: none; 
}

.logodeporte
{  display: flex; 
   flex-direction: column;    
   align-content: center;
   justify-content: center;
   align-content: center;    
   width: 8.2em;
   height: 8em;
   background-color: #2B4E72;
   border-radius: 9px 9px 0px 0px;
}

.logodeporte i
{  color: white; 
   font-size: 4em;    
}

.nombredeporte
{  width: 8.7em;
   height: 2.2em;
   display: flex;
   flex-direction: column;    
   align-content: center;
   justify-content: center;
   align-content: center;   
}

.nombredeporte h1
{  font-size: 0.8em;
   color: white;
}

.iniciodeporte
{  display: flex;
   flex-direction: column; 
   align-content: center;
   align-items: center; 
   justify-content: center;    
   width: 92%;
   height: 21.7em;
   background-color: #223d58;
   border-radius: 9px 9px 9px 9px;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);       
}

.iniciodeporte img
{  width: 18em;
   border-radius: 9px 9px 0px 0px; 
   margin-bottom: 0.5em;    
}

.iniciodeporte h1
{  font-size: 1.2em;
   color: white;
   font-weight: 500;
   width: 18em; 
   margin-bottom: 0.2em; 
   letter-spacing: 0.1em;    
}

.textodeporte
{  width: 18em; 
   height: 5.5em;
   display: flex;
   align-content: center;
   align-items: center;    
   text-align: center;
   justify-content: center;    
   background-color: #486c91;
}

.textodeporte p
{  font-size: 0.65em;
   color: white;
   width: 90%;    
}

/* Style the tab */
.tab 
{ overflow: hidden;
  background-color: #223d58;
  width: 92%; 
  box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

/* Style the buttons inside the tab */
.tab button 
{ background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 15px;
  color: white;    
}

/* Change background color of buttons on hover */
.tab button:hover 
{ background-color: #486c91;
}

/* Create an active/current tablink class */
.tab button.active 
{ background-color: #486c91;
}

/* Style the tab content */
.tabcontent
{ display:none;
  width: 92%;
  height: 6em;    
  background-color: white;
  border-top: none;
  box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.horariodeporte
{ width: 18em;
  display:flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.deportetm
{ display: flex;
  align-content: center;
  align-items: center;
  margin-top: 1em;    
}

.deportetm p
{ font-size: 0.9em;
  letter-spacing: 0.1em;    
}

.deportetm i
{ font-size: 1.2em;
  margin-right: 0.5em;    
}

/*-----------------------------*/

/*Estilo para VIDEOS*/
.videos
{  display: flex;
   flex-direction: column; 
   align-content: center;
   align-items: center; 
   justify-content: center;    
   width:92%;
   height: 42em;
   background-color: white;
   border-radius: 0px 0px 8px 8px;
}

.videosyoutube
{  width: 18em;
}

.datovideo
{ display: flex;
  flex-direction: column;    
  width: 18em;
  align-content: center;
  margin-bottom: 0.2em;    
}

.datovideo h1
{  font-size: 1em; 
   text-align: left;
   color: #486c91;
}

.datovideo p
{  font-size: 0.8em;
   text-align: left;
}

.compartir2
{  display: flex;
   align-items: center;
   align-content: center;
  width: 18em;    
}

.compartir2 p
{  font-size: 0.8em;
   color:#CE2B37;
   font-weight: 600;
}

.compartir2 a img
{  width: 1.4em;
   margin-left: 0.5em;
   margin-top: 0.3em;    
}

/*-----------------------------*/

/*Estilo para CONSULTA*/
.consulta
{  display: flex;
   flex-direction: column; 
   align-content: center;
   align-items: center; 
   justify-content: center;    
   width:92%;
   height: 34em;
   background-color: white;
   border-radius: 0px 0px 8px 8px;
}

.consulta h5
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;
   margin-bottom: 0.2em;
}

.condiciones
{  display: flex;
   flex-direction: column;    
   width: 18em;
   align-items: center;
   justify-content: center;
   text-align: center;    
}

.condiciones p
{  font-size: 0.8em;
    
}

.demora
{ display: flex;
  width: 13em;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin-top: 0.7em;
  margin-bottom: 0.7em;    
}

.demora p
{ font-size: 0.7em;
  color: #486c91;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;       
} 

.demora i
{ font-size: 1.8em;
  color: #486c91;
  margin-right: 0.4em;    
}

.datos textarea
{ background-color: rgb(169, 189, 209);
  height: 8em;
  font-size: 0.8em;    
}

/*-----------------------------*/

/*Estilo para CONTACTO y MAPA*/

.datoscontacto
{  width: 92%;
   background-color: white;
   height: 23em;
   display: flex;
   flex-direction: column;    
   align-items: center;
   align-content: center;    
   justify-content: center;
   border-radius: 0px 0px 8px 8px;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3); 
}

.datoscontacto img
{  width: 18em;
}

.datoscontacto h5
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;
   margin-bottom: 1em; 
}

#map
{ 
}

.bus
{  display: flex;
   width: 12em;
   align-content: center;
   justify-content: center;
   align-items: center;    
}

.datobus
{  display: flex;
   width: 5em;
   align-content: center;
   justify-content: center;
   align-items: center;  
} 

.datobus i
{  font-size: 1.5em;
   color: #486c91;
   margin-right: 0.3em;
}
/*-----------------------------*/

/*Estilo para CALENDARIO*/
.calendario
{  width: 92%;
   background-color: white;
   height: 9em;
   display: flex;
   flex-direction:column; 
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 0px 0px 8px 8px; 
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.calendario div
{  width:18em;
   text-align:left;
   margin-top:0.5em;
   
}

.calendario h1
{  color:#486c91;
   font-weight: 600;
   font-size: 1em;
}

.calendario div p
{  font-size:0.8em;
   margin-bottom:0.4em;
}

.calendario div span
{  font-size:0.95em;
   color:#2B4E72;
   font-weight:600;
}
 
.accordion 
{ background-color: #2B4E72;
  color:white;
  cursor: pointer;
  padding: 18px;
  width: 92%;
  border:none;
  text-align: left;
  outline: none;
  font-size: 0.8em;
  transition: 0.4s;
  display: flex;
  align-content: space-between;
  justify-content:space-between;
  box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.active, .accordion:hover
{  background-color:#2B4E72;
}

.clubs
{  display: flex;
   align-items: center; 
   justify-content:space-between;
}

.clubs2
{  display: flex;
   align-items:center; 
   width: 18em;    
}
 
.imgclub2 
{ width: 2.8em;
  height: 2.2em;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;    
} 

.datoclub2
{ height: 2.2em;
  display: flex;
  align-items: center;
}

.clubs2 p
{  
   text-align:left; 
   line-height: 1em; 
}

.clubs2 span
{  font-size:0.7em;
}

.panel 
{  width: 92%;
   padding: 18px;
   display: none;
   background-color: white;
   overflow: hidden;
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);    
}

.paneldatos
{  display: flex;
   align-content: center;
   align-items: center; 
   justify-content: space-between;
}

.paneldatos p
{  font-size:0.8em;
   font-weight:600;
   word-spacing: 6em;
   color:#2B4E72
}

.clubs p 
{  color: black;
   font-weight: 500;
   font-size: 0.8em;    
}

.clubsvs
{ display: flex;
  align-items: center;
  width: 6em;
  justify-content: space-between;    
}

/*-----------------------------*/

/*Estilo para POSICIONES*/

.posiciones
{  width: 92%;
   background-color: white;
   height: 37em;
   display: flex;
   flex-direction:column; 
   align-items: center;
   justify-content: center;
   padding-left: 1em;
   padding-right: 1em;
   border-radius: 0px 0px 8px 8px; 
   box-shadow: 0 1px 10px rgba(0,0,0,0.3);     
}

.datospodio     
 { display: flex;
   justify-content:space-between;    
   width: 18em;
   margin-bottom: 0.5em;     
 }    
  
 .clubs3
 { display: flex;
   align-items:center; 
   justify-content:space-between;
   width: 18em;
   height: 2em;     
 }
 
.datospodio p
{  font-size:0.75em;
   font-weight:600;
   color:#2B4E72;
}

.subdatopodio
{  width: 5em;
   text-align: left;    
}

.subdatopodio2
{  display: flex;
   justify-content: space-between;    
   width: 10.5em;    
}

.subdatopodio3
{  display: flex;
   align-content: center;
   align-items:center;
   width: 7.2em;    
}

.subdatopodio3 h2
{  
   font-weight:600;
   font-size: 1em;    
}

.subdatopodio3 p
{  font-size:0.7em;
}

.subdatopodio4
{  display: flex;
   width: 10em;
   align-content: center;
   align-items: center;    
   justify-content:space-between;
   margin-right: 0.2em;    
}

.subdatopodio4 p
{  font-size: 0.9em;
}

.logoclub
{  display: flex;
   width: 2.5em;
   justify-content: center;    
}
/*-----------------------------*/

/*Estilo para pie de pagina*/
footer 
{   background-color: #2B4E72; 
    padding: 0.7em;
    margin:auto;
    margin-top: 3em;
    display: flex;
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    justify-content: center;
}

footer p
{   font-size: 0.4em;
    color: white;
    text-align: center;
}

/*Estilo par Landing en sus tamaños de pantalla*/

.presentacion
{  display: flex;
   justify-content: center; 
}
 
.presentacion img
{  width:20em;
   margin-left:6em;
}

.datoslanding p 
{  color:white;
   font-weight:400;
   font-size:1.1em; 
}  

.datoslanding i 
{  color:white;
   margin-right:1em;  
}  

.datoslanding a 
{  width:18em;
   height:3em;
}  

.datoslanding 
{  display: flex;
   flex-direction: column; 
}  

.datoslanding h1   
{  font-size:4em;
   color:white;
   font-weight:500;
   letter-spacing: 0.1em;
   line-height: 1em;
   margin-top:2em; 
   font-family: 'Muli', sans-serif;   
} 

/*====Pantalla de 600px o menos====*/
@media (max-width: 600px)  
 { .datoslanding h1   
   { font-size: 3em;
     font-weight:500;
     text-align: right;
   }  
   
   .datoslanding p 
   {  color:white;
      font-weight:400;
      font-size:0.9em;
      text-align:right; 
      width: 18em;
   }   
     
   .presentacion img
   {  width:16em;
      margin-left:1em;
      margin-right: 1.9em;   
   }   
     
   .datoslanding 
   {  display: flex;
      flex-direction: column;
      align-items:flex-end;
   }   
   
   .datoslanding a     
   { margin-top: 3em;
     width: 15em;     
   }
     
   .datoslanding a p     
   {  font-size:1.1em;
      width:auto;
   }
   
   .presentacion 
   { display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10em;   
   }
    
 }


/*====Pantalla de 340px o menos====*/
@media (max-width:340px)
 { .presentacion
   {  display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center; 
   } 
         
  .datoslanding h1   
   { font-size: 1.9em;
     font-weight:600;         
   }  
     
   .datoslanding p 
   {  color:white;
      font-weight:400;
      font-size:0.8em;
      text-align: center;   
   }      
   
   .datoslanding a p     
   {  font-size:1.1em;  
   } 
    
   .datoslanding 
   {  display: flex;
      flex-direction: column;
      align-items: center; 
   }         
   
   .presentacion img
   {  width:15em;
      margin-left:2em;
   }     
 }  

/*-----------------------------------*/

/*POPUP*/

#popup
{   position: absolute;
   	visibility: hidden;
   	opacity: 0;
   	margin-top: -556px;
}

#popup:target
{  	visibility:visible;
   	opacity: 1;
   	background-color: rgba(0,0,0,0.8);
   	position: fixed;
   	top:0;
   	left:0;
   	right:0;
   	bottom:0;
   	margin:0;
   	z-index: 999;
   	transition:all 1s;
}

.popup-contenedor
{  	position: relative;
    margin: 10% auto;
    padding: 2rem;
    background-color: #FFFFFF;
    border-radius: 10px;
    width: 90%;
}

.popup-contenedor h3
{  font-size: 0.8em;
   color: #2B4E72;
}

a.popup-cerrar
{  	position: absolute;
   	top:3px;
   	right:3px;
   	/*background-color: #333;*/
   	padding:7px 10px;
   	font-size: 20px;
   	text-decoration: none;
   	line-height: 1;
   	color:#223d58;
}

.gifok
{  width: 10em;
   margin-bottom: 1em;    
}

#popupok
{ 	position: absolute;
   	visibility: hidden;
   	opacity: 0;
   	margin-top: -556px;
}

#popupok:target
{  	visibility:visible;
   	opacity: 1;
   	background-color: rgba(0,0,0,0.8);
   	position: fixed;
   	top:0;
   	left:0;
   	right:0;
   	bottom:0;
   	margin:0;
   	z-index: 999;
   	transition:all 1s;
}

/*-----------------------------------*/

@media (min-width: 25em) {
    
    .pasador figure {
        width: 45%;
        margin: .125em;
    }
    
}