:root {
  
  --container-width: 1120px;
  --header-height: 70px;
  --padding: 20px;

  --white: #FFF;
  --black : #000000;
  --yellow: #ddb054;

  --transition-button: 0.3s ease-out color, 0.3s ease-out background;
  --transition-menu: 0.3s ease-out transform;
  --transition-opacity: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-mask: 1s ease-out max-height;
}

.sanserif {font-family: "Gotham Narrow A", "Gotham Narrow B"; font-weight: 300; }
.serif {font-family: "Chronicle Display A", "Chronicle Display B"; }

/* ==========================================================================
  Structure
 ========================================================================== */
body { background: var(--black); color:var(--yellow); font-family: "Gotham Narrow A", "Gotham Narrow B"; font-size: 27px; line-height: 1.18; }
body:after { content:''; position: fixed; top:0; left:0; right:0; height: 32vh; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); pointer-events: none;}
.container { margin-left: auto; margin-right: auto; max-width: var(--container-width);  width: 100%; padding: 0 var(--padding); position: relative; }
p { margin-bottom: 10px; }

/* Colours */
.bg-white { background: var(--white); }
.bg-grey { background: var(--grey); }
.bg-black { background-color: var(--black); }
.dark-grey { color: var(--dark-grey); }
.dark-grey-alt { color: var(--dark-grey-alt); }
.light-grey { color: var(--light-grey); }


.button { height: 32px; line-height: 30px; border:1px solid var(--yellow); padding: 0 11px; font-size: 20px; display: inline-block; transition: var(--transition-button); text-transform: uppercase; }

/* ==========================================================================
  Header
 ========================================================================== */
.header { height: var(--header-height); line-height: var(--header-height); left:0; right: 0; top:0; overflow: visible; z-index: 1; }
.header img { width: 100%; height: auto; vertical-align: top; }
.header .container { height: 100%; }
.logo-hf { width:205px; height:30px; margin: auto auto auto 0; }
.logo-habanos { width:136px; height:25px; margin: auto 0 auto auto; }


/* ==========================================================================
  Layouts
 ========================================================================== */

/* Hero */
.layout-hero { position: relative; z-index: 0; height: 100vh; width: 100%; overflow: hidden; scroll-snap-align: start;}
.layout-hero svg { width: 100%; height: auto; }
.layout-hero article { max-width: 1015px; margin: auto auto 0 auto; z-index: 2; grid-template-columns: 22% auto; grid-gap:75px; padding-left: var(--padding); padding-right: var(--padding); padding-bottom: 62px; }
.layout-hero .button { margin-right: auto; margin-top: 12px; }
.layout-hero small { font-size: 15px; }
.layout-hero small a { font-weight: 600; }
.hero-text:before { content:''; background-color: var(--yellow); width: 96px; height: 4px; border-radius: 1px; display: block; margin-bottom: 25px; }
.hero-text sup { font-size: 20px; }
.hero-text > div { display: none; }
.hero-image { left: 0; top:0; bottom:0; width: 100%; z-index: -1; }
.hero-image:before { content:''; height: 100%; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); z-index: 1; }
.hero-image img { height: 100%; width: 100%; object-fit: cover; }
.hero-video { aspect-ratio: 16/9; margin-top:100px; height: calc(100vh - 518px); width: auto; position: relative;} 
.hero-video div { position: static !important; padding:0 !important; display: flex; height: 100%; }
.hero-video iframe { box-shadow: 7px 7px 15px 0px rgba(0,0,0,0.59); aspect-ratio: 16/9; width: auto !important; margin: auto; position: static !important;}

/* Partners */
.layout-partners { padding: 28px 0 86px 0; position: relative; z-index: 0; scroll-snap-align: start;}
.layout-partners h2 { font-size: 34px; margin-bottom: 30px; }
.layout-partners .swiper-slide { width: 20%; }
.partner-logo { max-width: 125px; margin:auto; }

/* Programme */
html { scroll-snap-type: y mandatory; } 
.programme-day { height: 100vh; scroll-snap-align: start; }
.programme-day-content-container { max-width: 890px; padding-bottom: 62px; margin-top:auto; grid-template-columns: 125px auto; grid-gap:38px; }
.programme-day h2 { font-size: 50px; }
.programme-day h2:before { content:''; width:90px; height:3px; border-radius: 1px; display: block; background-color: var(--yellow); margin-bottom: 12px; }
.programme-day h3 { font-size: 30px; margin-top:-6px; margin-bottom: 12px; }
.programme-day-image { left: 0; top:0; bottom:0; width: 100%; z-index: -1; }
.programme-day-image img { object-fit: cover; width: 100%; height: 100%; }
.programme-day-image:before { content:''; height: 100%; position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); z-index: 1; }
.programme-day-content p { font-size: 21px; line-height: 1.263157894736842; }
.programme-day-content .button {  margin-top:6px; }
.programme-day-content .button-read-more-link { color: inherit; padding: 0; display: block; font-size: 21px; cursor: pointer; margin-bottom: 10px; }
.programme-day-content small { font-size: 15px; display: block;}
.programme-day-content small a { font-weight: 600; }
.programme-day-content small p { font-size: inherit; }

