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;
}

body.game-over { background: transparent url('https://media.giphy.com/media/yz76Da5VvYK4w/giphy.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 }

.slide { float:left; width:100%;  }

.slide-header { height:100px; }

.items { position:relative; float:left; width:100%; background-color:black;
}
/* 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; }
.item:nth-child(2n+1) { clear: both; }
.item img { width:100%; }
.item .bgimage { background:black url("x") no-repeat scroll 50% 50%; position:absolute; left:0px; top:0px; width:100%; 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;
}

.item.correct { z-index:10; }
.item .feedback { padding:50px; }
.item .feedback img {  }
.item .feedback img.correct { display:none; }
.item .feedback img.incorrect { display:none; }

.hide { display:none; }
.correctitem { float:left; width:100%; margin:0px 0px 0px 0px; position:absolute; top:0px; left:0px; }
.correctitem .album-art { width:100%; }

.item.correct.answer-correct { background-color:green; }
.answer-incorrect .bgimage { opacity:.2 }
.answer-incorrect .feedback img.incorrect { display:block; }
.answer-correct .feedback img.correct { display:block; }
.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; }
.item.correct.answer-correct.answer-expanded { background-color:transparent; }

.item .details { display:none; }
.item .details a { color:white; }
.item.answer-expanded .details { /*display:block; */}
.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('icon-music.svg') 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; }
.dashboard h2 span {  }
.dashboard h2 strong {  }
.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::before { 
  content: "//"; margin:0px 10px;
}

.games-scroller { height:342px; 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; }
.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; }
.genre-setting .genre-inner {  }
.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(https://media.giphy.com/media/ZaOWGY4zFrXYQ/giphy.gif) no-repeat scroll 50% bottom;
    background-size: 110%;
    color: white;
    }
.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.alignTweak { 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('https://media.giphy.com/media/ZaOWGY4zFrXYQ/giphy.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/JxxkWxHOEDrq0/giphy.gif') no-repeat scroll 50% 50%; background-size:cover; padding:0px; }

.modal-content .modal-body.pregame p { color:white; font-size:30px; padding: 30px 40px 0px; margin:0px 0px -130px; position:relative; z-index:30; }

.modal-footer { margin:10px 0px 11px 0px; }
.modal-body p { font-size:34px; }

.modal-body.pregame p.sound { font-size: 19px; padding:130px 0px 43px;
    margin: 28px 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:100px; 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 {

}

.md-content > div p {
}

.md-content > div ul {
}

.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; }




/* 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:10px 0px 0px 0px; 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:0px 0px 0px 0px; 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; }
}