@charset "utf-8";

/* ------------- generales ------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
}

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

img {
    /* para que una imagen nunca sea mayor que la caja que la contiene */
    max-width: 100%;
    height: auto;
}

ul { list-style: none; }

header {
    background-color: #ddd;
    margin: 0;
}
footer {
    background-color: #6a6a6a;
}
.contenedor, main > section {
    max-width: 50rem;
    margin: 0 auto;
}

/* para limitar el ancho de los contenidos y centrarlos */
.fila {
    margin: 0 auto;
    padding: .5em;
    font-size: 1em;
    padding-right: 4vh;
    padding-left: 4vh;
}
.final {
    margin: 0 auto;
    padding: .5em;
    font-size: 1em;
    padding-right: 4vh;
    padding-left: 4vh;
}

/* para alinear íconos con los subtítulos íconos  */
h3 {
    display: flex;
    align-items: center;
}
.material-icons { background: none; padding-right: .5rem }

/*----------------------------- index - principal -------------------*/
.principal{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#principal{
    background-color: darkgray; 
}
#inicio {
    background-color: darkgray;
}
#redes {
    background-color: darkgray;
}
#ingreso {
    background-color: darkgray;
    border-top: none;
}
.club {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: sans-serif;
    text-align: center;
}
.club img {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 15em;
}
.club h1{
    padding: .5em;
    font-size: 180%;
}
.entrar button {
    background-color: aquamarine;
    border: solid 1px #00ffce;
    border-radius: 1rem;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.125);
    margin-top: 1em;
    margin-bottom: 1em;
    width: 10em;
    height: 3em;
    font-size: .85em;
    font-weight: bold;
    font-family: 'PT Sans', sans-serif;
    cursor: pointer;
    justify-content: center;
}
.linksredes img{
    width: 3em;
}
.linksredes a{
    text-decoration: none;
}
.entrar button:hover{
    background-color: #5388ff;
    color: white;
    border: solid 1px #004fff;
}

/*--------------------------------- home -----------------------------*/

/* ---------------- header ---------------- */

header .fila {
    
    /* caja flexible */
    display: flex;
    
    /* elementos colocados en los extremos del eje principal */
    justify-content: space-between;
    
    /* elementos centrados en el eje secundario */
    align-items: center;
}
.menu ul {
    align-items: flex-start;
}
#logo {
    display: block;
    width: 5em;
}

#llamamenu {
    background-color: rgba(0, 39, 255, 0.69);
    border-radius: 1em;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 3.5em;
    width: 3.5em;
    position: relative;
    z-index: 9999;

    /* caja flexible */
    display: flex;
}

#llamamenu i { 
    padding: 0;
    /* centrado en la horizontal y en la vertical */
    margin: auto;
}

/* menu desplegable */

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

/*header nav:target,*/
header nav.menuvisible {
    right: 0;
    transition: all .6s ease;
}

.usuario {
    margin: auto;
    text-align: center;
    font-size: 100%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
    color: #31ffdf;
}

header nav a {
    color: rgba(255, 255, 255, 0.99);
    padding: .5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

header nav a:hover {
    color: #31ffdf;
}

.redesmenu {
    margin: 0 20px;
    display: flex;
    justify-content: space-around;
}
.redesmenu img{
    width: 2em;
    
}
.redesmenu a{
    text-decoration: none;
    padding: 4px
}
/*----------------- foto portada -----------------*/
.portada {
    position: relative;
}
.contenedortitulo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
.contenedortitulo .tit-bg-gris{
    font-size: 1.2em;
    color: #ffffff;
    display: block;
    text-align: center;
    background-color: rgba(0,0,0,1);    
    float:left;
    padding: 10px 15px;
    margin-top: 6px;
    width: 100%;
}
.contenedortitulo .barra {
    height: 12px;
    background-color: #921ddb;
} 
/* ------------------------ main --------------------- */


main .home, .contacto, .calendario, .institucional {
    background-color: white;
}

section {
    border-top: solid 1px rgba(0,0,0,.1);
}

.galeria {
    transition: all 1s ease;
    padding: 0;
}

.galeria > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.fondodestacado {
    background-color: rgba(0, 139, 139, 0.5);
}

.galeria, .textos{
    margin: 2em;
}
.galeria h3 {
    width: 100%;
}

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

.galeria img { display: block; }

.galeria 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;
    position: absolute;
    height: 100%;
    top: calc(100% - 2.5em);
    left: 0;
    right: 0;
    transition: all .5s ease;
    
}

