@charset "utf-8";
/*Reset*/
* {margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline;}
ol,ul{list-style:none}
a img{border:none;outline:none}
*,:before,:after{box-sizing:border-box}
html,body{width:100%;min-height:100%;position:relative;overflow-x: hidden;}
html{line-height:1;}
body{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden; 
	font-weight: 300;
	font-size:11px;
	line-height:1.5;
	background-color: #000;
	color: #FFF;
	font-family: bookmania, serif;
}
a{outline:none;text-decoration:none}
img{vertical-align:middle}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

@media screen and (min-width: 480px) {
	body {
		font-size: 12.5px;
	}
}
@media screen and (min-width: 1024px) {
	body {
		font-size: 15px;
		line-height:1.7;
	}
}
/*end reset*/

.container {
	width: 100%;
	height: auto;
	position: relative;
}
.innerContainer {
	max-width: 1980px;
	margin: 0 auto;
	position: relative;
}
.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;
}
/*EFLAGS*/
.currentFlag {padding: 10px;border: none;cursor: pointer;height: 50px;}
.eflagsGroup {position: fixed;z-index: 5;right: 1%;top:12%;}
.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: 45px;z-index: 10000;text-align: center;right:22px;top: 55px;background-color: rgba(0, 0, 0, .5);}
.eflagsDropContent li {display: block;}
.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;}
@media screen and (max-width: 950px) {
	.home .eflagsGroup { top: 0;	}
}
@media screen and (max-width: 600px){
	.currentFlag { height: 35px; }
/*	.eflagsGroup { right: 5%; }*/
	.eflagsGroup:after {content: none;}
/*	.eflagsDropContent {width: 310px;right: 10px;}*/
	.eflagsDropContent { width: 28px; top: 33px; right: 7px;}
	.eflagsDropContent a { padding: 3px;}
	.eflagsDropContent a img {height: 15px;	}
}
/*END EFLAGS*/
/*Flags*/
.noFlag {display:none;}
#selected-country{margin-bottom:15px;cursor:pointer}
#country-navigation-wrapper{width:50px;position:absolute;top:25px;right:15px;vertical-align:top;z-index:103}
#country-navigation-wrapper img{border:#FFF 1px solid;width:calc(100% - 2px)}
#country-nav{position:relative;overflow:hidden}
#country-nav div{position:relative;width:100%;margin-left:100%;margin-bottom:15px}
.privacyCertified {cursor: pointer;}
@media screen and (max-width: 400px) {
	#country-navigation-wrapper {top: 15px;}
}

/*Hero Area*/
body#home {
	background-image: none;
}
.heroArea {
	position: relative;
	margin-bottom: -4%;
}
.heroImage {
	width: 100%;
	opacity: 1;
	background-color: #000;
}
.heroContainer {
    width: 80%;
    position: absolute;
    top: 40%;
    left: 10%;
}
.mainPageLogo {
	width: 100%;
}

