/*
Theme Name: Web Solutions
Theme URI: https://www.websolutions.com/
Author: Web Solutions
Author URI: https://www.websolutions.com/
Description: WordPress wpCode
Version: 2.0.0
Text Domain: wpcodev2

Web Solutions is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
*/

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

:root {
  --green: #BDD539;
  --yellow: #F8EB30;
  --blue: #2CACE2;
  --light-blue: #E5F5FB;
  --orange: #F7941D;
  --purple: #B582D6;
  --dark-grey: #201F1F;
  --grey: #525252;
}

html {-webkit-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing:inherit;box-sizing:inherit;}
body{margin:0;padding:0;-webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--dark-grey); position: relative;}

img{border: 0}
ul{padding-left: 0}
ul li{list-style:none}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{font-family:inherit; font-size:inherit; font-style:inherit;font-weight:inherit}
table {border-collapse:collapse}
td, th {empty-cells:show;vertical-align:top;text-align:left}
#skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-1000px;z-index:10}
#skipNavigation:focus,#skipNavigation:active{top:0;}
iframe[src="/management/login/persistSession.aspx"] {display: none}
/*page widths*/
body>header, #mainnav, main, body>footer, #alertApp{width:100%;float:left;clear:left;display:block;}
body>footer>.fatFooter,#alertApp>*,.wrap{width:100%;max-width:76.75rem; padding-left: 1.5rem; padding-right: 1.5rem;margin-left:auto;margin-right:auto;position:relative;overflow:auto}
body main > .wrap, .pageHeader > .wrap {max-width: 62.0625rem;}
.pageHeader > .wrap {overflow: visible;}

