html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=d9e2083d-58ee-4e5f-9770-e131147dbf47");
@font-face {
	font-family: "AlternateGothicW01-No2_691799";
	src: url("Fonts/694d9d39-2113-4431-b278-0ea3d7a2b062.eot?#iefix");
	src: url("Fonts/694d9d39-2113-4431-b278-0ea3d7a2b062.eot?#iefix") format("eot"), url("Fonts/f1eb2374-55e9-44b1-97ed-88e2d775671a.woff2") format("woff2"), url("Fonts/2fc75594-a7bb-4e8f-ad81-b7e8ddeb0435.woff") 	format("woff"), url("Fonts/a7e5a390-5440-4b7f-9500-9bd0b8dde16a.ttf") format("truetype"), url("Fonts/9036ea97-77a0-44a0-bbc9-64d2733c9484.svg#9036ea97-77a0-44a0-bbc9-64d2733c9484") format("svg");
}
@font-face {
	font-family: "DINNextW01-CondensedMed";
	src: url("Fonts/0b46a18d-fb34-4ef7-b5da-5902c510577a.eot?#iefix");
	src: url("Fonts/0b46a18d-fb34-4ef7-b5da-5902c510577a.eot?#iefix") format("eot"), url("Fonts/76b8cda6-0ded-4197-acab-e314297eb90f.woff2") format("woff2"), url("Fonts/2613a064-2962-44af-ae6f-3640e06e8dc4.woff") 	format("woff"), url("Fonts/2889b152-497e-4ea3-a90d-02854d136a8d.ttf") format("truetype"), url("Fonts/4f311da1-9ec6-4379-9621-b45be0e23abd.svg#4f311da1-9ec6-4379-9621-b45be0e23abd") format("svg");
}
@font-face {
	font-family: "DINNextW01-CondensedBol";
	src: url("Fonts/71888b4d-cd66-4c8b-9a5c-b37014e8e4fa.eot?#iefix");
	src: url("Fonts/71888b4d-cd66-4c8b-9a5c-b37014e8e4fa.eot?#iefix") format("eot"), url("Fonts/258804c2-9ca6-4856-bad7-67cde4f087b4.woff2") format("woff2"), url("Fonts/0c0418fe-d324-4ab2-978a-e8201c646ca1.woff") 	format("woff"), url("Fonts/2c4f6a99-1274-42cd-8d14-fecf6ae449a4.ttf") format("truetype"), url("Fonts/aabfdee7-da54-4fae-93d3-afae95449faa.svg#aabfdee7-da54-4fae-93d3-afae95449faa") format("svg");
}
@font-face {
	font-family: "FranklinGothicW01-Extra1119827";
	src: url("Fonts/64e32c5e-c922-47ce-a2fe-cacfb07e8343.eot?#iefix");
	src: url("Fonts/64e32c5e-c922-47ce-a2fe-cacfb07e8343.eot?#iefix") format("eot"), url("Fonts/da22cdd4-b74e-4259-9870-091b04ac26e0.woff2") format("woff2"), url("Fonts/6753442a-65f1-456a-9b08-020151abcc5d.woff") 	format("woff"), url("Fonts/6fcabc58-9c01-40a8-9a87-153cdfc02485.ttf") format("truetype"), url("Fonts/348519d0-7dd6-422c-987e-41fb42402981.svg#348519d0-7dd6-422c-987e-41fb42402981") format("svg");
}
body {
	font-family: 'AlternateGothicW01-No2_691799', sans-serif;
	color: #dcdbd9;
	background-color: #222222 !important;
	font-size: 18px;
}

i, em {
	font-style:italic;
}



body.game-over {
	background: transparent url('images/game-over.gif') no-repeat scroll 50% 50%;
	background-size: cover;
}
a:hover {
	cursor: pointer;
}
.logo {
	margin: 20px 0px 0px;
}
.logo span {
	display: block;
	margin: 0px auto;
	width: 108px;
	height: 16px;
	background: transparent url('logo-esquire.svg') no-repeat scroll 0px 0px;
}
.main {
	width: 100%;
	max-width: 800px;
	margin: 0px auto;
	position: relative;
}
.slide-holder {
	position: relative;
	padding: 0px 10px;
	float: left;
	width: 100%;
}

.slide {
	float: left;
	width: 100%;
	position:relative;
	overflow:hidden;
	background-color:#000000;
	height:450px;
	display:flex;
	align-items:center;
	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:500ms;
	transition-delay:0ms;
	transition-property: all; 
}
.slide-header {
	height: 100px;
}

