@charset "utf-8";

body {background-color: rgb(201, 178, 255);
    max-width: 340px;
}
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}
img { display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80%;
    max-width: 100%;
    margin-bottom: -5em;
}

/*--------iniciar sesion------*/
.cuerpo {
    background-color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #F2F2F2;
    min-width: 100%;
}
.headerinicio {
    min-width: 100vw;
    height: 20em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    background-image: linear-gradient(to left, #70A364,#C7565B, #5C779D);
}
.headerinicio img{
    width: 50vw;
    margin-bottom: 6em;
    max-width: 300px;
}
.maininicio{
    min-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sectioninicio {background-color: white;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    width: 50vw;
    max-width: 300px;
    top: 15em;
    padding: 2em;
    box-shadow: 0 4px 15px rgba(32, 20, 36, 0.25);
}
.boton2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: 3.5em;
    padding: 1em;
    border-radius: 20px;
    background-color: #70A364;
    box-shadow: 0 3px 6px rgba(32, 33, 36, 0.28);
    color: white;
    font-family: 'Nunito', sans-serif;
    color: white;
    font-size: 1em;
    font-weight: 700;
}
.omc{
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
.omc h6{
    font-family: 'Open Sans', sans-serif;
    font-size: .75em;
    margin-top: .5em;
    font-weight: 400;
    color: #514c4c;
}
.ntc{
    font-family: 'Open Sans', sans-serif;
    font-size: .9em;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #514c4c;
}
.ntc a{
    margin-top: .3em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #514c4c;
}
.registrarform {
    display: block;
    width: 100%;
    max-width: 500px;
}
.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: 20px;
    background-color: #eeeeee;
    color: #514c4c;
}

  /* inicio */

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

body {
    font-family: "trebuchet ms", arial, helvetica, sans-serif;;
    background-color: rgb(201, 178, 255);
    min-height: 100vh;

    /* caja flexible*/
    display: flex;

    /* dirección de sus elementos */
    flex-direction: column;
    
    /* organización de los elementos según ele eje principal
        (vertical por la propiedad anterior) */
    justify-content: flex-start;
max-width: 340px;}
#titulo{ display: flex;
font-size:1.5em;
color: white;
justify-content: center;
    margin-bottom: 0;
width: 50%;
}
ul { list-style: none;
    margin-top: 0;
    

}
header,
footer {
    background-color: rgb(53, 5, 163);
    
}
header {
    justify-content: flex-end;
    align-items: center;
padding: 0.3em;}
#logo {
    display: block;
    width: 5em;
    color: white;}
svg{display: flex;
margin-right: -2.2em;
margin-top: 0.3em;
margin-left: 4em;
justify-content: flex-end;}
header > ul {
    /* caja flexible */
    display: flex;
    margin-left: 19em;
    margin-top:0;
        width: 2%;
    
}
header > ul > li {
    width: 2em;
    height: 2em;
    margin-left: .25em;
    margin-top: -2em;
    
    /* caja flexible */
    display: flex;

}
header > ul > li > a {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    text-decoration: none;
    font-weight: bold;

    display: flex;
 justify-content: center;
    align-items: center;
    

}
header nav {
    background-color: rgb(0, 0, 0);
    color: white;
    
    /* para salir del "flujo de información" del fondo 
        y colocase en una capa superior fija */
    position: fixed;
    right: -50vw;
    top: 0;
    height: 100vh;
    min-width: 35vw;
    transition: all .6s ease;
    z-index: 999;  
    
    /* transición suave */
    transition: all .6s ease;
}
header nav:target {
    right:0;

}
.usuario {
    margin: auto;
    text-align: center;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px rgba(255,255,255,.25);
justify-content: center;}
header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
}
header nav a:hover {
    color: white;
}
#x {
    
    position: absolute;
    left: 0;
    top: 0;
    color: white;
    
}


h7{display: flex;
justify-content: flex-start;
font-size: 2.3em;
    margin-top: 0.5em;
    margin-bottom: 0;
color: white;
    margin-left: 1em;
}


.juri{display: flex;
width: 15%;
margin-top: 1.5em;
margin-left: 1.1em;}

