@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Roboto-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Roboto-Bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Roboto-Slab-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Roboto-Slab-Bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
	margin: 0;
    padding: 0;
    min-height: 100%;
    max-width: 100vw;
	height: auto !important;
    overflow-x: hidden;
}
body {
	font-weight: 400;
	color:#004675;
    font-family: 'Roboto Slab', serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-width: 300px;
	height: auto;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
body * {
    box-sizing: border-box;
}
*::-moz-selection {
    color: #fff;
    background-color: #004675;
}
*::selection {
    color: #fff;
    background-color: #004675;
}
.padding1 {
    padding: 20px;
}
.padding2 {
    padding: 20px 0;
}
.unpad {
    margin: -20px;
}
.wrapper {
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.flex {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}
.flex.nostretch {
    align-items: flex-start;
}
.flex.row {
    flex-flow: row;
}
.flex.row.wrap {
    flex-flow: row wrap;
}
h2.flex {
    justify-content: space-between;
    flex-flow: row wrap;
}
h2.flex > a {
    font-size: 1rem;
}
.box1:not(img),
.box2:not(img), 
.box3:not(img), 
.box4:not(img), 
.box5:not(img), 
.box6:not(img), 
.box7:not(img), 
.box8:not(img), 
.box9:not(img), 
.boxfull:not(img),
article > section {padding: 20px;max-width: 100%;}
.box1 {flex: 1 1 100px;}
.box2 {flex: 2 1 200px;}
.box3 {flex: 3 1 300px;}
.box4 {flex: 4 1 400px;}
.box5 {flex: 5 1 500px;}
.box6 {flex: 6 1 600px;}
.box7 {flex: 7 1 700px;}
.box8 {flex: 8 1 800px;}
.box9 {flex: 9 1 900px;}
.boxfull, article > section {flex: 1 1 100%;}
.empty {padding-top: 0 !important;padding-bottom: 0 !important;}
.flex > *[class*="box"] {
    width: 100%;
}

ul.slide, .content ul.slide {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row;
    overflow-x: hidden;
    width: 100%;
}
ul.slide li, .content ul.slide li {
    transition: margin-left 0.5s ease-in;
    margin: 0;
}
ul.slide[data-count="1"] > li {
    flex: 0 0 100%;
    width: 0px;
}
ul.slide[data-count="2"] > li {
    flex: 0 0 50%;
    width: 50%;
}
ul.slide[data-count="3"] > li {
    flex: 0 0 33.3333%;
    width: 33.3333%;
}
ul.slide[data-count="4"] > li {
    flex: 0 0 25%;
    width: 25%;
}
ul.slide[data-count="5"] > li {
    flex: 0 0 20%;
    width: 20%;
}
ul.slide[data-count="6"] > li {
    flex: 0 0 16.6667%;
    width: 16.6667%;
}
ul.slide[data-count="7"] > li {
    flex: 0 0 14.2857%;
    width: 14.2857%;
}
ul.slide[data-count="8"] > li {
    flex: 0 0 12.5%;
    width: 12.5%;
}
.slar {
    margin: 30px 0 -30px;
    text-align: center;
    font-size: 1.5rem;
}
.slar i {
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.5s ease-in;
}
.slar i:hover {
    transform: scale(1.1);
}
/* FONT ADJUST */
@media (min-width: 1401px) {
html {
    font-size: 16px;
    line-height: 1.3em;
}
}
@media (max-width: 1400px) {
html {
    font-size: 14px;
    line-height: 1.3em;
}
}
p, .content ul, .content ol {
    margin: 0 0 1.3em;
    font-family: 'Roboto',sans-serif;
    line-height: 1.3em;
}
.content ul, .content ol {
    padding: 0 0 0 1em;
}
.content li {
    margin: 0.3em 0;
}
a {
    color: #f7a600;
    text-decoration: none;
    transition: color 0.5s ease-in;
}
a:hover {
    color: #3092d0;
}
a.button, button {
    display: inline-block;
    text-align: center;
    background-color: #004675;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    font-size: 1rem;
    width: auto;
    border: 2px solid transparent;
    transition: all 0.5s ease-in;
}
a.button:hover, button:hover {
    border: 2px solid #f7a600;
}
h1, h2, h3 {
    font-weight: 700;
    line-height: 1.3em;
    text-transform: uppercase;
}
h1 {
    margin: 0px 0px 1.3rem;
    font-size: 1.85rem;
    color: #3092d0;
}
h1 small {
    font-size: 0.6em;
    line-height: 1em;
    display: block;
    margin: 6px 0;
    color: #004675;
}
h2 {
    margin: 0px 0px 1.3rem;
    font-size: 1.43rem;
    position: relative;
    color: #f7a600;
}
h3 {
    font-size: 1rem;
    margin: 0 0 1rem;
    color: #004675;
}
h4 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
}
h5 {
    font-size: 1rem;
    margin: 0 0 1rem;
}
b,strong {
    font-weight: 700;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
}
p, b, a, ul, ol {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
body ul.nostylelist {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* SHARIFF */
.sharebox {
    position: absolute;
    height: auto;
    width: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    right: 40px;
    top: 40px;
    z-index: 2000;
}
.share {
    display: flex;
    flex-flow: column;
    align-items: center;
    position: relative;
}
.showshare  {
    cursor: pointer;
    margin: 0;
    height: 28px;
    padding: 6px;
    background-color: #f7a600;
    width: 28px;
    border-radius: 100%;
    color: #fff;
    display: flex;
}
.showshare img {
    width: 20px;
    margin-right: 5px;
    box-sizing: border-box;
    height: 20px;
    border-radius: 100%;
    transform: scale(1);
    transition: transform 0.1s ease-in;
}
.sharebuttons {
    overflow: hidden;
    max-height: 0px;
    width: auto;
    opacity: 0;
    transition: all 0.5s ease-in;
    display: flex;
    flex-flow: column;
    align-items: left;
    position: absolute;
    right: 11px;
    top: 20px;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.5));
}
.sharebuttons:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid #1d4774;
  border-bottom:10px solid #1d4774;
  border-top:10px solid transparent;
  position:absolute;
  transform:scale(0);
  transform-origin:bottom center;
  top:0px;
  right:0;
  transition:transform 0.5s ease-in
 }
