@charset="utf-8"
  /* tipografia roboto en regular peso 400 y bold peso 700 disponibles */  
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
/* reglas generales */
/*@font-face {
    font-family: roboto;
    src: url(roboto/Roboto-Regular);
}*/
*{
    
    box-sizing: border-box;
}

a{
    color:white;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    
}

li{
    list-style: none;
}

img{
    max-width: 100%;
}

body{
    background-color: #2767a5;
    margin: 0;
   font-family: 'Roboto', sans-serif;
    padding: 0;
    padding-left: auto;
    padding-right: auto;
    display: flex;
    flex-direction: column;
  /* justify-content: space-between;*/
}/*falta el justify de para que no se vea el azul cuando la pag no es muy larga*/

li{
    list-style: none;
}

h1{
    font-size: 1rem;
}

header{
    position: sticky;
    width: 100%;
    top: 0;
    z-index: 3200;
}
header section{
    padding: 0.3rem;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: black;
    }
header section img{
   height: 2.5rem;
    }

/* navegador */
#menu { 
    text-transform: uppercase; 
    text-align: right;
    padding-right: 2rem;
    background-color: blueviolet;
    margin-left: 11rem;
    padding-top: -0.5rem;
    padding-bottom: 0.1rem;
    max-height: 100vh;

    }
#menu ul li{
    margin-top: 1em;
    margin-bottom: 0;
    border-top: 1px solid;
}
.desplegable {
    
    background-color: #6487fc;
    text-transform: capitalize;
    margin-right: -2rem;
    padding-right: 2rem;
    margin-left: -2.5rem;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    display: none;
    margin-top:0;
    position: relative;
    
    
    }
nav{
     position: fixed;
    top:3.4rem;
    transition: all .3s ease;
     right: -140vw;
}

.botones{
    background-color: black;
    display:contents;
    
    }
.botones ul{
    margin: 1 0rem;
    margin-top: 1rem;
    padding: 0rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #5b258d;
    margin-left: 1rem;
    margin-right: 1rem;
    box-shadow: 2px 2px 
    }
.botones #top{
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.botones ul a{
    padding: 0;
    margin: 0;
    
}
.botones ul a li{
    padding: 0;
    margin: 0;
  
}

#slider figure{
    padding: 0rem;
    margin: 0rem;
    margin-bottom: 0rem;
    }
#slider img{
    width: 100%;
    height: auto;
    margin-bottom: 0rem;
    }
#slider figure figcaption{
    text-align: center;
    margin-bottom: 0rem;
    padding-bottom: 1rem;
    color: white;
    
       }
#slider figure figcaption h4{
    text-transform: uppercase;
    font-size: 0.9rem;
   
        }
#slider figure figcaption p{
    margin-top: -1rem;
     padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.9rem;
        }

#sponsors ul {
    display: flex;
    padding: 1.5rem;
    margin: 0rem;
    justify-content: space-around;
    background-color: white;
    
     }
#sponsors ul li img {
    height: 1.5rem;
    }

article h3{
    color: white;
   text-align: center;
    text-transform:uppercase;
    margin: 0;
    padding-top: 1rem;
    margin-bottom:0;
    margin-top:0;
    padding-top: 2.5rem;
    
      }

#calendario{
    background-color: #070b26;
    margin-bottom:-2.5rem;
    padding-top: 2.5rem;
      }
.month {
  width: 100%;
  background: #070b26;
  text-align: center;
    margin: 0;
    padding: 0.2rem;
    padding-bottom: 0.2rem;
    margin-bottom: -1.5rem;
    
}/* Month header */
.month ul {
  margin:0;
  padding:0;
}/* Month list */
.month ul li {
  color: white;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
    margin: 0;
    padding: 0;
}
.weekdays {
  margin: 0;
  padding: 0.5rem;
  background-color:#070b26;
    text-align: center;
}/* Weekdays (Mon-Sun) */
.weekdays li {
  display: inline-block;
  width: 13%;
  color: #666;
  text-align: center;
 
}
.days {
  padding: 0.5rem;
  background: #eee;
  margin: 0;
      border-left: 0.5rem solid #070b26;
     border-right: 0.5rem solid #070b26;
    border-bottom: 2.5rem solid #070b26;
    
}/* Days (1-31) */
.days li {
  list-style-type: none;
  display: inline-grid;
  width: 13%;
  text-align: center;
  margin-bottom: 0.2rem;
  color: #777;
  border: 1px solid;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
}
.days li .active {
  padding: 0px;
  
  color: white !important
}/* Highlight the "current" day */

#preciogrl{
   padding-bottom: 2.5rem;
    border-top: 2px solid white;
    padding-top: 1rem;
}
#preciogrl ul{
    color: white;
    display: flex;
    flex-direction:column;
    
    padding: 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

#preciogrl h3{
    text-align: center;
    color: white;
    padding: rem;
    padding-top: 2rem;
    margin: 0;
      
  }

#listafem{
    color: white;
    display:flex;
    flex-direction: column;
    padding: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 2.5rem;
  }
#listafem li{
    display: flex;
    flex-direction: row;
    margin-top: 0.5rem;
  }
#listafem img{
    max-width: 25%;
    align-self: flex-start;
  }
#listafem li div{
    padding-left: 0.5rem;;
    width: 100%;
    
  }
#listafem li div h4{
    margin: 0;
    margin-top: 0.5rem;
    
  }


#horarios{
    padding-left: 1.5rem;
    padding-top: 2.5rem;
    background-color: #01015f;
    color: white;
    padding-bottom: 2.5rem;
   
  }
