#banner{box-sizing:border-box}
#banner *,#banner *:before,#banner *:after{box-sizing:inherit}
#banner{height:calc(100vh - 50px);min-height:36rem;position:relative;overflow:hidden}
#banner:after{content:'';background:white;opacity:.3;position:absolute;right:8vw;height:100%;width:1px;z-index:3}
#banner .controls-button,#banner .slide-side-text,#banner .slide-content-cta{font-family:"Montserrat";text-transform:uppercase;color:#fff;letter-spacing:0.12rem;font-size:0.7rem;line-height:1}
#banner .slide-wrapper{background-size:cover;height:100%;background-position:center center;position:absolute;width:100%;background-blend-mode:darken;opacity:0;transition-delay:1.4s;transition-duration:0s;transition-property:opacity;will-change:opacity,transform;background-color:rgba(115,129,153,0.4)}
#banner .slide-wrapper .slide-content-text{text-shadow:2px 5px 45px rgba(85,96,113,0.25)}
#banner .slide-wrapper:before{content:"";position:absolute;width:100%;height:100%;z-index:1;background-color:rgb(93 93 93/25%)}
#banner .slide-inner{position:relative;z-index:2;height:100%;overflow:hidden}
#banner .slide-inner *{color:white}
#banner .slide-bg-text{font-family:"Playfair Display";color:#000;font-size:42vh;line-height:0.8;opacity:0.03;font-weight:900;margin-top:-4rem;position:absolute;top:50%;left:5vw;transform:translateY(-50%);pointer-events:none;user-select:none;display: none;}
#banner .slide-bg-text > p:last-child{padding-left:4rem}
#banner .slide-content{color:#fff;margin-top:9rem;position:absolute;top:50%;left:calc(8vw + (.7) * 48vh);transform:translateY(-50%);display:flex;flex-direction:column}
#banner .slide-content-text{font-family:"Playfair Display";font-size:9rem;letter-spacing:0.2rem;line-height:0.87;font-weight:700;margin:0;will-change:auto}
#banner .slide-content-text > p{margin:0;font-size:60px;letter-spacing:7px;line-height:1.3}
#banner .slide-content-text > p:last-child{padding-left:3rem;color: #d5dce3;}

