$maxwidth: 1200px;
html,body {
  margin:0px;
  padding:0px;
  font-size:10px;
  font-family:arial;
  // font-size:1.6rem;
  font-size:10px;
  * {
    font-size:1.6rem;
  }
}
.container {
  max-width: $maxwidth;
  margin:0px auto;
}
header {
  background-color:black;
  min-height:5rem;
  width:100%;
  .accessibility-bar {
    background-color:#666;
    color:#000;
    padding:0.4rem;
    .container {
      display:flex;
      justify-content:flex-end;
      .skip {
        display:inline-block;
        padding:0.2rem 0.5rem;
        color:black;
        background-color:white;
        border:1px solid grey;
        font-family:arial;
        font-size:1.2rem;
        text-decoration:none;
        &:hover {
          background-color:black;
          color:white;
        }
      }
      button {
        border-radius:0;
        border:none;
        border: 1px solid grey;
        text-align:center;
        font-size:1.2rem;
        padding:.2rem .5rem;
        cursor:pointer;
        &:hover {
          background-color:black;
          color:white;
        }
      }
    }
  }
  .logo-row {
    .container {
      display:flex;
      justify-content: space-between;
      align-items:center;
      .mobile-nav {
        display:none;
        margin-right:1rem;
      }
      .supernav {
        display:flex;
        flex-wrap: no-wrap;
        flex-direction:row;
        font-size:2rem;
        font-family:arial;
        padding:4rem 0;
        .search {
          input {
            padding:0.5rem;
            border-radius:0.5rem;
            border:none;
            font-size:2rem;
            background-color:#bbb;
            body.contrast & {
      background-color:#fff;
    }
            border-top-right-radius: 0;
            border-bottom-right-radius:0;
            width:200px;
          }
          button {
            padding:0.5rem;
            border-radius:0.5rem;
            border:none;
            font-size:2rem;
            background-color:#888;
            border-top-left-radius:0;
            border-bottom-left-radius:0;
            cursor:pointer;
          }
        }
        a {
          color:white;
          padding:0.5rem;
          margin:0 2rem;
        }
        .donate {
          padding:0.5rem 1rem;
          background-color:white;
          color:black;
          display:inline-block;
          border-radius:0.5rem;
          margin:0;
        }
      }
    }
  }
  nav.desktop {
    background-color:#555;
    .container {
      ul { 
        margin:0;
        padding:0;
        list-style:none;
        display:flex;
        justify-content:space-between;
        li {
          margin:0;
          a {
            padding:1rem;
            display:block;
            font-size:2rem;
            font-family:arial;
            color:white;
            text-decoration:none;
            &:hover {
              background-color:#333;
            }
          }
        }
        
      }
    }
  }
  nav.mobile {
    display:none;
  }
  .alert {
    font-size:2rem;
    background-color:#442222;
    .close-warning {
      cursor:pointer;
      &:hover {
        color:#442222;
        background-color:#fff;
      }
    }
    body.contrast & {
      background-color:#220000;
    }
    color:white;
    text-align:center;
    padding:2rem;
  }
}
h1 {
  font-size: 3.0rem;
}
main#main {
  &.home {
    .hero {
      .container {
        min-height:400px;
      }
    }
  }
  .open {
    .container {
      padding:2rem;
      // margin:2rem;
      max-width:800px;
    }
    
  }
  .hero {
    background-color:#333;
    .container {
      min-height:200px;
      position:relative;
      .bg {
        position:absolute;
        height:100%;
        width:100%;
        background-size:cover;
        background-position:center center;
      }
        .overlay {
          position:relative;
          background-color:white;
          padding:2rem;
          width:40%;
          font-size:1.6rem;
          top:2rem;
          left:2rem;
          // margin-bottom:2rem;
       
      }
    }
  }
  .featured {
    background-color:#999;
    body.contrast & {
      background-color:#fff;
    }
    padding:2rem;
    .container {
      h2 {
        font-size:3rem;
        margin-left:2rem;
      }
      .featured-boxes {
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        > div {
          box-sizing:border-box;
          flex-basis:33%;
          padding:2rem;
          // border:1px solid black;
          display:flex;
          flex-direction:column;
          &:nth-child(even) {
            flex-direction:column-reverse;
          }
          p {
            font-size:1.6rem;
          }
          button {
            font-size:1.6rem;
            margin:1rem;
          }
          
        }
      }
    }
  }
  .news-events {
    min-height:200px;
    .container {
      max-width:800px;
      padding:5rem;
      display:flex;
      flex-direction:row;
      a.view-all {
        float:right;
        color:black;
        // text-decoration:none;
      }
      .news {
        padding:2rem;
        flex-basis:66%;
        border:1px solid grey;
      }
      .events {
        padding:2rem;
        flex-basis:33%;
        border:1px solid grey;
        background-color:grey;
      }
      .news ul, .events ul {
        padding:0;
        list-style:none;
        li {
          margin:1rem 0rem;          
        }
      }
    }
  }
}
h2 {
  font-size:3rem;
}
footer {
  background-color:#333;
  min-height:200px;
  .newsletter {
    padding:2rem;
    background-color:#aaa;
    .container {
      text-align:center;
    }
  }
  .fat-footer {
    padding:2rem;
    .container {
      .columns {
        display:flex;
        flex-direction:row;
        .col {
          flex-basis:25%;
          p {
            color:white;
            // text-decoration:underline;
          }
          ul {
            list-style:none;
            padding:0;
            li {
              color:#fff;
              margin:0.5rem 0;
              a {
                color:white;
                text-decoration:underline;
              }
            }
          }
        }
      }
      .social {
        margin-top:2rem;
        .icons {
          display:flex;
          justify-content:center;
        i {
          font-size:40px;
          color:white;
          margin:0px 10px;
        }
        a {
          color:white;
        }
        }
      }
    }
  }
}
@media only screen and (max-width:750px) {
  header {
    .logo-row {
      .container {
        .supernav {
          display:none;
        }
        .mobile-nav {
          display:flex;
          a {
            border:1px solid white;
            border-radius:0.5rem;
            padding:0.5rem;
            text-decoration:none;
            color:white;
            font-size:2rem;  
            &:hover {
              background-color:white;
              color:black;
            }
          }
          
          vertical-align:center;
          .fas {
            display:inline-block;
            font-size:2.5rem;
            margin-left:1rem;
            
          }
          min-height:20px;
        }
      }
    }
    nav.desktop {
      display:none;
    }
    nav.mobile.open {
      display:block;
      background-color:#333;
      
      ul {
        display:flex;
        flex-direction:column;
        align-items:center;
        list-style:none;
        color:white;
        margin:0;
        padding:0;
        li {
          color:white;
          margin:0.5rem;
          a {
            color:white;
            
          }
          .donate {
            padding:0.5rem 1rem;
            background-color:white;
            color:black;
            display:inline-block;
            border-radius:0.5rem;
            margin:0;
          }
        }
      }
      .search {
          input {
            padding:0.5rem;
            border-radius:0.5rem;
            border:none;
            font-size:2rem;
            background-color:#bbb;
            body.contrast & {
      background-color:#fff;
    }
            border-top-right-radius: 0;
            border-bottom-right-radius:0;
            width:200px;
          }
          button {
            padding:0.5rem;
            border-radius:0.5rem;
            border:none;
            font-size:2rem;
            background-color:#888;
            border-top-left-radius:0;
            border-bottom-left-radius:0;
            cursor:pointer;
          }
        }
    }
  }
  main#main {
    .hero {
      .container {
        .overlay {
          width:calc(100% - 8rem);
        }
      }
    }
    .featured {
      .container {
        .featured-boxes {
          div {
            flex-basis:100%;
            &:nth-child(2n) {
              flex-direction:column;  
            }
            
          }
        }
      }
    }
    .news-events {
      .container {
        flex-direction:column;
      }
    }
  }
  footer {
    .fat-footer {
      .container {
        .columns {
          flex-wrap: wrap;
          align-items:center;
          .col {
            flex-basis:50%;
          }
        }
      }
    }
  }
}
@media only screen and (max-width:500px) {
  footer {
    .fat-footer {
      .container {
        .columns {
        flex-direction:column;
        align-items:center;
        .col {
          flex-basis:100%;
        
         }
        }
      }
    }
  }
}