/*
	-----------------------------------------------------------
	Section 1: Global page definitions
	-----------------------------------------------------------
*/

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

	html { height: 100%; }
	body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #171717; }
	img { border: none; width: 100%; }
	a { color: #ebab27; text-decoration: none; }
	a:hover { text-decoration: underline; }

	/* typo */
	body { font-size: 1em; font-family: 'Source Sans Pro', sans-serif; }
	html { font-size: 100%; }

	p { font-size: 1em; line-height: 1.5em; color: #eaeaea; margin-bottom: 1.5em; }
	h1 { margin-top: 0; font-size: 1.125em; color: white; }
	h2 { margin-top: 0; padding: 0; font-size: 0.8em; color: #ebab27; }
	li { margin: 0 0 1em 0; color: #eaeaea; }
	label { float: left; width: 4.5em; }

	.small { font-size: 0.8em; line-height: 1.8em; }

	.moz-bug { clear: both; }

	/* main layout */
	#mainContainer div {
		float: left; margin: 0;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-o-box-sizing:border-box;
		-ms-box-sizing:border-box;
		box-sizing:border-box;
	}

	.spacer1col { width: 8.33%; height: 7.125em; }
	.spacer2col { width: 16.66%; height: 7.125em; }

	#mainContainer { margin: 0 auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; background: url(../images/bg.jpg) bottom right; background-size: cover; }

	#navigation a { float: left; display: block; margin: 2.6em 0 0 2.5em; text-align: center; color: white; line-height: 1em; }
	#navigation a:first-child { margin-left: 0; }
	#navigation a:hover { color: #ebab27; background-position: 100% 100%; text-decoration:none; }

	#navigationSmart { display: none; }

	i { font-size: 1.3em; }
	.navtext {  font-size: 0.70em; }
	#home .home, #person .person, #elefant .elefant, #kontakt .kontakt { background-position: 100% 100%; color: #ebab27; }

	.iconElefant { float: left; padding: 25px 0 0 0; width: 34px; height: 5px; background-image: url(../images/icon_elefant.png); }

	#logo { background: url(../images/logo.png) left center no-repeat; }
	#mainText { padding: 2.5em 0 0 0; }
	#mainText i { margin: 0 1em 0 0; color: #ebab27; font-size: 0.95em; }

	.smallPic img { float: left; width: 61px; height: 80px; margin: 0 1em 3em 0; }
	#socials a { display: block; float: left; margin: 1.5em 0 2.5em 0; }
	#socials a:hover { text-decoration: none; }
	#socials i { font-size: 2em; }

	#slider { position: fixed; bottom: 0; right: 0; height: 2.75em; display: none; }
	#impressum { width: 90%; padding: 0 0 2em 0; text-align:right; font-size: 0.8em; }

	#addThis { width: 100%; padding: 2em 0 2em 16.66%; }
	#addThisSmart { display: none; width: 100%; padding: 2em 0 2em 16.66%; }


/*
	-----------------------------------------------------------
	Section 2: Full size
	-----------------------------------------------------------
*/

	@media (min-width: 60em) {

		#mainContainer { width: 90%; max-width: 64em; }
		#topHome { width: 100%; height: 24.5em; background: url(../images/top_home.jpg) center; }
		#topPerson { width: 100%; height: 24.5em; background: url(../images/top_person.jpg) center; }
		#topElefant { width: 100%; height: 24.5em; background: url(../images/top_elefant.jpg) center; }
		#topKontakt { width: 100%; height: 24.5em; background: url(../images/top_kontakt.jpg) center; }
		#logo { width: 58.33%; height: 7.125em; }
		#navigation { width: 33.33%; height: 7.125em; }
		#mainText { width: 41.66%; }
		#citation, .onlySmart { display: none; }

		#contact { width: 25%; padding: 3.5em 0 0 0; }
		#contact label { float: left; width: 5em; }
		#contact label.indent { margin: 0 0 3em 0; }

		#addThisSmart { display: none; }

	}



/*
	-----------------------------------------------------------
	Section 2: Tablet size
	-----------------------------------------------------------
*/

	@media (min-width: 45em) and (max-width: 60em) {

		#mainContainer { width: 90%; max-width: 45em; }
		#topHome { width: 100%; height: 24.5em; background: url(../images/top_home_tablet.jpg) center;  }
		#topPerson { width: 100%; height: 24.5em; background: url(../images/top_person_tablet.jpg) center;  }
		#topElefant { width: 100%; height: 24.5em; background: url(../images/top_elefant_tablet.jpg) center;  }
		#topKontakt { width: 100%; height: 24.5em; background: url(../images/top_kontakt_tablet.jpg) center;  }
		#logo { width: 46.66%; height: 7.125em; }
		#navigation { width: 45%; height: 7.125em; }
		#mainText { width: 58.33%; }
		#citation, .onlySmart { display: none; }

		#contact, #addThisSmart { display: none; }

	}




/*
	-----------------------------------------------------------
	Section 3: Smartphone size
	-----------------------------------------------------------
*/

	@media (max-width: 45em) {

	#mainContainer { width: 100%; }

	#topHome { width: 100%; height: 5.3em; background: url(../images/bg_home_smart.jpg); }
	#topPerson { width: 100%; height: 5.3em; background: url(../images/bg_home_smart.jpg); }
	#topElefant { width: 100%; height: 5.3em; background: url(../images/bg_home_smart.jpg); }
	#topKontakt { width: 100%; height: 5.3em; background: url(../images/bg_home_smart.jpg); }
	#logo { width: 100%; height: 5.3em; background: url(../images/logo_smart.png) left center no-repeat; }

	#navigation { display: none; }

	#navigationSmart { display: block; position: fixed; bottom: 0; right: 0; z-index: 100; width: 100%; height: 3.1em; padding: 0 0 0 2em; font-size: 0.9em; background: url(../images/bg_navi_smart.jpg) repeat-x; }
	#navigationSmart a  { float: left; display: block; margin: 0.8em 0 0 2.5em; text-align: center; color: white; line-height: 1.1em; }
	#navigationSmart a:first-child { margin-left: 0; }
	#navigationSmart a:hover { color: #ebab27; background-position: 100% 100%; text-decoration:none; }
	i { font-size: 2em; }

	#mainText { padding: 0 10%; font-size: 0.8em; }
	#citation { display: block; padding: 2em 0 0 0; width: 100%; font-style: italic; }
	#citation img { float: left; width: 61px; height: 80px; margin: 0 1em 3em 0; }
	.source { font-size: 0.7em; font-style: normal; }

	#contact, #addThis, .spacer1col, .spacer2col, .noSmart { display: none; }

	#slider, #addThisSmart { display: block; }

	}