/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
body {
    background-color: transparent;
}

.base_farben {
    color: #000000;
    color: #f9b233;
    color: #f29e07;
    color: #464646;
    color: #000;
    color: ##0000FF;
}

.btn-secondary {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #333;
    border-color: #333;
}

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #333;
}

.btn-primary:hover {
    color: #fff;
    background-color: #333;
    border-color: #000;
}

#content a.btn.btn-default {
    color: #f9b233;
    border-color: #464646;
    border-color: #f9b233;
    border-radius: 4px;
    background-color: #f9b233;
    color: #000;
}

#content a.btn.btn-default:hover {
    color: #f29e07;
    border-color: #f29e07;
    color: #fff;
}

#jtl-nav-wrapper .container-fluid {
    padding-top: 35px;
}

header .navbar-brand img {
    height: 6.063rem;
}

.toggler-logo-wrapper .logo-wrapper {
    padding-left: 1.5rem;
    position: relative;
    bottom: 44px;
}

@media (min-width: 992px) {
    .toggler-logo-wrapper .logo-wrapper {
        padding-left: 1.5rem;
        position: relative;
        bottom: 44px;
    }
}

@media (min-width: 992px) {
    header .navbar-brand img {
        height: 6.063rem;
    }
}

/***************************************************************************************************** CARBON HINTERGRUND METAL ETC*/
/* Carbon */

#footer .bgpattern-carbon,
.bgpattern-carbon {
    background-color: #131313 !important;
    background-image: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px), -webkit-linear-gradient(243deg, #151515 5px, transparent 5px), -webkit-linear-gradient(63deg, #222 5px, transparent 5px), -webkit-linear-gradient(243deg, #222 5px, transparent 5px), -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) !important;
    background-image: linear-gradient(27deg, #151515 5px, transparent 5px), linear-gradient(207deg, #151515 5px, transparent 5px), linear-gradient(27deg, #222 5px, transparent 5px), linear-gradient(207deg, #222 5px, transparent 5px), linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) !important;
    background-size: 20px 20px !important;
    background-position: 0 5px, 10px 0, 0 10px, 10px 5px !important;
}




/* Metal ------------------------- */

.metal {
    position: relative;
    margin: 40px auto;
    outline: none;

    font: bold 6em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    text-align: center;
    color: hsla(0, 0%, 20%, 1);
    text-shadow: hsla(0, 0%, 40%, .5) 0 -1px 0, hsla(0, 0%, 100%, .6) 0 2px 1px;

    background-color: hsl(0, 0%, 90%);
    box-shadow: inset hsla(0, 0%, 15%, 1) 0 0px 0px 4px,
        /* border */
    inset hsla(0, 0%, 15%, .8) 0 -1px 5px 4px,
        /* soft SD */
    inset hsla(0, 0%, 0%, .25) 0 -1px 0px 7px,
        /* bottom SD */
    inset hsla(0, 0%, 100%, .7) 0 2px 1px 7px,
        /* top HL */

    hsla(0, 0%, 0%, .15) 0 -5px 6px 4px,
        /* outer SD */
    hsla(0, 0%, 100%, .5) 0 5px 6px 4px;
    /* outer HL */

    transition: color .2s;
}



/* Radial ------------------------- */

.radial.metal {
    width: 160px;
    height: 160px;
    line-height: 160px;
    border-radius: 80px;
    background-image: -webkit-radial-gradient(50% 0%, 8% 50%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%),
    -webkit-radial-gradient(50% 100%, 12% 50%, hsla(0, 0%, 100%, .6) 0%, hsla(0, 0%, 100%, 0) 100%),
    -webkit-radial-gradient(0% 50%, 50% 7%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%),
    -webkit-radial-gradient(100% 50%, 50% 5%, hsla(0, 0%, 100%, .5) 0%, hsla(0, 0%, 100%, 0) 100%),

    -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 3%, hsla(0, 0%, 0%, .1) 3.5%),
    -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%),
    -webkit-repeating-radial-gradient(50% 50%, 100% 100%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .2) 2.2%),

    -webkit-radial-gradient(50% 50%, 200% 50%, hsla(0, 0%, 90%, 1) 5%, hsla(0, 0%, 85%, 1) 30%, hsla(0, 0%, 60%, 1) 100%);
}


