/***************** Global *******************/
@font-face {
	font-family: 'kepler-std-display';
	src: url('/static/fonts/Kepler-Std-Display.ttf') format('truetype'),
	url('/static/fonts/Kepler-Std-Display.woff') format('woff'),
	url('/static/fonts/Kepler-Std-Display.woff2') format('woff2');
}
* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
.full {
	position: fixed;
	left: 150px; top: 0px; right: 0px; bottom: 0px;
	overflow: scroll;
}
.fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
}
.noDisplay {
	display: none;
}
/*****************   Page Loading Spinner from http://tobiasahlin.com/spinkit/ ****************/
#spinnerDiv {
	display: none;
	z-index: 1000;
}
.spinner {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce1.darkBackground, .double-bounce2.darkBackground {
	background-color: #F9F7F7;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/*********   Navigation    *******************/
#app {
  padding: 0 0 0 0;
  margin: 0px 0px 0px 150px;
  position: fixed;
  bottom: 0; top: 0; left: 0; right: 0;
}
#navContainer {
	position: fixed;
	left: 0; top: 0; bottom: 0;
	width: 150px;
	z-index: 1000;
	transition: all .5s;
}
#navContainer.out{
	width: 324px;
}
header {
	position: fixed;
	width: 150px;
	left: 0; top: 0; bottom: 0;
	background-color: white;
	z-index: 100;
	transition: all .5s;
	overflow: hidden;
	border-right: 2px solid #E2E2E2;
}
header.out {
	width: 323px;
}
#pageNameLabelContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	transition: all .5s;
}
#pageNameLabel {
	font-family: 'kepler-std-display', serif;
	font-weight: 400;
	font-size: 30px;
	position: absolute;
	top: 25px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0 auto;
	letter-spacing: 1px;
	color: #666666;
	opacity: 1;
	transition: opacity 0.5s, transform 0s, margin 0.5s;
}
#pageNameLabel.hide {
	opacity: 0;
}

#label {
	position: absolute;
	height: 30px;
	display: block;
	top: 50%;
	transform: translateY(-50%) rotate(-90deg);
	left: -67px;
	transition: all 0.5s;
}
header.out #label {
	left: -85px;
}
#burger-menu-icon {
	position: absolute;
	left: 57px;
	bottom: 53px;
	transition: all .5s;
	opacity: 1;
}
header.out #burger-menu-icon {
opacity: 0;
left: 39px;
}
#x-icon {
	overflow: visible;
	position: absolute;
	opacity: 0;
	left: 275px;
	bottom: 53px;
	transition: all .25s;
}
#x-icon:hover {
	cursor: pointer;
}
header #x-icon {
	transition: all .25s 0s;
}
header.out #x-icon {
	transition: all .75s .5s;
	opacity: 1;
}
#mainNav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%); 
	z-index: 102;
	border: 1px solid black;
	right: 100%;
}

#mainNav ul li{
	position: relative;
	font-family: 'kepler-std-display', serif;
	font-weight: 400; /*600;*/
	font-size: 46pt;
	color: #666666;
	text-align: right;
	transition: .25s;
}
/*#mainNav ul li a {
	color: inherit;
}*/
#mainNav ul li.visible {
	right: -308px;
}
#mainNav ul li.hidden {
	right: -540px;
}
a.navLink {
	color: #666666;
	transition: color .75s;
}
a.navLink:hover {
	color: black;
}


/**************************   Home Page  *********************/
#constantBackground {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	background-attachment: scroll;
  - webkit-touch-callout: none;
  - webkit-user-select: none;
  - moz-user-select: none;
  - ms-user-select: none;
  user-select: none;
  opacity: 0;
  transition: opacity .5s, -webkit-filter .5s;
}
#constantBackground.visible {
	opacity: 1;
}
.blurred {
	-webkit-filter: blur(7px);
}


/**************************   About Page  *********************/

