/**
 * =============================================================================
 *  CSS Reset
 * =============================================================================
 */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }

 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
 body {
   line-height: 1.2;
 }
 ol, ul {
   list-style: none;
 }

/**
 * =============================================================================
 *  CSS Global Variables
 * =============================================================================
 */

:root {
  /* General color scheme */
  --text-color: #000000;
  --bg-color: #ffffff;

  /* Miscellaneous */
  --border-color: rgb(189, 189, 189);

  /* Default font */
  --font-size: 100%;
  --font-family: "Atkinson Hyperlegible", sans-serif;
  --font-weight: 400;
  --font-style: normal;

  /* Margins */
  --page-margin-top:    8px;
  --page-margin-bottom: 0px;
  --page-margin-left:   32px;
  --page-margin-right:  32px;

  /* Layout */
  --section-margin-top:    12px;
  --section-margin-bottom: 83px;
  --sectionColumnWidth1:   16%;
  --sectionColumnWidth2:   20%;
  --sectionColumnWidth3:   56%;
  --sectionColumnGap:      16px;
  --sectionRowGap:         30px;

  /* Scene properties */
  --scene-height: 63.72vh;
  --scene-bg-color: rgb(242, 197, 41);
  --scene-border-color: var(--border-color);
  --scene-margin-bottom: 30px;

  /* Grid */
  --gridColumnWidth: 22%;
  --gridColumnGap:   14px;
  --gridRowGap:      18px;

  /* Mosaic */
  --mosaicColumnWidth: 23.5%;
  --mosaicColumnGap:   2%;
  --mosaicRowGap:      12px;
}


/**
 * =============================================================================
 *  WEBSITE LAYOUT COMPONENTS
 *   - Header section
 *   - Hero section (main scene)
 *   - Body (container for the page sections)
 *   - Footer
 * =============================================================================
 */
body {    
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  font-style:  var(--font-style);
  font-size:   var(--font-size);
  background-color: var(--bg-color);
}
a {
  color: var(--text-color);
  text-decoration: none; 
}

/*
 * HERO SECTION - Main scene
 */
.V--scene {
  overflow: hidden;
  background-color: var(--scene-bg-color);
  height: var(--scene-height);
  border-bottom: 1px solid var(--scene-border-color);
}
.V--sceneReference {
  display: block;
  position: absolute;
  top: calc(var(--scene-height) - var(--scene-margin-bottom));
  right: 0;
  margin-right: var(--page-margin-right);
  font-size: 81.251%;  
}

 /* Video Heroe */
#V--hero {      
  min-width: 100%;
  min-height: 100%;
}

/*
 * HEADER - Home and main menu
 */
.V--header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top:    var(--page-margin-top);
  margin-bottom: var(--page-margin-bottom);
  margin-left:   var(--page-margin-left);
  margin-right:  var(--page-margin-right);
}
.V--icon {
  vertical-align: bottom;
  height: 20px;
  margin: 0;
}
.V--iconSmall {
  vertical-align: top;
  height: 12px;
  margin: 1px 2px 0 0;
}
.V--home .V--icon {
  margin-right: 14px;
}

/* HOME: upper left side of the header */
.V--home {
  position: absolute;
  left: 0;
}
.V--home h1 {
  display: inline;
  font-size: 112.5%;
  font-weight: 700;
  line-height: 20px;
}

/* MENU: upper-right side of the header */
.V--menu {
  position: absolute;
  right: 0;
}
.V--menu a {
  font-size: 100%;
  font-weight: 400;
  line-height: 20px;
  margin-right: 10px;
}
.V--menu a:last-child {
  margin-right: 0;
}


/*
 * PAGE MAIN CONTAINER - Main container for the sections
 */
.V--main {
  margin-top:    var(--page-margin-top);
  margin-bottom: var(--page-margin-bottom);
  margin-left:   var(--page-margin-left);
  margin-right:  var(--page-margin-right);
}
.V--main .V--section:first-child {
  border-top: none;
}


/**
 * =============================================================================
 *  PAGE SECTIONS
 *   - Page content is grouped in "Sections"
 *   - Each "Section" contains two or three "Section Items"
 *   - The last "Section Item" contains "Items" on a grid (articles)
 * =============================================================================
 */

