.audio-player {position: relative;width: 100%;height: 0;text-align: center;padding-bottom: 100%;background-color: rgb(0 155 128);}.audio-player video {opacity: 0;transition: opacity 300ms;will-change: opacity;}.audio-player:focus .audio-player__cover, .audio-player:hover .audio-player__cover, .audio-player.is-playing .audio-player__cover {opacity: 0.35;}.audio-player:focus .audio-player__title, .audio-player:hover .audio-player__title, .audio-player.is-playing .audio-player__title {opacity: 1;transform: translateY(0);}.audio-player:focus .audio-player__control-icon, .audio-player:hover .audio-player__control-icon, .audio-player.is-playing .audio-player__control-icon {transform: scale(1.15);}.audio-player.is-playing .audio-player__cover {opacity: 0.6;}.audio-player.is-playing video {opacity: 1;}.audio-player.is-playing .audio-player__control-icon:before {transform: translateY(0);}.audio-player.is-playing .audio-player__control-icon:after {transform: translateY(50px);}.audio-player__cover {position: absolute;top: 0;bottom: 0;left: 0;right: 0;transition: opacity 350ms;will-change: opacity;}.audio-player__title {position: absolute;color: #fff;font-size: 22px;font-weight: 500;left: 10px;right: 10px;bottom: 0;top: 50%;padding-top: 50px;transform: translateY(-5%);z-index: 10;opacity: 0;transition: all 300ms;will-change: transform, opacity;}.audio-player__control {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;z-index: 20;border: none;background: none;cursor: pointer;}.audio-player__control:focus {outline: none;}.audio-player__control-icon {position: absolute;width: 65px;height: 65px;border-radius: 50%;border: 3px solid #fff;bottom: 25px;left: 20px;margin: auto;overflow: hidden;transition: all 250ms ease-out;transform: scale(1);will-change: transform;}.audio-player__control-icon::after, .audio-player__control-icon::before {transition: all 200ms;will-change: transform;content: '';position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;}.audio-player__control-icon::after {left: 5px;width: 0;height: 0;border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-left: 20px solid #fff;transform: translateY(0);}.audio-player__control-icon::before {width: 15px;height: 30px;border-right: 6px solid #fff;border-left: 6px solid #fff;transform: translateY(-50px);}.audio-players li {display: inline-block;vertical-align: top;max-width: 300px;margin: 20px;}.wrap {overflow: hidden;margin: 0 auto;max-width: 1755px;}.box {float: left;position: relative;width: 16.65%;padding-bottom: 16%;}.boxInner {position: absolute;left: 10px;right: 10px;top: 10px;bottom: 10px;overflow: hidden;}.boxInner img {width: 100%;}@media only screen and (max-width: 480px) {.box {width: 50%;height: auto;padding: 0;}.boxInner {position: relative;left: 0;right: 0;top: 0;bottom: 0;padding: 5px;}.audio-player__control-icon {width: 25px;height: 25px;bottom: 15px;top: unset;}.audio-player__control-icon::after {left: 2px;width: 0;height: 0;border-top: 6px solid transparent;border-bottom: 6px solid transparent;border-left: 10px solid #fff;}.audio-player__control-icon::before {width: 5px;height: 13px;border-right: 3px solid #fff;border-left: 3px solid #fff;}}@media only screen and (max-width: 650px) and (min-width: 481px) {.box {width: 50%;padding-bottom: 50%;}}@media only screen and (max-width: 1050px) and (min-width: 651px) {.box {width: 33.3%;padding-bottom: 33.3%;}}@media only screen and (max-width: 1290px) and (min-width: 1051px) {.box {width: 25%;padding-bottom: 25%;}}