/*Var*/
:root {
	--blacker: #111;
	--black: #222;
	--darkGrey: #444;
	--lightGrey: #d4d2cf;
	--white: #f2efec;
	--red:#bb0000
}

/*Animations*/
@keyframes slideInFromRight {
	0% {
		transform: translateX(25%);
		opacity: 0%;
	}

	100% {
		transform: translateX(0);
		opacity: 100%;
	}
}

@keyframes slideInFromTop {
	0% {
		transform: translateY(-25%);
		opacity: 0%;
	}

	100% {
		transform: translateX(0);
		opacity: 100%;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0%;
	}

	100% {
		opacity: 100%;
	}
}

/*Fonts*/
@font-face {
	font-family: Haura;
	src: url(fonts/HAURA.otf);
}

@font-face {
	font-family: Bokor;
	src: url(fonts/BOKOR.ttf);
}

@font-face {
	font-family: Muro;
	src: url(fonts/MURO.otf);
}

@font-face {
	font-family: NotoSerif;
	src: url(fonts/NOTOSERIF.ttf);
}

/*Base*/
html {
	width: 100vw;
	height: auto;
	background-color: var(--white);
	font-family: Haura, serif;
	max-width: 100%;
	overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
	width: 100%;
	height: auto;
	overflow-x: hidden;
	position:absolute;
}

section {
	width: 100%;
}

/*
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
*/

/*mockup*/
#mockup{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	opacity:0.2;
	z-index:1000 !important;
	pointer-events:none;
}
#mockup img{
	width:100%;
}

/*About*/
h1, h2 {
	width: 100%;
	max-width: 1000px;
	height: 110px;
	font-size: 80px;
	line-height: 90px;
	font-family: Bokor, serif;
	padding: 15px;
	padding-bottom: 0px;
	margin: 0px;
	margin-bottom: 15px;
	text-align: center;
	border-bottom: 2px solid;
	border-color: var(--lightGrey);
	color: var(--black);
}

h3 {
	width: 100%;
	max-width: 1000px;
	height: 70px;
	font-size: 50px;
	line-height: 60px;
	font-family: Bokor, serif;
	padding: 15px;
	padding-bottom: 0px;
	margin: 0px;
	margin-bottom: 15px;
	text-align: right;
	border-bottom: 2px solid;
	border-color: var(--lightGrey);
	color: var(--black);
}

#aboutSection {
	display: flex;
	justify-content: center;
	width: 100%;
	height: auto;
}
#about {
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin-bottom:20px;
	margin-left: 2%;
	margin-right:2%;
}

#about p {
	text-align: left;
	font-family: NotoSerif, serif;
	background-color: var(--lightGrey);
	padding: 10px;
	font-size: 20px;
	line-height: 30px;
	color: var(--darkGrey);
}

.aboutImageOptional {
	position: absolute;
	left: -8%;
	height: auto;
	width: 33%;
	max-width:800px;
	pointer-events: none;
	top: -50px;
}

/*keypoints*/
#keypointsSection {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin:auto;
	margin-bottom: 2%;
}
.keypoint {
	width: 48%;
	/*width: 100%;*/ /*mobile only? looks bad with not enough text*/
	height: auto;
	margin: auto;
	margin-top: 1%;
}
.keypoint h2 {
	width: 100%;
	height: auto;
	text-align: left;
	font-size: 30px;
	line-height: 32px;
}
.keypoint p {
	width:100%;
	text-align: left;
	font-family: NotoSerif, serif;
	background-color: var(--lightGrey);
	padding: 10px;
	font-size: 20px;
	line-height: 22px;
	color: var(--darkGrey);
}

/*media*/
#media {
	width: 100%;
	height: auto;
	background-image: url(images/layout/dark_background_2.jpg);
}

#media h2 {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	color: var(--white);
}
/*Gallery*/
#gallery {
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

#gallery p{
	color:var(--lightGrey);
	margin:auto;
	text-align:right;
	width:100%;
	height:auto;
	padding:20px;
}
#gallery p span {
	color:var(--red);
}

#gallery a {
	color: var(--darkGrey);
}
#gallery a:visited {
	color: var(--darkGrey);
}
#gallery a:hover {
	color: var(--white);
}

#galleryAuto {
	display: flex;
	flex-wrap:wrap;
	justify-content:center;
	width: 100%;
	max-width: 1000px;
	margin: auto;
	height:auto;
	color: var(--white);
	text-align:left;
}

