/* INC HTML */

/*********** TABLE OF CONTENTS **************
0. Root variables
1. Fonts
2. Reset
3. Global
4. Main Header
5. Mobile Menu
6. Main Slider

**********************************************/

/***

====================================================================

  Global Variables

====================================================================

 ***/

:root {
  /* Primary colours influence buttons (including some hover colours) as well as elements such as key areas backgrounds */
  --primary-colour-one: #E40F18;
  --primary-colour-two: #E40F18;
  --primary-colour-three: #E40F18;
  --primary-colour-four: #1f1f1f;

  /* These are the majority of buttons across the site.  They have been pulled off of primary colour variables to better prevent clashes, since they
   * have hover functions as well as background colours. Note that the main button types  (1-6, except 4 which was removed) are also a mix of black
   * and white text, so bear in mind when changing colours  */
  --button-type-1-bg: #E40F18;
  --button-type-1-hover: #B21720;
  --button-type-2-bg: #E40F18;
  --button-type-2-hover: #B21720;
  --button-type-3-bg: #E40F18;
  --button-type-3-hover: #B21720;
  --button-type-5-bg: #E40F18;
  --button-type-5-hover: #B21720;
  --button-type-6-bg: #E40F18;
  --button-type-6-hover: #B21720;

  --my-account-sidebar-main-buttons: #E40F18;
  --my-account-sidebar-manage-users: #E40F18;
  --my-account-sidebar-logout: #B21720;
  --my-account-sidebar-buttons-hover: black;

  /* Ion range slider on shop filter */
  --filter-slider-handle: #006699;
  --filter-slider-trackline: #B21720;

  /* As described, should cover all text that is either black, white or red by default.  Red is 99% error text and a couple of warnings */
  --white-text: #ffffff;
  --black-text: #000000;
  --red-text: Red;

  /* Governs elements with explicit black or black borders */
  --black-border: #000000;
  --white-border: #ffffff;

  /* Main page background colour */
  --main-background: #ffffff;

  /* Background colour for inputs such as combo dropdowns, form text inputs, text areas and checkboxes (NOT Cookie checkboxes as they are separate entities) */
  --inputs-background: #ffffff;

  /* Background for the navigation menu AND the dropdown menu options */
  --menu-banner-background: #E40F18;
  --menu-banner-text: #ffffff;
  --menu-text-colour: #ffffff;

  /* Covers product spotlight and news article backgrounds */
  --contrast-colour-darker: #e0e0e0;

  /* Filters background, my account menu, alterantive rows in basket items */
  --contrast-colour-lighter: #f8f8f8;

  /* Background colour for footer, kept separate from --contrast-colour-darker so they can be changed independently if needed */
  --footer-background-colour: #1f1f1f;
  --footer-background-upper-colour: #c0bfbf;
  /* Covers text found in specific areas of a page */
  --footer-text: white;

  /* As described, scroll bar colourings */
  --scroll-bar-scroller: #B21720;
  --scroll-bar-background: #e0e0e0;

  /* Bubble that pops up on menu at top when items appear in your cart, separate in case contrast is needed */
  --items-in-cart-bubble: #E40F18;

  /* Used on product page for certain elements */
  /* --product-page-light-contrast: #fafafa; */
  /* --product-page-light-contrast-two: #ebebeb; */
}

/***

====================================================================
      Fonts
====================================================================

 ***/

/*

font-family: 'Metropolis_Regular', sans-serif;
font-family: 'Metropolis_Light', sans-serif;
font-family: 'Metropolis_Thin', sans-serif;
font-family: 'Metropolis_Medium', sans-serif;
font-family: 'Metropolis_Bold', sans-serif;
font-family: 'Metropolis_Black', sans-serif;

*/

/* @import url("font-awesome.css"); */
/* @import url("simple-line-icons.css"); */
/* @import url("animate.css"); */

/*@import url("jquery-ui.css");*/

/* @import url("owl.css"); */
/* @import url("slick.css"); */

/*@import url("jquery.fancybox.min.css");*/

/* @import url("scrollbar.css"); */

@font-face {
  font-family: "Metropolis_Thin";
  src: url("../fonts/Metropolis-Thin.eot");
  src: url("../fonts/Metropolis-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Thin.woff") format("woff"),
    url("../fonts/Metropolis-Thin.woff2") format("woff2"), url("../fonts/Metropolis-Thin.ttf") format("truetype"),
    url("../fonts/Metropolis-Thin.svg#Metropolis_Thin") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Light";
  src: url("../fonts/Metropolis-Light.eot");
  src: url("../fonts/Metropolis-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Light.woff") format("woff"),
    url("../fonts/Metropolis-Light.woff2") format("woff2"), url("../fonts/Metropolis-Light.ttf") format("truetype"),
    url("../fonts/Metropolis-Light.svg#Metropolis_Light") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Regular";
  src: url("../fonts/Metropolis-Regular.eot");
  src: url("../fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Regular.woff") format("woff"),
    url("../fonts/Metropolis-Regular.woff2") format("woff2"), url("../fonts/Metropolis-Regular.ttf") format("truetype"),
    url("../fonts/Metropolis-Regular.svg#Metropolis_Regular") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Medium";
  src: url("../fonts/Metropolis-Medium.eot");
  src: url("../fonts/Metropolis-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Medium.woff") format("woff"),
    url("../fonts/Metropolis-Medium.woff2") format("woff2"), url("../fonts/Metropolis-Medium.ttf") format("truetype"),
    url("../fonts/Metropolis-Medium.svg#Metropolis_Medium") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Semibold";
  src: url("../fonts/Metropolis-SemiBold.eot");
  src: url("../fonts/Metropolis-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-SemiBold.woff") format("woff"),
    url("../fonts/Metropolis-SemiBold.woff2") format("woff2"), url("../fonts/Metropolis-SemiBold.ttf") format("truetype"),
    url("../fonts/Metropolis-SemiBold.svg#Metropolis_Semibold") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Bold";
  src: url("../fonts/Metropolis-Bold.eot");
  src: url("../fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Bold.woff") format("woff"),
    url("../fonts/Metropolis-Bold.woff2") format("woff2"), url("../fonts/Metropolis-Bold.ttf") format("truetype"),
    url("../fonts/Metropolis-Bold.svg#Metropolis_Bold") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis_Black";
  src: url("../fonts/Metropolis-Black.eot");
  src: url("../fonts/Metropolis-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Metropolis-Black.woff") format("woff"),
    url("../fonts/Metropolis-Black.woff2") format("woff2"), url("../fonts/Metropolis-Black.ttf") format("truetype"),
    url("../fonts/Metropolis-Black.svg#Metropolis_Black") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}