/* Transport Managenment Software*/
.truck_container {
    background: #009688;
}

.loop-wrapper {
    margin: 0 auto;
    position: relative;
    display: block;
    width: 99%;
    height: 22rem;
    overflow: hidden;
    border-bottom: 3px solid #fff;
    color: #fff;
}

.mountain {
    position: absolute;
    right: -900px;
    bottom: -20px;
    width: 2px;
    height: 2px;
    box-shadow: 0 0 0 50px #4DB6AC, 60px 50px 0 70px #4DB6AC, 90px 90px 0 50px #4DB6AC, 250px 250px 0 50px #4DB6AC, 290px 320px 0 50px #4DB6AC, 320px 400px 0 50px #4DB6AC;
    transform: rotate(130deg);
    animation: mtn 20s linear infinite;
}

.hill {
    position: absolute;
    right: -900px;
    bottom: -50px;
    width: 400px;
    border-radius: 50%;
    height: 20px;
    box-shadow: 0 0 0 50px #4DB6AC, -20px 0 0 20px #4DB6AC, -90px 0 0 50px #4DB6AC, 250px 0 0 50px #4DB6AC, 290px 0 0 50px #4DB6AC, 620px 0 0 50px #4DB6AC;
    animation: hill 4s 2s linear infinite;
}

.tree, .tree:nth-child(2), .tree:nth-child(3) {
    position: absolute;
    height: 100px;
    width: 35px;
    bottom: 0;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/tree.svg) no-repeat;
}

.rock {
    margin-top: -17%;
    height: 2%;
    width: 2%;
    bottom: -2px;
    border-radius: 20px;
    position: absolute;
    background: #ddd;
}

.truck, .wheels {
    transition: all ease;
    width: 85px;
    margin-right: -60px;
    bottom: 0px;
    right: 50%;
    position: absolute;
    background: #eee;
}

.truck {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/truck.svg) no-repeat;
    background-size: contain;
    height: 60px;
}

    .truck:before {
        content: " ";
        position: absolute;
        width: 25px;
        box-shadow: -30px 28px 0 1.5px #fff, -35px 18px 0 1.5px #fff;
    }

.wheels {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/130015/wheels.svg) no-repeat;
    height: 15px;
    margin-bottom: 0;
}

.tree {
    animation: tree 3s 0.000s linear infinite;
}

    .tree:nth-child(2) {
        animation: tree2 2s 0.150s linear infinite;
    }

    .tree: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);
    }
}




/*football*/
:root {
    --animation-duration: 1s;
    --bounce-height: calc(10rem);
}




#suport {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

#smash {
    animation-name: smash;
    animation-duration: var(--animation-duration);
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: bottom;
}

#translateShadow, #rotateImg, #light {
    border-radius: 50%;
    display: inline-block;
    width: 50px;
    height: 50px;
}

#light {
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 221, 179,.7),rgba(255, 221, 179,.5) 10%, transparent 30%,rgba(83,42,0,.8) 85%);
    position: absolute;
    z-index: 1;
}

#translateShadow {
    animation-name: translateShadow;
    animation-duration: var(--animation-duration);
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}