#horarios h6{
    font-size: 1.2rem;
    margin: 0;    
  }
#horarios p{
    font-size: 0.8rem
  }
#horarios h3{
    margin-right: 1rem

      }
#horarios ul li p{
     
    margin-right: 1rem;
    margin-left: -2.5rem

      }

#titulo{
    color: black;
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    padding: 1rem;
    margin: 0rem;
      }
#futsalm{
    padding: 5vw;
    padding-top: 0rem;
       
}
#futsalm ul li figure img{
   height:25vw;
    width: 25vw;
}
#futsalm ul li figure{
    margin: 0;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    
 }
#futsalm ul li figure figcaption{
    text-align: center;    
 }
#futsalm ul   {
   display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    align-content: center;
    
  }

#profesores  h3{
    text-align: center;
    color: white;
    padding: 0.7rem;
    margin: 0;
    
  }
#profesores {
    background-color: #070b26;
    padding-top: 2rem;
    padding-bottom: 1rem;
    margin: 0;
  }
#profesores li img{
    margin-top: 0.5rem;
  }

#tituloequipos{
    color: white;
    text-align: center;
    font-size: 1.5rem;
        
}

#inforandom { 
    color: white;
    background-color: #0b7cc3;
    margin: 0rem;
    padding: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
      }
#inforandom h5 { 
  font-size: 1rem;
      }

#edades{
    margin:0;
    color: #01015f;
    background-color: white;
    padding-bottom: 2rem;
    padding-top: 2rem;
    padding-left: 1.5rem;
    border-top: 2px solid white;
}
#edades h5{
    font-size:1rem;
    margin: 0;
    padding-top: 0rem;
    padding-bottom: 0rem;
    
  }

#titulotabla {
    margin: 0rem;
    padding: 0;
  }
#titulotabla ul li {
    font-size: 1.3rem;
    margin: 0;
    padding: 0;
  }

#tablatres ul{
    margin: 0rem;
    padding: 0;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
#tablatres{
    padding-top: 2rem;
    border-top: 2px solid white;
    padding-bottom: 2rem;
    
}
#tablatres h1{
    text-align: center;
    color: white;
    font-size: 1.2rem;
    }
.tabla3 {
    margin: 0em;
    padding: 0em;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    font-size: 0.90rem;
  }

.tabla3 div{
    
    display: block;
    width: 25%;
    color: white;
}
.tabla3tit h5{
    font-size: 1rem;
    margin: 0;
    padding-bottom: 0.5rem;
    
  }



#titulo2{
    color: white;
    text-align: center;
    text-transform: uppercase;
    background-color: #167fb7;
    padding: 1rem;
    margin: 0rem;
      }

#info {
    margin: 1rem;
    padding-top: 0rem;
    padding-bottom: 2rem;
    color: white;
     }

#infocliente{
    margin: 0rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    text-align: center;
    color: white;
     }

#titulonegro{
    color: white;
    text-align: center;
    text-transform: uppercase;
    background-color: black;
    padding: 2.5rem;
    padding-bottom: 1rem;
    margin: 0rem;
      }
#mensaje{
    height: 20vh;
    margin-top: 0;
    margin-bottom: 0.5rem;
}
#correo{
    margin-bottom: 0.5rem;
}
#contactodejar{
    padding-bottom: 1.5rem;
    background-color: black;
}

.botones{
    margin: 0 3%;
}
.botones ul li{
    align-self: flex-start;
    text-align: center;
}
.botones ul li img{
    width: 25%;
    height: 25%;
    margin: 0.5rem;
}
.botones ul li h3{
    display: flex;
    align-self: center
}
.active{
    right: 0vw;
}


.desplegaractive{
    margin-top: 0em;
    position: relative;
   
}




   

/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 90%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
    margin-left: 5%;
    margin-top: 1em;
    margin-bottom: 2em;
    text-align: center;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.btn{
    background-color: black;
    color: white;
    width: 25%;
    height: 3rem;
    margin-left: 37%;
    margin-bottom: 2em;
    border: 0,001rem;
}


.desplegarbutt{
    margin-bottom: 1em;
}



footer{
    background-color: black;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    font-size: 0.8rem;
  }

#listafem li div h4 {
    margin-bottom: 0;
}


.bxslider {
    
}
.bx-wrapper .bx-controls-direction a {
  
    z-index: 2;
}
.bx-wrapper {
      border: 0;
    box-shadow: 0;
    background-color: #2767a5
}

#menuicono {
     background-image: url("../imgs/menu.png");
 background-color: #000000;
    background-size: cover;
    width: 12%;
    border: 0;
    cursor: pointer;
}



.popup {
    opacity: 0;
    position: absolute;
    
    display: flex;
    min-width: 45vw;
    background-color: aliceblue;
    border: 1em solid grey;
    transition: all .3s ease;
    
}
.popupactive{
    opacity: 1;
}
.top {
    margin-top: 0;
}

.item {
    
}

.row {
    padding: 0 1em;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1EM;
    
}

.bx-pager{
    display: none;
}

.izq {
    text-align: left;
}

.center {
    text-align: center;
}

.der {
    text-align: right;
}

.tabla3tit {
    font-weight: 500;
}

.tabla2 {
    padding-bottom: 1.5em;
}

h4 {
    
}



#sectionslider {
    margin-bottom: -4em;
}

#slider {
    margin-bottom: -2em;
}

iframe {
    max-width: 100vw;
    max-height: 100vw;
}

.activable {
    background: blueviolet;
}

a .link {
    color: #b18fd0;
}




.volleyhorario {
    margin-top: 0;
}