/* CSS Reset --------------------- */
html, body, div, span, img, h1, h2, h3, h4, h5, h6, p, a,
blockquote, pre, code, iframe, dl, dt, dd, ol, ul, li,
em, small, big, strike, strong, sub, sup, b, u, i, center,
fieldset, form, label, legend, table, tbody, tfoot, tr, th, td,
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, details,
time, mark, audio, video, canvas,
applet, object, abbr, acronym, address, cite, del, dfn,
ins, kbd, q, s, samp, tt, var, de, embed, output, ruby
{position:relative; margin:0; padding:0; border:0; font:inherit;
font-weight:inherit; font-variant:inherit; vertical-align:baseline;}

html, body, div, h1, h2, h3, h4, h5, h6,
article, aside, figcaption, figure, footer,
header, hgroup, menu, nav, section, details,
time, mark, audio, video, canvas{display:block;}

blockquote, q{ quotes:none;} ins{text-decoration:none;}
sub, sup { font-size:0.7em;} sup{ top:-0.5em;} sub{ bottom:-0.25em;}
strike, del, .strikeout{text-decoration:line-through;}
table { border-collapse:collapse; border-spacing:0;}
em{ font-style:italic;} i{ font-style:italic;}
strong{ font-weight:bold;} b{ font-weight:bold;}
small{ font-size:0.8em;} big{ font-size:1.2em;}
u{ text-decoration:underline;}








/* Fonts --------------------- */
@font-face {	font-family: 'Blackout Sunrise';
    			src: url('../font/blackout_sunrise-webfont.eot');
				src: url('../font/blackout_sunrise-webfont.eot?#iefix') format('embedded-opentype'),
					 url('../font/blackout_sunrise-webfont.woff2') format('woff2'),
					 url('../font/blackout_sunrise-webfont.woff') format('woff'),
					 url('../font/blackout_sunrise-webfont.ttf') format('truetype'),
					 url('../font/blackout_sunrise-webfont.svg#blackout_sunriseregular') format('svg');
				font-weight: normal; font-style: normal;}



