/* GoogleFont */
@import url(http://fonts.googleapis.com/css?family=Abel|Poppins:regular,bold);


/* Generales */

html {font-size: 16px;}

* {margin: 0; padding: 0; box-sizing: border-box;}

body {background: #040033; text-align: center; font-family: sans-serif; color: white;}

header {
    width: 100%; 
    height: auto; 
    border-bottom: 0.1rem solid #47D9C1; padding-top: 1.5rem;  
    background: #040033; 
    position: fixed; 
    top: 0; 
    z-index: 1;
    align-content: center;
    box-shadow: 0px 2px 12px 0px #040033;}

h1 {
    width: 25%; 
    margin: 0 auto 1rem auto; 
    color: #F38F1A; 
    font-family: 'Abel'; 
    font-size: 1rem; 
    border: 0.09rem solid #F38F1A;}


/* nav */


nav ul {
    display: flex;
	justify-content: center;}

nav ul li { list-style: none; width: 5rem; height: 2rem;}

nav ul li a {color: #47D9C1; font-size: 1rem; font-family: 'Poppins'; text-decoration: none; line-height: 2rem; display:flex; justify-content: center}
    
nav ul li a:hover {
    color: #F38F1A;}

.active-page {background: #47D9C1}

.active-page a {color: #040033;}

/* main */

main {margin: 150px auto 50px auto;}

/* INICIO */
/* integrantes */

.integrantes {max-width: 90%; margin: 150px auto 50px auto; display: flex; justify-content: space-between;}

.integrantes article {width: 25%; position: relative;}

.integrantes article img {width: 100%;}

.integrantes article h3 {width: 100%; 
    position: absolute;
    bottom: 10px;
    opacity: 0;
    transition: 0.3s;
    text-align: left;
    color: #F38F1A;
    font-family: 'Abel';
    margin-left: 0.5rem;
    font-size: 1rem;
    }

.integrantes article:hover img {opacity: .5; transition: 0.5s;}

.integrantes article:hover h3 {opacity: 1; transition: 0.5s;}


/* datos */

.datos {width: 100%; height: auto; color: #040033; font-size: 0.7rem; font-family: 'Poppins'; padding: 1rem; background: #F38F1A; display: flex; justify-content: center;}
.datos article ul {list-style: none; text-align: left;}
.datos span {font-weight: bold;}

.columna {width: 40%; max-width: 400px; margin: 0 1rem;}

aside {height: 150px; background-image: url(../img/ciudad.jpg);}

/* PLAN */
/* datos */

.main-plan {font-family: 'Poppins'; font-size: 0.8rem; height: auto; max-width: 800px;}
.main-plan h2 {font-size: 2rem;}
.main-plan h3 {margin: 1.5rem 0; font-family: 'Abel'; font-size: 1.5rem; color: #47D9C1}

.logo {margin-bottom: 1.5rem;}

.info {width: 70%; margin: 0 auto;}

.proyecto {display: flex; flex-direction: row; justify-content: center;}
.item {width: 25%; margin: 0 1rem; padding: 0.5rem; background: #F38F1A; font-size: 0.7rem;}
.item h4 {margin-bottom: 0.7rem; padding: 0.5rem; border: 0.1rem solid #040033; color: #040033; font-size: 0.8rem}

/* MAPA */

.main-mapa img {width: 90%;}

/* FOOTER */

footer {width: 100%; color: #909090; height: auto; margin: 0.6rem auto;}

footer p {font-size: 0.5rem; text-align: center; }

/* responsive: de 0 a 500 */

@media (max-width: 700px) {
    

    /* fotos */
    .integrantes {flex-direction: row; flex-wrap: wrap; justify-content: center;}
    .integrantes article {width: 40%; position: relative; margin: 0 0.1rem;}
    
     /* footer */
    footer br {display: none; padding: 1rem;}
}

@media (max-width: 500px) {
    
    /* nav */
    nav ul li a {font-size: 3vw;}
    
    /* fotos */
    .integrantes {flex-direction: column; align-items: center;}
    .integrantes article {width: 60%; position: relative; margin-bottom: 1rem;}
    
    /* datos */
    .datos {display: flex; flex-direction: column}
    .columna {padding-bottom: 1rem; width:100%;}  
    
    /* plan */
    .proyecto {display: flex; flex-direction: column; align-items: center;}
    .item {width: 70%; margin-bottom: 1rem;}
    
     /* footer */
    footer br {display: none; padding: 1rem;}
}