html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  outline: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent
}

/* All above is CSS reset */

/* this would be extremely convenient but not supported by safari and not enabled by default on chromium-based browsers yet. used JS instead
html {
  scroll-behavior: smooth !important;
} */

:root {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  --desktop-slides: 8vh auto;
  --mobile-slides: 6vh auto;
  /* bowie vid gets seperate variable that accounts for 120% size of bowiethumb overflowing out of content area
  without horizontal margin, size of bowieShadow during transition seems to mess w the page width, causing navIcon to bounce around */
  --mobile-bowie: calc(6vh + 5%) 2rem;
  --mobile-spacing: 4vmax;
  --mobile-font-size: 2.15vmax;
}

#navButton {
  position: fixed;
  right: 0;
  margin: 2rem;
  width: 5rem;
  cursor: pointer;
  z-index: 100;
  transition: .2s;
  background-color: white;
  border:.4rem solid black;
}

#navButton:hover {
  transform: scale(1.2);
}

#navBar {
  font-family: 'Raleway', sans-serif;
  width: 70vw;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -70vw;
  background: black;
  transition: .5s ease-out;
  z-index: 1000;
  color: white;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#navBar::-webkit-scrollbar {
  display: none;
}

h4 {
  font-weight: 900;
  font-size: 5rem;
  margin-bottom: 5rem;
  cursor: default;
}

#navBar ul {
  padding: 3rem;
}

#navBar li {
  margin-bottom: 3rem;
}

#navBar li:last-of-type {
  margin-bottom: 0;
}

#navBar li:hover {
  color: gray; 
}

.navChapter {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 3rem;
  text-decoration: none;
  cursor:pointer;
}

/* css reset for anchor tags */
a, a:link, a:visited, a:active, a:link:active, a:visited:active {
  color: inherit;
  text-decoration: none;
  outline: 0;
  border: none;
}

.navShare {
  border-top: 1px solid hsla(0,0%,100%,.5);
  border-bottom: 1px solid hsla(0,0%,100%,.5);
  padding: 3rem;
  font-size: 3rem;
}

.navShare a {
  margin-right: 3rem;
  cursor: pointer;
}

.navShare svg {
  fill: white;
  transition: .2s;
  height: 3rem;
}

.navShare svg:hover {
  transform: scale(1.1);
}

.navShare div {
  margin-top: 2rem;
  display: flex;
  align-items: center;
}

#navClose {
  position: absolute;
  right: 0;
  margin: 2rem;
  width: 5rem;
  cursor: pointer;
  fill: white;
  /* transition: .2s; */
}

.navModal {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, .3);
  z-index: 999;
}

/* #navClose:hover {
  fill: gray;
} */

h1, h2, h3, h4, .title p {
  cursor: default;
  user-select: none;
}

header {
  position: relative;
}

.bannerImg {
  width: 100%;
  min-height:100vh;
  overflow: hidden;
  background-color: sienna;
}

.bannerAsset {
  width: auto;
  min-height: 100vh;
  transition: .5s;
}

.darken {
  opacity: 0;
}

.titleArea {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: rgb(255, 255, 255);
  text-shadow: 0 0 1rem rgba(0, 0, 0, .1);
}

.title {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding-top: 2.5rem;
  text-align: center;
  transform: scale(.75);
  transition: 1s;
}

.upscale {
  transform: scale(1);
}

h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 8rem;
  margin-bottom: 1.75rem;
}

.titleArea p {
  font-size: 2.25rem;
  margin-bottom: 6.5rem;
}

h2 {
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
}

figure {
  width: 100%;
}

figure img {
  width: 100%;
}

.blockQuote {
  margin: var(--mobile-slides);
  padding: 11vh 12vw;
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
}

.quoteMarks {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  height: 90%;
}

.leftQuote, .rightQuote {
  width: 5vmax;
}

.leftQuote {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
  position: relative;
  left: 50%;
}

.rightQuote {
  position: relative;
  align-self: flex-end;
  right: 50%;
}

.slideLeft {
  left: 0;
}

.slideRight {
  right: 0;
}

.quote {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 4.7vmax;
  text-align: center;
  line-height: 140%;
  opacity: 0;
}

