@import url(http://fonts.googleapis.com/css?family=Exo:300);
@import url(http://fonts.googleapis.com/css?family=Muli:300,400);

@media all {

	html {
		background: #1e1e1e url('../images/background.png') center center;
		height: 100%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	body{
		background: url('../images/background-top.png') top center repeat-x;
		color:#bfbfbf;
		font-family: 'Muli', 'Lucida Sans Unicode', 'Lucida Grande', Verdana, sans-serif;
		font-size: 62.5%;
		text-align:center;
		min-height: 550px;
	}

	a{
		color: #bfbfbf;
		text-decoration: none;
	}

	a:hover{
		color: #fff;
		text-decoration: underline;
	}

	.setwidth {
		margin: 0 auto;
		position: relative;
		max-width: 1000px;
	}

	body > header{
		background: url('../images/layout/top-bg.png') top center no-repeat;
		position: relative;
		background-size: contain;
	}

		.logos{
			padding-top: 17%;
			position: relative;
		}

		.logo-pl{
			max-width: 41.7%;
			position: absolute;
			left: 4%;
			bottom: 4%;
		}

		.logo-fides{
			max-width: 16.6%;
			position: absolute;
			right: 8.9%;
			bottom: 5%;
		}


	#mainmenu{
		background: url('../images/layout/menu-bg.png') center bottom repeat-x;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top: 1px solid #9fa0a2;
		color: #b2b2b4;
	}

		#mainmenu > button{
			display: none;
		}

		#mainmenu a{
			text-decoration: none;
		}

		#mainmenu > ul{

		}

		#mainmenu > ul:after{
			clear: both;
			content: "";
			display: table;
		}

			#mainmenu > ul > li{
				
				background: url('../images/layout/menu-bg.png') top center repeat-x;
				color: #b2b2b4;
				float: left;
				padding: 0 12px 0 8px;
				position: relative;
				transition: background 3s;
			}



			#mainmenu > ul > li:first-child{
				border-bottom-left-radius: 3px;
			}

			#mainmenu > ul > li:after{
				background: url('../images/layout/menu-border.png') bottom center no-repeat;
				bottom: 0;
				content: '';
				height: 100%;
				position: absolute;
				right: -1px;
				width: 2px;
			}

				#mainmenu > ul > li > a{
					color: inherit;
					display: block;
					font-family: 'Exo', sans-serif;
					font-size: 1.6em;
					line-height: 39px;
					padding: 0 10px;
					text-transform: uppercase;
				}

				#mainmenu > ul > li > a:before{
					content: '::';
				}

				#mainmenu > ul > li:hover, #mainmenu > ul > li.active{
					background: url('../images/layout/menu-bg-active.png') top center repeat-x;
					color: #fff;
					transition: background .2s;
				}

				#mainmenu > ul > li.active{
					border-bottom: 1px solid #4c4e52;
					padding-bottom: 0;
					height: 100%;
				}

				#mainmenu > ul > li > a:hover{
					color: #fff;
				}

		#mainmenu > ul ul{
			overflow: hidden;
			display: none;
			left: 0;
			position: absolute;
			top: 100%;
			text-align: center;
			z-index: 1000;
		}

			#mainmenu > ul > li:hover > ul{
				display: block;
			}

			#mainmenu > ul > li > ul > li{
				background-color: rgba(30,30,29,.9);
				border-bottom: 1px solid #3a3a3a;
			}

			#mainmenu > ul > li > ul > li > a{
				color: #bfbfbf;
				display: block;
				font-family: 'Muli', sans-serif;
				font-size: 1.4em;
				line-height: 2em;
				padding: 0 30px;
				text-align: left;
				white-space: nowrap;
			}

			#mainmenu > ul > li > ul > li:hover{
				background: #141414;
			}

				#mainmenu > ul > li > ul > li:hover > a{
					color: #fff;
				}

	#stage{
		position: relative;
		max-height: 600px;
	}

	#stage > .wrapper{
		width: 100%;
		padding-bottom: 60%;
		height: 0;
	}

	#stage > .wrapper > svg{
		width: 100%;
		position: absolute;
		height: 100%;
		left: 0;
		padding: 2em;
	}

		#stage > ul > li{
			box-shadow: 1px 1px 5px #000;
			display: block;
			left: 30%;
			max-width: 100%;
			opacity: 0;
			position: absolute;
			top: 10%;
			visibility: hidden;
			width: 320px;
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			backface-visibility: hidden;
			transition: opacity 2s, visibility 0s 2s;
			
		}

			#stage > ul > li.show{
				opacity: 1;
				visibility: visible;
				transition: opacity 1s, visibility 0s;
			}

			#stage > ul > li > a > img{
				display: block;
			}

			#stage > ul > li > a {
				display: block;
			}

			#stage > ul > li > a > .description{
				background: #000;
				background: linear-gradient(transparent 0%, rgba(0, 0, 0, 1) 90%);
				bottom: 0;
				color: #fff;
				font-family: 'Exo', sans-serif;
				font-size: 1.8em;
				left: 0;
				padding: 1em .9em .3em;
				position: absolute;
				right: 0;
				text-align: left;
			}

				#stage > ul > li > a > .description > h2{
					font-size: .8em;
					font-family: 'Muli', sans-serif;
				}

		.apps{
			position: absolute;
			z-index: 200;
			bottom: 20px;
			right: 10px;
			overflow: hidden;
			
		}

			.apps > a{
				display: inline-block;
				margin: 10px;
				vertical-align: bottom;
			}

				.apps > a > img{
					display: block;
				}

	#pl-world{
		opacity: 0;
		-webkit-transform: rotateX(0);
		-moz-transform: rotateX(0);
		transform: rotateX(0);
		-webkit-perspective-origin: 50% 50%;
		-moz-perspective-origin: 50% 50%;
		perspective-origin: 50% 50%;
		-webkit-transition: -webkit-transform 2s, opacity .3s;
		-moz-transition: -moz-transform 2s, opacity .3s;
		transition: transform 2s, opacity .3s;
	}

	#pl-world circle{
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-transform-origin: center center;
		-moz-transform-origin: center center;
		transform-origin: center center;
		-webkit-transition-property: -webkit-transform, fill;
		-moz-transition-property: transform, fill;
		transition-property: transform, fill;
		fill: #808080;
	}

	#pl-world circle:hover{
		transition-duration: .1s, 0s !important;
		-webkit-transform: scale(1.618) !important;
		-moz-transform: scale(1.618) !important;
		transform: scale(1.618) !important;

		fill: #fff !important;
	}

	#pl-world circle:nth-child(even){
		fill: #9e9e9e;
	}
	
	#pl-world circle:nth-child(3n+1){
		fill: #bfbfbf;
	}

	.content{
		background: #000;
		border-width: 1px 0;
		border-color: #3a3a3a;
		border-style: solid;
		margin: 2em 0;
		text-align: center;
	}

		.content > div{
			padding: 2em;
			text-align: left;
		}

		.content h1{
			font-family: 'Exo', sans-serif;
			font-size: 2.3em;
			text-transform: uppercase;
			max-width: 554px;
			margin: 0 auto;
			-webkit-font-smoothing: antialiased;
		}

			.content h1:before{
				content: ':: ';
			}

		.content h3{
			font-family: 'Muli', sans-serif;
			font-size: 1.4em;
			font-weight: 400;
			max-width: 554px;
			margin: 1.5em auto .5em;
		}

		.content p, .content ul{
			font-size: 1.4em;
			line-height: 1.7em;
			max-width: 554px;
			margin: .5em auto;
			text-align: justify;
		}

		.content img{
			margin: 0 auto;
		}

		.content table{
			font-size: 1.4em;
			line-height: 1.7em;
			margin: .5em auto;
			width: 554px;
		}

	.content + .actions{
		margin-top: -2em;
		position: relative;
		top: -1px;
	}


		

	#itemlist > div{
		position: relative;
	}

		#itemlist > div > a{
			border-top: 1px solid #000;
			display: block;
			overflow: hidden;
			max-height: 300px;
			position: relative;
			text-align: left;
		}

		#itemlist > div > a.image{
			max-height: 210px;
		}

			#itemlist > div > a.image:after{
				background: transparent;
				background: linear-gradient(transparent 0%, rgba(0, 0, 0, .6) 100%);
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 50%;
				z-index: 100;
			}

			#itemlist > div > a > img{
				display: block;
				width: 100%;
			}

		#itemlist > div > .badge{
			background: #ff0b00;
			box-shadow: 1px 1px 3px rgba(84,28,26,.5);
			color: #fff;
			font-family: 'Muli', sans-serif;
			font-size: 2em;
			height: 2em;
			right: .4em;
			line-height: 2em;
			margin-top: -2px;
			position: absolute;
			top: 1em;
			width: 2em;
		}


		#itemlist > div > .description{
			background: #b3b2af;
			color: #4b4b4c;
			overflow: hidden;
			position: relative;
			padding: 1em 1em 1em;
			text-align: left;
			height: 20em;
			transition: background 1s;
		}

			#itemlist > div > .description > p{
				font-family: 'Muli', sans-serif;
				font-size: 1.2em;
				line-height: 1.8em;
				margin: .5em 0;
			}

			#itemlist > div > .description > .facts{
				color: #4b4b4c;
				font-size: 1.2em;
				line-height: 1.8em;
				margin: .5em 0;
			}

				#itemlist > div > .description > .facts > dt{
					clear: left;
					float: left;
				}

					#itemlist > div > .description > .facts > dt:after{
						content: ' ::';
					}

				#itemlist > div > .description > .facts > dd{
					overflow: hidden;
					padding-left: .5em;
				}


			#itemlist > div > .description > a.headline{
				color: #4b4b4c;
				display: block;
				text-decoration: none;
			}


			#itemlist > div > .description > .headline > h2{
				font-family: 'Exo', sans-serif;
				font-size: 1.8em;
				max-height: 2.8em;
				overflow: hidden;
				text-transform: uppercase;
			}

			#itemlist > div > .description > .headline > h3{
				font-family: 'Muli', sans-serif;
				font-size: 1.4em;
				max-height: 2.8em;
				margin: 1em 0 0;
				overflow: hidden;
			}

		#itemlist .description .lh-logo{
			position: absolute;
			bottom: 1em;
			left: 1em;
		}

		#itemlist > .message{
			background-color: #999896;
			border: 1px solid #8c8c89;
			clear: both;
			color: #4b4b4c;
			float: none;
			margin: 0 auto 2em;
			padding: 1em;
		}

			#itemlist > .message > p{
				font-family: 'Muli', sans-serif;
				font-size: 1.2em;
				line-height: 1.8em;
				margin: .5em 0;
				text-align: left;
			}

		#itemlist > .pagination{
			clear: both;
			width: 100%;
		}

			#itemlist > .pagination > li{
				display: inline-block;
				margin: .5em;
				vertical-align: middle;
			}

				#itemlist > .pagination > li > .current{
					background: #bfbfbf;
					border-bottom: 1px solid #000;
					color: #000;
					border-radius: 3px;
					display: block;
					font-family: 'Exo', sans-serif;
					font-size: 1.2em;
					height: 2em;
					line-height: 2em;
					width: 2em;
				}

				#itemlist > .pagination > li > a{
					background: #000;
					border-bottom: 1px solid #3a3a3a;
					border-radius: 3px;
					display: block;
					font-family: 'Exo', sans-serif;
					font-size: 1.2em;
					height: 2em;
					line-height: 2em;
					width: 2em;
				}

				#itemlist > .pagination > li > a:hover{
					text-decoration: none;
				}

					#itemlist > .pagination > li.button > a{
						background: #000;
						border-bottom: 1px solid #3a3a3a;
						border-radius: 50%;
						display: block;
						font-size: 1em;
						height: 2.4em;
						position: relative;
						width: 2.4em;
					}

					#itemlist > .pagination > li.button > a > .icon{
						width: 1.6em;
						fill: #bfbfbf;
						height: 100%;
					}

						#itemlist > .pagination > li.button > a:hover > .icon{
							fill: #fff;
						}

				#itemlist > .pagination > li.next > a{
					height: 4em;
					width: 4em;
				}

					#itemlist > .pagination > li.next > a > .icon{
						width: 3.2em;
					}

	#filter{
		border-bottom: 1px solid #3a3a3a;
		height: 3em;
		position: relative;
		margin: 3em 0;
	}

		#filter > ul{
		}

			#filter > ul > li{
				float: left;
				position: relative;
				margin: 0 1em;
			}

				#filter > ul > li > span{
					font-family: 'Exo', sans-serif;
					font-size: 1.4em;
					text-transform: uppercase;
					line-height: 2.2em;
				}

					#filter > ul > li > span:before{
						content: ':: ';
					}

				#filter > ul > li:hover > span{
					color: #fff;
				}

				#filter > ul > li:hover > ul{
					display: block;
				}

				#filter > ul > li > ul{
					display: none;
					position: absolute;
					margin-left: -12.5em;
					left: 50%;
					width: 25em;
					z-index: 1000;

				}

					#filter > ul > li:first-child > ul{
						left: 0;
						margin: 0;
					}

					#filter > ul > li > ul > li{
						background-color: rgba(30,30,29,.9);
						border-bottom: 1px solid #3a3a3a;
					}

						#filter > ul > li > ul > li > a{
							color: #bfbfbf;
							display: block;
							font-family: 'Muli', sans-serif;
							font-size: 1.4em;
							line-height: 2em;
							padding: 0 30px;
							text-decoration: none;
						}

						#filter > ul > li > ul > li:hover{
							background: #141414;
						}

							#filter > ul > li > ul > li:hover > a{
								color: #fff;
							}

		#filter > form{
			background: #272727;
			bottom: 0;
			line-height: 2.4em;
			overflow: hidden;
			position: absolute;
			right: 0;
		}

			#filter > form > input{
				background: none;
				border: 0;
				color: #bfbfbf;
				font-size: 1.1em;
				text-indent: .3em;
				padding: .5em
			}

			#filter > form > input:focus{
				outline: none;
				background: #333;
			}

			#filter > form > button{
				background: none;
				display: inline-block;
				height: 2em;
				vertical-align: middle;
				margin: .5em;
				width: 2em;
			}

				#filter > form > button > svg{
					fill: #bfbfbf;
					height: 100%;
					width: 100%;
				}




	#content{
		margin: 2em 0;		
	}

		#content > .description{
			background: #b3b2af;
			border-top: 1px solid #000;
			color: #4b4b4c;
			margin: 0 auto 2em;
			max-width: 700px;
			position: relative;
		}

		#content > .description > header{
			position: relative;
		}

			#content > .description > header > img{
				position: relative;
				display: block;
				width: 100%;
			}

			#content > .description > header > .headline{
				background: linear-gradient(transparent 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .8) 100%);
				bottom: 0;
				left: 0;
				right: 0;
				padding: 3em 3em 2em;
				position: absolute;
				text-align: left;
				z-index: 100;
			}

			#content > .description > header > .headline > h1 {
				font-size: 2.3em;
				font-family: 'Exo', sans-serif;
				font-weight: normal;
				text-transform: uppercase;
				color: #fff;
			}

			#content > .description > header > .headline > h2 {
				color: #fff;
				font-family: 'Exo', sans-serif;
				font-size: 2em;
			}


			#content > .description > header > .badge{
				position: absolute;
				top: -2px;
				right: 2em;
				background: #fff;
				box-shadow: 1px 1px 3px #000;
			}

				#content > .description > header > .badge.dark{
					background: #4b4b4c;
				}

				#content > .description > header > .badge > img{
					margin: 1em;
				}
		
		#description {
			font-size: 1.5em;
			line-height: 1.7em;
			padding-bottom: 1em;
		}

		#description h1, #description h2. #description h3{
			font-size: 2em;
			text-align: left;
		}

		#description p,
		#description ul{
			margin: 2em;
			text-align: left;
		}

			#description p:before{
				content: '';
				display: block;
				min-width: 33%;
				overflow: hidden;
			}

		#description ul {
			list-style: disc;
			padding-left: 1.5em;
		}

		#description img{
			height: auto;
		}

		#video{
			clear: both;
			height: 0;
			margin-bottom: 3em;
			position: relative;
			width: 100%;
			left: -2px;
			padding: 0 2px 56.25%;
			box-shadow: 0 4px 2px -2px #999896;
			box-sizing: content-box;
		}

			#video > iframe {
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
			}

		#content > .description > .badge{
			background: #999896;
			border-right: 0;
			border: 1px solid #8c8c89;
			box-shadow: -2px 2px 2px #999896;
			clear: right;
			float: right;
			margin: 2em 0 1em 1em;
			position: relative;
			right: -2px;
		}

			#content > .description > .badge > img{
				margin: 1em;
			}

		#content > .description > .facts{
			color: #4b4b4c;
			font-size: 1.4em;
			line-height: 1.5em;
			overflow: hidden;
			padding: 1em;
			text-align: left;
		}

			#content > .description > .facts > dt{
				clear: left;
				float: left;
			}

				#content > .description > .facts > dt:after{
					content: ' ::';
				}

			#content > .description > .facts > dd{
				float: left;
				padding-left: .5em;
				overflow: hidden;
			}

		#content > .description > .actions{
			background: #999896;
			border-top: 1px solid #8c8c89;
			margin: 0;
		}

			#content > .description > .actions > div{
				height: 4em;
			}

			#content > .description > .actions > div + div{
				border-left: 1px solid #8c8c89;
			}

			#content > .description > .actions > div > a,
			#content > .description > .actions > div > button{
				background: none;
				color: #4b4b4c;
				display: block;
				font-family: 'Exo', sans-serif;
				font-size: 1.6em;
				margin: -.625em;
				padding: .625em;
				text-transform: uppercase;
				width: 100%;
				box-sizing: content-box;
			}

		#content > .description > .actions a.button:before,
		#content > .description > .actions > div > button:before{
			content: ':: ';
		}

			#content > .description > .actions > div > a:hover,
			#content > .description > .actions > div > button:hover{
				background: #141414;
				color: #fff;
				text-decoration: none;
			}

		#content > .description > .lufthansa{
			background: #000066;
			color: #fff;
			font-family: Arial, Helvetica, Verdana, sans-serif;
			margin: 0;
		}

			#content > .description > .lufthansa .logo{
				float: right;
				margin: 2em;
			}

			#content > .description > .lufthansa p{
				font-size: 1.5em;
				line-height: 1.7em;
				text-align: left;
				margin: 1em;
			}

		#content > .description > .special{
			background: #8a0121;
			color: #fff;
			overflow: hidden;
		}

			#content > .description > .special > p{
				font-size: 1.5em;
				line-height: 1.7em;
				margin: 1em;
				text-align: left;
			}

		#content .small{
			font-size: 1em;
			max-width: 700px;
			line-height: 1.7em;
			text-align: left;
			margin: 2em auto;
		}

	#featured {
		border-top: 1px solid #3a3a3a;
		margin: 3em 0;
	}

		#featured > h1{
			font-family: 'Exo', sans-serif;
			font-size: 2.3em;
			margin: 1em 0 .5em;
			text-align: left;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
		}

			#featured > h1:before{
				content: ':: ';
			}

	.city2city{
		margin-top: 2em;
		position: relative;
	}

	.city2city > img{

	}

		.city2city > .headline{
			background: linear-gradient(transparent 0%, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, .8) 100%);
			bottom: 0;
			left: 0;
			padding: 3em 3em 2em;
			position: absolute;
			right: 0;
			text-align: left;
			z-index: 100;
		}

			.city2city > .headline > h1{
				font-size: 2.3em;
				font-family: 'Exo', sans-serif;
				font-weight: normal;
				text-transform: uppercase;
				color: #fff;
			}

	.actions{
		background: #999896;
		border-top: 1px solid #8c8c89;
		margin: 0;
	}

		.actions > div{
			height: 4em;
		}

			.actions > div + div{
				border-left: 1px solid #8c8c89;
			}

			.actions > div > a,
			.actions > div > button
			{
				background: none;
				color: #4b4b4c;
				display: block;
				font-family: 'Exo', sans-serif;
				font-size: 1.6em;
				margin: -.625em;
				padding: .625em;
				text-transform: uppercase;
				width: 100%;
				box-sizing: content-box;
			}

		.actions > div > a.button:before,
		.actions > div > button:before
		{
			content: ':: ';
		}

			.actions > div > a:hover,
			.actions > div > button:hover
			{
				background: #141414;
				color: #fff;
				text-decoration: none;
			}

	#blogteaser{
		border-top: 1px solid #3a3a3a;
		margin: 3em 0;
	}

		#blogteaser > h1{
			font-family: 'Exo', sans-serif;
			font-size: 2.3em;
			margin: 1em 0 0;
			padding-bottom: .5em;
			text-align: left;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
		}

			#blogteaser > h1:before{
				content: ':: ';
			}


		#blogteaser .content{
			border-bottom: 0;
			margin: 1em 0 0;
			overflow: hidden;
			padding: 2em;
			text-align: left;
		}

			#blogteaser .content h2{
				font-family: 'Exo', sans-serif;
				font-size: 1.8em;
				overflow: hidden;
				text-transform: uppercase;
			}

	#newsletter{
		border-top: 1px solid #3a3a3a;
		margin: 3em 0;
	}

		#newsletter > h1{
			font-family: 'Exo', sans-serif;
			font-size: 2.3em;
			margin: 1em 0 0;
			padding-bottom: .5em;
			text-align: left;
			text-transform: uppercase;
			-webkit-font-smoothing: antialiased;
		}

			#newsletter > h1:before{
				content: ':: ';
			}


		#newsletter .content{
			border-bottom: 0;
			margin: 1em 0 0;
			overflow: hidden;
			padding: 2em;
		}

			#newsletter .content h2{
				font-family: 'Exo', sans-serif;
				font-size: 1.8em;
				overflow: hidden;
				text-transform: uppercase;
			}

	#gallery{
		clear: left;
		float: left;
		margin: 2em 2em 1em -2px;
		padding: 1em;
	}

		#gallery > ul{		
			overflow: hidden;
			margin: 0 -1em;
			padding-bottom: 5px;
			padding-right: 5px;
			position: relative;
		}

		#gallery > ul > li{
			margin: 0 0;
			float: left;
			box-shadow: 2px 2px 2px #999896;
		}

			#gallery > ul > li > a{
				display: block;
				background-color: #fff;
				overflow: hidden;
			}

				#gallery > ul > li > a > img{
					display: block;
					width: 100%;
				}

			#gallery > ul > li > a:hover img{
				opacity: .7;
			}

		#gallery .controls{
			display: none;
		}

	.sodaFlash{
		background: rgba(30,30,30, .7);
		bottom: 0;
		left: 0;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 1000;
		transition: opacity .5s;
	}

		.sodaFlash.show{
			opacity: 1;
		}

		.sodaFlash > div{
			background-color: #fff;
			
			height: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			width: 1px;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transition: top .3s, height .3s, width .4s .3s, left .4s .3s;
		}

			.sodaFlash > div > ul{
				display: block;
				height: 100%;
				width: 100%;

			}

				.sodaFlash > div > ul > li{
					height: 100%;
					width: 100%;
					position: absolute;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					top: 0;
					opacity: 0;
					left: 0;
					-webkit-backface-visibility: hidden;
					backface-visibility: hidden;
					transition: opacity .2s;
				}

				.sodaFlash > div > ul > li.show{
					opacity: 1;
				}

					.sodaFlash > div > ul > li > iframe{
						border: 0;
						height: 100%;
						width: 100%;
					}

			.sodaFlash > div > .show{
				opacity: 1;
			}

			.sodaFlash > div:hover > .controls{
				opacity: 1;
			}

			.sodaFlash > div > .controls{
				opacity: 0;
				transition: opacity 1s;
			}

				.sodaFlash > div > .controls > button{
					background-color: rgba(30,30,30, .7);
					width: 4em;
					height: 4em;
					fill: #bfbfbf;
					position: absolute;
				}

				.sodaFlash > div > .controls > button > svg{
					width: 100%;
					height: 100%;
				}

				.sodaFlash > div > .controls > .close{
					top: 0;
					right: 0;
				}


				.sodaFlash > div > .controls > .next{
					right: -2px;
					top: 50%;
					margin-top: -2em;
				}

				.sodaFlash > div > .controls > .prev{
					left: -2px;
					top: 50%;
					margin-top: -2em;
				}
	
	.sodaLoader{
		background: rgba(30,30,30,.7);
		height: 100%;
		left: 0;
		opacity: 1;
		position: absolute;
		top: 0;
		visibility: visible;
		width: 100%;
		z-index: 999;
		transition: all 2s;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

		.sodaLoader:after{
			border: 1px solid;
			border-bottom-color: #fff;
			border-left-color: #fff;
			border-radius: 50%;
			border-right-color: #1e1e1e;
			border-top-color: #1e1e1e;
			content: '';
			height: 30px;
			right: 20px;
			position: absolute;
			bottom: 20px;
			width: 30px;
			z-index: 1000;
			-webkit-animation: rotate .9s infinite linear;
			animation: rotate .9s infinite linear;
		}
	
	.sodaLoader.done{
		visibility: hidden;
		opacity: 0;
		transition: all 1s;
	}

		.sodaLoader > div{
			background-color: #bea028;
			height: 2px;
			left: 0;
			position: absolute;
			top: 0;
			width: 0;
			display: none;
		}
	
	@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotateZ(1deg);
		transform: rotateZ(1deg);
 		}
 	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
		}

	}

	@keyframes rotate {
		from {transform: rotateZ(1deg);}
		to {transform: rotateZ(360deg);}
	}

	#contact{
		display: none;

	}

		#contact.show{
			display: block;
		}

		#contact > div > div{
			background: #b3b2af;
			color: #4b4b4c;
			padding: 1em 0 0;
		}

		#contact h2{
			font-size: 1.8em;
			text-align: left;
			font-family: 'Exo', sans-serif;
			margin: 2em 1.5em 0;
			text-transform: uppercase;
		}

		#contact h3{
			text-align: left;
		}

		#contact p{
			font-size: 1.5em;
			line-height: 1.7em;
			margin: 2em;
			text-align: left;
		}

		#contact > div > .team{
			background: none;
			float: left;
			margin: 3em;
		}

			#contact > div > .team > .round{
				border-radius: 50%;
				display: inline-block;
				overflow: hidden;
				border-bottom: 1px solid #fff;
				border-top: 1px solid #333;
				height: 120px;
			}

			#contact > div > .team > h3{
				font-size: 1.7em;
				text-align: center;
			}

	#newsletter-subscribe, #newsletter-unsubscribe{
		background: #b3b2af;
		color: #4b4b4c;
		margin-top: -2em;
		padding: 1em 0 0;
	}

	.sodaframe{
		background: #999896;
		margin: -2em 0 2em;
	}

		.sodaframe .controls{
			display: none;
		}


	.sodaform{
		
	}

		.sodaform .message{
			background: #d34640;
			color: #fff;
			display: none;
			margin-top: -1.5em;
			min-width: 2em;
			padding: .5em;
			position: absolute;
			right: 100%;
			top: 50%;
			width: auto;
		}

			.sodaform .message:after{
				border-color: transparent #d34640 transparent;
				border-style: solid;
				border-width: 10px 0 10px 10px;
				content: '';
				margin-top: -10px;
				position: absolute;
				right: -10px;
				top: 50%;
			}

		.sodaform .error .message{
			display: block;
		}

		.sodaform .error input{
			border-color: #d34640;
		}

		.sodaform > div{
			margin: 0 2em 2em;
			font-size: 1.5em;
		}

		.sodaform small{
			float: right;
			font-size: .8em;
		}

		.sodaform label{
			text-align: left;
			display: block;
			
		}

		.sodaform > div > label{
			padding: 1em 0;
		}

		.sodaform > div > fieldset{
			position: relative;
		}

			.sodaform label > input,
			.sodaform label > textarea{
				background: #999896;
				border: 1px solid #8c8c89;
				display: block;
				line-height: 1.7em;
				text-indent: .3em;
				width: 100%;
			}

			.sodaform label > input:focus,
			.sodaform label > textarea:focus{
				outline: none;
				background: #cccbc8;
			}

			.sodaform label > input[type='radio'],
			.sodaform label > input[type='checkbox']{
				display: inline;
				width: auto;
			}

			.sodaform label > textarea{
				resize: vertical;
			}

		.sodaform > button{
			background: #999896;
			border-top: 1px solid #8c8c89;
			color: #4b4b4c;
			display: block;
			font-family: 'Exo', sans-serif;
			font-size: 1.6em;
			margin-top: .625em;
			padding: .625em;
			text-transform: uppercase;
			width: 100%;
		}

			.sodaform > button:before{
				content: ':: ';
			}

			.sodaform > button:hover{
				background: #141414;
				color: #fff;
				text-decoration: none;
			}

		#modalMessage{
			display: none;
		}

	.modal{
		background: rgba(30,30,30,0.78);
		bottom: 0;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 15000;
		transition: opacity .2s;
	}

		.modal > div{
			background: #b3b2af;
			border-radius: 2px;
			box-shadow: 1px 1px 3px rgba(75,75,75,.5);
			color: #000;
			margin: 0 auto;
			max-width: 90%;
			padding-top: 1em;
			position: relative;
			top: 33%;
			width: 50em;
			-webkit-transform: translateY(10em);
			transform: translateY(10em);
			-webkit-transition: -webkit-transform .5s cubic-bezier(0.215, 0.61, 0.355, 1); 
			transition: transform .5s cubic-bezier(0.215, 0.61, 0.355, 1); 
		}

		.modal.show{
			opacity: 1;
		}

		.modal.show > div{
			-webkit-transform: translateY(0);
			transform: translateY(0);
		}

		.modal p{
			font-size: 1.4em;
			padding: 1em;
			white-space: pre-line;
		}

		.modal button{
			background: #999896;
			border-top: 1px solid #8c8c89;
			color: #4b4b4c;
			display: block;
			font-family: 'Exo', sans-serif;
			font-size: 1.6em;
			padding: .625em;
			text-transform: uppercase;
			width: 100%;
		}

			.modal button:before{
				content: ':: ';
			}

			.modal button:hover{
				background: #141414; 
				color: #fff;
			}

	footer{
		border-top: 1px solid #141414;
		font-family: 'Muli', sans-serif;
		padding-bottom: 4em;
	}

		footer > div > div > small{
			clear: both;
			color: #808080;
			display: block;
			font-size: 1.1em;
			font-family: 'Muli', sans-serif;
			margin: 1em;
			text-align: right;
			text-transform: uppercase;
		}

		footer .applinks{
			text-align: right;
		}

			footer .applinks > a{
				display: inline-block;
				margin: 1em;
			}

		footer nav a:hover{
			text-decoration: none;
		}

		footer nav > ul{
			text-align: left;
		}

			footer nav > ul > li{

			}

				footer nav > ul > li > a{
					font-family: 'Exo', sans-serif;
					font-size: 1.6em;
					color: #808080;
				}

				footer nav > ul > li > a:before{
					content: ':: ';
				}

			footer nav > ul > li:hover{

			}

				footer nav > ul > li:hover a{

				}

				footer nav > ul > li > ul{
					font-family: 'Muli', sans-serif;
				}

					footer nav > ul > li > ul > li{
						padding: .3em 0 .3em 1.6em;
					}

						footer nav > ul > li > ul > li > a{
							font-size: 1.2em;
							line-height: 1.5em;
							color: #808080;
						}

						footer nav > ul > li > ul > li:hover{

						}

						footer nav > ul > li > ul > li > a:hover{
							color: #fff;
							text-decoration: none;
						}
}

@media only screen and (max-width: 75em) {
		

}

@media only screen and (max-width: 50em) {
		

	.sodacolumns, .sodaitems{
		margin: 0 -.5em;
	}

	.sodacolumns > *, .sodaitems > *{
		border-width: .5em;
	}

	.sodacolumns > .sodacolumns.halfs > *{
		width: 100%;
	}

	.sodacolumns.thirds > *{
		width: 50%;
	}

	.sodacolumns.quarters > *{
		width: 50%;
	}

	.actions{
		margin: 0;
	}
}

@media only screen and (max-width: 25em) {
	.sodawidth{
		width: 100%;
	}

	.sodacolumns > *{
		width: 100% !important;
	}
}