/* IN CASE IT IS NOT SUPPORTED */

#browser{
	display: none;
	visibility: hidden;	
}

/* BODY */

@font-face {
    font-family: 'ucost';
    src: url('font/ucost.eot');
    src: url('font/ucost.eot?#iefix') format('embedded-opentype'),
         url('font/ucost.woff') format('woff'),
         url('font/ucost.ttf') format('truetype'),
         url('font/ucost.svg#ucost') format('svg');
    font-weight: normal;
    font-style: normal;
}


*{
	    font-family: 'ucost';
}

body{
	margin: 0;
	padding: 0;
	font-family: "ucost";
	font-size: 14px;
}

a{
	font-family: 'ucost';
	text-decoration: none;
	color: #ccc;
}

a:hover{
	color:#000;
}

a:current{
	color: #ccc;	
}

a.selected{
	color: #000;
}




/* MENU AND TOP BIT*/

#top{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;	
	height: 100px;
	background: #000;
	display: block;
	clear: both;
	z-index: 999;
}



#logo{
	position: absolute;
	float: left;
	width: 300px;
	height: 60px;
	padding-top: 13px;
	margin-left: 40px;
	text-align: right;
	color: #FFF;
}

#top-logo{
	font-size: 40px;
	color: #FFF;
	text-align: right;
	display: block;
}

#bottom-logo{
	font-size: 10px;
	text-align: right;
	margin-top: -5px;
	display: block;
	letter-spacing: 2px;
}

#menu{
	top: 39px;
	left: 50%;
	margin-left: -350px;
	width: 700px;
	position: relative;
	text-align: center;
	clear: both;
}

#menu ul{
	margin: 0;
	padding: 0 0 10px 0;
} 

#menu ul li{
	display: inline-block;
	width: 120px;
}

#menu ul:last-child li{
	display: inline-block;
	width: 120px;
}



#menu ul li a{
	cursor: pointer;
	font-family: 'ucost';
	letter-spacing: 1px;
	display: inline-block;
	font-size: 16px;
	text-decoration: none;
	color: #FFF;
	margin: 0.5% 0.3% 0.5% 0;
	padding: 0 0 0.3% 0;
	width: 100%;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	text-align: left;
}



#menu ul li a:hover{
	color: #AAA;	

}

#menu ul li.current a{
	color: #EEE;	
	text-decoration: underline;

}




 



/* THIS IS WHERE THE CONTENT GOES */

#contentholder{
	position: relative;
	top: 180px;
	z-index: 5;	
}

#itscontent{
	position: relative;
	top: 10px;
	width: 960px;
	display: block;
	clear: both;
	height: auto;
	padding-bottom: 20px;
	margin: 0 auto;
		
}
	
	
#hometext{
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding-left: 5px;
	font-size: 12px;
	height: auto;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
	
/* THIS IS THE BOTTOM PART */


.separator{
	position: relative;
	width: 100%;
	clear: both;
	height: 3px;	
}
.footer{width:100%; background: #000; float:left;}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
	height: 100%;
}

#wholewebsite {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -20px; /* the bottom margin is the negative value of the footer's height */
	position: relative;
}
.footer, .push {
	height: 20px; /* .push must be the same height as .footer */
	position: relative;
	font-size: 10px;
}

#copyright{
	padding-top: 3px;
	font-size: 10px;
	color: #FFF;
	font-family: "ucost";
	position: absolute;
	left: 50%;
	margin-left: -200px;
	width: 400px;
	text-align: center;
}

#websiteby{
	padding-top: 3px;
	float: right;
	text-align: right;
	padding-right: 6px;
	width: 100px;
	color: #FFF;
	font-size: 10px;	
}

