/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 680px) {
    body { font-size: 20px !important; }
    #header #logo { margin-left: 5px; }
    #nav { display: none; }
    #content { padding: 10px 0; }
    .section { width: initial !important; }
    #overlay { width: initial !important; margin: 0 10px; padding: 10px; }
    #overlay_content { width: initial !important; margin: 0;  }
    #overlay_content h1  { font-size: 32px; margin: 0; }
    #overlay_content h2  { font-size: 28px; margin: 5px 0 8px 0; }
    #overlay_content p { padding: 0; margin: 0; }
    ul { margin: 0; }
    .graphic { float: none; display: block; }
    .intro_text { font-size: 20px; line-height: 28px !important; margin: 0 10px; padding: 0; }
    .disclaimer { font-size: 18px; }
    .button { font-size: 20px; padding: 2px 5px; }
    .start_button, .cancel_button, .answer_button, .next_button { bottom: 10px; right: 10px; }
    #overlay_content p.question { margin: 10px 0; font-size: 20px; line-height: 32px }
    #answers p, #feedback_answers p { font-size: 20px; line-height: 24px; margin-bottom: 10px; }
    #feedback_answers p { padding-left: 25px; }
    .right { background: transparent url('/i/correct.png') no-repeat 0px 5px; }
    #footer_left { width: 100%; float: none !important; padding: 0 10px; }
    #footer_right { width: 100%; float: none !important; padding: 0 10px; text-align: center; }
    #footer_right img { width: 25%; height: 25%; }
    #footer_bottom { padding: 10px; }
    #badge_image { display: block; margin: 0 auto; }
    .badge_form { margin: 0; }
    .email_input { width: 240px; margin-bottom: 10px; }
    .badge_button, .close_button, .retry_button { font-size: 20px; padding: 2px 5px; position: relative; display: block; margin: 0 auto; }
    .try_button { position: absolute; bottom: 60px; right: 0; left: 0; top: auto; margin: 0 auto; }
    #email_disclaimer { position: relative; display: block; padding: 10px; bottom: auto; right: auto; font-size: 16px; text-align: center;  }
    #mobile_menu { display:inline-block; position: absolute; right: 30px; top: 22px;  }
    #mobile_menu img:hover { cursor: pointer; }
    #nav { position: absolute; top: 65px; right: 0px; z-index:1000; }
    #nav a { font: 18px  "Pathway Gothic One", Arial, Helvetica, sans-serif !important; text-transform: uppercase;   }
    #nav ul { list-style: none; margin: 0; padding: 0; background-color: #fff; }
    #nav ul li { float: none; padding: 0; margin: 0; height: 30px; }
    #nav ul li a { float: none; padding: 5px 10px; margin: 0; height: 30px; }
    #nav ul li a:hover { background-color: #2C3E50; color: #fff; border: 0; }
}

@media only screen
and (min-device-width : 481px)
and (max-device-width : 680px) {
    #footer_right img { width: 15%; height: 15%; }
    .email_input { width: 300px; margin-bottom: 10px; }
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}