.citation {
  text-align: center;
  line-height: 150%;
  width: 100%;
  margin-top: 8vh;
  opacity: 0;  
}

.expanded {
  opacity: 1;
}

.activeMark {
  transition: .75s
}

.activeText {
  transition: .75s;
  transition-delay: .5s;
}

.author {
  font-size: 2.5vmax;
}

.source {
  font-style: italic;
  font-size: 2vmax;
  padding-top: 1.5vh;
}

.textBlock {
  line-height: 200%;
}

.textBlock h5 {
  line-height: 110%;
}

.textBlock h5, .captionBlock h5 {
  text-align: center;
}

.textBlock p, .captionBlock p {
  font-size: var(--mobile-font-size);
  line-height: 150%;
  margin-top: var(--mobile-spacing);
  color: dimgray;
}

.sectionHeader {
  position: relative;
  margin: var(--mobile-slides);
  height: 100vh;
  overflow: hidden;
}

.sectionTitle {
  width: 90%;
  position: absolute;
  top: 30%;
  left: 50%;
  line-height: 140%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 6.75vmin;
  text-shadow: 0 0 1rem rgba(0, 0, 0, .7);
  opacity: 0;
  z-index: 1;
  transition: 1s;
}

.fadeIn {
  opacity: 1;
  top: 50%;
}

.sectionImg {
  object-fit: cover;
  height: 100%;
  filter: grayscale(100%);
  transition: 1s;
}

.colorized {
  filter: grayscale(0%);
}

.captionBlock {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 6rem;
  margin: var(--mobile-slides);
  align-items: center;
}

.capImg {
  align-self: center;
  width: 85vw;
  margin-top: var(--mobile-spacing);
}

.captionBlock section {
  /* text-align: center; */
  width: 80vw;
}

h5, h6 {
  font-family: 'Raleway', sans-serif;
}

h6 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: .5rem;
  color: sienna;
  text-align: center;
}

h5 {
  font-size: 5rem;
  font-weight: 800;
}

.parallax {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: var(--mobile-slides);
}

.parallaxBG {
  height: 100vmax;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.parallaxFG {
  z-index: 10;
  margin-top: -100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icons {
  display: flex;
  flex-direction: column;
  /* Needs min width set in order for its' children's overflow settings to respect its width */
  min-width: 0;
  background: linear-gradient( rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6) 12%, rgba(255, 255, 255, 0.6) 98%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
}

.parallaxText {
  display: flex;
  align-items: center;
  height: 100vh;
}

h3 {
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  font-size: 8vmax;
  line-height: 120%;
  color: sienna;
  text-align: center;

}

.icons img {
  height: auto;
  width: 25vmax;
  border-radius: 10%;
  transition: .5s;
}

.icons h6 {
  font-size: 3vmax;
  margin-top: 2.5vmax;
}

.icons p {
  font-size: 1.75vmax;
  margin-top: .5vmax;
}

.icons span {
  /* relative positioning so #iconEffectLayer has something to cling to */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8vmax;
}

@media (hover: hover) {
  /* Dynamically create and append #iconEffectLayer instead of doing hover animation directly on the img itself because img background-color and the javascript triggered animation would also be effected by any opacity changes, would reveal the gradient background of .icons underneath */
  #iconEffectLayer:hover {
    opacity: 25%;
  }
}

#iconEffectLayer {
  content: '';
  height: 25vmax;
  width: 25vmax;
  border-radius: 10%;
  background-color: sienna;
  transition: .5s;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

@keyframes sonar {
  0% {
    box-shadow: 0 0 0 0 rgba(160, 81, 45, .5);
  }
  100% {
    box-shadow: 0 0 6rem 4rem rgba(160, 81, 45, 0);
  }
}

.animated {
  animation: sonar 1s 1 ease-out;
}

.icons span div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icons span:first-of-type {
  margin-top: 30vh;
}

.icons span:last-of-type {
  margin-bottom: 15vh;
}

#ramones {
  object-position: 50% 0%;
}


.lightBox {
  width: 85%;
  margin: var(--mobile-slides);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* hacky solution to prevent absolutely positioned caption details from getting clipped by overflow hidden */
  padding-bottom: 5vmax;
}

