/*
 * Keyframes
 */
.josheb-policarpio-social-media{
	font-family: 'OpenSansRegular';
    padding:0px;
    margin:0px;
    position:fixed;
    right:-130px;
    top:230px;
    width:210px;
    z-index: 1100;
}
.josheb-policarpio-social-media-fixed li{
    list-style-type:none;
    background-color:#fff;
    color:#efefef;
    height:43px;
    padding:0px;
    margin:0px 0px 1px 0px;
    -webkit-transition:all 0.25s ease-in-out;
    -moz-transition:all 0.25s ease-in-out;
    -o-transition:all 0.25s ease-in-out;
    transition:all 0.25s ease-in-out;
    cursor:pointer;
}
.josheb-policarpio-social-media-fixed li:hover{
    margin-left:-115px;
}
.josheb-policarpio-social-media-fixed li img{
    float:left;
    margin:5px 4px;
    margin-right:5px;
}
.josheb-policarpio-social-media-fixed li p{
    padding-top:5px;
    margin:0px;
    line-height:16px;
    font-size:11px;
}
.josheb-policarpio-social-media-fixed li p a{
    text-decoration:none;
    color:#2C3539;
}
.josheb-policarpio-social-media-fixed li p a:hover{
    text-decoration:underline;
}



@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

}




/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  /** Basic styles for an animated element */
  .scene_element {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  /** An element that fades in */
  .scene_element--fadein {
    animation-name: fadeIn;
  }

  /** An element that fades in and slides up */
  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  /** An element that fades in and slides from the right */
  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }
}
}








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



@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('../fonts/OpenSans-LightItalic-webfont.eot');
    src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansItalic';
    src: url('../fonts/OpenSans-Italic-webfont.eot');
    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansBoldItalic';
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'OpenSansBold';
    src: url('../fonts/OpenSans-Bold-webfont.eot');
    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('../fonts/OpenSans-LightItalic-webfont.eot');
    src: url('../fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('../fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'oswaldlight';
    src: url('../fonts/oswald-light-webfont.eot');
    src: url('../fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-light-webfont.woff2') format('woff2'),
         url('../fonts/oswald-light-webfont.woff') format('woff'),
         url('../fonts/oswald-light-webfont.ttf') format('truetype'),
         url('../fonts/oswald-light-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'oswaldregular';
    src: url('../fonts/oswald-regular-webfont.eot');
    src: url('../fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oswald-regular-webfont.woff2') format('woff2'),
         url('../fonts/oswald-regular-webfont.woff') format('woff'),
         url('../fonts/oswald-regular-webfont.ttf') format('truetype'),
         url('../fonts/oswald-regular-webfont.svg#oswaldlight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'NewsCycleRegular';
    src: url('../fonts/NewsCycle-Regular-webfont.eot');
    src: url('../fonts/NewsCycle-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/NewsCycle-Regular-webfont.woff') format('woff'),
         url('../fonts/NewsCycle-Regular-webfont.ttf') format('truetype'),
         url('../fonts/NewsCycle-Regular-webfont.svg#NewsCycleRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html{
   overflow-y: scroll;

}
html, body { 
   height: 100%;
}

#header, #header_sticky ::selection {
  background: #F79420; /* WebKit/Blink Browsers */
    color: #fff;

}
#header #header_sticky ::-moz-selection {
  background: #F79420; /* Gecko Browsers */
  color: #fff;
}



#wrap ::selection {
        	background: rgba(255,255, 255, 1.00);

    color: #333;

}
#wrap ::-moz-selection {
  background: #fff; /* Gecko Browsers */
  color: #333;
}



body{
	background-color: #f7f7f7;
	padding: 0;
	margin: 0;
	height: 100%;
}


#header {
    float: left;
    margin: 0;
    position:absolute;
    width: 100%;
    background-color: #f7f7f7;
    z-index: +1;
}


#header_sticky {
    float: left;
    margin: 0;
    position:fixed;
    width: 100%;
    background-color: #f7f7f7;
    z-index: +1;
}


#header-logo{
	float: left;
}

#header-logo img{
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}



