.casestudy__item { position: relative; overflow: hidden; cursor: pointer;}.casestudy__item::before { content: ""; position: absolute; inset: 0; background: rgba(14, 64, 81, 0.7); mix-blend-mode: multiply; opacity: 0; transition: opacity 0.4s ease; z-index: 1;}.casestudy__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 2; color: #fff;}.casestudy__item:hover::before { opacity: 1;}.casestudy__item:hover .casestudy__content { opacity: 1; transform: translateY(0);}.color-green { color: var(--brand-color-green) }.slider { height: 60px; position: relative; width: 100%; display: grid; place-items: center; overflow: hidden;}.slider::before,.slider::after{ position:absolute; background-image:linear-gradient(to right,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); content:''; height:100%;width:25%; z-index:2;pointer-events:none;}.slider::before{ left:0; top:0;}.slider::after{ right:0; top:0; transform:rotateZ(180deg);}.slide-track { width: calc(150px * 20); display: flex; animation: scroll 20s linear infinite; justify-content: space-between;}.slide-track2 { width: calc(150px * 15); display: flex; animation: scroll2 15s linear infinite; justify-content: space-between;}.slide { width: 150px; height: 60px; display: grid; place-items: center; transition:0.5s; cursor:pointer;}.slide:hover{ transform:scale(0.8)}@keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-150px * 10)); }}@keyframes scroll2 { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-150px * 5)); }}@media screen and (max-width: 768px) { .slide-track { width: calc(80px * 20); } .slide-track2 { width: calc(80px * 15); } .slide { width: 80px; } @keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-80px * 10)); } } @keyframes scroll2 { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-80px * 5)); } }} .brxe-container {width: 90%; max-width: 1640px; display: block} .woocommerce main.site-main {width: 90%} #brx-content.wordpress {width: 90%; max-width: 1640px} .brxe-section {display: block; padding-top: 50px; padding-bottom: 50px} body {font-family: "Outfit"; font-size: var(--fontsize-26px); line-height: 1.3; color: var(--bricks-color-eonloq)} h1, h2, h3, h4, h5, h6 {font-family: "Outfit"; font-weight: 600; line-height: 1.3em; color: var(--bricks-color-eonloq)} .brxe-text {line-height: 1.3} .brxe-text-basic {line-height: 1.3}