@charset "UTF-8";
.styleguide__color-box {
  width: 150px;
  height: 150px;
  padding: 10px;
  font-size: 12px;
}
.styleguide__color-box .label {
  margin-bottom: 20px;
  padding-top: 10px;
  font-weight: bold;
}
.styleguide__color-box .rgb-code {
  font-weight: bold;
}
.styleguide__color-box .rgb-code .rgb-value {
  font-weight: normal;
}
.styleguide__color-box .hex-code {
  font-weight: bold;
}
.styleguide__color-box .hex-code .hex-value {
  font-weight: normal;
}
.styleguide__color-box.blue {
  background-color: #1a236b;
  color: #fff;
}
.styleguide__color-box.blue .label:before {
  content: "headline";
}
.styleguide__color-box.blue .rgb-value:before {
  content: "26/35/107";
}
.styleguide__color-box.blue .hex-value:before {
  content: "#1A236B";
}
.styleguide__color-box.purple {
  background-color: #5952f9;
  color: #fff;
}
.styleguide__color-box.purple .label:before {
  content: "link";
}
.styleguide__color-box.purple .rgb-value:before {
  content: "89/82/249";
}
.styleguide__color-box.purple .hex-value:before {
  content: "#5952F9";
}
.styleguide__color-box.black {
  background-color: #141414;
  color: #fff;
}
.styleguide__color-box.black .label:before {
  content: "black";
}
.styleguide__color-box.black .rgb-value:before {
  content: "20/20/20";
}
.styleguide__color-box.black .hex-value:before {
  content: "#141414";
}
.styleguide__color-box.gray {
  background-color: #646464;
  color: #fff;
}
.styleguide__color-box.gray .label:before {
  content: "gray";
}
.styleguide__color-box.gray .rgb-value:before {
  content: "100/100/100";
}
.styleguide__color-box.gray .hex-value:before {
  content: "#646464";
}
.styleguide__color-box.gray-50 {
  background-color: #8a9dba;
  color: #141414;
}
.styleguide__color-box.gray-50 .label:before {
  content: "gray-50";
}
.styleguide__color-box.gray-50 .rgb-value:before {
  content: "138/157/186";
}
.styleguide__color-box.gray-50 .hex-value:before {
  content: "#8A9DBA";
}
.styleguide__color-box.gray-70 {
  background-color: #b9c1d6;
  color: #141414;
}
.styleguide__color-box.gray-70 .label:before {
  content: "gray-70";
}
.styleguide__color-box.gray-70 .rgb-value:before {
  content: "185/193/214";
}
.styleguide__color-box.gray-70 .hex-value:before {
  content: "#B9C1D6";
}
.styleguide__color-box.gray-90 {
  background-color: #e3e5ec;
  color: #141414;
}
.styleguide__color-box.gray-90 .label:before {
  content: "gray-90";
}
.styleguide__color-box.gray-90 .rgb-value:before {
  content: "227/229/236";
}
.styleguide__color-box.gray-90 .hex-value:before {
  content: "#E3E5EC";
}
.styleguide__color-box.gray-100 {
  background-color: #f7f8fa;
  color: #141414;
}
.styleguide__color-box.gray-100 .label:before {
  content: "gray-100";
}
.styleguide__color-box.gray-100 .rgb-value:before {
  content: "247/248/250";
}
.styleguide__color-box.gray-100 .hex-value:before {
  content: "#F7F8FA";
}

