/* BODY/MAIN */
body {
	text-align: center;
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
}

.bg-overlay {
	background: url(../img/backgrounds_dots.jpg) repeat;
	opacity: 0.75;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.inner-container {
	max-width: 1920px;
	margin: auto;
	position: relative;
}

.dot-pink,
.dot-white,
.dot-image {
	background-color: transparent;
	border-radius: 50%;
	
	width: 100px;
	height: 100px;
}

.dot-pink,
.dot-white {
	display: table-cell;
	border: 3px solid;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	vertical-align: middle;
}

.dot-pink {
	border-color: #ff0080;
	color: #ff0080;
}

.dot-pink:hover {
	background-color: #ff0080;
	color: #fff;
}

.dot-white {
	border-color: #fff;
	color: #fff;
}

.dot-white.active,
.dot-white:hover {
	background-color: #fff;
	color: #ff0080;
}

.dot-image {
	background: url(../img/button_off01.svg) center center / 100% no-repeat;
	font-size: 0;
}
.dot-image.active,
.dot-image:hover {
	background: url(../img/button_on01.svg) center center / 100% no-repeat;
}

.dot-image2 {
	background: url(../img/button_off02.svg) center center / 100% no-repeat;
}
.dot-image2.active,
.dot-image2:hover {
	background: url(../img/button_on02.svg) center center / 100% no-repeat;
}

.dot-image3 {
	background: url(../img/button_off03.svg) center center / 100% no-repeat;
}
.dot-image3.active,
.dot-image3:hover {
	background: url(../img/button_on03.svg) center center / 100% no-repeat;
}

.dot-image-switch {
	background: url(../img/button_off_switch.svg) center center / 100% no-repeat;
}
.dot-image-switch.active,
.dot-image-switch:hover {
	background: url(../img/button_on_switch.svg) center center / 100% no-repeat;
}

.dot-image-ps4 {
	background: url(../img/button_off_ps4.svg) center center / 100% no-repeat;
}
.dot-image-ps4.active,
.dot-image-ps4:hover {
	background: url(../img/button_on_ps4.svg) center center / 100% no-repeat;
}

.dot-image-roster {
	background: url(../img/button_off_roster.svg) center center / 100% no-repeat;
}
.dot-image-roster:hover {
	background: url(../img/button_on_roster.svg) center center / 100% no-repeat;
}

.dot-image-gameplay {
	background: url(../img/button_off_gameplay.svg) center center / 100% no-repeat;
}
.dot-image-gameplay:hover {
	background: url(../img/button_on_gameplay.svg) center center / 100% no-repeat;
}

.dot-image-story {
	background: url(../img/button_off_story.svg) center center / 100% no-repeat;
}
.dot-image-story:hover {
	background: url(../img/button_on_story.svg) center center / 100% no-repeat;
}

.dot-image-trailers {
	background: url(../img/button_off_trailers.svg) center center / 100% no-repeat;
}
.dot-image-trailers:hover {
	background: url(../img/button_on_trailers.svg) center center / 100% no-repeat;
}

.dot-image-preorder {
	background: url(../img/button_off_buy.svg) center center / 100% no-repeat;
}
.dot-image-preorder:hover {
	background: url(../img/button_on_buy.svg) center center / 100% no-repeat;
}

button {
	background: transparent;
	border: 2px #fff solid;
	color: #fff;
	margin: 10px 5px;
	padding: 5px;
}

button:hover {
	background: #fff;
	border: 2px #fff solid;
	color: #ff0080;
}

a:hover {
	text-decoration: none;
	color: initial;
}

.fadeInLeft {
	animation-duration: 300ms;
}

.header-control,
.nav-btn,
button,
.costume-button {
	cursor: pointer;
}

/* NAV */

nav {
	background: rgba(255, 255, 255, 0.9);
	position: fixed;
	z-index: 999;
}

nav a {
	color: #ff0080;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0 10px;
}

nav a:hover {
	color: #ff0080;
	text-decoration: underline;
}

#top-btn {
	position: fixed;
	bottom: 25px;
	right: 25px;
	z-index: 999;
}

#top-btn i {
	color: #fff;
	border: 1px solid #ff0080;
	border-radius: 20%;
	background: #ff0080;
	padding: 5px;
}

#top-btn:hover i {
	color: #ff0080;
	background: #fff;
	border-color: #fff;
}

/* HEADER */

header {
	position: relative;
}

header .inner-container {
	max-width: 1400px;
}

.header-video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: -2;
	overflow:hidden;
}

.header-video video {
	min-width: 100%;
	min-height: 100%;
}

#header-character-icon {
	position: absolute;
	top: 150px;
	left: 50px;
}

#header-character-portrait img {
	max-height: 900px;
	padding-top: 75px;
	padding-bottom: 50px;
}

.header-control {
	color: #ff0080;
	position: relative;
	z-index: 9;
}

.header-control:hover {
	color: #333;
}

.header-control-left {
	margin-right: -70px;
}

.header-control-right {
	margin-left: -70px;
}

#header-menu {
	z-index: 99;
	max-width: 330px;
	position: absolute;
	right: 0px;
	top: 300px;
	border-radius: 50px;
}

#header-menu label {
	background-color: rgba(255, 255, 255, 0.8);
}

#header-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 9;
}



/* MAIN */

