@charset "UTF-8";
html, body, div, span, applet, object, iframe, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, region, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
html {
  scroll-behavior: smooth;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html,body{font-family:Arial, sans-serif;font-size:13px;background-color:#F4F0E9;}

h1,h2,h3,h4{margin:0;padding:0;}
h1{font-size:6.854rem;line-height:1em;}
h2{font-weight:200;font-size:2.618rem;opacity:.9;padding:40px 0 30px 0;}
h3{font-size:2rem;padding:20px 0 0 0;font-weight:400;margin-bottom:20px;}
h4{font-size:2.618rem;opacity:.9;padding-top:60px;}
p,li{line-height:1.5em;opacity:8;font-size:1.618rem;}
.small{font-size:1rem;}

a,a:visited{color:#000;text-decoration:underline;}
.dark a,.dark a:visited{color:#fff;text-decoration:underline;}
a:hover{color:#000;text-decoration:none;}


.clear{clear:both;}

header{background: #fff url("../images/header-j4u.jpg") bottom left no-repeat;background-size:contain;min-height:450px;padding:40px 80px;border-bottom: solid 1px #000;}
header #logo{float: left;}
header #logo img{max-width:300px;}
header menu{float:right;}

menu li{display:inline-block;margin:0 5px;font-size:1.3rem;}
menu a{text-decoration:none !important;padding:5px;}
menu a:hover{color:#fff;background-color:#008148;}
menu a:before{content: "›";padding-right:3px;font-size:1.618rem;}

#tagline{clear: both;color:#1C4A63;font-size:4.236rem;text-align: center;padding:32px 0;font-weight:600;;}

#sticky-cta {
    display: block;
    width: 298px;
    background: #1c4a63;
    color: white;
    text-align: center;
    padding: 18px 0;
    border:#fff 1px solid;
    position: static;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    font-size:1.618rem;
    text-decoration: none;
    margin:5px auto;
    border-radius: 12px;
}
#sticky-cta.sticky {
  position: fixed;
  right: calc(50% - 150px);

}
.hidden {
  display: none;
}



main{padding:0 20px;max-width: 800px;margin:0 auto 50px;}

#trio{display: flex;gap:40px;margin:-100px auto 0;justify-content:center;padding:0 10px;}
.big-green{background-color: #008148;width: 200px;height: 200px;border-radius: 8px;text-align: center;color: #fff;font-size:1.618rem;display: flex;flex-direction:column;gap:5px;justify-content:center;}
.big-green img{display: block;margin: 0 auto;}

.examples{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 16px;align-items: center;align-content: space-between;}
.examples div{max-width: calc(50% - 8px);}
.examples .full{max-width: 100%;}
.examples img{max-width: 100%;}

#pg-cta{background-color:#008148;text-align:center;padding:20px;border-radius: 12px;width:410px;max-width:100%;margin: 10px auto;color:#eee}

#contact{background-color:#fff;border-radius: 8px;padding:0 20px 20px;margin-top:40px;}

footer{background:#008148;text-align: center;padding:40px 20px;color:#fff;}
.social img{height:32px;width: auto;display: inline-block;margin:0 5px;}

@media only screen and (max-width: 800px){
	header {padding:40px;min-height:200px;}
    header #logo,header menu{float: none;margin:0 auto;text-align: center;}


    #trio{margin:0 auto;padding:0;background-color: #008148}
    .big-green{width: 100%;height: auto;font-size:1.4rem;padding:5px 0 15px;}

    #pg-cta{width:unset;}
}