/***************/
/* main layout */
/***************/
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	background:#000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#dots {
	width: 100%;
	height:100%;
	}

#bodyWrapper {
	margin: auto;
	width: 960px;
	height: 676px;
	position: relative;
	overflow: hidden;
}
html, body.portfolio { background-image: none; }

/* specific link colours for this site */
a         { color: #a3ceac; text-decoration: none; }
a:link    { color: #a3ceac; text-decoration: none; }
a:visited { color: #a3ceac; text-decoration: none; }
a:hover   { color: #fff; text-decoration: none; }
a:active  { color: #fff; text-decoration: none; }


/*******************/
/* header elements */
/*******************/
#header {
	background: #000;
	background: rgba(0, 0, 0, 0.6);
}

#logo { float: left; width: 230px; padding: 20px 0 15px 15px; }

#nav-area { float: right; width: 639px;}

ul#nav {
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 1.563em;
	font-weight: 200;
	text-transform: none;
	letter-spacing: -1px;
	padding: 114px 15px 15px 0;
    float:right;
}
ul#nav li   { float: left; margin: 0 10px 0 0; padding: 0 10px 0 0; list-style: none; border-right: 1px solid #fff; }
ul#nav li a { display: block; }
ul#nav li a:link { color: #fff; text-decoration: none; }
ul#nav li a:visited { color: #fff; text-decoration: none; }
ul#nav li a:hover { color: #a3ceac; text-decoration: none; }
ul#nav li a:active { color: #a3ceac; text-decoration: none; }

ul#nav .last {margin-right: 0; border-right: 0; padding-right: 0; }


/********************/
/* content elements */
/********************/
#content { width: 940px; border: 10px solid #fff;  }

#box-one {
	float: left;
	width: 350px;
	height: 394px;
	border-right: 5px solid #fff;
	background: #000;
	background-color: rgba(0, 0, 0, 0.6);
}
#box-one .copy {
	padding: 10px;
}
#box-two { float: right; width: 580px; border-left: 5px solid #fff; max-height: 394px;}

#contact-left { float: left; width: 115px; }
#contact-right { float: left; width: 160px; }

/***************/
/* portfolio  */
/**************/

.portfolio-item {
	float: left;
	width: 187;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff
}

.title-area {
	position: relative;
}

.title {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 20px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
}

/******************/
/* portfolio css3 */
/******************/

.view {
   width: 187px;
   height: 196px;
   float: left;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 187px;
   height: 196px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 20px;
   padding: 10px 10px 0 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
   line-height: 20px;
}
.view p {
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 14px;
   line-height: 19px;
   position: relative;
   color: #a3ceac;
   padding: 10px 20px 0px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   margin: 10px 0 0 0;
   padding: 7px 14px;
   background: #a3ceac;
   color: #000;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
   z-index: 1;
}
.view-tenth .mask {
	background-color: #000;
   background-color: rgba(0, 0, 0, 0.8);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h2 {
   background: transparent;
   text-align: center;
   margin: 10px 20px 0px 20px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #fff;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth p {
   color: #a3ceac;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   z-index: 2;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}


/*********/
/* items */
/*********/
.item          { margin-bottom: 10px; }
.item .title   { font-size: 1em; font-weight: bold; }
.item .date    { font-style: italic; }
.item .image   { float: left; margin-right: 10px; margin-bottom: 10px; }


/*******************/
/* footer elements */
/*******************/
#footer { background: #fff; color: #000; padding: 5px 15px; margin: 15px 0 0 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; font-size: 1.2em; }
#footer a         { color: #000; text-decoration: none; }
#footer a:link    { color: #000; text-decoration: none; }
#footer a:visited { color: #000; text-decoration: none; }
#footer a:hover   { color: #a3ceac; text-decoration: none; }
#footer a:active  { color: #a3ceac; text-decoration: none; }

#footer-left {
	float: left;
	width: 412px;
	padding: 20px 0 0 0;
}
#footer-right {
	text-align: right;
	float: right;
	width: 412px;
}

#ice-left { float: left; width: 335px; padding: 20px 0 0 0; }
#ice-right { float: right; width: 74px ;}

#extra-text { height:0 !important; max-height:0 !important; overflow:hidden; }

#expologo { position: absolute; top: 20px; height: 80px; right: 0; }

/***********************/
/* general form styles */
/***********************/

/* all form elements are contained within a formrow div, with a label and
 *  then the element, this is the best way (but still not good) to emulate
 *  a table */
div.formrow {
  clear: both;
  text-align: left;
  margin-bottom: 10px;
}

div.formrow label {
  float: left;
  text-align: right;
  margin-right: 10px;
  width: 80px; /* default width for a default form, add new form ids and override */
}
div.formrow.indent { margin-left: 90px; } /* label width + label margin-right, override as above */
div.formrow label.radio {
	float: none;
	text-align: inherit;
	margin-right: 0;
	width: auto;
}

/***********************/
/* media queries */
/***********************/

/* Smartphones (portrait and landscape) ----------- */

@media (min-device-width : 320px) and (max-device-width : 480px) {
	.view-tenth img {
		transition: none;
	}
	.view-tenth .mask {
		transition: none;
	}
}