html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure,figure img,figcaption{margin:0;padding:0;border:0;}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block;}a img{border:0;}figure{position:relative;}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html {
	font-weight:normal;
	font-style:normal;
	font-size:62.5%;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	overflow-x: hidden;
}
body {
	background:#23335d;
	color:#fff;
	font-size:15px;
	font-size:1.5rem;
}

img,
object,
embed {
	max-width:100%;
	height:auto;
}

.cf:after {
	display:block;
	visibility:hidden;
	clear:both;
	height:0;
	content:".";
}

.structural,
.structural > *,
.js .js-structural {
	position:absolute;
	left:-9999px;
}

/* ============================== */
/* ! General Layout               */
/* ============================== */

h1 {
	margin-bottom:40px;
	margin-bottom:4rem;
	font-size:55px;
	font-size:5.5rem;
}
h2 {
	margin:45px 0 25px;
	margin:4.5rem 0 2.5rem;
	font-size:35px;
	font-size:3.5rem;
}
h3 {
	font-size:22px;
	font-size:2.2rem;
	text-transform:uppercase;
	margin-bottom:15px;
	margin-bottom:1.5rem;
}
h4 {
	font-size:20px;
	font-size:2rem;
}
p {
	margin-bottom:18px;
	margin-bottom:1.8rem;
}
dl {
	margin-bottom:75px;
	margin-bottom:7.5rem;
}
dl dt {
	font-weight:bold;
	margin-top:15px;
	margin-top:1.5rem;
}
dl dt:first-child {
	margin-top:10px;
	margin-top:1rem;
}
ol,
ul {
	margin:0 0 18px 20px;
	margin:0 0 1.8rem 2rem;
}
li {
	margin-bottom:5px;
	margin-bottom:0.5rem;
}

a,
a:visited {
	text-decoration:underline;
}
a:hover,
a:focus {
	text-decoration:none;
}
h1,
h2,
h3,
h4,
h5 {
	font-family:"Just Dance Bold", "Arial Black", "Arial Bold", Gadget, sans-serif;
	line-height:1;
}

/* ============================== */
/* ! Content                      */
/* ============================== */

.header,
.primary-content,
.footer {
	margin:85px auto 0;
	margin:4.5rem auto 0;
	padding:0 20px;
	padding:0 2rem;
	max-width:850px;
	max-width:85rem;
}
.header {
	margin-top:70px;
	margin-top:7rem;
	text-align:center;
}
.header h2 {
	font-size:22px;
	font-size:2.2rem;
	margin-top:17px;
	margin-top:0.5rem;
}
.footer {
	margin:50px auto 30px;
	margin:5rem auto 3rem;
	max-width:none;
}
.footer .copyright {
	display:block;
	color:#888;
	text-align:center;
	font-size:1.2rem;
}

/* Logo
================================= */
.logo {
	padding-top:30%;
	width:100%;
	height:0;
	background:url(../img/JDNOW_Scifi_Logo_Horizontal.png) no-repeat 0 0;
	background-size:100%;
	text-indent:-9999px;
	margin-bottom:0;
}
.logo-footer {
	display:block;
	margin:0 auto;
	max-width:250px;
}

/* Game credits
================================= */
.intro {
	font-size:35px;
	font-size:3.5rem;
	margin-bottom:90px;
	margin-bottom:9rem;
	line-height:1.2;
	font-family:"Just Dance Bold", "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.intro strong {
	display:block;
	font-size:22px;
	font-size:2.2rem;
	margin-bottom:10px;
	margin-bottom:1rem;
}
.game-credits {
	margin-bottom:95px;
	margin-bottom:9.5rem;
	text-align:center;
	text-align: -webkit-center;
}
.game-credits:after {
	display:inline-block;
	content:"";
	width:5%;
	height:3px;
	margin-top:45px;
	margin-top:4.5rem;
	background:#ccc;
}

