*{padding:0;margin:0;box-sizing:border-box}html{height:100%}body{font-family:'Roboto',sans-serif;background-color:#eff6ff;top:0;position:absolute;bottom:0;left:0;right:0}.loading-overlay{position:fixed;top:0;bottom:0;left:0;right:0;background-image:url(../img/logo.png);background-position:center;background-color:#ca2020;background-repeat:no-repeat;background-size:200px;z-index:1}.loading-overlay .spinner{position:absolute;background-image:url(../img/spinner.gif);background-position:center;width:60px;height:60px;background-repeat:no-repeat;background-size:60px;margin:auto;top:0;left:0;right:0;bottom:-300px}.voice-groups .voice-group{text-align:center;margin-bottom:60px}.voice-groups .voice-group[data-voice-group-id="0"] .btn.switch{background-color:#6089b5}.voice-groups .voice-group[data-voice-group-id="1"] .btn.switch{background-color:#9ebedf}.voice-groups .voice-group[data-voice-group-id="2"] .btn.switch{background-color:#113357}.voice-groups .voice-group[data-voice-group-id="3"] .btn.switch{background-color:#255b95}.voice-groups .voice-group .buttons{display:flex;justify-content:space-between;flex-wrap:wrap}.voice-groups .voice-group .buttons .btn-group{position:relative;width:25%;display:flex;justify-content:center}.voice-groups .voice-group .buttons .btn-group .btn.switch{display:flex;justify-content:center;align-items:center;width:70px;height:100px;color:#fff}.voice-groups .voice-group .buttons .btn-group .btn.switch:hover{cursor:pointer;background-color:rgba(202,32,32,0.5)}.voice-groups .voice-group .buttons .btn-group .btn.switch.active{background-color:#ca2020}.voice-groups .voice-group .buttons .btn-group .btn.solo{position:absolute;height:auto;padding:4px 10px;background-color:#d3d3d3;display:none}.voice-groups .voice-group .buttons .btn-group .btn.solo.visible{display:block}.voice-groups .voice-group .buttons .btn-group .btn.solo.active{background-color:#006400;color:#fff}@media screen and (min-width:1270px){.voice-groups .voice-group .buttons .btn-group{width:50%}.voice-groups .voice-group .buttons.left-bottom .btn-group:nth-child(1){justify-content:right}.voice-groups .voice-group .buttons.left-bottom .btn-group:nth-child(4){justify-content:left}.voice-groups .voice-group .buttons.left-top .btn-group:nth-child(2){justify-content:left}.voice-groups .voice-group .buttons.left-top .btn-group:nth-child(3){justify-content:right}.voice-groups .voice-group .buttons.right-top .btn-group:nth-child(1){justify-content:right}.voice-groups .voice-group .buttons.right-top .btn-group:nth-child(4){justify-content:left}.voice-groups .voice-group .buttons.right-bottom .btn-group:nth-child(2){justify-content:left}.voice-groups .voice-group .buttons.right-bottom .btn-group:nth-child(3){justify-content:right}}@media screen and (max-width:1269px){.voice-groups{max-width:450px;margin:auto;display:flex;flex-direction:column}.voice-groups .voice-group[data-voice-group-id="0"]{order:2}.voice-groups .voice-group[data-voice-group-id="1"]{order:1}.voice-groups .voice-group[data-voice-group-id="2"]{order:4}.voice-groups .voice-group[data-voice-group-id="3"]{order:3}}@media screen and (min-width:1270px){.voice-groups{display:flex;justify-content:center;top:50%;bottom:0;left:0;right:0;position:absolute;transform:translateY(-50%)}.voice-groups .voice-group.bottom{margin-top:150px}.voice-groups .voice-group.left-bottom button.mute{transform:rotateZ(-36deg);margin-left:-130px}.voice-groups .voice-group.left-bottom .buttons{margin-top:-50px}.voice-groups .voice-group.left-bottom .buttons .btn-group:nth-child(1){margin-top:60px}.voice-groups .voice-group.left-bottom .buttons .btn-group:nth-child(2){justify-content:left}.voice-groups .voice-group.left-bottom .buttons .btn-group:nth-child(3){margin-top:10px;justify-content:right}.voice-groups .voice-group.left-bottom .buttons .btn-group:nth-child(4){margin-top:-50px}.voice-groups .voice-group.left-top button.mute{transform:rotateZ(-16deg);margin-left:-75px}.voice-groups .voice-group.left-top .btn-group:nth-child(1){margin-top:30px}.voice-groups .voice-group.left-top .btn-group:nth-child(2){justify-content:left}.voice-groups .voice-group.left-top .btn-group:nth-child(3){justify-content:right;margin-top:6px}.voice-groups .voice-group.left-top .btn-group:nth-child(4){margin-top:-24px}.voice-groups .voice-group.right-top button.mute{transform:rotateZ(16deg);margin-left:42px}.voice-groups .voice-group.right-top .btn-group:nth-child(1){justify-content:right}.voice-groups .voice-group.right-top .btn-group:nth-child(2){margin-top:30px}.voice-groups .voice-group.right-top .btn-group:nth-child(3){margin-top:-24px}.voice-groups .voice-group.right-top .btn-group:nth-child(4){justify-content:left;margin-top:6px}.voice-groups .voice-group.right-bottom button.mute{transform:rotateZ(36deg);margin-left:75px}.voice-groups .voice-group.right-bottom .buttons{margin-top:-50px}.voice-groups .voice-group.right-bottom .buttons .btn-group:nth-child(1){justify-content:right}.voice-groups .voice-group.right-bottom .buttons .btn-group:nth-child(2){margin-top:60px}.voice-groups .voice-group.right-bottom .buttons .btn-group:nth-child(3){margin-top:-50px}.voice-groups .voice-group.right-bottom .buttons .btn-group:nth-child(4){justify-content:left;margin-top:10px}.voice-groups .voice-group .buttons{margin-top:-20px}.voice-groups .voice-group .buttons .btn-group{width:50%}}.transport-buttons{text-align:center;margin-top:60px;margin-bottom:60px}.transport-buttons .btn.transport{margin:5px;width:60px;height:60px;border-radius:50%;background-color:#000;color:#fff;line-height:40px;text-align:center;font-weight:bold;border:none;-webkit-box-shadow:0 0 4px 1px rgba(0,0,0,0.6);box-shadow:0 0 5px 1px rgba(0,0,0,0.6)}.transport-buttons .btn.transport:disabled{background-color:#737373;cursor:default;-webkit-box-shadow:none;box-shadow:none;color:#d2d2d2}.btn{border:1px solid;padding:8px;font-size:12px;border-radius:50%;height:120px;font-weight:bold;text-align:center;-webkit-transition:all 500ms;-moz-transition:all 500ms;-ms-transition:all 500ms;-o-transition:all 500ms;transition:all 500ms}.btn:hover{cursor:pointer}button.mute{width:100%;position:relative;background-color:#c8c8c8;color:#fff;border:none;font-size:20px;padding-top:8px;padding-bottom:28px;border-top-left-radius:50%;border-top-right-radius:50%;transition:all 500ms}button.mute:after{content:'';position:absolute;left:0;right:0;bottom:-24px;border-top-left-radius:50%;border-top-right-radius:50%;height:44px;background-color:#eff6ff}button.mute:hover{cursor:pointer;background-color:#ccb5a0}button.mute.active{background-color:#e39550;color:#fff}