/* 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; }

/* DOWNLOADS */
#downloads { display: flex; justify-content: space-around; }
#downloads a { text-decoration: none; }
.center-text { text-align: center; margin-top: 40px; }
#downloads a.badge_button { text-align: center; }