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

body {font-family: 'Muli', sans-serif;}
img {
    max-width: 100%;
    height: auto;
}
ul { list-style: none; }
/*menu*/
header{position:relative;
width: 100%;
height: 4em;
background:#505050;
padding: .5em;
}
#logo{
position: absolute;
z-index: 9999;
width:9em;
}
#logo2{ display: none;
position: absolute;
z-index: 9999;
width:3em;
}
#primary-nav-button {
  background: transparent;
  border: 1px solid #aaa;
top: .5em;
 right: 1em;
   position: absolute;
    z-index: 9999;
  text-decoration: none;
  color: white;
  text-align: center;
  font-weight: 100;
  font-size: .8em;
 
}
#primary-nav-button:hover {
  background: rgba(0,0,0,0.05);
}
#primary-nav-button.selected {
  background: rgba(0,0,0,0.1);
}
#primary-nav-button:before {
  /* content: '☰'; */
  content: '\2261';
  display: block;
  font-size: 36px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.05;
  height: 1em;
  width: 1em;
}
.menu li {
letter-spacing: .1em;
margin: 0 .1em 0 .5em;
position: relative;
z-index: 9999;
}
.menu .sub-menu li {
  width: 100%;
}
.menu li a { 
  display: block;
  text-decoration: none;
}
#top-nav li a { display: flex;
width: 2em;
  margin: 0 .1em 0 .5em;
   position: relative;
    z-index: 9999;
  color: white;
  padding: .5em .5em .5em .5em;
}
#top-nav .sub-menu {
  background: rgba(80, 80, 80, 0.79);
width: 10em;
    text-align: center;
}
#top-nav .sub-menu li.selected > a {
  background: #2c2b2b;
  color: #ffffff;
    width: 100%;
    
}
#primary-nav li a {
  color: #ffffff;
  font-weight: bold;
  padding: 10px;
    text-align: center;
	width: 100%;
	margin: auto;
}
#primary-nav li.active > a,
#primary-nav li.selected > a {
  background: rgba(80, 80, 80, 0.6);
  color: #ffffff;
}
.downarrow {
  	background: none;
  display: inline-block;
	  padding: 0;
  	text-align: center;
  min-width: 3px;
}
.sub-menu .downarrow {
  position: absolute;

  padding-right: 10px;
}
.downarrow:before {
content: '\25be';
display: block;
font-family: sans-serif;
font-size: 1em;
line-height: 1.1;
width: 1em;
height: 1em;
}

.menu .sub-menu {
  display: none;
  position: absolute;
  max-height: 1000px;
    z-index: 9999;
	width: 100%;
}
#primary-nav .sub-menu {
  background: rgba(54, 54, 54, 0.79);
 width: 100%;
  z-index: 9999;
}
#primary-nav .sub-menu li {
  border-bottom: 1px solid #505050;
}
#primary-nav .sub-menu li:last-child {
  border-bottom: 0;
}
#primary-nav.mobile {
  display: none;
  position: absolute;
  top: 100%;
	right: 0;
  background: rgba(80, 80, 80, 0.92);
  width: 100%;

    z-index: 9999;
}
#primary-nav.mobile li {
  width: 100%;
  margin: auto;
  border-bottom: 1px solid white;
}
#primary-nav.mobile li.selected > a {
  border-bottom: 1px solid #ffffff;
}
#primary-nav.mobile li a {
  padding: 1em;
	width: 100%;
}
#primary-nav.mobile .sub-menu {
position: relative;
width: 100%;
}
.mobile .downarrow,
.mobile .sub-menu .downarrow {
  position: absolute;
  right: 0;
  padding-right: 5%;
}
#primary-nav.mobile .sub-menu .downarrow:before {
  content: '\25be';
}
#primary-nav-button.mobile {
  display: block;
}
.fila {
    align-content: center;
    align-items: center;
    display: flex;
     justify-content: space-between;
     align-items: center;
}
/*slider*/
.slide_viewer {
  height: 40vh;
   width: 140%;
   overflow: hidden;
  position: relative;
}

