/* Sticky footer styles
-------------------------------------------------- */

@font-face {
    font-family: "DearJoe 5 Casual W00 Pro";
    src: url('/fonts/DearJoe 5 Casual W00 Pro.ttf');
}

html {
    position: relative;
    min-height: 100%;
}
body {
    background: #f8f9fa;
    font-family: 'Nunito', sans-serif;
    padding-top: 100px;
    line-height: 180%;
}

h1 {
    color: var(--primary);
}

h2 {
    color: var(--secondary);
}

h5 {
    color: var(--primary);
    font-weight: bold;
}

.introtekst H5 {
    line-height: 180%;
}

.navshadow {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}


.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.navbar-logo {
}

.navbar1 A {
    color: var(--primary);
    transition: all 0.3s;
    font-size: 20px;
}

.navbar1 A:hover {
    color: var(--secondary);

}

.navbar1 A.active {
    font-weight: bold;
    color: var(--secondary);
}

.navbar1 .nav-link.active {
    font-weight: bold;
    color: var(--secondary);
}

.navbar-brand {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 20px 20px 20px 20px;
    margin-top: -18px;
    background-color: #FFF;
    position: absolute;
    transition: all 0.3s;
    max-width: 250px;
}

.btn-groen {
    color: #ffffff !important;
    font-weight: bold;
    background-color: var(--secondary);
    border-radius: 0px 0px 10px 0px;
}

.navbar1 .btn-groen:hover {
    background-color: #6da232 !important;
}

.navbar1 .btn-groen A:hover {
    text-decoration: none;
}

.menu-winkelwagen {
    margin-left: 20px;
}

.carousel-home .carousel-item {
    min-height: 500px;
}

.carousel-default .carousel-item {
    min-height: 400px;
}

.slidetext {
    text-shadow: 1px 1px 2px #000000;
}

/*.navbar2 A {*/
/*    font-weight: bold;*/
/*    font-size: 18px;*/
/*}*/

.bg-licht {
    background-color: #f8f9fa;
}

.bg-groen {
    background-color: var(--primary);
}

.bg-groen-footer {
    background-color: var(--primary);
    border-top: var(--secondary) 5px solid;
}
.bg-paars {
    background-color: var(--secondary);
}

.winkelmandje{
    color: var(--primary);
    font-weight: bold;
}

footer A {
    color: #000;
    }

footer .nav-link {
    padding: 0px;
}


.card-border {
    border-radius: 0px 0px 50px 0px !important;
}

.card-title {
    font-weight: bold;
}

.btn {
    border-radius: 0px 0px 10px 0px;
    vertical-align: middle;
}

.btn-slideshow {
    font-size: 24px;
    text-shadow: 1px 1px 2px #000000;
}

.btn-shadow {
    text-shadow: 1px 1px 2px #000000;
}

.card .btn-block {
    font-weight: bold;
    border-color: #ffffff;
    color: white;
}

.btn-tegel:hover {
    background-color: #ffffff;
    color: var(--primary);
}

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group>.input-group-append:last-child>.input-group-text:not(:last-child),.input-group>.input-group-append:not(:last-child)>.btn,.input-group>.input-group-append:not(:last-child)>.input-group-text,.input-group>.input-group-prepend>.btn,.input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 10px;
}

.modal-header {
    border: none;
}

.hero-text {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}


.webshoptegel img {
    border: solid #000 1px;
    margin: 0px;
}

.producttileBtn {
    border: solid #e8e8e8 1px;
}

.producttileBtn:hover {
    text-decoration: none;
}


.producttitle {
    font-size: 16px;
    color: black;

}

.home-pricelabel {
    font-weight: bold;
    font-size: 20px;
    color: black;
}

.productUnitDescription {
    font-size: 16px;
    color: black;
}

.home-mainshopcat {
    color: #ffffff;
    text-shadow: 2px 2px 4px #000000;
    border: solid #e8e8e8 1px;
    padding-left: 10px;
    font-size: 32px;
}

