html, body { background: #003865; color: #333; font-family: open-sans, sans-serif; font-weight: 400; font-style: normal; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
body { overflow-y: scroll; }
#content > .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; }

.padded { padding: 4rem 0rem; }
.half-padded { padding: 1.5rem 0rem 1.5rem; }
.padded-top { padding: 4rem 0rem 0.5rem; }
.padded-bottom { padding: 0.5rem 0rem 4rem; }

/* Links */
a { transition: background-color .2s, color .2s; text-decoration: underline; }
a:hover,
a:focus { text-decoration: none; }
.button { background-color: #003865; 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: #00243D; color: #fff; }
.button:focus { color: #fff; }

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

/* Headers */
h1 { font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 3.3em; margin: 30px 0 22px; }
h2 { color: #003865; font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 2.2em; margin: 12px 0 0; }
h3 { border-bottom: 1px solid #00ACCC; color: #003865; font-family: brandon-grotesque, sans-serif; font-weight: 900; font-style: normal; font-size: 1.25em; letter-spacing: 1.75px; margin: 18px 0 0; padding-bottom: 10px; padding-top: 15px; text-transform: uppercase; }
h4 { color: #003865; font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 1.25em; margin: 20px 0 12px; }
h5 { font-size: 1.4em; margin: 26px 0 0; }
h6 { font-size: 1.3em; margin: 26px 0 0; }

/* Paragraphs & Lists */
p { line-height: 1.45em; margin: 16px 0 6px; }
ul, ol { margin: 16px 0 30px; }
li {  line-height: 1.4em; margin-bottom: 8px; }
img { max-width: 100%; }

/* Accordions */
.accordion-set { margin-bottom: 20px; }
.accordion-header { cursor: pointer; padding: 4px 8px; text-align: left; width: 100%; }
.accordion-header i { font-size: .5em; margin-left: 12px; transition: .45s; vertical-align: middle; }
.opened .accordion-header i { margin-top: -4px; transform: rotate(180deg); }
.accordion > div { padding: 0 1%; }

/* Forms */
form { margin: 18px 0; }
label { display: block; margin: 10px 0 8px; width: 100%; }
input[type="text"] { margin-bottom: 8px; padding-left: 3px; width: 100%; }
textarea { height: 80px; margin-bottom: 8px; padding: 3px 5px; resize: none; width: 100%; }
input[type="checkbox"],
input[type="radio"] { margin: 0 4px 0 2px; }
input[type="checkbox"] + label,
input[type="radio"] + label { display: inline-block; margin-right: 14px; position: relative; top: -1px; width: auto; }
input[type="submit"],
input[type="reset"] { background-color: #c47; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; margin-top: 14px; padding: 4px 16px; transition: background-color .2s; }
.button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover { background-color: #b16; }

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

/* Quick Header */
.preheader { background-color: #00ACCC; padding: 4px 0; position: fixed; width: 100%; z-index: 200; }
.header { background-color: #fff; color: #003865; padding: 14px 20px; position: fixed; left: 50%; transform: translate(-50%); width:auto; -webkit-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); -moz-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); z-index: 200; }
.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: #003865; display: block; }
.header li a:hover { color: #00243D; }
#mobile-menu { background-color: transparent; border: 0; cursor: pointer; display: none; padding: 0 4px; }
.header img { border: 0; max-width: 275px; width: 100%; }

#intro-header { background: #D9F3F8; }
#intro h2 { font-size: 3.25em; margin-bottom: 0.5em; }
#intro { background: #D9F3F8; }

#overview-header { background: #003865; }
#overview-header h2 { color: #fff;}
#overview { background: #fff; }

#construction-header { background: #78BE21; }
#construction-header h2 { color: #06264e; }
#construction { background: #DEEED5; }
#construction h3 { border-color: #78BE21; }

#historic-header { background: #003865; }
#historic { background: #fff; }
#historic-header h2, #historic-header h3 { color: #fff;}
#historic h3 { border-color: #ccc; }

#quotes-header { background: #003865; }
#quotes-header h2 { color: #fff;}
#quotes { background: #fff; }

#celebration-header { background: #0AB6D6; }
#celebration { background: #D9F3F8; }

#survey-header { background: #003865; }
#survey { background: #fff; }
#survey-header h2, #survey-header h3 { color: #fff; }
#survey h3 { border-color: #ccc; }

#footer { background: #003865; color: #fff; }
#footer h2, #footer h3 { color: #fff; }
#footer a { color: #fff; text-decoration: underline; }
#footer a:hover { color: #fff; text-decoration: none; }
#footer img:first-of-type { width: 100%; max-width: 250px; }


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

#content { display: none; }
.brclear { clear: both; }
.shadow { -webkit-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); -moz-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); }
.mn { width: 100%; max-width: 15px; margin-right: 7px; margin-top: -4px; }
.note { color: #06264e; font-family: open-sans, sans-serif; font-weight: 400; font-style: italic; }
.card { background: #fff; margin-top: 1.5em; min-height: 175px; padding: 1em 0.5em; text-align: center; width: 100%; }
#JotFormIFrame-202734826953159 { height: 100%; min-height: 500px; overflow: auto; }
#JotFormIFrame-202606655093051 { height: 100%; min-height: 650px; overflow: auto; }
.parent-container img { margin-bottom: 5px; }
.parent-container a { text-decoration: none; }

#share-links a { color: #003865; text-decoration: underline; }
#share-links a i { background-color: #fff; border: 1px solid #00ACCD; border-radius: 50%; color: #003865; display: inline-block; height: 40px; line-height: 40px; margin-right: 7px; text-align: center; text-decoration: none; width: 40px; }
#share-links a:hover { color: #06264e; text-decoration: none; }
#share-links a:hover i { background-color: #D9F3F8; }

#share-links-rev a { color: #fff; text-decoration: underline; }
#share-links-rev a i { background-color: #fff; border: 1px solid #00ACCD; border-radius: 50%; color: #003865; display: inline-block; height: 40px; line-height: 40px; margin-right: 7px; text-align: center; text-decoration: none; width: 40px; }
#share-links-rev a:hover { color: #fff; text-decoration: none; }
#share-links-rev a:hover i { color: #003865; background-color: #D9F3F8; }

.quote { padding: 1em 0; }
.quotemark { color: #00ACCC; height: 100%;  font-size: 2em; position: absolute; padding-top: 10px; }
.quote p { border-left: 1px solid #ccc; color: #003865; margin-left: 3em; padding-left: 1em; }
.quote p span { font-family: brandon-grotesque, sans-serif; font-weight: 900; font-style: normal; }
.quote p span span { text-transform: uppercase; }

.timeline { background: #003865; color: #fff; margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: -10px; padding: 20px 15px; }
.timeline div:first-of-type { text-align: center; line-height: 1; }
.timeline div:nth-of-type(3) { text-align: center; line-height: 1; }
.timeline div:nth-of-type(5) { text-align: center; line-height: 1; }
.timeline div.divider { border-bottom: 1px dashed #78BE21; padding-bottom: 0.5em; margin-bottom: 1em; }
.timeline span { font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 1.25em; margin-top: 0; line-height: 1.25; }
.timeline p { font-size: 0.95em; margin-top: 0; }
.timeline-arrow { color: #78BE21; font-size: 3.5em; line-height: 1; margin: 0; padding: 0px 15px 0px; text-align: center; }

.comment { background: #ffffff; min-height: 200px; padding: 1em; width: 100%; }


/* LIGHTBOX */
#lightbox { height: 100%; position: fixed; top: -100%; transition: top .85s; width: 100%; z-index: 400; }
#lightbox > span { background-color: rgba(0,53,95,.5); cursor: pointer; height: 100%; position: absolute; top: 0; width: 100%; }
#lightbox > span span { color: #fff; font-size: 3.6em; line-height: .4em; padding: 15px; position: absolute; right: 0; top: 0; z-index: 5; }
#lightbox div { height: 40%; margin: -120px auto 0; height: 80%; overflow-y: auto; position: relative; transform: rotateX(90deg) translateY(-160px); transition: .24s; width: 88%; }
#lightbox img { display: block; width: 100%; }
#lightbox.on { top: 0; }
#lightbox.on div { box-shadow: none; margin-top: 50px; transition: .8s ease-out .32s; transform: rotateX(0deg) translateY(0px); }
img.lightbox { cursor: pointer; margin-top: 18px; }

/* Ribbon */
.ribbon {
  font-size: 32px !important;
  /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 
  width: 50%;
  position: relative;
  background: #0AB6D6;
  color: #fff;
  text-align: center;
  padding: 1em 2em; /* Adjust to suit */
  margin: 2em auto 0.25em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
 }
 .ribbon:before, .ribbon:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #008EAE;
  z-index: -1;
 }
 .ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
 }
 .ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
 }
 .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #007090 transparent transparent transparent;
  bottom: -1em;
 }
 .ribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
 }
 .ribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
 }

 h1.ribbon { color: #0B2D55; font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; }
 h1.ribbon span { color: #06264e; font-weight: 900; text-transform: uppercase; }
 .cutprompt { color: #fff; font-size: 14pt; margin-bottom: 1.5em; max-width: 33em; text-align: center; }

/* Confetti */
#canvas { background-image: url('../images/downtown-hutchinson.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; display: block; margin-top: 7px; pointer-events: none; position: relative; width: 100%; z-index: 100; }
#confetti-content { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; margin-top: 0; position:fixed; width: 100%; z-index: 150; }
#shield-content { align-items: center; display: none; flex-direction: column; height: 100%; justify-content: center; margin-top: 0; position: absolute; text-align: center; width: 100%; z-index: 150; }
#shield-content img { width: 100%; max-width: 325px; }
#shield-content p { padding: 0.5em 1em; background: #003865; color: #fff; }
#shield-content i { color: #00ACCC; }

#title { background: #00ACCC; margin-bottom: 5em; padding: 1em 2em 1.5em; text-align: center; width: 65%; -webkit-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25);
  -moz-box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); box-shadow: 0px 5px 15px 0px rgba(21,55,95,0.25); }
#heading h1 { color: #0B2D55; font-family: brandon-grotesque, sans-serif; font-weight: 700; font-style: normal; font-size: 24pt; line-height: 1.15; }
#heading span { color: #06264e; display: block; font-size: 28pt; font-weight: 900; text-transform: uppercase; line-height: 1.5; }
#shield img { width: 100%; max-width: 300px; margin-top: -75px; margin-bottom: -75px; }
#event { color: #06264e; font-size: 16pt; }

/* Ribbon Split Animation */
#bg { background: linear-gradient(to left bottom, #003865, #0B2D55 50%, rgba(0,0,0,0)0%); height: 60%; margin-top: 10%; position:fixed; transition: margin 2s; width: 100%; z-index: 125; }
#bg-two{ background: linear-gradient(to right top, #0B2D55, #003865 50.15%, #00243D 50.15%, #00243D 50.3%, #00243D 50.3%, rgba(0,0,0,0)0%); height: 60%; margin-top: 10%; position:fixed; transition: margin 2s; width: 100%; z-index: 125; }

.buttonContainer button span:before { border-top: 2px dashed #003865; content: ''; position: absolute; top: 33px; height: 20px; left: 20px; width:48px; }
.buttonContainer button span:after { border-top: 2px dashed #003865; content: ''; position: absolute; top: 33px; height: 20px; right: 20px; width:48px; }
.buttonContainer button { background-color: #78BE21; border: 2px solid #78BE21; border-radius: 6px; color: #06264e; display: inline-block; font-size: 20pt; padding: 15px 70px; position: relative; text-align: center; text-decoration: none; }
.buttonContainer button:hover { border: 2px solid #fff; }
.buttonContainer p { font-size: 10pt; text-align: center; }
.buttonContainer a { color:#fff; text-decoration: underline; }
.buttonContainer a:hover { color:#fff; text-decoration: none; }

/* Comparison Slider */
.item { height: auto; margin: auto; max-width: 1500px; width: 100%; }
.reveal { margin-top: 1em; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.reveal:not(.reveal-loaded) * { display: block; height: auto; left: 0; position: relative; top: 0; width: 100%; }
.reveal:not(.reveal-loaded) *:nth-child(2) { display: none; }
.reveal-img { display: block; height: auto; left: 0; position: relative; top: 0; width: 100%; }
.reveal-img:nth-child(2) { position: absolute; }
.reveal-bar { background: #003865; cursor: ew-resize; height: 100%; position: absolute; top: 0; width: 5px; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); opacity: 0.7; touch-action: none; }
.reveal-grabber { align-items: center; background: #003865; border: 1px solid white; border-radius: 30%; display: flex; height: 30px; justify-content: center; left: -23px; position: absolute; top: 50%; transform: translateY(-15px); -webkit-transform: translateY(-15px); width: 50px; }
.reveal-arrows { color: white; font-size: 16px; position: relative; text-align: center; }

/* Flip Images */
.a11y-example-base { background: #008EAE; color: #222; display: block; text-decoration: none; transition: 0.2s ease all; }
.a11y-example-base:focus { outline: none; }

.inaccessible-hover:hover { color: red; }
.accessible-hover:hover { color: red; }
.accessible-hover:focus { color: red; }

.a11y-example-base--flip { display: block; height: 300px; position: relative; width: 100%; }
.a11y-example-base--flip .flip__outer { position: relative; transition: 0.5s ease all; transform-style: preserve-3d; }
  
.flip__front, .flip__back { backface-visibility: hidden; height: 300px; left: 0; margin: 0 auto; padding-top: 50px; padding-left: 1em; padding-right: 2em; position: absolute; text-align: center; top: 0; transition: 0.5s ease all; width: 100%; }
.flip__front { z-index: 2; transform: rotateY(0deg); }
.flip__back { transform: rotateY(180deg); background: #D9F3F8; color: #003865; }

.inaccessible-flip:hover .flip__outer { transform: rotateY(180deg); }
.accessible-flip:hover .flip__outer { transform: rotateY(180deg); }
.accessible-flip:focus .flip__outer { transform: rotateY(180deg); }

#img1 { background-image: url('../images/Light-poles.jpg'); background-size: cover; background-position: center top; }
#img2 { background-image: url('../images/Banner-poles.jpg'); background-size: cover; background-position: center center; }
#img3 { background-image: url('../images/Benches.jpg'); background-size: cover; background-position: center center; }
#img4 { background-image: url('../images/Tinted-boulevards.jpg'); background-size: cover; background-position: center bottom; }
#img5 { background-image: url('../images/Grass-boulevards.jpg'); background-size: cover; background-position: center bottom; }
#img6 { background-image: url('../images/Pedestrian-crossings.jpg'); background-size: cover; background-position: center bottom; }

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

@media screen and (max-width: 992px) {
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.9em; margin: 12px 0 0; }
    h3 { font-size: 1em; margin: 20px 0 0; }
    h4 { font-size: 1em; margin: 28px 0 0; }
    h5 { font-size: 1em; margin: 26px 0 0; }
    h6 { font-size: 1em; margin: 26px 0 0; }
    p, li { font-size: .9em; line-height: 1.3em; }
    .button { font-size: .8em; border-radius: 12px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }
    #content { padding: 0; }
    #content > .row { padding: 2%; }
    .vertical-center > div { margin: 0; }
    .header img { border: 0; max-width: 180px; }
    .header { padding: 8px 16px; }
    #shield-content img { max-width: 225px; }
    .card { margin-top: 1em; padding: 0.5em; width: 100%; }
    .half-padded { padding: 1rem 0rem 1rem; }
    .ribbon { font-size: 28px; padding: 0.5em 1em; width: 65%; }
}

@media screen and (max-width: 640px) {
  #share-links a { height: 32px; line-height: 32px; margin-right: 6px; width: 32px; }
  .header img { border: 0; max-width: 150px; }
  .header { padding: 6px 10px; }
  #shield-content img { max-width: 165px; }
  .ribbon { font-size: 22px !important; }
  .ribbon p { font-size: 18px !important; }
  #intro h2 { font-size: 2.25em; margin-bottom: 0em; }
  h4 { margin-bottom: 0.5em; }
  .cutprompt { font-size: 11pt; padding: 18px 14px 0; } 
  #JotFormIFrame-202734826953159 { height: auto; min-height: auto; overflow: auto; }
  #JotFormIFrame-202606655093051 { height: auto; min-height: auto; overflow: auto; }
  .comment { min-height: 100px; }
}

/* Add if printing is necessary */
@media print {

}