/*Comun*/
*{
font-family: 'Roboto', sans-serif;}
a {text-decoration: none;
color: darkgreen}
img {
    max-width: 100%;
    height: auto;}
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#739073;
    padding-left: 10px;
    padding-right:0px;
    margin:none; }
.menu{width: 500px;}
#logo {
    display: block;
    width: 4em;}
#llamamenu {
    background-color: rgba(255, 255, 255, 0.25);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 2em;
    width: 2em;
    position: relative;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;}
header nav {
    background-color: #D8D564;   position: fixed;
    left:-700px;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .3s ease;
    z-index: 9998;
}
header nav.menuvisible {
    left: 0;
    transition: all .6s ease;}
.usuario img {
    border-radius: 50%;
    width: 9em;
    max-width: 10em;   
    margin: none;}
.usuario h3 {
    margin-top: 1px;
    margin-bottom: 1px;
    color: white;
    font-size: 20px}
.usuario {
    margin: auto;
    text-align: center;
    font-size: 20px;
    padding: 1em 1em 1em;}
#menu ul{
list-style: none;
margin-top: 1px;
}
#menu li a{
text-decoration: underline;
color: white;
font-size: 15px;
line-height: 1.7;
}
#menu li{
text-decoration: none;
color: white;
font-size: 15px;
line-height: 1.7;
}
.redes { 
    height: 25px;
    width: auto;
    padding: 3px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    background-color: #739073;
    margin: 2em 0em 0em 0em;}
.redes img{
     margin: 0em 1em 0em 1em;
    height: 20px;}
footer p{
    font-size: 8px;
    text-align: center;
    margin: none;}
.flecha {
    background-color:#D8D564;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: 50%;
    box-shadow: 0 .15em .1em rgba(0,0,0,.215);
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
    position: fixed;
    bottom: 1em;
    right: 1rem;}
/*Index*/
.pasadorimg {
   padding-bottom: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    transition: all 1s ease;}
.pasadorimg h3 {
    width: 100%;
    padding: 1em;}
.pasadorimg figure {
    position: relative;
    overflow: hidden;
    flex-grow: 1;}
.pasadorimg img { display: block; }
.pasadorimg figcaption {
    background-color: rgba(0,0,0,.5);
    border: solid 2px rgba(0,0,0,0);
    border-radius: 0 0 0 0;
    color: white;
    padding: .5em;
    line-height: 1.25em;
    position: absolute;
    height: 100%;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    transition: all .5s ease;}
.pasadorimg figure:hover figcaption {
    background-color: rgba(0,0,0,.5);
    border: solid 2px rgba(0,0,0,.5);
    padding: 1em;
    text-align: center;
    top: .5em;
    transition: all .3s ease-out;}
.pasadorimg figcaption span {
    display: block;
    font-size: .75em;
    color: #ddd;
    line-height: 12px;}
.noticias{
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    align-items: flex-start;
    padding:none;
    margin: 5px;
    background-color: rgba(115, 144, 115, 0.08);
    margin-top: 15px}
.noticias img{
    max-height: 7em;
    padding: 15px;
    margin: 10;
    }
.bajada p{
text-align: left;
font-size: 13px;
margin: 2px;
padding: none;
font-weight: 300;}
.bajada h6{
font-size: 15px;
margin left: none;
margin-bottom: 3px;
margin-top: 14px;
padding: none;
line-height: 1.5;
color:darkgreen}
h4{
font-size: 20px;
margin: 1em 1em 1.5em 1em ;
line-height: 0;
color: #D8D564;}
/* FutsalFem-Futsal-Natacion-Gimnasia*/
#absoluto1{
opacity: 0.1;   
padding: none;
margin: none;
position:absolute;
top:4.1em;
left: -2.4em;}
#absoluto2{
opacity: 0.1;
padding: none;
margin: none;
position:absolute;
top:4.em; 
left:-2.7em;}
#absoluto3{
opacity: 0.1;
padding: none;
margin: none;
position:absolute;
top:4.em; 
left:-1.em;}
#absoluto4{
padding: none;
margin: none;
position:absolute;
top:4.em; 
left:-1.em;
height: 700px;}
.paquetetx h2 {
color: #d3ce24;
font-weight: 400;
font-size: 18px;}
.paquetetx p {
font-size: 1.2em;
font-weight: 300;
line-height: 1.4em;}
#sec1{
background-color:#eaeaea;
margin: 0px;
padding: 3em 1em 1em 1em;
font-size: 13px;}
.paquetetx {margin: 0em 1em 0em 1em;}
.paqicon img {
    height: 170px;
    width: auto;
    margin:0px;
    padding: none;}
