html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
  font-family: Tahoma, "Helvetica Neue", Arial, sans-serif;
  color: #333;
}

h1 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-top: 1rem;
  text-align: center;
}

h2 {
  font-size: 2.3rem;
}

h2.leadingSectionTitle {
  margin-bottom: 30px;
}

h3 {
  padding: 1rem 0;
  text-align: center;
}

h6 {
  font-weight: bold;
}

a.appStoreButton {
  background: url("../img/app_store_badge_135x40.svg") no-repeat center center
    scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  width: 165px;
  height: 49px;
  cursor: pointer;
  display: block;
}

a.appStoreButton.large {
  width: 189px;
  height: 56px;
}

/* ## Header Section */

.row.headerSection {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 0px;
}

.subheading {
  font-size: 1.8rem;
}

.topLogo {
  height: 48px;
}

.row {
  padding-left: 15px;
  padding-right: 15px;
}

/* ## Hero Section */

.heroRow {
  padding-top: 30px;
  padding-bottom: 40px;
  text-align: center;
}

.heroSubtext {
  display: none;
}

.heroQuote {
  color: #3484d8;
  font-weight: bold;
  font-size: 0.8em;
  margin-bottom: 40px;
}

.heroButtonAndRatingCentered {
    margin-top: 40px;
}

.heroButtonAndRating {
  display: none;
}

.heroImage {
  width: 95%;
}

/* ## 1,2,3 section */

