body {
    color: #666;
    font-size: 15px;
    line-height: 22px
}
html,
body {
    width: 100%
}
::selection {
    background: #7EB8DF;
    color: #fff
}
a:focus,
a:hover {
    text-decoration: none
}
h1 {
    font-family: 'Asap', sans-serif;
    font-size: 35px;
    text-align: center
}
h1:after {
    border-bottom: 1px solid #7EB8DF;
    content: '';
    display: block;
    margin: 10px auto 50px;
    width: 90px
}
h4 {
    font-size: 20px;
    font-weight: 700
}
section {
    clear: both;
    padding: 65px 0
}
textarea {
    margin: 25px 0
}
#hero {
    background: #E6F1F9;
    height: auto;
    padding: 0;
    max-height: 196px
}
#hero-desktop {
    background: #E6F1F9;
    height: 197px
}
#hero-mobile {
    background: #0071C0;
    min-height: 100px;
    height: auto
}
.background {
    background: #F5F5F5
}
.bold {
    font-size: 20px;
    font-weight: 700
}
.btn-primary {
    background: #0071C0;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 14px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
    text-transform: uppercase
}
.btn-primary > i {
    color: #fff;
    font-size: 20px;
    margin: 0 0 0 15px
}
.facts {
    height: 300px
}
.form-control {
    height: 40px;
    border-radius: 0
}
.header-img-right {
    max-height: 197px !important
}
.header-img-left {
    max-height: 197px !important;
    position: relative;
    left: 41px
}
.header-img-inside {
    max-height: 224px !important;
    left: -67px;
    position: relative;
    z-index: 1
}
.header-text {
    color: #fff;
    font-size: 30px;
    font-style: italic;
    z-index: 2;
    position: relative;
    top: -215px;
    text-align: center;
    line-height: 41px;
    font-family: 'asap', sans-serif;
    right: -20px
}
.header-text-mobile {
    color: #fff;
    font-size: 30px;
    font-style: italic;
    z-index: 2;
    position: relative;
    text-align: center;
    font-family: 'asap', sans-serif;
    line-height: 50px
}
.seperator-img {
    margin: 0 auto;
    display: block;
    top: 90px;
    position: relative
}
.text-muted {
    color: #666;
    opacity: .6
}
.v-center {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
.pull-bottom {
    position: relative;
    top: 100px
}

/* Taalkeuze */

.cirkel-full-grey {
    background: #F5F5F5;
    border: 2px solid #F5F5F5;
    border-radius: 100%;
    height: 100px;
    margin: 10px auto 35px;
    width: 100px
}
.giant-blue {
    color: #0071C0;
    font-family: 'Asap', sans-serif;
    font-size: 40px;
    text-align: center
}
.v-center-link {
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%)
}
.cirkel-full-grey:hover {
    background: #0071C0;
    border: 2px solid #0071C0;
}
.cirkel-full-grey:hover p {
    color: #fff;
}
#taalkeuze-img {
    margin: 0 auto 50px;
}

/* Header */

