@font-face{	font-family: Roboto;	src: url('../fonts/Roboto.ttf');}
@font-face{	font-family: Slabo;	src: url('../fonts/Slabo.ttf');}


body{
background: url('../images/24-hour-Lago-Vista-Locksmith-service.jpg'); 
-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-color: #0a0d0d; 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: #000;
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: #f68e56;
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(0,0,0,0.7);
	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: #f68e56; border-color: transparent;}
.nav-bot a.active{color: #f68e56; border: 1px solid #f68e56;}
/* navigation end here */


/* banner start here */
#myCarousel{margin-bottom: 10px; background: url('../images/Locksmith-Lago-Vista-24-7.jpg') repeat 0 0 transparent; padding-top: 90px;}
.ban-input h2{font-family: 'Open Sans', sans-serif; }
.ban-input p{font-family: 'Open Sans', sans-serif;margin-bottom: 10px}
.carousel-indicators{bottom: 5px;}
.ban-input a{color: #f68e56; border: 1px solid #f68e56; padding: 10px 0; display: block; width: 100px; text-align: center;}
/* banner ends here */

article a{color: #000;}
article a:hover{color: #000;}
.btn-success{background-color: #f68e56; border-color: #f68e56;}
/* aside starts here */
aside{text-align: center; }
.panel-heading.call{
	background:url(../images/Lago-Vista-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:#233337; color:#fff; text-shadow: 1px 1px 1px #333; font-family: 'Slabo 27px', serif;}
.panel-body.promo{background:url(../images/mobile-Lago-Vista-locksmith.jpg); color:#fff ; text-shadow: 1px 1px 1px #333}
.panel-body.service{background:url(../images/Lago-Vista-mobile-locksmith.jpg) no-repeat center bottom; color:#fff; text-shadow: 1px 1px 1px #333}
.panel-body .cc{margin: 0 auto;}
/* aside ends here */


/* footer starts here */
footer{background-color: #000; color: #eee; padding: 10px 0}
footer a{color: #f68e56;}
footer a:hover, footer a:focus, footer a:active{color: #f68e56;}
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, .nav-bot a:focus{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.7);}

#myCarousel .pnum{text-align: center; color: #fff; margin-top:1px; background: #f58e4f; padding:5px 0;}
#myCarousel .pnum p{margin:0;}
#myCarousel{padding-top: 85px;}
.ban-input{margin-top: 10px;}
.ban-img img{margin: 0 auto; height: 150px}
.ban-input h2{text-align: center; color: #fff; margin:0; font-size: 20px;}
.carousel-indicators{margin-bottom: 0; bottom: 35px;}
.carousel-indicators li, .carousel-indicators .active{margin: 0 10px}

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:#233337; 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;}

.ban-img img{padding-bottom: 20px; height: 220px}
.ban-img {float: left; }
.ban-input{color: #fff; width: 450px; float: right; padding-right: 50px}
.carousel-inner > .item{width: 700px; margin: 0 auto !important;  }
}

@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;}

.ban-img img{padding-bottom: 20px;}
.ban-img {float: left; }
.ban-input{color: #fff; padding-top: 20px; width: 600px; float: right; padding-right: 50px;}
.carousel-inner > .item{width: 900px; margin: 0 auto !important;  }
}

@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;}

.ban-img img{padding-bottom: 20px; float: right;}
.ban-img {float: left; width: 400px; }
.ban-input{color: #fff; padding-top: 40px;width: 680px; float: right; padding-right:80px}
.carousel-inner > .item{width: 1100px; margin: 0 auto !important;  }
}


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