@font-face {
  font-family: "BarlowLight";
  src: url(../fonts/Barlow-Light.ttf);
}

/*1.8 rem - 400*/
@font-face {
  font-family: "BarlowRegular";
  src: url(../fonts/Barlow-Regular.ttf);
}

@font-face {
  font-family: "BarlowSemiCondensedRegular";
  src: url(../fonts/BarlowSemiCondensed-Regular.ttf);
}

@font-face {
  font-family: "BarlowSemiCondensedExtraBold";
  src: url(../fonts/BarlowSemiCondensed-ExtraBold.ttf);
}

.body-wrapper {
  width: 1280px;
  margin: 0 auto;
}

.sp-highlight {
  font-family: "BarlowSemiCondensedExtraBold", sans-serif;
  font-size: 14rem;
  line-height: 14rem;
  font-weight: 900;
  color: var(--n20);
}

/* ------------------------------ */
/* TOOLTIP */
/* ------------------------------ */
.tooltip {
  position: relative;
}

/*Not able to test it yet*/
.tooltip .tooltiptext {
  /*font-family: "Barlow", sans-serif;*/
  font-family: "BarlowLight", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6rem;

  visibility: hidden;
  background-color: var(--b84);
  color: var(--n100);
  text-align: center;
  padding: 0.5rem !important;

  white-space: nowrap;

  position: absolute;
  top: 1rem !important;
  z-index: 9999999 !important;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  cursor: default;
}

/* ------------------------------ */
/* NO CONTENT */
/* ------------------------------ */

.no-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: var(--sp500);
  text-align: center;
}
.no-content .thumbnail {
  width: 13rem;
  height: 13rem;
  background-repeat: no-repeat;
  background-size: 8rem;
  background-position: center;
}

.no-content .thumbnail.deliverable {
  background-image: url("../resources/thumbnails/deliverables/Type=deliverable, Style=outline.svg");
}

/* ------------------------------ */
/* HOME TILES */
/* ------------------------------ */
.home-tiles {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 4rem;
  margin-top: var(--sp500);
}
.home-tiles a.tile,
.home-tiles .tile {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 4rem;
  align-items: stretch;
  flex-wrap: nowrap;
  flex: 0 1 calc((50%) / 1);
  color: var(--n20);

  text-decoration: none;
}

