@charset "utf-8";
/* CSS Reset */
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}
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}
a {text-decoration: none;}
/* common styles */
html,body{position:relative;display:block;width:100%;height:100%;min-height:100%;color:#FFF}
body{font-family:urw-din,sans-serif;}
.din-regular{font-family:urw-din,sans-serif;font-weight:400;font-variant-position:super;font-size:80%}
.container{max-width:100%;margin:0 auto;position:relative}
.responsive-break{display:inline}
.table{display:table;min-height:300px;height:inherit}
.table-cell{display:table-cell;min-height:300px;vertical-align:bottom;position:relative}
.clearfix::after{content:" ";display:block;clear:both;height:0;width:100%;line-height:0;border:none;visibility:hidden}


/* Header */
header{position:relative;width:100%;height:45vw;min-height:650px;background:#FFF url("../img/bg/bg-header.jpg") no-repeat center;background-size:cover}
#official-logo{position:absolute;top:0;left:0}
#trailer{position:absolute;top:calc(50% - 70px);left:50%;transform:translate(-50%, 0)}
#lineup{position:absolute;width:100%;background:#02417f url("../img/bg/line-up.png") no-repeat center top;bottom:0;z-index:10;padding:35px 0;font-family:urw-din, sans-serif;font-size:22px;font-weight:700;font-style:normal;text-align:center;background-size:auto 100%}
header video{width:100%;height:auto;z-index:1;display:block;position:absolute;left:50%;transform:translate(-50%, 0)}


/* Country Select */
/*#country-select{position:absolute;top:20px;right:20px;z-index:999}*/
#country-select{   
	position: absolute;
    top: 20px;
    right: 22px;
    z-index: 999;
    height: 32px;
    width: 100px;
    background-color: rgba(0, 0, 0, .5);
}
/*.currentFlag {padding: 10px;border: none;cursor: pointer;height:30px;}*/
.currentFlag {    
	padding: 7px 10px 2px 5px;
    border: none;
    cursor: pointer;
    height: 30px;
    width: 100px;
}
#country-select:after {    
	content: '';
    border: 4px solid transparent;
    border-top: 4px solid #FFF;
    position: absolute;
    top: 50%;
    right: 7%;
}
/*#country-select:after {content: '';border: 4px solid transparent;border-top: 4px solid black;margin-left: 2px;margin-bottom: 6px;display: inline-block;vertical-align: bottom;}*/
/*.country-dropdown {display: none;position: absolute;width: 45px;z-index: 10000;text-align: center;right:22px;top: 55px;background-color: rgba(0, 0, 0, .5);}*/
.country-dropdown {
	display: none;
    position: absolute;
    width: 100px;
    z-index: 10000;
    text-align: center;
    right: 0;
    top: 32px;
    background-color: rgba(0, 0, 0, .5);
}
/*.country-dropdown li {display: block;}*/
.country-dropdown li {display: block;width: 100px;text-align: left;}
.country-dropdown a {color: black;padding: 5px;text-decoration: none;display: block;}
.country-dropdown a img {height: 20px;}
/*.country-dropdown a:hover {background-color: #FFF;}*/
.country-dropdown a:hover {background-color: #555;}
.hideFlag {display:none;}


.efigs a p {
	color: white;
	font-size: 15px;
}


/* Content */
.game-logo{position:relative;display:inline-block;margin-right:20px}
.game-info{position:relative;display:inline-block;vertical-align:bottom;width:610px}
.platform{font-family: urw-din-semi-condensed,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    text-align: left;
    margin: 20px auto;
}
article section {
	clear: both;
	position: relative;
}
article section:after {
	content: "";
    display: inline-block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #cdcdcd;
    z-index: 1;
}
.textDetails {
	width: 59%;
	float:left;
	overflow-x: hidden;
}
.imageDetails {
	width: 41%;
	float: left;
	position: relative;
	height: 50vw;
}
#tokyo2020 .textDetails{
    background-image: url(../img/bg/bg_pattern01_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 50vw;
    position: relative;
}
#mariosonic .textDetails{
    background-image: url(../img/bg/bg_pattern02_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 50vw;
    position: relative;
}
#arcade .textDetails{
    background-image: url(../img/bg/bg_pattern03_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 50vw;
    position: relative;
}
#mobile .textDetails{
    background-image: url(../img/bg/bg_pattern04_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 50vw;
    position: relative;
}
.spec {
    position: absolute;
    bottom: 4%;
    left: 2%;
    width: 80%;
}
.platform-logos{
	text-align:right;
	z-index: 1;
	position:absolute;
	top:1.3vw;
	right:1.3vw;
	width: 110%
}
.platform-logos img{    
	vertical-align: middle;
    display: inline-block;
    width: 13.2vw;
    max-width: 144px;
    margin-left: 5px;
    margin-top: 5px;
}
.platform-logos .switch {
	height:  7vw;
	width: auto;
	max-width: initial;
	max-height: 50px;
}
.platform-logos .pc {
	height:  5vw;
	width: auto;
	max-height: 25px;
}
.release-timing{font-family:urw-din-semi-condensed,sans-serif;font-weight:700;font-style:normal;font-size:7vw;text-align:left;margin-bottom:5px;}
.game-title{font-family:urw-din,sans-serif;font-weight:700;font-style:normal;font-size:2.35vw;text-align:left;line-height: 1.4;}
.gameLogo {position: absolute; bottom: 10px;width: 100%;}
.officialWebsiteBtn {cursor: pointer;color: white;padding: 5px;background-color: blue;position: absolute;width: 34vw;max-width: 200px;text-align: center;font-weight: 500;border-radius: 20px;text-transform: uppercase;	transition:opacity .3s ease-in-out;	-webkit-transition:opacity .3s ease-in-out;	-moz-transition:opacity .3s ease-in-out;	-ms-transition:opacity .3s ease-in-out; bottom: 5%; left: 50%; transform: translate(-50%);font-size: 3vw;}
.officialWebsiteBtn span {margin-left: 8px;}
.officialWebsiteBtn:hover {opacity: .7}
@media screen and (min-width: 600px) {
	.officialWebsiteBtn {
		font-size: 18px;
	}
}
@media screen and (min-width: 640px) { 
	.platform, .game-title{
		position: relative;
		left: 5px;
	}
}
@media screen and (min-width: 920px) {
	#tokyo2020 .textDetails{
		height: 400px;
   		background: url(../img/bg/bg_pattern01.png) no-repeat right top;
	}
	#mariosonic .textDetails{
		background: url(../img/bg/bg_pattern02.png) no-repeat right top;
		height: 400px;
	}
	#arcade .textDetails{
		background: url(../img/bg/bg_pattern03.png) no-repeat right top;
		height: 400px;
	}
	#mobile .textDetails{
		background: url(../img/bg/bg_pattern04.png) no-repeat right top;
		height: 400px;
	}
	.platform-logos {width: 100%; right: 10px;}
	.imageDetails {height: 400px;max-width: 450px;}
	.game-title {font-size: 15px;}
	.spec {left: inherit; right: 7%; bottom: 10%;}
	.gameLogo {
		position: absolute;
		bottom: 0;
		width: 100%;
		max-width: 400px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.release-timing{font-size:8.25vw;letter-spacing:-4px}
	article section:before {
		content: "";
		position: absolute;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: contain;
		display: inline-block;
		top: 0;
		left: 0;
		width: 50%;
		height: 400px;
	}
	article section#tokyo2020:before {
		background-color: #00765D;
	} 
	article section#mariosonic:before {
		background-color: #A0122C;
	} 
	article section#arcade:before {
		background-color: #8A418A;
	} 
	article section#mobile:before {
		background-color: #004C9A;
	} 
}
@media screen and (min-width: 1240px) {
	#official-logo{position:absolute;top:0;left: calc((100% - 1240px) / 2);}
}
@media screen and (min-width: 1280px) {
	.release-timing{font-size:110px;}
	.spec {width: 615px; right: 50px; }
}
/* Footer */
footer{width:100%;background:#000;padding:25px 0;font-size:12px;clear:both;}
#legal{position:relative;text-align:center;margin-bottom:35px}
#legal div{display:inline-block;margin:10px 10px 0;vertical-align:middle}
#legal #rating img{max-height:88px;width:auto}
#legal div#legal-copy{text-align:left;line-height:normal}
.policyContainer {text-align: center;}
#privacy, #cookie {padding:20px 0 0; display: inline-block;}
#cookie {margin-left: 3%;}
#privacy a, #cookie a{text-decoration:none;color:#FFF}
#privacy a:hover, #cookie a:hover{color:#F00}
footer #legal-copy img{width:auto;height:10px;vertical-align:middle}

/* Responsive */
@media screen and (max-width:1280px){
    .game-info{width:525px}
    body.es .release-timing{font-size:95px}
    .platform{font-size:18px}
}
@media screen and (max-width:1205px){
}
@media screen and (max-width:1020px){
    .game-info{max-width:460px}
    body.it .release-timing{font-size:89px}
    body.es .release-timing{font-size:85px}
    .platform{font-size:16px}
}
@media screen and (max-width:920px){
	.platform{font-size:3.75vw}
}
@media screen and (max-width:890px){
    .game-info{max-width:90%;width:90%}
    .table{height:auto;min-height:auto}
    .table-cell{height:auto}
    .responsive-break{display:block}
    body.es .release-timing{font-size:14vw}
    body.fr #tokyo2020 .release-timing,body.fr #arcade .release-timing,body.fr #mobile .release-timing{margin-top:4vw}
    
}
.mbYTP_wrapper {
	top: -5.8%!important;
	background-image: url("../img/common/video-overlay.png");
	background-size: 100%;
}