:root {
  --blue: #01D6F7;
  --charcoal: #2C2C2C;
  --red: #FF7777;
  --yellow: #F4E600;
  --gray-blue: #C3EBEE;
  --gray-purple: #E2EEEF;
  --gray-indigo: #BED7FF;
  --gray-green: #EDF9E7;
  --mint: #E5FBFF;
  --lora: 'Lora', serif;
  --gloria: 'Gloria Hallelujah', cursive;
  --source: 'Source Sans Pro', sans-serif;
}

body {
  margin: 0 auto;
  font-family: var(--source);
}

header {
  padding: 1em;
  background-color: var(--blue);
}

header h1 {
  margin: 2em 0 2em 0;
  font-size: 2.2em;
}

h1 {
  color: white;
  font-size: 2.5em;
  font-family: var(--lora);
}

h2 {
  font-weight: 300;
}

h3 {
  text-transform: uppercase;
  font-family: var(--lora);
}

h5 {
  font-family: var(--gloria);
  background-color: white;
  padding: 0.5em 1em;
  border-radius: 40px 40px 40px 0;
  display: inline-block;
  margin: 2em;
}

.section-4 p, .section-5 p, .section-6 p {
  line-height: 1.5em;
}

.center {
  text-align: center;
}

.m-1 {
  margin: 1em;
}

.blue {
  color: var(--blue);
}

.white {
  color: white;
}

.bg-gray-blue {
  background-color: var(--gray-blue);
}

.bg-purple {
  background-color: var(--gray-purple);
}

.bg-mint {
  background-color: var(--mint);
}

.bg-indigo {
  background-color: var(--gray-indigo);
}

.bg-gray-green {
  background-color: var(--gray-green);
}

.charcoal {
  color: var(--charcoal);
}

header img {
  height: 15em;
  margin: 2em auto;
  display: block;
}

.btn-white {
  color: var(--blue);
  background-color: white;
  border: none;
  font-family: var(--lora);
  font-size: 1.5em;
  padding: 0.3em 0.7em;
  margin: 0 auto;
  display: block;
}

.btn-arrow {
  color: white;
  background-color: var(--blue);
  border: none;
  margin: 0 auto;
  display: block;
}

.btn-black {
  color: white;
  background-color: var(--charcoal);
  text-decoration: none;
  font-family: var(--lora);
  font-size: 1em;
  padding: 0.3em 0.7em;
  float: right;
}

.btn-black:hover, .btn-white:hover {
  color: var(--charcoal);
  background-color: white;
  border: 1px solid var(--charcoal);
  font-family: var(--lora);
}

.btn-arrow:hover {
  color: var(--charcoal);
}

.material-icons.m-r {
  float: right;
  margin-left: 0.3em;
}

.material-icons.md-48 {
  font-size: 48px;
}

#displayPage {
/*  display: none;*/
}

#displayGif {
  display: none;
  transition: ease-in 10s;
}

#displayGif, #hideContent {
  height: 70vh;
}

#displayChat {
/*  display: none;*/
}

.chat {
  margin-top: -3em;
  text-align: center;
}

.chat h5 {
  margin: 0.5em 0.3em 0.3em 0;
}

.opposite {
  border-radius: 40px 40px 0 40px;
}

/* Section white */
.section-white {
  height: 3em;
  background-color: white;
}

/* Section 1 */
.section-1 {
  padding: 3em;
  background-color: white;
}

.welcome-box {
  border-bottom: 1px solid var(--blue);
}

.help-box {
  margin: 0 auto;
  line-height: 1.5em;
}

.hand {
  height: 9em;
  margin: -2em auto 0 auto;
  display: block;
}

/* Section 2 */
.section-2 {
  padding: 2em;
  background-color: var(--red);
}

.section-2 h1 {
  margin: 0.2em auto;
}

.section-2 h2 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.2em;
  margin: 0.2em auto;
}

.arrow {
  margin: -4em auto;
  height: 10em;
  display: block;
}

/* Section 3.0 */
.pre-section-3 {
  height: 3em;
  background-color: var(--yellow);
  border: 1px solid var(--yellow);
}

.pre-section-3 h5 {
  margin: 1.5em 3em -1.5em 3em;
  float: right;
}

