@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Oswald:400,700');

*{
    margin: 0%;
}

body {
    background: linear-gradient(#20284d, #f23fa6);
    font-family: 'Montserrat', sans-serif;
    color: white;
    
}

header {
    background-image: url(../tp/img/gaumont3.jpg)
}

header img { 
    padding: 0.5rem;
    border: 4px solid white;
    margin:0 auto;
    
    
}




nav ul {padding: 1rem;
        text-align: center;}

nav ul li {           
             list-style-type: none;
             display:inline-block;
             
    
                         


}
nav ul li a { color: white;
              text-decoration: none;
              text-align: left;
              display: inline-block;
              padding: 0.5rem;
 
}

nav ul li a:hover {
    border-bottom: 3px solid #f23fa6;
    color: #f23fa6;
}

main {
    padding: 0 1rem;
}

h1 {
    text-align: center;
    font-size: 2rem;
    background-color: #f23fa6;
}
h2{
    font-family: "oswald", sans-serif;
    text-align: center;
    font-size: 3rem;
    line-height: 3.7rem;
    color: white;
    text-transform: uppercase;
    
  
   
}



h3 {
    margin-top: 1rem;
    margin-bottom: 0.7rem;
    font-weight: 400; 
    display: inline-block;
    padding: 0.5rem;
    background-color: #f23fa6;
    color: white;
    text-align: center;
    

}




h5 {
    font-weight: 700;
    font-size: 20px;}
h4 { margin-top: 0.5rem; 
    padding: 0.1rem;}

h7 {font-weight: 400;
    font-size: 12px;}



section article { 
    text-align: center; 
    display: inline-block;
}

section article p {
    font-weight: 200;
}
section article img {
    border-radius: 20rem ;
    margin-top:1rem;
                       }

section article: hover {
    background: rgba(0, 43, 111, 0.87);
}

footer {
    font-size: 0.8rem;
    font-weight: 400;
   padding: 1rem;
    color: #f23fa6;
    background-color: black;
    
}
.integrantes {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
    
    padding:1rem;
}

.integrantes article img:hover {
    filter: saturate(100%); 
    transform: scale(0.95);
}


.integrantes article img {
    border-radius: 30rem;
    width: 80%;
    filter: saturate(100%);
    filter: saturate(0%);
}


.mapa {
    width: 100%;}
.sectmapa {
    background-color: rgba(255, 255, 255, 0.65);
    margin:1rem 0;
}

video{
    
    margin:auto;
}
@media (max-width: 30rem)
{
    .integrantes {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
        

    }
    
    .integrantes article {
        width:100%;
    }
    
    header img {
        width: 50%;
        border: 2px solid white;
    }
}