:root {
    --colBg: #e7dbd3;
    --colBgLighter: #fff7f1;
    --colBgDarker: #e0d1c8;
    --colBgDarkerDarker: #d2c4bc;
    --colBgDarkerDarkerDarker: #baada6;
    --colBrown: #3d2a23;
    --colBrownLighter: #614236;
    --colDarkBrown: #2b1e19;
    --colGreen: #456943;
    --colGreenLighter: #458841;
    --colDarkGreen: #3a5838;
    --colRed: #c60202;
    --font-light: "source_sans_prolight", Calibri, Candara, Arial, sans-serif;
    --font-regular: "source_sans_proregular", Calibri, Candara, Arial, sans-serif;
    --font-semibold: "source_sans_prosemibold", Calibri, Candara, Arial, sans-serif;
    --font-bold: "source_sans_probold", Calibri, Candara, Arial, sans-serif;
}

@font-face {
    font-family: "source_sans_proregular";
    src:
        url("../fonts/sourcesanspro-regular-webfont.woff2") format("woff2"),
        url("../fonts/sourcesanspro-regular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "source_sans_prolight";
    src:
        url("../fonts/sourcesanspro-light-webfont.woff2") format("woff2"),
        url("../fonts/sourcesanspro-light-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "source_sans_probold";
    src:
        url("../fonts/sourcesanspro-bold-webfont.woff2") format("woff2"),
        url("../fonts/sourcesanspro-bold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "source_sans_prosemibold";
    src:
        url("../fonts/sourcesanspro-semibold-webfont.woff2") format("woff2"),
        url("../fonts/sourcesanspro-semibold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

#cb-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    border-radius: 0;
    display: none;
  }



.cookiealert{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    margin:0!important;
    z-index:999;
    opacity:0;
    border-radius:0;
    transform:translateY(100%);
    transition:.5s ease-out;
    color:#ecf0f1;
    background:#212327
}
.cookiealert.show{
    opacity:1;
    transform:translateY(0);
    transition-delay:1s
}
.cookiealert .acceptcookies{
    margin-left:10px;
    vertical-align:baseline
}

.content {
    flex: 1 0 auto;
}

.footer-basic {
    flex-shrink: 0;
    background-image: linear-gradient(180deg, #ffffff 1%, #e7dbd3 1%, #e7dbd3 98%, #000000);
    padding-top: 10px;
    padding-bottom: 5px;
}
.footer-basic ul {
    padding: 0;
    list-style: none;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}
.footer-basic li {
    padding: 0 10px;
}
.footer-basic ul {
    color: var(--colBrown) !important;
    text-decoration: none;
    opacity: 0.8;
}


.footer-basic .social > a:hover,
.footer-basic ul a:hover {
    opacity: 1;
    transform: scale(1.2);
}
.footer-basic .social {
    text-align: center;
    padding: 5px;
}
.footer-basic .social > a {
    font-size: 24px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 8px;
    color: var(--colBrown);
    opacity: 1;
}

.footer-basic .copyright {
    text-align: center;
    font-size: 13px;
    color: var(--colBrown);
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:hover {
    border: 0;
    color: var(colBrown);
    background-color: transparent;
}

.navbar-toggler-icon {
    color: var(--colBrown);
    background-color: transparent;
}

.navbar-toggler {
  color: #760822 !important;
  border-color: #760822 !important;
}

.navbar {
    background-image: linear-gradient(180deg, #f2e3dd 2px, var(--colBg) 2px, var(--colBg) 98%, #000000);
    min-height: 70px;
    max-height: 854px;
    transition: all 0.4s ease;
}

.navbar .navbar-nav {
    padding-left: 18px;
    padding-right: 18px;
    background-color: transparent;
    color: var(--colBrown) !important;
}

nav.navbar.shrink {
    min-height: 40px;
}

.nav-link {
    color: var(--colBrown) !important;
}

.nav-tabs .nav-link:focus,
.nav-link:hover {
    color: var(--colRed) !important;
    background-color: transparent;
}

.nav-link.active {
    font-family: "source_sans_probold", Calibri,Candara,Arial,sans-serif;
    border: none;
    border-bottom: none;
    color: var(--colBrown) !important;
    background-color: transparent !important;
    pointer-events: none;
}

@media (min-width: 767px) {
    .navbar .navbar-nav .show .dropdown-menu {
        background-color: var(--colBg);
        box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.6) !important;
    }

    .navbar-collapse {
        background-color: var(--colBg);
        border-color: var(--colBrown);
        color: var(--colBrown) !important;
        border-width: 1px;
        border-style: none;
        
    }
    
    .navbar-nav > li > .dropdown-menu {
        border-style: solid;
        border-radius: 0.5rem;
        background-color: var(--colBgDarker); 
        border-color: var(--colBgDarkerDarkerdarker); 
        box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.6) !important;
    }
}

@media (max-width: 767px) {
    .navbar .navbar-nav {
        background-color: var(--colBg);
        color: var(--colBrown);
        border-color: var(--colBrown);
    }
    
    .dropdown-menu {
        background-color: transparent !important;
        border-color: transparent;
    }
    
    .navbar-nav > li > .dropdown-menu {
        box-shadow: none;
        border-style: solid;
        border-radius: 0;
        background-color: transparent; 
        border-color: transparent !important;
    }

    .logo {
        padding-top: 5px;
    }
    .navbar-collapse {
        background-color: transparent;
        border-style: none;
        color: var(--colBrown) !important;
    }
}

.dropdown-menu .dropdown-item,
.dropdown-item:focus {
    background-color: transparent;
    color: var(--colBrown);
}

.dropdown-item:hover {
    background-color: transparent;
    color: var(--colRed);
}

html,
body {
    height: 100%;
}
body {
    background-image: url(../../assets/img/dark-wood-floor3xs3.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
    background-position: center;
    background-repeat: repeat;
    margin: 0;
    font-family: var(--font-regular);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--colBrown);
    text-align: left;
    background-color: var(--colBrown);
}

.jumbotron {
    padding: 40px;
    background-color: var(--colBg);
    margin: 5%;
}

.dropdown-divider {
    
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--colBgDarkerDarkerDarker);
}

.dropdown:hover .dropdown-content {
    display: block;
}

img {
    vertical-align: middle;
    border-style: none;
}

.bg-light {
    background-color: var(--colBg) !important;
}

.rounded {
    border-radius: 0.5rem !important;
}

.border {
    border: 1px solid var(--colBrown) !important;
}


a {
    color: var(--colBrown);
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: var(--colRed);
    text-decoration: none;
}


/* link animation */
/*
a {
  color: #18272F;
  position: relative;
  text-decoration: none;
}

a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: #18272F;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
*/

a.text-primary:focus,
a.text-primary:hover {
    color: var(--colBg) !important;
}

.h1,
.h2,
.h4,
.h6,
h1,
h2,
h4,
h6 {
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.h3,
.h4,
.h5,
h3,
h4,
h5 {
    font-family: var(--font-light);
}


.btn {
    background-color: var(--colBrown)!important;
    color: var(--colBg)!important;
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.5) rgba(170, 170, 170, 0.5) rgba(0, 0, 0, 0.5) rgba(170, 170, 170, 0.5);
    border-radius: 0.25rem !important;
    box-shadow: 0 0.125rem 0.2rem rgba(0, 0, 0, 0.3) !important;
}

.btn:hover {
    background-color: var(--colBrownLighter) !important;
    transition: 0.4s;
    color: var(--colBgLighter) !important;
}

.btn:hover:active {
    color: var(--colBg);
    background-color: var(--colDarkBrown);
    border-color: rgba(0, 0, 0, 0.5) rgba(170, 170, 170, 0.5) rgba(255, 255, 255, 0.5) rgba(170, 170, 170, 0.5);
    box-shadow: none !important;
}

.buy-button {
    background-color: var(--colGreen) !important; 
    color: var(--colBg);
}

.buy-button:hover {
    background-color: var(--colGreenLighter) !important;
    transition: 0.4s;
    color: var(--colBgLighter) !important;
}

.buy-button:hover:active {
    color: var(--colBg);
    background-color: var(--colDarkGreen);
}

.form-control:focus {
    color: var(--colBrown);
    background-color: #fff;
    border-radius: 2px;
    border-color: var(--colBg);
    outline: 2px;
    box-shadow: 0 0 0 0.2rem black;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--colBrown);
    background-color: rgba(255,255,255,0.25);
    background-clip: padding-box;
    border: 1px solid var(--colBrown);
    border-radius: 5px;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
}

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 0;
    border-top: 1px solid var(--colBrown);
}
.table td,
.table th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--colBrown);
}

