/*
@font-face {
    font-family: '';
    src: url('../fonts/') format(''),
         url('../fonts/') format('');
    font-weight: bold;
    font-style: normal;

}
*/

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

html {
	font-family: sans-serif;
	line-height: 1.15;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%
}
body {
	margin: 0
}
article, aside, footer, header, nav, section {
	display: block
}
h1 {
	font-size: 2em;
	margin: .67em 0
}
figcaption, figure, main {
	display: block
}
figure {
	margin: 1em 40px
}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
	overflow: visible
}
pre {
	font-family: monospace, monospace;
	font-size: 1em
}
a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects
}
a:active, a:hover {
	outline-width: 0
}
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}
b, strong {
	font-weight: inherit;
	font-weight: bolder
}
code, kbd, samp {
	font-family: monospace, monospace;
	font-size: 1em
}
dfn {
	font-style: italic
}
mark {
	background-color: #ff0;
	color: #000
}
small {
	font-size: 80%
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}
sub {
	bottom: -.25em
}
sup {
	top: -.5em
}
audio, video {
	display: inline-block
}
audio:not([controls]) {
	display: none;
	height: 0
}
img {
	border-style: none
}
svg:not(:root) {
	overflow: hidden
}
button, input, optgroup, select, textarea {
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}
button, input {
	overflow: visible
}
button, select {
	text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
	-webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
	border-style: none;
	padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
	outline: 1px dotted ButtonText
}
fieldset {
	border: 1px solid silver;
	margin: 0 2px;
	padding: .35em .625em .75em
}
legend {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}
progress {
	display: inline-block;
	vertical-align: baseline
}
textarea {
	overflow: auto
}
[type=checkbox], [type=radio] {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
	height: auto
}
[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}
details, menu {
	display: block
}
summary {
	display: list-item
}
canvas {
	display: inline-block
}
[hidden], template {
	display: none
}
html {
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
*, :after, :before {
	-moz-box-sizing: inherit;
	box-sizing: inherit
}
body {
	display: none;
	background: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
a {
	color: #e50050;
	text-decoration: none
}
a:active, a:focus, a:hover {
	color: #fff;
	text-decoration: underline
}
body {
	color: #fff;
	font: normal 125%/1.4 Roboto, sans-serif
}
.clearfix:after {
	clear: both;
	content: "";
	display: table
}
.container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%
}
.hide-text {
	overflow: hidden;
	padding: 0;
	text-indent: 101%;
	white-space: nowrap
}
.visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px
}
section {
	float: left;
	width: 100%;
	height: 100%
}
#scaleable-wrapper {
	padding: 0;
	resize: both;
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 1px;
	min-width: 100%;
	*width: 100%
}
#game-frame {
	width: 1024px;
	height: 768px;
	padding: 0;
	position: relative;
	left: 50%;
	top: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-ms-transform-origin: center center;
	transform-origin: center center
}
#introScreen {
	background: url(../images/backgroundGame2.svg) no-repeat 50%;
	background-size: 834.371px 324.289px;
	text-align: center
}
#introScreen h1 {
	font-family: Bungee Inline, cursive;
	color: #263238;
	z-index: 2;
	position: absolute;
	text-align: center;
	margin: 350px 0 0;
	width: 100%
}
#introScreen #logo {
	margin: 150px 0 50px 10px;
	width: 100%
}
#introPlayButton {
	display: none;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	clear: both
}
#gameScreen {
	background: url(../images/backgroundGame3.svg) no-repeat 50%;
	background-size: 796.371px 194.789px
}
#gameArea1 {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(../images/backgroundGame1.svg) no-repeat bottom;
	background-size: 1024px 303px
}
#gameArea1 #jetpacker {
	position: absolute;
	bottom: 83px;
	right: 425px
}
#gameArea2 {
	display: none;
	margin: 58px 0 0
}
#jetpackFuel {
	position: absolute;
	left: 14px;
	bottom: 14px
}
#jetpackFuel #jetpackFuel1, #jetpackFuel #jetpackFuel2, #jetpackFuel #jetpackFuel3, #jetpackFuel #jetpackFuel4, #jetpackFuel #jetpackFuel5 {
	width: 32px;
	height: 38px;
	float: left;
	margin: 0 7px 0 0
}
#jetpackFuel #jetpackFuel1 img, #jetpackFuel #jetpackFuel2 img, #jetpackFuel #jetpackFuel3 img, #jetpackFuel #jetpackFuel4 img, #jetpackFuel #jetpackFuel5 img {
	position: absolute;
	width: 32px
}
#jetpackFuel #jetpackFuel1 .jetpackFuelDark, #jetpackFuel #jetpackFuel1 .jetpackFuelLight, #jetpackFuel #jetpackFuel1 .jetpackFuelRed, #jetpackFuel #jetpackFuel1 .mask, #jetpackFuel #jetpackFuel2 .jetpackFuelDark, #jetpackFuel #jetpackFuel2 .jetpackFuelLight, #jetpackFuel #jetpackFuel2 .jetpackFuelRed, #jetpackFuel #jetpackFuel2 .mask, #jetpackFuel #jetpackFuel3 .jetpackFuelDark, #jetpackFuel #jetpackFuel3 .jetpackFuelLight, #jetpackFuel #jetpackFuel3 .jetpackFuelRed, #jetpackFuel #jetpackFuel3 .mask, #jetpackFuel #jetpackFuel4 .jetpackFuelDark, #jetpackFuel #jetpackFuel4 .jetpackFuelLight, #jetpackFuel #jetpackFuel4 .jetpackFuelRed, #jetpackFuel #jetpackFuel4 .mask, #jetpackFuel #jetpackFuel5 .jetpackFuelDark, #jetpackFuel #jetpackFuel5 .jetpackFuelLight, #jetpackFuel #jetpackFuel5 .jetpackFuelRed, #jetpackFuel #jetpackFuel5 .mask {
	overflow: hidden
}
#jetpackFuel #jetpackFuel1 .mask, #jetpackFuel #jetpackFuel2 .mask, #jetpackFuel #jetpackFuel3 .mask, #jetpackFuel #jetpackFuel4 .mask, #jetpackFuel #jetpackFuel5 .mask {
	position: absolute;
	width: 32px;
	height: 38px
}
#jetpackFuel #jetpackFuel1 .jetpackFuelLight, #jetpackFuel #jetpackFuel1 .jetpackFuelRed, #jetpackFuel #jetpackFuel2 .jetpackFuelLight, #jetpackFuel #jetpackFuel2 .jetpackFuelRed, #jetpackFuel #jetpackFuel3 .jetpackFuelLight, #jetpackFuel #jetpackFuel3 .jetpackFuelRed, #jetpackFuel #jetpackFuel4 .jetpackFuelLight, #jetpackFuel #jetpackFuel4 .jetpackFuelRed, #jetpackFuel #jetpackFuel5 .jetpackFuelLight, #jetpackFuel #jetpackFuel5 .jetpackFuelRed {
	display: none
}
#blackOut {
	display: none;
	background: #000;
	opacity: 0;
	top: 0
}
#blackOut, #endScreen {
	width: 100%;
	height: 100%;
	position: absolute
}
#endScreen {
	background: url(../images/backgroundEndScreen.svg) no-repeat bottom;
	background-size: 1024px 303px
}
#endScreen h1 {
	font-family: game_font, sans-serif;
	font-weight: 700;
	font-size: 72px;
	text-transform: uppercase;
	text-align: center;
	margin: 100px 0 0
}
#endScreen button {
	margin: 0 auto;
	display: block;
	border-radius: 5px;
	text-transform: uppercase;
	padding: 12px 25px;
	color: #fff;
	border: none;
	background: #4caf50;
	background: linear-gradient(180deg, #4caf50 0, #4caf50 50%, #449d48 51%, #449d48);
	filter: progid:DXImageTransform.Microsoft.gradient startColorstr=#4CAF50, endColorstr=#449d48, GradientType=0
}
#results {
	text-align: center;
	float: left;
	width: 100%;
	margin: 50px 0 60px
}
#results .resultInfo {
	font-family: game_font, sans-serif;
	text-transform: uppercase;
	display: inline-block;
	margin: 0 45px;
	text-align: center
}
#results .resultInfo .resultData {
	font-weight: 700;
	font-size: 42px;
	margin: 0
}
#results .resultInfo .resultLabel {
	font-weight: 500;
	font-size: 21px;
	margin: 0
}
#results .resultInfo img {
	max-width: 56px;
	max-height: 44px
}
#progressArea {
	background: #263238;
	float: left;
	width: 100%;
	padding: 15px 28px;
	color: #fff;
	position: absolute;
	z-index: 2
}
#progressArea #mainclose {
	color: #fff;
	margin: 10px;
	float: left
}
#progressArea #mainclose:hover {
	color: #fff
}
#progressArea ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: game_font, sans-serif
}
#progressArea ul li {
	padding: 0;
	margin: 0 0 0 50px;
	list-style: none;
	float: right;
	font-size: 12px;
	font-weight: 700
}
#progressArea ul li span {
	font-size: 20px;
	font-weight: 300
}
#progressArea ul li:last-of-type {
	margin-left: 0
}
#points, #time {
	margin-left: 15px
}
.progressBar {
	margin: 6px 0 0;
	float: left;
	width: 503px;
	padding: 5px 8px;
	background: #37474f;
	border-radius: 7px
}
.progressBar .progress-pill {
	border-radius: 7px;
	margin: 0 1% 0 0;
	height: 6px;
	float: left
}
.progressBar .progress-pill:last-child {
	margin: 0
}
.progressBar .progress-pill.progress-pill-empty {
	background: #fafafa
}
.progressBar .progress-pill-danger {
	background: #f44336
}
.progressBar .progress-pill-success {
	background: #4caf50
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #000;
	background-color: rgba(0, 0, 0, .72)
}
.modal .modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	width: 755px
}
.modal .modal-content h1, .modal .modal-content p {
	margin: 0;
	font-family: game_font
}
.modal .modal-content h1 {
	font-size: 32px;
	font-weight: 700
}
.modal .modal-content p {
	font-size: 30px;
	font-weight: 400;
	color: #000
}
.modal .modal-content .modal-body, .modal .modal-content .modal-footer, .modal .modal-content .modal-header {
	text-align: center
}
.modal .modal-content .modal-footer, .modal .modal-content .modal-header {
	background-color: #607d8b;
	color: #fff
}
.modal .modal-content .modal-header {
	padding: 25px 0;
	background: #607d8b;
	background: linear-gradient(180deg, #607d8b 0, #607d8b 50%, #4b626d 51%, #4b626d);
	filter: progid:DXImageTransform.Microsoft.gradient startColorstr=#607D8B, endColorstr=#4b626d, GradientType=0;
	text-align: center
}
.modal .modal-content .modal-body p {
	padding: 75px 65px
}
.modal .modal-content .modal-body img {
	padding: 16px 24px
}
.modal .modal-content .modal-footer {
	padding: 9px 0 3px
}
.modal .modal-content .modal-footer .modal-close-button {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer
}
.modal img {
	width: 70%
}
#answerFeedback {
	width: 100%;
	float: left;
	height: auto;
	position: absolute;
	z-index: 1
}
#answerFeedback #correctFeedback, #answerFeedback #wrongFeedback {
	display: none;
	position: absolute;
	width: 100%
}
#answerFeedback #correctFeedback .feedbackContent, #answerFeedback #wrongFeedback .feedbackContent {
	margin: auto
}
#answerFeedback #correctFeedback p, #answerFeedback #wrongFeedback p {
	font-size: 25px;
	margin: 8px 0;
	text-align: center
}
#answerFeedback #correctFeedback img, #answerFeedback #wrongFeedback img {
	width: 20px;
	margin: 0 7px 0 0
}
#answerFeedback #correctFeedback {
	background: #4caf50
}
#answerFeedback #wrongFeedback {
	background: #f44336
}
#dragAndDropArea {
	padding: 144px 78px 0;
	font-size: 30px;
	font-weight: 300
}
.dropzoneBracket {
	font-size: 34px;
	color: #2196f3
}
#draggables-holder, #sentence {
	float: left
}
#sentence {
	width: 372px;
	margin: 0 177px 0 0;
	font-weight: 300
}
#sentence #dropzone, #sentence span {
	float: left;
	height: 40px
}
#sentence span:after {
	content: "\00a0"
}
#sentence #dropzone {
	width: 42px
}
#sentence #dropzone span {
	padding-right: 0
}
#sentence #dropzone #left {
	float: left
}
#sentence #dropzone #right {
	float: right
}
#draggables-holder .draggable-container {
	margin: 0 0 25px;
	border: 2px dashed #2196f3;
	float: left;
	clear: both
}
#draggables-holder .draggable-container p {
	margin: 10px 15px
}
.draggable-container .draggable:hover {
	cursor: pointer
}
.draggable-container .ui-draggable-dragging:hover {
	cursor: move
}
.collectableBonuses, .collectables, .obstacle {
	position: absolute;
	top: 400px;
	right: -104px
}
.obstacle {
	width: 104px;
	height: 75px
}
.collectableBonuses, .collectables {
	width: 51px;
	height: 85px
}
#game-frame {
	background: url(../images/backgroundMain.svg) no-repeat 50%;
	background-size: cover
}