/* Song credits
================================= */
.song-credits h2 {
	font-size:55px;
	font-size:5.5rem;
	text-align:center;
	text-align: -webkit-center;
	margin-bottom:85px;
	margin-bottom:4rem;
}
.song-credits .header-copyright {
    color: #888; 
    text-align: center;
    text-align: -webkit-center;
    display: block; 
    font-size: 1.2rem; 
    margin: 0 auto 8rem;
    width: 85%;
}
.song-credits h3 {
	text-transform:uppercase;
	font-size:26px;
	font-size:2.6rem;
	line-height:1.3;
	margin-bottom:5px;
	margin-bottom:0.5rem;
}
.song-credits li[credits-obj="bad guy"] h3 {
    text-transform: none;
}
.song-credits h4 {
	margin-bottom:15px;
	margin-bottom:1.5rem;
	font-size:23px;
	font-size:2.3rem;
}
.song-credits p {
	margin-bottom:10px;
	margin-bottom:1rem;
}
.song-credits ul {
	-webkit-columns:2;
	-moz-columns:2;
	columns:2;
	-webkit-column-gap:5rem;
	-moz-column-gap:5rem;
	column-gap:5rem;
}
.song-credits li {
	display:inline-block;
	margin-bottom:50px;
	margin-bottom:5rem;
	width:100%;
	list-style:none;
}
.song-credits li:last-child {
	display:block;
}

/* Licenses
================================= */
.licenses h2 {
	margin-bottom:45px;
	margin-bottom:4.5rem;
	font-size:57px;
	font-size:5.7rem;
	text-align:center;
	text-align: -webkit-center;
}
.licenses h3 {
	margin:45px 0 14px;
	margin:4.5rem 0 1.4rem;
	font-size:3rem;
	text-transform:none;
}


/* FAQ section */
.loader {
	width: 100%;
    height: 100%;
    position: fixed;
}
.loader::before {
	content: '';
	position: absolute;
	background-repeat: no-repeat;
    background-size: contain;
	background-image: url(../img/faq/loading.gif);
	width: 22rem;
    height: 22rem;
    top: 30%;
    left: 44vw;
}
.loader.loader__tablet::before {
	left: 40vw;
}

.viewport-content h3 {
	margin: 1.5rem 0 0;
	font-family: "Just Dance Regular";
	padding: 1rem;
	cursor: pointer;
	word-break: keep-all;
	line-height: normal;
}
.viewport-content h3:hover {
	background: #2b3e6f;
	color: #ffffff;
	border-radius: 3px;
}
.viewport-content h4 {
    margin: 1rem 0 0;
    font-family: "Just Dance Regular";
    padding: 0 0 0 2rem;
    cursor: pointer;
    word-break: keep-all;
    line-height: normal;
}
.viewport-content h4:hover {
    color: #4f62e2;
}
.viewport-content p {
    display: none;
	padding: 0 1rem;
	text-align: justify;
}
.viewport-content .nested-content {
	display: none;
}
.viewport-content h4.expanded + p {
	display: block;
	padding: 1rem 3.5rem 0;
}
.viewport-content h3.expanded + p,
.primary__faq[data-objipadapp="true"] .viewport-content p,
.primary__faq[data-objipadapp="true"] .viewport-content .nested-content {
	display: block;
}
.viewport-content .report h3 {
	display: none;
}
.viewport-content .report p {
    display: block;
    margin: 2.5rem 0 0 0;
    font-weight: bold;
    text-align: inherit;
}

.section__helpful {
    margin: 4rem 0 2rem;
    font-weight: bold;
    text-align: center;
    font-size: 1.6rem;
}
.section__feedback {
	margin: 4rem 0 2rem;
    font-weight: bold;
    text-align: center;
    color: #1eb5d6;
    font-size: 2rem;
    display: none;
}
.section__helpful-yes, .section__helpful-no {
	display: inline-block;
    font-size: 1.4rem;
    cursor: pointer;
    border: 1px solid #a7a6a6;
    border-radius: 5px;
    padding: 15px 18px 15px 36px;
    margin: 0 0 0 0.2rem;
    line-height: 0.2rem;
    height: 1.8em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 4px 0px;
}
.section__helpful-yes:hover, .section__helpful-no:hover {
	border: 1px solid #5c5b5b;
}
.section__helpful-yes {
	background-image: url(../img/faq/helpful-yes.png);
	margin: 0 0.5rem 0 0;
}
.section__helpful-no {
	background-image: url(../img/faq/helpful-no.png);
}