a.webby{
	color: #FFF;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

a.webby:hover{
	color: #ccc;
}
	

/* THIS IS WHERE THE REST GOES */




/* HOMEPAGE */

.homerow{
	width: 100%;
	position: relative;
	height: auto;
	display: block;
	margin: 20px 0;
}

article.left{
	position: relative;
	float: left;
	width: 49%;
}

article.right{
	position: relative;
	float:right;
	width: 48%;
}

.artleft{
	position: relative;
	float: left;
	width: 50%;
}
.artright{
	position: relative;
	float: right;
	width: 48%;
	height: 100%;
	text-align: right;
}

img.top{
	position: relative;
	top: 0;	
	left: 0;
	display: block;
	margin-bottom: 20px;
}

img.bottom{
	position: relative;
	bottom: 0;	
	left: 0;
	display: block;
}

.withlines{
	padding: 2px 0;
	border-top: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
	color: #8E8279;	
	text-align: left;
	width: 100%;
	float: left;
}

header.withlines{
	font-size: 15px;
}

img.blog{
		margin: 12px 0;
}



.left{
	float: left;
	width: 50%;
	position: relative;
	display: inline-block;
	text-align: left;

}

.right{
	float: right;
	width: 50%;
	position: relative;
	display: inline-block;
	text-align: right;
	height: auto;
}

#nearbottom{
	font-size: 12px;
	color: #8E8279;
}

#nearbottom.left{
	float: left;
	width: 49%;
	position: relative;
	display: inline-block;
	text-align: left;

}

#nearbottom.right{
	float: right;
	width: 48%;
	position: relative;
	display: inline-block;
	text-align: right;
	height: auto;
}

.rights{
	position: relative;
	float: right;
	text-align: left;
	width: 49%;
}
.lefts{
	position: relative;
	float: left;
	text-align: left;
	width: 49%;
}

.righta{
	margin-top: 50px;
	float: right;
	width: 315px;
	padding-right: 80px;
}
.lefta{
	margin-top: 50px;	
	float: left;
	width: 315px;
	padding-left: 80px
}


	
	.form{
		margin: 0 auto;
		width: 280px;
		height: 400px;
		padding-top: 0;
		position: relative;
			
		
	}
		
	.form input{
		border: 1px solid #999;
		background: #FFF;
		width: 120px;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
			}
			
			
	.form textarea{
		border: 1px solid #999;
		background: #FFFFFF;
		width: 270px;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
			}
	
	.form input:focus, .form textarea:focus{
		outline: none;
		border: 1px solid #000;	
		background: #FCFCFC;
	}
		
	.form input[type="button"]{
		background: #FFF;
		color:#000;
		cursor: pointer;	
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	
	.form input[type="button"]:hover{
		background: #000;
		color: #fff;
		cursor: pointer;	
	}
		
	.form label{
		width: 150px;
		display: inline-block;
	}
		
	.redround{
		background: #ccc;
		border: 1px solid #F00	!IMPORTANT;
	}
		
		
		
		
				
.item {
  margin: 10px;
  float: left;
}
		
	
	.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}	
		
		
		
.imagethumb{
	cursor: pointer;
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;

	
}

#imagesbox{
	position: relative;
	display: block;
	height: auto;
	margin-bottom: 50px;
	padding-bottom: 25px;	
	
	
	
}

.title{
	font-size: 14px;
	padding-bottom: 10px;
	display: block;
} 

.blogimage{
	max-width: 800px;
	max-height: 400px;
}

	


/* WHO WE ARE */


.blurb{
	width: 100%;
	position: relative;
	height: auto;
	display: block;
}

.twentyleft{
	width: 25%;
	float: left;
	position: relative;
	display: inline-block;
}

.topblurb{
	width: 75%;
	float: right;
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #8E8279;
	padding: 0 0 20px 0;
	top: -10px;
}

.blurbtitle{
	color: #54274E;
}

.whoweare{
	width: 100%;
	position: relative;
	display: block;
	height: auto;
	border-top: 1px solid #c0c0c0;
}

.whocontent{
	width: 75%;
	position: relative;
	float: right;
	height: auto;
	font-size: 14px;
	color:  #8E8279;
	padding-bottom: 20px;
}

.whocontent p{
	color:#8E8279;
}

.contenttitle{
	font-size: 18px;
	color: #54274E;
}

img.whoimg{
	margin-top: 25px;
}

	
.contentsubtitle{
	color: #00b59d;
}
	
	
	
	
	
	
	
	
	
	
/* BLOG POSTS */



.blogentry{
	position: relative;
	padding: 10px 0;
	width: 100%;
	border-bottom: 1px solid #c0c0c0;
}

.blogentry2{
	position: relative;
	padding: 10px 0;
	width: 100%;
}

.blogdate{
	font-size: 12px;
	color: #444;
}

