/********************************************
Tag Resets
********************************************/
body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; border: 0; }

/********************************************
Normalize CSS
http://necolas.github.com/normalize.css/
********************************************/
html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { min-height: 100%; font-size: 100%; }
/* HTML5 display definitions */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, canvas, video { display: block; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
b, strong { font-weight: bold; }
abbr[title] { border-bottom: 1px dotted; }
input, textarea, button, select { margin: 0; font-size: 100%; line-height: normal; vertical-align: baseline; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
textarea { overflow: auto; }
table { border-collapse: collapse; border-spacing: 0; }

/* ******************************************
Float Clearing http://nicolasgallagher.com/micro-clearfix-hack
******************************************* */
.group:after { content: " "; /* 1 */ display: table; /* 2 */ clear: both; }
.group { *zoom: 1; /* 3 */ }
/* ******************************************
 IE 7 and below, legacy browser polyfill for box-sizing: border-box; ****************************************** */
.ie .wrapper { *behavior: url("http://apopescu.com"); /* only absolute URLs here */ }
/* Clearfix */
.group { *zoom: 1; }
/* box-sizing polyfill, IE7 and below (The URL in .ie textarea is placeholder only. You will need to replace with path to your domain) */
.ie .wrapper, .ie .name, .ie .email, .ie input, .ie textarea { *behavior: url("http://apopescu.com/js/boxsizing.htc"); /* only absolute URLs here */ }

/* ******************************************
Web Fonts
****************************************** */
@font-face { font-family: 'RobotoRegular'; src: url('../fonts/Roboto-Regular-webfont.eot'); src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'), url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'RobotoLight'; src: url('../fonts/Roboto-Light-webfont.eot'); src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Light-webfont.woff') format('woff'), url('../fonts/Roboto-Light-webfont.ttf') format('truetype'), url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'RobotoItalic'; src: url('../fonts/Roboto-Italic-webfont.eot'); src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Italic-webfont.woff') format('woff'), url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'), url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'RobotoBold'; src: url('../fonts/Roboto-Bold-webfont.eot'); src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold-webfont.woff') format('woff'), url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'), url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg'); font-weight: normal; font-style: normal; }

/* ******************************************
Base Styles
****************************************** */
* { background: none; outline: none; }
#index { font: 100%/1 sans-serif; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; background: #21C4B5 url("../img/home/bg-header-s.png") no-repeat top right; background-attachment: fixed; }
body { /*background-color: #f8f8f8; */ background: none; font-family: RobotoLight, Arial, Verdana, sans-serif; font-weight: normal; color: #444; /* Part of Advanced Checkbox Hack for navigation */ -webkit-animation: bugfix infinite 1s; @-webkit-keyframes bugfix {
 from { padding: 0; }
 to { padding: 0; }
 } }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1 { font-size: 2.814em; /* 3 x 0.938 = 2.814 */ line-height: 1.066; /* 3 / 2.814 = 1.066098081023454 */ margin-top: 1.3em; }
