body {
	width: 100%;
    height: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #292c2d;
}
html {
    width: 100%;
    height: 100%;
}

/* nav */
.navbar {
	padding: 20px 0;
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-ms-transition: background .5s ease-in-out,padding .5s ease-in-out;
	-o-transition: background .5s ease-in-out,padding .5s ease-in-out;
	transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.navbar-default {
	background-color: #292c2d;
}
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
	color: #eee;
    font-size: 1.4em;
    /*line-height: 1.1em;*/
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}
.navbar-default .navbar-nav>li>a {
	color: #eee;
	letter-spacing:1px;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.navbar-default .navbar-nav>li>a:focus {
	color: #eee;
}
.navbar-default .navbar-nav>li>a:hover {
	color: #02bfbd;
}
.navbar-default .navbar-nav>.active>a {
	background-color: #292c2d;
	color: #eee;
}
.navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
	background-color: #292c2d;
	color: #02bfbd;
}
.nav-email:after {
	position: absolute;
	overflow: hidden;
	max-width: 0;
	width: 80px;
	left: 65px;
    top: 17px;
	white-space: nowrap;
	content: attr(data-hover);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 1s;
}
.nav-email:hover:after {
	max-width: 100%;
	width: 80px;
}
.navbar-nav {
	float: right;
}
.nav>li>a {
	padding: 15px 30px;
}
.top-nav-collapse {
	padding: 0;
}
.navbar-fixed-bottom, .navbar-fixed-top {
	z-index:99;
}
.navbar .container {
	display: block; 
	width:90%;
}

.navbar-default .navbar-nav>li>a[data-hover="Work"] + .sub  {

	position: absolute;
    width: 250px;
    background-color: #292c2d;
    left: 0px;

    padding: 20px 30px;
    transform: scale(1,0);
    transform-origin: 0 0;
    transition: transform .14s 0s ease-in-out; 
    height: 0;
    
}	
.navbar .sub ul {
	margin: 0;
	padding: 0;
}
.navbar .sub li {
	font-size: .9em;
	list-style: none;
	padding: 10px 0;
	opacity: 0;
    -webkit-transition: opacity .05s 0s ease-in-out;
    -moz-transition: opacity .05s 0s ease-in-out;
    -ms-transition: opacity .05s 0s ease-in-out;
    -o-transition: opacity .05s 0s ease-in-out;
    transition: opacity .05s 0s ease-in-out;

}
.navbar .sub a, .navbar a, .navbar a:visited, .navbar a:active, .navbar a:focus {
	color: #ffffff;
}
.navbar .sub a:hover, .navbar a:hover {
	color: #02bfbd;
}
.navbar-default .navbar-nav>li>a[data-hover="Work"]:hover + .sub, .navbar-default .navbar-nav>li>a[data-hover="Work"] + div.sub:hover {
	
	transform: scale(1,1);
    height: auto;
}
.navbar-default .navbar-nav>li>a[data-hover="Work"]:hover + .sub li, .navbar-default .navbar-nav>li>a[data-hover="Work"] + div.sub:hover li{
    opacity: 1;
    -webkit-transition: opacity .14s .14s ease-in-out;
    -moz-transition: opacity .14s .14s ease-in-out;
    -ms-transition: opacity .14s .14s ease-in-out;
    -o-transition: opacity .14s .14s ease-in-out;
    transition: opacity .14s .14s ease-in-out;
}
a, a:visited, a:active, a:focus {
	color:#333;
	text-decoration: none;
}
a:hover {
	color: #02bfbd;
	text-decoration:none;
}
h1 {
	font-family: 'Lato', sans-serif;
	font-size: 1.3em;
    font-weight: 400;
    margin: 20px 0 40px 0px;
    text-transform: uppercase;
}
h2.subhead {
	font-size: 1.1em;
	font-weight: 400;

}
section {
    width: 100%;
}
.container {

}
.hidden {
	display: none;
}