/* line 1, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.rotate-plus{top:6px;transform:rotate(45deg)}/* line 6, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.rotate-minus{top:-2px;transform:rotate(-45deg)}/* line 11, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar{margin-bottom:0;background:#FFFFFF;border:none}/* line 16, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-brand{height:inherit}/* line 18, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-brand img{max-width:150px}/* line 23, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-toggle{margin-top:15px;border:none}/* line 26, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-toggle:hover,.navbar .navbar-header .navbar-toggle:focus{background-color:transparent}/* line 29, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-toggle .icon-bar{transition:all 500ms ease-in-out;position:relative}/* line 34, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-toggle.close-nav .icon-bar{opacity:0}/* line 36, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header .navbar-toggle.close-nav .icon-bar.rotate-plus,.navbar .navbar-header .navbar-toggle.close-nav .icon-bar.rotate-minus{opacity:1;margin-top:0 !important}@media screen and (max-width: 992px){/* line 15, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-header{float:none}}/* line 47, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-collapse{margin:0 -15px;padding:0}/* line 53, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.active{border-bottom:3px solid #0074c3}/* line 55, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.active a{background-color:transparent}/* line 57, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.active a:focus,.navbar .navbar-nav li.active a:active,.navbar .navbar-nav li.active a:hover{background-color:transparent}@media screen and (max-width: 991px){/* line 53, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.active{border-bottom:none}}/* line 65, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li:hover{border-bottom:3px solid #0074c3}@media screen and (max-width: 991px){/* line 65, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li:hover{border-bottom:none}}/* line 71, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li a{padding-top:25px;padding-bottom:25px}/* line 74, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li a:focus,.navbar .navbar-nav li a:active,.navbar .navbar-nav li a:hover{background-color:transparent}@media screen and (max-width: 991px){/* line 71, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li a{padding-top:15px;padding-bottom:15px}}/* line 84, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open a:focus,.navbar .navbar-nav li.open a:active,.navbar .navbar-nav li.open a:hover{background-color:transparent}/* line 90, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu li:hover{color:#FFF;border-bottom:none}/* line 93, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu li:hover a{background-color:#0074c3;color:#FFF}/* line 98, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu li a{padding-top:14px;padding-bottom:14px}@media screen and (max-width: 991px){/* line 88, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu{left:0;padding:0;border-left:5px solid #005C8F;border-radius:0}/* line 109, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu li a{color:#FFF;font-size:1.3rem;font-weight:300;padding-left:25px}/* line 114, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open .dropdown-menu li a:hover{background-color:#005C8F}}@media screen and (max-width: 991px){/* line 123, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.open a:focus,.navbar .navbar-nav li.open a:active,.navbar .navbar-nav li.open a:hover{background-color:#005C8F;color:#FFF}}@media screen and (max-width: 991px){/* line 52, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li{border-top:1px solid #005C8F}/* line 132, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li a{padding-top:14px;padding-bottom:14px;color:#FFF;background-color:#0074c3}/* line 137, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li a:hover,.navbar .navbar-nav li a:focus{background-color:#005C8F;color:#FFF}/* line 142, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li:first-child{border-top:none}/* line 146, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav li.active a{background-color:#005C8F;color:#FFF}}@media screen and (max-width: 991px){/* line 51, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_navigation.scss */.navbar .navbar-nav{margin:0;display:block}}/* line 3, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.navbar .navbar-nav.language{margin-right:15px;margin-left:15px;padding:25px 0}/* line 7, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.navbar .navbar-nav.language li{padding:0 3px}/* line 9, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.navbar .navbar-nav.language li a{padding:0;border-radius:50%;line-height:25px;width:25px;text-align:center;padding-left:5px;padding-right:5px;font-size:12px;background-color:transparent;color:#005C8F}/* line 27, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.navbar .navbar-nav.language li.active,.navbar .navbar-nav.language li:hover{border:none}/* line 29, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.navbar .navbar-nav.language li.active a,.navbar .navbar-nav.language li:hover a{background-color:#005C8F;color:#FFF}/* line 39, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.language-mobile{position:absolute;z-index:1000;top:20px;right:75px;margin-right:15px;margin-left:15px;padding:0}/* line 50, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.language-mobile li{list-style:none;display:inline-block;padding:0 3px}/* line 54, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.language-mobile li a{display:block;padding:0;border-radius:50%;line-height:25px;width:25px;text-align:center;padding-left:5px;padding-right:5px;font-size:12px;background-color:transparent;color:#005C8F}/* line 73, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.language-mobile li.active,.language-mobile li:hover{border:none}/* line 75, /Volumes/Premedia_Internet-5/cogostatic/static/rekrutering/sass/custom/_language.scss */.language-mobile li.active a,.language-mobile li:hover a{background-color:#005C8F;color:#FFF;text-decoration:none}

/* Intro */

#hero-desktop {
    padding: 0
}
#intro {
    background: #0071C0;
    height: 197px
}

/* Shops */

