@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(https://fonts.googleapis.com/css?family=Arimo);
@import url(https://fonts.googleapis.com/css?family=Actor);
@import url(https://fonts.googleapis.com/css?family=News+Cycle);

body{
	font-family: 'Helvetica';
	font-weight: 300;
	padding:20px;
	overflow: hidden;
	font-family: 'Arimo', sans-serif;
	padding-left:00px;
}
a{
	text-decoration: none;
}
#appBox{
	background-color: grefen;
	background-color: blfue;	
	margin-left:0px;
	padding-top:35px;
	background-color: greenf;
	width:1170px;
	height:700px;
	padding-right:20px;
	margin-left:auto;
	margin-right:auto;

}
#mainTitle{
	font-size:32px;
	margin-left:100px;
	margin-top:60px;
	font-family: 'Helvetica';
	font-weight:300;


}
#gearBox{
	width:890px;
	overflow:hidden;
	position: absolute;
	bottom:0px;	
	z-index:-100;


}
#gearBox>img{
	position: relative;
	z-index:-100;
	opacity:0.32;
	width:720px;
	bottom:-300px;
	left:-240px;
	-webkit-animation-name: rotate; 
	-webkit-animation-duration: 400s; 
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-animation-name: rotate; 
	-moz-animation-duration: 400s; 
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
}

@-webkit-keyframes rotate {
	from {-webkit-transform: rotate(0deg);}
	to {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes rotate {
	from {-moz-transform: rotate(0deg);}
	to {-moz-transform: rotate(360deg);}
}

#mainAbout{
	font-size:15px;
	width:500px;
	margin-left:3px;
	margin-top:10px;
	color:#006699;
	font-weight: 300;
	line-height: 150%;
	background-color: refd;
	transition:opacity 1s;
	font-family: 'Arimo', sans-serif;

	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	-ms-animation: fadein 1s; /* Internet Explorer */
	-o-animation: fadein 1s; /* Opera < 12.1 */
	animation: fadein 1s;
}

#mainContact{
	font-size:15px;
	color:#333;
	margin-left:9px;
	color:#444;
	font-family: 'Arimo', sans-serif;

	-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.5s; /* Firefox < 16 */
	-ms-animation: fadein 1.5s; /* Internet Explorer */
	-o-animation: fadein 1.5s; /* Opera < 12.1 */
	animation: fadein 1.5s;
}
#projectsButton{
	font-size:16px;
	color:#333;
	margin-left:5px;
	color:gray;

}

#projectsButton a{
	text-decoration: none;
	color:black;
}
#projectsButton a:hover{
	color:#006699;
	cursor: pointer;
	transition: color .2s;
	text-shadow:1px 1px 1px #eee;
}



#headerBar{
	width:400px;
	height:100px;
	margin-top:0px;
	background-color:none;
	background-color:#EBEBfEB;
	background-color: #206h0A0;
	background-color: orasnge;
	margin-left:55px;
	border-bottom: solid;
	border-bottom-width: 1px;
	border-bottom-color: lightgray;

	width:1180px;
	padding-right:20px;
	margin-left:auto;
	margin-right:auto;
}
#headerTitle{
	font-size:63px;
	margin-top:0px;
	position:absolute;
	color:#262625;
	/*text-shadow: 2px 2px 14px lightgray;*/
	font-family: 'Raleway', sans-serif;
	font-family: 'Pontano Sans', sans-serif;
	font-family: 'Helvetica';
	border-bottom: none;
	border-bottom-width: 1px;
	border-bottom-color: #4F4F4E;
	font-weight:300;
	font-family: 'Arimo', sans-serif;
	font-family: 'Pontano Sans', sans-serif;
	font-family: 'Lato', sans-serif;

	text-decoration: none;
	opacity: 0.9;
	padding-bottom:0px;
	letter-spacing: 1px;


	/*-webkit-animation: fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */



	letter-spacing: 4px;
}

#headerTitle span{
	position: relative;
	color:#2060A0;
	color:#111;
	color:#222;
	font-size:18px;margin-left:6px;
	margin-top:3px;
	text-shadow: none;
	-webkit-animation: appearslide, fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */
	opacity:0.8;
	font-family: 'Arimo', sans-serif;
	letter-spacing: 2px;


}

