@charset "UTF-8";
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- Sections
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
}
/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%;
  }
  .column,
.columns {
    margin-left: 4%;
  }
  .column:first-child,
.columns:first-child {
    margin-left: 0;
  }
  .one.column,
.one.columns {
    width: 4.6666666667%;
  }
  .two.columns {
    width: 13.3333333333%;
  }
  .three.columns {
    width: 22%;
  }
  .four.columns {
    width: 30.6666666667%;
  }
  .five.columns {
    width: 39.3333333333%;
  }
  .six.columns {
    width: 48%;
  }
  .seven.columns {
    width: 56.6666666667%;
  }
  .eight.columns {
    width: 65.3333333333%;
  }
  .nine.columns {
    width: 74%;
  }
  .ten.columns {
    width: 82.6666666667%;
  }
  .eleven.columns {
    width: 91.3333333333%;
  }
  .twelve.columns {
    width: 100%;
    margin-left: 0;
  }
  .one-third.column {
    width: 30.6666666667%;
  }
  .two-thirds.column {
    width: 65.3333333333%;
  }
  .one-half.column {
    width: 48%;
  }
  /* Offsets */
  .offset-by-one.column,
.offset-by-one.columns {
    margin-left: 8.6666666667%;
  }
  .offset-by-two.column,
.offset-by-two.columns {
    margin-left: 17.3333333333%;
  }
  .offset-by-three.column,
.offset-by-three.columns {
    margin-left: 26%;
  }
  .offset-by-four.column,
.offset-by-four.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-five.column,
.offset-by-five.columns {
    margin-left: 43.3333333333%;
  }
  .offset-by-six.column,
.offset-by-six.columns {
    margin-left: 52%;
  }
  .offset-by-seven.column,
.offset-by-seven.columns {
    margin-left: 60.6666666667%;
  }
  .offset-by-eight.column,
.offset-by-eight.columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-nine.column,
.offset-by-nine.columns {
    margin-left: 78%;
  }
  .offset-by-ten.column,
.offset-by-ten.columns {
    margin-left: 86.6666666667%;
  }
  .offset-by-eleven.column,
.offset-by-eleven.columns {
    margin-left: 95.3333333333%;
  }
  .offset-by-one-third.column,
.offset-by-one-third.columns {
    margin-left: 34.6666666667%;
  }
  .offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
    margin-left: 69.3333333333%;
  }
  .offset-by-one-half.column,
.offset-by-one-half.columns {
    margin-left: 52%;
  }
}
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.8em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.4;
  font-weight: 400;
  font-style: normal;
  color: #eeeeee;
  background-color: #061c32;
  font-family: freight-sans-pro, sans-serif;
  font-weight: 200;
}
body:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -50;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: freight-sans-pro, sans-serif;
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 400;
  color: #fff;
}

h1 {
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: -0.1rem;
}

h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: -0.1rem;
}

h3 {
  font-size: 3rem;
  line-height: 1.3;
  letter-spacing: -0.1rem;
}

h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: -0.08rem;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
}

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 6rem;
  }
  h2 {
    font-size: 4.2rem;
  }
  h3 {
    font-size: 3.6rem;
  }
  h4 {
    font-size: 3rem;
  }
  h5 {
    font-size: 2.4rem;
  }
  h6 {
    font-size: 1.5rem;
  }
}
p {
  margin-top: 0;
}

.align-center {
  text-align: center;
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #f8b739;
}

a:hover {
  color: #f6c90e;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type=submit],
input[type=reset],
input[type=button] {
  display: inline-block;
  height: 48px;
  line-height: 44px;
  padding: 0 30px;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 3rem;
  border: 2px solid #f8b739;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.25s;
}

.button:hover,
button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover,
.button:focus,
button:focus,
input[type=submit]:focus,
input[type=reset]:focus,
input[type=button]:focus {
  background-color: #f6c90e;
  border-color: #f6c90e;
  color: #222;
  outline: 0;
}

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type=email],
input[type=number],
input[type=search],
input[type=text],
input[type=tel],
input[type=url],
input[type=password],
textarea,
select {
  width: 100%;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  box-shadow: none;
  box-sizing: border-box;
  margin-bottom: 0;
}

/* Removes awkward default styles on some inputs for iOS */
input[type=email],
input[type=number],
input[type=search],
input[type=text],
input[type=tel],
input[type=url],
input[type=password],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea {
  /*min-height: 65px;*/
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
}

input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  border-color: #f8b739;
  outline: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

label,
legend {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0;
}

input[type=checkbox],
input[type=radio] {
  display: inline;
}

label > .label-body {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: normal;
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside;
}

ol {
  list-style: decimal inside;
}

ol,
ul {
  padding-left: 0;
  margin-top: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%;
}

li {
  margin-bottom: 1rem;
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #f1f1f1;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre;
}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e1e1e1;
}

th:first-child,
td:first-child {
  padding-left: 0;
}

