.animations_component{height:695px;background:#f5f5f5}
.animations_component .video-hero-wrapper{position:absolute;overflow:hidden;width:100%;height:695px}
.animations_component .video-hero-wrapper .video-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0.6),rgba(0,0,0,0.5))}
.animations_component .video-hero-wrapper .background-animation{object-fit:cover;width:100%;height:100%}
.animations_component .content{position:relative;padding:40px 120px;display:flex;flex-direction:row}
.animations_component .content .text-side{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;margin-right:16px}
.animations_component .content .text-side .hero-title{font-size:4rem;font-weight:bold;margin-bottom:15px}
.animations_component .content .text-side p{font-size:2.188rem;font-weight:400;line-height:2.5rem;margin-bottom:20px}
.animations_component .content .text-side .product-title{font-size:3rem;font-weight:bold;margin-bottom:15px}
.animations_component .content .text-side .product-description{font-size:1.5rem;font-weight:400;line-height:100%;margin-bottom:20px}
.animations_component .content .text-side .hero-buttons{display:flex;flex-direction:row;width:fit-content;gap:40px}
.animations_component .content .text-side .hero-buttons .button{margin-bottom:8px;box-sizing:border-box;align-content:center}
.animations_component .content .text-side .product-button{font-size:.875rem;margin-bottom:50px;align-self:start}
.animations_component .content .text-side .product-button::after{width:1em;height:1em;top:.125em}
.animations_component .content .text-side.white-text .hero-title{color:#fff}
.animations_component .content .text-side.white-text p{color:#fff}
.animations_component .content .text-side.white-text .product-title{color:#fff}
.animations_component .content .text-side.white-text .product-description{color:#fff}
.animations_component .content .text-side.white-text .product-button{color:#fff !important}
.animations_component .content .text-side.white-text .product-button::after{filter:invert(1)}
.animations_component .content .animation-side{height:100%;flex:1;display:flex;margin-left:16px;flex-direction:column;justify-content:end;align-items:flex-end}
.animations_component .content .animation-side .small_animation{width:580px;max-width:100%;max-height:527px}
.animations_component .content .animation-side .animation-buttons{margin:30px 0 8px;max-width:100%;width:auto;display:flex;justify-content:end}
.animations_component .content .animation-side .animation-buttons button{background-color:var(--color-button-primary);border:0;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:0;transition:background-color .3s;margin-right:10px}
.animations_component .content .animation-side .animation-buttons button span{display:block;width:19px;height:19px}
.animations_component .content .animation-side .animation-buttons button:focus-visible{outline:2px solid var(--color-button-primary);outline-offset:2px;-moz-outline-radius:20%}
.animations_component .content .animation-side .animation-buttons button.pause span{content:url("../../cee2020-pws/img/svgs/Navigation and action/Pause.svg")}
.animations_component .content .animation-side .animation-buttons button.play{display:none;padding-left:13px}
.animations_component .content .animation-side .animation-buttons button.play span{content:url("../../cee2020-pws/img/svgs/Navigation and action/Play.svg")}
@media(min-width:1000px) and (max-width:1299px){.animations_component{height:auto;min-height:695px}
.animations_component .video-hero-wrapper+.content{min-height:615px;height:auto !important}
.animations_component .video-hero-wrapper+.content .animation-side{height:auto}
.animations_component .text-side.white-text{height:auto}
}
@media(max-width:959px){.animations_component{height:auto !important;min-height:580px}
.animations_component .video-hero-wrapper{min-height:580px}
.animations_component .video-hero-wrapper .background-animation{min-height:580px}
.animations_component .content{flex-direction:column-reverse;height:auto !important;min-height:548px;padding:16px 120px}
.animations_component .content .animation-side{align-items:start;margin-left:0;height:fit-content;flex:unset}
.animations_component .content .animation-side .small_animation{max-height:228px}
.animations_component .content .animation-side .animation-buttons{width:580px}
.animations_component .content .text-side{margin-right:0;height:fit-content;flex:unset}
.animations_component .content .text-side .hero-title{font-size:2.188rem;font-weight:700;margin-top:18px;margin-bottom:12px}
.animations_component .content .text-side p{font-size:1.125rem;line-height:1.5rem;margin-bottom:6px}
.animations_component .content .text-side .product-title{font-size:2.188rem;font-weight:bold;margin-bottom:12px}
.animations_component .content .text-side .product-description{font-size:1.125rem;line-height:1.563rem;margin-top:18px;margin-bottom:6px}
.animations_component .content .text-side .hero-buttons{flex-direction:column;width:unset;gap:0}
.animations_component .content .text-side .hero-buttons .secondary-light{margin-top:7px}
.animations_component .content .text-side .product-button{margin-bottom:8px;bottom:unset}
}
@media(max-width:820px){.animations_component .content{padding:16px}
}
@media(max-width:599px){.animations_component .content .text-side .hero-buttons .button{width:100%}
}