#contact_me{
	margin-top: 72px;
	width:401px;
	float: right;
	text-align: right;
}


.contact_me_text{
	width:188px;
	font: normal 30px oswaldlight;
	text-decoration: none;
	color: #F79420;
	float: right;
	margin-top: -33px;
	margin-right: 30px;
	background-image: url(../assets/contact_icon.png);
	background-repeat: no-repeat;
	background-position: left center;

}


.contact_me_text img{
	margin-right: 9px;
}


.contact_me_text:hover{
	color: #cccccc;
	background-image: url(../assets/contact_icon_over.png);
	background-repeat: no-repeat;
	background-position: left center;
}






.resume_mobile{
	display: none;
}

.pdf_portfolio_mobile{
		display: none;

}

.contact_me_mobile{
		display: none;

}


	
	
	
	
	
/*CONTACT ME POPUP*/



#light img{
	margin-right: 5px;
}

#light fieldset{
	padding: 0;	
	border: none;
}

#name, #message, #buttons{
	border: none;

}

#email{
	width:230px;	
	
	padding-left: 130px;
}

.name_p{
	float: left;
	width: 46%;
	font: normal 12px OpenSansBold;
	color: #888;
	letter-spacing: .2em;
}

.email_p{
	
	margin-left: 52%;
	width: 46%;
		font: normal 12px OpenSansBold;
	color: #888;
	letter-spacing: .2em;
}

#message p{
	font: normal 12px OpenSansBold;
	color: #888;
	letter-spacing: .2em;
}

#name input, #email input{
	background: #E6E7E8;
	border: none;
	padding: 10px;
	width: 98%;
	font: 12px OpenSansItalic;
	color: #888;
}



#message textarea{
	background: #E6E7E8;
	border: none;
	padding: 10px;
	width: 97%;
	font: 12px OpenSansItalic;
	color: #888;
}




.get_in_touch{
	font: normal 17px NewsCycleRegular;
	color:#CCC;
	margin-top: -20px;
	padding-left: 13px;
	padding-right: 10px;
}

#light fieldset p{
	font: normal 12px OpenSansBold;
	color: #888;
	letter-spacing: .2em;
}



.contacth1{
	font: normal 32px oswaldlight;
	color:#F79420;	
	letter-spacing: 0em;
		padding-left: 13px;
	padding-right: 10px;
}

.contacth1 img{
	margin-right: 10px;
}

#message{
	margin-top: -20px;
}
#buttons{
	margin-top: -20px;
}

#buttons input{
	background: #F79420;	
	border: none;
	width: 100%;
	padding: 8px;
	font: normal 14px OpenSansBold;
	letter-spacing: .2em;
	color: #ffffff;
}

#buttons input:hover{
	background: #f9a141;	
	cursor: pointer;
}


.close_window{
	font: normal 14px OpenSansItalic;
	color: #888;
	margin: 0;
	text-align: right;
	text-decoration: none;
}

#light a{
	text-decoration: none;	
}

#light a:hover{
	text-decoration: underline;	
	color: #888;
}

.tools_header_mobile{
	display: none;
}

.tools_used_mobile{
	display: none;
}

	.tools_h1_mobile{
		margin: 30px 0px 0px 0px;
	}
    	
 	.tools_used_mobile{
		width: 100%;
		color: #ffffff;
		line-height: 2em;
		padding: 0;
	}


	.tools_used_mobile_left{
		float: left;
		width: 47%;
	}
	
	.tools_used_mobile_single{
		width: 47%;
	}
	
	.tools_used_mobile_right{
		width: 50%;
		margin-left: 55%;
	}

	.tools_used_mobile p{
		font: normal 11px OpenSansRegular;
		color: #ffffff;
		line-height: 2em;
		list-style: none;
		margin: 0;
				letter-spacing: .09em;

	}







.download_resume{
	width: 127px;
	font: normal 10px OpenSansRegular;
	text-align: right;
	text-decoration: none;
	color: #F79420;
	letter-spacing: 0.1em;
	float: right;
	margin: 0px 230px 0px 0px;
	background-image: url(../assets/download_icon.png);
	background-repeat: no-repeat;
	background-position: left center;

}

