@font-face{	font-family: Roboto;	src: url('../fonts/Roboto.ttf');}
@font-face{	font-family: Slabo;	src: url('../fonts/Slabo.ttf');}
body{
background: url('../images/Buda-quick-response-locksmith.png'); 
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}


#head{color: #fff; position: fixed; width: 100%; z-index: 1}
#head > .nav-top{background: url(../images/Locksmith-Buda-Texas-24-7.jpg); margin-bottom: 1px;}
#head h1{font-family: 'Slabo 27px', serif; color: #fff; margin:0;}
#head .pnum{font-family: 'Open Sans', sans-serif; color:#eee;}
#head  h2{ margin:0;}
#head  p{font-size: 12px; margin:0; }
#head  .cc{height:20px}
#head > .nav-top{padding: 10px 0;}


/* navigation start here */
#nav-toggle{
position: absolute; 
z-index: 1; right: 0; 
padding: 11px 10px; 
margin: 0; 
width: 52px; height: 49px; 
background: #986336;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;}  

.navbar-toggle .icon-bar{
width: 		32px;
height: 	3px;
position: 	relative
}

.navbar-toggle .icon-bar{
background: #fff;
transition: all 500ms ease-in-out;
}

.navbar-toggle .icon-bar:first-child{
transform:			rotate(45deg);
-ms-transform: 		rotate(45deg); /* IE 9 */
-webkit-transform: 	rotate(45deg); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(45deg);
-o-transform:      	rotate(45deg);
 top:				2px;
}
.navbar-toggle .icon-bar:last-child{
 transform: 		rotate(-45deg);
-ms-transform: 		rotate(-45deg); /* IE 9 */
-webkit-transform: 	rotate(-45deg); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(-45deg);
-o-transform:      	rotate(-45deg); 
bottom:				5px;
}

.navbar-toggle.active .icon-bar:first-child{
  transform: rotate(0);
-ms-transform: 		rotate(0); /* IE 9 */
-webkit-transform: 	rotate(0); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(0);
-o-transform:      	rotate(0);
  top:0;
    transition: all 500ms ease-in-out;
}
.navbar-toggle.active .icon-bar:last-child{
  transform: rotate(0);
-ms-transform: 		rotate(0); /* IE 9 */
-webkit-transform: 	rotate(0); /* Chrome, Safari, Opera */
-moz-transform:    	rotate(0);
-o-transform:      	rotate(0);
    bottom:0;
	  transition: all 500ms ease-in-out;
}

