*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }

body {
	background: #2c3135;
	color: #c5d3d6;
	font-weight: 400;
	font-size: 1em;
	font-family: 'Lato', Arial, sans-serif;
}

a {
	color: #fff;
	text-decoration: none;
	outline: none;
}

.float-left { float: left; }
.float-right { float: right; }
.text-left { text-align: left; }
.text-justify { text-align: justify }
.text-right { text-align: right; }
.text-center { text-align: center; }

a:hover, a:focus {
	color: #c5d3d6;
}

.large-text {
    font-size: 1.1em;
    line-height: 1.4em;
}

.medium-text {
    font-size: 1.1em !important;
	line-height: 1.2em !important;
}

.small-text {
    font-size: .8em !important;
	line-height: 1em !important;
}

.italic { font-style: italic }
.bold { font-weight: bold }

ul { text-align: left; }

/* ----------------------------------------------- */
/* ------------- More specific Styling ----------- */
/* ----------------------------------------------- */

a.callout-link {
	background-color: #7388a2;
	color: white;
	padding: .3em;
	border-radius: .2em;
	font-size: .9em;
	-webkit-transition: background-color 0.6s;
    transition: background-color 0.6s;
}
a.callout-link:hover {
	background-color: white;
	color: #7388a2;
}
	

.js .bdf-about {
	position: absolute;
	z-index: 1001;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity -webkit-transform 0.6s cubic-bezier(.7,0,.3,1);
	transition: opacity transform 0.6s cubic-bezier(.7,0,.3,1);
	/* multi-device css gradient background */
	background: rgba(40,49,56,1); /* Old browsers */
	background: -o-linear-gradient(rgba(40,49,56,1) 0%, rgba(104, 151, 193,1) 100%);
	background: linear-gradient(rgba(40,49,56,1) 0%, rgba(104, 151, 193,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#283138', endColorstr='#6897c1',GradientType=0 );
	font-size: 125%;
	top: 0;
	left: 0;
}

.intro, .resume {
	width: 100%;
	position: absolute;
	left: 50%;
	margin: 0 -50%;
	padding: 5% 15% !important;
	line-height: 1.4;
	font-weight: 200;
	font-size: 1em;
	-webkit-transition: -webkit-transform 0.6s cubic-bezier(.7,0,.3,1);
	transition: transform 0.6s cubic-bezier(.7,0,.3,1);
	
}
/* .intro p, .resume p { font-family: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif; } */

.resume {
	position: absolute !important;
    top: 0;
     height: 0;
     overflow: hidden;
    -webkit-transition: height 0s 0.6s;
    transition: height 0s 0.6s;
}
.js .bdf-about button.content-switch { top: 102%; background: black;}
 .js .bdf-about button.content-switch:before { content: '\e096'; } 

.intro h2, .resume h2, .intro h3, .resume h3 {
	text-transform: uppercase;
	font-weight: 400;
}

.intro h2, .resume h2 { color: #7b92ad;	margin: 0 0 1em 0; }

.intro h3, .resume h3 {
	font-size: 1em;
	color: #a6b7bb;
	font-weight: 100;
	font-style: italic;
	margin: 0 0 .5em 0;
}

.intro h2 span, .resume h2 span, #home-button span, #home-button::after {  font-family: 'Pacifico', serif;  text-transform: none; }

.intro h2 span, .resume h2 span { color: white; }
.socialband a { padding: 0 .4em; color:#549cf1; -webkit-transition: color 0.6s;	transition: color 0.6s; }
.socialband a:hover { color: white }


.intro h2 span, .resume h2 span { font-size: 2.9em; }
.intro p:first-of-type, .resume p:first-of-type { margin: 1em 0; }
.intro p:last-of-type, .resume p:last-of-type { margin: 2em 0; }

.bdf-about.show-content {
	-webkit-transform: translate3d(0,-100%,0) !important;
	transform: translate3d(0,-100%,0) !important;
}

.bdf-about {
	position: relative;
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
}

/* Info/Resume Toggle Switch */
.bdf-about.resumeView {
	-webkit-transform: translate3d(0,-40%,0);
	transform: translate3d(0,-40%,0);
	opacity: 1 !important;
}

.bdf-about.infoView {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0) ;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.bdf-about.noView {
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Header */
.bdf-header {
	margin: 0 auto;
	width: 90%;
	left: 5%;		
	top: 1.2em;
	pointer-events: none;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	opacity: 0 !important;
	visibility: hidden;
	pointer-events: none !important;
}

.js .bdf-header  {
	position: fixed;
	z-index: 101;
}

/* -------------- LOGO -----------------*/

.bdf-header a.svg-logo { float: left; pointer-events: auto; color: white !important  }
/*( .bdf-header a.svg-logo:hover span {  } */
#home-button span { font-size: 1.3em; color: #b5bbc5; -webkit-transition: color 0.3s; transition: color 0.3s; }
.bdf-about figure { background: none !important; }

/* -------------- Instructions ----------------*/
.instructions {
	position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255, 0.7);
    z-index: 10000;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	color: #636464;
	text-align: center;
	text-transform: uppercase;
	font-weight: 800;
}

.i-click, .i-key, .i-drag { opacity: 0; display: block }

.i-click {
	position: absolute;
	left: 39%;
	width: 100px;
	-webkit-transition: opacity 0.6s 0.8s;
	transition: opacity 0.6s 0.8s;
} 

.i-key {
	position: relative;
	left: 38%;
	width: 100px;
	-webkit-transition: opacity 0.6s 1.6s;
	transition: opacity 0.6s 1.6s;
} 

.i-drag {
	position: relative;
	left: 38%;
	width: 100px;
	-webkit-transition: opacity 0.6s 2.4s;
	transition: opacity 0.6s 2.4s;
} 

.instructions.show .i-click, .instructions.show .i-key, .instructions.show .i-drag { opacity: 1 }

/* -------------- Unsupported Message  ----------------*/
.unsupported {
	position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(231,57,98,.7);
    z-index: 10000;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	color: white;
	text-align: center;
	text-transform: uppercase;
	font-weight: 800;
	display: none;
}

.info {
	opacity: .1;
	text-align: center;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 110% !important;
	line-height: 1.5 !important;
	width: 100%;
}

.info span {
	display: block;
	width: 42%;
	margin: 1em auto;
	text-align: center;
	font-style: italic;
	font-size: .8em;
	line-height: 1.2;
	opacity: .8;
}

.bdf-about button {
	border: 2px solid #549cf1;
	background: transparent;
	color: #fff;
	padding: 0.5em 2.2em .7em 2.2em;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: block;
	margin: 1em auto;
	opacity: 0.7;
	outline: none;
	border-radius: 2em;
 	-webkit-transition: all 0.5s; transition: all 0.5s;
}

.info button:hover, .bdf-about button:hover {
	opacity: 1;
	background-color: rgba(0,0,0,0.2);
}

.button-contain {
	width: 86%;
    margin: 0 auto;
    max-width: 511px;
	font-size: 0.8em;
}

/* Set up side by side portfolio images */
.grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1400px;
	list-style: none;
	text-align: center;
	clear: both;
}

.js .pages .contentContainer {
	max-width: 1200px;
	padding: .6em;
	width: 80%;
	display: inline-block;
}

.grid figure, .contentContainer figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	text-align: center;
}

.contentContainer h3 {
	margin-bottom: 2%;
}

.contentContainer.bodytext figure p { margin-top: 2%; }
.contentContainer.bodytext figure p:first-of-type { margin-top: 0; }

figure.c50 { width: 48%; }
figure.c40 { width: 38%; }
figure.c60 { width: 58%; }
figure.c30 { width: 28%; }
figure.c70 { width: 68%; }
figure.c100 { width: 100%; margin:0; }

figure.m1 {margin: 0 1%}
figure.m2 {margin: 0 2%}
figure.m3 {margin: 0 3%}
figure.m4 {margin: 0 4%}

.grid figure img {
	position: relative;
	display: block;
	max-width: 100%;
	width: 100%;
	opacity: 1;
	height: auto;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p, .grid figure li {
	font-size: 85%;
    line-height: 2em;
}
.mail-icon {
	width: 40px;
    position: absolute;
    top: 25%;
    left: 50%;
    margin: 0 -20px;
    border-radius: 60px;
    background: white;
    height: 40px;
	-webkit-transition: background 0.4s;
	transition: background 0.4s;
	z-index: 500;
}
.mail-icon svg { height: 26px; margin-top: 7px; }
.mail-icon:hover { background: #021021; opacity: 0.8}

.mail-icon:hover .filler { fill: white; -webkit-transition: fill 0.6s 0.2s; transition: fill 0.6s 0.2s; } 
.mail-icon .filler{ fill:#549cf1; }

/* ----------- Desktop width control ----------- */
@media screen and (max-width: 1400px) {
	.intro h2 span, .resume h2 span { font-size: 2.4em; }
	.bioshot { width: 5.5em; }
	.mail-icon {top: 19%;}
	.slide figure figcaption { font-size: 1em; }
	#home-button span { font-size: 1.1em; }
	
}

@media screen and (max-width: 1200px) {
	/* .resume, .intro { width: 76%; margin: 0 -38%; } */
	.mail-icon {top: 17%;}
	
}
/* ----- Small monitor based on height ------ */
@media screen and (max-height: 850px ) {
	 .intro, .resume { font-size: 0.8em; padding: 7%;}
	 .mail-icon {top: 22% }
}

/* -- Also applies to old Android Galaxy tabs Chrome -- */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
	  .intro, .resume { width: 90%; margin: 0 -45%; }
	  .js .pages .contentContainer { padding: 1.5em .7em; width: 100%;
	}
}

/* ----------- modern android tablets ----------- */
@media screen and (max-width: 770px) {
	/*
	.js .intro, .js .resume {
		width: 90%;
		margin: 0 -45%;
	}
	*/
	
	.js .pages .contentContainer {
    	padding: 1.5em .3em;
    	width: 100%;
	}

	.slide figure figcaption {
   		width: 90%;
		margin: 13% -45%;
		height: 80%;
		left: 50%;
	}
}

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  .mail-icon { top: 12%; }
	  .handle.disabled button.content-switch { top: 104% !important }
	  .pages .content.show { padding: 14% 0 !important }
	  .nophone { display: block; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

  }

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.dragslider h2 { font-size: 2.5em !important}
}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	#home-button span { font-size: 1em; }
	.nophone { display: block; }
	 
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.js .intro, .js .resume {
		width: 76% !important; 
	    margin: 0 -38% !important; 
		padding: 18% 0 !important;
		line-height: 1.5;
		font-size: 0.9em !important;
	}

	.slide figure {	font-size: .7em; }
	.mail-icon { top: 24%; }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  .js .intro, .js .resume {
		  width: 100% !important;
		  margin: 0 -50% !important;
		  padding: 8% !important;
		  line-height: 1.5;
		  font-size: 0.85em !important;
		}
		.mail-icon { top: 22%; }
}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	#home-button span { font-size: 1em; }
	.nophone { display: block; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
}

@media screen and (max-width: 650px) {
	.grid figure {width: 100% !important; margin: 0 auto}
}

@media screen and (max-width: 30em) {
	
}

@media screen and (max-width: 25em) {
	
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  .nophone { display: block; }
	  .nomargin { margin: 0 !important; }	  
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	  .mail-icon { top: 102%; }
	  .i-click, .i-key, .i-drag { width: 60px !important; }
	  .i-click { top: 40px; }
	  .i-key { top: 241px; }
	  .i-drag { top: 259px; }
	      
  }

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	  .i-click { top: 100px; left: 10% }
	  .i-key { top: 100px; left: 40% }
	  .i-drag { top: 100px; left: 80% }

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	.bioshot { width: 15% }
	.js .bdf-about { font-size: 60% !important; }
	.intro h2, .resume h2 { margin: 0 0 1em 0; }
	.bdf-about button { padding: .6em 2em; }
	figure.c70, figure.c30, figure.c50 { width: 100%; }
	.nophone { display: block; }	
	.i-click, .i-key, .i-drag { width: 80px !important; }
	 .nomargin { margin: 0 !important; }
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
	.js .bdf-header { top: 0 }
	.js .bdf-about { font-size: 72% !important; }
	.button-contain { width: 100%; font-size: .7em; }
	.intro, .resume { font-size: 1em; padding: 12% 8% !important; }
	 .intro h2, .resume h2 { margin: 0 0 2.5em 0; font-size: 1em;}
	 .js .bdf-about button.content-switch, .slide button.content-switch {
		background: none !important;
		border: #b5bbc5 1px solid !important;
		width: 40px;
  		text-indent: 100px !important;
		margin-left: -20px;
	}
	.pages .content.show { padding: 17% 0 !important }

	.img-dragger-large figure.efx p { font-size: 60%; font-weight: 100}
	.img-dragger-large figure.efx p { top: 43%; }

	.socialband {
		position: fixed;
		bottom: 0;
   	 	width: 100%;
		border-top: 1px dotted lightgray;
		left: 50%;
		margin-left: -50%;
		-webkit-transition: bottom 0.6s cubic-bezier(.7,0,.3,1);
		transition:  bottom 0.6s cubic-bezier(.7,0,.3,1);
    }

	.socialband a {
		float: left;
		/* width: 25%; */
		width: 50%;
		text-align: center;
		padding: .5em;
		color: white;
		font-size: 2em;
	}
	.bdf-header a.svg-logo {
		width: 100%; text-align: center; font-size: .4em; color: lightblue;
		-webkit-transition: color 0.7s; transition: color 0.7s;
	}
	.slide .splashthumbs { width: 100% !important}
	.js .bdf-about button.content-switch { top: 102% !important }
	button.content-switch { top: 108% !important }
	.img-dragger-large button.content-switch { top: 55% !important }
	.show-content .current button.content-switch { top: 102% !important; background: none; }
	.pages .content { font-size: 85% !important }
	.info span { width: 95%; }
	.grid figure { margin-bottom: .4em }
	.js .pages .contentContainer {padding: 0 .3em; }
	.mail-icon { top: 102%; }	
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
		.socialband {
			position: fixed;
    		top: 65%;
   	 		width: 40%;
			left: 50%;
			margin-left: -20%;
			/* border-top: 1px dotted lightgray; */
    	}

		.socialband a {
			float: left;
			width: 50%;
			text-align: center;
			padding: 1.5em;
			color: white;
			font-size: 2em;
		}

		.mail-icon { top: 90% !important; }
		.i-click, .i-key, .i-drag { width: 80px !important; }
		
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	 .nomargin { margin: 0 !important; }
	.bioshot { width: 15% }
	.js .bdf-about { font-size: 75% !important; }
	figure.c70, figure.c30, figure.c50 { width: 100%; }
	.pages .content { font-size: 106% !important }
	 	
	.intro p:last-of-type, .resume p:last-of-type { margin: .5em 0; }
	.info { font-weight: 500; font-size: 106% !important; line-height: 1.3 !important; }
	.info button, .bdf-about button { padding: .4em 1.4em; }

	.button-contain { width: 85%; font-size: .7em; margin-top: 7% !important; }

	.bdf-header a.svg-logo { width: 100%; text-align: center; }

	#home-button span { font-size: 1.8em; }
	.show-content .current button.content-switch { top: 100%; }
	.resume h4 { margin: 4em 0 0 0; }

	.js .bdf-about button.content-switch, .slide button.content-switch {
		border: none;
		background: black;
		width: 40px;
		margin: 0 -20px;
		text-indent: 100px !important;
	}

	.slide button.content-switch { top: 60%; }

	.pages .content p { font-size: .8em; }
	.dragslider h3 { font-size: 8em !important; font-weight: 500 !important; }
	
	.js .pages .contentContainer { width: 100% !important; padding: 1em 1em !important; }
	.js .pages .content .backshade { background: none !important; }
	.grid figure img { min-height: initial; width: 100%;  max-width: initial; }
	.nophone { display: block; }
	
}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	.js .bdf-about { font-size: 90% !important; }
	.js .intro, .js .resume { padding: 12% 0 !important; }
	.mail-icon { top: 102%; }
	.mail-icon svg { width: 60%; margin-top: 18%; }
	.js .intro {
		width: 86% !important;
		margin: 0 -43% !important;
		font-weight: 200;
	}

	.js .resume {
		width: 100% !important;
		margin: 0 -50% !important;
		font-weight: 200;
		padding: 10% 6% !important;
	}
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
	.js .intro {
    	width: 70% !important;
    	margin: 0 -35% !important;
		padding: 5% 0 !important;
		font-size: .9em;
	}

	.js .resume {
    	width: 70% !important;
    	margin: 0 -35% !important;
		padding: 5% 0 !important;
		font-size: 1.4em;
	}
	.js .bdf-about { font-size: 65% !important; }
	.button-contain { width: 50%; font-size: .7em; margin-top: 3% !important; }
	.bioshot { width: 8% }
	.js .bdf-header {top: -1em;}
	.img-dragger-large .slide { font-size: 11px !important }
	.img-dragger-small figure.efx p {display: none}
	.img-dragger-small figure.efx h2 {font-size: .8em; padding: .8em 0}
	.mail-icon {top: 2% }
	#home-button span { font-size: .8em; }
	.splashthumbs {display: none}
	.js .img-dragger-large .slide h2 { top: 45% !important  }
	.js .img-dragger-large .slide p { top: 65% !important }
	.slide figure figcaption { width: 70%; margin: 0 -35%; }
	button.slider-switch { display: none;}
	.slide button.content-switch { top: 65%; }
	.svg-logo span { display: none; }
	.svg-logo:after { content: 'F'; font-size: .6em}
  }

	

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	.nophone { display: block; }
	.nomargin { margin: 0 !important; }
}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	 .pages .content .work-logo { display: none }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}