/*--- Imports Google font -----*/
@import url(//fonts.googleapis.com/css?family=Noto+Sans:400,700);

/* html5doctor.com Reset v1.6.1 - http://cssreset.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/* quick way to prevent parent box from collapsing */
.clearfix:after { 
   /*content: "."; ----- Good to remember, having a '.' added an off space at the bottom that was difficult to determine*/
   content: "";
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

/*----- CSS Reset Above  ------*/


body, html{
	font-family: 'Noto Sans', sans-serif;
	font-size: small;
	color: #848484;
	width: 100%; height: 100%; 
	line-height: 1.4;
}

body{
	overflow-x: hidden; /*-- If you apply this on html tag scrollTop animation breaks in chrome --*/
}

#loader{
	position: fixed;
	width: 100%; height: 100%;
	background-color: white;
	top: 0; left: 0;
	background-image: url(../img/assets/loader.gif);
	background-position: center;
	background-repeat: no-repeat;
	z-index: 10;
}


#wrapper{
	position: relative;
	max-width: 1350px;
	margin: 0 auto;
	min-height: 100%;
}

#wrapper:before{
	content: "";
	position: absolute;
	height: 100%;
	right: 84%;
	/*
	width: 26%;
  	background-color: #fff;*/
	border-right: 1px dashed black;
	z-index: 2;

}

.main{ 
	-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  	transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
	
	/*top: 0; left: 0;*/
	width: 100%;
	top: 0; left: 0; opacity: 1;
	padding-bottom: 113px;
  	/*background-color: rgba(255,255,255,0.9);*/
}

.reg_ani .main.ng-enter { position: absolute; top: 100%; opacity: 0; }
.reg_ani .main.ng-enter.ng-enter-active { top:0; opacity: 1; }
.reg_ani .main.ng-leave{ position: relative; top: 0; opacity: 1;}
.reg_ani .main.ng-leave.ng-leave-active { opacity: 0; }

.reg_ani.side_ani .main.ng-enter { position:absolute; opacity: 0; top: 0; left: 100%; }
.reg_ani.side_ani .main.ng-enter.ng-enter-active { opacity: 1; left: 0;}
.reg_ani.side_ani .main.ng-leave{ position:relative; margin-left: 0; opacity: 1;}
.reg_ani.side_ani .main.ng-leave.ng-leave-active { margin-left:-100%; opacity: 0; }

/*.home_ani .main{ z-index: 2; }*/
.home_ani .main.ng-enter { opacity: 0; }
.home_ani .main.ng-enter.ng-enter-active{ opacity: 1 ; }
.home_ani .main.ng-leave{ opacity: 1;}
.home_ani .main.ng-leave.ng-leave-active { opacity: 0; }
/*
.side_ani .main.ng-enter #prev_btn{z-index: 0;}


.home_ani .main.ng-enter { opacity: 0; }
.home_ani .main.ng-enter.ng-enter-active { opacity: 1; }
.home_ani .main.ng-leave{ opacity: 1;}
.home_ani .main.ng-leave.ng-leave-active { opacity: 0; }
*/


nav{
	-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  	transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
	position: absolute;
	width: 100px;
	right: 86%; top:92px;
	z-index: 4;
	text-align: right;
	opacity: 0;
}

nav a{ text-decoration: none; display: inline-block; position: relative; }
nav a:visited, nav a:link, nav a:active{ color:inherit;} 

nav a.current:before{
	content: "";
	width: 10px; height: 10px;
	position: absolute; left: -14px; top: 50%;
  	margin-top: -5px;
	background-color: #779a0b;
	border-radius: 24px;
}

nav ul{ margin-bottom: 6px; }

nav h3{ color: black; font-weight: normal;}

.home nav{ opacity: 0; }

#home_nav{
	position: absolute;
	right: 84%; top: 100px;
}

#home_about{
	position: absolute;
	right: 24px; top: 0;
	cursor: pointer;
}

#home_projects{
	position: absolute;
	left: 24px; top: 0;
	width: 200px;
	cursor: pointer;
}

#project_links, #about_links{ display: none; }


.about #about_nav{ color: #779a0b; font-weight: 700; }
/* .about #about_links{ display: block; } */


.home #about_nav, .project #about_nav{ margin-bottom: 6px;}
.home #project_nav, .project #project_nav{ color: #779a0b; font-weight: 700; }
/* .home #project_links, .project #project_links{ display: block;} */

#nav_fixed{ position: fixed; width: 100%; max-width: 1200px; z-index: 2;} 

.logo_img{
	-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  	transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
	position: absolute;
	top: 100px; right: 8%;
	z-index: 4;
}

