body {	
	padding-top: 50px;
	}
	/* Dividers
 ---------------------- */	
	.hr {background: url(../images/hr.png) no-repeat scroll center;height: 10px;	margin: 0px;}
	.hr hr {display: none;}	
	.hr2 {background: url(../images/hr2.png) no-repeat scroll center;height: 20px;margin: 20px;}
	.clear {	clear: both;}
	 a:hover, a:active, a:focus { outline: 0;}
/* Class colours
 ---------------------- */	 
	.red, strong { color: #e74c3c;}
	.blue {color: #3498db;}
	.turq {color: #1abc9c;}
	.green {	color: #2ecc71;}
	.smaller {font-size: 13px;color: #56799C;}
/* Homepage intro
 ---------------------- */	
	.intro {	background: #F1F1F1;margin-top: 0;padding: 30px;font-size: 18px;color: #666;}
/* Jumbotron
 ---------------------- */	
	.jumbotron {	margin-bottom: 0;background: url('../images/jumbotron_img2.jpg') center center no-repeat;}
	.jumbotron p {color: #333;letter-spacing: 1px;}
	.jumbotron h1 {font-family: 'Ubuntu Condensed', sans-serif;}
/* Hidden Panel
 -------------------------------------------------- */
#panel { background: #1ABC9C; height: 70px; display: none; color: #fff; padding: 20px 0 25px 50px; }
.slide { margin: 0; padding: 0; }
.btn-slide { text-align: center; width: 20px; height: 10px; padding: 10px 30px 0 0; margin: 0 auto; display: block; font: bold 120%/100% 'Raleway', sans-serif; color: #18BC9C; text-decoration: none; float: right; }
.infotext { margin-top: 7px; }
/* This is to make top links on dropdown menu clickable and sub menu open on hover
------------------------------------------------------------ */
	ul.nav li.dropdown:hover ul.dropdown-menu {display: block;}
	.nav .dropdown-toggle .caret {display:none;}
/* dropdown menu
 ------------------------------------------------ */	

	.gallery {padding: 20px;	}				

/* This is a for the scroll to top of page
-------------------------------------------- */
.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #128F76;
    color: #eeeeee;
    width: 30px;
    height: 38px;
    line-height: 38px;
    right: 30px;
    bottom: 30px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
    background-color: #1EBC9C;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
    opacity: 1.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
}
/* This is a for the circle-hover effect
------------------------------------------- */
.ch-grid {
	margin: 20px 0 30px 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}
.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}
.ch-grid:after {
	clear: both;
}
.ch-grid li {
	width: 200px;
	height: 200px;
	display: inline-block;
	margin: 40px;
}
.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
	inset 0 0 0 0 rgba(200,95,66, 0.4),
	inset 0 0 0 16px rgba(255,255,255,0.6),
	0 1px 2px rgba(0,0,0,0.1);
		
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.ch-img-1 { 
	background-image: url(../images/circle/gallery-1.jpg);
}
.ch-img-2 { 
	background-image: url(../images/circle/gallery-2.jpg);
}
.ch-img-3 { 
	background-image: url(../images/circle/gallery-3.jpg);
}
.ch-img-4 { 
	background-image: url(../images/circle/gallery-4.jpg);
}
.ch-img-5 { 
	background-image: url(../images/circle/gallery-5.jpg);
}
.ch-img-6 { 
	background-image: url(../images/circle/gallery-6.jpg);
}
.ch-img-7 { 
	background-image: url(../images/circle/gallery-7.jpg);
}
.ch-img-8 { 
	background-image: url(../images/circle/gallery-8.jpg);
}
.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-backface-visibility: hidden; /*for a smooth font */
}
.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 0px;
	font-size: 22px;
	margin: 0 30px;
	padding: 65px 0 0 0;
	height: 110px;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {	
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 0px solid rgba(255,255,255,0.5);
}
.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	padding-top: 4px;
}
.ch-info p a:hover {
	color: #fff;
	color: rgba(255,242,34, 0.8);
}
.ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(24,188,156, 0.6),
		inset 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);	
}
/* Footer
------------------- */
#footerwrap {
	border-top: 3px solid #1ABC9C;
	padding-top: 30px;
	padding-bottom: 0;
	background: #2C3E50;
}
#footerwrap p {
	color: #a3b0bb;
}
#footerwrap h4 {
	color: #95A5A6;
}
.hline-w {
	border-bottom: 1px solid #3F5060;
	margin-bottom: 25px;
}
/*	image widget in footer
---------------------------------- */
ul.image-widget {
    position: relative;
    left: -5px;
    margin:0;
    padding:0;
}
.image-widget li {
    float: left;
    margin: 0 5px 10px 5px;
    width: 50px;
    height: 50px;
	list-style:none;
}
/*	footer blog posts
---------------------------------- */
.footerPosts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footerPosts li { padding: 5px 0 }
.footerPosts li:first-child { padding-top: 0 }
.footerPosts .last,
.footerPosts li:last-child { border: none }
.footerPosts .meta {
    text-transform: uppercase;
    color: #a3b0bb;
    display: block;
    font-size: 80%;
}