.callout {
	margin-bottom: 10%;
	width: 120%;
    position: relative;
    right: 10%;
}
.heroBtn {
	width: 25%;
	max-width: 220px;
	position: absolute;
	top: 2%;
	left: 2%;
}
@media screen and (min-width: 769px) {
	body#home {
		background: purple url(../img/hero/darkheart_bg.jpg) center top no-repeat; 
		position:relative;
		width: 100%;
		background-size: 100% auto;
		background-color: #000;
	}
	.heroImage {
		display: none;
	}
	.heroArea {
		height: 900px;
	}

	.heroContainer {
		top: 31%;
		left: 50%;
		text-align: center;
		transform: translate(-50%, -20%);
	}
	.mainPageLogo {
		margin: 0 auto 3%;
		max-width: 600px;
		display: block;
	}
	.callout {
		margin: 0 auto 3%;
		width: 100%;
		max-width: 900px;
		display: block;
		right: inherit;
	}
	.heroBtn {
		left: initial;
		right: 2%;
		top: 28%;
		width: 20%;
		transform: rotate(5deg);
	}
}
/*HERO END*/
/*STORY*/
#story {
	background: url(../img/story/story_bg_small.png) top left no-repeat; 
	position:relative;
	width: 100%;
	background-size: 100% auto;
	margin-bottom: -10%;
	overflow: hidden;
}
.storyTextBox {
	width: 50%;
	text-align: left;
	padding: 10% 0 50% 3%;
}
.storyTextBox .left p {
		text-shadow: 
		-1px -1px 2px rgba(0,0,0,0.5), 
		1px -1px 2px rgba(0,0,0,0.5), 
		-1px 1px 2px rgba(0,0,0,0.5), 
		1px 1px 2px rgba(0,0,0,0.5), 
		-1px -1px 0 rgb(231,53,118), 
		1px -1px 0 rgb(231,53,118), 
		-1px 1px 0 rgb(231,53,118), 
		1px 1px 0 rgb(231,53,118), 
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113);
}
.sectionTitle {
    width: auto;
    height: 38px;
    margin-bottom: 3%;
}
.storyTextBox:before {
    content: "";
    background: url(../img/story/rin_sitting.png) no-repeat center center;
    background-size: 80%;
    position: absolute;
    left: 4%;
    top: 15%;
    width: 500px;
    height: 500px;
}
.storyImgGroup {
	display: none;
}
.storyTextBox .right {
	display: none;
}
.storySheep {
	display: none; 
}
@media screen and (min-width: 380px) {
	.storyTextBox {
		width: 50%;
	}
	.storyTextBox:before {
		left: 15%;
		top: 6%;
	}
}
@media screen and (min-width: 480px) {	
	.storyTextBox {
		padding: 10% 0 35% 3%;
		width: 55%;
	}
	.storyTextBox:before {
		left: 25%;
	}
	.sectionTitle {
		height: 52px;
	}
}
@media screen and (min-width: 600px) {	
	.storyTextBox {
		padding: 10% 0 35% 3%;
	}
/*
	.storyTextBox {
		width: 55%;
	}
*/
	.storyTextBox:before {
		left: 35%;
	}
	.storyImgGroup {
		display: block;
		width: 100%;
		max-width: 475px;
		position: relative;
		margin: 3% auto;
	}
	.storyImgGroup img {
		width: 55%;
		position: absolute;
	}
	.storyImgGroup a:last-child img {
		right: 0;
		top: 45px;
	}
}
@media screen and (min-width: 700px) {	
	.storyTextBox:before {
		left: 40%;
	}
}
@media screen and (min-width: 769px) {	
	.sectionTitle {
		height: 72px;
	}
	.storyTextBox {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	.storyTextBox:before {  	    
		width: 0;
		height: 0;
	}
	.storyTextBox .right, .storyTextBox .left {
		display: inline-block;
		position: relative;
		width: 49%;
		vertical-align: top;
	}
	.storyTextBox .left {
		width: 55%;
	}
	.storyTextBox .right {
		width: 44%
	}
	.storyTextBox .left p {
		width: 100%;
	}
	.storyTextBox .right img {
		width: 100%;
		position: absolute;
		top: 0;
		max-width: 550px;
	}
}
@media screen and (min-width: 1024px) {
	#story {
		background: url(../img/story/story_bg.png) top left no-repeat; 
		background-size: 100% auto;
	}
	.storyTextBox {
		padding: 5% 0 340px 3%;
	}
}
@media screen and (min-width: 1375px) {
	.storySheep {
		display: block;
		width: 22%;
		max-width: 400px;
		position: absolute;
		left: -16%;
		bottom: 4%;
		z-index: 1;
	}
}
/*STORY END*/
/*TRAILER*/
.heroExtras {
	display: none;
}
#trailer {
    background: url(../img/trailers/trailers_bg_small.png) top left no-repeat;
    position: relative;
    width: 100%;
    background-size: 100% auto;
    display: block;
    margin-bottom: -30%;
    padding-bottom: 10%;
}
.trailer {
	width: 70%;
	margin: 0 auto;
	display: block;
	text-align: center;
}
.trailerContainer {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.playTrailer {
	width: 100%;
	max-width: 450px;
}
.trailerGroup {
	padding: 10% 0;
	position: relative;
}
.trailerArrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 10%;
    max-width: 55px;
	z-index: 10;
	display: block;
}
.trailerPrev {
	left: 2px;
}
.trailerNext {
	right: 2px;
	transform: translateY(-50%) rotate(180deg);
}
.trailerGroup .sectionTitle {
	margin-left: 3%;
}
@media screen and (min-width: 769px) {	
	.trailerContainer {
		width: 90%;
		max-width: 1600px;
	}
	.trailer {
		width: 90%;
	}
	#trailer {
		background: url(../img/trailers/trailers_bg.png) top left no-repeat;
		background-size: 100% auto;
		display: block;
		margin-bottom: -15%;
	}
	.heroExtras {
		display: block;
		position: absolute;
		left: 2%;
		top: 62%;
		width: 33%;
	}	
	.heroTrailer {
		display: block;
		width: 85%;
		max-width: 300px;
		margin-bottom: 3%;
	}
	.heroESRB {
		display: block;
		height: 72px;
	}
	.trailerPrev {
		left: -38px;
	}
	.trailerNext {
		right: -38px;
	}
}
@media screen and (min-width: 1200px) {	
	.trailer {
		width: 95%;
	}
	.trailerPrev {
		left: -48px;
	}
	.trailerNext {
		right: -48px;
	}
	#trailer {
		margin-top: 4%;
	}
}
/*TRAILER END*/
/*CHARACTER*/
#character {
	background: url(../img/characters/cfb_chara_bg_small.png) center top no-repeat; 
	position:relative;
	width: 100%;
	background-size: 100% auto;
	display: block;
	padding-bottom: 15%;
    margin-bottom: -18%;
}
.individualCharacter {
	position: relative;
}
.individualCharacter:not(:first-of-type) {
	margin-top: 25px;
}
.individualCharacter:last-child {
	padding-bottom: 25px;
}
.characterContainer {
	width: 95%;
	margin: 0 auto;	
    padding-top: 15%;
}
.characterContainer h1 {
	text-align: center;
	font-size: 26px;
	text-shadow: 
		-1px -1px 0 rgb(231,53,118),
		1px -1px 0 rgb(231,53,118),
		-1px 1px 0 rgb(231,53,118),
		1px 1px 0 rgb(231,53,118),
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113), 
		0px 0px 22px rgb(238,38,113);
	margin-bottom: 8%;
}
.characterImg {
    width: 50%;
    margin-left: 3%;
}
.characterTextLeft .characterImg {
	width: 38%;
	margin-left: 58%;
}
.catherine .characterImg {
	width: 45%;
	margin-left: 57%;
}
.characterHeader {
	height: 62px;
/*	margin-bottom: 20px;*/
}
.characterTextLeft .characterHeader {
	height: 31px;
}
.underNameText {
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
.underNameText span {
/*
	background-color: rgba(0,0,0,.3);
	padding: 3px 8px;
	text-shadow: 
		-1px -1px 0 rgb(0,0,0),
		1px -1px 0 rgb(0,0,0),
		-1px 1px 0 rgb(0,0,0),
		1px 1px 0 rgb(0,0,0),
		0px 0px 5px rgb(255,255,255), 
		0px 0px 10px rgb(255,255,255), 
		0px 0px 18px rgb(255,255,255);
*/
	padding: 3px 8px;
	text-shadow: 
		-1px -1px 2px rgba(0,0,0,0.5), 
		1px -1px 2px rgba(0,0,0,0.5), 
		-1px 1px 2px rgba(0,0,0,0.5), 
		1px 1px 2px rgba(0,0,0,0.5), 
		-1px -1px 0 rgb(231,53,118), 
		1px -1px 0 rgb(231,53,118), 
		-1px 1px 0 rgb(231,53,118), 
		1px 1px 0 rgb(231,53,118), 
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113);
	
}
.characterText {
	background-color: rgba(0,0,0,.3);
	padding: 8px;
	text-shadow: 
		-1px -1px 2px rgba(0,0,0,0.5), 
		1px -1px 2px rgba(0,0,0,0.5), 
		-1px 1px 2px rgba(0,0,0,0.5), 
		1px 1px 2px rgba(0,0,0,0.5), 
		-1px -1px 0 rgb(231,53,118), 
		1px -1px 0 rgb(231,53,118), 
		-1px 1px 0 rgb(231,53,118), 
		1px 1px 0 rgb(231,53,118), 
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113);
/*
	text-shadow: 
		-1px -1px 0 rgb(231,53,118),
		1px -1px 0 rgb(231,53,118),
		-1px 1px 0 rgb(231,53,118),
		1px 1px 0 rgb(231,53,118),
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113);	
*/
    position: absolute;
    top: 25%;
    width: 55%;
    right: 0;
}
.characterTextLeft .characterText {
	left: 0;
}
.charQuoteTop, .charQuoteBottom {
	text-align: center;
}
.charQuoteTop {
	margin-left: 28px;
}
.charQuoteTop span, .charQuoteBottom span {
/*
    background-color: rgb(0,0,0);
    padding: 0 8px;
    margin-bottom: 8px;
*/
	
	background-color: rgba(0,0,0,.5);
	padding: 0 10px;
	text-shadow: 
		-1px -1px 2px rgba(0,0,0,0.5), 
		1px -1px 2px rgba(0,0,0,0.5), 
		-1px 1px 2px rgba(0,0,0,0.5), 
		1px 1px 2px rgba(0,0,0,0.5), 
		-1px -1px 0 rgb(231,53,118), 
		1px -1px 0 rgb(231,53,118), 
		-1px 1px 0 rgb(231,53,118), 
		1px 1px 0 rgb(231,53,118), 
		0px 0px 5px rgb(238,38,113), 
		0px 0px 10px rgb(238,38,113), 
		0px 0px 18px rgb(238,38,113);
	font-style: italic;
	line-height: 1.7;
}
.charImgGroup {
    width: 94%;
	max-width: 550px;
    margin: 3% auto;
    display: block;
    position: absolute;
    bottom: 27%;
    left: 3%;
}
.charImgGroup img {
	width: 55%;
	position: absolute;
}
.charImgGroup a:last-child img {
	right: 0;
	top: 45px;
}
.quoteGroup {
    position: absolute;
    top: 62%;
    right: 3%;
}
.characterOnlyLeft, .characterOnlyRight {
	display: none;
}
.characterTextRight, .characterTextLeft {
	display: block;
}
.vincentSheep, .katherineSheep, .rinSheep, .catherineSheep {
	display:none;
}
@media screen and (min-width: 500px) {
	.charImgGroup {
		width: 80%;
		left: 50%;
		bottom: 34%;
		transform: translate(-50%);
	}
	.characterHeader {
		height: 85px;
	}
	.characterTextLeft .characterHeader {
		height: 44px;
	}
	.characterContainer {
		font-size: 12.5px;
	}	
	.characterContainer .quoteGroup {
		font-size: 14px;
	}
	.characterImg {
		width: 40%;
	}
	.characterTextLeft .characterImg {
		width: 28%;
		margin-left: 63%;
	}
	.catherine .characterImg {
		width: 35%;
		margin-left: 62%;
	}
	.quoteGroup {
		top: 50%;
	}	
}
@media screen and (min-width: 640px) {
	.characterContainer h1 {
		font-size: 30px;
		width: 450px;
		margin: 0 auto 75px;
		display: block;
	}
	.characterHeader {
		margin-left: 15%;
	}
	.characterTextLeft .quoteGroup {
		position: absolute;
		right: initial;
		left: 20%;
	}
}
@media screen and (min-width: 769px) {
	#character {
		margin-bottom: -15%;
	}
	.characterContainer {
		padding-top: 7%;
	}
	.characterContainer h1 {
		font-size: 45px;
		width: 600px;
	}
	.characterOnlyLeft, .characterTextRight, .characterOnlyRight, .characterTextLeft {
		display: inline-block;
		vertical-align: top;
	}
	.characterImg {
		display: none;
	}
	.characterOnlyLeft {
		width: 30%;
		max-width: 300px;
	}
	.characterOnlyRight {
		width: 20%;
		max-width: 190px;
	}
	.catherineOnlyRight {
		width: 30%;
		max-width: 220px;
	}
	.characterTextRight, .characterTextLeft {
		width: 69%;
		max-width: 600px;
		text-align: left;
	}
	.characterImgLargeOnly {
		width: 100%;
	}
	.characterText, .quoteGroup, .charImgGroup, .characterTextLeft .quoteGroup {
		position: static;
	}
	.characterText {
		width: 85%;
		margin: 0 0 5%;
	}
	.underNameText {
		text-align: left;
	}
	.charImgGroup {
		width: 100%;
		max-width: 550px;
		display: block;
		bottom: inherit;
		left: inherit;
		transform:translate(0);
	}
	.individualCharacter {
		position: relative;
		text-align: center;
		max-width: 1600px;
		margin: 0 auto;
	}
	#character {
		background: url(../img/characters/characters_bg_desktop.png) center top no-repeat; 
		position:relative;
		width: 100%;
		background-size: 100% auto;
		display: block;
	}
	.vincentSheep {
		display: block;
		position: absolute;
		width: 22%;
		max-width: 400px;
		z-index: 1;
		right: 0;
		top: -10%;
	}
	.katherineSheep {
		display: block;
		position: absolute;
		width: 18%;
		max-width: 400px;
		z-index: 1;
		right: 0%;
		top: -14%;
	}
	.rinSheep {
		display: block;
		position: absolute;
		width: 18%;
		max-width: 245px;
		z-index: 1;
		right: 41%;
		top: -14%;
	}
	.catherineSheep {
		display: block;
		position: absolute;
		width: 22%;
		max-width: 245px;
		z-index: 1;
		right: 26%;
		top: -14%;
	}
	.characterHeader {
		margin-left: 0;
	}
}
@media screen and (min-width: 1024px) {
	.characterContainer {
		font-size: 15px;
	}
	.characterContainer .quoteGroup {
		font-size: 17px;
	}
	.katherineSheep {
		right: 2%;
		top: -5%;
	}
	.rinSheep {
		top: -22%;
	}
	.catherineSheep {
		right: 34%;
	    top: -20%;
	}
	.charQuoteTop span, .charQuoteBottom span {
		line-height: 1.75;
	}	
}
@media screen and (min-width: 1500px) {
	.vincentSheep {
		right: 7%;
	}
}
/*CHARACTER END*/
/*PURCHASE*/
#purchase {
	background: url(../img/purchase/purchase_bg_small.png) center top no-repeat; 
	position:relative;
	width: 100%;
	background-size: 100% auto;
	display: block;
