/*
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
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 */

/* HEADER ------------------------------*/
body>header{background:var(--dark-grey); position: relative;overflow: visible; padding: 0; position: fixed; z-index: 6; top: 0;}
.logged-in.admin-bar>header {top: 32px;}
body>header + .fixed-cta + *, body>header + .pageHeader, body>header + main {margin-top: 5.625rem;}
body>header>.wrap{height:5.625rem; overflow: visible; max-width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0;}
body>header>.wrap #navContainer {align-self: flex-end;}
#brand {display:block; padding: .25em 0; max-width: 17.5rem; margin-left: 0.625rem;}
#brand img {width:100%; display: block; height: auto;}
body>header .mobile-numbers {display: none;}

nav ul{margin: 0}
#mainnav{overflow:visible}
#mainnav ul{text-align:center;overflow:visible;margin: 0;padding: 0;}
#mainnav li{display:inline-block;position:relative}
#mainnav a{line-height:2.7em;font-size: 1.25rem; padding:0 1em;display:inline-block;color:#fff;text-decoration:none;}
#mainnav>div>ul {position: relative;}
#mainnav>div>ul:before {content: ""; left: 0; right: 0; top: 0; position: absolute; height: 1px; background: rgba(255,255,255,.2);}
#mainnav>div>ul>li:hover>a, #mainnav>div>ul>li:active>a{background:var(--green);color:#000}
#mainnav>div>ul>li.current-menu-item>a,
#mainnav>div>ul>li.current-page-ancestor>a {background:#fff;color:#000}
/*dhtml*/
#mainnav li ul{z-index:1;width:16.1875rem;padding:0.875em 0;background:#FFF; border: 1px solid rgba(229, 245, 251, 0.5); position:absolute;overflow:auto;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul {top:auto;opacity: 1;z-index: 5; visibility: visible}
#mainnav>div>ul>li:last-child ul{right:0}
#mainnav li ul li{width:100%;display:block;float:left}
#mainnav li ul li a{font-size:1em; color: var(--grey); line-height:1.1em;padding:.41em .5em; display:block;width:100%;text-align:left;float:left}
#mainnav li ul li a:hover, .t1 li ul li a:active{color:#000;background:var(--blue);}
#mainnav li ul ul {display: none}
/* ancillary */
#ancillary {position:absolute;right:0;top:0;padding:0; font-size:1em;}
#ancillary ul{display: inline}
#ancillary li{display: inline;}
#ancillary a {display: inline-block;padding: .375em .8em; color: var(--yellow); text-decoration:none;}
#ancillary a:hover, #ancillary a:active,#ancillary li.on a{color:var(--green)}
#ancillary li.on a {text-decoration:none;}
#ancillary form{display: inline;}
#ancillary form input{display: inline-block}
#ancillary ul li ul.sub-menu {display: none;}
/* mobile */
#mobilenav, .toggleNav{display: none}


/* MAIN ------------------------------ */
.fixed-cta {
  position: absolute;
  pointer-events: none;
  bottom: 0;
  top: 0;
  right: 0;
  padding-top: 30vh;
  z-index: 5;
}
.fixed-cta .fixed-cta-inner {
  position: sticky;
  pointer-events: initial;
  top: 30vh;
  transform: translateY(-50%);
}
.home .fixed-cta {padding-top: 23.25rem;}
.home .fixed-cta .fixed-cta-inner {top: 23rem;}
body:not(.home) .fixed-cta {padding-top: 9rem;}
body:not(.home) .fixed-cta .fixed-cta-inner {top: 15rem;}
.fixed-cta .fixed-cta-inner > * {
  width: 100%;
  padding: 9px 6px;
  display: block;
  line-height: 1.13;
}
.fixed-cta .fixed-cta-inner * {color: #000;}

.fixed-cta .fixed-cta-inner > *:first-child {
  background: #FFF;
  text-transform: uppercase;
  font-weight: 800;
}
.fixed-cta .fixed-cta-inner > *:nth-child(2) {background: var(--orange);}
.fixed-cta .fixed-cta-inner > *:nth-child(3) {background: var(--green);}
.fixed-cta .fixed-cta-inner > *:nth-child(4) {background: var(--blue);}
.fixed-cta .fixed-cta-inner > a:hover {background: var(--purple);}

.pageHeader {padding: 5.25rem 0 9.75rem;}
.pageHeader h1 {font-size: 3.125rem; margin: 0;}
.pageHeader:before {left: 4.6875rem;}
.pageHeader .character-boat:before {bottom: 1.25em;}
.pageHeader-wrap {max-width: 62.0625rem; width: 100%; margin-left: auto; margin-right: auto;}
.pageHeader-wrap-inner {float: right; width: calc(100% - 15rem);}

  main > .wrap {padding-top: 1em}
main>div>aside{width:15rem;padding-right: 2.5rem; overflow:hidden;float: left;}
body.fullWidth  #content {width: 100%;margin: 0 auto;float: none}

#content{float:right;width:calc(100% - 15rem);padding:0 0 50px;overflow:hidden;min-height:600px;position:relative}
#content.fullWidth {float:none;margin: 0 auto}
.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol, .threeCol, .resCol{
  -webkit-column-rule:1px outset rgba(0,0,0,.15);
  -moz-column-rule:1px outset rgba(0,0,0,.15);
  column-rule:1px outset rgba(0,0,0,.15);
}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol {
  -webkit-columns: auto;-moz-columns: auto;columns: auto;
  -webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;
}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}

