html, body { color: #333; font-family: "Roboto", 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; }

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

/* Headers */
h1 { font-size: 3.3em; margin: 30px 0 22px; }
h2 { font-size: 2.2em; margin: 12px 0 0; }
h3 { font-size: 1.8em; margin: 28px 0 0; }
h4 { font-size: 1.4em; margin: 28px 0 0; font-weight: bold;}
h5 { font-size: 1.4em; margin: 26px 0 0; }
h6 { font-size: 1.3em; margin: 26px 0 0; }

/* Paragraphs & Lists */
p { line-height: 1.5em; margin: 16px 0 6px; font-size: 18px;}
ul li {font-size: 18px;}
/* ul, ol { margin: 16px 0 10px; }
li {  line-height: 1.4em; margin-bottom: 8px; } */


#left {height: 100%; }
.container-L {margin: 0; padding: 0; }


/* HEADER */
.header {width: 100%; height: 100%;}
.header .logo-box {background-color: #1A3E71; height: 200px;}
.header .logo-box img {width: 100%; padding: 50px 5px;}

/* NAV */
nav {width: 16.66667%; position: fixed; background-color: rgb(251, 251, 251); height: 100%;}
nav ul {padding-left: 0;}
nav ul li {list-style-type: none; padding-top:10px; font-weight: bolder; }
nav ul li.y-line {border-left: solid #FAB337 10px; height: 100%; padding-left: 10px;}
nav ul li.b-line {border-left: solid #03ADB8 10px; height: 100%; padding-left: 10px;}
nav ul li.t-line {border-left: solid #1A3E71 10px; height: 100%; padding-left: 10px;}
nav ul .normal li { margin-left: 45px; font-weight: normal!important; list-style-type: circle;}
nav ul li a {color: #333;}
.nav-slider .las { font-size: 16px; float: right; color: #1A3E71; padding-right: 10px;}
.nav-slider li:hover {color: #1A3E71; transition: 0.5s all;cursor: pointer;}

ul.panel {padding: 0!important; border: none; background-color: white; display: none; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; background-color: rgb(251, 251, 251); height: 100%;}
ul.panel.show { display: block; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s;}
ul.panel { padding-top: 15px;}

.survey {background-color: #FAB337; text-align: center; padding: 15px; margin: 25px auto; width: 85%;}
.survey h4 {margin: 0; font-size: 14px; vertical-align: top; line-height: 27px;}
.survey a {color: white;}
.survey a:hover {color: #1A3E71; transition: 0.3s all;}
.survey h4 a span {font-size: 12px; font-weight: lighter; line-height: 15px; display: block;}

.doc-button {margin-top: 50px;}
.doc-button a {background-color:#1A3E71; color: white; padding: 15px;}
.doc-button a:hover {background-color: #03ADB8; transition: 0.3s all;}

#right {height: 100%;}
.container-R {margin: 0; padding: 0; }
.content {width: 85%; margin: 0 auto;}

/* WELCOME BANNER */
.welcome-banner {width: 100%; position: relative;}
.welcome-banner img {width: 100%; margin-top: -239px;}
.welcome-title .left-panel {background-color: rgba(3, 173, 184, 0.77); width: 50%; position: absolute; top:35%}
.welcome-title .left-panel h1 {font-size: 200px; text-align:right; color: white; }
.welcome-title .right-panel {width: 50%; position: absolute; top:35%; right: 10px;float: right; padding-left: 25px; }
.welcome-title .right-panel h2 {font-size: 80px; text-align:left; color: white; line-height: 100px; border-bottom: solid #FAB337 10px; }

/* ABOUT */
#about .about-banner {background-color: #FAB337; width: 100%; height: 75px; padding-top: 0; margin-top: 0;}
#about .about-banner h2 {color: white; padding: 25px 0 15px 25px; margin: 0; font-weight: bold;}
#about p {width: 90%; margin-top: 100px; font-size: 18px;}
#about img {width: 75%; margin: 25px auto 0; display: block;}

/* SCHEDULE */
#schedule {margin-top: 50px;}
#schedule h3 {color:#FAB337; border-bottom: solid #FAB337 5px; font-weight: bolder; width: 100%; padding-bottom: 10px;}
#schedule img {width: 100%;}

/* MPO */
#MPO h3 {color:#FAB337; border-bottom: solid #FAB337 5px; font-weight: bolder; width: 100%; padding-bottom: 10px;}
#MPO img {width: 100%;}

/* LRTP */
#LRTP h3 {color:#FAB337; border-bottom: solid #FAB337 5px; font-weight: bolder; width: 100%; padding-bottom: 10px;}
#LRTP h5 {background-color: #FAB337; width: 30%; color: white; font-size: 20px; padding: 15px; margin-top: 25px; display: block; }
#LRTP h5:hover {background-color: #03ADB8; transition: 0.5s all;}

/* RESOURCES */
#resources {margin-top: 50px;}
#resources h3 {color:#FAB337; border-bottom: solid #FAB337 5px; font-weight: bolder; width: 100%; padding-bottom: 10px;}
#resources h5 {background-color: #FAB337; width: 35%; color: white; font-size: 20px; padding: 15px; margin-top: 25px; display: block; }
#resources h5:hover {background-color: #03ADB8; transition: 0.5s all;}

/* TRANSPO TALK */
#transpo {margin-top: 50px;}
#transpo .talk-banner {background-color: #03ADB8; width: 100%; height: 75px; padding-top: 0; margin-top: 0;}
#transpo .talk-banner h2 {color: white; padding: 25px 0 15px 25px; margin: 0; font-weight: bold;}
#transpo h3 {color:#1A3E71; border-bottom: solid #03ADB8 5px; font-weight: bolder; width: 100%; padding-bottom: 10px; margin-top: 75px;}
#transpo p {width: 85%; }
#transpo img {width: 65%; margin-top: 50px;}

/* #blog-slider { height: 800px; } */
div.slider { height: 100%; overflow: hidden; position: relative; }
div.slider > div { height: 100%; position: relative; top: 75px; }
div.slider > div > div { display: inline-block; height: 100%; padding: 0 54px; vertical-align: top; margin-bottom: 60px;}
div.slider > a.slide-arrow { border: 3px solid #03ADB8; border-radius: 100%; color: #03ADB8; left: 90px; position: absolute; text-align: center; top: 2%; width: 28px; }
div.slider > a.slide-arrow.slide-arrow-right { left: auto; padding-left: 2px; right: 90px; }
div.slider > ul { border-bottom: 1px solid #6f7073; left: 12%; margin: 25px auto; position: absolute; width: 75%; text-align: center; padding: 0;}
div.slider > ul > li { display: inline-block; margin: 2px 3px; }
div.slider > ul > li > a { background-color: #1A3E71; border-radius: 100%; display: block; height: 10px; width: 10px; text-align:center;}
div.slider > ul > li.showing > a { background-color: #03ADB8; }
#blog-slider h3 {text-transform: uppercase;}


/* STAY INVOLVED */
#involved {margin-top: 50px;}
#involved .contact-banner {background-color: #1A3E71; width: 100%; height: 75px; padding-top: 0; margin-top: 0;}
#involved .contact-banner h2 {color: white; padding: 25px 0 15px 25px; margin: 0; font-weight: bold;}
#involved h3 {color:#1A3E71; border-bottom: solid #1A3E71 5px; font-weight: bolder; width: 100%; padding-bottom: 10px; margin: 0;}
#involved p {width: 90%; }
#involved .row {margin-top: 50px;}
#involved .coming-soon p {background-color: #1A3E71; width: 75%; color: white; font-size: 24px; padding: 25px; text-align: center; height: 100px; margin: 0;}

.current-events blockquote {border-left: #1A3E71 6px solid; margin-top: 25px; background-color: #fbfbfb; width: 90%;}

.past-events h4 {font-size: 1.2em; margin-bottom: 0; padding-bottom: 5px;}
.past-events h5 {font-size: 16px; color: #333; margin-top: 0; font-style: italic;}
.past-events p {font-size: 15px;}
.past-events a {font-size: 15px;}


.resp-container {position: relative; overflow: hidden; padding-top: 56.25%;}
.resp-iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}

/* 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"] { background-color: #1A3E71; 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 { background-color: #03ADB8; }

/* TOOLTIP */
span.tooltips { position: relative; display: inline-block; border-bottom: 1px dotted black; font-size: 18px; color: #333; cursor: pointer; }
span.tooltips .tooltiptext { visibility: hidden; width: 200px; background-color: #1A3E71; color: #fff; text-align: center; border-radius: 6px; padding: 10px 10px; /* Position the tooltip */ position: absolute; z-index: 1; }
.tooltip-top { bottom: 125%; left: 50%; margin-left: 30px;}
span.tooltips:hover .tooltiptext { visibility: visible; transition: 0.5s all;}

span.tooltipx { position: relative; display: inline-block; border-bottom: 1px dotted black; font-size: 18x; color: #333; cursor: pointer; }
span.tooltipx .tooltiptext { visibility: hidden; width: 200px; background-color: #1A3E71; color: #fff; text-align: center; border-radius: 6px; padding: 10px 10px; /* Position the tooltip */ position: absolute; z-index: 1; }
.tooltip-top { bottom: 125%; left: 50%; margin-left: 30px;}
span.tooltipx:hover .tooltiptext { visibility: visible; transition: 0.5s all;}

.current-events ul li {font-size: 15px}


/* FOOTER */
.footer {background-color: #1A3E71; height: 100px; bottom: 0;}
.footer .logo img {width: 40%; padding-top: 15px;}
.footer .social img {padding-top: 25px; padding-right: 15px; float: right;}


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

@media screen and (max-width: 1536px) {
    #about img {width: 100%;}
    #LRTP h5 {width: 50%;}
    #resources h5 {width: 50%;}
    #transpo img {width: 100%;}
    .hidden {display: none;}
    .full {width: 100%;}
    div.slider > div > div { margin-bottom: 80px;}
}

@media screen and (max-width: 1436px) {
    nav ul li {font-size: 13px;}
}

@media screen and (max-width: 1354px) {
    nav ul li {font-size: 12px;}
}

@media screen and (max-width: 1275px) {
    .nav-slider .las {font-size: 14px; padding: 0; float: right;}
}


@media screen and (max-width: 1230px) {
.header .logo-box img {padding: 75px 5px;}

nav {width: 16.667%; position: fixed; }
nav ul li {font-size: 11px; padding-left: 10px;}
nav ul li a {margin-left: 2px; color: #333;}
nav ul .normal li { margin-left: 25px; font-weight: normal!important;}

.welcome-banner img {margin-top: -196px;}
.welcome-title .left-panel {top: 25%;}
.welcome-title .left-panel h1 {font-size: 150px;}
.welcome-title .right-panel h2 {font-size: 50px; line-height: 60px;}

#about img {margin-top: 40px; width: 100%;}
#about p {font-size: 15px; margin-top: 70px;}
#schedule h3 {margin-top: 50px;}
#MPO h3 {margin-top: 75px;}
#LRTP h3 {margin-top: 75px;}
#LRTP h5 {width: 50%;}
#resources h3 {width: 50%;}
#resources h5 {width: 55%;}
#transpo p {font-size: 15px; width: 100%;}
.slider-slide li {font-size: 15px; width: 100%;}

#involved p {font-size: 15px;}

/* div.slider > a.slide-arrow {top:95%;} */

}

@media screen and (max-width: 1116px) {
    .nav-slider .las {font-size: 13px; padding: 0; float: right;}
}

@media screen and (max-width: 992px) {
    .header {height: auto;}
    .header .logo-box {height: 150px;}
    .header .logo-box img {width: 50%; padding-top: 25px; margin: 0 auto; display: block;}
    .content {width: 85%; margin: 0 auto;}
    nav {width: 100%; position: relative; height: 100%; padding-bottom: 5px; margin-bottom: 25px; z-index: 1; background-color: white;}

    .container-R {overflow-x: hidden;}
    #about img {width: 65%;}
    #about p {width: 100%;}
    #transpo img {width: 45%; margin: 0 auto; display: block;}
    #involved {height: 2300px}
    div.slider > div > div { margin-bottom: 100px;}

}


@media screen and (max-width: 640px) {
.header {height: 100px; }
.header .logo-box {height: 100px;}
.header .logo-box img {width: 50%; padding-top: 25px; margin: 0 auto; display: block;}
.content {width: 85%; margin: 0 auto;}
nav {width: 100%; position: relative; height: 100%;padding-bottom: 10px;  margin-bottom: 25px; z-index: 1; background-color: white;}

.welcome-banner img {margin-top: -48px;}
.welcome-title .left-panel {top: 25%;}
.welcome-title .left-panel h1 {font-size: 50px;}
.welcome-title .right-panel {top: 25%;}
.welcome-title .right-panel h2 {font-size: 20px; line-height: 20px;}

p {width: 100%!important; font-size: 14px; margin: 0; padding: 5px;}
span.tooltips {font-size: 14px;}

#about .about-banner h2 {text-align: center; padding: 20px;}
#about p {margin-top: 20px;}
#about img {margin-top: 20px;}

#schedule {margin-top: 20px;}
#schedule h3 {width: 100%; margin-top: 0;}

#MPO h3 {width: 100%; margin-top: 30px;}

#LRTP h3 {width: 100%; margin-top: 30px;}
#LRTP h5 {width: 100%;}

#resources {margin-top: 20px;}
#resources h3 {width: 100%; }
#resources h4 {font-size: 15px; padding: 0; padding-top: 15px;}
#resources h5 {width: 100%;}

h4 {padding: 0 15px 0 15px; margin: 0;}

#transpo .talk-banner h2 {font-size: 24px;}
#transpo img {display: none;}
#transpo h3 {width: 100%; margin-top: 20px; font-size: 1.6em;}

#blog-slider {height: 1350px;}
div.slider > div > div {margin: 0 auto; padding: 0 25px; }

div.slider > a.slide-arrow {left: 100px; top: 98%; z-index: 100;}
div.slider > a.slide-arrow.slide-arrow-right {right: 100px; top: 98%; z-index: 100;}

#involved h3 {width: 100%; margin-top: 20px;}
#involved .coming-soon p {width: 100%;}
#involved .row {margin-top: 0;}
#events h4 {font-size: 15px; padding-top: 20px; color: #FAB337;}

.footer {height: 180px;}
.footer .logo img {display: block; margin: 0 auto;}
.footer .social {text-align: center;}
.footer .social img {display: inline-block; margin: 0 auto; float: none; }
}

@media screen and (max-width: 360px) {
    #about .about-banner {height: 100%;}
    #blog-slider {height: 1600px;}

}