/* Sections and section items */
.V--section {
  margin: 0;
  position: relative;
  padding-top: var(--section-margin-top);
  padding-bottom: var(--section-margin-bottom);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: var(--sectionColumnGap);
  row-gap: var(--sectionRowGap);
}
.V--section.V--subSection.V--childSection {
  margin-top: calc(((var(--section-margin-top) + var(--section-margin-bottom)) * -1) + var(--gridRowGap));
}
.V--section a img {
  width: unset;
  height: unset;
}
.V--section .V--sectionItem.V--sectionSummary {
  width: var(--sectionColumnWidth1);
  min-width: 140px;
}
.V--section .V--sectionItem.V--sectionDetails {
  width: var(--sectionColumnWidth2);
  min-width: 165px;
}
.V--section .V--sectionItem.V--sectionGrid {
  width: var(--sectionColumnWidth3);
  min-width: 250px;
}

/* Text styles for section items */
.V--sectionItem h1 {
  font-size: 120%;
  font-weight: 700;
}
.V--sectionItem h2 {
  font-size: 100%;
  font-weight: 700;
}
.V--sectionItem h3 {
  font-size: 93.75%;
  font-weight: 700;
}
.V--sectionItem h4 {
  font-size: 87.5%;
  font-weight: 700;
}
.V--sectionItem h5 {
  font-size: 81.251%;
  font-weight: 700;
}
.V--sectionItem .V--item h5 {
  margin-top: 5px;
}
.V--sectionItem {
  font-size: 100%;
}
.V--sectionItem p  {
  font-size: 87.5%;
  font-weight: 400;
}
.V--sectionItem .V--item p {
  font-size: 81.251%;
  font-weight: 400;
}
.V--sectionItem .V--footer {
  display: block;
  margin-top: 8px;
  font-size: 81.251%; 
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}

/* Grid of items (portfolio) */
.V--sectionGrid {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: var(--gridColumnGap);
  row-gap: var(--gridRowGap);
}
.V--item img,
.V--item video {
  width: 100%;
  height: auto;
}
.V--sectionGrid .V--item {
  width: var(--gridColumnWidth);
}
.V--sectionGrid .V--item.V--large,
.V--sectionGrid .V--item.V--featured,  /* "featured" is the same as "large" except at 576px, when it becomes xlarge */
.V--sectionGrid .V--item.V--sectionMosaic {
  flex-basis: calc((var(--gridColumnWidth) * 2) + var(--gridColumnGap));
}
.V--sectionGrid .V--item.V--xlarge {
  flex-basis: calc((var(--gridColumnWidth) * 4) + (var(--gridColumnGap) * 3));
}
.V--sectionGrid .V--item.V--multiOrientation img {
  display: block;
}
.V--sectionGrid .V--item.V--multiOrientation .V--portrait {
  display: none;
}

/* Mosaic */
.V--sectionMosaic {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: var(--mosaicColumnGap);
  row-gap: var(--mosaicRowGap);
}
.V--sectionMosaic .V--item {
  width: var(--mosaicColumnWidth);
}

/* Divider */
.V--section .V--divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid var(--border-color);
 }
 .V--section.V--subSection .V--divider {
  left: unset;
  right: calc(var(--page-margin-right) - 10px);
  width: calc(100% - var(--sectionColumnWidth1) - var(--page-margin-right));
 }


/**
 * =============================================================================
 *  
 *                          M E D I A    Q U E R I E S 
 *
 * =============================================================================
 */
 @media screen and (max-width: 1570px) {
  :root {
    /* Mosaic */
    --mosaicColumnWidth: 32%;
    --mosaicColumnGap:   2%;
    --mosaicRowGap:      9px;
  }
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(10),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(11),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(12),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(13),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(14),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(15),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(16) {
    display: none;
  }
}
 
 
@media screen and (max-width: 1200px) {
  :root {
    /* Margins */
    --page-margin-top:    12px;
    --page-margin-bottom: 0px;
    --page-margin-left:   24px;
    --page-margin-right:  24px;

    /* Layout */
    --section-margin-bottom: 90px;
    --sectionColumnGap:      15px;
    --sectionRowGap:         30px;
    --sectionColumnWidth1:   26%;
    --sectionColumnWidth2:   64%;
    --sectionColumnWidth3:   100%;

    /* Mosaic */
    --mosaicRowGap: 11px;
  }
  
  /* Page sections */
  .V--section {
    flex-wrap: wrap;
  }

  /* Subsections and child sections */
  .V--section.V--subSection.V--childSection {
    margin-top: calc(((var(--section-margin-top) + var(--section-margin-bottom) + var(--sectionRowGap)) * -1) + var(--gridRowGap));
  }
  .V--section.V--subSection .V--sectionItem.V--sectionSummary {
    display: none;
  }
  .V--section.V--subSection .V--sectionItem.V--sectionDetails {
    width: 92%;
  }
  .V--section.V--subSection .V--divider {
    left: 0;
    right: unset;
    width: calc(100% - var(--page-margin-left));
   }
}

