@charset "UTF-8";

:root{

/*Colors*/
--black10:hsla(0,0%,0%,.1);
--black50:hsla(0,0%,0%,.5);
--black70:hsla(0,0%,0%,.7);
--black90:hsla(0,0%,0%,.9);
--blue:hsla(220,100%,25%,1);
--blue90:hsla(220,100%,25%,.9);
--green:hsla(120,100%,16%,1);
--green30:hsla(120,100%,16%,.3);
--green70:hsla(120,100%,16%,.7);
--green90:hsla(120,100%,16%,.9);
--greendark:hsla(120,100%,4%,1);
--greenlight:hsla(120,100%,26%,1);
--greensuperlight:hsla(120,100%,36%,1);
--greensuperlight80:hsla(120,100%,96%,.85);
--greensuperlightmax:hsla(120,20%,90%,1);
--white50:hsla(0,0%,100%,.5);
--white70:hsla(0,0%,100%,.7);
--white80:hsla(0,0%,100%,.8);
--white90:hsla(0,0%,100%,.9);
--white95:hsla(0,0%,100%,.95);
    
/*Fonts*/
--font:'Roboto',sans-serif;

/*Gradients*/
--hero-grad:linear-gradient(to bottom,transparent,var(--black50));
--home-capabilities-grad:linear-gradient(white,var(--greensuperlightmax));
--home-cta-grad:linear-gradient(45deg,var(--blue90),var(--green90));
--home-intro-grad:linear-gradient(to right,transparent,var(--blue));
--subcontent-grad:linear-gradient(to bottom,var(--white95),whitesmoke);

/*Images*/
--hero-bg:url(../images/iStock-1194257274.jpg);
--home-capabilities-01:url(../images/handheld.jpg);
--home-capabilities-02:url(../images/starsat.jpg);
--home-capabilities-03:url(../images/sunset.jpg);
--home-capabilities-04:url(../images/beam.jpg);
--home-cta-bg:url(../images/AdobeStock_108877440.jpg);
--home-intro-bg:url(../images/iStock-879913090.jpg);
--subcontent-bg:url(../images/hexback.jpg);
    
}

/*Reset*/
*,::before,::after{box-sizing:border-box}
body,h1,h2,h3,h4,html,li,ol,p,ul{font-weight:normal;line-height:1.1;margin:0;padding:0}
body{min-height:101vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}
img{display:block;max-width:100%}

/*Theme*/
a{color:var(--green);text-decoration:none;transition:all .2s ease-in-out}
a:hover{color:var(--greenlight)}
body{background-color:var(--greendark);color:var(--greendark);font-family:var(--font)}
hr{border:0;border-top:1px solid var(--black10);margin:2rem 0}
ol,ul{margin-left:2rem}
p{font-size:1.1rem;line-height:1.5;margin-bottom:1.2rem}
sup{font-size:.5em;top:-.7em;margin:0 .1rem;position:relative;vertical-align:0}
ul li{line-height:1.3}
ul li:first-of-type{margin-top:.7em}

/*About*/
.about-grid{display:grid;grid-gap:2rem 4rem;grid-template-columns:repeat(3, auto);margin-top:3rem}
.about-grid img{width:40px}
.about-title-alt{color:var(--black70);font-size:calc(.9rem + .5vw)}
.about-title-quote{font-size:calc(1rem + 1vw);font-weight:400;line-height:1.2;margin:1em 0 .6em}
.about-title-sub{font-size:1.5rem;font-weight:700;margin:.4em 0}

/*Accomplishments*/
.accomplishments-grid{display:grid;grid-template-columns:repeat(3,auto);margin-top:3rem}

/*Animation*/
.animation-fadein{animation:fade-in 1s ease-in forwards;opacity:0}
.animation-fadein-delay1{animation-delay:0}
.animation-fadein-delay2{animation-delay:1s}
.animation-fadein-delay3{animation-delay:2.5s}

/*Buttons*/
.btn{background-color:var(--green);border-radius:.3rem;color:white;display:inline-block;font-size:calc(.6rem + .2vw);padding:1em 1.8em;letter-spacing:2px;text-decoration:none;text-transform:uppercase;transition:background-color 0.2s,color .2s}
.btn:hover{background-color:var(--green);color:white !important;text-decoration:none !important}

