@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

*{padding: 0;margin: 0; box-sizing: border-box; transition: 1s all;}

/*mobile*/

body{color: #020000; background-color:#ffffff;}

/* HEADER */
.header-ppl {color: #F2F3F4; background-color: #F2F3F4; padding:1rem; display: block; background-image: url('../img/fadu2.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
.texto-equipo  {display: block;font-size: 1.5rem; margin: 0.6em; font-weight: bold; text-align: left; min-height: 13rem; font-family: 'Quicksand', sans-serif;} 
.texto-equipo h1{ color: #F2F3F4; display: block; font-size: 3rem; margin: 0.1em; font-weight: bold; text-align: left; font-family: 'Quicksand', sans-serif; position: absolute; bottom: 0.1rem;} 

/* MENU */
nav ul li a:hover{color: #24545E;} 
.menu {margin-bottom: 40px; padding: 8px 0; text-align: center; background-color: #F2F3F4;}
.menu ul {list-style: none; margin: 0 auto; letter-spacing: 2px;}
.menu ul li {display: inline-block; color: #24545E; padding-left: 1rem;}
.menu ul li a {text-decoration: none; color: #24545E; font-size: 20px; font-family: 'Quicksand', sans-serif; font-weight: 700; font-weight: bold;}

/* NOMBRES */
.nombres{background: #fff; margin: 1rem; padding: 5px; display: flex; justify-content: center;}
.nombres a{text-decoration: none; color: #909497; font-family: 'Quicksand', sans-serif; font-weight: 500; width: 80%;  display: inline-block; text-align: center; font-size: 0.9rem;}
.nombres a:hover{color: #24545E;}

/* ALUMNOS */
.nosotros{padding: 1rem; color:white;}
.nosotros h3{text-align: center; padding: 10px 0; margin-bottom: 40px; letter-spacing: 2px; border-top: 1px solid #FFF;  border-bottom: 1px solid #FFF; font-size: 1rem; font-family: 'Quicksand', sans-serif; font-weight: 00; color: #24545E;}

.fotos{padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}
.fotos img{width: 19%; height: 19%; border-radius: 100%;}

/* INSTITUCIONAL */
.institucional{padding: 1rem; color:white;text-align: center;}
.institucional h3{text-align: center; padding: 10px 0; margin-bottom: 40px; letter-spacing: 2px; border-top: 1px solid  #F2F3F4;  border-bottom: 1px solid  #F2F3F4; font-size: 1rem; font-family: 'Quicksand', sans-serif; font-weight: 500; color:  #24545E; background-color: #F2F3F4;}

.institucional h4{color: #24545E; line-height: 3rem; font-family: 'Quicksand', sans-serif; font-weight: 500;text-align: center;}
.institucional p{font-size: 1rem; line-height: 1.3rem; font-family: 'Quicksand', sans-serif; font-weight: 400; color: #24545E;text-align: center;}

/* CATEDRA */
.catedra{color:  #24545E; padding: 1rem;}
.catedra h4{color:  #24545E; line-height: 3rem; font-family: 'Quicksand', sans-serif; font-weight: 500; text-align: center; padding: 10px 0; margin-bottom: 40px; letter-spacing: 2px; border-top: 1px solid  #F2F3F4;  border-bottom: 1px solid  #F2F3F4; font-size: 1rem; font-family: 'Quicksand', sans-serif; font-weight: 500; color:  #24545E; background-color: #F2F3F4;}
.catedra h5{line-height: 1rem; color:  #24545E; font-size: 1rem; margin-bottom: 1.3rem; font-family: 'Quicksand', sans-serif; font-weight: 400;text-align: center;}
.catedra p{line-height: 1.5rem; font-family: 'Quicksand', sans-serif; font-weight: 400;text-align: center;}


/* FOOTER */
footer{background:#F2F3F4; color: #24545E; font-size: 0.6rem; padding: 1rem; text-align: center; font-family: 'Quicksand', sans-serif; font-weight: 500;}


/*PROYECTO*/
body{background-color: #ffffff; text-align: left; color: #24545E;}
.titulo {text-align: center; padding: 2rem; font-size: 40px; color: #24545E; font-family: 'Quicksand', sans-serif; font-weight: 700; font-weight: bold;}
.plan{padding: 1rem;}
.plan h3 {text-align: center; padding: 1rem; color: #24545E; font-family: 'Quicksand', sans-serif; font-weight: 500; font-size: 1rem; font-weight: bold; border-bottom: 2px solid #F2F3F4; border-top: 2px solid #F2F3F4; margin-top: 1rem; margin-bottom: 1rem; line-height: 1.5rem;}
.plan p{color:#24545E; font-family: 'Quicksand', sans-serif; font-weight: 400;} 

/*MAPA*/

.arbol {margin: 5em 5em 5em 5em; display: block; margin-left: auto; margin-right: auto; width: 80%;}
    
/*UI KIT*/
.uikit h1{color: #24545E; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 2rem; background-color: #fff; margin-top: 2rem; padding: 1rem;}
.uikit img{margin: 5em 5em 5em 5em; display: block; margin-left: auto; margin-right: auto; width: 80%;}


/*WIREFRAMES*/
.diseño h1{color:#24545E; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 1.5rem; margin-bottom: 1rem; text-align: center;}
.wireframes{width: 80%; justify-items: center;}


/*solo para cuando es una pantalla grande*/ /*responsive*/

@media screen and (min-width: 48rem){
    
    body{font-family: "Quicksand"; color: #020000;}

/* HEADER */
header{background-color: #020000;}
header h1 a{font-size: 70px; letter-spacing: 2px; font-family: 'Quicksand', sans-serif; font-weight: 700;}
    

/* MENU */
.menu {padding: 10px 0;}
.menu ul{padding: 10px 100px; letter-spacing: 2px;}
.menu ul li{padding: 0px 60px;}
.menu ul li a{color: #24545E; font-size: 20px; font-family: 'Quicksand', sans-serif; font-weight: 400; font-weight: bold;}
    

/* NOMBRE */
.nombres{padding: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}
.nombres a{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; align-content: center;}


/* CATEDRA */
.catedra{color: #24545E; padding: 1rem;}


/* FOOTER */
footer{background:#F2F3F4; color: #24545E; font-size: 0.8rem; padding: 1.5rem; text-align: center; font-family: 'Quicksand', sans-serif; font-weight: 400;}


/*MAPA - uikit*/
.arbol{margin: 5em 5em 5em 5em; display: block; margin-left: auto; margin-right: auto; width: 80%;}
.uikit {margin: 5em 5em 5em 5em; display: block; margin-left: auto; margin-right: auto; width: 80%;}
    
/*PLAN*/
.plan p{color: #24545E;; font-family: 'Quicksand', sans-serif; font-weight: 400;} 
    

/*WIREFRAMES*/
.diseño h1{color:#24545E; font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 2rem; margin-bottom: 2rem;text-align: center;} 
.wireframes{width: 80%; justify-items: center;}
    

}