.styleguide__typography {
  min-height: 100%;
  color: #666975;
  font-family: Arial, sans-serif;
  text-align: left;
}
.styleguide__typography .section-title {
  margin-bottom: 20px;
  color: #0a0f33;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
}
.styleguide__typography .subtitle {
  display: inline-block;
  color: #8a9dba;
  font-size: 10px;
  text-transform: uppercase;
}
.styleguide__typography .warning-subtitle {
  display: inline-block;
  color: #f64656;
  font-size: 10px;
  text-transform: uppercase;
}
.styleguide__typography .warning-text {
  color: #f64656;
}
.styleguide__typography .font-face {
  margin-bottom: 30px;
  font-size: 40px;
  line-height: 50px;
}
.styleguide__typography .font-face-styles {
  display: block;
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 50px;
}
.styleguide__typography .font-face-styles .regular-underlined {
  display: inline-block;
  text-decoration: underline;
}
.styleguide__typography .font-face-styles .italic {
  display: block;
  font-style: italic;
}
.styleguide__typography .font-face-styles .bold {
  display: block;
  font-weight: bold;
}
.styleguide__typography .font-face-styles .bold-italic {
  display: block;
  font-style: italic;
  font-weight: bold;
}
.styleguide__typography .font-sizes {
  margin-bottom: 30px;
}
.styleguide__typography .font-sizes .px-60 {
  margin-bottom: 10px;
  font-size: 60px;
  line-height: 65px;
}
.styleguide__typography .font-sizes .px-40 {
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 50px;
}
.styleguide__typography .font-sizes .px-32 {
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 40px;
}
.styleguide__typography .font-sizes .px-26 {
  margin-bottom: 10px;
  font-size: 26px;
  line-height: 30px;
}
.styleguide__typography .font-sizes .px-20 {
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 25px;
}
.styleguide__typography .font-sizes .px-16 {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 20px;
}
.styleguide__typography .font-sizes .px-14 {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 15px;
}
.styleguide__typography .font-sizes .px-12 {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 15px;
}
.styleguide__typography .wrapper {
  display: flex;
}
.styleguide__typography .wrapper .left {
  width: 460px;
  height: 239px;
  padding: 10px;
  float: left;
}
.styleguide__typography .wrapper .right {
  width: 460px;
  height: 239px;
  padding: 10px;
  float: right;
}
.styleguide__typography .font-alignment {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
}
.styleguide__typography .font-alignment .text-centered {
  text-align: center;
}
.styleguide__typography .font-styles {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 25px;
}
.styleguide__typography .font-styles .underline {
  display: block;
  text-decoration: underline;
}
.styleguide__typography .font-styles .italic {
  display: block;
  font-style: italic;
}
.styleguide__typography .font-styles .bold {
  display: block;
  font-weight: bold;
}
.styleguide__typography .font-styles .upper-case {
  text-transform: uppercase;
}
.styleguide__typography .font-styles .lower-case {
  text-transform: lowercase;
}
.styleguide__typography .font-styles .title-case {
  text-transform: capitalize;
}

