:root {
    --sidenav-width: 300px;
}
@media (min-width: 992px) {
    :root {
        --sidenav-width: 400px;
    }
}

#ui-to-top {
    display: none;
}

.dropdown .dropdown-menu .dropdown-item {
    display: block;
    position: relative;
    clear: both;
    color: #282c34;
    white-space: nowrap;
    line-height: 1.5;
    padding: 5px 12px;
    font-size: 16px;
}
.dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #eeeeef;
}
.dropdown .dropdown-menu .dropdown-item.active {
    background-color: #eeeeef;
    color: #056100;
}
#isotopeFilter.dropdown.dropdown-center .dropdown-menu {
    left: 50%;
    right: auto;
    text-align: center;
    transform: translate(-50%, 0);
}
#isotopeFilter.dropdown .dropdown-menu {
    min-width: 200px;
}
.isotope--reference-projects .isotope-item {
    padding-bottom: 40px;
}
@media(min-width:576px){
    .isotope--reference-projects .isotope-item {
        padding-bottom: 30px;
        margin: -1px;
    }
}
@media(max-width:575px){
    .isotope--reference-projects .isotope-item {
        padding: 10px 50px;
        margin: 0;
    }
}

.overlay-hint {
    z-index: 999999;
    position: fixed;
    left: 12px;
    bottom: 12px;
    width: 300px;
    margin: 0;
    padding: 15px;
    box-shadow: 1px 1px 7px 0 rgba(0,0,0,.3);
}
.overlay-hint button {
    margin-top: 10px;
}
.overlay-hint .headline {
    margin-bottom: 10px;
}

@media(max-width:768px){
    .overlay-hint {
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.2);
        border-radius: 0;
    }
}
.cookie-hint {
    background-color: white;
}
.discount-hint {
    background-color: #056100;
    color: white;
}
.discount-hint .headline {
    color: white;
}
.discount-hint .close {
    font-size: 12px;
    font-weight: normal;
    right: 0;
    opacity: 1;
}
.discount-hint button {
    margin-top: 20px;
    background-color: #309b2a;
}






/*=====================================
 * Teaser in Navbar - Winter Action
 * ===================================*/
.winter-action,
.winter-action-mobile {
    color: darkred;
}
.winter-action {
    position: absolute;
    margin-left: 20px;
    margin-top: 5px;
}
.winter-action-mobile {
    line-height: 1.2;
    padding: 10px;
}
.winter-action i,
.winter-action-mobile i {
    float: left;
    font-size: 1.7em;
    margin-right: 5px;
    margin-top: 3px;
}
.winter-action .caption,
.winter-action-mobile .caption {
    white-space: nowrap;
}





/*=====================================
 * Highlights
 * ===================================*/