h2 { font-size: 1.876em; /* 2 x 0.938 = 1.876 */ line-height: 1.066; /* 2 / 1.876 = 1.066098081023454 */ }
h3 { font-size: 1.407em; /* 1.5 x 0.938 = 1.407 */ line-height: 1.066; /* 1.5 / 1.407 = 1.066098081023454 */ }
h4 { font-size: 1.219em; /* 1.3 x 0.938 = 1.2194 */ line-height: 1.066; /* 1.3 / 1.219 = 1.066447908121411 */ font-weight: bold; }
h5, h6 { font-size: 1.032em; /* 1.1 x 0.938 = 1.0318 */ line-height: 1.066; /* 1.1 / 1.032 = 1.065891472868217 */ }
p, a, li { /* target paragraph font size: 15px */ font-size: 0.938em; /* 15px / 16px = 0.9375 */ /* target paragraph line height: 22px */ line-height: 1.438; /* 23px / 16px = 1.4375 *//* typographic scale = 0.9375 x 1.4375 = 1.34765625 rounded down to 1.3 *//* 1/2 scale = .65 *//* 1/3 scale = .43, .86, 1.3 *//* 1/4 scale = .325, .65, .975, 1.3 */ /* 1/5 scale = .26, .52, .78, 1.04, 1.3 */ }
p { margin: .65em 0; /* 1/2 scale */ }
a { color: #21C4B5; }
.text-italic { font-weight: normal; font-style: italic; }
.text-center { text-align: center; }
img { max-width:100%; }
.wrapper { padding-left: .65em; /* 1/2 scale */ /* column margin */ padding-right: .65em; /* 1/2 scale */ /* column margin */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* page gutter */
#nav, /*#masthead,*/ #content, #colophon { margin: 0 3.3%; }
.clear-fix { clear: both; }
.iframe-container { width: 320px; height: 569px; margin: auto; overflow: hidden; }
.iframe-viewport { max-width: 360px; max-height: 640px; margin: auto; overflow: hidden; }
.iframe-responsive { position: relative; overflow: hidden; width: 100%; padding-top: 177.77%; /* 9:16 aspect ratio (divide 16 by 9 = 1.7777) */}
iframe { overflow: hidden; border: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; }

/* ******************************************
Navigation
****************************************** */
#container-nav { background: #21C4B5; /* aqua */ }
#index #container-nav { background: none; width: 100%; position: absolute; top: 0; left: 0; /**/ }
#sub #container-nav { border-bottom: solid 5px #EEE; /*#C7F0EC; same as #container-header */ /*min-height: 3.9em; */ }
#nav { /*border:solid 1px yellow; */ padding: .65em 0 0 0; /* 1/2 scale */ }

/* ******************************************
Check box hack for drop-down menu
****************************************** */
#nav input[type=checkbox] { position: absolute; top: -999em; left: -999em; }
/*Nav label & icon */
#nav label { /*border:solid 1px yellow; */ float: right; min-width: 27px; /* icon width */ min-height: 27px; /* same as #nav h3 min-height */ margin-top: 1.3em; background: url("../img/icon-menu.png") no-repeat right top; text-indent: -999em; cursor: pointer; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; }
#nav label:hover { background-position: right bottom; }
#nav input[type=checkbox]:checked ~ nav { height: auto; overflow: hidden; }
#index #nav input:checked ~ h3 a { /* show/hide menu logo on home page only */ /*color: #fff; */ top: 0.325em; }
/* IE8 .checked class for checkbox.js */
#nav input[type=checkbox].checked ~ nav { height: auto; overflow: visible; }
/* show/hide menu logo on home page only */
#index #nav input[type=checkbox].checked ~ h3 a { /* color: #fff; */ top: 0.325em; }
/* Always show nav, IE7 and below */
/* "*" hack applies only to IE7 and below */
.ie #container-nav { *position: relative; }
.ie #index #container-nav { *background: #21C4B5; }
.ie #nav nav { *height: auto; *overflow: visible; }
/* Hide navicon, IE7 and below */
.ie #nav label { *background: none; }
/* Always show logo, IE7 and below */
.ie #index #nav h3 { /* *color: #fff; */ top: 0.325em; }

/* ******************************************
Website Logo
****************************************** */
#nav h3 { /*border:solid 1px yellow; */ font-family: RobotoBold, Arial, Verdana, sans-serif; font-weight: normal; text-transform: uppercase; float: left; text-align: center; min-height: 3.25em; /* same as #nav label min-height */ }
#nav h3 a { color: #C7F0EC; text-decoration: none; }
#nav h3 a:hover { color: #FFF; }
#nav h3 span { display: block; font-family: RobotoLight, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x 0.938 = 1.876 */ line-height: 1.066; /* 2 / 1.876 = 1.066098081023454 */ margin-top: -.2em; /* 1/5 scale */ }
#index #nav h3 a { /* hide logo for home page only */ position: absolute; top: -999em; }

/* ******************************************
Drop-down Menu
****************************************** */
#nav nav { height: 0; overflow: hidden; clear: both; margin-top: .65em; }
#index #nav nav { background-color:#21C4B5; }
#nav .menu-links { list-style: none; padding: 0; border-bottom: 1px solid #57D2C6; }
#nav .menu-links li { border-top: 1px solid #57D2C6; margin: 0; text-align: center; font-size: 1.032em; /* 1.1 x 0.938 = 1.0318 same as h5, h6*/ line-height: 1.066; /* 1.1 / 1.032 = 1.065891472868217 same as h5, h6 */ }
#nav .menu-links a { display: block; color: #fff; text-decoration: none; margin: 0; padding: .975em .65em; }
#nav .menu-links a:hover { background-color: #57D2C6; }
#nav footer { clear:both; padding: .325em 0; /* 1/2 scale */ border-bottom: solid 1px #57D2C6; /**/ text-align: center; }
#nav .social-links ul { list-style-type: none; }
#nav .social-links li { display: inline-block; margin: .65em; /* 1/4 scale */ }
#nav .social-links a { display: block; min-width: 27px; /* icon width */ min-height: 27px; /* icon height */ text-indent: -999em; }
#nav .social-links .linkedin { background: url("../img/icon-linkedin.png") no-repeat top center; }
#nav .social-links .linkedin:hover { background-position: bottom center; }
#nav .social-links .facebook { background: url("../img/icon-facebook.png") no-repeat top center; }
#nav .social-links .facebook:hover { background-position: bottom center; }
#nav .social-links .flickr { background: url("../img/icon-flickr.png") no-repeat top center; }
#nav .social-links .flickr:hover { background-position: bottom center; }

/* ******************************************
Header / Masthead
****************************************** */
#container-header { background: none; border-bottom: solid 5px #EEE; /*#C7F0EC; same as #sub #container-nav */ padding: 1.3em; /* spacing for nav height */ }
#masthead { color: #C7F0EC; text-align: center; text-transform: uppercase; padding: 3.9em /* (3 x scale) */ 0 6.5em /* (5 x scale) */ 0; }
#masthead h1 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x 0.938 = 1.876 */ line-height: 1.066; /* 2 / 1.876 = 1.066098081023454 */ }
#masthead h2 { font-size: 3.518em; /* 3.75 x 0.938 = 3.5175 */ line-height: 1.066; /* 3.75 / 3.5175 = 1.066098081023454 */ margin-top: -.13em; /* 1/10 scale */ }

/* ******************************************
Content
****************************************** */
#container-content { background-color: #f8f8f8; padding: 1.3em 0; }
#container-content section { margin: 1.3em 0; }
.box { background: #fff; -moz-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -webkit-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -moz-border-radius: .325em; -webkit-border-radius: .325em; border-radius: .325em; padding: 1.3em; /* 1 x scale gives a 1/2 scale border*/ }
.box h4 { margin-bottom:.975em; /* 3/4 scale */ font-weight: bold; }
.box h5 { color: #21C4B5; margin-bottom: .26em; }
.box h6 { margin-bottom: .975em; }
.box ul { /*list-style-type: disc; */ list-style-type: none; /*padding-left: .975em; */ }
.box ul li { padding-left: 1.3em; background: url("../img/resume/img-bullet.png") no-repeat left .325em; /**/ }
section footer { clear: both; }
.top-link { /*border: solid 1px red; */ float: right; min-width: 26px; /* img width */ min-height: 25px; /* img width */ padding-right: 2.08em; padding-top: .2em; background: url("../img/icon-top-link.png") no-repeat top right; color: #ccc; text-decoration: none; text-transform: uppercase; margin-top: .65em; }
.top-link:hover { background-position: bottom right; color: #444; }
.next-link { float: right; min-width: 26px; /* img width */ min-width: 26px; /* img width */ min-height: 26px; /* img width */ padding-right: 2.08em; padding-top: .2em; background: url("../img/icon-next-link.png") no-repeat top right; color: #ccc; text-decoration: none; text-transform: uppercase; }
.next-link:hover { background-position: bottom right; color: #444; }
.previous-link { float: left; min-width: 26px; /* img width */ min-height: 26px; /* img width */ padding-left: 2.08em; padding-top: .2em; background: url("../img/icon-previous-link.png") no-repeat top left; color: #ccc; text-decoration: none; text-transform: uppercase; }
.previous-link:hover { background-position: bottom left; color: #444; }


/* ******************************************
Introduction
****************************************** */
#intro header { padding-bottom: .65em; border-bottom: 1px solid #ddd; margin-bottom: 1.3em; }
#intro h3 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x paragraph */ line-height: 1.066; /* 2 x paragraph */ color: #21C4B5; opacity: .5; letter-spacing: -.063em; /* -1px */ margin-bottom: .1625em; /* 1/8 scale */ text-align: center; }
#intro h4 { text-align: center; font-weight: bold; }
#intro p { margin-bottom: 2.6em; }

/* ******************************************
Portfolio
****************************************** */
#portfolio header { padding-bottom: .65em; border-bottom: 1px solid #ddd; margin-bottom: 1.3em; }
#portfolio h3 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x paragraph */
line-height: 1.066; /* 2 x paragraph */
color: #21C4B5; opacity: .5; letter-spacing: -.063em; /* -1px */
margin-bottom: .1625em; /* 1/8 scale */
text-align: center; }
#portfolio h4 { /*font-size: 0.938em; same as paragraph */
/*line-height: 1.438; same as paragraph */
text-align: center; font-weight: bold; }
#portfolio article { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: none; width: auto; padding-top: .65em; /* 1/2 scale */
padding-bottom: .325em; /* 1/4 scale */
margin-right: auto; margin-left: auto; }
#portfolio article a { text-decoration: none; }
#portfolio figure { background: #fff; -moz-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -webkit-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -moz-border-radius: .325em; -webkit-border-radius: .325em; border-radius: .325em; padding: .325em; /* 1/2 scale frame*/ }
#portfolio .caption { position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden; padding: 20% .325em 0; -moz-border-radius: .325em; /* 1/6 scale 0.2166666666666667*/
-webkit-border-radius: .325em; /* 1/6 scale 0.2166666666666667*/
border-radius: .325em; /* 1/6 scale 0.2166666666666667*/
background-color:rgba(68, 68, 68, .9); text-align: center; color: #FFF; opacity: 0; transition:opacity .5s; }
#portfolio figure:hover > .caption { opacity: 1; }
/* Don't fade-in in IE7 & below */
.ie #portfolio figure:hover > div.caption { *opacity: 1; }
#portfolio .caption h5 { font-weight: bold; font-size: 1.219em; /* 1.3 x 0.938 = 1.2194 */
line-height: 1.066; /* 1.3 / 1.219 = 1.066447908121411 */ }

/********************************************
Fluid Media
********************************************/
figure { position: relative; }
figure img, figure object, figure embed, figure video { display: block; max-width: 100%; }
/* Fix for IE image scaling */
img { border: 0; -ms-interpolation-mode: bicubic; }
/* ******************************************
 IE 8 and below, legacy browser style fixes
****************************************** */
.ie #portfolio figure { width: 100%; box-sizing: border-box; }
/* "*" hack applies only to IE7 and below */
.ie #portfolio figure { *width: auto; }

/* ******************************************
Project Page
****************************************** */
#sub { background: none; }
#sub #container-nav { min-height: 3.25em; /* same as #nav h3 min-height */ }
#sub #container-header { background-color: #f8f8f8; border: none; }
#sub #project { max-width: 50em; /* 800px */
margin-left:auto; margin-right:auto; }
#sub #project article { margin-top: 1.3em; }
#sub article nav { height: 1.875em; /* icon height 30 px */
/*padding-bottom: .325em; border-bottom: solid 1px #ddd; */
margin-bottom: 1.3em; }
#sub #project article header { padding-bottom: .65em; border-bottom: 1px solid #ddd; margin-bottom: 1.3em; }
#sub #project h1, #sub #project h2, #sub #project h3, #sub #project h4, #sub #project h5, #sub #project h6 { text-align: center; }
#sub article h1 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x paragraph */
line-height: 1.066; /* 2 x paragraph */
color: #21C4B5; opacity: .5; letter-spacing: -.063em; /* -1px */
margin-bottom: .1625em; /* 1/8 scale */
margin-top: 0; }
#sub article h2 { font-size: 1.219em; /* same as h4 */
line-height: 1.066; /* same as h4 */
font-weight: bold; margin-bottom: 0; }
#sub h4 { margin-top: 1.3em; margin-bottom: .65em; }
#sub figure img { margin-right: auto; margin-left: auto; }

/* ******************************************
Résumé
****************************************** */
#resume article { padding: .65em; /* 1/2 scale */ }
#resume h3 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x paragraph */ line-height: 1.066; /* 2 x paragraph */ color: #21C4B5; opacity: .5; letter-spacing: -.063em; /* -1px */ padding-bottom: .325em; border-bottom: solid 1px #ddd; text-align: center; }
#resume h5 { font-family: RobotoBold, Arial, Verdana, sans-serif; }
#resume li { margin: .65em 0; /* 1/2 scale */ }
#resume .hire-me .box { background: #21C4B5 url("../img/resume/icon-contact.png") no-repeat 95% center/**/; color: #fff; /*min-height: 1.3em; */ padding: 1.3em 1.3em; max-width: 35em; margin-left: auto; margin-right: auto; }
#resume .hire-me .box:hover { background-color: #57D2C6; cursor: pointer; }
#resume .hire-me h4 { margin: 0; font-size: 1.407em; /* 1.5 x paragraph */ line-height: 1.066; /* 2 x paragraph */ font-weight: normal; }
#resume .hire-me a { color: #fff; text-decoration: none; }
#resume footer { text-align: center; }

/* ******************************************
Contact
****************************************** */
#contact-page #container-content { min-height: 60vh !important; }
#contact { padding-bottom: 0; }
#contact h3 { font-family: RobotoBold, Arial, Verdana, sans-serif; font-size: 1.876em; /* 2 x paragraph */
line-height: 1.066; /* 2 x paragraph */
color: #21C4B5; opacity: .5; letter-spacing: -.063em; /* -1px */
padding-bottom: .325em; /* half scale */
border-bottom: solid 1px #ddd; text-align: center; }
#contact .contact-links { margin: 1.3em 0; text-align: center; }
#contact .quote { text-align: center; margin: 1.3em 0 .65em 0; }
#contact .quote h1 { font-family: RobotoLight, Helvetica, Arial, sans-serif; color: #444; font-size: 1.219em; /* same as h4 */
line-height: 1.066; /* same as h4 */
font-weight: bold; font-style: italic; opacity: 1; }
#contact .quote h2 { font-size: 0.938em; /* same as paragraph */
line-height: 1.438; /* same as paragraph */
font-weight: normal; font-style: italic; }
#contact .quote p { line-height: 1; margin: 0; }