#shops {
    padding-top: 45px
}
#colruyt-shop-part-2,
#colruyt-shop-part-3 {
    height: auto;
    position: relative;
    min-height: 190px;
    left: -15px
}
#bio-shop-part-2,
#bio-shop-part-3 {
    height: auto;
    position: relative;
    min-height: 190px;
    left: -15px
}
#colruyt-shop-part-2,
#bio-shop-part-2 {
    background: #F5F5F5
}
#colruyt-shop-part-2 p,
#bio-shop-part-2 p {
    font-size: 19px;
    line-height: 28px;
    margin: 30px 0;
    color: #666;
    font-family: 'arial'
}
#colruyt-shop-part-3 p,
#bio-shop-part-3 p {
    font-size: 20px;
    line-height: 28px;
    margin: 30px 0;
    color: #fff;
    font-family: 'arial'
}
#colruyt-shop:hover #colruyt-shop-part-2 {
    background: #f47304;
    background: rgba(244, 115, 4, .9);
    cursor: auto
}
#colruyt-shop:hover #colruyt-shop-part-2 p {
    font-size: 20px;
    line-height: 28px;
    margin: 30px 0;
    color: #fff;
    font-family: 'arial'
}
#colruyt-shop:hover .btn-shops-before > i {
    color: #F47304;
    font-size: 20px;
    margin: 0 0 0 15px
}
#bio-shop:hover .btn-shops-before > i {
    color: #c7d231;
    font-size: 20px;
    margin: 0 0 0 15px
}
#bio-shop:hover #bio-shop-part-2 {
    background: #c7d231;
    background: rgba(199, 210, 49, .9);
    cursor: auto
}
#bio-shop:hover #bio-shop-part-2 p {
    font-size: 19px;
    line-height: 28px;
    margin: 30px 0;
    color: #fff;
    font-family: 'arial'
}
#bio-shop:hover .btn-shops-before > i {
    color: #c7d231;
    font-size: 20px;
    margin: 0 0 0 15px
}
.btn-shops-before {
    background: #0071C0;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    display: inline-block;
    font-size: 13px;
    line-height: 40px;
    height: 40px;
    padding: 0 15px 0 20px;
    text-transform: uppercase;
    position: relative;
}
#colruyt-shop:hover .btn-shops-before {
    background: #fff;
    color: #F47304;
    font-weight: 700;
}
#bio-shop:hover .btn-shops-before {
    background: #fff;
    color: #c7d231;
    font-weight: 700;
}
.btn-shops-before > i {
    color: #fff;
    font-size: 20px;
    margin: 0 0 0 15px;
    vertical-align: sub;
}
.btn-shops-after {
    background: #fff;
    border: 0;
    border-radius: 5px;
    color: #F47304;
    display: block;
    font-size: 13px;
    line-height: 14px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    left: -15px
}
.btn.btn-shops-after:hover {
    color: #F47304
}
.btn-shops-after > i {
    color: #F47304;
    font-size: 20px;
    margin: 0 0 0 15px
}
.btn-disabled,
.btn-disabled:hover {
    background: #BFBEBE;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 14px;
    height: 40px;
    margin: 0 0 0 15px;
    padding: 0 20px;
    text-transform: uppercase;
    cursor: default;
    position: relative;
    left: -15px
}
.btn-disabled > i {
    color: #fff;
    font-size: 20px;
    margin: 0 0 0 15px
}

/* Meldingen */

#mededelingen {
    padding-top: 0
}
.btn-hollow {
    background: none;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 14px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
    text-transform: uppercase
}
.btn-hollow > i {
    color: #fff;
    font-size: 20px;
    margin: 0 0 0 15px
}
.btn-border,
.btn-border:hover {
    background: #fff;
    border: 1px solid #0071C0;
    border-radius: 5px;
    color: #0071C0;
    display: block;
    font-size: 16px;
    line-height: 14px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
    text-transform: uppercase
}
.btn-border > i {
    color: #0071C0;
    font-size: 20px;
    margin: 0 0 0 15px
}
#meldingsbox {
    padding: 40px 0;
    border: 1px solid #C0BEBE;
}
#meldingsbox > * {
    color: #0071C0
}
#meldingsbox h2 {
    font-family: "asap";
    font-style: italic;
    font-weight: 700;
    text-align: left
}
#meldingsbox p {
    color: #0071C0;
    margin: 30px 0;
    text-align: left
}
#meldingsbox-copy {
    display: block;
    margin: 0 auto;
    padding: 0 100px;
    text-align: center
}
#verborgen,
#close-lees-meer {
    display: none
}
#close-lees-meer {
    cursor: pointer;
    font-size: 30px;
    margin: -20px 30px 0 0;
    padding: 0;
    position: absolute;
    right: 0
}