.dav{display: flex;
width: 11%;
margin-top: 1.8em;
margin-left: 18em;}
.partido{
margin-left: 4.3em;
margin-top: 3.2em;
    width: 20%;
}
.partido1{ width: 20%;
margin-left: 13.5em;
    margin-top: -1.3em;
}
.gol{display: flex;
font-size: 1.4em;
justify-content: center;
width: 20%;
margin-top: -1em;
margin-left: 6.2em;}
svg{display: flex;
margin-left: 0em;}
.container{ width: 500px;
overflow: auto;
justify-content: center;

}

#campeones{ display: flex;
justify-content: center;
font-size: 1.56em;
    margin-top: 2em;
    margin-bottom: 0;
color: #a81e1e;
    margin-left: 0;
font-variant-caps: all-petite-caps}


.copa{font-size: 1em;
font-variant-caps: all-small-caps;
margin-top: 0.5em;
    
}

.arg{display: flex;
width: 340px;
    justify-content: center;
    margin-top: 2em;}

#torneo{ display: flex;
justify-content: center;
font-size: 1.56em;
    margin-bottom: 0;
color: white;
    margin-left: 0;
font-variant-caps: all-petite-caps}
.cc{display: flex;
font-size: 0.8em;
margin-left: 1em;
    flex-direction: column;
    color: white;
}

.torneo{background-color: rgb(31, 3, 96);
  width: 90%;
    height: 10em;
    padding: 1em;
    border-radius: 20px;
    margin-left: 1em;
    margin-right: 1em;
}



#seleccion {margin-right: 1.5rem;
    margin-left: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
margin-top: 0rem;}
a .deporte1{ margin: 0;
padding: 0;
cursor: pointer;}
#seleccion figure {
    width: 100vmin;
    height: 45vmin;
    position: relative;
    overflow: hidden;
    margin-left: 0em;
margin-bottom: 0.1em;}

#seleccion .seleccion1 {
    background-color: rgba(46, 0, 198, 0.5);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.6em;
  position: absolute;
    height: 100%;
    width: 100%;
    top: calc(100% - 1.8em);
    transition: all .5s ease;
justify-content: center;}

#seleccion figure:hover .seleccion1 {
    background-color: rgba(46, 0, 198, 0.5);
    top: 30%;
    transition: all .5s ease;}
#seleccion .seleccion1 span {
    display: block;
    font-size: 1em;
    color: #f0f0f0;
    font-weight: 600;
    margin-top: 1em;
    line-height: normal;}





.slider-inner{
    /*tamaño imagen*/
    width: 340px;
height: 260px;
position: relative;
overflow: hidden;
float: left;

border:#666 solid 1px;
margin-top: 6em;
justify-content: center;
align-content: center;}
.slider-inner img{display: none;
    /*tamaño de la imagen*/
width: 340px;
height: 260px;
}
.slider-inner img.active{display: inline-blockactive;
}

.img-responsive{display: flex;
width: 100%;
     position: relative;
    overflow: hidden;
}
section {
    border-top: solid 1px rgba(0,0,0,.1);
}
.container{ display:flex;
    margin-top: 0em;
    justify-content: center;
}
img{display: flex;
justify-content: center;
overflow: hidden;
}
.barra {
background-color: rgb(53, 5, 163);
display: flex;
    padding: 0.5em;
justify-content: space-between;
align-content: center;    
position: fixed;
bottom: 0em;
width: 100%;
height:7%;
max-width: 340px;}
.barra li{display: flex;
    justify-content: center;
    width: 25%;
    height: 100%;}
.fa-home{ color:aliceblue;
    font-size:2em;}
.fa-youtube{
    color:aliceblue;
    font-size:2em;}
.fa-calendar-alt{
    color:aliceblue;
    font-size:2em;}
.fa-futbol{
    color:aliceblue;
    font-size:2em;}

  /* club da vinci */

#quienessomos{display: flex;
font-size: 1.5em;
font-variant-caps: all-petite-caps;
    margin-top: 1em;
