.content--blended {
  isolation: isolate;
}

.content__paragraph {
  position: relative;
  z-index: 100;
}
/* .content__paragraph p{
  position: relative;
} */

/* Individual paragraph colors and blend modes */
.content__paragraph--c {
  color: #6ae0fd;
  mix-blend-mode: color-burn;
}

.content__paragraph--c1 {
  color: #6ae0fd;
  mix-blend-mode: color-dodge;
}

.content__paragraph--c2 {
  color: #3dfb5c;
  mix-blend-mode: exclusion;
}

.content__paragraph--c3 {
  color: #feaa48;
  mix-blend-mode: luminosity;
}

.content__paragraph--c4 {
  color: #fb6868;
  mix-blend-mode: hard-light;
}

.content__paragraph--c5 {
  color: #fd5ae8;
  mix-blend-mode: luminosity;
}

.content__paragraph--c6 {
  color: #7cffe8;
  mix-blend-mode: difference;
}

.content__paragraph--c7 {
  color: #e68869;
  mix-blend-mode: color-dodge;
}

.content__paragraph--c8 {
  color: #29fca5;
  mix-blend-mode: exclusion;
}

.content__paragraph--c9 {
  color: #c264fe;
  mix-blend-mode: difference;
}

.content__paragraph--c10 {
  color: #fc4f84;
  mix-blend-mode: screen;
}

.content__paragraph--c11 {
  color: #74e2fd;
  mix-blend-mode: color-dodge;
}

.content__paragraph--c12 {
  color: #1cfb30;
  mix-blend-mode: color-dodge;
}

.content__paragraph--c13 {
  color: #1cfb30;
}

.pop-media {
  position: absolute;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 300px;
  height: 214px;

  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .pop-media {
    width: 450px;
    height: 320px;
  }
}
.pop-media--circle {
  width: 250px;
  height: 250px;
  border-radius: 50%;
}

.pop-media__overlay {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

/*   opacity: 0.4;
background: linear-gradient(to bottom, #403831, #776957); */
}

.pop-media--circle .pop-media__overlay {
  border-radius: 50%;
}