.table-bordered {
    border: 1px solid var(--colBrown);
}

.product_link_arrow {
    position: absolute;
    bottom: 5px;
    display: inline-block;
    height: 40px;
    vertical-align: bottom;
    width: 10%;
    left: 45%;
}

.big_text_header {
    font-family: var(--font-bold);
    font-size: 1.5rem;
}

.small_text_header {
    font-size: 1rem;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
}

.header_link {
    position: absolute;
    bottom: 5px;
}

.product_box {
    position: relative;
    height: 100%;
    background-color: var(--colBg);
    border-radius: 0.5rem !important;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.8) !important;
}

.col-bottom {
    display: table-cell;
    height: auto;
    float: none;
}

#bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.main {
    border: 1px solid var(--colGreen);
    float: left;
    min-height: 180px;
    margin: 2px;
    padding: 10px;
    min-width: 117px;
    position: relative;
}

.col-bottom-pad {
    padding-bottom: 20px;
}

.col {
    flex-grow: 1;
    flex-shrink: 1;
    transition: ease-in-out 300ms;
}

i {
    color: inherit;
}

.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--colBrown);
}

.text-underline,
#text-underline {
    text-decoration: underline;
}

.shadow {
    box-shadow: 0 0.125rem 0.29rem rgba(0, 0, 0, 0.6) !important;
}

