@charset "utf-8";
/* CSS Document */

	.marquee{
width: 100%;
margin-top: 15px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 15px;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;float:left;
}.marquee:hover{animation-play-state:paused}@keyframes marquee{0%{text-indent:27.5em}100%{text-indent:-105em}}
html{scroll-behavior: smooth}
*{box-sizing:border-box;transition: 0.5s}
body{margin:0;font-family:Arial;color:#482934}
img{height:auto}
a{color:inherit;text-decoration:none}
h1{margin:0 0 10px 0;font-size:30px}
h2{margin:0 0 10px 0;font-size:24px}
p{line-height:26px;font-size:17px;margin:0;padding:15px 0;}
p a{font-weight:bold}
.container{width:1200px;margin:0 auto}
/*Header Style*/
header{background-color:#fff;padding:15px;float:left;width:100%;font-weight:300;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;z-index:50;border-top:4px solid #e5e2de;border-bottom:solid 2px #e5e2de}
.shrink{padding:5px;background-color:rgba(255,255,255,0.95)}
.shrink .logo img{width:230px}
.logo{float:left;flex-grow:1}
.phone, .mail{float:right;line-height:26px;margin:0 20px}
.phone-inside{float:right}
.phone span{font-size:24px;font-weight:500;white-space: nowrap}
.header-icon{color:#F2EBBF;text-align:center;vertical-align:middle;transition:.5s;font-size:40px;padding:7px;font-weight:bold;margin:0 10px}
.estimate, .button4{background-color:#8CBEB2;padding:10px 20px;float:right;margin:0 10px;color:#FFFFFF;letter-spacing: 1px;font-weight: 500;white-space: nowrap}
.estimate:hover{color:#FFF;background-color:#F2EBBF}
.button4{font-size: 20px;text-align: center}
.button4:hover{box-shadow:2px 2px 5px rgba(0,0,0,0.8)}
/*Nav CSS*/
nav{background-color:#e5e2de;float:left;width:100%;font-weight:400;padding:0 10px;margin-top:115px}
#sub-menu{display:flex;justify-content:center}
.show-menu{display:none}
nav ul{margin:0;padding:0;float:left}
nav ul li{display:block;float:left;list-style-type:none;padding:12px 18px;line-height:24px}
nav label, nav input[type=checkbox]{display:none;color:#193045}
nav a{padding:10px 0}
/*Banner*/
#banner{background-image:url(professional-services/baltimore-locksmith-co.jpg);float:left;width:100%;padding-top:34.125%;background-size:100% 100%;position:relative}
#banner-txt{width:40%;position:absolute;top:150px;left:16%;border-left:7px solid #482934;padding:0 15px}
.button1,.button2,.button3, #button5{padding:0 20px;float:left;line-height:45px;border:3px solid #482934;border-radius:3px;letter-spacing:1px;margin-top:20px}
.button1, .button3, .button2:hover {background-color: #482934;color: #FFFFFF;}
.button2{margin-left:20px;}
.button3, #button5{transform: translateX(-50%);margin-left: 50%;white-space: nowrap;border:0}
.button1:hover{color: #482934;background-color: transparent}
.button3:hover, #button5:hover{background-color: #8CBEB2;color: #FFFFFF}
#button5{background-color: #F2EBBF;margin-top: 50px;}
/*Content*/
#row1, #row5{background-color:#e5e2de;float:left;width:100%;padding:70px 0;text-align: center}
.flex{display:flex;justify-content:space-between;margin-top:25px;}
.box{text-align:center;margin:20px;width:20%}
.circle{background-color:#fff;text-align:center;border-radius:50%;padding:15px;box-sizing:content-box;margin-bottom:20px}
.circle:hover{box-shadow: 0 0 10px #38e4ec;transform: scale(0.95)}
#row2, #row4 {float: left;	width: 100%;display: flex;}
.img-50, .img2-50 {background-image: url(professional-services/car-key-replacement.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;width: 50%;}
.img2-50 {background-image: url(professional-services/key-cutting.jpg);}
.txt-50,.txt2-50{width:50%;padding:50px 70px}
.list{list-style-type:none;padding-left:15px;line-height:26px}
.list li::before{font-family:"Font Awesome 5 Free";font-weight:600;content:"\f101";margin-right:10px;color:#8CBEB2}
#row3{background-color:#F2EBBF;float:left;width:100%;padding-top:20px;padding-bottom:20px}
#row3 .container{display:flex;align-items:center;justify-content:space-between}	
/*Light Box*/
.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:2}
.lightbox-target iframe, .lightbox-target img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;transition:.5s ease-in-out;z-index:100}
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 img{max-height:100%;max-width:100%}
/*row5 content*/	
.flex-img{border:15px solid #fff;overflow:hidden;background-color:#FFF;box-shadow:1px 1px 5px rgba(0,0,0,0.4)}
.flex-img img:hover{transform:scale(1.2) rotate(5deg)}
.caption{float:left;width:100%;position:relative;z-index:1;padding:20px 0;text-align:center;background-color:#FFF;font-size:20px}
#row6{float:left;width:100%;padding-top:50px;padding-bottom:50px}
/*video*/
#video{float:left;width:50%;text-align:center;position:relative}
.img-video{box-shadow: 1px 1px 5px rgba(0,0,0,0.6);max-width: 100%;}
/*Pulsing Button*/
.pulse-button{position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;display:block;width:100px;height:100px;font-size:2em;text-align:center;line-height:100px;color:white;border-radius:50%;background:#F2EBBF;cursor:pointer;box-shadow:0 0 0 0 rgba(91,198,204,0.7);animation:pulse 1.5s infinite;}
.pulse-button:hover{animation:none}
@keyframes pulse{0%{transform:scale(0.9)}
70%{transform:scale(1);box-shadow:0 0 0 50px rgba(90,153,212,0)}
100%{transform:scale(0.9);box-shadow:0 0 0 0 rgba(90,153,212,0)}
}
/*End Video*/
#service-location{float:right;width:50%;padding-top:0;padding-left:30px;padding-bottom:0}
#service-location li, #footer li{width:45%;float:left}
#row7{background-color:#e5e2de;background-image:url(professional-services/contact-expert-change-keys.jpg);background-repeat:no-repeat;background-position:right bottom;float:left;width:100%;padding-top:40px}
#form{padding:20px;float:left;width:50%;margin-bottom:40px;font-size:30px;font-weight:600}
form p{font-weight:normal}
form input::placeholder{opacity:1}
.form-bg,.comment{width:99%;height:50px;line-height:55px;color:#482934;display:block;float:left;font-family:Arial;font-size:16px;margin-bottom:10px;border:1px solid #482934;margin-top:10px;background-color:transparent;margin-right:5%;padding-left:15px}
.comment{height:100px}
.submit{margin-top:10px;float:left;background-color:#482934;width:120px;height:45px;color:#fff;font-size:20px;border:0;transition:.5s;border-radius:5px;padding:0 20px;box-shadow:0 7px 0 rgba(0,0,0,0.3); clear:both}
.submit:hover{transform:translateY(3px) scale(0.95);box-shadow:0 3px 0 rgba(0,0,0,0.3);cursor:pointer;background-color:#F2EBBF;color:#482934}
#row8{background-color:#F2EBBF;float:left;width:100%}
.marquee{width:100%;font-size:14px;overflow:hidden;white-space:nowrap;box-sizing:border-box;animation:marquee 30s linear infinite;float:left}
@keyframes marquee{0%{text-indent:27.5em}
100%{text-indent:-105em}
}
#footer {color:#fff;background-color:#482934;float:left;width:100%;padding:40px 60px 20px 20px;display: flex;
justify-content: space-around;}
.footer1 {float: left;max-width: 33%;color:#E5E2DE;padding-left:20px;}
#footer i{margin-right:10px;}
.social {float: left}
.social i{border-radius: 50%;border:2px solid;width:40px;height: 40px;padding:10px 12px}
.social i:hover{border:0;background-color: #8CBEB2;box-shadow: 0 3px 5px rgba(0,0,0,0.4)}
#copy-right{width:100%;float:left;background-color: #191E32;line-height: 50px;color:#FFF;text-align: center}
@media only screen and (max-width:1350px){
img{max-width: 100%}
.container{width:100%;padding-right:20px;padding-left:20px}
nav{padding:10px;z-index: 2;position: relative}
nav a:hover,nav a.active{border-bottom:0}
nav ul{width:100%;}
nav ul li{border-bottom:solid 1px #fff;width:100%;padding:0}
nav ul li{border-left:0}
nav ul li a{display: block;text-align: center;line-height: 20px;background-color: #482934;color: #FFF}
nav ul li:hover a{background-color: #F2EBBF;color: #0A2C4E}
.show-menu{display:block;text-align:center;float:right;}
input[type=checkbox]:checked ~ #sub-menu{display:block;position:absolute;right:0;bottom: -328px;z-index: 1}
#sub-menu{display:none}
.bar1,.bar2,.bar3{width:25px;height:3px;background-color:#0A2C4E;margin:6px;transition:.4s;display:block}
.change .bar1 {transform: rotate(-45deg) translate(-9px, 3px) ;}
.change .bar2 {opacity: 0;}
.change .bar3 {transform: rotate(45deg) translate(-9px, -4px);}
.mail {display: none}
#banner{padding:10% 50px;background-size: cover;background-position: 60%}
#banner-txt {position: static;width:60%}
.circle{width:60%;}
.flex-img{margin:10px}
#footer {padding:20px;flex-wrap: wrap}
.footer1{max-width:100%;width:100%;margin-bottom: 20px;padding-bottom: 10px; border-bottom: 1px solid #626B8C}
#form{white-space: nowrap}
#row7{background-size: 50%}
}
@media only screen and (max-width:900px){
.estimate{display: none}
#banner-txt {width:80%;background-color: rgba(255,255,255,0.3);padding-top: 15px}
h1{font-size: 22px}
.flex{flex-wrap: wrap;justify-content: space-around}
.box{width:40%}
.circle{width:50%;padding: 5px}
#row3 .container{flex-wrap: wrap}
#row2, #row4{flex-wrap: wrap}
.txt-50, .txt2-50, .img-50, .img2-50 {width: 100%;padding:20px}
.img-50, .img2-50 {padding-top:45%;}
#video, #service-location{width:100%;margin-top: 15px}
}
@media only screen and (max-width:700px){
i.header-icon{display: none}
#banner-txt {width:100%;padding:5% 20px}
#banner{background-image: url(professional-services/pattern.jpg);background-size: auto}
header{padding: 15px 5px}
.phone span {font-size: 20px;}
.button1, .button2{padding:0 10px}
.box{width:100%;margin:20px 0}
.circle{width:auto;}
#row7{background-image: none}
#form{width:100%;white-space: normal}
}
@media only screen and (max-width:400px){
.button2{display: none;}
}
/*!
 * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}:root .fa-flip-horizontal{filter:none}.fa-blogger-b:before{content:"\f37d"}.fa-clock:before{content:"\f017"}.fa-envelope:before{content:"\f0e0"}.fa-facebook-f:before{content:"\f39e"}.fa-globe:before{content:"\f0ac"}.fa-instagram:before{content:"\f16d"}.fa-linkedin:before{content:"\f08c"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-mobile-alt:before{content:"\f3cd"}.fa-paper-plane:before{content:"\f1d8"}.fa-phone:before{content:"\f095"}.fa-play:before{content:"\f04b"}.fa-twitter:before{content:"\f099"}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;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:400;font-display:auto;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")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;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")}.far,.fas{font-family:"Font Awesome 5 Free"}.fas{font-weight:900}
.g-recaptcha{max-width:100%;overflow: hidden;display:inline}
.g-recaptcha *{transform:scale(1);float:left;transform-origin: left}
.e-mail:before{content:attr(data-website) "\0040" attr(data-user);unicode-bidi:bidi-override;direction:rtl}