/* Werking */

.cirkel {
    border: 2px solid #7EB8DF;
    border-radius: 100%;
    height: 100px;
    margin: 10px auto 35px;
    width: 100px
}
.giant {
    color: #0071C0;
    font-family: 'Asap', sans-serif;
    font-size: 50px;
    text-align: center
}

/* Waar staan we voor */

.cirkel-full {
    background: #0071C0;
    border: 2px solid #0071C0;
    border-radius: 100%;
    height: 100px;
    margin: 10px auto 35px;
    width: 100px
}
.giant-white {
    color: #fff;
    font-family: 'Asap', sans-serif;
    font-size: 40px;
    text-align: center
}
.giant-white img {
    height: 70px;
}

/* Form errors */

.parsley-errors-list {
    margin: 10px 0 0;
    padding: 0;
    display: block;
}
.parsley-required,
.parsley-type {
    color: #E74C3C;
    font-weight: 700;
    list-style: none;
    font-size: 14px;
    display: block;
}
.parsley-errors-list.filled {
    height: 0;
}
ul#parsley-id-8 {
    height: 40px;
    margin: -10px 0 0 0;
    padding: 0;
}
#formSucces,
#formError {
    display: block;
    margin: -50px 0;
    text-align: center;
}

/* Store locator */

.btn-orange {
    background: #0071C0;
    border: 0;
    border-radius: 5px;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 14px;
    height: 40px;
    margin: 0 auto;
    padding: 0 20px;
    text-transform: uppercase
}
.btn-close,
.btn-close:hover,
.btn-close:active,
.btn-close:focus {
    color: #0071C0;
}
.usp {
    padding: 0 50px
}

