.container-scroll {
    /* width: 500px; */
}

.container-cards {
    width: auto;
    overflow-y: hidden;
    overflow-x: auto;
    padding: 10px;
    background: #F0F0F0;
    white-space: nowrap;
    margin:0px 0 41px 0;
}

.container-cards {
    overflow-y: hidden;
    overflow-x: auto;
    padding: 34px 10px;
    background: transparent;
    white-space: nowrap;
} 
}

.card-item a{ 
 
}

.card-item {
    margin: 0px 12px 0 0;
    display: inline-block;
    text-align: center;
}

.card-item.uno  a{    
    background-image: url(https://alpina.com/media/wysiwyg/card-s1.png);
}

.card-item.dos  a{
        background-image: url(https://alpina.com/media/wysiwyg/card-s2.png);

}

.card-item.tres a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s3.png);

}

.card-item.cuatro a {    
    background-image: url(https://alpina.com/media/wysiwyg/card-s4.png);
}

.card-item.cinco  a{
        background-image: url(https://alpina.com/media/wysiwyg/card-s5.png);

}

.card-item.seis a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s6.png);

}

.card-item.siete a{
        background-image: url(https://alpina.com/media/wysiwyg/card-s7.png);

}

.card-item.ocho a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s8.png);

}

.card-item.nueve a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s9.png);

}

.card-item.diez a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s10.png);

}

.card-item.once a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s11.png);

}

.card-item.doce a {
        background-image: url(https://alpina.com/media/wysiwyg/card-s12.png);

}

.card-item p{
    white-space: initial;
    position: absolute;
    transform: translate(50%, -50%);
    right: 50%;
    top: 50%;
    font-size: 28px;
    font-weight: 900;
    line-height: 25px;
}

.card-item a:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background: #1212124a;
    position: absolute;
    border-radius: 22px;
}

.card-item a {
       width: 345px;
       height: 320px;
       display: inline-block;
       color: #FFF;
       background-size: contain;
       background-repeat: no-repeat;
       position: relative;
       z-index: 1;
       cursor: pointer;
}

.container-scroll .container-cards::-webkit-scrollbar  {
    width:10px;
}

.container-scroll .container-cards::-webkit-scrollbar-button:increment,
.container-scroll .container-cards::-webkit-scrollbar-button {
    display: none;
} 

.container-scroll .container-cards::-webkit-scrollbar:horizontal {
    height: 14px;
}

.container-scroll .container-cards::-webkit-scrollbar-thumb {
    background-color: #1450C9;
    border-radius: 20px;
    border: 2px solid #f1f2f300;
}

.container-scroll .container-cards::-webkit-scrollbar-track {
    border-radius: 10px;  
}
.container-text-scroll {
    padding: 35px 10px 0 10px;
}

.container-text-scroll p span {
    display: block;
    font-size: 37px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 39px;
}
.nutrisos { 
    background: #65C5E9;
}
.ganasos {
    background: #F5E8BD;
}
.carbosos {
    background: #EFF4DF;
}
.plastisos {
    background: #FFFFFF;
}
.first-block .left-column {
    justify-content: flex-end !important;
  }
  
  .commitment-text p {
     font-size: 2.5rem !important;
  }
  
  .category-img img {
     height: 100% !important;
  }
  
  .special-block {
     margin-left: 2.5rem !important;
     margin-right: 2.5rem !important;
  }
.first-block .left-column {
  justify-content: flex-end !important;
}

.commitment-text p {
   font-size: 2.5rem !important;
}

.category-img img {
   height: 100% !important;
}

.special-block {
   margin-left: 2.5rem !important;
   margin-right: 2.5rem !important;
}
  
@media only screen and (max-width: 1920px){
    .banner-content-001 {
        height: 489px;
    }
    }
    @media only screen and (max-width: 1536px){
    .banner-content-001 {
        height: 394px;
    }
    }
    @media only screen and (max-width: 1440px) {
    .banner-content-001 {
        height: 378px;
    }
    }
    @media only screen and (max-width: 1366px) {
    .banner-content-001 {
        height: 351px;
    }
    }
    @media (max-width: 768px) {
        body[class*="sostenibilidad"] .first-block .pagebuilder-column-group{
          flex-direction: column !important;
        }
      
        body[class*="sostenibilidad"] .first-block .left-column {
           width: 100% !important;
           order: 2;
           min-height: 206px;
        }
      
        body[class*="sostenibilidad"] .first-block .right-column {
           width: 100% !important;
        }
        
        body[class*="sostenibilidad"] .first-block .left-column .commitment-text{
           display: none !important;
        }
        
      }
    @media only screen and (max-width: 767px){

        figure.category-img.img-h-a img {
            height: auto !IMPORTANT;
        }
        
        figure.category-img.img-h-a {
            background: #f5e8bd;
            padding: 0  0 7px  0;
        }
        
        .ganasos p:nth-child(1)  {
            display: none;
        }
        
        }
    @media only screen and (max-width: 760px) {
    .banner-content-001 {
        height: 435px;
    }
    }
    @media only screen and (max-width: 567px){
        .container-text-scroll p span {
        font-size: 25px;
        line-height: 25px;
        }
    }
    @media only screen and (max-width: 530px){
        .card-item a {
           width: 239px;
           height: 220px;
    }
        .card-item p{
            font-size:25px;
        }
    }
    @media only screen and (max-width: 460px) {
    .banner-content-001 {
        height: 263px;
    }
    }
    @media only screen and (max-width: 414px) {
    .banner-content-001 {
        height: 237px;
    }
    }
    @media only screen and (max-width: 380px) {
    .banner-content-001 {
        height: 215px;
    }
    }