.Social-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
}

/**
 * Default icons
 */

.Social-item.twitter {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/twitter-navy-1263d41397.svg);
}

.Social-item.linkedin {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/linkedin-navy-885aa22379.svg);
}

.Social-item.mail {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mail-navy-bd547f78c8.svg);
}

/**
 * Inverse icons
 */

.Social-navigation--inverse .Social-item.twitter {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/twitter-white-b6cd9c8e52.svg);
}

.Social-navigation--inverse .Social-item.linkedin {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/linkedin-white-9c1af3779f.svg);
}

.Social-navigation--inverse .Social-item.mail {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mail-white-eca65c5479.svg);
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Tile {
  height: 193px;
  box-sizing: border-box;
  overflow: hidden;
}

.Tile[inactive] .Tile-link {
  background: #FBFAF9;
}

.Tile-link {
  height: 100%;
  width: 100%;
  display: block;
  padding: 25px;
  text-align: center;
  text-decoration: none;
  position: relative;
  border: 1px solid #E4EDF5;
  background: white;
  border-radius: 4px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
  box-sizing: border-box;
  transform: translateZ(0);
}

.Tile-link:hover {
  border-color: #49B882;
}

.Tile-tags {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  position: absolute;
  font-size: 14px;
  right: 5px;
  left: 5px;
  top: 5px;
}

.Tile-tag {
  -webkit-font-smoothing: antialiased;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #F6F6F6;
  text-transform: lowercase;
  padding: 1px 5px 2px 6px;
  border-radius: 2px;
  color: #00386C;
}

.Tile-tag[color="blue"] {
  background-color: #65a4ef;
  color: white;
}

.Tile-tag[color="black"] {
  background-color: black;
  color: white;
}

.Tile-inner {
  transition: all .2s ease-in-out;
  white-space: nowrap;
}

.Tile-link:hover .Tile-inner {
  transform: translateY(-12px);
}

.Tile-link:hover .Tile-action {
  opacity: 1;
}

.Tile-link:hover .Tile-group {
  transform: translateY(-10px);
}

.Tile-group {
  transition: all .2s ease-in-out;
}

.Tile-icon {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  height: 95px;
  margin-bottom: 10px;
  transition: all .2s ease-in-out;
}

.Tile-logo {
  width: 100%;
  max-width: 120px;
  max-height: 50px;
}

.Tile-title {
  font-size: 16px;
  color: #00386C;
  height: 24px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Tile-title[small] {
  font-size: 14px;
}

.Tile-subtitle {
  font-size: 14px;
  line-height: 16px;
  color: rgba(0, 56, 108, 0.5);
}

.Tile-action {
  -webkit-font-smoothing: antialiased;
  transition: all .2s ease-in-out;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  color: #49B882;
  line-height: 37px;
  font-size: 14px;
  opacity: 0;
  text-transform: capitalize;
}

.Tile-status {
  font-size: 16px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  margin-top: 15px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

#progress-indicator {
  height: 4px;
  left: 0;
  position: fixed;
  top: 73px;
  width: 100%;
  z-index: 9;
}

.ScrollProgressBar {
  background: #49B882;
  height: 4px;
  transition: width 0.1s ease-out;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.VideoPlayer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 10;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
}

.VideoWrapper {
  height: auto;
  max-width: 800px;
  width: 100%;
  position: relative;
}

.VideoClose {
  background-color: rgba(255, 255, 255, .2);
  border-radius: 50%;
  cursor: pointer;
  height: 36px;
  position: absolute;
  left: 0;
  text-decoration: none;
  top: 0;
  transform: translateY(-150%) translateX(-50%);
  width: 36px;
  z-index: 10;
}

.VideoClose:hover {
  background-color: rgba(255, 255, 255, .5);
}

.VideoWrapper iframe {
  width: 100% !important;
}

@media screen and (min-width: 40em) {
  .VideoClose {
    transform: translateY(-100%) translateX(-100%);
  }
}

@media (max-width: 800px) {
  .VideoWrapper {
    width: 80%;
  }

  .VideoWrapper iframe {
    height: auto !important;
  }
}

.Customers-video img {
  display: block;
  margin: 0 auto;
}

.Customers-video-subtitle {
  color: #98A0AB;
  font-size: 16px;
  line-height: 18px;
  margin: 15px 0 60px;
  text-align: center;
}
.Social-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

/**
 * Default icons
 */

.Social-item.twitter {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/twitter-navy-1263d41397.svg);
}

.Social-item.linkedin {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/linkedin-navy-885aa22379.svg);
}

.Social-item.mail {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mail-navy-bd547f78c8.svg);
}

/**
 * Inverse icons
 */

.Social-navigation--inverse .Social-item.twitter {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/twitter-white-b6cd9c8e52.svg);
}

.Social-navigation--inverse .Social-item.linkedin {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/linkedin-white-9c1af3779f.svg);
}

.Social-navigation--inverse .Social-item.mail {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mail-white-eca65c5479.svg);
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/* Styles */

.HamburgerMenu {
  width: 30px;
  height: 24px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.HamburgerMenu-top,
.HamburgerMenu-middle,
.HamburgerMenu-bottom {
  display: block;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 6px;
  animation-duration: 400ms;
  position: relative;
  transform-origin: 15px 2px;
  animation-fill-mode: forwards;
  width: 30px;
  background-color: #49B882;
}

.HamburgerMenu-top:hover,
.HamburgerMenu-middle:hover,
.HamburgerMenu-bottom:hover {
  background-color: #54D194;
}

/*
 TOP
 --------------------------------------------------------------------------------
*/

@keyframes HamburgerMenu-top-active {
  0% {
    transform: translateY(0);
  }
  49% {
    transform: translateY(10px);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

@keyframes HamburgerMenu-top-inactive {
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
    opacity: 1;
  }
  49% {
    transform: translateY(10px);
    opacity: 0;
  }
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
}

.HamburgerMenu.inactive .HamburgerMenu-top {
  animation-name: HamburgerMenu-top-inactive;
}

.HamburgerMenu.active .HamburgerMenu-top {
  animation-name: HamburgerMenu-top-active;
}

/*
 Middle
 --------------------------------------------------------------------------------
*/

@keyframes HamburgerMenu-middle-active {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes HamburgerMenu-middle-inactive {
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(0);
  }
  0% {
    transform: rotate(-45deg);
  }
}

.HamburgerMenu-middle {
  z-index: 2;
}

.HamburgerMenu.inactive .HamburgerMenu-middle {
  animation-name: HamburgerMenu-middle-inactive;
}

.HamburgerMenu.active .HamburgerMenu-middle {
  animation-name: HamburgerMenu-middle-active;
}

/*
 Bottom
 --------------------------------------------------------------------------------
*/

@keyframes HamburgerMenu-bottom-active {
  0% {
    transform: translateY(0);
  }
  49% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-10px) rotate(45deg);
  }
}

@keyframes HamburgerMenu-bottom-inactive {
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  49% {
    transform: translateY(-10px);
  }
  0% {
    transform: translateY(-10px) rotate(45deg);
  }
}

.HamburgerMenu-bottom {
  z-index: 1;
}

.HamburgerMenu.inactive .HamburgerMenu-bottom {
  animation-name: HamburgerMenu-bottom-inactive;
}

.HamburgerMenu.active > .HamburgerMenu-bottom {
  animation-name: HamburgerMenu-bottom-active;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Drawer {
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  top: 72px;
  transition: opacity .1s ease-in-out;
  z-index: 1;
  transition: all 200ms ease-in-out;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
}

.Drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.Drawer-close {
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  z-index: 10;
}

.Drawer-body {
  max-width: 800px;
}

@media screen and (min-width: 70em) {
  .Drawer-body {
    transition: all 300ms ease-out;
    transition-delay: 250ms;
    transform: translateY(-10px);
    opacity: 0;
  }
  .Drawer.open .Drawer-body {
    transform: translateY(0);
    opacity: 1;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.NavigationContainer {
  padding-top: 73px;
  position: relative;
}

.Navigation.floating {
  box-shadow: 0 0 35px 0 rgba(0, 0, 0, .09);
}

.Navigation {
  background: white;
  box-shadow: none;
  box-sizing: border-box;
  transition: box-shadow .25s ease-in-out, padding .25s ease-in-out;
  z-index: 1000;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}

.Navigation-logo {
  display: inline-block;
}

.Navigation-logo a {
  display: block;
  height: 26px;
  width: 125px;
  margin-top: -2px;
  text-indent: -9999px;
}

.Navigation-body {
  position: relative;
  z-index: 2;
}

.Navigation-link {
  display: inline-block;
  line-height: 40px;
  white-space: nowrap;
  font-size: 16px;
  color: #49B882;
  font-weight: 500;
}

.Navigation-dropdown {
  display: inline-block;
  position: relative;
}

.Navigation-dropdown:focus {
  outline: none;
}

.Navigation-links > .Navigation-dropdown,
.Navigation-links > .Navigation-link {
  padding-right: 8px;
  padding-left: 8px;
}

@media (min-width: 1140px) {
  .Navigation-links > .Navigation-dropdown,
  .Navigation-links > .Navigation-link {
    padding-right: 16px;
    padding-left: 16px;
  }
}

.Navigation-menu {
  position: absolute;
  top: 50px;
  left: 50%;
  z-index: -1;
  background: white;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px) translateX(-50%) scale(0.9);
  transition: all 300ms cubic-bezier(0.325, 0.090, 0.000, 1.280);
  border: 1px solid #E4EDF5;
  box-shadow: 0 0 20px 0 rgba(178, 194, 212, .3);
}

/* Notch at the top of the dropdown */

.Navigation-menu:before {
  content: '';
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 3px;
  background: red;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(-50%) scale(1);
  top: 5px;
  margin-left: -3px;
  background: white;
  box-shadow: 0 0 10px 0 rgba(178, 194, 212, .17);
  border: 1px solid #E4EDF5;
}

/* Mask for the notch to hide the border */

.Navigation-menu:after {
  content: '';
  display: block;
  height: 30px;
  width: 50px;
  background: white;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
}

.Navigation-menu.open {
  opacity: 1;
  z-index: 10;
  visibility: visible;
  transform: translateY(0) translateX(-50%);
}

.Navigation-menu [data-icon] {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.Navigation-menu [data-icon]:before {
  content: '';
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-right: 4px;
  background-position: left center;
  background-repeat: no-repeat;
}

.Navigation-menu [data-icon="android"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/android-a9069a0006.svg);
}

.Navigation-menu [data-icon="apple"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/apple-7413ff5cbc.svg);
}

.Navigation-menu [data-icon="arrows"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/arrows-52533f006d.svg);
}

.Navigation-menu [data-icon="blog"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/blog-c5d511a72d.svg);
}

.Navigation-menu [data-icon="code"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/code-0096786795.svg);
}

.Navigation-menu [data-icon="company"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/company-938fffd4e1.svg);
}

.Navigation-menu [data-icon="docs"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/docs-003a14dd65.svg);
}

.Navigation-menu [data-icon="github"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/github-cc2732d009.svg);
}

.Navigation-menu [data-icon="grid"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/grid-feec537916.svg);
}

.Navigation-menu [data-icon="integrations"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/integrations-182f2a79d6.svg);
}

.Navigation-menu [data-icon="javascript"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/javascript-476f28fb77.svg);
}

.Navigation-menu [data-icon="marketplace"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/marketplace-09416bf54e.svg);
}

.Navigation-menu [data-icon="mobile"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mobile-cec9ad5d31.svg);
  background-size: 70%;
}

.Navigation-menu [data-icon="more"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/dots-77aab488d2.svg);
}

.Navigation-menu [data-icon="platform"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/platform-124764e709.svg);
}

.Navigation-menu [data-icon="retail"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/retail-f3381d09a2.svg);
}

.Navigation-menu [data-icon="service"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/service-c17dca07b4.svg);
}

.Navigation-menu [data-icon="software"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/software-1fcd74f51a.svg);
}

.Navigation-menu [data-icon="sources"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/sources-3002ba9160.svg);
}

.Navigation-menu [data-icon="star"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/star-b28947d3f7.svg);
}

.Navigation-menu [data-icon="support"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/support-6b36549e38.svg);
}

.Navigation-menu [data-icon="team"]:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/team-51ddf97dc1.svg);
}

.Navigation-menuBody {
  padding: 16px 32px 16px;
  position: relative;
  z-index: 2;
}

.Navigation-menuFooter {
  background: #F9FAFC;
  padding: 16px 32px;
  border-radius: 0 0 7px 7px;
}

.Navigation-menuSubtitle {
  display: block;
  font-weight: 600;
  color: #425E78;
  margin-bottom: 8px;
  margin-top: 16px;
}

.Navigation-menuItem {
  text-decoration: none;
  color: inherit;
  display: block;
  margin-left: -32px;
  margin-right: -32px;
  padding: 4px 32px;
}

.Navigation-menuItem:not([data-transparent]):hover {
  background: #F2FFF9;
  color: inherit;
}

.Navigation-menuItemText {
  color: #49B882;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  line-height: 25px;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.Navigation-menuItem[data-arrow] {
  padding: 8px 32px;
}

.Navigation-menuItemText[data-arrow] {
  font-weight: 600;
}

.Navigation-menuItemText[data-arrow]:after {
  content: '';
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-left: 8px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/arrow-849caad912.svg);
  background-position: left center;
  background-repeat: no-repeat;
  transition: all 100ms linear;
}

.Navigation-menuItem:hover .Navigation-menuItemText {
  color: #54D194;
  text-decoration: none;
}

.Navigation-menuItem:hover .Navigation-menuItemText:after {
  transform: translateX(2px);
}

.Navigation-menuItemDescription {
  display: block;
}

/** Navigation back button for customer landing pages */

.Navigation-back {
  max-height: 56px;
}

.Navigation-back a {
  color: #00386C;
  height: 26px;
}

/* Back arrow */

.Navigation-back:before {
  content: "";
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/arrow-8a3aa15eb3.svg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
}
/*! TACHYONS v4.6.1 | http://tachyons.io */
/*
 *
 *      ________            ______
 *      ___  __/_____ _________  /______  ______________________
 *      __  /  _  __ `/  ___/_  __ \_  / / /  __ \_  __ \_  ___/
 *      _  /   / /_/ // /__ _  / / /  /_/ // /_/ /  / / /(__  )
 *      /_/    \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
 *                                 /____/
 *
 *    TABLE OF CONTENTS
 *
 *    1. External Library Includes
 *       - Normalize.css | http://normalize.css.github.io
 *    2. Tachyons Modules
 *    3. Variables
 *       - Media Queries
 *       - Colors
 *    4. Debugging
 *       - Debug all
 *       - Debug children
 *
 */
/* External Library Includes */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ }
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body { margin: 0; }
/**
 * Add the correct display in IE 9-.
 */
article, aside, footer, header, nav, section { display: block; }
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 { font-size: 2em; margin: .67em 0; }
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption, figure, main {/* 1 */ display: block; }
/**
 * Add the correct margin in IE 8.
 */
figure { margin: 1em 40px; }
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active, a:hover { outline-width: 0; }
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b, strong { font-weight: inherit; }
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b, strong { font-weight: bolder; }
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }
/**
 * Add the correct font style in Android 4.3-.
 */
dfn { font-style: italic; }
/**
 * Add the correct background and color in IE 9-.
 */
mark { background-color: #ff0; color: #000; }
/**
 * Add the correct font size in all browsers.
 */
small { font-size: 80%; }
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio, video { display: inline-block; }
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) { display: none; height: 0; }
/**
 * Remove the border on images inside links in IE 10-.
 */
img { border-style: none; }
/**
 * Hide the overflow in IE.
 */
svg:not(:root) { overflow: hidden; }
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button, input, optgroup, select, textarea { font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button, input {/* 1 */ overflow: visible; }
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button, select {/* 1 */ text-transform: none; }
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button, html [type="button"], /* 1 */
[type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: .35em .625em .75em; }
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea { overflow: auto; }
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button { height: auto; }
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, /* 1 */
menu { display: block; }
/*
 * Add the correct display in all browsers.
 */
summary { display: list-item; }
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas { display: inline-block; }
/**
 * Add the correct display in IE.
 */
template { display: none; }
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] { display: none; }
/* Modules */
/*
 
  BOX SIZING

*/
html, body, div, article, section, main, footer, header, form, fieldset, legend,
pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, textarea, table,
td, th, tr, input[type="email"], input[type="number"], input[type="password"],
input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
/*

   ASPECT RATIOS

*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
 * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
 * Make sure there are no height and width attributes on the embedded media.
 * Adapted from: https://github.com/suitcss/components-flex-embed
 *
 * Example:
 *
 * <div class="aspect-ratio aspect-ratio--16x9">
 *  <iframe class="aspect-ratio--object"></iframe>
 * </div>
 *
 * */
.aspect-ratio { height: 0; position: relative; }
.aspect-ratio--16x9 { padding-bottom: 56.25%; }
.aspect-ratio--9x16 { padding-bottom: 177.77%; }
.aspect-ratio--4x3 { padding-bottom: 75%; }
.aspect-ratio--3x4 { padding-bottom: 133.33%; }
.aspect-ratio--6x4 { padding-bottom: 66.6%; }
.aspect-ratio--4x6 { padding-bottom: 150%; }
.aspect-ratio--8x5 { padding-bottom: 62.5%; }
.aspect-ratio--5x8 { padding-bottom: 160%; }
.aspect-ratio--7x5 { padding-bottom: 71.42%; }
.aspect-ratio--5x7 { padding-bottom: 140%; }
.aspect-ratio--1x1 { padding-bottom: 100%; }
.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
/*

   IMAGES
   Docs: http://tachyons.io/docs/elements/images/

*/
/* Responsive images! */
img { max-width: 100%; }
/*

   BACKGROUND SIZE
   Docs: http://tachyons.io/docs/themes/background-size/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/*
  Often used in combination with background image set as an inline style
  on an html element.
*/
.cover { background-size: cover !important; }
.contain { background-size: contain !important; }
/*

    BACKGROUND POSITION

    Base:
    bg = background

    Modifiers:
    -center = center center
    -top = top center
    -right = center right
    -bottom = bottom center
    -left = center left

    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large

 */