/*	overflow-x: hidden;*/
	padding-top: 5%;
}
.purchaseTop {
	width: 100%;
	display: none;
}
.purchaseGroup {
	max-width: 1600px;
	margin: 18% auto 0;
	display: block;
}
.le img {
	width: 95%;
	margin: 0 auto;
	max-width: 500px;
	display: block;
}
.se img {
	width: 50%;
	margin: 0 auto;
	display: block;
	max-width: 550px;
}
.pe img {
	width: 95%;
	margin: 0 auto;
	max-width: 1000px;
	display: block;
}
#purchase h1 {
	text-align: center;
	font-size: 26px;
	text-shadow: 
		0 0 2.2vw rgb(184,31,114), -.2vw -.2vw 0 rgb(184,31,114), .2vw -.2vw 0 rgb(184,31,114), -.2vw .2vw 0 rgb(184,31,114), .2vw .2vw 0 rgb(184,31,114);
/*
		-1px -1px 0 rgb(184,31,114),
		1px -1px 0 rgb(184,31,114),
		-1px 1px 0 rgb(184,31,114),
		1px 1px 0 rgb(184,31,114),
		0px 0px 5px rgb(184,31,114), 
		0px 0px 8px rgb(184,31,114), 
		0px 0px 13px rgb(255,255,255), 
		0px 0px 18px rgb(184,31,114), 
		0px 0px 22px rgb(184,31,114);
*/
	margin-bottom: 3%;
	font-family: comic-serif-pro, sans-serif;
}
.purchaseButton {
    position: relative;
    width: 275px;
    margin: 0 auto 3%;
}
.purchaseButton img {
	width: 100%;
}
.purchaseButton p {
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -30%);
	color: #FFF;
	font-size: 18px;
	font-family: bookmania, serif;
	letter-spacing: 2px;
	width: 100%;
}
.dropdown {
	position: relative;
	text-align: center;
	margin: 25px auto 0;
}
.dropdown button {
	background-color: transparent;
	border: none;
}
.dropdownList {
	display: none;
	position: relative;
	width: 90%;
	z-index: 1;
	left: 5%;
	padding-bottom: 30px;
}
.dropdownList a {
	color: black;
	text-decoration: none;
	display: block;
}
.dropdown:hover .dropdownList {
	display: block;
}
.purchaseLarge {
	width: 95%;
	margin: 0 auto;
	display: block;
	text-align: center;
}
.purchaseLarge .purchaseButton {
	width: 49%;
	max-width: 275px;
	display: inline-block;
}
.purchaseLarge .purchaseButton:nth-child(odd) {
	margin-right: 15px;
}
.dropdown {
	display: block;
}
.purchaseLarge {
	display: none;
}
@media screen and (min-width: 640px) {
	#purchase h1 {
		font-size: 30px;
	}
	.dropdown {
		display: none;
	}
	.purchaseLarge {
		margin-top: 25px;
		display: block;
		    max-width: 1200px;
	}
}
@media screen and (min-width: 769px) {
	.purchaseGroup {
		margin: 0 auto;
	}
	#purchase h1 {
		font-size: 35px;
	}
	.purchaseTop {
		display:block;
	}
	#purchase {
		background: url(../img/purchase/purchase_bg_repeat.jpg) center top no-repeat, url(../img/purchase/heart_bg_bottom.jpg) 0 2px repeat-y; 		
		position:relative;
		width: 100%;
		background-size: 100% auto;
		display: block;
	}
	#purchase .innerContainer {
		text-align: center;
		max-width: 1010px;
	}
}
@media screen and (min-width: 1024px) {
	.glamshot {
		width: 100%;
	}
	#purchase .sectionHeader {
		margin-left: 0;
	}
}
@media screen and (min-width: 1300px) {
	#purchase {
		background-position: center top, 0 4px; 		
	}
}
/*PURCHASE END*/
/* STICKY FOOTER*/

