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

body { 
     margin-top: 90px;
     color: #535353;
     min-height: 1500px;
}

.contenedor {
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
}

.header {
     width: 75%;
     padding: 40px;
     background-color: #E9E8E9;
     text-align: center;
}

.titulo {
     font-size: 25px;
    font-family: sans-serif;
      font-weight: 100;
}

.texto-introduccion {
     font-size: 60px;
     font-weight: 400;
}

 .contenedor-menu {
     background: #396362;
     color: #fff;
     position: fixed;
     width: 100%;
     height: 100%;
     z-index: 100;
     text-align: center;
     top: 0;
     clip-path: circle(55px at 50% 0);
     transition: .7s ease all;
}

.contenedor-menu.active {
     clip-path: circle(100% at 50% 0);
}

.btn-abrir-menu {
     font-size: 25px;
     padding: 10px;
     cursor: pointer;
}

.btn-abrir-menu:hover {
     animation: rotar 1.5s alternate;
}

@keyframes rotar {
     0% {transform: rotate(0deg);}
     20% {transform: rotate(10deg);}
     40% {transform: rotate(-15deg);}
     60% {transform: rotate(15deg);}
     80% {transform: rotate(-10deg);}
     100% {transform: rotate(0deg);}
}

.elementos-navecion {
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}

.elementos-navecion li {
     list-style: none;
     padding-bottom: 20px;
     margin-bottom: 20px;
}

.contenedor-menu.active li {
     animation: desplazamiento 1s ease;
}

@keyframes desplazamiento {
     from {transform: translateY(1000px);}
     to {transform: translateY(0);}
} 

.elementos-navecion li a {
     text-decoration: none;
     font-size: 40px;
     letter-spacing: 2px;
     padding: 15px 30px;
     color: #f8f8f8;
     text-transform: uppercase;
     transition: .2s ease all;
}

.elementos-navecion li a:hover {
     background: #000;
}
/* 
/* ------------------------- */
/* Menu de navegacion */
/* ------------------------- */
/* https://www.youtube.com/watch?v=j5GxE2ySqV0 */