@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Roboto');


body {
    background: #ffffff};
color: #ff2a53;
}

/* Hoja de estilos */

/*Header*/


header {background-color: none; 
padding: 0rem; 
width: 100%; 
margin: 2rem;

}


/* Iniciar sesión */

.dni{
    width: 19rem;
    background: #00af93;
    height: -2rem;
    font-family: roboto;
    font-size: 1rem;
    color: white;
    text-align: left;
    justify-content: center;
    align-items: center
    padding: 0rem; 0rem; 0rem; 0rem;
    margin:  0rem; 0rem; 0rem; 0rem;
    border-radius: 20px; 
    border:2px solid #fff;
    }

.contra{
    width: 19rem;
    background: #00af93;
    height: -2rem;
    font-family: roboto;
    font-size: 1rem;
    color: white;
    text-align: left;
    padding: 0rem; 0rem; 0rem; 0rem;
    margin:  0rem; 0rem; 0rem; 0rem;
    border-radius: 20px; 
    border:2px solid #fff;
    }

.intro{
    text-align: center;
    font-family: roboto;
    line-height: normal;
    font-size: 1.5rem;
    margin:  2rem; 2rem; 2rem; 2rem;
}


.iniciar{
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    display: flex;
    justify-content: center;
    text-align: center;
    }

.contraseña{
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    display: flex;
    justify-content: center;
    text-align: center;
    }

#logocat{
    display: flex;
        justify-content: center;
    align-content: center;
}
#logocat img{
    display: flex;
        justify-content: center;
    align-content: center;
    width: 12rem;
    height: 12rem
}




/* Principal */





#imgheader { 
display: flex;
justify-content: space-between;
margin: 3% 0% 0% 0%;
background: none;


}

#imgheader img{width: 4rem;}


#progreso 
{
    display: flex;
    justify-content: space-around;
    align-content: center;
    text-align: center;
    padding: -2% 0% 0% 0%;
    line-height: 1rem
}

#progreso img{
    width: 9rem;
    
}

.tuprogreso
{
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 8% 0% 0% 0%;
}



figure{margin: 5%; padding:} 


#DGAPP{
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center
}

#links
{
    display: flex;
    
    justify-content: center;
    align-content: center;
    text-align: center
}

#Descripcion
{
    display: flex;
    
    justify-content: center;
    align-content: center;
    text-align: center
}




a{font-style: normal; line-height: 2rem; font-family: 'Lato'}



#imgfooter { 
display: flex;
justify-content: space-between;
margin: 4% 0% 0% 0%;
background: none
}

#imgfooter a{
    display: block;
    width: 4rem;
    margin-right: .5rem;
    text-align: center;
    text-decoration: none;
    color: black
}

#imgfooter p{
    margin: 0;
}

#imgfooter img{
   width: 100%;
}


/* Mis Materias */


.imagenFondo1 {
    width: 10px;
    height: 10px;}

.imagenFondo2 {
    width: 10px;
    height: 10px;}

.imagenFondo3 {
    width: 10px;
    height: 10px;}

.DGAPP{font-family: 'Lato', sans-serif;}


/* Inscripción */




/* Contenido */





h1{font-style: normal; line-height: 3rem; font-family: 'Lato'; font-size: 3rem }

h2{font-style: normal; line-height: 2rem; font-family: 'Lato'; font-size: 1.5rem }

h3{font-style: normal; 
    font-size: 1.5rem; 
    line-height: 2rem; 
    font-family: 'Lato';
    color: #d54f5c;
    padding: 3rem 3rem -3rem 3rem;
    margin: 1rem 3rem 1rem 3rem }

a{font-style: normal; line-height: 2rem; font-family: 'Lato'}

figure{margin: 5%; padding:} 



#DGAPP{
    display: flex;
    
    justify-content: center;
    align-content: center;
    text-align: center
}

#links
{
    display: flex;
    
    justify-content: center;
    align-content: center;
    text-align: center
}

#Descripcion
{
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center
}

.niveles
{
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
    width: 1rem
}


#categorias { 
display: flex;
justify-content: space-between;
margin: -1% 3% 0% 4%;
background: none;
font-size: 2rem;
}

/* Perfil */

#fotoperfil img{
   width: 10rem;
    padding: -3rem 0rem 1rem 0rem;
}


li img{
   width: 3rem;
    height: 3rem;
}