.galeria figure:hover figcaption {
    background-color: rgba(172, 62, 253, 0.66);
    border: solid 2px rgba(54, 0, 100, 0.6);
    border-radius: 5em 5em 0 0;
    padding: 1em;
    text-align: center;
    top: .5em;
    left: .5em;
    right: .5em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: all .3s ease-out;
}

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

#textos article {
    border: solid 1px rgba(0,0,0,0.25);
    border-radius: .5em;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1em;
    padding: 1em;
}

.textos {
    padding: 1em;
}

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

.subir {
    text-decoration: none;
    color: darkcyan;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.subir:hover {
    text-decoration: underline;
}

.seguinosredes {
    padding-right: 9vh;
    padding-left: 9vh;
    padding-bottom: 1em;
    padding-top: 1em;
    margin-bottom: 25px;
    border-bottom: solid #89adfd;
    border-top: solid #89adfd;
}
.seguinosredes h3{
    font-size:2.1em;
    text-align: center;
}
.inforedes{
    display: flex;
    justify-content: space-around;
}
.linkhome{
    width: 50px;
    margin: 10px
}

/*------------- footer --------------*/
footer p {
    color: aliceblue;
    text-align: center;
}

/*------------------------------- noticias -------------------------*/
.container {
    padding-right: 4vh;
    padding-left: 4vh;
    margin-top: 15px;
    margin-right: auto;
    margin-left: auto;
}
.divisor {
    height: 1px;
    background-color: #dcdcdc;
    margin: 5px 0;
    display: block;
}
figure span {
    font-size: 12px;
    color: #787878;
    padding: 3px 0;
    display: block;
}
.titulo1 {
    color: #00806c;
}
.titulo2 {
    color: #c70292;
}
.titulo3 {
    color: #0e35d3;
}
.titulo4 {
    color: #6e009f;
}
.titulo5 {
    color: #ff8000;
    font-size: .9em;
}
.titulo6 {
    color: #ff8000;
}
.titulo7 {
    color: #060090;
    font-size: 2.5em;
}
.titulo8 {
    color: #009165;
    font-size: 2em;
}
.texto9{
    font-size: 1em;
    color: #025d42;
}
.titulo10 {
    color: #6a0091;
    font-size: 2em;
}
.texto11{
    font-size: 1em;
    color: #ce60ff;
}
a {
    text-decoration: none;
}
figure .img .tags {
    position: absolute;
    bottom: 8px;
    left: 8px;
}
.tags1, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #2dffd3;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags2, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #ff2dcf;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags3, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #2dc6ff;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags4, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #b07fff;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags5, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #ffba7f;
    padding: 3px 6px;
    display: flex;
    line-height: 18px;
    margin:  10px 0;
}
.tags6, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #ffba7f;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags7, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #007fff;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags8, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #84ff9c;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin:  10px 0;
}
.tags9, .etiquetas a {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1f1f1f;
    background-color: #cb84ff;
    padding: 3px 6px;
    display: inline-block;
    line-height: 18px;
    margin-bottom: 15px;
}
.row3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.row3b{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.row3 figure{
    max-width: 130px;
}
.textodestacado {
    margin: 0;
    font-size: .98em;
}
#noticiadestacada{
    background-color: #eac8ff;
    padding: 1em ;
}

