* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
}

ul {
	list-style: none;
	padding: 0;
}

a {
	text-decoration: none;
}

button {
	border: none;
	cursor: pointer;
}

img {
	max-width: 100%;
}

input,
option,
a,
button {
	outline: none;
}

/* Style Guide          */
/* Primary: #007145     */
/* Primary2: #676767    */
/* Secondary: #77C092   */
/* Header: Hiragino     */
/* Sub Header: Overhaul */
/* Body: Ayuthaya       */

@font-face {
	font-family: 'hiragino';
	src: url('fonts/hiragino.ttc');
}

@font-face {
	font-family: 'overhaul';
	src: url('fonts/overhaul.woff');
}

@font-face {
	font-family: 'ayuthaya';
	src: url('fonts/ayuthaya.woff');
}

h1 {
	font-family: 'hiragino', sans-serif;
	color: #007145;
	font-size: 36px;
}

h1,
nav a {
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

h2,
a,
button {
	font-family: 'overhaul', sans-serif;
	color: #676767;
	letter-spacing: 1.5px;
	font-weight: normal;
}

button {
	color: #fff;
	font-size: 14px;
	padding: 14px 20px;
	margin: 5px;
}

.btn-primary,
.screenshot {
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
} 

.btn-primary {
	background-color: #007145;
	border: 2px solid #007145;
}

.btn-primary:hover {
	background-color: #fff;
	border-color: #fff;
	color: #007145;
}

.btn-secondary {
	background-color: transparent;
	border: 2px solid #fff;
}

.btn-secondary:hover {
	background-color: #fff;
	color: #007145;
}

body {
	font-family: 'ayuthaya', sans-serif;
	font-size: 14px;
	background: url(../img/bg-black.jpg) repeat;
}

header,
main,
footer,
.nav-spacer {
	position: relative;
}

.nav-inner,
.header-content,
.main-inner-content,
.copyright {
	max-width: 1440px;
	width: 100%;
	margin: auto;
}

nav {
	background: url(../img/bg-box_02.jpg) repeat;
	position: fixed;
	z-index: 999;
	width: 100%;
}

nav a {
	font-size: 1.5rem;
}

nav a:hover {
	color: #fff;
}

.nav-inner, .nav-links {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.nav-inner {
	padding-left: 50px;
	justify-content: space-between;
}

.nav-links {
	justify-content: flex-start;
}

.nav-logo {
	padding-right: 5px;
}

.nav-logo img {
	width: 166px;
}

.nav-links li {
	padding-left: 25px;
	padding-right: 25px;
}

.nav-inner,
.nav-spacer {
	height: 100px;
}

nav button,
main button {
	font-size: 1.25rem;
	border-radius: 15px;
}

header {
	font-size: 1.5rem;
	background-color: #000;
	color: #fff;
	height: 800px;
	box-shadow: 0 9px 9px 0px #000;
	overflow: hidden;
}

.header-content {
	left: 0;
	top: 65px;
	position: relative;
	z-index: 9;
	padding-left: 70px;
}

.bg-movie {
	height: 100%;
	width: 100%;
	position: absolute;
	overflow: hidden;
}

#player {
	height: 120%;
	width: 100%;
	max-width: 100%;
	position: relative;
	margin-top: -5%;
}

.bg-movie-overlay {
	background: url(../img/bg-dotted.png) repeat;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.header-text {
	max-width: 496px;
}

.header-rating {
	margin-top: 30px;
}

main {
	font-size: 1.05rem;
}

main h2 {
	font-size: 1.5rem;
}

#story .info-container,
#product .main-inner-content {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

#story {
	background: url(../img/bg-concrete.png) center 69px no-repeat;
	min-height: 820px;
	padding-bottom: 10px;
}

#story .info-container {
	padding-top: 190px;
}

.screenshots {
	text-align: center;
	margin-top: 45px;
	margin-bottom: 45px;
}

.screenshot {
	width: 230px;
	border: 5px solid #c4c4c4;
	margin-left: 25px;
	margin-right: 25px;
}

.screenshot:nth-child(1) {
	transform: rotate(15deg);
}
.screenshot:nth-child(2) {
	transform: rotate(-11deg);
}
.screenshot:nth-child(3) {
	transform: rotate(5deg);
}

#about,
#about h2 {
	color: #fff;
}

#about {
	text-align: center;
	background: #676767 url(../img/bg-about.png) right center no-repeat;
	background-size: auto 100%;
	box-shadow: 0 9px 9px 0px #000;
}

#about .main-inner-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#about .info-container {
	width: 250px;
	max-width: 33%;
	margin: 0 75px;
	padding-top: 70px;
	padding-bottom: 40px;
}

#characters {
	padding-bottom: 100px;
}

#characters .main-inner-content {
	background: url(../img/bg-chara.png) center center / contain no-repeat;
}

#characters .info-container {
	outline: none;
}

.character-container {
	min-height: 700px;
	position: relative;
}

.character-title {
	position: relative;
	top: 100px;
	left: 300px;
}

.character-title h1 {
	color: #fff;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000, 0px 0px 10px #000, 0px 0px 10px #000;
}

.character-image {
	position: absolute;
	bottom: 20px;
	right: 150px;
}