li {
    display: flex;
    list-style-type: none;
    font-family: 'Lato';
    font-size: 1.3rem;
    margin: 0rem 1rem 0.5rem 1rem;
    padding: 0rem 0rem 0rem 0rem;
    color: #30ad92;
    justify-content: space-between;
    align-items: center
    
}

h5 {
    text-decoration:none; 
    color: #ffffff; 
    font-size: 1.5rem; 
    font-family: 'Lato';
    text-align: left;
    margin: -2rem 0rem 5rem 3rem
}




#editar {
    display: flex;
    align-content: space-around;
    align-items: center;
    padding: 0rem 0rem 0rem 3rem
}

#imgs3 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 15rem 1rem 0rem 1rem
}

#categorias2 {
    font-family: 'Lato';
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    margin: -1rem 3rem 0rem 4rem;
    color: #289079

}

div {
    display: flex;
    justify-content: space-between
}

/*inscripciones*/

#imgfooter {
display: flex;
justify-content: space-between;
margin: 22% 2% 0% 3%;
background: none
}


#imgfooter2 {
display: flex;
justify-content: space-between;
margin: 22% 2% 0% 3%;
background: none
}

#categorias2 {
display: flex;
justify-content: space-between;
margin: -2% 0% 0% 4%;
font-size: 2rem;
    color: #fff
}

.examenes{
    width: 50%;
    background: #30ad92;
    height: 3rem;
    font-family: roboto;
    font-size: 2rem;
    color: white;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
      margin: 4rem; 1rem; 1rem; 1rem;
    }


.cursada{
    width: 50%;
    background: #30ad92;
    height: 3rem;
    font-family: roboto;
    font-size: 2rem;
    color: white;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
        margin: 4rem; 1rem; 1rem; 1rem;
    }


/*INSCRIPCION A EXAMENES*/


#imgfooter3 {
display: flex;
justify-content: space-between;
margin: -35% 2% 0% 3%;
background: none
}

#categorias3 {
display: flex;
justify-content: space-between;
margin: -2% 0% 0% 4%;
font-size: 2rem;
    color: #fff
}

.examenes3{
    color: #fff;
    text-decoration-line:line-through;
    font-size: 5rem;
    margin: 45% 0% 0% 4%;;
    text-decoration: none;
    line-height: 2rem;
    font-family: Lato;
    text-align: center;
}

.cursada3{
    width: 80%;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #30ad92;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 230px 20px 25px 70px;


}

.mayo{
    width: 7rem;
    background: #fff;
    height: 1rem;
    font-family: roboto;
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 0rem; 4rem; -5rem; 1rem;
    }

.julio{
    width: 7rem;
    background: #fff;
    height: 1rem;
    font-family: roboto;
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 2rem; 1rem; -5rem; 1rem;
    }


.septiembre{
     width: 7rem;
    background: #fff;
    height: 1rem;
    font-family: roboto;
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
      margin: 2rem; 1rem; -5rem; 1rem;
    }

.diciembre{
    width: 7rem;
    background: #fff;
    height: 1rem;
    font-family: roboto;
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
      margin: 2rem; 1rem; -5rem; 1rem;
    }


/*mayo*/

#imgfooter4 {
display: flex;
justify-content: space-between;
margin: -38% 2% 0% 3%;
background: none
}

#categorias4 {
display: flex;
justify-content: space-between;
margin: -2% 0% 0% 4%;
font-size: 2rem;
    color: #fff
}

.examenes4{
    color: #fff;
    text-decoration-line:line-through;
    font-size: 5rem;
    margin: 45% 0% 0% 4%;;
    text-decoration: none;
font-family: Lato;
text-align: center;
}

.cursada4{
    width: 80%;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #30ad92;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 100px 20px 25px 70px;


}

.mayo4{
    width: 50%;
    color: #d54f5c;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #fff;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 90px 120px 25px 230px;

}

.julio4{
    width: 50%;
    color: #d54f5c;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #fff;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 5px 120px 25px 230px;
}

.fechas{
    width: 18rem;
    color: #d54f5c;
    text-align: center;
    justify-content: center;
    padding: 1rem; 1rem; 0rem; 0rem;
    font-family: Lato;
    background: #fff;
    border-radius: 1rem;
    height:6rem;
    font-size: 1rem;
    margin: 2rem; 0rem; 0rem; 0rem;
}



.septiembre4{
    width: 50%;
    color: #d54f5c;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #fff;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 5px 120px 25px 230px;
}