/* text */
body, .text, input, button, select, textarea {font-family:'Nunito', sans-serif;line-height:1.5;color:#4A4A4A;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
h1, .resources h2, .resources a, .button, .link.triangle, .highlight h2, blockquote p, #sidenav > ul > li > a, .news-network h2, .order-materials h2, .frm_submit button, .welcome h2, .frm_form_field label, .frm_forms .frm_primary_label, .accordion-title button, #posts.news h2.entry-title {font-family: 'Averia Libre', serif; font-weight: 700;}
.text{font-size: 1rem}
a, a *{color:var(--blue);text-decoration:none}
a:hover, a:active, a:hover *, a:active *{color:var(--purple)}
p,h1,h2,h3,h4,hr,#content ul,.contentEditor ul,blockquote,dd,ol{margin-top:0;margin-bottom:1rem}
h1, h2, h3, h4, h5, h6, th{font-weight:400; line-height: 120%;}
p + h2, p + h3, p + h4, p + h5, p + h6, ul + h2, ul + h3, ul + h4, ol + h2, ol + h3, ol + h4, figure + h2, figure + h3, figure + h4  {margin-top:2em;}
.textColor, h1, h2, h3, h4, h5, h6, th, dt{color:#31659b}
em, i, q, cite, .italic{font-style:italic}
b, strong{font-weight:700}
u{text-decoration:none}
hr{border:0;border-top:1px solid rgba(0,0,0,.15);margin:1em 0;padding-top:1px}
main p, main ul, main ol { font-size:1.125rem; }
.intro { font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: #000; margin-bottom: 2rem;}
h1 {font-size:1.5em; color: #000; font-weight: 700;}
h2 {font-size:1.875rem; color: #000; font-weight: 800;}
h3 {font-size:1.5em; color: var(--blue); font-weight: 800;}
h4, th{font-size:1.25em; color: #000; font-weight: 800;}
h5 {font-size:1.1em}
h6 {font-size:1.0em}
sup, sub {font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative}
sup {bottom:1ex}
sub {top:.5ex}

blockquote {
  color: #000;
  padding-left: 1.25rem;
  position: relative;
}
blockquote p {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.29;
  position: relative;
}
blockquote p:before, blockquote p:after {
  position: absolute;
  font-size: 3.75rem;
  line-height: .6;
  color: var(--yellow);
}
blockquote p:before {
  content: "\201C";
  left: -2rem;
  top: .25rem;
  display: inline-block;
}
blockquote p:after {
  content: "\201D";
  display: inline-block;
}
blockquote cite {
  font-size: 0.875rem;
  font-style: normal;
  position: relative;
  padding: 0 2px;
  z-index: 1;
}
blockquote cite:before {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100%;
  height: 0.625rem;
  background: var(--yellow);
  z-index: -1;
}
/* MAIN ------------------------------ */
main, .mceContentBody{background:#fff}
.contentEditor{background:#fff;min-width:100%;}
/* t1 */
#sidenav {overflow:hidden;margin:0 0 40px}
#sidenav ul{padding: 0}
#sidenav ul:empty{display: none}
#sidenav li {height:1%;overflow:hidden}
#sidenav li a{padding:.31em 7px;line-height:1.1em;display:block; color: #000; position: relative;}
#sidenav li a:hover, #sidenav li a:active {background:#e5e5e5}
#sidenav li.current_page_item>a, #sidenav li.current_page_ancestor>a {color:#000; background: var(--yellow);}
#sidenav li.page_item_has_children.current_page_item > a, #sidenav li.page_item_has_children.current_page_ancestor > a {padding-right: 1.75rem;}
#sidenav li.page_item_has_children.current_page_item > a:after, #sidenav li.page_item_has_children.current_page_ancestor > a:after {
  content: "";
  position: absolute;
  background: url(images/icons/caret-down.svg) no-repeat center;
  background-size: contain;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
}
/* t2 */
#sidenav li ul li a {padding-left: 1.25em}
#sidenav li.current_page_ancestor ul li a, #sidenav li ul.children li a {padding:.3em 5px .3em 10px;font-size: 0.9375rem;color:var(--grey);}
#sidenav li ul li a:hover, #sidenav li ul li a:active {color:#000;}
#sidenav li ul li.current_page_item>a, #sidenav li ul li.current_page_ancestor>a {color:#000;background:#fff;}
/* t3 */
#sidenav li ul li.current_page_ancestor ul{padding-bottom:.5em;border:0}
#sidenav li ul li.current_page_ancestor ul li{border:0}
#sidenav li ul li.current_page_ancestor ul li a, #sidenav li ul li ul.children li a {display: block; padding-left:30px;font-size:.8em;color:#666}
#sidenav li ul li ul li a:hover, #sidenav li ul li ul li a:active {background:#f5f5f5}
#sidenav li ul li ul li.current_page_item>a, #sidenav li ul li ul li.current_page_ancestor>a{color:#000; background:#e5e5e5;}
/* t4 */
#sidenav li ul li ul li.current_page_ancestor ul li a{padding-left:50px;font-size:.7em;color:#666}
#sidenav li ul li ul li ul li a:hover, #sidenav li ul li ul li a:active{background:#fff}
#sidenav li ul li ul li ul li.current_page_item>a{color:#000; background:#f5f5f5;}
/* hide children that arent yours */
#sidenav ul.children { display: none }
#sidenav li.current_page_ancestor>ul, #sidenav li.current_page_item>ul { display: block; background: #F2F2F2; padding: 5px 5px 5px 0; font-weight: 600; }
/*section callouts*/
main>div>aside section{margin:0 0 20px;padding:10px}
main>div>aside section:hover{background:#FFC}
main>div>aside section h1{margin:0;font-size:1.2em}
main>div>aside section p{margin:0}
/* breadcrumb */
.breadcrumb{margin-bottom: 1em}
.breadcrumb a:after{content: "\00A0\00A0\203A\00A0"}

#content{word-wrap:break-word}
#content .alignright, #content .align-right{max-width:44%;height:auto; margin: 0 0 40px 38px;}
#content .alignright img,#content .align-right img {max-width:100%;height:auto;margin: 0;float: none}
#content .alignright figcaption {text-align: right; margin: 0; font-size: 0.8125rem;}
#content img.phototreatment{max-width:50%;height:auto}
#content figure.phototreatment{width: 100%;text-align: center}
#content figure.phototreatment img{max-width: 100%;width: auto;height: auto}
img.phototreatment,img.alignright,img.align-right,.alignright img,.align-right img {max-width: 100%;width: auto;height: auto}
.alignright{float:right;clear:right}
.align-right{float:left;clear:left}
.muted {opacity:0.5;filter:alpha(opacity=50)}
.highlight, #content .highlight{
  clear: both;
  display: block;
  margin: 2.5rem 0;
  padding:1.875rem 2rem;
  position: relative;
  z-index: 1;
}
.highlight:before, #content .highlight:before, .highlight:after, #content .highlight:after, .accordions .accordion:before, .accordions .accordion:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
.highlight:before, #content .highlight:before {
  background: var(--blue);
  opacity: .12;
  z-index: -1;
  transform: skewY(.5deg);
}
.highlight-group .highlight:nth-of-type(even):before, #content .highlight-group .highlight:nth-of-type(even):before {background: var(--green);}

.highlight:after, #content .highlight:after {
  border: 1px solid #000;
  transform: skewY(-.5deg);
}
.highlight ul, .highlight p {
  color: var(--grey);
}
small, .textSm{font-size:.8em}
#content table{width:100%}
.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}

/* blog */
h1.entry-title, h2.entry-title {margin-bottom:0.25rem;font-size: 1.45em}
#posts.news .entry-meta {font-size: 1rem; font-style: italic; margin-bottom: .25rem;}
#posts.news li:before {content: none;} 
#posts.news li {padding-left: 0;} 
#posts.news li + li {margin-top: 3rem;}
#posts.news article .entry-content {padding-top: 0;}

.button.back {position: relative;}
.button.back:before {
  content: "";
  background: url(images/icons/caret-right.svg) no-repeat center;
  background-size: contain;
  width: 0.5rem;
  height: 1.125rem;
  margin: 0 .5rem -3px 0;
  display: inline-block;
  transform: scaleX(-1);
  filter: grayscale(1) brightness(0);
}

span.posted-on {font-size: .8em}
span.byline {font-size: .85em;display: block}
article .entry-content {padding: 1em 0}
.cat-links, .comments-link {font-size: .8rem;display: block}
.blogThumb {width: 100%;}
.blogThumb img, .attachment-post-thumbnail.size-post-thumbnail.wp-post-image {max-width: 100%;height: auto}
#comments h2.comments-title {margin: 1em 0 2em}
#comments footer b.fn {font-size: 1.25rem}
#comments footer span.says {font-size: .8rem}
#comments .edit-link {font-size: .8rem;margin-left: 1.5rem}
#comments time {font-size: .8rem}
#comments li.comment {border-top: 1px solid #ccc;padding-top: 1em}
#comments .reply a {font-size: .8rem}
#comments p.logged-in-as * {font-size: .8rem}
#comments .comment-content p {margin-top: 1em; font-size: 1.1rem}
#respond {margin-top: 4em}
#respond h3 {margin: 0}
#comments textarea {width: 75%;}
.updated {display:none;}

#biographies {padding: 5em 1em; text-align: center}
#biographies .biographies a {text-align: left; display: inline-block; padding: 1.75em; border-radius:3px; background: #EDEAEA}
#biographies .biographies a:hover {background: #0085CA;}
#biographies .biographies a img {display: block; border: 1px solid transparent; margin: 0 auto 0.75em; width: 100%; height: 226px; -webkit-object-fit: cover; object-fit: cover; -webkit-object-position: center top; object-position: center top}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  #biographies .biographies a img {display: block; border: 1px solid transparent; margin: 0 auto 0.75em; max-width: 100%; width:auto; height: auto !important; max-height: 226px;  -webkit-object-fit: none !important; object-fit:none !important;}
}
#biographies .biographies a:hover img {border-color: rgba(255,255,255,0.5)}
#biographies .biographies a span,
header > h1+span, h2+.date {display: block; font-family: "proxima-nova-condensed", sans-serif; line-height: 120%;}
header > h1+span{font-style: italic; margin: -1.5em 0 1em; font-size: 1.125em; color: #9e9e9e;}
#biographies .biographies a:hover span {color: #fff}
#biographies .biographies a .name {font-size: 1.25em; font-weight:600; color: #0085CA}
#biographies .biographies a .position {font-size: 0.938em; color: #004F71}
#biographies .biographies a:hover .position {opacity: 0.75}

.pageHeader {
  clear: both;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  position: relative;
  overflow: hidden;
}
.pageHeader:before {
  content: "";
  right: 0;
  position: absolute;
  top: 3.125rem;
  bottom: 5.25rem;
  background: var(--blue);
  opacity: .12;
}
.pageHeader h1 {
  line-height: .8;
  color: #000;
  display: table;
  position: relative;
  z-index: 3;
}
.pageHeader h1:before {
  content: "";
  left: 0;
  right: 0;
  top: .55rem;
  bottom: .55rem;
  position: absolute;
  background: var(--yellow);
  z-index: -1;
}

.character-boat:before, .character-boat:after,
.pageHeader .waves:before, .pageHeader .waves:after,
.pageHeader .clouds:before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  pointer-events: none;
  right: 20%;
}

.character-boat:before {
  background-image: url(images/character-orange-boat.svg);
  width: 23.125em;
  height: 15.125em;
  transform: translateX(50%);
}
.character-boat:after {
  background-image: url(images/character-blue-boat.svg);
  width: 17.0625em;
  height: 12.3125em;
  transform: translateX(50%);
}
.pageHeader .character-boat:before {
  right: 82%;
}
.pageHeader .character-boat:after {
  right: 30%;
  bottom: 0;
  z-index: 1;
}
.order-materials .character-boat:before {
  right: 48%; 
  bottom: 0.1875em;
  z-index: 2;
}
.order-materials .character-boat:after {
  right: 22%;
  bottom: 0.1875em;
  z-index: 2;
}

.welcome .wrap {
  padding-top: 2.9375rem;
  padding-bottom: 2rem;
  overflow: visible;
}

.welcome-content p {
  font-size: 1.125rem;
  color: var(--grey);
}
.welcome .welcome-image img {
  max-width: 100%;
  height: auto;
  display: block;
}
.welcome .welcome-image-bottom {
  background: #EEF9FE;
  font-size: 0.9375rem;
  color: var(--grey);
  padding: 0.8125rem 0.625rem;
}
.welcome .welcome-image-bottom * {
  font-size: 0.9375rem;
}
.welcome .welcome-image-bottom > *:last-child {
  margin-bottom: 0;
}
.welcome .welcome-image-bottom b, .welcome .welcome-image-bottom strong {
  font-weight: 800;
  color: #000;
}


.pageHeader .waves:before {
  background-image: url(images/waves.svg);
  height: 4.75em;
  width: 22.0625em;
  right: 55%;
  transform: translateX(50%);
  bottom: 3.1rem;
}
.pageHeader .waves:after {
  background-image: url(images/wave-single.svg);
  width: 15.0625em;
  height: 3.25em;
  right: 13.5%;
  transform: translateX(50%);
  bottom: 3rem;
}
.pageHeader .clouds:before {
  background-image: url(images/clouds.svg);
  width: 14.1875em;
  height: 5.0625em;
  top: 0.5em;
  transform: translateX(50%);
}


/* list */
#content ol ol li {list-style: lower-alpha}
#content ol {padding-left: 1.5625rem;}
#content ul li, ul.list-style li {position: relative; padding-left: 1.5625rem;}
#content ul li:before, ul.list-style li:before {content: "";background: url(images/icons/caret-right.svg) no-repeat center; background-size: contain; position: absolute; width: 9px; height: 17px; left: 7px; top: 4px;}
#content ul li + li, ul.list-style li + li {margin-top: 10px;}
#content ul li ul li:before, ul.list-style li ul li:before{opacity: .5}

/* addon classes */
.clearFloats{clear:both}
.nobr{white-space: nowrap}
.twoCol, .threeCol, .resCol{
  -webkit-column-rule:1px outset rgba(0,0,0,.15);
  column-rule:1px outset rgba(0,0,0,.15);
  -webkit-column-gap:2em;
  column-gap:2em;
}
.req{color:#c00}
.textIcon{background:#999; background-color:rgba(0,0,0,.2);font-size:.8em;line-height:1em;display:inline-block;padding:.2em .4em;border-radius: .5em;color:#fff}
.textIcon:hover{background:#666; background-color:rgba(0,0,0,.4);color:#fff}
.clearfix:after, body:after{content: "";display: table;clear: both;}

figure.videoContainer {margin:1rem 0;}
.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}
figure div.wp-block-embed__wrapper { position: static; }

/* forms */
input, button, select{font-size:.9rem;line-height: 1.2em}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select, input[type="button"], input[type="submit"], input[type="reset"]{border-radius:0; outline: none; -webkit-appearance:none;font-size: .9rem}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{border: 1px solid rgba(82, 82, 82, 0.5); background: rgba(44, 171, 226, 0.07); padding:3px 5px;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus{border-color: rgba(32, 31, 31, 0.5); background: #FFF;}
input, select {height: 2rem;}
textarea{display:block;font-size: .9rem}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select{background-image:url('images/select.png');background-repeat:no-repeat;background-position:right center;padding-right: 18px}
  input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
  input[type="search"]{padding-right:0}
}
select option{padding:0 .2em}
input::-moz-focus-inner {border:0;padding:0;}

.button, button, input[type="button"], input[type="submit"], input[type="reset"], .wp-block-button__link, .frm_forms .frm_submit button {
  background: var(--yellow);
  border: 0;
  color: #000;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  padding: .9em .75em;
  font-size: 1.125rem;
}
.button.green {
  background: var(--green);
}
.button.black {
  background: #000;
  color: var(--yellow);
}
.button.white {
  background: #FFF;
  color: #000;
}
.button:hover, .button:focus,
.frm_forms .frm_submit button:hover, .frm_forms .frm_submit button:focus,
button:hover, button:focus, .button.hover,
input[type="button"]:hover, input[type="button"]:focus,
input[type="submit"]:hover, input[type="submit"]:focus,
input[type="reset"]:hover, input[type="button"]:focus,
input[type="submit"]:focus, input[type="reset"]:focus,
.wp-block-button__link:hover, .wp-block-button__link:focus {
  background-color: var(--blue);
  color: #000;
}

.button{display: inline-block}

.link.triangle {
  font-size: 1.25rem;
  color: #000;
  padding: .9em .75em;
  position: relative;
  text-transform: uppercase;
  display: inline-block;
}
.link.triangle:after {
  content: "";
  background: url(images/icons/caret-right.svg) no-repeat center;
  background-size: contain;
  width: 0.625rem;
  height: 1.25rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  filter: grayscale(1) brightness(5) invert(1);
  transition: all .25s ease;
}
.link.triangle:hover {
  letter-spacing: 1px;
}
.link.triangle:hover:after {
  right: -.25em;
}

button img{height:1em;width:auto;vertical-align:top}
input.bulky, .bulky {padding:.4em .6em;font-size:1.2em}
.formTable, .formTable table{width:100%}
.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 input[type="search"], .formTable textarea{width:100%}
.formTable table td,.formTable table td:first-child{padding-bottom:0}
.formTable.right td:first-child{text-align:right;width:1%}
.formTable.right td{width:auto}
.subjClass{display:none !important;}
#Captcha label{padding-left:0}
td.right, th.right{text-align:right}
.wsNew{display:inline-block;font-size:.7em;line-height:1.5em;height:1.5em;padding:0 .3em;margin:.3em 0;background-color:#FFC700;overflow:visible;vertical-align:top;color:#fff;font-style:italic}
.formEdit select, .formBuilder select { width:40%; }

.frm_forms fieldset {
  border: 0;
  padding: 0;
}
.frm_forms > form > div > fieldset {
  margin: 0 0 2rem;
}
.frm_forms label, .frm_forms .frm_primary_label {
  display: block;
  font-size: 1.125rem;
  color: #000;
  margin-bottom: .25rem;
}
.frm_forms .frm_radio label, .frm_forms .frm_checkbox label {
  display: inline-block;
  font-size: 1rem;
}
.frm_forms .frm_radio input, .frm_forms .frm_checkbox input {
  width: auto;
  height: auto;
}
.frm_forms input, .frm_forms textarea, .frm_forms select {
  width: 100%;
}
.frm_form_field {
  padding: 0 0 1rem;
}
.frm_submit {
  padding-top: 1rem;
}
.frm_forms .frm_radio input[type="text"]:not(.frm_pos_none) {
  display: block;
}
.frm_form_field > h2 {
  margin: 1rem 0 .5rem;
}
.frm_form_fields .frm_none_container {
  padding: 0;
}
.frm_form_fields .frm_none_container > .frm_primary_label {
  display: none;
}
.frm_form_fields .frm_none_container .frm_checkbox {
  padding: .5rem 0;
}
/* HOME  ------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero .wrap {
  padding: 5.0625rem 0 61px;
  overflow: visible;
  max-width: 82.375rem;
}
.hero .wrap:before {
  content: "";
  background: var(--blue);
  opacity: .12;
  pointer-events: none;
  position: absolute;
  right: -50vw;
  bottom: 0.75rem;
}
.hero .wrap .hero-content {
  width: 33.75rem;
  background: #FFF;
  clip-path: polygon(0 1%, 100% 0, 98% 97%, 3% 100%);
  position: relative;
}
.hero .wrap h1 {
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.line {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.line:before {
  content: "";
  left: 0;
  right: 0.3125rem;
  position: absolute;
  background: var(--yellow);
  z-index: -1;
}
.hero .hero-content p {
  font-size: 1.25rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: var(--grey);
}
.hero .hero-content p strong {
  color: #000;
}


.hero .wrap img {
  max-width: 11.25rem;
  height: auto;
}

.hero .clouds:before, .hero .clouds:after, .hero .character:before, .hero .character:after {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}
.hero .clouds:after {
  background-image: url(images/clouds3.svg);
  width: 29.375em;
  height: 7.6875em;
  transform: translateX(50%);
}
.hero .character:before {
  background-image: url(images/character-orange-umbrella.svg);
  width: 18.75em;
  height: 18.25em;
  bottom: 2.5em;
  transform: translateX(50%);
  z-index: 2;
}
.hero .character:after {
  background-image: url(images/character-blue.svg);
  width: 9.6875em;
  height: 11.875em;
  bottom: 0;
  transform: translateX(50%);
  z-index: 3;
}

.hero .rain svg {
  width: 29.375em;
  height: auto;
  transform: translateX(50%);
  z-index: 1;
  position: absolute;

}


.resources {
  text-align: center;
}
.resources .wrap {
  padding-top: 2rem;
  padding-bottom: 1rem;
  overflow: visible;
}
.resources h2 {
  margin-bottom: 2rem;
}
.resources ul {
  display: grid;
  flex-wrap: wrap;
  align-items: stretch;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-auto-rows: 1fr;
}
.resources ul li {
  width: 100%;
  position: relative;
}
#content .resources ul li, .fullWidth .resources ul li {
  padding-left: 0;
}
.resources.interior-callouts {
  margin: 2rem 0;
  padding: 0 2px;
}
.resources ul li a {
  color: #000;
  font-size: 1.375rem;
  line-height: .9;
  font-weight: 700;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 1;
  padding: 2.5rem .6rem;
}
.resources ul li a:before, .resources ul li a:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease;
}
.resources ul li a:before {
  transform: skewY(1deg);
}
.resources ul li a:after {
  border: 1px solid #000;
  transform: skewY(-1deg);
}
.resources ul li a:hover:before {
  transform: skewY(-2deg);
}
.resources ul li a:hover:after {
  transform: skewY(2deg);
}

.home .resources ul li:nth-of-type(4n) a:before, .home .resources ul li:nth-of-type(7n) a:before,
.resources.interior-callouts ul li:nth-of-type(5n+4) a:before {background: var(--yellow);}
.home .resources ul li:nth-of-type(5n) a:before, .home .resources ul li:nth-of-type(6n) a:before,
.resources.interior-callouts ul li:nth-of-type(5n+5) a:before {background: var(--purple);}
.home .resources ul li:nth-of-type(7n+1) a:before,
.resources.interior-callouts ul li:nth-of-type(5n+1) a:before {background: var(--blue);}
.home .resources ul li:nth-of-type(7n+2) a:before,
.resources.interior-callouts ul li:nth-of-type(5n+2) a:before {background: var(--orange);}
.home .resources ul li:nth-of-type(7n+3) a:before,
.resources.interior-callouts ul li:nth-of-type(5n+3) a:before {background: var(--green);}

.news-network {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.news-network:before {
  content: "";
  left: 0;
  bottom: 4.5rem;
  background: var(--blue);
  opacity: .12;
  pointer-events: none;
  z-index: -1;
  position: absolute;
}
.news-network > .wrap {
  overflow: visible;
  max-width: 83.25rem;
}
.news-network .arrows:before, .news-network .arrows:after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  width: 9.375rem;
  height: 14.1875rem;
}
.news-network .arrows:before {
  background-image: url(images/arrow-left.svg);
}
.news-network .arrows:after {
  background-image: url(images/arrow-right.svg);
  z-index: 2;
  right: -1.875rem;
}

.news-network .news {
  padding: 0 1rem;
}

.news ul {
  padding-left: .75rem;
}
.news-network .news .button {
  margin: 1.25rem 0 0 1.25rem;
}
.news ul li {
  font-size: 1.25rem;
  line-height: 1.3;
  position: relative;
}
.news ul li:before {
  width: 11px;
  height: 19px;
  left: 7px;
  top: 2px;
}
.news ul li strong, .news ul li a {
  color: #000;
}
.news ul li a:hover {
  color: var(--purple);
}

.join-network {
  max-width: 38.125rem;
  position: relative;
  z-index: 1;
}
.join-network:before {
  content: "";
  right: 0;
  bottom: -4.125rem;
  left: 0;
  background: #FFF;
  border: 1px solid #000;
  position: absolute;
  z-index: -1;
  transform: skew(-1deg, -1deg);
}

.join-network p {
  font-size: 1.25rem;
  color: var(--grey);
}
.join-network p strong {
  color: #000;
  font-weight: 800;
}
.join-network p.disclaimer {
  color: #000;
  font-weight: 800;
  font-style: italic;
}

.order-materials {
  overflow: hidden;
  position: relative;
}
.order-materials .wrap {
  position: relative;
  padding-bottom: 6rem;
  z-index: 1;
  overflow: visible;
}
.order-materials .wrap:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3.75rem;
  right: -50vw;
  left: 2.75rem;
  background: var(--yellow);
  z-index: -1;
}
.order-materials .wrap {
  max-width: 85.125rem;
}

.order-materials p {
  color: #000;
  font-size: 1.25rem;
}
.order-materials p b, .order-materials p strong {
  font-weight: 800;
}

.buttons {
  margin: 0 -3px;
}
.buttons .button {
  margin: 3px;
}

/* bottom logos CTA */
.bottom-logos .wrap {
  border-top: 1px solid rgba(0,0,0,.1);
}
.bottom-logos .wrap ul {
  display: flex;
  align-items: center;
}

.bottom-logos .wrap ul img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.bottom-logos .wrap ul li a {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--grey);
  text-align: center;
  display: block;
}
.bottom-logos .wrap ul li a:hover {
  opacity: .7;
}

.flex-images > div {display: flex; flex-wrap: wrap;}
.flex-images figure {margin: 0; width: calc(50% - .5rem);}
.flex-images figure:nth-of-type(even) {margin-left: 1rem;}
.flex-images figure:nth-of-type(n+3) {margin-top: 1rem;}

.half-width {
  width: calc(50% - 1.3125rem);
  display: inline-block;
  vertical-align: top;
}
.half-width:not(.no-header) {
  margin-top: 1rem;
}
.half-width.no-header {
  margin-bottom: 2rem;
}
.half-width:nth-of-type(even) {
  margin-left: 1rem;
}

/* ACCORDIONS */
.accordions {margin: 2rem 0;}
.accordions .accordion {
  cursor: pointer;
  margin: 0 0 1rem;
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  padding: 1.125rem 3rem 1.125rem 1.125rem;
}

.accordions .accordion:before, .accordions .accordion:after {transition: all .2s ease;}
.accordions .accordion:before {
  opacity: .12;
  z-index: 0;
  transform: skewY(.5deg);
}
.accordions .accordion:nth-of-type(even):before {background: var(--blue);}
.accordions .accordion:nth-of-type(odd):before {background: var(--green);}
.accordions .accordion:after {
  border: 1px solid #000;
  transform: skewY(-.5deg);
}
.accordions .accordion:hover:before {transform: skewY(-.5deg);}
.accordions .accordion:hover:after {transform: skewY(.5deg);}

.accordion .accordion-title {
  display: flex;
  align-items: center;
  margin: 0;
}
.accordion h2.accordion-title {font-size: 1.75rem;}
.accordion .accordion-title::after {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    border-radius: 50%;
    content: '';
    height: 1.5625rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    width: 1.5rem;
    position: absolute;
    display: block;
    background-image: url('images/icons/arrow-down.svg');
    left: auto;
    right: 1rem;
}
.accordion.expanded .accordion-title::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}


.accordion .accordion-title button {
  padding: 0;
  font-size: 1em;
  font-weight: 500;
  text-align:left;
  background:none;
  line-height: inherit;
  border:0;
  position: relative;
  text-transform: initial;
}
.accordion .accordion-title button:focus {
    outline: 1px solid var(--blue);
    outline-offset: 2px;
}
.accordion .accordion-reveal {
    height: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    outline: 0;
}
.accordion .accordion-reveal p {margin: .75rem 0;}
.accordion .accordion-reveal li {margin : .75rem 0;}
.accordion .accordion-reveal ul li:before {top: 5px;}
.accordion .accordion-reveal li:last-of-type {margin: .75rem 0 0 }
.accordion ul {margin: 0;}
.accordions .accordion-reveal .alignright {margin-bottom: 2em; margin-left: 2em;}

/* TRANSITIONS ------------------------------ */
a, a *,button,.button,input[type="button"],input[type="submit"],.rsFullscreenBtn,#alertApp,#alertApp span,#alertDesc,#navContainer li,.hamburger,#mobilenav span{-webkit-transition: all 200ms ease;transition: all 200ms ease}
input:focus, select:focus, textarea:focus{-webkit-transition: background-color 150ms ease;transition: background-color 150ms ease}


/* FORM ERROR ------------------------------ */
.formError {background-color:Black; border:0; padding: 5px 10px; color:#fff; display:none; margin:0 0 2px; z-index:9999; border-radius: 10px; -moz-box-shadow:0 2px 2px #333; -webkit-box-shadow:0 2px 2px #333;}
.formError p { color: #FFF; margin:0; font-size:.9em; }
.formError em { border:10px solid;  border-color:Black transparent transparent; bottom:-17px; display:block; height:0; left:40px; position:absolute; width:0; }

/* FOOTER ------------------------------ */
body>footer{padding:2rem 1rem 1rem;color:rgba(255,255,255,.7); font-size: 0.9375rem;}
body>footer a, body>footer strong{color:#fff} 
body>footer a:hover, footer a:active{color:#fff; text-decoration:underline;}
body>footer a.on, footer .on>a{text-decoration:underline;color:#fff}
body>footer>.wrap {overflow:visible; padding-top:1em;}
body>footer>.wrap nav {display: inline}
body>footer .fatFooter > *:first-child {width: 13.75rem;}
body>footer .fatFooter > *:nth-child(2) {width: 11.25rem;}
body>footer .fatFooter > *:nth-child(3) {width: 10rem;}
footer .footer-header {
  color: #FFF;
  font-weight: 700;
  text-transform: uppercase; 
}
footer .social-links {
  display: flex;
  position: relative;
  margin: 0;
}
footer .social-links li + li {
  margin-left: 1.75rem;
}
footer .social-links img {
  max-height: 1.25rem;
  width: 1.25rem;
  height: auto;
  display: block;
}
footer .social-links a {display: block;}
footer .social-links a:hover {opacity: .5;}
footer .footer-paragraph {line-height: 1.25;}


/* ANIMATIONS CSS ------------------------------ */
.fade-in,
.pageHeader .clouds:before, .pageHeader .waves:before, .pageHeader .waves:after,
.hero .clouds:before, .hero .clouds:after, .hero .character:before, .hero .character:after,
.animate-up, .arrows:before, .arrows:after, .character-boat:before, .character-boat:after,
.translate-left, .translate-right, .translate-down, .translate-up {
  opacity: 0;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.translate-left { -webkit-transform: translate(3rem,0); -ms-transform: translate(3rem,0); transform: translate(3rem,0); }
.translate-right { -webkit-transform: translate(-3rem,0); -ms-transform: translate(-3rem,0); transform: translate(-3rem,0); }
.translate-up { -webkit-transform: translate(0,3rem); -ms-transform: translate(0,3rem); transform: translate(0,3rem); }
.translate-down { -webkit-transform: translate(0,-3rem); -ms-transform: translate(0,-3rem); transform: translate(0,-3rem); }

.animate-up {
  top: 3rem;
}
.animate-up.animated {
  opacity: 1;
  top: 0;
}

.line:before, .pageHeader h1:before {
  transform-origin: left;
  transform: scaleX(0);
  transition: all .75s ease;
  transition-delay: .25s;
}
.line.animated:before, .pageHeader h1.animated:before {
  transform: scaleX(1);
}

.hero .clouds:before {
  transform: translateX(-5rem) scaleX(-1);
}
.hero .clouds.animated:before {
  opacity: 1;
  transform: translateX(0) scaleX(-1);
}

.hero .clouds:after {
  transition-delay: .3s;
  transform: translateX(70%);
  z-index: 2;
}
.hero .clouds.animated:after {
  opacity: 1;
  transform: translateX(50%);
}

.hero .character:before {
  transition-delay: .25s;
  transform: translateX(30%);
}
.hero .character.animated:before {
  opacity: 1;
  transform: translateX(50%);
}

.hero .character:after {
  transition-delay: .5s;
  transform: translateX(70%);
}
.hero .character.animated:after {
  opacity: 1;
  transform: translateX(50%);
}

.hero .rain.animated:before {
  opacity: 1;
  transform: translate(50%, 0) skew(0, 0);
}

.hero .rain svg {
  overflow: visible;
}
.hero .rain svg .raindrop {
  transition: all 1s ease;
  opacity: 0;
}
.hero .rain svg .raindrop:nth-of-type(odd) {
  transition-delay: 1.3s;
  transform: translate(3rem, -3rem);
}
.hero .rain svg .raindrop:nth-of-type(even) {
  transition-delay: 1.45s;
  transform: translate(4rem, -4rem);
}
.hero .rain svg .raindrop.animated {
  opacity: 1;
  transform: translate(0, 0);
}


.arrows:before {
  transform: translateX(-50%);
}
.arrows:after {
  transition-delay: .3s;
  transform: translateX(50%);
}
.arrows.animated:before, .arrows.animated:after {
  opacity: 1;
  transform: translateX(0);
}

.character-boat:before {
  transform: translateX(30%);
}
.character-boat:after {
  transition-delay: .25s;
  transform: translateX(65%);
}

.character-boat.animated:before, .character-boat.animated:after {
  opacity: 1;
  transform: translateX(50%);
}

.pageHeader .clouds:before {
  transform: translateX(70%);
}
.pageHeader .clouds.animated:before {
  opacity: 1;
  transform: translateX(50%);
}

.pageHeader .waves:before {
  transform: translateX(40%);
}
.pageHeader .waves:after {
  transform: translateX(60%);
}
.pageHeader .waves.animated:before, .pageHeader .waves.animated:after {
  opacity: 1;
  transform: translateX(50%);
}

.line.animated,
.translate-left.animated, .translate-right.animated,
.translate-up.animated, .translate-down.animated {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}

.stop-animations *, .stop-animations *:before, .stop-animations *:after {
  -webkit-animation: none !important;
  animation: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}