th:last-child,
td:last-child {
  padding-right: 0;
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #e1e1e1;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
section:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
/* Larger than Desktop HD */
/* Common Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section {
  padding: 3rem 0;
}
@media (min-width: 550px) {
  section {
    padding: 5rem 0;
  }
}
@media (min-width: 750px) {
  section {
    padding: 7rem 0;
  }
}
@media (min-width: 1000px) {
  section {
    padding: 10rem 0;
  }
}

img.invert {
  -webkit-filter: invert(100%);
          filter: invert(100%);
}

#cosmic {
  position: relative;
  display: block;
  width: 100%;
  background-color: #002a47;
  background-image: url("../images/bg-cosmic-stars.svg"), url("../images/bg-cosmic.svg");
  background-position: top center, bottom center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed, scroll;
  padding-bottom: 6rem;
}
#cosmic:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-image: url("../images/bg-cosmic-shim.svg");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

#atmosphere {
  background: linear-gradient(to bottom, rgb(0, 42, 71) 0%, rgb(129, 192, 191) 100%);
}

/* Section: Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#header {
  padding: 0;
  position: relative;
  z-index: 500;
}
#header .container {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 550px) {
  #header .container {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 30px;
  }
}

.logo-container {
  width: 100%;
  max-width: 20%;
  margin: 10px 0;
}
@media screen and (max-width: 900px) {
  .logo-container {
    max-width: 30%;
  }
}

#logo {
  float: left;
  width: 100%;
  transition: all 0.25s;
  margin: 1.2rem 0 0.5rem 0;
}
#logo path {
  fill: #fff;
}
#logo:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#mobile-trigger {
  display: none;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 3;
  top: 15px;
  right: 0;
  background-image: url("../images/icon-mobile-menu.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
}
@media screen and (max-width: 550px) {
  #mobile-trigger {
    display: block;
  }
}
#mobile-trigger.open {
  background-image: url("../images/icon-mobile-close.svg");
  background-size: 20px 20px;
}

#nav {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  margin: 0;
  list-style: none;
}
@media screen and (max-width: 550px) {
  #nav {
    display: none;
  }
  #nav.open {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #002a47;
    padding: 20px;
  }
}
#nav li {
  display: flex;
  align-items: center;
  margin: 0 5% 0 0;
  line-height: 4rem;
}
@media screen and (max-width: 550px) {
  #nav li {
    line-height: 6rem;
  }
}
#nav li:last-child {
  margin-right: 0;
}
#nav li a {
  display: inline-block;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.25s;
  color: #ffffff;
}
@media screen and (max-width: 550px) {
  #nav li a {
    font-size: 2rem;
  }
}
#nav li a:hover {
  color: #f6c90e;
}
#nav li a.active {
  font-weight: 800;
}

/* Page: Home
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home-about {
  padding-bottom: 0;
}
#home-about h1 {
  z-index: 2;
  color: #fff;
  text-align: center;
  font-weight: bold;
}
@media (max-width: 550px) {
  #home-about h1 {
    text-align: left;
  }
}
#home-about h4 {
  z-index: 2;
  opacity: 0.75;
  text-align: center;
  letter-spacing: 0;
}
@media (max-width: 550px) {
  #home-about h4 {
    text-align: left;
  }
}
#home-about p,
#home-about .button {
  margin: 0;
}
#home-about .button {
  transition: all 0.3s ease-in-out;
}
#home-about .button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#home-apps .container {
  margin-bottom: 4rem;
}
#home-apps .container .row {
  flex-direction: column;
}
@media (min-width: 1024px) {
  #home-apps .container .row {
    flex-direction: row;
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}
#home-apps .app-card {
  position: relative;
  height: 100%;
}
#home-apps .app-card:before, #home-apps .app-card:after {
  content: "";
  z-index: 1;
  position: absolute;
  top: -4px;
  width: 8px;
  height: 8px;
  background-image: url("../images/app-card-star.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#home-apps .app-card:before {
  left: -4px;
}
#home-apps .app-card:after {
  right: -4px;
}
@media (max-width: 1024px) {
  #home-apps .app-card {
    width: 100%;
    margin: 0 0 4rem 0;
  }
  #home-apps .app-card:last-child {
    margin-bottom: 0;
  }
}
#home-apps .app-card .app-card-container {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  background-color: #061c32;
  border: 1px solid #2b3e51;
  border-radius: 3px;
  transition: 0.2s all ease;
  box-shadow: 7px 7px 14px rgba(76, 44, 96, 0.4);
}
#home-apps .app-card .app-card-container:hover {
  box-shadow: 2px 2px 7px rgba(76, 44, 96, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}
#home-apps .app-card .app-card-container:hover .app-icon {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.8);
}
#home-apps .app-card .app-card-container:active {
  box-shadow: 0 1px 3px rgb(0, 0, 0);
}
#home-apps .app-card .app-card-container:before, #home-apps .app-card .app-card-container:after {
  content: "";
  z-index: 1;
  position: absolute;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background-image: url("../images/app-card-star.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#home-apps .app-card .app-card-container:before {
  left: -4px;
}
#home-apps .app-card .app-card-container:after {
  right: -4px;
}
#home-apps .app-card .app-icon {
  position: absolute;
  top: 21px;
  left: -10px;
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: 0.2s all ease;
}
#home-apps .app-card dl {
  margin: 0;
  padding: 0;
}
#home-apps .app-card dl dt {
  font-weight: 600;
  margin: 0 0 0 45px;
  padding: 17px 0;
  font-size: 2.75rem;
  line-height: 1;
}
#home-apps .app-card dl dd {
  margin: 15px 0 0 0;
  padding: 0;
  line-height: 1.25;
  color: #d4d7dd;
}
#home-apps .app-card p {
  margin-bottom: 0;
  color: #f0decb;
  line-height: 1.5;
  margin-top: 15px;
}
#home-apps .app-card .app-cta {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 20px;
}
#home-apps .app-card .app-cta .button {
  margin-bottom: 0;
  margin-right: 20px;
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding-left: 15px;
  padding-right: 15px;
}
#home-apps .app-card .app-cta a {
  font-size: 16px;
  text-decoration: none;
}
#home-apps .app-card.mesa {
  background: rgb(64, 92, 251);
  border-radius: 16px;
}
#home-apps .app-card.mesa .app-card-container {
  background: url("../images/bg-mesa.png") no-repeat right;
  background-size: contain;
  border-radius: 16px;
  border-color: rgba(0, 0, 0, 0);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
#home-apps .app-card.mesa .app-card-container a {
  color: #fff;
}
#home-apps .app-card.mesa .app-card-container .button {
  color: #fff;
  background-color: rgba(255, 255, 255, 0);
  border-color: rgb(255, 255, 255);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
#home-apps .app-card.mesa .app-card-container .button:hover {
  background-color: #e24675;
  border-color: #e24675;
}
#home-apps .app-card.mesa .app-icon {
  background-image: url("../images/MESA_Icon__Blue-Blue.png");
  background-color: #364f6b;
  background-size: cover;
}
#home-apps .app-card.mesa .button:hover,
#home-apps .app-card.mesa .button:active,
#home-apps .app-card.mesa .button:focus {
  color: #fff;
  border-color: #364f6b;
  background-color: #364f6b;
}
#home-apps .app-card.tracktor .app-icon {
  background-image: url("../images/appicon-tracktor.svg");
  background-color: #c05717;
}
#home-apps .app-card.tracktor .button:hover,
#home-apps .app-card.tracktor .button:active,
#home-apps .app-card.tracktor .button:focus {
  color: #fff;
  border-color: #c05717;
  background-color: #c05717;
}
#home-apps .app-card.infiniteoptions .app-icon {
  background-image: url("../images/appicon-infiniteoptions.svg");
  background-color: #006fbb;
}
#home-apps .app-card.infiniteoptions .button:hover,
#home-apps .app-card.infiniteoptions .button:active,
#home-apps .app-card.infiniteoptions .button:focus {
  color: #fff;
  border-color: #006fbb;
  background-color: #006fbb;
}
#home-apps .app-card.uploadery .app-icon {
  background-image: url("../images/appicon-uploadery.svg");
  background-color: #637381;
}
#home-apps .app-card.uploadery .button:hover,
#home-apps .app-card.uploadery .button:active,
#home-apps .app-card.uploadery .button:focus {
  color: #fff;
  border-color: #637381;
  background-color: #637381;
}
#home-apps .app-card.kitkarts .app-icon {
  background-image: url("../images/appicon-kitkarts.svg");
  background-color: #00848e;
}
#home-apps .app-card.kitkarts .button:hover,
#home-apps .app-card.kitkarts .button:active,
#home-apps .app-card.kitkarts .button:focus {
  color: #fff;
  border-color: #00848e;
  background-color: #00848e;
}
#home-apps .app-card.coin .app-icon {
  background-image: url("../images/appicon-coin.svg");
  background-color: #108043;
  background-size: 40px 40px;
}
#home-apps .app-card.coin .button:hover,
#home-apps .app-card.coin .button:active,
#home-apps .app-card.coin .button:focus {
  color: #fff;
  border-color: #108043;
  background-color: #108043;
}
#home-apps .app-card.pagestudio .app-icon {
  background-image: url("../images/appicon-pagestudio.svg");
  background-color: #ce2525;
}
#home-apps .app-card.pagestudio .button:hover,
#home-apps .app-card.pagestudio .button:active,
#home-apps .app-card.pagestudio .button:focus {
  color: #fff;
  border-color: #ce2525;
  background-color: #ce2525;
}
#home-apps .app-card.blogstudio .app-icon {
  background-image: url("../images/appicon-blogstudio.svg");
  background-color: #50248f;
  background-size: 40px 40px;
}
#home-apps .app-card.blogstudio .button:hover,
#home-apps .app-card.blogstudio .button:active,
#home-apps .app-card.blogstudio .button:focus {
  color: #fff;
  border-color: #50248f;
  background-color: #50248f;
}
#home-apps .app-card.smile .app-icon {
  background-image: url("../images/appicon-smile.svg");
  background-color: #bd245f;
}
#home-apps .app-card.smile .button:hover,
#home-apps .app-card.smile .button:active,
#home-apps .app-card.smile .button:focus {
  color: #fff;
  border-color: #bd245f;
  background-color: #bd245f;
}
#home-apps .app-card.bouncer .app-icon {
  background-image: url("../images/appicon-bouncer.svg");
  background-color: #434343;
  background-size: 40px 40px;
}
#home-apps .app-card.bouncer .button:hover,
#home-apps .app-card.bouncer .button:active,
#home-apps .app-card.bouncer .button:focus {
  color: #fff;
  border-color: #434343;
  background-color: #434343;
}
#home-apps .app-card.fablet .app-icon {
  background-image: url("../images/appicon-fablet.svg");
  background-color: #43467f;
}
#home-apps .app-card.fablet .button:hover,
#home-apps .app-card.fablet .button:active,
#home-apps .app-card.fablet .button:focus {
  color: #fff;
  border-color: #43467f;
  background-color: #43467f;
}

/* Home - Quotes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home-quotes {
  text-align: center;
}
#home-quotes h4 {
  font-size: 3.6rem;
  color: #d4d7dd;
  font-family: freight-sans-pro, sans-serif;
  font-style: italic;
  max-width: 80%;
  display: inline-block;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  #home-quotes h4 {
    font-size: 2.4rem;
    max-width: 100%;
  }
}
#home-quotes h6 {
  color: #d4d7dd;
  margin-top: 3rem;
}
#home-quotes h6:before {
  content: "- ";
}
#home-quotes h6:after {
  content: " -";
}
#home-quotes .review_top_ornament {
  max-height: 10rem;
  margin-top: -4.5rem;
}
#home-quotes .review_top_ornament_line {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 10rem;
  display: inline-block;
  border-top: solid 1px rgba(255, 255, 255, 0.2);
  padding-top: 5rem;
}
#home-quotes .review_top_ornament_quotemark {
  color: rgba(255, 255, 255, 0.2);
  font-family: freight-sans-pro, sans-serif;
  font-weight: bold;
  font-size: 10rem;
  display: inline-block;
}

/* Home - Customer Logos
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#home-customers {
  text-align: center;
  padding: 0;
}
#home-customers .columns {
  position: relative;
  min-height: 12rem;
  text-align: center;
}
#home-customers .columns a {
  display: inline-block;
}
#home-customers .columns img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 55%;
}
@media screen and (max-width: 600px) {
  #home-customers .columns.three {
    width: 50%;
    margin: 0;
  }
  #home-customers .columns.three:nth-child(3), #home-customers .columns.three:nth-child(4) {
    display: none;
  }
}

.flip-container {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
  width: 100%;
  height: 100px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front,
.back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

#home-resources h2 {
  font-weight: 600;
  color: #fff;
}
#home-resources h4 {
  color: #d4d7dd;
}
#home-resources .resource {
  padding: 45px 0 0 0;
}
@media (max-width: 1024px) {
  #home-resources .resource {
    width: 100%;
    margin: 0;
  }
}
#home-resources .resource a {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
  padding: 20px;
  border-radius: 3px;
  border: 1px solid #2b3e51;
  background-color: #061c32;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: 0.2s all ease;
}
#home-resources .resource a:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
#home-resources .resource a:hover .resource-icon {
  box-shadow: 0 0 0 3px #fff;
  border-color: #fff;
}
#home-resources .resource a p {
  position: relative;
  margin: -20px -20px 10px -20px;
  padding: 10px 20px 10px 75px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
  background: rgba(255, 255, 255, 0.25);
  font-size: 12px;
  font-weight: bold;
}
#home-resources .resource-icon {
  position: absolute;
  z-index: 1;
  top: 15px;
  left: -10px;
  width: 60px;
  height: 60px;
  border-radius: 34px;
  background-color: #108043;
  border: 3px solid #061c32;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  box-shadow: 0 0 0 3px #fff;
  transition: 0.2s all ease;
}
#home-resources .resource-icon.uptown {
  background-image: url("../images/resourceicon-uptown.svg");
}
#home-resources .resource-icon.nan {
  background-image: url("../images/resourceicon-nan.svg");
}
#home-resources dl {
  margin: 0;
  padding: 0;
}
#home-resources dl dt {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  padding: 0 0 0 55px;
  margin: 0 0 17px 0;
}
#home-resources dl dt a {
  text-decoration: none;
}
#home-resources dl dd {
  margin: 0;
  padding: 0;
  line-height: 1.25;
  color: #d4d7dd;
}

/* Page: Services
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#what-we-do {
  text-align: center;
}
#what-we-do h4 {
  font-weight: 300;
  opacity: 0.65;
}

#engineering,
#mobile,
#careers,
#shopify-expert {
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
}
#engineering h5,
#mobile h5,
#careers h5,
#shopify-expert h5 {
  opacity: 0.75;
}
#engineering h6,
#mobile h6,
#careers h6,
#shopify-expert h6 {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 2.5;
  padding-left: 5rem;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 4.5rem;
}

#engineering {
  background-color: #282828;
  background-position: left;
}
@media (min-width: 550px) {
  #engineering {
    background-image: url("../images/bg-engineering.png");
  }
}
#engineering h6 {
  background-image: url("../images/engineering.svg");
}

#mobile {
  background-color: #121627;
  background-position: right;
  background-image: url("../images/bg-mobile.png");
}
#mobile h6 {
  background-image: url("../images/mobile.svg");
}

#shopify-expert {
  background-color: #666560;
  background-position: left;
  background-image: url("../images/bg-shopify.png");
}
#shopify-expert a img {
  width: 75%;
  transition: all ease-in-out 0.3s;
}
@media (min-width: 550px) {
  #shopify-expert a img {
    width: 100%;
    max-width: 369px;
    margin-top: 5rem;
  }
}
#shopify-expert a:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
#shopify-expert .button {
  background: transparent;
  color: #fff;
}
#shopify-expert .button:hover {
  background: #a09168;
}
#shopify-expert h6 {
  background-image: url("../images/platform.svg");
}

.service {
  background-repeat: no-repeat;
  background-position: right;
}
.service .twelve h3 {
  color: #666560;
}
.service h1 {
  margin-top: 0;
}
.service a.showcase {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  margin-top: 2.5rem;
  color: rgba(0, 0, 0, 0.4);
  padding-left: 10rem;
  border-left: 0.2rem solid rgba(0, 0, 0, 0.1);
  transition: all ease-in-out 0.3s;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100px 72px;
}
.service a.showcase.custom-products {
  background-image: url("../images/work-alala-icon.jpg");
}
.service a.showcase.legal-compliance {
  background-image: url("../images/work-velvet-cloud-icon.jpg");
}
.service a.showcase.system-integrations {
  background-image: url("../images/work-cbyge-icon.jpg");
}
.service a.showcase.custom-theme {
  background-image: url("../images/work-tripp-swimwear-icon.jpg");
}
.service a.showcase.store-setup {
  background-image: url("../images/work-18rabbits-icon.jpg");
}
.service a.showcase strong {
  color: #2278b9;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 1.3rem;
}
.service a.showcase:hover {
  color: #000;
  border-left-color: rgba(0, 0, 0, 0.3);
}
.service a.showcase-ex img {
  width: auto;
  max-width: 100%;
  margin-top: 2.5rem;
  transition: all ease-in-out 0.3s;
}
@media (min-width: 550px) {
  .service a.showcase-ex img {
    margin-top: 0;
  }
}
.service a.showcase-ex:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

#service-intro {
  text-align: center;
  padding-bottom: 0;
  border-bottom: 0;
}

#testimonial {
  text-align: center;
  background: #fff;
  padding-top: 0;
}

.owl-theme .owl-controls .owl-page span {
  border-color: black !important;
  background: rgba(0, 0, 0, 0);
  width: 4px;
  height: 4px;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  background: rgb(0, 0, 0);
  border-color: black !important;
}

/* Page: Work
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-work {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media screen and (max-width: 600px) {
  #page-work {
    background-size: 180% auto;
  }
}
@media screen and (min-width: 1600px) {
  #page-work {
    background-size: 100% auto;
  }
}
#page-work #header,
#page-work #mast {
  background-color: rgba(0, 0, 0, 0.45);
}
#page-work #header #logo path {
  fill: #fff;
}
#page-work #hamburger span {
  background: #fff;
}
#page-work #header a {
  color: #fff;
}
#page-work.alala-captain-tights {
  background-image: url("../images/work-alala-captain-tight-mast.jpg");
}
#page-work.imperial-motion-lux-wetsuit {
  background-image: url("../images/work-imperial-motion-lux-wetsuit-mast.jpg");
}
#page-work.lspace-swimwear-bundles {
  background-image: url("../images/work-lspace-swimwear-bundles-mast.jpg");
}
#page-work.mission-workshop-arkiv-bag {
  background-image: url("../images/work-mission-workshop-arkiv-bag-mast.jpg");
}
#page-work.famsf-migration {
  background-image: url("../images/work-famsf-harmony-mast.jpg");
}
#page-work.stringletter-publishing-order-management {
  background-image: url("../images/work-stringletter-publishing-order-management-mast.jpg");
}
#page-work.cbyge-harmony {
  background-image: url("../images/work-cbyge-harmony-mast.jpg");
}
#page-work.organic-18rabbits-store-setup {
  background-image: url("../images/work-18rabbits-store-setup-mast.jpg");
}
#page-work.tripp-swimwear-custom-theme {
  background-image: url("../images/work-tripp-swimwear-custom-theme-mast.jpg");
}
#page-work.velvet-cloud-age-verification {
  background-image: url("../images/work-velvet-cloud-age-verification-mast.jpg");
}
#page-work.hookah-john-age-verification {
  background-image: url("../images/work-hookah-john-age-verification-mast.jpg");
}
#page-work.eliquid-age-verification {
  background-image: url("../images/work-eliquid-age-verification-mast.jpg");
}
#page-work.hawaiiteetimes {
  background-image: url("../images/work-hawaiiteetimes-mast.jpg");
}
#page-work.emson {
  background-image: url("../images/work-emson-mast.jpg");
}
#page-work.ideo {
  background-image: url("../images/work-ideo-mast.jpg");
}
#page-work.markethallfoods {
  background-image: url("../images/work-markethallfoods-mast.jpg");
}
#page-work.moderntimes {
  background-image: url("../images/work-moderntimes-mast.jpg");
}
#page-work.ninewest {
  background-image: url("../images/work-ninewest-mast.jpg");
}

#mast {
  text-align: center;
  background-color: transparent;
  overflow: hidden;
}
#mast h1 {
  margin-top: -1000px;
}

#project {
  background-color: #061c32;
}
#project h3 {
  opacity: 0.75;
}
#project .four.columns {
  text-align: center;
}
#project .four.columns img {
  display: inline-block;
  width: 100%;
  max-width: 12.5rem;
}
#project .eight.columns p {
  font-size: 1.7rem;
}

#examples {
  padding-top: 0;
  background-color: #061c32;
  text-align: center;
}
#examples .example {
  margin-bottom: 10rem;
}
#examples video {
  float: left;
  position: relative;
  width: 100%;
  height: auto;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
  margin-bottom: 10rem;
}

.example {
  position: relative;
  float: left;
  width: 100%;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}
.example:before {
  content: "";
  position: absolute;
  top: 11px;
  left: 10px;
  z-index: 10;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.example .browser-bar {
  float: left;
  width: 100%;
  min-height: 30px;
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 1px solid #8f8f8d;
  background: #cdcdca;
}
.example .browser-bar:before, .example .browser-bar:after {
  content: "";
  position: absolute;
  top: 11px;
  z-index: 10;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.example .browser-bar:before {
  left: 25px;
}
.example .browser-bar:after {
  left: 40px;
}
.example img {
  float: left;
  display: inline-block;
  max-width: 100%;
}

#related {
  padding: 5rem 0;
  text-align: center;
  background: #061c32;
}
#related h5 {
  margin-top: 0;
}
#related .example {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
  transition: all ease-in-out 0.3s;
}
#related .example:before {
  display: none;
}
#related p {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  margin-top: 2.5rem;
  transition: all ease-in-out 0.3s;
  line-height: 1.8rem;
}
@media (max-width: 960px) {
  #related p {
    margin-bottom: 6rem;
  }
}
#related p strong {
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
#related a:hover .example {
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5);
}

#get-started {
  padding-top: 0;
  text-align: center;
}
#get-started img {
  display: inline-block;
  max-width: 80px;
  border-radius: 40px;
}

/* Page: Apps
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#shopify-apps {
  padding-bottom: 0;
}

#popular-apps {
  text-align: center;
  padding-bottom: 5rem;
}
#popular-apps a img {
  vertical-align: middle;
  max-width: 200px;
  margin-top: -1rem;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 0.25s;
}
#popular-apps a:hover img {
  -webkit-transform: scale(1);
          transform: scale(1);
}
#popular-apps h2 {
  font-size: 1.6rem;
  color: #8a7a58;
  letter-spacing: normal;
}
@media (min-width: 550px) {
  #popular-apps h2 {
    font-size: 2.4rem;
  }
}
#popular-apps h2 strong {
  display: block;
  width: 100%;
  font-size: 7.5rem;
}
@media (min-width: 550px) {
  #popular-apps h2 strong {
    font-size: 15rem;
  }
}

#support {
  background-color: #121627;
  text-align: center;
}
#support img {
  width: 75%;
  max-width: 350px;
  margin-bottom: 3rem;
}
@media (min-width: 550px) {
  #support img {
    width: 100%;
  }
}
#support h3 {
  color: #f8b739;
}

.shopify-app {
  padding-top: 5rem;
}
.shopify-app img {
  width: 100%;
  max-width: 442px;
}
.shopify-app h2 {
  margin-top: 2.5rem;
  color: #000;
  transition: all 0.25s;
}
.shopify-app h5 {
  color: #000;
  transition: all 0.25s;
}
.shopify-app p {
  text-transform: uppercase;
  color: #f8b739;
  font-weight: 700;
  transition: all 0.25s;
}
.shopify-app svg {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 0.5rem;
  transition: all 0.25s;
}
.shopify-app a {
  text-decoration: none;
}
.shopify-app a:hover h2 {
  color: rgba(0, 0, 0, 0.8);
}
.shopify-app a:hover h5 {
  color: rgba(0, 0, 0, 0.6);
}
.shopify-app a:hover p {
  color: #b6a884;
}
.shopify-app a:hover svg {
  margin-left: 1.5rem;
}
.shopify-app .screenshot {
  float: left;
  position: relative;
}
.shopify-app .screenshot img {
  opacity: 1;
  transition: all 0.25s;
}
.shopify-app .screenshot span {
  opacity: 0;
  display: inline-block;
  text-transform: uppercase;
  background-color: #fff;
  border-radius: 0;
  border: 2px solid #f8b739;
  height: 38px;
  line-height: 38px;
  padding: 0 30px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #555;
  background-position: 50% 25%;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.75);
          transform: translateX(-50%) translateY(-50%) scale(0.75);
  transition: all 0.25s ease;
}
.shopify-app .screenshot:hover img {
  opacity: 0.5;
}
.shopify-app .screenshot:hover span {
  opacity: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
          transform: translateX(-50%) translateY(-50%) scale(1);
}

/* Page: Solution Template
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-solution {
  background-attachment: fixed;
}
#page-solution.page-solutions {
  background-color: #fff;
  background-image: url("../images/bg-polygons.svg");
  background-attachment: fixed;
  background-position: top -1rem center;
  background-size: 110% auto;
}
#page-solution.page-solutions .solution-examples h3 {
  position: relative;
}
#page-solution.page-solutions .solution-examples h3:after {
  content: "";
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: -6rem;
  left: 50%;
  opacity: 0.25;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#page-solution.page-solutions .ourtech {
  background-color: #292316;
}
#page-solution.page-solutions .ourtech .example-container {
  white-space: normal;
  display: inline-block;
  width: 100%;
}
#page-solution.page-solutions .ourtech h3 {
  margin: 0;
}
#page-solution.page-solutions .ourtech h3:after {
  background-image: url("../images/icon-ourtech.svg");
}
#page-solution.page-solutions .ourtech ul {
  float: left;
  width: 33%;
  display: inline-block;
  margin: 0;
}
@media (max-width: 960px) {
  #page-solution.page-solutions .ourtech ul {
    width: 100%;
  }
}
#page-solution.page-solutions .ourtech ul li {
  display: inline-block;
  width: 100%;
  margin: 0;
}
#page-solution.page-solutions .ourtech ul li.title {
  color: #fff;
  text-transform: uppercase;
  font-size: 110%;
  font-weight: 400;
}
#page-solution.page-solutions .ourtech ul li.title:not(:first-child) {
  margin-top: 2rem;
}
@media (max-width: 960px) {
  #page-solution.page-solutions .ourtech ul li.title {
    margin-top: 2rem;
  }
}
#page-solution.page-solutions .customizers {
  background-color: #322b1b;
  border-bottom-left-radius: 6rem;
}
@media (max-width: 960px) {
  #page-solution.page-solutions .customizers {
    border-radius: 0;
  }
}
#page-solution.page-solutions .customizers h3:after {
  background-image: url("../images/icon-customizer.svg");
}
#page-solution.page-solutions .bizapps {
  background-color: #322b1b;
  border-top-right-radius: 6rem;
  border-bottom-right-radius: 6rem;
}
@media (max-width: 960px) {
  #page-solution.page-solutions .bizapps {
    border-radius: 0;
  }
}
#page-solution.page-solutions .bizapps h3:after {
  background-image: url("../images/icon-bizapps.svg");
}
#page-solution.page-solutions .enterprise {
  background-color: #322b1b;
  border-top-left-radius: 6rem;
}
@media (max-width: 960px) {
  #page-solution.page-solutions .enterprise {
    border-radius: 0;
  }
}
#page-solution.page-solutions .enterprise h3:after {
  background-image: url("../images/icon-enterprise.svg");
}
#page-solution.page-solutions .migrations {
  background-color: #292316;
}
#page-solution.page-solutions .migrations h3:after {
  background-image: url("../images/icon-migration.svg");
}
#page-solution.page-solutions .customdev {
  background-color: #292316;
}
#page-solution.page-solutions .customdev h3:after {
  background-image: url("../images/icon-customdev.svg");
}
#page-solution.page-solution-customizers {
  background-image: url("../images/bg-pattern-5.svg");
  background-repeat: repeat;
  background-size: 20% auto;
}
#page-solution.page-solution-migration {
  background-image: url("../images/bg-pattern-1.svg");
  background-repeat: repeat;
  background-size: 40% auto;
}
#page-solution.page-solution-enterprise {
  background-image: url("../images/bg-pattern-2.svg");
  background-repeat: repeat;
  background-size: 50% auto;
}
#page-solution.page-solution-customdev {
  background-image: url("../images/bg-pattern-4.svg");
  background-repeat: repeat;
  background-size: 18% auto;
}
#page-solution.page-solution-bizapps {
  background-image: url("../images/bg-pattern-3.svg");
  background-repeat: repeat;
  background-size: 20% auto;
}
#page-solution #why-shoppad {
  background: transparent;
}

#solution-title {
  text-align: center;
}
#solution-title h4 {
  opacity: 0.85;
}
#solution-title .button {
  transition: all 0.3s ease-in-out;
}
#solution-title .button:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

#solution-overview h4 {
  position: relative;
}
#solution-overview h4:before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 5rem;
  height: 0.4rem;
  background: #877753;
}
#solution-overview p {
  opacity: 0.85;
}
@media (max-width: 960px) {
  #solution-overview {
    text-align: center;
  }
  #solution-overview .columns.four {
    margin-bottom: 6rem;
  }
  #solution-overview h4:before {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.solution-examples {
  display: flex;
  text-align: center;
  background: #292316;
  padding: 0;
}
@media (max-width: 960px) {
  .solution-examples {
    display: block;
  }
}
.solution-examples .twelve.columns {
  white-space: pre-line;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
  width: 100%;
  margin: 0;
}
@media (min-width: 550px) {
  .solution-examples .twelve.columns {
    padding: 5rem 0;
  }
}
@media (min-width: 750px) {
  .solution-examples .twelve.columns {
    padding: 7rem 0;
  }
}
@media (min-width: 1000px) {
  .solution-examples .twelve.columns {
    padding: 10rem 0;
  }
}
.solution-examples .six.columns {
  white-space: pre-line;
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
  width: 100%;
  margin: 0;
}
@media (min-width: 550px) {
  .solution-examples .six.columns {
    padding: 5rem 0;
  }
}
@media (min-width: 750px) {
  .solution-examples .six.columns {
    padding: 7rem 0;
    width: 50%;
  }
}
@media (min-width: 1000px) {
  .solution-examples .six.columns {
    padding: 10rem 0;
  }
}
.solution-examples .six.columns img {
  margin-bottom: 2rem;
}
.solution-examples .six.columns.alala {
  background-image: url("../images/bg-showcase-alala2.jpg");
}
.solution-examples .six.columns.alala-description {
  background-color: #808284;
}
.solution-examples .six.columns.alala-description img {
  max-width: 15rem;
}
.solution-examples .six.columns.alala-description .button {
  background-color: #808284;
  border-color: #fff;
}
.solution-examples .six.columns.missionworkshop {
  background-image: url("../images/bg-showcase-missionworkshop.jpg");
}
.solution-examples .six.columns.missionworkshop img {
  max-width: 10rem;
}
.solution-examples .six.columns.lspaceswimwear {
  background-image: url("../images/bg-showcase-lspaceswimwear.jpg");
}
.solution-examples .six.columns.lspaceswimwear img {
  max-width: 20rem;
}
.solution-examples .six.columns.imperialmotion {
  background-image: url("../images/bg-showcase-imperialmotion.jpg");
}
.solution-examples .six.columns.imperialmotion img {
  max-width: 13rem;
}
.solution-examples .six.columns.markethallfoods {
  background-image: url("../images/bg-showcase-markethallfoods.jpg");
}
.solution-examples .six.columns.markethallfoods-description {
  background-color: #d34f2d;
}
.solution-examples .six.columns.markethallfoods-description img {
  max-width: 24rem;
}
.solution-examples .six.columns.markethallfoods-description .button {
  background-color: #000;
  border-color: #fff;
}
.solution-examples .six.columns.famsf {
  background-image: url("../images/bg-showcase-famsf.jpg");
}
.solution-examples .six.columns.famsf-description img {
  max-width: 25rem;
}
.solution-examples .six.columns.famsf-description .button {
  border-color: #f9931d;
  background-color: #f9931d;
}
.solution-examples .six.columns.rabbits {
  background-image: url("../images/bg-showcase-18rabbits.jpg");
}
.solution-examples .six.columns.rabbits-description {
  background-color: #222;
}
.solution-examples .six.columns.rabbits-description img {
  max-width: 25rem;
}
.solution-examples .six.columns.rabbits-description .button {
  background-color: #000;
  border-color: #fff;
}
.solution-examples .six.columns.trippswimwear {
  background-image: url("../images/bg-showcase-trippswimwear.jpg");
}
.solution-examples .six.columns.trippswimwear-description {
  background-color: #2f2f9c;
}
.solution-examples .six.columns.trippswimwear-description img {
  max-width: 20rem;
}
.solution-examples .six.columns.trippswimwear-description .button {
  background-color: #2f2f9c;
  border-color: #fff;
}
.solution-examples .six.columns.ejuices {
  background-image: url("../images/bg-showcase-ejuices.jpg");
}
.solution-examples .six.columns.ejuices-description {
  background-color: #222;
}
.solution-examples .six.columns.ejuices-description img {
  max-width: 20rem;
}
.solution-examples .six.columns.ejuices-description .button {
  background-color: #222;
  border-color: #fff;
}
.solution-examples .six.columns.moderntimes {
  background-image: url("../images/bg-showcase-moderntimes.jpg");
}
.solution-examples .six.columns.moderntimes-description {
  background-color: #504037;
}
.solution-examples .six.columns.moderntimes-description img {
  max-width: 17.5rem;
}
.solution-examples .six.columns.moderntimes-description .button {
  background-color: #222;
  border-color: #fff;
}
.solution-examples .six.columns.stringletter {
  background-image: url("../images/bg-showcase-stringletter.jpg");
}
.solution-examples .six.columns.stringletter img {
  max-width: 8rem;
}
.solution-examples .six.columns.ideo {
  background-image: url("../images/bg-showcase-ideo.jpg");
}
.solution-examples .six.columns.ideo img {
  max-width: 15rem;
}
.solution-examples .six.columns.hawaiiteetimes {
  background-image: url("../images/bg-showcase-hawaiiteetimes.jpg");
}
.solution-examples .six.columns.hawaiiteetimes-description {
  background-color: #0f3e2f;
}
.solution-examples .six.columns.hawaiiteetimes-description img {
  max-width: 22rem;
}
.solution-examples .six.columns.hawaiiteetimes-description .button {
  background-color: #0f3e2f;
  border-color: #fff;
}
.solution-examples .six.columns.emson {
  background-image: url("../images/bg-showcase-emson.jpg");
}
.solution-examples .six.columns.emson img {
  max-width: 15rem;
}
.solution-examples .six.columns.cbyge {
  background-image: url("../images/bg-showcase-cbyge.jpg");
}
.solution-examples .six.columns.cbyge-description {
  background-color: #0099ff;
}
.solution-examples .six.columns.cbyge-description img {
  max-width: 17.5rem;
}
.solution-examples .six.columns.cbyge-description .button {
  color: #0099ff;
  border-color: #fff;
  background-color: #fff;
}
.solution-examples .six.columns.ninewest {
  background-image: url("../images/bg-showcase-ninewest.jpg");
}
.solution-examples .six.columns.ninewest-description img {
  max-width: 22.5rem;
}
.solution-examples .six.columns.ninewest-description .button {
  border-color: #f700af;
  background-color: #f700af;
}
.solution-examples h3 {
  color: #fff;
}
.solution-examples img {
  display: inline-block;
}
.solution-examples p {
  display: inline-block;
  color: #ddd;
  max-width: 32rem;
}
.solution-examples .button {
  position: relative;
  background: #f8b739;
  color: #fff;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
.solution-examples .button:hover {
  background: #222;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/* Page: App pages
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#app-title {
  text-align: center;
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
@media screen and (max-width: 900px) {
  #app-title {
    padding-top: 7rem;
  }
}
#app-title svg {
  display: inline-block;
  width: 50px;
  height: auto;
}
#app-title h1 {
  font-weight: 600;
}
#app-title h4 {
  opacity: 0.8;
  letter-spacing: 0;
}

#app-screenshot {
  padding-bottom: 0;
}

.page-app-harmony .app-harmony {
  background: #000114;
}
.page-app-harmony #page-cta a,
.page-app-harmony #app-details .shopify-appstore a {
  background-color: #5c6ac4;
  color: #fff;
  border-color: #5c6ac4;
}
.page-app-harmony #page-cta a:hover,
.page-app-harmony #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #5c6ac4;
  color: #5c6ac4;
}
.page-app-harmony .app-quote,
.page-app-harmony #supporting-benefits h5:after {
  background-color: #5c6ac4;
}

.page-app-infiniteoptions .app-infiniteoptions {
  background: url("../images/bg-app-infiniteoptions.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-infiniteoptions #page-cta a,
.page-app-infiniteoptions #app-details .shopify-appstore a {
  background-color: #00adee;
  color: #fff;
  border-color: #00adee;
}
.page-app-infiniteoptions #page-cta a:hover,
.page-app-infiniteoptions #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #00adee;
  color: #00adee;
}
.page-app-infiniteoptions .app-quote,
.page-app-infiniteoptions #supporting-benefits h5:after {
  background-color: #00adee;
}

.page-app-uploadery .app-uploadery {
  background: url("../images/bg-app-uploadery.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-uploadery #page-cta a,
.page-app-uploadery #app-details .shopify-appstore a {
  background-color: #97ada9;
  color: #fff;
  border-color: #97ada9;
}
.page-app-uploadery #page-cta a:hover,
.page-app-uploadery #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #97ada9;
  color: #97ada9;
}
.page-app-uploadery .app-quote,
.page-app-uploadery #supporting-benefits h5:after {
  background-color: #97ada9;
}

.page-app-pagestudio .app-pagestudio {
  background: url("../images/bg-app-pagestudio.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-pagestudio #page-cta a,
.page-app-pagestudio #app-details .shopify-appstore a {
  background-color: #ff764a;
  border-color: #ff764a;
  color: #fff;
}
.page-app-pagestudio #page-cta a:hover,
.page-app-pagestudio #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #ff764a;
  color: #ff764a;
}
.page-app-pagestudio .app-quote,
.page-app-pagestudio #supporting-benefits h5:after {
  background-color: #ff764a;
}

.page-app-blogstudio .app-blogstudio {
  background: url("../images/bg-app-blogstudio.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-blogstudio #page-cta a,
.page-app-blogstudio #app-details .shopify-appstore a {
  background-color: #b58498;
  border-color: #b58498;
  color: #fff;
}
.page-app-blogstudio #page-cta a:hover,
.page-app-blogstudio #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #b58498;
  color: #b58498;
}
.page-app-blogstudio .app-quote,
.page-app-blogstudio #supporting-benefits h5:after {
  background-color: #b58498;
}

.page-app-bouncer .app-bouncer {
  background: url("../images/bg-app-bouncer.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-bouncer #page-cta a,
.page-app-bouncer #app-details .shopify-appstore a {
  background-color: #59be47;
  border-color: #59be47;
  color: #fff;
}
.page-app-bouncer #page-cta a:hover,
.page-app-bouncer #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #59be47;
  color: #59be47;
}
.page-app-bouncer .app-quote,
.page-app-bouncer #supporting-benefits h5:after {
  background-color: #59be47;
}

.page-app-tracktor .app-tracktor {
  background: url("../images/bg-app-tracktor.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-tracktor #app-title svg {
  width: 75px;
  height: auto;
}
.page-app-tracktor #page-cta a,
.page-app-tracktor #app-details .shopify-appstore a {
  background-color: #f99f1b;
  border-color: #f99f1b;
  color: #fff;
}
.page-app-tracktor #page-cta a:hover,
.page-app-tracktor #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #f99f1b;
  color: #f99f1b;
}
.page-app-tracktor .app-quote,
.page-app-tracktor #supporting-benefits h5:after {
  background-color: #f99f1b;
}

.page-app-kitkarts .app-kitkarts {
  background: url("../images/bg-app-kitkarts.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-kitkarts #page-cta a,
.page-app-kitkarts #app-details .shopify-appstore a {
  background-color: #46c2c6;
  border-color: #46c2c6;
  color: #fff;
}
.page-app-kitkarts #page-cta a:hover,
.page-app-kitkarts #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #46c2c6;
  color: #46c2c6;
}
.page-app-kitkarts .app-quote,
.page-app-kitkarts #supporting-benefits h5:after {
  background-color: #46c2c6;
}

.page-app-coin .app-coin {
  background: url("../images/bg-app-coin.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-coin #page-cta a,
.page-app-coin #app-details .shopify-appstore a {
  background-color: #9cca3c;
  border-color: #9cca3c;
  color: #fff;
}
.page-app-coin #page-cta a:hover,
.page-app-coin #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #9cca3c;
  color: #9cca3c;
}
.page-app-coin .app-quote,
.page-app-coin #supporting-benefits h5:after {
  background-color: #9cca3c;
}

.page-app-smile .app-smile {
  background: url("../images/bg-app-smile.svg"), linear-gradient(to bottom, #273637 0%, #000000 100%);
}
.page-app-smile #page-cta a,
.page-app-smile #app-details .shopify-appstore a {
  background-color: #e4441a;
  border-color: #e4441a;
  color: #fff;
}
.page-app-smile #page-cta a:hover,
.page-app-smile #app-details .shopify-appstore a:hover {
  background-color: #fff;
  border-color: #e4441a;
  color: #e4441a;
}
.page-app-smile .app-quote,
.page-app-smile #supporting-benefits h5:after {
  background-color: #e4441a;
}

#app-overview {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  background: #f8f6f0;
}
#app-overview .container {
  display: flex;
}
@media screen and (max-width: 900px) {
  #app-overview .container {
    flex-direction: column;
    background: #000;
    padding-bottom: 2rem;
    margin-top: -1px;
  }
}
#app-overview .keybenefit {
  width: 33.3%;
  flex-grow: 1;
  margin-top: -5rem;
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 900px) {
  #app-overview .keybenefit {
    display: flex;
    flex-direction: column;
  }
}
#app-overview .keybenefit .illustration {
  float: left;
  display: inline-block;
  width: 100%;
  padding-top: 75%;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}
@media screen and (max-width: 900px) {
  #app-overview .keybenefit .illustration {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
}
#app-overview .keybenefit:first-child {
  margin-right: 4rem;
}
#app-overview .keybenefit:last-child {
  margin-left: 4rem;
}
@media screen and (max-width: 900px) {
  #app-overview .keybenefit {
    width: 100%;
    margin: 2.5rem 0 0 0;
  }
  #app-overview .keybenefit:first-child, #app-overview .keybenefit:last-child {
    margin-left: 0;
    margin-right: 0;
  }
}
#app-overview dl {
  float: left;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding-top: 1.5rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
@media screen and (max-width: 900px) {
  #app-overview dl {
    padding-top: 0;
  }
}
#app-overview dl dt {
  box-sizing: border-box;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 2.8rem;
  margin: 0;
  padding: 2rem 2rem 0 2rem;
}
#app-overview dl dd {
  box-sizing: border-box;
  margin: 0;
  padding: 2rem;
}
@media screen and (max-width: 900px) {
  #app-overview dl dd {
    line-height: 2.4rem;
  }
}

#app-details {
  background: #f8f6f0;
  background: linear-gradient(to bottom, #f8f6f0 0%, #ffffff 100%);
}
#app-details ul {
  margin-left: 3rem;
  list-style: disc outside;
  color: #c0b59d;
}
#app-details ul span {
  color: #2c2b26;
}
#app-details .shopify-appstore {
  display: inline-block;
  width: 100%;
  text-align: center;
}
@media screen and (max-width: 900px) {
  #app-details .shopify-appstore {
    margin-bottom: 4rem;
  }
}
#app-details .shopify-appstore a {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  max-width: 20rem;
  padding: 1.5rem 2rem;
  border-radius: 3rem;
  font-weight: 600;
  font-size: 1.8rem;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
#app-details .shopify-appstore a:hover {
  background-color: #fff;
}
#app-details .shopify-appstore p {
  position: relative;
  line-height: 2rem;
}
#app-details .shopify-appstore p:first-child {
  margin-top: 80px;
}
#app-details .shopify-appstore p:first-child:before {
  content: "";
  position: absolute;
  top: -70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background-image: url("../images/logo-shopify-icon.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

.app-quote {
  display: flex;
  background-color: #000;
  color: #fff;
  text-align: center;
  justify-content: center;
}
@media screen and (max-width: 900px) {
  .app-quote {
    flex-direction: column;
    align-items: center;
  }
}
.app-quote .quote {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 1.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
@media (min-width: 550px) {
  .app-quote .quote {
    padding: 5rem;
  }
}
@media (min-width: 750px) {
  .app-quote .quote {
    width: 50%;
  }
}
.app-quote .quote .rating {
  max-width: 25rem;
  margin-bottom: 2rem;
}
@media screen and (max-width: 900px) {
  .app-quote .quote .rating {
    max-width: 20rem;
  }
}
.app-quote .quote h3 {
  font-family: freight-sans-pro, sans-serif;
}
.app-quote .quote p {
  margin: 2rem 0 0 0;
}
.app-quote .quote p img {
  max-width: 17rem;
}
.app-quote .brands {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding: 3rem 1.5rem;
}
@media (min-width: 550px) {
  .app-quote .brands {
    padding: 5rem;
  }
}
@media (min-width: 750px) {
  .app-quote .brands {
    width: 50%;
  }
}
.app-quote .brands .brand {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  box-sizing: border-box;
}
.app-quote .brands .brand img {
  width: 60%;
  max-width: 17.5rem;
  display: inline-block;
}
@media (min-width: 550px) {
  .app-quote .brands .brand img {
    margin: 2.5rem;
  }
}
@media (min-width: 750px) {
  .app-quote .brands .brand img {
    width: 80%;
    margin: 3.5rem;
  }
}
@media screen and (max-width: 900px) {
  .app-quote:first-of-type .brands {
    padding-bottom: 0;
  }
  .app-quote:last-of-type .brands {
    padding-top: 0;
  }
}

.page-app-harmony #app-title h4 {
  opacity: 1;
}
.page-app-harmony #app-title p {
  opacity: 0.75;
}
.page-app-harmony #app-details {
  background-color: #3d3e3e;
  background-image: url("../images/bg-shopify-dashboard.jpg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: #fff;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.page-app-harmony #app-details img {
  float: left;
  width: 100%;
  max-width: 100%;
}
.page-app-harmony #app-details .four.columns p {
  margin-top: 2rem;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.page-app-harmony #app-details .four.columns p strong {
  color: #fff;
}
.page-app-harmony #app-details .shopify-appstore {
  margin-top: 6rem;
}
.page-app-harmony #app-details .shopify-appstore p {
  color: #fff;
}
.page-app-harmony #app-details .shopify-appstore a {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  text-shadow: none;
}
.page-app-harmony #client-logos {
  background: #061c32;
  position: relative;
}
.page-app-harmony #client-logos .container:nth-child(2) {
  margin-bottom: 4rem;
}
.page-app-harmony .app-feature svg {
  display: inline-block;
  width: 100%;
  max-width: 40px;
  margin-right: 10px;
}
.page-app-harmony .app-feature p {
  border-bottom: 1px solid rgba(135, 119, 84, 0.2);
  padding-bottom: 3rem;
  margin-bottom: 3rem;
}
.page-app-harmony .app-feature .container:last-child p {
  border: 0;
  padding: 0;
  margin: 0;
}
.page-app-harmony .app-specs {
  padding-top: 0;
}
.page-app-harmony .app-specs h2 {
  color: #877754;
}
.page-app-harmony .app-specs h4 {
  margin-bottom: 0;
}
.page-app-harmony .app-specs .columns.twelve {
  display: flex;
  flex-wrap: wrap;
}
.page-app-harmony .app-specs dl {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 5px 10px;
  margin: 0;
}
@media (min-width: 900px) {
  .page-app-harmony .app-specs dl {
    width: 50%;
  }
}
.page-app-harmony .app-specs dl:nth-of-type(1), .page-app-harmony .app-specs dl:nth-of-type(2), .page-app-harmony .app-specs dl:nth-of-type(5), .page-app-harmony .app-specs dl:nth-of-type(6) {
  background: rgba(135, 119, 84, 0.1);
}
@media (max-width: 960px) {
  .page-app-harmony .app-specs dl:nth-of-type(1), .page-app-harmony .app-specs dl:nth-of-type(2), .page-app-harmony .app-specs dl:nth-of-type(5), .page-app-harmony .app-specs dl:nth-of-type(6) {
    background: none;
  }
  .page-app-harmony .app-specs dl:nth-child(even) {
    background: rgba(135, 119, 84, 0.1);
  }
}
.page-app-harmony .app-specs dl:last-child {
  margin-bottom: 6rem;
}
.page-app-harmony .app-specs dl dt {
  color: #877754;
  padding: 0;
  margin: 0;
  text-align: right;
  padding-right: 10px;
  min-width: 40px;
  max-width: 40px;
}
.page-app-harmony .app-specs dl dd {
  padding: 0;
  margin: 0;
}
.page-app-harmony #oakland {
  border-top: 0;
  background-color: #222;
}

/* Page: Resources
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-unite2019 .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
#page-unite2019 .video-container iframe,
#page-unite2019 .video-container object,
#page-unite2019 .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#page-unite2019 #talklinks {
  padding-top: 0;
}
#page-unite2019 #talklinks ul {
  margin-left: 1rem;
}
#page-unite2019 #author {
  padding-top: 0;
}
#page-unite2019 #author img {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  border-radius: 150px;
}
@media (max-width: 520px) {
  #page-unite2019 #author img {
    max-width: 100px;
  }
}
#page-unite2019 #author a.learnmore {
  text-decoration: none;
}
#page-unite2019 #author a.learnmore svg {
  display: inline-block;
  width: 6px;
  margin-left: 0.5rem;
  transition: all 0.25s;
}
#page-unite2019 #author a.learnmore:hover svg {
  margin-left: 1.5rem;
}
#page-unite2019 #oakland {
  border-top-width: 0;
  border-top-color: #061c32;
  background-color: #061c32;
}

/* Page: Resources
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-resources #oakland {
  border-top-width: 0;
  border-top-color: #333;
  background-color: #333;
}

#resources {
  text-align: center;
}
#resources a img {
  vertical-align: middle;
  max-width: 200px;
  margin-top: -1rem;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  transition: all 0.25s;
}
#resources a:hover img {
  -webkit-transform: scale(1);
          transform: scale(1);
}
#resources h4 {
  font-weight: 300;
  opacity: 0.65;
}

#blog,
#shopifypluscalculator,
#newappsnewsletter,
#uptown {
  color: #fff;
  background-size: cover;
  background-position: center;
  text-align: center;
}
@media (min-width: 550px) {
  #blog,
#shopifypluscalculator,
#newappsnewsletter,
#uptown {
    text-align: left;
  }
}
#blog h5,
#shopifypluscalculator h5,
#newappsnewsletter h5,
#uptown h5 {
  opacity: 0.75;
}
#blog h6,
#shopifypluscalculator h6,
#newappsnewsletter h6,
#uptown h6 {
  text-transform: uppercase;
  font-weight: 700;
  line-height: 2.5;
  padding-left: 5rem;
  background-position: left;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 4.5rem;
  display: inline-block;
}
@media (min-width: 550px) {
  #blog h6,
#shopifypluscalculator h6,
#newappsnewsletter h6,
#uptown h6 {
    display: block;
  }
}
#blog img,
#shopifypluscalculator img,
#newappsnewsletter img,
#uptown img {
  max-width: 100%;
}
#blog a.screenshot img,
#shopifypluscalculator a.screenshot img,
#newappsnewsletter a.screenshot img,
#uptown a.screenshot img {
  transition: all 0.25s;
}
#blog a.screenshot:hover img,
#shopifypluscalculator a.screenshot:hover img,
#newappsnewsletter a.screenshot:hover img,
#uptown a.screenshot:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
#blog a.learnmore,
#shopifypluscalculator a.learnmore,
#newappsnewsletter a.learnmore,
#uptown a.learnmore {
  color: #fff;
  text-decoration: none;
}
#blog a.learnmore svg,
#shopifypluscalculator a.learnmore svg,
#newappsnewsletter a.learnmore svg,
#uptown a.learnmore svg {
  display: inline-block;
  width: 6px;
  margin-left: 0.5rem;
  transition: all 0.25s;
}
#blog a.learnmore:hover svg,
#shopifypluscalculator a.learnmore:hover svg,
#newappsnewsletter a.learnmore:hover svg,
#uptown a.learnmore:hover svg {
  margin-left: 1.5rem;
}

#shopifypluscalculator {
  background-color: #0b1317;
  background-image: url("../../shopify-plus-calculator/images/bg-landing-1.jpg");
}
#shopifypluscalculator h6 {
  background-image: url("../images/shopifypluscalculator.svg");
  background-size: 40px 30px;
}

#blog {
  background-color: #333;
}
#blog h6 {
  background-image: url("../images/commerceblog.svg");
  background-size: 40px 40px;
}

#newappsnewsletter {
  background-color: #f8b739;
}
#newappsnewsletter h6 {
  background-image: url("../images/newappsnewsletter.svg");
}
#uptown {
  background-color: #000639;
}
#uptown h6 {
  background-image: url("../images/uptown.svg");
}

/* Page: Contact
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#help-picker {
  padding-bottom: 0;
}
#help-picker .container {
  padding-bottom: 3rem;
}
@media (min-width: 550px) {
  #help-picker .container {
    padding-bottom: 5rem;
  }
}
@media (min-width: 750px) {
  #help-picker .container {
    padding-bottom: 7rem;
  }
}
@media (min-width: 1000px) {
  #help-picker .container {
    padding-bottom: 10rem;
  }
}
#help-picker p {
  margin-bottom: 45px;
}
#help-picker .traffic-cop-container {
  max-width: 550px;
  margin: 0 auto;
}
#help-picker .input-group {
  position: relative;
  width: 100%;
  height: 60px;
  display: inline-flex;
  align-items: stretch;
}
@media (max-width: 550px) {
  #help-picker .input-group {
    flex-direction: column;
    height: auto;
  }
}
#help-picker .input-group:before {
  content: "";
  width: 58px;
  height: 58px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 1px;
  left: 1px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-image: url("../images/resourceicon-nan.svg");
}
#help-picker .input-group.mesa:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-mesa.svg");
  background-color: #3762EC;
}
#help-picker .input-group.tracktor:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-tracktor.svg");
  background-color: #c05717;
}
#help-picker .input-group.infiniteoptions:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-infiniteoptions.svg");
  background-color: #006fbb;
}
#help-picker .input-group.uploadery:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-uploadery.svg");
  background-color: #637381;
}
#help-picker .input-group.kitkarts:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-kitkarts.svg");
  background-color: #00848e;
}
#help-picker .input-group.coin:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-coin.svg");
  background-color: #108043;
}
#help-picker .input-group.pagestudio:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-pagestudio.svg");
  background-color: #ce2525;
}
#help-picker .input-group.blogstudio:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-blogstudio.svg");
  background-color: #50248f;
}
#help-picker .input-group.smile:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-smile.svg");
  background-color: #bd245f;
}
#help-picker .input-group.bouncer:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-bouncer.svg");
  background-color: #434343;
}
#help-picker .input-group.fablet:before {
  background-size: 36px 36px;
  background-image: url("../images/appicon-fablet.svg");
  background-color: #43467f;
}
#help-picker .input-group select {
  flex-grow: 2;
  -webkit-appearance: none;
  margin-bottom: 0;
  padding: 0 0 0 75px;
  color: #fff;
  font-size: 22px;
  line-height: 58px;
  height: auto;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background-color: #061c32;
  background-image: url("../images/icon_chevron-right_minor.svg");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 20px 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  transition: 0.3s ease all;
}
#help-picker .input-group select:hover {
  background-position: right 15px center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.25);
}
#help-picker .input-group select option {
  color: #fff;
  background-color: #222831;
}
#help-picker .input-group .button {
  flex-grow: 1;
  margin-left: 30px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 56px;
  height: auto;
}
@media (max-width: 550px) {
  #help-picker .input-group .button {
    margin-left: 0;
    margin-top: 30px;
  }
}

#contact-us {
  background: linear-gradient(to bottom, rgb(0, 42, 71) 0%, rgb(129, 192, 191) 100%);
}
@media screen and (max-width: 549px) {
  #contact-us h1 {
    text-align: center;
  }
  #contact-us button {
    width: 100%;
    margin: 2.5rem 0 5rem 0;
  }
}
#contact-us .columns.five {
  text-align: right;
}
@media screen and (max-width: 550px) {
  #contact-us .columns.five {
    text-align: left;
  }
}

/*
.floating-label {
  color: #rgba(0, 0, 0, 0.6);
  position: relative;
  top: 0;
  font-weight: 800;
  z-index: 2;
  opacity: 0;
  margin: 0;
}
.pin {
  color: #95adbe;
  margin: 0;
}
*/
.contact-methods {
  list-style: none;
}
.contact-methods li {
  font-weight: 500;
  margin-bottom: 4.5rem;
}
.contact-methods li:last-child {
  margin-bottom: 0;
}
.contact-methods li a {
  display: inline-block;
  width: 100%;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s;
  background-position: top left;
  background-repeat: no-repeat;
}
.contact-methods li a span {
  font-weight: 500;
  color: #eee;
}
.contact-methods li.method-phone {
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

#contact ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}

#contact ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
}

#contact ::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#contact .form-group {
  margin-bottom: 1.5rem;
}
#contact .form-group label {
  margin: 0 0 0.25rem 0;
}

