@charset "UTF-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/

.rightspace {
	display:none;
}

.menutext {
	font-size:medium;
	border:none;
	border-width:0px;
	vertical-align:middle;
}

#TopBanner {
	position:fixed;
	background-image:url(images/bannerbg.png);
	background-size:contain;
	display:none;
	width:100%;
	border-bottom:5px;
	border-bottom-color:#FFFFFF;
	border-bottom-style:solid;
	z-index:0;
	}

#TopBannerM {
	background-image:url(images/bannerbg.png);
	background-size:contain;
	display:block;
	width:100%;
	border-bottom:5px;
	border-bottom-color:#FFFFFF;
	border-bottom-style:solid;
	z-index:0;
	text-align:center;
    padding-top: 5px;
    padding-bottom: 10px;
	}
	
#BottomBanner {
	background-image:url(images/bannerbg.png);
	background-size:contain;
	display:block;
	width:100%;
	border-top:5px;
	border-top-color:#FFFFFF;
	border-top-style:solid;
	z-index:0;
	margin-top:0px;
	position:relative;
	float:left;
	bottom:0px;
	height:120px;
		}

.MenuFoto {
	display:block;
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	padding:10px;
	z-index:2;
	overflow:hidden;
	transition:all .2s linear;
}



.MenuVideo {
	display:block;
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	padding:10px;
	z-index:2;
	transition:all .2s linear;
	overflow:hidden;
}


.MenuAbout {
	display:block;
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	padding:10px;
	z-index:2;
	overflow:hidden;
	transition:all .2s linear;
}


.Vimeo {
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	display:block;
	color:#FFFFFF;
	font-size:small;
	float:left;
	text-align: left;
	width:90%;
    margin-left: -1%;
	margin-top:10px;
	
}

#TopLogo {
	width:80%;
	display:inline;
	margin-left:auto;
	margin-right:auto;
	
}

.menulink {
	cursor:pointer;
	color:#FFF;
    text-decoration: none;
	}

.menulink:hover {
	color:#A0F6F3;
	}

.pagetitle {
	display:block;
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:20px;
	margin-bottom:20px;
}

.subtitle {
	display:block;
	font-family: 'Century Gothic', Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:16px;
	margin-bottom:20px;
}

.slideshow {
	margin-top:-10px;
	background-position:center;
	background-size:cover;
	position:absolute;
	width:100%;
	height:98%;
	z-index:-10;
	transition:opacity 2s linear;
}

.inhalt {
    display:block; 
    float:left;
    margin-left: 5%;
    width:90%; 
    text-align:center; 
    padding:1%;
    margin-bottom:30px; 
    margin-top:30px;
}

.textkasten {
    margin-top: 55vh;
    background:rgba(20,25,30,0.8); 
    padding-left: 5%; 
    margin-left:-10px; 
    width:80%; 
    max-width:360px; 
    float:left; 
    color:#FFF; 
    font-size:20px; 
    font-family:'Century Gothic', Arial, Helvetica, sans-serif; 
    display:block; 
    text-align:left; 
    border-radius:10px
}

.videobox {
    z-index:10; 
    display:block; 
    position:fixed; 
    width:360px;
    height:280px;
    left:calc(50% - 180px);
    top:calc(50% - 140px);
    background-color: #EEE; 
    padding:20px; 
    box-sizing: border-box
    
}

.videobox2 {
    z-index:10; 
    display:block; 
    position:fixed; 
    width:280px;
    height:360px;
    left:calc(50% - 140px);
    top:calc(50% - 180px);
    background-color: #EEE; 
    padding:20px; 
    box-sizing: border-box
    
}



/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 481px) {

#BottomBanner {
	margin-top:20px;

}

.videobox {
    width:480px;
    height:300px;
    left:calc(50% - 240px);
    top:calc(50% - 150px);
    
}

.videobox2 {
    width:300px;
    height:480px;
    left:calc(50% - 150px);
    top:calc(50% - 240px);
    
}
    
}
    
/* Desktoplayout: 769 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 769px) {
	
.rightspace {
	display:block;
	margin-right:8px;
}
	
.menutext {
	font-size:x-large;
}	
	
#TopBanner {
	display:block;
	height:20vh;
	max-height:90px;

	margin-top:0px;

	border-bottom:4px;
	border-bottom-color:#FFFFFF;
	border-bottom-style:solid;
	vertical-align:middle;

}

#TopBannerM {
	display:none }

#BottomBanner {
	position:fixed;
	margin-top:300px;
	height:60px;
	margin-left:auto;
	margin-bottom:0px;
	margin-right:auto;
	border-top:4px;
	border-top-color:#FFFFFF;
	border-top-style:solid;
	bottom:0px; }

.MenuFoto {
	width:140px;
	float:right;
	display:block;
	height:25px;
	margin-right:1%;
	margin-top:15px;
	font-size:large;
	overflow:hidden;
	padding:15px;
}

.MenuFoto:hover {
	height:320px;
	background-color:#006763;

}

.MenuVideo {
	width:140px;
	float:right;
	display:block;
	height:25px;
	margin-right:1%;
	margin-top:15px;
	font-size:large;
	overflow:hidden;
	padding:15px;
}

.MenuVideo:hover {
	height:115px;
	background-color:#006763;

}

.MenuAbout {
	width:auto;
	float:right;
	display:block;
	height:25px;
	margin-right:1%;
	margin-top:15px;
	font-size:large;
	overflow:hidden;
	padding:15px;
}

.MenuAbout:hover {
	height:110px;
	background-color:#006763;

}

#TopLogo {
	max-width:269px;
	width:35%;
	margin-top:15px;
	margin-left:20px;
	float:left;
	opacity:0.8;
	transition: opacity .2s ease-out;

}

#TopLogo:hover {
	opacity:1;
	
	
}

.slideshow {
	margin-top:10px;
	top:0px;
	left:0px;
    height: 100%;
}
    
    
.inhalt {
    margin-bottom:80px; 
    margin-top:100px;
}


.Vimeo {
	font-size:larger;
	width:26%;
    text-align:center;
    margin-top: 18px;
	}
	
.pagetitle {
	font-size:xx-large
}
    
.textkasten {
    position: absolute;
    bottom: 100px;
    }
    
.videobox {
    width:960px;
    height:560px;
    left:calc(50% - 480px);
    top:calc(50% - 280px);
    
}

.videobox2 {
    width:340px;
    height:600px;
    left:calc(50% - 170px);
    top:calc(50% - 300px);
}

}