/* Reset css :  Con este código eliminamos márgenes, 
padding y otras propiedades que los navegadores 
añaden automáticamente */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
@import url('https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight');

@font-face

@charset "utf-8"; 


{
    font-family: 'Nunito', sans-serif;
    font-weight: normal;
    font-style: normal;

}

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

body{
	 font-family: 'Nunito', sans-serif;
	 background: #fff;
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    min-height: 100vh;
    flex-wrap: wrap;
    margin: 0;
    padding:0;
}


header{
	background: #000721;
	position: fixed;
	width: 100%;
	padding: 10px;
	z-index: 2;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #000721;
    position: fixed;
    border-bottom:  #9c9ea5 0.5px solid;
    font-family:'Nunito';
}

header ul  {
     box-sizing: border-box;
    list-style: none;
    margin:0.5em;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    
}

header a {margin-top:5px}

header figure{
    margin: 0;
    display: flex;
    justify-content: space-between;
    margin-right: 40px;
}

header figure figcaption{
    position:absolute;
    color: white;
    font-size: 15px;
    margin-left: 35px;
    margin-top: 8px;
    font-weight:900;
}



#menu_on{
	display: block;
	width:30px;
	height: 20px;
	position: relative;
	z-index: 2;
}

#menu_on span{
	width: 100%;
	height: 4px;
	border-radius: 4px;
	display: block;
	position: absolute;
	background: #fff;
	transition: all 0.25s ease;
	transform-origin : 0px 100%;
}

#menu_on span:nth-child(2){
	top: calc(50% - 2px);
}

#menu_on span:nth-child(3){
bottom: 0;
}	
	.visible_menu span:nth-child(1){
		transform: rotate(45deg) translate(-2px,1px); 
	}

	.visible_menu span:nth-child(2){
		opacity: 0;
	}


	.visible_menu span:nth-child(3){
		transform: rotate(-45deg) translate(-3px,3px); 
	}

nav{
	position: fixed;
	top: 0;
	bottom: 0;
	left:-300px;
	width: 300px;
	z-index: 1;
	padding: 90px 30px 30px;
	background: #000721;
	opacity: 0;
	transition: all 0.75s ease;
	font-size: 1.2em;
	overflow-y: auto;
}

.visible_menu{
	position: fixed;
}

.visible_menu nav{
	left: 0;
	opacity: 1;
}

#vivo {color: #d12521;
       border-bottom: 1px solid rgba(255,255,255,0.2);
       font-family: 'Nunito';
       font-weight:900;
}

#vivo:hover{color: #ff0600}

nav a{
	display:block;
	text-decoration: none;
	padding: 10px;
	color: rgba(255,255,255,0.75);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	transition: all ease 0.25s;
}

nav a:hover{
	color: rgba(255,255,255,1);
	border-bottom-color:rgba(255,255,255,0.4);
}

#content figure {
    margin: 0;
    display: flex;
    position: relative;
}

#content figure figcaption{
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: white;
    font-size: 55px;
    width: 100%;
    height: 50%;
    text-align: center;
}

#content2 {
       padding: 15px;
       font-family: 'Nunito';
}

#content2 h1{
       font-weight:900;
       font-size: 25px;
       border-bottom:solid 2px #000721;
       width:100%;
       height:30px;
       color: #000721;
       margin-top: 30px;
}

contenedor img {
    margin-top:  15px;
    padding: 15px
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
}

form {
     display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px
}



.ok {display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 26vh;
    flex-wrap: wrap;
    background-color: #000721;
    margin-left: 2rem;
    margin-right: 2rem;
    padding: 1rem;

}
.ok h1 {font-size: 2em;
text-align: center;
    color: #FFFFFF;
    
}


.ok h2 {font-size: 1.5em;
text-align: center;
    color: #0093ff;
    margin-bottom: 2rem;
}

.ok h3 {font-size: 1.3em;
color: white;
   text-shadow: 2px 2px #000721;
    text-align: center;
}

