:root {
  --black: rgba(40, 40, 40, 1);
  --white: rgba(255, 255, 255, 1);
  --border: var(--black);

  --music-video: #fb4f41;
  --visualizer: #f96b96;
  --title-design: #3ab352;
  --live-visuals: #b278d9;
  --short-film: #bbb;
  --logo-animation: #4b92eb;
}

/**
 * Content
 */

body {
  background-color: #fff;
  color: var(--black);
}

a:active {
  opacity: 0.7;
}

.page a.active {
  opacity: .4;
}

i,
em {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  position: relative;
  vertical-align: baseline;
}

sub {
  top: 0.3em;
}

sup {
  top: -0.4em;
}

s {
  text-decoration: line-through;
}

img {
  border: 0;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0 0 0 1em;
}

blockquote {
  margin: 0;
  padding: 0 0 0 2em;
}

hr {
  display: block;
  height: 1px;
  background: var(--border);
  border: 0;
}

.content img {
  float: none;
  margin-bottom: .5em;
}

.gallery_image_caption {
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
  font-style: normal;
  line-height: 1.3;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
  position: fixed;
  bottom: 8px;
  left: 8px;
}

/**
 * Editor Styles
 */

[data-predefined-style="true"] bodycopy {
  font-size: .8rem;
  font-weight: 400;
  color: var(--black);
  font-family: "Neue Haas Grotesk", Icons;
  font-style: normal;
  line-height: 1rem;
  letter-spacing: 0.015rem;
}

[data-predefined-style="true"] bodycopy a {
  color: var(--black);
  padding-bottom: 0;
  text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
  font-weight: bold;
}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
  border-bottom: 0;
  padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
  padding: 0;
  margin: 0;
  color: var(--black);
  font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
  font-style: normal;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

[data-predefined-style="true"] h1 a {
  color: var(--black);
}

[data-predefined-style="true"] h2 {
  padding: 0;
  margin: 0;
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.2;
}

[data-predefined-style="true"] h2 a {
  color: var(--black);
}

[data-predefined-style="true"] small {
  display: inline-block;
  color: var(--black);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, 'Sans Serif', Icons;
  font-style: normal;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
}

[data-predefined-style="true"] small a {
  color: var(--black);
  border-bottom-width: 0;
}

/**
 * Breakpoints
 */

[data-css-preset] .page {
  background-color: initial;
}

.mobile .page,
[data-css-preset].mobile .page {
  position: relative;
  min-height: 10px;
  max-width: 100%;
  width: 100%;
  background-color: transparent;
}

