/* -----------------------------------------------------------
    Load fonts
----------------------------------------------------------- */

@import url(../fonts/stylesheet.css);

:root {
    /* Colours */
    --colour-primary: #111;
    --color-light: #fff;
    --color-grey: #4d4d4d;
    --color-light-grey: #bebebe;

    --text-primary: #111;
    --text-secondary: #111;
    --text-body: #4d4d4d;

    --text-primary-invert: white;
    --text-secondary-invert: lightgrey;
    --text-body-invert: white;

    --border-color: #111;
    --border-dark: 1px solid #111;
    --border-light: 1px solid white;
    --border-grey: 1px solid var(--color-light-grey);

    --h-letter-spacing: 0px;
    --h-font-family: 'Barlow';
    --h-font-weight: bold;
    --h-text-transform: uppercase;

    /* Typography */

    --base-step--1-font-family: 'Barlow';
    --base-step--1-font-size: 1.3rem;
    --base-step--1-line-height: 1.2em;
    --base-step--1-letter-spacing: 0px;
    --base-step--1-font-weight: bold;
    --base-step--1-color: var(--text-body);   

    --base-step-0-font-family: 'Avenir Book', sans-serif;
    --base-step-0-font-size: 1.6rem;
    --base-step-0-line-height:  1.8em;
    --base-step-0-letter-spacing: normal;
    --base-step-0-font-weight: normal;
    --base-step-0-color: var(--text-body); 
    --base-step-0--responsive-font-size: 1.4rem; 
    --base-step-0-responsive-line-height:  1.7em;
    --base-step-0-text-transform: none;
    
    --base-step-1-font-family: 'Barlow';
    --base-step-1-text-transform: uppercase;
    --base-step-1-font-size: 1.7rem;
    --base-step-1-line-height:  1.2em;
    --base-step-1-letter-spacing: 0px;
    --base-step-1-color: var(--text-body);  
    --base-step-1-responsive-font-size: 1.6rem; 

    /* Nav body */
    --h-step-1-font-family: 'Barlow';
    --h-step-1-font-size: 1.8rem;
    --h-step-1-line-height: 2.2em;
    --h-step-1-letter-spacing: 0px;
    --h-step-1-text-transform: uppercase;
    --h-step-1-color: var(--text-body);
    
    --h-step-2-font-family: 'Barlow';
    --h-step-2-font-size: 2.3rem;
    --h-step-2-line-height: 1.2em;
    --h-step-2-letter-spacing: 0px;
    --h-step-2-font-weight: bold;
    --h-step-2-text-transform: uppercase;
    --h-step-2-color: var(--text-body);   

    --h-step-3-font-family: 'Barlow';
    --h-step-3-font-size: 3.5rem;
    --h-step-3-line-height: 1.2em;
    --h-step-3-letter-spacing: 0px;
    --h-step-3-text-transform: uppercase;
    --h-step-3-color: var(--text-secondary); 

    --h-step-4-font-family: 'Barlow';
    --h-step-4-font-size: 7.8rem;
    --h-step-4-line-height:  1.2em;
    --h-step-4-letter-spacing: 0px;
    --h-step-4-color: var(--text-secondary);  

    --h3--font-size: 1.6rem;
    --h4--font-size: 1.4rem;
    --h5--font-size: 1.2rem;
    

    /* Spacing */
    --space--2: 5px;
    --space--1: 10px;
    --space-0: 15px;
    --space-1: 20px;
    --space-2: 30px;
    --space-3: 56px;
    --space-4: 74px;
    --space-5: 80px;
    --space-6: 96px;
    --space-7: 120px;

    --width-0: 35%;
    --width-1: 40%;
    --width-2: 60%;
    --width-3: 65%;
    --width-100: 100%;

    --height-100: 100%;

    --page-padding: 0px 130px;

    --container-padding: 0 20px; 
    --negative-container-padding: calc(var(--container-padding) * -1);

    --button-font-family:'Barlow';
    --button-font-size: 1.8rem;
    --button-line-height: 1.6em;
    --button-letter-spacing:1px;
    --button-text-transform: uppercase;
    --button-color: #111;
    --button-background-color:#232C3A;
    --button-focus-color:white;
    --button-focus-background-color:#F6F1F1;
    --button-padding:16px 54px 23px 50px;
    --button-transition: 0.3s ease-in;

    /* Links */
    --link-font-family: 'Barlow';
    --link-font-size: 1.7rem;
    --link-line-height: 1.2em;
    --link-letter-spacing: 0px;
    --link-text-transform: uppercase; 
    --link-color: #111;
    --link-hover: #4D4D4D;

    /* Footer Links */
    --link-footer-font-family: 'Barlow';
    --link-footer-font-size: 1.4rem;
    --link-footer-line-height: 1.2em;
    --link-footer-letter-spacing: 0px;
    --link-footer-text-transform: uppercase; 


}