.titulodestacado{
    color: #5300a5;
    font-weight: bold;
}
#numeracion{
    padding-right: 4vh;
    padding-left: 4vh;
    max-width: 19rem;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
}
.pagination{
    display: flex;
    justify-content: space-around;
}
.page-item{
    border: .5px solid #cbcbcb;
    border-radius: 9px;
    padding: .5em; 
}
.page-item:hover{
    background-color: black;
}
.page-link{
    color:#5772e0;
}
.page-link:hover{
    color:white;
}
.page-link1{
    color: aqua
}
.publicidadevento{
    background-color: #d1dfff;
}
/*------------------------ noticia destacada -------------------------*/
.box img{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.titular {
    margin-top: 15px;
    padding-right: 4vh;
    padding-left: 4vh;
    font-size: 2.5em;
}
.copete {
    color: #8e8e8e;
}
.imgnoticiaprincipal{
    margin-top: 20px;
}
.text10{
    margin-bottom: 15px;
}
.destacado {
     border-top: 4px solid orange;
    border-bottom: 4px solid orange;
}
.destacado1{
    margin: 10px;
    font-size: .9em;
    color: #7b7b7b;
    font-style: oblique;
}
.destacado2{
    color: #c68205;
}
.fecha15{
    padding-right: 4vh;
    padding-left: 4vh;
}
.imagennoticia {
    margin: 0;
}
.epigrafe{
    font-size: .8em;
    padding: 1em;
    border-bottom: #ff7a68 solid 3px;
    border-left: #ff7a68 solid 3px;
    border-right: #ff7a68 solid 3px;
    position: absolute relative;
}
.palabradestacada{
    margin: 0;
    padding: 0;
}
.comparti {
    margin-top: 15px;
    padding-right: 4vh;
    padding-left: 4vh;
    display: flex;
    justify-content: center;
}
.redesparacompartir{
    display: flex;
    justify-content: space-around;
    margin-top: 15px;
    padding-right: 4vh;
    padding-left: 4vh;
    margin-bottom: 15PX;
}
.link2{
    width: 40px;
}
.interesar {
    margin-top: 40px;
}
.divisor2 {
    height: 1px;
    background-color: #dcdcdc;
    margin: 5px 0;
    display: block;
    margin-bottom: 35px;
}

/*--------------------------------- deportes -------------------------*/
.container5 {
    margin-right:  4vh;
    margin-left: 4vh;
    display: flex;
    flex-wrap: wrap;
}
.container5 figure img{
    border: 3px solid #d03bf4;
    margin-top: 40px;
}
.uno, .unoo {
    padding: 0;
    display: flex;
    justify-content: center;
    border: 2px solid;
    margin: 0;
}
.unoo {
    margin-bottom: 40px;
}
/*--------------------------------- partidos -------------------------*/

main #fixture {
    font-size: 1.8em;
    font-weight: 900;
    margin: 1em auto;
    max-width: 50rem;
    border-top: none;
   }

table {
    width: 100%;
    padding: 10px;
}
table tr{
    border-top: 1px solid black;
    padding: 1px;
}
th, td {
   width: 20%;
   text-align: center;
}

td {
   font-weight: 500;
}
td img {
    width: 10em;
    }

th2 {
    width: 20%;
   text-align: center;
    }
.division{
    font-size: .7em;
}
.fecha {
    font-size: .7em;
    background-color: aquamarine;
    padding: .3em;
}
.container3{
    display: block;
    padding-right: 4vh;
    padding-left: 4vh;
    margin-top: 15px;
    margin-right: auto;
    margin-left: auto;
}
.container3 a {
    color: #eb9800;
    text-align: center;
    margin-bottom: 35px;
}
.fixture1 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding-right: 4vh;
    padding-left: 4vh;
    margin-right: auto;
    margin-left: auto;
}
.fixture2 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding-right: 4vh;
    padding-left: 4vh;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 25px;
}
.fixture1 img{
    width: 100px;
    height: 100px;
}
/*--------------------------------- contacto -------------------------*/

main #contactanos {
    margin: 1.5em auto;
    padding: 2em;    
}
main p {
    margin-top: 1em;
    }

