@media (min-width: 768px){
    .hero-banner .hero-banner-slider .slick-slide .image figure,
    .hero-banner .hero-banner-slider .slick-slide .content .inner-content{
        transform: scale(1.2);
        transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
    }
    .hero-banner .hero-banner-slider .slick-slide.slick-active .image figure,
    .hero-banner .hero-banner-slider .slick-slide.slick-active .content .inner-content {
        transform: scale(1);
    }
}
/* Web only */
@media (min-width: 1200px){
    .container{
        max-width: 1200px;
    }
    .slick-arrow:hover{
        background-image: url("../images/btn-arrow-white.svg");
        background-color: #1B1D53;
    }
    /*Slider Dots*/
    .hero-banner .hero-banner-slider ul.slick-dots{
        top: 50%;
        left: 100px;
    }
    a.read-more-link:hover{
        color: #42B870;
    }
    a.arrow-link:hover{
        color: #181F53;
    }
    a.arrow-link:hover:after{
        right: -5px;
    }
    a.arrow-link.white:hover{
        color: #fff;
    }
    a.arrow-link.green:hover{
        color: #42B870;
    }
    .button:hover,
    .top-btn:hover {
        background-color: #42B870;
    }
    .responsive-navigation{
        display: none;
    }
    .header-full-wrapper .header{
        padding-left: 30px;
        padding-right: 30px;
    }
    .main-menu ul li{
        float: left;
    }
    .main-menu ul li >a:hover,
    .main-menu ul li.active >a,
    .header-full-wrapper.scrollMenu .main-menu >ul >li a:hover,
    .header-full-wrapper.scrollMenu .main-menu ul li.active a{
        color: #42B870;
    }
    .header-full-wrapper li.cta-btn{
        float: right;
        padding: 0;
        margin-top: 22px;
    }
    .header-full-wrapper li.cta-btn a:hover,
    .header-full-wrapper.scrollMenu .main-menu li.cta-btn a:hover{
        background-color: #fff;
        color: #181F53;
    }
    .header-full-wrapper li.cta-btn a:hover:after{
        background-image: url("../images/btn-arrow-blue.svg");
    }
    .header-full-wrapper.scrollMenu  li.cta-btn{
        margin-top: 8px;
    }
    .footer .widget ul li a:hover,
    .footer-copyright .footer-links ul li a:hover{
        color: #181F53;
    }
    .footer .widget.social-links ul li a:hover{
        background-color: #fff;
        color: #42B870;
    }
    .footer-copyright p a:hover{
        letter-spacing: 1px;
    }
    .footer .widgets .inner-menu{
        padding: 0;
    }
    .how-it-began-section .image{
        padding: 0;
    }
    .hero-banner .hero-banner-slider .inner-content .three .border-element{
        min-width: 400px;
    }
    .healthy-consumption-section{
        padding-bottom: 100px;
    }
    .healthy-consumption-section .content .inner-row{
        margin-top: 400px;
    }
    .healthy-consumption-section .content .inner-row .left,
    .healthy-consumption-section .content .inner-row .right{
        min-height: 350px;
    }
    .healthy-consumption-section .content .inner-row .right{
        padding: 30px;
    }
    .inner-page-banner{
        height: 90vh;
    }
    .inner-page-banner .content h1{
        font-size: 70px;
        line-height: 80px;
    }
    .leadership-section .inner-block ul.social-links li a:hover{
        color: #181F53;
    }
    .common-content-section.content-left .content{
        padding-right: 60px;
    }
    .common-content-section.content-right .content{
        padding-left: 60px;
    }
    .contact-form-section .left{
        padding-right: 60px;
    }
}

@media (min-width: 1500px){
    .hero-banner .hero-banner-slider .inner-content .three:before{
        left: -279px;
    }
    .hero-banner .hero-banner-slider .inner-content .three:after{
        left: -264px;
    }
    .hero-banner .hero-banner-slider .slick-slide.slick-active .inner-content .three:after{
        width: 280px;
    }
    .healthy-consumption-section{
        padding-bottom: 200px;
    }
    .healthy-consumption-section .content .inner-row{
        margin-top: 460px;
    }
    .healthy-consumption-section .content .inner-row .left,
    .healthy-consumption-section .content .inner-row .right{
        min-height: 460px;
    }
    .healthy-consumption-section .content .inner-row .right{
        padding: 30px 80px;
    }
    .hero-banner .hero-banner-slider .inner-content .three .border-element{
        min-width: 490px;
    }
}

