* {
	margin: 0px;
	padding: 0px;
}

body {
  font-size: 100%;
}

.wrapper {
	width: 70vw;
  max-width: 100%;
	margin-left: auto;
	margin-right: auto;
  overflow: hidden;
}

.teaser_mengentext {
  max-width: 100%;
  font: 400 18px/32px sans-serif;
	/*line-height: 1.6em;*/
	text-indent: 0em;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 0 2%;
}

/******************************************************************************/
/* Header                                                                     */
/******************************************************************************/
#header {
  background-color: #000000;
}

/*******************************************************************
Desktop Navigation
*******************************************************************/

#desktopNavigation {
  display: none;
	font-family: sans-serif;
	text-align: center;
	font-size: 1.2em;
	max-width: 100%;
	width: auto;
	padding: 2% 10% 2%;
}

#desktopNavigation li {
	display: inline;
	margin: 0% 1% 2%;
	padding: 2%;
	color: #fffff0;
	line-height: 1.0em;
	list-style-type: none;
}

#desktopNavigation ul li a{
	text-decoration: none;
	color: #fffff0;
}

#desktopNavigation ul li a:link.currentpage,
#desktopNavigation ul li a:visited.currentpage {
	color: #db9319;
}

#desktopNavigation ul li a:focus {
	color: #db9319;
	text-decoration: none;
	border-bottom: 3px solid #db9319;
}

#desktopNavigation ul li a:hover {
	color: #db9319;
	background-color: #333;
	border-bottom: 1px solid #db9319;
}

.logo {
	height: auto;
	width: 320px;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	clear: both;
}

.logo img {
	height: auto;
	max-width: 100%;

}

/*******************************************************************
main content
*******************************************************************/
/*******************************************************************
Intro
*******************************************************************/
#intro-container-1 {
	font-family: sans-serif;
	text-align: center;
	color: #fff;
	background: #000;
	padding: 50px 0;
}

#intro-container-1  h1 {
	font: 400 3vw/4.2vw sans-serif;
  padding: 0 0 2% 0;
	margin: 0 0 0 0;
}

#intro-container-1  h2 {
	font: 400 2vw/3.2vw sans-serif;
  text-align: center;
  color: #fff;
  background: #000;
}

/*******************************************************************
CSS art
*******************************************************************/
#csspattern {
  background: #fffff0; /* Ivory */
}

#red_planet {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 95% 85%,
    rgba(0, 0, 0, 0.8) 48%,
    transparent 60%,
    transparent 100%
    ),
  radial-gradient(
    circle at 160% 85%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
    ),
  radial-gradient(
    circle at 50% 50%,
    rgba(205, 89, 51, 1.0) 30%,
    rgba(252, 128, 68, .4) 30.4%,
  	transparent 41%,
    transparent 100%
    );
}

#interstellar_travel {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 80% 20%,
    rgba(255, 250, 240, 0.8) 0,
    rgba(163, 181, 199, .6) .5%,
    transparent .8%
    ),
  radial-gradient(
    circle at 90% 40%,
    rgba(255, 250, 240, 0.8) 0,
    transparent 1%
    ),
  radial-gradient(
    circle at 60% 50%,
  /*  rgba(255, 250, 240, 0.6) 0,*/
    coral 0,
    transparent .8%
    ),
  radial-gradient(
    circle at 15% 180%,
    rgba(0, 0, 0, 1.0) 35%,
    rgba(29, 30, 51, 1.0) 58%,
    rgba(161, 189, 212, 1.0) 59.5%,
    rgba(163, 181, 199, .7) 59.6%,
    rgba(22, 66, 132, 0.6) 60.2%,
  /*  rgba(163, 181, 199, .6) 60.2%,*/
    transparent 70%
    );
  }

  #total_solar_eclipse {
  height: 60vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at center,
    rgba(0, 0, 0, 1.0) 31%,
    rgba(205, 89, 51, 1.0) 31.5%,
    rgba(252, 128, 68, .6) 32.2%,
    transparent 38%
    );
  }

  #atmospheric_haze {
  height: 60vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 95% 85%,
    rgba(0, 0, 0, 0.7) 48%,
    transparent 60%,
    transparent 100%
    ),
  radial-gradient(
    circle at 160% 85%,
    rgba(0, 0, 0, 0.4) 40%,
    transparent 100%
    ),
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.0) 31%,
      rgba(147, 213, 241, 1.0) 31.5%,
      rgba(161, 189, 212, 0.6) 31.7%,
      transparent 36%
      )
/*  radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.0) 31%,
    rgba(22, 66, 132, 1.0) 31.5%,
    rgba(161, 189, 212, 0.6) 31.8%,
    transparent 36%
    )*/;
  }

  #atmospheric_haze_2 {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
      circle at 70% 20%,
      rgba(255, 250, 240, 0.8) 0,
      transparent 0.4%
      ),
  radial-gradient(
    circle at 80% 40%,
    rgba(255, 250, 240, 0.8) 0,
    transparent .8%
    ),
  radial-gradient(
    circle at 40% 60%,
    rgba(255, 250, 240, 0.6) 0,
    transparent .6%
    ),
  radial-gradient(
    circle at -30% 50%,
    rgba(0, 0, 0, 0.0) 36%,
    rgba(147, 213, 241, 0.8) 41.5%,
    rgba(161, 189, 212, 0.6) 41.7%,
    transparent 46%
    );
  }

  #uranus {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 25% 30%,
    transparent 12%,
    rgba(0, 0, 0, 0.8) 38%,
    rgba(0, 0, 0, 1.0) 42%
    ),
  radial-gradient(
    circle at 50% 50%,
    rgba(161, 189, 212, 1.0) 30%,
  	rgba(244, 227, 188, 0.2) 30.4%,
  	transparent 38%,
    transparent 100%
    );
  }