.galleryLink {
	position: relative;
	width: auto;
	height: 200px;
	margin: 1%;
	text-align: center;
	opacity: 1;
	transition: opacity 100ms ease-in;
}

.galleryLink:hover {
	opacity: 0.7;
}



.galleryImg {
	filter: drop-shadow(0 0 0.25rem black);
	width:auto;
	height:100%;
}
.galleryPlay {
	position: absolute;
	height: 75px;
	left: calc(50% - 37.5px); /*half of img size (height in this case)*/
	top: calc(50% - 37.5px);
	margin: auto;
	filter: drop-shadow(0 0 1rem black);
	transition: transform 0.3s ease;
}

.galleryLink:hover .galleryPlay {
	transform:scale(1.1);
	transition: transform 0.3s ease;
}


/*CallToAction*/
#callToAction {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 70px;
	background-color: var(--blacker);
	color: var(--white);
}

/*Splash*/
#splashScreen {
	width: auto;
	height: 600px;
	max-height:600px;
	margin:0;
	padding:0;
}

#splashBackground {
	margin: auto;
	text-align: center;
	z-index: 0 !important;
	height: 600px;
	width: 100%;
	background-image: url("sites/paper_cult/images/splash_background.jpg");
	background-position: center;
	background-size: auto 100%;
	background-repeat:no-repeat;
	background-color:var(--blacker);
}

#splashForeground {
	z-index: 2 !important;
	height: 600px;
	width: 100%;
	background-image: url("sites/paper_cult/images/splash_foreground.png");
	background-position: center;
	background-size: auto 100%;
}

#splashCharacter {
	animation: 0.8s ease-out 0s 1 slideInFromRight;
	animation-fill-mode: forwards;
	right: 0px;
	margin: auto;
	z-index: 1 !important;
	pointer-events: none;
}

#splashCharacter img {
	margin: auto;
	height: 700px;
	margin-top: -100px;
}
.splashItem{
	position:absolute;
}

#splashLogo {
	opacity: 0%;
	animation: 0.8s ease-out 0.5s 1 fadeIn;
	animation-fill-mode: forwards;
	margin: auto;
	width: 100%;
	height: 500px;
	z-index: 1 !important;
	display: flex;
	justify-content: center;
}
#splashLogo img{
	width:auto;
	height: 500px;
}

/*Store Nav*/
#storesMenu {
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-content:center;
	z-index:3 !important;
	position:absolute;
	bottom:5%;
}

.storeItem img {
	width: auto;
	height: 100%;
	transition: transform 0.3s ease;
	filter: drop-shadow(0 0 0.25rem black);
}

.storeItem img:hover {
	transition: transform 0.3s ease;
	transform: translateY(-10px);
	filter: drop-shadow(0 0 0.25rem grey);
}

.storeItem {
	opacity: 0%;
	display: flex;
	align-content: center;
	width: auto;
	height: 80%;
	padding: 0;
	margin: 0;
	margin-left: 1%;
	margin-right: 1%;
	text-align: center;
	transition: all 0.8s ease-out 1s;
}

.storeAnimate1 {
	animation: 0.8s ease-out 1s 1 slideInFromTop;
	animation-fill-mode: forwards;
}
.storeAnimate2 {
	animation: 0.8s ease-out 1.2s 1 slideInFromTop;
	animation-fill-mode: forwards;
}
.storeAnimate3 {
	animation: 0.8s ease-out 1.4s 1 slideInFromTop;
	animation-fill-mode: forwards;
}
.storeAnimate4 {
	animation: 0.8s ease-out 1.6s 1 slideInFromTop;
	animation-fill-mode: forwards;
}
.storeAnimate5 {
	animation: 0.8s ease-out 1.8s 1 slideInFromTop;
	animation-fill-mode: forwards;
}

/*Collaborators*/
.collaboratorsSection {
	display: block;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: auto;
	background-color: var(--white);
}

#collaborators {
	width: 100%;
	max-width: 1000px;
	height: auto;
	margin:auto;
	margin-bottom: 20px;
	text-align:center;
}

#collaborators img {
	display: inline-block;
	width: auto;
	height: 70px;
	margin-left: 5%;
	margin-right: 5%;
	filter: drop-shadow(0 0 0.25rem black);
	transition: all 0.3s ease-out;
}

#collaborators img:hover {
	transition: all 0.3s ease-out;
	transform: translateY(-10px);
}

.collaboratorLink {
	display: inline-block;
	transition: all 0.3s ease-out;
	height: auto;
	width: auto;
	margin-left: 5%;
	margin-right: 5%;
}