.diciembre4{
    width: 50%;
    color: #d54f5c;
    text-align: center;
    justify-content: center;
    padding: 2rem;
    font-family: Lato;
    background: #fff;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 10px 120px 25px 230px;
}


/*cursada*/


#imgfooter5 {
display: flex;
justify-content: space-between;
margin: 7% 2% 0% 3%;
background: none
}

#categorias5 {
display: flex;
justify-content: space-between;
margin: -2% 0% 0% 4%;
font-size: 2rem;
color: #fff
}

.examenes5{
    color: #fff;
    text-decoration-line:line-through;
    font-size: 5rem;
    margin: 45% 0% 0% 4%;;
    text-decoration: none;
font-family: barrio;
text-align: center;
}

.cursada5{
    width: 80%;
    text-align: center;
    justify-content: center;
    padding:3rem;
    padding-bottom: 1rem;
    font-family: Lato;
    line-height: 5rem;
    background: #30ad92;
    border-radius: 5rem;
    height:50%;
    font-size: 5rem;
    margin: 230px 20px 5px 85px;




}

.cursadita{
    width: 23rem;
    color: #ffffff;
    text-align: center;
    justify-content: center;
    padding: 0rem 1rem 1rem 1rem;
    font-family: Raleway;
    background: #135d4d;
    border-radius: 2rem;
    height:5rem;
    font-size: 1.1rem;
    margin: -3rem 1rem 1rem 0rem;
}

/* Cambiar imágen de perfil */

.Cambiarfoto {
	display: flex;
	justify-content: center;
	margin: 7rem 0rem -5rem 0rem
}

#Cambiar {
	display: flex;
	justify-content: center;
    font-family: 'Lato';
	color: #ffffff; 
    font-size: 2rem; 
    margin: 4rem 0rem 0rem 0rem
}


/* Footer */

footer {background-color:white; 
    padding: -2% 0% 0% 0%; 
    width:100%; 
    margin: 0%}

p{font-style: normal; line-height: 2rem; font-family: 'Lato'}

.footer{
    position: fixed;
    bottom: 0;
    z-index: 100;/* Depende el valor segun las capas flotantes que tengas */
    left: 0; /* Depende el Ancho de donde se va a colocar */
}

/* niveles */

#materias3 img{ 
display: flex;
justify-content: space-between;
margin: 3% 0% 0% 0%;
background: none
    display: block;
    width: 23rem;
    margin-right: .5rem;
    text-align: center;
    text-decoration: none;
    color: black
}


/* nivel 1 */

.diseño{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.morfologia{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.tipografia{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.comu{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.tecno{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.medios{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.historia{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


/* nivel 2 */

.diseño2{
    width: 10rem;
    background: #ffffff;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.morfologia2{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.tipografia2{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.comu2{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.tecno2{
    width: 10rem;
    background: #d54f5c;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }


.medios2{
    width: 10rem;
    background: #ffffff;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }

.historia2{
    width: 10rem;
    background: #ffffff;
    height: 1rem;
    font-family: roboto;
    font-size: 1rem;
    color: #000000;
    text-align: center;
    padding: 1rem 2rem 2rem 2rem;
    border-radius: 14rem;
    margin: 1rem; 4rem; -5rem; 1rem;
    }




/* créditos */

#barrita img{
    width: 24rem
    
    }

.titulos {
    display: flex;
    justify-content: space-between;
    align-content: space-between;
    margin: 2rem 2rem 0rem 2rem

}

.tipos{
    display: flex;
    font-size: 1.5rem;
    padding: 0rem 0rem 0rem 0rem
}

.optativas {
    display: flex;
    justify-content: space-between;
    padding: 1rem 3rem 0rem 2rem
    
}    

.progreso
{
    display: flex;
    font-size: 1rem;
    justify-content: center;
    border-radius: 20px; border:.1rem solid #00af93; 
    padding: 1rem; 0rem; 1rem; 0rem;
    line-height: .1rem
}

.progreso1
{
    display: flex;
    font-size: 1rem;
    justify-content: center;
    border-radius: 20px; border:.1rem solid #00af93; 
    background: rgba(0, 175, 147, 0.6); 
    padding: 1rem; 0rem; 1rem; 0rem;
    line-height: .1rem
}


h9{font-style: normal;
    font-size: 1.5rem;
    line-height: 2rem;
    font-family: 'Lato';
    color: aliceblue;
    padding: 5% 0% 5% 5%;
}