@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
  --ws-gutter: 1.25em;
}

/* HEADINGS ------------------------------ */
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
h3 { font-size: 1.5em; }
h4, th { font-size: 1.25em; }
h5 { font-size: 1.1875em; }
h6 { font-size: 1.125em; }

.highlight h2 { font-size: 1.5625em; }
.intro { font-size: 1.125rem; }
p, time { font-size: 1rem; }


#content ul.image-block li { margin: 0 0 2em; }

#content ul.three { margin: 2em -.75em; }
#content ul.three li { padding: 0 .75em; width: 50% }
#content ul.three { justify-content: center; }

/* BODY/HEADER ------------------------------ */
body { font-size: .85rem; padding-top: 0 !important; }

body>header {font-size: 1rem;position: static !important;background: #FFF;text-align: center;}
body>header:before{
  background-color: #000;
  content: '';
  display: block;
  height:100vh;
  left:100vw;
  opacity: 0;
  position: fixed;
  top:0;
  transition: left 0ms ease 200ms, opacity 200ms ease
  width:100vw;
  z-index: 3;
}
body>header .wrap { padding: 0; }

body.slideNav {overflow: hidden;}
body.slideNav>header:before{left:0;opacity: .5;transition:left 0ms ease 0ms, opacity 200ms ease}
body>header #brand {display: block; width:50%; height:5.125em; padding: 1.25em 1em .75em;}
body>header #brand img {max-width: 100%; width:auto; max-height: 100%; height: auto; display: block;}
body>header #translate-widget {
  font-size: 0.875em;
  max-width: 175px;
  padding-right: var(--ws-gutter);
  position: absolute;
  right: 0;
  top: 10px;
  width: 50%;
}

body>header #translate-widget > select {
  font-size: 1em;
  width:100%;
}

body>header #navContainer {
  text-align: left;
  position: fixed;
  left: 100%;
  top:0;
  bottom:0;
  width: 75%;
  max-height: 100vh;
  background-color: var(--dark-turquoise);
  z-index: 3;
  transition: left .3s ease;
  overflow:  auto;
  -webkit-overflow-scrolling: touch;
}

body.management #navContainer { top: 2.375em; }
body.slideNav #navContainer{left: 25%;}
body>header #navContainer nav{display: inline;}
body>header #navContainer ul{display: block;width: 100%;margin: 0;padding-left: 0;}
body>header #navContainer li {display:block;width: 100%;position: relative;border-top: 1px solid rgba(255,255,255,0.125);}
body>header #navContainer li li {border: 0}

body>header #navContainer a, #navContainer .menu{color: #FFF;font-size: 1.125em;line-height: 1.2;padding: 1em 1rem;display:block;width: 100%;}
#navContainer .menu span {font-size: 1.75rem;line-height: 1;margin: 0 .125em 0 0;position: relative;top: .125em;}


body>header #navContainer a:hover,#navContainer .menu:hover,
body>header #navContainer li.on a{background-color: rgba(255,255,255,.1);color: #fff;}
body>header #navContainer li.open{background-color: rgba(255,255,255,.1);}
body>header #navContainer li>span{display: block;position: absolute;right: 0;top: .1875em;width:2.75em;height: 2.75em;}
body>header #navContainer li>span:before{content: "";display: block;width: 55%;height: 0.0625rem;background-color: #FFF;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(90deg);transform-origin: center center;}
body>header #navContainer li>span:after{content: "";display: block;width: 55%;height: 0.0625rem;background-color: #FFF;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transform-origin: center center;}
body>header #navContainer li.open > span:before {transform: translate(-50%, -50%)rotate(0deg);}
body>header #navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
body>header #navContainer ul ul {font-size: .8em;display: none}
body>header #navContainer ul ul a {font-size: 1.25em;padding-left: 2rem;}
body>header #navContainer ul ul ul a {font-size: 1.25em;padding-left: 2.5rem;}
body>header #navContainer ul ul ul ul a { font-size: 1.375em; padding-left: 4.5em;}
body>header #navContainer ul ul li.on a {background-color: rgba(255,255,255,.1);}

body>header #mainnav>ul>li:last-child>a {color: var(--light-blue);text-transform: uppercase;}

/* mobilenav */
body>header #mobilenav{
  background: var(--light);
  align-items: center;
  display: flex;
  text-align: center;
  width: 100%;
}

body>header #mobilenav a, #mobilenav span{
  color: var(--dark);
  line-height: 2.5em;
  order: 0;
  flex: 1 1 auto;
}

#mobilenav span svg {pointer-events: none;position: relative;top: .25em;width: 1em;}
#mobilenav span svg path {fill: #000;}
#mobilenav span:hover path { fill: #FFF; }