#biographies .biographies {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#biographies .biographies a {width: 20%; margin: 1.5% 1.5% 1em;-webkit-order: 0;-ms-flex-order: 0;order: 0;-webkit-flex: 0 1 20%;-ms-flex: 0 1 20%;flex: 0 1 20%;-webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;}

blockquote {
  width: 46%;
  margin: 1.5625rem 0 1.875rem 1.875rem;
  float: right;
}
blockquote cite {
  display: table;
  text-align: right;
  margin: 0 0 0 auto;
}

.bottom-logos .wrap ul {padding: 0 7.5rem;}
.bottom-logos .wrap ul li {flex: 1 1 0;}
.bottom-logos .wrap ul li + li {margin-left: 10.5%;}
.bottom-logos .wrap ul img {max-height: 5.625rem;}

.line:before {top: 1rem; bottom: 0.5625rem;}

.fixed-cta .fixed-cta-inner {width: 8.875rem;}
.fixed-cta .fixed-cta-inner > * {font-size: 0.9375rem;}

/* 404 page */
body.error404 main h1 {padding-top: 2rem; font-size: 2.25rem; text-align: center;}
body.error404 main p {font-size: 1.25rem; text-align: center;}

/* HOME -------------------------------- */
.hero .wrap h1, .join-network h2, .order-materials h2, .welcome h2 {font-size: 2.375rem;}
.resources h2, .news-network .news h2 {font-size: 2.5rem;}

