body.is-cursor-active {
  cursor: none;
}
body.is-cursor-active .cursor .cursor__shape {
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
}
body.is-cursor-active .cursor.is-mouse-down .cursor__cursor {
  transform: scale(0.95) translate3d(-50%, -50%, 0) rotate(0deg);
}
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 502;
  pointer-events: none;
}
.cursor.is-active .cursor__cursor {
  transform: scale(1) translate3d(-50%, -50%, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__right-chevron] .cursor__right-chevron {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__left-chevron] .cursor__left-chevron {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__close] .cursor__close {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__grab] .cursor__grab {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__hamburger] .cursor__hamburger {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor.is-active[data-cursor=cursor__start] .cursor__start,
.cursor.is-active[data-cursor=cursor__play] .cursor__play,
.cursor.is-active[data-cursor=cursor__pause] .cursor__pause {
  opacity: 1;
  stroke: none !important;
  transform: scale(1) translate3d(0, 0, 0) rotate(0deg);
}
.cursor svg {
  position: absolute;
  top: 50%;
  left: 50%;
  stroke: #fff;
  fill: none;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 50px;
}
@media (min-width: 768px) {
  body.started .cursor svg {
    width: 80px;
    height: 100px;
  }
}
.cursor svg line {
  stroke: #fff;
}
.cursor[data-cursor=cursor__right-chevron] .cursor__right-chevron {
  transform: scale(0.75) translate3d(-20px, 0, 0) rotate(0deg);
}

.cursor[data-cursor=cursor__left-chevron] .cursor__left-chevron {
  transform: scale(0.75) translate3d(20px, 0, 0) rotate(0deg);
}

.cursor[data-cursor=cursor__grab] .cursor__grab {
  transform: scale(0.75) translate3d(0, 10px, 0) rotate(0deg);
}

.cursor[data-cursor=cursor__close] .cursor__close {
  transform: scale(0.75) translate3d(0, 0, 0) rotate(-180deg);
}

.cursor[data-cursor=cursor__hamburger] .cursor__hamburger {
  stroke: 2px solid #fff;
  transform: scale(0.75) translate3d(0, 0, 0) rotate(0deg);
}

#outer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	background: red;
}

#outer path {
  stroke: 2px solid #fff;
}
 
.cursor__start,
.cursor__play,
.cursor__pause {
	stroke: none !important;
}

.cursor[data-cursor=cursor__start] .cursor__start,
.cursor[data-cursor=cursor__play] .cursor__play,
.cursor[data-cursor=cursor__pause] .cursor__pause {
  stroke: none !important;
  fill: #fff;
  transform: scale(.95) translate3d(0, 0, 0) rotate(0deg);
}

.cursor[data-cursor=cursor__start] .cursor__start {
	fill: red;
	transform: scale(3)!important;
}

.cursor__cursor {
  border-radius: 50%;
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #fff;
  transform-origin: 0% 0%;
  transform: scale(0) translate3d(-50%, -50%, 0) rotate(0deg);
  /*filter: drop-shadow(5px 10px 20px rgba(0, 0, 0, 0.3));*/
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  height: 50px;
}

@media (min-width: 768px) {
  body.started .cursor__cursor {
    width: 80px;
    height: 80px;
  }
}

.cursor__shape {
  opacity: 0;
  transform-origin: 50% 50%;
  transition: none;
  transform: scale(0.75) translate3d(0, 0, 0) rotate(0deg);
}