.pop-media__overlay--c1 {
  opacity: 0.4;
  background: linear-gradient(to left, #fd0be9, #fbf93d);
}

.pop-media__overlay--c2 {
  opacity: 0.2;
  background: linear-gradient(to left, #0bb6fd, #fdde0b);
}

.pop-media__overlay--c3 {
  opacity: 0.5;
  background: linear-gradient(to left, #4444fb, #fdc855);
}

.pop-media__overlay--c4 {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #7014fb;
}

.pop-media__overlay--c5 {
  opacity: 0.4;
  background: linear-gradient(to bottom, #9633b4, #22f82b);
}

.pop-media__overlay--c6 {
  opacity: 0.5;
  background: linear-gradient(to bottom, #9633b4, #22f82b);
}

.pop-media__overlay--c7 {
  opacity: 0.6;
  background: linear-gradient(to right, #fa5bfc, #5baefc);
}

.pop-media__overlay--c8 {
  z-index: 104;
  opacity: 0.5;
  background: linear-gradient(to right, #85fc5b, #5b63fc);
}

.pop-media--shadow::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid #fce75b;
  -webkit-transform: translate3d(20px, 20px, 0);
  transform: translate3d(20px, 20px, 0);
}


/* Hover text */

.pop-text {
/*   position: relative; */
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
}

.pop-text--s4::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transform: scale3d(0, 1, 1);
  transform: scale3d(0, 1, 1);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.pop-text--s4:hover::before {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.2, 1, 0.3, 1) 0.05s;
  transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1) 0.05s;
}

.pop-text--s5:hover {
  color: #000;
  background: #fff;
  -webkit-transition: background 0s 0.05s, color 0s 0.05s;
  transition: background 0s 0.05s, color 0s 0.05s;
}


/* plyr styles */

.plyr {
  position: absolute;
  width: 320px;
  height: 240px;
}

.plyr * {
  width: 100% !important;
  height: 100% !important;
}


/* slideshow */

.pop-media--slideshow {
  overflow: hidden;
}

.pop-media__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.pop-media__slide--current {
  opacity: 1;
}

/* Mask reveal */

.pop-media--reveal {
  -webkit-mask: linear-gradient(to right, transparent 50%, black 50%);
  mask: linear-gradient(to right, transparent 50%, black 50%);
  -webkit-mask-size: 601px;
  mask-size: 601px;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}

.pop-media--reveal.pop-media--show {
  -webkit-animation: revealMedia 0.4s cubic-bezier(0.2, 1, 0.3, 1) forwards;
  animation: revealMedia 0.4s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

/* we use pixels because it's more performant than percentages */
@-webkit-keyframes revealMedia {
  to {
    -webkit-mask-position: 300px 0%;
    mask-position: 300px 0%;
  }
}

@keyframes revealMedia {
  to {
    -webkit-mask-position: 300px 0%;
    mask-position: 300px 0%;
  }
}

/* for smaller screens */
@-webkit-keyframes revealMediaSmall {
  to {
    -webkit-mask-position: 250px 0%;
    mask-position: 250px 0%;
  }
}

@keyframes revealMediaSmall {
  to {
    -webkit-mask-position: 250px 0%;
    mask-position: 250px 0%;
  }
}

/* Mask reveal */

.pop-media--revealfull {
  position: fixed;
  width: 100vw;
  height: 100vh;
  -webkit-mask: linear-gradient(to bottom, transparent 50%, black 50%);
  mask: linear-gradient(to bottom, transparent 50%, black 50%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
}

.pop-media--revealfull.pop-media--show {
  -webkit-animation: revealMediaFull 0.4s ease-out forwards;
  animation: revealMediaFull 0.4s ease-out forwards;
}

@-webkit-keyframes revealMediaFull {
  to {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
  }
}

@keyframes revealMediaFull {
  to {
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
  }
}


/* Fullscreen */

.pop-media--full {
  position: fixed;
  width: 100vw;
  height: 100vh;
}


/* Fullscreen Type */

.pop-media__image {
  position: relative;
  z-index: 103;
  display: block;
  width: 100%;
  height: 100%;
}

.pop-media__text {
  position: fixed;
  z-index: 104;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}


/* Mask effect */
/* Learn more about this technique in Robin Delaporte's tutorial http://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/ */

.pop-media--mask {
  width: 375px;
  height: 250px;
  -webkit-mask: url(../img/mask.png);
  mask: url(../img/mask.png);
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
}

.pop-media--mask.pop-media--show {
  -webkit-animation: mask-play 0.7s steps(22) forwards;
  animation: mask-play 0.7s steps(22) forwards;
}

@-webkit-keyframes mask-play {
  from {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
  }
  to {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
  }
}

@keyframes mask-play {
  from {
    -webkit-mask-position: 0% 50%;
    mask-position: 0% 50%;
  }
  to {
    -webkit-mask-position: 100% 50%;
    mask-position: 100% 50%;
  }
}


/* Mask fullscreen effect */

.pop-media--maskfull {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

/* Split box effect (hard-coded proof-of-concept) */

.pop-media--split {
  display: block;
  width: 250px;
  height: 250px;
  text-align: center;
}

.pop-media__image--split {
  position: absolute;
  top: 0;
  left: 0;
}

.pop-media__image--split {
  clip: rect(125px, 125px, 125px, 125px);
  /* if not supported */
  -webkit-transition: clip 0.3s;
  transition: clip 0.3s;
}

/* if clip-path shapes are not supported, we use the depricated clip */
.pop-media--show .pop-media__image--split {
  clip: rect(0px, 250px, 250px, 0px);
}

/* if supported (body class added), we reset clip and use clip-path instead */
.clip-path-polygon .pop-media__image--split {
  clip: auto;
  -webkit-transition: -webkit-clip-path 0.3s;
  transition: -webkit-clip-path 0.3s, clip-path 0.3s;
  -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.clip-path-polygon .pop-media--show .pop-media__image--split {
  clip: auto;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.pop-text__split {
  font-size: 1.65em;
  font-weight: bold;
  line-height: 250px;
  position: relative;
  z-index: 1000;
  display: inline-block;
  flex: none;
  margin: 0 0 0 -0.4em;
  color: #fded62;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.pop-text__split--up {
  padding-left: 0.4em;
}

/* hard-coded values */
.pop-media--show .pop-text__split--up {
  -webkit-transform: translate3d(-118px, -114px, 0);
  transform: translate3d(-118px, -114px, 0);
}

.pop-media--show .pop-text__split--down {
  -webkit-transform: translate3d(136px, 114px, 0);
  transform: translate3d(136px, 114px, 0);
}

/* Style adjustments for smaller screens */
@media screen and (max-width: 50em) {
  .pop-media {
    width: 225px;
    height: 150px;
  }
  .pop-media--circle {
    width: 200px;
    height: 200px;
  }
  .plyr {
    width: 240px;
    height: 280px;
  }
  .pop-media--reveal {
    -webkit-mask-size: 501px;
    mask-size: 501px;
  }
  .pop-media--reveal.pop-media--show {
    -webkit-animation-name: revealMediaSmall;
    animation-name: revealMediaSmall;
  }
  .pop-media--mask {
    width: 281.25px;
    height: 187.5px;
  }
  .pop-media--full,
  .pop-media--maskfull,
  .pop-media--revealfull {
    width: 100vw;
    height: 100vh;
  }
  .pop-media--split {
    width: 100px;
    height: 100px;
  }
  .pop-media__image--split {
    clip: rect(50px, 50px, 50px, 50px);
  }

  .pop-media--show .pop-media__image--split {
    clip: rect(0px, 100px, 100px, 0px);
  }

  .clip-path-polygon .pop-media__image--split {
    clip: auto;
  }

  .pop-text__split {
    line-height: 100px;
    font-size: 1.15em;
  }

  .pop-media--show .pop-text__split--up {
    -webkit-transform: translate3d(-46px, -45px, 0);
    transform: translate3d(-46px, -45px, 0);
  }

  .pop-media--show .pop-text__split--down {
    -webkit-transform: translate3d(58px, 43px, 0);
    transform: translate3d(58px, 43px, 0);
  }
}