.sharebuttons.visible {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: all 0.5s ease-in;
}
.sharebuttons.visible:before {
  transform:scale(1);
  transition:transform 0.5s ease-in
 }
.sharebuttons > div:not(.tosoc) {
    padding: 5px 10px !important;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #1d4774 !important;
    width: 100% !important;
    text-align: left;
    height: auto;
}
.sharebuttons > div.tosoc {
    padding: 0px 10px !important;
    display: block;
    background-color: #1d4774 !important;
    width: 100% !important;
    text-align: left;
    height: auto;
    box-sizing: border-box;
}
.sharebuttons > .tosoc p {
    margin: 0;
    color: #fff;
    hyphens: auto;
    font-size: 0.8rem;
    line-height: 1.3em;
    box-sizing: border-box;
}
.sharebuttons > .tosoc a {
    color: #fff;    
}
.sharebuttons > div:first-of-type {
    padding-top: 10px!important;
    margin-top: 15px;
}
.sharebuttons > div:last-child {
    padding-bottom: 10px!important;
}
.sharebuttons > div:only-child {
    padding-bottom: 10px!important;
}
/* HEADER STYLE */
header {
    width: 100%;
    text-align: center;
    position: relative;
    display: block;
    height: 50vh;
    min-height: 350px;
    max-height: 500px;
    background-image: url(../images/general/waves_foerderverein_luebecker_kinder.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    border-bottom: 19px solid #f7a600;
}
.headerbild {
    position: relative;
    width: 100%;
    height: 100%;
    top: auto;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1760px;
}
.headerbild .hbox {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 100%;
}
a.logo {
    width: 100%;
    position: relative;
    left: 0;
    right: auto;
    z-index: 2;
    max-width: 350px;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    align-self: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    line-height: 1em;
    text-align: left;
    filter: drop-shadow(0 0 15px rgb(255, 255, 255)) drop-shadow(0 0 5px rgb(255, 255, 255));
} 
a.logo img {
    width: 100%;
}
.himg {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 70%;
    max-width: 1110px;
    pointer-events: none;
}
.hinfo {
    text-transform: uppercase;
    align-self: center;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    width: 270px;
    padding: 40px;
    position: relative;
    z-index: 1;
}
.hinfo * {
    color: #fff;
}
.hinfo i {
    font-size: 1.5em;
}
.hinfo a:hover {
    color: #fff;
}
.hinfo > * {
    border-radius: 100%;
    flex: 0 0 100%;
    padding: 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    line-height: 1.4em;
}
.hinfo > *:nth-child(1) {
    width: 145px;
    height: 145px;
    min-width: 145px;
    min-height: 145px;
    align-self: flex-end;
    font-size: 1.5rem;
    background-color: #004675;
    margin: 0px -20px 0px 0px;
}
.hinfo > *:nth-child(2) {
    width: 130px;
    height: 130px;
    min-width: 130px;
    min-height: 130px;
    align-self: flex-start;
    font-size: 0.9rem;
    background-color: #f7a600;
    margin: -50px 0 -10px -20px;
    z-index: 1;
}
.hinfo > *:nth-child(2) > strong {
    font-size: 1.1em;
}
.hinfo > *:nth-child(3) {
    width: 145px;
    height: 145px;
    min-width: 145px;
    min-height: 145px;
    align-self: center;
    font-size: 1.5rem;
    background-color: #3092d0;
    border: 5px solid #f7a600;
    margin: -20px 0;
}
@media (min-width: 701px) and (max-width: 1000px), (min-width: 701px) and (max-height: 810px) and (max-width: 1200px){
.himg {
    width: calc(100% - 190px);
    max-width: 690px;
    margin: auto auto auto 0;
}
}
@media (max-width: 700px){
header {
    height: 85vw;
}
a.logo {
    width: 60%;
    z-index: 2;
    min-width: 240px;
    max-width: 320px;
    padding: 40px 40px 0;
    flex: 0 0 60% !important;
} 
.headerbild .hbox {
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
}
.headerbild .hbox > * {
    flex: 1 1 100%;
    align-self: flex-start;
    height: auto;
}
.hinfo {
    flex-flow: row;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    padding: 30px;
    z-index: 0;
}
.hinfo > * {
    flex: 0 0 100px;
    padding: 10px;
}
.hinfo > *:nth-child(1), .hinfo > *:nth-child(2), .hinfo > *:nth-child(3) {
    font-size: 1rem;
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    margin: 0;
}
.hinfo > *:nth-child(2) {
    font-size: 0.9rem;
}
.hinfo > *:nth-child(2) > strong {
    font-size: 1em;
}
.himg {
    width: 100%;
    max-width: 490px;
    margin: auto;
}
}
/* NAVI STYLING */
nav.mainnav {
    font-size: 1.3rem;
    line-height: 1.2em;
    margin: 0 auto;
    left: 0;
    background-color: #fff;
}
nav.mainnav .navi {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
    display: flex;
}
nav .navi a, nav .navi span {
    white-space: nowrap;
    display: block;
    cursor: pointer;
    transition: all 0.5s ease-in;
}
nav .navi .menuitem > a, nav .navi .menuitem > span {
    color: #3092d0;
}
nav .navi .menuitem {
    text-transform: uppercase;
    position: relative;
    font-size: 1.3rem;
    font-weight: 300;
    transition: all 0.5s ease-in;
}
nav .navi .menuitem.active > a, nav .navi .menuitem.active > span, nav .navi .submenuitem.active > a {
    font-weight: 700;
}
/* NORMALES MENÜ */
@media (min-width: 1265px){
nav.mainnav {
    padding: 20px 0;
    width: calc(100% - 40px);
    max-width: 1680px;
}
nav.mainnav .navi {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
    transition: padding 0.5s ease-in;
}
nav.mainnav.sticked {
    z-index: 1000;
    width: 100%;
    max-width: none;
    position: fixed;
    top: 0px;
    left: 0;
    padding: 0;
    margin: 0;
}
nav.mainnav.sticked .navi {
    width: calc(100% - 40px);
    max-width: 1680px;
    margin: 0 auto;
}
nav .navi .menuitem:hover, nav .navi .menuitem.showsub {
    background-color: #f7a600;
}
nav .navi .menuitem:hover > a, nav .navi .menuitem:hover > span, nav .navi .menuitem.showsub > span {
    color: #fff;
}
.menuitem {
    padding: 20px;
}
.submenuitem {
    font-size: 1rem;
    padding: 0 20px;
}
.submenuitem:hover {
    background-color: #3092d0;
}
.submenuitem > a {
    color: #fff;
}
.navbutton {
    display: none;
}
nav > ul li .sub{
    position: absolute;
    display: block;
    top: 100%;
    padding: 0;
    left: 0px;
    height: auto;
    z-index: 1;
    background-color: #f7a600;
    transition: padding 0.5s ease-in;
} 
nav > ul li .sub li{
    height: auto;
    max-height: 0px;
    opacity: 0;
    transition: all 0.5s ease-in;
    overflow: hidden;
}
nav > ul li.showsub .sub, nav > ul li:hover .sub{
    z-index: 2;
}
nav > ul li.showsub .sub li, nav > ul li:hover .sub li{
    padding: 10px 20px;
    max-height: 40px;
    opacity: 1;
}
}
/* DROPDOWN-MENÜ */
@media (max-width: 1264px){
nav.mainnav .navi {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    max-height: 61px;
    overflow: hidden;
    transition: max-height 0.5s ease-in;
}
nav.mainnav .navi.drop {
    max-height: 1500px;
}
.menuitem.navbutton {
    cursor: pointer;
    opacity: 1;
    padding: 20px;
    pointer-events: all;
}
.menuitem > a, .menuitem > span {
    padding: 5px;
    text-align: center;
}
nav > ul li .sub li{
    text-align: center;
    height: auto;
    max-height: 0px;
    padding: 0 5px;
    opacity: 0;
    transition: all 0.5s ease-in;
    overflow: hidden;
}
nav > ul li .sub {
    padding: 0;
}
nav > ul li.showsub .sub li {
    padding: 5px;
    max-height: 40px;
    opacity: 1;
}
header {
    margin-bottom: 0 !important;
}   
}
/* BREADCRUMBS */
nav#breadcrumbs {
    color: #3092d0;
    position: relative;
    padding: 20px 20px 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    font-size: 1rem;
    width: calc(100% - 40px);
    max-width: 1680px;
    margin: 0 auto;
}
nav#breadcrumbs a {
    color: #3092d0;
    font-weight: 400;
}
nav#breadcrumbs .ssm {
    font-size: 1.4em;
    cursor: pointer;
}
/* SITEMAP */
aside.embsm {
    position: fixed;
    width: 300px;
    height: 100%;
    top: 0;
    left: -300px;
    background-color: #fff;
    border-right: 1px solid #f7a600;
    transition: left 0.5s ease-in;
    padding: 20px;
    z-index: 100;
    overflow-y: scroll;
}
aside.smloaded.embsm {
    left: 0px;
}
aside.embsm .csm {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
    color: #ddd;
    z-index: 1;
    transition: all 0.5s ease-in;
}
aside.embsm .csm:hover {
    color: #f7a600;
} 
.smw ul {
    margin: 0;
    padding: 0;
}
.smw ul li {
    padding: 0.2em 0;
}
ul.sm li {
    list-style-type: none;
    position: relative;
    margin: 0;
}
ul.sm.l1 {
    padding: 0;
}
i.tsm {
    color: #f7a600;
    cursor: pointer;
    border-radius: 100%;
    background-color: transparent;
    transform: rotate(0deg);
    height: 1em;
    width: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
}
i.tsm:hover {
    color: #fff;
    background-color: #f7a600;
}
.sm-open > i.tsm {
    transform: rotate(-45deg);
}
li > .sm {
    overflow: hidden;
    height: auto;
    max-height: 0px;
    opacity: 0;
    margin-left: 1em;
    padding-left: 1em;
    transition: all 0.5s ease-in;
}
li.sm-open > .sm {
    max-height: 2000px;
    opacity: 1;
}
li > .sm > li:before, li > .sm > li:after {
    content: "";
    position: absolute;
    background-color: #ddd;
    left: -1em;
} 
li > .sm > li:before {
    height: 1px;
    width: 1em;
    top: 0.7em;
}
li > .sm > li:after {
    height: 100%;
    width: 1px;
    top: -0.7em;
}
li > .sm > li:last-child:after {
    height: 1.4em;
}
/* ARCHIVES */
ul.archives, ul.archives ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.archives h2 {
    font-family: 'Roboto Slab', serif;
}
.archives ul .year {
    cursor: pointer;
    font-weight: 400;
    color: #f7a600;
}
.archives ul .year i {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.5s ease-in;
}
.archives ul.shmo .year i {
    transform: rotate(-180deg);
}
.archives ul li {
    padding: 0;
    margin: 10px 0 0px;
}
.archives ul li:not(.year) {
    height: auto;
    max-height: 0;
    overflow: hidden;
    margin: 0;
}
.archives ul li:not(.year) {
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in;
}
.archives ul.shmo li:not(.year) {
    max-height: 30px;
}
/* PAGINATION */
ul.pagination {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
ul.pagination li {
    padding: 0.2em 1em;
    text-align: center;
    margin: 0;
    font-family: 'Roboto Slab', serif;
}
ul.pagination li span i {
    opacity: 0.5;
}

/* CONTENT */
.content {
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}
.content img {
    max-width: 100%;
}
.main, .prefooter {
    background-color: rgba(247,166,0,0.1);
}
.content.mod:nth-of-type(even) {
    background-color: rgba(48,146,208,0.1);
}
.content.mod:nth-of-type(odd) {
    background-color: rgba(0,70,117,0.05);
}
article {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: calc(100% - 40px);
    margin: 0 auto;
    max-width: 1680px;
}
.content article p img {
    max-width: 100%;
    box-sizing: border-box;
}
.content article p img.float {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}
.itemimg {
    display: block;
    margin-bottom: 20px;
}
body .content .tabs-wrapper .tabs-nav {
    border-bottom: 2px solid #f7a600;
}
body .content .tabs-wrapper .tabs-nav > li {
    margin: 0;
}
body .content .tabs-wrapper.ui-theme-default .tabs-nav li a {
    border: none;
    background: transparent;
}
body .content .tabs-wrapper.ui-theme-default .tabs-nav li.current a {
    border-bottom: 2px solid #3092d0;
    margin-bottom: -2px;
    background: #fff;
}
body .content div.tabs-wrapper div.tab {
    padding: 1em 0 0;
    border: none;
    background-color: transparent;
}
/* HOME */ 
.news ul {
    background-color: #fff;
}
.news ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-flow: row wrap;
    flex: 0 0 100%;
}
.news img {
    flex: 0 0 210px;
}
.news ul li > div {
    padding: 10px;
}
.news .newssl {
    color: #f7a600;
}
.projectslist li {
    min-width: 260px;
    padding: 20px;
    hyphens: auto;
}
.projectslist li > div {
    background-color: #fff;
    width: 100%;
}
.projectslist li div.img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.projectslist li div.img.plh {
    background-size: contain;
}
.sponsorslist li {
    min-width: 130px;
    padding: 20px;
}
.sponsorslist li img {
    width: 100%;
}
/* SPENDER */
.sponsors .flex {
    align-content: stretch;
    align-items: stretch;
}
.sponsors div > img, .sponsors div > .img {
    margin-bottom: 20px;
    display: block;
}
.sponsors div > .img {
    width: 200px;
    height: 120px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/* PROJEKTE */

/* NEWS */
.blognav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0px 0px;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
}
.blognav > span {
    flex: 1 1 10px;
    text-align: center;
}
.blognav > span:first-child {
    text-align: left;
}
.blognav > span:last-child {
    text-align: right;
}
/* PRESSE */
.pbox h3 {
    color: #3092d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pbox .psbox {
    overflow: hidden;
    height: auto;
    max-height: 0px;
    transition: max-height 0.5s ease-in;
}
.pbox .psbox.opsbox {
    max-height: 500px;
}
.pbox h3  > i {
    display: inline-block;
    transform: scaleY(1);
    transition: transform 0.5s ease-in;
}
.pbox.opress h3 > i {
    transform: scaleY(-1);
}
.pbox .ptgl {
    display: none;
    cursor: pointer;
    margin: 0;
}
.pbox.opress .ptgl {
    display: block;
}
/* GALERIE */
.gallery {
    margin: -15px -15px 0px;
}
.gallery img {
    display: inline-block;
    padding: 15px;
}
.gallery > a {
    display: inline-block;
    padding: 15px;
    width: 250px;
}
.gallery > a > img {
    padding: 0;
}
/* KONTAKT SEITE */
.map {
    flex: 1 1 100%;
    padding: 0;
    margin: 0 -30px 0;
    position: relative;
}
.map iframe {
    width: 100%;
    display: block;
}
.map small {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: block;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 0 13px rgba(0,0,0,0.24);
}
.contdata, .socialmedia {
    padding: 40px;
}
.mapbox .contdata h4 {
    flex: 1 1 100%;
    margin: 0;
}
.mapbox .contdata p {
    flex: 1 1 150px;
}
.socialmedia {
    margin: 40px 0px;
}
.socialmedia > div {
    box-sizing: border-box;
    flex: 1 1 200px;
}
form {
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    width: calc(100% + 40px);
    margin: 0px -20px;
    padding: 0px;
}
form .form-field, form .form-spacer, .form-actions.secondary-accent, form > label {
    display: block;
    width: 100%;
    margin: 0px 0px 20px;
    padding: 0px 20px;
}
form .form-field.avatar .form-data {
    width: 200px;
    height: 200px;
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: stretch;
}
form .form-field.avatar .form-data:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-size: cover;
}
form .form-field.avatar .form-data .form-input-file.dropzone {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    opacity: 0.2;
    transition: opacity 0.5s ease-in;
}
form .form-field.empty {
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}
form .form-field.avatar .form-data:hover .form-input-file.dropzone, form .form-field.avatar .form-data .form-input-file.dropzone.dz-drag-hover, form .form-field.avatar .form-data .form-input-file.dropzone.dz-started {
    opacity: 1;
}
form .form-spacer {
    margin-top: -20px;
}
form .form-field {
    box-sizing: border-box;
}
form .form-field.half {
    flex: 1 1 350px;
}
form .form-field.full {
    flex: 1 1 100%;
}
form .form-field .form-label {
    margin-bottom: 5px;
}
.form-input-wrapper, .form-input-wrapper input  {
    width: 100%;
}
.checkboxes {
    display: block;
}
.buttons {
    width: 100%;
    padding: 0px 20px;
    flex: 1 1 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-sizing: border-box;
    align-self: flex-end;
}
button {
    box-sizing: border-box;
    flex: 1 1 150px;
    max-width: 150px;
    padding: 10px;
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    font-family: 'Roboto Slab', serif;
}
form button, form a.button {
    margin: 0px 0px 20px;
}
.form-textarea-wrapper, .form-textarea-wrapper textarea {
    width: 100%;
}
.form-textarea-wrapper textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 200px;
    resize: none;
}
input, textarea, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} 
input, textarea {
    border: 2px solid transparent;
    padding: 10px;
    font-size: 1em;
    box-sizing: border-box;
    font-weight: 300;
    background-color: #fff;
    color: #444;
    transition: border 0.5s ease-in;
    font-family: 'Roboto', sans-serif;
}
input:focus, textarea:focus {
    border: 2px solid #f7a600;
}
input[readonly="readonly"] {
    cursor: not-allowed;
    background-color: rgba(255,255,255,0.1);
    color: #fff;
}
.radio {
	display: block;
}
input[type='checkbox'],
input[type='radio'] {
  width:auto;
  float:left;
  margin-right: .75em;
  background:transparent;
  border:none;
}

