﻿.loop-wrapper {
    margin: 0 auto;
    position: relative;
    display: block;
    width:80%;
    height: 100%;
    overflow: hidden;
    border-bottom: 1px solid #000;
    color: #fff;
}

.mountain {
    position: absolute;
    right: -900px;
    bottom: -20px;
    width: 2px;
    height: 2px;
    box-shadow: 0 0 0 50px #842029, 60px 50px 0 70px #842029, 90px 90px 0 50px #842029, 250px 250px 0 50px #842029, 290px 320px 0 50px #842029, 320px 400px 0 50px #842029;
    transform: rotate(130deg);
    animation: mtn 40s linear infinite;
}

.hill {
    position: absolute;
    right: -900px;
    bottom: -50px;
    width: 400px;
    border-radius: 50%;
    height: 20px;
    box-shadow: 0 0 0 50px #842029, -20px 0 0 20px #842029, -90px 0 0 50px #842029, 250px 0 0 50px #842029, 290px 0 0 50px #842029, 620px 0 0 50px #842029;
    animation: hill 40s linear infinite;
}

.addon {
    position: absolute;
    right: -990px;
    height: 325px;
    width: 100%;
    bottom: 0;
    background: url(../images/addon.png) no-repeat;
    animation: addon 40s linear infinite;
}
.treee, .treee:nth-child(2), .treee:nth-child(3) {
    position: absolute;
    height: 100px;
    width: 35px;
    bottom: 0;
    background: url(../assets/images/svg/tree.svg) no-repeat;
 
}



.truck, .wheels {
    transition: all ease;
    width: 85px;
    margin-right: -60px;
    bottom: 0px;
    right: 50%;
    position: absolute;
    background: #000000;
}

.truck {
    background: url(../assets/images/svg/truck1.svg) no-repeat;
    background-size: contain;
    height: 85px;
}

    .truck:before {
        content: " ";
        position: absolute;
        width: 55px;
        box-shadow: -30px 28px 0 0.4px #000, -35px 18px 0 0.4px #000;
    }



.uspipe {
    transition: all ease;
    width: 85px;
    margin-right: -60px;
    bottom: 0px;
    left: 1%;
    position: absolute;
    /*background: #eee;*/
}

.uspipe {
    background: url(../assets/images/svg/uspipe.svg) no-repeat;
    background-size: contain;
    height: 45px;
}

    .uspipe:before {
        content: " ";
        position: absolute;
        width: 55px;
        /*box-shadow: -30px 28px 0 1.5px #fff, -35px 18px 0 1.5px #fff;*/
    }


.quikrete {
    transition: all ease;
    width: 85px;
    margin-right: -60px;
    bottom: 0px;
    right: 5%;
    position: absolute;
    /*background: #eee;*/
}

.quikrete {
    background: url(../assets/images/svg/quikrete.svg) no-repeat;
    background-size: contain;
    height: 30px;
}

.quikrete:before {
    content: " ";
    position: absolute;
    width: 55px;
    /*box-shadow: -30px 28px 0 1.5px #fff, -35px 18px 0 1.5px #fff;*/
}

/*.wheels {
    background: url(../assets/images/svg/wheels.svg) no-repeat;
    height: 15px;
    margin-bottom: 0;
}*/

.treee {
    animation: tree 3s 0.000s linear infinite;
}

    .treee:nth-child(2) {
        animation: tree2 2s 0.150s linear infinite;
    }

    .treee:nth-child(3) {
        animation: tree3 8s 0.050s linear infinite;
    }

.rock {
    animation: rock 4s -0.530s linear infinite;
}

.truck {
    animation: truck 4s 0.080s ease infinite;
}

.wheels {
    animation: truck 4s 0.001s ease infinite;
}

.truck:before {
    animation: wind 1.5s 0.000s ease infinite;
}


@keyframes tree {
    0% {
        transform: translate(1350px);
    }

    50% {
    }

    100% {
        transform: translate(-50px);
    }
}

@keyframes tree2 {
    0% {
        transform: translate(650px);
    }

    50% {
    }

    100% {
        transform: translate(-50px);
    }
}

@keyframes tree3 {
    0% {
        transform: translate(2750px);
    }

    50% {
    }

    100% {
        transform: translate(-50px);
    }
}

@keyframes rock {
    0% {
        right: -200px;
    }

    100% {
        right: 2000px;
    }
}

@keyframes truck {
    0% {
    }

    6% {
        transform: translateY(0px);
    }

    7% {
        transform: translateY(-6px);
    }

    9% {
        transform: translateY(0px);
    }

    10% {
        transform: translateY(-1px);
    }

    11% {
        transform: translateY(0px);
    }

    100% {
    }
}

@keyframes wind {
    0% {
    }

    50% {
        transform: translateY(3px)
    }

    100% {
    }
}

@keyframes mtn {
    100% {
        transform: translateX(-2000px) rotate(130deg);
    }
}

@keyframes hill {
    100% {
        transform: translateX(-2000px);
    }
}

@keyframes addon {
    100% {
        transform: translateX(-3000px);
    }
}
