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

.click-board {
  font-size: xx-small; }

.slide-bg {
  background: url("../assets/images/board-bg-portrait.jpg") no-repeat; background-size: cover; padding: 70px 40px; }

body,
li,
p {  font-family: 'Roboto', sans-serif; font-size: 16px; color: #444444; text-rendering: optimizeLegibility; font-weight: 300; }

h1,
h2,
h3,
h4,
h5 { font-family: 'Roboto', sans-serif; color: black; font-weight: 300; }

.slide h2 { background-color: #00679e; border-bottom: solid 10px #444444; color: white; font-weight: 300; width: 100%; display: inline-block; margin-top: 0; padding: 10px 0 10px 30px; margin-bottom: 20px;  z-index: 2;}
.slide h3 {font-size: 18px; font-weight: bold; color: #00679e;}
.slide h4 {font-weight: bold; color: #00679e; font-size: 18px; }

body,
html { margin: 0; min-height: 100%; overflow-x: hidden; padding: 0; }

.indent {text-indent: 20px;}
a.bghover { transition: background-color 0.25s; }
div#screen { height: 100%; left: 0; position: absolute; width: 100%; }
img.logo { display: block; margin: 25px auto 8px; width: 100px;}
#logo {width: 8%; display: inline-block; }
#logo img {width: 50px; position: relative; }

/* LEFT MENU */
div#menu { background-color: white; display: inline-block; height: 100%; overflow: hidden; padding-bottom: 8px; vertical-align: top; width: 15%; margin-left: -15%; }
div#menu div { border: 1px solid white; border-left: 0; border-right: 0; height: 54%; overflow-y: scroll; margin-right: -18px; margin-top: 20px; margin-bottom: 20px; position: relative; }
div#menu ul { list-style-type: none; margin: 0; position: absolute; width: 80%; }
div#menu ul > li { margin-bottom: 5px; width: 100%; }
div#menu ul > li > a { color: white; display: block; height: 55px; line-height: 50px; padding: 0 7%; position: relative; width: 100%; }
div#menu ul > li > a > i { background-color: #00679e; font-size: 1.3em; height: 45px; line-height: 45px; margin-top: 4px; margin-right: 4%; position: absolute; text-indent: 16px; transition: background-color 0.2s, width 0.15s; width: 40px; }
div#menu ul > li > a > i.showing { background-color: #143759; }
div#menu ul > li > a > span { display: inline-block; font-family: 'Roboto', sans-serif; font-size: .9em; left: 50px; line-height: 15px; position: relative; vertical-align: middle; width: 90%; color: #747474; font-weight: 300;}
div#menu ul > li:hover span { color: white; }
div#menu ul > li > a:hover > i { width: 99%; }
div#menu ul > li > a:hover > i:after { border: 21px solid transparent; border-left-width: 6px; border-right-width: 6px; border-top-color: #00679e; border-left-color: #00679e; content: ""; height: 0; position: absolute; left: 100%; transition: border-color 0.2s; width: 0; }
div#menu ul > li > a:hover > i.showing:after { border-top-color: #e6e6e5; border-left-color: #e6e6e5; }
a.menuArrow { border: 40px solid transparent; border-top-width: 18px; border-bottom: 18px solid #e6e6e5; display: block; height: 0; margin: 0 auto 15px; transition: border-color 0.3s; width: 0; }
a.menuArrow:hover { border-bottom-color: #e6e6e5; }
a.menuArrow.bottom-arrow { border-top-color: #e6e6e5; border-bottom-color: transparent; margin: 15px auto 0; }
a.menuArrow.bottom-arrow:hover { border-top-color: #e6e6e5; }
a.menuArrow.disabled { border-bottom-color: #e6e6e5; }
a.menuArrow.bottom-arrow.disabled { border-bottom-color: transparent; border-top-color: #e6e6e5; }

/* MAIN AREA - RIGHT SIDE */
div#mainArea { display: inline-block; height: 100%; overflow: hidden; position: relative; vertical-align: top; width: 100%; }
div#mainArea > img { left: -2%; margin-left: -12%; max-width: 150%; position: absolute; transition: left 0.6s, margin-left 1.1s ease-out 0.5s; width: 150%; }
div#mainArea div#topArea { position: relative; text-align: center; top: 14px; }
div#mainArea div#topArea h1 { color: white; font-size: 1.6em; font-weight: bolder;}
div#mainArea div#topArea ul { line-height: 14px; margin: 0 auto; width: 80%; }
div#mainArea div#topArea li { display: inline-block; }
div#mainArea div#topArea li { background-color: #00679e; border-radius: 8px; cursor: pointer; display: inline-block; height: 16px; margin: 0 3px; transition: background-color 0.2s, height 0.45s; vertical-align: middle; width: 16px; }
div#mainArea div#topArea li.showing { background-color: white; height: 22px; }

/* MAIN AREA - NAV AAROWS */
div#mainArea > a.arrow { background-color: rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.7); font-size: 4em; height: 15%; left: -12px; position: absolute; text-align: center; top: 45%; transition: left 0.275s, right 0.275s, box-shadow 0.275s, background-color 0.275s;
  width: 7%; z-index: 1; }
div#mainArea > a.arrow span { position: relative; top: 10%;}
div#mainArea > a.arrow:hover { background-color: #143759; background-color: rgba(20, 55, 89, 0.8);
  left: 0; }
div#mainArea > a.right-arrow { left: auto; right: -12px; }
div#mainArea > a.right-arrow:hover { left: auto; right: 0; }
div#mainArea > a.arrow:hover ~ img { left: 0; transition: left 1.1s, margin-left 1.1s; }
div#mainArea > a.right-arrow:hover ~ img { left: -4%; }

/* SLIDE AREA */
div#slides { height: 80%; position: relative; top: 40px; /*transition: transform 0.65s;*/ width: 100%;}
div#slides > div { height: 100%; left: 0; position: absolute; transition: ease-out 0.8s; width: 600%; }
div.slide { color: #aaaaaa; display: inline-block; height: 100%; vertical-align: top; width: 16.6666666%; }
div.slide > div { background-color: white; background-color: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 15px 5px #444444; color: #444444; height: 100%; margin: 0 auto; overflow-y: auto; padding: 0  0 20px 0; width: 80%; }
div.slide img {display: block; margin: 0 auto; }


/* COLUMNS */
.columns {padding: 2%;}
div.slide > div div.column-last { padding-right: 0!important;}
div.slide > div div.column { display: block; width: 50%;}
div.slide > div div.columnX { display: inline-block; vertical-align: top; width: 48%; padding-right: 2%; padding-left: 2%; margin-top: 15px; }
div.slide > div div.columnX ul { list-style-type: square; color: #00679e; }
div.slide > div div.columnX ul span { color: #444444; }
div.slide > div div.columnY { display: block; width: 80%; margin: 0 auto; float: none; }
div.slide > div div.columnF { display: block; width: 75%; margin: 0 auto; float: none; }
div.slide > div div.columnT { display: inline-block; width: 31%; margin: 0 auto; float: none; vertical-align: top; padding-right: 30px;}
div.slide > div div.columnS { display: inline-block; width: 67%; margin: 0 auto; vertical-align: top;}
div.slide > div div.columnS .fas {font-size: 15px; color: #f98d03; margin-right: 10px; padding-top: 10px;}
div.slide > div div.columnS p {padding-top: 10px;}
div.slide > div div.columnX .far {font-size: 25px; color: #f98d03; margin-right: 10px;}
div.slide > div div.columnX .fas {font-size: 25px; color: #f98d03; margin-right: 10px;}
div.slide > div div.columnY .far {font-size: 25px; color: #f98d03; margin-right: 10px;}
div.slide > div div.columnY .fas {font-size: 25px; color: #f98d03; margin-right: 10px;}
div.slide > div div.columnY span {font-size: 25px; color: #f98d03; margin-right: 10px;}
div.slide > div div.columnY em {margin: 0 auto; display: block; text-align: center;}


div.slide > div div.smallicon .fas {font-size: 15px; color: #f98d03; margin-right: 10px;}

.homeicons i {font-size: 20px; color: #f98d03;; margin-right: 15px;}

.pagecomment {margin-top: 30px;}
.pagecomment a {font-size: 16px; text-decoration: none; color: #00679e; font-weight: bold;}
.pagecomment .fas {font-size: 65px; margin-right: 15px; color: #f98d03;}
.pagecomment h4:hover {color: #00679e; transition: 0.5s all;}

.toptwo {display: inline-block; width: 100%;}
.toptwo img {width: 45%!important; display: inline-block!important; margin: 0 15px 50px 0!important; border-radius: 15px;}

.footer {float: left; position: fixed; left: 15px; bottom: 15px; height: auto;}
.footer img {width:100px;}

.popout {width:300px; display: block; margin: 0 auto;}
.popout img {padding: 20px;}

.submit {margin-top: 25px; padding: 0;}
.submit .fas {padding-top: 15px;}
.submit span {font-size: 12px; font-weight: bolder;}
.submit a {font-size: 13px; line-height: 15px; text-decoration: none; color: black; font-weight: bolder;}
.submit span:hover {color: #00679e; transition: 0.5s all;}

.row ul li {list-style-type: none;}


/* FAQ SLIDER */
.faq-slider { color: #231f20; cursor: pointer; padding: 8px; margin-bottom:0; width: 100%; text-align: left; border: none;  outline: none; transition: 0.4s; font-size: 12px;}
.faq-slider h4 { font-size: 16px; color:#333;}
.faq-slider p { font-size: 14px;}
.faq-slider .fa { font-size: 14px; margin-right: 10px; color:#f98d03;}
.faq-slider li { font-size: 14px;}
.faq-slider h4:hover {color: rgba(35,31,32,0.7);}
.faq-slider a {color:#333;}

div.panel { background-color: #FFF!important; padding-top: 5px; border: none; 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;}
div.panel ul{ padding-left: 10px;}
div.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;}
div.panel a:hover { text-decoration: underline;}

/* MOBILE MENU */
div#mainArea > a.menu-toggle { border: 2px solid white; color: white; display: inline-block; font-size: 0.75em;  left: 28px; overflow: hidden; position: absolute; text-align: center; top: 15px; width: 60px; }
div#mainArea > a.menu-toggle:hover { background-color: #143759; color: white; text-decoration: none; }
div#mainArea > a.menu-toggle span { background-color: white; display: block; height: 3px; margin: 7px auto; transition: margin 0.2s,transform 0.2s; width: 70%;}
div#mainArea > a.menu-toggle.opened span:nth-of-type(1) { margin-top: 28px; transform: rotate(-45deg); }
div#mainArea > a.menu-toggle.opened span:nth-of-type(2) { margin-left: 100px; }
div#mainArea > a.menu-toggle.opened span:nth-of-type(3) { margin-top: -22px; margin-bottom: 40px; transform: rotate(45deg); }

/* COMMENT BUTTON AND AREA*/
div#contact { background-color: white; height: 100%; left: 100%; overflow-y: auto; padding: 12px; position: absolute; top: 0; width: 390px; }
a#menuOffScreen { background-color: rgba(35, 35, 35, 0.3); cursor: pointer; display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; }
.closebtn { position: absolute; top: 0; right: 10px; font-size: 40px; margin-left: 50px; color: #143759;}

.line {border-bottom: 2px solid #143759;}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;}
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%;}


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

button.survey {top: 15px; right: 100px;}

/* FORM STYLES */

.wrapper { width: 85%; margin: 0 auto;}
.wrapper h1 {color: #143759; font-family: 'Open Sans', sans-serif; font-weight: 300;}

.input-wrap { margin-bottom: 10px;}
.input-wrap.select-box { border: 1px solid #143759; background: #efefef; width: 50%; height: 34px; padding: 0px 10px;}
.input-wrap.select-box:hover { background: #143759;}
.input-wrap.select-box:hover select { color: #747474;}

input[type="checkbox"] { font-family: 'Open Sans', sans-serif; margin-right: 5px;}
input[type="text"],
textarea { width: 90%; padding: 6px; font-size: 15px; border: 1px solid #143759; background: #efefef; font-family: 'Open Sans', sans-serif; }
#comment input[type="text"], 
textarea {height: 100px;}
input[type="submit"] { display: block; margin: 0 auto; width: 125px; font-family: 'Open Sans', sans-serif; letter-spacing: 0.5px; background: #143759;border: 0px solid; color: #fff; font-size: 13px; letter-spacing: 1.25px;}
input[type="submit"]:hover { background: #78d64a; cursor: pointer; color: white;}

select { display: block; margin-bottom: 50px; border: none; background: transparent; font-family: 'Open Sans', sans-serif; letter-spacing: 0.5px; height: 34px; width: 100%;}
select:hover { cursor: pointer;}


/* COMMENT BUTTON */
button { background: none; border: 0; box-sizing: border-box; top: 15px; right: 28px; overflow: hidden; box-shadow: inset 0 0 0 2px #00679e; color: #00679e; font-size: .65em; text-align: center; position: absolute; vertical-align: middle; padding: 5px;}
button::before, button::after { box-sizing: inherit; content: ''; position: absolute; width: 50px; height: 50px;}
button .far {font-size: 3em; padding: 5px 0 2px; }

button.survey {top: 15px; right: 100px;}

.meet {background-color: white;}
.draw { -webkit-transition: color 0.25s; transition: color 0.25s;  }
.draw::before, .draw::after { border: 2px solid transparent; width: 0; height: 0;}
.draw::before { top: 0; left: 0;}
.draw::after { bottom: 0; right: 0; }
.draw:hover::before, .draw:hover::after { width: 100%; height: 100%;}
.draw:hover::before { -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.meet:hover { color: #143759; background-color: #FFF;}
.meet::after { top: 0; left: 0;}
.meet:hover::before { border-top-color: #FFF; border-right-color: #FFF;}
.meet:hover::after { border-bottom-color: #FFF; border-left-color: #FFF; -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s; transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;}

  /* LIGHTBOX */
div#lightbox { background-color: rgba(35, 35, 35, 0.7); height: 100%; left: 0; position: fixed; top: -100%; transition: top 0.5s; width: 100%; z-index: 3; }
div#lightbox > a { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
div#lightbox > a span { color: #00679e; font-size: 4.2em; opacity: 0.9; padding: 10px; position: absolute; right: 20px; top: 0px; z-index: 5; }
div#lightbox > img { box-shadow: 0 23px 21px 38px #444444; display: block; height: 90%; margin: -120px auto 2.5%; position: relative; transform: rotateX(90deg) translateY(-160px); transition: 0.24s; }
div#lightbox.on { top: 0; }
div#lightbox.on > img { box-shadow: none; margin-top: 2.5%; transition: 0.8s ease-out 0.32s; transform: rotateX(0deg) translateY(0px); height: 90%; width: auto; }
img.launchbox { cursor: pointer; }

/* SLIDE BUTTON */
.button { background-color: #143759; border-radius: 3px; height: 60px; width: 80%; margin: 25px auto; display: block;}
.button a { color: #FFF; text-align: center; font-size: 18px; margin-bottom: 10px;}
.button .fa { color: #FFF!important; font-size: 22px; margin-right: 10px;}

/* CONTACT US PAGE */
.gray-outline { margin-top: 30px; padding: 10px 20px; border-left: 5px solid #5c8ab5;; -webkit-transition: background-color 400ms linear; -moz-transition: background-color 400ms linear; -o-transition: background-color 400ms linear; -ms-transition: background-color 400ms linear; transition: background-color 400ms linear;}

.mobileline {display: none;}

#rollover-map { overflow: hidden; position: relative; }
#rollover-map > img[src*="bullseye"] { box-shadow: 3px 6px 14px 0 #444444; margin-left: -100%; opacity: 0; position: absolute; transition: margin-left .01s ease-in-out .16s, opacity .16s; }
#rollover-map > img[src*="bullseye1"] { bottom: 12%; left: 6%; width: 44%; }
#rollover-map > img[src*="bullseye2"] { bottom: 14%; left: 4%; width: 92%; }
#rollover-map > img[src*="bullseye3"] { margin: 0 -100% 0 0; right: 4%; top: 31%; width: 61%; }
#rollover-map > span { cursor: pointer; height: 44px; left: 25.6%; opacity: .4; position: absolute; top: 42.5%; width: 44px; }
#rollover-map > span:nth-of-type(2) { left: 49.7%; top: 46%; }
#rollover-map > span:nth-of-type(3) { left: 68.2%; top: 60.5%; }
#rollover-map > span:hover + img { display: block; margin: 0; opacity: 1; transition: margin .01s, opacity .26s ease-in-out .01s; }

.social {text-align: center;}
.social .fa {font-size: 40px; margin-top: 20px; margin-bottom: 10px; color: #143759;}
.social a {font-size: 16px; color: #747474; margin-bottom: 50px;}
.social a .fa:hover {color: rgba(20, 55, 89, 0.3); transition: all 0.5s; transform: scale(1.1);}
.social a:hover {text-decoration: none; color: #143759;}

/* MEDIA QUERIES */
@media screen and (max-width: 1310px) {
div#menu { width: 18%; margin-left: -18%; }
  /* div#mainArea { width: 80%; } */
  div#mainArea > img { max-width: 140%; width: 140%; }
  div#mainArea > a.arrow { left: -6px; }
  div#mainArea > a.right-arrow { left: auto; right: -6px; }
}

@media screen and (max-width: 1030px) {
  div#menu { margin-left: -240px; width: 240px; }
  div#menu div { height: 64%; }
  div#mainArea { width: 100%; }

  div#topArea { margin-left: 80px; }
  div#mainArea > a.menu-toggle { display: block; }
  div#mainArea > a.contact-toggle { right: 20px; }
  div#slides { height: 68%; top: 36px; }
  div.slide > div { width: 96%; }
  div.slide p { line-height: 16px; }
  div#lightbox > a > span { font-size: 3em; right: 12px; }
  div#lightbox.on > img { height: auto; top: 40px; width: 96%; }
  div#mainArea > a.arrow { background-color: rgba(0, 0, 0, 0.5); bottom: 0; height: 10%; top: auto; width: 46%; }
  div#mainArea > a.arrow span { top: 0; }
}


@media screen and (max-width: 900px) {
  .slide h4 {font-size: 15px;}
  .slide h3 {font-size: 15px;}
  div.slide > div div.columnT.hide {display: none;}
  div img.hide {display: none;}
  div.slide > div div.columnT.expand {width: 67%;}
  /* .submit {width: 100%;} */
}

@media screen and (max-width: 645px) {
  .gray-outline {border-left: transparent;}
  img.logo { height: 54px; }
  div.slide > div div.columnX { width: 100%; }
  div.slide > div div.columnT { width: 100%; }
  div.slide > div div.columnS { width: 100%; }
  div.slide > div div.columnT.expand {width: 100%;}
  div.slide > div div.columnT.pad {padding-left: 20px;}
}

@media screen and (max-width: 530px) {
  div#mainArea div#topArea { top: 85px; }
  div#slides { height: 70%; top: 75px; }
  /* div.slide img {width: 85%; margin: 0 auto; display: block;} */
  div.slide > div div.columnS.outreach p{ text-align: center; }
  div#topArea { margin-left: 0; }
  div#mainArea div#topArea h1 { font-size: 1.4em; color: white; margin-bottom: 15px;}
  div#mainArea div#topArea ul { display: none; }
  div#mainArea div#topArea ul li { height: 14px; width: 14px; }
  div#mainArea div#topArea ul li.showing { height: 18px; }
  img.logo { height: 54px; left: 60px; right: auto; width: auto; }
  div#mainArea > a.menu-toggle { height: 32px; left: 16px; top: 16px; width: 32px; }
  div#mainArea > a.menu-toggle span { margin: 5px auto; }
  div#mainArea > a.menu-toggle.opened span:nth-of-type(1) { margin-top: 14px; }
  div#mainArea > a.menu-toggle.opened span:nth-of-type(3) { margin-top: -18px; }
  div#mainArea > a.contact-toggle { font-size: 0.55em; height: 45px; right: 10px; top: 10px; width: 46px; }
  div#mainArea > a.contact-toggle i { font-size: 2.5em; }
  div.slide > div h2 { /*font-size: 1.1em;*/ /*font-weight: 700;*/ line-height: 30px; padding: 20px; text-align: center; }
  /* div.slide > div h3 {text-align: center; }
  div.slide > div h4 {text-align: center; } */
  div.slide > div p { font-size: 14px; line-height: 22px;}
  div#mainArea > a.arrow { background-color: rgba(0, 0, 0, 0.5); height: 5%; top: auto; width: 46%; }
  div#mainArea > a.arrow span { top: auto; font-size: 20px; bottom: 30px; }
  .footerlogo {margin: 40px auto;}
#fourimages {display: none;}
.mobileline {border-bottom: 2px dotted black; width: 90%; margin: 0 auto; padding-top: 10px; padding-bottom: 10px;}
}

@media screen and (max-height: 595px) {
  div#topArea h1,
  div#topArea ul { display: inline-block; margin: 0 14px; vertical-align: middle; }
  div#topArea h1 { margin-bottom: 4px; }
  img.logo { height: 54px; left: 60px; width: auto; }
  div#mainArea > a.menu-toggle { height: 32px; left: 16px; top: 16px; width: 32px; }
  div#mainArea > a.menu-toggle span { margin: 5px auto; }
  div#mainArea > a.menu-toggle.opened span:nth-of-type(1) { margin-top: 14px; }
  div#mainArea > a.menu-toggle.opened span:nth-of-type(3) { margin-top: -18px; }
  div#mainArea > a.contact-toggle { font-size: 0.55em; height: 45px; top: 10px; width: 46px; }
  div#mainArea > a.contact-toggle i { font-size: 2.5em; }
  div#mainArea > a.arrow { font-size: 2.5em; padding-top: 3px; }

}

@media screen and (max-height: 595px) and (max-width: 650px) {
  div#topArea h1,
  div#topArea ul { display: block; }
}

@media screen and (max-height: 400px) {
  div#topArea h1 { font-size: 1.1em !important; margin-bottom: 6px; }
  div#slides { height: 56%; }
}