input[type='checkbox']:checked,
input[type='checkbox']:not(:checked),
input[type='radio']:checked,
input[type='radio']:not(:checked) {
  background: transparent;
  position: absolute;
  visibility: hidden;
  margin:0;
  padding:0;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
    cursor: pointer;
    text-indent: -21px;
    padding-left: 20px;
    display: block !important;
}

input[type='checkbox']:checked + label::before,
input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before,
input[type='radio']:not(:checked) + label::before {
    content: '';
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 17px;
    height:17px;
    border-radius: 50%;
    position: relative;
    top:-5px;
    background-color: #004675;
    background-image: url(../images/general/check.png);
    margin-right: 2px;
    background-size: 0%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .2s ease-in;
    text-align: center;
    font-size: 2rem;
    line-height: 0.5em;
    text-indent: 0px;
}

input[type=radio]:checked + label::before,
input[type=radio]:not(:checked) + label::before {
  border-radius: 50%;
}

input[type='checkbox']:hover  + label::before,
input[type='radio']:hover  + label::before {
    background-color: #004675;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .2s ease-in;
}

input[type='checkbox']:checked  + label::before,
input[type='radio']:checked  + label::before {
    background-color: #004675;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .2s ease-in;
}
.help-text {
    opacity: 0;
    max-height: 0px;
    height: auto;
    transition: all 0.5s ease-in;
}
.help-text.ophelp {
    opacity: 1;
    max-height: 1000px;
}
div#messages {
    flex: 1 1 100%;
    padding: 0 20px;
}
div.notices {
    color: #fff !important;
    padding: 0 20px;
    margin: 0;
    position: relative;
    z-index: 2000;
    width: 100%;
    background-color: transparent;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    max-height: 100px;
    overflow: hidden;
    animation: fadeout 5s linear;
}
@keyframes fadeout {
    0% {opacity: 1;max-height: 100px;padding: 20px;margin: 0 0 15px;}
    75% {opacity: 1;max-height: 100px;padding: 20px;margin: 0 0 15px;}
    100% {opacity: 0;max-height: 0px;padding: 20px 0;margin: 0;}
}
div.notices.yellow {
    border-left: 0px solid #ba9800 !important;
    background: #d89b26;
}
div.notices.red {
    border-left: 0px solid #f14101 !important;
    background: #9f1d1d;
}
div.notices.blue {
    border-left: 0px solid #005498 !important;
    background: #0d5d7f !important;
}
div.notices.green {
    border-left: 0px solid #1d4774 !important;
    background: #1d4e1d !important;
}
div.notices p {
    margin: 0 !important;
}

