/* ### CSS Overrides ### */


/* Header
.dinoHeader {
    position: sticky;
}
*/



/* ### Image Slider und Gris ### */
.bg-slider {
    position: absolute;
    z-index: -100;
    width: 100%;
}
.bg-gris {
    position: absolute;
    z-index: 0;
    width: 75%;
}
.bg-gris img {
    opacity: 0.5;
    filter: drop-shadow(0px 0px 3px #fff) !important;
    filter: opacity(0.5);
}

/* ### HeaderSpace und Eyecatcher ### */
.eyecatcherspace {
    position: relative;
}
#eyecatcher {
    position: absolute;
    background-color: transparent;
    min-width: 100%;
}
#eyecatcher h1, #eyecatcher h2, #eyecatcher h3, #eyecatcher p, #eyecatcher a {
    color: white !important;
}
#sliderspace {
    visibility: hidden !important;
}

/* ### Modul GTranslater ### */
#translate {
    position: absolute;
    background-color: transparent;
    top: -50px !important;
    max-width: 90%;
    z-index: 981;
    margin-left: auto; margin-right: auto;
}
.gtranslate .selected,
.gtranslate .switcher .option {
    background: none !important;
    background-color: #262626 !important;
    color: white !important;
    border: 1px solid #b6b7bb !important;
    border-radius: 4px !important;
}
.gtranslate .switcher .selected a,
.gtranslate .switcher .option a {
    background-color: #262626 !important;
    color: white !important;
    border: 0px solid #b6b7bb !important;
    border-radius: 4px !important;
}
.gtranslate .switcher .option a:hover {
    background-color: #ffcc00 !important;
    color: black !important;
    border: 1px solid #b6b7bb !important;
    border-radius: 4px !important;
}
@media screen and (max-width:1199px) {
    /* Small */
    #translate {
        padding-left: 100px;
        top: -61px !important;
    }
}
@media screen and (max-width:447px) {
    /* Small */
    #translate {
        padding-left: 73px;

    }
}
@media screen and (max-width:383px) {
    /* Small */
    #translate {
        padding-left: 60px;

    }
}


/* ### Struktur der Navigationsleiste ### */
/* >>> grundsätzliche die Texte im Rahmen behalten  (siehe RU google Übersetzung) */
.uk-navbar-dropdown-nav>li>a, .myNavbarModul > ul > li > ul > li > a {
    display: inline;
}
.uk-navbar-dropdown-nav>li, .myNavbarModul > ul > li > ul > li  {
    margin-bottom: 15px;
}

/* Sidebar */
.myNavbarModul {
    position: relative;
    top: 70px;
}
#module-tm-1 {
    position: absolute;
}

.uk-navbar-right {
    z-index: 1000;
}

/* Sidebar Mobil
#module-menu-dialog-mobile {
    position: relative;
    top: 70px;
}
#module-tm-2, #module-tm-4 {
    position: absolut;
    top: -300px;
}
*/


/* ### Navbar ### */
nav.uk-navbar ul {
    background: #fff;
    border: 1px solid #b6b7bb;
    border-radius: 4px;
    padding: 0 0;
    height: 60%;
}
.uk-navbar-nav > li > a {
    color: black !important;
}
.tm-header-overlay, .uk-sticky-fixed {
    margin-top: 15px !important;
}
.uk-sticky {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
.uk-navbar-dropdown {
    top: 80px !important;
}
.uk-nav-sub a {
    color: rgba(255,255,255,.5) !important;
}
a.uk-navbar-toggle {
    background: #fff;
    border: 1px solid #b6b7bb;
    border-radius: 4px;
    padding: 0 15px;
    margin-left: 10px;
    margin-right: 10px;
    height: 60%;
    z-index: 1000;
}
.uk-navbar-toggle-icon {
    color: black;
}

.uk-navbar-dropdown-nav > li > ul > li > a,
.myNavbarModul > ul > li > ul > li > ul > li > a,
#module-menu-dialog-mobile > ul > li > ul > li > ul > li > a {
    text-transform: none;
    font-size: 0.8em;
}
.myNavbarModul > ul > li > ul > li > a,
#module-menu-dialog-mobile > ul > li > ul > li > a {
    text-transform: none;
    font-size: 0.9em;
    color: white !important;
}
.myNavbarModul > ul > li > a,
#module-menu-dialog-mobile > ul > li > a {
    color: white !important;
}
.myNavbarModul a:hover,
.myNavbarModul li.uk-active > a,
.uk-nav a:hover,
.uk-nav li.uk-active > a,
#module-menu-dialog-mobile a:hover,
#module-menu-dialog-mobile li.uk-active > a {
    color: #ffcc00 !important;
}