.withAboutTransparentGradient {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: -webkit-linear-gradient(-30deg,rgba(90, 90, 90, 0.7),rgba(0, 0, 0, 0.7));
}
#aboutTransparentGradientContainer {
	opacity: 0;
	transition: all .5s;
}
#aboutTransparentGradientContainer.visible {
	opacity: 1;
}
#aboutTextContainer {
	font-family: 'kepler-std-display', serif;
	color: #ECECEC;
	position: absolute;
	bottom: 105px;
	right: 140px;
	width: 510px;
}
#firstAboutHeaderContainer {
	position: absolute;
	left: 0;
	bottom: 245px;
}
#secondAboutHeaderContainer {
	position: absolute;
	left: 0;
	bottom: 180px;
}
#firstAboutHeaderContainer, #secondAboutHeaderContainer, #aboutParagraphContainer {
	opacity: 0;
	transition: opacity 0.5s;
}
#firstAboutHeaderContainer.visible, #secondAboutHeaderContainer.visible, #aboutParagraphContainer.visible {
	opacity: 1;
}
#aboutParagraphContainer {
	position: absolute;
	left: 0;
	bottom: 0px;
}

#aboutHeaderText {
	font-weight: 400;
	font-size: 60px;
}

#aboutParagraphText {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6em;
}

/**************************   Projects Page  *********************/
#projectContainer {
	position: relative;
	margin: 0 auto;
	width: 2250px;
	margin-top: 13px;
	//border: 1px solid white;
}
.projectAnchor {
	position: relative;
	display: inline-block;
	height: 320px;
	width: 320px;
	margin: 13px;
}
/* All of the @media widths have the width of the navigation bar added in to account for the fact that the screen size
is not really what matters, it's the content size, which is the screen size minus the navigation bar width. */

@media screen and (max-width: 849px) and (min-width: 0px){
	#projectContainer {
		width: 350px;
	}
}
@media screen and (max-width: 1199px) and (min-width: 850px){
	#projectContainer {
		width: 700px;
	}
}
@media screen and (max-width: 1549px) and (min-width: 1200px){ 
	#projectContainer {
		width: 1050px;
	}
}
@media screen and (max-width: 1899px) and (min-width: 1550px){ 
	#projectContainer {
		width: 1400px;
	}
}
.projectSpinnerDiv{
	z-index: 2;
}
.projectSpinnerDiv .spinner .double-bounce1, .projectSpinnerDiv .spinner .double-bounce2 {
	background-color: #efeeee;
}


.projectTranslucentLoadContainer{
	background-color: white;
	opacity: .1;
	z-index: 1;
}
.projectThumbnailContainer {
	z-index: 2;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity .5s;
}

.projectThumbnailContainer.visible {
	opacity: 1;
}

.projectBackgroundImageContainer {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 1s;
}

.projectThumbnailContainer:hover .projectBackgroundImageContainer {
	transform: scale(1.03);
}

.projectTransparentOverlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
	background-color: #FBFBFB;
	opacity: .64;
	transition: height .5s;
}

.projectThumbnailContainer h1 {
	font-family: 'kepler-std-display',serif;
	position: absolute;
	color: black;
	left: 12px;
}

.projectThumbnailContainer h1 {
	font-size: 34px;
}
.projectThumbnailContainer:hover .projectHeader1 {
	color: #ec9239;
}

