/* ============= //
// Mary (c) 2016 //
// ============= */


/* ========== //
// Plug-in //
// ========== */
@font-face{	font-family: "main";	src: url('../fonts/main.ttf');}
@font-face{	font-family: "OpenSans-Regular";	src: url('../fonts/OpenSans-Regular.ttf');}
@font-face{	font-family: "OpenSans-Semibold";	src: url('../fonts/OpenSans-Semibold.ttf');}
@font-face{	font-family: "OpenSans-Bold";	src: url('../fonts/OpenSans-Bold.ttf');}
@font-face{	font-family: "Lora-Bold";	src: url('../fonts/Lora-Bold.ttf');}
/* ========== */


/* ================= //
// General Style //
// ================= */
body {
   font-family: "OpenSans-Regular";
   text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
		background-color: #efefef;
}
a, a:hover {
    color: #5b5c4a; font-family: "OpenSans-Semibold";
}
strong { color: #5b5c4a;}
.text-center{text-align: center;}
.text-right{text-align: right}



.shadowImgBox{
	margin:10px 0px 10px 20px;
	 box-shadow: 0 0 11px rgba(0, 0, 0, 0.1);
	border:5px solid rgba(255, 255, 255, 0.5);
	float:right; 
		}
/* ================= */


/* ================= //
// Header      //
// ================= */
#top-line{
	text-align: center;
	background-color: #edece7;
	padding: 5px 0;
}

#top-line h6{margin: 0; font-weight: normal;}

#myheader{padding-top: 10px; padding-bottom: 10px; background-color: #fff;}

#myheader .mylogo h2{
	font-family: "main";
	font-size: 30px;
	text-transform: uppercase;
	margin: 5px 0 0 0;
}


#myheader h2{
	margin: 0; 
	font-weight: normal;
	font-size: 18px;
	text-align: right;
}

#myheader p{
	margin: 0; 
	text-align: right;
}
.navbar{margin: 0;}
.navbar-inverse {
	background-color: #5b5c4a;
}

.navbar-nav{float: none; margin: 0 auto; display: table;}

.navbar-inverse .navbar-nav > li > a{
	text-transform: uppercase;
	font-size: 12px;
	color: #edece7;
}

.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover{
	color: #fff;}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover{
	background-color: transparent;
	color: #E88F0C;
}

#nav{
	position: -webkit-sticky;
}
.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.banner{background: url('../images/Chamblee-Roof-Repair.jpg'); }
/* ================= */





/* ======================== //
// banner //
// ======================== */
.banner > .row{margin:0;}
.banner  .col{float:left;
position: relative;
}
.banner  .col a{height: 250px; width: 100%; display: block;}
.carousel-inner.onebyone-carosel { margin: auto; width: 100%;  overflow-x: hidden;}
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }
#slide1 a{background-image: url('../images/Chamblee-Roof-Repair-3.jpg')}
#slide2 a{background-image: url('../images/Chamblee-Roof-Repair-4.jpg')}
#slide3 a{background-image: url('../images/Chamblee-Roof-Repair-5.jpg')}
#slide4 a{background-image: url('../images/Chamblee-Roof-Repair-6.jpg')}
.col h2{position: absolute; bottom: 10px; width: 100%; text-align: center; color: #fff; text-shadow: 1px 1px 2px #333;}
.banner  .col:first-child a{background-position: top right; opacity: 0.5;    pointer-events: none;
   cursor: default;}
.banner  .col:nth-child(2) a{background-position: center; background-size: cover;}
.banner  .col:last-child a{background-position: top left; opacity: 0.2;    pointer-events: none;
   cursor: default;}

.carousel-control.right{background-image: none; right: 23.5%;}
.carousel-control.left{background-image: none; left: 23.5%;}

.carousel-control:focus, .carousel-control:hover{color: #e88f0c;}

.banner  .col:first-child {width:25%;}
.banner  .col:nth-child(2) {width:50%; 
padding-left: 2px;
padding-right: 2px;}
.banner  .col:last-child {width:25%;}

.carousel-control{width: 50px; font-size: 40px; height: 40px; top: 40%; right: 23.5%;}
/* ================= */


/* ======================== //
// Content //
// ======================== */
.content{
	padding: 10px 0; margin:0;	
}
.pad{
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	padding: 10px;
	background-color: #fbfcf4;
}
.border{
	border: 2px solid #e3c179;
	text-align: right;
	padding: 10px;

}

#coupon h4{
	color: #e49d31;
	text-transform: uppercase;
	font-family: "Lora-Bold";
	letter-spacing: 2px;
}
#coupon h2{
	font-family: "Lora-Bold";
	font-size: 38px;
	color: #712611;
	margin-top: 10px;
}


