@charset "utf-8";
/* CSS Document */

$dark-teal: #22a9c2;
$light-teal: #64c3d4;
$white: #fff;


  
  .responsive-menu {
    cursor: pointer;
    display: inline-block;
    margin: auto 0 auto auto;
  } // .responsive-menu
  
  .menu {
    display: none;
    width: 100%;
    
      li {
        display: block;  
        font-size: 0.8rem;
        font-weight: bold; 
        letter-spacing: 0.04em;
        position: relative;
        
        a {
          color: $white;
          display: flex;
          padding: 0.5rem 0;
          text-transform: uppercase;
          
          .plus-icon {
            margin-left: auto;
            padding: 0 0.2rem;
          } //.plus-icon
        } // top li a
        
        .submenu {
          background: $light-teal;
          display: none;
          margin: 0;
          min-width: 160px;
          padding: 0;
          position: relative;
          z-index: 1;
          
          li {
            display: block;
            
            &:hover {
              background: $dark-teal;
            } // hover
            
            a {
              padding: 0.6rem 0.5rem;
              text-transform: none;
            } // submenu li a
          } // submenu li
          
          .search {
            padding: 0.3rem 0.5rem 0.6rem;
            
            &:hover {
              background: none;
            } // hover
            
            [type=text] {
              height: 1.7rem;
              margin: 0.5rem 0 0;
            }
          } // .search
        } // .submenu
        
      } // top li's
  } // .menu top ul
} // header



/* Medium and up */
@media screen and (min-width: 40em) {
  header {
    
    .menu {
      display: flex;
      
      li {
        
        a {
          padding: 2.4rem 1.2rem 0.5rem;
          
          &:after {
            content: '/';
            padding: 0 0 0 2.5rem;
          }
        } // menu links
        
        .submenu {
          box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
          position: absolute;
          width: auto;
          
          li {
            
            a {
              
              &:after {
                content: '';
                padding: 0;
              } // after a
            } // a
          } // li
        } // .submenu
        
        &:hover ul {
          display: block;
        } // show submenu ul
        
        &:nth-child(3) {
          
          a {
            
            &:after {
              content: '';
              padding: 0;
            } // after a
          }// a
        } // 3rd nav item - search main nav
        
        &:last-child {
          margin-left: auto;
          
          a {
            
            &:after {
              content: '';
              padding: 0;
            } // after a
          }// a
        }// last li in ul 
      } // top li's
    } // .menu 
  } // header
} // medium and up



/* Large and up */
@media screen and (min-width: 64em) {} // large and up



/* Foundation Overrides */
.grid-container {
  max-width: 60em;
}