/* ============= //
// Mary (c) 2016 //
// ============= */
.inhead{background-color: #005870; color: #fff}
.inhead h1{  font-weight: 600;}
.inhead > .container > div:nth-child(2){text-align: right;}

/* ========== //
// 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: #444;
}
#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: 5px 5px;
	text-align : center;
	margin: 0 5px;
    background-color: rgba(255, 255, 255, 0);
}
.banner {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss */
background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(left, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */
color:#fff;}
 
/* ===============//
//      slides    //
/* ===============*/
#myCarousel{
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss */
background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(left, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */
}
.item {
	background-size: auto 100%!important;
	height: 300px;
 

	}
#item1 {
	background: url('../images/Perry-automotive-locksmith.png')  no-repeat center #fff;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px dotted #000000;
}
#item2 {
	background: url('../images/Perry-residential-locksmith.png')   no-repeat center #fff;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px dotted #000000;
}
#item3 {
	background: url('../images/Perry-commercial-locksmith.png')  no-repeat  center #e3e4e7;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px dotted #000000;
}
#item4 {
	background: url('../images/Perry-emergency-locksmith.png')   no-repeat center #e3e4e7;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px dotted #000000;
}#item5 {
	background: url('../images/Perry-locksmith.jpg')    center #e3e4e7;
border-radius: 200px 200px 200px 200px;
-moz-border-radius: 200px 200px 200px 200px;
-webkit-border-radius: 200px 200px 200px 200px;
border: 0px dotted #000000;


}
 

.carousel-indicators {
	bottom: 60px;
}

.carousel-indicators li {
	border-color: #00c8af;
}
 
/* ================= */


.owl-theme .owl-controls{margin-top:0;}
#owl-demo .item{margin: 0;}
#owl-demo .item img{display: block; width: 100%; max-height: 180px;}

#item5 { padding: 20px 2px; }
 
#item5 h2{padding-left: 10px;text-transform: uppercase; line-height: 80%;  text-transform: uppercase; color: #fff;  margin-top: 10px; 	font-family: "Titillium WebLight";  text-shadow: 2px 2px #444; font-size:40px; padding-bottom:50px}
 
 
 

.navbar{margin-bottom: 10px;}
.navbar-default{background-color: transparent;}
.nav.navbar-nav{float:none;  margin: 0 auto; text-align: center}
.nav.navbar-nav i{font-size: 25px;}
.nav.navbar-nav > li{display: inline-block; float: none; font-family: "Titillium Web"; font-size: 15px;}
.nav.navbar-nav > li > a{color: #c8c8c8; border-bottom: 3px solid transparent; padding: 10px 15px 5px 15px;}
.nav.navbar-nav i{display: block; width: 100%; color: #f08b05;}
.nav.navbar-nav span{display: block; width: 100%; color: #fff;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover{background-color: transparent; border-bottom-color: #ffad48; color: #7d8485;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { 
color: #7d8485;}


.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/Perry-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;
}

.cc{ font-size: 20px;}

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





/* ======================== //
// IV. Connection Bar Style //
// ======================== */
 
 
 

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

/* ================= //
// III. Top Info //
// ================= */
.topinfo p>span {font-size: 15px; font-family: "Titillium WebSemiBold";  }
.cards {    height: 15px;}
.topinfo {background-color :#544d44 ; color:#e0e1e8;}
/* ================= */

/* =============== //
// Services Tab    //
// =============== */
.services > div {
	margin: 0 auto;
	vertical-align: top;
	color: #444;
	display: inline-block;
	max-width: 300px;
	padding: 5px;
}
.services .top {max-width: 300px;  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f0b7a1+0,8c3310+50,752201+51,bf6e4e+100;Brown+Gloss */
background: rgb(240,183,161); /* Old browsers */
background: -moz-linear-gradient(left, rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */
color:#fff;
padding:20px;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 2px solid #4444;
}
.services img{display:inline; width: 40px;}
.services h2{margin:10px;}
.services h3{margin:10px;}
.services span{font-style: italic;font-size: 12px;}

.services .body {
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border: 2px solid #4444;

padding:20px;
 
 
}
 

.services-tab  .site-box .title{
 


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

border-radius: 41px 40px 0px 0px;
-moz-border-radius: 41px 40px 0px 0px;
-webkit-border-radius: 41px 40px 0px 0px;
border: 0px solid #000000;
}

 
.services-tab  .site-box{
	background: url('../images/Perry-locksmith.PNG') center 0 no-repeat ;
height:240px;
     width: 240px;
padding: 40px;
 
}
.services-tab .front-page-list {
font-size: 13px;
}
.services-tab .box-content h3 {
	text-align: center;
	    color: #444;
}
.services-tab .box-content p {
	text-align: center;
	    color: #444;
		font-size:12px;
}

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

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

/* =============== //
// 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) {

 
	.cover-tab-logo p{margin: 0;}
.navbar-toggle{ color: #444; background-color: #fff; border-radius: 0;
-moz-border-radius: 0;-webkit-border-radius: 0; padding: 5px 10px; }
.navbar-default .navbar-toggle{border: 3px solid #fff;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color: #f96741; color:  #fff}
.navbar-default .navbar-brand{text-transform: uppercase;   color: #fff; text-align:center;}

.navbar-default{background-color: #fafafa;	border-bottom: 1px solid #f4f4f4; }
.navbar-default .navbar-brand span{color: #fff;font-size:12px;}
 
 
@media (max-width: 767px) {
	
	.services-tab .site-box{
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;
border: 1px solid #000000;
	background: url('') center 0 no-repeat ;
	margin:5px;
	width: 100%;}
	
	.services-tab .site-box .title	{
		
 border-bottom: double;
}
	.services-tab .box-content p{margin:20px;}
 
.navbar-default .navbar-brand  {
 
    font-size: 20px;
	
	
	
}
.topinfo {
    
    text-align: center;
}
.topinfo p>span {  display: block;}
.topinfo p {
    margin: 0;
}
}
@media (min-width: 768px) and (max-width: 991px) {
 
.banner img{   margin: 0px 0px;}
	.cover-tab-logo p{margin: 0;}
	 .topinfo {
    
    text-align: center;
}
	
	.inhead h1{font-size: 28px;}
	.inhead h2{font-size: 25px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
 
	.cc-side {
		font-size: 20px;
	}
	 
 
	.cc-side {font-size: 15px;}
    
}

@media (min-width: 1200px) {
		.cover-tab {height: 1009px;}
	.site-box#green {
		padding: 10% 10% 10% 10%;
		
	
	}
	.cc-side {
		font-size: 25px;
	}
	.site-box#violet {
		padding: 10% 10% 10% 10%;
	
	margin-top: 20px;


	}
	.site-box#violet  h3{
	
		font-weight: 800;
		
	}
	.site-box#green  h2 {
		font-size: 35px;
	}
	.cc-side {font-size: 20px;}
}


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