.hero-banner__container {
    width: 100%;
    min-height: 28.125rem;
    position: relative;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    overflow: hidden
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__container {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%
    }
}

.hero-banner__background-image-wrapper {
    display: contents
}

.hero-banner__background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.hero-banner__text-container {
    z-index: 5;
    padding: 5vw;
    padding-top:
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__text-container {
        -webkit-transform: none !important;
        transform: none !important;
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }
}

.hero-banner__subtitle-container {
    margin-bottom: .625rem;
    font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-gap: 1.25rem;
    gap: 1.25rem
}

html[lang=cs-CZ] .hero-banner__subtitle-container,
html[lang=cs] .hero-banner__subtitle-container,
html[lang=ja-JP] .hero-banner__subtitle-container,
html[lang=ja] .hero-banner__subtitle-container,
html[lang=ko-KR] .hero-banner__subtitle-container,
html[lang=ko] .hero-banner__subtitle-container,
html[lang=pl-PL] .hero-banner__subtitle-container,
html[lang=pl] .hero-banner__subtitle-container,
html[lang=ru-RU] .hero-banner__subtitle-container,
html[lang=ru] .hero-banner__subtitle-container,
html[lang=tr-TR] .hero-banner__subtitle-container,
html[lang=tr] .hero-banner__subtitle-container,
html[lang=zh-CN] .hero-banner__subtitle-container,
html[lang=zh-TW] .hero-banner__subtitle-container,
html[lang=zh] .hero-banner__subtitle-container {
    font-family: Helvetica Neue, Helvetica, sans-serif;
    font-weight: 500
}

.hero-banner__subtitle-image {
    height: 3.25rem
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__subtitle-image {
        height: 2.25rem
    }
}

.hero-banner__read-time-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    grid-gap: .313rem;
    gap: .313rem
}

.hero-banner__read-time-icon svg {
    position: relative;
    top: .188rem;
    height: 1.25rem
}

.hero-banner__title {
    font-family: BarlowMedium, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    line-height: 3.5rem
}

html[lang=cs-CZ] .hero-banner__title,
html[lang=cs] .hero-banner__title,
html[lang=ja-JP] .hero-banner__title,
html[lang=ja] .hero-banner__title,
html[lang=ko-KR] .hero-banner__title,
html[lang=ko] .hero-banner__title,
html[lang=pl-PL] .hero-banner__title,
html[lang=pl] .hero-banner__title,
html[lang=ru-RU] .hero-banner__title,
html[lang=ru] .hero-banner__title,
html[lang=tr-TR] .hero-banner__title,
html[lang=tr] .hero-banner__title,
html[lang=zh-CN] .hero-banner__title,
html[lang=zh-TW] .hero-banner__title,
html[lang=zh] .hero-banner__title {
    font-family: Helvetica Neue, Helvetica, sans-serif;
    font-weight: 500
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__title {
        font-size: 2rem;
        line-height: 2.5rem
    }
}

.hero-banner__copy-text {
    font-family: BarlowRegular, Arial, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 1rem
}

html[lang=cs-CZ] .hero-banner__copy-text,
html[lang=cs] .hero-banner__copy-text,
html[lang=ja-JP] .hero-banner__copy-text,
html[lang=ja] .hero-banner__copy-text,
html[lang=ko-KR] .hero-banner__copy-text,
html[lang=ko] .hero-banner__copy-text,
html[lang=pl-PL] .hero-banner__copy-text,
html[lang=pl] .hero-banner__copy-text,
html[lang=ru-RU] .hero-banner__copy-text,
html[lang=ru] .hero-banner__copy-text,
html[lang=tr-TR] .hero-banner__copy-text,
html[lang=tr] .hero-banner__copy-text,
html[lang=zh-CN] .hero-banner__copy-text,
html[lang=zh-TW] .hero-banner__copy-text,
html[lang=zh] .hero-banner__copy-text {
    font-family: Helvetica Neue, Helvetica, sans-serif
}