.home-tiles a.tile:hover:after {
  display: none;
}
.tile-wrapper h1 {
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;

  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.home-tiles a.tile .tile-wrapper {
  padding: 6.8rem 8rem 6.8rem 8rem;
  height: 100%;
}
.home-tiles .tile .tile-wrapper:hover {
  cursor: pointer;
  /*outline: var(--l200) solid var(--n20);*/
}
.home-tiles a.tile .tile-wrapper:hover:after {
  animation-name: slightMoveIn;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.home-tiles a.tile .tile-wrapper:active {
  opacity: 0.75;
}
.home-tiles a.tile .tile-wrapper:after {
  width: 3.6rem;
  height: 3.6rem;
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  margin: auto 0;
  animation-name: slightMoveOut;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  display: block;
  background-repeat: no-repeat;
  background-size: 3.6rem;
  background-position: center;
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}

.feedback {
  display: flex;
  justify-content: space-between;
}

.feedback-text {
  padding: 5rem 8rem 5rem 8rem;
}

.feedback-img {
  float: inline-end;
}
/* ------------------------------ */
/* CONTACT */
/* ------------------------------ */
.contact .header .item {
  flex: 0 0 calc((100% - 4rem) / 2);
  margin-bottom: var(--sp400);
}
.contact .header .item:last-child {
  margin-right: 0;
}
.contact .header .item ul,
.contact-bar ul {
  list-style: none;
  padding: 0;
}
.contact .header .item ul li,
.contact-bar ul li {
  margin-bottom: 0.4rem;
}
.contact .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.contact-bar div {
  display: inline-block;
  margin-right: 16rem;
  margin-bottom: var(--sp600);
}

/* ------------------------------ */
/* CONTENT */
/* ------------------------------ */

.content-header {
  width: 100%;
  position: relative;
  padding-top: var(--sp600);
}

.content-header .wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  row-gap: var(--sp400);
  column-gap: var(--sp400);
}
.content-header .wrapper .content p {
  max-width: 60rem;
}
.content-header .wrapper .btn-primary-wrapper p {
  white-space: nowrap;
}

.content-header h1 {
  width: 55%;
}
.content-header p.subline {
  width: 70%;
}
.content-wrapper {
  width: 90%;
  margin: 0 auto;
}
.item.img {
  max-height: 64rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item.img img {
  width: 100%;
}

.img img {
  object-fit: cover;
  height: 100%;
}

.section-wrapper .img,
.content-wrapper-blog-margin .img,
.body-wrapper .img {
  max-height: 64rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img.auto-height {
  max-height: 100vh !important;
}

.section-wrapper .img img,
.content-wrapper-blog-margin .img img,
.body-wrapper .img img {
  width: 100%;

  -webkit-transition: var(--a400) ease-in-out;
  transition: var(--a400) ease-out;
}
.section-wrapper .img,
.content-wrapper-blog-margin .img,
.body-wrapper .img {
  width: 100%;
  overflow: hidden;
}
.section-wrapper .section-item {
  width: 50%;
}

#archivedProjects img {
  filter: grayscale(100%);
  object-fit: contain !important;
}

.content-wrapper-blog-margin {
  width: 60%;
  margin: 0 auto;
}

.content-wrapper-blog {
  width: 90%;
  margin: 0 auto;
}
.content-wrapper-blog.header .header .item {
  flex: 0 0 calc((100% - 4rem) / 2);
  margin-bottom: var(--sp400);
}

.content-wrapper-blog .header .item {
  flex: 0 0 calc((100% - 4rem) / 1);
  margin-bottom: var(--sp400);
}

.content-wrapper-blog h1 {
  width: 100%;
}
.content-wrapper-blog p.subline {
  width: 100%;
}

.content-wrapper-blog h2 {
  margin-bottom: var(--sp300);
}
.content-wrapper-blog h3 {
  margin-bottom: var(--sp100);
}
.full-width-wrapper {
  margin: 0 auto;
}
.full-width-wrapper .img {
  display: flex;
  flex-direction: column;
  max-height: 64rem;
  overflow: hidden;
  justify-content: center;
}
.full-width-wrapper .img img {
  width: 100%;
}

.union-icon {
  margin-right: 1rem;
}

.arrow-icon {
  margin-left: 1rem;
}
/* Switch TBD */

.content-wrapper .img.switch {
  background-color: var(--h40);
  width: 100%;
  height: 43rem;
  overflow: hidden;
  position: relative;
}
.content-wrapper .img.switch .switch-a,
.content-wrapper .img.switch .switch-b {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}
.content-wrapper .img.switch .switch-a {
  clip-path: inset(0 0 0 40px);
  -webkit-clip-path: inset(0 0 0 40px);
  z-index: 2;
}
.content-wrapper .img.switch .switch-b {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
  z-index: 1;
}
.content-wrapper .img.switch img {
  width: 100%;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

.author {
  color: var(--n60);
}
.author span {
  margin-left: var(--sp50);
  margin-right: var(--sp50);
}
.author span:first-child {
  margin-left: 0;
}

ul.link {
  padding: 0;
  list-style: none;
}
ul.link li {
  margin-bottom: var(--sp50);
}

.content-flex .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.content-flex .content div {
  flex: 0 0 calc((100% - 8rem) / 2);
}

/* ------------------------------ */
/* PICTURE GALLERY */
/* ------------------------------ */

.gallery-wrapper .gallery .img div p {
  position: absolute;
  bottom: 2rem;
  padding: 1.5rem 2rem 1.5rem 2rem;
  background-color: var(--t96);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--n20);
}
.gallery-wrapper .gallery .img.hide-description div p {
  display: none;
}
.gallery-wrapper .gallery .img div {
  position: relative;
  margin: 0 1px 0 1px;
}

.gallery-wrapper {
  position: relative;
}
.gallery {
  max-height: 64rem;
  overflow: hidden;
}
.gallery-wrapper.auto-height,
.gallery-wrapper.auto-height .gallery,
.gallery-wrapper.auto-height .img {
  max-height: auto;
}

.gallery .container .img {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.gallery .container .img div {
  width: 100%;
}

.gallery .container .img div img {
  height: 100%;
  object-fit: cover;
}

.gallery-wrapper .steps {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.2rem;
  padding: 2rem;
}
.gallery-wrapper .steps span {
  width: 6px;
  height: 6px;
  background-color: var(--n80);
  border-radius: 100%;
}
.gallery-wrapper .steps span.active {
  background-color: var(--n20);
}

/* ------------------------------ */
/* ACCORDEON */
/* ------------------------------ */

.acc-header {
  height: auto;
  position: relative;
  transition: 0.4s;
  padding-bottom: var(--sp50);
}
.acc-header:hover > .divider {
  background-color: var(--n20);
}
.acc-header p {
  width: 75%;
}
.acc-header:hover {
  cursor: pointer;
}
.acc-header:active {
  opacity: 0.75;
  -webkit-transition: 0ms ease-in-out;
  transition: 0ms ease-in-out;
}
.acc-header h2 {
  margin: auto 0 !important;
  padding: 2rem 0;
  line-height: 5rem;
  width: 80%;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.acc-header .ic-wrapper {
  position: absolute;
  top: 3.2rem;
  right: 0;
  height: 3.6rem;
  width: 3.6rem;
}
.acc-header .ic,
.acc-header .ic:after {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.acc-header .ic {
  background-image: url("../resources/ic/ic_minus_black.svg");
  animation-name: rotateIcB;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.acc-header .ic.active {
  animation-name: rotateIc;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.acc-header .ic.active:after {
  animation-name: rotateIcAfter;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.acc-header .ic:after {
  content: "";
  background-image: url("../resources/ic/ic_minus_black.svg");
  transform: rotate(90deg);
  animation-name: rotateIcAfterB;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.acc {
  position: relative;
  display: block;
  height: auto;
}
.panel .panel-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.panel .panel-content > div {
  flex: 0 0 calc((100% - 8rem) / 2);
}
.panel .panel-content div.blog {
  flex: 0 0 100%;
}
.panel {
  position: relative;
  display: none;
  overflow: hidden;
  width: 100%;
  animation-name: showAcc;
  animation-duration: var(--h200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.panel-content .img {
  background-color: var(--h40);
  width: 100%;
  overflow: hidden;
  position: relative;
}
.panel-content .img img {
  width: 100% !important;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;

  -webkit-transition: var(--a400) ease-in-out;
  transition: var(--a400) ease-in-out;
}

@keyframes showAcc {
  from {
    /*transform: translateY(-2rem);*/
    opacity: 0;
  }
  to {
    /*transform: translateY(0rem);*/
    opacity: 1;
  }
}
@keyframes rotateIc {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotateIcB {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-90deg);
  }
}
@keyframes rotateIcAfter {
  from {
    transform: rotate(-90deg);
    opacity: 1;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
@keyframes rotateIcAfterB {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(-90deg);
    opacity: 1;
  }
}

/* ------------------------------ */
/* BLOG */
/* ------------------------------ */

.blog {
  display: row;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}
.blog .divider:first-child {
  opacity: 0;
}

.blog-wrapper .article {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: var(--sp400);
  margin-top: var(--sp400);
  column-gap: 4rem;
}
.blog-wrapper .article .article-content {
  flex: 0 0 calc((100% - 4rem) / 2);
}
.blog-wrapper .article .article-content h2 {
  margin-top: var(--sp200);
}
.blog-wrapper .article .article-content p.date {
  color: var(--n60);
  margin-top: var(--sp200);
}
.blog-wrapper .article .article-content p.description {
  margin-top: var(--sp300);
  margin-bottom: var(--sp400);
}
.blog-wrapper .article .article-content p.more {
  display: none;
  margin-bottom: var(--sp400);
}
.blog-wrapper .article .article-content div.panelList {
  display: none;
  margin-bottom: var(--sp400);
}
.blog-wrapper .article .article-content a {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3.2rem;
  margin: 0;
  position: relative;
}
.blog .img {
  background-color: var(--h40);
  height: 46rem;
  overflow: hidden;
  position: relative;
}
.blog .img img {
  height: 100%;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  object-fit: cover !important;
}
.blog-quote {
  font-family: "BarlowSemiCondensedRegular", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.8rem;
  font-style: italic;
  text-align: center;
  padding: 4rem;

  border-style: solid;
  border-width: var(--l100);
  border-left-width: 0;
  border-right-width: 0;

  border-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 40%,
      var(--n20) 40%,
      var(--n20) 60%,
      rgba(255, 255, 255, 1) 60%,
      rgba(255, 255, 255, 1) 100%
    )
    1;
}
.blog-quote:after {
  content: "";
}

/* ------------------------------ */
/* PROJECT */
/* ------------------------------ */
.projects.blog {
  justify-content: center;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  column-gap: var(--sp400);
}

.projects {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: var(--sp400);
  column-gap: var(--sp400);
}
.project-wrapper {
  flex: 0 0 calc((100% - 8rem) / 3);
}
.project-wrapper.col2 {
  flex: 0 0 calc((100% - 4rem) / 2);
}
.project-wrapper > a:hover:after {
  opacity: 0;
}
.project .img,
.panel .img {
  background-color: var(--h40);
  width: 100%;
  height: 36rem;
  overflow: hidden;
  position: relative;
}
.project .img:after {
  width: 3.6rem;
  height: 3.6rem;
  content: "";
  position: absolute;
  right: 1.4rem;
  top: 1.4rem;
  margin: auto 0;
  z-index: 2;
  animation-name: slightMoveOut;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  display: block;
  background-repeat: no-repeat;
  background-size: 3.6rem;
  background-position: center;
  background-image: url("../resources/ic/ic_arrow_right_white.svg");
}
.project.dark .img.active:after {
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}
.img.dark:after {
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}
.project .img.active:after {
  animation-name: slightMoveIn;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.news .img img {
  width: 100%;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}

.project .img img,
.panel .img img {
  width: 110%;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}
.project .img img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

.project:hover {
  cursor: pointer;
}
.project.dark:hover .content {
  color: var(--n20) !important;
}
.content.dark {
  color: var(--n20) !important;
}
.project:hover .img img {
  opacity: 0;
}
.project:active {
  opacity: 0.75;
}

.project p.description {
  display: none;
  margin-top: var(--sp200);
}

.project h2,
.project p.title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.project h2 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.projects .project {
  position: relative;
}
.projects .project:after {
  content: "";
  position: absolute;
  background-color: var(--n20);
  width: 100%;
  height: 100%;
  opacity: 0.65; /*Background darken*/
  z-index: 1;
  left: 0;
  top: 0;
}
.projects .project.blog:after {
  opacity: 0;
}
.projects .project:hover:after {
  opacity: 0;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}

.projects .project .content {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--n100);
  padding: 4rem;
  z-index: 2;
  width: calc(100% - 8rem);
}

.projects .project img {
  opacity: 1;
}

/* ------------------------------ */
/* FOOTER */
/* ------------------------------ */
.footer {
  display: inline-block;
  width: 100%;
}
.footer .body-wrapper {
  margin-top: 1.8rem;
}
.footer ul {
  padding: 0;
  float: left;
  margin: 0;
}
.footer ul li {
  display: inline-block;
  margin-right: 3.2rem;
  height: 3.6rem;
  margin-bottom: 1.6rem;
}
.footer p {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  float: right;
  height: 3.6rem;
  line-height: 3.6rem;
  font-weight: 400;
  margin-bottom: 1.6rem;
}
.footer a.link {
  font-size: 1.8rem;
  font-weight: 400;
  font-family: "BarlowRegular", sans-serif;
  line-height: 3.2rem;
}

/* ------------------------------ */
/* NAVIGATION */
/* ------------------------------ */

/* Language select */

/*Not able to test it yet*/
.top-nav ul li.lang-select a,
.top-nav ul li.lang-select span {
  /*font-family: "Barlow", sans-serif;*/
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400 !important;
  line-height: 2.4rem;
}

.top-nav ul li.lang-select a:hover {
  color: var(--n100) !important;
}
.top-nav ul li.lang-select:active {
  opacity: 1 !important;
}

.top-nav.light ul li.lang-select a.active {
  color: var(--n100) !important;
  font-weight: 600 !important;
}

.top-nav ul li.lang-select a:after {
  background-color: var(--n100) !important;
  opacity: 0;
}
.top-nav ul li.lang-select span {
  padding-left: var(--sp50);
  padding-right: var(--sp50);
}
.top-nav ul li.lang-select {
  margin-left: var(--sp100);
}

.top-nav.light ul li.lang-select a,
.top-nav.light ul li.lang-select span {
  color: var(--n60) !important;
}
.top-nav.dark ul li.lang-select a,
.top-nav.light ul li.lang-select span {
  color: var(--n60) !important;
}
.top-nav.dark ul li.lang-select a:after {
  background-color: var(--n20) !important;
}
.top-nav.dark ul li.lang-select a:hover {
  color: var(--n20) !important;
}
.top-nav.dark ul li.lang-select a.active {
  color: var(--n20) !important;
  font-weight: 600 !important;
}

/* Show / Hide */

.animate-show {
  animation-name: showNav;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  opacity: 1;
}
.animate-hide {
  animation-name: hideNav;
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes hideNav {
  from {
    transform: translateY(0rem);
    -webkit-transform: translateY(0rem);
    opacity: 1;
  }
  to {
    transform: translateY(-6.4rem);
    -webkit-transform: translateY(-6.4rem);
    opacity: 0;
  }
}
@keyframes showNav {
  from {
    transform: translateY(-6.4rem);
    -webkit-transform: translateY(-6.4rem);
    opacity: 0;
  }
  to {
    transform: translateY(0rem);
    -webkit-transform: translateY(0rem);
    opacity: 1;
  }
}
@keyframes showBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hideBg {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

#nav-desktop .nav-icon {
  display: none;
}

/* Theming */

.top-nav .bg {
  background-color: var(--n100);
  width: 100%;
  height: 100%;
}
.top-nav.light ul li:hover > p:after,
.top-nav.light ul li.active > p:after,
.top-nav.light ul li:hover > a:after,
.top-nav.light ul li.active > a:after {
  background-color: var(--n100);
}
.top-nav.dark ul li:hover > p:after,
.top-nav.dark ul li.active > p:after,
.top-nav.dark ul li:hover > a:after,
.top-nav.dark ul li.active > a:after {
  background-color: var(--n20);
}
.top-nav.light ul li,
.top-nav.light ul li a,
.top-nav.light ul li select {
  color: var(--n100);
}
.top-nav.light #logo,
.top-nav.light #mobile-logo {
  background-image: url("../resources/logo_light.svg");
}
.top-nav.light .nav-icon:after {
  background-image: url("../resources/ic/ic_menu_white.svg");
}
.top-nav.dark ul li,
.top-nav.dark ul li a {
  color: var(--n20) !important;
}
.top-nav.dark #logo,
.top-nav.dark #mobile-logo {
  background-image: url("../resources/logo_dark.svg");
}
.top-nav.dark .nav-icon:after {
  background-image: url("../resources/ic/ic_menu_black.svg");
}

/* Fix Nav */

.top-nav {
  width: 100%;
  height: 6.4rem;
  position: absolute;
  z-index: 9999999;
  transform-origin: top;
}
.top-nav .body-wrapper {
  position: relative;
}
#logo,
#mobile-logo {
  background-repeat: no-repeat;
  background-size: 14rem;
  background-position: center;
  width: 12.6rem;
  height: 100%;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  top: -1px;
}
#logo:active,
#mobile-logo:active {
  opacity: 0.75;
}
.top-nav ul {
  padding: 0;
  margin: 0;
  display: flex;
  position: absolute;
  right: 0;
  align-items: center;
}
.top-nav ul li {
  display: inline-block;
  padding: 1.6rem 2rem 2rem 2rem;
}
.top-nav ul li p,
.top-nav ul li a,
.top-nav ul li select {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400 !important;
  line-height: 2.4rem;
}
.top-nav ul li:hover {
  cursor: pointer;
}
.top-nav ul li:active {
  opacity: 0.75;
}

.top-nav ul li p {
  position: relative;
}
.top-nav ul li:hover > p:after,
.top-nav ul li.lang-select a.active:after {
  position: absolute;
  content: "";
  height: var(--l100);
  width: 100%;
  left: 0rem;
  bottom: -0.6rem;

  animation-name: moveScale;
  animation-duration: var(--a100);
  transform-origin: left;
  animation-timing-function: ease;
}

.top-nav ul li.active p:after,
.top-nav ul li.active a:after {
  position: absolute;
  content: "";
  height: var(--l100);
  width: 100%;
  left: 0px;
  bottom: -0.6rem;
}

#logo:hover,
#mobile-logo:hover {
  cursor: pointer;
}

.top-nav ul li select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  cursor: pointer;
  background-size: 24px;
  background-position: 2% center;
  background-repeat: no-repeat;
  outline: none;
  padding-left: 32px;
  background-color: transparent;
  border: none;
}
.top-nav.light ul li select {
  background-image: url("../resources/ic/ic_translate_white.svg");
}
.top-nav.dark ul li select {
  background-image: url("../resources/ic/ic_translate_n20.svg");
}
option {
  color: black;
}

/* Mobile */

#nav-mobile {
  display: none;
  height: 100%;
  overflow: hidden;
}
#nav-mobile #mobile-logo {
  display: none;
}

#nav-mobile .top-nav {
  position: absolute;
  overflow: hidden;
}

#nav-mobile .bg {
  background-color: var(--b84);
  width: 100vw;
  height: 100vh;
  z-index: 99999999999999;
}
#nav-items-mobile {
  position: absolute;
  height: calc(100vh - (100vh / 8 * 2));
  top: calc(100vh / 8);
  left: calc(100vw / 20);
  overflow-x: hidden;
  overflow-y: auto;
  display: block;
}
#nav-items-mobile li {
  display: block !important;
}
#nav-items-mobile li p,
#nav-items-mobile li a {
  font-family: "BarlowSemiCondensedRegular", sans-serif;
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 4.6rem;
  display: inline-block;
}