@media(max-width:991px){
    .highlights {
        overflow-x: auto;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
        margin-top: 50px;
    }
}
@media(max-width:648px){
    .highlights {
        margin-top: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
}
.highlights .inner {
    display: flex;
    flex-direction: row;
}
.highlights .inner .item {
    flex-grow: 1;
    padding: 20px 25px;
    white-space: nowrap;
    color: gray;
    background-color: white;
    line-height: 1.1;
    font-size: 1em;
}
@media(min-width:992px){
    .highlights .inner a.item:hover {
        color: #056100;
        background-color: rgba(0, 0, 0, .05);
    }
}
.highlights .inner a.item.color-spin:not(:first-child) {
    border-left: 1px solid rgba(0, 0, 0, .05);
}
.highlights .inner a.item.color-spin:nth-child(1) > div {
    animation: highlight1 15s infinite;
    animation-delay: 2s;
}
.highlights .inner a.item.color-spin:nth-child(2) > div {
    animation: highlight2 15s infinite;
    animation-delay: 2s;
}
.highlights .inner a.item.color-spin:nth-child(3) > div {
    animation: highlight3 15s infinite;
    animation-delay: 2s;
}
.highlights .inner a.item.color-spin:nth-child(4) > div {
    animation: highlight4 15s infinite;
    animation-delay: 2s;
}
.highlights .inner a.item.color-spin:nth-child(5) > div {
    animation: highlight5 15s infinite;
    animation-delay: 2s;
}
@keyframes highlight1 {
    0% {color: inherit;}
    10% {color: #056100;}
    20% {color: inherit;}
}
@keyframes highlight2 {
    20% {color: inherit;}
    30% {color: #056100;}
    40% {color: inherit;}
}
@keyframes highlight3 {
    40% {color: inherit;}
    50% {color: #056100;}
    60% {color: inherit;}
}
@keyframes highlight4 {
    60% {color: inherit;}
    70% {color: #056100;}
    80% {color: inherit;}
}
@keyframes highlight5 {
    80% {color: inherit;}
    90% {color: #056100;}
    100% {color: inherit;}
}
.highlights .inner .item i {
    float: left;
    font-size: 2em;
    margin-right: 20px;
}
.highlights .inner .item i {
}
.highlights .inner .item small {
    display: block;
    font-size: 0.8em;
    white-space: nowrap;
}
@media (min-width: 1201px) {
    .highlights .inner .item {
        padding: 15px 40px;
    }
}
@media (max-width: 1200px) {
    .highlights .inner .item {
        padding: 15px 20px;
        font-size: 0.9em;
    }
    .highlights .inner .item i {
        font-size: 1.9em;
        margin-right: 15px;
    }
}
@media (max-width: 991px) {
    .highlights .inner .item {
        padding: 10px 5px;
        font-size: 0.7em;
        min-width: 160px;
    }
    .highlights .inner .item i {
        font-size: 1.8em;
        margin-right: 10px;
    }
    .highlights .inner .item small {
        font-weight: bold;
    }
}


/*=====================================
 * DEBUG
 * ===================================*/
.text-debug-in-progress,
.text-debug-in-progress * {
    color: red !important;
}



/*=====================================
 * Navbar
 * ===================================*/

.rd-navbar-fullwidth.rd-navbar-default .rd-navbar-inner {
    justify-content: space-between;
    align-items: center;
    flex-wrap: unset;
}

.rd-navbar-fullwidth.rd-navbar-default .rd-navbar-inner .rd-navbar-cell {
    text-align: left;
}

.rd-navbar .menu-bar .sidenav-brand {
    padding: 5px 30px 10px 5px;
}
.rd-navbar-static,
.rd-navbar-fullwidth {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}

/*=====================================
 * Navbar - Sub Menu
 * ===================================*/

.rd-navbar .sub-menu {
    margin-top: 0;
    transition: .2s;
    background-color: #fff;
    font-size: 14px;
}

.rd-navbar .sub-menu .rd-navbar-nav {
    display: block;
    text-align: center;
}

.rd-navbar .sub-menu .rd-navbar-nav > li {
    float: none;
    display: inline-block;
}

.rd-navbar .sub-menu .rd-navbar-nav  > li > a {
    color: gray;
    font-weight: bold;
}
.rd-navbar .sub-menu .rd-navbar-nav  > li.focus > a {
    color: #056100;
}

.rd-navbar.rd-navbar--is-stuck .sub-menu {
    margin-top: -54px;
}
.rd-navbar.rd-navbar--is-stuck:hover .sub-menu {
    margin-top: 0;
}
.rd-navbar .sub-menu .rd-navbar-nav > li {
    transition: .2s;
}
.rd-navbar.rd-navbar--is-stuck .sub-menu .rd-navbar-nav > li {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.rd-navbar.rd-navbar--is-stuck:hover .sub-menu .rd-navbar-nav > li {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.rd-navbar .sub-menu .rd-navbar-megamenu {
    width: 900px !important;
}
.rd-navbar .sub-menu .rd-navbar-megamenu > li {
    width: 300px;
    min-width: 300px;
    flex: unset !important;
}
.rd-navbar .sub-menu .rd-navbar-megamenu > li:first-child + li:last-child {
    width: 600px;
    min-width: 600px;
}

:root {
    --main-nav-popup-height: 380px;
}


.rd-navbar .sub-menu [data-hover-dependency] {
    background-color: #fff;
    overflow: hidden;
    position: absolute;
    height: 100%;
    display: none;
    width: 600px;
}
.rd-navbar .sub-menu [data-hover-dependency].tinyView {
    width: 300px;
}
.rd-navbar .sub-menu .rd-navbar-megamenu.value-Zäune > li[data-hover-level="1"] {
    width: 235px;
    min-width: 235px;
}
.rd-navbar .sub-menu .rd-navbar-megamenu.value-Zäune > li[data-hover-level="2"] {
    width: 250px;
    min-width: 250px;
}
.rd-navbar .sub-menu .rd-navbar-megamenu > li[data-hover-level] {
    min-height: var(--main-nav-popup-height);
}
.rd-navbar .sub-menu .rd-navbar-megamenu.value-Zäune > li[data-hover-level="3"] [data-hover-dependency] {
    width: 515px;
    min-width: 515px;
}
.rd-navbar .sub-menu .rd-navbar-megamenu.value-Zäune > li[data-hover-level="2"] .js-hover {
    font-weight: normal;
}
.rd-navbar .sub-menu .rd-navbar-megamenu.value-Zäune {
    max-width: 1000px!important;
    width: 1000px!important;
}
.rd-navbar .sub-menu [data-hover-dependency] .row {
    height: 100%;
    min-height: 100%;
}
.rd-navbar .sub-menu .info-column {
    width: 600px !important;
}
.rd-navbar .sub-menu .info-column--gabionen,
.rd-navbar .sub-menu .info-column--gabionen-system {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
}
.rd-navbar .sub-menu .info-column--gabionen a.button,
.rd-navbar .sub-menu .info-column--gabionen-system a.button {
    margin-top: 10px;
    display: inline-block;
}
.rd-navbar .sub-menu .info-column--gabionen {
    margin-top: 10px;
}
.rd-navbar .sub-menu .info-column--gabionen-system {
    margin-top: 20px;
}
.rd-navbar .sub-menu .info-column--gabionen .gabionen-item,
.rd-navbar .sub-menu .info-column--gabionen-system .gabionen-item {
    margin: 0 20px;
    width: 150px;
    display: inline;
    height: auto;
}
.rd-navbar .sub-menu .info-column--gabionen .gabionen-item--inner,
.rd-navbar .sub-menu .info-column--gabionen-system .gabionen-item--inner {
    padding: 2px 0 4px 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 3px;
    display: inline-block;
    margin-top: 10px;
}
.rd-navbar .sub-menu .info-column--gabionen .gabionen-item--inner img,
.rd-navbar .sub-menu .info-column--gabionen-system .gabionen-item--inner img {
    width: 130px;
}
.rd-navbar .sub-menu .info-column--gabionen .fa-plus,
.rd-navbar .sub-menu .info-column--gabionen-system .fa-plus {
    font-size: 2.2em;
    color: lightgray;
    top: -55px;
    display: inline-block;
    position: relative;
    text-align: center;
    width: 5px;
    margin-left: -8px;
    margin-right: 10px;
}
.rd-navbar .sub-menu .info-column--gabionen .gabionen-item--title,
.rd-navbar .sub-menu .info-column--gabionen-system .gabionen-item--title {
    color: gray;
    display: block;
    font-size: 12px;
    text-align: center;
    padding: 8px 0 5px 0;
}
.rd-navbar .sub-menu .column-image {
    width: 350px !important;
    height: 100%;
    position: absolute;
    right: -50px;
}
.rd-navbar .sub-menu .image-container {
    background-size: cover;
    min-height: 100%;
    background-position: center center;
}
.rd-navbar .sub-menu .product-category--sichtschutzstreifen .image-container,
.rd-navbar .sub-menu .product-category--tor .image-container {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.rd-navbar .sub-menu .caption-container {
    min-height: 100%;
}
.rd-navbar .sub-menu .caption {
    text-align: left;
    padding: 10px;
    line-height: normal;
    font-size: 13px;
    color: gray;
}
.rd-navbar .sub-menu .caption .price {
    font-weight: bold;
    color: #056100;
    margin-top: 10px;
    font-size: 16px;
}
.rd-navbar .sub-menu .caption .description {
    margin-top: 10px;
}
.rd-navbar .sub-menu .caption .product-title {
    font-weight: bold;
    font-size: 18px;
    padding: 0 0 10px 0;
    color: #056100;
}
.rd-navbar .sub-menu .caption .list-title {
    display: block;
    color: gray;
    text-decoration: underline;
}
.rd-navbar .sub-menu .caption ul {
    margin-bottom: 10px;
}
.rd-navbar .sub-menu .caption ul li {
    margin-top: 2px;
    color: gray;
}
.rd-navbar .sub-menu .caption table {
    margin-bottom: 10px;
}
.rd-navbar .sub-menu .caption table tr td {
    vertical-align: initial;
    color: gray;
}
.rd-navbar .sub-menu .caption table tr td:first-child {
    padding-right: 10px;
    white-space: nowrap;
}
.rd-navbar .sub-menu .caption a.button:before {
    display: none !important;
}
.rd-navbar .sub-menu a.button {
    padding: 3px 20px !important;
    color: #fff !important;
    background-color: #056100 !important;
    display: block;
}
.rd-navbar .sub-menu .caption a.button {
    display: block !important;
    position: absolute;
    width: 88%;
    bottom: 5px;
    transition: .2s;
}

/*=================
 * Modal - Product Info
 * ===============*/
.modal.modal-info.modal-product .modal-dialog .modal-footer,
.modal.modal-info.modal-product .modal-dialog .modal-header {
    display: none;
}
.modal.modal-info.modal-product .modal-dialog .modal-body {
    padding: 0;
}
@media (max-width: 991px) {
    /** Userlike Fix */
    .modal.modal-info.modal-product {
        z-index: 9999999999;
    }
}
table.additional-info {
    text-align: left;
}
@media (max-width: 767px) {
    table.additional-info tr > td:nth-child(1) {
        display: block;
        font-size: 12px;
    }
    table.additional-info tr > td:nth-child(2) {
        display: block;
        margin-bottom: 10px;
        font-weight: bold;
    }
}
/*=================
 * Mobile Buttons
 * ===============*/

.rd-navbar.rd-navbar-fixed .toggle-original {
    margin-left: 4px;
}

.rd-navbar.rd-navbar-fixed .container-mobile-buttons {
    top: 0;
    left: auto;
    width: 140px;
    position: fixed;
    z-index: +1;
    right: 10px;
}

.rd-navbar.rd-navbar-fixed .mobile-button .digit {
    color: #fff;
    background-color: #056100;
    font-size: 10px;
    position: absolute;
    text-align: center;
    padding: 3px 5px;
    border-radius: 50%;
    line-height: 1;
    right: 0;
    z-index: +1;
    font-weight: bold;
    border: 1px solid rgba(0, 0, 0, .12);
}

.rd-navbar.rd-navbar-fixed .mobile-button .digit.empty {
    background-color: #fff;
    color: gray;
}

.rd-navbar.rd-navbar-fixed .mobile-button {
    display: inline;
    border: 1px solid rgba(0, 0, 0, .05);
    padding: 8px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 50%;
    position: fixed;
    width: 40px;
    height: 40px;
    top: 5px;
    left: auto;
}

.rd-navbar.rd-navbar-fixed .mobile-button:hover,
.rd-navbar.rd-navbar-fixed .mobile-button:active,
.rd-navbar.rd-navbar-fixed .mobile-button:focus {
    background-color: #056100;
}

.rd-navbar.rd-navbar-fixed .mobile-button:hover i,
.rd-navbar.rd-navbar-fixed .mobile-button:active i,
.rd-navbar.rd-navbar-fixed .mobile-button:focus i {
    color: #fff;
}

.rd-navbar.rd-navbar-fixed .mobile-button i {
    margin-top: 3px;
    position: absolute;
    margin-left: -1.5px;
}

.rd-navbar.rd-navbar-fixed .mobile-button i.fa-shopping-cart {
    margin-left: -2px;
}

.rd-navbar.rd-navbar-fixed .mobile-button:first-child {
    right: 60px;
}

.rd-navbar.rd-navbar-fixed .mobile-button:nth-child(2) {
    right: 110px;
}



/*=================
 * Menu Bar
 * ===============*/

.rd-navbar-fullwidth.rd-navbar-default .menu-bar .rd-navbar-inner .rd-navbar-cell {
    flex-shrink: 0;
    flex-basis: unset;
}
/* show logo on sm device and stuck navbar */
.rd-navbar-fullwidth.rd-navbar--is-stuck.rd-navbar-default .rd-navbar-panel {
    display: block;
}

.rd-navbar-fullwidth .menu-bar .rd-navbar-inner,
.rd-navbar-static .menu-bar .rd-navbar-inner {
    transition: .5s;
}

/*=================
 * Top Bar
 * ===============*/

.rd-navbar .top-bar .rd-navbar-cell {
    padding-top: 10px;
    padding-bottom: 10px;
}


/*=================
 * Info Bar
 * ===============*/

.rd-navbar-default .rd-navbar-outer.outer-2.info-bar {
    color: #fff;
    background: #056100;
    position: relative;
}
@media (max-width: 991px) {
    .info-bar {
        position: fixed !important;
    }
}

.rd-navbar-default .info-bar .rd-navbar-inner .rd-navbar-cell {
    color: #fff;
    background: #056100;
    text-align: center;
}

.rd-navbar-default .info-bar .rd-navbar-inner .rd-navbar-cell > div {
    display: inline-flex;
    text-align: left;
}

.rd-navbar-fullwidth.rd-navbar-default .info-bar .rd-navbar-inner .rd-navbar-cell {
    flex-shrink: 1;
    flex-basis: 100%;


}

.rd-navbar-fixed .info-bar .rd-navbar-inner,
.rd-navbar-fullwidth .info-bar .rd-navbar-inner {
    max-width: 100%;
    height: 80px;
}

.rd-navbar-static .rd-navbar-top-panel.info-bar, .rd-navbar-fullwidth .rd-navbar-top-panel.info-bar {
    display: none;
}

.rd-navbar-fixed .info-bar {
    display: none;
    position: fixed;
    width: 100%;
}

.rd-navbar-fixed .info-bar .rd-navbar-inner  {
    height: auto;
    padding: 23px 0 3px 0;
}

.rd-navbar-fixed .info-bar .rd-navbar-inner .rd-navbar-cell  {
    position: relative;
    text-align: left;
    padding-left: 10px;
}

.rd-navbar-fixed .info-bar .rd-navbar-inner .rd-navbar-cell:not(:last-child)  {
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.3);
}

.rd-navbar-static .info-bar .rd-navbar-inner {
    max-width: 100%;
}

.rd-navbar-static .rd-navbar-outer.info-bar .rd-navbar-inner {
    height: 110px;
}

.rd-navbar-outer.info-bar.toggle-original-elements.active {
    display: none;
}

.rd-navbar-outer.info-bar .rd-navbar-cell i {
    float: left;
    font-size: 3rem;
    padding-right: 15px;
}

.rd-navbar-outer.info-bar .rd-navbar-cell span {
    display: block;
}


@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}


/*=====================================
 * Selectpicker
 * ===================================*/
.bootstrap-select.btn-group {
    width: 100%;
    padding: 0;
    border: none;
}
.bootstrap-select.btn-group .btn {
    height: 56px;
    padding: 13.5px 55px 13.5px 19px;
    font-size: 16px;
    line-height: 27px;
    border: 1px solid #cacdd0;
    border-radius: 6px;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-weight: 300;
    background-color: #fff;
    color: #727477;
}
.bootstrap-select.btn-group .btn .filter-option {
    position: unset;
    font-weight: bold;
    color: #2b542c;
}
.bootstrap-select.btn-group .btn .caret {
    position: absolute;
    right: 22px;
    top: 26px;
}

.bootstrap-select .dropdown-menu > .selected > a,
.bootstrap-select .dropdown-menu > .selected > a:hover,
.bootstrap-select .dropdown-menu > .selected > a:focus {
    text-decoration:none;
    outline:0;
    background-color:#d1d1d1;
    color: #333333;
}


/*=====================================
 * Trusted Badge
 * ===================================*/
div[id*="tsbadgeResponsiveTop"] > div[class*="responsive-badge_"] {
    margin-top: 50px !important;
}
div[id*="tsbadgeResponsiveTop"] > div:not([class*="responsive-badge_"]) {
    display: none;
}

/*=====================================
 * Parallax
 * ===================================*/
.parallax-container {
}


/*=====================================
 * Shell with BG-Image
 * ===================================*/
.shell-bg-image {
    background-position: center;
    background-size: cover;
    padding: 30px 0;
}
.shell-bg-image .shell-title,
.shell-bg-image .shell-title h5,
.shell-bg-image .shell-title h4,
.shell-bg-image .shell-title h3,
.shell-bg-image .shell-title h2,
.shell-bg-image .shell-title h1 {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}


/*=====================================
 * PayPal Buttons
 * ===================================*/
#paypal-button-container * {
    z-index: 2;
}
#paypal-buttons-container * {
    z-index: 2;
}

/*=====================================
 * Large Gallery
 * ===================================*/
body.lg-on .lg-toolbar #lg-share,
body.lg-on .lg-toolbar #lg-download {
    display: none;
}
.lg-thumb-item {
    background-color: #fff;
}

/*=====================================
 * Footer
 * ===================================*/
footer  {
    background-color: #fff;
}
footer .width-wrap h5 {
    font-weight: bold;
    margin: 30px 0 0 0;
}
footer .payment-methods .badge-wrapper {
    padding: 0 8px 5px 0;
}
footer .shell + .shell {
    margin-top: 20px;
}
@media(min-width : 768px) {
    footer .nav .collapse {
        display: block !important;
    }
    footer .divider {
        margin: 10px 0 20px 0;
    }
}
@media(max-width : 767px) {
    footer .divider {
        display: none;
    }
    footer .nav {
        padding: 15px 10px;
        margin: 0;
    }
    footer .nav {
        border-bottom: 1px solid lightgray;
    }
    footer .nav a[aria-expanded] {
        color: #282c34;
    }
    footer .nav a[aria-expanded]:after {
        float: right;
        content: "\f107";
        font-family: FontAwesome;
        transition: .3s;
    }
    footer .nav [aria-expanded="true"]:after {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}



/*=====================================
 * Paper
 * ===================================*/

.paper {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #fcfcfc;
}
.paper.paper-primary {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #056100;
    color: white;
}
.paper .paper {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: transparent;
}
@media(max-width: 768px) {
    .paper:not(.paper-panel) {
        border: 1px solid rgba(0, 0, 0, 0.05);
        background-color: #fff;
    }
}
.paper .paper-body {
    padding-bottom: 100px;
}
.paper .paper-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}



/*=====================================
 * Paper Panel Fluid
 * ===================================*/

.paper-panel-fluid {
    display: flex;
    flex-direction: column;
}
.paper-panel-fluid .max-height {
    height: 100%;
    min-height: unset;
}


/*=====================================
 * Parsley Form Validation
 * ===================================*/
.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}
.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}
.parsley-errors-list {
    color: #B94A48;
    font-weight: bold;
    font-size: 12px;
    position: absolute;
}

/*=====================================
 * Product Slider Inline
 * ===================================*/
.product-slider-inline {
    padding: 0 10px;
    display: grid;
    overflow-x: auto;
    grid-template-columns: repeat(12, calc(50% - 225px));
    grid-template-rows: minmax(150px, 1fr);
}
@media(max-width: 991px) {
    .product-slider-inline {
        grid-template-columns: repeat(12, calc(50% - 75px));
    }
}
@media(max-width: 768px) {
    .product-slider-inline {
        grid-template-columns: repeat(12, calc(50% + 45px));
    }
}
.product-slider-inline > .panel {
    width: 200px;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.product-slider-inline > .panel:not(:last-child) {
    margin-right: 10px;
}

/*=====================================
 * Product Slider
 * ===================================*/
.owl-carousel.product-slider.bg-white {
    background-color: #fff;
}
.owl-carousel.product-slider.bg-transparent {
    background-color: transparent;
}

@media (min-width: 992px) {
    .modal .owl-carousel.product-slider {
        padding: 0 10px;
    }
    .owl-carousel.owl-carousel--dots.product-slider {
        padding: 0 10px;
    }
    .owl-carousel.product-slider {
        padding: 0 60px;
    }
}

@media (min-width: 1800px) {
    .modal .owl-carousel.product-slider {
        padding: 0 20px;
    }
    .owl-carousel.product-slider {
        padding: 0 70px;
    }
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
    pointer-events: none;
}
@media(max-width: 991px) {
    .owl-carousel .owl-prev,
    .owl-carousel .owl-next {
        font-size: 50px;
    }
}
@media(max-width: 991px) {
    .owl-carousel.product-slider .owl-prev {
        margin-left: -40px;
    }
    .owl-carousel.product-slider .owl-next {
        margin-right: -40px;
    }
    .product-slider .owl-item .owl-carousel .owl-prev {
        margin-left: 0;
    }
    .product-slider .owl-item .owl-carousel .owl-next {
        margin-right: 0;
    }
}
@media(max-width: 648px) {
    .owl-carousel.product-slider .owl-prev,
    .owl-carousel.product-slider .owl-next {
        display: none;
    }
    .product-slider .owl-item .owl-carousel .owl-prev,
    .product-slider .owl-item .owl-carousel .owl-next {
        display: block;
    }
}
.owl-carousel.product-slider[data-center="false"] .owl-item .owl-item {
    width: 100%;
    padding: 10px 5px 5px;
}
.owl-carousel.product-slider[data-center="false"] .owl-item > .inner {
    width: 100%;
    height: auto;
    margin: 0;
}
.owl-carousel.product-slider.bg-transparent {
    background-color: transparent;
}
.owl-carousel.product-slider .owl-item > .inner {
    width: 180px;
    height: 160px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
}
.owl-carousel.product-slider .owl-carousel .owl-item{
    padding: 0 !important;
}
.owl-carousel.product-slider .owl-item > .inner .panel {
    height: 100%;
    border: none;
}
/*=====================================
 * Mobile Product Widget
 * ===================================*/
.mobile-product-widget {

}
.mobile-product-widget ul.nav-custom {
    padding: 15px 15px 0 15px;
}
.mobile-product-widget ul.nav-custom li.active {
    border-color: #056100;
}
.mobile-product-widget ul.nav-custom li {
    border-bottom: 2px solid #fafafa;
}
.mobile-product-widget ul.nav-custom li.active a {
    color: #056100;
}
.mobile-product-widget ul.nav-custom li a {
    color: gray;
    padding: 0 0 10px 0;
}
.mobile-product-widget .tab-content {
    padding: 20px 0 10px 0;
    background-color: #fcfcfc;
}
.mobile-product-widget .tab-content .tab-pane > .inner {
    overflow-x: auto;
    overflow-y: hidden;
    height: 210px;
    width: auto;
    white-space: nowrap;
    display: flex;
}
.mobile-product-widget .tab-content .tab-pane .product {
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 3px;
    height: 200px;
    background-color: #fff;
}
.mobile-product-widget .tab-content .tab-pane .inner > a {
    margin-left: 15px;
}
.mobile-product-widget .tab-content .tab-pane .inner > a:last-child .product {
    margin-right: 15px;
}
.mobile-product-widget .tab-content .tab-pane .product > .inner {
    width: 140px;
}
.mobile-product-widget .tab-content .tab-pane .product .caption {
    padding: 5px;
    color: gray;
}
.mobile-product-widget .tab-content .tab-pane .product img {
    width: 130px;
    margin: 0 10px;
}
.mobile-product-widget .tab-content .tab-pane .product .caption span {
    text-overflow: ellipsis;
    overflow-x: hidden;
}

/*=====================================
 * Product Panel
 * ===================================*/
.panel.panel-product {
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    background-color: #fcfcfc;
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 2px;
}
.panel.panel-product .panel-body {
    padding: 10px;
}
.panel-product .trigger-info-modal {
    cursor: pointer;
    font-size: 12px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid #fff;
    background-color: #056100;
    color: #fff;
}
.panel-product .trigger-info-modal:hover {
    background-color: #fff;
    color: #056100;
}
.panel.panel-product .title {
    display: block;
    white-space: nowrap;
    font-weight: bold;
    overflow-x: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    color: #056100;
    font-size: 16px;
}
.panel.panel-product a.button {
    margin-top: 0;
}
.panel.panel-product a.button-primary {
    float: right;
}
.panel.panel-product a.button-primary:hover {
    background-color: rgba(5 ,97, 0, .85);
}
.panel.panel-product a.button-primary-outline {
    color: #056100;
}
.panel.panel-product a.button-primary-outline:hover {
    background-color: rgba(5 ,97, 0, .15);
}
.panel.panel-product a.button.button-xs {
    padding: 3px 10px;
}
.panel.panel-product .caption span {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    color: #595959;
}
.panel.panel-product .price {
    color: #056100;
    font-weight: bold;
    margin: 0 0 10px 5px;
    display: block;
}
.panel.panel-product .caption {
    padding: 5px 0;
    margin: 10px 0;
}
.panel.panel-product .caption:empty {
    padding: 0;
    margin: 0;
}
@media(max-width: 768px) {
    .panel.panel-product .caption {
        padding: 5px 0;
        margin: 0 0 5px 0;
    }
}
.panel.panel-product .caption span {
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.panel.panel-product .info-badge {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    position: absolute;
    top: -50px;
    right: -60px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
    background-color: #fafafa;
    color: #056100;
    font-weight: bold;
    height: 100px;
    width: 180px;
    font-size: 14px;
    text-align: center;
    z-index: 1;
}
.panel.panel-product .info-badge span {
    bottom: 5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    line-height: 1;
    overflow-y: hidden;
    white-space: initial;
}
@media(max-width: 768px) {
    .panel.panel-product .title {
        text-align: center;
        font-size: 16px;
    }
}


.border-base {
    border: 1px solid rgba(0, 0, 0, 0.05);
}
/*=====================================
 * Checkout
 * ===================================*/
.cta-divider {
    margin: 40px 0 20px 0;
    height: 20px;
}
#shoppingCart .cta-divider {
    margin: 34px 0 7px 0;
    height: 20px;
}
.cta-divider .line {
    display: block;
    background-color: lightgray;
    height: .05em;
}
.cta-divider .caption {
    background-color: white;
    padding: 0 6px;
    z-index: 2;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -12px;
}
#shoppingCart .cta-divider .caption {
    background-color: #f6f7fc;
}
@media(max-width: 768px) {
    #shoppingCart .cta-divider .caption {
        background-color: white;
    }
}
@media(min-width: 769px) {
    .checkout .inner {
        padding: 0 40px;
    }
}
.checkout .payment-method > label {
    display: block;
}
.checkout .payment-method input[type="radio"]:not(.base-radio) {
    display: none;
}
.checkout .payment-method input[type="radio"] ~ .panel {
    border-radius: 3px;
    border-width: 2px;
    transition: .3s;
}
.checkout .payment-method input[type="radio"] ~ .panel .panel-body {
    font-weight: bold;
}
@media(max-width: 768px) {
    .checkout .payment-method input[type="radio"] ~ .panel .panel-body,
    .checkout .payment-method input[type="radio"] ~ .panel .panel-footer {
        padding: 10px;
    }
}
.checkout .payment-method input[type="radio"] ~ .panel,
.checkout .payment-method input[type="radio"] ~ .panel:after,
.checkout .payment-method input[type="radio"] ~ .panel .panel-body {
    transition: .3s;
}
.checkout .payment-method input[type="radio"]:checked ~ .panel {
    border-color: #056100;
}
.checkout .payment-method input[type="radio"] ~ .panel:after {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    top: 3px;
    left: -20px;
    color: #056100;
    font-size: 4em;
    opacity: 0;
}
.checkout .payment-method input[type="radio"]:checked ~ .panel:after {
    left: 25px;
    opacity: 1;
}
.checkout .payment-method input[type="radio"]:checked ~ .panel .panel-body {
    margin-left: 60px;
}
.checkout .payment-method input[type="radio"]:checked ~ .panel .panel-footer {
    color: darkgreen;
    background-color: rgba(0, 255, 0, .1);
}
@media(max-width: 768px) {
    .checkout .payment-method input[type="radio"] ~ .panel:after {
        font-size: 2em;
    }
    .checkout .payment-method input[type="radio"]:checked ~ .panel:after {
        left: 15px;
    }
    .checkout .payment-method input[type="radio"]:checked ~ .panel .panel-body {
        margin-left: 35px;
    }
}
.checkout .payment-method img {
    float: left;
    height: 50px;
}
@media(max-width: 768px) {
    .checkout .payment-method img {
        height: 20px;
    }
}
.checkout .payment-method img:not(:last-child) {
    margin-right: 5px;
}
.checkout .bestelluebersicht a.edit-button {
    position: absolute;
    bottom: 10px;
    font-size: 10px;
}

#charging-backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    content: ' ';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255, 1);
    z-index: 1000;
}

