/* Font
 * -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Changa';
    src: url('../font/changa-regular.woff2') format('woff2'),
         url('../font/changa-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

/* Reset
 * -------------------------------------------------------------------------- */
*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box; }

* {
	/* curseur par défaut pour ne pas afficher de curseur de text ou autre */
	cursor: default;

	/* désactive la sélection et l'affichage du curseur de texte */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* désactive le menu copier/coller sur téléphone */
	-webkit-touch-callout: none;

	/* désactive le highlight et la bordure quand on focus un élément */
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:none; }

html {
	/* défini le font-size à "10px", adapté au rem */
	font-size: 62.5%;
	/* IE9-IE11 fix - http://bit.ly/1g4X0bX */
	font-size: calc(1em * 0.625);
	box-sizing: border-box; }

body {
	position: absolute;
	height: 100%;
	width: 100%;
	font-size: 1.5rem;
	background-color: #000;
	color: #fff;
	font-family: 'Changa', sans-serif;
	text-transform: uppercase;
	line-height: 1.5;
	overflow: hidden; }

/* Logo
 * -------------------------------------------------------------------------- */
#logo {
	z-index: 10000;
	position: absolute;
	top: 35%;
	left: 50%;
	width: 30vw;
    height: 10vw;
	background-color: blue;
	background: url('../img/BeatMXR-logo-standalone.svg') 50% 50% no-repeat;
	background-size: contain;
	font-size: 2vw;
	overflow: hidden;
	transform: translateX(-50%) translateY(-50%); }

.onReady #logo, .onReady #logo * { cursor: pointer; }

.onStarting #logo {
	transition: transform .75s ease, top .75s ease, width .75s ease, height .75s ease; }

.onStarted #logo {
	top: .5vw;
	width: 13vw;
    height: 4vw;
	min-width: inherit;
	min-height: inherit;
	transform: translateX(-50%); }

#logo h1 {
	position: absolute;
	width: 100%;
	overflow: hidden;
	text-indent: 100%; }

#logo .version {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 1em;
	line-height: 1.2em;
	text-transform: lowercase; }

.onStarted #logo .version {
	font-size: .4em; }

/* Labomedia
 * -------------------------------------------------------------------------- */
#logo-labomedia {
	position: absolute;
	z-index: 10000;
	top: 0.5vw;
	right: 0.5vw;
    width: 4%;
    height: 4vw;
	transition: all .25s;
	transform: rotateZ(-45deg);
	background-image: url('data:image/png;base64,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');
	background-repeat: no-repeat;
	background-size: 70%;
	background-position: 50% 30%; }

#logo-labomedia:hover {
	cursor: pointer;
	transform: rotateZ(0deg); }

/* Overlay
 * -------------------------------------------------------------------------- */
#startingOverlay {
	z-index: 9999;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	overflow: hidden;
	opacity: 1;
	transition: opacity 1s ease; }

.onStarted #startingOverlay {
	opacity: 0; }

/* Loading message
 * -------------------------------------------------------------------------- */
.startingMessage {
	z-index: 9999;
	position: absolute;
	top: 35%;
	left: 50%;
	width: 100%;
	margin-top: 10vw;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	font-size: 2vw;
	line-height: 1.5em;
	transition: top 1s ease; }

.onStarted .startingMessage {
	top: 100%; }

.startingMessage h2 {
	margin: 0;
	padding: .25vw 0 0 0;
	background: #fff;
	color: #000;
	line-height: 1.5em; }

.startingMessage.error h2 {
	background: #f44336;
	color: #fff; }

.startingMessage p {
	margin: 1vw 0;
	text-transform: none; }

/* Barre d'outils
 * -------------------------------------------------------------------------- */
[class^="toolbar-"] {
	position: absolute;
	z-index: 1000;
	top: .5vw;
	left: .75vw;
	right: .75vw;
	height: 4vw;
	white-space: nowrap; }

.toolbar-2 {
	z-index: 999;
	top: 5vw; }

.toolbar-3 {
	z-index: 998;
	top: 9.5vw; }

/* Sélecteur de kits
 * -------------------------------------------------------------------------- */
#kits-selector {
	position: absolute;
	left: 0;
	width: 42vw;
    height: 4vw; }

#kits-selector .kit {
	position: relative;
	display: inline-block;
    width: 4vw;
    height: 4vw;
	margin-right: .5vw;
	text-align: center; }

#kits-selector .kit, #kits-selector .kit * {
	cursor: pointer; }