/* mobile, i-pad */
@media (max-width: 1199px) {
    [data-aos^=fade][data-aos^=fade]{
        opacity: 1;
        transform: none;
    }
    .header-full-wrapper .site-logo{
        position: relative;
        z-index: 100;
    }
    .header-full-wrapper .site-logo img.default-logo{
        display: none;
    }
    .header-full-wrapper .site-logo img.scroll-logo{
        display: block;
    }
    .header-full-wrapper{
        background-color: #fff;
        border-bottom: 2px solid #42B870;
    }
    .header-full-wrapper .site-logo{
        margin-top: 15px;
    }
    .header-topbar .meta-wrapper span{
        font-size: 12px;
    }
    .header-full-wrapper .mean-nav{
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 15px;
        margin-bottom: 15px;
        background-color: #fff;
    }
    .header-full-wrapper .mean-bar{
        top: 15px;
    }
    .header-full-wrapper .mean-nav li.button{
        display: none;
    }
    .header-full-wrapper .mean-container{
        margin-top: -30px;
    }
    .header-full-wrapper .mean-container .mean-nav >ul{
        padding-top: 30px;
    }
    .header-full-wrapper .mean-container a.meanmenu-reveal {
        margin-top: -25px;
        border-radius: 0;
        border: 1px solid #42B870;
    }
    .header-full-wrapper .mean-container a.meanmenu-reveal span{
        margin-top: 6px;
        background-color: #42B870;
    }
    .header-full-wrapper .mean-container a.meanmenu-reveal span:first-child{
        margin: 0;
    }
    .header-full-wrapper .mean-container a.meanmenu-reveal.meanclose{
        color: #42B870;
    }
    .header-full-wrapper .mean-container .mean-nav ul li a{
        padding: 10px 0;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
        color: #000;
        text-transform: none;
    }
    .header-full-wrapper .mean-container .mean-nav ul li.active >a,
    .header-full-wrapper .mean-container .mean-nav ul li.active ul li.active >a{
        color: #42B870;
    }
    .mean-container .mean-nav ul li a.mean-expand,
    .mean-container .mean-nav ul li a.mean-expand:hover,
    .mean-container .mean-nav ul li.active a.mean-expand,
    .mean-container .mean-nav ul li.active a.mean-expand:hover{
        padding: 0;
        margin: 7px 0 0;
        background-color: transparent;
        color: #000;
    }
    .header-full-wrapper .mean-container .mean-nav ul li a{
        width: 100%;
        text-align: center;
    }
    .header-full-wrapper .mean-container .mean-nav li.cta-btn{
        display: flex;
    }
    .header-full-wrapper .mean-container .mean-nav li.cta-btn a{
        min-width: initial;
        width: auto;
        padding: 15px 55px 15px 15px;
        margin: 0 auto;
    }
    .footer{
        padding: 50px 0 25px;
    } 
    .footer .widgets{
        padding-bottom: 40px;
        margin: 0;
    }
    .footer .widget{
        margin-top: 30px;
    }
    .footer .widget.w-text{
        margin-top: 40px;
    }
    .footer-copyright .footer-links ul li{
        margin: 2px 10px;
    }
    .main-wrapper{
        margin-top: 70px;
    }
    /*Slider Dots*/
    .hero-banner .hero-banner-slider ul.slick-dots{
        top: 35%;
        left: 30px;
    }
    .hero-banner .hero-banner-slider .image, 
    .hero-banner .hero-banner-slider .content{
        min-height: initial;
        padding: 30px 60px;
    }
    .hero-banner .hero-banner-slider .inner-content .inner-col.empty{
        display: none;
    }
    .hero-banner .hero-banner-slider .inner-content .three:before, 
    .hero-banner .hero-banner-slider .inner-content .three:after{
        display: none;
    }
    .hero-banner .hero-banner-slider .inner-content .four .border-element:after{
        border-right: none;
    }
    .hero-banner .hero-banner-slider .inner-content .two,
    .hero-banner .hero-banner-slider .inner-content .six{
        text-align: center;
    }
    .hero-banner .hero-banner-slider .inner-content .two .border-element{
        min-width: initial;
    }
    .hero-banner .hero-banner-slider .inner-content .four .border-element,
    .hero-banner .hero-banner-slider .inner-content .five .border-element{
        width: 100%;
    }
    .hero-banner .hero-banner-slider .inner-content .four .border-element{
        float: none;
    }
    .hero-banner .hero-banner-slider .inner-content .six .border-element{
        margin: 0;
    }
    .healthy-consumption-section .image{
        padding: 0;
    }
    .healthy-consumption-section .content .inner-row .left{
        text-align: center;
    }
    .product-slider-section .product-slider .slick-slide{
        opacity: 1;
    }
    .product-slider-section .product-slider{
        padding-top: 30px;
    }
    .product-slider-section .product-slider .slick-arrow{
        top: -40px;
    }
    .product-slider-section .product-slider .slick-prev{
        left: initial;
        right: 60px;
    }
    .product-slider-section .product-slider .slick-next{
        right: 15px;
    }
}

