@charset "utf-8";
/*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:inherit;font-size:100%;vertical-align:baseline;}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:400;vertical-align:middle}
q,blockquote{quotes:none}
q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}
a img{border:none;outline:none}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
*,:before,:after{box-sizing:border-box}
html,body{width:100%;min-height:100%;position:relative;overflow-x:hidden;}
body {line-height:1;overflow-x: hidden;}
body{-webkit-backface-visibility:hidden;backface-visibility:hidden; font-family: poppins, sans-serif;  font-weight: 300;font-size:10px;line-height:1.7;background-color: #FFF;color: #FFF;letter-spacing: 1.5px;}
a{outline:none;text-decoration:none}
img{vertical-align:middle}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

.container {width: 100%;height: auto;color: #FFF;position: relative;}
.innerContainer {
	max-width: 1980px;
    margin: 0 0 0 2%;
    position: relative;
    z-index: 1;
}
.isHover{
	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;
}
.isHover:hover {
	opacity:.6;
	cursor:pointer;
}
.sectionHeader {
	font-size: 8vw;
	font-style: italic;
	line-height: 60px;
	margin-left: 5%;
	text-align: left;
}
p {
	text-align: left;	
	font-size: 3.25vw;
}
h2 {
    text-align: center;
    font-size: 3vw;
    font-weight: 500;
    line-height: 1.18;
}
.shadow {
	text-shadow: 0px 0px 5px rgb(0,0,0), 0px 0px 10px rgb(0,0,0), 0px 0px 18px rgb(0,0,0);
}
.sectionTitle {
    font-weight: 700;
    font-size: 4.75vw;
    line-height: 1.25;
    width: 70%;
}
.redShadow {
	text-shadow: 2px 2px 0px #9d252f;
}
.blueShadow {
	text-shadow: 2px 2px 0px #175da6;
}
@media screen and (min-width: 640px) {
	.sectionTitle {
		font-size: 30px;
	}
	p {
		font-size: 18px;
	}
	.redShadow {
		text-shadow: 0px 0px 5px #9d252f, 0px 0px 10px #9d252f, 0px 0px 15px #9d252f;
	}
	.blueShadow {
		text-shadow: 0px 0px 5px #175da6, 0px 0px 10px #175da6, 0px 0px 15px #175da6;
	}
}
@media screen and (min-width: 1024px) {
	.sectionTitle {
		font-size: 35px;
	}
	p {
		font-size: 18px;
	}
	.innerContainer {
		margin: 0 0 0 5%;
	}
	.sectionTitle {
		font-size: 42px;
	}
}
@media screen and (min-width: 1400px) {
	h2 {
		font-size: 42px;
	}
	.sectionTitle {
		font-size: 50px;
	}
	p {
		font-size: 21px;
	}
/*
	.redShadow {
		text-shadow: 4px 4px 0px #9d252f;
	}	
	.blueShadow {
		text-shadow: 4px 4px 0px #175da6;
	}
*/
}

/* End Reset */

/*Nav*/
nav {
	width: 100%;
}
button.hamburger {
	display: block;
	position: fixed;
	z-index: 30;
	right: 15px!important;
	top: 10px;
	border: none;
}
nav {
    background-size: auto 75px;
    background-repeat: repeat-x;
    position: fixed;
    width: 100%;
	height: 70px;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
    z-index: 20;
	background-color: #FFF;
}
.segaLogo {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 20;
}

.hamMenuTitle {
	position: absolute;
	color: #FFF;
	font-size: 26px;
	text-transform: uppercase;
	right: 65px;
	top: 50%;
	transform: translate(0, -50%);
	font-style: italic;
	z-index: 20;
	display: block;
}
.hamUL {
    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,.85);
    z-index: 10;
    height: 100vh;
    margin-top: 70px;
}
.hamUL .container {
	width: 100%;
    color: #FFF;
    position: relative;
}
.hamUL li {
    display: block;
    border-bottom: 3px solid rgba(25, 117, 222, .75);
    background-color: transparent;
    padding: 2%;
}
.hamUL li a {
    outline: none;
    text-decoration: none;
}
nav ul li a p {
    color: #175da6;
	font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
	font-size: 13px;
	text-align: center;
}
nav ul li a p:hover {
	text-shadow: 0px 0px 2px rgb(255,255,255), 0px 0px 5px rgb(255,255,255), 0px 0px 8px rgb(255,255,255);
}
.mailIcon {
	position: fixed;
    height: 37px;
    padding: 8px;
    border: 1px solid lightgray;
    top: 1.5%;
    right: 195px;
	cursor: pointer;
}
@media screen and (min-width: 769px) {
	button.hamburger, .hamMenuTitle, .ps4MenuLogo, .hamUL > a .social_icon {
		display: none;
	}

	.hamUL li {
		display: inline-block;
		border-bottom: none;
		width: 14%;
		max-width: 200px;
		padding: 1%;
	}
	.hamUL {
		background-color: transparent;
		height: auto;
		margin-top: 0;
		top: 50%;
		transform: translate(0, -45%);
	}
	.mailIcon {
		right: 125px;
	}
}

@media screen and (min-width: 1024px) {
	nav ul li a p {
		color: #175da6;
		font-weight: 600;
		vertical-align: middle;
		text-transform: uppercase;
		font-size: 15px;
		text-align: center;
	}
}

