@font-face {
  font-family: "diatype-regular";
  src: url("../fonts/ABCDiatype-Regular.woff2") format("woff2"), url("../fonts/ABCDiatype-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "diatype-bold";
  src: url("../fonts/ABCDiatype-Bold.woff2") format("woff2"), url("../fonts/ABCDiatype-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "diatypemono-regular";
  src: url("../fonts/ABCDiatypeMono-Regular.woff2") format("woff2"), url("../fonts/ABCDiatypeMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.hide {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  position: fixed;
  pointer-events: none;
}

body .fc-rent,
body .hc-rent h2,
body .hc-rent a:hover {
  color: #009fd2 !important;
}
body .fc-rent.konturrent,
body .hc-rent h2.konturrent,
body .hc-rent a:hover.konturrent {
  border: 4px solid #009fd2 !important;
}
body .fc-service,
body .hc-service h2,
body .hc-service a:hover {
  color: #004ea2 !important;
}
body .fc-service.konturrent,
body .hc-service h2.konturrent,
body .hc-service a:hover.konturrent {
  border: 4px solid #004ea2 !important;
}
body .fc-doc,
body .hc-doc h2,
body .hc-doc a:hover {
  color: #ff8300 !important;
}
body .fc-fiction,
body .hc-fiction h2,
body .hc-fiction a:hover {
  color: #8b0089 !important;
}
body .fc-lab,
body .hc-lab h2,
body .hc-lab a:hover {
  color: #ff0089 !important;
}
body .bg-rent {
  background-color: #009fd2 !important;
  color: #fff;
}
body .bg-service {
  background-color: #004ea2 !important;
  color: #fff;
}
body .bg-doc {
  background-color: #ff8300 !important;
}
body .bg-fiction {
  background-color: #8b0089 !important;
  color: #fff;
}
body .bg-lab {
  background-color: #ff0089 !important;
}

.box {
  aspect-ratio: 2/1.3;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
@media only screen and (max-width: 600px) {
  .box {
    font-size: 2rem;
  }
}

.align-center {
  align-items: center;
}

.uppercase {
  text-transform: uppercase;
}

.mono {
  font-family: diatypemono-regular, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: normal;
}

.text-center {
  text-align: center;
}

img {
  display: block;
  max-width: 100%;
}

body {
  font-size: 1.5rem;
}

html {
  font-family: diatype-regular, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 900px) {
  html {
    font-size: 12px;
  }
}
html.dark header .navigation {
  color: #000;
  padding-right: 10px;
}
html strong {
  font-family: diatype-bold, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
}
html a {
  color: inherit;
  text-decoration: none;
}

.logo-with-arrow {
  gap: 10px;
  justify-content: center;
}
.logo-with-arrow svg {
  height: 33px;
}

.logo-wrapper {
  display: flex;
}
.logo-wrapper svg {
  height: 34px;
}
@media only screen and (max-width: 600px) {
  .logo-wrapper svg {
    height: 30px;
  }
}

.full-width, header, main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

main .bg-schwarz {
  background-color: #000;
  color: #fff;
}
main .bg-schwarz section {
  padding: 0 20px 40px 20px;
}
main .bg-schwarz section.project-header {
  padding: 16px 0 0;
}

header {
  display: flex;
  font-size: 16px;
  padding-top: 16px;
  background-color: #fff;
  position: sticky;
  top: 0px;
  z-index: 99;
}
header nav.navigation {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
}
header nav.navigation .navigation-items {
  display: flex;
  gap: 20px;
  font-family: diatype-bold, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 600px) {
  header nav.navigation .navigation-items {
    display: none;
  }
}
header nav.navigation .navigation-items a {
  border-bottom: 3px solid #fff;
  color: inherit;
  text-decoration: inherit;
  line-height: 28px;
  font-size: 1.5rem;
}
header nav.navigation .navigation-items a.active {
  border-bottom: 3px solid #000;
}
header nav.navigation .navigation-items a:hover {
  border-bottom: 3px solid #000;
}
header nav.mobile_navigation {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 20px;
}
@media only screen and (max-width: 600px) {
  header nav.mobile_navigation.open {
    display: block;
  }
}
header nav.mobile_navigation a {
  display: block;
  font-size: 2.5rem;
}
header nav.mobile_navigation .lang {
  margin-top: 20px;
}
header .nav-o-meter {
  position: fixed;
  top: 1px;
  right: 16px;
  z-index: 9999999999;
  display: none;
  cursor: pointer;
  width: 46px;
  height: 32px;
}
@media only screen and (max-width: 600px) {
  header .nav-o-meter {
    display: block;
  }
}
header .nav-o-meter ul.bars li {
  border-radius: 1px;
  left: 8px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  width: 30px;
  height: 2px;
  background-color: #000;
  position: absolute;
  margin-top: -1px;
  top: 50%;
  opacity: 1;
  transition: all 300ms ease-in-out;
}
header .nav-o-meter ul.bars li:first-child {
  transform: translateY(-8px) rotate(0deg);
}
header .nav-o-meter ul.bars li:last-child {
  transform: translateY(8px) rotate(0deg);
}
header .nav-o-meter.opened {
  background-color: transparent !important;
  top: 7px;
  right: 7px;
}
header .nav-o-meter.opened ul li {
  background-color: #000;
}
header .nav-o-meter.opened ul li:first-child {
  transform: translate(0) rotate(45deg);
}
header .nav-o-meter.opened ul li:nth-child(2) {
  opacity: 0;
}
header .nav-o-meter.opened ul li:last-child {
  transform: translate(0) rotate(-45deg);
}
header .lang {
  text-transform: capitalize;
  display: flex;
  align-items: center;
}
header .lang a {
  display: block;
}
header .lang .sp {
  display: block;
  padding: 0 7px;
  font-size: 1.5rem;
}
header .lang .sp:last-of-type {
  display: none;
}

.main-carousel {
  user-select: none;
}
.main-carousel .cell {
  aspect-ratio: 3/2;
}
.main-carousel svg {
  height: 34px;
  display: block;
  z-index: 10;
  position: relative;
}
.main-carousel .carousel-cell {
  background-color: unset;
  border: 4px solid #000;
  line-height: 53px;
  font-size: 50px;
  text-align: center;
  margin: 0 8px;
  width: calc(50% - 8px);
  overflow: hidden;
  font-family: diatypemono-regular;
  font-size: 2.5rem;
  line-height: 1.2;
  position: relative;
}
.main-carousel .carousel-cell.bild .cell-content:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-color: black;
}
.main-carousel .carousel-cell.farbe {
  border: 4px solid #000;
  background-color: #000;
}
.main-carousel .carousel-cell.farbe .cell-content {
  color: #fff;
}
@media only screen and (max-width: 600px) {
  .main-carousel .carousel-cell {
    width: 100%;
  }
}
.main-carousel .carousel-cell:before {
  display: block;
  text-align: center;
  content: 1;
  line-height: 200px;
  font-size: 80px;
  color: white;
}
@media only screen and (max-width: 900px) {
  .main-carousel .carousel-cell {
    font-size: 1.5rem;
  }
}
.main-carousel .carousel-cell a {
  text-decoration: none;
}
.main-carousel .carousel-cell .cell-content {
  color: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
}
.main-carousel .carousel-cell .cell-content .cell-text {
  z-index: 1;
  position: relative;
  padding: 20px;
  margin: 0 auto;
}
.main-carousel .carousel-cell .cell-content .cell-text.has-img {
  color: #fff;
}
.main-carousel .carousel-cell .cell-content .cell-text.center {
  justify-content: center;
}
.main-carousel .carousel-cell .cell-content .cell-img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-carousel .carousel-cell.black {
  background-color: #000;
}
.main-carousel .carousel-cell.black .cell-content {
  color: #fff;
}
.main-carousel .carousel-cell.news {
  border: 4px solid #000;
  background-color: #000;
}
.main-carousel .carousel-cell.news .cell-content {
  color: #fff;
}
.main-carousel .carousel-cell.kontur {
  background-color: unset;
  border: 4px solid #000;
}
.main-carousel .carousel-cell.kontur .cell-content {
  color: #000;
}
.main-carousel .carousel-cell.schwarz {
  background-color: #000;
  border: 4px solid #000;
}
.main-carousel .carousel-cell.schwarz .cell-content {
  color: #fff;
}
.main-carousel .carousel-cell.doc {
  background-color: #ff8300;
  border: 4px solid #ff8300;
}
.main-carousel .carousel-cell.rent {
  background-color: #009fd2;
  border: 4px solid #009fd2;
}
.main-carousel .carousel-cell.service {
  background-color: #004ea2;
  border: 4px solid #004ea2;
}
.main-carousel .carousel-cell.fiction {
  background-color: #8b0089;
  border: 4px solid #8b0089;
}
.main-carousel .carousel-cell.lab {
  background-color: #ff0089;
  border: 4px solid #ff0089;
}
.main-carousel .carousel-cell.kontur {
  background-color: unset;
}
.main-carousel .flickity-page-dots {
  bottom: -22px !important;
  display: table;
  height: 16px;
  margin-top: 16px;
  position: static;
}
.main-carousel .flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
  display: table-cell;
  background: #333;
}
.main-carousel .flickity-page-dots .dot.is-selected {
  opacity: 1;
}

section {
  margin-bottom: 60px;
}

p {
  margin-bottom: 20px;
}

.has-marker svg {
  height: 34px;
}

.font-lead, .quicklinks .link-box, h2, .lead-text {
  font-size: 2.5rem;
  line-height: 1.1;
}
@media only screen and (max-width: 900px) {
  .font-lead, .quicklinks .link-box, h2, .lead-text {
    font-size: 2rem;
  }
}

.lead-text {
  text-align: center;
  grid-column-start: 2;
  grid-column-end: 12;
}

h1 {
  font-size: 4.375rem;
  text-align: center;
  font-weight: normal;
  font-family: diatypemono-regular, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  line-height: 1.2;
}

h2 {
  margin-bottom: 0.5em;
}
h2.text-normal {
  font-weight: normal;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1em;
  text-transform: uppercase;
}

.img-text {
  font-size: 1.5rem;
}

.page-intro {
  font-size: 50px;
  font-size: clamp(2rem, 4vw, 50px);
  font-family: diatypemono-regular, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
}
@media only screen and (max-width: 600px) {
  .page-intro {
    font-size: 2rem;
    margin-bottom: 20px;
  }
}

.quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 600px) {
  .quicklinks {
    display: block !important;
  }
}
.quicklinks .link-box {
  display: block;
  text-decoration: none;
  margin-bottom: 20px;
}

.text-block-center {
  font-size: 2.5rem;
  text-align: center;
}

.text-block-left {
  font-size: 1.5rem;
  text-align: left;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
@media only screen and (max-width: 600px) {
  .grid {
    display: block;
  }
}

.grid-full {
  grid-column: 1/13;
}

.grid-1-5 {
  grid-column: 1/5;
}

.grid-5-9 {
  grid-column: 5/9;
}

.grid-9-13 {
  grid-column: 9/13;
}

.grid-left {
  grid-column: 1/7;
}

.grid-right {
  grid-column: 7/13;
}

.grid-3-7 {
  grid-column: 3/7;
}

.grid-4-10 {
  grid-column: 4/10;
}

.grid-row {
  grid-column: 1/13;
  display: grid;
}

.bc-grid-left,
.bc-grid-center,
.bc-grid-left-center {
  grid-column-start: 1;
}
.bc-grid-left:not(.bc-grid-left),
.bc-grid-center:not(.bc-grid-left),
.bc-grid-left-center:not(.bc-grid-left) {
  grid-column-start: 3;
}
.bc-grid-left.bc-grid-width-4,
.bc-grid-center.bc-grid-width-4,
.bc-grid-left-center.bc-grid-width-4 {
  grid-column-end: span 4;
}
.bc-grid-left.bc-grid-width-4.bc-grid-center,
.bc-grid-center.bc-grid-width-4.bc-grid-center,
.bc-grid-left-center.bc-grid-width-4.bc-grid-center {
  grid-column-start: 5;
}
.bc-grid-left.bc-grid-width-6,
.bc-grid-center.bc-grid-width-6,
.bc-grid-left-center.bc-grid-width-6 {
  grid-column-end: span 6;
}
.bc-grid-left.bc-grid-width-6.bc-grid-center,
.bc-grid-center.bc-grid-width-6.bc-grid-center,
.bc-grid-left-center.bc-grid-width-6.bc-grid-center {
  grid-column-start: 4;
}
.bc-grid-left.bc-grid-width-8,
.bc-grid-center.bc-grid-width-8,
.bc-grid-left-center.bc-grid-width-8 {
  grid-column-end: span 8;
}
.bc-grid-left.bc-grid-width-8.bc-grid-center,
.bc-grid-center.bc-grid-width-8.bc-grid-center,
.bc-grid-left-center.bc-grid-width-8.bc-grid-center {
  grid-column-start: 3;
}

.bc-grid-right,
.bc-grid-right-center {
  grid-column-end: 13;
}
.bc-grid-right:not(.bc-grid-right),
.bc-grid-right-center:not(.bc-grid-right) {
  grid-column-end: 11;
}
.bc-grid-right.bc-grid-width-4,
.bc-grid-right-center.bc-grid-width-4 {
  grid-column-start: span 4;
}
.bc-grid-right.bc-grid-width-6,
.bc-grid-right-center.bc-grid-width-6 {
  grid-column-start: span 6;
}
.bc-grid-right.bc-grid-width-8,
.bc-grid-right-center.bc-grid-width-8 {
  grid-column-start: span 8;
}

.bc-grid-center {
  grid-column-start: 13;
}
.bc-grid-center :not(.bc-grid-right) {
  grid-column-end: 11;
}
.bc-grid-center.bc-grid-width-4 {
  grid-column-start: span 4;
}
.bc-grid-center.bc-grid-width-6 {
  grid-column-start: span 6;
}
.bc-grid-center.bc-grid-width-8 {
  grid-column-start: span 8;
}

.bc-text-size-2 p {
  font-size: 2.5rem;
}

.bc-text-align-center p {
  text-align: center;
}

.bc-text-align-right {
  text-align: right;
}

.news-item {
  margin-bottom: 75px;
}
.news-date {
  margin-bottom: 20px;
}
.news-content figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.news-content figure img {
  grid-column-start: 2;
  grid-column-end: 6;
}

.project-list {
  font-family: diatype-bold, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: bold;
}
.project-list .filter-bar {
  display: flex;
  gap: 20px;
  font-size: 1.5rem;
  margin-bottom: 60px;
}
@media only screen and (max-width: 600px) {
  .project-list .filter-bar {
    gap: 5px;
    flex-wrap: wrap;
  }
}
.project-list .filter-bar .filter-btn-wrapper {
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 600px) {
  .project-list .filter-bar .filter-btn-wrapper {
    gap: 5px;
  }
}
.project-list .filter-bar .button {
  border: none;
  color: #fff;
  padding: 3px 14px;
  font-family: diatype-bold, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  cursor: pointer;
  background-color: #000;
  position: relative;
}
@media only screen and (max-width: 600px) {
  .project-list .filter-bar .button {
    font-size: 1.5rem;
    padding: 4px 5px;
  }
}
.project-list .filter-bar .button:hover::after, .project-list .filter-bar .button.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0px;
  height: 3px;
  width: 100%;
  background-color: #000;
}
.project-list .filter-bar .button:focus {
  outline: none;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
.project-list .filter-bar .button.ghost {
  background-color: transparent;
  border-bottom: 3px solid transparent;
  color: #000;
  padding: 3px 0px;
  box-shadow: none;
}
.project-list .filter-bar .button.ghost:hover, .project-list .filter-bar .button.ghost:focus, .project-list .filter-bar .button.ghost.active {
  border-bottom: 3px solid #000;
}
.project-list .filter-bar .button.ghost:hover::after, .project-list .filter-bar .button.ghost:focus::after, .project-list .filter-bar .button.ghost.active::after {
  display: none;
}
.project-list .filter-bar .search-field {
  display: flex;
  gap: 10px;
}
.project-list .filter-bar .fuzzy-search {
  border: none;
  padding: 2px;
  border-bottom: 2px solid #000;
  font-size: 1.5rem;
}
.project-list .filter-bar .fuzzy-search:focus, .project-list .filter-bar .fuzzy-search:hover {
  outline: 0;
  border-color: gray;
}
.project-list .service-liste {
  color: #fff;
}
.project-list .list {
  display: none;
}
.project-list .list li {
  list-style-type: none;
}
.project-list .list.active {
  display: grid;
}
.project-list .list-wrapper {
  display: block;
}
.project-list .list-wrapper .text-item {
  display: block;
  margin-bottom: 28px;
}
.project-list .list-wrapper .img-item {
  display: none;
}
.project-list .list-wrapper .img-item.fiction {
  color: #fff;
}
.project-list .list-wrapper .img-item.fiction a:hover * {
  color: #fff !important;
}
.project-list .list-wrapper a {
  display: block;
}
.project-list a:hover, .project-list a:focus {
  outline: none;
}
.project-list a:hover .projectdoc, .project-list a:focus .projectdoc {
  color: #ff8300;
}
.project-list a:hover .projectlab, .project-list a:focus .projectlab {
  color: #ff0089;
}
.project-list a:hover .projectfiction, .project-list a:focus .projectfiction {
  color: #8b0089;
}
.project-list .list-wrapper.image-list, .project-list .service-liste {
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(20rem, auto));
  gap: 16px;
}
@media only screen and (max-width: 600px) {
  .project-list .list-wrapper.image-list, .project-list .service-liste {
    display: block;
    margin-bottom: 16px;
  }
}
.project-list .list-wrapper.image-list .img-item, .project-list .service-liste .img-item {
  display: block;
}
@media only screen and (max-width: 600px) {
  .project-list .list-wrapper.image-list .img-item, .project-list .service-liste .img-item {
    margin-bottom: 16px;
  }
}
.project-list .list-wrapper.image-list .img-item.big, .project-list .service-liste .img-item.big {
  grid-column: span 2;
}
@media only screen and (max-width: 900px) {
  .project-list .list-wrapper.image-list .img-item.big, .project-list .service-liste .img-item.big {
    width: 100%;
  }
}
.project-list .list-wrapper.image-list .img-item .img-wrapper, .project-list .service-liste .img-item .img-wrapper {
  overflow: hidden;
}
.project-list .list-wrapper.image-list .img-item .img-wrapper img, .project-list .service-liste .img-item .img-wrapper img {
  transition: all 300ms ease-out;
  width: 100%;
}
.project-list .list-wrapper.image-list .img-item:hover img, .project-list .service-liste .img-item:hover img {
  transform: scale(1.1);
}
.project-list .list-wrapper.image-list .big.pos-left, .project-list .service-liste .big.pos-left {
  grid-column-start: 1;
  grid-column-end: 3;
}
.project-list .list-wrapper.image-list .big.pos-right, .project-list .service-liste .big.pos-right {
  grid-column-start: 2;
  grid-column-end: 4;
}
.project-list .list-wrapper.image-list .info-wrapper, .project-list .service-liste .info-wrapper {
  padding: 8px 16px;
  box-sizing: border-box;
  width: 100%;
}
.project-list .list-wrapper.image-list .text-item, .project-list .service-liste .text-item {
  display: none;
  margin-bottom: 10px;
}
.project-list .list-wrapper.image-list a, .project-list .service-liste a {
  display: block;
  height: 100%;
}
.project-list .list-wrapper.image-list a:hover, .project-list .list-wrapper.image-list a:focus, .project-list .service-liste a:hover, .project-list .service-liste a:focus {
  outline: none;
}
.project-list .list-wrapper.image-list a:hover .projectdoc, .project-list .list-wrapper.image-list a:hover .projectlab, .project-list .list-wrapper.image-list a:hover .projectfiction, .project-list .list-wrapper.image-list a:focus .projectdoc, .project-list .list-wrapper.image-list a:focus .projectlab, .project-list .list-wrapper.image-list a:focus .projectfiction, .project-list .service-liste a:hover .projectdoc, .project-list .service-liste a:hover .projectlab, .project-list .service-liste a:hover .projectfiction, .project-list .service-liste a:focus .projectdoc, .project-list .service-liste a:focus .projectlab, .project-list .service-liste a:focus .projectfiction {
  color: #000;
}
.project-list .service-liste a {
  background-color: #004ea2;
}

.project-wrapper a, .project-wrapper img {
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  .project-wrapper .infotext {
    font-size: 1.5rem;
  }
}

.project-header {
  padding: 10px;
}
.project-header-title {
  grid-row-start: 2;
  grid-column-start: 3;
  grid-column-end: 11;
  width: 100%;
  padding: 30px 0 60px;
}
@media only screen and (max-width: 900px) {
  .project-header-title {
    font-size: 2rem;
  }
}
.project-header .trailer > div {
  aspect-ratio: 16/9;
}
.project-header .gallery-images {
  pointer-events: none;
}

#streams ul li {
  list-style: none;
  font-size: 4.375rem;
}
#streams ul li a:hover {
  text-decoration: underline;
}

.hb-wrapper .hb-main-container {
  background-color: rgba(0, 0, 0, 0.9) !important;
}
.hb-wrapper .hb-main-container button {
  filter: invert(1);
}
.hb-wrapper .hb-left-icon-container {
  position: absolute;
  left: 0px !important;
  top: 50% !important;
  height: 42px !important;
}
.hb-wrapper .hb-right-icon-container {
  position: absolute;
  right: 0px !important;
  top: 50% !important;
  height: 42px !important;
}
.hb-wrapper .hb-counter {
  color: #fff;
}

.stream-video iframe {
  width: 100%;
  height: calc(100vh - 100px);
  border: none;
}

.team-container .portrait {
  grid-column: span 4;
  font-family: diatypemono-regular, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  line-height: 1.2;
}
.team-container .portrait:hover .hover {
  opacity: 1;
}
.team-container .portrait:hover .arrow {
  transform: translateX(10px);
}
.team-container .portrait .arrow {
  transition: transform 300ms ease-out;
}
.team-container .portrait .name {
  text-transform: uppercase;
  margin-top: 10px;
}

.portrait-img {
  position: relative;
}
.portrait-img .hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.footer-box {
  font-family: diatype-bold, Helvetica Neue, HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
}