html, body { color: #2B2B2B; font-family: 'Arial', sans-serif; -webkit-font-smoothing: antialiased; }
.container { padding: 0; width: 100%; }
.row { margin: 0; }
.row > div { padding: 0 1.5% 12px; }
.content { width: 80%; margin: 0 auto;}
.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: #FFA61C; 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: #59C1F5; color: #fff; }
.button:focus { color: #fff; }

/* Headers */
h1 { font-size: 75px; letter-spacing: 0.09em; font-family: 'Arial', sans-serif; color: #333333;}
#resoures h1 {color: white;}
h2 { font-size: 40px; margin: 12px 0 0; font-family: 'Arial', sans-serif; font-weight: 700; color: #2B2B2B; text-align: center;}
h3 { font-size: 1.8em; margin: 28px 0 0; font-family: 'Arial', sans-serif; color: #003F5E; }
h4 { font-size: 1.2em; margin: 28px 0 0; font-family: 'Arial', sans-serif; font-weight: 700; color: #fdbb30;}
h4 a { font-size: 1.2em; margin: 28px 0 0; font-family: 'Arial', sans-serif; font-weight: 700; color: #fdbb30;}
#contact h4 {color: white;}

.hr {border-bottom: 10px solid #6A9FA6; margin-bottom: 30px; width: 10%;}

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

/* 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: #fdbb30; 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: #59C1F5; }


/* Accordion  (can remove if not needed)*/
.accordion-header { cursor: pointer; }
.accordion-header i { font-size: .7em; margin-left: 12px; transition: transform .45s; vertical-align: middle; }
.opened .accordion-header i { transform: rotate(180deg); }
.accordion > div { padding: 3px 0; }

/* Modal Window   (can remove if not needed)*/
#modal-window { height: 100%; left: 0; position: fixed; top: -100%; transition: top .95s; width: 100%; }
#modal-window.showing { top: 0; }
#modal-window > span { background-color: rgba(0,0,0,.75); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#modal-window > span > span { color: #fff; font-size: 3em; line-height: .6em; padding: 13px 15px; position: absolute; right: 0; top: 0; transition: color .2s; }
#modal-window > span > span:hover { color: #ddd; }
#modal-window > div { background-color: #fff; border: 1px solid #333; box-shadow: 1px 63px 58px 0 #111; height: 78%; margin: -84px auto 0; padding: 12px 16px; position: relative; transition: 1s ease-in-out .1s; width: 70%; }
#modal-window.showing > div { box-shadow: 4px 13px 28px 0 #111; margin-top: 60px; }

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

#header {display: inline-block; width: 100%;}
#header .header {position: relative; display: inline-block; width: 100%;}

#header .header .bg-left {position: absolute; background-color: #705ed8; width: 35%; height: 100%;}
#header .header .bg-left img {width: 15%; margin-top: 10%; margin-left: 10%;}
#header .header .bg-left p { margin-left: 10%; font-size: 16px; color: white; font-weight: 100;}
#header .header .bg-left h1 { margin-left: 10%; font-size: 3em; color: white; font-weight: 700; width: 80%; letter-spacing: 0;}

#header .header .bg-left h1.big {font-size: 3.5em;}

#header .bg-right {width: 65%; float: right;}

#header .bg-right img {width: 100%;}

#header nav {padding-top: 5px; position: absolute; z-index: 1; background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(255,255,255,0) 100%); width: 65%; float: right; text-align:center;}
#header nav ul {list-style-type: none; margin-left: 5%;}
#header nav ul li {display: inline-block; padding-right:9.5%;}
#header nav ul li a {display: block; font-weight: 700; color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
#header nav ul li a:hover {color: #fff; border-bottom: 5px solid lightgrey; font-weight: 700; transition: 0.5s all;}
.active {border-bottom: 5px solid #fdbb30; font-weight: 700;}

.announcement {background-color: #fdbb30; padding: 10px 25px 25px; margin-bottom: 25px; text-align: center;}
.announcement p { color: #333; font-size: 120%;}
.announcement a {color: #fff;}
.announcement a i {font-size: 40px; color: white;}


/* .content-fw {background-color: rgba(106, 159, 166, 0.23); } */
.intro-section {width: 75%; margin: 0 auto;}
.intro-header h2 {padding: 25px 0;  text-align: center;}
.intro img {width: 100%;}
.intro > div {background-color: #f2f2f2; padding-top: 10px; margin-bottom: 50px; height: 345px}
.intro span {font-weight: 900; font-size: 25px; padding: 20px 20px 0 20px;}
.intro div p {padding: 0px 20px 20px 20px;}

/* .mailing-list {border-top: solid 2px #333;} */
div.mailing {padding: 2% 0 2% 0.5%;}
div.mailing p {font-size: 18px; font-weight: bolder;}

.gray {background-color: #f2f2f2; width: 100%; padding-bottom: 50px;}
.gray .about h2 {padding-top: 50px;}
.gray img {width: 100%; }
.about {width: 85%; margin: 0 auto; padding-top: 50px; padding-bottom: 50px;}
.about hr {border-bottom: solid 5px #846FFD; width: 60%;}
.about p {font-size: 18px; width: 60%; margin: 40px auto; text-align: center; }
.about ul {padding-left: 25%;}
.about ul li {font-size: 18px;}

.about h3 {color:#846FFD; font-weight: bold; text-align: center;}
.about img {width: 100%;}
.about iframe {margin: 0 auto; display: block;}

.about .lightbox {width: 90%; margin: 0 auto; display: block;}

.committee p {text-align: center; margin-top: 5px; margin-bottom: 2px;}

h2.undermap {margin-top: 50px;}

.split {width: 100%;}
.split-left { height: 350px; background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");}


.split-left h2 {padding-left: 35%; text-align: left; padding-top: 18%;}
.split-right {padding-top: 5%!important; padding-right: 20%!important;}
.split-right p { font-size: 16px; }

.study-section h2 {text-align: left;}



/* Light Blue Section */
.light-blue-section { background-color: #705ed8; padding: var(--vert-spacing-mobile) var(--side-spacing-mobile);}

.light-blue-section .icon-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; margin-left: calc(var(--side-spacing-mobile)/2 * -1); margin-right: calc(var(--side-spacing-mobile)/2 * -1); margin-top: 40px;}

.light-blue-section .icon-row .icon-block { width: 250px; padding: 0 20px; margin-bottom: 10px;
}

.light-blue-section .icon-row .icon-block .icon-continer {width: 95px; height: 95px; padding: 20px; border-radius: 100%; border: solid 3px #FDBB30; margin-left: auto; margin-right: auto; margin-bottom: 10px;}

.light-blue-section .icon-row .icon-block .icon-continer .icon { width: 100%; height: auto;}

.light-blue-section .icon-row .icon-block .icon-title {color: #0E406A; font-size: 20px; font-style: normal; font-weight: 700; line-height: 26px; letter-spacing: 0em; text-align: center; text-transform: uppercase;}

.light-blue-section .icon-row .icon-block p { font-size: 16px; font-style: bold; font-weight: 400; line-height: 23px; letter-spacing: 0em; text-align: center; padding-bottom: 15px; color: #fff; }

.light-blue-section h2 {text-align: left; color: #fff; font-size: 30px; text-align: center; width: 45%; margin: 0 auto; padding-top: 4%;}

@media only screen and (min-width : 992px) {
    .light-blue-section {padding: var(--vert-spacing-desktop) var(--side-spacing-desktop);    }

    .light-blue-section .icon-row {
        margin-left: calc(var(--side-spacing-desktop)/2 * -1);
        margin-right: calc(var(--side-spacing-desktop)/2 * -1);
        margin-top: 60px;
    }

    .light-blue-section .icon-row .icon-block {
        margin-bottom: 20px;
    }

    .light-blue-section .icon-row .icon-block .icon-continer {
        margin-bottom: 20px;
    }
}

/* END Light Blue Section */


div.head-hr {border-bottom: 6px #6A9FA6 solid; width: 20%; padding-top:0; margin-top:0; margin-left: 20px; margin-bottom: 0;}


.map-header {margin-top: 50px; padding: 25px 0 0;}
.map-header img {width: 100%; margin-bottom: 50px;}


.schedule-section {margin-bottom: 50px;}
.schedule-header img {width: 100%;}

.content-ue {background-color: #851849; }
.up-events { width: 85%; margin: 50px auto 0; }
.up-events h2 {padding: 25px 0 0; color: #ffffff;}
.up-events-hr {border-bottom: 10px solid #fff; margin-bottom: 30px; width: 10%;}
.up-events p a {color: #fff; text-decoration: underline;}
.up-events p a:hover {color: #6A9FA6; text-decoration: none; transition: 0.5s all;}
.up-events p {color: #ffffff;}

.carousel { margin: 0; /* space for prev/next buttons */ }
.carousel-cell { width: 100%; background: #086788; border-radius: 5px; }
.carousel-cell img {width:100%;height:100%;max-height:550px;}
  


.resources-section {margin-top: 50px;}
.public {margin-bottom: 50px;}

.document {margin-bottom: 50px;}
.document span {font-weight: 300; color: darkgray;}
.document h3 {margin: 5px 0 0;}
.document p {margin: 5px 0 0;}
.document h4 a {margin: 10px 0 0;}
.document .border {width: 80%; border-bottom: solid 1px darkgray; padding-top: 15px;}

.helpful-links .col-sm-5 {padding: 0!important;}
.helpful-links h2 {margin-top: 50px; }
.helpful-links ul { list-style-type: none; text-align: center; padding-left: 0px;}
.helpful-links ul li a {text-decoration: underline; padding-top: 5px; padding-bottom: 15px; display: block; color: #086788;}
.helpful-links ul li a:hover {padding-left: 15px; transition: 0.5s all; background: rgba(255, 255, 255, 0.2);}

.survey {background-color: rgba(106, 159, 166, 0.23); border-top: solid 6px #6A9FA6; border-bottom: solid 6px #6A9FA6;}
a.pink-button {background-color: #851849; box-shadow: 0px 2.976px 2.976px rgba(0, 0, 0, 0.25); border-radius: 2.232px; color: #fff; padding: 8px 12px; margin-top: 25px; margin-bottom: 25px; display: block; width: fit-content; }

a.yellow-button {background-color: #fdbb30; box-shadow: 0px 2.976px 2.976px rgba(0, 0, 0, 0.25); border-radius: 2.232px; color: #000; padding: 25px 12px; display: block; width: 100%; text-align: center; height: 80px; font-size: 25px; font-weight: 900; margin-top: 25%; margin-bottom: 50px;}

a.yellow-button:hover {box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25); transition: 0.5s all;}


.contact-info { background-color: rgba(106, 159, 166, 0.23); border-top: solid 6px #6A9FA6; border-bottom: solid 6px #6A9FA6; padding: 50px!important; margin-bottom: 50px; }
.contact-info span {font-size: 20px; font-weight: 600; vertical-align: middle; padding-left: 5px; }
.contact-info a {color: #333;}
p a {color: #851849;font-weight: 500;}

.footer {background-color: #333333; padding: 25px 10%;}
.footer h2 {text-align: left; color: #fff;}
.footer .logos img {margin-top: 50px; width: 15%; margin-bottom: 50px; margin-right: 10px;}

.footer .email-link {margin-top: 6%;}
.footer a.email {color: white;}
.footer a.email:hover {color: #FDBB30; transition: 0.5s all;}
.footer .email-link a:hover {color: #FE7C1C; transition: 0.5s all; }


.footer nav {padding-top: 15px; position: absolute; z-index: 1; width: 100%;}
.footer nav ul {list-style-type: none; margin-left: 5%;}
.footer nav ul li {padding-right:3.5%;}
.footer nav ul li a {display: block; font-weight: 700; color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.footer nav ul li a:hover {color: #FE7C1C; transition: 0.5s all; }

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

 /* Meeting Blurb */
.meeting-blurb {
     display: flex;
     justify-content: left;
     align-items: left;
     height: 100%;
     padding: 20px;
 }
 
 .meeting-blurb .meeting-date {
     color: #fff;
     font-size: 30px;
     font-style: normal;
     font-weight: 400;
     line-height: 38px;
     letter-spacing: 0em;
     text-align: center;
     padding-right: 20px;
 }
 
 .meeting-blurb .meeting-date .number {
     font-size: 55px;
     font-style: normal;
     font-weight: 700;
     line-height: 71px;
     letter-spacing: 0em;
 }
 
 .meeting-blurb .meeting-details {
     padding-left: 20px;
 }
 
 .meeting-blurb .meeting-details h4 {
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 21px;
     letter-spacing: 0em;
     color: #fff;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
 .meeting-blurb .meeting-details .icon-and-text {
     display: inline-block;
     /* align-items: flex-start; */
 }
 
 .meeting-blurb .meeting-details .icon-and-text .icon {
     width: 15px;
     height: auto;
     margin-right: 6px;
     margin-top: 2px;
     vertical-align: top;
 }
 
 .meeting-blurb .meeting-details .icon-and-text .text {
     display: inline-block;
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
     line-height: 19px;
     letter-spacing: 0em;
     margin-top: 0;
 }
 
 
 /* END Meeting Blurb */

 #popup { height: 100%; left: 0; opacity: 0; position: fixed; top: -100%; transition: opacity .3s, top 1s; width: 100%; z-index: 4; }
#popup > span { background-color: rgba(0,0,0,.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#popup > div {border-top: solid 15px #fdbb30;border-bottom: solid 15px #fdbb30; }
/* #popup > div img {width: 15%; margin: 25px 16px; padding-bottom: 10px;} */

#popup > div > p {font-size: 1.5em!important;}
#popup > span > span { color: #fff; cursor: pointer; font-size: 2em; line-height: .6em; padding: 12px 16px; position: absolute; right: 0; top: 0; }
#popup > div { background-color: #fff; box-shadow: 0 14px 9px -6px #333; left: 26%; padding: 26px 34px 40px; position: absolute; text-align: center; top: 22px; width: 50%; }
#popup.showing { opacity: 1; top: 0; }
button.corridor-study-btn {border: none; background-color: transparent; margin: 25px;}
button.corridor-study-btn a {background-color: #612c83; padding: 15px; border-radius: 0.5rem; width: 75%; color: #fff; font-weight: bold; font-size: 1.4em;}
button.corridor-study-btn a:hover {background-color: #cea3ea; text-decoration: none; transition: 0.5s all; color: #000; }

/* Lightbox */
.lightbox img { width: 100%; }
.lightbox > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; height: 0; left: -100%; margin: 0; position: absolute; top: 0; transition: height .4s, left 0s ease-in-out .4s; visibility: hidden; width: 100%; }
.lightbox > div { top: 80px; }
.lightbox > div .close-lightbox { background: 0; border: 0; font-size: 3em; display: none; position: absolute; right: 10px; top: 0; }
.lightbox > div .close-lightbox span { left: -9999px; position: absolute; }
.lightbox.enhanced { height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 5555; }
.lightbox.enhanced > button { height: 100%; left: 0; transition: height .6s, left 0s; visibility: visible; }
.lightbox.enhanced > div { background-color: #fff; border: 1px solid #333; box-shadow: 4px 13px 28px 0 #111; left: 6%; margin: 0; max-height: 80%; overflow: auto; position: absolute; top: 40px; transition: .8s; width: 86%; }
.lightbox.enhanced > div .close-lightbox { display: block; }
.lightbox hr {margin-top: 10px; margin-bottom: 5px; border: 0; border-top: solid 1px darkgray; width: 100%;}

@media screen and (max-width: 992px) {
    .lightbox.enhanced a { display: block; overflow: auto; }
    .lightbox.enhanced img { width: 260%; }
}



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

@media screen and (max-width: 1443px) {
    #header .header .bg-left h1 {font-size: 2.4em;}

}

@media screen and (max-width: 1200px) {
    #header .header .bg-left img {margin-top: 10%;}
    #header .header .bg-left h1.big {font-size: 3em;}

}

@media screen and (max-width: 1105px) {
    #header .header .bg-left h1 {font-size: 2em;}
    #header nav ul li {padding-right: 2.5%}
    #header nav ul li a {letter-spacing: 0; font-size: 14px}

    .split-left h2 {padding-left: 25%;}
}

@media screen and (max-width: 1025px) {
    .footer .logos img {display: block; margin-bottom: 25px;}

}


@media screen and (max-width: 992px) {
     #header .header .bg-left {width: 100%; position: relative;}
     #header .header .bg-left img {margin-top: 10% auto}
     #header .header .bg-left h1 {width: 85%; font-size: 3em;}
     #header .bg-right {width: 100%; margin-bottom: 50px;}
     #header .bg-right img {display: none;}
     #header nav {width: 100%; background: #333; position: relative; }
     #header nav ul {text-align: center; margin: 15px auto;}

     .split-left h2 {padding-left: 15%; font-size: 30px;}



}

@media screen and (max-width: 767px) {
    #header nav {padding: 20px 10px;}
    #header nav ul {padding-left: 0;}
    .mailing img {display: block; margin: 0 auto;}
    div.mailing p {text-align: center; font-size: 24px;}

    .split-left {height: 150px;}
    .split-left h2 {padding-top: 8%;  font-size: 35px; padding-left: 0; text-align: center;}

    .split-right {padding-right: 0!important;}
    .split-right p {width: 85%; margin: 10px auto; text-align: center;}
    .split-right img {display: block; margin: 0 auto;}

    .light-blue-section h2 {width: 75%;}

    .footer {padding: 25px 5%;}
    .footer h2 {text-align: center;}
    .footer .logos img, .footer .logos a {margin: 25px auto; display: block; text-align:center;}
    .footer .logos img {width: 10%;}
    .footer nav {position: relative; text-align: center; }
    .footer nav ul {display: inline-block; margin-left: 0; text-align: center; padding-left: 0;}
    .footer nav ul li {display: inline-block; margin: 0 auto;}
}


@media screen and (max-width: 640px) {
    #popup > div {padding: 15px; width:70%; left: 15%;  }
    .about p {width: 75%; margin: 20px auto;}
    .light-blue-section h2 {padding-top: 50px; font-size: 25px;}
    div.mailing.col-sm-4 {padding-top: 50px;}
}

@media screen and (max-width: 417px) {
    .light-blue-section .icon-row .icon-block .icon-continer {width: 80px; height: 80px;}
}