/************ BIOLOGISCHES ************/



body {
	font-family: 'Lato', Helvetica Neue, sans-serif;	
	font-size: 16px;
	font-size: 1.2vw;
	font-size: calc(0.4vw + 10px);
	line-height: 24px;
	line-height: 1.8vw;
	line-height: calc(0.6vw + 15px);
	font-weight: 300;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	-hyphens: auto;
	-webkit-text-size-adjust: none;
	margin: 0;
	padding: 0;
	behavior:url("../csshover.htc");
	text-decoration:none;
}

body a, body a, body a:hover {
	text-decoration: none;
	color: #FFF;
}

html { 
	-webkit-font-smoothing: subpixel-antialiased; 
}

#HG {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.HG-Index {
	background-image: url(../00-pics/Pic-1.jpg);
}

.HG-Forschung {
	background-image: url(../00-pics/Pic-2.jpg);
}

.HG-Entwicklung {
	background-image: url(../00-pics/Pic-3.jpg);
}

.HG-Bildung {
	background-image: url(../00-pics/Pic-4.jpg);
}

.HG-Fotos {
	background-image: url(../00-pics/Pic-12.jpg);
}

.HG-Quiz-1 {
	background-image: url(../00-pics/Pic-10.jpg);
}

.HG-Quiz-2 {
	background-image: url(../00-pics/Pic-15.jpg);
}

.HG-Quiz-3 {
	background-image: url(../00-pics/Pic-14.jpg);
}

.HG-Impressum {
	background-image: url(../00-pics/Pic-8.jpg);
}





/************ INDEX ************/



#logo-plus {
	position: absolute;
	top: 15vw;
	left: 0;
	width: 40vw;
	height: 12vw;
	z-index: 98;
	background-image: url(../00-pics/Logo-plus.png);
	background-size: contain;
	background-repeat: no-repeat;
}

#Logo-gross {
	position: absolute;
	top: -15vw;
	right: -10vw;
	width: 75vw;
	height: 75vw;
	background-image: url(../00-pics/Logo-gross.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 90;
}

#content-index {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	overflow: hidden;
}

#link-forschung {
	position: absolute;
	top: 3vw;
	left: 70vw;
	width: 30%;
	height: 5vw;
	z-index: 99;
}

#link-entwicklung {
	position: absolute;
	top: 23.5vw;
	left: 35%;
	width: 27vw;
	height: 5vw;
	z-index: 99;
}

#link-bildung {
	position: absolute;
	top: 36.5vw;
	left: 82%;
	width: 18vw;
	height: 5vw;
	z-index: 99;
}





/************ TEXT-STILE ************/


h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 3.5em;
	font-weight: 100;
	color: #FFF;
	letter-spacing: 0.2em;
}

h2, .h2 {
	font-size: 2.5em;
	line-height: 1.2em;
	font-weight: 300;
	letter-spacing: 0.05;
	text-align: left;
}

h3, .h3 {
	font-weight: 600;
	letter-spacing: 0.05em;
}

h5, .h5, h5 a, .h5 a, h5 a:hover, .h5 a:hover, h5 a.active, .h5 a.active {
	color: #030;
	font-size: 1.5em;
	line-height: 1.5em;
}

h4, .h4 {
	font-family: 'Raleway', sans-serif;
	font-size: 1.25em;
	line-height: 1.5em;
	font-weight: 300;
	letter-spacing: 0.05em;
}

.green {
	color: #030;
}

.white {
	color: #FFF;
}

.font-100, .font-100 a, .font-100 a:hover {
	font-weight: 100;
}

.font-300, .font-300 a, .font-300 a:hover {
	font-weight: 300;
}

.font-400, .font-400 a, .font-400 a:hover {
	font-weight: 400;
}

.font-600, .font-600 a, .font-600 a:hover {
	font-weight: 600;
}





/************ BILD-STILE ************/


.op-3  {
	opacity: .3;
}

.op-4  {
	opacity: .4;
}

.op-5  {
	opacity: .5;
}

.op-6  {
	opacity: .6;
}

