/*
	Theme Name: Katsudon
	Description: Custom theme for Meka Puppers
	Version: 1.0
	Author: Mark Tjan
	Author URI: http://markptjan.com
*/

/*------------------------------------*\
    RESET
\*------------------------------------*/

ul, li {
	margin:0;
	padding:0;
	list-style-type:none;
}

/*------------------------------------*\
    DESKTOP
\*------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i,900,900i&display=swap');

html {
	width:100vw;
	overflow-x:hidden;
	overflow-y:scroll;
	font-family:'Lato', 'Helvetica Neue', 'Arial', 'sans-serif';
	scroll-behavior: smooth;
	margin:0;
}

body {
	width:100%;
	background: #181622;
	color:#fff;
	font-size:18px;
	margin:0;
	box-sizing: border-box;
}

header {
	width:100vw;
	min-height:200px;
	display:table;
	position:relative;
	z-index:999;
	padding:25px;
	box-sizing: border-box;
}

button {
	padding:15px 20px;
	background:#feaa00;
	color:#222;
	font-weight:300;
	font-size: 18px;
	text-transform: uppercase;
	border:0;
	transition:ease-in-out 0.2s;
	cursor: pointer;
}

button:hover {
	background:#db0202;
	color:#fff;
	transition:ease-in-out 0.2s;
}

.align-right {
	float:right;
	clear:left;
	text-align:center;
	display:block;
	margin:25px 0;
}

.logo {
	max-width:50%;
	float:left;
}

.logo img {
	max-width:300px;
	background:rgba(24, 22, 34, 0.8);
	padding:30px;
	border-radius: 10px;
}

.nav {
	float:right;
	max-width:50%;
}

.nav span {
	margin:50px 25px 0 0;
	display:block;
	background:rgba(24, 22, 34, 0.9);
	padding:10px 0 8px 0;
	border-radius: 10px;
}

.nav span a {
	font-size:18px;
	display:inline;
	margin:0 10px;
	transition: ease-in-out 0.3s;
}

.nav a {
	color:#fff;
	text-decoration: none;
	padding:6px 15px 4px 15px;
	transition: ease-in-out 0.1s;
	box-sizing:border-box;
	border:1px solid rgba(0,0,0,0);
	border-radius:5px;
}

.nav a:hover {
	color:#ff00ff;
	border:1px solid #ff00ff;
	box-sizing:border-box;
}

 .nav .icon {
 	display:none;
 }


.hero-video {
	position:absolute;
	z-index: 99;
	top:0;
	left:0;
	width:100%;
	max-height:1080px;
}

.hero-image {

}

/* General */

.full-row {
	position:relative;
	margin-left:-50vw;
	left:50%;
 	width: 100vw;
}

.subfooter {
	width:100%;
	max-width:1140px;
	height:52px;
	position:relative;
	top:-20px;
	z-index:9999;
	margin:0 auto;
	display:table;
}

.yellowbar {
	position:absolute;
	right:25px;
	background:#feaa00;
	font-size:18px;
	color:#222;
	font-weight:300;
	padding:10px 15px;
	width:225px;
	-webkit-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	-moz-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	text-align:center;
}

.yellowbar a {
	color:#222;
}

.yellowbar a:hover {
	color:#db0202;
}

.yellowbar i {
	margin:0 5px;
}