.reg_ani .logo_img{ top: 30px;}

footer{
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: smaller;
	width: 68%; right: 8%;
	border-top: medium solid black;	
	padding-bottom: 30px;
	padding: 30px 0 20px;
	background-color: #fff;
}

.home_ani nav{ top: 672px; }
.home_ani #nav_fixed{ position: absolute;}
section.home_section{ padding-top: 600px; }

.about h2{
	color: black;
	font-size: 2.4em;
	padding-bottom: 6px;
	border-bottom: medium solid black;
	margin-bottom: 24px;	
}

.about article{ margin-bottom: 32px;}
.about_section{ margin-bottom: 60px;}

.media_img, .media_text{
	width: 48%;
	float: left;
}

.media_text h5{ font-weight: normal; font-size: 0.8em; color: black; }
.media_text h4{ font-size: 1.2em; margin-bottom: 12px;  color: black;}
.media_text p{ margin-bottom: 8px;}
.media_text a{ color: black;}

.media_img{ margin-right: 4%; }
.media_img img{ width: 100%; }

.contact_info, .contact_map{ float: left; }
.contact_info{ width: 32%; margin-right: 4%; }
.contact_map{ width: 64%; overflow: hidden; position: relative; }
.contact_map img{ width: 100%; }
.contact_map iframe{ position: absolute; /*left: 50%; margin-left: -296px;*/ top: 0; }
.contact_map iframe{ width: 100% !important; height: 100% !important;}

#ca21_footer{ 
	position: relative;
	width: 100%; margin: 40px 0;
}

.ca21_quote{
	font-size: 1.72em;
	color: #000;
	font-weight: lighter;
	line-height: 1.6em;
}

.ca21_contributor{
	display: block;
}

.ca21_contributor strong{ color: #000;}

.ca21_ceo{ margin-top: 40px;}
.ca21_ceo p{ width: 66%; float: right; }
.ca21_ceo img{ display:block; width: 30%; float: left;}

p{
	margin-bottom: 2em;
	line-height: 1.62em;
}

/*------- Legacy CSS --- Modified Below ------------*/

.right{
	float: right;
	width: 68%; 
	padding: 0 8%;
	/*-- 84% should be total --*/
	/*-- 8% minus total should be padding / margin ---*/
}

section.right{ min-height: 100%; }
section.right:before{
	content: ".";
	visibility: hidden;
	height: 120px;
	display: block;
	position: relative;
}



/*--- Home page styles -----*/
#bg1, #bg2, #bg3 {
	background-repeat: no-repeat;
    background-position: center; 
	width: 2000px; left: 50%; margin-left: -1000px;
	position: absolute;
	z-index: 4
}

#bg1 {
	background-image: url(../img/home/bg1.jpg);
	height: 30px;	
	top: 0;
}
#bg2 {
	background-image: url(../img/home/bg2.jpg);
	height: 135px;	
	top: 242px;
}
#bg3 {
	background-image: url(../img/home/bg3.jpg);
	height: 185px;
	top: 429px;
}

/*---- Projects & photos classes -------*/
#p_name {
  text-align: center;
  font-size: 68px;
  font-weight: 700;
  color: black;
  opacity: 1;
}

#p_listing {
	border-top: medium solid black;
	border-bottom: medium solid black;	
	padding: 20px 0;
	margin-bottom: 60px;	
}

.info_left, .info_right {
	width: 47.5%;
	padding-right: 2.5%;
	float: left;	
}

#p_listing li { list-style: none; padding-bottom: 5px; }

.photo_container{ 
	position:relative; 
	display: block; 
	margin-bottom: 36px;
}
.photo_container img{ width: 100%;}
.photo_container img.next, .photo_container img.current, .photo_container img.prev{ display:none; position: absolute; left: 0; top: 0; }
.photo_container img.current_buffer{ position: absolute; left: 0; top: 0;}
.photo_container img.current{ display: block; opacity: 0;}



#next_btn, #prev_btn {
	position: absolute;
	width: 5%; height: 72px;
	top: 50%; margin-top: -36px;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	z-index: 2;
}

#next_btn { right: -7%; background-image: url(../img/assets/next.gif); }
#prev_btn { left: -7%; background-image: url(../img/assets/prev.gif); }

.thumbnails{ width: 100%; }

.thumb{
	/*display: none;*/
	opacity: 0;
	position: relative;
	width: 23.776%;
	float: left;
	margin-right: 1.632%;
	margin-bottom: 1.632%;
	overflow: hidden;
	cursor: pointer;
}

.thumb:nth-child(4n){
	margin-right: 0;
}

