@media (max-width: 768px) {
    html { font-size: 16px; }
    #tapestry { display: none; background: none; }
    body > header.desktop { display: none; }
    body > header.mobile { display: block; }
    #container { position: static; width: 100%; padding: 0.5em 0 0 0; box-shadow: none; }
    #content { width: auto; margin: 0.5em 1em; padding: 0; z-index: 1; }
    .mobilenav { position: static; display: none; }
    #mounttaranaki { background: none; }
    #footer { display: none; }
    #social { display: none; } /* Social media stuff does funny things to the mobile display */
    
    ul { padding-left: 2rem; }
    
    h1 { font-size: 1.6rem; line-height: 1.6rem; }
    h2 { font-size: 1.4rem; line-height: 1.4rem; }
    h3 { font-size: 1.2rem; line-height: 1.2rem; }
    
    /* Header/nav */
    .navbar { display: block; clear: both; width: 100%; height: 3rem; line-height: 3rem; }
    #logo { position: static; width: 60%; height: 3rem; background-position: center; background-size: contain; display: inline-block; float: left; background-image: url(../images/logo-opaque.png); margin-left: 0.5rem; }
    #menu_button { float: right; height: 3rem; line-height: 3rem; font-size: 1.2rem; vertical-align: middle; background: white; color: black; padding: 0 2.5rem 0 0.5rem; margin-right: 0.5rem; background: url('../images/hamburger-menu-black.png') right no-repeat; }
    #menu_button > img { height: 2rem; vertical-align: middle; }
    #menu_trigger { display: none; }
    #menu_trigger:checked + .mobilenav { display: block; }
    .mobilenav li { list-style-type: none;  margin: 0; }
    .mobilenav li > a { color: white; font-size: 1.2rem; display: block; padding: 1rem; }
    .mobilenav ul { padding: 0; margin: 0; }
    .mobilenav > ul { }
    .mobilenav > ul > li { border-bottom: 2px solid white; }
    .mobilenav > ul > li:last-child { border-bottom: none; }
    .mobilenav > ul > li > a { color: white; background: #ab1212; }
    .mobilenav ul ul { display: none; }
    .mobilenav ul ul > li { border-bottom: 2px solid #ab1212; }
    .mobilenav ul ul > li:last-child { border-bottom: none; }
    .mobilenav ul ul > li > a { color: #ab1212; background: white; }
    
    .info { float: none; margin: 0; display: block; width: auto; }
    
    .friend_box { float: none; }
    .friend_box img { width: auto; margin: 1rem; }
    
    .upcoming_event { display: block; width: auto; margin: 2rem; padding: 1rem; }
    
    /* Videos */
    .video { width: auto; }
    .video > iframe { width: 100%; height: 38vh; }
    .video > header:after { display: none; }
    
    /* Homepage */
    .cover-heading { position: static; color: white; font-size: 1em; background: black; line-height: 1.4em; height: 1.4em; padding: 0 0.5rem; }
    .cover-heading.top-left { display: block; }
    .cover-heading.bottom-right { display: block; text-align: right;}
    img.cover-photo { display: none; }
    ul.values { position: static; width: auto; height: 3rem; background: black; }
    ul.values li { width: 100%; display: none; padding: 0; height: 3rem; line-height: 3rem; font-size: 2rem; }
    ul.values li.active { display: block; }
    ul.infoboxes { padding-left: 2rem; }
    ul.infoboxes li { list-style-type: disc; width: 100%; padding: 0; }

    /* Our people */
    .thumblink.bio { width: 50%; }
    .thumb.bio { padding: 1rem; }
}