/* CSS Var defaults */
:root {
    /* Monochrome */
    --white:            #ffffff;
    --light-grey:       #eeeeee;
    --mid-grey:         #d7d2cf;
    --dark-grey:        #b9b4b0;
    --text-black:       #333333;
    --very-dark-grey:   #262626;
    --black:            #000000;

    /* Colors */
    --dark-green:       #238527;
    --dark-orange:      #BE4F0E;
    --dark-strawberry:  #E71321; 
    --gold:             #84754E;
    --green:            #37d68e;
    --green-blue:       #37ddd1;
    --mid-blue:         #2041cb;
    --orange:           #f85220;
    --pink:             #DA2F5F;
    --primary-blue:     #101d49;
    --purple:           #2a0169;
    --strawberry:       #ee313e;
    --turquoise:        #018089;
    --yellow:           #febf13;

    --light-grey-hover: var(--mid-grey);

    --component-narrow-width: 60%;

	/* Page level themeing 
      These are a bit tricky to administrate, so
      by default we say colour one is the main BG

  */

  --theme-background: var(--white);
  --theme-text: var(--black);
  --theme-heading: var(--black);
  --theme-accent: var(--primary-blue);
  --theme-accent-alt: var(--turquoise);

  --theme-color-one:    var(--primary-blue);
  --theme-color-two:    var(--white);
  --theme-color-three:  var(--yellow);
  --theme-color-four:   var(--turquoise);

  --component-background: var(--theme-background);
  --component-heading: var(--theme-heading);
  --component-text: var(--theme-text);
  --component-accent: var(--theme-accent);
  --component-accent-alt: var(--theme-accent-alt);
 
    /** Button colours **/
    --buttontextdefault:  var(--black);
    --buttontexthover:    var(--black);
    --buttondefault:      var(--yellow);
    --buttonhover:        var(--white);
    --buttonborder:       var(--yellow);

    --gradient-background: linear-gradient(90deg, rgb(15,29,73) 0%, rgb(26, 41, 107) 50%, rgb(0, 85, 151) 100%);
}

/* Themes */
.theme-pink {
  /* Theme Colours */
  --theme-background: var(--white);
  --theme-text: var(--black);
  --theme-heading: var(--pink);
  --theme-accent: var(--pink);
  --theme-accent-alt: var(--pink);

  /* Default Component Colours */
  --component-background: var(--theme-background);
  --component-text: var(--theme-text);
  --component-heading: var(--theme-heading);
  --component-accent: var(--theme-accent);
  --component-accent-alt: var(--theme-accent-alt);

  /** Button colours **/
  --buttontextdefault:  var(--white);
  --buttontexthover:    var(--pink);
  --buttondefault:      var(--pink);
  --buttonhover:        var(--white);
  --buttonborder:       var(--pink);
}

.component {
  --component-background: var(--theme-background);
  --component-heading: var(--theme-heading);
  --component-text: var(--theme-text);
  --component-accent: var(--theme-accent);
  --component-accent-alt: var(--theme-accent-alt);
}

.component.variant-one {
  --component-background: var(--theme-accent);
  --component-heading: var(--theme-background);
  --component-text: var(--theme-background);
  --component-accent: var(--theme-background);
  --component-accent-alt: var(--theme-bg);
}

.component.variant-two {
  --component-background: var(--theme-text);
  --component-heading: var(--theme-accent);
  --component-text: var(--theme-accent);
  --component-accent: var(--theme-background);
  --component-accent-alt: var(--theme-background);
}

/*********
V2 BUTTONS
**********/
/* WOO! Specificity ramping! Thanks everybody!*/
button.button-v2, a.button-v2, .footer .footer-submenu-one a.button-v2 {
  background-image: linear-gradient(
    90deg,
    var(--buttonhover) 0%,
    var(--buttonhover) 50%,
    var(--buttondefault) 50%,
    var(--buttondefault) 100%
  );
  background-color: transparent;
  background-size: 200% 100%;
  background-position: 0% 0%;
  border: 2px solid var(--buttonborder);
  border-radius: 2px;
  color: transparent;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 1em;
  padding: 0.6em 1em;
  position: relative;
}

.footer .footer-submenu-one a.button-v2 {
  padding: 0.1em 0.4em;
  margin: 0;
  margin-bottom: 8px;
}
.button-text {
  background: linear-gradient(
    90deg,
    var(--buttontexthover) 0%,
    var(--buttontexthover) 50%,
    var(--buttontextdefault) 50%,
    var(--buttontextdefault) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-position: 0% 0%;
  z-index: -1;
  color: transparent;
  font-family: 'NeuzeitGro', sans-serif;
}
  
.button-v2.invert {
  background-image: linear-gradient(
    90deg,
    var(--buttondefault) 0%,
    var(--buttondefault) 50%,
    var(--buttonhover) 50%,
    var(--buttonhover) 100%
  );
}

.button-v2.invert .button-text {
  background-image: linear-gradient(
    90deg,
    var(--buttontextdefault) 0%,
    var(--buttontextdefault) 50%,
    var(--buttontexthover) 50%,
    var(--buttontexthover) 100%
  );
}

  .button-v2:hover, .button-v2:focus,
  .button-v2:hover > .button-text, .button-v2:focus > .button-text {
    animation: buttonin 0.15s cubic-bezier(0.8, 0.37, 0.21, 0.8) 0s forwards;
    background-size: 200% 100%;

  }
  
  .button-v2,
  .button-v2 .button-text {
    animation: buttonout 0.15s cubic-bezier(0.8, 0.37, 0.21, 0.8) 0s forwards;
    background-size: 200% 100%;
  }
  
  .footer-link.button-text {
      line-height: 1.25;
  }

  @keyframes buttonin {
    0% {
      background-position: 100% 0%;
    }
  
    100% {
      background-position: 0% 0%;
    }
  }
  
  @keyframes buttonout {
    0% {
      background-position: 0% 0%;
    }
  
    100% {
      background-position: 100% 0%;
    }
  }