/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# General Styles
 */
.wp-block-mat-banner {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #333;
  color: #fff; }
  .wp-block-mat-banner .contents {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    min-height: 400px; }
  .wp-block-mat-banner .hero {
    width: 100%;
    background: rgba(20, 50, 88, 0.5); }
  .wp-block-mat-banner .copy {
    max-width: 650px;
    padding-top: 2rem;
    padding-bottom: 2rem; }
  .wp-block-mat-banner .banner-headline h1, .wp-block-mat-banner .banner-headline h2, .wp-block-mat-banner .banner-headline h3, .wp-block-mat-banner .banner-headline h4 {
    font-weight: 700;
    font-family: Montserrat, Corbel, Arial, sans-serif;
    line-height: 3.75rem;
    text-align: center;
    padding-top: 0 !important; }
  .wp-block-mat-banner .banner-headline h1 {
    font-size: 3.125rem; }
  .wp-block-mat-banner .menu-button {
    position: absolute;
    left: calc(50% - 100px);
    background: #143258;
    width: 200px;
    bottom: 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.125rem;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px; }
    .wp-block-mat-banner .menu-button:focus, .wp-block-mat-banner .menu-button:hover {
      background-color: #333;
      color: #FFFFFF; }
    .wp-block-mat-banner .menu-button:after {
      content: ' ';
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' baseProfile='basic' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20.28 11.56' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Crect x='7.33' y='4.78' transform='matrix(0.7071 -0.7071 0.7071 0.7071 0.163 11.9497)' class='st0' width='14.34' height='2'/%3E%3Crect x='4.78' y='-1.39' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -2.3934 5.7782)' class='st0' width='2' height='14.34'/%3E%3C/g%3E%3C/svg%3E%0A");
      width: 20px;
      height: 20px;
      content: ' ';
      display: block;
      background-repeat: no-repeat;
      position: absolute;
      right: 13px;
      top: 30px; }

.wp-block-mat-banner-banner-block-menu {
  background-color: #EEEEF8 !important;
  padding-top: 0px !important; }
  .wp-block-mat-banner-banner-block-menu > ul {
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between; }
  .wp-block-mat-banner-banner-block-menu .menu-item {
    margin: 0px 0px !important;
    display: block;
    width: 25% !important;
    padding: 0px !important;
    text-align: center;
    border-bottom: 1px solid #F66014 !important;
    border-right: 1px solid #F66014; }
    @media all and (min-width: 800px) {
      .wp-block-mat-banner-banner-block-menu .menu-item {
        width: 25%; } }
  .wp-block-mat-banner-banner-block-menu a {
    font-family: Roboto !important;
    font-style: normal !important;
    font-weight: bold !important;
    font-size: 20px !important;
    line-height: 40px !important;
    color: #143258 !important; }
    .wp-block-mat-banner-banner-block-menu a:hover {
      color: #143258 !important; }