/*END NAV*/
/*EFLAGS*/
.currentFlag {padding: 5px;border: none;cursor: pointer;height: 35px; display: inline-block; vertical-align: middle;}
/*.langByFlag {display: inline-block; vertical-align: middle;  color: #175da6; font-weight: 600;text-transform: uppercase; font-size: 15px; text-align: center;}*/
/*.mainFlagAndText {border: 1px solid lightgray;}*/
.eflagsGroup { position: fixed; z-index: 5; top: 1.5%;right: 75px; display: none;}
.home .eflagsGroup {top: 1.3%;}
.eflagsGroup:after {content: '';border: 4px solid transparent;border-top: 4px solid #fff;margin-left: 2px;margin-bottom: 6px;display: inline-block;vertical-align: bottom;}
.eflagsDropContent {display: none; position: absolute; width: 100%; z-index: 10000; text-align: center; background-color: rgba(255, 255, 255, .5); border-left: 1px solid lightgray;border-right: 1px solid lightgray;border-bottom: 1px solid lightgray;}
.eflagsDropContent li {display: block;border-bottom: 1px solid lightgray;width: 100%;}
.eflagsDropContent a {color: black;padding: 5px;text-decoration: none;display: block;}
.eflagsDropContent a img {height: 20px;}
.eflagsDropContent a:hover {background-color: #FFF;}
.hideFlag {display:none;}
.efigs img {margin-right: 10px;}
/*.efigs img, .efigs p {display: inline-block; font-size: 15px;}*/

.navPreOrderButton {
	position: fixed;
    z-index: 5;
    top: 1.5%;
    right: 78px;
    height: 37px;
    border: 1px solid lightgray;
    width: 110px;
	display: none;
}
.navBtnText {
    color: #175da6;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}
.showInNav {
	display: block;
}
.mainFlagAndText {
	border: 1px solid lightgray;
    height: 37px;
    width: 100px;
    position: relative;
}
.langByFlag {
    display: inline-block;
    vertical-align: middle;
    color: #175da6;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.efigs img, .efigs p {
    display: inline-block;
    font-size: 11px;
}
/* eflages responsive */
@media screen and (min-width: 1200px) {
	.mailIcon, .eflagsGroup, .navPreOrderButton {top: 10%}
}
@media screen and (min-width: 769px) {
	.eflagsGroup {right: 20px;}
	.navPreOrderButton {right: 8px;}
}
@media screen and (max-width: 950px) {
	.home .eflagsGroup { top: 0;}
}
@media screen and (max-width: 600px){
	.currentFlag { height: 35px; }
}
/*END EFLAGS*/
/*Hero Start*/
.hero {
	position: relative;
	z-index: 10;
}
.heroBG {
	width: 100%;
	margin-top: 70px;
}
.characterGroup {
    width: 100%;
    margin: 0 auto;
    display: block;
    position: absolute;
    text-align: center;
    bottom: 10%;
}
.charactersWithLogo {
	width: 63%;
}
.officialLogo {
    position: absolute;
    top: 78px;
    left: 1%;
    width: 12%;
    max-width: 100px;
	min-width: 35px;
}
.purchaseHero {
	display: none;
}
.preorderBtn {
    color: white;
    background-color: #ff2824;
    padding: 6px 15px;
    border: 1px solid #932746;
    border-radius: 4px;
    font-size: 15px;
    width: 250px;
    margin: 0 auto;
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.preorderBtn a  {
	color: white;
	position: relative;
    left: 33px;
}
.preorderBtn:hover  {
	background-color: #FFF;
	color: #ff2824;
}
.preorderBtnSmall {
    color: white;
    background-color: #ff2824;
    padding: 6px 15px;
    border: 1px solid #932746;
    border-radius: 4px;
    font-size: 3.25vw;
    width: 50%;
    max-width: 250px;
    margin: 0 auto;
    position: absolute;
    z-index: 0;
    top: 96%;
    left: 52%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.preorderBtnSmall a  {
    color: white;
    position: relative;
}
.preorderBtnSmall:hover  {
	background-color: #FFF;
	color: #ff2824;
}
.heroScreen, .heroPlayButton {
	display:none;
}	
.heroFrameBox img {
	width: 100%;
	position: absolute;
}
.heroTrailerText {
    width: 100%;
    font-size: 2.4vw;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
    padding: 3% 0;
    color: white;
/*    font-family: lores-12, sans-serif;*/
    font-weight: 400;
    font-style: normal;
    position: relative;
    z-index: 1;
}
.trailerHeroGroup {
	display: block;
	width: 80%;
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, 0);
	border-radius: 4px;
	cursor: pointer;
	max-width: 400px;
}
@media screen and (min-width: 530px) {
	.heroTrailerText {
		font-size: 12px;
	}
}
@media screen and (min-width: 769px) {
	.characterGroup {bottom: 7%;max-width: 2200px;}
	.charactersWithLogo {width: 78%;left: 11%;}
	.preorderBtnSmall {
		display: none;
	}
	.purchaseHero {
		display: block;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
		text-align: center;
		width: 50%;
	}
	.gamePack {    
		margin-bottom: 3%;
		width: 67px;
		max-width: 350px;
		position: relative;
		z-index: 1;
		right: 95px;
		transform: rotate(-6deg);
		top: 7px;
	}
	.trailerHeroGroup {
		width: 25%;
		bottom: 22%;
		max-width: inherit;
	}
	.heroScreen, .heroPlayButton {
		display:block;
	}
	.heroScreen {
		width: 100%;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	.heroFrameBox {
		position: relative;
		width: 100%;
		margin-top: 10px;
	}
	.heroTrailerText {
		font-size: .6vw;
	}
/*
	.heroTrailerText {
		width: 100%;
		font-size: 1.1vw;
		line-height: 1.2;
		text-align: center;
		justify-content: left;
		text-transform: uppercase;
		padding: 3% 0;
		color: white;
		font-family: lores-12, sans-serif;
		font-weight: 400;
		font-style: normal;
		border: 4px solid white;
		border-radius: 10px;
		margin-top: 10px;
		background-color: #000;
	}
*/
	.heroPlayButton {
		width: 20%;
		position: absolute;
		right: -3%;
		top: -5%;
	}
}
@media screen and (min-width: 1024px) {
	.gamePack {
		width: 85px;
	}
	.preorderBtn {
		width: 270px;
	}
	.preorderBtn a {
		left: 47px;
	}
}
@media screen and (min-width: 1200px) {
/*
	.purchaseHero {
		bottom: 3%;
	}
*/
	.purchaseHero {
		bottom: inherit;
		top: 8%;
		right: 1%;
		left: inherit;
		transform: translate(0%, 0);
		width: 22%;
	}
}
@media screen and (min-width: 1400px) {
/*
	.purchaseHero {
		bottom: 2%;
	}
*/
	.preorderBtn {
		padding: 10px 15px;
		font-size: 16px;
		width: 330px;
	}
	.gamePack {
		width: 110px;
		right: 115px;
	}
	.heroTrailerText {
		font-size: .7vw;
	}
/*
	.gamePack {
		width: 105px;
		right: 130px;
	}
*/
}
@media screen and (min-width: 1500px) {
/*
	.heroTrailerText {
		font-size: 1.0vw;
	}
*/
}
@media screen and (min-width: 1600px) {
/*
	.gamePack {
		width: 110px;
		right: 106px;
	}
*/
/*
	.purchaseHero {
		bottom: inherit;
		top: 7%;
		right: 0;
		left: inherit;
		transform: translate(0%, 0);
		width: 22%;
	}
*/
}
@media screen and (min-width: 1920px) {
	.officialLogo {left: 10%;}
}
@media screen and (min-width: 2200px) {
	.characterGroup {
		left: 50%;
		transform: translate(-50%, 0);
	}
}
/*videovideo start*/

.videoSelectionGroup {
    padding: 20px 0;
    z-index: 1;
    position: relative;
    display: block;
    width: 100%;
    max-width: 1575px;
    margin: 0 auto;
/*
    top: 67%;
    left: 50%;
    transform: translate(-50%, 0);
*/
}
.videoSelectors {
	width: 100%;
	text-align: center;
}
button.videoPrev, button.videoNext {
	position: absolute;
	width: 10%;
	border: none;
    background: transparent;
	top: 33%;
}
button.videoPrev img, button.videoNext img {
	width: 25px;
	cursor: pointer;
}
.addBlackCircle {
	background-color: rgba(255, 255, 255, 1);
    border-radius: 50%;
}
button.videoPrev {
	left: 0;
}
button.videoNext {
	right: 5px;
}
.videoSiema {
	width: 75%;
	display: inline-block;
	vertical-align: middle;
/*	padding: 5px;*/
	max-width: 1200px;
}
.siemaTrailer {
	width: 90%;
	margin: 0 4px;
	position: relative;
	display: inline-block;
	border: 3px solid #be303f;
}
.siemaVideoImage{
	width: 100%;
}
.video {
	margin-top: -70px;
	position: relative;
	z-index: 9;
	background-image: url("../img/video/video_bg_sm.jpg");
	background-size: cover;
	padding-top: 1%;
	background-repeat: no-repeat;
	background-position: top center;
}
.videoBG {
	width: 100%;
	background-color: rgba(0,0,0,0.5);
}
.siemaPlayButton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
	opacity: 1;
}
/*
.videoTopPositioning {
	position: absolute;
    top: 15%;
    left: 2%;
}
*/
.videoTopPositioning {
	text-align: center;
    width: 90%;
    margin: 0 auto;
    max-width: 1000px;
	padding-top: 25%;
}
.trailer {
    position: relative;
    display: block;
    width: 90%;
    margin: 5% auto 0;
	max-width: 900px;
/*
    top: 42%;
    left: 50%;    
    transform: translate(-50%, 0);
*/
}
.switch {
	width: 100%;
}
.playButton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12%;
	opacity: 1;
}
.bannerGroup {
	position: relative;
/*
	left: 0;
	top: 85%;
*/
	width: 100%;
	padding-bottom: 5%;
	margin-top: 5%;
}
.banner {
	width: 78%;
}
.bannerText {
	position: absolute;
    top: 10%;
    left: 2%;
}
#friends h1 {
	text-shadow: 0px 0px 5px #000, 0 0 10px #000;
	width: 100%;
}
#friends p {
	text-shadow: 0px 0px 5px #000, 0 0 10px #000;
	width: 100%;
	text-align: center;
}

.videoGroup {
    width: 90%;
    margin: 3% auto;
    max-width: 1024px;
    text-align: center;
	padding: 3% 0;
}
.trailerGroup {
	width: 45%;
	max-width: 300px;
	margin: 0 4px;
	position: relative;
	display: inline-block;
	border: 3px solid #be303f;
}
.trailerVideoImage {
	width: 100%;
}
.trailerPlayButton {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 45%;
	opacity: 1;
}

@media screen and (min-width: 500px) {
	button.videoPrev img, button.videoNext img {
		width: 40px;
	}	
}
@media screen and (min-width: 640px) {
	button.videoPrev {
		left: 5%;
	}
	button.videoNext {
		right: 5%;
	}
	.trailer, .playButton {
		padding-top: 10%;
	}
	.sectionTitle {
		width: 90%;
	}
	.bannerGroup {
		text-align: center;
	}
	.bannerText {
		position: relative;
		left: 50%;
		transform: translate(-50%);
	}
	.banner {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	button.videoPrev, button.videoNext {
		top: 40%;
	}

/*
	.videoSelectionGroup {
		top: 69%;
	}
*/
}
@media screen and (min-width: 1024px) {
	.videoTopPositioning {
		width: 70%;
		padding-top: 7%;
	}
	.trailer {
		padding-top: 0;
		width: 64%;
		margin: 2% auto 0;
	}
	.videoGroup {
		margin: 2% auto;
		padding: 1% 0 3%;
	}
	.playButton {
		padding-top: 0;
	}
	#friends h1 {
		width: 106%;
	}
}
@media screen and (min-width: 1300px) {
	button.videoPrev img, button.videoNext img {
		width: 50px;
	}	
}
@media screen and (min-width: 1400px) {
/*
	.videoTopPositioning, .playButton {
		padding-top: 10%;
	}
*/
}
@media screen and (min-width: 1700px) {
	.video {
   		background-position: 0 21%;
	}
}
/*
@media screen and (min-width: 1800px) {
	.videoSelectionGroup {
		top: 65%;
	}
}
@media screen and (min-width: 2100px) {
	.videoSelectionGroup {
		top: 62%;
	}
}
*/

/*minigames start*/
.gameplay {
	margin-top: -4%;
	position: relative;
/*	background-color: #be303f;*/
	background: #be303f url("../img/events/repeat_bg_stripe.jpg") top left repeat;
/*	overflow-x: hidden;*/
}

.gameplayHeaderGroup {
	width: 100%;
	position: relative;
	text-align: center;
}
.gameplay h1 {
	text-align: center;
    width: 90%;
    margin: 0 auto;
    padding: 3%;
}
.gameplayChar, .charCream, .charKinopio {
	display:none;
}
.positionCharacter {
	position: relative;
}
.featuredVideoGroup {
	width: 100%;
	max-width: 1100px;
    margin: 0 auto;
}
.lgVid, .smVid {
	width: 46%;
	display: inline-block;
	margin: 1.5%;
	position: relative;
	box-shadow: 2px 2px rgba(0,0,0,.2);
	z-index: 11;
	vertical-align: top;
}
.smVid {
	width: 30%;
	margin: 1%;
	vertical-align: top;
}
.lgVid img, .lgVid video, .smVid img, .smVid video {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.lgVid img, .smVid img {
	position: relative;
	opacity: 1;
	z-index: 1;
}
.evtSmallOnly {
	display: inline-block;
}
.eventName {
	text-transform: uppercase;
	text-align: center;
	background-color: #811525;
	font-size: 2vw;
	padding-top: 5px;
	padding-bottom: 5px;
}
.eventDesc {
	text-align: center;
	background-color: #811525;
	font-size: 1.65vw;
	padding-top: 5px;
	padding-bottom: 5px;
}
hr {
    color: white;
    width: 80%;
    margin: 0 auto;
    max-width: 600px;
}
.lgVid hr {
	position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.surroundingSpaceH2 {
    padding-top: 5%;
    padding-bottom: 5%;
}
.eventBtnWrapper {
	width: 90%;
    max-width: 300px;
	margin: 0 auto;
	padding: 5% 0 3%;
	position: relative;
}
.eventsBtn {
    color: white;
    background-color: #175da6;
    padding: 15px 15px;
    border: 2px solid #104174;
    border-radius: 4px;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
	font-weight: 700;
	box-shadow: 2px 2px 5px white inset, 3px 3px 10px rgba(0, 0, 0, .75)
}
.eventsBtn:hover {
	background-color: #FFF;
	color: #104174;
		box-shadow: -2px -2px 5px #175da6 inset, 0px 0px 5px rgba(0, 0, 0, .85)
}


.star {
    -webkit-animation: stars 5.2s infinite;
    animation: stars 5.2s infinite;
    position: absolute;
}
.starGroup .star:first-child {
    -webkit-animation-duration: 3.4s;
    animation-duration: 3.4s;
    width: 22%;
    left: 39%;
    top: 16%;
}
.starGroup .star:nth-child(2) {
    -webkit-animation-duration: 6.6s;
    animation-duration: 6.6s;
    width: 17%;
    transform: rotate(6deg);
    top: 66%;
    left: 24%;
}
.starGroup .star:nth-child(3) {
	-webkit-animation-duration: 5.75s;
    animation-duration: 5.75s;
	width: 20%;
	transform: rotate(6deg);
    top: 35%;
    right: 70%;
}
.starGroup .star:nth-child(4) {
    -webkit-animation-duration: 3.9s;
    animation-duration: 3.9s;
    width: 16%;
    top: 41%;
    right: 5%;
}
.starGroup .star:nth-child(5) {
    -webkit-animation-duration: 6.4s;
    animation-duration: 6.4s;
    width: 26%;
    top: 92%;
    right: 37%;
    transform: rotate(14deg);
}
.starGroup .star:nth-child(6) {
    width: 14%;
    top: 4%;
    right: 11%;
    transform: rotate(4deg);
}
@-webkit-keyframes stars {
    0% {
        -webkit-transform: scale(0);
        opacity: 1;
        transform: scale(0)
    }
    35% {
        -webkit-transform: scale(1.7);
        opacity: .22;
        transform: scale(1.7)
    }
    70% {
        opacity: .67
    }
    90% {
        opacity: 0
    }
    to {
        -webkit-transform: scale(0);
        opacity: 1;
        transform: scale(0)
    }
}

@keyframes stars {
    0% {
        -webkit-transform: scale(0);
        opacity: 1;
        transform: scale(0)
    }
    35% {
        -webkit-transform: scale(1.7);
        opacity: .22;
        transform: scale(1.7)
    }
    70% {
        opacity: .67
    }
    90% {
        opacity: 0
    }
    to {
        -webkit-transform: scale(0);
        opacity: 1;
        transform: scale(0)
    }
}

@media screen and (min-width: 640px) {
	.lgVid, .smVid {
		box-shadow: 4px 4px rgba(0,0,0,.2);
	}
	.smVid .eventName {
		font-size: 1.1vw;
	}
}
@media screen and (min-width: 768px) {
	.smVid {
		width: 22%;
	}
	.gameplayHeaderGroup {
		padding-top: 2%;
		position: relative;
	}
	.evtSmallOnly {
		display: none;
	}
/*
	.gameplay h1 {
		display: inline-block;
		width: 60%;
		max-width: 690px;
		vertical-align: middle;
	}
*/
}
@media screen and (min-width: 1100px) {
	.eventName {
		font-size: 22px;
	}
	.smVid .eventName {
		font-size: 12px;
	}
	.eventDesc {
		font-size: 18px;
	}
}
@media screen and (min-width: 1400px) {
	.surroundingSpaceH2 {
		padding-top: 72px;
		padding-bottom: 72px;
	}
	.eventBtnWrapper {
		padding: 3% 0 4%;
	}
	.charCream {
		display: block;
		position: absolute;
		left: -19%;
		top: -12%;
		width: 34%;
		max-width: 562px;
	}
	.charKinopio {
		display: block;
		position: absolute;
		right: -10%;
		top: 160%;
		width: 25%;
		max-width: 430px;
	}
	.gameplayChar {
		display: block;
		position: absolute;
		right: -5%;
		top: 50%;
		width: 23%;
		max-width: 365px;
	}
	.starGroup .star:first-child {
		-webkit-animation-duration: 3.4s;
		animation-duration: 3.4s;
		width: 22%;
		left: -4%;
		top: 14%;
	}
	.starGroup .star:nth-child(2) {
		top: 75%;
		left: 5%;
	}
	.starGroup .star:nth-child(3) {
		top: 5%;
		right: -31%;
	}
	.starGroup .star:nth-child(4) {
		top: 52%;
		right: 5%;
	}
	.starGroup .star:nth-child(5) {
		top: 92%;
		right: 37%;
	}
	.starGroup .star:nth-child(6) {
		top: 4%;
		right: 11%;
	}
}
@media screen and (min-width: 1750px) {
	.charCream {
		left: -11%;
	}	
	.charKinopio {
		top: 140%;
		right: -3%;
	}
	.gameplayChar {
		right: 1%;
	}
}
@media screen and (min-width: 1979px) {
	.charCream {
		left: -5%;
	}	
	.charKinopio {
		right: 1%;
	}
	.gameplayChar {
		right: 2.5%;
	}
}
/*characters*/
.roundedCharNav {
	border-radius: 50%;
    border: 5px solid #175da6;
    box-shadow: 2px 2px 0px #a8bed4;
	background-color: #e7ebf4;
	width: 70%;
	text-align: center;
	margin: 0 auto;
	display: block;
/*	margin: 2%;*/
}
.roundedCharNav:hover {
	background-color: #91f8fe;
	border: 3px solid #fff;
	box-shadow: 0px 0px 0px 5px #91f8fe;
}
.active {
	background-color: #91f8fe;
	border: 3px solid #fff;
	box-shadow: 0px 0px 0px 5px #91f8fe;
}
.characters {
	position: relative;
}
.characterBG {
	width: 100%;
}
.characters .bannerGroup {
    top: 20%;
    position: absolute;
    left: 5%;
    width: 90%;
    padding-bottom: 3%;
    margin-top: 5%;
    text-align: center;
	background-image: -webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),color-stop(20%,hsla(0,0%,100%,.8)),color-stop(80%,hsla(0,0%,100%,.8)),to(hsla(0,0%,100%,0)));
    background-image: -o-linear-gradient(left,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.8) 20%,hsla(0,0%,100%,.8) 80%,hsla(0,0%,100%,0) 100%);
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.8) 20%,hsla(0,0%,100%,.8) 80%,hsla(0,0%,100%,0));
}
.characters .bannerText {
	position: relative;
	width: 100%;
	top: 5px;
}
.characterChoices {
	width: 100%;
	background-color: #f0f1f2;
	padding-bottom: 5%;
}
.characterSelectionGroup {
	padding: 20px 0;
	z-index: 1;
	position: relative;
	display: block;
}
.characterSelectors {
	width: 100%;
	text-align: center;
}
button.prev, button.next {
	position: absolute;
	width: 10%;
	border: none;
    background: transparent;
	top: 33%;
}
button.prev img, button.next img {
	width: 25px;
}
button.prev {
	left: 0;
}
button.next {
	right: 5px;
}
.siema {
	width: 75%;
	display: inline-block;
	vertical-align: middle;
	padding: 5px;
}
.characterNav {
    width: 70%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.characterInfo {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	position: relative;
	overflow-x: hidden;
}
.characterName {
	width: 95%;
	margin: 0 auto;
	display: block;
	position: relative;
}
.characterDescription {
	color: #2062a6;
    font-weight: 400;
	margin-top: 5%;
	width: 90%;
	margin: 5% auto 0;
	font-size: 3vw;
}
.characterImage {
	width: 100%;
	position: relative;
}
.characterPickerArea { display: none;}
@media screen and (min-width: 530px) {
	.characterDescription {
		font-size: 2.5vw;
		position: absolute;
		width: 44%;
		left: 5%;
		top: 20%;
	}
	#marioText {
		width: 43%;
	}
	#peachText,
	#luigiText,
	#bowserText,
	#donkeykongText,
	#waluigiText,
	#vectorText {
		position: static;
		width: 90%;
	}
	#eggmanText {
		left: 2%;
    	top: 40%;
		width: 40%;
	}
	#amyText {
		width: 35%;
	}
	#sonicText {
		top: 50%;
	}
	#tailsText {
		top: 8%;
	}
	#yoshiText {
		top: 7%;
	}
	#warioText, #metalsonicText {
		top: 10%;
	}
	#shadowText {
		top: 10%;
		width: 41%;
	}
	#blazeText {
		top: 27%;
	}
	#silverText {
		top: 3%;
		width: 35%;
	}
	#knucklesText {
		width: 64%;
	}
	#Mario {
		transform: translate(0, -15%);
	}
	#Luigi {
		transform: translate(0, -10%);
	}