.paqicon h6{
    border-style: solid; 
    border-color: #739073;
    border-radius: 1em;
    margin: 0px;
    padding: 5px;
    font-size: 15px}
.paqicon {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color:#3e6d42;
margin:0em 5em 6em 5em;
}
.paqicon p{
font-size: 13px;
font-weight: 400;
margin-top: 1px;}
#sec2{
background-color: white;
margin-top:5em;}
/*Sobrenos*/
#absoluto{
    opacity: 0.2;   
    padding: none;
    margin: none;
    position:absolute;
    top:4.1em;
    left: -2.6em;}
#sec3{
background-color:#f4f1f1;
margin: 0px;
padding: 1em 1em 1em 3em;
font-size: 13px}
#sec3 p{font-size: 1.2em;
font-weight: 300;
line-height: 1.4em;}
#sec4{
background-color: white;
padding: 1em 0em 1em 3em;
font-size: 13px;}
#sec4 p{
    font-size: 1.2em;
font-weight: 300;
line-height: 1.4em;
}
#sec5{font-size: 13px;
background-color:#f4f1f1;
margin: 0px;
padding: 1em 1em 1em 1em;}
#sec5 p{
    font-size: 1.2em;
font-weight: 300;
line-height: 1.4em;
}
#sec5 a img{
    height: 8em;
    margin: 1em 8em 01em 8em;}
#sec3 h2{
font-size:20px;
color: darkgreen;}
#sec4 h2{
font-size:20px;
color: darkgreen;}
#sec5 h2{
font-size:20px;
color: darkgreen;}
/*Horarios*/
#grilla{
background-color: #eaeaea;
padding-top: 0.5em; 
padding-bottom: 0px;
margin-bottom: 0px; 
display: flex;
flex-direction: column;
align-items: center;}
#grilla h2{
color: darkgreen;
text-decoration-line: underline;
padding-bottom: 0px;
margin-bottom: 0px;}
#grilla img{
padding-bottom: 0px;
margin-bottom: 0px;
position: relative;
top: -3px;
}
#actividades h4 {
color: darkgreen;
text-align: center;
font-size: 15px;
padding: none;
margin: none;}
#actividades div a img{
    height: 8em;
    border: 3px solid #D8D564;
    border-radius: 80px;
    margin: 1em 1em 1em 1em; }
#actividades{
display: flex;
flex-direction: column;
padding: 1em 1em 1em 1em;}
#actividades div{  
    padding-top: 5px;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: center;}
