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

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

main {
    width: 85%;
    
}

.boton
{
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-align: center;
    border: 2px solid #23949d;
    background-color: #39b5bf;
    width: 60%;
    margin: auto;
    margin-bottom: 3%;
    border-radius: 10%;
    padding-bottom: 1%
    padding-left: 2%;
    padding-right: 2%;
}

#ya_registrado{
    color:black; 
    text-align:center;
}



/* PRIMER PANTALLA*/

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

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


#main-1 {
    margin: auto;
    width: 85%;
        
}

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

#main-1> div> img { 
    width: 20em;
    max-width: 100%;
    margin: auto; 
    align-content: center;
}
#main-1 div p { 
    align-content: center;
    margin-top: 0.2em;
    text-align: center;
  }

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

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

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;
    position: fixed;
    bottom: 0%;
    justify-content: flex-end;
    flex-direction: row;
    justify-content: space-between;
    font-size: 0.8em;
    text-align: center;
    color: darkblue;
    
}

#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: #187aa5;
        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: #91bfff;
}


.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: #1752a3;
    margin: 0;
    padding-top: 1.2em;
    font-size: 0.8em;
    text-transform: uppercase;
    justify-content: center;
    
    
}
h3 { 
    color: rgb(23, 82, 163);
    margin: auto;
    padding-top: 1.2em;
    font-size:1em;
    text-transform: uppercase;
    text-align: center;
 
}

h4 { 
    color: #1752a3;
    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;
    
 
}

/*enviar mensaje*/

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



/* perfil foto e info */


.foto-perfil {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 0.1em solid blue;

}

.datos-perfil {
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
    height: auto;
            
}


.foto-perfil img {
width: 4.5em;

}

.configu {
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    text-align: left;
    
    
}

.configu h4 {
    padding: 0;
    margin-bottom: 1em;
    font-size: 0.8em;
    text-align: left;
    
}

.pub-activas {
    background-color: gainsboro;
    width: 100%;
    padding: 1em;
    text-decoration: none;
    margin-right: -5em;
    
    
}

.pub-activas a {
    text-decoration: none;
    color: ;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8em;
    
}

/*fin */


.imagenesmenu img{
    width: 7em;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1rem;
    padding-right: 1rem;
}

.objetospedir, .objetosdonar {
    width: 90%;
}

.objetospedir figure, .objetosdonar figure {
    width: 90%;
    position: relative;
    overflow: hidden;
}


.objetospedir img, .objetosdonar img {
    /* para que "desaparezca" el espacio que queda debajo de la imagen */
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.objetospedir figcaption, .objetosdonar figcaption {
    font-size: 1.2em;
    background-color: rgba(24, 122, 165, 0.63);
    color: white;
    padding: .5em;
    position: absolute;
    height: 100%;
    width: 100%;
    max-width: 100%;
    top: calc(100% - 2.3em);
    transition: all .5s ease;
    
}
.objetospedir figure:hover figcaption { 
    background-color: rgba(24, 122, 165, 0.63);
    top: 40%;
    transition: all .5s ease;
}


.objetospedir figure figcaption:last-of-type {position:absolute;
}


.objetospedir figcaption span, .objetosdonar figcaption span { 
    font-weight: lighter;
    display: block;
    line-height: 1.2em;
    margin-top: .4em;
    font-size: 1em;
    color: #ddd;
}

/* FOOTER MENU PARA PANTALLAS */

#menufooter {
    display: flex-end;
    position: fixed 100vh;
    flex-direction: row;
    justify-content:center ;
    color: darkblue; 
  bottom: 0;
    
}
footer {
    display: flex;
    position: fixed;
    justify-content: flex-end;
    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;
    width: 100%;
    
}

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



/* HOME STYLE*/

.call_to_action
{
    border: 2px solid #1689b4;
    width: 70%;
    height: 20%;
    border-radius: 5%;
    margin: auto;
    margin-bottom: 5%; 
    background-color:rgba(169, 221, 240, 0.47);
    color: brown;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 3%;
    }

.call_to_action a
{color: #0f67a8;
 
}
.main_block{
    margin: 4%;
}

#menu_icon{
    color:white; 
}

.home_op{
    padding: 2%;
    border: 1px solid black; 
    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{
    width: 80%;
    margin-bottom: 3%;
    display: inline; 
}

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

.tag_product{
    color: rgba(24, 122, 165, 0.63)
}

/* ESTILO DE MENSAJES */

.message{
    border: 2px solid rgb(17, 113, 155); 
    border-radius: 5%;
    padding: 3%;
    margin:5%;
}

.message_sender{
    font-weight: 600;
    display: inline;
    width: 70%;
}

.message_date{
    display: inline;
    width: 24%;
}

.message_preview{
    margin-top: 3%; 
    color: grey;
}

.read_more{
    text-align: right;
}

/*ESTILO DEL FORM PARA DONAR*/

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

.input_class{
    margin:0.5em;
    width: 100%; 
    padding: 0.2em 0.5em;
    border-radius: 0.5em;
}
.boton {margin-top: 3%;
        margin-bottom: 4%}

.boton_cargar_donacion{
    margin-bottom: 3%;
}

/*ESTILO RESULTADOS*/

.soccer_results
{
    border: 2px solid black;
    margin: auto;
    width: 85%;
    max-width: 800px;
    border-radius: 10px;
    text-align: center;  
    font-size: 0.7em;
    margin-bottom: 3%;
}

thead
{
    font-weight: 800; 
}

td{
    padding: 1%;
}
tr:hover {
    background-color: #f5f5f5;
}

.title_match{
    text-decoration: none; 
    font-size: 0.8em;
    color: black; 
    font-weight: 600;
    margin-top: 5%;
    margin-bottom: 3%;
}

/*PUNTUAR DONANTE */

#stars_review{
    width:100%;
    text-align: center; 
    
}

#star1, #star2, #star3, #star4, #star5{
    display: inline;
}

#star1:active, #star2:active, #star3:active, #star4:active, #star5:active{
    color: white; 
}

.form_description_2{
    height: 100px;
}

h5{
    margin-bottom:3%; 
    margin-top:3%;
    text-align: center;
}


/* FICHA */


.productoseleccionado img {
    max-width: 300px;
    border-radius: 7%;
    padding: 1%;
    padding-left: 7%;
    padding-top: 4%;
    align-content: center;
    
}

.datodonante {
    
    margin: auto;
    text-align:center
}