main section h1 {
    border-bottom: solid .25em #31ffdf;
    margin-top: 0;
    padding-bottom: .25em;
}
main button {
    background: #89adfd;
    border-radius: 1em;
    cursor: pointer;
    padding: .5em;
    color: rgba(0, 0, 0, 0.75);
    padding: .5em 1em;
    text-decoration: none;
    display: flex;
    float: right;
}
main button a:hover,
main button:hover {
    background-color: rgba(8, 252, 214, 0.52);
    color: black;
}
    
form {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    padding: 2em;
    margin-top: -4em;

}

input, textarea {
    border: solid 1px #89adfd;
    border-radius: 1em;
    margin-bottom: 1em;
    background-color: rgba(137, 173, 253, 0.30); 
    padding: 1em;
}

input:focus {
    border: #0041d3 2px solid;
     }
textarea {
    max-width: 40vh;
}
textarea:focus {
    border: #0041d3 2px solid;
     }

#telefono, #email, #direccion {
    background-color: rgba(137, 173, 253, 0.30);
    border: solid 2px #89adfd;
    border-radius: 1em;
    padding: 1em;
    margin: 1.5em auto;
    max-width: 40vh;
}

#contactanos, #ficha, .datosutiles {
    border-top:none;
}

/*----------- Nuevo institucional (ESTEBAN) ------------*/

.nuestrapileta {
    max-width: 50rem;
    margin: 0 auto;
    padding: .5em;
}

.galeria1 {
    padding-bottom: 2em;
    transition: all 1s ease;
}

.galeria1 > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.galeria1 h3 {
    width: 100%;
    padding: 1em;
}

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

.galeria1 img { display: block; }

.galeria1 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;
    position: absolute;
    height: 100%;
    top: calc(100% - 2.5em);
    left: 0;
    right: 0;
    transition: all .5s ease;
    
}

.galeria1 figure:hover figcaption {
    background-color: rgba(0,0,100,.5);
    border: solid 2px rgba(0,0,100,.6);
    border-radius: 0em 0em 0 0;
    padding: 1em;
    text-align: center;
    top: .1em;
    left: .1em;
    right: .1em;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: all .9s ease-out;
}

.galeria1 figcaption span {
    color: #ddd;
    display: block;
    font-size: .75em;
    margin-top: 1em;
}


.institu1 {
    color: #060090;
    padding: 1em;
    padding-bottom: .5em;
    margin: auto;
    font-weight: 800;
}

.institu2 { 
    display: flex;
    padding-left: 1em;
    padding-bottom: 0em;
    margin: auto;
    font-style: italic;
}

.nuestrapileta {
    background: #89ADFD;
    border-radius: 10px;
    max-width: 500rem;
    margin: 10px auto ;
    padding: 1em;    
    
}

.toggler1 { 
    width: 20px; height: 290px; padding-left: 20px; padding: .5em 1em;  }

  #button { padding: .5em 1em; text-decoration: none; }

  #effect { width: 240px; height: 280px; padding: .5em; position: relative; list-style: none;
  

}

  #effect h3 { margin: .5em; padding: .4em; text-align: center; background-color: #89adfd; border-radius: 15px; margin-bottom: 10px; }
 


.tooglerpadre {

display: flex;
text-align: center;
padding-left: 10px;
padding-right: 10px;    
         
}
/*----------- Nuevo mapacontacto (ESTEBAN) ------------*/    

.ubicacionpadre {
  background-color: rgba(137, 173, 253, 0.44);   
}

.mapacontacto0 {
    display: flex;
    justify-content: center;
    padding: .5em 0;
    font-family: Roboto;
    color: #1f1f1f;
}

.mapacontacto1 {
    padding: .8em;
    margin .8em;
    text-align: center;
    color: #1f1f1f;
    font-family: Roboto;
}

.listaubicacion {
    color: #060090;
    text-align: center;
    margin: .2em;
    padding: .5em ;
    font-family: Roboto;  
}

/*----------- Nuevo calendario (ESTEBAN) ------------*/
.calendariobox1{   
display: block;
margin: 0 auto;
max-width: 90%;
width: 90%;
background-color: #5772e0;
margin: 1em;
border-radius: 1em;
text-align: center;
font-weight: bold;
   
}

