html {
  font-size: 16px; }

body {
  background-color: #97b51c;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  padding-top: 4em;
  font-size: 16px; }
  @media (max-width: 992px) {
    body {
      padding-top: 0em; } }

.intro,
.footer,
.player-container {
  transition: opacity 800ms ease-in-out; }

body.is-playing .intro,
body.is-playing .footer,
body.is-playing .player-container:not(.on) {
  opacity: 0.20; }

body.is-playing .player-container:hover,
body.is-playing .footer:hover {
  opacity: 1; }

a, a:link, a:visited, a:hover {
  transition: all 250ms ease-in-out;
  color: #fff;
  text-decoration: underline; }

a:hover {
  opacity: 0.6;
  text-decoration: none; }

.intro {
  text-align: center;
  margin-bottom: 5rem;
  margin-top: 4rem; }
  @media (max-width: 992px) {
    .intro {
      margin-bottom: 0rem;
      margin-top: 1rem; } }
  .intro h1 {
    font-weight: 400;
    font-size: 3.1rem;
    text-transform: uppercase; }
    @media (max-width: 992px) {
      .intro h1 {
        font-size: 2.1rem; } }
  .intro h2 {
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase; }

.player-container {
  text-align: center;
  margin: 1rem auto;
  width: 100%; }
  .player-container h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase; }
  .player-container p {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.7; }
  .player-container .animPlay {
    opacity: 0;
    transition: all 800ms ease-in-out;
    position: absolute;
    z-index: 1;
    width: 350px;
    height: 350px;
    border-radius: 47%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px dotted #fff;
    animation: cercle;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s; }
  .player-container.on .animPlay {
    opacity: 1;
    width: 210px;
    height: 210px; }
    @media (max-width: 992px) {
      .player-container.on .animPlay {
        width: 130px;
        height: 130px; } }
  .player-container .play-pause-btn {
    width: 200px;
    height: 200px; }
    .player-container .play-pause-btn svg {
      display: block;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); }
    @media (max-width: 992px) {
      .player-container .play-pause-btn {
        width: 120px;
        height: 120px; } }
  .player-container:hover .player {
    box-shadow: inset 0px 0px 0px 100px rgba(255, 255, 255, 0.33); }
  @media (max-width: 992px) {
    .player-container {
      margin-bottom: 0rem; } }

@keyframes cercle {
  0% {
    transform: rotate(0deg);
    border-radius: 47%; }
  50% {
    border-radius: 45%; }
  100% {
    transform: rotate(360deg);
    border-radius: 49%; } }

.green-audio-player.player {
  transition: box-shadow 600ms;
  transition-timing-function: cubic-bezier(0.09, 0.63, 0.21, 1);
  position: relative;
  width: 200px;
  min-width: 100px;
  height: 200px;
  padding: 0;
  margin: 0 auto;
  background-color: transparent;
  box-shadow: none;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 40px; }
  @media (max-width: 992px) {
    .green-audio-player.player {
      width: 120px;
      height: 120px;
      margin-bottom: 20px; } }
  .on .green-audio-player.player {
    border: 1px dotted white;
    width: 200px;
    height: 200px; }
    @media (max-width: 992px) {
      .on .green-audio-player.player {
        width: 120px;
        height: 120px; } }
  .green-audio-player.player .controls {
    display: none; }
  .green-audio-player.player .slider .gap-progress {
    background-color: #97b51c; }
  .green-audio-player.player .slider .gap-progress .pin {
    background-color: #fff;
    border: 2px solid #97b51c;
    box-shadow: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    left: 50% !important;
    transform: translateX(-50%) !important; }
  .green-audio-player.player .holder {
    z-index: 10; }
    .green-audio-player.player .holder .play-pause-btn path {
      fill: #fff; }
  .green-audio-player.player .volume {
    position: absolute;
    bottom: -40px;
    width: 200px; }
    .green-audio-player.player .volume .volume__button path {
      fill: #fff; }
    .green-audio-player.player .volume .volume__button svg {
      display: none;
      margin: 0 auto;
      width: 18px;
      z-index: 500;
      position: relative; }
      .on .green-audio-player.player .volume .volume__button svg {
        display: block; }
    .green-audio-player.player .volume .volume__controls {
      opacity: 1;
      transition: all 250ms ease-in-out;
      transform: translateX(-50%) scale(1);
      z-index: 100; }
      .green-audio-player.player .volume .volume__controls .volume__slider {
        width: 2px; }
        .green-audio-player.player .volume .volume__controls .volume__slider .volume__progress {
          width: 2px; }
    .green-audio-player.player .volume .volume__controls.hidden {
      opacity: 0;
      display: flex;
      z-index: 1;
      transform: translateX(-50%) scale(1.15); }
    .green-audio-player.player .volume .volume__controls.top, .green-audio-player.player .volume .volume__controls.bottom {
      bottom: 40px;
      background-color: white;
      left: 50%;
      border-radius: 50%;
      width: 200px;
      height: 200px; }

.social-icon {
  transition: all 250ms ease-in-out;
  opacity: 0.6;
  display: inline-block;
  margin: 0 0.33rem; }
  .social-icon:hover {
    opacity: 1; }

.footer {
  text-align: center;
  margin: 6rem 0; }
  .footer > div {
    margin-bottom: 1rem; }