@charset "utf-8";
/* CSS Document: Vastuberatung */



/*-----------------------------------------------------------------------------------*/
/*	1.0 Reset
/*-----------------------------------------------------------------------------------*/
body, html, container, box, table, img, bgimg, imagewrapper, imagetitle, input, textarea, select, field, weg, label, main, article, cloud, section, slidemenu, slidepic, slidebox, titelslide, typewriter, nav, footer, header, 
menu-wrapper, hamburger-menu, menu-container, menu-list, menu-submenu, accordion-toggle, accordion-content, a, col, colgroup, group, column, row, form, h1, h2, h3, h4, h5, h6, t1, t2, t3, t4, t5, t6, z1, z2, letter, bild {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
}
/*-----------------------------------------------------------------------------------*/
/*sanftes srollen*/
html {scroll-behavior:smooth;}

/*-----------------------------------------------------------------------------------*/
/*	2.0 Bereiche
/*-----------------------------------------------------------------------------------*/
article, cloud {/* Inhaltsbereich */
	width:100%;
	margin:0;
	padding:0;
}
/*-----------------------------------------------------------------------------------*/
nav, footer {/* Scroll-Bereiche oben/unten */
	background:#ABDDED;
	position:fixed;
	z-index:+100;
	height:4em;
	width:100%;
	margin:0 auto;
	padding:0;
	}
nav, footer {
	opacity:0.95;
	filter:alpha(opacity=95);	/* IE */
	-moz-opacity:0.95;			/* Mozilla */
	-khtml-opacity:0.95;		/* KTHML */
	-opera-opacity:0.95;		/* Opera */
	}
nav {
	top:0;
	border-bottom:1px solid #F8C049;
	box-shadow:0px 2px 5px grey;
	-webkit-box-shadow:0px 2px 5px grey;
	-moz-box-shadow:0px 2px 5px grey;
	-o-box-shadow:0px 2px 5px grey;
	-ms-box-shadow:0px 2px 5px grey;
	}
footer {
	bottom:0;
	border-top:1px solid #F8C049;
	box-shadow:0px -2px 5px grey;
	-webkit-box-shadow:0px -2px 5px grey;
	-moz-box-shadow:0px -2px 5px grey;
	-o-box-shadow:0px -2px 5px grey;
	-ms-box-shadow:0px -2px 5px grey;
}

footer, nav {/* scrollen */
	transition:transform .25s .1s ease-in-out;
	}
.down footer {/* scrollen nach unten weg */
	transform:translate3d(0, +4em, 0);
	}		
.down nav {/* scrollen nach oben weg */
	transform:translate3d(0, -4em, 0);
}			

/*-----------------------------------------------------------------------------------*/
#container {
	background:#ffffff;
	width:100%;
	margin:0;
	padding:0;
	border-top:1px solid #F8C049;
	border-bottom:1px solid #F8C049;
	box-shadow:0px 0px 8px grey;
	-webkit-box-shadow:0px 0px 8px grey;
	-moz-box-shadow:0px 0px 8px grey;
	-o-box-shadow:0px 0px 8px grey;
	-ms-box-shadow:0px 0px 8px grey;
}
#section1, #section2, #section3, #word-cloud, #cloud, #titelslide, .imagewrapper, .imagetitle {/* Bereiche */
	max-width:1000px;
	margin:0 auto;
	}
#section1 {/* Text Hauptseiten */
	padding:3em 1em;
	}
#section2 {/* Text Rechtliches */
	padding:2em 1em;
	opacity:0.97;
	}
#section3 {/* Legenden */
	padding:0.5em 1em;
	}
#cloud {
	padding:1em 1em;
}
/*-----------------------------------------------------------------------------------*/
#slidemenu { /*Slidemenü rechts */
	position:fixed;
	z-index:+10;
	right:-18.0em;
	top:40%;
	width:auto;
	border-bottom-left-radius:20px;
	border-top-left-radius:20px;
	background:#F8C049;
	opacity:0.95;
	margin:0;
	padding:0.5em;
	}
#slidemenu:hover {
	right:0;
	width:auto;
	background:#FFDE98;
	opacity:0.95;
	}
#slidemenu {
	transition:1.0s;
	}
