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


/* Global Resets */

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

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


body.prototype {
  background: var(--grey60);
}

#desk_viewport {
  position: fixed;
  width: var(--VWD);
  height: var(--VHD);
  border-radius: calc(var(--BLU)*0.5);
  left: calc(var(--BLU)*1);
  top:  calc(var(--BLU)*5);
}

.desktop #desk_viewport {
  display: block;
}

.mobile #desk_viewport {
  display: none;
}

.info_box{
  position: fixed;
  width: calc(100% - (var(--BLU)*2));
}

.info_box > div {
  display: inline-block;
  vertical-align: top;
  width: calc(var(--BLU)*11);
  padding-bottom: var(--BLU);
}

.info_box > .scale {
  width: auto;
}

.mobile .info_box > .scale {
  display: none;
}

.info_box > .zoom {
  display: none;
}

.signatur_box {
  position: fixed;
  width: calc(100% - (var(--BLU)*2));
  bottom: var(--BLU);
}


.info_box .small {
  display: none;
}

.info_box .small::after {
  content: "• Not to scale!";
  position: absolute;
  display: inline-block;
  padding-left: calc(var(--BLU)*0.2);
  color: var(--red);
}


.device_box {
  position: fixed;
  top: var(--BLU);
  right: var(--BLU);
}

.device_box div {
  display: inline-block; 
  transition-property: none;
  transition-duration: none;
  transition-timing-function: none;
}

.device_box div:hover {
  cursor: pointer;
  color: var(--red);
  opacity: 1 !important;
}

.desktop .device_box #mobile,
.device_box #mobile {
  opacity: 0.3;
}

.desktop .device_box #desktop,
.device_box #desktop {
  opacity: 1;
}

.mobile .device_box #desktop {
  opacity: 0.3;
}

.mobile .device_box #mobile {
  opacity: 1;
}

.mobile .device_box #mobile,
.desktop .device_box #desktop{
  pointer-events: none;
}

.only .device_box {
  display: none;
}



/* Scaled View */

.scaled #desk_viewport {
  width: var(--VWDS);
  height: var(--VHDS);
  border-radius: calc(var(--BLU)*0.5);
}

.scaled .info_box .small {
  display: block;
}

.scaled .info_box .original {
  display: none;
}


/* Mobile View */

#mob_viewport {
  position: fixed;
  width: var(--DWMS);
  height: var(--DHMS);
  border-radius: calc(var(--BLU)*0.25);
  left: calc(var(--BLU)*1);
  top:  calc(var(--BLU)*5);
  background: var(--white);
  overflow: hidden;
}

.mobile_1_1 #mob_viewport iframe,
#mob_viewport iframe {
  width: var(--VWMS);
  height: var(--VHMS);
  top: 70px;
  position: relative;
}

.mobile_2_1 #mob_viewport iframe {
  width: var(--VWM);
  height: var(--VHM);
  top: 140px;
}

.mobile_2_1 #mob_viewport {
  width: var(--DWM);
  height: var(--DHM);
}

.desktop #mob_viewport {
  display: none;
}

.mobile #mob_viewport {
  display: block;
}

.mobile > .info_box > .zoom {
  display: inline-block;
}

.mobile > .info_box > .zoom > div {
  display: inline-block;
}

.browser_head,
.browser_foot {
  position: absolute;
  width: 100%;
  height: 20%;
  z-index: 20;
  pointer-events: none;
}

.browser_head {
  background: url("graph/safari-browser-head.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  top: 0;
}

.browser_foot {
  background: url("graph/safari-browser-foot.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  bottom: 0;
}

.m_original,
.m_large {
  transition: unset;
}


.mobile_1_1 .m_original,
.m_original {
  opacity: 1;
  pointer-events: none;
}

.mobile_1_1 .m_large:hover,
.m_large:hover {
  cursor: pointer;
  color: var(--red);
  opacity: 1;
}

.mobile_1_1 .m_large,
.m_large {
  opacity: 0.3;
}

.mobile_2_1 .m_original {
  opacity: 0.3;
  pointer-events: all;
}

.mobile_2_1 .m_large {
  opacity: 1;
  pointer-events: none;
}

.mobile_2_1 .m_original:hover {
  cursor: pointer;
  color: var(--red);
  opacity: 1;
}

.mobile_2_1 .m_large::after {
  content: "• Not to scale!";
  position: absolute;
  display: inline-block;
  padding-left: calc(var(--BLU)*0.2);
  color: var(--red);
}





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

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