@charset 'utf-8';

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 0;
}


ul { list-style: none;
text-decoration: none;}
li { list-style: none;
text-decoration: none;}
a { list-style: none;
text-decoration: none;
color: black;}


/* reglas pantalla de carga */

#bodycarga{
    linear-gradient(to right, #c8d4e5, #000000);
}


.maincarga{
    display: flex;
}

.carga{
    list-style: none;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}

.carga a{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logocarga{margin-bottom: 3em; }

.carga img{
    width: 11em;
}


/* hasta aca pantalla de carga */


/* resgistro */

.cuerpo {
    background-color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F2F2F2;
    min-width: 100%;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    background: black;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    z-index: 9998;
}
.headerinicio {
    min-width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: auto;
    position: static;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.headerinicio img{
    width: 40vw;
    max-width: 200px;
    max-height: 200px;
}

.maininicio{
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.sectioninicio {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 500px;
    top: 14em;
    padding: 2em;
    box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

.boton2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 3.5em;
    padding: 1em;
    border-radius: 10px;
    background-color: #169ae0;
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 1em;
    font-weight: normal;
    box-shadow: 0 3px 6px rgba(32, 33, 36, 0.28);
}
.boton3{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2.5em;
    padding: 0em 2em 0em 2em;
    border-radius: 10px;
    background-color: #169ae0;
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 1em;
    font-weight: normal;
    box-shadow: 0 3px 6px rgba(32, 33, 36, 0.28);
}

.omc{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
video {
    
    width: 100%;
    height: auto;
    
}

.omc h6{
    font-family: 'Open Sans', sans-serif;
    font-size: .75em;
    margin-top: .5em;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.81);
}

.ntc{
    font-family: 'Open Sans', sans-serif;
    font-size: .9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #514c4c;
}


.ntc a{
    margin-top: .3em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.86);
}

.volver{
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    text-align: center;
    margin: 0.5em
}

.volver a{
    display: flex;
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #514c4c;
    font-size: .8em;
}

.volver li{
    list-style: none;
}

.volver li img{
    margin-right: .3em;
    width: .8em;
}


.registrarform {
    display: block;
    width: 100%;
    max-width: 500px;
}

.textea {
    display: block;
    width: 100%;
    max-width: 500px;
    display: block;
    padding: 1em;
    height: 4em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    font-size: .8em;
    border-radius: 10px;
    background-color: #d0e2f0;
    color: rgba(0, 0, 0, 0.86);
}
.botones {
    
    color: white;
    font-weight: normal;
}
.registrarinput {
    display: block;
    padding: 1em;
    width: 100%;
    height: 3.5em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: .8em;
    border-radius: 10px;
    background-color: #eeeeee;
    color: #514c4c;
}



/* fin registrarse */
/* header */

.fondo {
    min-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4em;
    border-radius: .70em;
}

/* header */

.iconDiv {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}

iconDiv img {
    height: 45px;
}


.iconAR {
    height: 10vh;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 5px;

}

.principal {
    display: flex;
    justify-content: center;
    font-size: 1.5em;
}

main p {
    margin: 1em 0em 0em 0em;
    display: flex;
    justify-content: center;   
}
.bajada1 {

    margin: .5em 0em 0em 0em;
    display: flex;
    justify-content: center;
    font-size: .9em;}

.interno {
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
}

section {
    margin-top: 15px;
    flex-wrap: wrap;
}


.sectionpartido1 {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 600px;
    margin-top: 2em;
    padding: 1em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}
.sectionpartido1 img{
    width: 60vw;
    }
.sectionpartido {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 600px;
    top: 20em;
    padding: 1em;
    margin: 2em 0em 0em 0em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}
.sectionpartido img{
    width: 70vw;
    }
.ntc1{
    font-family: 'Open Sans', sans-serif;
    font-size: .9em;
      font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #514c4c;
     width: 80%;
    text-align: center;
}

.ntc1 a{
    margin-top: .3em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 1000;
    color: rgba(0, 0, 0, 0.71);
    
}

.omc1 {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0em;
}

.omc1 h1{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2.5em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color: #169ae0;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: white;
    font-size: 1em;
}


.sectioninicio3 {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 500px;
    top: 6em;
    padding: 2em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

.sectioninicio3 img {
    display: flex;
    align-items: center;
    padding: 1em 1em 1em 0em;
    margin: 1em;
    border-radius: 10px;
    width: auto;
    
   
}

body{
    margin: 80;
    padding-bottom: 0.1em;
    font-family: 'Open Sans', sans-serif;
    color:black;
    min-height: 100vh;
    background-image: linear-gradient(to right, rgba(200, 212, 229, 0.87), rgba(51, 63, 83, 0.66));

}

.partido {
    margin: 0rem;
    padding: 0rem;
    text-decoration: none; 
    color:black;
}
.usuario {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    justify-content: space-between;
    color: black;
    font-weight: bold;
    margin: 2rem 1rem 1rem 1rem;
    padding: 1rem;
}
.usuario2 {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    align-items: center;
    justify-content: space-around;
    
}
.ayuda h1{
    font-size: 1.8em;
    padding: 1em 0em .5em 0em ;
    color: #000000;
    
}
.usuario5 {
   margin: 1em 1em 1em 4%;
}


#logo {
    display: block;
    width: 5em;
}

header > ul {
    display: flex;
}

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

.fa-bars:before {
    content: "\f0c9";
    color: white;
}

.fa-chevron-left:before {
    content: "\f053";
    color: white;
    }

header nav:target {
    right: 0;

}

.usuario4 {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}
.usuario4 img {
    border-radius: 50%;
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
    border: 4px solid gray;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .25) inset, 0 .35em .5em rgba(0, 0, 0, .25);
}
.mensajes1{
    display: flex;
    flex-direction: column;
     width:80%;
    margin-right: 4.4em;
     border-radius: 10px;
    background-color: #f0f0f0;
    font-size: .8em;
     margin-bottom: .8em;
    margin-top: 0em;
    margin-left: oem;
     padding: 0em;
}
.mensajes1 h4{
    display: flex;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin: 0em .5em .5em .5em;
}
.mensajes1 h5{
    display: flex;
    text-align: left;
    width: 20%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #f46565;
    padding: .1em 0em .4em .1em;
}
.mensajes2{
    display: flex;
    flex-direction: column;
     width:70%;
    margin-right: 6em;
     border-radius: 10px;
    background-color:  #f0f0f0;
    font-size: .8em;
     margin-bottom: .8em;
    margin-top: 0em;
    margin-left: oem;
     padding: 0em;
}
.mensajes2 h4{
    display: flex;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin: 0em .5em .5em .5em;
}
.mensajes2 h5{
    display: flex;
    text-align: left;
    width: 20%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #5dbc33;
     padding: .1em 0em .4em .1em;
}
.mensajes3{
    display: flex;
    flex-direction: column;
    width:60%;
    margin-right: 8em;
     border-radius: 10px;
    background-color:  #f0f0f0;
    font-size: .8em;
     margin-bottom: .8em;
    margin-top: 0em;
    margin-left: oem;
     padding: 0em;
}
.mensajes3 h4{
    display: flex;
   text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin: 0em .5em .5em .5em;
}
.mensajes3 h5{
    display: flex;
    text-align: left;
    width: 20%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: #1a29d9;
    padding: .1em 0em .4em .1em;
}

.mensajes4{
    display: flex;
    flex-direction: column;
     width:60%;
    margin-left: 7em;
    margin-bottom: .8em;
    margin-top: 0em;
    margin-left: oem;
     border-radius: 10px;
    background-color: #d0e2f0;
    font-size: .8em;
     padding: 0em;
}
.mensajes4 h4{
    display: flex;
   text-align: center;
    justify-content: flex-end;
    padding: 0em .5em 0em 0em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    margin: .8em .8em .8em .8em;
}

.usuario3 {
    margin: auto;
    text-align: left;
    font-size: 75%;
    padding: 1em 1em 1em 2em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}
.usuario3 img {
    border-radius: 50%;
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
    border: 4px solid #00931c;
    box-shadow: 0 .35em .5em rgba(14, 177, 0, 0.25) inset, 0 .35em .5em rgba(0, 0, 0, .25);
}
header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .7em 1em;
    text-align: left;
    text-decoration: none;
    font-weight: 300;
}
.fa-calendar-alt:before {
    content: "\f073";
    margin-right: 1em;
}
.fa-inbox:before {
    content: "\f01c";
    margin-right: .9em;
}

