@charset "UTF-8";
/* Everhood 0.2.0
 * http://everhood.co
 * Copyright 2018 Kyle Langford */
/* Vars */
/* COLOR SETTINGS
 ----------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------- */
/* Layout
 ----------------------------------------------------------------------------------
 ---------------------------------------------------------------------------------- */
/* Font Colors */
/* Status Colors */
/* BREAKPOINTS SETTINGS
 ----------------------------------------------------------------------------------
 - comments
 ---------------------------------------------------------------------------------- */
/* VERTICAL SPACING
 ----------------------------------------------------------------------------------
 - comments
 ---------------------------------------------------------------------------------- */
/* SPACING
 ----------------------------------------------------------------------------------
 - comments
 ---------------------------------------------------------------------------------- */
/* FONT SETTINGS
 ----------------------------------------------------------------------------------
	- default body text  'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
	- subtitle h2 text   'Rubik', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
	- form input text    'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
	- default p text     'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
	- pre and code       Consolas, Lucida Console, Monaco, monospace
 ---------------------------------------------------------------------------------- */
/* DIVIDERS AND LINES
 ----------------------------------------------------------------------------------
 - comments
 ---------------------------------------------------------------------------------- */
/* Development */
/* Mixins */
/*
  BEM

	http://getbem.com/naming/

	Modifier names may consist of Latin letters, digits, dashes and 
	underscores. CSS class is formed as block’s or element’s name plus 
	two dashes: .block--mod or .block__elem--mod and .block--color-black 
	with .block--color-red. Spaces in complicated modifiers are replaced by dash.

	.form { }
	.form--theme-xmas { }
	.form--simple { }
	.form__input { }
	.form__submit { }
	.form__submit--disabled { }

*/
/* Block Element */
/* Block Modifier */
/*
  Buttonize

*/
/*
  Clearfix


  
*/
/*
  Container

	A container is an element with a max-width and equal left / right margins
  
*/
/*
  function em 
	
	1. Dont use this ?
	2 em for media Queries?

*/
/*
  Fixed Ratio

  
*/
/*
  Grid 
  
	8pt Grid

	A container is an element with a max-width and equal left / right margins

	Style guide: Mixins.Grid

	https://material.io/design/layout/spacing-methods.html#spacing
	https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

	Padding refers to the space between UI elements.
	Vertical spacing refers to the height of a standard element
	The heights of these elements should align to the 8dp grid.

*/
/*
  Grid 
 
	Simple and effective for when you need to trigger hardware acceleration for some animation, keeping everything fast, slick and flicker-free.

*/
/* 
  Icons
 
  Status: Needs Work;
  A container is an element with a max-width and equal left / right margins

 
 */
/*
  Media Queries


*/
/*
  Panel

	Container with a fixed height

*/
/*
  Vendor Prefix

  Creates vendor prefixes.

*/
/*
  Prefix Keyframes

	Creates vendor prefixes.

*/
/*
  Rem

  Convert pixels to ems
	pixel / base = ems

*/
/*

  z-index management

	.site-header {
	  z-index: layer('header');
	}

*/
/*
 Zebra Striping
 Keep?


*/
/* Document */
/* 
* Any styling that should be applied to screen widths larger
* than a mobile device: tablet, laptop, desktop, etc. 


Gutter: The space between the columns.

*/
.column {
  margin-bottom: 32px;
}

/*
Columns: The vertical divisions of the page.
*/
@media only screen and (min-width: 1100px) {
  .column {
    width: 100%;
    padding-right: 20px;
  }
  .column:last-of-type {
    padding-right: 0;
  }
  .column.full {
    width: 100%;
  }
  .column.half {
    width: calc(100% / 2);
  }
  .column.one-third {
    width: calc(100% / 3);
  }
  .column.two-thirds {
    width: calc(100% / 1.5);
  }
  .column.one-fourth {
    width: calc(100% / 4);
  }
  .column.three-fourth {
    width: calc(100% / 4);
  }
}

/* 
Offset: The space between the sides of the viewport.
*/
.container {
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 1100px) {
  .container.size-to-window {
    width: 100%;
    height: 100vh;
    max-height: 850px;
  }
}

.row {
  margin-right: 6vh;
  margin-left: 6vh;
}

@media only screen and (min-width: 800px) {
  .row {
    margin-right: 10vh;
    margin-left: 10vh;
  }
}

@media only screen and (min-width: 1100px) {
  .row {
    width: 100%;
    max-width: 1004px;
    margin-right: auto;
    margin-left: auto;
  }
}

.row.is--collapsed {
  margin-right: 0;
  margin-left: 0;
}

.row.is--full-width {
  max-width: 100%;
}

.wrap {
  width: 100%;
  max-width: 1004px;
  margin-right: auto;
  margin-left: auto;
  padding: 6em 0;
}

@media only screen and (min-width: max-width 769px) {
  .wrap {
    padding: 6em 0;
  }
}

.wrap img {
  width: 100%;
}

.wrap .logo {
  width: 50%;
  margin-bottom: 3em;
}

/* 
  Flexbox
*/
.flex {
  display: flex;
  flex-flow: column nowrap;
}

@media only screen and (min-width: 1100px) {
  .flex .column {
    flex: 1 auto;
  }
}

@media only screen and (min-width: 1100px) {
  .flex {
    display: flex;
    flex-flow: row nowrap;
  }
  .flex .column {
    flex: 0 auto;
  }
}

.flex--justify {
  justify-content: center;
}

.flex-align--top {
  align-items: flex-start;
}

.flex-align--bottom {
  align-items: flex-end;
}

.flex-align--center {
  align-items: center;
}

/* 
  Layout Helpers
*/
.relative {
  position: relative;
}

.clearfix {
  overflow: hidden;
}

.clearfix:after {
  display: table;
  clear: both;
  content: '';
}

.fill-height {
  height: 100%;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  font-size: 16px;
}

body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  color: #273269;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 24px 0;
  font-family: "Rubik", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0 0 0.8em;
}

p.collapse {
  margin: 0;
}

::-moz-selection {
  background-color: #e53b56;
  color: #ffffff;
}

::selection {
  background-color: #e53b56;
  color: #ffffff;
}

a {
  color: #5689b2;
  text-decoration: none;
  cursor: pointer;
  /* Output standard non-prefixed declaration */
  transition: color 0.15s linear;
}

