@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-size: 100%; font:inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
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;}
/* End Reset */
body {width: 100%; margin: 0px; padding: 0px; background-color: #000; font-family: "eurostile",sans-serif; font-weight: 500;line-height: 1; overflow-x:hidden; overflow-y: auto;}
.viewLarge { display: block;}
.viewSmall { display: none;}
/*header and menu*/
.header {background-color: #000; width: 100%; height: 65px;text-align: center;position: relative;}
.social {position: absolute; right: 0; top: 10%;}
.social li {display: inline-block; margin-right: 10px;}
.social li img:hover {opacity: .75;}
.gameLogo {position: absolute; left: 0; width: 300px;z-index: 1;}
.gameLogo img {width: 100%;}
.gameLogoUnderMenuBar {display: none;}
nav {width: 90%; position: relative; max-width: 1100px;margin: 0 auto;font-size: 1.2em;}
nav ul li {width: 16%;display: inline-block;text-align: center;}
nav a {text-decoration: none; margin-right: 10px; color: white;padding: 10px;}
nav a:hover, .current {color: #52c5ea;}
.hamburger {display: none;}
@media screen and (max-width: 1250px) { 
	.social img {width: 45px;}
}

@media screen and (max-width: 1092px) {
	.hamburger {display: block;vertical-align: middle;}
	.gameLogo {display: none;}
	header nav ul{width:100%;height: auto;display: block;margin: 0 auto;background-color: #000;}
	nav {width: 100%; }
	nav ul li {width: 20%;min-width: 150px;}
	.gameLogoUnderMenuBar {display: block;width: 60%; margin: 0 auto;}
}
@media screen and (max-width: 500px) { 
	.gameLogoUnderMenuBar {width: 80%;}
}
/*loader*/
.redSpark {opacity: 0.5;width: 50%;}

#loader-bg{
	display:none;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#000;
	z-index:1000; 
	overflow:hidden;
}
.ie8 #loader-bg {display:none;position:fixed;width:100%;height:100%;top:0;left:0;background:url(../img/common/redspark.png) center center no-repeat;background-color:#000;z-index:200}

#loader{
	display:none;
	position:absolute;
	z-index:300;
	width:130px;
	height:20px;
	top:50%;
	left:50%;
	transform: translate(-50%, 0%);
}
#loader2{
	display:none;
	position:absolute;
	z-index:300;
	width: 70%;
	top:50%;
	left:50%;
	transform: translate(-25%, -10%);
}
.ie8 #loader{display:none;background:url(../img/common/text-loading.gif) center center no-repeat;position:absolute;z-index:300;width:130px;height:20px;top:0;left:50%;margin-left:-65px}
@media screen and (max-width: 1200px) {
	#loader2 {width: 100%;transform: translate(-35%, -10%);}
	.redSpark {width: 60%;}	
}
@media screen and (max-width: 500px) {
	#loader2 {width: 100%;transform: translate(-40%, -10%);}
	.redSpark {width: 80%;}	
}
/*

loader
.redSpark {opacity: 0.5;}
#loader-bg{display:none;position:fixed;width:100%;height:100%;top:0;left:0;background-color:#000;z-index:1000; overflow:hidden;}
.ie8 #loader-bg{display:none;position:fixed;width:100%;height:100%;top:0;left:0;background:url(../img/common/redspark.png) center center no-repeat;background-color:#000;z-index:200}
#loader{display:none;position:absolute;z-index:300;width:130px;height:20px;top:50%;left:50%;margin-top:-10px;margin-left:-65px}
#loader2{display:none;position:absolute;z-index:300;width:580px;height:450px;top:50%;left:45%;margin-top:-225px;margin-left:-290px}
.ie8 #loader{display:none;background:url(../img/common/text-loading.gif) center center no-repeat;position:absolute;z-index:300;width:130px;height:20px;top:0;left:50%;margin-left:-65px}
*/

/*footer*/
footer{background-color:#000}
.footer_banner{width: 90%; padding: 30px 0; margin: 0 auto; text-align: center;}
.footer_banner div {display: inline-block; vertical-align: middle;margin: 2%;}
#esrb img, #esrbPrivacy img {height:72px;}
#atlus img, #nintendo3DS img {height: 50px;}
.copyright{text-align:center;padding-top:20px;padding-bottom:20px;background-color:#000;color:#FFF;font-weight:400;letter-spacing:normal;border-top-width:2px}
.fade-border{display: block;border: 0;height: 1px;width: 100%;margin: 0;background-image: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));}
.hover-fade:hover {opacity: .75;}
#footer-2{color:#FFF;text-align:center;width:90%;margin: 1% auto 0;}
#footer-2 a{color:#FFF;text-decoration:none;font-size:15px;display:inline-block;padding:20px}
@media (min-width: 321px)and (max-width: 500px) {
	.footer_banner{display:block; width: 80%;margin: 0 auto;}
	.footer_banner div{display:block;width:100%;text-align:center;padding:10px 0; margin: 0 auto;}
	.copyright {width: 90%;margin: 0 auto;}
}
/*end footer*/
/*fancybox*/
.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;
	-o-transition: opacity  .3s ease-out;
}
.isHover:hover {
	opacity:.65;
	cursor:pointer;
}
.fancybox-overlay .fancybox-opened .fancybox-skin{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
.fancybox-overlay .fancybox-opened .fancybox-skin{background:0 0;}
.fancybox-overlay .fancybox-opened .fancybox-skin .fancybox-close{width:60px;height:60px;position:absolute;top:-18px;right:-18px;cursor:pointer;z-index:8040;}
.fancybox-next span,.fancybox-overlay .fancybox-close,.fancybox-prev span{background:url(../img/common/close.png);}
/*fancybox end*/
/*scroll up*/
#scrollup img {
	position: fixed;
	bottom: 5%;
	right: 3%;
	z-index: 5;
	opacity: .7;
	width: 75px;
	height: auto;
	cursor: pointer;
	display: block;
}
#scrollup {
	display: none;
}
#scrollup img {display: block;}
@media screen and (max-width: 600px) {
	#scrollup img {
		width: 10%;
	}
}