/*presentacion + registro*/
#fondo {
background:linear-gradient(#739073, #739073,white);
display: flex;
flex-direction: column;
justify-content: center;}
#bloque{display: flex;
flex-direction: column;
padding: 4em 3em 10em 3em;
align-items: center;}
#bloque a {text-decoration: none;
color:darkgreen;}
#bloque a h2{
text-align: center;
border-style: solid; 
border-color: #D8D564;
border-radius: 1em;
background-color: #D8D564;
padding: 5px;
font-size: 18px;
width: 10pc;}
.for{
display: flex;
justify-content: center; 
align-items: center;
margin-bottom: 10px;
width: auto;}
.botones{
border: 2px solid #d3ce24;
text-align: center;
border-radius: 1em;
background-color: rgba(216, 213, 100, 0);
padding: 5px;
font-size: 13px;
color: #304855;}
.enviar{
display: flex;
justify-content: center;
background-color: white;
margin: auto;
width: 50px;}
.f{ width: auto; height: 150px;}
.sexo{ 
display: flex;
flex-direction: row;
justify-content: flex-start;
font-size: 12px;
align-items: center;}
.tit{
color: aliceblue;
font-size: 1em;
margin-top: 1em;}
.fas{
    color: aliceblue; 
    margin-right:6px;}
/*noticias texto*/
.noticiastexto h2{
color: darkgreen;
margin: 1em 1em 1em 1em;}
.noticiastexto h5{
color: darkgreen;
font-size: 17px;
font-weight: 500;
line-height: 0.1em;
margin: 1.5em 1em 1em 1em;}
.noticiastexto h6{
color: #D8D564;
font-size: 17px;
font-weight: 300;
line-height: 0.1em;
margin: 1em 1em 1em 1em;}
.noticiastexto p{
font-size: 1em;
font-weight: 300;
line-height: 1.4em;
margin: 1em 1em 1em 1em;}
.noticiastexto img{ width: 100%}
video{
width: 324px;
height: 180px;
align-items: center;
    
}
/*fixture*/
.caja{ text-align: center;
background-color: #f7f4f4;
padding-top: 20px;
padding-bottom: 10px;
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
.fila1{
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;}
.columna1 h3{
color: #739073;
font-size: 13px;}
.columna2 h5{
color: #739073;
font-size: 13px;}    
.fila1 h5{
color: #D8D564;
margin: 1em 2em 1em 2em;}
.caja h3{
color: #739073;
font-size: 15px;
line-height: 3px;
font-weight: 300;}
.columna2 h5{margin:1em 2em 1em 2em; }
.caja h4{
color: darkgreen;
text-align: center;}
.columna1{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
.columna2{ 
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 1em 1em 1em 2em;}
h2.fixture{
text-align: center;
display: flex;
justify-content: center;
color: #D8D564;
margin: 1em 1em 1em 1em;}
/*landing*/
#absoluto5{
    opacity: 0.8;   
    padding: none;
    margin: none;
    position:absolute;
    top:0.1em;
    left: 0em;
    z-index: -99;}
.botonpromo h6{
    display: flex;
    justify-content: center;
    font-size: 15px;
    color: #D8D564;
    border-style: solid; 
    border-color: rgba(216, 213, 100, 0.81);
    border-radius: 1em;
    margin: 0px;
    padding: 5px;
    font-size: 15px;}
.promocion h2{
    display: flex;
    justify-content: center;
    color: #739073;}
#absoluto6{
    padding: none;
    margin: none;
    position:absolute;
    top:32em;
    left: 3.5em;}
#absoluto7{
    padding: none;
    margin: none;
    position:absolute;
    top:39em;
    left: 7em;}
input
{background: white;
border: 2px solid #ffffff;
border-radius: 200px 200px 200px 200px;
padding: 6px;
color: #304855;
    margin-top: 10px;}
/*trofeos*/
#absoluto8{
    opacity: 0.3;   
    padding: none;
    margin: none;
    position:absolute;
    top:5em;
    left: -8.6em;}
#sec7{
background-color: white;
padding: 1em 0em 1em 1em;}
#sec7 h2{
    color: darkgreen;}
#sec8{
background-color:#f4f1f1;
margin: 0px;
padding: 1em 1em 1em 1em;}
#sec8 h2{
    color: darkgreen;}
.leyenda{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;} 
.leyenda p{font-size: 1em;
font-weight: 300;
line-height: 1.4em;
margin: 1em 2em 1em 1em;}
.trof{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;}
.trof img{height: 6em; }
.leyenda h4{ 
    line-height: 1.5em;
    font-size: 17px;}
.leyenda h3{ font-size: 13px;}
.leyenda h5{margin: 1em 2em 1em 1em;}
/*responsive*/

@media screen and (min-width: 400px)
{
    
    #absoluto6{
    padding: none;
    margin: none;
    position:absolute;
    top:38.3em;
    left: 2.5em;}
