.image-step {
    margin: 20px 0 !important;
}

.image-step-background {
    margin: 60px 0 !important;
}

.image-step3 {
    margin: 60px 0;
    width: 90%;
}

.li-landing {
    background-color: #000;
}

h2.title-section {
    background-color: #E7F5FA;
}

h3.title-section {
    font-size: 26px;
    color: #2DBA9C;
}

.title-section-separator {
    background-image: url(../img/section2/separator-lines.png);
}

.icon-title {
    color: #F5A207;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 19px;
}

.section1-color {
    color: #2DBA9C;
}

.section1-color-yellow {
    color: #FEBC2A;
}

.section1-background {
    padding: 60px 0;
    background-color: #DBEFE5;
}

.section1-white {
    color: #fff;
}

.p-section {
    font-size: 17px;
    line-height: 27px;
    margin-top: 2%;
    margin-bottom: 0;
}

.parallax-section2-step1 {
    /*margin: 20px 100px 0 100px;*/
    overflow: hidden;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-duration: 1s;
    -moz-animation-delay: 0.3s;
    animation-duration: 1s;
    animation-delay: 0.3s;
}

#scene {
    margin: 20px 0px;
}

.separator-lines {
    background-image: url(../img/section1/separator-lines.png);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    height: 50px;
    background-color: #E7F5FA;
}

.separator-square {
    background-image: url(../img/section1/separator-square.png);
    background-repeat: repeat-x;
    background-position: 0 0;
    height: 25px;
    display: block;
    position: relative;
    top: -25px;
}

.separator-square2 {
    background-image: url(../img/section1/separator-square.png);
    background-repeat: repeat-x;
    background-position: left bottom;
    height: 60px;
    display: block;
    position: relative;
    top: -1px;
    background-color: #4F5C5A;
}

#mejoras-ambientales {}

#principales-hitos,
#retos {}

#ciclo-de-vida {
    padding: 100px 0;
}

#retos {}

.p2-section {
    line-height: 35px;
    margin-top: 20px;
    font-size: 30px;
    font-weight: 600;
}

.p3-section {
    margin-top: 25px;
    margin-bottom: 100px;
    font-size: 28px;
    color: #8DADBC;
    text-align: center;
}

h2.title-section {
    background-color: #FFF;
    font-size: 36px;
    margin-left: -21px;
}

h2.title-section2 {
    background-color: #E7F5FA;
    font-weight: bold;
}

.title-section-separator-white {
    background-image: url(../img/section1/separator-lines-white.png);
    background-repeat: repeat-x;
    background-position: 0 100px;
}

.step1-retos {
    background-image: url("../img/section2/step1/retos.png");
    width: 500px;
    height: 500px;
    overflow: hidden;
}

.reto1 {}

.padding-right-cifras {
    padding-right: 30px;
}

.border-left-cifras {
    border-left: solid 1px #109484;
    padding-left: 30px;
}

.border-bottom-cifras {
    border-bottom: solid 1px #109484;
}

.border-bottom-cifras-no-padding {
    border-bottom: solid 1px #109484;
}

.padding-cifras {
    padding: 6px 0;
}

.counter-cifras {
    border-top: solid 3px #109484;
    padding: 10px 0;
    margin: 20px 0;
    font-family: 'Titillium Web', sans-serif;
    font-size: 34px;
    font-weight: bold;
    color: #109484;
}

.counter-data {
    font-size: 54px;
}

#content-section2-step1 div,
#content-section2-step2 div,
#content-section2-step3 div {
    text-align: center;
}

#content-section2-step1 {}

#click-section2-step1-1 {
    position: absolute;
    top: 279px !important;
    left: 26% !important;
    width: auto;
    height: auto;
}

#click-section2-step1-2 {
    position: absolute;
    top: 202px !important;
    left: 39% !important;
    width: auto;
    height: auto;
}

#click-section2-step1-3 {
    position: absolute;
    top: 202px !important;
    left: 62% !important;
    width: auto;
    height: auto;
}

