@keyframes animatedBackgroundUp {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 -100px
    }
}

@-webkit-keyframes animatedBackgroundUp {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 -100px
    }
}

@-ms-keyframes animatedBackgroundUp {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 -100px
    }
}

@-moz-keyframes animatedBackgroundUp {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 -100px
    }
}

@keyframes animatedBackgroundDown {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 100px
    }
}

@-webkit-keyframes animatedBackgroundDown {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 100px
    }
}

@-ms-keyframes animatedBackgroundDown {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 100px
    }
}

@-moz-keyframes animatedBackgroundDown {
    from {
        background-position: 0 0
    }
    to {
        background-position: 0 100px
    }
}

@keyframes animatedBackgroundRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: -100px 0
    }
}

@-webkit-keyframes animatedBackgroundRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: -100px 0
    }
}

@-ms-keyframes animatedBackgroundRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: -100px
    }
}

@-moz-keyframes animatedBackgroundRight {
    from {
        background-position: 0 0
    }
    to {
        background-position: -100px 0
    }
}

@keyframes animatedBackgroundLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100px 0
    }
}

@-webkit-keyframes animatedBackgroundLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100px 0
    }
}

@-ms-keyframes animatedBackgroundLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100px
    }
}

@-moz-keyframes animatedBackgroundLeft {
    from {
        background-position: 0 0
    }
    to {
        background-position: 100px 0
    }
}

@keyframes start {
    from {
        background-position: 0 3px
    }
    to {
        background-position: -142px 3px
    }
}

@-webkit-keyframes start {
    from {
        background-position: 0 3px
    }
    to {
        background-position: -142px 3px
    }
}

@-moz-keyframes start {
    from {
        background-position: 0 3px
    }
    to {
        background-position: -142px 3px
    }
}

@-ms-keyframes start {
    from {
        background-position: 0 3px
    }
    to {
        background-position: -142px 3px
    }
}

@-o-keyframes start {
    from {
        background-position: 0 3px
    }
    to {
        background-position: -142px 3px
    }
}

@keyframes end {
    from {
        background-position: 0 -62px
    }
    to {
        background-position: -142px -62px
    }
}

@-webkit-keyframes end {
    from {
        background-position: 0 -62px
    }
    to {
        background-position: -142px -62px
    }
}

@-moz-keyframes end {
    from {
        background-position: 0 -62px
    }
    to {
        background-position: -142px -62px
    }
}

@-ms-keyframes end {
    from {
        background-position: 0 -62px
    }
    to {
        background-position: -142px -62px
    }
}

@-o-keyframes end {
    from {
        background-position: 0 -62px
    }
    to {
        background-position: -142px -62px
    }
}

body {
    -webkit-box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65);
    -moz-box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65);
    box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65)
}

.plumbing {
    margin: auto;
    padding: 0;
    display: block;
    width: 288px;
    height: 427px;
    z-index: 1;
    position: relative
}

.plumbing ul,
.plumbing-creator ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0
}

.plumbing ul li {
    width: 71px;
    height: 71px;
    border-right: 1px solid #e8e6e6;
    border-bottom: 1px solid #e8e6e6;
    background-color: #e8e6e6;
    overflow: hidden;
    position: relative
}

.pipe-strip {
    width: 100%;
    position: absolute
}

.pipe-strip:before {
    content: "";
    width: 50%;
    height: 71px;
    background: url(.././img/closedPipe.png) center center repeat-x #e8e6e6;
    position: relative;
    float: left;
    top: 75px;
    padding-top: 7px;
    padding-bottom: 19px
}

.pipe-strip:after {
    content: "";
    width: 50%;
    height: 71px;
    background: url(.././img/closedPipe.png) center center repeat-x #e8e6e6;
    position: relative;
    float: right;
    top: 435px;
    padding-top: 0;
    padding-bottom: 20px
}

.water,
.water2 {
    width: 0;
    height: 100%;
    background-image: url(.././img/water.jpg);
    background-position: 0 0;
    margin-top: -71px;
    z-index: 1;
    position: relative;
    float: left;
    background-position: 0 0;
    animation: animatedBackgroundLeft 5s linear infinite;
    -ms-animation: animatedBackgroundLeft 5s linear infinite;
    -moz-animation: animatedBackgroundLeft 5s linear infinite;
    -webkit-animation: animatedBackgroundLeft 5s linear infinite
}

