/********************************************
	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,
object,
svg
 {
	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%;
}

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;
}



/* ******************************************
	Web Fonts
****************************************** */

@font-face {
    font-family: 'Nanami Rounded Book';
    src: url('../fonts/nanami-rounded-book-webfont.eot');
    src: url('../fonts/nanami-rounded-book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nanami-rounded-book-webfont.woff') format('woff'),
         url('../fonts/nanami-rounded-book-webfont.ttf') format('truetype'),
         url('../fonts/nanami-rounded-book-webfont.svg#NanamiRoundedBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
@font-face {
    font-family: 'Roboto Condensed Light';
    src: url('../fonts/robotocondensed-light-webfont.eot');
    src: url('../fonts/robotocondensed-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/robotocondensed-light-webfont.woff') format('woff'),
         url('../fonts/robotocondensed-light-webfont.ttf') format('truetype'),
         url('../fonts/robotocondensed-light-webfont.svg#RobotoCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;
}*/


/*
~~~~~~~Responsive layout~~~~~~~
*/

html {
	    font-size: 100%;
	    line-height: 1;
	    -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	    -webkit-text-size-adjust: 100%;
		}

body {
		font-family: 'Nanami Rounded Book', "Helvetica Neue", Helvetica, Arial, sans-serif;
		background: #EFEFEF url("../img/bk.png") repeat;
		color:#555;

	letter-spacing: 0.0325em;
	-webkit-animation: bugfix infinite 1s;
	}



	/* Fluid Columns, Fixed Gutters */

.wrapper {
    padding: 0 .65em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
	#nav, #masthead, #content, #colophon {
		margin:0 18px;
	}

	#masthead{
	color: #EFEFEF;
	width: 90%;
	}

	#container-nav{
		background:#fff;
	}

	#container-header{
		background: #B2D1E5 url("../img/bk.png") repeat;
		padding: 3.9% 0 ;
	}
	#container-content{
		padding: 24px 0;
	}

	#container-footer{
		padding: 32px 0;
		background: #B2D1E5 url("../img/bk.png") repeat;
		color:#eee;
		font-weight:100;
	}
	.box {
		padding:14px;
    min-height: 9.065em; 
	}

	img{
		max-width: 100%;
}

#content article{

padding-top: .65em;
padding-bottom: 1.3em;
}

p, #resume li{
font-size:1.063em; /*17px / 16px = 1.063em*/
line-height:1.223;
margin: .65em 0 ;
font-weight:100;
}


h1, h2, h3,h4, h5, h6{
font-weight:100;
margin: .325em 0 ;
}

h1{
font-size:3.189em;/*1.063 x 3*/
line-height:1.223;
margin:0.1625 0;
}

h2{
font-size:2.126em;/*1.063 x 2*/
line-height:1.223;
}

h1, h2 {
    text-shadow: 0 2px 2px rgba(0, 100, 180, .45);
    }



h3{
font-size:1.382em;
line-height:1.176;
}

h4 {
    font-size: 1.063em;
    line-height: 1.223;
    text-transform: uppercase;
}

#portfolio h4 {
    line-height: 1.223;
}

h5,h6 {
	font-size: .85em;
	line-height: 1.53;
	font-weight: 500;
					}

h6 {
	color: #aaa;
	font-weight: 200;
					 }
.box ul {
    list-style: none;
    padding: 0;
}


/* Navigation */

/*
- Create faux section height using padding.
*/

#nav {
    padding: .65em 0;
}

/*
- Float heading and capitalize content.
*/

#nav h3 {
 display:inline-block;
 position:relative;
 bottom: 1.3em;
    text-transform: capitalize;
}
#logo-name{
display:block;
float:left;
}

/*
- Remove <ul> list-style and default padding.
- Add a border-top to separate each <li>.
- Add a border-bottom to <ul> to wrap-up border styling.
- Add margin to separate, push off <ul> from heading/navicon and below #masthead section.
*/

#nav ul {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #eee;
    margin: .65em 0 .39em;
}

#nav li {
   border-top: 1px solid #eee;
}

/*
- Style inline <a> to become a block element.
- Update font-size to reflect foundation font scale defined by body text (<p>).
- Override default link color
- Remove default <a> text-decoration of underline.
- Add padding, keeping horizontal and vertical rhythm.
 */

#nav a {
   display: block;
   font-size: 1.063em;
   color: #555;
   text-decoration: none;
   padding: .975em .625em;
}

#nav a:hover {
   background: #EFEFEF;
}

#nav nav {
    height: 0;
    overflow: hidden;
}


@-webkit-keyframes bugfix {
    from {padding: 0;}
    to {padding: 0;}
}

#nav input[type=checkbox] {
    position: absolute;
    top: -999em;
    left: -999em;
}

#nav label {
    display:block;
	height: 75px;
    background: url("../img/icon-menu.png") no-repeat right center;
    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 input[type=checkbox]:checked ~ nav {
    height: auto;
    overflow: hidden;
}



