@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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;
  -moz-padding-start: 0px;
  -webkit-padding-start: 0px;
}

/* 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;
}

* {
  box-sizing: border-box;
}

.no-select, button, .button {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */ /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}

/* ----------------------------------------------------------------------------------------------------

Super Form Reset

A couple of things to watch out for:

- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs

----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  /* Browsers have different default form fonts */
  font-size: 13px;
  font-family: Arial;
}

/* Remove the stupid outer glow in Webkit */
input:focus {
  outline: 0;
}

/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea {
  box-sizing: content-box;
}

/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select {
  box-sizing: border-box;
}

/* Text Inputs
-----------------------------------------------*/
/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio] {
  width: 13px;
  height: 13px;
}

/* File Uploads
-----------------------------------------------*/
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
  display: none;
}

/* Buttons
-----------------------------------------------*/
button,
input[type=reset],
input[type=button],
input[type=submit] {
  /* Fix IE7 display bug */
  overflow: visible;
  width: auto;
}

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button {
  padding: 0;
  border: 0;
  background: none;
}

/* Textarea
-----------------------------------------------*/
textarea {
  /* Move the label to the top */
  vertical-align: top;
  /* Turn off scroll bars in IE unless needed */
  overflow: auto;
}

/* Selects
-----------------------------------------------*/
select[multiple] {
  /* Move the label to the top */
  vertical-align: top;
}

.-font-sans, h5, h3, h1, .-font-body, select, .-reset-type, input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea, label, body, html, .-font-ui, button, .button {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
}