.metal.radial:before,
.metal.radial:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;

    /* fake conical gradients */
    background-image: -webkit-radial-gradient(50% 0%, 10% 50%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%),
    -webkit-radial-gradient(50% 100%, 10% 50%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%),
    -webkit-radial-gradient(0% 50%, 50% 10%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%),
    -webkit-radial-gradient(100% 50%, 50% 06%, hsla(0, 0%, 0%, .1) 0%, hsla(0, 0%, 0%, 0) 100%);
}

.metal.radial:before {
    transform: rotate(65deg);
}

.metal.radial:after {
    transform: rotate(-65deg);
}





/***************************************************************************************************** MODAL BOX */
li.ga-li-modalservice {
    padding: 13px;
}

#ga--btn-modalservice {
    position: relative;
    /* width: 40px; */
    font-size: 32px;
    /* display: inline-block; */
    color: #f9b233;
    color: #000;
}

#ga--btn-modalservice:hover {
    color: #f29e07;
    color: #000;
}

#shop-nav .nav-link {
    font-size: 28px;
}

header .nav-right .nav-link {
    padding-top: 1.0rem;
    padding-bottom: 1.0rem;
}

.modal {
    display: none;
    position: fixed;
    z-index: 50000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.ga--modal-content {
    background-color: #fefefe;
    margin: 7% auto;
    padding: 8px;
    border: 1px solid #888;
    width: 80%;
    position: relative;
}

.ga--close {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    right: -20px;
    top: -20px;
    background-color: #000;
    border-radius: 50px;
    border: 2px solid #fff;
    width: 40px;
    height: 40px;
    padding-left: 12px;
    padding-bottom: 4px;
}

.ga--close:hover,
.ga--close:focus {
    background-color: #D21404;
    text-decoration: none;
    cursor: pointer;
}

@media screen and (min-width: 1000px) {
    .ga--modal-content {
        max-width: 900px;
    }
}

@media screen and (max-width: 500px) {
    .ga--modal-content {
        width: 94%;
    }
    .ga--close {
        right: -6px;
        top: -11px;
    }
}

@media (max-width: 991px) {
    li.ga-li-modalservice {
        padding: 13px;
        padding-top: 0;
    }
    header .nav-right .nav-link {
        padding-top: 0rem;
        padding-bottom: 1.0rem;
    }
    .navbar-toggler {
        font-size: 0px;
        border: 0;
        height: 2rem;
        padding: 0;
        padding-left: 8px;
    }
    #mainNavigation #ga--btn-modalservice {
        display: none;
    }
}



@media screen and (max-width: 1200px) and (orientation: landscape) {
    .ga--header-marken {
        padding-left: 30px;
    }
    .ga--header-marken span {
        font-size: 10px;
    }
    .oase-logo,
    .aqua-logo {
        width: 44%;
    }
}

@media screen and (max-width: 1115px) and (orientation: landscape) {
    .ga--header-marken span {
        font-size: 9px;
    }
}

@media screen and (max-width: 1079px) and (orientation: landscape) {
    .ga--header-marken {
        display: none;
    }
}

@media screen and (max-width: 1200px) and (orientation: portrait) {
    .ga--header-marken {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    #bxt-w #cat-w {
        background-color: #fff;
    }
}





/***************************************************************************************************** MODAL BOX CONTENT */
#ga--modal-service .serviceCenterContent01 [class*="col-"] {
    position: relative;
    min-height: 1px;
    padding-left: 0px;
    padding-right: 0px;
}

#serviceCenterContent .serviceCenterContent01 .h1 {
    color: #009fe3;
    font-weight: 300;
    margin-bottom: 0px;
    font-family: "Roboto Condensed",sans-serif;
}

#serviceCenterContent .serviceCenterContent01 .h3 {
    font-weight: 300;
    font-size: 18px;
    margin-bottom: 5px;
}

#serviceCenterContent .serviceCenterContent02 {
    padding: 10px 0;
    background-color: #009fe3;
    color: #fff
}