.calendariobox2 {
    margin: 1em;
    padding: 1em;
    background-color: #5772e0;
    border-radius: 1em;
}

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.bodycalendario {
 font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 font-weight: 100;
 color: rgba(255, 255, 255, 1);
 margin: 0;
 padding: 0;
 background: #4A4A4A;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

#calendar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 420px;
  margin: 0 auto;
  height: 570px;
  overflow: hidden;
}



.left, .right {
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  top: 50%;
  margin-top: -7.5px;
  cursor: pointer;
}

.left {
  border-width: 7.5px 10px 7.5px 0;
  border-color: transparent rgba(160, 159, 160, 1) transparent transparent;
  left: 20px;
}

.right {
  border-width: 7.5px 0 7.5px 10px;
  border-color: transparent transparent transparent rgba(160, 159, 160, 1);
  right: 20px;
}

.month {
  /*overflow: hidden;*/
  opacity: 0;
}

.month.new {
  -webkit-animation: fadeIn 1s ease-out;
  opacity: 1;
}

.month.in.next {
  -webkit-animation: moveFromTopFadeMonth .4s ease-out;
  -moz-animation: moveFromTopFadeMonth .4s ease-out;
  animation: moveFromTopFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.next {
  -webkit-animation: moveToTopFadeMonth .4s ease-in;
  -moz-animation: moveToTopFadeMonth .4s ease-in;
  animation: moveToTopFadeMonth .4s ease-in;
  opacity: 1;
}

.month.in.prev {
  -webkit-animation: moveFromBottomFadeMonth .4s ease-out;
  -moz-animation: moveFromBottomFadeMonth .4s ease-out;
  animation: moveFromBottomFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.prev {
  -webkit-animation: moveToBottomFadeMonth .4s ease-in;
  -moz-animation: moveToBottomFadeMonth .4s ease-in;
  animation: moveToBottomFadeMonth .4s ease-in;
  opacity: 1;
}

.week {
 background: #4A4A4A;
}

.day {
  display: inline-block;
  width: 60px;
  padding: 10px;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  background: #4A4A4A;
  position: relative;
  z-index: 100;
}

.day.other {
 color: rgba(255, 255, 255, .3);
}

.day.today {
  color: rgba(156, 202, 235, 1);
}

.day-name {
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .7px;
}

.day-number {
  font-size: 24px;
  letter-spacing: 1.5px;
}


.day .day-events {
  list-style: none;
  margin-top: 3px;
  text-align: center;
  height: 12px;
  line-height: 6px;
  overflow: hidden;
}

.day .day-events span {
  vertical-align: top;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 5px;
  height: 5px;
  line-height: 5px;
  margin: 0 1px;
}

.blue { background: rgba(156, 202, 235, 1); }
.orange { background: rgba(247, 167, 0, 1); }
.green { background: rgba(153, 198, 109, 1); }
.yellow { background: rgba(249, 233, 0, 1); }

.details {
  position: relative;
  width: 420px;
  height: 75px;
  background: rgba(164, 164, 164, 1);
  margin-top: 5px;
  border-radius: 4px;
}

.details.in {
  -webkit-animation: moveFromTopFade .5s ease both;
  -moz-animation: moveFromTopFade .5s ease both;
  animation: moveFromTopFade .5s ease both;
}

.details.out {
  -webkit-animation: moveToTopFade .5s ease both;
  -moz-animation: moveToTopFade .5s ease both;
  animation: moveToTopFade .5s ease both;
}

.arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -2px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent rgba(164, 164, 164, 1) transparent;
  transition: all 0.7s ease;
}

.events {
  height: 75px;
  padding: 7px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.events.in {
  -webkit-animation: fadeIn .3s ease both;
  -moz-animation: fadeIn .3s ease both;
  animation: fadeIn .3s ease both;
}

.events.in {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s;
}

.details.out .events {
  -webkit-animation: fadeOutShrink .4s ease both;
  -moz-animation: fadeOutShink .4s ease both;
  animation: fadeOutShink .4s ease both;
}

.events.out {
  -webkit-animation: fadeOut .3s ease both;
  -moz-animation: fadeOut .3s ease both;
  animation: fadeOut .3s ease both;
}

.event {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .5px;
  padding: 2px 16px;
  vertical-align: top;
}

.event.empty {
  color: #eee;
}

.event-category {
  height: 10px;
  width: 10px;
  display: inline-block;
  margin: 6px 0 0;
  vertical-align: top;
}

.event span {
  display: inline-block;
  padding: 0 0 0 7px;
}

.legend {
  
  bottom: 0;
  width: 100%;
  height: 30px;
  background: rgba(60, 60, 60, 1);
  line-height: 30px;

}

.entry {
  position: relative;
  padding: 0 0 0 25px;
  font-size: 13px;
  display: inline-block;
  line-height: 30px;
  background: transparent;
}

.entry:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 5px;
  top: 12px;
  left: 14px;
}

.entry.blue:after { background: rgba(156, 202, 235, 1); }
.entry.orange:after { background: rgba(247, 167, 0, 1); }
.entry.green:after { background: rgba(153, 198, 109, 1); }
.entry.yellow:after { background: rgba(249, 233, 0, 1); }

/* Animations are cool!  */
@-webkit-keyframes moveFromTopFade {
  from { opacity: .3; height:0px; margin-top:0px; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFade {
  to { opacity: .3; height:0px; margin-top:0px; opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTopFade {
  to { height:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
  to { height:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}
@keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}

@-webkit-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}
@keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}

@-webkit-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}
@keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}

@-webkit-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%); }
}
@keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%); }
}