.stickyFooter { display: none }
@media screen and (min-width: 769px) {
	.stickyFooter {
		display: block;
		position: fixed;
		bottom: 0;
		background-color: #250e18;
		width: 100%;
		height: 90px;
		z-index: 1;
	}
	.stickyContainer {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		text-align: center;
	}
	.stickyContainer > img:first-child {
		margin: 0 4%;
	}
	.stickyContainer > .socialLinksSticky {
		margin: 0 2%;
	}
	.rating {
		vertical-align: middle;
		display: inline-block;
		height: 72px;
	}
	.stickyLogo {
		height: 80px;
		display: inline-block;
		vertical-align: middle;
	}
	.socialLinksSticky {
		display: inline-block;
		vertical-align: middle;
		width: 300px;
	}
	.socialLinksSticky img {
		height: 90px;
		margin: 0 -5%;
	}

	.socialLinksSticky > a:not(:last-child) img {
/*		margin-right: 15px;*/
	}
	
}
/* STICKY FOOTER END*/
/*FOOTER SECTION*/
footer {
	background-color: #250e18;
	text-align: center;
	z-index: 2;
}
.footerContainer {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
	padding-bottom: 3%;
}
hr.fadedLine {
    border: 0;
    height: 1px;
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.75),hsla(0,0%,100%,0));
	margin: 5px auto;
}
.privacyPolicy {
	color: white;
	text-decoration: none;
	margin-right: 20px;
}
.socialLinks img {
	height: 100px;
	margin: 0 auto;
}
.copy {
	font-size: 9.5px;
}
.pslegalLogo {
	height: 14px;
}
.ps4legalLogo {
	height: 10px;
}
/*
.socialLinks:not(:last-child) img {
	margin-right: 15px;
}
*/
.footerLogos img {
	max-height: 75px;
	margin: 2%;
	vertical-align: middle;
}
/*FOOTER END*/
/*SCROLL*/
#scrollup {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    display: none;
    text-indent: -9999px;
    cursor: pointer;
    z-index: 10;
}
#scrollup img {
    display: block;
    width: 100%;
}
@media screen and (min-width: 768px) {
	#scrollup {
		width: 76px;
    	height: 76px;
	}
}
/*SCROLL END*/
/*LOADER*/
#loader-bg {
	display: block;
	position: fixed;
	background-color: #260615;
	overflow: hidden;
	z-index: 99999;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#loader {
	display: block;
	position: absolute;
	z-index: 300;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	font-family: comic-serif-pro, serif;
	text-align: center;
	-webkit-text-stroke: .3vw #e73576;
	text-shadow: 0 0 2.2vw #e4578a, -.3vw -.3vw 0 #e73576, .3vw -.3vw 0 #e73576, -.3vw .3vw 0 #e73576, .3vw .3vw 0 #e73576;
	font-size: 11vw;
	letter-spacing: -.5vw;
}