.slide {
  display: none;
  height: 16.5em;
  position: absolute;
  width: 100%;
    z-index: 1;

}
.slide:first-child {
  display: block;
}
.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
    top: 10em;
    z-index: 10;
}
.slide_btn {
  color: gray;
  font-size: 42px;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.slide_btn.active, .slide_btn:hover {
  color: #ff0000;
  cursor: pointer;
}
.directional_nav {
  top: 0;
  margin: 0 auto;
  max-width: 3200px;
  position: relative;
 z-index: 15;
}
.previous_btn {
 top: 1;
    width: 1em;
    bottom: 2em;
  left: 0;
  margin: auto;
  position: absolute;
  
}
.next_btn {
  bottom: 2em;
  margin: auto;
  position: absolute;
  right: 0;
  top: 1;
color: red;
    
}
.previous_btn, .next_btn {
  cursor: pointer;
  height: 13em;
  opacity: 0.5;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 50px;
}
.previous_btn:hover, .next_btn:hover {
  opacity: 1;
}
.leer { position: absolute;
    top: 9em;
    left: 8em;
    font-size: .9em;
   color: white;
font-weight:bolder; 
z-index: 3;
text-decoration: none;
background-color: red;
width: 9em;
    height: 2em;
    text-align: center;
  padding: .4em;
   box-shadow: 1px 1px rgba(0, 0, 0, 0.58); 
}
main div  h2 { position: absolute;
    top: 2em;
    text-align: center;
    width: 100vw;
    font-size: 1.8em;
   color: white;
   text-shadow: 2px 1px rgb(0, 0, 0); 
font-weight:bolder; 
z-index: 123;
 
}

/*NOTICIAS*/
 main > section > a {position: absolute;
    top: 19em;
    left: 28em;
font-size: .6rem;
color: white;
margin: .2em;}
.sub1{ text-align: left;

    margin: 1em 0 0 0;
      color: #5f5f5f;
    font-size: 1.7em;
}
.sub1:after { content: " ";
    width: 55%;
    height: 2px;
    background-color: darkgreen;
    display: block;
    position: absolute;
    left: 0;
}
.flechaverde { 
    width: 2em;
 }
.subnoti {color: white;}
main section article a div {text-decoration: none;
color: white;
position: absolute;
z-index: 1; 
top: 3em;  
left: .5em;
}
.noticias {margin: 2em 0 0  0;

}
main section article a {  display: block;
position: relative;
text-decoration: none;
color: #3e3e3e;}

main section article a p span {font-weight:900;
color: #176022;
letter-spacing: .1em;}

/*ASIDE Y FOOTER*/
aside img {width: 2.5em;
 margin: .5em;  
}
aside div {text-align: center;}
aside {background-color: #505050;
padding: .5em;
}
footer p {font-size: .9rem;
padding: .6em;
background-color: #505050;
color: white}

/*fixture*/
.titulo3{ text-align: left;

margin-top: .8em;
position: relative;
color: #5f5f5f;
font-size: 1.5em;
}
.titulo3:after { content: " ";
width: 30%;
height: 2px;
background-color: darkgreen;
display: block;
position: absolute;
right: .5em;
top: 1.3em;
	
}
.subtitulo { 
color: #247e24;
padding: .5em;}

.escudos {height: 3em;
display:flex;
justify-content: space-between;
	margin: .5em 0 2em;
	
	align-content: center;
	align-items: center;
}
.escudos p { font-size: .8em;}
.logo {
    width: 3em;
}
.logo2 {width: 3em;
	margin: 1em;
}
.goles { 
padding: .1em;
margin: .1em;
width: 90%;
}
.numero{font-size: 2em;
width: 10%;}
.ver { 
margin:0 0 1em 0;
text-decoration: none;
background-color: darkgreen;
width: 9em;
    height: 2em;
    text-align: center;
  padding: .4em;
   box-shadow: 1px 1px rgba(0, 0, 0, 0.58); }
.ver a { text-decoration: none;
	   color: white;
	display: block;
}
.datos {display: flex;
	height: 3.5em;
	justify-content: center;
	align-items: center;
	
	font-size: .8em;
}
.datos p {margin: 0 .5em 0 .5em}
ul li div h3:last-of-type{ 
    margin: 1em 1em 0 0
}
.partido1 
{background-color: gainsboro;
margin:  0 0em  .5em  0em;  }
.videoresponsive {
position: relative;
    margin: 1em 0 1em auto;
    height: 0;
    padding-bottom: 56.25%;
}
.videoresponsive iframe {
position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}
.botones { 

height: 2.5em;
display: flex;
justify-content: space-between;
    margin: .5em;
}
.botones a { text-decoration: none; 
    padding: .75em;
    color: white;
display: block;
background-color: darkgreen;
top: 1em;}

/*Proxpartido*/ 
table {   
  width: 100%; 
  border-collapse: collapse;

}
.table {width: 100%;
 margin: auto;
background-color: rgba(0, 0, 0, 0.76);
color: white;
text-align: center;
padding: .5em 0 .5em 0;}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: darkgreen; 
}
.num {text-align: center;}
tr { 
  background: #105710; 
  color: #ffffff; 
  font-weight: bold; 
}
td, th { font-weight: 400;
  padding: 6px; 
  border: 1px solid white; 
  text-align: left; 
}
iframe { width: 100%; 
height: 27em;
}

/*Institucional*/

section {padding: 1em.6em  1em .6em ;}
h4 {color: darkgreen;
text-align:left;
margin: 1em 0 .4em 0;
    font-size: 1.2em;
}
h4 span {font-weight: 100}
.lista {display: flex;

    justify-content: center;
flex-wrap: wrap}
.autoridades {


color: #3b3b3b;

}
.nombres { margin: 1em 0 0 0;
    width: 50%;
}
main > div {position: relative;
z-index: 1;}

.sl-subtitulo:after {
    content: "";
    display: block;
    height: 3px;
    width: 20px;
    margin: .2em 0 0 0;
}
.sl-subtitulo:after {
    background: #247e24;
}
.autoridades p { color: #035c03;}


.box {margin: 2.4em 0 0 0;
}
 
/* noticia */

.bajada { font-size: 11pt;
font-style: italic;
margin: .5em 0 0 0 }

figure figcaption { font-style: italic;
    font-size: 9pt;



}

.noticia { margin: 0.7em 0 0 0 ;}

.titnoti { text-align: left;
color: #5f5f5f;
    font-size: 22pt;;
}


.fechanoti { color: green;
font-size: 12pt;}

/*contacto*/


.mapa { position: absolute;
top:460px;
right: 0;
width: 42vw;
    margin: 0 1em 0 0;
}

.img4 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/contacto.jpg);   
}
.control {    height: .1em;
    font-size: 13pt;
    padding: 1em;
    margin: 0.2em 0 1em 0;
    border-radius: 2em;

}
.consultatit { font-size: 13pt;
color: grey;

}
.form-contacto { display: flex;
    flex-direction: column;
   width:50vw;
     margin: 1em 
}
.controls1 {
  height: 20vw;
    font-size: 13pt;
    border-radius: 2em;
    

}

