body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h5.fabric_h5 {
  font-size: 2.4rem;
}

div.fabric_thumbnail {
  border: 0px;
}

.cover .intro {
  padding-top: 20px;
  padding-bottom: 20px;
}

.cover-heading {
    font-size: 6rem;
    line-height: 8rem;
}

.tagline {
  margin-top: 120px;
}

.logo {
    background: url(webassets/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
    width: 100px;
}

.value-prop-heading {
  margin-bottom: .3rem;
}
.value-prop-description {
  opacity: .8;
  font-weight: 300;
}

.phones {
  position: relative;
}
.phone {
  position: relative;
  max-height: 600px;
  max-width: 80%;
  margin: 3rem auto -12rem;
}
.phone + .phone {
  display: none;
}

.quote-ground {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:200px;
  padding: 5px;
}

.quote-ground img {
  max-height: 80px;
  max-width: 80px;
}

.quote {
   text-align: left;
   color: white;
   min-height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12pt;
}

/* todo: untested. Does Arun want to keep this? It is not
 * specifically called out in Bootstrap breakpoints.
@media (min-width: 550px) {
  .cover-heading {
    font-size: 6rem;
  }
  .cover-byline {
    font-size: 2.4rem;
    max-width: 300px;     
  }  
  .phone {
    position: absolute;
    top: -7rem;
    right: -10rem;
    max-height: 362px;
    z-index: 3;
  }
  .phone + .phone {
    top: -6rem;
    display: block;
    max-width: 73.8%;
    right: -5rem;
    z-index: 2;
    max-height: 338px;
  }
  .logo {
    height: 100px;
    width: 100px;
  }
}
 */

@media (min-width: 768px) {
  .cover {
    text-align: left;
  }
  .cover-heading {
    font-size: 6rem;
  }
  h4.cover-byline {
    max-width: 400px;
  }
  .cover-main {
    margin-top: 20px;
  }
  .phone {
    position: absolute;
    top: -15rem;
    right: 3rem;
    max-height: 490px;
    margin-top: 10rem;
    z-index: 3;
  }
  .phone + .phone {
    display: block;
    top: -13rem;
    right: 0rem;
    max-height: 452px;
    z-index: 2;
  }
  .logo {
    height: 150px;
    width: 150px;
  }
  .tagline {
    margin-top: 100px;
  }
  .value-props img {
    max-width: 150px;
  }
  .quote-ground {
    max-width: 100%;  
  }
  .quote-ground img {
    max-width: 100%;
  }
  .quote {
     width: 100%;
     background: rgba(255, 255, 255, 0.15);
     font-size: 14pt;
  }

}


@media (min-width: 992px) {
  .cover-heading {
    font-size: 8rem;
  }
  h4.cover-byline {
    font-size: 4rem;   
  }
  .phone {
    top: -14rem;
    right: 11rem;
    max-height: 550px; /*615px;*/
    margin-top: 10rem;
  }
  .phone + .phone {
    top: -12rem;
    right: 8rem;
    max-height: 500px;
  }
  .logo {
    height: 200px;
    width: 200px;
  }

}