@media only screen and (max-width:48em) {
    .hero-banner__copy-text {
        font-size: 1.25rem;
        line-height: 1.625rem
    }
}

.hero-banner__buttons-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    grid-column-gap: 1.75rem;
    -webkit-column-gap: 1.75rem;
    -moz-column-gap: 1.75rem;
    column-gap: 1.75rem;
    grid-row-gap: .75rem;
    row-gap: .75rem
}

.hero-banner .social-media-sharing {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0
}

@media only screen and (min-width:48.0625em) {
    .hero-banner .social-media-sharing {
        margin-top: 1rem
    }
}

.hero-banner .social-media-sharing .share-label {
    margin-right: .625rem
}

.hero-banner .social-media-sharing .st-custom-button {
    width: 2.5rem
}

.hero-banner .social-media-sharing .st-custom-button svg {
    fill: #2a79c4
}

.hero-banner__media-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__media-container {
        overflow: hidden
    }
}

.hero-banner__media-wrapper {
    z-index: 3;
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
    width: 100%;
    -webkit-clip-path: url(#hero-banner__media-mask);
    clip-path: url(#hero-banner__media-mask)
}

@media only screen and (max-width:63.9375em) {
    .hero-banner__media-wrapper {
        margin-top: 5%;
        margin-bottom: 5%
    }
}

.hero-banner__media-mask-wrapper {
    height: 0
}

.hero-banner__image,
.hero-banner__video {
    display: block;
    max-height: 26.75rem;
    width: 100%;
    aspect-ratio: 2;
    -o-object-fit: cover;
    object-fit: cover
}

.hero-banner__video-button {
    all: unset;
    display: block;
    position: relative;
    width: 100%;
    cursor: pointer
}

.hero-banner__video-button:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 10%;
    height: 100%;
    width: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-image: url(/etc.clientlibs/rockwell-aem-base/clientlibs/clientlib-base/resources/icons/play-static.svg)
}

.hero-banner__video-button:focus:before,
.hero-banner__video-button:hover:before {
    background-image: url(/etc.clientlibs/rockwell-aem-base/clientlibs/clientlib-base/resources/icons/play-hover.svg)
}

.hero-banner__video-dialog {
    width: 60rem;
    padding: 0;
    border: none;
    background: none;
    overflow: visible
}

.hero-banner__video-dialog::-webkit-backdrop {
    background: rgba(24, 24, 27, .92)
}

.hero-banner__video-dialog::backdrop {
    background: rgba(24, 24, 27, .92)
}

.hero-banner__video-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw
}

.hero-banner__video-dialog-form {
    position: absolute;
    right: 0;
    top: -2.5rem
}

.hero-banner__video-dialog-close {
    all: unset;
    cursor: pointer
}

.hero-banner__video-dialog-close svg {
    fill: #fff;
    height: 1.375rem
}

.hero-banner__shards-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%
}

.hero-banner__shards-container svg {
    position: absolute;
    z-index: 2
}

.hero-banner__shards-container-left {
    left: 0;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

.hero-banner__shard-1 {
    height: 50%;
    top: 0;
    right: 0%
}

.hero-banner__shard-2 {
    bottom: -85%;
    left: -10%;
    height: 100%
}

.hero-banner__shard-3 {
    height: 100%;
    left: 10%
}

.hero-banner__shard-4 {
    height: 80%;
    bottom: -10%;
    left: -20%
}

.hero-banner__shard-5 {
    height: 100%;
    bottom: -10%
}

.hero-banner__shard-background {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%
}

.hero-banner__container[data-color=blue-darkblue] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(0, 62, 126, 0) 52.06%, #00aeef 84.77%)
}

.hero-banner__container[data-color=blue-darkblue] .stop1 {
    stop-color: #00aeef
}

.hero-banner__container[data-color=blue-darkblue] .stop2 {
    stop-color: #003e7e
}

