@CHARSET "UTF-8";

html {
	/* 	background-color: lightgrey; */
	/* rgba(15, 15, 15, 1); */
	/* background-color: black; */ 
	height: 100%;
	width: 100%;
}

.backgroundImage {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	z-index: -1;
	
	display: block;
	/*background-image: url('img/manhattan-skyline.jpg');*/
	background-image: url('img/donut_crop.jpg');
	background-size: cover;
	/*background-position: center;*/
	width: 100%;
	height: 100%;
	
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}

body {
	padding: 0;
	margin: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(240, 240, 240, 1);
	/* background-image: url('img/Mount_Rainier_r.jpg'); */
	/* background-image: url('img/forest-tan.jpg');
	background-attachment: fixed;
	background-size: cover; */
}

h1 {
	font-size: 2.5em;
	letter-spacing: 4px;
	text-transform: uppercase;
}

h1,h2,h3,.title {
	padding-top: 10px;
	font-family: "Lucida Console", Monaco, monospace;
	/* "Courier New", monospace; */
}

h1,h2,h3 {
	letter-spacing: 2px;
}

p {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 175%;
}

a:link, a:visited {
	color: #4f998e;
}
a:hover {
	color: #2cb6a1;
}

.jobTitle {
	margin-bottom: 5px;
}

.description {
	margin-top: 0px;
	margin-left: 10px;
	/* 	margin: 0px 0 0 10px; */
	/* 	padding: 0px; */
}

.title {
	display: inline;
	font-size: 1.25em;
	text-decoration: none;
	text-transform: uppercase;
}

.popupTitle {
	position: relative;
    color: white;
    color: black;
    color: rgb(7, 21, 158);
    color: #D2832B;
	color: #385465;
	z-index: 10;
	text-align: center;
	top: -45px;
	font-size: 40px;
	line-height: 45px;
	/* text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px
		0 #000; */
	font-family: "Lucida Console", Monaco, monospace;
	width: 100%;
}

/* .popupTitle.active {
	text-align: center;
	overflow: hidden;
	word-wrap: break-word;
	width: 100%;
	height: 100%;
	top: 0;
} */

.bottomGap {
	margin-bottom: 30px
}

#main {
	width: 100%;
	margin: auto;
	padding: 10px 0 10px 0;
	background-color: white;
	background-color: rgba(0, 0, 0, 0);
	/*     display: table-cell; */
	/*     vertical-align: middle; */
	/* -webkit-box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 0px 25px 10px rgba(255, 255, 255, 0.4);
	-webkit-box-shadow: 0px 0px 25px 10px rgba(201, 203, 255, 0.4);
	-moz-box-shadow: 0px 0px 25px 10px rgba(201, 203, 255, 0.4);
	box-shadow: 0px 0px 25px 10px rgba(201, 203, 255, 0.4);
	-webkit-box-shadow: 0px 0px 25px 10px rgba(27, 96, 179, 0.4);
	-moz-box-shadow: 0px 0px 25px 10px rgba(27, 96, 179, 0.4);
	box-shadow: 0px 0px 25px 10px rgba(27, 96, 179, 0.4);
	-webkit-box-shadow: 0px 0px 25px 10px rgba(1, 119, 141, 0.4);
	-moz-box-shadow: 0px 0px 25px 10px rgba(1, 119, 141, 0.4);
	box-shadow: 0px 0px 25px 10px rgba(1, 119, 141, 0.4);
	-webkit-box-shadow: 0px 0px 35px 0px rgba(3, 110, 130, 0.4);
	-moz-box-shadow: 0px 0px 35px 0px rgba(3, 110, 130, 0.4);
	box-shadow: 0px 0px 35px 0px rgba(3, 110, 130, 0.4);
	-webkit-box-shadow: 0px 0px 50px 0px rgba(7, 21, 158, 0.4);
	-moz-box-shadow: 0px 0px 50px 0px rgba(7, 21, 158, 0.4);
	box-shadow: 0px 0px 50px 0px rgba(7, 21, 158, 0.4); 
	
	-webkit-box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 0px 50px 0px rgba(255, 255, 255, 0.4); */
}

