#toggle-menu {
     display: none;
}

.header-menu {
     margin-top: 28px;
}

/*
 * Notebooks
 */
@media (max-width: 920px) {
     body, html, .container_12, .container_16 {
          width: 100%;
          min-width: 320px;
          overflow-x: hidden;
     }

     #toggle-menu {
          display: block;
          float: right;
          position: relative;
          z-index: 10;
     }

     .container_12 .grid_1 {
          width: 8.33333%;
     }

     .container_12 .grid_2 {
          width: 16.66666%;
     }

     .container_12 .grid_3 {
          width: 25%;
     }

     .container_12 .grid_4 {
          width: 33.33333%;
     }

     .container_12 .grid_5 {
          width: 41.66666%;
     }

     .container_12 .grid_6 {
          width: 50%;
     }

     .container_12 .grid_7 {
          width: 58.333333%;
     }

     .container_12 .grid_8 {
          width: 66.66666%;
     }

     .container_12 .grid_9 {
          width: 75%;
     }

     .container_12 .grid_10 {
          width: 83.33333%;
     }

     .container_12 .grid_11 {
          width: 91.666666%;
     }

     .container_12 .grid_12 {
          width: 100%;
     }

     .grid_1 {
          width: 6.25%;
     }

     .grid_2 {
          width: 12.5%;
     }

     .grid_3 {
          width: 18.75%;
     }

     .grid_4 {
          width: 25%;
     }

     .grid_5 {
          width: 31.25%;
     }

     .grid_6 {
          width: 37.5%;
     }

     .grid_7 {
          width: 43.75%;
     }

     .grid_8 {
          width: 50%;
     }

     .grid_9 {
          width: 56.25%;
     }

     .grid_10 {
          width: 62.5%;
     }

     .grid_11 {
          width: 68.75%;
     }

     .grid_12 {
          width: 75%;
     }

     .grid_13 {
          width: 81.25%;
     }

     .grid_14 {
          width: 87.5%;
     }

     .grid_15 {
          width: 93.75%;
     }

     .grid_16 {
          width: 100%;
     }

     .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16 {
          box-sizing: border-box;
          padding: 0 10px;
          margin: 0;
     }

     .container_12 .suffix_1 {
          padding: 0 10px;
          margin-right: 8.33333%;
     }

     .container_12 .suffix_2 {
          padding: 0 10px;
          margin-right: 16.66666%;
     }

     .container_12 .suffix_3 {
          padding: 0 10px;
          margin-right: 25%;
     }

     .container_12 .push_1 {
          left: 0;
          margin-left: 8.33333%;
     }

     .container_12 .push_2 {
          left: 0;
          margin-left: 16.66666%;
     }

     .container_12 .push_3 {
          left: 0;
          margin-left: 25%;
     }

     .grid_8.push_2.mainContent {
          width: 100%;
          margin: 0;
     }

     .grid_8.push_2.mainContent object, .grid_8.push_2.mainContent embed, .grid_8.push_2.mainContent iframe {
          width: 100%;
     }

     img {
          width: auto;
          max-width: 100%;
          height: auto;
     }

     table {
          width: auto;
          display: block;
          overflow-x: auto;
     }

     #logo {
          text-align: left;
     }

     #topNavbar {
          position: relative;
     }

     #topNavbar .grid_2 {
          width: 50%;
          margin: 0;
     }

     #topNavbar #social li:last-of-type {
          margin-top: 0;
          margin-left: 20px;
     }

     #topNavbar .header-menu {
          margin-top: 0;
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          background: #eee;
          width: 100%;
     }

     #topNavbar .header-menu.open {
          display: block;
          z-index: 9999;
     }

     #topNavbar #nav {
          height: auto;
          float: none;
          width: 100%;
          margin: 0;
     }

          #topNavbar #nav, #topNavbar #nav ul {
               padding-top: 15px;
               padding-bottom: 15px;
          }
          #topNavbar #nav li {
               display: block;
               float: none;
               width: 100%;
          }

          #topNavbar #nav li a {
               padding: 5px 0 !important;
               text-align: center;
               display: block;
               float: none;
          }

          #topNavbar #nav li:hover > ul {
               width: 100%;
               float: none;
               position: relative;
               top: 0;
               left: 0;
               border-radius: 0;
               padding: 15px 0;
          }

               #topNavbar #nav li > ul li a {
                    width: 100%;
                    border: 0;
               }

     #legal, #footer {
          float: none;
     }

     #footer {
          margin-top: 20px;
          right: 0;
          height: auto;
     }

          #legal .grid_2, #legal .grid_7, #footer .grid_2, #footer .grid_7 {
               width: 100%;
               padding: 0 10px;
               margin: 0 0 20px;
               text-align: center;
          }

          #footer #socialContainer {
               width: 100%;
               float: none;
          }

          #footer #socialFooter {
               float: none;
               margin: 0;
          }

               #footer #socialFooter li {
                    margin: 0 5px !important;
                    padding: 0 !important;
                    float: none;
                    display: inline-block;
                    vertical-align: middle;
               }

     #footerLogo {
          float: none;
          display: inline-block;
     }

     #subNavBar {
          height: auto;
     }

          #subNavBar h1 {
               line-height: 50px;
               margin: 0;
          }

     #subNavMenu .grid_4.suffix_1 {
          margin-right: 0;
          width: 30%;
     }

     #subNavMenu .grid_7 {
          width: 70%;
     }

          #subNavMenu .grid_7 .menu, #subNavMenu .grid_7 .menu li {
               padding: 0;
               margin: 0;
          }

               #subNavMenu .grid_7 .menu li a {
                    padding: 0 10px;
                    line-height: 50px;
               }

     #slideShow.container_12 {
          width: 100% !important;
     }

          #slideShow #video {
               width: 100%;
               left: 0 !important;
               top: 0 !important;
               margin: 0 !important;
               position: relative !important;
          }

               #slideShow #video object {
                    width: 100% !important;
               }

     .spotlight.project.grid_4 {
          width: 50%;
          margin: 0 0 20px;
     }

     .spotlight.project.grid_4:nth-of-type(2n+3) {
          clear: both;
     }
}