margin-bottom: 1em;
    margin-left: 0.5em;
    color: black;
    justify-content: flex-start;
}
#texto{ display: flex;
font-size: 0.8em;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;}
h4{display: flex;
font-size: 0.8em;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em; }
.futsal{ display: flex;
margin: 1em;
justify-content: center;
    align-content: center;}
iframe{ display: flex;
width="80%"; 
    margin-top:1.4em;
    margin-bottom: 0em;
position: static;}
.futsal{
    width: 50%;
    margin-left: 4.5em;
    margin-bottom: 2em;
}

  /* reservar cancha */

h2{ display: flex;
color: rgb(124, 122, 122);
font-size: 0.5em;
justify-content: center;
margin-top: 0.5em;
}
.datos{ display: flex;
margin-top: 3em;
font-size: 0.9em;
margin-bottom: 3em;
justify-content: center;
align-content: center;
    margin-left: 1em;
    margin-right: 1em;
}
.form-left{ display: flex;
justify-content: center;}
.form-right{ display: flex;
justify-content: center;
    width: 100%}
button{ display: flex;
    font-size: 1em;
color: white;
background-color: rgb(53, 5, 163);
justify-content: center;
    margin-left: 40%;
        margin-top: 1.5em;}
input{ display: flex;
    width: 50%;
padding: 0.2em;
justify-content:center;
  margin-top: 0em;
    margin-bottom: 1em;}
.campo{display: flex;
color: rgb(124, 122, 122);
font-size: 0.7em;
justify-content: center;
margin-top: 0.5em;}

/* asociarse al club */

.datos1{ display: flex;
margin-top: 3em;
font-size: 0.9em;
margin-bottom: 4em;
justify-content: center;
align-content: center;
    margin-left: 1em;}
.form{ display: flex;
justify-content: center;
    font-size: 1.2em;}
.right{ display: flex;
justify-content: center;
    width: 100%}
button{ display: flex;
    font-size: 1em;
color: white;
background-color: rgb(53, 5, 163);
justify-content: center;
    align-content: center;
    margin-top: 1.5em;}
input{ display: flex;
    width: 50%;
padding: 0.2em;
justify-content:center;
  margin-top: 0em;
     margin-bottom: 1em;}
.campo{display: flex;
color: rgb(124, 122, 122);
font-size: 0.7em;
justify-content: center;
margin-top: 0.5em;}

 /* contacto */

.mapa{ display: flex;
margin: 1em;
max-width: 310px}
.info{ display: flex;
    font-variant-caps:all-small-caps;
    margin-left: 1em;
}
.mail{display: flex;
font-variant-caps: all-small-caps;
margin-left: 1em;
font-size: 1.2em;}
.redes { display: flex;
list-style: none;
margin-left: em;}
.redes1{ display: flex;
list-style: none;
margin-left: 1.1em;
 margin-top: 0.5em;
color: black;}
.web{display: flex;
width: 5%;
    height: 10%;
    margin-left: 1em;
color: white;
margin-right: 0.5em;}
.web1{display: flex;
width: 5%;
    height: 10%;
    margin-left: 0em;
    margin-top: 0.1em;
color: white;
margin-right: 0.5em;}

 /* deportes */

#deportes {margin-right: 1rem;
    margin-left: 1rem;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
margin-top: 0rem;}
a .deporte1{ margin: 0;
padding: 0;
cursor: pointer;}
#deportes figure {
    width: 100vmin;
    height: 45vmin;
    position: relative;
    overflow: hidden;
    margin-left: 0em;
margin-bottom: 0.1em;}

#deportes .deporte1 {
    background-color: rgba(46, 0, 198, 0.5);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.7em;
  position: absolute;
    height: 100%;
    width: 100%;
    top: calc(100% - 2em);
    transition: all .5s ease;
justify-content: center;}

#deportes figure:hover .deporte1 {
    background-color: rgba(46, 0, 198, 0.5);
    top: 50%;
    transition: all .5s ease;}
#deportes .deporte1 span {
    display: block;
    font-size: 1em;
    color: #f0f0f0;
    font-weight: 600;
    margin-top: 1em;
    line-height: normal;}
