@charset "utf-8";
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

body {
    font-family: 'Roboto', sans-serif;
}

img {
    max-width: 100%; 
}


ul{
    list-style: none;
}

    
/*SLIDER*/ 
.slider {
	width: 100%;
	margin: auto;
	overflow: hidden;
    position: relative;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
    animation: cambio 20s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none; 
    
}

.slider img {
	width: 100%;
}

@keyframes cambio {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}    
    
/**.overlay {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(61,164,66,1) 100%);
  height: 100%;
  width: 100%;
  opacity: .5;
  top: 0;
  left: 0;
  position: absolute;
  padding: 0;
  transition: opacity .5s;
}**/

.slider_texto{
    position: absolute;
    bottom: 10em;
    padding: 1.1em;
    background-color: rgba(22,80,37,.7);
    color: white; 
    margin: 15px;
    
}  

#slider_texto{
    position: absolute;
    margin: 12px;
    bottom: -9em;
    background-color:black;
    padding: 1em;
}




    
/* NOTICIAS HOME */
#noticias_home{
    margin: 15px;
}
.noticias{
    position: relative;
    margin: 15px;
}

.noticias img{
        display: block;
    }    
.figcaption{
    background-color: rgba(0,0,0,.8);
    color: #9A895B;
    padding: 1.5em;
    position: absolute;
    bottom: 0;
}
#figcaptiontitulo{
    font-weight: 1000;
}

.figcaption span{
    display: block;
    font-size: .75em;
    color:white;
    padding-top: .7em;
    border-top: solid #9A895B 1.5px;
    font-weight: 100;
}

.material-icons {
    font-size: 30px;
    color: white;
}
    
    
    
    
   
/* NOTICIAS HTML */
   
.noticiashtmltitulo{
    background: #5FAD5D;
    color: white;
    padding: .5em;
    margin:1em;
    }
    
.noticiasarticulopp{
    margin: 1em;
    border-bottom: 1.5px solid #165025;
    padding-bottom: 1em;
    
    } 
.noticiasarticuloppfutbol{
    text-transform: uppercase;
    margin-top: 1em;
    color: #9A895B;
    font-weight: bold;
    font-size: 5.0vw;
}
      
.noticiasarticulopp img{
    height: 100%;
    width: 100%;
    margin-bottom: 1em;}

    
#futboladultos{
    text-decoration: none;
    color: black; 
    font-weight: 400;
        font-size: 14px;
    padding-top: .5em;
    color: black;
}
#noticiasarticuloppparrafo {
   color: darkgray;
    font-size: 5vw;
    }    
    
.noticiacontenedor{
    margin: 1em;
    overflow: hidden;
    border-bottom: 1.5px solid #165025;
    padding-bottom: 1em;
    padding-top: 1em;

}
.noticiaimg{
  width:40%;
  float: left;
  margin-right: 1em;
}
  
.noticiatexto{
    display: flex;
    flex-direction: column;
    font-size: 4vw;
    line-height: 1.3;
}
    
.noticiatextotitulo{
    text-transform: uppercase;
    margin-bottom: 1em;
    color: #9A895B;
    font-weight: bold;
    font-size: 5.0vw;
}
.noticiatextoparrafo{
        color: darkgray;
}
    
.noticiatexto a{
    text-decoration: none;
    color: black; 
    font-weight: 400;
    font-size:14px;
    padding-top: .5em;
    color: black;  
}  

#seguirleyendo{
    text-decoration: none;
    color: black; 
    font-weight: 400;
    font-size:17px;
    padding-top: 5em;
    color: black;  
}







/* NOTICIAS DETALLE*/
    
.noticiadetalle{
   padding: 1.5em 1em 2em 1em;
}  
    
#noticiadetalleparrafo{ 
    color: grey;   
}
    
.noticiadetalle h2{
   color:#9A895B;
}   
.noticiadetalle p{
    font-size:5.5vw; 
    padding-bottom: 1em;
}  
.noticiadetalle img{
        width: 10;
    }   

