@import url('https://fonts.googleapis.com/css?family=Oswald:500,600,700');

@charset "utf-8";
* {box-sizing: border-box;
margin: 0;
padding:0;
font-family: sans-serif;
color: white}


#bodyindex {}
body { display: flex;
    flex-direction: column;
    background-color: #02011c;
    min-height: 100vh;}

header {display: flex;
    justify-content:space-between;
    background-color: rgb(9, 9, 38);
    align-items: center;}


header  h1 { text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size:1em;
    margin-left: .4em;
    font-weight: 500;}

#escudo {display: block;
    width: 2.2em;;
margin-left: 1em}

.logotipo {display: flex;
align-content: center;
justify-content: center;
align-items: center;}

.barraoculta {display: none;}

#barrasm {width: 2.5em; margin:.6em 1.2em .3em .5em;  
height: 100%;background-color: black;}

header nav ul {margin-top: 2em;}

header > ul { 
    display: flex;
    text-decoration: none;}

header > ul > li { 
    align-self:center;
    width: 2em;
    display: flex;
    
}

header ul li a { 
    text-decoration: none;
}

header li {list-style: none;
}


header nav {padding-top: 2em;
    background-color: rgba(0,0,0,0.95);
    color: white;
    position: fixed;
    right: -50vw;
    text-align: center;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .6s ease;
    z-index: 99999;  
     transition: all .6s ease;
}


header nav:target {
    right: 0;}

header nav a {color: white;  
     display: block;
    padding:.5em;
        font-family: 'Oswald', sans-serif;
    text-align: center;
}




header nav a:hover {
    color: white;
}



#x { text-decoration: none;
    margin: 0;
    font-size: 2em;
    position: absolute;
    right: 0;
    top: 0;
}



main { flex-grow:0;
display: flex;
flex-direction: column;
}

#banner {width: 100%; }


.subila {display: flex;
justify-content: center;
align-items: stretch;
height: auto;
margin: .6em}

.subila figure {
    position: relative;
   overflow: hidden;}


.subila figure img {width: 109%;
display: block;}

.subila div {background-color:#07DB84;
    padding-top: 1em;
}
.subila div a {text-decoration: none;
}

#subitutitu {font-size: 1em;
font-family: "Oswald";
color: black;}

.subila a h2 {font-family: "Oswald"; 
text-align: center;
    
    text-decoration: none;
padding: .4em;
align-self: center;}

.subila h2 span {font-size: 2em; text-decoration: none}

.subila figcaption {font-size: 1em;
    font-family: "Oswald";
    background-color: rgba(0, 0, 0, 0.78);
    color: white;
    padding: .5em;
    line-height: 1em;
    
    /* para salir del "flujo de información" del fondo 
       y colocase en una capa superior
       "anclada" en su "ascendiente" definido
       como origen de coordenadas */
    position: absolute;
    height: 100%;
    width: 100%;
    /* para que la parte superior quede
       apenas 1.5em visible (1ª línea) */
    top: calc(100% - 2em);
    transition: all .5s ease;
    
}


.subila figure:hover figcaption { 
    background-color: rgba(0, 0, 0, 0.73);
    top: 50%;
    transition: all .5s ease;
}



main nav ul { display: flex;
 margin-bottom: .9em;
    list-style: none;
align-content: center;
align-items: center;
    justify-content:space-around;
 flex-wrap: wrap;}

main nav ul li {
    height: 1em;
    display: flex;
}

main nav ul li a { 
    padding: 1em;
     width: 100%;
    height: 100%;
    background-color: rgb(9, 9, 38);
    color: white;
    text-decoration: none;
     font-weight: 400;
    display: flex;
    align-items: center;
   font-family: oswald;
    font-size: .8em;
   
}

main section img {width: 100%}


.noticias { background-color: black;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    ;
}


.noticias figure {flex-grow: 1;
    width:45.8%;
    /* para que cada figura sea
       "origen de coordenadas"
       de sus "descendientes" con 
       position: absolute */
    position: relative;
    
    /* para que se oculten
       sus "descendientes" con 
       position: absolute
       que se "salgan" de sus límites */
    overflow: hidden;
}

.noticias h3 { writing-mode: vertical-lr;
    transform: rotate(180deg);
font-family: "oswald";
background-color: #07DB84;
text-align: center;}



.noticias img {
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
    margin: 0;
}

.noticias figcaption {
    font-family: Oswald;
    font-size: 1.2em;
    background-color: rgba(0, 0, 0, 0.78);
    color: white;
    padding: .5em;
    
    /* para salir del "flujo de información" del fondo 
       y colocase en una capa superior
       "anclada" en su "ascendiente" definido
       como origen de coordenadas */
    position: absolute;
    height: 100%;
    width: 100%;
    /* para que la parte superior quede
       apenas 1.5em visible (1ª línea) */
    top: calc(100% - 2.3em);
    transition: all .5s ease;
    
}


