.slider{display:flex;height:100vh;transition:all .25s ease-in;transform:translateX(0)}header{height:100vh!important}@media only screen and (max-width:650px){.slider,header{height:80vh!important}header .h1{text-align:center}}.slider .box{height:100%;width:100%;display:grid;grid-template-columns:repeat(2,1fr);align-items:center;overflow:hidden;position:relative;background-size:cover;background-repeat:no-repeat}@media only screen and (max-width:650px){.slider .box{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}}.slider .box .bg{background-color:rgba(0,0,0,.2);width:55%;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:54%;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{width:120%;bottom:0;transform:skewX(0deg)}}.slider .box .details{padding:5rem 5rem 5rem 10rem;z-index:90;grid-column:1/span 1;grid-row:-1;order:2}@media only screen and (max-width:650px){.slider .box .details{grid-row:2/span 1;grid-column:-1;text-align:center;padding:2rem;transform:translateY(-9rem)}}.slider .box .details .h1,.slider .box .details p{text-shadow:#000 0 0 10px}.slider .box .details p{display:inline-block;font-size:1.3rem;color:#fff;margin-bottom:2rem;margin-right:5rem}@media only screen and (max-width:800px){.slider .box .details p{margin-right:0}}.next,.prev,.trail{z-index:90;position:absolute}.next,.prev,.trail div{cursor:pointer;transition:all .3s ease}.next,.prev{width:4rem;opacity:.2}@media only screen and (max-width:650px){.next,.prev{display:none}}.next:hover,.prev:hover{opacity:1}.next,.prev{top:50%;transform:translateY(-50%)}.prev{left:2%}.next{right:2%}.trail{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:100%;bottom:0;gap:0}}.trail div{padding:2rem;border-top:3px solid #fff;opacity:.3}.trail div:hover{opacity:.6}@media only screen and (max-width:650px){.trail div{padding:1rem}}.active{opacity:1!important}