.-font-serif, b, .-font-bold, strong, h4, h2 {
  font-family: minion-pro-display, serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

.-font-body, select, .-reset-type, input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea, label, body, html, .-font-ui, button, .button {
  width: 300;
}

body, html {
  font-size: 23px;
  line-height: 125%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  position: relative;
  bottom: 0.1em;
  -webkit-hyphens: none;
          hyphens: none;
  line-height: 100%;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  letter-spacing: -0.05em;
}

h2 {
  font-style: italic;
  font-size: 3rem;
}

h3 {
  -webkit-hyphens: none;
          hyphens: none;
  font-size: 2rem;
  font-weight: 300;
}

h4 {
  font-style: italic;
  font-size: 1.5rem;
}

h5 {
  font-weight: 900;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

@media (orientation: portrait) {
  body, html {
    font-size: 18px;
  }
  h1 {
    font-size: 20vw;
    word-wrap: break-word;
    -webkit-hyphens: auto !important;
            hyphens: auto !important;
  }
  h2 {
    font-size: 10vw;
  }
}
.-font-xxxl {
  font-size: 2rem;
  line-height: 100%;
}

.-font-xl {
  font-size: 1.75rem;
  line-height: 133%;
  font-weight: 200;
}

.-font-l {
  font-size: 1.25rem;
  line-height: 133%;
}

.-font-m, select, .-reset-type, input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea, label, button, .button {
  font-size: 1rem;
  line-height: 133%;
}

.-font-s {
  font-size: 0.75rem;
  line-height: 133%;
}

.-all-caps {
  text-transform: uppercase;
}

b, .-font-bold, strong {
  font-style: italic;
  font-size: 1.2em !important;
}

p a {
  text-decoration: underline;
}

a {
  color: var(--col-accent);
  text-decoration: none;
}

span {
  white-space: nowrap;
}

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

.-text-center, footer .contact .info {
  text-align: center;
}

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

code {
  background-color: var(--col-main);
  color: var(--col-bg);
}

:root {
  --col-accent: gray;
}

.-apply-theme, .-theme-accent, .-theme-off-light, .-theme-light, .-theme-dark {
  background: var(--col-bg);
  color: var(--col-main);
  stroke: var(--col-main);
}

.-apply-main-color {
  color: var(--col-main);
  stroke: var(--col-main);
}

.-invert-theme {
  background: var(--col-main);
  color: var(--col-bg);
  stroke: var(--col-bg);
}

.-fx-exclusion {
  mix-blend-mode: exclusion;
}

.-bg-off {
  background: var(--col-off-bg);
}

.-bg-accent {
  background: gray;
}

.-bg-debug {
  background: rgba(255, 204, 0, 0.2666666667);
}

.-bg-warning {
  background: #FFBB00;
}

.-bg-error {
  background: #FF0222;
}

.-col-warning {
  color: #FFBB00;
  stroke: #FFBB00;
}

.-col-error {
  color: #FF0222;
  stroke: #FF0222;
}

.-col-neutral {
  color: #303336;
}

.-col-main {
  color: var(--col-main);
  stroke: var(--col-main);
}

.-col-invert {
  color: var(--col-bg);
  stroke: var(--col-bg);
}

.-theme-dark {
  --col-main:white;
  --col-bg: black;
  --col-off-bg: #233;
}

.-theme-light {
  --col-main: black;
  --col-bg: white;
  --col-off-bg: #eee;
}

.-theme-off-light {
  --col-main: black;
  --col-bg: #eee;
  --col-off-bg: white;
}

.-theme-accent {
  --col-main: white;
  --col-bg: gray;
  --col-off-bg: #eee;
}

.-col-accent {
  color: var(--col-accent);
  stroke: var(--col-accent);
}

.-space-xxl {
  margin-top: 16rem !important;
}

.-space-xl, footer .contact {
  margin-top: 8rem !important;
}

.-space-l, footer .newsletter {
  margin-top: 4rem !important;
}

.-space, .space-m {
  margin-top: 1rem !important;
}

.-space-s {
  margin-top: 0.5rem !important;
}

.-left-50 {
  margin-left: 50%;
}

.container, footer .newsletter, footer .contact {
  position: relative;
  width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}
@media (orientation:portrait) {
  .container, footer .newsletter, footer .contact {
    width: calc(100% - 1rem);
  }
}
.container.-xl, footer .-xl.newsletter, footer .-xl.contact {
  max-width: 1440px;
}
.container.-l, footer .newsletter, footer .contact {
  max-width: 1152px;
}
.container.-m, footer .-m.newsletter, footer .-m.contact {
  max-width: 800px;
}
.container.-s, footer .-s.newsletter, footer .-s.contact {
  max-width: 540px;
}

.-pad-xl {
  padding: 8rem;
}

.-pad-l {
  padding: 4rem;
}

.-pad, footer .contact .info, code,
.-pad-m {
  padding: 1rem;
}

.-pad-s {
  padding: 0.5rem;
}

.-pad-xs {
  padding: 2px;
}

.-pad-horiz {
  padding: 0 1rem;
}

.-absolute {
  position: absolute;
}

.-relative {
  position: relative;
}

.-fixed {
  position: fixed;
}

.-z-over-top {
  z-index: 200;
}

.-z-top {
  z-index: 100;
}

.-z-mid {
  z-index: 50;
}

.-no-flex, .-w-25, .-w-50, .-w-75, .-w-100 {
  flex: 0 1 auto !important;
}

.-size-100 {
  width: 100%;
  height: 100%;
}

.-w-100 {
  width: 100%;
}

.-h-100 {
  height: 100%;
}

.-w-75 {
  width: 75%;
}

.-h-75 {
  height: 75%;
}

.-w-50 {
  width: 50%;
}

.-h-50 {
  height: 50%;
}

.-w-25 {
  width: 25%;
}

.-h-25 {
  height: 25%;
}

.-vsize-100 {
  width: 100vw;
  height: 100vh;
}

.-vw-100 {
  width: 100vw;
}

.-vh-100 {
  height: 100vh;
}

.-vw-75 {
  width: 75vw;
}

.-vh-75 {
  height: 75vh;
}

.-vw-50 {
  width: 50vw;
}

.-vh-50 {
  height: 50vh;
}

.-vw-25 {
  width: 25vw;
}

.-vh-25 {
  height: 25vh;
}

.debug {
  border: 1px solid gold;
}

hr {
  border-top: 1px solid var(--col-accent);
}

.-aspect-1x1 {
  padding-bottom: 100%;
}

.-aspect-2x1 {
  padding-bottom: 50%;
}

.-aspect-3x2 {
  padding-bottom: 66.66%;
}

.-aspect-4x3 {
  padding-bottom: 75%;
}

.-aspect-16x9 {
  padding-bottom: 56.25%;
}

.-aspect-4x5 {
  padding-bottom: 125%;
}

.-aspect-3x4 {
  padding-bottom: 133%;
}

.-img-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.-round-corners {
  border-radius: 4px;
  overflow: hidden;
}

.-round {
  border-radius: 50%;
}

.-blend-multiply {
  mix-blend-mode: multiply;
}

.gelatine {
  animation: gelatine 0.5s infinite;
}

@keyframes gelatine {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
.spin {
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.elastic-spin {
  animation: elastic-spin 1s infinite ease;
}

@keyframes elastic-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(720deg);
  }
}
.pulse {
  animation: pulse 1s infinite ease-in-out alternate;
}

@keyframes pulse {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1.2);
  }
}
.flash {
  animation: flash 500ms ease infinite alternate;
}

@keyframes flash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hithere {
  animation: hithere 1s ease infinite;
}