main {
	background: url(../img/backgrounds_scene01.jpg) center top / cover fixed no-repeat;
	color: #fff;
}

main .inner-container {
	padding-top: 100px;
	padding-bottom: 100px;
}

main h1, 
main h2 {
	font-family: 'Luckiest Guy', cursive;
	text-shadow: #000 2px 2px 0px;
}

main h1 {
	color: #ffffff;
	text-shadow: #ff207f 2px 2px 0px, #000 4px 4px 0px;

	font-size: 3em;
	margin-bottom: .5em;
}

#gameplay,
#story,
#trailers {
	padding: 100px 0;
}

#character-select {
	padding-top: 100px;
	padding-bottom: 300px;
}

#character-select .character-thumbs {
	max-width: 900px;
	margin: auto;
}

.character-thumbs {
	position: relative;
	z-index: 1;
}

.characters {
	padding-bottom: 50px;
}

.characters h1,
.characters h2 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
}

.quote {
	font-style: italic;
	text-indent: -2em;
}

.character-bio {
	text-align: left;
	padding-top: 150px;
}

.character-text {
	height: 200px;
}

.character-bg-left,
.character-bg-right {
	position: absolute;
	top: 20px;
	z-index: 0;
}

.character-bg-left {
	left: 100px;
}

.character-bg-right {
	right: 100px;
}

.character-icon-name {
	color: #ff0080;
	text-transform: uppercase;
	font-weight: 900;
	margin-top: 15px;
}

.character-portrait {
    position: absolute;
	text-align: center;
	margin: auto;
	width: 100%;
	left: -600px;
	right: 0;
	z-index: 0;
}

.costume-button {
	margin: 10px;
}

.costume-picker {
	min-height: 173px;
}

.dlc-disclaimer {
	color: #ffff00;
	font-weight: 700;
	font-size: 1.25em;
}

#story {
	min-height: 1050px;
	background: url(../img/characters_story.png) no-repeat;
	background-position: calc(50% - 500px) 50%;
}

#story .character-bg-left {
	left: -300px;
}

#story .story-container {
	max-width: 1920px;
	width: 100%;
	display: flex;
	margin: auto;
}

#story .story-text {
	background-color: rgba(0, 0, 0, 0.6);
	padding: 20px;
	max-width: 600px;
}

#gameplay {
	background: rgba(255, 255, 255, 0.5);
}

.gameplay-info {
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,0,128,1) 50%,rgba(255,255,255,0) 100%);
	padding: 25px 25px 55px;
	width: 400px;
	position: relative;
	max-width: 100%;
}

.gameplay-info button,
.retail-links button {
	width: 200px;
	font-size: 16px;
}

.gameplay-info button,
.retail-links {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
}

.video-thumbnail img {
	border: 2px solid #fff;
}

.video-thumbnail img:hover {
	border: 2px solid #ff0080;
}

.product-selector {
	margin: 10px;
}

.product {
	justify-content: space-around;
}

.product-box {
	border: 3px solid #fff;
	border-radius: 20px;
	justify-content: space-around;
	padding-bottom: 150px;
}

#product ul {
	text-align: left;
	max-width: 280px;
}


/* MODAL */
.modal-dialog {
	width: 1024px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	z-index: 9999;
}

.modal-content {
	border: none;
	background: rgba(0, 0, 0, 0);
	color: #fff;
	text-align: center;
}

.modal-header {
	border: none;
	color: #fff;
	margin-left: auto;
	font-size: 3em;
	line-height: 1;
}

.modal-header span {
	cursor: pointer;
}

.modal-body {
	background: rgba(255,0,128,1) url(../img/backgrounds_stars.png) center center / 100% no-repeat;
	border: #fff 5px solid;
	border-radius: 15px;
}

.modal-body h3 {
	background-color: #fff;
	color: #ff0080;
}

.modal-body h1,
.modal-body h2,
.modal-body p,
.modal-body img {
	position: relative;
	z-index: 1;
}

.gameplay-screenshot {
	margin-bottom: 2rem;
}

.gameplay-screenshot img {
	border: 5px solid #fff;
	margin: 5px;
}

.character-bg-modal {
	position: absolute;
	top: -100px;
	left: -445px;
	z-index: 0;
}

#gameplay-modal-2 .character-bg-modal {
	left: -495px;
}

#gameplay-modal-3 .character-bg-modal {
	left: -465px;
}

/* FOOTER */

footer {
	background: rgba(255, 255, 255, 0.5); /*placeholder*/
}

.footer-icon {
	padding: 15px;
}

.esrb {
	max-width: 300px;
}

.nisa {
	max-width: 200px;
}

.copyright {
	font-size: 0.7em;
	text-align: left;
	margin-bottom: 0;
}

#mobile-nav {
	display: none;
}

@media (max-width: 991px) {
	body {
		font-size: 12px;
	}

	nav a {
		font-size: 2em;
	}

	.character-portrait {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.character-bio {
		text-align: center;
		padding-top: 0;
	}

	.character-icon img {
		max-width: 100px;
	}

	.character-text {
		height: auto;
	}

	.costume-picker {
		min-height: 0;
	}

	#story {
		min-height: 0;
		background-position: 120% 30px;
		background-size: 120%;
	}

	#story .story-text {
		margin-top: 250px;
		max-width: 100%;
	}
}