[data-css-preset] .container {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

[data-css-preset] body {
  background-color: #fff;
}

[data-css-preset] .container_width {
  width: 60%;
}

[data-css-preset] .content_padding {
  padding: 2rem;
}

[data-css-preset] text-limit {
  display: inline-block;
  max-width: 66rem;
}

/**
 * Top Menu
 */
.top-menu {
  display: grid;
  grid-template-columns: .5fr 2fr 2fr 2fr 2fr;
  min-height: 2.5rem;
  column-gap: 1rem;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.top-name {
  grid-column: 1 / 3;
  padding-top: 0.507rem;
}

.top-service {
  grid-column: 3 / 4;
  padding-top: 0.507rem;
}

.top-links {
  grid-column: 4 / 6;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  align-self: start;
}

.top-service br {
  display: none;
}

.top-links {
  grid-column: 4 / 6;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.top-links a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.top-links a:last-child {
  border-bottom: 0;
}

.top-links a:hover {
  background: var(--black);
  color: var(--white);
  font-weight: bold;
  padding-left: 1rem;
}
/**
 * Project Header
 */

.project-header .project-row {
  display: grid;
  grid-template-columns: .5fr 2fr 2fr 2fr 2fr;
  align-items: center;
  min-height: 2rem;
  column-gap: 1rem;
  counter-increment: none;
  white-space: nowrap;
}

.project-header .project-row:hover {
  background: transparent;
  color: inherit;
  font-weight: normal;
  padding-left: 0;
}

.view-links {
  grid-column: 5 / 6;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.view-links a {
  color: inherit;
  text-decoration: none;
  padding-left: 1rem;
}

.view-links a:hover {
  background: transparent;
  color: inherit;
  font-weight: bold;
}

body:not(.view-two) #view-1-link,
body.view-two #view-2-link {
  font-weight: bold;
}

/**
 * Project Index
 */

.project-list {
  width: 100%;
  counter-reset: project-number;
}

.project-row {
  --hover-bg: var(--logo-animation);

  display: grid;
  grid-template-columns: .5fr 2fr 2fr 2fr 2fr;
  align-items: center;
  min-height: 2rem;
  border-bottom: 1px solid var(--border);
  counter-increment: project-number;
  color: inherit;
  text-decoration: none;
  column-gap: 1rem;
  transition: padding 0.1s ease;
}

.project-row:hover {
  background: var(--hover-bg);
  color: var(--black);
  font-weight: bold;
  padding-left: 0.5rem;
}

.music-video {
  --hover-bg: var(--music-video);
}

.visualizer {
  --hover-bg: var(--visualizer);
}

.title-design {
  --hover-bg: var(--title-design);
}

.live-visuals {
  --hover-bg: var(--live-visuals);
}

.short-film {
  --hover-bg: var(--short-film);
}

.logo-animation {
  --hover-bg: var(--logo-animation);
}
.number {
  padding-left: 0.5rem;
}
.number::before {
  content: counter(project-number, decimal-leading-zero);
}

.cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * View 1
 */

body:not(.view-two) .project-list:not(.project-header) .project-row {
  background: var(--hover-bg);
  color: var(--black);
}

body:not(.view-two) .project-list:not(.project-header) .role::before {
  color: var(--black);
}

body:not(.view-two) .project-list:not(.project-header) .project-row:hover {
  background: var(--black);
  color: var(--white);
}

body:not(.view-two) .project-list:not(.project-header) .project-row:hover .role::before {
  color: var(--hover-bg);
}


/**
 * View 2
 */

body.view-two .project-list:not(.project-header) .project-row {
  background: transparent;
  color: inherit;
}

body.view-two .project-list:not(.project-header) .role::before {
  color: var(--hover-bg);
}

body.view-two .project-list:not(.project-header) .project-row:hover {
  background: var(--hover-bg);
  color: var(--black);
}

body.view-two .project-list:not(.project-header) .project-row:hover .role::before {
  color: var(--black);
}

/**
 * Role Labels
 */

.role::before {
  display: inline-block;
  margin-right: 0.1rem;
}

.music-video .role::before {
  content: "︎";
  color: var(--music-video);
}

.music-video .role::after {
  content: "Music Video";
}

.visualizer .role::before {
  content: "︎";
  color: var(--visualizer);
}

.visualizer .role::after {
  content: "Visualizer";
}

.title-design .role::before {
  content: "︎";
  color: var(--title-design);
}

.title-design .role::after {
  content: "Title Design";
}

.live-visuals .role::before {
  content: "︎";
  color: var(--live-visuals);
}

.live-visuals .role::after {
  content: "Live Visuals";
}

.short-film .role::before {
  content: "︎";
  color: var(--short-film);
}

.short-film .role::after {
  content: "Short";
}

.logo-animation .role::before {
  content: "︎";
  color: var(--logo-animation);
}

.logo-animation .role::after {
  content: "Logo Animation";
}

/**
 * Mobile
 */

@media (max-width: 768px) {

  [data-css-preset] .container_width {
    width: 100%;
  }
[data-predefined-style="true"] bodycopy {
  font-size: 10px;
  letter-spacing: 0.02rem;
}
  .top-service br {
    display: inline;
  }

  .top-menu,
  .project-header .project-row,
  .project-row {
    grid-template-columns: 0.5fr 2fr 2fr 2fr 1fr;
    column-gap: 0.5rem;
  }

}