/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* <style> ========================================================================================================== */
/* TYPO */
/* ================================================================================================================== */

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Poppins','Open Sans', Arial, sans-serif; 
    font-size: 16px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #666666;
    background-color: #c29836;
}

@media only screen and (min-width : 768px)
{
    html, body { font-size: 18px; line-height: 1.6em; } 
}

h1 { font-size: 1.8em; margin-top: 0; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
p { margin-bottom: 1.3em; }
.lead { font-size: 1.2em; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
    letter-spacing: 1px;
    font-weight: 400;
    color: #c29836;
    margin-bottom: 1em;
}

/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */

a { color: #c29836;}
a:hover, a:focus { color: #825800; }


/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A
            /*  PRIMARY COLOR OVERWRITES { overwrites bootstrap 3 primary color settings } 
            /*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A*/

            .bs-primary-border { border-color: #c29836; }
            .bs-primary-background { background-color: #c29836; }
            .bs-primary-color { color: #c29836; }

            .text-primary { color: #c29836; }

            .bg-primary, .bg-brand  {
                color: #FFF;
                background-color: #c29836;
            }

            .progress-bar-primary {
                color: #FFF;
                background-color: #c29836;
            }

            a.bg-primary:hover,
            a.bg-primary:focus {
                background-color: #825800;
            }

            .btn-primary, .btn-primary:link, .btn-primary:visited {
                color: #FFF;
                background-color: #c29836;
                border-color: #b58b29;
            }

            .btn-primary:focus,
            .btn-primary.focus,
            .btn-primary:hover,
            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                color: #FFF;
                background-color: #a87e1c;
                border-color: #9c7210;
            }

            .btn-primary:active:hover,
            .btn-primary.active:hover,
            .open > .dropdown-toggle.btn-primary:hover,
            .btn-primary:active:focus,
            .btn-primary.active:focus,
            .open > .dropdown-toggle.btn-primary:focus,
            .btn-primary:active.focus,
            .btn-primary.active.focus,
            .open > .dropdown-toggle.btn-primary.focus {
                color: #FFF;
                background-color: #9c7210;
                border-color: #8f6503;
            }

            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                background-image: none;
            }

            .btn-primary.disabled:hover,
            .btn-primary[disabled]:hover,
            fieldset[disabled] .btn-primary:hover,
            .btn-primary.disabled:focus,
            .btn-primary[disabled]:focus,
            fieldset[disabled] .btn-primary:focus,
            .btn-primary.disabled.focus,
            .btn-primary[disabled].focus,
            fieldset[disabled] .btn-primary.focus {
                background-color: #c29836;
                border-color: #b58b29;
            }

            .btn-primary:not(:disabled):not(.disabled):active {
                color: #FFF;
                background-color: #a27816;
                border-color: #9c7210;
            }
            
            .btn-primary .badge {
                color: #c29836;
                background-color: #FFF;
            }

            .label-primary {
                background-color: #c29836;
            }

            .label-primary[href]:hover,
            .label-primary[href]:focus {
                background-color: #754b00;
            }

            .panel-primary {
                border-color: #c29836;
            }

            .panel-primary > .panel-heading {
                color: #FFF;
                background-color: #c29836;
                border-color: #c29836;
            }

            .panel-primary > .panel-heading + .panel-collapse > .panel-body {
                border-top-color: #c29836;
            }

            .panel-primary > .panel-heading .badge {
                color: #c29836;
                background-color: #FFF;
            }

            .panel-primary > .panel-footer + .panel-collapse > .panel-body {
                border-bottom-color: #c29836;
            }

            .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
                background-color: #c29836;
                border-color: #c29836;
            }

            .pagination>li>a, .pagination>li>span {
                color: #c29836;
            }
            
            .page-link:hover {
                color: #a87e1c;
            }
            

/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A
/*  PADDING & MARGIN HELPERS
/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A*/
.p-0 { padding: 0em !important; }
.p-1 { padding: 0.25em !important; }
.p-2 { padding: 0.5em !important; }
.p-3 { padding: 1em !important; }
.p-4 { padding: 1.5em !important; }
.p-5 { padding: 3em !important; }
.m-0 { margin: 0em !important; }
.m-1 { margin: 0.25em !important; }
.m-2 { margin: 0.5em !important; }
.m-3 { margin: 1em !important; }
.m-4 { margin: 1.5em !important; }
.m-5 { margin: 3em !important; }
.py-0 { padding-top: 0em !important; padding-bottom: 0em !important; }
.px-0 { padding-left: 0em !important; padding-right: 0em !important; }
.py-1 { padding-top: 0.25em !important; padding-bottom: 0.25em !important; }
.px-1 { padding-left: 0.25em !important; padding-right: 0.25em !important; }
.py-2 { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }
.px-2 { padding-left: 0.5em !important; padding-right: 0.5em !important; }
.py-3 { padding-top: 1em !important; padding-bottom: 1em !important; }
.px-3 { padding-left: 1em !important; padding-right: 1em !important; }
.py-4 { padding-top: 1.5em !important; padding-bottom: 1.5em !important; }
.px-4 { padding-left: 1.5em !important; padding-right: 1.5em !important; }
.py-5 { padding-top: 3em !important; padding-bottom: 3em !important; }
.px-5 { padding-left: 3em !important; padding-right: 3em !important; }
.my-0 { margin-top: 0em !important; margin-bottom: 0em !important; }
.mx-0 { margin-left: 0em !important; margin-right: 0em !important; }
.my-1 { margin-top: 0.25em !important; margin-bottom: 0.25em !important; }
.mx-1 { margin-left: 0.25em !important; margin-right: 0.25em !important; }
.my-2 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
.mx-2 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
.my-3 { margin-top: 1em !important; margin-bottom: 1em !important; }
.mx-3 { margin-left: 1em !important; margin-right: 1em !important; }
.my-4 { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }
.mx-4 { margin-left: 1.5em !important; margin-right: 1.5em !important; }
.my-5 { margin-top: 3em !important; margin-bottom: 3em !important; }
.mx-5 { margin-left: 3em !important; margin-right: 3em !important; }
.pt-0 { padding-top: 0em !important; }
.pb-0 { padding-bottom: 0em !important; }
.pl-0 { padding-left: 0em !important; }
.pr-0 { padding-right: 0em !important; }
.pt-1 { padding-top: 0.25em !important; }
.pb-1 { padding-bottom: 0.25em !important; }
.pl-1 { padding-left: 0.25em !important; }
.pr-1 { padding-right: 0.25em !important; }
.pt-2 { padding-top: 0.5em !important; }
.pb-2 { padding-bottom: 0.5em !important; }
.pl-2 { padding-left: 0.5em !important; }
.pr-2 { padding-right: 0.5em !important; }
.pt-3 { padding-top: 1em !important; }
.pb-3 { padding-bottom: 1em !important; }
.pl-3 { padding-left: 1em !important; }
.pr-3 { padding-right: 1em !important; }
.pt-4 { padding-top: 1.5em !important; }
.pb-4 { padding-bottom: 1.5em !important; }
.pl-4 { padding-left: 1.5em !important; }
.pr-4 { padding-right: 1.5em !important; }
.pt-5 { padding-top: 3em !important; }
.pb-5 { padding-bottom: 3em !important; }
.pl-5 { padding-left: 3em !important; }
.pr-5 { padding-right: 3em !important; }
.mt-0 { margin-top: 0em !important; }
.mb-0 { margin-bottom: 0em !important; }
.ml-0 { margin-left: 0em !important; }
.mr-0 { margin-right: 0em !important; }
.mt-1 { margin-top: 0.25em !important; }
.mb-1 { margin-bottom: 0.25em !important; }
.ml-1 { margin-left: 0.25em !important; }
.mr-1 { margin-right: 0.25em !important; }
.mt-2 { margin-top: 0.5em !important; }
.mb-2 { margin-bottom: 0.5em !important; }
.ml-2 { margin-left: 0.5em !important; }
.mr-2 { margin-right: 0.5em !important; }
.mt-3 { margin-top: 1em !important; }
.mb-3 { margin-bottom: 1em !important; }
.ml-3 { margin-left: 1em !important; }
.mr-3 { margin-right: 1em !important; }
.mt-4 { margin-top: 1.5em !important; }
.mb-4 { margin-bottom: 1.5em !important; }
.ml-4 { margin-left: 1.5em !important; }
.mr-4 { margin-right: 1.5em !important; }
.mt-5 { margin-top: 3em !important; }
.mb-5 { margin-bottom: 3em !important; }
.ml-5 { margin-left: 3em !important; }
.mr-5 { margin-right: 3em !important; }

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    
    .navbar-collapse.collapse.in {
        display: block!important;
    }

    .navbar-nav {
        float: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* ================================================================================================================== */
/* HELPERS */
/* ================================================================================================================== */

.flex {
    display: flex;
    flex-wrap: wrap;
}

.justify-content-space-between {
    justify-content: space-between;
}

.btnfix { background-color: transparent !important; }
.btnfix:link, 
.btnfix:visited, 
.btnfix:hover, 
.btnfix:active, 
.btnfix:selected { background-color: transparent !important; }


.flexend {
    align-items: flex-end;
}

.flexstart  {
    align-items: flex-start;
}

.flex > .col, .flex-sm > .col {
    width: 100%; 
    padding-left: 15px;
    padding-right: 15px;    
}

.flex > .col > div, .flex-sm > .col > div {
    padding: 1rem 0;
    text-transform: uppercase;
    line-height: 1.2em;
}

.flex > .col.noshow, .flex-sm > .col.noshow {
    display: none;
}


.flex > .col-5, .flex-sm > .col-5 {
    width: 100%; 
    padding-left: 15px;
    padding-right: 15px;    
}

.flex > .col > div, .flex-sm > .col > div {
    padding: 1rem 0;
    text-transform: uppercase;
    line-height: 1.2em;
    border-bottom: 1px solid;
}

.flex > .col > div, .flex-sm > .col:last-child > div {
    border-bottom: none;
}
    
.flex > .col-5.noshow, .flex-sm > .col-5.noshow {
    display: none;
}

.align-flex-end {
    align-items: flex-end;
}

.align-self-center  {
    align-self: center;
}

.justify-flex-center {
    justify-content: center;
}

/* ================================================================================================================== */
/* BASIC BUILDING BLOX */
/* ================================================================================================================== */

#notifbar {
    background-color: #cb4f2e;
    color: white;
    padding: 10px 0;
    text-align: center;
}

.relative {
    position: relative;
}

/* =================================================================================== */
/* == HEROIMAGE */

#heroimage {
    min-height: 200px;
    min-height: 20vh;
    background-color: #cccccc;
    background-size: cover;
    background-position: center center;
}

#heroimage .flex {
    padding: 5rem 0 2rem;
}


@media only screen and (min-width : 768px) {
    #heroimage {
        min-height: 400px;
        min-height: 40vh;
    }
    #heroimage .flex {
        min-height: 400px;
        min-height: 40vh;
    }    
}