#slidemenu a {
	position:relative;
	left:0;
	}
#slidemenu a:focus {
	left:-7em;
	}
#slidemenu a {
	transition:0.8s;
	}
#slidemenu:hover a:focus {
	left:0;
	background:none;
	}
#slidepic {padding-top:1.1em;padding-right:1em;
	margin:0;
	width:100%;
	max-width:80px;
	border:none;
	}
#slidebox, #slidepic {
	float:left;
}
/*-----------------------------------------------------------------------------------*/
ul.404 { /*Aufzählungszeichen Fehlermeldung*/
	list-style-type:square;
	list-style-position:inside;
	color:#F8C049;
	padding-left:50px;
	}
.404 {
	font-weight:700;
	font-style:normal;
	color:#614E3B;
	font-size:1.1em;
	line-height:1.5em;
	word-spacing:0.05em;
	letter-spacing:0.05em;
	text-align:justify;
	vertical-align:top;					
	margin-top:0px;	
	padding:0px;
}

ul { /*Aufzählungszeichen allgemein*/
	padding-left:25px;
	}
ul.list {
	list-style-type:square;
	list-style-position:outside;
	color:#BF9974;
}

/*-----------------------------------------------------------------------------------*/
.imagewrapper, .imagetitle {/* Bildbereiche */
	opacity:0.97;
}
/*-----------------------------------------------------------------------------------*/
/*	3.0 Startseite - Titelanimation
/*-----------------------------------------------------------------------------------*/
#titelslide {
	opacity:0.98;
	background:#ffffff;
	height:100%;
	padding:0;
	opacity:0.90;
	max-width:1000px;
	}
#titelslide p {
	font-family:'Bebas Neue', cursive;padding-top:20%;
	font-weight:400;
	font-style:regular;
	font-size:2.9em; 
	color:#205775;
	line-height:1.2em;
	word-spacing:0.05em;
	letter-spacing:0.05em;
	text-align:center;
	animation:fadein 9s;
    -moz-animation:fadein 9s;		/* Firefox */
    -webkit-animation:fadein 9s;	/* Safari and Chrome */
    -o-animation:fadein 9s;			/* Opera */
}
.typewriter {
	font-family:'Shadows Into Light', cursive;
	font-weight:400;
	font-style:regular;
	font-size:2.2em; 
	color:#F8C049;
	line-height:1.9em;
	word-spacing:0.05em;
	letter-spacing:0.05em;
	text-align:center;
	overflow:hidden;		/* Ensures the content is not revealed until the animation */
	white-space:nowrap;		/* Keeps the content on a single line */
	margin:0 auto;			/* Gives that scrolling effect as the typing happens */
	animation:typing 3.5s steps(25, end), blink-caret .75s step-end infinite;
}

.bgimg-first, .bgimg-last {margin:0; padding:0;
}

@keyframes typing {/* The typing effect */
	from { width: 0 }
	to { width: 100% }
	}
@keyframes blink-caret {/* The typewriter cursor effect */
  from, to { border-color: transparent }
  50% { border-color: orange; }
	}
@keyframes fadein {
    from {opacity:0.05;}
    to {opacity:1;}
	}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0.05;}
    to {opacity:1;}
	}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0.05;}
    to {opacity:1;}
	}
@-o-keyframes fadein { /* Opera */
    from {opacity:0.05;}
    to {opacity: 1;}
}
/*-----------------------------------------------------------------------------------*/
/*	1.0 Effekte
/*-----------------------------------------------------------------------------------*/

/* nach oben ------------------------------------------------------------------------*/
#top {position:fixed;bottom:0;right:0;padding:8px;z-index:+10;}
#top img {display:tabel-cell;opacity:1.0;-webkit-transition:.1s opacity linear;-moz-transition:.1s opacity linear;-ms-transition:.1s opacity linear;-o-transition:.1s opacity linear;transition:.1s opacity linear}
#top img:hover {opacity:0.8;}
#top img:active{position:relative;top:1px;}
#top span {display:none;text-align:center;}
#top:hover span, top:active span, top:link span, top:visited span {display:block;text-decoration:none;font-family:'Oswald', sans-serif;font-weight:400;font-style:normal;font-size:0.8em;}