/*--------------------------------------------------*/
/* IMPORT FONT 										*/
/*--------------------------------------------------*/

@import url(../fonts/hsrm_flama/stylesheet.css);

/*--------------------------------------------------*/
/* RESET 											*/
/*--------------------------------------------------*/

body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	background-color: #F1F1F1;	
}

header {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
	padding: 0;
	margin: 0;
	color: #A7A7A7;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/*--------------------------------------------------*/
/* FONT												*/
/*--------------------------------------------------*/

/* flamabasic, flamabasic_italic, flamasemibold, flamasemibold_italic, flamamedium, flamamedium_italic. flamabold, flamabold_italic, flamabook, flamabook_italic */

	/* MENUE */

nav.menue_haupt .subnavi li a {
	font: 1.3em/1.7em flamasemibold, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
    color: #A7A7A7; 
}

nav.menue_haupt .button_zurueck {
	font: 1.5em/1.5em flamasemibold, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	color: #A7A7A7;
}

footer li.impressum a {
	font: 0.83em/0em flamamedium, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	color: #A7A7A7;
}

main.content h1 {
	font: 1.6em/1.2em flamamedium, Arial, Helvetica, sans-serif;
	letter-spacing: 0.03em;
	color: #000;
	margin-top: -0.4em;
	margin-bottom:10px;
}

main.content h2 {
	font: 1.2em/1.2em flamabook, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	color: #000;
	margin-top: -0.5em;
}

main.content h3 {
	font: 1.2em/1.1em flamabook, Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	color: #000;
	margin-top: 0.4em;
}

main.content h4 {
	font: 0.8em/1.3em flamabook_italic, Arial, Helvetica, sans-serif;
	letter-spacing: 0.12em;
	color: #000;
}

main.content .layout_1 h4 {
	margin-top: 4.8em;
}

main.content .layout_2 h4.abstand_1 {
	margin-top: 0.5em;
}

main.content p {
	font: 1em/1.2em flamabook, Arial, Helvetica, sans-serif;
	letter-spacing: 0em;
	color: #000;
}

main.content .wrapper_arbeiten p {
	margin-top: -0.1em;
}

/*--------------------------------------------------*/
/* KONSTANTEN										*/
/*--------------------------------------------------*/
	
	/* CLEAR_DIV */ 

.clear_div {
	clear: both;
}

	/* BUTTON */

button {
	border: none !important;
	outline: none !important;
	background-color: #fff;
}

/*--------------------------------------------------*/
/* PRELOAD											*/
/*--------------------------------------------------*/

div.preload {
	position: fixed;
	top: -1000px;
	left: -100px;
	width: 100px;
	height: 100px;
}

div.preload div {
	width: 5px;
	height: 5px;
}

div.preload .preload_bild1 {
	background: transparent url(../imgs/xyz.png) center center no-repeat;
	background-size: 100%;
}

/*--------------------------------------------------*/
/* CONTENT											*/
/*--------------------------------------------------*/

main.content {
	position: absolute;
	right: 0;
	left: 0;
	min-width: 100%;	
	margin: 0;
	padding: 0;
	z-index: 0;
}

/*--------------------------------------------------*/
/* HAUPTMENUE 										*/
/*--------------------------------------------------*/

	/* MENUE_HAUPT */

nav.menue_haupt {
	position: fixed;
	top: 0em;
	right: 0;
	left: 0;	
	height: 7em;
	background-color: #fff;
    color: #A7A7A7;
	box-shadow: 0 0.1em 0.5em 0em #807d7d;
	z-index: 3500;
	transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-ms-transition: all 0.2s ease;
		    -moz-transition: all 0.2s ease;
		    -o-transition: all 0.2s ease;
}

	/* LOGO_WERKSCHAU */

nav.menue_haupt .logo_werkschau {
	position: absolute;
	left: 2em;
	top: 50%;
	width: 20em;
	height: 4em;
	margin-top: -2em;
	background: transparent url(../elemente/werkschau_wiesbaden_logo.png) center center no-repeat;
	background-size: 100%;
}

nav.menue_haupt .logo_werkschau a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

	/* HAMBURGER */

nav.menue_haupt .hamburger {
	position: absolute;
	right: 2em;
	top: 50%;
	width: 2.5em;
	margin-top: -1em;
	cursor: pointer;
}

nav.menue_haupt .balken {
	position: relative;
	width: 100%;
	height: 0.3em;
	margin-top: 0.3em;
	border-radius: 10em;
	background-color: #A7A7A7;
}

	/* SUBNAVI */

nav.menue_haupt .subnavi {
	position: absolute;
	right: 0em;
	width: 9em;
	padding-top: 4em; 
	display: none;
    color: #A7A7A7;
}

nav.menue_haupt .subnavi .leiste {
	position: absolute;
	top: 3.2em;
	right: -2em;
	width: 10em;
	padding: 2em;
	background-color: #fff;
	z-index: 3400;
	box-shadow: 0 0.1em 0.5em 0em #807d7d;
}

.leisteU {
	position: absolute;
	top: 3.2em;
	right: -2em;
	width: 10em;
	padding: 2em;
	background-color: #fff;
	z-index: 3400;
	box-shadow: 0 0.1em 0.5em 0em #807d7d;
 }



nav.menue_haupt .subnavi li {
	text-align: right;
	z-index: 3500;
    color: #A7A7A7;
}

/*nav.menue_haupt > .hamburger:hover .subnavi {
	display: block;
}*/


nav.menue_haupt .subnavi li a:hover {
	color: #ED3306;
}

nav.menue_haupt .subnavi li a.click {
	color: #ED3306;
}




/*Diese childs sind die Einträge in dem Menü. Also die jeweiligen Semester. Alle Childs, die hier aufgezählt sind, werden durchgestrichen. 
Also muss man sie heir löschen, damit sie nicht durchgestrichen sind
Man kann hier nur die Menüpunkte ansprechen, die auch existieren. Man müsste also in der html Datei neue li-Elemente hinzufügen, damit man
sie hier numerrieren kann*/

nav.menue_haupt .subnavi li:nth-child(5) a {
	text-decoration: line-through;
}

	/* BACK */

nav.menue_haupt .button_zurueck {
	position: absolute;
	top: 1.53em;
	right: 3.4em;
}



/*Video*/
.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}
 
