@font-face {
  font-family: "SohoGothicPro";
  src: url('/fonts/SohoGothicPro-Regular.eot');
  src: url('/fonts/SohoGothicPro-Regular.eot?#iefix') format('embedded-opentype'),
       url('/fonts/SohoGothicPro-Regular.woff2') format('woff2'),
       url('/fonts/SohoGothicPro-Regular.woff') format('woff'),
       url('/fonts/SohoGothicPro-Regular.ttf') format('truetype'),
       url('/fonts/SohoGothicPro-Regular.svg#SohoGothicRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SohoGothicPro";
  src: url('/fonts/SohoGothicPro-Medium.eot');
  src: url('/fonts/SohoGothicPro-Medium.eot?#iefix') format('embedded-opentype'),
       url('/fonts/SohoGothicPro-Medium.woff2') format('woff2'),
       url('/fonts/SohoGothicPro-Medium.woff') format('woff'),
       url('/fonts/SohoGothicPro-Medium.ttf') format('truetype'),
       url('/fonts/SohoGothicPro-Medium.svg#SohoGothicMedium') format('svg');
  font-weight: bold;
  font-style: normal;
}

body {
  font-family: "SohoGothicPro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
}

ol {
  counter-reset: item
}

ol > li {
  display: block
}

ol > li:before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}

.logo {
  width: 166px;
  max-width: 166px;
  margin: 0 auto;
  margin-bottom: 4rem;
}

.powered-by {
  color: #6C7687;
  font-size: 1.1rem;
}

.powered-by * {
  margin: 0 1%;
  display: inline-block;
  vertical-align: middle;
}

.phone {
  width: 279px;
  height: 553px;
  margin: 0 auto;
  position: relative;
  background-image: url("../images/iphone.png");
  background-size: 100% 100%;
  -webkit-filter: drop-shadow(0 2px 12px rgba(0,0,0,0.2));
	drop-shadow(0 2px 12px rgba(0,0,0,0.2))
}

.phone img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 247px;
  height: 424px;
  object-fit: fill;
  border: 1px solid rgba(0, 0, 0, .05);
}

.hero .phone {
  margin-top: 6rem;
}

@media (min-width: 400px) {
  .phone {
    width: 335px;
    height: 655px;
  }
  .phone img {
    width: 295px;
    height: 510px;
  }
}

@media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {
    .phone {
      background-image: url("../images/iphone@2x.png");
      background-size: 100% 100%;
    }
}

.description {
  color: rgba(17, 23, 33, .5);
}

.button {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  border-radius: 4px;
  text-transform: none;
}

.button.button-primary {
  color: #111721;
  border-color: #1EEDB4;
  background-color: #1EEDB4;
}

.badges {
  padding: 2rem 0;
}

.badge {
  width: 50%;
  max-width: 130px;
  display: inline-block;
}

.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.footer a {
  text-decoration: none;
  color: rgba(255, 255, 255, .4);
}

.full {
  display: block;
}

.call-to-action {
  display: block;
  margin: 0 auto;
  max-width: 260px;
}

.animated-delayed {
  animation-delay: .45s;
}

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

.text-upper {
  text-transform: uppercase;
}

.standard.standard {
  padding: 4rem;
  height: auto;
}

.phone, .hero-heading, .description {
  z-index: 10;
}

.hero-heading {
  font-size: 3rem;
}

.hero-description {
  margin: 0 auto;
  max-width: 300px;
}

.copy {
  margin: 0 auto;
  max-width: 450px;
}

.copy .description {
  margin: 0 auto;
  max-width: 350px;
}

.copy-small {
  margin: 0 auto;
  max-width: 300px;
}

.copy-large {
  margin: 0 auto;
  max-width: 600px;
}

.copy-small .description {
  margin: 0 auto;
  max-width: 233px;
}

.pad-small {
  padding: 3rem 0;
}

#screenshot-1 {
  background-image: url("../images/leaderboard-screenshot.png");
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 18rem 0 7rem;
  text-align: center;
}

.section-heading, .hero-heading {
  font-weight: bold;
}

.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

.section.last {
  overflow-x: hidden;
  padding-bottom: 0;
}

.section.last .phone {
  margin-top: 3rem;
}

.hero {
  padding-top: 7rem;
  background-image: url("/images/hero-bg.png");
  background-size: cover;
}

.dark {
  color: #fff;
  background-color: #27354F;
}

.mid-tone {
  background-color: #F6F8F9;
}

.dark .description {
  color: rgba(255, 255, 255, .5);
}

.icons {
  background-image: url("/images/pattern-bg.png");
}

.navigation {
  padding-top: 8rem;
}

.navigation ul {
  list-style: none;
}

.navigation li {
  margin: 0;
  width: 50%;
  text-align: center;
  display: inline-block;
}

.floating-phone {
  margin: 3rem auto -17rem;
}

.button:hover, .button:focus {
  color: #111721 !important;
  background-color: #0EF8B8 !important;
}

.justify {
  text-align: justify;
}

.margin-bottom {
  margin-bottom: 24px;
}

#has-animated-confetti {
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 550px) {
  .call-to-action {
    margin: 0;
  }
  .phone {
    width: 190px;
    height: 363px;
  }
  .phone img {
    width: 167px;
    height: 278px;
  }
  .hero .phone {
    position: absolute;
    left: 0;
    margin-top: 3rem;
  }
  .hero-description {
    margin: 0;
  }
  .footer .call-to-action {
    margin: 0 auto;
  }
  .float-right-sm {
    float: right;
  }
  .text-left-sm {
    text-align: left;
  }
  .logo-container {
    text-align: center;
    margin-bottom: 4rem;
  }
  .hero {
    height: 510px;
  }
  .hero-heading {
    display: inline-block;
  }
  .badge {
    max-width: 100px;
  }
  .team {
    background-image: url("/images/screenshot-team.png");
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: 3% 90%;
  }
  .sub {
    background-image: url("/images/screenshot-sub.png");
    background-size: 7%;
    background-repeat: no-repeat;
    background-position: 96% 65%;
  }
  .copy-small .description {
    margin: 0;
  }
  .adjusted-copy {
    padding-top: 15%;
  }
}

@media (min-width: 750px) {
  .phone {
    width: 260px;
    height: 490px;
    position: relative;
  }
  .phone img {
    width: 226px;
    height: 372px;
  }
  .hero {
    height: 450px;
  }
  .hero .phone {
    position: relative;
    margin-top: -3rem;
  }
}

@media (min-width: 1000px) {
  .hero {
    height: 550px;
  }
  .phone {
    width: 301px;
    height: 590px;
  }
  .hero .phone {
    margin-top: -12rem;
    margin-left: 6rem;
  }
  .phone img {
    width: 266px;
    height: 454px;
  }
  .logo-container {
    margin-bottom: 12rem;
  }
  .badge {
    max-width: 130px;
  }
  .navigation li {
    width: 15%;
    vertical-align: middle;
  }
}

.break-text {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.cookie-banner {
  padding: 24px;
  border-radius: 2px;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 720px;
  max-width: 100%;
  z-index: 999;
  margin: auto;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  font-size: 13px;
  box-sizing: border-box;
  box-shadow: 0 0 24px rgba(0, 0, 0, .4);
}

.cookie-banner >:not(:last-child) {
  margin-bottom: 24px;
}

@media (min-width: 750px) {
  .cookie-banner {
    bottom: 10px;    
    flex-direction: row;
  }

  .cookie-banner >:not(:last-child) {
    margin-right: 24px;
  }
}

.hidden {
  display: none;
}