.op-7  {
	opacity: .7;
}

.op-8  {
	opacity: .8;
}

.op-9  {
	opacity: .9;
}





/************ TABELLEN-STILE ************/


td { 
	vertical-align: text-top;
	padding-bottom: 0.5em;
}

.zeit { 
	width: 28%;
	text-align: right;
	padding-right: 2vw;
}

.separator { 
	height: 2em;
}





/************ CONTENT ************/


#Abdunkelung {
	position: fix;
	width: 100%;
	height: 5.5em;
	top: 0;
	background-color: #000;
	z-index: 99;
}

#XXX {
	display: none;
}

#headline {
	position: relative;
	float: left;
	width: 60%;
	height: 10vw;
	margin-top: -5.5em;
	margin-left: 9.9%;
	text-align: left;
	z-index: 90;
}

#logo {
	position: relative;
	float: right;
	margin-top: -4em;
	margin-right: 7.2%;
	width: 10em;
	height: 10vw;
	z-index: 95;
}

#logo a, #logo a:active, #logo a:hover {
	text-decoration: none;
	color: #FFF;
}
    
#content {
	position: absolute;
	top: 5.5em;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: scroll;
	height: 100%;
	z-index: 90;
	}

#text-HG-forschung {
	position: absolute;
	top: 5.5em;
	bottom: 4.5em;
	right: 0;
	width: 50vw;
	background-color: #000;
	z-index: 50;
}

#text-forschung {
	position: absolute;
	top: 0;
	bottom: 0;
	color: #FFF;
	padding-top: 3.5vw;
	padding-left: 55%;
	padding-right: 8%;
	text-decoration: none;
	z-index: 80;
}

#text-forschung a {
	font-weight: 400;
	text-decoration: none;
}

#text-HG-bildung {
	position: absolute;
	top: 5.5em;
	bottom: 4.5em;
	left: 0;
	width: 50vw;
	background-color: #FFF;
	z-index: 70;
}

#text-bildung {
	position: absolute;
	top: 0;
	bottom: 0;
	color: #333;
	padding-top: 3.5vw;
	padding-left: 10%;
	padding-right: 53%;
	z-index: 80;
}

.text-link-bild {
	position: relative;
	float: right;
	padding: 0.5vw 0 0 2vw;
}

#text-HG-entwicklung {
	position: absolute;
	top: 5.5em;
	bottom: 4.5em;
	right: 0;
	width: 50vw;
	background-color: #FFF;
	z-index: 70;
}

#text-fotos {
	position: absolute;
	top: 0;
	height: auto;
	color: #333;
	padding-top: 3.5vw;
	padding-left: 10%;
	z-index: 80;
}

#text-HG-fotos {
	position: absolute;
	top: 5.5em;
	bottom: 0;
	left: 0;
	width: 100vw;
	background-color: #000;
	z-index: 70;
}

#text-spiel {
	position: absolute;
	top: 0;
	height: auto;
	left: 0;
	width: 85%;
	margin-right: 10%;
	padding-top: 3.5vw;
	padding-left: 10%;
	text-align: center;
	z-index: 80;
}

#text-HG-spiel {
	position: absolute;
	top: 5.5em;
	bottom: 0;
	left: 0;
	width: 100vw;
	background-color: #FFF;
	z-index: 70;
}

#text-entwicklung {
	position: absolute;
	top: 0;
	bottom: 0;
	color: #333;
	padding-top: 3.5vw;
	padding-left: 55%;
	padding-right: 8%;
	z-index: 80;
}

#text-bildung a, #text-entwicklung a {
	text-decoration: none;
	color: #060;
	font-weight: 400;
}

#bottom-space {
	position: relative;
	float: left;
	width: 100%;
	height: 15vw;
}

#logo-mobile {
	display: none;
}

#mobile-menue {
	display: none;
}

#spiel {
	position: absolute;
	top: 0;
	height: auto;
	color: #333;
	padding-top: 2vw;
	padding-left: 10%;
	z-index: 80;
}






/************ BILDER ************/


