﻿@font-face {
  font-family: 'HelveticaNeueLT-Thin';
  src: url('../assets/fonts/29FC75_7_0.eot');
  src: url('../assets/fonts/29FC75_7_0.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/29FC75_7_0.woff') format('woff'), url('../assets/fonts/29FC75_7_0.ttf') format('truetype');
  
  /* 35 */
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;    
}

body {
	font-family: 'HelveticaNeueLT-Thin';
	line-height: 1.8;
}

h1 {
	margin: 0;
	font-size: 9em;
	line-height: 0.9;
}

h2 {
	margin: 0.3em 0;
	line-height: 1.15;
}

section {
	margin: 2em 5%;
}

	section a {
		text-decoration: none;
		font-weight: bold;
		color: #2875a8;
	}

	section form {
		clear: both;
		overflow: hidden;
	}

		section form input {
			font-size: 0.8em;
			padding: 5px;
			width: 80%;
			float: left;
			border: solid 1px #ccc;
			border-right: none;
		}

		section form button {
			height: 27px;
			width: 22px;
			background-color: orange;
			float: left;
			border: solid 1px #ccc;
			border-left: none;
			position: relative;
		}

			section form button:after {
				content: " ";
				width: 0;
				height: 0;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 9px solid white;
				position: absolute;
				top: 5px;
				left: 7px;
			}

nav {
	display: block;
	margin: 0 auto;
	max-width: 40%;
	height: auto;
}

	nav ul {
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

		nav li {
			display: block;
			padding: 0;
			line-height: 0;
		}

			nav img {
				width: 100%;
			}

footer {
	padding: 0 5% 2em;
	width: 100%;
	background-color: #2875a8;
}

	footer img {
		position: relative;
		margin: 3em auto 0;
		max-width: 560px;
		width: 100%;
	}

@media only screen and (min-width: 48em) {
	html, body {
		position: relative;
		width: 100%;
		height: 100%;
	}
	section, footer{
		margin: 0;
		padding: 0 5%;
	}
	section{
		height: 90%;
		width: 60%;
	}
	h1{
		text-align: left;
		font-size: 15em;
	}
	h2{
		text-align: left;
		font-size: 4em;
	}
	section form input {
		width: auto;
		margin-left: 0;
	}
	nav{
		bottom: 0;
		right: 5%;
		position: absolute;
	}
	footer{
		height: 10%;
	}
		footer img{
		max-width: 80%;
		position: relative;
		top: 60%;
		left: 4%;
			margin: 0;
			width: 50%;
		}
}
@media screen and (min-width : 800px) {
	section, footer{
		padding: 0 5%;
	}
	section{
		height: 70%;
		width: 70%;
	}
	nav{
		max-width: 30%;
	}
	footer{
		height: 30%;
	}
}