@media screen and (max-width: 912px) {
  :root {
    /* Grid */
    --gridColumnWidth: 48%;
    
    /* Mosaic */
    --mosaicColumnWidth: 48%;
    --mosaicColumnGap:   3%;
    --mosaicRowGap:      6px;
  }
  .V--sectionGrid .V--item.V--large,
  .V--sectionGrid .V--item.V--featured,
  .V--sectionGrid .V--item.V--sectionMosaic {
    flex-basis: var(--gridColumnWidth);
  }
  .V--sectionGrid .V--item.V--xlarge {
    flex-basis: calc((var(--gridColumnWidth) * 2) + var(--gridColumnGap));
  }
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(9) {
    display: none;
  }  
}

@media screen and (max-width: 768px) {
  :root {
    /* Margins */
    --page-margin-left:   20px;
    --page-margin-right:  20px;

    /* Layout */
    --section-margin-top:    12px;
    --section-margin-bottom: 80px;
    --sectionColumnGap:      14px;
    --sectionRowGap:         30px;
    --sectionColumnWidth1:   98;
    --sectionColumnWidth2:   98%;
    --sectionColumnWidth3:   100%;

    /* Grid */
    --gridColumnGap: 13px;
    --gridRowGap:    14px;

    /* Mosaic */
    --mosaicRowGap: 5px;
  }

  /* Page sections */
  .V--section {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

@media screen and (max-width: 576px) {
  :root {
    /* Grid */
    --gridColumnGap: 12px;
    --gridRowGap:    12px;

   /* Mosaic */
   --mosaicColumnWidth: 23.5%;
   --mosaicColumnGap:   2%;
  }
  .V--home h1 {
    font-size: 116%;
  }
  .V--menu {
    right: unset;
    left: 34px;
    position: absolute;
    top: 24px;
  }
  .V--sectionGrid .V--item.V--featured,
  .V--sectionGrid .V--item.V--sectionMosaic {
    flex-basis: calc((var(--gridColumnWidth) * 2) + var(--gridColumnGap));
  }
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(9),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(10),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(11),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(12),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(13),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(14),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(15),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(16) {
    display: inline;
  }
}

@media screen and (orientation: portrait) {
  #V--hero {
    margin-left: -58%;
    margin-top:  -44%;
  }
  .V--sectionGrid .V--item.V--multiOrientation img {
    display: none;
  }
  .V--sectionGrid .V--item.V--multiOrientation .V--portrait {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  :root {
    /* Margins */
    --page-margin-left:   18px;
    --page-margin-right:  18px;

    /* Layout */
    --section-margin-top:    12px;
    --section-margin-bottom: 70px;
    --sectionColumnGap:      12px;
    --sectionRowGap:         24px;

    /* Grid */
    --gridColumnWidth: 47.8%;
  }
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(13),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(14),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(15),
  .V--sectionGrid .V--sectionMosaic .V--item:nth-child(16) {
    display: none;
  }
}

@media screen and (max-width: 358px) {
  :root {
    /* Grid */
    --gridColumnWidth: 98%;

    /* Mosaic */
    --mosaicColumnWidth: 48%;
    --mosaicColumnGap:   3%;
    --mosaicRowGap: 3px;
  }
  .V--menu a {
    margin-right: 6px;
  }
  .V--sectionGrid .V--item.V--xlarge {
    flex-basis: var(--gridColumnWidth);
  }
}