.blogtitle{
	top: -5px;
	position: relative;
	font-size: 16px;
	color: #000;
}

.blogimage{
	margin: 0 0 10px 0;
}

.blogdescription{
	font-size: 12px;
	color: #000;
}

.blogmore{
	font-size: 14px;
	color: #00b59d;	
	
}

.blogtext{
	padding: 5px 0;
	margin: 5px 0;
	border-top: 1px solid #c0c0c0;
	border-bottom: 1px solid #c0c0c0;
}

	
	
	
/* OUR WORK */

.workproject{
	position: relative;
	display: block;
	height: auto;
	width: 32%;
}

.workimage{
	position: absolute;
	left: 0;
	top: 0;
}

.workimageh{
	position: absolute;
	left: 0;
	top: 0;
}

.over{
	position: relative;
	margin: 9px 19px 0 0;
	padding: 10px 0 0 0;
	display: inline-block;
	height: 160px;
	width: 220px;
}
	
.workimageset{
	margin: 0 0 10px 0;
	right: 0;
}

.firstimageset{
	margin: 20px 0 10px 0;
}
	
	
	
	
	
/* CONTACT PAGE */

.contenttitles{
	font-size: 18px;
	color: #54274E;
}

.twentylefts{
	width: 25%;
	float: left;
	position: relative;
	display: inline-block;
	color: #8E8279;
	font-size: 14px;
}
	
.bottomtitle{
	font-size: 16px;
	color: 	#00b59d;
	display: block;
	padding-bottom: 0;
	margin-bottom: 5px;
	
}

#form{
	padding-top: 3px;
}

#form input{
	width: 200px;
	height: 18px;
	margin-bottom: 7px;
	font-family: "effra";
	background: #EFEFEF;
	border: 1px solid #FFF;
	font-size: 12px;
}
	
#form a{
	cursor: pointer;
}
	
	
	
	
img, a{
	border: 0;
	outline : none;
}
	
	
.blogentry:last-of-type{
	border-bottom: 0;
}
	
	
	
	
.facts{
	margin-top: 8px;
}













.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */





#container {
  border: 0;
  padding: 5px;
  margin-bottom: 20px;
}

.element {
  width: 210px;
  height: 150px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
 
}

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }


.element * {
  position: absolute;
  margin: 0;
}

.element .symbol {
  left: 0.2em;
  top: 0.4em;
  font-size: 3.8em;
  line-height: 1.0em;
  color: #FFF;
}
.element.large .symbol {
  font-size: 4.5em;
}

.element.fake .symbol {
  color: #000;
}

.element .name {
  left: 0.5em;
  bottom: 1.6em;
  font-size: 1.05em;
}

.element .weight {
  font-size: 0.9em;
  left: 0.5em;
  bottom: 0.5em;
}

.element .number {
  font-size: 1.25em;
  font-weight: bold;
  color: hsla(0,0%,0%,.5);
  right: 0.5em;
  top: 0.5em;
}


.leftm{
	float: left;
	width: 200px;
	position: relative;
}

.rightm{
		margin-top: 50px;
}

.righta{
	float: right;
	width: 420px;
	position: relative;
	display: block;
}

#container{
	width: 700px;
}


.texttitle{
	font-size: 16px;
	margin-top: 35px;
	display: block
}

.texttext{
	font-size: 12px;
}

span.quote{
font-size: 12px;
}

span.by{
	font-style: italic;
	font-size: 12px;
}

#topfix{
	width: 100%;
	height: 100px;
	display: block;
	position: relative;
}



#centerlogin{
	text-align: left;
	width: 300px;
	margin: 0 auto;
	padding-top: 50px;
	
		
}

#centerlogin label{
	width: 100px;
	text-align: left;
	display: inline-block
}

#login{
	text-align: right;
}

.imagesHereP{
min-height: 180px;
max-height: 210px;
min-width: 210px;
}



a.logolink{
	color: #FFF;
	cursor: pointer;
}
a.logolink:hover{
	color:#fff;
}

.centering{
	height: 100%;
	position: relative;
	display: table;
	vertical-align: middle;
}
	
	
	
	
	
	
	
	
	
		
	
@media all AND (max-width: 1350px){
	
	#menu ul li{
	display: inline-block;
	width: 80px;
}

#menu ul:last-child li{
	display: inline-block;
	width: 80px;
}
	
}

