/* CSS */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}


body {
    line-height: 1;
    overflow: hidden;
    font-family: NewHelvetica;
}

.full-body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    background-color: black;
    height: 1080px;
    opacity: 0;
    /* Here we set body to 0, then 1 on main function to add a smooth fadein */
}

/* First Screen CSS */

#main-wrapper {
    position: relative;
    overflow: hidden;
    width: 2143px;
    height: 1206px;
    background-image: url('../images/Menu/bkgnd-01.png');
    background-size: 2143PX 1206px;
    transform-origin: top left;
    z-index: 0;
}

/* Footer Styles */

footer {
    position: absolute;
    transition: 2s;
    z-index: 999;
    opacity: .8;
    bottom: 40px;
}

#copy-text {
    left: 33px;
    width: 358px;
    text-align: center;
    font: normal normal normal 20px/28px HelveticaNeueLt;
    letter-spacing: 0;
    color: #FFFFFF;
    position: absolute;
    z-index: 3;
    opacity: .8;
}

.opacityZero {
    opacity: 0 !important;
}

.opacityOne {
    opacity: 1 !important;
}

.transition {
    transition: 1.5s all ease-in-out;
}

.transition-fast {
    transition: 1s all ease-in-out;
}

.transition-slow {
    transition: 2s all ease-in-out;
}

.transition-menu {
    transition: 1.5s all ease;
}

.opacityZeroDiv {
    /* animation-name: opacityZeroAnim;
    animation-duration:1.5s; */
    opacity: 0;
    transition: 1.5s all ease-in-out;
}
.opacityHighDiv{
    animation-name: opacityZeroAnim;
    animation-duration:1.5s;
}
@keyframes opacityZeroAnim {
    from{ opacity: 0;}
    to {
        opacity: 1;
    }
}

/** Navigation **/

a {
    cursor: pointer;
}

/*  Menu */
/* Left */

#left-menu .container {
    top: 488px;
    left: -8px;
    width: 178px;
    height: 141px;
    background: transparent url('../images/Menu/nav-left.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 99;
}

#left-menu .home {
    top: 494px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#left-menu .up {
    top: 494px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#left-menu .left {
    top: 562px;
    left: 19px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#left-menu .right {
    top: 562px;
    left: 85px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

/* Right */

#right-menu .container {
    top: 488px;
    right: 0px;
    width: 178px;
    height: 141px;
    background: transparent url('../images/Menu/nav-right.png') 0% 0% no-repeat padding-box;
    position: absolute;
    z-index: 99;
}

#right-menu .home {
    top: 494px;
    right: 93px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#right-menu .up {
    top: 494px;
    right: 28px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#right-menu .left {
    top: 562px;
    right: 93px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

#right-menu .right {
    top: 562px;
    right: 28px;
    width: 61px;
    height: 61px;
    position: absolute;
    z-index: 999;
    cursor: pointer;
}

.right-retract {
    right: -156px !important;
}

.left-retract {
    left: -157px !important;
}

.menu-list-left {
    position: absolute;
    height: 30em;
    width: 17em;
    color: white;
    top: 489px;
    left: 186px;
    opacity: 1;
    padding: 1.5em;
    background: transparent url('../images/Menu/menu-box-01.png') 0% 0% no-repeat padding-box;
    display: none;
    z-index: 9;
}

.menu-list-right {
    position: absolute;
    height: 30em;
    width: 17em;
    color: white;
    top: 489px;
    right: 186px;
    opacity: 1;
    padding: 1.5em;
    background: transparent url('../images/Menu/menu-box-01.png') 0% 0% no-repeat padding-box;
    display: none;
    z-index: 9;
}
.menu-list ol{
    list-style: none;
    padding-bottom: 1.5em;
}
.menu-list ol li{
    line-height: 37px !important;
    font: normal normal normal 20px/45px NewHelvetica;
    cursor: pointer;
}
.menu-list ol li.list-header{
    color:#d9d7bb;
    line-height: 20px!important;
    font-size: 15px;
}

.show {
    display: block !important;
    transition: 1.5s all ease-in-out;
}

.hide {
    display: none !important;
    transition: 1.5s all ease-in-out;
}

/* Landing page styles */

video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: -100;
    background: url('../images/Menu/bkgnd-01.png') no-repeat;
    background-size: cover;
}

video#bgVideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    flex: 1;
    z-index: -100;
    transform: translate(-50%, -50%);
    background: url('../images/Menu/BKGND-Video_PosterImage.png') no-repeat;
    background-size: cover;
    opacity: 40%;
    /* transition: 1s opacity; */
}

#landing-logo {
    background: transparent url('../images/Home/GRAPHIC-i-40-circle.png') no-repeat;
    background-size: 46em;
    position: fixed;
    right: 293px;
    top: 172px;
    height: 46em;
    width: 46em;
    cursor: pointer;
}

#landing-inner-logo {
    background: transparent url('../images/Home/GRAPHIC-i-40-logo.png') no-repeat;
    background-size: 27em;
    position: fixed;
    top: 453px;
    right: 455px;
    height: 13em;
    width: 27em;
}

#bg {
    cursor: pointer;
}

/* Main Menu styles */

.main-menu .menuTop-Div {
    background: transparent url('../images/Main_Menu/PHOTO-menu-top.png') 0% 0% no-repeat padding-box;
    height: 31em;
    position: absolute;
    width: 100%;
    background-size: 134em;
}

.main-menu .menuMid-Div {
    height: 18em;
    position: absolute;
    width: 100%;
    top: 27em;
    padding: 2em 0;
    display: flex;
    justify-content: center;
}

