@charset "utf-8";
/* CSS Document */
fieldset{margin-top:20px}
.unselect{user-select:none}
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 !important;width:100%}
.contact-spacing select{background-color: #ffffff;border-radius: 8px;height: 40px;margin-left: 2%;}

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;text-align: justify}
body{font-family: 'Montserrat', sans-serif;margin:0px;}

.container,.row2,.row3{float:left;width:100%;background-color:#eff4f7}
.container{padding:50px 0px}
#top{width:100%;float:left}
#header{background-image:url(professional-services/expert-garage-door.jpg);background-repeat:no-repeat;background-position:center top;background-size:cover;float:left;width:100%;background-color:#003a7c;color:#fff;padding:70px 0px;background-attachment: fixed}
.height{height:67vh;float:left;width:100%}
.row{width:1300px;margin:0px auto;}
#logo{float:left;margin-top:30px;}
.img-top{float:left;width:50%;position:relative;z-index:5;margin-right:50%}
#nav{width:100%;float:left;text-align:left;padding-top:20px;position:relative;z-index:100000000000;font-size: 18px}
#nav ul{display:flex;justify-content:flex-start}
#nav ul li{float:right;padding: 20px 1% 0px 0px;}
label,#nav input[type=checkbox]{display:none}
.row1{
    width: 100%;
    float: left;
    background-color: #114177;
    color: #fff;
    padding: 80px 0px;
    background-image: url(professional-services/garage-door-installation.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: 100% 100%;
}
.row1 h2{color:#9FC131}
.row2 .container {display: flex;justify-content: space-between;margin: 0 auto;background: rgba(0,0,0,0)}
.h2{display:block;width:100%}
figure{position:relative;margin:20px auto;overflow:hidden;width:279px;max-height:290px;background:#000;text-align:center;cursor:pointer;box-shadow:2px 2px 4px rgba(0,0,0,0.8);float: left}
figure h2, figure .h2{color:#FFF;font-family:helvetica;padding-top:15%;padding-bottom:5%;transition:transform .35s;transform:translate3d(0,-20px,0);text-shadow:1px 1px 2px #000;opacity:0}
figure p{font-family:helvetica;padding:10px 2.5em;opacity:0;transition:opacity .35s,transform .35s;transform:translate3d(0,20px,0);letter-spacing:1px;font-size:68.5%;text-align: center}
figure a{z-index:20;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
figure:hover img{opacity:.4}
figure:hover h2, figure:hover .h2{opacity:1;transform:translate3d(0,20px,0);background-color:transparent}
figure:hover p{opacity:1;transform:translate3d(0,0,0)}
figure img{transition:opacity .35s;position:relative;display:block;min-height:100%;max-width:100%}
figure figcaption,figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
figure figcaption{color:#fff;text-transform:uppercase;font-size:1.25em;backface-visibility:hidden}
figure figcaption:before,figure figcaption:after{position:absolute;top:30px;right:30px;bottom:30px;left:30px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
figure figcaption:before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1)}
figure figcaption:after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0)}
figure figcaption:hover:before,figure figcaption:hover:after{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.p1{width:50%;float:left;margin-top:20px;font-size:17px}
.phone{position:relative;float:left;font-size:40px;width:20%;white-space: nowrap}
.pulse{position:absolute;top:0px;right:-30%;width:50px;height:50px;line-height:15px;color:#9FC131;border-radius:5px;}
.pulse i{font-size:17px;padding-left:10%}
.pulse span,.pulse:before,.pulse:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:0 solid #fff;border-radius:5px;-webkit-animation:da-pulse 1.5s ease-in-out 0s infinite;animation:da-pulse 1.5s ease-in-out 0s infinite}
.pulse span{border-color:#fff;border-width:4px;top:6px;left:6px;right:6px;bottom:6px}
.pulse:before{border-color:#c4c2c2;border-width:2px;top:0;left:0;right:0;bottom:0}
.pulse:after{border-color:#c4c2c2;border-width:1px;top:-5px;left:-5px;right:-5px;bottom:-5px}
@-webkit-keyframes da-pulse{0%,100%{-webkit-transform:scale(1.25);transform:scale(1.25);opacity:0}
48%,52%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
@keyframes da-pulse{0%,100%{-webkit-transform:scale(1.25);transform:scale(1.25);opacity:0}
48%,52%{-webkit-transform:scale(1);transform:scale(1);opacity:1}
}
a.lightbox img{transition:.5s}
.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 img{margin:auto;position:absolute;top:0;left:0;right:0;bottom:0;border:3px solid white;box-shadow:0 0 8px rgba(0,0,0,0.7);box-sizing:border-box;transition:.5s ease-in-out}
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%}
h1{color:#9FC131}
.row2{background-color:#e0ebef;padding:50px 0px}
.img1{float:right;margin:20px 0px 30px 2%}
h2{color:#909090;text-transform:uppercase;font-size:30px;padding-top:30px;font-weight:600}
h2 span{color:#9FC131}
.row2 h2{padding-top:0px;}
ul{margin:0;padding:0;color:inherit}
li{list-style:none;margin:0;padding:0}
.row2 ul li{font-size:19px}
.row3{background-color:#003a7c}
.img3{float:right}
/*button*/.btn{background-color:#f69220;position:relative;border-radius:5px;display:inline-block;font-size:20px;overflow:hidden;margin:10px 0px 30px 0px;color:#003a7c;padding:10px 2%;float:left;font-weight:bold}
.btn.black a span{display:inline-block;margin-left:5px}
.shine{background:-moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 100%);float:none;position:absolute;right:0;top:0;height:100%;width:200px;pointer-events:none;opacity:0}
.btn .shine{animation:slide 1.5s infinite;opacity:1}
@keyframes slide{0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
.float-l{float:left}
#contact{
    color: #fff;
    text-align: center;
    padding: 50px 0px 100px;
    background-image: url(professional-services/contact-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
}
#contact h2{color:#fff;}
.input,.comment{width:40%;margin:30px 4.7% 30px 0px;border:solid 2px #9FC131;background-color:rgba(255,255,255,0);line-height:35px;padding-left:2%;color:#fff}
.comment{width:60%;margin-right:20%;height:70px;line-height:70px;margin-left:20%}
.service-type{margin-top:20px;}
.g-recaptcha{float:left;margin-bottom:40px;margin-left:30%}
.g-recaptcha *{float:left;margin-top:10px;}
.e-mail:before{content:attr(data-website) "\0040" attr(data-user);unicode-bidi:bidi-override;direction:rtl}
.submit{margin-left:2%;background-color:rgba(255,255,255,0);color:#fff;border:0;font-size:18px;position:relative;z-index:999999999999999999;height:30px}
/*submit button*/ 
.button{cursor:pointer;margin:10px 0px 0px 2%;border-radius:5px;text-decoration:none;padding:10px;font-size:22px;transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;display:inline-block;color:#fff;border:2px #9FC131 solid;outline:none}
.button:hover{color:#003a7c;background-color:#9FC131}
@-webkit-keyframes ripple-in{100%{top:0;right:0;bottom:0;left:0;opacity:1}}
@keyframes ripple-in{100%{top:0;right:0;bottom:0;left:0;opacity:1}}
.ripple-in{display:inline-block;vertical-align:middle;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 0 1px rgba(0,0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-moz-osx-font-smoothing:grayscale;position:relative;margin-top:40px;margin-right:30%}
.ripple-in:before{content:'';position:absolute;border:#9FC131 solid 3px;top:-12px;right:-12px;bottom:-12px;left:-12px;opacity:0;-webkit-animation-duration:1s;animation-duration:1s}
.ripple-in:hover:before,.ripple-in:focus:before,.ripple-in:active:before{-webkit-animation-name:ripple-in;animation-name:ripple-in}
.services{float:left;width:100%;color:#003a7c;padding-top:30px;line-height:30px;font-size:18px;font-weight:bold;}
.about{float:left;width:27%;color:#003a7c;padding-top:30px;line-height:30px;}
.about div{font-size:18px;font-weight:bold;color:#003a7c;}	
.services ul li{float:left;font-size:17px;font-weight:normal;color:#003a7c;width: 20%;margin:20px 2% 20px 0px}
.services .far{margin-bottom:0}
.copyright{width:100%;float:left;text-align: center;line-height:30px;background-color: #003a7c;color: #9FC131;padding:60px 0px}	
/*font awesome*/.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;margin-right:10px;color:#9FC131;font-size:25px;margin-top:2px;margin-bottom:25px}
.fa-check-square:before{content:"\f14a"}
.fa-phone:before{content:"\f095"}
.fa-yahoo:before{content:"\f19e"}
.fa-yelp:before{content:"\f1e9"}
.fa-facebook-f:before{content:"\f39e"}
.fa-youtube:before{content:"\f167"}
.fa-blogger-b:before{content:"\f37d"}
.fa-foursquare:before{content:"\f180"}
.fa-google:before{content:"\f1a0"}
@font-face{font-family:'Font Awesome 5 Brands';font-style:normal;font-weight:400;font-display:swap;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-weight:400}
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:400;font-display:swap;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-family:'Font Awesome 5 Free';font-weight:400}
@font-face{font-family:'Font Awesome 5 Free';font-style:normal;font-weight:900;font-display:swap;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")}
.fa,.fas{font-family:'Font Awesome 5 Free';font-weight:900}

@media only screen and (max-width:1300px){
.phone{-webkit-text-stroke-width: 1px;-webkit-text-stroke-color: #003a7c;}	
.row2 .container {flex-wrap: wrap;}	
.img-top{width:80%;margin:20px 10%;background-color:rgba(12,46,83,.6);padding:2%}	
.pulse,#logo{display: none}	
.p1,.row{width:96%;float:left;margin:2%}
.row{display:flex;flex-wrap:wrap}
img{max-width:100%;height:auto}
#nav{margin-top:0}
.btn,.float-l,.img3,.img1 img{width:50%;margin-left:25%;margin-right:25%;height:auto}
.p1{order:2}
#header{background-position: right top}
ul{width:100%}
.img3{order:2}
.row3 .row{display:block}
.input{width:45%}
.service-type{width:100%}
.about,.services,.zip-codes{width:100%}
#sub-menu{display:none}
#nav ul{margin-top:20px;background-color:#9FC131}
#nav ul,#nav ul li{width:100%;padding:5px 2%;flex-wrap:wrap;text-align:left}
#nav ul li a{display:block;height:30px;line-height:30px}
.show-menu{display:block;color:#fff;margin-bottom:5px;padding:10px 0;font-size:30px}
input[type=checkbox]:checked ~ #sub-menu{display:block;margin:0;padding:0}
.gallery-item{width:90%}
#contact{display:table;}	
}
@media only screen and (max-width:700px){
.btn,.float-l,.img3,.img1 img{width:70%;margin-left:15%;margin-right:15%}
.services ul li{width: 50%;}
}
@media only screen and (max-width:480px){.btn,.float-l,.img3 img{width:100%;margin:0px}
.input{width:95%}
.g-recaptcha *{transform:scale(.9)}
.g-recaptcha{margin-bottom:10px;margin-left:12%}
}