/* -----------------------------------------------------------
    Base typograhy styles - displayed in rich text editors 
----------------------------------------------------------- */

html {
  font-size: 10px;
}


body {
  font-family: var(--base-step-0-font-family);
  font-size: var(--base-step-0-font-size);
  line-height: var(--base-step-0-line-height);
  font-weight: var(--base-step-0-font-weight);
  letter-spacing: var(--base-step-0-letter-spacing);
  color: var(--text-body);
}


h1 {
  font-family: var(--h-step-4-font-family);
  font-size: var(--h-step-4-font-size);
  line-height: var(--h-step-4-line-height);
  letter-spacing: var(--h-step-4-letter-spacing);
}

h2 {
  font-size: var(--base-step-1-font-size);
}

h3 {
  font-size: var(--h3--font-size);    
}

h4 {
  font-size: var(--h4--font-size);
}

h5 {
  font-size: var(--h5--font-size);
}

h1, h2, h3, h4, h5 {
  font-family: var(--h-font-family);
  font-weight: var(--h-font-weight);
  line-height: 1.2em;
  letter-spacing: var(--h-letter-spacing);
  color: var(--text-secondary);
}

blockquote {
  font-size: var(--h-step-3-font-size);
  line-height: var(--h-step-3-line-height);
  letter-spacing: var(--h-step-3-letter-spacing);
  border: none;
  color: var(--text-secondary);
  margin: 0;
  padding: 20px 0 40px 0;
  border-top: var(--border-dark);
}

#hero_header, .feature_panels .panel_hero .hero_heading > h2, 
.feature_panels .panel_hero .hero_heading > a > h2 {
  font-size: var(--h-step-4-font-size);
  line-height: var(--h-step-4-line-height);
  letter-spacing: var(--h-letter-spacing);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, #hero_header,
h1, h2, h3, h4, h5, h6, #hero_header .title,
.fullscreen_slideshow .hero_splash_text, #logo a,
.navigation, .navigation ul li a, #slide_nav_reveal, #header_quick_search .inputField,
#header_quick_search input, #header_quick_search select, #header_quick_search textarea, 
#header_quick_search #header_quicksearch_btn, #footer #artlogic, #footer #copyright, #footer #copyright .copyright-text,
.page-artists h1 #artist_years, .event-details-wrapper .event-details span,
#footer .small-links-container, .subtitle, b strong, 
.h1_subtitle, .location, .date, blockquote,
#image_gallery #content_module h3, .records_list .content h2,
.records_list .content .subtitle, .records_list .content .date,
.records_list .content .location, .records_list ul li .content .title,
#image_gallery #content_module .detail_view_module .artist
.subsection-press .records_list .content .link a, .section-press .records_list .content .link a,
#store_cart_widget, .fullscreen_slideshow .hero_splash_text,
.fullscreen_slideshow .hero_splash_text .title, .fullscreen_slideshow ul li .content h2,
.fullscreen_slideshow ul li .content h2 a, .fullscreen_slideshow ul li .content h2 a:visited,
.fullscreen_slideshow ul li .content h2 a .separator, 
.fullscreen_slideshow ul li .content h2 a .h1_subtitle, #image_gallery #content_module h3,
.records_list .content h2, .records_list .content .subtitle, .records_list .content .date,
.records_list .content .location, .records_list ul li .content .title,
.records_list ul li .content .artist, .feature_panels .panel_image_text_adjacent .content h2,
.feature_list ul li .content h2, .feature_list ul li .content .subtitle,
.feature_list ul li .content .date, .feature_list ul li .content .location,
.full_list ul li .content h2, .full_list ul li .content .subtitle,
.full_list ul li .content .date, .records_list.detail_expand_grid .expander_detail #image_gallery #content_module .subtitle,
.link, .button, .button input, .simple_list ul li, #social_links_list ul li,
.page_stats .ps_item, .page_stats .ps_pages, #protected_path_login #container h1, 
#protected_path_login #container label, .subheading, .poster, .subtitle, .h1_subtitle,
.location, .date, .price, #fancybox-title-main .artist strong, #mc_embed_signup input.button,
#home_splash .content, #hero_header .subtitle, .feature_panels .panel_hero .hero_heading .subtitle,
#hero_header, .feature_panels .panel_hero .hero_heading > h2, .feature_panels .panel_hero .hero_heading > a > h2, 
.section-home .slideshow_pager_inner button, .artists-browser, .reveal-subnav-dropdown-list {
  font-family: var(--h-font-family);
  font-weight: var(--h-font-weight);
  letter-spacing: var(--h-letter-spacing);
  text-transform: var(--h-text-transform);
}