#click-section2-step1-4 {
    position: absolute;
    top: 340px !important;
    left: 90% !important;
    width: auto;
    height: auto;
}

#content-section2-step2 {}

#click-section2-step2-1 {
    position: absolute;
    top: 242px !important;
    left: 25% !important;
}

#click-section2-step2-2 {
    position: absolute;
    top: 242px !important;
    left: 46% !important;
}

#click-section2-step2-3 {
    position: absolute;
    top: 267px !important;
    left: 62% !important;
}

#click-section2-step2-4 {
    position: absolute;
    top: 147px !important;
    left: 77% !important;
}

#content-section2-step3 {}

#content-section2-step3 div {
    width: 16%;
    transition: transform 0.3s;
    height: auto;
    transform: translateY(0px);
}

#content-section2-step3>div:hover img {
    transform: translateY(5px);
}

#image-section2-step3 {
    margin-top: 150px;
}

#click-section2-step3-1 {
    position: absolute;
    top: 23%;
    left: 14%;
}

#click-section2-step3-2 {
    position: absolute;
    top: 23%;
    left: 37.7%;
}

#click-section2-step3-3 {
    position: absolute;
    top: 23%;
    right: 25.3%;
}

#click-section2-step3-4 {
    position: absolute;
    top: 28%;
    right: 5%;
}

#click-section2-step3-5 {
    position: absolute;
    top: 39%;
    right: 2%;
    text-align: right !important;
}

#click-section2-step3-6 {
    position: absolute;
    top: 53%;
    right: 14%;
    text-align: right !important;
}

#click-section2-step3-7 {
    position: absolute;
    top: 54%;
    right: 35%;
}

#click-section2-step3-9 {
    position: absolute;
    top: 40%;
    left: 35.8%;
}

#click-section2-step3-10 {
    position: absolute;
    top: 42%;
    left: 12%;
}

#click-section2-step3-11 {
    position: absolute;
    top: 68%;
    left: 10%;
    width: 21% !important;
}

#click-section2-step3-12 {
    position: absolute;
    top: 70%;
    left: 32%;
}

#click-section2-step3-13 {
    position: absolute;
    top: 70%;
    left: 54%;
    width: 19% !important;
}

#click-section2-step3-14 {
    position: absolute;
    top: 69%;
    left: 80%;
    width: 20% !important;
}

#click-section2-step3-15 {
    position: absolute;
    top: 86%;
    left: 59.6%;
    width: 18% !important;
}

#click-section2-step3-16 {
    position: absolute;
    top: 86%;
    left: 35.6%;
    width: 18% !important;
}

#click-section2-step3-17 {
    position: absolute;
    top: 86%;
    left: 11.5%;
    width: 15% !important;
}

.machine-arm img {
    -webkit-animation: arm-animation 1s infinite alternate;
    -moz-animation: arm-animation 1s infinite alternate;
    -o-animation: arm-animation 1s infinite alternate;
    -ms-animation: arm-animation 1s infinite alternate;
    animation: arm-animation 1s infinite alternate;
}

@-moz-keyframes arm-animation {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(5px);
        -moz-transform: translateY(5px);
        -o-transform: translateY(5px);
        -ms-transform: translateY(5px);
        transform: translateY(5px);
    }
}

@-webkit-keyframes arm-animation {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@-o-keyframes arm-animation {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@keyframes arm-animation {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

.step3-hidden {
    display: none;
}

.step3-retos-hidden {
    display: none;
}

.step1-hidden {
    display: none;
}

.step2-hidden {
    display: none;
}

.step2-2-hidden {
    display: none;
}

#image-section2-step3-retos {
    position: absolute;
    top: 40px;
}

.icon-title-reto {
    text-align: center;
    /*margin-top: -38px;*/
    font-size: 18px;
}

.navbar-collapse {
    background: #47ACEA !important;
}

.sp-color1 {
    color: #47ACEA;
}

.sp-color1 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #47ACEA;
}

.sp-color2 {
    color: #F595A8;
}

.sp-color2 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #E84A66;
}