.thumb img{ 
	width: 100%;
	aspect-ratio: 260/140;
	object-fit: cover;
	display: block;
}
.thumb img:nth-child(2) {
	-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  	transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}
.thumb:hover img:nth-child(2) {
	opacity: 1;
}

.thumb_text {
	position: absolute;
	background-color: #000000;
	color: white;
	bottom: -20px;
	width: 88%; height: 20px;
	line-height: 20px;
	transition: bottom .2s;
	font-size: smaller;
	padding: 0 6%;
}

.thumb_text:after{
	content: "";
	position: absolute;
	top: 50%; margin-top: -5px; right: 6%;
	display: block;
	height: 10px; width: 10px;
	border-radius: 24px;
	background-color: #779a0b;
}

.thumb:hover .thumb_text {
	bottom: 0px;
}


/* type styles */

.bold {
	font-weight: 700;
	color: #262626;
}
.active {
	font-weight: 700;
	color: #779a0b;
}
.green {
	color: #779a0b;
}

.spacer {
	display: inline-block;
	width: 2%;
}

.ld_gf{
	min-height: 45px;
	background-repeat: no-repeat;
	background-image: url(../img/assets/loading.gif);
	background-position: center;
}

.spacer_bottom{ height: 300px;}


.fade_left{
	display: none;
	z-index: 1;
	position: absolute;
	width: 8%; height: 100%; right: 76%; top: 0;
	  background: -moz-linear-gradient(left,  rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 90%); /* FF3.6+ */
	  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255, 1)), color-stop(90%, rgba(255,255,255, 0))); /* Chrome,Safari4+ */
	  background: -webkit-linear-gradient(left,  rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 90%); /* Chrome10+,Safari5.1+ */
	  background: -o-linear-gradient(left,  rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 90%); /* Opera 11.10+ */
	  background: -ms-linear-gradient(left,  rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 90%); /* IE10+ */
	  background: linear-gradient(to right,  rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 90%); /* W3C */
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#00ffffff", GradientType=1 ); /* IE6-9 */
}

.fade_left:before{
	content: "";
	position: absolute;
	width: 2000px; height: 100%;
	background-color: #fff;
	top: 0;
	right: 100%;
}

.side_ani .fade_left{
	display: block;
}


#nav_hamburger {
	display: none;
	position: absolute;
	top: 90px; left: 0;
	width: 36px;
	height: 36px;
	cursor: pointer;
	background-image: url(../img/assets/hamburger.png);
	background-size: 36px;
	background-repeat: no-repeat;
	background-position: center left;
	padding: 10px 10px 10px 0;
	background-color: white;
	z-index: 12;
}


.reg_ani #nav_hamburger{ top: 20px;}

#nav_hamburger.sticky{ position: fixed; top: 0; }

.email_link{
	  color: inherit;
	  text-decoration: none;
	  padding-bottom: 2px;
	  border-bottom: dashed 1px #ccc;
}


@media only screen and (max-width: 700px) {
	
	.logo_img{ height: 62px; }

	#home_nav{ display: none !important; }

	.right{
		float: none;
		width: 84%; 
		padding: 0 8%;
		/*-- 84% should be total --*/
		/*-- 8% minus total should be padding / margin ---*/
	}
	
	#wrapper{ overflow-x: hidden;}
	
	#wrapper:before{
		display: none;
	}

	nav{
		opacity: 1 !important;
		top: 0 !important;
		background-color: rgba(255,255,255,0.98);
		padding: 24px;
		font-size: 1.8em;
		width: 200px;
		height: 100%;
		left: 0;
		border-right: 1px dashed black;
	}

	#nav_hamburger{ display: block;}

	#nav_fixed{ 
		-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
  		transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s;
		position: fixed !important; 
		z-index: 8; width: 200px;
		height: 100%; left: -100%;
	}

	.side_ani .fade_left{ display: none; }

	.about h2{ font-size: 2em; }

	footer{ width: 84%; }

	.thumb{
		width: 48%;
		margin-right: 2%;
		margin-bottom: 2%;
		float: left;
	}

	.thumb:nth-child(even){
		margin-right: 0;
	}

	.media_img{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1em;
		float: none;
	}

	.media_text{
		width: 100%;
		float: none;
	}

	.contact_info {
	  width: 100%;
	  margin-right: 0;
	  margin-bottom: 1em;
	  float: none;
	}
	.contact_map{
		width: 100%;
		float: none;
	}
	  
		
}

.older_IE_warning{
	position: absolute;
  	top: 0;
  	left: 0;
  	background-color: red;
  	z-index: 9999;
  	width: 92%;
  	padding: 14px 4%;
  	text-align: center;
  	color: white;
  	font-size: 14px;
  	line-height: 22px;
}