.noticias figure:hover figcaption { 
    background-color: rgba(0, 0, 0, 0.73);
    top: 40%;
    transition: all .5s ease;
}


.noticias figure figcaption:last-of-type {position:absolute;
}


.noticias figcaption span { font-family: "oswald";
    font-weight: lighter;
    display: block;
    line-height: 1.2em;
    margin-top: .4em;
    font-size: 1em;
    color: #ddd;
}



.calen {display: flex; 
    margin-top: .3em;
    background-color: black;
 position: relative;
    height: 8.7em;
}

.calen h3 { writing-mode: vertical-lr;
    transform: rotate(180deg);
font-family: "oswald";
background-color: #07DB84;
text-align: center;}

.calen > img { position: absolute;
    display: block;
    width: 1.8em;
    left: 0;
  }


.calen div {display: flex;
justify-content: center;
align-content: center;
align-items: center;
    width: 100%;
margin: 0% 3%}

.calen div img:first-of-type {
    margin-right: .3em;
    margin-bottom: .5em;
    display: block;
width:4em}

.calen div img:last-of-type {display: block;
width: 4.5em;
margin-bottom: .5em;
margin-left: .2em;}


.calen div a { margin: 1em;;}

.calen div h2 { font-family: "Oswald", sans-serif;
    font-weight: 100;
    font-size: 1em;
text-align: center;}

#equipostitu {font-weight: 400;}
#guionseparador {margin: .3em;}

.calen div h2 span {font-family: "Oswald", sans-serif;}




/*****************fin de index*******************************/


/************************subituhistoria**************************/

.fondoperfil {background-color:rgba(7, 219, 132, 0.52)}

#fotoperfilazo {width: 5em;
border-radius: 4em;}

#Mauro {font-family: "oswald";
font-size: 1em;}

#subitu {background-color: #07DB84}

.subitubanner {  
    text-align: center;
 background-color: white;}

.subitubanner h1 { color: black;
font-family: 'Oswald', sans-serif;}

.subitubanner span { font-family: "Oswald";
    color:rgb(19, 138, 167);
font-size: 1.5em;
font-weight: 500;}

.subitubanner p { color: black; 
    font-weight: 500;
    line-height: 1.5em;
    font-size: 1.1em;
    padding: .5em 0em;
    margin: 0em .2em .5em .2em;
    font-family: 'Oswald', sans-serif;}

.advertencia div {display: flex;
justify-content: center;}

.advertencia {background-color:#02011c}
.advertencia p{font-size: 1em;color: white;}

.advertencia div h5 {color: rgb(19, 138, 167);
    background-color: white;
    font-family: "oswald";
margin: 0em 1em 1em 0;
padding: .4em;}


.ultpost { text-align: center;
background-color: black;
margin-top: ;}

.ultpost h2 {font-family: "Oswald";
font-weight: 100;}

.ultimodelapag { display: flex;
    flex-direction: column;
    justify-content: center;
}

.ultimodelapag img {width: 50%;\
justify-content: center;}


.slider img {display: block;}

.slider div figure { position: relative}

#userslider{text-align: center;
    border-radius: 0px 0px 10px 10px;
   padding-top: .2em;
    font-family: "Oswald";
    color: white;
    background-color: rgba(0, 0, 0, 0.62);
    position: absolute;
    top:0;
height: 2em;
width: 8em}

#likeslider {text-align: center;
   border-radius: 0px 0px 10px 10px;
border: 0px solid #000000;
   padding-top: .2em;
    font-family: "Oswald";
    color:rgba(7, 219, 132, 0.85);
    background-color: black;
    position: absolute;
    top:0;
    right: 0;
height: 2em;
width: 8em}


.slider div figure figcaption:last-of-type {font-family: "Oswald";
    text-align: center;
color: black;
background-color: rgba(7, 219, 132, 0.85);
 border: solid 2px rgba(0,0,0,0);
        border-radius: 25px 25px 0px 0px;
    color: white;
    padding: .4em;
    line-height: 1.7em;
    position: absolute;
    height: 100%;
    top: calc(100% - 2.8em);
    left: 0;
    right: 0;
    transition: all .5s ease;}

.slide div figure :hover figcaption{
    background-color: rgba(100,50,0,.5);
    border: solid 2px rgba(100,50,0,.6);
    border-radius: 5em 5em 0 0;
    padding: 1em;
    text-align: center;
    top: calc(100% - 5em)
    left: .5em;
    right: .5em;
    transition: all .3s ease-out;
}

.slider figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
}

.slider img {
    padding: 0;
border: none}
 

.ultimodelapag { justify-content: center;}

