/********************************************
	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%;
}

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


body {
	font-family: "Jost", Helvetica, sans-serif;	
}

/* ******************************************
	Custom Styles
****************************************** */

/*	  For details on font-size:100% see here: 
      http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/ 
	  
	  For details on line-height:1 see here:
      http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/ 

	  For details on text-size-adjust:100% see here:
	  https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust 
*/



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: "Jost", Helvetica, sans-serif;
		font-size: 1em;
		line-height: 1.3;
		font-weight: 100;

	}
	
/* ******************************************
	Sketchfab
****************************************** */	
.ratio-16-9,
.ratio-16-10,
.ratio-square {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
}

.ratio-16-9 {
    padding-top: 155%; /* This is your aspect-ratio */
}


.ratio-inner {
    display: block;
    position: absolute;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    width: 99%;
    height: 99%;
}	

/* ******************************************
	Sketchfab
****************************************** */
	

	
.projects ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
  border-collapse: collapse;
  width: 100%;
}

.projects li {
  display: table-cell;
}

img {
  display: block;
  width: 100%;
  height: auto;
}
	
p {
	font-size: 1.2em; 
	font-weight: 100;
	line-height: 1.65;
	padding-bottom: 0em;
	text-align: center;
}

#about-container {
	color: #1E1E23;
}

#copyright p {
	margin: 0;
	text-align: left:
	padding-bottom: 0;

}



#row {
	display: block;
	clear: both;
}



#work article {
	max-width: 100%;

}

#three_column {
clear: both;
}

.clear {
clear: both;
}

	
#portfolio a {
	color: #b93b7f;
}
	
#portfolio a:hover{
	color: #c1d72e;
}


#four_columns_more_work figure:hover img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
		-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
    

    	
h3 {
    overflow: hidden;
    text-align: center;
}

#about-container h3 {
    font-size: 2.2em;
   	clear: both;
    text-align: center;
    font-weight: 800;
    line-height: 1.2em;
    color: #1E1E23;
}






#reel-container h3{
    font-size: 2.2em;
   	clear: both;
    text-align: center;
    font-weight: 800;
    line-height: 1.2em;
    color: #1E1E23;
}







#about_me_header h3 {
	font-size: 2.5em;
	color:#B1B1B2;

}

#contact h3 {

	font-size: 2.5em;
	color:#B1B1B2;	
}



#project-page h3, #about h3, #contact h3 {
font-weight: 800;
color: #B1B1B2;
}
	
.g-recaptcha {
   	 transform:scale(0.86);
     transform-origin:0 0;
	float: right;    
}
	
	

header p {
	text-align: center;
}   	
	
#copy .wrapper {
	padding: 0;
}
	
/* grid for portfolio images */
#portfolio .wrapper {
	padding: 1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}

#four_columns_more_work .wrapper {
	padding: 1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}

#five_columns .group-wrapper {
	padding: .1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}

#four_columns .group-wrapper {
	padding: .1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}

#three_column .group-wrapper {
	padding: .1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}


	
#three_column article {
	float:left;
	width: 50%;
}

#two_column .group-wrapper {
	padding: .1em;
   	 -webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
   	 box-sizing: border-box;
   	 margin:0;
}


	
#nav {
	padding: .7em 0 0 0;  
}

#nav ul {
	list-style: none;
}

#nav li {
	border-top: 1px solid #aeb9bf;
}
	
#nav a {
	display: block;
	font-size: 1.1em;
	font-weight: 200;
	color:#aeb9bf;
	text-decoration: none;
	padding: .9em 1em; 
}
	
#nav a:hover {
	background: #B1B1B2;
	height: 100%;
}
	
	
#nav nav {
	height: 0;
	overflow: hidden;
}

#sans_logo p{
	color: #aeb9bf;
	float: left;
	margin-left: 0;
	font-size: .9em;

}

#sans_logo {
	position: relative;
	display: block;
}
	
	
body { 
	-webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix {
	from {padding: 0;} 
	to {padding: 0;} 
}
	
#nav input[type=checkbox] {
	position: absolute;
	top: -999em;
	left: -999em;
}
	
#nav label { 
	display: block;
	background: url("../img/icon-menu.png") no-repeat right center;
	background-size:35px 26px;
	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;
	margin-top: -.5em;
	padding-bottom: 2.4em;
}
	
#nav input[type=checkbox]:checked ~ nav {
	height: auto;
	overflow: hidden;  
}

	
	
#project-wrapper {
	margin-top: 1.9em;
	clear: both;
	display: block;
}
		
		
#portfolio article p {
	margin-top: .5em;
	text-align: center;
	float: left;
}
	
.with-margin{
	margin-top: 0;
}


	

	
.module {
	padding: 0;
	padding-bottom: 3.3em;
	height: auto;
	width: auto;
}
	
.single-module {
	padding: 0;
	padding-bottom: 2em;
	height: auto;
	width: auto;
	clear: both;
}

    
.single-module p{
	text-align: center;
	padding-top: 2em;
}
	

	
.svg img{
	width: 100%;
}
	
.single-module .svg img {
	width: 100%;
}
	
	
.module img, .single-module img {
	display: block;
   	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

    
.single_mobile .module {
	display: block;
   	margin-left: auto;
	margin-right: auto;
	width: 100%;
		}
		


	
section footer {
 	clear: both;
 }
    
#portfolio section {
	padding-bottom: 3.6em;
    	
 }
	


   