#form-response {
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 25px;
  margin-top: 25px;
}
#form-response h2 {
  font-weight: 800;
}
#form-response h5 {
  margin: 0;
  font-weight: 400;
}

.social {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}
.social span {
  display: inline-block;
  width: 100%;
  color: #877753;
  font-weight: bold;
  margin-bottom: 5px;
}
.social li {
  display: inline-block;
  margin: 0 10px 30px 10px;
}
@media screen and (max-width: 550px) {
  .social li {
    margin-right: 15px;
    margin-left: 0;
  }
}
.social a {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  text-indent: 1000px;
  overflow: hidden;
  margin: 0;
  background-size: contain;
  transition: all 0.35s;
  border-radius: 22px;
  background-color: #2b3e51;
  border: 2px solid #81c0bf;
}
.social a:hover {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  border-color: #fff;
}

#twitter {
  background-image: url("../images/social-icon-twitter.svg");
}

#facebook {
  background-image: url("../images/social-icon-facebook.svg");
}

#instagram {
  background-image: url("../images/social-icon-instagram.svg");
}

/* Page: Careers
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#careers-intro {
  text-align: center;
}
#careers-intro h4 {
  font-weight: 300;
  opacity: 0.65;
}

#careers {
  background-color: #121627;
  background-position: center;
  background-image: url("../images/bg-careers.jpg");
  background-size: cover;
}
@media (min-width: 550px) {
  #careers {
    background-position: left;
  }
}
#careers h2 {
  width: 100%;
}
#careers h6 {
  background-image: url("../images/careers.svg");
}

/* Page: Legal
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#legal {
  background-image: linear-gradient(to bottom, rgb(6, 28, 50) 0%, rgb(129, 192, 191) 100%);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
#legal li {
  list-style-position: outside;
  margin-left: 3rem;
}
#legal a {
  color: #fff;
}
#legal a:hover {
  color: #f6c90e;
}

/* Page: Company
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-company {
  background-image: url("../images/bg-cosmic-stars.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

#about-us {
  text-align: center;
}
@media (max-width: 550px) {
  #about-us {
    text-align: left;
  }
}
#about-us h4 {
  opacity: 0.8;
}
#about-us h1 span {
  color: #e74c3c;
  display: inline-block;
}

.about-photos {
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  z-index: 50;
}
.about-photos .columns {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  width: 10%;
  margin: 0;
  border: 1px solid #061c32;
  background-image: url("../images/Spinner-1s-100px.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px 50px;
}
.about-photos .columns:after {
  content: "";
  float: left;
  width: 100%;
  padding-top: 100%;
  background-size: cover;
  background-position: center;
}
@media (max-width: 550px) {
  .about-photos .columns {
    width: 20%;
  }
  .about-photos .columns:nth-child(6), .about-photos .columns:nth-child(7), .about-photos .columns:nth-child(8), .about-photos .columns:nth-child(9), .about-photos .columns:nth-child(10) {
    display: none;
  }
}
.about-photos.row1 .columns {
  border-top: 0;
}
.about-photos.row1 .columns:nth-child(1):after {
  background-image: url("../images/team-26.jpg");
}
.about-photos.row1 .columns:nth-child(2):after {
  background-image: url("../images/team-38.jpg");
}
.about-photos.row1 .columns:nth-child(3):after {
  background-image: url("../images/team-2.jpg");
}
.about-photos.row1 .columns:nth-child(4):after {
  background-image: url("../images/team-37.jpg");
}
.about-photos.row1 .columns:nth-child(5):after {
  background-image: url("../images/team-6.jpg");
}
.about-photos.row1 .columns:nth-child(6):after {
  background-image: url("../images/team-34.jpg");
}
.about-photos.row1 .columns:nth-child(7):after {
  background-image: url("../images/team-17.jpg");
}
.about-photos.row1 .columns:nth-child(8):after {
  background-image: url("../images/team-21.jpg");
}
.about-photos.row1 .columns:nth-child(9):after {
  background-image: url("../images/team-9.jpg");
}
.about-photos.row1 .columns:nth-child(10):after {
  background-image: url("../images/team-29.jpg");
}
.about-photos.row2 .columns {
  border-bottom: 0;
}
.about-photos.row2 .columns:nth-child(1):after {
  background-image: url("../images/team-1.jpg");
}
.about-photos.row2 .columns:nth-child(2):after {
  background-image: url("../images/team-20.jpg");
}
.about-photos.row2 .columns:nth-child(3):after {
  background-image: url("../images/team-3.jpg");
}
.about-photos.row2 .columns:nth-child(4):after {
  background-image: url("../images/team-8.jpg");
}
.about-photos.row2 .columns:nth-child(5):after {
  background-image: url("../images/team-27.jpg");
}
.about-photos.row2 .columns:nth-child(6):after {
  background-image: url("../images/team-13.jpg");
}
.about-photos.row2 .columns:nth-child(7):after {
  background-image: url("../images/team-7.jpg");
}
.about-photos.row2 .columns:nth-child(8):after {
  background-image: url("../images/team-28.jpg");
}
.about-photos.row2 .columns:nth-child(9):after {
  background-image: url("../images/team-36.jpg");
}
.about-photos.row2 .columns:nth-child(10):after {
  background-image: url("../images/team-25.jpg");
}
.about-photos.row3 .columns {
  border-top: 0;
}
.about-photos.row3 .columns:nth-child(1):after {
  background-image: url("../images/team-11.jpg");
}
.about-photos.row3 .columns:nth-child(2):after {
  background-image: url("../images/team-10.jpg");
}
.about-photos.row3 .columns:nth-child(3):after {
  background-image: url("../images/team-12.jpg");
}
.about-photos.row3 .columns:nth-child(4):after {
  background-image: url("../images/team-19.jpg");
}
.about-photos.row3 .columns:nth-child(5):after {
  background-image: url("../images/team-35.jpg");
}
.about-photos.row3 .columns:nth-child(6):after {
  background-image: url("../images/team-14.jpg");
}
.about-photos.row3 .columns:nth-child(7):after {
  background-image: url("../images/team-15.jpg");
}
.about-photos.row3 .columns:nth-child(8):after {
  background-image: url("../images/team-16.jpg");
}
.about-photos.row3 .columns:nth-child(9):after {
  background-image: url("../images/team-40.jpg");
}
.about-photos.row3 .columns:nth-child(10):after {
  background-image: url("../images/team-33.jpg");
}
.about-photos.row4 .columns {
  border-bottom: 0;
}
.about-photos.row4 .columns:nth-child(1):after {
  background-image: url("../images/team-30.jpg");
}
.about-photos.row4 .columns:nth-child(2):after {
  background-image: url("../images/team-32.jpg");
}
.about-photos.row4 .columns:nth-child(3):after {
  background-image: url("../images/team-18.jpg");
}
.about-photos.row4 .columns:nth-child(4):after {
  background-image: url("../images/team-5.jpg");
}
.about-photos.row4 .columns:nth-child(5):after {
  background-image: url("../images/team-4.jpg");
}
.about-photos.row4 .columns:nth-child(6):after {
  background-image: url("../images/team-24.jpg");
}
.about-photos.row4 .columns:nth-child(7):after {
  background-image: url("../images/team-23.jpg");
}
.about-photos.row4 .columns:nth-child(8):after {
  background-image: url("../images/team-31.jpg");
}
.about-photos.row4 .columns:nth-child(9):after {
  background-image: url("../images/team-22.jpg");
}
.about-photos.row4 .columns:nth-child(10):after {
  background-image: url("../images/team-39.jpg");
}

#about-keys {
  position: relative;
  z-index: 100;
  background-color: #002a47;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4rem rgba(0, 0, 0, 0.8);
}
#about-keys h3 {
  position: relative;
  color: #fff;
}
#about-keys h3:before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 0;
  width: 5rem;
  height: 0.4rem;
  background: #81c0bf;
}
#about-keys p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}
@media (max-width: 960px) {
  #about-keys .columns {
    margin: 3rem 0;
  }
}

#about-careers {
  background: linear-gradient(to bottom, rgb(0, 42, 71) 0%, rgb(129, 192, 191) 100%);
}
#about-careers .twelve.columns {
  margin-bottom: 6rem;
  text-align: center;
}
@media (max-width: 550px) {
  #about-careers .twelve.columns #about-overview {
    text-align: left;
  }
}
#about-careers .four.columns {
  text-align: center;
}
#about-careers ul {
  list-style: none;
}
#about-careers img {
  width: 100%;
  border: 5px solid #f3f3f3;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  border-bottom: 60px solid #f5f5f5;
  box-sizing: border-box;
  background-color: #fff;
}
#about-careers img.hq {
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
}
@media (max-width: 960px) {
  #about-careers img.hq {
    margin-bottom: 2rem;
  }
}
#about-careers img.map {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}
@media (max-width: 960px) {
  #about-careers img.map {
    margin-top: 2rem;
  }
}
@media (max-width: 960px) {
  #about-careers img {
    width: 50%;
    border-bottom-width: 40px;
  }
}

/* Page: Harmony
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-harmony {
  background-color: #252525;
  background-image: url("../images/bg-harmony.svg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}
@media screen and (max-width: 600px) {
  #page-harmony {
    background-size: 180% auto;
  }
}
@media screen and (min-width: 1600px) {
  #page-harmony {
    background-size: 100% auto;
  }
}
#page-harmony #header {
  background: transparent;
}
#page-harmony #header #logo path {
  fill: #fff;
}
#page-harmony #header #nav a {
  color: #fff;
}

#harmony-intro {
  color: #fff;
  padding-top: 5rem;
  text-align: center;
  overflow: hidden;
  max-height: 755px;
}
@media (max-width: 900) {
  #harmony-intro {
    text-align: center;
  }
}
#harmony-intro h1 {
  margin-top: 0;
  margin-bottom: 4.5rem;
  font-size: 4rem;
}
#harmony-intro img {
  width: 100%;
  max-width: 800px;
}
@media screen and (max-width: 768px) {
  #harmony-intro img {
    display: block;
  }
}

#harmony-summary {
  position: relative;
  background-color: #00506b;
  color: #fff;
}
#harmony-summary:before {
  display: inline-block;
  position: absolute;
  content: "";
  top: -3.5rem;
  left: 0;
  width: 100%;
  height: 35px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
}

#harmony-features {
  background: #666560;
}
#harmony-features .container {
  margin-bottom: 5rem;
}
#harmony-features h4 {
  opacity: 0.5;
  text-align: center;
  margin-bottom: 5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
}
#harmony-features h3 {
  padding-top: 6rem;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 50px 50px;
  color: #fff;
}
#harmony-features h3.icon-frequency {
  background-image: url("../images/icon-harmony-frequency.svg");
}
#harmony-features h3.icon-trafficshaping {
  background-image: url("../images/icon-harmony-trafficshaping.svg");
}
#harmony-features h3.icon-monitoring {
  background-image: url("../images/icon-harmony-monitoring.svg");
}
#harmony-features h3.icon-scalable {
  background-image: url("../images/icon-harmony-scalable.svg");
}
#harmony-features h3.icon-schemamapping {
  background-image: url("../images/icon-harmony-schemamapping.svg");
}
#harmony-features h3.icon-transport {
  background-image: url("../images/icon-harmony-transport.svg");
}
#harmony-features p {
  color: rgba(255, 255, 255, 0.75);
}
@media screen and (max-width: 550px) {
  #harmony-features .container {
    margin-bottom: 0;
  }
  #harmony-features p {
    margin-bottom: 5rem;
  }
}

#harmony-diagram {
  background-color: #fff;
  text-align: center;
  padding-bottom: 0;
}
#harmony-diagram img {
  max-height: 42rem;
  z-index: 100;
  position: relative;
}
#harmony-diagram h4 {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #f8f6f0;
  border: 1px solid #877753;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 1rem 0;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
@media (min-width: 600px) {
  #harmony-diagram h4 {
    padding: 0.75rem 0;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 1000px) {
  #harmony-diagram h4 {
    padding: 1rem 0;
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
}
#harmony-diagram h4:before {
  display: none;
  content: "";
  height: 0.2rem;
  border-top: 1px solid #877753;
  border-bottom: 1px solid #877753;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media (min-width: 600px) {
  #harmony-diagram h4:before {
    display: block;
    width: 5.5rem;
    left: -5.5rem;
  }
}
@media (min-width: 1000px) {
  #harmony-diagram h4:before {
    display: block;
    width: 10.5rem;
    left: -10.5rem;
  }
}

#harmony-lead {
  background-color: #f8f6f0;
}
#harmony-lead h2 {
  text-align: center;
}
#harmony-lead p {
  text-align: center;
  opacity: 0.5;
}
#harmony-lead form {
  width: 100%;
  margin: 3rem 0 0 0;
}
#harmony-lead fieldset {
  float: left;
  width: 50%;
  clear: none;
  margin: 0;
}
@media screen and (max-width: 768px) {
  #harmony-lead fieldset {
    width: 100%;
  }
}
#harmony-lead fieldset h6 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}
#harmony-lead fieldset label {
  font-weight: normal;
}
#harmony-lead fieldset label input[type=radio],
#harmony-lead fieldset label input[type=checkbox] {
  margin: 0 0.5rem 0 0;
}
#harmony-lead fieldset select {
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 3.2rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' enable-background='new 0 0 24 24'%3E%3Cpath fill='rgb(0,0,0)' d='M21 5.176l-9.086 9.353-8.914-9.353-2.314 2.471 11.314 11.735 11.314-11.735-2.314-2.471z'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: right 1rem top 1.1rem;
}
#harmony-lead fieldset button {
  margin-top: 1.5rem;
  width: 100%;
}
#harmony-lead #form-response {
  margin-top: 6rem;
  text-align: center;
}

/* REUSABLE BLOCKS
***************************************************
***************************************************
************************************************* */
/* Breadcrumb Nav
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.breadcrumb {
  display: none;
  margin-top: -4rem;
}
.breadcrumb ul {
  display: inline-block;
  width: 100%;
  margin: 0 0 4rem 0;
  padding: 0;
  font-size: 85%;
}
.breadcrumb ul li {
  display: inline-block;
  position: relative;
  padding-left: 2.4rem;
  padding-right: 2rem;
  list-style-type: disc;
  color: #e7e3d9;
}
.breadcrumb ul li:before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: #e7e3d9;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  left: 0;
  position: absolute;
}
.breadcrumb ul li:after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 1rem;
  background: #e7e3d9;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
  left: 0;
  position: absolute;
}
.breadcrumb ul li:first-child:after {
  border-radius: 0;
}
.breadcrumb ul li a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.4);
}
.breadcrumb ul li a:hover {
  color: rgba(0, 0, 0, 0.8);
}

/* Supporting Benefits
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#supporting-benefits {
  background: linear-gradient(to bottom, #f8f6f0 0%, #ffffff 100%);
}
#supporting-benefits h5 {
  position: relative;
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 3rem;
}
#supporting-benefits h5:after {
  content: "";
  position: absolute;
  bottom: -1rem;
  left: 0;
  width: 4rem;
  height: 0.2rem;
  background: #877753;
}
#supporting-benefits p {
  margin-bottom: 0;
}
@media screen and (max-width: 960px) {
  #supporting-benefits p {
    margin-bottom: 6rem;
  }
}
@media (max-width: 960px) {
  #supporting-benefits {
    text-align: center;
    padding-top: 6rem;
  }
  #supporting-benefits h5:after {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
            transform: translateY(-15px);
  }
}
/* Solutions CTA
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-cta {
  position: relative;
  text-align: center;
  background-color: #fff;
}
#page-cta h5 {
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0;
  letter-spacing: 0.1rem;
}
#page-cta a {
  display: inline-block;
  padding: 1rem 2rem;
  width: 100%;
  max-width: 15rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.6rem;
  border-radius: 3rem;
  text-decoration: none;
  transition: all 0.3s ease;
  color: #555;
  background-color: #fff;
  border: 2px solid #f8b739;
}
#page-cta a:hover {
  background: #f8b739;
  color: #fff;
  border-width: 2px;
  border-style: solid;
}

.arrow {
  position: absolute;
  top: -60px;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDMuMzkgMjU0LjE5Ij48cGF0aCBkPSJNNDQ1Ljc3LDE3My45MWEzMS4wNywzMS4wNywwLDAsMC0yMi4xNCw5LjFMMjcxLjE0LDMzNS40OSwyNTcsMzQ5LjYzbC0xNC4xNC0xNC4xNEw5MC4zNywxODNhMzEuMDcsMzEuMDcsMCwwLDAtMjIuMTQtOS4xQTMyLjY1LDMyLjY1LDAsMCwwLDQ1LDE4My42Yy0xMi42OCwxMi42OC0xMi45NCwzMy0uNiw0NS4zOWwxOTAsMTkwYTMxLjA5LDMxLjA5LDAsMCwwLDIyLjE1LDkuMWguOTJhMzEuMDksMzEuMDksMCwwLDAsMjIuMTUtOS4xbDE5MC0xOTBjMTIuMzUtMTIuMzUsMTIuMDgtMzIuNzEtLjYtNDUuMzlBMzIuNjgsMzIuNjgsMCwwLDAsNDQ1Ljc3LDE3My45MVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNS4zIC0xNzMuOTEpIiBmaWxsPSIjZTdlM2Q5Ii8+PC9zdmc+);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: bounce 2s infinite;
          animation: bounce 2s infinite;
}
@media screen and (max-width: 900px) {
  .arrow {
    display: none;
  }
}

/* Why ShopPad
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#why-shoppad {
  background: #fff;
  background-image: url("../images/bg-polygons.svg");
  background-attachment: fixed;
  background-position: top -1rem center;
  background-size: 110% auto;
  border-top: 3px solid #f8f6f0;
  text-align: center;
}
@media screen and (max-width: 600px) {
  #why-shoppad {
    background-size: 180% auto;
  }
}
@media screen and (min-width: 1600px) {
  #why-shoppad {
    background-size: 100% auto;
  }
}
#why-shoppad h1 {
  margin-bottom: 0;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#blastoff {
  position: relative;
  min-height: 250px;
  margin: 0 0 -1px 0;
  padding: 0;
}
#blastoff:before, #blastoff:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#blastoff:before {
  z-index: 2;
  background-color: #81c0bf;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
}
#blastoff:after {
  z-index: 2;
  background-image: url("../images/blastoff.svg");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
}

#footer {
  float: left;
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  background: #002a47;
  background: linear-gradient(to bottom, #002a47 0%, #061c32 100%);
  text-align: left;
  padding-top: 5rem;
}
#footer a {
  color: #81c0bf;
}
#footer a:hover {
  color: #fff;
}
#footer ul.footer-nav {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 30px 0;
}
#footer ul.footer-nav li {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
#footer ul.footer-nav li a {
  font-weight: bold;
}
#footer .columns:last-child a {
  text-decoration: none;
}
#footer .columns:last-child a.address {
  display: inline-block;
  width: 100%;
  color: rgba(255, 255, 255, 0.75);
}
#footer .columns:last-child a.address strong {
  display: inline-block;
  font-size: 2.1rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
}
#footer .columns:last-child a:hover strong {
  color: #a09168;
}
#footer .columns:last-child a.phone {
  display: inline-block;
  margin-top: 0.5rem;
  font-variant-numeric: lining-nums;
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}
#footer .columns:last-child a.email {
  display: inline-block;
  margin-top: 0.5rem;
}
#footer .columns:last-child h5 {
  color: #81c0bf;
  margin-bottom: 1rem;
}
#footer .columns:last-child p {
  margin-bottom: 0;
}
#footer .columns:last-child p strong {
  font-weight: 500;
}
#footer .blog-post {
  display: inline-block;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 45px;
}
#footer .blog-post a {
  text-decoration: none;
}
#footer .blog-post small {
  box-sizing: border-box;
  padding: 0 15px 15px 15px;
  margin: 0;
}
#footer .blog-post h5 {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 15px 15px 0 15px;
  line-height: normal;
  font-weight: 500;
}
#footer .blog-post img {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  width: 100% !important;
  margin: 0 !important;
  height: auto;
}
#footer .blog-post .description p {
  display: none;
  box-sizing: border-box;
  width: 100%;
  line-height: normal;
  margin: 0;
  padding: 15px 15px 20px 15px;
}
#footer .newsletter {
  margin-bottom: 45px;
}
#footer .newsletter svg {
  float: right;
  position: relative;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 50px;
}
#footer .newsletter h6 {
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 5px 0;
  letter-spacing: 1px;
  color: #81c0bf;
}
#footer .newsletter h3 {
  position: relative;
  color: #fff;
  line-height: 1;
  margin-bottom: 1.5rem;
}
#footer .newsletter form {
  margin: 0;
}
#footer .newsletter form input[type=email] {
  color: #fff;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  margin-bottom: 2rem;
  background: transparent;
}
#footer .newsletter form input[type=email]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#footer .newsletter form input[type=email]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#footer .newsletter form input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#footer .newsletter form button {
  color: #fff;
  background-color: #2b3e51;
  border-color: #81c0bf;
}
#footer .newsletter form button:hover {
  background-color: #81c0bf;
  border-color: #81c0bf;
  color: #fff;
}
#footer small {
  display: inline-block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, 0.6);
}
#footer small a {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
#footer small a:hover {
  color: #fff;
}
#footer small svg {
  display: inline-block;
  width: 9px;
  height: 9px;
}
#footer small svg path {
  fill: #e74c3c !important;
}

/* Form Responses
***************************************************
***************************************************
************************************************* */
.form-message {
  margin: 0;
  padding: 20px 0;
  font-weight: 500;
  font-size: 1.8rem;
}
.form-message.error {
  color: #FEAD9A;
}
.form-message.success {
  color: #bbe5b3;
}

