:root{	        
	--char: #000000;
    --background: #002135;
    --nav: #38312e;
    --nav_char: #FFFFFF;
    --nav_active: #b18040;
    --aside: #38312e;
    --article: #dab079;
    --footer: #38312e;
    --shadow: #191919;
    --button: #242223;
    --button_hover: #b18040;
    --sec_char: #ffffff;
    --a_hover: #a20000;
    --table: #dab079;
    --char_hover: #000000;
    --button_char: #adaaaa;
    --glas: #505050a8;
}

body{	
	font-family:Arial;
	font-size: 1em;
	color:var(--char);
	background-color:var(--background);
	margin:0em;
	background-image:url('../image/background/brushed.jpg');
	background-attachment: fixed;
	background-repeat: repeat;
		
		
}

nav{	
	background-color:var(--nav);
	display:flex;
	flex-direction:row;
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: stretch;
	margin:1em;
	margin-left:0.5em;
	margin-right:0.5em;
	margin-bottom:0.5em;
	box-shadow:8px 8px 5px var(--shadow);
}

nav a{	
	padding: 1em 2%;
	color:var(--nav_char);
	text-decoration: none;
	text-align:center;
	white-space:nowrap;
}
nav a:hover{	
	background-color:var(--nav_active);	
}

section{
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
}

aside{	
	padding:1em;
	background-color:var(--aside);
	margin:0.5em;
	box-shadow:8px 8px 5px var(--shadow);
	width:20%;
	content-right:15%;
	color:var(--sec_char);
}

article{	
	background-color:var(--article);
	padding:1em;
	margin:0.5em;
	box-shadow:8px 8px 5px var(--shadow);
	flex:80%;
}

footer{		
	background-color:var(--nav);
	padding:0.05em;
	margin:0.5em;
	box-shadow:8px 8px 5px var(--shadow);
	display:flex;
	flexdirection:row;
	color:var(--sec_char);
	
}

footer p{	
	flex:50%;
	margin:1em;
	text-align:center;
	font-size:0.8em;
}

footer p a{	
	color:var(--buttonchar)
}

/*img{		
	width:100%;
}*/

a:hover{	
	color:var(--a_hover);
}

table, th, td{ 
	border:2px solid black;
	border-color:black;
	border-collapse: collapse;
	color:var(--char);
	background-color:var(--table);
}

#logo{ 
	margin:0.5em;
	box-shadow:8px 8px 5px var(--shadow);
}
#logo_image{
	width:auto;
	heigtht:auto;
	max-width:100%;
	max-heigtht:100%;
	display:block;
}

#img_gallary{	 
	display: flex;
	flex-wrap: wrap;						
}

#map{	
	width:100%;
	height:30em; 
	frameborder:0; 
	border:0;
	box-shadow:8px 8px 5px var(--shadow);
}
#wide{	
	flex:30%;	
}

.img_col{		
	flex: 20%;
	max-width: 25%;
	padding: 0 1em;
}

.img_col img{
	width:100%;
	margin-top:1em;
	vertical-align: middle;
	box-shadow: 8px 8px 5px var(--shadow);
}

/*Slider CSS*/

#slidercase{	
	background-color:var(--aside);
	border: 0em;
	margin-top:.6em;
	margin-left:.5em;
	margin-rigth:.5em;
	margin-bottom:.6em;
	height:400px;
	width:100%;
	display:inline-block;
	padding-bottom:4em;
	box-shadow:8px 8px 5px var(--shadow);
	
	text-align: center;
	position: relative;
	
}
#sliderviewport{
	background-color:gray;
	border: 0em;
	margin:.4em;
	height:400px;
	width:1200px;
	display:inline-block;
	_left:50%;
	padding:0;
	box-shadow:8px 8px 5px var(--shadow);
	text-align: center;
	position: relative;
}
#sliderframe{
	display:inline-block;
	overflow:hidden;
	
}
#sliderlist{
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	position: relative;
    left: 0%;
    width: 400%;
	height:25%;
    padding: 0;
	-webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s ease-in-out;

}
#sliderlist li{
	float:left;
}

figure{
	display:inline-block;
	margin:0em;
}

figcaption{
	opacity:0;
	display: block;
    color:var(--sec_char);
    position: absolute;
    bottom: 4em;
    padding: .4em;
    background: var(--glas);
	font-size:1.5em;
	-webkit-transition: opacity 2.5s cubic-bezier(0.93, -0.27, 1, 1);
    -moz-transition: opacity 2.5s cubic-bezier(0.93, -0.27, 1, 1);
    -o-transition: opacity 2.5s cubic-bezier(0.93, -0.27, 1, 1);
    transition: opacity 2.5s cubic-bezier(0.93, -0.27, 1, 1);
}
#imglabel div{
	opacity:0;
	display: block;
    color:var(--sec_char);
    position: absolute;
    left: 0.5em;
    bottom: 60%;
    padding: .4em;
    background: var(--glas);
	font-size:1.5em;
	-webkit-transition: left 1s ease-in-out;
    -moz-transition: left 1s ease-in-out;
    -o-transition: left 1s ease-in-out;
    transition: left 1s ease-in-out
}
.sliderControls {
    text-align: center;
	position: relative;
	top: 0%;
}
 
/* Controls nebeneinander bringen */
.sliderControls li {
    display: inline-block;
}
 
/* Controls auf einheitliche Maße bringen und die Ecken abrunden */
.sliderControls label {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    background: var(--button);
    color: var(--button);
	-webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
	box-shadow:8px 8px 5px var(--shadow);
}
.sliderControls label:hover{
	background: var(--button_hover) !important ;
}
.s_infographics{
	display: block;
	position: absolute ;
	top:30%;
	opacity: 0;
	margin-left:500px;
	-webkit-transition: opacity .350s ease-in-out;
    -moz-transition: opacity .350s ease-in-out;
    -o-transition: opacity .350s ease-in-out;
    transition: opacity .350s ease-in-out;
}

#input{
	display:none;
}

@media(max-width:700px){
	nav{		flex-direction:column;
				align-items:center;
	}
	section{flex-direction:column;
	}
	aside{	width:auto;}

	#slidebar{
		display:none;
	}
	
}