#container-content {
	font-size: 1.1em;
}

#container-footer {
	padding: 0;
	color:#000;
	font-weight:200;
	margin-top: 0;
}
	
img {
	max-width:100%;
	}

#background {
	background-color: #000000;
}



#four_columns_more_work {
	background-color: #000000;
	padding-top: 3em;
	padding-bottom: 1em;
	overflow: hidden;
	margin-top: 3em;
}
		
#four_columns_more_work article {
	max-width: 50%;
	float: left;
	overflow: hidden;
}

#four_columns_more_work h3{
	font-size: 2.5em;
   	color: #ffffff;
   	clear: both;
    text-align: center;
    font-weight: 800;
 	padding-bottom: 1.5em;
 	margin-top: 1em;
}

	
#colophon {

	width: 100%;
	background: #000000;
	padding-top: 1.2em;

}


	
a {
	text-decoration: none;
}
	
#content, .margin {
	margin: 0 8.3%;
}
	
	
.project-colophon .with-margin {
	margin: 0 8.3%;
}
	
.no-margins {

	padding: 0;
	background: #000;
	overflow: auto;
	display: block;
	height: auto;
}

#project_page .no-margins {
	margin: auto 0;
	overflow: auto;
}
	


.no-margins .with-margin {
	margin: 0;	
}
	
	
	
	
#arrows p {
	font-weight: 100;
	color: #ffffff;
	font-size: 240%;
	opacity: 0.3;
	filter: alpha(opacity=15); /* For IE8 and earlier */
	margin: 0 -25%;
	background: #000000;
	width: auto;
	padding: 5px;
}
	
#arrows p:hover {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}
	
#container-back {
	position: relative;
	float: left;
}
		
#back {
	width:60px;
	position:fixed;
	top: 25em;
	left: -1%;
	z-index:100;
}
	
#back p{
	float: left;
}
	
#container-next {
	position: relative;
	float: right;
}
		
#next {
	width:60px;
	position:fixed;
	top: 25em;
	z-index:100;
	right: -1%;
}
	
#next p {
	float: right;
}
	
video {
    max-width: 100%;
    height: auto;
}


.iframe {
    max-width: 100%;
}

.container {
    width: 100%;
}


  
  .gap {
  height: .5em;
  }
  



/* Float Clearing http://nicolasgallagher.com/micro-clearfix-hack */

.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
    clear: both;
}

.group {
   	*zoom: 1; /* 3 */
   	
   	
}



#four_columns div {
	max-width: 50%;
	float: left;
}

#five_columns div {
	max-width: 33.3%;
	float: left;
}

#third_columns figure {
	max-width: 33.3%;
	float: left;
}

#third_columns_mobile_1 figure {
	max-width: 100%;
	float: left;
}

#two_columns figure {
	max-width: 100%;
	float: left;
}










/********************************************
	Hero Colors for BGs
********************************************/
html {
	background-color: #1E1E23;
}


#project-page {
	clear: both;

}	

#project-page h3 {
	padding-top: .5em;
}	

 

#attn-bg {
	background: #a4dcff;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}
#hulu-bg {
	background: #53de99;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#ibm-bg {
	background: #5e96ff;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}


#signal_sciences-bg {
	background: #fbbb94;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#ahol-bg {
	background: #b99afe;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#otto-bg {
	background: #d0ffe0;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#aeg-bg {
	background: #a4dcff;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#tgb-bg {
	background: #b294fd;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#som-bg {
	background: #b294fd;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#meara-bg {
	background: #fff281;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#lafb-bg {
	background: #b294fd;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}

#reddit-bg {
	background: #ff8864;
	border-bottom: 1px;
	padding-top: 4em;
	padding-bottom: auto;

}



#reel-bg {
	border-bottom: 1px;
	padding-top: 2em;
	padding-bottom: 0;

}

#reel-bg #content h3{
	color: #B1B1B2;
	font-weight: 800;
	margin-top: -1em;

}

#reel-bg #content p  {
	color: #B1B1B2;
	font-weight: 400;

}




	
#reel_header h3 {
	font-weight: 800;	
}


#social_media img {
	height: 30px;
	width: 30px;
	padding: 5px;
}

#footer_logo {
	width: 70px;
	margin: 0 auto;
	padding-bottom: 1em;
	padding-top: 4em;
}

#colophon p {
	color: #ffffff;
	font-size: .8em;
	padding-bottom: 6em;
}


#social_media {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
	padding-bottom: 1em;
}
	
	
#social_media ul li {
	display: inline;
	float: left;
}



#reel_breakdown p {

	text-align: left;

}

#about p {
	font-size: 1em;
	color: #B1B1B2;
}

.blurb p {
	margin-top: -2em;
	padding-bottom: 2em;
	font-size: 1.1em;
	color: #B1B1B2;
}



.one-ems-gap {
	height: 1em;
}











	

		








/********************************************
	Fluid Media
********************************************/

	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/
	 */
	
/* ******************************************
	   Form Styles Basic Layout
****************************************** */

form {
    padding: 0 0 1.2em;
    overflow: hidden;
    }
    
form ul {
    list-style: none;
    padding:  0;
    }
    
