/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Nanum+Gothic:wght@400;700&family=Nothing+You+Could+Do&display=swap');
html { background-color:#fff;  color: #333366;font-family: 'Lexend', sans-serif;/*'Roboto Serif', serif;*/ font-size: 1em; line-height: 1.75;font-weight:300}
::-moz-selection {background: #b3d4fc; text-shadow: none;}
::selection {background: #b3d4fc;  text-shadow: none;}
hr { border: 0;  border-top: 1px solid #ccc;display: block;height: 1px; margin: 1em 0;padding: 0;}
audio,canvas,iframe,img,svg,video {vertical-align: middle;}
fieldset {border: 0; margin: 0; padding: 0;}
textarea {resize: vertical;}

/* ==========================================================================
GENERAL styles
   ========================================================================== */
.Container {box-sizing:border-box;margin:0 auto;padding:0px 16px;width:1232px;max-width:100%}
.Row {margin:0 auto;overflow:auto;padding: 0 1%;width:98%;max-width:100%;}
.RowC {display: -webkit-flex; display:flex;-webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center;justify-content:center; margin:0 auto;overflow:auto;padding:0;max-width:100%;width:100%;}

.VAlignCen {align-items: center;} /*center items vertically in Row*/ 
.VAlignEnd {align-items: flex-end;} /* align items to bottom*/
.Justify {justifty-content:center!important}
.Center, .center {text-align:center}
.Clear {clear:both} .ClearL {clear:left;}
h1 {text-shadow: 1px 1px 5px #d4dcde;font-size:1.75em;font-weight:500;margin-top:25px;}
h2 {font-size:1.5em;font-weight:500;margin-top:1em;}
p.MarginAdjust {margin-top:1.75em}
.teal {color:#2ca1a0}
strong, bold {font-weight:600}
.semibold {font-weight:500}
.light {font-weight:400}
.small {font-size:0.875em}
.MZero {margin:0px} .MBZero {margin-bottom:0px} .MTZero {margin-top:0px} 
.MHalf {margin-bottom:0.5em;margin-top:0.5em;} .MBHalf {margin-bottom:0.5em;} .MTHalf {margin-top:0.5em;}
.nowrap {white-space:nowrap}
.Blurb {color:#666699;font-size:1.25em}
.Note {;color: #2ca1a0;font-family:'Nothing You Could Do', cursive; font-size:1.75em;text-shadow: 1px 5px 5px #eee;line-height:1.5}
.Note a:link, .Note a:visited {color:#2ca1a0; border-bottom:1px dashed #ccc} .Note a:hover {color:#3bafae; border-bottom:1px dashed #999} .Note a:active {color:#238180; border-bottom:1px dashed #999}
.Footer {background-color:#342e53;color:#eee;font-size:0.875em;margin-top:32px;width:100%!important; padding:20px 1%;box-sizing:border-box;line-height:2.0;border-top:10px double #fff;box-shadow: 0px 0px 12px 12px #fff } /*background-color:#342e53,#372D52,#2D2541 */
.Footer a:link, .Footer a:visited {color:#eee;border-bottom:1px dotted #999}
.Footer a:hover {color:#95d0cf} .Footer a:active {color:#2ca1a0}

.JumpLink:target::before {display: block!important; content: " "; margin-top: -3em; height: 3em; scroll-margin-top:3em;visibility:hidden;  pointer-events:none;}
p.JumpLink::before { display: block!important; content: " "; margin-top: -4em; height: 4em; visibility: hidden;  pointer-events: none;}
.JumpLink  [class*="col-"] {scroll-margin-top:3em} .JumpLink  [class*="col-"] img {scroll-margin-top:3em}

a:link, a:visited {color:#333399;border-bottom:1px dashed #ccc;text-decoration:none}
a:hover {color:#2ca1a0; border-bottom:1px dashed #999} a:active {color:#238180; border-bottom:1px dashed #999}

img {max-width:100%;width:auto;height:auto;margin-bottom:5px}
.printonly {display:none}

ul.swirl {font-size:1em;list-style-image:url("../images/swirl.png");}
.swirl li {margin-bottom:16px}

ul.check {font-size:1em;list-style-image:url("../images/check.png")}
.check li {margin-bottom:16px}
ul.check ul{list-style-image: none; list-style-type: circle}
ul.check ul li {margin-bottom:2px}


/* Nav Menu */
ul#menu {margin:0;list-style:none;padding:0;background-color:#333366;font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;line-height:0;}
ul#menu {width: 100%;max-width:100%}
ul#menu li {display:block;white-space:nowrap;font-size:0;float:none;}
* html ul#menu li a{display:inline-block;}
ul#menu>li {margin:0;}
ul#menu a:active, ul#menu a:focus {outline-style:none;}
ul#menu a {display:block;vertical-align:middle;text-align:left;text-decoration:none;font-size: 16px;font-family: 'Lexend', sans-serif; color:#333366; font-weight:400;cursor:pointer;padding: 15px 20px;border:none}
ul#menu li:hover>a,ul#menu li a.pressed {border-style:none;color:#ffffff;}
ul#menu > li.switch {display:none;cursor:pointer;width:25px;height:20px;padding:10px 0 10px 0}
ul#menu > li.switch:before {content:"";position:absolute;display:block;height:4px;width:25px;margin-left:20px;border-radius:4px;background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
ul#menu > li.switch:hover:before {	background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
.c3m-switch-input {	display:none;}
ul#menu li:hover>a,ul#menu li > a.pressed {border-style:none;color:#ffffff;text-decoration:none;}
ul#menu li.topmenu>a {background-color:transparent;color:#333366}
.m-item {height:16px;line-height:16px;}

@media screen and (max-width: 993px) {
	/* Nav Menu */
	ul#menu > li {position: initial;}
	ul#menu ul .submenu, ul#menu li > ul {left: 0; right:auto;bottom: 100%;}
	ul#menu .submenu,ul#menu ul,ul#menu .column {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100%!important;max-width:100%}
}

@media screen and (max-width: 992px) {
	/* Nav Menu */
	ul#menu {background-color:#000033}
	ul#menu > li {display: none; position: relative; width: 100%!important;max-width:100%;border-bottom:1px solid #003300}
	ul#menu > li.switch,.c3m-switch-input:checked + ul#menu > li + li {display: block;}
	ul#menu > li.switch > label {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}
    ul#menu li.topmenu>a {background-color:#d6ebeb;color:#000033}
	ul#menu li.topmenu:hover>a, ul#menu li.topmenu > a.pressed {background-color:#add6d6;}
	ul#menu li.topmenu:active>a {background-color:#add6d6;}
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
MAIN SITE STYLES
 ========================================================================== */

/*Mobile*/
body {margin:0}
.MenuWrapper {background-color:#fff;font-size:0px}
.MenuBar {box-sizing:border-box;margin:auto;max-width:1200px;overflow:auto;padding:0;width:100%;}
.Hero {background-image:url("../images/header.webp");background-size:cover;background-position:center center;box-sizing:border-box;max-width:100%;width:100%;}
.Hero a {border:none}

.col-m-1,  .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m11,.col-m-12 {padding: 0px 1%;margin:0;}
.spacer {height:8px}
.col-m-1 {width: 6.33%;}
.col-m-2 {width: 14.66%;}
.col-m-3 {width: 23%;}
.col-m-4 {width: 31.33%;}
.col-m-5 {width: 39.66%;}
.col-m-6 {width: 48%;}
.col-m-7 {width: 56.33%;}
.col-m-8 {width: 64.66%;}
.col-m-9 {width: 72.99%;}
.col-m-10 {width: 81.33%;}
.col-m-11 {width: 89.66%;}
.col-m-12 {width: 98%;} 
.logo {text-align:center; margin:auto}	
.logo img {width:250px;height:auto;margin:5px 16px 10px 16px}
.logo-print {display:none} 
.HideMobile {display:none}
.RightBox {float:none;width:98%; margin: 0 auto; padding:0}

/*form*/
.ContactForm {border-spacing:0px; border-collapse:collapse;}
.ContactForm {clear:left}
.ContactForm td {padding:0px 16px 16px 0px;vertical-align:top}
.FormStyle {border:1px dotted #68a1a0;border-radius:10px;background-color:#f0f5f5;padding:24px}
.FormStyle div.Label {float:none;margin:0px 0px 1px 0px;padding:8px 1% 0 1%; width:98%}
.FormStyle div.LabelFull {float:none;margin:0px 0px 1px 0px;padding:8px 1% 0 1%; width:98%}
.FormStyle div.Input {float:none;margin:0px 0px 1px 0px;padding:8px 1% 0 1%; width:98%}
.FormStyle .InputBox {color:#333399;border:1px solid #ccc;border-radius:6px;font-size:16px;padding:6px 3%;width:94%}
.FormStyle .InputBoxsm {color:#333399;border:1px solid #ccc;border-radius:6px;font-size:16px;padding:6px 3%;width:94%}    
.FormStyle select {font-size:16px;max-width:100%;cursor: pointer;outline:none;} .FormStyle option {font-size:16px}
.Submit {border:1px solid #333399;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;background-color:#333399;color:#eee;font-size:16px;padding:6px 10px;cursor: pointer;outline:none;}
.Submit:hover {border:1px solid #2ca1a0;background-color:#2ca1a0;color:#fff}
.Submit:active {border:1px solid #238180;background-color:#238180;color:#fff;}

/*Small Tablet*/
@media only screen and (min-width: 600px) {
	.LeftBox50 {float:left;width:49%; margin:0 1% 0 0;padding:0}
	.RightBox50 {float:right;width:49%; margin: 1em 0 0 1%;padding:0}
	.FormStyle div.Label {float:left;margin:0px 0px 1px 0px;padding:8px 1% 0 1%; width:28%}
	.FormStyle div.Input {float:left;margin:0px 0px 1px 0px;padding:8px 1% 0 1%; width:68%}
}

/*Tablet*/
@media only screen and (min-width: 600px) {
body {background-image:none;margin:0 0 200px 0}
.Hero {background-image:url("../images/header.webp");background-size:cover;background-position:center center;width:100%;max-width:100%;height:150px;padding:15px 0px 15px 0px;/* box-shadow:0px 4px 15px 4px #ccc;*/border-bottom:2px solid #333366}
.Footer {position:fixed;bottom:0;padding:22px 1% 40px 1%;}	
.large {font-size:60px;margin-bottom:0px;padding:0}
.col-t-1,  .col-t-2, .col-t-3, .col-t-4, .col-t-5, .col-t-6, .col-t-7, .col-t-8, .col-t-9, .col-t-10, .col-t-11,.col-t-12  {padding: 0px 1%;margin:0}    
.col-t-1 {width: 6.33%;}
.col-t-2 {width: 14.66%;}
.col-t-3 {width: 23%;}
.col-t-4 {width: 31.33%;}
.col-t-5 {width: 39.66%;}
.col-t-6 {width: 48%;}
.col-t-7 {width: 56.33%;}
.col-t-8 {width: 64.66%;}
.col-t-9 {width: 72.99%;}
.col-t-10 {width: 81.33%;}
.col-t-11 {width: 89.66%;}
.col-t-12 {width: 98%;} 
.logo {text-align:right; max-width:1220px;width:100%}	
.HideMobile {display:inline-block}  
.RightBox {max-width:460px; margin:2em auto;width:66%}	
}

/* larger tablet */
@media only screen and (min-width: 800px) {
/* Right and Left aligned info */
	.LeftBox {float:left;width:74%; margin:0 1% 0 0;padding:0}
	.RightBox {float:right;width:24%; margin: 1em 0 0 1%;padding:0}	
	.Rotate10 {rotate:-10deg;margin:1em auto;width:90%}	
}

/*Desktop*/
@media only screen and (min-width: 992px) {
	
	/* Menu */
	.MenuWrapper {background-color:#eef2f3;position: -webkit-sticky;  position: sticky;  top: 0; z-index:91;font-size:0px;padding:20px 16px 5px 16px;border-bottom:1px solid #ecf1f2;box-shadow: 1px 1px 20px 10px #2b4158;text-align:right} /*4e7886*/
	.MenuBar {box-sizing:border-box;margin:auto;max-width:1200px;overflow:auto;padding:0 13px;width:100%;}
	ul#menu {background-color:transparent;width:auto;padding-bottom:6px;display:inline-block;float:right}
	ul#menu li {display:block;white-space:nowrap;font-size:0;float:right;}
	ul#menu a {color:#333366!important;margin: 8px 0px 0px 32px;padding:0px 0px 5px 0;border-bottom: 1px dotted #fff} 
	ul#menu li.topmenu:hover>a,ul#menu li.topmenu > a.pressed {background-color:transparent;color:#2ca1a0!important; border-bottom:  1px dotted #339999}/*desktop rollover*/
	ul#menu li.topmenu:active>a {background-color:transparent;color:#258684!important;border-bottom: 1px dotted #339999}/*desktop active*/    
	
	.Hero {background-image:url("../images/header.webp");background-size:cover;background-position:center center;width:100%;max-width:100%;height:200px;padding:40px 0px 15px 0px;margin-bottom:1em; /*box-shadow:0px 4px 15px 4px #ccc;*/border-bottom:2px solid #333366}
	
	/* Columns */
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12  {float:left;padding: 0 1%;margin:0;}
	.col-1 {width: 6.33%;}
	.col-2 {width: 14.66%;}
	.col-3 {width: 23%;}
	.col-4 {width: 31.33%;}
	.col-5 {width: 39.66%;}
	.col-6 {width: 48%;}
	.col-7 {width: 56.33%;}
	.col-8 {width: 64.66%;}
	.col-9 {width: 72.99%;}
	.col-10 {width: 81.33%;}
	.col-11 {width: 89.66%;}
	.col-12 {width: 98%;}    
 }
	
 @media only screen and (min-width: 1200px) {
	 	.Hero {background-image:url("../images/header.webp");background-size:cover;background-position:center center;width:100%;max-width:100%;height:230px;padding:45px 0px 15px 0px;margin-bottom:1em;border-bottom:2px solid #333366} /*box-shadow:0px 4px 15px 4px #ccc;*/
		.logo img {width:350px;height:123px;}
	}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
	

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

 /* a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }*/

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
/*  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }*/

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
	.printonly {display:block}
	.MenuWrapper, .NoPrint {display:none!important}
	.logo {display:none}
	.logo-print {display:block!important;text-align:left; margin:auto 0px!important}
	.logo-print img {width:200px;height:70px;margin:0px 0px 0px 16px}
	.Footer {position:relative}	
	.LeftBox {float:left;width:74%; margin:0 1% 0 0;padding:0}
	.RightBox {float:right;width:23%; margin: 0 0 0 2%;padding:16px 0}
	.Blurb {color:#666!important;font-size:17px!important;font-style:italic!important}
	.Note {font-size:16px!important}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12  {padding: 0 1%;margin:0;}
	.col-1 {width: 7.333%;}
	.col-2 {width: 14.666%;}
	.col-3 {width: 23%;}
	.col-4 {width: 31.333%;}
	.col-5 {width: 39.666%;}
	.col-6 {width: 48%;}
	.col-7 {width: 56.333%;}
	.col-8 {width: 64.666%;}
	.col-9 {width: 73%;}
	.col-10 {width: 81.333%;}
	.col-11 {width: 89.666%;}
	.col-12 {width: 98%;}    
}