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

/* HEADER ------------------------------ */
body>header {background-color: var(--dark-grey);}
body>header>.wrap {padding: 0;} 
body>header #brand {display: block; padding: 1em}
body>header #brand img {max-width: 100%; height: auto; margin:0 auto; display: block}
.slideNav{overflow: hidden;}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #000;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;transition:left 0ms ease 200ms, opacity 200ms ease}
body.slideNav>header:before{left:0;opacity: .5;transition:left 0ms ease 0ms, opacity 200ms ease}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 85%;max-height: 100vh;background-color:var(--dark-grey);z-index:6;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
.admin-bar #navContainer{top:46px}
body.slideNav {overflow: hidden;}
.slideNav #navContainer{left: 15%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block;float: left;width: 100%; position: relative}
#navContainer a, #navContainer aside.toggleNav{color:#fff;line-height:3em;padding:0 1rem;display:block;float: left;width: 100%}
#navContainer li.on a{background-color:var(--blue);color: #fff}
#navContainer li.open{background-color: var(--grey);}
#navContainer li>ul+span{opacity: 0.5;display: block;position: absolute;right: 0.1875rem;top: 0;width: 3em;height: 3em;}
#navContainer li.open>ul+span{opacity: 1}
#navContainer li>ul+span:before{content: ""; display: block; width: 40%; height: 0.125rem; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
#navContainer li>ul+span:after{content: ""; display: block; width: 40%; height: 0.125rem; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}
#navContainer li.open>ul+span:before {transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li>ul+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;}
#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul ul a {padding: 0.5em 1rem 0.5em 2rem; line-height: 1.5em}
#navContainer ul ul li.current-menu-item a {background-color: var(--blue)}
#navContainer form {clear: both; width:100%; padding:1em}
#navContainer form input[type="search"] {width:calc(100% - 6em)}
#navContainer form .search-submit {width:6em}
#mobilenav{border-top: 1px solid rgba(255,255,255,0.125);float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #FFF;line-height: 2.5em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
#mobilenav *+* {border-left: 1px solid rgba(255,255,255,0.125)}
#mobilenav a:hover, #mobilenav span:hover{color: #fff;background-color:var(--blue)}

#mobilenav .toggleNav {display: flex; align-items: center; justify-content: center;}
#mobilenav .toggleNav svg {fill: #FFF; width: 0.875rem; height: auto; margin: -2px 0 0 .4rem;}

body>header .mobile-numbers {
  display: flex;
  align-items: stretch;
  justify-content: center;
}
body>header .mobile-numbers > * {
  flex: 1 1 auto;
  padding: .25rem;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
body>header .mobile-numbers * {
  color: #000;
  line-height: 1em;
}

body>header .mobile-numbers > *:nth-child(1) {background: var(--orange);}
body>header .mobile-numbers > *:nth-child(2) {background: var(--green);}
body>header .mobile-numbers > *:nth-child(3) {background: var(--blue);}
body>header .mobile-numbers strong {
  display: block;
  width: 100%;
}
/* MAIN ------------------------------ */
.pageHeader {padding: 5.25rem 0 9.75rem;}
.pageHeader h1 {font-size: 2.5rem; text-align: center; margin: 0 auto;}
.pageHeader:before {left: 0;}
.character-boat:before, .character-boat:after, .pageHeader .waves:before, .pageHeader .waves:after, .pageHeader .clouds:before {font-size: .65em;}
.pageHeader .character-boat:before {bottom: 0; z-index: 1;}
.pageHeader .waves:after {content: none;}

blockquote {margin: 2rem 1rem;}

#content {padding: 2em 0}
.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;
}

#content ul li {padding-left: 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;}

.admin-bar .main-navigation {top:46px}
#wpadminbar {position: fixed}
.slideNav header>.menu{right:80%}
.slideNav>nav {right:0}

.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 0;top:0;z-index:2;opacity: 0;background-color: var(--blue);padding: 3px 5px;}
.hamburger path {fill: #FFF; font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{opacity: .3}

.admin-bar .hamburger {margin-top: 3em}

.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}

#biographies .biographies a img {height: auto}
#biographies {padding: 3em 1em}
#biographies .biographies a {max-width: 82%; margin-bottom: 1em}

.bottom-logos .wrap ul {flex-wrap: wrap; padding: 1rem; justify-content: center;}
.bottom-logos .wrap ul li {width: calc(50% - 2rem);}
.bottom-logos .wrap ul li:nth-of-type(even) {margin-left: 4rem;}
.bottom-logos .wrap ul li:nth-of-type(n+3) {margin-top: 3rem;}
.bottom-logos .wrap ul img {max-height: 5rem; max-width: 8rem;}

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

.fixed-cta {display: none;}

main .button + .button {display: table; margin-top: 0.5rem;}

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

.hero {margin: 0 0 1.875rem;}
.hero .wrap {margin-bottom: 12.5rem; padding: 3rem 0 16rem;}
.hero .wrap img {margin: 1rem auto; display: block;}
.hero .wrap:before {top: 0; bottom: 0; left: 0;}
.hero .wrap .hero-content {margin: 0 auto; padding: 3.375rem 2.6875rem; max-width: 90%;}