#charging-backdrop + .section {
    z-index: 1100;
    position: absolute;
    width: 100%;
}


/*=====================================
 * Shopping Cart
 * ===================================*/
table.shopping-cart img {
    max-height: 60px;
    width: auto;
    margin: 0 auto;
}
@media(max-width: 768px) {
    table.shopping-cart img {
        min-width: 30px;
    }
}
#shoppingCart .container-cta {
    float: right;
    width: 250px;
    position: relative;
}
@media(max-width: 768px) {
    #shoppingCart .container-cta {
        display: block;
        float: none;
        width: 100%;
    }
}

#shoppingCart .table-responsive {
    padding: 10px;
}
@media(max-width: 768px) {
    #shoppingCart .table-responsive {
        border: none;
    }
    #shoppingCart .row {
        padding: 0 10px;
    }
}



/*=====================================
 * Tables
 * ===================================*/
@media(max-width: 768px) {
    .table-responsive {
        border: none;
    }
}


/*=====================================
 * Table of Artikles with Calculation
 * ===================================*/
table.pretty-calculation {
    overflow: hidden;
}
.pretty-calculation tbody tr.pfosten td {
    border-color: transparent;
}
table.pretty-calculation tbody table tr td:first-child {
    width: 160px;
    min-width: 160px;
}
table.pretty-calculation tr td:nth-child(3) {
    width: 160px;
    min-width: 160px;
}
@media(max-width: 768px) {
    table.pretty-calculation tr td:nth-child(3) {
        width: 100px;
        min-width: 100px;
    }
    .pretty-calculation tbody tr td img {
        padding-right: 10px;
    }
    table.pretty-calculation tbody table tr td:first-child {
        min-width: 120px;
    }
    table.pretty-calculation tbody table tr td:nth-child(2) {
        max-width: 80px;
    }
}
.pretty-calculation tbody tr td.math-sign {
    width: 20px;
    padding-right: 0;
}


