/* Rediculous biggg, not fully supported */
@media only screen and (width > 2560px) {
  .full-width, .row, footer {
    width: 2048px;
    margin: 0 auto;
    /* background-color: orange; */
  }

  .row {
    max-width: 1440px;
  }

  body {
    font-size: 150%;
  }

  .loginform,
  .normal-form {
    width: 80%;
    font-size: 150%;
  }

  .loginform .text-field,
  .loginform .text-area,
  .normal-form .text-field,
  .normal-form .text-area {
    font-size: 70%;
  }

  .ftr-1 .col,
  .ftr-2 {
    line-height: 150%;
  }
}

@media only screen and (width >= 769px) and (width <= 1024px) {
  body {
      font-size: 16px;
      font-weight: 300;
      /* background-color: red; */
    }
  
    section {
      padding: 0 20px
    }
  
    header {
      height: 853px;
      background-image: linear-gradient(rgba(51, 111, 145, .5), rgba(51, 111, 145, .5)), url(../img/hero_1280px.jpg);
      background-size: auto;
      background-position-y: 0;
    }
  
    .welcome-box {
      transform: translateY(300%);
    }
  
    .welcome-1 {
      margin-bottom: 8px;
      font-size: 200%;
      text-shadow: 2px 2px hsl(201, 48%, 38%);
    }
  
    .welcome-2 {
      width: 75%;
      margin: 0 auto;
      font-size: 100%;
      font-weight: 300;
    }
  
    .logo {
      width: 60%;
      margin-left: 10px;
    }
  
    .mobile-nav-icon {
      display: block;
      width: 32px;
      height: 32px;
      padding: 5px 4px;
    }
  
    .main-nav {
      display: none;
      margin: 10px 0;
      border: 1px solid #fff;
      font-size: 115%;
    }
  
    .main-nav li {
      display: block;
      margin-left: 0;
      padding: 12px 10px;
      text-align: right;
      border-bottom: 1px solid #fff;
    }

    .phone-nav {
      padding-right: 10px;
    }
  
    .main-nav li:last-child {
      border: none;
    }

    .ftr-1 {
      padding: 0 10px 20px;
    }

    .ftr-2 {
      padding-top: 20px;  
    }
}

@media only screen and (width >= 481px) and (width < 769px) {
  body {
      font-size: 16px;
      font-weight: 300;
      /* background-color: lightskyblue; */
  }
  
  section {
      padding: 0 20px
  }
  
  header {
    height: 533px;
    background-image: linear-gradient(rgba(51, 111, 145, .5), rgba(51, 111, 145, .5)), url(../img/hero_800px.jpg);
    background-size: auto;
    background-position-y: 0;
  }

  .welcome-box {
    transform: translateY(200%);
  }

  .welcome-1 {
    margin-bottom: 8px;
    font-size: 120%;
    text-shadow: 2px 2px hsl(201, 48%, 38%);
  }

  .welcome-2 {
    width: 75%;
    margin: 0 auto;
    font-size: 75%;
    font-weight: 300;
  }

  .logo {
    width: 60%;
    margin-left: 10px;
  }

  .mobile-nav-icon {
    display: block;
    width: 32px;
    height: 32px;
    padding: 5px 4px;
  }

  .main-nav {
    display: none;
    margin: 10px 0;
    border: 1px solid #fff;
    font-size: 115%;
  }

  .main-nav li {
    display: block;
    margin-left: 0;
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #fff;
  }

  .main-nav li:last-child {
    border: none;
  }

  footer {
    font-size: 90%;
    font-weight: 300;
  }

  .ftr-1 {
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .ftr-1 b {
    margin-top: 5px;
    margin-bottom: 10px;  
    color: #000;
    font-size: 120%;
  }

  .ftr-1 .row {
    margin: 0;
    padding: 0;
  }

.ftr-1 .col {
  margin: 0 0 0 80px;
  padding-bottom: 10px;
  border-bottom: 1px solid #555;
}

.ftr-2 {
    font-size: 90%;
    line-height: 160%;
  }
}





@media only screen and (width >= 300px) and (width < 481px) {
  body {
    font-size: 16px;
    font-weight: 400;
    /* background-color: blue; */
  }

  section {
    margin-top: 30px;
    padding: 0 20px
  }

  header {
    height: 320px;
     background-image: linear-gradient(rgba(51, 111, 145, .5), rgba(51, 111, 145, .5)), url(../img/hero_480px.jpg);
    background-size: auto;
    background-position-y: 0;
  }

  .welcome-box {
    transform: translateY(125%);
  }

  .welcome-1 {
    margin-bottom: 8px;
    font-size: 80%;
    font-weight: 500;
    text-shadow: 1px 1px hsl(201, 48%, 38%);}

  .welcome-2 {
    width: 65%;
    margin: 0 auto;
    font-size: 60%;
    font-weight: 400;
  }

  h2 {
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 100%;
  }

  .logo {
    width: 80%;
    margin-left: 10px;
  }

  .mobile-nav-icon {
    display: block;
    width: 32px;
    height: 32px;
    padding: 5px 4px;
  }
  
  .main-nav {
    display: none;
    margin: 10px 0;
    border: 1px solid #fff;
    font-size: 115%;
  }

  .main-nav li {
    display: block;
    margin-left: 0;
    padding: 12px 10px;
    text-align: right;
    border-bottom: 1px solid #fff;
  }
  .main-nav li:last-child {
    border: none;
  }

  .phone-nav {
    margin-right: 10px;
    padding: 4px 0 0 22px;
    background-size: 15%;
    border: 1px olid red;
  }

  .phone-nav {
    margin-left: 26px; /* Space for background-image */
    margin-bottom: 6px;
  }

  .phone-nav a:link {
    font-size: 85%;
    font-weight: 300;
  }

    .normal-form .std-button {
      font-size: 90%;
    }
  
  footer {
    font-size: 90%;
    font-weight: 300;
  }

  .ftr-1 {
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .ftr-1 b {
    margin-top: 5px;
    margin-bottom: 10px;
    color: #000;
    font-size: 120%;
  }

  .ftr-1 .row {
    margin: 0;
    padding: 0;
  }

  .ftr-1 .col {
    margin: 0 0 0 80px; 
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
  }

  .ftr-2 {
    font-size: 90%;
    line-height: 160%;
  }

  .form-area {
    width: 80%;
    margin: 30px auto;
    text-align: center;
  }

  .normal-form {
    width: 250px;
  }

  .form-result-message {
    width: 100%;
    margin: 30px auto 50px;
  }
}