*{
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
   
}

a {
    text-decoration: none;
    color:white;
}

main {
    width: 85%;
    
}

.boton
{
    font-family: Roboto, sans-serif;
    font-weight: 600;
    text-align: center;
    border: .1em solid #1B1112;
    color: #F0F3BD;
    background-color: #616536;
    width: 50%;
    margin: auto;
    margin-bottom: 5%;
    border-radius:0;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 4%;
    padding-right: 4%;
}

.boton :hover {color: #31B96E; transition: 0.6s;}

a :hover {color: #31B96E; transition: 0.6s;}

.boton a {color: #A4E666; }

.botonsecundario
{
    font-family: Roboto, sans-serif;
    font-weight: 600;
    text-align: center;
    border: 2px solid #1B1112;
    background-color: #A4E666;
    width: 50%;
    margin: auto;
    margin-bottom: 3%;
   border-radius:;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 4%;
    padding-right: 4%;
    color: #1B1112;
}

.botonsecundario :hover {color: #31B96E; transition: 0.6s;}

.botonsecundario a {color: #31B96E;}



body {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}

.menufooter {border-right: 1em;
    display: flex; align-content: flex-end; align-items: flex-end;}

.menufooter a {padding: .2em; margin: .2em; border-radius: .5em; }

.menufooter a:hover {background-color: #616536;transition: 0.22s;}


#primer-pantalla-header { 
    margin: auto;
    background: none;
    text-align: center;
    width: 100%;
    padding: 1em;
    
    
}
 
#primer-pantalla-header> h2 { 
    color: #31B96E;
    margin: auto;
    padding-top: 1.5em;
    font-size: 0.8em;
    text-transform: uppercase;
    
    
}


#main-1 {
    margin: auto;
    width: 85%;
    padding: 2em;
    min-height: 100vh;
        
}

#main-1> h1 { 
    color: #31B96E;
    margin-top: 0.2em;
    font-size: 2em;
    text-align: center;
    
    
}

h2 {color: #31B96E;
    margin-top: 0.2em;
    font-size: 1.5em;
    text-align: center;}


    
}

#main-1> div {
    margin: auto;
    width: 12em;
    margin-top: 3em;
}

#main-1> img { display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 60%;
    margin-top: 3em;
    margin-bottom: 3em;
}

#main-1> p { display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 20em;
    margin-top: 3em;
    margin-bottom: 3em;
    color: #1B1112;
}

form {
    margin:auto;
    width: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    margin-top: 2em;
    
}

form input {
    margin:0.5em;
    width: 100%; 
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
    
    
}

form button {
    width: 100%; 
    padding: 0.2em 0.5em;
    margin-bottom: 0.5em;
         
}

.botones-registro {
    margin: auto;
    width: 50%; 
    padding: 0.2em 0.5em;
             
}

.botones-registro a {
    text-decoration: none;
    
}

#datos-contacto {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.8em;
    text-align: center;
    color: #1B1112;
    
}

#datos-contacto> p {
   margin: 0;
    
}

/* FIN PRIMER PANTALLA*/

/* REGISTRO */

header nav ul{
        max-width: 100%;
        display: flex;
        align-items: center;
        padding: 0em;
        list-style:none;
        text-decoration: none;}

header {  
        background: #1B1112;
        display: flex;
    flex-direction: row;
        justify-content: space-between;
    align-items: center;
        padding: 0.8em;
        max-height: 6em;
}

header .cajitalogo {
    flex-grow: 1;
}

header nav {
    flex-grow: 0;
}

header img {
    width: 2.5em;
    height: 2.5em;
}

header ul li {
  margin: 0.2em; 
padding-right: 0.8em;
        display: block;
    text-align: center;
    height: auto;
    

}

header ul li a{
    text-decoration: none;
    color: white;
    font-size: 0.8em;
    text-align: center;
}


header ul li:hover {
    background-color: #616536;
}


.menu a {
    margin: 0.3em;
    display: block;
    padding: 0.3em 0.3em;
}

.filtro {
    border: 0pt;
    margin: 0pt;
    padding: 0pt;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    outline: none;
}
    
    
}

