@charset "utf-8";
/* CSS Document */


/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}



* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
  	box-sizing: border-box;
}

html, body {
	height: 100%;
	font-size: 16px;
	font-family: 'Open Sans', Verdana, Arial, sans-serif;
	font-weight: 400;
	background: #fff;
	color: #000;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	-o-hyphens: auto;
	hyphens: auto;
	background: url(../img/Cosmic-Union.jpg) no-repeat center center/cover;
    background-attachment: fixed;
}

a {text-decoration: none; color: #000;}
a:hover {text-decoration: underline;}
nav {
	position: fixed;
	top: 0;
	z-index: 999;
	box-shadow: 0 0 6px #999;
	width: 90%;  
	left: 5%;
}
nav#navigation .flexer {width: 100%;}
nav h1 img[alt="Logo"] {
    width: 60px;
    height: auto;
}

h1 {
    font-size: 1.75rem;
    color: #f3f;
    font-weight: 700;
    text-align: center;
	padding: 1rem 1rem 0;
}
h1, h2, h3, h4, h5, h6 {font-family: "Palatino Linotype", "Times New Roman", Times, serif;}
a.box_shadow_menu {
    position: relative;
    font-size: 1.5rem;
	display: none;
    left: 0;
} 

a.box_shadow_menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 1em;
    height: 0.15em;
    background-color: black;
    box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black;
    font-size: 1.5rem;
}
nav a.closer_menu {display:none;}
nav a {height: 1.8rem;}
nav ul {text-align: center; padding: 0;}
nav ul li {display: inline-block; position: relative; border-bottom: 2px solid #fff;}
nav ul li:hover {border-bottom: 2px solid #f3f;}
nav ul li a {display: block; padding: .5rem;white-space: nowrap;}
nav ul li a:hover {
	text-decoration: none;
	color: #0000FF;
}
nav ul ul {display: none;}
nav ul li ul {text-align: left;	position: absolute;	left:0;	top: 0; padding: 2.4rem 0 0; background: rgb(255, 255, 255); z-index: -1;border: 1px solid #ff33ff;}
nav ul li:hover ul {
	display: block;
	color: #FFF;
}
nav ul ul li {display: block; padding: 0.5rem 0;}
nav div.flexer {
    -webkit-justify-content: space-between; 
    -ms-flex-pack: space-between; 
    justify-content: space-between; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column;
    background: rgb(255,255,255);
	border-bottom: 1px solid #ff33ff;
}
header h2 {position: absolute; left: 0; top:30%; width: 100%; text-align: center; font-size: 2.5rem; color: #ffffff; font-weight: 800; text-shadow: 1px 1px 3px #333; transform: translateY(-40%);}
article {padding: 3rem 3rem 0; margin: 0 10%;}
article p {margin: 1rem 0;}
h3 {font-size: 1.8rem;}
main {padding-bottom: 5rem; width: 90%; background: #fff; margin: 0 auto;}
footer {background: #553d18;color: #ff33ff; width: 90%;  margin: 0 auto;}
footer .flexer {padding: 2rem 0;}
.socials {border-color: #bb8909; background-color: #FF33cc; fill: #F5BF35;}
.socials ul {text-align: center;}
.socials li {display: inline-block;margin: 1rem;}
.socials a {display: block;	width: 2.5rem; height: 2.5rem;}
.socials img {width: 100%; height: auto;}
hr {
    height: 1px;
    width: 50%;
    margin: 3rem auto 0;
    border: none;
    background: #333;
}
.xs-visible {display: none;}
.xs-hidden {display: block;}
	
	
/*  Home  */

#home nav { width: 100%; left: 0;}
nav h1 {padding: 1rem 0 0 50px;white-space: nowrap;width: 100%;}

header#homepic {
	position: relative;
	height: 100%;
	width: 100%;
	/* background: url(../img/Cosmic-Union.jpg) no-repeat center /cover;*/
	}
.flexer {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: space-around; justify-content: space-around;}
.rundbild {
	border-radius: 50%;
	border: 1.5rem solid transparent;
	width: 20vw;
	height: 20vw;
	overflow: hidden;
	transition: all 1s ease-in-out;
}
.rundbild:hover {border: 1.5rem solid #ffe5ff;}
.rundbild img {width: 100%; height: auto; transition: all 1s ease-in-out;}
.rundbild:hover img {transform: scale(1.5);}
.botschafter  {text-align: center;}
.botschafter img {width: 80%; height: auto;}

.botschafter h2 {
	font-size: 2rem;
	color: #ff33ff;
	font-weight: 700;
	text-align: center;
	padding: 1.5rem 0;
}

/*  Unterseiten  */

header#normal {
	position: relative;
	width: 90%;
	margin: 3rem auto 0;
}
header.bildheader {margin: 142px auto 0 !important;}

header#normal img, header#normal video {
	width: 100%;
	display: block;
	object-fit: cover;
}
article p {overflow: hidden;}
article p.downloads {overflow: visible;}
article p img {float:left; width: 40%; margin: 0 1.5rem 0 0;}
article > h3 {margin-bottom: 1.5rem;}
article h4 {font-size: 1.5rem;}
	
	
/*  Medien  */

.medien main {background: none;border: 10px solid #;padding-top: 88px;}
.medien main section {position: relative;padding: 2rem 0;}
.medien main section > div {position: absolute; margin-top:-150px;}
.medien article {color: #000;}
.flex_media {-webkit-justify-content: space-between; -ms-flex-pack: space-between; justify-content: space-between;max-width: 1100px;}
.flex_media div:first-of-type {-webkit-flex: 1 1 40%; -ms-flex: 1 1 40%; flex: 1 1 40%; max-width: 40%;}
.flex_media div:last-of-type {-webkit-flex: 1 1 50%; -ms-flex: 1 1 50%; flex: 1 1 50%; max-width: 50%;}
.flex_media .bild img { width: 100%; height: auto;}
.flex_media h3 { font-size: 2.5rem;}
.pdf {float: left; margin-right: 1rem; height: 2.4rem; width:auto;max-width: 2.43rem;}
.downloads button {
    display: inline-block;
    background: rgb(255,255,255);
    border-radius: 25px;
    margin: 10px 0;
    text-align: left;
    overflow: hidden;
    width: 50%;
    min-width: 460px;
    padding: 1rem;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    color: #ff33ff;
    cursor: pointer;
}
.books .downloads button, .videos .infos {width: 100%;}
.books .infos, .videos .infos {width: 50%;min-width: 460px;}

.downloads a:hover {text-decoration: none; color: #ff33ff;}
article > h2:not(.nopb), article .bild h2 {padding-bottom: 20px;}
article > h2.nopb + p {margin-top: 0px;}
button a {padding: 1rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
button svg {
	float: left;
	margin-right: 1rem;
	display: block; 
	width: 55px; 
	height: auto;
	min-width: 55px;
}
.medien hr {
    height: 1px;
    width: 50%;
    margin: 2rem auto 0;
    border: none;
    background: #000;
}
audio {
	width:100%;
	min-width: 460px;
	margin: .5rem 0 1.5rem;
	display: block;
}
article p.notopmargin {margin: 0 0 1rem 0;}

/* Rechtliches */

.rechtliches main section  {padding-top: 130px;}
.rechtliches main section article > h2 {font-size: 1.8rem;}
.rechtliches main section article > h3 {margin: 2rem 0 1rem;font-size: 1.2rem;}
.rechtliches main section article ul {margin-left: 2rem;}

/* Newsbereiche */
.news main section {padding: 3rem 0 0; margin: 0 2rem 0 10%;}
.news main article {position: relative;}
.news main section article > div {position: absolute; margin-top: -250px;}
.news aside {margin: 0;padding: 1rem 5% 0 2rem; border-left: 1px solid #ccc;background: #f6f6ff;}
.news aside ul {list-style: none;}
.news aside > ul {padding-top: 0 rem;}
.news aside > ul > li {padding-top: 1rem;}
.news aside li {padding: 1rem 0 0 1rem;}
/* .news aside li a {white-space: nowrap;}*/
.news article {padding: 2rem 0 1rem; margin: 0;}
.news article p {margin: 1rem 0;}
.news hr {margin: 1rem auto 0;}
.news article > h3 {margin-bottom: 1.5rem;}
.news article > img {float:left; width: 20%; margin: 0 1.5rem 0 0;}
.news .flexer {width: 90%; margin: 0 auto;}
.news .flexer main {width: 100%; margin: 0 auto;}


/* Blog */
.zweispalter {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
}

.zweispalter > div:nth-of-type(odd) {
    flex-basis: 50%;
    padding: 0 15px 35px 0;
}
.zweispalter > div:nth-of-type(even) {
    flex-basis: 50%;
    padding: 0 0 35px 15px;
}
.zweispalter > div img {
    width: 100%;
}

.overall {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    background:rgba(255, 255, 255, 0.75);
    z-index: 999;
    display: none;
}
.overall.show {
    display: -webkit-box;  
    display: -webkit-flex; 
    display: flex;    
}
.overall img {
    width: auto;
    height: auto;
}

@media screen and (max-width:1300px) {
audio {min-width: 100%;}
.flex_media .bild img {margin-bottom: 20px;}
header#normal {margin-top: 2rem;}
main .flexer {-webkit-flex-wrap: no-wrap; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
main .flexer.rundbilder {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;  -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;}
.flex_media div:first-of-type {-webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%;}
.flex_media div:last-of-type {-webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%;}
.flex_media .bild img {width: 50%;}
article p img {width: 70%;}
.videos .bild img {width: 50%;min-width: 460px;}  
}

@media screen and (max-width:1000px) {
    .news .downloads button {min-width: 100%;}
}

@media screen and (max-width:768px) {
.rundbild {width: 27vw; height: 27vw;}
a.box_shadow_menu {display: inline-block;width: 50px;}
h1 {display: inline-block;font-size: 1.5rem;width: calc(100% - 50px) !important;}
nav div.flexer {-webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}
nav ul {display: none;}
nav#navigation:target ul {display: block;width: 100%;padding: 0;}
nav#navigation:target {position:relative;}
nav#navigation:target + header {margin-top: 0 !important;}
nav#navigation:target > div > ul {background: #fff7e1;}
nav#navigation:target > div {padding-bottom: 0;}
nav#navigation:target ul li {display: block;width: 100%;padding: 0.5rem 0;}
nav#navigation:target ul li a {text-align: center;}
nav ul li ul {position: relative; padding: 0; background: rgb(255, 232, 251); z-index:1;top: 0.6rem;}
nav#navigation:target a.box_shadow_menu {display:none;}
nav#navigation:target a.closer_menu {display:block;}
a.closer_menu:hover {text-decoration: none;}
.xs-visible {display: block;}
.xs-hidden {display: none;}
nav#navigation:target a.closer_menu::before {
	content: "X";
    bottom: 1rem;
	left:0;
    background-color: transparent;
    box-shadow: none;
    font-size: 1.5rem;
    color: #333;
    transform: scaleX(1.3);
	padding-right: 1.5rem;
	display: block;
}
nav div.flexer {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;padding-bottom: 10px;}
body, html {font-size: 14px;}	
article {margin: 0;}
.botschafter img {width: 100%;}
footer .flexer {padding: 2rem 3rem;  -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.block_three {margin-top: 1rem;}
nav .flexer {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.flex_media div {-webkit-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100% !important;}
.news article > img { float: left; width: 100%; margin: 0 1.5rem 1rem 0;}
header.bildheader {margin: 117px auto 0 !important;}
.news main section article > div {margin-top: -200px;}
.news main section {padding: 3rem 0 0; margin: 0 2rem;}
.news .flexer {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.news aside {margin: 0; padding: 1rem 1rem 3rem; border-left: none; border-bottom: 1px solid #ccc; width: 100%; order: 1}
.news main {order: 2;}
.flex_media .bild img {width: 100%;}
.downloads button {min-width: 100%;}
.books .infos, .videos .infos {width: 100%;min-width: 100px;}
.videos .bild img {width: 100%;min-width: 100px;}    
}


@media screen and (max-width:530px) {
 .rundbild {width: 70vw; height: 70vw;}
article {margin: 0 2rem; padding: 3rem 0 0;}
.flex_media h3 {font-size: 1.5rem;}
button a {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
article h4 {font-size: 1.25rem;}
article p img, .news article > img {float:none; width: 100%; margin: 0 0 1rem;}
button a img {margin: 0;}
h1 {font-size: 1rem;}
nav h1 img[alt="Logo"] {width: 50px;height: auto;}
nav h1 {font-size: 0.8rem;}
header.bildheader {margin: 99px auto 0 !important;}
}

@media screen and (max-width:330px) {
button a {
    align-items: center;
    flex-direction: column;
    text-align: center;
}
button a img {margin: 0 0 .5rem;}
.pdf {margin-right: 0;}
nav h1 img[alt="Logo"] {width: 30px;height: auto;}
nav h1 {font-size: 0.6rem;}
header.bildheader {margin: 70px auto 0 !important;}
}

@media screen and (max-width: 300px) {
h1 {font-size: 0.75rem; margin-bottom: 10px;}
#home h1 {padding: 1rem 0 0 30px;}
a.box_shadow_menu {width: 30px;}
.socials li {margin: .5rem;}
}

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.fullheight {
		height: 768px;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.fullheight {
		height: 1024px;
	}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
	.fullheight {
		height: 568px;
	}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 320px;
	}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
	.fullheight {
		height: 480px;
	}
}