/*Not able to test it yet*/
#nav-items-mobile li.lang-select a {
  font-family: "BarlowSemiCondensedRegular", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.8rem;
  display: inline-block;
}
#nav-items-mobile li.lang-select {
  margin-left: 0;
}
#nav-items-mobile li .quote {
  /*font-family: 'Barlow', sans-serif;
		font-size: 2.4rem;
		font-weight: 400;
		line-height: 3.8rem;*/

  /*Not able to test it yet*/
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3.2rem;

  margin-top: var(--sp200);
  padding-top: var(--sp400);
  border-top: 1px solid var(--n100);

  opacity: 0.75;
}
#nav-items-mobile li:hover .quote {
  cursor: auto;
}
#nav-mobile .logo-wrapper {
  width: 100%;
  display: block;
  float: left;
  margin-bottom: 6.4rem;
}
.logo-wrapper {
  position: absolute;
  height: 60px;
}
#nav-mobile .nav-icon,
#nav-desktop .nav-icon {
  padding-right: 5.6rem;
  position: relative;
}
#nav-mobile .nav-icon:after,
#nav-desktop .nav-icon:after {
  content: "";
  position: absolute;
  top: 0.8rem;
  right: 0;
  width: 4rem;
  height: 4rem;
  background-repeat: no-repeat;
  background-size: 3.6rem;
  background-position: center;
}
#nav-mobile .nav-icon:after {
  background-image: url("../resources/ic/ic_cross_white.svg");
}

