/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css?family=Amiko:400,600,700');


/* ================================================================================================================== */
/* TYPO */
/* ================================================================================================================== */

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Amiko','Open Sans', Arial, sans-serif; 
    font-size: 14px;
    line-height: 1.4em; 
    font-weight: 300;
    color: #37474f;
}

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

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

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

h1 { font-weight: 800; text-transform: uppercase; }
h1 small { text-transform: none; }
h2 { color: #77c692; }
p { font-weight: 300; }
p strong, p b { font-weight: 500; }

a { color: #77c692; }
a:hover, a:focus { color: #378652; }



/*===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: #77c692; }
            .bs-primary-background { background-color: #77c692; }
            .bs-primary-color { color: #77c692; }

            .text-primary { color: #77c692; }

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

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

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

            .btn-primary, .btn-primary:link, .btn-primary:visited {
                color: #FFF;
                background-color: #77c692;
                border-color: #6ab985;
            }

            .btn-primary:focus,
            .btn-primary.focus,
            .btn-primary:hover,
            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                color: #FFF;
                background-color: #5dac78;
                border-color: #51a06c;
            }

            .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: #51a06c;
                border-color: #44935f;
            }

            .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: #77c692;
                border-color: #6ab985;
            }

            .btn-primary:not(:disabled):not(.disabled):active {
                color: #FFF;
                background-color: #57a672;
                border-color: #51a06c;
            }
            
            .btn-primary .badge {
                color: #77c692;
                background-color: #FFF;
            }

            .label-primary {
                background-color: #77c692;
            }

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

            .panel-primary {
                border-color: #77c692;
            }

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

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

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

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

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

            .pagination>li>a, .pagination>li>span {
                color: #77c692;
            }
            
            .page-link:hover {
                color: #5dac78;
            }
            

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


/* =================================================================================== */
/* == TOPBAR */

#langblok {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.langbar {
    overflow:hidden;
    border-left: 1px solid #333;
    display: block;
}

#langblok .langbar a {
    color: #333;
    border-right: 1px solid #333;
    padding: 10px 6px 2px 6px;
    display: inline-block;
}

#langblok a:hover {
    color: #77c692;
    text-decoration: none;
}

#langblok .langbar a.active {
    color: #77c692;
}

/* =================================================================================== */
/* == HERO BLOK */

#heroblok { 
    background-color: #efefef; 
    min-height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../img/header.jpg');
    position: relative;
}

#heroblok.homepage { 
    min-height: 60vh;
    background-image: url('../img/homeheader.jpg');
    overflow: hidden;
}

.home-menu {
    background-color: white;
    background-color: rgba(255,255,255,0.9);
    padding: 20px 0;
}

@media only screen and (min-width : 768px) 
{
    .home-menu {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 20px 0;
    }
}

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

#menublok .container {
    position: relative;
}
    
#menublok.navbar {
    background-color: #fff;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 0;
}

#menublok .navbar-brand {
    overflow: hidden;
    min-height: 120px;
}

#menublok .navbar-brand img {
    max-height: 100%;
}

@media only screen and (min-width : 768px) 
{
    #menublok .navbar-right {
        margin: 0 auto;
        float: none !important;
        display: inline-block;
        clear: both;
    }
    
    #menublok .navbar-collapse {
        text-align:center;
    }
}

@media only screen and (min-width : 992px) 
{
    #menublok .navbar-right {
        margin: 60px 0 0 0;
        float: right !important;
        clear: none;
    }
}

.navbar-default .navbar-nav > li > a 
{
    color: #9c867a;
    font-family: 'Roboto Condensed', 'Amiko',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.6em 0.9em;
    margin: 0;
    background-color: transparent;
    font-size: 1.2em;
}

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

.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav >li > a:hover, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover {
    color: #6d6e71;
    background-color: transparent;
}

.navbar-toggle {
    margin-top: 60px;
}

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

#content {
    padding: 5em 0 7em;
    background-color: #fff;
}

.contentframe {
    padding: 5em 0 4em;
    background-color: #fff;
}

.accentbar {
    min-height: 50px;
    background-color: #f2eeee;
    background-image: url('../img/tco-pattern.png');
}

/* =================================================================================== */
/* == NAV PILLS */

.submenu {
    margin-top: -1em;
}

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

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

.nav-pills > li > a {
    color: #acacac;
    background-color: transparent;
    font-family: 'Amiko',Helvetica,Arial,sans-serif;
    padding: 0.6em 10px;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid #dadada;
    line-height: 1.2em;
    text-transform: uppercase;
}

.nav-pills > li.active > a {
    color: #fff;
    font-weight: 500;
    background-color: #77c692;
}

.nav-pills > li > a:focus, 
.nav-pills > li > a:hover,
.nav-pills > li.active > a:focus, 
.nav-pills > li.active > a:hover {
    color: #fff;
    background-color: #5dac78;
}

/* =================================================================================== */
/* == NEWSBAR */

#news {
    padding: 5em 0 7em;
}

