@font-face {
    font-family: "Sigma One";
    src: url('Sigman_One/Sigmaone.ttf') format("truetype");
}

body {
    padding: 0;
    margin: 0;
    font-family: "sigmar_oneregular";
    color: #95dbc7;
}

.main {
    position: relative;
    width: 1024px;
    height: 670px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    overflow: hidden;
    display: none;
}

.slider {
    margin: 0;
    padding: 0;
}

.slider li {
    position: absolute;
    list-style-type: none;
    list-style-position: outside;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slider li:first-child {
    display: block;
}

#sliderwindow {
    background-image: url('assets/img/slideshow/slideshowframe.png');
}

#bridgescene {
    background-image: url('assets/img/bridgescene.jpg');
    background-repeat: no-repeat;
    background-size: 1024px, 760px;
    position: relative;
}

#bridgescene1 {
    background-image: url('assets/img/bridgescene1.jpg');
    background-repeat: no-repeat;
    background-size: 1024px, 760px;
    position: relative;
}

#menu {
    background-image: url('assets/img/titlescreen.jpg');
    background-repeat: no-repeat;
    background-size: 1024px, 760px;
    position: relative;
    display: none;
}

button {
    width: 100px;
    height: 100px;
    border: none;
    repeat: none;
    outline: none;
    cursor: pointer;
}

.control {
    width: 1024px;
    height: 100px;
    bottom: 0px;
    position: absolute;
}

.jump {
    background: url('assets/img/jump.png');
}

.move {
    background: url('assets/img/stop.png') no-repeat;
    right: 40px;
    position: absolute;
}

.stop {
    background: url('assets/img/go.png') no-repeat !important;
}

.drill {
    display: none;
    background: url('assets/img/drill.png');
    position: absolute;
    left: calc(50% - 50px)
}

.desktop .drill {
    position: absolute;
    right: 260px;
    left: auto;
}

.desktop .jump {
    right: 150px;
    position: absolute;
}

.energy {
    position: absolute;
    left: 300px;
    top: 50px;
    font-size: 32px;
}

.top {
    background: url('assets/img/top.png') no-repeat;
    position: absolute;
    top: -20px;
    width: 1030px;
    height: 225px;
}

.progress-dot {
    position: absolute;
    left: 0px;
}

.level-energy {
    position: absolute;
    top: 48px;
    left: 6px;
    width: 100%;
    background: url("assets/img/bar.png") no-repeat;
}

.level-energy img {
    width: 113px;
    height: 15px;
    margin-top: 2px;
    margin-left: 5px;
}

.menu-button {
    background: url("assets/img/mainmenu.png");
    float: left;
    width: 123px;
    height: 60px;
    margin-left: 10px;
    margin-top: 33px;
    background-size: cover;
}

.points-container {
    float: left;
    display: block;
    margin-left: 20px;
    margin-top: 32px;
    text-align: center;
}

.points {
    font-size: 25px;
}

.title {
    font-size: 21px;
    color: #95dbc7;
    text-align: center;
}

.energy-container {
    float: left;
    display: block;
    position: relative;
    margin-left: 40px;
    margin-top: 32px;
}

.progress-container {
    position: absolute;
    left: 650px;
    top: 32px;
}

.progress-bar {
    background: url("assets/img/progressbar.png") no-repeat;
    width: 293px;
    height: 23px;
    top: 40px;
}

.progress {
    font-size: 21px;
    color: #95dbc7;
}

.bar {
    width: 130px;
    height: 25px;
    margin-top: 10px;
}

.bar img {
    width: 126px;
    height: 15px;
}

button.level {
    position: absolute;
    width: 252px;
    height: 93px;
    border: none;
    background-repeat: none;
    bottom: 50px;
}

#level_1 {
    background: url('assets/img/button_level_1.png') no-repeat;
    left: 130px;
}

#level_1:hover {
    background: url('assets/img/button_level_1_hover.png') no-repeat;
}

#level_2 {
    background: url('assets/img/button_level_2.png') no-repeat;
    left: 386px;
}