form li {
    padding: 0 0 .6em;
    }
	

		    
label {
    display: block;
	font-size: 1em;
	line-height: 1.2;
    padding: 0 0 .3em;
	}
		
label {      
	font-weight: 300;
	text-transform: uppercase;
	color: #B1B1B2;
	}
	
input,
textarea {
    display: block;
    width: 100%;
    font-family: "Jost", Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.2;
    padding: .6em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #000000;
    }

/**
 * 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: 40em;
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    background: #ea008a;
    margin: .3em 0;
    padding: .3em;
    border: 0;
    
    }
    
.send:hover {
    background: #c1d72e;
    }
    
.send:active,
.send:focus {
    background: #c1d72e;
    }

    
    
/* ******************************************
    IE 7 and below, legacy browser style fixes
****************************************** */

.ie .wrapper {
    *behavior: url("http://nadiaswebsite.com/");
}

/* Clearfix */

.group {
    *zoom: 1;
}    
    
/* ******************************************
Media Queries for screen smaller than 720px
****************************************** */
@media screen and (max-width: 40em) {



		#about_picture img {
			width: 70%;
			margin: 0 auto;
		}
		
		#arrows p {
			margin-top: 80%;
		
		}


		
		#about-container .figure {
			margin: 0 -9.9%;
		}

		#reel-container .figure {
			margin: 0 -9.9%;
		}
		
		#about-container figure {
			margin: 0 -9.9%;
		}
		
		#project-page figure {
			margin: 0 -9.9%;
		}
		
		#project-page .figure {
			margin-left: -9.9%;
			margin-right: -9.9%;
		}

		#about .with-margin {
			margin: 0 -4%;

		}


		 
		#background .figure {
			margin: 0;
		}
		
		#background figure {
			margin: 0;
		}
		
	
		
		#work {
			margin: -10%;	
			overflow: hidden;	
			}
		
		
		#social_media img {
			height: 45px;
			width: 45px;
		}
		
		#about {
			margin-top: 7.5em;		
		}

		#about p{
			font-size: 1.1em;
			

		}
		
		#about_me p {
			padding-bottom: 0;



		}


		
		
		#about_me {
		
			padding-bottom: 0;
		}
		
		
		
		#about_me_header h3 {
			margin-top: 1em;
			padding-bottom: .2em;
		}	

		#some_work h3 {
			margin-top: -2em;
			padding-bottom: 1.7em;
			font-size: 2.5em;

		}

		
		#sans_logo p {
			margin-top: .9em;
		}	
	
		#about-container {
			margin-top: -6em;
			padding-bottom: 2em;
		}

		#reel-container {
			margin-top: -6em;
			padding-bottom: 2em;
		}

		.send {
			width: 100%;
			float: none;
			clear: both;
		}
		
		 .mobile_gap {
		 	height: 3.3em;
		 }
		 
		 .under_gallery {
		 	height: 2em;
		 }

		.projects li {
  			display: block;
  			width: 50%;
  			float: left;
		}
		
		.projects ul {
  			list-style: none;
 			padding: 0;
  			margin: 0;
  			display: inline;
			border-collapse: collapse;
  			width: 100%;
		}

		#container-nav #nav {
			margin: 0 8.3%;
		}
		
		#container-nav {
			background: #000000;
		}

		#home {
			position: relative;
			width: 3em;
			clear:both;
			display: block;
			padding: 0;
			margin: 0;
		}
		
		#home figure a{
			padding: 0;
			margin: 0;
		}
	
		#home img {
			width: 100%;
			clear: both;
			padding: 0;
			margin: 0;
			position: absolute;
		}

	


		
	
		.pad p{
			margin-top: .6em;
		}
		

	
    	
    	.short {
    		display: block;
    		height: 4em;
    	}
    	
		#portfolio section {
    		padding-bottom: 2em;
    	}
		

    
				
		#nav ul {
			float: none;
			width: 100%;	
		}
		
		#nav a {
			width: 100%;
	   		text-align: center;
	   		margin-left: -1.2em;
		}
		
		#project-page h3 {
			padding-bottom: 1.5em;
			font-size: 1.7em;
			margin-top: .5em;
			clear: both;
			display: block;
		
		}




 		
 		#about-container h3 {
 			padding-top: 1.8em;
 			padding-bottom: .3em;
 			color: #1E1E23;
 		}

 		 #reel-container h3 {
 			padding-top: 1.8em;
 			padding-bottom: .3em;
 			color: #1E1E23;
 		}





    	.single-logo p {
			padding-bottom: 1.6em;
		}
				

		
		/* clears space between .module paragraphs and headers */
		.clear-p {
			margin-top: -1.8em;
		}
    	
    	.break {
			height: .5em;
		}
    	
    	.single-module p{
			text-align: left;
		}
		
		#project-page .single-module {
			padding-bottom: 1em;
		}
	
		
		
		.module p {
		padding-bottom: .5em;
		}
				

		
		.no-margins .with-margin{
			margin-top: 0;
		}
		
		.project-colophon .with-margin, #nav {
			margin: 0 8.3%;
		}
		
		#container-back {
			position: relative;
			float: left;
		}
		
		#back {
			width:60px;
			position:fixed;
			top: 23.5em;
			left: 3.3%;
			z-index:100;
		}
	
		#container-next {
			position: relative;
			float: right;
		}
		
		#next {
			width:60px;
			position:fixed;
			top: 23.5em;
			z-index:100;
			right: 3.3%;
		}
	
		#next p {
			float: right;
		}
	
		.last-no-padding p{
			padding-bottom: 0;
		}
		
		/* grid for portfolio images */
		#portfolio .wrapper {
			padding: .1em;

		}
		
		#four_columns_more_work .wrapper {
			padding: .3em;
		}
		
		#four_columns_more_work {
			padding-top: 1.5em;
			margin: -2.5em 7% 0 7%;
		}

		#four_columns_more_work h3{
			font-size: 2.5em;
		}
		
  		
  		#background {
  			margin-top: 1.5em;
  			clear: both;
  		} 	
  		
  		#project-page {
			clear: both;
		 	margin-top: 3.5em;
		}	
		
		#hide {
			display: none;
		}

		.hide {
			display: none;
		}

		
		
		#sm_nav img {
			display: block;
			max-width: 40px;
			margin: 0 auto;
		}
		
		
		#sm_nav a {
			display: block;
			max-width: 40px;
			margin: 0 auto;
			width: 100%;
		}
		

		#contact h3 {
			
			padding-bottom: 1em;
			color:#B1B1B2;

		
		}

		#contact {
			margin-top: 2.5em;
		}

		#third_columns figure {
			max-width: 50%;
			float: left;
		}



		#third_columns {
			display: block;
			clear: both;
		}
	
				
		#two_columns figure {
			max-width: 100%;
			display: block;
			clear: both;
		}

		#three_columns_mobile_1 figure {
			max-width: 100%;
			display: block;
			clear: both;
			
		}

		
		#two_columns {
			display: block;
			clear: both;

		}

		#three_columns_mobile_1 {
			display: block;
			clear: both;

		}

		#tgb {
	
			padding-top: 1.7em;
		}

		.two_columns_mobile figure {
			width: 50%;
			float: left;
		}

		.two_columns_mobile_v2 figure {
			width: 100%;
			float: left;
		}

		.blurb p {
			margin-top: -2em;
			padding-bottom: 2em;
			font-size: 1.1em;
			font-weight: 300;
		}

		#about-container h3{
			font-color: #1E1E23;
		}

		#about-container .with-margin p{
			font-color: #000000;
			font-size: 1.1em;
		}


		.single-caption {
			margin-top: -.25em;
			font-size: 1.1em;
			color: #B1B1B2;
			padding-bottom: 2.5em;
			

		}

		.two-column-caption {
			padding-top: 1em; 
			padding-bottom: 1em;
			font-size: 1.1em;
			color: #B1B1B2;

		}

		#reel_breakdown p {

			text-align: left;
			font-size: .5em;
		}








}

