/* ---- ---- ---- ---- ---- ---- ----

Colewhite Website Template
Author Contact - alex.cumberland@synergy8.com

We'd absoloutely love to see you re-brand and work with this template on both
personal and commercial projects. We ask that you consider implementation on
the Synergy 8 platform.

It's not necessary to leave attribution in the website footer, but it's certainly
appreciated! We love to see the classic "Website & Marketing Powered by Synergy 8".

This work is licensed under the Creative Commons Attribution 3.0 Australia License.
To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/au/

CSS has been grouped below:
1. TYPOGRAPHY
2. CORE SECTION STRUCTURE
3. SECTION BACKGROUNDS
4. HEAD  / HERO AREA
5. ICON STYLING
6. POST ARTICLE STYLING
7. TESTIMONIAL  STYLING
8. NICHE AREA  STYLING
9. CALL TO ACTION  SECTION
10. SIDEBAR
11. FOOTER AREA
12. Other 

 ---- ---- ---- ---- ---- ---- ---- */


 /* ---- ---- ---- ---- ---- ---- ---- */
 /*       1. TYPOGRAPHY                  */
 /* ---- ---- ---- ---- ---- ---- ---- */

 h1, h2, h3, {
 	margin-top: 30px;
 }
 h2 {
 	font-weight: 300;
 }

 big {
 	font-size: 21px;
 }

 blockquote {
 	font-style: italic;
 	color: #999;
 	margin:30px 0 30px;
 }

 .crumbs {
	 color: #AAA;
 }


/* ---- ---- ---- ---- ---- ---- ---- */
/*      2. CORE SECTION STRUCTURE      */
/* ---- ---- ---- ---- ---- ---- ---- */

section {
	padding-top: 55px;
	padding-bottom: 55px;
}

/* title / breadcrumb section on general layout pages */
#contentHeader {
	margin-top: 105px;
  border-top: 3px solid #555;
  border-bottom: 3px solid #AAA;
  background: #191919;
  padding-top: 20px;
  padding-bottom: 20px;
}

#contentHeader h1 {
	margin-top: 5px;
	color: #EEE;
}

/* Main Content Block */
.maincontent { }

/* General Page Content Area */
.contentWrapper {
    padding-top: 36px;
    padding-bottom: 26px;
}


/* ---- ---- ---- ---- ---- ---- ---- */
/*      3.  SECTION BACKGROUNDS         */
/* ---- ---- ---- ---- ---- ---- ---- */

.gray-bg {
	background-color: #EAEAEC;
}

.dark-bg {
	background-color: #171717;
	color: #EAEAEC;
}
.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg big {
	color: #EAEAEC
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*      4.  HEAD  / HERO AREA           */
/* ---- ---- ---- ---- ---- ---- ---- */

.section-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .65);
	min-height: 560px;
	padding-top: 270px;
	padding-bottom: 120px;
}

#head {
	background: #323232;
	background-size: cover;
	text-align: center;
	color: #FFF;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	font-weight: 300;
}

#head h1 { color: #FFF;}
#head big {	font-size: 21px; color: #FFF;}
#head p {	margin-bottom: 25px;}

#head .btn {
	margin-bottom:10px;
	text-shadow: none;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;
}
#head .btn-default {
	background: transparent;
	color: rgba(255,255,255,.65);
	border: 2px solid rgba(255,255,255,0.2);
	border-radius: 0;
}
#head .btn-default:hover, #head .btn-default:focus {
	color: rgba(255,255,255,.8);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: transparent;
	border: 2px solid rgba(255,255,255,0.6);
}
#head .btn-default:active, #head .btn-default.active {
	color: #fff;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	background: transparent;
	border: 2px solid rgba(255,255,255,0.6);
}