/* LANDING PAGES
***************************************************
***************************************************
************************************************* */
/* LP: Webinar Thanks
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#app-store {
  background-color: #fff;
}
#app-store h2 {
  text-align: center;
  color: #000;
  margin-bottom: 1.5rem;
  opacity: 0.65;
}
#app-store h1 {
  text-align: center;
  color: #000;
  margin-bottom: 3rem;
}

/* LP: Retainer Billing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#retainer-billing {
  text-align: center;
}

#plan-form label {
  display: inline-block;
  min-width: 200px;
  background-color: #fff;
  padding: 20px;
  margin: 0 0 20px 0;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05);
  font-weight: bold;
  font-size: 21px;
}
#plan-form label input {
  display: inline-block;
  margin: 0 5px 0 0;
}
#plan-form label span {
  display: block;
  font-weight: normal;
  font-size: 14px;
}
#plan-form button {
  display: inline-block;
  clear: left;
  margin: 25px 0 0 0;
}

/* LP: Shopify Plus
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#page-plus {
  background-image: url("../images/bg-plus.jpg");
  background-attachment: fixed;
  background-position: top center;
  background-size: cover;
}
@media screen and (max-width: 600px) {
  #page-plus {
    background-size: 180% auto;
  }
}
@media screen and (min-width: 1600px) {
  #page-plus {
    background-size: 100% auto;
  }
}
#page-plus #header,
#page-plus #plus-intro {
  background: transparent;
}
#page-plus #plus-intro {
  text-align: center;
}
#page-plus #plus-intro img {
  max-width: 500px;
}

#plus-benefit-1 {
  background-color: #000;
}

#plus-benefit-2 {
  background: #061c32;
  text-align: center;
}

#plus-features {
  padding-bottom: 0;
}
#plus-features .container {
  margin-bottom: 5rem;
}
#plus-features h4 {
  padding-top: 6rem;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 50px 50px;
}
#plus-features h4.icon-design {
  background-image: url("../images/icon-plus-design.svg");
}
#plus-features h4.icon-deployment {
  background-image: url("../images/icon-plus-deployment.svg");
}
#plus-features h4.icon-checkout {
  background-image: url("../images/icon-plus-checkout.svg");
}
#plus-features h4.icon-api {
  background-image: url("../images/icon-plus-api.svg");
}
#plus-features h4.icon-scripts {
  background-image: url("../images/icon-plus-scripts.svg");
}
#plus-features h4.icon-global {
  background-image: url("../images/icon-plus-global.svg");
}

#project-lead {
  padding-top: 5rem;
  padding-bottom: 0;
  min-height: 100vh;
}
#project-lead form {
  text-align: center;
}
#project-lead form .field {
  padding-bottom: 100px;
}
#project-lead form .field > label {
  font-size: 3rem;
  line-height: 3.6rem;
  font-weight: 200;
  margin: 0;
}
@media (min-width: 750px) {
  #project-lead form .field > label {
    font-size: 4.8rem;
    line-height: 6rem;
    font-family: freight-sans-pro, sans-serif;
  }
}
#project-lead form .field > label .hs-form-required {
  color: #bf0711;
  font-weight: 200;
}
#project-lead form .field > legend {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: normal;
  opacity: 0.75;
  margin-bottom: 10px;
}
#project-lead ul {
  list-style: none;
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 0 0;
  flex-wrap: wrap;
}
@media (min-width: 750px) {
  #project-lead ul {
    flex-wrap: nowrap;
  }
}
#project-lead ul li {
  box-sizing: border-box;
  width: 100%;
  max-width: 50%;
  padding: 10px;
}
@media (min-width: 750px) {
  #project-lead ul li {
    padding: 0 10px;
    max-width: 220px;
  }
  #project-lead ul li:first-child {
    padding-left: 0;
  }
  #project-lead ul li:last-child {
    padding-right: 0;
  }
}
#project-lead ul li label {
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  max-width: 220px;
  height: 220px;
  font-weight: normal;
  border-radius: 3px;
  margin: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#project-lead ul li label:hover {
  background-color: rgba(255, 255, 255, 0.025);
}
#project-lead ul li label:hover span {
  background: rgba(255, 255, 255, 0.05);
}
#project-lead ul li label input[type=checkbox],
#project-lead ul li label input[type=radio] {
  display: none;
}
#project-lead ul li label input[type=checkbox]:checked + span,
#project-lead ul li label input[type=radio]:checked + span {
  background-color: #50b83c;
}
#project-lead ul li label input[type=checkbox]:checked + span:before,
#project-lead ul li label input[type=radio]:checked + span:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: #fff;
  border: 3px solid #50b83c;
  border-radius: 20px;
}
#project-lead ul li label input[type=checkbox]:checked + span:after,
#project-lead ul li label input[type=radio]:checked + span:after {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-image: url("../images/icon-check.svg");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
}
#project-lead ul li label span {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 10px;
  background: rgba(255, 255, 255, 0.075);
  line-height: 2rem;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: all 0.2s ease-in-out;
}
#project-lead ul.hs-error-msgs {
  margin-top: 0;
}
#project-lead ul.hs-error-msgs li {
  position: relative;
  max-width: 100%;
  padding: 0;
}
#project-lead ul.hs-error-msgs li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: rotateY(-50%);
          transform: rotateY(-50%);
  width: 100%;
  height: 1px;
  background-color: #fead9a;
}
#project-lead ul.hs-error-msgs li label {
  position: relative;
  max-width: 100%;
  width: auto;
  padding: 0 5px;
  background: none;
  height: auto;
  box-shadow: none;
  color: #de3618;
  font-weight: 600;
  font-size: 1.8rem;
}
#project-lead textarea,
#project-lead input[type=text],
#project-lead input[type=email],
#project-lead input[type=tel] {
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 12px;
  height: auto;
}
#project-lead textarea {
  min-height: 125px;
}
#project-lead .hs-fieldtype-textarea {
  padding-bottom: 20px !important;
}
#project-lead .hs_firstname,
#project-lead .hs_email,
#project-lead .hs_lastname,
#project-lead .hs_phone {
  float: left;
  padding-bottom: 0 !important;
}
@media (max-width: 550px) {
  #project-lead .hs_firstname,
#project-lead .hs_email,
#project-lead .hs_lastname,
#project-lead .hs_phone {
    width: 100% !important;
    clear: left;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}
#project-lead .hs_firstname > label,
#project-lead .hs_email > label,
#project-lead .hs_lastname > label,
#project-lead .hs_phone > label {
  text-align: left;
  font-size: 2.4rem !important;
  line-height: 3.2rem !important;
  font-weight: 200 !important;
}
@media (max-width: 550px) {
  #project-lead .hs_firstname > label,
#project-lead .hs_email > label,
#project-lead .hs_lastname > label,
#project-lead .hs_phone > label {
    font-size: 18px !important;
    line-height: 24px !important;
  }
}
#project-lead .hs_firstname .hs-error-msgs,
#project-lead .hs_email .hs-error-msgs,
#project-lead .hs_lastname .hs-error-msgs,
#project-lead .hs_phone .hs-error-msgs {
  margin-top: -10px;
  text-align: left;
}
#project-lead .hs_firstname .hs-error-msgs li:before,
#project-lead .hs_email .hs-error-msgs li:before,
#project-lead .hs_lastname .hs-error-msgs li:before,
#project-lead .hs_phone .hs-error-msgs li:before {
  display: none;
}
#project-lead .hs_firstname .hs-error-msgs li label,
#project-lead .hs_email .hs-error-msgs li label,
#project-lead .hs_lastname .hs-error-msgs li label,
#project-lead .hs_phone .hs-error-msgs li label {
  line-height: 1.8rem;
}
#project-lead .hs_firstname,
#project-lead .hs_email {
  display: inline-block;
  width: 45%;
  margin-right: 5%;
}
#project-lead .hs_lastname,
#project-lead .hs_phone {
  display: inline-block;
  width: 45%;
  margin-left: 5%;
}
#project-lead .actions {
  padding-top: 40px;
  display: inline-block;
  width: 100%;
}
#project-lead .actions input {
  font-size: 1.8rem;
  padding: 15px 45px;
  height: auto;
  border-radius: 45px;
}
@media (min-width: 750px) {
  #project-lead .hs_budget_range ul {
    flex-wrap: nowrap;
  }
}

.hs_interested_in_,
.hs_my_site_will_be_built_on,
.hs_project_timeframe,
.hs_budget_range {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 40px;
}
.hs_interested_in_ .hs-form-required,
.hs_my_site_will_be_built_on .hs-form-required,
.hs_project_timeframe .hs-form-required,
.hs_budget_range .hs-form-required {
  display: none;
}
.hs_interested_in_:before, .hs_interested_in_:after,
.hs_my_site_will_be_built_on:before,
.hs_my_site_will_be_built_on:after,
.hs_project_timeframe:before,
.hs_project_timeframe:after,
.hs_budget_range:before,
.hs_budget_range:after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #dfe3e8;
  border: 1px solid #c4cdd5;
  border-radius: 8px;
  position: absolute;
  top: -6px;
}
.hs_interested_in_:before,
.hs_my_site_will_be_built_on:before,
.hs_project_timeframe:before,
.hs_budget_range:before {
  left: 42.5%;
  -webkit-transform: translateX(-42.5%);
          transform: translateX(-42.5%);
}
.hs_interested_in_:after,
.hs_my_site_will_be_built_on:after,
.hs_project_timeframe:after,
.hs_budget_range:after {
  left: 47.5%;
  -webkit-transform: translateX(-47.5%);
          transform: translateX(-47.5%);
}
.hs_interested_in_ > label,
.hs_my_site_will_be_built_on > label,
.hs_project_timeframe > label,
.hs_budget_range > label {
  position: relative;
}
.hs_interested_in_ > label:before, .hs_interested_in_ > label:after,
.hs_my_site_will_be_built_on > label:before,
.hs_my_site_will_be_built_on > label:after,
.hs_project_timeframe > label:before,
.hs_project_timeframe > label:after,
.hs_budget_range > label:before,
.hs_budget_range > label:after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #dfe3e8;
  border: 1px solid #c4cdd5;
  border-radius: 8px;
  position: absolute;
  top: -46px;
}
.hs_interested_in_ > label:before,
.hs_my_site_will_be_built_on > label:before,
.hs_project_timeframe > label:before,
.hs_budget_range > label:before {
  left: 52.5%;
  -webkit-transform: translateX(-52.5%);
          transform: translateX(-52.5%);
}
.hs_interested_in_ > label:after,
.hs_my_site_will_be_built_on > label:after,
.hs_project_timeframe > label:after,
.hs_budget_range > label:after {
  left: 57.5%;
  -webkit-transform: translateX(-57.5%);
          transform: translateX(-57.5%);
}

.hs_interested_in_:before {
  background-color: #bbe5b3;
  border-color: #50b83c;
}
.hs_interested_in_ ul li:nth-child(1) label {
  background-image: url("../images/lp-interest-migration.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_interested_in_ ul li:nth-child(2) label {
  background-image: url("../images/lp-interest-custom.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_interested_in_ ul li:nth-child(3) label {
  background-image: url("../images/lp-interest-themes.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_interested_in_ ul li:nth-child(4) label {
  background-image: url("../images/lp-interest-integrations.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}

.hs_my_site_will_be_built_on:before {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_my_site_will_be_built_on:after {
  background-color: #bbe5b3;
  border-color: #50b83c;
}
.hs_my_site_will_be_built_on ul li:nth-child(1) label {
  background-image: url("../images/logo-shopify-white.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_my_site_will_be_built_on ul li:nth-child(2) label {
  background-image: url("../images/logo-shopifyplus-white.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_my_site_will_be_built_on ul li:nth-child(3) label {
  background-image: url("../images/lp-othercart.svg");
  background-position: 50% 40%;
  background-size: 40% 40%;
  background-repeat: no-repeat;
}
.hs_my_site_will_be_built_on ul li:nth-child(4) label {
  background-image: url("../images/lp-unknowncart.svg");
  background-position: 50% 40%;
  background-size: 40% 40%;
  background-repeat: no-repeat;
}

.hs_project_timeframe:before {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_project_timeframe:after {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_project_timeframe > label:before {
  background-color: #bbe5b3;
  border-color: #50b83c;
}
.hs_project_timeframe ul li:nth-child(1) label {
  background-image: url("../images/lp-timeframe-4.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_project_timeframe ul li:nth-child(2) label {
  background-image: url("../images/lp-timeframe-46.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_project_timeframe ul li:nth-child(3) label {
  background-image: url("../images/lp-timeframe-610.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_project_timeframe ul li:nth-child(4) label {
  background-image: url("../images/lp-timeframe-10.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}

.hs_budget_range {
  /*
  ul li:nth-child(1) label {
    background-image: url("../images/lp-budget-50.svg");
    background-position: 50% 15%;
    background-size: 80% 80%;
    background-repeat: no-repeat;
  }
  */
}
.hs_budget_range:before {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_budget_range:after {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_budget_range > label:before {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_budget_range > label:after {
  background-color: #50b83c;
  border-color: #50b83c;
}
.hs_budget_range ul li:nth-child(1) label {
  background-image: url("../images/lp-budget-50100.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_budget_range ul li:nth-child(2) label {
  background-image: url("../images/lp-budget-100200.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_budget_range ul li:nth-child(3) label {
  background-image: url("../images/lp-budget-200300.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_budget_range ul li:nth-child(4) label {
  background-image: url("../images/lp-budget-300.svg");
  background-position: 50% 15%;
  background-size: 80% 80%;
  background-repeat: no-repeat;
}
.hs_budget_range ul li:nth-child(4) label:hover {
  background-size: 82% 82%;
}

.hs_anything_else_you_want_us_to_know_ legend {
  margin-bottom: 20px !important;
}

#page-partners {
  background-image: url("../images/bg-cosmic-stars.svg");
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
#page-partners .partners-title {
  text-align: center;
}
#page-partners .partners-title h4 {
  opacity: 0.65;
}
#page-partners .partners-benefit {
  display: flex;
  text-align: left;
  padding: 0;
}
@media (max-width: 960px) {
  #page-partners .partners-benefit {
    display: block;
  }
}
#page-partners .partners-benefit.mesa {
  background: #23405b;
}
#page-partners .partners-benefit.mesa .picture {
  background-image: url("../images/partner-solution-mesa.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
#page-partners .partners-benefit.tracktor {
  background: #c05717;
}
#page-partners .partners-benefit.tracktor .picture {
  background-image: url("../images/partner-solution-tracktor.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#page-partners .partners-benefit .six.columns {
  padding: 5rem;
  width: 100%;
  margin: 0;
  color: #fff;
}
@media (min-width: 550px) {
  #page-partners .partners-benefit .six.columns {
    padding: 5rem;
  }
}
@media (min-width: 750px) {
  #page-partners .partners-benefit .six.columns {
    padding: 7rem;
    width: 50%;
  }
}
@media (min-width: 1000px) {
  #page-partners .partners-benefit .six.columns {
    padding: 7rem 10rem;
  }
}
@media (max-width: 749px) {
  #page-partners .partners-benefit .six.columns.picture {
    min-height: 300px;
  }
}
#page-partners .partners-benefit .solution {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 3px solid rgba(255, 255, 255, 0.25);
  padding-bottom: 5px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.75);
}
#page-partners .partners-benefit h2 {
  display: inline-block;
  width: 100%;
  margin: 0;
}
#page-partners .partners-benefit p {
  display: inline-block;
  width: 100%;
  margin: 0 0 2rem 0;
}
#page-partners .partners-benefit p:last-child {
  margin-bottom: 0;
}
#page-partners .partners-benefit ul {
  display: inline-block;
  width: 100%;
  margin: 0 0 2rem 2rem;
  padding: 0;
}
#page-partners .partners-benefit ul li {
  list-style: disc;
  margin: 0;
}
#page-partners .partners-logos {
  text-align: center;
  border: 0;
  padding-top: 0;
}
#page-partners .partners-logos .columns {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
#page-partners .partners-logos img {
  display: inline-block;
  max-width: 100%;
  max-height: 40px;
}
#page-partners .partners-cta {
  background: linear-gradient(to bottom, rgb(0, 42, 71) 0%, rgb(129, 192, 191) 100%);
  text-align: center;
  padding-bottom: 0;
  padding: 10rem 0;
}
#page-partners .partners-cta .container {
  max-width: 800px;
}
#page-partners .partners-cta form {
  display: inline-block;
  width: 100%;
  text-align: center;
}
#page-partners .partners-cta form fieldset {
  display: inline-block;
  text-align: left;
  width: 100%;
  max-width: 500px;
  margin-top: 30px;
  margin-bottom: 0;
}
#page-partners .partners-cta form fieldset .row {
  display: inline-block;
  width: 100%;
  margin-bottom: 1.5rem;
}
#page-partners .partners-cta form fieldset .row label {
  font-family: freight-sans-pro, sans-serif, sans-serif;
  margin-bottom: 0.25rem;
}
#page-partners .partners-cta form fieldset .row ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#page-partners .partners-cta form fieldset .row ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#page-partners .partners-cta form fieldset .row ::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
#page-partners .partners-cta form fieldset textarea {
  min-height: 100px;
}
#page-partners .partners-cta form .cta,
#page-partners .partners-cta form .message {
  text-align: center;
}