@media only screen and (min-width:769px) {
	#loader {
		-webkit-text-stroke: 2.835px #e73576;
		font-size: 107.47px;
		text-shadow: 0 0 35.79px #e4578a, -2.835px -2.835px 0 #e73576, 2.835px -2.835px 0 #e73576, -2.835px 2.835px 0 #e73576, 2.835px 2.835px 0 #e73576;
		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*/
.newsletterBG {width: 100%; height: auto; color: #000;background-color: rgba(0,0,0,.5);}
/*This controls the actual wrap around the newsletter area. This controls the width of that wrapper as well*/
.newsletterBG .innerWrapper {
	display: block;
	position: relative;
	width: 90%;
	max-width: 450px;
	margin: 0 auto;
	padding: 30px 0;
}
.newsletterHeader {
	text-align: center;
	background: rgba(255,255,255,.65);
}
/*Main title "NEWSLETTER" */
.newsletterHeader h2 {
	color: white;
	text-align: center;
	font-size: 26px;
	text-shadow: 
		-1px -1px 0 rgb(184,31,114),
		1px -1px 0 rgb(184,31,114),
		-1px 1px 0 rgb(184,31,114),
		1px 1px 0 rgb(184,31,114),
		0px 0px 5px rgb(184,31,114), 
		0px 0px 8px rgb(184,31,114), 
		0px 0px 13px rgb(255,255,255), 
		0px 0px 18px rgb(184,31,114), 
		0px 0px 22px rgb(184,31,114);
	margin-bottom: 3%;
	font-family: comic-serif-pro, sans-serif;
	padding-top: 10px;	
}
/*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,.65);
}
/*This ccontrols 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: #e62d8b;
    width: 55px;
    height: 55px;
}
/*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 #e62d8b;
	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: #e62d8b!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 #e62d8b;
    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 #e62d8b;
    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 #e62d8b;
    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: 88%;
	}
}
/* Newsletter section end */