@charset "UTF-8";
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, button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
}

@font-face {
  font-family: "Protokoll";
  src: url("/fonts/Protokoll-Light.woff2") format("woff2"), url("/fonts/Protokoll-Light.woff") format("woff");
  font-style: normal;
  font-weight: 300;
}
/*
$clr-bg-id6: #D6E3D1; // Installatörsföretagen
$clr-bg-id8: #B2CDDE; // #005B94; // Tobii
$clr-bg-id10: #C0B5A2; // uno form
*/
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes scaling {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.6);
  }
  60% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(0.35);
  }
  90% {
    transform: scale(0.35);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scroll-tablet {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(calc(-1 * (50% - 27.5vw)));
  }
  50% {
    transform: translateY(calc(-1 * (50% - 27.5vw)));
  }
  60% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-tablet-long {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(calc(-1 * (37% - 27.5vw)));
  }
  45% {
    transform: translateY(calc(-1 * (37% - 27.5vw)));
  }
  50% {
    transform: translateY(calc(-1 * (60% - 27.5vw)));
  }
  70% {
    transform: translateY(calc(-1 * (60% - 27.5vw)));
  }
  75% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-tablet-xlong {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(-1 * (20% - 27.5vw)));
  }
  35% {
    transform: translateY(calc(-1 * (20% - 27.5vw)));
  }
  40% {
    transform: translateY(calc(-1 * (45% - 27.5vw)));
  }
  55% {
    transform: translateY(calc(-1 * (45% - 27.5vw)));
  }
  60% {
    transform: translateY(calc(-1 * (70% - 27.5vw)));
  }
  75% {
    transform: translateY(calc(-1 * (70% - 27.5vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-tablet-xxlong {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  17% {
    transform: translateY(calc(-1 * (15% - 27.5vw)));
  }
  27% {
    transform: translateY(calc(-1 * (15% - 27.5vw)));
  }
  34% {
    transform: translateY(calc(-1 * (36% - 27.5vw)));
  }
  44% {
    transform: translateY(calc(-1 * (36% - 27.5vw)));
  }
  51% {
    transform: translateY(calc(-1 * (57% - 27.5vw)));
  }
  61% {
    transform: translateY(calc(-1 * (57% - 27.5vw)));
  }
  68% {
    transform: translateY(calc(-1 * (76% - 27.5vw)));
  }
  78% {
    transform: translateY(calc(-1 * (76% - 27.5vw)));
  }
  85% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 55vw)));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-l {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(calc(-1 * (50% - 25.875vw)));
  }
  50% {
    transform: translateY(calc(-1 * (50% - 25.875vw)));
  }
  60% {
    transform: translateY(calc(-1 * (100% - 51.75vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 51.75vw)));
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-m {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(calc(-1 * (50% - 27.8333vw)));
  }
  50% {
    transform: translateY(calc(-1 * (50% - 27.8333vw)));
  }
  60% {
    transform: translateY(calc(-1 * (100% - 55.6666vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 55.6666vw)));
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-s {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(calc(-1 * (50% - 57vw)));
  }
  50% {
    transform: translateY(calc(-1 * (50% - 57vw)));
  }
  60% {
    transform: translateY(calc(-1 * (100% - 114vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 114vw)));
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-long-l {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(-1 * (25% - 25.875vw)));
  }
  35% {
    transform: translateY(calc(-1 * (25% - 25.875vw)));
  }
  40% {
    transform: translateY(calc(-1 * (50% - 25.875vw)));
  }
  55% {
    transform: translateY(calc(-1 * (50% - 25.875vw)));
  }
  60% {
    transform: translateY(calc(-1 * (75% - 25.875vw)));
  }
  75% {
    transform: translateY(calc(-1 * (75% - 25.875vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 51.75vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 51.75vw)));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-long-m {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(-1 * (25% - 27.8333vw)));
  }
  35% {
    transform: translateY(calc(-1 * (25% - 27.8333vw)));
  }
  40% {
    transform: translateY(calc(-1 * (50% - 27.8333vw)));
  }
  55% {
    transform: translateY(calc(-1 * (50% - 27.8333vw)));
  }
  60% {
    transform: translateY(calc(-1 * (75% - 27.8333vw)));
  }
  75% {
    transform: translateY(calc(-1 * (75% - 27.8333vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 55.6666vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 55.6666vw)));
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scroll-phone-long-s {
  0% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(-1 * (25% - 57vw)));
  }
  35% {
    transform: translateY(calc(-1 * (25% - 57vw)));
  }
  40% {
    transform: translateY(calc(-1 * (50% - 57vw)));
  }
  55% {
    transform: translateY(calc(-1 * (50% - 57vw)));
  }
  60% {
    transform: translateY(calc(-1 * (75% - 57vw)));
  }
  75% {
    transform: translateY(calc(-1 * (75% - 57vw)));
  }
  80% {
    transform: translateY(calc(-1 * (100% - 114vw)));
  }
  95% {
    transform: translateY(calc(-1 * (100% - 114vw)));
  }
  100% {
    transform: translateY(0);
  }
}
html {
  font-size: 62.5%;
}
html.menu-open {
  overflow: hidden;
}

body {
  background: #f5f5f5;
  color: #000;
  font-family: "Protokoll", sans-serif;
  font-size: 2rem;
  font-weight: 300;
  line-height: 3rem;
  text-rendering: optimizeLegibility;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
@media only screen and (max-width: 1023px) {
  body {
    font-size: 1.8rem;
    line-height: 2.8rem;
  }
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
}

a {
  color: #000;
  text-decoration: none;
}
a.text {
  position: relative;
}
a.text:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 1px;
  left: 0;
  background-color: #000;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
a.text:hover:before {
  background-color: transparent;
}
a.next h2 {
  display: inline-block;
  position: relative;
}
a.next h2:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 10%;
  left: 0;
  background-color: #000;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
a.next:hover h2:before {
  background-color: transparent;
}

h1,
section > header > h2,
body.work p.info,
html.case p.info,
html.case footer h2,
html.about p.info {
  font-size: 3.1281vw;
  line-height: 4.1056vw;
}
@media only screen and (max-width: 1023px) {
  h1,
section > header > h2,
body.work p.info,
html.case p.info,
html.case footer h2,
html.about p.info {
    font-size: 3.2rem;
    line-height: 4.2rem;
  }
}
@media only screen and (max-width: 767px) {
  h1,
section > header > h2,
body.work p.info,
html.case p.info,
html.case footer h2,
html.about p.info {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }
}

p.byline {
  bottom: 0;
  color: #fff;
  display: none;
  font-size: 1.4rem;
  line-height: 1.4rem;
  opacity: 0.7;
  position: absolute;
  right: 15px;
  transform: rotate(90deg);
  transform-origin: top right;
}
html.js p.byline {
  display: block;
}

p.info + p.info {
  margin-top: 3.294vw;
}
@media only screen and (max-width: 1366px) {
  p.info + p.info {
    margin-top: 4.5rem;
  }
}
@media only screen and (max-width: 1023px) {
  p.info + p.info {
    margin-top: 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  p.info + p.info {
    margin-top: 3rem;
  }
}

body > header {
  left: 0;
  margin: 30px 0 0;
  padding: 0 4%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 100;
}
@media only screen and (max-width: 1023px) {
  body > header {
    margin-top: 28px;
  }
}
@media only screen and (max-width: 767px) {
  body > header {
    margin-top: 24px;
  }
}

main {
  padding-top: 50vh;
  position: relative;
  z-index: 10;
}
html.home main {
  background: #f5f5f5;
}

footer {
  height: 100vh;
  padding: 0 4%;
  position: relative;
  z-index: 1;
}
html.case footer {
  z-index: 99;
}
footer p.mail {
  bottom: 30px;
  left: 4%;
  position: absolute;
}
@media only screen and (max-width: 1023px) {
  footer p.mail {
    bottom: 28px;
  }
}
@media only screen and (max-width: 767px) {
  footer p.mail {
    bottom: 24px;
  }
}
footer p.copyright {
  bottom: 30px;
  right: 4%;
  position: absolute;
}
@media only screen and (max-width: 1023px) {
  footer p.copyright {
    bottom: 28px;
  }
}
@media only screen and (max-width: 767px) {
  footer p.copyright {
    bottom: 24px;
    text-align: right;
  }
  footer p.copyright span {
    display: block;
  }
}
footer div.logo {
  border: 1px solid #000;
  border-radius: 50%;
  height: calc((92vw - 450px) * 4 / 16 + 90px);
  left: 50%;
  margin-right: -50%;
  opacity: 0.7;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;
  width: calc((92vw - 450px) * 4 / 16 + 90px);
}
footer div.logo:after, footer div.logo:before {
  border: 1px solid #000;
  border-radius: 50%;
  content: "";
  display: block;
  height: calc((92vw - 450px) * 4 / 16 + 90px);
  left: 50%;
  margin-right: -50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 1s ease 1.5s;
  width: calc((92vw - 450px) * 4 / 16 + 90px);
}
footer div.logo.inview {
  /*
  transform: translate(-50%, -75%);
  &:after {
  	transform: translate(-85%, 10%);
  }
  &:before {
  	transform: translate(-15%, 10%);
  }
  */
  opacity: 1;
  transform: translate(-50%, -90%);
}
footer div.logo.inview:after {
  transform: translate(-85%, 10%);
}
footer div.logo.inview:before {
  transform: translate(-15%, 10%);
}

::selection {
  background: #F1DBDA;
}

html.js nav {
  background: #F1DBDA;
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: auto;
  padding: 30px 4%;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media only screen and (max-width: 1023px) {
  html.js nav {
    padding: 28px 4%;
  }
}
@media only screen and (max-width: 767px) {
  html.js nav {
    padding: 24px 4%;
  }
}
html.js nav ul.base {
  align-items: flex-start;
  display: flex;
  justify-content: flex-start;
  position: fixed;
  z-index: 1001;
}
html.js nav ul.base li {
  display: block;
  margin-right: 30px;
}
@media only screen and (max-width: 1023px) {
  html.js nav ul.base li {
    margin-right: 28px;
  }
}
@media only screen and (max-width: 767px) {
  html.js nav ul.base li {
    margin-right: 24px;
  }
}
html.js nav ul.base a {
  position: relative;
}
html.js nav ul.base a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 1px;
  left: 0;
  background-color: #000;
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
html.js nav ul.base a:hover:before {
  background-color: transparent;
}
html.js nav ul.base li[data-selected] a:before {
  background-color: transparent;
}
html.js nav ul.base li[data-selected] a:hover:before {
  background-color: #000;
}
html.js nav ul.work {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 120px;
  opacity: 0;
  transform: translateY(100px);
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.1, 0.5, 0.4, 1);
}
@media only screen and (max-width: 1023px) {
  html.js nav ul.work {
    margin-top: 112px;
  }
}
@media only screen and (max-width: 767px) {
  html.js nav ul.work {
    margin-top: 96px;
  }
}
html.js nav ul.work li {
  margin: 0 0 105px 2vw;
  width: calc((100% - 30vw) * 4 / 16 + 6vw);
}
@media only screen and (max-width: 1023px) {
  html.js nav ul.work li {
    margin-bottom: 98px;
    width: calc((100% - 22vw) * 4 / 12 + 6vw);
  }
}
@media only screen and (max-width: 767px) {
  html.js nav ul.work li {
    margin: 0 0 84px 4vw;
    width: calc((100% - 20vw) * 3 / 6 + 8vw);
  }
}
html.js nav ul.work li:nth-child(4n+1) {
  margin-left: 0;
}
@media only screen and (max-width: 1023px) {
  html.js nav ul.work li:nth-child(4n+1) {
    margin-left: 2vw;
  }
  html.js nav ul.work li:nth-child(3n+1) {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  html.js nav ul.work li:nth-child(n) {
    margin-left: 4vw;
  }
  html.js nav ul.work li:nth-child(2n+1) {
    margin-left: 0;
  }
}
html.js nav ul.work img {
  display: block;
  height: auto;
  width: 100%;
}
html.js nav ul.work a {
  display: block;
  position: relative;
}
html.js nav ul.work a:before, html.js nav ul.work a:after {
  background: #F1DBDA;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 10;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
html.js nav ul.work a:hover:before {
  opacity: 1;
  transform: rotate(45deg);
}
html.js nav ul.work a:hover:after {
  opacity: 1;
  transform: rotate(-45deg);
}
html.js nav ul.work a img {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
html.js nav ul.work a:hover img {
  opacity: 0.4;
}
html.js nav ul.work a[href*=swecon] img {
  -webkit-mask-image: radial-gradient(circle at 50% 115%, transparent 28%, black 28%);
  mask-image: radial-gradient(circle at 50% 115%, transparent 28%, black 28%);
  /*
  mix-blend-mode: multiply;
  */
}
html.js nav ul.work a[href*=kivra] img {
  background-color: #fff;
}
html.js nav ul.work li[data-selected] a:before {
  opacity: 1;
  transform: rotate(45deg);
}
html.js nav ul.work li[data-selected] a:after {
  opacity: 1;
  transform: rotate(-45deg);
}
html.js nav ul.work li[data-selected] a img {
  opacity: 0.4;
}
html.js nav ul.work p {
  padding-top: 1vw;
  position: absolute;
  top: 100%;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  html.js nav ul.work p {
    padding-top: 2vw;
  }
}

html.menu-open nav {
  opacity: 1;
  pointer-events: all;
}
html.menu-open nav ul.work {
  opacity: 1;
  transform: translateY(0);
}

html.menu-open body {
  background: #F1DBDA;
}

button#menu-toggler {
  height: 40px;
  right: 4%;
  outline: none;
  overflow: hidden;
  position: fixed;
  text-indent: -1000px;
  top: 25px;
  width: 40px;
  z-index: 1001;
}
@media only screen and (max-width: 1023px) {
  button#menu-toggler {
    top: 22px;
  }
}
@media only screen and (max-width: 767px) {
  button#menu-toggler {
    top: 16px;
  }
}
button#menu-toggler::before, button#menu-toggler::after {
  background: #000;
  content: "";
  height: 1px;
  left: 1px;
  position: absolute;
  width: 38px;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
button#menu-toggler::before {
  top: 12px;
}
html.menu-open button#menu-toggler::before {
  left: 2px;
  top: 19px;
  transform: rotate(45deg);
}
button#menu-toggler:hover::before {
  transform: translateY(-4px);
}
html.menu-open button#menu-toggler:hover::before {
  left: 0;
  width: 43px;
}
button#menu-toggler::after {
  top: 26px;
}
html.menu-open button#menu-toggler::after {
  left: 2px;
  top: 19px;
  transform: rotate(-45deg);
}
button#menu-toggler:hover::after {
  transform: translateY(4px);
}
html.menu-open button#menu-toggler:hover::after {
  left: 0;
  width: 43px;
}

