﻿
@media only screen and (max-width : 678px) {

  #tcContentHeader,
  #tcContent,
  #tcContentFooter {
    width: initial;
    background: none !important;
    background-color: #ebebec !important;
  }

  #appFooter {
    background: none !important;
    background-color: #f5f5f5 !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 0 15px 0 !important;
  }

  .asaBoxHeader,
  .asaBoxContent,
  .asaBoxContentLong,
  .asaBoxFooter {
    background: none !important;
    background-color: #ebebec !important;
    padding: 0 0 15px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #appContainer {
    background-color: #ebebec !important;
    width: 100% !important;
    padding: 0;
  }

  #appContent {
    padding: 10px 20px 0 20px;
  }

  img {
    vertical-align: middle !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  body {
    background-color: #f5f5f5 !important;
  }

  #appHeader img {
    margin: auto !important;
    padding-bottom: 10px !important;
  }

  #appFooter img {
    padding-left: 50px;
  }

  #clientContent {
    text-align: left !important;
  }

  p {
    margin: 0 0 10px !important;
    orphans: 3 !important;
    widows: 3 !important;
    max-width: 100% !important;
  }

  label {
    display: inline-block !important;
    max-width: 100% !important;
    margin-bottom: 5px !important;
    text-align: left !important;
  }

  #groupContainer label {
    display: initial !important;
    margin-bottom: 10px !important;
  }

  input {
    display: block !important;
  }

  submit {
    display: block !important;
  }

  input[type=checkbox] {
    display: inline-block !important;
  }

  select {
    display: block !important;
  }

  #tcContentHeader {
    max-width: 100% !important;
    padding: 0 !important;
    float: left;
    clear: both;
  }

    #tcContentHeader h3 {
      padding-bottom: 10px !important;
    }

    #tcContentHeader p {
      max-width: 100% !important;
    }

  .unsubIntro {
    padding-bottom: 20px !important;
  }

    .unsubIntro a {
      display: block !important;
      padding-top: 10px;
    }

  #tcContentFooter {
    max-width: 100% !important;
    padding: 0 0 15px 0 !important;
  }

    #tcContentFooter a, #tcContentFooter a.unsubLink {
      display: block !important;
      margin: 0 0 15px 0 !important;
      float: none !important;
    }

    #tcContentFooter span {
      max-width: 100% !important;
      display: block !important;
    }

    #tcContentFooter span {
      padding-top: 10px;
      float: left !important;
    }

    #tcContentFooter > span {
      position: relative;
      top: -50px;
    }

    #tcContentFooter > a {
      position: relative;
      top: 50px;
    }

  .asaBoxIcon {
    display: none !important;
  }

  .asaBoxContent p {
    max-width: 100% !important;
  }

  .asaBoxContent label {
    max-width: 100% !important;
  }

  .asaBoxContent p {
    max-width: 100% !important;
  }

  .asaBoxHeader {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

    .asaBoxHeader h4 {
      margin: 0;
    }

    .asaBoxHeader p {
      max-width: 100% !important;
      padding: 10px 0 0 0 !important;
    }

  .asaInnerBox {
    max-width: 100% !important;
    width: 100%;
  }

    .asaInnerBox h5 {
      max-width: 100% !important;
    }

  .reqFieldInst {
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    clear: both;
  }

  .checkboxInstructions {
    float: none;
    width: 100% !important;
  }

  .asaBoxHeaderBlock {
    margin: 0 !important;
  }

  .asaBoxFooter {
    display: none;
  }

  #appFooter .innerBox {
    margin: 0 !important;
  }

  .noLabel {
    margin: 0 !important;
    padding: 1.0em 0 0 0;
  }

  #groupContainer input, #groupContainer input[type="checkbox"] {
    width: initial !important;
  }

  .g-recaptcha > div {
    margin: 0 0 1.0em 0;
  }


  .headerFlashError {
    padding: 0 0 1.0em 0;
    font-weight: bold;
  }

}