.water.verticle,
.water2.verticle {
    animation: animatedBackgroundDown 5s linear infinite;
    -ms-animation: animatedBackgroundDown 5s linear infinite;
    -moz-animation: animatedBackgroundDown 5s linear infinite;
    -webkit-animation: animatedBackgroundDown 5s linear infinite
}

.water.verticle.bottom,
.water2.verticle.bottom {
    animation: animatedBackgroundUp 5s linear infinite;
    -ms-animation: animatedBackgroundUp 5s linear infinite;
    -moz-animation: animatedBackgroundUp 5s linear infinite;
    -webkit-animation: animatedBackgroundUp 5s linear infinite
}

.water.right,
.water2.right {
    animation: animatedBackgroundRight 5s linear infinite;
    -ms-animation: animatedBackgroundRight 5s linear infinite;
    -moz-animation: animatedBackgroundRight 5s linear infinite;
    -webkit-animation: animatedBackgroundRight 5s linear infinite
}

.water2 {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 0;
    height: 30px;
    margin-top: 0
}

.water.right,
.water2.right {
    float: right
}

.water2.right {
    position: relative;
    top: -49px
}

.full2 .water2.right {
    position: absolute;
    top: 21px
}

.water.verticle,
.water2.verticle {
    width: 100%;
    height: 0
}

.water2.verticle {
    width: 30px;
    margin: auto;
    top: 0;
    left: 21px
}

.pipe-1212+.water2-background {
    width: 100%;
    height: 28px;
    background: #fff;
    top: 22px;
    left: 0;
    position: absolute;
    z-index: 2
}

.pipe-2121+.water2-background {
    width: 26px;
    height: 100%;
    background: #fff;
    top: 0;
    left: 22px;
    position: absolute;
    z-index: 2
}

.water.verticle.bottom,
.water2.verticle.bottom {
    margin-top: 0;
    height: 100%
}

.water2.verticle.bottom {
    top: 71px
}

.plumbing ul li span {
    width: 71px;
    height: 71px;
    display: block;
    z-index: 3;
    position: relative
}

.pipe-0101 {
    background: url(.././img/0101.png)
}

.pipe-1010 {
    background: url(.././img/1010.png)
}

.pipe-1100 {
    background: url(.././img/1100.png)
}

.pipe-0110 {
    background: url(.././img/0110.png)
}

.pipe-0011 {
    background: url(.././img/0011.png)
}

.pipe-1001 {
    background: url(.././img/1001.png)
}

.pipe-1101 {
    background: url(.././img/1101.png)
}

.pipe-1110 {
    background: url(.././img/1110.png)
}

.pipe-1011 {
    background: url(.././img/1011.png)
}

.pipe-0111 {
    background: url(.././img/0111.png)
}

.pipe-0000 {
    background: url(.././img/0000.png)
}

.pipe-1212 {
    background: url(.././img/1212.png)
}

.pipe-2121 {
    background: url(.././img/2121.png)
}

.next-pipe span,
.next-pipe {
    width: 71px;
    height: 69px;
    display: block;
    margin: auto;
    margin-top: 3px;
    margin-left: -2px;
    overflow: hidden
}

body,
html {
    text-align: center;
    background: url(.././img/background.jpg) top center;
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden
}

.plumbing {
    background: #e8e6e6;
    padding: 5px;
    border: 3px solid #e8e6e6;
    -webkit-box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43);
    -moz-box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43);
    box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43);
    padding-bottom: 9px
}

.options {
    background: #e8e6e6;
    width: 303px;
    margin: auto;
    height: 47px;
    padding-top: 6px;
    margin-top: -1px;
    position: relative;
    margin-top: 25px
}

@font-face {
    font-family: spicyrice;
    font-style: normal;
    font-weight: 400;
    src: url(.././fonts/SpicyRice-Regular.ttf)
}

.timer {
    float: left;
    padding: 0;
    font-family: spicyrice;
    font-size: 28px;
    padding-top: 0;
    width: 39px;
    overflow: visible;
    color: rgba(10, 60, 150, .8);
    text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
    text-align: center
}

.speedUp,
.start-water,
.menu-button {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
    background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf', GradientType=0);
    background-color: #63b8ee;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    color: #14396a;
    font-family: arial;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 0 1px 0 #7cacde;
    -webkit-box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff;
    -moz-box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff
}

.additiv-options {
    background: #e8e6e6;
    padding: 6px;
    border-radius: 3px;
    width: 288px;
    margin: auto;
    height: 69px;
    padding-top: 0;
    padding-top: 5px;
    position: relative
}