.slide-bg { 
	position:absolute;
	left:0px;
	width:100%;
	height:100%;
	opacity:1;
	transform:scale(1.2);
	background-image: url("https://ak5.picdn.net/shutterstock/videos/631903/thumb/1.jpg");
	background-size:cover;
	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:700ms;
	transition-delay:0ms;
	transition-property: opacity, transform; 
}
.slide-feedback {
	width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 60;
    background: rgba(0,0,0,.8);
    text-align: center;
    font-size: 41px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity:0;
    transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:700ms;
	transition-delay:0ms;
	transition-property: opacity
}
.slide-feedback p {
	font-size: 37px;
    margin: 0px 20px 16px 20px;
}
.long-text.slide-feedback p {
	font-size:27px;
}
.slide-feedback.feedback-active {
	opacity:1;
}

.textOnly .slide-feedback {
	background:transparent;
}
.textOnly .slide-feedback p {
	text-shadow: 0px 0px 28px rgba(0,0,0,.8);
}





.feedback-continue a {
	
}

/* Don't show the caption when showing the feedback */
.hasActiveFeedback .question {
	opacity:0;
}

/* Make all feedback cards the same height */
.slide.hasActiveFeedback .slide-main {
	top:50px !important;
	height:347px !important;
}

.slide-main {  
	width: 100%;
    height: 250px;
    z-index:10;
    background: url(s.codepen.io/alu16/fullpage/EmXEwL) no-repeat scroll 50% 50%;
    background-size: cover;
    position: absolute;
    top:0%;
    /*top:50%;
    transform: translateY(-50%);
    -webkit-transform: translate3d(0,-50%,0);*/
    margin: 0px;
    box-shadow: 0px 0px 62px rgba(0,0,0,.8);
 	/*
 	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:500ms;
	transition-delay:0ms;
	transition-property: all; 
	*/
}

.slide-main.dont-zoom-image {
	background-size:contain;
	background-color:black;
}
.hasActiveAnswers .slide-main { /* Put the active class here, and the animations below */
	height:290px !important;
	opacity:1;
	top:0px !important;
}
.hasActiveAnswers .slide-main, .removedActiveAnswers .slide-main {
	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:500ms;
	transition-delay:0ms;
	transition-property: all; 
}

.slide-main.textOnly {
	box-shadow: none;
    display: flex;
    align-items: center;
}

.slide-main p {
	color:white;
}

.audio .slide-main {
	display: flex;
    justify-content: center;
    flex-direction: column;
    height:225px !important;
    box-shadow:0px 0px 0px rgba(0,0,0,0);
}
.audio.hasActiveAnswers .slide-main {
    
}

.slide-main.textOnly p.question {
	background: none;
    padding: 0px 30px;
    font-size: 40px;
    text-shadow: 5px 9px 32px rgba(0,0,0,1);
    width:100%;
}

.video {
	position:absolute; z-index:50; width:100%; height:100%; top:0px; left:0px; background-color:black;
}
.video iframe {
	width:100%;
	height:100%;
}

.slide-main.hasVideo {
	display:block;
}


.slide-main.hasVideo p.question {
	font-size: 28px;
    padding: 14px 30px;
    position:relative;
    z-index:60;
}







.slide-answers { 
	width:100%; 
	height:auto; 
	margin:0px auto;
	padding:0px 0px 0px 0px;
	flex-direction:column; 
	justify-content: center; 
	z-index:11;
	position:absolute;
	left:0px;
	z-index:10;
	bottom:0px;
	transform: translateY(100%);
	opacity:0;
	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:400ms;
	transition-delay:0ms;
	transition-property: opacity, transform; 
}
.slide-answers.fourUp {
    opacity: 1;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    margin: 0px auto;
}
.slide-answers .gradient {
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 90%, rgba(0, 0, 0, .8));
    width: 100%;
    height: 40px;
    position: absolute;
    top: 100px;
    left:0px;
    opacity:0;
}


.slide.hasActiveAnswers {  
	background-color:black;
}

.slide.hasActiveAnswers .slide-bg {  
	opacity:.25;
	transform:scale(1.1);
}


.hasActiveAnswers .slide-answers {
	transform: translateY(0%);
	opacity:1;
}

.hasActiveAnswers .gradient { /* Put the active class here, and the animations below */
	top: -50px;
	opacity:0; /* Turned this off for now */
}
.hasActiveAnswers .gradient, .removedActiveAnswers .gradient {
	transition-timing-function: cubic-bezier(0.63, 0, 0, 1);
	transition-duration:400ms;
	transition-delay:0ms;
	transition-property: all; 
}

.slide-main p.question {
	text-align: center;
    font-size: 29px;
    padding: 10px 15px 30px;
    background: linear-gradient(0deg, transparent 0, rgba(0, 0, 0, .8) 90%, rgba(0, 0, 0, .8));
}
.slide-main p.question.long-text {
	font-size:33px;
}