.styleguide__margin-box {
  width: 300px;
  background-color: rgba(255, 0, 255, 0.2);
  color: #f0f;
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
}
.styleguide__margin-box .left-line {
  width: 5px;
  height: inherit;
  float: left;
  background-color: #f0f;
}
.styleguide__margin-box .bold {
  font-weight: bold;
}
.styleguide__margin-box .regular {
  font-weight: normal;
}
.styleguide__margin-box .regular:before {
  content: "margin-bottom:";
}
.styleguide__margin-box.px-60 {
  height: 60px;
  margin-bottom: 25px;
  line-height: 60px;
}
.styleguide__margin-box.px-60 .bold:before {
  content: "60px";
}
.styleguide__margin-box.px-50 {
  height: 50px;
  margin-bottom: 25px;
  line-height: 50px;
}
.styleguide__margin-box.px-50 .bold:before {
  content: "50px";
}
.styleguide__margin-box.px-40 {
  height: 40px;
  margin-bottom: 25px;
  line-height: 40px;
}
.styleguide__margin-box.px-40 .bold:before {
  content: "40px";
}
.styleguide__margin-box.px-30 {
  height: 30px;
  margin-bottom: 25px;
  line-height: 30px;
}
.styleguide__margin-box.px-30 .bold:before {
  content: "30px";
}
.styleguide__margin-box.px-25 {
  height: 25px;
  margin-bottom: 25px;
  line-height: 25px;
}
.styleguide__margin-box.px-25 .bold:before {
  content: "25px";
}
.styleguide__margin-box.px-20 {
  height: 20px;
  margin-bottom: 25px;
  line-height: 20px;
}
.styleguide__margin-box.px-20 .bold:before {
  content: "20px";
}
.styleguide__margin-box.px-15 {
  height: 15px;
  margin-bottom: 25px;
  line-height: 15px;
}
.styleguide__margin-box.px-15 .bold:before {
  content: "15px";
}
.styleguide__margin-box.px-10 {
  height: 10px;
  margin-bottom: 25px;
  line-height: 10px;
}
.styleguide__margin-box.px-10 .bold:before {
  content: "10px";
}
.styleguide__margin-box.px-5 {
  height: 5px;
  margin-bottom: 25px;
  line-height: 5px;
}
.styleguide__margin-box.px-5 .bold:before {
  content: "5px";
}

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
input, textarea, button, select,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, dialog {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  position: relative;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* our custom css reset styles */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a {
  outline: none;
}

input:matches([type=button], [type=submit], [type=reset]) {
  -webkit-appearance: none;
  appearance: none;
}

@font-face {
  font-family: "doberman";
  font-style: normal;
  font-weight: normal;
  src: url("../../fonts/doberman.eot?jicskx");
  src: url("../../fonts/doberman.eot?jicskx#iefix") format("embedded-opentype"), url("../../fonts/doberman.ttf?jicskx") format("truetype"), url("../../fonts/doberman.woff?jicskx") format("woff"), url("../../fonts/doberman.svg?jicskx#doberman") format("svg");
}
[class^=icon-]:before, [class^=icon-]:after,
[class*=" icon-"]:before,
[class*=" icon-"]:after {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "doberman" !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  speak: none;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-help:before {
  content: "\e907";
}

.icon-edit:before {
  content: "\e908";
}

.icon-delete:before {
  content: "\e900";
}

.icon-check:before {
  content: "\e901";
}

.icon-dot:before {
  content: "\e903";
}

.icon-email-sync:before {
  content: "\e904";
}

.icon-clock:before {
  content: "\e902";
}

.icon-credit-card-locked:before {
  content: "\e905";
}

.icon-lock-shield:before {
  content: "\e906";
}

.icon-upload-clipboard:before {
  content: "\e909";
}

.icon-star-full:before {
  content: "\e9d9";
}

.icon-radio-unchecked:before {
  content: "\ea56";
}

.icon-play:before {
  content: "▶";
}

.icon-capture:before {
  content: "\e90a";
}

.icon-engage:before {
  content: "\e90b";
}

.icon-location:before {
  content: "\e90c";
}

.icon-error:before {
  content: "\e60e";
}

.icon-more-active:before {
  content: "\e629";
}

.icon-caution:before {
  content: "\e90d";
}

.icon-triangle:before {
  content: "\e90e";
}

.icon-close:before {
  content: "\e801";
}

.icon-less:before {
  content: "\e627";
}

.icon-checkmark:before {
  content: "\e90f";
}

.icon-cross:before {
  content: "🎔";
}

.icon-email:before {
  font-size: 14px;
  content: "\e910";
}

.icon-link:before {
  content: "\e911";
}

.icon-whatsapp:before {
  content: "\e912";
}

.icon-twitter:before {
  content: "\e913";
}

.icon-sms:before {
  content: "\e914";
}

.icon-fb-messenger:before {
  content: "\e915";
}

.icon-facebook:before {
  content: "\e916";
}

.icon-close-btn:before {
  content: "\e917";
}

.icon-confirm:before {
  content: "\e918";
}

.icon-payment:before {
  content: "\e919";
}

.icon-alert:before {
  content: "\e91a";
}

.icon-map-pin:before {
  content: "\e91b";
}

.icon-more:before {
  content: "\e91c";
}

.icon-helper:before {
  content: "\e91d";
}

.icon-hamburger:before {
  content: "\e91e";
}

.icon-hamburger-2:before {
  content: "\e93f";
}

.icon-account:before {
  content: "\e91f";
}

.icon-added:before {
  content: "\e920";
}

.icon-announce:before {
  content: "\e921";
}

.icon-customer-purchase:before {
  content: "\e922";
}

.icon-facebook-outline:before {
  content: "\e924";
}

.icon-feedback:before {
  content: "\e925";
}

.icon-lock:before {
  content: "\e926";
}

.icon-mobile:before {
  content: "\e927";
}

.icon-new-customer:before {
  content: "\e928";
}

.icon-offer:before {
  font-size: 20px;
  content: "\e929";
}

.icon-recurring:before {
  content: "\e92a";
}

.icon-referrals:before {
  content: "\e92b";
}

.icon-review:before {
  content: "\e92c";
}

.icon-schedule-sync:before {
  content: "\e92d";
}

.icon-schedule:before {
  content: "\e92e";
}

.icon-search:before {
  content: "\e92f";
}

.icon-sitelink-in:before {
  content: "\e930";
}

.icon-sitelink-out:before {
  content: "\e931";
}

.icon-transactions:before {
  content: "\e932";
}

.icon-star:before {
  content: "\e923";
}

.icon-phone-call:before {
  content: "\e933";
}

.icon-send:before {
  content: "\e61c";
}

.icon-edit2:before {
  content: "\e934";
}

.icon-alarm:before {
  content: "\e935";
}

.icon-purchase:before {
  content: "\e936";
}

.icon-win-back:before {
  content: "\e937";
}

.icon-minus:before {
  content: "\ea0b";
}

.icon-customers:before {
  content: "\e938";
}

.icon-arrow-down:before {
  font-size: 10px;
  content: "\e629";
}

.icon-news:before {
  content: "\e93a";
}

.icon-estimate-amount:before {
  content: "\e93b";
}

.icon-estimate-change:before {
  content: "\e93c";
}

.icon-estimate-create:before {
  content: "\e93d";
}

.icon-job-amount:before {
  content: "\e93e";
}

.icon-job-change:before {
  content: "\e940";
}

.icon-job-create:before {
  content: "\e941";
}

.icon-job-time:before {
  content: "\e942";
}

/*
Button prototype

Inheritors:
- merchant.base.button
- consumer.base.button
 */
.button {
  width: 100%;
  min-height: 45px;
  padding: 10px 0px;
  border: 0;
  border-radius: 2px;
  outline: none;
  background: #5952f9;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.primary-ghost.button {
  border: 2px solid #5952f9;
  background: transparent;
}

/*
Buttons

The default styling for all button types

.primary-ghost - a ghostly button

Markup:
<button class="button {{modifier_class}}">Call To Action</button>

Styleguide consumer.base.button
 */
.button {
  background: #1a236b;
  font-weight: bold;
}
.button.primary-ghost {
  border-color: #1a236b;
  color: #1a236b;
}

.button-as-link {
  width: auto;
  min-height: 0;
  background: transparent;
  color: #5952f9;
  text-decoration: underline;
  cursor: pointer;
}
.button-as-link.warning {
  color: #f64656;
}
.button-as-link.button-as-link-smaller {
  font-size: 14px;
}
.button-as-link.button-as-link-small {
  font-size: 12px;
}
.button-as-link.button-as-link-standalone {
  margin-bottom: 5px;
}

.link-as-button {
  display: inline-block;
  width: 100%;
  height: 45px;
  max-height: 45px;
  padding: 14px 0;
  border-radius: 25px;
  background: #5952f9;
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.link-as-button:hover {
  background: #504AE0;
  color: white;
}
.link-as-button:active {
  background: #4742C7;
}
.link-as-button.warning {
  background: #f64656;
}
.link-as-button.warning:hover {
  background: #DB3E4D;
}
.link-as-button.warning:active {
  background: #C23744;
}
.link-as-button.secondary {
  background: #b9c1d6;
  color: #666975;
}
.link-as-button.secondary:hover {
  background: #CCCDD4;
}
.link-as-button.secondary:active {
  background: #B3B5BA;
}
.link-as-button.standout {
  background: #20cd98;
}
.link-as-button.standout:hover, .link-as-button.standout.loading {
  background: #20cd98;
}
.link-as-button.primary-ghost {
  padding: 13px 0;
  border: 2px solid #5952f9;
  background: transparent;
  color: #5952f9;
}
.link-as-button.mc-button {
  border-radius: 3px;
}

@media only screen and (min-width: 640px) {
  .link-as-button {
    font-size: 14px;
  }
  .link-as-button.primary-ghost {
    padding: 8px 0 9px;
  }
  .link-as-button.primary-ghost:hover {
    border-color: #5952f9;
    background: #5952f9;
    color: white;
  }
  .link-as-button.mc-button-wide {
    width: 185px;
  }
}
body {
  min-height: 100%;
  color: #666975;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
}

h1,
h2,
h3 {
  margin-bottom: 30px;
  font-size: 26px;
  line-height: 30px;
}

h4 {
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 25px;
}

p {
  margin-bottom: 20px;
}

.warning-text {
  color: #f64656;
}

small {
  font-size: 14px;
  line-height: 20px;
}

.tiny-text {
  font-size: 12px;
  line-height: 15px;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a {
  color: #5952f9;
}

@media only screen and (min-width: 480px) {
  h1 {
    font-size: 40px;
    line-height: 50px;
  }
  h2 {
    font-size: 32px;
    line-height: 40px;
  }
}
.l-content {
  display: block;
  margin: 40px 30px 0;
  padding-bottom: 120px;
  text-align: center;
}
.l-content.l-heading-content {
  padding-bottom: 0;
}
.l-content.l-content-constrained {
  margin: 0 30px;
}
.l-content.l-content-no-side-margin-on-mobile {
  margin: 40px 0 0;
}
.l-content.l-content-no-top-margin-on-mobile {
  margin-top: 0;
}
.l-content.l-content-no-bottom-padding-on-mobile {
  padding-bottom: 0;
}

@media only screen and (min-width: 640px) {
  .l-content {
    margin: 40px 40px 0;
  }
  .l-content.l-content-constrained {
    margin: 0 40px;
  }
  .l-content.l-content-no-side-margin-on-mobile {
    margin: 40px 40px 0;
  }
  .l-content.l-content-no-top-margin-on-mobile {
    margin-top: inherit;
  }
  .l-content.l-content-no-bottom-padding-on-mobile {
    padding-bottom: 120px;
  }
}
@media only screen and (min-width: 1020px) {
  .l-content.l-content-constrained {
    width: 960px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1440px) {
  .l-content {
    width: 1360px;
    margin: 40px auto 0;
  }
  .l-content.l-content-constrained {
    margin: 0 auto;
  }
  .l-content.l-content-no-side-margin-on-mobile {
    margin: 40px auto 0;
  }
}
/*
One-column Content Layout

.l-one-column-content-wide - reserves a wider range of columns for desktop screen width

Markup:
<div class="l-one-column-content {{modifier_class}} styleguides__layouts">
  <div class="column-content first-content" style="border: 1px solid black;">Column Content</div>
  <div class="column-content second-content" style="border: 1px solid black;">Column Content</div>
</div>

Styleguide shared.layout.oneColumnContent
 */
.l-one-column-content {
  display: grid;
}
@media only screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .l-one-column-content {
    display: -ms-grid;
  }
}
.l-one-column-content {
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  -ms-grid-rows: auto;
}
.l-one-column-content .column-content {
  grid-column: 1/span 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 23;
}
@media only screen and (min-width: 720px) {
  .l-one-column-content .column-content {
    grid-column: 3/span 8;
    -ms-grid-column: 5;
    -ms-grid-column-span: 15;
  }
  .l-one-column-content-wide .column-content {
    grid-column: 1/span 12;
    -ms-grid-column: 1;
    -ms-grid-column-span: 23;
  }
}
@media only screen and (min-width: 1020px) {
  .l-one-column-content .column-content {
    grid-column: 4/span 6;
    -ms-grid-column: 7;
    -ms-grid-column-span: 11;
  }
  .l-one-column-content-wide .column-content {
    grid-column: 2/span 10;
    -ms-grid-column: 3;
    -ms-grid-column-span: 19;
  }
}

.styleguides__layouts {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.styleguides__layouts .first-content {
  height: 420px;
  margin-bottom: 20px;
  background-color: rgba(255, 0, 255, 0.2);
  color: #f0f;
}
.styleguides__layouts .second-content {
  height: 180px;
  background-color: rgba(32, 205, 153, 0.2);
  color: #20cd98;
}

.l-two-column-content {
  display: grid;
}
@media only screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .l-two-column-content {
    display: -ms-grid;
  }
}
.l-two-column-content {
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 20px;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
  -ms-grid-rows: auto;
}
.l-two-column-content .content-heading {
  grid-column: 1/span 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 23;
  margin: 0 30px;
}
.l-two-column-content .main-content,
.l-two-column-content .sidebar {
  grid-column: 1/span 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 23;
}

@media only screen and (min-width: 640px) {
  .l-two-column-content .content-heading {
    margin: 0;
  }
  .l-two-column-content .main-content {
    grid-column: 1/span 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 13;
  }
  .l-two-column-content .sidebar {
    grid-column: 8/span 5;
    -ms-grid-column: 15;
    -ms-grid-column-span: 9;
  }
}
@media only screen and (min-width: 1280px) {
  .l-two-column-content .main-content {
    grid-column: 2/span 6;
    -ms-grid-column: 3;
    -ms-grid-column-span: 11;
  }
  .l-two-column-content .sidebar {
    grid-column: 8/span 4;
    -ms-grid-column: 15;
    -ms-grid-column-span: 7;
  }
  .l-two-column-content.l-two-column-content-unconstrained .main-content {
    grid-column: 1/span 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 13;
  }
  .l-two-column-content.l-two-column-content-unconstrained .sidebar {
    grid-column: 8/span 5;
    -ms-grid-column: 15;
    -ms-grid-column-span: 9;
  }
}
@media only screen and (min-width: 1440px) {
  .l-two-column-content .main-content {
    grid-column: 3/span 5;
    -ms-grid-column: 5;
    -ms-grid-column-span: 9;
  }
  .l-two-column-content.l-two-column-content-unconstrained .main-content {
    grid-column: 1/span 7;
    -ms-grid-column: 1;
    -ms-grid-column-span: 13;
  }
  .l-two-column-content.l-two-column-content-unconstrained .sidebar {
    grid-column: 8/span 5;
    -ms-grid-column: 15;
    -ms-grid-column-span: 9;
  }
}
/*
Business Info

Markup:
<div class="business-info">
  <div class="business-map" style="background-image: url(/images/styleguide/google-map-static.png)"></div>
  <div class="business-details">
    <h5 class="details-section-heading">Contact:</h5>
    <div class="details-section-body">
      <div class="business-address">
        DC Roofing & Exteriors<br>
        1785 Walnut Lane, Greenwood, IN 46143
      </div>
      <div>
        <a href="#">(812) 344-5750</a><br>
        <a href="#">https://www.dcroofingexterior.com</a>
      </div>
    </div>
    <h5 class="details-section-heading">Business Description:</h5>
    <div class="details-section-body">
      We pride our company on reliability, great communication, integrity and quality work. We are experts in our trade and will do our best to keep you as educated as we can on your particular task or project. We look forward to earning your business! Call us today!
    </div>
    <h5 class="details-section-heading">Business Hours:</h5>
    <div class="details-section-body">
      <table>
        <tr>
          <td class="business-day-column">Monday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Tuesday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Wednesday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Thursday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Friday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Saturday</td>
          <td>12:00am - 11:59pm</td>
        </tr>
        <tr>
          <td class="business-day-column">Sunday</td>
          <td>Closed</td>
        </tr>
      </table>
    </div>
    <h5 class="details-section-heading">Social Media:</h5>
    <div class="details-section-body">
      <div class="business-social-media">
        <a class="social-media-account" href="#">
          <div class="social-media-logo-wrapper">
            <img class="google-logo" src="/images/google-logo.svg">
          </div>
          <div class="social-media-name">Google</div>
        </a>
        <a class="social-media-account" href="#">
          <div class="social-media-logo-wrapper">
            <img src="/images/facebook-logo.svg">
          </div>
          <div class="social-media-name">Facebook</div>
        </a>
        <a class="social-media-account" href="#">
          <div class="social-media-logo-wrapper">
            <img src="/images/yelp-logo.svg">
          </div>
          <div class="social-media-name">Yelp</div>
        </a>
      </div>
    </div>
  </div>
</div>

Styleguide consumer.modules.businessInfo
 */
.business-info {
  width: 100%;
  border: 1px solid #e3e5ec;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}
.business-info .business-map {
  height: 235px;
  border-bottom: 1px solid #e3e5ec;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.business-info .business-details {
  padding: 30px;
  background-color: #f7f8fa;
}
.business-info .details-section-heading {
  margin-bottom: 10px;
  color: #666975;
  font-weight: bold;
}
.business-info .details-section-body {
  margin-bottom: 20px;
}
.business-info .business-address {
  margin-bottom: 10px;
}
.business-info .business-day-column {
  width: 90px;
}
.business-info .business-social-media {
  display: flex;
}
.business-info .social-media-account {
  display: flex;
  margin-right: 20px;
}
.business-info .google-logo {
  width: 35px;
  height: 30px;
  padding-right: 10px;
}
.business-info .social-media-name {
  display: none;
}
@media only screen and (min-width: 1020px) {
  .business-info .business-day-column {
    width: 120px;
  }
  .business-info .social-media-account {
    margin-right: 25px;
  }
  .business-info .social-media-name {
    display: flex;
    align-items: center;
  }
}

/*
Footer

Markup:
<footer class="footer">
  <div class="footer-business-name-and-address">
    <div class="footer-business-name">Vandam Yoga</div>
    <div class="footer-business-address">275 7th Avenue, Suite 1701, New York, NY 10001</div>
  </div>
  <div class="footer-business-phone">(855) 321-4900</div>
</footer>

Styleguide consumer.modules.footer
 */
.footer {
  height: 250px;
  padding-top: 35px;
  border-top: 1px solid #b9c1d6;
  background-color: #f7f8fa;
  color: #8a9dba;
  text-align: center;
}
.footer .footer-business-name-and-address {
  margin-bottom: 25px;
}
.footer .footer-business-name {
  color: #1a236b;
  font-weight: bold;
}
.footer .footer-business-address {
  font-size: 12px;
  line-height: 20px;
}
.footer .footer-business-phone {
  margin-bottom: 35px;
  color: #1a236b;
  font-size: 20px;
  line-height: 20px;
}

/*
Header

Markup:
<header class="header">
  <img class="header-business-logo" src="/images/max_40x44.png">
  <div>Vandam Yoga</div>
</header>

Styleguide consumer.modules.header
 */
.header {
  min-height: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #b9c1d6;
  text-align: center;
}
.header .header-business-logo {
  height: 80px;
  margin-bottom: 20px;
}

/*
Powered by Signpost

Markup:
<div class="powered-by-signpost {{modifier_class}}">
  <span class="powered-by-text">Powered by</span>
  <a class="sp-demo-link" href='#'>
    <img class="sp-brand-logo" src="/images/glaze/company-logo-dark-blue.svg">
  </a>
</div>

Styleguide consumer.modules.poweredBySignpost
 */
.powered-by-signpost {
  display: flex;
  justify-content: center;
}
.powered-by-signpost .powered-by-text {
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 15px;
}
.powered-by-signpost .sp-demo-link {
  height: 0;
}
.powered-by-signpost .sp-brand-logo {
  height: 15px;
  margin-left: 3px;
}

/*
Message Details

  Display for campaign message details on landing pages

Markup:
  <div class="message-details">
    <div class="message-tagline">Campaign's tagline</div>
    <div class="message-title">10% off your next service!</div>
    <div class="message-redemption-instructions">Please show this offer before checkout.</div>
    <div class="message-phone-goal">
      <div class="message-phone-goal-number">(000) 000-0000</div>
      <div class="message-phone-goal-cta-text">Call for more information.</div>
    </div>
    <img class="message-image" src="/images/wizard4.jpg">
    <div class="message-body">
      Whatever marketing copy they have here, we always list the number and CTA individually.
    </div>
    <div class="message-expiration"><small>Expires 09/01/2019</small></div>
    <div class="message-fine-print"><small>Limited to one per person. Appointments or reservations may be required and are subject to availability. Must show this offer before purchase. Cannot be combined with any other offers or discounts. No cash value or other redemption value. Other restrictions may apply. Call for details.</small></div>
  </div>

Styleguide consumer.modules.messageDetails
 */
.message-details {
  margin-top: 20px;
  margin-bottom: 40px;
  padding: 20px;
  text-align: center;
  box-shadow: 0px 0px 20px 0px rgba(10, 15, 51, 0.2);
}
.message-details .message-tagline {
  margin-bottom: 35px;
  padding-top: 20px;
  padding-bottom: 35px;
  border-bottom: 2px dashed #e3e5ec;
  color: #1a236b;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
}
.message-details .message-title {
  margin-bottom: 25px;
  padding-top: 20px;
  color: #1a236b;
  font-size: 40px;
  font-weight: bold;
  line-height: 50px;
}
.message-details .message-tagline ~ .message-title {
  padding-top: 0;
}
.message-details .message-image {
  width: 100%;
  margin-bottom: 20px;
}
.message-details .message-body {
  margin-bottom: 35px;
  font-size: 20px;
  line-height: 30px;
  white-space: pre-wrap;
}
.message-details .message-phone-goal {
  margin-bottom: 30px;
  font-size: 20px;
}
.message-details .message-phone-goal-number {
  margin-top: 10px;
  margin-bottom: 20px;
  color: #1a236b;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}
.message-details .message-redemption-instructions {
  margin-bottom: 40px;
  color: #1a236b;
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
  white-space: pre-wrap;
}
.message-details .message-expiration {
  margin-bottom: 20px;
  padding-top: 30px;
  border-top: 1px solid #e3e5ec;
}
.message-details .message-fine-print {
  margin-bottom: 55px;
  padding: 10px;
  font-size: 12px;
}
@media only screen and (min-width: 1020px) {
  .message-details .message-image {
    max-width: 530px;
    padding: 0 20px;
  }
}