#absoluto7{
    padding: none;
    margin: none;
    position:absolute;
    top:46em;
    left: 8.5em;}
}



@media screen and (min-width: 670px)
{#absoluto3 {
   display: block;
    height: 500px;}
.paqicon img {
    height: 300px;
    width: auto;
    margin:0px;
    padding: none;}
#absoluto2 {
   display: block;
    height: 1000px;}
#absoluto1 {
   display: block;
    height: 600px;
    left: -4em;}
#absoluto4 {
   display: block;
    height: 800px;
    }
.noticiastexto img{ 
    width:95%;
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    }
.redes { 
    height: 35px;
    width: auto;
    padding: 3px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    background-color: #739073;
    margin: 2em 0em 0em 0em;}
footer p{
    font-size: 11px;
    text-align: center;
    margin: none;}
.redes img{
     margin: 0em 1em 0em 1em;
    height: 28px;}
.pasadorimg figcaption span {display: block;
    font-size: 13px;
    color: #ddd;
    line-height: 16px;}
.pasadorimg figcaption {
    background-color: rgba(0,0,0,.5);
    border: solid 2px rgba(0,0,0,0);
    border-radius: 0 0 0 0;
    color: white;
    padding: .5em;
    line-height: 30px;
    position: absolute;
    height: 100%;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    transition: all .5s ease;
    font-size: 19px;}
h4{
font-size: 25px;
margin: 1em 1em 1.5em 1em ;
line-height: 0;
color: #D8D564;}
.noticias img{
    max-height: 10em;
    padding: 15px;
    margin: 10;}
#absoluto3 {
   display: block;
    height: 500px;}
.paqicon img {
    height: 300px;
    width: auto;
    margin:0px;
    padding: none;}

#absoluto6{
    padding: none;
    margin: none;
    position:absolute;
    top:68.5em;
    left: 8.5em;}
#absoluto7{
    padding: none;
    margin: none;
    position:absolute;
    top:79em;
    left: 17em;}
video{
width: auto;
height: 327px;
align-items: center;
}
}

@media screen and (min-width: 1000px)
    
{
    
    #absoluto6{
    padding: none;
    margin: none;
    position:absolute;
    top:102.3em;
    left: 19.5em;}
#absoluto7{
    padding: none;
    margin: none;
    position:absolute;
    top:117em;
    left: 27.5em;}
}

@media screen and (min-width: 1400px)
    
{
    
    #absoluto6{
    padding: none;
    margin: none;
    position:absolute;
    top: 35em;
    left: 20.5em;
    font-size: 23px}
#absoluto7{
    padding: none;
    margin: none;
    position:absolute;
    top:60em;
    left: 43.5em;}
    #promo{
        height: 1000px;
        margin-left: 500px;}
    #fondo img{
        height: 1200px;
        width: 1400px;
    }
footer p{
        font-size: 13px;
    width: 1000px;
margin-left: 200px;}
    
.noticiastexto img{ 
    width:70%;
    margin-top: 30px;
    margin-left: 200px;
    margin-right: 15px;
    }
    .noticiastexto h6{
        margin-left: 200px;}
        .noticiastexto h2{
        margin-left: 200px;}
        .noticiastexto h5{
        margin-left: 200px;}
        .noticiastexto p{
        margin-left: 200px;
        margin-right: 200px;}
    
#absoluto3 {
   display: block;
    height: 500px;}
.paqicon img {
    height: 300px;
    width: auto;
    margin:0px;
    padding: none;}
#absoluto2 {
   display: block;
    height: 1000px;
    margin-top: 30px;
    margin-left: -6px;}

    .paquetetx{
        margin-left: 200px;
        margin-right: 200px;
    }
    
    .paquetetx h2{
        font-size: 20px;
    }
    .paqicon p{
        font-size: 20px;
    }
video{
width: 980px;
height: 500px;
align-items: center;
margin-left: 200px;
}
}