/* !1.0 Reset */
html { -webkit-text-size-adjust: 100%; }
html, body { padding: 0; margin: 0; height: 100%; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
* { outline: none; }
img { border: none; }


/* !1.2 Clear Fix */
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.clearfix { zoom: 1; }


/* !1.3 Forms */
input.input { box-sizing: border-box; padding: 5px 10px; height: 30px; background: #fff; border: 0 none; color: #231f20; font-family: 'Open Sans', arial, sans-serif; font-size: 1em; }
.button { 
	display: block; 
	margin: 0 auto; 
	width: 125px; 
	height: 30px; 
	background: #231f20; 
	box-sizing: border-box; 
	padding: 5px 8px; 
	border: 0 none; 
	border-radius: 4px; 
	font-family: 'Open Sans Condensed'; 
	font-size: .875em; 
	font-weight: 700; 
	color: #d1d2d4; 
	text-align: center; 
	text-transform: uppercase; 
	text-decoration: none; 
	line-height: 100%; 
	letter-spacing: 3px; 
	cursor: pointer; 
	position: relative; 
	margin-top: 15px; 
	transition: all 200ms;
	-webkit-transition: all 200ms;
}
a.button { padding: 8px; }
.button::after { content: ""; display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 32px solid #d1d2d4; margin-left: 20px; -webkit-transition: all 200ms;transition: all 200ms; }
.button::before { content: ""; position: absolute; left: -5px; top: -5px; width: calc(100% + 6px); height: calc(100% + 6px); border: 2px solid #fff; border-radius: 6px; -webkit-transition: all 200ms;transition: all 200ms; }
.button:hover { background: #fff; color: #231f20; }
.button:hover::after { border-left: 32px solid #231f20; }
/*.button:hover::before { border-color: #231f20; }*/

.btn-large {
	width: 150px; 
	height: 44px; 
	padding: 12px 10px; 
	font-size: 1.25em; 
	font-weight: 300; 
	color: #fff; 
}
.btn-large::after { border-top: 8px solid transparent; border-left: 36px solid #fff; border-bottom: 8px solid transparent; }
.btn-large:hover { background: #fff; }
.btn-large:hover::after { border-left: 36px solid #231f20; }


.btn-no-border::before { content: none; display: none; }

button.icon::after { content: ""; display: none; }
button.icon .icon-rewind { display: inline-block; position: relative; padding-left: 42px; }
button.icon .icon-rewind::before { content: ""; width: 0; height: 0; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 14px solid #d1d2d4; -webkit-transition: all 200ms;transition: all 200ms; }
button.icon .icon-rewind::after { content: ""; width: 0; height: 0; position: absolute; left: 14px; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 14px solid #d1d2d4; -webkit-transition: all 200ms;transition: all 200ms; }
button.icon:hover .icon-rewind::before { border-right: 14px solid #231f20; }
button.icon:hover .icon-rewind::after { border-right: 14px solid #231f20; }

.btn-reset::hover { background: #d1d2d4; width: 150px; }


/* !1.4 Default */
body { font-family: 'Open Sans', arial, sans-serif; font-size: 16px; color: #231f20; background: #fff; width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', arial, sans-serif; color: #231f20; }
p { margin: 0 0 15px; }
a { color: #F05939; }

.logo { position: relative; display: block; }
.logo img { max-width: 100%; }
.logo .default { opacity: 1; -webkit-transition: all 200ms;transition: all 200ms; }
.logo .roll { position: absolute; left: 0px; top: 0; opacity: 0; -webkit-transition: all 200ms;transition: all 200ms; }
.logo:hover .default { opacity: 0; }
.logo:hover .roll { opacity: 1; }


/* 2.1 Header */
.header { position: absolute; left: 0; top: -40px; width: 100%; height: 50px; background: #fff; box-shadow: 0 1px 14px 1px rgba(0,0,0,0.2); z-index: 100; -webkit-transition: all 200ms;transition: all 200ms; }
.header .logo { display: none; }
.header .title { position: absolute; top: 13px; left: 15px; letter-spacing: 0; width: auto; margin: 0; line-height: 100%; font-family: 'Just Me Again Down Here'; font-size: 1.5em; color: #231f20; text-align: center; text-transform: uppercase; font-weight: 300; }
.header .share-icons { position: absolute; right: 15px; top: 15px; }
.share-icons { margin: 0; list-style: none; padding: 0; }
.share-icons li { display: inline-block; margin: 0 5px; }
.share-icons li a { display: block; width: 24px; height: 24px; background: #f05a72; color: #fff; border-radius: 30px; position: relative; -webkit-transition: all 200ms;transition: all 200ms; }
.share-icons li a:hover { background: #231f20; }
.share-icons li a .fa { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); }

.header .open { position: absolute; left: 50%; bottom: -46px; width: 82px; height: 47px; -webkit-transform: translateX(-50%);transform: translateX(-50%); background: url(../images/down.svg); }
.header .open .fa-heart { position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); top: 4px; color: #f05a72; }

.header-open { top: 0px; }


/* !2.2 Loading */
.loader-wrapper { width: 100%; height: 100%; background: #f04e37; position: absolute; }
.loading { height: 36px; width: 32px; text-align: center; margin: 100px auto 20px; display: block; vertical-align: top; position: relative; }
.loading .bar { background: #FF6700; position: absolute; opacity: 0.2; bottom: 0px; left: 0px; height: 30%; width: 22%; animation-name: loader; animation-duration: 1s; animation-iteration-count: infinite; }
.loading .bar2 { left: 39%; animation-delay: 0.3s; }
.loading .bar3 { left: 77%; animation-delay: 0.5s; }

@keyframes loader {
	0%   { opacity: 0.2; height: 20%; }
	50%  { opacity: 1; height: 100%; }
	100% { opacity: 0.2; height: 20%; }
}


/* !3.0 Intro */
.intro { background: #f04e37; width: 100%; height: 100vh; display: block; overflow: hidden; }
.intro .message { position: fixed; left: 0; bottom: 0; margin: 0; width: 100%; height: 0px; box-sizing: border-box; background: #fff; box-shadow: 0 -1px 14px 1px rgba(0,0,0,0.2); color: #ed135a; text-align: center; -webkit-transition: all 200ms;transition: all 200ms; z-index: 1000; }
.intro .message-open { height: 90px; padding: 10px 15px; }
.intro .content { width: 300px; margin: 0 auto; padding-top: 50px; }
.intro .content .tape { position: relative; }
.intro .content .tape img { max-width: 300px; position: relative; z-index: 2; }
.intro .content .tape .anim { position: absolute; left: 0; top: 0; z-index: 3; }
.intro .content .tape::after { content: ""; background: url(../images/shadow.svg) no-repeat; background-size: contain; width: 954px; height: 1050px; position: absolute; left: 30px; top: 11px; z-index: 1; }
.intro .content .intro-text { font-family: 'Just Me Again Down Here'; padding: 0 10px; font-size: 1.875em; text-align: center; color: #231f20; line-height: 100%; }
.intro .content .intro-text,
.intro .content .button { position: relative; z-index: 4; }
.intro .content .button { margin-top: 20px; }


/* !4.0 Mixer */
.mixer-container { width: 100%; height: 100%; min-height: 100vh; overflow: hidden; -webkit-transition: all 200ms;transition: all 200ms; position: relative; }
.mixer-container .skiptotheend { position: absolute; left: 20px; top: 20px;  }
.step-1,
.step-8 { background: #f29c1f; }
.step-2,
.step-9,
.step-12 { background: #f04e37; }
.step-3,
.step-10 { background: #f05a72; }
.step-4,
.step-11 { background: #b4e1e5; }
.step-5 { background: #c4db6f; }
.step-6 { background: #a8c238; }
.step-7 { background: #efc319; }

/* !4.1 Questions */
.search { display: block; width: 300px; height: 300px; margin: 0 auto; padding: 130px 0 35px; }
.search .questions { width: 300px; height: 210px; background: url(../images/tape-case.svg) no-repeat; background-size: contain; position: relative; z-index: 2; }
.search .questions::after { content: ""; background: url(../images/shadow.svg) no-repeat; background-size: contain; width: 1070px; height: 1134px; position: absolute; left: 8px; top: 11px; z-index: 1; }
.search .questions .question { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; }
.search .questions .question label { display: block; position: absolute; left: 30px; top: 30px; width: calc(100% - 60px); font-family: 'Just Me Again Down Here'; font-size: 1.5em; color: #231f20; text-align: center; line-height: 100%; text-align: center; }
.search .questions .question .input { display: block; width: 170px; position: absolute; left: 10px; bottom: 10px; border-radius: 5px 0 0 5px; }
.search .questions .question .find { position: absolute; right: 10px; bottom: 10px; margin: 0; height: 30px; border-radius: 0 5px 5px 0; padding: 5px 8px; width: 110px; }
.search .questions .question .find:hover { background: #d1d2d4; }

.search .questions .q-progress { position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); top: -50px; width: 290px; height: 16px; }
.search .questions .q-progress::before { content: ""; position: absolute; left: -4px; top: -4px; width: calc(100% + 4px); height: calc(100% + 4px); border: 2px solid #fff; border-radius: 6px; }
.search .questions .q-progress .progress-bar { position: absolute; left: 0; min-width: 1%; max-width: 100%; height: 100%; background: #231f20; border-radius: 4px; -webkit-transition: all 200ms;transition: all 200ms; }

.search .questions .question .navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); top: 230px; width: 90%; }
/* .search .questions .question .next { display: none; opacity: 0; -webkit-transition: opacity 200ms;transition: opacity 200ms; } */
.search .questions .q-1 .next { display: none; opacity: 0; -webkit-transition: opacity 200ms;transition: opacity 200ms; }
.search .questions .question .nav-show { display: block; opacity: 1; }
.search .questions .question .navigation .button { position: absolute; left: 0; top: 0; margin: 0; }
.search .questions .question .navigation .next,
.search .questions .question .navigation .finish { left: auto; right: 0; }

/* !4.2 Tracks */
.track-container { width: 98%; background: #fff; position: absolute; left: -100%; top: 55px; border-radius: 0 10px 10px 0; box-shadow: 0 0 14px 0 rgba(0,0,0,0.2); overflow: hidden; -webkit-transition: all 200ms;transition: all 200ms; z-index: 10; }
.track-container .close { position: absolute; right: 15px; top: 18px; background: #fff; border-radius: 16px; width: 24px; height: 24px; }
.track-container .close::before { content: "\f060"; font-family: FontAwesome; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); }
.track-container-show { left: 0px; }
.track-container .intro { background: #231f20; color: #d1d2d4; width: 100%; height: 54px; padding: 12px 40px 10px 20px; line-height: 110%; box-sizing: border-box; font-size: 1em; margin-bottom: 0; }
.track-container .tracks { list-style: none; height: 250px; overflow-y: scroll; padding: 0 14px; position: relative; margin: 2px 0 10px; }
.track-container .tracks .track { padding: 5px 10px; border-bottom: 1px solid #eaeaea; min-height: 38px; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; position: relative; }
.track-container .tracks .track:hover { background: #eaeaea; }
.track-container .tracks .track .image { width: 40px; height: 40px; float: left; margin-right: 10px; position: relative; cursor: pointer; }
.track-container .tracks .track .image img { max-width: 100%; height: auto; max-height: 100%; display: block; margin: 0 auto; }
.track-container .tracks .track .image::before { content: ""; display: block; background: rgba(0,0,0,0.4); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0.4; -webkit-transition: all 200ms;transition: all 200ms; }
.track-container .tracks .track .image::after { content: "\f144"; font-family: FontAwesome; font-size: 1.86em; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); opacity: 0.6; -webkit-transition: all 200ms;transition: all 200ms; color: #f05a72; }
.track-container .tracks .track .image:hover::before { opacity: 1; }
.track-container .tracks .track .image:hover::after { opacity: 1; }
.track-container .tracks .track .image-pause::before { opacity: 0.5; }
.track-container .tracks .track .image-pause::after { content: "\f28b"; font-family: FontAwesome; opacity: 0.8; }
.track-container .tracks .track .add { position: absolute; right: 6px; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); opacity: 0.5; -webkit-transition: all 200ms;transition: all 200ms; cursor: pointer; font-size: 1.625em; color: #f05a72; } 
.track-container .tracks .track .add .fa { padding: 1px; }
.track-container .tracks .track .add:hover { opacity: 1; }
.track-container .tracks .added .add { opacity: 1; }
.track-container .tracks .added .add .fa::before { content: "\f058"; }

.track-container .tracks .track .info { display: inline-block; width: calc(100% - 85px); position: relative; padding: 2px 0 0 0; line-height: 100%; }
.track-container .tracks .track .title { display: block; font-size: 0.875em; font-weight: bold; line-height: 120%; max-width: 80%; }
.track-container .tracks .track .album { display: none; font-size: .75em; margin-right: 15px; }
.track-container .tracks .track .artist { display: inline-block; font-size: .75em; }
.track-container .tracks .track .time { position: absolute; right: 0px; top: 3px; font-size: 0.75em; font-weight: bold; }

.search-container .intro::after { content: "(Select from below)"; font-size: .75em; display: inline; padding-left: 10px; }

.playlist-container { position: absolute; top: 100%; left: 50%; width: 100%; padding-bottom: 40px; margin: 0; border-radius: 0; -webkit-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0); }
.playlist-container-show { -webkit-transform: translateX(-50%) translateY(-100%);transform: translateX(-50%) translateY(-100%); }
.playlist-container .expand { position: absolute; right: 10px; top: 25px; background: #fff; border-radius: 24px; width: 24px; height: 24px; }
.playlist-container .expand::before { content: ""; width: 16px; height: 2px; display: block; background: #231f20; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); -webkit-transition: all 200ms;transition: all 200ms; }
.playlist-container .expand::after { content: ""; width: 2px; height: 16px; display: block; background: #231f20; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); -webkit-transition: all 200ms;transition: all 200ms; }
.playlist-container-expanded .expand::before { -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);transform: translateX(-50%) translateY(-50%) rotate(180deg); }
.playlist-container-expanded .expand::after { -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);transform: translateX(-50%) translateY(-50%) rotate(180deg); opacity: 0; }
.playlist-container .close { top: 9px; -webkit-transition: all 200ms;transition: all 200ms; }
.playlist-container .close::before { content: "\f063"; }
.playlist-container .intro { display: flex; align-items: center; padding: 12px 20px 10px; height: 42px; }
.playlist-container .tracks .track .image { margin-left: 28px; }
.playlist-container .tracks .track .info { width: calc(100% - 100px); }
.playlist-container .tracks .track .remove { position: absolute; left: 6px; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); opacity: 0.5; -webkit-transition: all 200ms;transition: all 200ms; cursor: pointer; font-size: 1.625em; color: #f05a72; }
.playlist-container .tracks .track .remove:hover { opacity: 1; }
.playlist-container .tracks .track .handle { position: absolute; right: 2px; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); cursor: pointer; font-size: 1.25em; color: #ccc; }
.playlist-container .add-more { display: none; }

.playlist-finished { position: absolute; width: 300px; top: 50px; left: 50%; -webkit-transform: translateX(-50%) translateY(0);transform: translateX(-50%) translateY(0); padding-bottom: 0; border-radius: 10px; }
.playlist-finished .expand { display: none; }
.playlist-finished .intro { text-align: center; display: block; height: 54px; }
.playlist-finished .intro::after { content: "Drag and drop to reorder and complete"; font-size: .75em; display: block; padding-left: 10px; }
.playlist-finished .tracks { height: 180px; margin: 5px 0 10px; }
.playlist-finished .tracks .track { padding: 5px; }
.playlist-finished .close { display: none; }
.playlist-finished .add-more { display: block; width: 100%; background: #231f20; text-align: center; font-size: 0.875em; line-height: 100%; color: #fff; padding: 6px 0; -webkit-transition: all 200ms; transition: all 200ms; }

/* !4.3 Share */
.mixer-container .share { position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); top: 330px; width: 300px; text-align: center; }
.mixer-container .share .share-text { font-size: 1em; margin-bottom: 0; line-height: 110%; }
.mixer-container .share .button { margin-top: 10px; }



/* !5.0 Info Popup */
.info-wrap { position: fixed; bottom: 0; right: 0; width: 100%; height: 38px; box-shadow: 0 0 14px rgba(0,0,0,0.2); background: #fff; z-index: 100; }
.info-wrap .logo { position: absolute; left: 15px; top: 5px; width: 70px; }
.info-button { position: absolute; bottom: 8px; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); width: 12px; height: 12px; border-radius: 18px; border: 6px solid #231f20; -webkit-transition: all 200ms;transition: all 200ms; }
.info-button .fa { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); font-size: 1em; color: #231f20; -webkit-transition: all 200ms;transition: all 200ms; }
.info-button:hover { border-color: #f05a72; }
.info-button:hover .fa { color: #f05a72; }
.info-message { position: fixed; left: 0; bottom: 0; width: 100%; height: 0%; background: #fff; color: #231f20; box-shadow: none; -webkit-transition: all 200ms;transition: all 200ms; z-index: 100; }
.info-message .info-message-content { margin: 35px 20px 0 30px; padding-right: 10px; height: calc(100% - 70px); overflow-y: scroll; }
.info-message .info-message-content .content-wrapper { padding-bottom: 50px; }
.info-message .info-message-content p { font-weight: 300; }
.info-message .info-message-content h2 { font-size: 1em; }

.info-message .close { position: absolute; right: 10px; top: 10px; font-size: 1.5625em; cursor: pointer; -webkit-transition: all 200ms;transition: all 200ms; }
.info-message .close:hover { color: #d1d2d4; }
.info-message-open { height: 50%; box-shadow: 0 0px 14px 1px rgba(0,0,0,0.2); }
.info-message-open .info-message-content::after { content: "\f078"; font-family: FontAwesome; position: absolute; left: 50%; -webkit-transform: translateX(-50%);transform: translateX(-50%); bottom: 6px; opacity: 1; -webkit-transition: all 200ms;transition: all 200ms; }
.full-scroll .info-message-content::after { opacity: 0; }

.info-wrap .playlist-button { position: absolute; right: 10px; bottom: 7px; display: none; opacity: 0; transition: opacity 200ms; color: #f05a72; height: 18px; line-height: 18px; padding: 2px 10px 2px 6px; border: 1px solid #f05a72; border-radius: 18px; }
.info-wrap .playlist-button .count { font-size: .875em; font-weight: 700; line-height: 100%; width: 18px; display: inline-block; position: relative; top: -1px; text-align: center; }
.info-wrap .playlist-button .fa {  }
.info-wrap .playlist-button-show { display: block; opacity: 1; }


/* !6.0 Error Popup */
#error-popup { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(240, 78, 55, 0.8); z-index: 1000; display: none; }
#error-popup .popup { position: absolute; width: 90%; min-height: 100px; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); box-sizing: border-box; padding: 40px 50px; background: #fff; box-shadow: 0 1px 14px rgba(0,0,0,0.2); z-index: 1001; display: none; }
#error-popup .popup .popup-close { position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; background: #fff url(../images/icon-close.svg) 50% 50% no-repeat; background-size: 28px 28px; border-radius: 30px; z-index: 1002; cursor: pointer; }


@media screen and (min-width: 375px) {
    .intro .content { padding-top: 70px; }

    .playlist-finished .tracks { height: 260px; }
    .mixer-container .share { top: 412px; }
    .mixer-container .share .button { margin-top: 15px; }
}


@media screen and (min-width: 560px) {
	.header { top: -40px; height: 50px; }
	.header .title { font-size: 1.75em; top: 10px; }
	.header .share-icons { right: 25px; top: 12px; }
	.header-open { top: 0px; }
}