.hero-banner__container[data-color=blue-darkblue] .hero-banner__shard-3 path {
    fill: #00aeef
}

.hero-banner__container[data-color=blue-darkblue] .hero-banner__shard-5 path {
    fill: #003e7e
}

.hero-banner__container[data-color=orange-purple] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(119, 0, 86, 0) 52.06%, #770056 84.77%)
}

.hero-banner__container[data-color=orange-purple] .stop1 {
    stop-color: #f58025
}

.hero-banner__container[data-color=orange-purple] .stop2 {
    stop-color: #770056
}

.hero-banner__container[data-color=orange-purple] .hero-banner__shard-3 path {
    fill: #f58025
}

.hero-banner__container[data-color=orange-purple] .hero-banner__shard-5 path {
    fill: #770056
}

.hero-banner__container[data-color=blue-purple] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(119, 0, 86, 0) 52.06%, #770056 84.77%)
}

.hero-banner__container[data-color=blue-purple] .stop1 {
    stop-color: #00aeef
}

.hero-banner__container[data-color=blue-purple] .stop2 {
    stop-color: #770056
}

.hero-banner__container[data-color=blue-purple] .hero-banner__shard-3 path {
    fill: #00aeef
}

.hero-banner__container[data-color=blue-purple] .hero-banner__shard-5 path {
    fill: #770056
}

.hero-banner__container[data-color=red-darkblue] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(0, 62, 126, 0) 52.06%, #003e7e 84.77%)
}

.hero-banner__container[data-color=red-darkblue] .stop1 {
    stop-color: #cd163f
}

.hero-banner__container[data-color=red-darkblue] .stop2 {
    stop-color: #003e7e
}

.hero-banner__container[data-color=red-darkblue] .hero-banner__shard-3 path {
    fill: #cd163f
}

.hero-banner__container[data-color=red-darkblue] .hero-banner__shard-5 path {
    fill: #003e7e
}

.hero-banner__container[data-color=red-orange] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(245, 128, 37, 0) 52.06%, #f58025 84.77%)
}

.hero-banner__container[data-color=red-orange] .stop1 {
    stop-color: #cd163f
}

.hero-banner__container[data-color=red-orange] .stop2 {
    stop-color: #f58025
}

.hero-banner__container[data-color=red-orange] .hero-banner__shard-3 path {
    fill: #cd163f
}

.hero-banner__container[data-color=red-orange] .hero-banner__shard-5 path {
    fill: #f58025
}

.hero-banner__container[data-color=darkblue-blue] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(81, 48, 0, 0) 52.06%, #00aeef 84.77%)
}

.hero-banner__container[data-color=darkblue-blue] .stop1 {
    stop-color: #003e7e
}

.hero-banner__container[data-color=darkblue-blue] .stop2 {
    stop-color: #00aeef
}

.hero-banner__container[data-color=darkblue-blue] .hero-banner__shard-3 path {
    fill: #003e7e
}

.hero-banner__container[data-color=darkblue-blue] .hero-banner__shard-5 path {
    fill: #00aeef
}

.hero-banner__container[data-color=darkblue-purple] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(205, 22, 63, 0) 52.06%, #cd163f 84.77%)
}

.hero-banner__container[data-color=darkblue-purple] .stop1 {
    stop-color: #003e7e
}

.hero-banner__container[data-color=darkblue-purple] .stop2 {
    stop-color: #cd163f
}

.hero-banner__container[data-color=darkblue-purple] .hero-banner__shard-3 path {
    fill: #003e7e
}

.hero-banner__container[data-color=darkblue-purple] .hero-banner__shard-5 path {
    fill: #cd163f
}