.bg-center { background-repeat: no-repeat; background-position: center center; }
.bg-top { background-repeat: no-repeat; background-position: top center; }
.bg-right { background-repeat: no-repeat; background-position: center right; }
.bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
.bg-left { background-repeat: no-repeat; background-position: center left; }
/*

   OUTLINES

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.outline { outline: 1px solid; }
.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
/*

    BORDERS
    Docs: http://tachyons.io/docs/themes/borders/

    Base:
      b = border

    Modifiers:
      a = all
      t = top
      r = right
      b = bottom
      l = left
      n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ba { border-style: solid; border-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.br { border-right-style: solid; border-right-width: 1px; }
.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
/*

   BORDER COLORS
   Docs: http://tachyons.io/docs/themes/borders/

   Border colors can be used to extend the base
   border classes ba,bt,bb,br,bl found in the _borders.css file.

   The base border class by default will set the color of the border
   to that of the current text color. These classes are for the cases
   where you desire for the text and border colors to be different.

   Base:
     b = border

   Modifiers:
   --color-name = each color variable name is also a border color name

*/
.b--black { border-color: #000; }
.b--near-black { border-color: #111; }
.b--dark-gray { border-color: #333; }
.b--mid-gray { border-color: #555; }
.b--gray { border-color: #777; }
.b--silver { border-color: #999; }
.b--light-silver { border-color: #aaa; }
.b--moon-gray { border-color: #ccc; }
.b--light-gray { border-color: #eee; }
.b--near-white { border-color: #f4f4f4; }
.b--white { border-color: #fff; }
.b--white-90 { border-color: rgba(255, 255, 255, .9); }
.b--white-80 { border-color: rgba(255, 255, 255, .8); }
.b--white-70 { border-color: rgba(255, 255, 255, .7); }
.b--white-60 { border-color: rgba(255, 255, 255, .6); }
.b--white-50 { border-color: rgba(255, 255, 255, .5); }
.b--white-40 { border-color: rgba(255, 255, 255, .4); }
.b--white-30 { border-color: rgba(255, 255, 255, .3); }
.b--white-20 { border-color: rgba(255, 255, 255, .2); }
.b--white-10 { border-color: rgba(255, 255, 255, .1); }
.b--white-05 { border-color: rgba(255, 255, 255, .05); }
.b--white-025 { border-color: rgba(255, 255, 255, .025); }
.b--white-0125 { border-color: rgba(255, 255, 255, .0125); }
.b--black-90 { border-color: rgba(0, 0, 0, .9); }
.b--black-80 { border-color: rgba(0, 0, 0, .8); }
.b--black-70 { border-color: rgba(0, 0, 0, .7); }
.b--black-60 { border-color: rgba(0, 0, 0, .6); }
.b--black-50 { border-color: rgba(0, 0, 0, .5); }
.b--black-40 { border-color: rgba(0, 0, 0, .4); }
.b--black-30 { border-color: rgba(0, 0, 0, .3); }
.b--black-20 { border-color: rgba(0, 0, 0, .2); }
.b--black-10 { border-color: rgba(0, 0, 0, .1); }
.b--black-05 { border-color: rgba(0, 0, 0, .05); }
.b--black-025 { border-color: rgba(0, 0, 0, .025); }
.b--black-0125 { border-color: rgba(0, 0, 0, .0125); }
.b--dark-red { border-color: #e7040f; }
.b--red { border-color: #ff4136; }
.b--light-red { border-color: #ff725c; }
.b--orange { border-color: #ff6300; }
.b--gold { border-color: #ffb700; }
.b--yellow { border-color: #ffd700; }
.b--light-yellow { border-color: #fbf1a9; }
.b--purple { border-color: #5e2ca5; }
.b--light-purple { border-color: #a463f2; }
.b--dark-pink { border-color: #d5008f; }
.b--hot-pink { border-color: #ff41b4; }
.b--pink { border-color: #ff80cc; }
.b--light-pink { border-color: #ffa3d7; }
.b--dark-green { border-color: #137752; }
.b--green { border-color: #19a974; }
.b--light-green { border-color: #9eebcf; }
.b--navy { border-color: #001b44; }
.b--dark-blue { border-color: #00449e; }
.b--blue { border-color: #357edd; }
.b--light-blue { border-color: #96ccff; }
.b--lightest-blue { border-color: #cdecff; }
.b--washed-blue { border-color: #f6fffe; }
.b--washed-green { border-color: #e8fdf5; }
.b--washed-yellow { border-color: #fffceb; }
.b--washed-red { border-color: #ffdfdf; }
.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
/*

   BORDER RADIUS
   Docs: http://tachyons.io/docs/themes/border-radius/

   Base:
     br   = border-radius

   Modifiers:
     0    = 0/none
     1    = 1st step in scale
     2    = 2nd step in scale
     3    = 3rd step in scale
     4    = 4th step in scale

   Literal values:
     -100 = 100%
     -pill = 9999px

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.br0 { border-radius: 0; }
.br1 { border-radius: .125rem; }
.br2 { border-radius: .25rem; }
.br3 { border-radius: .5rem; }
.br4 { border-radius: 1rem; }
.br-100 { border-radius: 100%; }
.br-pill { border-radius: 9999px; }
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/*

   BORDER STYLES
   Docs: http://tachyons.io/docs/themes/borders/

   Depends on base border module in _borders.css

   Base:
     b = border-style

   Modifiers:
     --none   = none
     --dotted = dotted
     --dashed = dashed
     --solid  = solid

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

 */
.b--dotted { border-style: dotted; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }
/*

   BORDER WIDTHS
   Docs: http://tachyons.io/docs/themes/borders/

   Base:
     bw = border-width

   Modifiers:
     0 = 0 width border
     1 = 1st step in border-width scale
     2 = 2nd step in border-width scale
     3 = 3rd step in border-width scale
     4 = 4th step in border-width scale
     5 = 5th step in border-width scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.bw0 { border-width: 0; }
.bw1 { border-width: .125rem; }
.bw2 { border-width: .25rem; }
.bw3 { border-width: .5rem; }
.bw4 { border-width: 1rem; }
.bw5 { border-width: 2rem; }
/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
/*

  BOX-SHADOW
  Docs: http://tachyons.io/docs/themes/box-shadow/

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

 */
.shadow-1 { box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2); }
.shadow-2 { box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
.shadow-4 { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2); }
.shadow-5 { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2); }
/*

   CODE

*/
.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
/*

   COORDINATES
   Docs: http://tachyons.io/docs/layout/position/

   Use in combination with the position module.

   Base:
     top
     bottom
     right
     left

   Modifiers:
     -0  = literal value 0
     -1  = literal value 1
     -2  = literal value 2
     --1 = literal value -1
     --2 = literal value -2

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.left-1 { left: 1rem; }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
.top--1 { top: -1rem; }
.right--1 { right: -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1 { left: -1rem; }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2 { left: -2rem; }
.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; }
/*

   CLEARFIX
   http://tachyons.io/docs/layout/clearfix/

*/
/* Nicolas Gallaghers Clearfix solution
   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }
/*

   DISPLAY
   Docs: http://tachyons.io/docs/layout/display

   Base:
    d = display

   Modifiers:
    n     = none
    b     = block
    ib    = inline-block
    it    = inline-table
    t     = table
    tc    = table-cell
    t-row          = table-row
    t-columm       = table-column
    t-column-group = table-column-group

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.dn { display: none; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
.dit { display: inline-table; }
.dt { display: table; }
.dtc { display: table-cell; }
.dt-row { display: table-row; }
.dt-row-group { display: table-row-group; }
.dt-column { display: table-column; }
.dt-column-group { display: table-column-group; }
/*
  This will set table to full width and then
  all cells will be equal width
*/
.dt--fixed { table-layout: fixed; width: 100%; }
/*

  FLEXBOX

  Media Query Extensions:
   -ns = not-small
   -m  = medium
   -l  = large

*/
.flex { display: -ms-flexbox; display: flex; }
.inline-flex { display: -ms-inline-flexbox; display: inline-flex; }
/* 1. Fix for Chrome 44 bug.
 * https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
.flex-none { -ms-flex: none; flex: none; }
.flex-column { -ms-flex-direction: column; flex-direction: column; }
.flex-row { -ms-flex-direction: row; flex-direction: row; }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.items-start { -ms-flex-align: start; align-items: flex-start; }
.items-end { -ms-flex-align: end; align-items: flex-end; }
.items-center { -ms-flex-align: center; align-items: center; }
.items-baseline { -ms-flex-align: baseline; align-items: baseline; }
.items-stretch { -ms-flex-align: stretch; align-items: stretch; }
.self-start { -ms-flex-item-align: start; align-self: flex-start; }
.self-end { -ms-flex-item-align: end; align-self: flex-end; }
.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; }
.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
.justify-start { -ms-flex-pack: start; justify-content: flex-start; }
.justify-end { -ms-flex-pack: end; justify-content: flex-end; }
.justify-center { -ms-flex-pack: center; justify-content: center; }
.justify-between { -ms-flex-pack: justify; justify-content: space-between; }
.justify-around { -ms-flex-pack: distribute; justify-content: space-around; }
.content-start { -ms-flex-line-pack: start; align-content: flex-start; }
.content-end { -ms-flex-line-pack: end; align-content: flex-end; }
.content-center { -ms-flex-line-pack: center; align-content: center; }
.content-between { -ms-flex-line-pack: justify; align-content: space-between; }
.content-around { -ms-flex-line-pack: distribute; align-content: space-around; }
.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; }
.order-0 { -ms-flex-order: 0; order: 0; }
.order-1 { -ms-flex-order: 1; order: 1; }
.order-2 { -ms-flex-order: 2; order: 2; }
.order-3 { -ms-flex-order: 3; order: 3; }
.order-4 { -ms-flex-order: 4; order: 4; }
.order-5 { -ms-flex-order: 5; order: 5; }
.order-6 { -ms-flex-order: 6; order: 6; }
.order-7 { -ms-flex-order: 7; order: 7; }
.order-8 { -ms-flex-order: 8; order: 8; }
.order-last { -ms-flex-order: 99999; order: 99999; }
/*

   FLOATS
   http://tachyons.io/docs/layout/floats/

   1. Floated elements are automatically rendered as block level elements.
      Setting floats to display inline will fix the double margin bug in
      ie6. You know... just in case.

   2. Don't forget to clearfix your floats with .cf

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
/*

   FONT FAMILY GROUPS
   Docs: http://tachyons.io/docs/typography/font-family/

*/
.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }
.serif { font-family: georgia, times, serif; }
.system-sans-serif { font-family: sans-serif; }
.system-serif { font-family: serif; }
/* Monospaced Typefaces (for code) */
/* From http://cssfontstack.com */
code, .code { font-family: Consolas, monaco, monospace; }
.courier { font-family: 'Courier Next', courier, monospace; }
/* Sans-Serif Typefaces */
.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
.avenir { font-family: 'avenir next', avenir, sans-serif; }
/* Serif Typefaces */
.athelas { font-family: athelas, georgia, serif; }
.georgia { font-family: georgia, serif; }
.times { font-family: times, serif; }
.bodoni { font-family: "Bodoni MT", serif; }
.calisto { font-family: "Calisto MT", serif; }
.garamond { font-family: garamond, serif; }
.baskerville { font-family: baskerville, serif; }
/*

   FONT STYLE
   Docs: http://tachyons.io/docs/typography/font-style/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.i { font-style: italic; }
.fs-normal { font-style: normal; }
/*

   FONT WEIGHT
   Docs: http://tachyons.io/docs/typography/font-weight/

   Base
     fw = font-weight

   Modifiers:
     1 = literal value 100
     2 = literal value 200
     3 = literal value 300
     4 = literal value 400
     5 = literal value 500
     6 = literal value 600
     7 = literal value 700
     8 = literal value 800
     9 = literal value 900

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.normal { font-weight: normal; }
.b { font-weight: bold; }
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
/*

   FORMS
   
*/
.input-reset { -webkit-appearance: none; -moz-appearance: none; }
.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
/*

   HEIGHTS
   Docs: http://tachyons.io/docs/layout/heights/

   Base:
     h = height
     min-h = min-height
     min-vh = min-height vertical screen height
     vh = vertical screen height

   Modifiers
     1 = 1st step in height scale
     2 = 2nd step in height scale
     3 = 3rd step in height scale
     4 = 4th step in height scale
     5 = 5th step in height scale

     -25   = literal value 25%
     -50   = literal value 50%
     -75   = literal value 75%
     -100  = literal value 100%

     -auto = string value of auto
     -inherit = string value of inherit

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Height Scale */
.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }
/* Height Percentages - Based off of height of parent */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }
/* Screen Height Percentage */
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }
.min-vh-100 { min-height: 100vh; }
/* String Properties */
.h-auto { height: auto; }
.h-inherit { height: inherit; }
/*

   LETTER SPACING
   Docs: http://tachyons.io/docs/typography/tracking/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.tracked { letter-spacing: .1em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega { letter-spacing: .25em; }
/*

   LINE HEIGHT / LEADING
   Docs: http://tachyons.io/docs/typography/line-height

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.lh-solid { line-height: 1; }
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }
/*

   LINKS
   Docs: http://tachyons.io/docs/elements/links/

*/
.link { text-decoration: none; transition: color .15s ease-in; }
.link:link, .link:visited { transition: color .15s ease-in; }
.link:hover { transition: color .15s ease-in; }
.link:active { transition: color .15s ease-in; }
.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
/*

   LISTS
   http://tachyons.io/docs/elements/lists/

*/
.list { list-style-type: none; }
/*

   MAX WIDTHS
   Docs: http://tachyons.io/docs/layout/max-widths/

   Base:
     mw = max-width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale
     6 = 6st step in width scale
     7 = 7nd step in width scale
     8 = 8rd step in width scale
     9 = 9th step in width scale

     -100 = literal value 100%

     -none  = string value none


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Max Width Percentages */
.mw-100 { max-width: 100%; }
/* Max Width Scale */
.mw1 { max-width: 1rem; }
.mw2 { max-width: 2rem; }
.mw3 { max-width: 4rem; }
.mw4 { max-width: 8rem; }
.mw5 { max-width: 16rem; }
.mw6 { max-width: 32rem; }
.mw7 { max-width: 48rem; }
.mw8 { max-width: 64rem; }
.mw9 { max-width: 96rem; }
/* Max Width String Properties */
.mw-none { max-width: none; }
/*

   WIDTHS
   Docs: http://tachyons.io/docs/layout/widths/

   Base:
     w = width

   Modifiers
     1 = 1st step in width scale
     2 = 2nd step in width scale
     3 = 3rd step in width scale
     4 = 4th step in width scale
     5 = 5th step in width scale

     -10  = literal value 10%
     -20  = literal value 20%
     -25  = literal value 25%
     -30  = literal value 30%
     -33  = literal value 33%
     -34  = literal value 34%
     -40  = literal value 40%
     -50  = literal value 50%
     -60  = literal value 60%
     -70  = literal value 70%
     -75  = literal value 75%
     -80  = literal value 80%
     -90  = literal value 90%
     -100 = literal value 100%

     -third      = 100% / 3 (Not supported in opera mini or IE8)
     -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
     -auto       = string value auto


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Width Scale */
.w1 { width: 1rem; }
.w2 { width: 2rem; }
.w3 { width: 4rem; }
.w4 { width: 8rem; }
.w5 { width: 16rem; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.w-third { width: 33.33333%; }
.w-two-thirds { width: 66.66667%; }
.w-auto { width: auto; }
/*

    OVERFLOW

    Media Query Extensions:
      -ns = not-small
      -m  = medium
      -l  = large

 */
.overflow-visible { overflow: visible; }
.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: scroll; }
.overflow-auto { overflow: auto; }
.overflow-x-visible { overflow-x: visible; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-visible { overflow-y: visible; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }
/*

   POSITIONING
   Docs: http://tachyons.io/docs/layout/position/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
/*

    OPACITY
    Docs: http://tachyons.io/docs/themes/opacity/

*/
.o-100 { opacity: 1; }
.o-90 { opacity: .9; }
.o-80 { opacity: .8; }
.o-70 { opacity: .7; }
.o-60 { opacity: .6; }
.o-50 { opacity: .5; }
.o-40 { opacity: .4; }
.o-30 { opacity: .3; }
.o-20 { opacity: .2; }
.o-10 { opacity: .1; }
.o-05 { opacity: .05; }
.o-025 { opacity: .025; }
.o-0 { opacity: 0; }
/*

   ROTATIONS

*/
.rotate-45 { transform: rotate( 45deg ); }
.rotate-90 { transform: rotate( 90deg ); }
.rotate-135 { transform: rotate( 135deg ); }
.rotate-180 { transform: rotate( 180deg ); }
.rotate-225 { transform: rotate( 225deg ); }
.rotate-270 { transform: rotate( 270deg ); }
.rotate-315 { transform: rotate( 315deg ); }
/*

   SKINS
   Docs: http://tachyons.io/docs/themes/skins/

   Classes for setting foreground and background colors on elements.
   If you haven't declared a border color, but set border on an element, it will 
   be set to the current text color. 

*/
/* Text colors */
.black-90 { color: rgba(0, 0, 0, .9); }
.black-80 { color: rgba(0, 0, 0, .8); }
.black-70 { color: rgba(0, 0, 0, .7); }
.black-60 { color: rgba(0, 0, 0, .6); }
.black-50 { color: rgba(0, 0, 0, .5); }
.black-40 { color: rgba(0, 0, 0, .4); }
.black-30 { color: rgba(0, 0, 0, .3); }
.black-20 { color: rgba(0, 0, 0, .2); }
.black-10 { color: rgba(0, 0, 0, .1); }
.black-05 { color: rgba(0, 0, 0, .05); }
.white-90 { color: rgba(255, 255, 255, .9); }
.white-80 { color: rgba(255, 255, 255, .8); }
.white-70 { color: rgba(255, 255, 255, .7); }
.white-60 { color: rgba(255, 255, 255, .6); }
.white-50 { color: rgba(255, 255, 255, .5); }
.white-40 { color: rgba(255, 255, 255, .4); }
.white-30 { color: rgba(255, 255, 255, .3); }
.white-20 { color: rgba(255, 255, 255, .2); }
.white-10 { color: rgba(255, 255, 255, .1); }
.black { color: #000; }
.near-black { color: #111; }
.dark-gray { color: #333; }
.mid-gray { color: #555; }
.gray { color: #777; }
.silver { color: #999; }
.light-silver { color: #aaa; }
.moon-gray { color: #ccc; }
.light-gray { color: #eee; }
.near-white { color: #f4f4f4; }
.white { color: #fff; }
.dark-red { color: #e7040f; }
.red { color: #ff4136; }
.light-red { color: #ff725c; }
.orange { color: #ff6300; }
.gold { color: #ffb700; }
.yellow { color: #ffd700; }
.light-yellow { color: #fbf1a9; }
.purple { color: #5e2ca5; }
.light-purple { color: #a463f2; }
.dark-pink { color: #d5008f; }
.hot-pink { color: #ff41b4; }
.pink { color: #ff80cc; }
.light-pink { color: #ffa3d7; }
.dark-green { color: #137752; }
.green { color: #19a974; }
.light-green { color: #9eebcf; }
.navy { color: #001b44; }
.dark-blue { color: #00449e; }
.blue { color: #357edd; }
.light-blue { color: #96ccff; }
.lightest-blue { color: #cdecff; }
.washed-blue { color: #f6fffe; }
.washed-green { color: #e8fdf5; }
.washed-yellow { color: #fffceb; }
.washed-red { color: #ffdfdf; }
.color-inherit { color: inherit; }
.bg-black-90 { background-color: rgba(0, 0, 0, .9); }
.bg-black-80 { background-color: rgba(0, 0, 0, .8); }
.bg-black-70 { background-color: rgba(0, 0, 0, .7); }
.bg-black-60 { background-color: rgba(0, 0, 0, .6); }
.bg-black-50 { background-color: rgba(0, 0, 0, .5); }
.bg-black-40 { background-color: rgba(0, 0, 0, .4); }
.bg-black-30 { background-color: rgba(0, 0, 0, .3); }
.bg-black-20 { background-color: rgba(0, 0, 0, .2); }
.bg-black-10 { background-color: rgba(0, 0, 0, .1); }
.bg-black-05 { background-color: rgba(0, 0, 0, .05); }
.bg-white-90 { background-color: rgba(255, 255, 255, .9); }
.bg-white-80 { background-color: rgba(255, 255, 255, .8); }
.bg-white-70 { background-color: rgba(255, 255, 255, .7); }
.bg-white-60 { background-color: rgba(255, 255, 255, .6); }
.bg-white-50 { background-color: rgba(255, 255, 255, .5); }
.bg-white-40 { background-color: rgba(255, 255, 255, .4); }
.bg-white-30 { background-color: rgba(255, 255, 255, .3); }
.bg-white-20 { background-color: rgba(255, 255, 255, .2); }
.bg-white-10 { background-color: rgba(255, 255, 255, .1); }
/* Background colors */
.bg-black { background-color: #000; }
.bg-near-black { background-color: #111; }
.bg-dark-gray { background-color: #333; }
.bg-mid-gray { background-color: #555; }
.bg-gray { background-color: #777; }
.bg-silver { background-color: #999; }
.bg-light-silver { background-color: #aaa; }
.bg-moon-gray { background-color: #ccc; }
.bg-light-gray { background-color: #eee; }
.bg-near-white { background-color: #f4f4f4; }
.bg-white { background-color: #fff; }
.bg-transparent { background-color: transparent; }
.bg-dark-red { background-color: #e7040f; }
.bg-red { background-color: #ff4136; }
.bg-light-red { background-color: #ff725c; }
.bg-orange { background-color: #ff6300; }
.bg-gold { background-color: #ffb700; }
.bg-yellow { background-color: #ffd700; }
.bg-light-yellow { background-color: #fbf1a9; }
.bg-purple { background-color: #5e2ca5; }
.bg-light-purple { background-color: #a463f2; }
.bg-dark-pink { background-color: #d5008f; }
.bg-hot-pink { background-color: #ff41b4; }
.bg-pink { background-color: #ff80cc; }
.bg-light-pink { background-color: #ffa3d7; }
.bg-dark-green { background-color: #137752; }
.bg-green { background-color: #19a974; }
.bg-light-green { background-color: #9eebcf; }
.bg-navy { background-color: #001b44; }
.bg-dark-blue { background-color: #00449e; }
.bg-blue { background-color: #357edd; }
.bg-light-blue { background-color: #96ccff; }
.bg-lightest-blue { background-color: #cdecff; }
.bg-washed-blue { background-color: #f6fffe; }
.bg-washed-green { background-color: #e8fdf5; }
.bg-washed-yellow { background-color: #fffceb; }
.bg-washed-red { background-color: #ffdfdf; }
.bg-inherit { background-color: inherit; }
/* 
  
   SKINS:PSEUDO

   Customize the color of an element when
   it is focused or hovered over.
 
 */
.hover-black:hover { color: #000; }
.hover-black:focus { color: #000; }
.hover-near-black:hover { color: #111; }
.hover-near-black:focus { color: #111; }
.hover-dark-gray:hover { color: #333; }
.hover-dark-gray:focus { color: #333; }
.hover-mid-gray:hover { color: #555; }
.hover-mid-gray:focus { color: #555; }
.hover-gray:hover { color: #777; }
.hover-gray:focus { color: #777; }
.hover-silver:hover { color: #999; }
.hover-silver:focus { color: #999; }
.hover-light-silver:hover { color: #aaa; }
.hover-light-silver:focus { color: #aaa; }
.hover-moon-gray:hover { color: #ccc; }
.hover-moon-gray:focus { color: #ccc; }
.hover-light-gray:hover { color: #eee; }
.hover-light-gray:focus { color: #eee; }
.hover-near-white:hover { color: #f4f4f4; }
.hover-near-white:focus { color: #f4f4f4; }
.hover-white:hover { color: #fff; }
.hover-white:focus { color: #fff; }
.hover-black-90:hover { color: rgba(0, 0, 0, .9); }
.hover-black-90:focus { color: rgba(0, 0, 0, .9); }
.hover-black-80:hover { color: rgba(0, 0, 0, .8); }
.hover-black-80:focus { color: rgba(0, 0, 0, .8); }
.hover-black-70:hover { color: rgba(0, 0, 0, .7); }
.hover-black-70:focus { color: rgba(0, 0, 0, .7); }
.hover-black-60:hover { color: rgba(0, 0, 0, .6); }
.hover-black-60:focus { color: rgba(0, 0, 0, .6); }
.hover-black-50:hover { color: rgba(0, 0, 0, .5); }
.hover-black-50:focus { color: rgba(0, 0, 0, .5); }
.hover-black-40:hover { color: rgba(0, 0, 0, .4); }
.hover-black-40:focus { color: rgba(0, 0, 0, .4); }
.hover-black-30:hover { color: rgba(0, 0, 0, .3); }
.hover-black-30:focus { color: rgba(0, 0, 0, .3); }
.hover-black-20:hover { color: rgba(0, 0, 0, .2); }
.hover-black-20:focus { color: rgba(0, 0, 0, .2); }
.hover-black-10:hover { color: rgba(0, 0, 0, .1); }
.hover-black-10:focus { color: rgba(0, 0, 0, .1); }
.hover-white-90:hover { color: rgba(255, 255, 255, .9); }
.hover-white-90:focus { color: rgba(255, 255, 255, .9); }
.hover-white-80:hover { color: rgba(255, 255, 255, .8); }
.hover-white-80:focus { color: rgba(255, 255, 255, .8); }
.hover-white-70:hover { color: rgba(255, 255, 255, .7); }
.hover-white-70:focus { color: rgba(255, 255, 255, .7); }
.hover-white-60:hover { color: rgba(255, 255, 255, .6); }
.hover-white-60:focus { color: rgba(255, 255, 255, .6); }
.hover-white-50:hover { color: rgba(255, 255, 255, .5); }
.hover-white-50:focus { color: rgba(255, 255, 255, .5); }
.hover-white-40:hover { color: rgba(255, 255, 255, .4); }
.hover-white-40:focus { color: rgba(255, 255, 255, .4); }
.hover-white-30:hover { color: rgba(255, 255, 255, .3); }
.hover-white-30:focus { color: rgba(255, 255, 255, .3); }
.hover-white-20:hover { color: rgba(255, 255, 255, .2); }
.hover-white-20:focus { color: rgba(255, 255, 255, .2); }
.hover-white-10:hover { color: rgba(255, 255, 255, .1); }
.hover-white-10:focus { color: rgba(255, 255, 255, .1); }
.hover-inherit:hover, .hover-inherit:focus { color: inherit; }
.hover-bg-black:hover { background-color: #000; }
.hover-bg-black:focus { background-color: #000; }
.hover-bg-near-black:hover { background-color: #111; }
.hover-bg-near-black:focus { background-color: #111; }
.hover-bg-dark-gray:hover { background-color: #333; }
.hover-bg-dark-gray:focus { background-color: #333; }
.hover-bg-dark-gray:focus { background-color: #555; }
.hover-bg-mid-gray:hover { background-color: #555; }
.hover-bg-gray:hover { background-color: #777; }
.hover-bg-gray:focus { background-color: #777; }
.hover-bg-silver:hover { background-color: #999; }
.hover-bg-silver:focus { background-color: #999; }
.hover-bg-light-silver:hover { background-color: #aaa; }
.hover-bg-light-silver:focus { background-color: #aaa; }
.hover-bg-moon-gray:hover { background-color: #ccc; }
.hover-bg-moon-gray:focus { background-color: #ccc; }
.hover-bg-light-gray:hover { background-color: #eee; }
.hover-bg-light-gray:focus { background-color: #eee; }
.hover-bg-near-white:hover { background-color: #f4f4f4; }
.hover-bg-near-white:focus { background-color: #f4f4f4; }
.hover-bg-white:hover { background-color: #fff; }
.hover-bg-white:focus { background-color: #fff; }
.hover-bg-transparent:hover { background-color: transparent; }
.hover-bg-transparent:focus { background-color: transparent; }
.hover-bg-black-90:hover { background-color: rgba(0, 0, 0, .9); }
.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); }
.hover-bg-black-80:hover { background-color: rgba(0, 0, 0, .8); }
.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); }
.hover-bg-black-70:hover { background-color: rgba(0, 0, 0, .7); }
.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); }
.hover-bg-black-60:hover { background-color: rgba(0, 0, 0, .6); }
.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); }
.hover-bg-black-50:hover { background-color: rgba(0, 0, 0, .5); }
.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); }
.hover-bg-black-40:hover { background-color: rgba(0, 0, 0, .4); }
.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); }
.hover-bg-black-30:hover { background-color: rgba(0, 0, 0, .3); }
.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); }
.hover-bg-black-20:hover { background-color: rgba(0, 0, 0, .2); }
.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); }
.hover-bg-black-10:hover { background-color: rgba(0, 0, 0, .1); }
.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); }
.hover-bg-white-90:hover { background-color: rgba(255, 255, 255, .9); }
.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); }
.hover-bg-white-80:hover { background-color: rgba(255, 255, 255, .8); }
.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); }
.hover-bg-white-70:hover { background-color: rgba(255, 255, 255, .7); }
.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); }
.hover-bg-white-60:hover { background-color: rgba(255, 255, 255, .6); }
.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); }
.hover-bg-white-50:hover { background-color: rgba(255, 255, 255, .5); }
.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); }
.hover-bg-white-40:hover { background-color: rgba(255, 255, 255, .4); }
.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); }
.hover-bg-white-30:hover { background-color: rgba(255, 255, 255, .3); }
.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); }
.hover-bg-white-20:hover { background-color: rgba(255, 255, 255, .2); }
.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); }
.hover-bg-white-10:hover { background-color: rgba(255, 255, 255, .1); }
.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); }
.hover-dark-red:hover { color: #e7040f; }
.hover-dark-red:focus { color: #e7040f; }
.hover-red:hover { color: #ff4136; }
.hover-red:focus { color: #ff4136; }
.hover-light-red:hover { color: #ff725c; }
.hover-light-red:focus { color: #ff725c; }
.hover-orange:hover { color: #ff6300; }
.hover-orange:focus { color: #ff6300; }
.hover-gold:hover { color: #ffb700; }
.hover-gold:focus { color: #ffb700; }
.hover-yellow:hover { color: #ffd700; }
.hover-yellow:focus { color: #ffd700; }
.hover-light-yellow:hover { color: #fbf1a9; }
.hover-light-yellow:focus { color: #fbf1a9; }
.hover-purple:hover { color: #5e2ca5; }
.hover-purple:focus { color: #5e2ca5; }
.hover-light-purple:hover { color: #a463f2; }
.hover-light-purple:focus { color: #a463f2; }
.hover-dark-pink:hover { color: #d5008f; }
.hover-dark-pink:focus { color: #d5008f; }
.hover-hot-pink:hover { color: #ff41b4; }
.hover-hot-pink:focus { color: #ff41b4; }
.hover-pink:hover { color: #ff80cc; }
.hover-pink:focus { color: #ff80cc; }
.hover-light-pink:hover { color: #ffa3d7; }
.hover-light-pink:focus { color: #ffa3d7; }
.hover-dark-green:hover { color: #137752; }
.hover-dark-green:focus { color: #137752; }
.hover-green:hover { color: #19a974; }
.hover-green:focus { color: #19a974; }
.hover-light-green:hover { color: #9eebcf; }
.hover-light-green:focus { color: #9eebcf; }
.hover-navy:hover { color: #001b44; }
.hover-navy:focus { color: #001b44; }
.hover-dark-blue:hover { color: #00449e; }
.hover-dark-blue:focus { color: #00449e; }
.hover-blue:hover { color: #357edd; }
.hover-blue:focus { color: #357edd; }
.hover-light-blue:hover { color: #96ccff; }
.hover-light-blue:focus { color: #96ccff; }
.hover-lightest-blue:hover { color: #cdecff; }
.hover-lightest-blue:focus { color: #cdecff; }
.hover-washed-blue:hover { color: #f6fffe; }
.hover-washed-blue:focus { color: #f6fffe; }
.hover-washed-green:hover { color: #e8fdf5; }
.hover-washed-green:focus { color: #e8fdf5; }
.hover-washed-yellow:hover { color: #fffceb; }
.hover-washed-yellow:focus { color: #fffceb; }
.hover-washed-red:hover { color: #ffdfdf; }
.hover-washed-red:focus { color: #ffdfdf; }
.hover-bg-dark-red:hover { background-color: #e7040f; }
.hover-bg-dark-red:focus { background-color: #e7040f; }
.hover-bg-red:hover { background-color: #ff4136; }
.hover-bg-red:focus { background-color: #ff4136; }
.hover-bg-light-red:hover { background-color: #ff725c; }
.hover-bg-light-red:focus { background-color: #ff725c; }
.hover-bg-orange:hover { background-color: #ff6300; }
.hover-bg-orange:focus { background-color: #ff6300; }
.hover-bg-gold:hover { background-color: #ffb700; }
.hover-bg-gold:focus { background-color: #ffb700; }
.hover-bg-yellow:hover { background-color: #ffd700; }
.hover-bg-yellow:focus { background-color: #ffd700; }
.hover-bg-light-yellow:hover { background-color: #fbf1a9; }
.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
.hover-bg-purple:hover { background-color: #5e2ca5; }
.hover-bg-purple:focus { background-color: #5e2ca5; }
.hover-bg-light-purple:hover { background-color: #a463f2; }
.hover-bg-light-purple:focus { background-color: #a463f2; }
.hover-bg-dark-pink:hover { background-color: #d5008f; }
.hover-bg-dark-pink:focus { background-color: #d5008f; }
.hover-bg-hot-pink:hover { background-color: #ff41b4; }
.hover-bg-hot-pink:focus { background-color: #ff41b4; }
.hover-bg-pink:hover { background-color: #ff80cc; }
.hover-bg-pink:focus { background-color: #ff80cc; }
.hover-bg-light-pink:hover { background-color: #ffa3d7; }
.hover-bg-light-pink:focus { background-color: #ffa3d7; }
.hover-bg-dark-green:hover { background-color: #137752; }
.hover-bg-dark-green:focus { background-color: #137752; }
.hover-bg-green:hover { background-color: #19a974; }
.hover-bg-green:focus { background-color: #19a974; }
.hover-bg-light-green:hover { background-color: #9eebcf; }
.hover-bg-light-green:focus { background-color: #9eebcf; }
.hover-bg-navy:hover { background-color: #001b44; }
.hover-bg-navy:focus { background-color: #001b44; }
.hover-bg-dark-blue:hover { background-color: #00449e; }
.hover-bg-dark-blue:focus { background-color: #00449e; }
.hover-bg-blue:hover { background-color: #357edd; }
.hover-bg-blue:focus { background-color: #357edd; }
.hover-bg-light-blue:hover { background-color: #96ccff; }
.hover-bg-light-blue:focus { background-color: #96ccff; }
.hover-bg-lightest-blue:hover { background-color: #cdecff; }
.hover-bg-lightest-blue:focus { background-color: #cdecff; }
.hover-bg-washed-blue:hover { background-color: #f6fffe; }
.hover-bg-washed-blue:focus { background-color: #f6fffe; }
.hover-bg-washed-green:hover { background-color: #e8fdf5; }
.hover-bg-washed-green:focus { background-color: #e8fdf5; }
.hover-bg-washed-yellow:hover { background-color: #fffceb; }
.hover-bg-washed-yellow:focus { background-color: #fffceb; }
.hover-bg-washed-red:hover { background-color: #ffdfdf; }
.hover-bg-washed-red:focus { background-color: #ffdfdf; }
.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }
/* Variables */
/*
   SPACING
   Docs: http://tachyons.io/docs/layout/spacing/

   An eight step powers of two scale ranging from 0 to 16rem.

   Base:
     p = padding
     m = margin

   Modifiers:
     a = all
     h = horizontal
     v = vertical
     t = top
     r = right
     b = bottom
     l = left

     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.pa0 { padding: 0; }
.pa1 { padding: .25rem; }
.pa2 { padding: .5rem; }
.pa3 { padding: 1rem; }
.pa4 { padding: 2rem; }
.pa5 { padding: 4rem; }
.pa6 { padding: 8rem; }
.pa7 { padding: 16rem; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: .25rem; }
.pl2 { padding-left: .5rem; }
.pl3 { padding-left: 1rem; }
.pl4 { padding-left: 2rem; }
.pl5 { padding-left: 4rem; }
.pl6 { padding-left: 8rem; }
.pl7 { padding-left: 16rem; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: .25rem; }
.pr2 { padding-right: .5rem; }
.pr3 { padding-right: 1rem; }
.pr4 { padding-right: 2rem; }
.pr5 { padding-right: 4rem; }
.pr6 { padding-right: 8rem; }
.pr7 { padding-right: 16rem; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: .25rem; }
.pb2 { padding-bottom: .5rem; }
.pb3 { padding-bottom: 1rem; }
.pb4 { padding-bottom: 2rem; }
.pb5 { padding-bottom: 4rem; }
.pb6 { padding-bottom: 8rem; }
.pb7 { padding-bottom: 16rem; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: .25rem; }
.pt2 { padding-top: .5rem; }
.pt3 { padding-top: 1rem; }
.pt4 { padding-top: 2rem; }
.pt5 { padding-top: 4rem; }
.pt6 { padding-top: 8rem; }
.pt7 { padding-top: 16rem; }
.pv0 { padding-top: 0; padding-bottom: 0; }
.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
.pv5 { padding-top: 4rem; padding-bottom: 4rem; }
.pv6 { padding-top: 8rem; padding-bottom: 8rem; }
.pv7 { padding-top: 16rem; padding-bottom: 16rem; }
.ph0 { padding-left: 0; padding-right: 0; }
.ph1 { padding-left: .25rem; padding-right: .25rem; }
.ph2 { padding-left: .5rem; padding-right: .5rem; }
.ph3 { padding-left: 1rem; padding-right: 1rem; }
.ph4 { padding-left: 2rem; padding-right: 2rem; }
.ph5 { padding-left: 4rem; padding-right: 4rem; }
.ph6 { padding-left: 8rem; padding-right: 8rem; }
.ph7 { padding-left: 16rem; padding-right: 16rem; }
.ma0 { margin: 0; }
.ma1 { margin: .25rem; }
.ma2 { margin: .5rem; }
.ma3 { margin: 1rem; }
.ma4 { margin: 2rem; }
.ma5 { margin: 4rem; }
.ma6 { margin: 8rem; }
.ma7 { margin: 16rem; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: .25rem; }
.ml2 { margin-left: .5rem; }
.ml3 { margin-left: 1rem; }
.ml4 { margin-left: 2rem; }
.ml5 { margin-left: 4rem; }
.ml6 { margin-left: 8rem; }
.ml7 { margin-left: 16rem; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: .25rem; }
.mr2 { margin-right: .5rem; }
.mr3 { margin-right: 1rem; }
.mr4 { margin-right: 2rem; }
.mr5 { margin-right: 4rem; }
.mr6 { margin-right: 8rem; }
.mr7 { margin-right: 16rem; }
.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: .25rem; }
.mb2 { margin-bottom: .5rem; }
.mb3 { margin-bottom: 1rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 4rem; }
.mb6 { margin-bottom: 8rem; }
.mb7 { margin-bottom: 16rem; }
.mt0 { margin-top: 0; }
.mt1 { margin-top: .25rem; }
.mt2 { margin-top: .5rem; }
.mt3 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mt5 { margin-top: 4rem; }
.mt6 { margin-top: 8rem; }
.mt7 { margin-top: 16rem; }
.mv0 { margin-top: 0; margin-bottom: 0; }
.mv1 { margin-top: .25rem; margin-bottom: .25rem; }
.mv2 { margin-top: .5rem; margin-bottom: .5rem; }
.mv3 { margin-top: 1rem; margin-bottom: 1rem; }
.mv4 { margin-top: 2rem; margin-bottom: 2rem; }
.mv5 { margin-top: 4rem; margin-bottom: 4rem; }
.mv6 { margin-top: 8rem; margin-bottom: 8rem; }
.mv7 { margin-top: 16rem; margin-bottom: 16rem; }
.mh0 { margin-left: 0; margin-right: 0; }
.mh1 { margin-left: .25rem; margin-right: .25rem; }
.mh2 { margin-left: .5rem; margin-right: .5rem; }
.mh3 { margin-left: 1rem; margin-right: 1rem; }
.mh4 { margin-left: 2rem; margin-right: 2rem; }
.mh5 { margin-left: 4rem; margin-right: 4rem; }
.mh6 { margin-left: 8rem; margin-right: 8rem; }
.mh7 { margin-left: 16rem; margin-right: 16rem; }
/*
   NEGATIVE MARGINS

   Base:
     n = negative

   Modifiers:
     a = all
     t = top
     r = right
     b = bottom
     l = left

     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.na1 { margin: -.25rem; }
.na2 { margin: -.5rem; }
.na3 { margin: -1rem; }
.na4 { margin: -2rem; }
.na5 { margin: -4rem; }
.na6 { margin: -8rem; }
.na7 { margin: -16rem; }
.nl1 { margin-left: -.25rem; }
.nl2 { margin-left: -.5rem; }
.nl3 { margin-left: -1rem; }
.nl4 { margin-left: -2rem; }
.nl5 { margin-left: -4rem; }
.nl6 { margin-left: -8rem; }
.nl7 { margin-left: -16rem; }
.nr1 { margin-right: -.25rem; }
.nr2 { margin-right: -.5rem; }
.nr3 { margin-right: -1rem; }
.nr4 { margin-right: -2rem; }
.nr5 { margin-right: -4rem; }
.nr6 { margin-right: -8rem; }
.nr7 { margin-right: -16rem; }
.nb1 { margin-bottom: -.25rem; }
.nb2 { margin-bottom: -.5rem; }
.nb3 { margin-bottom: -1rem; }
.nb4 { margin-bottom: -2rem; }
.nb5 { margin-bottom: -4rem; }
.nb6 { margin-bottom: -8rem; }
.nb7 { margin-bottom: -16rem; }
.nt1 { margin-top: -.25rem; }
.nt2 { margin-top: -.5rem; }
.nt3 { margin-top: -1rem; }
.nt4 { margin-top: -2rem; }
.nt5 { margin-top: -4rem; }
.nt6 { margin-top: -8rem; }
.nt7 { margin-top: -16rem; }
/*

  TABLES
  Docs: http://tachyons.io/docs/elements/tables/

*/
.collapse { border-collapse: collapse; border-spacing: 0; }
.striped--light-silver:nth-child(odd) { background-color: #aaa; }
.striped--moon-gray:nth-child(odd) { background-color: #ccc; }
.striped--light-gray:nth-child(odd) { background-color: #eee; }
.striped--near-white:nth-child(odd) { background-color: #f4f4f4; }
.stripe-light:nth-child(odd) { background-color: rgba(255, 255, 255, .1); }
.stripe-dark:nth-child(odd) { background-color: rgba(0, 0, 0, .1); }
/*

   TEXT DECORATION
   Docs: http://tachyons.io/docs/typography/text-decoration/


   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
/*

  TEXT ALIGN
  Docs: http://tachyons.io/docs/typography/text-align/

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center

  Media Query Extensions:
    -ns = not-small
    -m  = medium
    -l  = large

*/
.tl { text-align: left; }
.tr { text-align: right; }
.tc { text-align: center; }
/*

   TEXT TRANSFORM
   Docs: http://tachyons.io/docs/typography/text-transform/

   Base:
     tt = text-transform

   Modifiers
     c = capitalize
     l = lowercase
     u = uppercase
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
/*

   TYPE SCALE
   Docs: http://tachyons.io/docs/typography/scale/

   Base:
    f = font-size

   Modifiers
     1 = 1st step in size scale
     2 = 2nd step in size scale
     3 = 3rd step in size scale
     4 = 4th step in size scale
     5 = 5th step in size scale
     6 = 6th step in size scale
     7 = 7th step in size scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large
*/
/*
 * For Hero/Marketing Titles
 *
 * These generally are too large for mobile
 * so be careful using them on smaller screens.
 * */
.f-6, .f-headline { font-size: 6rem; }
.f-5, .f-subheadline { font-size: 5rem; }
/* Type Scale */
.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
.f7 { font-size: .75rem; }
/* Small and hard to read for many people so use with extreme caution */
/*

   TYPOGRAPHY
   http://tachyons.io/docs/typography/measure/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Measure is limited to ~66 characters */
.measure { max-width: 30em; }
/* Measure is limited to ~80 characters */
.measure-wide { max-width: 34em; }
/* Measure is limited to ~45 characters */
.measure-narrow { max-width: 20em; }
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.small-caps { font-feature-settings: "c2sc"; font-variant: small-caps; }
/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*

   UTILITIES

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/* Equivalent to .overflow-y-scroll */
.overflow-container { overflow-y: scroll; }
.center { margin-right: auto; margin-left: auto; }
/*

   VISIBILITY

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
/*
    Text that is hidden but accessible
    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
/*

   WHITE SPACE

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
/*

   VERTICAL ALIGN

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/
.v-base { vertical-align: baseline; }
.v-mid { vertical-align: middle; }
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }
/*

  HOVER EFFECTS
  Docs: http://tachyons.io/docs/themes/hovers/

    - Dim
    - Glow
    - Hide Child
    - Underline text
    - Grow
    - Pointer
    - Shadow

*/
/*

  Dim element on hover by adding the dim class.

*/
.dim { opacity: 1; transition: opacity .15s ease-in; }
.dim:hover, .dim:focus { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .5; transition: opacity .15s ease-in; }
.dim:active { -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: .8; transition: opacity .15s ease-out; }
/*

  Animate opacity to 100% on hover by adding the glow class.

*/
.glow { transition: opacity .15s ease-in; }
.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
/*

  Hide child & reveal on hover:

  Put the hide-child class on a parent element and any nested element with the
  child class will be hidden and displayed on hover or focus.

  <div class="hide-child">
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
    <div class="child"> Hidden until hover or focus </div>
  </div>
*/
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
.hide-child:hover  .child, .hide-child:focus  .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
/* Can combine this with overflow-hidden to make background images grow on hover
 * even if you are using background-size: cover */
.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ( 0 ); transition: transform .25s ease-out; }
.grow:hover, .grow:focus { transform: scale( 1.05 ); }
.grow:active { transform: scale( .90 ); }
.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ( 0 ); transition: transform .25s ease-in-out; }
.grow-large:hover, .grow-large:focus { transform: scale( 1.2 ); }
.grow-large:active { transform: scale( .95 ); }
/* Add pointer on hover */
.pointer:hover { cursor: pointer; }
/* 
   Add shadow on hover.

   Performant box-shadow animation pattern from 
   http://tobiasahlin.com/blog/how-to-animate-box-shadow/ 
*/
.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba(0, 0, 0, .2); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
/* Combine with classes in skins and skins-pseudo for 
 * many different transition possibilities. */
.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
/*

  Z-INDEX

  Base
    z = z-index

  Modifiers
    -0 = literal value 0
    -1 = literal value 1
    -2 = literal value 2
    -3 = literal value 3
    -4 = literal value 4
    -5 = literal value 5
    -999 = literal value 999
    -9999 = literal value 9999

    -max = largest accepted z-index value as integer

    -inherit = string value inherit
    -initial = string value initial
    -unset = string value unset

  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
  Spec: http://www.w3.org/TR/CSS2/zindex.html
  Articles:
    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  Tips on extending:
  There might be a time worth using negative z-index values.
  Or if you are using tachyons with another project, you might need to
  adjust these values to suit your needs.

*/
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-2 { z-index: 2; }
.z-3 { z-index: 3; }
.z-4 { z-index: 4; }
.z-5 { z-index: 5; }
.z-999 { z-index: 999; }
.z-9999 { z-index: 9999; }
.z-max { z-index: 2147483647; }
.z-inherit { z-index: inherit; }
.z-initial { z-index: auto; z-index: initial; }
.z-unset { z-index: unset; }
/*

    NESTED
    Tachyons module for styling nested elements
    that are generated by a cms.

*/
.nested-copy-line-height p, .nested-copy-line-height ul,
.nested-copy-line-height ol { line-height: 1.5; }
.nested-headline-line-height h1, .nested-headline-line-height h2,
.nested-headline-line-height h3, .nested-headline-line-height h4,
.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }
.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
.nested-copy-seperator p+p { margin-top: 1.5em; }
.nested-img img { width: 100%; max-width: 100%; display: block; }
.nested-links a { color: #357edd; transition: color .15s ease-in; }
.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }
.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }
/*

  STYLES

  Add custom styles here.

*/
/* Variables */
/* Importing here will allow you to override any variables in the modules */
/*

   Tachyons
   COLOR VARIABLES

   Grayscale
   - Solids
   - Transparencies
   Colors

*/
/*

  CUSTOM MEDIA QUERIES

  Media query values can be changed to fit your own content.
  There are no magic bullets when it comes to media query width values.
  They should be declared in em units - and they should be set to meet
  the needs of your content. You can also add additional media queries,
  or remove some of the existing ones.

  These media queries can be referenced like so:

  @media (--breakpoint-not-small) {
    .medium-and-larger-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-medium) {
    .medium-screen-specific-style {
      background-color: red;
    }
  }

  @media (--breakpoint-large) {
    .large-and-larger-screen-specific-style {
      background-color: red;
    }
  }

*/
/* Media Queries */
/* Debugging */
/*

  DEBUG CHILDREN
  Docs: http://tachyons.io/docs/debug/

  Just add the debug class to any element to see outlines on its
  children.

*/
.debug * { outline: 1px solid gold; }
.debug-white * { outline: 1px solid white; }
.debug-black * { outline: 1px solid black; }
/*

   DEBUG GRID
   http://tachyons.io/docs/debug-grid/

   Can be useful for debugging layout issues
   or helping to make sure things line up perfectly.
   Just tack one of these classes onto a parent element.

*/
.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg== ) repeat top left; }
.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC ) repeat top left; }
.debug-grid-8-solid { background: white url( data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z ) repeat top left; }
.debug-grid-16-solid { background: white url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII= ) repeat top left; }
/* Uncomment out the line below to help debug layout issues */
/* @import './_debug'; */
@media screen and (min-width: 30em) {
 .aspect-ratio-ns { height: 0; position: relative; }
 .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
 .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
 .aspect-ratio--4x3-ns { padding-bottom: 75%; }
 .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
 .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
 .aspect-ratio--4x6-ns { padding-bottom: 150%; }
 .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
 .aspect-ratio--5x8-ns { padding-bottom: 160%; }
 .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
 .aspect-ratio--5x7-ns { padding-bottom: 140%; }
 .aspect-ratio--1x1-ns { padding-bottom: 100%; }
 .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
 .cover-ns { background-size: cover !important; }
 .contain-ns { background-size: contain !important; }
 .bg-center-ns { background-repeat: no-repeat; background-position: center center; }
 .bg-top-ns { background-repeat: no-repeat; background-position: top center; }
 .bg-right-ns { background-repeat: no-repeat; background-position: center right; }
 .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; }
 .bg-left-ns { background-repeat: no-repeat; background-position: center left; }
 .outline-ns { outline: 1px solid; }
 .outline-transparent-ns { outline: 1px solid transparent; }
 .outline-0-ns { outline: 0; }
 .ba-ns { border-style: solid; border-width: 1px; }
 .bt-ns { border-top-style: solid; border-top-width: 1px; }
 .br-ns { border-right-style: solid; border-right-width: 1px; }
 .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
 .bl-ns { border-left-style: solid; border-left-width: 1px; }
 .bn-ns { border-style: none; border-width: 0; }
 .br0-ns { border-radius: 0; }
 .br1-ns { border-radius: .125rem; }
 .br2-ns { border-radius: .25rem; }
 .br3-ns { border-radius: .5rem; }
 .br4-ns { border-radius: 1rem; }
 .br-100-ns { border-radius: 100%; }
 .br-pill-ns { border-radius: 9999px; }
 .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }
 .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
 .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .b--dotted-ns { border-style: dotted; }
 .b--dashed-ns { border-style: dashed; }
 .b--solid-ns { border-style: solid; }
 .b--none-ns { border-style: none; }
 .bw0-ns { border-width: 0; }
 .bw1-ns { border-width: .125rem; }
 .bw2-ns { border-width: .25rem; }
 .bw3-ns { border-width: .5rem; }
 .bw4-ns { border-width: 1rem; }
 .bw5-ns { border-width: 2rem; }
 .bt-0-ns { border-top-width: 0; }
 .br-0-ns { border-right-width: 0; }
 .bb-0-ns { border-bottom-width: 0; }
 .bl-0-ns { border-left-width: 0; }
 .shadow-1-ns { box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2); }
 .shadow-2-ns { box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2); }
 .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
 .shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2); }
 .shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2); }
 .top-0-ns { top: 0; }
 .left-0-ns { left: 0; }
 .right-0-ns { right: 0; }
 .bottom-0-ns { bottom: 0; }
 .top-1-ns { top: 1rem; }
 .left-1-ns { left: 1rem; }
 .right-1-ns { right: 1rem; }
 .bottom-1-ns { bottom: 1rem; }
 .top-2-ns { top: 2rem; }
 .left-2-ns { left: 2rem; }
 .right-2-ns { right: 2rem; }
 .bottom-2-ns { bottom: 2rem; }
 .top--1-ns { top: -1rem; }
 .right--1-ns { right: -1rem; }
 .bottom--1-ns { bottom: -1rem; }
 .left--1-ns { left: -1rem; }
 .top--2-ns { top: -2rem; }
 .right--2-ns { right: -2rem; }
 .bottom--2-ns { bottom: -2rem; }
 .left--2-ns { left: -2rem; }
 .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; }
 .cl-ns { clear: left; }
 .cr-ns { clear: right; }
 .cb-ns { clear: both; }
 .cn-ns { clear: none; }
 .dn-ns { display: none; }
 .di-ns { display: inline; }
 .db-ns { display: block; }
 .dib-ns { display: inline-block; }
 .dit-ns { display: inline-table; }
 .dt-ns { display: table; }
 .dtc-ns { display: table-cell; }
 .dt-row-ns { display: table-row; }
 .dt-row-group-ns { display: table-row-group; }
 .dt-column-ns { display: table-column; }
 .dt-column-group-ns { display: table-column-group; }
 .dt--fixed-ns { table-layout: fixed; width: 100%; }
 .flex-ns { display: -ms-flexbox; display: flex; }
 .inline-flex-ns { display: -ms-inline-flexbox; display: inline-flex; }
 .flex-auto-ns { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
 .flex-none-ns { -ms-flex: none; flex: none; }
 .flex-column-ns { -ms-flex-direction: column; flex-direction: column; }
 .flex-row-ns { -ms-flex-direction: row; flex-direction: row; }
 .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 .items-start-ns { -ms-flex-align: start; align-items: flex-start; }
 .items-end-ns { -ms-flex-align: end; align-items: flex-end; }
 .items-center-ns { -ms-flex-align: center; align-items: center; }
 .items-baseline-ns { -ms-flex-align: baseline; align-items: baseline; }
 .items-stretch-ns { -ms-flex-align: stretch; align-items: stretch; }
 .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; }
 .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; }
 .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
 .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; }
 .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
 .justify-start-ns { -ms-flex-pack: start; justify-content: flex-start; }
 .justify-end-ns { -ms-flex-pack: end; justify-content: flex-end; }
 .justify-center-ns { -ms-flex-pack: center; justify-content: center; }
 .justify-between-ns { -ms-flex-pack: justify; justify-content: space-between; }
 .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; }
 .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; }
 .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; }
 .content-center-ns { -ms-flex-line-pack: center; align-content: center; }
 .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; }
 .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; }
 .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; }
 .order-0-ns { -ms-flex-order: 0; order: 0; }
 .order-1-ns { -ms-flex-order: 1; order: 1; }
 .order-2-ns { -ms-flex-order: 2; order: 2; }
 .order-3-ns { -ms-flex-order: 3; order: 3; }
 .order-4-ns { -ms-flex-order: 4; order: 4; }
 .order-5-ns { -ms-flex-order: 5; order: 5; }
 .order-6-ns { -ms-flex-order: 6; order: 6; }
 .order-7-ns { -ms-flex-order: 7; order: 7; }
 .order-8-ns { -ms-flex-order: 8; order: 8; }
 .order-last-ns { -ms-flex-order: 99999; order: 99999; }
 .fl-ns { float: left; display: inline; }
 .fr-ns { float: right; display: inline; }
 .fn-ns { float: none; }
 .i-ns { font-style: italic; }
 .fs-normal-ns { font-style: normal; }
 .normal-ns { font-weight: normal; }
 .b-ns { font-weight: bold; }
 .fw1-ns { font-weight: 100; }
 .fw2-ns { font-weight: 200; }
 .fw3-ns { font-weight: 300; }
 .fw4-ns { font-weight: 400; }
 .fw5-ns { font-weight: 500; }
 .fw6-ns { font-weight: 600; }
 .fw7-ns { font-weight: 700; }
 .fw8-ns { font-weight: 800; }
 .fw9-ns { font-weight: 900; }
 .h1-ns { height: 1rem; }
 .h2-ns { height: 2rem; }
 .h3-ns { height: 4rem; }
 .h4-ns { height: 8rem; }
 .h5-ns { height: 16rem; }
 .h-25-ns { height: 25%; }
 .h-50-ns { height: 50%; }
 .h-75-ns { height: 75%; }
 .h-100-ns { height: 100%; }
 .min-h-100-ns { min-height: 100%; }
 .vh-25-ns { height: 25vh; }
 .vh-50-ns { height: 50vh; }
 .vh-75-ns { height: 75vh; }
 .vh-100-ns { height: 100vh; }
 .min-vh-100-ns { min-height: 100vh; }
 .h-auto-ns { height: auto; }
 .h-inherit-ns { height: inherit; }
 .tracked-ns { letter-spacing: .1em; }
 .tracked-tight-ns { letter-spacing: -.05em; }
 .tracked-mega-ns { letter-spacing: .25em; }
 .lh-solid-ns { line-height: 1; }
 .lh-title-ns { line-height: 1.25; }
 .lh-copy-ns { line-height: 1.5; }
 .mw-100-ns { max-width: 100%; }
 .mw1-ns { max-width: 1rem; }
 .mw2-ns { max-width: 2rem; }
 .mw3-ns { max-width: 4rem; }
 .mw4-ns { max-width: 8rem; }
 .mw5-ns { max-width: 16rem; }
 .mw6-ns { max-width: 32rem; }
 .mw7-ns { max-width: 48rem; }
 .mw8-ns { max-width: 64rem; }
 .mw9-ns { max-width: 96rem; }
 .mw-none-ns { max-width: none; }
 .w1-ns { width: 1rem; }
 .w2-ns { width: 2rem; }
 .w3-ns { width: 4rem; }
 .w4-ns { width: 8rem; }
 .w5-ns { width: 16rem; }
 .w-10-ns { width: 10%; }
 .w-20-ns { width: 20%; }
 .w-25-ns { width: 25%; }
 .w-30-ns { width: 30%; }
 .w-33-ns { width: 33%; }
 .w-34-ns { width: 34%; }
 .w-40-ns { width: 40%; }
 .w-50-ns { width: 50%; }
 .w-60-ns { width: 60%; }
 .w-70-ns { width: 70%; }
 .w-75-ns { width: 75%; }
 .w-80-ns { width: 80%; }
 .w-90-ns { width: 90%; }
 .w-100-ns { width: 100%; }
 .w-third-ns { width: 33.33333%; }
 .w-two-thirds-ns { width: 66.66667%; }
 .w-auto-ns { width: auto; }
 .overflow-visible-ns { overflow: visible; }
 .overflow-hidden-ns { overflow: hidden; }
 .overflow-scroll-ns { overflow: scroll; }
 .overflow-auto-ns { overflow: auto; }
 .overflow-x-visible-ns { overflow-x: visible; }
 .overflow-x-hidden-ns { overflow-x: hidden; }
 .overflow-x-scroll-ns { overflow-x: scroll; }
 .overflow-x-auto-ns { overflow-x: auto; }
 .overflow-y-visible-ns { overflow-y: visible; }
 .overflow-y-hidden-ns { overflow-y: hidden; }
 .overflow-y-scroll-ns { overflow-y: scroll; }
 .overflow-y-auto-ns { overflow-y: auto; }
 .static-ns { position: static; }
 .relative-ns { position: relative; }
 .absolute-ns { position: absolute; }
 .fixed-ns { position: fixed; }
 .rotate-45-ns { transform: rotate( 45deg ); }
 .rotate-90-ns { transform: rotate( 90deg ); }
 .rotate-135-ns { transform: rotate( 135deg ); }
 .rotate-180-ns { transform: rotate( 180deg ); }
 .rotate-225-ns { transform: rotate( 225deg ); }
 .rotate-270-ns { transform: rotate( 270deg ); }
 .rotate-315-ns { transform: rotate( 315deg ); }
 .pa0-ns { padding: 0; }
 .pa1-ns { padding: .25rem; }
 .pa2-ns { padding: .5rem; }
 .pa3-ns { padding: 1rem; }
 .pa4-ns { padding: 2rem; }
 .pa5-ns { padding: 4rem; }
 .pa6-ns { padding: 8rem; }
 .pa7-ns { padding: 16rem; }
 .pl0-ns { padding-left: 0; }
 .pl1-ns { padding-left: .25rem; }
 .pl2-ns { padding-left: .5rem; }
 .pl3-ns { padding-left: 1rem; }
 .pl4-ns { padding-left: 2rem; }
 .pl5-ns { padding-left: 4rem; }
 .pl6-ns { padding-left: 8rem; }
 .pl7-ns { padding-left: 16rem; }
 .pr0-ns { padding-right: 0; }
 .pr1-ns { padding-right: .25rem; }
 .pr2-ns { padding-right: .5rem; }
 .pr3-ns { padding-right: 1rem; }
 .pr4-ns { padding-right: 2rem; }
 .pr5-ns { padding-right: 4rem; }
 .pr6-ns { padding-right: 8rem; }
 .pr7-ns { padding-right: 16rem; }
 .pb0-ns { padding-bottom: 0; }
 .pb1-ns { padding-bottom: .25rem; }
 .pb2-ns { padding-bottom: .5rem; }
 .pb3-ns { padding-bottom: 1rem; }
 .pb4-ns { padding-bottom: 2rem; }
 .pb5-ns { padding-bottom: 4rem; }
 .pb6-ns { padding-bottom: 8rem; }
 .pb7-ns { padding-bottom: 16rem; }
 .pt0-ns { padding-top: 0; }
 .pt1-ns { padding-top: .25rem; }
 .pt2-ns { padding-top: .5rem; }
 .pt3-ns { padding-top: 1rem; }
 .pt4-ns { padding-top: 2rem; }
 .pt5-ns { padding-top: 4rem; }
 .pt6-ns { padding-top: 8rem; }
 .pt7-ns { padding-top: 16rem; }
 .pv0-ns { padding-top: 0; padding-bottom: 0; }
 .pv1-ns { padding-top: .25rem; padding-bottom: .25rem; }
 .pv2-ns { padding-top: .5rem; padding-bottom: .5rem; }
 .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; }
 .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; }
 .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; }
 .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; }
 .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; }
 .ph0-ns { padding-left: 0; padding-right: 0; }
 .ph1-ns { padding-left: .25rem; padding-right: .25rem; }
 .ph2-ns { padding-left: .5rem; padding-right: .5rem; }
 .ph3-ns { padding-left: 1rem; padding-right: 1rem; }
 .ph4-ns { padding-left: 2rem; padding-right: 2rem; }
 .ph5-ns { padding-left: 4rem; padding-right: 4rem; }
 .ph6-ns { padding-left: 8rem; padding-right: 8rem; }
 .ph7-ns { padding-left: 16rem; padding-right: 16rem; }
 .ma0-ns { margin: 0; }
 .ma1-ns { margin: .25rem; }
 .ma2-ns { margin: .5rem; }
 .ma3-ns { margin: 1rem; }
 .ma4-ns { margin: 2rem; }
 .ma5-ns { margin: 4rem; }
 .ma6-ns { margin: 8rem; }
 .ma7-ns { margin: 16rem; }
 .ml0-ns { margin-left: 0; }
 .ml1-ns { margin-left: .25rem; }
 .ml2-ns { margin-left: .5rem; }
 .ml3-ns { margin-left: 1rem; }
 .ml4-ns { margin-left: 2rem; }
 .ml5-ns { margin-left: 4rem; }
 .ml6-ns { margin-left: 8rem; }
 .ml7-ns { margin-left: 16rem; }
 .mr0-ns { margin-right: 0; }
 .mr1-ns { margin-right: .25rem; }
 .mr2-ns { margin-right: .5rem; }
 .mr3-ns { margin-right: 1rem; }
 .mr4-ns { margin-right: 2rem; }
 .mr5-ns { margin-right: 4rem; }
 .mr6-ns { margin-right: 8rem; }
 .mr7-ns { margin-right: 16rem; }
 .mb0-ns { margin-bottom: 0; }
 .mb1-ns { margin-bottom: .25rem; }
 .mb2-ns { margin-bottom: .5rem; }
 .mb3-ns { margin-bottom: 1rem; }
 .mb4-ns { margin-bottom: 2rem; }
 .mb5-ns { margin-bottom: 4rem; }
 .mb6-ns { margin-bottom: 8rem; }
 .mb7-ns { margin-bottom: 16rem; }
 .mt0-ns { margin-top: 0; }
 .mt1-ns { margin-top: .25rem; }
 .mt2-ns { margin-top: .5rem; }
 .mt3-ns { margin-top: 1rem; }
 .mt4-ns { margin-top: 2rem; }
 .mt5-ns { margin-top: 4rem; }
 .mt6-ns { margin-top: 8rem; }
 .mt7-ns { margin-top: 16rem; }
 .mv0-ns { margin-top: 0; margin-bottom: 0; }
 .mv1-ns { margin-top: .25rem; margin-bottom: .25rem; }
 .mv2-ns { margin-top: .5rem; margin-bottom: .5rem; }
 .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; }
 .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; }
 .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; }
 .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; }
 .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; }
 .mh0-ns { margin-left: 0; margin-right: 0; }
 .mh1-ns { margin-left: .25rem; margin-right: .25rem; }
 .mh2-ns { margin-left: .5rem; margin-right: .5rem; }
 .mh3-ns { margin-left: 1rem; margin-right: 1rem; }
 .mh4-ns { margin-left: 2rem; margin-right: 2rem; }
 .mh5-ns { margin-left: 4rem; margin-right: 4rem; }
 .mh6-ns { margin-left: 8rem; margin-right: 8rem; }
 .mh7-ns { margin-left: 16rem; margin-right: 16rem; }
 .na1-ns { margin: -.25rem; }
 .na2-ns { margin: -.5rem; }
 .na3-ns { margin: -1rem; }
 .na4-ns { margin: -2rem; }
 .na5-ns { margin: -4rem; }
 .na6-ns { margin: -8rem; }
 .na7-ns { margin: -16rem; }
 .nl1-ns { margin-left: -.25rem; }
 .nl2-ns { margin-left: -.5rem; }
 .nl3-ns { margin-left: -1rem; }
 .nl4-ns { margin-left: -2rem; }
 .nl5-ns { margin-left: -4rem; }
 .nl6-ns { margin-left: -8rem; }
 .nl7-ns { margin-left: -16rem; }
 .nr1-ns { margin-right: -.25rem; }
 .nr2-ns { margin-right: -.5rem; }
 .nr3-ns { margin-right: -1rem; }
 .nr4-ns { margin-right: -2rem; }
 .nr5-ns { margin-right: -4rem; }
 .nr6-ns { margin-right: -8rem; }
 .nr7-ns { margin-right: -16rem; }
 .nb1-ns { margin-bottom: -.25rem; }
 .nb2-ns { margin-bottom: -.5rem; }
 .nb3-ns { margin-bottom: -1rem; }
 .nb4-ns { margin-bottom: -2rem; }
 .nb5-ns { margin-bottom: -4rem; }
 .nb6-ns { margin-bottom: -8rem; }
 .nb7-ns { margin-bottom: -16rem; }
 .nt1-ns { margin-top: -.25rem; }
 .nt2-ns { margin-top: -.5rem; }
 .nt3-ns { margin-top: -1rem; }
 .nt4-ns { margin-top: -2rem; }
 .nt5-ns { margin-top: -4rem; }
 .nt6-ns { margin-top: -8rem; }
 .nt7-ns { margin-top: -16rem; }
 .strike-ns { text-decoration: line-through; }
 .underline-ns { text-decoration: underline; }
 .no-underline-ns { text-decoration: none; }
 .tl-ns { text-align: left; }
 .tr-ns { text-align: right; }
 .tc-ns { text-align: center; }
 .ttc-ns { text-transform: capitalize; }
 .ttl-ns { text-transform: lowercase; }
 .ttu-ns { text-transform: uppercase; }
 .ttn-ns { text-transform: none; }
 .f-6-ns, .f-headline-ns { font-size: 6rem; }
 .f-5-ns, .f-subheadline-ns { font-size: 5rem; }
 .f1-ns { font-size: 3rem; }
 .f2-ns { font-size: 2.25rem; }
 .f3-ns { font-size: 1.5rem; }
 .f4-ns { font-size: 1.25rem; }
 .f5-ns { font-size: 1rem; }
 .f6-ns { font-size: .875rem; }
 .f7-ns { font-size: .75rem; }
 .measure-ns { max-width: 30em; }
 .measure-wide-ns { max-width: 34em; }
 .measure-narrow-ns { max-width: 20em; }
 .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
 .small-caps-ns { font-feature-settings: "c2sc"; font-variant: small-caps; }
 .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .center-ns { margin-right: auto; margin-left: auto; }
 .clip-ns { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
 .ws-normal-ns { white-space: normal; }
 .nowrap-ns { white-space: nowrap; }
 .pre-ns { white-space: pre; }
 .v-base-ns { vertical-align: baseline; }
 .v-mid-ns { vertical-align: middle; }
 .v-top-ns { vertical-align: top; }
 .v-btm-ns { vertical-align: bottom; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
 .aspect-ratio-m { height: 0; position: relative; }
 .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
 .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
 .aspect-ratio--4x3-m { padding-bottom: 75%; }
 .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
 .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
 .aspect-ratio--4x6-m { padding-bottom: 150%; }
 .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
 .aspect-ratio--5x8-m { padding-bottom: 160%; }
 .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
 .aspect-ratio--5x7-m { padding-bottom: 140%; }
 .aspect-ratio--1x1-m { padding-bottom: 100%; }
 .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
 .cover-m { background-size: cover !important; }
 .contain-m { background-size: contain !important; }
 .bg-center-m { background-repeat: no-repeat; background-position: center center; }
 .bg-top-m { background-repeat: no-repeat; background-position: top center; }
 .bg-right-m { background-repeat: no-repeat; background-position: center right; }
 .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
 .bg-left-m { background-repeat: no-repeat; background-position: center left; }
 .outline-m { outline: 1px solid; }
 .outline-transparent-m { outline: 1px solid transparent; }
 .outline-0-m { outline: 0; }
 .ba-m { border-style: solid; border-width: 1px; }
 .bt-m { border-top-style: solid; border-top-width: 1px; }
 .br-m { border-right-style: solid; border-right-width: 1px; }
 .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
 .bl-m { border-left-style: solid; border-left-width: 1px; }
 .bn-m { border-style: none; border-width: 0; }
 .br0-m { border-radius: 0; }
 .br1-m { border-radius: .125rem; }
 .br2-m { border-radius: .25rem; }
 .br3-m { border-radius: .5rem; }
 .br4-m { border-radius: 1rem; }
 .br-100-m { border-radius: 100%; }
 .br-pill-m { border-radius: 9999px; }
 .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
 .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
 .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .b--dotted-m { border-style: dotted; }
 .b--dashed-m { border-style: dashed; }
 .b--solid-m { border-style: solid; }
 .b--none-m { border-style: none; }
 .bw0-m { border-width: 0; }
 .bw1-m { border-width: .125rem; }
 .bw2-m { border-width: .25rem; }
 .bw3-m { border-width: .5rem; }
 .bw4-m { border-width: 1rem; }
 .bw5-m { border-width: 2rem; }
 .bt-0-m { border-top-width: 0; }
 .br-0-m { border-right-width: 0; }
 .bb-0-m { border-bottom-width: 0; }
 .bl-0-m { border-left-width: 0; }
 .shadow-1-m { box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2); }
 .shadow-2-m { box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2); }
 .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
 .shadow-4-m { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2); }
 .shadow-5-m { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2); }
 .top-0-m { top: 0; }
 .left-0-m { left: 0; }
 .right-0-m { right: 0; }
 .bottom-0-m { bottom: 0; }
 .top-1-m { top: 1rem; }
 .left-1-m { left: 1rem; }
 .right-1-m { right: 1rem; }
 .bottom-1-m { bottom: 1rem; }
 .top-2-m { top: 2rem; }
 .left-2-m { left: 2rem; }
 .right-2-m { right: 2rem; }
 .bottom-2-m { bottom: 2rem; }
 .top--1-m { top: -1rem; }
 .right--1-m { right: -1rem; }
 .bottom--1-m { bottom: -1rem; }
 .left--1-m { left: -1rem; }
 .top--2-m { top: -2rem; }
 .right--2-m { right: -2rem; }
 .bottom--2-m { bottom: -2rem; }
 .left--2-m { left: -2rem; }
 .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; }
 .cl-m { clear: left; }
 .cr-m { clear: right; }
 .cb-m { clear: both; }
 .cn-m { clear: none; }
 .dn-m { display: none; }
 .di-m { display: inline; }
 .db-m { display: block; }
 .dib-m { display: inline-block; }
 .dit-m { display: inline-table; }
 .dt-m { display: table; }
 .dtc-m { display: table-cell; }
 .dt-row-m { display: table-row; }
 .dt-row-group-m { display: table-row-group; }
 .dt-column-m { display: table-column; }
 .dt-column-group-m { display: table-column-group; }
 .dt--fixed-m { table-layout: fixed; width: 100%; }
 .flex-m { display: -ms-flexbox; display: flex; }
 .inline-flex-m { display: -ms-inline-flexbox; display: inline-flex; }
 .flex-auto-m { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
 .flex-none-m { -ms-flex: none; flex: none; }
 .flex-column-m { -ms-flex-direction: column; flex-direction: column; }
 .flex-row-m { -ms-flex-direction: row; flex-direction: row; }
 .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 .items-start-m { -ms-flex-align: start; align-items: flex-start; }
 .items-end-m { -ms-flex-align: end; align-items: flex-end; }
 .items-center-m { -ms-flex-align: center; align-items: center; }
 .items-baseline-m { -ms-flex-align: baseline; align-items: baseline; }
 .items-stretch-m { -ms-flex-align: stretch; align-items: stretch; }
 .self-start-m { -ms-flex-item-align: start; align-self: flex-start; }
 .self-end-m { -ms-flex-item-align: end; align-self: flex-end; }
 .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
 .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; }
 .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
 .justify-start-m { -ms-flex-pack: start; justify-content: flex-start; }
 .justify-end-m { -ms-flex-pack: end; justify-content: flex-end; }
 .justify-center-m { -ms-flex-pack: center; justify-content: center; }
 .justify-between-m { -ms-flex-pack: justify; justify-content: space-between; }
 .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; }
 .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; }
 .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; }
 .content-center-m { -ms-flex-line-pack: center; align-content: center; }
 .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; }
 .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; }
 .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; }
 .order-0-m { -ms-flex-order: 0; order: 0; }
 .order-1-m { -ms-flex-order: 1; order: 1; }
 .order-2-m { -ms-flex-order: 2; order: 2; }
 .order-3-m { -ms-flex-order: 3; order: 3; }
 .order-4-m { -ms-flex-order: 4; order: 4; }
 .order-5-m { -ms-flex-order: 5; order: 5; }
 .order-6-m { -ms-flex-order: 6; order: 6; }
 .order-7-m { -ms-flex-order: 7; order: 7; }
 .order-8-m { -ms-flex-order: 8; order: 8; }
 .order-last-m { -ms-flex-order: 99999; order: 99999; }
 .fl-m { float: left; display: inline; }
 .fr-m { float: right; display: inline; }
 .fn-m { float: none; }
 .i-m { font-style: italic; }
 .fs-normal-m { font-style: normal; }
 .normal-m { font-weight: normal; }
 .b-m { font-weight: bold; }
 .fw1-m { font-weight: 100; }
 .fw2-m { font-weight: 200; }
 .fw3-m { font-weight: 300; }
 .fw4-m { font-weight: 400; }
 .fw5-m { font-weight: 500; }
 .fw6-m { font-weight: 600; }
 .fw7-m { font-weight: 700; }
 .fw8-m { font-weight: 800; }
 .fw9-m { font-weight: 900; }
 .h1-m { height: 1rem; }
 .h2-m { height: 2rem; }
 .h3-m { height: 4rem; }
 .h4-m { height: 8rem; }
 .h5-m { height: 16rem; }
 .h-25-m { height: 25%; }
 .h-50-m { height: 50%; }
 .h-75-m { height: 75%; }
 .h-100-m { height: 100%; }
 .min-h-100-m { min-height: 100%; }
 .vh-25-m { height: 25vh; }
 .vh-50-m { height: 50vh; }
 .vh-75-m { height: 75vh; }
 .vh-100-m { height: 100vh; }
 .min-vh-100-m { min-height: 100vh; }
 .h-auto-m { height: auto; }
 .h-inherit-m { height: inherit; }
 .tracked-m { letter-spacing: .1em; }
 .tracked-tight-m { letter-spacing: -.05em; }
 .tracked-mega-m { letter-spacing: .25em; }
 .lh-solid-m { line-height: 1; }
 .lh-title-m { line-height: 1.25; }
 .lh-copy-m { line-height: 1.5; }
 .mw-100-m { max-width: 100%; }
 .mw1-m { max-width: 1rem; }
 .mw2-m { max-width: 2rem; }
 .mw3-m { max-width: 4rem; }
 .mw4-m { max-width: 8rem; }
 .mw5-m { max-width: 16rem; }
 .mw6-m { max-width: 32rem; }
 .mw7-m { max-width: 48rem; }
 .mw8-m { max-width: 64rem; }
 .mw9-m { max-width: 96rem; }
 .mw-none-m { max-width: none; }
 .w1-m { width: 1rem; }
 .w2-m { width: 2rem; }
 .w3-m { width: 4rem; }
 .w4-m { width: 8rem; }
 .w5-m { width: 16rem; }
 .w-10-m { width: 10%; }
 .w-20-m { width: 20%; }
 .w-25-m { width: 25%; }
 .w-30-m { width: 30%; }
 .w-33-m { width: 33%; }
 .w-34-m { width: 34%; }
 .w-40-m { width: 40%; }
 .w-50-m { width: 50%; }
 .w-60-m { width: 60%; }
 .w-70-m { width: 70%; }
 .w-75-m { width: 75%; }
 .w-80-m { width: 80%; }
 .w-90-m { width: 90%; }
 .w-100-m { width: 100%; }
 .w-third-m { width: 33.33333%; }
 .w-two-thirds-m { width: 66.66667%; }
 .w-auto-m { width: auto; }
 .overflow-visible-m { overflow: visible; }
 .overflow-hidden-m { overflow: hidden; }
 .overflow-scroll-m { overflow: scroll; }
 .overflow-auto-m { overflow: auto; }
 .overflow-x-visible-m { overflow-x: visible; }
 .overflow-x-hidden-m { overflow-x: hidden; }
 .overflow-x-scroll-m { overflow-x: scroll; }
 .overflow-x-auto-m { overflow-x: auto; }
 .overflow-y-visible-m { overflow-y: visible; }
 .overflow-y-hidden-m { overflow-y: hidden; }
 .overflow-y-scroll-m { overflow-y: scroll; }
 .overflow-y-auto-m { overflow-y: auto; }
 .static-m { position: static; }
 .relative-m { position: relative; }
 .absolute-m { position: absolute; }
 .fixed-m { position: fixed; }
 .rotate-45-m { transform: rotate( 45deg ); }
 .rotate-90-m { transform: rotate( 90deg ); }
 .rotate-135-m { transform: rotate( 135deg ); }
 .rotate-180-m { transform: rotate( 180deg ); }
 .rotate-225-m { transform: rotate( 225deg ); }
 .rotate-270-m { transform: rotate( 270deg ); }
 .rotate-315-m { transform: rotate( 315deg ); }
 .pa0-m { padding: 0; }
 .pa1-m { padding: .25rem; }
 .pa2-m { padding: .5rem; }
 .pa3-m { padding: 1rem; }
 .pa4-m { padding: 2rem; }
 .pa5-m { padding: 4rem; }
 .pa6-m { padding: 8rem; }
 .pa7-m { padding: 16rem; }
 .pl0-m { padding-left: 0; }
 .pl1-m { padding-left: .25rem; }
 .pl2-m { padding-left: .5rem; }
 .pl3-m { padding-left: 1rem; }
 .pl4-m { padding-left: 2rem; }
 .pl5-m { padding-left: 4rem; }
 .pl6-m { padding-left: 8rem; }
 .pl7-m { padding-left: 16rem; }
 .pr0-m { padding-right: 0; }
 .pr1-m { padding-right: .25rem; }
 .pr2-m { padding-right: .5rem; }
 .pr3-m { padding-right: 1rem; }
 .pr4-m { padding-right: 2rem; }
 .pr5-m { padding-right: 4rem; }
 .pr6-m { padding-right: 8rem; }
 .pr7-m { padding-right: 16rem; }
 .pb0-m { padding-bottom: 0; }
 .pb1-m { padding-bottom: .25rem; }
 .pb2-m { padding-bottom: .5rem; }
 .pb3-m { padding-bottom: 1rem; }
 .pb4-m { padding-bottom: 2rem; }
 .pb5-m { padding-bottom: 4rem; }
 .pb6-m { padding-bottom: 8rem; }
 .pb7-m { padding-bottom: 16rem; }
 .pt0-m { padding-top: 0; }
 .pt1-m { padding-top: .25rem; }
 .pt2-m { padding-top: .5rem; }
 .pt3-m { padding-top: 1rem; }
 .pt4-m { padding-top: 2rem; }
 .pt5-m { padding-top: 4rem; }
 .pt6-m { padding-top: 8rem; }
 .pt7-m { padding-top: 16rem; }
 .pv0-m { padding-top: 0; padding-bottom: 0; }
 .pv1-m { padding-top: .25rem; padding-bottom: .25rem; }
 .pv2-m { padding-top: .5rem; padding-bottom: .5rem; }
 .pv3-m { padding-top: 1rem; padding-bottom: 1rem; }
 .pv4-m { padding-top: 2rem; padding-bottom: 2rem; }
 .pv5-m { padding-top: 4rem; padding-bottom: 4rem; }
 .pv6-m { padding-top: 8rem; padding-bottom: 8rem; }
 .pv7-m { padding-top: 16rem; padding-bottom: 16rem; }
 .ph0-m { padding-left: 0; padding-right: 0; }
 .ph1-m { padding-left: .25rem; padding-right: .25rem; }
 .ph2-m { padding-left: .5rem; padding-right: .5rem; }
 .ph3-m { padding-left: 1rem; padding-right: 1rem; }
 .ph4-m { padding-left: 2rem; padding-right: 2rem; }
 .ph5-m { padding-left: 4rem; padding-right: 4rem; }
 .ph6-m { padding-left: 8rem; padding-right: 8rem; }
 .ph7-m { padding-left: 16rem; padding-right: 16rem; }
 .ma0-m { margin: 0; }
 .ma1-m { margin: .25rem; }
 .ma2-m { margin: .5rem; }
 .ma3-m { margin: 1rem; }
 .ma4-m { margin: 2rem; }
 .ma5-m { margin: 4rem; }
 .ma6-m { margin: 8rem; }
 .ma7-m { margin: 16rem; }
 .ml0-m { margin-left: 0; }
 .ml1-m { margin-left: .25rem; }
 .ml2-m { margin-left: .5rem; }
 .ml3-m { margin-left: 1rem; }
 .ml4-m { margin-left: 2rem; }
 .ml5-m { margin-left: 4rem; }
 .ml6-m { margin-left: 8rem; }
 .ml7-m { margin-left: 16rem; }
 .mr0-m { margin-right: 0; }
 .mr1-m { margin-right: .25rem; }
 .mr2-m { margin-right: .5rem; }
 .mr3-m { margin-right: 1rem; }
 .mr4-m { margin-right: 2rem; }
 .mr5-m { margin-right: 4rem; }
 .mr6-m { margin-right: 8rem; }
 .mr7-m { margin-right: 16rem; }
 .mb0-m { margin-bottom: 0; }
 .mb1-m { margin-bottom: .25rem; }
 .mb2-m { margin-bottom: .5rem; }
 .mb3-m { margin-bottom: 1rem; }
 .mb4-m { margin-bottom: 2rem; }
 .mb5-m { margin-bottom: 4rem; }
 .mb6-m { margin-bottom: 8rem; }
 .mb7-m { margin-bottom: 16rem; }
 .mt0-m { margin-top: 0; }
 .mt1-m { margin-top: .25rem; }
 .mt2-m { margin-top: .5rem; }
 .mt3-m { margin-top: 1rem; }
 .mt4-m { margin-top: 2rem; }
 .mt5-m { margin-top: 4rem; }
 .mt6-m { margin-top: 8rem; }
 .mt7-m { margin-top: 16rem; }
 .mv0-m { margin-top: 0; margin-bottom: 0; }
 .mv1-m { margin-top: .25rem; margin-bottom: .25rem; }
 .mv2-m { margin-top: .5rem; margin-bottom: .5rem; }
 .mv3-m { margin-top: 1rem; margin-bottom: 1rem; }
 .mv4-m { margin-top: 2rem; margin-bottom: 2rem; }
 .mv5-m { margin-top: 4rem; margin-bottom: 4rem; }
 .mv6-m { margin-top: 8rem; margin-bottom: 8rem; }
 .mv7-m { margin-top: 16rem; margin-bottom: 16rem; }
 .mh0-m { margin-left: 0; margin-right: 0; }
 .mh1-m { margin-left: .25rem; margin-right: .25rem; }
 .mh2-m { margin-left: .5rem; margin-right: .5rem; }
 .mh3-m { margin-left: 1rem; margin-right: 1rem; }
 .mh4-m { margin-left: 2rem; margin-right: 2rem; }
 .mh5-m { margin-left: 4rem; margin-right: 4rem; }
 .mh6-m { margin-left: 8rem; margin-right: 8rem; }
 .mh7-m { margin-left: 16rem; margin-right: 16rem; }
 .na1-m { margin: -.25rem; }
 .na2-m { margin: -.5rem; }
 .na3-m { margin: -1rem; }
 .na4-m { margin: -2rem; }
 .na5-m { margin: -4rem; }
 .na6-m { margin: -8rem; }
 .na7-m { margin: -16rem; }
 .nl1-m { margin-left: -.25rem; }
 .nl2-m { margin-left: -.5rem; }
 .nl3-m { margin-left: -1rem; }
 .nl4-m { margin-left: -2rem; }
 .nl5-m { margin-left: -4rem; }
 .nl6-m { margin-left: -8rem; }
 .nl7-m { margin-left: -16rem; }
 .nr1-m { margin-right: -.25rem; }
 .nr2-m { margin-right: -.5rem; }
 .nr3-m { margin-right: -1rem; }
 .nr4-m { margin-right: -2rem; }
 .nr5-m { margin-right: -4rem; }
 .nr6-m { margin-right: -8rem; }
 .nr7-m { margin-right: -16rem; }
 .nb1-m { margin-bottom: -.25rem; }
 .nb2-m { margin-bottom: -.5rem; }
 .nb3-m { margin-bottom: -1rem; }
 .nb4-m { margin-bottom: -2rem; }
 .nb5-m { margin-bottom: -4rem; }
 .nb6-m { margin-bottom: -8rem; }
 .nb7-m { margin-bottom: -16rem; }
 .nt1-m { margin-top: -.25rem; }
 .nt2-m { margin-top: -.5rem; }
 .nt3-m { margin-top: -1rem; }
 .nt4-m { margin-top: -2rem; }
 .nt5-m { margin-top: -4rem; }
 .nt6-m { margin-top: -8rem; }
 .nt7-m { margin-top: -16rem; }
 .strike-m { text-decoration: line-through; }
 .underline-m { text-decoration: underline; }
 .no-underline-m { text-decoration: none; }
 .tl-m { text-align: left; }
 .tr-m { text-align: right; }
 .tc-m { text-align: center; }
 .ttc-m { text-transform: capitalize; }
 .ttl-m { text-transform: lowercase; }
 .ttu-m { text-transform: uppercase; }
 .ttn-m { text-transform: none; }
 .f-6-m, .f-headline-m { font-size: 6rem; }
 .f-5-m, .f-subheadline-m { font-size: 5rem; }
 .f1-m { font-size: 3rem; }
 .f2-m { font-size: 2.25rem; }
 .f3-m { font-size: 1.5rem; }
 .f4-m { font-size: 1.25rem; }
 .f5-m { font-size: 1rem; }
 .f6-m { font-size: .875rem; }
 .f7-m { font-size: .75rem; }
 .measure-m { max-width: 30em; }
 .measure-wide-m { max-width: 34em; }
 .measure-narrow-m { max-width: 20em; }
 .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
 .small-caps-m { font-feature-settings: "c2sc"; font-variant: small-caps; }
 .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .center-m { margin-right: auto; margin-left: auto; }
 .clip-m { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
 .ws-normal-m { white-space: normal; }
 .nowrap-m { white-space: nowrap; }
 .pre-m { white-space: pre; }
 .v-base-m { vertical-align: baseline; }
 .v-mid-m { vertical-align: middle; }
 .v-top-m { vertical-align: top; }
 .v-btm-m { vertical-align: bottom; }
}
@media screen and (min-width: 60em) {
 .aspect-ratio-l { height: 0; position: relative; }
 .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
 .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
 .aspect-ratio--4x3-l { padding-bottom: 75%; }
 .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
 .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
 .aspect-ratio--4x6-l { padding-bottom: 150%; }
 .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
 .aspect-ratio--5x8-l { padding-bottom: 160%; }
 .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
 .aspect-ratio--5x7-l { padding-bottom: 140%; }
 .aspect-ratio--1x1-l { padding-bottom: 100%; }
 .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
 .cover-l { background-size: cover !important; }
 .contain-l { background-size: contain !important; }
 .bg-center-l { background-repeat: no-repeat; background-position: center center; }
 .bg-top-l { background-repeat: no-repeat; background-position: top center; }
 .bg-right-l { background-repeat: no-repeat; background-position: center right; }
 .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
 .bg-left-l { background-repeat: no-repeat; background-position: center left; }
 .outline-l { outline: 1px solid; }
 .outline-transparent-l { outline: 1px solid transparent; }
 .outline-0-l { outline: 0; }
 .ba-l { border-style: solid; border-width: 1px; }
 .bt-l { border-top-style: solid; border-top-width: 1px; }
 .br-l { border-right-style: solid; border-right-width: 1px; }
 .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
 .bl-l { border-left-style: solid; border-left-width: 1px; }
 .bn-l { border-style: none; border-width: 0; }
 .br0-l { border-radius: 0; }
 .br1-l { border-radius: .125rem; }
 .br2-l { border-radius: .25rem; }
 .br3-l { border-radius: .5rem; }
 .br4-l { border-radius: 1rem; }
 .br-100-l { border-radius: 100%; }
 .br-pill-l { border-radius: 9999px; }
 .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
 .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
 .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
 .b--dotted-l { border-style: dotted; }
 .b--dashed-l { border-style: dashed; }
 .b--solid-l { border-style: solid; }
 .b--none-l { border-style: none; }
 .bw0-l { border-width: 0; }
 .bw1-l { border-width: .125rem; }
 .bw2-l { border-width: .25rem; }
 .bw3-l { border-width: .5rem; }
 .bw4-l { border-width: 1rem; }
 .bw5-l { border-width: 2rem; }
 .bt-0-l { border-top-width: 0; }
 .br-0-l { border-right-width: 0; }
 .bb-0-l { border-bottom-width: 0; }
 .bl-0-l { border-left-width: 0; }
 .shadow-1-l { box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2); }
 .shadow-2-l { box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2); }
 .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); }
 .shadow-4-l { box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2); }
 .shadow-5-l { box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2); }
 .top-0-l { top: 0; }
 .left-0-l { left: 0; }
 .right-0-l { right: 0; }
 .bottom-0-l { bottom: 0; }
 .top-1-l { top: 1rem; }
 .left-1-l { left: 1rem; }
 .right-1-l { right: 1rem; }
 .bottom-1-l { bottom: 1rem; }
 .top-2-l { top: 2rem; }
 .left-2-l { left: 2rem; }
 .right-2-l { right: 2rem; }
 .bottom-2-l { bottom: 2rem; }
 .top--1-l { top: -1rem; }
 .right--1-l { right: -1rem; }
 .bottom--1-l { bottom: -1rem; }
 .left--1-l { left: -1rem; }
 .top--2-l { top: -2rem; }
 .right--2-l { right: -2rem; }
 .bottom--2-l { bottom: -2rem; }
 .left--2-l { left: -2rem; }
 .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; }
 .cl-l { clear: left; }
 .cr-l { clear: right; }
 .cb-l { clear: both; }
 .cn-l { clear: none; }
 .dn-l { display: none; }
 .di-l { display: inline; }
 .db-l { display: block; }
 .dib-l { display: inline-block; }
 .dit-l { display: inline-table; }
 .dt-l { display: table; }
 .dtc-l { display: table-cell; }
 .dt-row-l { display: table-row; }
 .dt-row-group-l { display: table-row-group; }
 .dt-column-l { display: table-column; }
 .dt-column-group-l { display: table-column-group; }
 .dt--fixed-l { table-layout: fixed; width: 100%; }
 .flex-l { display: -ms-flexbox; display: flex; }
 .inline-flex-l { display: -ms-inline-flexbox; display: inline-flex; }
 .flex-auto-l { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
 .flex-none-l { -ms-flex: none; flex: none; }
 .flex-column-l { -ms-flex-direction: column; flex-direction: column; }
 .flex-row-l { -ms-flex-direction: row; flex-direction: row; }
 .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; }
 .items-start-l { -ms-flex-align: start; align-items: flex-start; }
 .items-end-l { -ms-flex-align: end; align-items: flex-end; }
 .items-center-l { -ms-flex-align: center; align-items: center; }
 .items-baseline-l { -ms-flex-align: baseline; align-items: baseline; }
 .items-stretch-l { -ms-flex-align: stretch; align-items: stretch; }
 .self-start-l { -ms-flex-item-align: start; align-self: flex-start; }
 .self-end-l { -ms-flex-item-align: end; align-self: flex-end; }
 .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; }
 .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; }
 .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; }
 .justify-start-l { -ms-flex-pack: start; justify-content: flex-start; }
 .justify-end-l { -ms-flex-pack: end; justify-content: flex-end; }
 .justify-center-l { -ms-flex-pack: center; justify-content: center; }
 .justify-between-l { -ms-flex-pack: justify; justify-content: space-between; }
 .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; }
 .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; }
 .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; }
 .content-center-l { -ms-flex-line-pack: center; align-content: center; }
 .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; }
 .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; }
 .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; }
 .order-0-l { -ms-flex-order: 0; order: 0; }
 .order-1-l { -ms-flex-order: 1; order: 1; }
 .order-2-l { -ms-flex-order: 2; order: 2; }
 .order-3-l { -ms-flex-order: 3; order: 3; }
 .order-4-l { -ms-flex-order: 4; order: 4; }
 .order-5-l { -ms-flex-order: 5; order: 5; }
 .order-6-l { -ms-flex-order: 6; order: 6; }
 .order-7-l { -ms-flex-order: 7; order: 7; }
 .order-8-l { -ms-flex-order: 8; order: 8; }
 .order-last-l { -ms-flex-order: 99999; order: 99999; }
 .fl-l { float: left; display: inline; }
 .fr-l { float: right; display: inline; }
 .fn-l { float: none; }
 .i-l { font-style: italic; }
 .fs-normal-l { font-style: normal; }
 .normal-l { font-weight: normal; }
 .b-l { font-weight: bold; }
 .fw1-l { font-weight: 100; }
 .fw2-l { font-weight: 200; }
 .fw3-l { font-weight: 300; }
 .fw4-l { font-weight: 400; }
 .fw5-l { font-weight: 500; }
 .fw6-l { font-weight: 600; }
 .fw7-l { font-weight: 700; }
 .fw8-l { font-weight: 800; }
 .fw9-l { font-weight: 900; }
 .h1-l { height: 1rem; }
 .h2-l { height: 2rem; }
 .h3-l { height: 4rem; }
 .h4-l { height: 8rem; }
 .h5-l { height: 16rem; }
 .h-25-l { height: 25%; }
 .h-50-l { height: 50%; }
 .h-75-l { height: 75%; }
 .h-100-l { height: 100%; }
 .min-h-100-l { min-height: 100%; }
 .vh-25-l { height: 25vh; }
 .vh-50-l { height: 50vh; }
 .vh-75-l { height: 75vh; }
 .vh-100-l { height: 100vh; }
 .min-vh-100-l { min-height: 100vh; }
 .h-auto-l { height: auto; }
 .h-inherit-l { height: inherit; }
 .tracked-l { letter-spacing: .1em; }
 .tracked-tight-l { letter-spacing: -.05em; }
 .tracked-mega-l { letter-spacing: .25em; }
 .lh-solid-l { line-height: 1; }
 .lh-title-l { line-height: 1.25; }
 .lh-copy-l { line-height: 1.5; }
 .mw-100-l { max-width: 100%; }
 .mw1-l { max-width: 1rem; }
 .mw2-l { max-width: 2rem; }
 .mw3-l { max-width: 4rem; }
 .mw4-l { max-width: 8rem; }
 .mw5-l { max-width: 16rem; }
 .mw6-l { max-width: 32rem; }
 .mw7-l { max-width: 48rem; }
 .mw8-l { max-width: 64rem; }
 .mw9-l { max-width: 96rem; }
 .mw-none-l { max-width: none; }
 .w1-l { width: 1rem; }
 .w2-l { width: 2rem; }
 .w3-l { width: 4rem; }
 .w4-l { width: 8rem; }
 .w5-l { width: 16rem; }
 .w-10-l { width: 10%; }
 .w-20-l { width: 20%; }
 .w-25-l { width: 25%; }
 .w-30-l { width: 30%; }
 .w-33-l { width: 33%; }
 .w-34-l { width: 34%; }
 .w-40-l { width: 40%; }
 .w-50-l { width: 50%; }
 .w-60-l { width: 60%; }
 .w-70-l { width: 70%; }
 .w-75-l { width: 75%; }
 .w-80-l { width: 80%; }
 .w-90-l { width: 90%; }
 .w-100-l { width: 100%; }
 .w-third-l { width: 33.33333%; }
 .w-two-thirds-l { width: 66.66667%; }
 .w-auto-l { width: auto; }
 .overflow-visible-l { overflow: visible; }
 .overflow-hidden-l { overflow: hidden; }
 .overflow-scroll-l { overflow: scroll; }
 .overflow-auto-l { overflow: auto; }
 .overflow-x-visible-l { overflow-x: visible; }
 .overflow-x-hidden-l { overflow-x: hidden; }
 .overflow-x-scroll-l { overflow-x: scroll; }
 .overflow-x-auto-l { overflow-x: auto; }
 .overflow-y-visible-l { overflow-y: visible; }
 .overflow-y-hidden-l { overflow-y: hidden; }
 .overflow-y-scroll-l { overflow-y: scroll; }
 .overflow-y-auto-l { overflow-y: auto; }
 .static-l { position: static; }
 .relative-l { position: relative; }
 .absolute-l { position: absolute; }
 .fixed-l { position: fixed; }
 .rotate-45-l { transform: rotate( 45deg ); }
 .rotate-90-l { transform: rotate( 90deg ); }
 .rotate-135-l { transform: rotate( 135deg ); }
 .rotate-180-l { transform: rotate( 180deg ); }
 .rotate-225-l { transform: rotate( 225deg ); }
 .rotate-270-l { transform: rotate( 270deg ); }
 .rotate-315-l { transform: rotate( 315deg ); }
 .pa0-l { padding: 0; }
 .pa1-l { padding: .25rem; }
 .pa2-l { padding: .5rem; }
 .pa3-l { padding: 1rem; }
 .pa4-l { padding: 2rem; }
 .pa5-l { padding: 4rem; }
 .pa6-l { padding: 8rem; }
 .pa7-l { padding: 16rem; }
 .pl0-l { padding-left: 0; }
 .pl1-l { padding-left: .25rem; }
 .pl2-l { padding-left: .5rem; }
 .pl3-l { padding-left: 1rem; }
 .pl4-l { padding-left: 2rem; }
 .pl5-l { padding-left: 4rem; }
 .pl6-l { padding-left: 8rem; }
 .pl7-l { padding-left: 16rem; }
 .pr0-l { padding-right: 0; }
 .pr1-l { padding-right: .25rem; }
 .pr2-l { padding-right: .5rem; }
 .pr3-l { padding-right: 1rem; }
 .pr4-l { padding-right: 2rem; }
 .pr5-l { padding-right: 4rem; }
 .pr6-l { padding-right: 8rem; }
 .pr7-l { padding-right: 16rem; }
 .pb0-l { padding-bottom: 0; }
 .pb1-l { padding-bottom: .25rem; }
 .pb2-l { padding-bottom: .5rem; }
 .pb3-l { padding-bottom: 1rem; }
 .pb4-l { padding-bottom: 2rem; }
 .pb5-l { padding-bottom: 4rem; }
 .pb6-l { padding-bottom: 8rem; }
 .pb7-l { padding-bottom: 16rem; }
 .pt0-l { padding-top: 0; }
 .pt1-l { padding-top: .25rem; }
 .pt2-l { padding-top: .5rem; }
 .pt3-l { padding-top: 1rem; }
 .pt4-l { padding-top: 2rem; }
 .pt5-l { padding-top: 4rem; }
 .pt6-l { padding-top: 8rem; }
 .pt7-l { padding-top: 16rem; }
 .pv0-l { padding-top: 0; padding-bottom: 0; }
 .pv1-l { padding-top: .25rem; padding-bottom: .25rem; }
 .pv2-l { padding-top: .5rem; padding-bottom: .5rem; }
 .pv3-l { padding-top: 1rem; padding-bottom: 1rem; }
 .pv4-l { padding-top: 2rem; padding-bottom: 2rem; }
 .pv5-l { padding-top: 4rem; padding-bottom: 4rem; }
 .pv6-l { padding-top: 8rem; padding-bottom: 8rem; }
 .pv7-l { padding-top: 16rem; padding-bottom: 16rem; }
 .ph0-l { padding-left: 0; padding-right: 0; }
 .ph1-l { padding-left: .25rem; padding-right: .25rem; }
 .ph2-l { padding-left: .5rem; padding-right: .5rem; }
 .ph3-l { padding-left: 1rem; padding-right: 1rem; }
 .ph4-l { padding-left: 2rem; padding-right: 2rem; }
 .ph5-l { padding-left: 4rem; padding-right: 4rem; }
 .ph6-l { padding-left: 8rem; padding-right: 8rem; }
 .ph7-l { padding-left: 16rem; padding-right: 16rem; }
 .ma0-l { margin: 0; }
 .ma1-l { margin: .25rem; }
 .ma2-l { margin: .5rem; }
 .ma3-l { margin: 1rem; }
 .ma4-l { margin: 2rem; }
 .ma5-l { margin: 4rem; }
 .ma6-l { margin: 8rem; }
 .ma7-l { margin: 16rem; }
 .ml0-l { margin-left: 0; }
 .ml1-l { margin-left: .25rem; }
 .ml2-l { margin-left: .5rem; }
 .ml3-l { margin-left: 1rem; }
 .ml4-l { margin-left: 2rem; }
 .ml5-l { margin-left: 4rem; }
 .ml6-l { margin-left: 8rem; }
 .ml7-l { margin-left: 16rem; }
 .mr0-l { margin-right: 0; }
 .mr1-l { margin-right: .25rem; }
 .mr2-l { margin-right: .5rem; }
 .mr3-l { margin-right: 1rem; }
 .mr4-l { margin-right: 2rem; }
 .mr5-l { margin-right: 4rem; }
 .mr6-l { margin-right: 8rem; }
 .mr7-l { margin-right: 16rem; }
 .mb0-l { margin-bottom: 0; }
 .mb1-l { margin-bottom: .25rem; }
 .mb2-l { margin-bottom: .5rem; }
 .mb3-l { margin-bottom: 1rem; }
 .mb4-l { margin-bottom: 2rem; }
 .mb5-l { margin-bottom: 4rem; }
 .mb6-l { margin-bottom: 8rem; }
 .mb7-l { margin-bottom: 16rem; }
 .mt0-l { margin-top: 0; }
 .mt1-l { margin-top: .25rem; }
 .mt2-l { margin-top: .5rem; }
 .mt3-l { margin-top: 1rem; }
 .mt4-l { margin-top: 2rem; }
 .mt5-l { margin-top: 4rem; }
 .mt6-l { margin-top: 8rem; }
 .mt7-l { margin-top: 16rem; }
 .mv0-l { margin-top: 0; margin-bottom: 0; }
 .mv1-l { margin-top: .25rem; margin-bottom: .25rem; }
 .mv2-l { margin-top: .5rem; margin-bottom: .5rem; }
 .mv3-l { margin-top: 1rem; margin-bottom: 1rem; }
 .mv4-l { margin-top: 2rem; margin-bottom: 2rem; }
 .mv5-l { margin-top: 4rem; margin-bottom: 4rem; }
 .mv6-l { margin-top: 8rem; margin-bottom: 8rem; }
 .mv7-l { margin-top: 16rem; margin-bottom: 16rem; }
 .mh0-l { margin-left: 0; margin-right: 0; }
 .mh1-l { margin-left: .25rem; margin-right: .25rem; }
 .mh2-l { margin-left: .5rem; margin-right: .5rem; }
 .mh3-l { margin-left: 1rem; margin-right: 1rem; }
 .mh4-l { margin-left: 2rem; margin-right: 2rem; }
 .mh5-l { margin-left: 4rem; margin-right: 4rem; }
 .mh6-l { margin-left: 8rem; margin-right: 8rem; }
 .mh7-l { margin-left: 16rem; margin-right: 16rem; }
 .na1-l { margin: -.25rem; }
 .na2-l { margin: -.5rem; }
 .na3-l { margin: -1rem; }
 .na4-l { margin: -2rem; }
 .na5-l { margin: -4rem; }
 .na6-l { margin: -8rem; }
 .na7-l { margin: -16rem; }
 .nl1-l { margin-left: -.25rem; }
 .nl2-l { margin-left: -.5rem; }
 .nl3-l { margin-left: -1rem; }
 .nl4-l { margin-left: -2rem; }
 .nl5-l { margin-left: -4rem; }
 .nl6-l { margin-left: -8rem; }
 .nl7-l { margin-left: -16rem; }
 .nr1-l { margin-right: -.25rem; }
 .nr2-l { margin-right: -.5rem; }
 .nr3-l { margin-right: -1rem; }
 .nr4-l { margin-right: -2rem; }
 .nr5-l { margin-right: -4rem; }
 .nr6-l { margin-right: -8rem; }
 .nr7-l { margin-right: -16rem; }
 .nb1-l { margin-bottom: -.25rem; }
 .nb2-l { margin-bottom: -.5rem; }
 .nb3-l { margin-bottom: -1rem; }
 .nb4-l { margin-bottom: -2rem; }
 .nb5-l { margin-bottom: -4rem; }
 .nb6-l { margin-bottom: -8rem; }
 .nb7-l { margin-bottom: -16rem; }
 .nt1-l { margin-top: -.25rem; }
 .nt2-l { margin-top: -.5rem; }
 .nt3-l { margin-top: -1rem; }
 .nt4-l { margin-top: -2rem; }
 .nt5-l { margin-top: -4rem; }
 .nt6-l { margin-top: -8rem; }
 .nt7-l { margin-top: -16rem; }
 .strike-l { text-decoration: line-through; }
 .underline-l { text-decoration: underline; }
 .no-underline-l { text-decoration: none; }
 .tl-l { text-align: left; }
 .tr-l { text-align: right; }
 .tc-l { text-align: center; }
 .ttc-l { text-transform: capitalize; }
 .ttl-l { text-transform: lowercase; }
 .ttu-l { text-transform: uppercase; }
 .ttn-l { text-transform: none; }
 .f-6-l, .f-headline-l { font-size: 6rem; }
 .f-5-l, .f-subheadline-l { font-size: 5rem; }
 .f1-l { font-size: 3rem; }
 .f2-l { font-size: 2.25rem; }
 .f3-l { font-size: 1.5rem; }
 .f4-l { font-size: 1.25rem; }
 .f5-l { font-size: 1rem; }
 .f6-l { font-size: .875rem; }
 .f7-l { font-size: .75rem; }
 .measure-l { max-width: 30em; }
 .measure-wide-l { max-width: 34em; }
 .measure-narrow-l { max-width: 20em; }
 .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
 .small-caps-l { font-feature-settings: "c2sc"; font-variant: small-caps; }
 .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .center-l { margin-right: auto; margin-left: auto; }
 .clip-l { position: fixed !important; position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
 .ws-normal-l { white-space: normal; }
 .nowrap-l { white-space: nowrap; }
 .pre-l { white-space: pre; }
 .v-base-l { vertical-align: baseline; }
 .v-mid-l { vertical-align: middle; }
 .v-top-l { vertical-align: top; }
 .v-btm-l { vertical-align: bottom; }
}

/*

  Z-INDEX

  Base
    z = z-index

  Modifiers
    -0 = literal value 0
    -1 = literal value 1
    -2 = literal value 2
    -3 = literal value 3
    -4 = literal value 4
    -5 = literal value 5
    -999 = literal value 999
    -9999 = literal value 9999

    -max = largest accepted z-index value as integer

    -inherit = string value inherit
    -initial = string value initial
    -unset = string value unset

  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
  Spec: http://www.w3.org/TR/CSS2/zindex.html
  Articles:
    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

  Tips on extending:
  There might be a time worth using negative z-index values.
  Or if you are using tachyons with another project, you might need to
  adjust these values to suit your needs.

*/

.z-0 { z-index: 0; }

.z-1 { z-index: 1; }

.z-2 { z-index: 2; }

.z-3 { z-index: 3; }

.z-4 { z-index: 4; }

.z-5 { z-index: 5; }

.z-999 { z-index: 999; }

.z-9999 { z-index: 9999; }

.z-max {
  z-index: 2147483647;
}

.z-inherit { z-index: inherit; }

.z-initial { z-index: auto; z-index: initial; }

.z-unset { z-index: unset; }

/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Alert {
  padding: 20px 25px;
  font-size: 14px;
  line-height: 22px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #E4EDF5;
  border-left: 3px solid;
  background-color: white;
}

.Alert.hidden {
  display: none;
}

/* icon */

.Alert:before {
  content: '';
  display: block;
  position: absolute;
  height: 25px;
  width: 25px;
  top: 22px;
  left: 25px;
  background-size: 23px;
  background-repeat: no-repeat;
}

.Alert-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.Alert--success {
  border-left-color: #49B882;
  padding-left: 65px;
}

.Alert--success:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/tick-7280bd4486.svg);
}

.Alert--warning {
  border-left-color: #FCC79B;
  padding-left: 65px;
}

.Alert--warning:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/warning-d6b6a8d74a.svg);
}

.Alert--danger {
  border-left-color: #E365A6;
  padding-left: 65px;
}

.Alert--danger:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/error-a2b3677ee6.svg);
}

.Alert--info {
  border-left-color: #006CD1;
}

.Alert--hint {
  border-left-color: #C7E4FF;
  padding-left: 65px;
}

.Alert--hint:before {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/hint-4a960af74b.svg);
}

.Alert-body p {
  margin-bottom: .5em;
}

.Alert-body *:last-child {
  margin-bottom: 0;
}

.Alert-body ul {
  margin-bottom: .5em;
  list-style: disc;
  list-style-position: inside;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */

/* Safari, Chrome and Opera > 12.1 */

/* Internet Explorer */

/* Opera < 12.1 */

/**
 * Basic link styles with the added amazingness
 * of an arrow on the right-hand side.
 *
 * .ArrowLink(.ArrowLink.yellow, .ArrowLink.white)
 */

.ArrowLink {
  position: relative;
  padding-right: 15px;
}

.ArrowLink:after {
  content: '';
  display: block;
  height: 9px;
  width: 10px;
  background: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/leaf-6b6893d3f3.svg) no-repeat top right;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.ArrowLink.white:after {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/white-7578fae9ae.svg);
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/**
 * A thin layer on top of normalize.css that provides a starting point more
 * suitable for web applications.
 */

/**
 * Prevent margin and border from affecting element width.
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 * `input[type="search"]` overrides normalize.css more specific rule.
 */

html {
  box-sizing: border-box;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #425E78;
  font-size: 16px;
  line-height: 25px;

  /* Fix the thick text rendering on OSX */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

body {
  background: #fff;
}

/*
Set a min-width on non-responsive pages to prevent
layouts from exploding in smaller windows.
*/

body:not(.Responsive) {
  min-width: 1200px;
}

*,
*::before,
*::after,
input[type="search"] {
  box-sizing: inherit;
}

/**
 * Removes the default spacing and border for appropriate elements.
 */

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  margin: 0;
}

button {
  background: transparent;
  border: 0;
  padding: 0;
}

/**
 * Work around a Firefox/IE bug where the transparent `button` background
 * results in a loss of the default `button` focus styles.
 */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

iframe {
  border: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex="-1"]:focus {
  outline: none !important;
}

/**
 * Default link color. Makes it easier than defining the link styles in every component.
 */

a {
  color: #49B882;
  text-decoration: underline;
  transition: color 200ms ease-in;
}

a:hover,
a:focus {
  color: #54D194;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.OutlineButton {
  background-color: transparent;
  color: #49B882;
  border: 2px solid #49B882;
  padding: 20px 30px;
  border-radius: 50px;
  line-height: 16px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 200ms;
  cursor: pointer;
  text-align: center;
}

.OutlineButton.ArrowLink {
  padding: 20px 40px 20px 20px;
}

.OutlineButton.ArrowLink:after {
  right: 20px;
}

.OutlineButton:hover,
.OutlineButton:focus,
.OutlineButton:active {
  color: #54D194;
  border-color: #54D194;
  text-decoration: none;
  outline: none;
}

.OutlineButton:focus,
.OutlineButton:active {
  box-shadow: 0px 0px 7px 1px rgba(84, 209, 148, 0.5);
}

.OutlineButton[disabled],
.OutlineButton.loading {
  border-color: #E4EDF5;
  color: #AEC3D6;
  box-shadow: none;
}

.OutlineButton[disabled] {
  cursor: not-allowed;
}

.OutlineButton.loading {
  cursor: wait;
}

@media screen and (min-width: 40em) {
  .OutlineButton {
    padding: 15px 30px;
  }

  .OutlineButton.ArrowLink {
    padding: 20px 50px 20px 30px;
  }

  .OutlineButton.ArrowLink:after {
    right: 30px;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.OverlayButton {
  background-color: transparent;
  color: #FBFAF9;
  border: 2px solid rgba(255, 255, 255, 0.3);
  padding: 20px 30px;
  border-radius: 50px;
  line-height: 16px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 200ms;
  cursor: pointer;
  text-align: center;
}

.OverlayButton:hover,
.OverlayButton:focus,
.OverlayButton:active {
  color: #FFFFFF;
  border-color: #FFFFFF;
  text-decoration: none;
  outline: none;
}

.OverlayButton:focus,
.OverlayButton:active {
  box-shadow: 0px 0px 7px 1px rgba(255, 255, 255, 0.5);
}

.OverlayButton[disabled],
.OverlayButton.loading {
  color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.OverlayButton[disabled] {
  cursor: not-allowed;
}

.OverlayButton.loading {
  cursor: wait;
}

@media screen and (min-width: 40em) {
  .OverlayButton {
    padding: 15px 30px;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.StandardButton {
  background-color: #49B882;
  color: #F2FFF9;
  border-radius: 50px;
  border: 0;
  line-height: 16px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 200ms;
  cursor: pointer;
  text-align: center;
  padding: 22px 30px;
}

.StandardButton:hover,
.StandardButton:focus,
.StandardButton:active {
  background-color: #54D194;
  color: white;
  text-decoration: none;
  outline: none;
}

.StandardButton:focus,
.StandardButton:active {
  box-shadow: 0px 0px 7px 1px rgba(84, 209, 148, 0.5);
}

.StandardButton[disabled],
.StandardButton.loading {
  background-color: #E4EDF5;
  color: #7999B8;
}

.StandardButton[disabled] {
  cursor: not-allowed;
}

.StandardButton.loading {
  cursor: wait;
}

.StandardButton--compact {
  padding: 13px 26px;
}

@media screen and (min-width: 40em) {
  .StandardButton {
    padding: 17px 30px;
  }

  .StandardButton--compact {
    padding: 13px 26px;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.WhiteButton {
  background-color: #FFFFFF;
  color: #49B882;
  border-radius: 50px;
  border: 0;
  line-height: 16px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: all 200ms;
  cursor: pointer;
  text-align: center;
  padding: 22px 30px;
}

.WhiteButton:hover,
.WhiteButton:focus,
.WhiteButton:active {
  color: #54D194;
  text-decoration: none;
  outline: none;
}

.WhiteButton:focus,
.WhiteButton:active {
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
}

.WhiteButton[disabled],
.WhiteButton.loading {
  opacity: 0.5;
}

.WhiteButton[disabled] {
  cursor: not-allowed;
}

.WhiteButton.loading {
  cursor: wait;
}

@media screen and (min-width: 40em) {
  .WhiteButton {
    padding: 17px 30px;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.CodeBlock {
  height: 90px;
  font-family: 'Droid Sans Mono', Monaco, 'Lucida Console', monospace;
  color: #00386C;
  font-size: 15px;
  border-radius: 6px;
  padding: 17px 25px;
  border: 1px solid #E4EDF5;
  margin: 30px 0;
}

.CodeBlock-highlight {
  color: #49B882;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.CodeEditor {
  background: #fff;
  border-radius: 10px;
  padding: 25px 20px;
  font-family: 'Droid Sans Mono', Monaco, 'Lucida Console', monospace;
  font-size: 12px;
  border: 1px solid #EDEDED;
  width: 330px;
  margin: 0 auto;
}

.CodeEditor-lines, .CodeEditor-code {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}

.CodeEditor-code {
  width: 200px;
}

.CodeEditor-lines {
  position: relative;
  top: -3px;
  padding-left: 20px;
  margin-right: 10px;
  color: #C3C4C4;
}

.CodeEditor li {
  margin: 0;
  padding: 0;
  height: 15px;
  line-height: 15px;
  margin: 13px 0 0 0;
}

.CodeEditor li:first-child {
  margin-top: 0;
}

.CodeEditor-loading {
  background: #F5F5F5;
}

.CodeEditor-loading:first-child {
  width: 20%;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Coin {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #E4EDF5;
  height: 85px;
  position: relative;
  width: 85px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}

.Coin--small {
  height: 50px;
  width: 50px;
}

.Coin--centered {
  margin-left: auto;
  margin-right: auto;
}
.CustomerLogo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  overflow: hidden;
  text-indent: -9999px;
  width: 100%;
  text-align: center;
}

.CustomerLogo--monotone {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.22086999999999998 0.70785 0.07128 0 0 0.21087 0.71795 0.07128 0 0 0.21087 0.70785 0.08127999999999999 0 0 0 0 0 1 0" /></filter></svg>#filter');
  filter: saturate(0%);
}

/*
 * We have the option to pass through a set pixel width/height when using the customer-logo helper.
 * https://github.com/segmentio/site-public/blob/master/partials/customer-logo/template.hbs
 * which is great for defining a width/height for a logo for desktop.
 * But once you get to mobile it just looks janky.
 * So using an ugly !important here we make sure
 * logos do not collide at a mobile level.
 */

@media (max-width: 360px) {
  .CustomerLogo {
    width: 100% !important;
  }
}

/**
 * Add logos below
 */

.CustomerLogo[data-company="99designs"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/99designs-ee825cee0a.svg);
}

.CustomerLogo[data-company="adobe"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/adobe-14fec4a919.svg);
}

.CustomerLogo[data-company="adjust"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/adjust-7078657aeb.svg);
}

.CustomerLogo[data-company="adroll"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/adroll-logo-f1788f4d10.svg);
}

.CustomerLogo[data-company="adwords"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/adwords-logo-9c1eee2965.png);
}

.CustomerLogo[data-company="amplitude"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/amplitude-895293afa5.png);
}

.CustomerLogo[data-company="angieslist"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/angieslist-0cadba0f59.png);
}

.CustomerLogo[data-company="apartment-list"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/apartment-list-185e1a61cd.svg);
}

.CustomerLogo[data-company="appboy"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/appboy-9f7a2462ff.svg);
}

.CustomerLogo[data-company="appdirect"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/appdirect-2c24dcd146.svg);
}

.CustomerLogo[data-company="artsy"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/artsy-df5fec2ec6.svg);
}

.CustomerLogo[data-company="atlassian"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/atlassian-4c7e30a1df.svg);
}

.CustomerLogo[data-company="autodesk"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/autodesk-41cf7a1715.svg);
}

.CustomerLogo[data-company="baublebar"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/baublebar-53b93f321d.svg);
}

.CustomerLogo[data-company="bittorrent"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bittorrent-105c0a65d5.svg);
}

.CustomerLogo[data-company="bonobos"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bonobos-b2a9a3b2db.svg);
}

.CustomerLogo[data-company="breather"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/breather-5b29a10fae.svg);
}

.CustomerLogo[data-company="campaignmonitor"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/campaignmonitor-b837abf794.svg);
}

.CustomerLogo[data-company="casper"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/casper-419e89bc99.png);
}

.CustomerLogo[data-company="charitywater"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/charitywater-576b73c190.svg);
}

.CustomerLogo[data-company="chartio"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/chartio-863861d86c.svg);
}

.CustomerLogo[data-company="clearbit"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/clearbit-948c92f35d.png);
}

.CustomerLogo[data-company="crate-and-barrel"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/crate-and-barrel-baf1eecbf3.svg);
}

.CustomerLogo[data-company="criteo"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/criteo-1177f47919.svg);
}

.CustomerLogo[data-company="code_cademy"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/code_cademy-d67d3f1edc.svg);
}

.CustomerLogo[data-company="condenast"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/condenast-61748fad8b.svg);
}

.CustomerLogo[data-company="contentful"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/contentful-0f880f1dbf.svg);
}

.CustomerLogo[data-company="customerio"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/customerio-666f9f6817.svg);
}

.CustomerLogo[data-company="deliveroo"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/deliveroo-830667255c.svg);
}

.CustomerLogo[data-company="digitalocean"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/digitalocean-1a0d88d48b.svg);
}

.CustomerLogo[data-company="docker"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/docker-8dde2a96ba.svg);
}

.CustomerLogo[data-company="docusign"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/docusign-870f509f0e.svg);
}

.CustomerLogo[data-company="draftkings"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/draftkings-b5cf2d061b.svg);
}

.CustomerLogo[data-company="edx"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/edx-3a78bc7a4e.svg);
}

.CustomerLogo[data-company="everlane"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/everlane-63811f56a1.svg);
}

.CustomerLogo[data-company="facebook"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/facebook-32bc074066.svg);
}

.CustomerLogo[data-company="fender"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/fender@2x-bae3d74a97.png);
}

.CustomerLogo[data-company="fender"][data-color="red"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/fender_red-2efc3a4ce7.svg);
}

.CustomerLogo[data-company="gap"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/gap-09cd64a62e.png);
}

.CustomerLogo[data-company="glossier"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/glossier-7b92562604.svg);
}

.CustomerLogo[data-company="goodeggs"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/goodeggs-02c45e0e27.svg);
}

.CustomerLogo[data-company="googleanalytics"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/googleanalytics-dd61a102c4.svg);
}

.CustomerLogo[data-company="heroku"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/heroku-57053717e3.svg);
}

.CustomerLogo[data-company="honestbee"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/honestbee-035a5eb994.png);
}

.CustomerLogo[data-company="hoteltonight"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/hotel_tonight@2x-329e1fa2a8.png);
}

.CustomerLogo[data-company="hubspot"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/hubspot-d7bd3fbfa4.svg);
}

.CustomerLogo[data-company="ibm"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/ibm-5df5346048.svg);
}

.CustomerLogo[data-company="instacart"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/instacart-5b23eaaf82.svg);
}

.CustomerLogo[data-company="intuit"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/intuit-250e875b16.svg);
}

.CustomerLogo[data-company="intercom"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/intercom-64ff89d40d.svg);
}

.CustomerLogo[data-company="invision"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/invision-c3ac9a20fe.svg);
}

.CustomerLogo[data-company="invoice2go"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/invoice2go-7c15bb80c5.svg);
}

.CustomerLogo[data-company="leadpages"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/leadpages-cd34742e88.svg);
}

.CustomerLogo[data-company="livenation"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/livenation-1e81e96990.svg);
}

.CustomerLogo[data-company="logmein"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/logmein-042538c666.svg);
}

.CustomerLogo[data-company="logmein"][data-color="blue"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/logmein-blue-b175cce33d.svg);
}

.CustomerLogo[data-company="looker"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/looker-e597e8b2a4.svg);
}

.CustomerLogo[data-company="mattermark"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mattermark-ec44dbf0ea.svg);
}

.CustomerLogo[data-company="mailchimp"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mailchimp-0c3a37b813.svg);
}

.CustomerLogo[data-company="mesosphere"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mesosphere-4054f1626d.svg);
}

.CustomerLogo[data-company="mode"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/mode-afe00d9dee.svg);
}

.CustomerLogo[data-company="moz"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/moz-441d26c1fe.svg);
}

.CustomerLogo[data-company="munchery"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/munchery-b2dd90f492.svg);
}

.CustomerLogo[data-company="newrelic"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/newrelic-4c23a1407a.svg);
}

.CustomerLogo[data-company="nextmo"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/nextmo-a8a7f2c450.png);
}

.CustomerLogo[data-company="nike"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/nike-20e24f7df7.png);
}

.CustomerLogo[data-company="nokia"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/nokia-4be18029a8.svg);
}

.CustomerLogo[data-company="olark"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/olark-69482eb2ce.svg);
}

.CustomerLogo[data-company="oldnavy"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/oldnavy-ce3d1f0527.png);
}

.CustomerLogo[data-company="optimizely"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/optimizely-e837c46585.svg);
}

.CustomerLogo[data-company="pagerduty"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/pagerduty-056cb1a931.svg);
}

.CustomerLogo[data-company="pebble"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/pebble-1096f31518.svg);
}

.CustomerLogo[data-company="plated"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/plated-9df193eb68.svg);
}

.CustomerLogo[data-company="product-hunt"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/product-hunt-cbb6915070.svg);
}

.CustomerLogo[data-company="prosper"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/prosper-dfbf3deeb8.svg);
}

.CustomerLogo[data-company="quicksprout"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/quicksprout-c6a02b5b0f.svg);
}

.CustomerLogo[data-company="rackspace"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/rackspace-4a767f6476.svg);
}

.CustomerLogo[data-company="recurly"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/recurly-ceae665ba5.svg);
}

.CustomerLogo[data-company="reforge"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/reforge-e8b0144677.svg);
}

.CustomerLogo[data-company="relayfoods"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/relayfoods-388efb082b.svg);
}

.CustomerLogo[data-company="responsys"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/responsys-dafec09e57.svg);
}

.CustomerLogo[data-company="reuters"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/reuters-95b6eb0650.svg);
}

.CustomerLogo[data-company="runkeeper"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/runkeeper-579f7b479d.svg);
}

.CustomerLogo[data-company="salesforce"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/salesforce-74b3a9c3c6.svg);
}

.CustomerLogo[data-company="salesforce-foundation"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/salesforce-foundation-8644dc61d5.svg);
}

.CustomerLogo[data-company="salesforce-marketing-cloud"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/salesforce-marketing-cloud-8c511f251f.svg);
}

.CustomerLogo[data-company="sendgrid"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/sendgrid-3efab7cb79.svg);
}

.CustomerLogo[data-company="shuddle"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/shuddle-4d3721c4bb.svg);
}

.CustomerLogo[data-company="simple"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/simple-810843ec52.svg);
}

.CustomerLogo[data-company="spothero"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/spothero-f4a27cc755.png);
}

.CustomerLogo[data-company="stripe"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/stripe-d8a01dec38.svg);
}

.CustomerLogo[data-company="staples"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/staples-c145736245.png);
}

.CustomerLogo[data-company="steelseries"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/steelseries-e2c1fcfca3.svg);
}

.CustomerLogo[data-company="yahoo"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/yahoo-36bc2bddc0.svg);
}

.CustomerLogo[data-company="theeconomist"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/theeconomist-ba633fcaf1.svg);
}

.CustomerLogo[data-company="theknot"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/theknot-8eab3c2dfd.svg);
}

.CustomerLogo[data-company="themotleyfool"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/themotleyfool-58b28ac4f4.svg);
}

.CustomerLogo[data-company="therealreal"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/therealreal-2ad0c763db.svg);
}

.CustomerLogo[data-company="tradesy"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/tradesy-5a6647dd8b.svg);
}

.CustomerLogo[data-company="trunkclub"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/trunkclub-18e965a8c9.svg);
}

.CustomerLogo[data-company="trustpilot"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/trustpilot-890151e42f.png);
}

.CustomerLogo[data-company="touchofmodern"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/touchofmodern-1f8a0cfb45.png);
}

.CustomerLogo[data-company="uber"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/uber-08d0d1cdef.svg);
}

.CustomerLogo[data-company="urbanairship"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/urbanairship-e23a1fe333.svg);
}

.CustomerLogo[data-company="uservoice"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/uservoice-5ec67426d5.svg);
}

.CustomerLogo[data-company="vsco"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/vsco-fca5eab0f0.svg);
}

.CustomerLogo[data-company="warbyparker"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/warbyparker-a104e8d561.svg);
}

.CustomerLogo[data-company="wb"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/warnerbros-7c7a7f0581.svg);
  background-size: auto 90%;
}

.CustomerLogo[data-company="wistia"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/wistia-cbd98e80dd.svg);
}

.CustomerLogo[data-company="xogroup"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/xogroup-f99992d343.svg);
  background-size: 70%;
}

.CustomerLogo[data-company="xoom"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/xoom-687d9b445c.svg);
  background-size: 70%;
}

.CustomerLogo[data-company="yahoo"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/yahoo-36bc2bddc0.svg);
}

.CustomerLogo[data-company="zenefits"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/zenefits-de35f85b7a.svg);
}

.CustomerLogo[data-company="zenpayroll"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/zenpayroll-0bf097f80d.svg);
}

.CustomerLogo[data-company="zendesk"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/zendesk-bbb5c60262.png);
}

.CustomerLogo[data-company="zipcar"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/zipcar-562066ccb0.svg);
}

/** opaque */

.CustomerLogo[data-color="opaque"] {
  opacity: .2;
}

.CustomerLogo[data-company="autodesk"][data-color="opaque"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/autodesk-opaque-555ed63cda.svg);
}

.CustomerLogo[data-company="apartment-list"][data-color="opaque"]  {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/apartment-list-opaque-919b7f743a.svg);
}

.CustomerLogo[data-company="instacart"][data-color="opaque"]  {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/instacart-opaque-8f3cee2a69.svg);
}

.CustomerLogo[data-company="munchery"][data-color="opaque"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/munchery-opaque-dcd2dba5ce.svg);
}

/** sizes */

.CustomerLogo[size="50"] {
  background-size: 50%;
}

.CustomerLogo[size="60"] {
  background-size: 60%;
}

.CustomerLogo[size="70"] {
  background-size: 70%;
}

.CustomerLogo[size="80"] {
  background-size: 80
}

.CustomerLogo[size="90"] {
  background-size: 90%;
}

.CustomerLogo[size="100"] {
  background-size: 100%;
}
.CustomerQuote {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  text-align: center;
}

.CustomerQuote-avatar {
  border-radius: 100px;
  height: 100px;
  width: 100px;
}

.CustomerQuote-image {
  border-radius: 100px;
  display: block;
  height: 100%;
  width: 100%;
}

.CustomerQuote-content:before {
  content: '\201C';
}

.CustomerQuote-content:after {
  content: '\201D';
}

@media (max-width: 480px) {
  .CustomerQuote-actions {
    margin-right: -3rem;
    margin-left: -3rem;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Divider {
  border: 0;
  height: 1px;
  background: #E4EDF5;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
}

.Divider-icon {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.Divider--icon {
  position: relative;
}

.Divider--icon .Icon-container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.Divider--small {
  border: 0;
  border-radius: 2px;
  width: 20px;
  height: 4px;
  background: #E4EDF5;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Error {
  background: #FBFAF9;
}

.pre-wrap {
  white-space: pre-wrap;
}
.Footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: center;
      justify-content: center;
  white-space: nowrap;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.CheckboxField {
  margin-right: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.CheckboxField--small .CheckboxField-control {
  margin-top: -3px;
}

.CheckboxField--small .CheckboxField-label {
  font-size: 16px;
}

.CheckboxField-label {
  display: inline-block;
  color: #425E78;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.CheckboxField-control {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: white no-repeat center;
  border: 1px solid #E4EDF5;
  border-radius: 2px;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 10px;
}

.CheckboxField-control[type="radio"] {
  border-radius: 50%;
}

.CheckboxField-control--small {
  height: 16px;
  width: 16px;
}

.CheckboxField-control:focus {
  outline: none;
}

.CheckboxField-control:hover {
  border-color: #49B882;
}

.CheckboxField-control:checked {
  background-color: #49B882;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/checkbox-tick-31637f74ab.svg);
  border-color: #49B882;
}
.FieldGroup {

}

.FieldGroup--narrow {
  width: 300px;
}

.FieldGroup-left {
  display: block;
  overflow: hidden;
  position: relative;
  padding-right: 5px;
}

.FieldGroup-right {
  float: right;
}/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Field {
  display: block;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.Field:last-child {
  margin-bottom: 0;
}

.Field-label {
  margin-bottom: 10px;
  font-size: 16px;
  color: #00386C;
  line-height: 20px;
  font-weight: 400;
}

.Field-help {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 3px;
  position: relative;
  opacity: 0.5;
}

.Field-help:hover {
  opacity: 1;
}

.Field-help:hover .Field-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.Field-hint,
.Field-text {
  color: #00386C;
  display: block;
  font-size: 14px;
  margin-top: 5px;
}

.Field-hint strong {
  font-weight: 500;
  color: #00386C;
}

.Field-hint a {
  color: #00386C;
  text-decoration: underline;
}
.Fieldset {

}/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.FormGroup {

}

.FormGroup-item.hidden {
  display: none;
}

.FormGroup-title {
  font-size: 40px;
  line-height: 1;
  font-weight: 300;
  padding: 45px 50px 55px;
  color: #00386C;
}

.FormGroup-item {
  border-top: 1px solid #E4EDF5;
  padding: 50px;
}

.FormGroup-item.loading {
  opacity: 0.5;
  pointer-events: none;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Form {
  font-size: 20px;
  line-height: 27px;
  color: #00386C;
}

.Form.loading {
  opacity: 0.5;
  pointer-events: none;
}

.Form-title {
  font-weight: 400;
  font-size: 28px;
  color: #00386C;
  line-height: 22px;
  margin-bottom: 10px;
  -webkit-font-smoothing: antialiased;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.MapField {

}

.MapField-row {
  margin-bottom: 5px;
}

.MapField-row:last-child {
  margin-bottom: 0;
}

.MapField-left {
  display: block;
  overflow: hidden;
  position: relative;
  padding-right: 20px;
}

.MapField-left:after {
  display: block;
  content: '';
  height: 16px;
  width: 9px;
  background: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/caret-right-e05eff2253.svg) no-repeat;
  position: absolute;
  right: 5px;
  top: 50%;
  margin-top: -8px;
}

.MapField-right {
  width: 200px;
  float: right;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.SelectField {
  vertical-align: top;
  position: relative;
}

.SelectField--small {
  font-size: 16px;
}

.SelectField--narrow .SelectField-control {
  width: 300px;
}

.SelectField-control {
  position: relative;
  display: inline-block;
  width: 100%;
}

.SelectField-control select {
  /*color: var(--color-blue-900);
  background: white;
  border: 1px solid var(--color-grey-100);
  padding: 6px 13px;
  border-radius: 2px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;*/
}

/*
.SelectField-caret {
  background: url("../images/caret.svg") no-repeat center white;
  height: 30px;
  width: 30px;
  position: absolute;
  bottom: 11px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  pointer-events: none;
  z-index: 100;
}*/

/*.SelectField-control select:focus {
  color: #998F7F;
  color: var(--color-blue-900);
  outline: none;
  border-color: var(--color-green-500);
}*/

/*.SelectField-control:focus {
  outline: none;
  border-color: var(--color-grey-100);
}*/
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.TextField {

}

.TextField.invalid .TextField-control {
  border-color: #E365A6;
}

.TextField--small .TextField-control {
  font-size: 16px;
}

.TextField-control,
.TextField-prefix {
  color: #00386C;
  background-color: white;
  border: 1px solid #E4EDF5;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 9px 15px 11px;
  border-radius: 4px;
  transition: border 200ms linear;
}

.TextField-prefix {
  display: inline-block;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0.1em;
  float: left;
  line-height: 1.3;
}

.TextField-control {
  line-height: 1;
  width: 100%;
  position: relative;
  z-index: 2;
}

.TextField-control--short {
  width: 150px;
}

.TextField-control--prefixed {
  border-left: 0;
  padding-left: 0;
  border-radius: 0 .15em .15em 0;
}

.TextField-control:focus,
.TextField-control:focus + .TextField-prefix {
  outline: none;
  border-color: #49B882;
}

.TextField-control:disabled {
  background: #FBFAF9;
  color: #00386C;
}

.TextField-control:focus {
  color: #00386C;
}

.TextField-control::-webkit-input-placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}

.TextField-control:-ms-input-placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}

.TextField-control::placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}

.TextField-control.invalid {
  border-color: #E365A6;
  color: rgb(227, 101, 166);
}

@keyframes TextField-errorMessage {
  from {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}

.TextField-errorMessage {
  background: #E365A6;
  color: white;
  padding: 15px 15px 10px;
  margin-top: -5px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  animation: TextField-errorMessage 200ms ease-out;
  animation-fill-mode: both;
  z-index: 1;
  position: relative;
}

.TextField-errorMessage p {
  line-height: 1.2;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.TextareaField {

}

.TextareaField textarea {
  color: #00386C; /* TODO */
  background-color: white; /* TODO */
  border: 1px solid #E4EDF5; /* TODO */
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 15px 15px;
  border-radius: 2px;
  width: 100%;
  min-height: 150px;
  font-size: 16px;
  display: block;
}

.TextareaField textarea:focus {
  outline: none;
  border-color: #49B882;
}

.TextareaField textarea:disabled {
  background: #FBFAF9;
  color: #00386C;
}

.TextareaField textarea:focus {
  color: #00386C;
}

.TextareaField textarea::-webkit-input-placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}

.TextareaField textarea:-ms-input-placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}

.TextareaField textarea::placeholder {
  font-weight: 400;
  color: rgba(0, 56, 108, 0.5);
  transition: color .2s;
  position: relative;
  top: 1px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/** @define Grid */

/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */

/* Grid container
   ========================================================================== */

/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */

.Grid {
  box-sizing: border-box;
  display: -ms-flexbox;
  display: flex; /* 1 */
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignCenter {
  -ms-flex-pack: center;
      justify-content: center;
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignSpaceBetween {
  -ms-flex-pack: justify;
      justify-content: space-between;
}

/**
 * Modifier: center align all grid cells
 */

.Grid--alignSpaceAround {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

/**
 * Modifier: right align all grid cells
 */

.Grid--alignRight {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

/**
 * Modifier: middle-align grid cells
 */

.Grid--alignMiddle {
  -ms-flex-align: center;
      align-items: center;
}

/**
 * Modifier: bottom-align grid cells
 */

.Grid--alignBottom {
  -ms-flex-align: end;
      align-items: flex-end;
}

/**
 * Modifier: allow cells to equal distribute width
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex - http://git.io/vllC7
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis - http://git.io/vllWx
 */

.Grid--fit > .Grid-cell {
  -ms-flex: 1 1 0%;
      flex: 1 1 0%; /* 1 */
}

/**
 * Modifier: all cells match height of tallest cell in a row
 */

.Grid--equalHeight > .Grid-cell {
  display: -ms-flexbox;
  display: flex;
}

/**
 * Modifier: gutters
 */

.Grid--withGutter {
  margin-left: -1rem;
  margin-right: -1rem;
}

.Grid--withGutter > .Grid-cell {
  padding-left: 1rem;
  padding-right: 1rem;
}

/*
 Direction
*/

.Grid--rowReverse {
  -ms-flex-direction: row-reverse;
      flex-direction: row-reverse;
}

.Grid--row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.Grid--columnReverse {
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
}

.Grid--column {
  -ms-flex-direction: column;
      flex-direction: column;
}

@media screen and (min-width: 40em) {
  .Grid--rowReverse-ns {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
  .Grid--row-ns {
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .Grid--columnReverse-ns {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }
  .Grid--column-ns {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

@media screen and (min-width: 40em) and (max-width: 70em) {
  .Grid--rowReverse-m {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
  .Grid--row-m {
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .Grid--columnReverse-m {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }
  .Grid--column-m {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

@media screen and (min-width: 70em) {
  .Grid--rowReverse-l {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
  }
  .Grid--row-l {
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .Grid--columnReverse-l {
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
  }
  .Grid--column-l {
    -ms-flex-direction: column;
        flex-direction: column;
  }
}

/* Grid cell
   ========================================================================== */

/**
 * No explicit width by default. Rely on combining `Grid-cell` with a dimension
 * utility or a component class that extends 'Grid'.
 *
 * 1. Set flex items to full width by default
 */

.Grid-cell {
  box-sizing: inherit;
}

/**
 * Modifier: horizontally center one unit
 * Set a specific unit to be horizontally centered. Doesn't affect
 * any other units. Can still contain a child `Grid` object.
 */

.Grid-cell--center {
  margin: 0 auto;
}
.Icon {
  background: no-repeat center;
  display: block;
}

.IconContainer35 {
  display: block;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  height: 35px;
}

/**
 * Large
 */

.Icon[size="large"] {

}

.Icon--center {
  margin: 0 auto;
}

.Icon[size="large"][type="browser"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-browser-green-bb266d789c.svg);
  height: 38px;
  width: 55px;
}

.Icon[size="large"][type="watsi"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-watsi-green-f6e1c77d80.svg);
  height: 42px;
  width: 55px;
}

.Icon[size="large"][type="circledcross"][color="grey"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-circledcross-grey-e283a0ed0f.svg);
  background-size: contain;
  height: 72px;
  width: 72px;
}

.Icon[size="large"][type="dash"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-dash-green-b8c8bb6b8a.svg);
  height: 43px;
  width: 43px;
}

.Icon[size="large"][type="usecase"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-usecase-green-3efe73bb4d.svg);
  height: 44px;
  width: 40px;
}

.Icon[size="large"][type="performance"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-performance-green-9656c9fc41.svg);
  height: 44px;
  width: 27px;
}

.Icon[size="large"][type="ads"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-ads-green-0e5deffaa2.svg);
  height: 42px;
  width: 37px;
}

.Icon[size="large"][type="faster"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-faster-green-afd701c0dd.svg);
  height: 44px;
  width: 38px;
}

.Icon[size="large"][type="tools"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-tools-green-d031e2bf06.svg);
  height: 45px;
  width: 45px;
}

.Icon[size="large"][type="importdata"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-importdata-green-9b619618d5.svg);
  height: 45px;
  width: 44px;
}

.Icon[size="large"][type="replay"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-replay-green-75bec4bac1.svg);
  height: 40px;
  width: 45px;
}

.Icon[size="large"][type="consistency"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-consistency-green-28861b8216.svg);
  height: 44px;
  width: 44px;
}

.Icon[size="large"][type="human"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-human-green-957f796096.svg);
  height: 44px;
  width: 44px;
}

.Icon[size="large"][type="scale"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-scale-green-ab2569db01.svg);
  height: 38px;
  width: 43px;
}

.Icon[size="large"][type="analytics"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-analytics-e3e3e213b8.svg);
  width: 57px;
  height: 48px;
}

.Icon[size="large"][type="arrow"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-arrow-718d233b9c.svg);
  width: 65px;
  height: 21px;
}

.Icon[size="large"][type="helpdesk"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-helpdesk-de1d3ca1dc.svg);
  width: 66px;
  height: 66px;
}

.Icon[size="large"][type="collections"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-collections-97aa43bdf2.svg);
  width: 69px;
  height: 64px;
}

.Icon[size="large"][type="customer"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-customer-44afdd7609.svg);
  width: 45px;
  height: 61px;
}

.Icon[size="large"][type="integrations"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-integrations-3777395817.svg);
  width: 53px;
  height: 59px;
}

.Icon[size="large"][type="methods"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-methods-a2651741ad.svg);
  width: 56px;
  height: 52px;
}

.Icon[size="large"][type="methods"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-methods-green-0008a381d8.svg);
  width: 56px;
  height: 52px;
}

.Icon[size="large"][type="search"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-search-big-748ef3e6fe.svg);
  width: 197px;
  height: 197px;
}

.Icon[size="large"][type="platforms"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-platforms-73198f2fb7.svg);
  width: 75px;
  height: 46px;
}

.Icon[size="large"][type="platforms"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-platforms-green-78fddf7765.svg);
  width: 81px;
  height: 51px;
}

.Icon[size="large"][type="payments"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-payments-e8869c55f6.svg);
  width: 61px;
  height: 54px;
}

.Icon[size="large"][type="research"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-research-835392e7cd.svg);
  width: 48px;
  height: 60px;
}

.Icon[size="large"][type="research"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-research-green-bc2e6d2a9d.svg);
  width: 67px;
  height: 73px;
}

.Icon[size="large"][type="servers"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-servers-52412b90bc.svg);
  width: 58px;
  height: 52px;
}

.Icon[size="large"][type="sources"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-sources-a052b50b7f.svg);
  width: 47px;
  height: 66px;
}

.Icon[size="large"][type="sources"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-sources-green-46b954671c.svg);
  width: 47px;
  height: 66px;
}

.Icon[size="large"][type="warehouses"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-warehouses-17b6340c31.svg);
  width: 45px;
  height: 53px;
}

.Icon[size="large"][type="warehouses"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-warehouses-green-ff7c6c9fd0.svg);
  width: 45px;
  height: 53px;
}

.Icon[size="large"][type="servers"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-servers-green-7f60cbc9ea.svg);
  width: 32px;
  height: 32px;
}

.Icon[size="large"][type="mobile"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-mobile-green-19f02e1de1.svg);
  width: 21px;
  height: 33px;
}

.Icon[size="large"][type="web"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-web-green-8aa0bad283.svg);
  width: 48px;
  height: 33px;
}

.Icon[size="large"][type="email"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-email-green-517431244a.svg);
  width: 42px;
  height: 38px;
}

.Icon[size="large"][type="analytics"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-analytics-green-5e58179475.svg);
  width: 33px;
  height: 30px;
}

.Icon[size="large"][type="attribution"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-attribution-green-74a0fcdb3c.svg);
  width: 33px;
  height: 34px;
}

.Icon[size="large"][type="helpdesk"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-helpdesk-green-88a33e1394.svg);
  width: 33px;
  height: 33px;
}

.Icon[size="large"][type="cloud"][color="green"]{
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-large-cloud-green-d85a67a273.svg);
  width: 41px;
  height: 31px;
}

/**
 * Small
 */

.Icon[size="small"] {}

.Icon[size="small"][type="ads"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-ads-fbd646ecdb.svg);
  width: 29px;
  height: 33px;
}

.Icon[type="small-arrow-left"][color="white"],
.Icon[size="small"][type="arrow-left"][color="white"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-arrow-left-20c0a7bc7a.svg);
  height: 22px;
  width: 28px;
}

.Icon[size="small"][type="commuter-benefits"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-commuter-benefits-48b4cb0446.svg);
  background-size: contain;
  height: 40px;
  width: 29px;
}

.Icon[size="small"][type="close"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-close-b3011d9f46.svg);
  width: 18px;
  height: 18px;
}

.Icon[size="small"][type="document"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-document-bfe7822d11.svg);
  width: 32px;
  height: 38px;
}

.Icon[size="small"][type="selectivesync"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-selectivesync-b0195ab41d.svg);
  width: 34px;
  height: 26px;
}

.Icon[size="small"][type="search"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-search-normal-a829f71402.svg);
  width: 29px;
  height: 29px;
}

.Icon[size="small"][type="arrow"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-arrow-60736cbc52.svg);
  width: 31px;
  height: 32px;
}

.Icon[size="small"][type="advanced"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-advanced-7cb71a97ae.svg);
  width: 33px;
  height: 26px;
}

.Icon[size="small"][type="alerts"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-alerts-b35ee4f6f1.svg);
  width: 33px;
  height: 26px;
}

.Icon[size="small"][type="consistency"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-consistency-269c710a57.svg);
  width: 30px;
  height: 31px;
}

.Icon[size="small"][type="crm"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-crm-7ff4e9ca4c.svg);
  width: 28px;
  height: 27px;
}

.Icon[size="small"][type="cap"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-cap-7a442c3cea.svg);
  width: 38px;
  height: 29px;
}

.Icon[size="small"][type="chart"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-chart-c95974bbaf.svg);
  height: 24px;
  width: 24px;
}