.download_resume:hover{
	color: #cccccc;
	background-image: url(../assets/download_icon_over.png);
	background-repeat: no-repeat;
	background-position: left center;
}





.download_pdf_portfolio{
	width: 170px;;
	font: normal 10px OpenSansRegular;
	text-decoration: none;
	color: #F79420;
	letter-spacing: 0.1em;
	float: right;	
	margin: 0px 230px 0px 0px;
	background-image: url(../assets/download_icon.png);
	background-repeat: no-repeat;
	background-position: left center;
}


.download_pdf_portfolio:hover{
	color: #cccccc;
	background-image: url(../assets/download_icon_over.png);
	background-repeat: no-repeat;
	background-position: left center;
}




.download_resume img, .download_pdf_portfolio img{

	margin-right: 2px;
}



.original_image_text{
	color: #fff;
	font: normal 10px OpenSansRegular;
	letter-spacing: .2em;
}





/*NEW CSS*//




#navigation {
	text-align: center;
	margin-top: 80px;
	float: left;
	height: 100%;	
}

#navigation ul{
	list-style-type:none;
/*	margin: 0; 
	padding: 0;
	position: absolute;*/
	float: left;
	margin-top: 79px;
	padding: 0 0 0 2%;
	width: 57%;
}



#design_strategy, #print, #web, #motion, #audio, #imaging, #fineart{
		display:inline-block;
		margin-right: 1px;
	  	text-decoration:none;
	  	font: normal 13.85px OpenSansRegular;
	  	letter-spacing:0.2em;
	 	margin-right: 4%;
	  	float: middle;
}

#design_strategy, #print, #web, #motion, #audio, #imaging, #fineart, a{
		text-decoration:none;
	    color: #555658;
		cursor: pointer;

}

/*These are the mobile resume, pdf, and contact buttons. Currently set to display: hidden*/

#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile {
		display:none;
		margin-right: 1px;
	  	text-decoration:none;
	  	font: normal 13.85px OpenSansRegular;
	  	letter-spacing:0.2em;
	 	margin-right: 4%;
	  	float: middle;
}

#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile, a{
		text-decoration:none;
	    color: #555658;
		cursor: pointer;

}

/*
#header ul li a:hover{
	cursor: pointer;
	color: #F79420;
	border-bottom: solid 3px;
	padding-bottom: 3px;

 	-webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
*/
#header ul li a:hover{
	cursor: pointer;
	color: #F79420;


 	-webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

#header_sticky ul li a:hover{
	cursor: pointer;
	color: #F79420;


 	-webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}


/*
#header_sticky ul li{
	display:inline-block;
	margin-right: 1px;
	  text-decoration:none;
	  font: normal 13.85px OpenSansRegular;
	  letter-spacing:0.2em;
	  margin-right: 4%;
	  float: middle;
}

#header_sticky ul li a{
	  text-decoration:none;
	  	  color: #555658;
cursor: pointer;

}



#header_sticky ul li a:hover{
	cursor: pointer;
	color: #F79420;


 	-webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
*/


#wholefoods_three_images{
}

#wholefoods_three_images .left_image, #wholefoods_three_images .right_image{
	width:32.5%;

}

#wholefoods_three_images .left_image{
	margin-right: 6px;

}

#wholefoods_three_images .right_image{
	margin-right: 0px;
}

.selector {
	color: #F79420;

}

.selector a:hover{
	color: #ccc;
		
}


.menuselector{

}




/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font: normal 13.5px OpenSansBoldItalic;
	text-decoration: none;
	color: #fff;
	background: #F79420;
	text-align: center;
	padding: 10px 0;
	display: none;
	letter-spacing:0.2em;
}