/*Capabilities*/
.capabilities-grid{display:grid;grid-gap:4rem;grid-template-columns:repeat(2,1fr);margin-top:3rem}
.capabilities-grid img{border-radius:.3em;margin-bottom:.8rem}
.capabilities-title-sub{font-size:1.2rem;font-weight:700;margin-bottom:1em}

/*Contact*/
.contact-grid{display:grid;grid-gap:10vw;grid-template-columns:auto 1fr;justify-content:start}
.contact-map{border:1px solid lightgrey}
.contact-title{font-size:calc(.8rem + .1vw);letter-spacing:1px;margin:2em 0 .3em;text-transform:uppercase}

/*Content*/
.content{margin:0 auto;max-width:1180px;padding:0 2rem}

/*Footer*/
.footer{--linkcolor:var(--white90);background:linear-gradient(black,var(--green30) 40%,black);color:var(--white70);padding-bottom:6rem;text-align:center}
.footer a{color:var(--linkcolor)}
.footer a:hover{color:white}
.footer p{font-size:1rem}
.footer-address{line-height:1.3}

/*Header*/
.header{background-color:var(--black90);color:white;padding:1.5rem 0;position:fixed;width:100%;z-index:10}
.header-grid{align-items:center;display:grid;grid-template-columns:auto 1fr}
.header-scrolled{background-color:var(--black90)}

/*Hero*/
.hero{background:var(--hero-grad),var(--hero-bg) center/cover no-repeat fixed;color:white;text-align:center}
.hero-btn{background-color:var(--greenlight)}
.hero-btn:hover{background-color:var(--greensuperlight)}
.hero-container{padding:30vh 0 40vh}
.hero-title{font-size:calc(1.2rem + 1.5vw);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:1rem}
.hero-title-sub{font-size:calc(1.1rem + .5vw);line-height:1.4;margin-bottom:4rem}

/*Home-Capabilities*/
.home-capabilities{background:var(--home-capabilities-grad);color:var(--green);text-align:center}
.home-capabilities-grid{display:grid;grid-gap:1rem 2rem;grid-template-columns:repeat(4,1fr);margin-top:3rem}
.home-capabilities-imgbg{background:center/cover no-repeat;height:200px;transition:transform .3s}
.home-capabilities-imgbg-01{background-image:var(--home-capabilities-01)}
.home-capabilities-imgbg-02{background-image:var(--home-capabilities-02)}
.home-capabilities-imgbg-03{background-image:var(--home-capabilities-03)}
.home-capabilities-imgbg-04{background-image:var(--home-capabilities-04)}
.home-capabilities-imgframe{overflow:hidden}
.home-capabilities-item{background-color:white;border-radius:.3rem;box-shadow:2px 2px 12px 4px var(--black10);text-align:center}
.home-capabilities-item:hover{box-shadow:2px 2px 12px 4px var(--green30)}
.home-capabilities-item:hover .home-capabilities-imgbg{transform:scale(1.3)}
.home-capabilities-item:hover .home-capabilities-item-titlebox{background-color:var(--greenlight);color:white}
.home-capabilities-item-title{font-size:.9rem;font-weight:700;line-height:1.2;text-transform:uppercase}
.home-capabilities-item-titlebox{border-radius:.3rem .3rem 0 0;padding:1rem;transition:all .3s}
.home-capabilities-title{font-size:calc(1.5rem + .5vw);font-weight:700;margin-bottom:1rem}
.home-capabilities-title{font-size:calc(1.5rem + .5vw);font-weight:700;margin-bottom:1rem}

/*Home-CTA*/
.home-cta{background:var(--home-cta-grad),var(--home-cta-bg) center/cover no-repeat fixed;color:white;text-align:center}
.home-cta p{font-size:1.1rem;margin:0 auto;max-width:45rem}
.home-cta-btn{background-color:var(--white70);color:var(--green);font-weight:700;margin-top:2.5rem}
.home-cta-btn:hover{background-color:white;color:var(--green) !important}

