@charset "utf-8";

body, html {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: 'Work Sans', sans-serif !important;
font-size: 100%;
}
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
z-index: 9;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: " ";
display: table;
}
.clearfix:after,
.container:after,
.row:after{
content: " ";
clear: both;
}
p {
color: #777;
font-size: 0.85rem;
line-height: 1.6rem;
}
a, a:link, a:visited, a:hover, a:active { 
color: #777;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Work Sans', sans-serif;
color: #000;
margin: 0;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.sticky {flex: 1}
main {flex-shrink: 0}


/*Navigation*/

.navigation {
height: 74px;
margin: 36px 0 0;
z-index: 9999;
}
.nav-container {
width: 100%;
margin: 0 auto;
padding: 0 36px;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
z-index: 9999;
}
nav ul li a, nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
font-size: .8rem;
color: #666;
text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover{
background: #e8e8e8;
color: #777;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: ' ▾';
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
background: #DDD;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
.nav-mobile {
display: none;
position: absolute;
top: 20px; right: 0;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 998px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 100px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 999px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 32px;
cursor: pointer;
padding: 10px 35px 16px 0;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #555;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {top: -10px}
#nav-toggle span:after {bottom: -10px}
#nav-toggle.active span {background-color: transparent}
#nav-toggle.active span:before, #nav-toggle.active span:after {top: 0}
#nav-toggle.active span:before {transform: rotate(45deg)}
#nav-toggle.active span:after {transform: rotate(-45deg)}

/*End navigation*/


.headline {
display: block;
width: 100%;
margin: 6em auto 10em;
max-width: 624px;
}
.headline h1, .headline h2 {
font-family: 'Work Sans', sans-serif;
font-size: 3em;
font-weight: 200;
text-align: center;
}
.headline h2 {
font-size: 1em;
padding: 1.75em;
font-weight: 400;
line-height: 1.5em;
color: #777;
}
.logo img {
position: absolute;
top: 30px;
left: 40px;
}
@media (min-width: 500px) {
.headline h1 {
font-size: 6em;
font-weight: 100;
}
}


div.panes {
width: 92%;
max-width: 1158px;
margin: -2em auto 2em;
height: auto;
display: block;
}
div.array {
display: block;
margin: 0 auto;
}
div.array img {
display: block;
margin: 0 auto .5em;
padding: 1px;
}
div.array img.zoom {
width: 100%;
height: auto;
max-width: 348px;
max-height: 261px;
margin: 0 auto;
transition: transform .6s;
background-color: #FFF;
padding: 1px;
}
div.array img.zoom:hover {
transform: scale(1.4);
padding: 0 1px;
padding: 1px;
}
@media screen and (min-width: 480px) { 
div.array img.zoom {
max-width: 400px;
max-height: 300px;
}
}
@media screen and (min-width: 1200px) {
div.array {
width: 33.33%;
float: left;
margin-bottom: 4em;
}
}



footer {
flex-shrink: 0;
margin: -20em 16px 0;
height: auto;
text-align: center;
background: #282828;
-moz-box-shadow: 0 -8px 8px -8px #696868;
-webkit-box-shadow: 0 -8px 8px -8px #696868;
box-shadow:0 -8px 8px -8px #696868;
z-index: 999;
}
.footerBox {
display: block;
padding: 2em 0;
width: 100%;
max-width: 1280px;
margin: 0 auto;
}
.footer1, .footer2 {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
}
.col1, .col2, .col3 {
display: block;
width: 80%;
margin: 0 auto 2em;
}
.col1 p, .col2 p, .col3 p {
font-family: 'thesansplain', Arial, sans-serif;
font-size: .9em;
color: #666;
line-height: 1.5em;
max-width: 340px;
text-align: center;
margin: 0 auto;
}
.col1 p span, .col2 p span, .col3 span {
font-family: 'thesansplain', Arial, sans-serif;
color: #FFF;
line-height: 2em;
margin: 1em auto 2em;
}
.footerBox .addy {margin: 0 0 3em}
.social {
display: inline-block;
width: 206px;
margin: 0 auto;
text-align: center;
}
.social img {
display: block;
width: 28px;
float: left;
margin: 8px 20px 2em;
}

hr {
display: block;
color: #474747;
}

.footer2 {margin: 3em auto 0}

.toe {
width: 100%;
max-width: 1360px;
}

.toe1 {
width: 95%;
margin: 0 auto;
padding: 0 0 1em;
}
.toe1 img {
width: 100%;
max-width: 80px;
}
.toe1 h3 {
font-family: 'Work Sans', sans-serif;
font-size: 1.2em;
font-weight: 200;
color: #DDD;
line-height: 1.6em;
}
.toe1 p {
margin: 2em auto 0;
line-height: 1.5em;
max-width: 300px;
}

/* toe2 badges */
       
.grid {
	padding: 1em 1em 0;
	margin: 0;
	column-count: 2;
}
.module {
	display: inline-block;
	list-style: none;
	padding: 20px;
}
.grid .module img {
	width: 100%;
	padding: 10px;
	border-radius: 7px 30px 7px 7px;
	max-width: 180px;
	min-width: 120px;
}

@media screen and (min-width: 600px) {
	.grid {padding: 0 1em}
	.module {margin: 0 0 1em}
}
@media screen and (min-width: 1200px) {
	.grid {column-count: 4}
}




@media (min-width: 760px) {
.footer1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 0;
grid-row-gap: 0;
color: #FFF;
}
.toe1 {
display: block;
float: left;
width: 50%;
padding: 0 2em 3em;
}
@media (min-width: 960px) {
footer {margin: 0 20px}
}
@media (min-width: 1220px) {
.toe1 {
float: left;
width: 25%;
}
}


#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 40px;
right: 2em;
overflow: hidden;
width: 58px;
height: 58px;
border-radius: 50%;
z-index: 999;
text-align: center;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; 
}
#toTop span {
display: none; }
#toTop:before {
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f062";
font-style: normal;
display: inline-block;
text-transform: none;
letter-spacing: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: 'liga';
-moz-font-feature-settings: 'liga';
font-feature-settings: 'liga';
width: 100%;
font-size: 20px;
line-height: 58px;
background: #FFF; 
}
#toTop:focus {outline: none}
@media (min-width: 544px) {
#toTop {right: 3em} }
@media (min-width: 768px) {
#toTop {bottom: 80px} }