.okey {margin-top: 4rem;
margin-bottom: 1rem;
    width:100%;
    display: flex;
flex-direction: column;
    justify-content: center;
    align-items: center;
}
.okey a {background-color: #0093f1 ;
    color:#1D2647;
    font-size:1.2em;
    border-radius: 4em;
    text-align: center;
    padding:0.4rem;
    width:50%;
    text-decoration: none;  
  display:block;
    font-weight: 600;
   
}

.okey a:hover {background-color: #FFFFFF;
color: #0093f1;
}

 .h4 { width: 75%;
     text-align: left;
     font-size: 0.9em; 
	color: #000721 ;

   margin-bottom: 1rem;} 

.h6 { width: 75%;
     text-align: left;
     font-size: 0.9em; 
	color: #000721 ;

   margin-top:15px;} 
 

.campo{ 
    margin-left: 1rem;
	margin-right: 1rem;
    margin-bottom: 1.5rem;
    padding: 1em;
     margin-top: 0rem; 
  border: solid 1px #000721; 
  color: #000721; 
  width:75%;
}

form button { background-color: #00a7ff ;
    color:white;
    font-size:15;
    border-radius: 4em;
    text-align: center;
    padding:0.4rem;
    width:50%;
    text-decoration: none;  
  display:block;
  margin-left: auto;
  margin-right: auto;
margin-bottom: 1rem;
margin-top: 0.5rem;}

.screen {
   background-color:#000721;
	display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center; }

.screen h2 { font-size: 1.1em;
    color: white;  
    margin-top: 1em;
    margin-bottom: 1.5em;}


.screen img { width: 50vmin;
    height: 50vmin;
    margin-top: 1em;
    margin-bottom: 1em;}


.login ul {display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:center;
    list-style: none;
    background-color:#000721;
      margin-top: 0.5rem;
}

login ul li {display: flex;
    flex-direction: column;
    justify-content:space-between;
    padding: 0.5rem;
    text-align: center;
    width:14rem; 
}

.login button {
    background-color: #00a7ff ;
    color:white;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, 0.18) inset;
    font-size:15;
    border-radius: 4em;
    text-align: center;
    padding:0.4rem;
    width:100%;
    text-decoration: none;  
	margin-bottom: 0.5rem;
   
}

 .registrarse { color:#00a7ff;
    border: #f01717 2px solid ;
    border-radius:4em;
    font-size:14px;
    text-align: center;
    padding:0.9rem;
    width: 50%;
    text-decoration: none;  
    margin-top: -1rem;

}


}
.login ul .ingresar:hover { background-color: #000721;}


.facebook{ color: white;
     text-align: center;
}

.registro{display: flex;
    flex-direction: column;
    justify-content:space-between;
    padding: 0.5rem;
    text-align: left;
    width:14rem;
    margin-bottom: 0.5rem;
    background-color: white;
}



{
    font-family: 'Nunito', sans-serif;
    font-weight: normal;
    font-style: normal;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    margin: 0pt;
    padding: 0pt;

}


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

    
.redes {
    display: flex;
    margin: auto; 
    justify-content: center; 
}
.redes img {
     height: auto;
    width: 2em;
    margin: 0 1em; 
}



.screen {
   background-color:#000721;
	display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center; }

.screen h2 { font-size: 1.1em;
    color: white;  
    margin-top: 1em;
    margin-bottom: 1.5em;}


.screen img { width: 50vmin;
    height: 50vmin;
    margin-top: 1em;
    margin-bottom: 1em;}


.login ul {display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items:center;
    list-style: none;
    background-color:#000721;
      margin-top: 0.5rem;
}

.login ul li {display: flex;
    flex-direction: column;
    justify-content:space-between;
    padding: 0.5rem;
    text-align: center;
    width:14rem; 
}

.login button {
    background-color: #00a7ff ;
    color:white;
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, 0.18) inset;
    font-size:15;
    border-radius: 4em;
    text-align: center;
    padding:0.4rem;
    width:100%;
    text-decoration: none;  
	margin-bottom: 0.5rem;
   
}

 .registrarse { color:#00a7ff;
    border: #FFFFFF 2px solid ;
    border-radius:6em;
    font-size:15;
    text-align: center;
    padding:0.4rem;
    width: 50%;
    text-decoration: none;  
    margin-top: -1rem;

}

