@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 980px) {
    .container {
        width: 980px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}


@media (max-width: 980px) {
    header .container { width: 100% }
    header .logo a { margin: 5px auto 0 auto }
    header nav ul { margin: 10px auto }
    header .banner-text { top: 70px }
}

@media (max-width: 980px) {
    body { font-size: 1.1em }

    header .banner-text { top: 20px }
    header .banner-text > h1 { font-size: 2em }
    header .logo { float: none; width: auto }
    header .logo a { margin: 10px 0 0 0 }
    header nav { display: none }
    header nav { height: 215px } /* iOS Slide Down Fix */
    header nav ul { float: none; margin: 0 !important;  }
    header nav ul li { display: block; text-align: center; border-bottom: 1px solid #e7e7e7; margin-right: 0 }
    header nav ul li:last-child { border-bottom: none }
    header nav ul li a { padding: 10px }
    header .responsive-menu-button { display: block }

    section h2 { font-size: 1.5em }

    footer p { font-size: 0.8em }
}

@media (max-width: 600px) {
    header .banner-text { top: 10px }
    header .banner-text h1 { font-size: 1.5em }
    header .banner-text > p { font-size: 0.8em }
}

@media (max-width: 420px) {
    header .banner-text { top: 30px }
    header .banner-text > h1 { font-size: 1.2em }
    header .banner-text > p { display: none }
    ul.keypoints li p.image, ul.keypoints li p.text { display: block; margin: 5px; text-align: center; width: auto }

    .card ul { width: auto }
    ul.generals, ul.location { width: auto; margin: 10px 0 }
}