@import url('swiper.min.css');
@font-face{ font-family: 'Lora'; font-style: normal; font-weight: 400; src: local('Lora'), local('Lora-Regular'), url('../fonts/lora/lora-regular.woff') format('woff')}
@font-face{ font-family: 'Lora'; font-style: normal; font-weight: 700; src: local('Lora Bold'), local('Lora-Bold'), url('../fonts/lora/lora-bold.woff') format('woff')}
@font-face{ font-family: 'Lora'; font-style: italic; font-weight: 400; src: local('Lora Italic'), local('Lora-Italic'), url('../fonts/lora/lora-bold-italic.woff') format('woff')}
@font-face{ font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('../fonts/sourcesanspro/sourcesanspro-regular.woff') format('woff')}
@font-face{ font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('../fonts/sourcesanspro/sourcesanspro-semibold.woff') format('woff')}

html,body{ margin: 0; padding: 0; height: 100%}
body{ font-size: 0.8em;font-family: 'Lora', serif; color: #FFFFFF; background-color: #554b4d; background-image: url(../../template/global/bg-page.jpg); background-position: 50% 300px; background-repeat: no-repeat}
#page-wrap{ margin: 0 auto 0 auto; width: 960px}
.page-header{width: 960px; height: 250px; background-position: bottom; background-repeat: no-repeat; box-shadow: #222 3px 3px 9px 0px; margin: 0px 0 30px 0}
.ph-index{ background-image: url(../../fileadmin/header/default.jpg)}
.page-logo{ height: 140px; background-color: #f3f0e6; text-align: center}
.page-logo img{ margin-top: 30px}
.containerMM{ width: 960px; margin: 5px 0; padding: 10px 0; text-align: left;font-size: 1.1em; display: table;letter-spacing: 0.08em}
.containerMM a{ font-family: 'Source Sans Pro Semibold', sans-serif; font-weight: 600; text-transform: uppercase}
.containerMM a:hover{ color: #000000}

#BOX_contentMain2 .wrap-footer{ width: 308px; float: right; margin: 0 18px 20px 0; height: 260px; overflow: hidden; padding-bottom: 20px}

footer{ width: 960px; margin: 0 0 24px 0; padding: 0 0 20px 0}
footer ul{ float:right; padding:0; margin:0}
footer ul li{text-align: right;float: left; list-style: none;margin: 0 0 0 40px; display: table-cell}
footer a{font-family: 'Source Sans Pro Semibold', sans-serif;font-weight: 600;text-transform: uppercase; text-decoration: none; font-size:1.2em}
footer .m-item a{color:#fff}
footer .m-item a:hover, footer .m-item-act a{color:#a8a900}

.page-breadcrumb{ font-size: 1.1em; padding: 1em 0;font-family: 'Source Sans Pro', sans-serif; font-weight: 400}

.content-main{ color: #554b4d;background-color: #f3f0e6;width: 790px;text-align: left; font-size: 1.2em;font-family: 'Lora', serif; font-weight: 100;margin: 32px 85px; padding-top: 20px;line-height: 1.5em;letter-spacing: 0.008em}
.content-main a{ }
.content-main a:hover{ text-decoration: none}

.empty-box{ width: 308px; float: left; background-color: transparent; margin: 0 18px 20px 0; box-shadow: none}
.inner-box{ margin: 0px 20px}
.inner-box .page-topic1{ font-size: 1.6em;margin-bottom: 10px}
.inner-box .page-topic2, .inner-box h2{ font-size: 1.2em; font-weight: 700;margin-bottom: 0px}
.inner-box h3{ font-size: 1em; font-weight: 700;margin-bottom: 10px}
.box-link{ position: relative; z-index: 5; float: right; margin: 0 10px 0 0}

#BOX_contentMain{ width: 960px; margin: 32px 0 0px 0;background-color: #f3f0e6;box-shadow: #222 3px 3px 9px 0px}
#BOX_contentMain2{ width: 960px; margin: 32px 0 0px 0}

.box-main{ width: 790px}
h1 a, h2 a, h3 a{ text-decoration: none}
.page-topic1{ font-size: 2em;margin-bottom: 30px}
.page-topic2{ font-size: 1.2em; font-weight: 700;margin-bottom: 5px}
.page-topic1, .page-topic2, h2{ padding: 0; text-transform: uppercase;letter-spacing: 0.05em}

h1,h2,h3{ color: #554b4d; background-color: transparent; margin: 0; line-height: 1.2em; margin-bottom: 5px; font-family: 'Source Sans Pro', sans-serif}

.seminar-listing{ width: 100%; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; text-transform: uppercase}
.seminar-listing a{ font-family: 'Source Sans Pro', sans-serif; font-weight: 600; text-transform: uppercase}
.seminar-listing td{ padding: 0; margin: 0; vertical-align: top; padding-bottom: 10px}
.sold_out, .sold_out a{ color: #8e8b8d}
.seminar-listing .a-sub{ font-family: 'Lora', serif; font-weight: 200; text-transform: none}

.seminar-home{width: 266px}
.seminar-home h2{ text-transform: uppercase}

.beer-listing{ width: 360px; float: left; margin: 0 40px 60px 0}
.beer-listing:nth-of-type(odd){ margin-right: 0}
.versal{ font-family: 'Source Sans Pro', sans-serif;text-transform: uppercase; font-weight: 700}

a{ color: #554b4d; background-color: transparent}
a img{ border: none}
strong{ font-weight: 700}
em{font-family: 'Lora Italic', serif}

.containerContent{ width: 960px; margin: 32px 0 0px 0;background-color: #f3f0e6;box-shadow: #222 3px 3px 9px 0px;clear: both}
.ap-navigation{ border-top: 1px dotted #564c4d; margin-top: 40px; padding: 10px 0 0 0}

/** gallery part **/
.thumbnaillisting{ display: table}
.galleryImage{ display: table;float: left;margin: 0px 9px 9px 0; padding: 0}
.galleryImage div{ display: table-cell; width: 64px; height: 29px; text-align: center; vertical-align: middle}

.galleryImage:nth-of-type(8n){ clear: right; margin: 0 0 9px 0}

#ul-page-sitemap li{ list-style-type:none}
.filedownload{ color: #554b4d; text-transform: uppercase}
.filedownload:hover{ color: #000000}
.filedownload.pdf:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/pdf.gif')}
.filedownload.mp3:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/mp3.gif')}
.filedownload.jpg:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/jpg.gif')}
.filedownload.txt:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/txt.gif')}
.filedownload.doc:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/doc.png')}
.filedownload.xls:before{padding-right: 2px; position: relative; margin: -4px 0 0 0;content: url('../global/mime/xls.png')}
.image-signature{ font-size: 1em}
.image-copyright{ font-size: 1em;font-style:italic}
.content-spacer{ height: 2em}
.clear{ clear: both}
.image-text{ margin-top: 12px}
.code-only{ display: none}
.f-left{ float: left}
.f-right{ float: right}
.clear{ clear: both}


.swipe-wrap{overflow: hidden;position: relative}

.swiper-slide{max-height:467px;position:relative;bottom:0;overflow:hidden}

.prev_button{ background: url('../global/slide_previous.gif') no-repeat;width: 59px;height: 59px;opacity: .8;position: absolute;top: 50%;left: -34px;z-index: 152;overflow: hidden;text-indent: -9999em;margin-top: -25px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;box-shadow: 6px 6px 6px #444444}

.next_button{ background: url('../global/slide_next.gif') no-repeat ;width: 59px;height: 59px;opacity: .8;position: absolute;top: 50%;right: -34px;z-index: 152;overflow: hidden;text-indent: -9999em;margin-top: -25px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;box-shadow: 6px 6px 6px #444444}

.prev_button:hover,.next_button:hover{opacity: 1 !important;cursor:pointer}

.swiper_pagination{ position: absolute;margin:-26px 0 10px 12px; z-index: 150;text-align:left}



.swiper-pagination-bullet{margin-right:4px; height: 14px; width:32px;border-radius: 0;border: 1px solid #fff; cursor: pointer;transition: all 0.2s ease 0s;opacity:1;background:none}

.swiper-pagination-bullet:hover{background-color:#fff}
.swiper-pagination-bullet-active{background-color:#fff;border: 1px solid #fff}

.lightbox{display: none;position: fixed; z-index: 999;top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8) !important;text-decoration:none}
.lightbox:hover{background: rgba(0,0,0,0.8)}
.lightbox img, #ov-inner.multimedia-video, #ov-inner.multimedia-audio{max-width: 80vw;max-height: 80vh;margin-top: 2%}

.lightbox .caption{text-align: left; background-color: #ffffff; color:#5a5a5a;max-width:1280px; margin: 0 auto}
.lightbox .caption p{margin: 0; padding: 5px 10px; font-size: 1.1em}
.lightbox:target{outline: none; display: block}


.lightbox-wrp .swiper_container{ width:100%}
.lightbox-wrp .swiper_pagination{ margin: 10px 0 0 10px}
.lightbox-wrp .swiper_pagination .swiper-pagination-bullet:hover, .lightbox-wrp .swiper_pagination .swiper-pagination-bullet-active{ background-color:#e05710;border: 1px solid #e05710}
.lightbox-wrp .swiper_pagination .swiper-pagination-bullet{border: 1px solid #e05710}
.lightbox-wrp .swiper-wrapper{ height: 400 !important; width: auto !important; overflow:hidden}
.lightbox-wrp .swiper-slide{ height: auto !important; width: auto !important; max-height: 600px !important}
.lightbox-wrp .swiper-slide img{ width:100% !important; height: auto !important; max-height: 600px !important; object-fit: scale-down}
.lightbox-wrp .swiper-slide .caption{ width: 100% !important; background-color: #fff; display:block; position:absolute; bottom: 0}

.lightbox-wrp, #ov-inner.multimedia-video, #ov-inner.multimedia-audio{border: 22px solid #ffffff; border-top: 18px solid #ffffff;display:inline-block;box-shadow: 0px 3px 6px #444444;max-width: 90%;background: url(../global/loader_24.png) no-repeat center #f3f0e6;
	margin-top: 2%}
.lightbox-wrp{ height: auto !important}

.lightbox-wrp .caption{ width: auto !important; max-width: 100%}
.lightbox-wrp .caption p{ display:inline-block !important}
.lightbox-wrp .caption p{margin: 0; padding: 5px 10px; font-size: 1.1em}

.lbi{position: fixed; z-index: 40000;top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8) !important;text-decoration:none}

.lbi img{max-width: 100%; height: auto; max-height: 80vh}
.lbi .caption{text-align: left; background-color: #ffffff; color:#5a5a5a; margin: 0 auto; border-top:1px solid #eaeaea}
.lbi .caption p{display:inline-block !important;margin: 0; padding: 5px 0; font-size: 1em}

.lbi .lb-wrp{overflow:hidden;max-width: 90%; background: url(../global/loader_24.png) no-repeat center #f3f0e6; display: inline-block;box-shadow: 0px 6px 12px #000000; outline:1px solid #ffffff;margin-top: 5%}


/* flex */
.flex{display: flex;flex-wrap: wrap; width:984px}
ul.flex{margin:0; padding: 0; list-style: none;box-sizing: border-box}
ul.flex li{}

.list-content {
    display: flex;
    flex-direction: column;
    width: 100%;margin: 0 18px 18px 0
}
.tiles .page-topic1{font-size: 1.2em;line-height: 1.2em;margin: 6px 0 3px 0 !important}
.tiles .page-topic2{font-size: 1.2em;line-height: 1.2em;margin: 0 0 6px 0 !important}


.toggle-box{ display:inline-block; margin: 0; padding:18px 18px 20px 18px;max-width: 272px; height:320px; box-shadow: #222 3px 3px 9px 0px; overflow: hidden}
.toggle-box img{ width:100%; height: auto}

.cookie-policy{font-size: 1em; position:absolute; background-image: url('../global/bbm-logo.jpg'); background-position: 50% 20px; background-repeat: no-repeat; background-color: #f3f0e6; z-index:200;color:#554b4d;width: 40%; padding:0;margin: 0; left: 30% !important; right: 30% !important; border: 9px solid #554b4d;box-shadow: 2px 2px 38px #000000; display:inline-block;max-width: 90%; top: 120px}
.cookie-policy h3{ color:#554b4d; width:100%; border-bottom: 1px dotted #554b4d; padding:6px 0}
.cookie-policy a{ color: #554b4d}
.cookie-policy-innerwrap{ padding: 120px 40px 40px 40px; width:auto}
.cookie-policy button{background-color: #554b4d !important; color:#fff !important; outline: 1px solid #554b4d}
.cookie-policy button:hover{color:#a8a900 !important; outline: 1px solid #554b4d}
.cookie-policy .a-button a,.cookie-policy button{float: none; clear:both; margin-bottom:12px}
.cookie-policy p{margin: 0 auto 20px auto}
.cookie-policy label.cb-label{ width:45%}
.overlay-cookie{position: fixed;z-index: 199;top: 0;left: 0;width: 100%;height: 100%;text-align: center;background: rgba(0,0,0,0.8) !important}
body[rel=data-privacy] .overlay-cookie{display:none}
body[rel=data-privacy] .cookie-policy{ position:static; z-index:0; border:none; background-image:none; box-shadow:none;background-color:#3f3939; padding-bottom:30px;color:#ffffff; text-align:center; bottom:0; width:100%; left: auto; right: auto; max-width:100%;display: inline-block !important; font-size: 1.1em; margin:0}
body[rel=data-privacy] .cookie-policy h3{ color:#fff; width:100%; border-bottom: 1px dotted #fff; padding:6px 0}
body[rel=data-privacy] .cookie-policy-innerwrap{margin: 30px auto; text-align: left; width:960px;padding: 0 60px}

body[rel=data-privacy] .cookie-policy button{ outline: 1px solid #fff; color: #a8a900; background-color: transparent !important}
body[rel=data-privacy] .cookie-policy button:hover{ color:#a8a900 !important; background-color:#fff}
.cookie-policy .feedback-error{background-color: transparent}


/*div[rel=seminare] table{border: 1px solid #dede;border-collapse: collapse;margin: 0;padding: 0;width: 100%;table-layout: fixed}
div[rel=seminare] table caption{font-size: 1.5em;margin: .5em 0 .75em}
div[rel=seminare] table tr{background-color: #f8f8f8; border: 1px solid #ddd; padding: .35em}
div[rel=seminare] table th, div[rel=seminare] table td{padding: .625em; text-align: center}
div[rel=seminare] table th{font-size: .85em;letter-spacing: .1em;text-transform: uppercase}
*/
@media all and (max-width: 980px){
    #page-wrap, .page-header, footer, .containerContent, .containerMM{ width: 100% !important}
    .content-main, .box-main{width:auto !important}
    footer{text-align: center}
    footer ul{ float: none}
    ul.flex{ width:100%}
    .toggle-box{ max-width: 100% !important}
     ul.flex li{ display: flex; width: 33%}
    
    .containerMM ul li:first-child, .containerMM ul li{  width: 30%;margin: 18px 18px !important; text-align: left !important}
    .containerMM a.menuItem{ display: inline-block; text-align: left }
    
}

@media all and (max-width: 800px){
    .cookie-policy{width: auto; left: 10% !important; right: 10% !important;}
    
    .content-main{ margin: 32px}
    .beer-listing{ width: 300px}
    .beer-listing table{ width:auto}
    .beer-listing img, .beer-listing td{ width: auto}
    iframe{ display:inline-block; width: 100%}
    ul.flex{ }
    ul.flex li{ display: flex; width: 50%}
    
    .containerMM ul li{ float: none !important; clear: both !important; display:block !important; width: 100%; margin: 18px 0 !important; text-align: center !important}
    .containerMM ul li:first-child{ width: auto; text-align: center !important}
    .containerMM a.menuItem{ display: inline-block; width: 100%;text-align: center; float: none !important; clear: both !important}
    
    .swiper-slide img{object-fit: cover;
height: 100% !important;
min-height: 250px !important;
max-height: 250px !important;
width: 100% !important;}
}

@media all and (max-width: 640px){
    .cookie-policy button{ float: none; clear: both; margin-bottom: 6px; display:block; width:100%}
    .cookie-policy-innerwrap{padding-left: 20px; padding-right:20px}
    .cookie-policy label.cb-label{ width:90% !important; display:inline-block !important; clear:right}
    .containerContent{ margin-top: 0 !important; box-shadow: none}
    .content-main{ margin: 0 16px 16px 16px}
    .page-header{ margin-bottom:0}
    ul.flex{  margin-top:32px}
    .page-topic1{ font-size: 1.6em}
    footer ul li{ float: none; clear:both; display:block; text-align: left; margin: 0 0 10px 16px}
    
    .containerMM ul li{ float: none !important; clear: both !important; display:block !important; width: 100%; margin: 18px 0 !important}
    .containerMM ul li:first-child{ text-align: center !important}
    .containerMM a.menuItem{ display: inline-block; width: 100%;text-align: center; float: none !important; clear: both !important}
    #FMail img{ width: 100% !important}
    a[rel=bezugsquelle], a{ word-break: break-all }
    
    div[rel=bezugsquellen] table{ width: 100% !important}
    div[rel=seminare] table, div[rel=bezugsquellen] table{border: 0}
    div[rel=seminare] table thead, div[rel=bezugsquellen] table thead{border: none; clip: rect(0 0 0 0);height: 1px; margin: -1px; overflow: hidden;padding: 0; position: absolute;width: 1px}
    div[rel=seminare] table tr, div[rel=bezugsquellen] table tr{ border-bottom: 1px dotted #564c4d;display: block;margin-bottom: .625em}
    div[rel=seminare] table tr:last-of-type, div[rel=bezugsquellen] table tr:last-of-type{border-bottom: none}
    div[rel=seminare] table td, div[rel=bezugsquellen] table td{border-bottom: 1px dotted #ddd;display: block; width: auto !important; font-size: .85em; text-align: right}
    div[rel=bezugsquellen] table td{text-align: left}
    
    div[rel=seminare] table td::before, div[rel=bezugsquellen] table td::before{ content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase}
    div[rel=seminare] table td:last-child, div[rel=bezugsquellen] table td:last-child{ border-bottom: 0}
}
@media all and (max-width: 480px){
    .cookie-policy{width: auto; left: 20px !important; right: 20px !important;}
    .content-main img{ width: 100%; height: auto}
    .beer-listing img, .beer-listing td{ width: auto !important}
    
    ul.flex li{ display: inline-flex; width: 100%}
    .toggle-box{}
    .list-content{ margin-right: 0}
    
   #FMail input[type="text"], textarea, input[type="password"]{ display: inline-block !important; width: 93% !important; margin-right:0}
    label.cb-label{ width: 88% !important}
    
    .cookie-policy label.cb-label{ width: 80% !important}
    /*#ap-navigation{ display:none}*/
}