/*
 * Joellito237 - FontAwesome Solid Stylesheet
 * Professional refactor: file header and section comments for maintainability
 * If unminified source is available, use that for further improvements
 * DO NOT EDIT: This file may be minified or vendor-supplied. Edit the source for real changes.
 */

/* === FontAwesome Solid Core === */
/*!
 * Font Awesome Free 5.10.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900d41d.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

  /* Music Bg */
.music-bg {
	display: block;
	cursor: pointer;
	padding: 20px 0;
	text-align: center;
	visibility: hidden;
	z-index: 10;
	-webkit-transition: all .3s ease;
      transition: all 0.3s ease;
  text-decoration: none;
}

.music-bg p {
	margin: 0;
  font-size: 18px;
  font-weight: 600;
  color:snow;
}

.music-bg .lines {
    display: flex;
    width: 30px;
    height: 30px;
    margin: 0 auto 10px;
    align-items: flex-end;
    position: relative;
}

.music-bg .lines span {
    display: inline-flex;
    margin: 0px 1px;
    width: 7px;
    height: 5px;
    background: #4bbcff;
}

.audio-on .music-bg .lines span:nth-child(1) {
    -webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
    		animation: musicline 2s 0.5s ease-out alternate infinite;
}  

.audio-on .music-bg .lines span:nth-child(2) {
    -webkit-animation: musicline 2s 1s ease-out alternate infinite;
    		animation: musicline 2s 1s ease-out alternate infinite;
} 

.audio-on .music-bg .lines span:nth-child(3) {
    -webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
    		animation: musicline 2s 1.5s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(4) {
    -webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
    		animation: musicline 2s 0.25s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(5) {
    -webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
    		animation: musicline 2s 0.75s ease-out alternate infinite;
}

.audio-on .music-bg .lines span:nth-child(6) {
    -webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
    		animation: musicline 2s 1.25s ease-out alternate infinite;
}

/* Animation Music Line */
@-webkit-keyframes musicline {
  0% {height: 5px;}
  10% {height: 10px;}
  20% {height: 5px;}
  30% {height: 14px;}
  40% {height: 18px;}
  50% {height: 5px;}
  60% {height: 16px;}
  70% {height: 10px;}
  80% {height: 12px;}
  90% {height: 4px;}
  100% {height: 18px;}
}

@keyframes musicline {
  0% {height: 5px;}
  10% {height: 10px;}
  20% {height: 5px;}
  30% {height: 14px;}
  40% {height: 18px;}
  50% {height: 5px;}
  60% {height: 16px;}
  70% {height: 10px;}
  80% {height: 12px;}
  90% {height: 4px;}
  100% {height: 18px;}
}