@media screen and (max-width: 320px){
    .web-base {
        bottom: 1.25em;
        left: 2em;
    }

    @keyframes item1Appear {
        from {
            top: -0.5em;
            left: 0.5em;
            opacity: 1;
        }
        to {
            top: 0.5em;
            left: 2em;
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: -0.5em;
            right: -0.5em;
            opacity: 1;
        }
        to {
            top: 0.5em;
            right: 1em;
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: 0.25em;
            right: -0.25em;
            opacity: 1;
        }
        to {
            bottom: 1.5em;
            right: 1.25em;
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 2.55em;
            left: 4.55em;
            opacity: 1;
        }
        to {
            bottom: 2em;
            left: 4em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2em;
            left: -2.2em;
            opacity: 1;
        }
        to {
            bottom: 3em;
            left: -1em;
            opacity: 0;
        }
    }
}


@media screen and (min-width: 320.1px) and (max-width: 425px){
    .web-base {
        bottom: 1.75em;
        left: 2em;
    }

    @keyframes item1Appear {
        from {
            top: -0.75em;
            left: 0em;
            opacity: 1;
        }
        to {
            top: 0.5em;
            left: 2em;
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: -0.75em;
            right: -0.25em;
            opacity: 1;
        }
        to {
            top: 0.25em;
            right: 2em;
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: 0.65em;
            right: 0em;
            opacity: 1;
        }
        to {
            bottom: 1.75em;
            right: 1.25em;
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 3.3em;
            left: 5.35em;
            opacity: 1;
        }
        to {
            bottom: 2.5em;
            left: 4.55em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2.5em;
            right: 3.25em;
            opacity: 1;
        }
        to {
            bottom: 4em;
            right: 2em;
            opacity: 0;
        }
    }
}

@media screen and (min-width: 425px) and (max-width: 475px) {
    .web-base {
        bottom: 1.75em;
        left: 2.75em;
    }

    @keyframes item1Appear {
        from {
            top: -0.6em;
            left: 0.25em;
            opacity: 1;
        }
        to {
            top: 0.75em;
            left: 2.5em;
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: -0.5em;
            right: -0.7em;
            opacity: 1;
        }
        to {
            top: 0.75em;
            right: 2em;
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: 0.5em;
            right: -0.5em;
            opacity: 1;
        }
        to {
            bottom: 1.75em;
            right: 1.25em;
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 3.75em;
            left: 6.75em;
            opacity: 1;
        }
        to {
            bottom: 3em;
            left: 6em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2.75em;
            right: 3.7em;
            opacity: 1;
        }
        to {
            bottom: 4.5em;
            right: 2em;
            opacity: 0;
        }
    }
}

@media screen and (min-width: 475px) and (max-width: 525px){
    .web-base {
        bottom: 1em;
        left: 3em;
    }

    @keyframes item1Appear {
        from {
            top: 0.25em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2em; 
            left: 3em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0.25em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2em; 
            left: -2.5em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.75em; 
            right: 0em;
            opacity: 1;
        }
        to {
            bottom: 1em; 
            right: 2.5em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 3em;
            left: 7.5em;
            opacity: 1;
        }
        to {
            bottom: 2em;
            left: 6.5em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2em; 
            right: 4.25em; 
            opacity: 1;
        }
        to {
            bottom: 4em; 
            right: 2.5em; 
            opacity: 0;
        }
    }
}

@media screen and (min-width: 525px) and (max-width: 599.9px){
    .web-base {
        bottom: 1.25em;
        left: 3.5em;
    }
    
    @keyframes item1Appear {
        from {
            top: 0.25em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            left: 3.5em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0.25em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            left: -2.75em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.75em; 
            right: 0em;
            opacity: 1;
        }
        to {
            bottom: 1em; 
            right: 2.5em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 3.75em;
            left: 9em;
            opacity: 1;
        }
        to {
            bottom: 2.75em;
            left: 8em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2.5em; 
            right: 5.25em; 
            opacity: 1;
        }
        to {
            bottom: 5em; 
            right: 3em; 
            opacity: 0;
        }
    }
}

@media screen and (min-width: 600px) and (max-width: 750px){
    .web-base {
        bottom: 1.5em;
        left: 3.75em;
    }
    
    @keyframes item1Appear {
        from {
            top: 0.1em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            left: 4em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0.1em; 
            left: 0.25em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            left: -4em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.75em; 
            right: 0em;
            opacity: 1;
        }
        to {
            bottom: 1.25em; 
            right: 2.75em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 4.25em;
            left: 10em;
            opacity: 1;
        }
        to {
            bottom: 3em;
            left: 8.75em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 2.9em; 
            right: 6em; 
            opacity: 1;
        }
        to {
            bottom: 5.5em; 
            right: 3.5em; 
            opacity: 0;
        }
    }
} 

@media screen and (min-width: 750px) and (max-width: 768px){
    .web-base {
        bottom: 1.75em;
        left: 2.5em;
    }

    @keyframes item1Appear {
        from {
            top: 0.25em; 
            right: 1.5em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            right: -3.25em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0.25em; 
            right: 0.75em; 
            opacity: 1;
        }
        to {
            top: 2.25em; 
            right: 4.5em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.25em; 
            right: 1em;
            opacity: 1;
        }
        to {
            bottom: 1.75em; 
            right: 3.5em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 4.75em;
            left: 9em;
            opacity: 1;
        }
        to {
            bottom: 3.75em;
            left: 8em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 3.4em; 
            right: 7.5em; 
            opacity: 1;
        }
        to {
            bottom: 6em; 
            right: 4em; 
            opacity: 0;
        }
    }
} 