/* ******************************************
 Form Styles Basic Layout
****************************************** */
#contact form { padding: 1.95em 0; text-align: center; }
#contact form ul { list-style: none; }
#contact form li { /* make label relative to the p */
position:relative; margin-bottom: 1.3em; }
#contact form label { display:block; /* positions label above input when JS off */
text-align: left; }
#contact form input, #contact form textarea { background-color: #fff; font-family: RobotoLight, Helvetica, Arial, sans-serif; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 1.3em; -moz-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -webkit-box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); box-shadow: 0 .13em .13em 0 rgba( 0, 0, 0, .2 ); -moz-border-radius: .325em; -webkit-border-radius: .325em; border-radius: .325em; border: none; }
#contact form textarea { padding-bottom: 5.2em; /* 4 x scale */
overflow: auto; /* Remove default vertical scrollbar in IE 6/7/8/9 */
vertical-align: top; /* Improve readability and alignment in all browsers */ }
#contact form .send { background: #21C4B5 url("../img/contact/icon-contact.png") no-repeat 95% center; color: #fff; display: block; padding: .65em; font-size: 1.407em; max-width: 15em; margin: 0 auto; }
#contact form .send:hover { background-color: #57D2C6; }
#contact .send:active, #contact .send:focus { background-color: #444; }
.error { font-weight: normal; color: red; position: absolute; top:-1.3em; left:1.3em; }
#thanks { text-align: center; padding: 3.9em 0; }
#thanks .social-links { text-align: center; /*margin: -1.3em 0 1.3em 0; */ }
#thanks .social-links ul { margin: 0; list-style-type: none; }
#thanks .social-links li { display: inline-block; margin: .65em; /* 1/4 scale */ }
#thanks .social-links a { /*border: solid 1px red; */
display: block; min-width: 27px; /* icon width */
min-height: 27px; /* icon height */
text-indent: -999em; }
#thanks .social-links .linkedin { background: url("../img/contact/icon-linkedin-gray.png") no-repeat top center; }
#thanks .social-links .linkedin:hover { background-position: bottom center; }
#thanks .social-links .facebook { background: url("../img/contact/icon-facebook-gray.png") no-repeat top center; }
#thanks .social-links .facebook:hover { background-position: bottom center; }
#thanks .social-links .flickr { background: url("../img/contact/icon-flickr-gray.png") no-repeat top center; }
#thanks .social-links .flickr:hover { background-position: bottom center; }
#contact-page #container-footer { padding-bottom: 10%; }