#nav{
	border:none;
	list-style: none;
	float:right;
	margin-right:250px;
	height:50px;
	color:#222;
	margin-top:95px;
}
#nav>a{
	float:left;
	padding-left:15px;
	padding-right:15px;
	margin-left:5px;
	margin-right:5px;
	font-size: 13px;
	font-weight: 300;
	text-transform: uppercase;
	text-decoration: none;
	color:black;
	border-bottom-width:1px;


}
#nav>a:hover{
	color:#006EB8;
	cursor: pointer;
	border-bottom:solid;
	border-bottom-width:1px;

}

.category_column{
	padding-right:40px;
	height:500px;
	background-color:lightgray;
	float:left;
	margin:2px;
	color:#333;

}
.category_column:hover{
	cursor: pointer;
	background-color:#2060A0;
	color:white;


}
.category_column>p{

	margin-top:18px;
	margin-left:10px;
	font-size:17px;
}
.projectTile{
	position: absolute;
	width:320px;
	height:200px;
	background-color:gray;
}
.projectTile>p{
	padding:10px;
	color:white;
}
.categoryLabel{
	margin-left:0px;
	margin-right:30px;
	padding-left:10px;
	padding-right:35px;
	padding-top:5px;
	padding-bottom: 5px;
	margin-top:18px;
	margin-bottom:23px;
	font-size:16px;
	text-transform: uppercase;
	

	border-bottom:solfid;
	border-color:gray;
	border-left:soflid;
	border-left-color:white;
	font-weight:300;
	border-left:solfid;
	border-left-width:1px;
	border-left-color:gray;

	border-bottom:solifd;
	border-bottom-width:1px;
	border-bottom-color:gray;
	border-left:solid;
	border-left-width:2px;
	border-left-color:white;

	font-family: 'Arimo', sans-serif;

}
.categoryLabel:hover{
	cursor: pointer;
	color:#2060A0;
	color:#2060A0;
	border-left:solid;
	border-left-width:2px;
}
.selected_category{
	border-left:solid;
	border-left-width:2px;
	color:#2060A0;

}
.categoryBar{
	float:left;
	background-color: refd;
	padding-bottom: 12px;
	background-color: reld;
}



.categoryLabel:active{
	background-color: none;
}

.coverimage:hover {
	transition:width .4s;
	transition:opacity .4s;
	opacity:.99;
	cursor:pointer;
}
.blueCover{
	position:absolute;
	width:inherit;
	height:inherit;
	background-color:#2060A0;
	opacity:0;
	z-index:11;
	transition:opacity .3s;
}
.blueCover p{
	color:white;
	font-size:11px;
	padding:9px;
	margin-top:25px;
}
.coverimage{
	position:relative;
	z-index:0;

}
.coverimage>img {

	height:100%;
	margin-left:-100%;
	transition:width .2s;
	transition:height .2s;
	transition:opacity .2s;
	position:relative;
	opacity:1.0;
	z-index:0;
	/*-webkit-animation: fadein 0.8s; 
	-moz-animation: fadein 0.8s; 
	-ms-animation: fadein 0.8s; 
	-o-animation: fadein 0.8s; 
	animation: fadein 0.8s;*/
}
.imageTitle{
	position:absolute;
	top:0px;
	left:0px;
	margin-left:0px;
	background-color:none;
	opacity:1;
	padding:8px;
	padding-right:6%;
	font-size:13px;
	transition: opacity .4s;
	color:white;
	text-align:cente6r;
	z-index:13;
	text-transform:upfpercase;
	color:#222;
	color:white;
	color:#2060A0;
	color:#333;
	background-color: lightgray;
	opacity: 0.95;
	width:94%;
	transition:all .3s;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Arimo', sans-serif;



}
.imageTitle:hover{
	cursor:pointer;
}
.imgHolder {
	position: relative;
	height:410px;
	width:205px;
	box-shadow: 1px 1px 4px lightgray;

	background-color:#ccc;
	margin:4px;
	float:left;
	overflow:hidden;
	opacity:1.0;

	-moz-transition: opacity 0.2s; /* Firefox 4 */
	-webkit-transition: opacity 0.2s; /* Safari and Chrome */
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;


	-webkit-animation: fadein 0.2s; 
	-moz-animation: fadein 0.2s;
	-ms-animation: fadein 0.2s; 
	-o-animation: fadein 0.2s; 
	animation: fadein 0.2s;*/

	/*-webkit-animation: widthin 0.8s; */

}


