html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, nav, section
{
	margin: 0;
	padding: 0;
	border: 0;
	color: #fff0c1;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body
{
	min-height: 100%;
	margin: 0 auto;
	line-height: 1.5em;
	font-family: "Core Mellow", sans-serif;
}

a, a:hover, a:active
{
	text-decoration: none;
}

.wrapper
{
	padding: 0 8%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

strong
{
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 2.5em;
	line-height: 1.2em;
}

p
{
	font-size: 2.5em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2em;
}

section
{
	position: relative;
	width: 100%;
	height: 600px;
	display: block;
	overflow: hidden;
}

/*****************************************************************************/
/*                              COVER SECTION                                */
/*****************************************************************************/
#cover
{
    background: #fdba21;
    background: -webkit-linear-gradient(#fed23a, #fc9f07);
    background: -o-linear-gradient(#fed23a, #fc9f07);
    background: -moz-linear-gradient(#fed23a, #fc9f07);
    background: linear-gradient(#fed23a, #fc9f07);
}
#cover strong
{
	position: absolute;
	right: 75%;
	margin-right: -230px;
	bottom: -220px;
	font-size: 3em;
}
#cover #logo
{
	position: absolute;
	bottom: -150px;
	width: 300px;
	right: 75%;
	margin-right: -180px;
}
#cover #ipad
{
	pointer-events: none;
	background-image: url("../images/ipad.png");
	background-size: 550px 700px;
	width: 550px;
	height: 700px;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -280px;
	left: 58%;
}
#cover #video
{
	position: absolute;
	top: 50%;
	left: 58%;
	margin-left: 28px;
	margin-top: -222px;
	width: 327px;
	height: 436px;
}
#cover #down
{
	position: absolute;
	bottom: 0%;
	width: 100px;
	left: 50%;
	margin-left: -50px;
}
#cover #topbuttonios
{
	background-image: url('../images/download.png');
	background-repeat: no-repeat;
	position: absolute;
	background-size: 280px;
	width: 280px;
	height: 70px;
    top: 20px;
	left: 40px;
}
#cover #topbottonandroid
{
	background-image: url('../images/download.png');
	background-repeat: no-repeat;
	position: absolute;
	background-size: 280px;
	width: 280px;
	height: 70px;
    top: 70px;
	left: 40px;
}
.topbuttoncontent
{
	position: absolute;
	left: 0px;
	right: 35px;
	top: 10px;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #f26d08;
}
.bigbubble, .medbubble, .smlbubble, .tnybubble
{
	background-repeat: no-repeat;
	position: absolute;
}
.bigbubble
{
	background-image: url('../images/bubblebig.png');
	background-size: 48px 48px;
	width: 48px;
	height: 48px;
	margin: -24px -24px;
}
.medbubble
{
	background-image: url('../images/bubblemedium.png');
	background-size: 28px 28px;
	width: 28px;
	height: 28px;
	margin: -14px -14px;
}
.smlbubble
{
	background-image: url('../images/bubblesmall.png');
	background-size: 16px 16px;
	width: 16px;
	height: 16px;
	margin: -8px -8px;
}
.tnybubble
{
	background-image: url('../images/bubbletiny.png');
	background-size: 4px 4px;
	width: 4px;
	height: 4px;
	margin: -2px -2px;
}
#bubble1 { left: 5%; bottom: 35%; }
#bubble2 { left: 80%; bottom: 90%; }
#bubble3 { left: 10%; bottom: 80%; }

#bubble4 { left: 15%; bottom: 70%; }
#bubble5 { left: 50%; bottom: 40%; }
#bubble6 { left: 65%; bottom: 70%; }
#bubble7 { left: 87%; bottom: 40%; }
#bubble8 { left: 90%; bottom: 10%; }

#bubble9 { left: 25%; bottom: 95%; }
#bubblea { left: 40%; bottom: 65%; }
#bubbleb { left: 35%; bottom: 8%; }
#bubblec { left: 55%; bottom: 90%; }
#bubbled { left: 60%; bottom: 20%; }
#bubblee { left: 87%; bottom: 15%; }
#bubblef { left: 76%; bottom: 27%; }
#bubbleg { left: 95%; bottom: 70%; }

#bubbleh { left: 30%; bottom: 25%; }
#bubblei { left: 87%; bottom: 4%; }
#bubblej { left: 82%; bottom: 20%; }
#bubblek { left: 90%; bottom: 28%; }
#bubblel { left: 84%; bottom: 68%; }
#bubblem { left: 75%; bottom: 78%; }
#bubblen { left: 33%; bottom: 77%; }
#bubbleo { left: 52%; bottom: 63%; }
#bubblep { left: 6%; bottom: 17%; }
#bubbleq { left: 92%; bottom: 96%; }
#bubbler { left: 71%; bottom: 23%; }
#bubbles { left: 69%; bottom: 97%; }


/*****************************************************************************/
/*                             QUOTES SECTION                                */
/*****************************************************************************/
#quotes
{
	background-color: #e87;
}
#quotes .awardscontainer
{
	position: relative;
	margin-top: 10px;
	margin-bottom: 50px;
	margin-left: 0%;
	margin-right: 0%;
	height: 128px;
}
#quotes .awards
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 968px;
	height: 100%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#quotes .award
{
	position: relative;
	width: 256px;
	margin-left: 25px;
	margin-right: 25px;
	height: 100%;
	float: left;
	text-align: center;
	background-image: url('../images/laurels.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}
#quotes .title
{
	font-size: 1.5em;
	opacity: 0.7;
	
	width: 100%;
	color: #fed;
	text-transform: uppercase;
	
	position: absolute;
	left: 50%;
	top: 10%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#quotes .desc
{
	font-size: 1.5em;
	font-weight: bold;
	width: 70%;
	color: #fed;
	
	position: absolute;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#quotes .year
{
	font-size: 1.5em;
	color: #fed;
	opacity: 0.7;
	
	position: absolute;
	left: 50%;
	bottom: -10%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#quotes p
{
	color: #fed;
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 2.5em;
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 15%;
	margin-right: 15%;
}
#quotes .author
{
	opacity: 0.6;
	letter-spacing: 0.03em;
	font-weight: normal;
	font-size: 1.5em;
	margin-left: 30%;
	margin-right: 0;
	margin-bottom: 30px;
	margin-top: 10px;
}

/*****************************************************************************/
/*                             FLAVOR SECTION                                */
/*****************************************************************************/
#flavor
{
	background-color: #91cbd9;
}
#flavor strong
{
	position: absolute;
	left: 0;
	right: 0;
	margin-left:8%;
	margin-right:8%;
	top: -265px;
	color: #e1f8ff;
	text-align: center;
}
#flavor #character1
{
	position: absolute;
	left: 50%;
	margin-left: -280px;
	bottom: -200px;
	height: 380px;
}
#flavor #character2
{
	position: absolute;
	right: 50%;
	margin-right: -280px;
	bottom: -200px;
	height: 380px;
}
#flavor p
{
	position: absolute;
	left: 0;
	right: 0;
	margin-left:8%;
	margin-right:8%;
	top: 210px;
	color: #e1f8ff;
	text-align: center;
}

/*****************************************************************************/
/*                             DESIGN SECTION                                */
/*****************************************************************************/
#design
{
	background-color: #9d92b0;
}
#design strong
{
	color: #e9e6ef;
	position: absolute;
	bottom: 20px;
	right: 46%;
	text-align: right;
	font-size: 3em;
}
#design p
{
	color: #e9e6ef;
	position: absolute;
	top: 20px;
	right: 46%;
	text-align: right;
}
#design img
{
	position: absolute;
	top: -150px;
	left: 60%;
	width: 300px;
}

/*****************************************************************************/
/*                             ENDLESS SECTION                               */
/*****************************************************************************/
#endless
{
	background-color: #937960;
}
#endless strong
{
	color: #471c13;
	position: absolute;
	bottom: 50px;
	left: 48%;
	text-align: left;
	font-size: 3em;
}
#endless p
{
	color: #471c13;
	position: absolute;
	top: -10px;
	left: 48%;
	text-align: left;
}
#endless img
{
	position: absolute;
	top: -75px;
	right: 60%;
	width: 300px;
}

/*****************************************************************************/
/*                             FOOTER SECTION                                */
/*****************************************************************************/
#footer
{
    background: #fdba21;
    background: -webkit-linear-gradient(#fdd037, #fda007);
    background: -o-linear-gradient(#fdd037, #fda007);
    background: -moz-linear-gradient(#fdd037, #fda007);
    background: linear-gradient(#fdd037, #fda007);
	height: 400px;
}
#footer #downloadios
{
	background-image: url('../images/download.png');
	background-repeat: no-repeat;
	position: absolute;
	width: 600px;
	background-size: 600px;
	height: 209px;
	top: -150px;
	left: 50%;
	margin-left: -276px;
}
#footer #downloadandroid
{
	background-image: url('../images/download.png');
	background-repeat: no-repeat;
	position: absolute;
	width: 600px;
	background-size: 600px;
	height: 209px;
	top: -30px;
	left: 50%;
	margin-left: -276px;
}
.downloadcontent
{
	position: absolute;
	left: 0px;
	right: 50px;
	top: 36px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #f26d08;
}

#footer #links
{
	position: absolute;
	top: 130px;
	left: 0px;
	right: 0px;
	text-align: center;
	font-size: 2em;
	letter-spacing: 0.1em;
}

/*****************************************************************************/
/*                             MOBILE SUPPORT                                */
/*****************************************************************************/
@media screen and (max-width: 1000px) {
	#cover strong
	{
		font-size: 2em;
		margin-right: -150px;
		bottom: -180px;
	}
	#cover #logo
	{
		width: 250px;
		right: 75%;
		margin-right: -150px;
		bottom: -130px;
	}
	#cover #down
	{
		width: 80px;
		margin-left: -40px;
	}
	#cover #ipad
	{
		background-size: 440px 560px;
		width: 440px;
		height: 560px;
		margin-top: -224px;
	}
	#cover #video
	{
		margin-left: 22px;
		margin-top: -180px;
		width: 262px;
		height: 349px;
	}
	.bigbubble
	{
		background-size: 40px 40px;
		width: 40px;
		height: 40px;
		margin: -20px -20px;
	}
	.medbubble
	{
		background-size: 22px 22px;
		width: 22px;
		height: 22px;
		margin: -11px -11px;
	}
	.smlbubble
	{
		background-size: 10px 10px;
		width: 10px;
		height: 10px;
		margin: -5px -5px;
	}
	.tnybubble
	{
		background-size: 3px 3px;
		width: 3px;
		height: 3px;
		margin: -1px -1px;
	}

	#quotes .awardscontainer
	{
		height: 102px;		/* 128 * 0.8 */
	}
	#quotes .awards
	{
		width: 706px;		/* 205 * 3 + 15*6 (borders) */
	}
	#quotes .award
	{
		margin-left: 15px;
		margin-right: 15px;
		width: 205px;		/* 256 * 0.8 */
	}
	#quotes .title
	{
		font-size: 1.2em;	/* 1.5 * 0.8 */
	}
	#quotes .desc
	{
		font-size: 1.2em;	/* 1.5 * 0.8 */
		line-height: 1.0em;
	}
	#quotes .year
	{
		font-size: 1.2em;	/* 1.5 * 0.8 */
		line-height: 1.0em;
	}
	
	#design strong
	{
		bottom: 165px;
		left: 0px;
		right: 0px;
		text-align: center;
		font-size: 2.5em;
	}
	#design p
	{
		top: 140px;
		left: 0px;
		right: 0px;
		text-align: center;
		font-size: 2em;
		letter-spacing: 0.07em;
	}
	#design img
	{
		top: -140px;
		left: 50%;
		margin-left: -120px;
		width: 240px;
	}

	#endless strong
	{
		bottom: 165px;
		left: 0px;
		right: 0px;
		text-align: center;
	}
	#endless p
	{
		top: 140px;
		left: 0px;
		right: 0px;
		text-align: center;
	}
	#endless img
	{
		top: -75px;
		left: 50%;
		margin-left: -140px;
		width: 280px;
	}
}

@media screen and (max-width: 830px) {
	#cover strong
	{
		left: 10%;
		right: 0%;
		margin-right: 0px;
		bottom: -220px;
	}
	#cover #logo
	{
		bottom: -325px;
		width: 200px;
		left: 65%;
		margin-right: -180px;
	}
	#cover #ipad
	{
		background-size: 330px 420px;
		width: 330px;
		height: 420px;
		top: 0px;
		left: 50%;
		margin-left: -114px;
	}
	#cover #video
	{
		top: 33px;
		left: 50%;
		margin-left: -98px;
		margin-top: -222px;
		width: 196px;
		height: 260px;
	}

	#quotes .awardscontainer
	{
		height: 77px;		/* 128 * 0.6 */
	}
	#quotes .awards
	{
		width: 552px;		/* 154 * 3 + 15*6 (borders) */
	}
	#quotes .award
	{
		margin-left: 15px;
		margin-right: 15px;
		width: 154px;		/* 256 * 0.6 */
	}
	#quotes .title
	{
		font-size: 0.9em;	/* 1.5 * 0.6 */
	}
	#quotes .desc
	{
		font-size: 0.9em;	/* 1.5 * 0.6 */
	}
	#quotes .year
	{
		font-size: 0.9em;	/* 1.5 * 0.6 */
	}
	
	#quotes p
	{
		font-size: 2.0em;
	}
	#quotes .author
	{
		font-size: 1.25em;
	}

	#flavor strong
	{
		font-size: 2em;
	}
	#flavor #character1
	{
		margin-left: -250px;
		height: 340px;
		bottom: -190px;
	}
	#flavor #character2
	{
		margin-right: -250px;
		height: 340px;
		bottom: -190px;
	}
	#flavor p
	{
		font-size: 2em;
		letter-spacing: 0.07em;
	}
}

@media screen and (max-width: 670px) {
	#cover strong
	{
		font-size: 1.6em;
		bottom: -218px;
	}
	#cover #logo
	{
		bottom: -299px;
		width: 160px;
	}

	#quotes .awardscontainer
	{
		height: 64px;		/* 128 * 0.5 */
	}
	#quotes .awards
	{
		width: 474px;		/* 128 * 3 + 15*6 (borders) */
	}
	#quotes .award
	{
		width: 128px;		/* 256 * 0.5 */
	}
	#quotes .title
	{
		font-size: 0.75em;	/* 1.5 * 0.5 */
	}
	#quotes .desc
	{
		font-size: 0.75em;	/* 1.5 * 0.5 */
	}
	#quotes .year
	{
		font-size: 0.75em;	/* 1.5 * 0.5 */
	}
	
	#footer #downloadios
	{
    	top: -125px;
        background-size: 460px;
        width: 460px;
        margin-left: -212px;
    }

	#footer #downloadandroid
	{
    	top: -30px;
        background-size: 460px;
        width: 460px;
        margin-left: -212px;
    }

    .downloadcontent
	{
		font-size: 1.6em;
		letter-spacing: 0.02em;
		right: 38px;
		top: 24px;
	}
}

@media screen and (max-width: 480px) {
	#cover #topbuttonios
	{
		left: 50%;
		margin-left: -130px;
	}
	#cover #topbottonandroid
	{
		left: 50%;
		margin-left: -130px;
	}
	#cover strong
	{
		font-size: 1.25em;
		bottom: -212px;
		right: 35%;
	}
	#cover #logo
	{
		bottom: -280px;
		width: 130px;
	}

	#quotes .awardscontainer
	{
		height: 51px;		/* 128 * 0.4 */
	}
	#quotes .awards
	{
		width: 366px;		/* 102 * 3 + 10*6 (borders) */
	}
	#quotes .award
	{
		margin-left: 10px;
		margin-right: 10px;
		width: 102px;		/* 256 * 0.4 */
	}
	#quotes .title
	{
		font-size: 0.6em;	/* 1.5 * 0.4 */
	}
	#quotes .desc
	{
		font-size: 0.6em;	/* 1.5 * 0.4 */
	}
	#quotes .year
	{
		font-size: 0.6em;	/* 1.5 * 0.4 */
	}
	#quotes p
	{
		font-size: 1.6em;
	}
	#quotes .author
	{
		font-size: 1.1em;
	}

	#flavor strong
	{
		font-size: 1.8em;
		top: -220px;
	}
	#flavor #character1
	{
		margin-left: -176px;
		height: 240px;
		bottom: -150px;
	}
	#flavor #character2
	{
		margin-right: -176px;
		height: 240px;
		bottom: -150px;
	}
	#flavor p
	{
		font-size: 1.7em;
		top: 180px;
	}

	#design strong
	{
		bottom: 165px;
		font-size: 2em;
	}
	#design p
	{
		font-size: 1.7em;
		top: 140px;
	}
	#design img
	{
		top: -120px;
		margin-left: -100px;
		width: 200px;
	}

	#endless strong
	{
		bottom: 140px;
		font-size: 2em;
		letter-spacing: 0.04em;
	}
	#endless p
	{
		top: 110px;
		font-size: 1.7em;
		letter-spacing: 0.07em;
	}
	#endless img
	{
		top: -85px;
		margin-left: -140px;
		width: 280px;
	}

	#footer
	{
		height:250px;
	}
	#footer #downloadios
    {
    	top: -85px;
        background-size: 300px;
        width: 300px;
        margin-left: -139px;
    }
    #footer #downloadandroid
    {
    	top: -20px;
        background-size: 300px;
        width: 300px;
        margin-left: -139px;
    }

    .downloadcontent
	{
		font-size: 1em;
		right: 28px;
		letter-spacing: 0.03em;
		top: 12px;
	}

	#footer #links
	{
		top: 70px;
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}
}