/* SECTIONS:

1. Default styling - establishes the basic styles for elements on the site
2. Section specific presentational styling - for specific parts of the site
3. Layout rules - these create the responsive layout

Available fonts:
'freight-sans-pro' - regular (400)
'freight-sans-compressed-pro' - book (400), medium (500)
'Unica One' - regular
*/


/* ===== 1. DEFAULT RESET STYLING ===== */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%; 
	font: inherit; 
	vertical-align: baseline; 
}

body {
	background: #FFF;
	line-height: 1;
}

em {
	font-style: italic;
}

strong {
	font-weight: 400;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
	display: block;
} 

/* make sure the page doesn't shift horizontally */
html {
	overflow-y: scroll;
}

/* The default font and size from which other font sizes are calculated is set here. */
body {
    color: #000;
    font-family: Georgia, serif;
    font-weight: 300;
    font-size: 87.5%;
    line-height: 1.5;
    padding: 0;
}

a {
    color: #000;
    text-decoration: none; /* removes underline globally, see next section for body text setting */
}

a:active,
a:hover {
    opacity: .6; /* dims on hover */
}

p {
    margin-bottom: 1.2em;
}

h1 {    
    font-family: "Unica One", Arial, sans-serif;
    font-size: 5em;
    font-weight: normal;
}

h2, h3, h4 {
	font-family: "freight-sans-pro", Arial, sans-serif;
	font-weight: 400;
}

h2 {
	font-size: 1.8em;
}

h3, h4 {
	font-size: 1.25em;
}

h1, h2, h3, h4 {
    margin: 1em 0 .5em 0;
}

::selection,
::-moz-selection {
    background: #EEE;
}

img {
    height: auto;
	text-align: center;
}






/* ===== 2. SECTION SPECIFIC STYLING ===== 
 These are presentational rules (colors, typography, and general appearance) that do not change based on the screen size. Structual rules in the next area. */


/* === BANNER === */

header[role="banner"] {
	background:  #FFF;
	color: #333;
	margin: 0 auto 60px auto;
	text-align: center;
}

.site-title { /* line height in media queries */
	margin-bottom: 0;
	font-family: "Unica One";
	font-weight: 400;
	letter-spacing: -4px;
}

.site-tag-line {
	font-family: "freight-sans-pro";
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
}



/* === MAIN CONTENT AREA === */

/* GLOBAL CONTENT */

section > div {
	text-align: center;
}


/* IMAGES & CAPTIONS */


/* SIDEBARS, ASIDES & SECONDARY CONTENT */


/* === SITEWIDE FOOTER === */

.sitewide-footer { /* settings for link-stacks in media queries */
    position: relative;
    padding: 1.5em 0 1.5em 0; /* margin set in media queries */
    clear: both;
    background: #FFF;
    color: #333;
    font-family: "freight-sans-compressed-pro", "Arial Narrow", sans-serif;
    text-align: center;
}






/* ===== 3. LAYOUT RULES ===== */

/* Structural and layout rules which change based on screen width. Most presentational rules in previous area - a couple presentational changes like font size here. */

/* ===== 320px PHONE ===== */
@media only screen and (min-width: 320px) {

	header[role='banner'] {
		padding: 8px 0 0 0;
	}
	
	.with-margin {
		width: 94%; /* gives a little side margin plus clearing to content-filled items */
		margin: 0 auto;
		clear: both;
	}
	
	section > div {
		width: 94%; /* gives a little side margin to text content on pages */
		margin: 0 auto 60px auto;
	}
	
	main.with-margin {
		margin-bottom: 60px;
	}
		
	.flex-between {
		display: flex;
		flex-direction: column; /* items appear in one column */
		justify-content: space-between;
	}
	              
    .sitewide-footer {
        margin-top: 15px;
    }
    
    img.full-width {
    	width: 300px;
    }
    
    img.reduced-width {
    	width: 180px;
    }
                   
} /* end 320 media query */





/* ===== 410px LARGE PHONE ===== */
@media only screen and (min-width: 410px) {
	
	.site-title {
		line-height: 1.5; /* gives normal breathing room */
	}
		
} /* end 410 media query */





/* ===== 475px LARGE PHONE, LANDSCAPE PHONE ===== */
@media only screen and (min-width: 475px) {

	
} /* end 475 media query */





/* ===== 600px LARGE PHONE, SMALL TABLET ===== */
@media only screen and (min-width: 600px) {
    
    .flex-between {
    	flex-direction: row; /* rows instead of single column */
    	flex-wrap: wrap;
    }
    
    section > div {
    	width: 45%;
    	margin:  0 auto;
    }
                
    .sitewide-footer {
        margin-top: 60px;
    }
    
    img.full-width {
    	width: 280px;
    }
    
    img.reduced-width {
    	width: 150px;
    }
     
} /* end 600 media query */





/* ===== 720px MID-LARGE SCREENS ===== */
@media only screen and (min-width: 720px) {

	img.full-width {
		width: 300px;
	}
	     
} /* end 960px media query */





/* ===== 1277+px SUPERSIZE SCREENS ===== */
@media only screen and (min-width: 1277px) {
    
    .with-margin {
        max-width: 1000px; /* Limit content width */
    }
            
} /* end 1277 media query */