html, body { color: #333; overflow-x: hidden; font-family: "PT Sans", sans-serif; -webkit-font-smoothing: antialiased; }
.container {  overflow-x: hidden; 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: 0 14px 10px 6px; position: relative; top: -1px; vertical-align: top; width: 84%; }
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; }


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

/* TRANSLATOR */
#google_translate_element2 {display:none;}
#langaugeselectcont select {float:left; margin-top: 3.25%; margin-right: 10px; color: #000; }
#langaugeselectcont label {float:left;}
#langaugeselectcont option {color: #000;}

.button { background-color: #076072; border-radius: 100px; display: block; font-size: 1.3em; margin: 34px auto 0; padding: 14px 0; text-align: center; width: 300px; }
.button:hover { background-color: #01596b; }

#intro-screen { background: linear-gradient( #0d2d6c, #061f52 ); height: 100%; left: 0; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0; width: 100%; z-index: 20; }
#intro-screen > img { width: 100%; }
#intro-screen #langaugeselectcont select { float: none; margin-top: 0; }

#hover-box { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 14px -2px #333; left: 50%; margin-left: -30%; padding: 14px 0 28px; position: absolute; text-align: center; top: 70px; width: 60%; z-index: 1; }
#hover-box img { margin: 0 auto 14px; width: 70%; }
#hover-box h1 { color: #0d2d6c; font-size: 2.4em; font-weight: 700; margin: 0; text-transform: uppercase; }
#hover-box h1 span { left: -9999px; position: absolute; top: -9999px; }

#intro-content { background: linear-gradient( #0d2d6c, #061f52 ); color: #fff; padding-top: 120px; position: absolute; text-align: center; top: 200px; width: 100%; }
#intro-content > div { margin: 20px auto 0; width: 84%; text-align: left; }
#intro-content > div p,
#intro-content > div ul { font-size: 1.1em; }
#intro-content > div li { margin: 14px 0; }
#intro-content .larger { font-size: 1.7em; margin: 20px 16px 0; text-align: center; }
#intro-content p a { color: #e2d569; }
#intro-content label span { color: #e3434a; }
.reg-msg { color: #e3434a; font-size: 1.3em; font-weight: 700; }

.return-to-site { color: #e2d569; display: block; font-size: 1.1em; margin-bottom: 14px; }

#intro-screen.introduced { background: transparent; left: -120%; transition: background .3s, left 0s ease-in-out 1.3s; }
#intro-screen.introduced > img { margin-left: -4000px; margin-top: -800px; opacity: 0; transition: margin-left 0s ease-in-out 1.3s, opacity 2s, margin-top 1.3s; }
#intro-screen.introduced > div { left: 0; opacity: 0; top: 125%; transition: left 0s ease-in-out 1s, opacity 2s, top 1s; }

#registration-form { margin: 38px auto 0; max-width: 600px; width: 80%; }
#registration-form input,
#registration-form select { color: #000; }
#registration-form select { padding: 3px 14px;  }

#intro-content > #logos { background-color: #fff; margin: 42px auto; padding: 14px; text-align: center; width: 100%; }
#logos img { display: inline-block; height: 80px; margin: 0 20px; vertical-align: middle; width: auto; }
#logos img[src*="adot"] { height: 30px; }

.header { background-color: #497636; box-shadow: 0 0px 8px 0px #555; color: #fff; height: 47px; padding: 11px 16px 0; position: relative; z-index: 10; }
.header > img { display: inline-block; height: 20px; }
.header > p { border-left: 1px solid #fff; display: inline-block; font-size: 1.2em; font-weight: 700; letter-spacing: .04em; margin: 0 0 0 12px; padding-left: 16px; vertical-align: middle; }
#right-align { height: 100%; position: absolute; right: 8px; top: 0; }
#right-align > a > i { color: #fff; cursor: pointer; font-size: 1.6em; margin: 12px 12px 0 0; vertical-align: middle; }
#right-align .comment { background-color: #355327; color: #fff; display: inline-block; font-size: 1.2em; height: 100%; letter-spacing: .05em; line-height: 47px; margin-left: 10px; padding: 0 18px; vertical-align: middle; }
#right-align .comment i { font-size: 1em; margin-right: 5px; }
#right-align .comment:hover { background-color: #1b360e; }

html,body,.container { height: 100%; }
#map-area { height: 100%; overflow: hidden; padding-top: 47px; position: absolute; top: 0; width: 100%; }
#toggle-header { background-color: #efe7ab; height: 45px; padding: 10px 16px; position: relative; z-index: 5; }
#toggle-header a { color: #000; display: inline-block; font-size: 1.1em; margin-right: 46px; }
#toggle-header a i { background-color: #fff; border: 1px solid #000; color: #fff; font-size: .8em; padding: 2px 2px 1px 2px; transition: .15s; }
#toggle-header a:hover i { background-color: #eee; color: #eee; }
#toggle-header a.active i { color: #ed1f24; }
#toggle-header > * > span { background-color: #1d4583; display: inline-block; height: 9px; margin: 0 5px 0 3px; vertical-align: middle; width: 30px; }
#toggle-header a:nth-of-type(2) span { background-color: #b0ca43; border: 2px solid #000; border-radius: 50%; height: 15px; width: 15px; }
#toggle-header > span > span { background-color: #f0a067; }

#instructions { background-color: #efe7ab; border: 2px solid #497636; border-radius: 8px; box-shadow: 0 4px 8px -3px #333; left: 0; margin: 18px; padding: 4px 16px; position: absolute; top: 88px; width: 300px; z-index: 3; }
#instructions p { color: #497636; font-size: .9em; font-weight: 700; line-height: 1.2em; margin: 10px 0; }

#map { height: 100%; padding-top: 93px; position: absolute; top: 0; }
#map > div { cursor: grab; display: inline-block; height: 100%; left: 0; position: relative; top: 0; }
#map > div.grabbing { cursor: grabbing; }

#map > div > * { opacity: 0; visibility: hidden; transition: opacity .2s; }
#map > div > *.active { opacity: 1; visibility: visible; }

#map img { width: 100%; }
#map img[src*="map"] { height: 100%; opacity: 1; visibility: visible; width: auto; }

#map a[href*="improvements"] { left: 36%; position: absolute; height: 70.62359%; top: 20.52168%; z-index: 2; }
#map a[href*="improvements"] img { height: 100%; width: auto; }
#map a[href*="improvements"] img[src*="shield"] { height: auto; left: 35.5%; opacity: 1; position: absolute; top: 40%; width: 12%; z-index: 3; }

#map a[href*="improvements"] span,
.improvement-inst { background-color: #1d4583; border: 3px solid #fff; box-shadow: 0 2px 8px -2px #222; color: #fff; display: block; font-weight: 700; left: -8000px; margin-left: -120px; opacity: 0; padding: 8px 14px; position: absolute; text-align: center; top: 100px; transition: opacity .2s; visibility: visible !important; width: 240px; z-index: 8; }
#map a[href*="improvements"] span { position: absolute; left: -9999px; top: -9999px; }

.block { cursor: auto; height: 160%; left: -38%; position: absolute; top: 0; transform: rotate(-33deg); width: 100%; }
.block-right { left: 53%; top: -40%;}

/* CM - 8/25
#map a[href*="improvements"] { left: 35.9538219%; position: absolute; width: 18.24863%; top: 27.95055748%; z-index: 2; }
#map a[href*="improvements"] span { background-color: #1d4583; border: 3px solid #fff; box-shadow: 0 2px 8px -2px #222; color: #fff; font-weight: 700; right: -80px; opacity: 0; padding: 8px 14px; position: absolute; top: 100px; transition: opacity .2s; z-index: 2; }
#map a[href*="improvements"]:hover span { opacity: 1; } */

/* #map a[href*="improvements"] span:before,
#map a[href*="improvements"] span:after { border: 18px solid transparent; border-top-color: #1d4583; content: ""; left: 50%; margin-left: -18px; position: absolute; top: 100%; }
#map a[href*="improvements"] span:before { border-top-color: #fff; border-width: 20px; margin-left: -20px; margin-top: 2px; }
 */

#crossroads a { background-color: #b0ca43; border-radius: 50%; border: 4px solid #000; height: 28px; left: 37%; margin: -14px 0 0 -14px; position: absolute; top: 25.4%; transition: .2s; width: 28px; z-index: 3; }
#crossroads a span { background-color: #679a58; border: 3px solid #fff; bottom: 100%; box-shadow: 0 2px 8px -2px #222; color: #fff; font-weight: 700; left: -2000px; letter-spacing: .03em; line-height: 1.2em; margin-bottom: 38px; opacity: 0; padding: 8px 14px 10px; position: absolute; text-align: center; width: 200px; }
#crossroads a span:before,
#crossroads a span:after { border: 18px solid transparent; border-top-color: #679a58; content: ""; left: 50%; margin-left: -18px; position: absolute; top: 100%; }
#crossroads a span:before { border-top-color: #fff; border-width: 20px; margin-left: -20px; margin-top: 2px; }
#crossroads a:hover { background-color: #679a58; border: 5px solid #e2d569; }
#crossroads a:hover span { left: -91px; opacity: 1; margin-bottom: 29px; transition: left 0s, opacity .3s, margin .5s; }
#crossroads a:nth-of-type(2) { left: 38.35%; top: 31%; }
#crossroads a:nth-of-type(3) { left: 40.3%; top: 38.85%; }
#crossroads a:nth-of-type(4) { left: 41.8%; top: 45%; }
#crossroads a:nth-of-type(5) { left: 44.8%; top: 57.2%; }
#crossroads a:nth-of-type(6) { left: 45.9%; top: 61.7%; }
#crossroads a:nth-of-type(7) { left: 47%; top: 66.2%; }
#crossroads a:nth-of-type(8) { left: 48.15%; top: 70.8%; }
#crossroads a:nth-of-type(9) { left: 49.35%; top: 75.8%; }
#crossroads a:nth-of-type(10) { left: 51.8%; top: 86%; }

/* #crossroads a { background-color: #b0ca43; border-radius: 50%; border: 4px solid #000; height: 28px; left: 36.9%; margin: -14px 0 0 -14px; position: absolute; top: 30.3%; transition: .2s; width: 28px; z-index: 3; }
#crossroads a span { background-color: #679a58; border: 3px solid #fff; bottom: 100%; box-shadow: 0 2px 8px -2px #222; color: #fff; font-weight: 700; left: -2000px; letter-spacing: .03em; line-height: 1.2em; margin-bottom: 38px; opacity: 0; padding: 8px 14px 10px; position: absolute; text-align: center; width: 200px; }
#crossroads a span:before,
#crossroads a span:after { border: 18px solid transparent; border-top-color: #679a58; content: ""; left: 50%; margin-left: -18px; position: absolute; top: 100%; }
#crossroads a span:before { border-top-color: #fff; border-width: 20px; margin-left: -20px; margin-top: 2px; }
#crossroads a:hover { background-color: #679a58; border: 5px solid #e2d569; }
#crossroads a:hover span { left: -91px; opacity: 1; margin-bottom: 29px; transition: left 0s, opacity .3s, margin .5s; }
#crossroads a:nth-of-type(2) { left: 38.35%; top: 33.4%; }
#crossroads a:nth-of-type(3) { left: 40.35%; top: 37.45%; }
#crossroads a:nth-of-type(4) { left: 41.6%; top: 39.9%; }
#crossroads a:nth-of-type(5) { left: 44.3%; top: 45.4%; }
#crossroads a:nth-of-type(6) { left: 45.5%; top: 47.8%; }
#crossroads a:nth-of-type(7) { left: 46.8%; top: 50.4%; }
#crossroads a:nth-of-type(8) { left: 47.9%; top: 52.7%; }
#crossroads a:nth-of-type(9) { left: 49.3%; top: 55.5%; }
#crossroads a:nth-of-type(10) { left: 51.9%; top: 60.8%; } */

#info-window { background-color: #f2f2ee; box-shadow: 0 0 8px 0 #555; height: 100%; overflow: auto; padding-top: 47px; padding-left: 52px; position: absolute; right: -105%; top: 0; transition: .8s; width: 100%; z-index: 7; }
#info-window.showing { margin-right: 0; right: 0; }
#info-toggle { background-color: #02829c; color: #fff; cursor: pointer; font-size: 1.8em; height: 100%; right: -52px; padding-top: 10px; position: fixed; text-align: center; transition: background-color .2s, right .8s, margin-right .8s; width: 52px; z-index: 22; }
#info-toggle:hover { background-color: #01687d; }
#info-toggle .fa-arrow-left { display: block; }
#info-toggle span { display: block; font-size: .65em; line-height: 1em; margin-top: 12px; padding: 0 4px; }
#info-window.showing #info-toggle { margin-right: -52px; right: 100%; }

.info-panel { display: none; padding-top: 54px; }
.info-panel.showing { display: block; }
.info-panel h2 { background-color: #c3e3ea; color: #09265f; font-size: 2.4em; font-weight: 700; margin: 0; padding: 10px 20px; position: fixed; text-align: center; text-transform: uppercase; top: 46px; width: 100%; z-index: 23; }
.info-panel p { font-size: 1.1em; }
.info-panel > div > h3 { font-weight: 700; }
.info-panel > div { padding: 24px 4%; }

.alternatives { overflow: auto; width: 100%; }
.alternatives > div { border-collapse: separate; border-spacing: 18px; display: table; width: 100%; }
.alternatives h3 { font-size: 1.6em; height: 100px; margin: 0; text-align: center; }
.alternatives h3 span { background-color: #dae3a9; color: #4f505c; display: block; font-weight: 700; margin-bottom: 4px; padding: 4px; }
.alternatives h3 span.title { background-color: #fff; color: #02829c; font-size: .85em; margin: 0 auto; width: 84%; }
.alternatives > div > div { background-color: #fff; border: 1px solid #000; cursor: pointer; display: table-cell; margin: 0 1%; padding: 14px; transition: border .2s; }
.alternatives > div > div img { margin-top: 18px; width: 100%; }
.alternatives > div > div.highlight { border: 3px solid #f99d27; }
.alternatives > div > div.highlight:nth-of-type(2) { border: 3px solid #25408f; }
.alternatives > div > div.highlight:nth-of-type(3) { border: 3px solid #00829b; }
.alternatives > div > div.highlight:nth-of-type(4) { border: 3px solid #b2c945; }
.alternatives > div > div.highlight:nth-of-type(5) { border: 3px solid #803594; }
.alternatives > div > div.highlight:nth-of-type(6) { border: 3px solid #00a0d2; }
.alternatives > div > div.highlight:nth-of-type(7) { border: 3px solid #b62079; }

.alternatives.mainline { border: 1px solid #888; height: 400px; overflow: auto; padding: 18px; position: relative; width: 100%; }
.alternatives.mainline > div { border-spacing: 0; display: block; }
.alternatives.mainline h3 { font-size: 2.7em; font-weight: 700; height: auto; padding-top: 4px; }
.alternatives.mainline > div > div { border: 1px solid #000; display: block; margin: 0 0 24px; padding: 0; }
.alternatives.mainline > div > div p { background-color: #976791; color: #fff; font-size: 1.8em; font-weight: 700; margin: 0; padding: 2px 0 4px; text-align: center; }
.alternatives.mainline > div > div:nth-of-type(3) p { background-color: #388aa2; }
.alternatives.mainline > div > div:first-of-type p { background-color: #f1a068; color: #000; }
.alternatives.mainline > div > div:nth-of-type(2) { border-color: #000; }
.alternatives.mainline > div > div:nth-of-type(3) { border-color: #000; }
.alternatives.mainline > div > div.highlight { border-color: #f1a068; border-width: 5px; }
.alternatives.mainline > div > div.highlight:nth-of-type(2) { border-color: #976791; }
.alternatives.mainline > div > div.highlight:nth-of-type(3) { border-color: #388aa2; }

@keyframes hover {
    0% { top: 18px; }
    50% { top: 5px; }
    100% { top: 18px; }
}
@keyframes hover2 {
    0% { left: 18px; }
    50% { left: 5px; }
    100% { left: 18px; }
}
.alternatives .scroll-message,
.alternatives.mainline .scroll-message { animation-name: hover; animation-duration: 3s; animation-iteration-count: infinite; background-color: #976791; box-shadow: 0 0 14px -4px #000; right: 0; margin: 14px; padding: 5px 14px; position: absolute; top: 0; width: 250px; }
.alternatives .scroll-message p,
.alternatives.mainline .scroll-message p { background-color: transparent; }
.alternatives .scroll-message:before,
.alternatives.mainline .scroll-message:before,
.alternatives .scroll-message:after,
.alternatives.mainline .scroll-message:after { border: 25px solid transparent; content: ""; border-top-color: #976791; left: 50%; margin-left: -25px; position: absolute; top: 100%; }
.alternatives .scroll-message:before,
.alternatives.mainline .scroll-message:before { border-top-color: #000; margin-top: 1px; }

.alternatives { position: relative; }
.alternatives .scroll-message { display: none; }
.alternatives .scroll-message p { color: #fff; font-size: 1.6em; font-weight: 700; margin-top: 6px; text-align: center; }
.alternatives .scroll-message { animation-name: hover2; top: auto; right: auto; left: 0; bottom: 0; }
.alternatives .scroll-message:after,
.alternatives .scroll-message:before { border-top-color: transparent; border-left-color: #976791; top: 50%; margin-left: -1px; left: 100%; margin-top: -25px; }
.alternatives .scroll-message:before { border-left-color: #000; margin-top: -25px; margin-left: 0px; }
#casa-blanca-rd .scroll-message { display: block; }

.alternatives.mainline .scroll-message { left: auto; right: 0; bottom: auto; top: 0; }
.alternatives.mainline .scroll-message:after { margin-top: -1px; }

.cb-alternatives { border: 1px solid #666; margin-bottom: 10px; }
.cb-alternatives h3 { height: 146px; }
.cb-alternatives > div { width: 180%; }

.alt-legend { margin: 0 auto; overflow: auto; padding-bottom: 24px; width: 96%; }
.alt-legend div { float: left; font-size: 1.1em; margin: 0 0 6px; padding-right: 8px; width: 25%; }
.alt-legend div span { background-color: #02829c; border: 1px solid #4f505c; display: inline-block; height: 14px; margin-right: 4px; vertical-align: middle; width: 24px; }
.alt-legend .existing-edge span { background-color: transparent; height: 2px; border: 2px dashed #919497; }
.alt-legend .proposed-edge span { background-color: #414141; height: 6px; border: 0; }
.alt-legend .existing-bridge span { background-color: #e9e9e9; border-color: #c3c4c9; }
.alt-legend .bridge-widening span { background-color: #949599; border-color: #333; }
.alt-legend .new-bridge span { background-color: #96D4EE; }
.alt-legend .sidewalk span { background-color: #F89C28; }
.alt-legend .shoulder span { background-color: #1A6EAE; }
.alt-legend .bridge-rehab span { background-color: #82CAA7; }
.alt-legend .turning-lane span { background-color: #B14C81; }
.alt-legend div img { height: 28px; }
.alt-legend > p { clear: both; padding-top: 14px; }

.criteria-table { border: 1px solid #000; border-left: 0; }
.criteria-table th,
.criteria-table td { border: 1px solid #4f5050; text-align: center; transition: border .25s; }
.criteria-table thead th { background-color: #4f5050; border-color: #ccc; border-bottom-color: #4f5050; color: #fff; text-align: center; text-transform: center; }
.criteria-table tbody { border-bottom: 1px solid #000; }
.criteria-table tbody th:first-of-type,
.criteria-table tbody th[rowspan] + th { border-left: 0; padding-right: 9px !important; text-align: right; }
.criteria-table tbody th[rowspan] { border-bottom-color: #000; border-right: 0; color: #fff; text-align: center; }
.criteria-table tbody.table-blue tr { background-color: #e7e8f0; }
.criteria-table tbody.table-blue th[rowspan] { background-color: #4e5e93; }
.criteria-table tbody.table-green tr { background-color: #ecf2e9; }
.criteria-table tbody.table-green th[rowspan] { background-color: #699c59; }
.criteria-table tbody.table-purple tr { background-color: #efe8ef; }
.criteria-table tbody.table-purple th[rowspan] { background-color: #94558c; }
.criteria-table tbody.table-red tr { background-color: #efe3d9; }
.criteria-table tbody.table-red th[rowspan] { background-color: #84421d; }
.criteria-table tbody.table-yellow tr { background-color: #f5f1d0; }
.criteria-table tbody.table-yellow th[rowspan] { background-color: #e2d569; color: #000;  }
.criteria-table tbody.light-yellow tr { background-color: #faf7e6; }

.ct-body-box .criteria-table tbody tr:first-of-type th,
.ct-body-box .criteria-table tbody tr:first-of-type td { padding-top: 2px; }

.criteria-table th.highlight:nth-of-type(3),
.criteria-table td.highlight:nth-of-type(1) { border: 5px solid #f99d27; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(3) { border-top: 4px solid #f99d27; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(1) { border-bottom: 4px solid #f99d27; }
.criteria-table th.highlight:nth-of-type(4),
.criteria-table td.highlight:nth-of-type(2) { border: 5px solid #25408f; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(4) { border-top: 4px solid #25408f; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(2) { border-bottom: 4px solid #25408f; }
.criteria-table th.highlight:nth-of-type(5),
.criteria-table td.highlight:nth-of-type(3) { border: 4px solid #00829b; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(5) { border-top: 4px solid #00829b; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(3) { border-bottom: 4px solid #00829b; }
.criteria-table th.highlight:nth-of-type(6),
.criteria-table td.highlight:nth-of-type(4) { border: 5px solid #b2c945; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(6) { border-top: 4px solid #b2c945; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(4) { border-bottom: 4px solid #b2c945; }
.criteria-table th.highlight:nth-of-type(7),
.criteria-table td.highlight:nth-of-type(5) { border: 5px solid #803594; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(7) { border-top: 4px solid #803594; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(5) { border-bottom: 4px solid #803594; }
.criteria-table th.highlight:nth-of-type(8),
.criteria-table td.highlight:nth-of-type(6) { border: 5px solid #00a0d2; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(8) { border-top: 4px solid #00a0d2; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(6) { border-bottom: 4px solid #00a0d2; }
.criteria-table th.highlight:nth-of-type(9),
.criteria-table td.highlight:nth-of-type(7) { border: 5px solid #b62079; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table thead th.highlight:nth-of-type(9) { border-top: 4px solid #b62079; }
.criteria-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(7) { border-bottom: 4px solid #b62079; }

.criteria-table.mainline-table th.highlight:nth-of-type(4),
.criteria-table.mainline-table td.highlight:nth-of-type(2) { border: 5px solid #976791; border-width: 0 4px; border-bottom: 1px solid #4f5050; }
.criteria-table.mainline-table thead th.highlight:nth-of-type(4) { border-top: 4px solid #976791; }
.criteria-table.mainline-table tbody:last-of-type tr:last-of-type td.highlight:nth-of-type(2) { border-bottom: 4px solid #976791; }

.criteria-table thead { opacity: 0; }
.ct-header-box { height: 42px; overflow-x: hidden; overflow-y: scroll; position: relative; width: 100%; }
.ct-header thead { opacity: 1; }
.ct-header tbody { opacity: 0; }
.ct-body { margin-top: -29px; }
.ct-body-box { height: 280px; overflow: auto; position: relative; width: 100%; }

.criterion > span { left: -9999px; position: absolute; top: -9999px; }
.criterion { background-color: #fff; border: 1px solid #000; border-radius: 50%; display: inline-block; height: 20px; overflow: hidden; position: relative; vertical-align: middle; width: 20px; }
.criterion.negative { background-color: #000; border: 1px solid #fff; }
.criterion.neutral:before { background-color: #000; height: 200%; content: ""; left: -10%; position: absolute; vertical-align: top; top: -50%; width: 60%; }

.table-legend { float: right; margin-top: -20px; }
.table-legend div { display: inline-block; font-weight: 700; margin-left: 14px; vertical-align: middle; }

/* Comment Window */
.modal-window { height: 100%; left: 0; position: fixed; top: -100%; transition: top .85s; width: 100%; z-index: 25; }
.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; overflow: auto; padding: 0 0 40px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
.modal-window.showing > div { box-shadow: 4px 13px 28px 0 #111; margin-top: 60px; }

.refabbed > div { padding: 14px 2%; }
.refabbed p { font-size: 1.3em; }

#comment h2 { background-color: #c3e3ea; color: #09265f; font-weight: 700; margin: 0; padding: 10px 20px; text-align: center; }
#comment form { padding: 10px 4%; }
#comment form input[type="submit"] { background-color: #DD733E; border-radius: 8px; float: left; padding: 8px 24px; width: auto; }
#error { color: #84421d; }

.half { float: left; margin-right: 2%; width: 49%; }
.half:nth-of-type(even) { margin-right: 0; }
label[for="comment-altpref"],
label[for*="body"] { clear: both; padding-top: 6px; }
#preference-question div { display: block; }

#thank-you { background-color: #fff; border: 2px solid #02829c; border-radius: 8px; box-shadow: 3px 8px 24px 0 #444; left: -250%; margin-left: -160px; padding: 6px 28px; position: absolute; text-align: center; top: -264px; transition: left 0s ease-in-out .7s, top .7s; width: 320px; z-index: 30; }
#thank-you p { font-size: 1.1em; line-height: 1.3em; margin-top: 8px; }
#thank-you span { cursor: pointer; font-size: 1.4em; line-height: .6em; padding: 8px; position: absolute; right: 0; top: 0; }
#thank-you.showing { left: 50%; top: 84px; transition: left 0s, top .8s; }

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

@media screen and (min-width: 1840px) {
    #intro-content { font-size: 1.2em; padding-top: 160px; }
    #logos { margin: 60px 0; }
    #logos > img { height: 100px; }
}

@media screen and (min-width: 1555px) {
    .criteria-table { font-size: 1.2em; }
    .ct-header-box { height: 42px; }
    .ct-body { margin-top: -34px; }
    
    .ct-body-box .criteria-table tbody tr:first-of-type th,
    .ct-body-box .criteria-table tbody tr:first-of-type td { padding-top: 5px; }
}

@media screen and (max-width: 1260px) {
    .button { padding: 8px; }

    #hover-box { padding: 18px; }
    #intro-content { top: 150px; }

    #intro-screen h1 { font-size: 1.9em; }
    #intro-screen h2 { font-size: 1.6em; }

    .alternatives h3 { font-size: 1.3em; }
    .alternatives > div { border-spacing: 6px; }
    .alternatives > div > div { padding: 8px; }
    .alternatives.mainline { height: 280px; }
    .alternatives.mainline h3 { font-size: 2em; }
    .alternatives.mainline p { font-size: 1.4em; padding: 2px 0 3px;}

    #map > div { left: -10%; }
    #map a[href*="improvements"] span { right: -100px; top: 30px; }
    .alt-legend div { font-size: 1em; width: 33.33333%; }

    .info-panel > div > h3 { width: 60%; }

    #comment form input[type="submit"] { font-size: 1em; padding: 8px; width: 180px; }
}

@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.3em; 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: 1.1em; border-radius: 12px; margin-top: 26px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }

    #intro-screen h1 { font-size: 1.6em; }
    #intro-screen h2 { font-size: 1.5em; }
    #intro-content { padding-top: 100px; }
    #intro-content p { font-size: .9em; }
    #intro-content .larger { font-size: 1.5em; }
    #logos img { height: 70px; margin: 0 9px; }
    #logos img:first-of-type { height: 19px; }

    #langaugeselectcont select { margin: 8px; }

    .header { height: 38px; padding: 7px 11px 0; }
    .header > img { height: 15px; }
    .header > p { font-size: 1em; margin-left: 8px; padding-left: 12px; }
    #right-align .comment { font-size: 1em; line-height: 38px; padding: 0 14px; }
    #right-align > a > i { font-size: 1.3em; }
    #map-area { padding-top: 38px; }
    #info-window { padding-top: 38px; }
    #map { padding-top: 76px; width: 150%; }
    #map > div { left: -23%; }
    .improvement-inst { display: none;}
    #map a[href*="improvements"] span { border-width: 2px; bottom: 70px; font-size: .8em; left: -60px; margin-left: 0; opacity: 1 !important; padding: 4px 9px; right: auto; top: auto; }
    #crossroads a span { border-width: 1px; bottom: 50%; font-size: .7em; font-weight: 400; left: 100% !important; margin-bottom: 6px !important; margin-left: 5px; opacity: 1 !important; padding: 4px; width: 160px;  }
    #crossroads a span:before,
    #crossroads a span:after { display: none; }
    #instructions { display: none; }

    .header { height: 52px; padding: 1px 4px 0; text-align: center; }
    .header > img { height: 10px; }
    .header > p { font-size: .85em; margin-left: 4px; padding-left: 8px; }
    #right-align { display: block; height: auto; margin: 3px auto 0; position: static; text-align: center; width: 60%; }
    #right-align .comment { font-size: .8em; line-height: 1em; padding: 6px 10px; }
    #right-align > a > i { font-size: 1.1em; margin: 0 4px; }
    #map > div { left: -42%; }
    #map-area { padding-top: 50px; }
    #info-window { padding-top: 50px; }
    #langaugeselectcont select { float: none; display: inline-block; margin: 1px 3px; }
    .alternatives .scroll-message,
    .alternatives.mainline .scroll-message { width: 160px; }
    .alternatives .scroll-message p,
    .alternatives.mainline .scroll-message p { font-size: 1.1em; }
    .alternatives .scroll-message:before,
    .alternatives.mainline .scroll-message:before,
    .alternatives .scroll-message:after,
    .alternatives.mainline .scroll-message:after { border-width: 10px; margin-left: -10px; }
    .alternatives .scroll-message:before,
    .alternatives .scroll-message:after { margin-left: 0; margin-top: -10px; }
    .alternatives .scroll-message:after { margin-left: -1px; }

    #toggle-header { height: 38px; padding: 7px 8px; }
    #toggle-header p { font-size: .8em; width: 140px; }
    #toggle-header > a,
    #toggle-header > span { font-size: .9em; margin-left: 24px; }
    #toggle-header a:first-of-type { margin-left: 30px; }
    #toggle-header > a > span,
    #toggle-header > span > span { height: 6px; width: 20px; }
    #toggle-header a i { padding: 1px; }

    #info-window { margin-right: 40px; padding-left: 40px; }
    #info-toggle { font-size: 1.6em; width: 40px; }
    #info-window.showing #info-toggle { margin-right: -40px; }
    .info-panel { padding-top: 44px;  }
    .info-panel h2 {font-size: 1.6em; top: 50px; }
    .info-panel p { font-size: 1em; margin-top: 2px; }
    .info-panel > div { padding: 18px 3%; }

    .info-panel > div > h3 { width: 100%; }
    .table-legend { float: none; margin-top: 4px; }
    .table-legend div { font-size: .9em;  margin-left: 0; margin-right: 8px; }
    .criterion { height: 14px; width: 14px; }
    .ct-header-box { height: 39px; }
    .ct-body { margin-top: -25px; }

    .alt-legend div { font-size: 1em; }
    .alt-legend div img { height: 18px; }
    .alternatives.mainline { height: 210px; }
    .alternatives > div > div { padding: 4px; }
    .alternatives h3 span.title { font-size: .65em; margin: 0; padding: 0; width: 100%; }
    .cb-alternatives > div { width: 240%; }
    .cb-alternatives h3 { height: 78px; }

    .modal-window > span > span { font-size: 1.8em; padding: 8px; }
    .modal-window > div { font-size: .9em; height: 85%; width: 90%; }
    .modal-window.showing > div { margin-top: 34px; }
    #comment h2 { font-size: 1.3em; }
    #comment form { padding: 0 7%; }    
    .refabbed > div { padding: 8px 4%; }
    .refabbed a { word-wrap: break-word; }
    
    #thank-you { margin-left: -105px; padding: 8px 24px 5px; width: 210px; }
    #thank-you span { font-size: 1.8em; padding: 4px; }
    #thank-you p { font-size: 1em; line-height: 1.3em; }
}

@media screen and (max-width: 676px) {
    .button { font-size: .95em; margin-top: 18px; width: 180px; }

    #intro-screen > img { width: 200%; }
    #hover-box { margin-left: -44%; padding-top: 10px; top: 34px; width: 88%; }
    #hover-box img { margin-bottom: 6px;  width: 220px; }
    #intro-screen > div > p { font-size: .85em; line-height: 1.3em; margin: 16px auto; width: 90%; }
    #intro-screen h1 { font-size: 1.3em; }
    #intro-screen h2 { font-size: 1.2em; }
    #intro-content { padding-top: 72px; top: 90px; }
    
    .header { height: 52px; padding: 1px 4px 0; text-align: center; }
    .header > img { height: 10px; }
    .header > p { font-size: .85em; margin-left: 4px; padding-left: 8px; }
    #right-align { display: block; height: auto; margin: 3px auto 0; position: static; text-align: center; width: 100%; }
    #right-align .comment { font-size: .8em; line-height: 1em; margin-left: 0; padding: 4px 5px 4px 4px; }
    #right-align .comment i { margin-right: 2px; }
    #right-align > a > i { font-size: 1.1em; margin: 0 2px; }
    #langaugeselectcont select { font-size: .8em; margin-right: 0; }

    #toggle-header { height: auto; line-height: 1.1em; text-align: center; }
    #toggle-header > a,
    #toggle-header > span { display: inline-block; font-size: .8em; margin: 0 8px !important; }
    #toggle-header p { display: block; font-weight: 700; line-height: 1em; margin: 0 auto 3px; width: 80%; }
    #toggle-header > a > span,
    #toggle-header > span > span { margin: 0 2px; width: 14px; }
    #toggle-header a:nth-of-type(2) span { height: 12px; width: 12px; }

    #map > div { left: -42%; }
    #map-area { padding-top: 50px; }
    #info-window { padding-top: 50px; }

    #info-window { bottom: -104%; margin-right: 0; margin-bottom: 0; padding: 30px 0 34px; right: 0; top: auto; transition: bottom .8s, margin .8s, padding .3s ease-in-out .3s; }
    #info-window.showing { bottom: 0; margin-bottom: 0; padding-top: 52px; transition: bottom .8s, margin .8s, padding .4s ease-in-out .2s; }
    #info-toggle { font-size: 1.3em; height: 30px; margin-top: 0; margin-right: 0 !important; padding-top: 0; right: 0 !important; width: 100%; }
    #info-toggle i { font-size: .9em; }
    #info-toggle .fa-arrow-left { display: inline-block; vertical-align: middle; }
    #info-toggle span { display: inline-block; font-size: .75em; line-height: 1em; margin: 0; vertical-align: middle; }
    .info-panel { padding-top: 70px; }
    .info-panel h2 { font-size: 1.2em; opacity: 0; padding: 8px; top: 120%; transition: opacity .3s ease-in-out .2s; }
    .showing .info-panel h2 { opacity: 1; top: 80px; }
    .info-panel > div { padding: 18px 6%; }
    .info-panel p { font-size: .9em; margin-top: 0; }

    .alternatives { border: 1px solid #4f505c; }
    .alternatives > div { width: 860px; }
    .alternatives > div > div { padding: 0; }
    .alternatives h3 { font-size: 1em; }
    .alt-legend { margin-top: 6px;  padding-bottom: 0; }
    .alt-legend > div { font-size: .85em; margin: 1px 0; }
    .alt-legend > div span { height: 10px; width: 18px; }
    .alternatives > div > div { padding: 4px; }
    .alternatives h3 { height: 80px; }
    .alternatives h3 span.title { font-size: 1em; margin: 0; padding: 0; width: 100%; }
    .alternatives.mainline > div { width: 100%; }
    .alternatives.mainline > div > div { width: 96%; }
    .alternatives.mainline > div > div p { font-size: 1.1em;}
    .cb-alternatives h3 { font-size: .7em; }
    .alternatives .scroll-message { display: block; }

    .criteria-table thead th { font-size: .9em; line-height: 1.1em; padding: 8px 4px; }
    .criteria-table tbody th { font-size: .9em; line-height: 1.1em; padding: 4px; }
    .criteria-table tbody th:first-of-type,
    .criteria-table tbody th[rowspan] + th { font-size: .9em; }
    .ct-header-box { height: 42px; }
    .ct-body { margin-top: -32px; }

    #preference-question div { display: block; }
}

@media screen and (max-width: 500px) {
    .header { height: 64px; }
    .header > p { border: 0; display: block; font-size: .8em; margin: 0; padding: 0; }
    #map-area { padding-top: 62px; }
    #info-window { padding-top: 62px; }
    #info-window.showing { padding-top: 64px; }
    .half { width: 100%; }

    #map { width: 950px; }
    #map > div { left: -44%; }
    #map a[href*="improvements"] span {  bottom: -30px; font-size: .75em; font-weight: 400; left: 10%; right: auto; text-align: center; width: 180px;}
    
    .alt-legend > div { width: 50%; }
    .info-panel { padding-top: 84px; }
    .showing .info-panel h2 { top: 94px; }
    .criterion { border-width: 1px; height: 10px; width: 10px; }
    .criteria-table tbody th:first-of-type, 
    .criteria-table tbody th[rowspan] + th { padding-right: 3px !important; }
    .criteria-table thead th { font-size: .75em; }
    input[type="checkbox"] + label,
    input[type="radio"] + label { line-height: 1.2em; width: 77%;  }

    #crossroads a span { padding: 2px; }
}