.imgHolder:hover .imageTitle{

	opacity:1;
	/*transition:opacity .3s;
	transition:background-color .3s;*/
	color:white;

	background-color: transparent;
	transition:all .3s;


}

.imgHolder:hover .blueCover{

	opacity:.70;
	/*transition:opacity .4s;*/
	cursor:pointer;
}

.imgHolder img{
	opacity:0;
	-moz-transition: opacity 1.0s; /* Firefox 4 */
	-webkit-transition: opacity 1.0s; /* Safari and Chrome */
	-o-transition: opacity 1.0s;
	transition: opacity 1.0s;
}
.coverDescription{

	color:white;
	font-size:11px;
}

#projectColumnContainer{
	position: relative;
	overflow:hidden;
	width:853px;
	height:450px;
	left:0px;
	float:left;
	top:14px;
}

.projectColumnSlider{
	position: absolute;
	width:5000px;
	opacity:1.0;
	left:0px;
}

.projectColumnSlider.category-if{
	/*-webkit-transition:margin-top cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;
	-moz-transition: margin-top cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;
	-o-transition: margin-top cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;
	transition:margin-top cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;*/
	
}

.projectColumnSlider.category-if.ng-leave{
	margin-top:0px;

}
.projectColumnSlider.category-if.ng-leave-active{
	margin-top:-430px;


}
.projectColumnSlider.category-if.ng-enter{
	margin-top:430px;
	/*margin-left:200;*/

}
.projectColumnSlider.category-if.ng-enter-active{
	margin-top:0px;
	margin-left:0;

}

.mainview{
	-webkit-transition:opacity cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;
	transition:opacity cubic-bezier(0.250, 0.350, 0.350, 0.980) 1.0s;
}

.mainview.ng-enter{
	opacity:1.0;
}
.mainview.ng-enter-active{
	opacity:1.0;
}

.mainview.ng-leave{
	opacity:0.0;
	display: none;

}
.mainview.ng-leave-active{
	opacity:0.0;
}




@keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}


@keyframes slideright {
	from { left: -40; }
	to   { left: 0; }
}