@media all AND (max-width: 1170px){
	
	#menu{
	top: 39px;
	left: 50px;
	margin-left: 0;
	width: 700px;
	position: relative;
	text-align: left;
	float: right;
	clear: none;
}
	
#menu ul li{
	display: inline-block;
	width: 80px;
}

#menu ul:last-child li{
	display: inline-block;
	width: 80px;
}
	
}

@media all AND (max-width: 1080px){
	
#himage {
	top: 0;
	width:900px;
	height:480px ;
	position:relative;
	display: block;
}
	
	
.slides_control img{
	max-width: 900px;
	max-height: 480px;	
}

.slides_container {
	width:900px;
	overflow:hidden;
	position:relative;
	display:none;
}


.slides_container div.slide {
	width:900px;
	height:480px;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:220px;
	left:-37px;
	width:15px;
	height:28px;
	display:block;
	z-index:101;
}

#slides .next {
	left:920px !important;  
}


	
#menu{
	top: 39px;
	left: 50px;
	margin-left: 0;
	width: 700px;
	position: relative;
	text-align: left;
	float: right;
	clear: none;
}
	
#menu ul li{
	display: inline-block;
	width: 80px;
}

#menu ul:last-child li{
	display: inline-block;
	width: 80px;
}


#itscontent{
	position: relative;
	top: 10px;
	width: 900px;
	display: block;
	clear: both;
	height: auto;
	padding-bottom: 20px;
	margin: 0 0 0 55px !important;
		
}
	
	
#hometext{
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding-left: 5px;
	font-size: 12px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}


	
}


@media all AND (max-width: 1010px){



#himage {
	top: 0;
	width:800px ;
	height:400px  !important;
	position:relative;
	display: block;
}
	
	
.slides_control img{
	max-width: 800px ;
	max-height: 400px ;	
}

.slides_container {
	width:800px ;
	overflow:hidden;
	position:relative;
	display:none;
}


.slides_container div.slide {
	width:800px ;
	height:400px ;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:180px !important;
	left:-37px;
	width:15px;
	height:28px;
	display:block;
	z-index:101;
}

#slides .next {
	left:820px !important;  
}


	
#menu{
	top: 39px;
	left: 380px;
	margin-left: 0;
	width: 700px;
	position: relative;
	text-align: left;
	float: left;
	clear: none;
	display: inline-block;
}
	
#menu ul li{
	display: inline-block;
	width: 80px;
}

#menu ul:last-child li{
	display: inline-block;
	width: 80px;
}


#hometext{
	position: relative;
	width: 800px;
	margin: 10px 0 0 0;
	padding-left: 5px;
	font-size: 12px;
	height: auto;
	margin-top: 25px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.blogtext{
	width: 100%;	
}

.blogentry2{
	
width: 100%;	
	
	
}

}


@media all AND (max-width: 760px){

#top{
	height: 150px;
}


#himage {
	top: 0;
	width:500px ;
	height:300px  !important;
	position:relative;
	display: block;
}
	
	
.slides_control img{
	max-width: 500px ;
	max-height: 300px ;	
}

.slides_container {
	width:500px ;
	overflow:hidden;
	position:relative;
	display:none;
}


.slides_container div.slide {
	width:500px ;
	height:300px ;
	display:block;
}


/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:180px !important;
	left:-37px;
	width:15px;
	height:28px;
	display:block;
	z-index:101;
}

#slides .next {
	left:520px !important;  
}

#logo{
	display: block;
	position: relative;
}
	
#menu{
	top: 39px;
	left: 20px;
	margin-left: 0;
	width: 500px;
	position: relative;
	text-align: left;
	float: left;
	clear: none;
	display: block;
	background: #000;
}
	
#menu ul li{
	display: inline-block;
	width: 70px;
}

#menu ul li a{ 
font-size: 14px;

}

#menu ul:last-child li{
	display: inline-block;
	width: 70px;
}


#hometext{
	position: relative;
	width: 500px;
	margin: 10px 0 0 0;
	padding-left: 5px;
	font-size: 12px;
	height: auto;
	margin-top: 25px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.blogtext{
	width: 100%;	
}

.blogentry2{
	
width: 100%;	
	
	
}

article.lefta{
	padding-left: 0px;
	

}