/*Home-Intro*/
.home-intro{background:var(--home-intro-grad),var(--home-intro-bg) center/cover no-repeat fixed;border-top:1px solid var(--blue);color:white;padding:10rem 0}
.home-intro li{font-size:calc(1rem + .3rem);margin-bottom:1.5rem}
.home-intro li:first-of-type{margin-top:2rem}
.home-intro p{font-size:calc(1rem + .3vw)}
.home-intro-btn{background-color:var(--white70);color:var(--blue);font-weight:700;margin-top:2.5rem}
.home-intro-btn:hover{background-color:white;color:var(--blue) !important}
.home-intro-layout{margin-left:auto;width:60%}

/*Home-Section*/
.home-section{padding:4rem 0}
.home-section-title{font-size:calc(1.2rem + .8vw);font-weight:700;margin-bottom:.5em}

/*Logo*/
.logo{width:calc(170px + 4vw);transition:width .3s ease}
.logo-scrolled{width:200px}

/*Nav*/
.nav-contain{justify-self:end}
.nav-grid{display:grid;font-size:calc(.8rem + .1vw);font-weight:700;grid-column-gap:.2rem;grid-auto-flow:column;text-transform:uppercase;white-space:nowrap}
.nav-grid a{border-radius:.2rem;color:var(--white70);font-size:calc(.8rem + .1vw);font-weight:700;letter-spacing:1px;padding:.5rem .8rem;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.nav-grid a:hover{background-color:var(--green);color:white}

/*Ripcord*/
.ripcord{font-size:.7rem;letter-spacing:1px;margin-top:2rem;text-transform:uppercase}

/*SubContent*/
.subcontent{background:var(--subcontent-grad),var(--subcontent-bg);color:var(--black90);padding:12rem 0 4rem}
.subcontent a:hover{text-decoration:underline}
.subcontent-title{color:var(--black50);font-size:calc(1.1rem + .5vw);font-weight:300;letter-spacing:2px;margin-bottom:2rem;text-transform:uppercase}
.subcontent-title-sub{font-size:calc(1rem + .4vw);font-weight:700;margin:2.2em 0 .4em}


@keyframes fade-in{
to{opacity:1}
}
@keyframes slide-in{
to{opacity:1;transform:translateX(0)}
}

@media (max-width: 1200px) {
.hero{background-attachment:scroll}
.home-capabilities-grid{grid-template-columns:repeat(2,1fr)}
.home-intro{background-attachment:scroll}
    
/*Nav Style and Hide*/
.nav-grid{align-content:start;background-color:var(--black90);font-size:1rem;grid-auto-flow:row;grid-row-gap:.5em;height:100vh;justify-content:center;left:0;padding-top:4rem;position:absolute;top:0;transform:translateY(-100vh);transition:transform .3s ease-out;width:100vw}
.nav-grid a{color:white;font-size:1.1rem}
/*Nav Icon*/
.nav-icon{display:block;position:relative;transition:transform 1s}
.nav-icon,.nav-icon::after,.nav-icon::before{background-color:white;height:3px;width:20px}
.nav-icon::after,.nav-icon::before{content:'';position:absolute}
.nav-icon::after{top:6px}
.nav-icon::before{bottom:6px}
.nav-icon-box{display:block;padding:12px 6px}
/*Nav Menu Opens*/
.nav-open .nav-grid{transform:translateY(0);transition:transform .3s ease-out}
.nav-open .nav-icon{background-color:transparent;transform:rotate(360deg);transition:transform 1s}
.nav-open .nav-icon::after,.nav-open .nav-icon::before{background-color:white;top:0}
.nav-open .nav-icon::after{transform:rotate(-45deg)}
.nav-open .nav-icon::before{transform:rotate(45deg)}
.nav-open .nav-icon-box{position:relative;z-index:10}
}
@media (max-width: 800px) {
.about-grid{grid-template-columns:auto}
.accomplishments-grid{grid-template-columns:repeat(2,auto)}
.capabilities-grid{grid-template-columns:auto;grid-row-gap:0;margin-top:0}
.contact-grid{grid-gap:4rem;grid-template-columns:auto;justify-content:stretch}
.home-capabilities-grid{grid-template-columns:auto}
.home-intro{padding:6rem 0}
.home-intro-layout{margin:0;width:100%}
}