/* ******************************************
	Media Queries for screen wider than 388px
****************************************** */
@media screen and (min-width: 40em){

		#about #container-content{
			margin-top: -3em;
			
		}
		
		#about_picture img {
			width: 14em;
			margin: 0 auto;
		}
		
		#about_me_header h3{
			margin-top: 1em;
			padding-bottom: .2em;
		
		}





		#some_work h3 {
			margin-top: -6.5em;
			padding-top: 1.5em;
			padding-bottom: 2em;
			font-size: 2.5em;

		}
		

		
				
		#nav ul {
			float: right;
			width: 100%;
		}

		#nav li {
			padding: .2em .2em;
		}


		
		
		#nav a {
			width: 100%;
	   		text-align: center;
	   		margin-left: -1.59em;
		}
		
		
		
		#hide_desktop {
			display: none;		
		}






		
		#about_me p {
			padding-bottom: 4em;


		}
		
		#about_me #portfolio {
			margin-top: -3em;
		}

		
		#sans_logo p {
			margin-top: 1em;
		}	
		
		#reel {
			padding-top: 0;
			padding-bottom: 3em;
			display: block;
			clear: both;
		}


		
		
		

		
		#about {
			margin-top: 12em;
		}

		#about .with-margin p{
			font-size: 1.1em;
			max-width: 31em;
			margin: 0 auto;
		}

		
		
		/* grid for portfolio images */
		#portfolio .wrapper {
			padding: .1em;

		}
		
		#work article {
			float: left;
		}
		

		#container-nav #nav {
			margin: 0 8.3%;
		}
		
		#container-nav {
			background: #000000;
		}


		#home {
			position: relative;
			width: 3em;
			clear:both;
			display: block;
			padding: 0;
			margin: 0;
		}
		
		#home figure a{
			padding: 0;
			margin: 0;
		}
	
		#home img {
			width: 100%;
			clear: both;
			padding: 0;
			margin: 0;
			position: absolute;
		}

		.margin_content {
			margin:4.9%;
		}
		

		
		.break {
			height: .5em;
		}
		
		
		.no-margins {
			height: auto;
			clear: both;
			display: block;
		}
		
		#three_column article {
			width: 33.3%;
			float: left;
		}
		
			
		.no-margins .with-margin {
			margin: 0;	
		}
	
		

		
		.module p {
			padding-bottom: .5em;
		}
		
		.single-logo p {
			padding-bottom: 2.4em;
		}

		
		/* clears space between .module paragraphs and headers */
		.clear-p {
			margin-top: -2.6em;
		}
		
		
		#project-wrapper {
			margin-top: 1.5em;
			padding-bottom: 2em;
			clear: both;
			display: block;
		}


		
		

		p {
			font-size: 100%;
		}
		


		
    	

		.picturefill img {
			width: 100%;
		}


		#about-container h3 {
			font-size: 3em;
   			padding-bottom: .5em;
   			padding-top: 1.7em;
   			line-height: 1.2em;
   			color:#1E1E23;

		}

		#reel-container h3 {
			font-size: 3em;
   			padding-bottom: .5em;
   			padding-top: 1.7em;
   			line-height: 1.2em;
   			color:#1E1E23;

		}

		#about-container p {
			font-size: 1.3em;
			margin:0 3%;
			
			
		}


		#about-container, #reel-container {
			margin-top: -5.5em;


		}

		#about-container img{
			width: 100%;
		}
		
		

		
		#project-page h3 {
   			font-size: 2em;
   			color: #B1B1B2;
   			padding-bottom: 1.5em;
   			clear: both;
   			padding-top: 2.5em;

    	}
    	
    	#four_columns_more_work h3 {
   			font-size: 2.7em;
   			color: #ffffff;
   			margin-top: -.3em;
    	}
	
 		
 		#portfolio section {
    		padding-bottom: 3em;
    		margin-top: -1.5em;
    		
    	}

    	.projects li {
  			display: block;
  			width: 50%;
  			float: left;

		}
    	



		
		.project-colophon .with-margin {
			margin: 0 8.3%;
		}

		#colophon {
			padding-bottom: 2.5em;
			padding-top: 4em;
			
		}
		
		
 		#arrows p {
			font-size: 300%;
			margin: 0 10%;
			padding: 5px;

		}
		
		#back {
			width:60px;
			position:fixed;
			top: 24em;
			left: -1%;
			z-index:2;
		}	
	
		#next {
			width:60px;
			position:fixed;
			top: 24em;
			z-index:2;
			right: -1%;
		}
	
		.with-margin {
			margin-top: 0;
		}
	
		.last-no-padding p {
			padding-bottom: 0;
		}
		

		
		#four_columns_more_work .wrapper {
			padding: .5em;
		}
		
		#four_columns_more_work {
			padding-top: 1.7em;
			padding-bottom: 0em;
			margin: 1em 7.2% auto 7.2%;
		
		}



		

		
		.under_gallery {
			height: 2em;
		
		}
		
		#sm_nav img {
			max-width: 30px;
			max-height: 30px;
			float: none;
			display: inline;
			vertical-align: middle;
			

		}
		
		
		#sm_nav a {
			width: 100%;
	   		text-align: center;
	   		float: none;
		}
		
		#sm_nav a:hover {
			background-color: #000000;
		}
		
		#nav nav {
			background: ;
			float: right;
			width: 25em;
			margin-right: -1.5em;
		}
		
		#project-page .single-module {
		padding-bottom: 1em;
		}
		


		.module {
			padding-bottom: 3em;
		}
		



		#remove_module_gap .module{
			margin-top: 4em;
		}

		.two_columns_mobile figure {
			width: 50%;
			float: left;
		}

		.two_columns_mobile_v2 figure {
			width: 50%;
			float: left;
		}

		.blurb p {
			font-size: 1.3em;
		}

		#about-container h3{
			color:#1E1E23;
		}

		.single-caption {
			font-size: 1.1em;
			color: #B1B1B2;
			padding-bottom: 3.5em;
			max-width: 550px;
			margin: auto;



		}

		.two-column-caption {
			padding-top: 1em; 
			padding-bottom: 1em;
			font-size: 1.1em;
			color: #B1B1B2;
		}



		#reel_breakdown p {

			text-align: left;
			font-size: .9em;
		}

		#hide {
			display: none;
		}

		.hide {
			display: none;
		}



		#two_columns figure {
			max-width: 50%;
			display: block;
			
		}

		#third_columns_mobile_1 figure {
			max-width: 33.3%;
			display: block;
		}

		







}
/* ******************************************
	Media Queries for screen wider than 720px
****************************************** */
@media screen and (min-width: 45em){


		#reel {
			margin-top: 0;
		}

		#reel-bg {
		border-bottom: 1px;
		padding-top: 2em;
		padding-bottom: 3em;

		}

		.two_columns_mobile figure {
			width: 25%;
			float: left;
		}



		
		#about #container-content{
			margin-top: -10em;
			
		} 

		


				
		#about_picture img {
			width: 14em;
		}
				
		

		
		#sans_logo p {
			margin-top: 2.2em;
		}	

		
		
	

		#container-nav #nav {
			margin: 0 8.3%;
		}
				
		#container-nav {
			background: #000000;
		}
		
		.modules-container {
		display: block;
		margin: 0 8%;
		}
		




		#home {
			position: relative;
			width: 3.5em;
			clear:both;
			display: block;
			padding: 0;
			margin: 0;
			
		}
		
		#home figure a{
			padding: 0;
			margin: 0;
		}
	
		#home img {
			width: 100%;
			clear: both;
			padding: 0;
			margin: 0;
			position: absolute;
			margin-top: 1.3em;
		}
		
		

		.no-margins .with-margin {
			margin: 0;
		}

		.no-margins {
			margin: 0;
			overflow: auto;
			padding-top: 0;
			clear: both;
			height: auto;
		}
		
		
		.pad p{
			margin-top: 0;
		}
		
		p {
			font-size: 120%;
			margin: 0 4%;
		}	

			
		
		#content h3 {
   			font-size: 2em;
   			color: #B1B1B2;
   			margin-top: 0;

    	}

    	#about-container h3{
    		font-size: 3em;
   			margin-top: .7em;
   			color:#1E1E23;
    	}

    	#reel-container h3{
    		font-size: 3em;
   			margin-top: .7em;
   			color:#1E1E23;
    	}
    	



    	#contact h3 {
			color: #B1B1B2;		
		}




    	#contact {
			margin-top: -2em;		
		}
    	    	
		
		#portfolio {
    		margin: 0;
    	}
		
	
		
		#about p {
			padding: 0 1.2em 0 0;
			font-size: 1em;
		}


		#three_column article {
			max-width: 33.3%;
			float: left;
		}
	
		#four_columns div {
			max-width: 25%;
			float: left;
		}
		
		#five_columns div {
			max-width: 20%;
			float: left;
		}
		
		#four_columns_more_work article {
			max-width: 33.3%;
			float: left;
		}
		
		#four_columns_more_work  {
			margin: 1em 7.6% 0 7.6%;
			padding-top: 1.5em;
			padding-bottom: .5em;
		
		}
			
		#portfolio .wrapper {
			padding: .6em;
   	 		-webkit-box-sizing: border-box;
   			-moz-box-sizing: border-box;
   			 box-sizing: border-box;
   			 margin-top:0;
		}

		#portfolio .module {
			float: left;
			width: 50%;
			padding: 1em;
		}
		
		#three_column .module {
			float: left;
			width: 33.3%;
			padding: .8em;
		}


		
		.description {
			float: left;
			position: inherit;
			display: block;
		}
		
		#portfolio_image .with-margin {
 			margin: 0 auto 1em auto;
 		}
 		
		.thin figure {
			width: 55%;
			margin: 0 auto;
		}
		
		.single-logo img {
			width: 80%;
			margin: 0 auto;
		}
		
		.single-module p {
			margin: 0 8%;
		}

		
		.module {
   	 		padding: 0;
   	 		-webkit-box-sizing: border-box;
   	 		-moz-box-sizing: border-box;
   	 		box-sizing: border-box;
		}
		
		.module p {
			padding-bottom: .1em;
		}
		
	

		 
		#portfolio section {
    		padding-bottom: 5em;
    		overflow: auto;
    	}

    	#some_work h3 {
			margin-top: -4.5em;
			padding-top: 1em;
			padding-bottom: 2em;
			font-size: 3em;

		}



		

		
		#arrows p {
			font-size: 400%;
			margin: 0 10%;
			padding: 5px;
		}
		
		#back {
			width:60px;
			position:fixed;
			top: 17em;
			left: -1%;
			z-index:2;
		}
	
		#next {
			width:60px;
			position:fixed;
			top: 17em;
			z-index:2;
			right: -1%;
		}
		
		.with-margin{
			margin-top: 0;
			
		}	
		

		
		#project-page .with-margin {
			margin: 0 auto;
			max-width: 75em;
		
		}

		.projects li {
  			display: block;
  			max-width: 33.3%;
  			float: left;

		}


		.blurb p {
			margin-top: -2em;
			padding-bottom: 2em;
		}

		#project-page h3 {
   			font-size: 2.7em;
   			margin: 0 auto;
   			margin-top: -.4em;
   			max-width: 15em;
   			padding-bottom: 1.2em;

    	}


    	.single-caption {
    		padding-top: .5em;
			font-size: 1.3em;
			padding-bottom: 3em;
			max-width: 550px;
			margin: auto;


		}

		.two-column-caption {
			font-size: 1.3em;
		}



		#hide {
			display: inline;
		}

		.hide {
			display: inline;
		}

		#hide_desktop_br {
			display: none;		
		}









		

		
		