.lightBG, .lightFG {
  transition: .5s;
  /* using translate3d is a hack to trick pc into using gpu hardware accel to do the animations smoothly */
  transform: translate3d(0, 0, 0);
}

.lightBG, .lightBox section, .lightFG {
  width: auto;
  min-height: 50vmax;
}

.lightBG {
  will-change: filter, opacity;
  opacity: 1;
}

.lightFG {
  will-change: transform;
}

/* this container element for lightFG exists so you can apply overflow: hidden and prevent horizontal scroll of main page when image is zoomed */
.lightBox section {
  position: absolute;
  z-index: 10;
  overflow: hidden;
}

.focused{
  transform: scale(1.3) translate3d(0, 0, 0);
}

.blurred {
  opacity: .8;
  filter: blur(5px);
}

.lightButton {
  position: absolute;
  top: 0;
  left: 0;
  margin: 6vmin;
  width: 6vmax;
  cursor: pointer;
  animation: 2s strobe;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 101;
  /* opacity: .6; */
  border-radius: 8%;
  box-shadow: .1rem .2rem .4rem 0 rgba(0,0,0,.2);
  opacity: .3;
  background-color:black;
  fill: white;
}

@keyframes strobe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.customCap {
  margin-top: 3vmin;
}

.customCap p {
  font-family: 'Raleway', sans-serif;
  font-size: 1.25vmax;
  font-weight: 800;
  line-height: 3vmin;
}

.customCap details {
  margin-top: 1.5vmin;
  font-size: 1.2vmax;
  position: absolute;
  color: sienna;
}

.customCap summary {
  cursor: pointer;
}

.customCap div {
  margin-top: 1rem;
}

gfontItal {
  font-style: italic;
}

main {
  font-family: 'Merriweather', serif;
}

.slideFeature {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--mobile-slides);
  align-items: center;
}

.slideFeature .textBlock {
  flex: 1;
  padding: 0 6rem;
}

.imgSlider {
  position: relative;
  overflow: hidden;
  margin-top: var(--mobile-spacing);
}

.sliderLayer {
  position: absolute;
  height: auto;
  overflow: hidden;
}

.slider {
  position: absolute;
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5%;
  cursor: col-resize;
}

.slider svg {
  width: 8rem;
  fill: white;
  opacity: .3;
}

/* slider divider doesn't play nice with imgSlider border radius, gets clipped */

/* .slider::before {
  position: absolute;
  content: '';
  height: 100vh;
  width: 1px;
  background-color: black;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  opacity: .2;
} */

.sliderImg {
  width: 100vw;
}

.noInteraction {
  user-select: none;
  pointer-events: none;
}

.galleryNavContainer {
  /* only exists to give the absolute position nav buttons something to cling to */
  position: relative;
  margin: var(--mobile-slides);
}

.imgGallery {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  /* mozilla scroll anchoring was crashing from nav sliding */
  overflow-anchor: none;
}

.imgGallery::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.galleryWrapper {
  /* inline sizes the flexbox to its content, otherwise the frames scroll outside of the wrapper and the wrapper padding right is never used */
  display: inline-flex;
  /* align items prevents distorted image aspect ratio on safari */
  align-items: flex-start;
  /* if padding is set too low (<1rem), the top of the galleryFrame gets clipped when it gets zoomed in on mouse hover */
  /* if top and bottom padding are not the same it will effect vertical centering of forward/back arrows */
  padding: 3rem 6rem;
}


.galleryFrame {
  margin-right: 5vw;
  border-radius: 5%;
  min-height: 50vh;
  max-height: 85vh;
  transition: .3s;
}

.galleryFrame:last-child {
  margin-right: 0;
}

.nontouch:hover {
  transform: scale(1.05);
  background-color: black;
  filter: brightness(85%);
  cursor: pointer;
}

.prevArrow, .nextArrow {
  position: absolute;
  margin: auto 3.5vw;
  width: 5rem;
  background-color: white;
  opacity: .7;
  border-radius: 15%;
  box-shadow: 0 .3rem .4rem 0 rgba(0,0,0,.2);
  transition: .4s;
  cursor: pointer;

}

.prevArrow:hover, .nextArrow:hover {
  transform: scale(1.2);
}

