.demo_outer{width:100%;max-width:996px;padding:48px;background-color:#fff;border-radius:40px}.audios_list{list-style:none;margin:0 -9px 0 -9px;padding:0;display:flex;justify-content:space-between}.audios_list li{border-radius:10px;padding:12px 0;display:flex;align-items:center;justify-content:space-around;flex-direction:column;cursor:pointer;transition:all 0.3s ease;flex-grow:1;flex-basis:0%;margin:0 9px}.audios_list li .demo_icon_wrapper{position:relative;display:block;height:60px}.audios_list li img{position:absolute;left:50%;transform:translateX(-50%)}.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;height:60px}.audios_list li:hover{background:#e4e7ea}.audios_list li:hover img.default_icon{display:none}.audios_list li:hover .animation_holder{display:block}.audios_list li.selected{background:#614efa}.audios_list li.selected span{color:#fff}.audios_list li.selected:hover .animation_holder,.audios_list li.selected:hover .default_icon{display:none}.player_wrapper{margin-bottom:48px}.player_wrapper .player{border-radius:20px;width:100%;position:relative;z-index:20}.player_wrapper .player .play-button img{width:50px;height:50px}.player_wrapper .switch_wrapper{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;border-radius:50%;background-color:#fe6257}.player_wrapper .play_button .play_state,.player_wrapper .play_button .pause_state{display:flex;align-items:center;justify-content:center}.player_wrapper .play_button:hover{background-color:#ce4f46}.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:center;align-items:center}span.loading_state{width:50px;height:50px;background-color:#fe6257;border-radius:50%}span.loading_state .loading{width:100%;height:100%}.play_button span.loading_state{display:none;overflow:hidden;pointer-events:none}.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 0.5s linear infinite;top:44px;left:44px;box-sizing:content-box}.loading_spinner{width:50px;height:50px;display:inline-block;overflow:hidden;background:none}.spinner_inner{width:100%;height:100%;position:relative;transform:translateZ(0) scale(.56);backface-visibility:hidden;transform-origin:0 0}.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:#23d6ba;border-radius:50px;overflow:hidden}.noise_cancellation_switch.switch.off{background-color:#c3c8cd}.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 0.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:#f2f3f4}.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{padding:0 15px;word-spacing:80px}.audios_list li .demo_icon_wrapper{height:48px}.audios_list li{padding:6px 0}#demo h3{font-size:40px;line-height:50px;margin-bottom:48px}.demo_outer h6{font-size:22px}.demo_icon_wrapper img{width:auto;height:100%}}@media screen and (max-width:769px){.audios_list li:hover img.default_icon{display:block}.audios_list li:hover .animation_holder{display:none}.demo_title{text-align:center}.audios_list{margin:0 auto}.audios_list li span{padding:0}#demo{background-color:#fff;padding-top:0!important}.demo_outer h6{text-align:center}.demo_outer .subtitle{font-size:17px!important;line-height:30px!important}#demo h3{font-size:32px;line-height:44px;margin-bottom:40px}.demo_outer{padding:0;text-align:center}.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;margin:0 auto 16px auto;min-height:unset;max-width:480px}.audios_list li .demo_icon_wrapper{display:inline-flex;align-items:center;min-height:unset}.demo_icon_wrapper{margin-right:12px;width:48px;height:48px}.demo_icon_wrapper img{height:auto;width:55px}.audios_list li span{word-spacing:unset;width:auto;text-align:left;min-width:146px;display:block;margin-left:48px}.audios_list li .demo_icon_wrapper{align-items:center}.animation_arrow{left:34%}}