@-webkit-keyframes fadeIn  {
  from { opacity: 0; }
}
@-moz-keyframes fadeIn  {
  from { opacity: 0; }
}
@keyframes fadeIn  {
  from { opacity: 0; }
}

@-webkit-keyframes fadeOut  {
  to { opacity: 0; }
}
@-moz-keyframes fadeOut  {
  to { opacity: 0; }
}
@keyframes fadeOut  {
  to { opacity: 0; }
}

@-webkit-keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}
@-moz-keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}
@keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}


.botoncalendario{
    background-color: dodgerblue;
    
    
}
/*----------- Nuevo multimedia (ESTEBAN) ------------*/ 
.videonatacion{
    padding: .5em;
    border-top: none;
    background-color: rgba(137, 173, 253, 0.44);
}

.competenciatexto{
    text-align: center;
    margin-bottom: 20px;
}

video {
 display: block;
 margin: 0 auto;
 width: 100%; 
 text-align: center;
 max-width: 1200px;
}   


.contenedor-galeria2 h1{
    margin-top: .5em;
    margin-bottom: .5em;
    text-align: center;
    font-family: Roboto;
    font-size: 32px;
    color: #003469;
    border-top: none;
}

.galeria2 {
    width: 100%;
    margin: auto;
    padding-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    border-top: none;
}
.galeria2 li {
    margin: .6em;
}
.galeria2 img {
    
    width: 300px ;
    height: auto;
}

.modal {
    text-align: center;
    display: none;
    border-top: none;
}

.modal:target {
    
    display: block;
    position: fixed;
    background: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    z-index: 80;
    width: 100%;
    height: 100%;
}

.modal h3 {
    
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: relative;
    top: 10em;
 

}

.contenedor-galeria2 .imagen {
    margin-top: 8em ;
    max-width: 850px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.contenedor-galeria2 .imagen a {
    color: #007fff;
    font-size: 25px;
    text-decoration: none;
    margin: 0 10px;
}

.contenedor-galeria2 .imagen a:nth-child(2) {
    margin: 0;
    height: 100%;
    flex-shrink: 2;
}

.contenedor-galeria2 .imagen img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 5px solid #007fff;
    box-sizing: border-box;
    border-radius: 10px;
}

.contenedor-galeria2 .cerrar {
    display: block;

    width: 25px;
    height: 25px;
    margin: 1em auto;
    font-size: 20px;
    color: #000;
    padding: 5px;

}
.contenedor-galeria2 i{
    position: relative;
    bottom: 8px;
    
}