html.home main > header {
  padding: 0 4%;
  position: absolute;
}
@media only screen and (max-width: 767px) {
  html.home main > header {
    padding: 0 4% 48px;
    position: static;
  }
}

html.home section.work {
  padding: 0 4% 270px;
}
@media only screen and (max-width: 1023px) {
  html.home section.work {
    padding-bottom: 252px;
  }
}
@media only screen and (max-width: 767px) {
  html.home section.work {
    padding-bottom: 96px;
  }
}
html.home section.work article:nth-of-type(1) {
  margin-left: calc((100% - 30vw) * 6 / 16 + 12vw);
  text-align: right;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(1) {
    margin-left: calc((100% - 22vw) * 5 / 12 + 10vw);
  }
}
html.home section.work article:nth-of-type(2) {
  margin: 0 calc((100% - 30vw) * 10 / 16 + 20vw) 0 0;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(2) {
    margin-right: calc((100% - 22vw) * 7 / 12 + 14vw);
  }
}
html.home section.work article:nth-of-type(3) {
  margin: 0 calc((100% - 30vw) * 4 / 16 + 8vw) 0 calc((100% - 30vw) * 6 / 16 + 12vw);
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(3) {
    margin: 0 calc((100% - 22vw) * 3 / 12 + 6vw) 0 calc((100% - 22vw) * 5 / 12 + 10vw);
  }
}
html.home section.work article:nth-of-type(4) {
  margin: 0 0 0 calc((100% - 30vw) * 12 / 16 + 24vw);
  text-align: right;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(4) {
    margin-left: calc((100% - 22vw) * 9 / 12 + 18vw);
  }
}
html.home section.work article:nth-of-type(5) {
  margin: 0 calc((100% - 30vw) * 4 / 16 + 8vw) 0 calc((100% - 30vw) * 4 / 16 + 8vw);
  text-align: right;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(5) {
    margin: 0 calc((100% - 22vw) * 3 / 12 + 6vw) 0 calc((100% - 22vw) * 3 / 12 + 6vw);
  }
}
html.home section.work article:nth-of-type(6) {
  margin: 0 calc((100% - 30vw) * 12 / 16 + 24vw) 0 0;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(6) {
    margin-right: calc((100% - 22vw) * 9 / 12 + 18vw);
  }
}
html.home section.work article:nth-of-type(7) {
  margin: 0 calc((100% - 30vw) * 6 / 16 + 12vw) 0 calc((100% - 30vw) * 4 / 16 + 8vw);
}
@media only screen and (max-width: 1023px) {
  html.home section.work article:nth-of-type(7) {
    margin: 0 calc((100% - 22vw) * 5 / 12 + 10vw) 0 calc((100% - 22vw) * 3 / 12 + 6vw);
  }
}
@media only screen and (max-width: 767px) {
  html.home section.work article:nth-of-type(n) {
    margin: 0 0 8vw;
    text-align: left;
  }
}
html.home section.work article a {
  display: block;
  position: relative;
}
html.home section.work article a:before, html.home section.work article a:after {
  background: #f5f5f5;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 10;
  transition-property: opacity, transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
@media only screen and (max-width: 767px) {
  html.home section.work article a:before, html.home section.work article a:after {
    top: 46vw;
  }
}
html.home section.work article a:hover:before {
  opacity: 1;
  transform: rotate(45deg);
}
html.home section.work article a:hover:after {
  opacity: 1;
  transform: rotate(-45deg);
}
html.home section.work article a img {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
html.home section.work article a:hover img {
  opacity: 0.6;
}
html.home section.work article img {
  display: block;
  margin-bottom: 2vw;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  html.home section.work article img {
    margin-bottom: 4vw;
  }
}
html.home section.work article a[href*=swecon] img {
  -webkit-mask-image: radial-gradient(circle at 50% 115%, transparent 28%, black 28%);
  mask-image: radial-gradient(circle at 50% 115%, transparent 28%, black 28%);
  /*
  mix-blend-mode: multiply;
  */
}
html.home section.work article a[href*=kivra] img {
  background-color: #fff;
}
html.home section.work article div {
  padding-top: 2vw;
  position: absolute;
  top: 100%;
  width: 100%;
}
@media only screen and (max-width: 1023px) {
  html.home section.work article div {
    padding-top: 2vw;
  }
}
@media only screen and (max-width: 767px) {
  html.home section.work article div {
    padding-top: 0;
    position: static;
  }
}

html.home section.clients {
  background: #fff;
  padding: 120px 4% 180px;
}
@media only screen and (max-width: 1023px) {
  html.home section.clients {
    padding: 112px 4% 168px;
  }
}
@media only screen and (max-width: 767px) {
  html.home section.clients {
    padding: 48px 4% 96px;
  }
}
html.home section.clients > header {
  margin-bottom: 120px;
}
@media only screen and (max-width: 1023px) {
  html.home section.clients > header {
    margin-bottom: 112px;
  }
}
@media only screen and (max-width: 767px) {
  html.home section.clients > header {
    margin-bottom: 48px;
  }
}
html.home section.clients > div {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
html.home section.clients article {
  margin: 0 0 4vw 2vw;
  box-sizing: border-box;
  opacity: 0.9;
  padding: 0 1vw;
  width: calc((100% - 30vw) * 4 / 16 + 6vw);
}
@media only screen and (max-width: 1023px) {
  html.home section.clients article {
    width: calc((100% - 22vw) * 4 / 12 + 6vw);
  }
}
@media only screen and (max-width: 767px) {
  html.home section.clients article {
    margin: 0 0 4vw 2vw;
    width: calc((100% - 10vw) * 3 / 6 + 4vw);
  }
}
html.home section.clients article:first-child {
  margin-left: 0;
}
html.home section.clients article:nth-child(3) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
}
html.home section.clients article:nth-child(4) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(5) {
  margin-right: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(6) {
  margin-left: 0;
}
html.home section.clients article:nth-child(7) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
}
html.home section.clients article:nth-child(9) {
  margin-left: 0;
}
html.home section.clients article:nth-child(10) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
  margin-right: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(11) {
  margin-left: 0;
}
html.home section.clients article:nth-child(13) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
}
html.home section.clients article:nth-child(14) {
  margin-left: calc((100% - 30vw) * 8 / 16 + 16vw);
}
html.home section.clients article:nth-child(16) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(17) {
  margin-right: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(18) {
  margin-left: 0;
}
html.home section.clients article:nth-child(19) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
}
html.home section.clients article:nth-child(21) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 8vw);
}
html.home section.clients article:nth-child(22) {
  margin-left: calc((100% - 30vw) * 4 / 16 + 10vw);
}
@media only screen and (max-width: 1023px) {
  html.home section.clients article:nth-child(n) {
    margin: 0 0 4vw 2vw;
  }
  html.home section.clients article:nth-child(3n+1) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(2) {
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(3) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(4) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(5) {
    margin-left: 0;
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(8) {
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(9) {
    margin-left: calc((100% - 22vw) * 8 / 12 + 16vw);
  }
  html.home section.clients article:nth-child(11) {
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(12) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(13) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(14) {
    margin-left: 0;
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(16) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
    margin-right: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(17) {
    margin-left: 0;
    margin-right: calc((100% - 22vw) * 8 / 12 + 16vw);
  }
  html.home section.clients article:nth-child(18) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(19) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(20) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(21) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
  html.home section.clients article:nth-child(22) {
    margin-left: calc((100% - 22vw) * 4 / 12 + 8vw);
  }
}
@media only screen and (max-width: 767px) {
  html.home section.clients article:nth-child(n) {
    margin: 0 0 4vw 2vw;
  }
  html.home section.clients article:nth-child(2n+1) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(7) {
    margin-right: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(8) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(9) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(10) {
    margin-left: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(11) {
    margin-right: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(12) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(13) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(14) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(15) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(16) {
    margin-left: 0;
    margin-right: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(17) {
    margin-left: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(18) {
    margin-left: 0;
  }
  html.home section.clients article:nth-child(19) {
    margin-left: 2vw;
  }
  html.home section.clients article:nth-child(20) {
    margin-left: 0;
    margin-right: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
  html.home section.clients article:nth-child(21) {
    margin-left: calc((100% - 10vw) * 3 / 6 + 6vw);
  }
}
html.home section.clients img {
  display: block;
  height: auto;
  width: 100%;
}

html.js.about body {
  background: #F1DBDA;
}
html.js.about body main {
  background: #F1DBDA;
  transition-property: background;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

html.scrolledPage.about body {
  background: #f5f5f5;
}
html.scrolledPage.about body main {
  background: #f5f5f5;
}

html.about main > header {
  padding: 0 4%;
  position: absolute;
}
@media only screen and (max-width: 767px) {
  html.about main > header {
    padding: 0 4% 48px;
    position: static;
  }
}

html.about section.info {
  padding: 0 4% 270px;
}
@media only screen and (max-width: 1023px) {
  html.about section.info {
    padding-bottom: 252px;
  }
}
@media only screen and (max-width: 767px) {
  html.about section.info {
    padding-bottom: 96px;
  }
}
html.about section.info div {
  margin-left: calc(50% + 1vw);
}
@media only screen and (max-width: 767px) {
  html.about section.info div {
    margin: 0;
  }
}
html.about section.info span {
  display: block;
}
html.about section.info a {
  display: inline-block;
}
html.about section.info a.text:before {
  height: 2px;
  bottom: 3px;
}

html.js.case body.id5 {
  background: #D9D7D2;
}
html.js.case body.id6 {
  background: #D0EDAD;
}
html.js.case body.id7 {
  background: #B4B4B4;
}
html.js.case body.id8 {
  background: #c3e0ef;
}
html.js.case body.id11 {
  background: #ccecf9;
}

html.js.scrolledPage.case body {
  background: #f5f5f5;
}

html.js.scrolledBottom.case body.next-id5 {
  background: #D9D7D2;
}
html.js.scrolledBottom.case body.next-id6 {
  background: #D0EDAD;
}
html.js.scrolledBottom.case body.next-id7 {
  background: #B4B4B4;
}
html.js.scrolledBottom.case body.next-id8 {
  background: #c3e0ef;
}
html.js.scrolledBottom.case body.next-id11 {
  background: #ccecf9;
}

html.case main {
  padding-top: 0;
}

html.case section.hero {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
html.case section.hero header {
  opacity: 1;
  padding: 0 4%;
  pointer-events: none;
  position: absolute;
  top: 50vh;
  z-index: 2;
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
html.case section.hero picture,
html.case section.hero img {
  height: 100vh;
  object-fit: cover;
  width: 100vw;
}

html.case.scrolled section.hero header {
  opacity: 0;
}

html.case section.content {
  padding: 0 4%;
}
html.case section.content > div > div {
  position: relative;
}
html.case section.content .content {
  margin: 4vw 0 8vw;
}
@media only screen and (max-width: 767px) {
  html.case section.content .content {
    margin: 6vw 0 18vw;
  }
}
html.case section.content .images {
  margin: 2vw 0;
}
@media only screen and (max-width: 767px) {
  html.case section.content .images {
    margin: 4vw 0;
  }
}
html.case section.content .double {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: -1vw;
  margin-right: -1vw;
}
@media only screen and (max-width: 767px) {
  html.case section.content .double {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }
}
html.case section.content .double div {
  margin: 0 1vw;
  width: calc(50% - 2vw);
}
@media only screen and (max-width: 767px) {
  html.case section.content .double div {
    width: auto;
    margin: 0;
  }
  html.case section.content .double div + div {
    margin-top: 6vw;
  }
}
html.case section.content .double.tight {
  margin-left: 0;
  margin-right: 0;
}
html.case section.content .double.tight div {
  margin: 0;
  width: 50%;
}
@media only screen and (max-width: 767px) {
  html.case section.content .double.tight div {
    width: auto;
  }
  html.case section.content .double.tight div + div {
    margin-top: 0;
  }
}
html.case section.content .double.tight.colors {
  margin: 20vw 0;
}
html.case section.content .double.tight.colors div {
  margin-left: 5.875vw;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .double.tight.colors div {
    margin-left: 0;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .double.tight.colors div {
    margin: 0;
  }
}
html.case section.content .double.tight.colors div + div {
  margin: 0 5.875vw 0 0;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .double.tight.colors div + div {
    margin-right: 0;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .double.tight.colors div + div {
    margin: 8vw 0 0;
  }
}
html.case section.content .padded-s div {
  padding: 10vw 1vw;
}
html.case section.content .padded-s.double.tight div {
  padding: 0 5vw 10vw 0;
}
@media only screen and (max-width: 767px) {
  html.case section.content .padded-s.double.tight div {
    padding: 5vw 0;
  }
}
html.case section.content .padded-s.double.tight div + div {
  padding: 0 0 10vw 5vw;
}
@media only screen and (max-width: 767px) {
  html.case section.content .padded-s.double.tight div + div {
    padding: 5vw 0;
  }
}
html.case section.content .padded-m {
  background: #fff;
  padding: 5vw 10vw;
}
@media only screen and (max-width: 767px) {
  html.case section.content .padded-m {
    padding: 2vw;
  }
}
html.case section.content .padded-m.type {
  padding: 6vw 3vw;
}
html.case section.content .padded-l div {
  background: #fff;
  padding: 6vw 25vw;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .padded-l div {
    padding: 5vw 15vw;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .padded-l div {
    padding: 5vw;
  }
}
html.case section.content .takeover {
  height: 100vh;
  margin: 8vw -4vw;
  padding: 0;
  position: relative;
  z-index: -1;
}
html.case section.content .takeover + .takeover {
  margin-top: -8vw;
}
@media only screen and (max-width: 767px) {
  html.case section.content .takeover {
    margin: 16vw -4vw;
  }
  html.case section.content .takeover + .takeover {
    margin-top: -16vw;
  }
}
html.case section.content .takeover > div {
  clip-path: inset(0px 0px 0px 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;
}
html.case section.content .takeover img {
  display: block;
  height: 100vh;
  left: 0;
  object-fit: cover;
  position: fixed;
  top: 0;
  transform: translateZ(0);
  width: 100vw;
  z-index: -1;
}
html.case section.content .images.device.tablet {
  padding: 8vw 0;
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.tablet {
    padding: 4vw 0;
  }
}
html.case section.content .images.device.tablet div {
  border: 2vw solid #000;
  border-radius: 4vw;
  height: 55vw;
  overflow: hidden;
  box-shadow: 0 0 0 0.2vw rgba(0, 0, 0, 0.2);
  /*
  &:before {
  	border: 0.5vw solid rgba(0,0,0,0.5);
  	border-radius: 4vw;
  	bottom: -2vw;
  	content: '';
  	left: -2vw;
  	position: absolute;
  	right: -2vw;
  	top: -2vw;
  	z-index: 10;
  }
  */
}
html.case section.content .images.device.tablet div:after {
  border: 2vw solid #000;
  border-radius: 4vw;
  bottom: -2vw;
  content: "";
  left: -2vw;
  position: absolute;
  right: -2vw;
  top: -2vw;
}
html.case section.content .images.device.tablet + .images.device.tablet {
  padding-top: 0;
}
html.case section.content .images.device.tablet .scrollable img.loaded {
  animation: scroll-tablet 10s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
html.case section.content .images.device.tablet .scrollable.long img.loaded {
  animation: scroll-tablet-long 16s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
html.case section.content .images.device.tablet .scrollable.xlong img.loaded {
  animation: scroll-tablet-xlong 22s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
html.case section.content .images.device.tablet .scrollable.xxlong img.loaded {
  animation: scroll-tablet-xxlong 24s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
html.case section.content .images.device.phone {
  padding: 8vw 0;
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.phone {
    padding: 4vw 0;
  }
}
html.case section.content .images.device.phone div {
  border-color: #000;
  border-radius: 2vw;
  border-style: solid;
  border-width: 0.75vw;
  height: 51.75vw;
  overflow: hidden;
  box-shadow: 0 0 0 0.15vw rgba(0, 0, 0, 0.2);
}
html.case section.content .images.device.phone div:first-child {
  margin-left: 18.625vw;
}
html.case section.content .images.device.phone div:last-child {
  margin-right: 18.625vw;
  margin-top: 18.625vw;
}
html.case section.content .images.device.phone div:after {
  border-color: #000;
  border-radius: 2vw;
  border-style: solid;
  border-width: 0.75vw;
  bottom: -0.75vw;
  content: "";
  left: -0.75vw;
  position: absolute;
  right: -0.75vw;
  top: -0.75vw;
}
html.case section.content .images.device.phone div:before {
  background: #fff;
  border-radius: 0.15vw;
  bottom: 0.6vw;
  content: "";
  height: 0.3vw;
  left: 7vw;
  mix-blend-mode: difference;
  opacity: 0.6;
  position: absolute;
  right: 7vw;
  z-index: 10;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .images.device.phone div {
    height: 55.6666vw;
  }
  html.case section.content .images.device.phone div:first-child {
    margin-left: 16.6666vw;
  }
  html.case section.content .images.device.phone div:last-child {
    margin-right: 16.6666vw;
    margin-top: 16.6666vw;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.phone div {
    border-radius: 5vw;
    border-width: 1.5vw;
    height: 114vw;
    box-shadow: 0 0 0 0.3vw rgba(0, 0, 0, 0.2);
  }
  html.case section.content .images.device.phone div:first-child {
    margin-left: 16vw;
    margin-right: 16vw;
  }
  html.case section.content .images.device.phone div:last-child {
    margin-left: 16vw;
    margin-right: 16vw;
    margin-top: 8vw;
  }
  html.case section.content .images.device.phone div:after {
    border-radius: 5vw;
    border-width: 1.5vw;
    bottom: -1.5vw;
    left: -1.5vw;
    right: -1.5vw;
    top: -1.5vw;
  }
  html.case section.content .images.device.phone div:before {
    border-radius: 0.4vw;
    bottom: 1.2vw;
    height: 0.8vw;
    left: 16vw;
    right: 16vw;
  }
}
html.case section.content .images.device.phone.classic div {
  border-bottom-width: 4vw;
  border-top-width: 4vw;
  height: 43.5555555556vw;
}
html.case section.content .images.device.phone.classic div:after {
  content: none;
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.phone.classic div {
    border-bottom-width: 8vw;
    border-top-width: 8vw;
    height: calc((57vw - 40px) * 16 / 9);
  }
}
html.case section.content .images.device.phone + .images.device.phone {
  padding-top: 0;
}
html.case section.content .images.device.phone .scrollable img.loaded {
  animation: scroll-phone-l 10s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .images.device.phone .scrollable img.loaded {
    animation: scroll-phone-m 10s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.phone .scrollable img.loaded {
    animation: scroll-phone-s 10s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
  }
}
html.case section.content .images.device.phone .scrollable.long img.loaded {
  animation: scroll-phone-long-l 20s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
}
@media only screen and (max-width: 1023px) {
  html.case section.content .images.device.phone .scrollable.long img.loaded {
    animation: scroll-phone-long-m 20s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content .images.device.phone .scrollable.long img.loaded {
    animation: scroll-phone-long-s 20s cubic-bezier(0.6, 0, 0.4, 1) infinite normal;
  }
}
html.case section.content .images.device + .images.device,
html.case section.content .takeover + .images.device {
  padding-top: 0;
}
html.case section.content img,
html.case section.content video {
  display: block;
  height: auto;
  width: 100%;
}
html.case section.content .images .multiply {
  background: #f5f5f5;
}
html.case section.content .images .multiply img {
  mix-blend-mode: multiply;
}
html.case section.content .scaling-logo div {
  background: #fff;
  overflow: hidden;
}
html.case section.content .scaling-logo div:first-child:before, html.case section.content .scaling-logo div:first-child:after {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  height: 1px;
  left: -20%;
  position: absolute;
  right: -20%;
  top: 50%;
  transform: rotate(26.55deg);
  z-index: 10;
}
html.case section.content .scaling-logo div:first-child:after {
  transform: rotate(-26.55deg);
}
html.case section.content .scaling-logo div img {
  animation: scaling 6s ease-in-out infinite normal;
}
html.case section.content .oldvsnew div {
  overflow: hidden;
}
html.case section.content .oldvsnew div:first-child:before, html.case section.content .oldvsnew div:first-child:after {
  background: rgba(0, 0, 0, 0.1);
  content: "";
  height: 1px;
  left: -20%;
  position: absolute;
  right: -20%;
  top: 50%;
  transform: rotate(26.55deg);
  z-index: 10;
}
html.case section.content .oldvsnew div:first-child:after {
  transform: rotate(-26.55deg);
}
html.case section.content dd + dt {
  margin-top: 30px;
}
@media only screen and (max-width: 1023px) {
  html.case section.content dd + dt {
    margin-top: 28px;
  }
}
@media only screen and (max-width: 767px) {
  html.case section.content dd + dt {
    margin-top: 24px;
  }
}

/*
html.case body.id5 {
	.images.device.tablet div,
	.images.device.tablet div:after,
	.images.device.phone div,
	.images.device.phone div:after {	
		border-color: $clr-bg-id5;
	}
}
html.case body.id6 {
	.images.device.tablet div,
	.images.device.tablet div:after,
	.images.device.phone div,
	.images.device.phone div:after {	
		border-color: $clr-bg-id6;
	}
}
html.case body.id7 {
	.images.device.tablet div,
	.images.device.tablet div:after,
	.images.device.phone div,
	.images.device.phone div:after {	
		border-color: $clr-bg-id7;
	}
}
html.case body.id8 {
	.images.device.tablet div,
	.images.device.tablet div:after,
	.images.device.phone div,
	.images.device.phone div:after {	
		border-color: $clr-bg-id8;
	}
}
*/
html.case footer header {
  position: absolute;
  top: calc(50vh - 30px);
}
@media only screen and (max-width: 1023px) {
  html.case footer header {
    top: calc(50vh - 28px);
  }
}
@media only screen and (max-width: 767px) {
  html.case footer header {
    top: calc(50vh - 24px);
  }
}

/*# sourceMappingURL=styles.css.map */