$color-primary: #ED1846;
$color-primary-85: rgba(237, 24, 70, 0.85);
$color-primary-70: rgba(237, 24, 70, 0.7);
$color-primary-55: rgba(237, 24, 70, 0.55);
$color-primary-40: rgba(237, 24, 70, 0.4);
$color-primary-25: rgba(237, 24, 70, 0.25);
$color-primary-10: rgba(237, 24, 70, 0.1);

$color-success: #09C199;
$color-success-85: rgba(9, 193, 153, 0.85);
$color-success-70: rgba(9, 193, 153, 0.7);
$color-success-55: rgba(9, 193, 153, 0.55);
$color-success-40: rgba(9, 193, 153, 0.4);
$color-success-25: rgba(9, 193, 153, 0.25);
$color-success-10: rgba(9, 193, 153, 0.1);

$color-dark: #333F52;
$color-dark-85: rgba(51, 63, 82, 0.85);
$color-dark-70: rgba(51, 63, 82, 0.7);
$color-dark-55: rgba(51, 63, 82, 0.55);
$color-dark-40: rgba(51, 63, 82, 0.4);
$color-dark-25: rgba(51, 63, 82, 0.25);
$color-dark-10: rgba(51, 63, 82, 0.1);

$color-bright: white;
$color-bright-85: rgba(255, 255, 255, 0.85);
$color-bright-70: rgba(255, 255, 255, 0.7);
$color-bright-55: rgba(255, 255, 255, 0.55);
$color-bright-40: rgba(255, 255, 255, 0.4);
$color-bright-25: rgba(255, 255, 255, 0.25);
$color-bright-10: rgba(255, 255, 255, 0.1);

$color-default-light: #C5D0DE;
$color-default-light-85: rgba(197, 208, 222, 0.85);
$color-default-light-70: rgba(197, 208, 222, 0.7);
$color-default-light-55: rgba(197, 208, 222, 0.55);
$color-default-light-40: rgba(197, 208, 222, 0.4);
$color-default-light-25: rgba(197, 208, 222, 0.25);
$color-default-light-10: rgba(197, 208, 222, 0.1);

$color-error: #f39c12;
$color-warn: #f39c12;

$color-default: var($color-dark-70);

$color-bg-default: #C5D0DE;
$color-bg-gray: #C5D0DE;

$horizontal-shadow-z1: 2px 0 4px 0 rgba(0, 0, 0, 0.2);
$horizontal-shadow-z2: 9px 0 13px 0 rgba(0, 0, 0, 0.2);

$shadow-z0: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
$shadow-z1: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
$shadow-z2: 0 4px 9px 0 rgba(0, 0, 0, 0.2);
$shadow-z3: 0 9px 13px 0 rgba(0, 0, 0, 0.2);

$screen-iph-retina: 320px;
$screen-xs: 480px;
$screen-sm: 768px;
$screen-lg: 992px;
$screen-lg: 1200px;

$font-display-h1: 5.6rem;
$font-display-h2: 4.8rem;
$font-display-h3: 3.2rem;
$font-headline: 2.4rem;
$font-title: 2.0rem;
$font-subheading: 1.6rem;
$font-body: 1.4rem;
$font-caption: 1.2rem;
$font-button: 1.4rem;

$opacity-100: 100%;
$opacity-70: 0.7;
$opacity-55: 0.55;
$opacity-40: 0.4;
$opacity-25: 0.25;
$opacity-10: 0.1;

$transition-snap: cubic-bezier(0.86, 0, 0.07, 1);

@font-face {
  font-family: 'Verlag';
  src: url('/assets/webfonts/Verlag-Bold.ttf');
  font-weight: 600;
}

@font-face {
  font-family: 'Verlag';
  src: url('/assets/webfonts/Verlag-Book.ttf');
  font-weight: 300;
}

@font-face {
  font-family: 'Verlag';
  src: url('/assets/webfonts/Verlag-Light.ttf');
  font-weight: 200;
}

@font-face {
  font-family: 'Verlag';
  src: url('/assets/webfonts/Verlag-XLight.ttf');
  font-weight: 100;
}

html {
  font-family: 'Verlag', Roboto, 'open-sans', Helvetica;
  font-size: 62.5% !important;
  font-weight: 300;
  min-width: 320px;
}

div, p, input, label, a, span, div, article, main, section, header, footer {
  box-sizing: border-box;
}

input {
  margin: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  margin: 0;
}

h1 { font-size: $font-display-h1; }
h2 { font-size: $font-display-h2; }
h3 { font-size: $font-display-h3; }
h4 { font-size: $font-headline; }
h5 { font-size: $font-title; }
h6 { font-size: $font-subheading; }

a {
  text-decoration: none;
}

button, a {
  cursor: pointer;
}

ul, figure {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}