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


/* ========== //
// I. Plug-in //
// ========== */
.center {text-align: center}

@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 200;
    src: local("Titillium WebThin"), local("TitilliumWeb-Thin"), url("../font/titilliumweb-extralight-webfont.woff") format("woff"), url("../font/titilliumweb-extralight-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 300;
    src: local("Titillium WebLight"), local("TitilliumWeb-Light"), url("../font/titilliumweb-light-webfont.woff") format("woff"), url("../font/titilliumweb-light-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 400;
    src: local("Titillium Web"), local("TitilliumWeb-Regular"), url("../font/titilliumweb-regular-webfont.woff") format("woff"), url("../font/titilliumweb-regular-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "Titillium Web";
    font-style: normal;
    font-weight: 600;
    src: local("Titillium WebSemiBold"), local("TitilliumWeb-SemiBold"), url("../font/titilliumweb-semibold-webfont.woff") format("woff"), url("../font/titilliumweb-semibold-webfont.ttf") format("truetype");
}
/* ========== */


/* ================= //
// II. General Style //
// ================= */
body {
    color: #444;
    background-color: #f7f7f7;
    font-size: 15px;
    overflow-x: hidden;
    font-family: "Titillium Web", Trebuchet MS, sans-serif;
    font-weight: 400;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}
a, a:hover {
    color: #B52424;
}
.text-center{text-align: center;}
/* ================= */


/* ================= //
// III. Header Style //
// ================= */
#custom-bootstrap-menu{
    -webkit-transition:all 0.3s 0s ease-in-out;
    transition:all 0.3s 0s ease-in-out;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(130, 83, 83, 1);
}
#custom-bootstrap-menu.navbar-default {
    background-color: #d1d3d2;
}
#custom-bootstrap-menu.navbar-default  i{
    font-size: 14px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: #3d3f3e;
	text-transform: uppercase;
	font-size: 11px;
	padding: 15px 5px;
	margin: 0 5px;
    background-color: rgba(255, 255, 255, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: #f96741;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: #3d3f3e;
    background: url("../images/Colorado-Louisville-locksmith.jpg") 0 bottom repeat-x transparent;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border: 0;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color:  #3d3f3e;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #aaabaf;
}

.cover-tab {
    border-color: #a7a7a7;
    border-style: solid;
    border-width: 0 0 1px 0;
    overflow: hidden;
}
.cover-tab-wallpaper {
    background-color: #444;
    background-image: url("../images/Louisville-locksmith.jpg");
    background-attachment: fixed;
    background-repeat: repeat-y;
}
.cover-tab-logo > h1 {
    color: #fff;
	
    font-weight: 600;
    font-size: 40px;
    margin: 0;
    padding: 0;
}
.cover-tab-logo > p {

    color: #fff;
}
h2.call-top {
	margin: 10px 0;
	
	font-weight: 600;
	color: #989898;
    font-size: 25px;
	text-shadow: 1px 1px white, -1px -1px #444;
}
.cc{ font-size: 20px;}

/* ================= */





/* ======================== //
// IV. Connection Bar Style //
// ======================== */
aside{}
.call-side {
margin: 10px auto;
background: url('../images/automotive-Louisville-Colorado.jpg') center center no-repeat transparent;
width: 220px;
height: 260px;
}
.site-box#green {
	background: url('../images/quick-response-locksmith-Louisville-Colorado.jpg') center 0 no-repeat transparent;
	background-size: cover;

}
.site-box#green  h2 {
margin: 10px 0;

font-weight: 600;
}

.site-box#violet {
	background: url('../images/locksmith-in-Louisville-coupon.jpg') center 0 no-repeat transparent;
	background-size: cover;

}
.site-box#violet  h2 {
margin: 10px 0;

font-weight: 600;
}

/* ======================== */

/* =============== //
// Services Tab    //
// =============== */