#noticiadetalleparrafodos{
    font-size:1.2em;
    padding-top:1em;
    
    }   
.noticiadetallemira{
    margin: 1em;
    border-left: 1.5px solid #9A895B;
    padding-left: 1em;
    padding-bottom: 1em;
    }

.noticiadetallemira span{
        font-size: 1.3em;
        color:#9A895B;
        font-weight: bold;  
}   
 #reloj{
        color:#9A895B; 
 }  
.noticiadetallereloj{
        display: flex;
 
}  
.noticiadetallereloj p{
        padding-left:.5em;
        color:#9A895B;
        font-size: .9em;
        margin-top: .3em;
}   
    
    
    
     
    
    
    
    
/* ULTIMOS RESULTADOS */

.ultimosresultados{
    background: #5FAD5D;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: .5em;
    align-items:center;   
}
.ultimosresultados a{
    text-decoration: none;
    color: white;
}
.ultimosresultados1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1em;
}

.logosultimosresultados{
  width: 70px;
} 
#logosamientoultimosresultados{
        height: 70px;
    }
#ultimosresultadosp{
        font-size: 36px;
    text-align: center;
}    
    
.logoysapam{
        text-align: center;
}
#ultimosresultadosborde{
        border-top: solid #9A895B 1.5px;
}
#tituloultimosa{
        text-align: center;
        font-size:1em;
        padding-top: .8em;
        font-weight: bold;
}    
#tituloultimosb{
        text-align: center;
        font-size:1em;
        padding-top: 2em;
        font-weight: bold;
} 
        
.resultadoss{
    padding: .5em .5em .2em .5em;
    margin: 1em 1em .2em 1em;
    display: flex;
    justify-content:space-between;
    font-weight: bold;
}
.fecha{
    padding: .5em;
    margin: 0em 0em 0em 0em;
    display: flex;
    justify-content:space-between;
    font-weight: bold;
    background-color: rgb(154, 137, 91);
    color: white;
}
#fecha{
    margin: 0em  0em 0em 0em;
    color: #ffffff;
}
#torneo{
    display: flex;
    justify-content:flex-start;
    background: #5FAD5D;
    color: white;
     padding: .3em;
    margin: 0em 0em 0em 0em;   
}
.torneo{
  border-style:groove;
  border color: #5FAD5D;
  margin: 3em 1.3em 1em 1.3em;
}
.divisiones{
  display: flex;
}

#infopartido3{
    display: flex;
    justify-content:space-around;
    background: #5FAD5D;
    color: white;
     padding: .5em;
    margin: 1em;
}
 
    
    
 

    
/* AGENDA HOME */
.agenda{
   box-shadow: 1px 1px 11px -2px #000;
    margin: 15px;
    padding-bottom: .5px;
}
.agendasinsombra{
    margin: 15px;
    padding-bottom: .5px; 
}
.meses{
    display: flex;   
}
.meses strong{
    color: #5FAD5D;
    
    }
.stronglink{
    text-decoration: none;
    color: #5FAD5D;
}
.mesesfechas{
  font-weight: bold;
margin-right: 2em;
}
    
.mesescolor{
color:grey;     
}    
 

    
    
    

/* AGENDA HTML */
section div h3 a{
    text-decoration: none;
    color: white;  
}
    
.botonagenda{
    height: 25px
}
#mesagenda{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em; 
    background:#9A895B;;
    color: white;
    padding: .3em;
    font-weight: bold;
    font-size: 5.0vw;
}
    
h4{
    font-size: 25px;
}

.meses{
    display: flex;
    padding: .5em;
    margin: 1em;
    font-size: 15px;
}
.mesesagenda{
    display: flex;
    padding: .5em;
    margin: 1em;
    font-size: 15px;
    justify-content:flex-start;
}