#collaboratorsDynamic{
	width:auto;
	height:auto;
}

/*Main menu*/
#header {
	display: block;
	width: 100%;
	background-color: var(--blacker);
	height: 70px;
	padding: 0px;
	/*background-image: url(images/layout/header_background.png);*/
	background-repeat: no-repeat;
	/*background-position: top center;*/
	background-position: 0px 0px;
}
#footer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 70px;
	padding: 0px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	color: var(--white);
	background-color: var(--blacker);
}
#footer img{
	display:inline-block;
	position: absolute;
	height:50%;
	width:auto;
	right: 3%;
	bottom:20%;
}
#papercultLogo {
	display: inline-block;
	position: absolute;
	width: 100px;
	height: 60px;
	left: 30px;
	top: 15px;
	z-index:6 !important;
}
#papercultLogo img {
	width:100px;
	height:100px;
	object-fit: contain;
}
#menu {
	display: flex;
	justify-content:center;
	position: relative;
	width: 100%;
	height:70px;
	top: 0px;
}

#menu a {
	width:20%;
	font-size:20px;
}

.menuButton{
	display: inline-block;
	text-align: center;
	width: 100%;
	height: 70px;
	line-height: 70px;
	background-color: var(--blacker);
	color: var(--white);
}
.menuButton:hover {
	background-color:var(--black);
}

.menuSpacer {
	display: inline-block;
	text-align: center;
	color: var(--white);
	height: 70px;
	line-height: 70px;
}


/*MobileMenu*/
#mobileMenuHeader {
	/*display: flex;*/
	display: none;
	justify-content: right;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background-color: var(--blacker);
	z-index: 52 !important;
}

#mobileMenuHeader a {
	margin-right:5%;
}
#mobileMenuHeader img {
	height:70px;
}

#mobileMenu {
	/*display: flex;*/
	display: none;
	position: fixed;
	right: -90%;
	top: 70px;
	width: 90%;
	height: 100%;
	background-color: var(--blacker);
	z-index: 52 !important;
	transition: display 0.3s ease;
}

#mobileMenu .menuButton {
	text-align: right;
	font-size: 30px;
	padding-right: 5%;
	border-bottom:2px solid var(--black);
}

#papercultLogoMobile {
	display: inline-block;
	position: absolute;
	width: 100px;
	height: 60px;
	left: 2%;
	top: 5px;
}

#papercultLogoMobile img {
	position:relative;
	width: 60px;
	height: 60px;
	object-fit: contain;
}

/*section*/
section{
	display:block;
	position:relative;
	width:100%;
}

/*social*/
#social {
	opacity: 0;
	animation: 0.8s ease-out 2s 1 slideInFromTop;
	animation-fill-mode: forwards;
	display: flex;
	justify-content: center;
	align-content: center;
	height: auto;
	top: 0px;
	right: 10px;
	width: 30%;
	z-index: 50 !important;
}

.socialImage {
	display: flex;
	justify-content: center;
	margin: 0px;
	margin-left: 10px;
	height: 100%;
	min-width: 40px;
	min-height: 40px;
	overflow: hidden;
	background-repeat: no-repeat;
	z-index: 50 !important;
	background-size: contain;
	background-position-y: center;
}

#presskitIMG {
	width:100px;
	background-image: url(images/social/presskit_white.png);
}

#presskitIMG:hover {
	background-image: url(images/social/presskit_color.png);
}

#discordIMG {
	background-image: url(images/social/discord_white.png);
}

#discordIMG:hover {
	background-image: url(images/social/discord_color.png);
}

#twitterIMG {
	background-image: url(images/social/twitter_white.png);
}

#twitterIMG:hover {
	background-image: url(images/social/twitter_color.png);
}

#facebookIMG {
	background-image: url(images/social/facebook_white.png);
}

#facebookIMG:hover {
	background-image: url(images/social/facebook_color.png);
}

#instagramIMG {
	background-image: url(images/social/instagram_white.png);
}

#instagramIMG:hover {
	background-image: url(images/social/instagram_color.png);
}

#youtubeIMG {
	background-image: url(images/social/youtube_white.png);
}

#youtubeIMG:hover {
	background-image: url(images/social/youtube_color.png);
}

#twitchIMG {
	background-image: url(images/social/twitch_white.png);
}

#twitchIMG:hover {
	background-image: url(images/social/twitch_color.png);
}

#tiktokIMG {
	background-image: url(images/social/tiktok_white.png);
}

#tiktokIMG:hover {
	background-image: url(images/social/tiktok_color.png);
}