/*
 1. Remove padding from one-column layout style.
*/
    
	    #nav {
	        padding: 0; 
	    }

	    #nav label {
	        display: none;
	    }
		
	    #nav nav {
	        height: auto;
	        overflow: visible;
	        float: right;
	        margin-top: 2.1em;
	    }
		
	    #nav ul {
	        border: 0;
	        margin: 0;
	        padding-bottom: 1.7em;
	        
	    }
			
		#nav li {
		    display: inline;
		    border: 0; 
		    
		}
		
		#nav a {
		    display: inline;
		    clear: both;
		}

		.name, .email {
			float: left;
			width: 50%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
    
		.name {
		 	padding-right: .6em;
			    }
    
		.email {
			padding-left: .6em;
		}
    
		.send {
			width: 50%;
			float: right;
			clear: both;
		}
		
		
		#about_me_header h3{
			margin-top: 1em;
			padding-bottom: .2em;
			font-size: 3em;
		
		}

		#tgb {
			
			padding-bottom: 3em;
		}

		#tgb figure {
			float: left;
			width: 50%;

		}



		.vert img {
			max-width: 35em;
			margin: 0 auto ;
		}

		.portrait img {
			max-width: 37em;
			margin: 0 auto ;
		}

		.vert .figure {
			max-width: 25em;
			margin: 0 auto ;
		}


		.square .figure {
			max-width: 50em;
			margin: 0 auto ;
		}

		.single-caption {
			padding-bottom: 3.5em;
			max-width: 	28em;
			margin: auto;
			
		}

		#three_columns_mobile_1 figure {
			max-width: 33%;
			display: block;
		}


		#two_columns figure {
			max-width: 50%;
			display: block;
			
		}









		
		

}