.youtube .play {
    background: url("../elemente/play.png") no-repeat center center;
    background-size: 64px 64px;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=80);
    transition: all 0.9s ease-out;
}
 
.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

#vorschau {
    visibility:hidden; }

.popupwrapper img{
         display:block; }
    
.popupwrapper{
position: relative;
float: center; 
padding-bottom: 68%;
}    
.popupplay{
position: absolute;
margin: auto;
top: 0px;
z-index:2;
opacity:0;}

.popupvorschau{
position: absolute;
top: 0px;
opacity:1;
z-index:1;}

.popupplay:hover{
opacity:1;
    filter: alpha(opacity=80);
    transition: all 0.9s ease-out;
}

/*--------------------------------------------------*/
/* FOOTER 	 										*/
/*--------------------------------------------------*/


footer {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;	
	height: 3em;
	background-color: #fff;
	box-shadow: 0 0.1em 0.5em 0.2em #807d7d;
	z-index: 3500;
	transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-ms-transition: all 0.2s ease;
		    -moz-transition: all 0.2s ease;
		    -o-transition: all 0.2s ease;
}

footer .impressum {
	position: absolute;
	right: 12.5em;
	top: 0.56em;
	padding: 0.5em;
	cursor: pointer;
}

footer .hsrm_logo {
	position: absolute;
	right: 2em;
	top: 50%;
	width: 10em;
	height: 2em;
	margin-top: -1.15em;
	background: transparent url(../elemente/hsrm_logo.png) center center no-repeat;
	background-size: 100%;
}

footer li.impressum a:hover {
	color: #ED3306;
}

.off {
	pointer-events: none;
	-webkit-pointer-events: none;
	-ms-pointer-events: none;
}