html, body { color: #222; font-family: "Roboto", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
.row > div { padding: 0 1.5% 12px; }
.content { width: 100%; }
.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; }

/* 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.5em; margin: 16px 0 6px; }
ul, ol { margin: 16px 0 10px; }
li {  line-height: 1.4em; margin-bottom: 8px; }

/* 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: 2px solid #333; border-width: 0 2px 2px 0; margin: 14px 0; width: 100%; }
table tr th { border: 2px solid #333; border-width: 0 2px 2px 0; padding: 2px 4px; }
table tr td { border: 1px solid #333; border-width: 0 1px 1px 0; padding: 2px 4px; }
table tr:nth-of-type(even) { background-color: #eee; }

/* Accordion  (can remove if not needed)*/
.accordion-header { cursor: pointer; }
.accordion-header i { font-size: .7em; margin-left: 12px; transition: transform .45s; vertical-align: middle; }
.opened .accordion-header i { transform: rotate(180deg); }
.accordion > div { padding: 3px 0; }

/* Modal Window   (can remove if not needed)*/
#modal-window { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; }
#modal-window.showing { top: 0; }
#modal-window > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-window > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-window > span > span:hover { color: #ddd; }
#modal-window > div { background-color: #fff; border: 1px solid #333; box-shadow: 1px 63px 58px 0 #111; height: 78%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-window.showing > div { box-shadow: 4px 13px 28px 0 #111; margin-top: 60px; }

/*********************************************/
/******   Custom CSS  ************************/
/*********************************************/