#box1,#box2,#box3,#box4 {
	background-color: #212121;
	background-color: white;
	overflow: hidden;
	border-radius: 1em;
}

/* #box1,#box2,#box3,#box4 { */
/* 	background-image: url("img/name12.png"); */
/* } */
/* #box1, */
#slideUpInnerBox1, #slideUpInnerBox2, #slideUpInnerBox3, #slideUpInnerBox4 {
	background-color: black;
	background-image: url("img/name15-blue-crop-fx2.png");
	background-image: url("img/name15-black-crop-fx1.png");
	position: relative;
	z-index: 20;
	height: 100%;	
}

.slideUpInnerBox {
	-webkit-box-shadow: 0px 0px 40px 0px rgba(107,107,107,1);
	-moz-box-shadow: 0px 0px 40px 0px rgba(107,107,107,1);
	box-shadow: 0px 0px 40px 0px rgba(107,107,107,1);
}

#exBox1,#exBox2,#exBox3,#exBox4,#exBox5,#exBox6 {
	background-repeat: no-repeat;
	border-radius: 1em;
}

#box1:hover,#box2:hover,#box3:hover,#box4:hover {
	/* 	-ms-transform: skew(0deg, 1deg); IE 9 */
	/* 	-webkit-transform: skew(0deg, 1deg); Chrome, Safari, Opera */
	/* 	transform: skew(0deg, 1deg); Standard syntax */
	/* -ms-transform: translate(0px,-5px); IE 9 */
	/*     -webkit-transform: translate(0px,-5px); Chrome, Safari, Opera */
	/*     transform: translate(0px,-5px); */
	
	/*
	-ms-transform: scale(1.05, 1.05); 
	-webkit-transform: scale(1.05, 1.05); 
	transform: scale(1.01, 1.01);
	*/
	/* 
    transform: translate(0,20px);
    -webkit-transform: translate(0,20px);
    -o-transform: translate(0,20px); 
    -moz-transform: translate(0,20px); */
    
	z-index: 10;
	cursor: pointer;
}

#overlay1,#overlay2,#overlay3,#overlay4 {
	text-align: center;
	overflow: hidden;
	word-wrap: break-word;
	/* 	background-color: rgba(0, 0, 255, .5); */
}

#overlay1.semi,#overlay2.semi,#overlay3.semi,#overlay4.semi {
	background-color: rgba(0, 0, 0, .1)
}

#overlay1 div,#overlay4 div {
	width: 100%;
	/* 	background-color: rgba(0, 0, 255, .95); */
}

#overlay2 div,#overlay3 div {
	width: 100%;
	/* 	background-color: rgba(0, 255, 0, .8); */
}

#overlay1 div h1,#overlay2 div h1,#overlay3 div h1,#overlay4 div h1 {
	margin: 0;
	/* 	font-size: 4em; */
	display: none;
	color: white;
	/* 	color: rgba(27, 96, 179, 1); */
	/* 	color: rgba(1, 119, 141, 1); */
	/* 	color: rgba(3, 110, 130, 1); */
	/* 	color: rgba(7, 21, 158, 1); */
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px
		0 #000;
}

#overlay1.active h1,#overlay2.active h1,#overlay3.active h1,#overlay4.active h1,
#overlay1 h1.active,#overlay2 h1.active,#overlay3 h1.active,#overlay4 h1.active
	{
	display: inline;
}

/* Top Row */
#exBox1 {
	background-color: rgba(25, 25, 25, 1);
	background-size: auto 100%;
	/* 	background-color: rgba(255, 0, 255, 1); */
	/* 	margin: 0px 5px 0 10px; */
	margin: 10px 20px 10px 0px;
	float: left;
}

#box1 {
	/* 	background-color: rgba(0, 0, 255, .7); */
	/* border: solid white;
	border-width: 10px 10px 10px 0px; */
	margin: 10px 10px 10px 0px;
	float: left;
}