.Icon[size="small"][type="converge"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-converge-91c5d4c72d.svg);
  height: 24px;
  width: 24px;
}

.Icon[size="small"][type="cost"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-cost-eb1a641ff6.svg);
  height: 25px;
  width: 25px;
}

.Icon[size="small"][type="community"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-community-932ce74f98.svg);
  width: 39px;
  height: 26px;
}

.Icon[size="small"][type="dash"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-dash-b2d52caf62.svg);
  width: 26px;
  height: 26px;
}

.Icon[size="small"][type="data"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-data-795cee302b.svg);
  width: 28px;
  height: 26px;
}

.Icon[size="small"][type="database"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-database-a919425b21.svg);
  width: 27px;
  height: 27px;
}

.Icon[size="small"][type="debug"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-debug-4ec73cc4a9.svg);
  width: 28px;
  height: 33px;
}

.Icon[size="small"][type="docs"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-docs-544ca95604.svg);
  width: 27px;
  height: 32px;
}

.Icon[size="small"][type="ecommerce"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-ecommerce-959e9f951b.svg);
  width: 30px;
  height: 30px;
}

.Icon[size="small"][type="efficient"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-efficient-21457722f8.svg);
  width: 38px;
  height: 30px;
}

.Icon[size="small"][type="encrypted"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-encrypted-3af887da37.svg);
  width: 37px;
  height: 28px;
}