img { max-width: 100%; }
.center { text-align: center; }
.button { background-color: #fff; border: 1px solid #023f5e; border-radius: 0; color: #023F5E; }
.button:hover { background-color: #b9d4e2; color: #023f5e; }

#header { background-color: #023f5e; font-family: "Roboto Condensed",sans-serif; padding: 15px 8px; text-align: center; }
#header h1 { color: #6FA44F; font-size: 2.4em; margin: 0; }
#header h1 a { color: #6fa44f; }
#header h1 span { color: #fff; }
#header img { height: 34px; margin: -5px 3px 0 5px;  }

.container { background-color: #03687b; background: linear-gradient(#028eaa, #03687b); padding: 48px 6% 60px; }
.hp-container { padding: 0; }

#hp-banner { position: relative; }
#hp-banner img { width: 100%; }
#hp-banner h2 { font-size: 1.8em;font-weight: 700; }
#hp-banner p { line-height: 1.3em; }
#hp-banner > div { height: 100%; position: absolute; right: 1%; top: 12%; width: 27%; }
#hp-banner > div:after { content: ""; display: inline-block; height: 80%; vertical-align: middle;  }
#hp-banner > div > div { color: #fff; display: inline-block; vertical-align: middle; width: 94%; }

#hp-buttons { background-color: #03687b; background: linear-gradient(#028eaa, #03687b); padding-bottom: 48px; text-align: center; }
#hp-buttons > div { background-color: #fff; cursor: pointer; display: inline-block; margin: -64px 18px 0; position: relative; vertical-align: top; width: 480px; }
#hp-buttons h3 { background-color: #023f5e; color: #fff; font-size: 1.6em; font-weight: 700; height: 64px; line-height: 64px; margin: 0 0 34px;  }
#hp-buttons img { height: 160px; }
#hp-buttons h4 { color: #023f5e; font-size: 1.3em; font-weight: 700; line-height: 1.3em; margin: 18px auto 8px; text-transform: uppercase; width: 190px;}
#hp-buttons h4 span { color: #007e98; }
#hp-buttons p { height: 90px; margin-bottom: 114px; padding: 0 58px; }
#hp-buttons a { background-color: #023f5e; bottom: 0; color: #fff; font-size: 1.2em; font-weight: 700; left: 0; letter-spacing: .03em; padding: 18px 0; position: absolute; text-decoration: underline; text-transform: uppercase; width: 100%; }
#hp-buttons > div:hover a { background-color: #012b40; }
#hp-buttons a img { height: 58px; margin-left: 9px; }

#footer { background-color: #023f5e; padding: 8px 14px; }
#footer img { height: 84px; }

.screen { background-color: #fff; position: relative; }

.screen-header { background-color: #023f5e; height: 56px; line-height: 56px; position: relative; text-align: center; }
.screen-header h2 { color: #fff; font-size: 1.6em; font-weight: 700; line-height: 56px; }
.screen-header a,
.screen-footer a { border-left: 1px solid #000; color: #fff; padding: 0 18px 0 24px; position: absolute; right: 0; top: 0; }
.screen-header a i,
.screen-footer a i { margin: 0 4px; }
.screen-header a:hover,
.screen-footer a:hover { background-color: #01293e; color: #e3e3e3; }
.screen-header a:first-of-type,
.screen-footer a:first-of-type { border-right: 1px solid #000; border-left: 0; left: 0; padding: 0 24px 0 18px; right: auto; }
.screen-footer a { background-color: #023f5e; bottom: 0; height: 56px; line-height: 56px; top: auto; }
.leave-results { display: none; }

.screen-body { padding: 36px 5% 56px; }
.screen-body h3 { color: #007E98; font-weight: 700; margin-top: 8px;  }

.panel { background-color: #fff; border: 0; border-radius: 0; border-top: 6px solid #007E98; box-shadow: 0 2px 10px -2px #aaa; margin: 0; padding: 8px 10px; text-align: center; }
.panel p { font-size: .9em; line-height: 1.3em; margin: 0; }
.panel strong { display: block; }

/* LCA INTRO SCREEN */
#intro-screen .row > div { padding: 0; }
.card-box { background-color: #f3f3f3; border-bottom: 8px solid #48792a; }
.card-box h3 { background-color: #48792a; color: #fff; font-size: 1.5em; font-weight: 700; margin: 0; padding: 9px 4px; text-align: center; }
.card-box div { height: 140px; padding: 0%; }
.card-box p { display: inline-block; margin: 18px 7%; vertical-align: middle; }
.card-box.blue { background-color: #ebeaea; border-bottom-color: #0C5487; }
.card-box.blue h3 { background-color: #0C5487; }
#intro-screen .center { color: #023F5E; }

.new-sentence { background-color: #fff; color: #023f5e; padding: 28px 0 44px; }

/* IMAGE SLIDER */
.image-slider { margin-bottom: 32px; overflow: hidden; position: relative; }
.image-slider img { width: 100%; }
.image-slider .before-image { overflow: hidden; position: absolute; top: 0; left: -49.25%; width: 100%; }
.image-slider .before-image > img { position: relative; left: 49.25%; }
.image-slider .is-toggle { background-color: #454545; cursor: pointer; height: 100%; position: absolute; left: 50%; top: 0; width: 14px; }
.image-slider .is-toggle > div { background-color: #4e4e4e; border-radius: 6px; height: 54px; margin-top: -27px; margin-left: -33px; position: absolute; top: 50%; width: 80px;  }
.image-slider .is-toggle > div:before,
.image-slider .is-toggle > div:after { border: 14px solid transparent; border-right-color: #fff; content: ""; margin-top: -14px; left: -6px; position: absolute; top: 50%; }
.image-slider .is-toggle > div:after { border-right-color: transparent; border-left-color: #fff; left: auto; right: -4px; }
.image-slider .is-toggle > div:hover, 
.image-slider .is-toggle > div:focus { background-color: #353535; }

/* CIRCLE SLIDER */
.circle-slider { background-color: #44a22c; background: linear-gradient(#62bb46, #268913); border-radius: 50%; height: 680px; position: relative; width: 680px; }

.circle-slider .circles > span,
.circle-slider .toggle > span { height: 84%; left: 50%; margin-left: -20px; position: absolute; top: 8%; width: 40px; }
.circle-slider .circles > span > span,
.circle-slider .toggle > span > span { background-color: #fff; background-color: rgba(255,255,155,.4); border-radius: 50%; height: 12px; left: 50%; margin-left: -8px; margin-top: 14px; position: absolute; top: -8%; width: 12px; }

.circle-slider .circles > span.lockable > span { background-color: #fff; cursor: pointer; height: 24px; margin-left: -14px; margin-top: 6px; width: 24px; }

.circle-slider .toggle > span { z-index: 1; }
.circle-slider .toggle > span > span { background-color: #268913; border: 2px solid #fff; box-shadow: 0 0 14px -5px #666; color: #fff; cursor: pointer; font-size: 1.2em; height: 92px; margin-left: -46px; margin-top: -27px; text-align: center; top: -8%; width: 92px; }
.circle-slider .toggle > span > span strong { display: block; font-size: 2.2em; line-height: .65em; margin-top: 20px; }
.circle-slider .toggle > span > span:hover { box-shadow: 0 0 8px 0 #000; }
.circle-slider .toggle > span > span.toggling { background-color: #1a6d0a; box-shadow: 0 0 14px 5px #000; }
.completed .circle-slider .toggle { display: none; }

.circle-slider .overlays { background-color: #fff; border-radius: 50%; height: 84%; left: 50%; margin: -42% 0 0 -42%; padding-top: 22px; position: absolute; text-align: center; top: 50%; width: 84%; }
.circle-slider .overlays > div { left: 50%; margin: -34% 0 0 -39%; opacity: 0; position: absolute; top: 50%; transition: opacity 0s; vertical-align: middle; width: 78%; }
.circle-slider .overlays > div.showing { opacity: 1; transition: opacity 1s;  }
.circle-slider .overlays h3 { color: #023F5E; font-size: 1.6em; font-weight: 700; margin-top: 0; }

.circle-slider .overlays > a { background-color: #023f5e; background-color: rgba(2, 63, 94, .95); border-radius: 50%; height: 100%; left: -2500%; margin: -50% 0 0 -50%; opacity: 0; padding-top: 112px; position: absolute; text-align: center; top: 50%; width: 100%; }
.circle-slider .overlays > a h3 { color: #fff; font-size: 2em;  line-height: 1.4em; margin: 0 auto; width: 70%; }
.circle-slider .overlays > a span { border: 18px solid transparent; border-left-color: #fff; border-width: 38px 74px; display: inline-block; margin: 48px 0 0 74px; transition: .6s; }
.circle-slider .overlays > a:hover { background-color: #012f46; background-color: rgba(2,63,94,.98); }
.circle-slider .overlays > a:hover span { border-width: 44px 80px; margin: 45px 0 0 80px; }
.completed .circle-slider .overlays > a { left: 50%; opacity: 1; transition: left 0s, opacity .3s; }

.remaining-value .square-mask { height: 50%; left: -245%; overflow: hidden; position: absolute; width: 36%; }
.remaining-value.showing .square-mask { left: 45%; }
.remaining-value .mask-circle { background-color: #62BB46; border-radius: 50%; height: 200%; left: -124.89%; opacity: 0; position: absolute; top: 0; transition: opacity .0s; width: 277.7778%; }
.remaining-value.showing .mask-circle { opacity: 1; transition: opacity .35s; }
.value-token > span { background-color: #268913; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 14px -5px #666; color: #fff; font-size: 1.1em; height: 92px; left: -500%; margin-left: -46px; margin-top: -18px; opacity: 0; position: absolute; text-align: center; top: 12%; width: 92px; z-index: 1; }
.remaining-value.showing .value-token > span { left: 81%; opacity: 1; transition: opacity .45s; }
.value-token > span > span strong { display: block; font-size: 2.2em; line-height: .85em; margin-top: 18px; }
#road-lifecycle .remaining-value .mask-circle { background-color: #32801a; }
.completed .remaining-value { display: none; }

/* LCA: ROAD LIFECYCLE */
#circle-area { margin: 50px 0 24px; position: relative; }
#circle-area .circle-slider { margin: 0 auto; }
.circle-graphic { position: relative; }
.circle-graphic > img { height: 250px; margin-top: 22px; }

.popup-box { bottom: 210px; padding-left: 40px; position: absolute; right: -6px; transition: bottom 0s; width: 160px; }
.overlays > div.showing .popup-box { bottom: 170px; transition: bottom .85s ease-in-out .05s; }
.popup-box img { left: 9px; position: absolute; top: 10px; width: 24px; }
.popup-box p { font-size: .9em; line-height: 1.3em; margin: 0; }
.popup-box strong { display: block; }

.info-detail { background-color: #E3F1F3; color: #023F5E; padding: 11px 8px 8px 50px; position: absolute; top: -26px; width: 248px; }
.info-detail p { line-height: 1.2em; margin-top: 0;  }
.info-detail i { font-size: 1.6em; left: 0; padding: 12px 14px; position: absolute; top: 0; }

/* LCA: ROAD MAINTENANCE */
#game-tree { margin: 24px 0 32px; padding-bottom: 8px; position: relative; }
#game-tree > img { display: block; height: 200px; margin: 0 auto -88px; }
#game-tree .instruction { border: 2px dotted #bdbdbf; border-bottom: 0; color: #008da9; float: left; font-size: 1.3em; font-weight: 700; height: 170px; text-align: center; width: 33.3333%; }
#game-tree .instruction:first-of-type { border-right: 0; margin-left: 16%; }
#game-tree .instruction > div { display: inline-block; vertical-align: middle; }
#game-tree .instruction:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#game-tree .instruction span { background-color: #008da9; color: #fff; display: inline-block; margin-bottom: 4px; padding: 2px 10px 1px; }

#game-tree .approach { display: inline-block; font-size: .9em; margin: 0 1%; position: relative; text-align: center; vertical-align: top; width: 31%; }
#game-tree .approach > div { border-top: 18px solid #023f5e; box-shadow: 0 6px 12px -5px #bbb; cursor: pointer; height: 198px; padding: 28px 24px 0; position: relative; }
#game-tree .approach h4 { color: #023f5e; font-size: 1.4em; font-weight: 700; margin-top: 0; }
#game-tree .approach p { line-height: 1.3em; }
#game-tree .approach > a { background-color: #fff; border: 2px solid #023f5e; border-radius: 50%; color: #023f5e; font-weight: 700; height: 60px; margin: -22px 0 0 -30px; position: absolute; left: 50%; top: 0; width: 60px; }
#game-tree .approach > a > span { display: block; line-height: .7em; }
#game-tree .approach > a > span > span { border: 8px solid transparent; border-left-color: #023f5e; border-width: 9px 14px; display: inline-block; margin: 8px 0 0 16px; }
#game-tree .approach:hover > a { background-color: #ececed; }
.game-list { font-size: .95em; list-style-type: none; margin: 0; padding: 0; }
.game-list > div { background-color: #d8f2ff; padding: 14px 20px 6px; }
.game-list > div.cons { background-color: #eaf8ff; }
.game-list h5 { color: #023f5e; font-size: 1.1em; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; }
.game-list li { line-height: 1.3em; margin-bottom: 12px; }
#game-tree .approach ul { box-shadow: 0 3px 8px -4px #999; opacity: 0; transition: opacity .2s; }
#game-tree .approach:hover ul { opacity: 1; }
#game-tree .approach > div a { background-color: #023f5e; bottom: -15px; color: #fff; display: none; left: 0; padding: 8px; position: absolute; width: 100%; }
#game-tree .approach > div a img { height: 16px; margin: -2px 7px 0 0; }
#game-tree .approach > div a:hover { background-color: #012538; }
#game-tree .approach.active > div a { display: block; z-index: 3;}

#game-tree .approach.purple > div { border-top-color: #712760; }
#game-tree .approach.purple > a { border-color: #712760; }
#game-tree .approach.purple > a > span > span { border-left-color: #712760; }
.purple .game-list > div { background-color: #fae9f7; }
.purple .game-list > div.cons { background-color: #fff4fd; }
.purple .game-list h5 { color: #712760; }

#game-tree .approach.orange > div { border-top-color: #e87200; }
#game-tree .approach.orange > a { border-color: #e87200; }
#game-tree .approach.orange > a > span > span { border-left-color: #e87200; }
.orange .game-list > div { background-color: #fae3cc; }
.orange .game-list > div.cons { background-color: #fff6ed; }
.orange .game-list h5 { color: #e87200; }
/* Above to comment likely can be deleted; keeping for possible reversion to old style */

.approach-box { border-top: 28px solid #007e98; box-shadow: 0 1px 14px -3px #aaa; margin: 38px 0; padding: 24px 2% 0; }
.approach-box .col-md-5 { width: 36%; }
.approach-box .col-md-2 { width: 28%; }
.approach-box .col-md-5:first-of-type { text-align: center; }
.approach-box .col-md-5 a { background-color: #023f5e; border-radius: 20px; color: #fff; display: block; margin-top: 20px; padding: 6px 0; }
.approach-box .col-md-5 a i { margin-right: 4px; }
.approach-box .col-md-5 a:hover { background-color: #01283c; }
.approach-box ul { list-style-type: none; margin: 0 0 24px; padding: 0; }
.approach-box ul h4 { color: #023f5e; font-size: 1.2em; font-weight: 700; margin: 0 0 6px; text-transform: uppercase; }
.approach-box ul li { font-size: .95em; line-height: 1.3em; margin-bottom: 12px; }

.approach-box.purple { border-top-color: #712760; }
.approach-box.purple ul h4  { color: #712760; }
.approach-box.orange { border-top-color: #af6012; }
.approach-box.orange ul h4  { color: #af6012; }

.game-circle { clear: both; display: none; }
.game-circle h3 { font-weight: 700; margin: 40px 0 6px; text-align: center; }
.game-circle .results-header-text { display: none; }
.game-circle .results-header-text h3 { color: #023f5e; margin-top: 60px; }
.game-circle .not-results-header-text h3 { color: #007e98; font-size: 1.5em; }
.game-circle .circle-slider .overlays h4 { color: #023F5E; font-size: 1.6em; font-weight: 700; margin-top: 0; }
.game-circle .row:first-of-type { padding: 0 4%; }
.game-circle .row:first-of-type .col-md-3 { margin-top: 46px; text-align: center; }
.game-circle .row:first-of-type .col-md-3 h5 { color: #023f5e; font-size: 1.1em; font-weight: 700; }
.game-circle .cycle-cost { color: #023f5e; font-size: 2.4em; font-weight: 700; }
.game-circle .total-cost { background-color: #CCE5EA; margin-top: 8px; padding: 4px; }
.game-circle .total-cost.finished { background-color: #023f5e; color: #fff; }
.gaming #game-tree .approach ul { display: none; opacity: 1; position: absolute; top: 100%; z-index: 2; }
.gaming #game-tree .approach:hover ul { display: block; }
#game-tree .approach.active ul > div:first-of-type { padding-top: 32px; }
.gaming .screen-footer a { display: none; }
.results .game-circle { margin-top: -26px; }
.results .not-results-header-text { display: none; }
.results .results-header-text { display: block; }

.set-results,
.at-end a { background-color: #023f5e; color: #fff; display: block; margin-top: 18px; padding: 8px 0; width: 100%; }
.set-results img,
.at-end a img { height: 18px; margin: -1px 4px 0 0; }
.set-results:hover,
.at-end a:hover { background-color: #01293e; color: #fff; }
.at-end .panel { border: 0; opacity: 1; display: block; float: left; margin: 8px 1.5% 18px; padding: 0; width: 47%; }
.at-end .panel h6 { background-color: #007e98; color: #fff; font-size: .9em; font-weight: 700; margin: 0; padding: 6px 3px 4px; }
.at-end .panel p { color: #023f5e; font-size: 1.2em; font-weight: 700; padding: 8px 4px; }
.at-end .panel.purple h6 { background-color: #712760; }
.at-end .panel.orange h6 { background-color: #af6012;  }
.results .set-results { display: none; }
.compare-to a { display: none; }
.results .at-end .compare-to a { border-radius: 20px; clear: both; display: block; font-size: .85em; }
.results .at-end .compare-to a i { margin-right: 3px; }

.game-circle .circle-slider { background-color: #015f7b; background: linear-gradient(#007e98, #023f5e); }
.game-circle .circle-slider .toggle > span > span { background-color: #007e98; }
.game-circle .circle-slider .toggle > span > span.toggling { background-color: #016073; }
.game-circle .cost { left: -9999px; position: absolute; top: -9999px; }
#balanced-maintenance .circle-slider { background-color: #6c3d6c; background: linear-gradient(#8d5280, #4c2858); }
#balanced-maintenance .circle-slider .toggle > span > span { background-color: #712760; }
#balanced-maintenance .circle-slider .toggle > span > span.toggling { background-color: #5f1a4f; }
#balanced-maintenance .col-md-3 .panel,
#balanced-maintenance .popup-box { border-top-color: #712760; }
#balanced-maintenance .total-cost { background-color: #E3D4DF; }
#balanced-maintenance .total-cost.finished { background-color: #712760; }
#proactive-maintenance .circle-slider { background-color: #cc6909; background: linear-gradient(#e87200, #af6012); }
#proactive-maintenance .circle-slider .toggle > span > span { background-color: #af6012; }
#proactive-maintenance .circle-slider .toggle > span > span.toggling { background-color: #9c530a; }
#proactive-maintenance .col-md-3 .panel,
#proactive-maintenance .popup-box { border-top-color: #af6012; }
#proactive-maintenance .total-cost { background-color: #fae3cc; }
#proactive-maintenance .total-cost.finished { background-color: #af6012; }

.road-conditions { background-color: #ececed; margin-top: 16px; padding: 30px 2% 18px; }
.road-conditions h3 { color: #023f5e; font-size: 1.6em; font-weight: 700; margin-top: 0; text-align: left; }
.road-conditions .col-md-2 { cursor: pointer; position: relative; width: 18%; }
.road-conditions .col-md-2 p { background-color: #fff; bottom: 50%; box-shadow: 0 3px 8px -3px #aaa; font-size: .9em; left: -3000%; opacity: 0; padding: 8px 14px; position: absolute; }
.road-conditions .col-md-2:hover p { bottom: 80%; left: 0; opacity: 1; transition: left 0s, opacity .35s, bottom .5s; }
.road-conditions .col-md-2 > img { display: block; margin: 0 auto; }

.results-footer { display: none; }
.results-footer ul > div { float: left; height: 260px; margin-top: 18px; padding: 26px 48px 0; text-align: center; width: 50%; }
.results-footer ul li { margin: 14px 0 18px; }
.results-footer > a { clear: both; display: block; padding: 40px 0 48px; text-align: center; }
.results-footer > a span { background-color: #023f5e; border-radius: 24px; color: #fff; display: inline-block; font-size: 1.1em; padding: 9px 30px; }
.results-footer > a:hover > span { background-color: #012d44; color: #fff; }
.results-footer > a i { margin-right: 6px; }

.quality { border-top-color: #62bb46; margin-top: 6px; padding: 8px 21px; }
.quality h4 { font-size: 1em; margin: 0; }
.quality img { display: inline-block; height: 18px; margin: -2px 2px 0 0; }
.quality strong { display: inline-block; vertical-align: middle; }
#circle-area .quality { bottom: 214px; left: 26px; margin: 0; position: absolute; }
#circle-area .overlays > .showing .quality { bottom: 174px; transition: bottom .8s; }
.quality.good { border-top-color: #bedc47; }
.quality.fair { border-top-color: #f8ba1b; }
.quality.poor { border-top-color: #b53208; }

#road-maintenance.results .screen-body { display: none; }
.results .screen-header a { display: none; }
.results .screen-header .leave-results { border-left: 0; border-right: 1px solid #000; display: block; left: 0; padding: 0 24px 0 18px; right: auto; }
.results .game-circle h3 { display: block; }
.results .road-conditions { display: none; }
.results .results-footer { display: block; }

.are-results { display: none; }
#circle-area .are-results .quality { left: auto; right: 0; }
.are-results .quality span { display: block; font-weight: 700; margin-bottom: 3px; }
.are-results .quality strong { font-size: 1.3em; }
.results .not-results { display: none; }
.results .are-results { display: block; }

/* BCA - Budget Crossroads */
#tha-crossroad { margin-top: 40px; position: relative; }
#tha-crossroad .base { width: 100%; }
#tha-crossroad .elem { margin-top: -40px; opacity: 0; position: absolute; top: 0; left: 0; }
#tha-crossroad.animate .elem { margin-top: 0; opacity: 1; }
#tha-crossroad .elem:nth-of-type(2) { left: 63%; top: 17%; transition: .4s; width: 6%; }
#tha-crossroad .elem:nth-of-type(3) { left: 32%; top: 33%; transition: .4s ease-in-out .1s; width: 4%; }
#tha-crossroad .elem:nth-of-type(4) { left: 10%; top: 8%; transition: .4s ease-in-out .2s; width: 13%; }
#tha-crossroad .elem:nth-of-type(5) { left: 67%; top: 49%; transition: .4s ease-in-out .3s; width: 8%; }
#tha-crossroad .elem:nth-of-type(6) { left: 71%; top: 12%; transition: .4s ease-in-out .4s; width: 8%; }
#tha-crossroad .elem:nth-of-type(7) { left: 71%; top: 28%; transition: .4s ease-in-out .5s; width: 5%; }
#tha-crossroad .elem:nth-of-type(8) { left: 29%; top: 55%; transition: .4s ease-in-out .6s; width: 8%; }
#tha-crossroad .elem:nth-of-type(9) { left: 59%; top: 13%; transition: .4s ease-in-out .7s; width: 2.25%; }
#tha-crossroad .elem:nth-of-type(10) { left: 84%; top: 11%; transition: .4s ease-in-out .8s; width: 8%; }
#tha-crossroad .elem:nth-of-type(11) { left: 72%; top: 60%; transition: .4s ease-in-out .9s; width: 8%; }

/* BCA - Measuring Characteristics */
#char-boxes > div { box-shadow: 0 1px 8px -3px #bbb; height: 250px; margin: 30px 2% 8px; padding: 26px 40px 0; text-align: center; width: 46%; }
#char-boxes > .col-md-12 { height: auto; margin-bottom: 54px; padding-bottom: 38px; width: 96%; }
#char-boxes > div img { height: 80px; margin-bottom: 2px; }

#rating-scale { padding: 30px 0 20px; }
#rating-scale .panel { display: inline-block; margin: 0 8px; position: relative; }
#rating-scale .panel span { font-size: 2.8em; font-weight: 700; padding: 0 12px;  }
#rating-scale .panel strong { font-size: 1.1em; left: 100%; margin: 0 24px 0 20px; position: absolute; text-align: left; top: 34%; width: 214px; }
#rating-scale .panel:first-of-type strong { left: auto; right: 100%; text-align: right; }

/* BCA - Comparing intersection types */
#intersection-types > div { box-shadow: 0 1px 8px -3px #bbb; height: 542px; margin: 30px 2% 8px; padding: 0; text-align: center; width: 46%; }
#intersection-types > div h3 { background-color: #023f5e; color: #fff; font-size: 1.6em; margin: 0; padding: 12px; text-transform: uppercase; }
#intersection-types > div > div { padding: 6px 20px 24px; }
#intersection-types > div > div > p { height: 74px; line-height: 1.3em; padding: 0 24px; }
#intersection-types > div > div img { height: 240px; margin-bottom: 26px; }
#intersection-types .row div { background-color: #eee; margin: 4px 1% 3px 2%; padding: 6px 10px; text-align: left; width: 47%; }
#intersection-types .row div h4 { color: #023f5e; display: inline-block; font-size: 1.3em; font-weight: 700; margin: 4px 0 0; }
#intersection-types .row div .panel { float: right; font-weight: 700; padding: 1px 8px; }
.other-intersections > div { background-color: #eee; height: 81%; margin: 24px; }
#intersection-types .other-intersections { height: auto; margin-bottom: 38px; width: 96%; }
#intersection-types .other-intersections > div { padding: 8px 20% 34px; }
#intersection-types .other-intersections > div img { height: 130px; margin: 26px 0 16px; }
#intersection-types .other-intersections > div p { color: #023f5e; height: auto; line-height: 1.4em; }
#intersection-types .other-intersections > div p:first-of-type { font-size: 1.1em; }

/* BCA - Calculating benefits/costs */
#benefit-costs > div { background-color: #cce5ea; box-shadow: 0 1px 8px -2px #ccc; margin: 68px 2% 30px; padding: 0 0 28px; position: relative; text-align: center; width: 46%; }
#benefit-costs > div:last-of-type { background-color: #ccd9df; }
#benefit-costs > div > img { bottom: 100%; height: 64px; left: 50%; margin-left: -32px; margin-bottom: -12px; position: absolute; }
#benefit-costs > div h3 { background-color: #007e98; color: #fff; margin: 0; padding: 8px; text-transform: uppercase; }
#benefit-costs > div:last-of-type h3 { background-color: #023f5e; }
#benefit-costs > div > div { background-color: #fff; box-shadow: 0 1px 8px -2px #888; height: 258px; margin: 28px auto 8px; padding: 20px; width: 90%; }
#benefit-costs > div > div img { height: 80px; }
#benefit-costs > div > div h4 { color: #023f5e; font-weight: 700; margin-top: 6px; }
#benefit-costs > div > div p { line-height: 1.3em; }

/* BCA - Choose scenario */
a[href*="explore-scenario"] { display: block; margin: 24px 0 36px; position: relative; }
a[href*="explore-scenario"] div { position: absolute; top: 0; left: 0; width: 100%; }
a[href*="explore-scenario"] > img { width: 100%; }
a[href*="explore-scenario"] div h3,
a[href*="explore-scenario"] div h4 { background-color: #007e98; color: #fff; font-weight: 700; margin: 0; padding: 11px 18px 9px; width: 100%; }
a[href*="explore-scenario"] div p { color: #fff; font-size: 1.6em; font-weight: 700; line-height: 1.2em; margin-top: 16px; padding-left: 3%; width: 54%; }
a[href*="explore-scenario"] div span { background-color: #fff; color: #000; display: inline-block; font-weight: 700; margin: 12px 3% 0; padding: 5px 14px; transition: background-color .2s; }
a[href*="explore-scenario"]:hover div span { background-color: #cce5ea; color: #023f5e;}
a[href*="explore-scenario"] div span i { margin-left: 6px; }
a.ind-dev div h3,
a.ind-dev div h4 { background-color: #712760; }
a.ind-dev:hover div span { background-color: #fae9f7; color: #712760; }

/* BCA - Explore scenario */
#explore-scenario .screen-body > div { display: none; }
#explore-scenario .screen-body > div.active { display: block; }
.explore-header { box-shadow: 0 1px 8px -2px #ccc; margin-top: 28px; }
.explore-header h3 { background-color: #007e98; color: #fff; padding: 10px 16px; }
.explore-header .row { padding: 28px 3%; }
.explore-header h4 { color: #007e98; font-weight: 700; margin-top: 6px; }
.explore-header h4 span { color: #023f5e; display: block; font-size: .65em; margin-bottom: 10px; text-transform: uppercase; }
.explore-header p { line-height: 1.2em; margin: 18px 0; }
.explore-header p span { color: #007e98; font-weight: 700; }
.explore-header p strong { text-decoration: underline; }
.explore-header .icon-pg { line-height: 1.3em; padding-left: 26px; position: relative; }
.explore-header .icon-pg img { left: 0; position: absolute; top: 2px; }
.explore-header .row:last-of-type { background-color: #E3F1F3; }
.explore-header .row .row { padding: 28px 0 0; }
.explore-header .row .row div { background-color: #BEDFE4; margin: 4px 1.5% 3px 0; padding: 6px 10px; text-align: left; width: 47%; }
.explore-header .row .row div h4 { color: #023f5e; display: inline-block; font-size: 1.3em; font-weight: 700; margin: 4px 0 0; }
.explore-header .row .row div .panel { float: right; font-weight: 700; padding: 1px 8px; }

.explore-options { text-align: center; }
.explore-options h3 { margin: 56px 0; }
.explore-options > div { box-shadow: 0 1px 8px -2px #ccc; margin: 0 2% 64px; padding: 0; position: relative; width: 46%; }
.explore-options h4 { background-color: #023f5e; color: #fff; font-size: 1.3em; font-weight: 700; margin: 0; padding: 8px 8px 8px 60px; text-transform: uppercase; }
.explore-options > div > div { cursor: pointer; transition: background-color .2s; }
.explore-options > div:hover > div:first-of-type { background-color: #E3F1F3; }
.explore-options > div > div > img { height: 240px; padding: 28px 14px; }
.explore-options a { color: #000; font-size: .85em; left: 18px; position: absolute; top: -35px; }
.explore-options a img { display: block; height: 70px; }

.explore-options > div > .explore-selection { cursor: auto; height: 100%; left: -100%; position: fixed; top: -100%; transition: left .0s ease-in-out .6s, top .6s; width: 100%; z-index: 10; }
.explore-options > div > .explore-selection.active { left: 0; top: 0; transition: left 0s, top .9s; }
.explore-selection > span { background-color: #000; background-color: rgba(0,0,0,.5); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.explore-selection > div { background-color: #fff; box-shadow: 0 0 18px 4px #333; max-height: 80%; left: 15%; overflow: auto; padding-bottom: 40px; position: absolute; top: 8%; width: 70%; }
.explore-selection > div .eselect-header { background-color: #007e98; color: #fff; font-size: 1.6em; height: 48px; line-height: 48px; margin-bottom: 20px; padding-left: 18px; position: relative; text-align: left; }
.explore-selection > div .eselect-header span { background-color: #00627E; cursor: pointer; font-size: 1.8em; height: 100%; padding: 0 14px; position: absolute; right: 0; transition: background-color .2s; }
.explore-selection > div .eselect-header span:hover { background-color: #023f5e; }
.explore-selection > div > img { height: 180px; margin: 24px 0 24px -200px; }
.explore-selection > div a { border-radius: 16px; left: 50%; margin-left: 100px; padding: 12px 0 16px; text-align: center; top: 106px; width: 100px; }
.explore-selection > div a span { display: block; line-height: 1.2em; margin-bottom: 8px;  }
.explore-selection > div a img { margin: 0 auto; }
.explore-selection > div a:hover { background-color: #eee; }
.explore-selection h5 { color: #023f5e; font-size: 1.2em; font-weight: 700; padding-left: 26px; text-align: left; text-transform: uppercase; }
.explore-selection > div > h5 { margin-left: 40px; }
.explore-selection > div > p { background-color: #eee; margin: 10px 40px 20px; padding: 18px 26px; text-align: left; }
.explore-selection > div .row { padding: 0 40px; }
.explore-selection > div .row > div { margin-right: 2%; padding: 0; width: 49%; }
.explore-selection > div .row > div:last-of-type { margin-right: 0; }
.explore-selection .col-md-6 > div { background-color: #eee; margin: 12px 0 0; padding: 12px 16px; text-align: left; }
.explore-selection .col-md-6 > div h6 { color: #023f5e; font-size: 1.2em; font-weight: 700; display: inline-block; margin: 4px 0; }
.explore-selection .col-md-6 > div .panel { border-top-width: 3px; float: right; font-weight: 700; padding: 1px 0; width: 30px; }
.explore-selection .col-md-6 > div .panel.good { border-top-color: #62bb46; }
.explore-selection .col-md-6 > div .panel.bad { border-top-color: #b53206; }
.explore-selection .col-md-6 > div .panel.meh { border-top-color: #777; }

#explore-ind-dev .explore-header h3 { background-color: #712760; }
#explore-ind-dev .explore-header h4,
#explore-ind-dev .explore-header p span { color: #712760; }
#explore-ind-dev .explore-options > div:hover > div:first-of-type { background-color: #F1EAEF; }
#explore-ind-dev .explore-header .row:last-of-type { background-color: #F1EAEF; }
#explore-ind-dev .explore-header .row .row div { background-color: #D8C3D2; }
#explore-ind-dev .explore-header .row .row div .panel { border-top-color: #712760; }
#explore-ind-dev .explore-selection > div .eselect-header { background-color: #712760; }
#explore-ind-dev .explore-selection > div .eselect-header span { background-color: #4c2858; }
#explore-ind-dev .explore-selection > div .eselect-header span:hover { background-color: #34183e; }

/* BCA - Results page */
#results .explore-header > div { background-color: #fff; margin-bottom: 50px; }
#results .explore-header > div h5 { color: #023f5e; font-size: 1em; font-weight: 700; margin-bottom: 10px; text-transform: uppercase;  }
#results .explore-header .col-md-6:first-of-type .panel { display: inline-block; padding: 8px 48px; }
#results .explore-header .col-md-6:last-of-type p { background-color: #eee; font-size: .9em; margin: 8px 0 0; padding: 12px 14px;  }
#results .explore-header a { margin-bottom: 0; text-align: center; }
#results .explore-header a span { background-color: #023f5e; border-radius: 24px; color: #fff; display: inline-block; font-size: .8em; padding: 9px 30px; transition: background-color .2s; }
#results .explore-header a i { margin-right: 4px; }
#results .explore-header a span:hover { background-color: #01293e; }
#results .explore-header .col-md-6:last-of-type img { display: block; height: 140px; margin: 0 auto; }
#results .explore-header .row .row { background-color: #fff; padding: 0; }
#results .explore-header .row .row > div { background-color: #fff; padding: 0; }
#results .explore-header .row .row > div > div { background-color: #eee; padding: 4px 8px; width: 100%; }
#results .explore-header .row .row div h6 { color: #023f5e; display: inline-block; font-size: .9em; font-weight: 700; margin: 6px 0; }
#results .explore-header .row .row div .panel { border-top-width: 3px; float: right; font-weight: 700; padding: 0 4px; width: 30px; } 
#results .explore-header .col-md-6 > div .panel.good { border-top-color: #62bb46; }
#results .explore-header .col-md-6 > div .panel.bad { border-top-color: #b53206; }
#results .explore-header .col-md-6 > div .panel.meh { border-top-color: #777; }
#results .screen-body { padding: 0; }
#results .screen-body .add-margins { margin: 36px 5% 56px; }
#results .screen-body > div { display: none; }
#results .screen-body > div.showing { display: block; }
#results .screen-body > div > div > a:last-of-type { clear: both; display: block; padding: 20px 0 70px; text-align: center; }
#results .screen-body > div > div > a:last-of-type span { background-color: #023f5e; border-radius: 24px; color: #fff; display: inline-block; font-size: 1.1em; padding: 9px 30px; }

.statewide-scale { background-color: #eaf8ff; clear: both; padding: 38px 0 42px 10%; }
.statewide-scale h3 { color: #023f5e; display: inline-block; font-size: 1.4em; margin-top: 0; margin-right: 5%; vertical-align: middle; width: 25%; }
.statewide-scale h5 { color: #023f5e; display: inline-block; font-size: 1.1em; font-weight: 700; margin-top: 0; margin-right: 5%; vertical-align: middle; width: 25%; }
.statewide-scale p { display: inline-block; margin: 0; vertical-align: middle; width: 50%; }
#minimum-maintenance .statewide-scale { background-color: #BFE2F4; }
#balanced-maintenance .statewide-scale { background-color: #EDD5E9; }
#balanced-maintenance .statewide-scale h5 { color: #712760; }
#proactive-maintenance .statewide-scale { background-color: #F9DABC; }
#proactive-maintenance .statewide-scale h5 { color: #e87200; }

#results div[id*="ind-dev"] .explore-header h3 { background-color: #712760; }
#results div[id*="ind-dev"] .explore-header h4 { color: #712760; } 
div[id*="ind-dev"] .statewide-scale { background-color: #F1EAEF; }
div[id*="ind-dev"] .statewide-scale h3 { color: #712760; }


/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium"  columns in Bootstrap */


@media screen and (min-width: 1425px) {
    body { font-size: 18px; }
    #hp-banner > div { font-size: 1.1em; }
    .circle-slider .overlays { font-size: .95em; padding-top: 40px; }
    .circle-slider .overlays p { line-height: 1.2em; }
    .circle-slider .toggle > span > span { font-size: 1.1em; }

    #game-tree .approach > div { height: 218px; }
    .results-footer ul > div { height: 246px; }

    a[href*="explore-scenario"] div p { width: 40%; }
    .explore-options > div > img { height: 300px; }
    .explore-selection > div .eselect-header { height: 60px; line-height: 60px; }
}

@media screen and (min-width: 1790px) {
    body { font-size: 20px; }
    #header { padding: 16px 0 22px; }
    #header img { height: 40px; }
    .container { padding: 80px 5% 80px; }
    .hp-container { padding: 0; }
    
    #hp-banner > div { font-size: .9em; width: 31%; }
    #hp-buttons > div { margin-top: -78px; width: 650px; }
    #char-boxes > div { height: 310px; }
    #intersection-types > div { height: 586px; }
    #hp-buttons h3 { height: 78px; line-height: 78px; }
    #hp-buttons h4 { width: 280px; }
    #hp-buttons p { height: 140px; margin-top: 22px; }
    .image-slider { margin-bottom: 60px; }
    
    #circle-area { margin: 80px 0; }
    .results .game-circle h3 { margin: 90px 0 30px; }
    .info-detail { padding-left: 100px; width: 440px; }
    .info-detail i { top: 8px; left: 8px; }
    .card-box h3 { padding: 18px 0; }
    .card-box div { height: 260px;  padding-top: 14px; }
    .screen-header { height: 94px; line-height: 94px; }
    .screen-header h2 { line-height: 94px; }
    .circle-slider { height: 840px; width: 840px; }
    .circle-slider .overlays > div { margin-top: -26%; }
    .circle-slider .toggle > span > span { font-size: 1em; height: 110px; width: 110px; }
    .circle-slider .toggle > span > span strong { margin-top: 30px; }
    .circle-slider .circles > span > span { top: -7.25%; }
    .at-end .panel { margin: 18px 1.5% 36px; }
    .circle-slider .circles > span.lockable > span { height: 26px; width: 26px; }
    .circle-slider .toggle > span > span { top: -8.75%; }
    .are-results .quality span { font-size: .9em; }
    .are-results .quality strong { font-size: 1.1em; }
    .game-circle .not-results-header-text h3 { margin-top: 40px; }
    .circle-slider .overlays > div > p,
    .circle-slider .overlays > div > div > p { margin: 24px 0; }
    .popup-box { bottom: 200px; right: -4%; width: 260px; }
    .overlays > div.showing .popup-box { bottom: 180px; }
    .statewide-scale { padding: 60px 0 60px 10%; }
    .value-token > span > span strong { font-size: 1.8em; margin-top: 28px; }
    .value-token > span { height: 120px; line-height: 1.6em; width: 120px; }
    .results-footer ul > div { height: 370px; margin-top: 60px; padding-top: 40px;  }
    .results-footer > a { padding: 80px 0; }
    .circle-slider .overlays > a h3 { line-height: 1.1em; }
    .circle-slider .overlays > a { padding-top: 190px; }
    #circle-area .quality { left: 60px; }
    .set-results img, .at-end a img { height: 30px; }
    .screen-body { padding: 80px 5% 100px; }
    .screen-footer a { height: 84px; line-height: 84px; }
    .circle-slider .overlays > a span { border-width: 60px 120px !important; margin: 70px 0 0 126px !important; }
    .game-circle .row:first-of-type .col-md-3 em { line-height: 1.2em; display: block; margin: 25px 0;  }

    .approach-box { margin: 60px 0;  }
    .approach-box .col-md-2 img { display: block; margin: 0 auto; width: 400px; }
    .approach-box .col-md-5 { padding: 40px 0; }
    .approach-box .col-md-5 a { margin: 44px auto 0; }
    .road-conditions { margin-top: 80px; padding: 90px 3%; }
    .road-conditions .col-md-2 > img { margin-bottom: 20px; }
}


@media screen and (max-width: 1140px) {
    #hp-banner h2 { font-size: 1.5em; }
    #hp-banner > div { font-size: .9em; }
    #hp-banner > div p { margin-top: 6px; }
    #hp-buttons > div { font-size: .85em; width: 420px; }
    #hp-buttons a img { height: 44px; }

    .info-detail { top: -56px; }
    #circle-area { margin-top: 80px; }
    .game-circle #circle-area { margin-top: 30px; }
    .game-circle .row:first-of-type> div { width: 100%; }
    .game-circle .row:first-of-type .col-md-3 { margin-top: 0; }
    .game-circle .total-cost { margin: 8px auto 0; width: 50%; }
    .at-end { margin: 0 auto; width: 60%; }
    .results .game-circle .row:first-of-type .col-md-3 { padding-bottom: 34px; }
    .approach-box h3 { font-size: 1.6em;}

    .card-box > div { height: 150px; }
    .card-box h3 { font-size: 1.3em; }
    .card-box p { font-size: .95em; line-height: 1.4em; }

    #game-tree .approach > div { font-size: .9em; }

    #rating-scale { font-size: .9em; }
    #intersection-types > div { height: 460px;  }
    #intersection-types > div h3 { font-size: 1.4em; }
    #intersection-types > div > div { padding: 4px 12px 14px; }
    #intersection-types > div > div img { height: 170px; }
    #intersection-types .row > div h4 { font-size: 1.1em; margin-top: 6px; }
    #intersection-types .other-intersections > div img { height: 74px; }
    #intersection-types .other-intersections > div p { line-height: 1.2em; }

    #benefit-costs > div > div p { font-size: .9em; }
    a[href*="explore-scenario"] { font-size: .9em; }
    a[href*="explore-scenario"] div p { width: 70%; }

    .explore-header h4 { font-size: 1.3em; }
    .explore-header .row .row div h4 { font-size: .9em; }
    .explore-options h4 { font-size: 1.2em; }
    .explore-options a { left: 12px; top: -26px; }
    .explore-options a img { height: 52px; }

    #results .explore-header .row .row > div > div { padding: 4px 5px 0; }
    #results .explore-header .row .row div h6 { font-size: .8em; margin: 6px 0; }
    #results .explore-header .row .row div .panel { font-size: .8em; width: 22px; }
}

@media screen and (max-width: 992px) {
    .vertical-center > div { margin: 0; }
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.7em; 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; line-height: 1.3em; margin-bottom: 30px; padding: 4px 12px 3px; max-width: 280px; }
    table tr { font-size: .8em; padding: 2px; }

    #hp-banner { overflow: hidden;  }
    #hp-banner img { left: -20%; max-width: 500%; position: relative; width: 120%; }
    #hp-banner > div { width: 32%; }
    #hp-buttons > div { margin: -52px 12px 0; width: 330px; }
    #hp-buttons h3 { height: 52px; line-height: 52px; margin-bottom: 24px; }
    #hp-buttons img { height: 120px; }
    #hp-buttons p { height: 64px; margin-bottom: 80px;  padding: 0 44px; }
    #hp-buttons a { padding: 14px 0; }
    #hp-buttons a img { height: 32px; }
    .new-sentence { padding: 22px 24px 12px; }

    #modal-window > span > span { font-size: 1.8em; padding: 8px; }
    #modal-window > div { font-size: .9em; height: 85%; padding: 8px 10px; width: 90%; }
    #modal-window.showing > div { margin-top: 34px; }

    .container { padding: 22px 4% 36px; }
    .hp-container { padding: 0; }
    #header h1 { font-size: 1.7em; }
    #header h1 img { height: 24px; }
    .screen-header { height: 48px; line-height: 48px; }
    .screen-header h2 { font-size: 1.3em; line-height: 48px; }
    .screen-header a, .screen-footer a { font-size: .9em; }
    .screen-body h3 { font-size: 1.3em; }
    .screen-body { padding: 18px 5% 40px; }
    .bca .screen-body { padding-bottom: 70px; }

    .card-box { float: left; width: 50%; }
    .card-box > div { height: 150px; }
    .card-box h3 { font-size: 1.1em; }
    .card-box p { font-size: .85em; line-height: 1.4em; }

    .approach-box { border-top-width: 18px; position: relative; }
    .approach-box .col-md-5 { width: 48%; }
    .approach-box .col-md-2 { float: left;  margin: 0 auto; width: 50%; }
    .approach-box .col-md-2 img { display: block; margin: 0 auto; width: 250px; }
    .approach-box .col-md-5:last-of-type { position: absolute; right: 0; top: 28px; }

    .image-slider { margin-bottom: 20px; }
    .image-slider > div > div > div { height: 32px; margin-left: -23px; margin-top: -16px;  width: 60px; }
    .image-slider > div > div > div:before,
    .image-slider > div > div > div:after { border-width: 8px; left: 0; margin-top: -8px; }
    .image-slider > div > div > div:after { left: auto; right: 0; }

    #circle-area { margin-top: 95px; margin-bottom: 34px; }
    .info-detail { margin-top: -18px; }
    .circle-slider { height: 500px; width: 500px; }
    .circle-slider .circles > span > span { height: 8px; margin-top: 10px; width: 8px; }
    .circle-slider .circles > span.lockable > span { height: 14px; margin-left: -11px; margin-top: 7px; width: 14px; }
    .circle-slider .overlays > div { font-size: .8em; }
    .circle-slider .toggle > span > span,
    .value-token > span { font-size: 1em; height: 74px; margin-left: -37px; margin-top: -18px; width: 74px; }
    .circle-slider .toggle > span > span strong { margin-top: 16px; } 
    .value-token > span > span strong { margin-top: 12px; }
    .circle-graphic > img { height: 160px; }
    .popup-box { bottom: 136px; }
    .overlays > div.showing .popup-box { bottom: 103px; width: 114px; }
    .panel p { line-height: 1.1em; }
    .info-detail { font-size: .9em; }
    #circle-area .quality { bottom: 140px; }
    #circle-area .overlays > div.showing .quality { bottom: 110px; }
    .game-circle .cycle-cost { font-size: 1.8em; }
    .circle-slider .overlays > a { padding-top: 100px; }
    .circle-slider .overlays > a h3 { font-size: 1.6em; line-height: 1.2em; }

    #game-tree > img { height: 130px; margin-bottom: -60px; }
    #game-tree .instruction { font-size: .95em; height: 130px; }
    #game-tree .approach { width: 30%; }
    #game-tree .approach > div { height: 204px; padding: 24px 16px 0; }
    #game-tree .approach > div a { font-size: .9em; }
    #game-tree .approach > div a img { height: 14px; }
    #game-tree .approach h4 { font-size: 1.2em; line-height: 1em; }
    #game-tree .approach p { margin: 8px 0 0; }
    #game-tree .approach > a { font-size: .85em; height: 48px; margin: -14px 0 0 -24px; width: 48px; }
    #game-tree .approach > a > span { line-height: .8em; }
    #game-tree .approach > a > span > span { border-width: 6px 11px; margin: 7px 0 0 14px; }
    .game-list > div { padding: 12px 14px 6px; }
    .game-list ul li { line-height: 1.15em; }
    .results-footer .game-list > div { height: 276px; padding: 20px 36px; }
    .results-footer .game-list li { line-height: 1.2em; margin: 16px 0; }
    .results-footer > a { padding: 30px 0 38px; }
    .results-footer > a span { font-size: .9em; }
    .results-footer .game-list > div { margin-top: 50px; }

    .road-conditions { padding: 19px 6px 14px; text-align: center; }
    .road-conditions h3 { font-size: 1.4em; margin-bottom: 15px; }
    .road-conditions .col-md-3 p { display: none; }
    .road-conditions .col-md-2 { display: inline-block; vertical-align: top; width: 23%; }
    .road-conditions .col-md-2 p { background-color: transparent; box-shadow: none; font-size: .8em; opacity: 1; padding: 0; position: static; }

    #char-boxes > .col-md-6 { float: left; margin: 26px 2% 4px; width: 46%; }
    #char-boxes > .col-md-12 { float: left; }
    #rating-scale { font-size: .85em; }
    #rating-scale .panel { margin: 0 4px; }
    #rating-scale .panel span { font-size: 2.2em; padding: 0 8px; }
    #rating-scale .panel strong { font-size: 1em; margin: 0 18px 0 14px; width: 140px; }

    #intersection-types > div { float: left; width: 46%; }
    #intersection-types > div h3 { font-size: 1.1em; }
    #intersection-types .row > div { float: left; padding: 8px 6px; }
    #intersection-types .row > div h4 { font-size: .9em; margin-top: 7px; }
    #intersection-types .row > div .panel { border-top-width: 2px; padding: 0 4px; }
    #intersection-types .other-intersections > div p:first-of-type { font-size: .95em; }

    #benefit-costs > div { float: left; }
    a[href*="explore-scenario"] { margin: 20px 0 10px; }
    a[href*="explore-scenario"] div p { font-size: 1.4em; margin-top: 10px; width: 96%; }
    a[href*="explore-scenario"] div span { font-size: .9em;margin-top: 6px; padding: 3px 10px; }

    .explore-header h3 { font-size: 1.3em; }
    .explore-header > .row { padding: 16px 1.5% 8px; }
    .explore-header > .row > div { float: left; width: 50%; }
    .explore-header h4 { font-size: 1.1em; }
    .explore-header h4 span { font-size: .75em; }
    .explore-header .row .row div { float: left; }
    .explore-header .row .row div h4 { margin-top: 8px; }
    .explore-options > div { float: left; margin-bottom: 44px; }
    .explore-options h4 { font-size: 1em; padding-left: 44px; }
    .explore-options a { left: 4px; top: -24px; }
    .explore-options a img { height: 44px; }
    .explore-options > div > img { height: 190px; padding: 16px 0; }

    .explore-selection > div .eselect-header { font-size: 1.4em;}
    .explore-selection > div > img { height: 150px; margin-left: -150px; }
    .explore-selection > div .row > div { float: left; }
    .explore-selection .col-md-6 > div { padding: 6px 9px; }
    .explore-selection .col-md-6 > div h6 { font-size: .9em; margin: 8px 0; }

    #results .explore-header .col-md-6:last-of-type h5 { margin: 10px 0 4px; }
    #results .explore-header .col-md-6:last-of-type p { font-size: .8em; padding: 9px 12px; }
    #results .explore-header .col-md-6:last-of-type img { height: 86px; padding-bottom: 8px; }
    #results .explore-header .col-md-6:first-of-type .panel { padding: 5px 32px; }
    #results .explore-header .row .row div { width: 97%; }

    #footer img { height: 72px; }
}

@media screen and (max-width: 745px) {
    #hp-banner img { left: -30%; max-width: 500%; position: relative; width: 130%; }
    #hp-banner > div { right: .05%; width: 36%; }
    #hp-buttons > div { margin: -42px 12px 0; width: 260px; }
    #hp-buttons h3 { font-size: 1.3em; height: 42px; line-height: 42px; margin-bottom: 24px; }
    #hp-buttons img { height: 100px; }
    #hp-buttons p { height: 56px; margin-bottom: 70px; padding: 0 26px; }
    #hp-buttons a { font-size: 1em; padding: 10px 0; }
    #hp-buttons a img { height: 22px; }

    #char-boxes > div { font-size: .9em; height: 208px; }
    #char-boxes > div img { height: 54px; margin-bottom: 6px; }
    #rating-scale .panel span { font-size: 1.6em; padding: 0 4px; }
    #rating-scale .panel strong { line-height: 1.1em; top: 12%; width: 80px; }

    #intersection-types > div h3 { height: 62px; }
    #intersection-types > div > div p { font-size: .8em; line-height: 1.2em; padding: 0 8px; }
    #intersection-types > div > div img { height: 110px; margin-bottom: 10px;  }
    #intersection-types .row > div { padding: 6px 8px; width: 100%; }
    #intersection-types .row > div h4 { font-size: .85em; margin-top: 0; }
    #intersection-types .row > div .panel { font-size: .9em; line-height: 1.2em; padding-top: 2px; }
    #intersection-types .other-intersections > div p { padding: 0 6px; }
    .other-intersections > div { height: 79%; margin: 14px; }

    #benefit-costs > div { margin: 40px 1% 20px; padding-bottom: 20px; width: 48%; }
    #benefit-costs > div > img { height: 48px; margin-left: -24px; }
    #benefit-costs > div > div { font-size: .9em; height: 242px; margin: 12px auto 4px; padding: 18px 12px; }
    #benefit-costs > div > div img { height: 52px; }

    a[href*="explore-scenario"] div h3 { padding: 7px 11px 6px; }
    a[href*="explore-scenario"] div p { font-size: 1.1em; }
    a[href*="explore-scenario"] div span { font-size: .8em; }

    .explore-header h3 { font-size: 1.2em; }
    .explore-header .row > div { width: 100%; }
    .explore-header .row:first-of-type .col-md-6:last-of-type img { display: block; height: 150px; margin: 0 auto; }
    .explore-header .row .row { padding: 0 0 14px; }
    .explore-header .row .row div { margin: 3px .5%; padding: 4px 6px; width: 49%; }
    .explore-options > div { float: none; margin: 0 auto 38px; width: 76%; }
    .explore-options > div > img { height: 160px; padding: 12px 0; }
    .explore-selection > div { left: 7%; top: 5%; width: 86%; }

    #results .screen-body .add-margins { margin: 24px 3%; }
    #results .screen-body > div > div > a:last-of-type span { font-size: .9em;}
}

@media screen and (max-width: 632px) {
    body { font-size: 14px; }
    .bca .screen-body { padding-bottom: 76px; }

    #circle-area { margin-top: 24px; }
    .info-detail { margin-top: -18px; }
    .circle-slider { height: 340px; width: 340px; }
    .circle-slider .circles > span > span { height: 6px; margin-top: 7px; width: 6px; }
    .circle-slider .circles > span.lockable > span { height: 10px; margin-left: -10px; margin-top: 5px;width: 10px; }
    .circle-slider .overlays h3 { font-size: 1.3em; }
    .circle-slider .overlays > div > p { margin: 8px 0 0; }
    .circle-slider .overlays > div { font-size: .75em; }
    .circle-slider .toggle > span > span,
    .value-token > span { font-size: .8em; height: 54px; margin-left: -27px; margin-top: -14px; width: 54px; }
    .circle-slider .toggle > span > span strong { margin-top: 11px; }
    .value-token > span > span strong { margin-top: 8px; }
    .circle-graphic > img { height: 90px; margin-top: 20px; }
    .panel { padding: 4px 8px 6px; }
    .popup-box { bottom: 70px; padding-left: 30px; right: -10px; width: 90px; }
    .overlays > div.showing .popup-box { bottom: 60px; }
    .popup-box img { top: 6px; width: 20px; }
    .info-detail { font-size: .9em; margin: 14px auto 22px; padding: 8px 10px 4px 38px; position: relative; top: 0; width: 80%; }
    .info-detail i { padding: 8px 10px; }
    .game-circle #circle-area { margin-bottom: 6px; }
    .game-circle .total-cost { width: 240px; }
    #circle-area .quality { bottom: 88px; padding: 6px 12px; }
    #circle-area .overlays > div.showing .quality { bottom: 68px; }
    .quality img { height: 12px; }
    .circle-slider .overlays > a { padding-top: 60px; }
    .circle-slider .overlays > a h3 { font-size: 1.4em; }
    .circle-slider .overlays > a span { border-width: 24px 40px; margin: 28px 0 0 40px; }
    .circle-slider .overlays > a:hover span { border-width: 28px 44px; margin: 26px 0 0 44px; }

    #hp-banner > img { left: -70%; width: 170%; }
    #hp-banner > div { width: 43%; top: 9%; }
    #hp-banner h2 { font-size: 1.3em;  }
    #hp-buttons { padding-bottom: 0; }
    #hp-buttons > div { margin-bottom: 68px; width: 80%; }
    #hp-buttons > div p { height: auto; }
    #hp-buttons img { height: 68px; }
    #hp-buttons h4 { margin: 12px auto 0; }

    #header { padding: 10px 14px; }
    #header h1 { font-size: 1.5em; line-height: 1.2em;}
    #header h1 img { height: 18px; margin: -1px 2px 0 3px; }
    .screen-header { height: auto; padding: 8px; }
    .screen-header h2 { font-size: 1.2em; line-height: 1.2em; margin: 0;  }
    .screen-header a { display: none; }
    .screen-body h3 { font-size: 1em; margin-top: 4px;}

    .card-box { border-bottom: 0; float: none; width: 100%; }
    .card-box > div {  height: auto; }
    .card-box p { margin: 12px 4%; }
    .image-slider { margin-top: 18px; }

    #game-tree .instruction { font-size: .85em; }
    #game-tree .instruction:after { height: 120%; }
    #game-tree .instruction > div { line-height: 1.3em; width: 80%; }
    #game-tree .approach > div { padding: 22px 10px 0; }
    #game-tree .approach > div p { line-height: 1.1em; }
    #game-tree .approach > div a { font-size: .9em; line-height: 1.1em;  }
    #game-tree .approach > div a img { height: 12px; }
    .game-list > div { padding: 10px 11px 1px; }
    .at-end { width: 78%; }

    .results .game-circle h3 { margin-top: 42px; }
    .results-footer > a { padding: 20px 30px 66px; }
    .results-footer > a span { line-height: 1.2em; }
    .results .screen-header .leave-results { display: none;  }
    .results .screen-footer .leave-results { display: block; height: 44px; left: 0; line-height: 44px; padding: 0 24px 0 12px;  right: auto;  }

    #char-boxes > div { height: auto; margin: 15px 2% !important; padding: 16px 24px 12px !important; width: 96% !important; }
    #char-boxes > div img { height: 42px; }
    #char-boxes > div p { margin-top: 10px; }
    #char-boxes { padding-bottom: 22px; }
    #rating-scale { padding: 18px 0 8px; }
    #rating-scale .panel { margin: 0 2px; }
    #rating-scale .panel span { font-size: 1.4em; padding: 0 2px; }
    #rating-scale .panel strong { margin: 0 10px 0 8px; top: 8%; }
    #benefit-costs > div > img { height: 38px; margin-bottom: -8px; margin-left: -19px; }

    #footer img { height: 58px; }

    a[href*="explore-scenario"] { overflow: hidden; }
    a[href*="explore-scenario"] > img { max-width: 8000%; width: 520px; }
    a[href*="explore-scenario"] div p { padding-left: 14px; }
    a[href*="explore-scenario"] div span { margin-left: 14px; padding: 2px 8px; }

    .explore-options h3 { font-size: 1.2em; margin-top: 44px; }
    .explore-selection > div > img { height: 80px; }
    .explore-selection > div a { margin-left: 40px; top: 74px; }
    .explore-selection > div .eselect-header { font-size: 1.1em; height: 36px; line-height: 36px; }
    .explore-selection > div > h5 { margin-left: 18px; }
    .explore-selection > div > p { margin: 8px 18px 10px; }
    .explore-selection > div .row { padding: 0 18px; }
    .explore-selection > div .row > div { width: 100%; }

    .approach-box { margin: 25px 0; }
    .approach-box h3 { font-size: 1.2em; margin-top: 0; }
    .approach-box > div { padding: 0 4%; position: static !important; width: 100% !important; }
    .approach-box .col-md-2 img { margin: 12px auto 14px;  width: 130px; }
    .approach-box .col-md-5 a { font-size: .85em; }
    .approach-box ul h4 { font-size: 1em; }
    .approach-box ul:last-of-type { margin-bottom: 0; }
}

@media screen and (max-width: 420px) {
    #hp-banner > img { left: -140%; width: 240%; }
    #hp-banner > div { width: 60%; }

    .screen-body { padding-bottom: 44px; }

    .panel { border-top-width: 4px; }
    
    .circle-slider { height: 270px; width: 270px; }
    .circle-slider .circles > span > span { margin-top: 5px; }
    .circle-slider .circles > span.lockable > span { margin-top: 3px; }
    .circle-slider .overlays { font-size: 1em; padding-top: 9px; }
    .circle-slider .overlays p { line-height: 1.2em; }
    .circle-slider .toggle > span > span { font-size: .8em; margin-top: -18px; }
    
    .circle-slider .overlays > a { padding-top: 50px; }
    .circle-slider .overlays > a h3 { font-size: 1.2em; }
    .circle-slider .overlays > a span { border-width: 24px 40px; margin: 20px 0 0 40px; }
    .circle-slider .overlays > a:hover span { border-width: 28px 44px; margin: 18px 0 0 44px; }

    .circle-graphic img { display: none; }
    .popup-box { margin: 10px auto 0; padding-left: 8px; position: relative; right: 0; top: 0; width: 64%; }
    .game-circle #circle-area { margin-top: -8px; }
    #circle-area .quality { position: static; margin: 8px auto 0; padding: 4px; width: 50%; }
    .game-circle .row:first-of-type { padding: 0; }
    .game-circle .row:first-of-type .col-md-3 h5 { font-size: .9em; }
    .game-circle .circle-slider .overlays h4 { font-size: 1.3em; }

    #game-tree .instruction { width: 46%; }
    #game-tree .instruction:first-of-type { margin-left: 3%; }
    #game-tree .approach { margin-bottom: 26px; width: 98%; }
    #game-tree .approach > div { height: auto; padding: 20px 22px 8px; }
    #game-tree .approach > div a { font-size: .9em; margin-top: 14px; position: static; }
    #game-tree .approach > div a img { height: 14px; }
    #game-tree .approach > a { padding-top: 2px; }
    #game-tree .approach ul { opacity: 1; }

    .road-conditions { padding-bottom: 50px; }
    .road-conditions .col-md-2 { width: 45%; }

    .screen-footer a { height: 38px; line-height: 38px; }
    .gaming .screen-footer a:first-of-type { display: block; }

    .results .game-circle #circle-area { margin-top: 30px; }
    .gaming.results .screen-footer a:first-of-type { display: none; }
    .results-footer .game-list { margin-top: 14px; }
    .results-footer .game-list > div { height: auto; margin: 0; width: 100%; }
    .results-footer .game-list > div:first-of-type { margin: 24px 0 0; }
    .game-circle .row:first-of-type > div { margin: 0 auto; width: 90%;  }
    .gaming #game-tree .approach ul { display: none !important; }

    #rating-scale .panel { margin-bottom: 30px; }
    #rating-scale .panel strong { margin-left: -40px; left: 50% !important; margin-top: 8px; right: auto !important; text-align: center !important; top: 100%;  }

    #intersection-types > div { height: auto; width: 96%; }
    #intersection-types > div h3 { height: auto; padding: 8px 14px; }
    #intersection-types .other-intersections > div { padding: 8px 7% 34px; }
    #intersection-types > div > div p { height: auto; margin: 10px 0 14px; }
    
    #benefit-costs > div { width: 98%; }
    #benefit-costs > div > div { height: auto; }
    
    .explore-options > div { float: none; margin: 0 auto 38px; width: 100%; }
    .explore-options > div > img { height: 140px; padding: 10px 0; }

    .explore-selection > div { max-height: 92%; top: 2%; }
    .explore-selection > div .eselect-header { font-size: .9em; padding-left: 10px;  }
    .explore-selection > div .eselect-header span { padding: 0 8px; }
    .explore-selection > div > img { height: 80px; margin: 14px 0 100px; }
    .explore-selection > div a { margin-left: -50px; top: 174px; }

    .statewide-scale { padding: 18px 34px 24px; }
    .statewide-scale h3,
    .statewide-scale h5 { margin-bottom: 8px; width: 100%; }
    .statewide-scale p { width: 94%; }
}

@media screen and (max-width: 320px) {
    #hp-banner > img { left: -180%; width: 280%; }
    #hp-banner > div { width: 78%; }
}