/* !1.4 Default */
body { height: 100%; overflow: hidden; }


/* 2.1 Header */
.header { top: -90px; height: 100px; }
.header .logo { display: block; width: 191px; float: left; margin: 30px 0 0 25px; }
.header .title { top: 30px; left: 50%; transform: translateX(-50%); width: 400px; font-size: 2.375em; }
.header .share-icons { right: 25px; top: 32px; }
.share-icons li a { width: 30px; height: 30px; }
.header-open { top: 0px; }


/* !3.0 Intro */
.intro .message { height: 0px; }
.intro .message-open { height: 50px; padding: 10px; }
.intro .content { width: 450px; margin: 0 auto; padding-top: 6%; }
.intro .content .tape img { max-width: 450px; position: relative; z-index: 2; }
.intro .content .tape::after { width: 1450px; height: 1580px; }
.intro .content .intro-text { font-size: 2.5em; padding: 0; }


/* !4.0 Mixer */
.mixer-container { position: absolute; left: 0; top: 0; min-height: 100%;}

/* !4.2 Tracks */
.track-container { width: 320px; position: absolute; left: -320px; top: 75px; border-radius: 0 10px 10px 0; }
.track-container-show { left: 0px; }
.track-container .intro { height: 78px; padding: 22px 26px; line-height: 120%; }
.track-container .close { top: 25px; }
.track-container .tracks { height: 380px; margin: 5px 0 10px; }
.track-container .tracks .track .image:before { opacity: 0; }
.track-container .tracks .track .image:after { opacity: 0; }
.track-container .tracks .track:hover .image:before { opacity: 0.5; }
.track-container .tracks .track:hover .image:after { opacity: 0.7; }

.playlist-container { position: absolute; left: auto; right: -320px; -webkit-transform: translateX(0);transform: translateX(0); border-radius: 10px 0 0 10px; padding-bottom: 0; }
.playlist-container .expand { display: none; }
.playlist-container .close { display: none; }
.playlist-container-show { right: 0px; }

.playlist-finished { width: 350px; top: 70px; right: calc(50% - 175px); border-radius: 10px; }
.playlist-finished .tracks { height: 340px; }
.playlist-finished .tracks .track { padding: 5px 10px; }

/* !4.3 Share */
.mixer-container .share { top: 540px; width: 320px; }


/* !5.0 Info Popup */
.info-wrap { position: static; bottom: 0; right: 0; width: 100%; height: 0; box-shadow: none; background: transparent; }
.info-wrap .logo { display: none; }
.info-button { position: fixed; bottom: 15px; left: auto; -webkit-transform: translateX(0);transform: translateX(0); right: 15px; width: 38px; height: 38px; border-radius: 38px; z-index: 1000; }
.info-button { bottom: 20px; right: 25px; }
.info-button:hover { border-color: #fff; }
.info-button:hover .fa { color: #fff; }
.info-button .fa { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%); font-size: 3em; color: #231f20; -webkit-transition: all 200ms;transition: all 200ms; }
.info-message { position: absolute; left: 9%; bottom: 0; width: 82%; height: 0%; box-shadow: none; overflow: hidden; }
.info-message .info-message-content { margin: 60px 60px 0 75px; padding-right: 15px; height: calc(100% - 95px); }
.info-message .close { right: 26px; top: 26px; }
.info-message-open { height: 50%; box-shadow: 0 0px 14px 1px rgba(0,0,0,0.2); }

.info-wrap .playlist-button { display: none; }


/* !6.0 Error Popup */
#error-popup .popup { position: absolute; width: 600px; }


@media screen and (min-width: 1060px) {
	/* !1.3 Forms */
	input.input { padding: 10px 12px; height: 42px; }
	.button { width: 140px; height: 34px; margin-top: 26px; }
	a.button { padding: 10px 8px; }
	.btn-large { width: 150px; height: 44px; }
    button.icon .icon-rewind { display: inline-block; position: relative; padding-left: 78px; }
    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: 32px solid #d1d2d4; -webkit-transition: all 200ms;transition: all 200ms; }
    button.icon .icon-rewind::after { content: ""; width: 0; height: 0; position: absolute; left: 34px; top: 50%; -webkit-transform: translateY(-50%);transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 32px solid #d1d2d4; -webkit-transition: all 200ms;transition: all 200ms; }
    button.icon:hover .icon-rewind::before { border-right: 32px solid #231f20; }
    button.icon:hover .icon-rewind::after { border-right: 32px solid #231f20; }


	/* !4.1 Questions */
	.search { padding-top: 160px; width: 410px; height: 285px; }
	.search .questions { width: 410px; height: 285px; }
	.search .questions::after { width: 1490px; height: 1580px; left: 3px; }
	.search .questions .question label { left: 40px; top: 40px; width: calc(100% - 80px); font-size: 1.875em; line-height: 110%; }
	.search .questions .question .input { width: 272px; left: 11px; bottom: 11px; }
	.search .questions .question .find { right: 11px; bottom: 11px; height: 42px; padding: 10px 8px; width: 120px; }
	.search .questions .q-progress { width: 296px; }
	.search .questions .question .navigation { top: 330px; width: 80%; }

	/* !5.0 Info Popup */
	.info-message { left: 7.45%; width: 85.1%; }
}