/* Footer */
footer {
    width: 90%;
    max-width: 1500px;
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-evenly;
    padding: 25px 50px;
    margin: 0 auto;
    line-height: 24px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
footer p {
    margin: 0;
}

/* Cookiebar */
body .cc-banner.cc-top {
    border-bottom: 0px solid #fff;
}
body .cc-revoke, body .cc-window {
    font-family: inherit;
    font-size: 1rem;
}
body .cc-revoke, body .cc-window {
    z-index: 200000;
}
body .cc-banner .cc-message {
    padding-right: 30px;
}
.slider {
    position: relative;
    width: 100%;
    z-index: 0;
}

/* POPUP IMAGES */
img.pu {
    display: block;
}
.pu-img {
    position: relative;
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    cursor: pointer;
}
.pu-img p {
    font-weight: 400;
    margin: 0.5em 0;
}
.pu-img:after {
    content: "\f00e";
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: rgba(0,0,0,0);
    position: absolute;
    top: 20px;
    left: 20px;
    width: 4rem;
    height: 4rem;
    color: #fff;
    pointer-events: none;
    opacity: 0.5;
    transition: all 0.5s ease-in;
}
.pu-img:hover:after {
    opacity: 1;
    background-color: rgba(0,0,0,0.4);
}
.pu-imagebox {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    max-width: 100vw;
    max-height: 100vh;
    background-color: rgba(0,0,0,0.7);
    z-index: 2000;
    width: auto;
    height: auto;
    padding: 40px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.pu-imagebox.pu-show {
    pointer-events: all;
    opacity: 1;
    transition: opacity 0.5s ease-in;
}
.pu-sign {
    color: #fff;
    display: block;
    cursor: pointer;
    font-size: 3rem;
    position: absolute;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none; 
    opacity: 0.7;
    transition: opacity 0.5s ease-in;
}
.pu-sign:hover {
    opacity: 1;
}
.pu-arr {
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1em;
}
.pu-arr#pu-left {
    left: 20px;
}
.pu-arr#pu-right {
    right: 20px;
}
.pu-close {
    top: 15px;
    right: 20px;
}
.pu-imagewrapper {
    position: relative;
    height: auto;
    width: auto;
    margin: 0 auto;
}
.pu-imagewrapper img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    animation: pu-fadein 0.5s ease-in;
    display: block;
}
@keyframes pu-fadein {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.pu-text {
    color: #fff;
    font-size: 1.2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0.5em;
    background-color: rgba(0,0,0,0.5);
}
.pu-body .wrapper {
    transition: filter 0.5s ease-in;
}

/* INTERN */
.form-actions.secondary-accent {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.useroptbox {
    flex: 1 1 100%;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.uab {
    font-size: 1.4em;
    cursor: pointer;
}
.userhead {
    margin: 0 auto;
    max-width: 1680px;
    align-items: center;
}
.toggleableuh {
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    height: auto;
    max-height: 0px;
    opacity: 0;
    transition: all 0.5s ease-in;
}
.toggleableuh.openuh {
    max-height: 1000px;
    opacity: 1;
}
.userhead ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.userhead ul li, .usernotif > span {
    margin: 0 0 0.5em;
    display: flex;
    align-items: center;
}
.userhead ul li a {
    white-space: nowrap;
}
.userhead .fa, .userhead .fas {
    width: 1.3em;
    text-align: center;
    max-width: 1.3em;
    box-sizing: border-box;
    padding-right: 0.5em;
}
.userinfo > *:last-child {
    margin-bottom: 0;
}
.userinfo, .userhead > .userinfo {
    flex: 4 1 300px;
}
.userhead > .userinfo {
    display: flex;
    justify-content: flex-start;
    flex-flow: row wrap;
    align-items: center;
}
.userhead > .userinfo > div {
    margin: 10px;
    flex: 1 1 200px;
}
.userhead > .userinfo > div.userimage .uibefore {
    position: absolute;
    display: flex;
    flex-flow: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #f7a600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease-in;
}
.userhead > .userinfo > div.userimage .uibefore > i.fas {
    font-size: 2rem;
    padding: 0;
}
.userhead > .userinfo > div.userimage .uibefore > p {
    margin: 0.5em 0 0;
}
.userhead > .userinfo > div.userimage:hover .uibefore {
    opacity: 1;
}
.uo {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: -10px;
}
.uo > div {
    flex: 1 1 300px;
    margin: 10px 10px 40px;
}
.uo ul, .sidebar ul {
    list-style: none;
    padding: 0;
}
.dz-image img {
    width: 100%;
}
.memberslist ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.memberslist .memitem {
    padding: 5px 0;
    max-width: 700px;
    margin: 0;
}
.memberslist .memitem, .memberslist .memitem a {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.memberslist .memitem span {
    flex: 1 1 150px;
}
.usermembers ul {
    display: flex;
    flex-flow: row wrap;
    margin: -15px;
}
.usermembers ul li {
    padding: 15px;
    position: relative;
    box-sizing: border-box;
}
.usermembers ul li p {
    margin: 0 auto;
    text-align: center;
}
.statelists {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: -20px;
}
.statelists ul {
    flex: 1 1 300px;
    padding: 20px;
}
.uo.adminbox > div {
    flex: 1 1 100%;
    margin-bottom: 0;
}
#alluserdata {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 25px -20px 0 0;
}
#alluserdata tr {
    border-bottom: 2px solid #f7a600; 
    padding: 5px;
}
#alluserdata tr:last-child, #alluserdata tr:only-child {
    border-bottom: 0px solid transparent; 
}
#alluserdata th, #alluserdata td {
    padding: 0px 20px 0 0;
    height: 25px;
    min-width: 100px;
}
#alluserdata td {
    height: 65px;
}
#alluserdata th {
    text-align: left;
    position: relative;
}
#alluserdata tbody tr td b {
    display: none;
    width: 50%;
    min-width: 150px;
}
@media (max-width:1200px){
    #alluserdata thead {
        display: none;
    }
    #alluserdata tbody tr {
        display: flex;
        flex-flow: row wrap;
    }
    #alluserdata tbody tr td {
        flex: 1 1 300px;
        height: auto;
        display: flex;
        justify-content: space-between;
    }
    #alluserdata tbody tr td > * {
        flex: 1 1 150px;
    }
    #alluserdata tbody tr td b {
        display: inline-block;
    }
}