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

.front-page-list {margin-bottom: 0;} 
aside .head > h4 {    font-family: "RobotoMedium";
    color: #fff; }

/* ========== //
// I. Plug-in //
// ========== */
.center {text-align: center}
.text-right{text-align: right}
@font-face{	font-family: "RobotoLight";	src: url('../font/Roboto-Light.ttf');}
@font-face{	font-family: "RobotoRegular";	src: url('../font/Roboto-Regular.ttf');}
@font-face{	font-family: "RobotoMedium";	src: url('../font/Roboto-Medium.ttf');}
@font-face{	font-family: "RobotoBold";	src: url('../font/Roboto-Bold.ttf');}
/* ========== */


/* ================= //
// II. General Style //
// ================= */
body {
   font-family: "RobotoRegular";
   background-color: #cccccc;
background-image: url("../images/Atascosa-locksmith.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}
a, a:hover {
    color: #2C104C; font-family: "RobotoMedium";
}
.text-center{text-align: center;}
strong { color: #A24611;}
/* ================= */


/* ================= //
// III. Header Style //
// ================= */
.top-info{background-color: #fff; color: #000; font-family: "RobotoLight";}
.top-info p{margin: 0; font-size: 14px;}
 

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

 
.navbar{margin-bottom: 0;}
.navbar-default{background-color: #333;}
.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: "RobotoLight"; font-size: 12px;}
.nav.navbar-nav > li > a{color: #c8c8c8; border-bottom: 3px solid transparent; padding: 10px 15px 5px 15px;}
.nav.navbar-nav i , .nav.navbar-nav span{display: block; width: 100%}
.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: #9b7b55; color: #7d8485;}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover { 
color: #7d8485;}

#brand{text-align: right; color: #fff; font-family: "OpenSans-Semibold"; text-shadow: 1px 1px 2px #000; margin-top:20px;}
#brand ul{list-style: none; font-size: 24px; display: inline-block; text-align: left; padding-right: 30px;}
#brand ul a{color: #fff; font-family: "OpenSans-Light";}
#header{
	background: linear-gradient(to right, rgba(0,0,0,0.63) 0%, rgba(0,0,0,0) 69%, rgba(0,0,0,0) 100%), url('../images/commercial-locksmith-Atascosa.jpg') no-repeat center center transparent;
	background-size: cover;
}
#slides {
    position: relative;
    height: 230px;
    width: 350px;
    padding: 0px;
    margin-top: 20px;
    list-style-type: none;
	
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  border-radius: 10%;  
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}
.slide {
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    color: transparent;
	border: 2px solid white;
}

.slide:nth-of-type(1) {
    background-image: url('../images/Atascosa-auto-locksmith.jpg');
}
.slide:nth-of-type(2) {
    background-image: url('../images/Atascosa-residential-locksmith.jpg');
}
.slide:nth-of-type(3) {
    background-image: url('../images/Atascosa-commercial-locksmith.jpg');
}
.slide:nth-of-type(4) {
    background-image: url('../images/Atascosa-emergency-locksmith.jpg');
}
.slidetext{color: #3CCFCF;}

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





/* ======================== //
// IV. content //
// ======================== */

.content{background-color: transparent; }
article .innerarticle{background-color: #fff; padding:10px; }
article, aside{padding: 20px 0;}
article h2, article h3, article h4{color: #333; font-family: "RobotoRegular";}
article h1{background: url('../images/locksmith-Atascosa.gif') 0 0 no-repeat transparent; color: #2C104C; padding-top: 10px; text-transform: uppercase; 	font-family: "RobotoMedium"; font-weight: normal;  }
article h1{font-size: 28px}
article h2{font-size: 25px}
article h3{font-size: 22px}
article h4{font-size: 20px}

aside{text-align: center;}
aside .sidebox{background: #fff; border: 1px solid #f4f4f4; margin-bottom: 20px;}
aside .coupon > .head{background: url(../images/Atascosa-locksmiths.jpg) center center no-repeat transparent;}
aside .call > .head{background: url(../images/Atascosa-car-locksmith.jpg) center center no-repeat transparent;}
aside .head{ width: 100%; background-size: cover;  padding: 20px 10px}
aside .head > h3{margin: 0; font-family: "RobotoMedium"; color: #fff; margin-bottom: 20px;}
aside .head > p{color: #fff; margin-top: 0;}
aside .note  {position: relative; top: -12px;}
aside .note > span {background-color: #333; color: #fff; font-family: "RobotoLight"; text-transform: uppercase; padding: 5px; font-size: 12px; }
aside .body{ padding: 0 10px 20px 10px;}
aside .body h4{font-weight: normal; color: #7d8485; font-family: "RobotoLight"; margin:0;}
aside .body h2{margin:0;}
aside .body .cc{margin: 0 auto;}
aside a.button{margin: 0 auto; padding: 10px 15px; background-color: #9b7b55; border: 3px solid #9b7b55; color: #fff; text-transform: uppercase; text-decoration: none;}
aside a.button:hover{background-color: transparent; color: #9b7b55;}
/* ================= */


/* =============== //
// Services Tab    //
// =============== */
.services-tab  .site-box .title{
	padding: 20px 0;
background: #333; /* Old browsers */
color: #fff;
border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-bottom: 4px solid #2C104C;
}
.services-tab  .site-box{
background: #f4f4f4;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding-bottom: 20px;
margin: 25px 0;
color: #2C104C;
border: 1px solid #333;
border-top: none;
}
.services-tab .front-page-list {
font-size: 13px;
}
.services-tab .box-content h3 {
	text-align: center;
}


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

/* =============== //
// V. Footer Style //
// =============== */
footer{
	color:#fff;
background-color: #333; padding: 20px 0;
 
}
footer h2, footer a{margin-top:0; color: #fff; }
 
 
/* =============== */



.top-button {
    bottom: 15px;
    display: none;
    position: fixed;
    right: 15px;
}
.top-button a,
.top-button a:active {
    background-color: #9b7b55;
    border-radius: 5px;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.1);
    color: #333;
    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: #333;
    box-shadow: 0 0 10px 3px rgba(0,0,0,.2);
    color: #9b7b55;
}
.k3 h1{text-align:center;color: #fff; text-shadow: 2px 2px #ff0000; padding-top: 10px; text-transform: uppercase; 	font-family: "RobotoMedium"; font-weight: normal; }
@media (max-width: 767px) {
.navbar-toggle{ color: #fff; background-color: #9b7b55; border-radius: 0;
-moz-border-radius: 0;-webkit-border-radius: 0; padding: 5px 10px;}
.navbar-default .navbar-toggle{border: 3px solid #9b7b55; }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {background-color: #fff; color:  #333}
.navbar-default .navbar-brand{text-transform: uppercase; line-height: 85%; color: #2C104C; padding: 10px 15px}
.navbar-default{background-color: #333;	border-bottom: 1px solid #333; }
.navbar-default .navbar-brand span{color: #333}
 

.top-info strong{display: inline !important; color: #fff;}

#slides {

    height: 230px;
    width: 300px;
    padding: 0px;
	margin:auto;
    margin-top: 20px;
	
    list-style-type: none;
}

}

@media (min-width: 768px) and (max-width: 991px) {
 
}

@media (min-width: 992px) and (max-width: 1199px) {
 
}

@media (min-width: 1200px) {
article h1{font-size: 28px}
article h2{font-size: 25px}
article h3{font-size: 22px}
article h4{font-size: 20px}
}


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