.nombredeperfil {display: flex; margin-left: 1em;

margin-top: 1.3em;
margin-bottom: .4em}

.nombredeperfil img {width: 2em; 
    display: block;
text-align: center;}

.ultimosposteos {  }

.ultimosposteos h3 {margin-left: .4em;
font-family: "oswald";
font-weight: 100;
}

.primerfotou { 
    display: flex; 
   justify-content: center;
    align-content: center; 
    width: 100%;
}


.primerfotou img {width: 100%;}


.flotante {width: 17%;
position: fixed;
bottom: 1em;
right: 41%;
opacity: 0.8;}

.flotante:hover {opacity: 1}

.descripcionfotos {display: flex;
    flex-direction: column;
    margin-left: .5em;
margin-right: .5em}

.descripcionfotos p{font-family: "Oswald";
 font-weight: 300;
font-size: 1em;
}

.columnasgaleria {display: flex; flex-direction: row;}

.columnasgaleria img {width: 5.3em;
    padding: 1em;
    background-color: black;
height: 100%;
}

.descripcionfotos h8 {margin-top: .3em;
font-family: "oswald";
   font-size: 1.2em;
    font-weight: 600;   
color:rgb(7, 219, 132)}
/************subituhistora******************/


 
 /* CLUB*/

#fondoblanco {background-color: white;}
#textonegro {color: black;}
#tituloclub {font-family: "Oswald" ;
    color:#ffffff;
   
    text-align: center;
    background-color: #00CC99;
font-weight:normal;}


.historia {
   display: flex;
flex-direction: column;
    align-items: flex-start;
 align-content:flex-start;
    justify-content:space-around;
}

.historia h1 {font-family: "Oswald";
    color:#3399CC;
    margin: 0.1em;
    margin-top: -0.05em;
 
font-size:5.5em;

}

.data {
    display: flex;
    flex-direction:column;
     justify-content:space-between;
    align-items: center;
    align-content:space-between;
    margin-top: -1em}


.data img {margin:1em;
  width:10em;
    margin-top: -1.5em;align-self: center;
}
.data p {font-family: "Oswald";
     font-style: normal;
    text-align: left;
   font-size: 0.9em;
    
    margin-top: -1.5em;

    padding: 1em;

}

  .data div {display: flex; flex-direction:column; align-content: center; justify-content: center; align-items: center ; margin: 0em .5em }

.data p span {font-family: "Oswald";
    font-weight: bold;
    color: black
}

.lineadeltiempo{display: flex;
width: 100%;
justify-content: flex-start;
    align-content: flex-start;
}

.lineadeltiempo h3 { writing-mode: vertical-lr;
    transform: rotate(180deg);
font-family: "oswald";
background-color: #090921;
text-align: center;}

.lineadeltiempo figure {display: flex; height: 100%;
    flex-direction: column;
    justify-content: center;
    
}



.lineadeltiempo figure img{
    
    
    width: 100%;

justify-content: space-between;
    align-content: flex-start;
}

.lineadeltiempo img{display: flex;
    width: 1em;  }

.trofeos{
    background-color:#090921;
    display: flex;
    justify-content:center;
    align-items:flex-start;
    flex-direction: column;
   
   
   
   }
.trofeos h2{font-family: "Oswald";
      align-content: flex-start;
    text-align: left;
    color:#3399CC;
    font-size: 2.5em;
    padding: 0.1em;
   margin-left:0.3em;
;}

.trofeos img{width:100%;
    padding-left: 1.1em;
    padding-right: 1em;
    display: block;
    padding-bottom: 1em;
   
    }

#clubremarcado {background-color: #07DB84}


 /* ACTIVIDADES*/
 



#otrosremarcado {background-color: #07DB84}



