/* 
Theme Name: Gaswerk Eventbar
Version: 
Description: RHO
Author: ROMAN HOSPENTHAL aka RHO
Author URI: http://www.rhodesign.ch/
*/





/* ***************************************************
							Reset
*************************************************** */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, 
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;padding: 0;font-size: 100%;font-weight: inherit;font-style: normal;vertical-align: baseline;background: transparent;border: 0;outline: 0;}

/* HTML5 RESETS FOR OLDER BROWSERS */
article, aside, figure, figure img, hgroup, footer, header, nav, section {display: block;}
ol, ul { list-style: none; }blockquote, q { quotes: none; }blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }table { border-collapse: collapse; border-spacing: 0; }input, select { vertical-align: middle; }a img { border: 0; }:focus { outline: 0; }a:hover, a:active { outline: none; }

img {max-width:100%; height:auto}

/*  Clearfixes * */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear {clear: both;}

/* Opera Fix  */
body:before {content:"";height:100%;float:left;width:0;margin-top:-32767px;;}





/* ******************************************************************************************************
							Global Styles
****************************************************************************************************** */

html, body {width:100%;height:100%; -webkit-text-size-adjust: 100% !important;}
body {font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 16px; line-height: 20px; color: #6e6e6e; text-align:center; background: #000; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}


/* Images & Links */
a {color: #f43921;text-decoration:none; -webkit-transition: color .3s ease;-moz-transition: color .3s ease;-o-transition: color .3s ease;-ms-transition: color .3s ease;transition: color .3s ease;}
a:hover {color: #FFF;text-decoration:none;}
a img {border: none;outline: none;}

::selection {background: #f43921; /* Safari */}
::-moz-selection {background: #f43921; /* Firefox */}







/* ******************************************************************************************************
							FONT
****************************************************************************************************** */

/*
 * Legal Disclaimer
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * www.gaswerk-eventbar.ch
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2015
 */

@font-face {
    font-family: "BrauerNeue-Bold";
    src:url("fonts/lineto-brauerneue-bold.eot");
    src:url("fonts/lineto-brauerneue-bold.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-brauerneue-bold.woff") format("woff"),
        url("fonts/lineto-brauerneue-bold.ttf") format("truetype"),
        url("fonts/lineto-brauerneue-bold.svg#lineto-brauerneue-bold") format("svg");
    font-weight: normal;
    font-style: normal;
}






/* ******************************************************************************************************
							Main Containers
****************************************************************************************************** */

#wrap { width: 100%;text-align: left; height:auto !important;height:100%;min-height: 100%;position:relative;z-index:0; background: #000;}
#main { overflow: auto; padding-bottom:280px;  margin: 0px auto; width: 100%; }


.full {width: 100%;}
.outher {max-width: 1400px;}
.inner {max-width: 1040px;}

.lightgrey {background: #d2d2d2;}

.overflow {overflow: hidden; display: block;}

.margincenter {margin: 0 auto !important;}
.marginbottom20 {margin-bottom: 20px !important;}

.paddingtop15 {padding-top: 15px !important;}
.paddingtop40 {padding-top: 40px !important;}
.paddingbottom20 {padding-bottom: 20px !important;}
.paddingbottom40 {padding-bottom: 40px !important;}
.paddingbottom80 {padding-bottom: 80px !important;}

.textcenter {text-align: center !important;}



.buddybar {position: absolute;left: 42%; top: 40px;background-image: url(images/buddybar2.svg); background-size: 170px 158px;width: 170px; height: 158px;z-index: 99999; }
.no-svg .buddybar {background-image: url(images/buddybar2.png);}



.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {float:left;margin-right: 4%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;}

.span1{width: 4.66666666667%;}
.span2{width: 13.3333333333%;}
.span3{ width: 22%;}
.span4{ width: 30.6666666667%;}
.span5{ width: 39.3333333333%;}
.span6{ width: 48%;}
.span7{width: 56.6666666667%;}
.span8{width: 65.3333333333%;}
.span9{ width: 74%;}
.span10{ width: 82.6666666667%;}
.span11{width: 91.3333333333%;}
.span12{width: 100%;margin-right: 0;}

.last{ margin-right:0 !important; clear:right !important; }


.fotospan {width: 17%; margin-bottom: 20px; float:left; margin-right: 3%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}



/* **************************************************
			    		HEADER
************************************************** */
#header {height: 120px;	margin: 0 auto; position: relative; padding: 0}
#header .logo{text-indent:100%; white-space:nowrap; overflow:hidden; display:block; width:280px; height:67px; position: absolute; top: 25px; left: 0;  background: url(images/logonew.svg) no-repeat; background-size: 280px 67px; z-index: 99999; shape-rendering:crispEdges;}
.no-svg .logo { background-image: url(images/logonew.png) no-repeat; }








		
		
		
/* **************************************************
			    		MENU
************************************************** */

/*** ESSENTIAL STYLES SUCKERFISH***/
.menu, .menu * {margin: 0;padding: 0;list-style: none;}
.menu li {position: relative;}
.menu ul {position: absolute; display: none;top: 100%;z-index: 99;}
.menu > li {float: left;}
.menu li:hover > ul,.menu li.sfHover > ul {display: block;}
.menu a {display: block;position: relative;}
.menu ul ul {top: 0; left: 100%;}

/*** SKIN ***/
.menu {position: absolute; top: 55px; right: 0px}
.menu li {white-space: nowrap; *white-space: normal; -webkit-transition: background .1s; transition: background .1s; z-index: 9999;}
.menu li a {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 20px; line-height: 22px; letter-spacing: 0.12em; color: #6e6e6e; padding: 0 0 20px 0; margin:0 0 0 25px; display: block;text-decoration: none;text-transform: uppercase; font-weight: normal;}
.menu li a:hover {color:#f43921; }

/*** SUBMENU ***/
.menu ul {min-width: 200px; *width: 200px;  padding: 12px 8px 4px 0px; zoom: 1; background: #d2d2d2;}
.menu ul li  { margin: 0 0 8px 0; }
.menu ul li a {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 22px; color: #6e6e6e !important; padding: 0;  }
.menu ul li a:hover {color: #000 !important;}
ul.sub-menu li.current_page_item a {color: #f43921 !important;}

.menu ul li.current_page_parent a {}

.menu li.current_page_item a,
.menu li.current-menu-ancestor a,
.menu li.current-menu-item a,
.page-template-page_eventarchiv li.menu-item-22 a{text-decoration: none; color: #f43921;}		
		
		
		
/*** BURGER ***/
#nav-icon {display: none;width: 34px;height: 16px;position: absolute; right: 0; top: 40px;margin:0px;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;}
#nav-icon span {display: block;position: absolute;height: 2px;width: 100%;background: #FFF;border-radius: 0px;opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}

#nav-icon span:nth-child(1) {top: 0px;}
#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {top: 8px;}
#nav-icon span:nth-child(4) {top: 16px;}

#nav-icon.open span:nth-child(1),
#nav-icon.open span:nth-child(4) {top: 6px;width: 0%;left: 50%;}
#nav-icon.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg); transform: rotate(45deg);}
#nav-icon.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg); transform: rotate(-45deg);}
		
		
		
		

		
/*** MOBILE NAV ***/
nav#nav-mobile {display: none; z-index: 99999 !important; width: 100%; background: #313131;   }

#nav-mobile .menu {position: static; top: 0px; right: 0px; padding: 10px 0; }
#nav-mobile .menu > li {position: static; float: none; display: block}
#nav-mobile .menu ul {position: static; top: 0; filter: alpha(opacity=100);opacity: 1.0; background: #313131;  }

nav#nav-mobile ul#menu-hauptnavigation{position: relative; display: none; list-style-type: none; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: left; width:100%;  }

nav#nav-mobile li {display: block; margin: 0; }
nav#nav-mobile li:first-child {}
nav#nav-mobile li:last-child {}

nav#nav-mobile a {display: block; color:#6e6e6e; padding: 10px 5%; margin-left: 0px !important; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 20px; line-height: 22px; letter-spacing: 0.12em; }
nav#nav-mobile a:hover {color: #f43921; }
nav#nav-mobile li.current-menu-item a, nav#nav-mobile li.current_page_parent a{color: #f43921 !important; }

nav#nav-mobile ul li ul{width: 100% !important; display: block; padding: 0px;}
nav#nav-mobile ul li ul li{ padding: 0px; margin: 0 0 5px 0}
nav#nav-mobile ul li ul li:last-child{  margin-bottom: 0px !important}
nav#nav-mobile ul li ul li a{display: block; color:#6e6e6e !important; padding: 4px 8%; font-size: 17px; }
nav#nav-mobile ul li ul li a:hover{color:#f43921 !important;  }
nav#nav-mobile ul li ul li.current-menu-item a {color:#f43921 !important;  }




		
		
		
/* ******************************************************************************************************
							Content
****************************************************************************************************** */
	
#content {position: relative;  }	
#content p{margin: 0px;padding: 0px 0px 30px 0px;}

h1.titel {font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 25px !important; line-height: 33px; color: #f43921 !important; margin: 0; padding: 0 0 50px 0; }
h2.titel {font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 25px !important; line-height: 33px; color: #f43921 !important; margin: 0; padding: 0 0 50px 0; }
h4 {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 25px; line-height: 30px; letter-spacing: 0.12em; color: #4b4b4b; text-transform: uppercase; margin: 0 0 35px 0; }

.inhalt {display: block; overflow: hidden; padding-bottom: 50px;}

.textblack {color: #000; }
.textblack h3, .eventinhalt h3 {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: #000;}

sup { vertical-align: top; font-size: 0.7em; }
strong {font-weight: 700;}
.page-template-page_bandbewerbung strong{color: #4d4d4d; }
img{width: 100%; height: auto; display: block;}

#content ul li {padding: 8px 10px 8px 0; border-bottom: 1px solid #8b8b8b;}


.wp-caption {max-width: 100% !important;width: auto !important;}
p.wp-caption-text {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 10px !important;}


.fullwidthimg {width: 100%; margin: 0;
padding-top: 41%;
/* (img-height / img-width * width) */
                /* (640 / 1440 * 100) */
height: 0px;background-position: bottom center;background-repeat: no-repeat;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


.page-template-page_kontakt-php .inhalt a {color: #6e6e6e;}
.page-template-page_kontakt-php .inhalt a:hover {color: #f43921;}


ul li a[href$='.pdf'] {background: url(images/icon_pdf.png) center left no-repeat; background-size: 25px 25px;display:inline-block;padding-left:40px;line-height:25px;}
ul li a[href$='.zip'] {background: url(images/icon_zip.png) center left no-repeat; background-size: 25px 25px;display:inline-block;padding-left:40px;line-height:25px;}



.greyblock {color: #505050; font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 25px !important; line-height: 33px;}
.greyblock h2 {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 20px; line-height: 22px; letter-spacing: 0.12em; color: #7d7d7d; text-transform: uppercase; margin: 0 0 35px 0; }
.greyblock p{margin: 0px;padding: 0px 0px 30px 0px;}
.greyblock a {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; color: #7d7d7d; text-transform: uppercase; color: #f43921; margin-top: 10px;}
.greyblock a:hover {color: #000;}

.map iframe {width: 100%;height: 600px; display: block;}



.teamcontainer {display: block; overflow: hidden; clear: both; margin-bottom: 60px;}
.teamblock {display: block; overflow: hidden; clear: both; margin-bottom: 20px;}
.teamblock h4 {margin-bottom: 5px;}
.teamblock a{color: #000;}
.teamblock a:hover {color: #f43921;}




/* #########################  EVENT PREVIEW #########################  */

.span6.eventpreview:nth-child(odd) {margin-right: 0px !important}

.eventdate, .eventimg, .eventdesc {float:left; margin-right: 0%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; box-sizing:border-box;}

.eventdate {width: 12%; background: #f43921; text-align: center; height: 150px; color: #FFF}
.wochentag {margin-top: 15px; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 25px; line-height: 30px; letter-spacing: 0.12em;}
.wochentag, .tag {text-transform: uppercase; font-size: 22px; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 25px; line-height: 30px; letter-spacing: 0.12em;}
.monat {text-transform: uppercase; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 30px; letter-spacing: 0.12em; margin-top: 5px;}

.eventimg {width: 150px;}

.eventdesc {width: 52%; padding: 15px 10px 10px 20px; display: block;}
.eventart{font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; color: #b4b4b4; text-transform: uppercase; margin: 0 0 5px 0; }
.eventtitle, .eventtitle a {font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #f43921;}

.eventpreview a{display: block;}
.span6.ep:nth-child(odd) {margin-right: 0px !important}


.eventpreview {padding: 0; overflow: hidden; position: relative; height: auto; background: #313131 !important; margin-bottom: 40px}
.eventpreview .mask {position:absolute; top: 0;left: 0; background: #f43921; display: inline-block; height: 100%; width: 100%; opacity: 0; visibility:hidden;-webkit-transition: all 500ms ease-out;  -moz-transition: all 500ms ease-out;  -o-transition: all 500ms ease-out;  -ms-transition: all 500ms ease-out;  transition: all 500ms ease-out;}
.eventpreview:hover .mask {opacity:0.7;visibility:visible;}

.morecontent {position: absolute;padding: 5% 0 0 5%; width: auto; text-align: center;}
.morecontent .titel{ opacity: 1; color: #FFF; font-size: 18px; line-height: 22px; font-style: normal; text-transform: upperccase;}

.aktiv .eventpreview .mask {  opacity: 0.7 !important; visibility:visible !important; }  

.notfallpreview {position:absolute;bottom: 15px;}
.notfallpreview span{font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 18px; letter-spacing: 0.12em; color: #FFF; text-transform: uppercase; background: #000; padding: 3px 10px;}

.stu {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 8px; color: #939393; margin: 10px 0 0 0; text-transform: uppercase; letter-spacing: 0.06em;}

.allevents {text-align: center; padding-top: 40px; display: block; clear: both;}
.allevents a {text-align: center; text-transform: uppercase; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 16px; letter-spacing: 0.12em; color: #FFF; background: #f43921; padding: 15px 50px; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s;transition:.5s;}
.allevents a:hover {background: #313131;}








/* ######################### EVENT SINGLE #########################  */

.eventinfobox {padding: 0 0 20px 0; margin: 0 0 25px 0; border-bottom: 1px solid #8b8b8b; color: #000; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; letter-spacing: 0.12em; text-transform: uppercase;}
.eventinfobox span {color: #f43921; }

.eventinhalt {color: #000; }
.eventinhalt strong{color: #4d4d4d; }

.linkbox {padding: 20px 0 0 0; border-top: 1px solid #8b8b8b;  margin: 0 0 20px 0; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase;}
.linkbox span {color: #f43921; }
.linkbox a { color: #8c8c8c; margin-right: 15px; text-decoration: underline;}
.linkbox a:hover { color: #000; text-decoration: none;}

.social-button-container {padding: 20px 0 0 0;overflow: hidden; border-top: 1px solid #8b8b8b;}
.social-button {float: left;height: 20px;}
.social-button2 {float: left;height: 20px; margin: 0 40px 0 0}

.videocontainer { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 30px;} 
.videocontainer iframe, .videocontainer object, .videocontainer embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.vorverkauf {display: block; margin: 15px 0 0 0;}
.vorverkauf a {color: #8c8c8c; text-decoration: underline;}
.vorverkauf a:hover {color: #000; text-decoration: none;}

.notfall {display: block; margin: 15px 0 0 0;}
.notfall span{color: #FFF; background: #000; padding: 5px 40px;}

.single-veranstaltungen .rechte_spalte img {margin: 0 0 25px 0;}
.single-veranstaltungen .rechte_spalte p {margin: 0 !important; padding: 0 0 25px 0 !important;}
.single-veranstaltungen .rechte_spalte p img:last-child {margin: 0 !important; padding: 0 !important;}

.stucard { margin-top: 20px; border-top: 1px solid #8b8b8b; padding: 20px 0;}
.stucard img{width: 50%;}

/* ######################### EVENT SINGLE FOTOS#########################  */

.resume {color: #000; padding: 0 0 20px 0;}

ul.bilderliste li{border-bottom: 1px solid #323232; padding: 8px 0;}
ul.bilderliste li span {margin-top: 3px; width: 100px; float: left; color: #b4b4b4; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em;}
ul.bilderliste li a{font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 20px; line-height: 22px; color: #f43921;}
ul.bilderliste li a:hover{color: #FFF;}

ul.bilderliste li.span6:nth-child(even) {margin-right: 0px !important}

.pastdatum {font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; color: #000; text-transform: uppercase;}

.fotospan {width: 17%; margin-bottom: 20px; float:left; margin-right: 3%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background: #F43921;}
.fotospan a img {-webkit-transition: all 500ms ease-out;  -moz-transition: all 500ms ease-out;  -o-transition: all 500ms ease-out;  -ms-transition: all 500ms ease-out;  transition: all 500ms ease-out;}
.fotospan a img:hover {filter: alpha(opacity=20);opacity: 0.2;}





ul.bandarchivliste {}
ul.bandarchivliste li{width: 48%;  float: left;}
ul.bandarchivliste li:nth-of-type(even) {margin-right: 0px !important; float: right}

ul.eventarchivliste {}
ul.eventarchivliste li { border-bottom:1px solid #313131;}
ul.eventarchivliste li a{display: block; color: #7d7d7d; padding: 8px 0; -webkit-transition: background .3s ease;-moz-transition: background .3s ease;-o-transition: background .3s ease;-ms-transition: background .3s ease;transition: all .3s ease;}
ul.eventarchivliste li a:hover {background: #222}
ul.eventarchivliste li .eventarchivdate {width: 120px; float: left;}


/* ************* TOGGLE AUFKLAPPBOXEN ************* */

.trigger {
position: relative; 
font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif;
text-transform: uppercase; 
letter-spacing: 0.12em;
font-size: 20px; line-height: 24px;
color: #6d6d6d;
background: #000; 
padding: 14px 0px; 
cursor: pointer; 
border-bottom: 1px solid #6d6d6d;
-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;}
.trigger:hover {background: #222; color: #FFF; padding-left: 10px; }
.trigger.trigger_active {background: #333;color: #FFF; padding-left: 10px;}





/* ---- BUTTON + X ---- */
.trigger:before {content: "";position: absolute;display: block;right: 0px; top: 50%; width: 24px; height: 0; border-top: 2px solid rgba(109,109,109,1);transform: rotate(0deg);transform-origin: center;
-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;
}
.trigger:after {content: "";position: absolute;display: block;margin: auto; right: 0px; top: 1px; bottom: 0;width: 24px; height: 0; border-top: 2px solid rgba(109,109,109,1); transform: rotate(90deg);transform-origin: center;
-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;
}

.trigger:hover:before {border-top: 2px solid rgba(255,255,255,1); right: 10px;}
.trigger:hover:after {border-top: 2px solid rgba(255,255,255,1); right: 10px;}
.trigger.trigger_active:after {border-top: 2px solid rgba(255,255,255,1);transform: rotate(-45deg); right: 10px;}
.trigger.trigger_active:before {border-top: 2px solid rgba(255,255,255,1);transform: rotate(45deg); right: 10px;}






/* **************************************************
			    		Slider
************************************************** */

.flex-container a:active, .flexslider a:active {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

.no-js .slides > li:first-child {display: block;}

/* FlexSlider Theme
*********************************/
.flexslider { margin: 0 auto; position: relative;  zoom: 1; width: 100%; display: block; }
.flexslider .slides { zoom: 1; }

.caption {position: absolute; bottom: 20px; left: 20px; z-index: 99999; background: #323232; color: #f43921; padding: 12px 25px; font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 16px; line-height: 20px;}





/* **************************************************
			    		Slider 2 - BAR
************************************************** */

/* Browser Resets */
.flex-container a:active, .flexslider2 a:active {outline: none;}
.slides,.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/
.flexslider2 {margin: 0; padding: 0;}
.flexslider2 .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider2 .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}



/* FlexSlider Theme
*********************************/
.flexslider2 { margin: 0 auto; position: relative;  zoom: 1; width: 100%; display: block; }
.flexslider2 .slides { zoom: 1; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { text-decoration:none; display: block; width: 23px; height: 46px; margin: -50px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; cursor: pointer; text-indent: -9999px; }

.flex-direction-nav .flex-prev { background: url(images/pfeil_previous.png) no-repeat top; background-size: 23px 46px; left: 20px; }
.flex-direction-nav .flex-next { background: url(images/pfeil_next.png) no-repeat top; background-size: 23px 46px; right: 20px; }
.flex-prev:hover, .flex-next:hover {}

 
/* Control Nav - PAGINATION*/
.flex-control-nav {width: 100%; margin: 0 auto; position: relative; left: auto; right: auto; bottom: 0; text-align: center;margin-top: 15px;}
.flex-control-nav li {margin: 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {}
.flex-control-nav li a {width: 15px; height: 15px;display: block; background: url(images/pagination.png) no-repeat top; background-size: 15px 33px; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: bottom;}
.flex-control-nav li a.flex-active {background-position: bottom !important; cursor: default;}






/* **************************************************
			    		FOOTER
************************************************** */

#footer {width: 100%; height: 260px; overflow: hidden; clear:both; background: #000; position: relative; margin: -260px auto 0 auto; display: block; }
#footercontent {margin: 0 auto;overflow: hidden;display: block; padding: 20px 0 0 0;text-align: left; z-index: 99999 !important; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.08em; color: #6e6e6e; text-transform: uppercase;}

ul.footerdmenu {}
ul.footerdmenu li, ul.footerdmenu2 li {float: none; display: block;}
ul.footerdmenu li a, ul.footerdmenu2 li a{font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; text-transform: uppercase;  text-decoration: none !important; color: #f43921; }
ul.footerdmenu li a:hover, ul.footerdmenu2 li a:hover{color: #6e6e6e; }
ul.footerdmenu li.current_page_item a,
ul.footerdmenu li.current-page-ancestor a{ }

.socialicons {display: block; margin-top: 40px;}

a.facebook, a.twitter, a.instagram {float: left; margin-right: 30px; width: 35px; height: 35px; background-size: 35px 77px;text-indent: -9999px !important; display: block;}

a.facebook {background: url(images/icon_fb.png) no-repeat top;}
a.facebook:hover {background-position: bottom;}

a.twitter {background: url(images/icon_twitter.png) no-repeat top;}
a.twitter:hover {background-position: bottom;}

a.instagram {background: url(images/icon_insta.png) no-repeat top;}
a.instagram:hover {background-position: bottom;}




/* **************************************************
			    		Floats and MISCS
************************************************** */
.alignleft{float: left;margin: 0 22px 22px 0;}
.alignright{float: right;margin: 0 0 22px 22px;}
.aligncenter{margin-left: auto !important;margin-right: auto !important; }


table{width: 100% !important;	border-spacing:0px !important; margin: 0 0 40px 0;;}
table td{border-spacing:0px !important; vertical-align:top; font-size: 16px; line-height: 20px; padding: 8px 10px 8px 0; border-bottom: 1px solid #8b8b8b;}

.textright {text-align: right;}



/* **************************************************
			    		SMOOTH LINKS
************************************************** */
#hauptnavigation li a,
ul.footerdmenu li a, {
-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s;transition:.5s;}













/* **************************************************
			    		CONTACT FORM 7
************************************************** */
.textonly {margin:30px 0pt 10px 0!important; font-family: "BrauerNeue-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.12em; color: #4b4b4b; text-transform: uppercase;}


div.wpcf7 {	width: 100% !important; margin: 0 0 40px 0;	padding: 0;}

form input, form textarea { 
width:100%; 
box-sizing: border-box; 
font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 16px; line-height: 21px; 
color: #000;
padding:15px 20px;
background: #4b4b4b;
border: 1px solid #4b4b4b;
margin:0 0 20px 0;
-webkit-transition: .2s ease-in-out;-moz-transition: .2s ease-in-out;-o-transition: .2s ease-in-out;transition: .2s ease-in-out;
}
form input:hover, form textarea:hover {outline:none; background: #7d7d7d; border: 1px solid #7d7d7d;}
form input:focus, form textarea:focus {outline:none; background: #7d7d7d; border: 1px solid #7d7d7d;}


form textarea {height: 250px;}

form input[type=submit] { padding: 15px 80px; width:auto; border:1px solid #f43921; background:#f43921; color:#FFF; margin: 15px 0 0 0; -webkit-transition: .2s ease-in-out;-moz-transition: .2s ease-in-out;-o-transition: .2s ease-in-out;transition: .2s ease-in-out;}
form input[type=submit]:hover {background:#4b4b4b; border:1px solid #4b4b4b; cursor: pointer;}

.wpcf7 select {
    background-color: #474d4f;
    border: 1px solid #474d4f;
    margin: 0;
    padding: 20px; 
    margin:0 0 20px 0;
    width:100%; 
    box-sizing: border-box;
    font-family: 'Montserrat', Arial, serif; font-weight: 400; font-size: 16px; line-height: 22px; color: #262d2f;  
}




/*Styling Contact Form 7 validation with border*/
span .wpcf7-not-valid {border: 1px solid #7d8081;}


span .wpcf7-not-valid-tip {margin: -15px 0 15px 0; color: #7d8081 !important; font-size: 12px !important;}

/*Remove the ‘Please fill the required field’ message*/
span.wpcf7-not-valid-tip {display: none;}

/*Improve validation error message box*/
div.wpcf7-validation-errors {
    background: #ffe2e2;
    border: 1px solid #f43921;
    color: #f43921;
    
}
 


div.wpcf7-response-output {
margin: 20px 0 !important;
font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 22px !important; line-height: 30px;
padding: 0px !important; border: none !important; 
}

/*Hide validation error message box*/
div.wpcf7-validation-errors {display: none !important;}

/*Styling response based on mail sent status*/
.wpcf7-spam-blocked {color: #383838;}
 
.wpcf7-mail-sent-ng {color: #f43921;}
 
.wpcf7-mail-sent-ok {color: #6e6e6e;}



 

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


img.ajax-loader { display: none; }














/* ##########################################################################
                     M E D I A    Q U E R R I E S
				 http://jsfiddle.net/danield770/Vfffg/16/
########################################################################## */

/* ################### MOBILE  PORTRAIT LAYOUT 300PX  ################### */
@media screen and (max-width: 479px){

.inner {width: 92%;}
.outher {width: 100%;}

#nav-icon {display: block ; }
nav#nav-mobile {display: block; }
#hauptnavigation {display: none; }

#header {height: 100px;}
#header .logo{width:200px; height:48px; background-size: 200px 48px;}

.span4, .span5, .span6, .span7, .span8 { width: 100%;}

#footer {height: 400px;}
#footercontent .span1 {width: 16%}
#footercontent .span3 {width: 76%}
#footercontent .span8 {width: 76%; display: block; margin: 25px 0 0 20%}

.span6.ep {width: 100%}
.eventpreview{margin-bottom: 20px;}
.eventdate {width: 10%; height: 100px;}
.eventimg {width: 100px;}
.eventdesc {width: 52%; padding: 8px 10px; display: block;}
.wochentag {margin-top: 10px; font-size: 18px; line-height: 22px; }
.tag {margin-top: 8px; font-size: 18px; line-height: 22px; }
.monat {margin-top: 0px; font-size: 13px; line-height: 25px;}

.eventart{font-size: 15px; line-height: 20px; letter-spacing: 0.08em; margin: 0; }
.eventtitle, .eventtitle a { font-size: 18px; line-height: 21px;}

.map iframe {width: 100%;height: 300px;}

.fotospan {width: 30%; margin-bottom: 10px; margin-right: 3%; }
.caption { bottom: 5px; left: 5px; padding: 8px 12px;  font-size: 14px; line-height: 17px;}

/* CFORMS */
li#li--1, li#li-2-1, li#li--2, li#li-2-2 {width:97% !important; float: none !important;}
li#li-3-2, li#li-3-4, li#li-3-7, li#li-3-9, li#li-3-3, li#li-3-5, li#li-3-8, li#li-3-10 {width:97% !important; float: none !important;}

ul.bandarchivliste li{width: 100%;  float: none !important;}
ul.eventarchivliste li .eventarchivdate {width: 100%; float: none; display: block;}

.buddybar {left: 68%; top: 60px; background-size: 90px 83px; width: 90px; height: 83px;}

.teamblock  .span5 {margin-bottom: 20px;}


.allevents a {font-size: 15px; line-height: 15px; letter-spacing: 0.12em; color: #FFF; background: #f43921; padding: 15px 15px; }
}



/* ################### MOBILE  LANDSCAPE LAYOUT 480PX  ################### */
@media only screen and (min-width: 480px) and (max-width: 599px){

.outher {width: 100%;}
.inner {width: 92%;}

#nav-icon {display: block; top: 50px}
nav#nav-mobile {display: block; }
#hauptnavigation {display: none; }


.span4, .span5, .span6, .span7, .span8 { width: 100%;}

#footer {height: 400px;}
#footercontent .span1 {width: 16%}
#footercontent .span3 {width: 76%}
#footercontent .span8 {width: 76%; display: block; margin: 25px 0 0 20%}

.span6.ep {width: 100%}
.eventpreview{margin-bottom: 20px;}
.eventdate {width: 10%; height: 100px;}
.eventimg {width: 100px;}
.eventdesc {width: 65%; padding: 10px; display: block;}

.wochentag {margin-top: 10px; }
.monat {margin-top: 0px;}

.map iframe {width: 100%;height: 350px;}

.fotospan {width: 22%; margin-bottom: 15px; margin-right: 3%; }
.caption { bottom: 7px; left: 7px; padding: 10px 15px;  font-size: 14px; line-height: 17px;}

/* CFORMS */
li#li--1, li#li-2-1, li#li--2, li#li-2-2 {width:97% !important; float: none !important;}
li#li-3-2, li#li-3-4, li#li-3-7, li#li-3-9, li#li-3-3, li#li-3-5, li#li-3-8, li#li-3-10 {width:97% !important; float: none !important;}

ul.bandarchivliste li{width: 100%;  float: none !important;}
ul.eventarchivliste li .eventarchivdate {width: 100%; float: none; display: block;}

.buddybar {left: 68%; top: 40px; background-size: 100px 93px; width: 100px; height: 93px;}

.teamblock  .span5 {margin-bottom: 20px;}
}



/* ################### 7" Tablet 600px ################### */
@media only screen and (min-width: 600px) and (max-width: 759px){

.outher {width: 100%;}
.inner {width: 90%;}

#nav-icon {display: block; top: 50px}
nav#nav-mobile {display: block; }
#hauptnavigation {display: none; }


.span4, .span5, .span6, .span7, .span8 { width: 100%;}

#footer {height: 400px;}
#footercontent .span1 {width: 12%}
#footercontent .span3 {width: 80%}
#footercontent .span8 {width: 80%; display: block; margin: 25px 0 0 16%}

.span6.ep {width: 100%}
.eventpreview{margin-bottom: 20px;}
.eventdate {width: 12%;}
.eventimg {width: 150px;}
.eventdesc {width: 58%; }

.map iframe {width: 100%;height: 450px;}

.fotospan {width: 23%; margin-bottom: 10px; margin-right: 2%; }

/* CFORMS */
li#li--1, li#li-2-1, li#li--2, li#li-2-2 {width:97% !important; float: none !important;}
li#li-3-2, li#li-3-4, li#li-3-7, li#li-3-9, li#li-3-3, li#li-3-5, li#li-3-8, li#li-3-10 {width:97% !important; float: none !important;}

ul.bandarchivliste li{width: 100%;  float: none !important;}
ul.eventarchivliste li .eventarchivdate {width: 100%; float: none; display: block;}

.buddybar {left: 56%; top: 25px;background-size: 130px 120px;width: 130px; height: 120px;}

.teamblock  .span5 {width: 30.6666666667%;}
.teamblock  .span7 {width: 65.3333333333%;}
}






/* ################### iPad 780px ################### */
@media only screen and (min-width: 760px) and (max-width: 959px){

.outher {width: 100%;}
.inner {width: 80%;}

#nav-icon {display: block; top: 50px}
nav#nav-mobile {display: block; }
#hauptnavigation {display: none; }


.span6.ep {width: 100%}
.eventpreview{margin-bottom: 20px;}
.eventdate {width: 12%;}
.eventimg {width: 150px;}
.eventdesc {width: 58%; }

#footercontent .span1 {width: 8%}
#footercontent .span3 {width: 42%}
#footercontent .span8 {width: 42%; }

.buddybar {left: 53%; top: 25px;background-size: 140px 130px;width: 140px; height: 130px;}

}







/* ################### 960 ################### */
@media only screen and (min-width: 960px) and (max-width: 1140px){
.outher {width: 100%;}
.inner {width: 90%;}
}






/* ################### RETINA BG IMAGES  ################### */
@media all and (-webkit-min-device-pixel-ratio: 1.5) { 

ul li a[href$='.pdf'] {background: url(images/icon_pdf@2x.png) center left no-repeat; background-size: 25px 25px;}
ul li a[href$='.zip'] {background: url(images/icon_zip@2x.png) center left no-repeat; background-size: 25px 25px;}

}