body {     font-family: 'Roboto', sans-serif;
           background-color: #dfe0e1;
}


/*HEADER*/


header{    height: 2.5em; 
           background-color: #e33a3b;
}

#menuh{    height: 2.5em; 
           background-color: #dfe0e1;
}

.iconos{   display: inline-flex;
}


#menu{     width: 2.5em;
           height: 2.5em;
           margin-top: 0.2em;
           margin-left: 10.5em;
}


#perfil{   width: 2em;
           height: 2em;
           margin-top: 0.5em;
           margin-left: 75%
}


#logosuperior{ width: 6em;
               height: 1.9em;
               margin-top: 0.5em;
               margin-left: 10%;
}


#back{    width: 3em;
          height: 3em;
         
}


/*MAIN*/ 
main{      text-align: center; 
           font-size: 0.9rem;
}

#home{     margin-top: 5%;
}


#cuerpo {  width: auto;
}


#logo{     width:100%;
           padding-top: 5%;
}



h1 {       color:black;
           font-size: 1.5em;
}


h2{        font-size: 1em;
           color: white;
}


h3{        font-size: 1.1em;
           text-align: left;
           color: black;
           font-style: italic;
}


.titulomenuh{  color:#e33a3b;
}


#donar{    width: 100%;
           margin-left: 95%;
           margin-top: -95%;
           font-size: 3.5em;;
}
   

#voluntario{    width: 100%;
                margin-left: 45%;
                margin-top: -45%;
                font-size:3.5em;;
}

#profesionales{ width: 100%;
                margin-left: 50%;
                margin-top: -25%;
                font-size: 2.5em;
}


#cursos{  width: 100%;
          margin-left: 100%;
          margin-top: -48%;
          font-size: 2.5em;
}




#ayudar{  width: 100%;
          margin-left: 100%;
          margin-top: -48%;
          font-size: 2.5em;
}


#calendario{ width: 100%;
             margin-left: 65%;
             margin-top: -30%;
             font-size: 2.5em;
}



#ayudar{ width: 100%;
        }


.turno{      font-size: 1.9em;
             text-align: center;
             font-weight: 900;
}    

.pedir{      color: white;
             text-align: center;
             font-size: 1.5em;
             margin-top: -10%
}


.talleres{ font-size: 2.9em;
           margin-left: 1em;
           margin-top:auto;
}


p{          margin-right: 8%;
            margin-left: 8%;
            font-size: 0.9em;
}


.dhc {      font-weight: 800;
}

.rellenar{  margin-top: 2%;
            margin-left: 5%;
            width: 150%;
}

.datos{     margin-left: 0%;
            margin-right: 0%;
            padding: 1%;
            font-style: italic;
            color:#e29c9e;
}


.iniciar{ 
            padding-top: 1%;
            text-align: center;
            font-size: 1.3em;
            font-weight: 900;
            color: #dfe0e1;
}


#noticias{  text-align: left;
            margin-left: 0%;
            margin-top: -1%
}


div{        margin-left: 8%;
            margin-right: 8%;
            background-color: White;
            text-align: left;
            border-radius: 3em;
}


.linea{     width: 15em;
            height: 0.2em;
            margin-left: 0%;
            margin-right: 0%;
            background-color: #9b9b9b;
    
}


.linea2{    width: 15em;
            height: 0.2em;
            margin-left: 0%;
            margin-right: 0%;
            margin-top: 5%;
            background-color: #9b9b9b;
    
}






.cambiardatos{   width: 60%;
                 height: 1.3em;
                 margin-top: 2.5%;
                 margin-bottom: 2.5%;
                 margin-left: 2em;
}


.contraseña{   width: 35%;
            height: 1.3em;
            margin-top: 2.5%;
            margin-left: 2em;
}


.consulta{   width: 43%;
             height: 3em;
             margin-top: 2.5%;
             margin-left: 0%;
}

.nombre{    width: 20%;
            height: 1.3em;
            margin-top: 2.5%;
            margin-left: 2%;
}

.dia{       width: 20%;
            height: 1.3em;
            margin-top: 2.5%;
            margin-left: 13%
}

.horario{   width: 30%;
            height: 1.3em;
            margin-top: 2.5%;
            margin-left: 2em;
            
}


.comentario{ width: 35%;
             height: 2.9em;
             margin-top: 2.5%;
             margin-left: 1%;
}


#sesion{    height: 1.7em;
            width:auto;
            margin-top: 10%;
            text-align: center;
            background-color: #e33a3b;
}


a{          text-align: left;
            display: block;
            font-size: 0.9em;
            text-decoration: none;
            color: black;
}


#fotoperfil {text-decoration: underline;
          color: #e33a3b;
          text-align: center;
          margin-top: 5%;
}

.cambiar{ text-decoration: underline;
          color: #e33a3b;
          margin-top: 5%;
          margin-bottom: 5%;
}


.servicios{ display: inline-flex;
            background-color: #e33a3b;
            width: 100%;
            height:4em;
            margin-top: 2%;
            margin-bottom: 2%;
            border-radius: 3em;
}


.dyv{       display: inline-flex;
            background-color: #e33a3b;
            width: 100%;
            height:8em;
            margin-top: 2%;
            margin-bottom: 2%;
            border-radius: 3em;
}



.datosins { display: inline-flex;
            width: 100%
}


#atencion{  display: inline-flex;
            width: 100%;
            
}


.pro{       width: 50%;
            height: 12em;
            background-color: #e33a3b;
            margin:1%;
            text-align: center;
            border-radius: 1em;
}



#cambiarfoto{ margin-left: 30%;
              margin-top: 10%
}

.activar{  margin-left: -85%;
           
}

.botones{   width: 4em;
            margin-left: 10%;
}
    
.botondonar{ width: 8em;
             margin-left: 10%;
             margin-top: -33%;
}


.botonvol{ width: 8em;
             margin-left: 5%;
             margin-top: -12%;
}




#nino{      width: 100%;
            margin-top: -5%
}


#puntos{    width: 4em;
            margin-top: -5%;
}


article{   width: 100%;
}


.titulo-superior{ padding-top: 50%;
}


    
/*FOOTER*/
footer{     margin-top: 10%;
}

.footer{   height: 0.2em;
           background-color: #e29c9e;
}


.bajada{   font-size: 0.5em;
}