.subheader {
	height:50px;
	padding:10px 15px 0 25px;
	box-sizing:border-box;
	font-size:24px;
	font-weight:600;
	color:#fff;
	text-transform: uppercase;
	background: #f000f0; /* Old browsers */
	background: -moz-linear-gradient(top,  #f000f0 0%, #9c009c 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f000f0 0%,#9c009c 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f000f0 0%,#9c009c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f000f0', endColorstr='#9c009c',GradientType=0 ); /* IE6-9 */
	display:table;
	margin:0 0 25px 0;
}

.subheader::after {
	position:absolute;
	content:'';
	background-image:url('img/subhead-end.html');
	height:50px;
	width:25px;
	margin-top:-10px;
	margin-left:15px;
}

.to-top {
	position:fixed;
	z-index:9999;
	bottom:25px;
	right:25px;
	border-radius: 5px;
	background:rgba(24, 22, 34, 0.5);
	padding:15px;
	display:block;
	text-align:center;
	font-size:24px;
	color:#ccc;
	transition:ease-in-out 0.2s;
}

.to-top:hover {
	background:#ccc;
	color:#222;
	transition:ease-in-out 0.2s;
}

/* What Is */

.box-dialogue {
	color:#222;
	z-index:9997;
	position:relative;
	display:table;
	border-radius:5px;
	width:95%;
	margin:800px auto 0 auto;
	padding:25px;
	background: #CCCCCC; /* Old browsers */
	background: -moz-linear-gradient(top,  #f0f0f0 0%, #999999 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f0f0f0 0%,#999999 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f0f0f0 0%,#999999 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	-moz-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
}

.box-dialogue .inner {
	width:100%;
	display:block;
	padding-left:180px;
}

.box-avatar {
	border:3px solid rgba(255, 255, 255, .5);
	border-radius:5px;
	z-index:9998;
	position:absolute;
	margin-top:-25px;
	margin-left:25px;
	display:block;
	max-height:150px;
	max-width:150px;
	-webkit-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	-moz-box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
	box-shadow: 10px 10px 27px 0px rgba(0,0,0,0.28);
}

.box-avatar img {
	border-radius:5px;
	max-width:150px;
	max-height:150px;
}

.box-social {

}

.wrapper {
	max-width:1140px;
	margin:0 auto;
	padding:15px;
}

section {
	margin:50px 0;
}

/* Media */

ul.screenshots {
	list-style-type:none;
	margin:0;
	font-size: 0;
}

ul.screenshots li {
	display:inline-block;
	width:25%;
	box-sizing: border-box;
	margin:0;
	font-size:16px;
}

.screenshots img {
	width:100%;
	padding:3px;
	border-radius:5px;
	box-sizing: border-box;
	margin:0;
}

/* Blog */

/* FAQ */

.question {
	width:100%;
	font-weight:400;
	font-style:italic;
	clear:both;
	display:table;
	padding:5px 0;
}

.answer {
	width:100%;
	border-bottom:1px solid #666;
	font-weight:600;
	clear:both;
	display:table;
	padding:5px 0 25px 0;
	margin: 0 0 25px 0;
}

/* Press Kit */

/* Footer */

footer {
	width:100%;
	height:250px;
	background:url('img/bg-footer.html') repeat-x;
	display:table;
	padding:100px 25px 0 25px;
	box-sizing: border-box;
}

.footer-left {
	float:left;
	width:50%;
	display:block;
	text-align:left;
}

.footer-left img, .footer-right img {
	max-width:150px;
}

.footer-right {
	float:right;
	width:50%;
	display:block;
	text-align:right;
}

.copyright {
	text-align: center;
	clear:both;
}

/*------------------------------------*\
    MOBILE
\*------------------------------------*/

 @media only screen and (max-width: 720px) {
 	.logo img {
 		width:150px;
 		position:absolute;
 		left:0;
 		top:0;
 		z-index:99;
 	}

 	.nav {
 		max-width:100vw;
 		width:100%;
 		z-index:9999;
 	}

 	.nav span {
 		background: none;
 		margin:0;
 		padding:0;
 	}

 	.nav span a {
 		margin:9px 0;
 	}

 	.nav a:hover {
 		color:#fff;
 		border:0;
 	}

	.nav a:not(:first-child) {
		display: none;
		font-size:24px;
		border-bottom:1px solid #666;
		border-radius:0;
		width:100%;
	}

	.nav a:last-child {
		border-bottom: 0;
	}

	.nav a.icon {
		display: block;
		font-size:175%;
		float:right;
		border:0;
	}

	.nav.responsive {
		position: relative;
		width:100%;
		background:#000;
		border-radius:10px;
	}

	.nav.responsive a.icon {
		display: block;
		float:right;
		opacity:0.5;
	}

	.nav.responsive a:first-child {
		padding:15px;
	}

	.nav.responsive a {
		position:relative;
		left:0;
		float: none;
		display: table;
		text-align: left;
		padding:15px;
		margin:0;
	}

 	.hero-video {
 		display:none;
 	}

 	.hero-image {

 	}

 	.box-avatar {
		left:0;
		right:0;
		margin:-75px auto 0 auto;
 	}

 	.box-avatar, .box-avatar img {
 		width:100px;
 		height: 100px;
 	}

 	.box-dialogue {
 		width:95%;
 		margin-left:-16px;
 	}

 	.box-dialogue .inner {
 		padding-left:0;
 	}

 	.subfooter {
 		width:100%;
 	}

 	.yellowbar {
 		float:none;
 		margin:0 auto;
 		width:75%;
 		text-align:center;
 	}

 	.wrapper {
 		margin:0;
 		width:100%;
 		padding:25px;
 		box-sizing:border-box;
 	}

 	.subheader {
 		padding:15px 5px 0 15px;
 		font-size:16px;
 	}

 	.subheader::after {
 		margin-top:-15px;
 		margin-left:5px;
 	}

 	button {
 		font-size:14px;
 	}

 	ul.screenshots li {
		width:50%;
	}

	.copyright {
		font-size:10px;
		padding:25px 0 0 0;
	}

	footer img {
		width:60%;
	}
}