/*=====================================
 * Modals
 * ===================================*/
.modal .modal-dialog {
    margin-top: 60px;
}
@media(max-width: 768px) {
    .modal .modal-dialog {
        margin-top: 10px;
    }
}


.modal-backdrop {
    background-color: rgba(0,0,0,1);
}

.modal .modal-dialog .modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border: none;
    max-height: 80vh;
    overflow-y: auto;
}
@media(max-width: 768px) {
    .modal .modal-dialog .modal-content {
        max-height: 89vh;
    }
}

.modal .modal-dialog .modal-header {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.03);
    color: rgba(0,0,0,0.5);
    padding: 20px;
}

/*=====================================
 * Marquee
 * ===================================*/
marquee ul {
    width: 100%;
    font-weight: bold;
    text-transform: capitalize;
}
marquee ul li {
    display: inline-block;
    padding: 10px 500px;
}
marquee ul li:first-child {
    padding-left: 200px;
}


/*=====================================
 * Form Control
 * ===================================*/
.form-control:focus {
    box-shadow: none;
    border-color: inherit;
}

.form-control.form-control-xs {
    height: auto;
    font-size: 14px;
    line-height: 28px;
}
select.form-control.form-control-xs + .bootstrap-select button {
    height: auto;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 19px;
}
select.form-control.form-control-xs + .bootstrap-select button .caret {
    right: 18px;
    top: 19px;
}

/*=====================================
 * Home Hightlight Slider
 * ===================================*/
section.home--highlights {
    padding-top: 30px;
    margin-bottom: -70px;
}
.home--highlights .owl-carousel {
    z-index: 2;
}
.home--highlights .owl-carousel .owl-dots {
    margin-top: 0;
}
.owl-carousel.owl-nav-on-image.owl-carousel--dots .owl-dot,
.home--highlights .owl-carousel .owl-dot {
    background-color: rgba(255, 255, 255, 0.5);
}
.owl-carousel.owl-nav-on-image.owl-carousel--dots .owl-dot.active,
.home--highlights .owl-carousel .owl-dot.active {
    background-color: rgba(255, 255, 255, .8);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}
@media(min-width: 769px) {
    .owl-carousel.owl-nav-on-image.owl-carousel--dots .owl-dot {
        width: 15px;
        height: 15px;
    }
}
@media(max-width: 768px) {
    .owl-carousel.owl-nav-on-image.owl-carousel--dots .owl-dots {
        display: none;
    }
}


/*=====================================
 * Home Main Slider
 * ===================================*/
.home-main-slider .owl-item {
    max-height: 450px;
    width: 100%;
}
.home-main-slider .owl-item img {
    width: 100%;
}
@media(min-width:1200px) {
    .home-main-slider .owl-item img {
        margin-top: -100px;
    }
}
@media(min-width:1600px) {
    .home-main-slider .owl-item img {
        margin-top: -250px;
    }
}
.home-main-slider .owl-nav .owl-prev,
.home-main-slider .owl-nav .owl-next {
    background-color: rgba(255, 255, 255, .5);
    padding: 5px;
    font-size: 50px;
}
@media(max-width:767px){
    .home-main-slider {
        padding: 0;
    }
    .home-main-slider .owl-nav {
        display: none;
    }
}
.home-main-slider .caption {
    position: absolute;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
    font-weight: bold;
    font-size: 2em;
    background-color: rgba(0, 0, 0, .5);
    height: 100%;
    width: auto;
    padding: 50px 10px 10px;
}
.home-main-slider .caption .description {
    display: inline-block;
    max-width: 400px;
}
@media(max-width: 768px) {
    .home-main-slider .caption {
        font-size: 1.5em;
        padding: 10px;
        width: 100%;
        left: 0;
        height: auto;
        bottom: 0;
    }
}
@media(min-width: 769px) {
    .home-main-slider .caption {
        background-color: rgba(5, 97, 0, 0.8);
        box-shadow: 5px 5px 3px -1px rgba(0,0,0,0.35);;
    }
}
@media(max-width:1199px) {
    .home-main-slider .caption {
    }
}
@media(min-width:1200px) {
    .home-main-slider .caption {
        left: 0;
    }
}
@media(min-width:1600px) {
    .home-main-slider .caption {
        left: 16.5%;
    }
}
.home-main-slider .caption .table tr th,
.home-main-slider .caption .table tr td {
    border: 0;
    padding: 2px 0;
}
.home-main-slider .caption .table tr th:first-child,
.home-main-slider .caption .table tr td:first-child {
    max-width: 140px;
    width: 140px;
}