.prevArrow {
  opacity: 0;
}

.nextArrow {
  right: 0; 
}

.nextArrow svg {
  transform: rotate(180deg);
}

.modalImg {
  z-index: 1000;
}

.modalBG {
  display: flex;
  position: fixed;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgb(0, 0, 0, .8);
}

#imgModal figcaption {
  margin-top: 5vh;
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  color: white;
}

#imgModal span {
  position: fixed;
  top: 0;
  right: 0;
  margin: 2rem;
  width: 5rem;
  cursor: pointer;
  fill: white;
}

#colorFG, #colorBG {
  min-height: 90vh;
}

.colorFeature {
  /* without specified width and overflow hidden, bg/fg cause stretching of entire document width */
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: var(--mobile-slides);
  margin-bottom: 0 !important;
}

.colorWheel {
  position: relative;
  /* using overflow auto clearfix and colorbg float instead of flexbox just to show I know clearfixes exist :P */
  overflow: auto;
}

#colorBG {
  float: right;
}

#colorFG {
  position: absolute;
  right: 0;
  top: 0;
}

.colorOptions {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;  
  top: 0;
  align-items: flex-end;
}

#colorHue, #colorSat {
  height: 15%;
  background-color: rgba(0, 0, 0, 1);
  fill: white;
  opacity: .3;
  cursor: pointer;
  width: 50%;
  padding: 1rem;
}

.colorOptions::before {
  position: absolute;
  content: '';
  left: 50%;
  bottom: 0;
  height: 15%;
  width: 1px;
  background-color: white;
  padding: 1rem 0;
}

#colorHue:hover, #colorSat:hover {
  opacity: .4;
}

#colorHue:active, #colorSat:active {
  opacity: .5;
}

.colorFeature article {
  padding: var(--mobile-spacing);
}

