#demo{background:#f6f0e6}#demo .btn{margin:48px auto 0}#demo h3{margin-bottom:40px;margin-top:0}.demo_outer{width:100%;max-width:996px;padding:48px;background-color:#fff;border-radius:40px}.demo_outer .demo_title{margin-top:0;margin-bottom:20px;font-size:22px;line-height:40px;display:block}.audios_list{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between}.audios_list li{width:calc(20% - 18px);background:#eef4f9;border-radius:10px;padding:12px 0;display:flex;align-items:center;justify-content:space-between;flex-direction:column;cursor:pointer;transition:all .3s ease}.audios_list li .demo_icon_wrapper{width:60px;height:60px;position:relative;display:block}.audios_list li img{position:absolute;left:50%;transform:translateX(-50%);width:100%;max-width:60px}.audios_list li img.default_icon{opacity:1;visibility:visible}.audios_list li img.selected_icon{opacity:0;visibility:hidden}.audios_list li.selected img.default_icon{opacity:0;visibility:hidden}.audios_list li.selected img.selected_icon{opacity:1;visibility:visible}.audios_list li .animation_holder{display:none}.audios_list li:hover{background:#e1e4f9}.audios_list li:hover img.default_icon{display:none}.audios_list li:hover .animation_holder{display:block}.audios_list li span{font-size:16px;line-height:26px;color:#3c4151;text-align:center}.audios_list li.selected{background:#4b57db}.audios_list li.selected:hover .animation_holder,.audios_list li.selected:hover .default_icon{display:none}.audios_list li.selected span{color:#fff;font-weight:700}.player_wrapper{margin-bottom:48px}.player_wrapper #player{background:#eef4f9;border-radius:20px;width:100%;padding:40px 37px 40px 54px;position:relative;z-index:20}.player_wrapper #player .play-button img{width:50px;height:50px}.player_wrapper .switch_wrapper{background:#e0e9f1;border-bottom-left-radius:20px;border-bottom-right-radius:20px;height:108px;margin-top:-20px;position:relative;z-index:9;display:flex;align-items:center;justify-content:center;padding-top:20px}.player_wrapper .play_button{width:50px;height:50px;margin-right:30px}.player_wrapper .play_button .hidden{display:none}.player_wrapper .play_button span{display:inline-block;width:50px;height:50px;border-radius:50%;cursor:pointer}.player_wrapper .play_button span.play_state{animation:ripple 1.2s linear infinite}.progress{position:relative;width:100%;height:66px;overflow:hidden}#playing_progress{width:0;top:0;left:0;position:absolute;overflow:hidden}#player{display:flex;justify-content:space-between;align-items:center}span.loading_state{width:50px;height:50px;background-color:#ff542e;border-radius:50%}span.loading_state .loading{width:100%;height:100%}.play_button span.loading_state{display:none;overflow:hidden}.play_button[disabled] span.loading_state{display:block}.play_button[disabled] span:not(.loading_state){display:none}@keyframes spinner_inner{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.spinner_inner div{position:absolute;width:57px;height:57px;border:4px solid #fff;border-top-color:transparent;border-radius:50%;animation:spinner_inner .5s linear infinite;top:44px;left:44px;box-sizing:content-box}.loading_spinner{width:50px;height:50px;display:inline-block;overflow:hidden;background:0 0}.spinner_inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(.56);backface-visibility:hidden;transform-origin:0 0}.switch_wrapper strong{font-weight:700;font-size:18px;line-height:30px;color:#6d8297}.switch_wrapper{position:relative}.animation_arrow{position:absolute;bottom:-32px;left:44%;transform:translateX(-50%);display:none;max-width:100px}.animation_arrow.show{display:block}#noise_cancellation_switch{margin:0 16px;width:67px;height:32px;display:inline-flex;background-color:#32bf84;border-radius:50px;overflow:hidden}#noise_cancellation_switch.switch.off{background-color:#abbdcf}#noise_cancellation_switch.switch span{font-size:unset;display:flex;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;align-items:center;transition:all .2s ease;position:relative;margin-left:41px}#noise_cancellation-switch{box-sizing:unset!important}#noise_cancellation_switch.switch.off span{margin-left:4px;font-size:unset}#noise_cancellation_switch.switch em{display:inline-block;width:22px;height:22px;border-radius:50%;background-color:#fff}#noise_cancellation_switch.switch.switch_disabled em{background-color:#eef4f9}#noise_cancellation_switch.switch.switch_disabled{pointer-events:none}@media screen and (max-width:1025px){.demo_outer{padding:32px}.player_wrapper #player{padding:48px 35px 48px 42px}.audios_list li span{word-spacing:200px}.audios_list li .demo_icon_wrapper{width:48px;height:48px}.audios_list li .demo_icon_wrapper img{max-width:100%}.audios_list li{padding:6px 0}#demo h3{font-size:40px;line-height:50px;margin-bottom:48px}.demo_outer h6{font-size:22px}}@media screen and (max-width:769px){#demo{background-color:#fff;padding-top:0!important}.demo_outer h6{text-align:center}#demo h3{font-size:32px;line-height:44px;margin-bottom:40px}.demo_outer{padding:0}.player_wrapper #player{padding:32px 15px;flex-direction:column}.player_wrapper .play_button{margin-bottom:24px;margin-right:0}.switch_wrapper strong{font-size:16px;line-height:26px}.audios_list{flex-direction:column}.audios_list li{width:100%;flex-direction:row;align-items:center;justify-content:center;margin-bottom:16px}.demo_icon_wrapper{margin-right:12px;width:40px;height:40px}.audios_list li span{word-spacing:unset;font-size:16px;line-height:26px;width:120px;text-align:left}.animation_arrow{left:34%}}