#banner .slide-content-cta{position:relative;display:inline-block;vertical-align:middle;text-decoration:none;cursor:pointer;border:0;background:transparent;padding:0;outline:none;width:12rem;height:3rem}
#banner .slide-content-cta .circle{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:relative;display:block;margin:0;width:3rem;height:3rem;background: var(--secondary);border-radius:1.625rem}
#banner .slide-content-cta .circle .icon{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;top:0;bottom:0;margin:auto}
#banner .slide-content-cta .circle .icon.arrow{left:0.625rem;width:1.125rem;height:0.125rem;background:none}
#banner .slide-content-cta .circle .icon.arrow::before{position:absolute;content:"";top:-0.25rem;right:0.0625rem;width:0.625rem;height:0.625rem;border-top:0.125rem solid #fff;border-right:0.125rem solid #fff;transform:rotate(45deg)}
#banner .slide-content-cta .button-text{transition:all 0.45s cubic-bezier(0.65,0,0.076,1);position:absolute;inset:0;padding:0.75rem 0;margin: 0 0 0 1.05rem;color: var(--white);font-weight:700;line-height:1.6;text-align:center;text-transform:uppercase;letter-spacing:0.12rem;font-size: 14px;}
#banner .slide-content-cta:hover .circle{width:100%}
#banner .slide-content-cta:hover .circle .icon.arrow{background:#fff;transform:translate(1rem,0)}
#banner .slide-content-cta:hover .button-text{color:#fff}
#banner .slide-content-cta:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px;border-radius:999px}
#banner .slide-rect{height:62vh;width:58vh;border-image-slice:10%;position:absolute;top:50%;transform:translateY(-50%);left:6vw;border-width:5vh;border-style:solid;box-shadow:2px 2px 90px 30px rgba(41,50,61,0.22);will-change:auto;background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);filter:drop-shadow(0 0 32px rgba(255,255,255,.25))}
#banner .slide-rect-filter{filter:brightness(110%) contrast(110%) saturate(110%)}
#banner .slide-side-text{margin: 30px 0 50px;position:relative;display:flex;flex-direction:row-reverse;align-items:center}
#banner .slide-side-text > span{font-weight:300;font-size:18px}
#banner .slide-side-text:after{content:"";width:40px;background-color:#fff;height:1px;display:block;transform:translateX(-50%)}
#banner .controls-container{position:absolute;z-index:200;display:flex;bottom:0;right:0;align-items:flex-end;display:none}
#banner .controls-button{cursor:pointer;background-color:rgba(208,206,204,0.32);border:0;padding:1.6rem 2.2rem;flex-basis:0;flex-grow:1;min-width:15rem;transition:0.25s ease-in-out;outline:0}
#banner .controls-button:not(.active):hover{color:#000;background-color:#fff}
#banner .controls-button.active{cursor:default;font-weight:700;background-color:#3b3e45;padding-top:1.9rem;padding-bottom:1.9rem;margin-bottom:-0.3rem;position:relative}
#banner .controls-button.active:after{content:"";background-color:#e3e3e3;height:5px;width:calc(100% - 8px);position:absolute;top:100%;left:4px}
#banner .controls-button:not(.active) + .controls-button{border-left:1px solid rgba(255,255,255,0.2)}
#banner .pagination-container{position:absolute;z-index:200;display:flex;flex-direction:column;align-items:flex-end;right:3vw;top:50%;transform:translateY(-50%)}
#banner .pagination-item{width:30px;height:1px;background-color:rgba(255,255,255,0.6);transition:0.18s ease-in-out}
#banner .pagination-item + .pagination-item{margin-top:1rem}
#banner .pagination-item.active{background-color:#fff;position:relative;transform:translateX(-0.6rem);width:35px}
#banner .pagination-item.active:after{content:"";height:4px;width:2px;border-radius:35%;background-color:#fff;display:inline-block;position:absolute;right:0;top:50%;transform:translateX(0.6rem) translateY(-50%)}
#banner .pagination-item:not(.active){cursor:pointer}
#banner .pagination-item:not(.active):hover{background-color:#fff;width:35px}
#banner .slide-full-link{position:absolute;inset:0;z-index:50}
@keyframes bannerSlideLeft{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes bannerSlideRight{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes bannerCutTextUp{from{clip-path:inset(0 0 -10% 0)}
to{clip-path:inset(0 0 100% 0)}}
@keyframes bannerCutTextDown{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-10% 0 -20% 0);opacity:1}}
@keyframes bannerRectMovement{0%{transform:translateX(0) rotate(0) translateY(-50%)}60%{opacity:1}100%{transform:translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);opacity:0}}
@keyframes bannerRectMovementFromRight{0%{transform:translateX(calc(48vh)) rotate(12deg) translateY(-50%);opacity:0}60%{opacity:1}100%{transform:translateX(0) rotate(0) translateY(-50%);opacity:1}}
@keyframes bannerRectMovementRight{0%{transform:translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%)}40%{opacity:1}100%{transform:translateX(0) rotate(0) translateY(-50%);opacity:1}}
@keyframes bannerFadeIn{from{opacity:0}to{opacity:1}}
#banner .slide-wrapper:not(.active){animation-delay:0.5s;animation-name:bannerSlideLeft;animation-duration:0.9s;animation-timing-function:cubic-bezier(0.18,0.54,0.52,0.93);pointer-events:none}
#banner .slide-wrapper:not(.active) .slide-content-text > p,#banner .slide-wrapper:not(.active) .slide-side-text{animation-name:bannerCutTextUp;animation-duration:0.5s;animation-timing-function:ease-out}
#banner .slide-wrapper:not(.active) .slide-rect{animation-name:bannerRectMovement;animation-duration:0.5s;animation-timing-function:ease;animation-fill-mode:forwards}
#banner .slide-wrapper.active{transition-delay:0s;opacity:1}
#banner .slide-wrapper.active .slide-content-text > p{opacity:0;animation-delay:0.8s;animation-name:bannerCutTextDown;animation-duration:0.5s;animation-timing-function:ease;animation-fill-mode:forwards}
#banner .slide-wrapper.active .slide-rect{opacity:0;animation-name:bannerRectMovementFromRight;animation-duration:0.45s;animation-timing-function:ease;animation-fill-mode:forwards;animation-delay:0.9s}
#banner.is-previous .slide-wrapper:not(.active){animation:none}
#banner.is-previous .slide-wrapper:not(.active) .slide-rect{animation:none}
#banner.is-previous .slide-wrapper.active{transform:translateX(-100%);animation-fill-mode:forwards;animation-delay:0.5s;animation-name:bannerSlideRight;animation-duration:0.8s;animation-timing-function:cubic-bezier(0.18,0.54,0.52,0.93)}
#banner.is-previous .slide-wrapper.active .slide-rect{opacity:0;animation-name:bannerRectMovementRight;animation-duration:0.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:0.9s}
#banner.first-load .slide-wrapper.active .slide-side-text,#banner.first-load .slide-wrapper.active .slide-content-cta,#banner.first-load .slide-wrapper.active .slide-rect,#banner.first-load .controls-container{opacity:0;animation-name:bannerFadeIn;animation-delay:0.3s;animation-duration:0.3s;animation-fill-mode:forwards;animation-timing-function:ease-in}
#banner.first-load .slide-wrapper.active .slide-content-text > p{animation-name:bannerFadeIn;animation-delay:0.5s;animation-duration:0.7s;animation-fill-mode:forwards}

