html, body{
	font-family: 'Asap', sans-serif;
	margin:0;
	position: relative;
}
@font-face {
    font-family: 'hh';
    src: url('assets/hh.ttf');
}
@font-face {
    font-family: 'hh_ms';
    src: url('assets/hh.eot');
}
*{
	box-sizing:border-box;
}
html{
	background-color:#FEFCCC;
}
div{
	max-width: 100%;
	max-height: 100%;
	margin:0;
}
.textwrapper{
	text-align:center;
}
.card{
}
img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width: 100%;
	max-height: 100%;
}
img[src*=".svg"]{
	width:100%;
}
p{
	margin:4px;
}
.breaking{
	margin-bottom:10px;
}
a{
	color:#f0554e;
}
.icon{
	user-select:none;
	font-family:hh,hh_ms;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
/*main canvas*/
#fullsize{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	z-index: -1;
}
#main{
	z-index:-1;
	margin:0;
	position: absolute;
}
.canvaswrapper{
	position:absolute;
	left:0;
	z-index:-1;
}
.pmpycanvas{
	position: relative;
}
/*navbar*/
#navbar{
	width:100%;
	background-color: #ea6963;
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	justify-content:space-between;

	display:-webkit-flex;
	-webkit-flex-wrap:wrap;
	-webkit-align-items:stretch;
	-webkit-justify-content:space-between;
}
#navleft, #navright{
	display:flex;
	align-items:stretch;
	display:-webkit-flex;
	-webkit-align-items:stretch;
}
#navright{
	margin-left: auto;
}
#navbar a{
	display:flex;
	align-items:flex-end;
	text-decoration: none;
	color:white;
	padding:10px;
	cursor:pointer;
	font-size:x-large;
	-webkit-align-items:flex-end;
}
#navbar a:hover{
	color: #ea6963;
	background-color: white;
}
#navbar .icon span{
	align-self:center;
	-webkit-align-self:center;
}
@media screen and (max-width: 400px) {
    #navbar a,#navbar .icon{
        font-size:100%;
    }
}
/*content wrapper*/
#content{
	width:880px;
	margin-left:auto;
	margin-right:auto;
}
/*logo*/
#logowrapper{
	padding:30px;
	width:400px;
	max-width: 100%;
	margin-left:auto;
	margin-right:auto;
}
/*tagline*/
#tagline{
	text-align: center;
	color: #ea6963;
	font-size:larger;
	margin-bottom: 30px;
}
#tagline p{
	margin-bottom: 10px;
}
#tagline a{
	text-decoration: none;
	font-weight: bold;
}
#tagline a:hover{
	border-bottom: 1.5px solid #f0554e;
}
/*generic card stuff*/
.card{
	max-width:550px;
	background-color:white;
	padding:20px;
	margin:80px;
	margin-left:auto;
	margin-right:auto;
	color:#ea6963;
	border-radius:8px;
}
.bigcard{
	max-width:100%;
}
.midcard{
	max-width:760px;
	padding-left:30px;
	padding-right:30px;
}
/*trailer*/
#trailerwrapper{
    position: relative;
	height:0;
	padding-bottom: 56.25%;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:200px;
}
#trailerwrapper iframe{
	position: absolute;
	width:100%;
	height:100%;
}
#trailercanvas{
	top:-200px;
}
/*description card*/
#descriptioncanvas{
	top:-500px;
}
#descriptioncard p{
	margin:1em;
}
#descriptioncard{
	font-size:larger;
}
/*gifcard*/
#gifcard{
	display:flex;
	flex-flow:wrap;
	justify-content:center;
	display:-webkit-flex;
	-webkit-flex-flow: wrap;
	-webkit-justify-content: center;
}
.gifitem{
	width:400px;
	max-width:100%;
	margin:4px;
}
/*widget card*/
#widgetcard{
	font-size:larger;
}
#widgetcard p{
	margin:1em;
}
#mainquote p{
	margin-top:0;
	margin-bottom:0;
}
#mainquote{
	margin-top:1em;
	margin-bottom:1em;
}
.gifitem video.gfyVid{
	margin:0;
}
#storebuttonsdiv{
	margin-top:10px;
	margin-bottom:10px;
	display:flex;
	display:-webkit-flex;
	justify-content:space-around;
	-webkit-justify-content:space-around;
	text-align: center;
}
.storebutton{
	width:40%;
	display:inline-block;
}
.storebutton:hover svg #bg{
 fill:#888;
}
#itcharea{
	max-width: 500px;
	margin-top:10px;
	display:flex;
	display:-webkit-flex;
	justify-content:space-around;
	-webkit-justify-content:space-around;
	text-align: center;
	align-items:center;
	-webkit-align-items:center;
}
/*screenshots*/
#foldwrapper .card{
	text-align: center;
	overflow:hidden;
	margin:0;
}
.folded .card{
	max-height:400px;
}
.unfolded .card{
	transition: width 2s, max-height 2s, background-color 2s, transform 2s;
	max-height:3000px;
}
.unfolded #screenshotmask{
	display:none;
}
#screenshotmask{
	margin:0;
	position:absolute;
	height:400px;
	width:880px;
	background:transparent;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 66%,rgba(255,255,255,1) 80%);
}
#foldwrapper .icon{
	font-size:xx-large;
}
#foldwrapper .icon:hover{
	color:#888;
	cursor:pointer;
}
#unfoldbutton{
	position:relative;
	top:330px;
}
#screenshotcard{
}
#screenshotwrapper{
	margin-left:auto;
	margin-right:auto;
	display:flex;
	flex-flow: wrap;
	justify-content: center;
	margin-bottom:16px;

	display:-webkit-flex;
	-webkit-flex-flow: wrap;
	-webkit-justify-content: center;
}
#screenshotcard img{
	max-width:100%;
	margin:4px;
}
/*widget card*/
#widgetcanvas{
	top:-550px;
}
/*mailing list*/
#mc_embed_signup *{
	font-family: 'Asap', sans-serif;
	display:block;
	margin:4px;
	margin-left:auto;
	margin-right:auto;
}
#mc_embed_signup input.button{
	-webkit-appearance: none;
	border:none;
	padding:8px;
	background-color: #ea6963;
	color:white;
	margin-top:8px;
	border-radius:4px;
	font-size:large;
}
#mc_embed_signup input.button:hover{
	background-color:#888;
	color:white;
	cursor:pointer;
}
#mce-EMAIL{
	width:80%;
}
/*praise*/
#praisecard{
}
.praisewrapper{
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	justify-content:center;
	-webkit-justify-content:center;
}
.praiseitem{
	width:300px;
	flex:1 1 auto;
	-webkit-flex:1 1 auto;
	max-width:100%;
	margin-top:15px;
	margin-bottom:15px;
	margin-left:10px;
	margin-right:10px;
}
.praisebody{
	text-align:left;
	font-size:larger;
}
.praisename{
	text-align:right;
	font-style: italic;
}
.praiselink{
	text-align:right;
	font-style: italic;
	font-weight: bold;
}
.praiselink a{
	text-decoration: none;
}
.praiselink a:hover{
	border-bottom: 1.5px solid #f0554e;
}
/*wreaths*/
#wreathwrapper{
	display:flex;
	display:-webkit-flex;
	flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	justify-content:space-around;
	-webkit-justify-content:space-around;
}
.wreathitem img{
	max-width:200px;
	margin:10px;
}
/*help*/
#helpcard{
	text-align: center;
	font-size:larger;
	margin-bottom:0;
}
#footercanvas{
	background-color:#FEFCCC;
}