body>header #mobilenav *+* {border-left: 1px solid rgba(255,255,255,0.25)}
body>header #mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color: var(--light-turquoise);}

/* hamburger */
body>header .hamburger {
  background-color: var(--light-red);
  display: block;
  height: 2.25em;
  opacity: 0;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 2.25em;
  z-index: 2;
}

body.management > header .hamburger {top: 2.4375em;}
body > header .hamburger path { fill: #FFF; }
body > header .hamburger svg {
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 1.5em;
}

body>header .hamburger.on { opacity: .75; }


/* MAIN ------------------------------ */
.twoCol, .threeCol, .resCol{
  -webkit-column-rule:1px outset rgba(0,0,0,.15);
  column-rule:1px outset rgba(0,0,0,.15);
  -webkit-columns: auto;
  columns: auto;
  -webkit-column-width: 13em;
  column-width: 13em;
}

img.photoright {margin: 0 0 .5em 1.5em;}

.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}

.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}


/* FOOTER ------------------------------ */
body>footer .wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
#web-solutions{-ms-flex-order: 1;-webkit-box-ordinal-group: 2;order: 1; text-align: center;}

body>footer .fatFooter {
  text-align: center;
}

body>footer .fatFooter>div { margin: 2.5em 0 0; }

body>footer .copyright {
  margin: 0 0 1em;
  text-align: center;
}

body>footer .social ul {margin: .5em auto 0;max-width: 17em;}
body>footer .social a { padding: .5em 1em;}

body>footer div>a>img {text-align: center;margin: 0 auto;}


/* INTERIOR ------------------------------ */
main>div>#content {padding: 2em 0 3em;}
#sidenav {font-size: 1rem;margin: 0 0 3.5em;}
.content .image-block li figure{text-align: center;}


.pageheader .bg {
	background: url('/images/logo-watermark.svg') no-repeat right center;
	content: '';
	height: 100%;
  background-size:14em 15.875em ;
	right: -2em;
	opacity: .11;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -2;
}

/* SHARED ------------------------------ */
#hero h1, #callouts h2, #support h2, #tagline h2 { font-size: 1.75em; }

/* INTERIOR CTA ------------------------------ */
#interior-cta .image { display: none; }


/* HERO ------------------------------ */
#hero .wrap { padding: 1em var(--ws-gutter) 2em; text-align: center; }

/* CALLOUTS ------------------------------ */
#callouts { font-size: 1rem; }
#callouts li { margin: 0 0 2em; }

/* SUPPORT ------------------------------ */
#support ul, #support li { margin: 0 0 2em; }

/* PROGRAMS ------------------------------ */
#programs { font-size: 1rem; }
#programs.home { padding: 3em 0; }
.interior #content #programs li  {padding: 0 .5em; width: 100%;font-size: 1rem;margin-bottom: 3em;}
/* NEWS-EVENTS ------------------------------ */
#news-events h2 { font-size:  }
#news-events .wrap { padding: 2.55em var(--ws-gutter); }

/* WELCOME ------------------------------ */
#welcome .wrap { padding: 3em var(--ws-gutter); }


/* CTA TEMPLATE (Program detail page) ------------------------------ */
.heading-with-list h3::before { display: block; margin: 0 0 1.5em; position: static; }




/* TIMELINE RIBBON ------------------------------ /
* - /timeline/
*/

.timeline {
  text-align: center;
}

.timeline .timeline-white {
  padding-block: 0 .5em;
}

.timeline .timeline-blue {
  padding-block: 3em 3em;
}

.timeline>div:not(:last-child),
.timeline .wrap>div:not(:last-child) {
	margin-bottom: 2.5em;
}




/* MEDIA QUERIES ------------------------------ */
@media (max-width: 550px) {

  #programs.home li { margin: 0 0 4em; width: 100%; }

  #programs.landing .wrap>ul>li>div { display: block; }
  #programs.landing .details { padding: 2.5em calc(var(--ws-gutter) / 2); width: 100%; }
  #programs.landing .includes { max-width: 100%; padding: 1.5em var(--ws-gutter); width: 100%; }

  .more-info, .contact-info>section { display: block; }
  .more-info>section, .contact-info>section>div{ width: 100%;}

  #content ul.two, #content ul.three { margin: 2em 0; }
  #content ul.two li, #content ul.three li { padding: 0; width: 100%; }

}


@media (max-width: 480px) {
  h1 { font-size: 2.25em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.375em; }
  h4, th { font-size: 1.125em; }
  h5 { font-size: 1.1875em; }
  h6 { font-size: 1.125em; }
}


/* ************ STYLE-M.CSS ************ */