.show-mobile-nav,
.hide-mobile-nav {
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  z-index: 999999999;
  left: 0;
}

.body {
  animation-duration: var(--a200);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  position: relative;
  transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
}
.show-mobile-nav {
  animation-name: showMobileNav;
}
.hide-mobile-nav {
  animation-name: hideMobileNav;
}

.body.show {
  animation-name: showBody;
}
.body.hide {
  animation-name: hideBody;
}
@keyframes hideBody {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(20vw);
  }
}
@keyframes showBody {
  from {
    transform: translateX(20vw);
  }
  to {
    transform: translateX(0vw);
  }
}

@keyframes showMobileNav {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0px);
  }
}
@keyframes hideMobileNav {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-100vw);
  }
}

/* ------------------------------ */
/* PRIMARY BUTTON */
/* ------------------------------ */

/* Button Download */
.btn-primary-wrapper.download .btn-state-a p:after {
  background-image: url("../resources/ic/ic_download_n20.svg");
}
.btn-primary-wrapper.download .btn-state-b p:after {
  background-image: url("../resources/ic/ic_download_white.svg");
}

/* Button Cancel */
.btn-primary-wrapper.cancel .btn-state-a p:after {
  background-image: url("../resources/ic/ic_cross_n20.svg");
}
.btn-primary-wrapper.cancel .btn-state-b p:after {
  background-image: url("../resources/ic/ic_cross_white.svg");
}

