@charset "UTF-8";
/* CSS Document */

body {background-color: #fff; color: #222831; font-size: 2.15vh; line-height: 1.8;}

p {margin-bottom: 2vh; line-height: 1.8; /*max-width: 680px;*/}
a {color: #305555; text-decoration: underline;}
a:hover, a:focus {text-decoration: none;}
::selection {background: #FBD46D;}

#skipContent {
  padding: 8px;
  position: absolute;
  top: 24px;
  left: 24px;
  background: #eee;
  border: 2px solid #305555; 
  text-decoration: underline;
  transform: translateY(-150%);
  transition: transform 0.3s;
}
#skipContent:focus {transform: translateY(0%);}

h1, h2, h3, h4, h5, h6 {font-family: 'Inter', sans-serif; line-height: 1.4; margin-bottom: 1vh;}
h1 {font-size: 3vh; line-height: 1.1; padding-bottom: 8px;}
h2 {font-size: 2.7vh;}
h3 {font-size: 2.4vh;}
h4 {font-size: 2vh;}

header {
	background-color: rgba(79, 138, 139, .5); 
	font-family: 'Source Sans Pro', sans-serif; 
	padding: 4%;
}
.caption {
  font-size: 1.85vh;
  font-style: italic;
}

.sidebar {background-color: rgba(196, 196, 196, .2); padding: 0%;}
#content .container {max-width: 80%; margin: 3% auto 0;}
#content .container ul {list-style:disc;}
.strip {padding: 3% 0;}
.strip .mockup {box-shadow: 2px 5px 5px rgb(34 40 49 / 40%); margin-bottom: 4%;}
.strip .mockup.thin {width: 50%;}

.name {font-size:2.4vh; font-weight: 700; line-height:1.4; padding-bottom: 12px;}
.subhead {font-size: 2vh; line-height:1.2;padding-bottom: 8px; max-width: 100%;}

.icons {text-align: center;}
.icons li {display: inline-block;}
.icons a {padding: 8px;}
.nav-item {margin: 16px 0;}
.nav-item a {padding: 8px;}
.icons a:hover, .icons a:focus, .nav-item a:hover, .nav-item a:focus {
    color: #fff;
    background: #305555;
    text-decoration: none;
}
.icons a:hover::selection, .icons a:focus::selection {color: #305555;}

.item {
    background: rgba(251, 212, 109, 0.6);
    display: inline-flex;
    width: 100%;
    margin-bottom: 12px;
    min-height: 400px;
    box-shadow: 2px 4px 6px rgb(34 40 49 / 10%);
    text-decoration: none;
    padding: 3%;
}
.item::after {
    box-shadow: 2px 5px 5px rgb(34 40 49 / 40%); 
    transition: opacity .3s ease-in-out;
    opacity: 0;
  }
.item:hover::after {opacity: 1;}

.item h2 {font-size: 1.6em;}

.primary-navigation {
  overflow: hidden;
  position: relative;
  top: 12px;
  padding: 2% 6% 4%;
}

.navigation-item-group {
  padding-left: 0px;
  max-height: 1px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.navigation-item-group li {
  list-style-type: none;
  margin: 15px auto;
}
.navigation-item-group li:first-child{margin-top: 0;}

.navigation-item-group a {
  line-height: 1.4;
  padding: 5px 7px;
  margin: 0px 2px 0px 2px;
  text-decoration: none;
  display: inline-block;
}

.navigation-item-group a:hover, .navigation-item-group a:focus {
  color: #fff;
  transition: 0.3s ease;
}
.navigation-item-group a:hover::selection, .navigation-item-group a:focus::selection {color: #305555;}

.primary-navigation label {
  cursor: pointer;
  font-size: 3vh;
  display: block;
  height: 50px;
  overflow: hidden;
}

#menuToggle label div {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 6px;
  position: relative;
  right: -95%;
  bottom: 30px;
  background: #305555;
  border-radius: 3px;  
  z-index: 1;  
  -webkit-transform-origin: 4px 0px;  
      -ms-transform-origin: 4px 0px;  
          transform-origin: 4px 0px;
}

#menuToggle label div:first-child {
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}

#menuToggle label div:nth-child(2) {
    -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#menuToggle input {
  display: none;
}

#toggle:checked + .navigation-item-group {
  display: block;
  max-height: 250px;
  columns: 40px 2;
}

/*.quickFacts {width: 50%;float: right;}*/
.quickFacts h2, .box h2 {font-size: 2.15vh; font-weight: bold; margin-bottom: 0;}
.box h3 {font-size: 2.15vh; font-weight: bold;}
.box h4 {font-size: 2vh; font-weight: 500;}

.pull-right {float: right; margin-left: 40px; max-width: 40%;}
.highlight-right {margin-left: 40px; max-width: 300px; float:right;}
.shadow {box-shadow: 2px 5px 5px rgb(34 40 49 / 40%);}
.callout {float:right; width:40%; background-color: rgba(79, 138, 139, .35); padding: 12px; margin-left:12px;}

footer .nav, footer .copyright {text-align: center;}
footer .copyright p {margin: 0 auto;}
footer .nav li {display: inline-block; margin-right: 8px;}

@media screen and (min-width: 768px) {
    header {padding: 2% 4%;}
    h1 {font-size: 6vh; padding-bottom: 16px;}
    .name {font-size:4vh; font-weight: 600; padding-bottom: 0;}
    .subhead {font-size: 2vh;}
    .icons {text-align: left;}
    .sidebar {padding: 4%;}
    .item {width: 48%; margin-bottom: 24px;}
    .item:nth-child(odd) {margin-right: 24px;}
    .primary-navigation, .navigation-item-group {display: block; overflow: visible;}
    .primary-navigation label {display: none;}
    #toggle:checked + .navigation-item-group {display: flex;}
}

@media screen and (min-width: 1024px) {
    h1 {font-size: 6vh;}
    h1.home {font-size: 6vh;}
    .name {font-size: 4vh; font-weight: 500;}
    .subhead {font-size: 2.7vh;}
    .sidebar {padding: 2%;}
    .strip .mockup.thin {width: 100%;}
}

@media screen and (min-width: 1200px) {
    h1 {font-weight: 600;}
    .name {text-indent: -6%; font-weight: 500;}
    .item {width: 48.5%;}
}