/*=====================================
 * Grid
 * ===================================*/
.mb-30[class*="cell-"] {
    margin-bottom: 30px;
}


/*=====================================
 * Modal
 * ===================================*/
.modal.modal-info .modal-body {
    text-align: justify;
}

/*=====================================
 * Configurator
 * ===================================*/
#configurator .live-overview table.table tr td:nth-child(1) {
    white-space: nowrap;
    width: 150px;
}
#configurator .button.option:not([data-active="true"]) {
    background-color: #fff;
    color: #2b542c;
}
#configurator .button.option[data-active="true"] {
    pointer-events: none;
}
#configurator .alert.quickHint {
    margin-top: 20px;
}
@media(max-width:767px){
    #configurator .alert.quickHint {
        font-size: 12px;
    }
}
#configurator .panel-option.option .panel {
    border-radius: 3px;
    transition: .3s;
    margin-top: 0 !important;
    border-width: 2px;
}
#configurator .panel-option.option ~ [data-lightgallery] {
    position: absolute;
    top: 3px;
    right: 16px;
}
#configurator .panel-option.option ~ [data-lightgallery] i {
    font-size: 16px;
}
#configurator .panel-option.option.option-Farbe p {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#configurator .option-wrapper {
    margin: 0;
}
#configurator .option-wrapper > .inner {
    margin: 0 10px 10px 0;
}
#configurator .panel-option.option .panel .panel-body p {
    padding: 0 10px;
}
@media(max-width:991px){
    #configurator .configurator-options > .shell > .range > .cell-xs-12:first-child,
    #configurator .configurator-options .configurator-options--wrapper {
        padding-right: 0;
    }
    #configurator .option-wrapper > .inner {
        margin: 0 0 10px 0;
    }
    #configurator .panel-option.option .panel .panel-body p {
        padding: 0;
    }
}
@media(max-width:767px){
    #configurator .configurator-options .configurator-options--wrapper {
        padding-right: 15px !important;
    }
}
#configurator .panel-option.option .panel .panel-body {
    padding: 3px;
}
#configurator .panel-option.option[data-active="false"] .panel {
    border-color: lightgray;
    color: gray;
}
#configurator .panel-option.option[data-active="true"] .panel {
    border-color: rgba(5, 97, 0, .8);
    color: #056100;
}
#configurator input.form-control,
#configurator .select2-selection__rendered {
    color: #2b542c;
    font-weight: bold;
}
#configurator .specification-image {
    max-height: 100px;
    width: auto;
    margin: 0 auto;
}
#configurator .product-image {
    max-height: 250px;
    width: auto;
    margin: 0 auto;
}
@media(max-width: 768px) {
    #configurator .product-image {
        max-height: 200px;
    }
}


#configurator .head-affix .details {
    display: block;
    font-size: 14px;
    color: gray;
}

#configurator .head-affix .details span:not(:first-child):before {
    content: '-';
    margin: 0 5px;
}

@media(max-width: 991px) {}

@media(min-width: 992px) {
    #configurator .head-affix .details {
        position: absolute;
        margin: 0 auto;
        width: 100%;
        top: 5px;
    }
}

@media(max-width: 991px) {
    #configurator .marqueeWrapper .marquee li {
        padding: 5px 250px;
    }
    #configurator .shell {
        max-width: 100%;
    }
}

#configurator .breadcrumb-arrow {
    margin-bottom: 20px;
}
@media(max-width: 991px) {
    #configurator .breadcrumb-arrow {
        margin: 0 15px;
    }
}
@media(max-width: 991px) {
    .breadcrumbs-custom {
        margin: 10px 0;
        padding: 15px 0 0;
    }
}

/** Grid */

@media(max-width: 991px) {
    #configurator .grid-right {
        /*margin-top: 30px;*/
    }
    #configurator .paper {
        margin-top: 20px;
    }
    #configurator .paper.margin-none {
        margin-top: 0;
    }
    #configurator [class*='cell-'] {
        margin-top: 0;
    }
}
@media(max-width: 768px) {
    #configurator .grid-center,
    #configurator .grid-left {
        /*margin-top: 30px;*/
    }
}

@media(min-width: 769px) {
    .custom-panel {
        padding: 0;
    }
}



/*=====================================
 * Alerts
 * ===================================*/

.alert {
    border-radius: 0;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.15);
    border: none;
}
.alert a {
    color: white;
    border-bottom: 1px solid transparent;
    transition: .2s;
}
.alert a:hover {
    color: white;
}
.alert.alert-warning a,
.alert.alert-warning a:hover {
    color: #8a6d3b;
}
.alert a.text-primary,
.alert a.text-primary:hover {
    color: #056100;
}
.alert a .fa-angle-right {
    padding-left: 0;
    transition: .2s;
    vertical-align: text-top;
}
.alert a:hover .fa-angle-right {
    padding-left: 7.5px;
}
.alert-primary {
    background-color: #056100;
    color: white;
}


/*=====================================
 * Page Product-Details
 * ===================================*/
.page-product-details .shell-title h1 {
    background-color: rgba(255, 255, 255, .6);
    color: #056100;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/*=====================================
 * Gallery Link
 * ===================================*/
.gallery-link {
    position: relative;
}
.gallery-link-inner {
}
.gallery-link-inner .image-wrap {
    background-color: #fff;
}
.gallery-link-inner .caption {
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: rgba(255, 255, 255, .6);
    font-weight: 700;
    transition: .2s;
    opacity: 0;
    visibility: hidden;
}
.gallery-link-inner:hover .caption {
    opacity: 1;
    visibility: visible;
}
.gallery-link-inner .caption-inner {
    position: absolute;
    color: #056100 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/*=====================================
 * Configurator Tabs / Tabs Slice
 * ===================================*/
.tabs-slice.tabs-custom .nav-custom-tabs li,
#configurator .tabs-custom .nav-custom-tabs li {
    border-bottom: 1px solid;
    border-color: lightgray;
    margin: 0;
}
.tabs-slice.tabs-custom .nav-custom-tabs,
#configurator .tabs-custom .nav-custom-tabs {
    display: flex;
    flex-direction: row;
}
.tabs-slice.tabs-custom .nav-custom-tabs li,
#configurator .tabs-custom .nav-custom-tabs li {
    flex-grow: 1;
}
.tabs-slice.tabs-custom .nav-custom-tabs.num-tabs-1 li,
#configurator .tabs-custom .nav-custom-tabs.num-tabs-1 li {
    max-width: 100%;
}
.tabs-slice.tabs-custom .nav-custom-tabs.num-tabs-2 li,
#configurator .tabs-custom .nav-custom-tabs.num-tabs-2 li {
    max-width: 50%;
}
.tabs-slice.tabs-custom .nav-custom-tabs.num-tabs-3 li,
#configurator .tabs-custom .nav-custom-tabs.num-tabs-3 li {
    max-width: 33%;
}
.tabs-slice.tabs-custom .nav-custom-tabs li a,
#configurator .tabs-custom .nav-custom-tabs li a {
    border-radius: 0;
    border: none;
    color: gray;
    font-size: 1.5rem;
    background-color: transparent;
    padding: 10px 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabs-slice.tabs-custom .nav-custom-tabs {
    overflow-x: auto;
}
.tabs-slice.tabs-custom .nav-custom-tabs li a {
    font-size: 1.2rem;
    padding: 5px 9px;
    white-space: nowrap;
}
@media(max-width: 768px) {
    #configurator .tabs-custom .nav-custom-tabs li {
    }
    #configurator .tabs-custom .nav-custom-tabs li a {
        font-size: 1.2rem;
    }
    .tabs-slice.tabs-custom .nav-custom-tabs li a {
        font-size: 1.4rem;
    }
}
.tabs-slice.tabs-custom .nav-custom-tabs li.active,
.tabs-slice.tabs-custom .nav-custom-tabs li.hover,
#configurator .tabs-custom .nav-custom-tabs li.active,
#configurator .tabs-custom .nav-custom-tabs li.hover {
    border-color: #056100;
    border-bottom-width: 2px;
}
.tabs-slice.tabs-custom .nav-custom-tabs li.active a,
.tabs-slice.tabs-custom .nav-custom-tabs li:hover a,
#configurator .tabs-custom .nav-custom-tabs li.active a,
#configurator .tabs-custom .nav-custom-tabs li:hover a {
    color: #056100;
    background-color: inherit;
}


/*=====================================
 * Modal-Info
 * ===================================*/
body.modal-open { padding-right: 0 !important }
.modal-open {
    overflow: auto;
}
.modal.modal-info .modal-dialog .modal-header {
    font-size: 1.2em;
    background-color: white;
    color: #056100;
}
.modal.modal-info .modal-dialog .modal-header i {
    margin-right: 10px;
}

