@charset "UTF-8";

/* get yer fonts right here */

@font-face {
	font-family: Lato;
	src: url('fonts/lato-regular-webfont.eot');
	src: url('fonts/lato-regular-webfont.ttf') format("truetype");
	src: url('fonts/lato-regular-webfont.woff') format("woff");
}
@font-face {
	font-family: "Lato Bold";
	src: url('fonts/lato-bold-webfont.eot');
	src: url('fonts/lato-bold-webfont.ttf') format("truetype");
	src: url('fonts/lato-bold-webfont.woff') format("woff");
}
@font-face {
	font-family: "Lato Italic";
	src: url('fonts/lato-italic-webfont.eot');
	src: url('fonts/lato-italic-webfont.ttf') format("truetype");
	src: url('fonts/lato-italic-webfont.woff') format("woff");
}
@font-face {
	font-family: "Blank";
	src: url('fonts/AdobeBlank.ttf') format("truetype");
}

/* zero */

* {
}

/*** type ***/

h2, h3, h4 {
	letter-spacing: 0.03em;
}

h1 {
	font-family: Blank;
	background: url('images/joy-logo-lg.png') top center no-repeat;
	background-size: contain;
	height: 200px;
}

h2 {
/*	text-align: center;*/
}

p, ul {
	line-height: 1.5em;
}

ul {
	padding-left: 0;
	margin-left: 0;
}

footer p {
	color: #DEE7F5;
	text-align: center;
}

a:link, a:visited {
	color: #0767B0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*** block-level tags ***/

body {
	font-family: Lato, Tahoma;
	color: #444444;
	background-image: linear-gradient(#002233, #f0f5fb);
	margin: 0;
}

header {
	padding: 1em;
	background-image: linear-gradient(to right, #f0f5fb, white, #f0f5fb);
	border-bottom: 5px solid #43688e; /* violet bg */
	text-align: center;
}
	
section:first-of-type p {
	font-size: 1.35em;
}

section + section {
	margin-top: 2em;
}

figure {
	width: 100%;
	padding: 0;
	margin: 2em 0;
}

figure img {
	width: 100%;
}

figcaption {
	font-style: italic;
	font-size: 0.8em;
	padding: 1em 0 0 2em;
	font-family: "Lato Italic", Tahoma;
}

nav > a {
	font-family: Lato, Tahoma;
	background: #f0f5fb;
	padding: .75em 3em;
	border-top: 1px solid;
	display: block;
}

footer {
	padding: .5em;
	background: #43688e;
	font-size: .8em;
	clear: both;
}

/* id selectors */

#container {
	margin: 0 auto;
/*	background: #ffffff url('images/left.jpg') 150px 165px no-repeat;*/
	background: white;
	position: relative;
	border-top: none;
	overflow: hidden;
}

#main-content {
	padding: 3em;
}

/*****       *****/
/***** 768px *****/
/*****       *****/

@media screen and (min-width: 1080px) {
	#main-content {
		margin: 0 auto;
		max-width: 75%;
	}

	section + section {
		margin-top: 3em;
	}
}

/*****       *****/
/***** 960px *****/
/*****       *****/

@media screen and (min-width: 1200px) {
	h1 {
		height: 300px;
	}
	
	body {
		margin: 0 0 1em;
	}
	
	header {
		width: 960px;
	}
	
	section:first-of-type p {
		font-size: 1.5em;
	}

	section + section {
		margin-top: 5em;
	}
	
	figure {
		margin: 3em 0;
	}
	
	nav {
		display: none;
	}

	footer {
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
	}

	#container {
		width: 960px;
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
	}
	
	#main-content {
		margin: 0 auto;
		width: 550px;
	}
	/*
	section.flex {
		display: flex;
		flex-order: reverse;
	}
	*/
}