@keyframes hithere {
  30% {
    transform: scale(1.2);
  }
  40%, 60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.grow {
  animation: grow 2s ease infinite;
}

@keyframes grow {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.fade-in {
  animation: fade-in 2s linear infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-out {
  animation: fade-out 2s linear infinite;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.bounce {
  animation: bounce 2s ease infinite;
}

@keyframes bounce {
  70% {
    transform: translateY(0%);
  }
  80% {
    transform: translateY(-15%);
  }
  90% {
    transform: translateY(0%);
  }
  95% {
    transform: translateY(-7%);
  }
  97% {
    transform: translateY(0%);
  }
  99% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(0);
  }
}
.bounce2 {
  animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
.shake {
  animation: shake 1s ease infinite;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}
.flip {
  backface-visibility: visible !important;
  animation: flip 1.5s ease;
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }
  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }
  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }
  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}
.swing {
  transform-origin: top center;
  animation: swing 2s ease infinite;
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.wobble {
  animation: wobble 2s ease infinite;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}
.fade-in-down {
  animation: fade-in-down 2s ease infinite;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-left {
  animation: fade-in-left 2s ease infinite;
}

@keyframes fade-in-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-out-down {
  animation: fade-out-down 2s ease infinite;
}

@keyframes fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
.fade-out-right {
  animation: fade-out-right 2s ease infinite;
}

@keyframes fade-out-right {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}
.bounce-in {
  animation: bounce-in 2s ease infinite;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.bounce-in-right {
  animation: bounce-in-right 2s ease infinite;
}

@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}
.bounce-out {
  animation: bounce-out 2s ease infinite;
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.bounce-out-down {
  animation: bounce-out-down 2s ease infinite;
}

@keyframes bounce-out-down {
  0% {
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
.rotate-in-down-left {
  animation: rotate-in-down-left 2s ease infinite;
}

@keyframes rotate-in-down-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.rotate-in-up-left {
  animation: rotate-in-up-left 2s ease infinite;
}

@keyframes rotate-in-up-left {
  0% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }
}
.hinge {
  animation: hinge 2s ease infinite;
}

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  80% {
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(700px);
    opacity: 0;
  }
}
.roll-in {
  animation: roll-in 2s ease infinite;
}

@keyframes roll-in {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}
.roll-out {
  animation: roll-out 2s ease infinite;
}

@keyframes roll-out {
  0% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }
}
button, .button {
  text-decoration: none;
  padding: 0.5rem;
  cursor: pointer;
  transition: transform 250ms, background-color 250ms;
}
button:focus:not(.-in-group):not(.-menu), .button:focus:not(.-in-group):not(.-menu) {
  transform: translateY(4px);
  text-decoration: none;
}
button.-in-group, .button.-in-group {
  flex: 1;
}
button span, .button span {
  white-space: nowrap;
}
button span, button svg, .button span, .button svg {
  pointer-events: none;
}
button[disabled], .button[disabled] {
  opacity: 0.33;
  pointer-events: none;
}
button.-selected:not(.-active-selected), .button.-selected:not(.-active-selected) {
  pointer-events: none;
}
button > *:not(:first-child), .button > *:not(:first-child) {
  margin-left: 0.5rem;
}
button.-reverse, .button.-reverse {
  flex-direction: row-reverse;
}
button.-reverse > *:not(:first-child), .button.-reverse > *:not(:first-child) {
  margin-left: 0;
  margin-right: 0.5rem;
}
button.-primary, .button.-primary {
  width: 100%;
  padding: 0 1rem;
  background-color: var(--col-main);
  color: var(--col-bg);
  stroke: var(--col-bg);
}
button.-primary:not(.-in-group), .button.-primary:not(.-in-group) {
  border-radius: 4px;
}
button.-primary:hover, .button.-primary:hover {
  background: var(--col-accent);
}
button.-primary.-selected, .button.-primary.-selected {
  background: var(--col-accent);
}
button.-secondary, .button.-secondary {
  width: 100%;
  color: var(--col-main);
  stroke: var(--col-main);
}
button.-secondary:not(.-in-group), .button.-secondary:not(.-in-group) {
  box-shadow: inset 0 0 0 1px var(--col-main);
  border-radius: 4px;
}
button.-secondary:hover, .button.-secondary:hover {
  color: var(--col-accent);
  stroke: var(--col-accent);
  box-shadow: inset 0 0 0 1px var(--col-accent);
}
button.-secondary.-selected, .button.-secondary.-selected {
  background-color: var(--col-accent);
  color: var(--col-bg);
  stroke: var(--col-bg);
}
button.-secondary.-in-group, .button.-secondary.-in-group {
  box-shadow: none;
}
button.-menu, .button.-menu {
  padding: 0.5rem;
  text-transform: lowercase;
}
button.-menu > *:not(:first-child), .button.-menu > *:not(:first-child) {
  margin-left: 0.5rem;
}
button.-menu.-selected, button.-menu:hover, .button.-menu.-selected, .button.-menu:hover {
  background: var(--col-main);
  color: var(--col-bg);
  stroke: var(--col-bg);
}
button:not(.-primary):not(.-secondary):not(.-menu).-selected, .button:not(.-primary):not(.-secondary):not(.-menu).-selected {
  background-color: var(--col-main);
  color: var(--col-bg);
  stroke: var(--col-bg);
  border-radius: 4px;
}

.button-group.-joined, cs-button-group.-joined {
  overflow: hidden;
  border-radius: 4px;
}
.button-group.-joined.-primary cs-button:not(:first-child), cs-button-group.-joined.-primary cs-button:not(:first-child) {
  margin-left: 1px;
}
.button-group.-joined.-inline, button.button-group.-joined, .button-group.-joined.button, cs-button-group.-joined.-inline, cs-button-group.-joined.button {
  display: inline-flex !important;
}
.button-group.-joined.-secondary, cs-button-group.-joined.-secondary {
  box-shadow: inset 0 0 0 1px var(--col-main);
}
.button-group.-joined.-secondary cs-button:not(:first-child), cs-button-group.-joined.-secondary cs-button:not(:first-child) {
  border-left: 1px solid var(--col-main);
}
.button-group.-joined:not(.-primary):not(.-secondary) cs-button, cs-button-group.-joined:not(.-primary):not(.-secondary) cs-button {
  padding: 0.5rem 1rem;
}
.button-group.-joined:not(.-primary):not(.-secondary) cs-button:not(:first-child), cs-button-group.-joined:not(.-primary):not(.-secondary) cs-button:not(:first-child) {
  margin-left: 1rem;
}

label {
  margin-bottom: 0.5rem;
  width: 100%;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=url],
textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: var(--col-off-bg);
  border: 1px solid var(--col-off-bg);
  border-radius: 4px;
  color: var(--col-main);
}
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus {
  border: 1px solid gray;
}
input[type=text]:disabled, input[type=text][readonly],
input[type=email]:disabled,
input[type=email][readonly],
input[type=number]:disabled,
input[type=number][readonly],
input[type=password]:disabled,
input[type=password][readonly],
input[type=search]:disabled,
input[type=search][readonly],
input[type=url]:disabled,
input[type=url][readonly],
textarea:disabled,
textarea[readonly] {
  opacity: 0.5;
  border: 1px solid var(--col-off-bg);
}
input[type=text]:invalid:focus, input[type=text].-invalid:focus,
input[type=email]:invalid:focus,
input[type=email].-invalid:focus,
input[type=number]:invalid:focus,
input[type=number].-invalid:focus,
input[type=password]:invalid:focus,
input[type=password].-invalid:focus,
input[type=search]:invalid:focus,
input[type=search].-invalid:focus,
input[type=url]:invalid:focus,
input[type=url].-invalid:focus,
textarea:invalid:focus,
textarea.-invalid:focus {
  border: 1px solid #FF0222;
}

textarea {
  resize: vertical;
  line-height: 150%;
}
textarea::-moz-placeholder {
  color: grey;
}
textarea::placeholder {
  color: grey;
}

select {
  display: block;
  color: var(--col-main);
  line-height: 120%;
  height: 52px;
  padding: 0 1rem;
  width: 100%;
  max-width: 50ch;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--col-off-bg);
  border-radius: 4px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--col-off-bg);
  color: var(--col-main);
  /* Support for rtl text, explicit support for Arabic and Hebrew */
}
select:focus {
  border: 1px solid gray;
  outline: none;
}
select:disabled {
  opacity: 0.5;
}
select option {
  font-weight: normal;
}
select *[dir=rtl] select, select :root:lang(ar) select, select :root:lang(iw) select {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(12, 1fr);
}
.grid > * {
  grid-column-start: span var(--span);
}
@media (max-width:500px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

ul {
  list-style-position: inside;
  width: 100%;
}
ul.-divide > * {
  border-top: 1px solid var(--col-main);
  padding: 0.5rem 0;
}
ul.-divide > *:last-child {
  border-bottom: 1px solid var(--col-main);
}
ul.-gap > *:not(:first-child), footer ul.newsletter > *:not(:first-child), footer ul.slogan > *:not(:first-child), main .text ul.jedinstvo > *:not(:first-child), main .text ul.krug > *:not(:first-child), main .text ul.text-wrapper > *:not(:first-child) {
  margin-top: 1rem;
}
ul.-gap-s > *:not(:first-child) {
  margin-top: 0.5rem;
}
ul[disc] {
  list-style-type: disc;
}
ul[arrow] {
  list-style-type: "→ ";
}
ul li p {
  max-width: none;
}
ul li p span {
  display: inline-block;
}

/* Common for both horizontal and vertical flex layouts */
.flex-h, footer .newsletter, footer .contact, footer .slogan, main, button, .button, .button-group.-joined, cs-button-group.-joined, .flex-v, footer, main .photos, main .text .jedinstvo, main .text .krug, main .text .text-wrapper {
  --gap: 0;
  display: flex;
}
.flex-h.-reverse, footer .-reverse.newsletter, footer .-reverse.contact, footer .-reverse.slogan, main.-reverse, button.-reverse, .-reverse.button, .-reverse.button-group.-joined, cs-button-group.-reverse.-joined, .flex-v.-reverse, footer.-reverse, main .-reverse.photos, main .text .-reverse.jedinstvo, main .text .-reverse.krug, main .text .-reverse.text-wrapper {
  flex-direction: row-reverse;
}
.flex-h.-gap, footer .newsletter, footer .-gap.contact, footer .slogan, main.-gap, button.-gap, .-gap.button, .-gap.button-group.-joined, footer .button-group.-joined.newsletter, footer .button-group.-joined.slogan, cs-button-group.-gap.-joined, footer cs-button-group.-joined.newsletter, footer cs-button-group.-joined.slogan, .flex-v.-gap, footer.-gap, main .-gap.photos, main .text .jedinstvo, main .text .krug, main .text .text-wrapper {
  --gap: 1rem;
}
.flex-h.-gap-xl, footer .-gap-xl.newsletter, footer .-gap-xl.contact, footer .-gap-xl.slogan, main.-gap-xl, button.-gap-xl, .-gap-xl.button, .-gap-xl.button-group.-joined, cs-button-group.-gap-xl.-joined, .flex-v.-gap-xl, footer.-gap-xl, main .-gap-xl.photos, main .text .-gap-xl.jedinstvo, main .text .-gap-xl.krug, main .text .-gap-xl.text-wrapper {
  --gap: 8rem;
}
.flex-h.-gap-l, footer .-gap-l.newsletter, footer .-gap-l.contact, footer .-gap-l.slogan, main.-gap-l, button.-gap-l, .-gap-l.button, .-gap-l.button-group.-joined, cs-button-group.-gap-l.-joined, .flex-v.-gap-l, footer.-gap-l, main .-gap-l.photos, main .text .-gap-l.jedinstvo, main .text .-gap-l.krug, main .text .-gap-l.text-wrapper {
  --gap: 4rem;
}
.flex-h.-gap-s, footer .-gap-s.newsletter, footer .-gap-s.contact, footer .-gap-s.slogan, main.-gap-s, button.-gap-s, .-gap-s.button, .-gap-s.button-group.-joined, cs-button-group.-gap-s.-joined, .flex-v.-gap-s, footer.-gap-s, main .-gap-s.photos, main .text .-gap-s.jedinstvo, main .text .-gap-s.krug, main .text .-gap-s.text-wrapper {
  --gap: 0.5rem;
}
.flex-h.-space-between, footer .-space-between.newsletter, footer .-space-between.contact, footer .-space-between.slogan, main.-space-between, button.-space-between, .-space-between.button, .-space-between.button-group.-joined, cs-button-group.-space-between.-joined, .flex-v.-space-between, footer.-space-between, main .-space-between.photos, main .text .-space-between.jedinstvo, main .text .-space-between.krug, main .text .-space-between.text-wrapper {
  justify-content: space-between;
}
.flex-h.-space-around, footer .-space-around.newsletter, footer .-space-around.contact, footer .-space-around.slogan, main.-space-around, button.-space-around, .-space-around.button, .-space-around.button-group.-joined, cs-button-group.-space-around.-joined, .flex-v.-space-around, footer.-space-around, main .-space-around.photos, main .text .-space-around.jedinstvo, main .text .-space-around.krug, main .text .-space-around.text-wrapper {
  justify-content: space-around;
}
.flex-h.-justify-center, footer .-justify-center.newsletter, footer .-justify-center.contact, footer .-justify-center.slogan, main.-justify-center, .-justify-center.button-group.-joined, footer.button-group.-joined, cs-button-group.-justify-center.-joined, button, button.button-group.-joined, .button, .button-group.-joined.button, cs-button-group.-joined.button, .flex-v.-justify-center, footer, main .-justify-center.photos, main footer.photos, main .text .-justify-center.jedinstvo, main .text footer.jedinstvo, main .text .-justify-center.krug, main .text footer.krug, main .text .-justify-center.text-wrapper, main .text footer.text-wrapper {
  justify-content: center;
}
.flex-h.-justify-start, footer .-justify-start.newsletter, footer .-justify-start.contact, footer .-justify-start.slogan, main.-justify-start, button.-justify-start, .-justify-start.button, .-justify-start.button-group.-joined, cs-button-group.-justify-start.-joined, button.-menu, button.button-group.-joined.-menu, .button.-menu, .flex-v.-justify-start, footer.-justify-start, main .-justify-start.photos, main .text .-justify-start.jedinstvo, main .text .-justify-start.krug, main .text .-justify-start.text-wrapper {
  justify-content: flex-start;
}
.flex-h.-justify-end, footer .-justify-end.newsletter, footer .-justify-end.contact, footer .-justify-end.slogan, main.-justify-end, button.-justify-end, .-justify-end.button, .-justify-end.button-group.-joined, cs-button-group.-justify-end.-joined, .flex-v.-justify-end, footer.-justify-end, main .-justify-end.photos, main .text .-justify-end.jedinstvo, main .text .-justify-end.krug, main .text .-justify-end.text-wrapper {
  justify-content: flex-end;
}
.flex-h.-align-stretch, footer .-align-stretch.newsletter, footer .-align-stretch.contact, footer .-align-stretch.slogan, main.-align-stretch, button.-align-stretch, .-align-stretch.button, .-align-stretch.button-group.-joined, main .button-group.-joined.photos, cs-button-group.-align-stretch.-joined, main cs-button-group.-joined.photos, .flex-v.-align-stretch, footer.-align-stretch, main .photos, main .text .-align-stretch.jedinstvo, main .text .jedinstvo.photos, main .text .-align-stretch.krug, main .text .krug.photos, main .text .-align-stretch.text-wrapper, main .text .text-wrapper.photos {
  align-items: stretch;
}
.flex-h.-align-center, footer .-align-center.newsletter, footer .-align-center.contact, footer .slogan, main.-align-center, .-align-center.button-group.-joined, footer .button-group.-joined.slogan, footer.button-group.-joined, cs-button-group.-align-center.-joined, footer cs-button-group.-joined.slogan, button, button.button-group.-joined, .button, .button-group.-joined.button, cs-button-group.-joined.button, .flex-v.-align-center, footer, main .-align-center.photos, main footer.photos, main .text .-align-center.jedinstvo, main .text footer .jedinstvo.slogan, footer main .text .jedinstvo.slogan, main .text footer.jedinstvo, main .text .-align-center.krug, main .text footer .krug.slogan, footer main .text .krug.slogan, main .text footer.krug, main .text .-align-center.text-wrapper, main .text footer .text-wrapper.slogan, footer main .text .text-wrapper.slogan, main .text footer.text-wrapper {
  align-items: center;
}
.flex-h.-align-start, footer .-align-start.newsletter, footer .-align-start.contact, footer .-align-start.slogan, main.-align-start, button.-align-start, .-align-start.button, .-align-start.button-group.-joined, cs-button-group.-align-start.-joined, .flex-v.-align-start, footer.-align-start, main .-align-start.photos, main .text .-align-start.jedinstvo, main .text .-align-start.krug, main .text .-align-start.text-wrapper {
  align-items: flex-start;
}
.flex-h.-align-end, footer .-align-end.newsletter, footer .-align-end.contact, footer .-align-end.slogan, main.-align-end, button.-align-end, .-align-end.button, .-align-end.button-group.-joined, cs-button-group.-align-end.-joined, .flex-v.-align-end, footer.-align-end, main .-align-end.photos, main .text .-align-end.jedinstvo, main .text .-align-end.krug, main .text .-align-end.text-wrapper {
  align-items: flex-end;
}
.flex-h .-col-1, main .-col-1, main .photos, main .text .text-wrapper, button .-col-1, .button .-col-1, .button-group.-joined .-col-1, .button-group.-joined main .photos, main .button-group.-joined .photos, cs-button-group.-joined .-col-1, cs-button-group.-joined main .photos, main cs-button-group.-joined .photos, .flex-v .-col-1, footer .-col-1, footer .contact .info, main .text .jedinstvo .-col-1, main .text .jedinstvo .photos, main .text .krug .-col-1, main .text .krug .photos, main .text .text-wrapper .-col-1, main .text .text-wrapper .photos {
  flex: 1;
}
.flex-h .-col-2, main .-col-2, button .-col-2, .button .-col-2, .button-group.-joined .-col-2, cs-button-group.-joined .-col-2, .flex-v .-col-2, footer .-col-2, main .text .jedinstvo .-col-2, main .text .krug .-col-2, main .text .text-wrapper .-col-2 {
  flex: 2;
}
.flex-h .-col-3, main .-col-3, button .-col-3, .button .-col-3, .button-group.-joined .-col-3, cs-button-group.-joined .-col-3, .flex-v .-col-3, footer .-col-3, main .text .jedinstvo .-col-3, main .text .krug .-col-3, main .text .text-wrapper .-col-3 {
  flex: 3;
}
.flex-h .-col-4, main .-col-4, button .-col-4, .button .-col-4, .button-group.-joined .-col-4, cs-button-group.-joined .-col-4, .flex-v .-col-4, footer .-col-4, main .text .jedinstvo .-col-4, main .text .krug .-col-4, main .text .text-wrapper .-col-4 {
  flex: 4;
}
.flex-h .-col-5, main .-col-5, button .-col-5, .button .-col-5, .button-group.-joined .-col-5, cs-button-group.-joined .-col-5, .flex-v .-col-5, footer .-col-5, main .text .jedinstvo .-col-5, main .text .krug .-col-5, main .text .text-wrapper .-col-5 {
  flex: 5;
}
.flex-h .-col-6, main .-col-6, button .-col-6, .button .-col-6, .button-group.-joined .-col-6, cs-button-group.-joined .-col-6, .flex-v .-col-6, footer .-col-6, main .text .jedinstvo .-col-6, main .text .krug .-col-6, main .text .text-wrapper .-col-6 {
  flex: 6;
}

.flex-h, footer .newsletter, footer .contact, footer .slogan, main, button, .button, .button-group.-joined, cs-button-group.-joined {
  flex-direction: row;
  -moz-column-gap: var(--gap);
       column-gap: var(--gap);
  row-gap: calc(0.5 * var(--gap));
  /* hr is used to break the line */
}
.flex-h.-inline, footer .-inline.newsletter, footer .-inline.contact, footer .-inline.slogan, main.-inline, .-inline.button-group.-joined, cs-button-group.-inline.-joined, button, button.button-group.-joined, .button, .button-group.-joined.button, cs-button-group.-joined.button {
  display: inline-flex;
}
.flex-h.-wrap, footer .-wrap.newsletter, footer .-wrap.contact, footer .-wrap.slogan, main.-wrap, button.-wrap, .-wrap.button, .-wrap.button-group.-joined, cs-button-group.-wrap.-joined {
  flex-wrap: wrap;
}
.flex-h.-equal > *, footer .-equal.newsletter > *, footer .-equal.contact > *, footer .-equal.slogan > *, main.-equal > *, button.-equal > *, .-equal.button > *, .-equal.button-group.-joined > *, cs-button-group.-equal.-joined > * {
  flex: 1;
}
.flex-h hr, footer .newsletter hr, footer .contact hr, footer .slogan hr, main hr, button hr, .button hr, .button-group.-joined hr, cs-button-group.-joined hr {
  flex-basis: 100%;
  height: 0;
  border: none;
  margin: 0;
  padding: 0;
}
@media (orientation:portrait) {
  .flex-h.-responsive, footer .newsletter, footer .contact, footer .slogan, main.-responsive, button.-responsive, .-responsive.button, .-responsive.button-group.-joined, footer .button-group.-joined.newsletter, footer .button-group.-joined.contact, footer .button-group.-joined.slogan, cs-button-group.-responsive.-joined, footer cs-button-group.-joined.newsletter, footer cs-button-group.-joined.contact, footer cs-button-group.-joined.slogan {
    flex-direction: column;
    row-gap: var(--gap);
  }
  .flex-h.-responsive hr:not([class]), footer .newsletter hr:not([class]), footer .contact hr:not([class]), footer .slogan hr:not([class]), main.-responsive hr:not([class]), button.-responsive hr:not([class]), .-responsive.button hr:not([class]), .-responsive.button-group.-joined hr:not([class]), cs-button-group.-responsive.-joined hr:not([class]) {
    display: none;
  }
}

.flex-v, footer, main .photos, main .text .jedinstvo, main .text .krug, main .text .text-wrapper {
  flex-direction: column;
  gap: var(--gap);
}

body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.-no-scroll {
  overflow: hidden;
}

/*
====================================
MAIN: TEXT/PHOTOS LAYOUT                
==================================== 
*/
main {
  position: relative;
  width: 100%;
  height: auto;
}
main .text {
  flex: 1;
}
main .text .text-wrapper {
  --pad: 1.5rem;
  position: sticky;
  top: 0;
  padding: var(--pad);
  font-size: 2rem;
  font-weight: 200;
  line-height: 100%;
  /* Basic fallback */
  height: 100vh;
  /* Small/large/dynamic viewport units (Safari/Chrome/Firefox 2023+) */
  height: 100svh; /* when browser UI is shown */
  height: 100dvh; /* tracks changes as UI shows/hides */
  /* If you prefer to allow content to grow, use min-height instead of height */
  /* min-height: 100dvh; */
  /* Optional: avoid the iPhone home indicator overlap */
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom, var(--pad)));
}
main .text .logo {
  width: 11.75rem;
}
main .text .bullet {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}
main .text .bullet.-hidden {
  opacity: 0;
  transform: translateY(2rem);
}
main .text .arrow {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  opacity: 1;
  animation: float-y 1.6s ease-in-out infinite;
  will-change: transform;
  transition: opacity 0.4s;
}
@keyframes float-y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1rem);
  }
}
main .text .arrow.-hidden {
  opacity: 0;
  pointer-events: none;
}
@media (orientation: portrait) {
  main .text .text-wrapper {
    --pad: 5vw;
    font-size: 5vw;
  }
  main .text .logo {
    width: 38vw;
  }
}
main .photos {
  width: 100%;
  height: auto;
}
main .photos img {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
main .photos .empty {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}

/*
====================================
ARC             
==================================== 
*/
@property --sweep {
  syntax: "<angle>";
  initial-value: 20deg;
  inherits: false;
}
.arc {
  --arc-scale: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--arc-scale));
  transition: transform 0.7s ease-in-out;
  /* Controls */
  --size: min(50vw, 80vmin); /* diameter */
  --thickness: 10%; /* ring thickness */
  --start: 0deg;
  /* where the arc begins (0deg is right, -90deg is up) */
  --sweep: 220deg; /* arc length */
  --color: black; /* arc color */
  z-index: 50;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