#bild-rechts {
	position: absolute;
	width: 45vw;
	height: 22.5vw;
	border: 1px solid #FFF;
	top: 25%;
	right: -1px;
	padding: 0;
	margin: 0;
	z-index: 60;
}

#bild-rechts-M {
	display: none;
}

#bild-links {
	position: absolute;
	width: 45vw;
	height: 22.5vw;
	border: 1px solid #FFF;
	top: 25%;
	left: -1px;
	z-index: 1;
}

#bild-links-M {
	display: none;
}

#bild-links-hoch {
	position: absolute;
	width: 13.5vw;
	height: 22.5vw;
	border: 1px solid #FFF;
	top: 25%;
	z-index: 60;
}

.l-1 {
	left: -1px;
}

.l-2 {
	left: 16vw;
}

.l-3 {
	left: 31.5vw;
}

#bild-Impressum {
	position: relative;
	float: right;
	width: 12vw;
	height: 12vw;
	margin-top: 0.5vw;
	border: 1px solid #FFF;
	z-index: 60;
}

#link {
	position: relative;
	float: left;
	width: 28%;
	margin-right: 5%;
	margin-bottom: 1vw;
	line-height: 1em;
	text-align: center;
}

#link img {
	margin-bottom: 0.75vw;
}





/************ QUIZ ************/


#game {
	position: relative;
	float: left;
	width: 80vw;
	height: 36vw;
	margin-top: -2vw;
	overflow: hidden;
}

#game1 {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
}

#game2 {
	position: absolute;
	width: 100%;
	height: 100%;
	right: -100%;
}

#game1 img {
	width: 100%;
	height: 100%;
}

#game2 img {
	width: 100%;
	height: 100%;
}

.fade img {
	width: 100%;
	height: 100%;
	-webkit-animation-name: xxx;
	-webkit-animation-duration: 8s;
	-moz-animation-name: xxx;
	-moz-animation-duration: 10s;
	animation-name: xxx;
	animation-duration: 8s;
	opacity: 0;
}

.pix {
	width: 15vw;
	height: 15vw;
	margin: 0 2.5vw 0 2vw;
	float: left;
	border: 2px solid #999;
	cursor: pointer;
}

.first-pix {
	margin: 0 2.5vw 0 12.5vw;
}

.pix-2 {
	width: 15vw;
	height: 15vw;
	margin: 0 2.5vw 0 2vw;
	float: left;
	border: 2px solid #999;
	cursor: pointer;
}

.pix-3 {
	width: 15vw;
	height: 15vw;
	margin: 0 2.5vw 0 2vw;
	float: left;
	border: 2px solid #999;
	cursor: pointer;
}

.pix:hover, .pix-2:hover, .pix-3:hover {
	border: #030 solid 2px;
}

 
.questionText {
	margin-top: 1.5vw;
	width: 100%;
	background-color: #030;
	margin-right: 22.5vw;
	margin-bottom: 3vw;
	font-size: 2vw;
	line-height: 2em;
	font-weight: 400;
	letter-spacing: 0.05;
	text-align: center;
	color: #FFF;
}

.Level-Ende{
	width: 100%;
	margin-bottom: 3vw;
	font-size: 2em;
	line-height: 2em;
	font-weight: 400;
	letter-spacing: 0.05;
	text-align: center;
	color: #030;
}

.Level-Ende a:active {
	text-decoration: none;
	font-weight: 600;
	color: #030;
}

.feedback1 {
	position: absolute;
	top: 0;
	left: 36vw;
	width: 10vw;
	height: 8vw;
	background-image: url(../00-pics/quiz-ja.png);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
}

.feedback2 {
	position: absolute;
	top: 0;
	left: 36vw;
	width: 10vw;
	height: 8vw;
	background-image: url(../00-pics/quiz-nein.png);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.8;
}


@-webkit-keyframes xxx {
0% { opacity: 1; }
50% { opacity: 0; }
}

@keyframes xxx {
0% { opacity: 1; }
50% { opacity: 0; }
}



#level-buttons {
	position: relative;
	float: left;
	margin: -1vw 0 20vw 23.75vw;
}