.Icon[size="small"][type="email"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-email-2c69a11994.svg);
  width: 32px;
  height: 29px;
}

.Icon[size="small"][type="equity"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-equity-642517c144.svg);
  width: 35px;
  height: 28px;
}

.Icon[size="small"][type="faster"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-faster-823be23862.svg);
  width: 27px;
  height: 31px;
}

.Icon[size="small"][type="funnel"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-funnel-404dfed276.svg);
  height: 24px;
  width: 20px;
}

.Icon[size="small"][type="gym"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-gym-8fa3515af7.svg);
  width: 30px;
  height: 30px;
}

.Icon[size="small"][type="healthcare"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-healthcare-62f8a0daa2.svg);
  width: 30px;
  height: 28px;
}

.Icon[size="small"][type="helpdesk"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-helpdesk-ccb6668b3e.svg);
  width: 31px;
  height: 31px;
}

.Icon[size="small"][type="human"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-human-8db6d22aec.svg);
  width: 29px;
  height: 29px;
}

.Icon[size="small"][type="identify"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-identify-aa94ceb696.svg);
  width: 55px;
  height: 31px;
}

.Icon[size="small"][type="importdata"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-importdata-1f6a6ec3fa.svg);
  width: 27px;
  height: 27px;
}

.Icon[size="small"][type="inbound"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-inbound-3129cb7960.svg);
  width: 18px;
  height: 21px;
}