/* Social Media Toogle */
.tm-toolbar #module-tm-4 {
    z-index: 982;
}



/* Nav Item Line Anpassungen*/
/* schwarz */
.uk-navbar-nav > li:hover > a::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23000000%22%20points%3D%220%209%205.03%204.35%2010%208.98%2010%205.62%205.03%201%200%205.63%200%209%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
    margin-left: 20px;
    margin-right: 20px;
}
/* gelb */
.uk-navbar-nav > li.uk-active > a::before {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23FFCC00%22%20points%3D%220%209%205.03%204.35%2010%208.98%2010%205.62%205.03%201%200%205.63%200%209%22%2F%3E%0A%3C%2Fsvg%3E%0A") !important;
    margin-left: 20px;
    margin-right: 20px;
}






/* About us */
/* Hintergrund Europa Karte
.bgPicAboutUs {
    opacity: 0.5;
}
.bgPicAboutUs .uk-container {
    opacity: unset !important;
}*/

/* ### KONTAKTFORM ### */
#contact-form legend{
    visibility: hidden;
}


/* ### Sitemap ### */
#jmap_sitemap{
    width: 450px;
    margin: 0px auto;
}
#jmap_sitemap span.folder {
    visibility: hidden !important;
}
#jmap_sitemap .treeview li.lastCollapsable {
    background: none;
}
body.mySitemap #tm-main {
    min-height: 50px !important;
}


/* ### MAPS ### */
/* Logo auf Detailkarte */
#locationsearch .mml_address img.mmllogo {
    max-width: 40% !important;
    float: right;
    padding-top: 20px;
}
#maps .distance {
    color: black !important;
}
#maps .mytool {
    display: flex;
}
#maps address {
    width: 95% !important;
}
#locationresult {
    height: 100% !important;
    max-height: 800px !important;
}
#maps [id^="location_"]
{ /* alle IDs die so anfangen */
    width: 29% !important;
}

/* Details ausblenden*/
.myMapsGebietsleiter span.locationaddress .address,
.myMapsGebietsleiter span.mytool,
.myMapsGebietsleiter input.route_mml,
.myMapsGebietsleiter span.routeicon,
.myMapsGebietsleiter input.direction_mml,
.myMapsGebietsleiter input.routetext,
.myMapsGebietsleiter a.resultmymap,
.myMapsGebietsleiter span.detailsicon
{
    visibility: hidden;
}





/* Produktboxen auf Artikelseiten*/
.field-hidden  {
    visibility: hidden;
}





/* ### BOXEN ### */
/* Produktboxen auf Artikelseiten*/
.productBox a, .dlPortalBox a  {
    border: 1px solid #b6b7bb;
}
/* Downloadportalbocen auf Artikelseiten */
div.uk-margin-top {
    text-align: center ;
}