.emboss {
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.5) rgba(80, 80, 80, 0.5) rgba(0, 0, 0, 0.7) rgba(80, 80, 80, 0.5);
}

.scaleOnHover {
    transition: ease-in-out 200ms;
}

.scaleOnHover:hover {
    transform: scale(1.05);
    transition: ease-in-out 200ms;
}

/* LOGOS */
.klanghelm-navbar-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    --svg: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 29.4.0, SVG Export Plug-In . SVG Version: 9.03 Build 0) --><svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve"><style type="text/css">.st0{fill:%231D1D1B;}</style><path class="st0" d="M1050,322H150c-27.61,0-50-22.39-50-50v0c0-27.61,22.39-50,50-50h900c27.61,0,50,22.39,50,50v0C1100,299.61,1077.61,322,1050,322z"/><path class="st0" d="M1050,650H150c-27.61,0-50-22.39-50-50v0c0-27.61,22.39-50,50-50h900c27.61,0,50,22.39,50,50v0C1100,627.61,1077.61,650,1050,650z"/><path class="st0" d="M1050,978H150c-27.61,0-50-22.39-50-50v0c0-27.61,22.39-50,50-50h900c27.61,0,50,22.39,50,50v0C1100,955.61,1077.61,978,1050,978z"/></svg>');
    background-color: currentColor;
    color: var(--colBrown);
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.klanghelm-navbar-icon:hover {
    display: inline-block;
    width: 32px;
    height: 32px;
    --svg: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 29.4.0, SVG Export Plug-In . SVG Version: 9.03 Build 0) --><svg version="1.1" baseProfile="tiny" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1200 1200" overflow="visible" xml:space="preserve"><path fill="%231D1D1B" d="M150,202h900c27.61,0,50,31.34,50,70l0,0c0,38.66-22.39,70-50,70H150c-27.61,0-50-31.34-50-70l0,0C100,233.34,122.39,202,150,202z"/><path fill="%231D1D1B" d="M150,530h900c27.61,0,50,31.34,50,70l0,0c0,38.66-22.39,70-50,70H150c-27.61,0-50-31.34-50-70l0,0C100,561.34,122.39,530,150,530z"/><path fill="%231D1D1B" d="M150,858h900c27.61,0,50,31.34,50,70l0,0c0,38.66-22.39,70-50,70H150c-27.61,0-50-31.34-50-70l0,0C100,889.34,122.39,858,150,858z"/></svg>');
    background-color: currentColor;
    color: var(--colBrown);
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.icon-x-twitter {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>');
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.icon-instagram {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/></svg>');
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.icon-facebook {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/></svg>');
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.fa--shopping-cart {
    display: inline-block;
    width: 1.19em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1408'%3E%3Cpath fill='%23000' d='M640 1280q0 52-38 90t-90 38t-90-38t-38-90t38-90t90-38t90 38t38 90m896 0q0 52-38 90t-90 38t-90-38t-38-90t38-90t90-38t90 38t38 90m128-1088v512q0 24-16.5 42.5T1607 768L563 890q13 60 13 70q0 16-24 64h920q26 0 45 19t19 45t-19 45t-45 19H448q-26 0-45-19t-19-45q0-11 8-31.5t16-36t21.5-40T445 951L268 128H64q-26 0-45-19T0 64t19-45T64 0h256q16 0 28.5 6.5T368 22t13 24.5t8 26t5.5 29.5t4.5 26h1201q26 0 45 19t19 45'/%3E%3C/svg%3E");
    background-color: currentColor;
    mask-image: var(--svg);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    margin-bottom: -3px;
    margin-left: 2px;
    margin-right: 5px;
}

strong {
    font-family: var(--font-bold);
    font-weight: normal;
}

.text-strong {
    font-family: var(--font-bold);
    font-weight: normal
}

.logoSvg {
    margin-top: 5px;
    display: inline-block;
    width: 130px;
    height:38px;
    background-size: cover;
    background-image: url(../img/KlanghelmVectorLogoBrown.svg);
}

.logoSvg:hover,
.logoSvg:focus {
  background-image: url(../img/KlanghelmVectorLogoBrownBold.svg);
}

.nav-fill {
    margin-top: 10px;
    background-color: var(--colBgDarker);
}


.brownBg {
    background-color: var(--colBgDarker)
}

.colorRed {
    color: var(--colRed)
}

.modal-dialog .modal-lg {
    background-color: transparent!important;
}

.modal-content {
    background-color: var(--colBg) !important;
}

.modal-body {
    color: var(--colBrown)
}

.w-100 {
    color: var(--colBrown);
    border: solid;
    border-width: 0.1px;
    
}

thead {
    border-bottom: solid;
}

th, td {
    padding-top: 10px;
    padding-bottom: 10px;
}

form {
    background-color: var(--colBgDarker);
}

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    border-radius: 0;
}

.alert {
    background-color: rgba(0, 0, 0, 0.85);
    color: var(--colBg);
}

.text-color-bright {
    color: var(--colBg);
}

.text-color-red {
    color: var(--colRed);
}

.btn-cookie {
    background-color: var(--colBgDarkerDarker)!important;
    color: var(--colBrown)!important;
    border: none;
    /*
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.5) rgba(170, 170, 170, 0.5) rgba(0, 0, 0, 0.5) rgba(170, 170, 170, 0.5);
    */
    border-radius: 0.25rem !important;
    /*box-shadow: 0 0.125rem 0.2rem rgba(0, 0, 0, 0.3) !important;*/
}

.btn-cookie:hover {
    background-color: var(--colBg) !important;
    transition: 0.4s;
    color: var(--colDarkBrown) !important;
}

.btn-cookie:hover:active {
    color: var(--colBrown);
    background-color: var(--colBg);
    /*border-color: rgba(0, 0, 0, 0.5) rgba(170, 170, 170, 0.5) rgba(255, 255, 255, 0.5) rgba(170, 170, 170, 0.5);*/
    box-shadow: none !important;
}