/* ******************************************
		Media Queries for screen wider than 60em (960px)
	****************************************** */
	
@media (min-width: 65em) {

	

	#reel-bg {
		padding-top: 1em;
	}

	#reel-bg .figure{
			padding-bottom: 6em;
		}


	#about #container-content{
			margin-top: -6.5em;
			
		} 
		
	

	.reel_video {
		margin-top: 4.8em;	
	}

		#about_me p {
			padding-bottom: 6em;
		}
		
		#about_me #portfolio {
			margin-top: -6em;
		}




	#work li:hover img {
		-webkit-filter: grayscale(100%);
		filter: grayscale(100%);
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
	}




	

	#about {
		margin-top: 10em;
	}


	#container-about {
		padding-top: 4.8em;
		background: #B1B1B2;
	}

	.modules-container .module {
		float: left;
		position: inherit;
	}
	
	.modules-container {
		display: block;
		margin: 0 auto;
	}
	
	p {
		font-size: 120%;
		margin: 0 15%;
	}
	
	#copyright p {
		margin: 0;
	}
		
	
	#portfolio .wrapper {
		padding: 1em;
   	 	-webkit-box-sizing: border-box;
   		-moz-box-sizing: border-box;
   		 box-sizing: border-box;
   		 margin-top:0;

	}
	
	#portfolio .module {
			padding: 1.5em;
	}

	#portfolio section {
    		padding-bottom: 2.5em;
    		
    	}

	#some_work h3 {
			margin-top: -3.5em;
			padding-bottom: 1.9em;
			font-size: 3em;

	}
	
	.single-module p {
		margin: 0 8%;
		display: block;
		max-width: 20em;
		margin-top: 1.4em;
		text-align: center;
	}
	

	
	.single-module p {
		margin-top: 0;	
		max-width: 35em;
	}
	
	.single-logo img {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 0;
	}
		
	.single-logo p {
		padding-bottom: 2.4em;
	}
	
	#project-page .single-module {
		padding-bottom: 1em;

	}
	
	

    .projects li {
  			display: block;
  			width: 33.3%;
  			float: left;
		}
		
	#project-page h3 {
   		font-size: 3.2em;
   		margin-top: -.2em;
		padding-bottom: 1.2em;
    }


    #project-page {
		clear: both;
		margin-top: -2em;
	}
	


    
	
	.name, .email {
	    padding-right: 1.3em;
	    padding-left: 0;
	    clear: both;
	 }
	 
	.anti-spam {
		width: 50%;
		float: right;
	}
    
	.message textarea {
	    width: 50%;
	 }
	
	.send {
	    width: 50%;
	    margin-left: 50%;
	    clear: both;
	    }
	    
	 /* Form Fixes, IE7 and below */
	.ie .message textarea {
    	*width: 49.9%;
    }

	.ie .send {
    	*margin-left: 46.7%;
    }
	

	#content,
	#contact,
	#portfolio .margin {
		margin: 0 auto;
		width: 100%;
	}
	
		
	#project-page .with-margin {
		
		margin: 0 auto;
		padding: 0 10%;
	}
		
	.with-margin {
		max-width: 75em;
		margin: 0 auto;
		padding: 0 10%;
	}
	
	#container-nav {
		margin: 0 auto;
		padding: 0;
		width: 100%;
		max-width: 90em;
		background: #000000;
	}
	
	#project-page #content,
	#project-page #contact,
	#project-page #portfolio .margin {
		margin: 0;
		width: 100%;

	}

	#portfolio_image .with-margin {
		margin: 0 10%;

	}
	
	#four_columns_more_work .wrapper {
		padding: .5em;
	}
		
	#four_columns_more_work {
		max-width: 63.5em;
		padding: 5.5em 6em 0em 6em;
		margin: 6em auto 0 auto;	
	
	}
	
	#four_columns_more_work h3 {
		padding-top: 1em;
		font-size: 3em;		
	}

		
	.modules-container {
		margin: 0 -2.4%;
	}
		
	.no-padding p {
		overflow: auto;
		padding-bottom: 0;
	}
	

	
	#project-page .for-index{
		margin-top: 1em;
	}
	

	




		 
	#arrows p{
		font-size: 500%;
		margin: 0 90%;
		padding: 5px;
	}
		
	#back {
		width:60px;
		position:fixed;
		top: 22em;
		left: -1%;
		z-index:2;
	}
	
	#next {
		width:60px;
		position:fixed;
		top: 22em;
		z-index:2;
		right: -1%;
	}
		
	



	
				
	#two_columns .wrapper {
		padding: 1em;
   	 	-webkit-box-sizing: border-box;
   		-moz-box-sizing: border-box;
   		 box-sizing: border-box;
   		 margin-top:0; 
	}

	#three_columns_mobile_1 .wrapper {
		padding: 1em;
   	 	-webkit-box-sizing: border-box;
   		-moz-box-sizing: border-box;
   		 box-sizing: border-box;
   		 margin-top:0; 
	}

	#two_columns {
		display: block;
		clear: both;
		margin: 0 auto;
		margin-left: -.3em;
	}

	#three_columns_mobile_1 {
		display: block;
		clear: both;
		margin: 0 auto;
		margin-left: -.3em;


	}

	#two_columns figure {
		width: 50%;
		float: left;
	}


	


		

	#about-container, #reel-container {
		
		padding-bottom: 1.5em;
		display: block;
		clear: both;

	}
    
    #about-container h3 {
    	font-size: 4em;
		padding-bottom: .5em;
		padding-top: .5em;
    
    }

    #reel-container h3 {
    	font-size: 4em;
		padding-bottom: .5em;
		padding-top: .5em;
    
    }

    #about-container p {
		max-width: 30em;
		margin: 0 auto;

	}

    #about-container .with-margin, #reel-container .with-margin{
		margin: auto;
		clear: both;
		display: block;
		
		
	}

	#about-container{
    	max-width: 70em;
    	display: block;
    	margin: 0 auto;
    	margin-top: -4.5em;

    }

    #reel-container{
    	display: block;	
    	margin-top: -4.5em;

    }

	#about-container .single-module{
		margin: auto;
		display: block;
		clear: both;
	}


	#contact h3 {

		font-size: 3em;
		color:#B1B1B2;
	
	}

	#contact {
		margin-top: 4em;		
	}

	#tgb {
		max-width: 60em;
		display: block;
		margin: 0 auto;
		
	}

	#reel-bg .with-margin{
		margin: 0 auto;
		max-width: 75em;
		display: block;
		clear: both;
	}

	#reel-bg .with-margin .figure{
		margin: auto;
		max-width: 75em;
		display: block;
		clear: both;
	}

	.blurb p {
		padding-bottom: 2em;
		max-width: 31em;
		margin: 0 auto;
		margin-top: -2.5em;
	}

	.single-caption {
		margin-top: -.5em;
		padding-bottom: 5em;
		max-width: 32em;
		margin: auto;
	}








	


}