.bodyacti {background-color: #1687a8}
.todopatin {margin-bottom: 1em; background-color: black}
.patin {display: flex; position: relative}
.patin figcaption {font-family: "Oswald"; font-weight: 400;text-shadow: 2px 2px #000000;
    position: absolute; bottom: 1%; left: 2%; font-size: 5em }
.patin img {width: 100%;display: block;}
.patin2 {display: flex; width: 100%;align-content: center; align-items: center}
.patin2 div {display: flex; flex-direction: column;}
.patin2 div img {width: 0%; align-self: center;}
.patin2 div p {font-size: 1.1em;align-self: center;font-family: "oswald"; font-weight: 100; margin:.1em .7em .1em .9em}
.patin2 > img {width: 40%; height: auto;}

.todovoley {margin-bottom: 1em; background-color: #01011a}
.voley {position: relative}
.voley img {width: 100%;display: block;}
.voley figcaption {font-family: "Oswald"; font-weight: 400; text-shadow: 2px 2px #000000;
    bottom: 0; right: 1%; font-size: 5em; 
    position: absolute; }
.voley2 {display: flex; width: 100%; justify-content: space-between; align-items: center;}
.voley2 img:first-of-type {width: 45%; height:auto;}
.voley2 img:last-of-type {width: 12%;}
.voley2 p {font-family: "oswald";  font-size: .7em;margin: .5em 2em .5em 0em}
.voley2 p span {font-family: "oswald";color: #00CC99;}


.todoboxeo {background-color: #001000}
.boxeo {position: relative}
.boxeo figcaption {font-family: "Oswald";   text-shadow: 2px 2px #000000;
    position: absolute; bottom: 0%; left: 1%; font-size: 5em }

.boxeo img {width: 100%; position: relative; display: block;}
.boxeo2 {display: flex;justify-content: space-between;align-items: center}
.boxeo2 img:first-of-type {width: 45%; height: auto;display: block;}
.boxeo2 img:last-of-type {width: 12%}
.boxeo2 p {font-family: "oswald"; font-size: .7em;margin: .5em 2em .5em 0em}
.boxeo2 p span {font-family: "oswald";color: #00CC99;}





.formularioacti form{display: flex;
  
    padding:1em;

    flex-direction: column;
    align-content: center;
    align-items: center;
}
.formularioacti form h2{font-family: "Oswald";
    margin-bottom: 1em;
    width: 12em;
    text-align: center;
    background-color:#3399CC;
    padding: 0.3em;
        width:
}


.formularioacti form label{font-family: "Oswald";
font-weight: normal;}

.formularioacti form input{
    
    display: block;
    color: black;
    margin: 0.5em}

.formularioacti form textarea{
    border-radius: 1em;
    
    width: 20em;
    height: 10em;
    display: block;
    color: black;
    margin: 0.5em} 

.formularioacti form div {display: flex;}


.formularioacti form button{border-bottom-style:solid;
    border-bottom-width: thin;
    font-family: "Oswald";
    font-weight: bold;

    padding: 0.2em;
    background-color: #07DB84 ;
    font-size: 1.2em;
    display: block;
    color: black;
    margin-top: 1em;}



/* ACTIVIDADES*/

/*FORMULARIO SESION*/

.perfilparaeditar header {background-color: #07DB84}
.registro {margin-top: 2em;
text-decoration: none;}

.registro a {color: black;
    background-color:#07DB84;
padding: .3em .8em;
text-decoration: none;
font-family: "oswald";
    font-size: 1.2em;
font-weight: 600}

.fondofomulario {background-color: #090921}

.fondofomulario main {display: flex;
flex-direction: column;
align-items: center;
    justify-content:center;
height: 50vh;
}

.fondofomulario main section {justify-content: center; align-content: center; align-items: center;}

.fondofomulario main  img{ align-self: center; 
    width: 30%; height: auto;
    margin-top: 15em;
    margin-bottom: 2em;
}


.formulario form{display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}



.formulario form label{font-family: "Oswald";
font-weight: normal;}

.formulario form input{
    
    display: block;
    color: black;
    margin: 0.5em}

.formulario form button{border-bottom-style:solid;
    border-bottom-width: thin;
    font-family: "Oswald";
    font-weight: bold;
    width: 7em;
    padding: 0.2em;
    background-color: #07DB84 ;
    font-size: 1.2em;
    display: block;
    color: black;
    margin-top: 1em;}

#logoformulario { height: 150px;
    margin-top: 18em;
    margin-bottom: 2em;
width:170px;}

/* SESION*/


.editarperfil main img { width:10em;
}







/****************FUTSAL*********************/

.futsaldestacado {background-color: #07DB84}


.menumasculino { display: flex;
    justify-content: ;
    width: 100%;
    height: 12.4em;
    background-image: url(../imagenes/MASCULINO.jpg);
background-size:cover;
background-repeat: no-repeat}

.menumasculino h1 {
    font-family: "oswald";
    padding-left:.2em;
font-size: 3em;
line-height: 1em;
    background-color: rgba(13, 5, 75, 0.7);
    color: white;}


.menumasculino ul  { display: flex;    
    list-style: none;

}

.menumasculino ul li {display: flex;
justify-content: center;
    align-items: flex-end;
}
.menumasculino ul li a { font-family: "oswald";
    ;display: block;
    margin: .6em;
    font-size: .96em;
    align-items: center;
    padding: .3em;
    color: #091c5a;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    text-decoration: none;}

.menufemenino { display: flex;
    justify-content: ;
    width: 100%;
    height: 12.4em;
    background-image: url(../imagenes/FEMENINO.jpg);
background-size:cover;
background-repeat: no-repeat}

.menufemenino h1 {
    font-family: "oswald";
    padding-left:.2em;
    padding-right: .6em;
font-size: 3em;
line-height: 1em;
    background-color: rgba(157, 0, 157, 0.55);
    color: white;}


.menufemenino ul  { display: flex;    
    list-style: none;

}

.menufemenino ul li {display: flex;
justify-content: center;
    align-items: flex-end;
}
.menufemenino ul li a { font-family: "oswald";
    ;display: block;
    margin: .6em;
    font-size: .96em;
    align-items: center;
    padding: .3em;
    color: #091c5a;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    text-decoration: none;}


.menujuvenil { display: flex;
    justify-content: ;
    width: 100%;
    height: 12.4em;
    background-image: url(../imagenes/JUVENIL.jpg);
background-size:cover;
background-repeat: no-repeat}

.menujuvenil h1 {
    font-family: "oswald";
    padding-left:.2em;
    padding-right: .33em;
font-size: 3em;
line-height: 1em;
    background-color: rgba(5, 75, 40, 0.7);
    color: white;}


.menujuvenil ul  { display: flex;    
    list-style: none;

}

.menujuvenil ul li {display: flex;
justify-content: center;
    align-items: flex-end;
}
.menujuvenil ul li a { font-family: "oswald";
    ;display: block;
    margin: .6em;
    font-size: .96em;
    align-items: center;
    padding: .3em;
    color: #091c5a;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    text-decoration: none;}

.futsalmenu a {text-decoration: none;}

/******************fUtsal*****************/



/******************MASCULINO********************/

        .botonesfutsal {display: flex; 
                        margin: .6em 0em 1.3em 0em}

        .botonesfutsal li a{}

        #noticiastitulo {text-align: center;
            font-family: "oswald";
            font-weight: 500;
            background-color: white;
            color: rgb(7, 219, 132)}


        .noticiasm {margin-bottom:2em;
            margin-top: .5em;}

        .noticiasm div {display: flex;}

        .noticiasm div a {text-decoration: none;
        margin-top: .12em;
        margin-bottom:.2em; 
        color:rgb(7, 219, 132);
        font-weight: 700;
        font-family: "oswald"}

.noticiasm div img { margin: 0em 1em;
    width:35%;
height: auto;}

.noticiasseparadas {align-items: center;
justify-content: center; margin-top: 1em; }

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

.textonoticia h3 {font-family: "oswald";}
.textonoticia h4 {font-family: "oswald";
    font-weight: 300;
    font-size: .8em;
 color:rgb(7, 219, 132); }

.textonoticia h4 span {font-family: "oswald";
margin-left: .4em;
font-size: .8em;}

.textonoticia p { background-color: black;
    margin-right: 1em;
    font-family: "oswald";
    font-size: .9em;
font-weight: 300}


.plantelm {display: flex;
align-items: center;}

#titulares{background-color:rgb(7, 219, 132);
color: white;
text-align: center;
margin-bottom: 0;}
.plantelm img {width: 60%}

#Pablo{ margin-top: 1em; text-decoration: none;}
.plantelm div ul li {margin: 2em 0em;
    text-decoration: none;
 list-style: none;
font-family: "oswald";
font-size: 1.2em;}


.plantelm div ul a {font-family: "oswald"; 
    text-decoration:none; }

.plantelm div ul li{color:rgb(7, 219, 132) }

#suplentes {margin: .0em 1em 1em;color: white;
font-size: 1.2em;
font-family: "oswald";
font-weight: 300}

.dorsales {font-size: .8em;}
.dorsalestitu {font-family: "oswald";color: white;}

.supl h2 span {font-family: "oswald"; color:rgb(7, 219, 132);}


.estadisticasM h3 {text-align: center;margin: 1em 0em;}


.tabladeposiciones table {width: 100%;
background-color: black;
border-collapse: collapse;    
text-align: left;}



.tabladeposiciones th, td {
padding:5px; 
font-family: "Oswald";
font-weight: 400;
}

.tabladeposiciones thead { background-color:rgb(7, 219, 132);}
.tabladeposiciones thead th {color: black;}
.tabladeposiciones tr:nth-child(even) {background-color: #000034}

.goleadores table {width: 100%;
background-color: black;
border-collapse: collapse;    
text-align: left;}

.goleadores th, td {
padding:5px; 
font-family: "Oswald";
font-weight: 400;
}

.goleadores thead {background-color: rgb(7, 219, 132);}
.goleadores thead th {color: black;}
.goleadores tr:nth-child(even) {background-color: #000034}

.remarcados {background-color: rgb(7, 219, 132)}
/***********************MASCULINO********************/


/************************PABLO**********************/
.organizadore {display: flex;
justify-content: space-around; margin: .5em 1em 1em 1em;}

.organizadore { background-color: black}
.organizadore h2 { font-family: "oswald"; font-size: 1.4em; text-align: center;background-color: black; padding: 0em .5em}
.organizadore h2 span {color: rgb(7, 219, 132);  font-family: "oswald";}
.fotoficha {width: 30%; margin: 1em 1em 0.5em 1em;  border: rgb(7, 219, 132) 5px solid; }
.fichaa {display: flex; align-content: center; justify-content: center; align-items: center;}
.infoficha h2 {font-family: "oswald"}
.infoficha p {font-family: "oswald"; color: rgb(7, 219, 132);}


.tablaficha table {width: 100%;
background-color:rgb(7, 219, 137);
border-collapse: collapse;    
text-align: left;}

.tablaficha th, td {
padding:5px; 
font-family: "Oswald";
font-weight: 400;
}

.tablaficha thead {background-color: black;}
.tablaficha thead th {color:rgb(7, 219, 137);}
.tablaficha tr:nth-child(even) {background-color: #000034}
.totaltabla td{color:rgb(7, 219, 137); font-weight: 500; font-size:  }
.volverplantel a { text-decoration: none; background-color:rgb(7, 219, 137); padding: .2em 1em; font-family: "oswald"; }
.volverplantel {text-align: center; margin-top: 2em;}
/***************************PABLO************/

/***********************FEMENINO********************/

.bodyfem {background-color: #b9005c;}

/************************FEMENINO***************/

.bodyjuv { background-color:rgb(0, 66, 108)}

#hpibe1, #hpibe2, #hpibe3 {color: black;}


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

.textonoticiaf h3 {font-family: "oswald";}
.textonoticiaf h4 {font-family: "oswald";
    font-weight: 300;
    font-size: .8em;
 color:rgb(7, 219, 132); }

.textonoticiaf h4 span {font-family: "oswald";
margin-left: .4em;
font-size: .8em;}

.textonoticiaf p { background-color: white;
    color: black;
    margin-right: 1em;
    font-family: "oswald";
    font-size: .9em;
font-weight: 300}





.tabladeposicionesf table {width: 100%;
background-color: #4ab4b4;
border-collapse: collapse;    
text-align: left;}



.tabladeposicionesf th, td {
padding:5px; 
font-family: "Oswald";
font-weight: 400;
}

.tabladeposicionesf thead { background-color:rgb(0, 0, 0);}
.tabladeposicionesf thead th {color: rgb(7, 219, 132);}
.tabladeposicionesf tr:nth-child(even) {background-color: #000034}

.goleadoresf table {width: 100%;
background-color: #4ab4b4;
border-collapse: collapse;    
text-align: left;}

.goleadoresf th, td {
padding:5px; 
font-family: "Oswald";
font-weight: 400;
}

.goleadoresf thead {background-color: black;}
.goleadoresf thead th {color:rgb(7, 219, 132);}
.goleadoresf tr:nth-child(even) {background-color: #000034}




/***********************FEMENINO***************/



/*+ SESION **/

.perfilparaeditar main {margin-top: 3.5em}

#mauro2 { margin-top: 45%;
    width: 30%; border-radius: 10em;}
.perfilparaeditar main{display: flex;
flex-direction: column;
align-items: center;
    justify-content:center;
height: 50vh;
}

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


.cambiarfoto label {  display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center; 
                font-family: "Oswald", serif;
    font-size: 1.2em;  }
.cambiarfoto input {  }
.editarcampos label {display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-family: "Oswald", serif;
                    font-size: 1em;
                    color: white;
}

.editarcampos { margin-top: 1em; display: flex; flex-direction: column; justify-content: center; align-content: center;
align-items: center;}
.editarcampos input {color: black;}
.editarcampos textarea {color: black;}
#guardarcambios {margin-top: 2em;color: black; font-family: "oswald"; background-color: rgb(7, 219, 132); border: none;padding: .4em}

#labio {}

/********editarperfil**********/

/**PERFIL USUARIO**/ 

#perfildelusuario {display: flex;
                    flex-direction: column;}


.datosperfil {  display: flex;
                margin: 4%;
                flex-direction:row;
                justify-content: center;
                align-items: center;}


.datosperfil div {margin-left: 1em;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-content: center;}

#perfildelusuario main h2 {font-family: "Oswald", sans-serif;
                           color: rgb(7, 219, 132); 
                            text-align: center; 
                           font-size: 1.3em;}

#perfildelusuario main p {font-family: "Oswald", sans-serif;
                           color: white;
                            font-size: .9em;}


.datosperfil a {text-decoration: none;}
.datosperfil a h3 { text-align: center; font-size: .9em;font-weight: 400; font-family: "oswald";
    background-color: #08a2af; margin-top: .3em}


.tusfotos {text-align: center;
                font-family: "Oswald", sans-serif;
               margin-bottom: .3em;
                color: rgb(9, 9, 38);
                background-color: #08a2af}

.tusfotos h4 {font-family: "oswald"; font-weight: 400;
 font-size: 1.2em;}


.fotodeperfil {width: 40%;
border-radius: 5em;}

.galeria {display: flex;
          flex-direction: row; 
          justify-content: center;
          align-items: center;} 

.galeria img { margin: .3em;
                 width: 110px;
                 height: 110px;
}
 
.redessoci li {}
.redessoci { display: flex; flex-direction: row;
    text-decoration: none; list-style: none; justify-content: center;margin-top: .4em}
.redessoci img {width: 2em;
margin: 0em .4em;}


div.gallery img { 
  width: 100%;
  height: auto;
}
/***************PERFIL USUARIO**********/


/***********************GALERIA****************/



#galedestacado {background-color:rgb(7, 219, 132)}

video {width: 90%; height: auto; align-self: center;}

.titulogaleria {font-family: "oswald";
    font-size: 1.5em;
font-weight: 200;
    margin-top: .4em;
text-align: center;
color: rgb(27, 182, 203);
margin-bottom: .4em;}

.galeriadelclub img {width: 100%;
height: auto;}

.galeriadelclub div {}

.galeriadelclub {text-decoration: none;
text-align: center;}

.galeriadelclub h2 {font-size: 1em;
font-family: "oswald";
font-weight: 400;
  
    margin-bottom: .5em;
color:rgb(7, 219, 132);
}

.galeriadelclub  h2 span {font-family: "oswald";
font-weight: 100}


.galeriadelclub2 {text-align: center;}

.backtogaleria {text-align: center;
margin: 2em;
font-family: "oswald";    
background-color: black;
text-decoration: none;
color: rgb(7, 219, 132);}



.fotorama {margin: 0em 2em 3em 2em;}

.identificador {text-align: center; font-family: "oswald";
background-color: rgb(7, 219, 132);
font-weight: 400;}


/*****************************gaeria***********************/

/***************NOTICIA*******************/

.remarcadonoti {background-color: rgb(7, 219, 132)}
.botonesennoti ul { display: flex; margin-top: 1em; justify-content: space-around;}
.botonesennoti a {text-decoration: none; padding: .2em; font-family: "oswald"; background-color:  }
.botonesennoti li { list-style: none;}

.noticiabody div h5 {margin: 1em 0em 0em 1em;  color:rgb(7, 219, 132); }
.mainnoti { margin: 1em;
    display: flex;
flex-direction: column;}

.mainnoti h1 {font-family: "oswald"; margin: 0em 0em .3em 0em}
.mainnoti .epig {font-family: "oswald"; font-weight: 300;font-size: 1.3em; color: #b9b9b9; margin-bottom: .5em;}

.mainnoti img {width: 100%;  display: block;}

.mainnoti figure {position: relative}

.mainnoti figcaption {font-family: "Oswald"; font-weight: 100;
    padding: .4em;
    line-height: 1.7em;
   bottom: 0;
    left: 0;
    right: 0;
    position: absolute; 
 background-color: rgba(0, 0, 0, 0.57);}

.divnoti {margin: .5em;
background-color: black}
.divnoti h3 {font-family: "oswald"; font-weight: 400;}
.divnoti h4 {font-family: "oswald"; font-weight: 200;}

.parrafonoti {font-family: "oswald"; font-weight: 200;letter-spacing: .04em; font-size: 1.2em; }



/********************NOTICIA*********************/

/***********************FOOTER****************/
footer {display: flex; flex-direction: column;
    background-color: black; margin-top: 1em;}

footer p{font-family: "Oswald";
    padding: .3em 1em 1em 1em;
    text-align: center;
    font-weight: lighter;
    font-size: 1em;
    background-color: #3399CC;}

.redesfooter {display: flex; list-style: none; justify-content: center; align-content: center; align-items: center; }
.redesfooter img {width: 3em; display: block; background-color:black; margin: .2em .5em}

footer li h7 {align-self: center; text-align: center; font-family: "oswald"; color: rgb(7, 219, 132); margin-bottom: .5em; font-weight: 400; }

footer p span {color: black; font-family: "oswald"; font-weight: 500}
footer h8 {  font-family:"oswald";color: rgb(7, 219, 132);}


/*********************FOOTER***************************/

/**********************PANTALLADESUBIDA**************************/
.confi div {display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;
 }


.confi div label { font-family: "oswald";
margin-top: 1.2em}
.confi div input {margin: 1em;}

.confi div textarea {color: black; margin: .5em}

.subir a {list-style: none; text-decoration: none;}
.subir a h1 {background-color:  rgb(7, 219, 132); margin: 1em 35% ; font-size: 1.3em; font-family: "oswald"; text-align: center}
/**********************PANTALLADESUBIDA***********************/











@media (min-width: 35em) {
    
    /*****************header**************/
    header > a {display: none;}
    .barraoculta {display: flex; flex-direction: row; 
    }
    .barraoculta ul {display: flex; justify-content: space-between;}
    .barraoculta ul li {margin: 0em 1.6em}
    .barraoculta ul li a {font-family: "oswald"; color: rgb(7, 219, 132) }
    #barrasm {display: none;}
    
    .logotipo h1 {font-size: 1.8em}
    #escudo {width: 3em;
    margin:.1em 0em .1em 6em   }
    
   
    header {
    width: 100%;
    z-index: 999999999999;}
    
    header nav ul li a {font-size: 1.6em;}
    
    #barrasm { margin-right: 6em; width: 3em;}
    /***************header***********/
    
    /************HOME*****************/
      #banner { margin-top: 3em;
        width: 100%; 
    height: 400px;
        object-fit:contain  ;
        align-self: center;}
    
    .subila {width: 100%; padding: 0% 20% 00% 20%; align-self: center; }
    
    .subila div {width: 100%; background-color: rgb(7, 219, 132);}
    
    .subila div h2  {font-size: 3em; margin: 20% 20%; align-self: center; align-content: center; justify-content: center; }
    
    .subila img { width: 100%;
        height: 100%}
    .subila figcaption {font-size: 1.6em;}
    
    .noticias {width: 50%;
        align-self: center;}
    
    .noticias h3 {font-size: 1.6em}
    
    .calen {width: 70%; align-self: center;
}
    
    .calen h3 {font-size: 1.6em; }
    .bodyindex main {display: flex; flex-direction: row;}
    
    
    .calen div img:first-of-type {
    margin-right: 2em;
    margin-bottom: .5em;
    display: block;
width:4.5em}

.calen div img:last-of-type {display: block;
width: 5em;
margin-bottom: .5em;
margin-left: 2em;}
    
    .calen div h2 {font-size: 1.4em}
    
    .noticias figcaption {
    font-family: Oswald;
    font-size: 2.2em;
    background-color: rgba(0, 0, 0, 0.78);
    color: white;
    padding: .5em;
    position: absolute;
    height: 100%;
    width: 100%;
    top: calc(100% - 2.3em);
    transition: all .5s ease;
    
}
    
    
    
    
    
    .bannerfinal {width: 50%;
    align-self: center}
    
  /**********************home****************/

    /*************subitu********************/
    
    .flotante img {width: 5em}
    .ultpost h2 {font-size: 2em;}
    .slider img {width: 100%}
    .slider {width: 50%}
    
    .primerfotou {width: 90%}
    .columnasgaleria {width: 90%}
    .ultimosposteos {display: flex; flex-direction: row;}
    .nombredeperfil {width: 100%;}

    /****************subitu***********/
    
    /******************noticia*************/
    .minititulom {margin-left: 17em}
    .noticiabody h5 {font-size: 1.2em; }
    .mainnoti figure img {height:35em;
    object-fit:scale-down; background-color: black}
    .mainnoti figure figcaption {font-size: 1.2}
    .mainnoti {margin: 3em 18em}
    .mainnoti h1 { font-size: 3.7em; margin-bottom: .2em}
    
   .mainnoti .epig  {font-size: 1.4em} 
    .divnoti {margin-bottom: 1em;}
    .divnoti h3, h4 {margin-left: 1em}
    
    /*****************noticia******************/
    /*******************GALERIA********************/
    
    video {width: 60%; margin-bottom: 1em}
    .albumes {display: flex; width: 100%; }
    .galeriadelclub {width: 40%;justify-content: center; align-items: center;align-content: center; margin: 0% 5% 10% 5%; height:auto;}
    
    .fotorama {width: 100%; margin: 0}
    .galeriadelclub h2{font-size: 1.2em}
    
    
    .titulogaleria {margin-top: 1em;}
    
    /************************GALERIA******************/
    
    /***********************cLub***********************/

    .data div {display: flex; flex-direction: row; align-content: center; justify-content: center; align-items: center ; margin: 1% 7% }
    .data h1 { font-size: 7em; margin-top: .3em; text-align: }
    .data div img {width: 10em}
    .data div p {font-size: 1.5em}
    .lineadeltiempo figure  {width: 100%; height: 100%}
     .lineadeltiempo figure img {display: block; width: 100%}

    .lineadeltiempo {width: 100%; height: 100%} 
    .lineadeltiempo h3 {font-size: 1.5em;}
    .trofeos img  {width: 31%; align-self: center;  margin: 2em 0em 0em 2em; }
    .trofeos h2 {text-align: center;align-self: center; font-size: 4em}
    .trofeos {display: flex; flex-direction: row; justify-content:center}
    #tituloclub {font-size: 2em}
    
    
    
    
    
}