/* Section 3 */
.section-3 {
  padding: 2em;
  background-color: var(--yellow);
}

.section-3 h3 {
  margin-top: 0;
}

.section-3 div {
  margin-bottom: 5em;
}

.people {
  margin: -5em auto;
  height: 10em;
  display: block;
}

.people-hide {
  display: none;
}

/* Section 4 */
.section-4 {
  padding: 1em;
}

.section-4 a, .section-5 a {
  margin-bottom: 3em;
}

.section-4 p, .section-5 p, .section-6 p {
  margin: 0.3em;
}

.section-4 h2, .section-5 h2, .section-6 h2 {
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--charcoal);
}

.section-4 h2 span, .section-5 h2 span, .section-6 h2 span {
  font-family: var(--lora);
  font-weight: 700;
}

.section-4 .grid {
  display: grid;
  grid-template-columns: 1fr;
}

.mobile {
  display: block;
  height: 25em;
  margin: 1em auto;
}

.screen-flex {
  display: flex;
  overflow-x: hidden;
}
.screen {
  height: 10em;
}

.desktop img {
  padding-top: 4.5em;
  height: 18em;
  display: block;
  margin: 0 auto;
}

/* Section 5 */
.section-5 {
  padding: 2em 2em 3em 2em;
}

.section-5 img {
  height: 9.5em;
  display: block;
  margin: 0 auto;
}

#tandamos-phone {
  height: 25em;
}

/* Section 6 */
.section-6 {
  padding: 2em;
}

/* footer */
footer {
  padding: 1em;
  border: 1px solid var(--charcoal);
  text-align: center;
}

footer img {
  height: 1.5em;
  padding: 0.5em;
  margin: 0.5em;
}

footer a {
  color: var(--charcoal);
}

footer img:hover {
  background-color: var(--yellow);
}

@media only screen and (min-width: 768px) {

  header {
    background-color: var(--blue);
    padding: 3em;
  }

  header h1 {
    font-size: 3em;
  }

  h1 {
    font-size: 3.5em;
  }

  .auto-margin {
    width: 60%;
    margin: 0 auto;
  }

  .chat {
    margin-top: -3em;
    text-align: center;
  }

  .btn-white, .btn-black {
    font-size: 1.2em;
  }

  /* Section 1 */
  .welcome-box {
    border-bottom: 1px solid var(--blue);
    padding: 2em;
  }

  .flex {
    display: flex;
  }

  .space-around {
    justify-content: space-around;
  }

  .help-box {
    margin: 1.5em auto;
  }

  .help h3 {
    margin: 1.5em auto;
  }

  /* Section 2 */
  .section-2 {
    padding: 3em;
  }

  .section-2 h2 {
    font-size: 3em;
  }

  /* Section 3.0 */
  .pre-section-3 {
    height: 2.5em;
  }

  .pre-section-3 h5 {
    margin: 1.5em 3em -1.5em 3em;
    float: right;
  }

  /* Section 3 */
  .section-3 {
    padding: 3em;
  }

  .people, .people-hide {
    margin: -5em auto;
    height: 10em;
    display: block;
  }

  /* Section 4 */
  .section-4 {
    padding: 3em;
  }

  .section-4 p, .section-5 p, .section-6 p {
    margin: 0.3em;
  }

  .section-4 .mobile, .section-6 .mobile {
    height: 28em;
    margin: 1.5em auto;
  }

  .section-6 h5 {
    float: right;
  }

  .section-4 h2 span, .section-5 h2 span, .section-6 h2 span {
    font-family: var(--lora);
    font-weight: 700;
  }

  .section-4 .grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  /* Section 5 */
  .col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .section-5 {
    padding: 3em;
  }

  .section-5 img {
    height: 14em;
    display: block;
    margin: 0 auto;
  }

  /* Section 6 */
  .section-6 {
    padding: 3em;
  }

  .section-6 h5 {
    float: right;
  }

  .mobile-box {
    display: block;
    float: right;
  }

  .filler {
    height: 5em;
  }

  /* footer */

  footer h3, footer h2, footer a {
    margin-left: 2em;
  }
  .flex-footer {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}