.futsal{background-size: cover; }
.volley {background-size: cover;}
.yoga {background-size: cover;}
.patin {background-size: cover;}
.taekwondo {background-size: cover;}
.sport{display: flex;
width: 340px;
    justify-content: center;
    margin-top: 2.8em;
    
}
.deporte1 a{color: white;
margin-top: 2em;}

/* videos */

.subido{display: flex;
}

.youtube{ display: flex;
justify-content: center;
    align-items: center;
  flex-direction: column;
}
.resumen{ display: flex;
justify-content: center;
    color: white;
    font font-variant-caps: all-small-caps;
font-size: 1.3em;
margin-bottom: 0em;
margin-top: 2em;
position:relative;}
.you{display: flex;
width: 60%;
    height: 10em;
justify-content: center;
    align-content: center;
    flex-direction: column;
    
}
h6{ display: flex;
justify-content: flex-start;
font-size: 2.3em;
    margin-top: 2em;
    margin-bottom: 0;
color: white;
    margin-left: 0;}

.vivo{display: flex;
justify-content: center;
color: white;
background-color: rgba(255, 147, 0, 0.68);
width: 80%;
border-radius: 0.7em;
margin-left: 2.5em;
margin-top: 7em;
}

/* futsal */

h4{display: flex;
justify-content: flex-start;
font-size: 2.3em;
    margin-top: 1.5em;
    margin-bottom: 0;
color: white;
    margin-left: 0;
}
.femenino{display: flex;
font-size: 0.8em;
margin-left: 1em;
    flex-direction: column
}
.textofemenino{
    margin-top: .5em;
    margin-bottom: 7em;
    margin-left: 1em;
}
.prof{display: flex;
font-size: 1em;
margin-left: 1em;
font-variant-caps: all-small-caps;
font-style: italic}
.horarios{display: flex;
color: white;
font-size: 1.5em;
  margin-left: 0.5em;
margin-bottom: 0.5em;
margin-top: 1em;}
.tabla{display: flex;
    margin-bottom: 1em;
    margin-left: .5em;
    margin-right: 1em;
    border:1px solid;
    border-collapse: collapse;
max-width:300px;}
.tabla td{
    text-align: center;
border: 1px solid;
    font-variant-caps: all-petite-caps;
    font-size: 1em;
    padding: .5em .1em .5em .1em; 
    max-width:300px;
}
.tabla th{ background-color:rgb(87, 65, 209);
color: white;
font-size: 1.2em;
max-width: 310px;
font-variant-caps: all-petite-caps;
padding: .5em .01em .5em .1em;
max-width:300px;}
.tabla td:hover{ background-color: rgb(39, 124, 8);
max-width:300px;}

/* voley */

.tabla2{display: flex;
    margin-bottom: 1em;
    margin-left: 1em;
    margin-right: 1em;
    border:1px solid;
    border-collapse: collapse;max-width: 300px;}
.tabla2 td{ text-align: center;
border: 1px solid;
    font-variant-caps: all-petite-caps;
    font-size: 1em;
    max-width: 300px;
}
.tabla2 th{ background-color:rgb(87, 65, 209);
color: white;
font-size: 1em;
max-width:300px;
padding: .5em .2em .5em .2em;
font-variant-caps: all-small-caps;}
.tabla2 td:hover{ background-color: rgb(222, 0, 0);}
.objetivos{display: flex;
display: flex;
font-size: 0.8em;
margin: 1em;
margin-bottom: 5em;}
   
/* patin */

.descripcion{display: flex;
display: flex;
font-size: 0.8em;
margin: 1em;}
 

/* taekwondo */

.tae{display: flex;
margin-bottom: 0;
margin-left: 1em;
margin-top: 2em;}

/* eventos */

.tabla4{display: block;
    margin-left: 0.3em;
    border:2px solid;
    border-collapse:collapse;
    background-color: white;
   max-width:300px;}
.tabla4 th{background-color:rgb(87, 65, 209);
    color: white;
    font-size: 1.5em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    padding: .1em .5em .1em .1em;
    text-align:center;
    max-width:300px;
}
.tabla4 td{
    text-align: center;
    font-size: 1.3em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
  max-width:300px;
    padding: .15em 1em .15em 1em
}
.tabla4 td:hover{ background-color: rgb(53, 5, 163);}
.tabla5{display: block;
    margin-bottom: 1em;
    margin-left: 2.4em;
    margin-right:0em;
    margin-top: 0em;
    border:2px solid;
    border-collapse:collapse;
    background-color: white;
    max-width: 260px;}