.main-menu .menuMid-Div .smartFact {
    background: transparent url('../images/Main_Menu/button-smart-factory.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
    cursor: pointer;
}

.main-menu .menuMid-Div .custExcel {
    background: transparent url('../images/Main_Menu/button-customer-exceloence.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}

.main-menu .menuMid-Div .workTrans {
    background: transparent url('../images/Main_Menu/button-workforce-transformation.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}

.main-menu .menuMid-Div .resilientChain {
    background: transparent url('../images/Main_Menu/button-resilient-supply-chain.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}

.main-menu .menuMid-Div .sustainability {
    background: transparent url('../images/Main_Menu/button-sustainability.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}
.main-menu .menuMid-Div .smartAst {
    background: transparent url('../images/Main_Menu/button-smart-assets-porducts.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}
.main-menu .menuMid-Div .ecoDigital {
    background: transparent url('../images/Main_Menu/buttons-ecosystems-models.png') 0% 0% no-repeat padding-box;
    background-size: 15.5em;
    height: 16em;
    width: 16em;
    margin-right:5px;
    z-index: 1;
    position: relative;
}
.main-menu .smartFact-button-text {
    color: #535353;
    text-align: center;
    font-size:17px;
    letter-spacing: 0px;
    width: 8.3em;
    font-weight: 1000;
    left: 211px;
    z-index: 1;
    top: 8.4em;
    position: absolute;
    cursor: pointer;
    animation-name: zoomin;
    animation-duration: 1.5s;
}

.main-menu .custExcel-button-text {
    color: #535353;
    text-align: center;
    letter-spacing: 0px;
    width: 9.3em;
    font-weight: 1000;
    position: absolute;
    left: 463px;
    top: 8.4em;
    font-size: 17px;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}

.main-menu .workTrans-button-text {
    color: #535353;
    text-align: center;
    font-size:16px;
    letter-spacing: 0px;
    width: 9.3em;
    font-weight: 1000;
    top: 8.8em;
    left: 728px;
    position: absolute;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}

.main-menu .resilientChain-button-text {
    color: #535353;
    text-align: center;
    font-size:17px;
    letter-spacing: 0px;
    width: 8.3em;
    font-weight: 1000;
    top: 8.4em;
    left: 998px;
    position: absolute;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}

.main-menu .sustainability-button-text {
    color: #535353;
    text-align: center;
    font-size:17px;
    letter-spacing: 0px;
    width: 9.3em;
    font-weight: 1000;
    top: 8.5em;
    right: 735px;
    position: absolute;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}
.main-menu .smartAst-button-text {
    color: #535353;
    text-align: center;
    font-size:17px;
    letter-spacing: 0px;
    width: 9.3em;
    font-weight: 1000;
    top: 8.4em;
    right: 475px;
    position: absolute;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}
.main-menu .ecoDigital-button-text {
    color: #535353;
    text-align: center;
    font-size:17px;
    letter-spacing: 0px;
    width: 9.3em;
    font-weight: 1000;
    top: 7.6em;
    right: 213px;
    position: absolute;
    z-index: 1;
    animation-name: zoomin;
    animation-duration: 1.5s;
}
.main-menu .menuBotm-Div {
    background: transparent url('../images/Main_Menu/PHOTO-menu-bottom.png') 0% 0% no-repeat padding-box;
    position: absolute;
    top: 42.6em;
    height: 39em;
    background-size: 136em;
    width: 100%;
}

.main-menu .industry-Logo {
    background: transparent url('../images/Main_Menu/LOGO-Industry-4.0.png') 0% 0% no-repeat padding-box;
    position: absolute;
    top: 47.5em;
    height: 19em;
    background-size: 33.5em;
    width: 100%;
    background-position: center;
}

.zoomInDropDownDiv {
    animation-name: zoomInDropDown;
    animation-duration: 2s;
}

@keyframes zoomInDropDown {
    0% {
        top: 23.5em;
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    70% {
        top: 23.5em;
        opacity: 1;
        transform: scale3d(1.3, 1.3, 1.3);
    }
}

.SlidefromTopDiv {
    animation-name: SlidefromTop;
    animation-duration: 1.5s;
}

@keyframes SlidefromTop {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.SlidefromDownDiv {
    animation-name: SlidefromDown;
    animation-duration: 2s;
}

@keyframes SlidefromDown {
    0% {
        transform: translateY(+100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.rotateZoomdiv {
    animation-name: rotateZoomIn;
    animation-duration: 2s;
}

@keyframes rotateZoomIn {
    0% {
        transform: rotate(-250deg) scale3d(.3, .3, .3);
        opacity: 0
    }

    50% {
        transform: scale3d(1, 1, 1);
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateZoomHidediv {
    animation-name: rotateZoomHide;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes rotateZoomHide {
    0% {
        transform:  scale3d(1, 1, 1);
        opacity: 1;
    }

    to {
        transform:rotate(90deg) scale3d(1.3, 1.3, 1.3);
        opacity: 1;
    }

    /* 100% {
        transform: translateZ(0) scale3d(1.3, 1.3, 1.3);
        opacity: 1;
    } */
}
.ZoomTextHidediv {
    animation-name: ZoomTextHide !important;
    animation-duration: 3s !important;
    animation-fill-mode: forwards;
}

@keyframes ZoomTextHide {
    0% {
        transform:scale3d(1, 1, 1);
        opacity: 1;
    }

    70% {
        transform:scale3d(1.3, 1.3, 1.3);
        opacity: 1;
    }

    100% {
        transform:scale3d(1.3, 1.3, 1.3);
        opacity: 1;
    }
}

@keyframes zoomin {
    0% {
        transform: scale3d(.3, .3, .3);
        opacity: 0
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}

/* Plant-of-smart styles */
.plant-of-smart .plant-fact-div {
    display: flex;
}

.plant-of-smart .plant-fact-div .photo-fact-img {
    background: transparent url('../images/Connected_Factory/PHOTO-factory-of-future.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 75%;
    background-size: 101em;
    cursor: pointer;
}

.plant-of-smart .plant-fact-div .photo-fact-line {
    background: transparent url('../images/Connected_Factory/LINE-vertical-glow.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 6%;
    right: 460px;
    background-size: 6em;
}

.plant-of-smart .plant-header {
    background: transparent url('../images/Connected_Factory/HEADER-enabling-smart-factory.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 59.5%;
    height: 8em;
    background-size: 78em;
    right: 0px;
    top: 17px;
}

.plant-of-smart .plant-icon {
    background: transparent url('../images/Connected_Factory/ICON-CIRCLE.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 9%;
    height: 12em;
    background-size: 10em;
    right: 424px;
    top: 186px;
}

.plant-of-smart .plant-vision {
    background: transparent url('../images/Connected_Factory/ICON-vision.png') 0% 0% no-repeat padding-box;
    width: 48%;
    height: 5em;
    background-size: 5em;
    margin-left: 2em;
    margin-top: 2.8em;
}

.plant-of-smart .plant-circle-logo {
    background: transparent url('../images/Connected_Factory/LOGO-I-40-circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 16%;
    height: 22em;
    background-size: 22em;
    right: 110px;
    top: 754px;
}

.plant-of-smart .plant-fact-text {
    letter-spacing: 0px;
    color: #FAF8D7;
    position: absolute;
    width:7em;
    top: 182px;
    left: 1755px;
    /* font: normal normal 40px/35px HelveticaNeueLt; */
    line-height: 1em;
    font-style: normal;
    font-family: HelveticaNeueLt;
    font-size: 40px;
    line-height: 48px;     
    cursor:pointer;
}

.plant-of-smart .plant-fact-text div {
    font: normal normal normal 35px/35px HelveticaNeueLt;
    height: 3em;
}

.slidefromLeftDiv {
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

@keyframes slidefromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
    }
}

.slidefromRightDiv {
    animation-name: slidefromRight;
    animation-duration: 2s;
}

@keyframes slidefromRight {
    from {
        transform: translateX(+100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
    }
}

.rotateInDowndiv {
    animation-name: rotateInDown;
    animation-duration: 2.5s;
}

@keyframes rotateInDown {
    0% {
        top: 400px;
        transform: rotate(+260deg) scale3d(.2, .2, .2) translateY(-100%);
        opacity: 0;
    }

    70% {
        top: 400px;
        transform: scale3d(.8, .8, .8);
        opacity: 1;
    }

    100% {
        transform: scale3d(1, 1, 1) translateY(0);
    }
}

.rotateOutdiv {
    animation-name: rotateOut;
    animation-duration: 2s;
    animation-delay: -1s
}

@keyframes rotateOut {
    100% {
        transform: rotate(-360deg);
    }
}

/* Plant automation styles */
.plant-technohandler .plant-tech-div {
    display: flex;
}

.plant-technohandler .plant-tech-div .photo-tech-img {
    background: transparent url('../images/Connected_Factory/PHOTO-plant-automation.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 75%;
    background-size: 101em;
    cursor: pointer;
}

.plant-technohandler .plant-tech-div .photo-tech-line {
    background: transparent url('../images/Connected_Factory/LINE-vertical-glow.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 6%;
    right: 460px;
    background-size: 6em;
}

.plant-technohandler .plant-tech-header {
    background: transparent url('../images/Connected_Factory/HEADER-Technology-Enablers.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 38.5%;
    height: 8em;
    background-size: 48em;
    right: 0px;
    top: 17px;
}

.plant-technohandler .plant-tech-icon {
    background: transparent url('../images/Connected_Factory/ICON-CIRCLE.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 9%;
    height: 12em;
    background-size: 10em;
    right: 424px;
    top: 186px;
}

.plant-technohandler .plant-tech-vision {
    background: transparent url('../images/Connected_Factory/ICON-plant-automation.png') 0% 0% no-repeat padding-box;
    width: 48%;
    height: 6em;
    background-size: 3.5em;
    margin-left: 3em;
    margin-top: 2.4em;
}

.plant-technohandler .plant-tech-circle-logo {
    background: transparent url('../images/Connected_Factory/LOGO-I-40-circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 16%;
    height: 22em;
    background-size: 22em;
    right: 110px;
    top: 754px;
}

.plant-technohandler .plant-tech-text {
    letter-spacing: 0px;
    color: #FAF8D7;
    position: absolute;
    width: 20em;
    top: 158px;
    right: 109px;
    font: normal normal normal 24px/29px Helvetica Neue;
}

.plant-technohandler .plant-tech-text div {
    font: normal normal normal 28px/30px HelveticaNeueLt;
    height: 1.8em;
}

.SlideLinetoLeftDiv {
    animation: SlideLinetoLeft;
    animation-duration: 3s;
}

@keyframes SlideLinetoLeft {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(-4000%);
        opacity: 0;
    }
}

/* Plant design styles */
.plant-design .plant-design-div {
    display: flex;
}

.plant-design .plant-design-div .photo-design-img {
    background: transparent url('../images/Connected_Factory/PHOTO-plant-design.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 75%;
    background-size: 101em;
    cursor: pointer;
    right: 0px;
}

.plant-design .plant-design-div .photo-design-line {
    background: transparent url('../images/Connected_Factory/LINE-vertical-glow.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 5%;
    left: 492px;
    z-index: 1;
    background-size: 6em;
}

.plant-design .plant-design-header {
    background: transparent url('../images/Connected_Factory/HEADER-plant-design.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 55.9%;
    height: 8em;
    background-size: 30em;
    left: 51px;
    top: 17px;
    z-index: 1;
}

.plant-design .plant-design-icon {
    background: transparent url('../images/Connected_Factory/ICON-CIRCLE-LEFT.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 9%;
    height: 12em;
    background-size: 10em;
    left: 454px;
    top: 186px;
    z-index: 9;
}

.plant-design .plant-design-vision {
    background: transparent url('../images/Connected_Factory/ICON-plant-design.png') 0% 0% no-repeat padding-box;
    width: 48%;
    height: 6em;
    background-size: 5em;
    margin-left: 2.5em;
    margin-top: 2.4em;
}

.plant-design .plant-design-circle-logo {
    background: transparent url('../images/Connected_Factory/LOGO-I-40-circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 15%;
    height: 22em;
    background-size: 22em;
    left: 87px;
    top: 754px;
}

.plant-design .plant-design-text {
    letter-spacing: 0px;
    color: #FAF8D7;
    position: absolute;
    width: 20em;
    top: 182px;
    left: 157px;
}

.plant-design .plant-design-text div {
    font: normal normal normal 29px/27px HelveticaNeueLt;
    height: 2em;
}

.SlideLinetoRightDiv {
    animation: SlideLinetoRight;
    animation-duration: 3s;
}

@keyframes SlideLinetoRight {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(+4000%);
        opacity: 0;
    }
}

.rotateIndiv {
    animation-name: rotateIn;
    animation-duration: 2s;
    animation-delay: -1s
}

@keyframes rotateIn {
    100% {
        transform: rotate(-360deg);
    }
}

/* Plant business styles */
.plant-business .plant-busin-div {
    display: flex;
}

.plant-business .plant-busin-div .photo-busin-img {
    background: transparent url('../images/Connected_Factory/PHOTO-plant-business.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 75%;
    background-size: 101em;
    right: 0px;
}

.plant-business .plant-busin-div .photo-busin-line {
    background: transparent url('../images/Connected_Factory/LINE-vertical-glow.png') 0% 0% no-repeat padding-box;
    position: absolute;
    height: 1206px;
    width: 5%;
    left: 492px;
    z-index: 1;
    background-size: 6em;
}

.plant-business .plant-busin-header {
    background: transparent url('../images/Connected_Factory/HEADER-Plant-Focus-Areas.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 55.9%;
    height: 8em;
    background-size: 44.5em;
    left: 36px;
    top: 17px;
    z-index: 9;
}

.plant-business .plant-busin-icon {
    background: transparent url('../images/Connected_Factory/ICON-CIRCLE-LEFT.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 9%;
    height: 12em;
    background-size: 10em;
    left: 454px;
    top: 186px;
    z-index: 9;
}

.plant-business .plant-busin-vision {
    background: transparent url('../images/Connected_Factory/ICON-plant-business.png') 0% 0% no-repeat padding-box;
    width: 60%;
    height: 6em;
    background-size: 6em;
    margin-left: 2.5em;
    margin-top: 2.5em;
}

.plant-business .plant-busin-circle-logo {
    background: transparent url('../images/Connected_Factory/LOGO-I-40-circle-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 15%;
    height: 22em;
    background-size: 22em;
    left: 87px;
    top: 754px;
}

.plant-business .plant-busin-text {
    letter-spacing: 0px;
    color: #FAF8D7;
    position: absolute;
    width: 25.6em;
    top: 182px;
    left: 122px;
    font: normal normal normal 28px/29px HelveticaNeueLt;
}

.plant-business .plant-busin-text div {
    font: normal normal normal 28px/31px HelveticaNeueLt;
    height: 2em;
}

/* Trends and Implication Styles  */
.trend-implication .trends-photo {
    position: absolute;
    background: transparent url('../images/Trends_Implications/PHOTO-trends.png') 0% 0% no-repeat;
    width: 100%;
    height: 100%;
    background-size: 73em;
    opacity: 0.6;
    transition: 1.5s all ease-in-out;
}

.trend-implication .trends-bar {
    position: absolute;
    background: transparent url('../images/Trends_Implications/OVAL-trends.png') 0% 0% no-repeat;
    top: 490px;
    left: 384px;
    width: 867px;
    height: 240px;
    background-size: 45em;
    cursor: pointer;
    transition: 2s all ease-in-out;
}

.trend-implication .trends-bar .trend-header {
    position: absolute;
    background: transparent url('../images/Trends_Implications/HEADER-trends.png') 0% 0% no-repeat;
    top: 73px;
    left: 200px;
    width: 411px;
    height: 79px;
    background-size: 14em;
    z-index: 9;
    transition: 1.5s all ease-in-out;
}

.trend-implication .trend-industry-logo {
    position: absolute;
    background: transparent url('../images/Trends_Implications/LOGO-I-40-circle.png') 0% 0% no-repeat;
    top: 393px;
    left: 892px;
    width: 370px;
    height: 382px;
    z-index: 9;
    background-size: 24em;
    transition: 2s all ease-in-out;
}

.trend-implication .implication-bar {
    position: absolute;
    background: transparent url('../images/Trends_Implications/OVAL-implications.png') 0% 0% no-repeat;
    right: 230px;
    width: 867px;
    height: 240px;
    top: 493px;
    background-size: 45em;
    cursor: pointer;
    z-index: 1;
    transition: 2s all ease-in-out;
}

.trend-implication .implication-bar .implication-header {
    position: absolute;
    background: transparent url('../images/Trends_Implications/HEADER-implications.png') 0% 0% no-repeat;
    top: 68px;
    left: 244px;
    width: 411px;
    height: 79px;
    background-size: 24em;
    z-index: 9;
    transition: 1.5s all ease-in-out;
}

.trend-implication .implication-photo {
    position: absolute;
    background: transparent url('../images/Trends_Implications/PHOTO-implications.png') 0% 0% no-repeat;
    width: 55%;
    height: 105%;
    background-size: 74em;
    opacity: 0.6;
    right: -44px;
    top: -3px;
    transition: 1.5s all ease-in-out;
}

.trend-implication.trendView .trends-photo {
    transition: 2s all ease-in-out;
    ;
    opacity: 1 !important;
}

.trend-implication.trendView .trends-bar {
    top: 512px !important;
    left: 224px !important;
    width: 638px !important;
    height: 181px !important;
    cursor: none !important;
    background-size: 40em !important;
    transition: 1.5s all ease-in-out;
}

.trend-implication.trendView .trends-bar .trend-header {
    top: 64px !important;
    left: 260px !important;
    width: 215px !important;
    height: 79px !important;
    background-size: 13em !important;
    transition: 1.5s all ease-in-out;
}

.trend-implication.trendView .trend-industry-logo {
    top: 442px !important;
    left: 153px !important;
    width: 298px !important;
    height: 301px !important;
    cursor: pointer !important;
    background-size: 20em !important;
    transition: 1.5s all ease-in-out;
}

.trend-implication.trendView .implication-bar {
    opacity: 0 !important;
    pointer-events: none;
    transition: 1s all ease-in-out;
}

.trend-implication.trendView .implication-bar .implication-header {
    opacity: 0 !important;
    transition: 1s all ease-in-out;
}

.trend-implication.implicatView .trends-bar {
    opacity: 0 !important;
    pointer-events: none;
    transition: 1s all ease-in-out;
}

.trend-implication.implicatView .trends-bar .trend-header {
    opacity: 0 !important;
    transition: 1s all ease-in-out;
}

.trend-implication.implicatView .trend-industry-logo {
    top: 442px !important;
    left: 1712px !important;
    width: 298px !important;
    height: 301px !important;
    cursor: pointer !important;
    background-size: 20em !important;
    transition: 1s all ease-in-out;
}

.trend-implication.implicatView .implication-bar {
    right: -32px;
    width: 867px;
    height: 240px;
    top: 523px;
    background-size: 37em;
    cursor: unset !important;
    transition: 1.5s all ease-in-out;
}

.trend-implication.implicatView .implication-bar .implication-header {
    top: 54px;
    left: 96px;
    width: 328px;
    height: 79px;
    background-size: 20em;
    transition: 1.5s all ease-in-out;
}

.trend-implication.implicatView .implication-photo {
    opacity: 1 !important;
    transition: 1.5s all ease-in-out;
}

.trend-implication .trend-content {
    width: 51%;
    position: absolute;
    right: 0;
    height: 854px;
    top: 143px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.trend-implication .trend-content .trend-div1,
.trend-implication .trend-content .trend-div2,
.trend-implication .trend-content .trend-div3,
.trend-implication .trend-content .trend-div4,
.trend-implication .trend-content .trend-div5 {
    display: flex;
    height: 10em;
}

.trend-implication .trend-content .trend-div2 {
    margin-left: 3.8em;
}

.trend-implication .trend-content .trend-div3 {
    margin-left: 7.4em;
}

.trend-implication .trend-content .trend-div4 {
    margin-left: 11em;
}

.trend-implication .trend-content .trend-div5 {
    margin-left: 14.5em;
}

.trend-implication .trend-content .trend-div1 .trend-circle1 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-88.png') 0% 0% no-repeat;
    background-size: 9em;
    height: 9em;
    width: 9em;
    animation-name: rotateClk;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div1 .trend-perc1 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/88-percent.png') 0% 0% no-repeat;
    background-size: 5em;
    height: 5em;
    width: 7em;
    margin-top: 45px;
    margin-left: 37px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div2 .trend-circle2 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-56.png') 0% 0% no-repeat;
    background-size: 9em;
    height: 9em;
    width: 9em;
    animation-name: rotateClk;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div2 .trend-perc2 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/56-percent.png') 0% 0% no-repeat;
    background-size: 5em;
    height: 5em;
    width: 7em;
    margin-top: 45px;
    margin-left: 37px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div3 .trend-circle3 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-79.png') 0% 0% no-repeat;
    background-size: 9em;
    height: 9em;
    width: 9em;
    animation-name: rotateClk;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div3 .trend-perc3 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/79-percent.png') 0% 0% no-repeat;
    background-size: 5em;
    height: 5em;
    width: 7em;
    margin-top: 45px;
    margin-left: 37px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div4 .trend-circle4 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-39.png') 0% 0% no-repeat;
    background-size: 9em;
    height: 9em;
    width: 9em;
    animation-name: rotateClk;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div4 .trend-perc4 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/39-percent.png') 0% 0% no-repeat;
    background-size: 5em;
    height: 5em;
    width: 7em;
    margin-top: 45px;
    margin-left: 37px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div5 .trend-circle5 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-70.png') 0% 0% no-repeat;
    background-size: 9em;
    height: 9em;
    width: 9em;
    animation-name: rotateClk;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div5 .trend-perc5 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/70-percent.png') 0% 0% no-repeat;
    background-size: 5em;
    height: 5em;
    width: 7em;
    margin-top: 45px;
    margin-left: 37px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .trend-content .trend-div1 .trend-text1,
.trend-implication .trend-content .trend-div2 .trend-text2,
.trend-implication .trend-content .trend-div3 .trend-text3,
.trend-implication .trend-content .trend-div4 .trend-text4,
.trend-implication .trend-content .trend-div5 .trend-text5 {
    color: #F9F7D1;
    font: normal normal normal 24px/29px HelveticaNeueLt;
    position: absolute;
    width: 18em;
    margin-left: 9em;
    height: 6em;
    padding-top: 33px;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.trendSources{
    color:#FFFFFF;
    font: normal normal normal 10px HelveticaNeueLt;
    position: absolute;
    width: 22em;
    margin-left: 65em;
    height: 6em;
    padding-top: 900px;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.trend-implication .implication-content {
    width: 36%;
    position: absolute;
    height: 910px;
    left: 248px;
    top: 124px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.trend-implication .implication-content .implication-div1,
.trend-implication .implication-content .implication-div2,
.trend-implication .implication-content .implication-div3,
.trend-implication .implication-content .implication-div4 {
    display: flex;
    height: 10em;
}

.trend-implication .implication-content .implication-div2 {
    margin-left: 3.2em;
}

.trend-implication .implication-content .implication-div3 {
    margin-left: 6.8em;
}

.trend-implication .implication-content .implication-div4 {
    margin-left: 10.2em;
}

.trend-implication .implication-content .implication-div1 .implication-circle1 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-30-50.png') 0% 0% no-repeat;
    background-size: 11em;
    height: 11em;
    width: 11em;
    animation-name: rotateClk;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
.trend-implication .implication-content .implication-div1 .implication-perc1 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/30-50-percent.png') 0% 0% no-repeat;
    background-size: 6em;
    height: 6em;
    width: 6em;
    margin-top: 46px;
    margin-left: 39px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .implication-content .implication-div2 .implication-circle2 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-60.png') 0% 0% no-repeat;
    background-size: 11em;
    height: 11em;
    width: 11em;
    animation-name: rotateClk;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
.trend-implication .implication-content .implication-div2 .implication-perc2 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/60-percent.png') 0% 0% no-repeat;
    background-size: 5.5em;
    height: 6em;
    width: 6em;
    margin-top: 57px;
    margin-left: 54px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .implication-content .implication-div3 .implication-circle3 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-122.png') 0% 0% no-repeat;
    background-size: 11em;
    height: 11em;
    width: 11em;
    animation-name: rotateClk;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
.trend-implication .implication-content .implication-div3 .implication-perc3 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/122-percent.png') 0% 0% no-repeat;
    background-size: 6em;
    height: 6em;
    width: 6em;
    margin-top: 61px;
    margin-left: 48px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .implication-content .implication-div4 .implication-circle4 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/CIRCLE-55.png') 0% 0% no-repeat;
    background-size: 11em;
    height: 11em;
    width: 11em;
    animation-name: rotateClk;
    animation-duration: 2s;
    animation-iteration-count: 1;
}
.trend-implication .implication-content .implication-div4 .implication-perc4 {
    position: absolute;
    background: transparent url('../images/Trends_Implications/55-percent.png') 0% 0% no-repeat;
    background-size: 5.5em;
    height: 6em;
    width: 6em;
    margin-top: 59px;
    margin-left: 51px;
    animation-name: zoomin;
    animation-duration: 2s;
}
.trend-implication .implication-content .implication-div1 .implication-text1,
.trend-implication .implication-content .implication-div2 .implication-text2,
.trend-implication .implication-content .implication-div3 .implication-text3,
.trend-implication .implication-content .implication-div4 .implication-text4 {
    color: #F9F7D1;
    position: absolute;
    font: normal normal normal 24px/29px HelveticaNeueLt;
    width: 13em;
    margin-left: 9.5em;
    height: 6em;
    padding-top: 38px;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.ZoomflipInYdiv {
    animation-name: ZoomflipInY;
    animation-duration: 4s;
}

@keyframes ZoomflipInY {
    0% {
        transform: perspective(400px) rotateY(-60deg) scale3d(-0.2, -0.2, -0.2);
        opacity: 0
    }

    50% {
        transform: perspective(400px) rotateY(-5deg) scale3d(1.5, 1.5, 1.5)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInLeftYdiv {
    animation-name: flipInLeftY;
    animation-duration: 2s;
}

@keyframes flipInLeftY {
    0% {
        transform: perspective(400px) rotateY(-60deg);
        opacity: 0
    }

    /* 50% {transform: perspective(400px) rotateY(-5deg);} */
    to {
        transform: perspective(400px)
    }
}

.flipInRightYdiv {
    animation-name: flipInRightY;
    animation-duration: 2s;
}

@keyframes flipInRightY {
    0% {
        transform: perspective(400px) rotateY(-60deg);
        opacity: 0
    }

    /* 50% {transform: perspective(400px) rotateY(-30deg);} */
    to {
        transform: perspective(400px)
    }
}

.rotateClkdiv {
    animation-name: rotateClk;
    animation-duration: 2s;
}

@keyframes rotateClk {
    from {
        transform: rotate(0deg) scale3d(0, 0, 0);
        opacity: 0;
    }

    to {
        transform: rotate(+360deg);
        opacity: 1;
    }
}

.SlideImpltoRightDiv {
    animation: SlideImpltoRight;
    animation-duration: 3s;
}

@keyframes SlideImpltoRight {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(+400%);
        opacity: 0;
    }
}

.SlideTrendtoLeftDiv {
    animation: SlideTrendtoLeft;
    animation-duration: 3s;
}

@keyframes SlideTrendtoLeft {
    from {
        transform: translateX(0%);
        opacity: 1;
    }

    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Case Study styles */
.case-study {
    position: relative;
    overflow: hidden;
    width: 2143px;
    height: 1206px;
    background-image: url('../images/Case_Study/BKGND-02.png');
    background-size: 2143PX 1206px;
    transform-origin: top left;
    z-index: 0;
    animation-name: opacityHighAnim;
    animation-duration: 1.5s;
}

.case-study .caseStudy-highTech .highTech-leftText {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-HIGH-TECH-02/CS-GRAPHIC-high-tech-1.png') 0% 0% no-repeat;
    width: 50%;
    height: 1206px;
    background-size: 46em;
    top: 263px;
    left: 122px;
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

.case-study .caseStudy-highTech .highTech-rightImg {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-HIGH-TECH-02/CS-GRAPHIC-high-tech.png') 0% 0% no-repeat;
    width: 100%;
    height: 1206px;
    left: 663px;
    top: 173px;
    background-size: 96.5em;
    cursor: pointer;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.case-study .caseStudy-foodIng .foodIng-leftText {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-Food-Ingred-02/GRAPHIC-TEXT-leading-global.png') 0% 0% no-repeat;
    width: 50%;
    height: 1206px;
    background-size: 44em;
    top: 323px;
    left: 158px;
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

.case-study .caseStudy-foodIng .foodIng-rightImg {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-Food-Ingred-02/GRAPHIC-leading-global.png') 0% 0% no-repeat;
    width: 100%;
    height: 1206px;
    left: 689px;
    top: 184px;
    background-size: 92em;
    cursor: pointer;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.case-study .caseStudy-pwrComp .pwrComp-leftText {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-POWER-COMPANY-02/GRAPHIC-TEXT-power-company.png') 0% 0% no-repeat;
    width: 50%;
    height: 1206px;
    background-size: 44em;
    top: 259px;
    left: 161px;
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

.case-study .caseStudy-pwrComp .pwrComp-rightImg {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-POWER-COMPANY-02/GRAPHIC-power-company.png') 0% 0% no-repeat;
    width: 100%;
    height: 1206px;
    left: 689px;
    top: 184px;
    background-size: 92em;
    cursor: pointer;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.case-study .caseStudy-innovDev .innovDev-leftText {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-INNOVATION-DEV-01/TEXT-GRAPHIC-innovation-development.png') 0% 0% no-repeat;
    width: 50%;
    height: 1206px;
    background-size: 45.5em;
    top: 309px;
    left: 135px;
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

.case-study .caseStudy-innovDev .innovDev-rightImg {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-INNOVATION-DEV-01/GRAPHIC-innovation-development.png') 0% 0% no-repeat;
    width: 100%;
    height: 1206px;
    left: 689px;
    top: 184px;
    background-size: 92em;
    cursor: pointer;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

.case-study .caseStudy-leadGlobal .leadGlobal-leftText {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-LEADING-GLOBAL-02/GRPHIC-TEXT-leading-automotive.png') 0% 0% no-repeat;
    width: 50%;
    height: 1206px;
    background-size: 42em;
    top: 319px;
    left: 202px;
    animation-name: slidefromLeft;
    animation-duration: 2s;
}

.case-study .caseStudy-leadGlobal .leadGlobal-rightImg {
    position: absolute;
    background: transparent url('../images/Case_Study/Case-study-LEADING-GLOBAL-02/GRAPHIC-leading-automotive.png') 0% 0% no-repeat;
    width: 100%;
    height: 1206px;
    left: 689px;
    top: 173px;
    background-size: 92em;
    animation-name: slidefromRight;
    animation-duration: 2s;
}

/* Art of Possible styles */
.artOfPossible .backendMenuImage {
    background: transparent url('../images/artOfPossible/BKGND-Menu.png') 0% 0% no-repeat padding-box;
    position: relative;
    overflow: hidden;
    width: 2143px;
    height: 1206px;
    background-size: 2143PX 1206px;
    transform-origin: center center;
    z-index: 0;
    animation-name: skewFromLeft;
    animation-duration: 2s;
}

.artOfPossible .industryLogo {
    background: transparent url('../images/artOfPossible/LOGO-I-40-circle.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-size: 19em;
    top: 7em;
    background-position: center;
    width: 100%;
    height: 915px;
    z-index: 1;
    animation-name: zoomOutLogo;
    animation-duration: 4s;
}

.opacityLow {
    opacity: 0.3 !important;
}

@keyframes zoomOutLogo {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    30% {
        opacity: 1;
        transform: scale3d(2, 2, 2);
    }

    70% {
        opacity: 1;
        transform: scale3d(2, 2, 2);
    }
}

@keyframes skewFromLeft {
    0% {
        transform: scale(1, -0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.artOfPossible .headerMenuImage {
    background: transparent url('../images/artOfPossible/HEADER-menu.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 100%;
    background-position: center;
    height: 38em;
    top: -0.5em;
    background-size: 100%;
    display: none;
    z-index: 0;
}

.artOfPossible .headerMenuImage .glowingLine {
    background: transparent url('../images/artOfPossible/LINE-glowing.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 100%;
    height: 9em;
    bottom: -6em;
    background-position: center;
    z-index: 0;
}

.artOfPossible .container {
    float: left;
    width: 100%;
    position: absolute;
    height: 50%;
    bottom: -6em;
    left: 0em;
}

.artOfPossible .container .content {
    position: absolute;
    width: 50%;
    left: 24em;
    top: 0.5em;
}

/* buttonStyles ART OF POSSIBLE */

.artOfPossible .container .content .buttonColumnOne {
    position: absolute;
    width: 18em;
    height: 23em;
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

.artOfPossible .container .content .buttonColumnTwo {
    position: absolute;
    left: 262px;
    width: 18em;
    height: 23em;
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

.artOfPossible .container .content .buttonColumnThree {
    position: absolute;
    left: 524px;
    width: 18em;
    height: 23em;
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

.artOfPossible .container .content .buttonColumnFour {
    position: absolute;
    left: 786px;
    width: 18em;
    height: 23em;
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

.artOfPossible .container .content .buttonColumnFive {
    position: absolute;
    left: 1048px;
    width: 18em;
    height: 23em;
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

.artOfPossible .container .content .buttonColumnOne .buttonProduction {
    background: transparent url('../images/artOfPossible/button-production.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;

}

.artOfPossible .container .content .buttonColumnOne .buttonDigitalTwin {
    background: transparent url('../images/artOfPossible/button-digital-twin.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 120px;
}

.artOfPossible .container .content .buttonColumnOne .buttonMachineMonitor {
    background: transparent url('../images/artOfPossible/button-machine-monitoring.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 240px;
}

.artOfPossible .container .content .buttonColumnTwo .buttonDigital {
    background: transparent url('../images/artOfPossible/button-digital-work-instruction.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
}

.artOfPossible .container .content .buttonColumnTwo .buttonPackAndShip {
    background: transparent url('../images/artOfPossible/button-pack-and-ship.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 120px;
}

.artOfPossible .container .content .buttonColumnTwo .buttonKanbanMaterial {
    background: transparent url('../images/artOfPossible/button-kanban.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 240px;
}

.artOfPossible .container .content .buttonColumnThree .buttonPacktoLight {
    background: transparent url('../images/artOfPossible/button-pick-to-light.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
}

.artOfPossible .container .content .buttonColumnThree .buttonQualityEvent {
    background: transparent url('../images/artOfPossible/button-quality-event.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 120px;
}

.artOfPossible .container .content .buttonColumnThree .buttonProcessCapability {
    background: transparent url('../images/artOfPossible/button-process-capability.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 240px;
}

.artOfPossible .container .content .buttonColumnFour .buttonInventory {
    background: transparent url('../images/artOfPossible/button-inventory-app.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
}

.artOfPossible .container .content .buttonColumnFour .buttonMaterialsManagement {
    background: transparent url('../images/artOfPossible/button-materials-management.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 120px;
}

.artOfPossible .container .content .buttonColumnFour .buttonSmartSafety {
    background: transparent url('../images/artOfPossible/button-smart-safety.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 240px;
}

.artOfPossible .container .content .buttonColumnFive .buttonAugumented {
    background: transparent url('../images/artOfPossible/button-augmented.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
}

.artOfPossible .container .content .buttonColumnFive .buttonModernizeField {
    background: transparent url('../images/artOfPossible/button-modernize-field.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 120px;
}

.artOfPossible .container .content .buttonColumnFive .buttonSustainability {
    background: transparent url('../images/artOfPossible/button-sustainability.png') 0% 0% no-repeat padding-box;
    position: absolute;
    background-position: center;
    background-size: 13.5em;
    width: 20em;
    height: 10em;
    cursor: pointer;
    top: 240px;
}

.buttonImageText {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 12em;
    left: 63px;
    top: 67px;
}

.buttonImageTextOne {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 12em;
    left: 63px;
    top: 55px;
}

.buttonText {
    width: 260px;
    height: 29px;
    text-align: center;
    font: normal normal normal 19px/26px HelveticaNeueLt;
    letter-spacing: 0px;
    color: #F9F7D1;
    opacity: 1;
    cursor: pointer;
    z-index: 9;
}

.zoomOutButtonDiv {
    animation-name: zoomOutButton;
    animation-duration: 2.5s;
}

@keyframes zoomOutButton {
    0% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }

    100% {
        opacity: 1;
    }
}
/* Common Styles for Video Screens */
.frameVideo{
    background: transparent url('../images/QualityEventDashboard/FRAME-video-demo.png') 0% 0% no-repeat padding-box;
    position: relative;
    width: 1920px;
    height: 1080px;
    margin-top: 100px;
    margin-left: 110px;
    background-size: 1920px 1080px;
    z-index: 0;
    animation-name: zoomin;
    animation-duration: 1.5s;
}
@keyframes opacityHighAnim {
    from{opacity: 0;}
    to{opacity: 1;}
}
.video{
    border:none;
    height: 930px;
    width: 1825px;
    top: 2.5em;
    left: 2.8em;
    position: absolute;    
    z-index: 1;
    background-color: white;
}
/* Quality Event Dashboard Styles  Screen43*/
.qualityEventDashboard .frameVideo .qualityEventThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Quality-Event-Dashboard.png') 0% 0% no-repeat padding-box;
    position: absolute;
    display: block;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* PopUp Digital-Twin-02 Styles   --Screen36*/
.popUpDigitalTwinTwo .frameVideo .popUpDigitalTwinTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-popup-digital-twin-min.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* PopUp Production-Visibility-02 Styles   --Screen37*/
.popUpProductionVisibilityTwo .frameVideo .popUpProductionVisibilityTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-popup-production-visibility-min.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* Augumented Virtual Collaboration Styles   --Screen53*/
.augumentedVirtualCollaboration .frameVideo .augumentedCollaboration{
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 12em;
    left: 2em;
}
.augumentedVirtualCollaboration .frameVideo .augumentedCollaboration .augmentedThumbnailOne{
    background: transparent url('../images/Thumbnails/THUMBNAIL-augmented-virtual-01.png') 0% 0% no-repeat padding-box;
    width: 915px;
    height: 614px;
    background-size: 915px 600px;
    left: 2em;
    top: 1.75em;
    cursor: pointer;
}
.augumentedVirtualCollaboration .frameVideo .augumentedCollaboration .augmentedThumbnailTwo{
    background: transparent url('../images/Thumbnails/THUMBNAIL-augmented-virtual-02.png') 0% 0% no-repeat padding-box;
    width: 915px;
    height: 614px;
    background-size: 915px 600px;
    margin-left: 1.5em;
    cursor: pointer;
}
/* Modernize Field Services-1 Styles --Screen62*/
.modernizeFieldServicesOne .frameVideo .augmentedVirtualThumbnailOne{
    background: transparent url('../images/Thumbnails/THUMBNAIL-augmented-virtual-01.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* Modernize Field Services-2 Styles  --Screen63*/
.modernizeFieldServicesTwo .frameVideo .augmentedVirtualThumbnailTwo{
    background: transparent url('../images/Thumbnails/THUMBNAIL-augmented-virtual-02.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* MachineMonitoring-02 Styles   --Screen38 */
.machineMonitorTwo .frameVideo .machineMonitorTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Machine-Monitoring.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* DigitalWorkInstruction-02 Styles   --Screen39*/
.digitalWorkInstructionTwo .frameVideo .digitalWorkInstructionTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Digital-Work-Instruction.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* PackShipAPP-02 Styles    --Screen40*/
.packShipAppTwo .frameVideo .packShipAppTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Pack-Ship-App.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* KanbanMaterialSystem-02 Styles --Screen41*/
.kanbanMaterialSystemTwo .frameVideo .kanbanMaterialSystemTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Kanban-Material-System-new.jpg') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* PickLightVision-02 Styles   --Screen42*/
.pickLightVisionTwo .frameVideo .pickLightVisionTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-Pick-Light-Vision.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* ProcessCapability-02 Styles   --Screen44*/
.processCapabilityTwo .frameVideo .processCapabilityTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-process-capability.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* MaterialsManagement-02 Styles --Screen45*/
.materialsManagementTwo .frameVideo .materialsManagementTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-materials-management.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* InventoryAPP-02 Styles   --Screen46*/
.inventoryAppTwo .frameVideo .inventoryAppTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-inventory-app.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* ManufacturingOverview-02 Styles   --Screen52*/
.manufacturingOverviewTwo .frameVideo .manufacturingOverviewTwoThumbnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-manufacturing-overview.jpg') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* PopUp Modernize FieldServices-02 Styles   --Screen54*/
.popUpModernFieldServicesTwo .frameVideo .popUpModernFieldServicesTwoThumnail{
    background: transparent url('../images/Thumbnails/THUMBNAIL-popUpModerniz-FiledServiceTwo.png') 0% 0% no-repeat padding-box;
    position: absolute;
    width: 1920px;
    height: 1080px;
    background-size: 1835px 925px;
    left: 2.5em;
    top: 2.75em;
    cursor: pointer;
}
/* DRIVERS */

.drivers .leftImage {
    background: url("../images/Drivers/PHOTO-left.png");
    position: absolute;
    background-size: 47em;
    background-position: left;
    background-repeat: no-repeat;
    z-index: 1;
    top: 0px;
    left: -10px;
    height: 825px;
    width: 753px;
}

.drivers .leftImage .leftImageTxt {
    position: absolute;
    color: white;
    font-weight: bold;
    top: 346px;
    left: 502px;
    font-size: 50px;
    transform: rotate(315deg);
    z-index: 1;
    letter-spacing: 3px;
    font-family: 'NewHelvetica';
}

.drivers .rightImage {
    background: url('../images/Drivers/PHOTO-right.png');
    position: absolute;
    background-size: 47em;
    background-position: right;
    background-repeat: no-repeat;
    bottom: -17px;
    right: -25px;
    height: 840px;
    width: 763px;
}

.drivers .smallIcons {
    top: -3em;
    left: 116em;
    position: absolute;
}

.drivers .smallIcons .generalSmallIconStyle {
    position: absolute;
    z-index: 1;
    background-size: 23em !important;
    background-repeat: no-repeat;
    height: 365px;
    width: 370px;
}


.drivers .smallIcons .operationsImage {
    background: transparent url('../images/Drivers/IMAGE-operations.png');
    top: 374px;
    right: 897px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .supplychainImage {
    background: url("../images/Drivers/IMAGE-supply.png");
    top: 579px;
    right: 1101px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .productexeImage {
    background: url("../images/Drivers/IMAGE-product.png");
    top: 579px;
    right: 687px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .newbusinessImage {
    background: url("../images/Drivers/IMAGE-new.png");
    top: 373px;
    right: 483px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .custexpImage {
    background: url("../images/Drivers/IMAGE-customer.png");
    top: 377px;
    right: 75px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .sustainImage {
    background: url("../images/Drivers/IMAGE-sustainability.png");
    top: 578px;
    right: 279px;
    background-repeat: no-repeat;
}

.drivers .smallIcons .smallIconTxt {
    position: absolute;
    color: #F9F7D1;
    font-size: 26px;
    transform: rotate(45deg);
    line-height: 37px;
    font-family: 'HelveticaNeueLt';
}

.drivers .smallIcons .operationsImage .operationsTxt {
    top: 58px;
    left: 145px;
}

.drivers .smallIcons .supplychainImage .supplychainTxt {
    top: 219px;
    left: 64px;
}

.drivers .smallIcons .productexeImage .productexeTxt {
    top: 231px;
    left: 91px;
}

.drivers .smallIcons .newbusinessImage .newbusinessTxt {
    top: 69px;
    left: 141px;
}

.drivers .smallIcons .custexpImage .custexpTxt {
    top: 63px;
    left: 149px;
}

.drivers .smallIcons .sustainImage .sustainTxt {
    top: 248px;
    left: 55px;
}

.fadeInLeftDiv {
    animation-name: fadeInLeft;
    animation-duration: 2s;
}

.fadeInRightDiv {
    animation-name: fadeInRight;
    animation-duration: 2s;
}

.fadeInTxtDiv {
    animation-name: fadeInleftTxt;
    animation-duration: 2s;
}

.fadeInToptoMidDiv {
    animation-name: fadeInToptoMid;
    animation-duration: 2s;
}

.fadeInDowntoMidDiv {
    animation-name: fadeInDowntoMid;
    animation-duration: 2s;
}

@keyframes fadeInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fadeInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes fadeInleftTxt {
    0% {
        opacity: 0;
        top: 740px;
        left: 120px;
    }

    to {
        opacity: 1;
        top: 346px;
        left: 502px;
    }
}

@keyframes fadeInToptoMid {
    0% {
        transform: translate(120%, -120%);
    }

    100% {
        transform: translateXY(0, 0) rotate(315deg);
    }
}

@keyframes fadeInDowntoMid {
    0% {
        transform: translate(-120%, 120%);
    }

    100% {
        transform: translateXY(0, 0) rotate(315deg);
    }
}

/* PRODUCTION VISIBILITY */

.prodVisBackImage {
    background: transparent url(../images/Production_Visibility/PHOTO-production-visibility.png);
    position: absolute;
    overflow: hidden;
    background-size: 136em;
    background-attachment: fixed;
    height: 1288px;
    width: 2152px;
    top: 0px;
    z-index: 0;
    opacity: 1;
    transition-property: height, top;
    transition-duration: 2s;
    left: 0px;
    background-repeat: no-repeat;
}

.tiltBackImageDiv {
    animation-name: tiltBackImage;
    animation-duration: 3s;
}

@keyframes tiltBackImage {
    from {
        transform: rotateX(70deg);
        opacity: 1;
    }

    to {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.bentIndustryLine {
    background: transparent url("../images/Production_Visibility/Bent-Line-Industry-4.0.png");
    background-repeat: no-repeat;
    position: absolute;
    top: -60px;
    left: 1057px;
    height: 1294px;
    width: 470px;
    z-index: 1;
    background-size: 30em;
}

.bentLineSlideRight {
    animation-name: bentLineSlide;
    animation-duration: 2s;
}

@keyframes bentLineSlide {
    0% {
        transform: translateX(-380%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.prodVisglowVerticalLine {
    background: transparent url('../images/Production_Visibility/LINE-vertical-glow-SHORT.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 360px;
    left: 1503px;
    height: 634px;
    width: 82px;
    z-index: 1;
    background-size: 92px;
    opacity: 1;
}

.slideGlowlineHeaderDiv {
    animation-name: slideGlowlineHeader;
    animation-duration: 2s;
}

@keyframes slideGlowlineHeader {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.prodVisSliceLeftImage {
    background: transparent url('../images/Production_Visibility/PHOTO-SLICE-LEFT-production-visibility.png');
    position: absolute;
    overflow: hidden;
    background-size: 84.5em;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 1243px;
    width: 1316px;
    top: 0px;
    opacity: 1;
    left: 0px;
}

.prodVisSliceRightImage {
    background: transparent url('../images/Production_Visibility/PHOTO-SLICE-RIGHT-production-visibility.png');
    position: absolute;
    background-size: 62.4em;
    height: 1201px;
    width: 968px;
    overflow: hidden;
    opacity: 0;
    background-repeat: no-repeat;
    top: 22px;
    right: 0px;
}

.headerProdVisibility {
    background: transparent url('../images/Production_Visibility/HEADER-procudtion-visibility.png');
    position: absolute;
    background-size: 45em;
    background-repeat: no-repeat;
    height: 156px;
    width: 692px;
    top: 1em;
    left: 1402px;
    opacity: 1;
}

.prodVisTextPointers {
    position: absolute;
    font-size: 31px;
    height: 120px;
    width: 606px;
    top: 398px;
    left: 1604px;
    z-index: 1;
}

.slideRightToLeftDiv {
    animation-name: slideRightToLeft;
    animation-duration: 2s;
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.opacityReduce {
    opacity: 0.25 !important;
}

/* ASSET MANAGEMENT */

.assetMgtBackImage {
    background: transparent url(../images/Asset_Management/PHOTO-asset-mgmt.png);
    position: absolute;
    overflow: hidden;
    background-size: 136em;
    background-attachment: fixed;
    height: 1288px;
    width: 2152px;
    top: 0px;
    z-index: 0;
    opacity: 1;
    transition-property: height, top;
    transition-duration: 2s;
    left: 0px;
    background-repeat: no-repeat;
}

.assetMgtSliceLeftImage {
    background: transparent url('../images/Asset_Management/PHOTO-SLICE-LEFT-asset-mgmt.png');
    position: absolute;
    overflow: hidden;
    background-size: 84.5em;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 1243px;
    width: 1316px;
    top: 0px;
    opacity: 1;
    left: 0px;
}

.assetMgtSliceRightImage {
    background: transparent url('../images/Asset_Management/PHOTO-SLICE-RIGHT-asset-mgmt.png');
    position: absolute;
    background-size: 62.4em;
    height: 1201px;
    width: 968px;
    overflow: hidden;
    opacity: 0;
    background-repeat: no-repeat;
    top: 22px;
    right: 0px;
}

.headerAssetMgt {
    background: transparent url('../images/Asset_Management/HEADER-asset-management.png');
    position: absolute;
    background-size: 42em;
    background-repeat: no-repeat;
    height: 120px;
    width: 650px;
    top: 3em;
    left: 1438px;
    opacity: 1;
}

.assetMgtTextPointers {
    position: absolute;
    font-weight: 2px;
    font-size: 30px;
    height: 120px;
    width: 606px;
    top: 461px;
    left: 1600px;
    z-index: 1;
}

.assetMgtGlowVerticalLine {
    background: transparent url('../images/Production_Visibility/LINE-vertical-glow-SHORT.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 447px;
    left: 1530px;
    height: 389px;
    width: 155px;
    z-index: 1;
    background-size: 56px;
    opacity: 1;
}


/* PREDICTIVE MAINTAINENCE */
.predMaintBackImage {
    background: transparent url(../images/Predictive_Maint/PHOTO-predictive-maintenance.png);
    position: absolute;
    overflow: hidden;
    background-size: 136em;
    background-attachment: fixed;
    height: 1288px;
    width: 2152px;
    top: 0px;
    z-index: 0;
    opacity: 1;
    transition-property: height, top;
    transition-duration: 2s;
    left: 0px;
    background-repeat: no-repeat;
}

.predMaintSliceLeftImage {
    background: transparent url('../images/Predictive_Maint/PHOTO-SLICE-LEFT-predictive-maintenance.png');
    position: absolute;
    overflow: hidden;
    background-size: 84.5em;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 1243px;
    width: 1316px;
    top: 0px;
    opacity: 1;
    left: 0px;
}

.predMaintSliceRightImage {
    background: transparent url('../images/Predictive_Maint/PHOTO-SLICE-RIGHT-predictive-maintenance.png');
    position: absolute;
    background-size: 62.4em;
    height: 1201px;
    width: 968px;
    overflow: hidden;
    opacity: 0;
    background-repeat: no-repeat;
    top: 22px;
    right: 0px;
}

.headerPredMaint {
    background: transparent url('../images/Predictive_Maint/HEADER-predictive-maintenance.png');
    position: absolute;
    background-size: 49em;
    background-repeat: no-repeat;
    height: 120px;
    width: 757px;
    top: 3em;
    left: 1330px;
    opacity: 1;
}

.predMaintTextPointers {
    position: absolute;
    font-size: 29px;
    height: 120px;
    width: 606px;
    top: 461px;
    left: 1600px;
    z-index: 1;
}

.predMaintGlowVerticalLine {
    background: transparent url('../images/Production_Visibility/LINE-vertical-glow-SHORT.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 444px;
    left: 1523px;
    height: 563px;
    width: 189px;
    z-index: 1;
    background-size: 55px;
    opacity: 1;
}


/* SUSTAINABILITY */
.sustainBackImage {
    background: transparent url(../images/Sustainability/PHOTO-sustainability.png);
    position: absolute;
    background-size: 136em;
    height: 1288px;
    width: 2152px;
    z-index: 0;
    opacity: 1;
    transition-property: height, top;
    transition-duration: 2s;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
}

.sustainSliceLeftImage {
    background: transparent url('../images/Sustainability/PHOTO-SLICE-LEFT-sustainability.png');
    position: absolute;
    background-size: 84.5em;
    height: 1288px;
    width: 2152px;
    overflow: hidden;
    opacity: 1;
    background-repeat: no-repeat;
    top: 0px;
    left: 1px;
}

.sustainSliceRightImage {
    background: transparent url('../images/Sustainability/PHOTO-SLICE-RIGHT-sustainability.png');
    position: absolute;
    background-size: 62.4em;
    height: 1201px;
    width: 968px;
    overflow: hidden;
    opacity: 0;
    background-repeat: no-repeat;
    top: 22px;
    /* left: 1183px; */
    right: 0px;
}

.headerSustain {
    background: transparent url('../images/Sustainability/HEADER-sustainability.png');
    position: absolute;
    background-size: 32em;
    background-repeat: no-repeat;
    height: 120px;
    width: 606px;
    top: 3em;
    left: 1616px;
    opacity: 1;
}

.sustainTextPointers {
    position: absolute;
    font-size: 29px;
    height: 120px;
    width: 606px;
    top: 432px;
    left: 1600px;
    z-index: 1;
}

.sustainGlowVerticalLine {
    background: transparent url('../images/Production_Visibility/LINE-vertical-glow-SHORT.png');
    background-repeat: no-repeat;
    position: absolute;
    top: 412px;
    left: 1523px;
    height: 582px;
    width: 185px;
    z-index: 1;
    background-size: 60px;
    opacity: 1;
}

.opacityReduce {
    animation-name: opReduce;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

@keyframes opReduce {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}
.opacityReducediv{
    opacity: 0.25!important;
}
/* PRE-MENU */

.preMenu .preMenuBackImage {
    background: url(../images/PreMenu/BKGND-image-MENU_bright.jpg) 50% 0% no-repeat;
    position: absolute;
    overflow: hidden;
    background-attachment: fixed;
    height: 152px;
    width: 2156px;
    top: 31em;
    z-index: 0;
    opacity: 1;
    transition-property: height, top;
    transition-duration: 2s;
    background-size: 138em;
}

.preMenu .preMenuBackImageExpand {
    height: 1302px;
    top: 0px;
}

.preMenu .logo {
    background: url(../images/PreMenu/LOGO-I-40-circle.png);
    position: absolute;
    background-position: center;
    height: 39em;
    width: 36em;
    z-index: 2;
    top: 23em;
    left: 49em;
    background-size: 0.3em;
    background-repeat: no-repeat;
    transition-duration: 1.5s;
}

.preMenu .expandLogo {
    background-size: 38em;
}

.preMenu .contractLogo {
    background-size: 14em;
}

.preMenu .moveLogoDown {
    top: 43.5em;
}

.preMenu .cooAndOperatorTile .cooImage {
    background: url(../images/PreMenu/PHOTO-coo.png);
    position: absolute;
    z-index: 1;
    /* top: 230px ;
left: 286px ; */
    height: 456px;
    width: 546px;
    background-repeat: no-repeat;
    background-size: 30em;
    transition-duration: 2s;
}

.preMenu .managerTile .managerImage {
    background: url(../images/PreMenu/PHOTO-smart-manager.png);
    position: absolute;
    z-index: 1;
    /* top: 210px;
left: 805px; */
    height: 456px;
    width: 546px;
    transition-duration: 2s;
    background-repeat: no-repeat;
    background-size: 30em;
}

.preMenu .cooAndOperatorTile .operatorImage {
    background: url(../images/PreMenu/PHOTO-smart-employee.png);
    position: absolute;
    z-index: 1;
    height: 456px;
    width: 546px;
    transition-duration: 2s;
    background-repeat: no-repeat;
    background-size: 30em;
}

.preMenu .cooAndOperatorTile .cooImage.ImgClass {
    position: absolute;
    background: transparent url(../images/PreMenu/PHOTO-coo.png) 50% 0% no-repeat;
    background-size: 49em;
    height: 38em;
    width: 28em;
    border-radius: 2em;
    left: 267px;
    top: 290px;
    cursor: pointer;
}

.preMenu .managerTile .managerImage.ImgClass {
    position: absolute;
    background: transparent url('../images/PreMenu/PHOTO-smart-manager.png') 50% 00% no-repeat;
    background-size: 49em;
    height: 38em;
    width: 28em;
    border-radius: 2em;
    top: 290px;
    left: 846px;
    cursor: pointer;
}

.preMenu .cooAndOperatorTile .operatorImage.ImgClass {
    position: absolute;
    background: transparent url('../images/PreMenu/PHOTO-smart-employee.png') 50% 0% no-repeat;
    background-size: 49em;
    height: 38em;
    width: 28em;
    border-radius: 2em;
    top: 290px;
    left: 1453px;
    cursor: pointer;
}

.preMenu .preMenuGeneralHeaderStyle {
    position: absolute;
    height: 135px;
    width: 342px;
    z-index: 1;
    background-size: 235px !important;
    transition-duration: 3s;
    top: 170px;
}

.preMenu .cooAndOperatorTile .headerTextCoo {
    background: url('../images/PreMenu/HEADER-coo.png');
    left: 372px;
    background-repeat: no-repeat;
}

.preMenu .managerTile .headerTextManager {
    background: url('../images/PreMenu/HEADER-smart-manager.png');
    left: 956px;
    background-repeat: no-repeat;
}

.preMenu .cooAndOperatorTile .headerTextOperator {
    background: url('../images/PreMenu/HEADER-smart-employee.png');
    right: 240px;
    background-repeat: no-repeat;
}

.preMenu .preMenuText .preMenuGeneralCaptionStyle {
    position: absolute;
    z-index: 1;
    top: 611px;
    color: #F9F7D1;
    font: normal normal normal 20px/21px HelveticaNeueLt;
    letter-spacing: 1px;
}

.preMenu .preMenuText .cooCaption {
    left: 312px;
}

.preMenu .preMenuText .managerCaption {
    left: 880px;
}

.preMenu .preMenuText .operatorCaption {
    left: 1482px;
}

.preMenu .preMenuText .preMenuGeneralPointerStyle {
    position: absolute;
    z-index: 1;
    color: #FFFFFF;
    font: normal normal normal 19px/20px HelveticaNeueLt;
    line-height: 1.6;
    letter-spacing: 1px;
}

.preMenu .preMenuText .cooPointers {
    top: 668px;
    left: 342px;
}

.preMenu .preMenuText .managerPointers {
    top: 647px;
    left: 911px;
}

.preMenu .preMenuText .operatorPointers {
    top: 672px;
    left: 1516px;
}

.preMenu .verticalLines .preMenuVerLineGeneralStyle {
    position: absolute;
    z-index: 1;
    top: 133px;
    height: 1180px;
    width: 117px;
    background-repeat: no-repeat;
    background-size: 1px;
}

.preMenu .verticalLines .verticalLine1 {
    background: url(../images/PreMenu/LINE-vertical-01.png);
    left: 742px;
    background-size: 5em;
    background-repeat: no-repeat;
}

.preMenu .verticalLines .verticalLine2 {
    background: url(../images/PreMenu/LINE-vertical-02.png);
    left: 1333px;
    background-size: 5em;
    background-repeat: no-repeat;
}

.preMenu .slideUpToDown {
    animation-name: slideInTop;
    animation-duration: 1.5s;
}

.preMenu .slideDownToUp {
    animation-name: slideInDown;
    animation-duration: 1.5s;
}

.preMenu .slideVerticalLine1 {
    animation-name: slideVertical1;
    animation-duration: 1.5s;
}

.preMenu .slideVerticalLine2 {
    animation-name: slideVertical2;
    animation-duration: 1.5s;
}

@keyframes slideInTop {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes slideInDown {
    0% {
        transform: translateY(150%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes slideVertical1 {
    0% {
        transform: translateX(630%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slideVertical2 {
    0% {
        transform: translateX(-630%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.ImgZoomOutCooDiv {
    animation-name: ImgZoomOutCoo;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes ImgZoomOutCoo {
    to {
        height: 366px;
        width: 450px;
        background-size: 30em;
        top: 210px;
        left: 270px;
    }
}

.ImgZoomOutManagerDiv {
    animation-name: ImgZoomOutManager;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes ImgZoomOutManager {
    to {
        height: 366px;
        width: 450px;
        background-size: 30em;
        top: 210px;
        left: 846px;
    }
}

.ImgZoomOutOperatorDiv {
    animation-name: ImgZoomOutOperator;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes ImgZoomOutOperator {
    to {
        height: 366px;
        width: 450px;
        background-size: 30em;
        top: 210px;
        left: 1453px;
    }
}

.CooDiv{
    height: 366px !important;
    width: 450px !important;
    background-size: 30em !important;
    top: 210px !important;
    left: 270px !important;
}
.ManagerDiv{
    height: 366px !important;
    width: 450px !important;
    background-size: 30em !important;
    top: 210px !important;
    left: 846px !important;
}
.OperatorDiv{
    height: 366px !important;
        width: 450px !important;
        background-size: 30em !important;
        top: 210px !important;
        left: 1453px !important;
}
.resetAnimDiv{
    animation-name: resetAnim !important;
}