@import url('./reset.css');

@font-face {
	
	font-family: 'Raleway-ExtraLight';
	src: url('../fonts/Raleway-ExtraLight.ttf') format('trueType');
	font-weight: normal;
	font-style: normal;
	
}

header {
	background: url('../images/header-bg.jpg') no-repeat scroll center center / cover rgba(255, 255, 255, 1);
	color: rgba(255, 255, 255, 1);
	text-align: center;
	padding: 135px 20px 90px;
}
	header > h2 {
		margin-bottom: 25px;
		font-family: Raleway, sans-serif;
		font-size: 3.75em;
	}
	header > h3 {
		margin-bottom: 50px;
		font-style: italic;
		font-size: 1.125em;
	}
	header > p {
		font-size: 0.75em;
	}
	.subscribe {
		background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.65);
		display: table;
		padding: 15px 20px;
		margin: 0 auto 15px;
		border-radius: 5px;
		-o-border-border: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
		.subscribe input { float: left; }
		.subscribe input[type='text'], .subscribe input[type='email'] {
			padding: 13.8px 20px;
			width: 320px;
			margin-right: 10px;
			border: 0 none;
			box-sizing: border-box;
			font: 1em 'Open Sans', sans-serif;
		}
		.subscribe input[type='submit'] {
			background: none repeat scroll 0% 0% #ae2c52;
			color: rgba(255, 255, 255, 1);
			font: 700 1.25em 'Open Sans', sans-serif;
			border: 0 none;
			padding: 10px 35px;
			cursor: pointer;
		}
	article {
		max-width: 900px;
		margin: 0 auto;
		padding: 50px;
		overflow: hidden;
	}
		article h1 {
			font-size: 3em;
			text-align: center;
			margin-bottom: 25px;
			font-weight: bold;
		}
		.left {
			margin: 0 30px 20px 0;
			float: left; 
		}
		article p { margin-bottom: 30px; }
	
@media only screen and (max-width: 950px) {
	
	.subscribe input[type='text'], .subscribe input[type='email'] { width: 260px; }
	
}

@media only screen and (max-width: 820px) {
	
	.subscribe input[type='text'], .subscribe input[type='email'] {
		width: 320px;
		display: block;
		float: none;
		margin: 0 0 10px;
	}
	header { padding: 30px 20px; }
		header > h2 {
			margin-bottom: 20px;
			font-size: 2.75em;
		}
		header > h3 { margin-bottom: 25px; }
	
}

@media only screen and (max-width: 400px) {
	
	.subscribe input[type='text'], .subscribe input[type='email'] { width: 240px; }
	article { padding: 20px; }
		article h1 {
			font-size: 2em;
			margin-bottom: 20px;
		}
		.left {
			margin: 0 25px 17px 0;
			float: left; 
		}
		article p { margin-bottom: 20px; }
	
}