html, body { color: #333; font-family: rival-sans, sans-serif; font-size: 25px; -webkit-font-smoothing: antialiased; }
body.longuage { font-size: 23px; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
.row > div { padding: 38px 4.5%; }
.vertical-center > div { float: none; display: inline-block; margin-left: -.5%; vertical-align: middle; }
.vertical-center > div:first-of-type { margin: 0; }
/* Links */
a { transition: background-color .2s, color .2s; }
a:hover,
a:focus { text-decoration: none; }
.button { background-color: #c47; border-radius: 14px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 4px 16px; transition: background-color .2s; }
.button:hover { background-color: #b16; color: #fff; }
.button:focus { color: #fff; }
#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 3px 12px; position: absolute; top: -9999px; }
#skiptocontent:focus { left: 8px; top: 8px; }
.ada-element { left: -9999px; position: absolute; }
.vc:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.vc > * { display: inline-block; vertical-align: middle; }
.list-var { min-height: 110px; padding-left: 120px; position: relative; }
.list-var > img { left: 0; position: absolute; width: 100px; }
.circ { background: #c47; border-radius: 50%; height: 100px; line-height: 100px; text-align: center; width: 100px; }
.circ img { width: 60px; }
/* Headers */
h1 { font-size: 3.3em; margin: 30px 0 22px; }
h2 { font-size: 2.2em; margin: 12px 0 0; }
h3 { font-size: 1.8em; margin: 28px 0 0; }
h4 { font-size: 1.6em; margin: 28px 0 0; }
h5 { font-size: 1.4em; margin: 26px 0 0; }
h6 { font-size: 1.3em; margin: 26px 0 0; }
/* Paragraphs & Lists */
p { line-height: 1.6em; margin: 16px 0 6px; }
ul, ol { margin: 16px 0 10px; }
li { line-height: 1.4em; margin-bottom: 8px; }
img { max-width: 100%; }
/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #c47; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; margin-top: 14px; padding: 4px 16px; transition: background-color .2s; }
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background-color: #b16; }
/* Tables */
table { border: 1px solid #333; margin: 14px 0; width: 100%; }
table tr th { border: 1px solid #333; padding: 2px 4px; }
table tr td { border: 1px solid #333; padding: 2px 4px; }
/* Quick Header */
.header { background-color: #18365e; color: #fff; height: 66px; padding: 14px 10px 0; position: relative; z-index: 1; }
.header h1 { left: -9999px; position: absolute; }
.header ul { margin: 0; padding: 0; }
.header li { display: inline-block; margin-left: 18px; margin-bottom: 0; margin-right: 24px; }
.header li:last-of-type a { background: #0f0f32; height: 66px; line-height: 60px; margin-right: 0; padding: 0 30px; position: absolute; right: 0; top: 0; }
.header li:last-of-type a:hover { background: #05051c; color: #fff; }
.header li a { color: #fff; display: block; position: relative; text-transform: uppercase; }
.header li:last-of-type a { text-transform: none; }
.header li:last-of-type a img { margin-right: 8px; }
.header li a img { height: 38px; }
.header li a:hover { color: #f68922; }
.header li a:after { background: #f68922; content: ""; height: 0; left: 0; position: absolute; top: 100%; transition: height .2s; width: 100%; }
.header li a.active:after { height: 6px; }
#mobile-menu { background-color: transparent; border: 0; cursor: pointer; display: none; padding: 0 4px; }
.longuage .header li a { font-size: .85em; }
/*********************************************/
/****** Custom CSS ************************/
/*********************************************/
.screen { height: 100%; left: -150%; opacity: 0; position: absolute; width: 100%; }
.screen.active { left: 0; opacity: 1; transition: left 0s, opacity .3s; }
h3 { color: #bc2b91; font-weight: 700; text-transform: uppercase; }
h3 img { display: block; height: 36px; margin-bottom: 6px; }
#welcome h3 { text-transform: none; }
.mag-btn { background: #fff; border: 3px solid #bc2b91; border-radius: 15px; box-shadow: 0 4px 8px -4px #888; color: #000; display: inline-block; margin-top: 18px; padding: 4px 18px 6px; transition: .2s, box-shadow .3s; }
.mag-btn:hover { background: #bc2b91; box-shadow: 0 4px 8px 0 #333; color: #fff; }
.orange-btn { background: #f68922; border: 0; border-radius: 15px; box-shadow: 0 4px 8px -4px #888; color: #fff; display: inline-block; margin-top: 28px; padding: 4px 18px 6px; transition: .2s, box-shadow .3s; }
.orange-btn:hover { background: #d97213; box-shadow: 0 4px 8px 0 #333; color: #fff; }
.purple-button { background: #bc2b91; border: 0; border-radius: 15px; box-shadow: 0 4px 8px -4px #888; color: #fff; display: inline-block; margin-top: 28px; padding: 4px 18px 6px; transition: .2s, box-shadow .3s; }
.purple-button:hover,
.purple-button:focus { background: #a21b7a; box-shadow: 0 4px 8px 0 #333; color: #fff; }
#welcome { background: #fff; height: 100%; top: 0; z-index: 2; }
#welcome .row { height: 100%; }
#welcome .left-panel { background-image: url("../images/winter-bg.jpg"); background-size: 100%; background-position: bottom; background-repeat: no-repeat; height: 100%; }
#welcome .left-panel img { height: 220px; }
#welcome .left-panel h2 { color: #18365e; font-weight: 700; }
#welcome .right-buttons { height: 100%; padding: 0; }
#welcome .right-buttons a { background: #bbe2e1; border-radius: 0 84px 0 0; box-shadow: 3px 1px 8px -3px #111; color: #333; display: block; height: 50%; padding: 0 10%; position: relative; transition: height .6s; }
#welcome .right-buttons a:first-of-type { z-index: 1; }
#welcome .right-buttons a:last-of-type { background: #45c1be; border-radius: 0 0 84px 0; }
#welcome .right-buttons a:first-of-type:hover { height: 56% !important; }
#welcome .right-buttons a:first-of-type:hover + a { height: 44%; }
#welcome .right-buttons:hover a:first-of-type { height: 44%; }
#welcome .right-buttons a:last-of-type:hover { height: 56%; }
#welcome .right-buttons a:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#welcome .right-buttons a img { height: 90px; }
#welcome .right-buttons a h3 { color: #18365e; font-weight: 700; }
#welcome .right-buttons a div { display: inline-block; vertical-align: middle; width: 95%; }
#goals { height: 100%; padding-top: 66px; position: absolute; top: 0; }
#goals .row { height: 100%; }
#goals .goal-side { background: #bbe2e1; min-height: 100%; }
#goals .goal-side h3 { font-size: 1.1em; position: relative; text-align: center; text-transform: none; }
#goals .goal-side h3:after { background: #bc2b91; content: ""; height: 1px; left: 0; margin-top: 6px; position: absolute; top: 100%; width: 100%; }
#goals .goal-side h4 { color: #18365e; font-weight: 700; margin-top: 18px; text-transform: uppercase; }
#goals .goal-side p { color: #18365e; }
/* Image Slideshow */
.image-slideshow { padding: 0 80px; position: relative; width: 100%; }
.image-slideshow button { background: transparent; border: 0; color: #fff; position: absolute; top: 10px; transition: background .2s, margin .3s; z-index: 1; }
.image-slideshow button img { height: 36px; }
.image-slideshow button span { left: -9999px; position: absolute; }
.slideshow-move { left: 0; margin-left: 0; margin-right: 0; top: 50%; z-index: 1; }
.slideshow-move:hover { margin-left: -8px; }
.slideshow-move.next { left: auto; right: 0; }
.slideshow-move.next img { transform: rotateZ(180deg); }
.slideshow-move.next:hover { margin-right: -8px; }
.slideshow-move.disabled { cursor: auto; opacity: .4; }
.slideshow-move.disabled:hover { margin: 0; }
.image-slideshow-slides { overflow: hidden; position: relative; width: 100%; }
.image-slideshow-slides > div { left: 0; position: relative; transition: left .6s; width: 600%; }
.image-slideshow-slides > div > div { float: left; width: 16.66667%; }
.image-slideshow-slides > div img { margin-top: 44px; width: 80px; }
.continue-panel { background: #18365e; bottom: 0; color: #fff; position: fixed; margin-bottom: -58px; text-align: center; transition: margin .5s; width: 100%; }
.continue-panel.active { margin-bottom: 0; }
.continue-panel button { background: #18365e; border: 0; border-radius: 30px 30px 0 0; bottom: 100%; left: 50%; margin-left: -30px; padding: 16px 0 12px; position: absolute; transition: background .2s; width: 60px; }
.continue-panel button:hover { background: #0a1f3c; }
.continue-panel button img { display: block; height: 36px; margin: 0 auto; }
.continue-panel div { height: 58px; padding: 10px 12px 0; }
.continue-panel div a { color: #45c1be; }
.continue-panel div a:hover { color: #2ea5a2; }
.continue-panel img { display: inline-block; height: 36px; margin-right: 14px; vertical-align: middle; }
#quiz { background: #45c1be; }
#quiz-intro { background: #fff; padding-bottom: 56px; }
#quiz-questions { background: #45c1be; padding-bottom: 26px; }
#quiz-questions .grade { bottom: 100%; margin: 0; padding: 0; position: absolute; }
#quiz-questions .grade div { display: inline-block; margin: 0 4px; vertical-align: bottom; }
#quiz-questions .grade li { background: #bbe2e1; border-radius: 24px 24px 0 0; display: block; height: 60px; margin: 0; padding: 14px 0 8px; width: 48px; }
#quiz-questions .grade li.pending { background: #f1f9f9; border: 3px dashed #bbe2e1; }
#quiz-questions .grade li img { display: block; height: 30px; margin: 0 auto; }
#quiz-questions .question { display: none; }
#quiz-questions .question.current { display: block; }
#quiz-questions .question-text { display: inline-block; vertical-align: top; width: 48%; }
#quiz-questions .question-text h4 { color: #18365e; font-weight: 700; margin-top: 18px; width: 64%; }
#quiz-questions .question-text h4 span { display: block; font-size: .8em; font-weight: 400; margin-bottom: 26px; }
#quiz-questions .answers { display: inline-block; margin-top: 18px; width: 50%; }
#quiz-questions .answers .answer { background: #bbe2e1; border: 0; box-shadow: 0 2px 8px -3px #333; height: 116px; left: 0; padding: 0 16px; position: relative; text-align: left; top: -3px; transition: .2s; width: 100%; z-index: 6; }
#quiz-questions .answers .answer:nth-of-type(2) { background: #c3e2c5; z-index: 5; }
#quiz-questions .answers .answer:nth-of-type(3) { background: #f5dac1; z-index: 4; }
#quiz-questions .answers .answer:nth-of-type(4) { background: #e1bfd7; z-index: 3; }
#quiz-questions .answers .answer:nth-of-type(5) { background: #dedede; z-index: 2; }
#quiz-questions .answers .answer:nth-of-type(6) { background: #ff9e88; z-index: 1; }
#quiz-questions .answers .answer:hover { top: -3px; left: -1%; width: 102%; z-index: 7; }
#quiz-questions .answers .answer span { background: #18365e; border-radius: 50%; color: #fff; display: inline-block; font-size: 1.2em; font-weight: 700; height: 36px; line-height: 34px; margin-right: 8px; text-align: center; vertical-align: middle; width: 36px; }
#quiz-questions .answers .answer p { display: inline-block; font-size: .85em; line-height: 1.2em; margin: 0; vertical-align: middle; width: 70%; }
#quiz-questions .answers .answer img { float: right; height: 18px; margin: 14px 10px; }
#quiz-questions .summary { background: #fff; font-size: .9em; margin-top: -3px; padding: 16px 18px; }
#quiz-questions .summary h5 { font-size: 1em; font-weight: 700; margin: 0; }
#final-grade { color: #18365e; padding-top: 18px; padding-bottom: 62px; }
#final-grade h4 { display: inline-block; margin-top: 0; margin-right: 18px; vertical-align: middle; }
#final-grade .purple-button { margin-top: 6px; vertical-align: middle; }
#final-grade .correct-answers { background: #bc2b91; color: #fff; display: inline-block; padding: 2px 8px 4px; }
#final-grade p a { color: #18365e; text-decoration: underline; }
#final-grade p a:hover { color: #000; }
#final-grade .static-continue { background: #18365e; bottom: -26px; color: #fff; left: 0; line-height: 1.1em; padding: 18px 18px 24px; position: absolute; text-align: center; width: 100%; }
#final-grade .static-continue img { display: inline-block; height: 34px; margin-right: 9px; margin-top: -2px; vertical-align: middle; }
#final-grade .static-continue a { color: #fff; text-decoration: underline; }
#final-grade .static-continue a:hover { color: #45c1be; }
#quiz .continue-panel { bottom: -80px; }
/* Modal Window */
.close-modal { display: none; }
.modal-window { display: none; height: 100%; left: 0; position: fixed; top: -100%; transition: 0; width: 100%; z-index: 5000; }
.modal-window.showing { top: 0; transition: top 1s; }
.modal-window > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: block; height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
.modal-title { padding: 6px 0; width: 90%; }
.modal-window > div { background-color: #bc2b91; border-radius: 24px; box-shadow: 4px 13px 28px 0 #111; left: 50%; margin: 0; margin-left: -290px; overflow: auto; padding: 50px 3% 40px; position: absolute; text-align: center; top: 40px; width: 580px; }
.modal-window > div .close-modal { background: transparent; border: 0; color: #fff; font-size: 3em; position: absolute; right: 10px; top: -16px; transition: background .2s; }
.modal-window > div .close-modal:hover { color: #ddd; }
.modal-window > div .close-modal span { left: -9999px; position: absolute; }
.modal-window :focus { border-radius: 2px; outline: 2px groove #ddd; }
.modal-window ul { list-style-type: none; padding: 0; }
.modal-window li { display: inline-block; }
.modal-window li a { background: #e1bfd7; border-radius: 50%; box-shadow: 0 3px 8px -1px #444; display: block; height: 130px; line-height: 126px; margin-right: 18px; margin-bottom: 20px; text-align: center; width: 130px; }
.modal-window li a:hover { background: #c293b4; }
.modal-window li img { width: 80px; }
.modal-window input { border: 0; border-radius: 6px; font-size: 1.2em; font-weight: 700; padding: 2px 6px 4px; text-align: center; }
.modal-window input + button { background: #bc2b91; border: 0; color: #fff; }
#copy-text { margin-top: 40px; }
#funding-scenarios > div { background: #fff; border-radius: 24px 24px 0 0; color: #18365e; height: 80%; left: 10%; margin: 0; padding: 0; top: 10%; width: 80%; }
#funding-scenarios .modal-title { background: #18365e; color: #f68922; text-align: left; padding: 22px 36px; width: 100%; }
#funding-scenarios > div > div h4 { font-size: 1.4em; font-weight: 700; }
#funding-scenarios > div .close-modal { right: 24px; top: -14px; }
#funding-scenarios .padded-section { display: none; padding: 30px 4%; text-align: left; }
#funding-scenarios .form-section { background: #f68922; padding: 30px 4%; text-align: left; }
#funding-scenarios .form-section p a { color: #18365e; text-decoration: underline; }
#funding-scenarios .form-section p a:hover { color: #000; }
.provide-feedback { background: #f68922; border-radius: 12px; margin-bottom: 156px; padding: 26px 36px; }
.provide-feedback img { float: left; height: 70px; margin-right: 28px; }
.provide-feedback h3 { color: #fff; margin-top: 0; text-transform: none; }
.provide-feedback h3 + p { color: #fff; margin-top: 0; }
.provide-feedback p a { color: #18365e; text-decoration: underline; }
.provide-feedback p a:hover { color: #000; }
#funding-scenarios .provide-feedback { margin-bottom: 14px; padding: 0; }
#funding-scenarios.show-scenario-info .padded-section { display: block; }
#funding-scenarios.show-scenario-info .form-section { border-radius: 18px 18px 0 0; }
.outcome { height: 100%; left: -150%; opacity: 0; padding-top: 42px; position: absolute; margin-top: -9999px; width: 100%; }
.outcome.showing { left: 0; margin-top: 0; opacity: 1; transition: left 0s, opacity .3s, margin 0s; }
.outcome > .row { height: 100%; }
#outcome-screen { height: 100%; padding-bottom: 720px; }
#outcomes { height: 100%; position: absolute; top: 0; }
#outcome-screen h3 img { height: 70px; margin: 0 0 0 -8px; }
#outcome-screen p a { color: #18365e; text-decoration: underline; }
#outcome-screen ul { bottom: 0; list-style-type: none; left: 0; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; }
#outcome-screen li { display: inline-block; margin: 0 5px; vertical-align: bottom; }
#outcome-screen li a { background: #18365e; border-radius: 140px 140px 0 0; color: #fff; display: block; height: 464px; padding: 34px 18px 0; text-align: center; transition: height .4s; width: 250px; }
#outcome-screen li:nth-of-type(2) a { background: #e1bfd7; color: #333; }
#outcome-screen li:nth-of-type(3) a { background: #45c1be; color: #333; }
#outcome-screen li:nth-of-type(4) a { background: #bc2b91; }
#outcome-screen li:nth-of-type(5) a { background: #f68922; color: #333; }
#outcome-screen li a:hover { height: 484px; }
#outcome-screen a img { background: #fff; border-radius: 50%; box-shadow: 0 4px 8px -2px #111; display: block; height: 120px; margin: 0 auto; }
#outcome-screen p { line-height: 1.3em; }
.longuage #outcome-screen li a { font-size: .9em }
#outcomes .continue-panel { margin-bottom: -180px; }
#outcomes.provide-escape .continue-panel { margin-bottom: -58px; }
#outcomes.provide-escape .continue-panel.active { margin-bottom: 0; }
.persona h3 img { height: 70px; left: -12px; margin: 0; position: relative; }
.persona img[src*="persona"] { border: 6px solid #18365e; border-radius: 50%; box-shadow: 0 3px 8px -3px #222; float: right; margin: 34px 0 0 34px; width: 200px; }
#draftplan .outcome > .row { height: auto; }
#draftplan-intro > img { float: right; margin-left: 2%; margin-bottom: 18px; width: 48%; }
#draft-chapters { background: #45c1be; clear: both; color: #18365e; padding: 56px 4.5%0; }
#draft-chapters h3 { color: #18365e; margin: 0; text-transform: none; }
#draft-chapters > div { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#draft-chapters > div > div { background: #c3e2c5; border-radius: 10px; box-shadow: 0 6px 8px -4px #444; margin: 26px 2% 0 0; padding: 2px 26px 134px 26px; position: relative; width: 31.333%; }
#draft-chapters .mag-btn { background: #bc2b91; bottom: 26px; color: #fff; position: absolute; }
#draft-chapters > div > div:nth-of-type(2) { background: #f5dac1; }
#draft-chapters > div > div:nth-of-type(3) { background: #e1bfd7; }
#draft-chapters > div > div:nth-of-type(4) { background: #dedede; }
#draft-chapters > div > div:nth-of-type(5) { background: #bbe2e1; }
#draft-chapters > div > div:nth-of-type(7) { background: #f5dac1; height: 600px; }
#draft-chapters > div > div h4 { font-weight: 700; }
#draft-chapters > div > div h4 span { display: block; font-size: .8em; font-weight: 400; margin-bottom: 24px; }
#draft-chapters .learn-more { background: #18365e; border-radius: 10px 10px 0 0; padding-bottom: 10px; width: 64.6667%; }
#draft-chapters .learn-more h4 { color: #fff; }
#draft-chapters .learn-more > div { background: #e1bfd7; border-radius: 10px; margin: 28px 0; padding: 2px 28px 24px; }
#draft-chapters .learn-more > div > div { padding-left: 130px; padding-bottom: 12px; position: relative; }
#draft-chapters .learn-more > div > div h5 { font-weight: 700; }
#draft-chapters .learn-more > div > div h6 { font-size: 1em; font-weight: 700; margin-bottom: 4px; }
#draft-chapters .learn-more > div > div img { left: 0; position: absolute; top: 0; width: 90px; }
#draft-chapters .learn-more > div a { text-decoration: underline; }
#draft-chapters .learn-more > div:last-of-type { background: #bbe2e1; }
#draft-chapters .learn-more > div h5 { padding: 26px 0 18px; }
/* Tabs */
.tabset { margin: 34px 0 144px; position: relative; }
.tabset ul { display: none; }
.tabset.has-js ul { display: block; }
.tabset .tablist { list-style-type: none; margin: 8px 0 0; padding: 0; position: absolute; text-align: center; top: 100%; width: 100%; }
.tabset .tab { background: #d9d9d9; border-radius: 50%; cursor: pointer; display: inline-block; font-weight: bold; height: 14px; margin: 0 4px; position: relative; width: 14px; }
.tabset .tab:hover { background-color: #bbb; }
.tabset .tab[aria-selected="true"] { background-color: #bc2b91; }
.tabset .tab span { left: -9999px; position: absolute; }
.tabset .panel { background: #f2f2f2; border-radius: 16px; clear: both; display: table; margin: 0 0 18px; }
.tabset.has-js .panel { display: none; margin-bottom: 0; }
.tabset.has-js .panel[aria-hidden="false"] { display: table; }
.tabset .panel h3 { color: #18365e; margin: 0 0 36px; }
.tabset .panel h3 span { display: block; font-size: .75em; margin-top: 8px; }
.tabset .panel .row > div { padding: 0; }
.tabset .panel > div { display: table-cell; padding: 22px 32px; top: 0; vertical-align: top; width: 50%; }
.tabset .panel > div:last-of-type { background: #18365e; border-radius: 0 16px 16px 0; color: #fff; padding-bottom: 94px; }
.tabset .panel > div:last-of-type span { display: block; font-size: 3.6em; line-height: 1em; margin-bottom: -26px; }
.tabset .panel > div:last-of-type span:last-of-type { bottom: 18px; position: absolute; right: 34px; }
.tabset .panel > div:last-of-type p { margin: 0; }
.tabset > button { background: transparent; border: 0; left: 10%; margin-top: 12px; position: absolute; top: 100%; }
.tabset > button.next-one { left: auto; right: 10%; transform: rotate(180deg); }
.tabset > button.next-one .ada-element { left: 9999px; }
.tabset > button img { height: 32px; }
/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium" columns in Bootstrap */
@media screen and (min-width: 1960px) {
body { font-size: 30px; }
.header { height: 76px; }
.header li:last-of-type a { height: 76px; line-height: 70px; }
#goals { padding-top: 76px; }
#outcome-screen { padding-bottom: 800px; }
#outcome-screen li a { border-radius: 200px 200px 0 0; height: 535px; width: 320px; }
#outcome-screen li a:hover { height: 555px; }
#quiz-questions .answers .answer { height: 122px; }
#quiz-questions .answers .answer span { height: 48px; line-height: 44px; width: 48px; }
}
@media screen and (max-width: 1650px) {
.longuage .header li { margin: 0 8px 0 12px; }
.longuage .header li a { font-size: .75em; }
.longuage #quiz-questions .answers .answer p { font-size: .7em; }
}
@media screen and (max-width: 1450px) {
.longuage .header li { margin: 0 8px 0 12px; }
.longuage .header li a { font-size: .75em; }
.longuage .continue-panel div { font-size: .8em; line-height: 1em; padding-top: 8px; }
.longuage .continue-panel div img { height: 18px; }
/* Quick Mobile Menu */
.longuage #mobile-menu { display: inline-block; font-size: 1.1em; }
.longuage .header { height: 48px; padding: 8px 14px; }
.longuage .header .nav ul { background-color: #18365e !important; box-shadow: 2px 4px 8px -4px #000; display: none; opacity: 0; position: absolute; left: -250px; top: 48px; transition: left .5s, opacity .5s; width: 240px; z-index: 1; }
.longuage .menu-opened .header .nav ul { opacity: 1; left: 0; }
.longuage .header .nav li { display: block; margin: 0; padding: 0 ; text-align: center; }
.longuage .header .nav li a { line-height: 1.1em;margin: 4px 0; padding: 8px; }
.longuage .header .nav li a.active { background: #38639e; }
.longuage .header .nav li a:after { display: none; }
.longuage .header .nav li:last-of-type a { background: #18365e !important; height: auto; line-height: 1em; position: static; }
.longuage .header .nav li:last-of-type a img { height: 16px; }
.longuage #goals { padding-top: 48px; }
}
@media screen and (max-width: 1370px) {
body { font-size: 20px; }
#outcome-screen { padding-bottom: 640px; }
#outcome-screen li { margin: 0 3px; }
#outcome-screen li a { font-size: .9em; height: 400px; width: 180px; }
#outcome-screen li a:hover { height: 414px; }
#outcome-screen a p { line-height: 1.3em; }
#outcome-screen a img { height: 100px; }
.longuage #outcome-screen { padding-bottom: 800px; }
.longuage #outcome-screen li a { font-size: .85em; height: 512px; }
.longuage #outcome-screen li a:hover { height: 565px; }
}
@media screen and (max-width: 1060px) {
.row > div { padding: 16px 4.5% 34px; }
.image-slideshow { padding: 0 56px; }
.image-slideshow button img { height: 22px; }
.image-slideshow-slides > div h4 { font-size: 1.4em; }
/* Quick Mobile Menu */
#mobile-menu { display: inline-block; font-size: 1.1em; }
.header { height: 48px; padding: 8px 14px; }
.header .nav ul { background-color: #18365e !important; box-shadow: 2px 4px 8px -4px #000; display: none; opacity: 0; position: absolute; left: -250px; top: 48px; transition: left .5s, opacity .5s; width: 240px; z-index: 1; }
.menu-opened .header .nav ul { opacity: 1; left: 0; }
.header .nav li { display: block; margin: 0; padding: 0 ; text-align: center; }
.header .nav li a { line-height: 1.1em;margin: 4px 0; padding: 8px; }
.header .nav li a.active { background: #38639e; }
.header .nav li a:after { display: none; }
.header .nav li:last-of-type a { background: #18365e !important; height: auto; line-height: 1em; position: static; }
.header .nav li:last-of-type a img { height: 16px; }
#quiz-questions .question-text { padding-bottom: 18px; width: 100%; }
#quiz-questions .answers { width: 100%; }
.persona img[src*="persona"] { width: 160px; }
}
@media screen and (max-width: 992px) {
h1 { font-size: 2.2em; margin: 20px 0 6px; }
h2 { font-size: 1.4em; margin: 12px 0 0; }
h3 { font-size: 1.4em; margin: 20px 0 0; }
h4 { font-size: 1.3em; margin: 28px 0 0; }
h5 { font-size: 1.2em; margin: 26px 0 0; }
h6 { font-size: 1.1em; margin: 26px 0 0; }
p, li { font-size: .9em; line-height: 1.3em; }
.button { font-size: .8em; border-radius: 12px; padding: 4px 12px 3px; }
table tr { font-size: .8em; padding: 2px; }
.vertical-center > div { margin: 0; }
.modal-title { padding: 0; }
.modal-window > div { padding: 0 5% 28px; }
.mag-btn { font-size: .9em; padding: 3px 15px; }
.continue-panel { margin-bottom: -96px; }
.continue-panel div { font-size: .9em; height: 96px; line-height: 1.1em; padding: 12px 16px 0; }
.continue-panel img { height: 20px; margin: -2px 3px 2px 0; }
#outcomes.provide-escape .continue-panel { margin-bottom: -82px; }
#outcomes .continue-panel div { height: 82px; }
#outcomes .continue-panel div { font-size: .8em; }
#outcomes .continue-panel div img { height: 20px; }
#welcome .left-panel { height: auto; }
#welcome .left-panel img { height: 160px; margin-top: -12px; }
#welcome .right-buttons { height: auto; }
#welcome .right-buttons a { border-radius: 0 !important; height: auto !important; padding: 24px 6%; }
#welcome .right-buttons a img { height: 60px; }
#welcome .right-buttons:hover a:first-of-type { height: auto; }
.slideshow-trigger { font-size: .8em; height: 26px; line-height: 26px; margin: 8px; width: 26px; }
.slideshow-move { font-size: 1.2em; height: 32px; line-height: 32px; margin-top: -16px; padding: 0 6px; }
.caption { bottom: 4px; font-size: .85em; }
#goals { padding-top: 48px; }
#goals .goal-side h3 { font-size: .9em; }
.image-slideshow-slides > div img { margin-top: 36px; width: 56px; }
.continue-panel button { margin-left: -24px; padding: 14px 0 10px; width: 48px; }
.continue-panel button img { height: 28px; }
#outcome-screen { padding-bottom: 520px; }
#outcome-screen li a { font-size: .9em; height: 320px; padding: 24px 12px 0; width: 130px; }
#outcome-screen li a:hover { height: 334px; }
#outcome-screen li a img { height: 80px; }
#outcomes .continue-panel div { font-size: .8em; }
#outcomes .continue-panel div img { height: 26px; }
#draft-chapters > div > div { font-size: .9em; padding: 2px 18px 94px; }
#draft-chapters > div > div h4 { font-size: 1.2em;}
#draft-chapters > div > div h4 span { margin-bottom: 14px; }
#final-grade { padding-bottom: 80px; }
#final-grade .static-continue img { height: 24px; }
}
@media screen and (max-width: 768px) {
#goals .goal-side { min-height: auto; padding-bottom: 90px; }
#quiz-intro { padding-bottom: 36px; }
#quiz-questions .question-text h4 { font-size: 1.1em; width: 100%; }
#quiz-questions .question-text h4 span { margin-bottom: 14px; }
#quiz-questions .grade div { margin: 0 2px; }
#quiz-questions .grade li { border-radius: 16px 16px 0 0; height: 38px; padding: 10px 0 0; width: 32px; }
#quiz-questions .grade li img { display: block; height: 18px; margin: 0 auto; }
#quiz-questions .answers .answer { height: auto; padding: 12px 16px; }
#quiz-questions .answers .answer:hover { height: auto; top: 0; left: 0; width: 100%; }
#quiz-questions .answers .answer span { font-size: .9em; height: 28px; line-height: 28px; margin-bottom: 6px; width: 28px; }
#quiz-questions .answers .answer p { font-size: .8em; width: 100%; }
#quiz-questions .answers .answer img { float: none; position: absolute; right: 6px; top: 4px; }
.tabset { margin-bottom: 84px; }
.tabset .panel { height: auto !important; }
.tabset .panel > div { display: block; width: 100%; }
.tabset .panel > div:last-of-type { border-radius: 0 0 16px 16px; }
.tabset > button { left: 4%; margin-top: 6px; }
.tabset > button.next-one { left: auto; right: 4%; }
.tabset > button img { height: 26px; }
.modal-window > div { margin-left: -140px; top: 18px; width: 280px; }
.modal-window li a { height: 68px; line-height: 60px; margin: 0 6px 8px; width: 68px; }
.modal-window li img { width: 44px; }
.modal-window input { font-size: .85em; }
.modal-window input + button { font-size: .8em; }
.modal-window > div .close-modal { font-size: 1.8em; top: -8px; }
#funding-scenarios > div { height: 90%; left: 5%; top: 5%; width: 90%; }
#funding-scenarios .modal-title { line-height: 1.1em; padding-right: 64px; }
#funding-scenarios > div .close-modal { right: 18px; top: 0; }
#funding-scenarios .padded-section { padding: 14px 6% 22px; }
.provide-feedback { margin-bottom: 88px;}
.provide-feedback img { height: 54px; margin-right: 12px; }
#outcome-screen ul { padding-top: 18px; position: static; }
#outcome-screen li { vertical-align: top; }
#outcome-screen li a { border-radius: 65px; height: auto; margin-bottom: 18px; padding-bottom: 48px; }
#outcome-screen li a:hover { height: auto; }
#draftplan-intro > img { float: none; margin-left: 2%; margin-bottom: 12px; max-width: 300px; width: 96%; }
#draft-chapters > div > div { width: 48%; }
#draft-chapters > div > div:nth-of-type(7) { height: auto; }
#draft-chapters .learn-more { width: 100%; }
#draft-chapters .learn-more > div > div { font-size: .9em; padding-top: 20px; padding-left: 0; }
#draft-chapters .learn-more > div > div a { word-wrap: break-word; }
#draft-chapters .learn-more > div > div img { position: static; width: 60px; }
#draft-chapters .learn-more > div h5 { padding: 0; }
}
@media screen and (max-width: 480px) {
.image-slideshow { padding: 20px 24px; }
#draft-chapters > div > div { font-size: .8em; width: 100%; }
}
@media screen and (max-height: 734px) {
#welcome .left-panel { font-size: .9em; }
#welcome .left-panel img { height: 120px; }
#welcome .left-panel h2 { font-size: 1.6em; }
#welcome .right-buttons a img { height: 46px; }
#welcome .right-buttons a h3 { font-size: 1.2em; margin-top: 12px; }
#welcome .right-buttons a p { font-size: .9em; margin: 6px 0 0; }
}