@charset "UTF-8";

/********** Essential Audio Player CSS **********/



/****************************************/
/*                                      */
/*         Section 1: The Looks         */
/*                                      */
/****************************************/


/* 2.b) The Player Button – Loading */
div.essential_audio > div:nth-child(1) div.load:after {
	animation: audio_load_rotate 1s infinite linear;
}
@keyframes audio_load_rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}





/****************************************/
/*                                      */
/*        Section 2: Core Values        */
/*                                      */
/****************************************/


/* 1. The Main Container */
div.essential_audio {
	position: relative;
	z-index: 0;
}
div.essential_audio,
div.essential_audio * {
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-overflow-scrolling: auto;
}
div.essential_audio *:focus {
	outline: none;
}


/* 2. The Player Button */
div.essential_audio > div:nth-child(1) div {
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
}
div.essential_audio > div:nth-child(1) div:after {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

/* 2.a) Container for Player Button */
div.essential_audio > div:nth-child(1) {
	position: absolute;
	z-index: 3;
	height: 0px;
	top: 0px;
}


/* 3. The Track */
div.essential_audio > div:nth-child(2) {
	position: relative;
	width: 100%;
	overflow: hidden;
}


/* 4. The Loading Progress Bar */
div.essential_audio > div:nth-child(2) div {
	position: absolute;
	z-index: 1;
	width: 0%;
	height: 100%;
	top: 0px;
	left: 0px;
	transition: width 0.5s;
}


/* 5. The Klick & Drag Sensor */
div.essential_audio > div:nth-child(3) {
	position: absolute;
	z-index: 2;
	width: 100%;
	top: 0px;
	left: 0px;
}