/* --------------- LIZZSANTOS.COM FRONT END // STYLESHEET // PORTFOLIO PAGES (EXCL. HOME) ---------------*/

/* --------------- 1. RESET STYLES ---------------*/
/* --------------- 2. LAYOUT STYLES ---------------*/
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/
/* --------------- 4. FORM STYLES ---------------*/
/* --------------- 5. NAVIGATION STYLES ---------------*/



/* --------------- 1. RESET STYLES ---------------*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}



/*! normalize.css v1.0.1 | MIT License | git.io/normalize | HTML5 RESET */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html, button, input, select, textarea {font-family: sans-serif;}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {margin: 0;}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {outline: thin dotted;}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active, a:hover {outline: 0;}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {border-bottom: 1px dotted;}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b, strong {font-weight: bold;}

blockquote {margin: 1em 40px;}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {font-style: italic;}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
	background: #ff0;
    color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p, pre {margin: 1em 0;}

/*
 * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {quotes: none;}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before, q:after {
    content: '';
    content: none;
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {Font-size: 80%;}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {top: -0.5em;}

sub {bottom: -0.25em;}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl, menu, ol, ul {margin: 1em 0;}

dd {margin: 0 0 0 40px;}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu, ol, ul {padding: 0 0 0 0px;}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {overflow: hidden;}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {margin: 0;}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {margin: 0;}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button, input, select, textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button, input {line-height: normal;}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled], input[disabled] {cursor: default;}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}




/* --------------- 2. LAYOUT STYLES ---------------*/

/*-------- GENERIC --------*/

body {
	font-family: 'Helvetica LT W01 Light', Helvetica, Arial, sans-serif;
	font-size:62.5%;
	color:#000;
	text-align:left;
	}
	
	/* TARGETS FIREFOX ONLY
	@-moz-document url-prefix() {
		body {
			font-size:70%;
		}
	}
	*/
		
div.clr {clear:both;}
	
.go-left {float:left; position:relative; display:inline;}
.go-right {float:right; position:relative; display:inline;}

img {
	display:block;
	max-width:100%;
	}
	
.circle-clip {border-radius:50%;}

figure.hero {display:block; float:none;}
	figure.hero img, figure.hero .embed-container {margin-bottom:6px; width:100%;}

/* Responsive iframe code courtesy of embedresponsively.com */	
.embed-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} 
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
		
	@media only screen and (max-width: 450px) {
		figure.hero  {margin-bottom:7px;}
		}
		


/*-------- CONTENT // PAGE TEMPLATE --------*/
	
section, article {display:block;}
	
#page-wrapper {width:975px; margin:0 auto;}

	@media only screen and (max-width: 1023px) {
		#page-wrapper {width:775px;}
		}
		
	@media only screen and (max-width: 840px) {
		#page-wrapper {width:575px;}
		}
		
	@media only screen and (max-width: 630px) {
		#page-wrapper {width:95%;}
		}
	
#sidebar {
	width:150px; 
	margin-right:25px;
	position:fixed;
	}
	
	@media only screen and (max-width: 630px) {
		#sidebar {display:none;}
		}
	
#content-wrapper {
	width:800px;
	margin-left:175px;
	}
	
	@media only screen and (max-width: 1023px) {
		#content-wrapper {width:600px;}
		}
		
	@media only screen and (max-width: 840px) {
		#content-wrapper {width:400px;}
		}
		
	@media only screen and (max-width: 630px) {
		#content-wrapper {width:95%; margin:0px auto;}
		}

header {
	display:block;
	width:800px;
	padding:30px 0 25px 0;
	}
	
	@media only screen and (max-width: 1023px) {
		header {width:600px;}
		}
		
	@media only screen and (max-width: 840px) {
		header {width:400px; padding:20px 0 0px 0;}
		}
		
	@media only screen and (max-width: 630px) {
		header {width:100%;}
		}
		
	@media only screen and (max-width: 360px) {

		}
		
