///////////////////////////////////////////////////////////////
// Device: Desktop
///////////////////////////////////////////////////////////////

.mea3 {
    display: block;
}
.mea3-header-title {
    margin-bottom: 20px;
    text-align: center;
}

.mea3-header-subtitle {
    margin-bottom: 20px;
    text-align: center;
}

.mea3-banner {
  position: relative;
}

.mea3-banner-container {
  @include outer-container;
}

.mea3-banner-picture {
  display: block;
  width: 100%;

  img
  {
    display: block;
    width: 100%;
  }
}

.mea3-banner-content {
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  height: 100%;
  width: 100%;

  position: absolute;
  left: 0;
  top: 0;
}

.mea3-banner-title {
    color: #FFFFFF;
    font-size: 4em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mea3-banner-subtitle {
    color: #FFFFFF;
    font-size: 1.6em;
    margin-bottom: 50px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.mea3-footer {
    display: block;
}

.mea3-footer-container {
    @include outer-container;

    padding: 0 10px;
}

.mea3-footer-discover {
    display: none;
}

.mea3-footer-locator {
    display: block;
    padding: 20px 0 0 0;
    text-align: right;
    width: 100%;
}

///////////////////////////////////////////////////////////////
// Device: Desktop XL (width > 1440px)
///////////////////////////////////////////////////////////////

@include desktop-xl {
    .mea3-footer-container {
        padding-left: 0;
        padding-right: 0;
    }
}

///////////////////////////////////////////////////////////////
// Device: Tablet
///////////////////////////////////////////////////////////////

@include tablet-landscape-and-below {
    .mea3-banner-title {
        font-size: 3em;
    }
    .mea3-banner-subtitle {
        font-size: 1.2em;
        margin-bottom: 0;
    }
    .mea3-banner-button {
        display: none;
    }
    .mea3-footer-container {
        padding: 20px;
    }
    .mea3-footer-discover {
        @include span-columns(5);

        padding: 20px !important;
    }
    .mea3-footer-locator {
        @include span-columns(7);
    }
}

///////////////////////////////////////////////////////////////
// Device: Mobile
///////////////////////////////////////////////////////////////

@include mobile-landscape-and-below {
    .mea3-header {
        display: block;
        padding: 0 20px;
    }
    .mea3-footer-discover {
        float: none;
        margin: 0 0 20px;
        width: 100%;
    }
    .mea3-footer-locator {
        float: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }
}