.fa-futbol:before {
    content: "\f1e3";
    margin-right: 1em;
}

.fa-home:before {
    content: "\f015";
    margin-right: 1em;
}

.fa-images:before {
    content: "\f302";
     margin-right: 1em;
}
.fa-question:before {
    content: "\f128";
    margin-right: 1.3em;
}
.fa-newspaper:before {
    content: "\f1ea"; 
    margin-right: 1em;
}
header nav a:hover {
    color: white;
}

header nav.menuvisible {
    right: 0;
    transition: all .6s ease;
}
header nav a:hover {
    color: white;
}


#x {
    
    position: absolute;
    right: 0;
    top: 0;
}

.equipo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 1rem 1rem 1rem 1rem;
    padding: 1rem;
}

.equipo img{
   height: 100px;
  margin-left: 2em;
}
.equipo4 {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 2rem 1rem 1rem 1rem;
    padding: 1rem;
}

.equipo4 img{
   height: 120px;
  margin-left: 5em;
}
.equiposrivales{
     display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    justify-content: space-around;
    margin: 2rem 1rem 1rem 1rem;
    padding: 1rem;
}
nav img {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 1em;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
     width: 80%;   
}

.fotos-dgpc img{
    width: 80px; 
}

    
.usuario1 {
	display:block;
	position:relative;
	padding: 56px 20px 39px 20px;}