/* Basic Styles --------------------- */
html{			color:#CCC; height:100%; background-color:#000; text-align:center;}
body{			height:100%; font:62.5%/1 'Titillium Web', Arial, Helvetica, sans-serif; text-align:center !important;}
video{			width:100% !important; height:auto !important; }

h1{				font-family:'Titillium Web', Arial, Helvetica, sans-serif; text-transform:uppercase;}
h2{				font-family:'Titillium Web', Arial, Helvetica, sans-serif; line-height:1;}
h3{				font-family:'Titillium Web', Arial, Helvetica, sans-serif;}

p{				font-size:1.4em; line-height:1.3; margin:0.25em 0 1em; text-align:justify;
				font-family:'Titillium Web', Arial, Helvetica, sans-serif;}
a{				text-decoration:none;}
p a, figcaption a{				color:#EEE;}
p a:hover, figcaption a:hover{	text-decoration:underline; cursor:pointer;}

pre{			font-family:"Courier New", Courier, monospace; white-space:pre-wrap;}

label, input,
textarea{		display:block; font-size:1.6em; text-align:left; padding:0.3em; margin:0.25em;
				-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}



/* Common --------------------- */
.topsection{					padding-top:10em;}
.main{							display:inline-block; background-color:#111;}
.section-headline{				font-size:3.6em; text-transform:uppercase; text-align:left; margin:0 5px 4px; padding-bottom:4px; border-bottom:1px solid #333;
								font-family:'Blackout Sunrise', Arial, sans-serif; letter-spacing:0.125em;}
.project-section{				font-size:2.4em !important; text-align:left; margin:2em 5px 0.5em !important; padding-bottom:4px; border-bottom:1px solid #333;}
.page-footer{					padding:5em 0 5em; background-color:#000; font-size:1.8em}




/* Common - Media Queries --------------------- */
@media only screen and (min-width : 1551px){
	.main{						width:90vw; padding-left:calc(5vw - (50vw - 50%)); padding-right:calc(5vw - (50vw - 50%)); padding-bottom:2em;}
}
@media only screen and (max-width : 1550px){
	.main{						width:90vw; padding-left:calc(5vw - (50vw - 50%)); padding-right:calc(5vw - (50vw - 50%)); padding-bottom:2em;}
	.homepage .topsection{		padding-top:0px;}
}
@media only screen and (max-width : 1200px){
	.main{						width:96vw; padding-left:calc(2vw - (50vw - 50%)); padding-right:calc(2vw - (50vw - 50%)); padding-bottom:2em;}
	.topsection{				padding-top:12em;}
}
@media only screen and (max-width : 800px){
	.page-footer{				padding:2em 0 2em; font-size:1.4em}
}









/* Header --------------------- */
.header-display{			display:block; top:0; left:0; width:100%; height:30vw; overflow:hidden; background:#222; z-index:1000;}
.header-display a{			display:block; top:0; left:0; width:100%; height:100%;}
.header-info{				display:inline-block; top:50%; min-height:100%; height:auto; line-height:1; white-space: nowrap; vertical-align:middle;
							-webkit-transform:translateY(-3em); transform:translateY(-3vw); z-index:1500;}
.header-display video{		display:block; position:absolute; left:50%; top:50%; min-width:100%; min-height:100%; width:auto; height:auto; opacity:0.75;
							-webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); overflow:hidden; z-index:1400;}

.logo{						display:inline-block; font-family:'Blackout Sunrise', Arial, sans-serif; text-transform:uppercase; color:#FFF; letter-spacing:0.125em;}
.header-info h1{			font-size:6vw; left:0.08em;}
.header-info p{				display:block; font-family:'Titillium Web', Arial, sans-serif; text-transform:uppercase; color:#FFF; font-size:1.8vw; text-align:center; margin-top:1em;}
.header-nav .logo{			font-size:4em; padding:0.5em 0 0.35em; margin-right:1em;}
.header-nav .logo::before,
.header-nav .logo::after{	border-bottom:0 solid #FFF; opacity:0;}
.header-info h1::before,
.header-info h1::after{		content:''; display:block; position:absolute; width:100%; height:0; left:-0.08em; border-bottom:0.03em solid #FFF;}
.header-info h1::before{	top:-0.25em;}
.header-info h1::after{		margin-top:0.1em;}

.header-nav{				display:block; position:fixed; top:0; left:0; width:100%; height:auto; background:#222; vertical-align:middle; z-index:2000;
							-webkit-transition: top 0.33s ease-out;
							   -moz-transition: top 0.33s ease-out;
								 -o-transition: top 0.33s ease-out;
									transition: top 0.33s ease-out;}
.home-page .header-nav{		top:-8em;}
.reveal{					top:0 !important;}
.main-nav{					display:inline-block; font-size:2em; top:-0.4em;}
.main-nav a{				display:inline-block; padding:0.5em 1em; cursor:pointer; color:#FFF; border-bottom:3px solid #222;}
.main-nav a:hover{			border-bottom:3px solid #999;}
.main-nav a.selected{		border-bottom:3px solid #FFF;}

.separator{					display:inline-block; height:2em; bottom:-0.5em; margin:0 4px; width:0; border-right:1px solid #666;}



/* Header - Media Queries --------------------- */
@media only screen and (max-width : 1200px){
	.header-display{			height:50vw;}
	.header-nav .logo{			display:block;}
	.home-page .header-nav{		top:-11em;}
	.header-nav .logo{			font-size:3.2em; left:0.1em; margin-right:0;}
}
@media only screen and (max-width : 800px){
	.section-headline{			font-size:2.4em;}
	.home-page .header-nav{		top:-9em;}
	.header-display{			height:50vh;}
	.header-display video{		width:auto !important; height:100% !important;}
	.header-info .logo{			width:70vw; font-size:5em; white-space:normal; -webkit-transform:translateY(-6em); transform:translateY(-6vw);}
	.header-info p{				width:50vw; padding-left:20vw; padding-right:20vw; font-size:2em; white-space:normal;}
	.header-nav .logo{			font-size:2.2em;}
}









/* Filters --------------------- */
.filter-nav{					display:block; z-index:10; top:-1em;}
.filter-nav #filters{			display:inline-block; font-size: 1.6em; -webkit-overflow-scrolling:touch; -ms-overflow-style:-ms-autohiding-scrollbar;
								scrollbar-width: none; scrollbar-height:none;}
.filter-nav #filters::-webkit-scrollbar{ display:none;}

.filter-nav .button,			
.filter-nav .filter-title{		display:inline-block; padding:2em 1em 1em; font-size:1.2em; border-bottom:3px solid #1C1C1C; }
.filter-nav .selected{			border-bottom:3px solid #FFF;}
.filter-nav .button:hover{		border-bottom:3px solid #999; cursor:pointer;}
.filter-nav .selected:hover{	border-bottom:3px solid #FFF;}



/* Filters - Media Queries --------------------- */
@media only screen and (max-width : 1550px){
	.filter-nav .button{		padding-top:1em;}
	.filter-nav #filters{		display:block; position:relative; right:0; top:0; padding-right:calc(2vw + 2px); text-align:center;
								white-space:nowrap; overflow-x:auto;}
	.filter-nav .before{		display:none; position:absolute; bottom:0; left:0; height:100%; width:75px; z-index:9999; pointer-events:none;
								background: -webkit-linear-gradient(-90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);
								background:    -moz-linear-gradient(-90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);
								background:         linear-gradient(-90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);}
	.filter-nav .after{			display:block; position:absolute; bottom:0; right:0; height:100%; width:75px; z-index:9999; pointer-events:none;
								background: -webkit-linear-gradient(90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);
								background:    -moz-linear-gradient(90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);
								background:         linear-gradient(90deg, rgba(28,28,28,0) 0%, rgba(28,28,28,1) 100%);}
}
@media only screen and (max-width : 1200px){
	.filter-nav{				top:0;}
	.filter-nav #filters{		padding-left:calc(2vw + 2px);}
	.filter-nav .button,			
	.filter-nav .filter-title{	padding-top:1.5em; padding-bottom:1.5em;}
}
@media only screen and (max-width : 800px){
	.filter-nav #filters{		font-size:1.2em;}
}




/* Homepage Portfolio --------------------- */
#portfolio{						margin-top:-3em; padding-bottom:8em; background:#1C1C1C;}
#portfolio article{				display:inline-block;}
#portfolio article a{			position:absolute; top:5px; bottom: 5px; right: 5px; left: 5px; overflow: hidden; transform: perspective(500px) translate3d(0,0,0px);
								vertical-align:middle; font-size:1em; font-family:'Abel', Arial, Helvetica, sans-serif; color:rgba(255,255,255,0.75);
								-webkit-transition: transform 0.1s ease-out 0.0s, background-color 0.1s ease-out 0.0s;
								   -moz-transition: transform 0.1s ease-out 0.0s, background-color 0.1s ease-out 0.0s;
								     -o-transition: transform 0.1s ease-out 0.0s, background-color 0.1s ease-out 0.0s;
								        transition: transform 0.1s ease-out 0.0s, background-color 0.1s ease-out 0.0s;}
#portfolio article a:hover{				transform: perspective(500px) translate3d(0,0,3px);}
#portfolio article a:after{				content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.0); z-index:10; pointer-events:none;}
#portfolio article a:hover:after{		background-color:rgba(255,255,255,0.05);}


#portfolio article .image{		display:block; position:absolute; background-size:cover; background-position:center; z-index:10;}
#portfolio article video{		display:block; position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; opacity:0.75;
								-webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); overflow:hidden;}
#portfolio article .caption{	display:block; position:absolute; text-align:left; z-index: 20;}
#portfolio article .blurred{	display:block; position:absolute; width:100%; height:100%; bottom:-10%; 
								background-color:black; background-size:cover; background-position:center; filter:blur(30px); -webkit-filter:blur(30px);}

#portfolio article .pinnedname{	display:inline-block; position:absolute; font-size:3.2em; top:50%; left:50%;  min-height:100%; width:fit-content; height:auto;
								-webkit-transform:translateX(-5%) translateY(-0.5em); transform:translateX(-50%) translateY(-0.5em); z-index:1000; text-transform: uppercase;}
#portfolio .pinnedname::before,
#portfolio .pinnedname::after{	content:''; display:block; position:absolute; width:100%; height:0; border-bottom:4px solid #FFF;}
#portfolio .pinnedname::before{	top:-0.25em;} #portfolio .pinnedname::after{margin-top:0.25em;}

#portfolio .large .image{		top:0px; left:0px; right:0px;}
#portfolio .medium .image{		top:0px; left:0px; right:0px;}
#portfolio .small .image{		top:0px; left:0px; right:0px;}
#portfolio .large .caption{		background-color:rgba(0,0,0,0.35); bottom:0px; left:0px; right:0px;}
#portfolio .medium .caption{	background-color:rgba(0,0,0,0.35); bottom:0px; left:0px; right:0px;}
#portfolio .small .caption{		background-color:rgba(0,0,0,0.35); bottom:0px; left:0px; right:0px;}

#portfolio .caption .title,	
#portfolio .caption .descr{		display:block; padding:0 0 0.5em; margin:0.5em 0.25em 0 0.5em; white-space:nowrap; overflow-x:auto;
								-webkit-overflow-scrolling:touch; -ms-overflow-style:-ms-autohiding-scrollbar; scrollbar-width: none; scrollbar-height:none;
								-webkit-mask-image: -webkit-gradient(linear, 80% top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
#portfolio .caption .title::-webkit-scrollbar{ display:none;}.caption .descr::-webkit-scrollbar{ display:none;}

#portfolio .caption .title{		font-size:0.75em;}
#portfolio .caption .descr{		font-size:0.50em; margin:0 0.5em 0 0.75em;}



/* Homepage Portfolio - Unique --------------------- */
#portfolio #Doritos-Superbowl-SpecCommercial .image{		background-position: center top;}
#portfolio #LG-V20-SocialPosts .image{						background-position: 75% 50%;}
#portfolio #CGWeekly-WhiskeyCocktails .image{				background-position: 59% 50%;}	
#portfolio #CBSSports-StatTemplate .image{					background-position: 35% 50%;}
#portfolio #Microsoft-TimesSquareCube .image{				background-position: 43% 50%;}


/* Homepage Portfolio - Media Queries --------------------- */
@media only screen and (min-width : 2001px){
	#portfolio .grid-sizer{		height:5.625vw !important;}
	#portfolio .large{			width:33.75vw; height:16.875vw; font-size: 1.33vw;}
	#portfolio .medium{			width:22.5vw; height:16.875vw; font-size: 1.33vw;}
	#portfolio .small{			width:11.25vw; height:16.875vw; font-size: 1.33vw;}
	#portfolio .pinned{			width:67.5vw; height:16.875vw; font-size: 1.33vw;}
	#portfolio .large .caption{	height:calc(3.76875vw - 5px);}
	#portfolio .medium .caption{height:calc(3.76875vw - 5px);}
	#portfolio .small .caption{	height:calc(3.76875vw - 5px);}
	#portfolio .pinned .caption{height:calc(0vw - 5px);}
	#portfolio .large .image{	height:calc(13.10625vw - 5px);}
	#portfolio .medium .image{	height:calc(13.10625vw - 5px);}
	#portfolio .small .image{	height:calc(13.10625vw - 5px);}
	#portfolio .pinned .image{	height:calc(16.875vw - 5px);}
}
@media only screen and (max-width : 2000px){
	#portfolio .grid-sizer{		height:7.5vw !important;}
	#portfolio .large{			width:45vw; height:22.5vw; font-size: 2vw;}
	#portfolio .medium{			width:30vw; height:22.5vw; font-size: 2vw;}
	#portfolio .small{			width:15vw; height:22.5vw; font-size: 2vw;}
	#portfolio .pinned{			width:90vw; height:22.5vw; font-size: 2vw;}
	#portfolio .large .caption{	height:calc(5.025vw - 5px);}
	#portfolio .medium .caption{height:calc(5.025vw - 5px);}
	#portfolio .small .caption{	height:calc(5.025vw - 5px);}
	#portfolio .pinned .caption{height:calc(0vw - 5px);}
	#portfolio .large .image{	height:calc(17.475vw - 5px);}
	#portfolio .medium .image{	height:calc(17.475vw - 5px);}
	#portfolio .small .image{	height:calc(17.475vw - 5px);}
	#portfolio .pinned .image{	height:calc(22.5vw - 5px);}
}
@media only screen and (max-width : 1550px){
	#portfolio{					padding-top:72px;}
}
@media only screen and (max-width : 1200px){
	#portfolio{					padding-bottom:3em;}
	#portfolio article a{		top:2px; bottom:2px; left:2px; right:2px;}
	#portfolio .grid-sizer{		height:8vw !important;}
	#portfolio .large{			width:48vw; height:32vw; font-size: 4vw;}
	#portfolio .medium{			width:32vw; height:32vw; font-size: 4vw;}
	#portfolio .small{			width:16vw; height:32vw; font-size: 4vw;}
	#portfolio .pinned{			width:96vw; height:48vw; font-size: 4vw;}
	#portfolio .large .caption{	height:calc(10vw - 2px);}
	#portfolio .medium .caption{height:calc(10vw - 2px);}
	#portfolio .small .caption{	height:calc(10vw - 2px);}
	#portfolio .pinned .caption{height:calc(0vw - 2px);}
	#portfolio .large .image{	height:calc(22vw - 2px);}
	#portfolio .medium .image{	height:calc(22vw - 2px);}
	#portfolio .small .image{	height:calc(22vw - 2px);}
	#portfolio .pinned .image{	height:calc(48vw - 2px);}
}
@media only screen and (max-width : 800px){
	#portfolio .grid-sizer{		height:16vw !important;}
	#portfolio .large{			width:96vw; height:64vw; font-size: 6vw;}
	#portfolio .medium{			width:48vw; height:48vw; font-size: 6vw;}
	#portfolio .small{			width:24vw; height:48vw; font-size: 6vw;}
	#portfolio .pinned{			width:96vw; height:64vw; font-size: 6vw;}
	#portfolio .large .caption{	height:calc(16vw - 2px);}
	#portfolio .medium .caption{height:calc(16vw - 2px);}
	#portfolio .small .caption{	height:calc(16vw - 2px);}
	#portfolio .pinned .caption{height:calc(0vw - 2px);}
	#portfolio .large .image{	height:calc(48vw - 2px);}
	#portfolio .medium .image{	height:calc(32vw - 2px);}
	#portfolio .small .image{	height:calc(32vw - 2px);}
	#portfolio .pinned .image{	height:calc(96vw - 2px);}
}









/* Homepage About --------------------- */
#about{							padding-top:8em; padding-bottom:8em; background:#111;}

.about-triplet{					display:inline-block; height:calc(90vw * 0.3);}
.about-padding{					position:absolute; top:1vw; left:1vw; bottom:1vw; right:1vw;}

.about-photo{					width:30%;}
.about-photo .about-padding{	background:#222; border-radius:100%; overflow:hidden;}			
.about-photo img{				width:100%; height:100%;}

.about-bio{						width:47%;}
.about-bio p{					font-size:1vw;}

.about-resume{					width:23%;}
.about-resume a{				padding:1vw; background:#222; cursor:pointer; border-radius:0.5vw;}			
.about-resume img{				width:100%; height:100%;}
.about-resume a:hover img{		opacity:0.5;}
.about-resume a::after{			content:'Click To Download'; position:absolute; left:0; top:50%; width:70%; padding:5%; margin:0 10%; border-radius:2vw;
								font-size:1vw; z-index:10; -webkit-transform:translateY(-1vw); transform:translateY(-1vw);
								background-color:rgba(0,0,0,0.75); text-transform:uppercase; color:#FFF;}

.social-icons{					display:block; width:100%; margin:0; text-align:center; padding:3vw 0;}
.social-icons a{				display:inline-block; margin:0 1.5vw; opacity:0.3; cursor:pointer;}
.social-icons a:hover{			opacity:1;}
.social-icons img{				width:4vw; height:4vw;}



/* Homepage About - Media Queries --------------------- */
@media only screen and (max-width : 1550px){
	.about-bio p{				font-size:1.333vw;}
}
@media only screen and (max-width : 1200px){
	#about{						padding-top:3em;}
	.about-bio p{				font-size:1.4em;}
	.social-icons{				padding-top:1.5vw;}
}
@media only screen and (max-width : 800px){
	.about-triplet{				height:90vw;}
	.about-photo{				width:90vw;}
	.about-bio{					width:90vw; padding:1em;}
	.about-bio p{				font-size:1.6em;}
	.about-resume{				width:75vw; height:92vw;}
	.about-resume a::after{		content:'Tap To Download'; font-size:5vw; -webkit-transform:translateY(-4vw); transform:translateY(-4vw);}
	.social-icons a{			margin:0 4vw;}
	.social-icons img{			width:12vw; height:12vw;}
}









/* Project Pages --------------------- */
.project-page .heading{			display:inline-block;}
.project-page .content{			display:inline-block; text-align:justify; text-align-last:justify; -webkit-text-align-last:justify;  margin-top:2em;}

.project-page h1{				display:block; font-size:3.2em; padding:0 0 0.25em;}
.project-page h1:after{			content:''; display:block; height:0; width:50%; margin:0.25em 25% 0.125em; border-bottom:1px solid #666;}
.project-page h2{				display:block; font-size:1.8em; padding:0.25 0 0.5em;}
.project-page p{				margin-bottom:1.5em; margin-left:4px; margin-right:4px; text-align:left;text-align-last:left; -webkit-text-align-last:left;}
.project-page .spacing-top{		margin-top:1em;}

.project-page .project-meta{	margin:0 4px 2em;}
.project-page .project-meta p{	color:#999; margin:0.25em 0 0.5em;}
.project-page .project-meta a{	color:#BBB;}
.project-page .icons{			position:absolute; top:0; right:0;}
.project-page .icons img{		display:inline-block; height:2em; margin:-0.25em 0.25em 0; opacity:0.5;}
.project-page .icons p{			display:inline-block; margin:0 0.5em 0 0; vertical-align:top;}

.project-page figure{			display:inline-block;}
.project-page figcaption{		display:none;}

.project-page .video-large, .project-page .video-medium, .project-page .video-small, .project-page .video-thirds,
.project-page .image-large, .project-page .image-medium, .project-page .image-small, .project-page .image-thirds
.project-page .video-sevenths, .project-page .image-sevenths, .project-page .video-sixths, .project-page .image-sixths{display:inline-block; vertical-align: middle;}

.project-page .expand-large:before{		left:0;}
.project-page .expand-large:after{		right:0;}
.project-page .expand-large:before,
.project-page .expand-large:after{		content:''; display:block; position:absolute; top:0; height:100%;
										background:#111; z-index:10; pointer-events:none;
										-webkit-animation:expandBorder 2s ease-in-out 2s 1 both;
										   -moz-animation:expandBorder 2s ease-in-out 2s 1 both;
										        animation:expandBorder 2s ease-in-out 2s 1 both;}

.project-page .iframe-resize{			height:0; padding-bottom:56.25%;}
.project-page .iframe-resize iframe{	position:absolute; top:0; left:0; width:100%; height:100%;}

.project-page .carousel{				white-space:nowrap; overflow:auto; -webkit-overflow-scrolling:touch; -ms-overflow-style:-ms-autohiding-scrollbar;}
.project-page .carousel::-webkit-scrollbar{ display:none;}
.project-page .carousel-thumbs a{		display:inline-block; height:100%; cursor:pointer; opacity:0.5;}
.project-page .carousel-thumbs a:hover{	opacity:1.0;}


.project-page .pullquote{				background-color:rgba(0,0,0,0.5); padding:1em 3.5em 1em 4.5em; margin-bottom:2em;  margin-left:4px; margin-right:4px; border-radius: 1em;}
.project-page .pullquote-desc{			display:block; margin-top:1em; margin-bottom:0; opacity:0.75;}
.project-page .profile-picture{			display:inline-block; height:1.5em; top:0.33em; margin-right:0.5em; border-radius:0.75em;}
.project-page .pullquote:before,
.project-page .pullquote:after{			display:block; position:absolute; pointer-events:none; opacity:0.125;;
										font-size:11em; font-family:Constantia, Lucida Bright, DejaVu Serif, Georgia, serif;}
.project-page .pullquote:before{		content:'“'; top:0px; left:0; line-height:0.85em;}
.project-page .pullquote:after{			content:"”"; bottom:0.2em; right:0; line-height:0em;}



/* Project Pages - Unique --------------------- */
#DemoReel.project-page #nav-reel{		border-bottom:3px solid #FFF;}




@media only screen and (min-width : 1201px){
	.project-page .content{					width:64vw; padding-left:calc(12vw - 8px); padding-right:calc(12vw - 8px);}
	.project-page .carousel{				width:64vw;}
	.project-page figure img{				margin:4px 4px 2px;}
	.project-page .container{				margin:4px 4px 2px;}
	.project-page .image-large img{			width:calc(64vw - 8px);}
	.project-page .image-medium img{		width:calc(32vw - 8px);}
	.project-page .image-small img{			width:calc(16vw - 8px);}
	.project-page .image-thirds img{		width:calc(21.33vw - 8px);}
	.project-page .image-sixths img{		width:calc(10.66vw - 8px);}
	.project-page .image-sevenths img{		width:calc(9.14vw - 8px);}
	.project-page .video-large .container{	width:calc(64vw - 8px);}
	.project-page .video-medium .container{	width:calc(32vw - 8px);}
	.project-page .video-small .container{	width:calc(16vw - 8px);}
	.project-page .video-thirds .container{	width:calc(21.33vw - 8px);}
	@keyframes expandBorder{         		0% {width:calc(14vw - 4px);}  100% {width:0;}}
	@-webkit-keyframes expandBorder{ 		0% {width:calc(14vw - 4px);}  100% {width:0;}}
	.project-page p{						font-size:1.8em;}
	.project-page .project-meta p{			font-size:1.4em;}
	
}
@media only screen and (max-width : 1200px){
	.project-page .content,
	.project-page .carousel{				width:96vw;}
	.project-page figure img{				margin:4px 4px 2px;}
	.project-page .container{				margin:4px 4px 2px;}
	.project-page .image-large img{			width:calc(96vw - 8px);}
	.project-page .image-medium img{		width:calc(48vw - 8px);}
	.project-page .image-small img{			width:calc(24vw - 8px);}
	.project-page .image-thirds img{		width:calc(32vw - 8px);}
	.project-page .image-sixths img{		width:calc(16vw - 8px);}
	.project-page .image-sevenths img{		width:calc(13.71vw - 8px);}
	.project-page .video-large .container{	width:calc(96vw - 8px);}
	.project-page .video-medium .container{	width:calc(48vw - 8px);}
	.project-page .video-small .container{	width:calc(24vw - 8px);}
	.project-page .video-thirds .container{	width:calc(32vw - 8px);}
	@keyframes expandBorder{          		0% {width:calc(21vw - 4px);}  100% {width:0;}}
	@-webkit-keyframes expandBorder{  		0% {width:calc(21vw - 4px);}  100% {width:0;}}
	.project-page p{						font-size:1.6em;}
	.project-page .project-meta p{			font-size:1.2em;}
}
@media only screen and (max-width : 1200px){
	#AreciboRadio.project-page .credits{ 	top:2em;}
	#AreciboRadio.project-page .project-meta{margin-bottom:4em;}
}