.Icon[size="small"][type="integrations"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-integrations-843561727b.svg);
  width: 39px;
  height: 21px;
}

.Icon[size="small"][type="keys"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-keys-55df90309e.svg);
  width: 34px;
  height: 29px;
}

.Icon[size="small"][type="laptop"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-laptop-green-09f77706ce.svg);
  width: 43px;
  height: 30px;
}

.Icon[size="small"][type="lunch"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-lunch-29ee592b04.svg);
  width: 40px;
  height: 29px;
}

.Icon[size="small"][type="network"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-network-e0fbf4fdfb.svg);
  height: 23px;
  width: 22px;
}

.Icon[size="small"][type="newbike"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-newbike-948f9dda3b.svg);
  width: 30px;
  height: 30px;
}

.Icon[size="small"][type="newbike2"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-new-bike-56bbcb4207.svg);
  background-size: contain;
  height: 26px;
  width: 38px;
}

.Icon[size="small"][type="payments"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-payments-2203286207.svg);
  width: 29px;
  height: 26px;
}

.Icon[size="small"][type="performance"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-performance-9f0215eaf4.svg);
  width: 23px;
  height: 35px;
}

.Icon[size="small"][type="raygun"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-raygun-5d6b49e987.svg);
  width: 37px;
  height: 26px;
}