/*Inicio login*/
.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:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    background-image: linear-gradient(to right, #464646, grey);
}
.headerinicio img {
    width: 35vw;
    margin-top: 2em;
    max-width: 150px;
}
.maininicio {
    min-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sectioninicio {
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    width: 85vw;
   flex-wrap: wrap;
    height: 35em;
    top: 10em;
    padding: 2em;
    
}
.registrarform {
     width: 100%;
    max-width: 500px;
}
.registrarinput {
    display: block;
    padding: 1em;
    width: 100%;
    height: 3.5em;
    margin-bottom: 1em;
   text-align: center;
    font-weight: 400;
    font-size: .8em;
  background-color: rgba(103, 103, 103, 0);
    color: white;
border: .1em solid;
  border-radius: 20em;
}
.volver {display: block;
    width: 2.5em;
padding: .3em;
 }
.boton2 {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    margin-top: .8em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 4em;
    padding: .1em;
    border-radius: 20px;
    background-color: #3f722a;
    letter-spacing: .1em;
    color: white;
    font-size: .7rem;
    font-weight:300;
}
.boton2 img {width: 2em;
    margin: .5em;
}
.omc {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 2.5em;
}
.omc h6 {
      font-size: .75em;
    margin-top: .5em;
    font-weight: 400;
    color: #ffffff;
}
.unite {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: .9em;
    margin-top: 3em;
       color: #514c4c;
}
.unite a  {
    margin-top: .3em;
 display: block;
    text-decoration:none; 
    font-weight: 700;
    color: #ffffff;
}
/*actividades*/
.img1 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/institucional.jpg);   
}
.img2 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/fixture.jpg);   
}
.img {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/telas.jpg);   
}
.img3 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/voley.jpg);   
    
}
.img9 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/patin.jpg);   
    
}
.img5 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/arqueria.jpg);   
    
}
.img6 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/gimnasia.jpg);   
    
}
.img7 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/yoga.jpg);   
    
}
.img8 {
height: 25vh;  
background-size: cover;
background-position: center center;
 background-image: url(../imagenes/futsal1.jpg);   
    
}
.titulo{
    padding: 18vh 0 2em 0;
    height: 25vh;
    text-align:center;
    font-size:2.5em;
   color: white;
  }
h3 {   margin-bottom: .3em;
    margin-top: 1.5em;
    color: #504f4f;
   
}
.inscripcion{
    font-size: 0.8em;
    color: #d42828;
      font-style: italic;
    margin-top: .4em;

}
.titulofb
{color: black;
    font-size:1em;
border-bottom: .1em solid;

padding-top:5em; }


/* Unite */
.foto {
    width: 20vw;
    margin-top: 1em; 
    
}

.presentacion h3 { display: flex;
    justify-content: center;
    color:darkgreen;
    font-size: 20pt;
    font-weight: 900;
     margin-top: 0.2em;
}


.presentacion { display: flex;
flex-direction: column;
   align-items: center;


}