/* ******************************************
		Media Queries for screen wider inbetween 65-110? for when stuff looks weird )
	****************************************** */
@media (min-width: 85em) {





		.two_columns_mobile figure {
			width: 25%;
			float: left;
		}

		.two_columns_mobile_v2 figure {
			width: 50%;
			float: left;
		}

		.two_columns_mobile_v2 {
			max-width: 50em;
			margin: 0 auto;
		}

	}

/* ******************************************
		Media Queries for screen wider than 110em )
	****************************************** */
	
	@media (min-width: 110em) {

		#about-container h3 {
    		font-size: 4em;
			padding-bottom: .4em;
			padding-top: 1em; 

    	}

    	#reel-container h3 {
    		font-size: 4em;
			padding-bottom: .4em;
			padding-top: 1em; 

    	}


    	#portfolio section {
    		padding-bottom: 4.7em;	
    	}

    	
    	#contact h3 {
			font-size: 3em;
			color:#B1B1B2;
		}

		#contact {
			margin-top: 1.5em;		
		}

		#arrows p{
			font-size: 500%;
			margin: 0 200%;
			padding: 5px;
		}

		.two_columns_mobile figure {
			width: 25%;
			float: left;
		}

		.two_columns_mobile_v2 figure {
			width: 50%;
			float: left;
		}

		.two_columns_mobile_v2 {
			max-width: 50em;
			margin: 0 auto;
		}



		#project-page h3 {
   			font-size: 3.5em;
			padding-bottom: 1em;
    	}
    		.blurb p {
			margin-top: -2.5em;
			padding-bottom: 2em;
		}



	}









