@charset "utf-8";     
*,:after,:before{box-sizing:border-box}img{padding:0;border:none;margin:0;vertical-align:middle}ul{list-style-position:inside}.bold,b,strong{font-weight:700}.img-center{display:block;margin:0 auto!important}.img-responsive{display:block;max-width:100%;height:auto}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.noRightPadding{padding-right:0}.noLeftPadding{padding-left:0}.paddingRight5{padding-right:5px}.paddingLeft5{padding-left:5px}
.vsblMobile,.vsblTablet{display:none!important}
@media screen and (max-width:991px){.hdnTablet{display:none!important}.vsblTablet{display:block!important}}
@media screen and (max-width:767px){.noRightPadding,.noLeftPadding,.paddingRight5,.paddingLeft5{padding-right:15px;padding-left:15px}.img-center,.img-right,.img-left{margin:0 auto!important;float:none!important;clear:both}.hdnMobile{display:none!important}.vsblMobile{display:block!important}}
/*CONTAINERS & GRID*/
.container,.container-fluid{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media(min-width:768px){.container{width:748px}}@media(min-width:992px){.container{width:962px}}@media(min-width:1200px){.container{width:1170px}}
.row{margin-right:-15px;margin-left:-15px}
.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.col-xs-pull-12{right:100%}.col-xs-pull-11{right:91.66666667%}.col-xs-pull-10{right:83.33333333%}.col-xs-pull-9{right:75%}.col-xs-pull-8{right:66.66666667%}.col-xs-pull-7{right:58.33333333%}.col-xs-pull-6{right:50%}.col-xs-pull-5{right:41.66666667%}.col-xs-pull-4{right:33.33333333%}.col-xs-pull-3{right:25%}.col-xs-pull-2{right:16.66666667%}.col-xs-pull-1{right:8.33333333%}.col-xs-pull-0{right:auto}.col-xs-push-12{left:100%}.col-xs-push-11{left:91.66666667%}.col-xs-push-10{left:83.33333333%}.col-xs-push-9{left:75%}.col-xs-push-8{left:66.66666667%}.col-xs-push-7{left:58.33333333%}.col-xs-push-6{left:50%}.col-xs-push-5{left:41.66666667%}.col-xs-push-4{left:33.33333333%}.col-xs-push-3{left:25%}.col-xs-push-2{left:16.66666667%}.col-xs-push-1{left:8.33333333%}.col-xs-push-0{left:auto}@media(min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.col-sm-pull-12{right:100%}.col-sm-pull-11{right:91.66666667%}.col-sm-pull-10{right:83.33333333%}.col-sm-pull-9{right:75%}.col-sm-pull-8{right:66.66666667%}.col-sm-pull-7{right:58.33333333%}.col-sm-pull-6{right:50%}.col-sm-pull-5{right:41.66666667%}.col-sm-pull-4{right:33.33333333%}.col-sm-pull-3{right:25%}.col-sm-pull-2{right:16.66666667%}.col-sm-pull-1{right:8.33333333%}.col-sm-pull-0{right:auto}.col-sm-push-12{left:100%}.col-sm-push-11{left:91.66666667%}.col-sm-push-10{left:83.33333333%}.col-sm-push-9{left:75%}.col-sm-push-8{left:66.66666667%}.col-sm-push-7{left:58.33333333%}.col-sm-push-6{left:50%}.col-sm-push-5{left:41.66666667%}.col-sm-push-4{left:33.33333333%}.col-sm-push-3{left:25%}.col-sm-push-2{left:16.66666667%}.col-sm-push-1{left:8.33333333%}.col-sm-push-0{left:auto}}@media(min-width:992px){.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.col-md-pull-12{right:100%}.col-md-pull-11{right:91.66666667%}.col-md-pull-10{right:83.33333333%}.col-md-pull-9{right:75%}.col-md-pull-8{right:66.66666667%}.col-md-pull-7{right:58.33333333%}.col-md-pull-6{right:50%}.col-md-pull-5{right:41.66666667%}.col-md-pull-4{right:33.33333333%}.col-md-pull-3{right:25%}.col-md-pull-2{right:16.66666667%}.col-md-pull-1{right:8.33333333%}.col-md-pull-0{right:auto}.col-md-push-12{left:100%}.col-md-push-11{left:91.66666667%}.col-md-push-10{left:83.33333333%}.col-md-push-9{left:75%}.col-md-push-8{left:66.66666667%}.col-md-push-7{left:58.33333333%}.col-md-push-6{left:50%}.col-md-push-5{left:41.66666667%}.col-md-push-4{left:33.33333333%}.col-md-push-3{left:25%}.col-md-push-2{left:16.66666667%}.col-md-push-1{left:8.33333333%}.col-md-push-0{left:auto}}
.container-fluid:after,.container-fluid:before,.container:after,.container:before,.row:after,.row:before{display:table;content:" "}.container-fluid:after,.container:after,.row:after{clear:both}
/*BASIC*/
:root{--white:#fff;--black:#3d3e3e;--red:#d64f3c;--gray:#dcdcdc;--orange:#ff917b}
body,html{padding:0;margin:0;overflow-x:hidden}
body{background:var(--white);color:var(--black);font:700 18px/1.3 "Sulphur Point",sans-serif;overflow:hidden}
p{padding:0;margin:5px 0 20px}
h1,h2,h3,h4{padding:0;font-weight:400;font-family:Goldman;text-transform:uppercase;line-height:1}
h1{font-size:45px;margin:30px 0 10px;color:var(--red)}
h2{font-size:30px;margin:30px 0 10px;font-weight:700}
h3{font-size:22px;margin:25px 0 10px}
h4{font-size:18px;margin:25px 0 10px}
h1 a,h2 a,h3 a,h4 a{color:inherit!important}
/*LINKS*/
a{outline:0!important;text-decoration:none;color:var(--red)}
a:hover,a:active,a:focus{text-decoration:underline}
/*DIVS*/
.main-container{background:none;margin:50px;border:var(--black) 3px solid;border-radius:20px;position:relative}
.main-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:var(--gray) 6px solid;border-radius:25px;top:0;left:0;bottom:-9px;right:-9px;z-index:-1}
.main-container>div{position:relative;padding:80px 0}
.sideTelDiv{position:fixed!important;top:50%;left:40px;padding:0!important;z-index:40000;transform:translateY(-25px)}
.container-fluid{padding:0 165px}
.line{background:var(--gray);position:absolute;z-index:-1;width:11px;height:11px}
.top{height:Calc(100vh - 50px)}
.top .container-fluid{display:grid;grid-template-columns:.9fr 1.1fr;height:100%;padding-right:60px}
.top .container-fluid:before,.top .container-fluid:after{content:none}
.top .container-fluid>div{height:100%;display:grid;align-items:center}
.top .siteNameDiv{position:relative}
.top .siteName{color:var(--black);font:400 4.5vw/1.1 Goldman;position:relative;text-transform:uppercase}
.top .siteName:before{content:attr(data-text);color:var(--gray);position:absolute;top:13px;left:10px;z-index:-1}
.top .scrollDiv{position:absolute;writing-mode:vertical-rl;text-orientation:mixed;bottom:0;left:0;transform:translateY(120%);font-family:Goldman;font-size:18px;letter-spacing:1px}
.top .scrollDiv span{position:absolute;bottom:-10px;left:8px;transform:translateY(100%);height:70px;width:3px;display:block}
.top .scrollDiv span:before{content:"";animation:elastic 3s cubic-bezier(1,0,0,1) infinite;position:absolute;top:0;left:0;right:0;background:var(--red);bottom:0}
@keyframes elastic{0%{transform-origin:0% 0%;transform:scale(1,0)}50%{transform-origin:0% 0%;transform:scale(1,1)}50.1%{transform-origin:0% 100%;transform:scale(1,1)}100%{transform-origin:0% 100%;transform:scale(1,0)}}
.top .screenDiv{display:flex;justify-content:center;align-items:center;position:relative}
.top .screenDiv .topSvg{position:absolute;top:50%;left:0;right:0;margin:0 auto;transform:translateY(-50%);z-index:10}
.top .screenDiv .pathShield{animation:vertFloat 10s ease-in-out infinite}
.top .screenDiv .pathLock{animation:horzFloat 14s ease-in-out infinite}
.top .screenDiv .pathCamera{animation:vertFloat 12s ease-in-out infinite}
.top .screenDiv .pathKey{animation:horzFloat 8s ease-in-out infinite}
@keyframes vertFloat{0%,100%{transform:translateY(0)}25%{transform:translateY(-20px)}75%{transform:translateY(20px)}}
@keyframes horzFloat{0%,100%{transform:translateX(0)}50%{transform:translateX(-20px)}}
.top .screenDiv .topRedSquare{position:relative;top:150px}
.topLogo{position:absolute;top:80px;left:74px}
.topLogo.innerTopLogo{top:0}
.top .line1{top:100px;left:90px;height:auto;bottom:0}
.text-section-one .line1{left:90px;right:300px;width:auto;top:0}
.text-section-one .line2{right:300px;height:auto;top:0;bottom:0}
.text-section-one .line3{left:90px;right:300px;width:auto;bottom:0}
.text-section .container-fluid{position:relative}
.text-section .sideDivMask{float:right;width:52%;padding-bottom:50%}
.text-section .sideDiv{position:absolute;top:0;right:0;width:50%}
.text-section .sideDiv .locksmithing{margin-left:auto;width:89%}
.text-section .sideDiv .phoneKeys{position:absolute;bottom:0;left:0;width:35%;height:auto}
.text-section .sideDiv .googleTitle{position:absolute;bottom:0;left:0;width:35%;height:auto;z-index:20}
.text-section .sideDiv .phoneScreenBg{position:absolute;bottom:0;left:0;width:35%;height:auto;z-index:15;fill:#ed8063;transition:fill .4s ease-in-out}
.text-section .sideDiv a:hover .phoneScreenBg{fill:var(--white)}
.map-section .map-cont{max-width:1326px;margin:0 auto;position:relative}
.map-section .servicesSvg,.map-section .carsSvg{position:absolute;top:50%;left:0;right:0;margin:0 auto;transform:translateY(-50%);z-index:50;height:auto;width:100%}
.map-section .servicesSvg{z-index:100}
.map-section .serviceBubble{opacity:0;transition:opacity .4s ease-in-out;animation:horzFloat 15s ease-in-out}
.map-section .serviceTrigger:hover+.serviceBubble{opacity:1}
.map-section .line1{top:0;height:Calc(50% - 6px);left:90px}
.map-section .line2{top:Calc(50% - 6px);left:90px;right:50%;width:auto}
.map-section .line3{top:Calc(50% - 6px);left:0;right:0;margin:0 auto;bottom:0;height:auto}
.text-section-two .line1{left:0;right:0;top:0;bottom:0;margin:0 auto;height:auto}
.text-section-two .line2{right:50%;width:auto;left:90px;bottom:0}
.gallery-section .line1{top:0;height:50%;left:90px}
.gallery-section .line2{top:50%;left:90px;right:90px;width:auto}
.gallery-section .line3{top:50%;right:90px;bottom:0;height:auto}
.gallery-section .options{display:flex;flex-direction:row;align-items:stretch;overflow:hidden;min-width:600px;max-width:900px;width:calc(100% - 100px);height:400px;margin:0 auto}
.gallery-section .options .option{position:relative;overflow:hidden;min-width:60px;margin:10px;background-size:auto 120%;background-position:center;cursor:pointer;transition:.5s cubic-bezier(.05,.61,.41,.95)}
.gallery-section .options .option:nth-of-type(1){background-image:url(../despics/gallery/carLocksmith.jpg)}
.gallery-section .options .option:nth-of-type(2){background-image:url(../despics/gallery/commercialLocks.jpg)}
.gallery-section .options .option:nth-of-type(3){background-image:url(../despics/gallery/frontDoorLocks.jpg)}
.gallery-section .options .option:nth-of-type(4){background-image:url(../despics/gallery/garageDoors.jpg)}
.gallery-section .options .option:nth-of-type(5){background-image:url(../despics/gallery/houseLocks.jpg)}
.gallery-section .options .option:nth-of-type(6){background-image:url(../despics/gallery/lockReplacement.jpg)}
.gallery-section .options .option.active{flex-grow:10000;transform:scale(1);max-width:600px;margin:0;border-radius:40px;background-size:auto 100%}
.gallery-section .options .option.active .shadow{top:100%;background:var(--red)}
.gallery-section .options .option.active .label{bottom:20px;left:20px}
.gallery-section .options .option.active .label .info .main{left:0;opacity:1;text-shadow:1px 1px 1px var(--black)}
.gallery-section .options .option:not(.active){flex-grow:1;border-radius:30px}
.gallery-section .options .option:not(.active) .shadow{background:var(--red)}
.gallery-section .options .option:not(.active) .label{bottom:10px;left:10px}
.gallery-section .options .option:not(.active) .label .info .main{left:20px;opacity:0}
.gallery-section .options .option .shadow{position:absolute;bottom:0;left:0;right:0;top:0;transition:.5s cubic-bezier(.05,.61,.41,.95)}
.gallery-section .options .option .label{display:flex;position:absolute;right:0;height:40px;transition:.5s cubic-bezier(.05,.61,.41,.95)}
.gallery-section .options .option .label .icon{display:flex;flex-direction:row;justify-content:center;align-items:center;min-width:40px;max-width:40px;height:40px;border-radius:100%;background-color:var(--white)}
.gallery-section .options .option .label .info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;color:var(--white);white-space:pre}
.gallery-section .options .option .label .info .main{font-size:1.2rem;position:relative;transition:.5s cubic-bezier(.05,.61,.41,.95),opacity .5s ease-out}
.bottom{padding:60px 0!important}
.bottom .line1{top:0;right:90px;height:85px}
.bottom .line2{top:85px;right:90px;left:50%;width:auto}
.bottom .bottomLogo{margin-bottom:30px}
.bottom .HCard{font-size:16px}
.bottom .HCard .likeH1{text-transform:uppercase;font-size:22px;font-family:Goldman}
.line.innerLine1{left:90px;top:90px;height:Calc(100% - 90px)}
/*TELEPHONE NUMBERS*/
.telNum{overflow:hidden;display:block}
.telNum a{position:relative;z-index:100;white-space:nowrap;text-decoration:none;transition:color .2s ease}
.telNum a:hover,.telNum a:active,.telNum a:focus{color:var(--black)}
.topTel{margin-top:20px}
.topTel img{position:relative;top:-5px}
.topTel a{font-size:55px;color:var(--orange)}
.bottomTel{margin-bottom:10px}
.bottomTel a{color:var(--red);font-size:35px}
/*MENU*/
nav{
  padding:0 15px;text-align:center;position:fixed;top:0;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center;
  background-color:var(--black);z-index:40000;opacity:0;pointer-events:none;transition:all .2s linear}
nav.active{opacity:1;pointer-events:all}
nav .navbar-nav{display:inline-block;margin:0;opacity:0;transform:translateY(20px);transition:all .2s linear .2s}
nav.active .navbar-nav{opacity:1;transform:translateY(0)}
nav ul{list-style-type:none;padding-left:0}
nav .navbar-nav>li{line-height:1;margin:10px 0}
nav .navbar-nav a{display:block;color:var(--white);padding:10px 15px;text-decoration:none;transition:all .2s linear;font-size:35px;border-radius:20px}
nav .navbar-nav a:hover,.navbar-nav a:focus{background-color:var(--orange)}
nav .navbar-nav a:hover,.navbar-nav a:focus{text-decoration:none}
/*DROPDOWN*/
nav .dropdown-item{position:relative}
nav .dropdown-item>a>span{position:relative}
nav .dropdown-item>a>span:before{content:"▼";font-size:.6em;position:relative;top:-1px}
nav .dropdown-item.active>a>span:before{content:"▲"}
nav .dropdown-menu{display:none;padding:5px 0 15px}
nav .dropdown-menu a{padding:5px 30px;white-space:nowrap;color:var(--white);font-size:28px}
nav .dropdown-menu a:hover,.dropdown-menu a:focus{background-color:var(--white);color:var(--black)}
/*HAMBURGER*/
.hamburgerCont{position:fixed!important;top:50%;left:40px;cursor:pointer;padding:0!important;z-index:40000;transform:translateY(25px)}
.hamburgerCont .hamburger{position:absolute;padding:10px;top:16px;left:3px;transform:rotateX(46deg) rotateY(38deg) rotateZ(0deg)}
.hamburgerCont .hamburger span{display:block;height:3px;background:var(--white);position:absolute;top:0;left:0;right:0;transition:all .2s linear .2s,transform .2s linear 0s}
.hamburgerCont .hamburger span:nth-child(2){top:5px}
.hamburgerCont .hamburger span:nth-child(3){top:10px}
.hamburgerCont.active .hamburger span{transition:all .2s linear,transform .2s linear .2s}
.hamburgerCont.active .hamburger span:nth-child(1){top:5px;transform:rotate(45deg)}
.hamburgerCont.active .hamburger span:nth-child(2){opacity:0}
.hamburgerCont.active .hamburger span:nth-child(3){top:5px;transform:rotate(-45deg)}
/*FORM*/
.formDiv{margin:40px 0}
input[type=text],textarea{border:var(--red) 3px solid;outline:none!important;width:100%;height:45px;margin:15px auto;padding-left:5px;border-radius:20px;font-family:"Sulphur Point";font-size:20px;color:var(--black)}
textarea{resize:none;height:100px;padding-top:7px}
.sendButton{font-size:30px;line-height:1;height:100px;width:100%;margin:15px auto;color:var(--white);border-radius:20px;background-color:var(--red);cursor:pointer;border:none;-webkit-appearance:none;transition:all .2s ease}
.sendButton:hover{background-color:var(--black)}
input[placeholder]{color:var(--black)}
:-moz-placeholder{color:var(--black)}
::-moz-placeholder{color:var(--black)}
:-ms-input-placeholder{color:var(--black)}
::-webkit-input-placeholder{color:var(--black)}
.form-control:focus{-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}
@media screen and (max-width:1349px){.top .siteName{font-size:4.1vw}.top .siteName:before{top:5px;left:5px}.text-section .sideDivMask{padding-bottom:55%;width:55%}}
@media screen and (max-width:1199px){
.container-fluid{padding:0 100px}
.topLogo{left:34px}
.top .line1,.map-section .line1,.map-section .line2,.text-section-two .line2,.gallery-section .line1{left:50px}
.text-section-one .line1,.text-section-one .line3{left:50px;right:200px}
.text-section-one .line2{right:200px}
.gallery-section .line2{left:50px;right:50px}
.gallery-section .line3,.bottom .line1,.bottom .line2{right:50px}
.text-section .sideDivMask{padding-bottom:45%;width:45%}
.text-section .sideDiv{width:40%}
.gallery-section .options .option .label .info .main{font-size:.9rem}
.line.innerLine1{left:50px}}
@media screen and (max-width:991px){
h1{font-size:40px}
h2{font-size:25px}
h3{font-size:20px}
h4{font-size:16px}
.container-fluid{padding:0 50px}
.main-container>div{position:relative;padding:40px 0}
.top{height:450px}
.topLogo{left:40px;top:30px;width:35px;height:auto}
.topLogo.innerTopLogo{position:static}
.line{display:none!important}
.topTel a{font-size:25px}
.topTel img{position:relative;top:0;width:30px;height:auto}
.top .scrollDiv{font-size:16px}
.top .scrollDiv span{height:50px}
.top .screenDiv .topRedSquare{top:125px}
.map-section{padding:0}
.formDiv{max-width:500px}}
@media screen and (max-width:767px){
h1{font-size:35px}
h2{font-size:22px}
h3{font-size:18px}
ul{list-style-position:initial;padding-left:20px}
nav .navbar-nav a{font-size:25px}
nav .dropdown-menu a{font-size:20px}
.container-fluid{padding:0 30px}
.main-container{background:none;margin:0;border:none;padding-top:60px}
.main-container:before{content:none}
.topLine{position:fixed;top:0;height:3px;left:0;right:0;margin:0 auto;z-index:60000;height:25px;background:var(--white);border-bottom:var(--black) 3px solid}
.topLine:after{content:"";position:absolute;bottom:-9px;left:0;right:0;height:6px;background:var(--gray);z-index:-1}
.top{height:auto}
.topLogo,.topLogo.innerTopLogo{left:0;top:7px;right:0;margin:0 auto;position:fixed;z-index:65000}
.sideTelDiv{top:7px;left:30px;transform:none;z-index:65000}
.hamburgerCont{top:7px;right:30px;transform:none;left:auto;z-index:65000}
.top .container-fluid{grid-template-columns:1fr;height:auto;padding:0 15px}
.top .container-fluid>div:nth-of-type(1){order:1}
.top .container-fluid .screenDiv{max-width:320px;margin:0 auto 40px;height:auto}
.top .screenDiv .topSvg{transform:none;position:relative;top:0}
.top .screenDiv .topRedSquare{position:absolute;top:140px}
.top .siteName{font-size:40px;text-align:center}
.top .siteName:before{top:4px;left:5px;right:-5px}
.topTel{text-align:center}
.topTel a{font-size:40px}
.topTel img{left:10px;top:-3px}
.googleTitle{margin:40px auto}
.gallery-section .options{min-width:400px;max-width:700px;height:350px}
.bottom .HCard{font-size:.9em}
input[type=text],textarea,.sendButton{margin:5px auto}}
@media screen and (max-width:500px){.top .siteName{font-size:30px}.container-fluid{padding:0 15px}.gallery-section .options{min-width:300px;max-width:300px;height:250px}.gallery-section .options .option .label .info{display:none}}