@charset "UTF-8";

/*common
------------------------------------------------------------*/
body{
  background: #eff1f3;
  color: #3a3b3e;
}
a,a:active{
  color: #5b70a8;
  text-decoration: none;
}
#container{
  width: 80%;
  max-width: 1800px;
  margin: 2em auto;
/*  overflow: scroll;*/
}
#container img{
  width: 100%;
  max-width:max-content;
}

/*list
------------------------------------------------------------*/
.audioList{
  width: 80%;
  margin: 2em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.audioList li{
  background: #fff;
  padding: 0.5em;
  margin-bottom: 1em;
  position: relative;
  box-shadow: 0px 0px 5px #ccc;
  width: 29.2%;
}
.audioCol{
  display: none;
}

/*thumbs
------------------------------------------------------------*/
.thumbCol{
  background: #fff;
  width: 100%;
}
.thumbCol img{
  width: 100%;
  height: inherit;
}
.data-fancybox:hover {
  opacity:0.5;
  cursor: pointer;
}

/*thumb off
------------------------------------------------------------*/
.off img{
  filter: grayscale(100%);
}