   .header-background {
      background: url('https://deanhume.github.io/beer/images/beer.jpg') center / cover;
      height: 400px;
    }

    .header-background-style {
      background: url('https://deanhume.github.io/beer/images/styles.jpg') center / cover;
          height: 400px;
    }

    .header-background-beer {
      background: url('https://deanhume.github.io/beer/images/beer-page.jpg') center / cover;
      height: 400px;
    }

    .header-background-about {
      background: url('https://deanhume.github.io/beer/images/about.jpg') center / cover;
      height: 400px;
    }

    .header-background-settings {
      background: url('https://deanhume.github.io/beer/images/beer-settings.jpg') center / cover;
      height: 400px;
    }

    .demo-layout-transparent .mdl-layout__header,
    .demo-layout-transparent .mdl-layout__drawer-button {
      color: white;
    }

    .beer_text{
      margin: auto;
      color: white;
      font-family: 'Gabriela', serif;
      font-size: 40px;
      width: 80%;
      text-align: center;
      line-height: 40px;
    }

    .demo-card-square.mdl-card {
      width: 320px;
      height: 320px;
    }
    .demo-card-square > .mdl-card__title {
      color: #fff;
    }

    .palebeer{
      background: url('https://deanhume.github.io/beer/images/srm/light.jpg') center / cover;
    }

    .amberbeer{
      background: url('https://deanhume.github.io/beer/images/srm/amber.jpg') center / cover;
    }

    .darkbeer{
      background: url('https://deanhume.github.io/beer/images/srm/dark.jpg') center / cover;
    }

    .main_content{
      margin: 0 auto;
    }

    .grid_border{
      border-top: .1rem solid #e4e4e4;
    }

    .mdl-layout-title a {
      font-family: Gabriela;
      text-decoration: none;
      color: white;
      font-size: 30px;
      letter-spacing: -2px;
    }

    .styleTagline {
      margin-top: 16%;
      font-size: 25px;
      font-style: italic;
    }

    .style_name{
        margin-top: 15%;
        font-size: 100px;
        letter-spacing: -7px;
        font-family: 'Gabriela', serif;
    }

    .truncate {
      width: 250px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .learn_intro{
      font-size: 20px;
      width: 90%;
      text-align: justify;
      line-height: 40px;
    }

    .learn_intro_style{
        font-size: 20px;
        padding-bottom: 180px;
        width: 90%;
        text-align: justify;
        line-height: 40px;
        margin-top: 250px;
        padding-top: 300px;
    }

    .learn_title{
      font-size: 40px;
      padding-top:100px;
      padding-bottom: 50px;
      font-family: 'Gabriela', serif;
      display: inline-block;
      text-align: center;
      width: 100%;
    }

    .about_text{
      font-size: 20px;
      text-align: justify;
      line-height: 40px;
      padding-bottom: 30px;
      width: 700px;
    }

    .map_image {
       position: relative;
       width: 100%;
    }

    .image_text {
        position: absolute;
        top: 200px;
        width: 100%;
        font-family: 'Gabriela', serif;
        font-size: 80px;
        line-height: 100px;
        text-align: center;
        color: #fff;
    }

    .link_size{
        font-size: 20px;
    }

    .learn_intro p{
      font-size: 20px;padding-bottom: 180px;text-align: center;line-height: 40px;margin-top: 250px;
    }

        .section__circle-container__circle {
        width: 64px;
        height: 64px;
        border-radius: 32px;
        margin: 8px 0;
    }

    .section__text:not(:last-child) {
        border-bottom: 1px solid rgba(0,0,0,.13);
    }

    .mdl-layout-title a {
        font-family: Gabriela;
        text-decoration: none;
        color: white;
        font-size: 30px;
        letter-spacing: -2px;
    }

    .mdl-card i{
        font-size: 80px;
    }

    #drawer{
        font-size: 25px;
        color: black;
    }

    .beer_map_image{
      position: relative;
      width: 100%;
    }

    .footer_margin{
      margin-bottom: 150px;
    }
    .title_width{
      min-width: 50%;
    }

    .beer_icon{
      width: 35px;
      color: white;
      margin: auto;
      display: block;
    }

    .grid_padding{
      padding-left: 5%;
    }

    .beer_map{
      background-image: url('https://deanhume.github.io/beer/images/beer-map.png');
      height: 300px;
      background-size: cover;
    }

    .mdl-textfield__input {
        height:40px;
    }

    .mdl-textfield__label
    {
      left:50px;
    }

    .mdl-textfield{
      display: inherit;
    }

    .mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
      top: -18px;
    }

    .style_hero_text{
      text-align: center;
      line-height: 100px;
      margin-top: 220px;
    }

    .settings_icons{
      padding-left: 10px;
      padding-top: 25px;
    }

    .mdl-card__title-text{
      text-shadow: #474545 2px 2px 2px;
    }

    /* Desktop */
    @media only screen and (min-width: 1025px) {
      .hide_desktop{
        display: none!important;
      }
    }

    /* Tablet */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .header-background {
         background: url('https://deanhume.github.io/beer/images/beer-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-style {
         background: url('https://deanhume.github.io/beer/images/styles-mobile.jpg') center / cover;
             height: 400px;
       }

       .header-background-beer {
         background: url('https://deanhume.github.io/beer/images/beer-page-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-about {
         background: url('https://deanhume.github.io/beer/images/about-mobile.jpg') center / cover;
         height: 400px;
       }

      .header-background-settings {
        background: url('https://deanhume.github.io/beer/images/beer-settings-mobile.jpg') center / cover;
        height: 400px;
      }

      .hide_tablet{
        display: none!important;
      }

      .beer_map{
        background-image: url('https://deanhume.github.io/beer/images/beer-map.png');
        height: 200px;
        background-size: cover;
      }

      .demo-card-square.mdl-card {
          width: 150px;
          height: 220px;
      }

      .learn_intro {
          font-size: 20px;
          width: 90%;
          text-align: justify;
          line-height: 40px;
      }

      .learn_title {
        width: 100%;
      }

      .beer_content{
        margin-top: 0px;
      }

      .main_content {
          margin: 0 auto;
      }

      .style_name {
          margin-top: 25%;
          font-size: 50px;
          letter-spacing: -7px;
          font-family: 'Gabriela', serif;
      }

      .styleTagline {
          margin-top: 30%;
          font-size: 25px;
          font-style: italic;
      }

      .learn_intro_style {
          font-size: 20px;
          padding-bottom: 180px;
          width: 80%;
          text-align: center;
          line-height: 40px;
          margin-top: 580px;
          padding-top: 300px;
      }

      .beer_map_image{
          position: relative;
          width: 100%;
          margin-top: 100px;
      }

      .image_text {
          position: absolute;
          top: 50px;
          width: 100%;
          font-family: 'Gabriela', serif;
          font-size: 50px;
          line-height: 100px;
          text-align: center;
          color: #fff;
      }

      .mdl-mega-footer{
        margin-top: 50px;
      }
    }

    /* Phablets */
    @media only screen and (min-width: 580px) and (max-width: 767px) {

      .demo-card-square.mdl-card {
          width: 150px;
          height: 220px;
      }


      .style_hero_text {
          width: inherit;
      }

      .style_name {
          margin-top: 25%;
          font-size: 50px;
          letter-spacing: -7px;
          font-family: 'Gabriela', serif;
      }

      .grid_padding{
        padding-left: 10%;
      }

      .beer_map{
        background-image: url('https://deanhume.github.io/beer/images/beer-map.png');
        height: 200px;
        background-size: cover;
      }

      .about_text{
        font-size: 18px;
        text-align: justify;
        line-height: 40px;
        padding-bottom: 30px;
        width: 300px;
      }

      .header-background {
         background: url('https://deanhume.github.io/beer/images/beer-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-style {
         background: url('https://deanhume.github.io/beer/images/styles-mobile.jpg') center / cover;
             height: 400px;
       }

       .header-background-beer {
         background: url('https://deanhume.github.io/beer/images/beer-page-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-about {
         background: url('https://deanhume.github.io/beer/images/about-mobile.jpg') center / cover;
         height: 400px;
       }

      .header-background-settings {
        background: url('https://deanhume.github.io/beer/images/beer-settings-mobile.jpg') center / cover;
        height: 400px;
      }       

        .hide_mobile{
          display: none!important;
        }

        .about-footer{
          margin-top: 20px;
        }

        .tagline-padding{
          padding-left: 100px;
        }

        .image_text {
            position: absolute;
            top: 10px;
            width: 100%;
            font-family: 'Gabriela', serif;
            font-size: 26px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }

        .learn_title {
          width: 100%;
          font-size: 40px;
          padding-bottom: 50px;
          font-family: 'Gabriela', serif;
          display: inline-block;
          text-align: center;
        }

        .learn_intro {
            font-size: 20px;
            width: 90%;
            text-align: justify;
            line-height: 40px;
        }

        .styleTagline {
            font-size: 15px;
            font-style: italic;
            width: 180px;
            text-align: center;
            margin-top: 18px;
        }

        .mdl-layout__header-row .mdl-navigation__link{
          display: none;
        }

        .text_margin{
          margin-top: 25%;
        }

        .hero_title{
          padding-left: 0px;
        }

        .learn_intro_style {
            font-size: 20px;
            padding-bottom: 180px;
            width: 80%;
            text-align: center;
            line-height: 40px;
            margin-top: 1000px;
            padding-top: 400px;
        }

        .available_beers{
          margin-top: 890px;
        }

        .beer_map_image{
          position: relative;
          width: 100%;
          margin-top: 400px;
        }

        .footer_margin{
          margin-bottom: 130%;
        }

        .main_content {
          margin: 0 auto;
      }

       .beer_content{
          margin-top: 0px;
        }

      .mdl-card i {
          font-size: 40px;
          padding-top: 30px;
      }
    }

    /* Small Mobile Screens */
    @media only screen and (min-width: 280px) and (max-width: 380px) {
      .demo-card-square.mdl-card {
          width: 280px;
          height: 220px;
      }

      .beer_map{
        background-image: url('https://deanhume.github.io/beer/images/beer-map.png');
        height: 200px;
        background-size: cover;
      }

      .about_text{
        font-size: 18px;
        text-align: justify;
        line-height: 40px;
        padding-bottom: 30px;
        width: 300px;
      }

      .header-background {
         background: url('https://deanhume.github.io/beer/images/beer-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-style {
         background: url('https://deanhume.github.io/beer/images/styles-mobile.jpg') center / cover;
             height: 400px;
       }

       .header-background-beer {
         background: url('https://deanhume.github.io/beer/images/beer-page-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-about {
         background: url('https://deanhume.github.io/beer/images/about-mobile.jpg') center / cover;
         height: 400px;
       }

      .header-background-settings {
        background: url('https://deanhume.github.io/beer/images/beer-settings-mobile.jpg') center / cover;
        height: 400px;
      }       

        .hide_mobile{
          display: none!important;
        }

        .about-footer{
          margin-top: 20px;
        }

        .tagline-padding{
          padding-left: 100px;
        }

        .image_text {
            position: absolute;
            top: 10px;
            width: 100%;
            font-family: 'Gabriela', serif;
            font-size: 26px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }

        .learn_title {
          width: 90%;
          font-size: 40px;
          padding-bottom: 50px;
          font-family: 'Gabriela', serif;
          display: inline-block;
          text-align: center;
        }

        .learn_intro {
            font-size: 20px;
            width: 90%;
            text-align: justify;
            line-height: 40px;
        }

        .style_name {
            margin-top: 55%;
            font-size: 50px;
            letter-spacing: -7px;
            font-family: 'Gabriela', serif;
            width: 90%;
            text-align: center;
            line-height: 40px;
            padding-left: 50px;
        }

        .styleTagline {
            font-size: 15px;
            font-style: italic;
            width: 180px;
            text-align: center;
            margin-top: 18px;
        }

        .mdl-layout__header-row .mdl-navigation__link{
          display: none;
        }

        .text_margin{
          margin-top: 25%;
        }

        .hero_title{
          padding-left: 0px;
        }

        .learn_intro_style {
            font-size: 20px;
            padding-bottom: 180px;
            width: 80%;
            text-align: center;
            line-height: 40px;
            margin-top: 1000px;
            padding-top: 400px;
        }

        .available_beers{
          margin-top: 890px;
        }

        .style_hero_text{
          text-align: center;
          line-height: 54px;
          width: 80%;
        }

        .beer_map_image{
          position: relative;
          width: 100%;
          margin-top: 400px;
        }

        .footer_margin{
          margin-bottom: 130%;
        }

        .main_content {
          margin: 0 auto;
      }

       .beer_content{
          margin-top: 0px;
        }

      .mdl-card i {
          font-size: 40px;
          padding-top: 30px;
      }
    }

    /* Mobile */
    @media only screen and (min-width: 381px) and (max-width: 579px) {
      .grid_padding{
        padding-left: 10%;
      }

      .beer_map{
        background-image: url('https://deanhume.github.io/beer/images/beer-map.png');
        height: 200px;
        background-size: cover;
      }

      .about_text{
        font-size: 18px;
        text-align: justify;
        line-height: 40px;
        padding-bottom: 30px;
        width: 300px;
      }

      .header-background {
         background: url('https://deanhume.github.io/beer/images/beer-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-style {
         background: url('https://deanhume.github.io/beer/images/styles-mobile.jpg') center / cover;
             height: 400px;
       }

       .header-background-beer {
         background: url('https://deanhume.github.io/beer/images/beer-page-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-about {
         background: url('https://deanhume.github.io/beer/images/about-mobile.jpg') center / cover;
         height: 400px;
       }

       .header-background-settings {
        background: url('https://deanhume.github.io/beer/images/beer-settings-mobile.jpg') center / cover;
        height: 400px;
      }

        .hide_mobile{
          display: none!important;
        }

        .about-footer{
          margin-top: 20px;
        }

        .tagline-padding{
          padding-left: 100px;
        }

        .image_text {
            position: absolute;
            top: 10px;
            width: 100%;
            font-family: 'Gabriela', serif;
            font-size: 26px;
            line-height: 40px;
            text-align: center;
            color: #fff;
        }

        .learn_title {
          width: 90%;
          font-size: 40px;
          padding-bottom: 50px;
          font-family: 'Gabriela', serif;
          display: inline-block;
          text-align: center;
        }

        .learn_intro {
            font-size: 20px;
            width: 90%;
            text-align: justify;
            line-height: 40px;
        }

        .style_name {
            margin-top: 55%;
            font-size: 50px;
            letter-spacing: -7px;
            font-family: 'Gabriela', serif;
            text-align: center;
            line-height: 40px;
        }

        .styleTagline {
            font-size: 15px;
            font-style: italic;
            width: 180px;
            text-align: center;
            margin-top: 18px;
        }

        .mdl-layout__header-row .mdl-navigation__link{
          display: none;
        }

        .text_margin{
          margin-top: 25%;
        }

        .hero_title{
          padding-left: 0px;
        }

        .learn_intro_style {
            font-size: 20px;
            padding-bottom: 180px;
            width: 80%;
            text-align: center;
            line-height: 40px;
            margin-top: 1000px;
            padding-top: 400px;
        }

        .available_beers{
          margin-top: 890px;
        }

        .style_hero_text{
          text-align: center;
          line-height: 54px;
          width: 80%;
        }

        .beer_map_image{
          position: relative;
          width: 100%;
          margin-top: 400px;
        }

        .footer_margin{
          margin-bottom: 130%;
        }

        .main_content {
          margin: 0 auto;
      }

       .beer_content{
          margin-top: 0px;
        }

      .mdl-card i {
          font-size: 40px;
          padding-top: 30px;
      }
}