/* about */
.about-section {
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 150px 0 75px;
}
.about-content {
	max-width: 830px;
	margin: 0 auto;
	text-align: left;
}
.about-text { 
	padding-bottom: 25px;
	font-size: 1.1em;
}
.about-icons .section {
	position: relative;
	padding: 30px 0;	
}
.about-icons .title {
	float: left;
	padding-right: 15px;
	font-size: 1.1em;
    text-transform: uppercase;
    font-weight: 400;
}
	.skills .skill { 
		display: inline-block;
		height: 32px;
		margin: 0 12px;
		background-size: 100%;
		background-repeat: no-repeat;
		/*-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;*/
	}
	.skills .skill img {
		width: 100%;
	}

	.skills .skill:after{
		position: absolute;
		top: 30px;
		white-space: nowrap;
		opacity: 0;
		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		transition: all .6s ease-in-out;
	}
	/*.skills .skill:hover:after {
		top: 80px;
		color: #8c84b6;
		opacity: 1;	
	}*/
	.skills .skill:nth-of-type(2) {
		width: 30px;
		background-image: url(../images/skill_html5_icon.png);
		background-size: 60px;
	}
	/*.skills .skill:nth-of-type(1):hover {
		background-position: -30px 0;	
	}*/
	.skills .skill:nth-of-type(2):after {
		content: "HTML5";
	}
	.skills .skill:nth-of-type(3) {
		width: 35px;
		background-image: url(../images/skill_css3_icon.png);
		background-size: 71px;
	}
	/*.skills .skill:nth-of-type(2):hover {
		background-position: -36px 0px;
	}	*/
	.skills .skill:nth-of-type(3):after {
		content: "CSS3";
	}
	.skills .skill:nth-of-type(4)  {
		width: 33px;
		background-image: url(../images/skill_js_icon.png);
		background-size: 66px;
	}
	/*.skills .skill:nth-of-type(3):hover {
		background-position: -33px 0;
	}*/
	.skills .skill:nth-of-type(4):after{
		content: "Javascript";
	}
	.skills .skill:nth-of-type(5)  {
		width: 32px;
		background-image: url(../images/skill_jquery_icon.png);
		background-size: 65px;
	}
	/*.skills .skill:nth-of-type(4):hover {
		background-position: -32px 0;
	}*/
	.skills .skill:nth-of-type(5):after {
		content: "jQuery";
	}
	.skills .skill:nth-of-type(1) {
		width: 32px;
		background-image: url(../images/skill_adobe_icon.png);
		background-size: 65px;
	}
	/*.skills .skill:nth-of-type(5):hover {
		background-position: -33px 0px;
	}*/
	.skills .skill:nth-of-type(1):after {
		content: "Adobe Creative Suite";
	}

	.background .background-icon {
		position: relative;
		margin: 12px;
		white-space: nowrap;
	}
	.background .background-icon i {
		font-size: 1.8em;
	}
	.background .background-icon:after{
		position: absolute;
		top: 0px;
		left: 0;
		opacity: 0;
		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;	
		transition: all .6s ease-in-out;	
	}
	/*.background .background-icon:hover:after {
		top: 35px;
		color: #8c84b6;
		opacity: 1;	
	}*/
	.background .background-icon:nth-of-type(1):after {
		content:"BA in Fine Arts";
	}
	.background .background-icon:nth-of-type(2):after {
		content:"MFA in Digital Arts";
	}
	.background .background-icon:nth-of-type(3):after {
		content:"Web Design";
	}
	.background .background-icon:nth-of-type(4):after {
		content:"Web Development";
	}
	

.about-icons .section {
		padding: 10px 0;
		display: inline-block;
	    width: 45%;
	    vertical-align: top;
	    min-width: 225px;
	}
	.about-icons .title  {
		float: none;
		margin-bottom: 20px;
	}
	.skills .skill {
		display: block;
		margin: 0 0 20px 0;
	}
	.skills	.skill:after {
		display: inline-block;
		position: relative;
		top: 8px;
		left: 55px;
		opacity: 1;	
	}
	.skills .skill:hover:after {
		top: 8px;
	}
	.background .background-icon {
		display: block;
		margin: 0 0 20px 0;
	}
	.background .background-icon:after {
		position: absolute;
		top: 5px;
		left: 55px;
		opacity: 1;
	}
	.background .background-icon:hover:after {
		top: 5px;
	}


