/* 
    Created on : 01.06.2016, 07:30:16
    Author     : Andeas Methling
*/
h1 { font-size: 30px; }
h2 { font-size: 26px; }
h3 { font-size: 24px; }
h4 { font-size: 22px; }
a { text-decoration: none; color: #666666; padding: 0px; outline: none; }
b { font-weight: 700; }
img { border: none; outline: none; }
a > img:hover { opacity: 0.7;  -moz-transition:  opacity linear  0.2s 0.2s; -webkit-transition: opacity linear  0.2s 0.2s; -o-transition: opacity linear  0.2s 0.2s; transition: opacity linear  0.2s 0.2s;}
ul, li { list-style: none; margin: 0px; padding: 0px; }
.maxwidth { display: inline-block; width: 96%; max-width: 1200px; float: none; vertical-align: top; }
.white { background-color: #fff; }
.grey { background-color: #ccc; }
div.clearcontent { display: inline-block; width: 100%; height: 15px; padding: 0px; margin: 0px; }
header { text-align: center; z-index: 3000; }
header div { display: inline-block; margin: 0px; padding: 0px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation li.Online-Shop a { color: #95C11F; font-size: 20px; } 
@media only screen and (min-width:1026px){
div.fixedadditional {
    top: 45px;
    left: 0px;
    background-color: #fff!important;
    border-bottom: 1px solid #ccc;
    position: fixed;
    -moz-transition:    background-color linear  0.3s 0.3s;
    -webkit-transition: background-color linear  0.3s 0.3s;
    -o-transition:      background-color linear  0.3s 0.3s;
    transition:         background-color linear  0.3s 0.3s;
}
div.fixedadditional ul li { border-left: 1px solid #ccc!important; }
div.fixedadditional ul li a { color: #0077be!important; }
div.fixednavigation { position: fixed!important; top: 0px; left: 0px; z-index: 2000;  }
div.logofixed { width: 100px!important; position: fixed; top: 45px; left: 10%; padding-top: 10px!important; z-index: 100; }
/* .paddingtop { padding-top: 70px!important; } */
/* div.contentright.paddingtop { padding-top: 195px!important; } */
header { display: block; width: 100%; }
header > div.maxwidth > div#headertop { width: 100%;  padding-bottom: 10px; }
header > div.maxwidth > div#headertop > div.logo { width: 25%; padding-top: 1%; float: left; }
header > div.maxwidth > div#headertop > div.logo img { display: inline-block; width: 65%; height: auto; float: left; }
header > div.maxwidth > div#headertop > div.subordinatenavigation { width: 65%; float: left; padding-right: 15px; margin-top: 25px; text-align: right; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > div.links { width: auto; vertical-align: top; margin-right: 20px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul.lang{ display: inline-block; width: auto; vertical-align: top; }
header > div.maxwidth > div#headertop > div.subordinatenavigation li { display: inline-block; padding: 10px; border-right: 1px solid #cccccc; }
header > div.maxwidth > div#headertop > div.subordinatenavigation li a { display: inline-block; text-transform: uppercase; }
header > div.maxwidth > div#headertop > div.subordinatenavigation li.Online-Shop { background-image: url("/resources/css/images/joska_shop_red.svg"); background-size: 20px auto; background-repeat: no-repeat; background-position: left center; padding-left: 25px; } 
header #headertop > div.subordinatenavigation > div.links > ul > p.onlieshopdirekt { padding: 0px 0px 0px 25px; margin: 0px; text-align: left; }
}
@media only screen and (max-width:1025px){
body { padding-top: 105px; }
div.fixedadditional { position: fixed; top: 105px; left: 0px; background-color: #fff; border-bottom: 1px solid #cccccc; }
div.fixedadditional ul li { border-left: 1px solid #ccc!important; }
div.fixedadditional ul li a { color: #0077be!important; }
header { width: 100%; height: 105px; position: fixed; top: 0px; left: 0px; border-bottom: 1px solid #cccccc; }
header > div.maxwidth { width: 100%; }
header #headertop { width: 83%; margin-left: 17%; text-align: left; text-align: left; }
header #headertop > div.logo { width: auto; padding-top: 10px; float: left; }
header #headertop > div.logo > a > img { width: auto; height: 80px; }
header #headertop > div.subordinatenavigation { width: auto; padding: 25px 10px 0px 0px; float: right; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > div.links { width: auto; vertical-align: top; margin-right: 20px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul.lang { display: inline-block; width: auto; vertical-align: top; }
header #headertop > div.subordinatenavigation > div.links { margin-bottom: 10px; }
header #headertop > div.subordinatenavigation > div.links > ul > li, header #headertop > div.subordinatenavigation > ul.lang > li  { display: inline-block; float: none; padding: 5px; margin: 0px; border-right: 1px solid #cccccc; }
header #headertop > div.subordinatenavigation > div.links > ul > p.onlieshopdirekt { display: none; }
}
@media only screen and (max-width:700px){
header { height: 60px; }
header #headertop { margin-left: 60px; }
header #headertop > div.logo { margin-left: 40px; }
header #headertop > div.logo > a > img { height: 45px; }
header #headertop > div.subordinatenavigation { width: 96%; padding: 2%; position: fixed; bottom: 0px; left: 0px; text-align: left; background-color: #fff; border-top: 2px solid #0077be; }
header #headertop > div.subordinatenavigation > div.links,header #headertop > div.subordinatenavigation > ul.lang { display: inline-block; float: none; vertical-align: top; font-size: 15px; }
header #headertop > div.subordinatenavigation > div.links { width: auto; margin-bottom: 0px; margin-right: 0px!important; text-align: left; padding: 1%; }
header #headertop > div.subordinatenavigation > div.links > ul > li { border-left: none; }
header #headertop > div.subordinatenavigation > div.links > ul > li a { color: #0077be; }
header #headertop > div.subordinatenavigation > ul.lang { width: auto; margin-bottom: 0px; float: right; padding: 1%; }
}
@media only screen and (max-width: 400px){
header #headertop > div.subordinatenavigation > div.links { margin-right: 0px!important; }
header #headertop > div.subordinatenavigation > div.links > ul > li > a { font-size: 12px; }
}
@media only screen and (max-width: 340px){
header #headertop > div.subordinatenavigation > div.links { width: 100%!important; margin: 0px!important; text-align: center; border-bottom: 1px solid #ccc; }
header #headertop > div.subordinatenavigation > div.links > ul > li { border-right: none!important; }
header #headertop > div.subordinatenavigation > div.links > ul > li > a { font-size: 14px; }
}
#headerpic { width: 100%; height: auto; padding: 0px; margin: 0px; position: relative; z-index: 0; }
#headerpic > img { display: block; width: 100%; height: auto; position: relative; }
#headerpic > div.headline { display: block; width: 100%; padding: 0px; margin: 0px; position: absolute; bottom: 5%; border-bottom: none; }
#headerpic > div.headline > b { font-size: 40px; font-weight: 300; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 5px #000; }
.additional { display: block; width: 100%; height: auto; padding: 10px 0px 10px 0px; margin: 0px; background-color: #95C11F; border-bottom: 1px solid #fff; border-top: 1px solid #fff; z-index: 3; }
.additional > div.maxwidth > div.additionaltext > ul { display: inline-block; }
.additional > div.maxwidth > div.additionaltext > ul > li { display: inline-block; width: auto; float: none; vertical-align: top; margin: 0px 5px 0px 0px; padding: 0px 5px 0px 10px; border-left: 1px solid #fff; }
.additional > div.maxwidth > div.additionaltext > ul > li > a { display: inline-block; width: 100%; font-size: 24px; color: #fff; line-height: 35px; font-weight: 300; text-transform: uppercase; }
/* Goolge Maps */
#map_canvas { width: 100%; height: 500px; }
div.container { display: inline-block; width: 100%; padding: 0px; margin: 0px; }
div.container div.col-xs-6 { display: inline-block; width: 44%; padding: 1%; margin: 1%; float: none; vertical-align: top; }
div.container input { display: inline-block; width: auto; padding: 5px; margin: 5px; float: none; vertical-align: middle; border: 1px solid #ccc; }
div#directions-panel { display: inline-block; width: 96%; float: none; padding: 0px; margin: 2%; }
/* Columns */
.column-0,
.column-1,
.column-2,
.column-3,
.column-4 {
    display: inline-block; padding: 0px; margin: 0px 0px 15px 0px; vertical-align: top;
}
.column-0, .column-1 { width: 100%; }
.column-2 { width: 65%; }
.column-3 { width: 47.3333%; }
.column-4 { width: 33.3333%; }
.column-5 { width: 22.3333%; } 
/* Teaser */
div.teaser { display: inline-block; float: none; vertical-align: top; }
div.teaser strong { font-size: 18px; font-weight: 400; text-transform: uppercase; }
div.teaser > h3 > a { color: #000; }
div.teaser a.teaserlink { display: inline-block; line-height: 30px; float: right; padding-right: 45px; background-image: url("/resources/css/images/joska_go.svg"); background-repeat: no-repeat; background-position: center right; background-size: 30px; }
div.teaser.column-0, div.teaser.column-1 { border-bottom: 1px solid #ccc; }
div.teaser.column-2 { border-right: 1px solid #ccc; margin: 0px; }
div.teaser.column-2 > div.column-1.additionaltext { margin: 0px; }
div.teaser.column-3, div.teaser.column-5 { border-bottom: 1px solid #ccc; margin: 1%; }
@media only screen and (max-width: 1023px){
div.teaser.column-5  { width:100%; }
div.teaser.column-5 > div.column-1 > a { min-height: 20px!important; }
div.teaser.column-5 > div.column-1.picture { width: 33%; margin: 1%; float: none; vertical-align: top;}
div.teaser.column-5 > div.column-1.additionaltext { width: 53%; margin: 0% 1% 0% 8%; float: none; vertical-align: top; }
div.teaser.column-5 > div.column-1 > p { padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; }
}
div.teaser.column-4 { float: right; clear: right; border-bottom: 1px solid #ccc; }
div.teaser > div.additionaltext { margin-bottom: 0px; background-image: none; }
div.teaser.column-3 > div.additionaltext,
div.teaser.column-4 > div.additionaltext,
div.teaser.column-5 > div.additionaltext { border-bottom: none; }
div.teaser.column-5 div.column-1 > a {min-height: 50px; }
div.teaser a.icons { display: block; padding: 10px 0px 10px 0px; margin-bottom: 10px; font-size: 18px; text-transform: uppercase; font-weight: 400; }
div.teaser > div.blank > a.icons { padding: 15px 0px 5px 10px; margin-bottom: 5px; } 
div.teaser > div.galerie > a.icons,
div.teaser > div.video > a.icons,
div.teaser > div.event > a.icons,
div.teaser > div.shop > a.icons,
div.teaser > div.trophy > a.icons,
div.teaser > div.beergarden > a.icons,
div.teaser > div.bag > a.icons {
 padding: 15px 5px 0px 65px;
}
div.teaser > div.picture { position: relative; background-image: none; width: 100%; margin: 0px; padding: 0px; }
div.teaser.column-4 > div.picture { width: 94%!important; padding: 3%!important; }
div.teaser.column-1 > div.picture,
div.teaser.column-2 > div.picture { margin-top: 10px; }
div.teaser > div.picture.video { background-color: #3c3c3c; }
div.teaser > div.picture > a > img { display: block; width: 100%; height: auto; }
div.teaser > div.picture > div.icontetxt { display: block; width: 100%; background-repeat: no-repeat; background-position: top center; background-size: 40px; padding: 55px 0px 0px; margin: 0px; position: absolute; bottom: 10%; text-align: center; }
div.teaser.column-4 > div.picture > div.icontetxt { width: 94%; }
div.teaser > div.picture > div.icontetxt > a { display: inline-block; width: auto; max-width: 90%; float: none; padding: 5px 10px 5px 10px; color: #fff; background-color: #95C11F; vertical-align: bottom; }
div.teaser div.additionaltext > p,
div.teaser div.additionaltext > a,
div.teaser div.additionaltext > ul {
    padding: 0px 0px 0px 15px;
    margin: 10px 0px 10px 0px;
}
div.teaser div.additionaltext > ul > li { margin-left: 10px; list-style: square; list-style-position: outside; }
/* Styles Icons*/
div.headline.galerie,
div.teaser > .galerie,
div.headline.video,
div.teaser > .video,
div.headline.event,
div.teaser > .event,
div.headline.shop,
div.teaser > .shop,
div.headline.trophy,
div.teaser > .trophy,
div.headline.beergarden,
div.teaser > .beergarden,
div.headline.bag,
div.teaser > .bag {
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 60px auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0px;
}
div.headline.blank,
div.teaser > .blank {
    margin-bottom: 0px;
}
.galerie { background-image: url("/resources/css/images/joska_picture_galery.svg"); }
.video { background-image: url("/resources/css/images/joska_video.svg"); }
.event { background-image: url("/resources/css/images/joska_events.svg"); }
.shop { background-image: url("/resources/css/images/joska_shopping.svg"); }
.trophy { background-image: url("/resources/css/images/joska_trophy.svg"); }
.beergarden { background-image: url("/resources/css/images/joska_beergarden.svg"); }
.bag { background-image: url("/resources/css/images/joska_bag.svg"); }
div.teaser > div.picture > div.icontetxt.galerie { background-image: url("/resources/css/images/joska_picture_galery_free.svg"); }
div.teaser > div.picture > div.icontetxt.video { background-image: url("/resources/css/images/joska_video_free.svg"); }
div.teaser > div.picture > div.icontetxt.event { background-image: url("/resources/css/images/joska_events_free.svg"); }
div.teaser > div.picture > div.icontetxt.shop { background-image: url("/resources/css/images/joska_shopping_free.svg"); }
div.teaser > div.picture > div.icontetxt.trophy { background-image: url("/resources/css/images/joska_trophy_free.svg"); background-size: 25px auto!important; }
div.teaser > div.picture > div.icontetxt.beergarden{ background-image: url("/resources/css/images/joska_beergarden_free.svg"); }
div.teaser > div.picture > div.icontetxt.bag { background-image: url("/resources/css/images/joska_bag_free.svg"); }

section { display: inline-block; padding: 10px 0px 0px 0px; margin: 15px 0px 0px 0px; border: 1px solid #ccc; background-color: #fff; text-align: left; z-index: 0; }
section.sitefull { width: 96%;}
div.contentfull > div.picture { display: inline-block; float: none; vertical-align: top; }
section > div.contentleft { width: 28%; max-width: 320px; float: left; }
@media only screen and (min-width: 1025px){
div.teaser.column-3 > h3, div.teaser.column-5 > h3 { display: inline-block; min-height: 50px; font-size: 20px; }
section > div.contentleft > div.teaser.column-4 { width: 100%; border-bottom: 0px; } 
}
section > div.contentright { width: 70%; float: right;}
@media only screen and (max-width: 1024px){
a > img:hover { opacity: 1; }
section > div.contentleft { width: 100%; float: none; max-width: 100%; position: relative!important; top: 0px!important; }
section > div.contentright { width: 100%; float: none; }
}

/*Shopteaser */
div.shopteaser { display: inline-block; padding: 1%; margin: 1%; float: none; border-bottom: 1px solid #ccc; vertical-align: top; }
div.shopteaser.column-4 { width: 29.3333%; }
div.shopteaser.column-5 { width: 20.3333%; background-color: #fff; }
section.sitefull > div.shopteaser.column-4 { width: 23%; padding: 0.5%; margin: 0.5%; } 
div.shopteaser > div.column-1 { margin-bottom: 0px; }
div.shopteaser > div.picture,
div.shopteaser > div.text,
div.shopteaser > div.link { display: inline-block; width: 100%;}
div.shopteaser > div.picture > a > img { max-width: 100%; }
div.shopteaser > div.text > p.price { padding: 0px 0px 0px 15px; margin: 0px; font-size: 20px; }
div.shopteaser > div.link > a { display: inline-block; line-height: 30px; float: right; padding-right: 45px; background-image: url("/resources/css/images/joska_go.svg"); background-repeat: no-repeat; background-position: center right; background-size: 30px; }
div.shopteaser.column-5 div.picture > i.fa.fa-file-pdf-o { font-size: 120px; }
@media only screen and (max-width: 700px) {
div.shopteaser > div.text > p, div.shopteaser > div.text> b, div.shopteaser > div.picture > a > img { display: inline-block; padding-left: 15px; }
div.shopteaser.column-5 { width: 45%; }
}
/* Veranstaltungskalender */
div.teaser > div.event > p.eventscontent { display: inline-block; padding-left: 65px; font-size: 18px; text-transform: uppercase; }
div.event.close > p.eventscontent { display: inline-block; padding: 5px 0px 0px 65px; margin: 5px; font-size: 18px; text-transform: uppercase; }
div.teaser > div.days { display: inline-block; width: 98%; padding: 1%; margin: 10px 0px 10px 0px; border-bottom: 1px solid #ccc; }
div.teaser > div.days > div.picture_thumb { display: inline-block; width: 100%; padding: 0px; margin: 0px; float: none; }
div.teaser > div.days > div.picture_thumb > img { max-width: 100%; }
div.teaser > div.days > div.content { display: inline-block; width: 100%; padding: 0px; margin: 0px; float: none; }
div.teaser > div.days > div.content > p { margin: 0px; } 
div.teaser > div.days > div.content > b { display: inline-block; width: 100%; padding: 5px 0px 5px 0px; margin: 0px 0px 5px 0px; font-size: 16px; font-weight: 700; }
div.teaser > div.days > div.content > p.tilte { display:  inline-block; width:  100%; padding: 0px 0px 5px 0px; margin: 0px; font-size: 20px; line-height: normal; }
div.teaser > div.days > div.content > p.descriptiontext { display: inline-block; width: 65%; padding: 0px; margin: 0px; float: none; vertical-align: top; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.content, div.teaser.column-0.eventausgabe > div.column-1.days > div.picture { display: inline-block; float: left; vertical-align: top; } 
div.teaser.column-0.eventausgabe > div.column-1.days > div.content { width: 70%!important; float: right; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.picture { width: 25%!important; margin-right: 3%; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.picture > img { max-width: 100%; }
div.teaser.column-2 > div.days > div.content > p.descriptiontext,
div.teaser.column-2 > div.days > div.content > p.hour,
div.teaser.column-3 > div.days > div.content > p.descriptiontext,
div.teaser.column-3 > div.days > div.content > p.hour { width: 100%; }
div.teaser > div.days > div.content > p.hour { display: inline-block; width: 30%; padding: 5px 0px 0px 0px; margin: 0px; float: right; vertical-align: top; text-align: right; } 
div.teaser > div.eventscontent > p { padding: 0px; margin: 0px; }
div.teaser > div.eventscontent > a { display: inline-block; width: 98%; padding-left: 1%; font-size: 20px; line-height: 50px; background-image: url("/resources/css/images/joska_go.svg"); background-position: right center; background-repeat: no-repeat; background-size: 45px auto; }
div.teaser.column-4.eventausgabe > div.days > div.picture_thumb { width: 33%; margin-right: 2%; vertical-align: top; }
div.teaser.column-4.eventausgabe > div.days > div.content { width: 65%; vertical-align: top; }
div.teaser.column-4.eventausgabe > div.days > div.picture_thumb > img { width: 100%; height: auto; }
div.teaser.column-4.eventausgabe > div.days > div.content > p.hour, div.teaser.column-3.eventausgabe > div.days > div.content > p.hour { width: 100%; text-align: right; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.picture, div.teaser.column-1.eventausgabe > div.column-1.days > div.content  { display: inline-block; float: none; vertical-align: top; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.picture,
div.teaser.column-2.eventausgabe > div.column-1.days > div.picture_thumb,
div.teaser.column-3.eventausgabe > div.column-1.days > div.picture_thumb { width: 40%; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.picture > img { max-width: 100%; hanging-punctuation: allow-end; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.content,
div.teaser.column-2.eventausgabe > div.column-1.days > div.content,
div.teaser.column-3.eventausgabe > div.column-1.days > div.content { width: 55%; margin-left: 3%; vertical-align: top; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.content b, div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.tilte, div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.descriptiontext { width: 100%; } 
div.teaser.column-1.eventausgabe > div.column-1.days > div.content b { font-size: 20px; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.content p.descriptiontext,
div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.descriptiontext { width: 100%; margin: 1% 0% 1% 0%; padding: 1% 0% 1% 0%; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
a.google-eventlink { display: inline-block; width: 100%; padding: 1% 0% 1% 0%; color: #0077be; font-size: 18px; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.content p.location,
div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.location,
div.teaser.column-0.eventausgabe > div.column-1.days > div.content p.hour,
div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.hour { display: inline-block; width: 46%; margin: 0% 2% 0% 0%; float: none; vertical-align: top; }
div.teaser.column-0.eventausgabe > div.column-1.days > div.content p.location,
div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.location { width: 48%; padding-right: 1%;  border-right: 1px solid #ccc; }
div.teaser.column-4.eventausgabe > div.column-1.days > div.content > p.descriptiontext { display: none; }
div.teaser.column-1.eventausgabe, div.teaser.column-2.eventausgabe, div.teaser.column-3.eventausgabe, div.teaser.column-4.eventausgabe { border-bottom: 0px; }
div.eventausgabe.close { display: none; }
div.teaser.eventausgbe.event, div.event.close { background-repeat: no-repeat; background-size: 50px auto; }
div.teaser.eventausgbe.event > button { margin-left: 60px; }
div.event.close > button { margin-left: 5px; float: right; }
div.teaser.column-4.eventausgabe > div.days > div.content > p.tilte { font-size: 16px; }
div.teaser.column-4.eventausgabe > div.days > div.content > b, div.teaser.column-4.eventausgabe > div.days > div.content > p.hour { font-size: 13px; font-weight: 400; }
div.teaser.column-4.eventausgabe > div.days > div.content > p.hour { margin-right: 10px; }
@media only screen and (max-width: 1024px) {
div.teaser > div.event > p.eventscontent { padding-left: 45px; margin: 10px 0px 5px 0px; }
div.teaser > div.eventscontent > a { line-height: 30px; background-size: 30px auto; font-size: 18px; margin-top: 2%; }
}
@media only screen and (max-width: 767px) {
div.teaser { margin-bottom: 1%!important; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.picture, div.teaser.column-1.eventausgabe > div.column-1.days > div.content  { width: 100%;  }
div.teaser > div.days > div.content > p.tilte { font-size: 16px; }
div.teaser.column-1.eventausgabe > div.column-1.days > div.content p.descriptiontext, div.teaser.column-1.eventausgabe > div.column-1.days > div.content b { width: 96%; }
div.teaser > div.days { margin: 0px 0px 0px 0px; }
div.teaser.column-1 > div.picture,
div.teaser.column-2 > div.picture { margin-top: 0px; }
div.teaser.column-2 > div.additionaltext { border-bottom: 0px; }
}

/* Bild Texteditor */
div.headline { display: block; border-bottom: 1px solid #999999; padding: 10px 0px 0px 10px; margin-bottom: 15px; }
div.contentfull { display: inline-block; width: 98%; padding: 0px; margin: 1%; }
div.contentfull.green { padding: 2% 0% 2% 0%; margin: 2% 0% 2% 0%; border-top: 1px solid #00cc66;  border-bottom: 1px solid #00cc66; }
div.contentfull.green > h1 { color: #00cc66; }
section.sitefull > div.contentfull { display: inline-block; width: 100%; padding: 0px; margin: 0px; }
div.contentfull > div.headline > h1,
div.contentfull > div.headline h2 {
    padding-left: 60px;
    margin: 0px 0px 10px 0px;
}
@media only screen and (max-width: 1024px) {
div.contentfull > div.headline > h1,
div.contentfull > div.headline h2 {
    padding-left: 40px;
}    
}    
div.contentfull > div.headline.blank > h1,
div.contentfull > div.headline.blank > h2 {
    padding-left: 15px;
}
div.headline.red { background-color: #95C11F; color: #fff; border-bottom: none; padding: 5px; margin: 5px; }
div.headline.blue { background-color: #0077be; color: #fff; border-bottom: none; padding: 5px; margin: 5px; } 
div.headline.red > h1, div.headline.red > h2, div.headline.red > h3, div.headline.blue > h1, div.headline.blue > h2, div.headline.blue > h3 { padding-left: 10px!important; margin: 5px!important; border-bottom: none!important; font-weight: 400;  }
div.contentfull > div.clearer { display: inline-block; width: 100%; }
div.contentfull > div.top { display: inline-block; width: 100%; text-align: center; }
div.contentfull > div.top.column-1 { float: none; vertical-align: top; }
div.contentfull > div.picture, div.contentfull > div.column-1 > div.picture { display: inline-block; position: relative; }
div.contentfull > div.picture img { max-width: 100%; }
div.contentfull > div.picture > div.description { text-align: center; }
div.contentfull > div.picture > div.description > p,
div.contentfull > div.picture > div.column-1 > p {
    padding: 0px; margin: 2px 0px 0px 2px;
} 
div.contentfull > div.picture > div.picturelink, div.contentfull > div.picture > div.columm-1 > div.picturelink { display: inline-block; width: 100%; position: absolute; left: 0px; bottom: 20px; text-align: center; }
div.contentfull > div.picture > div.columm-1 { display: inline-block; width: auto; padding: 1%; position: relative; float: none; vertical-align: top; }
div.contentfull > div.picture > div.picturelink.description { bottom: 55px; }
div.contentfull > div.picture > div.picturelink > a.dmbutton.a2, div.contentfull > div.picture > div.columm-1 > div.picturelink > a.dmbutton.a2 { display: inline-block; width: 25px; height: 25px; padding: 10px; float: none; color: #95C11F; background-color: #fff;  }
div.contentfull > div.picture > div.picturelink > a.dmbutton.a2 > i { font-size: 25px; }
div.contentfull > div.picture.column-1 img { max-width: 100%; }
div.contentfull > div.clearer.top { border-top: 1px solid #999999; }
div.contentfull div.text { display: inline-block; text-align: left; }
div.contentfull div.text p,
div.contentfull div.text b,
div.contentfull div.text ul,
div.contentfull div.text h1,
div.contentfull div.text h2,
div.contentfull div.text h3,
div.contentfull div.text h4 {
    padding: 0px 15px 0px 15px;
}
div.contentfull div.text ul > li { list-style-type: square; list-style-position: outside; margin-left: 20px; padding: 5px 0px 5px 0px; }
div.contentfull div.left { display: inline-block; width: auto; float: none; padding: 5px; vertical-align: top; }
div.contentfull div.picture.left,
div.contentfull div.picture.right {
    width: 30%;
}
div.contentfull div.picture.left img,
div.contentfull div.picture.right img {
    max-width: 100%!important;
}
div.contentfull div.picture.right { float: right; text-align: right; }
div.contentfull div.picture.left { text-align: left; }
div.contentfull div.clearer.left,
div.contentfull div.clearer.right {
    width: 65%; float: right;
}
div.contentfull div.clearer.column-3  div.clearer.left.column-3,
div.contentfull div.clearer.column-3  div.clearer.right.column-3 {
    width: 100%; background: gold;
}
div.contentfull div.text.column-3 { width: 50%; margin: 1% 0% 1% 0%; }
div.clearer > div.text.column-3.text-one { width: 48%; padding-right: 1%; float: left; border-right: 1px solid #999999; }
/* Ende Editor */ 

/* Permanent Content */
div.permanentcontent { display: inline-block; border-bottom: 1px solid #ccc; }
div.contentright > div.permanentcontent { border-right: 0px; }
div.permanentcontent ul li { list-style: square; list-style-position: inside; padding-left: 2%; }
div.permanentcontent.column-1 { width: 98%; margin: 1%; }
div.contentleft > div.permanentcontent.column-1 { width: 96%; padding: 2%; margin: 0px 0px 10px 0px; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }
@media only screen and (min-width: 1025px){ 
div.contentleft > div.permanentcontent.column-1, div.contentleft > div.permanentcontent.column-2, div.contentleft > div.permanentcontent.column-3, div.contentleft > div.permanentcontent.column-4 { width: 96%; padding: 2%; margin: 0px 0px 10px 0px; }
div.contentleft > div.permanentcontent b, div.contentleft > div.permanentcontent strong { font-size: 16px!important; padding: 0px; margin: 2px 0px 2px 0px; font-weight: 300; }
div.contentleft > div.permanentcontent h3 { font-size: 16px; font-weight: 400; }
div.contentleft > div.permanentcontent p { padding: 0px; margin: 5px 0px 5px 0px; }
div.contentleft >  div.permanentcontent > div.column-1.left, div.contentleft >  div.permanentcontent > div.column-1.top { width: 96%; float: none; border-left: none; }
div.contentleft > div.permanentcontent div.picture.left > img { max-width: 70%; }
}
div.permanentcontent > div.column-1 { width: 98%; padding: 1%; margin-bottom: 0px; }
div.permanentcontent > div.column-1.left { width: 62%; border-left: 1px solid #ccc; float: right; } 
div.permanentcontent div.picture { text-align: center; }
div.permanentcontent div.picture.left { width: 33%; float: left; border-left: none;  } 
div.permanentcontent div.picture.left > img { max-width: 100%; }
div.permanentcontent > div.column-1 > b { display: block; padding-bottom: 10px; font-size: 20px; font-weight: 300; text-transform: uppercase; }
div.permanentcontent > div.column-1 img { max-width: 100%; }
div.permanentcontent > div.column-1 > div.text-one.column-3 { width: 46%; margin-right: 1%; border-right: 1px solid #ccc; }
@media only screen and (max-width: 700px){ 
div.permanentcontent div.picture.left, div.permanentcontent > div.column-1.left  { width: 100%; float: none; border-left: none;  }
div.permanentcontent div.picture.left > img { max-width: 50%; }
}    
@media only screen and (min-width: 1025px){  
div.onlymobile { display: none;}

}
@media only screen and (max-width: 1024px){
div.onlymobile { display: inline-block; width: 98%; margin: 1%; } 
div.contentleft > div.permanentcontent.column-1 {  } 
}
@media only screen and (max-width: 650px){
div.onlymobile { display: inline-block; width: 98%; margin: 1%; }        
div.permanentcontent > div.column-1 > div.text-one.column-3 { border-right: 0px; }
}
/* Youtube Videos */
div.youtubevideo { padding: 1%; margin-bottom: 15px; background-color: #3c3c3c; }
div.colomn-1.youtubevideo { width: 98%; }
div.column-3.youtubevideo { width: 48%; }
div.column-4.youtubevideo { width: 31.3333%; }

/* Galery */
div#portfoliowrap { display: inline-block; width: 100%; }
div#portfoliowrap > h2, div#portfoliowrap h3 { padding-left: 15px; }
div#portfoliowrap > div.portfolio { display: inline-block; width: 100%; text-align: center; }
div#portfoliowrap > div.portfolio > div.column-4 { width: 30.3333%; margin: 1%; position: relative; }
div#portfoliowrap > div.portfolio > div.column-4 > div.column-1 { margin-bottom: 0px; position: relative; }
div#portfoliowrap > div.portfolio > div.column-4 > div.column-1 > b { font-weight: 400; }
div#portfoliowrap > div.portfolio img { width: 100%; height: auto;}
div#portfoliowrap > div.portfolio > div.column-4 div.he-view { display: inline-block; width: 100%; position: absolute; bottom: 10px; left: 0px; text-align: center; }
div#portfoliowrap > div.portfolio > div.column-4 div.he-view a { display: inline-block; width: 30px; height: 30px; padding: 5px; background-color: #95C11F; color: #fff; }
div#portfoliowrap > div.portfolio > div.column-4 div.he-view a:hover { background-color: #fff; color: #95C11F; }
div#portfoliowrap > div.portfolio > div.column-4 div.he-view i { font-size: 25px; }
div.contentfull div.clearer.right { float: left; }

/* Formulare */
form, fieldset, div.form  { display: inline-block; width: 100%; float: none; padding: 0px; margin: 0px; border: none; outline: none; }
.yform > form > fieldset { display: inline-block; width: 98%; padding: 1%; margin: 1% 0% 1% 0%; border: 1px solid #ccc; }
.yform > form > fieldset > legend { display: inline-block; width: 90%; padding: 1%; margin: 1%; border: 1px solid #ccc; }
input, text, textarea { display: inline-block; padding: 5px!important; outline: none; border: none; margin: 0px!important; background-color: #fff!important; border: 1px solid #ccc; }
input.submit { margin-top: 5px!important; background-color: #0077be!important; color: #fff!important; }
div#rex-yform,
div.checkbox.yform-element > label {
    display: inline-block;
    width: 96%;
    float: none;
    padding: 5px;
    margin: 0px;
}
div.yform-element { display: inline-block; width: 100%; padding: 0.5% 0% 0.5% 0%; margin: 0.5% 0% 0.5% 0%; }
div.checkbox.yform-element, div.form-group { display: inline-block; width: 100%; padding: 0.5% 0% 0.5% 0%; margin: 0.5% 0% 0.5% 0%; }
div.checkbox > label > input[type="checkbox"] { display: inline-block; width: 10%!important;  }
div.yform-element > label.control-label { }
label, input, text, textarea, div.radio, span.input-group-addon, div.form-inline  {
    display: inline-block;
    width: 48%;
    float: none;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    vertical-align: top;
}
div.radio { float: right; clear: right; margin-right: 3%; }
div.radio > label { width: 100%; padding: 0px; margin: 5px 0px 5px 0px; }
div.radio > label > input[type="radio"] { width: auto; }
button { display: inline-block; width: auto; float: none; padding: 10px; background-color: #0077be; color: #fff; outline: none; border: none; }
div.form button { margin: 2% 0% 0% 47%; }
div.alert.alert-danger { display: inline-block; width: 98%; padding: 1%; float: none; background-color: #95C11F; color: #fff; }
div.form-group.yform-element.has-error { color: #95C11F; }
button.btn.btn-primary { width: 48%; margin: 2% 0% 2% 49%; }
/* Footer */
footer { display: block; width: 100%; height: 60px; z-index: 10; }
footer > div.links { display: inline-block; width: 100%; margin: 10px 0px 10px 0px; padding: 20px 0px 20px 0px; border-bottom: 1px solid #666666; border-top: 1px solid #666666; }
footer > div.links > ul { display: inline-block; }
footer > div.links > ul > li { display: inline-block; float: none; margin: 0px 5px 0px 5px; padding: 0px 10px 0px 0px; border-right: 1px solid #666666; }
footer > div.sociallinks { display: inline-block; width: 100%; margin: 10px 0px 10px 0px; padding: 20px 0px 20px 0px; }
footer > div.sociallinks > p.social-links { display: inline-block; float: none; margin: 0px 5px 0px 5px; padding: 0px 5px 0px 0px; line-height: 43px; color: #000; }
footer > div.sociallinks > p.social-links > a, footer > div.maxwidth > div.links > ul > li > a  { color: #000; }
footer > div.sociallinks i.fa { padding-right: 10px; font-size: 30px; line-height: 43px; vertical-align: middle; color: #000;}

/* Social Media Content */
i.fa_big { font-size: 30px; margin: 1% 5% 1% 1%; color: #0077be; }
p.fa_big > a { font-size: 20px; font-weight: 300; margin: 1% 5% 1% 1%; color: #0077be; }

@media only screen and (max-width: 767px){ 
footer > div.sociallinks > p.social-links > a { color: #000; }
i.fa_big { font-size: 20px; }
p.fa_big > a { font-size: 16px; }
}    
/* Actionboox */
div#cookiedingsbums {
    width: 99%;
    height: 1px;
    padding: 1%;
    left: 0px;
    z-index: -1;
    border-top: 1px solid #ccc;
    background-color: #fff;
    opacity: 1;
    position: fixed;
    bottom: -110%; 
background-color: white; }
div#cookiedingsbums.show {
    height: auto!important;
    opacity: 1;
    bottom: 0px;
    z-index: 1000!important;
   -webkit-transition: all 5s ease-in;
    -moz-transition: all 5s ease-in;
    -o-transition: all 5s ease-in;
    -ms-transition: all 5s ease-in;
    transition: all 5s ease-in;
}
div#cookiedingsbums.show > div.maxwidth > span#cookiedingsbumsCloser { display: inline-block; width: auto; height: 20px; padding: 10px; float: right; color: #fff; background-color: #95C11F; cursor: pointer; }
div#cookiedingsbums.show > div.maxwidth { width: 100%; padding: 0px; margin: 0px; }
div#cookiedingsbums.show > div.maxwidth > div.column-4 { width: 23%; margin: 0% 1% 0% 1%; float: none; clear: none; text-align: left; }
div#cookiedingsbums.show > div.maxwidth > div.column-4 > div.column-1 { background-size: 40px!important; } 
div#cookiedingsbums.show > div.maxwidth > div.column-4 > div.column-1 > a.icons { padding: 5px 5px 0px 45px; font-size: 16px; }
div#cookiedingsbums.show > div.maxwidth > div.column-4 > div.column-1.blank > a.icons { padding: 5px 5px 0px 10px; }
div#cookiedingsbums.show > div.maxwidth > div.column-4 > div.column-1.additionaltext { border-bottom: 0px; }
div#cookiedingsbums.show > div.maxwidth > div.column-4 > div.column-1.additionaltext > p { font-size: 14px; }
@media only screen and (max-width:1024px){
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
div#cookiedingsbums, div#cookiedingsbums.show { display: none; }
/* Teaser */
div.teaser.column-1, div.teaser.column-2  { border-bottom: 1px solid #ccc; } 
/* styles Icons*/
div.teaser a.icons, div.teaser strong { font-size: 15px; }
div.teaser > div.blank > a.icons { padding: 5px; }
div.headline.galerie,
div.teaser > .galerie,
div.headline.video,
div.teaser > .video,
div.headline.event,
div.teaser > .event,
div.headline.shop,
div.teaser > .shop,
div.headline.trophy,
div.teaser > .trophy,
div.headline.beergarden,
div.teaser > .beergarden {
    background-size: 40px auto;
    background-position: left top 5px;
    min-height: 30px;
}
div.teaser > div.galerie > a.icons,
div.teaser > div.video > a.icons,
div.teaser > div.event > a.icons,
div.teaser > div.shop > a.icons,
div.teaser > div.trophy > a.icons,
div.teaser > div.beergarden > a.icons {
    padding: 5px 5px 0px 45px;
    min-height: 30px;
}
div.teaser > div.picture > div.icontetxt { background-size: 25px!important; padding: 35px 0px 0px 0px!important; }
div.teaser > div.picture > div.icontetxt.trophy { padding: 50px 0px 0px 0px!important; }
div.teaser > div.picture > div.icontetxt > a { padding: 5px!important; }
}
@media only screen and (min-width: 1200px){
section.sitefull > div.teaser.column-4 > div.picture.blank { width: 180px!important; height: 180px; float: left!important; margin: 0px!important; padding: 0px!important; position: relative; overflow: hidden; text-align: center; }
section.sitefull > div.teaser.column-4 > div.picture.blank > a > img { display: inline-block;  height: 180px; width: auto; position: absolute; left: -25%; }
section.sitefull > div.teaser.column-4 > div.icontetxt.blank,
section.sitefull > div.teaser.column-4 > div.additionaltext.blank,
section.sitefull > div.teaser.column-4 > div.column-1.blank {
    width: 45%; float: right; margin-bottom: 0px;
}
}
@media only screen and (max-width: 650px){
body { padding-top: 60px; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }
.additional { display: none; }
div.fixedadditional { display: none; }
#map_canvas { height: 250px; }
#headerpic > div.headline > b { font-size: 20px; }
iframe { max-height: 220px!important; }
section.sitefull { width: 94%!important; }
.column-2 { width: 100%; }
.column-3,
.column-4,
div.teaser.column-4 {
    width: 100%!important;
    margin: 1% 0% 1% 0%!important;
    float: none;
}
div.teaser.column-4 > div.picture { width: 100%!important; padding: 0%!important; }
div.contentfull div.picture { width: 100%!important; padding: 0px!important; margin: 0px!important; text-align: center; }
div.contentfull div.picture img { width: 100%!important; padding: 0px!important; }
div.contentfull div.clearer { width: 100%!important; padding: 0px!important; }
div.contentfull div.text.column-3,
div.clearer > div.text { width: 100%!important; padding: 0px!important; margin: 0px!important; border-right: 0px!important; }
.yform > form > fieldset, .yform > form > fieldset > legend { border: 0px; }
label, input, text, textarea, div.radio  {
    width: 96%!important;
    padding: 5px 0px 5px 0px!important;
}
div.form button { margin-left: 0%; float: right; margin-right: 2%; margin-bottom: 2%; }
form#routenplaner input { margin-bottom: 5px!important; }
button.btn.btn-primary { width: 94%; padding: 3%; margin: 1%; }
footer { height: auto!important; margin-bottom: 65px!important; margin-top: 10px!important; }
footer > div.links { padding: 0px; margin: 2% 0% 2% 0%; border-top: 1px solid #ccc; border-bottom: 0px; }
footer > div.links > ul > li { border-right: 0px; margin: 1% 0% 1% 0%; }
footer > div.sociallinks { width: 98%; padding: 0px; margin: 0px; border-top: 1px solid #ccc;  }
footer > div.sociallinks > p.social-links { font-size: 12px; padding: 0px; line-height: 29px; }
footer > div.sociallinks i.fa { font-size: 20px; line-height: 29px; }
}
@media only screen and (max-width: 500px){
#headerpic > div.headline > b { display: none; }
}
/* Suche */
div.searchresults { width: 96%; padding: 0% 1% 0% 1%; margin: 0% 1% 0% 1%; }
input.search[type="submit"], input.search[type="text"], label.search { max-width: 45%!important; padding: 1%!important; margin: 1% 0% 1% 0%!important; }
input.search[type="submit"] { background-color: #0077be!important; color: #fff; }
input.search[type="text"]:focus { border: 1px solid #0077be; }
.searchhighlighter { color: #95C11F; font-style: italic; font-size: 120%; }
h4.red { color: #95C11F; font-size: 110%; }
p.search_it-teaser, h4.red { display: inline-block; width: auto; float: none; }
li.search_it-result.search_it-article > h3 { padding-left: 40px!important; background-image: url("/resources/css/images/joska_go.svg"); background-repeat: no-repeat; background-position: left center; background-size: 20px auto; }
div.searchheader { display: inline-block; width: 40px; height: 40px; padding: 0% 1% 0% 0%; margin-top: 25px; margin-left: 1%; float: left; position: relative; }
div.searchheader > button, div#searchcontainer > button { background-color: #fff; color: #666666; }
div#searchview > button.toclose { float: right; padding: 2%; background-color: #95C11F; }
div#searchview { display: none; width: 500px; height: auto; padding: 2%; border: 1px solid #ccc; position: absolute; right: 0px; top: 0px; background-color: #fff; }
div#searchview div { margin: 0px!important; float: left; }
div#searchview > div.column-2 { width: 80%; }

@media only screen and (max-width: 1024px){
div.searchheader { float: right; clear: right; margin-top: 0px; }
div#searchview { width: 400px; padding: 10px; right: 10px; }
}
@media only screen and (max-width: 700px){
div.searchheader { margin-top: 10px; }
div.searchresults > div.contentfull > div.column-1, div.searchresults > div.contentfull > div.column-1 > form > div.column-1 { margin-bottom: 0px; }
}
@media only screen and (max-width: 500px){
input.search[type="submit"], input.search[type="text"], label.search { max-width: 96%!important; margin: 1%!important;  }
div.searchheader { position: fixed; top: 0px; right: 10px; }
div#searchview { width: 300px; top: 60px;  z-index: 1000000; }
}
@media only screen and (max-width: 350px){
div#searchview { width: 260px;  }
}