/*:root {

    --PK-white: #FFFFFF;

    --PK-grey: #c1beb6;
    --PK-black: #000000;

    --PK-green: #7e9834;
    --PK-dark-green: #637521;
    --PK-light-green: #c9d4aa;

}*/


/* GLOBAL STYLES */
* {
    scroll-behavior: smooth;
}
.body{
    margin: auto;
    max-width: 1920px;
    --PK-white: #FFFFFF;

    --PK-grey: #c1beb6;
    --PK-black: #000000;

    --PK-green: #7e9834;
    --PK-dark-green: #637521;
    --PK-light-green: #c9d4aa;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

.body img, .body video{
    display: block;
    width: 100%;
}

/* HEADER */

.PK-landing-header-image-container{
    width: 200px;
    margin: 1rem auto 2rem;
}
.PK-landing-header-title{
    font-weight: bold;
    font-size: 53px;
    color: #3d3d3d;
    line-height: 1;
    text-align: center;
}
.PK-landing-header-text{
    font-weight: bold;
    font-size: 15px;
    color: var(--PK-green);
    line-height: 1.4;
    width: 90%;
    margin: 1rem auto;
    text-align: center;
    letter-spacing: 1px;
}
/* HEADER */

/* COMPROMISO */
#PK-compromiso-slider-container{
    position: relative;
}
#PK-compromiso-slider-container #firstLeftArrow, .PK-compromiso-slider-container #firstRightArrow,
#PK-secciones-slider-container #secondLeftArrow, #PK-secciones-slider-container #secondRightArrow{
    width: 40px;
}
.PK-landing-compromiso{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
}
.PK-landing-compromiso-container{
    background-color: var(--PK-dark-green);
    color: var(--PK-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.PK-landing-compromiso-container div{
    width: 100vw;
}
.PK-landing-compromiso-container img{
    width: 100%;
}
.PK-landing-compromiso-container h3{
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100vw;
}
.PK-landing-compromiso-container p{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    text-transform: uppercase;
    width: 80%;
    margin: 0 auto;
    letter-spacing: 3px;
}
.PK-landing-compromiso-container:last-child{
    background-color: var(--PK-light-green);
    color: #3d3d3d;
    font-weight: bold;
}
/* COMPROMISO */

/* VIDEO */
.PK-landing-video{
    position: relative;
    /*margin: .3rem 0;*/
}

.PK-landing-video p{
    position: absolute;
    color: var(--PK-white);
    text-transform: uppercase;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
}

/* VIDEO */

/* EXTRA */
.PK-landing-extra{
    background-color: var(--PK-green);
    color: var(--PK-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.PK-landing-extra p{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
    padding: 1rem;
}
/* EXTRA */
.PK-descubre-mas{
    text-align: center;
    text-transform: uppercase;
    margin: 2rem auto;
    font-weight: bold;
    font-size: 18px;
}

/* SECCIONES */
#PK-secciones-slider-container{
    position: relative;
}
.PK-secciones-carousel{
    display: flex;
    overflow: scroll;
    margin-bottom: 1rem;
}
.PK-secciones-carousel .PK-secciones-container{
    margin: 1rem .3rem 1rem 0;
    position: relative;
    cursor: pointer;
    width: 45%;
}
.PK-secciones-image-container{
    width: 500px;
    max-width: 100%;
    height: 100%;
}
.PK-secciones-title{
    color: var(--PK-white);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 75%;
}
.left-arrow, .right-arrow{
    position: absolute;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}
.left-arrow{
    display: none;
}
 .right-arrow{
     display: block;
     right: 0;
 }
/* SECCIONES */
@media(min-width: 768px){
    .body{
        margin-top: 88px;
    }
 /* COMPROMISO */
    .PK-landing-compromiso{
        display: flex;
    }
    .PK-landing-compromiso-container{
        flex: 1;
    }

    .PK-landing-compromiso-container div{
        width: 110%;
    }
    .hide{
        display: none;
    }
    .PK-landing-compromiso.show:hover + .hide{
        display: block;    
    }
    /* COMPROMISO */
    .PK-secciones-title{
    color: var(--PK-white);
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    left: 50%;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 65%;
}
}
@media(min-width: 768px){

    /* HEADER */
    .PK-landing-header-title{
        font-size: 70px;
    }
    .PK-landing-header-text{
        font-size: 20px;
        letter-spacing: 1px;
    }
      /* LOGO */
    .PK-landing-header-image-container {
        width: 200px;
        cursor: pointer;
    }
    /* LOGO */
    /* HEADER */
   
    /* EXTRA */
    .PK-landing-extra{
        padding: 2rem;
    }
    .PK-landing-extra p{
        font-size: 20px;
        width: 60%;
        letter-spacing: 3px;
    }
    /* EXTRA */

    /* COMPROMISO */
    .PK-landing-compromiso{
        width: 100%;
        height: 100%;
        margin-top: 2%;
    }
    .PK-landing-compromiso-container{
        background-color: var(--PK-dark-green);
        color: var(--PK-white);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex: 1;
    }
    .PK-landing-compromiso-container div{
        width: 100%;
    }
    .PK-landing-compromiso-container img{
        width: 100%;
    }
    .PK-landing-compromiso-container h3{
        font-size: 40px;
        font-weight: bold;
        text-transform: uppercase;
        width: 100%;
    }
    .PK-landing-compromiso-container p{
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
        text-transform: uppercase;
        width: 80%;
        margin: 0 auto;
    }
    #PK-compromiso-slider-container #firstLeftArrow, .PK-compromiso-slider-container #firstRightArrow{
        display: none;
    }

    #PK-compromiso-slider-container #firstLeftArrow{
        display: block;
        display: block;
        margin-top: 14%;
        margin-left: 15%;
    }
    /* COMPROMISO */

      /* SECCIONES */
    .PK-secciones-carousel .PK-secciones-container{
        width: 19.5%;
        margin: 0 auto;
    }
    .right-arrow, .left-arrow{
        display: none;
    }
    /* SECCIONES */

    @media(max-width: 768px){
         .PK-secciones-carousel{
            display: flex;
            overflow: scroll;
            margin-bottom: 1rem;
        }
    }

    @media(max-width: 1024px){
    .PK-landing-compromiso-container p {
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
        text-transform: uppercase;
        width: 80%;
        margin: 0 auto;
    }    

    .PK-secciones-carousel{
        display: flex;
        overflow: scroll;
        margin-bottom: 1rem;
    }
}
    @media(min-width: 1024px){
        .PK-landing-compromiso-container p {
            font-size: 18px;
            font-weight: bold;
            line-height: 1.5;
            text-transform: uppercase;
            width: 80%;
            margin: 0 auto;
            letter-spacing: 4px;
        }    
        .PK-landing-video p {
            font-size: 18px;
            letter-spacing: 4px;
        }
        .PK-secciones-carousel{
            display: flex;
            overflow: hidden;
            margin-bottom: 1rem;
        }
    }
}

.sustainability_carousel {
    position: relative; }
    .sustainability_carousel .carousel-container {
      position: relative;
      display: flex;
      align-items: center;
      width: fit-content;
      padding: 10px 0px;
      height: 100%;
      width: 100%;
      overflow: scroll;
      -ms-overflow-style: none;
      scrollbar-width: none; }
      .sustainability_carousel .carousel-container::-webkit-scrollbar {
        display: none; }
    .sustainability_carousel .images-container {
      position: relative;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      transition: .5s ease-in-out; }
      .sustainability_carousel .images-container .carousel-image {
        position: relative;
        width: 289px;
        padding-right: 16px;
        box-sizing: border-box;
        display: flex; }
        .sustainability_carousel .images-container .carousel-image:hover img {
          filter: brightness(50%); }
        .sustainability_carousel .images-container .carousel-image .image-title {
          position: absolute;
          width: 100%;
          padding: 0 16px;
          color: #fff;
          font-size: 30px;
          line-height: 32px;
          font-weight: 600;
          text-align: center;
          top: 143px;
          z-index: 1; }
        .sustainability_carousel .images-container .carousel-image img {
          object-fit: cover;
          width: 100%;
          transition: .3s ease-in-out; }
    .sustainability_carousel .carousel-button {
      position: absolute;
      top: 45%;
      background-color: transparent;
      z-index: 4;
      width: 48px;
      height: 48px;
      text-align: center;
      border: 0;
      cursor: pointer; }
    .sustainability_carousel .carousel-button:focus {
      outline: 0; }
    .sustainability_carousel .carousel-button img {
      width: 48px;
      height: 100%;
      color: #000000b3; }
    .sustainability_carousel .button-prev {
      left: 4px; }
    .sustainability_carousel .button-next {
      right: 10px; }
      @media screen and (min-width: 1450px){
        #sustainability .sustainability_carousel .carousel-container {
margin: 0px auto;
max-width: 1450px;
}}
    @media screen and (min-width: 1710px) {
      .sustainability_carousel .carousel-container {
        margin: 0px auto;
        max-width: 1710px; }
      .sustainability_carousel .carousel-button {
        display: none; } }

        
