/* =========================================================================
   ROTOCOP — Stylesheet
   =========================================================================
   Inhoud:
     1.  Reset & Base
     2.  Fonts
     3.  Animations
     4.  Page Structure (containers, panels)
     5.  Navigation
     6.  Home Page (header boxes, portfolio grid)
     7.  Project Pages (titles, tags, layout helpers)
     8.  About Page
     9.  Footer
     10. Utilities (video embed, dividers, text widths)
   ========================================================================= */


/* =========================================================================
   1. RESET & BASE
   ========================================================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  vertical-align: baseline;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
body { line-height: 1; }
img, video { max-width: 100%; height: auto; display: block; }

html, body {
  height: calc(100% - 0px);
  background-color: #fafafa;
  color: #1a1a1a;
  width: 100%;
  text-align: center;
  scroll-behavior: smooth;
}

a.deeplink:visited,
a.deeplink:link {
  -webkit-animation: colorchange 100s infinite alternate;
          animation: colorchange 100s infinite alternate;
  font-family: 'Suisse Intl SemiBold';
  text-decoration: solid underline 2px;
}
a.deeplink:hover { text-decoration: none; }


/* =========================================================================
   2. FONTS
   ========================================================================= */
@font-face {
  font-family: 'Suisse Intl Book';
  src: url('_fonts/SuisseIntl-Book.woff2') format('woff2'),
       url('_fonts/SuisseIntl-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Suisse Intl SemiBold';
  src: url('_fonts/SuisseIntl-SemiBold.woff2') format('woff2'),
       url('_fonts/SuisseIntl-SemiBold.woff') format('woff');
  font-weight: 700;
  font-style: bold;
  font-display: optional;
}

@font-face {
  font-family: 'Suisse Intl Regular';
  src: url('_fonts/SuisseIntl-Regular.woff2') format('woff2'),
       url('_fonts/SuisseIntl-Regular.woff') format('woff');
  font-weight: 300;
  font-style: light;
  font-display: optional;
}

@font-face {
  font-family: 'Integral Bold';
  src: url('_fonts/integral-bold.woff2') format('woff2'),
       url('_fonts/integral-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: optional;
}

@font-face {
  font-family: 'Integral Bold Oblique';
  src: url('_fonts/integral-boldoblique.woff2') format('woff2'),
       url('_fonts/integral-boldoblique.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: optional;
}


/* =========================================================================
   3. ANIMATIONS (rainbow color cycles)
   ========================================================================= */
@-webkit-keyframes colorchange {
  0%   { color: #7015FF; }
  10%  { color: #8e44ad; }
  20%  { color: #1abc9c; }
  30%  { color: #d35400; }
  40%  { color: blue; }
  50%  { color: #34495e; }
  60%  { color: blue; }
  70%  { color: #2980b9; }
  80%  { color: #f1c40f; }
  90%  { color: #2980b9; }
  100% { color: pink; }
}
@keyframes colorchange {
  0%   { color: #7015FF; }
  10%  { color: #8e44ad; }
  20%  { color: #1abc9c; }
  30%  { color: #d35400; }
  40%  { color: blue; }
  50%  { color: #34495e; }
  60%  { color: blue; }
  70%  { color: #2980b9; }
  80%  { color: #f1c40f; }
  90%  { color: #2980b9; }
  100% { color: pink; }
}

@-webkit-keyframes colorchangeLine {
  0%   { color: #7015FF; border-color: #7015FF; }
  10%  { color: #8e44ad; border-color: #8e44ad; }
  20%  { color: #1abc9c; border-color: #1abc9c; }
  30%  { color: #d35400; border-color: #d35400; }
  40%  { color: blue;    border-color: blue; }
  50%  { color: #34495e; border-color: #34495e; }
  60%  { color: blue;    border-color: blue; }
  70%  { color: #2980b9; border-color: #2980b9; }
  80%  { color: #f1c40f; border-color: #f1c40f; }
  90%  { color: #2980b9; border-color: #2980b9; }
  100% { color: pink;    border-color: pink; }
}
@keyframes colorchangeLine {
  0%   { color: #7015FF; border-color: #7015FF; }
  10%  { color: #8e44ad; border-color: #8e44ad; }
  20%  { color: #1abc9c; border-color: #1abc9c; }
  30%  { color: #d35400; border-color: #d35400; }
  40%  { color: blue;    border-color: blue; }
  50%  { color: #34495e; border-color: #34495e; }
  60%  { color: blue;    border-color: blue; }
  70%  { color: #2980b9; border-color: #2980b9; }
  80%  { color: #f1c40f; border-color: #f1c40f; }
  90%  { color: #2980b9; border-color: #2980b9; }
  100% { color: pink;    border-color: pink; }
}


/* =========================================================================
   4. PAGE STRUCTURE
   ========================================================================= */
#container {
  width: 100%;
  height: 100%;
  background-color: none;
  padding-top: 74px;
  z-index: 1;
}
#leftPanel  { width: 170px; min-height: 1px; background-color: none; float: left; }
#midPanel   {
  width: -webkit-calc(100% - 340px);
  width:    -moz-calc(100% - 340px);
  width:         calc(100% - 340px);
  background-color: none;
  float: left;
}
#rightPanel { width: 170px; min-height: 1px; background-color: none; float: left; }
#footer     { width: 100%; clear: both; background-color: #f6f6f6; z-index: 0; text-align: center; }
.maxWidthPanel { max-width: 1500px; margin-left: auto; margin-right: auto; }

@media only screen and (max-width: 968px) {
  #leftPanel  { width: 0px; min-height: 0px; }
  #rightPanel { width: 0px; min-height: 0px; }
  #midPanel   { width: 100%; padding-left: 20px; padding-right: 20px; }
}

/* Lottie scroll progress (sides) */
.lottie-progress      { background-color: none; height: 100%; position: fixed; bottom: 0; right: 10px; transform: rotate(180deg); }
.lottie-progress-left { background-color: none; height: 100%; position: fixed; bottom: 0; left: 10px; }
@media only screen and (max-width: 968px) {
  .lottie-progress      { display: none; }
  .lottie-progress-left { display: none; }
}


/* =========================================================================
   5. NAVIGATION
   ========================================================================= */
#nav {
  text-align: center;
  line-height: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  position: fixed;
  top: 0;
  left: 50%;
  width: -webkit-calc(100% - 338px);
  width:    -moz-calc(100% - 338px);
  width:         calc(100% - 338px);
  transform: translate(-50%, 0);
  background-color: #fafafa;
  z-index: 30;
}

#nav li {
  list-style: none;
  min-width: 20%;
  margin: 0 0px;
  display: inline-block;
  font-family: Integral Bold;
  font-size: 1.8em;
}
#nav li a {
  color: black;
  font-family: Integral Bold;
  text-decoration: none;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
  cursor: pointer;
}
#nav li a:hover {
  font-family: Integral Bold Oblique;
  color: #7015FF;
  letter-spacing: 1em;
}

@media only screen and (max-width: 968px) {
  #nav {
    width: -webkit-calc(100% - 0px);
    width:    -moz-calc(100% - 0px);
    width:         calc(100% - 0px);
    background-color: #fafafa;
  }
  #nav li { font-size: 1em; }
}


/* =========================================================================
   6. HOME PAGE
   ========================================================================= */
#headerBoxLeft  { width: 100%; background-color: none; text-align: left;  padding-top: 100px; }
#headerBoxRight { width: 100%; background-color: none; text-align: right; padding-top: 50px; padding-bottom: 100px; }
.headerText { font-family: 'Suisse Intl Book'; font-size: 40px; line-height: 1.2em; }
.rainbowHighlight {
  -webkit-animation: colorchange 100s infinite alternate;
          animation: colorchange 100s infinite alternate;
  font-family: Suisse Intl SemiBold;
}

@media only screen and (max-width: 768px) {
  .headerText { font-size: 26px; line-height: 1.2em; }
  #headerBoxLeft  { padding-top: 60px; }
  #headerBoxRight { padding-top: 40px; padding-bottom: 80px; }
}

/* Portfolio grid (work tiles on home) */
.visual-row { display: flex; flex-direction: row; gap: 10px; margin-bottom: 10px; }

.oneColumn   { max-width: 100%; }
.twoColumn   { max-width: 50%; }
.threeColumn { max-width: 33%; }

.visual-item       { position: relative; cursor: pointer; }
.visual-item img   { width: 100%; height: 100%; }
.visual-item video { width: 100%; height: 100%; object-fit: cover; }

@media only screen and (max-width: 968px) {
  .visual-row  { flex-direction: column; }
  .visual-item { max-width: 100%; }
}

.visual-overlay {
  z-index: 10;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(255, 0, 56, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s;
  transition-timing-function: ease;
  opacity: 0;
  font-family: Suisse Intl Book;
  font-size: 2em;
  color: white;
}
.visual-overlay:hover { opacity: 1; }


/* =========================================================================
   7. PROJECT PAGES
   ========================================================================= */
#titleDiv         { background-color: none; width: 100%; padding: 6em 0; }
.projectTitle     { font-family: 'Suisse Intl Book'; font-size: 40px; line-height: 1.2em; }
#projectTagDiv    { background-color: none; width: 100%; padding: 1em; }
.projectTag,
.projectTag2,
.descrTag {
  display: inline-block;
  font-family: 'Suisse Intl Book';
  font-size: .8em;
  padding: .5em 1.2em;
  margin: 5px 2px;
  border-radius: 25px;
  border: 1.5px solid #1a1a1a;
}

.project-item       { position: relative; width: 100%; }
.project-item img   { width: 100%; }
.project-item video { width: 100%; height: 100%; object-fit: cover; }

.projectTextLarge,
.headerTextLarge {
  font-family: 'Suisse Intl SemiBold';
  font-size: 60px;
  line-height: 1.2em;
  margin-bottom: 30px;
  background-color: none;
}
.headerTextMedium {
  font-family: 'Suisse Intl SemiBold';
  font-size: 36px;
  line-height: 1.2em;
  margin-bottom: 30px;
  background-color: none;
}

.headerTag {
  display: inline-block;
  font-family: 'Suisse Intl Book';
  font-size: 1.2em;
  padding: .5em 1.2em;
  margin: 24px 0;
  border-radius: 25px;
  border: 1.5px solid #1a1a1a;
  -webkit-animation: colorchangeLine 100s infinite alternate;
          animation: colorchangeLine 100s infinite alternate;
}
.projectTagLarge {
  display: inline-block;
  font-family: 'Suisse Intl Book';
  font-size: 1.2em;
  padding: .5em 1.2em;
  margin: 24px 0;
  border-radius: 25px;
  border: 1.5px solid #1a1a1a;
  -webkit-animation: colorchangeLine 100s infinite alternate;
          animation: colorchangeLine 100s infinite alternate;
}

.teamHighlight { font-family: 'Suisse Intl SemiBold'; }

.project-textBlock     { width: 100%; min-width: 100%; }
.project-leftAligned   { text-align: left;  max-width: 800px; float: left; }
.project-rightAligned  { text-align: right; max-width: 800px; float: right; }
.project-centerAligned { text-align: left;  max-width: 800px; background-color: none; margin: 0 auto; }
.project-centerAligned img { width: 100%; }
.clearAligned          { clear: both; }

.textParagraphHeader { font-family: 'Suisse Intl SemiBold'; font-size: 1.8em; text-decoration: underline; text-decoration-thickness: 3px; }
.textParagraph       { font-family: 'Suisse Intl Book'; font-size: 1.1em; line-height: 1.4em; }

.textPaddingBottom { padding-bottom: 3em; }
.textPadding6      { padding: 6em 0; }
.textPaddingLeft   { padding-left: 1em; }
.textPaddingRight  { padding-right: 2em; }
.textAlignLeft     { text-align: left; }
.textWhitespace    { width: 100%; height: 2em;   background-color: none; }
.projectWhitespace { width: 100%; height: 150px; background-color: none; }

@media only screen and (max-width: 968px) {
  .projectTextLarge,
  .headerTextLarge      { font-size: 36px; line-height: 1em; margin-bottom: 20px; }
  .headerTextMedium     { font-size: 26px; line-height: 1em; margin-bottom: 20px; }
  .project-rightAligned { padding-top: 3em; }
  .project-item         { max-width: 100%; }
  .textPadding6         { padding: 3em 0; }
  .projectWhitespace    { height: 60px; }
}


/* =========================================================================
   8. ABOUT PAGE
   ========================================================================= */
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  text-align: left;
}

/* Column system used on the about page */
.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* Grouping (clearfix) */
.group:before,
.group:after { content: ""; display: table; }
.group:after { clear: both; }
.group       { zoom: 1; /* For IE 6/7 */ }

/* Grid spans */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }
.span_2_of_2 { width: 100%; }
.span_1_of_2 { width: 49.2%; }

@media only screen and (max-width: 780px) {
  .col { margin: 1% 0 1% 0%; }
  .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
  .span_2_of_2, .span_1_of_2 { width: 100%; }
}

/* About-specific text & layout */
#content { margin: auto; padding: 0 1rem; max-width: 71.25rem; width: 100%; }

.koptekst    { font-family: Suisse Intl SemiBold; font-size: 1.35em; padding-bottom: 0.5em; }
.bioText     { font-family: Suisse Intl Book; font-size: 3em; line-height: 1.25em; padding-bottom: 4.5em; margin-top: 400px; }
.quoteLarge  { font-family: Suisse Intl Book; font-size: 3em; line-height: 1.25em; font-weight: bold; padding-top: 1em; padding-bottom: 1.5em; background-color: none; }

.workExpDiv   { padding: 1em 0em 1em 0em; }
.workExpDate  { font-size: 0.75em; font-family: Suisse Intl Regular; margin: 0.5em 0; }
.workExpDescr { font-family: Suisse Intl SemiBold; font-size: 0.95em; margin-top: 0px; }

.socialIcon   { width: 20px; }
.socialIndent { margin-left: 0.5em; }

#introQuote {
  padding-left: 100px;
  padding-top: 4%;
  font-family: OrLemmen-Regular;
  overflow: hidden;
  color: #f09475;
  background-color: none;
  white-space: nowrap;
  text-align: left;
}
.quoteLine1 { font-size: 8.5vw; line-height: normal; }
.quoteLine2 { font-family: OrLemmen-Thin; line-height: 2.6em; padding-top: 10vw; }
.quoteBold  { font-family: OrLemmen-Regular; color: none; }

.grid-container {
  padding-top: 3em;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 30px 20px;
}

.projectDescr  { font-size: .7em; text-transform: uppercase; }
.projectDescr2 { font-size: .7em; font-family: HelveticaNeueLTCYR-Roman; text-transform: none; }

.arrow       { width: 20px; }
.aboutHeader { padding-top: 100px; }
.aboutImage  { max-width: 300px; }
.about-item  { position: relative; width: 100%; }

/* About page — two-column flex layout (intro + photo) */
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
  padding-top: 100px;
  flex-direction: row;
}
.flex-container > div {
  background-color: none;
  width: 100%;
  margin: 10px 0;
  text-align: center;
}
.flex-container :nth-child(1) { order: 1; margin-right: 5px; text-align: left; }
.flex-container :nth-child(2) { order: 2; margin-left: 5px;  text-align: left; }

@media only screen and (max-width: 768px) {
  .flex-container { flex-direction: column; padding-top: 0px; }
  .flex-container :nth-child(1) { order: 2; }
  .flex-container :nth-child(2) { order: 1; text-align: center; }
}


/* =========================================================================
   9. FOOTER
   ========================================================================= */
.footerHeader    { font-family: 'Suisse Intl SemiBold'; font-size: 1em; padding-bottom: .6em; padding-top: 1.6em; }
.footerParagraph { font-family: 'Suisse Intl Book'; font-size: .8em; line-height: 2em; }
.footerRow {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  gap: 20px;
  background-color: none;
  width: -webkit-calc(100% - 340px);
  width:    -moz-calc(100% - 340px);
  width:         calc(100% - 340px);
  max-width: 1600px;
  padding-bottom: 140px;
}
.footerThreeColumn { width: 33%; max-width: 300px; text-align: left; }
.last              { margin-left: auto; }

@media only screen and (max-width: 968px) {
  .footerRow         { width: 100%; flex-direction: column; padding-bottom: 80px; }
  .footerThreeColumn { width: 100%; padding-left: 20px; padding-right: 20px; }
  .last              { margin-left: 0px; }
}


/* =========================================================================
   10. UTILITIES (replacements for inline styles)
   ========================================================================= */

/* Vimeo / iframe video embeds (16:9 aspect ratio) */
.video-embed         { padding: 56.25% 0 0 0; position: relative; }
.video-embed iframe  { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-embed--clipped { overflow: hidden; }

/* Text width constraints used on coming-soon / placeholder pages */
.text-narrow { max-width: 600px; }
.text-medium { max-width: 800px; }

/* Horizontal divider (used on about page) */
.hr-divider { height: 1px; background-color: gray; margin: 1em 0 2em 0; }