@charset "utf-8";
@font-face{font-family:Oxanium;src:url('oxanium.ttf') format('truetype')}
*,:after,:before{margin:0;padding:0;box-sizing:inherit}ul{padding-left:12px;list-style:url(../images/svg/dot.svg)}
img{border:none;vertical-align:middle}.img-center{display:block;margin:0 auto!important}.img-responsive{display:block;max-width:100%;height:auto}.text-center{text-align:center}
.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive.embed-responsive-4by3{padding-bottom:75%}
/*CONTAINERS & GRID*/
.container,.container-fluid{padding-right:30px;padding-left:30px;margin-right:auto;margin-left:auto}
@media screen and (min-width:48em){.container{width:748px}}
@media screen and (min-width:62em){.container{width:962px}}
@media screen and (min-width:75em){.container{width:1170px}}
@media screen and (min-width:90em){.container{width:1400px}}
/*BASIC*/
:root{--white:#fff;--yellow:#c99c35;--blue:#222f3d;--light-yellow:#cea649;--light-blue:#253a4f}
html{scrollbar-color:var(--yellow) var(--light-blue);font-size:62.5%;overflow-x:hidden;scroll-behavior:smooth}
::-webkit-scrollbar{width:17px}
::-webkit-scrollbar-track{background-color:var(--light-blue)}
::-webkit-scrollbar-thumb{background:var(--yellow)}
::-webkit-scrollbar-thumb:hover{background:var(--light-yellow)}
::selection{background-color:var(--yellow);color:var(--blue)}
body{background:var(--blue);color:var(--white);font:500 14px/1.5 Oxanium,sans-serif;overflow:hidden;box-sizing:border-box}
p{margin:10px 0 20px}
h1,h2,h3,h4,.like-h2{padding:0;font-weight:700}
h1{font-size:3rem;margin:2rem 0 1.5rem}
h2,.like-h2{font-size:2.6rem;margin:2rem 0 1rem}
h3{font-size:2.2rem;margin:1.5rem 0 1rem}
h4{font-size:1.4rem;margin:1rem 0}
/*LINKS*/
a{outline:0!important;text-decoration:none;color:var(--yellow);transition:color .2s ease}
a:hover,a:active,a:focus{text-decoration:underline}
a[href^="tel:"]{white-space:nowrap}
.b2top{position:fixed;right:2rem;bottom:2rem;z-index:10000;width:50px;height:50px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.b2top.active{opacity:100;pointer-events:all}
.b2top svg{width:50px;height:50px;fill:var(--light-yellow)}
.anchor-target{position:relative;top:-85px;width:1px;height:1px}
/*DIVS*/
.top-div{position:fixed;top:0;left:0;right:0;margin:0 auto;padding:15px 30px;display:flex;justify-content:space-between;z-index:30000;transition:all .2s ease}
.top-div--scroll{background-color:rgba(27,38,49,.8)}
.top-div__logo a:link,.top-div__logo a:visited{color:var(--white)}
.top-div__logo a:hover,.top-div__logo a:focus{color:var(--yellow);text-decoration:none}
.top-div__logo span{font-weight:500;font-size:2rem;line-height:1;display:inline-block;margin-left:2rem;vertical-align:middle}
.navigation{display:flex;align-items:center;position:relative}
header{height:800px;background:url(../images/topBG-1x.jpg) no-repeat top center;background-size:cover;display:flex;justify-content:center;align-items:center;text-align:center;position:relative;padding:0 30px}
header.header-inner{height:400px;background-position:center center!important}
.webp header{background:url(../images/topBG-1x.webp) no-repeat top center}
@media only screen and (min-resolution:192dpi),only screen and (-webkit-min-device-pixel-ratio:2){header{background:url(../images/topBG.jpg) no-repeat top center;background-size:cover}.webp header{background:url(../images/topBG.webp) no-repeat top center;background-size:cover}}
.header-title{margin:2rem auto 4rem}
.header-title__sub{font-weight:600;font-size:3rem;letter-spacing:1rem}
.header-title__sub--bigger{font-size:8rem;letter-spacing:1.5rem}
.top-estimate-link{position:absolute;left:30px;bottom:20px;font-size:2rem}
.top-estimate-link a:link,.top-estimate-link a:visited{color:var(--white);line-height:1}
.top-estimate-link a:hover,.top-estimate-link a:focus{color:var(--yellow);text-decoration:none}
.top-estimate-link span{margin-left:2rem}
section{padding:6rem 0}
.side-div{float:right;max-width:672px;width:50%;position:relative;margin:0 0 3rem 5rem}
.side-div.side-div__mobile{display:none;visibility:hidden}
.side-div .cta-text{position:absolute;left:0;right:0;margin:0 auto;top:120px;padding:3rem 0;max-width:592px}
.side-div .cta-text:before,.side-div .cta-text:after{content:"";position:absolute;width:0;height:6px;background-color:var(--white);transition:all .4s cubic-bezier(.86,0,.07,1)}
.side-div .cta-text:before{left:0;top:0}
.side-div .cta-text:after{right:0;bottom:0}
.side-div a:hover .cta-text:before,.side-div a:hover .cta-text:after{width:100%}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8rem}
.gallery .gallery-div{height:60rem;background-repeat:no-repeat;background-position:top center;background-size:auto 100%;background-position:center center;position:relative;transition:all .2s cubic-bezier(.86,0,.07,1)}
.gallery .gallery-div:before{content:"+";position:absolute;bottom:0;right:0;width:10rem;height:10rem;background:url(../images/svg/logoShape.svg) no-repeat top center;background-size:cover;display:flex;justify-content:center;align-items:center;color:var(--yellow);font-size:4rem;transform:translate(50%,50%)}
.gallery a:hover .gallery-div{background-size:auto 120%}
.gallery>div:nth-of-type(1) .gallery-div{background-image:url(../images/gallery/carLocksmith.jpg)}
.gallery>div:nth-of-type(2) .gallery-div{background-image:url(../images/gallery/brokenLock.jpg)}
.gallery>div:nth-of-type(3) .gallery-div{background-image:url(../images/gallery/keypad.jpg)}
.gallery>div:nth-of-type(4) .gallery-div{background-image:url(../images/gallery/frontDoor.jpg)}
.webp .gallery>div:nth-of-type(1) .gallery-div{background-image:url(../images/gallery/carLocksmith.webp)}
.webp .gallery>div:nth-of-type(2) .gallery-div{background-image:url(../images/gallery/brokenLock.webp)}
.webp .gallery>div:nth-of-type(3) .gallery-div{background-image:url(../images/gallery/keypad.webp)}
.webp .gallery>div:nth-of-type(4) .gallery-div{background-image:url(../images/gallery/frontDoor.webp)}
footer{background:var(--light-blue);padding:8rem 0 6rem;text-align:center;position:relative;margin-top:6rem}
.footer-logo{position:absolute;top:0;left:0;right:0;margin:0 auto;transform:translateY(-50%)}
footer .h-card{margin-bottom:1rem}
footer .h-card--header{font-size:18px;color:var(--yellow)}
/*TELEPHONE NUMBERS*/
.tel-phone{overflow:hidden}
.tel-phone a{font-size:2rem;position:relative;z-index:100;white-space:nowrap;text-decoration:none;transition:color .2s ease}
.tel-phone a:hover,.tel-phone a:active,.tel-phone a:focus{color:var(--yellow)}
.top-tel{margin-right:55px}
.top-tel a{color:var(--white)}
.bottom-tel{margin-bottom:3rem}
.bottom-tel a{font-size:8rem}
.bottom-tel a:hover,.bottom-tel a:active,.bottom-tel a:focus{color:var(--white);text-decoration:none}
/*MENU*/
.navigation__checkbox{display:none}
.navigation__button{height:5rem;width:30px;position:absolute;top:50%;transform:translateY(-50%);right:0;z-index:2000;text-align:center;cursor:pointer}
.navigation__background{height:7rem;width:7rem;border-radius:50%;opacity:0;position:fixed;top:6rem;right:6rem;background-image:radial-gradient(var(--yellow),var(--light-yellow));z-index:1000;transition:all .8s cubic-bezier(.86,0,.07,1)}
.navigation nav{height:100vh;position:fixed;top:0;left:0;z-index:1500;pointer-events:none;opacity:0;width:0;transition:all .8s cubic-bezier(.68,-0.55,.265,1.55)}
.nav__list{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);list-style:none;text-align:center;width:100%}
.nav__list>li{margin:1rem}
.nav__list li a:link,.nav__list li a:visited{display:inline-block;font-weight:300;color:var(--white);text-decoration:none;background-image:linear-gradient(120deg,transparent 50%,var(--white) 50%);background-size:240%;transition:all .4s ease}
.nav__list>li>a:link,.nav__list>li>a:visited{font-size:3rem;padding:1rem 2rem}
.nav__list li a:hover,.nav__list li a:active{background-position:100%;color:var(--blue);transform:translateX(1rem)}
.navigation__checkbox:checked~.navigation__background{transform:scale(80);opacity:1}
.navigation__checkbox:checked~nav{width:100%;opacity:1;pointer-events:all}
.navigation__icon{position:absolute;top:50%;transform:translateY(-50%);right:0;left:0;margin:0 auto}
.navigation__icon,.navigation__icon::before,.navigation__icon::after{width:100%;height:2px;background-color:var(--yellow);display:inline-block;transition:all .2s ease}
.navigation__checkbox:checked~.navigation__button .navigation__icon,.navigation__checkbox:checked~.navigation__button .navigation__icon::before,.navigation__checkbox:checked~.navigation__button .navigation__icon::after{background-color:var(--blue)}
.navigation__icon::before,.navigation__icon::after{content:"";position:absolute;left:0;right:0;margin:0 auto}
.navigation__icon::before{top:-8px}
.navigation__icon::after{top:8px}
.navigation__button:hover .navigation__icon::before{top:-1rem}
.navigation__button:hover .navigation__icon::after{top:1rem}
.navigation__checkbox:checked~.navigation__button .navigation__icon{background-color:transparent}
.navigation__checkbox:checked~.navigation__button .navigation__icon:before{transform:rotate(135deg);top:0}
.navigation__checkbox:checked~.navigation__button .navigation__icon:after{transform:rotate(-135deg);top:0}
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:.5rem 2rem 1rem;position:relative;text-align:center;top:0;bottom:auto;border-radius:var(--radius-sm);opacity:0;left:0;z-index:30000;min-width:24rem}
.dropdown-item.active .dropdown-menu{opacity:1}
nav .dropdown-menu a{padding:.25rem .3rem;white-space:nowrap}
nav .dropdown-menu li a{font-size:2.2rem}
nav .dropdown-menu li:last-of-type a{margin-bottom:0}
/*FORM*/
.popup-bg{position:fixed;inset:0;background-color:rgba(34,47,61,.3);opacity:0;backdrop-filter:blur(10px);z-index:30000;pointer-events:none;transition:opacity .8s cubic-bezier(.68,-.55,.265,1.55)}
.popup-bg.active{opacity:1;pointer-events:all}
.popup{
  background:var(--light-blue);padding:5rem 4rem 4rem;position:fixed;top:-100%;transform:translateY(-50%);left:0;right:0;
  margin:0 auto;z-index:35000;max-width:500px;text-align:center;transition:top 1s cubic-bezier(.68,-.55,.265,1.55)}