.quiz-button {
	position: relative;
	float: left;
	width: 8vw;
	height: 2vw;
	margin: 1em 0 0 2em;
	background-color: #030;
	color: #FFF;
	font-size: 1vw;
	line-height: 0vw;
	font-weight: 400;
	text-align: center;
	border-radius: 0.5em;
}

.aktiv {
	background-color: #090;
}

	




/************ FOOTER ************/


#footer-HG {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 4.5em;
	left: 0;
	right: 0;
	background-color: #333;
	opacity: .8;
	z-index: 90;
}

#menu-P {
	position: fixed;
	bottom: 0.5em;
	width: 8vw;
	width: calc(4vw + 50px);
	left: 10%;
	z-index: 98;
}

#menu-H {
	position: fixed;
	bottom: 0.5em;
	width: 8vw;
	width: calc(4vw + 50px);
	left: 23%;
	z-index: 98;
}

#menu-S {
	position: fixed;
	bottom: 0.5em;
	width: 8vw;
	width: calc(4vw + 50px);
	left: 36%;
	z-index: 98;
}

#menu-Q {
	position: fixed;
	bottom: 0.5em;
	height: 3em;
	right: 20%;
	z-index: 98;
}


.menu {
	color: #FFF;
	text-align: center;
	font-weight: 400;
}

.active {
	font-weight: 900;
	text-decoration: none;
}

#mail {
	position: fixed;
	bottom: 0.75em;
	height: 3em;
	right: 15%;
	z-index: 98;
}

#quiz {
	position: fixed;
	bottom: 1em;
	height: 2.5em;
	right: 22%;
	z-index: 98;
}

#fotos {
	position: fixed;
	bottom: 1em;
	height: 2.5em;
	right: 14%;
	z-index: 98;
}

#info {
	position: fixed;
	bottom: 1em;
	height: 2.5em;
	right: 8.5%;
	z-index: 98;
}




/************ Bildergalerie Photoswipe ******************/




.inhalte-swipe li img { 
	display: inline; 
	width: auto; 
	height: 140px; 
	padding-top: 15px;

}


.gallery-swipe { 
	position: relative;
	width: 85vw;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}

.gallery-swipe ul {
	position: absolute;
	list-style: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	list-style-position: inside;
}
	
.gallery-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.gallery-swipe li { 
	display: inline-block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none; 
}

.gallery-swipe li a { 
	list-style: none; 
	display: inline;
	margin-left: 0; 
	margin-right: 2vw; 
	text-decoration: none; 
}

.gallery-swipe li img { 
	display: inline; 
	width: 18.75vw; 
	padding-bottom: 2vw;
}


/* For inline examples only */

#PhotoSwipeTarget { width: 100%; height: 200px; }

#Indicators { text-align: center; margin-top: 20px; }
#Indicators span { display: inline-block; height: 10px; width: 10px; margin: 0 10px 0 0; padding: 0; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border-radius:5px; background: #c5c5c5; overflow:hidden; }
#Indicators span.current{ background: #EEBF02; }


/*
 * photoswipe.css
 * Copyright (c) %%year%% by Code Computerlove (http://www.codecomputerlove.com)
 * Licensed under the MIT license
 *
 * Default styles for PhotoSwipe
 * Avoid any position or dimension based styles
 * where possible, unless specified already here.
 * The gallery automatically works out gallery item
 * positions etc.
 */

 
body.ps-active, body.ps-building, div.ps-active, div.ps-building
{
	background: #000;
	overflow: hidden;
}
body.ps-active *, div.ps-active *
{ 
	-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
	display: none;
}
body.ps-active *:focus, div.ps-active *:focus 
{ 
	outline: 0; 
}


/* Document overlay */

div.ps-document-overlay 
{
	background: #000;
}


/* UILayer */

div.ps-uilayer { 
	
	background: #000;
	cursor: pointer;
	
}


/* Zoom/pan/rotate layer */

div.ps-zoom-pan-rotate{
	background: #000;
}
div.ps-zoom-pan-rotate *  { display: block; }


/* Carousel */