/* Box Office */
.layout-boxoffice { aspect-ratio: 1492/690; background: #4d4d4d; scroll-snap-align: start; }

/* ==========================================================================
  Subpage
 ========================================================================== */
body.page-hwd-subpage:after { display: none; }
body.page-hwd-subpage .header { position: absolute; z-index: 2; }
.hwd-subpage { font-size: 20px; padding-top: 132px; position: relative; z-index: 1; }
.hwd-subpage article {  }
.hwd-subpage h2 { font-size: 59px; line-height: 114px; margin-bottom: 68px; }
.hwd-subpage h2 img { width: 114px; height: 114px; margin-right: 32px; }
.hwd-subpage h3 { font-size: 34px; margin-bottom: 24px; }
.hwd-subpage h3 sup { font-size: 18px; }
.hwd-subpage ul { margin-bottom: 36px; }
.hwd-subpage li { list-style-type: none; margin-bottom: 10px; }
.hwd-subpage-small-print { font-size: 16px; margin-top: 25px; }
.hwd-subpage-navigation { margin-top:20px; padding-top:10px; padding-bottom:20px; border-bottom: 1px solid var(--yellow); margin-bottom: 20px; }
.hwd-subpage-image { top:0; left:0; right:0; z-index: 0; height: 37.862595419847328vh;}
.hwd-subpage-image img { width: 100%; height: 100%; object-fit: cover; }
.hwd-subpage-image:after { content:''; position: absolute; top:0; bottom: 0; right: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,0.61) 0%, rgba(0,0,0,1) 100%); z-index: 1; }
.button-back { margin-left: auto; font-size: 20px;}

/* Checkout */
.hwd-subpage.is-checkout { padding-top:var(--header-height); }

/* ==========================================================================
  Footer
 ========================================================================== */
.footer { padding: 25px 0; font-size: 13px; text-align: center; min-height:135px; scroll-snap-align: start; color:var(--yellow); }
.footer a { display: block; line-height: 34px; border-bottom: 1px solid var(--yellow); margin-bottom: 25px; }

/* ==========================================================================
	Layout : Cookie
   ========================================================================== */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme { background: #321d0e !important; border: 0 !important; }
.moove-gdpr-cookie-notice p, .moove-gdpr-cookie-notice p a { color: #98694c !important; font-size: 16px !important; line-height: 1.4 !important; }
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton { background: #e4dcbf !important; color: #321d0e !important; text-transform: uppercase !important; height: auto; }
.moove-gdpr-info-bar-container { max-width: 1100px !important; width: 100% !important; margin: auto !important; padding: 14px 50px !important;  }
.moove-gdpr-info-bar-content, .moove-gdpr-cookie-notice {padding: 0 !important;}



/* ==========================================================================
  Media Queries
 ========================================================================== */
@media (hover: hover) {

    /* Layout : Hero */
    .button:hover { color:var(--black); background: var(--yellow); }
}

@media screen and ( orientation:portrait) {
  /* Hero : Video */
  .hero-video, .hero-video div { width:100%; height: auto;}
  .hero-video iframe { width: 100%!important; }
}

@media screen and ( max-width:1024px) {
    /* Checkout */
    .page-hwd-subpage .header { display: none; }
    .hwd-subpage.is-checkout { padding-top:0; }
    .hwd-subpage-navigation { display: none; }
}

@media screen and ( max-width:850px) {
	/* Cookie Banner */
	.moove-gdpr-cookie-notice p, .moove-gdpr-cookie-notice p a  { font-size: 13px !important;}
	.moove-gdpr-info-bar-container { padding: 14px 30px !important;  }
	.moove-gdpr-button-holder { margin-left: -4px !important; }
}

@media screen and (max-width: 768px) {

	body { font-size: 15px;}
  body:after { height: 24vh; }
  .button { font-size: 15px; }

	/* Header */
	.header { z-index: 2; }

	/* Layout : Hero */
	.layout-hero article { grid-template-columns: repeat(1, minmax(0, 1fr)); padding-bottom: 36px; grid-gap: 25px; width: 100%; margin-left: 0; }
	.hero-logo { width: 140px; }
	.hero-text { padding-right:40px; }
	.hero-text sup { font-size: 11px; }
	.hero-text:before { width: 156px; height: 2px; }
  .hero-image { bottom: auto; height: 80vh; }
  .hero-video { margin-top: 70px; margin-bottom: 20px;}

	/* Layout : Partners */
	.layout-partners h2 { font-size: 31px; }

	/* Layout : Programme */
  .programme-day-content-container { display: block; }
  .programme-day h2 { font-size: 40px; }
  .programme-day h3 { font-size: 24px; }
  .programme-day-content { padding-right: 40px; }
	.programme-day-content p { font-size: 15px; }
	.programme-day-logo { display: none; }
  .programme-day-image { bottom: auto; height: 60vh; }
  .programme-day-read-more { min-height: 18px; }
  .programme-day-read-more button { font-size: 15px; }

	/* Layout : Box Office */
	.layout-boxoffice { aspect-ratio: 364/557; }

    /* Layout : Subpage */
    .hwd-subpage { font-size: 15px; }
    .hwd-subpage h2 { font-size: 40px; line-height: normal; margin-bottom: 10px; flex-direction: column; }
    .hwd-subpage h2 img { margin-bottom: 20px; }
    .hwd-subpage h3 { font-size: 20px; margin-bottom: 24px; }
    .hwd-subpage h3 sup { font-size: 10px; }
    .hwd-subpage ul { margin-bottom: 28px; }
    .hwd-subpage-small-print { font-size: 13px; }
    .button-back { font-size: 15px; line-height: 32px; }

    /* Checkout */
    .hwd-subpage.is-checkout .container { padding-left:0; padding-right:0; }


	/* Footer */
	.footer { min-height: 113px; padding-top:16px; font-size:12px; }
	.footer a { margin-bottom: 14px; }

}

@media screen and (max-width: 400px) {
    /* Header */
    .logo-hf { width:164px; height:24px; }
    .logo-habanos { width:108px; height:20px; }
}

@media screen and (max-width: 375px) {
	
	.hero-logo { max-width: 140px; }
	.hero-text { padding-right:0; }
	.programme-day-content { padding-right: 0; }

}