@charset "UTF-8";
/* CSS Document */

/* --------------------
   Base reset (safe)
-------------------- */

html {
  font-size: 16px; /* sane baseline for rem-based embeds */
}

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

body {
  margin-left: auto;
  margin-right: auto;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: #333333;
}

.site-logo {
  max-width: 80%;
	padding-top: 3rem;
	text-align: center;
}

@media (min-width: 900px) {
  .site-logo {
    max-width: 60%;
  }
}


/* --------------------
   Typography
-------------------- */

h1 {
  font-size: 3rem;
  line-height: 1.25;
  padding-bottom: 2rem;
  font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;
}

h2 {
  font-size: 2rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: 1rem;
}


.deck {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: center;
}

.text-column {
  max-width: 50rem; /* ~800px */
  margin-left: auto;
  margin-right: auto;
	text-align: left;
}

.text-column h1,
.text-column h2 {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
	text-align: center;
}

/* --------------------
   Media
-------------------- */

img {
	display: inline-block;
  /* Optional: vertical alignment for images of different heights */
  vertical-align: middle; 
	max-width: 100%;
  margin-left: auto;
  margin-right: auto;
	padding-bottom: 2rem;
}

.text-column img,
.content img,
.main img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


@media only screen and (min-width: 800px) {
  img {
    max-width: 80%;
  }
}

object,
embed,
video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  display: inline;
}


/* --------------------
   Links
-------------------- */

a {
  text-decoration: none;
}

a:link {
  color: #333333;
}

a:visited,
a:hover {
  color: #669933;
}


/* --------------------
   Layout containers
-------------------- */

.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  padding: 0 1rem;
  align-content: center;
}

#LayoutDiv1 {
  width: 100%;
  display: block;
  text-align: center;
  padding-bottom: 2rem;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}


/* --------------------
   Footer
-------------------- */

.gridFooter {
  width: 100%;
  background: #666;
  padding: 2rem;
  text-align: center;
  color: #fff;
}

.gridFooter a {
  color: lightgray;
}


/* --------------------
   Flex helpers
-------------------- */

.flexwrap {
  display: flex;
  width: 100%;
  align-content: center;
}


/* --------------------
   Client list
-------------------- */

#clientlist {
  width: 100%;
  text-align: left;
  line-height: 1.2;
}

@media only screen and (min-width: 1000px) {
  #clientlist {
    width: 60%;
    padding-left: 30%;
    text-align: center;
    line-height: 1.1;
  }
}


/* --------------------
   Sticky nav
-------------------- */

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 1rem;
}


/* --------------------
   Main content
-------------------- */

.main {
  margin-left: auto;
  margin-right: auto;
  width: 86.45%;
  padding: 99px 2% 0;
  display: block;
}


/* --------------------
   Hamburger menu
-------------------- */

#menuToggle {
  display: block;
  position: relative;
  top: 4rem;
  left: 4rem;
  z-index: 1;
  user-select: none;
}

#menuToggle a {
  color: #232323;
  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: darkcyan;
}

#menuToggle input {
  display: block;
  width: 4rem;
  height: 3rem;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span {
  display: block;
  width: 2rem;
  height: 3px;
  margin-bottom: 4px;
  background: #cdcdcd;
  border-radius: 2px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1),
              opacity 0.55s ease;
}

#menuToggle input:checked ~ span {
  transform: rotate(45deg) translate(-1px, -1px);
  background: #232323;
}

#menuToggle input:checked ~ span:nth-last-child(3) {
  opacity: 0;
  transform: scale(0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}


/* --------------------
   Slide-out menu
-------------------- */

#menu {
  position: absolute;
  width: 33vw;
  height: 1000px;
  margin: -100px 0 0 -50px;
  padding: 10rem 4rem 4rem;
  background: #ededed;
  list-style: none;
  text-transform: uppercase;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1);
}

#menu li {
  padding: 10px 0;
  font-size: 1rem;
}

#menuToggle input:checked ~ ul {
  transform: translateX(0);
}


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

.social-row {
	display: flex;
  min-width: 100px;
  padding: 2rem;
  text-align: center;
	justify-content: center;
}

/* --------------------
   Grid helpers
-------------------- */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 1000px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

/* ---- Flodesk reset ---- */
.flodesk-embed {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 auto;
	vertical-align: top;
}

.flodesk-embed * {
  box-sizing: border-box;
  font-family: inherit;
}

/* Undo aggressive site styles */
.flodesk-embed p,
.flodesk-embed label,
.flodesk-embed input,
.flodesk-embed button {
  font-size: inherit;
}