@media screen and (min-width: 768px) and (max-width: 992px){
    .web-base {
        bottom: 1.95em;
        left: 5.5em;
    }

    @keyframes item1Appear {
        from {
            top: 0.4em; 
            left: 0.75em; 
            opacity: 1;
        }
        to {
            top: 3.75em; 
            left: 5.25em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0.5em; 
            left: 1em; 
            opacity: 1;
        }
        to {
            top: 3.75em; 
            left: -3.5em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            top: 1.25em; 
            left: 0.5em;
            opacity: 1;
        }
        to {
            top: -1.5em; 
            left: -3.5em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 5.5em;
            left: 13.75em;
            opacity: 1;
        }
        to {
            bottom: 4em;
            left: 12em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 3.5em; 
            left: -7.35em; 
            opacity: 1;
        }
        to {
            bottom: 7.5em; 
            left: -4em; 
            opacity: 0;
        }
    }
} 

@media screen and (min-width: 992px) and (max-width: 1200px){
    .web-base {
        bottom: 3.75em;
        left: 9em;
    }

    @keyframes item1Appear {
        from {
            bottom: 0.5em; 
            left: 2.25em; 
            opacity: 1;
        }
        to {
            bottom: -3.75em; 
            left: 9em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            bottom: 0.5em; 
            left: 3em; 
            opacity: 1;
        }
        to {
            bottom: -3.75em; 
            left: -3em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.3em; 
            left: 2.5em;
            opacity: 1;
        }
        to {
            bottom: 4em; 
            left: -2.5em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 9em;
            left: 20.75em;
            opacity: 1;
        }
        to {
            bottom: 7.25em;
            left: 18.75em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 6.5em; 
            left: -8.5em; 
            opacity: 1;
        }
        to {
            bottom: 12em; 
            left: -2em; 
            opacity: 0;
        }
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px){
    .web-base {
        bottom: 4em;
        left: 11em;
    }

    @keyframes item1Appear {
        from {
            top: 0em; 
            left: 2.25em; 
            opacity: 1;
        }
        to {
            top: 5em; 
            left: 11em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            top: 0em; 
            left: 4.25em; 
            opacity: 1;
        }
        to {
            top: 5em; 
            left: -4.5em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: -0.6em; 
            left: 3.5em;
            opacity: 1;
        }
        to {
            bottom: 4em; 
            left: -3em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 10.25em;
            left: 25.5em;
            opacity: 1;
        }
        to {
            bottom: 7.5em;
            left: 22em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 7em; 
            right: 10.5em; 
            opacity: 1;
        }
        to {
            bottom: 13em; 
            right: 2em; 
            opacity: 0;
        }
    }
}

@media screen and (min-width: 1400px) and (max-width: 2560px){
    .web-base {
        bottom: 5.25em;
        left: 12.5em;
    }

    @keyframes item1Appear {
        from {
            bottom: 0em; 
            left: 2em; 
            opacity: 1;
        }
        to {
            bottom: -4.5em; 
            left: 13em; 
            opacity: 0;
        }
    }
    @keyframes item2Appear {
        from {
            bottom: 0em; 
            left: 5em; 
            opacity: 1;
        }
        to {
            bottom: -4.5em; 
            left: -5em; 
            opacity: 0;
        }
    }
    @keyframes item3Appear {
        from {
            bottom: 0.25em; 
            left: 4.25em;
            opacity: 1;
        }
        to {
            bottom: 5.5em; 
            left: -3em; 
            opacity: 0;
        }
    }
    @keyframes item3-1Appear {
        from {
            bottom: 13.25em;
            left: 29.5em;
            opacity: 1;
        }
        to {
            bottom: 10em;
            left: 25em;
            opacity: 0;
        }
    }
    @keyframes item4Appear {
        from {
            bottom: 9.5em; 
            right: 13em; 
            opacity: 1;
        }
        to {
            bottom: 16.5em; 
            right: 3em; 
            opacity: 0;
        }
    }
}
.web {
    min-width: 40%;
    position: relative;
}
.web:hover, .org:hover {
    opacity: 0.5;
}
.web-base {
    z-index: 3;
}
.web-item-1 {
    animation: item1Appear alternate-reverse ease-in-out 2s infinite;
    animation-play-state: paused;
}
.web-item-2 {
    animation: item2Appear alternate-reverse ease-in-out 2s infinite;
    animation-play-state: paused;
}
.web-item-3 {
    animation: item3Appear alternate-reverse ease-in-out 1s infinite;
    animation-play-state: paused;
    z-index: 2;
}
.web-item-3-1 {
    animation: item3-1Appear alternate-reverse ease-in-out 1s infinite;
    animation-play-state: paused;
}
.web-item-4 {
    animation: item4Appear alternate-reverse ease-in-out 2s infinite;
    animation-play-state: paused;
}