.projectHeader1 {
	bottom: 4px;
	transition: all .5s;
}
/*This class is also used by the background on the contact page.*/
.transparentGradient {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: -webkit-linear-gradient(-30deg,rgba(90, 90, 90, 0.7),rgba(0, 0, 0, 0.7));
	overflow: scroll;
}
/*
#translucentProjectBackground {
	background-color: white;
	position:absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	opacity: 0;
	transition: opacity .5s;
}
.projectTranslucentBackground{
	background-color: white;
	opacity: .7;
}
#testProjectsParagraph {
	position: absolute;
	top: 200px;
	left: 300px;
}
.projectGradient {
	position: static;
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(-90deg,rgba(255, 255, 255, 0),rgba(255, 255, 255, 0) 60%,rgba(0, 0, 0, 0.34));
	z-index: 0;
}
.projectContentContainer {
	transition: opacity .5s;
	opacity: 0;
}
.projectBackgroundImageContainer {
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: transform .4s;
}
.projectBackgroundImageContainer:hover {
	transform: scale(1.02);
}
.projectContentContainer.visible {
	opacity: 1;
}
.projectLinkContainer {
	position: relative;
	height: 500px;
}
.projectNameLabel {
	font-family: 'kepler-std-display', serif;
	font-weight: 400;
	font-size: 50px;
	color: #FFFFFF;
	position: absolute;
	top: 80%;
	right: 100px;
}
.projectClickSensor {
	cursor: pointer;
}*/
/**************************   Specific Project Page  *********************/
/*Solutions: 
1. @media directives, to set three or four set sizes for the photo container. 
Place the arrows and determine image orientation using javascript.*/

#blackBackground {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	//background-color: #111111;
	background-color: rgb(35, 28, 41);
	overflow: hidden;
}
#thumbnailContainerContainer {
	position: absolute;
	width: 132px;
	left: 0;
	top: 0;
	bottom: 0;
	margin: 20px;
	overflow-y: scroll;
}
#thumbnailContainer {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	max-height: 100%;
	overflow-x: visible;
	opacity: 1;
	transition: opacity .5s;
}
#thumbnailContainer.transparent {
	opacity: 0;
}
.thumbnail {
	width: 130px;
	border: 1px solid black;
	opacity: 0;
	transition: opacity .5s;
}
.thumbnail.visible {
	opacity: 1;
}
.thumbnail:hover {
	border: 1px solid white;
	cursor: pointer;
}
#thumbnailSeparator {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 165px;
}
#mainPhotoSpace {
	position: absolute;
	top: 20px; right: 20px; bottom: 60px; left: 185px;
	opacity: 1;
}
#mainPhotoSpace.animated {
	transition: opacity .5s;
}
#mainPhotoSpace.transparent {
	opacity: 0;
}
#mainPhotoSpaceBackgroundImageBox {
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
	transition: opacity .5s;
}
#mainPhotoSpaceBackgroundImageBox.transparent {
	opacity: 0;
}
#mainImage:hover ~ .mainPictureNavArrow{
	opacity: 0.72;
}
.mainPictureNavArrow {
	height: 40px;
	opacity: 0;
	transition: all 0.25s;
}
#cursorSensorBox {
	position: absolute;
	left: 50%;
	top:50%;
	transform: translateY(-50%) translateX(-50%);
}
#cursorSensorBox:hover .mainPictureNavArrow {
	opacity: 0.72;
}
#largeForwardArrow.mainPictureNavArrow:hover, #largeBackArrow.mainPictureNavArrow:hover {
	cursor: pointer;
	opacity: 1;
} 
#largeForwardArrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
}
#largeBackArrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 15px;
}
#projectTextContainer {
	position: absolute;
	bottom: -55px;
	left: 50%;
	transform: translateX(-50%);
	width: 425px;
	height: 50px;
	transition: bottom .5s;
}
/*The starting position is necessary becasue otherwise it will start out in the middle of the screen cause */
#projectTextContainer.startingPosition {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	width: 400px;
	height: 50px;
}
#projectTextContainer h1,#projectTextContainer h2 {
	position: absolute;
	text-align: center;
	display: inline;
	color: white;
	font-family: 'kepler-std-display', serif;
	top: 50%;
	transform: translateY(-50%);
}
#projectTextContainer #projectName {
	left: 0px;
	font-size: 30px;
	top: 24px;
	opacity: 1;
	transition: opacity .5s;
}
#projectTextContainer #projectName.transparent {
	opacity: 0;
}
#projectTextContainer #staticProjectText {
	right: 90px;
	font-size: 20px;
}
#projectTextContainer #projectCounter {
	right: 45px;
	font-size: 20px;
}
.projectSelectionArrow {
	position: absolute;
	height: 30px;
	top: 50%;
	transform: translateY(-50%);
}
.projectSelectionArrow:hover {
	cursor: pointer;
}
.projectSelectionArrow path {
	transition: all .25s;
}
.projectSelectionArrow:hover path {
	fill: #E68C39;
}
#smallForwardArrow {
	right: -10px;
}
#smallBackArrow {
	right: 20px;
}

