html, body { color: #333; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
.row > div { padding: 0 1.5% 12px; }
.content { width: 100%; }
.vertical-center > div { float: none; display: inline-block; margin-left: -.5%; vertical-align: middle; }
.vertical-center > div:first-of-type { margin: 0; }
hr {border-bottom: gray solid 1px;}

/* Links */
a { transition: background-color .2s, color .2s; }
a:hover,
a:focus { text-decoration: none; }

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


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

html { height: 100%; }
body { height: 100%; overflow: hidden; width: 100%; }
.container { height: 100%; position: relative; transition: width .5s; width: 142.857143%; } 
.contact-open .container { width: 100%; }
#main-content { height: 100%; position: relative; width: 70%; }
#contact-form { background-color: #333; height: 100%; overflow: auto; padding: 16px 22px; position: absolute; right: 0; top: 0; width: 30%; z-index: 3; color: white;}
#contact-form h1 {font-size: 2em;}


#meeting { height: 100%; position: relative; }
#meeting-header { background-color: #fff; height: 98px; position: relative; transition: height .4s; width: 100%; z-index: 2; }
#meeting-header div { background-color: #381a57; background-image: url("../images/fadebg.png"); background-size: auto 97px; background-repeat: no-repeat; background-position: 300px 0; bottom: 0; height: 99.9px; position: absolute; transition: background .8s, height .2s; width: 100%; }
#meeting-header div > img { height: 68px; margin-left: 20px; opacity: 0; padding: 7px; transition: .5s; }
#meeting-header div > img[src*="tag"] {height: 95px; left: 0; opacity: 1; padding: 0; position: absolute; transition: .5s; }
#meeting-header a { font-size: 1.4em; padding: 6px 14px; }
#meeting-header a:first-of-type { display: none; }
#meeting-header a .fa-times { display: none; }
#meeting-header a:last-of-type { border-radius: 5px; float: right; margin-right: 78px; margin-top: 14px; padding: 9px 14px; transition: .2s; }
/* #meeting-header a:last-of-type:hover { background-color: #230c3a; } */
#meeting-header a img { height: 54px; }
#meeting-header a span { left: -9999px; position: absolute; top: -9999px; }
.scrolled #meeting-header { height: 68px; }
.scrolled #meeting-header div { background-position: 20px 0; height: 68px; }
.scrolled #meeting-header div > img { margin: 0; opacity: 1; }
.scrolled #meeting-header div > img[src*="tag"] { opacity: 0; }
.scrolled #meeting-header a:last-of-type { margin-top: 6px; margin-right: 6px; }
.scrolled #meeting-header a img { height: 36px; } 
.menu-open #meeting-header a:first-of-type .fa-bars { display: none; }
.menu-open #meeting-header a:first-of-type .fa-times { display: block; margin: 4px 2px; }
.contact-open #meeting-header a:last-of-type { margin-right: 14px; }
.contact-open #meeting-header a:last-of-type img { display: none; }
.contact-open #meeting-header a:last-of-type .fa-times { color: #fff; display: block; font-size: 1.2em; margin: 8px; padding: 7px; }
.contact-open .scrolled #meeting-header a:last-of-type .fa-times { margin: 0; }

#meeting-content { height: 100%; width: 100%; }
#meeting-content > div { height: 100%; padding-top: 98px; position: relative; top: -98px; transition: .4s; }
.scrolled #meeting-content > div { padding-top: 68px; top: -68px; }

#meeting-menu { background-color: #333; height: 100%; left: 0; padding-top: 99px; position: absolute; text-align: center; top: 0; transition: .5s; width: 160px; }
#meeting-menu a { border-bottom: 1px solid #000; color: #fff; display: block; font-size: .8em; height: 10%; padding: 0 9px; text-transform: uppercase; font-weight: bold;}
#meeting-menu a:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
#meeting-menu a:hover { background-color: #222; }
#meeting-menu a.selected { background-color: #fff; color: #490E67;}
#meeting-menu a span { display: inline-block; line-height: 1.3em; vertical-align: middle; width: 95%; }
.scrolled #meeting-menu { padding-top: 68px; }

#meeting-body { height: 100%; margin-left: 160px; overflow-y: auto; }
#meeting-body > div { clear: both; padding: 20px 50px 50px; }
#meeting-body h2 { color: #490e67; font-size: 1.9em; text-transform: uppercase; font-weight: bold; letter-spacing: 0.05em;}
#meeting-body h2 span { border-bottom: 3px solid #333; display: inline-block; padding-bottom: 5px;}
#meeting-body > div .row > div { padding: 0; }

@keyframes arrow1 {
    0% { left: 48px; }
    50% { left: 60px; }
}

@keyframes arrow2 {
    0% { top: 58px; }
    50% { top: 70px; }
}

.bookend-screen { background-image: url("../images/backgroundimg_4.jpg"); background-size: cover; height: 100%; position: relative;}

#end-screen > .bookend-screen { background-image: url("../images/footerimg.jpg"); background-size: cover; height: 90%; position: relative;}
/* #meeting-body > .bookend-screen { background-size: cover;  position: relative;}
#welcome-screen {padding: 0!important; margin-bottom: 50px;} */

.bookend-screen p { color: #fff; font-size: 5em; font-weight: 700; line-height: 1.3em; text-align: center; text-shadow: 6px 6px 4px #111; width: 100%; position: absolute; top: 25%; left: 0;}

.bookend-screen h5 { background-color: rgba(255, 255, 255, 0.9); color: #333; font-size: 1.5em; font-weight: 700; line-height: 1.3em; text-align: center; vertical-align: middle; width: 100%; position: absolute; width: 75%; top: 45%; left: 9%; padding: 15px 0;}

.bookend-screen:after { content: ""; height: 100%; vertical-align: middle; }

.bookend-screen > span { animation-name: arrow1; animation-duration: 4s; animation-iteration-count: infinite; background-color: #fff; color: #333; font-weight: 700; left: 48px; padding: 9px 14px 9px 0; position: absolute; top: 34px; transition: opacity .2s, left .4s; }
.bookend-screen > span:first-of-type:before { border: 40px solid transparent; border-width: 40px 30px; border-right-color: #fff; content: ""; position: absolute; right: 100%; top: -20px; }
.bookend-screen > span:last-of-type { animation-name: arrow2; animation-delay: .1s; left: auto; line-height: 1.2em; padding: 0 6px 9px; right: 58px; text-align: center; top: 58px; transition: opacity .2s, top .4s; width: 90px; }
.bookend-screen > span:last-of-type:before { border: 40px solid transparent; border-width: 60px 84px; border-bottom-color: #fff; bottom: 100%; content: ""; left: -42px; margin-bottom: -20px; position: absolute; }
.bookend-screen > span:last-of-type span { position: relative; }
.scrolled .bookend-screen > span { opacity: 0; }
.contact-open .bookend-screen > span:last-of-type { opacity: 0; }

/* #meeting-body > #end-screen { height: auto; margin-top: 20px; } */
/* #end-screen > p { display: block; margin: 40px auto; width: 68%; }
#end-screen p span { display: block; font-size: .7em; line-height: 1.3em; margin: 30px auto 0; width: 98%; }
#end-screen a { display: block; margin: 18px auto 0; text-align: left; width: 400px; }
#end-screen a p { margin: 0; text-shadow: none; width: auto; } */
.contact-open #end-screen > p { font-size: 3em; width: 60%; }

.video { padding: 10px 10px!important;}
.video-series { background-color: #f2f2f2; padding: 15px!important;}
.video-series p {font-weight: bold;}
.video img {width: 100%; padding-bottom: 10px; cursor: pointer;}
.video img:hover {transition: 0.5s all; box-shadow: 0 4px 7px -3px #666;}

#purpose-and-need .col-md-6 p {padding-right: 50px;}
.purpose { margin-top: 28px; margin-right: 3%; width: 31.3333%; }
.purpose:last-of-type { margin-right: 0; }
.purpose img { border: 2px solid #fff; border-radius: 50%; display: block; margin: 0 auto -62px!important; position: relative; width: 80px; z-index: 1; }
.purpose h3 { background-color: #333; color: #fff; font-size: 1.5em; font-weight: 700; height: 92px; position: relative; text-align: center;}
/* .purpose h3:hover { transition: 0.5s all; box-shadow: 0 4px 7px -3px #666; } */
.purpose h3 span { bottom: 0; left: 0; line-height: 1.4em; padding: 0 25px 25px; position: absolute; transition: .3s; width: 100%; }

.purpose .popout {margin-bottom: 15px;}
.purpose .popout img { display: block; margin: 0 auto; width: 100%; border-radius: 0; border: none; padding: 0; cursor: pointer;}
.purpose .popout img:hover { transition: 0.5s all; box-shadow: 0 4px 7px -3px #666;}
.purpose .popout img.bottom {top: 116px;}

.improvements {background-color: #f2f2f2; padding: 15px; color: #333; height: 343px; position: relative;}
.improvements a { background-color: white; color: #490e67; display: block; margin: 0 auto; width: 90%; border: 0.5px solid #490e67; padding: 8px 10px; margin-top: 10px; text-align: center; font-weight: bold; position: absolute; bottom: 10px;}
.improvements a:hover { background-color: #490e67; color: #fff; transition: 0.5s all;}


.tabpanel { margin: 20px; padding: 0; }
.tablist { margin: 20px 0px; padding: 0; list-style: none; }
.tab {float: left; margin-right: 1%; display: inline-block; width: 24%; height: 110px; margin-bottom: 25px; padding: 10px; background:#fff; color: #490E67; border: solid 2px #490E67; /* IE float bug fix */ cursor: pointer; text-align: center; font-weight: bold; }
.panel-tab { clear: both; display: block; margin: 0 0 0 0; margin-top:0; padding: 0px 0px 25px 0; margin-bottom: 50px; background-color: #f2f2f2;}
.panel-tab h3 {padding-left: 15px; margin-bottom: 0; }
.panel-tab p {padding: 0 15px 15px; }

ul li.tab:last-of-type { margin-right: 0!important; }

ul.controlList { list-style-type: none;}
li[aria-selected='true'] { color: #fff; background-color: #490E67;}
ul.tablist li span {font-size: 16px; display: block;}
div.panel-tab[aria-hidden='true'] { display: none; }
div.panel-tab[aria-hidden='false'] { display:block; }
div.panel-tab p span { color: #490E67; font-weight:bold; }
.focus { margin-top: 0; height: 1.2em; }
.hidden { display:none; }

#alternatives-development-process p span { color: #490E67; font-weight:bold; }

#panel1 .accent {border-top: 10px solid #490E67; width:24.5%;}
#panel2 .accent {border-top: 10px solid #490E67; width:24.5%; margin-left: 25.5%;}
#panel3 .accent {border-top: 10px solid #490E67; width:24.5%; margin-left: 50%;}
#panel4 .accent {border-top: 10px solid #490E67; width:24.5%; margin-left: 75%;}

.alt-options {width: 95%; margin: 0 auto; background-color: #fff; }
.alt-options .alts:last-of-type { margin-right: 0!important; }
.alt-options .alts {display: inline-block;width: 18%; margin-right: 2%; margin-top: 10px;  margin-bottom: 10px;}
.alt-options img {width: 100%; background-color: #fff;}

.refined-options {display: inline-block; margin: 0 25px;  background-color: #fff;}
.refined-options .alts:last-of-type { margin-right: 0!important; }
.refined-options .alts {display: inline-block; width:14.67%; margin-right: 1.5%;}
.refined-options img {width: 100%; padding: 15px 0;}

.pref-options {width:95%; margin: 0 auto;}
.pref-options img {width: 100%; cursor: pointer; background-color: #fff;}
.pref-options img:hover {box-shadow: 0 4px 7px -3px #666; transition: 0.5s all; }

.alt-steps {width:95%; margin: 30px auto 0;}
.alt-steps p {margin-bottom: 15px;}
.alt-steps img {width: 95%; display: block; margin: 0 auto; cursor: pointer; box-shadow: 0 4px 7px -3px #666;}

img.step4 {width: 85%; padding-top: 15px; display: block; margin: 0 auto;}

/* LIGHTBOX */
#lightbox { height: 100%; position: fixed; top: -100%; transition: top .85s; width: 100%; z-index: 3; }
#lightbox > span { background-color: rgba(0,0,0,.75); ; 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; height: 100%; margin: 0 auto;  background-color: #fff;}
#lightbox.on { top: 0; }
#lightbox.on div { box-shadow: none; margin-top: 50px; transition: .8s ease-out .32s; transform: rotateX(0deg) translateY(0px); }
.slide img.lightbox { cursor: pointer; margin-bottom: 5px; }

.popout {display: block; margin: 0 auto;}
.popout img {padding: 10px;}

.slide-board { display: inline-block; }

.builds {background-color: gray; padding: 25px; margin-top: 25px; border-right: 10px solid white;}
.builds h4 {text-align: center; line-height: normal; font-weight: bold; margin: 0; padding: 15px; color: white; font-size: 1.2em;} 

.recommended {background-color: #490E67; padding: 25px; margin-top: 25px; border-right: 10px solid white;}
.recommended h4 {text-align: center; line-height: normal; font-weight: bold; margin: 0; padding: 15px; color: white; font-size: 1.2em;}  

#map-row .col-md-7 .cross-sections {height: 100%; }
#map-row .col-md-7 .cross-sections h4 {font-size: 14px; font-weight: bold; margin-bottom: 5px;}
#map-row .col-md-7 .cross-sections span {background-color: #333; color: white; display: block; padding: 4px 6px; margin-bottom: 5px;}
#map-row .col-md-7 .cross-sections p {margin-bottom: 5px; padding-left: 4px;}
#map-row .col-md-7 .cross-sections img {width: 60%; cursor: pointer; margin-bottom: 10px; box-shadow: 0 4px 7px -3px #666; }

/* .info {background-color: white; padding: 15px;} */

.noise a { background-color: white; color: #490e67; display: block; margin: 0 auto; width: 75%; border: 0.5px solid #490e67; padding: 8px 10px; margin-top: 25px; text-align: center; font-weight: bold;}
.noise a:hover { background-color: #490e67; color: #fff; transition: 0.5s all;}

.closing-button {margin-top: 15px; margin-bottom: 20px;}
.closing-button img {width: 30%; margin: 0 auto; display: block;}
.closing-button div {margin: 0 auto; text-align: center;}
.closing-button h3 {font-size: 1.3em; color: #490E67; font-weight: bold;}
.closing-button p {color: #333;}
.closing-button:hover {transition: 0.5s all; filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5)); cursor: pointer; }
.no-hover:hover { filter: none; cursor: default; }

/* .closing-button { background-color: #fff; border: 1px solid #bbb; display: inline-block; height: 118px; margin-top: 10px; padding: 0 14px 0 130px; position: relative; width: 85%;} */
/* .closing-button img { height: 94px; left: 15px; position: absolute; top: 12px; } */
/* .closing-button h3 { color: #490E67; font-weight: 700; margin: 0; padding: 0; font-size: 1em; }
.closing-button p { color: #000; font-size: 1.1em; font-weight: 700; margin: 0; }
.closing-button div { display: inline-block; vertical-align: middle; padding-top: 17%;} */
/* .closing-button:after { content: ""; display: inline-block; height: 100%; vertical-align: middle; } */
/* .closing-button:hover { background-color: #eee; } */

#map-row { height: 450px; margin-top: 28px; }
#map-row > div { height: 100%; }
#map-row .col-md-7 { background-color: #fff; border-right: 2px solid #fff; }
#map-row .col-md-7 h3 { background-color: #F5A800; color: #fff; cursor: pointer; font-size: 1em; font-weight: 700; height: 46px; letter-spacing: .04em; line-height: 45px; margin: 0; text-align: center; transition: background-color .15s; }
#map-row .col-md-7 h3:hover { background-color: #ca8a02;  }
#map-row .col-md-7 h3 > span { border: 2px solid #fff; display: inline-block; font-size: 1.1em; height: 18px; line-height: 13px; margin-right: 6px; vertical-align: middle; width: 18px; }
#map-row .col-md-7 h3 > span.minus { display: none; line-height: 11px; }
#map-row .col-md-7 .opened h3 > span:first-of-type { display: none; }
#map-row .col-md-7 .opened h3 > span.minus { display: inline-block; }
#map-row .col-md-7 div:first-of-type h3 { background-color: #333; } 
#map-row .col-md-7 div:nth-of-type(2) h3 { background-color: #007960; } 
#map-row .col-md-7 div:nth-of-type(2) h3:hover { background-color: #005645; }
#map-row .col-md-7 div:nth-of-type(3) h3 { background-color: #EA7626; } 
#map-row .col-md-7 div:nth-of-type(3) h3:hover { background-color: #c56421; }
#map-row .col-md-7 > div > div { padding: 5px; }
#map-row .col-md-7 p { font-size: 1em; line-height: 1.4em; margin: 0; }
#map { height: 100%; width: 100%; }
#map-details { background-color: #fff; left: -6px; margin: 12px 18px; position: absolute; top: 54px; width: 330px; }
#map-details h4 { color: #490E67; font-size: 1.1em; font-weight: 700; margin: 0 0 14px; }
#map-details ul { box-shadow: 0 4px 7px -3px #666; list-style-type: none; margin: 0; padding: 13px 20px 8px; height: 260px;}
#map-details ul li { font-size: 1em; padding-left: 44px; position: relative; }
#map-details ul li p { margin: 10px 0; }
#map-details ul li span { background-color: #490E67; height: 10px; left: 0; position: absolute; top: 6px; width: 30px; }
#map-details ul li img { left: 0; position: absolute; top: 2px; width: 30px; }
#map-details ul li p img { width: 88%; left: 43px; top: 43px; }

div.legend {background-color: #f2f2f2; height: auto!important; margin-bottom: 15px; width: 100%; display: block; padding-left: 15px!important; margin: 0 auto 15px;}
div.legend h4 { color: #490E67; font-size: 1.1em; font-weight: 700; margin: 10px 0 14px; }
div.legend p {margin-top: 0; padding-right: 25px; font-size: 11px!important; margin-bottom: 5px; } 
div.legend img { display: inline-block; width: 30px; vertical-align:text-top; padding-right: 5px; }
div.legend p img { width: 80%; left: 43px; top: 43px; }


p.instructions { padding: 10px 15px;}
p.instructions i { font-size: 22px;}

.contact-open #map-row .col-md-7 h3 { font-size: .8em; }
.contact-open #map-row .col-md-7 h3 span { border-width: 1px; font-size: 1em; height: 15px; line-height: 13px; width: 15px;  }
.contact-open #map-row .col-md-7 p { font-size: .8em; line-height: 1.2em; }
.contact-open #map-details { width: 240px; }
.contact-open #map-details h4 { font-size: .9em; margin-bottom: 8px;  }
.contact-open #map-details ul { padding: 10px 12px 2px; }
.contact-open #map-details ul li { font-size: .75em; padding-left: 31px; }
.contact-open #map-details ul li p { line-height: 1.3em; }
.contact-open #map-details ul li span { height: 8px; top: 4px; width: 22px; }
.contact-open #map-details ul li img { width: 22px; }

#crmWebToEntityForm {background-color: transparent!important; width: 100%!important; margin-top: -40px!important;}
.zcwf_title {display: none;}
.zcwf_row {width: 100%!important;}
.zcwf_col_lab {color: #fff;}
#crmWebToEntityForm.zcwf_lblTopBottom {padding: 25px 0!important; width: 100%!important;max-width: 100%!important;}
.zcwf_col_fld {width: 100%!important;}
.zcwf_lblTopBottom .zcwf_col_fld input[type=text], .zcwf_lblTopBottom .zcwf_col_fld textarea {width: 100%!important;}
#crmWebToEntityForm table {width: 100%!important;}
#crmWebToEntityForm table tbody tr td strong {display: none;}
table tr:nth-of-type(even) {background-color: transparent;}
table {background-color: transparent!important; border:none;}
#crmWebToEntityForm tr, #crmWebToEntityForm td {width: 100%!important;}
#crmWebToEntityForm tr, #crmWebToEntityForm td span {font-family: "Open Sans", sans-serif!important; color: white;}
#crmWebToEntityForm tr td select option {font-family: "Open Sans", sans-serif!important; color: #000!important;}
#crmWebToEntityForm select {color: #000;}
#crmWebToEntityForm textarea {color: #000;}
input[type="text"] {color: #000;}
input[type="reset"] {display: none;}
input[type="submit"] { background-color: #f4a71d; border-radius: 14px; border: 0; color: #fff; letter-spacing: .05em; padding: 8px 16px; transition: background-color .2s; color: white!important; font-weight: bold; }
.button:hover,
input[type="submit"]:hover { background-color: #d48d07; }




#bird-box { padding-right: 10px; }
#bird-box img { float: left; margin-right: 12px; width: 120px; }
#bird-box a { color: #424040; }
#bird-box a:hover { color: #000; }
#threeD-box img { width: 260px; }


#map-row {margin-bottom: 75px;}
#contact-us {padding-bottom: 0!important;}
#contact-us img.footer-img {width: 110%; margin-left: -50px; margin-top:25px;}

#resources-and-reports ul {margin-top: 20px;}
#resources-and-reports ul li {list-style-type: none; padding-bottom: 5px;}
#resources-and-reports .las {font-size: 2rem; padding-left: 0; margin-right: 5px;}
#resources-and-reports a { color: #000; font-weight: 600; }
#resources-and-reports a:hover { color: #490E67; transition: 0.5s all;}



.hearing { margin-top: 25px; background-color: #f2f2f2; padding: 15px!important;}
.hearing h3 {margin-bottom: 5px!important; margin-top: 10px!important;font-size: 20px; font-weight: bold;}
.hearing ul {margin-top: 15px!important;}


.bookend-screen a {position: absolute; top: 55%; left: 37%; text-align: center; background-color:#490e67; padding: 15px; color: white; }


/*********************************************/
/****** Media Queries ************************/
/*********************************************/
/* Add more queries as needed; 992px is the column breakpoint for "medium"  columns in Bootstrap */
@media screen and (min-width: 2049px) {
    .purpose .popout img {width: 75%;}
    .purpose .popout img.bottom {top: 143px;}
}

@media screen and (min-width: 1610px) {
    .improvements {height: 400px;}
}

@media screen and (min-width: 1595px) {
    #map-row { height: 620px; margin-top: 28px; }

    #meeting-menu { width: 204px; }
    #meeting-menu a { font-size: 1.2em; }
    .scrolled #meeting-header { height: 76px; }
    .scrolled #meeting-header div { background-position: 20px 0; height: 76px; }
    .scrolled #meeting-header div > img { height: 76px; margin: 0; opacity: 1; }
    .scrolled #meeting-header div > img[src*="tag"] { opacity: 0; }
    .scrolled #meeting-header a:last-of-type { margin-top: 6px; margin-right: 6px; }
    .scrolled #meeting-header a img { height: 44px; } 

    .scrolled #meeting-content > div { padding-top: 76px; top: -76px; }
    .scrolled #meeting-menu { padding-top: 76px; }
    /* .bookend-screen p { font-size: 7em; top: 29%;} */
    .bookend-screen > span { font-size: 1.1em; }
    .bookend-screen > span:last-of-type { width: 104px; }
    .bookend-screen > span:last-of-type:before { border-width: 62px 88px; left: -38px; }
    #meeting-body { margin-left: 204px; }
    #meeting-body > div { font-size: 1.2em; padding: 34px 60px 48px; }

    .bookend-screen a span { font-size: .8em; }
    .bookend-screen a p { font-size: 1em; }
    #meeting-body .closing-button { width: 440px; }

    #alternatives { height: 164px; }
    #map-row .col-md-7 h3 > span.minus { line-height: 10px; }
    #map-details ul {height: 362px; }
    #map-details img.noiseimg {padding-top: 30px;}
}


@media screen and (max-width: 1378px) {

    /* .bookend-screen p { font-size: 6em; top: 26%} */
    .bookend-screen a {top: 66%; left: 32%;}
}

@media screen and (max-width: 1230px) {

    #map-row { height: 550px; margin-top: 28px; }

    .contact-open #map-row .col-md-7 { width: 40%; }
    .contact-open #map-row .col-md-9 { width: 60%; }
    .contact-open #map-details { width: 80%; }
    /* .bookend-screen p { font-size: 6em; top: 26%} */
    .bookend-screen a {top: 63%; left: 32%;}


    #end-screen > p { font-size: 3em; line-height: 1.1em; width: 58%; }
}

@media screen and (max-width: 1221px) {
    .improvements {height: 375px;}
}

@media screen and (max-width: 1129px) {
    .purpose h3 span {padding: 0 15px 15px;}
}


@media screen and (max-width: 1072px) {
    .improvements {height: 400px;}
}


@media screen and (max-width: 1064px) {
    .purpose h3 {font-size: 1.2em;}
    
}

@media screen and (max-width: 1026px) {
    .improvements {height: 450px;}
    .bookend-screen a {top: 66%; left: 28%;}

}


@media screen and (max-width: 992px) {
    .bookend-screen a {top: 66%; left: 28%;}

    .vertical-center > div { margin: 0; }
    h1 { font-size: 2.2em; margin: 20px 0 6px; }
    h2 { font-size: 1.7em; margin: 12px 0 0; }
    h3 { font-size: 1.4em; margin: 20px 0 0; }
    h4 { font-size: 1.3em; margin: 28px 0 0; }
    h5 { font-size: 1.2em; margin: 26px 0 0; }
    h6 { font-size: 1.1em; margin: 26px 0 0; }
    p, li { font-size: .9em; line-height: 1.3em; }
    .button { font-size: .8em; border-radius: 12px; padding: 4px 12px 3px; }
    table tr { font-size: .8em; padding: 2px; }

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

    #contact-form { font-size: .9em; line-height: 1.2em; padding: 10px 34px 10px 14px; }

    /* .bookend-screen p {font-size: 5em;} */
    /* .closing-button { height: 100px; padding: 0 16px 0 110px; width: 330px !important; }
    .closing-button img { height: 74px; } */
    #welcome-screen {margin-bottom: 0px;}
    .bookend-screen > span { font-size: .8em; }
    .bookend-screen > span:first-of-type:before { border-width: 34px 20px; top: -17px; }
    .bookend-screen > span:last-of-type { width: 70px; }
    .bookend-screen > span:last-of-type:before { border-width: 48px 60px; left: -26px; }
    .contact-open .bookend-screen p { font-size: 1.8em; }
    .contact-open #meeting-body div { padding: 4px 20px; }
    .contact-open #meeting-header div > img[src*="tag"] { margin-left: 20px; }
    #end-screen > p { font-size: 2.3em; width: 90%; }
    #end-screen .closing-button p { font-size: 1em; }

    .purpose { float: left; width: 100%; }
    .purpose img { margin-bottom: -50px!important; width: 64px; }
    .purpose h3 { font-size: 1.3em; height: 67px; }
    .purpose h3 span { padding: 0 20px 8px; }
    .purpose > div { margin-top: 8px; }
    .purpose > div div { font-size: .9em; padding: 12px 15px; }
    .contact-open .purpose { width: 100%; }
    .contact-open .purpose img { border-width: 1px; width: 48px; }
    .contact-open .purpose h3 { height: auto; padding: 28px 12px 10px; }
    .contact-open .purpose h3 span { position: static; }
    .contact-open #meeting-body .purpose > div { padding: 0; }
    .contact-open .purpose > div p { height: auto; padding: 8px 14px; }
    .contact-open #meeting-body .purpose > div div { padding-top: 18px; }
    .improvements {height: 200px; margin-bottom: 25px;}

    #meeting-body h2 { font-size: 1.6em; margin-top: 14px; }
    /* .contact-open .closing-button { height: 72px; width: 250px !important; }
    .contact-open .closing-button img { height: 54px; left: 6px; top: 8px; } */
    .contact-open #meeting-body .closing-button { font-size: .8em; padding: 0 4px 0 52px;  }
    .contact-open #end-screen > p { font-size: 1.7em; width: 90%; }

    #map-details { margin: 0; position: static; width: 100%; clear:both;}
    #map-details ul li p img {width: 35%;}
    #map-details ul {height: 185px;}
    #map-row { height: auto;}
    #map-row > .col-md-3 { border-right: 0; border-bottom: 2px solid #fff; height: auto; }
    #map-row .col-md-7 h3 { height: 38px; line-height: 36px;  }
    /* #map-row .col-md-7 > div > div { height: 100%; } */
    #map-row .col-md-7 .cross-sections img {width: 55%;}
    #map-row .col-md-9 { height: 420px; }
    .contact-open #meeting-body #map div,
    .contact-open #meeting-body #map-row,
    .contact-open #meeting-body .col-md-3 > div { padding: 0 !important; }
    .contact-open #meeting-body #map-details { margin: 4px; padding: 0 !important; width: 240px; }
    .contact-open #map-row > div { padding: 0 !important; width: 100% !important; }

    .video {margin-bottom: 35px; margin-top: 15px;}
    .alt-options .alts {margin-right: 1%;}
    .alt-steps img {width: 75%; margin-bottom: 25px;}
    div.legend {width: 100%;}
    div.legend p {width: 80%; padding-right: 0;}

}

@media screen and (max-width: 880px) {
    /* .bookend-screen p {font-size: 4em;} */
}

@media screen and (max-width: 800px) {
    .alt-options .alts {width: 31%}
    #lightbox {width: 67%; height: 55%;}
    .refined-options .alts {width: 31%}
    /* #meeting-body > .bookend-screen {height: auto;} */
}

@media screen and (max-width: 777px) {
    .improvements {height: 227px;}
    .bookend-screen a {top: 66%; left: 20%;}

}


@media screen and (max-width: 660px) {
    #welcome-screen {margin-bottom: 55px;}
    .bookend-screen a {top: 66%; left: 15%;}
    .container { width: 100%; }

    #main-content { width: 100%; }
    #meeting-content > div { padding-top: 40px !important; top: -40px !important;  }
    .started #meeting-header, #meeting-header { height: 40px!important; z-index: 3;}
    #meeting-header > div { background-position: 0 !important; height: 40px !important; }
    #meeting-header img { height: 40px !important; margin: 0 !important; opacity: 1 !important; padding: 4px !important; }
    #meeting-header div > img[src*="tag"] { display: none; }
    #meeting-header a:first-of-type { color: #fff; display: inline-block; padding: 6px 6px 0 12px; vertical-align: top; }
    #meeting-header a img { margin: 2px 0 !important; height: 34px !important; padding: 3px !important; }
    #meeting-header a:last-of-type { margin: 0 !important; margin-right: 40x !important; padding: 0 8px !important; }
    #meeting-header a:last-of-type:hover { background-color: transparent; }
    #meeting-header > a:first-of-type { display: inline-block; }

    #meeting-menu { height: 100%; left: -100%; padding-top: 40px !important; position: fixed; top: 0; transition: left .5s; width: 100%; z-index: 2; }
    #meeting-menu a { font-size: 1em; }
    #meeting-body { margin: 0; }
    #contact-form { left: 100%; margin-top: 40px; padding-bottom: 40px; position: fixed; font-size: .8em; transition: left .5s; width: 100%; }
    .contact-open #contact-form { left: 0; }
    .menu-open #meeting-menu { left: 0; }
    #welcome-screen {margin-bottom: 15px;}
    /* .bookend-screen p { font-size: 4em; top: 30%; } */
    #meeting-body .bookend-screen { height: 50%; padding: 30px 20px 0; }
    .bookend-screen > span { display: none; }
    .bookend-screen > span:before { display: none; }
    .bookend-screen > span:last-of-type { animation-iteration-count: 0; padding-top: 8px; right: 8px; top: 8px; }
    #end-screen .closing-button { margin-bottom: 20px; }
    #end-screen > p { margin: 8px auto 24px; }
    .improvements {height: 227px;}
    .tab {height: 165px; padding:5px;}
}

@media screen and (max-width: 532px) {
.improvements {height: 227px;}
.extra {height: 300px;}
.video img {box-shadow: 0 4px 7px -3px;}

}

@media screen and (max-width: 480px) {
    /* .bookend-screen p { font-size: 3em; top: 30%; } */
    .panel-tab {margin-bottom: 50px;}
    .bookend-screen a {top: 66%; left: 1%;}
    .bookend-screen p { font-size: 2.5em; top: 10%; }
    .bookend-screen h5 {top: 40%; font-size: 1em; left: 12.5%;}

    .purpose { width: 100%; }
    .purpose img { border-width: 1px; width: 48px; }
    .purpose h3 { height: auto; padding: 28px 12px 10px; }
    .purpose h3 span { position: static; }
    .purpose > div p { padding: 8px 14px; }
    #meeting-body .purpose > div div { padding-top: 18px; }
    .purpose > div div a { border-width: 2px; margin-bottom: 8px; }
    #meeting-body > div { padding: 8px 20px; }
    #end-screen > p { font-size: 1.5em;}
    #meeting-body h2 { margin-top: 24px; }

    #meeting-body #ongoing-outreach { padding: 25px 0 0; }
    #meeting-body #alternatives { padding: 0; }
    #meeting-body #alternatives h5 { font-size: .8em; }
    #meeting-body #alternatives > div { height: auto; padding: 6px; }
    #meeting-body #alternatives > div > div { display: inline-block; float: none; height: auto; margin-bottom: 4px; padding: 2px; width: 48%; }
    #meeting-body #alternatives > div > div img { position: static; margin: 6px auto 5px; width: 80%; }
    #meeting-body #refinement { padding: 0; width: 100%; }
    #meeting-body .refining #alternatives > div { height: 0; }

    /* .closing-button { font-size: .8em; height: 64px; padding: 0 8px 0 66px; width: 240px !important; } */
    .closing-button img { left: 8px; top: 8px; }
    #evaluation-of-alternatives {margin-bottom: 0px;}
    #map-row {margin-bottom: 50px;}
    #map-row .col-md-7 h3 { font-size: .85em; }
    #meeting-body #map-row .col-md-7 > div > div { padding: 10px 13px; }
    #map-row .col-md-7 p { font-size: .8em; line-height: 1.2em; }
    #map-row .col-md-9 { height: auto; }
    #map-row #map { height: 380px; }
    #map-details h4 { font-size: .8em;  }
    #map-details ul { padding: 6px 8px 2px; }
    #map-details ul li { padding-left: 30px; }
    #map-details ul li p { font-size: .8em;margin-bottom: 3px; }
    #map-details ul li span { height: 6px; top: 4px; width: 22px; }
    #map-details ul li img { width: 22px; }

    .tab {padding-top: 15px; font-size: 13px; text-align: left;}
    #evaluation-of-alternatives {margin-top: 0px;}

}

@media screen and (max-width: 414px) {
    #alternatives-development-process .col-sm-12 {padding: 0;}
    .tab {font-size: 11px; padding: 2px;}
    .alt-options .alts {width: 48%;}
    .refined-options .alts {width: 47%;}
    #map-details ul {height: 209px}
    #map-details ul li p img {width: 80%;}
    div.legend p img {width: 100%;}

    #lightbox img {display: block; width: 100%; height: auto; margin: 0 auto;  background-color: #fff;}
    #lightbox > span { background-color: rgba(0,0,0,.75); ; cursor: pointer; height: 100%; position: absolute; top: 0; width: 100%; }
    p.instructions { padding: 10px 15px;}
    .bookend-screen p { font-size: 2.5em; top: 10%; }
    .bookend-screen h5 {top: 30%; font-size: 1em; left: 12.5%;}
    .improvements {height: 100%}
    .purpose > div p {padding: 8px 14px 25px; margin-bottom: 60px;}

    #lightbox {width: 100%; height: 100%;}
}

@media screen and (max-width: 376px) {
    #lightbox {width: 100%; height: 65%;}
    .bookend-screen p { font-size: 2.5em; top: 8%; }
    .bookend-screen h5 {top: 40%; font-size: 1em; left: 12.5%;}

}



@media screen and (max-width: 320px) {
    .improvements {height: 330px;}
}