#increasing_moon {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 25% 50%,
    rgba(0, 0, 0, 1.0) 35%,
    transparent 60%,
    transparent 100%
    ),
  radial-gradient(
    circle at 10% 50%,
    rgba(0, 0, 0, 0.2) 40%,
    transparent 100%
    ),
  radial-gradient(
    circle at 50% 50%,
    rgba(255, 250, 240, 1.0) 30%,
  /*	rgba(255, 255, 255, 1.0) 30%,
    rgba(244, 227, 188, 1.0) 30%,*/
  	rgba(110, 154, 188, 0.4) 30.4%,
  	transparent 41%,
    transparent 100%
    );
}

#crescent {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:
  radial-gradient(
    circle at 42% 50%,
    rgba(0, 0, 0, 1.0) 35%,
    transparent 38%
    ),
  radial-gradient(
    circle at 30% 50%,
    rgba(0, 0, 0, 0.2) 45%,
    transparent 100%
    ),
  radial-gradient(
    circle at 50% 50%,
    rgba(244, 227, 188, 1.0) 30%,
    rgba(52, 66, 119, 1.0) 30.1%,
    rgba(110, 154, 188, 0.3) 30.4%,
    transparent 32%
    );
}

#horizon {
  height: 50vw;
  margin-bottom: 1%;
  background-color: #000;
  background-image:

  radial-gradient(
    circle at 50% 185%,
    rgba(0, 0, 0, 1.0) 69%,
    transparent 72%
    ),
  radial-gradient(
    circle at 50% 150%,
    rgba(135, 206, 235, 1.0) 65%,
    rgba(52, 66, 119, 1.0) 65.1%,
    rgba(110, 154, 188, 0.3) 65.4%,
    transparent 67%
  );
}

/*******************************************************************
Bildunterschrift
*******************************************************************/
.bildunterschrift {
	font: 400 18px/32px monospace;
  color: #747474;
  text-align: center;
  padding: 0 0 2em 0;
}

/*******************************************************************
Link zurück zum Seitenanfang
*******************************************************************/
#footerTotop {
	padding-top: 50px;
	padding-bottom: 30px;
	background-color: #000000;
}

#footerTotop .top {
	text-align: center;
}

#footerTotop a {
	font: 400 18px/28px sans-serif;
	background: #000000;
	border: 1px solid #fffff0;
  border-radius: 10px;
	color: #fffff0;
	text-decoration: none;
	padding: 12px;
}

#footerTotop a:hover,
#footerTotop a:focus {
	background: #fffff0;
	border: 1px solid #fffff0;
	color: #000;
}

/*******************************************************************
footer
*******************************************************************/
#footer {
	clear: both;
  background-color: #000000;
}

#footerText {
	clear: both;
	color: #fffff0;
	font: 400 16px/22px sans-serif;

	text-align: center;
	padding: 2% 1% 4%;
	margin: 0px auto;
}

#footerText ul {
	padding: 0px;
	list-style-type: none;
}

#footerText ul li {
	display: inline;
}

#footerText a:link {
	text-decoration: none;
	color: #fffff0;
}

#footerText a:visited {
	color: #fffff0;
}

#footerText a:focus {
	background-color: #fffff0;
	color: #db9319;
	border-bottom: 3px solid #db9319;
}

#footerText a:hover {
	background-color: #333;
	color: #db9319;
	border-bottom: 1px solid #db9319;
}

#footerText a:active {
	color: #f00;
	border-bottom: 1px solid #f00;
}

/*******************************************************************
mobile Navigation
*******************************************************************/
#navicon {
  /* Menü-Icon
  display: none; */
  max-width: 100%;
  cursor: pointer;
  margin-left: 50px;
  position: fixed;
  right: 10%;
  top: 10%;
  padding: 5px;
  background: #000;
  z-index: 20;
}

#navicon:active,
#navicon:focus {
  /* Hintergrundfarbe wechselt beim Berühren des Menü-Icons */
  background: #607d8b;
}

#mobileNavigation {
  /* Navigation für kleine Bildschirmgroessen */
  display: none;
  background-color: #263238;
  font: 400 1.125rem/1.75rem sans-serif;
}

#mobileNavigation ul li a {
  /* Links in den Menuepunkten*/
  text-decoration: none;
  text-align: left;
  display: block;
  color: #fff;
  padding: 14px 10px;
  border-bottom: 1px solid #fff;
}

#mobileNavigation ul li.current_page a {
  /* Link im Menuepunkt der aktuellen Seite */
  color: #fff;
  border-bottom: 1px solid #fff;
}

#mobileNavigation ul li.current_page,
#mobileNavigation ul li:hover,
#mobileNavigation ul li:focus,
#mobileNavigation ul li a:hover,
#mobileNavigation ul li a:focus {
  background: #607d8b;
  color: #fff;
}

#mobileNavigation ul li a:hover,
#mobileNavigation ul li a:focus,
#mobileNavigation ul li.current_page a:hover,
#mobileNavigation ul li.current_page a:focus {
  border-bottom: 1px solid #fff;
}

/******************************************************************************/
/* @media rules                                                               */
/******************************************************************************/
@media only screen and (max-width: 959px) {
/* die Hauptnavigation wird ab jetzt ausgeblendet */
  #desktopNavigation {
    display: none;
  }

  #navicon {
    /* das Menü-Icon für die mobile Navigation wird eingeblendet */
    display: block;
  }

  .wrapper {
  	width: 80%;
  }

  .logo {
  	max-width: 60%;
  }
}