.row.graphicBgSection {
  padding-top: 120px;
  padding-bottom: 120px;
  margin-bottom: 20px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMjFDNC43MDEwMSAyMSAwIDE2LjI5OSAwIDEwLjVDMCA0LjcwMTAxIDQuNzAxMDEgMCAxMC41IDBDMTYuMjk5IDAgMjEgNC43MDEwMSAyMSAxMC41QzIxIDE2LjI5OSAxNi4yOTkgMjEgMTAuNSAyMVoiIGZpbGw9IiNGRjFGMUYiLz4KPC9zdmc+Cg=="), /* red circle*/
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMjFDNC43MDEwMSAyMSAwIDE2LjI5OSAwIDEwLjVDMCA0LjcwMTAxIDQuNzAxMDEgMCAxMC41IDBDMTYuMjk5IDAgMjEgNC43MDEwMSAyMSAxMC41QzIxIDE2LjI5OSAxNi4yOTkgMjEgMTAuNSAyMVoiIGZpbGw9IiMyQkQ2N0IiLz4KPC9zdmc+Cg=="), /* green circle */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjUgMjFDNC43MDEwMSAyMSAwIDE2LjI5OSAwIDEwLjVDMCA0LjcwMTAxIDQuNzAxMDEgMCAxMC41IDBDMTYuMjk5IDAgMjEgNC43MDEwMSAyMSAxMC41QzIxIDE2LjI5OSAxNi4yOTkgMjEgMTAuNSAyMVoiIGZpbGw9IiMyQkQ2N0IiLz4KPC9zdmc+Cg=="), /* green circle */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTBDMi4yMzg1OCAxMCAwIDcuNzYxNDIgMCA1QzAgMi4yMzg1OCAyLjIzODU4IDAgNSAwQzcuNzYxNDIgMCAxMCAyLjIzODU4IDEwIDVDMTAgNy43NjE0MiA3Ljc2MTQyIDEwIDUgMTBaIiBmaWxsPSIjRjdFMzZEIi8+Cjwvc3ZnPgo="), /* yellow circle */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjE4IiBoZWlnaHQ9IjI5MSIgdmlld0JveD0iMCAwIDIxOCAyOTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTS0xMjguODUzIDEzMy44NThDLTExOC41OTEgMTE2LjI4IC0xMDQuOTY3IDEwMC44OTUgLTg4Ljc1ODcgODguNTgxM0MtNzIuNTUwNSA3Ni4yNjggLTU0LjA3NTggNjcuMjY3OCAtMzQuMzg5MyA2Mi4wOTQ0Qy0xNC43MDI4IDU2LjkyMTEgNS44MDk5MiA1NS42NzU5IDI1Ljk3NzYgNTguNDMwMUM0Ni4xNDUzIDYxLjE4NDIgNjUuNTczMSA2Ny44ODM3IDgzLjE1MTYgNzguMTQ2MUMxMDAuNzMgODguNDA4NCAxMTYuMTE1IDEwMi4wMzMgMTI4LjQyOSAxMTguMjQxQzE0MC43NDIgMTM0LjQ0OSAxNDkuNzQyIDE1Mi45MjQgMTU0LjkxNSAxNzIuNjFDMTYwLjA4OSAxOTIuMjk3IDE2MS4zMzQgMjEyLjgwOSAxNTguNTggMjMyLjk3N0MxNTUuODI2IDI1My4xNDUgMTQ5LjEyNiAyNzIuNTczIDEzOC44NjQgMjkwLjE1MUw5MC42MDMxIDI2MS45NzdDOTcuMTY1NSAyNTAuNzM2IDEwMS40NSAyMzguMzEyIDEwMy4yMTEgMjI1LjQxNkMxMDQuOTcyIDIxMi41MTkgMTA0LjE3NiAxOTkuNDAyIDEwMC44NjggMTg2LjgxM0M5Ny41NTk0IDE3NC4yMjQgOTEuODA0IDE2Mi40MTEgODMuOTMwMiAxNTIuMDQ2Qzc2LjA1NjMgMTQxLjY4MSA2Ni4yMTggMTMyLjk2OSA1NC45NzcxIDEyNi40MDdDNDMuNzM2MiAxMTkuODQ0IDMxLjMxMjkgMTE1LjU2IDE4LjQxNjMgMTEzLjc5OUM1LjUxOTc2IDExMi4wMzggLTcuNTk3MzkgMTEyLjgzNCAtMjAuMTg2MiAxMTYuMTQyQy0zMi43NzUgMTE5LjQ1IC00NC41ODkgMTI1LjIwNiAtNTQuOTUzNiAxMzMuMDhDLTY1LjMxODIgMTQwLjk1NCAtNzQuMDMwNCAxNTAuNzkyIC04MC41OTI4IDE2Mi4wMzNMLTEyOC44NTMgMTMzLjg1OFoiIGZpbGw9IiNEREU5RkYiLz4KPC9zdmc+Cg=="), /* ellipse_1 */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ3IiBoZWlnaHQ9IjMxOCIgdmlld0JveD0iMCAwIDE0NyAzMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTE2OS41MjIgMzEwLjQ3OEMxNDkuMTg3IDMxMS4zODMgMTI4Ljg3MyAzMDguMjc0IDEwOS43NCAzMDEuMzI4QzkwLjYwNyAyOTQuMzgzIDczLjAyOTMgMjgzLjczNiA1OC4wMTA2IDI2OS45OTdDNDIuOTkxOSAyNTYuMjU4IDMwLjgyNjQgMjM5LjY5NiAyMi4yMDg2IDIyMS4yNTVDMTMuNTkwOSAyMDIuODE0IDguNjg5NjMgMTgyLjg1NyA3Ljc4NDc3IDE2Mi41MjJDNi44Nzk5MSAxNDIuMTg3IDkuOTg5MTMgMTIxLjg3MyAxNi45MzQ5IDEwMi43NEMyMy44ODA3IDgzLjYwNzIgMzQuNTI3MSA2Ni4wMjk0IDQ4LjI2NjEgNTEuMDEwOEM2Mi4wMDUxIDM1Ljk5MjEgNzguNTY3NyAyMy44MjY2IDk3LjAwODMgMTUuMjA4OEMxMTUuNDQ5IDYuNTkxMDMgMTM1LjQwNiAxLjY4OTggMTU1Ljc0MSAwLjc4NDk0M0wxNTguMjI1IDU2LjYxMjZDMTQ1LjIyMiA1Ny4xOTEyIDEzMi40NiA2MC4zMjU0IDEyMC42NjggNjUuODM2MUMxMDguODc2IDcxLjM0NjkgOTguMjg0NCA3OS4xMjYzIDg5LjQ5ODggODguNzMwMkM4MC43MTMyIDk4LjMzNDIgNzMuOTA1MiAxMDkuNTc1IDY5LjQ2MzYgMTIxLjgwOUM2NS4wMjIgMTM0LjA0NCA2My4wMzM4IDE0Ny4wMzUgNjMuNjEyNCAxNjAuMDM4QzY0LjE5MSAxNzMuMDQxIDY3LjMyNTIgMTg1LjgwMyA3Mi44MzU5IDE5Ny41OTVDNzguMzQ2NyAyMDkuMzg4IDg2LjEyNjEgMjE5Ljk3OSA5NS43MzAxIDIyOC43NjRDMTA1LjMzNCAyMzcuNTUgMTE2LjU3NCAyNDQuMzU4IDEyOC44MDkgMjQ4LjhDMTQxLjA0NCAyNTMuMjQxIDE1NC4wMzQgMjU1LjIyOSAxNjcuMDM4IDI1NC42NTFMMTY5LjUyMiAzMTAuNDc4WiIgZmlsbD0iI0RERTlGRiIvPgo8L3N2Zz4K"), /* ellipse 2 */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MjYiIHZpZXdCb3g9IjAgMCAxNjAwIDkyNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2MDAgMEwwIDk5LjE1NDlWOTI2TDE2MDAgODI2Ljg0NVYwWiIgZmlsbD0iI0YxRjdGRiIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9zdmc+Cg=="); /* slanted_bg_rect */
  background-position: 14% 86%, 88% 64%, 17% 44%, 81% 20%, left 6%, right 94%,
    left top;
  background-size: 2%, 1%, 2%, 1%, 20%, 14%, 100% 100%;
  background-repeat: no-repeat;
}

.stepIconContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.stepIconContainer img {
  margin-left: auto;
  margin-right: auto;
}

.stepImage {
  height: 150px;
}

.stepText,
.stepHeading {
  text-align: center;
}

.stepContainer p {
  margin-left: 10px;
  margin-right: 10px;
}

.stepText {
  font-size: 1em;
  color: #555;
}

.stepHeading {
  font-size: 1.2em;
  font-weight: bold;
}

.steps {
  margin-top: 60px;
}

/* ## Features section */

.featuresSection .row {
  padding-bottom: 60px;
}

.featureImage {
  width: 100%;
  max-width: 500px;
}

.featureText {
  color: #555;
  max-width: 300px;
  font-size: 0.8em;
}

.featureTitle {
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 1.1em;
}

.featureLinkContainer {
  padding: 40px 0;
  text-align: center;
}

.featureLinkContainer a {
  border: 2px solid #216ACC;
  padding: 14px 2rem;
  border-radius: 14px;
  text-decoration: none;
  color: #216ACC;
}
  
/* ## Industries section */

.jobsSection {
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  background-color: #f1f7ff;
}

.jobsSection h2 {
  margin-bottom: 1em;
}

.jobPhotoContainer {
  text-align: center;
}

.industriesPhoto {
  width: 90%;
  margin-top: 40px;
}

.jobPhotoContainer {
  text-align: right;
}

/* ## Reviews section */

.reviewSection {
  padding: 60px 0;
  margin-right: 1em;
  margin-left: 1em;
}

