@charset "UTF-8";
/*
	Created by Shamai Greenfield.
	Normalize included. Normalize.css is a project by Nicolas Gallagher, co-created with Jonathan Neal.

*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# How to use
# Things already set by underscores.
# The Sea Salt Grid
## Setup Settings
## Page
## Content Column
## Grid
### Wrap
### Column Set Up
### Mobile Columns
### Column helper classes
# Text
# Unstyled Lists



/*--------------------------------------------------------------
# How to use
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Things already set by underscores. If your not using underscores, make sure to use @include no-underscores;
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# variables you may override. Don't override here! Do it in another file like style.scss or _structure.scss
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# The Sea Salt Grid
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Setup settings
--------------------------------------------------------------*/
body * {
  -ms-overflow-style: none; }

html * {
  -webkit-tap-highlight-color: transparent; }

body,
button,
input,
select,
textarea {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased; }

/*--------------------------------------------------------------
## page: holds everything inside body. This will allow us to have break out areas that are 500% wide but the window wont scroll. 
         //Note: This is not good for horizontal websites.
--------------------------------------------------------------*/
#page {
  overflow: hidden;
  position: relative; }

/*--------------------------------------------------------------
## sticky footer
--------------------------------------------------------------*/
body .site-content {
  min-height: calc(100vh - 25px);
  padding-bottom: 0; }

body .site-footer {
  margin-top: 0;
  min-height: 25px;
  overflow: hidden; }

.admin-bar .site-content {
  min-height: calc(100vh - 25px - 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .site-content {
    min-height: calc(100vh - 25px - 46px); } }

/*--------------------------------------------------------------
## Content Column for posts of text and images. With ability for break out areas
--------------------------------------------------------------*/
.content-column {
  max-width: 800px;
  margin: auto;
  margin-bottom: 1.5rem; }

.content-column > pre, .content-column > .code, .content-column > .break-out, .content-column > .full-area, .content-column > .break-out-full,
.wrap > pre,
.wrap > .code,
.wrap > .break-out,
.wrap > .full-area,
.wrap > .break-out-full {
  width: 500%;
  margin-left: -200%;
  max-width: 500%;
  padding: 1.5rem 0; }
  .content-column > pre > *, .content-column > .code > *, .content-column > .break-out > *, .content-column > .full-area > *, .content-column > .break-out-full > *,
  .wrap > pre > *,
  .wrap > .code > *,
  .wrap > .break-out > *,
  .wrap > .full-area > *,
  .wrap > .break-out-full > * {
    margin: auto;
    max-width: 800px;
    display: block;
    padding: 0 15px; }

.content-column > .full-area > *, .content-column > .break-out-full > *,
.wrap > .full-area > *,
.wrap > .break-out-full > * {
  max-width: 100vw; }

@media only screen and (max-width: 800px) {
  .content-column > pre > *, .content-column > .code > *, .content-column > .full-area > *, .content-column > .break-out-full > *, .content-column > .break-out > * {
    max-width: 100vw; } }

.wrap > pre > *, .wrap > .code > *, .wrap > .break-out > * {
  max-width: 1200px; }

@media only screen and (max-width: 1200px) {
  .wrap > pre > *, .wrap > .code > *, .wrap > .full-area > *, .wrap > .break-out-full > *, .wrap > .break-out > * {
    max-width: 100vw; } }

/*--------------------------------------------------------------
## The Grid
--------------------------------------------------------------*/
/*--------------------------------------------------------------
### Wrap
--------------------------------------------------------------*/
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  clear: both; }

/*--------------------------------------------------------------
### Column Set Up
--------------------------------------------------------------*/
[class*="col-"] {
  float: left; }

.col-1-2 {
  width: 50%; }

.col-1-3 {
  width: 33.3333%; }

.col-2-3 {
  width: 66.6666%; }

.col-1-4 {
  width: 25%; }

.col-3-4 {
  width: 75%; }

.col-1-5 {
  width: 20%; }

.col-2-5 {
  width: 40%; }

.col-3-5 {
  width: 60%; }

.col-4-5 {
  width: 80%; }

.col-1-6 {
  width: 16.6666%; }

.col-5-6 {
  width: 83.3333%; }

.col-full {
  width: 100%;
  float: none;
  clear: both; }

/*--------------------------------------------------------------
### Mobile Columns
--------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
  [class*="col-"]:not(.stay-on-mobile) {
    width: 100%; } }

/*--------------------------------------------------------------
### Column Helper Classes
--------------------------------------------------------------*/
.row {
  clear: both; }

.no-outer-gutters {
  margin: 0 -15px; }

body .m0 {
  margin-bottom: 0; }

.m1, [class*="col-"] {
  margin-bottom: 1.5rem; }

[class*="col-"],
.gutters,
.content-column {
  padding: 0 15px; }

.double-gutters {
  padding: 0 30px; }

.full-double-gutters {
  padding: 30px; }

.full-gutters {
  padding: 15px; }

body .hasinnercols,
body .has-inner-cols,
body .nogutters,
body .no-gutters {
  padding: 0; }