.slide-answers a { 
	display: block; 
	text-align:center; 
	width:80%; 
	margin:0px auto 12px; 
	font-size:24px; 
	min-height:62px;
	color: white;
	text-decoration: none;
	border: 3px solid white; border-radius:10px;
	padding: 5px 8px;
	display:flex;
	justify-content:center;
	background:rgba(0, 0, 0, .8);
	position:relative;
}
.slide-answers.fourUp a {
    width: 46%;
    margin: 0px 5px 10px;
    font-size: 23px;
    min-height: 63px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, .8);
}
.audio .slide-answers.fourUp a {
    min-height:100px;
}

.slide-answers a span.answer-text { 
	align-self:center; 
}



/* Points */
.slide-answers a span.points { 
	align-self:center;
	position:absolute;
	width:100%;
	left:0px;
	transform:translateY(0px);
	opacity:0;
	font-size:10px;
}
.slide-answers a span.points .speedpoints {
	display:block; font-size:30px;
}	
.speedpoints, .points {  
	text-shadow:2px 2px 9px rgba(0,0,0,.8);
}
.slide-answers a.answered.correct span.points {
	font-size:37px;
	animation-name: fadeUp;
	animation-duration: 1300ms;
	animation-delay: 0ms;
}
@keyframes fadeUp {
	0% { transform:translateY(0px); opacity:0; }
	50% { transform:translateY(-80px);; opacity:1; }
	100% { transform:translateY(-90px); opacity:0; }
}




.slide-answers a.answered.correct {
	background-color:green;
}
.slide-answers a.answered.incorrect {
	background-color:red;
}

.slide-answers a.inactive {
	opacity:.2;
}

.slide-answers a.shrink {
	padding:0px; 
	min-height:0px; 
	font-size:0; 
	border-width:0px; 
	margin:0px auto;
	transition-timing-function: cubic-bezier(0.29, 0, 0, 1.1); 
	transition-duration:300ms;
	transition-delay:100ms;
	transition-property: padding, font-size, min-height, border-width, margin; 
}




.items {
	position: relative;
	float: left;
	width: 100%;
}
/* http://stackoverflow.com/questions/19068070/how-to-style-a-div-to-be-a-responsive-square */