.form-resgister {
    margin: 2em 0 0 0 ;
    display: flex;
    flex-direction: column;
    align-items: center;

 
}
.controls {
    height: .1em;
    font-size: 13pt;
    padding: 1em;
    margin: 0.2em 0 1em 0;
    border-radius: 2em;
}
.boton {
    width: 50vh;
    background: darkgreen;
    border:none;
    padding: 12px;
    color: white;
    font-size: 17pt;
    border-radius: 2em;
    margin: 1em 0 4em 0;
    
}
/* Segundo tiempo */
.linea { width: 20vw;
    height: .2px;
    background-color: #656262;
    margin-top: .2em;

}
.presentacion { display: flex;
    flex-direction: column; 
    align-items: center; 
    margin-bottom: 1em;}
.mercpago { width:5em;
    margin: 0 0 1.5em 0
}
.tarjeta { width: 60%;
   
 }
.efectivo { width: 80vw; 
    margin-top: 1.5em;
}
.text2 { color:#33ac33;
    font-size: 15pt;
    font-weight: bold;
}
.text { color: gray;
    font-weight: bold;
    font-size: 21pt;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.text3 { font-size:10pt;
    padding: 0;
    margin-bottom: -.5em;
}
.pagoexito { display: flex;
    flex-direction: column;
    align-items: center;
}
.pagoexito img { width:60vw;
margin-bottom: 1em;
    margin-top: 2em;
    margin-left: 2em;
}
.davf { margin-bottom: -1em;
 }
    
@media (min-width: 35em){
    #logo {display: none;}
     #logo2 {display: flex;
position: absolute;
        left: 0;
        top: 0;
z-index: 9999;
width:5em;
    margin: 0 2em;}
      main section article{width: 30%;
    margin: auto;} 
    main section:last-child{ display: flex;
    flex-wrap: wrap;}
    .sub1 {width: 100vw;}
    main section article{width: 49%;
    } 
    main section article:hover {background-color: #c1c1c1} 
    main section article:last-child {width: 100vw;}
    .slide_buttons { top: 11em;
  
}
    .leer { 
  top: 10em; 
left: 20em;


}
  header nav ul { height: 4em;
        width: 65em;
        display: flex;
       position: relative;
    z-index: 999;
        font-size: .5em;
        
    }  
   header nav { 
    padding: 0;
    } 
    .slide_viewer {
  height: 55vh;
   width: 100vw;
   overflow: hidden;
  position: relative;
}
#primary-nav-button
 {        display: none;
    }
}


@media (min-width: 50em) {
    
    header nav { height: auto;
       left: 0;
                position: relative;
    z-index: 9999;
    padding: .5em;
    }
    
    header nav ul { height: 3em;
        width: 60em;
        display: flex;
       position: relative;
    z-index: 999;
        font-size: .8em;
        
    }
   
    #primary-nav-button
 {        display: none;
    }
    header nav a {
    position: relative;
    z-index: 999;
        display: block;
        height: 3em;
        margin: 5em;
  
}
      .sub-menu{position: relative;
    z-index: 9999;
      height: auto;
      text-align: center;
      width: auto;
    font-size: .8em;}

.sub-menu li a{background-color: #505050;
height: 4em; 
       padding: .8em;
}
    .sub-menu li a:hover{ background-color: red;}
.fila {width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;}
#logo2 {position: relative;
top: 0;
width: 2em;}
.leer { 
  top: 20.5em; 
left: 28em;

}
    .leer:hover {background-color: darkgreen;}
main section div  h2 { 
 top: 8.5em;   
width: 100%;
    text-align: center;

}
.slide_buttons { top: 20em;
  
}
.slide_viewer {
    width: 100%;
    height: 27em;
    
}
    main section article{width: 50%;
    margin: auto;} 
    main section:last-child{ display: flex;
    flex-wrap: wrap;}
    .sub1 {width: 100vw;}
    main section article{width: 49%;
        height: 20em;
    } 
    main section article:hover {background-color: #c1c1c1} 
    main section article:last-child {width: 100vw;
    height: 40em}
    aside {margin: auto;
         display: flex;
    padding:  1em 5em 0 5em;}
    aside div {width: 60%;
        margin: auto;}
    aside div img {width: 5em;}
    main section article a div {  top: 5em;}
    main section article a div h3:last-of-type {width: 100%;
    font-size: 1.5em;}
    main div  h2 {font-size: 3em;}
    #logo{  display: none;  }   
    #logo2 {display: flex;
position: absolute;
        left: 0;
        top: 0;
z-index: 9999;
width:6.5em;
    margin: 0 2em;}
}



@media screen and (max-width:600px) { 
    
  

.control {    height: .1em;
    font-size: 13pt;
    padding: 1em;
    margin: 0.2em 0 1em 0;
    border-radius: 2em;

}

  

 .form-contacto { display: flex;
    flex-direction: column;
   width:90vw;
     margin: 0 1em 
    
}
    


.controls1 {
 height: 70vw;
    font-size: 13pt;
    border-radius: 2em;
 }
 
  
  .mapa { position: static;
        width: 100vw;
        
}
    
}