.hero {margin: 1.6875rem 0 1.5625rem 3.5rem;}
.hero .wrap .hero-content {margin-left: 9.375rem; padding: 3.375rem 1.6875rem 3.375rem 4.125rem;}
.hero .wrap img {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.hero .wrap:before {top: 1.4375rem; left: 1.125rem;}
.hero .clouds:before {
  background-image: url(images/clouds.svg);
  width: 14.5625em;
  height: 5.625em;
  top: 0;
  left: 13%;
  transform: scaleX(-1);
}
.hero .clouds:after {right: 23%; top: 0.6875em;}
.hero .character:before {right: 23%;}
.hero .character:after {right: 17.5%;}
.hero .rain svg {right: 23%; top: 8.1em;}


.resources ul {grid-template-columns: repeat(5, 1fr);}
.home .resources ul li:nth-of-type(5n+2), .home .resources ul li:nth-of-type(5n+4) {transform: translateY(-1.25rem);}

.resources.interior-callouts ul {grid-template-columns: repeat(2, 1fr);}

.news-network .news {max-width: 28.0625rem;}
.news-network {padding: 10.6875rem 0 8.0625rem;}
.news-network > .wrap {display: flex; justify-content: space-between; padding: 0 5rem 0 6rem;}
.news-network:before {right: 4.6875rem; top: 7.25rem;}
.news-network .arrows:after {top: 10.5rem;}
.news-network .arrows:before {top: 0; left: -3rem;}

.join-network {padding: 0 2.625rem 0 5.25rem;}
.join-network:before {top: -5.3125rem;}

.order-materials .wrap {
  display: flex;
  padding-top: 5.375rem;  
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.order-materials .wrap .order-materials-video {width: 43%; margin-right: 17%;}
.order-materials .wrap .order-materials-content {max-width: 19.6875rem;}
.order-materials .order-materials-video .link.triangle {margin-left: 1.875rem;}

.welcome .wrap {display: flex; align-items: center;}
.welcome .wrap > * {width: 42%;}
.welcome .wrap > * + * {margin-left: 16%;}

/* FOOTER ------------------------------ */
body>footer .fatFooter {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
body>footer .wrap #web-solutions {float:right;margin-left:11px}
body>footer .wrap nav span:before {content: "|"; margin: 0 0.5em}

body>footer .fatFooter{margin-bottom:3rem;}
body>footer .fatFooter > *:nth-child(2) {margin-right: 11rem;}

/* ANIMATIONS -------------------------- */
.delay-2, .pseudo-animate.delay-2:before   {  transition-delay:.3s;}
.delay-3, .pseudo-animate.delay-3:before   { transition-delay:.45s;}
.delay-4, .pseudo-animate.delay-4:before   {  transition-delay:.6s;}
.delay-5, .pseudo-animate.delay-5:before   { transition-delay:.75s;}
.delay-6, .pseudo-animate.delay-6:before   {  transition-delay:.9s;}
.delay-7, .pseudo-animate.delay-7:before   { transition-delay:1.05s;}
.delay-8, .pseudo-animate.delay-8:before   { transition-delay:1.2s;}
.delay-9, .pseudo-animate.delay-9:before   { transition-delay:1.35s;}
.delay-10, .pseudo-animate.delay-10:before { transition-delay:1.5s;}

/* MIN 1400 */
@media (min-width: 87.5em) {
  .hero .clouds:after {right: 32%;}
  .hero .character:before {right: 32%;}
  .hero .character:after {right: 27.5%;}
  .hero .rain svg {right: 32%;}
  
  .news-network .arrows:before {left: -1.25rem;}
  .news-network .arrows:after {right: -1.25rem;}
}

/* 1250 */
@media (max-width: 78.125em) {
  #mainnav a {padding: 0 .25em; font-size: 1.125rem;}
  #ancillary a {padding: .55em .8em;}

  .fixed-cta {padding-top: 40vh;}
  .fixed-cta .fixed-cta-inner {top: 40vh;}

  .resources ul {grid-column-gap: 15px; grid-row-gap: 15px;}

  .welcome .wrap > * {width: 47%;}
  .welcome .wrap > * + * {margin-left: 6%;}  

  .line:before {top: .75rem; bottom: 0.4rem;}

  .hero .wrap h1, .join-network h2, .order-materials h2, .welcome h2 {font-size: 2.125rem;}
  .resources h2, .news-network .news h2 {font-size: 2.25rem;}
  
  .hero {margin-left: 0;}
  .hero .wrap .hero-content {max-width: 25rem;}
  .hero .wrap img, .hero .wrap .hero-content {z-index: 2;}
  .hero .clouds:after {right: 17%;}
  .hero .character:before {right: 17%;}
  .hero .character:after {right: 12.5%;}
  .hero .rain svg {right: 17%;}

  .pageHeader .character-boat:before {right: 86%;}
  .pageHeader .character-boat:after {right: 15%;}

  .join-network {padding: 0 2.625rem 0 3.25rem;}  
  .news-network > .wrap {padding: 0 3rem 0 6rem;}
  .join-network h2 {padding-right: 1rem;}
  .news-network .arrows:after {right: -2.875rem;}

  .order-materials .wrap {min-height: 32.1875rem;}
  .order-materials .wrap .order-materials-video {width: 49%; margin-right: 14%;}
  .order-materials .character-boat:before {right: 41%;}
  .order-materials .character-boat:after {right: 9%;}

  .bottom-logos .wrap ul {padding: 0;}
  .bottom-logos .wrap ul li + li {margin-left: 8.5%;}

  body>footer .fatFooter > *:nth-child(2) {margin-right: 4rem;}
}

/* 900 */
@media (max-width: 56.25em) {
  body>header>.wrap {height: 5rem;}
  #brand {max-width: 28vw;}
  #mainnav a {padding: 0 .4em; font-size: 0.9375rem;}
  #ancillary a {padding: .45em .8em; font-size: 0.9375rem;}
  body>header + .fixed-cta + *, body>header + .pageHeader {margin-top: 5rem;}

  .hero .wrap h1, .join-network h2, .order-materials h2, .welcome h2 {font-size: 1.875rem;}
  .hero .clouds:before, .hero .clouds:after, .hero .character:before, .hero .character:after, .hero .rain svg {font-size: .8em;}
  .hero .character:before {right: 16%;}
  .hero .character:after {right: 10.5%;}

  .news-network > .wrap {flex-direction: column;}
  .news-network .news {margin-bottom: 4rem;}
  .news-network .arrows:after {top: auto; bottom: 10rem; right: -1.25rem;}
  .join-network:before {top: -2.3125rem;}

  .order-materials .wrap {flex-direction: column; padding-left: 5rem; padding-bottom: 13.5rem;}
  .order-materials .wrap .order-materials-content {max-width: 100%;}
  .order-materials .wrap .order-materials-video {width: 90%; margin-right: 0; margin-top: 2rem;}
  .order-materials .character-boat:before {right: 54%;}
  .order-materials .character-boat:after {right: 20%;}

  .resources ul {grid-template-columns: repeat(4, 1fr);}
  .home .resources ul li:nth-of-type(5n+2), .home .resources ul li:nth-of-type(5n+4) {transform: translateY(0);}

  .welcome .wrap > * {width: 49%;}
  .welcome .wrap > * + * {margin-left: 2%;}  

  .bottom-logos .wrap ul li + li {margin-left: 6%;}

  .fixed-cta .fixed-cta-inner {width: 7.875rem;}
  .fixed-cta .fixed-cta-inner > * {font-size: 0.8125rem;}

  blockquote {width: 55%;}

  body>footer .fatFooter > *:first-child {width: 11.75rem;}
  body>footer .fatFooter > *:nth-child(2) {margin-right: 2rem;}
  footer .social-links li + li {margin-left: 1.25rem;}

}

/* for the wordpress admin bar resize - in pixels to match the WP media query */
@media (max-width: 782px) {
  .logged-in.admin-bar>header {top: 46px;}
}