.vidFeature {
  margin: var(--mobile-bowie);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.bowieThumb, .bowieShadow, .mediaComponents {
  transition: 1.25s;
}

.bowieThumb {
  cursor: pointer;
  height: 120%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  /* without declaring rotate 0 and scale 1 here, the transform animation doesnt work on safari */
  transform: translate(-50%, 50%) rotate(0deg) scale(1);
}

.expandBowie {
  left: 0;
  bottom: 0;
  transform: translate(-30%, 35%) rotate(360deg) scale(.35)
}

.bowieShadow {
  height: 65%;
  width: 65%;
  position: absolute;
  background-color: sienna;
  top: 55%;
  right: 50%;
  transform: translate(50%,-50%) rotate(0deg);
  z-index: -1;
}

.expandShadow {
  /* without important, gets overridden by top specification in media query when on desktop */
  top: 0 !important;
  right: 0;
  transform: translate(0,0) rotate(180deg);
}

.vidWrapper {
  overflow: hidden;
  width: 75%;
}

.mediaComponents {
  transform: translateY(20%) scale(.1);
  position: relative;
}

.expandMedia {
  transform: translateY(0) scale(.9);
}

.video {
  width: 100%;
}

.videoControls {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.playButton {
  padding: 3.5vw;
  width: 5rem;
  background-color: white;
  opacity: .7;
  border-radius: 15%;
  box-shadow: 0 .3rem .4rem 0 rgba(0,0,0,.2);
  transition: .4s;
  cursor: pointer;
}

.hidden {
  opacity: 0%;
}

.shown {
  cursor: pointer;
}

.playButton:hover {
  transform: scale(1.2);
}


/* media queries for non-desktop */

@media only screen and (min-width: 1081px) {
  
  #navBar {
    width: 33vw;
  }

  h4 {
    font-size: 3rem;
    margin-bottom: 3rem;
  }

  #navBar li {
    margin-bottom: 2rem;
  }

  .navChapter {
    font-size: 1.5rem;
  }

  #navButton, #navClose, #imgModal span {
    width: 3rem;
  }

  #navButton {
    border: .25rem solid black;
  }

  #navClose, #imgModal span {
    margin: .5rem;
  }

  .navShare {
    font-size: 1.5rem;
    padding: 2rem 3rem;
  }

  .navShare svg {
    height: 1.5rem;
  }

  .navShare a {
    margin-right: .75rem;
  }

  .navShare div {
    margin-top: 1rem;
  }

  .invisibleFlexStartObj {
    display: none;
  }

  .bannerImg {
    width: 100%;
    height:1710px;
  }
  
  .bannerAsset {
    width: auto;
    height: 100%;
  }  

  .title {
    margin-top: 50vh;
  }

  .titleArea p {
    font-size: 2rem;
  }

  .citation {
    margin-top: 2rem;
    line-height: 200%;
  }

  .author {
    font-size: 1.5rem;
  }

  .source {
    font-size: .75rem;
    padding-top: 0;
  }

  h5 {
    font-size: 3rem;
  }

  .captionBlock {
    align-items: flex-start;
    margin: var(--desktop-slides);
  }

  .captionBlock section {
    text-align: left;
    width: 50vw;
  }

  .capImg {
    align-self: flex-end;
    width: 75vw;
    margin-top: 0;
  }

  .textBlock h5, .captionBlock h5 {
    text-align: left;
  }

  .textBlock p, .captionBlock p {
    font-size: 1.25rem;
    line-height: 180%;
  }

  .sectionHeader {
    margin: var(--desktop-slides);
    height: 110vh;
  }

  .sectionTitle {
    font-size: 2.75rem;
  }

  #ramones {
    object-position: 0% 100%;
  }

  .galleryNavContainer {
    margin: var(--desktop-slides);
  }

  .lightBox {
    margin: var(--desktop-slides);
  }

  .lightBG, .lightBox section {
    width: 100%;
    height: auto;
  }
  
  .lightFG {
    width: 100%;
    height: auto;
  }

  .blurred {
    filter: blur(8px);
  }

  #imgModal figcaption {
    font-size: 1.25rem;
  }

  .blockQuote {
    margin: var(--desktop-slides)
    padding: 3rem 13rem;
  }

  .quote {
    font-size: 7vh;
  }

  .imgSlider {
    margin-top: 0;
  }

  .slideFeature {
    margin: var(--desktop-slides);
    flex-direction: row;
  }

  .slideFeature .textBlock {
    padding: 0 1rem 0 6rem;
  }

  .sliderImg {
    width: auto;
    max-width: 85vw;
    max-height: 85vh;
  }

  .parallaxText {
    height: 100vh;
  }

  .parallaxBG {
    opacity: 1;
    height: auto;
    width: 33vw;
    /* margin left to improve " optical centering" by adjusting for the shadow behind her */
    margin-left: -5vw;
  }

  .parallaxFG {
    margin-left: 1rem;
    margin-top: 0;
    width: 36vw;
  }

  .icons {
    width: 90%;
  }

  .icons img {
    height: 10vmax;
    width: auto;
  }

  .icons h6 {
    font-size: 2vmax;
    margin-top: 0;
  }

  .icons p {
    font-size: 1.2vmax;
  }

  .icons span {
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 6vmax;
  }

  .icons span div {
    display: block;
    width: 60%;
  }

  #iconEffectLayer {
    width: 10vmax;
    height: 10vmax;
    right: 0;
  }

  .parallax {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    margin: var(--desktop-slides);
  }

  h6 {
    font-size: 1rem;
    text-align: left;
  }

  .vidFeature {
    margin: 0 6rem;
  }

  .bowieThumb {
    height: 85%;
  }

  .expandBowie {
    transform: translate(-35%, 35%) rotate(360deg) scale(.4);
  }

  .bowieShadow {
    height: 60%;
    width: 60%;
    top: 50%;
  }

  .playButton {
    padding: 1.5rem;
  }

  .colorFeature {
    margin: var(--desktop-slides);
    max-height: 100vh;
  }

  #colorBG {
    float: none;
  }

  .colorOptions {
    right: 0;
    height: 60%;
    width: 30%;
    justify-content: space-evenly;

  }

  .colorOptions::before {
    visibility: hidden;
  }

  #colorFG, #colorBG {
    width: 100%;
    min-height: 0;
  }

  #colorHue, #colorSat {
    border-radius: 15%;
    width: 25%;
  }

  .colorFeature article {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    width: 60%;
    z-index: 1;
  }
}

@media only screen and (max-width: 1081px) {
  .vidWrapper {
    width: 100%;
  }
}