:root {
  --fg: #231F20;
  --bg: #A8F0D6;
  --stage-height: calc(100vh - 48px);
  --stage-margin: 8px;
}
body {
  background-color: var(--fg);
  color: var(--bg);
}
.logo svg path.white { /* ucla logo */
  fill: var(--fg);
}
.wrapped-title svg path {
  fill: var(--fg);
  stroke: var(--bg);
}
a {
  color: var(--bg);
  border-bottom: 1px solid rgba(168, 240, 214, 0.3);
}
a:hover {
  border-bottom: 1px solid var(--bg);
}
a.page_link {
  color: var(--fg);
  background-color: var(--bg);
}
.lightbox .focuscrop-wrapper:before {
  background-color: rgba(35,31,32,0.2);
}
.doublecol_text h1 {
  margin-top: 0;
}
.doublecol_text blockquote {
  border-left: 4px solid rgba(168, 240, 214, 0.3);
}
.doublecol_text svg path {
  fill: #fff;
}
main {
  /* position: relative;
  top: -150px; */
}
section.mixed-gallery {
  justify-content: center;
}
section.mixed-gallery a.number {
  background-color: var(--fg);
}
footer section:last-child a {
  border: 2px solid var(--bg);
}
.icon-svg path {
  fill: var(--bg) !important;
}
.icon-svg-line path {
  fill: var(--bg) !important;
}
#rumble-title {
  width: 100vw;
  height: 48px;
  border-bottom: 1px dashed var(--bg);
  line-height: 48px;
  padding: 0 24px;
}
#rumble-title .nav {
  float: right;
}
#rumble-title a {
  border-bottom: none;
}
#rumble {
  width: 100vw;
  height: 100vh;
  border-bottom: 1px dashed var(--bg);
}
#stage {
  position: absolute;
  width: 100vw;
  /* height: calc(var(--stage-height) + 100px); */
  height: var(--stage-height);
  overflow:hidden;
}
/* #stage:before{
  display: block;
  position: absolute;
  z-index: +1;
  width: 100vw;
  height: calc(var(--stage-height) + 100px);
  content: '';
  background: linear-gradient(0deg, rgba(168, 240, 214, 1) 0%, rgba(168, 240, 214, 0) 20%);
} */
.rumble-logo {
  margin: var(--stage-margin);
  /* height: calc(var(--stage-height) / 2 - var(--stage-margin) * 2); */
}
.rumble-logo svg {
  display: block;
  height: calc(var(--stage-height) / 2 - var(--stage-margin));
  overflow-x: visible;
}
.rumble-logo svg rect {
  fill: var(--fg);
}
.rumble-logo svg path {
  stroke: var(--bg);
}
.rumble-logo table {
  width: 100%;
  /* margin-bottom: var(--stage-margin); */
}
.rumble-logo table td {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.rumble-logo table td.stretch {
  min-width: calc(var(--stage-height) / 6);
}
.rumble-logo table td.bg1 {
  background-image: url(../img/rumble-2021/bg1.svg);
}
.rumble-logo table td.bg2 {
  background-image: url(../img/rumble-2021/bg2.svg);
}
.rumble-logo table td.bg3 {
  background-image: url(../img/rumble-2021/bg3.svg);
}

#stage {
  position: absolute;
  pointer-events:none;
  /* Setting the perspective of the contents of the stage but not the stage itself */
  -webkit-perspective: 1600;
  /* overflow: hidden; */
  /* overflow-y: visible;
  overflow-x: hidden; */
}

#rotate {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  /* background-color: green; */
  /* Ensure that we're in 3D space */
  -webkit-transform-style: preserve-3d;
  /*
  Make the whole set of rows use the x-axis spin animation
  for a duration of 7 seconds, running infinitely and linearly
  */
  -webkit-animation-name: x-spin;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}