div.ps-carousel-item-loading 
{ 
	background: url(loader.gif) no-repeat center center; 
}

div.ps-carousel-item-error 
{ 
	background: url(error.gif) no-repeat center center; 
}


/* Caption */

div.ps-caption
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-bottom: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
}
div.ps-caption *  { display: inline; }

div.ps-caption-bottom
{ 
	border-top: 1px solid #42403f;
	border-bottom: none;
	min-height: 44px;
}

div.ps-caption-content
{
	padding: 13px;
	display: block;
}


/* Toolbar */

div.ps-toolbar
{ 
	background: #000000;
	background: -moz-linear-gradient(top, #303130 0%, #000101 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303130), color-stop(100%,#000101));
	border-top: 1px solid #42403f;
	color: #ffffff;
	font-size: 13px;
	font-family: "Lucida Grande", Helvetica, Arial,Verdana, sans-serif;
	text-align: center;
	height: 44px;
	display: table;
	table-layout: fixed;
}
div.ps-toolbar * { 
	display: block;
}

div.ps-toolbar-top 
{
	border-bottom: 1px solid #42403f;
	border-top: none;
}

div.ps-toolbar-close, div.ps-toolbar-previous, div.ps-toolbar-next, div.ps-toolbar-play
{
	cursor: pointer;
	display: table-cell;
}

div.ps-toolbar div div.ps-toolbar-content
{
	width: 44px;
	height: 44px;
	margin: 0 auto 0;
	background-image: url(icons.png);
	background-repeat: no-repeat;
}

div.ps-toolbar-close div.ps-toolbar-content
{
	background-position: 0 0;
}

div.ps-toolbar-previous div.ps-toolbar-content
{
	background-position: -44px 0;
}

div.ps-toolbar-previous-disabled div.ps-toolbar-content
{
	background-position: -44px -44px;
}

div.ps-toolbar-next div.ps-toolbar-content
{
	background-position: -132px 0;
}

div.ps-toolbar-next-disabled div.ps-toolbar-content
{
	background-position: -132px -44px;
}

div.ps-toolbar-play div.ps-toolbar-content
{
	background-position: -88px 0;
}

/* Hi-res display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi)
{
	div.ps-toolbar div div.ps-toolbar-content
	{
		-moz-background-size: 176px 88px;
		-o-background-size: 176px 88px;
		-webkit-background-size: 176px 88px;
		background-size: 176px 88px;
		background-image: url(icons@2x.png);
	}
}






@media (max-width: 900px) and (orientation: portrait) {


body {
	font-size: 16px;
	line-height: 24px;
}





/************ INDEX ************/


.HG-Index {
	background-image: url(../00-pics/Pic-7.jpg);
}

#XXX {
	display: block;
	position: absolute;
	width: 100%;
	height: 20vw;
	background-color: #030;
	border-bottom: 1px solid #FFF;
	z-index: 95;
}

#logo-plus {
	position: absolute;
	top: 0vw;
	left: -5vw;
	width: 100vw;
	height: 20vw;
	background-image: url(../00-pics/Logo-plus-mobile.png);
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 98;
}

#Logo-gross {
	position: absolute;
	top: -6vw;
	left: -3vw;
	width: 125vw;
	height: 125vw;
	background-image: url(../00-pics/Logo-gross.png);
	background-size: contain;
}

#link-forschung {
	top: 24vw;
	left: 65%;
	width: 34%;
	height: 10vw;
}

#link-entwicklung {
	top: 57vw;
	left: 1%;
	width: 39%;
	height: 10vw;
}

#link-bildung {
	top: 79vw;
	left: 74%;
	width: 25%;
	height: 10vw;
}





/************ TEXT-STILE ************/


h1 {
	font-size: 6vw;
}





/************ CONTENT ************/


#Abdunkelung {
	height: 8.5vw;
}

#headline {
	position: fix;
	height: 10vw;
	width: 65%;
	top: -9.5vw;
	left: 9.9%;
	margin: 0;
}

#logo {
	position: fix;
	top: -7vw;
	right: 5%;
	width: 20vw;
	margin: 0;
}

