/* Glasshouse - one stylesheet for the whole site.

   This is a faithful rebuild of the old WordPress theme's look, written from
   scratch instead of on top of Bootstrap. The values below (colours, sizes,
   spacings) are taken from the original theme so the site looks the same.

   Original reference values kept deliberately:
     green            #63B144   headings, active nav
     button green     #72C02C   buttons and links
     button hover     #5FB611
     nav grey         #687074
     body grey        #555      13px / 1.4
     paragraph grey   #666
     slider band      427px tall, bg.jpg tiled, parallax on slide change
     footer           #272727, copyright bar #222
*/

/* ---------------------------------------------------------------- base */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #555;
  font-weight: 400;
  background: #fff;
}

img { max-width: 100%; height: auto; border: 0; }

ul { list-style: none; }

a { color: #72c02c; text-decoration: none; }
a:hover { color: #5fb611; text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  color: #63b144;
  margin-top: 0;
  line-height: 1.1;   /* Bootstrap's heading line-height, as the old site had */
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }   /* the old site overrode the theme's 28px */
h3 { font-size: 24px; }
h4 { font-size: 22px; }
h5 { font-size: 14px; }

/* The theme made every heading green. Pages that wanted a different colour
   said so, and those choices are carried as classes. */
.ink { color: #555; }
.dark { color: #000; }
.on-dark { color: #fff; }

/* "ch" = a heading placed with the old page builder rather than typed into
   the body text. Inside a padded section the theme styled those differently
   from an ordinary h3, and the difference is visible, so it is kept. */
.sec-padding h3.ch {
  color: #555;
  margin-top: 5px;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
}

p { color: #666; margin-bottom: 10px; }

strong, b { font-weight: 600; }

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.skip { position: absolute; left: -9999px; background: #72c02c; color: #fff; padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid #63b144; outline-offset: 2px; }

.green { color: #63b144; font-weight: 700; }
.text-center { text-align: center; }

/* ---------------------------------------------------------------- header */

.header {
  z-index: 99;
  background: #fff;
  position: relative;
  border-bottom: solid 2px #eee;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 86px;
}

.logo { display: block; margin: 20px 0; flex: 0 0 auto; }
.logo img { display: block; width: 188px; height: auto; }

.nav-toggle {
  display: block;
  width: 46px; height: 38px;
  background: #fff; border: 1px solid #ddd; border-radius: 3px;
  cursor: pointer; padding: 9px;
}
.nav-toggle span { display: block; height: 2px; background: #687074; }
.nav-toggle span + span { margin-top: 5px; }

.main-nav { flex-basis: 100%; display: none; padding-bottom: 10px; }
.main-nav.open { display: block; }

.navbar-nav > li > a,
.navbar-nav > li > .dropdown-toggle {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: #687074;
  padding: 13px 0;
  font-weight: 500;
  text-transform: uppercase;
  border: 0;
  border-bottom: solid 2px transparent;
  background: none;
  cursor: pointer;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > .dropdown-toggle:hover,
.navbar-nav > li.current-menu-item > a {
  text-decoration: none;
  background-color: transparent;
  color: #63b144;
  border-bottom: solid 2px #72c02c;
}

.navbar-nav > li.last_menu > a { font-weight: 600; color: #63b144; }

.caret::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
}

.sub-menu { display: none; margin: 0; padding: 0 0 6px 12px; }
.has-children.open .sub-menu { display: block; }

.sub-menu li { position: relative; font-weight: 300; background: #fff; display: block; }
.sub-menu li a {
  font-size: 15px;
  color: #687074;
  padding: 10px;
  display: block;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
}
.sub-menu li:hover { background: #eee; }
.sub-menu li:hover a { color: #63b144; text-decoration: none; }

.nav-extra { display: flex; align-items: center; gap: 18px; padding: 8px 0 4px; }

/* Login sits in the nav as a green link, not a button - same as the live
   site. The old theme styled it with .navbar-nav > li.last_menu a. */
.login-link {
  font-size: 14px;
  font-weight: 600;
  color: #63b144;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 15px 0;
}
.login-link:hover { color: #5fb611; text-decoration: none; }

.lang { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .05em; color: #687074; }
.lang .on { color: #63b144; }
.lang .sep { color: #ccc; margin: 0 3px; }
.lang .off { color: #bbb; }
.lang a { color: #687074; }
.lang a:hover { color: #63b144; text-decoration: none; }

/* ---------------------------------------------------------------- slider */

.da-slider {
  width: 100%;
  height: 427px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: transparent url(../img/bg.jpg) repeat 0 0;
  box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 -2px 1px #fff;
  transition: background-position 1.8s ease-in-out .3s;
}

.da-slide {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  text-align: left;
  visibility: hidden;
}
/* The slide arriving sits on top. The one leaving stays visible underneath
   until its text has finished sliding off, otherwise it would just vanish. */
.da-slide-current { z-index: 10; visibility: visible; }
.da-slide-out { z-index: 9; visibility: visible; }

.da-slide .da-inner {
  position: relative;
  width: 100%; max-width: 1170px; height: 100%;
  margin: 0 auto; padding: 0 15px;
}

.da-slide h2,
.da-slide p,
.da-slide .da-img {
  position: absolute;
  opacity: 0;
  left: 110%;
  transition: left .9s ease-in-out, opacity .9s ease-in-out;
}

/* Waiting position for a slide that is neither on screen nor leaving.
   The :not() parts matter: without them these selectors are more specific
   than the .da-slide-current rules below and would drag the visible slide
   off the screen with them. */
.da-slider[data-dir="next"] .da-slide:not(.da-slide-current):not(.da-slide-out) h2,
.da-slider[data-dir="next"] .da-slide:not(.da-slide-current):not(.da-slide-out) p,
.da-slider[data-dir="next"] .da-slide:not(.da-slide-current):not(.da-slide-out) .da-img { left: 110%; }

.da-slider[data-dir="prev"] .da-slide:not(.da-slide-current):not(.da-slide-out) h2,
.da-slider[data-dir="prev"] .da-slide:not(.da-slide-current):not(.da-slide-out) p,
.da-slider[data-dir="prev"] .da-slide:not(.da-slide-current):not(.da-slide-out) .da-img { left: -110%; }

/* Resting position, once a slide is the current one */
.da-slide.da-slide-current h2 { left: 0; opacity: 1; transition-delay: .25s; }
.da-slide.da-slide-current p  { left: 0; opacity: 1; transition-delay: .40s; }
.da-slide.da-slide-current .da-img { left: 55%; opacity: 1; transition-delay: .55s; }

/* Going forwards the old text exits left; going back it exits right. */
.da-slider[data-dir="next"] .da-slide-out h2,
.da-slider[data-dir="next"] .da-slide-out p,
.da-slider[data-dir="next"] .da-slide-out .da-img { left: -110%; opacity: 0; }

.da-slider[data-dir="prev"] .da-slide-out h2,
.da-slider[data-dir="prev"] .da-slide-out p,
.da-slider[data-dir="prev"] .da-slide-out .da-img { left: 110%; opacity: 0; }

/* The leaving slide's text goes first, so the two do not cross awkwardly */
.da-slide-out h2 { transition-delay: 0s; }
.da-slide-out p { transition-delay: .08s; }
.da-slide-out .da-img { transition-delay: .16s; }

.da-slide h2 {
  color: #f9f9f9;
  line-height: 50px;
  top: 70px;
  z-index: 10;
  padding: 0;
  font-weight: 300;
  max-width: 58%;
}
.da-slide h2 i {
  font-size: 36px;
  font-style: normal;
  padding: 8px 8px 2px 5px;
  text-transform: uppercase;
  background-color: rgba(46, 98, 0, .8);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.da-slide p {
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
  top: 272px;
  color: #fff;
  max-width: 58%;
}
.da-slide p i {
  background: url(../img/bg-text.png) repeat;
  padding: 5px 8px 2px 5px;
  font-style: normal;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.da-slide .da-img {
  text-align: center;
  width: 42%;
  top: 80px;
  height: 328px;
}
.da-slide .da-img img { display: block; margin: 0 auto; max-height: 260px; width: auto; }
.da-slide .da-img iframe { border: 0; width: 445px; max-width: 100%; height: 250px; }

.da-arrows span {
  background: transparent url(../img/arrows.png) no-repeat;
  position: absolute;
  top: 50%;
  height: 50px; width: 49px;
  margin-top: -25px;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  border: 0;
  padding: 0;
  transition: opacity .4s ease-in-out .2s;
}
.da-slider:hover .da-arrows span,
.da-arrows span:focus-visible { opacity: .8; }
.da-slider:hover .da-arrows span:hover { opacity: 1; }
.da-arrows span.da-arrows-prev { left: 12px; background-position: 0 -68px; }
.da-arrows span.da-arrows-next { right: 15px; background-position: 0 1px; }

/* ---------------------------------------------------------------- rows */

.sec-padding { padding-top: 33px; padding-bottom: 0; }
/* a row that asked for no padding at all - most of the site's rows */
.sec-plain { padding: 0; }

/* ------------------------------------------------- the 35px rhythm

   The old page builder put a 35px gap under every text block and every
   image, and 10px under a heading it placed. That spacing is most of what
   made the pages breathe. Leaving it out made every section 35-120px
   shorter than the original, which is why the rebuild looked cramped.

   .tb = a text block, .im = an image block, .ch = a heading the builder
   placed (as opposed to one typed into the text). */

.tb, .im { margin-bottom: 35px; }
.ch { margin-bottom: 10px; }
.im img { display: inline-block; }
.im.text-center img { margin-left: auto; margin-right: auto; display: block; }
.im.text-right { text-align: right; }
.im.text-right img { display: inline-block; }

/* Places the old theme deliberately took the gap away again */
.plan-box .tb, .plan-box .im,
.inner-page-banner .tb, .inner-page-banner .im,
.testimonial-info-box .tb, .testimonial-info-box .im,
.video-table-sec .tb, .video-table-sec .im { margin-bottom: 0; }

.tiled { background: url(../img/breadcrumbs.png) repeat 0 0; }

.purchase {
  border-top: solid 1px #eee;
  border-bottom: solid 1px #eee;
  background: url(../img/breadcrumbs.png) repeat 0 0;
}

.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col { padding: 0 15px; width: 100%; }

/* The 35px of top padding is NOT on every column. The old page builder gave
   it only to columns in a row that has a background of its own ("has fill"),
   and to the row immediately after one. Reading that rule off the original
   rather than guessing was what finally made the sections line up. */
.has-fill > .container > .row > .col,
.has-fill + section > .container > .row > .col { padding-top: 35px; }
/* columns inside a nested row never get it */
.col .row > .col { padding-top: 0; }

.big-text p, .big-text li { font-size: 18px; }
/* the old theme made these headings grey rather than the default green */
.big-text h4 { color: #555; margin-top: 5px; font-weight: 400; }
.big-text ul { margin-bottom: 15px; }
/* No tick is drawn here. The list items carry their own check-square icon,
   exactly as the original does; an extra CSS tick put two marks on every
   line. */
.big-text li { padding: 3px 0; color: #666; }

.green-btn {
  display: inline-block;
  border: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  padding: 12px 25px;
  background: #72c02c;
  text-decoration: none;
  border-radius: 2px;
}
.green-btn:hover, .green-btn:focus { background: #5fb611; color: #fff; text-decoration: none; }

.btn-wrap { padding: 15px 0 33px; }
.btn-wrap.text-center { text-align: center; padding-top: 35px; }

/* ---------------------------------------------------------------- service */

.service {
  overflow: hidden;
  margin-bottom: 10px;
  padding: 15px 15px 10px;
  transition: box-shadow .2s ease-in-out, background .2s ease-in-out;
}
.service:hover { background: #fcfcfc; box-shadow: 0 0 5px #ddd; }
.service h4 { margin: 15px 0; }
.service h5 { color: #000; text-transform: uppercase; margin-bottom: 0; }

/* Any embedded video inside a column. The old theme only sized the ones
   inside .service, so the videos on the keynotes pages had no height at all
   and collapsed to the browser default. */
.col > iframe,
.service iframe {
  display: block;
  width: 100%;
  height: 295px;
  border: 0;
}
@media (max-width: 767px) {
  .col > iframe, .service iframe { height: 220px; }
}

.service-icon {
  float: left;
  padding: 10px;
  color: #72c02c;
  width: 55px; height: 55px;
  text-align: center;
}
.service-icon svg { width: 35px; height: 35px; display: block; }

.icon-pad { padding-left: 75px; }

/* ------------------------------------------------- inner page banner */

.inner-page-banner {
  position: relative;
  background: #f7f7f7 url(../img/banner.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;   /* the old site's parallax effect */
  padding: 100px 0;
}
.inner-page-banner::after {
  content: " ";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.2);
}
.inner-page-banner .container { position: relative; z-index: 1; }
.inner-page-banner h1 {
  color: #fff; font-size: 26px; line-height: 37px;
  text-transform: uppercase; margin: 0;
}
.inner-page-banner p {
  color: #fff; font-size: 24px; font-weight: 200;
  margin-bottom: 0; text-transform: uppercase;
}
/* the big white headline the old site set by id from its custom CSS */
#custom-heading-large {
  color: #fff;
  font-size: 40px;
  line-height: 50px;
  text-transform: uppercase;
  margin: 0;
}

/* ------------------------------------------------- pricing tables */

.plan-box-outer { padding: 0 15px; }
/* The inner row's negative margin was cancelling that inset, so each box was
   293px wide instead of 263px - the single most visible difference on the
   Prices page. Same for the testimonial boxes. */
.plan-box-outer > .row,
.testimonial-box-outer > .row { margin-left: 0; margin-right: 0; }
.plan-box, .testimonial-box { padding-left: 0; padding-right: 0; }
.plan-box {
  position: relative;
  border-radius: 3px;
  margin-bottom: 15px;
  box-shadow: 0 0 5px #eee;
  background: #eee;
  border: 2px solid #ddd;
  transition: box-shadow .2s ease-in-out;
}
.plan-box:hover { box-shadow: 0 0 15px #b5b5b5; }
.plan-head { border-bottom: 2px solid #eee; background: #fff; }
.plan-head h3, .plan-price h3 { color: #717984; padding: 12px 0; font-size: 35px; }
.plan-head h3 small { display: block; margin-top: 5px; font-size: 12px; font-style: italic; }
.plan-price { background: #fff; padding: 20px 0 10px; min-height: 111px; }
.plan-price h3 small { display: block; margin-top: 5px; font-size: 14px; font-style: normal; }
.plan-price h3 sub { font-size: 13px; padding: 0; margin: 0; position: relative; right: -6px; }
.plan-footer { padding: 30px 15px 25px; min-height: 137px; }
.plan-footer a {
  display: inline-block;
  background: #fff; padding: 5px 58px; border: 1px solid #888;
  color: #72c02c; font-size: 13px;
}
.plan-footer a:hover { background: #7f8c8d; color: #fff; text-decoration: none; }

.pricing-content { margin: 0; }
.pricing-content ul { margin: 0; padding: 0; }
.pricing-content li {
  color: #72c02c; font-size: 12px; padding: 7px 15px;
  border-bottom: solid 1px #f5f9e7;
  /* icon, then the text, then the tick or cross pushed to the right */
  display: flex;
  align-items: center;
  gap: 4px;
  text-align: left;
}
.pricing-content li:nth-child(odd) { background: #eee; }
.pricing-content li:nth-child(even) { background: #f9f9f9; border-bottom: solid 1px #fff; }
/* a row for something this plan does NOT include */
.pricing-content li .ic { color: #63b144; }
.pricing-content li.black-row,
.pricing-content li.black-row .ic { color: #585f69; }
.pricing-content li .ic:last-child { margin-left: auto; flex: 0 0 auto; }

/* ------------------------------------------------- icons

   Drawn as SVG in templates/icons.svg rather than loaded as a webfont.
   They take their colour from the text around them. */

/* The widths come from measuring the original: its icons are not square.
   Height is always 1em; width follows each glyph's real proportions. */
.ic-n-users, .ic-n-cogs            { width: 1.25em; }
.ic-n-edit                         { width: 1.13em; }
.ic-n-files, .ic-n-unlock          { width: 0.88em; }
.ic-n-child                        { width: 0.75em; }
.ic-n-times                        { width: 0.69em; }

.ic {
  width: 1em; height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.125em;
  fill: none;
  overflow: visible;
}
/* A standalone icon the page builder placed. Sized by font-size so the
   per-glyph widths above still apply: the original's is a 30px glyph. */
.ic-lg { font-size: 30px; vertical-align: middle; }

/* an icon inside a thin circle, as the old theme drew the standalone ones */
/* the circle: even padding on all four sides, and nothing else allowed to
   alter it - the spacing around it lives on the wrapper */
.ic-ring {
  width: 58px; height: 58px;
  padding: 16px;
  border: 1px solid #555;
  border-radius: 50%;
  background: transparent;
  color: #555;
  box-sizing: border-box;
}
.ic-service { width: 35px; height: 35px; color: #72c02c; }

/* ------------------------------------------------- testimonials */

.testimonial-box-outer { padding: 0 15px; }
/* These two set their own padding, and the inner-column reset above was
   flattening the top of both. The selector has to out-rank that reset. */
.col .row > .col.testimonial-box { padding: 20px 20px 20px 55px; }
.col .row > .col.testimonial-info-box { padding: 20px 0; }
/* the portrait sits beside the quote with a deep gap under it */
.testimonial-info-box .testimonial-info-img { margin-bottom: 70px; }
.testimonial-box {
  background: #fff;
  position: relative;
  margin-bottom: 40px;
  padding: 20px 20px 20px 55px;
  box-shadow: 3px 3px 3px rgba(0,0,0,.1);
}
.testimonial-box::before {
  color: #bbb; font-size: 60px; content: "\201C";
  position: absolute; margin: -25px 0 0 -40px;
  font-family: Georgia, serif;
}
.testimonial-box::after {
  width: 0; height: 0; left: 80px; content: " "; bottom: -30px;
  position: absolute;
  border-style: solid; border-width: 30px 30px 0 0;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.1));
}

.testimonial-info-box {
  padding: 20px 0;
  background: #fff;
  border-bottom: solid 3px #eee;
  transition: border-color .4s ease-in-out;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.testimonial-info-box:hover { border-color: #72c02c; }
.testimonial-info-img { float: left; margin-right: 20px; margin-bottom: 20px; }
.testimonial-info-img img { width: 80px; height: auto; border-radius: 3px; }

/* ------------------------------------------------- "read more" expanders

   The old site used Bootstrap's collapse for these. Rebuilt with a class
   toggle so we do not have to ship Bootstrap and jQuery for one feature.
   With JavaScript off the hidden text is shown rather than lost. */

.collapse { display: none; }
.collapse.open { display: block; }

.read-more {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #72c02c;
  cursor: pointer;
  text-decoration: none;
}
.read-more:hover { color: #5fb611; text-decoration: underline; }

/* ------------------------------------------------- video pop-up

   The features page shows screenshots that open a video. The old site used
   a Bootstrap modal; this is the same idea without Bootstrap. */

/* The thumbnails already have a play button drawn into the picture, so no
   overlay is added here. An earlier version drew a second triangle on top,
   which looked like a mistake because it was one. */
.video-btn { cursor: pointer; }
.video-btn img { transition: opacity .2s ease-in-out; }
.video-btn:hover img { opacity: .85; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.video-modal[hidden] { display: none; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.video-modal-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.video-modal-frame { position: relative; padding-top: 56.25%; }
.video-modal-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 4px;
}
.video-modal-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: #fff; color: #333;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.video-modal-close:hover { background: #72c02c; color: #fff; }

/* ------------------------------------------------- small theme helpers */

.max-width-img img { width: 160px; }

/* Classes the old markup uses that came from Bootstrap and the site's own
   extra CSS, rather than from the theme stylesheet. Without them the feature
   thumbnails are not centred and one Danish section loses its bottom gap. */
.img-responsive { display: block; max-width: 100%; height: auto; }
.img-center { margin-left: auto; margin-right: auto; }
.text-uppercase { text-transform: uppercase; }
/* the licence headings on Prices, measured off the live site */
.title-v3-md { font-size: 18px; font-weight: 400; line-height: 19.8px; margin: 0 0 10px; }
.title-v3-md a { color: #72c02c; text-decoration: none; }
#custom-margin-here-da, .custom-margin-here-da { margin-bottom: 50px; }
.service-block { position: relative; }
.img-sec-row { padding: 25px 0; }
.left-icon { float: left; padding: 0 20px 0 0; }
.left-icon img { float: left; width: 60px; height: auto; margin: 0 20px; }
.left-icon .ic-ring { padding: 16px; }
/* a floated icon has to be cleared by the next block, or the following
   section rides up over it */
.col::after { content: ""; display: table; clear: both; }
.small-h-tag h3, .small-h-tag h4 { font-size: 18px; }
.smaller-h-tag h3, .smaller-h-tag h4 { font-size: 16px; }
/* the four step headings on Features are set in caps on the old site */
.smaller-h-tag h4 { text-transform: uppercase; }
.video-table-sec { border-top: 1px solid #ddd; margin-bottom: 20px; padding-top: 10px; }

/* The four-step row on the Features page: a grey line with a green dot
   sitting on it above each step. The dot is an empty element; the line is
   drawn behind the row it belongs to. */

.green-dot {
  z-index: 1; width: 30px; height: 30px;
  position: relative; background: #72c02c;
  margin: 0 auto 15px; display: block;
  border: solid 9px #fff; border-radius: 50%;
}
.green-dot::after {
  top: -9px; left: -9px; right: -9px; bottom: -9px;
  content: " "; border-radius: 50%; position: absolute;
  border: 1px solid #bbb;
}

/* the line sits in its own empty row directly above the dots, so it is
   pushed down onto them */
.dot-line-sep { position: relative; height: 0; }
.dot-line-sep::before {
  top: 24px; width: 75%; left: 12%; content: " ";
  display: block; position: absolute; border-top: solid 2px #ddd;
}

.spacer { display: block; width: 100%; }

/* ------------------------------------------------- accordions */

.accordion { margin: 10px 0 20px; }
.accordion details {
  margin-bottom: 5px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.accordion summary {
  font-size: 14px;
  color: #63b144;
  padding: 10px 15px;
  background: #f5f5f5;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}
.accordion details[open] summary { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
.accordion details > *:not(summary) { padding: 0 15px; }
.accordion details > p { padding: 10px 15px; }

/* ---------------------------------------------------------------- logos */

.client-logos { display: flex; flex-wrap: wrap; margin: 10px -15px 0; }
.client-logos li { width: 50%; padding: 0 30px 18px; }
.client-logos img { display: block; margin: 0 auto; width: 100%; }

/* ---------------------------------------------------------------- footer */

.footer { padding: 40px 0; background: #272727; }
.footer .glasshouse-title {
  padding-bottom: 5px;
  display: inline-block;
  border-bottom: 2px solid #72c02c;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 20px;
}
.footer p, .footer address { color: #fff; font-style: normal; line-height: 1.9; }
.footer a { color: #fff; }
.footer a:hover { color: #63b144; }

.footer-nav-menu li { padding-bottom: 15px; }
.footer-nav-menu li a {
  color: #fff;
  border-bottom: 1px dotted #fff;
  text-transform: uppercase;
}
.footer-nav-menu li a:hover { color: #63b144; text-decoration: none; }

.footer .linkedin { display: inline-block; margin-top: 15px; }
.footer .linkedin img { display: block; }

.copyright_footer { background: #222; }
.copyright p { padding: 20px 0 5px; text-align: center; color: #fff; font-size: 13px; margin: 0; }

/* ---------------------------------------------------------------- desktop */

@media (min-width: 768px) {
  /* twelve columns, same grid the old site used */
  .col-1 { width: 8.3333%; }
  .col-2 { width: 16.6667%; }
  .col-3 { width: 25.0000%; }
  .col-4 { width: 33.3333%; }
  .col-5 { width: 41.6667%; }
  .col-6 { width: 50.0000%; }
  .col-7 { width: 58.3333%; }
  .col-8 { width: 66.6667%; }
  .col-9 { width: 75.0000%; }
  .col-10 { width: 83.3333%; }
  .col-11 { width: 91.6667%; }
  .col-12 { width: 100.0000%; }
  .col-middle { display: flex; flex-direction: column; justify-content: center; }
}

@media (min-width: 992px) {
  .nav-toggle { display: none; }

  .main-nav {
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: 22px;
    padding-bottom: 0;
  }

  .navbar-nav { display: flex; align-items: center; }
  .navbar-nav > li { position: relative; }

  .navbar-nav > li > a,
  .navbar-nav > li > .dropdown-toggle {
    width: auto;
    padding: 15px 15px;
    white-space: nowrap;
  }

  .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 205;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    border: none;
  }
  .sub-menu li { width: 190px; }
  .sub-menu li:first-child { border-top: 2px solid #63b144; }
  .sub-menu li:last-child { border-bottom: 2px solid #63b144; }

  .navbar-nav > li:hover .sub-menu,
  .navbar-nav > li:focus-within .sub-menu { display: block; }

  .nav-extra { padding: 0; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 767px) {
  /* The slider is absolutely positioned by design. On a phone that does not
     work, so slides become normal stacked blocks and the arrows still switch
     between them. */
  .da-slider { height: auto; background-size: cover; background-position: center; }
  .da-slide { position: relative; visibility: hidden; height: 0; overflow: hidden; }
  .da-slide-current { visibility: visible; height: auto; overflow: visible; }
  /* No slide-out animation on a phone - the slides are stacked blocks here,
     so the outgoing one simply disappears. */
  .da-slide-out { visibility: hidden; height: 0; overflow: hidden; }
  .da-slide .da-inner { padding: 30px 20px 45px; }
  .da-slide h2, .da-slide p, .da-slide .da-img {
    position: relative; left: 0; opacity: 1; top: auto; max-width: 100%;
    width: auto; height: auto; margin-bottom: 18px;
  }
  .da-slide h2 i { font-size: 26px; line-height: 42px; }
  .da-slide p { font-size: 16px; line-height: 26px; }
  .da-arrows span { opacity: .85; top: auto; bottom: 8px; margin-top: 0; transform: scale(.75); }
  .da-arrows span.da-arrows-prev { left: 4px; }
  .da-arrows span.da-arrows-next { right: 4px; }

  /* the old site made buttons full width on a phone */
  .green-btn { width: 100%; }
  .icon-pad { padding-left: 0; }
  .service-icon { float: none; padding: 0 0 8px; }
  .client-logos li { padding: 0 15px 18px; }
  .purchase .im { text-align: center; }
  .col-middle { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}