@media (max-width:767px) {

  .site-header.mobile-menu-active {
    border:0;
    height:100%;
    position:fixed;
    z-index:10;
  }
  
  .site-header .header-container {
    grid-template-columns:1fr 70px;
    grid-template-rows:100px;
  }
    
  .site-header.mobile-menu-active .header-container {
    align-items:start;
    background:#fff;
    grid-template-rows:100px auto auto;
    height:100vh;
    overflow-y:auto;
    padding:0;
    position:relative;
  }
  
  .site-header .menu-controls {
    align-items:center;
    background:none;
    border:0;
    cursor:pointer;
    display:flex;
    grid-column:2 / 3;
    grid-row:1 / 2;
    height:100%;
    justify-content:center;
    padding:0;
    right:0;
    width:70px;
    z-index:11;
  }
    
  .menu-controls-icon,
  .menu-controls-icon::before,
  .menu-controls-icon::after {
    background:var(--sfid-blue);
    border-radius:0;
    display:block;
    height:4px;
    width:30px;
  }

  .menu-controls-icon::before,
  .menu-controls-icon::after {content:'';}
  .menu-controls-icon::before {transform:translateY(-12px);}
  .menu-controls-icon::after {transform:translateY(8px);}
  
  .mobile-menu-active .menu-controls-icon,
  .mobile-menu-active .menu-controls-icon::before,
  .mobile-menu-active .menu-controls-icon::after {transition:.35s;} 
  
  .mobile-menu-active .menu-controls-icon {transform:translateY(0) translateX(0) rotate(-45deg);}
  .mobile-menu-active .menu-controls-icon::before {transform:translateY(0) translateX(0) rotate(90deg);}
  .mobile-menu-active .menu-controls-icon::after {transform:translateY(-4px) translateX(0) rotate(0deg);}
  
  .site-header nav.navigation {display:none;}

  .site-header.mobile-menu-active nav.main-menu {
    display:block;
    grid-column:1 / 3;
    grid-row:2 / 3;
    width:100%;
  }
  
  nav.main-menu > ul.menu {
    border-bottom:1px solid #fff;
    padding:0;
    width:100%;
  }
  
  nav.main-menu > ul.menu > li.menu-item {
    background:var(--sfid-blue);
    border-top:1px solid #fff;
  }
  
  .site-header .block.sponsors {display:none;}
  
  .site-header.mobile-menu-active .block.sponsors {
    display:flex;
    grid-column:1 / 3;
    grid-row:3 / 4;
    justify-content:center;
    padding:20px;
  }

}


@media (min-width:480px) and (max-width:767px) {
  
  .site-header .header-container {grid-template-rows:150px;}
  .site-header.mobile-menu-active .header-container {grid-template-rows:150px auto auto 1fr;}
  
}