@font-face {
    font-family: "HelveticaNowMicroW05-Rg";
    src: url("Fonts/HelveticaNowMicroW05-Rg.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Rg.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Rg.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Rg.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Rg.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowMicroW05-Bold";
    src: url("Fonts/HelveticaNowMicroW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Medium";
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Medium.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Medium.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-XBd";
    src: url("Fonts/HelveticaNowDisplayW05-XBd.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-XBd.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-XBd.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-XBd.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-XBd.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Bold";
    src: url("Fonts/HelveticaNowDisplayW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Md";
    src: url("Fonts/HelveticaNowDisplayW05-Md.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Md.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Md.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Md.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Md.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-Rg";
    src: url("Fonts/HelveticaNowDisplayW05-Rg.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-Rg.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-Rg.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-Rg.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-Rg.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowDisplayW05-XLt";
    src: url("Fonts/HelveticaNowDisplayW05-XLt.eot?#iefix");
    src: url("Fonts/HelveticaNowDisplayW05-XLt.eot?#iefix") format("eot"), url("Fonts/HelveticaNowDisplayW05-XLt.woff2") format("woff2"), url("Fonts/HelveticaNowDisplayW05-XLt.woff") format("woff"), url("Fonts/HelveticaNowDisplayW05-XLt.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-XBold";
    src: url("Fonts/HelveticaNowTextW05-XBold.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-XBold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-XBold.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-XBold.woff") format("woff"), url("Fonts/HelveticaNowTextW05-XBold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Bold";
    src: url("Fonts/HelveticaNowTextW05-Bold.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Bold.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Bold.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Bold.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Regular";
    src: url("Fonts/HelveticaNowTextW05-Regular.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Regular.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Regular.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Regular.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowMicroW05-Medium";
    src: url("Fonts/HelveticaNowMicroW05-Medium.eot?#iefix");
    src: url("Fonts/HelveticaNowMicroW05-Medium.eot?#iefix") format("eot"), url("Fonts/HelveticaNowMicroW05-Medium.woff2") format("woff2"), url("Fonts/HelveticaNowMicroW05-Medium.woff") format("woff"), url("Fonts/HelveticaNowMicroW05-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "HelveticaNowTextW05-Medium";
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix");
    src: url("Fonts/HelveticaNowTextW05-Medium.eot?#iefix") format("eot"), url("Fonts/HelveticaNowTextW05-Medium.woff2") format("woff2"), url("Fonts/HelveticaNowTextW05-Medium.woff") format("woff"), url("Fonts/HelveticaNowTextW05-Medium.ttf") format("truetype");
}


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

.web-frosi {
    text-align: center !important;
    color: #a0a0a0 !important;
    font-family: "HelveticaNowTextW05-Medium" !important;
    font-size: 12px !important;
}

/*PANTALLA 1*/

.ocultar {
    display: none;
}

.p1 {
    background: url('img/fondo-celular.svg') no-repeat;
    background-size: cover;
    width: 100vw;
}

.header {
    text-align: center;
    margin: 2vw 0;
}

.logo {
    background: #f5a800;
    color: #fff;
    font-family: "HelveticaNowDisplayW05-Bold";
    border-radius: 50px;
    margin: 1.5vh auto 2vh auto;
    display: inline-block;
    padding: 15px 20px;
}

.titulo-header {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #f5a800;
    font-size: 7vw;
    text-align: center;
    margin-top: 1vh;
}

.guia {
    margin: 3vw 5vw;
    text-align: center;
}

.guia p {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #262626;
    font-size: 3.5vw;
    text-decoration: none;
    line-height: 120%;
}

.porque {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #e87942;
    font-size: 4vw;
    width: 63vw;
    height: 14vw;
    margin: 1vw auto;
    padding: 3vw 1vw;
    border: solid 2.5px #e87942;
    border-radius: 10vw;
    cursor: pointer;
}

.titulo-emociones {
    position: absolute;
    left: 0;
    top: 67vw;
    width: 80vw;
}

.titulo-emociones p {
    font-family: "HelveticaNowDisplayW05-XBd";
    font-size: 5vw;
    background: #df542e;
    color: #fff;
    padding: 2vw;
    border-radius: 0 10vw 10vw 0;
    text-align: left;
    line-height: 120%;
}

.titulo-lider {
    position: absolute;
    right: 0;
    top: 180vw;
    width: 92vw;
}

.titulo-lider p {
    font-family: "HelveticaNowDisplayW05-XBd";
    font-size: 5vw;
    background: #e87942;
    color: #fff;
    padding: 3vw;
    border-radius: 10vw 0 0 10vw;
    text-align: right;
    line-height: 120%;
}

#fondo-der,
#fondo-izq {
    display: none;
}

.caja-svg-e,
.caja-svg-l {
    overflow-x: hidden;
}

.emociones {
    width: 147vw;
    margin: -29vw 0 0 -11vw;
}

.lider {
    width: 151vw;
    margin: -24vw 0 0 -38vw;
}

#emocion-1 {
    fill: #864a89;
    animation-name: emociones;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
}

#emocion-2 {
    fill: #864a89;
    animation-name: emociones;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
}

#emocion-3 {
    fill: #864a89;
    animation-name: emociones;
    animation-duration: 3s;
    animation-delay: 2.5s;
    animation-timing-function: ease-in-out;
}

#emocion-4 {
    fill: #864a89;
    animation-name: emociones;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-timing-function: ease-in-out;
}

@keyframes emociones {
    0% {
        fill: #864a89;
    }

    50% {
        fill: #df542e;
    }

    100% {
        fill: #864a89;
    }
}

#lider-1 {
    fill: #f4ae22;
    ;
    animation-name: lider;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
}

#lider-2 {
    fill: #f4ae22;
    ;
    animation-name: lider;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-timing-function: ease-in-out;
}

#lider-3 {
    fill: #f4ae22;
    ;
    animation-name: lider;
    animation-duration: 3s;
    animation-delay: 2.5s;
    animation-timing-function: ease-in-out;
}

#lider-4 {
    fill: #f4ae22;
    ;
    animation-name: lider;
    animation-duration: 3s;
    animation-delay: 4s;
    animation-timing-function: ease-in-out;
}

@keyframes lider {
    0% {
        fill: #f4ae22;
        ;
    }

    50% {
        fill: #e87942;
    }

    100% {
        fill: #f4ae22;
        ;
    }
}

/*POP UP*/

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
}


.popup {
    background: #fff;
    margin: 5vh auto;
    padding: 3vw;
    border-radius: 5px;
    width: 95%;
    height: 90%;
    position: relative;
}

.texto_popup {
    margin: auto;
    width: 90%;
    display: table;
    width: 100%;
    height: 200px;
}

.texto_popup p {
    font-family: "HelveticaNowTextW05-Bold";
    color: #a0a0a0;
    font-size: 3.9vw;
    margin: 3vw;
    margin: auto;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

.cerrar,
.cerrar-popup {
    width: 10vw;
    height: 10vw;
    background-size: 100%;
    position: absolute;
    right: 4%;
    top: 2%;
    cursor: pointer;
}

.cerrar {
    background: url(img/arriba.svg) no-repeat right;
}

.cerrar-popup {
    background: url(img/cerrar.svg) no-repeat right;
}

/*PANTALLA EMOCIONES*/

.titulo-emociones-p2,
.titulo-lider-p3 {
    font-family: "HelveticaNowDisplayW05-XBd";
    margin-top: 13vw;
    padding: 0 10vw;
}

.titulo-emociones-p2 {
    color: #df542e;
    font-size: 8vw;
    text-align: center;
}

.titulo-lider-p3 {
    color: #e87942;
    font-size: 7vw;
    line-height: 100%;
    text-align: left;
}

.guia-p2 {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #727272;
    font-size: 4.2vw;
    text-align: left;
    padding: 2vw 10vw;
    line-height: 120%;
}

.anterior-e,
.siguiente-e {
    border-radius: 10vw;
    border: solid .5vw #864a89;
    width: 13vw;
    height: 13vw;
    position: absolute;
    top: 95vw;
}

.anterior-e {
    background: url('img/flecha-violeta-prev.svg') no-repeat;
    background-size: 4vw;
    background-position: 45% center;
    background-color: transparent;
    left: 6vw;
}

.siguiente-e {
    background: url('img/flecha-violeta-next.svg') no-repeat;
    background-size: 4vw;
    background-position: 55% center;
    background-color: transparent;
    right: 6vw;
}

.anterior-l,
.siguiente-l {
    border-radius: 10vw;
    border: solid .5vw #e87942;
    width: 13vw;
    height: 13vw;
    position: absolute;
    top: 58vw;
}

.anterior-l {
    background: url('img/flecha-naranja-prev.svg') no-repeat;
    background-size: 4vw;
    background-position: 45% center;
    background-color: transparent;
    left: 3vw;
}

.siguiente-l {
    background: url('img/flecha-naranja-next.svg') no-repeat;
    background-size: 4vw;
    background-position: 55% center;
    background-color: transparent;
    right: 3vw;
}

.miedo-confianza,
.incertidumbre-expectativa,
.dudas-pasion,
.ansiedad-fortaleza {
    width: 90vw;
    height: 67vw;
    margin: 5vw auto;
}

.miedo-confianza {
    background: url('img/miedo-confianza.svg') no-repeat;
    background-size: contain;
}

.incertidumbre-expectativa {
    background: url('img/incertidumbre-expectativa.svg') no-repeat;
    background-size: contain;
}

.dudas-pasion {
    background: url('img/dudas-pasion.svg') no-repeat;
    background-size: contain;
}

.ansiedad-fortaleza {
    background: url('img/ansiedad-fortaleza.svg') no-repeat;
    background-size: contain;
}

.contenidoEmociones {
    padding-bottom: 8vw;
}

.contenidoEmociones p {
    font-family: 'HelveticaNowTextW05-Medium';
    color: #262626;
    font-size: 5vw;
    padding: 5vw 5vw 0 10vw;
}

.contenidoEmociones p:before {
    background: url(img/bullet-rojo.svg) no-repeat;
    content: " ";
    width: 6vw;
    height: 7vw;
    position: absolute;
    left: 2.5vw;
}

/*PANTALLA LIDER*/

.lider-p {
    background: url(img/lider-p.svg) no-repeat center;
    background-size: contain;
    height: 65vw;
    border-bottom: solid 1vw #038993;
    margin: 4vw 4vw 0 4vw;
}

.caja-izq {
    padding: 4vw;
}

.titulo-caja-izq {
    font-family: "HelveticaNowDisplayW05-XBd";
    color: #262626 !important;
    font-size: 4.5vw !important;
    text-align: left;
    line-height: 120%;
    border-bottom: none !important;
    margin: 0 !important;
}

.subtitulo-lider {
    font-family: 'HelveticaNowDisplayW05-XBd';
    color: #f1821c;
    font-size: 7vw;
    border-bottom: solid .5vw;
    margin: 5vw 20vw 0 2vw;
    padding: 3vw 0;
    line-height: 100%;
}

.lider-content {
    font-family: 'HelveticaNowTextW05-Medium';
    color: #772554;
    font-size: 5vw;
}

.bullet-lider {
    margin-left: 6vw;
}

.bullet-lider:before {
    background: url(img/bullet-rojo.svg) no-repeat;
    content: " ";
    width: 7vw;
    height: 8vw;
    position: absolute;
    left: 2vw;
}

.antes {
    background: url('img/antes.svg') no-repeat;
    background-size: contain;
    width: 10vw;
    height: 16vw;
    margin: -14vw 0 0 18vw;
}

.durante {
    background: url('img/durante.svg') no-repeat;
    background-size: contain;
    width: 14vw;
    height: 15vw;
    margin: -12vw 0 0 25vw;
}

.despues {
    background: url('img/despues.svg') no-repeat;
    background-size: contain;
    width: 8vw;
    height: 18vw;
    margin: -16vw 0 0 28vw;
}

.lapiz {
    background: url(img/lapiz.svg) no-repeat;
    background-size: contain;
    width: 7vw;
    height: 68vw;
    position: absolute;
    right: 4.5vw;
}

.lapiz-1 {
    top: 465vw;
}

.lapiz-2 {
    top: 560vw;
}

.lapiz-3 {
    top: 497vw;
}

.lapiz-4 {
    top: 494vw;
}

.caja-tablet {
    background: #fff;
    height: 130vw;
    margin-bottom: 4vw;
    padding-top: 5vw;
    width: 80vw;
    position: relative;
}

.borde-tablet {
    background: #115877;
    height: 112vw;
    padding: 6vw 5vw 10vw 5vw;
    width: 80vw;
    border-radius: 4vw;
    box-shadow: -20px -20px 90px 0 rgba(0, 0, 0, 0.25);
    margin-left: 5vw;
}

.tablet {
    background: #fff;
    width: 70vw;
    height: 93vw;
    border-radius: 4vw;
    position: relative;
}

.borde-tablet:after {
    content: " ";
    background: #ddd;
    width: 13vw;
    height: 1.5vw;
    border-radius: 10vw;
    position: absolute;
    top: 7.5vw;
    left: 39vw;
}

.tablet:after {
    content: " ";
    width: 7vw;
    height: 7vw;
    position: absolute;
    border-radius: 10vw;
    top: 96vw;
    background: #ddd;
    left: 31.5vw;
}

.tablet-1 p,
.tablet-2 p,
.tablet-3 p,
.tablet-4 p,
.tablet-1 ol {
    font-family: 'HelveticaNowTextW05-Medium';
    color: #115877;
    font-size: 3.7vw;
    width: 70vw;
    padding: 2.5vw 0 1.5vw 7vw;
    line-height: 110%;
    border-bottom: #999 solid;
}


.tablet-1 ol {
    margin-top: -1vw;
    width: 64vw;
}

.tablet-1 span {
    font-family: 'HelveticaNowTextW05-Medium';
    color: #115877;
    font-size: 4.1vw;
    width: 70vw;
    padding: 1.5vw 0 1.5vw 7vw;
    line-height: 110%;
    display: block;
}

.tablet-1 p:nth-child(6),
.tablet-2 p:nth-child(6),
.tablet-3 p:nth-child(3) {
    font-family: 'HelveticaNowTextW05-Medium';
    color: #038993;
    font-size: 4vw;
    width: 70vw;
    padding: 2vw;
    line-height: 110%;
    border-bottom: none;
}

.tablet-1 p:nth-child(7),
.tablet-2 p:nth-child(7),
.tablet-3 p:nth-child(4),
.tablet-3 p:nth-child(5) {
    font-family: 'HelveticaNowDisplayW05-XBd';
    color: #fff;
    background-color: #038993;
    font-size: 4.5vw;
    width: 70vw;
    padding: 4.4vw 2vw 4.4vw 10vw;
    line-height: 110%;
    border-bottom: none;
    text-align: center;
    margin: 3vw 0;
}

.lider-content ul {
    padding-left: 6vw;
}

ol {
    margin-left: 6vw;
}

.tablet-1 p:nth-child(1):before,
.tablet-1 p:nth-child(2):before,
.tablet-1 p:nth-child(3):before,
.tablet-1 span:before,
.tablet-2 p:nth-child(1):before,
.tablet-2 p:nth-child(2):before,
.tablet-2 p:nth-child(3):before,
.tablet-2 p:nth-child(4):before,
.tablet-2 p:nth-child(5):before,
.tablet-3 p:nth-child(1):before,
.tablet-3 p:nth-child(2):before,
.tablet-4 p:nth-child(1):before,
.tablet-4 p:nth-child(2):before {
    background: url(img/bullet-tablet.svg) no-repeat;
    content: " ";
    width: 5vw;
    height: 6vw;
    position: absolute;
    left: 1vw;
    margin-top: -1vw;
}

.clip {
    background: url('img/clip.svg') no-repeat;
    background-size: contain;
    height: 9vw;
    width: 4vw;
    transform: rotate(-30deg);
}

.clip-1,
.clip-3 {
    margin: -17vw 0 0 4vw;
}

.clip-2 {
    margin: -21vw 0 0 4vw;
}

.clip-4 {
    position: absolute;
    top: 52vw;
    left: 3vw;
}

#up {
    background: url("img/arriba.svg") no-repeat center center;
    width: 10vw;
    height: 10vw;
    background-size: cover;
    position: fixed;
    right: 3vw;
    bottom: -80px;
    transition: bottom 0.5s;
    margin: 3vw 0;
    border: none;
}

@media screen and (min-width: 769px) {

    .ocultar-pc {
        display: none;
    }

    .mostrar-pc {
        display: inline-block;
    }

    .mostrar-pc-block {
        display: block;
    }

    .p1 {
        text-align: center;
        width: 85vw;
        margin: auto;
        background: none;
    }

    .titulo-header {
        font-size: 2.5vw;
        margin-top: 0;
    }

    .header {
        margin: .5vw auto;
    }

    .guia {
        margin: .5vw;
    }

    .guia p {
        font-size: 1.2vw;
    }

    .porque {
        font-size: 1.3vw;
        width: 20vw;
        height: 4vw;
        padding: .8vw 0;
        transition: .5s all ease;
        z-index: 10;
        cursor: pointer;
        position: relative;
    }

    .porque:hover {
        background-color: #e87942;
        color: #fff;
    }

    .titulo-emociones,
    .titulo-lider {
        width: 27vw;
        top: 11.5vw;
    }

    .titulo-emociones p,
    .titulo-lider p {
        display: inline-block;
        font-size: 1.4vw;
        padding: 1.5vw 1vw;
        margin-top: 1vw;
    }

    .cerrar,
    .cerrar-popup {
        width: 3vw;
        height: 3vw;
        right: 2%;
        top: 3%;
    }

    .cerrar:before {
        font-family: "HelveticaNowTextW05-Medium";
        color: #5e5e5e;
        font-size: 1.5vw;
        content: "volver";
        position: absolute;
        right: 3.5vw;
        top: -4vw;
        transition: .7s all ease;
    }

    .cerrar:hover:before {
        font-family: "HelveticaNowTextW05-Medium";
        color: #5e5e5e;
        font-size: 1.5vw;
        content: "volver";
        position: absolute;
        right: 3.5vw;
        top: .2vw;
    }

    .texto_popup {
        margin: 1vw auto;
    }

    .texto_popup p {
        font-size: 1.5vw;
    }

    .caja-svg-e,
    .caja-svg-l {
        overflow: hidden;
        height: 56.5vw;
        display: inline-block;
        width: 68vw;
        position: absolute;
        top: 0;
    }

    .caja-svg-e {
        left: 0;
        opacity: .6;
        animation-name: em-opacidad;
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
        z-index: 2;
    }

    .caja-svg-l {
        right: 0;
        opacity: .6;
        animation-name: em-opacidad;
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
        z-index: 1;
    }

    .caja-svg-e:hover {
        opacity: 1;
    }

    .caja-svg-l:hover {
        opacity: 1;
        z-index: 3;
    }

    .emociones {
        display: inline-block;
        width: 61vw;
        height: 60vw;
        margin: -1.5vw 0 0 -7vw;
        padding: 0;
        z-index: 2;
        transition: .7s all ease;
    }

    .lider {
        display: inline-block;
        width: 63vw;
        height: 60vw;
        margin: -2vw -8.5vw 0 0;
        padding: 0;
        z-index: 1;
        transition: .7s all ease;
    }

    @keyframes em-opacidad {
        0% {
            opacity: 1;
        }

        70% {
            opacity: 1;
        }

        100% {
            opacity: .6;
        }
    }

    .emociones:hover {
        width: 68vw;
        height: 63vw;
        margin: -5.5vw 0 0 -7vw;
    }

    .lider:hover {
        width: 69vw;
        height: 64vw;
        margin: -4vw -8.5vw 0 0;
        z-index: 3;

    }

    #fondo-der,
    #fondo-izq {
        display: inline-block;
    }

    #emocion-1,
    #emocion-2,
    #emocion-3,
    #emocion-4,
    #lider-1,
    #lider-2,
    #lider-3,
    #lider-4 {
        cursor: pointer;
        transition: .5s all ease;
    }

    #emocion-1:hover,
    #emocion-2:hover,
    #emocion-3:hover,
    #emocion-4:hover {
        fill: #df542e;
    }

    #lider-1:hover,
    #lider-2:hover,
    #lider-3:hover,
    #lider-4:hover {
        fill: #e87942;
    }

    /*PANTALLA EMOCIONES*/

    .titulo-emociones-p2 {
        font-size: 3vw;
        margin-top: 1vw;
    }

    .guia-p2 {
        font-size: 1.2vw;
        padding: .5vw 0 0 0;
        text-align: center;
    }

    .miedo-confianza,
    .incertidumbre-expectativa,
    .dudas-pasion,
    .ansiedad-fortaleza {
        display: inline-block;
        width: 55vw;
        height: 41vw;
        margin: 7vw 0 2vw 1vw;
    }

    .cajas-p {
        display: inline-block;
        width: 30vw;
        vertical-align: top;
        padding: 11vw 0 0 2vw;
    }

    .contenidoEmociones {
        background: url('img/fondo-emociones.svg') no-repeat;
        background-size: cover;
        padding-bottom: 0;
        margin-top: -2.5vw;
    }

    .contenidoEmociones p {
        font-size: 1.5vw;
        padding: 1vw;
    }

    .contenidoEmociones p:before {
        width: 2vw;
        height: 3vw;
        left: 55.5vw;
    }

    .anterior-e,
    .siguiente-e,
    .anterior-l,
    .siguiente-l {
        cursor: pointer;
        width: 5vw;
        height: 5vw;
        border-radius: 10vw;
        top: 23vw;
        background-size: 1.3vw;
        transition: .5s all ease;
    }

    .anterior-e,
    .anterior-l {
        left: 1vw;
    }

    .siguiente-e,
    .siguiente-l {
        right: 1vw;
        background-position: 55% center;
    }

    .anterior-e,
    .siguiente-e {
        border: solid .2vw #864a89;
    }

    .anterior-l,
    .siguiente-l {
        border: solid .2vw #e87942;
    }

    .anterior-e:hover {
        background: url('img/flecha-hover-prev.svg') no-repeat;
        background-color: #864a89;
        width: 13vw;
        background-size: 11vw;
        background-position: 35%;
    }

    .siguiente-e:hover {
        background: url('img/flecha-hover-next.svg') no-repeat;
        background-color: #864a89;
        width: 13vw;
        background-size: 11vw;
        background-position: 65%;
    }

    .a-miedo:hover:before {
        content: "miedo";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        margin-left: 5vw;
    }

    .a-confianza:hover:after {
        content: "confianza";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: 2.5vw;
        left: 4vw;
    }

    .a-incerti:hover:before {
        content: "incertidumbre";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        margin-left: 2.5vw;
    }

    .a-expec:hover:after {
        content: "expectativas";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: 2.5vw;
        left: 2.5vw;
    }

    .a-dudas:hover:before {
        content: "dudas";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        margin-left: 4.5vw;
    }

    .a-pasion:hover:after {
        content: "pasión";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: 2.5vw;
        left: 4.5vw;
    }

    .a-ansiedad:hover:before {
        content: "ansiedad";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        margin-left: 4vw;
    }

    .a-fortaleza:hover:after {
        content: "fortaleza";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.2vw;
        color: #fff;
        position: absolute;
        top: 2.5vw;
        left: 4vw;
    }

    /*PANTALLA LIDER*/

    .titulo-lider-p3 {
        font-size: 3vw;
        margin: .5vw 0;
        text-align: center;
    }

    .contenidoLider {
        background: url('img/fondo-lider.svg') no-repeat;
        background-size: 100vw;
        padding: 0 0 0 3vw;
        height: 55vw;
    }

    .lider-p {
        display: inline-block;
        height: 16vw;
        width: 21vw;
        border-bottom: none;
        float: right;
        margin: 0 5vw 0 0;
    }

    .caja-izq {
        display: inline-block;
        width: 65vw;
    }

    .lider-content {
        background-color: rgba(255, 255, 255, 0.7);
        border-top: #f1821c solid .3vw;
        box-shadow: -20px -20px 90px 0 rgba(0, 0, 0, 0.25);
        padding: 1.5vw;
        height: 34vw;
        font-size: 1.6vw;
        line-height: 140%;
    }

    .bullet-lider {
        margin-left: 2vw;
    }

    .bullet-lider:before {
        width: 2vw;
        height: 2vw;
        left: 8.5vw;
    }

    .antes {
        width: 5vw;
        height: 5vw;
        position: absolute;
        top: 46vw;
        left: 58.5vw;
        margin: 0;
    }

    .durante {
        width: 6.5vw;
        height: 4.5vw;
        position: absolute;
        top: 47vw;
        left: 56vw;
        margin: 0;
    }

    .despues {
        width: 4vw;
        height: 6vw;
        position: absolute;
        top: 45vw;
        left: 58.5vw;
        margin: 0;
    }

    .lider-content li {
        font-size: 1.6vw;
        padding: .5vw 0;
    }

    .titulo-caja-izq {
        font-size: 1.2vw !important;
        padding: 0 0 1.5vw 0 !important;
    }

    .botonlider-a {
        font-family: "HelveticaNowDisplayW05-XBd";
        color: #fff;
        font-size: 1.7vw;
        background: #e87942;
        padding: .5vw .8vw;
        border: solid .25vw transparent;
        border-radius: 1vw 1vw 0 0;
        transition: .5s all ease;
        cursor: pointer;
        outline: none;
        opacity: .7;
    }

    .botonlider-b {
        font-family: "HelveticaNowDisplayW05-XBd";
        color: #fff;
        font-size: 1.7vw;
        background: #e87942;
        padding: .5vw .8vw;
        border: solid .25vw transparent;
        border-radius: 1vw 1vw 0 0;
        transition: .5s all ease;
        cursor: pointer;
        outline: none;
        width: 14vw;
        line-height: 100%;
        opacity: .7;
    }

    #lider1 .caja-izq button:nth-child(4) {
        margin: 0 16.4vw;
    }

    #lider2 .caja-izq button:nth-child(3) {
        margin: 0 7.2vw;
    }

    #lider4 .caja-izq button:nth-child(3) {
        margin: 0 5.2vw;
        width: 18vw;
    }

    #lider1 .caja-izq button:nth-child(5),
    #lider2 .caja-izq button:nth-child(4),
    #lider3 .caja-izq button:nth-child(3),
    #lider4 .caja-izq button:nth-child(4) {
        float: right;
    }

    .lider-estilo {
        color: #fff;
        background: #f1821c;
        border: solid .25vw transparent;
        opacity: 1;
    }

    .anterior-l:hover {
        background: url('img/flecha-blanca-prev.svg') no-repeat;
        background-color: #e87942;
        width: 12vw;
        background-size: 1.5vw;
        background-position: 10%;
    }

    .siguiente-l:hover {
        background: url('img/flecha-blanca-next.svg') no-repeat;
        background-color: #e87942;
        width: 12vw;
        background-size: 1.5vw;
        background-position: 90%
    }

    .botonlider1:hover,
    .botonlider2:hover,
    .botonlider3:hover,
    .botonlider4:hover {
        opacity: 1;
        background: #f1821c;
    }

    .a-comenzar:hover:after {
        content: "comenzar";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.5vw;
        color: #fff;
        position: absolute;
        top: 1.1vw;
        left: 2.2vw;
    }

    .a-planificar:hover:after {
        content: "planificar";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.5vw;
        color: #fff;
        position: absolute;
        top: 1.1vw;
        left: 2.7vw;
    }

    .a-buscar:hover:after {
        content: "buscar";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.5vw;
        color: #fff;
        position: absolute;
        top: 1.1vw;
        left: 3.5vw;
    }

    .a-crecer:hover:after {
        content: "crecer";
        font-family: "HelveticaNowDisplayW05-XBd";
        font-size: 1.5vw;
        color: #fff;
        position: absolute;
        top: 1.1vw;
        left: 3.5vw;
    }

    .lapiz {
        height: 13vw;
        width: 1.5vw;
        top: 36vw;
        right: 31vw;
        transform: rotate(15deg);
    }

    .caja-tablet {
        height: 31vw;
        margin-bottom: 0;
        padding-top: 0;
        width: 21vw;
        background: transparent;
        position: absolute;
        right: 8vw;
        top: 21.8vw;
    }

    .borde-tablet {
        height: 31vw;
        padding: 0;
        width: 21vw;
        border-radius: 2vw;
        margin: 0;
        position: relative;
    }

    .tablet {
        height: 26vw;
        width: 19vw;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 1.8vw;
        right: 1vw;
        border-radius: 1vw;
    }

    .borde-tablet:after {
        width: 4vw;
        height: .4vw;
        left: 8.5vw;
        top: .9vw;
    }

    .tablet:after {
        width: 2vw;
        height: 2vw;
        top: 26.6vw;
        left: 8.6vw;
    }

    .tablet p,
    .tablet-1 ol,
    .tablet-1 span {
        font-size: 1.1vw;
        width: 19vw;
        padding: 1vw 2vw;
    }

    .tablet-4 p:nth-child(1),
    .tablet-4 p:nth-child(2) {
        font-size: 1.1vw;
        width: 19vw;
        padding: .5vw 0 .5vw 2vw;
    }

    .tablet-1 ol {
        padding-left: 4vw;
        margin-top: -.5vw;
        margin-left: 0;
    }

    .tablet-1 p:nth-child(6),
    .tablet-2 p:nth-child(6),
    .tablet-3 p:nth-child(3) {
        font-size: 1.05vw;
        width: 19vw;
        padding: .5vw;
    }

    .tablet-1 p:nth-child(7) {
        font-size: 1.05vw;
        width: 19vw;
        padding: .5vw .5vw .5vw 1vw;
        margin: 0;
    }

    .tablet-2 p:nth-child(7) {
        font-size: 1.05vw;
        width: 19vw;
        padding: .5vw .2vw .5vw 2vw;
        margin: -.2vw 0;
    }

    .tablet-3 p:nth-child(4),
    .tablet-3 p:nth-child(5) {
        font-size: 1.05vw;
        width: 19vw;
        padding: .5vw .5vw .5vw 2.5vw;
        margin: .5vw 0;
    }

    #botonlider6 ul {
        padding-left: 1.5vw;
    }

    .lider-content ul {
        padding-left: 2vw;
    }

    ol#botonlider1,
    ol#botonlider2,
    ol#botonlider3 {
        margin-left: 0;
        padding-left: 3.5vw;
    }

    .tablet-1 p:nth-child(1):before,
    .tablet-1 p:nth-child(2):before,
    .tablet-1 p:nth-child(3):before,
    .tablet-1 span:before,
    .tablet-2 p:nth-child(1):before,
    .tablet-2 p:nth-child(2):before,
    .tablet-2 p:nth-child(3):before,
    .tablet-2 p:nth-child(4):before,
    .tablet-2 p:nth-child(5):before,
    .tablet-3 p:nth-child(1):before,
    .tablet-3 p:nth-child(2):before,
    .tablet-4 p:nth-child(1):before,
    .tablet-4 p:nth-child(2):before {
        width: 1.5vw;
        height: 1.6vw;
        left: 0.4vw;
        margin-top: 0;
    }

    .clip {
        width: 1vw;
        height: 2vw;
    }

    .clip-1 {
        margin: -2.7vw 0 0 1vw;
    }

    .clip-2 {
        margin: -2.7vw 0 0 .5vw;
    }

    .clip-3 {
        margin: -3.3vw 0 0 1vw;
    }

    .clip.clip-4 {
        top: 13.8vw;
        left: 1vw;
    }
}