/* Stylesheet Gerald Hross */

/* fira-sans-regular - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/fira-sans-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('fonts/fira-sans-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-regular.svg#FiraSans') format('svg'); /* Legacy iOS */
}
/* fira-sans-italic - latin */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/fira-sans-v8-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Italic'), local('FiraSans-Italic'),
       url('fonts/fira-sans-v8-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/fira-sans-v8-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/fira-sans-v8-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/fira-sans-v8-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/fira-sans-v8-latin-italic.svg#FiraSans') format('svg'); /* Legacy iOS */
}

/* caveat-700 - latin */
@font-face {
    font-family: 'caveatbold';
    src: url('fonts/caveat/caveat-bold-webfont.woff2') format('woff2'),
         url('fonts/caveat/caveat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	display: flex;
	min-height: 100vh;
	margin: 0 auto;
	flex-direction: column;
		background-color: #FFFFFF;
		color: black;
		font-family: 'Fira Sans', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
	}


	h1, h2, h3 {
			font-family: 'caveatbold';
			font-weight: normal;
			font-style: normal;
			color: black;
			text-align: center;
			font-size:36px;
			line-height: 46px;
			margin-top: 0;
			margin-bottom: 0;
			}
			
	h1 {
			margin-top: 40px;
			}
	
	h2 {
			padding-top: 12px;
			}
	
	a {
		text-decoration: none;
		color: black;
		}
		
	a:hover {
			border-bottom-color: transparent;
			text-decoration: underline;
			color: #4A4A4A;
		}
		
	p {
			padding: 0 10%;
			margin-bottom: 24px;

			}
			
	p.teaser_text {
			font-style: Italic;
			font-size: 20px;
			line-height: 26px;
			text-align: center;
			}		

	ol, ul {
			list-style: none;
		}		
			
/*Wrapper*/
	#wrapper {
		width: 60%;
		margin: 0 auto;
		}

		

@media screen and (max-width: 1280px) {

	#wrapper {
		width: 80%
		}
	}
				
		

@media screen and (max-width: 980px) {

		#wrapper {
			width: 90%;
		}
	
	}
	
/* Header */

header {
display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	margin-bottom: 2em;
	-webkit-align-items: center;	/* Safari 6.1+ */
	align-items: center;
	}

article {
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-flex: 3 1 0%;
	flex: 3 1 0%;
}

@media all and (max-width: 640px) {

article {
	display: initial;
	align-items: center;
	justify-content: center;
	-webkit-flex: 1 1 0%;
	
}
}

img.label {
		width:142px;
		}
		
/*
img.claim {
		width:423px;
		}	
*/
@media all and (max-width: 640px) {
img.label {
		width:122px;
		margin-left: 40%;
		margin-bottom: -4em;
		}

}


	 
/* Teaser */
		
	div.teaser_top { 
		background-color: none;
		position: relative;
		height: 100%;
		
		width: 100%;
		z-index: -10;
		} 
		
	div.teaser{ 
		background-color: none;
		height: 100%;
		position: relative;
		width: 100%;
		margin-top: 24px;
		margin-left: 0;
		z-index: -10;
		
		}
		
		img.teaser {
		position: relative;
		width: 100%;
		z-index: -20;
		margin-top: 0;
		}

@media all and (max-width: 640px) {
	img.teaser {
		margin-top: -1em;
		}	
}
	
		

		
/* Iframe */	

		#item_iframe {
			background-color: #2f6666c2;
			padding-bottom: 12px;
			margin-bottom: 1em;
			}
			
		div.iframe{
		margin: 0 auto;
		padding: 0.5em;
		
		}
		
/* Flexible Boxen */

.flex-container {
	display: -webkit-flex;
	display: flex;
	margin-bottom: 2em;
}

.flex-item {
	margin: 1em;
	padding: 1em;
	font-style: Italic;
	font-weight: 400;
	text-align: center;
	background: #ececec;
	-webkit-flex: 1 1 0%;
	flex: 1 1 0%;
	}
	
	div.actions h3 {
		margin-top: 20px;
		margin-left: 20%;
		}
	
.flex-item img {
		margin-top: 1em;
		
		}
		
.flex1 {
	-webkit-flex: 3 1 auto;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 20em;
}

.flex2 {
	-webkit-flex: 3 1 auto;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 20em;
}

.flex3 {
	-webkit-flex: 3 1 auto;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 20em;
}

@media screen and (max-width: 1120px) {
	
.flex-item {
	margin: 0.5em;
	padding: 0.5em;
}
	
}
	
@media all and (max-width: 900px) {
.flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
}	

.flex1 {
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-basis: 1em;
}

.flex2 {
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-basis: 1em;
}

.flex3 {
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-basis: 1em;
}

}


footer {
	background-color: #F5A623;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 1em;
	text-align: center;
}

p.footer {
	font-size: 0.8em;
	margin: 2em;
}

a.footer {
	padding:1em;
}