@charset "utf-8";
form.CUS input.subject { display: none; }
.contact-spacing input, .contact-spacing textarea{margin: 10px;border-radius: 8px;height: 40px;width: 45%;padding-left: 1%;}
input,textarea{margin-top:10px;width:95%}
.contact-spacing select{background-color: #ffffff;border-radius: 8px;height: 40px;margin-left: 2%;}
/* CSS Document */
.spam { display:none;}
.unselect{user-select:none}
html{scroll-behavior:smooth;transition:all .4s ease;overflow-x:hidden}
a{color:inherit;text-decoration:none}
li{list-style:none}
ul{padding:0}
*,::after,::before{box-sizing:border-box;transition-property:all;transition-duration:0.6s;transition-timing-function:ease}
p{font-size:18px;line-height:1.5}
body{font-family: 'Montserrat', sans-serif;margin:0px;color:#232323}
@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.span::before {
  content: '';
  display: inline-block;
  width: 3px;
  height:150px;
  transform: translateY(-0.3em);
  margin-right: 15px;line-height: .8;
background-color: #e53f0a;float: left;
}

.span{color:#fff;}
.font-color{color:#e95a2b;}
.g-recaptcha{float:left;max-width:100%;margin:20px 0px}
.g-recaptcha *{transform:scale(1)}
.e-mail:before{content:attr(data-website) "\0040" attr(data-user);unicode-bidi:bidi-override;direction:rtl}
.button1,.button2{width:auto;float:left;background-color:#e53f0a;color:#fff;line-height:50px; padding:0px 1%;border-radius:3px;margin:20px 0px;}
.button2{background-color:#fff;font-weight: bold;color:#e53f0a}
.button1:hover{background-color:#3f1817}
.button2:hover{background-color:#e53f0a;color:#fff}
#social{float:right}
.banner-text h1 span {font-size:inherit}
h1{font-size: 55px;text-transform: capitalize}
#banner{
    float: left;
    width: 100%;
    background-image: url("professional-services/kia-key-replacement.jpg");
    background-position: left top;
    background-size: 100% auto;
    background-repeat: no-repeat;height:98vh;position: relative;
}
.f-right{float:right;position: absolute;right:10%;bottom:30px}
#banner p{line-height:35px;font-size: 16px}
.row3::before{z-index:1;right:0px;bottom:0!important;top:inherit}
.img-animation{-webkit-animation:alltuchtopdown 1.5s ease-in-out 0s infinite alternate;animation:alltuchtopdown 1.5s ease-in-out 0s infinite alternate;animation-duration:1.5s;-webkit-animation-duration:2.5s;margin-right:3%}

/*banner text*/
.banner-text{width:55%;float:left;position:absolute;top:100px;left:10%;color:#fff;font-family:Muli,sans-serif;z-index:99;text-transform: uppercase;}
.banner-text span{font-weight: 600; font-size:24px}
.phone{position: relative;float:right;color:#fff;background: #e53f0a;padding: 10px;line-height: 23px;width:20%}
.phone1{background: #e95a2b;margin:.2%;border: 1px dashed #ea6338;padding: 10px 25px;font-weight:500;font-size:18px}
#top{width:100%;float:left;background: #1e1e47}
#header{width:100%;float:left;background: #ffe9e9;position: relative}

header{width:100%;float: left;}
.header-info{border-left: 1px solid rgba(255, 255, 255, 0.1);color:#fff;float:right;padding: 20px;margin-top:10px}
#logo{float:left;margin-top:-70px;position: absolute;z-index: 5555555}
.nav{margin-right:5%;float:right;width:23%;color:#e53f0a;position: relative;height: 80px;font-weight:500}
.menu-link{color:white;text-shadow:none;padding:.75em .75em 0;height:3em;position:absolute;left:0;top:0;z-index:1001}
.menu-link:after{position:absolute;content:"☰";font-size:30px;color:#e95a2b;width:50px;height:50px;text-align:center;line-height:50px;border:1px #e95a2b solid;border-radius:50%}
.menu-link:hover{text-decoration:none}
.menu li{list-style:none}
.menu li a{color:#e95a2b;text-decoration:none;background-color:#212532;display:inline-block;height:2em;line-height:1em;padding:.4em;border-bottom:1px solid #333;width:100%}
.menu li a:hover{color:#e95a2b;background-color:#fffdea}
body:not(:target) #menu{margin:0;padding-top:3em;position:absolute;left:0;z-index:1000;top:30px;width:100%}
body:not(:target) #menu li{width:100%;height:0;line-height:0;overflow:hidden;-webkit-transition:height .25s;-moz-transition:height .25s;-o-transition:height .25s;transition:height .25s}
body:not(:target) #menu:target{z-index:1001}
body:not(:target) #menu:target li{height:2em;overflow:visible;-webkit-transition:height .25s;-moz-transition:height .25s;-o-transition:height .25s;transition:height .25s}
body:not(:target) #menu:target .back{height:0;line-height:0}
body:not(:target) #menu:target .back a{width:100%;background-color:transparent;border:0;height:auto;position:absolute;top:-101em;bottom:-101em;left:0;text-indent:-999em;z-index:-1}
@media(min-width:1200px){.menu-link{display:none}
body:not(:target) #menu{padding-top:0}
body:not(:target) #menu li{display:inline;border:0}
body:not(:target) #menu li a{color:#1e1e47;line-height:1em;padding:0em .75em .75em .75em;height:2em;width:auto;border:0;background-color:transparent}
body:not(:target) #menu li a:visited{color:#e95a2b;font-weight:bold}
	
body:not(:target) #menu li a:hover{color:#e95a2b}
body:not(:target) #menu .back{display:none}
}
.row1{width:100%;float:left;display:flex;justify-content:center;color:#e53f0a}
.row1 .font-h2{float:left;margin:5px .5%;background:#fff;padding:1%;font-weight:500;border-radius:3px}
.row1 .font-h2:last-child{margin-bottom:50px;}
.row1 .font-h2:hover{background:#e53f0a;padding:1%;color:#fff}
.row1 .content1 ul li {width:auto;margin-left:0}
h2{color:inherit;text-transform:uppercase;font-size:32px;line-height:45px}

 /*marquee*/
  .marquee {width:100%;margin: 50px auto;overflow: hidden;white-space: nowrap;box-sizing: border-box;animation: marquee 50s linear infinite;}
  .marquee:hover {animation-play-state: paused}
  /* Make it move */
 @keyframes marquee {0%   { text-indent: 27.5em }100% { text-indent: -105em }}

/*moving*/
.container{width:100%;float:left;padding:50px 0px;background-image:url("professional-services/bglayer-1.png");background-repeat: no-repeat; background-position: left bottom}
.row-dark{background-color:#202020;padding:30px 0px 0px 0px;background-image: url("professional-services/locksmith-bg-text.jpg");background-repeat: no-repeat; background-position: center top;background-attachment: fixed}
.float-r{float:right;margin-left:3%}
.row5,.content1,.content2{width:1200px;margin:auto}
.content1{position: relative}
.row5{display: flex;flex-wrap: nowrap;justify-content: space-around;align-items: center;align-content: center;padding:70px 5%;background-color:#f1f1f1;background-image: url("professional-services/pattern15.png");background-position:center bottom;width:100%;background-repeat:no-repeat;background-size:100%}
.margin-r{margin-right:10%}
.div-service1{width:50%}
.service-layout-2:hover {
    background-color: #e7496e;
    color: #ffffff;
}
.service-layout-2 i{font-size:30px;width:100%}
.service-layout-2 {
    position: relative;
    border-radius: 3px;
    background-color: #ffffff;
    transition: all .3s ease-in-out;
    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.2);    
	padding: 120px 45px 95px;
	float:left;margin:30px 1%;text-align: center;color:#484848;line-height:35px;height:450px;}

/*box-gallery*/
.iconbox,.iconbox-1,.iconbox-2 {
    position: relative;
    background: #13131c;
    padding: 45px 45px 45px 45px;
    margin: -135px 20px 0px 20px;
    transition: all 0.5s ease;
}
.iconbox-1 {background-color: #1e1e47}
.iconbox-2 {background-color: #3f1817}
.iconbox,.iconbox-1,.iconbox-2{color:#fff;font-size:25px;font-weight:500;text-align: left}
.iconbox:after,.iconbox-1:after,.iconbox-2:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: 55px;
    height: 55px;
    background: #e53f0a;
}
.iconbox:hover,.iconbox-1:hover,.iconbox-2:hover{background: #e53f0a;}
.iconbox-image {position: relative;display: block;}
.shadow-icon {position: absolute;left: 50%;top: -20px;transform: translateX(-50%);}
.content2 {text-align: center;position: relative}
.gallery {width: 100%;float:left;display:flex}
.img-gallery{width:calc(100% / 3);float:left; margin:50px 0px}
.img-gallery:nth-child(2){margin:0px 2%}
.content2 p{color:#656a7c}
h3{color:#e53f0a}
.content2 a{border-bottom: 1px solid #e53f0a;}
/*box-gallery*/
.row-dark p,.row-dark h2{color:#fff}

.row2{background-image:url("professional-services/garage-door-opener.jpg");background-position:right top;background-repeat:no-repeat}
.row2 div{width:52%;float:left;padding-left:10%;margin:70px 0px}
#form,.row3,.row2{position:relative;z-index:1;width:100%;float:left;color:#232323}
.row3{margin-top:20px;padding-bottom:30px}
@keyframes alltuchtopdown{0%{-webkit-transform:rotateX(0) translateY(0);-ms-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}
50%{-webkit-transform:rotateX(0) translateY(-20px);-ms-transform:rotateX(0) translateY(-20px);transform:rotateX(0) translateY(-20px)}
100%{-webkit-transform:rotateX(0) translateY(0);-ms-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}
}
@-webkit-keyframes alltuchtopdown{0%{-webkit-transform:rotateX(0) translateY(0);-ms-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}
50%{-webkit-transform:rotateX(0) translateY(-20px);-ms-transform:rotateX(0) translateY(-20px);transform:rotateX(0) translateY(-20px)}
100%{-webkit-transform:rotateX(0) translateY(0);-ms-transform:rotateX(0) translateY(0);transform:rotateX(0) translateY(0)}
}
/*line*/
.em-bar.em-bar-big{height:5px;width:90px;background:#aec6ef;margin:20px auto;position:relative;border-radius:30px}
.em-bar.em-bar-big:before{content:'';position:absolute;left:0;top:-2.7px;height:10px;width:10px;border-radius:50%;background:#27adc5;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:MOVE-BG;animation-name:MOVE-BG}
@-webkit-keyframes MOVE-BG{from{-webkit-transform:translateX(0);transform:translateX(0)}
to{-webkit-transform:translateX(88px);transform:translateX(88px)}
}
@keyframes MOVE-BG{from{-webkit-transform:translateX(0);transform:translateX(0)}
to{-webkit-transform:translateX(88px);transform:translateX(88px)}
}
.img-l{float:left;margin:20px 5% 30px 0px;}
/*gallery*/


.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}
.gallery h2{color:#e7496e}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: flex 0.8s ease;margin-top:40px
}
.item:hover {
  flex: 7;
  background-color:rgba(0,0,0,1)
}
.item-1 {
  background: url("professional-services/garage-door-near-me.jpg") no-repeat center top;
}

.item-2 {
  background: url("professional-services/emergency-garage-door-repair.jpg") no-repeat center top;
}

.item-3 {
  background: url("professional-services/garage-door-opener-repair.jpg") no-repeat left top;
}

.item-4 {
  background: url("professional-services/garage-door-spring-repair.jpg") no-repeat center top;
}

.item-5 {
  background: url("professional-services/garage-door-installation.jpg") no-repeat center top;
}

.row4{background-color:#373768;background-image:url("professional-services/testimonials-bg.jpg");background-repeat:no-repeat;background-position:center top;background-attachment: fixed; float:left;width:100%;color:#fff;font-size:25px;text-transform:uppercase;padding:50px 0px;line-height:45px}
.row4 .buttons{margin-top:30px}

/* -------------------------------------------------------- footer */
.footer{
  width: 30%;
  margin: 5vw auto;
  text-align: center;
}
.footer p{
  font-family: 'Raleway', sans-serif;
  font-size: 1vw;
  color: #000;
  font-weight: normal;
  line-height: normal;
  text-transform: none;
  padding: 1vw;
}
.footer p span{
  display: block;
}
.footer a{
  display: inline;
  text-transform: uppercase;
  border-bottom: 0.1vw solid #000;
}
/*Light Box*/
#coupon{margin:70px 0px}
.lightbox-target{position:fixed;top:0;left:0;width:100%;background:rgba(0,0,0,0.7);opacity:0;-webkit-transition:opacity .5s ease-in-out;-moz-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;overflow:hidden;z-index:999999999999}
.lightbox-target img,.lightbox-target iframe{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;transition:.5s ease-in-out;z-index:999999999999}
a.lightbox-close{width:100%;height:100%;position:absolute;transition:.5s ease-in-out;opacity:0;top:0;left:0}
.lightbox-target:target{opacity:1;top:0;bottom:0}
.lightbox-target:target iframe,.lightbox-target:target img{max-height:100%;max-width:100%}
.content1 ul li{padding:0;margin:30px 0px 10px 4%;list-style:none;list-style-position:outside;float:left;width:15%;line-height:30px;text-align:left}
#form{float:left;width:100%;color:#3a3a6a;margin-top:30px;padding:50px 0px;background-color:#f1f1f1;background-image: url("professional-services/pattern15.png");background-position:center bottom;background-repeat:no-repeat;background-size:100%}
#form h2{color:#13131c}
.input,.comment{width:26%;float:left;background:#fff;border:#8f8f8f 1px solid;margin:20px 2.5% 20px 0px;height:40px;color:#3a3a6a;border-radius:5px;padding:10px 1%}
.comment{width:55%;height:60px;line-height:60px}
.submit{border:none;height:50px;line-height:50px;float:left;margin:20px 0px;font-size:20px;text-transform:uppercase;color:#fff;margin-right:75%;border-radius:5px;}
#footer{
    color: #fff;
    background-color: #13131c;
    float: left;
    width: 100%;
    padding: 40px 60px 20px 20px;
    line-height: 35px;
    background-image: url(professional-services/footer_bg.png);
    background-position: center top;
    background-repeat: no-repeat;
}
#footer p{line-height:35px}
#footer span{color:#fff;}
#footer span::before{background-color:#1b1b27;}
.div1,.div2{float:left;width:27%;margin:200px 0px 50px}
.div2{width:40%;}
.div2{background: #1b1b27;text-align: center;padding:50px 5%}
#footer .div1:first-child li{width:90%;float:left;list-style-type:none;margin:0}
#footer .div1:last-child li{width:50%;float:left;list-style-type:none;margin:0}
#footer .div1:last-child{padding-left:4%;width:33%}
#copy-right i{border:1px solid;width:35px;height:35px;padding:8px 0;text-align:center;background-color:#2f2f3e;color:#fff;border-radius:50%;margin-right:2%}
#copy-right i:hover{border:0;box-shadow:0 3px 5px rgba(0,0,0,0.4);color:#e53f0a}
#copy-right{width:100%;float:left;background-color:#1b1b27;color:#99abbd;padding:5px 20px;text-align:center;line-height: 40px}
.footer-logo{margin-top:-180px!important;float:left!important;width:100%!important}
#footer .content1 .phone{width:100%;float: left}
#footer .content1 .phone1{background:#1b1b27}
/*fontawesome*/
.fab,.fas,.far{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;color:#fff;padding:5px;margin-right:10px;}
.phone i {float:left;margin-top:10px;background:#fff;border-radius: 50%;color:#e53f0a;}
.fa-clock{color:#e53f0a;}
.fa-bimobject:before{content:"\f378"}
.fa-blogger-b:before{content:"\f37d"}
.fa-facebook-f:before{content:"\f39e"}
.fa-map-marked-alt:before{content:"\f5a0"}
.fa-twitter:before{content:"\f099"}
.fa-yahoo:before{content:"\f19e"}
.fa-yelp:before{content:"\f1e9"}
.fa-youtube:before{content:"\f167"}
.fa-envelope-open-text:before{content:"\f658"}
.fa-map-marker-alt:before{content:"\f3c5"}
.fa-play:before{content:"\f04b";color:#27adc5}
.fa-caret-square-right:before{content:"\f152"}
.fa-globe:before{content:"\f0ac"}
.fa-clock:before{content:"\f017"}
.fa-phone:before{content:"\f095";}
.fa-home:before{content:"\f015"}
.fa-toolbox:before{content:"\f552"}
.fa-tools:before{content:"\f7d9"}
.fa-warehouse:before{content:"\f494"}
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;src:url(webfonts/fa-brands-400.eot);src:url(webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(webfonts/fa-brands-400.woff2) format("woff2"),url(webfonts/fa-brands-400.woff) format("woff"),url(webfonts/fa-brands-400.ttf) format("truetype"),url(webfonts/fa-brands-400.svg#fontawesome) format("svg")}
.fab{font-family:"Font Awesome 5 Brands"}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:800;src:url(webfonts/fa-regular-400.eot);src:url(webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(webfonts/fa-regular-400.woff2) format("woff2"),url(webfonts/fa-regular-400.woff) format("woff"),url(webfonts/fa-regular-400.ttf) format("truetype"),url(webfonts/fa-regular-400.svg#fontawesome) format("svg")}
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:1200;src:url(webfonts/fa-solid-900.eot);src:url(webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(webfonts/fa-solid-900.woff2) format("woff2"),url(webfonts/fa-solid-900.woff) format("woff"),url(webfonts/fa-solid-900.ttf) format("truetype"),url(webfonts/fa-solid-900.svg#fontawesome) format("svg")}
.fas,.far{font-family:"Font Awesome 5 Free"}
.far{font-weight:400}

@media only screen and (max-width:1300px){
.phone{margin-top:-10px}
#banner{background-size: cover;height:110vh}
h1 br{display: none}	
.f-right{display: none}	
.banner-text{top:15%;width:95%;left:2%}	
.margin-r{margin-right:0}
.nav{margin-top:10px;font-size:2vw;float:left;margin-left:80%}
.menu li a{padding: .8em;height: 3em;}	
#footer div,#footer li,#gallery,.row5,.content1,.content2{width:90%;float:left;margin:0px 5%}
.img-l{width:40%;margin:30px 30%;height:auto}
.row2{background-size:cover}
.row2 div{background-color:rgba(255,255,255,.4);margin: 70px auto;float: none;padding:50px 5%;width:70%}	
.row2 div span{color:#232323}
.row1{display:block}
.row5{display:block;width:100%;margin:0}
.content1 ul li{width:45%}	
.phone{width:30%}	
#logo{margin-top:-30px;}
h1{font-size:5vw}	
img{max-width: 100%;height:auto}	
.iconbox,.iconbox-1,.iconbox-2{font-size:2vw}
.float-r{width:50%;margin:50px 25%}
#footer .content1{margin-top:180px}	
.footer-logo{margin-top:20px!important}	
.div1{margin-top:50px}
}

@media only screen and (max-width:750px){
.phone{width:50%}	
.img-gallery{width:60%;margin:50px 20%}
.iconbox,.iconbox-1,.iconbox-2{font-size:3vw}
#footer .div1:last-child li{width:90%;}
#footer .div1:last-child {width: 80%;}
}


@media(max-width:650px){
	
.button1{display: none}
#form .button1{display: inline} 	
.img-l{width:80%;margin:30px 10%;height:auto}
.row5 ul li{width:40%}
.slider p{font-size:1.5vw}
}