h2 { 
    color: #31B96E;
    margin: 0;
    padding-top: 1.2em;
    font-size: 0.7em;
    text-transform: uppercase;
    justify-content: center;
    
    
}
h3 { 
    color: #31B96E;
    margin: auto;
    padding-top: 1.2em;
    font-size:1em;
    text-transform: uppercase;
    text-align: center;
 
}

h4 { 
    color: #31B96E;
    margin: auto;
    padding-top: 1.2em;
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    flex-direction: column;
    display:flex;
    position: relative;
    flex-direction: column-reverse;
    
 
}


h5 { 
    color: #31B96E;
    margin: auto;
    padding-top: 1em;
    font-size: .9em;
    text-align: center;
    flex-direction: column;
    display:flex;
    position: relative;
    flex-direction: column-reverse;
    
 
}


/*enviar mensaje*/

.botones-mensaje a {
    text-decoration: none;
    
}

/* PROFILE OTROS*/

.tiposdeperfil {
    padding: 2%;
    background-color: white; 
    border-radius: 0em;
    text-align: center; 
    margin-bottom: 5%;}

.tiposdeperfil img {width: ; height: 6em;;
margin: 6%;}

.tiposdeperfil p {color: #1B1112; font-size: .9em; padding-right: 2em; padding-left: 2em;padding-bottom: auto;}




.seccionperfil
{
    margin: 0%;
}



/* PERFIL PROPIO*/

.foto-perfil {
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color: #F0F3BD;
    padding: 1em;
    border-radius: 9em;

}

.foto-perfil div h3 {background-color: white; padding: .5em .5em .7em .5em; border-radius: 3em;}

.datos-perfil h5 {background-color: rgba(0, 168, 150, 0.21); padding: 1em;}

.perfil { background-color: #FFFF;
    display: flex;
    flex-direction: column;
    margin: 1em;
    text-align: center;
    height: auto;
   
            
}

.contenedor-datos-perfil p{padding: .3em; margin: 0em;}


.foto-perfil img {
    width: 19em;
    padding: 1em;

}


/* FOOTER */

.menuiconos {
    display: flex-end;
    position: fixed 100vh;
    flex-direction: row;
    justify-content:center ;
    color: darkblue; 
  bottom: 0;
    
}
footer {
    display: flex;
    position: relative;
    bottom: 0;
    flex-direction:row;
    font-size: 0.8em;
    background-color:  #d1d1d1;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%;
    align-items: center;
    text-align:center;
    
}

.material-icons{
    width: 35%; 
    color: #A4E666;
}


/* HOME STYLE*/

/* Home Seccion de Alquileres*/
.seccionalquiler{
    margin: 5%;
}

.tiposdealquiler {
    padding: 2%;
    background-color: rgba(240, 243, 189, 0.16);
    border: 3px solid #1B1112; 
    border-radius: 0em;
    text-align: center; 
    margin-bottom: 5%;}

.tiposdealquiler img {width: ; height: 6em;;
margin: 6%;}

.tiposdealquiler p {color: #1B1112; font-size: .9em; padding-right: 2em; padding-left: 2em;padding-bottom: auto;}

.main_block{
    margin: 4%;
}

#menu_icon{
    color:white; 
}

.home_op{
    padding: 2%;
    border: 1px solid #1B1112; 
    border-radius: 4%;
    text-align: center; 
    margin-bottom: 3%;
}

.title_home_op{
    margin-bottom: 2%;
    text-decoration: none; 
    color: black; 
    font-weight: 600; 
}

.image_home_op{
    height: 80px;
    width: 100%;
    display: inline; 
}

.button_home_op{
   margin: auto;
    width: 30%;
    color: white; 
    border: 2px solid #1B1112;
    background-color: #A4E666;
    border-radius: 10%; 
    padding: 1%;
}


/* HORARIOS DE ALQUILER*/
.horarioalquiler {padding: 3%;
    border: 2px solid black; 
    border-radius: 1%;
    text-align: center; 
    margin-bottom: 3%;
    


display: flex;
flex-direction: row;
justify-content: center;}


.horarioalquiler p {
        width: 4em;
    padding: .4em;
    margin: .2em;
border: 2px solid #1B1112;
border-radius: .6em;
}

.horarioalquiler p:hover {background-color: #616536;
color: #A4E666;
transition: 0.6s;}

.horarioalquiler .bloqueado {background-color: #a3a3a3;
color: #cecece;
transition: 0.6s;}

.horarioalquiler .bloqueado:hover {background-color: #a3a3a3;
color: #cecece;
transition: 0.6s;}

/* ESTILO DE NOTIFICACIONES */



.notificacion{margin-top: 2%;
margin-bottom: 2%;}

.notificacion_tipo {
    background-color: rgba(240, 243, 189, 0.13);
    font-size: 1em;
    border: 1px solid #A4E666; 
    border-radius: 0;
    padding: 3%;
    max-width: 50%;
    
    margin-top: 2%;
margin-bottom: 2%;
}

.notificacion_tipo2 {
    background-color: rgba(240, 243, 189, 0.13);
    font-size: 1em;
    border: 1px solid #1B1112; 
    border-radius: 0;
    padding: 3%;
    max-width: 100%;
    
    margin-top: 2%;
margin-bottom: 2%;
}

.notificacion_tipo3 { display: flex; flex-direction: column; align-items: center;
    max-width: 100%;
    font-size: 3em;
    margin-top: 2%;
margin-bottom: 5%;

}

.notificacion_tipo2 a {margin-top: 0em; padding-top: 0em;}
.notificacion_tipo2 a i{background-color: #1B1112; border-radius: 1em; width: 1.03em; margin-top: 0%;}

.notificacion_titulo{
    font-weight: 600;
    display: inline;
  color: #616536;
}

.notificacion_mensaje {
    margin-top: 1%; 
    color: #05668D;
}

.notificacion_extra{margin-top: 1%; 
    color: #1B1112;
font-size: .8em;}

.notificacion_tipo a {margin-top: 0em; padding-top: 0em;}

.notificacion_tipo a i{background-color: #1B1112; border-radius: 1em; width: 1.03em; margin-top: 0%;}


/*ME FALTA UNO*/

.contenedor_de_jugadores {display: flex;
    flex-wrap: wrap;}


.notificacion{margin-top: 2%;
margin-bottom: 2%;}

.jugadores_posibles {
    background-color: rgba(240, 243, 189, 0.13);
    font-size: 1em;
    border: 1px solid #00A896; 
    padding: 1em;
    
    margin-top: 2%;
margin-bottom: %;
    max-width: 60%;
    min-width: 40%;
}



.jugador_titulo{
    font-weight: 600;
    display: inline;
  color: #616536;
    display: flex;
    align-items: center;
}

.jugador_titulo a {
    display: flex;
    align-items: center;
    flex-direction:column;
    align-items: flex-end;
    padding: 0em;
    margin: 0em;
}

.player_pedido {border-radius: 6%; border: 5px solid #4cc777; max-width: 50%;}

.player img {width: 6em; border: 2px solid #4cc777; margin-bottom: 3%;}


.player_encontrado {border-radius: 6%; border: 3px solid #4cc777; max-width: 30%;}






.notificacion_mensaje {
    margin-top: .3%; 
    color: #31B96E;
}

.notificacion_extra{margin-top: .1em; 
    color: #1B1112;
font-size: .8em;}


.notificacion_tipo a {background-color: #31B96E; border-radius: 20%; width: 1.03em; margin-top: .2em;}


.login img {height: 2em;;
margin: 6%;}


------------------------------------------




.form_title{
    margin-bottom: 2%;
    margin-top: 8%;
    font-family: Roboto, sans-serif;
}

.input_class{
    margin:0.5em;
    width: 100%; 
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
}


.enviar
{
    font-family: Roboto, sans-serif;
    font-weight: 600;
    text-align: center;
    border: .1em solid #5d5d5d;
    color: #F0F3BD;
    background-color: #05668D;
    width: 50%;
    margin: auto;
    margin-bottom: 5%;
    border-radius:0;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 4%;
    padding-right: 4%;
}