.modal.modal-info .modal-dialog .modal-body {
    padding: 30px 20px;
}

.modal.modal-info .modal-dialog .modal-footer {
    padding: 0;
}

.modal.modal-info .modal-dialog .modal-footer .btn {
    display: block;
    width: 100%;
    border: none;
    padding: 20px 5px;
    color: gray;
    font-size: 1.2em;
    transition: .2s;
}

.modal.modal-info .modal-dialog .modal-footer .btn:hover {
    color: #056100;
    background-color: rgba(0, 0, 0, .05);
}


/*=====================================
 * Owl Carousel
 * ===================================*/
.product-carousel .owl-item > .owl-item {
    cursor: pointer;
    margin: 0;
    transform: scale(1);
    transition: 0.4s ease;
    width: 96%;
    left: 2%;
}
.owl-nav-on-image .owl-prev,
.owl-nav-on-image .owl-next {
    color: #fefefe;
    transition: text-shadow 0s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
[data-nav="false"] .owl-nav,
.owl-nav-on-image .owl-prev.disabled,
.owl-nav-on-image .owl-next.disabled {
    display: none;
}
.product-carousel .owl-stage-outer {
    padding: 90px 0 70px 0;
}
@media(max-width: 768px) {
    .product-carousel .owl-stage-outer {
        padding: 60px 0;
    }
}
@media (min-width: 576px) {
    .product-carousel .owl-stage-outer {
        height: 250px;
    }
}
@media (min-width: 768px) {
    .product-carousel .owl-stage-outer {
        height: 350px;
    }
}
@media (min-width: 992px) {
    .product-carousel .owl-stage-outer {
        height: 350px;
    }
}
@media (min-width: 1200px) {
    .product-carousel .owl-stage-outer {
        height: 450px;
    }
}

.owl-thumbs {
    display: block;
    padding: 3px 0;
}
@media (max-width: 767px) {
    .owl-thumbs {
        overflow-y: hidden;
        overflow-x: auto;
        white-space: nowrap;
    }
}
.owl-thumb-item {
    border: 1px solid transparent;
    opacity: .6;
    border-radius: 1px;
    display: inline-block;
}
.owl-thumb-item.active {
    border-color: #056100;
    opacity: 1;
}
.owl-thumb-item img {
    height: 50px;
}

.product-carousel .owl-item.center > .owl-item {
    cursor: auto;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
    z-index: +2;
    width: 160%;
    left: -30%;
    margin-top: -30%;
}
/* owl-items, left and right of center item */
.product-carousel .owl-item:not(.center) + .owl-item.active + .owl-item.active:not(.center) > .owl-item,
.product-carousel .owl-item.center + .owl-item.active > .owl-item {
    cursor: auto;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
    z-index: +1;
    width: 120%;
    left: -10%;
    margin-top: -10%;
}
@media(max-width: 768px) {
    .product-carousel .owl-item > .owl-item .button {
        padding: 1px 3px;
        font-size: 9px;
    }
    .product-carousel .owl-item.center > .owl-item {
        transform: scale(1.15);
    }
}
.product-carousel .owl-item.center .button-primary-outline {
    color: #fff;
    background-color: #056100;
}
.owl-carousel.slim .owl-dots {
    margin: 0;
}
.owl-carousel.slim .owl-dots.disabled {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    display: block;
}

@media(min-width: 992px) {
    .product-carousel.owl-carousel-1 .owl-dots .owl-dot {
        display: inline-block;
    }
}
/*=====================================
 * Trust In Complete
 * ===================================*/
.section--trust-in-competence img {
    max-height: 80px;
    width: auto;
    margin: 0 10px 0 0;
}
@media(max-width: 648px) {
    .section--trust-in-competence img {
        max-height: 50px;
    }
}



/*=====================================
 * Breadcrumb
 * ===================================*/
.section.section-breadcrumbs .breadcrumbs-custom {
    background-color: #fff;
}

@media(min-width: 992px) {
    .section.section-breadcrumbs {
        display: none;
    }
}

/*=====================================
 * Breadcrumb Arrow
 * ===================================*/
.breadcrumb-arrow {
    list-style:none;
    overflow: hidden;
    background-color: #ECECEC;
    padding: 0;
}

.breadcrumb-arrow li {
    text-decoration: none;
    padding: 10px 0 10px 20px;
    color: #056100;
    font-weight: bold;
    position: relative;
    display: block;
    float: left;
    text-align: center;
    height: 45px;
    background-color: #fcfcfc;
}

@media(max-width: 991px) {
    .breadcrumb-arrow .visible-sm {
        display: inline !important;
        margin-left: 2px;
    }
}
@media(max-width: 768px) {
    .breadcrumb-arrow li {
        padding: 7px 0 7px 20px;
        height: 36px;
        font-size: 13px;
    }
    .breadcrumb-arrow .visible-sm {
        margin-left: 0;
    }
}

.breadcrumb-arrow li.active {
    background-color: #056100;
}

.breadcrumb-arrow li.active a {
    color: #fff;
}

.breadcrumb-arrow li.active:after {
    border-left: 20px solid #056100;
}

.breadcrumb-arrow li:after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 100%;
    z-index: 2;
    border-left: 20px solid #fcfcfc;
    margin-left: -3px;
}

.breadcrumb-arrow li:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 20px solid #ECECEC;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}


/*=====================================
 * Bootstrap overwrites
 * ===================================*/

@media (max-width: 767px) {
    .visible-xs.display-inline {
        display: inline !important;
    }
}

/*=====================================
 * Popover
 * ===================================*/
.popover {
    border: 1px solid lightgrey;
    box-shadow:0 6px 16px 0 rgba(126,126,126,.47)
}
.popover-title {
    font-weight: bold;
    color: #056100;
    background-color: white;
}


/*=====================================
 * Head Affix
 * ===================================*/

.head-affix {
    padding: 20px 0 0;
    transition: padding-top .5s;
    width: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}
.head-affix .divider{
    background-color: transparent;
}
@media(max-width: 991px) {
    .head-affix {
        position: fixed;
        top: 50px;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
        padding: 10px 0 0;
    }
    .head-affix + section.breadcrumb-arrow {
        margin-top: 112px;
    }
    .head-affix + section.section-breadcrumbs {
        margin-top: 10px;
    }
}
@media(min-width: 992px) {
    .head-affix.affix {
        top: 67px; /* height of menu-bar */
        text-align: center;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
        padding-top: 20px;
    }
    html.mobile .head-affix.affix {
        top: 48px; /* height of menu-bar */
    }
    .head-affix.affix + section {
        margin-top: 53px;
    }
    .head-affix.affix ~ .marqueeWrapper {
        margin-top: 56px;
    }
    .head-affix.affix + section.breadcrumb-arrow {
        margin-top: 123px;
    }
}
.head-affix.affix h5 {
    text-align: center;
}
.head-affix .right-options {
    position: absolute;
    right: 10px;
    top: 0;
    margin-top: 12px;
}
.head-affix.affix + div {
    margin-top: 63px !important;
}

.head-affix .right-options .button {
    padding: 7px 11px;
    margin-top: 0;
    box-shadow: none;
}


/*=====================================
 * Form Elements
 * ===================================*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


/*=====================================
 * Form Input File
 * ===================================*/
.form-wrap .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.75rem;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}


/* style 3 */

.inputfile-3 + label {
    background-color: #056100;
    color: #fff;
    transition: .2s;
    border-radius: 3px;
}

.inputfile-3:focus + label,
.inputfile-3.has-focus + label,
.inputfile-3 + label:hover {
    background-color: #2b542c;
}

/*=====================================
 * Collapse
 * ===================================*/
.collapse,
[data-toggle="collapse"] .fa-angle-down,
[data-toggle="collapse"] .fa-caret-down {
    transition: .5s;
    transform: rotate(0deg);
}
[data-toggle="collapse"][aria-expanded="true"] .fa-angle-down,
[data-toggle="collapse"][aria-expanded="true"] .fa-caret-down {
    transform: rotate(180deg);
}


/*=====================================
 * Utilities
 * ===================================*/

.pointer:hover {
    cursor: pointer;
}

i.fa {
    font-style: normal;
}

.pointer:hover {
    cursor: pointer;
}

.bold {
    font-weight: bold;
}

.font-weight-normal {
    font-weight: normal;
}

.no-pointer-events {
    pointer-events: none;
}

.clr {
    clear: both;
}

@media(max-width: 768px) {
    .btn-sm {
        font-size: 10px;
    }
}

.btn {
    font-family: Montserrat, "Times New Roman", Times, serif;
    font-weight: 700;
}


/*=====================================
 * Vertical Align
 * ===================================*/
.vertical-align-baseline {
    vertical-align: baseline;
}
.vertical-align-bottom {
    vertical-align: bottom;
}
.vertical-align-bottom--important {
    vertical-align: bottom !important;
}


/*=====================================
 * Text Align
 * ===================================*/
@media(max-width: 768px) {
    .text-justify-xs {
        text-align: justify;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-right-xs {
        text-align: right;
    }
    .text-center-xs {
        text-align: center;
    }
}
.text-ellipsis {
    overflow-x: hidden;
    text-overflow: ellipsis;
}


/*=====================================
 * Oveflow
 * ===================================*/
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}



/*=====================================
 * Images
 * ===================================*/

.img-center {
    margin: 0 auto;
}

.img-150 {
    max-height: 150px;
    width: auto;
    margin: 0 auto;
}

.img-80 {
    max-height: 80px;
    width: auto;
    margin: 0 auto;
}

.img-50 {
    max-height: 50px;
    width: auto;
    margin: 0 auto;
}

@media(max-width: 768px) {
    .img-150 {
        max-height: 120px;
    }
}



/*=====================================
 * Links
 * ===================================*/