.sp-color3 {
    color: #F4A106;
}

.sp-color3 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #F4A106;
}

.sp-color4 {
    color: #9BC556;
}

.sp-color4 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #9BC556;
}

.sp-color5 {
    color: #0D81A3;
}

.sp-color5 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #0D81A3;
}

.sp-color6 {
    color: #EE8BD8;
}

.sp-color6 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #718EA6;
}

.sp-color7 {
    color: #FF513B;
}

.sp-color7 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #FF513B;
}

.sp-color8 {
    color: #189E83;
}

.sp-color8 .accordion-heading span {
    font-size: 16px;
    color: #fff;
    padding: 5px 10px;
    background-color: #189E83;
}

.accordion-inner {
    padding: 10px;
}

.sp-space {
    padding-right: 25px;
    font-weight: 600;
    cursor: default;
    transition: opacity 0.3s;
    -webkit-transition: -webkit-opacity 0.3s;
    opacity: 1;
}

.sp-space:hover {
    opacity: 0.6;
}

#image-section3-step3 {
    position: absolute;
    margin-top: 8px;
    width: 97%;
}

.icon-title-ejemplos {
    text-align: center;
    margin-top: -32px;
    font-size: 18px;
}

.nav-tabs {
    border-bottom: 1px solid #2DBA9C;
}

a {
    color: #ffb300;
    transition: color 0.3s;
}

.nav-tabs>li>a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 19px;
    border: none;
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    background-color: white;
    color: #2DBA9C;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: #2DBA9C;
    cursor: default;
    background-color: #fff;
    border: 1px solid #2DBA9C;
    border-bottom-color: transparent;
}


/*publicaciones*/

.download-general {
    padding: 10px;
}

.download-section div {
    padding: 0px 0px;
    min-height: 180px;
}

.download-section-image img {
    width: 70%;
}

.download-section-image img:hover {
    transform: scale3d(1.1, 1.1, 1);
    transition: transform 0.3s;
    box-sizing: border-box;
    pointer-events: all;
}

.download-section-p {
    padding: 0px !important;
    font-size: 16px !important;
    font-weight: bold;
    line-height: 1.2;
}


/******************/


/* MEDIAS QUERIES */


/******************/

@media (max-width: 1200px) {
    #content-step1 {}
    #content-step1-1 a {
        width: 230px;
        display: -webkit-box;
    }
    /*Iconos la industria farmaceutica*/
    #click-section2-step1-1 {
        top: 159px !important;
    }
    #click-section2-step1-2 {
        top: 110px !important;
    }
    #click-section2-step1-3 {
        top: 112px !important;
        left: 61% !important;
    }
    #click-section2-step1-4 {
        top: 182px !important;
    }
    /**/
    /*Iconos segun tipo envase */
    #click-section2-step2-1 {
        position: absolute;
        top: 183px !important;
        left: 24% !important;
    }
    #click-section2-step2-2 {
        position: absolute;
        top: 186px !important;
        left: 45% !important;
    }
    #click-section2-step2-3 {
        position: absolute;
        top: 214px !important;
        left: 61% !important;
    }
    #click-section2-step2-4 {
        position: absolute;
        top: 124px !important;
        left: 76% !important;
    }
    /**/
    /*Iconos hitos*/
    #click-section2-step3-1 {
        top: 29.5%;
    }
    #click-section2-step3-2 {
        top: 29.5%;
    }
    #click-section2-step3-3 {
        top: 29.5%;
    }
    #click-section2-step3-4 {
        top: 34%;
    }
    #click-section2-step3-5 {
        top: 47%;
    }
    #click-section2-step3-6 {
        top: 61.5%;
    }
    #click-section2-step3-7 {
        top: 62%;
    }
    #click-section2-step3-8 {
        top: 62%;
    }
    #click-section2-step3-9 {
        top: 48%;
    }
    #click-section2-step3-10 {
        top: 50%;
    }
    #click-section2-step3-11 {
        top: 77%;
    }
    /**/
}