body .hasinnercols,
body .has-inner-cols {
  margin-bottom: 0; }

.right-col {
  float: right; }

.alignnone, .aligncenter {
  margin: auto;
  float: none; }

/*--------------------------------------------------------------
# Text
--------------------------------------------------------------*/
.center-text {
  text-align: center; }

.right-text {
  text-align: right; }

a {
  outline: none; }

/*--------------------------------------------------------------
# Unstyled Lists
--------------------------------------------------------------*/
ul.no-list, .menu ul {
  margin: 0;
  list-style: none;
  padding: 0; }

/*--------------------------------------------------------------
# Helper Classes
--------------------------------------------------------------*/
.hide, .hidden {
  display: none; }

.transitions, .menu li a, .wrap .break-out label h3:after, .site-footer a {
  -webkit-transition: all 0.5s;
  transition: all 0.5s; }

/*--------------------------------------------------------------
# // If not using underscores this stuff is Added.
--------------------------------------------------------------*/
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit; }

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */ }

.clear:before, main:before, .wrap:before, [class*="col-"]:before, .row:before, .wrap .break-out label:before,
.clear:after,
main:after,
.wrap:after,
[class*="col-"]:after,
.row:after,
.wrap .break-out label:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table; }

.clear:after, main:after, .wrap:after, [class*="col-"]:after, .row:after, .wrap .break-out label:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both; }

/*--------------------------------------------------------------
# // ! Copy
--------------------------------------------------------------*/
body {
  font-family: 'Dosis', sans-serif; }

h1, h2, h3 {
  font-weight: 400; }

h3 {
  font-size: 1.25rem;
  margin: 0; }