@media only screen and (min-width : 1200px) {
    #heroimage .flex {
        padding: 2rem 0 5rem;
    }    
}

/* =================================================================================== */
/* == MENU/NAVBAR */

#menublok { background-color: #fff; }

#menublok .navbar {
    margin-bottom: 0;
}

.navbar-default {
    background-color: #ddd;
    background-color: rgba(233, 233, 233, 0.8);
    margin-bottom: 0;
    border: 0;
}

.navbar-default .navbar-nav > li > a 
{
    color: #222222;
    background-color: transparent;
}

.navbar-default .navbar-nav > li.active > a 
{
    color: #c29836;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus 
{
    color: #e2b856;
    background-color: #a27816;
}

.navbar-nav {
    margin: 0 0 0 0;
}

.relative .navbar-default {
    position: absolute;
    width: 100%;
    top: 0;
}

@media only screen and (min-width : 1200px) {
    .relative .navbar-default {
        bottom: 0;
        top: auto;
    }
}


@media only screen and (min-width : 1200px) 
{
    .navbar-center {
      display: block;
      float: none;
      vertical-align: top;
      margin: 0;
      text-align: center;
    }
    
    .navbar-center-children {
      display: inline-block;
      float: none;
      vertical-align: top;
      margin: 0 auto;
    }

    .navbar-center > li {
      display: inline-block;
      float: none;
      vertical-align: top;
      position: relative;
    }

    .navbar-center .navbar-collapse {
      text-align: center;
    }
}

/* ================================================================================================================== */
/* CONTENT & SECTIONS */
/* ================================================================================================================== */
#top-header {
    padding: 1rem;
    background-color: #ffffff
}