#overlay1 {
	/* 	background-color: rgba(0, 0, 255, .7); */
	width: 100%;
	height: 100%;
	/* 	opacity: .7; */
}

#box2 {
	/* border: solid white;
	border-width: 10px 0px 10px 10px;
	margin: 0px 10px 0px 0px; */
	margin: 10px;
}

#overlay2 {
	/* 	background-color: rgba(0, 255, 0, .7); */
	width: 100%;
	height: 100%;
	/* 	opacity: .7; */
}

#exBox2 {
	background-color: rgba(25, 25, 25, 1);
	/* 	background-image: url("img/bday.jpg"); */
	background-size: auto 100%;
	/* 	background-color: rgba(75, 75, 75, 1); */
	/* 	rgba(255, 255, 0, 1); */
	/* 	margin: 0 0 0 5px; */
	margin: 10px 0px 10px 10px;
	float: left;
	/* 	background-color: rgba(5, 15, 135, 1); */
}

#exBox2:hover {
	/*     background-position:-30px 0px; */
	
}

#exBox3 {
	background-color: rgba(25, 25, 25, 1);
	/* 	background-color: rgba(125, 125, 125, 1); */
	/* 	background-color: rgba(0, 255, 255, 1); */
	margin: 10px 0px 10px 20px;
	float: left;
	/* 	background-color: rgba(5, 15, 135, 1); */
}

/* Bottom Row */
#exBox4 {
	background-color: rgba(25, 25, 25, 1);
	/* 	background-image: url("img/cornell.jpg"); */
	background-size: auto 100%;
	/* 	background-color: rgba(75, 75, 75, 1); */
	/* 	background-color: rgba(255, 255, 0, 1); */
	/* 	margin: 10px 5px 0 10px; */
	margin: 10px 10px 10px 0px;
	clear: both;
	float: left;
	/* 	background-color: rgba(5, 15, 135, 1); */
}

#box3 {
	/* 	background-color: rgba(0, 255, 0, 1); */
	/* 	margin: 10px 5px 0px 5px; */
	
	/* border: solid white;
	border-width: 10px 10px 0px 0px;;
	margin: 0px 0px 10px 10px; */
	margin: 10px;
	float: left;
}

#overlay3 {
	/* 	background-color: rgba(0, 255, 0, .7); */
	width: 100%;
	height: 100%;
	/* 	opacity: .7; */
}

#box4 {
	/* 	background-color: rgba(0, 0, 255, 1); */
	
	/* border: solid white;
	border-width: 10px 0px 0px 10px;
	margin: 0px 0px 10px 0px; */
	margin: 10px 0px 10px 10px;
	float: left;
}

#overlay4 {
	/* 	background-color: rgba(0, 0, 255, .7); */
	width: 100%;
	height: 100%;
	/* 	opacity: .7; */
}

#exBox5 {
	background-color: rgba(25, 25, 25, 1);
	/* 	background-color: rgba(125, 125, 125, 1); */
	/* 	background-color: rgba(255, 0, 255, 1); */
	margin: 10px 0px 10px 20px;
	float: left;
}

#exBox6 {
	background-color: rgba(25, 25, 25, 1);
	/* 	background-color: rgba(0, 255, 255, 1); */
	margin: 0px 5px 10px 5px;
	margin: 0px 10px 20px 10px;
	margin: 10px;
	margin-bottom: 20px; 
}

/* Text Boxes */
.textBox {
	background-color: rgba(177, 177, 177, 1);
	background-color: rgba(240, 240, 240, 1);
	background-color: rgb(255, 255, 255);
	width: 100%;
	padding: 5px 10px 5px 10px;
	/* 	padding: 5px; */
	margin: 0em 0 1em 0;
	word-wrap: break-word;
	border-radius: 1em;
}

#box1TextBoxes,#box2TextBoxes,#box3TextBoxes,#box4TextBoxes {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

#box1TextBoxes.active,#box2TextBoxes.active,#box3TextBoxes.active,#box4TextBoxes.active
	{
	display: block;
}