#logo a, #logo a:active, #logo a:hover {
	text-decoration: none;
	color: #FFF;
}
    
#content {
	top: 8.5vw;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	overflow: scroll;
	z-index: 80;
}

#text-HG-bildung, #text-HG-forschung, #text-HG-entwicklung, #text-HG-fotos, #text-HG-spiel {
	top: 8.5vw;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 50;
}


#text-HG-forschung {
}

#text-forschung, #text-bildung, #text-entwicklung, #spiel {
	position: relative;
	float: left;
	color: #000;
	padding-top: 3.5vw;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 20vw;
	z-index: 80;
}

#text-forschung {
	color: #FFF;
}

#bottom-space {
	width: 100%;
	height: 10vw;
}




/************ BILDER ************/


#bild-rechts {
	position: absolute;
	width: 45vw;
	height: 22.5vw;
	border: 1px solid #FFF;
	top: 25%;
	right: -1px;
	padding: 0;
	margin: 0;
}

#bild-links {
	display: none;
}

#bild-links-M {
	display: inline;
	position: relative;
	float: left;
	width: 100%;
	height: 50vw;
	margin: 0;
	border: none;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

#bild-links-hoch {
	display: none;
}

#bild-links-hoch-M {
	display: inline;
	position: relative;
	width: 30%;
	height: 50vw;
	border: 1px solid #FFF;
	top: 0;
}

.l-1-M {
	float: left;
	margin-left: -1px;
}

.l-2-M {
	float: left;
	margin-left: 5%;
}

.l-3-M {
	float: right;
	margin-right: -1px;
}

#bild-Impressum {
	position: relative;
	float: right;
	width: 30vw;
	height: 30vw;
	margin-top: 0.5vw;
	border: 1px solid #FFF;
	z-index: 80;
}





/************ QUIZ ************/


#game {
	width: 100%;
	height: 50vw;
}

.pix {
	width: 20vw;
	height: 20vw;
	margin: 0 2.5vw 0 2vw;
}

.first-pix {
	margin: 0 2.5vw 0 5vw;
}

.pix-2 {
	width: 18vw;
	height: 18vw;
	margin: 0 0 0 1.25vw;
}

.pix-3 {
	width: 18vw;
	height: 18vw;
	margin: 0 0 0 1.25vw;
}
 
.questionText {
	margin-right: 22.5vw;
	font-size: 2.5vw;
}


#level-buttons {
	margin: 0 0 20vw 9vw;
}

.quiz-button {
	width: 16vw;
	height: 4vw;
	font-size: 2vw;
}





/************ FOOTER ************/


#footer-HG {
	height: 5em;
}

#menu-P {
	bottom: 1vw;
	width: 12vw;
	font-size: 0.8em;
}

#menu-H {
	bottom: 1vw;
	width: 12vw;
	left: 26vw;
	font-size: 0.8em;
}

#menu-S {
	bottom: 1vw;
	width: 12vw;
	left: 42vw;
	font-size: 0.8em;
}

#menu-Q {
	bottom: 0.75em;
	height: 6vw;
	right: 18vw;
}

#quiz {
	bottom: 1em;
	right: 30%;
}

#fotos {
	bottom: 1em;
	right: 17%;
}

#info {
	bottom: 1em;
	right: 9%;
}





}


@media (max-width: 600px) and (orientation: portrait) {


body {
	font-size: 4vw;
	line-height: 6vw;
}





/************ TEXT-STILE ************/


h1 {
	font-size: 1.6em;
	line-height: 1vw;
	letter-spacing: 0.1em;
	text-align: center;
	font-weight: 300;
}

h2 {
	font-size: 2em;
}





/************ CONTENT ************/


#Abdunkelung {
	height: 20vw;
}

#headline {
	position: fix;
	height: 10vw;
	width: 70%;
	top: -15vw;
	left: 15%;
	margin: 0;
}

#logo {
	display: none;
}

#logo-mobile {
	display: inline;
	position: absolute;
	top: 5vw;
	left: 5%;
	width: 10vw;
	height: 10vw;
	margin: 0;
	z-index: 99;
}

