@charset "UTF-8";
/*
Theme Name: Sort Design (v2)
Author: Sort Design
Author URI: http://www.sortdesign.co.uk
*/
/*------------------------------------------------------------------------*\
	INITIAL IMPORTS
\*------------------------------------------------------------------------*/
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

/*------------------------------------------------------------------------*\
	FONT
\*------------------------------------------------------------------------*/
/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Colophon Foundry. The fonts are protected under domestic and international trademark and
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2021 Colophon Foundry
 *
 * Licenced to Michael Graham Sort Design
 */
@font-face {
  font-family: "grenette-regular";
  src: url("fonts/grenette-regular.eot");
  src: url("fonts/grenette-regular.eot?#iefix") format("embedded-opentype"), url("fonts/grenette-regular.woff2") format("woff2"), url("fonts/grenette-regular.woff") format("woff"), url("fonts/grenette-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
button,
input,
select,
textarea, body {
  font-family: grenette-regular, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*------------------------------------------------------------------------*\
	COLOURS
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	VALUES
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	DEVICES
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	MEDIA QUERIES
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	GRID COLUMNS
	- background colour grid item boxes by using div inside them, (eg flex-v-align)
	- if using "minimum propotion blocks", use 
	  container -> flex columm -> flex-v-align -> minimum-proportion -> div -> content
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	MINIMUM PROPORTION TILES	
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	- eg square, 16x9 etc, fluid, until content is too big to fix, 
	  in which case row will expand to fit
	- contain in a flex-v-align in most cases.
	- use with inner div to contain content
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	VERTICAL CENTRING (FLEXBOX)
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	VERTICAL CENTRING (LEGACY)
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	CLEARFIX
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	SORT RESET
\*------------------------------------------------------------------------*/
/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/*------------------------------------------------------------------------*\
	LIST RE-WORK
\*------------------------------------------------------------------------*/
ul {
  padding-left: 1em;
  text-indent: -1em;
  margin-left: 0;
}
ul li:before {
  content: "•";
  text-indent: -1em;
  padding-right: 0.75em;
}
ul li {
  text-indent: -1em;
}

.sub-menu ul, .fs-content ul, nav.top-nav ul {
  padding-left: 0;
  text-indent: 0;
  list-style: none;
  margin-bottom: 0;
}
.sub-menu ul li, .fs-content ul li, nav.top-nav ul li {
  text-indent: 0;
}
.sub-menu ul li::before, .fs-content ul li::before, nav.top-nav ul li::before {
  content: none;
}

/*------------------------------------------------------------------------*\
	STANDARD VIDEO EMBED CONTAINER 16x9 (VIMEO ETC)
\*------------------------------------------------------------------------*/
.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*------------------------------------------------------------------------*\
	BACKGROUNDS
\*------------------------------------------------------------------------*/
.work-highlight-image, .fs-module__video-wrapper, .fs-module, .tall-block, .banner {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.fs-module__images__inner, .listing-block__image {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

/*------------------------------------------------------------------------*\
	CURSOR
\*------------------------------------------------------------------------*/
.fs-module__read-more-dot, .sub-menu a, input[type=submit] {
  cursor: pointer;
  cursor: hand;
}

/*------------------------------------------------------------------------*\
	NO WRAP
\*------------------------------------------------------------------------*/
.no-wr {
  white-space: nowrap;
}

/*------------------------------------------------------------------------*\
	BEGIN
\*------------------------------------------------------------------------*/
html {
  background: #fff;
}

html {
  font-size: 22px;
}
@media (max-width: 767px) {
  html {
    font-size: 19.8px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  html {
    font-size: 17.6px;
  }
}

body {
  font-size: 1rem;
  background-color: #ffffff;
  color: #FF585A;
  line-height: 1.5;
}
body.fs-content--open {
  overflow: hidden;
}

p {
  margin-bottom: 1em;
}

h1, h2, h3, h4, h5 {
  margin-bottom: 1rem;
}

a,
a:link,
a:visited {
  color: #FF585A;
  transition: color 0.3s;
  text-decoration: none;
}

a:hover,
a:active {
  color: #ff8b8c;
  text-decoration: none;
}

img {
  box-sizing: content-box;
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

input, textarea, select, button {
  font-size: 1rem;
}

input, textarea, select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border: solid 1px #e6e6e6;
}

select {
  padding: 0.25rem 3rem 0.25rem 0.5rem;
  background-image: url("icon-down-arrow.svg");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 21px 10px;
  background-color: transparent;
}

input {
  background-color: transparent;
  padding: 0.25rem 0.5rem;
}

input[type=submit] {
  background-color: #000000;
  color: #ffffff;
  text-transform: uppercase;
  transition: color 0.3s;
}

input[type=number] {
  width: 3rem;
}

textarea {
  min-width: 400px;
  min-height: 100px;
  margin-bottom: 1rem;
}

table {
  margin-bottom: 1rem;
}

th, td {
  padding: 15px;
  vertical-align: middle;
}
@media (max-width: 767px) {
  th, td {
    padding: 5px;
  }
}

th:first-child, td:first-child {
  padding-left: 0;
}

th {
  text-align: left;
  text-transform: uppercase;
}

::-moz-selection {
  background: rgba(43, 35, 7, 0.13);
}

::selection {
  background: rgba(43, 35, 7, 0.13);
}

::-moz-placeholder {
  color: #000000;
}

::placeholder {
  color: #000000;
}

/*------------------------------------------------------------------------*\
	LAYOUT
\*------------------------------------------------------------------------*/
.wrap {
  margin: 0 auto;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}

.inner-wrap {
  margin: 0 auto;
  max-width: 900px;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
}

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

header#header {
  font-size: 1.35rem;
  padding-top: 30px;
  padding-bottom: 180px;
}
@media (max-width: 767px) {
  header#header {
    font-size: 1.17rem;
  }
}
header#header a {
  color: #000000;
}
header#header .wrap {
  display: flex;
  justify-content: space-between;
}
body.single-project header#header, body.home header#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-bottom: 0;
}
body.single-project header#header {
  color: #ffffff;
}
body.single-project header#header a {
  color: #ffffff;
}
body.single-project header#header a:hover {
  color: #FF585A;
}
body.fs-content--open header#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  color: #ffffff;
  padding-bottom: 30px;
}
body.fs-content--open header#header a {
  color: #ffffff;
}
body.fs-content--open header#header a:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .cols {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex: 0 1 auto;
    align-items: stretch;
    margin-left: -30px;
    margin-right: -30px;
  }
}