#news .news.item {
    background-color: #fff;
    padding: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.news.item:hover {
    box-shadow: 0 0 5px rgba(100,100,100,0.5);
}

#news .news.item h2,
#news .news.item p {
    margin: 5px 20px;
}

#news .news.item .meta {
    text-align: center;
    margin-top: 15px;
}

/* =================================================================================== */
/* == NEWS */

.item { margin-bottom: 25px; }

.news.item img { margin-bottom: 30px; }
.news.item { border: 1px solid #efefef; padding: 20px 20px 0 20px; }
.news .meta { text-align: right; }

.element.item h2 { 
    background-color: #77c692;
    color: white;
    padding: 5px 10px;
    margin: 0;
}

.element.item h2 a { 
    color: white;
}

.element.item:hover h2, .element.item h2:hover, .element.item h2 a:hover { 
    text-decoration: none;
    background-color: #5dac78;
}

.element.item:hover {
    box-shadow: 0 0 4px rgba(200,200,200,0.5);
}

ul.related {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul.related > li {
    margin: 0 0 0 15px;
    padding: 0 0 0 0;
}

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

#scrollToTop { background-color: #77c692; color: white; }

#footer {
    background-color: #272829;
    color: #68696a; 
    overflow: hidden;
}

#footer a {
    color: #fff;
}

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

#partfooter {
    padding: 20px 0 0 0;
    background-color: #6d6e71;
    color: #d3d4d5;
    font-size: 0.8em;
}

#partfooter p { 
    margin: 0;
}

#ctcfooter {
    padding: 50px 0;
    background-color: #e2e2e3;
    color: #a18c81;
}

@media only screen and (min-width : 768px) {
    .footermenu span { 
        width: 33.33%;
    }
}

#copyfooter {
    padding: 10px 0;
}

#copyfooter p { margin-bottom: 0; font-size: 13px; }
#copyfooter a { color: #5C6163; }

.footermenu span { display: block; float: left; width: 50%; }
@media only screen and (min-width : 768px) { .footermenu span { width: 30%; } }
@media only screen and (max-width : 768px) { #footer .text-right {text-align: left; } }

/* =================================================================================== */
/* == PRODUCTOVERVIEW */

.productcat { 
    margin-bottom: 1.5em; 
    padding-bottom: 1.5em; 
}

.product.categorie.item h1 { margin: 15px 0 10px; }

.product.categorie.item:hover img {
    box-shadow: 0 0 5px rgba(100,100,100,0.5);
}

.bb { 
    border-bottom: 1px solid;
}

@media only screen and (max-width : 991px) { .cat-main-image { margin-bottom: 1em; } }

.categs {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.categs > li {
    margin: 0;
    padding-bottom: 25px;
}

.maincat > a,
.categs > li > a {
    display: block;
    text-transform: uppercase;
    background-color: #77c692;
    color: white;
    text-align: center;
    padding: 8px 10px 5px;
    line-height: 1.1em;
    margin: 0 0 10px 0;
}

.maincat > a {
    padding: 12px 10px 10px;
    font-size: 1.2em; 
}

.maincat > a:hover,
.categs > li > a:hover {
    color: #378652;
    text-decoration: none;
    font-weight: bold;
}

.subcategs {
    margin: 0 0 10px 20px;
    padding: 0;
    list-style-type: none;
}

.subcategs > li > a {
    display: block;
    color: #77c692;
    line-height: 1.2em; 
}

.subcategs > li > a:hover {
    color: #378652;
    text-decoration: none;
    font-weight: bold;
}

.productcat > h1 { margin-bottom: 2px; }


/* =================================================================================== */
/* == SPECIAL OVERWRITES */

.cat31 a 
{ 
    color: #a48a7a;
}

.maincat.cat31 > a,
.categs > li.cat31 > a
{ 
    background-color: #a48a7a;
    color: white;
}

.categs > li.cat31 > a:hover,
.cat31 a:hover 
{ 
    color: #644a3a;
}

.cat31 .subcategs a 
{ 
    background-image: url('../img/ico-koffie.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-top: 4px;
    padding-left: 20px;
    color: #a48a7a;
}

.cat39 a 
{ 
    color: #82c38d;
}

.maincat.cat39 > a,
.categs > li.cat39 > a
{ 
    background-color: #82c38d;
    color: white;
}

.categs > li.cat39 > a:hover,
.cat39 a:hover 
{ 
    color: #42834d;
}

.cat39 .subcategs a 
{ 
    background-image: url('../img/ico-thee.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-top: 4px;
    padding-left: 20px;
    color: #82c38d;
}

.cat48 a 
{ 
    color: #706f6f;
}

.maincat.cat48 > a,
.categs > li.cat48 > a
{ 
    background-color: #706f6f;
    color: white;
}

.categs > li.cat48 > a:hover,
.cat48 a:hover 
{ 
    color: #302f2f;
}

.cat48 .subcategs a 
{ 
    background-image: url('../img/ico-plus.png');
    background-position: left center;
    background-repeat: no-repeat;
    padding-top: 4px;
    padding-left: 20px;
    color: #706f6f;
}