.contenedorlogin{
	display:block;
	padding: 11px 0 10px 0;
    max-height: 640px;
    height: 464px;
}
.contenedorlogin p{text-align: center;padding: auto;width: 90%;} 
.contenedorlogin h1{text-align: center;padding: 5px;width:90%;}

.fbregistro{padding: 25px 0 0 0;text-decoration: none; color: #f65938}

.confirmar{display: block; 
    border: 1px solid;
    border-radius: 11px;
    color: darkgrey;
    border-style: solid;
    width: 60%;
    margin: 9px auto;
    text-align: center;
    margin-top: 1em;
    background-color: #00ceff;
}

.datosintro { display: block; width:80%; margin:0.5rem auto; border: 1px solid #eee; border-radius: 10px; padding: 0.3rem;} 

.nombreyconstraseña{
    width: 80%;
    margin: auto;
    margin-top: 3em;
    
}
.fotoperfil img{text-align: center;margin: 50px auto}
.fotoperfil h1 {text-align: center; margin: 20px 0 20px 0;}


.siguiente1 {padding: .5em 0em 1em 0em;
    text-align: center;
    text-decoration-line: underline}

.siguiente2 {
    display: block; 
    border: 1px solid;
    border-radius: 11px;
    color: darkgrey;
    border-style: solid;
    width: 60%;
    margin: 9px auto;
    text-align: center;
    margin-top: 1em;
    background-color: #00ceff;
}

.cuenta {padding: .5em 0em 1em 0em;
    text-align: center;
    margin-top: 3em;}

.siguiente3 {
    display: block; 
    border: 1px solid;
    border-radius: 11px;
    color: darkgrey;
    border-style: solid;
    width: 60%;
    margin: 9px auto;
    text-align: center;
    margin-top: -.2em;
    background-color: #00ceff;
    
}

.datperfil {display: block; 
    border: .5px solid;
    margin: 9px auto;
    }

.inst1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1px 0 10px 0px;
    color: black;
    border-bottom: solid;
    border-bottom-color: #000;
}
.informacion {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 500px;
    top: 5em;
    padding: 1em;
    box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

.info {
    text-align: center;
    
}

.info h1 {
    text-align: center;
    padding-bottom: .5em;
    font-size: 1.2em;
}
.info h4 {
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: 4em;
    margin-right: 4em;
    height: 2em;
    padding: 0em 2em 0em 2em;
    border-radius: 10px;
    background-color: #169ae0;
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: .9em;
    font-weight: normal;
    box-shadow: 0 3px 6px rgba(32, 33, 36, 0.28);
}
    
}


.info h2 {text-align: center;
padding-bottom: 0.5em;}

.inst2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1px 0 10px 0px;
    color: black;
    border-bottom: solid;
    border-bottom-color: #000;
}
.inst2 h3 {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 9px 0 10px 0px;
    margin: 1em .50em 0em .50em

}
.inst {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
    max-height: 6px;
    height: 4px;
    	
}
.inst img{
    max-height: 100px;
    height: 70px;
    	
}