/* Firefox < 16 */
@-moz-keyframes slideright {
	from { left: -40; }
	to   { left: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideright {
	from { left: -40; }
	to   { left: 0; }
}

/* Internet Explorer */
@-ms-keyframes slideright {
	from { left: -40; }
	to   { left: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slideup {
	from { top: 130; }
	to   { top: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes appearslide {
	from { top: 0; }
	to   { top: 0; }
}



.slideButtons{
	color:darkgray;
	position: absolute;
	text-decoration: none;
	width:100%;
	height:35px;
	text-align: center;
	bottom:0px;
	font-size:20px;
	opacity:.8;
	transition:opacity .8s;
	float:left;
	margin-left:auto;
	margin-right:auto;
	/*display: none;*/

}
.slideButtons:hover{

	cursor: pointer;
}
.slideButtons .circleButton{
	margin-left:10px;
	margin-right:10px;
	transition: opacity .3s;
	transition: color .3s;
	color:#bbb;


}
.arrow{
	padding-left:28px;
	padding-right:28px;

	margin-left:10px;
	margin-right:10px;
	color:#111;
	background-color: #E1E1F2;
	background-color: #bbb;
	
	border-width:1px;
	border-color:gray;

	transition: all .2s;
	border-radius:2px;
	font-size:18px;


}
.arrow:hover{
	color:#659EEB;
	cursor:pointer;
	transition: all .2s;
	color:white;
	background-color:#2060A0;

}

.projectarrow{
	position: relative;
	bottom:0px;
	margin:3px;


	padding-bottom:1px;
	padding-top:1px;
	padding-left:47px;
	padding-right:47px;

	top:5px;
	color:#555;
	color:white;
	background-color:#bbb;
	color:#222;
	/*margin-left:200px;
	margin-right:200px;*/
}

.projectarrow:hover{

	background-color:#2060A0;
	color:white;
}

.projectarrow.leftArrow{
	float:left;

}
.projectarrow.rightArrow{
	float:right;

}






.slideButtons .circleButton:hover{
	color:#659EEB;
	cursor:pointer;
	transition: all .3s;

}

.projectInfoBox{
	position: relative;
	float:left;
	width:279px;
	margin-left:10px;
	margin-top:14px;
	border-left:solid;
	padding-left:17px;
	border-left-width:1px;
	border-left-color:lightgray;
	-webkit-animation: slideright 1.4s; /* Safari, Chrome and Opera > 12.1 */

}
.projectTitle{
	font-size:21px;
	padding-bottom:10px;
}
.projectYear{
	font-size:13px;
	padding-bottom:10px;
	color:#345DA8;



}
.projectLocation{
	font-size:13px;
	padding-bottom:10px;
	color:#333;



}
.projectDescription{
	font-size:14px;
	line-height: 140%;
}
.image_caption{
	position: absolute;
	font-size:14px;
	padding-top:4px;
	color:#345DA8;
	bottom:0px;

}
.imageViewerBox{
	/*width:830px;*/
	/*height:500px;*/
	position: relative;
	width:680px;
	height:540px;
	float:left;
	left:45px;
	margin-top:-5px;
	overflow-x: hidden;
	overflow-y:visible;

}

.imageViewerBox:hover{
	cursor: pointer;
}
.imageViewerBox img{
	height:510px;
	opacity:0;
	-moz-transition: opacity 0.8s; /* Firefox 4 */
	-webkit-transition: opacity 0.8s; /* Safari and Chrome */
	-o-transition: opacity 0.8s;
	transition: opacity 0.8s;
}
.imageViewerBox div{
	position: absolute;
	padding-right:0px;
}
.thumbnailBox{
	position: relative;
	background-color: oranfge;
	width:145px;
	float:left;
	left:65px;
	margin-top:-5px;
	height:510px;
	top:0px;
	overflow:hidden;

}
.thumbnailSliderContainer{
	position: relative;
	top:40px;
	height:430px;
	overflow:hidden;
}
.thumbnailSlider{
	position: relative;
	top:0px;
	overflow:hidden;
}
.featherTop{
	position: absolute;
	width:100%;
	height:50px;
	background-color: red;
	opacity:1.0;

	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.thumbnailArrow{
	position: absolute;
	width:121px;
	
	height:10px;
	padding-top:4px;
	padding-bottom:14px;
	text-align: center;
	border-radius: 1px;
	background-color:#5781A3;
	font-size:17px;
	color:white;
	background-color:#ddd;
	color:#222;
	

}
.up{
	top:5px;

}
.down{
	bottom:5px;
}
.thumbnailArrow:hover{
	cursor: pointer;
	opacity:0.8;
	background-color:#2060A0;
	color:white;
}
.imageThumb{
	border-right:solid;

	transition: opacity 0.2s;
	border-right-color:white;

}
.thumbImage{
	opacity:0;
	width:120px;
	float:left;
	margin-bottom:5px;
	/*transition: width 0.2s;*/
	border-right: solid;
	border-right-color:white;
	border-right-width:3px;
	padding-right:2px;
	-moz-transition: opacity 0.5s; /* Firefox 4 */
	-webkit-transition: opacity 0.5s; /* Safari and Chrome */
	-o-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.imageThumb:hover img{
	cursor:pointer;
	opacity:0.7;
	transition: opacity 0.1s;
	border-right-color:#2060A0;
}
.thumbImageDiv{
	position:relative;
	display:inline;
}
.thumbImageDiv:hover{
	cursor:pointer;
}


.selected_thumb{
	border-right-color:#2060A0;
}

.projectImage{
	position: relative;
	left:0px;
	background-color: gray;
	width:680px;
	/*width:670px;*/
	/*-webkit-transition:all ease 1.4s;
	transition:all ease 1.4s;*/
	/*-webkit-transition:opacity ease 0.6s;
	transition:opacity ease 0.6s;*/
}
.projectImage img{
	display:block;
	margin-left:auto;
    margin-right:auto;
}

.projectImageHolder{
	margin-left:auto;
    margin-right:auto;
}


.imageArrows{
	width:100%;
	position: absolute;
	bottom:0px;
	text-align: center;

}
.imagearrow{
	opacity:0.8;
	display: none;

}
.imagearrow:hover{
	opacity:1.0;
}


.projectImage.ng-enter{
	opacity:0.0;
}
.projectImage.ng-enter-active{

	opacity:1.0;
}
.projectImage.ng-leave{
	opacity:1.0;

}
.projectImage.ng-leave-active{
	opacity:0.0;
}