.section__report {
    display: none;
    margin: 4rem 0 2rem;
    text-align: center;
    text-align: -webkit-center;
}
.link--report {
    background-image: linear-gradient(to right, #37dbff, #1eb5d6);
   	display: inline-block;
    font-size: 1em;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    padding: 1rem 2rem;
    border-radius: 10px;
    cursor: pointer;
}
.link--report:focus,
.link--report:hover,
.link--report:active {
	background-image: linear-gradient(to right, #1eb5d6, #37dbff);
}

.qr-code {
    background-image: url(../img/faq/qrcode.png);
    background-size: contain;
    width: 12em;
    height: 12em;
    background-repeat: no-repeat;
    margin: 0 0 1rem;
    vertical-align: top;
}
.store-qr-code {
    background-image: url(../img/faq/store_redirection.png);
    background-size: cover;
    width: 12em;
    height: 12em;
    background-repeat: no-repeat;
    margin: -1rem 0 1rem;
    vertical-align: top;
}
#dcid {
    display: inline;
    font-weight: bold;
    font-size: 1.7rem;
}




/* ============================== */
/* ! Media queries                */
/* ============================== */
@media only screen and (max-width: 800px) {
	.primary__faq {
		margin: 0rem auto 0 !important;
		padding: 0 1rem;
	}
	.primary__faq h2 {
		font-size: 4.5rem;
		margin: 1rem 0 2rem;
	}

	.viewport-content h3 {
		font-size: 2.2rem;
		margin: 0.2rem 0 0;
		word-break: normal;
	}
	.viewport-content h4 {
		font-size: 2rem;
		word-break: normal;
	}
	.viewport-content h4::before {
		display:none;
	}
	html[lang="ja"] .viewport-content h3 {
	    font-size: 2rem;
	}
	.link--report {
		font-size: 1.15em;
	}

	.logo {
		background: url(../img/JDNOW_Scifi_Logo_Horizontal.png);
		background-repeat: no-repeat;
		background-position: 45% 5px;
    	background-size: 70%;
    	padding-top: 22%;
	}
	.logo__recap {
	    background: url(../img/JDNOW_Scifi_Logo_Horizontal.png) no-repeat 0 0;
	    background-size: contain;
	    padding-top: 15%;
	}
	.bg-background::before {
		background-repeat: no-repeat;
	}
	.html__recap .bg-background {
		padding-top: 5vh;
	}
	.header--faq {
    	margin-top: 2rem;
	}
	.header--faq .logo {
		padding-top: 16%;
		background-position: 50% 0px;
    	background-size: 50%;
	}
	.section__helpful, .section__feedback, .section__report {
		margin: 3rem 0 2rem;
	}

	.loader::before {
		width: 18rem;
	    height: 18rem;
	    top: 35%;
	    left: 43%;
	}
}
@media only screen and (max-width: 650px) {
	html {
		font-size: 64%;
	}
	body {
		font-size: 1.65rem;
	}
}
@media only screen and (max-width: 600px) {
	.logo__recap {
		padding-top: 18%;
	}
	.recap__logo {
		width: 14rem;
	    height: 13rem;
	    margin-bottom: 2rem;
	}
	.recap-text {
		font-size: 3.5rem;
	}
	.recap-description {
	    margin-top: 0.5rem;
	    line-height: 2rem;
	    width: 80%;
	    font-size: 1.15rem;
	}
}
@media only screen and (max-width: 550px) {
	html {
		font-size: 60%;
	}
	.logo {
		background-size: 60%;
	}
	.logo__recap {
	    background-position: inherit;
	}
	.primary-content {
		margin-top:4.5rem;
	}
	h1 {
		margin-bottom:0.5rem;
		text-align:left;
		font-size:4rem;
	}
	.song-credits ul {
		-webkit-columns:1;
		-moz-columns:1;
		columns:1;
		-webkit-column-gap:0;
		-moz-column-gap:0;
		column-gap:0;
	}
	.primary__faq h2 {
		font-size: 3.5rem;
	}
}
@media only screen and (max-width: 450px) {
	html {
		font-size:55%;
	}
	.logo {
		background-size: 56%;
	}
	.link--report {
    	font-size: 1em;
	}
	.html__recap .bg-background {
	    padding-top: 0vh;
	}
	.logo__recap {
	    padding-top: 25%;
	}
	.loader::before {
		width: 15rem;
	    height: 15rem;
	    left: 35%;
	}
}
@media only screen and (max-width: 400px) {
	h2 {
		font-size:2.7rem;
	}
	h3 {
		font-size:2.5rem;
	}
	h4 {
		font-size:2rem;
	}
	.intro {
		font-size:3rem;
	}
	.licenses h3 {
		font-size:2.5rem;
	}

	.viewport-content h3 {
		font-size: 2rem;
	}
	.viewport-content h4 {
		font-size: 1.8rem;
	}

	html[lang="ja"] .viewport-content h3 {
	    font-size: 1.65rem;
	}
}
@media only screen and (max-width: 362px) {
	html {
		font-size:52%;
	}
	.logo {
		background-size: 52%;
	}
}




/*************************Browser specific CSS*******************/
/*Targeted only for IE*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.primary-content .licenses {
		max-width: 85rem;
		margin: 0 auto;
	}
}