@media (max-width: 1199px) {
    .header-img-inside {
        left: 0;
        display: block;
        margin: 0 auto
    }
    #colruyt-shop-part-2,
    #colruyt-shop-part-3,
    #bio-shop-part-2,
    #bio-shop-part-3 {
        left: 0;
        text-align: center;
        max-width: 241px;
        width: 100%;
        min-height: 152px;
        margin: 0 0 0 -15px
    }
    #colruyt-shop {
        margin: 0 0 25px
    }
    .pull-bottom {
        top: 0
    }
    #hero {
        max-height: 162px
    }
    .btn-shops-before,
    .btn-disabled {
        left: 0
    }
    #colruyt-shop-part-2 p,
    #bio-shop-part-2 p {
        font-size: 18px;
        line-height: 24px;
        margin: 20px 0;
        color: #666;
        font-family: 'arial';
        text-align: left
    }
    #colruyt-shop:hover #colruyt-shop-part-2 p {
        line-height: 24px;
        margin: 20px 0;
    }
    #colruyt-shop-part-3 p,
    #bio-shop-part-3 p {
        font-size: 18px;
        line-height: 24px;
        margin: 20px 0;
        color: #fff;
        font-family: 'arial';
        text-align: left
    }
    .btn-shops-after {
        background: #fff;
        border: 0;
        border-radius: 5px;
        color: #F47304;
        display: block;
        font-size: 13px;
        line-height: 14px;
        height: 40px;
        margin: 25px auto 0;
        padding: 0 15px;
        text-transform: uppercase;
        position: relative
    }
    .btn-shops-after > i {
        color: #F47304;
        font-size: 20px;
        margin: 0 0 0 10px
    }
    .btn.btn-shops-after:hover {
        color: #F47304
    }
    .btn-disabled,
    .btn-disabled:hover {
        background: #BFBEBE;
        border: 0;
        border-radius: 5px;
        color: #FFF;
        display: block;
        font-size: 16px;
        line-height: 14px;
        height: 40px;
        margin: 0 auto;
        padding: 0 20px;
        text-transform: uppercase;
        cursor: default;
        position: relative;
        left: 0
    }
    .btn-disabled > i {
        color: #fff;
        font-size: 20px;
        margin: 0 0 0 15px
    }
}
@media (max-width: 991px) {
    .facts {
        height: auto
    }
    .header-img-inside {
        left: 0;
        display: block;
        margin: 0 auto
    }
    #meldingsbox-copy {
        padding: 0 50px
    }
    #colruyt-shop-part-2,
    #colruyt-shop-part-3,
    #bio-shop-part-2,
    #bio-shop-part-3 {
        left: 0;
        max-width: 445px;
        width: 100%;
        margin: 0 0 0 -25px;
        text-align: center;
        min-height: 200px
    }
    #hero {
        max-height: 177px
    }
    #colruyt-shop-part-2 p,
    #bio-shop-part-2 p,
    #colruyt-shop-part-3 p,
    #bio-shop-part-3 p {
        font-size: 20px;
        line-height: 28px;
        margin: 30px 0;
        text-align: center;
        padding: 0 25px
    }
    #meldingsbox {
        margin: 0 25px
    }
    #colruyt-shop:hover #colruyt-shop-part-2 p {
        margin: 30px 0;
        line-height: 28px;
    }
}
@media (max-width: 768px) {
    .nav-mobile {
        display: block;
        top: 0;
        position: relative;
        margin-top: -50px
    }
    .nav-mobile > li {
        display: inline-block;
        text-align: center
    }
    .nav-mobile {
        margin: -35px 25px 0 0 !important;
        top: -10px
    }
    .nav-mobile.language-switch {
        top: -15px;
    }
    .nav-desktop {
        display: none
    }
    #colruyt-shop-part-2,
    #colruyt-shop-part-3,
    #bio-shop-part-2,
    #bio-shop-part-3 {
        left: 0;
        width: 100%;
        text-align: center;
        min-height: 170px;
        max-width: 700px;
        margin: 0 auto
    }
    #colruyt-shop-part-2 .btn,
    #colruyt-shop-part-3 .btn,
    #bio-shop-part-2 .btn,
    #bio-shop-part-3 .btn {
        margin: 0 auto;
        display: block;
        width: 100%;
        left: 0
    }
    #hero {
        background: transparent
    }
}
@media (max-width: 530px) {
    #bio-shop-part-2,
    #bio-shop-part-3 {
        min-height: 190px
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    #colruyt-shop-part-2,
    #colruyt-shop-part-3,
    #bio-shop-part-2,
    #bio-shop-part-3 {
        left: 0;
        width: 100%;
        text-align: center;
        min-height: 200px;
        max-width: 445px;
        margin: 0 auto;
        margin: 0 0 0 -25px
    }
}
.remarks {
    display: none;
}
#social {
    margin: 50px 0 0;
}

.customer-help {
    position: fixed;
    bottom: 30px;
    right: 15px;
    text-align: right;
    z-index: 999;
    overflow: hidden;
    background-color: transparent
}

@media only screen and (max-width: 767px) {
    .customer-help {
        overflow: visible
    }
}