/* ******************************************
Footer
****************************************** */
#container-footer { padding: 1.8em 0; /* 1 and 1/2 scale */
background: #444; /*#352a38; */
color: #CCC; border-top: solid 5px #EEE; font-weight: normal; /*text-transform: uppercase; */ }
#colophon .social-links ul { list-style-type: none; float: right; margin: -2.763em -.65em 0 0; /* 2.125 x scale */ }
#colophon .social-links li { display: inline-block; margin: .65em; /* 1/4 scale */ }
#colophon .social-links a { display: block; min-width: 27px; /* icon width */
min-height: 27px; /* icon height */
text-indent: -999em; }
#colophon .social-links .linkedin { background: url("../img/icon-linkedin.png") no-repeat top center; }
#colophon .social-links .linkedin:hover { background-position: bottom center; }
#colophon .social-links .facebook { background: url("../img/icon-facebook.png") no-repeat top center; }
#colophon .social-links .facebook:hover { background-position: bottom center; }
#colophon .social-links .flickr { background: url("../img/icon-flickr.png") no-repeat top center; }
#colophon .social-links .flickr:hover { background-position: bottom center; }

/* 320px *** 480px *** 640px *** 768px *** 960px *** 1024px *** 1280px */

/* ******************************************
Media Queries for screens smaller than 320px (20em)
****************************************** */
@media screen and (max-width: 20em) { /* text scale down from 1.3 to 1.2 */
body { font-size: 92.30769230769231%; } /* 1.2 / 1.3 x 100 = 92.30769230769231 */
#nav h3 { padding-top: 0; }
#colophon { text-align: center; }
#colophon .social-links ul { float: none; margin: 0; }
 }