.resume-section {
	position: relative;
	padding: 30px 0;
}
	.resume .resume-title {
		float: left;
		padding-right: 30px;
		font-size: 1.33em;
	}
	.resume .fa-stack {
		top: 0;
		margin-left: 0;
	}
	.resume .resume-download {
		position: relative;
	}
	.resume .resume-download:after {
		content: "Download resume";
		position: absolute;
		top: 0px;
		left: 5px;
		opacity: 0;
		white-space: nowrap;
		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		transition: all .6s ease-in-out;
	}
	.resume .resume-download:hover:after {
		top: 40px;
		color: #8c84b6;
		opacity: 1;	
	}

/* work */
.work-section {
 	background: #f9f7f7;
    text-align: center; 
	padding: 75px 0; 
	border-bottom: 1px solid #ddd;
}
.work-content{
	margin: 0 auto;
	max-width: 830px;
	text-align: left;
}
.work-content p {
	/*font-size: 1.1em;*/
}
.work-type {
	padding: 0 0 50px 0;
}

	
.work-text {
	padding-bottom: 50px;
	/*font-size: 1.1em;*/
}

/* current projects */

.project-listing {
	padding: 20px 0;
}

.project-row:first-child {
	border-top: 1px solid #ddd;
}

.project-row {
	padding: 30px 0;
    border-bottom: 1px solid #ddd;
}
.project-row .project-name {
	padding-bottom: 10px;
	font-weight: 400;
}
.project-row .project-text {
	padding-bottom: 10px;
	
}
.project-row .project-links {
	
}
.project-row .p-link {
	
}

.fa-github {padding-left: 10px;}
.project-area-past, .project-area-design { 
	max-width: 830px;
	margin: 0 auto;
	text-align: center;
}
/* these are for ferrara projects. change the parent div .project-area to .project-area-past */
.project-area-past .project-holder {
	position: relative;
	display:inline-block;
	width:270px;
	height: 135px;
	margin-top: -3px;
	margin-left: 0px;
	background-size: 270px;
	background-repeat: no-repeat;
	cursor: pointer;
}
	.project-area-past .project-holder div{
		position: absolute;
		width: 270px;
		height: 135px;
		overflow: hidden;	
	}
	.project-area-past .project-holder .text { 
		opacity: 1;
		background-color: rgba(0,0,0,.7); 
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.project-area-past .project-holder .text:hover {
		opacity: 1;
	}
	.project-area-past .project-holder .text img { 
		width: 100%; 
	}
	.project-area-past .project-holder .project-thumb .product img{
		width: 270px;
		position: relative;
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-ms-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
	}
	.project-area-past .project-holder .project-thumb:hover .product img {
		transform: scale(1.1) rotate(0.0001deg);	
		-ms-transform: scale(1.1) rotate(0.0001deg);
	}
/*  This is for design projects. change the parent div to .project-area to project-area-design */
	.project-area-design .project-holder {
	position: relative;
	display:inline-block;
	width:270px;
	height: 270px;
	margin-top: -3px;
	margin-left: 0px;
	background-size: 270px;
	background-repeat: no-repeat;
	cursor: pointer;
}
	.project-area-design .project-holder .project-desc{
		position: absolute;
		background: #000000;/*#02bfbd;*/
    	width: 270px;
    	height: 270px;
    	color: #02bfbd;
    	padding: 110px 30px 10px 30px; /*absolute vertically center positioning*/
	}
	.project-area-design .project-holder .project-thumb{
		position: absolute;
		width: 270px;
		height: 270px;
		overflow: hidden;
		border: 1px solid #d7d7d7;	
	}
	.project-area-design .project-holder .text { 
		opacity: 1;
		background-color: rgba(0,0,0,.7); 
		-webkit-transition: all .5s ease-in-out;
		-moz-transition: all .5s ease-in-out;
		-ms-transition: all .5s ease-in-out;
		-o-transition: all .5s ease-in-out;
		transition: all .5s ease-in-out;
	}
	.project-area-design, .project-holder .text:hover {
		opacity: 1;
	}
	.project-area-design .project-holder .text img { 
		width: 100%; 
	}
	.project-area-design .project-holder .project-thumb .product img{
		width: 268px;
		position: relative;
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-ms-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out;
	}
	.project-area-design .project-holder .project-thumb:hover .product img {
		opacity: 0.1;
		transform: scale(1.1) rotate(0.0001deg);	
		-ms-transform: scale(1.1) rotate(0.0001deg);
	}
	.project-area-design .project-holder .project-thumb:hover  {
		/*background: #000000;*/
	}
	
	
	
#pop { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background-color: rgba(0,0,0,.8); 
	z-index: 100; 
}
#pop p { 
	margin-right: 20px;
	color: #fff; 
	font-size: 12px; 
	text-align: right; 
}
#pop img { 
	max-width: 940px; 
}
#detail { 
	position: relative; 
	top: 50%; 
	width: 100%; 
	height: 550px; 
	margin: -275px auto 0; 
	padding: 0px; 
	background-color: #fff; 
	box-shadow: 0 0 20px rgba(0,0,0,0.4); 
	z-index: 100; 
}
	#detail ul { 
		margin: 0; 
	}
	#detail ul > li { 
		display: table; 
		position: absolute; 
		left: 0;
		right: 0;
		height: 550px;  
		margin: 0 auto; 
		list-style: none;  
	}