/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}






	#wrap {
      overflow: hidden;
      padding-top: 175px;
 	  background-color: #323232;
    }
    
    #wrap_full {
      overflow: hidden;
      padding-top: 175px;
 	  background-color: #323232;
 	  height: 80%;
    }
    
    .box {
      float: left;
      position: relative;
      width: 33.33%;
      padding-bottom: 18.7%;
      font: normal 12px OpenSansRegular;
    }
    .boxInner {
      position: absolute;

      overflow: hidden;
    }
    
    .boxInner img {
      width: 100%;
    }
       .boxInner_audio {
        position: absolute;

      overflow: hidden;
       
       }
    .boxInner_audio img{ width:100%;}
    
    .boxInner .titleBox {
    	width: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #333;
      opacity: 0.0;
      background: rgba(0, 0, 0, 0.0);
      color: #FFFFFF;
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }
    
    
    .boxInner .titleBox .project_title{
    	font: normal 32px oswaldlight;
    	letter-spacing: .1em;
		margin-top: 21%;
		margin-bottom: 0;
		transition:all .2s ease-in-out;
		      text-align: center;
		
    }
    
    .boxInner a{
    	text-decoration: none;
    }
    
    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox .titleBox p{
        background: #333;
      	opacity: 0.95;
      	background: rgba(0,0, 0, 0.85);
  		-webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  		-webkit-transition-duration: 500ms;
  		-webkit-transition-timing-function: ease-out;
 
  		/* Webkit for Mozila Firefox */
  		-moz-transform: scale(1.2, 1.2);
  		-moz-transition-duration: 500ms;
  		-moz-transition-timing-function: ease-out;
 
 		 /* Webkit for IE( Version: 11, 10 ) */
  		-ms-transform: scale(1.20, 1.20);
  		-ms-transition-duration: 500ms;
  		-ms-transition-timing-function: ease-out;

    }
    
    
   .boxInner .titleBox  .project_category{
       	font: normal 12px OpenSansBold;
       	margin-top: -3px;
       	letter-spacing: .1em;
    	text-align: center;
    }
    
    
    .boxInner .titleBox .thumbnail_button{
    	font: normal 12px OpenSansRegular;
    	border: solid 1px;
    	letter-spacing: .2em;
    	margin-left: 900px;
    	width: 20%;
		margin: 0px;

    }
    
    
    
    













/*FOOTER*/

#footer{
	  background-color: #f7f7f7;
	width: 100%;
}

#footer p{
	font: normal 11px OpenSansRegular;
	color:	#C0C0C0 ; 
	text-align: center;
	letter-spacing: .1em;
	padding: 30px 0px 30px 0px;
	float:bottom;
	border-top: dotted 1px #ccc;
	margin-top:0px;
}







h1{
	font: normal 28px oswaldlight;
	color: #ffffff;
	letter-spacing: .05em
}


.project_title{
	font: normal 33px oswaldlight;
	color: #ffffff;
	letter-spacing: .05em;
	text-decoration:none;
}



h3{
	font: normal 13px OpenSansSemibold;
	color: #ffffff;
	margin: 25px 0px -12px 0px;
	letter-spacing: .1em;
}

.back_category{
	font: normal 11px OpenSansLightItalic;
			color: #ffffff;
	margin-top: -20px;
}

.back_category a{
	text-decoration: none;
		color: #fff;

}

.back_category a:hover{
	text-decoration: underline;
		color: #fff;

}

.back_category a:visited{
	color: #fff;
}


#project_column1{
	width: 20%;
	padding: 20px 40px 0px 35px;
	text-align: right;
	position: fixed;
}

.project_text{
	font: normal 13px NewsCycleRegular;
	color: #ffffff;
	line-height: 2em;
	letter-spacing: .08em;
}


.tools_used{
	
	color: #ffffff;
	line-height: 2em;
	padding: 0;
}



.tools_used li{
	font: normal 11px OpenSansRegular;
	color: #ffffff;
	line-height: 2em;
	letter-spacing: .1em;
	list-style: none;
}

		 video {
            max-width: 100%;
            height: auto;
            	margin-bottom: 15px;

          }

          iframe,
          embed,
          object {
            max-width: 100%;
            
          }

          .container {
          float: left;
            width: 45%;
            padding-top: 40px;
            /*margin:0px auto;*/
        	margin-left: 25%;
          }
          
#project_images{
	max-width: 800px;
	float: left;
	vertical-align: text-middle;
	padding: 35px;
}