/*
	#Peach {
		transform: translate(-11%, -12%);
	}
*/
	#Yoshi {
		transform: translate(0, -2%);
	}
	#Sonic {
		transform: translate(0, -15%);
	} 
	#Knuckles {
		transform: translate(0, -5%);
	}
	#Tails {
		transform: translate(0, -5%);
	}
	#Amy {
		transform: translate(0, -15%);
	}
	#Blaze {
		padding: 2% 0;
	}
	#Silver {
		left: 15%;
	}
	
}
@media screen and (min-width: 640px) {
	.characterDescription {
		font-size: 16px;
	}	
/*
	.characters .bannerText br {
		display: none;
	}
*/
}
@media screen and (min-width: 768px) {
	
	.characters .bannerGroup {
		top: -5%;
		height: 95px;
	}
	.characterSelectionGroup {
		display: none;
	}
	.characters .bannerText {
		top: 10px;
	}
	.characterChoices {
		text-align: center;
	}
	.characterPickerArea {
		width: 40%;
		max-width: 350px;
		display: inline-block;
		text-align: center;
		vertical-align: top;
		position: relative;
	    top: 50px;
	}
	.characterNav {
		width: 25%;
		margin: 2%;
		display: inline-block;
	}
	.roundedCharNav {
		width: 20%;
		margin: 1.5%;
		display: inline-block;
	}
	.characterInfo {
		display: inline-block;
		width: 59%;
		max-width: 550px;
		vertical-align: top;
	}
	#Mario,	#Luigi, #Peach, #Yoshi, #Sonic, #Knuckles, #Tails, #Amy {
		transform: translate(0, 0);
	}
	#Luigi {
		transform: translate(-5%, -2%);
	}
