/*
 * Start Bootstrap - Landing Page (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body, html { width: 100%; height: 100%;}

body {
	background-color: #000f33;
	color: #ffffff;
}


input {
	color: #000000;
}

ul {
	list-style-type: square;
}
li {
}

footer {
	text-align: center;
}
footer p {
	padding: 5px 0px;
}

a {
	color: #ffffff;
	text-decoration: underline;
	cursor: pointer;
	z-index: 9999;
}

.pixelart {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
}

.img-32 {height: 32px;}
@media(min-width:769px) {
	.img-32 {height: 64px;}
}
@media(min-width:1280px) {
	.img-32 {height: 96px;}
}

/* FONTS */
@font-face {
    font-family: 'Kroeger-custom-8';
    src: url('../fonts/8.ttf') format('truetype');
	font-weight: normal;
}
@font-face {
    font-family: 'Kroeger-custom-10';
    src: url('../fonts/10.ttf') format('truetype');
	font-weight: normal;
}

.text-8 { font-family: "Kroeger-custom-8"; }
.text-10 { font-family: "Kroeger-custom-10"; }

/* TEXT */
.text-blue { color: #001A46; }
.text-red { color: #c42727; }
.text-highlight { color: #f0f0aa;}

.text-small { font-size: 10px; }
.text-medium { font-size: 11px; }
.text-big { font-size: 12px; }
.text-huge { font-size: 32px;}
@media(min-width:769px) {
	.text-small { font-size: 12px; }
	.text-medium { font-size: 14px; }
	.text-big { font-size: 16px; }
	.text-huge { font-size: 40px;}
}
@media(min-width:1280px) {
	.text-small { font-size: 16px; }
	.text-medium { font-size: 22px; }
	.text-big {font-size: 24px;}
	.text-huge { font-size: 48px;}
}

.text-shadow-black { text-shadow: 1px 1px black; }
.text-shadow-red { text-shadow: 1px 1px rgb(134, 27, 28); }
@media(min-width:769px) {
	.text-shadow-black { text-shadow: 2px 2px black; }
	.text-shadow-red { text-shadow: 2px 2px rgb(134, 27, 28); }
}

/* POSITIONING */
.fullParentSize {width: 100%; height: 100%;}
.center { margin-left: 50%; transform: translateX(-50%); }
.margin-center { margin-left: auto; margin-right: auto; display: block; }
.text-align-center { text-align: center; }

.padding-top-small { padding-top: 10px; }
.padding-bottom-small { padding-bottom: 10px; }
.padding-vertical-small { padding-top: 10px; padding-bottom: 10px; }
.padding-top-medium { padding-top: 20px; }
.padding-bottom-medium { padding-bottom: 20px; }
.padding-vertical-medium { padding-top: 20px; padding-bottom: 20px; }
.padding-top-big { padding-top: 30px; }
.padding-bottom-big { padding-bottom: 30px; }
.padding-vertical-big { padding-top: 30px; padding-bottom: 30px; }

.margin-top-small { margin-top: 10px; }
.margin-bottom-small { margin-bottom: 10px; }
.margin-vertical-small { margin-top: 10px; margin-bottom: 10px; }
.margin-top-medium { margin-top: 20px; }
.margin-bottom-medium { margin-bottom: 20px; }
.margin-vertical-medium { margin-top: 20px; margin-bottom: 20px; }
.margin-top-big { margin-top: 30px; }
.margin-bottom-big { margin-bottom: 30px; }
.margin-vertical-big { margin-top: 30px; margin-bottom: 30px; }
@media(min-width:769px) {
	.padding-top-small { padding-top: 20px; }
	.padding-bottom-small { padding-bottom: 20px; }
	.padding-vertical-small { padding-top: 20px; padding-bottom: 20px; }
	.padding-top-medium { padding-top: 40px; }
	.padding-bottom-medium { padding-bottom: 40px; }
	.padding-vertical-medium { padding-top: 40px; padding-bottom: 40px; }
	.padding-top-big { padding-top: 60px; }
	.padding-bottom-big { padding-bottom: 60px; }
	.padding-vertical-big { padding-top: 60px; padding-bottom: 60px; }
	
	.margin-top-small { margin-top: 20px; }
	.margin-bottom-small { margin-bottom: 20px; }
	.margin-vertical-small { margin-top: 20px; margin-bottom: 20px; }
	.margin-top-medium { margin-top: 40px; }
	.margin-bottom-medium { margin-bottom: 40px; }
	.margin-vertical-medium { margin-top: 40px; margin-bottom: 40px; }
	.margin-top-big { margin-top: 60px; }
	.margin-bottom-big { margin-bottom: 60px; }
	.margin-vertical-big { margin-top: 60px; margin-bottom: 60px; }
}
@media(min-width:1280px) {
	.padding-top-small { padding-top: 30px; }
	.padding-bottom-small { padding-bottom: 30px; }
	.padding-vertical-small { padding-top: 30px; padding-bottom: 30px; }
	.padding-top-medium { padding-top: 60px; }
	.padding-bottom-medium { padding-bottom: 60px; }
	.padding-vertical-medium { padding-top: 60px; padding-bottom: 60px; }
	.padding-top-big { padding-top: 90px; }
	.padding-bottom-big { padding-bottom: 90px; }
	.padding-vertical-big { padding-top: 90px; padding-bottom: 90px; }
	
	.margin-top-small { margin-top: 30px; }
	.margin-bottom-small { margin-bottom: 30px; }
	.margin-vertical-small { margin-top: 30px; margin-bottom: 30px; }
	.margin-top-medium { margin-top: 60px; }
	.margin-bottom-medium { margin-bottom: 60px; }
	.margin-vertical-medium { margin-top: 60px; margin-bottom: 60px; }
	.margin-top-big { margin-top: 90px; }
	.margin-bottom-big { margin-bottom: 90px; }
	.margin-vertical-big { margin-top: 90px; margin-bottom: 90px; }
}

/* BACKGROUND */
.red-background { background-color: #c42727; }
.blue-background { background-color: #000f33; }
.dark-red-background { background-color: #b01e1e; }
.light-blue-background { background-color: #11224d; }

/* HOVER */
.hover-blue:hover { color: #001A46; }
.hover-red:hover { color: #c42727; }

/* BACKGROUND BORDERS */
.blue-border-top {
	border-top: solid #001931;
	border-top-width: 4px;
}
.blue-border-bottom {
	border-bottom: solid #001931;
	border-bottom-width: 4px;
}
@media(min-width:769px) {
	.blue-border-top {
		border-top-width: 8px;
	}
	.blue-border-bottom {
		border-bottom-width: 8px;
	}
}

/* SHOW IF SCALE */
.showIfScale1 {
	display: block;
}
.showIfScale2 {
	display: none;
}
.showIfScale3 {
	display: none;
}
@media(min-width:769px) {
	.showIfScale1 {
		display: none;
	}
	.showIfScale2 {
		display: block;
	}
	.showIfScale3 {
		display: none;
	}
}
@media(min-width:1280px) {
	.showIfScale1 {
		display: none;
	}
	.showIfScale2 {
		display: none;
	}
	.showIfScale3 {
		display: block;
	}
}

/* LOCALE SWITCHER */
.switch-locale {
	position: absolute;
	top: 10px;
	padding-inline-start: 0px;
}

/* BANNER */
.banner-wrapper {
    width:100%;
	overflow: hidden;
	background: url(../img/banner/bannerPattern_small.png) repeat bottom 39px center;
	background-size: 48px, 48px;
}
.banner-center-wrapper {
	width: 336px;
	margin-left: 50%;
	transform: translateX(-50%);
}
.banner-center { 
	margin-left: 50%;
	transform: translateX(-50%);
}

/* BANNER COROMON */
.banner-idle {
	position: absolute;
	z-index: 1;
}
.banner-idle1 { 
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
.banner-idle1-1 { height: 48px; top: 72px; left: 82px; }
.banner-idle1-2 { height: 96px; top: 144px; left: 164px; }
.banner-idle1-3 { height: 144px; top: 211px; left: 245px; }
.banner-idle2-1 { height: 48px; top: 79px; left: 114px; }
.banner-idle2-2 { height: 96px; top: 158px; left: 228px; }
.banner-idle2-3 { height: 144px; top: 232px; left: 342px; }
.banner-idle3-1 { height: 48px; top: 76px; left: 209px; }
.banner-idle3-2 { height: 96px; top: 152px; left: 418px; }
.banner-idle3-3 { height: 144px; top: 223px; left: 627px; }
.separator-red-blue {
    background: url(../img/banner/bannerEdge_small.png) repeat-x top right;
    width:100%;
	height: 6px;
	overflow: hidden;
}

/* BANNER CHARACTERS */
.banner-male, .banner-female { display: none; position: absolute; }
@media(min-width:380px) {
	.banner-male { display: initial; top: 49px; right: -70px; }
	.banner-female { display: initial; top: 49px; left: -70px; }
}
@media(min-width:481px) {
	.banner-male { right: -100px; }
	.banner-female { left: -100px; }
}
@media(min-width:769px) {
	.banner-male, .banner-female { height: 320px; top: 100px; }
	.banner-male { right: -120px; }
	.banner-female { left: -120px; }
}
@media(min-width:920px) {	
	.banner-male { right: -190px; }
	.banner-female { left: -190px; }
}
@media(min-width:1280px) {
	.banner-male, .banner-female { height: 480px; top: 150px; }
	.banner-male { right: -220px; }
	.banner-female { left: -220px; }
}
@media(min-width:1420px) {
	.banner-male { right: -260px; }
	.banner-female { left: -260px; }
}

/* LOGO & DEMO */
.bannerLogoSwurmy {
	height: 56px;
}
.banner-logo {
	position: absolute;
	top: 80px;
	margin-left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.banner-demo-text {
	position: absolute;
	top: 140px; 
}
.banner-steam {
	position: absolute;
	height: 24px;
	top: 180px;
	margin-left: 18%;
	transform: translateX(-18%);
}
.banner-appstore {
	position: absolute;
	height: 24px;
	top: 180px;
	margin-left: 50%;
	transform: translateX(-50%);
}
.banner-googleplay {
	position: absolute;
	height: 24px;
	top: 180px;
	margin-left: 82%;
	transform: translateX(-82%);
}

@media(min-width:769px) {
	.bannerLogoSwurmy {
		height: 112px;
	}
	.banner-logo {
		top: 160px;
	}
	.banner-demo-text {
		top: 320px; 
	}
	.banner-steam {
		height: 32px;
		top: 368px;
		margin-left: 28%;
		transform: translateX(-28%);
	}
	.banner-appstore {
		height: 32px;
		top: 368px;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.banner-googleplay {
		height: 32px;
		top: 368px;
		margin-left: 72%;
		transform: translateX(-72%);
	}
}

@media(min-width:1280px) {
	.bannerLogoSwurmy {
		height: 163px;
	}
	.banner-logo {
		top: 240px;
	}
	.banner-demo-text {
		top: 480px; 
	}
	.banner-steam {
		height: 48px;
		top: 550px;
	}
	.banner-appstore {
		height: 48px;
		top: 550px;
	}
	.banner-googleplay {
		height: 48px;
		top: 550px;
	}
}

/* LANGUAGE */
.language-select {
	display:inline-block
}

/* GAMEPLAY */
.gameplay-content { margin-left: auto; margin-right: auto; width: 320px; }
.gameplay-screenshot { height:80px; width: 142px; float:left; }
.gameplay-frame-text { text-align: center; padding-top: 80px; }
.gameplay-frame-ajaxLoader {width: 16px; height: 16px;}
.gameplay-frame { width: 294px; height:  172px; padding: 6px 5px; background: url(../img/gameplay/gameplayFrame_small.png); }
.gameplay-text { width: 300px; }
.gameplay-text-header { width: 300px; margin-top: 20px; margin-bottom: 5px; }
@media(min-width:769px) {
	.gameplay-content { margin-left: auto; margin-right: auto; width: 640px; }
	.gameplay-screenshot { height:160px; width: 284px; }
	.gameplay-frame-text { text-align: center; padding-top: 160px; }
	.gameplay-frame-ajaxLoader { width: 32px; height: 32px; }
	.gameplay-frame { width: 588px; height: 344px; padding: 12px 10px; background: url(../img/gameplay/gameplayFrame_medium.png); }
	.gameplay-text { width: 600px; }
	.gameplay-text-header { width: 600px; margin-top: 40px; margin-bottom: 10px; }
}
@media(min-width:1280px) {
	.gameplay-content { margin-left: auto; margin-right: auto; width: 960px; }
	.gameplay-screenshot { height:240px; width: 426px; }
	.gameplay-frame-text { text-align: center; padding-top: 240px; }
	.gameplay-frame-ajaxLoader { width: 48px; height: 48px; }
	.gameplay-frame { width: 882px; height: 516px; padding: 18px 15px; background: url(../img/gameplay/gameplayFrame_big.png); }
	.gameplay-text { width: 900px; }
	.gameplay-text-header { width: 900px; margin-top: 60px; margin-bottom: 15px; }
}

/* DONATE */
.donate-content { margin-left: auto; margin-right: auto; width: 210px; }
.donate-text { width: 210px; }
.donate-text-header { width: 210px; margin-top: 20px; margin-bottom: 5px; }
.donate-content .text-small {
	font-size: 10px;
}
@media(min-width:419px) {
	.donate-content { margin-left: auto; margin-right: auto; width: 420px; }
	.donate-text { width: 420px; }
	.donate-text-header { width: 420px; margin-top: 40px; margin-bottom: 10px; }
	.donate-content .text-small {
		font-size: 14px;
	}
}
@media(min-width:769px) {
	.donate-content { margin-left: auto; margin-right: auto; width: 630px; }
	.donate-text { width: 630px; }
	.donate-text-header { width: 630px; margin-top: 60px; margin-bottom: 15px; }
	.donate-content .text-small {
		font-size: 18px;
	}
}

/* EXTRA */
.extra {
    padding: 30px 0;
	text-align: center;
}
.extra-social {
	margin-left: auto;
	margin-right: auto;
	width: 102px;
}
.extra-social-icon {
	float: left;
	padding-right: 10px;
	padding-top: 10px;
}
.extra-donate-button {
	width: 72px;
	height: 24px;
}
.extra-donate-button-wrapper {
	width: 150px;
	margin-left: auto;
	margin-right: auto;
}
.extra-donate-button-left {
	float: left;
}
.extra-donate-button-right {
	float: right;
}

.extra-platform-icon {
/*	margin-bottom: 10px;*/
}

/* CREATE-A-COROMON CONTEST */
.contest-coromon {
    height: 80px;
}
@media(min-width:419px) {
    .contest-coromon {
        height: 160px;
    }
}
@media(min-width:769px) {
    .contest-coromon {
        height: 240px;
    }
}

/* PUBLISHER */
img.publisher {
    width: 120px;
}
@media(min-width:769px) {
    img.publisher {
        width: 160px;
    }
}
@media(min-width:1280px) {
    img.publisher {
        width: 200px;
    }
}

/* 404 */
.sad-male {
	width: 60px;
	height: 135px;
}
.message {
    padding: 120px 0;
    background-color: #c42727;
	text-align: center;
}
.message-content h1 {
	font-size: 46px;
}

/* MAILCHIMP */
#mc_embed_signup { clear:left;  width:100%;}
#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block;}
#mc_embed_signup .clear {display: block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background: url(../img/icons/buttonBorder_middle_1.png) repeat-x top right; box-sizing:border-box; height:38px; line-height:38px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
#mc_embed_signup span {
	font-weight : bold;
}
#mc_embed_signup label {
	font-weight : normal;
}
#mc_embed_signup input.email {
	margin-top: 3px;
}

#mc_embed_signup .mailchimp-container {
	position: relative;
    background: url(../img/icons/inputBorder_middle_1.png) repeat-x top right;
	height:38px; width:350px; display: inline-block; margin: 0;
	margin-bottom:5px;
}
#mc_embed_signup .mailchimp-button-container {
	position: relative;
	height: 38px; display: inline-block; margin: 0;
}
#mc_embed_signup .mailchimp-border-left {
	position: absolute;
	left: -3px;
}
#mc_embed_signup .mailchimp-border-right {
	position: absolute;
	right: -3px;
}

@media(max-width:768px) {
    #mc_embed_signup .mailchimp-container {width:95%; }
    #mc_embed_signup input.email {width:100%}
    #mc_embed_signup .clear {width: 100%}
    #mc_embed_signup .button { margin:0; }
}

@media(min-width:450px) {
	.extra-donate p {
		margin-left: auto;
		margin-right: auto;
		width: 450px;
	}
}

@media(min-width:769px) {
	.banner-wrapper {
		background: url(../img/banner/bannerPattern_medium.png) repeat bottom 80px center;
	}
	.banner-center-wrapper {
		width: 672px;
	}
	.banner-center {
		height: 420px;
	}
	.banner-center-bottom {
		height: 160px;
	}
	.separator-red-blue {
		background-image: url(../img/banner/bannerEdge_medium.png);
		height: 12px;
	}
	
	.extra-social {
		width: 454px;
	}
	.extra-social img {
		height: 48px;
	}
	.extra-platform-icon {
		height: 58px;
	}
	.extra-donate p {
		width: 700px;
	}
	.extra-donate-button {
		width: 144px;
		height: 48px;
	}
	.extra-donate-button-wrapper {
		width: 300px;
	}
}

@media(min-width:1280px) {
	.banner-wrapper {
		background: url(../img/banner/bannerPattern_big.png) repeat bottom 119px center;
	}
	.banner-center-wrapper { 
		width: 1008px;
	}
	.banner-center {
		height: 630px;
	}
	.banner-center-bottom {
		height: 240px;
	}
	.separator-red-blue {
		background-image: url(../img/banner/bannerEdge_big.png);
		height: 18px;
	}
	
	.extra-social img {
		height: 48px;
	}
	.extra-platform-icon {
		height: 87px;
	}
	.extra-donate p {
		width: 900px;
	}
	.extra-donate-button {
		width: 144px;
		height: 48px;
	}
}