img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} * { box-sizing: border-box } body { min-width: 320px; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; text-align: center; background-image: url(/images/background.jpg); background-attachment: fixed; color: #4d4d4d; } body > .wrap { box-shadow: 0 0 10px rgba(0,0,0,.1); } nav, h1, h2, h3, h4, h5, h6, .home h2, .welcome p, #contact h4, .home .cta h2, .emphasis { font-family: 'Open Sans', sans-serif; } .home .featured h2 { line-height: 1.25 } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #188754; text-wrap: balance; } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } h1 { font-size: 32px; } h2 { font-size: 24px } h3 { font-size: 18.72px; } h4 { font-size: 16px; } body, header ul, nav ul, footer ul, .address iframe { padding: 0; margin: 0; } img, iframe, .youtube { max-width: 100%; display: block; height: auto } .youtube, iframe { aspect-ratio: auto 16 / 9; width: 100% } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; object-fit: cover; z-index: 0 } a img, iframe { border: none; } a, nav a:is(:hover,:focus) { text-decoration: none; color: #008080; } a:is(:hover,:focus), nav a, .featured h2, .welcome p, #contact h4 { color: #188754; } svg { vertical-align: middle; } hr { border-width: 1px; border-color: #eee; border-style: none none solid; margin: 40px 0; } .fullwidth { width: 100%; } .imgLeft, .imgRight { max-width: 45%; } .imgLeft { float: left; margin: 10px 4% 2% 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 10px 0 2% 4%; } .clear { clear: both; } .nowrap, a[href^=tel], nav a span, h1 span, h2 span { white-space: nowrap; } .hide { display: none !important; } .center, .home h1, .featured h2, .welcome h2, .welcome p, .cta h2 { text-align: center; } .wrap { display: block; max-width: 1140px; margin: 0 auto; position: relative; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-gap: 20px; } .grid.half { grid-template-columns: repeat(2,1fr); } .grid.third { grid-template-columns: repeat(3,1fr); } .grid.fourth { grid-template-columns: repeat(4,1fr); } .between { justify-content: space-between; } .around { justify-content: space-around; } .evenly { justify-content: space-evenly; } .mid { align-items: center; align-content: center } .bgimg { position: relative } .bgimg > img:first-of-type { position: absolute; width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; object-fit: cover; z-index: 0 } section { background-color: #fff; } header a, nav a, footer strong, .cta, .social a { display: block; } header .grid { grid-template-columns: 320px 1fr; } .logo img { margin: 20px 0 20px 40px } .top, nav { position: relative; z-index: 9; text-align: right; } .top { text-align: right; } .top { font-size: 16px; font-weight: 300; line-height: 1.3; background-color: #188754; } .top a { color: #fff; padding: 10px 20px; transition: ease-out .1s; } .top a:is(:hover,:focus) { background-color: #fff; color: #188754; } .top .pay { background: #fff; color: #188754; border-radius: 3px; margin: 4px 10px; padding: 6px 16px; font-weight: 600; } .top .pay:is(:hover,:focus) { background: #0d5d37; color: #fff; } .top li, nav li, footer li { display: inline-block; } nav a { margin: 5px; padding: 10px 20px; line-height: 1; font-variant: small-caps; color: #4d4d4d; transition: ease-out .1s; } nav a:is(:hover,:focus) { color: #188754; } nav li { position: relative } nav ul ul, nav ul ul li, nav ul ul a, nav li:hover > ul { display: block; } nav ul ul li a { text-align: left; } nav ul ul { display: none; background: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; position: absolute; padding: 20px 0; margin: -5px 0 0 5px; width: 320px; z-index: 10 } nav ul > li:hover > a { background: #fff; color: #188754; z-index: 1; position: relative; } nav ul li:nth-of-type(4) a { background: #188754; color: #fff; border-radius: 3px; padding: 15px 20px; } nav ul li:nth-of-type(4) a:hover { background: #008080; } .slideshow { width: 100%; height: 500px; box-shadow: 0 8px 6px -6px rgba(0,0,0,.1); position: relative; background-color: #fff; } .slideshow > div { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: 1.5s ease-in-out; height: 100%; width: 100%; } .slideshow div div { position: relative; width: 100%; height: 100%; top: 35%; } .slideshow :is(p, b) { text-align: center; color: #fff; text-shadow: 2px 4px 3px rgba(0,0,0,0.3); } .slideshow b { font-size: 38px; line-height: 1.25 } .slideshow p { font-size: 24px; text-align: center; } .slideshow img { position: absolute; object-fit: cover; width: 100%; height: 100%; inset: 0; } .slideshow .showing { opacity: 1; z-index: 2 } .slide img { filter: brightness(50%); } .slideshow .bgimg img:first-of-type { height: 100%; } .container.grid { grid-template-columns: 1fr 300px; grid-gap: 40px } .container .side h3 { margin-top: 50px; } .container .side svg { margin-left: 5px; } section { padding: 20px 40px; position: relative; z-index: 8; } section ul, section ol { padding-left: 25px; } section li { margin-bottom: 5px; } .nolist, .address ul, footer ul { list-style: none; padding: 0; } .btn .fa-arrow-right { margin-left: 10px; } .home > div { margin: 50px 40px 60px; } .home > div:last-of-type { margin: 50px 40px 20px; } .featured, .welcome { padding-bottom: 50px; box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px; } .home > div.featured { margin: 50px 20px 60px } .featured .grid { grid-gap: 0 } .featured h1 { margin-top: 0; } .featured h2 { margin: 40px 0; } .featured .border { width: 210px; height: 210px; padding: 10px; border-radius: 100%; border: 1px solid rgba(24,135,84,.5); margin: 0 auto; } .featured img, .welcome img, .units img, .plans .img { object-fit: cover; } .featured img { width: 200px; height: 200px; padding: 5px; border-radius: 100%; border: 1px solid #eee; } .featured p { text-align: center; color: #4d4d4d; text-decoration: none; padding: 0 15px; } .featured blockquote { text-align: center; color: #188754; font-size: 30px; margin-top: 100px; font-style: italic; } .featured span { display: block; } .featured span.btn { margin-top: 5px; transition: ease-out .3s; } .welcome h2 { max-width: 900px; margin: 40px auto; } .welcome h2 span { font-family: 'Open Sans', sans-serif; font-size: 30px; margin-bottom: 10px; display: block; } .welcome .grid h2, .welcome .grid p { text-align: left; } .welcome .grid.half { margin-bottom: 40px; } .welcome .grid p { font-family: 'Open Sans', sans-serif; color: #4d4d4d; } .welcome iframe { width: 100%; } .welcome .grid.imgs { grid-template-columns: 250px 250px 250px; place-content: center center; grid-gap: 5px; margin: 20px 0 } .welcome img { height: 200px; width: 100%; margin: 0; } .join .grid { grid-gap: 40px; } .join .grid > div:last-of-type h3 { font-size: 32px; text-align: center; background-color: #008080; color: #fff; padding: 30px 20px; margin: 0 0 50px; position: relative; box-shadow: 0 5px 5px rgba(0,0,0,.15); border-radius: 3px; } .join .grid > div:last-of-type h3:after { content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #008080; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; z-index: 999; } a.cta { white-space: normal } .cta, .emphasis { background-image: linear-gradient( #188754, #008080 ); border-radius: 3px; padding: 20px; } .home .cta h2 { color: #fff; } .faq h2 { font-family: 'Open Sans', sans-serif; font-weight: bold; color: #4d4d4d; } .testimonials p { position: relative; padding-left: 50px; } .testimonials .fa-quote-left { font-style: italic; color: #ddd; position: absolute; left: 0; } .emphasis { text-align: center; color: #fff; margin: 40px 0; } .units { display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 5px } .plans { display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 5px } .units img, .plans img { width: 100%; } .units img { height: 175px; } .people { border-spacing: 10px; width: 100% } .people td:first-of-type { text-align: right; font-weight: bold } .people td:last-of-type { font-style: italic } .youtube img { margin: 0 auto; } .youtube iframe { height: 100%; margin: 0 auto; } .address .grid.half { grid-template-columns: 300px 1fr; } .address iframe { width: 100%; height: 25vw; max-height: 310px; } form { margin: 20px 0; } form .grid { grid-gap: 10px; } form * { font-family: 'Open Sans', sans-serif; } form :is(input, select, textarea, label) { background-color: #f7f7f7; padding: 15px; border: none; margin-bottom: 10px; display: block; width: 100%; text-align: left; font-size: 14px } form input[type=file] { margin-left: 10px; border-radius: 0; } form textarea { height: 100px; } form input[type=submit], .btn { display: inline-block; min-width: 120px; text-align: center; background-color: #188754; color: #fff; padding: 15px 40px; margin: 10px 0; border: none; border-radius: 3px; transition: ease-out .3s; } form input[type=submit] { min-width: 250px; margin: 0; } form input[type=submit]:is(:hover,:focus), .btn:is(:hover,:focus), .featured a:is(:hover,:focus) > span, #contact input[type=submit] { cursor: pointer; color: #fff; transition: ease-in .3s; } form input[type=submit]:is(:hover,:focus), .btn:is(:hover,:focus) { background-color: #008080; } .featured a:is(:hover,:focus) > span { background-color: #fff; } .side .btn { display: block; } #contact h4 { margin: 20px 0 10px; } #contact p { margin-top: 0; } #contact textarea { height: 200px; } .fakeinput { padding: 13px 15px 14px } .fakeinput input { display: inline-block; width: auto; margin: 0; padding: 0 } #employment input[type=submit] { margin-top: 15px; } footer .wrap { font-size: 16px; margin-bottom: 40px; padding: 40px; position: relative; z-index: 7; } footer .grid.third { grid-template-columns: 250px 1fr 250px; } footer .grid.third div:last-of-type { text-align: right; } footer a { margin: 5px; padding: 5px; display: block } footer .mark { display: block; margin: 20px auto 0; } footer .social li { margin: 0 5px; } @media(max-width:999px) { nav ul ul { display: none !important } section, footer .wrap { padding: 20px } .container.grid { grid-template-columns: 1fr 260px; } .side { border-top: 1px solid #188754 } .units { grid-template-columns: repeat(2,1fr) } .welcome .grid.imgs { grid-template-columns: repeat(3,1fr); grid-gap: 10px } .people td { display: block; text-align: center !important } .featured h2 span { display: block } footer .grid.third { grid-template-columns: 1fr } footer img[src*=logo\.svg] { max-width: 280px; margin: 0 auto } footer :is(p,.social) { text-align: center } footer .wrap { margin-bottom: 0 } } @media(max-width:767px) { .container.grid { grid-template-columns: 1fr } .top ul { text-align: center } .units { grid-gap: 10px } .featured .grid { grid-template-columns: 1fr; grid-gap: 40px } .featured h2 span { display: inline } .welcome .grid.half, .join .grid.half { grid-template-columns: 1fr } } @media(max-width:700px) { :is(header,.address) .grid { grid-template-columns: 1fr } header .grid { padding: 20px 0 10px } .slideshow div div { top: 15%; padding: 0 15px; } .slideshow b { font-size: 36px; } .address li, .address p, nav { text-align: center } .address p img, .logo img { margin: 0 auto } } @media(max-width:600px) { .plans { grid-template-columns: 1fr; grid-gap: 10px; max-width: 400px; margin: 0 auto } .welcome .grid.imgs { grid-template-columns: 1fr 1fr; } } @media(max-width:500px) { section { padding: 20px 10px } form .grid { grid-gap: 0 } .imgRight, .imgLeft { float: none; margin: 1em auto; max-width: 100% } footer .grid { grid-template-columns: 1fr } footer p, nav li, section h1, section h2 { text-align: center } .faq h2 { text-align: left } .grid.half, .welcome .grid.imgs { grid-template-columns: 1fr } .welcome .grid.imgs img { width: 90%; padding: 5px 5%; } .home > div { margin: 50px 20px 60px !important } .welcome .grid.imgs { margin: 20px -20px } } @media(max-width:400px) { input[type=submit], input[type=file] { width: 100%; max-width: none } .units { grid-template-columns: 1fr } }