.btn-primary-wrapper .btn-state-a p:after,
.btn-primary-wrapper.fixed .btn-state-a:after,
.btn-primary-wrapper.gallery-btn .btn-state-a:after {
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}

/* Disabled */

.btn-primary-wrapper.disabled {
  opacity: 0.34;
}
/*
		.btn-primary-wrapper.disabled:hover {
			cursor: auto !important;
		}*/

/* Invert */

.btn-primary-wrapper.invert {
  border-color: var(--n100);
}
.btn-primary-wrapper.invert .btn-state-a p {
  color: var(--n100);
}
.btn-primary-wrapper.invert .btn-state-a p:after {
  background-image: url("../resources/ic/ic_arrow_right_white.svg");
}
.btn-primary-wrapper.invert .btn-state-b {
  background-color: var(--n100);
  color: var(--n20);
}
.btn-primary-wrapper.invert .btn-state-b p:after {
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}

.btn-primary-wrapper.invert:active {
  color: var(--n20);
  background-color: var(--n100);
  opacity: 0.75;
}

/* Default */

.btn-primary-wrapper.fixed.back {
  top: var(--sp400);
  left: 0vw;
  z-index: 999999;
}

.btn-primary-wrapper.gallery-btn {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  overflow: visible;
}
.btn-primary-wrapper.gallery-btn {
  background-color: rgba(255, 255, 255, 1);
  box-shadow: -10px -10px 0 #fff;
  z-index: 1;
}

.btn-primary-wrapper.gallery-btn.gallery-back {
  /*transform: rotate(0deg);*/
  transform: scaleX(-1);
  left: -3.2rem;
}
.btn-primary-wrapper.gallery-btn.gallery-right {
  transform: scaleX(1);
  right: -3.2rem;
}

.btn-primary-wrapper.fixed {
  position: absolute;
  transform: rotate(180deg);
}
.btn-primary-wrapper {
  height: 6.4rem;
  border: var(--l200) solid var(--n20);
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-top: 12px;
}
.btn-primary-wrapper:not(.disabled):hover {
  cursor: pointer;
}

.btn-primary-wrapper.fixed .btn-state-a,
.btn-primary-wrapper.fixed .btn-state-b {
  width: 100%;
  height: 100%;
}

.btn-primary-wrapper.gallery-btn .btn-state-a,
.btn-primary-wrapper.gallery-btn .btn-state-b {
  width: 100%;
  height: 100%;
}

.btn-primary-wrapper:not(.disabled):hover > .btn-state-b,
.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-b {
  animation-name: clipIn;
  animation-duration: var(--a100);
  transform-origin: left;
  animation-timing-function: ease;
  display: block;
}

.btn-primary-wrapper:not(.disabled):active {
  color: var(--n100);
  background-color: var(--n20);
  opacity: 0.75;
}

.btn-primary-wrapper .btn-state-b p:after {
  transform: translateX(0.2rem);
}