.item {
	float: left;
	width: 50%;
	height: 200px;
	border: 1px solid transparent;
	position: relative;
	z-index: 1;
	margin-bottom: 18px;
}
.item:nth-child(2n+1) {
	clear: both;
}
.item img {
	width: 100%;
}
.item .bgimage {
	background: transparent url("x") no-repeat scroll 50% 50%;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 66%;
	height: 100%;
	z-index: 1;
	-moz-background-size: 100%;
	-o-background-size: 100%;
	background-size: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	left: 50%;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	border: 1px solid #656565;
}
.item.correct {
	z-index: 10;
}
.item .feedback {
	width: 66%;
	height: 100%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
}
.item .feedback img.correct {
	display: none;
}
.item .feedback img.incorrect {
	display: none;
}
.hide {
	display: none;
}
.correctitem {
	float: left;
	width: 100%;
	margin: 0
	position: absolute;
	top: 0px;
	left: 0px;
}
.correctitem .album-art {
	width: 100%;
}
.item.correct.answer-correct .feedback {
	background-color: green;
}
.answer-incorrect .bgimage {
	opacity: .2
}
.answer-correct .feedback img.correct,
.answer-incorrect .feedback img.incorrect {
	display: block;
	width: 60%;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	top: 50%;
}
.answer-correct .bgimage {
	opacity: .2
}
.answer-expanded {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100% !important;
	transition: all 300ms ease-in-out;
	margin-bottom: 0px;
}
.answer-expanded .bgimage {
	width: 100%;
	transition: all 300ms ease-in-out;
}
.item.correct.answer-correct.answer-expanded {
	background-color: transparent;
}
.item.correct.answer-correct.answer-expanded .bgimage {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.item .details {
	display: none !important;
}
.item .details a {
	color: white;
}
.item.answer-expanded .details {
	display: block !important;
}
.item.answer-expanded.answer-correct .feedback img.correct {
	display: none;
}
.item.answer-expanded.answer-correct .bgimage {
	opacity: 1;
}
/*make them scale from the proper corners */

.answer-correct:nth-child(2) {
	left: auto;
	right: 0px;
}
.answer-correct:nth-child(3) {
	top: auto;
	bottom: 0px;
}
.answer-correct:nth-child(4) {
	left: auto;
	right: 0px;
	top: auto;
	bottom: 0px;
}
.next {
	background-color: #EF4123;
	color: white;
	text-decoration: none;
	padding: 10px 23px;
	border-radius: 3px;
	position: absolute;
	right: 12%;
	text-transform: uppercase;
	top: 24px;
	font-size: 29px;
	letter-spacing: 1px;
}
.details {
	color: white;
	font-size: 22px;
	line-height: 15px;
	background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .8));
	position: absolute;
	z-index: 10;
	left: 0px;
	bottom: 0px;
	padding: 100px 20px 20px 20px;
	width: 100%;
}
.details p {
	margin: 0px 0px 10px 0px;
	line-height: 20px;
}
.details .link img {
	width: 100px;
}
.details .link {
	margin-right: 9px;
}
.nav {
	text-align: center;
	z-index: 50;
	position: relative;
	margin: 10px 10px 0px;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.progress {
	float: left;
}
.level {
	float: right;
}
.settings {
	float: right;
}
.progressbar {
	clear: both;
	padding: 5px 0px 0px 0px;
}
.progressbar .bg,
.progressbar .fg {
	height: 2px;
}
.progressbar .fg {
	position: absolute;
	left: 0px;
	width: 0%;
	background-color: #EF4123;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.progressbar .bg {
	width: 100%;
	background-color: black;
	display: block;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
}
.iq.progressbar {
	margin: 40px 0px 40px 0px;
	position: relative;
}
.iq.progressbar .bg,
.iq.progressbar .fg {
	height: 10px;
}
.iq.progressbar .fg {
	width: 0%;
	-webkit-transition: all 1300ms ease-in-out;
	-moz-transition: all 1300ms ease-in-out;
	transition: all 1300ms ease-in-out;
}
.iq.progressbar .marker {
	position: absolute;
	width: 100px;
	border-right: 1px solid #7b7b7b;
	text-align: right;
	margin-left: -100px;
	padding: 23px 6px 0px 0px;
	top: -2px;
	color: #7b7b7b;
}
.iq.progressbar .marker.best {
	left: 75%;
	padding: 0px 6px 23px 0px;
	top: -19px;
}
.iq.progressbar .marker.avg {
	left: 50%;
}
.reset {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #cbcbcb;
	margin: 550px auto 20px;
}
.start {} .modal {} .gameplay {
	max-width: 470px;
	margin: 0px auto;
}
.dashboard {
	margin: 20px 20px;
}
.game {
	margin: 27px 0px;
}
.game .play {
	float: right;
	background-color: #EF4123;
	padding: 5px 3px;
	border-radius: 2px;
	color: white;
	text-decoration: none;
	width: 63%;
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 1px;
	max-width: 300px;
	border-bottom: 3px solid #941e0a;
}
.game span.play {
	background: #313131 url('') no-repeat scroll 95% 50%;
	color: #888888;
	border: 1px solid #525252;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 24px;
	cursor: pointer;
}
.dashboard h2 {
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 1px;
	border-bottom: 1px solid #525252;
}
.game h3 {
	font-size: 42px;
	margin: 0px 0px 12px 0px;
	line-height: 32px;
}
.game .game-meta {
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	color: #7b7b7b;
}
.game .genres-holder {}

.game .songcount::after { 
  content: "//"; margin:0px 10px;
}


.games-scroller {
	height: 252px;
	overflow-y: scroll;
	padding: 15px 15px 15px 0px;
	opacity: .1;
	overflow-x: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: opacity 800ms ease-in-out;
	-moz-transition: opacity 800ms ease-in-out;
	transition: opacity 800ms ease-in-out;
}
.games-scroller.active {
	opacity: 1;
}
.games-scroller .scroller-inner {
	overflow-y: auto;
	height: auto;
	width: auto;
	overflow: hidden;
}
.recap.modal-body {
	background-color: #222222;
}
.played-songs {
	height: 300px;
	overflow-y: scroll;
	padding: 0px 0px;
	color: #dcdbd9;
	overflow-x: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: opacity 800ms ease-in-out;
	-moz-transition: opacity 800ms ease-in-out;
	transition: opacity 800ms ease-in-out;
}
.played-songs-inner {
	overflow: hidden;
}
.played-songs .song {
	float: left;
	width: 100%;
	margin: 0px 0px 20px 0px;
	border-bottom: 1px solid #5d5d5d;
	padding-bottom: 20px;
}
.played-songs .song-info {
	text-align: left;
	color: black;
	margin: 0px 0px 0px 200px;
}
.played-songs .bgimage {
	width: 180px;
	height: 180px;
	float: left;
	background-size: cover;
	background-position: 50% 50%;
	border: 1px solid white;
}
.modal-body .played-songs p {
	font-size: 24px;
	color: #dcdbd9;
}
.modal-body .played-songs p.links {
	margin-top: 10px;
}
.played-songs .link img {
	width: 100px;
}
.played-songs .link {
	width: 88px;
	margin-right: 10px;
	color:white;
}
.played-songs .player-holder {
	width: 75px;
	height: 75px;
	float: right;
	margin: -10px 10px 0px 0px;
	position: relative;
	z-index: 20;
}
.dashboard-header {
	text-align: center;
	margin: 32px 0px 0px;
}
.dashboard-header p {
	text-transform: uppercase;
	font-size: 20px;
	letter-spacing: 2px;
	line-height: 15px;
}
.dashboard-header .iq {
	display: inline-block;
	margin: 0px 8px 0px 0px;
	font-size: 100px;
	line-height: 83px;
}
.share-btns {
	display: inline-block;
	width: 30px;
	vertical-align: top;
	position: relative;
	top: 7px;
}
.share-btns a {
	width: 30px;
	background: #EF4123 url('icon-twitter-white.svg') no-repeat scroll 50% 50%;
	height: 30px;
	display: inline-block;
	text-indent: -9999px;
	margin: 0px 0px;
	border-radius: 40px;
}
.share-btns a.share-fb {
	margin-bottom: 9px;
	background-image: url("icon-facebook-white.svg");
}
.scroller {
	width: 100%;
	height: 120px;
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch
}
.scroller-inner {
	overflow-x: auto;
	overflow-y: hidden;
	height: 120px;
	width: 5000px;
}
.genre-setting {
	float: left;
	padding: 0px 0px;
	width: 120px;
	height: 120px;
	background-color: #fafafa;
}
.genre-setting.current {
	background-color: yellow;
}
.buttons {
	text-align: center;
	margin: 15px 0px 15px;
}
.buttons a {
	background-color: black;
	color: white;
	text-decoration: none;
	padding: 10px 33px;
	display: inline-block;
}
.scroller-footer {
	border-top: 1px solid #525252;
	text-align: center;
	padding: 30px 0px 0px;
}
.scroller-footer .button {
	background-color: #313131;
	color: #888888;
	border: 1px solid #525252;
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 24px;
	padding: 10px 0px;
	width: 80%;
	background: #313131 url() no-repeat scroll 50% bottom;
	background-size: 110%;
}
.scroller-footer p {
	margin: 19px 0px 10px;
}
.scroller-footer p a {
	color: inherit;
}
.scroller-footer p .reset-game {
	color: #777777;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 14px;
}
.ui360,
.sm2-360ui {
	/* size of the container for the circle, etc. */
	
	width: 100px !important;
	height: 100px !important;
	float: left;
}
.ui360 .sm2-timing {} .ui360 {
	left: 50%;
	margin-left: -50px;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
.ui360.game-complete {
	left: 22%;
}
.ui360 .sm2-timing {
	display: none;
}
/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/

.md-perspective,
.md-perspective body {
	height: 100%;
	overflow: hidden;
}
.md-perspective body {
	background: #222;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	perspective: 600px;
}
.container {
	background: #e74c3c;
	min-height: 100%;
}
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	max-width: 630px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background-color: white;
	background-position: left bottom;
	background-size: 50%;
	background-repeat: none;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, .9);
}
.md-show {
	visibility: visible;
}
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0, 0, 0, 0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}
/* Content styles */