main {position:relative;}

	main img {position:relative; display:inline; float:left; width:390px; margin-bottom:20px;}
	main img:nth-of-type(odd) {margin-right:20px;}
	
	main iframe {position:relative; display:inline; float:left; width:390px; margin-bottom:20px; height:250px;}
	main iframe:nth-of-type(odd) {margin-right:20px;}
	
	@media only screen and (max-width: 1023px) {
		main img, main iframe {width:100%; display:block; float:none;}
		main img:nth-of-type(odd), main iframe:nth-of-type(odd) {margin-right:0px;}
		}

	
/*-------- CONTENT // SIDEBAR --------*/

img#profile {
	width:150px;
	border:1px solid #e6e6e6;
	margin:20px 0 15px 0;
	}
			
		@media only screen and (max-width: 840px) {
			
		}
		
		@media only screen and (max-width: 630px) {
			
		}
		
		@media only screen and (max-width: 530px) {
			
		}
		
		@media only screen and (max-width: 420px) {
			
		}
		
		@media only screen and (max-width: 360px) {
			
		}
		
nav {width:120px; margin:0 auto;}
	
/*-------- CONTENT // HEADER --------*/

img#logo {
	width:200px;
	position:relative;
	display:inline;
	float:left;
	}
	
	@media only screen and (max-width: 840px) {
		img#logo {margin-bottom:10px;}
	}
	
	@media only screen and (max-width: 450px) {
		img#logo {width:170px;}
	}
		
	div.call-to-action {
		width:320px;
		margin:17px 0 35px 0;
		}
		
		@media only screen and (max-width: 840px) {
			div.call-to-action {
				width:300px;
				margin:7px 0 15px 0;
				}
			}
		
		@media only screen and (max-width: 630px) {
			div.call-to-action {
				margin:17px 0 15px 0;
				}
			}
			
		@media only screen and (max-width: 600px) {
			header div.call-to-action {
				display:none;
				}
			}
		
		@media only screen and (max-width: 350px) {

			}
			
	div.content-cta {
		margin:0px auto 40px auto;
		padding-top:10px;
		height:40px;
		clear:both;
		}
		
		@media only screen and (max-width: 350px) {
			div.content-cta {
				height:95px;
				width:140px;
				}
			}
		
	div.call-to-action a {
		position:relative;
		display:block inline;
		float:left;
		width:148px;
		height:26px;
		border:1px solid #fbb03b; /* orange */
		padding:12px 0 0 0;
		text-decoration:none;
		text-align:center;
		font-size:1.5em;
		letter-spacing:0.05em;
		background-color:#fff; 
		outline:0;
		transition: background-color 0.5s ease-in-out;
		}
		
		@media only screen and (max-width: 840px) {
			div.call-to-action a {
				width:138px; 
				}
			}
		
		@media only screen and (max-width: 350px) {
			div.call-to-action a {
				display:block; 
				float:none; 
				margin:0 auto 15px auto; 
				}
			}
		
		div.call-to-action a:hover, div.call-to-action a:active {
			background-color:#fbb03b; /* orange */
			}

	div.joiner {
		position:relative;
		display:inline;
		float:left;
		width:20px;
		height:20px;
		border-bottom:1px solid #fbb03b; /* orange */
		}
		
		@media only screen and (max-width: 350px) {
			div.joiner  {display:none;}
			}
	

/*-------- CONTENT // FOOTER --------*/

footer {
	background-color:#000; 
	padding:15px 0 5px 0;
	clear:both;
	}
	
div#footer-links {width:800px; margin:0 auto; padding-left:175px;}
	
	@media only screen and (max-width: 1030px) {
		div#footer-links {width:550px;}
		}
		
	@media only screen and (max-width: 840px) {
		div#footer-links {width:550px; padding-left:0;}
		}
		
	@media only screen and (max-width: 630px) {
		div#footer-links {width:95%; margin:0 auto;}
		}


	
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/

/*-------- GENERIC TYPOGRAPHY --------*/


h1, h2, h3, h4 {
	font-weight:normal;
	font-style:normal;
	}
	
h1 {
	font-size:3.0em;
	line-height:1.4em;
	text-align:left;
	letter-spacing:0.01em;
	border-bottom:1px solid #e6e6e6;
	margin:0 0 15px 0;
	padding:5px 0 0 0;
	}
		
