* {
  margin: 0;
}
body {
  margin: 0;
  font-family: 'Dosis', Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 20px;
  background-color: #222;
  letter-spacing: 1px;
  min-width: 320px;
}
.wrap {
  width: 100%;
  height: 100vh;
  position: relative;
}


.logo {
  position: absolute;
  cursor: pointer;
  z-index: 1000;
  left: 50%;
  top: 40%;
  margin-left: -110px;
  margin-top: -30px;
  padding: 20px;
  transition: all .5s;
  /*animation: trans 1.2s 5s forwards;*/
}

@media (max-width: 678px) {
  .logo {
    /*animation: transMob 1.2s 5s forwards;*/
  }
}

.equalizer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spectrum {
  box-sizing: border-box;
  transform: translateZ(0);
  height: 100%;
}

.spectrum .bar {
  background-color: transparent;
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: 50px;
  width: 1px;
  transform: translateZ(0);
  will-change: transform;
  transform-origin: 50% 100%;
}

.play {
  z-index: 10;
  border: rgba(255,255,255,.5);
  background-color: transparent;
  padding: 50px;
  color: #fff;
  outline: none;
  transition: all .5s;
  display: none;
  cursor: pointer;
  font-size: 20px;
  font-family: 'Dosis', Helvetica, Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 1px;
  margin-top: -.5em;
  border-radius: 50%;
}


.play:hover {
  color: #a3ff99;
  animation: color 4s infinite;
}


.intro {
  z-index: 100;
  position: absolute;
  left: 0;
  right: 0;
  bottom:0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 60px);
}
.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
  opacity: 0;
  animation: opa .8s 5.7s forwards;
}

.form .text {
  color: #fff;
  text-align: center;
  line-height: 1.5;
  transition: color .3s;
}
.form {
  transition: all .3s;
}
.form:hover .text {
  color: #a3ff99;
  animation: color 4s .3s infinite;
}

.text--bottom {
  margin-bottom: 1em;
}

label {
  cursor: pointer;
}

.file {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.form .file-open svg path,
.form .file-open svg circle{
  transition: all .5s;
}
.form:hover .file-open svg path, 
.form:hover .file-open svg circle {
  stroke: #a3ff99;
  animation: strokeColor 4s .3s infinite;
}


.dis-block {
  display: block;
}

.dis-none {
  display: none;
}



.s {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: dash .3s 1.5s linear forwards;
}

.ee {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  /*stroke: url(#linear);*/
  animation: dash .7s 1.8s linear forwards;
}

.t {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: dash .3s 2.5s linear forwards;
}
.he {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: dash .7s 2.8s linear forwards;
}

.sound {
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: dash 2s 3.5s linear forwards;
}

.logo.invisible {
  opacity: 0;
  pointer-events: none;
}


.record {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: all 1s;
}

.warning {
  position: absolute;
  top: 45px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: all 1s;
}

.warning.visible {
  opacity: 1;
}

.record.ap-disap {
  animation: opaopa 7s forwards;
}

@media (max-width: 678px) {
  .record {
    top: 100px;
  }

  .record.ap-disap {
    animation: opaopa 5s 1s forwards;
  }
}

@media (max-width: 414px) {
  .record.ap-disap{
    font-size: 14px;
  }
}



@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


@keyframes opa {
  to {
    opacity: 1;
  }
}




@keyframes strokeColor {
  0% {stroke: #86ff40} /*green*/
  20% {stroke: #97fcf9} /*sky*/
  40% {stroke: #ffff99} /*yellow*/
  60% {stroke: #ffe241} 
  80% {stroke: #f05868} /*orange*/
  100% {stroke: #a3ff99} /*green*/
}

@keyframes color {
  0% {color: #86ff40}
  20% {color: #97fcf9}
  40% {color: #ffff99}
  60% {color: #ffe241}
  80% {color: #f05868}
  100% {color: #a3ff99}
}

@keyframes opaopa {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}