.titulogaleria2 {
    margin-top: 1em;
    margin-bottom: .5em;
    text-align: center;
    font-family: Roboto;
    font-size: 32px;
    color: #003469;
    
}
.nuestroclub{
    padding-left: 1em;
}
/*----------- Nuevo Verano TABLA (ESTEBAN) ------------*/ 


.verano1{
    color: #007fff;
    text-align: center;
    font-family: "Roboto",sans-serif;
    
}
.verano2 {
    padding-top:10px;
    text-align: center;
    font-family: "Roboto",sans-serif;
}
.verano3{
    padding-top:1em;
    padding-bottom:10px;
    text-align: center;
    font-family: "Roboto",sans-serif;
}
.veranopdf {
    padding: 15px;
    background-color: #007fff;
    color: white;
    margin-bottom: 40px;
}
.miniaturapdf {
    width: 130px;
}
.container2{
    display: flex;
}
.container2 a {
    color: #eb9800;
    text-align: center;
    margin-bottom: 35px;
}
/*--------------------------------- reservas -------------------------*/
#reservatulugar h1 {
     border-bottom: solid .18em #060090;
}

main #reservatulugar {
    margin: 1.5em auto;
    padding: 2em;
    border-top: none;
}

.frase2 {
    margin-top: 1em;
}

.reservas {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    padding: 2em;
    margin-top: -4em;
}

select {
    font-size: 15px;
    border: solid 1px #89adfd;
    border-radius: 1em;
    margin-bottom: 1em;
    background-color: rgba(137, 173, 253, 0.30); 
    padding: 1em;
    }

select:focus {
    border: #0041d3 2px solid;
     }
#fichareserva{
    border-top: none;
}
/* -------------------------- voley --------------------- */
.fotovoley{
    border-bottom: solid 6px #c86fff;
}
.voley .voley h2 {
    font-size: 20px;
    color: #060090;
    letter-spacing: .09em;
    padding: 1em;
    margin: 0 0 0 30px;
    font-weight: lighter;
    width: 50%;
    }

.voley .voley h3 {
    font-size: 40px;
    color: #060090;
    letter-spacing: .05em;
    padding: .5em;
    margin: 0 0 0 30px;
    margin-top: -.8em;
    font-weight: 700;
    }

.voley .voley h3 span {
    font-size: 15px;
    margin: 0 0 0 190px;
    
}

.iniciovoley img {
    width: 100%;
    height: auto;
    display: flex;
    }

#noticiasvoley h2 {
    font-weight: 700;
    font-size: 21px;
    color: #060090;
    width: 100%;
    padding-bottom: 1em;
    padding-top: 1em;
}

#noticiasvoley h2 span {
    margin: 0 20px 0 0;
    color: black;
    font-weight: 400;
    letter-spacing: normal;
   }

#noticiasvoley {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

#noti1{
    padding: 2em;
}

/* propiedades de figcaption SÓLO cuando
   la mano se coloca encima de "figure" */
#noticiasvoley figure:hover figcaption {
    background-color: #060090;
    color: white;
}

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

#noticiasvoley span {
    font-size: 12px;    
}

#noticiasvoley figcaption {
    font-size: 16px;
    letter-spacing: .05em;
    font-weight: 700;
    margin: 0 0 6px;
}

#noticiasvoley p {
    font-size: 13px;
    letter-spacing: .02em;
    font-weight: 300;
    margin: 0 0 10px;
}

.noticiauno img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}
.noticiados img {
    display: block;
    width: auto;
    height: auto;
    }
   
.noticiatres img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    }

.noticiacuatro img {
    display: block;
    width: auto;
    height: 102px;
    max-width: 100%;
    }

.noticiacinco img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    }

.noticiaseis img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    }
.publicidadvoley {
    border: solid 2px #d750ff;
    border-radius: 1.5em;
    margin-left: 4vh;
    margin-right: 4vh;
    padding: 15px;
    
}

/* -------------------------- eventos --------------------- */
.eventos .eventos h2 {
    font-size: 30px;
    color: #060090;

    padding: .8em;
    font-weight: 900;
    text-align: left;
    }