.categorietitel {
    bottom: 10px;
    padding-left: 20px;
    color: white;
}

.categorieen:hover {
    transform: scale(110%);
    transition: 0.3s;
}

/*.home-mainshopcat:hover {*/
/*    color: #ffffff;*/
/*    transform: scale(120%);*/

/*    !*color: var(--secondary);*!*/
/*}*/


.vinkjes {
    border-radius: 0 0 20px 0;
}

.vinkjes .fa-check {
    color: var(--secondary);
}

.usp {
    height: 350px;
}

.categorielijst LI {
    font-weight: bold;
    list-style-type: none;
    font-size: 16px;
}

.categorielijst A:last-child {
    border-radius: 0 0 20px 0;
}


.subcategorielijst LI:last-child {
    border:none;
    padding-bottom: 10px;
}

.sidebarWinkelmandje {
    font-weight: bold;
    font-size: 16px;
}

.table thead th {
    vertical-align: middle;
}

.categorielijst A{
    color: #ffffff;
    width: 100%;
    text-decoration: none;
    background-color: var(--primary);
}

.categorielijst A:hover{
    background-color: #166844;
}

.categorielijst .nav-link.active {
    background-color: #166844;
}

.subcategorielijst A:hover {
    color: var(--primary);
    background-color: #fff;!important;
}

.subcategorielijst {
    background-color: white;!important;
    padding-left: 10px;
}

.subcategorielijst LI{
    background-color: white;!important;
}

.subcategorielijst A {
    color: #000000;
    background-color: white;!important;
    font-weight: normal;
    font-size: 14px;
}

.subcategorielijst A.active {
    background-color: #ffffff;
    color: var(--primary);
    border-radius: 0px;
    padding-left: 10px;
}

.sidebarKlantgegevens .nav-link {
    border-bottom: lightgrey 1px solid;
    /*background-color: var(--primary);*/
    color: var(--primary);
    font-weight: bold;
}

.sidebarKlantgegevens .nav-link:hover {
    background-color: #ffffff;
    color: var(--primary);

}

#shoppingcart-table TH {
    border-bottom: var(--primary) solid 2px;
}

.shoppingcartAmount {
    border-radius: 50%;
    color: var(--secondary);
    background-color: #fff;
    border: solid 1px #fff;
    padding: 4px 8px;
    margin-left: 5px;
    font-size: 14px;
}

.list-group input[type="radio"]:checked + .form-check-label {
    background-color: var(--secondary);
    color: #FFF;
}

.list-group input[type="radio"] + .form-check-label {
    cursor: pointer;
    padding: 10px;
    font-size: 16px;
}

.list-group input[type="radio"] {
    display: none;
}

.klantgegevens {
    background-color: #fff;
    border: solid 1px #ced4da;
    padding: 1px 200px 1px 5px;
}

.footer-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}

@media (max-width: 768px){

    .navbar-brand {
        position: relative;
    }
    .navbar-brand:before {
        content:'';
        position: absolute;
        left: 200px;
        width: 120px;
        border:none;
        height: 120px;
        background-image:url('/images/paard.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right top;
        top: 0px;
    }

    .navbar-toggler {
        color: var(--primary);
    }

    .menu {
        font-weight: bold;
    }

    .navbar1 .nav-link {
        padding-top: 15px;
        padding-left: 10px;
        margin-left: -30px;
    }

    .menu-winkelwagen {
        padding-left: 30px;
        margin-top: 10px;
        margin-left: -6px;
    }


    .carousel-home .carousel-item {
        min-height: 300px;!important;
    }

    .carousel-default .carousel-item {
        min-height: 250px;!important;
    }

    .hero-text {
        top: 50%;
    }

    .card-home {
        min-height: 250px;
    }

    .categorietitel {
        padding-left: 10px;
    }

    .usp {
        height: 100%;
    }
}