.nav-bot{
    position:absolute;
    white-space:nowrap;
    width:100%;
    overflow:auto;
    background-color:rgba(75,52,32,0.5);
	padding: 10px 10px 12px 10px;
	text-align: right;
	
}
.nav-bot a{
    margin-left:1em;
    text-decoration:none;
    padding: 5px 10px;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	color: #eee;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border: 1px solid transparent;
}
.nav-bot a:hover, .nav-bot a:focus, .nav-bot a:active
{color: #f59b35; border-color: transparent;}
.nav-bot a.active{color: #f59b35; border: 1px solid #5f3921; background: rgba(95,57,33,0.5)}
/* navigation end here */


/* banner start here */


/* Background images are set within the HTML using inline CSS, not here */

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.carousel-caption h2{font-family: 'Open Sans', sans-serif; text-shadow: 1px 1px 1px #333;}
.carousel-indicators{bottom: 5px;}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next
{margin-top :0;}
/* banner ends here */

article a{color: #000;}
article a:hover{color: #000;}
.btn-success{background-color: #986336; border-color: #986336;}
/* aside starts here */

aside{text-align: center; }
.panel-heading.call{
	background:url(../images/Buda-TX-locksmith.jpg) center no-repeat;
	color:#fff;
}
.panel-body h2{margin:0;font-family: 'Slabo 27px', serif;}
.panel-body h4{margin:0;font-family: 'Slabo 27px', serif;}
.panel-body.promo h5{margin:0}
.panel-default > .panel-heading{background-color:#5f3921; color:#fff; text-shadow: 1px 1px 1px #333; font-family: 'Slabo 27px', serif;}
.panel-body.promo{background:url(../images/mobile-Buda-locksmith.jpg); color:#fff ; text-shadow: 1px 1px 1px #333}
.panel-body.service{background:url(../images/Buda-mobile-locksmith.jpg) no-repeat center bottom; color:#fff; text-shadow: 1px 1px 1px #333}
.panel-body .cc{margin: 0 auto;}
.panel-heading h4{ color: #f59b35}

/* aside ends here */


/* footer starts here */
footer{background-color: #000; color: #eee; padding: 10px 0}
footer a{color: #986336;}
footer a:hover, footer a:focus, footer a:active{color: #986336;}
footer h2{margin:0}
/* footer ends here */

@media screen and (max-width: 768px) {

#head h1{font-size: 18px; text-align: center;}
#head .row{margin:0}
#head .cc, #myCarousel .cc{height: 15px;}

#head  .nav{text-align:center;}
#nav-toggle{height: 39px; padding-top: 10px;}
.nav-bot{padding: 0;}
.nav-bot a{margin:0; padding: 12px 5px; border:0; line-height: 40px;}
.nav-bot a:first-child{margin-left:5px;}
.nav-bot a:last-child{margin-right:5px;}
.nav-bot a:hover{border:0; color: #fff;}
.nav-bot a.active{border:0; 	border-radius: 0;	-moz-border-radius: 0;	-webkit-border-radius: 0; background-color: rgba(0,0,0,0.5;)}

#head .pnum{text-align: center; color: #fff; background: #f59b35; padding:5px 0;}
#head .pnum p{margin:0;}
.carousel-indicators{margin-bottom: 0; bottom: 10px;}
.carousel-indicators li, .carousel-indicators .active{margin: 0 10px}
.carousel-caption h2{font-size: 20px; font-weight: bold;}
.item{height: 250px;}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next
{margin-top :20px;}

article h1{font-size: 25px}
article h2{font-size: 21px}

/* aside starts here */
.panel-heading.call, .panel-body.promo, .panel-body.service{background:none; background-color:#986336; text-align:center;}
	.panel-body, .panel-heading{ text-align:center;}
	.panel-body img.cc{display:none;}
/* aside ends here */

footer{ text-align: center;}
}
	  
@media (min-width: 768px) and (max-width: 991px) {
#head h1{font-size: 20px; text-align: left; float: left;}
#head h2{font-size: 15px; display: inline;}
#head .pnum{ text-align: right;  float: right;}
#head  p{display: inline; font-size: 12px;}
#head  p .cc{height:20px;}
#head > .nav-top > .row{margin: 0 auto; padding: 0 60px 0 30px}

#head  .nav{margin:0 auto;}
.navbar-toggle{display: block;}
#nav-toggle{height: 43px; padding-top: 10px;}

.item {height: 300px;}
}

@media (min-width: 992px) and (max-width: 1199px) {
#head h1{font-size: 26px; text-align: left; float: left;}
#head h2{font-size: 18px; display: inline;}
#head .pnum{ text-align: right;  float: right;}
#head  p{display: inline;}

#head > .nav-top > .row{width: 900px; margin: 0 auto;}
#head  .nav{margin:0 auto;}
.navbar-toggle{display: block;}

.item {height: 300px;}

}

@media (min-width: 1200px) {
#head h1{font-size: 26px; text-align: left; float: left;}
#head h2{font-size: 18px; display: inline;}
#head .pnum{ text-align: right;  float: right;}
#head  p{display: inline;}

#head > .nav-top > .row{width: 1100px; margin: 0 auto;}
#head  .nav{margin:0 auto;}
.navbar-toggle{display: block;}

.item {height: 350px;}
}

.dummyspace{height: 100px}
a[href^=tel] { color: inherit; text-decoration: none; }