.btn-primary-wrapper:not(.disabled):hover > .btn-state-b p:after,
.btn-primary-wrapper:not(.disabled):hover > .btn-state-a p:after,
.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-b:after,
.btn-primary-wrapper.fixed:not(.disabled):hover > .btn-state-a:after,
.btn-primary-wrapper.gallery-btn:not(.disabled):hover > .btn-state-b:after,
.btn-primary-wrapper.gallery-btn:not(.disabled):hover > .btn-state-a:after {
  animation-name: slightMoveIn;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  display: block;
}
.btn-primary-wrapper.fixed .btn-state-a:after,
.btn-primary-wrapper.fixed .btn-state-b:after,
.btn-primary-wrapper.gallery-btn .btn-state-a:after,
.btn-primary-wrapper.gallery-btn .btn-state-b:after {
  right: 1.4rem;
  width: 3.6rem;
  height: 3.6rem;
  content: "";
  position: absolute;
  top: 1.4rem;
  margin: auto 0;

  animation-name: slightMoveOut;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  display: block;

  background-repeat: no-repeat;
  background-size: 3.6rem;
  background-position: center;
}
.btn-primary-wrapper .btn-state-a p:after,
.btn-primary-wrapper .btn-state-b p:after {
  width: 3.6rem;
  height: 3.6rem;
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 1.4rem;
  margin: auto 0;

  animation-name: slightMoveOut;
  animation-duration: var(--a100);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  display: block;

  background-repeat: no-repeat;
  background-size: 3.6rem;
  background-position: center;
}
.btn-primary-wrapper .btn-state-a p {
  color: var(--n20);
}
.btn-primary-wrapper .btn-state-a p:after,
.btn-primary-wrapper.fixed .btn-state-a:after,
.btn-primary-wrapper.gallery-btn .btn-state-a:after {
  background-image: url("../resources/ic/ic_arrow_right_n20.svg");
}
.btn-primary-wrapper .btn-state-b {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--n20);
  color: var(--n100);
  overflow: hidden;

  clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
  -webkit-clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);

  display: none;
}
.btn-primary-wrapper .btn-state-b p:after,
.btn-primary-wrapper.fixed .btn-state-b:after,
.btn-primary-wrapper.gallery-btn .btn-state-b:after {
  transform: translateX(0.2rem);
  background-image: url("../resources/ic/ic_arrow_right_white.svg");
}
.btn-primary-wrapper p {
  margin: 0;
  line-height: 6.4rem;
  margin: 0rem 6.4rem 0rem 2.4rem;
}
.btn-primary-wrapper.fixed {
  margin: 0;
  width: 6.4rem;
  height: 6.4rem;
  background-color: #fff;
}
.btn-primary-wrapper.gallery-btn {
  margin: 0;
  width: 6.4rem;
  height: 6.4rem;
}

.btn-primary {
  position: relative;
  height: 6.4rem;
  width: 100%;
}
.btn-primary .btn-primary-wrapper {
  position: absolute;
  bottom: 0;
}

/* Primary Button Animation */

@keyframes clipIn {
  from {
    clip-path: inset(-0.1rem 100% -0.1rem -0.1rem);
    -webkit-clip-path: inset(-0.1rem 100% -0.1rem -0.1rem);
  }
  to {
    clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
    -webkit-clip-path: inset(-0.1rem 0% -0.1rem -0.1rem);
  }
}
@keyframes slightMoveIn {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(0.2rem);
  }
}
@keyframes slightMoveOut {
  from {
    transform: translateX(0.2rem);
  }
  to {
    transform: translateX(0rem);
  }
}

/* ------------------------------ */
/* TABLE */
/* ------------------------------ */

/*Not able to test it yet*/
table.copy {
  font-family: "BarlowRegular", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3.2rem;

  width: 100%;
}

table.copy tr th {
  text-align: left;
  font-weight: 600;
  /*max-width: 12rem;*/
}

table.copy,
table.copy th,
table.copy td {
  border-bottom: 0.1rem solid var(--n80);
  border-collapse: collapse;
  padding: 1.25rem 1.75rem;
  vertical-align: top;
}

table.copy,
table.copy tr:last-child th,
table.copy tr:last-child td {
  border-bottom-width: 0rem;
}

/* ------------------------------ */
/* DIVIDER */
/* ------------------------------ */
.divider {
  height: 0.1rem;
  width: 100%;
  background-color: var(--n80);
}

/* ------------------------------ */
/* SPACING */
/* ------------------------------ */
.sp50 {
  margin-top: var(--sp50);
}
.sp100 {
  margin-top: var(--sp100);
}
.sp200 {
  margin-top: var(--sp200);
}
.sp300 {
  margin-top: var(--sp300);
}
.sp400 {
  margin-top: var(--sp400);
}
.sp450 {
  margin-top: var(--sp450);
}
.sp500 {
  margin-top: var(--sp500);
}
.sp600 {
  margin-top: var(--sp600);
}
.sp700 {
  margin-top: var(--sp700);
}
.sp1400 {
  margin-top: var(--sp1400);
}

/* ------------------------------ */
/* BACKGROUNDS */
/* ------------------------------ */

.bg01 {
  background-color: var(--b96) !important;
}
.bg02 {
  background-color: var(--t96) !important;
}
.bg03 {
  background-color: var(--y98) !important;
}
.bg04 {
  background-color: var(--n60) !important;
}
.bg05 {
  background-color: var(--n80) !important;
}
.bg06 {
  background-color: white !important;
}
.bg07 {
  background-color: var(--n96) !important;
}

