/* CSS Var defaults */
:root {
  /* Monochrome */
  --white:            #ffffff;
  --light-grey:       #eeeeee;
  --mid-grey:         #d7d2cf;
  --ccc-grey:         #cccccc;
  --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);
  --gold-pattern: #84754E;
  --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 Colours */
--theme-background: var(--white);
--theme-text: var(--black);
--theme-heading: var(--black);
--theme-accent: var(--black);
--theme-accent-alt: var(--gold);

/* 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(--black);
  --buttondefault:      var(--gold);
  --buttonhover:        var(--white);
  --buttonborder:       var(--gold);

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

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

/* 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(--black);
--buttondefault:      var(--gold);
--buttonhover:        var(--white);
--buttonborder:       var(--gold);
}

.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%;
  }
}