body {
    overflow: hidden
}
.mainland {
    overflow: hidden;
    margin-left: 1px;
    width: 100%;
    padding: 0;
    background-size: cover;
    height: 50vh;
    ;
    background-image: url(images/bg2.png)
}
.por {
    transform: rotate(-130deg);
    position: absolute;
    margin-top: 22px;
    margin-left: -180px;
}
.down {
    width: 99.8%;
    overflow: hidden;
    background-image: url(images/bg3.jpg);
    height: 45vh;
    margin-top: 2px;
}
p {
    position: absolute;
    top: 38vh;
    right: 2%;
    font-size: 13px;
    font-family: sans-serif;
}
.btns {
    z-index: 2;
    position: absolute;
    left: 43%;
    top: 70%;
    padding: 40px;
}

.btnsss {
    z-index: 1;
    position: absolute;
    left: 45%;
    top: 73%;
    padding: 25px;
}
.ground {
    overflow: hidden height: 6%;
    width: 100%;
    background: #797979;
    position: absolute;
    top: 56%;
}
.dino img {
    width: 90px;
    position: absolute;
    top: 49%;
    left: 15%;
    transition: .3s;
    z-index: 1;
    /*  text-shadow: 1px 1px 1px 1px black;*/
}
.jumpcss {
    margin-top: -220px;
}
.btnss {
    z-index: 1;
    position: absolute;
    left: 43%;
    top: 90%;
    padding: 40px;
    visibility: hidden
}

}
@media screen and (max-width:675px) {
    .btnss {
        visibility: visible
    }
}


.d2 {
    position: absolute;
    left: 110%;
    top: 6%;
    width: 165px;
    animation-delay: 2s;
    animation-duration: 20s;
    animation-name: run2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes run2 {
    0% {
        left: 110%;
    }
    100% {
        left: -110%
    }
}
.d3 {
    position: absolute;
    left: 110%;
    top: 15%;
    width: 220px;
    animation-delay: 6s;
    animation-duration: 30s;
    animation-name: run3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes run3 {
    0% {
        left: 110%;
    }
    100% {
        left: -110%
    }
}
.d4 {
    position: absolute;
    left: 110%;
    top: 24%;
    width: 190px;
    animation-delay: 3s;
    animation-duration: 25s;
    animation-name: run4;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes run4 {
    0% {
        left: 110%;
    }
    100% {
        left: -110%
    }
}
.road {
    left: 200%;
    height: 6%;
    width: 210%;
    background: #797979;
    position: absolute;
    animation-delay: 10s;
    animation-duration: 8s;
    animation-name: road;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.road2 {
    left: 110%;
    height: 6%;
    width: 210%;
    background: #797979;
    position: absolute;
    animation-delay: 14.6s;
    animation-duration: 8s;
    animation-name: road2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes road {
    0% {
        left: 100%;
    }
    100% {
        left: -180%
    }
}
@keyframes road2 {
    0% {
        left: 100%;
    }
    100% {
        left: -180%
    }
}
@keyframes road3 {
    0% {
        left: 100%;
    }
    100% {
        left: -100%
    }
}
.car {
    right: 110%;
    margin-top: -52px;
    width: 180px;
    position: absolute;
    animation-delay: 20s;
    animation-duration: 8s;
    animation-name: car;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes car {
    0% {
        right: 100%;
    }
    100% {
        right: -110%
    }
}


























/*.car3 {
    right: 110%;
    margin-top: -58px;
    width: 150px;
    position: absolute;
    animation-delay: 21s;
    animation-duration: 3s;
    animation-name: car3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


 

@keyframes car3 {
    0% {
        left: 100%;
    }
    100% {
        left: -110%
    }
}