.ls-box {border-radius: 20px; min-height: 450px;}
.ls-left {width: 33%;}
.ls-right {width: 67%;}
.ls-img-box {position: relative;border-radius: 20px 0 0 20px;overflow: hidden;height: 100%;}
.ls-img-box img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.ls-box {border-radius: 20px;}
.ls-content-box {width: 100%;height: 100%;padding: 0 40px 0 55px;position: relative;}
.ls-text-box {flex-grow: 1;padding: 55px 20px 55px 0;display: flex;height: 100%;align-items: center;position: relative;}
.ls-text {position: relative;max-width: 450px; width: 100%;}
.ls-text h2 {font-size: 70px;margin-bottom: 0px;line-height: 1;color: inherit;}
.ls-text h3 {font-size: 30px;line-height: 1.2;margin-bottom: 25px;font-weight: 700;color: var(--sof-yellow);}
.bg-white .ls-text h3, .bg-yellow .ls-text h3 {color: var(--sof-red);}
.ls-btn {margin-top: 34px;}
.ls-illustration-box {width: 275px;flex-shrink: 0;display: flex;align-items: center;}
.ls-illustration {width: 100%; height: 100%;}
.ls-box.img_right {flex-direction: row-reverse;}
.ls-box.img_right .ls-img-box {border-radius: 0 20px 20px 0;}
.ls-box.illus_left .ls-content-box {flex-direction: row-reverse;}
.ls-box.illus_left .ls-content-box .ls-text-box {padding: 56px 0 56px 25px;}
.ls-box.illus_right .ls-content-box {flex-direction: row;}
.ls-box.illus_right .ls-content-box .ls-text-box {padding-left: 0;}
.ls-box.negative-top .ls-illustration-box {margin-top: -45px; height: 100%; padding-bottom: 40px;} 
.ls-box.negative-bottom .ls-illustration-box {margin-top: 45px; height: 100%; padding-top: 40px;}
.ls-box.negative-left .ls-illustration-box {width: 336px;margin-left: -80px;}
.ls-box.negative-top-bottom .ls-illustration-box {width: 450px;margin-right: -77px;margin-top: -25px; margin-bottom: -10px;}
.ls-box.negative-top .ls-illustration.img-contain img,
.ls-box.negative-top-bottom .ls-illustration.img-contain img{object-position: top;}

.ls-box.inside-container .ls-illustration.img-contain img,
.ls-box.negative-bottom .ls-illustration.img-contain img{object-position: bottom;}

.ls-box.inside-container .ls-illustration{height: 80%;}
.ls-img {position: absolute;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
.ls-img img {mix-blend-mode: luminosity;}
.ls-illustration-mob{display: none;}
.ls-btn-inside{display: none;}
.ls-bottom-text{font-size: 16px;line-height: 1.2;margin-top: 30px; clear: both;}
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
    .ls-content-box {padding: 0 24px;}
    .ls-box.illus_right .ls-content-box .ls-text-box {padding: 30px 0 30px 20px;}
    .ls-box.negative-left .ls-illustration-box {width: 237px;margin-left: 0;}
    .ls-box.negative-top-bottom .ls-illustration-box{width: 350px; margin-right: -40px;}
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
    .letterbox-signpost-container {overflow-x: clip;}
    .ls-left{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; opacity: 10%; padding: 0; }
    .ls-img-box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; padding: 0; border-radius: 0 !important;}
    .ls-img-box img {mix-blend-mode: luminosity; position: relative;}
    .ls-right {width: 100%;}
    .ls-content-box {padding: 0;}    
    .ls-box {width: calc(100% + 30px);margin-left: -15px;border-radius: 0;padding: 42px 15px; min-height: auto;}
    .ls-content-box, .ls-box.illus_left .ls-content-box{flex-direction: row;}
    .ls-text {max-width: 100%;}
    .ls-text-box, .ls-box.illus_left .ls-content-box .ls-text-box {padding: 0;}
    .ls-text h3 {font-size: 30px;margin-bottom: 40px;}
    .ls-illustration-box {width: 180px;}
    .ls-box.illus_right .ls-content-box .ls-text-box {padding: 0;}
    .ls-box.negative-top .ls-illustration-box {margin-top: 0;}
    .ls-box.img-bottom .ls-content-box {flex-flow: column;}
    .ls-box.img-bottom .ls-illustration-box {margin-top: 20px;}
    .ls-box.img-bottom .ls-illustration-box {align-self: center;}
    .ls-box.img-bottom .ls-btn {text-align: center;}
     
    .ls-img {opacity: 10%;}
    .ls-box.negative-top-bottom .ls-illustration-box{margin-right: 0;}

 
}
/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width: 767.98px){ 
     .ls-btn {margin-top: 0;}
     .ls-btn .btn{min-width: auto;}
     .ls-text-body-content{margin-bottom: 50px;}
     .ls-text h2{margin-bottom: 5px;}
    .illus_mob_bottom .ls-illustration {width: 50%;max-width: 300px;margin: 0 auto 50px;}
    .illus_mob_right_negative .ls-text-body-content{margin-bottom: 50px;width: calc(100% - 150px);float: left;}
    .illus_mob_right_negative .ls-illustrator-holder {width: 150px;max-width: none;margin: 0;float: right;position: relative;}
    .illus_mob_right_negative .ls-illustrator-holder .ls-illustration {width: 180px;max-width: none;margin: 0;}
    .illus_mob_right_negative .ls-btn-inside{display: block;}
    .illus_mob_right_negative .ls-btn-bottom{text-align: left !important; padding-right: 160px;}

    .illus_mob_right_negative .ls-text-head{padding-right: 90px;} 
    .illus_mob_right_negative .ls-illustrator-holder{margin-top: -50px;}



    .illus_mob_right .ls-text-body-content{margin-bottom: 50px;width: calc(100% - 150px);float: left;}
    .illus_mob_right .ls-illustrator-holder {width: 150px;max-width: none;margin: 0;float: right;position: relative;}
    .illus_mob_right .ls-illustrator-holder .ls-illustration {width: 100%;max-width: none;margin: 0;}
    .illus_mob_right .ls-btn-inside{display: block;}
    .illus_mob_right .ls-btn-bottom{text-align: left !important; padding-right: 160px;}
    .illus_mob_right .ls-illustrator-holder{margin-top: 0px;}


    .illus_mob_right_top.ls-box{padding-top: 0;}
    .illus_mob_right_top.ls-box .ls-content-box .ls-text-box{align-items: flex-start;}
    .illus_mob_right_top.ls-box .ls-content-box .ls-text-box .ls-text{padding-top: 40px;}
    .illus_mob_right_top .ls-text {width: calc(100% - 150px);}
    .illus_mob_right_top .ls-btn-bottom{text-align: left !important;}
    .illus_mob_right_top .ls-illustrator-holder{margin-top: -20px;width: 150px;flex-shrink: 0;right: -20px;position: relative;}
    .illus_mob_right_top .ls-illustration {width: 100%;max-width: 100%;margin: 0}
 
   
}
/* ======================================================
 ! Extra small devices (portrait phones, less than 576px)
 ====================================================== */
 @media (max-width: 575.98px){
     
}

/* ======================================================
! Extra small devices (portrait phones, less than 370px)
====================================================== */
@media (max-width:369.98px) {
    .ls-text h2{font-size: 60px;}
    .ls-text h3{font-size: 25px;}
 }