.character-info {
	max-width: 36%;
	position: absolute;
	top: 25%;
	left: 300px;
}

.quote {
	font-style: italic;
}

.quote:before {
	content: '“';
}


.quote:after {
	content: '”';
}

#chara-slider .slick-arrow {
	position: absolute;
	top: 50%;
	margin-top: -44px;
	width: 76px;
	height: 88px;
	background-color: transparent;
	color: #fff;
	z-index: 9;
}

#chara-slider .slick-arrow:hover {
	background-color: transparent;
	color: #fff;
	outline: none;
}

#chara-slider .slick-arrow.slick-prev {
	left: 0px;
}

#chara-slider .slick-arrow.slick-next {
	right: 0px;
}

#product {
	background: url(../img/bg-product.png) left bottom / auto 100% no-repeat, url(../img/bg-box_01.jpg) repeat ;
	padding-top: 50px;
	padding-bottom: 25px;
}

.product-select {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.product-select select {
	margin: 0 25px;
	color: #fff;
	font-size: 1.05rem;
	font-family: 'ayuthaya', sans-serif;
	width: 287px;
	padding-left: 30px;
}

#product .slick-arrow {
	display: none!important;
}

#product .info-container {
	padding-left: 25px;
	padding-right: 25px;
}

.product-info {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.product-features {
	width: 478px;
	max-width: 50%;
}

.features-list {
	list-style: circle;
	padding-left: 20px;
}

.product-links {
	padding-left: 25px;
}

.product-links button {
	width: 300px;
	max-width: 100%;
	height: 57px;
	margin-bottom: 6px;
}

footer {
	background: #fff;
	padding-top: 25px;
	padding-bottom: 25px;
}

.company-logo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#mc_embed_signup {
	margin-top: 50px;
	margin-bottom: 50px;
}

#mce-EMAIL, #mc-embedded-subscribe {
	font-size: 1rem;
}

#mce-EMAIL {
	padding: 6px;
	width: 450px;
	max-width: 90%;
}

@media screen and (max-width: 768px) {
	#mce-EMAIL {
		 font-size: 0.6rem;
	}

	#mc-embedded-subscribe {
		 font-size: 0.75rem;
	}
}

.company-logo {
	justify-content: flex-start;
	margin-bottom: 25px;
	flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
	.company-logo {
		justify-content: space-around;
	}

	.company-logo img {
		margin-top: 5%;
	}
}

.company-logo img {
	margin-right: 15px;
}

.copyright {
	font-size: 0.6rem;
}

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

	#characters {
		padding-bottom: 25px;
	}

	#characters .main-inner-content {
		background-position: bottom center;
	}	

	.character-image,
	.character-info {
		position: initial;
	}

	.character-title {
		position: absolute;
		top: 0;
		left: 90px;
	}

	.character-image img {
		margin: auto;
	}

	.character-info {
		width: 100%;
		max-width: 100%;
		padding: 0px 115px 50px;
	}

	#chara-slider .slick-arrow {
		text-shadow: 1px 1px 2px #000;
	}
}

@media screen and (max-width: 1024px) {
	html {
		font-size: 12px;
	}

	header {
		height: auto;
	}

	.header-content {
		top: 0;
	}
	#product {
		background: url(../img/bg-box_01.jpg) repeat ;
	}
}

@media screen and (max-width: 768px) {
	.nav-links,
	.nav-logo {
		display: none;
	}
	.nav-inner,
	.nav-spacer {
		height: 75px;
	}
	.nav-inner {
		padding: 0;
		justify-content: center;
	}

	header {
		height: auto;
		background: none;
		box-shadow: none;
	}

	.bg-movie,
	.bg-movie-overlay,
	.header-rating {
		display: none;
	}

	.header-content {
		top: 0;
		padding: 0 25px;
		text-align: center;
	}

	.header-text {
		margin: auto;
	}

	#story {
		text-align: center;
	}

	#story .main-inner-content {
		padding-left: 25px;
		padding-right: 25px;
	}

	#about {
		background-size: auto 30%;
	}

	#about .main-inner-content {
		flex-wrap: wrap;
	}

	#about .info-container {
		width: 100%;
		max-width: 100%;
	}

	#characters .main-inner-content {
		background: none;
		padding: 0 15px;
	}

	.character-title {
		left: 0;
	}

	.character-info {
		width: auto;
		max-width: 100%;
		padding: 10px 15px 10px;
		background: rgba(255, 255, 255, 0.75);
		margin: 0 10px;
	}

	

	#product .main-inner-content {
		padding-left: 25px;
		padding-right: 25px;
	}

	.product-select {
		padding-bottom: 10px;
	}

	.product-features {
		max-width: 100%;
	}

	.product-links {
		padding-left: 0;
	}

	.product-links button {
		width: 220px;
	}
}

@media screen and (max-width: 375px) {
	h1 {
		font-size: 1.5rem;
	}

	#chara-slider .slick-arrow {
		opacity: 0.25;
	}

	#chara-slider .slick-arrow:hover {
		opacity: 1;
	}


	#product .info-container {
		padding-left: 0;
		padding-right: 0;
	}
}