.eventos .eventos p {
    display: block;
    width: 100%;
    font-size: 15px;
    margin: -20px 0 7px;
    padding: 1em;
    text-align: left;
    font-family: "roboto" sans-serif;
    line-height: 1.3em;
}

.eventos1 img {
    display: block;
    width: auto;
    height: 200px;
    max-width: 100%;
    
}

.eventos2 img {
    display: block;
    width: auto;
    height: 200px;
    max-width: 100%;
    }

.eventos3 img {
    display: block;
    width: auto;
    height: 200px;
    max-width: 100%;
    }

.eventos4 img {
    display: block;
    width: auto;
    height: 200px;
    max-width: 100%;
    }

#distintoseventos {
    padding-bottom: 2em;
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-top: none;
}

#distintoseventos figcaption {
    font-size: 15px;
    letter-spacing: .05em;
    font-weight: 700;
    margin: 7px 0 7px;
    text-align: center;
}
    
#distintoseventos p {
    font-size: 16px;
    letter-spacing: .02em;
    font-weight: 500;
    margin: 0 0 10px;
    text-align: center;
}

#distintoseventos figure {
    width: 45vmin;
    margin: .125em;
}
#distintoseventos figure img {
    border-radius: 20px;
}

/* propiedades de figcaption SÓLO cuando
   la mano se coloca encima de "figure" */
#distintoseventos figure:hover figcaption {
    background-color: #060090;
    color: white;
}
/*---------------------- cumpleaños --------------------*/

.titulo50 {
    font-size: 1em;
}
.destacado10{
    color: #056dd6;
}
#botonreserva{
    background-color: rgb(222, 58, 252);
    border: solid 2px black;
    text-align: center;
    margin: 0 55px ;
    padding: 5px;
    margin-bottom: 40px;
    border-radius: 1em;
}
/*
--------------------------------- puntos de quiebre (breakpoints) para el diseño responsive --------------------------------- */

/* reglas que se aplicarán cuando la ventana del navegador mida igual o más de 400px */
@media (min-width: 25em) {
    
    .galeria figure {
        width: 45%;
        margin: .125em;
    }
    
}

/* reglas que se aplicarán cuando la ventana del navegador mida igual o más de 560px */
@media (min-width: 38em) {
    
    header nav {
        background-color: rgba(0,0,0,.5);
        position: relative;
        right: auto;
        top: auto;
        height: auto;
        min-width: auto;
    }
    
    header nav ul {
        display: flex;
    }
    #llamamenu,
    .usuario {
        display: none;
    }
    .row3 figure{
    max-width: 230px;
    }
    
}
@media (min-width:40em){
    main .info{
        display: flex;
        flex-direction: row;
        flex-basis: 25%;
        justify-content: space-around;
    } 
    main article{
                margin-right: 1em;
    }
}


/*------------------- portada --------------------*/
@media (min-width: 38em){
.contenedortitulo .tit-bg-gris{
    font-size: 32px;
    text-transform: uppercase;
    color: #ffffff;
    display: block;
    text-align: center;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.3);
    }
}

/*------------------- contacto --------------------*/
/* 
@media (min-width:40em){
main .datosutiles{
        display: flex;
        flex-direction: row;
        flex-basis: 25%;
        justify-content: space-around;
    } 
} */
@media (min-width:40em) {
    #contacto{
        display: flex;
        flex-direction: row;
        flex-basis: 25%;
        justify-content: space-around;
    }
    .formulario {
        border-top: none;
    }
}


/*
----------------------------------
 modificaciones al css del plugin
----------------------------------

*/

.bx-wrapper {
    background: none;
    border: none;
    margin-bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bx-wrapper .bx-controls-direction a {
    top: 10px;
    margin: 0;
}

@media (min-width: 55em) {
    
    .bx-wrapper .bx-controls-direction a {
        top: 50%;
        margin-top: -16px;
    }
    
    .bx-wrapper .bx-prev { left: -38px; }
    .bx-wrapper .bx-next { right: -38px }
    
}