.widget_aga_character_select_widget {
	display: inline-block;
}
.character-select-page {
	text-align: left;
	position: relative;
	margin: 90px auto 0;
	max-width: 960px;
	padding:0 2em;
}


.character-select-container {
	z-index: 20;
	margin:0 -18%;
	position: relative;
}
.character-container {
	margin-top:-10px;
	z-index: 10;
	display: block;
}
.character {
	padding:0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	position: relative;
}
.character .portrait {
	width: 40%;
	float: left;
	z-index: 5;
	position: relative;
}
.character .portrait img {
	margin-top:-20px;
	width: 140%;
	max-width: 140%;
	margin-left: 50%;
	transform: translateX(-50%);
}
.character .description {
	width: 56%;
	float: right;
	color:#fff;
	z-index: 6;
	position: relative;
	margin:2em 0;
}
.character .description .pop-video img {
	display: block;
}
.character .description h1 {
	font-size:2.5em;
	margin:24px 0 8px;
	text-transform: uppercase;
	text-shadow: 2px 2px #000;
}
.real-name {
	font-size:0.7em;
	color:#fed804;
	margin-left:16px;
	text-transform: capitalize;
}
.textbox p {
	font-size:1.1em;
}
.shine {
	position: absolute;
	margin:0 auto;
	top:-10px;
	left:0;
	right:0;
	z-index: 99999;
}
.capcom-corner {
	position: absolute;
	left:16px;
	top:-8px;
}
.marvel-corner {
	position: absolute;
	right:16px;
	top:-8px;
}
.triangle {
	position: absolute;
}
.corner {
	width: 1px;
	height: 1px;
	position: absolute;
	display: block !important;
}
.corner-capcom {
	background: #4dd5ff;
}
.corner-marvel {
	background: #ff5f5f;
}
.upper-left {
	top:0; //-1px;
	left:0; //-1px;
}
.upper-right {
	top:0; //-1px;
	right:0; //-1px;
}
.bottom-left {
	bottom:0; //-1px;
	left:0; //-1px;
}
.bottom-right {
	bottom:0; //-1px;
	right:0; //-1px;
}

.character-select-capcom, .character-select-marvel {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	padding-top:10px;
}
.character-select-capcom {
	float:left;
	justify-content: flex-end;
	align-items: flex-start;
	background: url('images/bg-character-select-capcom.jpg') no-repeat top right;
}
.character-select-marvel {
	float:right;
	justify-content: flex-start;
	align-items: flex-start;
	background: url('images/bg-character-select-marvel.jpg') no-repeat top left;
}

.character-button {
	width: 10%; //11.11%; //14.28%; //12.5%;
	display: block;
	border:1px solid #000;
	background: #000;
}
.character-button img {
	display: block;
}
.character-frame {
	position: relative
}
.capcom .character-frame {
	border:1px solid #0d52eb;
}
.marvel .character-frame {
	border:1px solid #a40000;
}
.capcom .character-frame:hover, .capcom .highlight {
	border:1px solid #0fabf5;
}
.marvel .character-frame:hover, .marvel .highlight {
	border:1px solid #ff0000;
}
.highlight {
	border-color: #fff !important;
}


.inactive {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity: 0.5;
}

.box {
	width: 18%;
	height: 24px;
	margin: 8px;
}

.video-frame {
	position: relative;
	border: 2px solid #a40000;
	margin-bottom:16px;
}
.video-frame img {
	display: block;
}
.video-frame::before {
	content: "";
	width:150px;
	height: 10px;
	background: #a40000;
	display: block !important;
	position: absolute;
	top:-10px;
	right:-4px;
	z-index: 20;
	transform: skew(-20deg) rotate(0deg) !important;
	-webkit-transform: skew(-20deg) rotate(0deg) !important;
	-moz-transform: skew(-20deg) rotate(0deg) !important;
}
.video-frame::after {
	content: "";
	width:150px;
	height: 10px;
	background: #a40000;
	display: block !important;
	position: absolute;
	bottom:-10px;
	left:-4px;
	z-index: 20;
	transform: skew(-20deg) rotate(0deg) !important;
	-webkit-transform: skew(-20deg) rotate(0deg) !important;
	-moz-transform: skew(-20deg) rotate(0deg) !important;
}
.video-frame.capcom {
	border-color: #0d52eb !important;
}
.video-frame.marvel {
	border-color: #a40000 !important;
}
.video-frame.red {
	border-color: red !important;
}
.video-frame.capcom::before, .video-frame.capcom::after {
	background: #0d52eb;
}
.video-frame.marvel::before, .video-frame.marvel::after {
	background: #a40000;
}
.video-frame.red::before, .video-frame.red::after {
	background: #f0141e;
}