@media (min-width: 768px) {
  .col--1of2 {
    flex: 1 1 auto;
    flex-basis: 50%;
    max-width: 50%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .col--1of3 {
    flex: 1 1 auto;
    flex-basis: 33.333%;
    max-width: 33.333%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .col--1of4 {
    flex: 1 1 auto;
    flex-basis: 25%;
    max-width: 25%;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .cols--ng {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex: 0 1 auto;
    align-items: stretch;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 768px) {
  .col--1of2--ng {
    flex: 1 1 auto;
    flex-basis: 50%;
    max-width: 50%;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 768px) {
  .cols--hg {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    flex: 0 1 auto;
    align-items: stretch;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: 3px;
  }
}

@media (min-width: 768px) {
  .col--1of2--hg {
    flex: 1 1 auto;
    flex-basis: 50%;
    max-width: 50%;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 0px;
    margin-bottom: 3px;
  }
}

/*------------------------------------------------------------------------*\
	NAV
\*------------------------------------------------------------------------*/
.nav-trigger {
  display: none;
}
@media (max-width: 767px) {
  .nav-trigger {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    float: right;
  }
}

.nav-trigger__icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 3px;
  background-color: black;
  /* upper and lower lines in the menu icon */
}
.nav-trigger__icon::before, .nav-trigger__icon:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: black;
  transition: transform 0.3s, top 0.3s, background-color 0s;
}
.nav-trigger__icon::before {
  top: -5px;
}
.nav-trigger__icon::after {
  top: 5px;
}
.nav-trigger.is-clicked .nav-trigger__icon {
  background-color: transparent;
}
.nav-trigger.is-clicked .nav-trigger__icon::before {
  top: 0;
  transform: rotate(135deg);
}
.nav-trigger.is-clicked .nav-trigger__icon::after {
  top: 0;
  transform: rotate(225deg);
}

nav.top-nav li {
  display: inline-block;
  margin-left: 2rem;
}
nav.top-nav a {
  text-decoration: none;
}

/*------------------------------------------------------------------------*\
	MODULES
\*------------------------------------------------------------------------*/
.fs-content {
  display: none;
  z-index: 15;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-top: 15vh;
  padding-bottom: 15vh;
  background-color: #004aff;
  color: #ffffff;
  text-align: center;
	overflow: auto;
}
.fs-content a {
  color: #ffffff;
}
.fs-content .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: space-between;
}
.sub-menu {
  font-size: 1.5rem;
}
@media (max-width: 767px) {
  .sub-menu {
    font-size: 1.3rem;
  }
}
.sub-menu li {
  display: inline-block;
  margin-left: 1rem;
  margin-right: 1rem;
}
.sub-menu a:hover {
  color: #ff8b8c;
}

.fs-content__inner {
  text-align: left;
}

.sort-design-logo {
  width: 20vh;
  margin-left: auto;
  margin-right: auto;
}

section.section {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #60635C;
  color: #ffffff;
}

section.section--copy {
  padding-top: 240px;
  padding-bottom: 240px;
}

section.section--copy--new {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section-title {
  color: #000000;
  margin-bottom: 1rem;
}

a.listing-block,
.listing-block {
  display: block;
  width: 100%;
  position: relative;
  margin-bottom: 180px;
}

.listing-block__image {
  display: block;
  padding-bottom: 100%;
}
body.alt .listing-block__image {
  background-color: #FF585A;
}

.listing-block__title {
  position: absolute;
  bottom: -78px;
  left: 0;
  right: 0;
  text-align: center;
  width: 100%;
}

.banner {
  display: block;
  width: 100%;
  height: 100vh;
  position: relative;
}
.banner picture {
}
.banner iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-wrapper {
  padding-bottom: 56.3%;
  position: relative;
  overflow: hidden;
  background-color: #000000;
}
.video-wrapper iframe {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: 100.5%;
  height: 100.5%;
}

.banner__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.banner__logo {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner__logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 27%;
}

a.website-preview {
  display: block;
}
a.website-preview img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.website-preview__header {
  background-image: url("images/website-preview-header.svg");
  padding-bottom: 2.138268344%;
}

.tall-block {
  padding-bottom: 134%;
  background-color: #D1CCBD;
  position: relative;
}

.tall-block__logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tall-block__logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 27%;
}

body.home main {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.fs-module {
  scroll-snap-align: center;
  display: block;
  width: 100%;
  height: 100vh;
  position: relative;
}

@media (max-width: 767px) {
  .fs-module--inset-mobile {
    background-position-y: center !important;
    background-size: 90%;
  }
}

.fs-module--white {
  background-color: #ffffff;
  color: #000;
}
.fs-module--red {
  background-color: #FF585A;
  color: #ffffff;
}
.fs-module--grey {
  background-color: #60635C;
  color: #ffffff;
}
.fs-module--black {
  background-color: #000000;
  color: #ffffff;
}

.fs-module--light-grey {
  background-color: #DDDDDD;
  color: #ffffff;
}

/*
.fs-module--white a {
  cursor: url("images/cursor.svg") 16 16, pointer;
}
.fs-module--red a {
  cursor: url("images/cursor-white.svg") 16 16, pointer;
}
.fs-module--black a {
  cursor: url("images/cursor.svg") 16 16, pointer;
}
.fs-module--grey a {
  cursor: url("images/cursor.svg") 16 16, pointer;
}

.fs-module--light-grey a {
  cursor: url("images/cursor.svg") 16 16, pointer;
}
*/

.fs-module__images {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-module__images .cols {
  height: 100%;
  width: 100%;
}
.fs-module__images .col--1of2 {
  height: 100%;
}

.fs-module__images__outer {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 75%;
}

.fs-module__images__inner {
  width: 100%;
  height: 100%;
}
.fs-module__images__inner img {
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  display: block;
}
@media (max-width: 767px) {
	.fs-module__images__inner{
		display: none;
	}
	.fs-module__images__inner:first-child{
		display: block;
	}
}

.fs-module__text {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  color: inherit;
}
@media (min-width: 768px) {
  .fs-module__text {
    color: inherit;
  }
}

.fs-module__text__inner {
  font-size: 1.35rem;
  padding-left: 30px;
  padding-bottom: 30px;
  width: 100%;
  text-align: left;
}
@media (max-width: 767px) {
  .fs-module__text__inner {
    font-size: 1.17rem;
 /* padding-bottom: 90px;*/
  }
}

.fs-module__video-wrapper {
  background-color: grey;
  -webkit-animation: fadein 1s;
          animation: fadein 1s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.fs-module__video-wrapper iframe {
  width: 100vw;
  height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  min-height: 100vh;
  min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fs-module__video-wrapper--alt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-module__video-wrapper--alt__outer {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62%;
  height: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .fs-module__video-wrapper--alt__outer {
    width: 90%;
  }
	.fs-module__video-wrapper iframe{
		min-height: 1px;
	  height: 90%;
		min-width: 1px;
	  width: 90%;
	}
}
.fs-module__video-wrapper--alt__outer iframe {
  width: 100%;
  height: 100%;
}

.fs-module__logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fs-module__logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 27%;
  margin-bottom: 0vh;
}
.fs-module__logo.fs-module__logo--small img {
  width: 16%;
}

.fs-module__read-more-dot {
  display: block;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  z-index: 15;
}
.fs-module__read-more-dot::after {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #FF585A;
  border-radius: 100%;
  -webkit-animation: bounce 2s infinite;
          animation: bounce 2s infinite;
}

.fs-module__overlay-link {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 14;
}

h1.intro-title {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.project-tags {
  color: #FF585A;
}

@media (max-width: 767px) {
  .intro-module {
    margin-top: 1rem;
  }
}

.quote-source {
  color: #FF585A;
  text-align: center;
  margin-bottom: 0;
}

blockquote {
  font-size: 2rem;
  text-align: center;
}

.fs-module .cols--ng {
  height: 100%;
}
.fs-module .col--1of2--ng {
  height: 100%;
}

.column-carousel.slick-slider,
.column-carousel .slick-list,
.column-carousel .slick-track,
.column-carousel .slick-slide,
.column-carousel .slick-slide > div {
  height: 100%;
}

.work-highlight {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #FF585A;
  color: #000000;
}

.work-highlight__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 60px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 3rem;
  line-height: 1;
}

.work-highlight__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 60px;
  padding-left: 30px;
  padding-right: 30px;
  color: #000000;
  font-size: 1.4rem;
}

.work-highlight-image {
  width: 100%;
  height: 100%;
}

/*------------------------------------------------------------------------*\
	UTILITY
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
	KEYFRAMES
\*------------------------------------------------------------------------*/
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
/*------------------------------------------------------------------------*\
	FOOTER
\*------------------------------------------------------------------------*/
footer#footer {
  scroll-snap-stop: always;
  scroll-snap-align: end;
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #004aff;
  color: #fff;
  font-size: 0.8rem;
}
footer#footer a, footer#footer a:link, footer#footer a:visited {
  color: #fff;
}
.footer-content {
  margin-bottom: 1rem;
}

.footer-logo {
  display: block;
  max-width: 200px;
	filter: brightness(0) invert(1);
}
@media (min-width: 768px) {
  .footer-logo {
    margin-left: auto;
  }
}

/*------------------------------------------------------------------------*\
	PLUGINS, ETC
\*------------------------------------------------------------------------*/
/*------------------------------------------------------------------------*\
    LAZY SIZES
\*------------------------------------------------------------------------*/
/* fade image in after load */
.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 600ms;
}

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

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

.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 {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: 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;
  float: left;
  height: 100%;
  min-height: 1px;
}

[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 {
  font-family: "slick";
  font-weight: normal;
  font-style: normal;
  src: url("slick.eot");
  src: url("slick.eot?#iefix") format("embedded-opentype"), url("slick.woff") format("woff"), url("slick.ttf") format("truetype"), url("slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: 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 {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

[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: 30px;
}

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

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

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

.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 {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}

/*------------------------------------------------------------------------*\
	PLUGIN OVERRIDES
\*------------------------------------------------------------------------*/
.slick-dots li {
  text-indent: 0;
}

ul.slick-dots {
  padding-left: 0;
  text-indent: 0;
  margin-left: 0;
  bottom: 40px;
}

ul.slick-dots li:before {
  content: normal;
  text-indent: 0;
  padding-right: 0;
}

.slick-dots li button {
  background-color: #ffffff;
  border-radius: 100%;
  height: 8px;
  width: 8px;
  padding: 0;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .slick-dots li button {
    width: 6px;
    height: 6px;
  }
}

.slick-dots li button:before {
  content: none;
}

.slick-dots li.slick-active button {
  opacity: 0.65;
  background-color: #ffffff;
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.column-carousel .slick-prev {
  display: none !important;
}

.column-carousel .slick-next::before {
  content: "";
}

/*# sourceMappingURL=maps/style.css.map */