@media (max-width:1440px){
    #banner .slide-rect{width: 45vh;border-width: 4vh;left: 3vw;}
}
@media (max-width:1400px){
    #banner .slide-content{margin-top: 5rem;}
    #banner .slide-content-text > p{font-size:50px;}
}
@media (max-width:1280px){
    #banner .slide-rect{width: 63vh;left: 2vw;}
}
@media (max-width:1024px){
    #banner .slide-content{left: calc(4vw + (.7) * 20vh);}
    #banner .slide-rect{width: 56vh;}
    #banner:after{display:none;}
}
@media (max-width:980px){
	#banner .pagination-container, #banner .slide-rect-filter{display:none}
	#banner .slide-content-text{font-size:5.5rem}
	#banner .controls-button{padding:1.2rem 1.4rem;min-width:13rem}
	#banner .controls-button.active{padding-top:1.4rem;padding-bottom:1.4rem;margin-bottom:-0.15rem}
	#banner .slide-content-text{font-size:7rem}
	#banner .slide-rect{left:9vw;height:20vw;width:16vw;border-width:5vh}
	#banner .slide-side-text{left:calc(9vw - 3rem);top:calc((50% - (20vw / 2)) + (5vh / 2))}
	#banner .slide-content{bottom: 20%;transform: translateY(0%);left: 10%;width: 80%;top: unset;}
	#banner .slide-rect{top:30%;transform:translateY(-30%)}
	#banner .slide-side-text{top:calc((40% - (20vw / 2)) + (5vh / 2))}
	@keyframes bannerRectMovement{0%{transform:translateX(0) rotate(0) translateY(-30%)}60%{opacity:1}100%{transform:translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);opacity:0}}
	@keyframes bannerRectMovementFromRight{0%{transform:translateX(calc(48vh)) rotate(12deg) translateY(-30%);opacity:0}60%{opacity:1}100%{transform:translateX(0) rotate(0) translateY(-30%);opacity:1}}
	@keyframes bannerRectMovementRight{0%{transform:translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%)}40%{opacity:1}100%{transform:translateX(0) rotate(0) translateY(-30%);opacity:1}}
}
@media (max-width:640px){
    #banner .slide-content-text > p{font-size:35px;}
    #banner .slide-side-text > span{font-size:15px}
	#banner{height: 60vh;min-height:0}
	#banner .slide-content-cta{display:none}
	#banner .controls-container{display:none}
	#banner .slide-content-text{font-size:3.5rem}
}