html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html,body{
  margin:0;
  padding: 0;
  background-color: #252525;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  
}

.sound-box, .sound-box div{
  xborder: 2px dashed #555;
}

.sound-box-wrap{
  xborder: 2px dashed #333;  
  flex: 0 0 90%;
  max-width: 130vh; /*700px;*/
  padding: 30px;
  position: relative;
}

@media screen and (min-width: 830px){
  .sound-box-wrap{
    max-width: 700px;
  }
}

.loader{
  opacity:0;
  color: #aaa;
  text-align: center;
  transition: all 1s;
}

.loader.loading{
  opacity:1;  
}


#power-button{
  -webkit-appearance: none;
  position: absolute;
  top: 2.5%;
  left: 45%;
  width: 5vw;
  height: 5vw;
  max-width: 50px;
  max-height: 38px;
  min-width: 28px;
  min-height: 28px;
  background-color: transparent;
  border: none;
  line-height: 1.2em;
  cursor: pointer;
  transition: all 1s;
}

#power-button svg path{
  fill: #444;
}

#power-button img{
  width: 100%;
  height: 100%;
}

#power-button:hover svg path{
  fill: #666;
}

#power-button.highlighted svg path{
  fill: #00db4986;
}

#power-button.highlighted:hover{
  color: #00db4a;
}

#power-button.on{
  color: #00db4a;
}

.sound-box{  
  width: 100%;  
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-around;0
}

.sound-box-item{  
  -webkit-appearance: none;
  background: none;
  border: none;   
  position: relative;
  width:29%;
  height: 0;  
  padding-top: 29%;
  text-align: center;
  overflow:hidden;
  margin-bottom: 3.25%;
}

.sound-box-item-content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  xbackground-color: #121212;
  display: flex;  
  flex-direction: column;
  justify-content: center;
}

.sound-box-item-content-vertical{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  xbackground-color: #121212;
  display: flex;  
  flex-direction: row;
  justify-content: center;
}


.sound-box > div:nth-child(3n){
  xmargin-right:0;
} 

.sound-box-item-sin{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sound-box-sin-strand{
  height: 23%;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}

.sound-box-sin-strand svg{
  max-height:80%;
  max-width:100%;
}

/*#sin-wave-a path, 
#sin-wave-b path, 
#sin-wave-c path*/
.sound-box.off .sound-box-item path,.sound-box.off .sound-box-item line{
  stroke: #333333;
}
.sound-box.on .sound-box-item path, .sound-box.on .sound-box-item line{
  stroke: #666666;
}

.sound-box-item-sin path{
  stroke: #666666;  
  stroke-width: 12px;
  stroke-linecap: butt;
  fill: none; 
  width: 100%;
  height: 100%;  
  transition: stroke 0.2s;
}

.sound-box .sound-box-item-sin.highlighted path{
  stroke: #fff036;
}

/* DASHED */

.sound-box-item-dashed{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sound-box-dashed-strand{
  height: 23%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sound-box-dashed-strand svg{
  max-height:80%;
  max-width:100%;
}

.sound-box-dashed-strand line{
  fill:#FFFFFF;
  stroke:#666666;
  stroke-width:50;
  stroke-miterlimit:10;
  stroke-dasharray:12,20;
  transition: stroke 0.2s;
}

.sound-box .sound-box-item-dashed.highlighted line{
  stroke: #ff5ba7;
}

/* END DASHED */

/* TRIANGLE WAVE */

.sound-box-item-triangle{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sound-box-item-triangle path{
  stroke: #666666;  
  stroke-width: 10px;
  stroke-linecap: butt;
  fill: none; 
  width: 100%;
  height: 100%;  
  transition: stroke 0.2s;
}

.sound-box-triangle-strand{
  height: 23%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sound-box-triangle-strand svg{
  max-height:80%;
  max-width:100%;
}

.sound-box .sound-box-item-triangle.highlighted path{
  stroke: #0094ff;
}
/* END TRIANGLE WAVE */

/* SQUARE WAVE */
.sound-box-item-square path{
  stroke: #666666;  
  stroke-width: 10px;
  stroke-linecap: butt;
  fill: none; 
  width: 100%;
  height: 100%;  
  transition: stroke 0.2s;
}

.sound-box-square-strand{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 25%;  
}

.sound-box-square-strand svg{
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

.sound-box .sound-box-item-square.highlighted path{
  stroke: #ff5e00;
}
/* END SQUARE WAVE */

/* DOTTED */
.sound-box-dotted-strand{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 25%; 
  text-align: center;
}

.sound-box-dotted-strand svg{
  max-height:100%;
  max-width:100%;
}

.sound-box-dotted-strand line{
  fill:#FFFFFF;
  stroke:#666666;
  stroke-width: 22px;
  stroke-linecap: round;
  stroke-dasharray: 1,35;
  transition: stroke 0.2s;
}

.sound-box .sound-box-item-dotted.highlighted line{
  stroke: #00db4a;
}

/* END DOTTED */

/* LINES */
.sound-box-lines-strand{
  display: inline-block;
  height: 100%;
  width: 100%; 
  text-align: center;
}

.sound-box-lines-strand svg{
  max-height:100%;
  max-width:100%;
}

.sound-box-lines-strand line{
  fill:#FFFFFF;
  stroke:#666666;
  stroke-width: 150px; 
  stroke-dasharray: 10,14,8,30;
  transition: stroke 0.2s;
}

.sound-box .sound-box-item-lines.highlighted line{
  stroke: #ffffff;
}

/* END LINES */