/* IMPORTS */
@import 'reset.css';
@import 'nav.css';

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* BASE */
body { padding: 0; margin: 0; font: 24px  "Pathway Gothic One", sans-serif !important; color: #333; background: #ccc url('/i/home_slide.jpg') no-repeat center center; background-size: cover; }
h1 { font-size: 48px; font-family: "Pathway Gothic One", sans-serif; font-weight: 500; }
h2 { font-size: 36px; font-family: "Pathway Gothic One", sans-serif; font-weight: 500; }

/* SECTIONS */
#base { width: 100%; }
#block { width: 100%; }
.section { width: 1080px; margin: 0 auto; position: relative; }

/* HEADER AND LOGO */
#header { height: 65px; overflow: visible; top: 0px; background-color: rgba(255,255,255,0.9); position: relative; }
#header #logo { margin-top: 5px; }
#logo { float: left; background: transparent url('/i/logo.png') no-repeat top left; width: 55px; height: 55px; background-size: contain; }

/* CONTENT */
#content { padding: 40px 0; }

/* OVERLAY */
#overlay { background-color: rgba(255,255,255,.5); border-radius: 10px; width: 1080px; margin: 20px auto; padding: 20px; }
#overlay_loader { display: none; background-color: rgba(255,255,255,.75); border-radius: 10px; width: 300px; margin: 20px auto; padding: 20px; text-align: center; border: 1px solid #c1c7cb; }
#overlay_content { position: relative; min-height: 200px; background-color: rgba(255,255,255,.75); border-radius: 10px; width: 1000px; margin: 20px; padding: 20px 20px 80px 20px; border: 1px solid #c1c7cb; }
#overlay_content h1 { padding: 0; margin:0px 0px 25px 10px; }
#overlay_content p { padding: 0; margin:0; margin: 0px 40px 60px 40px; line-height: 36px; }
#overlay_content p.question { margin: 0px 30px 30px 30px; font-size: 28px; line-height: 36px; }
#question_area, #feedback_area { display: none; }
p.feedback { margin-bottom: 0 !important; }
ul { margin: 20px 0px 20px 60px; list-style-type: disc; }
.right { background: transparent url('/i/correct.png') no-repeat center left; }
.wrong { background: transparent url('/i/incorrect.png') no-repeat center left; }
/* QUIZ */
.button { font-family: "Pathway Gothic One", sans-serif; font-weight: 500; font-size: 28px; cursor: pointer; position: absolute; bottom: 20px; right: 30px; padding: 10px 20px; background-color: #2c3e50; border: 1px solid #2c3e50; color: #fff; }
.button:hover { background-color: #edbc4b; color: #2c3e50; }
.cancel_button { right: auto; left: 30px; }
#answers { margin-bottom: 20px; }
#answers p { padding: 0; margin: 0; padding-left: 24px; line-height: 42px; margin-left: 16px; }
#feedback_answers { margin-bottom: 20px; }
#feedback_answers p { padding: 0; margin: 0; padding-left: 24px; line-height: 42px; margin-left: 16px; }
#feedback { margin-bottom: 20px; }
#feedback p { line-height: 36px; padding-top: 20px; }
#feedback li { line-height: 36px; padding-top: 5px; margin-left: 20px; }
.graphic { float: right; margin-right: 10px; margin-left: 30px; }
#overlay_content p.result-title { padding: 0; margin: 0; margin-top: 20px; font-size: 30px; text-align: center; }
#overlay_content p.result-text { padding: 0; margin: 20px 0; }
#digital_badge_result { display: none; }

/* INTRO */
.intro_text { text-align:center; padding-top: 20px !important; margin-bottom: 40px !important; font-size: 28px; }

/* DIGITAL BADGE */
#digital_badge, #digital_badge_result { padding-top: 20px; min-height: 240px; }
#badge_image { float:left; width:225px; height:225px; margin:-10px 0 0 -20px; }
.disclaimer { display: block; font-size: 20px; margin-bottom: 10px; }
.badge_form { display: block; margin-left: 240px; padding-top: 10px; }
.email_input { margin-top: 10px; width: 300px; padding: 3px 5px; font-family: "Pathway Gothic One", sans-serif; font-weight: 500; font-size: 24px; border: 1px solid #2c3e50; }
#email_disclaimer { margin-bottom: 0 !important; font-size: 15px; line-height: 20px; position: absolute; bottom: 25px; right: 40px; }
.badge_button, .close_button, .retry_button { font-family: "Pathway Gothic One", sans-serif; font-weight: 500; font-size: 20px; cursor: pointer; margin-top: 10px; padding: 10px 20px; background-color: #2c3e50; border: 1px solid #2c3e50; color: #fff; }
.badge_button:hover, .close_button:hover, .retry_button:hover { background-color: #edbc4b; color: #2c3e50; }

/* FOOTER */
#footer { font-family: Roboto, Arial, Helvetica, sans-serif; color: #1c3c50; background-color: #d9dee2; border-color: #e9eaee; border-top-width: 0px; padding-top: 43px; font-size: 13px; font-weight: 400; box-sizing: border-box; overflow: auto; }
#footer_top { overflow: auto; min-height: 70px; margin-bottom: 30px; }
#footer_left { width: 50%; float: left; line-height: 20.8px; }
#footer_right { width: 50%; float: right; text-align: right; }
#footer_bottom { font-size: 12px; border-top: 1px solid #c1c7cb; padding: 20px 0; }
#footer a { color: #00a7b4; text-decoration: none; padding: 4px 5px 2px 5px; }
$footer a:hover { color: #2e6388 }
#footer .area { margin-bottom: 0; }
/* 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 */
}