#coupon p{
	text-transform: uppercase;
	color: #cfa86f;
}

.ribbon{
	position: absolute;
	z-index: 1;
	
}
aside{

}

.call {
background: #174a69;
margin: 10px 0;
color: #e88f0c;
font-size: 20px;
}
.call > .pull-left{
width: 22%;
border-right: 2px dashed #fff;
padding: 10px;
background: #095181;
}
.call > .pull-right{
width: 70%;
padding: 10px;
}

.sidebox {
background-color: #fbfcf4;
border-top: 3px solid #e3c179;
border-bottom: 3px solid #e3c179;
margin-bottom: 10px;
}

.sidebox .body{
padding: 10px;
text-align: center;
}

aside .btn-success{
	display: table;
	margin: 0 auto;
}
/* ================= */


/* =============== //
// Services Tab    //
// =============== */
.services-tab > div{padding: 0 5px;}
 .title h3{font-size: 17px;}
 .title {padding:5px;}
 .box-content p{padding:10px;}
.site-box  .title {
	margin: 0; color: #fff;
}
.site-box {
background-color: #fbfcf4;
}

#s1 { border: 1px solid #154a6c;}
#s1 > .box-content > .title{	background-color: #154a6c;}
#s1  .title > .pull-left{background: #095181;}
 .title > .pull-left{background: #095181;}

#s2 { border: 1px solid #b6478b;}
#s2 > .box-content > .title{	background-color: #b6478b;}
#s2  .title > .pull-left{background: #ce4e9b;}

#s3 { border: 1px solid #45a8a3;}
#s3 > .box-content > .title{	background-color: #45a8a3;}
#s3  .title > .pull-left{background: #4ac3be;}

#s4 { border: 1px solid #715e5a;}
#s4 > .box-content > .title{	background-color: #715e5a;}
#s4  .title > .pull-left{background: #7e6761;}

.site-box  .title > .pull-left{
padding: 10px;
}

.site-box  .title > .pull-right{
padding: 10px;
font-family: "OpenSans-Bold";
}
.serv-list {padding-left: 20px}
.serv-list > li{list-style: none;}
.serv-list > li > i{
	font-size: 12px;
}
/* ================ */




/* =============== //
// V. Footer Style //
// =============== */
footer{
background: url('../images/Chamblee-Roof-Repair.jpg'); 
border-top: 2px solid #5b5c4a;
padding: 10px 0;
}

footer h2{
	margin-top: 0;
}
/* =============== */




/* =============== //
// XS		   //
// =============== */
@media (max-width: 767px) {
.navbar-inverse .navbar-toggle {border-color: #E88F0C; color: #E88F0C;}
.navbar-nav{margin: 0; display: block;}
.container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header{padding: 0;}
.nav > li{border-bottom: 1px solid #36372d;}
#myheader, #myheader h2, #myheader p{text-align: center;}
.site-box {margin-bottom: 10px}
footer{text-align: center;}
.banner  .col a{height: 100px;}
.carousel-control.right{right: 21.5%}
.carousel-control.left{left: 21.5%}
.carousel-control{top: 20%;}

.col h1 {font-size: 190%;}

article h1{font-size: 20px;}
article h2{font-size: 18px;}
article h3{font-size: 17px;}
article h4{font-size: 16px;}
}
/* =============== */



/* =============== //
// SM 		       //
// =============== */

@media (min-width: 768px) and (max-width: 991px) {
.ribbon img{height: 70px;}
#coupon p{font-size: 11px; font-family: "OpenSans-Semibold";}

.call > .pull-left{width: 26%;}
.call > .pull-right{width: 72%; font-size: 18px; line-height: 30px;}

.site-box {margin-bottom: 10px}
.site-box  .title > .pull-left{width: 18%;}
.site-box  .title > .pull-right{width: 80%;}

.banner  .col a{height: 200px;}

.carousel-control.right{right: 21.5%}
.carousel-control.left{left: 21.5%}
}
/* =============== */




/* =============== //
// MD		       //
// =============== */
@media (min-width: 992px) and (max-width: 1199px) {
.site-box {margin-bottom: 10px}
.site-box  .title > .pull-left{width: 13%;}
.site-box  .title > .pull-right{width: 85%;}

.carousel-control.right{right: 22.5%}
.carousel-control.left{left: 22.5%}
}
/* =============== */



/* =============== //
//LG 		   //
// =============== */
@media (min-width: 1200px) {


.site-box  .title > .pull-left{width: 22%;}
.site-box  .title > .pull-right{width: 76%;}

}
/* =============== */



a[href^=tel] { color: inherit; text-decoration: none; }