.topLeftArrow,.topRightArrow,.bottomLeftArrow,.bottomRightArrow,.arrow1,.arrow2,.arrow3,.arrow4
	{
	width: 100%;
	/* 	min-height: 40px; */
	/*min height of DIV should be set to at least 2x the width of the arrow*/
	/* 	background-color: white; */
	position: relative;
	/* 	word-wrap: break-word; */
	margin-bottom: 1em;
}

.topLeftArrow:after,.topRightArrow:after,.bottomLeftArrow:after,.bottomRightArrow:after,.arrow1:after,.arrow2:after,.arrow3:after,.arrow4:after
	{
	content: '';
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px;
}

.topLeftArrow:after {
	top: -20px; /*should be set to -border-width x 2 */
	left: 1em;
	/* 	30px; */
	border-color: transparent transparent rgb(255, 255, 255) transparent;
}

.topRightArrow:after {
	top: -20px; /*should be set to -border-width x 2 */
	right: 1em;
	border-color: transparent transparent rgb(255, 255, 255) transparent;
}

.bottomLeftArrow:after {
	bottom: -20px; /*should be set to -border-width x 2 */
	left: 10px;
	border-color: rgb(255, 255, 255) transparent transparent transparent;
}

.bottomRightArrow:after {
	bottom: -20px; /*should be set to -border-width x 2 */
	right: 10px;
	border-color: rgb(255, 255, 255) transparent transparent transparent;
}

.arrow1:after {
	top: -20px; /*should be set to -border-width x 2 */
	left: 18%;
	/* 	30px; */
	border-color: transparent transparent rgba(240, 240, 240, 1) transparent;
}

.arrow2:after {
	top: -20px; /*should be set to -border-width x 2 */
	right: 41%;
	border-color: transparent transparent rgba(240, 240, 240, 1) transparent
}

.arrow3:after {
	top: -20px; /*should be set to -border-width x 2 */
	left: 23%;
	/* 	30px; */
	border-color: transparent transparent rgba(240, 240, 240, 1) transparent
}

.arrow4:after {
	top: -20px; /*should be set to -border-width x 2 */
	right: 27%;
	border-color: transparent transparent rgba(240, 240, 240, 1) transparent
}

.box1Color,.box4Color {
	color: rgba(0, 0, 255, 1);
}

.box2Color,.box3Color {
	color: rgba(0, 255, 0, 1);
}

/* img:hover { */
/* 	opacity: .5; */
/* } */
.skew {
	/* 	-ms-transform: skew(0deg, 1deg); IE 9 */
	/* 	-webkit-transform: skew(0deg, 1deg); Chrome, Safari, Opera */
	/* 	transform: skew(0deg, 1deg); Standard syntax */
	-ms-transform: translate(0px, -5px); /* IE 9 */
	-webkit-transform: translate(0px, -5px); /* Chrome, Safari, Opera */
	transform: translate(0px, -5px);
}

.picSlide1 {
	-webkit-transition: background-position 10000ms ease-in-out;
	-moz-transition: background-position 10000ms ease-in-out;
	-ms-transition: background-position 10000ms ease-in-out;
	-o-transition: background-position 10000ms ease-in-out;
	transition: background-position 10000ms ease-in-out;
}

.picSlide2 {
	-webkit-transition: background-position 800ms ease-in-out;
	-moz-transition: background-position 800ms ease-in-out;
	-ms-transition: background-position 800ms ease-in-out;
	-o-transition: background-position 800ms ease-in-out;
	transition: background-position 800ms ease-in-out;
}

.picSlide3 {
    transform: translate(0,-50px);
    -webkit-transform: translate(0,-50px);
    -o-transform: translate(0,-50px); 
    -moz-transform: translate(0,-50px);
    
    -webkit-transition-duration: .3s; /* Safari */
    transition-duration: .3s;
}

.picSlide4 {
    transform: translate(0,-471px);
    -webkit-transform: translate(0,-471px);
    -o-transform: translate(0,-471px); 
    -moz-transform: translate(0,-471px);
    
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
}

