:root{--b1cd:#731f10;--b1cl:#ff0077;--b2cd:#000050;--b2cl:#0033ff;--b3cd:#00501d;--b3cl:#00ff44;--b4cd:#554d00;--b4cl:#ff4e00;--b5cd:#300050;--b5cl:#8000ff;--black:#000;--white:#fff;--grey:#b5b4b4}.slider{display:flex;width:100%;height:83vh;transition:all .25s ease-in;transform:translateX(0)}@media only screen and (max-width:1000px){.slider{height:100%}}.slider .box{height:100%;width:100%;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;overflow:hidden;position:relative}@media only screen and (max-width:650px){.slider .box{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}}.slider .box .bg{background-color:#0003;width:70%;transform:skewX(7deg);position:absolute;height:100%;left:-10%;padding:2rem 2rem 2rem 20rem;transform-origin:0 100%}@media only screen and (max-width:800px){.slider .box .bg{width:65%}}@media only screen and (max-width:650px){.slider .box .bg{width:100%;left:0;bottom:0;height:70%;transform:skewX(0deg)}}.slider .box .bg:before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background-color:inherit;pointer-events:none;transform:skewX(10deg)}@media only screen and (max-width:650px){.slider .box .bg:before{background-color:#491309;width:100%;bottom:0;transform:skewX(0deg)}}.details{z-index:100}.slider .box .details{padding:2rem;grid-column:1/span 1;grid-row:1/-1}@media only screen and (max-width:650px){.slider .box .details{grid-row:2/span 1;grid-column:1/-1;padding:1rem}}@media only screen and (max-width:800px){.slider .box .details p{margin-right:0}}.slider .box .details button{padding:1rem 3rem;color:var(--white);border-radius:2rem;outline:none;border:none;cursor:pointer;transition:all .3s ease}.slider .box .details button:hover{opacity:.8}.slider .illustration{grid-column:2/-1;grid-row:1/-1;justify-self:center}@media only screen and (max-width:650px){.slider .illustration{grid-row:1/span 1;grid-column:1/-1;display:flex;justify-content:center;align-items:center}}.slider .illustration div{height:25rem;width:18rem;border-radius:3rem;background-color:var(--b1cl);position:relative;transform:skewX(-10deg);z-index:1}@media only screen and (max-width:800px){.slider .illustration div{height:20rem;width:15rem}}.slider .illustration div:after,.slider .illustration div:before{content:"";position:absolute;height:100%;width:100%;border-radius:3rem;top:0;left:0;z-index:-1;background-color:rgba(255,255,255,.3)}.slider .illustration div:after{transform:translate(4rem,-1rem)}.slider .illustration div:before{transform:translate(2rem,-2rem)}@media only screen and (max-width:650px){.slider .illustration div:after{transform:translate(2rem,-1rem)}.slider .illustration div:before{transform:translate(1rem,-2rem)}}.slider .box1{background-color:var(--b1cd)}.slider .box1 .illustration div{background-color:#9b111e;z-index:100}.trail{position:absolute;z-index:100;bottom:5%;left:50%;transform:translateX(-50%);width:60%;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center;font-size:1.5rem}@media only screen and (max-width:650px){.trail{width:90%;bottom:13%}}.trail div{padding:2rem;border-top:3px solid #fff;cursor:pointer;opacity:.3;transition:all .3s ease}.trail div:hover{opacity:.6}@media only screen and (max-width:650px){.trail div{padding:1rem}}