* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 100vh;
    font-family: 'Asap', 'Arial', sans-serif;
    font-weight: 400;
}

main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(#E65100), to(#EF6C00));
    background: linear-gradient(#E65100, #EF6C00);
}

section {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 2em;
}

.subseccion {
    max-width: 640px;
    padding: 1em 2em;
}

.recorrido {
    max-width: 64opx;
    padding: 1em 2em;
}

h2 {
    font-size: 3em;
    color: #FFEB3B;
    margin: .5em 0;
}

h3 {
    font-size: 1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: .5em;
}

h4 {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 1em;
}

img {
    max-width: 100%;
    height: auto;
}


/*// HEADER - NAVEGACION //*/

header {
    position: fixed;
    width: 100%;
    background-color: rgba(17, 17, 17, .8);
    color: #fff;
    padding: .75em 1em;
}

#logo-palabra {
    display: inline-block;
    font-family: 'Expletus Sans', 'Arial', sans-serif;
    font-weight: 500;
    font-size: 1.5em;
    margin-bottom: -6px;
}

#logo-palabra:hover {
    -webkit-animation: neon 1.5s ease-in-out infinite alternate;
    animation: neon 1.5s ease-in-out infinite alternate;
    cursor: default;
}

@-webkit-keyframes neon {
    from {
        text-shadow: 0 0 0px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #FFEB3B, 0 0 16px #FFEB3B, 0 0 24px #FFEB3B, 0 0 32px #FFEB3B, 0 0 40px #FFEB3B;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFEB3B, 0 0 35px #FFEB3B, 0 0 40px #FFEB3B, 0 0 50px #FFEB3B, 0 0 75px #FFEB3B;
    }
}

@keyframes neon {
    from {
        text-shadow: 0 0 0px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #FFEB3B, 0 0 16px #FFEB3B, 0 0 24px #FFEB3B, 0 0 32px #FFEB3B, 0 0 40px #FFEB3B;
    }
    to {
        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFEB3B, 0 0 35px #FFEB3B, 0 0 40px #FFEB3B, 0 0 50px #FFEB3B, 0 0 75px #FFEB3B;
    }
}

#logo-palabra span {
    font-style: italic;
}

nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
}

nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

nav ul li,
nav ul span {
    display: inline-block;
    padding-left: 2em;
}

nav ul li a {
    color: #fff;
    font-family: 'Asap', 'Arial', sans-serif;
    font-size: 1em;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

nav ul li a:hover {
    color: #FFEB3B;
}


/*// Contenido //*/


/* ROTULO GRUPAL */


/* Grupo - Integrantes */

.grupo {
    min-height: 100vh;
    max-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 3em 2em 4em 2em;
    background: -webkit-gradient(linear, left top, left bottom, from(#E65100), to(#EF6C00));
    background: linear-gradient(#E65100, #EF6C00);
}

.integrantes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
}

.integrante {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    padding: .5em;
}

.integrante img {
    width: 240px;
    height: auto;
    margin-bottom: -3em;
}

.integrante .nombre {
    line-height: 3em;
    background-color: rgba(17, 17, 17, .8);
    color: #fff;
    text-align: center;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.integrante:hover .nombre {
    color: #FFEB3B;
}

.nombre span {
    display: inline-block;
    line-height: 1em;
}


/* Introducción */

.intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF3E0), to(#fff));
    background: linear-gradient(#FFF3E0, #fff);
}

.intro h2 {
    font-family: 'Expletus Sans', 'Arial', sans-serif;
    color: #E65100;
}

.intro h2 span {
    font-style: italic;
}


/* Legales */

.legales {
    background: -webkit-gradient(linear, left top, left bottom, from(#E65100), to(#EF6C00));
    background: linear-gradient(#E65100, #EF6C00);
}

.legales a {
    -ms-flex-item-align: center;
    align-self: center;
    color: #FFEB3B;
    -webkit-transition: color .25s ease;
    transition: color .25s ease;
}

.legales a:hover {
    color: #fff;
}

.legales h5 {
    color: #FFEB3B;
    margin-bottom: 1em;
}

.legales section p {
    width: 100%;
}

.legales section p span {
    text-transform: uppercase;
}


/* CARTA */

.proyecto {
    background: -webkit-gradient(linear, left top, left bottom, from(#E65100), to(#EF6C00));
    background: linear-gradient(#E65100, #EF6C00);
}

.proyecto h2 {
    color: #fff;
}

.proyecto h3 {
    color: #FFEB3B;
}


/* MAPA */

.aplicacion {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    margin-top: 50px;
}

.accordion {
    width: 70%;
    height: 0;
    color: black;
    padding: 1em;
}

.recorrido {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.aplicacion li {
    color: white
}

.aplicacion img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 25%;
}

.aplicacion a:hover {
    color: #FFEB3B;
}


/*// FOOTER //*/

footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    background-color: #111;
    color: #fff;
    padding: 0 1em;
}

footer p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 60%;
    flex: 1 60%;
}

footer p,
footer div {
    padding: .75em 0;
}

.footer-links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 320px;
    margin: 0 auto;
}

.footer-links img {
    height: 48px;
    -webkit-filter: invert(100%) hue-rotate(180deg);
    filter: invert(100%) hue-rotate(180deg);
}

footer p {
    font-size: .8em;
}


/*// MENÚ DESPLEGABLE DISPOSITIVOS MÓVILES //*/

#menu-toggle {
    display: none;
}

.hamburger-toggle {
    display: none;
}

@media screen and (max-width: 860px) {
    #logo-palabra {
        font-size: 1.25em;
    }
    nav ul {
        display: block;
        max-height: 0;
        width: 100%;
        overflow: hidden;
        text-align: center;
        -webkit-transition: max-height .25s ease-in, padding-top .5s ease;
        transition: max-height .25s ease-in, padding-top .5s ease;
    }
    nav ul li {
        display: block;
        padding: 1em 0;
    }
    nav ul span {
        display: none;
    }
    #menu-toggle:checked~ul {
        max-height: 720px;
        padding-top: .75em;
    }
    .hamburger-toggle {
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(12%, #fff), color-stop(12%, transparent), color-stop(44%, transparent), color-stop(44%, #fff), color-stop(56%, #fff), color-stop(56%, transparent), color-stop(88%, transparent), color-stop(88%, #fff), to(#fff));
        background: linear-gradient(to bottom, #fff 0%, #fff 12%, transparent 12%, transparent 44%, #fff 44%, #fff 56%, transparent 56%, transparent 88%, #fff 88%, #fff 100%);
        /*Lineas botón*/
        cursor: pointer;
        display: block;
        float: right;
        height: 1.25em;
        width: 1.25em;
        -webkit-transition: background .25s ease;
        transition: background .25s ease;
    }
    .hamburger-toggle:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFEB3B), color-stop(12%, #FFEB3B), color-stop(12%, transparent), color-stop(44%, transparent), color-stop(44%, #FFEB3B), color-stop(56%, #FFEB3B), color-stop(56%, transparent), color-stop(88%, transparent), color-stop(88%, #FFEB3B), to(#FFEB3B));
        background: linear-gradient(to bottom, #FFEB3B 0%, #FFEB3B 12%, transparent 12%, transparent 44%, #FFEB3B 44%, #FFEB3B 56%, transparent 56%, transparent 88%, #FFEB3B 88%, #FFEB3B 100%);
        /*Lineas botón*/
    }
    header {
        display: block;
    }
}