#kits-selector .kit .title {
	position: absolute;
	bottom: 55%;
	width: 100%;
	margin: 0;
	line-height: 1em;
	font-size: 1.2vw;
	font-weight: normal;
	color: #000;
	background: #fff; }

#kits-selector .kit .name {
	position: absolute;
	top: 40%;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .85vw;
	line-height: 2.5;
	padding: 0 2%; }

#kits-selector .kit.show {
	color: #000;
	background: #fff; }

/* Sélecteur de sons
 * -------------------------------------------------------------------------- */
#sounds-selector {
	position: absolute;
	left: 0; }

#sounds-selector .kit {
	position: absolute;
    height: 0;
	overflow: hidden; }

#sounds-selector .kit.show {
	height: 4vw;
	overflow: visible; }

#sounds-selector .sound {
	position: relative;
	display: inline-block;
    width: 4vw;
    height: 4vw;
	margin-right: .5vw;
	text-align: center;
	animation-fill-mode: both;
	animation-duration: .25s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	backface-visibility: hidden; }

#sounds-selector .sound:last-child {
	margin-right: 0; }

#sounds-selector .sound, #sounds-selector .sound * {
	cursor: pointer; }

#sounds-selector .sound .box {
	position: absolute;
	z-index: 0;
    width: 100%;
    height: 100%;
	font-size: 1.2vw;
	transition: transform .25s; }

#sounds-selector .sound .box:before {
	position: absolute;
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	background: transparent; }

#sounds-selector .sound .name {
	position: absolute;
	display: block;
	white-space: normal;
	width: 100%;
	top: auto;
	bottom: 0;
	padding: .25vw .1vw;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1vw;
	font-size: 1.2vw; }

#sounds-selector .sound.onPanDown {
	animation-duration: 1s;
	animation-name: wobble; }

#sounds-selector .sound.onPanDown .box {
	transform: translateY(50%); }

/* Chargement d'un son */
#sounds-selector .sound.loading, #sounds-selector .sound.loading * {
	cursor: wait; }

#sounds-selector .sound.loading .box:before {
	background: #fff; }

#sounds-selector .sound.loading:after {
	position: absolute;
	z-index: 3;
	display: block;
	content: "";
	left: 8%;
	right: 8%;
	height: 8%;
	top: 8%;
	background-image: linear-gradient(
		90deg, rgba(0, 0, 0, .75) 25%,
		transparent 25%,
		transparent 50%,
		rgba(0, 0, 0, .75) 50%,
		rgba(0, 0, 0, .75) 75%,
		transparent 75%, transparent
	);
	background-size: 20px 20px;
	animation: loading .5s linear infinite; }

#sounds-selector .sound.loadingSuccess .box:before, #sounds-selector .sound.loadingError .box:before {
	transition: background 1s; }

#sounds-selector .sound.loading .name {
	text-shadow: none !important;
	color: #000 !important; }

#sounds-selector .sound.loadingSuccess .name, #sounds-selector .sound.loadingError .name {
	transition: opacity .5s, color .5s, text-shadow .5s; }

#sounds-selector .sound.loadingError:before, #sounds-selector .sound.loadingError:after {
	position: absolute;
	top: 10%;
	left: 50%;
	content: "";
	height: 50%;
	width: .2vw;
	background-color: #fff; }

#sounds-selector .sound.loadingError:before {
	transform: rotate(45deg); }

#sounds-selector .sound.loadingError:after {
	transform: rotate(-45deg); }

#sounds-selector .sound.loadingError .box {
	background: none !important; }

#sounds-selector .sound.loadingError .box:before {
	background: rgba(255,255,255, .33); }

#sounds-selector .sound.loadingError .name {
	text-shadow: none !important;
	color: #fff !important; }

/* Sélecteur de beatmix
 * -------------------------------------------------------------------------- */
#beatmix-selector {
	height: 4vw;
	white-space: nowrap; }

#beatmix-selector .beatmix {
	position: relative;
	z-index: 0;
	display: block;
	float: left;
	margin-right: .5vw;
	height: 4vw;
	width: 4vw;
	white-space: nowrap;
	background: #000;
	transition: transform .25s, background .75s ease, color .75s ease, z-index .25s step-end; }

#beatmix-selector .beatmix.onPanLeft, #beatmix-selector .beatmix.onPanRight {
	transition: transform .25s, background .75s ease, color .75s ease, z-index .25s step-start; }