#rotateImg {
    background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='75 75 251 251' fill='rgb(83,42,0)'><path d='M313.3,145.3c-14.4-29.3-38.8-50.5-67.1-61.6c-4.6-1.7-16.2-5.1-21.3-6.3	c-26.3-5.3-54.5-2.3-80.4,10.4c-30.2,14.8-52.9,40.6-63.8,72.5c-10.9,31.8-8.7,66,6.2,96.1l0.1,0.2c2.1,4.2,4.4,8.3,6.9,12.2l0,0	c0,0,0,0,0,0c23.6,36.9,64.4,58,106.5,58c18.7,0,37.6-4.1,55.4-12.9c30.2-14.8,52.9-40.6,63.8-72.5 	C330.3,209.6,328.1,175.5,313.3,145.3z M238.3,86.2c25.2,12.5,41.2,36.6,46,68.5c-24.3,0.8-45.4-15.7-67.4-33.1 	c-18.4-14.5-37.3-29.3-58.9-34.2C184.6,77.6,212.8,77.7,238.3,86.2z M85.4,161.9c10.4-30.6,32.2-55.3,61.2-69.6 	c0.9-0.4,1.7-0.8,2.6-1.2c23.6,2.3,44.4,18.6,64.6,34.5c21.4,16.9,43.4,34.1,68.8,34.1c0.8,0,1.5,0,2.3-0.1c1,9.5,1.1,19.7,0.2,30.4 	c-9.8-3.3-19.3-5.9-25.7-7.6c-37.6-9.8-79.7-16.1-112.5-16.7c-24-0.5-53,1.8-66,14.2C81.8,173.9,83.4,167.8,85.4,161.9z M91.4,254.4 	l-0.1-0.2c-10.1-20.5-14.1-42.8-11.9-65l0.5,0.2c5.3-12.9,29-19.5,66.7-18.8c32.5,0.7,74.1,6.8,111.4,16.6 	c10.1,2.6,18.9,5.3,26.5,7.8c-1.2,10.2-3.3,20.4-6.3,30.3c-19.8-8.8-48.7,2.6-81.8,15.7c-32,12.6-68.1,26.8-99.7,23 	C94.9,261,93.1,257.7,91.4,254.4z M187.8,321.2c-34.6-3.6-67-21.9-87.5-51.7c31.8,2.4,66.9-11.4,98-23.7 	c32.4-12.8,60.6-23.9,78.4-15.5c-5.6,17.2-13.6,33.4-23.5,47c-12.8,17.7-34.5,39.5-65.6,43.3L187.8,321.2z M253.5,309.4 	c-15.6,7.7-32.1,11.6-48.4,12.3c36.2-12.4,62.8-49,76.1-88.8c9.1,6.7,14.2,20.1,15.8,40.6C285.7,288.6,270.9,300.9,253.5,309.4z 	 M314.8,239.8c-3.3,9.8-7.8,19-13.3,27.4c-2.4-19.7-8.5-32.6-18.7-39.3c3.1-10.3,5.4-20.8,6.6-31.1c19.2,6.9,29.2,13.2,30.7,17.3 	l0.4-0.2C319.6,222.6,317.7,231.3,314.8,239.8z M290,191.7c1.1-11.3,1-22.1-0.2-32.4c6.8-0.9,13.8-3,21.1-6.8l-2.3-4.5 	c-6.8,3.4-13.2,5.4-19.5,6.3c-1.6-11.1-4.6-21.4-8.8-30.7c-4.6-10.3-10.8-19.2-18.3-26.6c19.5,11.6,36,28.7,46.8,50.5 	c9.3,18.9,13.4,39.4,12.3,59.8C314.9,201.6,302.6,196.1,290,191.7z'/></svg>");
    background-color: darkorange;
    background-size: 100%;
    animation-name: rotateImg;
    animation-duration: calc(var(--animation-duration) * 5.3);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes translateShadow {
    0% {
        transform: translateY(10rem);
        box-shadow: 40px 40px 10px #444466
    }

    100% {
        transform: translateY(0);
        box-shadow: 40px 350px 250px #444466
    }
}

@keyframes smash {
    0% {
        transform: scaleY(.7)
    }

    15% {
        transform: scaleY(1)
    }
}

@keyframes rotateImg {
    100% {
        transform: rotate(360deg)
    }
}

/*school*/



/* Foreground */
.foreground-container {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 400px;
    left: 0;
    background: linear-gradient(#6f9323, #a5d645);
}

/* Hot Air Balloon Animation */
.hot-air-balloon {
    position: absolute;
    top: 230px;
    left: 255px;
    transform: scale(0.5);
    animation: balloon 12s ease-in infinite;
}

@keyframes balloon {
    from {
        top: 230px;
        transform: scale(0.5);
    }

    35% {
        top: 20px;
        left: 120px;
        transform: scale(0.5);
    }

    40% {
        top: 30px;
        left: 120px;
        transform: scale(0.5);
    }

    50% {
        top: 20px;
        left: 120px;
        transform: scale(0.5);
    }

    60% {
        top: 30px;
        left: 120px;
        transform: scale(0.5);
    }

    65% {
        top: 20px;
        left: 120px;
        transform: scale(0.5);
    }

    90% {
        left: -400px;
        transform: scale(0.9);
    }

    to {
        top: -100px;
        left: -500px;
        transform: scale(1);
    }
}










 .flex-shrink-0 {
        width: 51px
    }
@media(max-width: 900px) {
    .flex-shrink-0 {
        width: 45px
    }
}
@media(max-width: 750px) {
    .flex-shrink-0 {
        width: 40px
    }
}
@media(max-width: 600px) {
    .flex-shrink-0 {
        width: 35px
    }
}
@media(max-width: 500px) {
    .flex-shrink-0 {
        width: 30px
    }
}
@media(max-width: 350px) {
    .flex-shrink-0 {
        width: 25px
    }
}