.md-content {
	color: #000;
	position: relative;
	margin: 0 auto;
	text-align: center;
}
.modal-content .modal-header {
	margin: 15px 10px;
}
.modal-content .modal-header h1 {
	font-size: 29px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.md-content h2 {
	font-size: 45px;
	margin: 0px 10px 10px;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
	color: white;
	position: relative;
	z-index: 10;
}
.md-content h3 {
	margin: 0px 30px 10px;
	color: white;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
	font-size: 25px;
	line-height: 26px;
	position: relative;
	z-index: 10;
}
.modal-content .modal-body {
	position: relative;
	padding: 5% 15px 5%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.modal-content .modal-body.postgame {
	background-color: black;
	padding: 15% 15px 15%;
}
.modal-content .modal-body.postgame.moregames {
	background: transparent url('images/popcorn.gif') no-repeat scroll 50% bottom;
	background-size: 125%;
	padding: 6% 15px;
}
.modal-content .modal-body.postgame.moregames ul {} .modal-content .modal-body.postgame.moregames li {
	font-size: 50px;
	color: white;
}
.modal-content .modal-body.postgame.moregames li span,
.modal-content .modal-body.postgame.moregames li .button {
	position: relative;
	top: -8px;
}
.modal-content .modal-body.pregame {
	background: transparent url('https://media.giphy.com/media/TZf4ZyXb0lXXi/giphy.gif') no-repeat scroll 50% 50%;
	background-size: cover;
	padding: 0px;
}
.modal-content .modal-body.pregame p {
	color: white;
	font-size: 30px;
	padding: 40px 40px 30px;
	margin: 0px;
	position: relative;
	z-index: 30;
}
.modal-content .modal-body.score-great {
	background: transparent url('https://media.giphy.com/media/38zTUU5VDDwli/200w_d.gif') no-repeat scroll 50% 50%;
	background-size: cover;
	padding: 100px 60px;
	color:white;
}
.modal-content .modal-body.score-pass {
	background: transparent url('https://media.giphy.com/media/aLdiZJmmx4OVW/200w_d.gif') no-repeat scroll 50% 50%;
	background-size: cover;
	padding: 30px 60px;
	color:white;
}
.modal-content .modal-body.score-lose {
	background: transparent url('https://media.giphy.com/media/56IyedBihEnhS/200w_d.gif') no-repeat scroll 50% 50%;
	background-size: cover;
	padding: 100px 60px;
	color:white;
}
.modal-footer {
	margin: 10px 0px 11px 0px;
}
.modal-body p {
	font-size: 34px;
}
.modal-body.pregame p.sound {
	font-size: 19px;
	padding: 0px 0px 43px;
	margin: 0px 0px 0px 0px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: .5;
	background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .8));
	position: relative;
	z-index: 29;
}
.modal-body p.sound span {
	width: 50px;
	height: 50px;
	display: block;
	margin: 0px auto 14px;
	background: transparent url('icon-headphones.svg') no-repeat scroll 50% 50%;
	background-size: cover;
}
.button {
	background-color: #EF4123;
	padding: 8px 17px;
	display: inline-block;
	text-decoration: none;
	color: white;
	border-radius: 2px;
	margin: 5px 10px;
	text-transform: uppercase;
	font-size: 23px;
	letter-spacing: 1px;
}
.button-primary {
	background-color: #EF4123;
}
.button-secondary {
	background-color: gray;
}
.form-holder {} .form-holder #email {
	font-size: 22px;
	display: block;
	margin: 24px auto 23px auto;
	padding: 5px 8px;
	border: 1px solid #b3b3b3;
	border-radius: 5px;
}
.form-holder p {
	color: white;
	font-size: 45px;
}
.form-holder p.fineprint {
	font-size: 39px;
}
.form-success p {
	color: white;
}
body.showgrid {} body.showgrid .main {
	max-width: 100%;
}
body.showgrid .main img {} body.showgrid .bgimage {
	width: 100px;
	height: 152px;
	float: left;
	background-position: 50% 50%;
	background-size: cover;
}
/* .modal-content * { position:relative; z-index:10; } */