/* ******************************************
Media Queries for screens 320px & larger (20 em)
****************************************** */
@media screen and (min-width: 20em){
  #portfolio article { max-width: 27em; /*432px; */ }
  #resume .hire-me h4 { padding-right: 40%; }
}

/* ******************************************
Media Queries for screens 480px & larger (30 em)
****************************************** */
@media screen and (min-width: 30em){
  .iframe-container { width: 360px; height: 640px; }
  #portfolio article { float: left; width: 50%; padding-top: .65em; /* 1/2 scale */ padding-bottom: .325em; /* 1/4 scale */ }
  #resume .hire-me h4 { padding-right: 0; text-align: center; }
}


/* ******************************************
Media Queries for screens 720px & larger (45em)
****************************************** */
@media screen and (min-width: 45em){
 #index { background: #21C4B5 url("../img/home/bg-header-m.png") no-repeat top right; background-attachment: fixed; /**/ }
/* text scale up from 1.3 to 1.4 */
body { font-size: 107.6923076923077%; } /* 1.4 / 1.3 x 100 = 107.6923076923077 */
#sub #container-nav { padding-bottom: 2.925em; /* 2.25 x scale */ }
#sub #nav nav { padding-top: .975em; /* 3/4 scale */ }
#nav, #masthead, #content, #colophon { margin: 0 5.5%; } /* gutter */
#nav h3 { padding-top: .325em; }
#index #nav h3 { display:none; }
#nav label { display: none; }
#nav nav { height: auto; /*min-height: 2.925em; 2 and 1/4 scale (height for menu on sub-pages) */
/*min-height: 3.25em; same as #nav h3 & #nav label min-height */
overflow: visible; clear: none; margin: 0; padding-bottom: .65em; /* 1/2 scale */
float: right; }
#index #nav nav { background:none; }
#nav .menu-links { border: 0; float: left; margin-top: -.217em; /* 1/6 scale */
margin-left: .65em; /* 1/2 scale */ }
#nav .menu-links li { display: inline; border: 0; }
#nav .menu-links a { display: inline-block; }
#nav footer { display:none; }
#masthead { text-align: left; padding: 3.9em /* (3 x scale) */ 0 5.2em /* (4 x scale) */ 0; }
#masthead h1 { padding-left: .13em; /* 1/10 scale (fix for h1 align-left) */ }
#intro h3, #intro h4 { /*text-align: left; */ }
#portfolio h3 { /*text-align: left; */
/*margin-bottom: .65em; */ }
#portfolio h4 { /*text-align: left; */
/*margin-top: -2.7625em; 2.125 x scale */ }
#portfolio article { float: left; width: 33.333%; }
#sub #project article header { padding-left: 0; }
#resume .currently, #resume .previously { min-height: 13em; /* 10 x scale */ }
#resume .hire-me { width: 100%; clear: both; }
#resume .skills { float: left; width: 50%; }
#resume .skills .box { min-height: 20.8em; } /* 16 x scale */
#contact .name, #contact .email { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; }
#contact .name { padding-right: 1.3em; }
#contact .message { float: left; width: 100%; }
 }