/*scroll up end*/


/*system page*/

.storyBGImage {	background: url('../img/system/system_page_bg.jpg') no-repeat top left fixed; background-size: cover;}
.pageTitle {
	width: 65%;
	margin: 0 auto;
	padding: 5% 0 2%;
}
.regTitle {
	width: 50%;
	margin: 2% auto 0;
}
.pageTitle img, .regTitle img {
	width: 100%;
}
.systemButtonChoices {
	width: 70%;
	text-align: center;
	margin: 0 auto;
}
.systemButtonChoices img {
	width: 220px;
	display: inline-block;
}
.systemButtonChoices img:hover {
	opacity: .65;
}
.systemText {
	color: white;
	font-family: "eurostile", sans-serif; 
	font-weight: 500;
	/*font-size: 1.5em;*/
	font-size: 22px;
    line-height: 35px;
   	text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
}
.headerText {
	width: 70%;
	text-align: center;
	margin: 0 auto 3%;
}
.boxImgGroup {
	width: 90%;
	margin: 5% auto 0;
	text-align: center;
	position: relative;
	z-index: 1;
}
.boxImgGroup > div {
	display: inline-block;
	vertical-align: middle;
}
.centerGroup {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.blueBox {
	width: 40%;
	padding: 2%;
	background: linear-gradient(rgba(9, 76, 176, 0.6), rgba(48, 37, 119, 0.6));
	border-radius: 10px;
	border: 2px solid black;
}
.blueBox img {
	width: 80%;
    text-align: left;
    position: relative;
    right: 11%;
}
.boxImgGroupHalf .blueBox {
	width: 75%;
	margin-bottom: 3%;
	margin-right: auto;
	margin-left: auto;
}
.blueBoxText {
	text-align: left;
}
.blueBoxh {height: 40%;}

.imgGroup1, .imgGroup2, .imgGroup3, .imgGroup4, .imgGroup3Left {
	width: 40%;	
	position: relative;
}
.imgGroup1 a img, .imgGroup2 img, .imgGroup3 img, .imgGroup4 img, .imgGroup3Left img {
	position: absolute;
	border: 1.5px solid #19d8e8;
}
.imgGroup1 > a:first-child img, .imgGroup2 > a:first-child img {
    bottom: -40px;
    left: 15%;
    width: 60%;
}
.imgGroup1 > a:last-child img {
    top: -40px;
    right: 8%;
    width: 50%;
}
.imgGroup1 > a:nth-child(2) img {
    top: 0;
    left: 8%;
    width: 35%;
}
.imgGroup2 > a:last-child img {
    top: -8px;
    right: 8%;
    width: 35%;
}
.imgGroup2 > a:nth-child(2) img {
    top: -25px;
    left: 8%;
    width: 50%;
}
.imgGroup3 a:first-child img {
    bottom: -40px;
    left: 5%;
    width: 65%;
}
.imgGroup3 a:last-child img {
    right: 0;
    width: 65%;
    top: -40px;
}
.imgGroup3Left a:first-child img {
    bottom: -40px;
    left: 0;
    width: 65%;
}
.imgGroup3Left a:last-child img {
    right: 5%;
    width: 65%;
    top: -40px;
}
.imgGroup4 a:first-child img {
	left: 0;
	bottom: 50px;
	width: 50%;
}
.imgGroup4 a:nth-child(2) img {
	right: 4%;
	bottom: 25px;
	width: 50%;
	z-index:1;
}
.imgGroup4 a:nth-child(3) img {
	left: 2%;
	top: -25px;
	width: 50%;
}
.imgGroup4 a:last-child img {
	right: 6%;
	top: 0;
	width: 50%;
}
.centerGroup {
	width: 100%;
	text-align: center;
}
.boxImgGroupHalf {
	width: 35%;
	margin: 2% auto;
	display: inline-block;
}
.boxImgGroupHalf a img, .boxImgGroupHalf img {
	width: 80%;
}
.boxImgGroupHalf img:first-child {
	margin-bottom: 2%;
}
.boxImgGroupHalf a:last-child img {
	margin-bottom: 2%;
	border: 1.5px solid #19d8e8;
}
.boxImgGroup.fullAcross {
	margin: 0 auto;
	text-align: center;
}
.fullAcross .blueBox {
	width: 80%;
	margin: 0 auto;
}
.fiveImageGroup {
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.fiveImageGroup a img {
	width: 30%;
	border: 1.5px solid #19d8e8;
	display: inline-block;
	margin: 2% 2% 0 0;
	right: 0;
}
.lastGroupSpacing {
	padding: 3% 0 8%;
}
.redSpritewrap {display: table; width: 60%; margin: 0 auto; padding: 10px;}
.redSpritewrap .col {display: table-cell; width: 30%; text-align: center; padding: 2%;	background: linear-gradient(rgba(9, 76, 176, 0.6), rgba(48, 37, 119, 0.6));	border-radius: 10px; border: 2px solid black;}
.redSpritewrap .col img {width: 90%;    text-align: left;    position: relative; right: 8%;}
.redSpritewrap .col .coltext {color: white;	font-family: "eurostile", sans-serif; 	font-weight: 500;	/*font-size: 1.5em;*/
	font-size: 22px;    line-height: 35px;	text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;text-align: left;}
.redSpritewrap .mid {display: table-cell; width: 5%;}
.redSpritewrap .mid img {display: none;}
.redSpritewrap .mid:last-child {display: none;}
.redSpritewrap .col-2 {display: table-cell; width: 30%; text-align: center;}
.redSpritewrap .col-2 img {width: 95%; height: auto; border: 1.5px solid #19d8e8;}

@media screen and (max-width: 1280px) {
.systemText {  line-height: 30px;}
.redSpritewrap .col .coltext {line-height: 30px;}
}

@media screen and (max-width: 1200px) {
	.viewLarge { display: none;}
	.viewSmall { display: block;}
	.pageTitle {
		width: 100%;
	}
	.regTitle {
		width: 90%;
	}
	.blueBox > div {
		display: block;		
	}
	.blueBox, .fullAcross .blueBox {
		width: 96%;
	}
	.blueBox img {
		width: 60%;
		right: 21%;
	}
	.fiveImageGroup img {
		width: 45%;
	}
	.boxImgGroup {
		text-align: left;
	}
	.imgGroup1 a img, .imgGroup2 a img, .imgGroup3 a img, .imgGroup4 a img, .imgGroup3Left a img {
		position: static;
		display: inline-block;
		margin: 2%;
	}
	.imgGroup1, .imgGroup2, .imgGroup3, .imgGroup4, .imgGroup3Left {
		width: 100%;
		text-align: center;
	}	
	.imgGroup1 > a:first-child img, .imgGroup2 > a:first-child img, .imgGroup3 a:first-child img, .imgGroup4 a:first-child img, 
	.imgGroup4 a:last-child img, .imgGroup4 a:nth-child(2) img, .imgGroup4 a:nth-child(3) img, .imgGroup3Left a:first-child img {
		bottom: 0;
		left: 0;
		width: 275px;
	}
	.imgGroup1 > a:last-child img, .imgGroup2 > a:nth-child(2) img, .imgGroup3 a:last-child img, .imgGroup3Left a:last-child img  {
		bottom: 0;
		right: 0;
		width: 275px;
	}
	.imgGroup1 > a:nth-child(2) img, .imgGroup2 > a:last-child img {
		bottom: 0;
		left: 0;
		width: 220px;
	}
	.redSpritewrap {width: 90%;}
	.imgGroup1 #extraWidth {width: 275px;}
	.imgGroup3Left #bitSmaller, .imgGroup1 #bitSmaller {width: 220px;}
}
@media screen and (max-width: 768px) { 
.redSpritewrap .col {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 0px;}
.redSpritewrap .mid {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
.redSpritewrap .mid img {display: block; text-align: center; margin-left: auto; margin-right: auto; width: 70%; height: auto; border: 1.5px solid #19d8e8;}
.redSpritewrap .mid:last-child {display: block; width: 99%; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
.hid {display: none;}
.redSpritewrap .col img {width: 80%; text-align: left;  position: relative; right: 8.5%; margin-top: 10px;}
.redSpritewrap .col .coltext {padding: 0px 2% 2% 2%;}
}
@media screen and (max-width: 609px) {
	
	.imgGroup3Left #bitSmaller, .imgGroup1 #bitSmaller {width: 275px;}
}
@media screen and (max-width: 600px) {
	.boxImgGroupHalf {
		width: 100%;
		display: block;
	}
	.boxImgGroupHalf a:first-child img {
		width: 90%;
	}
	.boxImgGroupHalf a:last-child img, .fiveImageGroup a img {
		width: 70%;
	}
}
@media screen and (max-width: 480px) {
.systemText {  line-height: 26px; font-size: 18px;}
.redSpritewrap .col .coltext {line-height: 18px; font-size: 26px;}
}
@media screen and (max-width: 450px) {
	.blueBox img {
		width: 90%;
		right: 7%;
	}
	/*.systemText {
		font-size: 1.0em;
		line-height: 20px;
	}*/
	.redSpritewrap .col .coltext {
		font-size: 1.0em;
		line-height: 20px;
	}
}
/*system page end*/
/*character page*/
.characterBGImage {	background: #000 url('../img/character/character_bg.png') no-repeat center center fixed; background-size: cover;}
.extraMarginTop {
	margin-top: 12%;
}
.characterImage .hideCharacterLarge {
	display: inline-block;
}
.characterImage .hideCharacterSmall {
	display: none;
}
.characterBlueBox {
	width: 70%;
	padding: 2%;
	background: linear-gradient(rgba(9, 76, 176, 0.6), rgba(48, 37, 119, 0.6));
	border-radius: 10px;
	border: 2px solid black;
	box-shadow: 0px 0px 35px 8px white;
}
.characterBlueBox img {
	width: 30%;
    text-align: left;
    position: relative;
    right: 32%;
}
.characterBlueBox .blueBoxText {
	text-align: left;
	margin-left: 4%;
	width: 50%;
}
#protagonist, #jimenez {
	position: absolute;
	right: 10%;
	top: -170px;
}
#jimenez {
	top: -90px;
}
#arthur {
	position: absolute;
	right: 10%;
	bottom: 0;
}
#gore/*, #zelenin*/ {
	position: absolute;
	left: 10%;
	top: -100px;
}
#zelenin {
	position: absolute;
	left: 12%;
	top: -100px;
}
#alex {
    position: absolute;
    left: 10%;
    top: -8%;
    z-index: 5;
    width: 32%;
}
#protagonist img, #jimenez img, #gore img, #zelenin img, #arthur img {
	width: 60%;
}
#alex img {
	width: 100%;
}
#alexText {
	width: 90%;
}
.extraMarginTopAlex {
	margin-top: 7%;
	padding-bottom: 5%;
}
.characterBlueBox .alexImgTop {
	position: relative;
	width: 60%;
	left: 35%;
	display: block;
	margin-bottom: 2%;
}
.characterBlueBox .alexImgBottom {
	position: relative;
	width: 60%;
	right: 1%;
	display: inline-block;
	margin: 5% auto 2%;
	vertical-align: middle;
}
.georgeGroup {
	width: 92%;
	margin: 0 auto;
}
.georgeTextGroup {
	display: inline-block;
	width: 37%;
	vertical-align: middle;
}
.georgeTextGroup img {
	width: 90%;
	position: relative; 
	right: 3%;
}
#georgeTextGroup {
	width: 100%;
}
.quoteLeft, .quoteRight {
	text-align: left;
	font-size: 1.8em;
	width: 40%;
	margin-right: 30%;
}
.quoteRight {
	margin-left: 47%;
}
.characterBlueBox .moveToRight {
	right: -10%;
}
 .charDescMoveRight {
	position: relative;
	left: 42%;
}
@media screen and (max-width: 1200px) {
	#characters {
		width: 90%;
	}
	.boxImgGroup {
		text-align:center;
	}
	.characterBlueBox .blueBoxText {
		margin-left: 0%;
	}
	.characterBlueBox img {
		width: 50%;
		right: 26%;
		text-align: left!important;
	}
	#protagonist, #jimenez {
		right: 8%;
		top: -80px;
	}
	#arthur {
		right: 8%;
	}
	#gore, #zelnin {
		left: 8%;
		top: -80px;
	}
	#protagonist img, #jimenez img, #gore img, #zelenin img, #arthur img {
		width: 55%;
	}
	#alex {
		width: 37%;
	}
	.georgeGroup {
		width: 100%;
	}
	.georgeTextGroup {
		display: block;
		width: 100%;
	}
	.georgeTextGroup img {
		width: 50%;
		right: 26%;
	}
	.characterBlueBox .moveToRight {
		right: -16%;
	}
	.alexImgBottom {
		display: block;
	}
}
@media screen and (max-width: 1100px) {
	#gore/*, #zelenin*/ {
		left: 2%;
	}
	 #zelenin {
		left: 5%;
	}
}
@media screen and (max-width: 1000px) {
	#protagonist, #jimenez, #arthur {
		right: 2%;
	}
}
@media screen and (max-width: 875px) {
	#protagonist, #jimenez, #gore, #zelenin, #arthur, #alex {
		position: relative;
		top: 0;
	}
	#alex {
		width: 60%;
	}
	#protagonist img, #jimenez img, #gore img, #zelenin img, #arthur img, #alex img {
		margin: 0 auto;
	}
	.characterBlueBox .blueBoxText {
		width: 100%;
	}
	.extraMarginTop {
		margin-top: 2%;
	}
	.characterBlueBox {
		width: 90%;
	}
	.characterImage .hideCharacterSmall {
		display: none;
	}
	.characterImage .hideCharacterLarge {
		display: block;
	}
	.charDescMoveRight {
		left: 0;
	}
	.characterBlueBox .moveToRight {
		right: 26%;
	}
	.quoteLeft, .quoteRight {
		width: 90%;
		margin: 0 auto 2%;
		text-align: center;
	}
	#alexText {
		width: 100%;
	}
	.characterBlueBox .alexImgTop {
		left: 20%;
	}
}
@media screen and (max-width: 500px) {
	.characterBlueBox .alexImgBottom {
		width: 100%;
		right: 0;
	}
	.characterBlueBox .alexImgTop {
		left: 0%;
		width: 100%;
	}
}
@media screen and (max-width: 450px) {
	.characterBlueBox img {
		width: 90%;
		right: 7%;
	}
	.characterBlueBox .moveToRight {
    	right: 7%;
	}
}
/*lightening for character page*/
.lighteningHolder {
	position: relative;
}
.lightening {
	width: 45%;
    position: absolute;
    top: -70px;
    left: 20%;
    opacity: 0.45;
    z-index: 0;
}
.lightening2 {
	width: 30%;
    position: absolute;
    top: -70px;
    left: 30%;
    opacity: 0.45;
    z-index: 0;
}
.lightening3 {
    width: 50%;
    position: absolute;
    top: -180px;
    left: 12%;
    opacity: 0.45;
    z-index: 0;
}
.lightening4 {
	width: 55%;
    position: absolute;
    top: -258px;
    left: 20%;
    opacity: 0.45;
    z-index: 0;
}
.lightening5 {
    width: 35%;
    position: absolute;
    top: -37px;
    left: 27%;
    opacity: 0.45;
    z-index: 0;
}
@media screen and (max-width: 1200px) {
	.lightening {
		width: 65%;
	}	
	.lightening2 {
		width: 48%;
		left: 25%;
	}	
	.lightening3 {
		width: 68%;
		left: 10%;
		top: -90px;
	}	
	.lightening4 {
		width: 65%;
		top: -199px;
		left: 15%;
	}	
	.lightening5 {
		width: 75%;
		top: -37px;
		left: 8%;
	}
}
@media screen and (max-width: 875px) {
	.lightening {
		width: 95%;
		left: 3%;
		overflow-x: hidden;
		overflow-y: auto;
	}	
	.lightening2 {
		width: 90%;
		left: 5%;
		overflow-x: hidden;
		overflow-y: auto;
	}	
	.lightening3 {
		width: 168%;
		left: 3%;
		top: -90px;
		overflow-x: hidden;
		overflow-y: auto;
	}	
	.lightening4 {
		width: 105%;
		top: -179px;
		left: -6%;
		overflow-x: hidden;
		overflow-y: auto;
	}	
	.lightening5 {
		width: 135%;
		top: -14px;
		left: 5%;
		overflow-x: hidden;
		overflow-y: auto;	
	}
}