.Icon[size="small"][type="reliable"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-reliable-733bca4624.svg);
  width: 24px;
  height: 30px;
}

.Icon[size="small"][type="relocation"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-relocation-a8821b31ba.svg);
  width: 39px;
  height: 29px;
}

.Icon[size="small"][type="replay"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-replay-8feeca7f31.svg);
  width: 34px;
  height: 30px;
}

.Icon[size="small"][type="resolutions"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-resolutions-555dff21b3.svg);
  height: 28px;
  width: 37px;
}

.Icon[size="small"][type="scale"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-scale-e886e86d2e.svg);
  width: 32px;
  height: 27px;
}

.Icon[size="small"][type="secure"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-secure-4731ec60a0.svg);
  width: 24px;
  height: 30px;
}

.Icon[size="small"][type="sf"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-sf-6e89c7cc3a.svg);
  width: 27px;
  height: 35px;
}

.Icon[size="small"][type="shopping"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-shopping-09c0c8c4cf.svg);
  height: 24px;
  width: 24px;
}

.Icon[size="small"][type="smartwatch"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-smartwatch-2e4cfb7bd2.svg);
  width: 27px;
  height: 31px;
}

.Icon[size="small"][type="sources"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-sources-53d542e607.svg);
  width: 25px;
  height: 35px;
}