@media (max-width: 992px) {
    #content-step1-1 a {
        width: 170px;
        display: -webkit-box;
    }
    .counter-cifras {
        font-size: 24px;
    }
    .counter-data {
        font-size: 35px;
        display: block;
    }
    /*toda la sección*/
    .clicker .fa {
        font-size: 33px !important;
    }
    .circle {
        width: 68px !important;
        height: 68px !important;
    }
    .clicker {
        height: 62px !important;
        width: 62px !important;
        background-size: 23px;
    }
    /**/
    /*Iconos la industria farmaceutica*/
    #click-section2-step1-1 {
        top: 119px !important;
    }
    #click-section2-step1-2 {
        top: 70px !important;
    }
    #click-section2-step1-3 {
        top: 70px !important;
    }
    #click-section2-step1-4 {}
    /**/
    /*Iconos segun tipo envase */
    #click-section2-step2-1 {
        position: absolute;
        top: 121px !important;
        left: 24% !important;
    }
    #click-section2-step2-2 {
        position: absolute;
        top: 135px !important;
        left: 45% !important;
    }
    #click-section2-step2-3 {
        position: absolute;
        top: 162px !important;
        left: 60% !important;
    }
    #click-section2-step2-4 {
        position: absolute;
        top: 90px !important;
        left: 75% !important;
    }
    /**/
    /*Iconos hitos*/
    #click-section2-step3-1 {
        position: absolute;
        top: 358px;
        left: 108px;
    }
    #click-section2-step3-2 {
        top: 38.5%;
    }
    #click-section2-step3-3 {
        top: 38.5%;
    }
    #click-section2-step3-4 {
        top: 42.5%;
    }
    #click-section2-step3-5 {
        top: 54%;
        right: 3%;
    }
    #click-section2-step3-6 {
        top: 66.5%;
    }
    #click-section2-step3-7 {
        top: 67%;
    }
    #click-section2-step3-8 {
        position: absolute;
        top: 628px;
        right: 255px;
    }
    #click-section2-step3-9 {
        top: 54%;
    }
    #click-section2-step3-10 {
        top: 56%;
    }
    #click-section2-step3-11 {
        top: 79%;
    }
    #click-section2-step3-12 {
        top: 85%;
    }
    /**/
    /*CIFRAS*/
    .border-right-cifras {
        padding-rigth: 0;
    }
    .border-left-cifras {
        border-left: none;
        padding-left: 20px !important;
        padding-right: 30px !important;
    }
    .border-bottom-cifras-no-padding {
        border-bottom: none;
    }
    .border-bottom-cifras {
        border-bottom: none;
    }
    /**/
    /*RETOS*/
    .step3-retos-show {
        display: none;
    }
    .step3-retos-hidden {
        display: initial;
    }
    /**/
}

