@charset "UTF-8";
/* CSS Document */


/* Global Resets */

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

/* Font Families */
/* Univers Flux / Roman */
@font-face {
    font-family: 'Univers Flux';
    src: url('fonts/UniversFlux_Roman.eot');
    src: url('fonts/UniversFlux_Roman.eot?#iefix') format('embedded-opentype'),
         url('fonts/UniversFlux_Roman.woff2') format('woff2'),
         url('fonts/UniversFlux_Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

/* Univers Flux / Medium */
@font-face {
    font-family: 'Univers Flux';
    src: url('fonts/UniversFlux_Medium.eot');
    src: url('fonts/UniversFlux_Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/UniversFlux_Medium.woff2') format('woff2'),
         url('fonts/UniversFlux_Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* Univers Flux / Bold */
@font-face {
    font-family: 'Univers Flux';
    src: url('fonts/UniversFlux_Bold.eot');
    src: url('fonts/UniversFlux_Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/UniversFlux_Bold.woff2') format('woff2'),
         url('fonts/UniversFlux_Bold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* Variables */
:root {
  --Univers: 'Univers Flux', Helvetica Neue, Helvetica, Arial, sans-serif;
  
  --BLU: 25px; /* Baseline Unit*/
  --FSR: (85 / 100); /* Font Size Ratio */
  
  --LHA: calc(var(--BLU) * 4.913);
  --FSA: calc((var(--BLU) * 4.913) * var(--FSR));
  
  --LHB: calc(var(--BLU) * 2.89);
  --FSB: calc((var(--BLU) * 2.89) * var(--FSR));
  
  --LHC: calc(var(--BLU) * 1.7);
  --FSC: calc((var(--BLU) * 1.7) * var(--FSR));
  
  --LHD: calc(var(--BLU) * 1);
  --FSD: calc((var(--BLU) * 1) * var(--FSR));
  
  --black:  hsla(0,0%,0%,1.00);
  --grey20: hsla(0,0%,20%,1.00);
  --grey40: hsla(0,0%,40%,1.00);
  --grey60: hsla(0,0%,60%,1.00);
  --grey80: hsla(0,0%,80%,1.00);
  --white:  hsla(0,0%,100%,1.00);
  --red:    hsla(8,100%,45%,1.00);
  
  --VWD: 1920px;
  --VHD: 1080px;
  
  --VWDS: calc(var(--VWD)/3*2);
  --VHDS: calc(var(--VHD)/3*2);
  
  --DWM: 750px;
  --DHM: 1334px;
  
  --DWMS: calc(var(--DWM)/2);
  --DHMS: calc(var(--DHM)/2);
  
  --VWM: 750px;
  --VHM: 1106px;
  
  --VWMS: calc(var(--VWM)/2);
  --VHMS: calc(var(--VHM)/2);
}


/* 1 / Desktop / XL / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

*{
  font-family: var(--Univers);
  font-weight: 500;
  font-style: normal;

  font-size: var(--FSD);
  line-height: var(--LHD);

  -webkit-hyphens: auto;
  -khtml-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}

body {
  background: var(--white);
  padding: var(--BLU);
}

h1 { 
  font-size: var(--FSA);
  line-height: var(--LHA);
  margin-bottom: var(--BLU);
}

h2{ 
  font-size: var(--FSB);
  line-height: var(--LHB);
  margin-bottom: var(--BLU);
}

h3{ 
  font-size: var(--FSC);
  line-height: var(--LHC);
  margin-bottom: var(--BLU);
}


.list {
  margin-bottom: var(--BLU);
}

.list, .list a, .list a:link, .list a:visited, .list a div {
  font-size: var(--FSC);
  line-height: var(--LHC);
  margin-bottom: none;
  text-decoration: none;
  color: var(--black);
}

.list a:nth-child(1) {
  pointer-events: none;
}

.list a:nth-child(1) div {
  font-size: var(--FSD);
  line-height: var(--LHD);
}

.list a {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.list a div {
  position: relative;
  border-bottom: solid 1px var(--black);
  padding-bottom: var(--BLU);
  padding-top: var(--BLU);
  height: calc(var(--BLU)*3.4);
  white-space: nowrap;
  overflow: hidden;
}

.list a:hover div {
  background: var(--grey80);
  cursor: pointer;
}

.list a div:nth-child(1) {
  grid-column: span 3;
}

.list a div:nth-child(2) {
  grid-column: span 1;
}

.list a div:nth-child(3) {
  grid-column: span 2;
}

.list a div::after {
  content: "";
  width: calc(var(--BLU)*2);
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  
  background: rgb(255,255,255);
  background: linear-gradient(90deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,1.00) var(--BLU));
}

.list a:hover div::after {
  background: hsla(0,0%,80%,0);
  background: linear-gradient(90deg, hsla(0,0%,80%,0) 0%, hsla(0,0%,80%,1) var(--BLU));
}





/* 2 / Laptop / L / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 2100px) {
  :root {
    --BLU: 21px;
  }
}

/* 3 / Laptop / M / */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media all and (max-width: 1200px) {
  :root {
    --BLU: 17px;
  }
}