.bgBrandLB {
  background-color: #ffd000 !important;
}
.bgBrandKLE {
  background-color: #1755a2 !important;
}
.bgBrandSV {
  background-color: #ff0000 !important;
}
.bgBrandDEK {
  background-color: #027d40 !important;
}
.bgBrandHKG {
  background-color: #023a7d !important;
}
.bgBrandNIC {
  background-color: #182e75 !important;
}
.bgBrandVI {
  background-color: #cc0233 !important;
}
.bgBrandROW {
  background-color: #f17708 !important;
}
.bgBrandCA {
  background-color: #0073d0 !important;
}
.bgBrandKAE {
  background-color: #ffe500 !important;
}
.bgBrandST {
  background-color: #00893e !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  html {
    word-wrap: break-word;
  }

  h1 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  /* Body */
  .body-wrapper {
    width: 90%;
  }
  .list ul li {
    padding-left: 0;
  }

  /* Other */
  .home-tiles {
    flex-direction: column;
    row-gap: var(--sp400);
  }
  .home-tiles a.tile .tile-wrapper {
    padding: 6.8rem 4rem 6.8rem 4rem;
  }
  .feedback-img {
    display: none;
  }
  .feedback-text {
    padding: 6.8rem 4rem 6.8rem 4rem;
  }

  /* Projects */
  .projects,
  .projects.blog {
    flex-direction: column;
  }

  /* Blog */
  .blog {
    flex-direction: column;
  }
  .blog-wrapper .article {
    flex-direction: column-reverse;
  }
  .content-wrapper {
    width: 90%;
    margin: 0 auto;
  }

  /* Navigation */
  #nav-desktop ul li.item {
    display: none;
  }
  #nav-desktop ul li.nav-icon {
    display: block;
  }
  #nav-mobile {
    display: none;
  }
  #nav-desktop {
    display: block;
  }

  /* Content */
  .content-header h1 {
    width: 100%;
  }
  .content-header p.subline {
    width: 100%;
  }
  .content-header .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact .header {
    flex-direction: column;
  }
  .contact-bar {
    flex-direction: column;
  }
  .section-wrapper .section-item {
    width: 100%;
  }
  .content-wrapper-blog-margin {
    width: 100%;
  }
  .content-flex .content {
    flex-direction: column;
  }

  /* Accordeon */
  .panel .panel-content {
    flex-direction: row;
  }
  .panel .panel-content > div {
    order: 2;
    margin-bottom: var(--sp300);
    flex: 0 0 calc((100%) / 1);
  }
  .panel .panel-content .img {
    order: 1;
    margin-bottom: var(--sp300);
  }
  .acc-header p {
    width: 100%;
  }
  .panel-content .img {
    max-height: 20rem;
  }

  /* Gallery */
  .btn-primary-wrapper.gallery-btn.gallery-back {
    left: 3rem;
  }
  .btn-primary-wrapper.gallery-btn.gallery-right {
    right: 3rem;
  }

  /* Table */

  table.copy tr {
    display: flex;
    flex-direction: column;
  }
  table.copy,
  table.copy th,
  table.copy td {
    border-bottom-width: 0rem;
    padding: 0.25rem 1.75rem;
  }
  table.copy tr:not(tr:first-child) th {
    border-top: 0.1rem solid var(--n80);
    padding-top: 1.25rem;
  }
  table.copy tr td:last-child {
    padding-bottom: 1.25rem;
  }

  /* Navigation */

  .top-nav.light ul li a,
  .top-nav.dark ul li a {
    display: none;
  }

  #nav-desktop ul li.nav-icon {
    height: 24px;
    padding-right: 2rem;
  }

  .top-nav ul li select {
    background-size: 28px;
    width: 32px;
    overflow: hidden;
  }
}
/* 640 ------------------------------------------------------------ */
@media (max-width: 767px) and (min-width: 640px) {
  html {
    word-wrap: break-word;
  }
  h1 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  /* Body */
  .body-wrapper {
    width: 90%;
  }
  .list ul li {
    padding-left: 0;
  }

  /* Other */
  .home-tiles {
    flex-direction: column;
    row-gap: var(--sp400);
  }
  .feedback-img {
    display: none;
  }

  /* Projects */
  .projects,
  .projects.blog {
    flex-direction: column;
  }

  /* Blog */
  .blog {
    flex-direction: column;
  }
  .blog-wrapper .article {
    flex-direction: column-reverse;
  }

  /* Navigation */
  #nav-desktop ul li.item {
    display: none;
  }
  #nav-desktop ul li.nav-icon {
    display: block;
  }
  #nav-mobile {
    display: none;
  }
  #nav-desktop {
    display: block;
  }

  /* Content */
  .content-header h1 {
    width: 100%;
  }
  .content-header p.subline {
    width: 100%;
  }
  .content-header .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact .header {
    flex-direction: column;
  }
  .section-wrapper .section-item {
    width: 100%;
  }
  .section-wrapper .section-item {
    width: 90%;
  }
  .content-wrapper-blog-margin {
    width: 100%;
  }
  .content-flex .content {
    flex-direction: column;
  }

  /* Accordeon */
  .panel .panel-content {
    flex-direction: row;
  }
  .panel .panel-content > div {
    order: 2;
    margin-bottom: var(--sp300);
    flex: 0 0 calc((100%) / 1);
  }
  .panel .panel-content .img {
    order: 1;
    margin-bottom: var(--sp300);
  }
  .panel-content .img {
    max-height: 20rem;
  }

  /* Gallery */
  .btn-primary-wrapper.gallery-btn.gallery-back {
    left: 3rem;
  }
  .btn-primary-wrapper.gallery-btn.gallery-right {
    right: 3rem;
  }

  /* Table */

  table.copy tr {
    display: flex;
    flex-direction: column;
  }
  table.copy,
  table.copy th,
  table.copy td {
    border-bottom-width: 0rem;
    padding: 0.25rem 1.75rem;
  }
  table.copy tr:not(tr:first-child) th {
    border-top: 0.1rem solid var(--n80);
    padding-top: 1.25rem;
  }
  table.copy tr td:last-child {
    padding-bottom: 1.25rem;
  }
}
/* 768 ------------------------------------------------------------ */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Body */
  .body-wrapper {
    width: 90%;
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }

  /* Other */
  .home-tiles {
    flex-direction: column;
    row-gap: var(--sp400);
  }
  .feedback-img {
    display: none;
  }
  /* Projects */
  .projects,
  .projects.blog {
    flex-direction: column;
  }

  /* Blog */
  .blog {
    flex-direction: column;
  }
  .blog-wrapper .article {
    flex-direction: column-reverse;
  }

  /* Navigation */
  #nav-desktop ul li.item {
    display: none;
  }
  #nav-desktop ul li.nav-icon {
    display: block;
  }
  #nav-mobile {
    display: none;
  }
  #nav-desktop {
    display: block;
  }

  /* Content */
  .content-header h1 {
    width: 80%;
  }
  .content-header p.subline {
    width: 100%;
  }
  .content-header .wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .contact .header {
    flex-direction: column;
  }
  .section-wrapper .section-item {
    width: 80%;
  }
  .content-wrapper-blog-margin {
    width: 80%;
  }
  .content-flex .content {
    flex-direction: column;
  }

  /* Accordeon */
  .panel .panel-content {
    flex-direction: row;
  }
  .panel .panel-content > div {
    order: 2;
    margin-bottom: var(--sp300);
    flex: 0 0 calc((100%) / 1);
  }
  .panel .panel-content .img {
    order: 1;
    margin-bottom: var(--sp300);
  }
  .panel-content .img {
    max-height: 20rem;
  }

  /* Gallery */
  .btn-primary-wrapper.gallery-btn.gallery-back {
    left: 3rem;
  }
  .btn-primary-wrapper.gallery-btn.gallery-right {
    right: 3rem;
  }

  /* Table */

  table.copy tr {
    display: flex;
    flex-direction: column;
  }
  table.copy,
  table.copy th,
  table.copy td {
    border-bottom-width: 0rem;
    padding: 0.25rem 1.75rem;
  }
  table.copy tr:not(tr:first-child) th {
    border-top: 0.1rem solid var(--n80);
    padding-top: 1.25rem;
  }
  table.copy tr td:last-child {
    padding-bottom: 1.25rem;
  }
}
/* 1024 ------------------------------------------------------------ */
@media (max-width: 1279px) and (min-width: 1024px) {
  /* Body */
  .body-wrapper {
    width: calc(1024px - var(--sp500));
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }
  .body.hide {
    animation-duration: 0;
    animation-name: showBody;
  }

  /* Content */
  .content-flex .content {
    flex-direction: column;
  }
  .content-wrapper {
    width: 100%;
  }
  .content-header .wrapper {
    align-items: flex-start;
  }

  /* Projects */
  .projects,
  .projects.blog {
    flex-direction: row;
  }

  .project-wrapper.col2 {
    flex: 0 0 calc((100%) / 1);
  }
  .project-wrapper {
    flex: 0 0 calc((100% - 4rem) / 2);
  }

  /* Blog */
  .blog .img {
    width: 46rem;
    height: 46rem;
  }

  /* Navigation */
  #nav-mobile {
    display: none !important;
  }
  #nav-desktop {
    display: block !important;
  }
  .show-mobile-nav {
    animation-name: hideMobileNav;
  }

  /* Accordeon */
  .panel-content .img {
    max-height: 32rem !important;
  }
}
/* 1280 ------------------------------------------------------------ */
@media (max-width: 1919px) and (min-width: 1280px) {
  /* Body */
  .body-wrapper {
    width: calc(1280px - var(--sp500));
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }
  .body.hide {
    animation-duration: 0;
    animation-name: showBody;
  }

  /* Content */
  .content-flex .content {
    flex-direction: column;
  }

  /* Navigation */
  #nav-mobile {
    display: none !important;
  }
  #nav-desktop {
    display: block !important;
  }
}
/* 1440 ------------------------------------------------------------ */
@media (max-width: 1919px) and (min-width: 1440px) {
  /* Body */
  .body-wrapper {
    width: calc(1440px - var(--sp500));
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }
  .body.hide {
    animation-duration: 0;
    animation-name: showBody;
  }

  /* Content */
  .content-flex .content {
    flex-direction: column;
  }

  /* Navigation */
  #nav-mobile {
    display: none !important;
  }
  #nav-desktop {
    display: block !important;
  }
}
/* 1920 ------------------------------------------------------------ */
@media (max-width: 2559px) and (min-width: 1920px) {
  /* Body */
  .body-wrapper {
    width: calc(1920px - var(--sp500));
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }
  .body.hide {
    animation-duration: 0;
    animation-name: showBody;
  }
  .full-width-wrapper {
    width: 1920px;
  }
  .content-wrapper {
    width: 90%;
  }
  #galleryCompany .gallery {
    height: 64rem !important;
  }

  /* Navigation */
  #nav-mobile {
    display: none !important;
  }
  #nav-desktop {
    display: block !important;
  }
}
/* > 2560 ------------------------------------------------------------ */
@media screen and (min-width: 2560px) {
  /* Body */
  .body-wrapper {
    width: 2048px;
  }
  .top-nav .body-wrapper {
    width: calc(100% - var(--sp500));
  }
  .body.hide {
    animation-duration: 0;
    animation-name: showBody;
  }
  .full-width-wrapper {
    width: 2048px;
  }
  .content-wrapper {
    width: 90%;
  }
  #galleryCompany .gallery {
    max-height: 80rem !important;
  }

  /* Navigation */
  #nav-mobile {
    display: none !important;
  }
  #nav-desktop {
    display: block !important;
  }
}

/* eTracker Custom Slide */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-style: solid;
  border-width: thin;
  border-color: #081433;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  top: 3px;
  left: 3px;
  background-color: #081433;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #081433;
}

input:checked + .slider:before {
  background-color: white;
}

input:focus + .slider {
  box-shadow: 0 0 1px #081433;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 28px;
}

.slider.round:before {
  border-radius: 50%;
}

.et-toggle-label {
  float: right;
  width: 80%;
}