/*GLOBAL VARIABLES*/
  /* .bespokeHeroBanner {
    --bhb-background: #00338d;
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;
    --bhb-text-align: center;
  } */
  /*GLOBAL STYLES*/
  .bespokeHeroBanner {
    padding: 40px 0; margin: 0 0;
    background: var(--bhb-background);
    background-size: cover;
  }
  .bhb-contentContainer {
    background-color: transparent; 
    width: 1100px; 
    margin: auto;
  }
  .bespokeHeroBanner h2 {
      font-family: 'Open Sans Condensed',Arial,Helvetica,sans-serif;
      font-size: 3.9rem;
      line-height: 1.5;
      font-weight: 400;
      color: var(--bhb-heading-colour); 
      margin: 0px 0 15px 0; 
      padding: 0;
      text-align: var(--bhb-text-align); 
    }
  .bespokeHeroBanner h3 {font-size: 2rem; color: var(--bhb-heading-colour); font-weight: normal; margin: 5px 0 15px 0; text-align: var(--bhb-text-align); }
  .bespokeHeroBanner p {font-family: 'Open Sans',Arial,Helvetica,sans-serif;
      font-size: 1.6rem;
      line-height: 1.5;
      font-weight: 400;
      color: var(--bhb-font-colour); 
      text-align: var(--bhb-text-align); 
      margin: 0 0 15px 0;}
  .bespokeHeroBanner-link {color: var(--bhb-link-colour); font-weight: bold;}
  .bespokeHeroBanner-link:hover {text-decoration: underline;}

  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  .flexbox {
        display: block;
    }
  .bespoke-btn-bhb {
    background-color: var(--bhb-button-bg-colour);
    border: var(--bhb-button-border);
    color: var(--bhb-button-font-colour);
  }
  .bespoke-btn-bhb:hover {
    background-color: var(--bhb-button-hover-bg-colour) !important;
    color: var(--bhb-button-hover-font-colour);
  }

  /*TEXT ALIGNMENT CLASSES*/
  .bespokeHeroBanner-textLeft {
    --bhb-text-align: left !important;
  }
  .bespokeHeroBanner-textCenter {
    --bhb-text-align: center !important;
  }
  .cta-container {
    text-align: var(--bhb-text-align);
  }

  /*COLOUR CLASSES*/
  .bespokeHeroBanner-blue {
    --bhb-background: #00338d;
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;    
  }
  .bespokeHeroBanner-cobalt {
    --bhb-background: #1E49E2;
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #00338d;
    --bhb-button-hover-font-colour: #fff;    
  }
  .bespokeHeroBanner-purple {
    --bhb-background: #7213EA;
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #510DBC;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-darkBlue {
    --bhb-background: #0C233C;
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #00338d;
    --bhb-button-hover-font-colour: #fff;    
  }
  .bespokeHeroBanner-pacificBlue {
    --bhb-background: #00B8F5;
    --bhb-heading-colour: #00338D;
    --bhb-font-colour: #000;
    --bhb-link-colour: #0000EE;
    --bhb-button-border: none !important;
    --bhb-button-bg-colour: #00338D !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-skyBlue {
    --bhb-background: #76d2ff;
    --bhb-heading-colour: #00338D;
    --bhb-font-colour: #333;
    --bhb-link-colour: #0000EE;
    --bhb-button-border: none !important;
    --bhb-button-bg-colour: #00338D !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-lightBlue {
    --bhb-background: #ACEAFF;
    --bhb-heading-colour: #00338D;
    --bhb-font-colour: #333;
    --bhb-link-colour: #0000EE;
    --bhb-button-border: none !important;
    --bhb-button-bg-colour: #00338D !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-pink {
    --bhb-background: #FD349C;
    --bhb-heading-colour: #000;
    --bhb-font-colour: #000;
    --bhb-link-colour: #000;
    --bhb-button-border: 1px solid #000 !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #000;
    --bhb-button-hover-bg-colour: #ffa3da;
    --bhb-button-hover-font-colour: #000;  
  }
  .bespokeHeroBanner-gradientPurpleCobalt {
    --bhb-background: linear-gradient(90deg, #7213EA 50%, #1E49E2 100%);
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-gradientBlue {
    --bhb-background: linear-gradient(90deg, #00B8F5 50%, #ACEAFF 100%);
    --bhb-heading-colour: #00338D;
    --bhb-font-colour: #000;
    --bhb-link-colour: #0000EE;
    --bhb-button-border: none !important;
    --bhb-button-bg-colour: #00338D !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  .bespokeHeroBanner-gradientPurple {
    --bhb-background: linear-gradient(90deg, #510DBC 25%, #7213EA 75%, #8E42EE 100%);
    --bhb-heading-colour: #fff;
    --bhb-font-colour: #fff;
    --bhb-link-colour: #fff;
    --bhb-button-border: 1px solid #fff !important;
    --bhb-button-bg-colour: transparent !important;
    --bhb-button-font-colour: #fff;
    --bhb-button-hover-bg-colour: #1E49E2;
    --bhb-button-hover-font-colour: #fff;  
  }
  
  /* smaller screens */
  @media only screen and (max-width: 1100px) {
  .bespokeHeroBanner {padding: 20px;}
  .bhb-contentContainer {width: 100%; margin: auto;}
  }
  
  /* mobile */
  @media only screen and (max-width: 640px) {
  .bespokeHeroBanner-custom {background: var(--bhb-backgroundmobile);}
  }