.box h4 {
    color: #aaa;
    border-top: 2px solid #efefef;
    border-bottom: 1px solid #efefef;
    margin-bottom: .975em; /* 3/4 of 1.3 */
    text-align: center;
}

#portfolio figure,
.box {
    background: #fff;
    -moz-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
    -webkit-box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
    box-shadow: 0 0 .325em .13em rgba( 0, 0, 0, .1 );
    padding: .975em; /* 3/4 of 1.3 */
}



section footer {
    clear: both;
    }
/*Assist in centering single view*/
#nav,
#masthead,
#content,
#colophon {
	margin: 0 3.3%;
}

/* 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 style fixes
****************************************** */

.ie .wrapper {
    *behavior: url("http://natehare.com/portfolio/js/boxsizing.htc");
}

/* Clearfix */

.group {
    *zoom: 1;
    }

/* Form / Basic Layout */

form {
    padding: 0 0 1.3em;
    }

form ul {
    list-style: none;
    padding: 1.3em 0 0;
    }

form li {
    padding: 0 0 .65em;
    }

legend {
	font-size: 1.382em;
	line-height: 1.223;
	}

label {
    display: block;
	font-size: 1em;
	line-height: 1.56;
    padding: 0 0 .325em;
	}

legend, label {
	font-weight: 300;
	text-transform: uppercase;
	color: #fff;
	}

input,
textarea {
    display: block;
    width: 100%;
	font-size: 1em;
	line-height: 1.3;
	font-weight: 500;
    padding: .65em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

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

textarea {
    padding-bottom: 10%;
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
    }

.send {
    display: inline-block;
    max-width: 30em;
    font-size: 1.3em;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: #72B7E5;
    margin: .65em .26em;
    padding: .975em;
    border: 0;
    border-radius: 1.3em;
    text-shadow: 0 -1px 1px rgba(0, 100, 180, .65);
    }

.send:hover {
    background: #CCC;
    }

.send:active,
.send:focus {
    background: #555;
    }

/*Responsive Img Foundation*/
figure {
	    position: relative;
	}

	figure img,
	figure object,
	figure embed,
	figure video {
	    display: block;
	    max-width: 100%;
	}

	img {
	    border: 0;
	    -ms-interpolation-mode: bicubic;
	}

	/*
	interpolation-mode
	http://css-tricks.com/ie-fix-bicubic-scaling-for-images/
	 */


/* Creates hover effect on Portfolio images */
	#portfolio figure:hover,
	.box:hover {
	    -moz-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
	    -webkit-box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
	    box-shadow: 0 0 .65em .325em rgba( 0, 0, 0, .1 );
	}

	/* Image Offset for Indication of Linked Content */

	#portfolio figure:hover {
	    bottom: .26em;
	}

#resume a:link,#resume a:visited {
color:#555;
}
#resume a:hover,#resume a:active, #resume a:focus{
background-color:#72B7E5;
color:#fff;
text-decoration:none;
}

/*
~~~~~~~ Media Queries ~~~~~~~
*/

@media screen and (max-width:45em){
#portfolio article, #resume article {
max-width:22.5em;
margin:auto;
}

}

@media screen and (min-width:45em){ /*720 px*/


body{
font-size:107.692307692308%;
}


#portfolio article, #resume article {
float:left;
width:33.3%;
}
#masthead{
max-width:35em;
}



/* Form Adjustments */
.name, .email {
    float: left;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

.name {
    padding-right: .65em;
    }

.email {
    padding-left: .65em;
    }

.send {
    width: 48.6%;
    }
	    #nav h3 {
	         margin: 0 1.3em 0 0;
	    }

	    #nav label {
	        display: none;
	    }

	    #nav nav {
	        height: auto;
	        overflow: visible;
	    }

	    #nav ul {
	        border: 0;
	        margin: 0;
	        }
		#nav li {
		        display: inline;
		        border: 0;
		    }
		#nav a {
			position:relative;
			top: .65em;
		        display: inline-block;
		        }

}

@media (min-width: 60em) { /*920 px*/

.name, .email {
    padding-right: 1.3em;
    padding-left: 0;
    clear: both;
    }

.message textarea {
    width: 50%;
    }

.send {
    width: 25%;
    margin-left: 50%;
    }

	#container-content {
max-width:60em;
margin:auto;
}

}

/*PRINT STYLES

	********
	*      *
****************
*****      *****
****************

*/
@media print and (max-width:8.5in){
h1,h2,h3,h4, h5,h6{
page-break-after: avoid;
}

figure, img {
page-break-before:avoid;
}

		#masthead {
			color:black;
		}

		#container-header {
			height: auto;
		}

		img {
			width:2.30in;
		}

		#portfolio	{
			float:left;
			width:45%;
		}

		#resume	{
			float:right;
			width:45%;
		}

		#container-footer	{
			clear:both;
	}


article,ul, figure, img{

page-break-inside:avoid;
}

}