body {
	font-family: 'Open Sans', sans-serif;
	background-color: #E6EDFD;
}

.offline .interstitial-wrapper {
	max-width: 100%;
	background-color: #fff;
	position: relative;
}

#main-bg {
	position: absolute;
	top: 133px;
	left: 0;
	width: 100%;
	height: 90px;
	background-color: #E6EDFD;
}

.offline .runner-container {
	max-width: unset;
}

.offline .runner-canvas {
	max-width: unset;
}

.mobile {
	display: none;
}

@media screen and (max-width: 767px) {
	.mobile {
		display: block;
	}

	.desktop {
		display: none;
	}
}

.header-element {
	display: block;
	padding: 40px;
	height: 80px;
	background-color: #fff;
}

.header-element .instruction {
	float: left;
}

.header-element .logo {
	float: right;
}

#message-wrap {
	background-color: #fff;
}

.sendmessage {
	text-align: center;
}

.sendmessage p {
	margin-top: 0;
}

.sendmessage h1 {
	margin-bottom: 0;
}

.smal-logo {
	max-width: 86px;
}

.jump,
.duck {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.jump {
	margin-bottom: 30px;
}

.jump-icon,
.duck-logo {
	max-width: 32px;
	margin-right: 19px;
}

.offline .runner-container {
	top: 0;
}

/* Styling for step 1 */
.selection-page {
	background-color: #4483FC;
}

.game-page {
	color: #4483FC;
}

.character-selection {
	position: relative;
	text-align: center;
	max-width: 1440px;
	height: 100%;
	margin: 0 auto;
}


img {
	width: 100%;
	height: auto;
}

.center-wrapper {
	position: absolute;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

.centered {
	position: absolute;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	color: #07399B;
}

.char img {
	max-width: 88px;
}

.cta a {
	line-height: 18px;
	padding: 11px 10px;
	font-weight: 600;
	letter-spacing: -0.4px;
	white-space: nowrap;
	background-color: #ffffff;
	color: #07399B;
	display: inline-block;
	text-decoration: none;
	font-size: 15px;
	border-radius: 25px;
	width: 180px;
	text-align: center;
}

h2 {
	font-size: 30px;
}

.snowball {
	cursor: pointer;
	left: 50%;
	top: 50%;
	position: absolute;
}

.tree-img {
	max-width: 674px;
	z-index: -1;
}

.regular-image img {
	max-width: 56px;
}

.selected-image img {
	max-width: 91px;
}

.snowball .selected-image {
	display: none;
}

.snowball.selected .selected-image {
	display: block;
}

.snowball.selected .regular-image {
	display: none;
}

.snowball-andi {
	transform: translate(-281px, -201px);
}

.snowball-andi.selected {
	transform: translate(-297px, -227px);
}

.snowball-josh {
	transform: translate(-250px, -134px);
}

.snowball-josh.selected {
	transform: translate(-252px, -153px);
}

.snowball-sara {
	transform: translate(-318px, -87px);
}

.snowball-sara.selected {
	transform: translate(-346px, -102px);
}

.snowball-jules {
	transform: translate(-255px, -36px);
}

.snowball-jules.selected {
	transform: translate(-270px, -57px);
}

.snowball-kathrina {
	transform: translate(-308px, 28px);
}

.snowball-kathrina.selected {
	transform: translate(-324px, 14px);
}

.snowball-nazli {
	transform: translate(-233px, 71px);
}

.snowball-nazli.selected {
	transform: translate(-248px, 57px);
}

.snowball-philip {
	transform: translate(-249px, 148px);
}

.snowball-philip.selected {
	transform: translate(-266px, 130px);
}

.snowball-oli {
	transform: translate(-177px, 208px);
}

.snowball-oli.selected {
	transform: translate(-196px, 192px);
}

.snowball-jingjing {
	transform: translate(-99px, 168px);
}

.snowball-jingjing.selected {
	transform: translate(-118px, 157px);
}

.snowball-sahar {
	transform: translate(-77px, 249px);
}

.snowball-sahar.selected {
	transform: translate(-96px, 230px);
}

.snowball-thor {
	transform: translate(0px, 187px);
}

.snowball-thor.selected {
	transform: translate(-15px, 166px);
}

.snowball-vaishali {
	transform: translate(77px, 255px);
}

.snowball-vaishali.selected {
	transform: translate(72px, 241px);
}

.snowball-dimitri {
	transform: translate(113px, 236px);
}

.snowball-dimitri.selected {
	transform: translate(102px, 222px);
}

.snowball-flo {
	transform: translate(126px, 159px);
}

.snowball-flo.selected {
	transform: translate(108px, 140px);
}

.snowball-monika {
	transform: translate(223px, 163px);
}

.snowball-monika.selected {
	transform: translate(223px, 163px);
}

.snowball-verena {
	transform: translate(208px, 87px);
}

.snowball-verena.selected {
	transform: translate(189px, 61px);
}

.snowball-vincent {
	transform: translate(279px, 26px);
}

.snowball-vincent.selected {
	transform: translate(267px, 13px);
}

.snowball-seb {
	transform: translate(216px, -35px);
}

.snowball-seb.selected {
	transform: translate(200px, -51px);
}

.snowball-simon {
	transform: translate(264px, -101px);
}

.snowball-simon.selected {
	transform: translate(255px, -120px);
}

.snowball-julius {
	transform: translate(181px, -163px);
}

.snowball-julius.selected {
	transform: translate(163px, -179px);
}

.snowball-renate {
	transform: translate(254px, -189px);
}

.snowball-renate.selected {
	transform: translate(238px, -208px);
}

.snowball-argos {
	transform: translate(181px, -243px);
}

.snowball-argos.selected {
	transform: translate(169px, -260px);
}

.snowball-franzi {
	transform: translate(138px, -313px);
}

.snowball-franzi.selected {
	transform: translate(126px, -333px);
}

.snowball-dorit {
	transform: translate(81px, -268px);
}

.snowball-dorit.selected {
	transform: translate(67px, -277px);
}

.snowball-inq {
	transform: translate(25px, -335px);
}

.snowball-inq.selected {
	transform: translate(10px, -356px);
}

.snowball-ralf {
	transform: translate(-21px, -274px);
}

.snowball-ralf.selected {
	transform: translate(-38px, -285px);
}

.snowball-leonor {
	transform: translate(-87px, -316px);
}

.snowball-leonor.selected {
	transform: translate(-108px, -340px);
}

.snowball-dimitri-2 {
	transform: translate(-117px, -243px);
}

.snowball-dimitri-2.selected {
	transform: translate(-128px, -256px);
}

.snowball-michi {
	transform: translate(-205px, -288px);
}

.snowball-michi.selected {
	transform: translate(-217px, -309px);
}

.snowball-daniel {
	transform: translate(-194px, -213px);
}

.snowball-daniel.selected {
	transform: translate(-211px, -229px);
}

.char {
	display: none;
}

.char.selected {
	display: inline;
}

@media only screen and (max-width: 767px) {
	.snow-characters {
		transform: scale(0.45) translate(1px, 638px);
	}

	.char img {
		max-width: 53px;
	}

	h2 {
		font-size: 14px;
		margin: 4px;
	}

	.cta a {
		width: 100px;
		padding: 5px 0px;
	}

	.tree-img {
		max-width: 303px;
	}

	.instruction {
		display: none;
	}
}

@media only screen and (min-width:320px) {
	.snow-characters {
		transform: scale(0.45) translate(1px, 638px);
	}
}

@media only screen and (min-width:360px) {
	.snow-characters {
		transform: scale(0.5) translate(1px, 638px);
	}
}

@media only screen and (min-width:411px) {
	.tree-img {
		max-width: 380px;
	}

	.snow-characters {
		transform: scale(0.57) translate(1px, 638px);
	}
}

@media only screen and (min-height: 812px) and (min-width: 375px) {
	.tree-img {
		max-width: 350;
	}

	.snow-characters {
		transform: scale(0.54) translate(1px, 736px);
	}
}

@media only screen and (min-width:768px) {
	.tree-img {
		max-width: 674px;
	}

	.snow-characters {
		transform: unset;
	}
}