#page-newsletter {
  background-image: url("../images/bg-cosmic-stars.svg");
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
#page-newsletter .newsletter-title {
  text-align: center;
}
#page-newsletter .newsletter-title h4 {
  opacity: 0.65;
}
#page-newsletter .newsletter-resource {
  display: flex;
  padding: 0;
}
#page-newsletter .newsletter-resource.nan {
  background-color: #5E8E3E;
}
#page-newsletter .newsletter-resource.nan span {
  color: #fbf7ed;
}
#page-newsletter .newsletter-resource.nan span svg path {
  fill: #fbf7ed;
}
#page-newsletter .newsletter-resource.compass {
  background-color: #002a47;
}
#page-newsletter .newsletter-resource.compass span {
  color: #81c0bf;
}
#page-newsletter .newsletter-resource.compass span svg path {
  fill: #81c0bf;
}
@media (max-width: 960px) {
  #page-newsletter .newsletter-resource {
    flex-direction: column;
  }
}
#page-newsletter .newsletter-resource .six.columns {
  padding: 5rem;
  padding-bottom: 0;
  width: 100%;
  margin: 0;
  color: #fff;
}
@media (min-width: 550px) {
  #page-newsletter .newsletter-resource .six.columns {
    padding: 5rem;
    padding-bottom: 0;
  }
}
@media (min-width: 750px) {
  #page-newsletter .newsletter-resource .six.columns {
    padding: 7rem;
    padding-bottom: 0;
    width: 50%;
  }
}
@media (min-width: 1000px) {
  #page-newsletter .newsletter-resource .six.columns {
    padding: 7rem 10rem;
    padding-bottom: 0;
  }
}
@media (max-width: 749px) {
  #page-newsletter .newsletter-resource .six.columns.picture {
    min-height: 300px;
  }
}
#page-newsletter .newsletter-resource .six.columns.sample {
  min-height: 320px;
  max-height: 320px;
  overflow: hidden;
}
#page-newsletter .newsletter-resource .six.columns.sample::-webkit-scrollbar {
  display: none;
}
@media (max-width: 960px) {
  #page-newsletter .newsletter-resource .six.columns.sample {
    order: 2;
    padding-top: 0;
  }
}
#page-newsletter .newsletter-resource .six.columns.sample img {
  display: inline-block;
  width: 100%;
  margin-bottom: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
#page-newsletter .newsletter-resource span {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
}
#page-newsletter .newsletter-resource span svg {
  width: 100%;
  max-width: 20px;
  margin-right: 10px;
}
#page-newsletter .newsletter-cta {
  background: linear-gradient(to bottom, rgb(0, 42, 71) 0%, rgb(129, 192, 191) 100%);
  text-align: center;
  padding-bottom: 0;
  padding: 10rem 0;
}
#page-newsletter .newsletter-cta .container {
  max-width: 800px;
}

#newsletter {
  max-width: 450px;
  margin: 0 auto;
}
#newsletter input[type=email] {
  margin-bottom: 2rem;
}
#newsletter input[type=email]::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#newsletter input[type=email]::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
#newsletter input[type=email]::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}