a.link-title {
    color: #3e4249;
    margin-left: -4px;
}
a.link-title:hover {
    color: #056100;
}
a.link-title:hover:before {
    color: #056100;
    margin-left: -4px;
}
a.link-title:before {
    content: "\f238";
    font-family: "Material Design Icons";
    font-size: inherit;
    margin-left: -40px;
    color: transparent;
    transition: .25s;
    pointer-events: none;
}
a:hover {
    color: #056100;
}

a.link-thumbnail:hover,
a.link-thumbnail:focus,
a.link-thumbnail:active {
    background-color: inherit;
}

a.link-thumbnail .button.no-button {
    pointer-events: none;
}
a.link-thumbnail .button.no-button:hover {
    cursor: pointer;
}


/*=====================================
 * White Space
 * ===================================*/
.white-space-nowrap {
    white-space: nowrap;
}
.white-space-pre-line {
    white-space: pre-line;
}
.white-space-pre {
    white-space: pre;
}
.white-space-pre-wrap {
    white-space: pre-wrap;
}


/*=====================================
 * Height
 * ===================================*/
.height-180px {
    height: 180px;
}
.height-200px {
    height: 200px;
}


/*=====================================
 * Width
 * ===================================*/
.width-25pc {
    width: 25%;
}
.width-33pc {
    width: 33.333333333333%;
}
.width-50pc {
    width: 50%;
}
.width-75pc {
    width: 75%;
}
.width-100pc {
    width: 100%;
}

/*=====================================
 * Text Colors
 * ===================================*/

.color-inherit {
    color: inherit;
}

/*=====================================
 * Background Colors
 * ===================================*/

.bg-transparent {
    background-color: transparent;
}
.bg-light-gray {
    background-color: rgba(0, 0, 0, .1);
}
.bg-primary-light {
    background-color: rgba(5, 97, 0, .05);
}


/*=====================================
 * Position
 * ===================================*/
.position-absolute {
    position: absolute;
}
.position-relative {
    position: relative;
}

/*=====================================
 * Flex
 * ===================================*/
.flex-direction-column {
    flex-direction: column;
}

/*=====================================
 * Display
 * ===================================*/
.display-block {
    display: block;
}
.display-inline-block {
    display: inline-block;
}
.display-inline {
    display: inline;
}
.display-flex {
    display: flex;
}
@media(max-width: 991px) {
    .display-sm-block {
        display: block;
    }
}
@media(max-width: 768px) {
    .display-xs-block {
        display: block;
    }
}
/*=====================================
 * Text Colors
 * ===================================*/

.text-red {
    color: red;
}

.text-green {
    color: #309B2A;
}

.text-white {
    color: #fff;
}

.text-gray {
    color: #727477;
}

.text-white-important {
    color: #fff !important;
}


/*=====================================
 * Stripe Payment
 * ===================================*/
/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    background-color: white;
    height: 40px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/*=====================================
 * Grid
 * ===================================*/
@media(min-width: 992px) {
    .grid-left {
        padding-left: 0;
    }
    .grid-right {
        padding-right: 0;
    }
    .grid-center {
        padding: 0;
    }
}

/*=====================================
 * Images
 * ===================================*/
.img-center,
.img-responsive.img-center {
    margin: 0 auto;
}

/*=====================================
 * Bootstrap Table
 * ===================================*/
.table thead tr th {
    border-bottom: 1px solid lightgray;
}
.table.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,.05);
}
.table tbody.tbody-lg > tr > td {
    padding: 20px 0;
}

/*=====================================
 * Border
 * ===================================*/
.border-none {
    border: none;
}
.border-none-important {
    border: none !important;
}
table.border-none tr td {
    border: none;
}
.border-transparent {
    border-color: transparent;
}
.border-top-none {
    border-top: none;
}
@media(max-width: 768px) {
    .no-border-xs {
        border: none;
    }
}
.border-lighter {
    border-color: rgba(0,0,0,.08);
}
.border-bottom {
    border-bottom: 1px solid lightgray;
}
.border-top {
    border-top: 1px solid lightgray;
}
.border-left {
    border-left: 1px solid lightgray;
}
.border-right {
    border-right: 1px solid lightgray;
}

/*=====================================
 * Padding
 * ===================================*/