/* ******************************************
Media Queries for screen wider than 60em (960px)
****************************************** */
@media (min-width: 60em) {#resume .currently, #resume .previously { float: left; width: 50%; min-height: 18.2em; /* 14 x scale */ }
#resume .currently .box, #resume .previously .box { min-height: 15.6em; /* 12 x scale */ }
#resume .skills .box { min-height: 18.2em; } /* 14 x scale */ }

/* ******************************************
Media Queries for screens 1024px & larger (64em)
****************************************** */
@media screen and (min-width:64em) {.wrapper { max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; }
#portfolio .caption { padding: 23% .65em 0; }
#resume .currently .box, #resume .previously .box { min-height: 13em; /* 10 x scale */ }
#contact .name, #contact .email { clear: both; }
#contact .email { padding-right: 1.3em; }
#contact .message { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 50%; margin-top: -5.25em; /* 4.25 x scale */ }
#contact form .send { float:left; margin-left: 50%; }
 }

/* ******************************************
Media Queries for screens 1280px & larger (80em)
****************************************** */
@media screen and (min-width: 80em){
 #index { background: #21C4B5 url("../img/home/bg-header-l.png") no-repeat top right; background-attachment: fixed; }
/* text scale up from 1.3 to 1.5 */
body { /*font-size: 115.3846153846154%; 1.5 / 1.3 x 100 = 115.3846153846154 */ }
#portfolio .caption { padding: 23% .65em 0; }
#portfolio .caption h5 { font-size: 1.313em; /* 1.4 x 0.938 = 1.3132 */
line-height: 1.066; /* 1.4 / 1.3132 = 1.066098081023454 */ }
 }


/* ******************************************
Print Styles
****************************************** */
@media print, print and (max-width: 8.5in){
 #container-content { padding: 0; }
#masthead { color:black; padding: 0; margin: 0; }
#portfolio article { float: left; width: 33.333%; }
#sub #project nav { display: none; }
#sub header img { display: block; float: none; width: 3in; }
#sub img { float: left; width: 1.5in; padding-right: 10px; }
#resume .currently, #resume .previously { float: left; width: 50%; }
#resume .hire-me { float: left; width: 100%; }
#resume .hire-me a { color: #21C4B5; }
#resume .skills { float: left; width: 33.333%; }
.top-link { display: none; }
#container-footer { padding: 0; }
 }