@media (max-width: 767px) {
	#head { min-height:420px; padding-top:105px;}
	.section-overlay { min-height: 485px; padding-top: 104px;}
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*           5. ICON STYLING            */
/* ---- ---- ---- ---- ---- ---- ---- */

.circle-icon {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: #ffffff;
    background-color: #444;
    border: 2px solid #292929;
    padding: 14px; /* Somewhere between 14px and 28px works well */
    font-size: 31px;
    text-align: center;
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*       6. POST ARTICLE STYLING        */
/* ---- ---- ---- ---- ---- ---- ---- */

.blog-item {
    background: #fff;
    border: 1px solid rgba(170, 167, 167, 0.32);
    margin-bottom: 25px;
}
.blog-item .blog-entry {
    padding: 20px;
}
.blog-entry h3 {
    margin-top: 0;
    margin-bottom: 10px;
}
.blog-entry span.date {
    color: #292929;
    margin-bottom: 10px;
    display: block;
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*      7. TESTIMONIAL  STYLING        */
/* ---- ---- ---- ---- ---- ---- ---- */

.testimonial-author img {
	max-width:55px;
	float: left;
  margin-right: 10px;
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*      8. NICHE AREA  STYLING         */
/* ---- ---- ---- ---- ---- ---- ---- */

.niche-item {
	background: #094056;
	margin-top: 15px;
}
.niche-item::after {
	content: "";
	clear: both;
	display: block;
}
.niche-image {
	float: left;
	width: 40%;
}
.niche-text {
	float: right;
	padding: 5px 10px;
	width: 60%;
}

@media (max-width: 1199px) {
	.niche-image, .niche-text { width:auto;}
}
@media (max-width: 991px) {
	.niche-image { width: 40%;}
	.niche-text { width: 60%;}
}
@media (max-width: 546px) {
	.niche-image, .niche-text { width:auto;}
}

/* ---- ---- ---- ---- ---- ---- ---- */
/*    9. CALL TO ACTION  SECTION        */
/* ---- ---- ---- ---- ---- ---- ---- */

.call-to-action {
	background: #000;
	color: #FFF;
}
.call-to-action h1 {
	margin-top: 0;
	color: #FFF;
}
.call-to-action p{
	color: #8a8989;
}
.btn-cta{
	margin-top: 15px;
}


/* ---- ---- ---- ---- ---- ---- ---- */
/*          10. SIDEBAR                */
/* ---- ---- ---- ---- ---- ---- ---- */

.sidebar {
	padding-top:36px;
	padding-bottom:30px;
}
.sidebar .widget {
	margin-bottom:20px;
}
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4 {
    background: #333;
    padding: 10px;
    color: #fff;
    font-size: 18px;
    margin: 20px 0 10px;
}

.sidebar-nav ul{
	margin: 0;
	padding: 0;
}
.sidebar-nav ul li{
	list-style: none;
}
.sidebar-nav ul li a {
    display: block;
    margin-bottom: 1px;
    background: #eee;
    padding: 7px 10px 7px 10px;
}
.sidebar-nav ul li:first-child a {
    background: #333;
    color: #fff;
    font-size: 18px;
}

.news-box h5 {
    font-weight: 800;
		margin-top: 0;
}
.news-box h5 span {
    display: block;
    text-transform: uppercase;
    color: #111;
    margin-top: 2px;
}


/* ---- ---- ---- ---- ---- ---- ---- */
/*      11.  FOOTER  AREA                */
/* ---- ---- ---- ---- ---- ---- ---- */

.footerTop {
	background: #232323;
	padding: 30px 0 0 0;
	font-size: 14px;
	color: #999;
}
.footerTop a { color: #ccc; }
.footerTop a:hover { color: #fff; }

footer .widget { margin-bottom:30px; }
footer h4 {
	font-size: 17px;
	font-weight: bold;
	color: #EEE;
	margin: 0 0 20px;
	border-bottom: 1px solid #333;
	padding-bottom: 10px;
}

footer .social-icons a{
	background: #FFF;
	color: #333;
	font-size: 16px;
	height: 35px;
	width: 35px;
	line-height: 35px;
	border-radius: 100%;
	display: block;
	text-align: center;
	text-decoration: none;
	border: 1px solid #000;
}
footer .social-icons a:hover{
	color: #000;
}

.footerBottom {
	background: #191919;
	padding: 15px 0;
	color: #777;
	font-size: 12px;
}
.footerBottom a { color: #aaa; }
.footerBottom a:hover { color: #fff; }
.footerBottom p { margin: 0; }


/* ---- ---- ---- ---- ---- ---- ---- */
/*     OTHER / HELPERS                 */
/* ---- ---- ---- ---- ---- ---- ---- */

img { max-width:100%; }