.inst article{
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
    border-bottom: solid;
    padding: 1px 0 10px 0;
    width: 100%;
    height: 150px;
    }

.inst div{display: block;width: 90%;margin: 0 auto 0 auto}

.inst img{padding: 10px 0 8px 22px}
.inst1 h1 {margin: 20px -20px 0 -21px; }
.inst p{margin: 3px -39px 0px -21px; }

.puntos {
    border:1px solid;
    border-radius: 11px;
    color: #656565;
    border-style: solid;;
    margin: 5px auto;
    text-align: center;
}
.puntos h3 {padding: 0 0 0 1px}
.nivel{text-align: center;}
.premios{padding: 0 0 0 20px; color: #fff}


.lugares{
    color: green;
}
.disponible {
    display: flex;
	flex-direction: column;
    color: green;
    text-align: center;
    justify-content: space-around;
}

.lugares2 {
    color: red;
}
.equiponicolas {
   display: flex;
   margin-right: .1em;
    text-align: center;
    justify-content: center;
    align-items: center;   
}
.como1{
     display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 10px;
    color: rgb(8, 8, 8);
    border-style: solid;
    padding: 1em 1em 1em 1em;
    margin: 1em 0em .5em 0em;
    width: 100%;
}

.como1 h2{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;  
}

.como1 img{
    width: 25px;
    height: 25px;
    
}

.horarios p {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color: #169ae0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: white;
    font-size: 1em;
    
    }

.horarios h3 {
    text-align: center;
}

.sectionequipo{
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 1000px;
    top: 5em;
    padding: 2em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

.noticiasfondo{
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 1000px;
    top: 5em;
    padding: 1em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

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

.equiporival h1{
    text-align: center;
}
.equiporival h4{
    text-align: center;
    color: #169ae0;
    padding: 0em;
    margin: 0em;
}

.video {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1em 1em 0em 1em ;
    align-content: center;
    }

.otros {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 1em;
     border:1px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 10px;
    color: rgb(8, 8, 8);
    text-align: center;
    padding: 1em 1em 0em 1em ;
    margin: 1em 1em 0em 1em;
    width: 70%;
    }


.hombre img{
    max-width: 120px;
    max-height: 120px;
      font-size: 1em;
     border:2px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 30em;
    color: rgb(8, 8, 8);   
}

.otros1 img{
    max-width: 40px;
    max-height: 40px;}

.otros h2{
    font-size: 1.3em;
    color: #1a8dd4;
    text-align: center;
    }

.otros p{
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: .7em;
    }
.otros1 {
    padding: 1em;
    }

.otros1 img {
    width: 60vw;
}

.sectionequipo1 {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 1000px;
    top: 5em;
    padding: 1em;
    box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}
.menu h2{
    color: white;   
}

.otros5 {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    border:1px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 10px;
    color: rgb(8, 8, 8);
    border-style: solid;;
    padding: 1em 1em 1em 1em ;
    margin: 1em 0em .5em 0em;
    width: 90%;
    }

.otros5 img{
    height: 60px;
}
.otros11 {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    font-size: 1em;
    border:1px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 10px;
    color: rgb(8, 8, 8);
    border-style: solid;;
    padding: 1em 1em 1em 1em ;
    background-color: rgba(255, 255, 255, 0.9);
    width: 90%;
    }
.otros11 img{
    height: 70px; 
    margin: 0em 1em 0em 1em;
}
.otros12 {
    display: flex;
    flex-direction: column;
    padding: 0em 0em 0em 1em;
    align-content: flex-end; 
    }

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

.otros6 {
    display: flex;
    flex-direction: column;
    padding: 0em 0em 0em 1em;
    align-content: flex-end;
    }
.reloj {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-bottom: .6em;
}
.reloj img {
        width: 6vw;
    height: 6vw;
    margin-right: .2em;
}
.reloj h2{
     display: flex;
    justify-content: center;
    align-content: center;
    align-items: center
}

.otros10 {
    display: flex;
    flex-direction: column;
    padding: 0em 0em 0em 1em;
    align-content: flex-end; 
    margin-right: 1em;
    }
.otros7 {
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color:#169ae0;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: white;
    font-size: 1em;
    }

.otros13 {
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color:#169ae0;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: white;
    font-size: 1em;
    }
.unirse{
      display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color:#169ae0;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: white;
    font-size: 1em;
    }

.otros8 {
         display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 1em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 10px;
    background-color: rgba(93, 97, 100, 0.91);
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-size: 1em;
    }

.club{
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 1em;
}

.club1 {
   display: flex;
     justify-content: center;
}

.club2{
    display: flex;
     justify-content: center;
     text-align: center;
    color: #626262;
    padding: 1em;
    text-align: center;
    margin: 3em 1em 1em 1em;
   
}
.club3{
    display: flex;
     justify-content: center;
     text-align: center;
    border: 1px solid;
    border-radius: 11px;
    color: #626262;
    border-style: solid;;
    margin: 0em 4em 0em 4em;
    padding: .50em;
    text-align: center;
    background-color: #00ceff
   
}

.confirmacion{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    border:1px solid;
    border-color: rgba(0, 0, 0, 0.36);
    border-radius: 10px;
    color: rgb(8, 8, 8);
    border-style: solid;;
    padding: 1em 1em 1em 1em ;
    background-color: rgba(255, 255, 255, 0.9);
    width: 90%;
    margin-top: calc(100% - 18em);
    }

.confirmacion h1{
    font-size: 1.2em;
    margin: 0em 0em 1em 0em;
}
.reservar {
    border: 1px solid;
    border-radius: 11px;
    color: darkgrey;
    border-style: solid;;
    margin: 0.1em auto;
    padding: 20px;
    text-align: center;
    background-color: #00ceff;
}

.resevar h3 {padding: 0 0 0 1px}

.barramenu {
     display: flex;
    justify-content: space-between;
    align-items: center;
    width:95%;
    padding: .50em 0em 0em 1em;
    margin: 0em .1em 0em .1em;
    
}

.volver { position: fixed
   color: white;
    font-size: 130%;
    
}


.contenedor-titulo {
     width: 100%;
    height: 100%;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;

}
.contenedor-titulo img{ position: fixed
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0em 0em .20em 0em ;
     width: 50px; 
    display: inline-block;

}
menu {
position: fixed;
z-index: 9990;
left: -50%;
height: 100%;
width: 50%;
transition: all .3s ease;}

nav {margin: 2em 0em 0em 0em}

nav h2 {background-color: #343434;
    margin: 0.5em;
padding: 0.5em 0em 0.5em 0em;}

.canchas{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    width: 70%;
     margin: auto;
    
}

.sectioncalendario {
    background-color: white;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85vw;
    max-width: 1000px;
    top: 5em;
    padding: 2em;
     box-shadow: 0 4px 11px rgba(32, 20, 36, 0.72);
}

.calendario1 {
     display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    color: #782119;
    font-family: 'Open Sans', sans-serif;
   font-weight: 600;
}
.calendario1 h2{
    margin-bottom: 1em;
    margin-top: .5em;
}
.fechascalendario{
    display: flex;
     width:110%;
     border-radius: 10px;
    background-color: #e3e3e3;
    padding: .2em .1em .2em .1em;
    margin-bottom: .7em;
}
.fechascalendario h3{
    display: flex;
    font-family: 'Open Sans', sans-serif;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: .6em;
    color: black;
     margin: .5em .5em .5em 0em;
}
.fechascalendario h4{
    display: flex;
    font-family: 'Open Sans', sans-serif;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: black;
    font-size: .9em;
    margin: .5em .5em .5em .5em;
    width: 50%;
} 
.fechascalendario img{
    
    width: 3vw;
}
nav { 
    box-sizing: border-box;
    margin: 1rem 1rem 1rem 1rem;
    padding: .50rem;
    text-align: center; 
}

h1 {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-decoration: none;
    color: black;
    font-size: 1.5em;
    padding: .50rem;
    text-align: center; 
    
}
h2 {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    text-decoration: none;
    font-size: 1em;
    padding: .1rem;
    text-align: center; 
    
}

h4{ 
    font-family: 'Open Sans', sans-serif;
   margin: 1rem

}
h5{
    font-family: 'Open Sans', sans-serif;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
        color: white;
}

footer {
    font-size: .75em; 
    color:black;
    padding: 1rem; 
    margin: 5rem 0rem 2rem 0rem;
    box-sizing:border-box ;
     background-color: #7e7e7e;
    
}

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

/*
----------------
encabezado
----------------
*/


#logo {
    display: block;
    width: 5em;
}

#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;

    /* caja flexible */
    display: flex;
    /* centrado en la horizontal */
    justify-content: center;
    /* centrado en la vertical */
    align-items: center;
}


/* menu desplegable */



.usuarioo {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 1em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
}
.usuarioo img {
    border-radius: 50%;
    width: 25vmin;
    height: 25vmin;
    max-width: 15em;
    max-height: 15em;
    border: 4px solid gray;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .25) inset, 0 .35em .5em rgba(0, 0, 0, .25);
}


