main: codestyle fixed, bundle js, css copied to wagtail

main/static/main/css/styles.css

-/*
-! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
+@import url('https://gfonts.pirati.cz/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&display=swap');
+
+/* Icons */
+
+@font-face {
+  font-family: 'pirati-ui';
+  src:  url('../fonts/pirati-ui.eot?6717e187d2f4434e2e72b8d582d69efa');
+  src:  url('../fonts/pirati-ui.eot?6717e187d2f4434e2e72b8d582d69efa#iefix') format('embedded-opentype'),
+    url('../fonts/pirati-ui.ttf?6717e187d2f4434e2e72b8d582d69efa') format('truetype'),
+    url('../fonts/pirati-ui.woff?6717e187d2f4434e2e72b8d582d69efa') format('woff'),
+    url('../fonts/pirati-ui.svg?6717e187d2f4434e2e72b8d582d69efa#pirati-ui') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="ico--"], [class*=" ico--"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'pirati-ui' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ico--dots-three-vertical:before { content: "\e940"; }
+
+.ico--dots-three-horizontal:before { content: "\e941"; }
+
+.ico--log-out:before { content: "\e942"; }
+
+.ico--envelope:before { content: "\e908"; }
+
+.ico--pin:before { content: "\e943"; }
+
+.ico--at:before { content: "\e905"; }
+
+.ico--strategy:before { content: "\e932"; }
+
+.ico--pig:before { content: "\e928"; }
+
+.ico--thermometer:before { content: "\e90a"; }
+
+.ico--menu:before { content: "\e933"; }
+
+.ico--chevron-right:before { content: "\e923"; }
+
+.ico--chevron-left:before { content: "\e924"; }
+
+.ico--chevron-down:before { content: "\e925"; }
+
+.ico--chevron-up:before { content: "\e926"; }
+
+.ico--link-horizontal:before { content: "\e910"; }
+
+.ico--beer:before { content: "\e909"; }
+
+.ico--pirati:before { content: "\e90d"; }
+
+.ico--jitsi:before { content: "\e90f"; }
+
+.ico--open-source:before { content: "\e90e"; }
+
+.ico--thumbs-down:before { content: "\e93d"; }
+
+.ico--thumbs-up:before { content: "\e93e"; }
+
+.ico--anchor:before { content: "\e92d"; }
+
+.ico--paw:before { content: "\e90b"; }
+
+.ico--checkmark:before { content: "\e965"; }
+
+.ico--info:before { content: "\e901"; }
+
+.ico--question:before { content: "\e904"; }
+
+.ico--warning:before { content: "\e93f"; }
+
+.ico--code:before { content: "\e94a"; }
+
+.ico--checkbox-unchecked:before { content: "\e94e"; }
+
+.ico--star-full:before { content: "\e94f"; }
+
+.ico--star-empty:before { content: "\e950"; }
+
+.ico--bookmark:before { content: "\e951"; }
+
+.ico--cog:before { content: "\e952"; }
+
+.ico--key:before { content: "\e953"; }
+
+.ico--zoom-in:before { content: "\e954"; }
+
+.ico--zoom-out:before { content: "\e955"; }
+
+.ico--shrink:before { content: "\e956"; }
+
+.ico--printer:before { content: "\e957"; }
+
+.ico--file-openoffice:before { content: "\e958"; }
+
+.ico--user:before { content: "\e959"; }
+
+.ico--file-excel:before { content: "\e95a"; }
+
+.ico--file-word:before { content: "\e95b"; }
+
+.ico--file-pdf:before { content: "\e95c"; }
+
+.ico--file-picture:before { content: "\e95d"; }
+
+.ico--file-blank:before { content: "\e95e"; }
+
+.ico--folder-upload:before { content: "\e95f"; }
+
+.ico--upload:before { content: "\e960"; }
+
+.ico--cloud-upload:before { content: "\e961"; }
+
+.ico--folder-download:before { content: "\e962"; }
+
+.ico--download:before { content: "\e963"; }
+
+.ico--cloud-download:before { content: "\e964"; }
+
+.ico--alarm:before { content: "\e900"; }
+
+.ico--calculator:before { content: "\e911"; }
+
+.ico--facebook-full:before { content: "\e913"; }
+
+.ico--feed:before { content: "\e927"; }
+
+.ico--library:before { content: "\e929"; }
+
+.ico--office:before { content: "\e92a"; }
+
+.ico--attachment:before { content: "\e92b"; }
+
+.ico--enlarge:before { content: "\e92c"; }
+
+.ico--eye-off:before { content: "\e92e"; }
+
+.ico--eye:before { content: "\e92f"; }
+
+.ico--share:before { content: "\e931"; }
+
+.ico--search:before { content: "\e939"; }
+
+.ico--pencil:before { content: "\e93c"; }
+
+.ico--lock-open:before { content: "\e947"; }
+
+.ico--lock:before { content: "\e948"; }
+
+.ico--equalizer:before { content: "\e949"; }
+
+.ico--switch:before { content: "\e94b"; }
+
+.ico--loop:before { content: "\e94c"; }
+
+.ico--refresh:before { content: "\e94d"; }
+
+.ico--bullhorn:before { content: "\e944"; }
+
+.ico--bin:before { content: "\e945"; }
+
+.ico--cross:before { content: "\e937"; }
+
+.ico--checkbox-checked:before { content: "\e938"; }
+
+.ico--globe:before { content: "\e93a"; }
+
+.ico--wikipedia:before { content: "\e93b"; }
+
+.ico--youtube:before { content: "\e936"; }
+
+.ico--users:before { content: "\e934"; }
+
+.ico--book:before { content: "\e935"; }
+
+.ico--bubbles:before { content: "\e930"; }
+
+.ico--map:before { content: "\e914"; }
+
+.ico--compass:before { content: "\e915"; }
+
+.ico--folder-open:before { content: "\e916"; }
+
+.ico--folder:before { content: "\e917"; }
+
+.ico--drawer:before { content: "\e918"; }
+
+.ico--stop:before { content: "\e919"; }
+
+.ico--github:before { content: "\e91a"; }
+
+.ico--clock:before { content: "\e91b"; }
+
+.ico--calendar:before { content: "\e91c"; }
+
+.ico--flickr:before { content: "\e91d"; }
+
+.ico--instagram:before { content: "\e91e"; }
+
+.ico--twitter:before { content: "\e91f"; }
+
+.ico--newspaper:before { content: "\e920"; }
+
+.ico--cart:before { content: "\e921"; }
+
+.ico--home:before { content: "\e922"; }
+
+.ico--link:before { content: "\e912"; }
+
+.ico--power:before { content: "\e90c"; }
+
+.ico--rocket:before { content: "\e946"; }
+
+.ico--location:before { content: "\e906"; }
+
+.ico--phone:before { content: "\e907"; }
+
+.ico--linkedin:before { content: "\e903"; }
+
+.ico--facebook:before { content: "\e902"; }
+
+/**
+* This injects Tailwind's base styles and any base styles registered by
+* plugins.
 */
 
+/* ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com */
+
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -10,14 +248,10 @@
 *,
 ::before,
 ::after {
-  box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: #e5e7eb;
-  /* 2 */
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: currentColor; /* 2 */
 }
 
 ::before,
@@ -33,17 +267,12 @@
 */
 
 html {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
-     tab-size: 4;
-  /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  /* 4 */
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
 }
 
 /*
@@ -52,10 +281,8 @@ html {
 */
 
 body {
-  margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
 }
 
 /*
@@ -65,12 +292,9 @@ body {
 */
 
 hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
 }
 
 /*
@@ -123,10 +347,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }
 
 /*
@@ -164,12 +386,9 @@ sup {
 */
 
 table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
 }
 
 /*
@@ -183,20 +402,13 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
 }
 
 /*
@@ -217,12 +429,9 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  -webkit-appearance: button;
-  /* 1 */
-  background-color: transparent;
-  /* 2 */
-  background-image: none;
-  /* 2 */
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
 }
 
 /*
@@ -264,10 +473,8 @@ Correct the cursor style of increment and decrement buttons in Safari.
 */
 
 [type='search'] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
 
 /*
@@ -284,10 +491,8 @@ Remove the inner padding in Chrome and Safari on macOS.
 */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
 
 /*
@@ -349,18 +554,14 @@ textarea {
 */
 
 input::-moz-placeholder, textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
 }
 
 input::placeholder,
 textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
 }
 
 /*
@@ -394,10 +595,8 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
 }
 
 /*
@@ -551,166 +750,3161 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+/**
+* This injects Tailwind's component classes and any component classes
+* registered by plugins.
+*/
+
 .container{
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 576px){
+
   .container{
-    max-width: 640px;
+    max-width: 576px;
   }
 }
 
 @media (min-width: 768px){
+
   .container{
     max-width: 768px;
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 992px){
+
   .container{
-    max-width: 1024px;
+    max-width: 992px;
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1200px){
+
   .container{
-    max-width: 1280px;
+    max-width: 1200px;
+    padding-right: 2rem;
+    padding-left: 2rem;
   }
 }
 
-@media (min-width: 1536px) {
+@media (min-width: 1366px){
+
   .container{
-    max-width: 1536px;
+    max-width: 1366px;
   }
 }
 
-.static {
-  position: static;
+.btn{
+  display: inline-block;
+  text-align: center;
+  font-weight: 400;
+  max-width: 20rem;
+  text-decoration: none;
 }
 
-.my-40 {
-  margin-top: 10rem;
-  margin-bottom: 10rem;
+.btn[disabled]{
+  opacity: 0.7;
+  cursor: not-allowed;
 }
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+.btn:hover{
+  text-decoration: none;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.btn__body{
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: .75em 2em;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
+.btn__body, .btn__icon, .btn__inline-icon{
+  transition-property: color,background-color,border-color;
+  transition-duration: .2s;
+  color: #ffffff;
 }
 
-.block {
-  display: block;
+.btn__body, .btn__icon{
+  background-color: #000000;
 }
 
-.flex {
+.btn--icon .btn__body-wrap{
   display: flex;
 }
 
-.h-16 {
-  height: 4rem;
+.btn--condensed .btn__body{
+  padding: .75em 1em;
 }
 
-.w-80 {
-  width: 20rem;
+@-webkit-keyframes btn-loading-spinner{
+
+  to{
+    transform: rotate(360deg);
+  }
 }
 
-.w-36 {
-  width: 9rem;
+@keyframes btn-loading-spinner{
+
+  to{
+    transform: rotate(360deg);
+  }
 }
 
-.flex-col {
-  flex-direction: column;
+.btn--black .btn__body, .btn--black .btn__icon{
+  background-color: #000000;
+  color: #ffffff;
 }
 
-.items-center {
-  align-items: center;
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(0, 0, 0);
+  color: #fff;
 }
 
-.justify-between {
-  justify-content: space-between;
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: #262626;
 }
 
-.gap-8 {
-  gap: 2rem;
+.btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--black.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
 }
 
-.space-x-6 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+.btn--hoveractive.btn--to-black:hover .btn__body, .btn--to-black.btn--activated .btn__body{
+  background-color: #000000 !important;
+  color: #ffffff !important;
 }
 
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+.btn--hoveractive.btn--to-black:hover .btn__icon, .btn--to-black.btn--activated .btn__icon{
+  border-color: #343434 !important;
+  background-color: #000000 !important;
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.btn--hoveractive.btn--to-black:hover .btn__inline-icon, .btn--to-black.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
 }
 
-.bg-lightGreen {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 196 159 / var(--tw-bg-opacity));
+.btn--grey-700 .btn__body, .btn--grey-700 .btn__icon{
+  background-color: #202020;
+  color: #ffffff;
 }
 
-.bg-purple {
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 51 127 / var(--tw-bg-opacity));
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: #343434;
+  color: #fff;
 }
 
-.px-12 {
-  padding-left: 3rem;
-  padding-right: 3rem;
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: #262626;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+.btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-700.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
 }
 
-.uppercase {
-  text-transform: uppercase;
+.btn--hoveractive.btn--to-grey-700:hover .btn__body, .btn--to-grey-700.btn--activated .btn__body{
+  background-color: #202020 !important;
+  color: #ffffff !important;
 }
 
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+.btn--hoveractive.btn--to-grey-700:hover .btn__icon, .btn--to-grey-700.btn--activated .btn__icon{
+  border-color: #303132 !important;
+  background-color: #202020 !important;
 }
 
-.text-blue-100 {
-  --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
+.btn--hoveractive.btn--to-grey-700:hover .btn__inline-icon, .btn--to-grey-700.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
 }
 
-.transition {
-  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+.btn--grey-500 .btn__body, .btn--grey-500 .btn__icon{
+  background-color: #303132;
+  color: #ffffff;
 }
 
-.duration-200 {
-  transition-duration: 200ms;
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: #4c4c4c;
+  color: #fff;
 }
 
-.btn-primary-spec {
-  font-size: 1.5rem;
-  line-height: 2rem;
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: #343434;
 }
 
-.logo {
-  -webkit-clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
-          clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+.btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__body, .btn--to-grey-500.btn--activated .btn__body{
+  background-color: #303132 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__icon, .btn--to-grey-500.btn--activated .btn__icon{
+  border-color: #4c4c4c !important;
+  background-color: #303132 !important;
+}
+
+.btn--hoveractive.btn--to-grey-500:hover .btn__inline-icon, .btn--to-grey-500.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--grey-125 .btn__body, .btn--grey-125 .btn__icon{
+  background-color: #f0f0f0;
+  color: #000000;
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(192, 192, 192);
+  color: #fff;
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(168, 168, 168);
+}
+
+.btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--grey-125.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__body, .btn--to-grey-125.btn--activated .btn__body{
+  background-color: #f0f0f0 !important;
+  color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__icon, .btn--to-grey-125.btn--activated .btn__icon{
+  border-color: rgb(216, 216, 216) !important;
+  background-color: #f0f0f0 !important;
+}
+
+.btn--hoveractive.btn--to-grey-125:hover .btn__inline-icon, .btn--to-grey-125.btn--activated .btn__inline-icon{
+  color: #000000 !important;
+}
+
+.btn--white .btn__body, .btn--white .btn__icon{
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.btn--white .btn__icon{
+  border-color: #f3f3f3;
+  background-color: #ffffff;
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(204, 204, 204);
+  color: #fff;
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(179, 179, 179);
+}
+
+.btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--white.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__body, .btn--to-white.btn--activated .btn__body{
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__icon, .btn--to-white.btn--activated .btn__icon{
+  border-color: #f3f3f3 !important;
+  background-color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-white:hover .btn__inline-icon, .btn--to-white.btn--activated .btn__inline-icon{
+  color: #000000 !important;
+}
+
+.btn--blue-300 .btn__body, .btn--blue-300 .btn__icon{
+  background-color: #027da8;
+  color: #ffffff;
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(2, 100, 134);
+  color: #fff;
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(1, 88, 118);
+}
+
+.btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--blue-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__body, .btn--to-blue-300.btn--activated .btn__body{
+  background-color: #027da8 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__icon, .btn--to-blue-300.btn--activated .btn__icon{
+  border-color: rgb(2, 113, 151) !important;
+  background-color: #027da8 !important;
+}
+
+.btn--hoveractive.btn--to-blue-300:hover .btn__inline-icon, .btn--to-blue-300.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--cyan-200 .btn__body, .btn--cyan-200 .btn__icon{
+  background-color: #57b3bd;
+  color: #ffffff;
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(62, 149, 159);
+  color: #fff;
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(55, 131, 139);
+}
+
+.btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--cyan-200.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__body, .btn--to-cyan-200.btn--activated .btn__body{
+  background-color: #57b3bd !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__icon, .btn--to-cyan-200.btn--activated .btn__icon{
+  border-color: rgb(70, 168, 178) !important;
+  background-color: #57b3bd !important;
+}
+
+.btn--hoveractive.btn--to-cyan-200:hover .btn__inline-icon, .btn--to-cyan-200.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--green-300 .btn__body, .btn--green-300 .btn__icon{
+  background-color: #76cc9f;
+  color: #ffffff;
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(71, 187, 126);
+  color: #fff;
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(61, 164, 110);
+}
+
+.btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__body, .btn--to-green-300.btn--activated .btn__body{
+  background-color: #76cc9f !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__icon, .btn--to-green-300.btn--activated .btn__icon{
+  border-color: rgb(95, 195, 143) !important;
+  background-color: #76cc9f !important;
+}
+
+.btn--hoveractive.btn--to-green-300:hover .btn__inline-icon, .btn--to-green-300.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--green-400 .btn__body, .btn--green-400 .btn__icon{
+  background-color: #4ca971;
+  color: #ffffff;
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(61, 135, 90);
+  color: #fff;
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(53, 118, 79);
+}
+
+.btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__body, .btn--to-green-400.btn--activated .btn__body{
+  background-color: #4ca971 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__icon, .btn--to-green-400.btn--activated .btn__icon{
+  border-color: rgb(68, 152, 102) !important;
+  background-color: #4ca971 !important;
+}
+
+.btn--hoveractive.btn--to-green-400:hover .btn__inline-icon, .btn--to-green-400.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--green-500 .btn__body, .btn--green-500 .btn__icon{
+  background-color: #4fc49f;
+  color: #000000;
+}
+
+.btn--green-500 .btn__icon{
+  border-color: rgb(62, 185, 146);
+  background-color: #4fc49f;
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(55, 165, 130);
+  color: #fff;
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(48, 144, 114);
+}
+
+.btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--green-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__body, .btn--to-green-500.btn--activated .btn__body{
+  background-color: #4fc49f !important;
+  color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__icon, .btn--to-green-500.btn--activated .btn__icon{
+  border-color: rgb(62, 185, 146) !important;
+  background-color: #4fc49f !important;
+}
+
+.btn--hoveractive.btn--to-green-500:hover .btn__inline-icon, .btn--to-green-500.btn--activated .btn__inline-icon{
+  color: #000000 !important;
+}
+
+.btn--orange-300 .btn__body, .btn--orange-300 .btn__icon{
+  background-color: #ed9654;
+  color: #ffffff;
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(231, 114, 26);
+  color: #fff;
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(203, 100, 21);
+}
+
+.btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--orange-300.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__body, .btn--to-orange-300.btn--activated .btn__body{
+  background-color: #ed9654 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__icon, .btn--to-orange-300.btn--activated .btn__icon{
+  border-color: rgb(234, 132, 55) !important;
+  background-color: #ed9654 !important;
+}
+
+.btn--hoveractive.btn--to-orange-300:hover .btn__inline-icon, .btn--to-orange-300.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--violet-400 .btn__body, .btn--violet-400 .btn__icon{
+  background-color: #840048;
+  color: #ffffff;
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(106, 0, 58);
+  color: #fff;
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(92, 0, 50);
+}
+
+.btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-400.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__body, .btn--to-violet-400.btn--activated .btn__body{
+  background-color: #840048 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__icon, .btn--to-violet-400.btn--activated .btn__icon{
+  border-color: rgb(119, 0, 65) !important;
+  background-color: #840048 !important;
+}
+
+.btn--hoveractive.btn--to-violet-400:hover .btn__inline-icon, .btn--to-violet-400.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--violet-500 .btn__body, .btn--violet-500 .btn__icon{
+  background-color: #670047;
+  color: #000000;
+}
+
+.btn--violet-500 .btn__icon{
+  border-color: rgb(93, 0, 64);
+  background-color: #670047;
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(82, 0, 57);
+  color: #fff;
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(72, 0, 50);
+}
+
+.btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--violet-500.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__body, .btn--to-violet-500.btn--activated .btn__body{
+  background-color: #670047 !important;
+  color: #000000 !important;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__icon, .btn--to-violet-500.btn--activated .btn__icon{
+  border-color: rgb(93, 0, 64) !important;
+  background-color: #670047 !important;
+}
+
+.btn--hoveractive.btn--to-violet-500:hover .btn__inline-icon, .btn--to-violet-500.btn--activated .btn__inline-icon{
+  color: #000000 !important;
+}
+
+.btn--red-600 .btn__body, .btn--red-600 .btn__icon{
+  background-color: #d60d53;
+  color: #ffffff;
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(171, 10, 66);
+  color: #fff;
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(150, 9, 58);
+}
+
+.btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--red-600.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__body, .btn--to-red-600.btn--activated .btn__body{
+  background-color: #d60d53 !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__icon, .btn--to-red-600.btn--activated .btn__icon{
+  border-color: rgb(193, 12, 75) !important;
+  background-color: #d60d53 !important;
+}
+
+.btn--hoveractive.btn--to-red-600:hover .btn__inline-icon, .btn--to-red-600.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+.btn--brands-facebook .btn__body, .btn--brands-facebook .btn__icon{
+  background-color: #067ceb;
+  color: #ffffff;
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__body, .btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  background-color: rgb(5, 99, 188);
+  color: #fff;
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon{
+  border-color: rgb(4, 87, 165);
+}
+
+.btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon svg, .btn--brands-facebook.btn--hoveractive:not([class^="btn--to-"]):hover .btn__icon i{
+  color: #fff;
+  fill: #fff;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__body, .btn--to-brands-facebook.btn--activated .btn__body{
+  background-color: #067ceb !important;
+  color: #ffffff !important;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__icon, .btn--to-brands-facebook.btn--activated .btn__icon{
+  border-color: rgb(5, 112, 212) !important;
+  background-color: #067ceb !important;
+}
+
+.btn--hoveractive.btn--to-brands-facebook:hover .btn__inline-icon, .btn--to-brands-facebook.btn--activated .btn__inline-icon{
+  color: #ffffff !important;
+}
+
+/**
+ * Custom components
+*/
+
+.container--default{
+  max-width: 1200px;
+}
+
+.container--narrow {
+  margin: auto;
+  width: 882px;
+}
+
+.container--medium {
+  margin: auto;
+  max-width: 1300px;
+}
+
+.container--wide {
+  margin: auto;
+  max-width: 1400px;
+}
+
+.section-clip {
+  -webkit-clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
+          clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
+  margin-bottom: -3.2vw;
+}
+
+@media (min-width: 1200px) {
+
+.section-clip {
+    -webkit-clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
+            clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
+    margin-bottom: -4.2vw
+}
+  }
+
+.header-max-width {
+  max-width: 1340px !important;
+}
+
+.container {
+  @apply: mx-auto;
+  max-width: 1150px;
+}
+
+.grid-container{
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+  "left-side"
+  "content"
+  "right-side";
+  gap: 1rem;
+  max-width: 1150px;
+}
+
+@responsive {
+    @media (min-width: 1200px) {
+  .grid-container {
+      grid-template-columns: 240px 1fr 102px;
+      grid-template-areas:
+      "left-side content right-side";
+      margin-left: 10%
+  }
+    }
+}
+
+.grid-content {
+  grid-area: content;
+}
+
+.grid-full {
+  grid-column-start: left-side;;
+  grid-column-end: right-side;
+}
+
+.grid-left-side {
+  grid-area: left-side;
+}
+
+.grid-right-side {
+  grid-area: right-side;
+}
+
+.grid-content-with-right-side {
+  grid-column-start: content;
+  grid-column-end: right-side;
+}
+
+@responsive {
+  /* Removes default container padding from the element. */
+  /* @note: needs to be kept in sync with tailwind configuration */
+  .container-padding--zero {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+    @media (min-width: 1200px) {
+  .container-padding--zero {
+      margin-left: -2rem;
+      margin-right: -2rem
+  }
+    }
+
+  .container-padding--auto {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+.footer-section {
+  height: 981px;
+}
+
+.person-box-medium {
+  max-width: 485px;
+  width: 485px;
+}
+
+.person-box {
+  width: 520px;
+}
+
+.person-box-big {
+  max-width: 575px;
+  width: 100%;
+}
+
+.photo-header {
+  height: 36rem;
+}
+
+.simple-header-height {
+ height: 26rem;
+}
+
+.flag {
+  /* right margin makes space for flag stripe */
+  position: relative;
+  margin-right: 2.5rem;
+  display: inline-block;
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 2rem;
+  padding-right: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.flag:after{
+  position: absolute;
+}
+
+.flag:after{
+  height: 100%;
+}
+
+.flag:after{
+  width: 2.5rem;
+}
+
+.flag:after {
+    content: "";
+    left: 100%;
+    top: 0;
+    background: inherit;
+    -webkit-clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
+            clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
+  }
+
+.text-input-addon{
+  display: flex;
+  align-items: center;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(173 173 173 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 1.125rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(76 76 76 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+
+.text-input{
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  font-size: 1.125rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+
+  /* Fix FF text-input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+
+  min-width: 0px;
+}
+
+.text-input:hover:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(76 76 76 / var(--tw-border-opacity));
+}
+
+.text-input:active:not([disabled]):not([readonly]),.text-input:focus:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 168 / var(--tw-border-opacity));
+}
+
+.text-input::-moz-placeholder{
+  font-weight: 400;
+}
+
+.text-input::placeholder{
+  font-weight: 400;
+}
+
+.text-input::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-input::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-input[readonly],
+  .text-input[disabled]{
+  cursor: not-allowed;
+}
+
+.text-input[readonly],
+  .text-input[disabled]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
+}
+
+.text-input[readonly]::-moz-placeholder, .text-input[disabled]::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-input[readonly]::placeholder,.text-input[disabled]::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-input-addon--l{
+  border-right-width: 0px;
+}
+
+.text-input-addon--r{
+  border-left-width: 0px;
+}
+
+.text-input:hover:not([disabled]):not([readonly]) ~ .text-input-addon{
+  --tw-border-opacity: 1;
+  border-color: rgb(76 76 76 / var(--tw-border-opacity));
+}
+
+.text-input:focus:not([disabled]):not([readonly]) ~ .text-input-addon,
+.text-input:active:not([disabled]):not([readonly]) ~ .text-input-addon{
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 168 / var(--tw-border-opacity));
+}
+
+.text-input[readonly] ~ .text-input-addon,
+.text-input[disabled] ~ .text-input-addon{
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-input--has-addon-l.text-input{
+  border-left-width: 0px;
+}
+
+.text-input--has-addon-r.text-input{
+  border-right-width: 0px;
+}
+
+.select{
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.select:after{
+  position: absolute;
+}
+
+.select:after{
+  right: 0px;
+}
+
+.select:after{
+  padding-right: 0.75rem;
+}
+
+.select:after{
+  font-size: 1.3rem;
+}
+
+.select:after{
+  font-weight: 700;
+}
+
+.select:after{
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.select:after{
+  transition-duration: 200ms;
+}
+
+.select:after {
+    font-family: 'pirati-ui';
+    /* chevron down */
+    content: "\e925";
+  }
+
+.select__control{
+  width: 100%;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: 0px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(173 173 173 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  padding-left: 1rem;
+  padding-right: 2rem;
+  font-size: 1.125rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+
+  /* Fix FF input not adjusting it's width.
+   * See: https://stackoverflow.com/a/48326796/303184
+   */
+
+  min-width: 0px;
+}
+
+.select__control:hover:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(76 76 76 / var(--tw-border-opacity));
+}
+
+.select__control:active:not([disabled]):not([readonly]),.select__control:focus:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 168 / var(--tw-border-opacity));
+}
+
+.select__control::-moz-placeholder{
+  font-weight: 400;
+}
+
+.select__control::placeholder{
+  font-weight: 400;
+}
+
+.select__control::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.select__control::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.select__control[readonly],
+  .select__control[disabled]{
+  cursor: not-allowed;
+}
+
+.select__control[readonly],
+  .select__control[disabled]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
+}
+
+.select__control[readonly]::-moz-placeholder, .select__control[disabled]::-moz-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.select__control[readonly]::placeholder,.select__control[disabled]::placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.checkbox{
+  position: relative;
+  display: flex;
+}
+
+.checkbox input{
+  margin-right: 0.5rem;
+}
+
+.checkbox input{
+  height: 1.25rem;
+}
+
+.checkbox input{
+  width: 1.25rem;
+}
+
+.checkbox input{
+  flex-shrink: 0;
+}
+
+.checkbox input{
+  cursor: pointer;
+}
+
+.checkbox input{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.checkbox input{
+  border-width: 1px;
+}
+
+.checkbox input{
+  --tw-border-opacity: 1;
+  border-color: rgb(173 173 173 / var(--tw-border-opacity));
+}
+
+.checkbox input{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.checkbox input{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.checkbox input{
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.checkbox input{
+  transition-duration: 200ms;
+}
+
+.checkbox input:hover:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(76 76 76 / var(--tw-border-opacity));
+}
+
+.checkbox input:active,
+    .checkbox input:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 168 / var(--tw-border-opacity));
+}
+
+.checkbox input:checked{
+  border-color: transparent;
+}
+
+.checkbox input:checked{
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 125 168 / var(--tw-bg-opacity));
+}
+
+.checkbox input[disabled]{
+  cursor: not-allowed;
+}
+
+.checkbox label{
+  max-width: 32rem;
+}
+
+.checkbox label{
+  text-transform: uppercase;
+}
+
+.checkbox label{
+  line-height: 1.25;
+}
+
+.checkbox:after{
+  pointer-events: none;
+}
+
+.checkbox:after{
+  position: absolute;
+}
+
+.checkbox:after{
+  display: inline;
+}
+
+.checkbox:after {
+
+    content: "";
+    height: 5px;
+    width: 12px;
+    top: 6px;
+    left: 4px;
+
+    border-left: 2px solid #ffffff;
+    border-bottom: 2px solid #ffffff;
+    transform: rotate(-45deg);
+  }
+
+.radio{
+  position: relative;
+}
+
+.radio input{
+  margin-right: 0.5rem;
+}
+
+.radio input{
+  height: 1.25rem;
+}
+
+.radio input{
+  width: 1.25rem;
+}
+
+.radio input{
+  flex-shrink: 0;
+}
+
+.radio input{
+  cursor: pointer;
+}
+
+.radio input{
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
+.radio input{
+  border-radius: 9999px;
+}
+
+.radio input{
+  border-width: 1px;
+}
+
+.radio input{
+  --tw-border-opacity: 1;
+  border-color: rgb(173 173 173 / var(--tw-border-opacity));
+}
+
+.radio input{
+  --tw-bg-opacity: 1;
+  background-color: rgb(173 173 173 / var(--tw-bg-opacity));
+}
+
+.radio input{
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.radio input{
+  transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.radio input{
+  transition-duration: 200ms;
+}
+
+.radio input:hover:not([disabled]):not([readonly]){
+  --tw-border-opacity: 1;
+  border-color: rgb(76 76 76 / var(--tw-border-opacity));
+}
+
+.radio input:active,
+    .radio input:focus{
+  --tw-border-opacity: 1;
+  border-color: rgb(2 125 168 / var(--tw-border-opacity));
+}
+
+.radio input:checked{
+  border-color: transparent;
+}
+
+.radio input:checked{
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 125 168 / var(--tw-bg-opacity));
+}
+
+.radio input[disabled]{
+  cursor: not-allowed;
+}
+
+.radio label{
+  display: flex;
+}
+
+.radio label{
+  align-items: center;
+}
+
+.radio label{
+  line-height: 1.25;
+}
+
+.radio:after{
+  pointer-events: none;
+}
+
+.radio:after{
+  position: absolute;
+}
+
+.radio:after{
+  display: inline;
+}
+
+.radio:after{
+  height: 0.5rem;
+}
+
+.radio:after{
+  width: 0.5rem;
+}
+
+.radio:after{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.radio:after {
+
+    content: "";
+    /* Somehow, standard Tailwind `rounded-full` ends up not creating a perfect circle */
+    border-radius: 50%;
+    top: calc((1.25rem - 0.5rem) / 2);
+    left: calc((1.25rem - 0.5rem) / 2);
+  }
+
+.form-field--error .text-input,
+  .form-field--error .select__control,
+  .form-field--error .text-input ~ .text-input-addon{
+  --tw-border-opacity: 1;
+  border-color: rgb(214 13 83 / var(--tw-border-opacity));
+}
+
+.h-default{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.h-alt{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 0.96;
+}
+
+.h-allcaps{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  line-height: 1.25;
+}
+
+@responsive {
+  .head-alt-xl,
+  .content-block .head-alt-xl{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 5.3rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-lg,
+  .content-block .head-alt-lg{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-md,
+  .content-block .head-alt-md{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 2.45rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-base,
+  .content-block .head-alt-base{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-sm,
+  .content-block .head-alt-sm{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-xs,
+  .content-block .head-alt-xs{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+  .head-alt-2xs,
+  .content-block .head-alt-2xs{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+
+
+
+  .head-base,
+  .content-block .head-base{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-sm,
+  .content-block .head-sm{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-xs,
+  .content-block .head-xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+  .head-2xs,
+  .content-block .head-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.25;
+  }
+
+
+
+  .head-heavy-base,
+  .content-block .head-heavy-base{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-sm,
+  .content-block .head-heavy-sm{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.6rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-xs,
+  .content-block .head-heavy-xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.3rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .head-heavy-2xs,
+  .content-block .head-heavy-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+
+
+  .head-allcaps-2xs,
+  .content-block .head-allcaps-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-3xs,
+  .content-block .head-allcaps-3xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-4xs,
+  .content-block .head-allcaps-4xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: .875rem;
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+
+
+
+  .head-allcaps-heavy-2xs,
+  .content-block .head-allcaps-heavy-2xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-heavy-3xs,
+  .content-block .head-allcaps-heavy-3xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+
+  .head-allcaps-heavy-4xs,
+  .content-block .head-allcaps-heavy-4xs{
+    font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+    font-size: .875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    line-height: 1.25;
+  }
+}
+
+.header-clip {
+  -webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
+          clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
+}
+
+.head-xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1.75rem;
+}
+
+@media (min-width: 992px){
+
+  .head-xl{
+    font-size: 1.3rem;
+  }
+}
+
+.head-2xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.6rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 2rem;
+  letter-spacing: -0.01em;
+}
+
+.head-3xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.125rem;
+  text-transform: uppercase;
+  line-height: 1rem;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 1200px){
+
+  .head-3xl{
+    font-size: 1.875rem;
+    line-height: 2rem;
+  }
+}
+
+.head-4xl{
+  margin-bottom: 1.25rem;
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.3rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1.75rem;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 992px){
+
+  .head-4xl{
+    font-size: 2.45rem;
+    line-height: 2.5rem;
+  }
+}
+
+.head-7xl{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: -0.025em;
+}
+
+@media (min-width: 992px){
+
+  .head-7xl{
+    font-size: 5.3rem;
+  }
+}
+
+p{
+  font-size: .875rem;
+  line-height: 1.5rem;
+}
+
+@media (min-width: 992px){
+
+  p{
+    font-size: 1rem;
+  }
+}
+
+.vertical-time-line {
+  border-left: 1px solid green;
+}
+
+.header-carousel {
+  display: block;
+  margin: 0 auto;
+  position: relative;
+}
+
+.header-carousel .header-carousel--text{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+}
+
+.header-carousel .header-carousel--text{
+  font-size: 1.6rem;
+}
+
+.header-carousel .header-carousel--text{
+  text-transform: uppercase;
+}
+
+@media (min-width: 992px){
+
+  .header-carousel .header-carousel--text{
+    font-size: 5.3rem;
+  }
+}
+
+.header-carousel .header-carousel--text {
+    left: 10%;
+    max-width: 1200px;
+    position: absolute;
+    top: 20%;
+  }
+
+@media (min-width: 576px) {
+
+.header-carousel .header-carousel--text {
+      top: 35%
+  }
+    }
+
+@media (min-width: 992px) {
+
+.header-carousel .header-carousel--text {
+      top: 45%
+  }
+    }
+
+.header-carousel img {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    transition: all 800ms ease-in-out;
+    transform: scale(1.15, 1.15);
+    width: 100%;
+  }
+
+.header-carousel .slick-slide {
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+            clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
+  }
+
+.header-carousel .slick-active img {
+      transform: scale(1, 1);
+    }
+
+.header-carousel .slick-active .header-carousel--text {
+      -webkit-animation: right_to_left 500ms ease;
+              animation: right_to_left 500ms ease;
+    }
+
+@-webkit-keyframes right_to_left {
+    from {
+      left: 15%;
+    }
+    to {
+      left: 10%;
+    }
+  }
+
+@keyframes right_to_left {
+    from {
+      left: 15%;
+    }
+    to {
+      left: 10%;
+    }
+  }
+
+.header-carousel .slick-arrow {
+    font-size: 0;
+    position: absolute;
+    right: 10%;
+    top: 80%;
+    z-index: 10;
+  }
+
+@media (min-width: 992px) {
+
+.header-carousel .slick-arrow {
+      top: 60%
+  }
+    }
+
+.header-carousel .slick-arrow:before, .header-carousel .slick-arrow:after {
+      border-right: 2px solid white;
+      border-bottom: 2px solid white;
+      color: white;
+      content: '';
+      height: .8rem;
+      position: absolute;
+      width: .8rem;
+    }
+
+@media (min-width: 992px) {
+
+.header-carousel .slick-arrow:before, .header-carousel .slick-arrow:after {
+        height: 1rem;
+        width: 1rem
+    }
+      }
+
+.header-carousel .slick-arrow.slick-next {
+      transform: rotate(-45deg);
+    }
+
+.header-carousel .slick-arrow.slick-prev {
+      transform: rotate(135deg);
+    }
+
+.header-carousel .slick-dots {
+    color: white;
+    left: 5%;
+    position: absolute;
+    top: 60%;
+    z-index: 10;
+  }
+
+.header-carousel .slick-dots li {
+      border: 1px solid white;
+      border-radius: 50%;
+      height: 6px;
+      margin-bottom: 6px;
+      width: 6px;
+    }
+
+.header-carousel .slick-dots li.slick-active {
+        background-color: white;
+      }
+
+.header-carousel .slick-dots li button {
+        font-size: 0;
+      }
+
+.contact-box{
+  margin-right: 1rem;
+  display: flex;
+  height: 20rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 243 243 / var(--tw-border-opacity));
+  padding-left: 4rem;
+  padding-right: 4rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  text-align: center;
+  width: 280px;
+}
+
+.btn{
+  display: inline-block;
+  height: 2.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  line-height: 2.25rem;
+}
+
+.btn__slide__wrap {
+  overflow: hidden;
+  position: relative;
+}
+
+.btn__slide__wrap :first-child {
+    position: relative;
+    transition: all linear 0.25s;
+  }
+
+.btn__slide__wrap :last-child {
+    left: -100%;
+    position: absolute;
+    transition: all linear 0.25s;
+  }
+
+.btn__slide__wrap:hover :first-child {
+      transform: translateX(100%);
+    }
+
+.btn__slide__wrap:hover :last-child {
+      left: 0
+    }
+
+.switch{
+  display: inline-flex;
+}
+
+.switch__item{
+  margin-right: 0.5rem;
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 236 236 / var(--tw-bg-opacity));
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  text-align: center;
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.3rem;
+  font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.switch__item:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(173 173 173 / var(--tw-bg-opacity));
+}
+
+.switch__item:hover{
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+.switch__item.switch__item--active,
+  .switch__item.switch__item--active:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(146 210 219 / var(--tw-bg-opacity));
+}
+
+.footer-clip {
+    -webkit-clip-path: polygon(0 8.25%, 100% 0, 100% 100%, 0% 100%);
+            clip-path: polygon(0 8.25%, 100% 0, 100% 100%, 0% 100%);
+    /* TODO responsive */
+}
+
+.footer__container {
+    /* TODO user common container from container.pcss */
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 1416px;
+    padding: 2rem;
+}
+
+.brand-clip {
+  -webkit-clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+          clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%, 0% 50%);
+}
+
+.navbar-menu-link{
+  cursor: pointer;
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+  font-size: 1.125rem;
+  text-transform: uppercase;
+  line-height: 2;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.navbar-menu-link:hover{
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+.main-menu-items {
+  display: none;
+}
+
+#menuToggle:checked ~ .main-menu-items > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0px * var(--tw-space-x-reverse));
+  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+#menuToggle:checked ~ .main-menu-items {
+
+  display: grid;
+}
+
+.main-menu {
+  grid-template-areas:
+    "logo menutoggle"
+    "main main"
+    "external external";
+}
+
+.main-menu__logo {
+  grid-area: logo;
+}
+
+.main-menu__main {
+  grid-area: main;
+}
+
+.main-menu__main .menu-link{
+  cursor: pointer;
+}
+
+.main-menu__main .menu-link{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.main-menu__main .menu-link{
+  padding: 0.75rem;
+}
+
+.main-menu__main .menu-link{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+}
+
+.main-menu__main .menu-link{
+  text-transform: uppercase;
+}
+
+.main-menu__main .menu-link{
+  line-height: 2;
+}
+
+.main-menu__main .menu-link{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.main-menu__main .menu-link:hover{
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+@media (min-width: 1200px){
+
+  .main-menu__main .menu-link{
+    background-color: transparent;
+  }
+}
+
+@media (min-width: 1200px){
+
+  .main-menu__main .menu-link{
+    font-size: 1.125rem;
+  }
+}
+
+.main-menu__external{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  grid-area: external;
+}
+
+@media (min-width: 1200px) {
+  .main-menu-items {
+    display: flex !important;
+  }
+  .main-menu {
+    grid-template-areas: "logo main social external";
+    flex-wrap: nowrap;
+  }
+
+    .main-menu .main-menu__external{
+    background-color: transparent;
+  }
+
+    .main-menu .main-menu__external{
+    padding: 0px;
+  }
+
+    .main-menu .main-menu__external{
+    --tw-text-opacity: 1;
+    color: rgb(0 0 0 / var(--tw-text-opacity));
+  }
+}
+
+/**
+* This injects Tailwind's utility classes and any utility classes registered
+* by plugins.
+*/
+
+.absolute{
+  position: absolute;
+}
+
+.relative{
+  position: relative;
+}
+
+.col-span-4{
+  grid-column: span 4 / span 4;
+}
+
+.col-span-3{
+  grid-column: span 3 / span 3;
+}
+
+.col-span-2{
+  grid-column: span 2 / span 2;
+}
+
+.col-span-8{
+  grid-column: span 8 / span 8;
+}
+
+.col-start-2{
+  grid-column-start: 2;
+}
+
+.col-start-1{
+  grid-column-start: 1;
+}
+
+.col-end-13{
+  grid-column-end: 13;
+}
+
+.col-end-2{
+  grid-column-end: 2;
+}
+
+.col-end-4{
+  grid-column-end: 4;
+}
+
+.clear-both{
+  clear: both;
+}
+
+.m-3{
+  margin: 0.75rem;
+}
+
+.mx-auto{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-4{
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.mx-8{
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.mr-2{
+  margin-right: 0.5rem;
+}
+
+.mb-2{
+  margin-bottom: 0.5rem;
+}
+
+.mb-20{
+  margin-bottom: 5rem;
+}
+
+.mb-8{
+  margin-bottom: 2rem;
+}
+
+.mb-5{
+  margin-bottom: 1.25rem;
+}
+
+.mt-10{
+  margin-top: 2.5rem;
+}
+
+.mb-4{
+  margin-bottom: 1rem;
+}
+
+.mb-9{
+  margin-bottom: 2.25rem;
+}
+
+.mr-1{
+  margin-right: 0.25rem;
+}
+
+.mb-6{
+  margin-bottom: 1.5rem;
+}
+
+.mr-4{
+  margin-right: 1rem;
+}
+
+.mr-12{
+  margin-right: 3rem;
+}
+
+.mr-3{
+  margin-right: 0.75rem;
+}
+
+.mt-0{
+  margin-top: 0px;
+}
+
+.mb-0{
+  margin-bottom: 0px;
+}
+
+.mr-6{
+  margin-right: 1.5rem;
+}
+
+.mb-16{
+  margin-bottom: 4rem;
+}
+
+.mr-7{
+  margin-right: 1.75rem;
+}
+
+.mb-1{
+  margin-bottom: 0.25rem;
+}
+
+.mb-7{
+  margin-bottom: 1.75rem;
+}
+
+.mt-24{
+  margin-top: 6rem;
+}
+
+.mb-24{
+  margin-bottom: 6rem;
+}
+
+.mb-32{
+  margin-bottom: 8rem;
+}
+
+.mb-10{
+  margin-bottom: 2.5rem;
+}
+
+.ml-8{
+  margin-left: 2rem;
+}
+
+.mb-12{
+  margin-bottom: 3rem;
+}
+
+.ml-4{
+  margin-left: 1rem;
+}
+
+.mr-5{
+  margin-right: 1.25rem;
+}
+
+.mb-3{
+  margin-bottom: 0.75rem;
+}
+
+.mb-14{
+  margin-bottom: 3.5rem;
+}
+
+.mb-40{
+  margin-bottom: 10rem;
+}
+
+.mt-8{
+  margin-top: 2rem;
+}
+
+.mt-1{
+  margin-top: 0.25rem;
+}
+
+.mt-4{
+  margin-top: 1rem;
+}
+
+.block{
+  display: block;
+}
+
+.flex{
+  display: flex;
+}
+
+.grid{
+  display: grid;
+}
+
+.hidden{
+  display: none;
+}
+
+.h-16{
+  height: 4rem;
+}
+
+.h-full{
+  height: 100%;
+}
+
+.h-32{
+  height: 8rem;
+}
+
+.h-11{
+  height: 2.75rem;
+}
+
+.h-80{
+  height: 20rem;
+}
+
+.max-h-60{
+  max-height: 15rem;
+}
+
+.w-32{
+  width: 8rem;
+}
+
+.w-40{
+  width: 10rem;
+}
+
+.w-full{
+  width: 100%;
+}
+
+.w-60{
+  width: 15rem;
+}
+
+.w-44{
+  width: 11rem;
+}
+
+.w-80{
+  width: 20rem;
+}
+
+.w-12{
+  width: 3rem;
+}
+
+.w-11\/12{
+  width: 91.666667%;
+}
+
+.w-48{
+  width: 12rem;
+}
+
+.w-20{
+  width: 5rem;
+}
+
+.w-3\/4{
+  width: 75%;
+}
+
+.w-1\/2{
+  width: 50%;
+}
+
+.w-5\/12{
+  width: 41.666667%;
+}
+
+.w-16{
+  width: 4rem;
+}
+
+.w-7\/12{
+  width: 58.333333%;
+}
+
+.w-1\/12{
+  width: 8.333333%;
+}
+
+.w-4\/12{
+  width: 33.333333%;
+}
+
+.w-8\/12{
+  width: 66.666667%;
+}
+
+.max-w-xl{
+  max-width: 36rem;
+}
+
+.max-w-sm{
+  max-width: 24rem;
+}
+
+.max-w-xs{
+  max-width: 20rem;
+}
+
+.max-w-md{
+  max-width: 28rem;
+}
+
+.shrink-0{
+  flex-shrink: 0;
+}
+
+.transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}
+
+.resize{
+  resize: both;
+}
+
+.grid-flow-col{
+  grid-auto-flow: column;
+}
+
+.grid-cols-4{
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-12{
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
+.grid-cols-3{
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-rows-6{
+  grid-template-rows: repeat(6, minmax(0, 1fr));
+}
+
+.flex-col{
+  flex-direction: column;
+}
+
+.flex-wrap{
+  flex-wrap: wrap;
+}
+
+.items-start{
+  align-items: flex-start;
+}
+
+.items-end{
+  align-items: flex-end;
+}
+
+.items-center{
+  align-items: center;
+}
+
+.justify-start{
+  justify-content: flex-start;
+}
+
+.justify-end{
+  justify-content: flex-end;
+}
+
+.justify-center{
+  justify-content: center;
+}
+
+.justify-between{
+  justify-content: space-between;
+}
+
+.justify-around{
+  justify-content: space-around;
+}
+
+.gap-3{
+  gap: 0.75rem;
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-x-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-16 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(4rem * var(--tw-space-x-reverse));
+  margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.rounded-full{
+  border-radius: 9999px;
+}
+
+.border{
+  border-width: 1px;
+}
+
+.border-b{
+  border-bottom-width: 1px;
+}
+
+.border-grey-100{
+  --tw-border-opacity: 1;
+  border-color: rgb(243 243 243 / var(--tw-border-opacity));
+}
+
+.border-grey-150{
+  --tw-border-opacity: 1;
+  border-color: rgb(236 236 236 / var(--tw-border-opacity));
+}
+
+.border-violet-400{
+  --tw-border-opacity: 1;
+  border-color: rgb(132 0 72 / var(--tw-border-opacity));
+}
+
+.bg-black{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.bg-grey-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+
+.bg-grey-150{
+  --tw-bg-opacity: 1;
+  background-color: rgb(236 236 236 / var(--tw-bg-opacity));
+}
+
+.bg-green-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(76 169 113 / var(--tw-bg-opacity));
+}
+
+.bg-violet-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 0 72 / var(--tw-bg-opacity));
+}
+
+.bg-blue-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(2 125 168 / var(--tw-bg-opacity));
+}
+
+.bg-grey-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 243 243 / var(--tw-bg-opacity));
+}
+
+.bg-orange-300{
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 150 84 / var(--tw-bg-opacity));
+}
+
+.bg-cover{
+  background-size: cover;
+}
+
+.bg-no-repeat{
+  background-repeat: no-repeat;
+}
+
+.p-2{
+  padding: 0.5rem;
+}
+
+.p-6{
+  padding: 1.5rem;
+}
+
+.p-3{
+  padding: 0.75rem;
+}
+
+.p-0{
+  padding: 0px;
+}
+
+.p-4{
+  padding: 1rem;
+}
+
+.p-7{
+  padding: 1.75rem;
+}
+
+.p-1{
+  padding: 0.25rem;
+}
+
+.py-32{
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.px-1{
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-4{
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.px-3{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.py-4{
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.py-16{
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.px-7{
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
+.py-9{
+  padding-top: 2.25rem;
+  padding-bottom: 2.25rem;
+}
+
+.pt-16{
+  padding-top: 4rem;
+}
+
+.pt-5{
+  padding-top: 1.25rem;
+}
+
+.pb-5{
+  padding-bottom: 1.25rem;
+}
+
+.pt-3{
+  padding-top: 0.75rem;
+}
+
+.pt-10{
+  padding-top: 2.5rem;
+}
+
+.pt-40{
+  padding-top: 10rem;
+}
+
+.pt-24{
+  padding-top: 6rem;
+}
+
+.pb-4{
+  padding-bottom: 1rem;
+}
+
+.pt-12{
+  padding-top: 3rem;
+}
+
+.pb-2{
+  padding-bottom: 0.5rem;
+}
+
+.pt-32{
+  padding-top: 8rem;
+}
+
+.pb-52{
+  padding-bottom: 13rem;
+}
+
+.pt-8{
+  padding-top: 2rem;
+}
+
+.pt-14{
+  padding-top: 3.5rem;
+}
+
+.text-center{
+  text-align: center;
+}
+
+.text-right{
+  text-align: right;
+}
+
+.font-alt{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+}
+
+.font-condensed{
+  font-family: Roboto Condensed, Helvetica, Arial, sans-serif;
+}
+
+.text-sm{
+  font-size: .875rem;
+}
+
+.text-2xl{
+  font-size: 1.6rem;
+}
+
+.text-2xs{
+  font-size: .65rem;
+}
+
+.text-3xl{
+  font-size: 1.875rem;
+}
+
+.text-6xl{
+  font-size: 4rem;
+}
+
+.text-xs{
+  font-size: .75rem;
+}
+
+.text-7xl{
+  font-size: 5.3rem;
+}
+
+.text-4xl{
+  font-size: 2.45rem;
+}
+
+.text-8xl{
+  font-size: 6.25rem;
+}
+
+.text-base{
+  font-size: 1rem;
+}
+
+.text-xl{
+  font-size: 1.3rem;
+}
+
+.text-9xl{
+  font-size: 7.5rem;
+}
+
+.font-bold{
+  font-weight: 700;
+}
+
+.font-light{
+  font-weight: 300;
+}
+
+.uppercase{
+  text-transform: uppercase;
+}
+
+.leading-6{
+  line-height: 1.5rem;
+}
+
+.leading-9{
+  line-height: 2.25rem;
+}
+
+.leading-5{
+  line-height: 1.25rem;
+}
+
+.text-white{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-black{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.text-green-500{
+  --tw-text-opacity: 1;
+  color: rgb(79 196 159 / var(--tw-text-opacity));
+}
+
+.text-grey-200{
+  --tw-text-opacity: 1;
+  color: rgb(173 173 173 / var(--tw-text-opacity));
+}
+
+.text-turquoise-500{
+  --tw-text-opacity: 1;
+  color: rgb(37 165 185 / var(--tw-text-opacity));
+}
+
+.text-grey-300{
+  --tw-text-opacity: 1;
+  color: rgb(76 76 76 / var(--tw-text-opacity));
+}
+
+.text-turquoise-400{
+  --tw-text-opacity: 1;
+  color: rgb(27 192 227 / var(--tw-text-opacity));
+}
+
+.text-orange-300{
+  --tw-text-opacity: 1;
+  color: rgb(237 150 84 / var(--tw-text-opacity));
+}
+
+.text-violet-300{
+  --tw-text-opacity: 1;
+  color: rgb(141 65 95 / var(--tw-text-opacity));
+}
+
+.text-orange-250{
+  --tw-text-opacity: 1;
+  color: rgb(254 168 106 / var(--tw-text-opacity));
+}
+
+.underline{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+.shadow-sm{
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.btn.btn--fullwidth{
+  width: 100%;
+  max-width: 100%;
+}
+
+.btn.btn--fullwidth .btn__body-wrap{
+  width: 100%;
+  max-width: 100%;
+}
+
+.btn.btn--fullwidth .btn__body{
+  flex: 1;
+}
+
+.btn.btn--autowidth{
+  width: auto;
+}
+
+@media (min-width: 1200px) {
+
+.grid-container {
+      grid-template-columns: 240px 1fr 102px;
+      grid-template-areas:
+      "left-side content right-side";
+      margin-left: 10%
+  }
+    }
+
+/* Removes default container padding from the element. */
+
+/* @note: needs to be kept in sync with tailwind configuration */
+
+.head-alt-md,
+  .content-block .head-alt-md{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 2.45rem;
+  font-weight: 400;
+    line-height: 0.96;
+}
+
+.head-alt-base,
+  .content-block .head-alt-base{
+  font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.875rem;
+  font-weight: 400;
+    line-height: 0.96;
+}
+
+.slick-track[data-v-e4caeaf8]{position:relative;top:0;left:0;display:block;transform:translateZ(0)}
+
+.slick-track.slick-center[data-v-e4caeaf8]{margin-left:auto;margin-right:auto}
+
+.slick-track[data-v-e4caeaf8]:after,.slick-track[data-v-e4caeaf8]:before{display:table;content:""}
+
+.slick-track[data-v-e4caeaf8]:after{clear:both}
+
+.slick-loading .slick-track[data-v-e4caeaf8]{visibility:hidden}
+
+.slick-slide[data-v-e4caeaf8]{display:none;float:left;height:100%;min-height:1px}
+
+[dir=rtl] .slick-slide[data-v-e4caeaf8]{float:right}
+
+.slick-slide img[data-v-e4caeaf8]{display:block}
+
+.slick-slide.slick-loading img[data-v-e4caeaf8]{display:none}
+
+.slick-slide.dragging img[data-v-e4caeaf8]{pointer-events:none}
+
+.slick-initialized .slick-slide[data-v-e4caeaf8]{display:block}
+
+.slick-loading .slick-slide[data-v-e4caeaf8]{visibility:hidden}
+
+.slick-vertical .slick-slide[data-v-e4caeaf8]{display:block;height:auto;border:1px solid transparent}
+
+.slick-arrow.slick-hidden[data-v-21137603]{display:none}
+
+.slick-slider[data-v-3d1a4f76]{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[data-v-3d1a4f76]{position:relative;display:block;overflow:hidden;margin:0;padding:0;transform:translateZ(0)}
+
+.slick-list[data-v-3d1a4f76]:focus{outline:none}
+
+.slick-list.dragging[data-v-3d1a4f76]{cursor:pointer;cursor:hand}
+
+::-moz-selection {
+  color: #ffffff;
+  background: #3e8793;
+}
+
+::selection {
+  color: #ffffff;
+  background: #3e8793;
+}
+
+:root {
+  font-size: 16px;
+}
+
+body{
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 1rem;
+}
+
+a:hover{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+a.icon-link:hover{
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+a.icon-link:hover span{
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+
+/* Hide vue templates before rendering */
+
+[v-cloak]{
+  display: none;
+}
+
+.copyleft {
+  transform: matrix(-1, 0, 0, 1, 0, 0) !important;
+}
+
+.inline-block-nogap {
+  /* Avoid gaps between inline-block elements */
+  font-size: 0;
+}
+
+/* auto-size iframe according to aspect ratio while keeping the 100% height */
+
+.iframe-container{
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+}
+
+.iframe-container iframe{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+}
+
+.hover\:bg-black:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.hover\:no-underline:hover{
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+
+@media (min-width: 576px){
+
+  .btn.sm\:btn--autowidth{
+    width: auto;
+  }
+}
+
+@media (min-width: 768px){
+
+  .md\:col-span-1{
+    grid-column: span 1 / span 1;
+  }
+
+  .md\:col-span-2{
+    grid-column: span 2 / span 2;
+  }
+
+  .md\:mr-1{
+    margin-right: 0.25rem;
+  }
+
+  .md\:mt-0{
+    margin-top: 0px;
+  }
+
+  .md\:w-1\/3{
+    width: 33.333333%;
+  }
+
+  .md\:flex-row{
+    flex-direction: row;
+  }
+
+  .md\:head-alt-lg,
+  .content-block .md\:head-alt-lg{
+    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
+    font-size: 4rem;
+    font-weight: 400;
+    line-height: 0.96;
+  }
+}
+
+@media (min-width: 992px){
+
+  .lg\:mb-12{
+    margin-bottom: 3rem;
+  }
+
+  .lg\:mb-10{
+    margin-bottom: 2.5rem;
+  }
+
+  .lg\:mr-11{
+    margin-right: 2.75rem;
+  }
+
+  .lg\:mb-8{
+    margin-bottom: 2rem;
+  }
+
+  .lg\:mb-20{
+    margin-bottom: 5rem;
+  }
+
+  .lg\:mb-16{
+    margin-bottom: 4rem;
+  }
+
+  .lg\:mb-28{
+    margin-bottom: 7rem;
+  }
+
+  .lg\:mb-24{
+    margin-bottom: 6rem;
+  }
+
+  .lg\:w-1\/2{
+    width: 50%;
+  }
+
+  .lg\:w-7\/12{
+    width: 58.333333%;
+  }
+
+  .lg\:w-5\/12{
+    width: 41.666667%;
+  }
+
+  .lg\:w-1\/4{
+    width: 25%;
+  }
+
+  .lg\:max-w-lg{
+    max-width: 32rem;
+  }
+
+  .lg\:py-36{
+    padding-top: 9rem;
+    padding-bottom: 9rem;
+  }
+
+  .lg\:pb-8{
+    padding-bottom: 2rem;
+  }
+
+  .lg\:text-base{
+    font-size: 1rem;
+  }
+}
+
+@media (min-width: 1200px){
+
+  .xl\:absolute{
+    position: absolute;
+  }
+
+  .xl\:z-50{
+    z-index: 50;
+  }
+
+  .xl\:col-span-1{
+    grid-column: span 1 / span 1;
+  }
+
+  .xl\:col-span-3{
+    grid-column: span 3 / span 3;
+  }
+
+  .xl\:mb-20{
+    margin-bottom: 5rem;
+  }
+
+  .xl\:mt-8{
+    margin-top: 2rem;
+  }
+
+  .xl\:mb-6{
+    margin-bottom: 1.5rem;
+  }
+
+  .xl\:mb-28{
+    margin-bottom: 7rem;
+  }
+
+  .xl\:mb-0{
+    margin-bottom: 0px;
+  }
+
+  .xl\:mb-32{
+    margin-bottom: 8rem;
+  }
+
+  .xl\:block{
+    display: block;
+  }
+
+  .xl\:flex{
+    display: flex;
+  }
+
+  .xl\:hidden{
+    display: none;
+  }
+
+  .xl\:h-screen{
+    height: 100vh;
+  }
+
+  .xl\:w-full{
+    width: 100%;
+  }
+
+  .xl\:justify-end{
+    justify-content: flex-end;
+  }
+
+  .xl\:gap-5{
+    gap: 1.25rem;
+  }
+
+  .xl\:bg-transparent{
+    background-color: transparent;
+  }
+
+  .xl\:p-6{
+    padding: 1.5rem;
+  }
+
+  .xl\:pt-0{
+    padding-top: 0px;
+  }
+
+  .xl\:duration-200{
+    transition-duration: 200ms;
+  }
 }

main/templates/main/main_home_page.html

 {% extends "main/base.html" %}
 
 {% block content %}
+  <main role="main">
+  <div class="__js-root">
+    <ui-header-carousel></ui-header-carousel>
+  </div>
+</main>
+
 {% endblock %}