#logo-mobile a, #logo-mobile a:active, #logo-mobile a:hover {
	text-decoration: none;
	color: #FFF;
}

#content {
	top: 20vw;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	overflow: scroll;
	z-index: 80;
}

#text-HG-forschung, #text-HG-bildung, #text-HG-entwicklung, #text-HG-spiel {
	top: 20vw;
	bottom: 0;
	right: 0;
	width: 100%;
	z-index: 50;
}


#text-forschung, #text-bildung, #text-entwicklung {
	position: relative;
	float: left;
	width: 80%;
	padding-top: 3.5vw;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 20vw;
	color: #000;
	z-index: 80;
}

#text-forschung {
	color: #FFF;
}

.zeit { 
	text-align: right;
	padding-right: 2vw;
	font-size: 0.8em;
	line-height: 1.2em;
}





/************ BILDER ************/


#bild-rechts {
	position: absolute;
	width: 45vw;
	height: 22.5vw;
	border: 1px solid #FFF;
	top: 25%;
	right: -1px;
	padding: 0;
	margin: 0;
}

#bild-links {
	display: none;
}

#bild-links-M {
	display: inline;
	position: relative;
	float: left;
	width: 100%;
	height: 50vw;
	margin: 0;
	border: none;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
}

#bild-links-hoch {
	display: none;
}

#bild-links-hoch-M {
	display: inline;
	position: relative;
	width: 30%;
	height: 50vw;
	border: 1px solid #FFF;
	top: 0;
}

.l-1-M {
	float: left;
	margin-left: -1px;
}

.l-2-M {
	float: left;
	margin-left: 5%;
}

.l-3-M {
	float: right;
	margin-right: -1px;
}

#bild-Impressum {
	position: relative;
	float: right;
	width: 40vw;
	height: 40vw;
	margin: 0.5vw 0 2vw 2vw;
	border: 1px solid #FFF;
	z-index: 80;
}





/************ QUIZ ************/


#game {
	width: 100%;
	height: 130vw;
}

.pix {
	width: 20vw;
	height: 20vw;
	margin: 0 2vw 0 0;
}

.first-pix {
	margin: 0 2vw 0 6vw;
}

.pix-2 {
	width: 30vw;
	height: 30vw;
	margin: 0 0 6vw 6vw;
}

.pix-3 {
	width: 30vw;
	height: 30vw;
	margin: 0 0 6vw 6vw;
}
 
.questionText {
	margin-right: 22.5vw;
	font-size: 4vw;
}

#level-buttons {
	margin: 0 0 20vw 4vw;
}

.quiz-button {
	width: 18vw;
	height: 6vw;
	font-size: 2.5vw;
}





/************ FOOTER ************/


#footer-HG {
	display: none;
}

#menu-P {
	display: none;
}

#menu-H {
	display: none;
}

#menu-S {
	display: none;
}

#menu-Q {

}

#quiz {
	display: none;
}

#fotos {
	display: none;
}

#info {
	display: none;
}





/************ MENUE = mobile nav http://osvaldas.info ************/


#menue {
    display: none;
}

#mobile-menue {
	display: block;
	position: absolute;
	top: 3vw;
	left: 0;
	font-weight: 300;
	width: 100%;
	margin: 0;
}    


#mobile-menue > a { /* Symbol mobile-menuee */
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 5vw;
	right: 5vw;
	width: 10vw;
	height: 6vw;
	text-align: left;
	text-indent: -9999px;
	z-index: 95;
}

#mobile-menue > a:before,
#mobile-menue > a:after { /* Linien Symbol mobile-menuee */
	position: absolute;
	border-top: 1vw solid #FFF;
	top: 0%;
	left: 0%;
	right: 0%;
	content: '';
}

#mobile-menue > a:after {/* Linien Symbol mobile-menuee */
	top: 50%;
}
		
#mobile-menue:not( :target ) > a:first-of-type,
#mobile-menue:target > a:last-of-type {
	display: block;
	z-index: 99;
}    

