@charset "UTF-8";
/* Loading */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.loading {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.25rem solid rgba(0, 0, 0, 0.1);
  border-top-color: #ccc;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
	position:absolute;
	top:50%;
	left:50%;
	margin:-12px 0 0 -12px;
}
.load {
	position:fixed;
	top:0;
	right:0;
	left:0;
	bottom:0;
	background-color:white;
	z-index:1;
}
#container {
	position:relative;
	z-index:2;
	height:100%;
}


/* End Loading */


* { margin:0; padding:0; }
html, body {
	background-color: #fff;
	border:0;
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	height:100%;
}
a {outline:none}
ul, li {
	list-style-type: none;
}
li:hover {
	cursor:pointer;	
}
.white {
	width:100%;
	padding:0;
	background:#fff;
	transition: background 1s;
	}
.grey {
	padding:0;
	width:100%;
	background:#EBEBEB;
	transition: background 1s;
	}
#spacer {
	display:block;
}
#content {
	position: absolute;
	width: 100%;
	overflow: hidden;
	top: -1px;
	left: 0;
	z-index: 100;
	}
#banner {
	position:fixed;
	top:0;
	z-index:500;
	width:100%;
	height:90px;
	background-color: white;
}
#masthead {
	width:100%;
	height:40px;
	margin: 25px auto 0;
	background-color: white;
	font-size:12px;
	color:black;
	font-weight:bold;
}
#masthead nav {
	position:relative;
	top:-42px;
}
#masthead nav a, #masthead nav a:link, #masthead nav a:visited {
	color:black;
	text-decoration:none;
	margin:1px 0 0 220px;
	display:block;
	font-size:12px;
	line-height:1.2em;
	font-weight:normal;
	width:50px;
}
#masthead nav a:hover, #masthead nav a:active {
	font-weight:bold;
	cursor:pointer;
}
#links a, #links a:link, #links a:visited {
	text-decoration:none;
	color:black;
	padding:0 10px;
	font-weight:bold;
	border-left: 2px solid black;
}
#links a:hover, #links a:active {
	color: #666;
	cursor:pointer;
}
#links { 
	float:right;
	position:relative;
	z-index:502;
	top:-3px;
}
#links a.subscribe {
	border:0;
}

#wrap { width:100%; height:100%; display:block; position:relative; overflow:hidden; margin-top:83px; background-color:transparent;}
.slide {position:relative;width:100%;height:100%;display:inline-block;margin:0;border:0;padding:0;text-align:center;color:white;float:left;font-size:18px;-webkit-transition: linear 0.5s; transition: linear 0.5s;}
.slide:hover {cursor:pointer;}
.slide div {position:relative; margin:0; top:225px \9}
.slide div img {margin:0 auto 50px;display:none;}
.slide div span {text-decoration:underline;margin-top:30px;display:none}
.slide div p { display:none}
.slide:hover div img, .slide:hover div p, .slide:hover div span {display:block;}

#homefoot {height:80px; width:100%; background-color:white; padding:0; overflow:hidden; text-align:center}
#homefoot a, #homefoot a:link, #homefoot a:visited {font-size:12px; margin:50px 0 0; height:18px; width:105px;padding:0 20px 0 0; color:#000; opacity:0.6; overflow:hidden}
#homefoot a:hover, #homefoot a:active {cursor:pointer; color:black;opacity:1.0;}
.down {background:url(../img/arrow3.png) no-repeat; background:url(../img/arrow5.png) no-repeat \9; background-position:right -12px; background-size:16px 28px;}
.up {background:url(../img/arrow3.png) no-repeat;background:url(../img/arrow5.png) no-repeat \9; background-position:right 0; background-size:16px 28px;}
#homefoot ul, #homefoot li { list-style:none;}

.btn {
	width:52px;
	height:52px;
	background: url(../img/arrow.png) no-repeat;
	background-size: 52px;
	display:inline-block;
	margin:15px 0 0 18px;
	position:relative;
}
.btn:hover {
	cursor:pointer;
}
.abt {left:-180px}
.prj {left:-13px}
.item  {
	width:99%;
	height:auto;
	max-width: 768px;
	margin: 0 auto;
	padding: 15px 0;
	position:relative;
	text-align:center;
	display:block;
}
.item h1 {
	text-decoration:underline;
	font-size:24px;
	font-weight:normal;
	margin:0 auto 34px;
}
.item h2 {
	font-size:15px;
	font-weight:600;
	margin:0 0 10px;
	line-height:1.2em;
	text-align:left;
}
.item p {
	font-size:12px;
	font-weight:600;
	margin:0 0 10px;
	line-height:1.3em;
	text-align:left;
}
.item a, .item a:link, .item a:visited {
	font-size:12px;
	font-weight:600;
	margin:0 0 10px;
	line-height:1.3em;
	color:black;
	text-align:left;
}
.third img {
	width:100%;
}

.proj {max-width: 100%;max-width: 1024px \9;}

.item div.third {
	width:23%;
	height:auto;
	width:225px \9;
	height: 340px \9;
	float:left;
	margin:0 15px 30px;
	display:inline-block;
	text-align:left;
	color:white;
	position:relative;
	background-color:black; 
}

