/* ========== //
// I. Plug-in //
// ========== */
html {       overflow-x: hidden;    }
.center {text-align: center}

@font-face {
    font-family: "Aller_Lt";
    font-style: normal;
    font-weight: 200;
      src:  url("../font/Aller_Lt.TTF");
}
@font-face {
    font-family: "Aller_Rg";
    font-style: normal;
    font-weight: 300;
      src:  url("../font/Aller_Rg.ttf");
}
@font-face {
    font-family: "Aller_Bd";
    font-style: normal;
    font-weight: 400;
    src:  url("../font/Aller_Bd.ttf");
}
@font-face {
    font-family: "AllerDisplay";
    font-style: normal;
    font-weight: 600;
    src:  url("../font/AllerDisplay.ttf");
}
/* ========== */


.top-info{      
     color: #fff;
    background-color: #191c20;
       padding: 10px 100px 5px 100px;
  font-family: Aller_Lt;
}

.top-info p{ font-size:18px; text-shadow: 2px 2px #333;}

.innerrow{margin-top: 5px;}

.top-number{display:inline-block; margin-left:2px;

}
.imagecontent {
    float: right!important;
    padding: 9px;
    box-shadow: 0px 0px 4px 0px #A1A1A1;
    margin: 10px 10px 10px 15px;
    max-width: 40%;}

.icn> a > img{display:; margin: 1px; height: 25px; }

  .icn{display:inline-block; margin: 1px;  }
/*  //////// banner //////// */
 
 .banner1{margin-top:150px}
.banner1 h2{ font-family:AllerDisplay;font-size:70px;color:#fac329;text-shadow: 2px 2px #333; }

#parallax{
position: absolute;
    top: 50px;
    width: 100%;
    z-index: 2;
	
}

.parallax2{
position: absolute;
    top: 50px;
    width: 100%;
    z-index: 2;
	
}

.carousel-item {
  height: 42vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.carousel-caption h3{ font-family:AllerDisplay;}
 .borderbg4{background-image:  url(../images/Lone-Tree-locksmith-residential-commercial.png);}
 
 .borderbg1{background-image: url(../images/Lone-Tree-locksmith-auto-emergencyl.png);}
 
 
@media (max-width: 540px) {
 
 
 
 
}

/*  //////// banner end //////// */

/*  //////// nav  //////// */
.nav-css{font-family:AllerDisplay;background-color:#252932;  }
 #navdrop ul li {    font-family:Aller_Lt;}
.nav-css a:link {
color: #fff;
}

 
nav-css a:visited {
      color: #fff;
}

 
nav-css a:hover {
    color: #f7f7f7;
}

 
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #f9cd22;
    background-color: #191c20;
}
/*  //////// nav end //////// */
#navdrop ul il{float:right!important;}
/*  //////// media  //////// */



/*  //////// article //////// */

.mainarticle {    font-family:Aller_Rg; margin-top:30px; padding:50px 200px;     text-align: left;    text-justify: inter-word;  }  
.mainarticle p{  font-size:20px;}
/*  //////// article end //////// */


/*  //////// sidebar //////// */
.sdecor {;
border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border: 2px solid #d2d3d4;
background-color:#d2d3d4;
}
.sidebar {margin-top:30px; font-family:Aller_Bd;}
.sidetop{  margin:0px;
 background-image:    url(../images/Lone-Tree-locksmith-services.png);
background-size: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 220px; 
	color:#1b2b4d!important;
	text-align: center; 
	padding:30px 0px;}
	
.topp {     font-size: 20px;}
.sidebar hr{     border: 2px solid #1b2b4d;
    border-radius: 5px;
width: 60%;    margin-top: 5px; margin-bottom: 10px;  }
.ccsize{    font-size: 25px;}
.sidetop h4 {       padding: 0px 20px 0px 20px;   }
.sidetop h2 { font-size: 1.5rem;     padding-bottom: 10px; }
 
.sidetop2{  margin:0px;
 background-image:    url(../images/Lone-Tree-locksmith-services.png);
background-size: 500px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 220px; 
	color:#1b2b4d!important;
	text-align: center; 
	padding:35px 0px;}
.sidetop2 h3{font-size: 2rem;}
.sidetop2 p{font-size: 1.5rem;}
 

.coupon1{  
margin:0px;
  
    background-repeat: no-repeat;
    background-position: center center;
  
	background-color:#3c3c3e;
	 border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 3px none #000000;}
	.coupon2{ margin:0px;
 background-image:    url(../images/Lone-Tree-locksmith-cupon.png);
background-size: 70px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 169px;

	background-color:#3c3c3e;
 
	 border-radius: 0px 20px 20px 0px;
-moz-border-radius: 0px 20px 20px 0px;
-webkit-border-radius: 0px 20px 20px 0px;
border: 3px none #000000;}

}
 
 
 .lgd{display:none!important;}
 

.btn-secondary{font-family:Aller_Lt;  color: #f9cd22;
    background-color: #191c20;  }
/*  //////// sidebar end //////// */
/*  //////// services  //////// */

/*  //////// services end //////// */
/*  //////// footer  //////// */

footer .jumbotron{background-color: #191c20;     color:#fff; font-family:AllerDisplay; }
  
footer a:link {
color: #f9cd22;
}

 
footer a:visited {
      color: #fff;
}

 
footer a:hover {
    color: #f7f7f7;
}

 
footer a:active {
    color: blue;
}

footer hr{ border: 1px solid #fff;}

.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;
}
/*  //////// footer end //////// */

 @media (max-width: 541px){
	 
	  .sidetop{background-size: 700px;padding: 35px 0px;}
	  
	  .sidetop2{    background-size: 700px;    padding: 45px 0px;    margin-top: 10px;    height: 170px;}
	 .banner1 h2 {font-size: 2rem; padding-top: 40px;}
	 .sidetop p{    font-size: 18px; }
	.sidetop h4 {    font-size: 18px; }
	.sidetop h3{    font-size: 18px; }
	.sidetop h2{    font-size: 20px; }
	  .center{display:inline!important;float:none!important; text-align:center;}
	 .topp{    margin: 5px;}

	 .marg{
		 margin-left: 80px!important;
		 margin-right: 80px;
	 margin-top: 5px;
	 } 
		 	 .mainarticle {  padding:0px 50px;}
			 .site-box {margin:5px;}
			   .coupon2{display: none;}
 }



@media (min-width: 541px) and (max-width: 767px){
	
 
 #navdrop ul li {text-align:center;}
.banner1 h2 {font-size: 3rem; padding-top: 40px;}

 
 
.sidetop p{    font-size: 20px; }
	.sidetop h4 {    font-size: 20px; }
	.sidetop h2{    font-size: 20px; }
	 .center{display:inline!important;float:none!important; text-align:center;}
	  .marg{
		 margin-left: 80px!important;
		 margin-right: 80px;
	 margin-top: 5px;
	 } 
	 	 .mainarticle {  padding:0px 50px;}
		 	 .box-content {height:270px; }
	 .site-box {margin:5px;}
	  .title h3{font-size:26px;}
	   .coupon2{display: none;}
}
@media (min-width: 768px) and (max-width:  991px){
 
.banner1 h2 {font-size: 3.5rem;    padding-top: 40px; }	
.sidetop p{    font-size: 15px; }
	.sidetop h4 {    font-size: 15px; }
	.sidetop h2{    font-size: 15px; }	
	 .center{display:inline!important;float:none!important; text-align:center;}
 
	 .title h3{font-size:26px;}
	 .box-content {height:190px; }
	 .site-box {margin:5px;}
	 .mainarticle {  padding:0px 70px;}
	 .coupon2{display: none;}

}
					
@media (min-width:  992px) and (max-width: 1199px) {
	.sidetop p{    font-size: 15px; }
	.sidetop h4 {    font-size: 15px; }
	.sidetop h2{    font-size: 15px; }
 .banner1 h2 {font-size: 5rem; }	
 .lgd{display:inline!important;}
 
.services-tab {padding:0px 50px;}
.title h3{font-size: 1.5rem;}
.box-content {height:270px;}

.coupon1{  
margin:0px;
 background-size: 85px;
    background-repeat: no-repeat;
    background-position: center center;
  
	background-color:#3c3c3e;
	 border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
-webkit-border-radius: 20px 0px 0px 20px;
border: 3px none #000000;}
.coupon2{height:193px}
.desplyon{display: none;}
 
}	 
						 
 
@media (min-width: 1200px) {
	.site-box{height:150px;}
  .lgd{display:inline!important;}
  .services-tab {padding:0px 50px;}
 
.coupon2{height:193px}
.coupon1{  
margin:0px;
 background-size: 85px;
    background-repeat: no-repeat;
    background-position: center center;
	background-color:#3c3c3e;
	 border-radius: 20px 0px 0px 20px;
-moz-border-radius: 20px 0px 0px 20px;
-webkit-border-radius: 20px 0px 0px 20px;
border: 3px none #000000;}
.desplyon{display: none;}
}
/*  //////// media end //////// */