#mobile-menue li {
	position: relative;
	list-style: none;
	z-index: 99;
}    

#mobile-menue li a {
	color: #666;
	display: block;
	z-index: 99;
}    

#mobile-menue li a:active {
	background-color: #030 !important;
}

#mobile-menue span:after	{
	width: 0;
	height: 0;
	border: 0.3em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #FFF;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -10px; /* 5 */
}



/* first level */

	
#mobile-menue > ul {
	height: auto;
	display: none;
	position: absolute;
	margin-top: 9vw;
	left: 0;
	right: 0;
	background-color: #030;
	border-top: 1vw solid #FFF;
	border-bottom: 1vw solid #FFF;
	-webkit-box-shadow: 0px 0 100px 0 #000;
    -moz-box-shadow: 0px 0px 100px #000;
	box-shadow: 0px 0px 100px #000;
	z-index: 99;
}    

#mobile-menue > ul > li {
	width: 100%;
	height: 100%;
	float: none;
	margin: 0;
	padding: 0;
	z-index: 99;
}    

#mobile-menue > ul > li > a {
	height: auto;
	font-size: 1.5em;
	line-height: 8vw;
	color: #FFF;
	text-align: left;
	padding-left: 10vw;
	margin-left: -12.5vw;
	padding-top: 4vw;
	padding-bottom: 4vw;
	background-color: #030;
	border: 0px;
	z-index: 99;
}    

#mobile-menue > ul > li:not( :last-child ) > a {
	border-right: 0px;
}

#mobile-menue > ul > li:hover > a,
#mobile-menue > ul:not( :hover ) > li.active > a {
	color: #FFF;
	background-color: #060;
	z-index: 99;
}    
		
#mobile-menue:target > ul {
	display: block;
	z-index: 99;
}    

#mobile-menue > ul > li:not( :last-child ) > a {
	border-right: none;
	border-bottom: 1px solid #FFF;
	z-index: 99;
}    





/************ Bildergalerie Photoswipe ******************/



.inhalte-swipe li img { 
	display: inline; 
	width: auto; 
	height: 140px; 
	padding-top: 15px;

}

.gallery-swipe { 
	position: relative;
	width: 85vw;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}

.gallery-swipe ul {
	position: absolute;
	list-style: none;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	list-style-position: inside;
}
	
.gallery-swipe:after { 
	clear: both; 
	content: "."; 
	display: block; 
	height: 0; 
	visibility: hidden; 
}

.gallery-swipe li { 
	display: inline-block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	list-style: none; 
}

.gallery-swipe li a { 
	list-style: none; 
	display: inline;
	margin-left: 0; 
	margin-right: 4vw; 
	text-decoration: none; 
}

.gallery-swipe li img { 
	display: inline; 
	width: 38vw; 
	padding-bottom: 4vw;
}



}



@media (max-width: 600px) and (orientation: portrait) and (min-device-width: 1500px){


body {
}

h1 {
	letter-spacing: 0.1em;
	text-align: center;
	font-weight: 100;
}

h2 {
	font-size: 2em;
}

#mobile-menue > ul > li > a {
	font-size: 2em;
}    

}





/************ SMARTPHONES LANDSCAPE ************/

@media only screen and (max-width: 900px) and (orientation: landscape) {



body {
	font-size: 1.6vw;
	line-height: 2.2vw;
}

/************ FOOTER ************/


#footer-HG {
	height: 5em;
}

#menu-P {
	bottom: 1vw;
	width: 9vw;
	font-size: 0.9em;
}

#menu-H {
	bottom: 1vw;
	width: 9vw;
	left: 23vw;
	font-size: 0.9em;
}

#menu-S {
	bottom: 1vw;
	width: 9vw;
	left: 36vw;
	font-size: 0.9em;
}

#menu-Q {
	bottom: 0.75em;
	height: 6vw;
	right: 18vw;
}

#quiz {
	bottom: 1em;
	right: 30%;
}

#fotos {
	bottom: 1em;
	right: 17%;
}

#info {
	bottom: 1em;
	right: 9%;
}



}