/**************************** Press **************************/
#pressContainer {
	position: relative;
	margin: 0 auto;
	width: 2250px;
	margin-top: 13px;
	//border: 1px solid white;
}
.pressAnchor {
	position: relative;
	display: inline-block;
	height: 320px;
	width: 320px;
	margin: 13px;
}
/* All of the @media widths have the width of the navigation bar added in to account for the fact that the screen size
is not really what matters, it's the content size, which is the screen size minus the navigation bar width. */

@media screen and (max-width: 849px) and (min-width: 0px){
	#pressContainer {
		width: 350px;
	}
}
@media screen and (max-width: 1199px) and (min-width: 850px){
	#pressContainer {
		width: 700px;
	}
}
@media screen and (max-width: 1549px) and (min-width: 1200px){ 
	#pressContainer {
		width: 1050px;
	}
}
@media screen and (max-width: 1899px) and (min-width: 1550px){ 
	#pressContainer {
		width: 1400px;
	}
}
.pressTranslucentLoadContainer {
	background-color: white;
	opacity: .1;
	z-index: 1;
}

.pressSpinnerDiv .spinner .double-bounce1, .pressSpinnerDiv .spinner .double-bounce2 {
	background-color: #efeeee;
}

.pressThumbnailContainer {
	z-index: 2;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	opacity: 0;
	transition: opacity .5s;
}

.pressThumbnailContainer.visible {
	opacity: 1;
}

.pressBackgroundImageContainer {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 1s;
}

.pressThumbnailContainer:hover .pressBackgroundImageContainer {
	transform: scale(1.03);
}

.pressTransparentOverlay {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: #FBFBFB;
	opacity: .64;
}

.pressThumbnailContainer h1, .pressThumbnailContainer h2 {
	font-family: 'kepler-std-display',serif;
	position: absolute;
	color: black;
	left: 12px;
}
.pressThumbnailContainer h2 {
	font-size: 12px;
}
.pressThumbnailContainer h1 {
	font-size: 36px;
}
.pressHeader2Line1 {
	bottom: 75px;
}
.pressHeader2Line2 {
	bottom: 58px;
}
.pressThumbnailContainer:hover .pressHeader1 {
	color: #ec9239;
}

.pressHeader1 {
	bottom: 8px;
	transition: color .5s;
}
/*This class is also used by the background on the contact page.*/
.transparentGradient {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background: -webkit-linear-gradient(-30deg,rgba(90, 90, 90, 0.7),rgba(0, 0, 0, 0.7));
	overflow: scroll;
}

/**************************** Contact **************************/

.contactSvg {
	position: absolute;
	width: 85%;
	top: 35%;
	right: 5%;
	transition: transform .4s;
	transform-origin: 30% 50%;
	/*transform: translateY(-50%);*/
}
#contactSvgPart1 {
	z-index: 1;
}
#contactSvgPart1:hover {
	cursor: pointer;
}
#contactSvgPart2{
	z-index: 0;
}
#contactSvgPart1.animate {
	transform: scale(1.02);
}
#contactSvgPart2.animate {
	transform: scale(1.03);/*rotate(360deg) scale(1.25);*/
}
#contactSvgPart2.animate.mouseDown {
	transform: scale(1.01);
}
#contactSvgPart1.animate.mouseDown {
	transform: scale(1);
}
#contactSvgPart2 g path {
	transition: all .4s;
}
#contactSvgPart2.animate g path{
	fill: #EC9239;
}
#contactSvgPart2 g{
	transition: all .4s;
}
#contactSvgPart2.animate g{
	opacity: 1;
}