.tabla5 th{background-color:rgb(87, 65, 209);
    color: white;
    font-size: 1.5em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    text-align: center;
    padding: .1em .65em .5em .5em;
    line-height: .8em;}

.tabla5 td{font-size: 1.3em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    text-align:center;
    padding: 0em 0em .2em 0em;
}

.tabla5 td:hover{ background-color: rgb(53, 5, 163);}
.tabla6{display: block;
    margin-left: 1em;
    border:2px solid;
    border-collapse:collapse;
    background-color: white;
    max-width: 313px;
margin-top: 0em;}

.tabla6 td{ font-size: 1.5em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    text-align:center;
    padding: 0em 0em .2em 0em;
}
.tabla6 th{background-color:rgb(87, 65, 209);
    color: white;
    font-size: 1.5em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    text-align: center;
    padding: .5em .65em .5em .5em;
    line-height: .8em;
}
.tabla6 td:hover{ background-color: rgb(53, 5, 163);}
.posiciones{display: flex;
justify-content: center;
color: white;
background-color: rgba(255, 147, 0, 0.68);
width: 80%;
border-radius: 0.7em;
margin-left: 2.5em;
margin-top: 1em;
}

.tabla7{display: block;
    margin-left: 0.5em;
    border:2px solid;
    border-collapse:collapse;
    background-color: white;
    max-width: 313px;}
.tabla7 th{background-color:rgb(87, 65, 209);
    color: white;
    font-size: 1.5em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    padding: .1em .1em .1em .1em;
    text-align:center;
    justify-content: space-between;
    
}
.tabla7 td{
    text-align: center;
    font-size: 1.3em;
    font-variant-caps:all-small-caps;
    font-family: 'Lato';
    max-width: 315px;
 padding: 0.33em;

}
.tabla7 td:hover{ background-color: rgb(53, 5, 163);}





.wrap{width: 340px;
margin: 2px auto;}

.tabs{width: 100%;
    list-style: none;
    background-color: rgb(90, 0, 212);
    display: flex;
    text-align: center;
    
}
.active{background-color: aquamarine}

.tabs li a .tab-text{color: rgb(255, 255, 255);
text-decoration: none;
font-size: 1em;
display: block;
padding: 1em;
flex-grow: 1;
}

.secciones{
    width: 100%;
    background-color: #b89cef;
}

.secciones article{padding: 0.5em;
}

.secciones article p{text-align: justify;}






/* posiciones*/

.tabla1 {display: flex;
    margin-bottom: 5em;
    margin-left: .5em;
    margin-top: 1em;
    border:1px solid;
    border-collapse: collapse;
background-color: white;
max-width:300px;}
.tabla1 td{ text-align: center;
border: 1px solid;
font-variant-caps: all-petite-caps;
font-size: 1em;
max-width: 310px;
padding: .5em .5em .5em .5em;
text-align:center;
}
.tabla1 th{ background-color:rgb(87, 65, 209);
color: white;
font-size: 1.2em;
    max-width: 310px;
    word-spacing: 0.5em;
    padding:  1em .1em 1em .5em;
    font-variant-caps: all-petite-caps;
    
}
.tabla3 td:hover{ background-color: rgb(53, 5, 163);}
.clubes{display: flex;
width: 100%;
justify-content: center;
flex-grow: 1;
}
    
    
@media screen and (max-width: 340px ){ 
    
 }   

/*codigo*/
.datos{font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}
#qr{width: 50%;
margin-left: 4em;
margin-top: 2em;
margin-bottom: 2em;}

.conf{font-variant-caps: all-petite-caps;
font-size: 2em;
justify-content: center;
    margin-left: 0.5em;
    margin-right: 1em;
}
.feli{ font-size: 0.7em;
margin: 1em;}

.qr{justify-content: center;
margin-left: 5.5em;}