:root {
  
  --font-x-large: 58px;
  --font-large: 50px;
  --font-medium-large: 46px;
  --font-medium: 40px; 
  --font-regular-large: 26px; 
  --font-regular: 22px; 
  --font-futura: "futura-pt", sans-serif;
  --font-gotham: "Gotham Narrow A", "Gotham Narrow B"; 

  --container-width: 1200px;
  --header-height: 70px;
  --padding: 26px;

  --gold: #c99c67;
  --black : #000000;
  --green: #516526;
  --white: #ffffff;

  --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;
}

.futura { font-family: var(--font-futura); }
.futura.medium { font-weight: 500; }
.gotham { font-family: var(--font-gotham); }

.font-x-large { font-size:var(--font-x-large); }
.font-large { font-size:var(--font-large); }
.font-medium-large: { font-size:var(--font-medium-large); }
.font-medium { font-size:var(--font-medium); }
.font-regular-large { font-size:var(--font-regular-large); }
.font-regular { font-size:var(--font-regular); }

/* ==========================================================================
  Structure
 ========================================================================== */
html { background: var(--black); background-image:url('../../images/selectos/background.jpg');  background-size: cover; background-attachment:fixed; }
body { color:var(--yellow); font-size: var(--font-regular); line-height: 1.272727272727273; font-family: var(--font-gotham); }
main { margin: 0 30px;}
p { margin-bottom: 30px; max-width: 1000px; margin-left: auto; margin-right: auto; }
figure { margin-left: auto; margin-right: auto; }
.container { margin-left: auto; margin-right: auto; max-width: var(--container-width);  width: 100%; padding: 0 var(--padding); position: relative; }

/* Colours */
.bg-white { background: var(--white); }
.gold { color:var(--gold); } 
.black { color:var(--black); } 
.green { color:var(--green); }
.white { color:var(--white); } 

h1,h2,h3 { color:var(--gold); font-family: var(--font-futura); }
h3.green { max-width: 350px; border-top:1px solid var(--green); border-bottom: 1px solid var(--green); line-height: 2.2; margin: -30px auto 35px auto;  }

/* Logos */
.logo-la-flor-de-cano-colour { width: 270px; height: 175px; margin: 56px auto 25px auto; aspect-ratio: 270/175; }
.logo-la-flor-de-cano { aspect-ratio: 170/106; max-width: 170px; }
.logo-habanons { top:0; right:0; width: 326px; height: 326px; overflow: hidden; aspect-ratio:1/1; }
.logo-habanons img { margin: -5px -5px 0 0;}
.logo-hf { left: 80px; top:70px; aspect-ratio:218/33; }


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

/* Header */
.header { margin-bottom: 50px; }

/* Videos */
.layout-video { padding-left: 0; padding-right: 0; margin-bottom: 56px; }

/* Main */
.layout-main { padding-top: 45px; padding-bottom: 64px; }

/* Cigar Grid */
.layout-cigar-grid { max-width: 750px; margin-left: auto; margin-right: auto; margin-bottom: 110px; }
.layout-cigar-grid figure { margin-bottom: 14px; }
.cigar { max-width: 90px; aspect-ratio: 90/660; }

/* Text */
.layout-text { margin-bottom: 55px; }
.layout-text h2 { margin-bottom: 40px;}
.layout-text figure { margin-bottom:30px; }

/* Footer */
.footer { margin: 160px auto 140px auto;}
.footer a { margin: auto; }
.footer-habanos { aspect-ratio: 302/135; max-width: 302px; } 
.footer-hf { aspect-ratio: 300/45; max-width: 300px; } 

/* Top */
.button-top { right: 80px; bottom: 100px; }
.button-top svg { width: 32px; height: 16px; margin: auto 20px auto auto; }

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

}

@media screen and ( max-width:1024px) {
  :root {
  
    --font-x-large: 44px;
    --font-large: 38px;
    --font-medium-large: 34px;
    --font-medium: 30px; 
    --font-regular-large: 20px; 
    --font-regular: 16px; 
  }

  /* Logos */
  .logo-la-flor-de-cano-colour { width: 135px; height: 87.5px; margin: 100px auto 12.5px auto; }
  .logo-habanons {  width: 163px; height: 163px; }
  .logo-hf { left: 40px; top:35px;}

  /* Main */
  p { margin-bottom: 20px; }
  .layout-main { padding-top: 24px; padding-bottom: 32px; }
  .layout-cigar-grid { margin-bottom: 55px;}
  .cigar { max-width: 45px; }
  .button-top  { position: static; margin: 40px auto auto auto;}

  /* Footer */
  .footer { margin: 80px auto 70px auto;}
  .footer-habanos, .footer-hf { max-width: 200px; }
}

@media screen and (orientation:portrait) {
  html { background-size: auto 100vh; }
}

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

  :root {
    --font-large: 25px;
  } 

  /* Header */
  .logo-habanons { width: 120px; height: 120px; }
  .logo-hf { width: 180px; top:20px; left: 30px; }
  .layout-text h2 { margin-bottom: 20px; }
  h3.green { margin-top:-10px; }

  /* Footer */
  .footer { flex-direction: column; }
  .footer .footer-habanos { margin-bottom: 40px; }
} 

/* ==========================================================================
	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 only 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; }
}