.popup.active{top:50%}
.popup-close{position:absolute;top:15px;right:15px;cursor:pointer;width:10px;height:10px}
.popup-close:before,.popup-close:after{content:"";position:absolute;top:50%;left:0;right:0;margin:0 auto;transform:translateY(-50%);height:2px;background:var(--white)}
.popup-close:before{transform:rotate(45deg)}
.popup-close:after{transform:rotate(-45deg)}
form{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
input[type=text],textarea{border:none;outline:none!important;width:100%;height:40px;padding-left:5px;font-family:inherit;font-size:16px;line-height:1;background:var(--white);color:var(--blue)}
textarea{resize:none;height:100px;padding-top:7px;grid-column:1 / -1}
.sendButton{height:50px;width:100%;font-family:inherit;font-size:25px;line-height:1;color:var(--blue);grid-column:1/-1;background-color:var(--yellow);cursor:pointer;border:none;-webkit-appearance:none;transition:all .2s ease}
.sendButton:hover{background-color:var(--light-yellow)}
input[placeholder]{color:var(--blue)}
:-moz-placeholder{color:var(--blue)}
::-moz-placeholder{color:var(--blue)}
:-ms-input-placeholder{color:var(--blue)}
::-webkit-input-placeholder{color:var(--blue)}
.form-control:focus{box-shadow:none!important}
@media screen and (max-width:90em){.side-div .cta-text{top:90px}}
@media screen and (max-width:75em){header{height:700px}.side-div .cta-text{top:60px}.gallery .gallery-div{height:40rem}}
@media screen and (max-width:62em){
  html{font-size:50%}
  header{height:600px}
  .side-div{max-width:40%}
  .side-div .cta-text{top:30px;padding:2.5rem 0}
  .side-div .cta-text:before,.side-div .cta-text:after{height:4px}}
@media screen and (max-width:48em){
  html{font-size:40%}
  header{height:500px;background:url(../images/topBGmobile-1x.jpg) no-repeat top center;background-size:cover}
  .webp header{background:url(../images/topBGmobile-1x.webp) no-repeat top center;background-size:cover}
  @media only screen and (min-resolution:192dpi),only screen and (-webkit-min-device-pixel-ratio:2){header{background:url(../images/topBGmobile.jpg) no-repeat top center;background-size:cover}.webp header{background:url(../images/topBGmobile.webp) no-repeat top center;background-size:cover}}
  header.header-inner{height:300px}
  .header-title__sub{font-size:2.5rem;letter-spacing:1rem}
  .header-title__sub--bigger{font-size:6rem;letter-spacing:1.5rem}
  .top-div__logo img{width:50px;height:50px}
  .top-estimate-link img{height:35px;width:35px}
  .top-tel a,.top-div__logo span,.top-estimate-link{font-size:2.5rem}
  section{padding:8rem 0}
  .side-div{float:none;max-width:400px;width:100%;position:relative;margin:8rem auto 6rem}
  .side-div.side-div__desktop{display:none;visibility:hidden}
  .side-div.side-div__mobile{display:block;visibility:visible}
  .gallery{grid-template-columns:repeat(2,1fr);max-width:500px;margin:0 auto}
  .gallery .gallery-div{height:50rem;background-size:100% auto}
  .gallery a:hover .gallery-div{background-size:120% auto}
  .gallery>div:nth-of-type(1) .gallery-div{background-image:url(../images/gallery/carLocksmith-1x.jpg)}
  .gallery>div:nth-of-type(2) .gallery-div{background-image:url(../images/gallery/brokenLock-1x.jpg)}
  .gallery>div:nth-of-type(3) .gallery-div{background-image:url(../images/gallery/keypad-1x.jpg)}
  .gallery>div:nth-of-type(4) .gallery-div{background-image:url(../images/gallery/frontDoor-1x.jpg)}
  .webp .gallery>div:nth-of-type(1) .gallery-div{background-image:url(../images/gallery/carLocksmith-1x.webp)}
  .webp .gallery>div:nth-of-type(2) .gallery-div{background-image:url(../images/gallery/brokenLock-1x.webp)}
  .webp .gallery>div:nth-of-type(3) .gallery-div{background-image:url(../images/gallery/keypad-1x.webp)}
  .webp .gallery>div:nth-of-type(4) .gallery-div{background-image:url(../images/gallery/frontDoor-1x.webp)}
  footer{font-size:1.6rem}
  footer .h-card--header{font-size:2rem}
  .popup{padding:8rem 5rem 5rem;max-width:450px}}
@media screen and (max-width:31.25em){
  .container{padding-left:15px;padding-right:15px}
  .top-div{padding:10px 15px}
  .top-div__logo img{width:40px;height:40px}
  .top-div__logo span{width:100px;margin-left:5px}
  .top-tel{margin-right:40px}
  header{height:400px;padding:0 15px}
  header.header-inner{height:250px}
  .header-title__sub{letter-spacing:.5rem}
  .header-title__sub--bigger{font-size:5rem;letter-spacing:1rem}
  .top-estimate-link{left:15px}
  section{padding:6rem 0}
  .gallery{gap:5rem}
  .gallery .gallery-div{height:35rem}
  .gallery .gallery-div:before{left:0;margin:0 auto;transform:translateY(50%);width:50px;height:50px}
  .bottom-tel a{font-size:6rem}
  .popup{width:auto;max-width:100%;left:15px;right:15px;padding:8rem 3rem 3rem}
  form{grid-template-columns:1fr;gap:10px}}