body{background: #F8F8F8;}
.main-box-finesse{background: #F8F8F8; font-size: 18px; line-height: 24px; color: #101010; font-family: "proxima-nova",sans-serif;}
.pa{position: absolute;}
.d-none{display: none;}

.display-1, .display-2{font-family: 'neulis_neueregular'; font-weight: 600;}
.display-1{font-size: 88px; line-height: 104px;}
.display-2{font-size: 64px; line-height: 72px;}

h1, h2, h3 {color: #101010; font-family: 'neulis_neuebold' !important; font-weight: 700;}
h4, h5{color: #101010}
h1{font-size: 48px; line-height: 60px; font-weight: 700;}
h2{font-size: 40px; line-height: 48px; font-weight: 700;}
h3{font-size: 32px; line-height: 40px; font-weight: 700;}

h4{font-family: "proxima-nova",sans-serif !important; font-size: 24px; line-height: 32px; font-weight: 700; color: #101010;}
.font-24{font-size: 24px; line-height: 32px; font-weight: 400;}
.font-16{font-size: 16px; line-height: 20px; font-weight: 400;}
.font-14{font-size: 14px; line-height: 16px; font-weight: 400;}
/*font-family: "proxima-nova",sans-serif;*/

.animationParent {opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}
.animationChild {opacity: 0; -moz-transform: translateY(100px); -webkit-transform: translateY(100px); transform: translateY(100px); -moz-transition: opacity 1s ease-out, transform 1s ease-out; -webkit-transition: opacity 1s ease-out, transform 1s ease-out; transition: opacity 1s ease-out, transform 1s ease-out;}
.animationChild.visible { opacity: 1; -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0);}

.italic{font-style: italic;}
.font-700{font-weight: 700; font-family: 'neulis_neuebold' !important;}
.font-600{font-weight: 600; font-family: 'neulis_neueregular' !important;}
.font-500{font-weight: 500; font-family: 'neulis_neuemedium' !important;}
.font-400{font-weight: 400;}
.text-white{color: #fff;}
.text-dark-yellow{color: #8F8620;}
.text-dark-200{color: #9C9D9F;}
.text-dark-300{color: #54565A;}

.finesse-box li{-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear;}
.btn-fine{-webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -ms-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 400ms;}


.btn-fine{font-family: "proxima-nova",sans-serif !important; font-size: 18px; line-height: 24px; font-weight: 400; padding: 10px 24px; color: #54565A; border-radius: 22px 0; display: inline-flex; align-items: center; transition: all 0.3s ease;}
.btn-fine span{vertical-align: middle; background-position: 0 0; background-repeat: no-repeat; width: 0; height: 24px; transition: all 0.3s ease;}
.btn-fine:hover span, .btn-fine:focus span{width: 24px; margin-left: 4px; transition: width 0.3s ease-in-out;}
.btn-fine-primary{border: 1px solid #54565A; background: #54565A; color: #fff;}
.btn-fine-primary span{background-image: url("https://graceframe.com/frontend/images/new/finesse/btn-arrow.svg");}
.btn-fine-primary:hover, .btn-fine-primary:focus{border: 1px solid #54565A; background: transparent; color: #54565A;}

.btn-fine-secondary{border: 1px solid #54565A; background: transparent; color: #54565A;}
.btn-fine-secondary span{background-image: url("https://graceframe.com/frontend/images/new/finesse/btn-arrow-white.svg");}
.btn-fine-secondary:hover, .btn-fine-secondary:focus{border: 1px solid #F5779E; background: #F5779E; color: #fff;}


.width-1480{max-width: 1480px; margin: 0 auto;}
.width-1440{max-width: 1440px; margin: 0 auto;}
.width-1368{max-width: 1368px; margin: 0 auto;}

.hero-bg{background:#FDF2E9; position: relative; overflow: hidden;}
.hero-bg::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; background: url("https://graceframe.com/frontend/images/new/finesse/hero-bg.png") center bottom no-repeat; height: 239px; z-index: 1;}
.hero-box{max-width: 874px; margin: 0 auto; text-align: center; padding: 7vw 0 20vw; position: relative; z-index: 1;}
.hero-box .display-2, .hero-box .btn-fine{margin-top: 64px;}
.hero-img{position: absolute; top: -120px; left: -40px; right: -100px; bottom: 0; display: flex; align-items: center; justify-content: center;}
.hero-img img{width: 10%; opacity: 0; -moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; transition: all 2s ease-in-out;}
.hero-bg.active .hero-img img{width: 100%; opacity: 1;}

.handle-finesse-bg{background: #fef3ea url("https://graceframe.com/frontend/images/new/finesse/handle-finesse-bg.jpg") center 0 repeat-x; padding: 120px 0 206px; position: relative; overflow: hidden;}
.handle-finesse-box h1{margin-top: 230px; color: #A55519;}
.handle-finesse-child{margin-top: 120px;}
.handle-finesse-child h4{color: #EB7923; margin-bottom: 8px;}
.handle-finesse-2{width: 414px;}
.handle-finesse-2 img{max-width: 100%;}
.handle-finesse-1, .handle-finesse-3{width: 360px;}
.handle-left-child-1{padding-top: 61px;}
.handle-left-child-arrow-1{position: absolute; right: -150px; top: 48px;}
.handle-left-child-2{margin-top: 140px;}
.handle-left-child-arrow-2{position: absolute; right: -112px; top: -30px;}
.handle-right-child-1{padding-top: 0;}
.handle-right-child-arrow-1{position: absolute; left: -150px; top: 24px;}
.handle-right-child-2{margin-top: 120px;}
.handle-right-child-arrow-2{position: absolute; left: -140px; top: 0px;}

.video-bg{background: #FFFFFE; position: relative; overflow: hidden; padding-bottom: 120px;}
.video-bg::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; background: #FFFFFE url("https://graceframe.com/frontend/images/new/finesse/video-bg.png") center bottom no-repeat; height: 198px; z-index: 1;}
.video-box{height: clamp(800px, 40vw, 500px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; content-visibility: auto;}
.image-video-crossover{margin: 73px auto 77px; width: clamp(0px,100% - 160px, 1170px); -webkit-mask-image: url("https://graceframe.com/frontend/images/new/finesse/video-masking-1.png");
mask-image: url("https://graceframe.com/frontend/images/new/finesse/video-masking-1.png"); -webkit-mask-size: 100%; mask-size: 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;  pointer-events: none}
.image-video-crossover::after { content: ""; display: block; padding-bottom: 17%;}
.video-cover{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.modal-video video{max-width: 100%;}  
.modal-video .close{right: 0; top: -18px; background: #fff url(https://graceframe.com/frontend/images/icons/modal-close.svg) center center no-repeat; height: 24px; width: 24px; position: absolute; opacity: 1; outline: none; z-index: 9; background-size: 16px !important;}  
.modal-video .close:hover{opacity: 1;}
.modal-video.modal-dialog{max-width: calc(100% - 26px);}

.thread-bg{background: #FAF9EA url(https://graceframe.com/frontend/images/new/finesse/thread-bg.png) center bottom no-repeat; min-height: 500px; overflow: hidden;}
.thread-full{position: relative; max-width: 1920px; min-height: 710px; margin: 240px auto 0;}
.thread-full:first-child{margin-top: 140px;}
.thread-box{max-width: 910px; width: 100%;}
.thread-box-right{float: right;}
.thread-box-right .thred-color{margin-left: auto;}
.thred-title{padding-bottom: 70px; padding-top: 100px;}
.title-img{position: absolute; left: 412px; bottom: 0; width: 100%;}
.thred-title-right{}
.title-right-img{position: absolute; right: 0; bottom: 0;}
.thred-color{margin-top: 70px;}
.thred-color-img{margin-top: 16px;}
.thred-color-img ul{margin: 0 -8px; flex-wrap: wrap;}
.thred-color-img li{padding: 8px 7px;}
.thred-color-img img{height: 44px; width: 44px; object-fit: cover;}
.thred-color-img img, .thred-color-img li a{-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.thred-color-img li a{border: 2px solid transparent; display: block;}
.thred-color-img li.active a, .thred-color-img li a:hover{border: 2px solid #fff;}
.thred-color-img li a:hover{-moz-box-shadow: 0 0 0 2px #ED1558; -webkit-box-shadow: 0 0 0 2px #ED1558; box-shadow: 0 0 0 2px #ED1558;}
.thred-color-img li.active a{-moz-box-shadow: 0 0 0 4px #54565A; -webkit-box-shadow: 0 0 0 4px #54565A; box-shadow: 0 0 0 4px #54565A;}
.thread-big-left-img, .thread-big-right-img{position: absolute; top: 0;}
.thread-big-left-img img, .thread-big-right-img img{max-width: 100%;}
.thread-big-right-img{right: -8.3%; top: 50px;}
.thread-big-left-img{left: -8%; top: 60px;}
.thred-color .btn-fine{margin-top: 48px;}

.feather-bg{background: #E1DA86; padding-bottom: 150px;}
.feather-bg .wrap{max-width: 1824px; overflow: hidden;}
.feather-box{max-width: 688px; margin: 0 auto;}
.feather-box{padding: 548px 0;}
.feather-box img{-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.feather-1{left: -387px; top: 439px;}
.feather-2{left: 0; top: 341px;}
.feather-3{left: 291px; top: 197px; width: 411px;}
.feather-4{right: -400px; top: 439px;}
.feather-5{left: 0; bottom: 199px;}
.feather-6{right: -14px; bottom: 339px;}
.feather-box .display-2{opacity: 0;}
.feather-box .feather-1, .feather-box .feather-2, .feather-box .feather-3, .feather-box .feather-4, .feather-box .feather-5, .feather-box .feather-6, .feather-box .display-2 
{transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;}
.feather-box.active .display-2{opacity: 1;}
.feather-box.active .feather-1{left: -535px; top: 523px;}
.feather-box.active .feather-2{left: -123px; top: 206px;}
.feather-box.active .feather-3{left: 364px; top: 31px; width: 411px;}
.feather-box.active .feather-4{right: -600px; top: 341px;}
.feather-box.active .feather-5{left: -83px; bottom: 32px;}
.feather-box.active .feather-6{right: -120px; bottom: 223px;}

.slider-bg{background: #F8F8F8 url("https://graceframe.com/frontend/images/new/finesse/slider-bg.png") right center no-repeat; padding: 120px 0; margin: 48px 0; background-size: contain; overflow: hidden;}
.slider-box{padding: 176px 0;}
.slider-left{max-width: 410px; padding-top: 24px;}

.slider-right{max-width: 840px; padding-right: 20px; width: 100%; overflow: hidden;}
.slider-right .owl-carousel{position: static;}
.slider-right .owl-carousel .owl-stage{display: flex; align-items: center;}
.slider-right .owl-carousel .owl-stage-outer{overflow: visible !important; padding: 24px;}
.item-box{background: #fff; padding: 40px; text-align: left; -moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px; -webkit-box-shadow: 0px 4px 24px 0px rgba(84,86,90,0.25); -moz-box-shadow: 0px 4px 24px 0px rgba(84,86,90,0.25); box-shadow: 0px 4px 24px 0px rgba(84,86,90,0.25); }
.item-box .font-24{font-weight: 700;}
.slider-right .owl-item .item{float: right; width: 440px; margin-left: 0; transform: scale(0.6);}
.slider-right .owl-item.active .item{float: left; margin-left: -10px;}
.slider-right .owl-item.active.center .item{width: 100%; margin-top: 0; float: none; margin: 0; opacity: 1; transform: scale(1);}
.slider-right .owl-item{right: -160px; z-index: 1;}
.slider-right .owl-item.active{right: auto; left: -160px;}
.slider-right .owl-item.active.center{position: relative; z-index: 2; left: auto; right: auto;}

.owl-carousel .owl-nav .owl-prev{left: 0 !important;  -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.owl-carousel .owl-nav .owl-next{left: 88px !important;}
.owl-carousel .owl-nav [class*=owl-]{width: 72px !important; height: 44px !important; border: 1px solid #54565A !important; bottom: 32px; top: auto; -moz-border-radius: 22px !important; -webkit-border-radius: 22px !important; border-radius: 22px !important; opacity: 1;}
.owl-carousel .owl-nav [class*=owl-] span{background-image: url("https://graceframe.com/frontend/images/new/finesse/btn-arrow.svg") !important; text-indent: -9999px;}
.owl-carousel .owl-nav [class*=owl-]:hover{background: #54565A !important;}
.owl-carousel .owl-nav [class*=owl-]:hover span{background-image: url("https://graceframe.com/frontend/images/new/finesse/btn-arrow-white.svg") !important;}


.slider-star{display: flex;}
.slider-star span{display: inline-block; margin: 4px 4px 0 0; width: 22px; height: 20px; background-image: url("https://graceframe.com/frontend/images/new/finesse/star.svg"); background-repeat: no-repeat; background-position: 0 0;}
.slider-star span.active{background-image: url("https://graceframe.com/frontend/images/new/finesse/star-fill.svg");}
.star-quote{background: url("https://graceframe.com/frontend/images/new/finesse/quote.svg") 0 0 no-repeat; width: 57px; height: 44px; margin-left: 4px;}

.quilt-finesse-bg{background: url("https://graceframe.com/frontend/images/new/finesse/quilt-finesse-bg.png") center 0 repeat-x; padding: 175px 0 128px; position: relative; overflow: hidden;}
.quilt-finesse-bg::after{content: ""; display: block; clear: both; background: #C0E7EE; top: 500px; left: 0; width: 100%; height: 2000px; position: absolute;}
.finesse-box{position: relative; z-index: 1;}
.finesse-box h1{margin-bottom: 80px;}
.finesse-box li{width: 400px; padding: 24px; position: relative; z-index: 1; -moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px; z-index: 1;}
.finesse-box-img{padding-top: 80px; position: relative;}
.finesse-box-img img{position: relative;}
.finesse-box-img::before{content: ''; position: absolute; background: #F5779E; left: 50%; top: 0; height: 200px; width: 200px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;}
.finesse-box-img.variegated-bg::before{background: #92D6E2;}
.finesse-box-img.yard-bg::before{background: #E1DA86;}
.finesse-colors{color: #54565A;}
.finesse-colors span{border-left: 1px solid #54565A; margin-left: 16px; padding-left: 16px;}
.finesse-colors span:first-child{border-left: none; margin-left: 0; padding-left: 0;}
.finesse-box li:hover{background: #f8f8f8;}

@media (max-width : 1820px) {
.thread-big-left-img{left: -14%;}
.thread-big-right-img{right: -14%;}
}

@media (max-width : 1680px) {
.feather-box.active .feather-1{left: -370px; top: 490px;}
.feather-box.active .feather-2{left: 0;}
.feather-box.active .feather-4{right: -370px; top: 450px;}
.feather-box.active .feather-5{left: 8px;}
.feather-box.active .feather-6{right: -80px; bottom: 124px;}
.thread-big-left-img{left: -12%; top: 100px; max-width: 600px; width: 100%;}
.thread-big-right-img{right: -12%; top: 100px; max-width: 600px; width: 100%;}
}

@media (max-width : 1440px) {
.hero-box{padding: 7vw 0 18vw;}
}

@media (max-width : 1420px) {
.feather-bg{padding-bottom: 0;}
.feather-box{padding: 120px 0; display: flex; flex-wrap: wrap; max-width: 100%;}
.feather-box .pa{position: static; order: 2; width: 50% !important; padding: 12px;}
.feather-box .pa img{width: 100%;}
.feather-box .display-2{opacity: 1; margin: 0 auto 48px; order: 1;}
.slider-box{padding: 100px 0;}
.thread-full{margin: 140px auto 0;}
}

@media (max-width : 1350px) {
.slider-right{max-width: 740px; width: 100%;}
.slider-right .owl-item{right: -200px;}
.slider-right .owl-item.active{left: -200px;}
.thread-bg{padding-bottom: 50px;}
.thred-color{max-width: 500px;}
.thread-big-right-img, .thread-big-left-img{top: 250px;}
}

@media (max-width : 1152px) {
.hero-img{left: -150px; right: -200px;}
.hero-box .display-2, .hero-box .btn-fine{margin-top: 32px;}
.handle-left-child-arrow-1, .handle-left-child-arrow-2, .handle-right-child-arrow-1, .handle-right-child-arrow-2{display: none;}
.slider-bg{padding: 80px 0;}
.slider-box{padding: 20px 0;}
.slider-box-child{display: block;}
.slider-left{padding-top: 0; margin: 0 auto; text-align: center;}
.slider-right{margin: 0 auto; padding-right: 0;}
.owl-carousel .owl-nav [class*=owl-]{position: static; margin: 0 8px !important;}
.slider-right .owl-item{right: -220px;}
.slider-right .owl-item.active{left: -220px;}
.slider-right .owl-carousel .owl-stage-outer{margin-left: -18px;}
}

@media (max-width : 1024px) {
.display-1{font-size: 60px; line-height: 68px;}
.display-2{font-size: 40px; line-height: 48px;}
h1{font-size: 40px; line-height: 48px;}

.video-box{height: 600px; margin-top: 40px;}
.handle-finesse-bg{padding: 16px 0 60px;}
.handle-finesse-box .display-1{margin-top: 16px;}
.handle-finesse-box h1{margin-top: 100px;}
.handle-finesse-2{display: flex; align-items: center; padding: 0 16px;}
.handle-left-child-1{padding-top: 0;}
.handle-left-child-2, .handle-right-child-2{margin-top: 40px;}
.finesse-box ul{margin-right: -24px; margin-left: -24px; overflow-y: auto;}
.finesse-box li{min-width: 360px; margin: 0 24px;}
.slider-bg{background-size: auto 80%;}
}

@media (max-width : 991px) {
.thread-bg{padding-bottom: 200px;}
.thread-full, .thread-full:first-child{min-height: auto; margin-top: 80px;}
.thred-title{padding: 0; text-align: center;}
.thred-title .title-img, .title-right-img{position: static; margin-top: 8px;}
.thread-box{display: block; float: none;}
.thread-big-right-img, .thread-big-left-img{position: static; margin: 24px auto 0;}
.thred-color{margin: 32px auto 0; max-width: 600px;}
.thred-color .btn-fine{margin-top: 24px;}

}

@media (max-width : 767px) {
.display-1{font-size: 48px; line-height: 56px;}
.display-2{font-size: 32px; line-height: 40px;}
h1{font-family: 'neulis_neueregular' !important; font-weight: 600; line-height: 36px;}

.hero-box{padding: 60px 0 140px;}
.hero-img{top: -60px; left: 0; right: 0;}
.hero-img img{object-fit: cover; height: 100%; opacity: 1; width: 100%;}
.video-bg::after{height: 120px;}
.video-box{height: 400px; margin-top: 40px;}
.image-video-crossover{margin: 32px auto; width: clamp(0px,100% - 60px, 1170px);}
.handle-finesse-box h1{margin-top: 24px;}
.handle-finesse-child{display: block;}
.handle-finesse-1, .handle-finesse-2, .handle-finesse-3{max-width: 450px; width: 100%; margin: 0 auto; text-align: center !important;}
.handle-left-child-2, .handle-right-child-2, .handle-finesse-child{margin-top: 24px;}
.handle-finesse-2{margin: 24px 0;}
.feather-box{padding: 0 0 60px 0;}
.feather-box .display-2{margin-bottom: 24px;}
.feather-box .pa{padding: 8px;}
.slider-bg{background: none; margin: 0; padding: 60px 0;}
.slider-right .owl-carousel .owl-stage-outer{padding: 0; margin: 16px 0 0;}
.slider-right .owl-item{right: auto;}
.slider-right .owl-item .item{max-width: 440px; width: 100%; margin: 0 auto; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.slider-right .owl-item.active{left: auto;}
.item-box{padding: 24px;}
.quilt-finesse-bg{padding-bottom: 60px;}
.finesse-box h1{margin-bottom: 28px;}
.finesse-box ul{margin-right: 0; margin-left: 0;}
.finesse-box li{min-width: 100%; margin: 0;}
}