@media (max-width: 767px) {
    #content-step1-1 a {
        width: 170px;
        display: -webkit-box;
    }
    #content-step1-1 {
        bottom: -30px;
    }
    .adapter-80 {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    /*Oculta parallax*/
    #scene {
        display: none;
    }
    .step1-hidden {
        display: inherit;
    }
    /**/
    /*Oculta parallax*/
    #scene2 {
        display: none;
    }
    .step2-show {
        display: none;
    }
    .step2-hidden {
        display: inherit;
    }
    /**/
    /*Oculta parallax*/
    #scene3 {
        display: none;
    }
    .step2-2-show {
        display: none;
    }
    .step2-2-hidden {
        display: inherit;
    }
    /**/
    /*Oculta desfase interactivo*/
    #interactive-experience {
        display: none;
    }
    /**/
    /* iconos la industria farmaceutica*/
    #click-section2-step1-1 {
        top: 52% !important;
        width: 9% !important;
    }
    #click-section2-step1-2 {
        top: 46% !important;
        width: 9% !important;
    }
    #click-section2-step1-3 {
        top: 45% !important;
        width: 9% !important;
    }
    #click-section2-step1-4 {
        top: 64% !important;
        left: 85% !important;
        width: 9% !important;
    }
    /**/
    /* iconos segun tipo envase */
    #click-section2-step2-1 {
        top: 55% !important;
        left: 25% !important;
        width: 9% !important;
    }
    #click-section2-step2-2 {
        top: 56% !important;
        width: 9% !important;
    }
    #click-section2-step2-3 {
        top: 64% !important;
        left: 61% !important;
        width: 9% !important;
    }
    #click-section2-step2-4 {
        top: 47% !important;
        left: 75% !important;
        width: 9% !important;
    }
    /**/
    /*Oculta 'Iconos hitos' y muestra una sola imagen*/
    #content-section2-step3 {
        display: none;
    }
    .step3-show {
        display: none
    }
    .step3-hidden {
        display: initial;
    }
    #image-section2-step3 {
        margin-top: 0px;
    }
    /**/
    h2.title-section {
        padding-bottom: 0;
        padding-top: 0;
        margin-bottom: 2px;
    }
}

@media (max-width: 600px) {
    #content-step1-1 a {
        width: 130px;
        display: -webkit-box;
    }
    #content-step1-1 {
        bottom: -40px;
    }
    h2.title-section {
        padding-bottom: 0;
        padding-top: 0;
        margin-bottom: 2px;
    }
}

@media (max-width: 568px) {
    #content-step1-1 {
        display: none;
    }
}

@media (max-width: 480px) {
    .section1-background {
        padding: 15px 0 0;
    }
    .title-section-separator {
        background-position: 0px 66px;
    }
    .section-background-notstep {
        padding: 0 !important;
    }
    .section1-background2 {
        padding: 62px 0 0px;
    }
    .title-section-separator2 {
        background-position: 0 5px;
    }
    h2.title-section {
        font-size: 26px;
        /*padding: 25px 20px;*/
        margin-bottom: 0;
        padding-top: 10px;
    }
    h3.title-section {
        font-size: 22px;
    }
    .p-section {
        font-size: 16px;
    }
    .p2-section {
        font-size: 17px;
        line-height: 21px;
    }
    .image-step-background {
        margin: 0px 0 !important;
    }
    .counter-cifras {
        font-size: 20px;
        margin-bottom: 40px;
    }
    /* iconos segun tipo envase */
    #click-section2-step2-1 {
        top: 48% !important;
        left: 26% !important;
    }
    #click-section2-step2-2 {
        top: 48% !important;
    }
    #click-section2-step2-3 {
        top: 54% !important;
        left: 60% !important;
    }
    #click-section2-step2-4 {
        top: 41% !important;
        left: 74% !important;
    }
    /**/
}

@media (max-width: 440px) {
    /* iconos la industria farmaceutica*/
    #click-section2-step1-1 {
        top: 59% !important;
    }
    #click-section2-step1-2 {
        top: 53% !important;
    }
    #click-section2-step1-3 {
        top: 54% !important;
    }
    #click-section2-step1-4 {
        top: 64% !important;
        left: 85% !important;
    }
    /**/
}

@media (max-width: 353px) {
    /* iconos la industria farmaceutica*/
    #click-section2-step1-1 {
        top: 63% !important;
    }
    #click-section2-step1-2 {
        top: 58% !important;
    }
    #click-section2-step1-3 {
        top: 59% !important;
    }
    #click-section2-step1-4 {
        top: 67% !important;
        left: 84% !important;
    }
    /**/
    /* iconos segun tipo envase */
    #click-section2-step2-1 {
        top: 52% !important;
        left: 27% !important;
    }
    #click-section2-step2-2 {
        top: 53% !important;
    }
    #click-section2-step2-3 {
        top: 56% !important;
        left: 59% !important;
    }
    #click-section2-step2-4 {
        top: 48% !important;
        left: 73% !important;
    }
    /**/
}

.pad20 {
    padding: 20px;
}