h2 {
	font-size:2.2em;
	line-height:1.2em;
	letter-spacing:0.01em;
	margin:0px 0 12px 0;
	padding:7px 0 0 0;
	clear:both;
	}

	
h3 {
	font-size:2.0em;
	line-height:1.2em;
	letter-spacing:0.01em;
	margin:0px 0 12px 0;
	padding:7px 0 0 0;
	clear:both;
	}
		

p {
	font-size:1.5em;
	line-height:1.6em;
	margin:0 0px 15px 0px;
	}
	
	p.note {color:#c1272d; /* dark red */}

span.orange {color:#fbb03b; /* orange */}

a {color:#000; font-size:1.4em; outline:0;}
a:hover, a:active {outline:0;}

figcaption {
	text-align:right;
	font-size:1.5em;
	font-style:italic;
	line-height:1.2em;
	}
	
	@media only screen and (max-width: 450px) {
		figcaption {text-align:left;}
		}
		

/*-------- TYPOGRAPHY // HEADER --------*/

p.lead {font-size:1.6em;}

/*-------- TYPOGRAPHY // CONTENT --------*/

nav#menu li p {padding:0 10px; margin-bottom:4px;}

main ul {padding-left:20px; margin-bottom:15px;}
main ul li {
	font-size:1.6em;
	line-height:1.2em;
	margin:9px 0;
	}
	
main a {font-size:1.1em;}

/*-------- TYPOGRAPHY // FOOTER --------*/

p.contact-details {
		width:300px;
		position:relative;
		display:inline;
		float:left;
		color:#fff;
		font-size:1.3em;
		letter-spacing:0.05em;
		padding-top:12px;
		}
		
		@media only screen and (max-width: 630px) {
			p.contact-details {display:block; float:none; text-align:center; width:100%;}
		}
		
		p.contact-details a {font-size:1.0em; text-decoration:none; color:#fff;}
		p.contact-details a:hover, p.contact-details a:active {border-bottom:1px solid #fbb03b; /* orange */}
	
	@media only screen and (max-width: 630px) {
		div#social-media{display:block; float:none; width:84px; margin:20px auto 0 auto;}
		}
	
	a#linkedin, a#facebook {
		position:relative;
		display:block inline;
		float:right;
		width:32px;
		height:32px;
		text-indent:-9999px;
		outline:0;
		margin:5px;
		}

	a#linkedin {background:transparent url(../images/social-media-links-sprite.png) 0 0 no-repeat;}
	a#linkedin:hover, a#linkedin:active {background:transparent url(../images/social-media-links-sprite.png) 0 -52px no-repeat;}
	a#facebook {background:transparent url(../images/social-media-links-sprite.png) 0 -104px no-repeat;}
	a#facebook:hover, a#facebook:active {background:transparent url(../images/social-media-links-sprite.png) 0 -156px no-repeat;}
  
p.copyright {color:#999; font-size:1.0em; text-align:center; clear:both; padding:10px 0 0 175px;}

	@media only screen and (max-width: 840px) {
		p.copyright {padding:10px 0 0 0px;}
		}

	
/* --------------- 4. FORM STYLES ---------------*/








/* --------------- 5. NAVIGATION STYLES ---------------*/

/*-------- MAIN NAVIGATION --------*/

nav li {
	text-align:center;
	}

	nav a {
		display:block;
		color:#1a1a1a;
		text-decoration:none;
		padding:18px 0 7px 0;
		border-bottom:1px solid #e6e6e6;
		transition: border-bottom 0.5s ease-in-out;
		}
		
	nav a:hover, nav a.selected {border-bottom:1px solid #fbb03b; /* orange */ color:#000;}
	
.slicknav_menu {display:none;}

.max-630, li.max-600 a {display:none;}

@media only screen and (max-width: 630px) {
	/* #menu is the original menu */
	ul#menu {display:none;}
	.slicknav_menu {display:block;}
	.max-630 {display:block;}
}

@media only screen and (max-width: 600px) {
	li.max-600 a {display:block;}
}