p {
  color: #8B8B8B; }

a {
  color: #565A9C; }

/*--------------------------------------------------------------
# // ! header
--------------------------------------------------------------*/
.hero-area {
  background: url("images/hero@2x.jpg");
  background-size: cover;
  background-position: right center;
  height: 500px;
  position: relative; }
  .hero-area .blurred {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    top: 0;
    display: block;
    background: url("images/hero-blur@2x.jpg");
    background-size: cover;
    background-position: right center;
    z-index: 2;
    opacity: 0; }
  .hero-area .animate.blurred {
    opacity: 1; }
  .hero-area h1 a {
    font-size: 2.75rem;
    text-decoration: none;
    color: #042651;
    position: absolute;
    top: 230px;
    right: 13%;
    display: block;
    z-index: 5; }

/*--------------------------------------------------------------
# // ! video container
--------------------------------------------------------------*/
.video-container {
  position: relative;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: -40px; }
  .video-container iframe {
    background: url("images/macbook.png") no-repeat center;
    background-size: contain;
    padding: 10.5% 12% 14% 11%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

/*--------------------------------------------------------------
# // call to action area with download TODO
--------------------------------------------------------------*/
.call-to-action {
  padding: 15px;
  padding-top: 20px;
  background: #365071;
  min-height: 500px;
  text-align: center;
  position: relative; }
  .call-to-action .button {
    margin-top: 30px; }

/*--------------------------------------------------------------
# // Menu
--------------------------------------------------------------*/
.menu ul {
  display: inline-block; }

.menu li {
  float: left;
  text-align: center;
  margin-bottom: 20px;
  padding: 5px; }
  .menu li a {
    color: #5ACFFF;
    text-decoration: none;
    display: block;
    border-radius: 3px;
    padding: 5px 15px; }
    .menu li a:hover {
      color: #48a6cc; }

/*--------------------------------------------------------------
# // MEnu and site description
--------------------------------------------------------------*/
.site-description {
  background: #30384D;
  color: white;
  height: auto;
  overflow: hidden;
  text-align: center;
  position: relative; }
  .site-description h2 {
    font-size: 1.2rem; }

.menu-toggle {
  display: none; }

/*--------------------------------------------------------------
# // media query for menu and header
--------------------------------------------------------------*/
@media screen and (min-width: 800px) {
  .call-to-action {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    .call-to-action .button {
      width: 80%; }
  .site-description {
    height: 60px; }
    .site-description h2 {
      font-size: 1.25rem; }
      .site-description h2.animate {
        -webkit-transform: translate(0, -53px);
            -ms-transform: translate(0, -53px);
                transform: translate(0, -53px); }
    .site-description.animate {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 99; }
  .menu.animate {
    -webkit-transform: translate(0, -53px);
        -ms-transform: translate(0, -53px);
            transform: translate(0, -53px); } }

@media screen and (max-width: 800px) {
  .hero-area {
    min-height: 200px;
    height: auto; }
  .call-to-action {
    min-height: 0; }
  h1 {
    margin-top: 0; }
  .hero-area h1 a {
    position: relative;
    top: 10px;
    right: auto;
    text-align: center;
    font-size: 2rem; }
  .menu li {
    float: none; }
  .menu {
    position: fixed;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 50%;
    height: 100vh;
    background: #30384D;
    z-index: 98;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
            transform: translate(-100%, 0); }
  #menu-toggle:checked ~ .menu-holder .menu {
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0); }
  .menu-toggle {
    color: #365071;
    font-size: 1.5rem;
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 99;
    -webkit-transition: all .5s;
    transition: all .5s; }
  #menu-toggle:checked + label {
    color: white;
    position: fixed; }
  .call-to-action {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; } }

/*--------------------------------------------------------------
# // ! sections
--------------------------------------------------------------*/
main {
  padding-top: 1.5rem; }

body {
  background: url("images/bg-pattern.jpg"); }
  @media (min--moz-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
    body {
      /* on retina, use image that's scaled by 2 */
      background-image: url("images/bg-pattern@2x.jpg");
      background-size: 232px 232px; } }

.teal-gradient {
  background: -webkit-linear-gradient(180deg, #96C9D3 0%, #56B2C3 100%);
  background: linear-gradient(-90deg, #96C9D3 0%, #56B2C3 100%); }

.purple-gradient {
  background: -webkit-linear-gradient(0deg, #565A9C 0%, #5C3786 100%);
  background: linear-gradient(-270deg, #565A9C 0%, #5C3786 100%); }

.red-gradient {
  background: -webkit-linear-gradient(180deg, #F5515F 0%, #C91F38 100%);
  background: linear-gradient(-90deg, #F5515F 0%, #C91F38 100%); }

.yellow-gradient {
  background: -webkit-linear-gradient(0deg, #FFBA3F 0%, #FFBB62 100%);
  background: linear-gradient(90deg, #FFBA3F 0%, #FFBB62 100%); }

.green-gradient {
  background: -webkit-linear-gradient(180deg, #569C77 0%, #37867A 100%);
  background: linear-gradient(-90deg, #569C77 0%, #37867A 100%); }

section {
  background: white;
  box-shadow: 0px 0px 28px 4px rgba(0, 0, 0, 0.25);
  height: 300px;
  overflow: hidden;
  position: relative; }
  section h2 {
    height: 300px;
    padding-top: 120px;
    margin: 0;
    text-align: center;
    color: white; }
  section p {
    margin-left: 15px; }

.gist figcaption {
  font-size: 3vw;
  position: absolute;
  bottom: 15px; }

.gist img {
  position: absolute;
  bottom: 0;
  right: 10%; }

.gist figure {
  margin-bottom: 0; }

@media screen and (max-width: 800px) {
  section {
    height: auto; }
  figure {
    position: relative;
    top: 40px; }
  .gist figcaption {
    position: relative; }
  .gist img {
    position: static; } }

/*--------------------------------------------------------------
# // dropdown areas
--------------------------------------------------------------*/
.wrap .break-out {
  background: #111c2a;
  color: white;
  overflow: hidden;
  height: auto;
  margin-bottom: 1.5rem;
  max-height: 60px;
  padding: 15px 0;
  -webkit-transition: max-height .7s linear;
  transition: max-height .7s linear; }
  .wrap .break-out label {
    display: block;
    cursor: pointer; }
    .wrap .break-out label h3:after {
      font-family: 'FontAwesome';
      content: '';
      float: right;
      line-height: 1.5;
      position: relative;
      top: 3px; }
  .wrap .break-out p {
    max-width: 600px; }

input[type="checkbox"]:checked + .break-out label h3:after {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg); }

input[type="checkbox"]:checked + .break-out {
  max-height: 900px;
  overflow: scroll;
  -webkit-transition: max-height 1.2s linear;
  transition: max-height 1.2s linear; }

.code {
  font-size: 1rem;
  font-family: monospace; }
  .code strong {
    font-size: 1.1rem; }

.box {
  height: 100px;
  line-height: 100px;
  background: #565A9C;
  text-align: center;
  color: white;
  overflow: hidden; }

.code .box {
  background: none;
  border: 1px solid #565A9C;
  padding: 5px;
  line-height: 1.5;
  color: #8B8B8B; }

.site-footer p {
  color: white; }

.site-footer {
  color: white;
  text-align: center;
  padding-bottom: 30px; }
  .site-footer a {
    color: #8B8B8B;
    font-size: 1.5rem;
    border-radius: 100%;
    border: 1px solid #8B8B8B;
    padding: 5px 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
    .site-footer a:hover {
      color: white;
      border-color: white; }

/*--------------------------------------------------------------
# // ! Buttons
--------------------------------------------------------------*/
.button {
  display: inline-block;
  text-decoration: none;
  position: relative;
  top: 0;
  margin-bottom: 1.5rem;
  /* Rectangle 30: */
  background: white;
  /* Sketch doesnt export gradient borders at this point */
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1), 0px 6px 4px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25), inset 0px -3px 0px 0px rgba(0, 0, 0, 0.1), inset 0px 1px 1px 0px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 5px 15px;
  font-size: 1.7rem;
  color: #6FAFD4;
  text-shadow: 0px 0px 2px #E9F7FF, 0px 0px 13px #3DA9E4, 0px 1px 0px #FFFFFF;
  -webkit-transition: all .7s;
  transition: all .7s; }
  .button:hover {
    box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.3);
    text-shadow: none;
    top: 2px; }
  .button:active {
    top: 5px; }