html, body {width: 100%;height: 100%}
img {max-width: 100%;height: auto;display: block}
.block {display: block}
.float_left {float: left}
.float_right {float: right}
.hidden {display: none}
.noSelect {-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none} /* i.e. accordion title */
.clearAfter:after, .elText:after {display: block;content: '';clear: both} /* use this class on floaters surrounding element instead of s.th. like <div class="clear"> */
a {outline: none}
#wrapper {overflow: hidden}
.spin {animation:spin 1s linear infinite}
@keyframes spin { 0% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

#skipToContent a {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
#skipToContent a:focus {position:static;width:auto;height:auto;}

/* Accordion */
.elAccordion .title {cursor: pointer}
.elAccordion .content {display: none}
.elAccordion.opened .content {display: block}

/* Form */
.fieldWrapper.required label:after {content: '*';color: red}
#flxFirstName, label[for=flxFirstName] {display: none !important;} /* honey pot in forms */

/* Flex Slider */
.flex-direction-nav a {margin-top: 20px}
.flex-direction-nav a {overflow: visible;text-shadow: none}
.flex-control-paging li a {box-shadow: none}
.flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {color: transparent;font-size: 0}

/* youTube responsive */
.video-container {position: relative;padding-bottom: 56.25%;padding-top: 0;height: 0;overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.twoClick-container .video-container {background-color: #000;background-size: cover}
video.autoWidth {width:100%;height:auto;}
.twoClickBox {position: absolute;background: #eee;color: #333;width: 100%;max-width: 400px;padding: 20px;line-height: 1.2em;margin: 0;left: 50%;top: 50%;transform: translate(-50%, -50%);}

/* Background Images */
.hasBgImage {position: relative}
.maeBgImage {position: absolute;z-index: -1;width: 100%;left: 0;height: 100%;top: 0;background-repeat: no-repeat;background-size: cover;background-position: center center}
.maeBgImage.maeBgFullWidth {width: 100vw;left: 50%;margin-left: -50vw}

/* ImageMap */
.imgMapWrapper {position: relative;overflow: hidden;}
.imgMapWrapper img {width: 100%;height: auto;display: block;margin: 0 0 0 0;}
.mapArea {position: absolute;background-position: center center;background-size: contain;background-repeat: no-repeat}
.mapArea a {display: block;width: 100%;height: 100%}

/* lightbox */
#maeLightbox {z-index: 101;display: none;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.90);color: #fff}
#maeLightbox .header {position: absolute;left: 0;top: 0;right: 0;height: 60px}
#maeLightbox .title {margin: 10px 130px 0 25px;max-height: 50px;overflow: hidden;padding-bottom: .15em}
#maeLightbox .title .source::before {content: ' | '}
#maeLightbox .maeBtn {width: 40px;height: 40px;position: absolute;display: block;line-height: 40px;text-align: center;color: #fff;text-decoration: none;font-family: Arial, serif}
#maeLightbox .maeBtn:hover {background-color: #444}
#maeLightbox .maeBtn:focus {outline: #aaa dashed 1px}
#maeLightbox .lbDownload {right: 75px;top: 10px;font-size: 26px;border-bottom: solid #fff 1px}
#maeLightbox .lbDownload:before {content: '↓'}
#maeLightbox .close {right: 25px;top: 10px}
#maeLightbox .close:before, #maeLightbox .close:after {position: absolute;left: 19px;content: ' ';height: 41px;width: 2px;background-color: #fff;}
#maeLightbox .close:before {transform: rotate(45deg);}
#maeLightbox .close:after {transform: rotate(-45deg);}
#maeLightbox .media {position: absolute;left: 0;right: 0;top: 60px;bottom: 60px;background-size: contain;background-position: center center;background-repeat: no-repeat}
#maeLightbox .loading {width: 64px;height: 64px;margin: calc(50vh - 32px) auto 0 auto;opacity: .6;background: center / contain no-repeat url("../images/loading.gif")}
#maeLightbox .nav {position: absolute;left: 0;bottom: 0;height: 60px;width: 100%}
#maeLightbox .nav .prev {left: 25px;top: 10px;}
#maeLightbox .nav .maeBtn.prev .inside {left: 5px;transform: rotate(-45deg)}
#maeLightbox .nav .next {right: 25px;top: 10px}
#maeLightbox .nav .maeBtn.next .inside {right: 5px;transform: rotate(135deg)}
#maeLightbox .nav .navTitle {margin: 0 65px;text-align: center;line-height: 60px;overflow: hidden}
#maeLightbox .nav .maeBtn .inside {position: absolute;width: 20px;height: 20px;margin: 10px;border-top: 2px solid #fff;border-left: 2px solid #fff;}
#maeLightbox .nav .maeBtn .inside:before {display: block;height: 200%;width: 200%;margin-left: -50%;margin-top: -50%;content: "";transform: rotate(45deg);}
@media (max-height: 500px) {
    #maeLightbox .media {top: 0;bottom: 0}
    #maeLightbox .header, #maeLightbox .nav {background-color: rgba(0,0,0,.5)}
}

/* Mobile Navi */
#maeMM-trigger {right: 10px;top: 10px;position: absolute;z-index: 101;cursor: pointer}
#maeMM-trigger .bar {height: 5px;background: #333;margin: 6px 0;transition: .4s;width: 35px}
.theX .bar1 {transform: rotate(-45deg) translate(-7px, 7px)}
.theX .bar2 {opacity: 0}
.theX .bar3 {transform: rotate(45deg) translate(-8px, -8px)}
#maeMM-trigger.blocked, #maeMM.blocked {display: none !important}
#maeMM {background: rgba(0,0,0,.5);display: none;width: 0;left: 0;top: 0;bottom: 0;z-index: 100;overflow: hidden;position: fixed}
#maeMM .wrapper {background: #444;height: calc(100% - 45px);overflow: auto}
#maeMM a {display: none;color: #fff;background: #333;border-bottom: solid #444 1px;padding: 14px 20px;text-decoration: none;transition: all .3s;position: relative;user-select: none;margin: 0}
#maeMM a:not(.top):hover, #maeMM a:focus, #maeMM.parentToggles a.top:hover, #maeMM.parentToggles a.top:focus {background: #444;transition-duration: unset}
#maeMM li.active > a {text-decoration: underline}
#maeMM ul {list-style: none}
#maeMM ul.open > li > a:not(.top), #maeMM .headerWrapper a {display: block}
#maeMM .maeBtn {position: absolute;width: 50px;height: 100%;top: 0;cursor: pointer}
#maeMM .maeBtn:hover, #maeMM .maeBtn:focus {background: #444;border-color: #333;outline: none}
#maeMM a .inside {position: absolute;width: 12px;height: 12px;margin: 10px;border-top: 2px solid #fff;border-left: 2px solid #fff;right: 10px;top: calc(50% - 20px)}
#maeMM .opener, #maeMM .close {border-left: solid #444 1px;right: 0}
#maeMM a .opener .inside {transform: rotate(135deg)}
#maeMM a .back {border-right: solid #444 1px;left: 0}
#maeMM a .back .inside {left: 10px;transform: rotate(-45deg)}
#maeMM .close {right: 0}
#maeMM .close:before, #maeMM .close:after {position: absolute;left: 23px;top: 50%;margin-top: -15px;content: ' ';height: 30px;width: 2px;background-color: #fff;}
#maeMM .close:before {transform: rotate(45deg);}
#maeMM .close:after {transform: rotate(-45deg);}
#maeMM a.hasBack, #maeMM a.heading {padding: 0 60px;line-height: 45px;max-height: 45px;overflow: hidden;text-transform: uppercase;border-bottom-color: #ccc}
#maeMM a.hasOpener {padding-right: 60px}
#maeMM ul, #maeMM li {padding: 0;margin: 0}
#maeMM a.heading {padding-left: 20px}
#maeMM a.top, #maeMM.parentToggles a.top.heading {cursor: default}
#maeMM.parentToggles a.top {cursor: pointer}
#maeMM .headerWrapper, #maeMM .wrapper {margin-right: 60px}

/* Addresses */
.elEventDetails.noLocation .locationAddress, .elEventDetails.noOrganizer .organizerAddress {display: none}

/* product catalog */
.prodCat .yourBookmarks {display: none}
.m-bookmark-list form .singleProduct, .m-prod-detail form .bookmarkProducts {display: none !important;}
.prodCat .yourBookmarks.hasBookmarks, .prodCat .yourBookmarks.thisList {display: block}

/* privacy settings */
.provider-list .provider {line-height: 1.5em;padding-left: 2em;background-image: url("../images/checkbox_unchecked.svg");background-position: left top;background-size: 1.5em 1.5em;background-repeat: no-repeat;cursor: pointer}
.provider-list .provider.checked {background-image: url("../images/checkbox_checked.svg")}
.provider-list .consent-info {margin-left: .8em}

/* parallax */
.elImageParallax {position: relative;overflow: hidden;min-height: 10vh}
.elImageParallax .parallax {position: absolute;background-position: center center;background-size: cover;top: 0;right: 0;bottom: 0;left: 0;will-change: transform;transform-style: preserve-3d}
.elImageParallax .text {position: absolute;top: 50%;left: 5%;width: 45%;transform: translateY(-50%)}
.elImageParallax.txtScroll {transform: none;will-change: transform}
.elImageParallax.scrollTxtSlower .text {top: 5%}
.elImageParallax.scrollTxtFaster .text {top: unset;bottom: 5%}