.container img{
	width: 100%; 
	min-width: 200px;
	margin-bottom: 15px;
	margin-top: 0;
}
 .container_smaller {
          float: left;
            width: 45%;
            padding-top: 40px;
        	margin-left: 29%;
          }
          
.container_smaller img{
	width: 80%; 
	min-width: 200px;
	margin-bottom: 15px;
	margin-top: 0;
}

#project_images iframe{
	margin-bottom: 15px;
}

          .vendor {
            background: #fff;
            margin-bottom: 2em;
          }

          .unsupported {
            background: #fddfde;
          }
          
          
          
          
#project_column3{
	width: 20%;
	margin-left: 71%;
	padding: 20px;
	position: fixed;	
}







.button{
	border: solid 1px #ffffff;
	
}



#button_div a{
	text-decoration: none;
	
}

#button_text{
	font: normal 10px OpenSansRegular;
	color:  #ffffff;
	letter-spacing: .4em;
	border:solid 2px;
	text-align: center;
	margin-top: 40px;
	padding: 10px 0px 10px 0px;
	text-decoration: none;
	 -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
         -o-transition-duration: .2s;
            transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}

#button_text:hover{
		background-color: #606060;
}



#button_text a{
	text-decoration: none;
	border: solid 1px;
}
#button_text a:hover{
	text-decoratIon: none;
	background-color: #606060;
}

#button_text a:visited{
	text-decoration: none;
	color:#ffffff;
}





 
          
          

/*
#project_column2{
	 width: 30%;
	float: left;
	vertical-align: text-middle;
	padding: 35px;
	border: solid 1px;
		width: 50%;

}

*/



/*
		 video {
            max-width: 100%;
            height: auto;
          }

          iframe,
          embed,
          object {
            max-width: 100%;
          }

          .container {
            width: 50%;
            padding: 5%;
            margin:0px auto;
            background:#fff;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
          }
          
          
         #project_column2 {
            width: 30%;
            padding: 5%;
            margin:0px auto;
            background:#fff;
            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	}
          
          
         .vendor {
            background: #d1eed1;
            margin-bottom: 2em;
          }

          .unsupported {
            background: #fddfde;
          }
    
    
    
    

#project_column2 img{

	max-width: 800px; 
	min-width: 200px;
	margin-bottom: 15px;
}
*/
/*
#project_column2 iframe{
	margin-bottom: 15px;
}
*/


#next_prev_buttons{
	float: left;
	font: normal 10px OpenSansItalic;
	color: #ffffff;
	padding-top: 25px;
	width: 100%;
}


#next_prev_buttons a{
	text-decoration: none;
	color: #ffffff;
}

#next_prev_buttons a:hover{
	text-decoration: underline;
	color: #ffffff;
}

#next_prev_buttons a:visited{
	color: #ffffff;
}







#next_prev_buttons_mobile{
	display: none;
}









.next_project{ float: right;}


@media screen and (max-width : 1530px){
.boxInner .titleBox .project_title{
    		font: normal 26px oswaldlight;
    	}
}
@media screen and (max-width : 1188px){
.boxInner .titleBox .project_title{
    		font: normal 22px oswaldlight;
    	}
}


/*These are the media queries for the navigation menu*/

@media screen and (max-width : 1069px){


#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile {
		display:none;
		margin-right: 1px;
	  	text-decoration:none;
	  	letter-spacing:0.2em;
	 	margin-right: 4%;
	  	float: middle;
}

#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile, a{
		text-decoration:none;
	    color: #555658;
		cursor: pointer;

}


	/*Make dropdown links appear inline*/
	
	.boxInner .titleBox .project_title{
    		font: normal 18px oswaldlight;
    	}
    	
    	
      .boxInner .titleBox  .project_category{
       	font: normal 12px OpenSansRegular;
       	margin-top: -3px;
       	letter-spacing: .1em;
    	text-align: center;
    }
    
    
body{
}

	#header {
    margin: 0;
    position:absolute;
    width: 100%;
    height: 180px;
    background-color: #f7f7f7;
    z-index: +1;
    
}


