html{font-size: 16px;}
*{margin: 0; padding: 0}

body { background: #75aec3; 
    font-family: 'Montserrat', sans-serif; 
    text-align: center}

/* --------- INDEX ------------- */

/* ORDEN MENU DE NAVEGACIÓN + NOMBRE GRUPO */ 

.menu {background:#b2d0d9;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch; 
    padding: 0.4rem;
    }

/* ESTILO VN06 */

header h2 {color: #d5eae1; 
        font-size: 2.5rem ;
        padding: 0rem 0rem 0rem 5rem;}

/* LINKS MENU DE NAVEGACION */

.menu ul {margin: 0rem 4rem 0rem 2rem;}

.menu li {list-style-type: none;
          display: inline; padding: 0.2rem}

.menu li a {text-decoration: none; justify-content: center;
        color: rgb(51, 83, 95); 
        font-size: 1.2rem; 
        font-weight: 700; padding:0.5rem }

.menu li a:hover {background: #a2c0c9; border-radius: 7px; transition-duration: 0.7s;}


/* ESTILO TITULO (PLAN) y SLOGAN */

video {width: 35rem; 
    height: auto; 
    margin-top: 1.5rem; margin-bottom: 0.7rem}

.logo {background: #10215a;}

.titulo h1 {color: #345460;
            font-size: 3rem; 
            font-weight: bold;
            text-align: center; 
            letter-spacing: 0.2rem;
            margin: 3rem 0rem 0rem 0rem;}

.titulo h4 {color: #345460; 
            text-align: center;
            margin: 0.2rem 0rem 1rem 0rem;
            font-size: 1.3rem;
            font-weight: 800; letter-spacing: 0.3rem}

/* DESCRIPCIÓN DE LA APP */

.descripcion {border: solid rgb(51, 83, 95);
    width: 60rem;
    margin: auto;
    padding: 0.8rem;
    background:#b2d0d9 }

.descripcion img {margin: 1rem;}

.descripcion p {font-size: 1rem; 
                text-align: left; 
                margin-left: 0.5rem; 
                color:rgb(30, 40, 44); 
                font-weight: 500; 
                line-height: 1.5rem}


/* INTEGRANTES */

.alumnos1 {display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: baseline}

.alumnos2 {display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: baseline}

.integrantes {display: flex;
	flex-direction: row; flex-wrap: nowrap;    
    justify-content: center;
	align-items: stretch;
    background:#b2d0d9;
    padding: 0.5rem 0.5rem 0rem 0.5rem;
    border: solid rgb(51, 83, 95); margin:2rem 0rem  }

#fotos {margin: auto; width:62rem;}

.integrantes article {margin align-items: center; padding: 0.2rem}

.integrantes img {border-radius: 20%; 
                  width: 70%; align-items: center;}

.integrantes img:hover {opacity: .5;}


.integrantes h2 {color: rgb(29, 41, 46);
                margin: 0.5rem;
                font-size: 0.9rem;
                text-align: center;}




/* INFO OBLIGATORIA */

.obligatorio {display: flex;
	       flex-direction: row;
	       flex-wrap: nowrap;
	       justify-content: center;
	       align-items: stretch;
           margin: 1rem;}

.obligatorio article {margin: 1rem 2rem; }

.obligatorio h4 {color:#d5eae1; 
                font-size: 1rem; 
                font-weight:750;}

.obligatorio p {font-size: 0.9rem; 
                padding: 0.3rem 0rem 0.3rem 0rem;}


/* PIE DE PAGINA */

footer p {text-align: center; 
        font-size: 0.8rem; 
        margin: 1rem 0rem 0rem 0rem;  
        color: #294c5b; 
        background:#b2d0d9;
        padding: 0.8rem; align-items: flex-end;}

footer a {text-decoration: none; 
        color: #294c5b; 
        font-weight: 800;}


/* GENERALES */
.negrita {font-weight: 600}



/* --------- PLAN ------------- */

.parrafoplan {display: flex;
	       flex-direction: row;
	       flex-wrap: nowrap;
	       justify-content: center;
	       align-items: stretch; }

.parrafoplan article {width: 51rem; margin: 1rem 2rem;}

.parrafoplan h2 {font-size: 1.1rem;
                color: #345460;
                padding: 0.5rem 0rem 0.5rem 0rem;
                background: #b2d0d9; margin: 1.4rem 0rem 0.5rem 0rem;}

.parrafoplan h5 {color:#d5eae1; 
            font-size: 1rem; 
            font-weight:700;
            padding: 0rem 0rem 0.5rem 0rem; text-align: left}

.espacio {margin: 1rem 0rem 0rem 0rem}

.parrafoplan p {text-align: left;
                font-size: 1rem;}


/* --------- MAPA ------------- */

.mapa img {width: 100%;
            padding: 2rem 0rem 2rem 0rem;}





                      /* ---------    RESPONISVE   1024 ------------ */

@media (max-width: 1024px) {

  
/* DESCRIPCIÓN DE LA APP */

.descripcion {width: 80%;}

.descripcion p {font-size: 0.9rem;} 
    
  
/* INTEGRANTES */

#fotos {margin: auto; width:83%;}

.integrantes img {width: 70%;}

.integrantes h2 {font-size: 80%;}
    

/* INFO OBLIGATORIA */

.obligatorio h4 {font-size: 90%;}

.obligatorio p {font-size: 80%;}
  

/* PIE DE PAGINA */

footer p {font-size: 80%;}
    
footer a {font-size: 84%}
    
/* PLAN */
    
.titulo h1 {font-size: 2.3rem}
.titulo h4 {font-size: 1.1rem}
    
.parrafoplan p {font-size: 90%}
    
.parrafoplan h2 {font-size: 1rem}
.parrafoplan h5 {font-size: 0.9rem}

  
}


                              /* ---------    RESPONISVE   820 ------------ */


@media (max-width: 820px) {
    
      
.menu { display: flex; 
    flex-direction: column;
    justify-content: center; padding: 0.3rem 0rem 1rem;}
    
header h2 {font-size: 3rem;
    padding: 0rem; margin: 0rem 0rem 0.3rem}
    
.menu ul li {padding: 0rem; margin: 0.5rem;}
    
.menu li a {font-size: 1rem}
    
/* DESCRIPCIÓN DE LA APP */

.descripcion {width: 75%;}

  
/* INTEGRANTES */

#fotos {margin: auto; width:79%;}
    
.integrantes {display: block}

.integrantes img {width: 60%;}

.integrantes h2 {font-size: 80%;}
    
    
/* PLAN */   
    
.parrafoplan {flex-direction: column;}
    
.parrafoplan article {width: 90%; margin: auto}
    
    
/* PIE DE PAGINA */

footer p {font-size: 70%;}
footer a {font-size: 80%}
    
}

                           /* ---------    RESPONISVE   725 ------------ */
@media (max-width: 725px) {

video {width: 79%;}
    
}

                            /* ---------    RESPONISVE   460 ------------ */


@media (max-width: 420px) {
    
.menu {border-bottom: 3px solid #d5eae1; margin: 0auto}
 
header {position:fixed; top: 0; width: 414px}
    
video {margin-top: 7.2rem;}
    
.obligatorio {display: block}
.obligatorio article {margin: 0.4rem; }
    
.titulo h1 {padding-top: 4rem}    
    

  

}