.hero .character:before {right: 52%;}
.hero .character:after {right: 42.5%;}
.hero .clouds:before {content: none;}
.hero .clouds:after {right: 50%; bottom: 21rem;}
.hero .rain svg {right: 50%; bottom: 4rem;}

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

.news {margin-bottom: 4rem; max-width: 30rem;}
.news-network {padding: 6.6875rem 0 8.0625rem;}
.news-network:before {top: 3.25rem;}
.news-network > .wrap {padding: 0 3rem 0 4rem;}
.news-network .arrows:before {left: -5rem; top: -4.125rem;}
.news-network .arrows:after {bottom: 23%; right: -5rem;}
.news-network:before {right: 1.75rem;}
.join-network {padding: 0 2.625rem;} 
.join-network:before {top: -2.3125rem;}

.order-materials .wrap {padding-left: 5rem; padding-bottom: 15rem; padding-top: 3.375rem;}
.order-materials .wrap .order-materials-video {width: 90%; margin-top: 2rem;}
.order-materials .character-boat:before {right: 72%;}
.order-materials .character-boat:after {right: 23%;}

.welcome-image {max-width: 31.25rem; margin: 2rem auto 0;}

.accordions .accordion-title {font-size: 1.5em;}

/* FOOTER ------------------------------ */
body>footer .wrap {display: -ms-flexbox;display: -webkit-box;display: flex;-ms-flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-pack: start;-webkit-box-pack: start;justify-content: flex-start;-ms-flex-line-pack: stretch;align-content: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;align-items: stretch;}
body>footer .wrap nav {display: block}
#web-solutions{ -ms-flex-order: 1;  -webkit-box-ordinal-group: 2; order: 1;}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}

.main-navigation .search-form, body>footer .search-form{width:100%;display: block}
.main-navigation .search-form{padding:1rem;border-top:1px solid rgba(255,255,255,.2);position: relative;overflow: auto}
.search-form input[type="search"]{height: 2em;width:calc(100% - 2em);line-height: 2em;font-size: 1em;padding: 0 0 0 .5em;border: 0;float: left;background-color: #fff}
.search-form .search-submit{height: 2em;width: 2em;line-height: 2em;font-size: 1em; color:#000; padding: 0;border: 0;float: left;-webkit-appearance:none;background-color: #ccc}
.search-form .screen-reader-text {display: none}

body>footer .fatFooter {text-align: center; margin-bottom: 1rem;}
footer .fatFooter > * {margin: 0 auto 1rem;}
footer .social-links {justify-content: center; margin-top: 2rem;}
body>footer .wrap {text-align: center;}

/* 500 */
@media (max-width: 31.25em) {
  body>header .mobile-numbers {flex-wrap: wrap;}
  body>header .mobile-numbers > * {padding: .5rem; display: block; font-size: 0.9375rem;}
  body>header .mobile-numbers > *:not(:last-child) {width: 50%;}
  body>header .mobile-numbers > *:last-child {width: 100%; position: absolute; top: 0;}
  body>header .mobile-numbers strong {display: inline-block; width: auto;}
  body>header #brand {margin-top: 1.9375rem;}
    

  blockquote {margin: 2rem .5rem;}
  blockquote p {font-size: 1.25rem;}

  .highlight, #content .highlight {padding: 1.875rem 1.25rem;}

  #content .alignright, #content .align-right {max-width: 100%; float: none; margin: 2rem 1rem;}

  .hero .wrap h1, .join-network h2, .order-materials h2, .welcome h2 {font-size: 1.75rem;}
  .resources h2, .news-network .news h2 {font-size: 2rem;}

  .hero .wrap .hero-content {padding: 3.375rem 1.5rem;}
  .hero .character, .hero .clouds, .hero .rain {font-size: .9em;}
  .hero .rain svg {bottom: 6rem;}

  .resources ul {grid-template-columns: repeat(1, 1fr);}
  .resources ul li:nth-of-type(even) {transform: translateY(0);}

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

  .news-network:before {right: 0; bottom: 8.5rem;}
  .news-network > .wrap {padding: 0 .5rem;}
  .news {padding: 0 0 0 3rem;}
  .news-network .arrows:before {left: -6.5rem;}
  .news-network .arrows:after {content: none;}
  .join-network {padding: 0 1rem;}
  .join-network:before {bottom: -2rem;}

  .order-materials .wrap:before {left: 0;}
  .order-materials .wrap {padding-left: 1.5rem;}
  .order-materials .wrap .order-materials-video {width: 100%;}

  .bottom-logos .wrap ul li {width: calc(50% - 1rem);}
  .bottom-logos .wrap ul li:nth-of-type(even) {margin-left: 2rem;}
  .bottom-logos .wrap ul img {max-width: 100%;}

  .flex-images figure {margin: 0; width: 100%;}
  .flex-images figure:nth-of-type(even) {margin-left: 0;}
  .flex-images figure:nth-of-type(n+2) {margin-top: 1rem;}

  .half-width {width: 100%;}
  .half-width:not(.no-header) {margin-top: 1rem;}
  .half-width.no-header {margin-bottom: 1rem;}
  .half-width.no-header + h2 {margin-top: 2rem;}
  .half-width:nth-of-type(even) {margin-left: 0;}

  .accordions .accordion-reveal .alignright {margin: 1em 0; max-width: 100%; width: 100%; float: none;}

  .frm_forms .frm_third {grid-column: 1 / -1;}

}