#top-header a {
    color: black;
}

#top-header a.home-link {
    font-weight: 700;
    text-transform: uppercase;
}

.itp {
    background-color: white;
    padding: 3rem 0 0;
}

/* ================================================================================================================== */
/* CONTENT */
/* ================================================================================================================== */

#content {
    padding: 5em 0 4em;
    background-color: white;
}

/* ================================================================================================================== */
/* SUBMENU */
/* ================================================================================================================== */

.nav.nav-pills {
    margin-bottom: 20px;
}

.nav-pills > li {
    margin: 0;
    padding: 0;
}

.nav-pills > li > a {
    color: #acacac;
    background-color: transparent;
    border-radius: 0;
    padding: 0.6em 5px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #dadada;
    line-height: 1.2em;
    text-transform: uppercase;
    text-decoration: none !important;
}

.nav-pills > li.active > a {
    color: #c29836;
    font-weight: 500;
    background-color: transparent;
}

.nav-pills > li > a:focus, 
.nav-pills > li > a:hover,
.nav-pills > li.active > a:focus, 
.nav-pills > li.active > a:hover {
    color: #000;
    background-color: transparent;
}



/* =================================================================================== */
/* == FOOTER */

#footer {
    padding: 0.8rem 0 0;
    background-color: #c29836;
    color: white;
    overflow: hidden;
    font-size: 0.8rem;
}