.services-tab  .site-box .title{
	padding: 20px 0;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-bottom: 4px solid #fff;
}
.services-tab  .site-box{
background: #ffffff;
-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);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding-bottom: 20px;
margin: 25px 0;
}
.services-tab .front-page-list {
font-size: 13px;
}
.services-tab .box-content h3 {
	text-align: center;
}

.title#s1{border-color: #b3e03d;}
.title#s2{border-color: #89da64;}
.title#s3{border-color: #4dd9aa;}
.title#s4{border-color: #58d4de;}
/* ======================== */

/* =============== //
// V. Footer Style //
// =============== */
footer {background: #7d7d7d; padding: 20px 0; color: #fff;}
footer h2{margin-top: 0; font-weight: 600; font-family: "Titillium Web", Trebuchet MS, sans-serif;}

footer a,
footer a:active {
    color: #fff;
    -webkit-transition:all 0.3s 0s ease-in-out;
    transition:all 0.3s 0s ease-in-out;
	text-decoration: none;
}
footer a:hover,
footer a:focus {
    color: #f96741;
}
.top-button {
    bottom: 15px;
    display: none;
    position: fixed;
    right: 15px;
}
.top-button a,
.top-button a:active {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.1);
    color: #444;
    font-size: 30px;
    padding: 5px;
    -webkit-transition:all 0.3s 0s ease-in-out;
    transition:all 0.3s 0s ease-in-out;
}
.top-button a:hover,
.top-button a:focus {
    background-color: #f96741;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.2);
    color: #fff;
}
/* =============== */

@media screen and (max-width: 768px) {
	.call-top{
		color: #fff;
		
		font-weight: 600;
		margin: 0
	}
	.cover-tab-logo p{margin: 0;}
	#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
		padding: 5px;
		margin: 0 5px;
	}
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
	#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
		color: #3d3f3e;
		background-image: none;
		border-left: 5px solid #3d3f3e;
	}
	.nav  .divider {
	  background-color: #e5e5e5;
	  height: 1px;
	  margin-bottom: 9px;
	  margin-left: 0;
	  margin-right: 0;
	  margin-top: 9px;
	  overflow-x: hidden;
	  overflow-y: hidden;
	}
.site-box#green {
		background-image: none;
		background-color: #c7cb39;
		padding: 5%;
		margin: 5px 0;
	}	
.site-box#violet {
		background-image: none;
		background-color: #ffad48;
		padding: 5%;
		margin: 5px 0;
	}	
.site-box#violet  h3{

		font-weight: 600;
}
}

@media (min-width: 768px) and (max-width: 991px) {
	.call-top{
		color: #fff;
		
		font-weight: 600;
		margin: 0
	}
	.cover-tab-logo p{margin: 0;}
	.site-box#green {
		padding: 17% 10% 20% 10%;
		width: 90%;
		margin: 0 auto;
	}
	#green.site-box h2 {
		font-size: 22px;
	}
		.site-box#violet {
		padding: 20% 10% 35% 10%;
		width: 90%;
		margin: 0 auto;
	}
	.site-box#violet  h3{
	
		font-weight: 600;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.site-box#green {
		padding: 17% 10% 20% 10%;
		width: 90%;
		margin: 0 auto;
	}
	.cc-side {
		font-size: 20px;
	}
	.site-box#violet {
		padding: 20% 10% 35% 10%;
		width: 90%;
		margin: 0 auto;
	}
	.site-box#violet  h3{
	
		font-weight: 600;
	}
		.site-box#green  h2 {
		font-size: 22px;
	}
	.cc-side {font-size: 15px;}
}

@media (min-width: 1200px) {
	.site-box#green {
		padding: 17% 10% 20% 10%;
		width: 80%;
		margin: 0 auto;
	}
	.cc-side {
		font-size: 25px;
	}
	.site-box#violet {
		padding: 20% 10% 30% 10%;
		width: 80%;
		margin: 0 auto;
	}
	.site-box#violet  h3{
	
		font-weight: 600;
		
	}
	.site-box#green  h2 {
		font-size: 25px;
	}
	.cc-side {font-size: 20px;}
}


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