@media (max-width:500px) {
  .arc {
    --size: 80vw !important;
    border: 5px solid red;
  }
}
.arc .-progress {
  width: 100%;
  height: 100%;
  /* Draw the wedge (angle + color) */
  background: conic-gradient(from var(--start), var(--color) 0deg var(--sweep), transparent 0deg);
  /* Cut out the inner circle to set thickness */
  /* (outer edge stays circular because the box is a circle) */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2 * var(--thickness)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 2 * var(--thickness)), #000 0);
  transition: --sweep 0.15s ease-out;
}
.arc.-ghost, .arc .-ghost {
  border: 1px solid var(--col-main);
}
.arc .-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2 * var(--thickness));
  aspect-ratio: 1;
  border-radius: 50%;
}

/*
====================================
FOOTER STUFF           
==================================== 
*/
footer {
  --border: 1px solid var(--col-main);
  background-color: gainsboro;
  position: relative;
  width: 100%;
  padding-bottom: 4rem;
  overflow: hidden;
}
footer .slogan {
  margin-top: 40vh;
}
@media (orientation:portrait) {
  footer .slogan {
    margin-top: 8rem;
  }
}
footer .slogan h2 {
  width: 7ch;
  overflow: visible;
}
@media (orientation:portrait) {
  footer .slogan h2 {
    width: auto;
  }
}
footer .slogan .pile {
  position: relative;
  width: 50vmin;
  height: 2.5rem;
  border-bottom: var(--border);
  overflow: visible;
  /* slides: centered anchor, then offset via transform */
  /* lift on hover (optional) */
  /* reduced motion */
}
@media (orientation:portrait) {
  footer .slogan .pile {
    width: 1px;
    height: 50vh;
    border-bottom: none;
    border-left: var(--border);
  }
}
footer .slogan .pile .slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33vh; /* slide size */
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border: 0.5rem solid #fff;
  filter: grayscale(50%);
  /* border-bottom-width: 3rem; */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 500ms ease, box-shadow 500ms ease;
  will-change: transform;
}
@media (orientation:portrait) {
  footer .slogan .pile .slide {
    width: 50vw;
  }
}
footer .slogan .pile .pile:hover .slide {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  footer .slogan .pile .slide {
    transition: none;
  }
}
footer .logo {
  margin-top: 40vh;
  width: 300px;
}
@media (orientation:portrait) {
  footer .logo {
    margin-top: 8rem;
  }
}
footer .contact .spacer {
  height: auto;
  width: 1px;
  background: var(--col-main);
}
@media (orientation:portrait) {
  footer .contact .spacer {
    width: 100%;
    height: 1px;
  }
}
footer .newsletter {
  padding: 1.5rem;
}
@media (orientation:landscape) and (min-width:500px) {
  footer .newsletter {
    padding: 4rem 0 0 0;
    border-top: var(--border);
  }
}
footer .newsletter > * {
  flex: 1;
}

/*
====================================
PRELOADER             
==================================== 
*/
.preloader {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1000;
}
.preloader img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: scale(1);
  transition: transform 3s;
  transform-origin: 50% 0;
}
.preloader.-contract {
  width: 50%;
  transition: width 1s, opacity 0.3s;
}
.preloader.-hide {
  opacity: 0.5;
}/*# sourceMappingURL=ekata.css.map */