@import url('expose.css');

:root {
    --blue: #045db5;
    --light-blue: #46a0de;
    --white: #ffffff;
    --grey: #4d4d4d;
    --transparent-blue: rgba(4,93,181, 0.9);
    --red: #da0953;
    --green: #09b57e;

    --color-blue-900: #02376A;
    --color-blue-700: #045DB5;
    --color-blue-500: #46A0DE;
    --color-blue-100: #f3f9fd;

    --color-red-500: #da0953;
    --color-red-100: #FFE6EE;

    --color-green-500: #09b57e;
    --color-green-300: #20e3a5;

    --color-gray-600: #4D4D4D;
    --color-gray-500: #A3A3A3;
    --color-gray-300: #DBDBDB;
    --color-gray-200: #EFEFEF;
    --color-gray-100: #FAFAFA;

    --color-white: #ffffff;
    --color-black: #000000;

    /* Breakpoints */
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1440px;
    --breakpoint-xxl: 1680px;

    /* Sizes */
    --padding-small: 0.625em;
    --padding-medium: 1.25em;
    --padding-large: 2.5em;
    --padding-xlarge: 8em;
    --padding-xxlarge: 10em;
    --padding-xxxlarge: 14em;

    /* Animation */
    --duration: .2s;
    --easing: ease-in-out;

    /* Borders */
    --border-radius: 5px;

    /* Font family */
    --font-family-primary: Expose-Regular, sans-serif;
    --font-family-regular: Expose-Regular, sans-serif;
    --font-family-bold: Expose-Bold, sans-serif;
}

/* Fonts */
.font-bernina-400()
{
    font-family: var(--font-family-primary);
    font-weight: 400;
}

/* Mixins */
/* Font-size */
.font-size-16() {
    font-size: 16px;
    font-size: 1rem;
}

.font-size-18() {
    font-size: 18px;
    font-size: 1.125rem;
}

.font-size-20() {
    font-size: 20px;
    font-size: 1.25rem;
}

/* Sprite */
.sprite-retina {
    background: url("../images/sprite@2x.png") auto auto no-repeat;
}

.sprite {
    background: url("../images/sprite.png") auto auto no-repeat;
}

/* Gradient button */
.gradient-button-blue
{
    --border-radius: 30px;
    font-family: var(--font-family-primary);
    color: var(--color-white);
    border-radius: var(--border-radius);
    background-image: linear-gradient(to right, var(--light-blue), var(--blue));
    font-size: 16px;
    font-size: 1rem;
}

/* Primary button */
.button-primary
{
    --border-radius: 35px;
    color: var(--color-white);
    background-color: var(--light-blue);
    border: 2px solid var(--blue);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.button-primary:hover {
    color: var(--blue);
    background-color: var(--color-white);
}

/* Core tags */
/* Common classes */
body {
    font-family: var(--font-family-primary);
    position: relative;
    color: var(--grey);
}

a, p, li, h1, h2, h3, h4, h5, h6, button, input, textarea {
    font-family: var(--font-family-primary);
}

h2 {
    font-size: 24px;
    font-size: 1.5rem;
    font-weight: 700;
}

p {
    line-height: 1.5em;
}

b, strong {
    font-weight: 700;
}

a, a:link, button, input[type="submit"] {
    cursor: pointer;
}

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/* Buttons */
.button-primary,
.button-primary:link,
.button-primary:active,
.button-primary:visited {
    --border-radius: 35px;
    color: var(--color-white);
    background-color: var(--light-blue);
    border: 2px solid var(--blue);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color var(--duration);
    padding: 0.5em 1.2em;
}

.button-primary:hover {
    color: var(--color-white);
    background-color: var(--blue);
}

.button-primary--alt,
.button-primary--alt:link,
.button-primary--alt:active,
.button-primary--alt:visited {
    --border-radius: 35px;
    color: var(--color-white);
    background-color: var(--color-blue-500);
    border: 2px solid var(--color-blue-700);
    border-radius: var(--border-radius);
    font-size: 16px;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    padding: .5em 1.2em;
    transition: background-color var(--duration) var(--easing), color var(--duration) var(--easing);
}

.button-primary--alt:hover {
    color: var(--color-blue-700);
    background-color: var(--color-white);
    border: 2px solid var(--color-blue-700);
}

.button-secondary, .button-secondary:link, .button-secondary:active, .button-secondary:visited {
    color: var(--color-white);
    text-transform: uppercase;
    text-decoration: none;
}

.button-secondary span,
.button-secondary:link span,
.button-secondary:active span,
.button-secondary:visited span {
    display: inline-block;
    width: 8px;
    height: 11px;
    background: url("../images/sprite.png") -30px 0 no-repeat;
    margin-left: 3px;
    transition: margin-left var(--duration);
}

.button-secondary:hover span {
    margin-left: 8px;
}

/* Responsiveness */
.row {
    position: relative;
    padding: 0 var(--padding-small);
}

@media (min-width: 768px)
{
  h2 {
      font-size: 30px;
      font-size: 1.875rem;
  }

  .row {
      padding: 0 var(--padding-medium);
  }

  .button-primary, .button-primary:link, .button-primary:active, .button-primary:visited {
      padding: 0.8em 1.3em;
  }
}

@media (min-width: 1024px)
{
  h2 {
      font-size: 36px;
      font-size: 2.25rem;
  }

  .row {
      padding: 0 var(--padding-large);
  }
}

@media (min-width: 1280px)
{
  .row {
      padding: 0 var(--padding-xlarge);
  }
}

@media (min-width: 1440px)
{
  .row {
      padding: 0 var(--padding-xxlarge);
  }
}

@media (min-width: 1680px)
{
  .row {
      padding: 0 var(--padding-xxxlarge);
  }
}