html, body
{
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: 'Montserrat', Arial, sans-serif;
	background: #222;
}

.section
{
    width: 100%;
    float: left;
}

.wrapper
{
    width: 900px;
    margin: 0 auto;
}

@media(max-width: 1000px) { .wrapper { width: 90%; } }

/* Navigation  -=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

    .navigation
    {
        position: absolute;
        background: rgba(0, 0, 0, 0.4);
        height: 60px;
        z-index: 1;
    }

    .navigation .left { float: left; }
    .navigation .right { float: right; }

    .navigation > * > * 
    { 
        float: left; 
        color: #fff;
        text-decoration: none;
    }
    .navigation > * > * img { height: 40px; padding: 10px; float: left; }
    .navigation > * > * span { padding: 30px 25px 30px 0; line-height: 0px; float: left; }

    .navigation a:hover { background: #333; }

    @media(max-width: 1200px)
    {
        .navigation > * > * span { display: none; }
    }

/* BANNER  -=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

    .banner
    {
        position: relative;
        width: 100%;
        padding-bottom: 167.272727272%;
        background: #000 url("../images/banner/background.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .layer
    {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .layer-dash { background-image: url("../images/banner/dash.png"); }
    .layer-oshiro { background-image: url("../images/banner/oshiro.png"); }
    .layer-granny { background-image: url("../images/banner/granny.png"); }
    .layer-theo { background-image: url("../images/banner/theo.png"); }
    .layer-badeline { background-image: url("../images/banner/badeline.png"); }
    .layer-madeline { background-image: url("../images/banner/madeline.png"); }
    .layer-logo { background-image: url("../images/banner/logo.png"); }
    .layer-strawberry { background-image: url("../images/banner/strawberry.png"); }
    .layer-clouds { background-image: url("../images/banner/clouds.png"); }
    .layer-logo { left: 7.5%; right: 7.5%; top: 0; bottom: 15%; }

    .edge
    {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0px;
        height: 64px;
        background: url("../images/banner/edge.png") repeat-x;
    }

/* CONTENT -=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

    .content
    {
        position: relative;
        padding: 0px 0 80px 0;
        background: #222;
        z-index: 10;
    }

    
    .content .video 
    { 
        width: 100%; 
        float: left; 
        margin-top: -180px; 
        margin-bottom: 60px; 
        box-shadow: 0 0 128px rgba(0, 0, 0, 0.6);
        background: #000;
    }

    .content h1 
    { 
        color: #fff; 
        font-size: 1.4em; 
        text-align: center; 
        text-shadow: 0 0 32px rgba(255,255,255,0.25);
    }
    .content h1 a { color: #98f4f7; text-decoration: none; }
    .content h1 a:hover { color: #fff; }

	.content .stores
	{
		width: 100%;
		padding: 20px;
		box-sizing: border-box;
		border: 2px solid #444;
		border-bottom: 32px solid #444;
		float: left;
		margin-top: 40px;
		margin-bottom: 2%;
	}
	.content .stores .store {
		width: 48%;
		margin: 0 0 0 10px;
		padding: 0 10px;
		float: left;
		border: 2px solid #444;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 165px;
		flex-wrap: wrap;
		background: rgba(0, 0, 0, 0.5);
		position: relative;
	}
	.store h3 {
		flex: 0 0 100%;
		margin: 8px 0px 0px;
		color: #fff;
	}
	.store img {
		width: 100px;
	}
	.store p {
		color: #fff;
		margin: 10px;
		width: 70%;
	}
	.store a.buy-button {
		position: absolute;
		right: 15px;
		bottom: -15px;
		background: green;
		padding: 8px;
		border-radius: 2px;
		color: #fff;
		text-decoration: none;
		font-size: 14px;
	}

    .content .stores .consoles { 
		width: 100%;
		float: left;
		display: flex;
		align-content: center;
		justify-content: center;
		flex-wrap: wrap;
	}
	.content .stores .consoles a
	{
		width: 32%;
		float: left;
		padding: 14px;
		box-sizing: border-box;
		border: 2px solid transparent;
		background: #fff;
		color: #fff;
		border-radius: 4px;
		font-weight: bold;
		text-decoration: none;
		margin-right: 2%;
		transition: background 0.1s, border 0.2s;
		margin-bottom: 15px;
	}
    .content .stores .consoles a:nth-child(3n+0) { margin-right: 0; }
    .content .stores .consoles a img { width: 32px; float: left; }
    .content .stores .consoles a span { float: left; margin: 8px 0 0 16px; }
    .content .stores .consoles a.store-switch { background: #e60012; }
    .content .stores .consoles a.store-ps4 { background: #0072ce; }
    .content .stores .consoles a.store-xb1 { background: #107c10; }
	.content .stores .consoles a.store-steam { background: #282e39; }
    .content .stores .consoles a.store-egs { background: #444; }
    .content .stores .consoles a.store-itch { background: #fa5c5c; }
    .content .stores .consoles a:hover {background: #222; border: 2px solid #fff; }

    @media(max-width: 900px)
    {
        .content .stores .consoles a { text-align: center; }
        .content .stores .consoles a img { width: 32px; float: none; }
        .content .stores .consoles a span { display: none; }
    }

    .content .stores .merch
    {
        margin-top: 32px;
        width: 100%;
        float: left;
    }
    .content .stores .merch a 
    { 
        float: left; 
        width: 22%;
        margin-right: 4%; 
        box-sizing: border-box;
        transition: color 0.2s;
    }
    .content .stores .merch a img { width: 100%; border-radius: 8px; opacity: 0.8; transition: opacity 0.2s; }
    .content .stores .merch a { color: #777; text-decoration: none; font-weight: bold; text-align: center; }
    .content .stores .merch a:hover { color: #fff;text-shadow: 0 0 32px rgba(255,255,255,0.25); }
    .content .stores .merch a:hover img { opacity: 1; }
    .content .stores .merch a:last-child { margin-right: 0; }

    .content .ost {  padding-top: 0; padding-bottom: 40px; }
    .content .ost img
    {
        width: 60%;
    }


    .screenshots { margin-top: 2%; }
    .screenshots > *
    {
        width: 49%;
        margin-bottom: 2%;
        float: left;
    }
    .screenshots > *:nth-child(even) { margin-left: 2%; }

    .screenshots img {width:100%;}




/* FOOTER  -=-=-=-=-=-=-=-=-=-=-=-=- */
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

    .footer
    {
        padding: 0px 0 80px 0;
        text-align: center;
        color: #fff;
        font-weight: bold;
        text-shadow: 0 0 rgba(255,255,255,0.25);
        line-height: 2em;
    }
    
    .footer a
    {
        text-decoration: none;
        color: #44c5f0;
    }
    .footer a:hover { color: #fff; }
    .footer img { opacity: 0.8; transition: opacity 0.25s; }
    .footer img:hover { opacity: 1; }