.sectionequipo1 p {
    display: flex;
    align-items: center;
    align-content: center;
    align-items: center;
    align-content: center;
    max-width: 120%;
    margin: 1em;

}
.galeria {
    padding-bottom: 2em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transition: all 1s ease;
}

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

.galeria h2 {
    width: 100%;
    padding-top: 0em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
    text-align: center;
    font-size: 1.3em;
}

.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;
    line-height: 1.25em;
    position: absolute;
    text-align: center;
    height: 100%;
    top: calc(100% - 2em);
    left: 0;
    right: 0;
    transition: all .5s ease;
    
}

.galeria 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: .5em;
    left: .5em;
    right: .5em;
    transition: all .3s ease-out;
}

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


.textos {
    padding: 1em;
}

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

.subir {
    text-decoration: none;
    color: rgba(26, 123, 206, 0.93);
    font-weight: bold;
}

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



@media (min-width: 30em) {
    
    .contenedor-titulo img {
    height: 80px;
    width: 80px;}
    
    .iconDiv {
     display: flex;
    justify-content: center;
     align-items: center;
    align-content: center;
    margin-top: 80px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100px;
    height: 200px;
    width: 30%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);}
    
    .iconDiv img {height: 110px;}
    main p {font-size: 1.3em;}
    header nav {min-width: 20vw;}
    .galeria h2  {font-size: 2em;} 
    .otros {width: 40%;}
    .otros5 {width: 80%;}
    .otros11{width: 80%;}
    .otros11 img{height: 100px;padding-left: 1em;}
    .reloj {margin-bottom: 0em;}
    .reloj img {height: 4vw;margin: 0em 1em 0em 0em;}
    
    .otros12 {
    display: flex;
    flex-direction:row;
    padding: 1em 2em 1em 1em;
    align-items: center;
    justify-content: space-between;
     width: 80%;}
    
     .confirmacion{ margin-top: calc(100% - 35em);}
    .confirmacion h3{font-size: 1.5em; padding-bottom: 1em;}
    .confirmacion h1 {font-size: 1.5em;}
    .otros12 h2{font-size: 1.5em; width: 20%;}
    .otros12 h6{font-size: 1.3em;}
    .omc1 h1 {height: 3em; }
         
    .otros6 { 
        display: flex;
        flex-direction:row;
        padding: 1em 2em 1em 1em;
        width: 75%;
        justify-content: space-around;
        align-items: center;}
    
    .otros6 h2 {font-size: 1.5em;width: 70%;}
    .otros6 h6{font-size: 1.3em;padding-right: 1em;}
    
    .otros10 {
    display: flex;
    flex-direction: row;
    padding: 1em 1em 1em 1em;
    width: 75%;
    justify-content: space-between;
    align-items: center;}
    
    .otros10 h2{font-size: 1.5em; width: 70%;}
    .otros10 h6{font-size: 1.3em;}
    .otros7 { width: 30%;margin: 1em;}
    .otros7 h5{text-align: center;}
    .otros13 {width: 80%;margin: 1em;}
    .reloj h2{ font-size: 1.5em;}
    .otros13 h5{text-align: center;}
    .unirse {width: 30%;margin: 1em;}
    .unirse h5{text-align: center;}
    .otros5 img {height: 80px; margin-left: 1em;}
    .otros8 {width: 30%; margin: 1em;}
    .lugares2 {text-align: center;margin: 1em 2em 1em 3em;}
    
    .como1 { width: 70%; justify-content: space-around;}
    .como1 img {width: 60px;height: 60px;}
    .principal {margin-top: 5vw;}
    .sectioncalendario img{ width: 40vw;}
    .calendario1 {width: 60%; }
    .calendario1 img{width: 3vw;}
    .fechascalendario h3{font-size: 1em; }
    .fechascalendario h4 {font-size: 1em;width: 40%; }
    video {width: 50%;height: auto;}
}