#serviceCenterContent .serviceCenterContent02 .h1 {
    color: #fff;
    font-weight: 300;
    margin-bottom: 5px;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 28px;
}

#serviceCenterContent img {
    max-width: 100%;
}

.serviceCenterContentRow01Left,
.serviceCenterContentRow02Left {
    float: left;
}

.serviceCenterContentRow01Right,
.serviceCenterContentRow02Right {
    float: left;
}

.subheadline {
    font-family: "Open Sans",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0px;
}

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

#serviceCenterContent .serviceCenterContentMenu li a:hover {
    color: #D21404;
}

.imageListing  a img {
    margin-right: 10px;
    margin-bottom: 10px;
}

#serviceCenterContent .serviceCenterContentRow01Left {
    min-height: 252px;
}

#serviceCenterContent .serviceCenterContentMenu>li {
    width: 50%;
    float: left;
    padding-right: 14px;
}

#serviceCenterContent .serviceCenterContentMenu>li>a::after {
    font-family: "FontAwesome";
    content: "\f101";
    font-size: 13px;
    margin-left: 3px;
    float: right;
}

#serviceCenterContent .serviceCenterContentMenu>li>a {
    font-size: 14px;
    padding: 5px 0;
    border-bottom: 1px solid #dfdcdc;
    display: block;
    color: #464646;
    text-decoration: none;
}

.serviceCenterContentRow02Right .subheadline a[href^="mailto:"] {
    color: #f8bf00;
}

@media screen and (max-width: 500px) {
    .serviceCenterContentRow02Left {
        border-bottom: 1px solid #fff;
        padding-bottom: 30px;
    }
}


/***************************************************************************************************** HEADER URLAUB */
.ga--wichtiger-hinweis {
    background-color: #f9b233;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
}


/***************************************************************************************************** HEADER USP */
.ga-usp-header {
    background-color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

ul.ga-usp-listing {
    list-style: none;
    display: flex;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    text-shadow: #0d0d0d 0px 1px;
}

ul.ga-usp-listing li {
    color: #333;
}

.css-check:before {
    color: #c41e16;
}
.css-check:before {
    content: '\2713';
    display: inline-block;
    margin-right: 0.15rem;
    color: #c41e16;
}

@media (max-width: 991px) {
    .ga-usp-header {
        display: none;
    }
}




/***************************************************************************************************** STARTSEITE BOXEN CONTENT */
main .ga-content-boxes {

}

main .box.box-custom.box-normal {
    max-width: 33.3%;
    display: inline-flex;
    padding: 15px;
}



/***************************************************************************************************** PRODUCT-LISTING */
.ga-hr-listing {
    margin-bottom: 75px;
}




/***************************************************************************************************** PRODUCT-DETAIL */
.ga--payment-methoden {
    text-align: right;
    font-size: 13px;
}

.ga--payment-methoden img {
    padding: 0;
    margin: 0px;
    width: 11%;
}

.alert.choose-variations.alert-info {
    background-color: #00CDFE;
    color: #fff;
}


/***************************************************************************************************** FOOTER */
#footer {
    background-color: #464646;
    color: #fff;
    line-height: 1.0;
}

#footer #copyright {
    background-color: #000 !important;
}

#footer a,
#footer a.nav-link {
    color: #b6b6b6;
}

#footer .h2,
#footer .info a {
    color: #fff;
}

#footer a:hover,
#footer a.nav-link:hover {
    color: #009fe3;
}

#footer .productlist-filter-headline {
    font-weight: 500;
    font-size: 22px;
    font-family: "Roboto Condensed",sans-serif;
    color: #fff;
}

#footer.newsletter-active {
    padding: 3rem 0 0;
}

#footer.newsletter-active #footer-boxes {
    margin-top: 0.1rem;
}


.ga--whatsapp {
    text-align: center;
    display: block;
    background: rgb(40, 40, 43);
    background: linear-gradient(0deg, rgba(40, 40, 43, 1) 0%, rgba(55, 55, 59, 1) 35%, rgba(0, 0, 0, 1) 100%);
    font-size: 17px;
    line-height: 39px;
    border-radius: 12px;
    border: 1px solid #999;
}