/*================ purchase page ========================*/
.purchaseBGImage {	background: url('../img/purchase/starbg.jpg') no-repeat center top; background-size: cover; width: 100%; margin: 0; padding: 0; min-height: 200px;}
.purhcaselines {width: 100%; background: url(../img/home/lines.png) repeat center top; height: 100%;}
.wrap {width: 80%; margin: 0 auto; margin-top: 2%; text-align: center; margin-bottom: 2%;}
.wrap > div {display: inline-block;	vertical-align: middle;}
.callout {width: 33%; color: white;	font-family: "eurostile", sans-serif; font-weight: 700;	font-size: 40px; text-shadow:0px 5px 8px #217bc1,5px 0px 8px #217bc1,-5px 0px 8px #217bc1,0px -5px 8px #217bc1; text-align: center; display: inline-block;    vertical-align: middle; padding: 10px;}
.box {width: 33%; text-align: center; padding: 10px}
.box img {width: 90%; height: auto;}

.clear {clear: both;}
.purchaseLinks {width: 75%; margin: 1% auto 10px; text-align: center;}
.purchaseLinks a, .purchaseLinks a:visited {color: #fff; text-decoration: none;}
.purchaseLinks a:hover {color: #52c5ea;}
.purchaseLinks > div {display: inline-block; vertical-align: middle; background: url(../img/purchase/buttonBg.png); background-size: 100% 100%;  padding-top: 26px;  padding-bottom: 26px;  font-size: 28px; width: 223px;	max-width: 223px;	margin: 0 10px 30px;	color: #fff; padding-left: 8px; padding-right: 8px;}

@media screen and (max-width: 1366px) { 
	.callout {font-size: 38px;}
}
@media screen and (max-width: 1280px) { 
	.callout {font-size: 30px; line-height: 32px;}
}
@media screen and (max-width: 1024px) { 
	.callout {font-size: 24px; line-height: 26px;}
}
@media screen and (max-width: 768px) { 
	.wrap {width: 95%;}
}
@media screen and (max-width: 640px) { 
	.callout, .box {width: 90%;}
	.callout {font-size: 30px; line-height: 32px; margin-bottom: 2%; padding: 0px;} 
	.box img {width: 45%; height: auto; padding: 0px;}
}
@media screen and (max-width: 480px) { 
	.box img {width: 60%; height: auto;}
}