/** sort/filters on gallery page **/
#w {
  display: block;
  max-width: 1100px;
  min-width: 280px;
  padding-top: 20px;
  margin: 0 auto;
}
#filter-list {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 25px;
	margin-top: 10px;
}
#filter-list li {
	display: inline-block;
	width: auto;
	padding: 6px 10px;
	margin-right: 15px;
	font-size: 1.2em;
	cursor: pointer;
	text-shadow: 1px 1px 0 #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#filter-list li:hover {
	background: #E0E4E5;
}
#filter-list li.active {
	font-weight: bold;
	background: #D5DBDC;
}
/** portfolio list **/
#portfolio {
	display: block;
	width: 100%;
	padding: 0 12px;
	margin-bottom: 35px;
	text-align: center;
}
#portfolio .item {
	display: none;
	opacity: 0;
	width: 40%;
	vertical-align: top;
	margin-bottom: 25px;
	margin-right: 20px;
	color: #fff;
	font-size: 30px;
	text-align: center;
	-moz-box-sizing: border-box;
}
#portfolio .item a {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
	background: #fff;
}
#portfolio .item img {
  padding: 3px;
  max-width: 100%;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/** media queries **/
@media screen and (max-width: 720px) {
  h1 { font-size: 2.7em; }
}
@media screen and (max-width: 500px) {
  h1 { font-size: 2.0em; }
  #filter-list { padding: 0 18px; }
  #filter-list li { display: block; margin-bottom: 3px; }
  #portfolio { margin-bottom: 20px; }
  #portfolio .item { width: 100%; margin-bottom: 12px; margin-right: 0; }
}
/** end of portfolio list **/
/**image overlay**/
a img {
	opacity:1.0;
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;k,,,m 
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
}
a img:hover { opacity: .50; }

/**breadcrumb**/
ul.breadcrumb {
  margin: 30px 0 0;
  background: transparent;
}
ul.breadcrumb > li {
  text-shadow: none;
}
ul.breadcrumb > li > a,
ul.breadcrumb > li .divider {
  color: #fff;
}
ul.breadcrumb > li.active {
  color: rgba(255, 255, 255, 0.7);
}
body > section {
  padding: 50px;
  margin-bottom: 30px;
}
.carrot {
  background-color: #e67e22; margin-bottom: 0;
}
.turquoise,
.green-sea,
.emerald,
.midnight-blue{
  color: #fff;
}
.turquoise small {
  color: rgba(255, 255, 255, 0.8);
}
.turquoise h1 {
  color: #fff;
}
.wet-asphalt {
  background-color: #34495e;
}
.emerald {
  background-color: #2ecc71;
}
.turquoise {
  background-color: #1abc9c;
}
.green-sea {
  background-color: #16a085;
}
.asbestos {
  background-color: #7f8c8d;
}