/* ### REFENZEN: Elektrolye ### */
/* Suchmasken und Details ausblenden */
.refElektrolyse span.sidebarmenu, .refElektrolyse span.sidebarform, .refElektrolyse span.distance, .refElektrolyse span.mytool {
    visibility: hidden !important;
}
/* Details in der Hauptlocation ausblenden */
.refElektrolyse .gm-style-iw-d span.detailsicon, .refElektrolyse .gm-style-iw-d input.mymap, .refElektrolyse .gm-style-iw-d input.routetext, .refElektrolyse .gm-style-iw-d span.routeicon {
    visibility: hidden !important;
}
/* Höhe in der Hauptlocation anpassen */
.refElektrolyse .gm-style-iw-d div, .refElektrolyse .gm-style-iw-d, .refElektrolyse .gm-style-iw {
    height: 45px !important;
}
/* ausgewählte Box hervorheben */
.refElektrolyse .locationsactive {
    background: #cccccc !important;
}
/* div Texte */
.refElektrolyse address p {
    margin-left: 35px;
    margin-right: 35px;
    margin-top: -50px;
}
.refElektrolyse address p :before {
    content: "...";
}
.refElektrolyse .address span.country, .refElektrolyse span.field-label {
    font-size: larger;
    font-weight: bold;
}
.refElektrolyse address .location-title {
    text-decoration: underline;
}
.refElektrolyse address .country {
    font-weight: bold;
}




/* +++++ Formulartexte +++++ */
/* Feedback */
#contact-form span.form-control-feedback  {
    color: red;
    padding-left: 10px;
    font-size: 16px;
}

/* eMail Kopie an Absender */
label#jform_contact_email_copy-lbl, input#jform_contact_email_copy {
    visibility: hidden;
}


/* Datenschutz */
label#jform_com_fields_datenschutz-lbl {
    font-size: 1.5rem;
}
label#jform_com_fields_datenschutz-lbl::before {
    margin-top: 30px;
    display: inline-block;
    content: "";
    border-top: .2rem solid black;
    width: 100%;
    transform: translateY(-1rem);
}







/* ### UNIVERS ### */
.universe  {
    border: 1px solid #b6b7bb;
    border-radius: 20px;
    color: white;

}
.universe p {
    margin-top: 20px;
}
.u1  {
    background: #464745;
}
.u2  {
    background: #17a9b8;
}
.u3  {
    background: #022d55;
}
.u4  {
    background: #53aa28;
}
.u5  {
    background: #f08a00;
}




/* ### Landingpages / Microsites ### */
/* Elektrolyse */
.callToAction {
    background-color: #61d461;
    padding: 40px !important;
    padding-left: 0px !important;
    margin-left: 0px;
}
.accordBloecke {
    margin-bottom: 10px;
    padding: 10px;
    background-color: lightgray;
    border: 1px solid #b6b7bb;
    border-radius: 10px;
}
.buttonAnfragen .el-item {
    background-color: #ffcc00;
    font-size: 0.7em;
    border: 1px solid #b6b7bb;
    border-radius: 20px;
    padding-left: 50px;
    padding-right: 50px;
}
.buttonAnfragen .el-title::before {
    visibility: hidden;
    content: none !important;
}
.ui.form .inline.fields > label {
    text-align: left;
}

.formField > label {
    text-align: left !important;
}
.checkAndSend {
    background-color: #b6b7bb;
    padding: 20px;
    border: 1px solid #b6b7bb;
    border-radius: 10px;
}
.checkAndSend {
    min-width: 10%;
    text-align: center !Important;
    margin: 0px auto;
}
.checkAndSend > button {
    margin-top: 10px;
}

/* Interbad */
.dreiD-body {
    margin: 0;
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.dreiD-body .uk-grid-item-match .uk-panel {
    position: relative;
    /* width: 300px;*/
    height: 110%;
    text-align: center;
    perspective: 1000px;
    overflow: hidden; /* Um sicherzustellen, dass nichts überläuft */
}

.dreiD-body .uk-grid-item-match .dreiD-wall {
    /* width: 100px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0; */
    margin-top: 55px;
    transform-origin: right center;
    transform: rotateY(-45deg) translateZ(150px);
}