/* ******************************************
		Print Styles
****************************************** */	
@media print and (max-width: 8.5in){
		
		img {
			width:2in;
		}
		
		#portfolio	{
			float:left;
			width:45%;
		}
		
		#resume	{
			float:right;
			width:45%;
		}
		
		#container-footer	{
			clear:both;
		}

}
	
@media print and (color) {
    
    	* {
      	-webkit-print-color-adjust: exact;
		}
}	

/* ******************************************
    IE 8 and below, legacy browser style fixes
****************************************** */
	
	/* Float Clearing http://nicolasgallagher.com/micro-clearfix-hack */

	.group:after {
    	content: " "; /* 1 */
    	display: table; /* 2 */
    	clear: both;
	}

	.group {
   		*zoom: 1; /* 3 */
    }
/* Figures/Images */

.ie #portfolio figure {
    width: 100%;
    box-sizing: border-box;
    }

/* "*" hack applies only to IE7 and below */

.ie #portfolio figure {
    *width: auto;
}
   
/* Navigation */

/* IE8 .checked class for checkbox.js */

#nav input[type=checkbox].checked ~ nav {
    height: auto;
    overflow: visible;  
}

/* Always show nav, IE7 and below */

.ie #nav nav {
    *height: auto;
    *overflow: visible;  
}

/* Hide navicon, IE7 and below */

.ie #nav label { 
    *background: none;
    }
     
/* 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://nadiaswebsite.com/");
}