.create-options {
    background: #e8e6e6;
    padding: 6px;
    border-radius: 3px;
    width: 288px;
    margin: auto;
    height: 36px;
    margin-top: 26px;
    padding-top: 10px;
    position: relative
}

.next-pipe {
    float: left
}

.additiv-options .speedUp {
    width: 97px;
    float: left;
    margin-left: 10px;
    margin-top: 18px
}

.create-options .speedUp,
.create-options .start-water {
    width: 86px;
    margin: 3px;
    font-size: 12px;
    display: inline-block
}

.additiv-options .timer {
    margin-top: 16px
}

.message-holder {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, .3);
    display: none;
    -webkit-box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65);
    -moz-box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65);
    box-shadow: inset 0 0 49px 18px rgba(2, 7, 77, .65)
}

.message-holder .message-box {
    width: 300px;
    height: 350px;
    margin-top: 80px;
    background: URL(".././img/messageBox.png")top center no-repeat;
    display: inline-block;
    padding-top: 86px;
    font-size: 17px;
    color: #252150;
    text-align: center;
    font-family: Arial
}

.message-holder .message-box.start {
    background: URL(".././img/messageBoxStart.png")top center no-repeat
}

.message-holder .message-box.start h2 {
    margin-top: 50px
}

.message-holder .message-box h2 {
    font-family: spicyrice;
    color: #252150;
    padding: 0;
    margin: 0;
    display: inline-block;
    font-size: 26px
}

.last-level .next-level.button {
    display: none
}

.pause-menu {
    width: 288px;
    height: 427px;
    background: #e8e6e6;
    padding: 5px;
    border: 3px solid #e8e6e6;
    padding-bottom: 9px;
    margin: auto;
    background: #63b8ee;
    position: relative;
    display: none;
    -webkit-box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43);
    -moz-box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43);
    box-shadow: inset 0 0 12px 2px rgba(0, 0, 0, .43)
}

.pause-menu h2 {
    font-family: spicyrice;
    color: #252150;
    letter-spacing: 5px
}

.menu-button {
    width: 0;
    float: right;
    margin-right: 3px;
    text-indent: -9999px
}

.pause-menu .button,
.message-box .button {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf));
    background: -moz-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -webkit-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -o-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: -ms-linear-gradient(top, #63b8ee 5%, #468ccf 100%);
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf', GradientType=0);
    background-color: #63b8ee;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    color: #14396a;
    font-family: arial;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #7cacde;
    -webkit-box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff;
    -moz-box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, .35), inset -1px 1px 5px #fff;
    width: 204px;
    margin-top: 11px;
    text-indent: 0;
    float: none
}

.message-box .button {
    width: 100px;
    clear: both;
    display: block;
    margin: auto;
    margin-bottom: 7px
}

.additiv-options .menu-button {
    margin-top: 18px
}

.options .menu-button,
.additiv-options .menu-button,
.create-options .menu-button {
    background-image: url(.././img/menu-icon.png);
    background-position: center center;
    background-repeat: no-repeat
}

.menu-button.active,
button.active,
button:hover,
button:active {
    -webkit-box-shadow: inset -2px 2px 6px #052756, 0 1px 0 #60c9f0;
    -moz-box-shadow: inset -2px 2px 6px #052756, 0 1px 0 #60c9f0;
    -o-box-shadow: inset -2px 2px 6px #052756, 0 1px 0 #60c9f0;
    box-shadow: inset -2px 2px 6px #052756, 0 1px 0 #60c9f0
}

.options .timer {
    margin-left: 11px;
    margin-top: 2px
}

.plumbing:before {
    width: 71px;
    height: 71px;
    content: "";
    background: url(.././img/start.png) 0 3px;
    display: block;
    margin-left: -71px;
    margin-bottom: -71px;
    animation: start .8s steps(2) infinite;
    -webkit-animation: start .8s steps(2) infinite;
    -moz-animation: start .8s steps(2) infinite;
    -ms-animation: start .8s steps(2) infinite;
    -o-animation: start .8s steps(2) infinite
}

.plumbing:after {
    width: 71px;
    height: 71px;
    content: "";
    background: url(.././img/start.png) 0 -62px;
    display: block;
    margin-right: -68px;
    margin-top: -73px;
    position: relative;
    float: right;
    animation: end 1s steps(2) infinite;
    -webkit-animation: end 1s steps(2) infinite;
    -moz-animation: end 1s steps(2) infinite;
    -ms-animation: end 1s steps(2) infinite;
    -o-animation: end 1s steps(2) infinite
}