.lexicon-shell{
  margin: 0vw 30px;
}

.lexicon-sound-machine-shell {
  display: flex;
  flex-direction: column;
  height: min-content;
  margin-top: 5vw;
}

.lexicon-controls{
  display: flex;
  margin-bottom: 60px;
  margin-top: 60px;
}

.lexicon-control-child{
  box-shadow:  -2px -4px 12px #e4e4e4, 2px 4px 4px #ffffff, 2px 4px 4px #cecece, -6px -4px 4px #ffffff;
  border: #f7f7f7 6px solid;
  padding: 2.5vw;
  border-radius: 50vw;
  margin-right: 3vw;
  display: flex;
  align-items: center;
  height: fit-content;
  width: 100%;
  justify-content: space-between;
}

.notes-shell{
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(1, minmax(10vw, 1fr));
  grid-auto-rows: min-content;
  grid-gap: 1vw 1vw; 
  margin-bottom: 20vw;
  padding: 0;
  border-radius: 4vw;
}

.sound-column{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: .5vw;
  height: 60px;
  padding: 8px 8px 0 8px;
  border-top: 1px solid #323535;
}


/* ////////speaker///////////*/
.speaker{
  width: 12vw;
  height: 12vw;
  padding: 4vw;
  background-image: url("../../images/synthesizer/speaker.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6vw;
  margin-left: 6vw;
  opacity: 85%;
}

/* ////////play buttons///////////*/
.lexicon_play{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24vw;
  height: 24vw;
  box-shadow:  2px 4px 6px #e4e4e4, 4px -4px 2px #ffffff;
  border: #ebebeb .125px solid;
  border-radius: 30vw;
  margin-right: 6vw;
  cursor: pointer;
}


.play-button {
  width: 14vw;
  height: 14vw;
  background-image: url("../../images/synthesizer/play.svg");
  background-size: cover;
  border: none;
  cursor: pointer;
  opacity: 75%;
  box-shadow:  0px 0px 1px #afafaf inset, 0px 0px 2px #b8b8b8;
  border: #ebebeb .125px solid;
  border-radius: 10vw;
}

.stop-button{
  width: 14vw;
  height: 14vw;
  border: none;
  background-image: url("../../images/synthesizer/stop.svg");
  background-size: cover;
  cursor: pointer;
  opacity: 75%;
  box-shadow:  0px 0px 1px #afafaf inset, 0px 0px 2px #b8b8b8;
  border: #ebebeb .125px solid;
  border-radius: 10vw;
}

.off{
  display: none;
}


/* ////////radio///////////*/
.radio{
  display: none;
}
.radioinactive{
  display: none;
}
/* ////////labels///////////*/
.label{
  color: #323535;
  font-size: .875rem;
  font-weight: 400;
  line-height: 125%;
  margin-bottom: 4px;
  letter-spacing: 115%;
  width: 36vw;
  padding: 0 2px;
}

/* ////////sounds bars///////////*/
.sound-bars-container{
  display: flex;
  flex-direction: row;
}

.blank-bar{
  height: 36px;
  width: 36px;
  margin-bottom: 4px;
  margin-left: 5vw;
  background-color: #ffffff;
  cursor: pointer;
  border-radius: 25rem;
  transition: .3s;
  box-shadow:  0px 0px 1px #efefef, 1px 1px 2px #ffffff, 1px 3px 6px #a8a8a8, -1px -1px 1px #ffffff;
  /* border: #f5f5f5 1px solid; */
}


/* /////sound bar children////// */

/* .child-1-bar{
  position: relative;
  z-index: 3;
}

.child-2-bar{
  position: relative;
  z-index: 2;
}

.child-3-bar{
  position: relative;
  z-index: 1;
} */

/* /////ON COLORS//// */ /* /////ON COLORS//// */ /* /////ON COLORS//// */ /* /////ON COLORS//// */ 

.c1-on{
  background-color: #aeeeef;
  opacity:100%;
}

.c2-on{
  background-color: #4bc8d2;
  opacity: 100%;
}

.c3-on{
  background-color: #fdda5c;
  opacity: 100%;
}

.c4-on{
  background-color: #323535;
  opacity: 100%;
}





/* ////don't use this for anything but the audio files */
.on{
  opacity: 100%;
}

/* .sound-note {
  position: relative;
  z-index: 35;
} */







@media (min-width: 480px) {
  .lexicon-shell{
    margin: 0vw 5vw;
  }
  .lexicon-sound-machine-shell {
    flex-direction: row;
    height: min-content;
    margin-top: 8vw;
  }
  .notes-shell{
    grid-template-columns: repeat(6, minmax(10vw, 1fr));
    grid-auto-rows: min-content;
    grid-gap: .5vw 1vw; 
    margin-bottom: 20vw;
    box-shadow:  -2px -4px 12px #e4e4e4, 2px 4px 4px #ffffff, 2px 4px 4px #cecece, -6px -4px 4px #ffffff;
    border: #f7f7f7 6px solid;
    padding: 2vw;
    border-radius: 4vw;
    margin-bottom: 5vw;
  }
  .lexicon-controls{
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .lexicon-control-child{
    flex-direction: column;
  }
  .sound-bars-container{
    flex-direction: column-reverse;
  }
  .sound-column{
    height: 100%;
    border-top:none;
  }
  .speaker{
    width: 4vw;
    height: 4vw;
    padding: 2vw;
    margin-bottom: 3vw;
    margin-right: 0;
    margin-left: 0;
  }
  .lexicon_play:hover {
    box-shadow: 2px 4px 6px #e4e4e4 inset;
  }
  .lexicon_play{
    width: 8vw;
    height: 8vw;
    margin-right: 0;
  }
  .play-button {
    width: 5vw;
    height: 5vw;
  }
  .stop-button{
    width: 5vw;
    height: 5vw;
  }
  .blank-bar{
    width: auto;
    height: 20px;
    margin-left: 0;
    margin-bottom: 12px;
  }
  .blank-bar:hover {
    box-shadow:  0px 0px 4px #e4e4e4, 1px 2px 8px #a9a9a9 inset;
    /* border: #ffffff 1px solid; */
    transition: 300ms ease-in-out;
  }
  .c1:hover{
    background-color: #aeeeef;
    opacity:100%;
    transition: .3s;
  } 
  .c2:hover{
    background-color: #4bc8d2;
    opacity: 100%;
    transition: .3s;
  }
  .c3:hover{
    background-color: #fdda5c;
    opacity: 100%;
    transition: .3s;
  }
  .c4:hover{
    background-color: #323535;
    opacity: 100%;
    transition: .3s;
  }
  .radio{
    display: block;
    height: .75vw;
    width: 2vw;
    border: .1rem solid#323535;
    background-color: #323535;
    padding: .125rem .125rem;
    cursor: pointer;
    border-radius: 10vw;
    margin-bottom: 12px;
    margin-top: 6px;
    opacity: 75%;
  }
  
  .radio:hover{
    background-color: #f5f5f5;
    transition: .3s;
  }
  
  .radioinactive{
    background-color: #f5f5f5;
    border: .1rem solid white;
    display: block;
    cursor: default;
  }
  .label{
    width: 10vw;
    border-top: #323535 1px solid;
  }


  
}

@media (min-width: 1685px) {

}