@media(max-width: 768px) {
    .padding-xs-0 {
        padding: 0 !important;
    }
}
@media(min-width: 769px) {
    .padding-sm-0 {
        padding: 0 !important;
    }
}
.padding-0 {
    padding: 0;
}
.padding-5 {
    padding: 5px;
}
.padding-0-important {
    padding: 0 !important;
}
.padding-8 {
    padding: 8px;
}
.padding-10 {
    padding: 10px;
}
.padding-15 {
    padding: 15px;
}
.padding-20 {
    padding: 20px;
}
.padding-40 {
    padding: 40px;
}
.padding-60 {
    padding: 60px;
}
.pb-0 {
    padding-bottom: 0;
}
.pb-5 {
    padding-bottom: 5px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-40 {
    padding-bottom: 40px;
}
.pb-60 {
    padding-bottom: 60px;
}
.pb-90 {
    padding-bottom: 90px;
}
@media(max-width: 768px) {
    .pb-xs-0 {
        padding-bottom: 0;
    }
    .pb-xs-20 {
        padding-bottom: 20px;
    }
}

.pt-0 {
    padding-top: 0;
}
.pt-4 {
    padding-top: 4px;
}
.pt-5 {
    padding-top: 5px;
}
.pt-8 {
    padding-top: 8px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-25 {
    padding-top: 25px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-40 {
    padding-top: 40px;
}
.pt-60 {
    padding-top: 60px;
}
.pt-80 {
    padding-top: 80px;
}

@media(max-width: 768px) {
    .padding-20-xs {
        padding: 20px;
    }
    .padding-40-xs {
        padding: 40px;
    }
    .pt-xs-0 {
        padding-top: 0;
    }
    .pt-xs-20 {
        padding-top: 20px;
    }
    .pt-xs-40 {
        padding-top: 40px;
    }
}

.pl-10 {
    padding-left: 10px;
}
.pl-20 {
    padding-left: 20px;
}
.pl-27 {
    padding-left: 27px;
}
.pl-40 {
    padding-left: 40px;
}
.pl-60 {
    padding-left: 60px;
}

.pr-10 {
    padding-right: 10px;
}
.pr-20 {
    padding-right: 20px;
}
.pr-40 {
    padding-right: 40px;
}
.pr-60 {
    padding-right: 60px;
}


.p-v-10 {
    padding: 10px 0;
}
.p-h-10 {
    padding: 0 10px;
}

/*=====================================
 * Margin
 * ===================================*/

.margin-none {
    margin: 0;
}
@media(max-width: 768px) {
    .mb-xs-0 {
        margin-bottom: 0 !important;
    }
    .mt-xs-0 {
        margin-top: 0 !important;
    }
    .xs-mb-20 {
        margin-bottom: 20px;
    }
    .margin-xs-0 {
        margin: 0;
    }
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-15 {
    margin-left: 15px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-25 {
    margin-left: 25px;
}

.mr-3 {
    margin-right: 3px;
}
.mr-5 {
    margin-right: 5px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}
.mr-25 {
    margin-right: 25px;
}

.mt-0 {
    margin-top: 0;
}
.mt-3 {
    margin-top: 3px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-30 {
    margin-top: 30px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-80 {
    margin-top: 80px;
}

.mb-5 {
    margin-bottom: 5px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-20-important {
    margin-bottom: 20px !important;
}
.mb-40 {
    margin-bottom: 40px;
}


/*=====================================
 * Box Shadow
 * ===================================*/
.shadow-none-important {
    box-shadow: none !important;
}

.shadow-top {
    box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.5);
}

.shadow-top-light {
    box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.3);
}

.shadow-right {
    box-shadow: 5px 0 5px -5px rgba(0,0,0,0.5);
}

.shadow-right-light {
    box-shadow: 5px 0 5px -5px rgba(0,0,0,0.3);
}

.shadow-bottom {
    box-shadow: 0 5px 5px -5px rgba(0,0,0,0.5);
}

.shadow-bottom-light {
    box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
}

.shadow-left {
    box-shadow: -5px 0 5px -5px rgba(0,0,0,0.5);
}

.shadow-left-light {
    box-shadow: -5px 0 5px -5px rgba(0,0,0,0.3);
}

.shadow-all {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.shadow-all-light {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/*=====================================
 * Font Size
 * ===================================*/

@media(min-width: 769px) {
    .text-xxs,
    a.text-xxs {
        font-size: 10px;
    }
    .text-xs,
    a.text-xs {
        font-size: 11px;
    }
    .text-s,
    a.text-s {
        font-size: 12px;
    }
    .text-m,
    a.text-m {
        font-size: 14px;
    }
    .text-l,
    a.text-l {
        font-size: 16px;
    }
    .text-xl,
    a.text-xl,
    .box-heading .title {
        font-size: 20px;
    }

    .text-xxl {
        font-size: 28px;
    }

    .text-xxxl {
        font-size: 44px;
    }
}

@media(max-width: 768px) {
    .text-xxs,
    a.text-xxs {
        font-size: 8px;
    }
    .text-xs,
    a.text-xs {
        font-size: 10px;
    }
    .text-s,
    a.text-s {
        font-size: 11px;
    }
    .text-m,
    a.text-m {
        font-size: 12px;
    }
    .text-l,
    a.text-l {
        font-size: 14px;
    }
    .text-xl,
    a.text-xl,
    .box-heading .title {
        font-size: 18px;
    }

    .text-xxl{
        font-size: 24px;
    }

    .text-xxxl {
        font-size: 28px;
    }
}


/*=====================================
 * Hamburger Menu
 * ===================================*/
.hamburger-menu {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 15;
    top: 4px;
    right: 10px;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 50%;
    background-color: #056100;
}
.hamburger-menu .bg-primary {
    background-color: #fff;
}
.hamburger-menu.right {
    /*right: 20px;*/
}
.hamburger-menu.left {
    left: 20px;
}
.hamburger-menu span {
    display: block;
    border-radius: 2px;
    transition: 0.3s;
}
.hamburger-menu .hamburger {
    position: absolute;
    height: 100%;
    width: 100%;
}
.hamburger-menu .hamburger span {
    width: 50%;
    height: 5%;
    position: relative;
    top: 24%;
    left: 25%;
    margin: 10% 0;
}
.hamburger-menu .hamburger span:nth-child(1) {
    transition-delay: 0.5s;
}
.hamburger-menu .hamburger span:nth-child(2) {
    transition-delay: 0.625s;
}
.hamburger-menu .hamburger span:nth-child(3) {
    transition-delay: 0.75s;
}
.hamburger-menu .cross {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(45deg);
}
@media(max-width: 768px) {
    .hamburger-menu .cross {
        width: 100%;
        height: 100%;
    }
}
.hamburger-menu .cross span:nth-child(1) {
    height: 0;
    width: 5%;
    position: absolute;
    top: 25%;
    left: 48%;
    transition-delay: 0s;
}
.hamburger-menu .cross span:nth-child(2) {
    width: 0;
    height: 5%;
    position: absolute;
    left: 25%;
    top: 48%;
    transition-delay: 0.25s;
}
.hamburger-menu.triggered .hamburger span {
    width: 0;
}
.hamburger-menu.triggered .hamburger span:nth-child(1) {
    transition-delay: 0s;
}
.hamburger-menu.triggered .hamburger span:nth-child(2) {
    transition-delay: 0.125s;
}
.hamburger-menu.triggered .hamburger span:nth-child(3) {
    transition-delay: 0.25s;
}
.hamburger-menu.triggered .cross span:nth-child(1) {
    height: 50%;
    transition-delay: 0.625s;
}
.hamburger-menu.triggered .cross span:nth-child(2) {
    width: 50%;
    transition-delay: 0.375s;
}


/*=====================================
 * Main Menu
 * ===================================*/
.main-menu {
    display: flex;
}
.main-menu .rd-navbar-outer {
    flex-direction: row;
    width: 100%;
}

/*=====================================
 * Sidenav Toggler
 * ===================================*/
.sidenav-toggler {
    width: auto;
    font-weight: bold;
    transition: 3s !important;
}
a.sidenav-toggler:hover {
    color: #056100;
}
.sidenav-toggler:hover {
    color: inherit;
}
@media (max-width: 991px) {
    .sidenav-toggler {
        right: 10px;
        position: fixed;
        top: -10px;
        background-color: transparent;
    }
}


/*=====================================
 * Sidenav
 * ===================================*/
.sidenav {
    position: fixed;
    right: calc(var(--sidenav-width) * (-1) - 5px); /* 5px box-shadow */
    bottom: 0;
    left: auto;
    transition: 0.5s;
    width: var(--sidenav-width);
    z-index: 8;
    background-color: #ffffff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
    height: calc(100% - 100px);
    top: 100px;
}

@media (min-width: 992px) {
    .sidenav {
        font-size: 16px;
        height: calc(100% - 50px);
        top: 50px;
    }
}
@media (max-width: 991px) {
    .sidenav {
        height: calc(100% - 50px);
        top: 50px;
        padding: 0;
        font-size: 14px;
    }
}
@media (min-width: 480px) {
    .sidenav {
        overflow-y: hidden;
    }
    .sidenav:hover {
        overflow-y: auto;
    }
}
@media (max-width: 991px) {
    .sidenav {
        /*width: 100%;*/
        /*right: calc(-100% - 5px);*/
        overflow-y: auto;
    }
}
.sidenav .parent {
    font-size: 2em;
    padding: 0;
}
.sidenav .child {
    font-size: 1.5em;
}
@media (max-width: 767px) {
    body.open-side-nav {
        overflow-y: hidden;
    }
}
body.open-side-nav .sidenav {
    right: 0;
}
.sidenav .footer {
    text-align: center;
    position: fixed;
    width: 300px;
    bottom: 0;
    padding: 15px;
    box-shadow: 0 -5px 11px -7px rgba(0,0,0,0.3);
    z-index: +2;
}
.sidenav [data-navigation-level="1"] {
    width: var(--sidenav-width);
    margin-bottom: 50px;
    float: left;
}
.sidenav [data-navigation-level="2"] {
    width: var(--sidenav-width);
    float: left;
    max-height: 100%;
}
.sidenav [data-navigation-level="3"] {
    width: var(--sidenav-width);
    float: left;
    max-height: 100%;
    margin-left: var(--sidenav-width);
}

.sidenav .inner {
    width: calc(var(--sidenav-width) * 3);
    height: 100%;
    position: relative;
    transition: .3s;
    overflow-y: hidden;
}

.sidenav .badge {
    border-radius: 3px;
    background-color: transparent;
    color: gray;
    border: 1px solid rgba(0, 0, 0, .1);
}

.sidenav .badge.mb-5 {
    margin-bottom: 5px !important;
}

.sidenav .image-wrapper {
    display: block;
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
}
.sidenav.active-sub-navigation-1 .inner {
    margin-left: calc(var(--sidenav-width) * (-1));
}
.sidenav.active-sub-navigation-2 .inner {
    margin-left: calc(var(--sidenav-width) * 2 * (-1));
}

.sidenav .sub-navigation {
    position: absolute;
    z-index: +0;
    width: var(--sidenav-width);
    background-color: #fff;
    transition: 0s;
}

.sidenav [data-navigation-level="1"],
.sidenav .sub-navigation {
    max-height: calc(100% - 50px);
    overflow-y: auto;
}
.sidenav .sub-navigation.active {
    z-index: +1;
    margin-bottom: 60px;
}
.sidenav .sub-navigation:not(.active) {
    visibility: hidden;
    display: none;
}

.sidenav .link-panel {
    display: block;
    padding: 25px 20px;
    line-height: 1;
    transition: .2s;
}
.sidenav .link-panel:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.sidenav .link-panel:not(.disabled):hover {
    background-color: rgba(0, 0, 0, .06);
}
.sidenav .link-panel .inner {
    background-color: transparent!important;
    padding: 0;
}
.sidenav .link-panel > img {
    float: left;
    position: absolute;
    height: 64px;
    margin-top: -25px;
    margin-left: -20px;
}
.sidenav .link-panel.link-panel--head {
    text-align: center;
}
.sidenav .link-panel > img + strong {
    margin-left: 70px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}
.sidenav .link-panel > img.img-square + strong {
    margin-left: 55px;
}
.sidenav .link-panel > strong {
    color: gray;
}
.sidenav .link-panel strong + small {
    font-size: 12px;
    white-space: nowrap;
    color: gray;
    margin: 5px 0;
}
.sidenav .link-panel .caption {
    float: left;
}
.sidenav .link-panel .fa-chevron-right {
    float: right;
}
.sidenav .link-panel .fa-chevron-left {
    float: left;
}
.sidenav .link-panel .discount-chip {
    background: red;
    color: #fff;
    border-radius: 5px;
    font-size: 12px;
    padding: 3px 5px;
    margin-left: 5px;
}
.sidenav .link-panel .icon-label {
    vertical-align: super;
    margin-left: 10px;
}

/** Sidenav Backdrop */
.sidenav + .sidenav-backdrop {
    display: none;
}
@media (max-width: 767px) {
    .sidenav + .sidenav-backdrop {
        background-color: transparent;
        pointer-events: none;
        transition: .3s;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 6;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body.open-side-nav .sidenav + .sidenav-backdrop {
        pointer-events: auto;
        background-color: rgba(0, 0, 0, 0.2);
    }
}


/*=====================================
 * Icon GodMode
 * ===================================*/
#iconGodMode {
    position: fixed;
    bottom: 70px;
    right: 10px;
    z-index: 9;
    background-color: #056100;
    color: white;
    border: none;
    outline: none;
    border-radius: 50%;
    padding: 0 5px;
    font-size: 28px;
}

/*=====================================
 * Btn open ModalRemarketingDiscountCode
 * ===================================*/
[data-target="#modalRemarketingDiscountCode"] {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 9;
    background-color: red;
    color: white;
    border: none;
    outline: none;
    border-radius: 25px;
    padding: 10px 25px;
    font-size: 18px;
}
#modalRemarketingDiscountCode.modal .modal-dialog {
    margin-top: 150px;
}
@media(max-width: 768px) {
    #modalRemarketingDiscountCode.modal .modal-dialog {
        margin-top: 100px;
    }
}

/*=====================================
 * Link Panel
 * ===================================*/
.link-panel:not(.disabled):hover .inner {
    color: #056100;
    background-color: rgba(0, 0, 0, .07);
}
.link-label.disabled {
    color: pink;
    pointer-events: none !important;
}

.link-panel .inner > i,
.link-panel .inner > img,
.link-panel.disabled:hover .inner > i,
.link-panel.disabled:hover .inner > img {
    float: left;
    font-size: 2em;
    margin-right: 15px;
    line-height: 1;
    color: #056100;
}
.link-panel:hover .inner > i,
.link-panel:hover .inner > img,
.link-panel:hover .content {
    color: inherit;
}

.link-panel .inner {
    transition: 0.2s;
    background-color: transparent;
    padding: 20px 10px;
    color: gray;
}
.link-panel .content {
    text-align: left;
    padding: 0;
    line-height: 1;
    font-size: 12px;
}