@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}








/* end of reset-start styling */

body {
	
	
	text-align:left;
	color:#000000;
	font-family:'Karla', sans-serif;
	font-style:normal;
}




/* -------- container style -------- */

#container {
	
	width:1024px;
	height:1720px;
	margin-left:auto;
	margin-right:auto;
	
}




/* -------- header style -------- */

#header {

width:1024px;
background-color:rgba(255,255,255,1.00);
opacity:0.9;
height:170px;
position:fixed;
z-index:100;

}


/* -------- logo -------- */

.logo {
	
	margin: 75px 0 20px 660px;
}





/* -------- header navigation style -------- */



.navigationheader, .navigationfooter, .navigationfooter1 {
	float:left;
	margin: 100px 0 0 60px;
	color:#FBF8F8;
	
}

.navigationheader li, .navigationfooter li, .navigationfooter1 li {
	display:inline;
	padding: 0 16px 16px 0;
	font-size:0.85em;
	font-varient:small-caps;
	
	
}

.navigationheader a, .navigationfooter a, .navigationfooter1 a {
	text-decoration:none;
	color:#999b9d;


}




.navigationheader a:hover, .navigationfooter a:hover .navigationfooter1 a:hover {
	text-decoration:blink;
	margin:30px 0 0 0;
	color:#00ae8d;

}






/* -------- content style -------- */

#content {
	
	
	width:940px;
	padding:0 42px 0 42px;    /* top right bottom left */
	overflow:auto;
	z-index:50;
}






/* -------- top column div -------- */



.topcolumn {
	float:left;
	width:625px;
	padding:180px 10px 0 0;
	 position:relative;
 
}





/* -------- two column divs 1/2 -------- */


/* -- the styling below relates to the divs that hold the images with hover effects, they must have a width applied - images in project350 are 350px wide, images in project700 are 700px wide -- */

.topcolumn1 {
	width:305px;
	float:right;
	margin-top:180px;
	
}

/* -------- middle column divs -------- */





.middlecolumn {
	float:left;
	width:305px;
	padding:10px 0 0 0;
}


.middlecolumn1 {
	float:right;
	width:625px;
	padding:10px 0 0 0;
	
}




/* -------- third column divs -------- */


.thirdcolumn {
	float:left;
	width:625px;
	padding:10px 0 0 0;
	
}

.twocolumnlist1 {
	width:305px;
	float:right;
	padding:10px 0 0 0;

}


	
.twocolumnlist2 {
	width:305px;
	float:right;
	padding:10px 0 0 0;

}



#video3 {
	margin:20px 0 10px 0;
	
}



/* -------- bottom image divs -------- */


.bottomlargeimage {
	float:right;
	width:625px;
	padding:10px 0 10px 0;
}



.bottomsmallerimage {
	float:left;
	width:305;
	display:inline;
	padding:10px 10px 6px 0;

}






/* -------- images before hover -------- */


 
 
 
 
/* -------------------------- hover effect 1 css --------------------------- */

 

		
	
	
.hovereffect {
  width: 100%;
 font-style:inherit;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align:left;
  font-family:'Karla', sans-serif;
  background-color:#00ae8d;
  text-decoration: underline;
  cursor: default;
 

  
    
  }


  



.hovereffect .overlay {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;

}



.hovereffect:hover .overlay {
  opacity: 2;
  filter: alpha(opacity=100);
  
}



.hovereffect img {
  display:block;
  position: relative;
  -webkit-transition: all 0.45s;
  transition: all 0.50s;
}



.hovereffect:hover img {
     -webkit-filter: opacity(30%); /* Safari */
	  filter: opacity(40%);
	  
}


.hovereffect h2 {
  text-transform:capitalize;
  text-align:right;
  font-size: 20px;
  font-weight:500;
  margin:50px 0px 10px 5px;
  color:rgba(255,252,252,1.00);
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=2);
  -webkit-transition: opacity 0.10s, -webkit-transform 0;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
}


  
hr {
	
	display:block;
	 margin:-5px 400px 0 12px;
	width:15px;
	
}



.hovereffect h3 {
text-transform:capitalize;
  margin:-15px 0px 0 7px;
   text-align:right;
   font-size: 16px;
   font-weight:200;
  background-color: transparent;
  color:rgba(255,248,248,1.00);
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);	
	
}

.hovereffect h4 {
	font-size:8.5px;
	text-transform:uppercase;
	text-align:right;
	 margin:40px 0px 0 40px;
	 text-justify:distribute;
	color:rgba(255,248,248,1.00);
	 filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);	
	
	
}



.hovereffect a, .hovereffect p {
  color: #FFF;
  margin:0px 60px 0 5px;
  
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}



.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h3 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}



.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h4 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,10,0);
  transform: translate3d(0,0,0);
}







/* -------- footer style -------- */

#footer {
	width:1024px;
	height:100px;
	
	
	
}








/* ------------------------ Project Page Style Treaty City --------------------------------- */

#leftcolumntext {
    width:205px;
	margin:170px 0 0 5px;
	float:left;
	position:fixed;
	
	
}

#rightcolumntext1 {
 
	float:right;
	margin:230px 170px 0 300px;
	position:fixed;
	
	
}


h1 {
	font-size:19px;
	font-weight:600;
	margin:30px 10px 0 0;
	font-family: 'Karla', sans-serif;
	line-height:28px;
	color:#00ae8d;


}

h2 {

	font-size:16px;
	font-weight:50;
	font-family: 'Karla', sans-serif;
	line-height:20px;
	
}



h3 {
	
	
	font-size:12px;
	font-weight:500;
	line-height:30px;

}






p {
	
	font-size:10px;
	line-height:15px;
	font-weight:200;
	margin:0 3px 0 0;
	color:rgba(93,93,93,1.00);
	
}

p1 {
	font-size:10px;
	line-height:15px;
	width: 20px;
    word-wrap: break-word;
	font-weight:200;
	margin:0 40px 0 0;
	color:rgba(93,93,93,1.00);
	
}



.prevandnext {
	
	font-size:10px;
	line-height:50px;
	color:#00ae8d;
	float:left;
	
	
	
}

.prevandnext li {
	
	display:inline;
	padding: 0 20px 0 0;
	font-size:11px;
	font-varient:small-caps;
	
}


.prevandnext a {
	
	text-decoration:none;
	color:#999b9d;
	
}


.prevandnext a:hover {
	
	color:#00ae8d;
	text-decoration:underline;
	
}




.navigationfooter {
	
	font-size:14px;
	font-variant:small-caps;
	line-height:50px;
	color:#00ae8d;
	float:right;
	margin:1px 65px 10px 200px;

}



.navigationfooter1 {
	
	font-size:14px;
	font-variant:small-caps;
	line-height:50px;
	color:#00ae8d;
	float:right;
	position:fixed;
	margin:600px 65px 10px 800px;

}
	

/* -------- Treaty City Project Pages -------- */


.rightprojectimages {
	float:right;
	width:305;
	display:inline;
	padding:180px 0 0 0;
}


.rightprojectimages1 {
		float:right;
		margin:30px 100px 0 170px;
	width:305;
	position:fixed;
	display:inline;
	padding:180px 0 0 0;
}

.rightprojectimages2 {
		float:right;
		margin:30px 100px 0 300px;
	width:305;
	position:fixed;
	display:inline;
	padding:180px 0 0 0;
}



	
.imgmargin1 {
	padding:10px 0 0 0;
	
}


.imgmargin2 {
	padding:10px 0 10px 0;
	
}