/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height:1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------------------------------------------------------- */

html {
	background: url("../bilder/hintergrund.svg") no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: 0 auto;
	width:100%;
}

body {
	margin: 0 auto;
	width:100%;
}

header {
	position:fixed;
	z-index:1;
	margin: 0 auto;
	width:100%;
	xbackground-color: rgba(255, 255, 255, 0.9);
	animation: header-animation 5s linear;

}

div#banner {
	position:absolute;
	xbackground-color: rgba(255, 255, 255, 1);
	width:100%;
	margin:0 auto;
}

/* CSS Normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}

/* Box-sizing border-box */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* We start writing out flexbox here. The above is just page setup */
.container {
	width:60rem;
	height:300px;
	margin:0 auto;
	display:flex;
	display:-webkit-flex;
	flex-direction:row;
	-webkit-flex-direction:row;
	flex-wrap: nowrap;
	-webkit-flex-wrap:nowrap;
	justify-content:space-around;
	-webkit-justify-content:space-around;
	
}

/* Some default styles to make each box visible */
.box {
	color:white;
	text-align: center;
	align-items:center;
	-webkit-align-items: center;
	align-content: space-around;
	-webkit-align-content: space-around;
}

.box1 img.muster{
	animation: box1-animation 5s linear;
}

.box2 img.muster{
	animation: box2-animation 5s linear;
}

.box3 img.muster{
	animation: box3-animation 5s linear;
}

.box4 img.muster{
	animation: box4-animation 5s linear;
}

.box5 img.muster{
	animation: box5-animation 5s linear;
}

.box6 img.muster{
	animation: box6-animation 5s linear;
}

.box7 img.muster{
	animation: box7-animation 5s linear;
}

.box8 img.muster{
	animation: box8-animation 5s linear;
}

.box9 img.muster{
	animation: box9-animation 5s linear;
}

img.logo {
	margin-top:1rem;
	margin-bottom:-0.6rem;
}

img.muster {
	width:3rem;
	padding-top:1rem;
	padding-bottom:1rem;
}

img.muster:hover { 
	transform: rotate(360deg)scale(1.5,1.5);
	transition: 2s;
}

p.navigation a{
	font-family: 'Indie Flower', cursive;
	color:rgba(52, 63, 105, 1);
	text-decoration:none;
	font-size:1.75rem;
}

p.navigation a:hover{
	font-family: 'Indie Flower', cursive;
	color:rgba(213, 43, 30, 1);
	text-decoration:none;
	font-size:1.75rem;
}

p#headline a{
	font-family: 'Indie Flower', cursive;
	color:rgba(213, 43, 30, 1);
	animation: headline-animation 5s linear;
	font-size:3rem;
	xbackground-color: rgba(255, 255, 255, 0.9);
	text-decoration:none;
}

p#headline a:hover {
	color:rgba(52, 63, 105, 1)
}

img#flag {
	position:fixed;
	top:0px;
	z-index:-1;
	width:150rem;
	margin:auto;
	animation: flag-animation 10s linear;
}

main {
	background-color:rgba(255, 255, 255, 0.9);
	margin:auto;
	width:60rem;
	animation: main-animation 5s linear;
	xopacity:0;
	overflow:hidden;
}


section {
	margin:auto;
	margin-top:290px;
	width:90%;
}

/*@keyframes main-animation {
	from { 
		margin-left:-100%;
		width: 75%;
		opacity:0;
	}

	to {
		margin-left:12.5%;
		width: 75%;
		opacity:1;
	}
}

@keyframes header-animation {
  from {
    margin-top:-100%;
    width: 100%; 
  }

  to {
    margin-top:0%;
    width: 100%;
  }
}*/

@keyframes header-animation {
	0%  { opacity: 0;}
	20% { opacity: 1;}
}

@keyframes hg-flag-animation {
	0%  { opacity: 0;}
	20% { opacity: 1;}
}

@keyframes flag-animation {
	0%  { transform: translate(-100%);}
	20% { transform: translate(0%);}
}

@keyframes box1-animation {
	0%   { transform: translate(-100%,-100%);}
	10%  { transform: translate(0px,0px);}
}

@keyframes box2-animation {
	0%   { transform: translate(-100%,-100%);}
	14%  { transform: translate(0px,0px);}
}

@keyframes box3-animation {
	0%   { transform: translate(-100%,-100%);}
	18%  { transform: translate(0px,0px);}
}

@keyframes box4-animation {
	0%   { transform: translate(-100%,-100%);}
	22%  { transform: translate(0px,0px);}
}

@keyframes box5-animation {
	0%   { transform: translate(-100%,-100%);}
	26%  { transform: translate(0px,0px);}
}

@keyframes box6-animation {
	0%   { transform: translate(-100%,-100%);}
	29%  { transform: translate(0px,0px);}
}

@keyframes nav-animation {
	0%  { opacity: 0;}
	20% { opacity: 0;}
	25% { opacity: 0.25;}
	30% { opacity: 0.50;}
	35% { opacity: 0.75;}
	40% { opacity: 1;}
}

@keyframes headline-animation {
	0%  { opacity: 0;}
	40% { opacity: 0;}
	45% { opacity: 0.25;}
	50% { opacity: 0.50;}
	55% { opacity: 0.75;}
	60% { opacity: 1;}
}



@keyframes main-animation {
	0%   { transform: translate(-300%);}
	75%  { transform: translate(-125%);}
	80%  { transform: translate(-100%);}
	85%  { transform: translate(-75%);}
	90%  { transform: translate(-50%);}
	95%  { transform: translate(-25%);}
	100% { transform: translate(0%);}
}

h1 {
	font-family: 'Indie Flower', cursive;
	border-bottom:4px double rgba(213, 43, 30, 1);
	border-left:4px solid rgba(213, 43, 30, 1);
	color:rgba(213, 43, 30, 1);
	font-size:1.75rem;
	padding:0.5rem;
	margin-bottom:1rem;
	margin-top:3rem;
}

h2 {
	font-family: 'Indie Flower', cursive;
	xbackground-color:rgba(0, 0, 0, 0.5);
	color:rgba(213, 43, 30, 1);
	font-size:1.5rem;
	margin-bottom:0.5rem;
	margin-top:2rem;
}

article h1#ersteheadline {
	margin-top:0rem;
}

p {
	font-family: 'Open Sans', sans-serif;
	color:black;
	font-size:1rem;
	line-height:1.5;
	margin-bottom:1.5rem;
}

figcaption {
	font-family: 'Open Sans', sans-serif;
	color:black;
	text-align:left;
}

article {
	float:right;
	width:30rem;
}

figure {
	margin-left:0px;
	padding-right:30px;
	padding-bottom:2rem;
}

div#fotosite {
	float:left;
	width:20rem;
}

img.fotogalerie {
	border:2px solid white;
}

img.fotogalerie:hover {
	border:2px solid silver;
}