.login ul .ingresar:hover { 
    background-color: #000721;}


.facebook{ color: white;
     text-align: center;
    font-size: 12px
}

.registro{display: flex;
    flex-direction: column;
    justify-content:space-between;
    padding: 0.5rem;
    text-align: left;
    width:14rem;
    margin-bottom: 0.5rem;
    background-color: white;
    
}

.pantallaconocenos #content2{
display: flex;
    flex-direction: column;
    justify-content:center;
    align-items:center; }


.club{width: 100%;
margin-top: 15px;}

.titulos{text-align: center;
padding: 1em; 
border: solid 1px #FFFFFF; }

#content2 .mapa{position:relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 66.6666667%;
   

}
#content2 .mapa iframe {
   position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    margin-top: 15px
}


.redescontacto {
    display: flex;
    margin: auto; 
    justify-content:flex-start; 
}
.redescontacto img {
    height: auto;
    width: 2em;
    margin-right: 15px
}


h2 {margin-top: 30px;
    color: #29abe2;
    font-size: 15px;
    font-weight:900;
}

h3 {color: #b1b1b1;
    font-size: 14px;
    
    
    
}

h12 {margin-top: 130px;
    color: #000127;
    font-size: 30px;
    font-weight:900;
    text-align: center;
    display:block;
    margin:auto;
}

h13 {margin-top: 130px;
    color: #29abe2;
    font-size: 18px;
    font-weight:600;
    text-align: center;
    display:block;
    margin:auto;
}

h14 {margin-top: 130px;
    color: #b0b0b0;
    font-size: 14px;
    font-weight:400;
    text-align: center;
    display:block;
    margin:auto;
}


h5 {margin-top: 70px;
    margin-bottom: 20px;
    color: #29abe2;
    font-size: 36px;
    font-weight:900;
    

}

h9 {margin-top: 100px;
    color: #29abe2;
    font-size: 150px;
    font-weight:900;
}


#avatar {
    border-radius: 50%;
    margin-bottom: 1em;
    display:block;
    margin:auto;
    height: 15em;
    width: 15em;
    justify-content: center;
    align-items: center;
    
    
}

#iconos {
    border-radius: 50%;
    margin-bottom: 1em;
    display:block;
    margin:auto;
    height: 8em;
    width: 8em;
    justify-content: center;
    align-items: center;
    
    
}

#linksperfil {
    margin-bottom: 1em;
    height: 8em;
    width: 8em;
    justify-content: center;
    align-items: center;
    
}



p{margin-bottom: 30px;
  margin-top: 20px}



.video{
   position:relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 56.25%;
}

.video iframe{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    margin-top: 15px
}

footer { 
    background-color: #000721; 
    color: #f0f0f0;
    align-self: flex-end;
    margin-top: 2rem;
    width: 100%;
}
footer div h4 {
    text-align: center; 
    padding: 1.5em 0 0.5em 0;
    font-size: 0.9em;
    font-family: 'nunito' sans-serif;
}
footer p { 
    color: #ffffff;
    font-size: 0.5rem;
    padding: 1rem;
    
    
}
.redes {
    display: flex;
    margin: auto; 
    justify-content: center; 
}
.redes img {
     height: auto;
    width: 2em;
    margin: 0 1em; 
}


.partido {
    display: flex;
    justify-content: space-around;
    padding: 1em 1em 1em 1em;
    align-items: center;
    border-bottom: 1px solid #000127;

}
.partido img {
    height: auto;
    width: 3em;
}
.partido p {
    font-weight: 600;
}
.partido ul li {
    font-size: 0.9em;
    margin-right: 1em;
    text-align: left;
    margin-left: 1 em; 
    
}
.partido div p {
    font-size: 01em;
    color: #000127
    font-weight: 600;
    text-align: center;
}
.proxfechaesc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5em;
    margin-top: auto;
    margin-bottom: auto;
    
}


#main-container{
width: 600px;
margin: 15px auto;  
padding: 0%
    
}

table{
background-color: #ffffff;
text-align: center;
border-collapse: collapse;
width: 1%;
    
}

th, td {
    padding: 10px;
    
}

thead {
background-color:#ffffff
color: white
}

tr:nth-child(even){
background-color: aliceblue;

}