body{
  color:#6f6f6f;
  background: #f8f8f8;
  font-family: 'Roboto Slab', 'Georgia', serif;
  -webkit-font-smoothing:antialiased;
}

a{
  /*font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-family: "Work Sans", Futura, sans-serif;
}

.bodyWrap{
  transform: translateX(0vw);
  
  transition: transform 0.25s ease;
}

.sideMenu{
  position: fixed;
  width: 100vw;
  z-index: 998;
  background: rgba(0,0,0,0.8);
  
  overflow: hidden;
  
  transform-origin: 50% 73px 0;
  perspective-origin: bottom center;
  transform: scaleY(0);
  
  -webkit-transform-origin: 50% 73px 0;
  -webkit-perspective-origin: bottom center;
  -webkit-transform: scaleY(0);
  
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  -webkit-transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.sideMenuOpen{
  transform: scaleY(1);
  -webkit-transform: scaleY(1);
}

.sideMenu ul{
  margin-top:73px;
}

h1, h2, h3, h4, h5, h6{
  color:#333;
  font-weight: 900;
  /*font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
  font-family: "Work Sans", Futura, sans-serif;
}

header{
  height: 73px;
  padding: 12px 0;
  width: 100%;  
  position:fixed;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  background-color: #2d88c5; /*set theme color in html*/
  
  transition: height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, height;
  
  color:white;
}

.vCent{
  display: inline;
  float: right;
  margin-top: 10px;
  
  transition: margin-top 0.25s ease;
}

#logo{
  margin-right:12px;
  height: 50px;
  
  transition: height 0.25s ease;  
}

#title{
  display: inline;
  opacity: 1;
  color:#fff;
  
  transition: opacity 0.25s ease;
}

.titleFull{
  opacity: 0 !important;
}

#largeNav{
  display: none;
}

#hamb{
  font-size: 1.5em;
  opacity: 1;
  
  transition: opacity 0.25s ease;
}

.wrapper{
  margin: 0 15px;
}

header ul, .vCent .navLinks{
  float: right;
  height: 50px;
}

.navLink{
  color:#fff;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.navLink:hover, .navLink:focus{color:#fff; opacity:0.7}
.navLink:active{color:#fff; opacity:0.5}

.hero{
  padding: 150px 0 100px 0;
  text-shadow: 0 0 20px rgba(0,0,0,0.15);
  
  background-color: #2d88c5;
  background-image: url(../img/hexbg5.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  
  margin-bottom: -20vh;
  }

.spacer{
  height: 20vh;
  /*box-shadow: inset 0px -35px 25px -25px rgba(0,0,0,0.3);*/
}

.sarcasm{
  display:none;
}

.hero *{
  color:#fafafa;
}

.hero h1{
  text-transform: uppercase;
}

.hero h3{
  font-weight: 400;
  font-family: 'Roboto Slab', 'Georgia', serif;
}
.hero h5{
  font-weight: 400;
  font-family: 'Roboto Slab', 'Georgia', serif;
  font-style: italic;
}

.hook{
  font-weight:700;
}

.content img{
  display: block;
  margin: 0 auto;
}

.project{
  box-shadow: 0 0px 4px rgba(0,0,0,0.1);  
}

.facts *{
  display: inline;
}
.facts strong{
  font-family: "Work Sans", Futura, sans-serif;
}

p a{
  font-family: 'Roboto Slab', 'Georgia', serif;
}

.button{
  background-color: #2d88c5;
  margin-bottom: 0px;
  font-family: "Work Sans", Futura, sans-serif;
  transition: background-color 0.2s ease;
}
.button:hover, .button:active, .button:focus{background-color: hsl(204, 63%, 37%);}

.blurb{
  background:white;
  padding: 25px 25px;
}
.blurb h4{
  font-weight: 700;
}

.orbit-prev, .orbit-next{
  background-color: rgba(45, 136, 197, 0.5)!important;
  border: solid 5px white;
}
.orbit-prev:hover, .orbit-next:hover{
  background-color: rgba(45, 136, 197,0.7)!important
}
.orbit-prev{border-left: none;}
.orbit-next{border-right: none;}

.shadow{
  box-shadow: 0 0px 4px rgba(0,0,0,0.1);  
}

footer{
  background: #222;
  padding: 20px 0;
}

footer ul{
  width: 50%;
  margin: 0 auto !important;
}

img.desaturate{
  -webkit-filter: grayscale(95%);
  filter: grayscale(95%);
  
  transition: filter 0.5s ease;
  -webkit-transition: filter 0.5s ease,-webkit-filter 0.5s ease;
}
img.desaturate:hover{
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

/*Large and up*/
@media only screen and (min-width: 64.063em) { 
  .row{
    max-width: 1200px;
  }
  
  .wrapper{
    max-width: 95%;
    margin: 0 auto;
  }
  
  .headerFull{
    height: 100px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.0);
    background-color: rgba(0, 0, 0, 0);
  }
  
  .logoFull{
    height: 75px !important;
  }

  .hambHide{
    display: none !important;
  }
  
  .largeNavShow{
    display: inline !important;
  }
  
  .vCentFull{
    margin-top: 22px;
  }
}
/*small only*/
@media only screen and (max-width: 40em) {
  .hero{
    padding:100px 0 50px 0;
  }
  
  footer ul{
    width:100%;
  }
}