#beatmix-selector .beatmix:nth-child(16) {
	margin: 0; }

#beatmix-selector .beatmix:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	border: .1vw solid #fff; }

#beatmix-selector .beatmix.show {
	width: 31vw; }

#beatmix-selector .beatmix.onPanLeft:not(:first-child), #beatmix-selector .beatmix.onPanRight:not(:nth-last-child(2)) {
	z-index: 1;
	transform: scaleY(1.05) scaleX(1.05) translateX(-2vw);
	background: #000; }

#beatmix-selector .beatmix.onPanRight:not(:nth-last-child(2)) {
	transform: scaleY(1.05) scaleX(1.05) translateX(2vw); }

#beatmix-selector .beatmix:nth-child(17) {
	display: none !important; }

#beatmix-selector *[class^="beatmix-"] {
	position: relative;
	display: none;
    width: 4vw;
    height: 4vw;
	margin-right: .5vw;
	text-align: center; }

#beatmix-selector .beatmix-state, #beatmix-selector .beatmix-new {
	display: inline-block; }

#beatmix-selector .beatmix.show *[class^="beatmix-"] {
	display: inline-block; }

#beatmix-selector *[class^="beatmix-"]:last-child {
	margin: 0; }

#beatmix-selector *[class^="beatmix-"], #beatmix-selector *[class^="beatmix-"] * {
	cursor: pointer; }

#beatmix-selector *[class^="beatmix-"] .title {
	position: absolute;
	bottom: 55%;
	width: 100%;
	margin: 0;
	line-height: 1em;
	font-size: 1.2vw;
	font-weight: normal; }

#beatmix-selector *[class^="beatmix-"] .value {
    position: absolute;
    top: 45%;
    width: 100%;
    font-size: 1.75vw;
    line-height: 1; }

#beatmix-selector .beatmix-new .value {
    top: 50%;
    font-size: 1.5vw; }

#beatmix-selector .beatmix-state {
	animation-fill-mode: both;
	animation-duration: .75s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	backface-visibility: hidden; }

#beatmix-selector .onPanDown .beatmix-state {
	animation-name: wobble; }

#beatmix-selector .beatmix-state .title {
	font-weight: bold;
	bottom: 60%; }

#beatmix-selector .beatmix-state .num-beats {
	position: absolute;
	bottom: 40%;
	left: 50%;
	transform: translateX(-50%);
	font-size: .7vw; }

#beatmix-selector .beatmix-state .icon {
	position: absolute;
	display: none;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10%;
	width: 0;
	height: 1.2vw;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: .6vw 0 .6vw 1.2vw;
	transition: border-width .25s ease, border-style .25s ease; }

#beatmix-selector .beatmix.show .beatmix-state .icon {
	display: block; }

#beatmix-selector .beatmix-state .loop-remain {
	top: 55%;
    line-height: 1.2em;
	font-size: 1.4vw; }

#beatmix-selector .beatmix-state .loop-remain strong {
	font-size: 2.2vw; }

#beatmix-selector .beatmix.show .beatmix-state .loop-remain {
	display: none; }

#beatmix-selector .beatmix.play,
#beatmix-selector .beatmix.play.onPanLeft:not(:first-child), #beatmix-selector .beatmix.play.onPanRight:not(:nth-last-child(2)) {
	background: #fff;
	color: #000; }

#beatmix-selector .beatmix.play .beatmix-state .icon {
	border-color: transparent transparent transparent #000;
	border-style: double;
	border-width: 0 0 0 1.2vw; }

#beatmix-selector .beatmix.pause .beatmix-state .icon {
	border-style: solid;
	border-width: .6vw 0 .6vw 1.2vw; }

#beatmix-selector .beatmix-loop-remain strong {
	line-height: .75em;
	font-size: 2.2vw; }

#beatmix-selector .beatmix-loop .loop-state {
	display: inline-block;
	font-size: 1vw; }

#beatmix-selector[beatmix-number="1"] .beatmix.show .beatmix-loop {
	display: none; }

#beatmix-selector[beatmix-number="1"] .beatmix.show {
	width: 27vw; }

#beatmix-selector .beatmix[beatmix-volume="0"] {
	opacity: .33; }

#beatmix-selector .beatmix[beatmix-loop="0"]:before {
	border-style: dashed; }

/* beatmix
 * -------------------------------------------------------------------------- */
