html {
    background-color:#F0F2F7;
}


body {
    font-family: 'Roboto', sans-serif;
    
}

.headernegro{
    background: black; 
    height: 3em;
}

a {
    display: block;
    text-decoration: none;   
}

p{
    font-weight: 300;
}

#logo{ width:60%;
    display: block;
    margin: auto;
    padding-top: 10%
    ;
}


.btn {
    width: 80px;
    display: block;
    margin: auto;
    background: #000000;
    font-family: 'Roboto', sans-serif;
    font-weight: 200;
    color: #ffffff;
    font-size: 17px;
    padding: 6px 25px 4px 25px;
    text-decoration: none;
    
}

.btn:hover {
  background: #000000;
  background-image: -webkit-linear-gradient(top, #000000, #969696);
  background-image: -moz-linear-gradient(top, #000000, #969696);
  background-image: -ms-linear-gradient(top, #000000, #969696);
  background-image: -o-linear-gradient(top, #000000, #969696);
  background-image: linear-gradient(to bottom, #000000, #969696);
  text-decoration: none;
  text-align: center;
}


/* ------   parte superior fija ---------- */

.menu {
    display: block;
    margin: 2%;
    padding: 0 0 0 5%;
}

.home {
    display: block;
    padding: 0 13% 0 13%;
    margin: 2%;
}


.perfil{
    display: block;
}

.iconos{ 
    display: inline-flex;
    align-items: center;
    width: 15em;
    height: 3em;
    
}
.iconos img {
    width: 70%;
    
}



/* ------   Home ---------- */


.banner img{
    display: block;
    margin: auto;
    margin-top: 5%;
}



main {
    margin-top: 20px;
    
    
}

article {
    display: flex;
    justify-content: space-around;
}

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


article section{   
    width: 22%;
    height:  8em;
    text-align: center;
  
}


.profesionales {
background-color:#FF934B; }

.profesionales:hover {
  background-image: linear-gradient(to bottom, #FF934B, #ffffff);
}

.cursos {
background-color:#28C0C6; }

.cursos:hover {
  background-image: linear-gradient(to bottom, #28C0C6, #ffffff);
}
.ayudar {
background-color:#5BB705; }

.ayudar:hover {
  background-image: linear-gradient(to bottom, #5BB705, #ffffff);
}

.cronograma {
background-color:#AC6AE4; }

.cronograma:hover {
  background-image: linear-gradient(to bottom, #AC6AE4, #ffffff);
}



h2{
    font-weight: 400;    
    font-family:'Roboto', sans-serif;
    color: black;
    font-size: 0.8em;
    margin-top: 10px;
    }

section img {
    margin-top: 10%;
}
    



/* ------------profesionales ----------*/

main {
    display: block;
    
}

.categoriasprofesionales 
    { display: flex;
    margin-left: %;
}


.section2 
    {width: 75%; 
    height: 165px;
}

.psicologia a {
    width: 100%;
    height: 100%;
    padding-top: 30%;
    background-color: #FF934B;
    font-weight: 500 ;
}

.at a {
    width: 100%;
    height: 100%;
    padding-top: 30%;
    background-color: #FF934B;
    font-weight: 500 ;
}

.fonoaudiologia a {
    width: 100%;
    height: 100%;
    padding-top: 30%;
    background-color: #FF934B;
    font-weight: 500 ;
}

.docentes a {
    width: 100%;
    height: 100%;
    padding-top: 30%;
    background-color: #FF934B;
    font-weight: 500 ;
    
    
}




.psicologia a:hover {
  background-image: linear-gradient(to bottom, #FF934B, #ffffff);
    
}


.at a:hover {
  background-image: linear-gradient(to bottom, #FF934B, #ffffff);
}


.fonoaudiologia a:hover {
  background-image: linear-gradient(to bottom, #FF934B, #ffffff);
}


.docentes a:hover {
  background-image: linear-gradient(to bottom, #FF934B, #ffffff);
    color: white;
}


article p {
    text-align:left;
}




article h2 {
    font-size: 0.7em;
    font-weight: 300;
}




h5 {margin: 5% 5%;
    font-weight: 400;
}





/* ------------cursos ----------*/



.categoriascursos
    { display: flex;
   
}


.section2 
    {width: 60%; 
    height: 165px;
}

.curso1 a {
    width: 150%;
    height: 100%;
    padding-top: 30%;
    background-color: #28C0C6;
    font-weight: 500 ;
}

.curso2 a {
    width: 150%;
    height: 100%;
    padding-top: 30%;
    background-color: #28C0C6;
    font-weight: 500 ;
}

.curso3 a {
    width: 150%;
    height: 100%;
    padding-top: 30%;
    background-color: #28C0C6;
    font-weight: 500 ;
}

.curso4 a {
    width: 150%;
    height: 100%;
    padding-top: 30%;
    background-color: #28C0C6;
    font-weight: 500 ;
    
    
}




.curso1 a:hover {
  background-image: linear-gradient(to bottom, #28C0C6, #ffffff);
    
}


.curso2 a:hover {
  background-image: linear-gradient(to bottom, #28C0C6, #ffffff);
}


.curso3 a:hover {
  background-image: linear-gradient(to bottom, #28C0C6, #ffffff);
}


.curso4 a:hover {
  background-image: linear-gradient(to bottom, #28C0C6, #ffffff);
    color: white;
}


article p {
    text-align:left;
}


article h2 {
    font-size: 0.7em;
    font-weight: 300;
}






/* -------- ayudar ----------*/


article section{   
    height:  8em;
    text-align: center;
  
}


.donar {
    height: 10em;
    width: 45%;
    background-color:#5BB705; }

.donar:hover {
    background-image: linear-gradient(to bottom, #5BB705, #ffffff);
}

.donar h2 {
    font-size: 1em;
}


.staff {
    height: 10em;
    width: 45%;
background-color:#AC6AE4; }

.staff:hover {
  background-image: linear-gradient(to bottom, #AC6AE4, #ffffff);
}

.staff h2 {
    font-size: 1em;
}






/* ------   PERFIL ---------- */




header figure img{
    width: 50%;
    display: block;
    margin: auto;
    margin-top: 30%;
}



.fondodatos {
    background-color: White;
    text-align: left;
}





.iniciar{ 
    color:white;
    font-size: 0.8em;
    display: block;
    margin: auto;
    margin-top: 10%;
    text-decoration: none;
    padding-top: 3%;
    padding-bottom: 3%;
    text-align: center;
    background-color: black;
    text-align: center;
    width: 45%;
    height: auto:
    -webkit-border-radius: 10;
    -moz-border-radius: 10;
    border-radius: 10px;
    
}


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












/* ------   cursos ---------- */

.datos{ padding: 1%;
        font-style: italic;
        color:gray;
}
    

h1 {
    font-weight: 400;
    font-size: 1em;
    margin-left: 8%;
}

.fondodatos {
    background-color: white;
}
    

/* ------   exito ---------- */

.volveracursos {
    text-align: center;
    margin-top: 20%;
    text-decoration: none;
}

    
/* ------   menu ---------- */

#logomenu{ width:20%;
    display: block;
    margin: auto;
    padding-top: %
    ;
}

hr {margin-top: -6%;}
}

h4 {font-family: 'Pacifico', cursive;
    font-size: 2em;
    color: #E03036;
}