#footer a {
    color: #fff;
}

#footer a:hover {
    color: #ffd876;
    text-decoration: none;
}

.footer-left, .footer-right { text-align: center; }
    
@media only screen and (min-width : 768px) 
{
    .footer-left { text-align: left; }
    .footer-right { text-align: right; }
}


/* =================================================================================== */
/* == SUBFOOTER */

#subfooter h2 {
    color: #fff;
}

#subfooter {
    background-image: url(../img/background.jpg);
    background-size: cover;
    background-position: center bottom;
    padding-top: 12rem;
    padding-bottom: 20rem;
    color: #fff;
    line-height: 1.25rem;
}

#subfooter p {
    font-size: 0.8rem;
}

@media only screen and (min-width : 768px) {
    #subfooter {
        padding-top: 15rem;
        padding-bottom: 26rem;
    }
}

@media only screen and (min-width : 1600px) {
    #subfooter {
        padding-top: 7rem;
        padding-bottom: 26rem;
    }
}

#subfooter a {
    color: #fff;
}

#subfooter a:hover {
    color: #ffd876;
    text-decoration: none;
}

.image-container {
    padding: 0.25rem 0.25rem 0.25rem;
    background-color: white;
    transform: rotate(-3deg); top: 0em;
    width: 90%;
}

.image-container span {
    color: black;
    display: inline-block;
    padding: 1rem 0;
}
/* =================================================================================== */
/* == OL */


ol {
  // counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
}
ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol li::before {
  content: counter(my-awesome-counter);
  color: #fcd000;
  font-size: .8rem;
  font-weight: bold;
  position: absolute;
  --size: 1.25rem;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: calc(0.1 * var(--size));
  background: #c29836;
  color: white;
  border-radius: 50%;
  text-align: center;
  box-shadow: 0 1px 3px 0 #ddd;
}


/* =================================================================================== */
/* == Producten */

.product-list  {
    font-size: 0.9rem;
}

.product-list, .categ-list {
	padding: 0 0 0 40px;
}

.product-list .title {
    font-weight: bold;
}
.green {
    color: green;
}

.product-type {
    color: #bbbbbb;
}

.product-categ {
    color: #000000;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

.product-list > li {
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #ddd;
}

/* =================================================================================== */
/* == Containers */

.inner-container {
    background-color: #ddd;
    padding: 1rem;
    height: 100%;
    color: white;
    background-size: cover;
    background-position: center center;
}

.inner-container h2, .inner-container .price {
    font-size: 1.75rem;
    text-transform: uppercase;
    color: white;
    font-weight: 700;
}

.descr .inner {    
    display: inline-block;
    max-width: 55%;
    font-size: 0.9rem;
}