.beatmix .times-played {
	position: absolute;
	display: none;
	top: -.25vw;
	right: -.25vw;
	height: .7vw;
	min-width: .7vw;
	background: #fff;
	color: #000;
	font-size: .6vw;
	line-height: 1;
	text-align: center;
	padding: .05vw .20vw;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	backface-visibility: hidden; }

.beatmix .times-played.show {
	display: inline-block; }

.beatmix .mix .times-played {
	top: -6%;
	right: -6%;
	height: 18%;
	min-width: 18%; }

.beatmix .beatmixBubbleNotify { animation-name: bubbleNotify; }

/* BeatMXR
 * -------------------------------------------------------------------------- */
#beatMXR {
	position: absolute;
	z-index: 997;
	top: 13.5vw;
	width: 100%;
	bottom: 0; }

#beatMXR .beatmix {
	position: absolute;
	display: none;
	top: .5vw;
	left: .5vw;
	right: 0;
	bottom: 0; }

#beatMXR .beatmix.show {
	display: block; }

#beatMXR .beatmix .mix-scroll {
    position: absolute;
	width: 100%;
	bottom: 0; }
	
#beatMXR .beatmix .mix-scroll.show {
	overflow: hidden; }

#beatMXR .beatmix .mix-scroll-knob {
    position: absolute;
	background: #fff;
	width: .25vw;
	right: .25vw;
	opacity: 0;
	transition: opacity .5s; }

#beatMXR .beatmix .mix-content {
	position: absolute;
	width: 100%;
	top: 0; }

#beatMXR .beatmix .mix-scroll.show .mix-scroll-knob {
    opacity: 1; }

#beatMXR .beatmix[beatmix-volume="0"] {
	opacity: .33; }

#beatMXR .beatmix[beatmix-output="solo"] .mix {
	opacity: .33; }

/* Mix
 * -------------------------------------------------------------------------- */
.mix {
	position: relative;
	width: auto;
	white-space: nowrap;
	text-align: left;
	line-height: 0;
    height: 4vw; }

.mix[mix-volume="0"], .mix[mix-output="mute"] {
	opacity: .33; }

.mix[mix-output="solo"] {
	opacity: 1 !important; }

.mix:before {
	display: none;
	position: absolute;
	content: "";
	width: 100%;
	top: 0;
	bottom: 0; }

.mix.onSelect, .mix.onPanRight {
	opacity: 1 !important; }

.mix.onSelect:before, .mix.onPanRight:before {
	display: block; }

.mix.onSelect .beat[class*="volume-"],
.mix.onPanRight .beat[class*="volume-"] {
	opacity: 1 !important; }