.modal-content .giphy {
	position: absolute;
	z-index: 9;
	left: 10px;
	bottom: 0px;
	opacity: 0;
}
.modal-content .giphy.giphy-visible {
	opacity: 1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-content > div ul li {
	padding: 5px 0;
}
.md-content button {
	display: block;
	margin: 0 auto;
	font-size: 0.8em;
}
/* Individual modal styles with animations/transitions */
/* Effect 1: Fade in and scale up */

.md-effect-1 .md-content {
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
/* Brand Specific Overrides - Default is Esquire*/

.cos .logo span {
	width: 180px;
	height: 32px;
	background-image: url('logo-cosmo.svg');
}
@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=3422fd52-186d-419c-ab4f-fc24f6b59483");
@font-face {
	font-family: "Frankfurter W01 Medium";
	src: url("Fonts/eecba144-7a41-4247-b892-9ca899abc366.eot?#iefix");
	src: url("Fonts/eecba144-7a41-4247-b892-9ca899abc366.eot?#iefix") format("eot"), url("Fonts/0332ed9f-9ff8-46b3-b7a0-b3ebed81de3e.woff2") format("woff2"), url("Fonts/8b99e026-5709-4595-9785-aaac8e5233e6.woff") format("woff"), url("Fonts/0ad13fe0-885c-4031-9611-5cf1f2aabe25.ttf") format("truetype"), url("Fonts/4c9de911-ca35-4ffb-9ca6-6943de3e4fe7.svg#4c9de911-ca35-4ffb-9ca6-6943de3e4fe7") format("svg");
}
@font-face {
	font-family: "Geogrotesque Cond W01 Medium";
	src: url("Fonts/3fb4fa5c-7307-468c-a2ce-00e030e7ba98.eot?#iefix");
	src: url("Fonts/3fb4fa5c-7307-468c-a2ce-00e030e7ba98.eot?#iefix") format("eot"), url("Fonts/3336c940-b7b6-42d9-bd27-46430ebbcf98.woff2") format("woff2"), url("Fonts/e29978bb-39bc-44ef-bfe9-f510bd70afa9.woff") format("woff"), url("Fonts/aa4c42e9-a9fb-4a0b-9bc1-89305cc2680d.ttf") format("truetype"), url("Fonts/3c7cabc6-7c3c-4322-9a7e-bc421f6b64f9.svg#3c7cabc6-7c3c-4322-9a7e-bc421f6b64f9") format("svg");
}
@font-face {
	font-family: "Geogrotesque Cond W01 SemiBold";
	src: url("Fonts/96fd72ad-5a2b-449b-b46e-ad0fd171cbc9.eot?#iefix");
	src: url("Fonts/96fd72ad-5a2b-449b-b46e-ad0fd171cbc9.eot?#iefix") format("eot"), url("Fonts/55f80d8d-916d-4895-9964-6240af43d57f.woff2") format("woff2"), url("Fonts/b34648db-9c84-4aaa-b322-3371106086e0.woff") format("woff"), url("Fonts/3b82fea1-c94c-4674-ac7f-cde90895bb2d.ttf") format("truetype"), url("Fonts/26859667-a163-4bfa-81a3-8bb804eea476.svg#26859667-a163-4bfa-81a3-8bb804eea476") format("svg");
}
@font-face {
	font-family: "Sofia W01 Medium1446831";
	src: url("Fonts/27070da8-f8ed-4002-8324-4f0dd80f8fa4.eot?#iefix");
	src: url("Fonts/27070da8-f8ed-4002-8324-4f0dd80f8fa4.eot?#iefix") format("eot"), url("Fonts/fe0b48dd-7bb4-4787-913d-eaf613373f35.woff2") format("woff2"), url("Fonts/d493595c-97d2-4edc-bc9a-c09ad13b4913.woff") format("woff"), url("Fonts/449bb77f-1bc7-4956-a8f1-3d4ae9243a59.ttf") format("truetype"), url("Fonts/1332b505-18f0-4aa5-ba55-9be49eba8fb5.svg#1332b505-18f0-4aa5-ba55-9be49eba8fb5") format("svg");
}
@font-face {
	font-family: "Sofia W01 Bold1446843";
	src: url("Fonts/c2440dd8-b25c-49ba-bc04-8a638a943324.eot?#iefix");
	src: url("Fonts/c2440dd8-b25c-49ba-bc04-8a638a943324.eot?#iefix") format("eot"), url("Fonts/80042803-0630-405f-b2d2-af97b4e50b46.woff2") format("woff2"), url("Fonts/ec41d681-0313-4b04-88c0-820aebb51f4e.woff") format("woff"), url("Fonts/81434fc3-e426-4a4c-987d-f25c098198c4.ttf") format("truetype"), url("Fonts/59fd3475-fba9-4c77-94f9-959fd3925e06.svg#59fd3475-fba9-4c77-94f9-959fd3925e06") format("svg");
}
body.cos {
	font-family: "Sofia W01 Bold1446843";
}
body.cos .game h3 {
	font-family: "Geogrotesque Cond W01 SemiBold";
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 38px;
}
body.cos .dashboard-header .iq {
	font-family: "Frankfurter W01 Medium";
}
body.cos .modal-body .played-songs p {
	font-size: 19px;
	line-height: 23px;
}
body.cos .dashboard-header p {
	margin: 0px 0px 10px;
}
body.cos .next {
	font-size: 27px;
	top: 27px;
}
body.cos .button {
	font-size: 18px;
}
body.cos .dashboard h2 {
	font-size: 17px;
	padding: 0px 0px 5px 0px;
}
body.cos .iq.progressbar .marker {
	font-size: 12px;
}
body.cos .modal-content .modal-header h1 {
	font-size: 19px;
}
body.cos .modal-content .modal-body.postgame.moregames li {
	font-size: 33px;
}
body.cos .modal-content .modal-body.postgame.moregames li span,
body.cos .modal-content .modal-body.postgame.moregames li .button {
	top: 0px;
}
body.cos button {
	padding: 8px 17px 10px;
}
body.cos .scroller-footer .button {
	font-size: 25px;
	line-height: 26px;
	padding: 10px 0px 12px;
}
body.cos .md-content > div ul li {
	padding: 12px 0;
}
body.cos .share-btns a {
	background-color: #e441be;
}
body.cos .progressbar .fg {
	background-color: #e441be;
}
body.cos .button-primary {
	background-color: #e441be;
}
body.cos .game a.play {
	background-color: #e441be;
	border-bottom: 3px solid #983782;
}
body.cos .game span.play {} body.cos .share-btns {
	top: 5px;
}
body.cos .next {
	background: #e441be
}
body.cos .details .link {
	margin-top: 16px;
	display: block;
}
body.cos .details .link img {
	margin-left: -2px;
}
body.cos .md-content h2 {
	font-size: 36px;
}
body.cos .md-content h3 {
	font-size: 23px;
}
body.cos .nav {
	font-size: 13px;
}
/* Brand Specific Overrides - Default is Esquire*/

.ell .logo span {
	width: 80px;
	height: 32px;
	background-image: url('logo-elle.svg');
	background-size: cover;
}
body.ell .share-btns a,
body.ell .progressbar .fg,
body.ell .button-primary,
body.ell .game a.play,
body.ell .next {
	background-color: #EB947C
}
body.ell .game a.play {
	border-bottom: 3px solid #96695d;
}


/* Brand Specific Overrides - Default is Esquire*/
body.pop .share-btns a,
body.pop .progressbar .fg,
body.pop .button-primary,
body.pop .button,
body.pop .game a.play,
body.pop .next {
	background-color: hsla(59, 79%, 53%, 1);
	color:black;
}

/* Buttons in modal */
body.pop .button.continue, body.pop .button.button-primary.start, body.pop .md-content .button {
	background-color:#367F9A;
	color:white;
}

body.pop .share-btns a {
	background-image: url('icon-twitter-black.svg');
	background-size:17px;
}
body.pop .share-btns a.share-fb {
	background-image: url('icon-facebook-black.svg');
	background-size:12px;
}

body.pop .game a.play {
	border-bottom: 3px solid #b9b61a;
	color:black;
}



/* Desktop */

.md-modal {
	min-width: 540px;
}
/* Smartphones (portrait and landscape) ----------- */

@media only screen and (max-width: 480px) {
	.games-scroller {
		padding-right: 0px;
	}
	.md-modal {
		min-width: 320px;
	}
	/* game recap */
	
	.recap.md-modal {
		min-width: 96%;
	}
	.recap.modal-body {
		padding-left: 35px;
		padding-right: 35px;
	}
	.played-songs .song {
		margin-bottom: 0px;
		border: none;
		position: relative;
	}
	.played-songs .bgimage {
		width: 100%;
		height: 280px;
	}
	.played-songs .song-info {
		margin: 10
		width: 100%;
		position: absolute;
		bottom: 20px;
		background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .8));
		padding: 40px 0px 10px 10px;
	}
	.modal-body .played-songs {
		height: 340px;
	}
	.modal-body .played-songs p {
		font-size: 20px;
	}
	.played-songs .link img {
		width: 84px;
	}
	.played-songs .link {
		margin-right: 3px;
	}
	.played-songs .player-holder {
		position: absolute;
		top: 10px;
		right: 10px;
		margin: 0
		background-color: black;
		height: 82px;
		width: 82px;
		border-radius: 200px;
	}
	.played-songs .ui360 {
		top: -10px
	}
	/* more games */
	
	.form-holder p {
		font-size: 27px;
	}
	.form-holder p.fineprint {
		font-size: 21px;
	}
	.modal-content .modal-body.postgame.moregames li {
		font-size: 33px;
	}
	.modal-content .modal-body.postgame.moregames .button {
		display: block;
		clear: both;
		font-size: 23px;
		width: 50%;
		margin: 10px auto 0px;
	}
	.md-content > div ul li {
		padding: 0px;
	}
	body.cos .game .play {
		width: 69%;
	}
	body.cos .game span.play {
		font-size: 12px;
		line-height: 12px;
		padding: 10px 3px;
	}
	body.cos .game h3 {
		font-size: 18px;
	}
	body.cos .game .game-meta {
		font-size: 10px;
	}
	body.cos .game a.play {
		font-size: 16px;
		padding: 8px 0px;
	}
	body.cos .modal-content .modal-body.pregame p {
		font-size: 18px;
	}
	body.cos .next {
		font-size: 16px;
		top: 33px;
	}
	body.cos .details p {
		font-size: 20px;
	}
	body.cos .modal-content .modal-body.postgame.moregames li {
		font-size: 23px;
	}
	body.cos .modal-content .modal-body.postgame.moregames .button {
		font-size: 13px;
	}
	body.cos .md-content > div ul li {
		padding: 8px 0px;
	}
}
/* iphone 5 only  */

@media only screen and (max-width: 320px) {
	.details p {
		font-size: 19px;
		line-height: 12px;
	}
	.next {
		font-size: 21px;
		top: 28px;
	}
	.game .play {
		max-width: 128px;
	}
	.game span.play {
		font-size: 13px;
	}
	.link img {
		width: 70px;
	}
	.game span.play {
		background-image: none;
	}
}