/* ============================================= */
/* FONT FACES */
/* ============================================= */

@font-face {
  font-family: mercure;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Mercure-Regular.woff) format('woff');
}

@font-face {
  font-family: mercure;
  font-style: italic;
  font-weight: 500;
  src: url(../fonts/Mercure-Italic.woff) format('woff');
}


/* ============================================= */
/* ROOT VARIABLES & BASE STYLES */
/* ============================================= */

:root {
  --font-family: "Mercure", times, serif;
  --font-weight: 500;
  --letter-spacing: 0.1px;

  --t-xxsmall: ;
  --t-xsmall: 14px;
  --t-small: 15px;
  --t-medium: 17px;
  --t-body: 22px;
  --t-xmedium: 26px;
  --t-large: 30px;
  --t-xlarge: 36px;
  --t-xxlarge: 46px;
  --t-huge: ;

  --lh-xxsmall: ;
  --lh-xsmall: 20px;
  --lh-small: 22px;
  --lh-medium: 27px;
  --lh-body: 32px;
  --lh-xmedium: 29px;
  --lh-large: 40px;
  --lh-xlarge: 44px;
  --lh-xxlarge: 50px;
  --lh-huge: ;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, p>*, a, a>*, button, button>*, figcaption, figcaption>*, li, blockquote, blockquote>*, dt, dt>*, dd, dd>* {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-indent: inherit;
}

span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

figcaption,
caption, li {
  font-size: var(--t-xsmall);
  line-height: var(--lh-xsmall);
}

h1, h1>* {
  font-size: var(--t-xlarge);
  line-height: var(--lh-xlarge);
  margin: 0;
}

h2, h2>* {
  font-size: var(--t-large);
  line-height: var(--lh-large);
}

h3, h3>*, a {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

h3 {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
}

h4, h4>* {
  font-size: var(--t-medium);
  line-height: var(--lh-medium);
}

figcaption, figcaption>* {
  font-size: var(--t-small);
  line-height: var(--lh-small);
}


.n_space {
  letter-spacing: 0px;
}

p, p>*, p>*>* {
  font-size: inherit;
  line-height: inherit;
}

p {
  margin-bottom: 1.7rem;
}

p:last-of-type  {
  margin-bottom: 0;
}

p > a {
  display: inline;
}


/* ============================================= */
/* TEXT BALANCE/PRETTY */
/* ============================================= */

h5, h5>*,
h4, h4>*,
h3, h3>*,
h2, h2>* {
  text-wrap: balance !important;
}

@supports (text-wrap: pretty) {
  h5, h5>*,
  h4, h4>*,
  h3, h3>*,
  h2, h2>*, 
  p, p>*, p>*>* {
    text-wrap: pretty !important;
  }
}

/* ============================================= */
/* TYPOGRAPHY SCALE */
/* ============================================= */

.t-xxsmall {
  font-size: var(--t-xxsmall);
  line-height: var(--lh-xxsmall);
}

.t-xsmall {
  font-size: var(--t-xsmall);
  line-height: var(--lh-xsmall);
}

.t-small {
  font-size: var(--t-small);
  line-height: var(--lh-small);
}

.t-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.t-medium {
  font-size: var(--t-medium);
  line-height: var(--lh-medium);
}

.t-xmedium {
  font-size: var(--t-xmedium);
  line-height: var(--lh-xmedium);
}

.t-large {
  font-size: var(--t-large);
  line-height: var(--lh-large);
}

.t-xlarge {
  font-size: var(--t-xlarge);
  line-height: var(--lh-xlarge);
}

.t-xxlarge {
  font-size: var(--t-xxlarge);
  line-height: var(--lh-xxlarge);
}

.t-huge {
  font-size: var(--t-huge);
  line-height: var(--lh-huge);
}

/* ============================================= */
/* TEXT UTILITIES */
/* ============================================= */

/* Font styles */
.t-italic, em { font-style: italic; }
.t-ls-normal { letter-spacing: 0; }

/* Text transforms */
.t-capitalize { text-transform: capitalize; }
.t-uppercase { text-transform: uppercase; }
.t-lowercase { text-transform: lowercase; }
.t-initial { text-transform: initial; }

/* Text alignment */
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-right { text-align: right; }

/* Text decoration */
.t-underline { text-decoration: underline !important; }

/* ============================================= */
/* COMPONENT-SPECIFIC STYLES */
/* ============================================= */


/* ============================================= */
/* HOVER STATES */
/* ============================================= */

@media (hover: hover) {

}

/* ============================================= */
/* RESPONSIVE STYLES */
/* ============================================= */

/* Tablet styles: 600px – 1200px */
@media (min-width: 600px) and (max-width: 1200px) {

}

/* Tablet styles: 1200px – 1400px */
@media (min-width: 1200px) and (max-width: 1400px) {

}

/* Screens styles bigger than 1900px */
@media (min-width: 1900px) {

}

/* Mobile styles: up to 700px */
@media only screen and (max-width: 700px) {

}