body:after {
	display: none;
	/* 	content: url('img/yosemite-cropbw.jpg') */
	/* 		url('img/buttermilkfalls2-cropbw.jpg') url('img/grad1-cropbw.jpg') */
	/* 		url('img/cornell2-bw.jpg'); */
	content: url('img/headshots-tre-calhoun-040-web-crop.jpg')	
		url('img/columbia_classes_done_crop2.jpg') 
		url('img/headshots-tre-calhoun-030-web-crop.jpg') 
		url('img/headshots-tre-calhoun-006-web-crop.jpg')
		url('img/headshot-Studio_Session-938_crop2.jpg');
}

.pic0 {
/* 	background-image: url('img/buttermilkfalls2-crop.jpg'); */
	background-image: url('img/headshots-tre-calhoun-040-web-crop.jpg');
}

.pic1 {
/* 	background-image: url('img/grad1-crop.jpg'); */
/*	background-image: url('img/headshots-tre-calhoun-030-web-crop.jpg');*/
	background-image: url('img/columbia_classes_done_crop2.jpg');
}

.pic2 {
	/*background-image: url('img/cornell2.jpg');*/
	background-image: url('img/headshots-tre-calhoun-030-web-crop.jpg');
}

.pic3 {
/* 	background-image: url('img/yosemite-crop.jpg'); */
	background-image: url('img/headshot-Studio_Session-938_crop2.jpg');
}

.close {
	color: rgba(240, 240, 240, 1);
	margin-top: -1em;
	/* 	-10px; */
	padding: 0;
	float: right;
	margin-right: -10px;
}

.close p {
	margin: 0;
}

.close:hover {
	cursor: pointer;
	color: rgba(1, 119, 141, 0.4);
	color: rgba(7, 21, 158, 1);
	color: #D2832B;
	color: #2cb6a1;
}

.imgDiv {
	/* background-color: black; */
	margin-bottom: 1em;
}
.imgDiv > img {
	border-radius: 1em;
}

.projImg {
	max-width: 100%;
/* 	max-height: 400px; */
	margin: auto;
	display: block;
}

.clear {
	clear: both;
}

.left {
	float: left;
}

.center {
	text-align: center;
}

.contactImg {
	width: 25%;
	height: 25%;
}

.contactImg2 {
	width: 50%;
	height: 50%;
}

.halfWidth {
	width: 50%;
}

#overlay1:hover,#overlay4:hover,#overlay1.active,#overlay4.active {
	background-color: rgba(0, 0, 255, 1);
	background-color: rgba(27, 96, 179, 1);
	background-color: rgba(21, 34, 194, 1);
	background-color: rgba(5, 15, 135, 1);
	background-color: rgba(0, 140, 37, 1);
	background-color: rgba(10, 10, 10, 1);
	background-color: rgba(20, 20, 20, 1);
	background-color: rgba(29, 6, 158, 1);
	background-color: rgba(26, 6, 139, 1);
	background-color: black;
	/* 	opacity: 1; */
}

#overlay2:hover,#overlay3:hover,#overlay2.active,#overlay3.active {
	background-color: rgba(0, 255, 0, 1);
	background-color: rgba(11, 217, 0, 1);
	/* 	background-color: rgba(118, 232, 17, 1); */
	/* 	background-color: rgba(25, 25, 25, 1); */
	background-color: rgba(21, 34, 194, 1);
	background-color: rgba(30, 210, 77, 1);
	background-color: rgba(10, 10, 10, 1);
	background-color: rgba(20, 20, 20, 1);
	background-color: rgba(29, 6, 158, 1);
	background-color: rgba(26, 6, 139, 1);
	background-color: black;
	/* 	opacity: 1; */
}

/* Here at end to override mobile's semi property */
#exBox1,#exBox2,#exBox3,#exBox4,#exBox5,#exBox6 {
	background-color: rgba(45, 45, 45, 1);
	background-color: rgba(215, 215, 215, .43);
	background-color: rgba(215, 215, 215, .6);
	background-color: rgba(255, 255, 255, .7);
	border-radius: 1em;
}