#favTools{
    height: 260px;
    margin: 60px auto;
}
.tools{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    position: relative;
    overflow-x: clip;
}
.tools div{
    flex: 1;
    text-align: center;
    position: absolute;
}
.tools div img{
    height: 100px;
    opacity: .5;
    position: absolute;
    transform: translateX(110vw);
    animation: parade 12s Infinite linear;
}
.tools div:first-of-type img{
    height: 130px;

}
.tools div:nth-of-type(2) img{
    height: 80px;
    animation-delay: 3s;
    margin-top: 25px;
}
.tools div:nth-of-type(3) img{
    animation-delay: 6s;
    margin-top: 15px;
}
.tools div:last-of-type img{
    height: 90px;
    animation-delay: 9s;
    margin-top: 20px;
}

@keyframes parade {
    0% { transform:translateX(110vw); opacity: 0;}
    10% { transform:translateX(83vw); opacity: .05;}
    20% { transform:translateX(67vw); opacity: .15;}
    30% { transform:translateX(57vw); opacity: .35;}
    40% { transform:translateX(50vw); opacity: .45;}
    50% { transform:translateX(45vw); opacity: .5;}
    60% { transform:translateX(40vw); opacity: .45;}
    70% { transform:translateX(33vw); opacity: .35;}
    80% { transform:translateX(23vw); opacity: .15;}
    90% { transform:translateX(8vw); opacity: .05;}
    100% { transform:translateX(-19vw); opacity: 0;}
}

footer{
    color: rgba(182, 219, 190, 1);
    position: relative;
    overflow: hidden;
    height: 278px;
    margin-top: 200px;
}
footer div{
    width: 60vw;
    margin: 0px auto;
}
#svgContainer{
    position: absolute;
    left: 0;
    top: 0;
    height: 278px;
    overflow: hidden;
    width: 100vw;
}
footer svg{
    position: absolute;
    left: 0;
    top: 0;
}
#copy{
    margin-top: 200px;
    position: absolute;
}
#bob{
    display: none;
}


@keyframes parade2 {
    0% { transform:translateX(110vw); opacity: 0;}
    50% { transform:translateX(45vw); opacity: .5;}
    100% { transform:translateX(-19vw); opacity: 0;}
}

@media only screen and (max-width: 930px) {
    .tools div img{
    }
    .tools div img{
        animation: parade2 14s Infinite linear;
    }
    .tools div:nth-of-type(2) img{
        animation-delay: 2.75s;
    }
    .tools div:nth-of-type(3) img{
        animation-delay: 6s;
    }
    .tools div:last-of-type img{
        animation-delay: 10.25s;
    }
    
}





/* Interests */

#interestsContainer{
    height: 300px;
    background: #a44;
    color: white;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-content: center;
    margin: 100px 0;
    z-index: -1001;
    margin-bottom: 200px;
}
.interest{
    font-size: 2rem;
    grid-row: 1/2;
    grid-column: 1/2;
    margin: 0 auto;
    display: none;
    text-align: center;
}
#interestsOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #040010;
    background: linear-gradient(to right ,rgba(4, 0, 16, 1) 0%,rgba(4, 0, 16, 0) 30%,rgba(4, 0, 16, 0) 50%,rgba(4, 0, 16, 0) 70%, rgba(4, 0, 16, 1) 100%);
}