a:hover {
  color: shade(#5689b2, 15%);
}

a:active, a:focus {
  outline: none;
  color: shade(#5689b2, 15%);
}

hr {
  margin: 1.6em 0;
  border-top: none;
  border-right: none;
  border-bottom: 1px solid #cacaca;
  border-left: none;
}

img,
picture {
  max-width: 100%;
  height: auto;
  margin: 0;
}

figure {
  margin: 36px 0;
}

figure img {
  width: 100%;
}

figcaption {
  margin: 8px 0;
  font-size: 16px;
}

address {
  font-style: italic;
}

blockquote {
  margin: 1.6em 0;
  padding-left: 0.8em;
  border-left: 2px solid #cacaca;
  color: #3c4da1;
}

cite {
  color: #5163be;
  font-style: italic;
}

cite:before {
  content: '\2014 \00A0';
}

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
pre.markup {
  margin-bottom: 48px;
}

/**
 * Generic elements.
 */
summary,
.fieldgroup > legend {
  font-weight: bold;
  text-transform: uppercase;
}

u,
ins {
  text-decoration: underline;
}

s,
strike,
del {
  text-decoration: line-through;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  font-size: smaller;
  line-height: normal;
  vertical-align: sub;
}

sup {
  font-size: smaller;
  line-height: normal;
  vertical-align: super;
}

abbr,
acronym {
  border-bottom: dotted 1px;
}

details {
  line-height: 1.295em;
}

details summary {
  padding: 0.8em;
}

details summary:focus {
  outline: none;
  text-decoration: underline;
}

ul,
ol {
  margin: 0 0 1.6em 0;
  padding: 0;
  list-style-type: none;
}

dl {
  margin-bottom: 0.8em;
}

dl dt {
  margin-top: 0.8em;
  font-weight: bold;
}

dl dd {
  margin: 0;
}

/* 

Baseline: The vertical rhythm used for text.

*/
/*
This .scss loop will create "margin helpers" and "padding helpers" for use in your web projects.
It will generate several classes such as:
.m-r-10 which gives margin-right 10 pixels.
.m-r-15 gives MARGIN to the RIGHT 15 pixels.
.m-t-15 gives MARGIN to the TOP 15 pixels and so on.
.p-b-5 gives PADDING to the BOTTOM of 5 pixels
.p-l-40 gives PADDING to the LEFT of 40 pixels
The first letter is "m" or "p" for MARGIN or PADDING
Second letter is "t", "b", "l", or "r" for TOP, BOTTOM, LEFT, or RIGHT
Third letter is the number of spacing in pixels. Adjust the amounts generated by editing the $spaceamounts variable below.
*/
.marg-t-4px {
  margin-top: 4pxpx !important;
}

.pad-t-4px {
  padding-top: 4pxpx !important;
}

.marg-b-4px {
  margin-bottom: 4pxpx !important;
}

.pad-b-4px {
  padding-bottom: 4pxpx !important;
}

.marg-l-4px {
  margin-left: 4pxpx !important;
}

.pad-l-4px {
  padding-left: 4pxpx !important;
}

.marg-r-4px {
  margin-right: 4pxpx !important;
}

.pad-r-4px {
  padding-right: 4pxpx !important;
}

.marg-t-8px {
  margin-top: 8pxpx !important;
}

.pad-t-8px {
  padding-top: 8pxpx !important;
}

.marg-b-8px {
  margin-bottom: 8pxpx !important;
}

.pad-b-8px {
  padding-bottom: 8pxpx !important;
}

.marg-l-8px {
  margin-left: 8pxpx !important;
}

.pad-l-8px {
  padding-left: 8pxpx !important;
}

.marg-r-8px {
  margin-right: 8pxpx !important;
}

.pad-r-8px {
  padding-right: 8pxpx !important;
}

.marg-t-12px {
  margin-top: 12pxpx !important;
}

.pad-t-12px {
  padding-top: 12pxpx !important;
}

.marg-b-12px {
  margin-bottom: 12pxpx !important;
}

.pad-b-12px {
  padding-bottom: 12pxpx !important;
}

.marg-l-12px {
  margin-left: 12pxpx !important;
}

.pad-l-12px {
  padding-left: 12pxpx !important;
}

.marg-r-12px {
  margin-right: 12pxpx !important;
}

.pad-r-12px {
  padding-right: 12pxpx !important;
}

.marg-t-16px {
  margin-top: 16pxpx !important;
}

.pad-t-16px {
  padding-top: 16pxpx !important;
}

.marg-b-16px {
  margin-bottom: 16pxpx !important;
}

.pad-b-16px {
  padding-bottom: 16pxpx !important;
}

.marg-l-16px {
  margin-left: 16pxpx !important;
}

.pad-l-16px {
  padding-left: 16pxpx !important;
}

.marg-r-16px {
  margin-right: 16pxpx !important;
}

.pad-r-16px {
  padding-right: 16pxpx !important;
}

.marg-t-24px {
  margin-top: 24pxpx !important;
}

.pad-t-24px {
  padding-top: 24pxpx !important;
}

.marg-b-24px {
  margin-bottom: 24pxpx !important;
}

.pad-b-24px {
  padding-bottom: 24pxpx !important;
}

.marg-l-24px {
  margin-left: 24pxpx !important;
}

.pad-l-24px {
  padding-left: 24pxpx !important;
}

.marg-r-24px {
  margin-right: 24pxpx !important;
}

.pad-r-24px {
  padding-right: 24pxpx !important;
}

.marg-t-32px {
  margin-top: 32pxpx !important;
}

.pad-t-32px {
  padding-top: 32pxpx !important;
}

.marg-b-32px {
  margin-bottom: 32pxpx !important;
}

.pad-b-32px {
  padding-bottom: 32pxpx !important;
}

.marg-l-32px {
  margin-left: 32pxpx !important;
}

.pad-l-32px {
  padding-left: 32pxpx !important;
}

.marg-r-32px {
  margin-right: 32pxpx !important;
}

.pad-r-32px {
  padding-right: 32pxpx !important;
}

.marg-t-48px {
  margin-top: 48pxpx !important;
}

.pad-t-48px {
  padding-top: 48pxpx !important;
}

.marg-b-48px {
  margin-bottom: 48pxpx !important;
}

.pad-b-48px {
  padding-bottom: 48pxpx !important;
}

.marg-l-48px {
  margin-left: 48pxpx !important;
}

.pad-l-48px {
  padding-left: 48pxpx !important;
}

.marg-r-48px {
  margin-right: 48pxpx !important;
}

.pad-r-48px {
  padding-right: 48pxpx !important;
}

.marg-t-56px {
  margin-top: 56pxpx !important;
}

.pad-t-56px {
  padding-top: 56pxpx !important;
}

.marg-b-56px {
  margin-bottom: 56pxpx !important;
}

.pad-b-56px {
  padding-bottom: 56pxpx !important;
}

.marg-l-56px {
  margin-left: 56pxpx !important;
}

.pad-l-56px {
  padding-left: 56pxpx !important;
}

.marg-r-56px {
  margin-right: 56pxpx !important;
}

.pad-r-56px {
  padding-right: 56pxpx !important;
}

.marg-t-64px {
  margin-top: 64pxpx !important;
}

.pad-t-64px {
  padding-top: 64pxpx !important;
}

.marg-b-64px {
  margin-bottom: 64pxpx !important;
}

.pad-b-64px {
  padding-bottom: 64pxpx !important;
}

.marg-l-64px {
  margin-left: 64pxpx !important;
}

.pad-l-64px {
  padding-left: 64pxpx !important;
}

.marg-r-64px {
  margin-right: 64pxpx !important;
}

.pad-r-64px {
  padding-right: 64pxpx !important;
}

.marg-t-72px {
  margin-top: 72pxpx !important;
}

.pad-t-72px {
  padding-top: 72pxpx !important;
}

.marg-b-72px {
  margin-bottom: 72pxpx !important;
}

.pad-b-72px {
  padding-bottom: 72pxpx !important;
}

.marg-l-72px {
  margin-left: 72pxpx !important;
}

.pad-l-72px {
  padding-left: 72pxpx !important;
}

.marg-r-72px {
  margin-right: 72pxpx !important;
}

.pad-r-72px {
  padding-right: 72pxpx !important;
}

.marg-t-80px {
  margin-top: 80pxpx !important;
}

.pad-t-80px {
  padding-top: 80pxpx !important;
}

.marg-b-80px {
  margin-bottom: 80pxpx !important;
}

.pad-b-80px {
  padding-bottom: 80pxpx !important;
}

.marg-l-80px {
  margin-left: 80pxpx !important;
}

.pad-l-80px {
  padding-left: 80pxpx !important;
}

.marg-r-80px {
  margin-right: 80pxpx !important;
}

.pad-r-80px {
  padding-right: 80pxpx !important;
}

.marg-t-88px {
  margin-top: 88pxpx !important;
}

.pad-t-88px {
  padding-top: 88pxpx !important;
}

.marg-b-88px {
  margin-bottom: 88pxpx !important;
}

.pad-b-88px {
  padding-bottom: 88pxpx !important;
}

.marg-l-88px {
  margin-left: 88pxpx !important;
}

.pad-l-88px {
  padding-left: 88pxpx !important;
}

.marg-r-88px {
  margin-right: 88pxpx !important;
}

.pad-r-88px {
  padding-right: 88pxpx !important;
}

.marg-t-96px {
  margin-top: 96pxpx !important;
}

.pad-t-96px {
  padding-top: 96pxpx !important;
}

.marg-b-96px {
  margin-bottom: 96pxpx !important;
}

.pad-b-96px {
  padding-bottom: 96pxpx !important;
}

.marg-l-96px {
  margin-left: 96pxpx !important;
}

.pad-l-96px {
  padding-left: 96pxpx !important;
}

.marg-r-96px {
  margin-right: 96pxpx !important;
}

.pad-r-96px {
  padding-right: 96pxpx !important;
}

.pad-default {
  padding: 56px 0;
}

.pad-double {
  padding: 72px 0;
}

.hide {
  display: none !important;
}

.hide--visually {
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hide--for-mobile {
  display: none;
}

@media only screen and (min-width: 800px) {
  .hide--for-mobile {
    display: unset;
  }
}

/* Components */
/* Article Styling

Display Modes

content-full
content-teaser

 */
article {
  position: relative;
  width: 100%;
  margin: 0px auto;
}

@media only screen and (min-width: 800px) {
  article {
    padding: 0;
  }
}

article h1 {
  color: #5e6bb8;
}

article h2 {
  margin-bottom: 0.35em;
  font-size: 3.5em;
  line-height: 1;
}

@media only screen and (min-width: 800px) {
  article h2 {
    font-size: 2.75em;
  }
}

article h2 span {
  color: #ffcc2f;
}

article h3 {
  margin-bottom: 1em;
}

article p {
  margin-bottom: 3em;
  font-family: "Rubik", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
}

@media only screen and (min-width: 800px) {
  article p {
    font-size: 1.35em;
  }
}

.content {
  width: 100%;
  font-size: 16px;
}

@media only screen and (min-width: 1100px) {
  .content {
    max-width: 756px;
  }
}

footer.credits .attribution,
.credits .attribution {
  font-size: 16px;
}

footer.credits .last-edit,
.credits .last-edit {
  font-size: 16px;
}

/* 
 * Button
 * button map
 * themable 
 */
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  text-shadow: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

button:disabled, button:disabled:active, button.is-disabled, button.is-disabled:active {
  cursor: not-allowed;
  opacity: 0.5;
}

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  padding: 9px 24px 10px 24px;
  border: 1px solid #cacaca;
  border-radius: 4px;
  background: linear-gradient(to bottom, #ffffff, #f6f6f6);
  background-color: #ffffff;
  color: #323e43;
  font-size: 1rem;
  font-weight: 600;
  line-height: normal;
  text-shadow: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.button:disabled, .button:disabled:active, .button.is-disabled, .button.is-disabled:active {
  cursor: not-allowed;
  opacity: 0.5;
}

.button:hover, .button:focus {
  border-color: #cacaca;
  background: linear-gradient(to bottom, #f6f6f6, #ffffff);
  color: #323e43;
}

.button:active {
  border-color: #cacaca;
  background: #f2f0f0;
}

.button:disabled, .button:disabled:active, .button.is-disabled, .button.is-disabled:active {
  border-color: #d4d4d4;
  background: #ededed;
  box-shadow: none;
  color: #5c5c5c;
  cursor: not-allowed;
  opacity: 0.5;
}

.button.button--primary, .button.form-submit {
  border-color: #5689b2;
  background: #5689b2;
  color: #ffffff;
}

.button.button--primary:hover, .button.button--primary:focus, .button.form-submit:hover, .button.form-submit:focus {
  border-color: #4b7b76;
  background: #4b7b76;
  color: #ffffff;
}

.button.button--primary:active, .button.form-submit:active {
  border-color: #385c58;
  background: #385c58;
}

.button.button--small {
  padding: 4px 24px;
  font-size: 1rem;
}

.button-group {
  margin-bottom: 48px;
}

[class^='card-'],
[class*=' card-'] {
  margin-bottom: 0;
}

[class^='card-'].is-first,
[class*=' card-'].is-first {
  padding-left: 6vh;
}

@media only screen and (min-width: 800px) {
  [class^='card-'].is-first,
  [class*=' card-'].is-first {
    padding-left: 10vh;
  }
}

[class^='card-'].is-last,
[class*=' card-'].is-last {
  padding-right: 6vh;
  text-align: right;
}

@media only screen and (min-width: 800px) {
  [class^='card-'].is-last,
  [class*=' card-'].is-last {
    padding-right: 10vh;
  }
}

[class^='card-'] .label,
[class*=' card-'] .label {
  color: white;
}

[class^='card-'] p,
[class*=' card-'] p {
  color: white;
  font-size: 3em;
  font-weight: bold;
  line-height: 1;
}

.card--brm {
  background: #184082;
}

.card--paw {
  background: #f37021;
}

.card--cpl {
  background: #c21f2f;
}

.card--drizly {
  background: #e12c2c;
}

.card--elev8d {
  background: #f1bf9c;
}

.card--hle {
  background: #028bcc;
}

.card--wind {
  background: #008556;
}

.card--calculator {
  background: #461E7D;
}

.card--pennstater {
  background: #006FBA;
}

/* Underlined Link */
.link {
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-weight: 400;
  text-decoration: underline;
  cursor: pointer;
}

.link .danger {
  color: #c72100;
}

.link:hover, .link:focus, .link:active {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #ff2a00;
  text-decoration: underline;
  text-shadow: none;
}

.line-behind-text {
  width: 20%;
  min-width: 200px;
  margin: 8em auto 3em;
  text-align: center;
}

.line-behind-text h2 {
  display: inline-block;
  position: relative;
  top: 14px;
  margin-bottom: 0;
  padding: 0 10px;
  background: #e33c42;
  color: #ffffff;
  font-size: 1rem;
  text-transform: uppercase;
}

.list {
  margin: 0;
  padding: 0;
}

.list .list__item {
  position: relative;
  margin: 0;
  padding: 16px;
  padding-left: 0;
  border-bottom: 1px solid #cacaca;
  list-style-image: none;
  list-style-type: none;
}

.list .list__item:first-child a {
  padding-top: 0;
}

.list .list__item:last-child {
  border-bottom: none;
}

.list .list__item a {
  display: block;
  margin-left: -11px;
  padding-left: 8px;
  border-left: 3px solid transparent;
  background: none;
}

.list .list__item a:focus {
  border-left: 3px solid;
}

.list .list__item a:hover {
  text-decoration: none;
}

.list .list__item a .label {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}

.list-title {
  margin-top: 5em;
  color: #e53b56;
  font-size: 80%;
  font-weight: bold;
  text-transform: uppercase;
}

.icons-list {
  position: absolute;
  left: 0;
  padding-top: 4px;
  line-height: 1;
}

@media only screen and (min-width: 800px) {
  .icons-list {
    left: -24px;
  }
}

.gold-star {
  color: #ffd700;
}

.blue-drupal {
  color: #0678be;
}

.specimen {
  margin-bottom: 48px;
  text-align: center;
}

@media only screen and (min-width: 1100px) {
  .stretch {
    margin-right: -10vw;
    margin-left: -10vw;
  }
}

.full-width {
  width: 100%;
}

.split {
  display: flex;
}

.split > div {
  padding: 0 16px;
}

picture {
  display: block;
}

.media__caption,
.caption {
  width: 100%;
  max-width: 669px;
  margin: 8px auto;
  color: #718078;
  font-size: 1em;
  text-align: left;
}

/* Carousel Styling */
.stack {
  padding: 16px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
}

/* Image Styling */
.paper {
  padding: 8px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* Video Styling */
.video-player {
  margin-bottom: 48px;
}

.fake-browser-ui {
  display: inline-block;
  position: relative;
  padding: 20px 0 0;
  border-radius: 3px;
  background: #ddd;
  line-height: 0;
}

.fake-browser-ui .scroll-box {
  height: 500px;
  overflow: scroll;
}

.fake-browser-ui .frame {
  display: block;
  position: absolute;
  top: 5px;
  left: 1px;
  height: 15px;
}

.fake-browser-ui span {
  width: 8px;
  height: 8px;
  margin: 0 0 0 4px;
  float: left;
  border: 1px solid #dadada;
  border-radius: 8px;
  background-color: #eee;
}

/* Animation */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animate {
  backface-visibility: hidden;
  perspective: 1000;
}

.fade-in {
  position: relative;
  top: 16px;
  opacity: 0;
  transition: opacity 235ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.animated {
  top: 0 !important;
  opacity: 1 !important;
}

/*
  Animate.css - http://daneden.me/animate
  Licensed under the MIT license - http://opensource.org/licenses/MIT
  Copyright (c) 2015 Daniel Eden
*/

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
  40%,
  43% {
    transform: translate3d(0, -30px, 0);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  70% {
    transform: translate3d(0, -15px, 0);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  transform-origin: center bottom;
  animation-name: bounce;
}

.hint {
  display: block;
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100vw;
  font-size: 24px;
  text-align: center;
}

/* Icons */
@font-face {
  src: url("../fonts/icons/icons.eot");
  src: url("../fonts/icons/icons.eot?#iefix") format("eot"), url("../fonts/icons/icons.woff2") format("woff2"), url("../fonts/icons/icons.woff") format("woff"), url("../fonts/icons/icons.ttf") format("truetype"), url("../fonts/icons/icons.svg#icons") format("svg");
  font-family: "icons";
}

.icon-activity:before, .icon-airplay:before, .icon-alert-circle:before, .icon-alert-octagon:before, .icon-alert-triangle:before, .icon-align-center:before, .icon-align-justify:before, .icon-align-left:before, .icon-align-right:before, .icon-anchor:before, .icon-aperture:before, .icon-archive:before, .icon-arrow-down-circle:before, .icon-arrow-down-left:before, .icon-arrow-down-right:before, .icon-arrow-down:before, .icon-arrow-left-circle:before, .icon-arrow-left:before, .icon-arrow-right-circle:before, .icon-arrow-right:before, .icon-arrow-up-circle:before, .icon-arrow-up-left:before, .icon-arrow-up-right:before, .icon-arrow-up:before, .icon-at-sign:before, .icon-award:before, .icon-bar-chart-2:before, .icon-bar-chart:before, .icon-battery-charging:before, .icon-battery:before, .icon-bell-off:before, .icon-bell:before, .icon-bluetooth:before, .icon-bold:before, .icon-book-open:before, .icon-book:before, .icon-bookmark:before, .icon-box:before, .icon-briefcase:before, .icon-calendar:before, .icon-camera-off:before, .icon-camera:before, .icon-cast:before, .icon-check-circle:before, .icon-check-square:before, .icon-check:before, .icon-chevron-down:before, .icon-chevron-left:before, .icon-chevron-right:before, .icon-chevron-up:before, .icon-chevrons-down:before, .icon-chevrons-left:before, .icon-chevrons-right:before, .icon-chevrons-up:before, .icon-chrome:before, .icon-circle:before, .icon-clipboard:before, .icon-clock:before, .icon-cloud-drizzle:before, .icon-cloud-lightning:before, .icon-cloud-off:before, .icon-cloud-rain:before, .icon-cloud-snow:before, .icon-cloud:before, .icon-code:before, .icon-codepen:before, .icon-coffee:before, .icon-command:before, .icon-compass:before, .icon-copy:before, .icon-corner-down-left:before, .icon-corner-down-right:before, .icon-corner-left-down:before, .icon-corner-left-up:before, .icon-corner-right-down:before, .icon-corner-right-up:before, .icon-corner-up-left:before, .icon-corner-up-right:before, .icon-cpu:before, .icon-credit-card:before, .icon-crop:before, .icon-crosshair:before, .icon-database:before, .icon-delete:before, .icon-disc:before, .icon-dollar-sign:before, .icon-download-cloud:before, .icon-download:before, .icon-droplet:before, .icon-edit-2:before, .icon-edit-3:before, .icon-edit:before, .icon-external-link:before, .icon-eye-off:before, .icon-eye:before, .icon-facebook:before, .icon-fast-forward:before, .icon-feather:before, .icon-figma:before, .icon-file-minus:before, .icon-file-plus:before, .icon-file-text:before, .icon-file:before, .icon-film:before, .icon-filter:before, .icon-flag:before, .icon-folder-minus:before, .icon-folder-plus:before, .icon-folder:before, .icon-frown:before, .icon-gift:before, .icon-git-branch:before, .icon-git-commit:before, .icon-git-merge:before, .icon-git-pull-request:before, .icon-github:before, .icon-gitlab:before, .icon-globe:before, .icon-grid:before, .icon-hard-drive:before, .icon-hash:before, .icon-headphones:before, .icon-heart:before, .icon-help-circle:before, .icon-home:before, .icon-image:before, .icon-inbox:before, .icon-info:before, .icon-instagram:before, .icon-italic:before, .icon-key:before, .icon-layers:before, .icon-layout:before, .icon-life-buoy:before, .icon-link-2:before, .icon-link:before, .icon-linkedin:before, .icon-list:before, .icon-loader:before, .icon-lock:before, .icon-log-in:before, .icon-log-out:before, .icon-mail:before, .icon-map-pin:before, .icon-map:before, .icon-maximize-2:before, .icon-maximize:before, .icon-meh:before, .icon-menu:before, .icon-message-circle:before, .icon-message-square:before, .icon-mic-off:before, .icon-mic:before, .icon-minimize-2:before, .icon-minimize:before, .icon-minus-circle:before, .icon-minus-square:before, .icon-minus:before, .icon-monitor:before, .icon-moon:before, .icon-more-horizontal:before, .icon-more-vertical:before, .icon-mouse-pointer:before, .icon-move:before, .icon-music:before, .icon-navigation-2:before, .icon-navigation:before, .icon-octagon:before, .icon-package:before, .icon-paperclip:before, .icon-pause-circle:before, .icon-pause:before, .icon-pen-tool:before, .icon-percent:before, .icon-phone-call:before, .icon-phone-forwarded:before, .icon-phone-incoming:before, .icon-phone-missed:before, .icon-phone-off:before, .icon-phone-outgoing:before, .icon-phone:before, .icon-pie-chart:before, .icon-play-circle:before, .icon-play:before, .icon-plus-circle:before, .icon-plus-square:before, .icon-plus:before, .icon-pocket:before, .icon-power:before, .icon-printer:before, .icon-radio:before, .icon-refresh-ccw:before, .icon-refresh-cw:before, .icon-repeat:before, .icon-rewind:before, .icon-rotate-ccw:before, .icon-rotate-cw:before, .icon-rss:before, .icon-save:before, .icon-scissors:before, .icon-search:before, .icon-send:before, .icon-server:before, .icon-settings:before, .icon-share-2:before, .icon-share:before, .icon-shield-off:before, .icon-shield:before, .icon-shopping-bag:before, .icon-shopping-cart:before, .icon-shuffle:before, .icon-sidebar:before, .icon-skip-back:before, .icon-skip-forward:before, .icon-slack:before, .icon-slash:before, .icon-sliders:before, .icon-smartphone:before, .icon-smile:before, .icon-speaker:before, .icon-square:before, .icon-star:before, .icon-stop-circle:before, .icon-sun:before, .icon-sunrise:before, .icon-sunset:before, .icon-tablet:before, .icon-tag:before, .icon-target:before, .icon-terminal:before, .icon-thermometer:before, .icon-thumbs-down:before, .icon-thumbs-up:before, .icon-toggle-left:before, .icon-toggle-right:before, .icon-trash-2:before, .icon-trash:before, .icon-trello:before, .icon-trending-down:before, .icon-trending-up:before, .icon-triangle:before, .icon-truck:before, .icon-tv:before, .icon-twitter:before, .icon-type:before, .icon-umbrella:before, .icon-underline:before, .icon-unlock:before, .icon-upload-cloud:before, .icon-upload:before, .icon-user-check:before, .icon-user-minus:before, .icon-user-plus:before, .icon-user-x:before, .icon-user:before, .icon-users:before, .icon-video-off:before, .icon-video:before, .icon-voicemail:before, .icon-volume-1:before, .icon-volume-2:before, .icon-volume-x:before, .icon-volume:before, .icon-watch:before, .icon-wifi-off:before, .icon-wifi:before, .icon-wind:before, .icon-x-circle:before, .icon-x-octagon:before, .icon-x-square:before, .icon-x:before, .icon-youtube:before, .icon-zap-off:before, .icon-zap:before, .icon-zoom-in:before, .icon-zoom-out:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "icons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

.icon-activity:before {
  content: "";
}

.icon-airplay:before {
  content: "";
}

.icon-alert-circle:before {
  content: "";
}

.icon-alert-octagon:before {
  content: "";
}

.icon-alert-triangle:before {
  content: "";
}

.icon-align-center:before {
  content: "";
}

.icon-align-justify:before {
  content: "";
}

.icon-align-left:before {
  content: "";
}

.icon-align-right:before {
  content: "";
}

.icon-anchor:before {
  content: "";
}

.icon-aperture:before {
  content: "";
}

.icon-archive:before {
  content: "";
}

.icon-arrow-down-circle:before {
  content: "";
}

.icon-arrow-down-left:before {
  content: "";
}

.icon-arrow-down-right:before {
  content: "";
}

.icon-arrow-down:before {
  content: "";
}

.icon-arrow-left-circle:before {
  content: "";
}

.icon-arrow-left:before {
  content: "";
}

.icon-arrow-right-circle:before {
  content: "";
}

.icon-arrow-right:before {
  content: "";
}

.icon-arrow-up-circle:before {
  content: "";
}

.icon-arrow-up-left:before {
  content: "";
}

.icon-arrow-up-right:before {
  content: "";
}

.icon-arrow-up:before {
  content: "";
}

.icon-at-sign:before {
  content: "";
}

.icon-award:before {
  content: "";
}

.icon-bar-chart-2:before {
  content: "";
}

.icon-bar-chart:before {
  content: "";
}

.icon-battery-charging:before {
  content: "";
}

.icon-battery:before {
  content: "";
}

.icon-bell-off:before {
  content: "";
}

.icon-bell:before {
  content: "";
}

.icon-bluetooth:before {
  content: "";
}

.icon-bold:before {
  content: "";
}

.icon-book-open:before {
  content: "";
}

.icon-book:before {
  content: "";
}

.icon-bookmark:before {
  content: "";
}

.icon-box:before {
  content: "";
}

.icon-briefcase:before {
  content: "";
}

.icon-calendar:before {
  content: "";
}

.icon-camera-off:before {
  content: "";
}

.icon-camera:before {
  content: "";
}

.icon-cast:before {
  content: "";
}

.icon-check-circle:before {
  content: "";
}

.icon-check-square:before {
  content: "";
}

.icon-check:before {
  content: "";
}

.icon-chevron-down:before {
  content: "";
}

.icon-chevron-left:before {
  content: "";
}

.icon-chevron-right:before {
  content: "";
}

.icon-chevron-up:before {
  content: "";
}

.icon-chevrons-down:before {
  content: "";
}

.icon-chevrons-left:before {
  content: "";
}

.icon-chevrons-right:before {
  content: "";
}

.icon-chevrons-up:before {
  content: "";
}

.icon-chrome:before {
  content: "";
}

.icon-circle:before {
  content: "";
}

.icon-clipboard:before {
  content: "";
}

.icon-clock:before {
  content: "";
}

.icon-cloud-drizzle:before {
  content: "";
}

.icon-cloud-lightning:before {
  content: "";
}

.icon-cloud-off:before {
  content: "";
}

.icon-cloud-rain:before {
  content: "";
}

.icon-cloud-snow:before {
  content: "";
}

.icon-cloud:before {
  content: "";
}

.icon-code:before {
  content: "";
}

.icon-codepen:before {
  content: "";
}

.icon-coffee:before {
  content: "";
}

.icon-command:before {
  content: "";
}

.icon-compass:before {
  content: "";
}

.icon-copy:before {
  content: "";
}

.icon-corner-down-left:before {
  content: "";
}

.icon-corner-down-right:before {
  content: "";
}

.icon-corner-left-down:before {
  content: "";
}

.icon-corner-left-up:before {
  content: "";
}

.icon-corner-right-down:before {
  content: "";
}

.icon-corner-right-up:before {
  content: "";
}

.icon-corner-up-left:before {
  content: "";
}

.icon-corner-up-right:before {
  content: "";
}

.icon-cpu:before {
  content: "";
}

.icon-credit-card:before {
  content: "";
}

.icon-crop:before {
  content: "";
}

.icon-crosshair:before {
  content: "";
}

.icon-database:before {
  content: "";
}

.icon-delete:before {
  content: "";
}

.icon-disc:before {
  content: "";
}

.icon-dollar-sign:before {
  content: "";
}

.icon-download-cloud:before {
  content: "";
}

.icon-download:before {
  content: "";
}

.icon-droplet:before {
  content: "";
}

.icon-edit-2:before {
  content: "";
}

.icon-edit-3:before {
  content: "";
}

.icon-edit:before {
  content: "";
}

.icon-external-link:before {
  content: "";
}

.icon-eye-off:before {
  content: "";
}

.icon-eye:before {
  content: "";
}

.icon-facebook:before {
  content: "";
}

.icon-fast-forward:before {
  content: "";
}

.icon-feather:before {
  content: "";
}

.icon-figma:before {
  content: "";
}

.icon-file-minus:before {
  content: "";
}

.icon-file-plus:before {
  content: "";
}

.icon-file-text:before {
  content: "";
}

.icon-file:before {
  content: "";
}

.icon-film:before {
  content: "";
}

.icon-filter:before {
  content: "";
}

.icon-flag:before {
  content: "";
}

.icon-folder-minus:before {
  content: "";
}

.icon-folder-plus:before {
  content: "";
}

.icon-folder:before {
  content: "";
}

.icon-frown:before {
  content: "";
}

.icon-gift:before {
  content: "";
}

.icon-git-branch:before {
  content: "";
}

.icon-git-commit:before {
  content: "";
}

.icon-git-merge:before {
  content: "";
}

.icon-git-pull-request:before {
  content: "";
}

.icon-github:before {
  content: "";
}

.icon-gitlab:before {
  content: "";
}

.icon-globe:before {
  content: "";
}

.icon-grid:before {
  content: "";
}

.icon-hard-drive:before {
  content: "";
}

.icon-hash:before {
  content: "";
}

.icon-headphones:before {
  content: "";
}

.icon-heart:before {
  content: "";
}

.icon-help-circle:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-image:before {
  content: "";
}

.icon-inbox:before {
  content: "";
}

.icon-info:before {
  content: "";
}

.icon-instagram:before {
  content: "";
}

.icon-italic:before {
  content: "";
}

.icon-key:before {
  content: "";
}

.icon-layers:before {
  content: "";
}

.icon-layout:before {
  content: "";
}

.icon-life-buoy:before {
  content: "";
}

.icon-link-2:before {
  content: "";
}

.icon-link:before {
  content: "";
}

.icon-linkedin:before {
  content: "";
}

.icon-list:before {
  content: "";
}

.icon-loader:before {
  content: "";
}

.icon-lock:before {
  content: "";
}

.icon-log-in:before {
  content: "";
}

.icon-log-out:before {
  content: "";
}

.icon-mail:before {
  content: "";
}

.icon-map-pin:before {
  content: "";
}

.icon-map:before {
  content: "";
}

.icon-maximize-2:before {
  content: "";
}

.icon-maximize:before {
  content: "";
}

.icon-meh:before {
  content: "";
}

.icon-menu:before {
  content: "";
}

.icon-message-circle:before {
  content: "";
}

.icon-message-square:before {
  content: "";
}

.icon-mic-off:before {
  content: "";
}

.icon-mic:before {
  content: "";
}

.icon-minimize-2:before {
  content: "";
}

.icon-minimize:before {
  content: "";
}

.icon-minus-circle:before {
  content: "";
}

.icon-minus-square:before {
  content: "";
}

.icon-minus:before {
  content: "";
}

.icon-monitor:before {
  content: "";
}

.icon-moon:before {
  content: "";
}

.icon-more-horizontal:before {
  content: "";
}

.icon-more-vertical:before {
  content: "";
}

.icon-mouse-pointer:before {
  content: "";
}

.icon-move:before {
  content: "";
}

.icon-music:before {
  content: "";
}

.icon-navigation-2:before {
  content: "";
}

.icon-navigation:before {
  content: "";
}

.icon-octagon:before {
  content: "";
}

.icon-package:before {
  content: "";
}

.icon-paperclip:before {
  content: "";
}

.icon-pause-circle:before {
  content: "";
}

.icon-pause:before {
  content: "";
}

.icon-pen-tool:before {
  content: "";
}

.icon-percent:before {
  content: "";
}

.icon-phone-call:before {
  content: "";
}

.icon-phone-forwarded:before {
  content: "";
}

.icon-phone-incoming:before {
  content: "";
}

.icon-phone-missed:before {
  content: "";
}

.icon-phone-off:before {
  content: "";
}

.icon-phone-outgoing:before {
  content: "";
}

.icon-phone:before {
  content: "";
}

.icon-pie-chart:before {
  content: "";
}

.icon-play-circle:before {
  content: "";
}

.icon-play:before {
  content: "";
}

.icon-plus-circle:before {
  content: "";
}

.icon-plus-square:before {
  content: "";
}

.icon-plus:before {
  content: "";
}

.icon-pocket:before {
  content: "";
}

.icon-power:before {
  content: "";
}

.icon-printer:before {
  content: "";
}

.icon-radio:before {
  content: "";
}

.icon-refresh-ccw:before {
  content: "";
}

.icon-refresh-cw:before {
  content: "";
}

.icon-repeat:before {
  content: "";
}

.icon-rewind:before {
  content: "";
}

.icon-rotate-ccw:before {
  content: "";
}

.icon-rotate-cw:before {
  content: "";
}

.icon-rss:before {
  content: "";
}

.icon-save:before {
  content: "";
}

.icon-scissors:before {
  content: "";
}

.icon-search:before {
  content: "";
}

.icon-send:before {
  content: "";
}

.icon-server:before {
  content: "";
}

.icon-settings:before {
  content: "";
}

.icon-share-2:before {
  content: "";
}

.icon-share:before {
  content: "";
}

.icon-shield-off:before {
  content: "";
}

.icon-shield:before {
  content: "";
}

.icon-shopping-bag:before {
  content: "";
}

.icon-shopping-cart:before {
  content: "";
}

.icon-shuffle:before {
  content: "";
}

.icon-sidebar:before {
  content: "";
}

.icon-skip-back:before {
  content: "";
}

.icon-skip-forward:before {
  content: "";
}

.icon-slack:before {
  content: "";
}

.icon-slash:before {
  content: "";
}

.icon-sliders:before {
  content: "";
}

.icon-smartphone:before {
  content: "";
}

.icon-smile:before {
  content: "";
}

.icon-speaker:before {
  content: "";
}

.icon-square:before {
  content: "";
}

.icon-star:before {
  content: "";
}

.icon-stop-circle:before {
  content: "";
}

.icon-sun:before {
  content: "";
}

.icon-sunrise:before {
  content: "";
}

.icon-sunset:before {
  content: "";
}

.icon-tablet:before {
  content: "";
}

.icon-tag:before {
  content: "";
}

.icon-target:before {
  content: "";
}

.icon-terminal:before {
  content: "";
}

.icon-thermometer:before {
  content: "";
}

.icon-thumbs-down:before {
  content: "";
}

.icon-thumbs-up:before {
  content: "";
}

.icon-toggle-left:before {
  content: "";
}

.icon-toggle-right:before {
  content: "";
}

.icon-trash-2:before {
  content: "";
}

.icon-trash:before {
  content: "";
}

.icon-trello:before {
  content: "";
}

.icon-trending-down:before {
  content: "";
}

.icon-trending-up:before {
  content: "";
}

.icon-triangle:before {
  content: "";
}

.icon-truck:before {
  content: "";
}

.icon-tv:before {
  content: "";
}

.icon-twitter:before {
  content: "";
}

.icon-type:before {
  content: "";
}

.icon-umbrella:before {
  content: "";
}

.icon-underline:before {
  content: "";
}

.icon-unlock:before {
  content: "";
}

.icon-upload-cloud:before {
  content: "";
}

.icon-upload:before {
  content: "";
}

.icon-user-check:before {
  content: "";
}

.icon-user-minus:before {
  content: "";
}

.icon-user-plus:before {
  content: "";
}

.icon-user-x:before {
  content: "";
}

.icon-user:before {
  content: "";
}

.icon-users:before {
  content: "";
}

.icon-video-off:before {
  content: "";
}

.icon-video:before {
  content: "";
}

.icon-voicemail:before {
  content: "";
}

.icon-volume-1:before {
  content: "";
}

.icon-volume-2:before {
  content: "";
}

.icon-volume-x:before {
  content: "";
}

.icon-volume:before {
  content: "";
}

.icon-watch:before {
  content: "";
}

.icon-wifi-off:before {
  content: "";
}

.icon-wifi:before {
  content: "";
}

.icon-wind:before {
  content: "";
}

.icon-x-circle:before {
  content: "";
}

.icon-x-octagon:before {
  content: "";
}

.icon-x-square:before {
  content: "";
}

.icon-x:before {
  content: "";
}

.icon-youtube:before {
  content: "";
}

.icon-zap-off:before {
  content: "";
}

.icon-zap:before {
  content: "";
}

.icon-zoom-in:before {
  content: "";
}

.icon-zoom-out:before {
  content: "";
}

/* Slick Carousel */
/* Slider */
.slick-slider {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  display: block;
  position: relative;
  touch-action: pan-y;
  user-select: none;
}

.slick-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

.slick-track:before, .slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  height: 100%;
  min-height: 1px;
  float: left;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-family: "slick";
  font-style: normal;
  font-weight: normal;
}

/* Arrows */
.slick-prev,
.slick-next {
  display: block;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  font-size: 0px;
  line-height: 0px;
  cursor: pointer;
}

.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  width: 30px;
  height: 30px;
  color: #e53b56;
  font-family: "slick";
  font-size: 32px;
  line-height: 1;
  line-height: 30px;
  text-align: center;
  opacity: 0.75;
}

.slick-prev {
  left: -35px;
}

[dir="rtl"] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

[dir="rtl"] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir="rtl"] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "→";
}

[dir="rtl"] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 80px;
}

.slick-dots {
  display: block;
  position: absolute;
  bottom: -50px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  display: inline-block;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  font-size: 0px;
  line-height: 0px;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  color: #323e43;
  font-family: "slick";
  font-size: 24px;
  line-height: 20px;
  text-align: center;
  content: "•";
  opacity: 0.25;
}

.slick-dots li.slick-active button:before {
  color: #323e43;
  opacity: 0.75;
}

/* Syntax Highlighting */
/* PrismJS 1.16.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+json&plugins=command-line */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
code[class*='language-'],
pre[class*='language-'] {
  word-wrap: normal;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  -ms-hyphens: none;
  background: none;
  color: #ccc;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 14px;
  hyphens: none;
  line-height: 1.5;
  text-align: left;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  tab-size: 2;
}

/* Code blocks */
pre[class*='language-'] {
  margin: 0.5em 0;
  padding: 1em 2em;
  overflow: auto;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
  color: #67cdcc;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.token.inserted {
  color: green;
}

.command-line-prompt {
  -moz-user-select: none;
  -ms-user-select: none;
  display: block;
  margin-right: 1em;
  float: left;
  border-right: 1px solid #999;
  font-size: 100%;
  letter-spacing: -1px;
  pointer-events: none;
  user-select: none;
}

.command-line-prompt > span:before {
  display: block;
  padding-right: 0.8em;
  color: #999;
  content: ' ';
}

.command-line-prompt > span[data-user]:before {
  content: "[" attr(data-user) "@" attr(data-host) "] $";
}

.command-line-prompt > span[data-user='root']:before {
  content: "[" attr(data-user) "@" attr(data-host) "] #";
}

.command-line-prompt > span[data-prompt]:before {
  content: attr(data-prompt);
}

/* Custom Styling */
html {
  background-color: #202956;
}

body {
  background-color: #ffffff;
}

body.page--all .container {
  background-color: #273269;
}

.container.intro {
  height: 100vh;
  background-color: #273269;
  color: #ffffff;
}

.container.intro .page__title {
  display: block;
  color: #ffffff;
  font-size: 32px;
  letter-spacing: 0.05rem;
}

@media only screen and (min-width: 800px) {
  .container.intro .page__title {
    font-size: 58px;
  }
}

.container.intro .page__sub-title {
  color: #52dfb4;
}

@media only screen and (min-width: 800px) {
  .container.intro .page__sub-title {
    font-size: 58px;
  }
}

.container.intro .row {
  align-items: flex-start;
}

@media only screen and (min-width: 800px) {
  .container.intro .row {
    align-items: center;
  }
}

.container.blog {
  height: 70vh;
  text-align: left;
}

.container.blog .page__title {
  color: #52dfb4;
}

.container.blog .button--previous {
  color: #52dfb4;
}

.container.bookmarks {
  height: 70vh;
  background-color: #273269;
  color: white;
}

.container.bookmarks .page__title {
  color: #52dfb4;
}

.container.portfolio {
  height: 70vh;
  background-color: #273269;
  color: #ffffff;
  text-align: left;
}

.container.portfolio .page__title,
.container.portfolio .button--previous {
  color: #ffffff;
}

.container.portfolio .row {
  align-items: flex-start;
}

@media only screen and (min-width: 800px) {
  .container.portfolio .row {
    align-items: center;
  }
}

.container.brm {
  height: 70vh;
  background-color: #184082;
  color: #ffffff;
}

.container.brm .page__title,
.container.brm .button--previous {
  color: #ffffff;
}

.container.environmental-design {
  height: 70vh;
  background-color: #c21f2f;
  color: #ffffff;
}

.container.environmental-design .page__title,
.container.environmental-design .button--previous {
  color: #ffffff;
}

.container.paw {
  height: 70vh;
  background-color: #f37021;
  color: #ffffff;
}

.container.paw .page__title,
.container.paw .button--previous {
  color: #ffffff;
}

.container.fitnessapp {
  height: 70vh;
  background-color: #f1bf9c;
  color: #ffffff;
}

.container.fitnessapp .page__title,
.container.fitnessapp .button--previous {
  color: #ffffff;
}

.container.hle {
  height: 70vh;
  background-color: #028bcc;
  color: #ffffff;
}

.container.hle .page__title,
.container.hle .button--previous {
  color: #ffffff;
}

.container.drizly {
  height: 70vh;
  background-color: #e12c2c;
  color: #ffffff;
}

.container.drizly .page__title,
.container.drizly .button--previous {
  color: #ffffff;
}

.container.wind-journey {
  height: 70vh;
  background-color: #008556;
  color: #ffffff;
}

.container.wind-journey .page__title,
.container.wind-journey .button--previous {
  color: #ffffff;
}

.container.calculator {
  height: 70vh;
  background-color: #461E7D;
  color: #ffffff;
}

.container.calculator .page__title,
.container.calculator .button--previous {
  color: #ffffff;
}

.container.pennstater {
  height: 70vh;
  background-color: #006FBA;
  color: #ffffff;
}

.container.pennstater .page__title,
.container.pennstater .button--previous {
  color: #ffffff;
}

ul.bookmarks {
  margin-bottom: 16px;
}

ul.bookmarks .list__item {
  margin-bottom: 8px;
}

ul.bookmarks .list__item a {
  position: relative;
  color: #273269;
}

ul.bookmarks .list__item a:focus {
  text-decoration: underline;
}

ul.bookmarks .list__item a:hover {
  color: #52dfb4;
  text-decoration: underline;
}

ul.portfolio {
  margin-bottom: 16px;
}

ul.portfolio .list__item {
  margin-bottom: 24px;
  border: none;
}

ul.portfolio .list__item .label {
  font-size: 32px;
}

ul.portfolio .list__item a {
  color: #52dfb4;
}

ul.portfolio .list__item a:hover {
  color: #40a880;
}

ul.portfolio .list__item a:hover p {
  color: #40a880;
}

ul.portfolio .list__item p,
ul.portfolio .list__item small {
  margin: 0;
  color: #52dfb4;
  font-size: 1em;
  font-weight: 600;
  /* Output standard non-prefixed declaration */
  transition: color 0.15s linear;
}

.button--previous {
  padding: 4px;
  border: 3px solid transparent;
  color: white;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .025em;
}

.button--previous:focus {
  padding: 4px;
  border: 3px solid;
}

.button--previous span {
  padding: 0 4px;
  font-size: 19px;
  font-weight: 800;
}

.button--previous span span {
  padding: 0 2px;
  color: #ffffff;
}

/* Custom Positioning Classes */
.position-bottom-right {
  position: absolute;
  right: 5vh;
  bottom: 0;
  pointer-events: none;
}

.position-top-left {
  position: absolute;
  top: 2em;
  left: 6vh;
}

@media only screen and (min-width: 800px) {
  .position-top-left {
    top: 4em;
    left: 10vh;
  }
}

.position-top-right {
  position: absolute;
  top: 2em;
  right: 6vh;
}

@media only screen and (min-width: 800px) {
  .position-top-right {
    top: 4em;
    right: 10vh;
  }
}

/* Custom Styling for Contact Container */
.contact a {
  color: #52dfb4;
  color: #323e43;
}

.contact a:focus {
  text-decoration: underline;
}

.contact a:hover {
  color: #24c191;
}

.page__logo {
  display: block;
  max-width: 200px;
  margin: 2em auto;
}

.intro-message {
  margin-bottom: 15%;
}

.intro-message h1,
.intro-message h2 {
  display: inline;
}

.intro-message span {
  position: relative;
  top: -3px;
  padding: 12px;
  color: white;
  font-size: 30px;
  vertical-align: middle;
}

.section__title {
  margin-bottom: 24px;
  color: #fde803;
  color: #f27181;
  font-size: 2.5em;
}

.section__title.text--display {
  color: #fde803;
}

.text--display {
  color: #f27181;
  font-family: "Rubik", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: 3em;
  line-height: 1.2;
}

@media only screen and (min-width: 1100px) {
  .text--display {
    font-size: 3em;
  }
}

.text--display strong {
  display: block;
  position: relative;
  margin-left: -6px;
}

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

.text--large {
  font-size: 1.25em;
}

@media only screen and (min-width: 800px) {
  .text--large {
    font-size: 1.5em;
  }
}

ul.pretty {
  font-size: 1.25em;
}

.with-icons {
  margin-left: 27px;
}

@media only screen and (min-width: 800px) {
  .with-icons {
    margin-left: 0;
  }
}

.title-image {
  width: 100%;
  max-width: 260px;
  margin-top: 3em;
}

.icon-image {
  width: 100%;
  max-width: 50%;
  opacity: 0.15;
}

.copy {
  font-size: 14px;
  text-align: center;
}

.kern-1 {
  letter-spacing: 1px;
}

.mast-head {
  display: flex;
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 50%;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin: 0px auto;
  padding-top: 20px;
  padding-bottom: 10px;
  transform: translateX(-50%);
}

.square {
  position: relative;
  width: 100%;
  padding-top: 50%;
  /* If you want text inside of it */
}

.specimen {
  margin-bottom: 48px;
  text-align: center;
}

@media only screen and (min-width: 1100px) {
  .stretch {
    margin-right: -10vw;
    margin-left: -10vw;
  }
}

/* Carousel Styling */
.stack {
  padding: 16px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 10px 0 -5px #eee, 0 10px 1px -4px rgba(0, 0, 0, 0.15), 0 20px 0 -10px #eee, 0 20px 1px -9px rgba(0, 0, 0, 0.15);
}

/* Image Styling */
.paper {
  padding: 8px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.fake-browser-ui {
  display: inline-block;
  position: relative;
  padding: 20px 0 0;
  border-radius: 3px;
  background: #ddd;
  line-height: 0;
}

.fake-browser-ui .scroll-box {
  height: 500px;
  overflow: scroll;
}

.fake-browser-ui .frame {
  display: block;
  position: absolute;
  top: 5px;
  left: 1px;
  height: 15px;
}

.fake-browser-ui span {
  width: 8px;
  height: 8px;
  margin: 0 0 0 4px;
  float: left;
  border: 1px solid #dadada;
  border-radius: 8px;
  background-color: #eee;
}