#header ul li{

	  font: normal 12px OpenSansBold;

}



	#header_sticky {
    margin: 0;
    width: 100%;
    height: 180px;
    background-color: #f7f7f7;
    z-index: +1;
    
}

	#navigation{
		margin-top: 200px;
		padding: 0px;
		
	}
	
	#navigation ul {
		display: none;
		margin: 0;

	}
	/*Create vertical spacing*/
	#navigation li {
		border-bottom: solid 1px;
		color: #ffffff;
		text-align: center;
		margin-left: -2%;
		
	}
	
	#navigation ul li a{
			display:block;
			height: 26px;
			padding-top: 10px;
			color: #ffffff;
			background: #cccccc;
	}
	

	#navigation ul li a:hover,#navigation ul li a:active{
				display:block;
			color: #333;
			background: #cccccc;
			border-bottom: none;
	}
	
	
	
	
	
	
	
	.selector{
	display:block;
			height: 26px;
			padding-top: 10px;
			color: #333;
			background: #cccccc;
	}

	.selector p{
		

	}

	
	




	
	


	
	/*
	
	
	.resume_mobile {
	display:block;
			height: 26px;
			padding-top: 10px;
			color: #ffffff;
			background: #cccccc;
			font-size: 11px;
		margin: 0;		
		margin-left: -2%;
		border-bottom: 1px;

}
	.pdf_portfolio_mobile {
	display:block;
			height: 26px;
			padding-top: 10px;
			color: #ffffff;
			background: #cccccc;
			font-size: 11px;
		margin-left: -2%;
		
		color: #fff;
		border-bottom: solid 1px;
}

	.contact_me_mobile {
	display:block;
			height: 26px;
			padding-top: 10px;
			color: #ffffff;
			background: #cccccc;
			font-size: 11px;
		margin-left: -2%;
		color: #fff;
}
*/

	
	/*Make all menu links full width*/
	#navigation ul li, li a {
		width: 100%;
		
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
		cursor: pointer;
		
	}
	
	.show-menu:active{
background-color: #E07710;
			display:block;
		cursor: pointer;
	}
	
	#contact_me{
	}
	
	
	
	.selector{
	}

	.selector p{
			display:block;
			margin: 0;
			vertical-align: center;
			color: #fff;

	}

	
		.selector p:hover{
			color: #8d8d8d;
			border: solid 1px;
	}
	
	
	
	

	
}








@media only screen and (max-width : 1886px) and (min-width : 1051px) {
		#design_strategy, #print, #web, #motion, #audio, #imaging, #fineart{
			display:inline-block;
			margin-right: 1px;
	 		text-decoration:none;
	  		letter-spacing:0.2em;
	  		margin-right: 3%;
	  		float: middle;
	  		
		}
		
		



	

}

@media only screen and (max-width : 1814px) and (min-width : 1051px) {
    	#wrap_full {
      overflow: hidden;
      padding-top: 205px;
 	  background-color: #323232;
 	  height: 80%;
  	  }
    
		#navigation {

		text-align: center;
		margin-top: 0px;
		vertical-align: text-middle;
		float: left;
		width:100%;
		}
		
		#navigation ul {
			padding-bottom: 13px;
			width: 100%;
			margin: 0;
		}
		
		#navigation ul li{
	  		margin-right: 4%;
		}
		
		#navigation ul li a {
		}	
	
		
		#wrap {
      		overflow: hidden;
    		padding-top: 206px;

    }
}

/*This is the marker*/
@media only screen and (max-width : 1050px) {

   	
   	#wrap_full {
      overflow: hidden;
      padding-top: 207px;
 	  background-color: #323232;
 	  padding-bottom:110%;
 	  height: 80%;
  	  }
  	  
  	  
		#navigation {
		text-align: center;
		margin-top: 0px;
		vertical-align: text-middle;
		float: left;
		width:100%;
		}
		
		#navigation ul {
			padding-bottom: 13px;
			width: 100%;
			margin: 0;
		}
		
		#navigation ul li a {
		}	
	
		#contact_me{
			width:401px;
			float: right;
			text-align: right;
		}
		
		
		#wrap {
      		overflow: hidden;
    		padding-top: 206px;
    	}
    }
    



