@media screen and (max-width: 1440px) {
  main {
    background-color: white;
  }
}

@media screen and (max-width: 1024px)
{
  .grid_container {
  grid-template-columns: [c1] 100px [c2] auto [c3] 200px [c4];
  }

  footer {
  grid-column: c2 / c3;
  }

  footer > p {
    margin: 0;
  }
}

@media screen and (max-width: 865px)
{

  .grid_container {
    grid-template-columns: [c1] 100px [c2] auto [c3] 0px [c4];
  }

  aside{
    display: none;
  }

  header > img:nth-of-type(1) {
    margin-left: 10px;
  }

  footer {
    background-color: white;
    border-top: 1px solid grey;
  }

  .top_links {
    max-width: 200px;
  }

  .top_links > a > svg {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  }
}


@media screen and (max-width: 665px) {
  .grid_container {
  grid-template-columns: [c1] 0px [c2] auto [c3] 0px [c4];
  grid-template-rows: [r1] 85px [r2] auto [r3] 50px [r4];
  }

  nav {
    z-index: -1;
    grid-column: c2 /c3;
    grid-row: r2 / r3;
    background-color: black;
    display: none;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-start;
    padding-top: 10px;
    overflow-y: auto;
    position: fixed;
    top: 82px;
  }

  .hidden_tiger {
  display: none;
}

.crouching_tiger {
    display: flex;
    z-index: 1;
}

  header > .top_links {
    display: none;
  }



  

  header > button {
    display: inherit;
  }

  header > button:hover .icon_menu{
    fill: red;
  }

  nav > .nav_fb {
    display: block;
  }


  nav > a:hover svg {
    filter: brightness(60%);
  }

  nav > a:hover span {
    filter: brightness(60%);
  }

  nav > a > span{
    color: white;
  }

  nav .icon_home {
    fill: #7d3c98;
  }

  nav .icon_calendar {
    fill: #cb4335;
  }

  nav .icon_design {
    fill: #2e86c1;
  }

  nav .icon_employment {
    fill: #138d75;
  }

  nav .icon_form {
    fill: #28B463;
  }

  nav .icon_locations {
    fill: #d68910;
  }

  nav .icon_services {
    fill: #ba4a00;
  }

  nav .icon_staff {
    fill: #D60D25;
  }

  nav .icon_newsletter {
    fill: #f4d03f;
  }

  nav .icon_referrals {
    fill: #5DADE2;
  }

  nav .icon_handbook {
    fill: #c39bd3;
  }
}

@media screen and (max-width: 565px) {
  .col_400 {
    display: none;
  }

  .col_600 {
    width: 100%;
  }

}

@media screen and (max-width: 400px) {


  .grid_container {
  grid-template-columns: [c1] 0px [c2] 100% [c3] 0px [c4];
  grid-template-rows: [r1] 85px [r2] auto [r3] 50px [r4];
  }

  body {
    background: none;
    background-color: white;
    }

  main, .col_600 {
    padding: 0;
    margin: 0;
  }

  .col_600 {
    min-width: 100%;
  }

    header {
    justify-content: space-between;
  }

  

  main {
  }
  
  header > img:nth-of-type(1) {
    height: 42px;
    margin: auto;
  }

  header > img:nth-of-type(2) {
    height: 21px;
    margin: auto;
  }

  header > button {
    margin: auto;
  }

  header > button > svg {
    width: 35px;
    height: 35px;
  }

  section > h1 {
  font-size: .9rem;
  }

  h3{
    font-size: .8rem;
  }
  }


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){
  
  .grid_container {
  grid-template-columns: [c1] 0px [c2] auto [c3] 0px [c4];
  grid-template-rows: [r1] 85px [r2] auto [r3] 50px [r4];
  }

  nav {
    z-index: -1;
    grid-column: c2 /c3;
    grid-row: r2 / r3;
    background-color: black;
    display: none;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-start;
    padding-top: 10px;
    overflow-y: auto;
    position: fixed;
    top: 82px;
  }

  .hidden_tiger {
  display: none;
}

.crouching_tiger {
    display: flex;
    z-index: 1;
}

  header > .top_links {
    display: none;
  }



  

  header > button {
    display: inherit;
  }

  header > button:hover .icon_menu{
    fill: red;
  }

  nav > .nav_fb {
    display: block;
  }


  nav > a:hover svg {
    filter: brightness(60%);
  }

  nav > a:hover span {
    filter: brightness(60%);
  }

  nav > a > span{
    color: white;
  }

  nav .icon_home {
    fill: #7d3c98;
  }

  nav .icon_calendar {
    fill: #cb4335;
  }

  nav .icon_design {
    fill: #2e86c1;
  }

  nav .icon_employment {
    fill: #138d75;
  }

  nav .icon_form {
    fill: #28B463;
  }

  nav .icon_locations {
    fill: #d68910;
  }

  nav .icon_services {
    fill: #ba4a00;
  }

  nav .icon_staff {
    fill: #D60D25;
  }

  nav .icon_newsletter {
    fill: #f4d03f;
  }

  nav .icon_referrals {
    fill: #5DADE2;
  }

  nav .icon_handbook {
    fill: #c39bd3;
  }


}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2){
  
  .grid_container {
  grid-template-columns: [c1] 0px [c2] auto [c3] 0px [c4];
  grid-template-rows: [r1] 85px [r2] auto [r3] 50px [r4];
  }

  nav {
    z-index: -1;
    grid-column: c2 /c3;
    grid-row: r2 / r3;
    background-color: black;
    display: none;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: flex-start;
    padding-top: 10px;
    overflow-y: auto;
    position: fixed;
    top: 82px;
  }

  .hidden_tiger {
  display: none;
}

.crouching_tiger {
    display: flex;
    z-index: 1;
}

  header > .top_links {
    display: none;
  }



  

  header > button {
    display: inherit;
  }

  header > button:hover .icon_menu{
    fill: red;
  }

  nav > .nav_fb {
    display: block;
  }


  nav > a:hover svg {
    filter: brightness(60%);
  }

  nav > a:hover span {
    filter: brightness(60%);
  }

  nav > a > span{
    color: white;
  }

  nav .icon_home {
    fill: #7d3c98;
  }

  nav .icon_calendar {
    fill: #cb4335;
  }

  nav .icon_design {
    fill: #2e86c1;
  }

  nav .icon_employment {
    fill: #138d75;
  }

  nav .icon_form {
    fill: #28B463;
  }

  nav .icon_locations {
    fill: #d68910;
  }

  nav .icon_services {
    fill: #ba4a00;
  }

  nav .icon_staff {
    fill: #D60D25;
  }

  nav .icon_newsletter {
    fill: #f4d03f;
  }

  nav .icon_referrals {
    fill: #5DADE2;
  }

  nav .icon_handbook {
    fill: #c39bd3;
  }


}