@import 'tiny.css';
@import 'blocks.css';
@import '../fonts/fonts.css';

* {margin:0;padding:0;}
html,body {height:100%; font-family: 'Aller_Light'; hyphens: auto;}
.ren {color: #151212; font-family: 'Aller_Regular'; font-weight: bold;}
.niere {color: #E20D19; font-family: 'Aller_Regular'; font-weight: bold;}

#content h1 {font-size: 30px;line-height: 1.4;text-transform: uppercase;font-weight: normal;color: #000;margin: 0 0 20px;padding: 0;}
#content h2 {font-family: 'aller',sans-serif;font-size: 27px;line-height: 1.4;text-transform: uppercase;font-weight: normal;color: #000;margin: 0 0 20px;padding: 0;}
#content .mask h2 {font-size: 20px;}
#content p {line-height: 32px;}
#content li {line-height: 32px;}

body.smallerfont {font-size: 14px;}
body.biggerfont {font-size: 18px;}
body.bigfont {font-size: 20px;}
body.biggestfont {font-size: 22px;}


#main {height: auto; width: 100%; overflow: hidden;}
#header {position: relative; margin-bottom: 115px;}
#header-content {max-width: 1800px; width: 100%; margin: 0 auto;padding: 0 80px; box-sizing: border-box;}
#content {min-height: 100px; margin-bottom: 90px;}
#footer {position: relative;}
#footer-content {max-width: 1800px;margin: 0 auto;padding: 0 80px;}
#logo {width: 258px; height: auto; position: relative; float: right; margin-top: 150px;}

#startcontentimagemobil {display: none;}
.onlymobile {display: none;}

/* NAVIGATION */
#navigation {display: flex; align-items: flex-start; flex-direction: row; flex-wrap: wrap;  gap: 10px 70px; margin-top: 30px; position: absolute; z-index: 50; }
#navigation li {list-style-type: none; padding: 0; margin: 0; padding-bottom: 10px; border-bottom: solid 2px transparent; transition: all 350ms;}
#navigation li:hover {border-bottom: solid 2px #E20D19;}
#navigation li a {font-family: 'Aller_Regular'; color: #151212;}
#navigation li.anyActive {border-bottom: solid 2px #E20D19;}
#navigation li.childActive {border-bottom: solid 2px #E20D19;}
#navigation li:hover a {text-decoration: none;}
#navigation li::before {content: ""; width: 0; margin: 0;}



#navigation li ul {display: none; position: absolute; background: #fff; margin-left: -15px; top: 31px; padding: 15px;}
#navigation li:hover ul {display: block;}
#navigation li ul li.selfActive {border-bottom: solid 2px #E20D19;}
#navigation li ul li {padding-bottom: 5px; margin-bottom: 10px;}

/* FONTSIZE */
#fontsize-box {position: absolute; width: 280px; right: 80px; top: 35px;}
.boxelement {float: left; margin-left: 15px; font-family: 'Aller_Regular';}
.sizebutton {width: 23px;height: 23px;background: #FFFFFF 0% 0% no-repeat padding-box; border: solid 2px #fff; box-shadow: 0px 4px 16px #00000029; border-radius: 50px; position: relative; margin-top: -5px; padding-top: 5px; padding-left: 6px; transition: all 350ms; }
.sizebutton:hover {border: solid 2px #E20D19; cursor: pointer;}
.sizebutton img {margin-left: 1px; position: relative; top: -3px;}
#fontsize-box div {float: right;}

/* HEADER TEXT */
#headertext {top: 250px; position: relative; display: inline-block;}
.upperheadertext {font-size: 48px; font-family: 'Aller_Bold';}
.lowerheadertext {font-size: 32px; color: #E20D19; margin-top: 20px;}


/* HEADERCONTENTS */
#headercontents {display: flex; gap: 16px; width: 100%; margin-top: 80px; position: relative;}
#headercontents .flexitem {height: 465px;}
#headerslider {flex: 1 1 auto; border-radius: 16px 0px 0px 16px; position: relative; }
#headerimage {flex: 0 0 398px;}
#headernews {flex: 0 0 260px; background: #E20D19; color: #fff; border-radius: 0px 16px 16px 0px; padding: 25px 18px; box-sizing: border-box;}

#slider {width: 100%!important; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.headerSliderImage {height: 465px!important; background-size: cover; background-position: 50% 50%; border-radius: 16px 0px 0px 16px;}
.sildercontroll {position: absolute; width: 60px; height: 60px; z-index: 5; bottom: 0; text-align: center; cursor: pointer;}
#prev {background: #E20D19; left:0; border-radius: 0px 0px 0px 16px;}
#next {background: rgba(128, 128, 128, 0.7); left: 60px;}
.sildercontroll img {width: 25px; margin-top: 17px;}

#headerimage { background-size: cover; background-position: 50% 50%;}

#headernews .newsboxtitle {font-size: 24px; font-family: 'Aller_Bold'; margin-bottom: 25px;}
#headernews .newspreviewcontainer {font-family: 'Aller_Light'; border-top: solid 1px #fff; padding-top: 20px; height: 35%; position: relative; padding-bottom: 30px;}
#headernews .newspreviewcontainer a {color: #fff;}
#headernews .newspreview {font-size: 12px; padding-top: 10px;}
#headernews .readmore {font-size: 12px; position: absolute; bottom: 25px; right: 0;}


/* STARTPAGE CONTENT */
#startpagecontent {max-width: 1800px; width: 100%; margin: 0 auto;padding: 0 80px; box-sizing: border-box; position: relative;}
#tilesboxes {max-width: 880px; width: 60%; float: left;}
.tilebox {width: 45%; max-width: 398px; transition: all 350ms; min-height: 398px; background: #fff; box-shadow: 0px 16px 32px #00000029; border-radius: 16px; padding: 8px; box-sizing: border-box; float: left; margin-right: 40px; margin-bottom: 40px;}
.tileboximage {width: 100%; min-height: 309px; margin: 0 auto; background-position: 50% 50%; background-size: cover;  border-radius: 16px;}
#tileboxtwo {margin-top: 290px; margin-right: 0;}
#tileboxthree {margin-top: -290px;}
a .tileboxtitle {text-align: center; font-size: 24px; font-family: 'Aller_Bold'; padding-top: 22px; color: #151212; transition: all 350ms;}
.tilebox:hover {background: #E20D19;}
a .tilebox:hover .tileboxtitle {color: #fff!important;}


#donator {width: 65%; margin-left: 15%; margin-top: 100px;}
#donator p {line-height: 32px;}
#donatorbutton { margin-top: 25px; background-color: #E20D19; border-radius: 8px; transition: all 350ms; padding: 20px 25px; display: inline-block; border: solid 2px #fff;}
a #donatorbutton {color: #fff;}
a #donatorbutton:hover {color: #E20D19; background: #fff;  border: solid 2px #E20D19;}

#startcontentimage {background-size: contain; background-repeat: no-repeat; height: 250px; width: 42%; position: absolute; right: 7%; margin-top: 30px; background-position: 0% 80%;}
#startcontentbotimage {background-size: contain; background-repeat: no-repeat; height: 850px; width: 44%; right: 20%; bottom: -80px; position: absolute; margin-top: 30px; background-position: 0% 80%;}
#starttitle {margin-left: -68%; margin-bottom: 110px;}
#startcontent {width: calc(40% - 70px); float: left; margin-left: 70px; padding-top: 120px; padding-bottom: 150px;}
#startcontent p {margin: 50px 0; line-height: 32px;}
#startcontent p:nth-child(1) {margin-top: 0;}

.bgimage {position: absolute; z-index: -1; background-size: contain; background-repeat: no-repeat;}
#bgimageone {width: 844px;height: 975px;left: -180px;top: -170px;}
#bgimagetwo {width: 1060px; height: 855px; left: -180px;}
#bgimagethree {width: 860px; height: 665px; right: -300px; margin-top: 100px;}


/* DOWNLOADS */
.downloads-wrapper {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-bottom: 80px;}
.singlefiel {font-size: 24px;}
.singlefiel img {width: 35px; position: relative; top: 8px;}



/* ZWEI SPALTEN TEXT */
.twocoltext {display: flex; margin-bottom: 50px;}
.twocoltext .lefttext {padding-right: 40px; flex-basis: 100%;}
.twocoltext .righttext {padding-left: 40px; flex-basis: 100%;}
.twocoltext iframe {width: 100%;}
.twocoltext iframe .player {width: 100%;}



/* BILD-TEXT BLOCK */
.innerblockcontent {width: 100%; display: grid;}
.innerblockcontent .blockimagecontainer {width: 100%; height: auto; background-size: cover; background-position: 50% 50%;}
.innerblockcontent .blockimagecontainer img {width: 100%; height: auto;}
.innerblockcontent .blockcontentcontainer {width: 100%; height: auto;}
.innerblockcontent.top, .innerblockcontent.bottom {grid-template-columns: 100%; grid-gap: 20px 0;}
.innerblockcontent.right, .innerblockcontent.left {grid-template-columns: 1fr 1fr; grid-gap: 0 20px;}
.innerblockcontent .blockcontentcontainer p:nth-child(1) {margin-top: 0;}

.innerblockcontent.smallest {grid-template-columns: calc(80% - 10px) calc(20% - 10px)!important;}
.innerblockcontent.smallerimg {grid-template-columns: calc(70% - 10px) calc(30% - 10px)!important;}
.innerblockcontent.smallimg {grid-template-columns: calc(60% - 10px) calc(40% - 10px)!important;}
.innerblockcontent.sameimg {grid-template-columns: calc(50% - 10px) calc(50% - 10px)!important;}
.innerblockcontent.bigimg {grid-template-columns: calc(40% - 10px) calc(60% - 10px)!important;}
.innerblockcontent.bigerimg {grid-template-columns: calc(30% - 10px) calc(70% - 10px)!important;}
.innerblockcontent.bigest {grid-template-columns: calc(20% - 10px) calc(80% - 10px)!important;}
.innerblockcontent .upperimagetext {text-align: center;}
.innerblockcontent .lowerimagetext {text-align: center;}



/* NEWS */
.singlenewscontainer {width: 100%; border-bottom: solid 1px #0d0d0d; padding-bottom: 40px; padding-top: 35px; position: relative;}
.singlenewscontainer:nth-last-child(1) {border-bottom: solid 0px #0d0d0d;}
.newstitle {font-size: 34px; font-family: 'Aller_Regular'; margin-bottom: 20px;}
.news-morebutton {position: absolute; bottom: 10px; right: 0;}
.newscontent {line-height: 30px; margin-top: 15px;}
.newscontent p {line-height: 30px;}
.newspreviewimage {max-width: 250px; height: auto; float: left; margin-right: 20px;}
.newsadditionalpics {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.newddetailextraimg {width: 100%; height: 100px; background-size: cover; background-position: center top;}
.newsContentThumbnail {width:250px;margin:0;padding:0; margin-bottom: 20px; float: left; margin-right: 20px;}
.previewimage {width: 100%;}


/* SPONSOREN / UNTERSTÜTZER */
#sponsors-wrapper {max-width: 1800px; width: 100%; margin: 0 auto; padding: 0 80px; box-sizing: border-box; margin-top: 60px; position: relative;}
#sponsors {width: 100%;  display: flex; gap: 64px;}
.sponsorheadline {width: 20%;position: absolute;margin-left: 5%;}
.sponsorbox {float: left;}
.singlefooterlogo { box-shadow: 0px 16px 32px #00000029; border-radius: 16px; background: #fff; display: inline-block; max-width: 260px; width: 100%; padding: 53px 23px; box-sizing: border-box; margin-bottom: 64px; }
.singlefooterlogo img {width: 100%; height: auto;}
#sponsorbox1 {margin-left: 5%; flex: 0 1 260px; padding-top: 150px;}
#sponsorbox1 .singlefooterlogo {margin-left: 64px;}
#sponsorbox2 {flex: 0 1 260px;}
#sponsorbox2 .singlefooterlogo {margin-left: 64px;}
#sponsorbox2 .singlefooterlogo:nth-child(2) {padding: 30px 40px;}
#sponsorbox3 {flex: 0 1 260px; padding-top: 50px;}
#sponsorbox3 .singlefooterlogo {margin-left: 64px; padding: 45px 23px;}
#sponsorbox4 {flex: 1 1 auto;}
#amazonsmile {max-width: 398px; line-height: 32px; width: 100%; height: auto; /* border: solid 2px #f19d38;*/ margin-left: 64px; border-radius: 16px; padding-bottom: 57px; position: relative;}
.amazonbg {background-color: #f19d38; width: 100%; height: 57px; background-size: 50%; background-position: 50% 50%; background-repeat: no-repeat; position: absolute; bottom: 0; border-radius: 0 0 14px 14px; }
#sponsorscontent {position: absolute; width: 45%; bottom: 20px; left: 49%; line-height: 32px; padding-right: 170px; box-sizing: border-box;}

.amazonheadline {font-size: 32px; font-family: 'Aller_Light'; width: 100%; padding: 0 20px; box-sizing: border-box; text-align: center; margin-top: 60px; line-height: 48px; margin-bottom: 20px;}
.amazoncontent {Font-size: 16px; width: 80%; padding: 0 20px; box-sizing: border-box; text-align: center; margin: 0 auto; margin-bottom: 30px;}
.amazonbutton {margin: 0 auto; width: 60%; padding: 0 20px; box-sizing: border-box; text-align: center; background: #EDCE81 0% 0% no-repeat padding-box;border: 1px solid #B8A064;border-radius: 4px; padding: 10px 0;}
a .amazonbutton {color: #151212;}



/* GALLERIEN */
.galleriesoverview {margin-bottom: 100px;}
.galleryalbum {position:relative;float:left;width:100%;height:220px;text-align:center;background:#fff;border:10px solid #f1f1f1;overflow:hidden; padding:0; box-sizing: border-box; background-size: cover; background-position: top center;}
.galleryalbum .mask,.view .content {position:absolute;top:0;left: -35px;width:100%;height:220px;overflow: hidden;margin:0;padding:0;}
.galleryalbum img {position:relative; display:block; width: 100%;}
.galleryalbum h2 {position:relative;line-height:38px;font-family:'Lato', sans-serif;font-weight:300;font-size:16px;text-transform:uppercase;text-align:center;color:#151212;background:#fff;margin:18px 0 0 0;padding:0;}
.galleryalbum p {position:relative;font-family:'Lato', sans-serif;font-weight:300;font-size:16px;font-style:italic;color:#fff;text-align:center;margin:18px 0;padding:0;}
.galleryalbum a.info {position:relative;display:block;width:135px;height:30px;line-height:30px;font-family:'Lato', sans-serif;font-weight:300;font-size:16px;font-style:normal;text-decoration:none;text-transform:uppercase;text-align:center;color:#151212;background:#fff;margin:0 auto;padding:0; margin-top: 15px;}
.galleryalbum .mask {background-color:rgba(226,13,25,0.85);-webkit-transform:translateX(-300px);-moz-transform:translateX(-300px);-o-transform:translateX(-300px);-ms-transform:translateX(-300px);transform:translateX(-300px);-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.galleryalbum:hover .mask {-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-o-transform:translateX(0px);-ms-transform:translateX(0px);transform:translateX(0px); left: 0;}
.galleryalbumimage {position:relative;float:left;width:100%;height:200px;background:#fff;border:10px solid #f1f1f1;overflow:hidden;padding:0; box-sizing: border-box;}
.galleryalbumimage:hover {border:10px solid #e6e6e6;}
.galleryalbumimage .img {background:no-repeat center center;background-size:cover;width:100%;height:200px;}

.gallerienavi {}
.galnavgrid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 5px; margin-bottom: 50px;}
.galnavgrid div {text-align: center; border: solid 1px #E20D19; background: #E20D19; transition: all 350ms; padding: 5px 0;}
.galnavgrid a {color: #fff;}
.galnavgrid div:hover {background: #fff; color: #151212;}

.gallerygrid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px; width: 100%;}
.albumgrid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 20px; width: 100%;}


/* SITEMAP */
.sitemaplinks {font-size: 20pX;}




/* FOOTER GALERIE */
#gallerywrapper {max-width: 1800px; width: 100%; margin: 0 auto; padding: 0 80px; box-sizing: border-box; margin-top: 120px; position: relative;}
.picture img {height: 100%; width: 100%;}
#imagecontainer_1 {background-color: #E20D19; padding: 20px; box-sizing: border-box; position: relative;}
.footeralbumtitle {color: #fff; font-size: 40px;width: 100%; hyphens: auto;word-break: break-word;}
.gallerylink {color: #fff; font-size: 24px; width: 100%;}
.gallerylink a {color: #fff; position: absolute; bottom: 20px; right: 20px;}
#gallerywrapper .gallery .picture:nth-child(1) img {border-radius: 16px 0 0 0;}
#gallerywrapper .gallery .picture:nth-child(3) img {border-radius: 0 16px 0 0;}
#gallerywrapper .gallery .picture:nth-child(4) img {border-radius: 0 0 0 16px;}
#gallerywrapper .gallery .picture:nth-child(6) img {border-radius: 0 0 16px 0;}


/* FOOTER */
#footer {height: auto; background-color: #E20D19; margin-top: 140px; }
#footer-content {min-height: 400px; display: flex;  gap: 120px; padding-top: 55px; box-sizing: border-box;}
#footer-content div table td {line-height: 25px; vertical-align: top;}
#footerdonatedata {background: #fff; color: #0d0d0d; padding: 0 40px; box-sizing: border-box; height: 290px; flex: 1 1 675px; border-radius: 16px;}
#footercontactdata {flex: 1 1 500px; color: #fff;}
#footercontactdata a {color: #fff;}
#footernaviwrapper {flex: 1 1 auto; padding-top: 100px;}
#footernavigation {list-style: none; display: block; margin: 0; padding: 0;}
#footernavigation li {list-style: none; display: block; margin: 0; padding: 0;}
#footernavigation li::before {content: none;}
#footernavigation li {margin-bottom: 10px;}
#footernaviwrapper a {color: #fff;}
#footernaviwrapper li {color: #fff;}
.box-title {font-size: 24px; font-family: 'Aller_Regular'; margin-top: 70px; margin-bottom: 25pX;}
.box-title .ren {font-family: 'Aller_Bold';}
.box-title .niere {font-family: 'Aller_Bold';}



input[type=color], input[type=date], input[type=datetime-local], input[type=email], input[type=file], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=url], textarea, select {
    border: 1px solid #aaa;
    display: inline-block;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    width: 200px;
    padding: 5px 10px;
    color: #000;
}
textarea {
    height: 150px;
}
button, .button, input[type=button], input[type=submit], input[type=reset] {
    border: 1px solid #aaa;
    border-radius: 0;
    -webkit-appearance: none;
    background: #ffffff;
    color: #000;
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}
button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
    background: #bbb;
}
.formRow {
    position: relative;
}
.formRow > label {
    float: left;
    width: 150px;
}
.formRow > input[type=color], .formRow > input[type=date], .formRow > input[type=datetime-local], .formRow > input[type=email], .formRow > input[type=file], .formRow > input[type=number], .formRow > input[type=password], .formRow > input[type=tel], .formRow > input[type=text], .formRow > input[type=time], .formRow > input[type=url], .formRow > textarea, .formRow > select {
    float: left;
}


@media only screen and (max-width: 1600px) {

    #header-content {padding: 0 30px;}
    #footer-content {padding: 0 30px; padding-top: 55px;}
    #fontsize-box {right: 30px;}
    #startpagecontent {padding: 0 30px;}
    #sponsors-wrapper {padding: 0 30px;}
    .contentwidth {padding: 0 30px;}
    #gallerywrapper {padding: 0 30px;}

    .sponsorheadline {margin-left: 0;}
    #sponsorbox1 {margin-left: 0;}

    #footer-content {gap: 50px;}

}

@media only screen and (max-width: 1500px) {

    #footerdonatedata {height: auto; padding-bottom: 50px; flex: 0 0 400px;}
    #footerdonatedata table td {width: 100%!important; display: block!important; margin-bottom: 25px;}
    #footer {padding-bottom: 50px;}


}


@media only screen and (max-width: 1400px) {

    #startcontentbotimage {display: none;}
    #navigation {gap: 10px 40px;}
    #headerimage {flex: 0 0 260px;}

    #tilesboxes {width: 50%;}
    #startcontent {width: calc(45% - 70px);}

    #bgimageone {top: -120px; left: -280px;}
    #bgimagetwo {left: -370px;}
    #bgimagethree {right: -420px;}

    #sponsorscontent {padding-right: 65px;}

    #startcontent {padding-bottom: 0px;}

}


@media only screen and (max-width: 1200px) {

    #startcontent {width: calc(50% - 70px);margin-left: 30px;}
    #starttitle {margin-left: -55%;}
    #donator {width: 70%;margin-left: 5%;}

    #bgimageone {top: -120px; left: -380px;}
    #bgimagetwo {left: -440px;}
    #bgimagethree {right: -520px;}

    #content {min-height: 70px;}

    #logo {width: 190px;margin-top: 120px;}
    #headertext {top: 125px;}
    #headercontents {margin-top: 60px;}

    #headercontents .flexitem {height: 395px;}
    .headerSliderImage {height: 395px !important;}
    #headernews .newspreviewcontainer {padding-top: 15px;padding-bottom: 25px;}

    #gallerywrapper { margin-top: 90px;}
    .footeralbumtitle {font-size: 30px;}

    #sponsors {gap: 30px; padding-bottom: 80px;}
    .singlefooterlogo {margin-bottom: 30px;}
    #sponsorbox1 .singlefooterlogo {margin-left: 30px;}
    #sponsorbox2 .singlefooterlogo {margin-left: 30px;}
    #sponsorbox3 .singlefooterlogo {margin-left: 30px;}
    #amazonsmile {margin-left: 30px;}

    #footer {margin-top: 100px;}
    .gallerylink {font-size: 18px;}

    #footercontactdata table td {width: 100%!important; display: block!important; margin-bottom: 25px; flex: 1 1 300px;}
    #footernaviwrapper {flex: 1 1 200px;}

    #sponsorscontent {bottom: 0px;padding-right: 100px; left: 47%;}

    .gallerygrid {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .albumgrid {grid-template-columns: 1fr 1fr 1fr 1fr;}


}


@media only screen and (max-width: 1155px) {

    #gallerywrapper .gallery .picture:nth-child(2) {border-radius: 0 16px 0 0;}
    #gallerywrapper .gallery .picture:nth-child(3) img {border-radius: 0 0 0 0;}
    #gallerywrapper .gallery .picture:nth-child(4) img {border-radius: 0 0 0 0px;}
    #gallerywrapper .gallery .picture:nth-child(5) img {border-radius: 0 0 0 16px;}

}


@media only screen and (max-width: 1100px) {

    #bgimagetwo {left: -500px; margin-top: 30px;}
    #sponsorscontent {bottom: 0px; padding-right: 30px;}
    h2 {font-size: 24px;}
    .upperheadertext {font-size: 40px;}
    .lowerheadertext {font-size: 28px;}
    #sponsors {gap: 30px; }

}



@media only screen and (max-width: 990px) {

    /* NAVIGATION */

    #navigation {display: none;}
    #navigation.opened {display: block; z-index: 999999; margin-top: 10px; margin-left: 65px; background: #fff; padding: 15px; width: max-content; box-shadow: 0px 16px 32px #00000029;}
    #header-menu-button {width: 50px;height: 50px;background-image: url(../img/menu.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; position: absolute;top: 20px; cursor: pointer;}

    /* NAVIGATION */
    #navigation li:hover {border-bottom: solid 2px #fff;}
    #navigation li.anyActive {border-bottom: solid 2px #fff;}
    #navigation li.anyActive:hover  {border-bottom: solid 2px #fff;}
    #navigation li.childActive {border-bottom: solid 2px #fff;}
    #navigation li ul li:hover {border-bottom: solid 2px #fff;}
    #navigation li ul li.anyActive {border-bottom: solid 2px #fff;}
    #navigation li ul li.anyActive:hover  {border-bottom: solid 2px #fff;}
    #navigation li ul li.childActive {border-bottom: solid 2px #fff;}


    #navigation li {float:none;display:block; min-height: 20px;margin:0;position:relative;width: calc(100% - 10px);padding: 5px 0 5px 10px; margin-top: 10pX; hyphens: none; word-break: unset;}
    #navigation li::before {display:block!important;}
    #navigation li:hover > ul {display:none;}
    #navigation li.opened > ul {display:block; position: relative;}
    #navigation li.hasChildren > a {padding-right:60px;}
    #navigation li.hasChildren .frontendNavigationItemMobile {display:block;position:absolute;top:3px;right:15px;width:15px;height:20px;background:url("./../img/dropdown+.svg") no-repeat left;background-size: contain; z-index: 50;}
    #navigation li.hasChildren.opened .frontendNavigationItemMobile {background:url("./../img/dropdown-.svg") no-repeat left!important;background-size: contain!important;}
    #navigation li.hasChildren.opened ul li .frontendNavigationItemMobile {background: unset!important;}
    #navigation li.hasChildren.opened{color: white;}
    #navigation li ul li.hasChildren.opened{color: white;}
    #navigation li ul {position:relative;top:0;left:0;padding:0;margin: 0;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;}
    #navigation li ul li ul {left:0;}
    #navigation li ul li{width: 88%;}
    #navigation li ul li a{display: block;width: 100%;}
    /*#navigation li ul li a:hover{color:white;}*/
    #navigation li ul li.active a{color:white;}
    #navigation li a{display:block;padding:0;box-sizing:border-box;}
    #navigation li.active > a {color:white;}
    /*#navigation li:hover > a {text-decoration:none;color:white;}*/
    #navigation li ul li.opened ul li{display: block;}
    #navigation li ul li ul{position: relative;top: 0;}




    #header {margin-bottom: 80px;}
    #headerimage {display: none;}

    #sponsorscontent {left: 40%; width: 55%;}

    #headertext {}
    .upperheadertext {font-size: 30px;}
    .lowerheadertext {font-size: 24px;}

    #logo {width: 145px;}


    #tilesboxes {width: 100%; max-width: 100%;}
    .tilebox {width: 31%; margin-right: 0px;}
    #tileboxtwo {margin-top: 0px; float: right; }
    #tileboxthree {margin-top: 0px; margin-left: 3.5%;}

    #bgimageone {top: -200px;}

    .nomobile, #startcontentimage {display: none;}
    .onlymobile {display: block;}

    #starttitle {margin-left: 0; width: 100%;}
    #startcontent {width: 100%; margin-left: 0px; position: relative;}

    #startcontentimagemobil {display: block; right: 30px; top: 75px; width: 500px; height: 300px; background-size: contain; background-repeat: no-repeat; position: absolute;}

    #donator {margin: 0; width: 100%;}
    #bgimagetwo {left: -400px;margin-top: -135px;}

    .sponsorheadline {width: 100%;margin-left: 0%; position: relative;}
    #sponsors {flex-wrap: unset; display: block;  padding-bottom: 130px;}
    #sponsorscontent {left: 0;width: 100%; padding: 0 60px; margin: 0 auto;}
    #sponsors .singlefooterlogo {margin-left: 0; max-width: 100%;}
    #sponsors .sponsorbox {padding: 0 30px; box-sizing: border-box;}
    #sponsors #sponsorbox1 {padding-top: 130px; width: 50%; float: left;}
    #sponsors #sponsorbox2 {padding-top: 40px; width: 50%; float: left;}
    #amazonsmile {margin-left: 0px;}
    #sponsors #sponsorbox3 {width: 50%;}
    #sponsorbox3 .singlefooterlogo {padding: 31px 23px;}
    #sponsors #sponsorbox4 {width: 50%;}
    .galnavgrid {grid-template-columns: 1fr 1fr 1fr 1fr;}

    #content {margin-bottom: 60px;}

    /* DOWNLOADS */
    .downloads-wrapper {grid-template-columns: 1fr 1fr; grid-gap: 15px; margin-bottom: 40px;}
    .singlefiel {font-size: 20px;}
    .singlefiel img {width: 35px; position: relative; top: 8px;}

    .gallerygrid {grid-template-columns: 1fr 1fr 1fr;}
    .albumgrid {grid-template-columns: 1fr 1fr 1fr;}


}


@media only screen and (max-width: 840px) {

    #gallerywrapper .gallery .picture:nth-child(1) {border-radius: 16px 16px 0 0;}
    #gallerywrapper .gallery .picture:nth-child(1) img {border-radius: 16px 16px 0 0;}
    #gallerywrapper .gallery .picture:nth-child(2) {border-radius: 0 0 0 0;}
    #gallerywrapper .gallery .picture:nth-child(3) img {border-radius: 0 0 0 0;}
    #gallerywrapper .gallery .picture:nth-child(4) img {border-radius: 0 0 0 0;}
    #gallerywrapper .gallery .picture:nth-child(5) img {border-radius: 0 0 0 0;}
    #gallerywrapper .gallery .picture:nth-child(6) img {border-radius: 0 0 16px 16px;}

    #footer-content {display: block;}
    #footer-content div {width: 100%;}
    #footerdonatedata {padding: 25px; margin-bottom: 50px;}
    .box-title {margin-top: 15px;}
    #footer-content #footerdonatedata {text-align: center;}
    #footer-content #footercontactdata {width: 50%; float: left;}
    #footer-content #footernaviwrapper {width: 50%; float: right; padding-top: 16px;}
    #footer-content #footernaviwrapper li {text-align: right;}

}


@media only screen and (max-width: 721px) {

    #header {margin-bottom: 25px;}
    #headercontents {display: block;}
    #headerslider {flex: unset; border-radius: 16px; margin-bottom: 30px;}
    .headerSliderImage {border-radius: 16px;}
    #headernews {flex: unset; border-radius: 16px;}
    #headercontents .flexitem {height: 300px;}
    .headerSliderImage {height: 300px !important;}
    #headernews .newspreviewcontainer {height: auto; padding-bottom: 50px;}
    #headernews {height: auto!important; padding-bottom: 10px;}

    #logo {width: 30%;}
    #headertext {top: 100px;width: 65%;}
    .upperheadertext {font-size: 20px;}
    .lowerheadertext {font-size: 18px;}

    #header-content {padding: 0 15px;}
    #footer-content {padding: 0 15px;}
    #fontsize-box {right: 15px;}
    #startpagecontent {padding: 0 15px;}
    #sponsors-wrapper {padding: 0 15px;}
    #gallerywrapper {padding: 0 15px;}
    #headercontents {margin-top: 50px;}
    .contentwidth {padding: 0 15px;}

    .tilebox {width: 100%; max-width: 100%; margin-bottom: 25px;}
    #tileboxthree {margin-left: 0%;}
    #startcontentimagemobil {display: none;}

    #startcontent {padding-top: 60px;}
    #starttitle {margin-bottom: 50px;}

    h1 {font-size: 35px;}

    #donator {margin-top: 50px;}

    #sponsors #sponsorbox1 {width: 100%; padding-top: 40px;}
    #sponsors #sponsorbox2 {width: 100%; padding-top: 0px;}
    #sponsors #sponsorbox3 {width: 100%;}
    #sponsors #sponsorbox4 {width: 100%;}
    #sponsors {padding-bottom: 0px;}

    #footer {margin-top: 50px;}
    #footer-content {padding: 0 15px;padding-top: 25px;}

    #footer {padding-bottom: 25px;}
    #footernavigation {position: absolute;bottom: 20px;right: 15px;}

    .galnavgrid {grid-template-columns: 1fr 1fr 1fr;}


    .galleryalbum {position:relative;float:left;width:100%;height:220px;text-align:center;background:#fff;border:10px solid #f1f1f1;overflow:hidden; padding:0; box-sizing: border-box; background-size: cover; background-position: top center;}
    .galleryalbum .mask,.view .content {position:absolute;top:0;left: -35px;width:100%;height:220px;overflow: hidden;margin:0;padding:0;}
    .galleryalbumimage {position:relative;float:left;width:100%;height:250px;background:#fff;border:10px solid #f1f1f1;overflow:hidden;margin:0px;padding:0; margin-bottom: 15px; box-sizing: border-box;}
    .galleryalbumimage .img {width:100%;height:250px;}

    #content {margin-bottom: 40px;}

    .twocoltext .lefttext {margin-bottom: 25px;}
    .twocoltext {display: block; padding: 0 15px; margin-bottom: 25px;}
    .twocoltext .righttext {padding-left: 0px;}

    .innerblockcontent.smallest {grid-template-columns: 100%!important;}
    .innerblockcontent.smallerimg {grid-template-columns: 100%!important;}
    .innerblockcontent.bigerimg {grid-template-columns: 100%!important;}
    .innerblockcontent.bigest {grid-template-columns: 100%!important;}

    .downloads-wrapper {grid-template-columns: 1fr; grid-gap: 15px; margin-bottom: 30px;}
    .singlefiel {font-size: 20px;}
    .singlefiel img {width: 35px; position: relative; top: 8px;}

    .gallerygrid {grid-template-columns: 1fr 1fr;}
    .albumgrid {grid-template-columns: 1fr 1fr;}



}