.swapimagewithcta.imageWithRightTextComp{display:flex;flex-direction:row;align-items:center;background-color:#f8f8f8}
.swapimagewithcta.imageWithRightTextComp.imageRightAligned{flex-direction:row-reverse}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp.imageRightAligned{flex-direction:column}
}
.swapimagewithcta.imageWithRightTextComp.imageRightAligned .righttext-wrapper{padding-right:81px}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp{flex-direction:column}
}
.swapimagewithcta.imageWithRightTextComp .img-wrapper{height:auto;width:auto;display:flex}
@media(min-width:768px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .img-wrapper{max-height:237px}
}
@media(min-width:991px) and (max-width:1200px){.swapimagewithcta.imageWithRightTextComp .img-wrapper{max-height:237px}
}
@media(min-width:1201px) and (max-width:1440px){.swapimagewithcta.imageWithRightTextComp .img-wrapper{height:auto;width:auto}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .img-wrapper{height:100%;width:100%}
}
.swapimagewithcta.imageWithRightTextComp .img-wrapper.img-left img{float:left}
.swapimagewithcta.imageWithRightTextComp .img-wrapper.img-right img{float:right}
.swapimagewithcta.imageWithRightTextComp .img-wrapper img{width:100%;height:100%}
.swapimagewithcta.imageWithRightTextComp .img-wrapper img.bannerMobile{display:none}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .img-wrapper img.bannerMobile{display:block;object-fit:none}
}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp .img-wrapper img.bannerMobile{height:171px}
}
.swapimagewithcta.imageWithRightTextComp .img-wrapper img.bannerDesktop{display:block}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .img-wrapper img.bannerDesktop{display:none}
}
.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-right{padding:50px;background-color:#f8f8f8;width:40%}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-right{padding:22px 20px 30px;margin:0;width:100%}
}
.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-right p{letter-spacing:1px;font-weight:500;font-size:13px;margin-bottom:15px}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-right p{letter-spacing:0;line-height:24px;font-size:12px}
}
.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-right .righttext-subtextOverHeading p{font-weight:700;font-size:13px;font-weight:300;font-style:normal;font-stretch:normal;line-height:1.85;letter-spacing:.5px;color:#222;text-transform:uppercase}
.swapimagewithcta.imageWithRightTextComp .righttext-wrapper.text-align-left{float:left}
.swapimagewithcta.imageWithRightTextComp .righttext-wrapper .righttext-heading h1{font-size:30px;font-weight:700;font-style:normal;font-stretch:normal;line-height:1.13;letter-spacing:normal;color:#222;margin-bottom:15px}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp .righttext-wrapper .righttext-heading h1{font-size:22px;line-height:1.09}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .righttext-wrapper .righttext-heading h1{font-size:22px}
}
.swapimagewithcta.imageWithRightTextComp .righttext-description p{font-size:13px;font-weight:300;font-style:normal;font-stretch:normal;line-height:24px;letter-spacing:.5px;color:#222}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp .righttext-description p{font-size:12px;font-weight:300;line-height:2;letter-spacing:normal}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageWithRightTextComp .righttext-description p{font-size:12px;font-weight:300;line-height:2;letter-spacing:normal}
}
.swapimagewithcta.imageWithRightTextComp .righttext-cta{max-width:167px;margin-bottom:15px;cursor:pointer}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp .righttext-cta{max-width:100%;margin:0 auto;height:40px}
}
@media(min-width:1200px){.swapimagewithcta.imageWithRightTextComp .righttext-cta{margin-bottom:43px}
}
.swapimagewithcta.imageWithRightTextComp .righttext-cta .ctaText{font-size:13px;font-weight:500;font-style:normal;font-stretch:normal;line-height:.92;letter-spacing:1px;text-align:center;color:#fff;width:100%}
.swapimagewithcta.imageWithRightTextComp .righttext-cta .ctaText:hover{color:#5e25b2}
@media(min-width:320px) and (max-width:767px){.swapimagewithcta.imageWithRightTextComp .righttext-cta .ctaText{font-size:11px;font-weight:500;line-height:1.2;letter-spacing:.77px;padding-top:12px;height:100%}
}
.swapimagewithcta.imageWithRightTextComp .righttext-cta .viewAllLink{color:#000;font-size:13px;border-bottom:2px solid #8839ff;text-decoration:none}
@media(min-width:992px){.swapimagewithcta.imageWithRightTextComp.swapimagewithcta-smallImage .img-wrapper{width:37%}
}
@media(min-width:992px){.swapimagewithcta.imageWithRightTextComp.swapimagewithcta-smallImage .righttext-wrapper.text-align-right{padding:18px 40px;width:63%}
}
.swapimagewithcta .righttext-wrapper h2{margin-bottom:10px}
.swapimagewithcta .righttext-wrapper h3{margin-bottom:20px}
.swapimagewithcta .righttext-wrapper h5{font-size:13px}
.swapimagewithcta .ctaComp{margin-top:15px;cursor:pointer !important}
.swapimagewithcta .ctaComp .ctaText{width:auto;cursor:pointer !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta .ctaComp .ctaText{width:100%;font-size:12px;line-height:12px;letter-spacing:.77px}
}
.swapimagewithcta.imageLeftAligned .palleteTitle{margin-bottom:10px}
.swapimagewithcta.imageFullStretch{display:block !important;position:relative}
@media(min-width:992px){.swapimagewithcta.imageFullStretch .img-left{height:700px;width:100%}
}
@media(min-width:992px) and (max-width:1024px){.swapimagewithcta.imageFullStretch .img-left{max-height:500px}
}
.swapimagewithcta.imageFullStretch .righttext-wrapper{position:absolute;z-index:9;background-color:transparent !important;color:#fff}
@media(min-width:992px){.swapimagewithcta.imageFullStretch .righttext-wrapper{right:210px;top:10%;width:25% !important;padding:0 !important}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch .righttext-wrapper{padding:0 58px 0 48px !important;top:58%}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch .righttext-wrapper .ctaRevampYellow{margin-top:25px}
}
@media(min-width:992px){.swapimagewithcta.imageFullStretch .imageFullStretchHeading{font-size:32px}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch .imageFullStretchHeading{font-size:24px}
}
.swapimagewithcta.imageFullStretch.designGuide{background:0}
.swapimagewithcta.imageFullStretch.designGuide .img-left{height:auto;min-height:140px}
.swapimagewithcta.imageFullStretch.designGuide .img-left img{border-radius:8px;background:#fff;height:auto}
@media(min-width:992px){.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right{display:flex;width:100% !important;right:0;justify-content:space-evenly}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right{padding:20px !important;top:5%}
}
.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right .designGuideBannerHeading{font-size:24px;font-weight:800;line-height:28px;margin-bottom:8px;width:70%}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right .designGuideBannerHeading{text-align:center;font-size:20px;line-height:24px;width:100%}
}
.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right .designGuideBannerPara{font-size:14px;line-height:19.6px;opacity:.9}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right .designGuideBannerPara{text-align:center;font-size:12px;font-weight:500;line-height:16.8px}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuide .righttext-wrapper.text-align-right .cta.ctaComp.ctaRevampYellow.section{padding:0 14%;width:100%}
}
.swapimagewithcta.imageFullStretch.designGuide.card-height-280 .img-wrapper.img-left{height:280px !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuide.card-height-280 .img-wrapper.img-left{height:236px !important}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout{border-radius:8px;background:#fff;box-shadow:0 4px 24px 0 rgba(0,0,0,.1)}
.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right{position:unset;width:100% !important;padding:30px !important}
@media(min-width:992px) and (max-width:1024px){.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right{padding-left:20px !important;padding-right:20px !important}
}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .rte.text.section{text-align:center}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .rte.text.section p{color:#000;font-size:20px;font-weight:700;line-height:30px}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .centerAlign,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .leftAlign,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .rightAlign{text-align:center}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .centerAlign a,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .centerAlign a:hover,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .leftAlign a,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .leftAlign a:hover,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .rightAlign a,.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.animated-btn-black .rightAlign a:hover{color:#1e1e1e !important}
.swapimagewithcta.imageFullStretch.designGuideCardLayout .righttext-wrapper.text-align-right .cta.ctaComp{width:fit-content}
@media(min-width:992px) and (max-width:1024px){.swapimagewithcta.imageFullStretch.designGuideCardLayout .img-wrapper.img-left{max-height:fit-content}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout .img-wrapper.img-left img{height:auto;border-top-left-radius:8px;border-top-right-radius:8px}
.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-290 .img-wrapper.img-left{height:290px !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-290 .img-wrapper.img-left{height:275px !important}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-328 .img-wrapper.img-left{height:328px !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-328 .img-wrapper.img-left{height:275px !important}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-428 .img-wrapper.img-left{height:428px !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-428 .img-wrapper.img-left{height:275px !important}
}
.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-552 .img-wrapper.img-left{height:552px !important}
@media(min-width:320px) and (max-width:991px){.swapimagewithcta.imageFullStretch.designGuideCardLayout.card-height-552 .img-wrapper.img-left{height:275px !important}
}
@media(min-width:992px){.design-guide-layout{padding-left:3%;padding-right:3%}
}
@media(min-width:992px){.design-guide-layout .twovariantscolumn .asidediv,.design-guide-layout .twovariantscolumn .contentdiv{padding-right:10px}
}
@media(min-width:992px){.design-guide-layout .colctrlcomp .row{margin-right:-15px;margin-left:-10px}
.design-guide-layout .colctrlcomp .row .col-lg-4.col-md-12{padding-right:10px;padding-left:10px}
}
@media(min-width:992px){.design-guide-layout .designGuideCardLayout{margin-bottom:20px}
}
@media(min-width:320px) and (max-width:991px){.design-guide-layout .designGuideCardLayout{margin-bottom:24px}
}
.design-guide-layout .design-guide-landingHeading{background:linear-gradient(270deg,#f8a12e,#be2a1d 50.07%,#45216c 98.1%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:32px;font-weight:800;line-height:normal;width:fit-content}
.design-guide-layout .designGuide.card-height-280{margin-bottom:20px}
.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right{display:block;text-align:center;top:20%}
@media(min-width:1201px) and (max-width:1440px){.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right{top:10%}
}
@media(min-width:320px) and (max-width:991px){.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right{top:7%}
}
.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right .designGuideBannerHeading{width:100%;padding:0 20px;font-size:32px;line-height:32px}
@media(min-width:320px) and (max-width:991px){.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right .designGuideBannerHeading{font-size:20px;line-height:24px}
}
.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right .designGuideBannerPara{padding:0 20px;font-size:16px;line-height:22.4px}
@media(min-width:320px) and (max-width:991px){.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right .designGuideBannerPara{font-size:12px;font-weight:500;line-height:16.8px}
}
.design-guide-layout .designGuide.card-height-280 .righttext-wrapper.text-align-right .cta.ctaComp{width:100%;padding:0 10px;text-align-last:center}
.design-guide-layout .loadmore-designcard{margin-top:56px}
@media(min-width:320px) and (max-width:991px){.design-guide-layout .loadmore-designcard{margin-top:48px}
}
.design-guide-layout .loadmore-designcard a{color:#1e1e1e !important;padding:14px 20px !important;border:1px solid #1e1e1e !important;font-size:14px !important;font-weight:700 !important;line-height:140% !important}
.design-guide-layout .loadmore-designcard a:hover{border:none !important}
@media(min-width:992px){.blog-details-page-wrapper .swapimagewithcta .righttext-wrapper{padding:0 10px !important}
}
@media(min-width:992px) and (min-width:992px){.blog-details-page-wrapper .swapimagewithcta .righttext-wrapper .rte .designGuideBannerHeading{width:82% !important}
}
@media(min-width:992px) and (min-width:992px){.blog-details-page-wrapper .swapimagewithcta .righttext-wrapper .cta{transform:translateY(22px)}
}
@media(min-width:992px) and (min-width:992px){.blog-details-page-wrapper .swapimagewithcta .righttext-wrapper .cta .animated-arrow-button{white-space:nowrap}
}