/*Variables*/

body {
    color: #444;
    font-family: 'Montserrat', sans-serif !important;
    --slide-up-px: -20vh;
    --slide-down-px: 20vh;
    --slide-right-px: 40px;
    --slide-left-px: -40px;
}

h1, h2{font-weight: bold!important; color: #154734;}


/* Header */
.header {background-color: #fff;}
.fixed-top.header {border-bottom: 1px solid #333333;font-size: 14px;}
header .buy_now.mobile.nav-link{display: none!important;}
header .nav-link {color: #333;}
header .nav-link:hover{color:#0A880A;}
header .buy_now{display: flex;align-items: center; padding-left: 1rem; margin-top: -5px;}
header .buy_now a{color: #fff;background: hsl(97 44% 51% / 1)!important;height: 20px;width: 80px;text-align: center;line-height: 20px;padding: 0;font-size: 12px;}
header .buy_now a:hover{color:#fff; background: hsl(97 44% 40% / 1)!important;}
header .logo { margin: 0 !important; }
header .logo img {height: 40px; }

/* Intro */
#intro {height: calc(100vh); display: flex; align-items: center; justify-content: center; padding: 0;}
#intro .row{width: 100%;}
#intro .image {padding: 0;}
#intro .image img{height: 100%;width: auto;object-fit: cover;object-position: left;margin-left: -150px;-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in;transform: translateX(100vw)}
#intro .slogans{position: relative; display: flex; justify-content: center; align-items: center}
#intro .slogans .intro-slide{
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center}
#intro .slogans #intro-slide-1 {position: absolute; inset: 0; -webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in;transform: translateX(var(--slide-left-px))}
#intro .slogans #intro-slide-2{-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in;transform: translateY(var(--slide-down-px)); flex: 1; align-items: flex-end;}
#intro .slogans #intro-slide-3 {-webkit-transition: all 1s ease-in;-moz-transition: all 1s ease-in; -ms-transition: all 1s ease-in;-o-transition: all 1s ease-in;transition: all 1s ease-in;transform: translateY(var(--slide-down-px)); flex: 1; align-items: flex-start;}


/* Top row */
.top_row{height: calc(100vh - 70px); overflow: hidden}
.top_row .title{z-index: 4;}
.top_row .image img{margin-left: -200px;}
.top_row .slogan { height: 100%; }

/* General classes */
.title .border_bg{position: relative;}
.title .border_bg::after{content: ''; display: block; position: absolute; left: -10px; bottom: 0; width: calc(100% + 30px); height: 20px;background: #33333354 0% 0% no-repeat padding-box;}
.title.light{font-weight: normal!important; font-size: 60px!important;}
/*.page {padding-top: 70px;}*/
.page .row{overflow: hidden;position: relative;}
.page .full_width{width: 100vw;}

.navbar-toggler{display: none;}

.mobile_image{display:none;}

.bg_image img{display:none;}

.bg_green {background-color: #154734}

/* Product row */
.product_row {position: relative;}
.product_row .product_icons img{height: 100px; width: auto;}
.product_row .product_icons .break{display: none;}
.product_row .product_icons img.fsc{height: 70px; }

/* Product Reversed row*/
.product_row.reversed .row{flex-direction: row-reverse;}
#overzicht .row.reversed{flex-direction: row-reverse;}
#overzicht img {width: 100%; }
#overzicht .text-center {font-weight: bold; color: #154734; font-size: 2rem;}

/* Video scrolling */
.scroll-bound {height: 150vh;}
.scroll-bound .content {height: 100vh;width: 100%;position: sticky;top:0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.scroll-bound video {width: 80vw; }

.parallax-window {background: transparent;}


/* Steps */
.steps{padding: 1rem 50px 0 50px;}
.steps img{max-width: 100%;}
.steps .description img{max-width: 200px; height: auto!important;}

/*recycling container*/
.recycling-container {justify-content: center; margin-top: 4rem;}
.recycling-container .recycling-item{flex: 1 1 50%; align-items: center}
.recycling-container .recycling-item .recycling-icon img{height: 200px; width: auto;}
.recycling-container .recycling-item .recycling-text {color: #154734;}
.recycling-container .recycling-item .recycling-text span{text-transform: uppercase; font-weight: bold; font-size: 1.5rem;}

    /* Contact */
#contact .text-green{color: #1BA309!important;}
.form-check-input:checked[type=checkbox]{
    background-color: #000!important;
    border-color: #fff!important;
}
.form-check.products-check{display: flex; align-items: center; gap: 10px}

/* Order Form */
.order_form{width: 400px;}
.order_form textarea,
.order_form label.full_width{width: 100%;}
.order_form .submit_button{background: hsl(97 44% 51% / 1) ;border-radius: 10px; color: #fff; padding: .75rem 2rem;}
.order_form .submit_button:hover {background: hsl(97 44% 40% / 1); color: #fff;}
.order_form .btn-secondary{background: #6C757A;border-radius: 10px; color: #fff; padding: .75rem 2rem; border: none!important;}

/* Copyright */
.copyright .row{padding: 4rem 0;}
.copyright a{color: #154734;}
.copyright a:hover{color: #333;}
/* Animations */
.reveal_from_right {
    opacity: 0;
    -webkit-transform: translateX(var(--slide-right-px));
    -moz-transform: translateX(var(--slide-right-px));
    -ms-transform: translateX(var(--slide-right-px));
    -o-transform: translateX(var(--slide-right-px));
    transform: translateX(var(--slide-right-px));
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

.reveal_from_left {
    opacity: 0;
    -webkit-transform: translateX(var(--slide-left-px));
    -moz-transform: translateX(var(--slide-left-px));
    -ms-transform: translateX(var(--slide-left-px));
    -o-transform: translateX(var(--slide-left-px));
    transform: translateX(var(--slide-left-px));
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
.reveal_from_left.hide {
    opacity: 0!important;
    -webkit-transform: translateX(var(--slide-left-px));
    -moz-transform: translateX(var(--slide-left-px));
    -ms-transform: translateX(var(--slide-left-px));
    -o-transform: translateX(var(--slide-left-px));
    transform: translateX(var(--slide-left-px));
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

.reveal_from_right.visible,
.reveal_from_left.visible
{
    opacity: 1;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}


@media only screen and (min-width: 1600px) {
    /* Contact */
    .contact_image{position: absolute;width: 1450px; left: -400px; top:-140px; z-index: -1}
}

@media only screen and (max-width: 1599px) {
    .contact_image{max-width: 100%;}
    .steps .step:not(:first-child){margin-top: 80px!important;}
    h2.title{font-size: 50px!important;}
}

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

    /* General classes */
    .title {font-size: 70px !important;font-weight: bold !important;}
    /*.page .row > *{height: 100%;}*/
    .page .row:not(.custom_height) {height: calc(100vh);overflow: hidden;}
    .page .row:not(.custom_height) > * {display: flex;flex-direction: column; justify-content: center;}
    .md-justify-content-end{justify-content: flex-end;}

    /* Video scroll */
    #box-video-container .title{position: absolute; left: calc(50% - 400px); bottom: 200px;}

    /* Steps */
    .steps .step .description{display: flex; align-items: center;}
    .steps .step.reversed .description{justify-content: flex-end;}
    .steps .step:not(:first-child){margin-top: -80px;}

    /* Animations */
    .reveal_from_right {
        opacity: 0;
        -webkit-transform: translateX(var(--slide-right-px));
        -moz-transform: translateX(var(--slide-right-px));
        -ms-transform: translateX(var(--slide-right-px));
        -o-transform: translateX(var(--slide-right-px));
        transform: translateX(var(--slide-right-px));
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        transition: all 1s ease-in;
    }

    .reveal_from_left {
        opacity: 0;
        -webkit-transform: translateX(var(--slide-left-px));
        -moz-transform: translateX(var(--slide-left-px));
        -ms-transform: translateX(var(--slide-left-px));
        -o-transform: translateX(var(--slide-left-px));
        transform: translateX(var(--slide-left-px));
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        transition: all 1s ease-in;
    }
    .reveal_from_left.hide {
        opacity: 0!important;
        -webkit-transform: translateX(var(--slide-left-px));
        -moz-transform: translateX(var(--slide-left-px));
        -ms-transform: translateX(var(--slide-left-px));
        -o-transform: translateX(var(--slide-left-px));
        transform: translateX(var(--slide-left-px));
        -webkit-transition: all 1s ease-in;
        -moz-transition: all 1s ease-in;
        -ms-transition: all 1s ease-in;
        -o-transition: all 1s ease-in;
        transition: all 1s ease-in;
    }

    .reveal_from_right.visible,
    .reveal_from_left.visible
    {
        opacity: 1;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    #intro .image img.intro-slide-from-right.visible {
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);

    }
    #intro .slogans #intro-slide-1.visible {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    #intro .slogans #intro-slide-1.slide-up {
        opacity: 0;
        -webkit-transform: translateY(var(--slide-up-px));
        -moz-transform: translateY(var(--slide-up-px));
        -ms-transform: translateY(var(--slide-up-px));
        -o-transform: translateY(var(--slide-up-px));
        transform: translateY(var(--slide-up-px));
    }
    #intro .slogans #intro-slide-2.visible,
    #intro .slogans #intro-slide-3.visible {opacity: 1;}
    #intro .slogans .slide-up {opacity: 0;}
    #intro .slogans #intro-slide-2.visible,
    #intro .slogans #intro-slide-3.visible,
    #intro .slogans #intro-slide-3.slide-up {
        -webkit-transform: translateY(var(--slide-up-px));
        -moz-transform: translateY(var(--slide-up-px));
        -ms-transform: translateY(var(--slide-up-px));
        -o-transform: translateY(var(--slide-up-px));
        transform: translateY(var(--slide-up-px));
    }

}
@media only screen and (min-width: 991px) and (max-width: 1200px) {
        #intro .image img{margin-left: -100px;}
        #intro .slogans .title{font-size: 50px!important;}
    }

@media only screen and (max-width: 991px) {
    /* General */
    h1.title {font-size: 50px !important;font-weight: bold !important;}
    h2.title {font-size: 50px !important;font-weight: bold !important;}
    .title .border_bg::after{left: -5px; bottom: 0; width: calc(100% + 20px); height: 10px;}
    /*.page{padding-top: 100px;}*/
    .page > .row{padding-left: 2rem; padding-right: 2rem;}
    img{max-width: 100%;}
    .row.reversed{flex-direction: column-reverse;}

    /*intro*/
    #intro {height: initial;}
    #intro .row{ display: flex; flex-direction: column-reverse; padding-top: 62px;}
    /*#intro .row *{transform: none!important; opacity: 1!important;}*/
    #intro .row > div{height: 50vh;}
    #intro .row .slogans { display: flex; flex-direction: column;}
    #intro .row .slogans .intro-slide{position:  initial!important; height: 100vh;}
    #intro .image {text-align: center;}
    #intro .image img {margin: 0; width:100%; height: auto; transform: none!important;}
    #intro .slogans #intro-slide-1,
    #intro .slogans #intro-slide-2,
    #intro .slogans #intro-slide-3
    {transform: translateY(var(--slide-down-px));}
    #intro .slogans #intro-slide-1.visible
    {opacity: 1; transform: translateY(var(--slide-up-px));}
    #intro .slogans #intro-slide-2.visible,
    #intro .slogans #intro-slide-3.visible
    {opacity: 1; transform: translateY(-30vw);}
    #intro .slogans #intro-slide-1.slide-up{opacity: 0; transform: translateY(calc(var(--slide-up-px) *2));}
    #intro .slogans h3{font-size: 20px!important; margin-bottom: 0!important;}
    #intro .slogans h1{font-size: 32px!important;}

    .mobile_mb{margin-bottom: 2rem;}
    .mobile_image{display:block; margin-bottom: 2rem;}
    .mobile_image.flip{-webkit-transform: scaleX(-1);transform: scaleX(-1);}

    .product_row{margin-top: 2rem;}
    .bg_image{background-image: initial!important; display: flex; justify-content: center;}
    .bg_image img{display:block;}

    /* Top row */
    .top_row .image img{max-width: 100%; margin-left: 0;}
    .top_row .slogan { height: auto; }

    /*.product_row .product_icons img{height: auto!important;}*/

    /* Steps */
    .steps{padding: 50px 25px 0 25px;}
    .steps .step .description {padding: 50px 0; text-align: center;}
    .steps .step .description img{float: none!important; margin: 0 auto;}
    .steps .step {flex-direction: column-reverse;}
    .steps .step.reversed {flex-direction: column;}
    .steps .step:not(:first-child){margin-top:0!important;}

    /* Contact */
    .contact_image{max-width: 100%;}
    .order_form{max-width: 100%; margin:0 auto; width: 100%;}
}

@media only screen and (min-width: 768px ) and (max-width: 990px){
    #intro .slogans #intro-slide-2.visible,
    #intro .slogans #intro-slide-3.visible
    {opacity: 1; transform: translateY(-140px);}
}

@media only screen and (max-width: 767px) {
    h1.title{text-align: center;width: 100%;}
    h2.title{font-size: 7vw!important;}

    .navbar-toggler {display: block;}
    header .logo img {height: 20px; }

    .container, .container-sm{max-width: calc(100% - 2rem) !important;}

    header.justify-content-center{justify-content: space-between!important;}
    .navbar-toggler-icon{width: 1em!important; height: 1em!important;}
    .navbar-light .navbar-toggler{border:none!important; padding-left: 0px!important; padding-right: 0px!important; outline: 0!important; box-shadow: none!important;}
    header{position: relative;}
    header .nav{display:none;}
    header .mobile-items {display: flex;align-items: center;gap: 1rem;}
    header .buy_now.mobile.nav-link{display: block!important; margin-top: 2px;}
    header .buy_now.mobile.nav-link{color: #fff;background: hsl(97 44% 51% / 1)!important;height: 20px;width: 80px;text-align: center;line-height: 20px;padding: 0;font-size: 12px;}
    header .buy_now.mobile.nav-link:hover{color:#fff; background: hsl(97 44% 40% / 1)!important;}
    header .nav.show{display: flex;flex-direction: column;position: absolute;background: white;width: 100%;top: 63px;-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);}
    header .nav.show li:not(.buy_now){padding: .5rem 1rem;}
    header .nav.show li:not(:last-child){border-bottom: 1px solid #ccc;}
    header .nav.show li.buy_now {display: none;}
    header .nav.show li.buy_now a{width: 100%; padding: .5rem 1rem; height: auto; box-shadow: none; border-radius: 0!important;}


    .recycling-container > div{flex-direction: column;}
}
@media only screen and (max-width: 512px) {
    .product_row .product_icons .break{display: block; flex-basis: 100%;
        height: 0;}
}