.mesagenda{
    display: flex;
    align-content: space-around;
    
}
#infopartido{
    display: flex;
    justify-content:flex-start;
    background: #5FAD5D;
    color: white;
     padding: .5em;
    margin: 1em;
    
}
.actividad{
    margin: 0em  0em 0em 1em;
    
}
.infopartido2{
    margin: 0em  0em 0em 1.5em;
    display: flex;
    justify-content:flex-start;
    font-weight: bold;
}
#jugadores{
    margin: 4em  0em 0em 0em;
    color: #9A895B;
}

#sede{
    margin: 1em  0em 0em 1.5em;
    font-size: 1.3em;
    font-style: bold;
    margin-bottom: 1em;
}

H5{
    margin: 0.4em  0em 0em .8em;
    display: flex;
    justify-content:flex-start;
    font-weight: bold;
    font-size: 35px;
    color: #5FAD5D;
}

.tablajugadores{
    padding: .5em;
    margin: 1em;
    display: flex;
    justify-content:space-between;
    font-weight: bold;
    background-color: rgb(154, 137, 91);
    color: white;
}

#nombrea{
    margin: 0em  0em 0em 2em;
    color: #ffffff;
}
#numeroa{
    margin: 0em  2em 0em 0em;
    color: #ffffff;
}

.jugadores{
   padding: .3em 4em 0em .5em;
    margin: .3em 1em 0.3em 1em;
    display: flex;
    justify-content:space-between;
    font-weight: bold;
}

ul{
    text-decoration: none;
    list-style: none;
}


#agenda{
    text-decoration: none;
    list-style: none;
    display: flex;
    align-content: space-around;
}





    
/* INICIO SESION */
    
.iniciodesesion{
      height:100%;
      width: 100%;
      background-color: #161616;
      padding-bottom: 40px;
      padding-top: .1px;
}  
#iniciosesion {
  margin: 6em 0rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
    
#titulo{
 font-size: 25px;
 font-weight: bold;
 color: white; 
 text-align: center;
}
    
.formcontact{
 margin: 1em 0rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: white;   
}

.iniciodesesion label{
        padding: 1.5em;
    padding-bottom: .6em;
        text-align: center;
}

.formcontact button{
        margin-top: 35px;
       margin-left: 17px;
    font-weight: bold;   
}
    
#iniciodesesionp{
        padding: 20px;
    
} 
    
.iniciodesesion input{
        padding: .5em;
}
 
#resgistrate{
    text-decoration: none;
       color: #5FAD5D;
    font-weight: 400;
    font-size: 14px;
    padding-top: .5em;
    
}    
    
    
    






/* EL CLUB */ 
.parrafoelclub{
    margin: 1em;
    font-size:1em;
}
.ulelclub{
    list-style:circle;
    padding-left: 3.5em;
    padding-bottom: 20px;
}
    
.club_parrafos{
     line-height: 1.4;
    margin-top: .7em;
}   
    
 



    
/* GALERIA*/
    
.galeria {
   /** padding-bottom: 2em;**/
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.galeria h3 {
    width: 100%;
    background: #5FAD5D;
    color: white;
    padding: .5em;
    margin: 1em;
}

.galeria figure {
    width: 45vmin;
    margin: .125em;
    position: relative;
    overflow: hidden;
}

.galeria figcaption {
    background-color: rgba(0,0,0,.5);
    color: white;
    padding: .5em;
    line-height: 1em;
    position: absolute;
    height: 100%;
    top: calc(100% - 1.5em);
    transition: all .5s ease;   
}
    .galeriaicono{
        position: absolute;
        
}
#iconosverdes{
        color:white;
        background-color: rgba(0,0,0,.5);
        border-radius: 50%;
        margin-top: 10px;
        margin-left:120px;
        box-shadow: 5px 10px 18px #888888;
} 
    
    
.galeria figure:hover figcaption {
    background-color: rgba(0,60,60,.5);
    top: 50%;
    transition: all .5s ease;
}

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


