/*  
Theme Name: Flatista
Theme URI: www.flatista.de
Version: 1.0
Author: Veronika Sattler
Author URI: http://websache.de
*/

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

	INHALT:
	
	1. BASICS
		1.1. HTML5
		1.2. Reset
		1.3. Basics
			1.3.1. Links
			1.3.2. Listen
			1.3.3. Typographie
			1.3.4. Formulare
			1.3.5. Media
			1.3.6. Media
		1.4. Sprungmarken
		1.5. Icons
	2. SEITENSTRUKTUR 
	3. MEDIA QUERIES

/* 1. BASICS
-----------------------------------------------------------------------------------------------
===============================================================================================*/
/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Quicksand Regular'), local('Quicksand-Regular'),
       url('fonts/quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}

/* quicksand-700 - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Quicksand Bold'), local('Quicksand-Bold'),
       url('fonts/quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
}

/* 1.1. HTML 5
-----------------------------------------------------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

/* 1.2. Reset
-----------------------------------------------------------------------------------------------*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}
/* 1.3. Allgemeines
-----------------------------------------------------------------------------------------------*/
html, body {
	height: auto;
	font-family: "Quicksand", sans-serif;
	font-size:0.94em;
	line-height:1.5;
	-webkit-text-size-adjust: none;
	width: 100%;
	overflow-x: hidden;
	}
.inside {
	width: 90%;
	margin:auto;
}


/* 1.3.1. Links
-----------------------------------------------------------------------------------------------*/
a {
	text-decoration:none; 
	color:#355d8f;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out; 
	}
a:visited {
	text-decoration:none;
	}
a:focus {
	text-decoration: underline;
	}


/* 1.3.2. Listen
-----------------------------------------------------------------------------------------------*/
ul {
	list-style: none;
	}
ol {
	list-style: decimal outside;
	}


/* 1.3.3. Typographie
-----------------------------------------------------------------------------------------------*/
p {
	padding-bottom: 15px;
	}
h1, h2, h3, h4 {
	font-family: "Quicksand", sans-serif;
	font-weight: 500;
	}
		

/*1.3.4. Media
-----------------------------------------------------------------------------------------------*/
img {
	max-width: 100%;
	height: auto;
	}
iframe {
	position: relative;
	max-width: 100%;
	}

/* 2. Seitenstruktur
-----------------------------------------------------------------------------------------------
===============================================================================================*/
#wrapper {
	position: relative;
	min-height: calc(100vh - 40px);
	padding-bottom:40px;
	z-index:8999;
	}


/*2.1. Header mit Navigation und Logo
-----------------------------------------------------------------------------------------------*/
#pageheader {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
	font-size:92%;
    background: #355d8f;
	}

.logo {
	width: 120px;
	margin: 20px auto;
}


/*2.2. Content
-----------------------------------------------------------------------------------------------*/
#main {
	padding-bottom: 80px;
}
.slogan {
	background: #355d8f url(../images/munich.svg) no-repeat center bottom;
	color:#fff !important;
	
}
.slogan .inside {
	padding: 60px 0px 180px 0px;
	max-width: 900px;
	text-align: center;
}
.slogan h1 {
	font-size: 120%;
	color:#fff;
	margin-bottom: 20px;
}

.slogan h2 {
	font-size: 250%;
	color:#fff;
}
.button {
	display: inline-block;
	width: 14em;
	padding:1em;
	background:#fff;
	margin: 60px 5px 0px 5px;
	border: 1px solid #fff;
	text-transform: uppercase;
}
.button:hover, .button:focus {
	background:#355d8f;
	color:#fff;
}
@keyframes marquee {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-66%)}
}
.gallery {
	position: relative;
	margin-top: -60px;
}
.gallery ul {
	display: flex;
	width:calc(630px * 9);
	margin-left:-100px;
	animation-name: marquee;
	animation-duration: 220s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.gallery li {
	display: flex;
	align-items:center;
	width: 600px;
	margin-right: 30px;
}

/*2.3. Footer
-----------------------------------------------------------------------------------------------*/
#pagefooter {
	position: absolute;
	bottom:0px;
	overflow: hidden;
	width: 100%;
	background: #355d8f;
	color:#fff;
	padding: 14px 0px;
	}
#pagefooter a {
	color: #ffffff;
	padding-right: 5px;
	}	
#pagefooter li {
	float: left;
	margin-left: 5px;
	}
#pagefooter li:first-child {
	margin-left: 0;
	}
	
#pagefooter li.right {
	float: right;
	}	

/* 3. Media Queries
-----------------------------------------------------------------------------------------------
===============================================================================================*/

@media only screen and (max-width: 800px) {
	.slogan .inside {
	padding: 40px 0px 180px 0px;
	}
	.slogan h2 {
		font-size: 170%;
	}
	.button.second {
		margin-top: 10px;
}
	.gallery ul {
	width:calc(430px * 9);
}
.gallery li {
	width: 400px;
}
	}