*{
    overflow: hidden;
}

.okvir{
    height: 100vh;

}

.ozadje{
    position: relative;
    width: 100vw;
    height: 100vh;
    top: -1vh;
}

#cloud{
    width: auto;
    height: 30vh;
}

.cloud1{
    position: absolute;
    width: 140vw;
    top: 40vh;
    animation: cloudOne infinite 40s linear;
    -webkit-animation: cloudOne infinite 40s linear;
}

.cloud2 {
    position: absolute;
    width: 140vw;
    top: 30vh;
    animation: cloudTwo infinite 15s linear;
    -webkit-animation: cloudTwo infinite 15s linear;
}

.cloud3 {
    position: absolute;
    width: 140vw;
    top: 15vh;
    animation: cloudThree infinite 30s linear;
    -webkit-animation: cloudThree infinite 30s linear;
}

.cloud4 {
    position: absolute;
    width: 140vw;
    top: 0vh;
    animation: cloudFour infinite 20s linear;
    -webkit-animation: cloudFour infinite 20s linear;
}

@keyframes cloudOne{
    0%{
        transform: translateX(-100%)    ;
        -webkit-transform: translateX(-100%)    ;
        -moz-transform: translateX(-100%)    ;
        -ms-transform: translateX(-100%)    ;
        -o-transform: translateX(-100%)    ;
    }
    100%{
        transform: translateX(100%)    ;
        -webkit-transform: translateX(100%)    ;
        -moz-transform: translateX(100%)    ;
        -ms-transform: translateX(100%)    ;
        -o-transform: translateX(100%)    ;
    }
}

@keyframes cloudTwo {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }
}

@keyframes cloudThree {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }
}

@keyframes cloudFour {
    0% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
    }
}