#level_2:hover {
    background: url('assets/img/button_level_2_hover.png') no-repeat;
}

#level_3 {
    background: url('assets/img/button_level_3.png') no-repeat;
    left: 640px;
}

#level_3:hover {
    background: url('assets/img/button_level_3_hover.png') no-repeat;
}

#chugmessage {
    color: #000;
    position: absolute;
    top: 200px;
    font-size: 1.5em;
    display: none;
}

.badge {
    background-image: url('assets/img/group.png');
    background-repeat: no-repeat;
    /*background-size: 96px,137px;*/
    position: absolute;
    width: 225px;
    height: 124px;
    left: 463px;
    top: 41px;
}

.brewster {
    background-image: url('assets/img/brewster.png');
    width: 96px;
    height: 160px;
    left: 486px;
    top: 24px;
}

.zack {
    background-image: url('assets/img/zack.png');
    width: 87px;
    height: 152px;
    left: 497px;
    top: 21px;
}

.fletch {
    background-image: url('assets/img/fletch.png');
    width: 161px;
    height: 162px;
    left: 449px;
    top: 5px;
    border-radius: 162px;
}

#btn_play {
    margin-top: -50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
}

#playwindow {
    display: block;
    background-image: url('assets/img/slideshow/slideshow_1.jpg');
}

#end_button_sing_a_long {
    background: url('assets/img/EndScreenButtons.png') no-repeat -22px -34px;
    width: 289px;
    height: 97px;
}

#end_button_sing_a_long:hover {
    background: url('assets/img/EndScreenButtons.png') no-repeat -22px -140px;
    width: 289px;
    height: 97px;
}

#end_button_download {
    background: url('assets/img/EndScreenButtons.png') no-repeat -319px -31px;
    width: 289px;
    height: 98px;
}

#end_button_download:hover {
    background: url('assets/img/EndScreenButtons.png') no-repeat -319px -140px;
    width: 289px;
    height: 98px;
}

#end_button_play_again {
    background: url('assets/img/btn_playAgain2.png') no-repeat -1px -3px;
    width: 281px;
    height: 101px;
    margin: 0 auto;
    display: block;
    margin-top: 500px;
}

#end_button_play_again:hover {
    background: url('assets/img/btn_playAgain2.png') no-repeat -1px -115px;
    width: 281px;
    height: 101px;
}

.end_button_container {
    margin: auto;
    width: 877px;
    /* position: absolute; */
    margin-top: 518px;
}

#btn_play {
    background: url('assets/img/play.png');
}

.desktop #btn_play {
    background: none;
}

#helppage {
    background-image: url('assets/img/slideshow/slideshowframe.png'), url('assets/img/helpscreen.png');
    background-repeat: no-repeat;
    background-color: #f1f1f1;
}

.help-button {
    background: url("assets/img/help.png");
    float: left;
    width: 49px;
    height: 49px;
    background-size: cover;
}

#main .help-button {
    margin-left: 540px;
    margin-top: 46px;
}

#menu .help-button {
    position: absolute;
    /* 	margin-left: 540px; */
    /*	margin-top: 46px;*/
    left: 760px;
    bottom: 190px;
    width: 75px;
    height: 75px;
}

#helppage .menu-button {
    position: absolute;
}

.quadrant {
    float: left;
    width: 507px;
    height: 335px;
    text-align: center;
    padding-top: 25px;
    border: 1px solid #7FFF00;
    z-index: -1;
    position: relative;
    background: green;
    box-sizing: border-box;
}

.quadrant img {
    margin: 0 auto;
    display: block;
}

.quadrant-1 {
    padding-top: 56px;
}

.quadrant-2 {
    padding-top: 120px;
}

.quadrant-3 img {
    overflow: hidden;
    width: 250px;
    margin-bottom: -150px;
}

.quadrant-4 img {
    height: 180px;
}

#end_points {
    position: absolute;
    top: 3px;
    font-size: 50px;
    left: 564px;
}

#end_points_total {
    position: absolute;
    top: 54px;
    font-size: 50px;
    left: 633px;
}