/*! Please do not edit directly from this file
 * This CSS is compiled from SASS: /devdesign/featured/nav/_sources/nav.scss
 */
/*-------------------
      Base Sizes
--------------------*/
/* This is the single variable that controls them all */
/* The size of page text  */
/*-------------------
     Transitions
--------------------*/
.brochure {
  width: 20rem;
  position: absolute;
  right: 5%;
  top: 1rem; }
  @media (max-width: 1199.98px) {
    .brochure {
      width: 15rem; } }
  .brochure .brochure_content {
    width: 20rem;
    position: absolute;
    right: 0;
    top: 1rem; }
    @media (max-width: 1199.98px) {
      .brochure .brochure_content {
        width: 15rem; } }
    .brochure .brochure_content .brochure_text {
      position: absolute;
      color: #fff;
      top: 2rem;
      right: 1.1rem;
      width: 5rem;
      font-size: 1rem;
      line-height: 1.5; }
      @media (max-width: 1199.98px) {
        .brochure .brochure_content .brochure_text {
          top: 1.75rem;
          right: 0.25rem;
          width: 5rem;
          font-size: .875rem;
          line-height: 1.2; } }

@media (max-width: 767.98px) {
  .f-hero-title {
    font-size: 2rem; }
  .f-hero-text {
    font-size: 1.25rem;
    margin-bottom: 0; } }

@media (max-width: 767.98px) {
  .callout-list-item:before {
    content: attr(data-point) !important;
    position: absolute !important;
    font-size: 1.1rem !important;
    top: 0.4rem !important;
    left: 0.75rem !important; }
  .callout-list[class*="-flex"] > .callout-list-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; }
  .callout-list-item {
    position: relative;
    padding-left: 2.25rem; } }

.banner-box {
  height: 36rem;
  border-radius: 0.25rem; }
  @media (max-width: 991.98px) {
    .banner-box {
      height: 18rem;
      border-radius: 0; } }
  .banner-box.sound {
    background: url(../jpg/hero_soundwe32.jpg) 50% 50%;
    background-size: cover; }
  .banner-box.connectivity {
    background: url(../jpg/hero_connectivitywod4.jpg) 50% 50%;
    background-size: cover; }
  .banner-box.control {
    background: url(../jpg/hero_controlhlr3.jpg) 50% 50%;
    background-size: cover; }

.overlap-cards .cards {
  margin-top: -2rem; }