/* i-pad landscape */
@media (min-width: 992px) and (max-width: 1199px){
    .healthy-consumption-section .image .top-img{
        z-index: 5;
        top: -250px;
        left: -120px;
        transform: scale(0.75);
    }
    .healthy-consumption-section .image .mid-img:after{
        display: none;
    }
    .healthy-consumption-section .content{
        display: flex;
    }
    .product-slider-section{
        padding: 100px 0 50px;
    }
    .product-slider-section .product-slider .slick-arrow{
        top: -60px;
    }
    .product-slider-section .product-slider .slick-prev{
        right: 100px;
    }
}

/* i-pad portrait, i-pad landscape */
@media (min-width: 768px) and (max-width: 1199px){
    .footer .inner-menu{
        padding: 0;
    }
    .footer-copyright{
        padding: 20px 10px 0;
    }
}

/* i-pad portrait*/
@media (min-width: 768px) and (max-width: 991px) {
    .main-wrapper{
        margin-top: 70px;
    }
}

/* mobile, I-pad portrait */
@media (max-width: 991px){
    h1{
        font-size: 50px;
        line-height: 55px;
    }
    h2{
        font-size: 35px;
        line-height: 40px;
    }
    p{
        font-size: 12px;
    }
    .slick-arrow{
        width: 30px;
        height: 30px;
    }
    .hero-banner .hero-banner-slider .image, 
    .hero-banner .hero-banner-slider .content{
        padding: 30px;
    }
    .hero-banner .hero-banner-slider .image{
        padding: 30px 50px;
    }
    .how-it-began-section,
    .product-slider-section,
    .contact-form-section{
        padding: 50px 0;
    }
    .how-it-began-section .content{
        padding: 0 15px;
        margin-bottom: 30px;
    }
    .how-it-began-section h2{
        padding: 20px;
        margin: 0 auto 50px;
    }
    .healthy-consumption-section .image .top-img, 
    .healthy-consumption-section .image .bottom-img,
    .healthy-consumption-section .image .mid-img:after{
        display: none;
    }
    .healthy-consumption-section .image .mid-img,
    .healthy-consumption-section .image .mid-img figure,
    .healthy-consumption-section .image .mid-img img{
        width: 100%;
    }
    .healthy-consumption-section .content .inner-row .links a:first-of-type{
        margin-right: 0;
    }
    .product-slider-section h2{
        font-size: 45px;
    }
    .proud-moments-section .image{
        justify-content: center;
    }
    .proud-moments-section .content{
        margin: 30px 0 0;
    }
    .mission-section,
    .suppliers-section,
    .common-content-section{
        padding: 50px 0;
    }
    .leadership-section{
        padding: 50px 0 100px;
    }
}

/* mobile */
@media (max-width: 767px){
    .header-full-wrapper .site-logo img {
        width: inherit;
    }
    .footer .widget{
        text-align: center;
    }
    .footer .widget figure{
        margin: 0 auto 15px;
    }
    .footer .social-links,
    .footer-copyright,
    .footer-copyright .footer-links{
        text-align: center;
    }
    .footer .copyright{
        order: 2;
        margin-top: 20px;
    }
    .footer-copyright{
        margin: 0;
    }
    .footer-copyright .footer-links{
        order: 1; 
    }
    /*Slider Dots*/
    .hero-banner .hero-banner-slider ul.slick-dots{
        top: 80px;
    }
    .hero-banner .hero-banner-slider .inner-content .five .border-element h6{
        width: auto;
    }
    .common-content-section.content-right .image,
    .contact-form-section .left{
        order: 2;
    }
    .contact-form-section .right{
        margin-bottom: 30px;
    }
}

/* mobile landscape */
@media only screen and (min-width: 520px) and (max-width: 767px) {
    .header-full-wrapper .mean-nav{
        max-height: 80vh;
    }
}

/* mobile portrait */
@media (max-width: 450px){
    .hero-banner .hero-banner-slider .image{
        min-height: 330px;
    }
}