.ring {
  margin: 0 auto;
  height: 60vh;
  width: 600px;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

.ring > :nth-child(odd) {
  /* background-color: #995C7F; */
  /* background-color: var(--bg); */
}

.ring > :nth-child(even) {
  /* background-color: #835A99; */
  /* background-color: var(--bg); */
}

.poster {
  position: absolute;
  left: 30vh;
  width: 40vh;
  height: 30vh;
  /* opacity: 0.7; */
  color: var(--fg);
  /* border: 4px solid var(--fg); */
}

.poster > p {
  font-size: 24px;
  margin: 0 0 0 -5vh ;
  color: var(--bg);
}

.poster > img {
  /* filter: contrast(1.2) grayscale(100%); */
  /* filter: drop-shadow(25vw 50vh 0px rgba(255,255,255,0.2)); */
  border: 2px solid var(--bg);
  width: 24vw;
  -webkit-transform: scaleX(-1) scaleY(-1);
  transform: scaleX(-1) scaleY(-1);
}

/*
Set up each row to have a different animation duration
and alternating y-axis rotation directions.
*/
#ring-1 {
  -webkit-animation-name: y-spin;
  -webkit-animation-duration: 15s;
}

#ring-2 {
  -webkit-animation-name: back-y-spin;
  -webkit-animation-duration: 14s;
}

#ring-3 {
  -webkit-animation-name: y-spin;
  -webkit-animation-duration: 15s;
}

/*

Here we define each of the three individual animations that
we will be using to have our 3D rotation effect. The first
animation will perform a full rotation on the x-axis, we'll
use that on the whole set of objects. The second and third
animations will perform a full rotation on the y-axis in
opposite directions, alternating directions between rows.

Note that you currently have to specify an intermediate step
for rotations even when you are using individual transformation
constructs.

*/
@-webkit-keyframes x-spin {
  0%    { -webkit-transform: rotateX(0deg); }
  50%   { -webkit-transform: rotateX(180deg); }
  100%  { -webkit-transform: rotateX(360deg); }
}

@-webkit-keyframes x-spin-half {
  0%    { -webkit-transform: rotateX(60deg); }
  50%   { -webkit-transform: rotateX(-60deg); }
  100%  { -webkit-transform: rotateX(60deg); }
}

@-webkit-keyframes y-spin {
  0%    { -webkit-transform: rotateY(0deg); }
  50%   { -webkit-transform: rotateY(180deg); }
  100%  { -webkit-transform: rotateY(360deg); }
}

@-webkit-keyframes back-y-spin {
  0%    { -webkit-transform: rotateY(360deg); }
  50%   { -webkit-transform: rotateY(180deg); }
  100%  { -webkit-transform: rotateY(0deg); }
}
h4 {
  margin: 24px 0 8px 8px;
}
table.schedule {
  width: 100%;
  margin-bottom: 40px;
}
table.schedule td:nth-child(1) { width: 7%; }
table.schedule td:nth-child(2) { width: 40%; border-bottom: 1px solid;}
table.schedule td:nth-child(3) { width: auto; border-bottom: 1px solid;}
table.schedule td:nth-child(4) { width: 15%; border-bottom: 1px solid;}
table.schedule td:nth-child(5) { width: 10%; border-bottom: 1px solid;}
table.schedule td {
  padding: 8px 8px;
}
table.schedule td.date {
  border-top: 1px solid;
}
table.schedule tr {
  /* border-bottom: 1px solid; */
}
.opening-remarks {
  padding: 16px 15% 0 15%;
}
.mobile-only, .rumble-logo svg.mobile-only {
  display: none;
}
@media only screen and (max-width: 799px){
  .mobile-only, .rumble-logo svg.mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
  #rumble-title .nav {
    float:left;
  }
  #rumble {
    height: calc(40vh + 48px * 3);
  }
  #stage {
    height: calc(40vh + 48px * 2);
  }
  .rumble-logo svg {
    height: 40vh;
  }
  footer section:last-child a {
    border: none;
  }
  table.schedule td:nth-child(1) { display: none; }
  table.schedule td:nth-child(2) { width: inherit;}
  table.schedule td:nth-child(3) { width: inherit;}
  table.schedule td:nth-child(4) { width: 70px;}
  table.schedule td:nth-child(5) { width: 70px;}
  .opening-remarks {
    padding: 0;
  }
}