.mix.onSelect .beat[class*="volume-"] .sound,
.mix.onPanRight .beat[class*="volume-"] .sound {
	background: #fff !important; }

.mix.onSelect .beat[class*="volume-"] .pitch,
.mix.onPanRight .beat[class*="volume-"] .pitch {
	color: #fff !important; }

.mix .config {
	position: absolute;
	top: 0;
	left: 0;
    width: 4vw;
    height: 4vw;
    margin: 0;
	line-height: .9; }

.mix .config, .mix .config * {
	cursor: pointer; }

.mix .config .box {
	position: absolute;
	z-index: 0;
    width: 100%;
    height: 100%;
	font-size: 1.2vw; }

.mix .config .text {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%); }

.mix .config.label {
	animation-fill-mode: both;
	animation-duration: .75s;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;
	backface-visibility: hidden; }

/* label */
.mix .config.label .sound {
	height: 25%;
	transform: translateZ(0);
	background: #fff; }

.mix .config.label .text {
	top: 30%;
	left: 0;
	right: 0;
	transform: translateX(0%);
	font-size: .4em;
	line-height: 1;
	text-align: right;
	padding-right: 3%;
	overflow: hidden;
	text-overflow: ellipsis; }

/* animation avant de supprimer */
.mix.onPanRight .config.label {
	animation-name: wobble; }

/* volume/beats */
.mix .config.volume .text, .mix .config.size .text {
	text-align: center;
	transform: translateX(-50%) translateY(-50%); }

.mix .config.volume .title, .mix .config.size .title {
	font-size: .4em; }

.mix .config.volume .value, .mix .config.size .value {
	font-size: .85em; }

.mix.template .config,
.mix.template .beat,
.mix.template .beat[class*="volume-"] {
	opacity: .75; }

.mix [class*="output-"] {
	position: absolute;
	display: none;
	top: 4%;
	left: 4%;
	height: 17%;
	background: #000;
	color: #fff;
	font-size: .4vw;
	line-height: 1;
	overflow: hidden;
	padding: .1vw .2vw; }

.mix[mix-output="mute"] .output-mute,
.mix[mix-output="solo"] .output-solo {
	display: inline-block; }

.beatmix .mix .mixBubbleNotify { animation-name: bubbleNotify; }
.beatmix.inanimate .mix .mixBubbleNotify, .beatmix.inanimate .mix .beat { animation-duration: 0s !important; }

/* Beat & Box ;)
 * -------------------------------------------------------------------------- */
.beat {
	position: relative;
	display: inline-block;
    width: 4vw;
    height: 4vw;
    margin: 0;
	line-height: .9;
	animation-fill-mode: both;
	animation-duration: .5s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
	animation-name: beatShow;
	opacity: .25; }

/*.mix .beat:nth-of-type(4n+1) {
    opacity: .5; }*/

.beat, .beat * {
	cursor: pointer; }

.beat .margin {
	position: relative;
    height: 100%; }

.beat .pannerBox, .beat .pitchBox {
	position: absolute;
	z-index: 0;
    width: 100%;
    height: 100%;
	transition: transform .25s; }

.beat .pitchBox {
	background: #fff; }

.beat .sound {
	position: absolute;
	z-index: 0;
    width: 100%;
    height: 100%;
	background: #000;
	transform-origin: center center;
	transform: translateZ(0); }

.mix .beat[class*="volume-"] {
	opacity: 1; }

.beat[class*="volume-"] .pitchBox {
	background: none; }

.beat[class*="volume-"] .sound {
	transition: transform .25s;
	background: #fff; }

/* pitch */
.beat .pitch {
	display: inline-block;
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50%;
	line-height: .9;
	text-align: center;
	transform: scaleX(0) translateY(-50%);
	transition: transform .25s; }

.beat.pitchUp .pitch {
	transform: scaleX(1) translateY(15%); }

.beat.pitchDown .pitch {
	transform: scaleX(1) translateY(-115%); }

/* panner de base */
.beat.pannerLeft .pannerBox {
	transform: scaleX(.5) translateX(-50%); }

.beat.pannerRight .pannerBox {
	transform: scaleX(.5) translateX(50%); }

/* pitch de base */
.beat.pitchDown .pitchBox {
	transform: scaleY(.5) translateY(50%); }

.beat.pitchUp .pitchBox {
	transform: scaleY(.5) translateY(-50%); }

/* déplacement de base */
.beat.onPanUp .pitchBox {
	transform: scaleY(.5) translateY(-50%); }

.beat.onPanDown .pitchBox {
	transform: scaleY(.5) translateY(50%); }

.beat.onPanLeft .pannerBox {
	transform: scaleX(.5) translateX(-50%); }

.beat.onPanRight .pannerBox {
	transform: scaleX(.5) translateX(50%); }

/* déplacement avec un pitch déjà présent */
.beat.pitchUp.onPanUp .pitchBox {
	transform: scaleY(.25) translateY(-150%); }

.beat.pitchDown.onPanDown .pitchBox {
	transform: scaleY(.25) translateY(150%); }

.beat.pitchDown.onPanUp .pitchBox,
.beat.pitchUp.onPanDown .pitchBox {
	transform: scaleY(.5) translateY(0); }

/* déplacement avec un panner déjà présent */
.beat.pannerRight.onPanLeft .pannerBox {
	transform: scaleX(1) translateX(0); }

.beat.pannerLeft.onPanRight .pannerBox {
	transform: scaleX(1) translateX(0); }

/* Animations
 * -------------------------------------------------------------------------- */
@keyframes loading {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

@keyframes wobble {
	0% { transform: skewX(0deg) skewY(0); }
	20%, 40%, 60%, 80%, 100% { transform: skewX(-2deg) skewY(2deg); }
	10%, 30%, 50%, 70%, 90% { transform: skewX(2deg) skewY(-2deg); }
}
.wobble { animation-name: wobble; }

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}
.pulse { animation-name: pulse; }

@keyframes bubbleNotify {
	0%, 10%, 30%, 70%, 100% { transform: translateY(0); }
	20% { transform: translateY(-30%); }
	50% { transform: translateY(-15%); }
}

@keyframes beatShow {
	0% { transform: scale(0); }
	75% { transform: scale(1.1); }
	100% { transform: scale(1); }
}