/*
 * Phones
 */
@media (max-width: 768px) {
     #topNavbar #facebook, #topNavbar #twitter, #topNavbar #google {
          width: 20px;
          padding: 0 5px;
          margin: 0 !important;
          background-size: auto 100%;
          background-position: center center;
          height: 15px;
     }

     #topNavbar #social li:last-of-type {
          margin-left: 0;
     }

     #callouts.container_12 .grid_4 {
          width: 100%;
          margin: 0 !important;
     }

     #callouts.container_12 .grid_4 .slideshow_container {
          margin: 0 auto 20px;
     }

     #showlist .grid_6 {
          width: 100%;
          margin: 0 0 20px;
     } 
     
     #subNavMenu {
          padding-bottom: 20px;
     }

     #subNavMenu .grid_4.suffix_1, #subNavMenu .grid_7 {
          width: 100%;
          text-align: center;
     }

          #subNavMenu .grid_7 .menu li a {
               line-height: 20px;
          }

     .spotlight.project.grid_4 {
          width: 100%;
          max-width: 400px;
          margin: 0 auto 20px;
          float: none;
          display: block;
     }
}


/*
 * Button Close Menu
 */
.c-hamburger {
     display: block;
     position: relative;
     overflow: hidden;
     margin: 0;
     padding: 0;
     width: 48px;
     height: 48px;
     font-size: 0;
     text-indent: -9999px;
     appearance: none;
     box-shadow: none;
     border-radius: none;
     border: none;
     cursor: pointer;
     transition: background 0.3s;
}

.c-hamburger:focus {
     outline: none;
}

     .c-hamburger span {
          display: block;
          position: absolute;
          top: 22px;
          left: 9px;
          right: 9px;
          height: 4px;
          background: white;
     }

     .c-hamburger span::before,
     .c-hamburger span::after {
          position: absolute;
          display: block;
          left: 0;
          width: 100%;
          height: 4px;
          background-color: #fff;
          content: "";
     }

     .c-hamburger span::before {
          top: -10px;
     }

     .c-hamburger span::after {
          bottom: -10px;
     }

     .c-hamburger--htx {
          background-color: #f3a813;
     }

     .c-hamburger--htx span {
          transition: background 0s 0.3s;
     }

     .c-hamburger--htx span::before,
     .c-hamburger--htx span::after {
          transition-duration: 0.3s, 0.3s;
          transition-delay: 0.3s, 0s;
     }

     .c-hamburger--htx span::before {
          transition-property: top, transform;
     }

     .c-hamburger--htx span::after {
          transition-property: bottom, transform;
     }

     /* active state, i.e. menu open */
     .c-hamburger--htx.is-active {
          background-color: #fdb813;
     }

     .c-hamburger--htx.is-active span {
          background: none;
     }

     .c-hamburger--htx.is-active span::before {
          top: 0;
          transform: rotate(45deg);
     }

     .c-hamburger--htx.is-active span::after {
          bottom: 0;
          transform: rotate(-45deg);
     }

     .c-hamburger--htx.is-active span::before,
     .c-hamburger--htx.is-active span::after {
          transition-delay: 0s, 0.3s;
     }