.hero-banner__container[data-color=mediumblue-blue] .hero-banner__shard-background {
    background: linear-gradient(101.93deg, rgba(81, 48, 0, 0) 52.06%, #00aeef 84.77%)
}

.hero-banner__container[data-color=mediumblue-blue] .stop1 {
    stop-color: #2a79c4
}

.hero-banner__container[data-color=mediumblue-blue] .stop2 {
    stop-color: #00aeef
}

.hero-banner__container[data-color=mediumblue-blue] .hero-banner__shard-3 path {
    fill: #2a79c4
}

.hero-banner__container[data-color=mediumblue-blue] .hero-banner__shard-5 path {
    fill: #00aeef
}

.hero-banner__container[data-no-media] {
    min-height: 0;
    -ms-grid-columns: 75% 25%;
    grid-template-columns: 75% 25%
}

.hero-banner__container[data-no-media] .hero-banner__media-container {
    overflow: visible
}

@media only screen and (min-width:48.0625em) {
    .hero-banner__container[data-design-variant=default][data-no-media][data-no-shards] .hero-banner__text-container {
        padding-top: 2rem;
        padding-bottom: 3.5rem
    }
}

@media only screen and (min-width:64em) {
    .hero-banner__container[data-shard-overflow] {
        overflow-y: visible;
        overflow-x: clip;
        padding-bottom: 3.75rem
    }

    .hero-banner__container[data-shard-overflow] .hero-banner__shards-container {
        overflow-y: clip;
        height: calc(100% + 7.5rem);
        width: calc(100% + 7.5rem)
    }
}

.hero-banner__container[data-center-aligned] {
    min-height: 0;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%;
    text-align: center
}

.hero-banner__container[data-center-aligned] .hero-banner__text-container {
    padding-left: 15vw;
    padding-right: 15vw
}

@media only screen and (max-width:48em) {
    .hero-banner__container[data-center-aligned] .hero-banner__text-container {
        padding-left: 5%;
        padding-right: 5%
    }
}

.hero-banner__container[data-center-aligned] .hero-banner__buttons-container,
.hero-banner__container[data-center-aligned] .hero-banner__buttons-container>*,
.hero-banner__container[data-center-aligned] .hero-banner__subtitle-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.hero-banner__container[data-center-aligned] .hero-banner__media-container {
    position: absolute;
    width: 100%;
    height: 100%
}

.hero-banner__container[data-center-aligned] .hero-banner__shards-container {
    width: 15%
}

.hero-banner__container[data-large-height] {
    min-height: 75vh
}

.hero-banner__container[data-design-variant=investor-relations] .hero-banner__media-container,
.hero-banner__container[data-design-variant=tools] .hero-banner__media-container {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end
}

.hero-banner__container[data-design-variant=investor-relations] .hero-banner__media-wrapper,
.hero-banner__container[data-design-variant=tools] .hero-banner__media-wrapper {
    margin: 3.125rem 15% 0;
    -webkit-clip-path: none;
    clip-path: none
}

@media only screen and (max-width:63.9375em) {

    .hero-banner__container[data-design-variant=investor-relations] .hero-banner__media-wrapper,
    .hero-banner__container[data-design-variant=tools] .hero-banner__media-wrapper {
        margin-top: 5%
    }
}

.hero-banner__container[data-design-variant=investor-relations] .hero-banner__image,
.hero-banner__container[data-design-variant=tools] .hero-banner__image {
    max-height: none;
    aspect-ratio: unset
}

.hero-banner__container[data-design-variant=investor-relations][data-center-aligned] .hero-banner__text-container,
.hero-banner__container[data-design-variant=tools][data-center-aligned] .hero-banner__text-container {
    padding-left: 5%;
    padding-right: 5%
}

.hero-banner__container[data-design-variant=tools] {
    color: #fff
}

.hero-banner__container[data-design-variant=tools] .hero-banner__background-image {
    -webkit-filter: brightness(.3);
    filter: brightness(.3)
}

.hero-banner__container[data-design-variant=tools] .hero-banner__read-time-icon svg,
.hero-banner__container[data-design-variant=tools] .social-media-sharing .st-custom-button svg {
    fill: #fff
}

.hero-banner__container[data-design-variant=tools][data-no-media] {
    -ms-grid-columns: 100%;
    grid-template-columns: 100%
}

.hero-banner__container[data-design-variant=investor-relations][data-no-media]:not([data-center-aligned]) {
    -ms-grid-columns: 50%;
    grid-template-columns: 50%
}

@media only screen and (max-width:48em) {
    .hero-banner__container[data-design-variant=investor-relations][data-no-media]:not([data-center-aligned]) {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%
    }

    .hero-banner__container[data-design-variant=investor-relations][data-no-media]:not([data-center-aligned]) .hero-banner__background-image {
        position: relative
    }
}


.hero-banner__container {background: -webkit-linear-gradient(-45deg, #f58025 2%, #cd163f 51%, #770056 98%);}
.hero-banner__container[data-color=red-orange] .hero-banner__shards-container .stop1 {stop-color: #770056;}
.hero-banner__container[data-color=red-orange] .hero-banner__shards-container .stop2 {stop-color: #f58025;}
.hero-banner__container[data-color=red-orange] .hero-banner__shards-container .hero-banner__shard-3 path {fill: #770056;}
  /****** HERO BANNER ******/
.hero-banner__container {border-bottom-right-radius: 250px;color: #fff;}
.hero-banner__container[data-color=red-orange] .hero-banner__shards-container .hero-banner__shard-background {display: none;}
.hero-banner__container::before {content: ' ';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.15;background-image: url(https://rockwellautomation.scene7.com/is/image/rockwellautomation/1330x888-backTexture-af2023-white.1280.jpg);background-position: 50% 0;background-size: cover;background-blend-mode: soft-light;mix-blend-mode: soft-light;}
.hero-banner__container[data-large-height]::before {background-size: contain;}
.hero-banner__container::after {content: '';display: block;position: absolute;left: 0;top: -15%;width: 100%;height: 130%;background-image: url(https://rockwellautomation.scene7.com/is/image/rockwellautomation/922x1261-backTexture-af2023-d-grey.1280.png);background-position: 50% 0;background-repeat: no-repeat;background-size: contain;background-blend-mode: soft-light;mix-blend-mode: soft-light;}
h1.hero-banner__title {font-family: BarlowBold,Arial,Helvetica Neue,Helvetica,sans-serif;font-size:4rem;font-weight: 400;line-height:4rem;color:#fff;text-align:left !important;margin:0;}
.hero-banner__subtitle-text {font-size: 3rem;line-height: 3rem;text-transform: initial;}
.hero-banner .hero-banner__container[data-large-height] .hero-banner__subtitle-image {height: 12rem;}
.hero-banner .hero-banner__container .hero-banner__subtitle-image {height: 3rem; filter: brightness(0) invert(1);}
.hero-banner__container[data-large-height] .hero-banner__copy-text {margin: 0 0 1rem 0;}
.hero-banner__container .hero-banner__copy-text {margin: 1rem 0;}
.hero-banner .hero-banner__container[data-large-height] .hero-banner__media-wrapper {transform: scale(1.25);}
.hero-banner .hero-banner__shard-4,
.hero-banner .hero-banner__shard-5 {display: none;}
@media only screen and (max-width: 1023px) {
     h1.hero-banner__title{font-size:3rem;line-height:3rem;}
     .hero-banner .hero-banner__container .hero-banner__subtitle-image {height: 2rem;}
     .hero-banner__container {border-bottom-right-radius: 125px;}
}
@media only screen and (max-width: 767px) {
    .hero-banner__container[data-no-media] {-ms-grid-columns: 100% 0%;grid-template-columns: 100% 0%;}
    .hero-banner .hero-banner__container[data-center-aligned] .hero-banner__subtitle-image, 
    .hero-banner .hero-banner__container[data-no-media] .hero-banner__subtitle-image {height: 2rem;}
}
  .hero-banner__text-container{padding-top:50px;padding-bottom:35px;}