.Icon[size="small"][type="sync"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-sync-513ba1810c.svg);
  width: 28px;
  height: 27px;
}

.Icon[size="small"][type="target"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-target-4612f24579.svg);
  height: 24px;
  width: 24px;
}

.Icon[size="small"][type="tools"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-tools-c181067733.svg);
  width: 26px;
  height: 26px;
}

.Icon[size="small"][type="track"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-track-de3c2607ed.svg);
  width: 45px;
  height: 29px;
}

.Icon[size="small"][type="usecase"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-usecase-edd6b6e44e.svg);
  width: 25px;
  height:26px;
}

.Icon[size="small"][type="warehouses"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-warehouses-a8ce591913.svg);
  width: 25px;
  height: 29px;
}

.Icon[size="small"][type="watsi"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-small-watsi-7022c9c56e.svg);
  width: 37px;
  height: 28px;
}

/**
 * Mini
 */

.Icon[size="mini"] {

}

.Icon[size="mini"][type="alias"] {
  width: 24px;
  height: 24px;
}

.Icon[size="mini"][type="alias"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-alias-gray-1de6ac13d8.svg);
}

.Icon[size="mini"][type="alias"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-alias-green-c5d6f30f2f.svg);
}

.Icon[size="mini"][type="collection"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-collection-dde0c6f00b.svg);
  width: 20px;
  height: 20px;
}

.Icon[size="mini"][type="cloud"] {
  width: 27px;
  height: 21px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-cloud-cc957c8538.svg);
}

.Icon[size="mini"][type="consistency"] {
  width: 26px;
  height: 26px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-consistency-10f247d98d.svg);
}

.Icon[size="mini"][type="helpdesk"] {
  width: 30px;
  height: 29px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-helpdesk-b6f0d5492a.svg);
}

.Icon[size="mini"][type="warehouses"] {
  width: 21px;
  height: 24px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-warehouses-8f6371081d.svg);
}

.Icon[size="mini"][type="webmobile"] {
  width: 33px;
  height: 23px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-webmobile-d6e3e9b478.svg);
}

.Icon[size="mini"][type="article"] {
  width: 24px;
  height: 16px;
}

.Icon[size="mini"][type="article"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-article-gray-01654f6021.svg);
}

.Icon[size="mini"][type="article"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-article-green-9033f302f9.svg);
}

.Icon[size="mini"][type="usecase"] {
  width: 22px;
  height: 25px;
}

.Icon[size="mini"][type="usecase"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-usecase-e2e117f13d.svg);
}

.Icon[size="mini"][type="browser"] {
  width: 32px;
  height: 22px;
}

.Icon[size="mini"][type="browser"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-browser-gray-e58fdc884e.svg);
}

.Icon[size="mini"][type="browser"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-browser-green-075a0478be.svg);
}

.Icon[size="mini"][type="docs"] {
  width: 19px;
  height: 22px;
}

.Icon[size="mini"][type="docs"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-docs-gray-aa54b35e83.svg);
}

.Icon[size="mini"][type="docs"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-docs-green-bc95fa8428.svg);
}

.Icon[size="mini"][type="equity"] {
  width: 24px;
  height: 19px;
}

.Icon[size="mini"][type="equity"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-equity-174c19e34b.svg);
}

.Icon[size="mini"][type="group"] {
  width: 23px;
  height: 21px;
}

.Icon[size="mini"][type="group"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-group-gray-c987e35adf.svg);
}

.Icon[size="mini"][type="group"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-group-green-5b22ee203a.svg);
}

.Icon[size="mini"][type="gym"] {
  width: 24px;
  height: 24px;
}

.Icon[size="mini"][type="gym"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-gym-20a8c81003.svg);
}

.Icon[size="mini"][type="healthcare"] {
  width: 24px;
  height: 22px;
}

.Icon[size="mini"][type="healthcare"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-healthcare-7ef0715149.svg);
}

.Icon[size="mini"][type="identify"] {
  width: 29px;
  height: 17px;
}

.Icon[size="mini"][type="identify"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-identify-gray-5b4abb6660.svg);
}

.Icon[size="mini"][type="identify"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-identify-green-a85cf79c07.svg);
}

.Icon[size="mini"][type="integration"] {
  width: 29px;
  height: 15px;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-integration-e1a1c81c39.svg);
}

.Icon[size="mini"][type="lunch"] {
  width: 29px;
  height: 21px;
}

.Icon[size="mini"][type="lunch"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-lunch-0c8512b6bd.svg);
}

.Icon[size="mini"][type="mobile"] {
  width: 17px;
  height: 27px;
}

.Icon[size="mini"][type="mobile"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-mobile-gray-1f653fa7d3.svg);
}

.Icon[size="mini"][type="mobile"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-mobile-green-8d352a08d4.svg);
}

.Icon[size="mini"][type="newbike"] {
  width: 23px;
  height: 23px;
}

.Icon[size="mini"][type="newbike"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-newbike-3d339c57b6.svg);
}

.Icon[size="mini"][type="question"] {
  width: 22px;
  height: 19px;
}

.Icon[size="mini"][type="question"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-question-gray-ff96bff911.svg);
}

.Icon[size="mini"][type="question"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-question-green-f7ff226660.svg);
}

.Icon[size="mini"][type="relocation"] {
  width: 27px;
  height: 20px;
}

.Icon[size="mini"][type="relocation"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-relocation-e815a2b758.svg);
}

.Icon[size="mini"][type="screenpage"] {
  width: 17px;
  height: 27px;
}

.Icon[size="mini"][type="screenpage"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-screenpage-gray-1dafc86883.svg);
}

.Icon[size="mini"][type="screenpage"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-screenpage-green-b068aa9ee8.svg);
}

.Icon[size="mini"][type="server"] {
  width: 25px;
  height: 25px;
}

.Icon[size="mini"][type="server"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-server-gray-bee6dc4660.svg);
}

.Icon[size="mini"][type="server"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-server-green-dd25cd2c6a.svg);
}

.Icon[size="mini"][type="sf"] {
  width: 19px;
  height: 25px;
}

.Icon[size="mini"][type="sf"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-sf-cd387a7080.svg);
}

.Icon[size="mini"][type="smartwatch"] {
  width: 20px;
  height: 23px;
}

.Icon[size="mini"][type="smartwatch"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-smartwatch-1d67b19ea1.svg);
}

.Icon[size="mini"][type="track"] {
  width: 27px;
  height: 17px;
}

.Icon[size="mini"][type="track"][color="gray"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-track-gray-a49ef8a589.svg);
}

.Icon[size="mini"][type="track"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-track-green-22c444e8ab.svg);
}

.Icon[size="mini"][type="watsi"] {
  width: 29px;
  height: 22px;
}

.Icon[size="mini"][type="watsi"][color="green"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-watsi-b48e715673.svg);
}

.Icon[size="mini"][type="done"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-done-8be4e18e81.svg);
  width: 12px;
  height: 10px;
}

.Icon[size="mini"][type="close"] {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/icon-mini-close-c189417dcc.svg);
  width: 10px;
  height: 10px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.InlineForm-body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.InlineForm-input {
  border-radius: 4px 4px 0 0;
  height: 50px;
  color: #00386C;
  background: #fff;
  border: 1px solid #E4EDF5;
  padding: 8px 15px 10px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  box-sizing: border-box;
  -ms-flex: 1;
      flex: 1;
  -webkit-font-smoothing: antialiased;
}

.InlineForm-input::-webkit-input-placeholder {
  color: rgba(0, 56, 108, 0.5);
}

.InlineForm-input:-ms-input-placeholder {
  color: rgba(0, 56, 108, 0.5);
}

.InlineForm-input::placeholder {
  color: rgba(0, 56, 108, 0.5);
}

.InlineForm-input.invalid {
  border-color: #E365A6;
  color: rgb(227, 101, 166);
}

.InlineForm-input:hover,
.InlineForm-input:focus,
.InlineForm-input:active {
  outline: 0;
  border-color: #49B882;
}

.InlineForm-button {
  height: 50px;
  border-radius: 0 0 4px 4px;
  background-color: #49B882;
  border: 0;
  color: #FFF;
  display: block;
  line-height: 16px;
  text-decoration: none;
  transition: all 200ms;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  padding: 10px 25px 12px;
  white-space: nowrap;

}

.InlineForm-button:hover,
.InlineForm-button:focus,
.InlineForm-button:active {
  background-color: #54D194;
  text-decoration: none;
  outline: 0;
  cursor:pointer;
}

.InlineForm-button[disabled],
.InlineForm-button.loading {
  background-color: #E4EDF5;
  color: #7999B8;
  cursor: not-allowed;
}

.InlineForm-text {
  font-size: 16px;
  line-height: 16px;
  margin-top: 20px;
  color: #00386C;
}

.InlineForm--small .InlineForm-button,
.InlineForm--small .InlineForm-input {
  height: 40px;
}