.third h2 {font-weight:bold; margin:20px 55px 5px 20px;}
.third p {font-size:12px;font-weight:normal; margin:5px 55px 20px 20px;}
.third span {width:24px;height:28px; height:27px \9;transition:linear 0.2s;background:url(../img/next.png) no-repeat; background:url(../img/next2.png) \9; background-size:24px 28px; opacity:1.0;position:absolute;bottom:25px; top:250px \9;right:20px;display:block;}
.third span:hover {cursor:pointer;opacity:0.6}

.bwWrapper {
	position:relative;
	display:block;
}
.bwWrapper:hover {
	cursor:pointer;
}
.left {
	width:320px;
	position:relative;
	margin-right:15px;
	float:left;
	display:block;
}

.about {height:310px; width:100%; max-width:685px}

.about p {font-weight:normal}

.contact {max-width: 1024px; height:480px;}
.address {
	float:left;
	width:230px;
	text-align:left;
	font-size:15px;
	margin:0 0 0 25px;
	}
.address h1 {
	text-decoration:none;
	font-weight:bold;
	font-size:15px;
	margin: 0 0 10px 0;
}
.map {
	float:right;
	width:644px;
	height:350px;
	margin-right:25px;
	  }
#footer  {
	display:block;
	width:100%;
	max-width:1024px;
	min-height:30px;
	font-size:11px;
	margin:0 auto;
	padding:5px 0;
}
#footer p {
	margin:0 25px;
	display: inline-block;
}
#footer a, #footer a:link, #footer a:visited {
	color:black;
	text-decoration:none;
	padding:0 0 0 25px;
	display: inline-block;
	font-size:11px;
	line-height:1.2em;
	font-weight:normal;
	width:50px;
	border-left: 1px solid black;
}
#footer a:hover, #footer a:active {
	font-weight:bold;
	cursor:pointer;
}
.home {
	height:41px; 
	width:150px; 
	position:relative;
	left:25px;
	z-index:501;
}
.buffer {
	height:90px; 
	width:100%;
}
.disclaimer {
	background-color:white;
	width:300px;
	height:450px;
	color:#000;	
	padding:25px 10px;
	overflow-x:hidden;
	overflow-y:scroll;
}
.disclaimer p {
	font-size:11px;
	color:#000;
}
.disclaimer h1 {
	color:#000;
	margin-top:0;
	font-size:26px;
	text-decoration:underline;
	font-weight:normal;
	text-align:center;
}
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgba(0, 0, 0, 0.6); background:url(../img/shade.png) repeat \9; }
#colorbox{outline:0;}
#cboxContent{background:#fff;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:0; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{
	background:url(../img/loading.gif) no-repeat center center #4d4d4f; 
	background:url(../img/loading_3.gif) no-repeat center center #4d4d4f \9;
	background-size: 24px 24px}

/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxClose{border:0; position:absolute; top:18px; right:18px; display:block; 
background:url(../img/close.png) no-repeat top center; 
background:url(../img/closeIE8.png) no-repeat top center \9;
background-size: 12px 24px; width:12px; height:12px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}

/* Shallow Screens */
@media only screen and (max-height: 400px) {
#homefoot {height:60px;}
.btn {
	width:42px;
	height:42px;
	background-size: 42px;
	margin:10px 0 0 23px;
}
}
@media only screen and (max-height: 600px) {
.slide div img {margin:0 auto 20px;}
}

/* Narrow Screens */
@media only screen and (max-width: 1520px) {
.item div.third {margin:0 10px 20px;}
}
@media only screen and (max-width: 1410px) {
.item div.third {height:80%;}
}
@media only screen and (max-width: 1009px) {
.item div.third {margin:0 8px 10px;}
}
@media only screen and (max-width: 949px) {
.map {width:480px;}
.item div.third {width:48%; height:44%; margin:0 5px 10px;}

}

/* Phones etc */	
@media only screen and (max-width: 767px) {
#masthead nav a, #masthead nav a:link, #masthead nav a:visited {
	margin:1px 0 0 185px;
}
#links {text-align:right}
#links a, #links a:link, #links a:visited {
	padding:0 10px;
	font-weight:bold;
	border-left: none;
	display:block;
}
.home {
	left:20px;
}
.address {margin:0 0 25px 0;}
.map {
	width:100%;
	float:none;
	margin: 15px auto 0;
}
.contact {height:660px;}

}
@media only screen and (max-width: 520px) {
.about {
	float:none;
	margin:0 auto 15px;
	width:100%;
	height:220px;
}
.about h2, .about p { margin-left:10px; margin-right:10px}
.about p { font-size:11px}
.item {width:93%;}
.left {
	display:block;
	float:none;
}
.item div.third {
	width:100%;
	height:auto;
	margin: 0 0 15px 0;
}
.abt {left:0px}
}
@media only screen and (max-width: 350px) {
.item {width: 320px;}
.slide div span {margin-top:10px;}
.left img { margin-left:10px}
}