/* 
    Created on : 20.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: #fff; padding: 0px; outline: none; }
b { font-weight: 700; }
img { border: none; outline: none; }
a > img:hover { opacity: 0.7; }
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: #2b2b2b; }
.dark { background-color: #140f0f; }
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.logo img { display: inline-block; width: 100%; height: auto; padding-top: 15px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul > li > a { color: #fff; }
@media only screen and (min-width:1026px){
div.fixednavigation { position: fixed!important; top: 0px; left: 0px; z-index: 2000;   }
div.logofixed { width: 200px!important; position: fixed; top: 0px; left: 5%; padding-top: 10px!important; z-index: 10000; }
.paddingtop { padding-top: 70px!important; }
header { display: block; width: 100%; }
header > div.maxwidth > div#headertop { width: 100%;  padding-bottom: 15px; }
header > div.maxwidth > div#headertop > div.logo { width: 30%; padding-top: 1%; float: none;  }
header > div.maxwidth > #headertop > div.subordinatenavigation { padding: 10px; float: right; position: absolute; right: 8%; top: 1%; }
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 > div.links { margin-bottom: 10px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul { display: inline-block; padding: 0px; margin: 0px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul > li  { display: inline-block; float: none; padding: 5px; margin: 0px; }
}
@media only screen and (max-width:1025px){
body { padding-top: 105px; }    
header { width: 100%; height: 105px; position: fixed; top: 0px; left: 0px; border-bottom: 1px solid #cccccc; }
header > div.maxwidth { width: 100%; }
header > div.maxwidth > #headertop { width: 80%; margin-left: 19%; text-align: left; text-align: left; }
header > div.maxwidth > div#headertop > div.logo { width: 60%; }
header > div.maxwidth > #headertop > div.subordinatenavigation { 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 > div.maxwidth > div#headertop > div.subordinatenavigation > div.links { margin-bottom: 10px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul > li,
header > div.maxwidth > #headertop > div.subordinatenavigation > li  { display: inline-block; float: none; padding: 5px; margin: 0px; }
}
@media only screen and (max-width:650px){
header { height: 60px; }
header > div.maxwidth > #headertop { margin-left: 60px; }
header > div.maxwidth > div#headertop > div.logo { width: 60%; }
header > div.maxwidth > div.subordinatenavigation { width: 96%; padding: 2%; position: fixed; bottom: 0px; left: 0px; text-align: left; background-color: #fff; border-top: 1px solid #cccccc; }
header > div.maxwidth > div.subordinatenavigation > div.links,header #headertop > div.subordinatenavigation > ul.lang { display: inline-block; float: none; vertical-align: top; font-size: 15px; }
header > div.maxwidth > div.subordinatenavigation > div.links { width: auto; margin-bottom: 0px; text-align: left; padding: 1%; }
header > div.maxwidth > div.subordinatenavigation > div.links > ul > li { border-left: none; }
header > div.maxwidth > div.subordinatenavigation > ul.lang { width: auto; margin-bottom: 0px; float: right; padding: 1%; }
}   
#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; top: 7%; border-bottom: none; }
#headerpic > div.headline > b { font-size: 40px; font-weight: 300; color: #fff; 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; }
div#directions-panel { display: inline-block; width: 96%; float: none; padding: 0px; margin: 2%; }
/* Columns */
.column-1,
.column-2,
.column-3,
.column-4 {
    display: inline-block; padding: 0px; margin: 0px 0px 15px 0px; vertical-align: top; text-align: left;
}
.column-1 { width: 100%; background-color: #2b2b2b; }
.column-2 { width: 65%; }
.column-3 { width: 47.3333%; }
.column-4 { width: 33.3333%; } 
/* Teaser */
div.teaser { display: inline-block; float: none; vertical-align: top; }
div.teaser a.teaserlink { display: inline-block; line-height: 30px; float: right; padding-right: 35px; background-image: url("/resources/css/images/joska_go.svg"); background-repeat: no-repeat; background-position: center right; background-size: 30px; }
div.teaser.column-1 { border-bottom: 1px solid #ccc; }
div.teaser.column-2 { float: left; border-right: 1px solid #ccc; margin: 0px; }
div.teaser.column-2 > div.column-1.additionaltext { margin: 0px; }
div.teaser.column-3 { border-bottom: 1px solid #ccc; margin: 1%; }
div.teaser.column-4 { /* float: right; clear: right; border-bottom: 1px solid #ccc; */ }
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 10px 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 {
    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 > div.picture > div.icontetxt > a { width: auto; float: none; padding: 5px 10px 5px 10px; color: #fff; background-color: #e73c22; vertical-align: bottom; }
div.teaser div.additionaltext > p,
div.teaser div.additionaltext > a,
div.teaser div.additionaltext > ul {
    padding: 0px 0px 0px 15px;
}
div.teaser div.additionaltext > ul > li { list-style: square; list-style-position: inside; }

/* 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 {
    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"); }
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"); }


section { display: inline-block; width: 94%; padding: 2%; margin: 1%; border: none; text-align: center; 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; }
section > div.contentleft > div.teaser.column-4 { width: 100%; } 
section > div.contentright { width: 70%; float: right; }
/* Bild Texteditor */
div.headline { display: block; border-bottom: 1px solid #999999; padding: 10px 0px 0px 10px; margin-bottom: 15px; text-align: left; }
div.contentfull { display: inline-block; width: 96%; padding: 0px; margin: 1%; }
section.sitefull > div.contentfull { display: inline-block; width: 100%; padding: 0px; margin: 0px; background-color: #31b0d5; }
div.contentfull > div.headline > h1,
div.contentfull > div.headline h2 {
    padding-left: 65px;
}
div.contentfull > div.headline.blank > h1,
div.contentfull > div.headline.blank > h2 {
    padding-left: 15px;
}
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 { display: inline-block; }
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: 5px 15px 5px 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; }
/* 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%; }

/* Gaelry */
div#portfoliowrap { display: inline-block; width: 100%; }
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 { background-color: #140f0f; margin-bottom: 0px; position: relative; text-align: center; }
div#portfoliowrap > div.portfolio > div.column-4 > div.column-1 > b { color: #fff; 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: #e73c22; color: #fff; }
div#portfoliowrap > div.portfolio > div.column-4 div.he-view a:hover { background-color: #fff; color: #e73c22; }
div#portfoliowrap > div.portfolio > div.column-4 div.he-view i { font-size: 25px; }
div.contentfull div.clearer.right { float: left; }

/* Formulare */
form { text-align: left; }
form, fieldset, div.form  { display: inline-block; width: 98%; float: none; padding: 0px; margin: 0px; border: none; outline: none; }
input, text, textarea { display: inline-block; padding: 5px!important; outline: none; border: none; margin: 0px!important; background-color: #fff!important; color: #999999; }
input.submit { margin-top: 5px!important; background-color: #0077be!important; color: #fff!important; }
div.form-group,
div.radio.form-group,
div.checkbox.yform-element.formcheckbox,
div.checkbox.yform-element.formcheckbox > label {
    display: inline-block;
    width: 96%;
    float: none;
    padding: 5px;
    margin: 0px;
}
label, input, text, textarea, div.radio  {
    display: inline-block;
    width: 49%;
    float: none;
    padding: 5px 0px 5px 0px;
    margin: 0px;
    vertical-align: top;
}
div.radio { float: right; }
button { display: inline-block; width: auto; float: none; padding: 10px; background-color: #0077be; color: #fff; outline: none; border: none; }
div.form button { margin-left: 48% }
div.alert.alert-danger.form_warning { display: inline-block; width: 98%; padding: 1%; float: none; background-color: #e73c22; color: #fff; }
/* 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.links > ul > li > a  { color: #fff; }
footer > div.sociallinks i.fa { padding-right: 10px; font-size: 30px; line-height: 43px; vertical-align: middle; color: #fff;}


@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,
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: 25px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
a > img:hover { opacity: 1; }
.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: 96%!important;
    margin: 1%!important;
    float: none;
}
/* styles Icons*/
div.teaser a.icons { 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;
}
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;
}
div.teaser > div.picture > div.icontetxt { background-size: 25px!important; padding: 35px 0px 0px 0px!important; }
div.teaser > div.picture > div.icontetxt > a { padding: 5px!important; }
div.teaser.column-4 > div.picture { width: 100%!important; padding: 0%!important; }
div.contentfull > div.headline > h1, div.contentfull > div.headline h2 { padding-left: 45px; margin: 0px; }
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;  }
label, input, text, textarea, div.radio  {
    width: 100%!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; }
header > div.maxwidth > #headertop > div.subordinatenavigation { display: inline-block; width: 100%; position: fixed; bottom: 0px; left: 0px; margin: 0px; padding: 5px!important; background-color: #fff; border-top: 1px solid #cccccc; text-align: center;  }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul > li,
div.maxwidth > #headertop > div.subordinatenavigation > li { border-right: 0px; }
header > div.maxwidth > div#headertop > div.subordinatenavigation > ul > li > a { color: #3c3c3c; }
footer { height: auto!important; margin-bottom: 65px!important; margin-top: 10px!important; }
footer > div.links { padding: 5px 0px 5px 0px; }
footer > div.sociallinks { width: 98%; padding: 0px; margin: 0px; }
footer > div.sociallinks > p.social-links { font-size: 12px; }
footer > div.sociallinks i.fa { font-size: 20px; }
}