@media screen and (min-width: 40em) {
  .InlineForm-body {
    -ms-flex-direction: row;
        flex-direction: row;
  }
  .InlineForm-button {
    border-radius: 0 4px 4px 0;
  }
  .InlineForm-input {
    border-radius: 4px 0 0 4px;
    border-right: 0;
  }
  .InlineForm-input--rounded {
    border-radius: 20px 0 0 20px;
  }
  .InlineForm-button--rounded {
    border-radius: 0 20px 20px 0;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.LargeFeature {
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.LargeFeature-title {
  font-size: 24px;
  color: #00386C;
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: normal;
}

.LargeFeature-subtitle {
  width: 536px;
}

.LargeFeature-title[size="large"] {
  font-size: 51px;
  font-weight: 400;
}

.LargeFeature-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 137px;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-direction: column;
      flex-direction: column;
}

.LargeFeature-icon[position="top"] {
  position: relative;
  display: block;
  margin-bottom: 14px;
  width: 100%;
}

.LargeFeature-body {
  -ms-flex: 1;
      flex: 1;
  margin-left: 166px;
  position: relative;
  padding-bottom: 50px
}

.LargeFeature-body:after {
  height: 1px;
  display: block;
  background: #E4EDF5;
  width: 115px;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
}

.LargeFeature:last-child .LargeFeature-body::after {
  display: none;
}

.LargeFeature-content {
  margin-top: 50px;
}

.LargeFeature-footer {
  margin-top: 50px;
  margin-bottom: 30px;
}

.LargeFeature--center {
  text-align: center;
  width: 340px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Loader {
  height: 32px;
  width: 32px;
}

.Loader .Loader-dot:before {
  animation: LoaderBounceDelay 1.2s infinite ease-in-out both;
  background-color: #42AB80;
  border-radius: 100%;
  content: '';
  display: block;
  height: 3px;
  margin: 0 auto;
  width: 3px;
}

/* override colors */

.Loader-dot:nth-child(2):before {
  background-color: #B0CEEB;
}

.Loader-dot:nth-child(3):before {
  background-color: #5EEBA7;
}

.Loader-dot:nth-child(5):before {
  background-color: #E365A6;
}

.Loader-dot:nth-child(8):before {
  background-color: #FCC79B;
}

.Loader-dot:nth-child(9):before {
  background-color: #00386C;
}

.Loader-dot:nth-child(2) {
  transform: rotate(30deg);
}

.Loader-dot:nth-child(3) {
  transform: rotate(60deg);
}

.Loader-dot:nth-child(4) {
  transform: rotate(90deg);
}

.Loader-dot:nth-child(5) {
  transform: rotate(120deg);
}

.Loader-dot:nth-child(6) {
  transform: rotate(150deg);
}

.Loader-dot:nth-child(7) {
  transform: rotate(180deg);
}

.Loader-dot:nth-child(8) {
  transform: rotate(210deg);
}

.Loader-dot:nth-child(9) {
  transform: rotate(240deg);
}

.Loader-dot:nth-child(10) {
  transform: rotate(270deg);
}

.Loader-dot:nth-child(11) {
  transform: rotate(300deg);
}

.Loader-dot:nth-child(12) {
  transform: rotate(330deg);
}

.Loader-dot:nth-child(2):before {
  animation-delay: -1.1s;
}

.Loader-dot:nth-child(2):before {
  animation-delay: -1s;
}

.Loader-dot:nth-child(4):before {
  animation-delay: -0.9s;
}

.Loader-dot:nth-child(5):before {
  animation-delay: -0.8s;
}

.Loader-dot:nth-child(6):before {
  animation-delay: -0.7s;
}

.Loader-dot:nth-child(7):before {
  animation-delay: -0.6s;
}

.Loader-dot:nth-child(8):before {
  animation-delay: -0.5s;
}

.Loader-dot:nth-child(9):before {
  animation-delay: -0.4s;
}

.Loader-dot:nth-child(10):before {
  animation-delay: -0.3s;
}

.Loader-dot:nth-child(11):before {
  animation-delay: -0.2s;
}

.Loader-dot:nth-child(12):before {
  animation-delay: -0.1s;
}

@keyframes LoaderBounceDelay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
.Logo {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/segment-7714a6a4af.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  text-indent: -9999px;
}

.Logo--icon {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/segment-icon-be7f06039a.svg);
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Menu {
  position: relative;
}

.Menu-link {
  -ms-flex-align: center;
      align-items: center;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #00386C;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  -ms-flex-pack: justify;
      justify-content: space-between;
  line-height: 30px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  transition: opacity 100ms ease-in-out;
}

.Menu-link.hasIcon {
  padding-left: 30px;
}

.Menu-link:hover {
  background-color: white;
  text-decoration: none;
  color: #49B882;
  border-color: #E4EDF5;
}

.Menu-link:last-child {
  margin-bottom: 0;
}

.Menu-link.active {
  background-color: white;
  color: #49B882;
  border-color: #49B882;
  box-shadow: 0 2px 0 rgba(0, 56, 108, 0.1);
}

.Menu-icon {
  display: inline-block;
  line-height: 16px;
  height: 16px;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  margin-top: 2px;
}

.Menu-arrow {
  visibility: hidden;
  display: block;
  height: 9px;
  width: 5px;
  background: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/caret-191ebf4dd3.svg) no-repeat;
}

.Menu-link:hover .Menu-arrow,
.Menu-link.active .Menu-arrow {
  display: block;
  visibility: visible;
}

.Menu[size="large"] .Menu-link {
  font-size: 18px;
  line-height: 38px;
}

.Menu-left,
.Menu-right {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}

.Menu-badge {
  background: #49B882;
  font-family: Helvetica, Arial, sans-serif;
  text-transform: lowercase;
  font-size: 10px;
  color: #fff;
  border-radius: 15px;
  line-height: 9px;
  text-align: center;
  padding: 2px 7px;
  display: inline-block;
  margin: 0 5px;
  display: none;
}

.Menu-group:not(:first-child) {
  margin-top: 20px;
}

.Menu-groupTitle {
  font-size: 16px;
  color: #00386C;
  text-transform: lowercase;
  line-height: 20px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-bottom: 5px;
  font-weight: 500;
  display: block;
  margin-left: 10px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Page {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 100%;
  max-width: 960px;
}

.Page--responsivePaddings {
}

@media   (max-width: 440px) {

  .Page--responsivePaddings {
    padding: 0 5%;
  }
  }

@media   (min-width: 441px) and (max-width: 620px) {

  .Page--responsivePaddings {
    padding: 0 6%;
  }
  }

@media   (min-width: 621px) and (max-width: 980px) {

  .Page--responsivePaddings {
    padding: 0 8%;
  }
  }

@media    (min-width: 981px) {

  .Page--responsivePaddings {
    padding: 0 80px;
    max-width: 1120px;
  }
  }

.Page--narrow {
  max-width: 620px
}

.Page--narrow.Page--responsivePaddings {
  max-width: 780px;
}

.Page--wide {
  max-width: 1280px
}

.Page--wide.Page--responsivePaddings {
  max-width: 1440px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.ShadowBox {
  border-radius: 4px;
  border: 1px solid #E4EDF5;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .05);
  box-sizing: border-box;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.SignupBanner {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E4EDF5;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .04);
  border-radius: 4px;
  width: 100%;
  max-width: 970px;
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
}

.SignupBanner-header {
  font-size: 2.1rem;
  margin-bottom: 40px;
  color: #00386C;
  font-weight: 300;
}

.SignupBanner-link {
  text-decoration: none;
}

.SignupBanner-button {
  margin-left: 30px;
}

.SignupBanner--sources .SignupBanner-button {
  position: absolute;
  top: 45%;
  left: 75%;
}

.SignupBanner-actions {
  text-align: right;
}

.SignupBanner-copy {
  display: table-cell;
  position: relative;
  text-align: center;
  width: 452px;
}

.SignupBanner-actions {
  display: table-cell;
  position: relative;
  text-align: center;
  width: 452px;
}

@media (max-width: 1080px) {
  .SignupBanner-copy,
  .SignupBanner-actions {
    display: block;
    width: 100%;
  }

  .SignupBanner-actions {
    margin-top: 20px;
  }
}

@media (min-width: 850px) and (max-width: 1080px) {
  .SignupBanner {
    width: 60%;
  }
}

@media (max-width: 850px) {
  .SignupBanner {
    width: 80%;
  }
}

@media (max-width: 640px) {
  .SignupBanner-actions .Button:nth-child(2) {
    margin-top: 20px;
  }
}

@media (max-width: 414px) {
  .SignupBanner {
    width: 90%;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.SmallFeature {

}

.SmallFeature-body {}

.SmallFeature-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-bottom: 10px;
}

.SmallFeature.disabled {
  opacity: 0.5;
}

.SmallFeature-icon {
  display: inline-block;
  margin-right: 15px;
}

.SmallFeature-title {
  display: inline-block;
  font-size: 18px;
  color: #00386C;
  line-height: 24px;
  font-weight: 500;
  text-transform: capitalize;
}

.SmallFeature-link {
  margin-top: 10px;
}
.Steps {
  display: -ms-flexbox;
  display: flex;
}

.Steps-item {
  -ms-flex: 1;
      flex: 1;
  position: relative;
}

.Steps-item::after {
  content: '';
  display: block;
  height: 13px;
  width: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/arrow-bfd47a89ab.svg);
  position: absolute;
  top: 100px;
  right: 0;
}

.Steps-item:last-child::after {
  display: none;
}

.Steps-text {
  text-align: center;
  margin-top: 20px;
}

.Steps-image {
  height: 200px;
  width: 100%;
  position: relative;
}

.Steps-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.Tabs {
  margin-bottom: -1px;
}

.Tab {
  display: inline-block;
  font-size: 0; /* Remove spacing between inline-block elements */
  margin: 0 5px;
}

.Tab--hidden {
  display: none;
}

.Tab a {
  display: block;
  text-transform: lowercase;
  text-decoration: none;
  font-size: 18px;
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  padding: 30px 5px;
  color: #00386C;
  transition: all .3s;
  white-space: nowrap;
  transition: all 200ms linear;
  box-shadow: 0 0 0 #49B882 inset;
}

.Tab a:hover {
  color: #00386C;
  box-shadow: 0 -3px 0 #49B882 inset;
}

.Tab--active {
  color: #00386C;
  box-shadow: 0 -3px 0 #49B882 inset;
}

/**
 * tip.
 *
 * .tip.tip-[direction]
 *   .tip-inner
 *   .tip-arrow
 */

 @keyframes tip {
   from {
     transform: transformY(15px) scale(0.9);
     opacity: 0;
   }
   to {
     transform: transformY(-5px) scale(1);
     opacity: 1;
   }
 }

 .tip {
  position: absolute;
  transform: translateY(-5px);
  animation: tip 100ms ease-in-out;
}

 .tip-inner {
  background-color: #F2FFF7; /* Green 50 */
  color: #2C944F; /* Green 700 */
  padding: 8px 15px 7px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .04);
  border: 1px solid #96FBB8; /* Green 200 */
  font-size: 14px;
  line-height: 18px;
  max-width: 200px;
}

 .tip-inner {
  border-radius: 4px;
}

 .tip-arrow {
  position: absolute;
  width: 15px;
  height: 9px;
  background: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/arrow-f9eeaa2c6a.svg) no-repeat center center;
}

 .tip-top .tip-arrow,
.tip-top-left .tip-arrow,
.tip-top-right .tip-arrow {
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
}

 .tip-bottom .tip-arrow,
.tip-bottom-left .tip-arrow,
.tip-bottom-right .tip-arrow {
  top: 0px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
}

 .tip-left .tip-arrow {
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

 .tip-right .tip-arrow {
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

 .tip-top-left .tip-arrow,
.tip-bottom-left .tip-arrow {
  left: 85%;
}

 .tip-top-right .tip-arrow,
.tip-bottom-right .tip-arrow {
  left: 15px;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.bg-dotsTopLeft,
.bg-dotsTopRight,
.bg-dotsBottomLeft,
.bg-dotsBottomRight {
  background-repeat: no-repeat;
}

.bg-dotsTopLeft {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-c06533acf2.svg);
  background-position: -250px 0;
}

.bg-dotsTopLeftWhite {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-white-1d247c20b8.svg);
  background-position: -250px 0;
}

.bg-dotsTopRight {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-10582c21a6.svg);
  background-position: calc(100% + 250px) 0;
}

.bg-dotsTopRightWhite {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
  background-position: calc(100% + 100px) 0;
  background-repeat: no-repeat;
}

.bg-dotsBottomLeft {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-left-9dde7736f1.svg);
  background-position: -300px 100%;
}

.bg-dotsBottomRight {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-right-f0c657bd7e.svg);
  background-position: bottom right;
}

.bg-dotsTop {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-c06533acf2.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-10582c21a6.svg);
  background-position: calc(50% - 550px) 3px, calc(50% + 550px) 3px;
  background-repeat: no-repeat, no-repeat;
}

.bg-dotsTopWhite {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-white-1d247c20b8.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
  background-position: calc(50% - 550px) 3px, calc(50% + 550px) 3px;
  background-repeat: no-repeat, no-repeat;
}

.bg-dotsBottom {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-left-9dde7736f1.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-right-f0c657bd7e.svg);
  background-position: calc(50% - 550px) calc(100% - 3px), calc(50% + 550px) calc(100% - 3px);
  background-repeat: no-repeat, no-repeat;
}

.bg-dotsBottomWhite {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-left-white-46edace358.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-right-white-6992b15daa.svg);
  background-position: calc(50% - 550px) calc(100% - 3px), calc(50% + 550px) calc(100% - 3px);
  background-repeat: no-repeat, no-repeat;
}

.bg-dotsScattered {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/scattered-92ca2a3747.svg);
  background-position: 50% 80px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg-dotsGrid {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/grid-17d1b9a10e.svg);
}

.bg-linesBottomLeft,
.bg-linesBottomRight {
  background-repeat: no-repeat;
}

.bg-linesBottomLeft {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/lines-bottom-left-60e955c527.svg);
  background-position: calc(50% - 250px) 150%;
}

.bg-linesBottomRight {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/lines-bottom-right-d26e7425bb.svg);
  background-position: calc(50% + 250px) 150%;
}

.bg-linesBottom {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/lines-bottom-left-60e955c527.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/lines-bottom-right-d26e7425bb.svg);
  background-position: calc(50% - 250px) 130%, calc(50% + 300px) 130%;
  background-repeat: no-repeat, no-repeat;
}

@media (max-width: 640px) {
  .bg-dotsTop {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-c06533acf2.svg);
    background-position: -400px 3px;
  }

  .bg-dotsBottom {
    background-image: none;
  }
}

@media screen and (min-width: 40em) {
  .bg-dotsTopRightWhite-ns {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
    background-position: calc(100% + 100px) 0;
    background-repeat: no-repeat;
  }

  .bg-dotsTopRight-ns {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-10582c21a6.svg);
    background-position: calc(100% + 250px) 0;
    background-repeat: no-repeat;
  }

  .bg-dotsTopWhite-ns {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-left-white-1d247c20b8.svg), url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
    background-position: calc(50% - 550px) 3px, calc(50% + 550px) 3px;
    background-repeat: no-repeat, no-repeat;
  }
}

@media screen and (min-width: 40em) and (max-width: 70em) {
  .bg-dotsTopRightWhite-m {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
    background-position: calc(100% + 100px) 0;
    background-repeat: no-repeat;
  }

  .bg-dotsTopRight-m {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-10582c21a6.svg);
    background-position: calc(100% + 250px) 0;
    background-repeat: no-repeat;
  }
}

@media screen and (min-width: 70em) {
  .bg-dotsTopRightWhite-l {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-white-9944421795.svg);
    background-position: calc(100% + 100px) 0;
    background-repeat: no-repeat;
  }

  .bg-dotsTopRight-l {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/top-right-10582c21a6.svg);
    background-position: calc(100% + 250px) 0;
    background-repeat: no-repeat;
  }
}

/* HACK: to ensure duo includes this image in our build directory */

.bg-dotsHack-for-duo {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/bottom-right-white-6992b15daa.svg);
}

.bg-linesHack-for-duo {
  background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/lines-bottom-right-d26e7425bb.svg);
}
.bg-softLight {
  background-blend-mode: soft-light;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/**
 * White
 */

.color-white {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

/**
 * Sand
 */

.color-sand {
  color: #FBFAF9;
}

.bg-sand {
  background-color: #FBFAF9;
}

/**
 * Magenta
 */

.color-magenta {
  color: #E365A6;
}

.bg-magenta {
  background-color: #E365A6;
}

.border-magenta {
  border-color: #E365A6;
}

/**
 * Peach
 */

.color-peach {
  color: #FCC79B;
}

.bg-peach {
  background-color: #FCC79B;
}

.border-peach {
  border-color: #FCC79B;
}

/**
 * Grey
 */

.color-grey-100 {
  color: #E4EDF5;
}

.color-grey-200 {
  color: #AEC3D6;
}

.color-grey,
.color-lightText,
.color-grey-300 {
  color: #7999B8;
}

.color-text,
.color-grey-400 {
  color: #4B6985;
}

.color-grey-500 {
  color: #425E78;
}

.color-grey-600 {
  color: #3D3D3D;
}

.bg-grey-50 {
  background-color: #FAFBFC;
}

.border-grey {
  border-color: #E4EDF5;
}

/**
 * Navy
 */

.color-navy-900 {
  color: #00386C;
}

.color-navy-800 {
  color: #004585;
}

.color-navy-700 {
  color: #00529E;
}

.color-navy-600 {
  color: #005FB8;
}

.color-navy-500 {
  color: #006CD1;
}

.color-navy-400 {
  color: #1785EB;
}

.color-navy-300 {
  color: #5EA7EB;
}

.color-navy-200 {
  color: #99CEFF;
}

.color-navy-100 {
  color: #C7E4FF;
}

.color-navy-50 {
  color: #F2F9FF;
}

.bg-navy-900 {
  background-color: #00386C;
}

.bg-navy-800 {
  background-color: #004585;
}

.bg-navy-700 {
  background-color: #00529E;
}

.bg-navy-600 {
  background-color: #005FB8;
}

.bg-navy-500 {
  background-color: #006CD1;
}

.bg-navy-400 {
  background-color: #1785EB;
}

.bg-navy-300 {
  background-color: #5EA7EB;
}

.bg-navy-200 {
  background-color: #99CEFF;
}

.bg-navy-100 {
  background-color: #C7E4FF;
}

.bg-navy-50 {
  background-color: #F2F9FF;
}

.border-navy-50 {
  border-color: #F2F9FF;
}

.border-navy-100 {
  border-color: #C7E4FF;
}

.border-navy-200 {
  border-color: #99CEFF;
}

.border-navy-300 {
  border-color: #5EA7EB;
}

.border-navy-400 {
  border-color: #1785EB;
}

.border-navy-500 {
  border-color: #006CD1;
}

.border-navy-600 {
  border-color: #005FB8;
}

.border-navy-700 {
  border-color: #00529E;
}

.border-navy-800 {
  border-color: #004585;
}

.border-navy-900 {
  border-color: #00386C;
}

/**
 * Pink
 */

.color-pink-500 {
  color: #E365A6;
}

.color-pink-400 {
  color: #FFDAED;
}

/**
 * Green
 */

.color-green-900 {
  color: #21523A;
}

.color-green-800 {
  color: #2B6B4C;
}

.color-green-700 {
  color: #35855E;
}

.color-green-600 {
  color: #3F9E70;
}

.color-green-500 {
  color: #49B882;
}

.color-green-400 {
  color: #54D194;
}

.color-green-300 {
  color: #84DBB1;
}

.color-green-200 {
  color: #A8F0CD;
}

.color-green-100 {
  color: #CCFFE6;
}

.color-green-50 {
  color: #F2FFF9;
}

.bg-blue-900 {
  background-color: #00386C;
}

.bg-green-900 {
  background-color: #21523A;
}

.bg-green-800 {
  background-color: #2B6B4C;
}

.bg-green-700 {
  background-color: #35855E;
}

.bg-green-600 {
  background-color: #3F9E70;
}

.bg-green-500 {
  background-color: #49B882;
}

.bg-green-400 {
  background-color: #54D194;
}

.bg-green-300 {
  background-color: #84DBB1;
}

.bg-green-200 {
  background-color: #A8F0CD;
}

.bg-green-100 {
  background-color: #CCFFE6;
}

.bg-green-50 {
  background-color: #F2FFF9;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/**
 * Underline
 * For content
 */

.ls1 {
  color: #49B882;
  text-decoration: underline;
  transition: color 200ms ease-in;
  cursor: pointer;
}

.ls1:hover,
.ls1:focus {
  color: #54D194;
}

/**
 * Underline on hover
 * For lists of links
 */

.ls2 {
  color: #49B882;
  text-decoration: none;
  transition: color 200ms ease-in;
  cursor: pointer;
}

.ls2:hover,
.ls2:focus {
  color: #54D194;
  text-decoration: underline;
}

/**
 * No underline
 * For navigation
 */

.ls3 {
  color: #49B882;
  text-decoration: none;
  transition: color 200ms ease-in;
  cursor: pointer;
}

.ls3:hover,
.ls3:focus {
  color: #54D194;
}

.ls4 {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 200ms ease-in;
  cursor: pointer;
}

.ls4:hover,
.ls4:focus {
  color: #54D194;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/**
 * Tile without a border
 */

.os1 {
  background: rgb(255, 255, 255);
  border-radius: 5px;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .10);
}

/**
 * Pill shape with hover effect
 */

.os2 {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 5px 15px;
  margin: 5px 6px;
  line-height: 1;
  color: rgba(0, 56, 108, 0.5);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #E4EDF5;
  border-radius: 100px;
}

.os2:hover,
.os2:focus {
  outline: none;
  border-color: #49B882;
  color: #49B882;
}

.os2.active,
.os2.active:hover,
.os2.active:focus {
  outline: none;
  background: #006CD1;
  border-color: #006CD1;
  color: #FBFAF9;
}

/**
 * Light blue on hover
 */

.os3:hover,
.os3:focus {
  outline: none;
  background: #F2F9FF;
}

/**
 * Tile with a border and a hover effect
 */

.os5 {
  background: rgb(255, 255, 255);
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .10);
  border: 1px solid #E4EDF5;
}

.os5:hover,
.os5:focus {
  outline: none;
  border-color: #49B882;
}

/**
 * Tile with a border and no hover effect
 */

.os6 {
  background: rgb(255, 255, 255);
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .10);
  border: 1px solid #E4EDF5;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

/**
 * Sizing utilities
 */

/* Intrinsic widths
   ========================================================================== */

/**
 * Make an element shrink wrap its content.
 */

.u-sizeFit,
.u-sizeFitAlt {
  display: block !important;
  float: left !important;
  width: auto !important;
}

.u-sizeFitAlt {
  float: right !important;
}

/**
 * Make an element fill the remaining space.
 * N.B. This will hide overflow.
 */

.u-sizeFill {
  display: block !important;
  overflow: hidden !important;
  width: auto !important;
}

/**
 * An alternative method to make an element fill the remaining space.
 * N.B. Do not use if child elements might be wider than the remaining space.
 * In Chrome, Safari, and Firefox it results in undesired layout.
 */

.u-sizeFillAlt {
  display: table-cell !important;
  max-width: 100% !important;
  width: 10000px !important;
}

/**
 * Make an element the width of its parent.
 */

.u-sizeFull {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
}

/* Proportional widths
   ========================================================================== */

/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
 */

.u-size1of12 {
  width: 8.33333% !important;
}

.u-size1of10 {
  width: 10% !important;
}

.u-size1of8 {
  width: 12.5% !important;
}

.u-size1of6,
.u-size2of12 {
  width: 16.66667% !important;
}

.u-size1of5,
.u-size2of10 {
  width: 20% !important;
}

.u-size1of4,
.u-size2of8,
.u-size3of12 {
  width: 25% !important;
}

.u-size3of10 {
  width: 30% !important;
}

.u-size1of3,
.u-size2of6,
.u-size4of12 {
  width: 33.33333% !important;
}

.u-size3of8 {
  width: 37.5% !important;
}

.u-size2of5,
.u-size4of10 {
  width: 40% !important;
}

.u-size5of12 {
  width: 41.66667% !important;
}

.u-size1of2,
.u-size2of4,
.u-size3of6,
.u-size4of8,
.u-size5of10,
.u-size6of12 {
  width: 50% !important;
}

.u-size7of12 {
  width: 58.33333% !important;
}

.u-size3of5,
.u-size6of10 {
  width: 60% !important;
}

.u-size5of8 {
  width: 62.5% !important;
}

.u-size2of3,
.u-size4of6,
.u-size8of12 {
  width: 66.66667% !important;
}

.u-size7of10 {
  width: 70% !important;
}

.u-size3of4,
.u-size6of8,
.u-size9of12 {
  width: 75% !important;
}

.u-size4of5,
.u-size8of10 {
  width: 80% !important;
}

.u-size5of6,
.u-size10of12 {
  width: 83.33333% !important;
}

.u-size7of8 {
  width: 87.5% !important;
}

.u-size9of10 {
  width: 90% !important;
}

.u-size11of12 {
  width: 91.66667% !important;
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.ts-display-1 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 66px;
  letter-spacing: -0.67px;
}

.ts-display-2 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 40px;
  line-height: 55px;
  font-weight: 500;
}

.ts-display-3 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 37px;
}

.ts-display-4 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
}

.ts-body-1 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.ts-body-2 {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
}

.ts-subtitle-1 {
  font-family: 'Segment Aleo', Georgia, serif;
  font-size: 36px;
  line-height: 45px;
  font-weight: 400;
}

.ts-subtitle-2 {
  font-family: 'Segment Aleo', Georgia, serif;
  font-size: 27px;
  line-height: 40px;
  font-weight: 400;
}

.ts-subtitle-3 {
  font-family: 'Segment Aleo', Georgia, serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}

.ts-label {
  font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
}

@media screen and (min-width: 40em) {
  .ts-display-1-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
  }

  .ts-display-2-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    line-height: 46px;
    font-weight: 500;
  }

  .ts-display-3-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 37px;
  }

  .ts-display-4-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
  }

  .ts-body-1-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
  }

  .ts-body-2-ns {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
  }

  .ts-subtitle-1-ns {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 36px;
    line-height: 45px;
    font-weight: 400;
  }

  .ts-subtitle-2-ns {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 27px;
    line-height: 40px;
    font-weight: 400;
  }

  .ts-subtitle-3-ns {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
  }
}

@media screen and (min-width: 40em) and (max-width: 70em) {
  .ts-display-1-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
  }

  .ts-display-2-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    line-height: 46px;
    font-weight: 500;
  }

  .ts-display-3-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 37px;
  }

  .ts-display-4-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
  }

  .ts-body-1-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
  }

  .ts-body-2-m {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
  }

  .ts-subtitle-1-m {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 36px;
    line-height: 45px;
    font-weight: 400;
  }

  /* Aleo only */
  .ts-subtitle-2-m {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 27px;
    line-height: 40px;
    font-weight: 400;
  }
}

@media screen and (min-width: 70em) {
  .ts-display-1-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
  }

  .ts-display-2-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    line-height: 46px;
    font-weight: 500;
  }

  .ts-display-3-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 37px;
  }

  .ts-display-4-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
  }

  .ts-body-1-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
  }

  .ts-body-2-l {
    font-family: 'Segment Circular Std', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
  }

  .ts-subtitle-1-l {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 36px;
    line-height: 45px;
    font-weight: 400;
  }

  .ts-subtitle-2-l {
    font-family: 'Segment Aleo', Georgia, serif;
    font-size: 27px;
    line-height: 40px;
    font-weight: 400;
  }
}
/**
 * Colors
 */

/**
 * Shadows
 */

/**
 * Text Styles
 */

/**
 * Spacing
 */

/**
 * Border Radius
 */

/**
 * Media queries.
 */

/**
  * Visual presentation of major and minor ranges:
  * major: ---palm----|----hand---|----lap----|---desk------*
  * minor: _s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l_|_s_|_m_|_l___*
  *
  *
  * Usage example:
  * .MyComponent {
  *
  *   @media (--range-hand) {
  *     margin: 40px 0;
  *   }
  *
  *   @media (--range-lap), (--range-desk) {
  *     margin: 120px 0;
  *   }
  * }
  */

/**
  * palm
  * major: 0-440
  * minor: 0-360-400-440
  * interval: 40px
  */

/**
  * hand
  * major: 440–620
  * minor: 440-500-560-620
  * interval: 60px
  */

/**
  * lap
  * major: 620–980
  * minor: 620–740–860–980
  * interval: 120px
  */

/**
  * desk
  * major: 980–*
  * minor: 980–1120–1260–1400–*
  * interval: 140px
  */

/**
 * Legacy breakpoints
 */

.VideoPlaceholder {
  border-radius: 5px;
  display: block;
  position: relative;
  z-index: 0;
}

.VideoPlaceholder--shadow img {
  box-shadow: 0 5px 30px -5px rgba(0, 0, 0, .15);
}

.VideoPlaceholder img {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
}

.VideoPlaceholder--button:after {
  background: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/play-c430d95ae1.svg) no-repeat center center;
  background-size: contain;
  content: "";
  height: 65px;
  left: 50%;
  opacity: 0.7;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity .25s ease-in-out;
  width: 65px;
  z-index: 1;
  pointer-events: none;
}

.VideoPlaceholder:hover:after {
  opacity: 1;
}

@media (max-width: 1119px) {
  .VideoPlaceholder--button-small {
    padding-left: 2.5rem; /* pl4 is not enough + pl5 is too much */
  }

  .VideoPlaceholder--button-small:after {
    background-image: url(https://static.segment.com/site-public/2.66.17-41-g452f393/files/play-green-small-be7dc84fdf.svg);
    height: 28px;
    left: 0;
    transform: translateY(-50%) translateX(0%);
    width: 28px;
  }
}

/*# sourceMappingURL=shared.css.map*/