@charset "UTF-8";

/*  ===================================================================  VARIABLES  ====================================================================================  */

:root {
  scroll-behavior: smooth;
  
/* ====================================================================== FONTS ========================================================================================  */
  
  --font-thin: "InterThin", sans-serif;
  --font-extralight: "InterExtraLight", sans-serif;
  --font-light: "InterLight", sans-serif;
  --font-regular: "InterRegular", sans-serif;
  --font-medium: "InterMedium", sans-serif;
  --font-semibold: "InterSemiBold", sans-serif;
  --font-bold: "InterBold", sans-serif;
  --font-extrabold: "InterExtraBold", sans-serif;
  --font-black: "InterBlack", sans-serif;
  --logo-word: url("https://antipodes.audio/images/logo-word.png");
  
/*  ==============================================================  USER ADJUSTABLE COLOURS  ===========================================================================  */
    /*  This section allows you to change settings such as the colours used in the website, and it is safe to change these settings within the value limits stated.  */
  
/* ================================================== Black ========================================================== */
  /* This setting is intended for use as a dark text or dark background, ranging from say black to dark grey.
     These 3 settings are used to set the darkest version of this colour.  Lighter shades will be generated also.
     You can play with the hue, saturation and lightness of this darkest color if you wish.  */
  
  --black-h: 0;                                     /*  Any whole number between 1 and 360, sets the hue.  360 is RED, 120 is GREEN, 240 is BLUE, and numbers between these allow any mixed colour.  */
  --black-s: 0%;                                    /*  Any whole percentage between 0% and 100% sets the saturation or intensity of the colour.  */
  --black-l: 0%;                                    /*  Any whole percentage between 0% and 100% sets the lightness of the colour.  */

/* ================================================== White =========================================================== */
  /* This setting is intended for use as a light text or light background, ranging from say white to light grey.
     These 3 settings are used to set the lightest version of this colour.  Darker shades will be generated also.
     You can play with the hue, saturation and lightness of this lightest color if you wish.  */
  
  --white-h: 200;                                     /*  Any whole number between 1 and 360, sets the hue.  360 is RED, 120 is GREEN, 240 is BLUE, and numbers between these allow any mixed colour.  */
  --white-s: 19%;                                    /*  Any whole percentage between 0% and 100% sets the saturation or intensity of the colour.  */
  --white-l: 100%;                                  /*  Any whole percentage between 0% and 100% sets the lightness of the colour.  */

/* ============================================== MAIN ACCENT =========================================================== */
  /* This setting is intended for use of a stronger color, primarily for the color of say buttons, links etc, 
     but also for text and backgrounds, as needed.  Darker and lighter shades will be generated also.
     Play with hue, saturation and lightness to add whatever colour you wish to the website.  */
  
  --accent-h: 200;                                  /*  Any whole number between 1 and 360, sets the hue.  360 is RED, 120 is GREEN, 240 is BLUE, and numbers between these allow any mixed colour.  */
  --accent-s: 100%;                                 /*  Any whole percentage between 0% and 100% sets the saturation or intensity of the colour.  */
  --accent-l: 26%;                                  /*  Any whole percentage between 0% and 100% sets the lightness of the colour.  */

/* ============================================ SECOND ACCENT ======================================================== */
  /* This setting is intended for use of a second strong color, primarily for the color of say buttons, links etc, 
     but also for text and backgrounds, as needed.  Darker and lighter shades will be generated also.
     Play with hue, saturation and lightness to add whatever second colour you wish to the website.  */
  
  --accent1-h: 12;                                  /*  Any whole number between 1 and 360, sets the hue.  360 is RED, 120 is GREEN, 240 is BLUE, and numbers between these allow any mixed colour.  */
  --accent1-s: 73%;                                 /*  Any whole percentage between 0% and 100% sets the saturation or intensity of the colour.  */
  --accent1-l: 57%;                                 /*  Any whole percentage between 0% and 100% sets the lightness of the colour.  */

/* ============================================ THIRD ACCENT ======================================================== */
  /* This setting is intended for use of a third strong color, primarily for the color of say buttons, links etc, 
     but also for text and backgrounds, as needed.  Darker and lighter shades will be generated also.
     Play with hue, saturation and lightness to add whatever second colour you wish to the website.  */
  
  --accent2-h: 300;                                 /*  Any whole number between 1 and 360, sets the hue.  360 is RED, 120 is GREEN, 240 is BLUE, and numbers between these allow any mixed colour.  */
  --accent2-s: 100%;                                /*  Any whole percentage between 0% and 100% sets the saturation or intensity of the colour.  */
  --accent2-l: 27%;                                 /*  Any whole percentage between 0% and 100% sets the lightness of the colour.  */

/* ============================================== Shades ============================================================= */
  /*  This setting is used to generate lighter and/or darker shades of the 4 colours above, and also to generate
      a range of gradients.  Bigger percentages will give you more widely spaced shades.  */
  
  --grey-shade: 6%;                                 /*  Any whole percentage will change the size of the differences in lightness between the shades for the colours based on black and white.  */
  --accent-shade: 3%;                               /*  Any whole percentage will change the size of the differences in lightness between the shades for the colours based on accent and accent1.  */

/* ========================================== Gradient Angles ========================================================== */
  /*  This setting allows you to set the direction of the gradients generated for the Accent colours.  0deg will
      start with a lighter shade at the top and darker at the bottom.  180deg reverses that.  Other numbers set the
      gradient direction to a diagonal direction.  */
      
  --direction: 0deg;                                /*  Any whole degree number between 0deg and 360deg will rotate the direction of the gradients.  */
  
/* ======================================== SEMI TRANSPARENCY ========================================================= */
  /*  This setting is to set the opacity of semi-transparent overlay backgrounds.  */
  
  --semi: 0.8;                                      /*  Any decimal between 0 and 1 will change the opacity of the coloured overlay backgrounds.  */

/* =========================================== MENU COLORS ============================================== */
   /*  You can set the colour schemes for the menu, product slider and specification concertina in this section.  */
   /*  The colour variables you can change are shown below as 'var(variable)', with the allowable variables found and defined in the COLOURS section below.  */

  --bg-menu: var(--white);                          /* background color of the main menu */
  --txt-menu: var(--accent-darkest);                /* text color of the main menu items */
  --active-menu: var(--accent-lightest);            /* text color of main menu on hover and when active */
  --icon-menu: var(--icon-dark);                    /* color, light or dark, of the sub-menu arrow */
  --bg-sub: hsla(200, 100%, 26%, 0.85);              /* background color of the sub-menus */
  --head-sub: var(--light);                         /* text color of the sub-menu headings */
  --txt-sub: var(--white);                          /* text color of the sub menu items */
  --active-sub: var(--white);                       /* text color of hover or active submenu items */
  --active-sub-bg: var(--accent-darkest);           /* background color of hover or active submenu items */
  --mob-txt-menu: var(--darkest);                   /* text color for mobile menu */
  --mob-bg-menu: var(--white);                      /* background color for mobile menu */
  --mob-active-bg: var(--accent-light);             /* background color of hover or active menu items on mobile */
  --mob-active-txt: var(--white);                   /* text color of hover or active menu items on mobile */
  --arrow-color: var(--arrow-black);                /* color of the sub-menu arrow  */
  --mob-inactive-arrow: var(--mobile-arrow-black);  /* color of sub-menu arrow when inactive on mobile   */
  --mob-active-arrow: var(--mobile-arrow-white);    /* color of sub-menu arrow when active on mobile   */

/*  ========================================= MENU DIMENSIONS ================================================ */
    /* This section is used to set the height of the main menu and sub-menu width */

  --menu-height: 80px;                              /* set the height of the main menu bar */
  --mob-menu-padding: 20px;                         /* set the padding of the mobile menu */
  --logo-padding: 28px;                             /* set the top padding of the logo to center it in the menu bar */
  --logo-width: 160px;                              /* set the size of the logo */
  --sub-width: 250px;                               /* set the maximum width of sub-menus in deskptop for narrow-menu class */
 
/*  ========================================= FILTER COLOURS ================================================ */
    /* This section is used to set the colours of the distributor filter items */

  --filter-bg: var(--white);                        /* set the height of the main menu bar */
  --filter-head: var(--accent-dark);                /* set the height of the main menu bar */
  --filter-txt: var(--darkest);                     /* set the height of the main menu bar */
  --filter-hover: var(--accent-light);              /* set the height of the main menu bar */

/*  =========================================== SLIDER TEXT ================================================ */
    /* This section is used to set the colours of the slider text */

  --slider-text: var(--accent-dark);                /* set the height of the main menu bar */
  --slider-active-text: var(--accent);               /* set the height of the main menu bar */
  --slider-active-bg: linear-gradient(145deg, var(--lightest), var(--white));                /* set the height of the main menu bar */

/*  ==================================== SECTION TEXT COLOURS =========================================== */
    /* This section is used to set the effects of the light-text and dark-text classes */

  --light-text: var(--lighter);                     /* set the light text color for a dark section */
  --light-text-a: var(--light);                     /* set the light link color for a dark section */
  --light-text-hover: var(--white);                 /* set the light link hover color for a dark section */
  --light-text-active: var(--white);                /* set the light link active color for a dark section */
  --light-text-header: var(--white);                /* set the light h2 header color for a dark section */

  --dark-text: var(--accent-darkest);                      /* set the dark text color for a light section */
  --dark-text-a: var(--accent-light);               /* set the dark link color for a light section */
  --dark-text-hover: var(--accent-light);           /* set the dark link hover color for a light section */
  --dark-text-active: var(--accent-light);          /* set the dark link active color for a light section */
  --dark-text-header: var(--accent-light);          /* set the dark h2 header color for a light section */

/* =============================== END OF USER ADJUSTABLE VARIABLES ===================================== */


/* =========================================  COLOURS  =================================================== */
  /*  This section generates all of the main website colours - the four key colours plus lighter and/or darker shades, gradients, and two semi-transparent backgrounds.  */
  /*  This section should not normally be adjusted, and the colours should be managed above instead */

  --black: hsl(var(--black-h), var(--black-s), var(--black-l));
  --black-semi: hsla(var(--black-h), var(--black-s), var(--black-l), var(--semi));
  --darkest: hsl(var(--black-h), var(--black-s), calc(var(--black-l) + var(--grey-shade)));
  --darker: hsl(var(--black-h), var(--black-s), calc(var(--black-l) + calc(2 * var(--grey-shade))));
  --dark: hsl(var(--black-h), var(--black-s), calc(var(--black-l) + calc(3 * var(--grey-shade))));
  
  --white: hsl(calc(var(--white-h) + 0), calc(var(--white-s) + 0%), calc(var(--white-l) - 0%));
  --white-semi: hsl(calc(var(--white-h) + 0), calc(var(--white-s) + 0%), calc(var(--white-l) - 0%), var(--semi));
  --lightest: hsl(calc(var(--white-h) + 0), calc(var(--white-s) + 0%), calc(var(--white-l) - var(--grey-shade)));
  --lighter: hsl(calc(var(--white-h) + 0), calc(var(--white-s) + 0%), calc(var(--white-l) - calc(2 * var(--grey-shade))));
  --light: hsl(calc(var(--white-h) + 0), calc(var(--white-s) + 0%), calc(var(--white-l) - calc(3 * var(--grey-shade))));


  --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-semi: hsla(var(--accent-h), var(--accent-s), var(--accent-l), var(--semi));
  --accent-white: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + calc(4 * var(--accent-shade))));
  --accent-lightest: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + calc(3 * var(--accent-shade))));
  --accent-lighter: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + calc(2 * var(--accent-shade))));
  --accent-light: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + var(--accent-shade)));
  --accent-dark: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - var(--accent-shade)));
  --accent-darker: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - calc(2 * var(--accent-shade))));
  --accent-darkest: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - calc(3 * var(--accent-shade))));
  --accent-black: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - calc(4 * var(--accent-shade))));

  --accent1: hsl(var(--accent1-h), var(--accent1-s), var(--accent1-l));
  --accent1-semi: hsla(var(--accent1-h), var(--accent1-s), var(--accent1-l), var(--semi));
  --accent1-white: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) + calc(4 * var(--accent-shade))));
  --accent1-lightest: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) + calc(3 * var(--accent-shade))));
  --accent1-lighter: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) + calc(2 * var(--accent-shade))));
  --accent1-light: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) + var(--accent-shade)));
  --accent1-dark: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) - var(--accent-shade)));
  --accent1-darker: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) - calc(2 * var(--accent-shade))));
  --accent1-darkest: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) - calc(3 * var(--accent-shade))));
  --accent1-black: hsl(var(--accent1-h), var(--accent1-s), calc(var(--accent1-l) - calc(4 * var(--accent-shade))));

  --accent2: hsl(var(--accent2-h), var(--accent2-s), var(--accent2-l));
  --accent2-semi: hsla(var(--accent2-h), var(--accent2-s), var(--accent2-l), var(--semi));
  --accent2-white: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) + calc(4 * var(--accent-shade))));
  --accent2-lightest: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) + calc(3 * var(--accent-shade))));
  --accent2-lighter: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) + calc(2 * var(--accent-shade))));
  --accent2-light: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) + var(--accent-shade)));
  --accent2-dark: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) - var(--accent-shade)));
  --accent2-darker: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) - calc(2 * var(--accent-shade))));
  --accent2-darkest: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent2-l) - calc(3 * var(--accent-shade))));
  --accent2-black: hsl(var(--accent2-h), var(--accent2-s), calc(var(--accent1-l) - calc(4 * var(--accent-shade))));

  /* ============================================ GRADIENTS ================================================================ */
  /* This section generates some gradients based on the accent shades generated above  */

  --gradient1: radial-gradient(circle, var(--accent-white) 30%, var(--accent-lightest) 90%);
  --gradient2: radial-gradient(circle, var(--accent-lightest) 30%, var(--accent-lighter) 90%);
  --gradient3: radial-gradient(circle, var(--accent-lighter) 30%, var(--accent-light) 90%);
  --gradient4: radial-gradient(circle, var(--accent-light) 30%, var(--accent) 90%);
  --gradient5: radial-gradient(circle, var(--accent) 30%, var(--accent-dark) 90%);
  --gradient6: radial-gradient(circle, var(--accent-dark) 30%, var(--accent-darker) 90%);
  --gradient7: radial-gradient(circle, var(--accent-darker) 30%, var(--accent-darkest) 90%);
  --gradient8: radial-gradient(circle, var(--accent-darkest) 30%, var(--accent-black) 90%);

  --gradient-lightest: linear-gradient(var(--direction), var(--accent-white) 0%, var(--accent-lightest) 100%);
  --gradient-lighter: linear-gradient(var(--direction), var(--accent-lightest) 0%, var(--accent-lighter) 100%);
  --gradient-light: linear-gradient(var(--direction), var(--accent-lighter) 0%, var(--accent-light) 100%);
  --gradient: linear-gradient(var(--direction), var(--accent-light) 0%, var(--accent) 100%);
  --gradient-dark: linear-gradient(var(--direction), var(--accent) 0%, var(--accent-dark) 100%);
  --gradient-darker: linear-gradient(var(--direction), var(--accent-dark) 0%, var(--accent-darker) 100%);
  --gradient-darkest: linear-gradient(var(--direction), var(--accent-darker) 0%, var(--accent-darkest) 100%);
  --gradient-black: linear-gradient(var(--direction), var(--accent-darkest) 0%, var(--accent-black) 100%);

  --gradient1-lightest: linear-gradient(var(--direction), var(--accent1-white) 0%, var(--accent1-lightest) 100%);
  --gradient1-lighter: linear-gradient(var(--direction), var(--accent1-lightest) 0%, var(--accent1-lighter) 100%);
  --gradient1-light: linear-gradient(var(--direction), var(--accent1-lighter) 0%, var(--accent1-light) 100%);
  --gradient1: linear-gradient(var(--direction), var(--accent1-light) 0%, var(--accent1) 100%);
  --gradient1-dark: linear-gradient(var(--direction), var(--accent1) 0%, var(--accent1-dark) 100%);
  --gradient1-darker: linear-gradient(var(--direction), var(--accent1-dark) 0%, var(--accent1-darker) 100%);
  --gradient1-darkest: linear-gradient(var(--direction), var(--accent1-darker) 0%, var(--accent1-darkest) 100%);
  --gradient1-black: linear-gradient(var(--direction), var(--accent1-darkest) 0%, var(--accent1-black) 100%);
  
  --gradient2-lightest: linear-gradient(var(--direction), var(--accent2-white) 0%, var(--accent2-lightest) 100%);
  --gradient2-lighter: linear-gradient(var(--direction), var(--accent2-lightest) 0%, var(--accent2-lighter) 100%);
  --gradient2-light: linear-gradient(var(--direction), var(--accent2-lighter) 0%, var(--accent2-light) 100%);
  --gradient2: linear-gradient(var(--direction), var(--accent2-light) 0%, var(--accent2) 100%);
  --gradient2-dark: linear-gradient(var(--direction), var(--accent2) 0%, var(--accent2-dark) 100%);
  --gradient2-darker: linear-gradient(var(--direction), var(--accent2-dark) 0%, var(--accent2-darker) 100%);
  --gradient2-darkest: linear-gradient(var(--direction), var(--accent2-darker) 0%, var(--accent2-darkest) 100%);
  --gradient2-black: linear-gradient(var(--direction), var(--accent2-darkest) 0%, var(--accent2-black) 100%);
  
  /* ============================================ SUB MENU ARROWS ============================================================== */
  
  --arrow-black: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="9px"><path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>');
  --arrow-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="9px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>');

  --mobile-arrow-black: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="9px"><path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>');
  --mobile-arrow-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9px" height="9px"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M8.886,0.631 L8.336,0.117 C8.263,0.049 8.178,0.015 8.083,0.015 C7.988,0.015 7.903,0.049 7.830,0.117 L4.506,3.155 L1.183,0.117 C1.109,0.049 1.025,0.015 0.930,0.015 C0.834,0.015 0.750,0.049 0.677,0.117 L0.127,0.631 C0.053,0.699 0.017,0.778 0.017,0.867 C0.017,0.956 0.053,1.035 0.127,1.103 L4.253,4.892 C4.327,4.960 4.411,4.994 4.506,4.994 C4.602,4.994 4.686,4.960 4.759,4.892 L8.886,1.103 C8.959,1.035 8.996,0.956 8.996,0.867 C8.996,0.778 8.959,0.699 8.886,0.631 L8.886,0.631 Z"/></svg>')!important;
}

/*  ===========================================  END OF VARIABLES ============================================================== */