.detail-nav { 
	position: absolute; 
	bottom: 65px; 
	width:110px;
	z-index: 110; 	 
}
.detail-nav a { 
	display: block;
	position: absolute; 
	outline: none; 
	text-align: left; 
	-webkit-transform: translateY(-50%); 
	-ms-transform: translateY(-50%);
	transform: translateY(-50%); 
}
.detail-holder {
	width: 100%;
	max-width: 920px;
	height: 550px;
	margin: 0 auto;
	position: relative;
}
.detail-item {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: 920px;
	padding: 0 10px;
}
.detail-left { 
	float: left;
	width: 30%;
	padding: 100px 20px 0 10px;
	text-align: left;
}
.detail-right { 
	float: left;
	width: 70%;
	padding-right:10px;
}
.detail-right img {
	width: 100%;
}
.detail-title {
	font-size: 1.3em;
	line-height: 1.3em;
	font-weight: 400;
	padding-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.detail-close {
	position: absolute;
	top: 15px;
	right: 5px;
	cursor: pointer;
	z-index: 50;
}
.nav-fillpath a {
	width: 50px;
	height: 50px;
}

.nav-fillpath .icon-wrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.nav-fillpath a::before, .nav-fillpath a::after, .nav-fillpath .icon-wrap::before, .nav-fillpath .icon-wrap::after {
	position: absolute;
	left: 50%;
	width: 4px;
	height: 50%;
	background: #292c2d;
	content: '';
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius:4px;
}
.nav-fillpath .icon-wrap::before, .nav-fillpath .icon-wrap::after {
	z-index: 100;
	height: 0;
	background: #02bfbd;
	-webkit-transition: height 0.3s, -webkit-transform 0.3s;
	transition: height 0.3s, transform 0.3s;
	border-radius:4px;
}
.nav-fillpath a::before, .nav-fillpath .icon-wrap::before {
	top: 50%;
	-webkit-transform: translateX(-50%) rotate(-135deg);
	transform: translateX(-50%) rotate(-135deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
.nav-fillpath a.next::before, .nav-fillpath a.next .icon-wrap::before {
	-webkit-transform: translateX(-50%) rotate(135deg);
	transform: translateX(-50%) rotate(135deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}
.nav-fillpath a::after, .nav-fillpath .icon-wrap::after {
	top: 50%;
	-webkit-transform: translateX(-50%) rotate(-45deg);
	transform: translateX(-50%) rotate(-45deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}
.nav-fillpath a.next::after, .nav-fillpath a.next .icon-wrap::after {
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
	-webkit-transform-origin: 100% 0%;
	transform-origin: 100% 0%;
}
.nav-fillpath h3 {
	position: absolute;
	top: 50%;
	margin: 0;
	color: #ccc;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 0.85em;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
	left: 100%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
	right: 100%;
	text-align: right;
	-webkit-transform: translateY(-50%) translateX(50%);
	transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before, .nav-fillpath a:hover .icon-wrap::after {
	height: 50%;
}
.nav-fillpath a:hover::before, .nav-fillpath a:hover .icon-wrap::before {
	-webkit-transform: translateX(-50%) rotate(-125deg);
	transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before, .nav-fillpath a.next:hover .icon-wrap::before {
	-webkit-transform: translateX(-50%) rotate(125deg);
	transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after, .nav-fillpath a:hover .icon-wrap::after {
	-webkit-transform: translateX(-50%) rotate(-55deg);
	transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after, .nav-fillpath a.next:hover .icon-wrap::after {
	-webkit-transform: translateX(-50%) rotate(55deg);
	transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
	opacity: 1;
	-webkit-transform: translateY(-50%) translateX(0);
	transform: translateY(-50%) translateX(0);
}
.next { 
	right: 10px; 
}
.prev { 
	left: 0px; 
}	
.hide-this {
	display:none;
}	
.noscroll { 
	overflow: hidden; 
}

.ele div.x {
	-webkit-transition-duration: 0.5s;
  	transition-duration: 0.5s;
}
.ele div.x.slow {
	-webkit-transition-duration: 1s;
  	transition-duration: 1s;
}
.ele { 
	width: 25%;
	display: inline; 
}
.x {
  float: left;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #292c2d;
  border-radius: 2px;
  transition: all .3s ease-out;
  cursor: pointer;
}
.x.medium {
  width: 20px;
  height: 20px;
}
.x.flop:hover {
  background: #02bfbd;
  transform: rotate(90deg);
}
.x b {
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
}
.x.medium b {
  border: solid 10px rgba(255,255,255,0);
}
.x b:nth-child(1) {
  border-top-color: #FFF;
  top: -2px;
}
.x b:nth-child(2) {
  border-left-color: #FFF;
  left: -2px;
}
.x b:nth-child(3) {
  border-bottom-color: #FFF;
  bottom: -2px;
}
.x b:nth-child(4) {
  border-right-color: #FFF;
  right: -2px;
}

.contact-section {
	padding: 10px 0;
    background: #fff;
	text-align: center;
	background: #f9f7f7;
}
.contact-content {
	margin: 0 auto; 
}
	.contact-content .icon-area{
		font-size: 1em;
		padding-top: 10px;
	}
	.contact-content .fa-stack {
		top: -6px;
		margin-left: 10px;
	}
.resume-section {
	background: #ffffff;
	padding: 75px 0;
    border-bottom: 1px solid #ddd;
}
.resume-section .resume-area {
	max-width: 830px;
	margin: 0 auto;
}

.resume-section .resume-content {

	background: #f9f7f7;
	border: 1px solid #ddd;
	padding: 50px 30px;
	box-sizing: border-box;

}
.resume-content h1 {
	font-size: 1.3em;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}

.resume-content h2 {
	font-size: 1em;
	text-transform: uppercase;
	margin: 0 0 10px 0;
}
.resume-content .resume-block {
	padding: 15px 0;
	
}
.resume-content .intro {
	font-size: .9em;
}
.resume-content ul {
	margin: 0;
    padding: 0 0 0 0px;
}
.resume-content li {
    list-style: none;
}
.resume-content li.r-skill {
	display: inline-block;
	padding-right: 15px;
}
.resume-content ul.r-skills, .resume-content ul.r-skills-row {
	font-size: .9em;
	}
.resume-content .r-highlight {
	padding: 5px 0;
	clear: both;
}
.resume-content li.r-history {
	padding: 12px 0;
	font-size: .9em;
}
.resume-content li.r-history:first-child {
	padding-top:6px;
}
.resume-content li.r-history:last-child {
	padding-bottom: 6px;
}
.resume-content li.r-history span.title {
	font-weight: 400;
	padding-right: 12px;
}
.resume-content li.r-history .name {
	float: left;
}
.resume-content li.r-history .date {
	float: right;
}

.resume-download-area {
	padding-top: 30px;
}

/* secondary */
body.work {
	font-size: 16px;
}
body.work section {
	
}


.bold {
	font-weight:400;
}

/* Detail page */

.detail-page #detail-digital.head-section {
	border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 150px 0 75px;
}

.detail-page #detail-marketing.head-section {
	border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 75px 0 75px;
    background: #f9f7f7;
}

.detail-page .detail-section {
    text-align: center;
    padding: 75px 0;
    border-bottom: 1px solid #ddd;
}
.detail-page .detail-section:nth-child(odd){
	background: #f9f7f7;
	}

	.detail-page .detail-section:nth-child(odd) .dp-image{
	float: left;
	}

	.detail-page .detail-section:nth-child(odd) .dp-text{
		padding: 0 10px 0 20px;
	}

.detail-page .dp-image {
    display: inline-block;
    vertical-align: top;
}

.detail-page .dp_addedImage {
	max-width: 250px;
	vertical-align: top;
	display: inline-block;
}

.detail-page video:focus {
	outline: none;
}

.detail-page .dp-image .frame{
	position: absolute;
	width: inherit;
}

.detail-page .dp-image img{
	width: 100%;
}

.detail-page .dp-text {
	display: inline-block;
	padding: 0 10px 0 0px;
	vertical-align: top;
}

.detail-page h2.subhead {
	margin: 0 0 20px 0;
}

.detail-page .pre-text {
	display: inline;
	font-style: italic;
}

.detail-page .work-text {
	display: inline;
	font-size: 1em;
	padding-bottom: 0;
}

.detail-page .dp-image-block {
	padding: 20px 0;
}

.detail-page .dp-image-row {
	padding: 2px 0;
}

.detail-page .dp-image-marketing {
    display: inline-block;
    vertical-align: top;
}

.detail-page .dp-image-marketing img{
	width: 100%;
}

.detail-page .width-twoThird{
	width: 66.5%;
}

.detail-page .width-third{
	width: 33%;
}

.detail-page .width-half{
	width: 49.5%;
}


@media(max-width:767px) {
	body {
		font-size: 16px;
	}
	.navbar {
		min-height: 50px;
    	margin-bottom: 20px;
		padding: 0;
        -webkit-transition: none;
        -moz-transition: none;
		-o-transition: none;
        transition: none;
    }
	.navbar .container {
		width:98%	
	}
	.navbar-default {
		border: none;
	}
	.navbar-default .navbar-nav>.active>a {
		background-color: #292c2d;
		color: #eee;	
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		width: 50%;
	    position: absolute;
	    background-color: #292c2d;
	    right: 0;
	    text-align: left;
	    border-color: transparent;
	    margin: 0;
	    min-width: 275px;
	    padding: 0 20px;
	    /*min-height: 450px;*/
	}
	.navbar-nav {
		float: none;
	}
	.navbar-default .navbar-toggle {
    	border-color: transparent;
	}
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    	background-color: transparent;
	}
	.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover {
		font-size: 1.5em;
		line-height: .8em;
	}
	.nav>li>a {
		padding: 15px 31px ;
	}
	a[data-hover="Work"] i {
		margin-right: -8px; 
	}
	.navbar-default .navbar-nav>li>a[data-hover="Work"] + .sub {
    display: block;
    position: relative;
    width: 100%;
    padding: 0px 10px 0px 40px;
    height: auto;
    transform: scale(1, 1);
}
	.navbar .sub li {
		opacity: 1;
	}
	li a.nav-email {
		/*display: none;*/
	}
	.container {
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.about-section {
		padding: 75px 0 15px 0px;
	}
	.about-section .container {
		width:100%;
	}
	.about-content {
    	width: 100%;
		margin-left: 0px;
	}
	/*.about-icons .section {
		padding: 10px 0;
		display: inline-block;
	    width: 45%;
	    vertical-align: top;
	    min-width: 225px;
	}
	.about-icons .title  {
		float: none;
		margin-bottom: 20px;
	}
	.skills .skill {
		display: block;
		margin: 0 0 20px 0;
	}
	.skills	.skill:after {
		display: inline-block;
		position: relative;
		top: 8px;
		left: 60px;
		opacity: 1;	
	}
	.skills .skill:hover:after {
		top: 8px;
	}
	.background .background-icon {
		display: block;
		margin: 0 0 20px 0;
	}
	.background .background-icon:after {
		position: absolute;
		top: 5px;
		left: 60px;
		opacity: 1;
	}
	.background .background-icon:hover:after {
		top: 5px;
	}
	*/
	.resume-section {
		padding: 45px 0; 
	}
	.resume .resume-section .fa-stack {
		margin-left: 0;
	}
	.resume-content li.r-history span.title {
		display: block;
	}
	.resume-content li.r-history .name {
		float: none;
	}
.resume-content li.r-history .date {
		float: none;
	}
	.resume .resume-download:after {
		position: relative;
		top:-2px;
		left: 15px;
		opacity:1;
	}
	.resume .resume-download:hover:after {
		top: -2px;
	}
	.work-section {
		padding: 45px 0;
	}
	.work-text {
    padding-bottom: 20px;
}

	.project-area {
		text-align: center;
		padding: 30px 0 ;
	}
	.project-holder { 
		margin-left: 0px; 
	}
	#detail {
		top:0;
		height:100%;
		margin:0 auto;
	}
	#detail ul {
    	padding: 30px 0 0 0;
	}
	#detail ul > li {
		position: relative;
	}
	.detail-holder {
		height:100%;
	}
	.detail-item {
		max-width: 627px;
		padding: 10px 20px 0;
	}
	.detail-left {
		display: block;
		width: inherit;
		padding:0 0 0 20px;
	}
	.detail-text { 
		padding: 0 0 20px 0;
	}
	.detail-title { 
		padding: 0 0 10px 0; 
	}
	.detail-right {
		display: block;
		width: inherit;
		padding: 0;
	}
	.detail-nav { 
		/*display: none; */
	}
	.detail-close { 
		right: 5px; 
	}

	.detail-page .dp-image {
		width: 100%;
	    display: block;
	}

	.detail-page .dp-text {
		display: block;
		width: 100%;
		padding: 20px 0;
	}
	
	.detail-page .detail-section {
		padding: 25px 0;
	}

	.detail-page .dp-image-marketing {
		width: 100%;
		display: block;
		padding: 5px 20px;
	}
}

/* Animations */

.moveLeft {
	-webkit-animation: slide 1s forwards;
	-moz-animation: slide 1s forwards;
	-ms-animation: slide 1s forwards;
	-o-animation: slide 1s forwards;
	animation: slide 1s forwards;
}
@-webkit-keyframes slide { 
    from { -webkit-transform: translateX(100px); }
    to {	 -webkit-transform: translateX(0px); }
}
@-moz-keyframes slide { 
	from { -moz-transform: translateX(100px); }
	to { -moz-transform: translateX(0px); }
}
@-ms-keyframes slide { 
	from { -ms-transform: translateX(100px); }
	to { -ms-transform: translateX(0px); }
}
@-o-keyframes slide { 
	from { -o-transform: translateX(100px);  }
	to { -o-transform: translateX(0px); }
}
@keyframes slide { 
	from { transform: translateX(100px); }
	to { transform: translateX(0px); }
}
.moveRight {
	-webkit-animation: slide2 1s forwards;
	-moz-animation: slide2 1s forwards;
	-ms-animation: slide2 1s forwards;
	-o-animation: slide2 1s forwards;
	animation: slide2 1s forwards;
}
@-webkit-keyframes slide2 { 
    from { transform: translateX(-100px); }
    to {	 transform: translateX(0px); }
}
@-moz-keyframes slide2 { 
	from { -moz-transform: translateX(-100px); }
	to { -moz-transform: translateX(0px); }
}
@-ms-keyframes slide2 { 
	from { -ms-transform: translateX(-100px); }
	to { -ms-transform: translateX(0px); }
}
@-o-keyframes slide2 { 
	from { -o-transform: translateX(-100px);  }
	to { -o-transform: translateX(0px); }
}
@keyframes slide2 { 
	from { transform: translateX(-100px); }
	to { transform: translateX(0px); }
}

/*@-webkit-keyframes projectOut { 
    from {
		opacity:1;
		transform:  scale(1, 1);	
    }
    to {	
		opacity:.75;
 		transform:  scale(0.9, 0.9);
    }
}*/