html, body { color: #000; font-family: franklin-gothic-urw, sans-serif; font-size: 22px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
#content > .row > div { padding: 0 1.5% 12px; }
.vertical-center > div { float: none; display: inline-block; margin-left: -.5%; vertical-align: middle; }
.vertical-center > div:first-of-type { margin: 0; }

/* Links */
a { transition: background-color .2s, color .2s; }
a:hover,
a:focus { text-decoration: none; }
.button { background-color: #c47; border-radius: 14px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 4px 16px; transition: background-color .2s; }
.button:hover { background-color: #b16; color: #fff; }
.button:focus { color: #fff; }

#skiptocontent { background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 8px 0 #000; font-size: 1.3em; left: -9999px; padding: 3px 12px; position: absolute; top: -9999px; z-index: 150; }
#skiptocontent:focus { left: 8px; top: 8px; }
.ada-element { left: -9999px; position: absolute; }

.vc:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.vc > * { display: inline-block; vertical-align: middle; }

/* 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 { color: #58595b; line-height: 1.4em; margin: 22px 0 8px; }
ul, ol { margin: 16px 0 10px; }
li {  line-height: 1.4em; margin-bottom: 8px; }
img { max-width: 100%; }

/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #d9541f; 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: #bf4414; }

/* Tables */
table { border: 1px solid #333; margin: 14px 0; width: 100%; }
table tr th { border: 1px solid #333; padding: 2px 4px; }
table tr td { border: 1px solid #333; padding: 2px 4px; }

/* Quick Header */
.header { background-color: #c47; color: #fff; padding: 14px 20px; position: relative; }
.header h1 { display: inline-block; font-size: 1.3em; margin: 0; }
.header .nav { float: right; top: 0; right: 0; }
.header ul { margin: 0; padding: 0; }
.header li { display: inline-block; margin-left: 28px; }
.header li a { color: #fff; display: block; }
.header li a:hover { color: #ddd; }
#mobile-menu { background-color: transparent; border: 0; cursor: pointer; display: none; padding: 4px; }

/* Quick Footer */
.footer { background-color: #c47; color: #fff; padding: 14px 20px; }
.footer p { margin: 0; }

/* Sticky Footer (uncomment if needed; set padding-bottom of ".container" to logical height based on what ends up in the footer) */
/* html, body { height: 100%; }
.container { min-height: 100%; padding-bottom: 60px; position: relative; }
.footer { background-color: #c47; bottom: 0; position: absolute; width: 100%; } */

/* Modal Window */
.close-modal { display: none; }
.potential-modal { display: none; }
.modal-window { display: none; height: 100%; left: 0; opacity: 1; position: fixed; top: -100%; transition: 0; width: 100%; z-index: 5000; }
.modal-window.showing { top: 0; transition: top 1s; }
.modal-window > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: block; height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
.window-title { padding: 6px 0; width: 90%; }
.modal-window > div { background-color: #fff; border: 1px solid #333; bottom: 50px; box-shadow: 4px 13px 28px 0 #111; left: 12%; margin: 0; overflow: auto; padding: 0 3% 28px; position: absolute; top: 40px; width: 76%; }
.modal-window > div .close-modal { background: transparent; border: 0; color: #0096d6; font-size: 3em; line-height: .6em; position: absolute; right: 10px; top: 16px; }
.modal-window > div .close-modal span { left: -9999px; position: absolute; }
.modal-window :focus { border-radius: 2px; outline: 2px groove #ddd; }

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

.header { background: #fff; height: 84px; text-align: left; z-index: 15; }
.header h1 { left: -9999px; position: absolute; }
.header .nav { float: none; padding: 5px 2% 0; }
.header li { float: left; height: 40px; margin: 0 1.5% 0 0; width: 11%; }
.header li a { display: inline-block; height: 100%; position: relative; width: 100%; }
.header li a:after { background: #0096d6; border-radius: 7px; content: ""; height: 6px; left: 0; margin-top: 0; position: absolute; top: 50%; transition: .3s; width: 100%; }
.header li a:hover:after { height: 10px; margin-top: -2px; }
.header .response-required a:after { background: #f3901d; }
.header .visited a:after { background: #9fa617; }
.header a span { background: #0096d6; box-shadow: 0 3px 12px -6px #333; color: #fff; font-size: .65em; left: -9999px; line-height: 1.1em; margin-top: -14px; opacity: 0; padding: 6px 8px; position: absolute; text-align: center; text-transform: uppercase; top: 36px; transition: 0s; width: 180px; z-index: 15; }
.header .response-required a span { background: #f3901d; }
.header .visited a span { background: #9fa617; }
.header a:hover span,
.header a:focus span { left: 53%; margin-top: -2px; opacity: 1; transition: left 0s, margin-top .5s, opacity .3s; }
.header a:focus span { left: 53% !important; }
.header .icon-link { float: left; height: 50px; margin: 0 .5%; text-align: center; width: 4%; }
.header .icon-link:last-of-type { margin: 0; }
.header .icon-link a { display: inline-block; height: 100%; position: relative; }
.header .icon-link img { display: block; height: 90%; margin: 5% auto; transition: .2s ease-in-out .1s; }
.header .icon-link a:hover img { height: 100%; margin: 0 auto; transition: .6s; }
.header .icon-link a:hover span,
.header .icon-link a:focus span { left: 0 !important; margin-left: -140px !important; width: 140px; }

#progress-blocker { background: rgba(255,255,255,.4); height: 100%; position: absolute; right: 14%; width: 37%; }
#progress-blocker.iterated { width: 19%; }
#progress-blocked.fully-iterated { display: none; }

#contact form div { text-align: center; }
#contact textarea { background: #f2f2f2; border: 0; color: #000; height: 120px; margin-top: 10px; padding: 5px 11px; text-align: left; }
#contact input[type="submit"] { background: #0096d6; border-radius: 0; font-size: .9em; padding: 5px 44px; text-transform: uppercase; transition: .2s; }
#contact input[type="submit"]:hover { background: #027baf; }
#contact .wow-thanks { color: #000; display: none; margin-top: 40px; }

#mailing-list { color: #000; font-weight: 400; text-align: center; }
#mailing-list h3 { text-align: left; }
#mailing-list label { font-size: .85em; line-height: 1.1em;margin-bottom: 0; }
#mailing-list label[for="NAME"] { left: -9999px; position: absolute; }
#mailing-list input[type="text"] { background: #f2f2f2; border: 0; padding: 3px 10px; }
#mailing-list input[type="submit"] { background: #0096d6; border-radius: 0; font-size: .9em; font-weight: 700; padding: 5px 44px; text-transform: uppercase; transition: .2s; }
#mailing-list input[type="submit"]:hover { background: #027baf; }
#mlist-form .wow-thanks { display: none; }

body, html, .container { height: 100%; overflow: hidden; }
#content { height: 100%; position: absolute; top: 0; width: 100%; }
#content > div { height: 100%; padding-top: 84px; }
#slides { height: 100%; overflow: auto; position: relative; }

.slide { height: 100%; left: -100%; margin-top: -40px; opacity: 0; overflow: auto; padding-bottom: 64px; position: absolute; top: -9999px; transition: top 0s ease-in-out .6s, left 0s ease-in-out .6s, margin-top .4s ease-in-out .2s, opacity .6s ; width: 100%; }
.slide.current { display: block; left: 0; margin-top: 0; opacity: 1; top: 0; transition: top 0s ease-in-out .6s, left 0s ease-in-out .6s, margin-top .6s ease-in-out .6s, opacity .6s ease-in-out .6s; }
.slide > a { background: #0096d6; color: #fff; display: inline-block; float: left; font-size: .9em; font-weight: 700; padding: 1px 10px; left: -9999px; margin: 0 32px 20px; opacity: 0; position: relative; transition: background .2s, left 0s ease-in-out .3s, margin-top .3s, opacity .3s; z-index: 1; }
.slide > .forward-nav { float: right; left: auto; margin-top: -64px; right: 9999px; transition: right 0s ease-in-out .4s, margin-top .3s ease-in-out .1s, opacity .3s ease-in-out .1s; }
.slide > a > span { background: #0096d6; box-shadow: 2px 2px 8px -1px #333; color: #fff; font-size: .7em; height: 50px; left: -9999px; line-height: 1.1em; margin-top: -25px; margin-left: 16px; opacity: 0; padding: 0 14px; position: absolute; text-align: center; text-transform: uppercase; top: 50%; width: 200px; }
.slide > a > span:after { border: 25px solid transparent; border-width: 25px 16px; border-right-color: #0096d6; content: ""; position: absolute; right: 100%; }
.slide > a:hover { background: #0082d6; }
.slide > a:hover > span { left: 100%; opacity: 1; transition: left 0s, opacity .3s; }
.slide > .forward-nav > span { left: auto; margin-right: 16px; right: 9999px; }
.slide > .forward-nav > span:after { border-right-color: transparent; border-left-color: #0096d6; left: 100%; right: auto; }
.slide > .forward-nav:hover > span { left: auto; right: 100%; }
.slide.current > a { left: 0; margin-top: 0; opacity: 1; transition: left 0s ease-in-out .8s, margin-top .5s ease-in-out .8s, opacity .5s ease-in-out .8s; }
.slide.current > .forward-nav { left: 0; margin-top: 0; transition: right 0s ease-in-out .9s, margin-top .5s ease-in-out .9s, opacity .5s ease-in-out .9s; }

.slide > div { padding: 18px 6% 50px; }
h2 { font-size: 3em; font-weight: 700; line-height: 1em; text-transform: uppercase; }
h3 { color: #0096d6; font-weight: 700; }
small { display: block; font-weight: 400; line-height: 1.3em; }

@keyframes psst {
    0% { margin-bottom: 0px; }
    50% { margin-bottom: -12px; }
}
#scroll-for-more { animation-name: psst; animation-duration: 2s; animation-iteration-count: infinite; background: #fff; border-radius: 8px; bottom: 60px; display: none; font-size: .9em; line-height: 1em; padding: 8px; position: fixed; right: 42px; text-align: center; text-transform: uppercase; width: 80px; }
#scroll-for-more:after { border: 10px solid transparent; border-top-color: #000; content: ""; left: 50%; margin-left: -10px; margin-top: 4px; position: absolute; top: 100%; }

/* WELCOME */
#welcome { height: auto; min-height: 100%; text-align: center; }
#welcome .col-md-6 { width: 70%; }
#welcome .col-md-6:last-of-type { width: 30%; }
#welcome h2 { font-size: 3.2em; }
#welcome .intro { margin-top: 277px; text-align: left;}
#welcome .row h3 { font-size: 1.2em; margin-top: 22px; }
/* #welcome .row > div { padding: 0 4%; } */

#welcome .intro-head {display: inline-block; width: 100%; }
#welcome .intro-head h2 {display: inline-block; width: 75%; text-align: left; font-size: 2.2em; margin-top: 0;}
#welcome .intro-head img {display: inline-block; width: 24%; text-align: left; padding-bottom: 10px; }

#welcome-paragraphs p { float: left; margin: 24px 0 14px; padding: 10px 60px 10px 0; position: relative; width: 33.333%; }
#welcome-paragraphs p:after { background: #0095d5; content: ""; height: 100%; margin-right: 30px; position: absolute; right: 0; top: 0; width: 3px; }
#welcome-paragraphs p:last-of-type:after { display: none; }

/* TRANSLATOR */
#google_translate_element2 { display: none; }
#language-part { margin: 0; max-width: 100px; z-index: 1; font-family: 'franklin-gothic-urw', sans-serif; padding: 0; display: block;}
#langaugeselectcont{ width: 100%; font-family: 'franklin-gothic-urw', sans-serif; padding: 0; display: inline-block;}
#langaugeselectcont option {color: #333; font-size: 14px;}

#how-to-navigate { display: inline-block; background-color: #f2f2f2;  width: 100%; margin-top: 20px; text-align: left; box-shadow: 0 5px 8px -3px rgba(0,0,0,.6); padding: 0!important; }
#how-to-navigate .col-sm-2, #how-to-navigate .col-sm-10 {padding: 0!important;}
#how-to-navigate h3 {background-color: #7030A0; padding: 53px 15px; margin-top: 0!important; color: #fff; }
#how-to-navigate p {margin: 0 0 0 0!important; }

.blue-text { color: #0095d5; font-size: 1.4em; font-weight: 700; line-height: 1.2em; }
span.blue-text { display: block; }

#schedule { margin-top: 34px; }
#schedule img { width: 100%; }
#schedule ul { list-style-type: none; padding: 0; text-align: center; }
#schedule li { display: inline-block; padding: 0 18px; vertical-align: top; width: 22%; }
#schedule li img { display: none; }
#schedule li h3 { font-size: 1.2em; margin-top: 8px !important; position: relative; }
#schedule li h3:after { background: #0095d5; content: ""; height: 8px; left: 50%; margin: 8px 0 0 -50px; position: absolute; top: 100%; width: 100px; }
#schedule li:nth-of-type(2) h3 { color: #40205f; }
#schedule li:nth-of-type(2) h3:after { background: #40205f; }
#schedule li:nth-of-type(3) h3 { color: #6e8d3d; }
#schedule li:nth-of-type(3) h3:after { background: #6e8d3d; }
#schedule li:nth-of-type(4) h3 { color: #005395; }
#schedule li:nth-of-type(4) h3:after { background: #005395; }
#schedule li p { margin-top: 38px; }

.everyone { overflow: hidden; padding: 0 !important; position: absolute; width: 100%; }
.everyone + div { clear: both; margin-top: 30px; }
.everyone > img { width: 100%; }
.everyone > img[src*="everyone_bg"] { bottom: 0; left: 0; position: absolute; width: 100%; }
.everyone > img[src*="PersonWalking_"] { left: -20%; position: absolute; top: 6%; transition: .1s ease-in-out .5s; width: 18%; }
.everyone > img[src*="PersonWalkingDog"] { left: 122%; position: absolute; top: 8%; transition: .1s ease-in-out .5s; width: 18%; }
.everyone > img[src*="Bike"] { left: -38%; position: absolute; top: -8%; transition: .1s ease-in-out .5s; width: 19%; }
.everyone > img[src*="Wheelchair"] { left: -30%; position: absolute; top: -10%; transition: .1s ease-in-out .5s; width: 21%; }
.everyone > img[src*="truck"] { left: 127%; position: absolute; top: 29%; transition: .1s ease-in-out .5s; width: 10%; }
.everyone > img[src*="segway"] { left: -14%; position: absolute; top: 24%; transform: rotateY(180deg); transition: .1s ease-in-out .5s; width: 4%; }
.everyone > img[src*="bus."] { left: 95%; position: absolute; top: 15%; transition: .1s ease-in-out .5s; width: 20%; }
.everyone > img[src*="BusStop"] { left: 72%; position: absolute; top: -5%; width: 19%; }
.everyone > img[src*="train"] { left: -36%; position: absolute; top: 60%; transition: .1s ease-in-out .5s; width: 20%; }
.animate .everyone > img[src*="PersonWalking_"] { left: 32%; transition: left 3.4s ease-out; }
.animate .everyone > img[src*="PersonWalkingDog"] { left: 50%; transition: left 4.2s ease-out .4s; }
.animate .everyone > img[src*="Bike"] { left: 23%; transition: left 2.5s ease-out 2s; }
.animate .everyone > img[src*="Wheelchair"] { left: 40%; transition: left 3.1s ease-out 3s; }
.animate .everyone > img[src*="truck"] { left: 64%; transition: left 3s ease-out 2.2s; }
.animate .everyone > img[src*="train"] { left: -2%; transition: left 3s ease-out 3s; }
.animate .everyone > img[src*="segway"] { left: 21%; transition: left 2.2s ease-out 4s; }
.animate .everyone > img[src*="bus."] { left: 87%; transition: .6s ease-out; }

#everyone > a { bottom: 28px; color: #000; font-weight: 700; left: 60px; position: absolute; text-transform: uppercase; }
#everyone > a:last-of-type { bottom: 32px; left: auto; right: 66px;  }
#everyone > a img { height: 50px; }

#vision-paragraphs p { display: inline-block; margin-right: 60px; position: relative; vertical-align: top; width: 64%; }
#vision-paragraphs p img { float: left; margin-right: 24px; width: 120px; }
#vision-paragraphs p:last-of-type { width: 23%; }
#vision-paragraphs p:last-of-type:after { background: #0095d5; content: ""; height: 100%; margin-left: -34px; position: absolute; left: 0; top: 0; width: 3px; }

#video-area { border: 1px solid #aaa; margin: 18px auto; max-width: 900px; width: 100%; }

/* STATE OF SYSTEM */
#triangle-content { padding: 36px 5% 20px 11%; position: relative; }
#triangle-content > img { left: 0; position: absolute; top: 0; width: 7%; }

#system-graphic { font-size: .8em; height: 370px; margin-top: 20px; position: relative; }
#system-graphic > button:nth-of-type(1) span,
#system-graphic > button:nth-of-type(7) span { border: 7px solid #e7e7e7; border-radius: 50%; font-weight: 700; height: 80px; line-height: 70px; position: absolute; right: 46px; text-align: center; top: 48px; width: 80px; }
#system-graphic > button { background: transparent; border: 0; color: #696a6c; float: left; padding-left: 0; padding-right: 46px; position: relative; width: 14%; }
#system-graphic > button:nth-of-type(1) p { margin-top: 140px; width: 100%; }
#system-graphic > button:nth-of-type(7) span { left: 0; right: auto; top: 40px; }
#system-graphic > button:nth-of-type(7) p { margin-top: 136px; width: 100%; }

#system-graphic p { background: #f2f2f2; box-shadow: 0 3px 8px -2px #333; left: -100%; line-height: 1.3em; opacity: 0; padding: 16px 44px 16px 18px; position: absolute; width: 90%; z-index: 801; }
#system-graphic p.showing { left: 5%; opacity: 1; top: 54%; transition: left 0s, opacity .2s; }
#system-graphic p > span { color: #696a6c; font-weight: 700; }
#system-graphic p button { border: 0; font-size: 1.9em; position: absolute; right: 3px; top: 4px; }
#system-graphic p button span { left: -9999px; position: absolute; }

#system-graphic > p:after { border: 20px solid transparent; border-width: 24px 20px; border-bottom-color: #dbdada; bottom: 100%; content: ""; left: 1.5%; position: absolute; }
#system-graphic > p:nth-of-type(2):after { left: 14%; }
#system-graphic > p:nth-of-type(3):after { left: 30%; }
#system-graphic > p:nth-of-type(4):after { left: 45.5%; }
#system-graphic > p:nth-of-type(5):after { left: 61%; }
#system-graphic > p:nth-of-type(6):after { left: 77%; }

#system-graphic > p:nth-of-type(2) span { color: #0095d5; }
#system-graphic > p:nth-of-type(3) span { color: #d8531e; }
#system-graphic > p:nth-of-type(4) span { color: #9fa717; }
#system-graphic > p:nth-of-type(5) span { color: #fdb714; }
#system-graphic > p:nth-of-type(6) span { color: #4f2682; }
#system-graphic > button:after { background-image: url("../images/hex-boundary.png"); background-size: 100%; background-repeat: no-repeat; content: ""; height: 36px; position: absolute; right: 0; top: 64px; width: 46px; }
#system-graphic > button:nth-of-type(1):after { transform: rotate(180deg); }
#system-graphic > button:nth-of-type(3):after { transform: rotate(180deg); }
#system-graphic > button:nth-of-type(5):after { transform: rotate(180deg); }
#system-graphic > button:nth-of-type(7):after { display: none; }

#talked-listened > a:first-of-type { clear: both;  }

/* TALKED LISTENED */
blockquote { background-color: #7030a0; box-shadow: 0 3px 8px -3px #111; padding: 10px; color: #fff; border-left: none; margin: 25px 0; font-weight: bold; text-transform: uppercase; text-align: center;  }

#rollover-image { position: relative; }
#rollover-image > span { background: #fff; background: rgba(255,255,255,.7); left: 2%; padding: 4px 18px 8px; position: absolute; top: 3%; width: 500px; }
#rollover-image h2 { font-size: 1.34em; }
#rollover-image p { font-size: .8em; line-height: 1.1em; margin: 12px 0;  }
#rollover-image > div { left: 9%; position: absolute; top: 38%; }
#rollover-image > div:nth-of-type(2) { left: 64%; top: 7%; }
#rollover-image > div:nth-of-type(3) { left: 52%; top: 28%; }
#rollover-image > div:nth-of-type(4) { left: 35%; top: 42%; }
#rollover-image > div:nth-of-type(5) { left: 52%; top: 59%; }
#rollover-image > div:nth-of-type(6) { left: 80%; top: 62%; }
#rollover-image > div:nth-of-type(7) { left: 70%; top: 39%; }
#rollover-image > div:nth-of-type(8) { left: 42%; top: 7%; }
#rollover-image > div:nth-of-type(9) { left: 82%; top: 16%; }
#rollover-image > div:nth-of-type(10) { left: 22%; top: 63%; }
#rollover-image > div button { background: #fff; border: 0; border-radius: 50%; padding: 16px; }
#rollover-image > div button img { height: 54px;  }
#rollover-image > div button span { left: -9999px; position: absolute; }
#rollover-image > div > div { background: #fff; font-size: .85em; left: -9999px; margin-left: -150px; margin-top: 24px; opacity: 0; padding: 12px 16px; position: absolute; text-align: center; transition: left 0s ease-in-out .1s, opacity .1s; width: 300px; z-index: 1; }
#rollover-image > div:hover > div,
#rollover-image button:focus + div { left: 50%; opacity: 1; transition: left 0s, opacity .3s; }
#rollover-image > div:nth-of-type(4) > div { margin-left: -200px; width: 400px; }
#rollover-image > div:nth-of-type(5) > div { margin-left: -275px; width: 550px; }
#rollover-image > div > div:before { background: #0096d6; border-radius: 50%; content: ""; position: absolute; height: 30px; left: 50%; margin: -30px 0 0 -15px; width: 30px; }
#rollover-image > div > div:after { border: 8px solid transparent; border-width: 12px 7px; border-bottom-color: #fff; content: ""; position: absolute; left: 50%; margin: -22px 0 0 -7px; top: 0; }
#rollover-image > div > div h3 { font-size: 1.3em; margin-top: 4px; }
#rollover-image > div > div p { font-weight: 400; line-height: 1.2em; }
#rollover-image > div > div strong { color: #0096d6; }

#rollover-image > div.go-up > div { bottom: 100%; margin-bottom: 16px; }
#rollover-image > div.go-up > div:before { margin-top: -15px; top: 100%;}
#rollover-image > div.go-up > div:after { border-bottom-color: transparent; border-top-color: #fff; margin-top: -4px; top: 100%; }

/* TRANSPORTATION COST */
.info-icon { background: #0096d6; border: 2px solid #fff; border-radius: 50%; display: inline-block; height: 30px; line-height: 22px; text-align: center; width: 30px; }
.info-icon img { height: 16px; text-align: center; }

#transportation-cost #triangle-content { padding-bottom: 80px; }

/* Tabs */
.tabset { margin: 14px 0 28px; }
.tabset ul { display: none; }
.tabset.has-js ul { display: table; }
.tabset .tablist { list-style-type: none; margin: 0; padding: 0; }
.tabset .tab { background: #d4e8f0; border: 1px solid #fff; border-bottom: 0; color: #123986; cursor: pointer; display: table-cell; font-size: .9em; font-weight: bold; line-height: 1.1em; margin: 0; padding: 8px 14px; text-align: center; text-transform: uppercase; transition: background .2s; width: 14.28571%; }
.tabset .tab img { display: block; height: 50px; margin: 3px auto 6px; }
.tabset .tab:hover { background-color: #b5cdd7; }
.tabset .tab[aria-selected="true"] { background-color: #123986; color: #fff; }

.tabset .panel { border: 8px solid #123986; border-radius: 0; clear: both; margin: 0 0 18px; padding: 0 2% 16px; }
.tabset.has-js .panel { display: none; margin-bottom: 0; }
.tabset.has-js .panel[aria-hidden="false"] { display: block; }
#meeting-body .tabset .panel h3 { margin: 0; }
.tabset .panel .row > div { padding: 0; }

#mode-improvements { margin-bottom: 180px; position: relative; }
#mode-improvements > button { background: #fff; border: 0; color: #58595b; display: inline-block; font-size: .75em; font-weight: 700; text-align: left; vertical-align: top; width: 13%; }
#mode-improvements > button:nth-of-type(1) { width: 15%; }
#mode-improvements > button:nth-of-type(1) span { width: 55%; }
#mode-improvements > button:nth-of-type(2) { width: 15%; }
#mode-improvements > button:nth-of-type(3) { width: 13%; }
#mode-improvements > button img { display: inline-block; height: 30px; margin-right: 6px; vertical-align: top; }
#mode-improvements > button span { display: inline-block; line-height: 1.1em; width: 60%; }

#mode-improvements > div { background: #f2f2f2; box-shadow: 0 3px 8px -3px #333; left: -100%; opacity: 0; padding: 0px 3% 42px; position: absolute; top: -5000px; width: 100%; z-index: 801; }
#mode-improvements > div.showing { left: 0; opacity: 1; top: 0; transition: 0s, opacity .2s; }
#mode-improvements > div h3 { color: #58595b; font-size: 1.3em; margin-bottom: 22px; }
#mode-improvements > div img { height: 48px; margin-right: 4px; }
#mode-improvements > div > div { border-spacing: 25px 0; clear: both; display: table; margin-left: -25px; width: 100%; }
#mode-improvements > div > div > div { background: #fff; box-shadow: 0 3px 8px -3px #111; display: table-cell; float: none; font-size: .75em; padding: 0 2.5% 14px; width: 50%; }
#mode-improvements > div h4 { color: #7030a0; font-size: 1.1em; font-weight: 700; margin-top: 22px; text-transform: uppercase; }
#mode-improvements > div > div > div:last-of-type h4 { color: #d95427; }
#mode-improvements > div p { color: #58595b; font-weight: 700; margin: 8px 0 0; }
#mode-improvements > div ul { margin-top: 8px;  }
#mode-improvements > div li { margin: 0; }
#mode-improvements > div > button { border: 0; font-size: 1.8em; position: absolute; right: 10px; top: 0; }
#mode-improvements > div > button span { position: absolute; left: -9999px; }

.final-teal { background: #0095d5; box-shadow: 0 3px 8px -3px #333; color: #fff; padding: 10px 8px; font-weight: 700; text-transform: uppercase; }
.final-teal img { height: 34px; }
.final-teal a { color: #005596; font-weight: 700; text-decoration: underline; }

@keyframes i-pulse {
    0% { border-width: 6px; height: 160%; left: -30%; opacity: .2; top: -30%; width: 160%; }
    100% { border-width: 10px; height: 190%; left: -45%; opacity: .6; top: -45%; width: 190%; }
}

#denver-i-rollover { overflow: auto; }
#denver-i-rollover > div { float: left; position: relative; width: 13.4808%; }
#denver-i-rollover > div:nth-of-type(2) { width: 28.1201%; }
#denver-i-rollover > div:nth-of-type(3) { width: 19.2733%; }
#denver-i-rollover > div:nth-of-type(4) { width: 39.1259%; }
#denver-i-rollover > div .info-icon { cursor: pointer; left: 18%; position: absolute; top: 57%; }
#denver-i-rollover > div .info-icon.active:before { animation-name: i-pulse; animation-iteration-count: infinite; animation-duration: 1.2s; border: 4px solid #333; border-radius: 50%; content: ""; height: 160%; left: -30%; opacity: .4; position: absolute; top: -30%; width: 160%; }
#denver-i-rollover > div .info-icon:nth-of-type(2) { background: #004d70; left: 66%; top: 75%; }
#denver-i-rollover > div:nth-of-type(2) .info-icon { background: #9f1c26; cursor: pointer; left: 25%; top: 76%; }
#denver-i-rollover > div:nth-of-type(2) .info-icon:nth-of-type(2) { background: #9f1c26; left: 25%; top: 76%; }
#denver-i-rollover > div:nth-of-type(3) .info-icon { background: #402160; cursor: pointer; left: 62%; top: 59%; }
#denver-i-rollover > div:nth-of-type(3) .info-icon:nth-of-type(2) { background: #c9afe3; left: 76%; top: 75%; }
#denver-i-rollover > div:nth-of-type(4) .info-icon { background: #364712; cursor: pointer; left: 48%; top: 59%; }
#denver-i-rollover > div:nth-of-type(4) .info-icon:nth-of-type(2) { background: #6d8d24; left: 69%; top: 76%; }

#denver-i-rollover-text > div { display: none; font-size: .85em; text-align: center; width: 100%; }
#denver-i-rollover-text > div h3 { font-size: 1.2em; }
#denver-i-rollover-text > div strong { color: #0096d6; }
#denver-i-rollover-text > div.showing { display: block; }
#denver-i-rollover-text img { display: none; }
#denver-i-rollover-text ul { margin: 18px auto; text-align: left; width: 45%;}

#denver-i-rollover-text > div:nth-of-type(2) h3,
#denver-i-rollover-text > div:nth-of-type(2) strong { color: #9f1c26; }
#denver-i-rollover-text > div:nth-of-type(3) h3,
#denver-i-rollover-text > div:nth-of-type(3) strong { color: #402160; }
#denver-i-rollover-text > div:nth-of-type(4) h3,
#denver-i-rollover-text > div:nth-of-type(4) strong { color: #6d8d24; }

.yes-on-mobile { display: none; }
    

/* PRIORITIZATION */
#priority-survey { width: 100%; }
#priority-survey h4 { color: #d9531e; display: inline-block; font-size: .8em; font-weight: 700; padding: 0 16px; text-align: center; vertical-align: middle; width: 34%; }
#priority-survey h5 { background: #d9d9d9; color: #d9531e; display: inline-block; font-size: .95em; font-weight: 700; line-height: .9em; padding: 8px 0; position: relative; text-align: center; vertical-align: top; width: 63%; }
#priority-survey h5:after { border: 30px solid transparent; border-left-color: #d9d9d9; content: ""; left: 100%; margin-top: -30px; position: absolute; top: 50%; }
#priority-survey h5:first-of-type { left: 0; position: absolute; vertical-align: middle; width: 40%; }
#priority-survey h5:first-of-type:after { border-left-color: transparent; border-right-color: #d9d9d9; left: auto; right: 100%; }
#priority-survey .wow-thanks { display: none; }

#priority-survey h5 + p { display: none; }

#priority-form { position: relative; width: 100%; }
#priority-form > div { border-bottom: 1px solid #aaa; margin-bottom: 14px; padding-left: 40%; padding-bottom: 14px; position: relative; width: 100%; }
#priority-form > div:first-of-type,
#priority-form > div:nth-of-type(2),
#priority-form > div:last-of-type { border: 0; }
#priority-form > div > label { display: inline-block; font-size: .8em; text-align: center; text-transform: uppercase; vertical-align: middle; width: 35%; }
#priority-form > div .radio { display: inline-block; margin: 0; min-height: 44px; vertical-align: middle; width: 63%; }
#priority-form > div .radio input { display: inline-block; margin: -8px 0 0 0 ; top: 50%; vertical-align: middle; }
#priority-form > div .radio label { display: inline-block; font-size: .9em; line-height: 1.1em; margin: 0 !important; padding: 0 35px; vertical-align: middle; width: 96%; }
#priority-form > div .radio:first-of-type { left: 0; position: absolute; width: 40%; }
#priority-form > div .radio:first-of-type label { padding: 0 25px; text-align: right; }
#priority-form > div .radio:first-of-type input { right: 0px; }
#priority-form input[type="submit"] { font-size: .85em; margin: 38px auto; display: block;}

/* #prioritization .forward-nav { display: none; } */
#prioritization .wow-thanks { text-align: center; }

#priority-form > #neighborhood-question { padding-left: 0; text-align: center; }
#priority-form > #neighborhood-question select { display: block; margin: 0 auto; max-width: 100%; }

/* CIRCLE GRAPHS */

.circle-graph { margin-top: 28px; padding-bottom: 80px; position: relative; }
.circle-graph img { display: block; margin: 0 auto; width: 50%; }
.circle-graph > div { font-size: .7em; position: absolute; }
.circle-graph > div h4 { font-size: 1em; font-weight: 700; margin-top: 0; }
.circle-graph > span { color: #fff; font-size: 1.1em; font-weight: 700; position: absolute; }
.circle-graph > div p { line-height: 1.1em; margin: 3px 0; }
.circle-graph > div:nth-of-type(1) { color: #9f1c26; top: 0; width: 28%; }
.circle-graph > span:nth-of-type(1) { margin-right: 6%; right: 50%; top: 16%; }
.circle-graph > div:nth-of-type(2) { color: #095496; bottom: 80px; width: 26%; }
.circle-graph > span:nth-of-type(2) { margin-right: 12%; right: 50%; top: 42%; }
.circle-graph > div:nth-of-type(3) { color: #402160; top: 0; right: 0; width: 22%; }
.circle-graph > span:nth-of-type(3) { margin-left: 9%; left: 50%; top: 30%; }
.circle-graph > div:nth-of-type(4) { color: #f3901d; bottom: -20px; left: 40%; width: 50%; }
.circle-graph > span:nth-of-type(4) { margin-right: -2%; right: 50%; top: 60%; }

.funding-circle > div:nth-of-type(1) { color: #0096d6; left: 10%; top: 3%; width: 22%; }
.funding-circle > span:nth-of-type(1) { margin-right: 8%; right: 50%; top: 30%; }
.funding-circle > div:nth-of-type(2) { color: #d9531e; right: 5%; top: 3%; width: 22%; }
.funding-circle > span:nth-of-type(2) { margin-left: 8%; left: 50%; top: 30%; }
.funding-circle > div:nth-of-type(3) { color: #6d8d24; left: 0; bottom: 20%; top: auto; width: 100%; }
.funding-circle > span:nth-of-type(3) { margin-left: -4%; left: 50%; top: 61%; }
.funding-circle > div:nth-of-type(3) div { display: inline-block; position: relative; width: 30%; }
.funding-circle > div:nth-of-type(3) div:last-of-type { color: #364712; float: right; }
.funding-circle > div:nth-of-type(3) div span { background: #bbb; height: 5px; position: absolute; right: -44%; top: -40px; transform: rotate(-18deg); width: 60%; }
.funding-circle > div:nth-of-type(3) div span:before { border: 8px solid transparent; border-right-color: #bbb; content: ""; height: 0; position: absolute; right: 100%; top: 50%; margin-top: -8px; width: 0;  }
.funding-circle > div:nth-of-type(3) div:last-of-type span { right: auto; left: -52%; transform: rotate(198deg); }

#funding-circle-blurbs { font-size: .8em; }
#funding-circle-blurbs p { color: #0096d6; }
#funding-circle-blurbs p:nth-of-type(2) { color: #d9531e; }
#funding-circle-blurbs p:nth-of-type(3) { color: #6d8d24; }
#funding-circle-blurbs p:nth-of-type(4) { color: #364712; }

.circle-graph .mobile-circ { display: none; }

/* SPENDING PRIORITIES */
.underline { text-decoration: underline; }

#spending-survey ul { list-style-type: none; overflow: auto; padding: 0; }
#spending-survey ul li { color: #d9531e; float: left; font-weight: 700; text-align: center; width: 33.3333%; }
#spending-survey ul li:first-of-type { text-align: left; }

#spending-survey .totals { background: #f2f2f2; padding: 6px; text-align: center; }
#spending-survey .totals div { color: #58595b; display: inline-block; font-weight: 700; margin: 0 22px; }
#spending-survey .totals div:last-of-type { display: none;  }
#spending-survey .totals .budget { color: #6d8d24; }
#spending-survey .totals .balance { color: #c00000; }

#spending-form > div { background: #f2f2f2; padding: 18px 3%; }
#spending-form > div > label { color: #0096d6; display: inline-block; font-size: .7em; font-weight: 400; line-height: 1.1em; margin-right: 5%; vertical-align: middle; width: 30%; }
#spending-form > div > label h3 { font-size: 1.3em; margin: 0 0 1px; }
#spending-form > div .radio { display: inline-block; margin: 0 0 0 2%; position: relative; vertical-align: middle; width: 8%; }
#spending-form > div .radio input { display: inline-block; margin-top: 8px; vertical-align: top; }
#spending-form > div .radio label { display: inline-block; font-weight: 700; margin: 0 0 0 3px !important; min-height: 0; padding: 0; }

#spending-form > div .radio input { display: none; }
#spending-form > div .radio label:before { background: #fff; border: 1px solid #aaa; border-radius: 50%; content: ""; display: inline-block; height: 14px; margin-right: 8px; width: 14px; }
#spending-form > div .radio input:checked + label:before { background: #d9531e; }
#spending-form > div .radio span { background: #fff; bottom: 100%; box-shadow: 0 2px 4px -2px #333; cursor: pointer; font-size: .65em; left: -9999px; line-height: 1.1em; margin-bottom: 8px; opacity: 0; padding: 5px 8px; position: absolute; transition: opacity .1s, left 0s ease-in-out .1s; width: 120px; z-index: 1; }
#spending-form > div .radio span.showing { left: 0; opacity: 1; transition: left 0s, opacity .1s; }

#spending-form > div > p { display: none; }
#spending-form > div > p.showing { display: inline-block; font-size: .8em; width: 20%; vertical-align: middle; width: 30%; }
#spending-form > div:nth-of-type(2) > label { color: #d9531e; }
#spending-form > div:nth-of-type(2) > label h3 { color: #d9531e; }
#spending-form > div:nth-of-type(3) > label { color: #6d8d24; }
#spending-form > div:nth-of-type(3) > label h3 { color: #6d8d24; }
#spending-form > div:nth-of-type(4) > label { color: #364712; }
#spending-form > div:nth-of-type(4) > label h3 { color: #364712; }

/* #spending-priorities .forward-nav { display: none; } */
#spending-form input[type="submit"] { display: block; margin: 25px auto; } 
#spending-form .wow-thanks { display: none; text-align: center; }

/* DEMO SURVEY */
#demo-survey label { color: #d9531e; margin-top: 28px; }
#demo-survey .radio label { color: #000; }
#demo-survey input[type="radio"] { margin: 0;  position: static; }
#demo-survey input[type="submit"] { margin-top: 30px; }

#demo-survey .wow-thanks { display: none; }
                                                       
/* THANK YOU */
#thank-you { height: auto; min-height: 100%; padding-bottom: 410px; text-align: center; }
#thank-you h2 { font-size: 3.5em; line-height: .9em; margin: 0 auto; width: 80%; }
#thank-you h3 { color: #58595b; font-weight: 400; font-size: 1.1em; margin-bottom: 48px; }
#thank-you .col-md-4 { border-top: 10px solid #6d8d24; margin: 54px 3% 0; width: 27.33333%; }
#thank-you .col-md-4 p { margin-top: 16px; }
#thank-you .col-md-4 a { display: inline-block; border-radius: 50%; margin: 4px 3px 0; transition: box-shadow .2s; }
#thank-you .col-md-4 a span { left: -9999px; position: absolute; }
#thank-you .col-md-4 a img { height: 40px; max-width: 800%; width: 40px; }
#thank-you .col-md-4 a:hover { box-shadow: 0 0 14px -3px #666; }

#thank-you > a:after { display: none; }
#thank-you > a img { width: 40px; }
#thank-you > a span > span { width: 94%; }
#thank-you > a span:after { top: 0; }

.meeting-info h4 { color: #0096d6; font-size: 1.3em; font-weight: 700; line-height: 1.2em;margin-top: 12px; }
.meeting-info p { margin-top: 3px !important; }
.meeting-info a { box-shadow: none !important; }

#modal-screen { background: rgba(0,0,0,.3); cursor: pointer; height: 100%; left: -100%; opacity: 0; position: fixed; top: 0; width: 100%; z-index: 800; }
#modal-screen.active { left: 0; opacity: 1; transition: left 0s, opacity .2s; }

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

@media screen and (min-width: 1660px) {
    #welcome .intro { margin-top: 380px; }
    
    #system-graphic p.showing { top: 240px; }
    #system-graphic { height: 460px; }
}

@media screen and (min-width: 1880px) {
    body { font-size: 26px; }
    .header li a span { padding: 10px 14px; }
    .slide > a > span { height: 70px; margin-top: -35px; width: 240px; }
    .slide > a > span:after { border-width: 35px 16px; }

    #welcome { padding-bottom: 480px; }
    
    #system-graphic > button:after { top: 80px;  }
    #system-graphic span { height: 110px; width: 110px; }
    #system-graphic > button:nth-of-type(1) span { margin-top: 12px; }
    #system-graphic > button:nth-of-type(7) span { margin-top: 14px; }
    
    #system-graphic p.showing { top: 280px; }
    #system-graphic { height: 540px; }
}

@media screen and (min-width: 2220px) {
    #welcome .intro { margin-top: 480px; }
    
    #system-graphic p.showing { font-size: 1.2em;top: 380px; }
    #system-graphic { height: 740px; }
}

@media screen and (max-width: 1460px) {
    .circle-graph { padding-bottom: 120px; }
    .circle-graph img { width: 40%; }
    .circle-graph span { font-size: .9em; margin-top: -4%; }
    .circle-graph > span:nth-of-type(1) { margin-right: 4%; }
    .circle-graph > span:nth-of-type(2) { margin-right: 8%; top: 39%; }
    .circle-graph > span:nth-of-type(3) { margin-left: 6%;}
    .circle-graph > span:nth-of-type(4) { top: 54%; }
    .circle-graph > div:nth-of-type(2) { width: 31%; }
    .circle-graph > div:nth-of-type(4) { bottom: 0; left: 40%; width: 40%; }
    
    .funding-circle > div:nth-of-type(1) { width: 28%; }
    .funding-circle > div:nth-of-type(2) { width: 26%; }
    .funding-circle > span:nth-of-type(1) { margin-right: 6%; }
    .funding-circle > span:nth-of-type(2) { margin-left: 5%; top: 30%; }
    .funding-circle > span:nth-of-type(3) { margin-left: -3.5%; top: 54%; }
    .funding-circle > div:nth-of-type(3) div span { top: -10px; width: 40%; }
    .funding-circle > div:nth-of-type(3) { bottom: 32%; }  

    #mode-improvements { margin-bottom: 360px; }
}

@media screen and (max-width: 1330px) {
    .slide > div { padding: 18px 8% 50px; }
    h3 { font-size: 1.6em; }

    #welcome { padding-bottom: 260px; }
    #welcome h2 { font-size: 2.9em; }

    #everyone > a { bottom: 10px; font-size: .9em;left: 22px; }
    #everyone > a:last-of-type { bottom: 16px; right: 24px; }
    #everyone > a img { height: 36px; }

    #first-things-first .row > * { width: 100%; }
    #first-things-first .col-md-4 { margin-bottom: 26px; }

    #denver-i-rollover-text ul { width: 56%; }

    #your-input-matters > div { font-size: .85em; padding: 0 11% 10px 6%; }
    #ideal-future > div { font-size: .85em; padding: 0 11% 10px 6%; }

/*     .funding-circle > div:nth-of-type(3) { bottom: 35%; } */

    #what-do-you-value { font-size: .85em; }
    #drop-boxes > div > div { height: 64px; }
    #value-options div { height: 64px; }
    
    #system-graphic { font-size: .8em; }
    #system-graphic p { line-height: 1.2em; }
    #system-graphic > button { padding-right: 26px; }
    #system-graphic > button:nth-of-type(1) span,
    #system-graphic > button:nth-of-type(7) span{ border-width: 4px; font-size: .9em; height: 70px; line-height: 64px; right: 26px; top: 28px;width: 70px; }
    #system-graphic > button:after { top: 46px; width: 26px; }
    #system-graphic > button:nth-of-type(1):after { top: 28px; }
    #system-graphic > button:nth-of-type(3):after { top: 28px; }
    #system-graphic > button:nth-of-type(5):after { top: 28px; }
    #system-graphic > button:nth-of-type(5) { color: #d5980b; }
    #system-graphic > button:nth-of-type(1) p { margin-top: 108px; }
    #system-graphic > button:nth-of-type(7) p { margin-top: 104px; }
    #system-graphic > button span { top: 24px; }
    #system-graphic > button:nth-of-type(7) span { top: 20px; }

    #system-graphic p.showing { top: 160px; }

    #spending-survey ul li { font-size: .8em; padding-right: 14px; }
    #spending-form { font-size: .85em; }

    #then-and-now { font-size: .8em; text-align: center; }
    #then-and-now .col-md-6 { width: 45%; }

    #vision-paragraphs p { margin: 0 !important; padding-top: 24px; width: 100% !important; }
    #vision-paragraphs p:last-of-type { margin-top: 24px !important; }
    #vision-paragraphs p:last-of-type:after { height: 2px; margin: 0; width: 100%; }

    .circle-graph > div { font-size: .6em; }

    .survey > img { width: 14%; }
    .survey form { margin-left: 20%; }
    .survey:after { border-width: 35px; }

    #on-the-go h2 { font-size: 3.8em; }

    #rollover-image > span { font-size: .9em; left: 1%; top: 1%; width: 440px; }
    #rollover-image > span p { margin: 8px 0; }
    #rollover-image > div button img { height: 38px; }
    #rollover-image > div > div { font-size: .8em; margin-left: -110px; padding: 10px 12px; width: 220px; }

    #thank-you { padding-bottom: 280px; }
    #thank-you h2 { font-size: 2.8em; }
    #thank-you h3 { font-size: 1.1em; }
    #thank-you .col-md-4 p { font-size: .9em; line-height: 1.3em;}
    .tabset .tab { font-size: .85em; }
    .tabset .tab img { height: 34px; }
    .tabset .panel { font-size: .85em; }
    .tabset .panel h4:before { top: 0; }
}

@media screen and (max-width: 1150px) {
    .circle-graph { padding-bottom: 14px; }
    .circle-graph > div { font-size: .75em; position: static; width: 100% !important; }
    .circle-graph > img { display: none; margin-bottom: 24px; width: 170px; }
    .circle-graph .mobile-circ { display: block; }
    .circle-graph > span { color: #9f1c26; display: block; font-size: .8em; margin: 0 0 18px 0 !important; position: static; }
    .circle-graph > span:nth-of-type(2) { color: #095496; }
    .circle-graph > span:nth-of-type(3) { color: #402160; }
    .circle-graph > span:nth-of-type(4) { color: #f3901d; }
    .funding-circle > span:nth-of-type(1) { color: #0096d6; }
    .funding-circle > span:nth-of-type(2) { color: #d9531e; }
    .funding-circle > span:nth-of-type(3) { color: #6d8d24; }
    .funding-circle > div:nth-of-type(3) div:last-of-type { color: #6d8d24; }
    .funding-circle > div:nth-of-type(3) div { position: static; margin-bottom: 8px; width: 100%; }
    .funding-circle > div:nth-of-type(3) div span { display: none; }
    
    #funding-circle-blurbs p:nth-of-type(4) { color: #6d8d24; }

    #how-to-navigate .col-sm-2 { float: none; height: auto; text-align: center; width: 100%;  }
    #how-to-navigate h3 { padding: 8px 10px;  }
    #how-invest .no-on-mobile { display: none; }

    #mode-improvements { margin-bottom: 28px; }
    #mode-improvements button { display: none; }
    #mode-improvements > div h3 { font-size: 1.1em; }
    #mode-improvements > div h3 img { height: 30px; }
    #mode-improvements > div { margin: 22px 0; opacity: 1; padding: 10px 4% 16px; position: static; }
    #mode-improvements > img { display: none; }
    #mode-improvements > div > div { display: block; margin: 0; }
    #mode-improvements > div > div > div { display: block; margin-bottom: 14px;  padding: 1px 3% 8px; width: 100%; }
}

@media screen and (max-width: 1090px) {
    @keyframes i-pulse {
        0% { border-width: 3px; height: 120%; left: -10%; opacity: .2; top: -10%; width: 120%; }
        100% { border-width: 5px; height: 140%; left: -20%; opacity: .6; top: -20%; width: 140%; }
    }

    #welcome .intro { margin-top: 240px; }
    
    #rollover-image { overflow-x: hidden; padding-bottom: 80px !important; }
    #rollover-image > span { display: block; left: 0; margin: 18px 5% 36px; position: relative; width: 90%; }
    #rollover-image > h2 { left: 0; padding: 20px 30px 14px; position: relative; text-align: center; width: 100%; }
    #rollover-image > img { left: -9999px; position: fixed; top: 0; width: 180%; max-width: 800%; }
    .current #rollover-image > img { left: -40%; }
    #rollover-image > div { left: 0 !important; position: relative; top: 0 !important; }
    #rollover-image > div > div { border: 2px solid #0096d6; box-shadow: 0 8px 14px -3px #333; bottom: auto !important; left: 0 !important; margin: 2px 10% 20px !important; opacity: 1; padding: 8px 18px; position: relative; width: 80% !important; }
    #rollover-image > div > div p { margin: 0; }
    #rollover-image > div > div:before,
    #rollover-image > div > div:after { display: none; }
    #rollover-image > div button { display: block; margin: 0 auto 9px; }
    #rollover-image > div button img { height: 40px; width: auto; }

    .tabset.has-js ul { display: block; }
    .tabset .tab { display: inline-block; margin-bottom: 4px; width: auto; }
}

@media screen and (max-width: 992px) {
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.4em; margin: 12px 0 0; }
    h3 { font-size: 1.1em; 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; }
    small { font-size: .75em; line-height: 1.4em; margin-top: 5px; }
    p, li { font-size: .9em; line-height: 1.3em; }
    .button { font-size: .9em; border-radius: 12px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }
    .vertical-center > div { margin: 0; }
    
    .tabset .tab { font-size: .75em; line-height: 1.1em; padding: 8px; }
    .tabset .tab img { height: 24px; }

    /* Quick Mobile Menu */
    #mobile-menu { color: #005596; display: inline-block; float: left; }
    .header { height: 52px; padding: 6px 8px; }
    .header .icon-link { display: inline-block; float: none; height: 32px; width: auto; }
    .header .icon-link a:after { display: none; }
    .header .icon-link a img { display: inline-block; height: 100%; margin: 0 !important; }
    .header .icon-link span,
    .header .icon-link a:hover span { display: inline-block; font-size: .6em; left: 0 !important; opacity: 1 !important; margin: 0 !important; position: static; right: 0 !important; vertical-align: middle; width: 74px; }
    .header .icon-link a[href*="mailing-list"] span { margin-left: 4px !important; width: 92px !important; }
    .header .nav { height: 36px; padding: 2px; text-align: right; }
    .header .nav ul { background-color: #005596; display: none; opacity: 0; padding: 8px 10px; position: absolute; right: 110%; text-align: left; top: 52px; width: 100%; z-index: 1; }
    .menu-opened .header .nav ul { opacity: 1; right: 0; transition: right 0s, opacity .2s; }
    .header .nav li { display: inline-block; float: none; margin: 0; padding: 4px; text-align: center; width: auto; }
    .header .nav li a { margin: 0 !important; }
    .header li a:after { display: none; }
    .header .nav li a span { display: block; left: 0 !important; margin: 0 !important; opacity: 1 !important; position: static; width: auto; }
    
    #content > div { padding-top: 52px; }
    .slide > a { font-size: .8em; }
    .slide > a span { display: none; }
    .slide.current > a { left: 18px; }
    .slide.current > .forward-nav { right: 25px; }
    .slide > a:after { border-width: 6px 10px; margin-top: -6px; margin-left: -16px; }
    .slide > .forward-nav:after { margin-left: -4px; }

    #scroll-for-more { bottom: 38px; font-size: .75em; right: 26px; width: 76px; }

    .modal-window > div { left: 10% !important; height: 90% !important; top: 5% !important; width: 80% !important; }
    .window-title { font-size: 1em; width: 80%; }
    #contact h3 { text-align: left; }
    #mailing-list > div { font-size: .9em;}
    #mailing-list input[type="submit"] { font-size: .8em; padding: 4px 20px; }

    #progress-blocker { display: none; }
    .block-1 { display: none !important; }
    .block-2 { display: none !important; }
    .iterated .block-1 { display: block !important; }
    .fully-iterated .block-2 { display: block !important; }

    .final-teal img { height: 20px;}

    #welcome { padding-bottom: 230px; }
    #welcome .row > div:first-of-type:after { display: none; }
    #welcome h2 { font-size: 2.6em; }
    #welcome > div:first-of-type > img { height: 36px; width: auto; }
    #welcome .col-md-6 { width: 100% !important; }

    #welcome .intro-head h2 { display: block; font-size: 1.5em; height: auto; margin-bottom: 12px; text-align: center; width: 100%; }
    #timeline-image { border: 1px solid #aaa; margin-bottom: 40px;  overflow: auto; width: 100%; }
    #timeline-image img { max-width: 8000%; width: 1000px; }

    #welcome-paragraphs p { margin-bottom: 2px; padding-right: 0; width: 100%; }
    #welcome-paragraphs p:after { height: 2px; margin: 0; margin-top: 12px; top: 100%; width: 100%; }
    .no-on-mobile { display: none; }
    .yes-on-mobile { display: inline-block; }
    
    #schedule img { display: none; }
    #schedule li { margin-bottom: 28px; padding: 0; width: 100%; }
    #schedule li h3:after { height: 4px;}
    #schedule li img { display: block; margin: 0 auto; max-width: 260px; width: 100%; }

    #system-graphic { font-size: .9em; height: auto; margin-bottom: 14px; }
    #system-graphic > button:nth-of-type(1) span { position: static; }
    #system-graphic > button:nth-of-type(7),
    #system-graphic > button:nth-of-type(7) + p { display: none; }
    #system-graphic > button { margin: 18px 0 4px; width: 100%; }
    #system-graphic > button:after { display: none; }
    #system-graphic > button span { display: inline-block; margin-right: 18px; position: static; }
    #system-graphic > button img { display: inline-block; margin-right: 18px; width: 110px; }
    #system-graphic > p { display: inline-block; margin-top: 0 !important; vertical-align: middle; width: 100% !important; }
    #system-graphic > p { opacity: 1; position: static;  }
    #system-graphic > p:after { display: none; }
    #system-graphic > p button { display: none; }

    #everyone img[src*="everyone_bg"] { display: none; }
    #everyone img[src*="train"] { top: 37%; }
    #everyone img[src*="truck"] { top: 14%; }
    #everyone img[src*="segway"] { top: 7%; width: 5%; }
    #everyone > a { display: inline-block; position: static; margin: 8px 12px; width: auto; }
    #everyone > a:first-of-type { margin-top: 18px; }
    #everyone > a:last-of-type { margin-bottom: 30px; }

    #priority-survey h5:first-of-type { width: 34%; }
    #priority-survey h4 { font-size: .8em; width: 45%; }
    #priority-survey h5 { font-size: .75em; padding: 8px 8px; width: 53%; }
    #priority-form > div { padding-left: 34%; }
    #priority-form > div .radio:first-of-type { width: 34%; }
    #priority-form > div > label { font-size: .8em; width: 45%; }
    #priority-form > div .radio label { font-size: .8em; padding-right: 0; }
    #priority-form > div .radio:first-of-type label { padding-left: 0; }
    #priority-form > div .radio { width: 53%; }

    #demo-survey { font-size: .8em; }
    #demo-survey .radio label { margin-top: 0; vertical-align: top; width: 80%;}
    #demo-survey select { max-width: 100%; }

    .white-arrows > a { background: #0096d6; }
    .white-arrows > a:after { border-right-color: #fff; }
    .white-arrows > a.forward-nav:after { border-left-color: #fff; }

    #triangle-content { padding-top: 22px; padding-right: 8%; padding: 18px 10% 18px 15%; }
    #triangle-content h2 { font-size: 1.4em; }

    #your-input-matters > div { padding: 0 8% 10px; text-align: center; }
    #your-input-matters .col-md-7 { padding: 24px 80px 14px; }
    #your-input-matters .col-md-7 > img { left: 24%; top: 51%; width: 2%; }
    #your-input-matters .col-md-7 > img:nth-of-type(3) { left: 45%; top: 24%; width: 2%; }
    #your-input-matters .col-md-7 > img:nth-of-type(4) { left: 21%; top: 11%; width: 0%; }
    #your-input-matters.animate .col-md-7 > img:nth-of-type(2) { width: 32%; }
    #your-input-matters.animate .col-md-7 > img:nth-of-type(3) { width: 32%; }
    #your-input-matters.animate .col-md-7 > img:nth-of-type(4) { left: 21%; width: 28%; }

    #then-and-now .row { margin: 20px 0; }
    #then-and-now .col-md-6 { margin: 18px 0; width: 70%; }
    .right-flourish { padding-bottom: 70px; }

    .survey .wow-thanks { margin-bottom: 120px; }

    #on-the-go h2 { font-size: 3em; }

    #spending-survey ul li { font-size: .7em; line-height: 1.1em;}
    #spending-form { font-size: .9em; }
    #spending-form em { font-size: 1.1em; line-height: 1.3em;}
    #spending-form > div .radio input { margin-top: 5px; }
    #spending-form > div .radio { margin-left: 2px; width: 10%; }
    #spending-form > div .radio label { font-size: .85em; margin-right: 1px !important; }
    #spending-survey .totals div { font-size: .9em; }

    #transportation-cost #triangle-content > p:nth-of-type(2) { display: none; }
    #denver-i-rollover { display: none; }
    #denver-i-rollover-text > div { display: block; text-align: left; }
    #denver-i-rollover-text div h3 { font-size: 1.1em; }
    #denver-i-rollover-text > div.lighter h3,
    #denver-i-rollover-text > div.lighter p { display: none; }
    #denver-i-rollover-text > div.lighter p:last-of-type { display: block; }
    #denver-i-rollover-text > img { display: none; }
    #denver-i-rollover-text > div img { display: block;  }
    #denver-i-rollover-text ul { padding-left: 16px; text-align: left; width: 100%; }

    #what-do-you-value h3 { margin-bottom: 12px; }
    #what-do-you-value .col-md-5 p { display: block; }
    #what-do-you-value .col-md-7 p { display: none; }
    #drop-boxes > div { display: inline-block; margin-top: 5px; width: 48%; }
    #drop-boxes > div > div { font-size: .85em; height: 66px; padding: 0 8px; }
    #drop-boxes > div > div span { line-height: 1em; padding: 0 4px; }
    #value-options div { box-shadow: 0 0 18px -8px #0096d6; font-size: .85em; height: 48px; margin-bottom: 12px; }
    
    #ideal-future > div { padding: 0 8% 10px; text-align: center; }

    #thank-you h2 { font-size: 1.8em; margin-top: 12px; width: 100%; }
    #thank-you h3 { font-size: .9em; }
    #thank-you .col-md-4 { border-top-width: 4px; margin: 40px 0 0; width: 100%; }
    #thank-you > a img { width: 26px; }
}

@media screen and (max-width: 660px) {
    .window-title { margin-top: 66px; padding: 0; }
    .modal-window > div { padding: 0 5% 28px; }

    .header .nav ul { line-height: 1.2em; padding: 5px 12px 12px; text-align: center; }
    .header .nav li { height: auto; padding: 0; }
    .header a span { padding: 3px 5px; }
    .header .icon-link a img { display: none; }

    .welcome { padding-bottom: 170px; }
    .welcome > div:first-of-type > img { height: 38px; }
    #everyone > a { font-size: .7em; }
    #welcome h2 { font-size: 1.8em; }
    h3 { font-size: 1.1em; }
    small { font-size: .75em; line-height: 1.1em; }
    small a { word-wrap: break-word; }
    .slide { overflow: auto; }
    .slide > div { padding: 14px 5% 25px; }
    .slide > a { font-size: .8em; }
    .slide > .backwards-nav { margin-left: 8px; margin-right: 0; }
    .slide > .forward-nav { margin-left: 0; margin-right: 20px; }
    #welcome .forward-nav { margin: 50px 8px; }
    #first-things-first > .forward-nav { top: -686px !important; }
    #first-things-first iframe { margin-top: 56px; }
    
    #priority-survey h5 + p { display: block; font-size: .8em; }
    #priority-survey h5 + p span { color: #0095d5; }
    #priority-survey h5 + p strong { font-style: italic; }
    #priority-survey h5 + p span:last-of-type { color: #402160; }
    
    #welcome .intro { margin-top: 155px; }

    #priority-survey h4 { width: 100%; }
    #priority-survey h5 { display: none; }
    #priority-form > div { padding-left: 0; }
    #priority-form > div > label { width: auto; }
    #priority-form > div .radio { margin-bottom: 8px; min-height: auto; position: relative; width: 100%; }
    #priority-form > div .radio label { color: #0095d5; padding: 0 8px 0 20px !important; }
    #priority-form > div .radio:last-of-type label { color: #402160; padding: 0 8px 0 20px !important; }
    #priority-form > div .radio input { margin: 6px 0 0 !important; top: 0; }
    #priority-form > div .radio:first-of-type { position: relative; width: 100%; }
    #priority-form > div .radio:first-of-type label { text-align: left; }
    #priority-form > div .radio:first-of-type input { left: 0; right: 100%; }
    /* #priority-form > div .radio label:after { content: " (Improving Denver's System)"; color: #555; font-style: italic; font-size: .9em;}
    #priority-form > div .radio:first-of-type label:after { content: " (Expanding Denver's System)"; } */
    #neighborhood-question select { font-size: .7em; }
    
    #system-graphic > div span { margin-right: 14px; }
    #system-graphic > div img { margin-right: 14px; width: 84px; }
    #system-graphic > div p { width: 56% !important; }

    #contact textarea { font-size: .8em;height: 160px; }
    #contact input[type="submit"] { font-size: .8em; padding: 4px 14px; }

    #your-input-matters .col-md-7 { padding: 24px 16%; }
    p.uppercase { font-size: 1.1em; font-weight: 700; }

    .tabset.has-js ul { display: block; }
    .tabset .tab { display: block; width: 100%; }
    .tablist li { font-size: .85em; padding: 9px; margin: 1px; }
    .tablist .tab { height: auto; width: 100%; }
    .tablist .tab:last-of-type { margin-bottom: 12px; }
    .panel {  font-size: .9em; padding: 18px; }

    #demo-survey { font-size: .7em; }

    #then-and-now .col-md-6 { width: 94%; }
    .image-slider .is-toggle > div { height: 40px; margin-left: -15px; width: 40px; }
    .image-slider .is-toggle > div:before { border-width: 6px 8px; left: -1px; margin-top: -6px; }
    .image-slider .is-toggle > div:after { border-width: 6px 8px; left: 24px; margin-top: -6px; }
    .right-flourish { padding-top: 48px; padding-bottom: 30px; }

    #drop-boxes h4 { font-size: 2.2em; }
    #drop-boxes > div { width: 100%; }
    #drop-boxes > div > div { font-size: .8em; height: 54px; padding: 0 8px; }
    #drop-boxes > div > div span { line-height: .9em; }
    #value-options div { font-size: .75em; height: 40px; width: 100%; }

    .survey { font-size: .8em; width: 80%; }
    .survey > img { width: 18%; }
    .survey form { margin-left: 24%; }
    .survey:after { border-width: 25px; }
    .survey .wow-thanks { font-size: 1em; font-weight: 700; margin-bottom: 80px; }

    #on-the-go h2 { font-size: 2.2em; }

    #spending-survey ul li { text-align: center !important; width: 100%; }
    #spending-form > div { padding: 18px; text-align: center; }
    #spending-form > div > label { width: 100%; }
    #spending-form > div .radio { width: 25%;}
    #spending-form > div > p.showing { line-height: 1.1em; margin: 2px 0 18px; width: 100%; }

    #rollover-image > img { left: -9999px; width: 460%; }
    .current #rollover-image > img { left: -90%; }

    #survey-2 p { font-size: 1.1em; font-weight: 700; line-height: 1.1em; }

    #thank-you { padding-bottom: 120px; }
    #thank-you h2 { font-size: 1.6em; }

    .meeting-info h4 { font-size: 1.1em; }
}

@media screen and (max-width: 440px) {
    #triangle-content h2 { font-size: 1.5em; }
    
    #system-graphic { text-align: center; }
    #system-graphic > div span { display: block; margin: 0 auto 8px; }
    #system-graphic > div img { display: block; margin: 0 auto 8px; width: 84px; }
    #system-graphic > div p { width: 100% !important; }
    #how-to-navigate h3 {text-align: center; padding: 25px 15px; }
    #how-to-navigate h3 br {display: none; }
    #talked-listened blockquote {display: none;}
    #system-graphic > button {padding: 15px 0;}
    #system-graphic > button img {margin-right: 0;}
    #system-graphic > button span {margin-right: 0;}
    #system-graphic p {padding: 25px; }
    #how-invest blockquote {display: none;}
}