@media only screen and (max-width : 809px) {
	   	/*These are the mobile resume, pdf, and contact buttons. Currently set to display: hidden*/

#header_sticky {
    position:absolute;
}

	#design_strategy, #print, #web, #motion, #audio, #imaging, #fineart{
	  	font: normal 12px OpenSansBold;
		}
		
#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile {
		display:block;
		margin-right: 1px;
	  	text-decoration:none;
	  	font: normal 12px OpenSansBold;
	  	letter-spacing:0.2em;
	 	margin-right: 4%;
	  	float: middle;
	  	margin-bottom: 0;
	  	height: 36px;

}



#resume_mobile, #pdf_portfolio_mobile, #contact_me_mobile, a{
		text-decoration:block;
	    color: #555658;
		cursor: pointer;
	  	margin-bottom: 0px;

}
    	
	.tools_h1_mobile{
		display: block;
		margin: 30px 0px 0px 0px;
	}
    	
 	.tools_used_mobile{
	 	display: block;
		width: 100%;
		color: #ffffff;
		line-height: 2em;
		padding: 0;
	}


	.tools_used_mobile_left{
		float: left;
		width: 47%;
	}
	
	.tools_used_mobile_single{
		width: 47%;
	}
	
	.tools_used_mobile_right{
		width: 50%;
		margin-left: 55%;
	}

	.tools_used_mobile p{
		display: block;
		font: normal 11px OpenSansRegular;
		color: #ffffff;
		line-height: 2em;
		list-style: none;
		margin: 0;
		letter-spacing: .09em;
	}
	
	
	  #wrap{
	  	      padding-top: 182px;
	  }
	   	
     .white_content {
        display: none;
        position: fixed;
        top: 20%;
        left: 35%;
        width: 27%;
        padding: 25px;
        background-color: white;
        z-index:1002;
        overflow: auto;
		
    }
    .original_image_text{
    	margin-left: 12px;
    }
    
    
#wholefoods_three_images{
}

#wholefoods_three_images .left_image, #wholefoods_three_images .right_image{
	width:100%;
}

#wholefoods_three_images .left_image{
	margin-right: 0px;

}