.textos {
    padding: 1em;
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
}

.textos > * {
    margin-bottom: 1em;
}

.textos > div h4 {
    background-color: rgba(150,200,150,.75);
    padding: .25em;
    margin-bottom: .5em;
    position: sticky;
    top: 0;
} 

.subir {
    text-decoration: none;
    color: darkcyan;
    font-weight: bold;
}

.subir:hover {
    text-decoration: underline;
}
  
    
    
    
    
    
/* GALERIA ALBUM*/
 
.descripalbum {
    display: flex;
    justify-content: center;
    padding: 0;
    align-content: center;
}

.vistaalbum {
    padding: 1em;
}

.vistaalbum img {
 width: 45vmin;

}

.galeriaalbumtitulo{
    text-transform: uppercase;
    margin-top: 1em;
    color: #9A895B;
    font-weight: bold;
    font-size: 5.0vw; 
    margin: 1em;
}

    .descripalbum{
        margin: 1em;
    }    
    
 .video{
   
     text-align:center;
    } 
.video{
    color:darkgray;
  margin-left: 1.8em;
    margin-right: 1.8em;
    }
    #videoparrafo{
        margin-bottom: 1.5em;
    }   





/* CONTACTO */
   
.mapaiframe {
    display: block;
    width: calc(100vw - 2rem);
    height: calc(1 * 100vw);
    max-width: 800px;
    max-height: 600px;
    margin: 1rem;
    border: solid 2px #17635a;
    box-shadow: 0rem 0rem 0.7rem 0.1rem #d9d9d9; 
}
    
.mapaiframedireccion{
        font-style: bold;
}
.contactodireccion1{
    margin-left: 1em;
    margin-bottom: .5em;
    font-weight: 900;
    color: #5FAD5D;
    font-size: 16px;
}    
    
.contactodireccion2{
    margin-left: 1em;
    display: flex;
    align-items: center;
    margin-bottom: 1em;
   
}  
    
  
#ubicanos{
        margin-top: 2em;
    }    
.bodycontacto{ 
    background: #e8e8e8;
}
    
.container h3{
  margin: 0 auto;
  max-width: 400px;
  width: 90%;
  background: #5FAD5D;
  color: white;
  padding: .5em;
  margin: 1em;
    margin-top: 2em;
}

.nameContainer,
.mailContainer,
.mesContainer {
  padding: 10px 20px;
}
.labelcontacto {
  color: white;
  font-size: 20px;
  padding: 10px;
  background: #9D9D9C;
  display: block;s
}
    
input,
textarea {
  font-size: 16px;
  font-family: sans-serif;
  padding: 8px;
  border: 1px solid #9D9D9C;
  border-top: none;
  width: 100%;
  display: block;
  outline: none;
}

button {
  color: #fff;
  font-size: 16px;
  width: 90%;
  margin-top: 0px;
  margin-bottom: 30px;
  margin-left: 1.3em;
  padding: .4em;
  background: #5FAD5D;
 transition: .3s;
}
#buttoncontacto:hover {
  color: #000;
  background: #fff;
}

#contactotextoiconos{
margin-bottom: 2em;
    }    
#iconoscolor{
            color: #9D9D9C;
    }   
    
#iconoscolorr{
        color: #9D9D9C;
}   
 

/* DEPORTES*/
.deportes2{
        padding: 0em 1em 1em 1em ;
    } 
.deportes2 ul {
    margin: 1rem 1rem 1rem 1rem ;
    display: flex;
    flex-direction: column
    } 
.deportes2 ul li {
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    margin-bottom: .5rem;
    padding: 1em;
    color: #5FAD5D;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 0rem 0rem 0.2rem 0.1rem #d9d9d9;
} 
.deportes2 ul a {
   text-decoration: none;
   color: #5FAD5D;
} 
 




/* DEPORTES FUTSAL*/
#futsal{
        padding: 1em 1.3em 1.3em 1.3em ;
    } 
