.slides{
    width: 100%;
    min-height: 40vw;
    overflow: hidden;
    position: relative;
}


.slide{
    position: absolute;
    opacity: 0;
    inset: 0;
    animation: slide-show 15s infinite;
    filter: saturate(0);
}


.slide-2{
    animation-delay: 4s;
    filter: saturate(0);
}

.slide-3{
    animation-delay: 8s;
    filter: saturate(0);
}

.slide-4{
animation-delay: 12s
}

@keyframes slide-show{
    0%{
        opacity: 0;
    }
    10%{
        opacity: 1;
    }
    20%, 30%{
        opacity: 1;
        
    }
    50%{
        opacity: 0;
    }
}

.gallery figure img:hover{
    box-shadow: 1px 1px 12px #29FFF8;
    transition: box-shadow 0.2s;
}

.gallery figure figcaption{
    opacity: 0;
    transition: opacity 0.2s;
    
}

.gallery figure:hover figcaption{
    opacity: 1;
}

#logo:hover{
    rotate: 360deg;
    transition: rotate 1s;
}