#wholefoods_three_images .right_image{
	margin-right: 0px;
}
/*

          .container {
          float: left;
            width: 45%;
            padding-top: 40px;
        	margin-left: 25%;
          }
          
#project_images{
	max-width: 800px;
	float: left;
	vertical-align: text-middle;
	padding: 35px;
}


.container img{
	width: 100%; 
	min-width: 200px;
	margin-bottom: 15px;
	margin-top: 0;
}

 .container_smaller {
          float: left;
            width: 45%;
            padding-top: 40px;
        	margin-left: 29%;
          }
          
.container_smaller img{
	width: 80%; 
	min-width: 200px;
	margin-bottom: 15px;
	margin-top: 0;
}

	.container{
			width: 100%;
			margin: 0;
			margin-top -20px;
		}
*/

 .container_smaller {
         	width: 100%;
			margin: 0;
			margin-top -20px;
}
          
    .container_smaller img{
	width: 100%; 
	min-width: 200px;
	margin-bottom: 15px;
	margin-top: 0;
}




    .resume_mobile, .pdf_portfolio_mobile, .contact_me_mobile  {
	display:block;
			border-bottom: solid 1px;
		color: #ffffff;
		text-align: center;
				margin: 0px 0px 0px 0px;
			font: normal 13px OpenSansRegular;
				letter-spacing:0.2em;

}

	.resume_mobile a, .pdf_portfolio_mobile a, 	.contact_me_mobile a{
			display:block;
			height: 26px;
			padding-top: 10px;
			color: #ffffff;
			background: #cccccc;
			font-size: 11px;	
			text-decoration: none;
		margin-left: -2%;
		width: 100%;
	}
	
	.resume_mobile a:hover, .pdf_portfolio_mobile a:hover, 	.contact_me_mobile a:hover,
	.resume_mobile a:active, .pdf_portfolio_mobile a:active, 	.contact_me_mobile a:active{
			display:block;
			color: #333;
			background: #cccccc;
			font-size: 11px;
			border-bottom: none;
					 -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
         -o-transition-duration: .2s;
            transition-duration: .2s;
    -webkit-transition-timing-function: ease-out;
       -moz-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
	}
	
    	#header-logo{
			float: none;
			padding: 0px 0px 0px 0px;
			width: 100%;
		}
		
		#header-logo img{
			display: block;
   			 margin-left: auto;
   			 margin-right: auto;
   			 padding: 10px 0px 0px 0px;
   			 width:270px;
		}
		
		
		#project_column1{
				position: relative;
			text-align: center;
			width: 100%;
			margin: 0;
			padding: 0px 0px 0px 0px;
		}
		.project_h3_align_right{
			display:none;
		}
		.tools_used{
			display: none;
		}
		
		.container{
			width: 100%;
			margin: 0;
			margin-top -20px;
		}
		
		#project_column3{
			position: relative;
			padding: 0px 0px 0px 0px;
			margin: auto; 
			width: 80%;
		}
		
		
			/*Display 'show menu' link*/
	.show-menu {
		display:block;
		cursor: pointer;
		margin-top: 23px;
		
	}		
	
	#contact_me{
		display: none;
			float: right;
			text-align: right;
			border: solid 1px;
		}
		
		

	
	#next_prev_buttons{
	display: none;
	}
	
	
	#next_prev_buttons_mobile{
	font: normal 12px OpenSansItalic;
	color: #ffffff;
	width: 90%;
	margin: 0 auto;
	display: block;
	padding-left: 3%;
	padding-right: 3%;
	}



	#next_prev_buttons_mobile a{
	text-decoration: none;
	color: #ffffff;
	}

	#next_prev_buttons_mobile a:active{
	text-decoration: underline;
	color: #ffffff;
	}

	#next_prev_buttons_mobile a:visited{
	color: #ffffff;
	}
	
	
	#button_text{

	margin-bottom: 40px;
	padding: 10px 0px 10px 0px;


	#button_text:active{
		background-color: #606060;
	}
	
}



/*These are the media queries for the project thumbnails.*/
    
    @media only screen and (max-width : 480px) {
      /* Smartphone view: 1 tile */
      .box {
        width: 100%;
        padding-bottom: 56%;
      }
      
      
      
      
      
    }
    @media only screen and (max-width : 650px) and (min-width : 481px) {
      /* Tablet view: 2 tiles */
      .box {
        width: 100%;
        padding-bottom: 56%;
      }
      
      
    }
    @media only screen and (max-width : 1050px) and (min-width : 651px) {
      /* Small desktop / ipad view: 3 tiles */
      .box {
        width: 50%;
        padding-bottom: 28%;
      }
	  
	 
    }
    @media only screen and (max-width : 1290px) and (min-width : 1051px) {
      /* Medium desktop: 4 tiles */
      .box {
        width: 50%;
        padding-bottom: 28%;
      }
	  
	
    }







/*These are the media queries for the popup contact form*/


@media only screen and (max-width : 1262px) {
      /* Smartphone view: 1 tile */
 .white_content {
        display: none;
        position: absolute;
        top: 22%;
        left: 20%;
        width: 57%;
        padding: 25px;
        background-color: white;
        z-index:1002;
		
    }
}


@media only screen and (max-width : 590px) {
      /* Smartphone view: 1 tile */
 .white_content {
        display: none;
        position: absolute;
        top: 5%;
        left: 12%;
        width: 63%;
        padding: 25px;
        background-color: white;
        z-index:1002;
		
    }
    
    .name_p{
	float: none;
	width: 93%;
}

.email_p{
	
	margin-left: 0;
	width: 93%;
}
#name input, #email input{
	background: #E6E7E8;
	border: none;
	padding: 10px;
	width: 100%;
	font: 12px OpenSansItalic;
	color: #888;
}


#message textarea{
	background: #E6E7E8;
	border: none;
	padding: 10px;
	width: 93%;
	font: 12px OpenSansItalic;
	color: #888;
}



}