.ga--phone {
    text-align: center;
    display: block;
    background: rgb(40, 40, 43);
    background: linear-gradient(0deg, rgba(40, 40, 43, 1) 0%, rgba(55, 55, 59, 1) 35%, rgba(0, 0, 0, 1) 100%);
    font-size: 17px;
    line-height: 39px;
    border-radius: 12px;
    border: 1px solid #999;
}

.ga--email {
    text-align: center;
    display: block;
    background: rgb(40, 40, 43);
    background: linear-gradient(0deg, rgba(40, 40, 43, 1) 0%, rgba(55, 55, 59, 1) 35%, rgba(0, 0, 0, 1) 100%);
    font-size: 17px;
    line-height: 39px;
    border-radius: 12px;
    border: 1px solid #999;
}

.ga--whatsapp .fab.fa-whatsapp,
.ga--whatsapp .fa.fa-whatsapp {
    font-size: 30px;
    position: relative;
    top: 5px;
    margin-right: 10px;
    color: #fff;
}

.fa.fa-envelope {
    font-size: 25px;
    position: relative;
    top: 2px;
    right: 17px;
    color: #fff;
}

.ga--phone .fa.fa-phone {
    font-size: 25px;
    position: relative;
    top: 5px;
    margin-right: 10px;
    color: #fff;
}

#footer #sidebox175 {
    line-height: 1.5;
}

@media (min-width: 992px) {
    #footer.newsletter-active #footer-boxes {
        margin-top: 0rem;
    }
}




/***************************************************************************************************** FOOTER USP */
.ga-usp2-footer-wrapper {
    background-color: #009fe3;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.ga-mobile {
    text-align: center;
}

.ga-payment-icon {
    width: 85px;
    height: auto;
}

.ga-usp-footer .imageListing a,
.ga-usp-footer .imageListing a img {
    text-decoration: none;
}

.panel-title.h5 {
    font-weight: 500;
    font-size: 22px;
    font-family: "Roboto Condensed",sans-serif;
}

.ga-usp-footer .imageListing  a img {
    margin-right: 0px;
    margin-bottom: 10px;
}

.ga-usp-footer .iconListing {
    text-align: center;
}

.ga-usp-footer .iconListing a {
    display: inline-table;
    padding: 0px 25px;
}

#ga-usp2-footer-wrapper.bgStyleFluid {
    padding-top: 20px;
    padding-bottom: 0px;
    background-color: #000;
}

#ga-usp1-footer-wrapper.bgStyleFluid.ga-line-01 {
    background-color: #efecec;
    color: #000;
    padding-top: 20px;
    padding-bottom: 20px;
}

.bgStyleFluid{
    color: #fff;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    font-size: 13px;
}

.iconItem > span {
    color: #fff;
}

.iconItem > span:first-child {
    float: left;
    margin-right: 15px;
    background-color: #fff;
    color: #009fe3;
    height: 58px;
    width: 58px;
    line-height: 76px;
    border-radius: 50%;
    text-align: center;
    margin-top: 10px;
}

.iconItem > span:first-child {
    color: #000;
    line-height: 76px;
    text-align: center;
}

.iconItem > span:first-child .fa {
    font-size: 2.5em;
}

.iconItem > span:first-child + span > strong:first-child {
    font-weight: 500;
    font-size: 22px;
    font-family: "Roboto Condensed",sans-serif;
}

#ga-usp2-footer-wrapper a.iconItem,
#ga-usp2-footer-wrapper a.iconItem:hover {
    color: #fff;
    text-decoration: none;
}

#ga-usp1-footer-wrapper .col:nth-of-type(2) {
    border-right: 1px solid #b6b6b6;
    border-left: 1px solid #b6b6b6;
}

@media (max-width: 991px) {
    #ga-usp1-footer-wrapper .col:nth-of-type(2) {
        border-right: none;
        border-left: none;
        border-bottom: 1px solid #b6b6b6;
        border-top: 1px solid #b6b6b6;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .ga-mobile {
        text-align: left;
    }
    .ga-usp-footer .iconListing a {
        display: table-cell;
        padding: 0;
        padding-right: 25px;
    }
}

@media (max-width: 767px) {
    .ga-usp-footer .col {
        margin-bottom: 25px;
    }
}