.customer-help__content {
    background-color: #0587C7;
    border: solid 2px #FFF;
    border-radius: 3px;
    margin: 0 35px 10px 0;
    max-width: 324px;
    text-align: left;
    max-height: calc( 100vh - 282px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 0;
    -webkit-transition: all .4s ease-out;
    transition: all .4s ease-out
}

@media only screen and (max-width: 767px) {
    .customer-help__content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100vw;
        bottom: 0;
        margin: 0;
        max-width: none;
        max-height: none;
        height: 100vh;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.customer-help__content__head {
    background-color: rgba(0, 64, 100, 0.25);
    text-align: center;
    padding: 10px 0 0;
    position: relative;
    max-height: 70px;
    overflow: visible
}

.customer-help__content__head img {
    display: block;
    max-width: 60px;
    height: auto;
    border-radius: 50%;
    margin: 0 auto -15px
}

.customer-help__content__head .title {
    background-color: #FFF;
    border-radius: 25px;
    display: inline-block;
    line-height: 25px;
    font-family: "Asap", sans-serif;
    font-weight: 700;
    font-style: italic;
    color: #0587C7;
    padding: 0 15px
}

.customer-help__content__info {
    color: #FFF;
    display: block;
    padding: 25px 10px 25px 15px;
    max-height: calc( 100vh - 500px);
    overflow: auto
}

@media only screen and (max-width: 767px) {
    .customer-help__content__info {
        max-height: none
    }
}

.customer-help__content__info .title {
    display: block;
    font-family: "Asap", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    margin: 0 0 10px
}

.customer-help__content__info ol,
.customer-help__content__info ul,
.customer-help__content__info p {
    display: block;
    font-size: 14px
}

.customer-help__content__info ol {
    padding-left: 15px
}

.customer-help__content__info ol li {
    margin-bottom: 16px
}

.customer-help__content__info ol li:last-of-type {
    margin-bottom: 0
}

.customer-help__content__info ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.customer-help__content__info ul li {
    margin-bottom: 8px
}

.customer-help__content__info ul li:last-of-type {
    margin-bottom: 0
}

.customer-help__content__info a {
    color: #FFF;
    text-decoration: underline
}

.customer-help__content__contact {
    background-color: rgba(0, 64, 100, 0.25);
    border-top: dashed 1px rgba(255, 255, 255, 0.4);
    display: block;
    padding: 10px 15px 20px
}

@media only screen and (max-width: 767px) {
    .customer-help__content__contact {
        margin-top: auto
    }
}

.customer-help__content__contact .title {
    color: #FFF;
    display: block;
    font-family: "Asap", sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    margin: 0 0 10px
}

.customer-help__content__contact .contact {
    display: inline-block
}

.customer-help__content__contact .contact__btn {
    color: #FFF;
    font-size: 14px;
    padding: 10px;
    padding-left: 40px
}

.customer-help__content__contact .contact__btn .icon-round {
    width: 26px;
    height: 26px;
    margin-top: -14px
}

.customer-help__content__contact .contact__btn .icon-round i {
    font-size: 14px
}

.customer-help__content__contact .social {
    display: inline-block;
    float: right;
    margin-top: 50px
}

.customer-help__content__contact .social__btn {
    color: #FFF;
    width: 37px;
    height: 37px
}

.customer-help__content__contact .social__btn i {
    font-size: 22px
}

.customer-help__btn {
    display: inline-block;
    position: relative;
    text-align: center
}

.customer-help__btn--mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px
}

@media only screen and (max-width: 767px) {
    .customer-help__btn--mobile {
        display: block
    }
}

.customer-help__btn img {
    border-radius: 50%;
    display: block;
    margin: 0 auto -13px;
    max-width: 60px;
    height: auto;
    -webkit-transition: opacity .4s ease-in;
    transition: opacity .4s ease-in
}

.customer-help__btn .title {
    background-color: #0587C7;
    border: solid 2px #FFF;
    border-radius: 25px;
    color: #FFF;
    display: inline-block;
    font-family: "Asap", sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    line-height: 25px;
    padding: 0 10px;
    -webkit-transition: opacity .4s ease-in;
    transition: opacity .4s ease-in
}

.customer-help__btn .icon {
    background-color: #0587C7;
    border: solid 2px #FFF;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    top: -2px;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: opacity .4s ease-in;
    transition: opacity .4s ease-in
}

.customer-help__btn .icon img {
    max-width: none;
    margin-top: 19px;
    opacity: 1
}

.customer-help__btn--close {
    display: none
}

.customer-help.active {
    height: auto
}

@media only screen and (max-width: 767px) {
    .customer-help.active .customer-help__btn {
        display: none
    }
}

.customer-help.active .customer-help__btn .title,
.customer-help.active .customer-help__btn img {
    opacity: 0
}

.customer-help.active .customer-help__btn .icon {
    opacity: 1
}

.customer-help.active .customer-help__btn .icon img {
    opacity: 1
}

.customer-help.active .customer-help__content {
    pointer-events: all;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}