#futsaltitulo{
        padding: 0em 1.3em .5em 1em;
        color: #9A895B;
        font-size: 18px;
    } 
#infofutsal{
        padding: 0em 1.3em 2em 1.3em;
        color: black;
    } 
.deportes{
    background: #5FAD5D;
    color: white;
    padding:.5em;
    margin: 1em;
}





/* REGISTRARSE */
.iniciodesesion{
      height:100%;
      width: 100%;
      background-color: #161616;
      padding-bottom: 40px;
      padding-top: .1rem;
}  
    
#titulo{
 padding: 1rem ;
 font-size: 25px;
 font-weight: bold;
 color: white; 
 text-align: center;
}
.formcontact2{
 margin: 0em 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: white;   
}
.iniciodesesion label{
        padding: 1.6em 1.6em 1.6em 1.6em;
    padding-bottom: .6em;
        text-align:center;
}

.formcontact{
 margin: 1em rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  color: white;   
}
    
#iniciodesesionp2 {
        padding:20px;
        margin: 0rem 6rem
} 
    
.iniciodesesion input{
        padding: .5em;
}
.formcontact2 button{
        margin-top: 35px;
       margin-left: 17px;
    margin-right: 20px;
    font-weight: bold;   
}




/* FOOTER */

footer {
    background: black;
    color: gainsboro;
    text-align: center;
    padding-top:25px; 
    padding-bottom: 10px;
}

footer img{ 
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  
  
}

footer h2{
        font-size: 13px;
        margin: .5em;
}
    
    
footer p{
    font-size:12px;
    padding: 1em;
    margin-top: 15px;
}







/*MEDIDA CELULAR*/
@media screen and (max-width: 480px) {
    
/* ENCABEZADO*/

    
header {
    background-color: #175025;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: .1em;
    position:sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;   
}

#logo_1 {
    height: 80%;
    padding:.5em;
    margin: 1em 5em;
    width: 2.5em;
    
}
    
#logo_2{
        display: none;
}
    
header > ul {
    padding: .5em;
}

header > ul > li{
    width: 3em;
    height: 3em;
    display: flex;
}

header > ul > li > a {
    width: 100%;
    height: 100%; 
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
    
/* MENU DESPLEGABLE */

header nav {
    background-color: rgba(0,0,0,0.85);
    color: white;
    position: fixed;
    right: 100vw;
    top: 0;
    height: 100vh;
    min-width: 100vw;
    transition: all .6s ease;   
}

header nav:target {
    right: 0;
}

header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: 2em;
    text-decoration: none;
    font-size: 1.1em;
    right: 1em;
    border-bottom: solid 1px rgba(255,255,255,.25); 
}

#x {
    width: 20%; 
    border-style: none;
    font-size: 13px;
}

nav div {
    display: flex;

}

nav div img{
  padding: 10em;
    left:100px;

}

nav ul li ul li{
    display: flex; 
}

.submenu {
    font-weight: 100;
}

}    
 





/*MEDIDA ESCRITORIO*/
@media screen and (min-width: 480px){
   
header {
    background-color: #175025;
    display: flex;
    align-items: center;
    top: .1em;
    position:sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;   
}

#logo_1 {
    padding:.5em;
    display: none;
}


    
#x {
    width: 20%; 
    border-style: none;
    font-size: 13px;
    display: none;
}

#personaoculta{
    display: none;
}
    
#menuoculto{
    display: none;
} 
    
    
.bloque{
    display: flex;
    align-items: center;
       
}
    
#logo_2{
   margin: 1.5em;
   width: 6.5em;
    
}
.menu{
    display: flex;
    
}   
    
.menu > li > a {
    color: white;
    text-decoration: none;
    margin: 3em; 

}

   
.main_index{
    padding: 1em;
    max-width: 50em;
    margin-left: auto;
    margin-right: auto;
     
    }
.uiltimosresultados_agenda{
    display: flex;
    }   
 
}