body { 
	font-family:'Source Sans Pro', sans-serif;
}

.navbar-inner {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
  background-color: rgba(0, 0, 0, 1);
  font-size: 120%;
  background-image: none;
  background-repeat: none;
  border: none;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}


/*li .logo{
	display: block;
	height: 20px;
	background:url('Logowhite.png') no-repeat top center;
	background-size: 18px 18px;
}*/


 /*#navright{
	position: absolute;
	right:0px;
	top:20px;
}*/

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}

.navbar-inner {
  text-align:center;
}

.navbar .nav > li > a {
  float: none;
  /*padding: 10px 15px 10px;*/
  color: rgb(112,112,112);
  text-decoration: none;
  text-shadow: none;
}


.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: rgb(93,167,165);
  text-decoration: none;
  background-color: transparent;
}


.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: white;
  text-decoration: none;
  background-color: rgba(0,0,0,0);
  -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
     -moz-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
          box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0);
}

/*#intro {
	background: url(WBO.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}*/


#hero {
	width:100%;
	z-index: 1;
	position:relative;
  	display:block;
	
}

#essex .title {
	padding-top: 0%;
	padding-bottom: 0%;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }


#herotext {
	
	position: absolute;
	top: 250px;

}


#work{
	background-color: #E5E3E3;


}

.teal{
	 background-color: rgb(93,167,165);
	 color: rgb(255,255,255);

}

.grey{
	 background-color: #f5f5f5;
}


.description {
	font-size: 2em;
	line-height: 1.8;
	font-weight: 180%;
	padding-top: 2%;
	padding-right: 15%;
	padding-left: 15%;
	padding-bottom: 6%;
	text-align: center;
	font-weight: 300;

	

}

#myCarousel {
	margin-right: auto;
	margin-left: auto;
	width:70%;
}

/*.carousel-inner{
	max-height: 400px;
	padding-bottom: 0px;
}*/

.carousel-inner img{
	max-height:400px;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom:3%;
}


#samples{
	color: rgb(85,85,85);
	text-align: center;
}

h2 {
font-size: 2.8em;
padding-bottom: 1%;
text-align: center;
font-weight: bold;
line-height: .5;
padding-top: 6%;
}


h3 {
	font-size: 2em;
	line-height: 1.8em;
	font-weight: 300;
	padding-top: 2%;
	padding-bottom: 2%;
	text-align: center;
}

h4 {
	font-size: 1.6em;
	line-height: 1.6;
	font-weight: 500;
	text-align: left;
}




#samples ul {
	padding-top: 4%;
	padding-bottom: 6%;
}

#materials{
	min-height: 400px;
}


.square {
	float: left;
	position: relative;
	
}

.square span {
	background-color: rgba(241,241,242,0.9);
        color: rgb(85,85,85);
        width:102%;
        height: 102%;
        text-align: center;
        display: block;
        position: absolute;
        top:0;
        left:0;
        opacity: 0;
        -webkit-transition: all 0.16s cubic-bezier(0, 0, 0.25, 1);
        -webkit-transition-property: all;
        -webkit-transition-duration: 0.16s;
        -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
        -webkit-transition-delay: initial;
        -moz-transition: all 0.16s cubic-bezier(0, 0, 0.25, 1);
        -o-transition: all 0.16s cubic-bezier(0, 0, 0.25, 1);
        -ms-transition: all 0.16s linear;
        transition: all 0.16s cubic-bezier(0, 0, 0.25, 1);
	
}

.square:hover{
	cursor: default;
}

.square:hover span{
	opacity: 1;
	
}

/*	background-image:url('logo-transp.png');
	background-repeat: no-repeat;
	height: 30px;
	width: 20px;
	margin-left: auto;
	margin-right: auto;
	
}*/

div.info{
	position: relative;
	top:10%;
}

#materials .row-fluid {
	padding-top: 3%;
	padding-bottom: 6%;
}

#materials img {
display: block;
margin-right: auto;
margin-left: auto;
}

#materials .span8 {
	display:block;
	font-size: 1.8em;
	line-height: 1.5;
	font-weight: 300;
	padding-right: 2%;
	vertical-align: middle;
}

#contact .span3 {
	padding-top: 3%;
	margin-bottom: 6%;
	font-size: 2em;
	line-height: 1.8;
	font-weight: 300;
	text-align: center;
}

#contact a {
  color: white;
  text-decoration: none;
  vertical-align: middle; 
}

#contact a:hover,
a:focus {
  color: rgb(193,193,193);
  text-decoration: none;
}

#materials a {
  color: rgb(93,167,165);
  text-decoration: none;
}

#materials a:hover,
a:focus {
  color: black;
  text-decoration: none;
}


#finishes .span4 {
	padding-bottom: 5%;
}


#finishes img {
	max-width: 50px;
}

#finishes .row-fluid {
	width:90%;
	margin-left: auto;
	margin-right: auto;
}

.extrapadding {
	padding-top: 2%;
	padding-bottom: 4%;
}


.googleplus {
	display: block;
	background-image: url('images/googleplus50.png');
	height: 50px;
  	width: 50px;
  	background-repeat: no-repeat;

}

.googleplus:hover{
	background-image: url('images/googleplus50grey.png');
}

.facebook {
	display: block;
	background-image: url('images/fb50.png');
	height: 50px;
  	width: 50px;
  	background-repeat: no-repeat;

}

.facebook:hover{
	background-image: url('images/fb50grey.png');
}

*#contact .span1 {
	padding-bottom: 6%;

}