.top-only::after {
	display: none !important;
}

.grow { //transition: all .2s ease-in-out; }
.grow:hover { //transform: scale(1.1); }

.widget_aga_character_select_widget {
	margin:0 !important;
}
.post-navigation {
	display: block;
	margin:-1em 0 4em;
}
.nav-links {
	margin: 0 !important;
}

/* ----------------------
/* Character Tutorials
------------------------*/

#character-tutorials {
	//background: #333; //#0d52eb; //#f0141e; //#000;
	padding:2em;
	border-top:1px solid #333;
	background: repeating-linear-gradient(
		-70deg,
		#333,
		#333 1px,
		#111 1px,
		#111 20px
	);
}
.tutorial-videos {
	margin: 0 auto;
	max-width: 960px;
}
.tutorial-videos h2 {
	//display: none;
	//text-align: center;
	margin:0 24px;
	font-size: 2em;
	color:#fff;
}
.tutorial-videos p {
	text-align: center;
	margin:6px 0 0;
	color:#fff; //#888;
}
.tutorial-videos .widget {
	margin:0;
}
.tutorial-videos .textwidget {
	overflow: auto;
}

.tutorial-videos .half {
	width: 50%;
	padding:1em;
	float: left;
}

.portrait {
	-webkit-animation: fadein_slide 0.75s ease-out; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: fadein_slide 0.75s ease-out; /* Firefox < 16 */
		-ms-animation: fadein_slide 0.75s ease-out; /* Internet Explorer */
		 -o-animation: fadein_slide 0.75s ease-out; /* Opera < 12.1 */
			animation: fadein_slide 0.75s ease-out;
}
.description {
	-webkit-animation: fadein 0.75s  ease-out; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: fadein 0.75s  ease-out; /* Firefox < 16 */
		-ms-animation: fadein 0.75s  ease-out; /* Internet Explorer */
		 -o-animation: fadein 0.75s  ease-out; /* Opera < 12.1 */
			animation: fadein 0.75s  ease-out;
}

@keyframes fadein {
	from { opacity: 0;margin-top: 5em; }
	to   { opacity: 1;margin-top: 2em;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from { opacity: 0;margin-top: 5em;}
	to   { opacity: 1;margin-top: 2em;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from { opacity: 0;margin-top: 5em;}
	to   { opacity: 1;margin-top: 2em;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from { opacity: 0;margin-top: 5em;}
	to   { opacity: 1;margin-top: 2em;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from { opacity: 0;margin-top: 5em;}
	to   { opacity: 1;margin-top: 2em;}
}

@keyframes fadein_slide {
	from { opacity: 0;margin-left: -5%; }
	to   { opacity: 1;margin-left: 0%; }
}

/* Firefox < 16 */
@-moz-keyframes fadein_slide {
	from { opacity: 0;margin-left: -5%; }
	to   { opacity: 1;margin-left: 0%; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein_slide {
	from { opacity: 0;margin-left: -5%; }
	to   { opacity: 1;margin-left: 0%; }
}

/* Internet Explorer */
@-ms-keyframes fadein_slide {
	from { opacity: 0;margin-left: -5%; }
	to   { opacity: 1;margin-left: 0%; }
}

/* Opera < 12.1 */
@-o-keyframes fadein_slide {
	from { opacity: 0;margin-left: -5%; }
	to   { opacity: 1;margin-left: 0%; }
}


/* ---------------
	BREAKPOINTS
--------------- */
@media screen and (max-width: 1220px) {
	.character-select-container {
		margin:0 -10%;
	}
}

@media screen and (max-width: 1080px) {
	.character-select-container {
		margin:0%;
	}
	.character-button {
		width: 14.28%; //11.11%; //14.28%; //12.5%;
	}
	.capcom-corner {
		display: none;
	}
	.marvel-corner {
		display: none;
	}
}

@media screen and (max-width: 960px) {
	.character .description h1 {
		font-size:2.5em;
	}
	.character-select-page {
		margin: 64px auto 0;
	}
}

@media screen and (max-width: 737px) {
	.character-container {
		margin-top:-32px;
	}
	.character-select-page {
		margin-top: 64px;
		padding:0px;
	}
	.character .portrait {
		width: 100%;
		float: none;
	}
	.character .portrait img {
		width: 100%; //auto;
		margin-top: 0;
		margin-left:0;
		transform: translateX(0%);
		position: absolute;
	}
	.character .description {
		width: 100%;
		float: none;
		margin-top: 420px;
	}
	.character-button {
		width: 20%; //16.6%; //14.2%;
		margin-top:0 !important;
		transform: rotate(0deg) !important;
	}
	.top-only::after {
		display: block !important;
	}

	@keyframes fadein {
		from { opacity: 0;margin-top: 500px; }
		to   { opacity: 1;margin-top: 420px;}
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein {
		from { opacity: 0;margin-top: 500px;}
		to   { opacity: 1;margin-top: 420px;}
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein {
		from { opacity: 0;margin-top: 500px;}
		to   { opacity: 1;margin-top: 420px;}
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
		from { opacity: 0;margin-top: 500px;}
		to   { opacity: 1;margin-top: 420px;}
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein {
		from { opacity: 0;margin-top: 500px;}
		to   { opacity: 1;margin-top: 420px;}
	}

	@keyframes fadein_slide {
		from { opacity: 0;margin-left: 8%; }
		to   { opacity: 1;margin-left: 0%; }
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein_slide {
		from { opacity: 0;margin-left: 8%; }
		to   { opacity: 1;margin-left: 0%; }
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein_slide {
		from { opacity: 0;margin-left: 8%; }
		to   { opacity: 1;margin-left: 0%; }
	}

	/* Internet Explorer */
	@-ms-keyframes fadein_slide {
		from { opacity: 0;margin-left: 8%; }
		to   { opacity: 1;margin-left: 0%; }
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein_slide {
		from { opacity: 0;margin-left: 8%; }
		to   { opacity: 1;margin-left: 0%; }
	}
}

@media screen and (max-width: 668px) {

}

@media screen and (max-width: 568px) {
	.real-name {
		display: block;
		margin:-10px 0 0;
	}
	.capcom-corner {
		display: none;
	}
	.marvel-corner {
		display: none;
	}
	.character-button {
		width: 20%; //25%;
	}


	.character .description {
		margin-top: 200px;
	}

	@keyframes fadein {
		from { opacity: 0;margin-top: 360px; }
		to   { opacity: 1;margin-top: 200px;}
	}

	/* Firefox < 16 */
	@-moz-keyframes fadein {
		from { opacity: 0;margin-top: 360px;}
		to   { opacity: 1;margin-top: 200px;}
	}

	/* Safari, Chrome and Opera > 12.1 */
	@-webkit-keyframes fadein {
		from { opacity: 0;margin-top: 360px;}
		to   { opacity: 1;margin-top: 200px;}
	}

	/* Internet Explorer */
	@-ms-keyframes fadein {
		from { opacity: 0;margin-top: 360px;}
		to   { opacity: 1;margin-top: 200px;}
	}

	/* Opera < 12.1 */
	@-o-keyframes fadein {
		from { opacity: 0;margin-top: 360px;}
		to   { opacity: 1;margin-top: 200px;}
	}
}

@media screen and (max-width: 415px) {
	.character-button {
		width: 33%;
	}
	.site {
		overflow: hidden;
	}
}