#sjf_heroAnimation::after, #sjf_heroAnimation::before {
content: "";
display: block !important;
height: 650px;
width: 100%;
bottom: 0;
position: absolute;
background: linear-gradient(to top, #19192A, transparent);
pointer-events: none !important;
}
#sjf_heroAnimation .hero_wrapper {
display: flex;
justify-content: space-between;
width: 50vw;
transform: rotate(35deg);
position: absolute;
top: -20vh;
right: -10vw;
opacity: .3;
height: 150vh;
pointer-events: none !important;
z-index: -1;
}
@media only screen and (max-width: 1024px) {
#sjf_heroAnimation .hero_wrapper {
width: 100vw !important;
opacity: .1 !important;
}
}
#sjf_heroAnimation .column {
display: flex;
flex-direction: column;
width: 48%;
height: auto;
pointer-events: none !important;
}
#sjf_heroAnimation .col-1 .images-set {
animation: moveUp 40s linear infinite;
display: inline-block !important;
height: 100% !important;
pointer-events: none !important;
}
#sjf_heroAnimation .col-2 {
margin-top: -25%;
}
#sjf_heroAnimation .col-2 .images-set {
animation: moveDown 40s linear infinite;
display: inline-block !important;
pointer-events: none !important;
}
@keyframes moveUp {
from { transform: translateY(0); }
to { transform: translateY(-100%); }
}
@keyframes moveDown {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
.logo-carousel {
transform: rotate(2deg);
margin-top: -20px;
opacity: .8;
}