*{box-sizing:border-box;margin:0}:root{--heights:50vh;--widths:100%}.slider-container{height:var(--heights);width:var(--widths);margin:auto;position:relative;overflow:hidden}.top-left{color:#011689;text-align:center;transform-origin:100% 0;content:"";background-color:#ffc100;min-width:400px;height:100px;padding:25px 10px 5px;font-size:34px;font-weight:700;display:inline-block;position:absolute;top:0;left:0;overflow:hidden;transform:skew(-45deg)}.top-text{padding-left:25px;transform:skew(45deg)}@media screen and (max-width:390px){.top-text{margin-top:-20px;padding-left:25px;transform:skew(45deg)}}.active{display:inline-block}.inactive{display:none}.slides{height:var(--heights);width:var(--widths);position:relative}.slide-image{object-fit:cover;width:100%;height:100%;position:absolute}.slide-title,.slide-text{color:#fff;text-align:center;z-index:10;width:100%;height:100%;font-size:50px;position:absolute;top:40%}.slide-text{font-size:2rem;top:65%}.prev,.next{color:#0000;cursor:pointer;z-index:100;border-radius:0 5px 5px 0;width:auto;margin-top:-3rem;padding:1rem;font-size:40px;font-weight:700;position:absolute;top:50%}.slider-container:hover .prev,.slider-container:hover .next{color:#000}.slider-container:hover .prev:hover,.slider-container:hover .next:hover{color:#fff;background-color:#0009;transition:all .5s ease-in}.next{border-radius:5px 0 0 5px;right:0}.all-dots{z-index:200;justify-content:center;width:100%;height:100%;display:flex;position:absolute;top:85%}.dot{cursor:pointer;background-color:#0000;border-radius:50%;width:1.2rem;height:1.2rem;margin:0 3px;display:inline-block}.slider-container:hover .dot:hover{background-color:#ffffff80}.slider-container:hover .dot{background-color:#0000004d}.slider-container:hover .active-dot{background-color:#ffffff80}.play-pause{color:#000}