/*
	#Peach {
		transform: translate(-8%, 0);
	}
*/
	.characterName {
		position: relative;
	    top: 50px;
	}
	#sonicText {
		width: 42%;
	}
	#eggmanName, #bowserName, #luigiName, #peachName, #donkeykongName, #warioName, #waluigiName, #vectorName, #silverName {
		top: 20px;
		z-index: 1;
	}
	#peachText, 
	#bowserText,
	#donkeykongText,
	#waluigiText,
	#vectorText,
	#silverText {
		position: relative;
		width: 90%;
		top: 20px;
	}
	#luigiText {
		position: relative;
		width: 90%;
		top: 29px;
	}
	#tailsText {
		top: 15%;
		width: 90%;
	}
	#yoshiText {
		top: 17%;		
    	width: 24%;
	}
	#bowserjrText {
		width: 90%;
	}
	#shadowText {
		top: 18%;
	}
	#metalsonicText {
		top: 15%;
	}
	#warioText {
		width: 100%;
	}
	#Shadow {
		padding: 3% 0;
	}
	#Blaze {
		padding: 15% 0 2%;
	}
	#blazeText {
		top: 26%;
		width: 40%;
	}
}
@media screen and (min-width: 1024px) {
	
	.characters .bannerGroup {
		height: 125px;
	}
}
@media screen and (min-width: 1400px) {
	
	.characters .bannerGroup {
		height: 145px;
	}
}
/*wtp area*/
.waysToPlay {
	background-color: #2c97f0;
/*	overflow: hidden;*/
	background: #2c97f0 url("../img/waystoplay/repeat_bg_diamond.jpg") top left repeat;
	text-align: center;
	position: relative;
	padding-bottom: 5%;
}
.wtpTopPiece {
	width: 100%;
}
.wtpContainer {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	display: block;
	position: relative;
}
.wtpImgGroup {
    width: 36%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-left: 1%;
	padding: 3% 0;
}
.wtpImgGroup img {
    width: 100%;
	max-width: 300px;
    text-align: center;
    padding: 0;
    border: 2px solid #104174;
    margin: 3% auto;
}
.wtpImgGroup img:first-child {
	transform: rotate(-3deg);
}
.wtpImgGroup img:nth-child(2) {
	transform: rotate(4deg);
    position: relative;
    z-index: 0;
}
.wtpImgGroup img:nth-child(3) {
	transform: rotate(-5deg);
}
.wtpBannerGroup {
	width: 100%;
	position: absolute;
	top: 10%;
}
.wtpBannerGroup img {
	width: 100%;
}
.ltJoycon {
    max-width: 800px;
    z-index: 1;
	-webkit-animation: ltJoycon 11s infinite;
	animation: ltJoycon 11s infinite;
	display: none;
}
.rtJoycon {
    position: absolute;
    right: -29%;
    width: 78.5%;
    max-width: 839px;
    top: -32%;
    transform: rotate(305deg);
	-webkit-animation: rtJoycon 11s infinite;
	animation: rtJoycon 12s infinite;
}
@keyframes rtJoycon {
    0% {
        -webkit-transform: rotate(305deg);
        transform: rotate(305deg);
    }
    25% {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    30% {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    40% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    50% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    75% {
        -webkit-transform: rotate(275deg);
        transform: rotate(275deg);
    }
    to {
        -webkit-transform: rotate(305deg);
        opacity: 1;
        transform: rotate(305deg);
    }
}
@keyframes ltJoycon {
    0% {
        bottom: 1%;
		left: -35%;
    }
    25% {
		bottom: 6%;
		left: -25%;
    }
    30% {
		bottom: 6%;
		left: -25%;
    }
    40% {
		bottom: 3%;
		left: -30%;
    }
    45% {
		bottom: 3%;
		left: -30%;
    }
    55% {
		bottom: 6%;
		left: -25%;
    }
    to {
        bottom: 1%;
		left: -35%;
    }
}
@keyframes ltJoyconLg {
    0% {
        bottom: 3%;
		left: -40%;
    }
    25% {
		bottom: 8%;
		left: -33%;
    }
    30% {
		bottom: 8%;
		left: -33%;
    }
    40% {
		bottom: 5%;
		left: -36%;
    }
    45% {
		bottom: 5%;
		left: -36%;
    }
    55% {
		bottom: 8%;
		left: -33%;
    }
    to {
        bottom: 3%;
		left: -40%;
    }
}
@keyframes ltJoyconLg2 {
    0% {
        bottom: 3%;
		left: -48%;
    }
    25% {
		bottom: 8%;
		left: -40%;
    }
    30% {
		bottom: 8%;
		left: -40%;
    }
    40% {
		bottom: 4.5%;
		left: -44%;
    }
    45% {
		bottom: 4.5%;
		left: -44%;
    }
    55% {
		bottom: 8%;
		left: -40%;
    }
    to {
        bottom: 3%;
		left: -48%;
    }
}
@keyframes ltJoyconLg3 {
    0% {
        bottom: 3%;
		left: -56%;
    }
    25% {
		bottom: 8%;
		left: -47%;
    }
    30% {
		bottom: 8%;
		left: -47%;
    }
    40% {
		bottom: 4.5%;
		left: -52%;
    }
    45% {
		bottom: 4.5%;
		left: -52%;
    }
    55% {
		bottom: 8%;
		left: -47%;
    }
    to {
        bottom: 3%;
		left: -56%;
    }
}
@keyframes ltJoyconLg4 {
    0% {
        bottom: 3%;
		left: -64%;
    }
    25% {
		bottom: 8%;
		left: -54%;
    }
    30% {
		bottom: 8%;
		left: -54%;
    }
    40% {
		bottom: 4.5%;
		left: -59%;
    }
    45% {
		bottom: 4.5%;
		left: -59%;
    }
    55% {
		bottom: 8%;
		left: -54%;
    }
    to {
        bottom: 3%;
		left: -64%;
    }
}
@-webkit-keyframes rtJoycon {
    0% {
        -webkit-transform: rotate(305deg);
        transform: rotate(305deg);
    }
    25% {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    30% {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }
    40% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    50% {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    75% {
        -webkit-transform: rotate(275deg);
        transform: rotate(275deg);
    }
    to {
        -webkit-transform: rotate(305deg);
        opacity: 1;
        transform: rotate(305deg);
    }
}
@-webkit-keyframes ltJoycon {
    0% {
        bottom: 1%;
		left: -35%;
    }
    25% {
		bottom: 6%;
		left: -25%;
    }
    30% {
		bottom: 6%;
		left: -25%;
    }
    40% {
		bottom: 3%;
		left: -30%;
    }
    45% {
		bottom: 3%;
		left: -30%;
    }
    55% {
		bottom: 6%;
		left: -25%;
    }
    to {
        bottom: 1%;
		left: -35%;
    }
}
@-webkit-keyframes ltJoyconLg {
    0% {
        bottom: 3%;
		left: -40%;
    }
    25% {
		bottom: 8%;
		left: -33%;
    }
    30% {
		bottom: 8%;
		left: -33%;
    }
    40% {
		bottom: 5%;
		left: -36%;
    }
    45% {
		bottom: 5%;
		left: -36%;
    }
    55% {
		bottom: 8%;
		left: -33%;
    }
    to {
        bottom: 3%;
		left: -40%;
    }
}
@-webkit-keyframes ltJoyconLg2 {
    0% {
        bottom: 3%;
		left: -48%;
    }
    25% {
		bottom: 8%;
		left: -40%;
    }
    30% {
		bottom: 8%;
		left: -40%;
    }
    40% {
		bottom: 4.5%;
		left: -44%;
    }
    45% {
		bottom: 4.5%;
		left: -44%;
    }
    55% {
		bottom: 8%;
		left: -40%;
    }
    to {
        bottom: 3%;
		left: -48%;
    }
}
@-webkit-keyframes ltJoyconLg3 {
    0% {
        bottom: 3%;
		left: -56%;
    }
    25% {
		bottom: 8%;
		left: -47%;
    }
    30% {
		bottom: 8%;
		left: -47%;
    }
    40% {
		bottom: 4.5%;
		left: -52%;
    }
    45% {
		bottom: 4.5%;
		left: -52%;
    }
    55% {
		bottom: 8%;
		left: -47%;
    }
    to {
        bottom: 3%;
		left: -56%;
    }
}
@-webkit-keyframes ltJoyconLg4 {
    0% {
        bottom: 3%;
		left: -64%;
    }
    25% {
		bottom: 8%;
		left: -54%;
    }
    30% {
		bottom: 8%;
		left: -54%;
    }
    40% {
		bottom: 4.5%;
		left: -59%;
    }
    45% {
		bottom: 4.5%;
		left: -59%;
    }
    55% {
		bottom: 8%;
		left: -54%;
    }
    to {
        bottom: 3%;
		left: -64%;
    }
}
.wtpBannerGroup .bannerText {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.wtpBannerGroup .sectionTitle {
	font-size: 2vw;
	width: 50%;
}
.wtpAboutModes {
    width: 58%;
    margin: 35% 1% 0;
    vertical-align: middle;
    padding: 3% 0;
    display: inline-block;	
    position: relative;
    z-index: 1;
}
.wtpAboutModes h2 {
	font-weight: 300;
	font-size: 2.65vw;
	text-shadow: 0px 0px 5px #000;
}
.starType2 {
    -webkit-animation: starTypeTwo 5.2s infinite;
    animation: starTypeTwo 5.2s infinite;
    position: absolute;
}
.wtpStarGroup .starType2:first-child {
    -webkit-animation-duration: 3.4s;
    animation-duration: 3.4s;
    width: 10%;
    left: 39%;
    top: 16%;
}
.wtpStarGroup .starType2:nth-child(2) {
    -webkit-animation-duration: 6.6s;
    animation-duration: 6.6s;
    width: 9%;
    transform: rotate(6deg);
    top: 88%;
    left: 24%;
}
.wtpStarGroup .starType2:nth-child(3) {
	-webkit-animation-duration: 5.75s;
    animation-duration: 5.75s;
	width: 12%;
	transform: rotate(6deg);
    top: 5%;
    right: 90%;
}
.wtpStarGroup .starType2:nth-child(4) {
    -webkit-animation-duration: 3.9s;
    animation-duration: 3.9s;
    width: 8%;
    top: 41%;
    right: 5%;
}
.wtpStarGroup .starType2:nth-child(5) {
    -webkit-animation-duration: 6.4s;
    animation-duration: 6.4s;
    width: 7%;
    top: 92%;
    right: 37%;
    transform: rotate(14deg);
}
.wtpStarGroup .starType2:nth-child(6) {
    width: 11%;
    top: 4%;
    right: 11%;
    transform: rotate(4deg);
}
@-webkit-keyframes starTypeTwo {
    0% {
        -webkit-transform: scale(0) rotate(0);
        opacity: 1;
        transform: scale(0) rotate(0)
    }
    35% {
        -webkit-transform: scale(1.7) rotate(180deg);
        opacity: .22;
        transform: scale(1.7) roate(480deg);
    }
    70% {
        opacity: .5
    }
    90% {
        opacity: 0
    }
    to {
        -webkit-transform: scale(0) rotate(0deg);
        opacity: 1;
        transform: scale(0) rotate(0deg)
    }
}

@keyframes starTypeTwo {
    0% {
        -webkit-transform: scale(0) rotate(0);
        opacity: 1;
        transform: scale(0) rotate(0)
    }
    35% {
        -webkit-transform: scale(1.7) rotate(180deg);
        opacity: .22;
        transform: scale(1.7) roate(180deg);
    }
    70% {
        opacity: .5
    }
    90% {
        opacity: 0
    }
    to {
        -webkit-transform: scale(0) rotate(0deg);
        opacity: 1;
        transform: scale(0) rotate(0deg)
    }
}



@media screen and (min-width: 768px) {
	.wtpAboutModes h2 {
		font-size: 16px;
		line-height: 1.5;
	}
	.rtJoycon {
		top: -40%;
	}
}
@media screen and (min-width: 1024px) {
	.wtpBannerGroup .sectionTitle {
		font-size: 22px;
	}
	.wtpAboutModes h2 {
		font-size: 23px;
	}
	.wtpAboutModes {
		width: 592px;
		margin: 35% 1% 0;
		vertical-align: middle;
		padding: 3% 0;
		display: inline-block;
		position: relative;
		z-index: 1;
		left: 18%;
	}
	.wtpBannerGroup img {
		height: 276px;
	}
	.wtpImgGroup {
		width: 35%;
		display: inline-block;
		position: absolute;
		vertical-align: middle;
		margin-left: 1%;
		padding: 3% 0;
		top: -6%;
		left: 0;
	}
	.ltJoycon {
		display: block;
		position: absolute;
		bottom: 1%;
		transform: rotate(50deg);
		width: 60%;
		left: -35%;
	}
}
@media screen and (min-width: 1200px) {
	.wtpImgGroup img:nth-child(3) {
		transform: rotate(-5deg);
		position: absolute;
		top: 30%;
		left: 80%;
	}
	.wtpImgGroup img {
		max-width: 375px;
	}
	.wtpStarGroup .starType2:first-child {
		left: 32%;
		top: 4%;
	}
	.wtpStarGroup .starType2:nth-child(2) {
		top: 88%;
		left: 24%;
	}
	.wtpStarGroup .starType2:nth-child(3) {
		top: 31%;
		right: 50%;
	}
	.wtpStarGroup .starType2:nth-child(4) {
		top: 41%;
		right: 5%;
	}
	.wtpStarGroup .starType2:nth-child(5) {
		width: 17%;
		top: 72%;
		right: -8%;
	}
	.wtpStarGroup .starType2:nth-child(6) {
		top: 21%;
		right: 29%;
	}
}
@media screen and (min-width: 1400px) {
	.ltJoycon {
		animation: ltJoyconLg 11s infinite;
	}
	.rtJoycon {
		top: -33%;
	}
}
@media screen and (min-width: 1600px) {
	.ltJoycon {
		transform: rotate(63deg);
		animation: ltJoyconLg2 11s infinite;
	}
	.rtJoycon {
		top: -30%;
		right: -40%;
	}
	.wtpImgGroup img {
		max-width: 425px;
	}
}
@media screen and (min-width: 1840px) {
	.rtJoycon {
		top: -30%;
		right: -50%;
	}
}
@media screen and (min-width: 1920px) {
	.wtpStarGroup .starType2:first-child {
		left: 9%;
		top: 8%;
	}
	.wtpStarGroup .starType2:nth-child(2) {
		top: 78%;
    	left: 34%;
	}

}
@media screen and (min-width: 1990px) {
	.ltJoycon {
		transform: rotate(67deg);
		animation: ltJoyconLg3 11s infinite;
	}
	.rtJoycon {
		right: -55%;
	}
}
@media screen and (min-width: 2200px) {
	.ltJoycon {
		transform: rotate(70deg);
		animation: ltJoyconLg4 11s infinite;
	}
	.rtJoycon {
		right: -60%;
	}
}
@media screen and (min-width: 2350px) {
	.rtJoycon {
		right: -65%;
	}
}
/*purchase*/
.purchase {
	width: 100%;
	position: relative;
	margin-top: -3%;
}
/*
.purchase:before {
    content: "";
    background: transparent url(../img/waystoplay/triangle_pattern.png) repeat-x top left;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 2%;
	max-height: 10px;
    width: 100%;
}
*/
.purchaseBG {
	width: 100%;
}
.purchaseCover {
	width: 20%;
    position: absolute;
    left: 5%;
    top: 37%;
    z-index: 1;
}
/*
.purchaseBannerGroup {
    width: 60%;
    position: absolute;
    top: 46%;
    left: 20%;
}
*/
.purchaseBannerGroup img {
	width: 100%;
}
/*
.purchaseBannerGroup h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    width: 100%;
    font-size: 2.65vw;
}
*/
.purchaseBannerGroup {
	width: 65%;
    margin: 0 auto;
    display: none;
    position: absolute;
    top: 34%;
    left: 63%;
    transform: translate(-50%, -20%);
}
.purchaseBannerGroup h2 {
	font-weight: 300;
	font-size: 2.65vw;
	text-align: left;
}
.purchaseBannerGroup h2:first-child {
	font-weight: 700;
	font-size: 3vw;
	text-align: left;
	text-transform: uppercase
}
.purchaseBtn, .purchaseBtnDigital {
    color: white;
    background-color: #ff2824;
    padding: 10px;
    border: 1px solid #932746;
    border-radius: 4px;
    font-size: 12px;
    width: 45%;
    max-width: 200px;
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 39%;
    text-align: center;
	display: block;
}
.purchaseBtn:hover, .purchaseBtnLg:hover, .purchaseBtnDigital:hover  {
	background-color: #FFF;
	color: #ff2824;
}
.purchaseBtnDigital {
    top: 65%;
}
.purchaseButtonGroup {
    position: absolute;
    top: 44%;
    left: 27%;
    display: none;
    width: 80%;
	max-width: 700px;
}
.purchaseBtnLg {
	color: white;
    background-color: #ff2824;
    padding: 10px;
    border: 1px solid #932746;
    border-radius: 4px;
    font-size: 13px;
    width: 45%;
    max-width: 200px;
    text-align: center;
	position: static;
	display: inline-block;
	margin: 2%;
}
.purchaseModal {
    width: 100vw;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    z-index: 100;
    top: 0;
	display: none;
}
.purchaseButtonModal {
	width: 95%;
	margin: 0 auto;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
}
.purchaseModal .purchaseBtnLg {
	padding: 5px
}
.close {
	color: #000;
	position: absolute;
	right: 4%;
	top: 1%;
	font-size: 22px;
	font-weight: 500;
	z-index: 101;
}
.digitalEdition, .retailEdition {
	display: none;
}
.digitalEdition h2, .retailEdition h2 {
	text-align: left;
}

@media screen and (min-width: 400px) {
	.purchaseBannerGroup {
		top: 15%;
	}
	.purchaseBtn {
		top: 45%;
	}
}
@media screen and (min-width: 500px) {
	.digitalEdition, .retailEdition {
		display: block;
		position: absolute;
	}
	.digitalEdition {
		top: 45%;
		left: 28.25%;
	}
	.purchaseBtn, .purchaseBtnDigital {
		left: 28%;
	}
}
@media screen and (min-width: 600px) {
	.purchaseBannerGroup {
		top: 25%;
	}
	.purchaseBtn {
		top: 53%;
	}
}
@media screen and (min-width: 640px) {
	.purchaseCover {
		top: 28%;
	}
	.digitalEdition p {
		font-size: 21px;
	}
}

@media screen and (min-width: 768px) {
	.purchaseBannerGroup h2 {
		font-size: 16px;
		line-height: 1.5;
	}
	.purchaseBannerGroup h2:first-child {
		font-size: 20px;
	}
	.purchaseBtn {
		top: 57%;
	}	
}
@media screen and (min-width: 900px) {
	.purchaseBtnDigital {
		top: 56%;
	}
}

@media screen and (min-width: 1024px) {
	.purchaseButtonGroup {
		display: block;
	}
	.purchaseBtn {
		display: none;
	}	
	.purchaseBannerGroup h1 {
		font-size: 27px;
	}
/*
	.purchaseBannerGroup h2 {
		font-size: 23px;
	}
*/
	.purchaseBannerGroup h2:first-child {
		font-size: 28px;
	}
	.purchaseBannerGroup {
		left: 61%
	}
/*
	.digitalEdition, .retailEdition {
		display: block;
		position: absolute;
	}
	.retailEdition {
		top: 33%;
    	left: 28.25%;
	}
	.digitalEdition {
		top: 69%;
		left: 28.25%;
	}
	.purchaseBtnDigital {
		top: 82%;
		left: 28.25%;
	}
*/
	.digitalEdition p {
		font-size: 2.5vw;
	}
	.purchaseBtnDigital {
		top: 63%;
	}
	.purchaseBtn, .purchaseBtnDigital {
		font-size: 20px;
		max-width: 250px;
	}

}
@media screen and (min-width: 1400px) {
	.purchaseBannerGroup {
		left: 63%;
		top: 43%;
		width: 60%;
	}
	.purchaseCover {
		left: 9%;
	}
	.purchaseButtonGroup {
		left: 32%;
	}
	.retailEdition, .digitalEdition, .purchaseBtnDigital {
    	left: 33%;
	}
/*
	.digitalEdition {
		top: 65%;
	}
	.purchaseBtnDigital {
		top: 77%;
	}
*/
}
@media screen and (min-width: 1730px) {
/*
	.purchaseButtonGroup {
		top: 57%;
	}
*/
}

/*footer area*/
footer {
	width: 100%;
	background-color: #FFF;
	position: relative;
}
.footerContainer {
	width: 90%;
	margin: 0 auto;
	display: block;
	text-align: center;
}
.footerContainer p {
	width: 100%;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
}
.officialLogoFooter {
	width: 50%;
	max-width: 168px;
	display: inline-block;
	margin: 3% auto;
	vertical-align: top;
}
.legalGroup {
	width: 100%;
	max-width: 460px;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	padding-bottom: 15px;
	vertical-align: bottom;
}
.esrb {
	height: 72px;
	width: auto;
	margin-bottom: 30px;
	display: inline-block;
	vertical-align: bottom;
}
.esrbPolicy {
	height: auto;
	margin-bottom: 30px;
	display: inline-block;
}
.webaddress {
	width: 100%;
	max-width: 280px;
}
.legalGroup h3 {
    color: #022662;
    font-weight: 500;
    font-size: 12px;
    margin: 35px auto 20px;
}
.logoGroup {
	width: 100%;
/*	max-width: 180px;*/
	vertical-align: top;
	display: inline-block;
}
.switchFooter {
	width: 47%;
	max-width: 110px;
	margin: 0 auto 30px;
	display: inline-block;
}
.segaLogoFooter {
	width: 47%;
	max-width: 120px;
	margin: 0 1%;
	display: inline-block;
}
@media screen and (min-width: 703px) {
	.legalGroup {
		margin: 3% 20px;
	}
}
@media screen and (min-width: 900px) {
	.logoGroup {
		width: 180px;
		margin-top: 3%;
	}
	.switchFooter, .segaLogoFooter {
		width: 100%;
	}
}
/*loader*/
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ellipsis div {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 11px;
  border-radius: 50%;
  background: #004c9a;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

#loader-bg {
	display: block;
	position: fixed;
	background-color: #FFF;
	overflow: hidden;
	z-index: 99999;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#loader {
	color: #FFF;
	display: block;
	position: absolute;
	z-index: 300;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	font-family: poppins, sans-serif;
	text-align: center;
	text-shadow: 0 0 2.2vw #004c9a, -1px -1px 0 #004c9a, 1px -1px 0 #004c9a, -1px 1px 0 #004c9a, 1px 1px 0 #004c9a;
	font-size: 11vw;
	letter-spacing: -.5vw;
}

@media only screen and (min-width:769px) {
	#loader {
		font-size: 107.47px;
		letter-spacing: -2px;
	}
}
#loading-dots {
	position: absolute;
}
/* Newsletter section */
/*As this is a new section, it is heavily commented to make it easier to update for various sites*/
/*FURTHER NOTE: THIS NEWSLETTER WAS DESIGNED AS A MODAL, IF YOU NEED WITHOUT MODAL LOOK AT CATHERINE FULL BODY*/
/*
.newsletterBG {    
	width: 100%;
    height: 100%;
    color: #000;
    background-color: rgba(0,0,0,.85);
    position: absolute;
    top: 0;
    left: 0;
	display: none;
}
*/
.newsletterBG {
	width: 100%;
	height: 540px;
	max-width: 450px;
	color: #000;
	background-color: #FFF;
	position: fixed;
	top: 0;
	right: 0;
/*    display: none;*/
	transform: translateX(450px);
	transition: transform 0.4s;
	margin-top: 0;
	z-index: 12;
}

/*This controls the actual wrap around the newsletter area. This controls the width of that wrapper as well*/
/*
.newsletterBG .innerWrapper {
	display: block;
	position: fixed;
	width: 90%;
	max-width: 450px;
	margin: 0 auto;
	padding: 30px 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
*/
.newsletterBG .innerWrapper {
	display: block;
	position: absolute;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	right: 0;
	top: 80px;
	transition: all 0.4s;
}
.newsletterHeader {
	text-align: center;
/*	background: rgba(255,255,255,1);*/
}
.hide {
	transform:translateX(0);
}
.fa-times, .closeBtn {   
	color: #175da6;
	font-size: 25px;
	position: absolute;
	top: 90px;
	left: 10px;
	cursor: pointer;
	display: block;
	z-index: 1;
	width: 25px;
}
/*NEW*/
.signUpForm {
	display: none;
}
.ageForm {
	display: block;
	text-align: center;
}
.age {
	border: none;
    border-bottom: 1px solid blue;
    width: 90%;
    margin-top: 50px;
    font-size: 18px;
}
.submitButton, .backToHome {
	background-color: #175da6!important;
    border-radius: initial;
    height: auto;
	clear: both;
    border: 0 none;
    transition: all 0.23s ease-in-out 0s;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: normal;
    line-height: 32px;
    margin: 25px 5px 10px 0;
    padding: 0 22px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    width: auto;
}
.submitButton:hover, .backToHome:hover {
	background-color: #457db7!important;
}
.errorAge {
	color: red;
	font-size: 10px;
	text-transform: uppercase;
	opacity: 0;
}
/*NEW END*/
/*Main title "NEWSLETTER" */
.newsletterHeader h2 {
color: #175da6;
    text-align: center;
    font-size: 35px;
    padding-top: 10px;
    font-weight: 800;
}
/*Smaller header text Sign up...*/
.newsletterHeader h3 {
	font-style: normal;
	font-weight: 300;
	font-family: open-sans, san-serif;
	font-size: 20px;
}
/*_signup is the form itself, the .newsletter class above refers to the section that sits above the actual form*/
#mc_embed_signup {
	background: rgba(255,255,255,1);
/*	background: transparent;*/
}
/*This controls the little mail icon and input for email address, allows them to sit next to eachother and fill the gap caused by inline-block*/
.mc-field-group .fa.fa-envelope, #mc_embed_signup .mc-field-group input {
	display: inline-block;
	margin-right: -5px;
}
/*This controls the mail icon*/
.mc-field-group .fa.fa-envelope {
    font-size: 25px;
    padding: 15px;
    color: #FFF;
    background-color: #175da6;
    width: 55px;
    height: 55px;
	position: relative;
}
.mailWhite {
	width: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*This controls the input field where you type in the email address*/
#mc_embed_signup .mc-field-group input {
	background: #FFF;
    height: 55px;
    width: 80%;
    vertical-align: top;
    font-size: 18px;
    border: 1px solid #175da6;
	border-radius: initial;
	font-weight: 400;
}
/*This controls the label elements, this is the area that has the check boxes and small text about what they are checking for. The
class .privacyNewsletter refers to the span around privacy policy text which gets linked to the privacy policy*/
#mc_embed_signup .mc-field-group label, .privacyNewsletter {
    display: block!important;
    margin-bottom: 3px;
    font-size: 11px;
}
/*style the privacy Policy text*/
a.privacyNewsletter {
	color: red!important;
	display: inline!important;
	font-weight: 600;
	text-decoration: underline;
}
/*controls the sign button. In this case I have the hover state being the same. */
#mc_embed_signup .button, #mc_embed_signup .button:hover {
	background-color: #175da6!important;
	border-radius: initial;
	margin: 0 auto;
	height: auto;
	padding: 10px 22px;
}
#mc_embed_signup .button:disabled {
	opacity: .7
}
#mc_embed_signup .clear {
    clear: both;
    text-align: center;
}
/*Controls the error message that comes up if you don't fill in the email address after clicking into it.*/
#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {
    margin: 4px 0 1em 0;
    padding: 5px 10px;
    background-color: transparent;
	color: red;
}
/*Controls the positioning and width of the email address input box and the text next to the checkboxes*/
#mc_embed_signup .mc-field-group.input-group ul li {
    width: 75%;
    margin-left: 17%;
	margin-top: 15px;
}
/* removes the base check box */
.myCheckbox input {
	display:none!important;
}
/* This is for the custom checkbox itself. */
.myCheckbox span {
	border: 2px solid #175da6;
    display: inline-block;
    font-size: 25px;
    height: 30px;
    width: 30px;
    padding: 0;
    float: left;
    vertical-align: middle;
    border-radius: 4px;
	position: relative;
    top: -4px;
    margin: 4px 13px 0 -45px;
	cursor: pointer;
}
/* This is the check mark within the custom checkbox */
.myCheckbox input:checked + span {	
	left: 10.75px;
    top: 0;
    width: 10px;
    height: 19px;
    border: solid #175da6;
    border-width: 0 4px 4px 0;
    transform: rotate(45deg);	
}
/* This is the box around the checkmark when checked. The original empty checkbox gets replaced by just the checkmark so we need to add this in to make
the box still exists. This is why it is a pseudo class */
.myCheckbox input:checked + span:before {	
    content: "";
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
    top: -4px;
    left: -9px;
    border: 2px solid #313367;
    border-radius: 4px;
    transform: rotate(-45deg);
}
/*controls the success message */
#mc_embed_signup div.response {
    margin: 0 auto;
    padding: 1em 0 .5em 0;
    font-weight: bold;
    top: -1.5em;
    z-index: 1;
    width: 95%;
    font-size: 11px;
    color: darkgreen!important;
}
/*controls the success message (specifically the color) */
@media screen and (min-width: 400px) {
/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 14%;
	}
/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 85%;
	}
}
@media screen and (min-width: 500px) {
	/*	controls where the checkbox/small text sits */
	#mc_embed_signup .mc-field-group.input-group ul li {
		margin-left: 11%;
	}
	/*	controls width of both the email input box and the text next to checkbox*/
	#mc_embed_signup .mc-field-group input, #mc_embed_signup .mc-field-group.input-group ul li {
		width: 87%;
	}
}
/* Newsletter section end */

#scrollup {
	font-size: 50px;
    color: black;
	position: fixed;
    right: 1%;
    bottom: 1%;
    width: 50px;
    z-index: 1000;
	cursor: pointer;
	display: none;
}