/*Header stylesheet code4ct by Miguel Jacobs*/
/* Mobile First View */
.header {
  display: grid;
  height: 80px;
  width: 100%;
  grid-template-columns: repeat(8, 1fr);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99; }
  .header .logo {
    grid-column: 1/4;
    height: 30px;
    width: 100px;
    margin: auto; }
    .header .logo #logo {
      width: 100%;
      height: 100%; }
  .header .logo:hover {
    cursor: pointer; }
  .header .icon {
    grid-column: 7/9;
    margin: auto; }
    .header .icon .hamburger_icon {
      width: 30px;
      height: 25px; }
      .header .icon .hamburger_icon:hover #nav_wrapper {
        display: block; }
  .header .icon:hover {
    cursor: pointer; }

#desktop_nav {
  display: none; }

.search_container {
  display: none; }

#nav_wrapper {
  display: block;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: auto;
  position: fixed;
  top: 79px;
  z-index: 98;
  width: 100%;
  margin-top: -2000px; }
  #nav_wrapper nav {
    grid-column: 1/10;
    height: 390px;
    font-size: .7em;
    font-weight: bold;
    background-color: white;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
    animation: navTransition .4s linear 1;
    border-top: 3px solid #1dc1c1; }
@keyframes navTransition {
  0% {
    transform: translateY(-700px); }
  100% {
    transform: translateY(0); } }
    #nav_wrapper nav ul {
      padding: 10px; }
      #nav_wrapper nav ul a {
        display: block;
        height: 28px;
        line-height: 35px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        text-decoration: none;
        color: #777; }
        #nav_wrapper nav ul a:hover {
          color: #e38f84; }
        #nav_wrapper nav ul a li {
          width: 100%; }
      #nav_wrapper nav ul .title_li {
        padding-left: 20px; }
      #nav_wrapper nav ul .secondary_li {
        padding-left: 20px;
        background-color: whitesmoke; }
      #nav_wrapper nav ul .tertiary_li {
        padding-left: 40px; }
      #nav_wrapper nav ul .donate_button {
        display: none;
        height: 33px;
        line-height: 40px;
        font-size: 1.1em;
        border: none;
        text-align: center;
        background-color: #ee534f;
        color: white;
        border-radius: 3px; }
      #nav_wrapper nav ul .donate_button:hover {
        cursor: pointer; }

@media only screen and (min-width: 1024px) {
  .header .logo {
    grid-column: 1/3; }
  .header .icon {
    display: none; }

  #desktop_nav {
    display: block;
    grid-column: 3/6;
    grid-row: 1/2;
    margin: auto; }
    #desktop_nav ul .desktop_li {
      display: inline-block;
      padding: 10px; }
      #desktop_nav ul .desktop_li span {
        color: #e38f84; }
        #desktop_nav ul .desktop_li span:hover {
          color: gray; }
      #desktop_nav ul .desktop_li a {
        text-decoration: none;
        color: gray; }
        #desktop_nav ul .desktop_li a:hover {
          color: #e38f84; }

  .search_container {
    display: block;
    grid-column: 6/9;
    grid-row: 1/2;
    margin: auto; }
    .search_container .searchBox {
      height: 34px;
      width: 200px;
      border-radius: 5px 0 0 5px;
      border: 1px solid rgba(0, 0, 0, 0.5);
      outline: 0; }
    .search_container ::placeholder {
      padding-left: 12px;
      color: gray; }
    .search_container .search {
      height: 36px;
      width: 40px;
      border-radius: 0 5px 5px 0;
      background: none;
      border: 1px solid gray;
      margin-left: -5.5px;
      outline: 0; }
      .search_container .search img {
        width: 35%;
        height: 35%; }
      .search_container .search:hover {
        cursor: pointer; } }
/* END OF HEADER STYLING */

/*# sourceMappingURL=header.css.map */