.appStoreStarRating {
  color: #555;
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.reviewContainer {
  height: 280px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0px 8px 12px #efefef;
}

div.reviewContainerPadding {
  padding: 20px;
}

p.reviewTitle {
  margin-top: 10px;
  font-weight: bold;
}

p.reviewBody {
  margin-top: 10px;
}

.starImage {
  height: 14px;
}

.starImage.large {
  height: 16px;
}

/* ## Download GB section */

.downloadSection {
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  background-color: #f1f7ff;
}

.downloadSection h2 {
  margin-bottom: 20px;
}

.downloadSection p {
  color: #777;
  margin-bottom: 40px;
}

.downloadSection a {
  margin-left: auto;
  margin-right: auto;
}

/* ## Footer section */

.footerSection {
  padding-top: 80px;
  text-align: center;
}

.footerSection img {
  margin-bottom: 20px;
}

.footerSection p {
  font-size: 0.7em;
  margin-bottom: 0.7em;
}

p.copyright {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.7em;
}

@media (max-width: 767.98px) {
  .mobile-hidden {
    display: none;
  }
}

/* bigger than phone */
@media (min-width: 768px) {
  html {
    font-size: 14px;
  }

  h1 {
    text-align: left;
  }

  h2.leadingSectionTitle {
    margin-bottom: 40px;
  }

  h3 {
    text-align: left;
  }
  /* ## Header Section */

  .row.headerSection {
    text-align: left;
  }

  .topLogo {
    height: 44px;
  }

  /* .row {
    padding-left: 50px;
    padding-right: 50px;
  } */

  /* ## Hero Section */

  .heroRow {
    text-align: left;
  }

  .heroImage {
    width: 100%;
  }

  .heroSubtext {
    display: block;
    color: #777;
    text-align: center;
    margin-bottom: 50px;
    text-align: left;
  }

  .heroButtonAndRatingCentered {
    display: none;
  }

  .heroButtonAndRating {
    display: inline-flex;
    align-items: center;
  }

  .heroQuote {
    margin-bottom: 0px;
  }

  /* ## 1,2,3 section */

  .row.graphicBgSection {
    margin-top: 60px;
    padding-top: 100px;
    padding-bottom: 100px;
    background-position: 12% 90%, 71% 88%, 4% 64%, 92% 26%, left 2%, right 98%,
      left top;
    background-size: 1%, 1%, 0.5%, 0.5%, 10%, 7%, 100% 100%;
  }

  .graphicBgSection h2.leadingSectionTitle {
    margin-bottom: 20px;
  }

  .steps {
    margin-top: 30px;
  }

  .stepContainer {
    background-color: #fff;
    min-width: 175px;
    max-width: 250px;
    padding: 20px 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 5px 12px #eee;
    border-radius: 15px;
  }

  .stepIconContainer {
    margin-bottom: 20px;
  }

  .stepImage {
    height: 105px;
  }

  .stepArrow {
    display: block;
    font-size: 36px;
    color: #87b5fa;
    text-align: center;
  }

  .stepHeading {
    font-weight: normal;
    height: 55px;
  }

  .stepText {
    margin-bottom: 0;
  }

  /* ## Features section */

  .featuresSection {
    padding-top: 80px;
    padding-bottom: 60px;
  }

  .featuresSection .row {
    padding-bottom: 0;
  }

  .featureTitle {
    font-size: 1.1rem;
  }

  .featureText {
    font-size: 0.9rem;
    text-align: left;
  }
  
  /* ## Industries section */
  .jobsSection {
    text-align: left;
    padding-bottom: 50px;
    margin-top: 80px;
  }

  .jobsSection h2 {
    margin-bottom: 1rem;
  }

  .jobPhotoContainer {
    text-align: left;
  }

  .industriesPhoto {
    float: right;
    margin-top: 0px;
    width: 80%;
  }

  /* ## Review section */
  .reviewSection {
    margin-top: 80px;
  }

  div.reviewContainer {
    height: 300px;
  }

  /* ## Footer section */
  .footerSection {
    text-align: left;
  }
}

/* bigger than tablet */
@media (min-width: 992px) {

  html {
    font-size: 16px;
  }

  /* ## Hero section */

  .heroButtonAndRatingCentered {
    display: none;
  }
  
  /* ## 1,2,3 section */

  .row.graphicBgSection {
    padding-top: 100px;
    padding-bottom: 100px;
    background-position: 12% 90%, 71% 88%, 4% 64%, 94% 30%, left -1%, right 100%,
      left top;
  }

  .stepContainer {
    padding: 40px 20px;
    border-radius: 15px;
  }

  .stepIconContainer {
    margin-bottom: 30px;
  }

  .stepImage {
    height: 125px;
  }

  .stepArrow {
    font-size: 50px;
  }

  /* ## Features section */
  .row.featuresSection {
    padding-left: 8%;
    padding-right: 8%;
  }

  .featureTitle {
    font-size: 1.5rem;
  }

  .featureText {
    font-size: 1rem;
  }
}

@media (min-width: 1200px) {
  .row {
    padding-left: 80px;
    padding-right: 80px;
  }

  .row.graphicBgSection {
    padding-top: 125px;
    padding-bottom: 125px;
  }
}

@media (min-width: 1400px) {
  .row {
    padding-left: 175px;
    padding-right: 175px;
  }

  .row.graphicBgSection {
    background-position: 17% 90%, 68% 87%, 8% 64%, 90% 33%, left -5%, right 101%,
      left top;
    background-size: 1%, 1%, 0.5%, 0.5%, 10%, 7%, 100% 100%;
  }
}