/* 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/BKGND-atile-transformation.png');
background-position: center;
background-size: 2143px 1206px;
transform-origin: top left;
z-index: 0;
}
/* hierarchy to be followed for the CSS classes*/
/* LEFT AND RIGHT MENU */
#left-menu .container {
top: 488px;
left: -18px;
width: 173px;
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: 10px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#left-menu .up {
top: 494px;
left: 76px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#left-menu .left {
top: 562px;
left: 10px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#left-menu .right {
top: 562px;
left: 76px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
/* Right */
#right-menu .container {
top: 488px;
right: -17px;
width: 173px;
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: 73px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#right-menu .up {
top: 494px;
right: 7px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#right-menu .left {
top: 562px;
right: 73px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
#right-menu .right {
top: 562px;
right: 7px;
width: 61px;
height: 61px;
position: absolute;
z-index: 999;
cursor: pointer;
}
.right-retract {
right: -153px !important;
/* right: 60px !important; */
}
.left-retract {
left: -157px !important;
/* left: -147px !important; */
}
.menu-list-left {
position: absolute;
height: 32em;
width: 17em;
color: white;
top: 489px;
left: 180px;
opacity: 1;
padding: 1em 1em;
background: transparent url('../images/Menu/menu-box-dark.jpg') 0% 0% no-repeat padding-box;
display: none;
z-index: 12;
}
.menu-list-right {
position: absolute;
height: 31em;
width: 17em;
color: white;
top: 489px;
right: 165px;
opacity: 1;
padding: 1em 1em;
background: transparent url('../images/Menu/menu-box-dark.jpg') 0% 0% no-repeat padding-box;
display: none;
z-index: 9;
}
.menu-list ol{
list-style: none;
padding-bottom: 1em;
}
.menu-list ol li{
line-height: 34px !important;
font: normal normal normal 20px/45px NewHelvetica;
cursor: pointer;
width: 13em;
}
.menu-list ol li.list-header{
color:#d9d7bb;
line-height: 20px!important;
font-size: 17px;
}
.show {
display: block !important;
transition: 1.5s all ease-in-out;
}
.hide {
display: none !important;
transition: 1.5s all ease-in-out;
}
#left-menu .transition,
#right-menu .transition {
transition: 0.8s all ease-in-out !important;
}
/**************************
----Index Screen Styles----
**************************/
/* */
video {
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
z-index: -100;
background: url('../images/Home/BKGND-agile-transformation.png') no-repeat;
background-size: cover;
}
video#bgVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 2;
transform: translate(-50%, -50%);
background: url('../images/Home/BKGND-agile-transformation.png') no-repeat;
background-size: cover;
opacity: 50%;
transition: 1s opacity;
}
.index-page .index-page-content{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
width: 92em;
height: 43em;
}
.index-page .index-page-content .headerTextContent{
display: block;
width: 47em;
}
.index-page .index-page-content .headerTextContent .homeHeaderText{
background: transparent url('../images/Home/Enterprise\ Business\ Agility\ Enablement.png') no-repeat;
background-size: 51em;
height: 12em;
width: 50em;
cursor: pointer;
}
.index-page .index-page-content .headerTextContent .homeHeaderSubText{
background: transparent url('../images/Home/Accelerating\ Business\ Agility\ to\ Increase\ Customer\ Value.png') no-repeat;
background-size: 47em;
height: 4em;
width: 48em;
cursor: pointer;
z-index: 3;
}
.index-page .index-page-content .homeImages{
display: flex;
justify-content: right;
width: 42em;
}
.index-page .index-page-content .homeImages .imageAgility{
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.index-page .index-page-content .homeImages .homeImagesTwo{
display: flex;
justify-content: center;
align-items: flex-start;
}
.devopsSec{
margin-left: -19em;
margin-top: -4.5em;
}
.index-page .homeImages .homeImageBig{
background: transparent url('../images/Home/homepage-pic-03.png') no-repeat;
background-size: 27em;
position: absolute;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
cursor: pointer;
opacity: 100%;
z-index: 3;
}
.index-page .homeImages .homeImageMed{
background: transparent url('../images/Home/homepage-pic-02.png') no-repeat;
background-size: 19em;
position: absolute;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
cursor: pointer;
z-index: 3;
}
.index-page .homeImages .homeImageSmall{
background: transparent url('../images/Home/homepage-pic-01.png') no-repeat;
background-size: 14em;
position: absolute;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
cursor: pointer;
z-index: 3;
}
.baeImageTransition{
animation-name: baeTransition;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes baeTransition {
30%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
40%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
60%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
70%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
90%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
100%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
}
.agilityImageTransition{
animation-name: agilityTransition;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes agilityTransition {
30%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
40%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
60%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
70%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
90%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
100%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
}
.roadmapImageTransition{
animation-name: roadmapTransition;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes roadmapTransition {
30%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
40%{
background-size: 27em;
right: -7%;
top: 28%;
height: 73%;
width: 30%;
}
60%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
70%{
background-size: 19em;
right: 10.5%;
top: -8%;
height: 54%;
width: 24%;
}
90%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
100%{
background-size: 14em;
right: 21.5%;
top: 36.85%;
height: 42%;
width: 19%;
}
}
/**************************
------Main Menu Styles-----
***************************/
.mainMenu-page .mainMenuPage{
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: center;
position: absolute;
z-index: 4;
}
.mainMenu-page .mainMenuPage .menuPhoto1{
/* cursor: pointer; */
z-index: 1;
opacity: 0;
}
.mainMenu-page .mainMenuPage .menuPhoto2{
/* cursor: pointer; */
z-index: 1;
opacity: 0;
}
.mainMenu-page .mainMenuPage .menuPhoto3{
/* cursor: pointer; */
z-index: 1;
opacity: 0;
}
#leftSpace{
margin-left: -10em;
}
#menuButtons{
background-size: 34.5em;
position: fixed;
top: 39.5em;
height: 12em;
width: 37em;
cursor: pointer;
z-index: 4;
display: flex;
justify-content: center;
align-items: center;
}
.mainMenu-page .mainMenuPage .menuPhoto1 .menuButton1{
background: transparent url('../images/mainMenu/menu-button-01.png') no-repeat;
left: 13em;
}
.mainMenu-page .mainMenuPage .menuPhoto2 .menuButton2{
background: transparent url('../images/mainMenu/menu-button-02.png') no-repeat;
left: 10em;
}
.mainMenu-page .mainMenuPage .menuPhoto3 .menuButton3{
background: transparent url('../images/mainMenu/menu-button-03.png') no-repeat;
left: 10em;
}
.menuTextGeneral{
font-family: HelveticaNeueLt;
font-size:30px;
color:#FFFFFF;
z-index:4;
margin-top:0em;
margin-left:-1em;
}
@keyframes fadeOutRight {
0% {
opacity: 1
}
to {
opacity: 1;
transform: translate3d(250%, 0, 0)
}
}
.fadeOutRight{
animation-name: fadeOutRight;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.fadeOutRightOne{
animation-name: fadeOutRightOne;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes fadeOutRightOne {
0% {
opacity: 1
}
to {
opacity: 0;
transform: translate3d(300%, 0, 0)
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
}
to {
opacity: 0 ;
transform: translate3d(-200%, 0, 0) ;
}
}
.fadeOutLeft{
animation-name: fadeOutLeft;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.ZoomTextHidediv {
animation-name: ZoomTextHide;
animation-duration: 3s ;
animation-fill-mode: forwards;
}
@keyframes ZoomTextHide {
0% {
transform:scale3d(1, 1, 1);
opacity: 1;
}
50%{
transform:scale3d(1.2, 1.2, 1.2);
opacity: 1;
}
100%{
transform: scale3d(1.2,1.2,1.2);
opacity: 1;
}
}
/* END OF MAIN MENU STYLES */
/* 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;
animation-fill-mode: forwards;
}
@keyframes opacityZeroAnim {
from{ opacity: 0;}
to {
opacity: 1;
}
}
/** Navigation **/
a {
cursor: pointer;
}
/* Common animation KeyFrames */
.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;
animation-fill-mode: forwards;
}
@keyframes SlidefromTop {
0% {
transform: translateY(-150%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.SlidefromDownDiv {
animation-name: SlidefromDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@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;
} */
}
@keyframes zoomin {
0% {
transform: scale3d(.3, .3, .3);
opacity: 0
}
100% {
transform: scale3d(1, 1, 1);
}
}
.slidefromLeftDiv{
animation-name:slidefromLeft ;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes slidefromLeft{
0% { transform: translateX(-250%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.rotateAndZoomdiv{
animation-name: rotateAndZoom;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes rotateAndZoom {
from {transform:rotate(-15deg) scale3d(.3,.3,.3);opacity:1;}
to {transform:rotate(0deg) scale3d(1,1,1);opacity: 1;}
}
.slidefromRightDiv {
animation-name: slidefromRight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slidefromRight {
from {
transform: translateX(0);
}
to {
transform: translateX(300%);
}
}
/**************************
------Why Agile Styles-----
***************************/
.whyAgilePage .whyAgile{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: auto;
width: 100%;
z-index: 3;
margin-top: 4%;
/* margin-top: 8%; */
}
.whyAgilePage .whyAgile .LHSwhyAgile{
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: auto;
width: 48%;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote1{
display: flex;
justify-content: flex-end;
opacity: 0;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote2{
display: flex;
justify-content: center;
opacity: 0;
margin-top: 3%;
}
.whyAgilePage .whyAgile .LHSwhyAgile p{
font: normal normal normal 20px/27px HelveticaNeueLt;
letter-spacing: 0px;
color: #FFFFFF;
position: absolute;
opacity: 0;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote1 #quote1Text{
top: 27%;
left: 47%;
width: 49%;
opacity: 0;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote2 #quote2Text{
top: 25%;
left: 27%;
width: 51%;
opacity: 0;
}
.whyAgilePage .whyAgile .LHSwhyAgile .authorTextGeneral{
font: normal normal normal 20px/30px HelveticaNeueLt;
letter-spacing: 0px;
color: #FAF8D7;
opacity: 0;
position: absolute;
font-style: italic;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote1 .authorTextOne{
/* top: 41%; */
right: 0.5%;
bottom: 0%;
}
.whyAgilePage .whyAgile .LHSwhyAgile .quote2 .authorTextTwo{
/* bottom: 27%;
left: 24%; */
right: 19%;
bottom: 1%;
}
.whyAgilePage .whyAgile .RHSwhyAgile{
display: flex;
flex-direction: column;
justify-content: space-between;
/* margin-right: auto; */
margin-right: 6%;
width: 50%;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle1Content .circle1{
width: 45%;
display: block;
margin-left:auto;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle2Content .circle2{
display: flex;
justify-content: center;
width: 40%;
margin-top: -32.5%;
margin-left: 27.7%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle3Content .circle3{
display: flex;
justify-content: center;
width: 45%;
display: block;
margin-left: 32.3%;
margin-top: 4.7%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle4Content .circle4{
display: flex;
justify-content: flex-start;
width: 33%;
display: block;
margin-left: 2.5%;
margin-top: -30.9%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle1Content .circle1Percent{
display: flex;
margin-left: auto;
margin-right: 1%;
margin-top: -13%;
width: 15%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle2Content .circle2Percent{
display: flex;
margin-left: 23%;
margin-top: -31%;
width: 15%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle3Content .circle3Percent{
display: flex;
margin-right: 23%;
margin-left: auto;
margin-top: -15%;
width: 15%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle4Content .circle4Percent{
display: flex;
margin-right: auto;
margin-left: 2%;
margin-top: -38%;
width: 15%;
opacity: 0;
}
.whyAgilePage .whyAgile .RHSwhyAgile span{
font: normal normal normal 23px/30px NewHelvetica;
letter-spacing: 0px;
color: #FAF8D7;
opacity: 0;
position: absolute;
/* right: 14%; */
right: 16%;
top: 1%;
}
.whyAgilePage .whyAgile .RHSwhyAgile p{
font: normal normal normal 25px/30px HelveticaNeueLt;
letter-spacing: 0px;
color: #FAF8D7;
text-align: end;
opacity: 0;
position: absolute;
width: 16%;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle1Content p{
top: 21%;
right: 12%;
width: 7%;
/* top: 29%;
right: 7%;
width:6%; */
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle2Content p{
top: 32%;
right: 27%;
width: 6%;
text-align: left;
/* top: 42%;
right: 23.5%;
width: 6%; */
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle3Content p{
right: 21%;
width: 12%;
bottom: 21%;
text-align: right;
}
.whyAgilePage .whyAgile .RHSwhyAgile .circle4Content p{
/* right: 32%;
width: 12%;
bottom: 9%; */
right: 33%;
width: 12%;
bottom: 7%;
text-align: left;
}
/**************************
Animation for Why Agile
**************************/
.SlidefromDown {
animation-name: SlidefromDown;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes SlidefromDown {
0% {
transform: translateY(+150%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.slidefromLeftQuickDiv{
animation-name:slidefromLeftQuick ;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slidefromLeftQuick{
0% { transform: translateX(-40%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slidefromRightQuickDiv{
animation-name:slidefromRightQuick ;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slidefromRightQuick{
0% { transform: translateX(50%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.rotateClkdiv {
animation-name: rotateClk;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes rotateClk {
from {
transform: rotate(45deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
.rotateAntiClkdiv {
animation-name: rotateAntiClk;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes rotateAntiClk {
from {
transform: rotate(-45deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
/* BEING AGILE SCREEN STYLES */
.cursorPointer{
cursor: pointer;
}
.beingAgilePage .beingAgile{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 10%;
width: 100%;
z-index: 3;
}
.beingAgilePage .beingAgile .leftHalf{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 47%;
}
.beingAgilePage .beingAgile .leftHalf .boxesLeft{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 9.5%;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 100%, 0) scale3d(.3, .3, .3);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.fadeInUp{
animation-name: fadeInUp;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.beingAgilePage .beingAgile .leftHalf .boxesLeft img{
width: 76%;
margin-left: 24%;
}
@keyframes slideInDown {
0% {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.slideInDown{
animation-name: slideInDown;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.beingAgilePage .beingAgile .leftHalf #agileSpanTextLeft{
font: normal normal normal 23px/30px NewHelvetica;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 0;
text-align: right;
}
.beingAgilePage .beingAgile .rightHalf #agileSpanTextRight{
font: normal normal normal 23px/30px NewHelvetica;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 0;
text-align: left;
}
@keyframes slideInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.slideInLeft{
animation-name: slideInLeft;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.slideInRight{
animation-name: slideInRight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.beingAgilePage .beingAgile .leftGradientImage{
height: 2em;
width: 75%;
display: block;
margin-top: 1.5%;
opacity: 0;
}
.beingAgilePage .beingAgile .rightGradientImage{
height: 2em;
width: 75%;
display: block;
margin-top: 1.5%;
opacity: 0;
}
.beingAgilePage .beingAgile .rightHalf{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 47%;
}
.beingAgilePage .beingAgile .rightHalf .boxesRight{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 10%;
}
.beingAgilePage .beingAgile .rightHalf .boxesRight img{
width: 75%;
}
.boxNeed , .boxDigital , .boxSpeed , .boxCustomer{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.textboxesGeneral{
color: #FAF7D8;
position: absolute;
bottom: 38%;
/* bottom: 39%; */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font: normal normal normal 23px/30px HelveticaNeueLt;
z-index: 2;
}
.textNeed{
/* left: 9%;
width: 12%; */
left: 16.5%;
width: 30%;
}
.textDigital{
/* left: 31%;
width: 16%; */
right: -1.5%;
width: 38.5%;
font-size: 21.5px !important;
}
.textSpeed{
/* right: 33%;
width: 12%; */
left: 5%;
width: 29%;
}
.textCustomer{
/* right: 9%;
width: 12%; */
right: 16.5%;
width: 30%;
}
.graphicNeed{
background: transparent url("../images/BeingAgile/graphic-need.png") 0% 0% no-repeat padding-box;
background-size: 24em;
width: 75%;
height: 15em;
margin-left: auto;
display: flex;
align-items: center;
position: relative;
z-index: -1;
}
.graphicTextNeed{
/* width: 15%;
margin-left: 1.5%; */
width: 92%;
margin-top: -14% !important;
}
.graphicTextGeneral{
color: #FFFFFF;
position: absolute;
z-index: 5;
display: flex;
/* margin-top: -1.5%; */
margin-top: -6.5%;
margin-left: 7%;
display: flex;
justify-content: center;
align-items: center;
font:normal normal normal 19px/25px HelveticaNeueLt;
}
.graphicDigital{
background: transparent url("../images/BeingAgile/graphic-digital.png") 0% 0% no-repeat padding-box;
background-size: 24em;
width: 75%;
height: 15em;
margin-left: auto;
display: flex;
align-items: center;
position: relative;
z-index: -1;
}
.graphicTextDigital{
width: 84%;
margin-left: 10%;
}
.graphicSpeed{
background: transparent url("../images/BeingAgile/graphic-speed.png") 0% 0% no-repeat padding-box;
background-size: 24em;
width: 75%;
height: 15em;
margin-right: auto;
display: flex;
align-items: center;
position: relative;
z-index: -1;
}
.graphicTextSpeed{
width: 82%;
margin-left: 10%;
margin-top: -12%;
/* margin-left: 2%; */
}
.graphicCustomer{
background: transparent url("../images/BeingAgile/graphic-customer.png") 0% 0% no-repeat padding-box;
background-size: 24em;
width: 75%;
height: 15em;
margin-right: auto;
display: flex;
align-items: center;
position: relative;
z-index: -1;
}
.graphicTextCustomer{
width: 82%;
font-size: 17px !important;
margin-top: -6%;
margin-left: 11.5%;
/* margin-left: 2%; */
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
to {
/* transform: scale3d(1, 1, 1); */
opacity: 1
}
}
.ZoomInDiv{
animation-name: zoomIn;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
.photoNeed , .graphicNeed , .photoDigital , .graphicDigital , .photoSpeed , .graphicSpeed , .photoCustomer , .graphicCustomer{
opacity: 0;
}
.boxNeedImage , .boxDigitalImage , .boxSpeedImage , .boxCustomerImage{
opacity: 1;
transition: all 1.5s ease-in-out;
}
/*****************
Business Value
*****************/
.businessValuePage .businessValue{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left:1%;
top: -10%;
width: 100%;
z-index: 3;
}
.businessValuePage .businessValue .LHSbussValue{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 67%;
}
.businessValuePage .businessValue .LHSbussValue .vsmArcImage{
width: 50%;
margin-left: 17%;
margin-top: 20%;
opacity: 0;
cursor: pointer;
}
.businessValuePage .businessValue .LHSbussValue .pplArcImage{
width: 17.8%;
margin-left: 63.25%;
margin-top: -34.5%;
opacity: 0;
cursor:pointer;
z-index: 3;
}
.businessValuePage .businessValue .LHSbussValue .photoCircle{
width: 43%;
margin-left: 27.45%;
margin-top: -53.5%;
opacity: 0;
}
.businessValuePage .businessValue .LHSbussValue .techArcImage{
width: 29.5%;
margin-left: 18.6%;
margin-top: -1.5%;
z-index: 3;
opacity: 0;
cursor:pointer;
}
.businessValuePage .businessValue .LHSbussValue .processArcImage{
width: 29%;
margin-left: 50.3%;
margin-top: -23.8%;
z-index: 2;
opacity: 0;
cursor:pointer;
}
.businessValuePage .businessValue .RHSbussValue{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 51%;
}
.businessValuePage .businessValue .LHSbussValue .blueBar{
background:url('../images/BusinessValue/bar-left.png') 0% 0% no-repeat padding-box;
background-size: 43.9em;
/* width: 42.7em; */
height: 7.7em;
margin-left: -2.95%;
margin-top: -9.5%;
opacity: 0;
}
.businessValuePage .businessValue .LHSbussValue .greyBar{
background:url('../images/BusinessValue/bar-right.png') 0% 0% no-repeat padding-box;
background-size: 85.5em;
width: 86em;
height: 8em;
margin-left: 50.3%;
margin-top: 18.5%;
opacity: 0;
}
.businessValuePage .businessValue .LHSbussValue .bussAgilityText{
width: 24%;
margin-left: 46%;
margin-top: -26%;
z-index: 3;
opacity: 0;
}
#arrowsOnGreyBar{
width: 45%;
margin-left: 49%;
margin-top: 1%;
opacity: 0;
}
.businessValuePage .businessValue .LHSbussValue .greyBar .textOnGreyBar{
margin-top: -5%;
margin-left: 36%;
opacity: 0;
}
.textOnGreyBar ul{
list-style-type: none;
overflow: hidden;
color: #FFFFFF;
}
.textOnGreyBar ul li{
float: left;
font: normal normal normal 28px/30px HelveticaNeueMed;
padding-left:8%;
letter-spacing: 0.5px;
z-index: 3;
}
.businessValuePage .businessValue .RHSbussValue span{
font: normal normal normal 21px/30px NewHelvetica;
letter-spacing: 0px;
color: #FFFFFF;
z-index: 4;
position: absolute;
}
.peoplePhotoText{
width: 29%;
top: 78%;
left: 45%;
}
.processPhotoText{
width: 33%;
top: 80%;
left: 43%;
}
.techPhotoText{
width: 31%;
top: 78%;
left: 45%;
}
.businessValuePage .businessValue .RHSbussValue .processDisplay{
opacity: 0;
position: absolute;
top: 13%;
left: 33.5%;
/* width: 57%; */
}
.businessValuePage .businessValue .RHSbussValue .peopleDisplay{
opacity:0;
position: absolute;
top: 12.5%;
left: 31.8%;
/* width: 60%; */
}
.businessValuePage .businessValue .RHSbussValue .techDisplay{
opacity:0;
position: absolute;
top: 13.5%;
left: 32.5%;
/* width: 60%; */
}
.businessValuePage .businessValue .RHSbussValue .peoplePhoto{
width:93.5%;
filter: brightness(134%);
}
.businessValuePage .businessValue .RHSbussValue .techPhoto{
width:92%;
filter: brightness(134%);
}
.businessValuePage .businessValue .RHSbussValue .processPhoto{
width: 92.5%;
filter: brightness(134%);
}
/*******************
Animation for Business Value
********************/
.rotateImagediv {
animation-name: rotateImage;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes rotateImage {
from {
transform: rotate(-65deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
.slideFromTopLeftDiv{
animation-name: slideFromTopLeft;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideFromTopLeft {
from {
margin-left: 5%;
margin-top: 12%;
opacity: 1;
}
to {
margin-left: 17%;
margin-top: 20%;
opacity: 1;
}
}
.slideDownVSMArc{
animation-name: slideDownVSM;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideDownVSM {
0% {
opacity: 0;
transform: translate3d(0, -30%, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideDownpplArc{
animation-name: slideDownppl;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideDownppl {
0% {
opacity: 0;
transform: translate3d(50%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideUpTechArc{
animation-name: slideUpTech;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideUpTech{
0% {
opacity: 0;
transform: translate3d(0, 30%, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideUpProcessArc{
animation-name: slideUpProcess;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideUpProcess {
from {
opacity: 0;
transform: translate3d(50%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.opacityGradualLowDiv{
animation-name: opacityGradualLow;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes opacityGradualLow{
from{
opacity:1;
}
to {
opacity: 0.5;
}
}
.opacityGradualHighDiv{
animation-name: opacityGradualHigh;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes opacityGradualHigh{
from{
opacity:0.85;
}
to {
opacity: 1;
}
}
/* VSM STYLES */
.vsmPage .vsm{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 10%;
width: 100%;
height: 80%;
z-index: 3;
}
.vsmPage .vsm .vsmLeft{
display: flex;
justify-content: center;
align-items: center;
width: 57%;
/* margin-top: auto; */
}
.vsmPage .vsm .vsmLeft .handCircle{
background: transparent url('../images/VSM/hand-circle.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 100%;
height: 53em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 10%;
z-index: 0;
opacity: 0;
}
.vsmPage .vsm .vsmLeft .handCircle .dial{
position: fixed;
background: transparent url('../images/VSM/dial.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 100%;
height: 66em;
z-index: 1;
transform: translate(100px, 25px) rotate(360deg);
opacity: 0;
display: flex;
justify-content: center;
align-items: center;
}
.vsmPage .vsm .vsmLeft .handCircle .centerCircles{
width: 49%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
opacity: 0;
cursor: pointer;
}
.iconAgile{
width: 50%;
margin-top: -25%;
}
.vsmPage .vsm .vsmLeft .handCircle .centerCircles .circleCenter{
width: 64%;
margin-left: auto;
margin-top: 7.5%;
margin-right: -2.5%;
}
.circleContent{
position: absolute;
width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.circleTextTitle{
text-align: center;
font: normal normal normal 32px/40px HelveticaNeueLt;
/* font-weight: bold; */
letter-spacing: 2px;
color: #FFFFFF;
opacity: 1;
position: absolute;
cursor: pointer;
}
#productText{
width: 58%;
/* top: 30%;
left: 3%; */
font: normal normal normal 26px/35px HelveticaNeueLt;
display: none;
cursor: pointer;
position: absolute;
z-index: 8;
}
#valueText{
width: 65%;
/* top: -25%;
right: 40.5%; */
font: normal normal normal 26px/35px HelveticaNeueLt;
display: none;
cursor: pointer;
position: absolute;
z-index: 8;
}
#disruptiveText{
width: 65%;
/* top: -25%;
right: -11%; */
font: normal normal normal 26px/35px HelveticaNeueLt;
display: none;
cursor: pointer;
position: absolute;
z-index: 8;
}
#agileText{
width: 67%;
font: normal normal normal 26px/35px HelveticaNeueLt;
display: none;
cursor: pointer;
position: absolute;
z-index: 8;
}
.show{
display: block;
}
.visibleClass{
visibility: visible !important;
}
.circleProduct{
cursor: pointer;
background: transparent url('../images/VSM/circle-product.png') 0% 0% no-repeat padding-box;
background-size: 100%;
/* width: 40%;
height: 12em; */
width: 21%;
height: 14em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* transform: rotate(190deg) translate(155px) rotate(-245deg); */
z-index: 2;
transform: translate(-165px,-25px);
opacity: 0;
}
.circleValue{
cursor: pointer;
background: transparent url('../images/VSM/circle-value.png') 0% 0% no-repeat padding-box;
background-size: 100%;
/* width: 40%;
height: 12em; */
width: 21%;
height: 14em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* transform: rotate(265deg) translate(215px) rotate(245deg); */
z-index: 2;
transform: translate(-25px,-220px);
opacity: 0;
}
.circleDisruptive{
cursor: pointer;
background: transparent url('../images/VSM/circle-disruptive.png') 0% 0% no-repeat padding-box;
background-size: 100%;
/* width: 40%;
height: 12em; */
width: 21%;
height: 14em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
transform: translate(230px,-222px);
opacity: 0;
/* transform: rotate(318deg) translate(310px) rotate(245deg); */
}
.circleAgile{
cursor: pointer;
background: transparent url('../images/VSM/circle-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
/* width: 40%;
height: 12em; */
width: 21%;
height: 14em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* transform: rotate(-3deg) translate(350px) rotate(245deg); */
z-index: 2;
transform: translate(375px,-30px);
opacity: 0;
}
.handCircleDiv{
animation-name: handCircleframe;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes handCircleframe {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0) scale3d(.3, .3, .3);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.centerCircleZoomDiv{
animation-name: centerCircleZoom;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes centerCircleZoom {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
to {
opacity: 1;
}
}
.iconAgileDiv{
animation-name: iconAgileFrame;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes iconAgileFrame {
0% {
opacity: 0;
margin: unset;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.valueStreamDiv{
animation-name: valueStreamFrame;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes valueStreamFrame {
0% {
opacity: 0;
left: unset;
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.dialDiv{
animation-name: dialFrame;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialFrame {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.vsmPage{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.vsmPage .vsm .vsmRight{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60%;
height: auto;
margin-top: auto;
margin-bottom: auto;
}
.divCenter{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 4;
bottom: 2%;
right: 10.5%;
}
.boxAgileQuoteTitle{
background: transparent url('../images/VSM/Agile_Leadership/box-quote-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 75%;
height: 10em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 3.5%;
z-index: 4;
opacity: 0;
}
.boxProductQuoteTitle{
background: transparent url('../images/VSM/Product_Focused/box-quote-product.png') 0% 0% no-repeat padding-box;
background-size: 95%;
width: 75%;
height: 9em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 3.5%;
z-index: 4;
opacity: 0;
}
.boxValueQuoteTitle{
background: transparent url('../images/VSM/Value_Flow/box-quote-value.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 69%;
height: 10em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 3.5%;
z-index: 4;
opacity: 0;
}
.boxDisruptiveQuoteTitle{
background: transparent url('../images/VSM/Disruptive_Innovation/box-quote-disruptive.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 69%;
height: 10em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 3.5%;
z-index: 4;
opacity: 0;
}
.agilePhoto{
width: 72%;
opacity: 0;
}
.productPhoto{
width: 72%;
opacity: 0;
}
.valuePhoto{
width: 72%;
opacity: 0;
}
.disruptivePhoto{
width: 72%;
opacity: 0;
}
.photoAgileHeader{
background: transparent url('../images/VSM/Agile_Leadership/box-header-agile.png') 0% 0% no-repeat padding-box;
background-size: 70%;
width: 23%;
height: 14em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: fixed;
margin-top: -24%;
margin-left: 2.5%;
z-index: -2;
opacity: 0;
}
.photoProductHeader{
background: transparent url('../images/VSM/Product_Focused/box-header-agile.png') 0% 0% no-repeat padding-box;
background-size: 70%;
width: 23%;
height: 14em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: fixed;
margin-top: -24%;
margin-left: 2.5%;
z-index: -2;
opacity: 0;
}
.photoValueHeader{
background: transparent url('../images/VSM/Value_Flow/box-header-agile.png') 0% 0% no-repeat padding-box;
background-size: 70%;
width: 23%;
height: 14em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: fixed;
margin-top: -24%;
margin-left: 2.5%;
z-index: -2;
opacity: 0;
}
.photoDisruptiveHeader{
background: transparent url('../images/VSM/Disruptive_Innovation/box-header-agile.png') 0% 0% no-repeat padding-box;
background-size: 70%;
width: 23%;
height: 14em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: fixed;
margin-top: -24%;
margin-left: 2.5%;
z-index: -2;
opacity: 0;
}
.boxPhotoAgile{
background: transparent url('../images/VSM/Agile_Leadership/box-copy-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 27%;
height: 16em;
display: flex;
justify-content: end;
align-items: center;
position: absolute;
right: -2%;
z-index: -1;
opacity: 0;
}
.boxPhotoProduct{
background: transparent url('../images/VSM/Product_Focused/box-copy-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 28%;
height: 16em;
display: flex;
justify-content: end;
align-items: center;
position: absolute;
right: -7%;
z-index: -1;
opacity: 0;
}
.boxPhotoValue{
background: transparent url('../images/VSM/Value_Flow/box-copy-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 28%;
height: 16em;
display: flex;
justify-content: end;
align-items: center;
position: absolute;
right: -3%;
z-index: -1;
opacity: 0;
}
.boxPhotoDisruptive{
background: transparent url('../images/VSM/Disruptive_Innovation/box-copy-agile.png') 0% 0% no-repeat padding-box;
background-size: 100%;
width: 28%;
height: 16em;
display: flex;
justify-content: end;
align-items: center;
position: absolute;
right: -7%;
z-index: -1;
opacity: 0;
}
.boxQuoteContent{
font: normal normal normal 22px/28px HelveticaNeueLt;
letter-spacing: 0px;
color: #FAF7D8;
width: 89%;
margin-bottom: 1%;
}
.photoHeaderTitle{
font: normal normal normal 23px/28px HelveticaNeueLt;
letter-spacing: 1px;
color: #FAF7D8;
margin-bottom: auto;
margin-left: 12%;
margin-top: 8.5%;
width: 75%;
}
.photoAgileList{
font: normal normal normal 20px/28px HelveticaNeueLt;
letter-spacing: 0px;
color: #FFFFFF;
list-style: none;
margin-right: 21.5%;
margin-bottom: 20%;
line-height: 2;
list-style-type: disc;
}
.dialToAgileDiv{
animation-name: dialToAgile;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialToAgile {
0% {
transform: translate(100px, 25px);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1
}
}
.dialToDisruptiveDiv{
animation-name: dialToDisruptive;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialToDisruptive {
0% {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1
}
}
.dialToValueDiv{
animation-name: dialToValue;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialToValue {
0% {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1
}
}
.dialToProductDiv{
animation-name: dialToProduct;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialToProduct {
0% {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1
}
}
.zoomCircleAgileDiv {
animation-name: zoomCircleAgile;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomCircleAgile {
0% {
opacity: 1;
transform: translate(375px,-30px);
}
to {
opacity: 1;
transform:translate(397px,-30px) scale(1.22);
}
}
.zoomOutAgileDiv {
animation-name: zoomOutAgile;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomOutAgile {
100% {
opacity: 0.5;
transform: translate(375px,-30px);
}
0%{
opacity: 1;
transform: translate(397px,-30px) scale(1.22);
}
}
.zoomCircleDisruptiveDiv{
animation-name: zoomCircleDisruptive;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomCircleDisruptive {
0% {
opacity: 1;
transform: translate(230px,-222px);
}
to {
opacity: 1;
transform: translate(230px,-250px) scale(1.22);
}
}
.zoomOutDisruptiveDiv {
animation-name: zoomOutDisruptive;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomOutDisruptive {
100% {
opacity: 0.5;
transform: translate(230px,-222px);
}
0%{
opacity: 1;
transform: translate(230px,-250px) scale(1.22);
}
}
.zoomCircleValueDiv {
animation-name: zoomCircleValue;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomCircleValue {
0% {
opacity: 1;
transform: translate(-25px,-220px);
}
to {
opacity: 1;
transform:translate(-25px,-250px) scale(1.22);
}
}
.zoomOutValueDiv {
animation-name: zoomOutValue;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomOutValue {
100% {
opacity: 0.5;
transform: translate(-25px,-220px);
}
0%{
opacity: 1;
transform: translate(-25px,-250px) scale(1.22);
}
}
.zoomCircleProductDiv {
animation-name: zoomCircleProduct;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomCircleProduct {
0% {
opacity: 1;
transform: translate(-165px,-25px);
}
to {
opacity: 1;
transform:translate(-190px,-25px) scale(1.22);
}
}
.zoomOutProductDiv {
animation-name: zoomOutProduct;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomOutProduct {
100% {
opacity: 0.5;
transform: translate(-165px,-25px);
}
0%{
/* opacity: 1; */
transform: translate(-190px,-25px) scale(1.22);
}
}
.ease-rotation {
transition: all 0.5 ease-out;
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.animate__fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.animate__slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
animation-fill-mode: forwards;
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateZ(0);
transform: translate3d(0, -100%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -100%, 0);
transform: translateZ(0);
}
}
.animate__slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
animation-fill-mode: forwards;
}
.disableCursor{
pointer-events: none;
}
.dialDisruptiveLoadDiv{
animation-name: dialDisruptiveLoad;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialDisruptiveLoad{
0% {
transform: translate(100px, 25px);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1
}
}
.dialAgilefromDisDiv{
animation-name: dialAgilefromDis;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialAgilefromDis{
0% {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1
}
}
.dialValuefromDisDiv{
animation-name: dialValuefromDis;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialValuefromDis{
0% {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1
}
}
.dialProductfromDisDiv{
animation-name: dialProductfromDis;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialProductfromDis{
0% {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1
}
}
.dialValueLoadDiv{
animation-name: dialValueLoad;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialValueLoad{
0% {
transform: translate(100px, 25px);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1
}
}
.dialAgilefromValDiv{
animation-name: dialAgilefromVal;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialAgilefromVal{
0% {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1
}
}
.dialDisruptivefromValDiv{
animation-name: dialDisruptivefromVal;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialDisruptivefromVal{
0% {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1
}
}
.dialProductfromValDiv{
animation-name: dialProductfromVal;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialProductfromVal{
0% {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1
}
}
.dialProductLoadDiv{
animation-name: dialProductLoad;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialProductLoad{
0% {
transform: translate(100px, 25px);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1
}
}
.dialValuefromProdDiv{
animation-name: dialValuefromProd;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialValuefromProd{
0% {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(-35deg);
opacity: 1
}
}
.dialDisruptivefromProdDiv{
animation-name: dialDisruptivefromProd;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialDisruptivefromProd{
0% {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(20deg);
opacity: 1
}
}
.dialAgilefromProdDiv{
animation-name: dialAgilefromProd;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes dialAgilefromProd{
0% {
transform: translate(100px, 25px) rotate(-90deg);
opacity: 1;
}
to {
transform: translate(100px, 25px) rotate(70deg);
opacity: 1
}
}
.zoomInVSMDiv{
animation-name: zoomIn;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes zoomInVSM {
from {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
to {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
/* END OF VSM STYLES */
/*****************
Business Agility
*****************/
.businessAgilityPage .businessAgility{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left:0%;
width: 100%;
z-index: 3;
}
.businessAgilityPage .businessAgility .topHalf{
display: flex;
flex-direction: row;
justify-content: space-between;
/* width: 100%; */
}
.businessAgilityPage .businessAgility .bottomHalf{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 28%;
}
.buttonFrameDiv{
position: absolute;
top: 64%;
left: 22%;
/* height: 49%; */
height: auto;
width: 70%;
}
.divsForHex{
background:url('../images/BusinessAgility/button-frame.png') 0% 0% no-repeat padding-box;
background-size: 76em;
height: 41em;
opacity: 0;
position: relative;
z-index: 12;
}
/******* All Header Images ********/
.topHalfImages{
position:absolute;
height:10%;
width:100%;
top:0%;
left:0%;
}
.businessAgilityPage .businessAgility .topHalf .bussAgilityHomeImage{
opacity:0%;
width:100%;
}
#imageLearning, #imageOCM, #imageData, #imageLeadership, #imageDevops, #imageAgile, #imageVSM, #imageVision{
opacity:0%;
width:100%;
}
/********** All Header, Ribbons, Text and Icons *********/
/** LEARNING****/
.contentLearning{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarLearning{
height: 10%;
width: 63%;
}
#headerIconLearning{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 0.5%;
}
.headerLearning{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 29%;
margin-top: 2%;
margin-left: 17%;
}
.headerTextLearning{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 30%;
margin-top: 12%;
margin-left: 15%;
text-align: right;
}
/**** OCM ****/
#imageOCM{
position: absolute;
top: 0%;
left:0%;
}
.contentOCM{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarOCM{
height: 10%;
width: 63%;
}
#headerIconOCM{
height: 10%;
width: 3.8%;
margin-left: -8%;
margin-top: 1.4%;
}
.headerOCM{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 7%;
margin-top: 2%;
margin-left: 37.5%;
}
.headerTextOCM{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 29%;
margin-top: 12%;
margin-left: 15%;
text-align: right;
}
/**** Data ****/
#imageData{
position: absolute;
top: 0%;
left:0%;
}
.contentData{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarData{
height: 10%;
width: 63%;
}
#headerIconData{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1.3%;
}
.headerData{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 12%;
}
.headerTextData{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 26%;
margin-top: 12%;
margin-left: 19%;
text-align: right;
}
/**** Leadership ****/
#imageLeadership{
position: absolute;
top: 0%;
left:0%;
}
.contentLeadership{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarLeadership{
height: 10%;
width: 63%;
}
#headerIconLeadership{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1%;
}
.headerLeadership{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 26.5%;
}
.headerTextLeadership{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 29%;
margin-top: 12%;
margin-left: 15%;
text-align: right;
}
/**** DevOps ****/
#imageDevOps{
position: absolute;
top: 0%;
left:0%;
width:100%;
opacity: 0;
}
.contentDevOps{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarDevOps{
height: 10%;
width: 63%;
}
#headerIconDevOps{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1%;
}
.headerDevOps{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 31.5%;
}
.headerTextDevOps{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 26%;
margin-top: 12%;
margin-left: 18%;
text-align: right;
}
/**** Agile ****/
#imageAgile{
position: absolute;
top: 0%;
left:0%;
}
.contentAgile{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarAgile{
height: 10%;
width: 63%;
}
#headerIconAgile{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1%;
}
.headerAgile{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 29%;
}
.headerTextAgile{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 26%;
margin-top: 12%;
margin-left: 17.5%;
text-align: right;
}
/**** VSM ****/
#imageVSM{
position: absolute;
top: 0%;
left:0%;
}
.contentVSM{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarVSM{
height: 10%;
width: 63%;
}
#headerIconVSM{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1%;
}
.headerVSM{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 37%;
}
.headerTextVSM{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 28%;
margin-top: 12%;
margin-left: 15%;
text-align: right;
}
/**** Vision ****/
#imageVision{
position: absolute;
top: 0%;
left:0%;
}
.contentVision{
position: absolute;
left: -2%;
top: 29%;
display: flex;
opacity: 0;
}
#headerBarVision{
height: 10%;
width: 63%;
}
#headerIconVision{
height: 10%;
width: 4.8%;
margin-left: -9%;
margin-top: 1%;
}
.headerVision{
font: normal normal normal 29px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FAF7D8;
z-index: 4;
width: 35%;
margin-top: 2%;
margin-left: 15.5%;
}
.headerTextVision{
font: normal normal normal 20px/30px NewHelvetica;
letter-spacing: 0.5px;
color: #FFFFFF;
/* z-index: 4; */
width: 28%;
margin-top: 12%;
margin-left: 15%;
text-align: right;
}
/***** All Hex Icons ****/
#iconLearning{
position: absolute;
top: 12.8%;
left: 11.5%;
width: 2.5%;
opacity:0;
}
#iconOCM{
position: absolute;
top: 35.6%;
left: 2.1%;
width: 2.1%;
opacity:0;
}
#iconData{
position: absolute;
top: 58.5%;
left: 11.85%;
width: 2.8%;
opacity:0;
}
#iconLeadership{
position: absolute;
top: 81.1%;
left: 21.75%;
width: 2.5%;
opacity:0;
}
#iconDevOps{
position: absolute;
top: 80.5%;
right: 40.5%;
width: 2.5%;
opacity:0;
}
#iconAgile{
position: absolute;
top: 57.4%;
right: 30.4%;
width: 2.9%;
opacity:0;
}
#iconVSM{
position: absolute;
top: 35.4%;
right: 20.9%;
width: 2.5%;
opacity:0;
}
#iconVision{
position: absolute;
width: 2.5%;
top: 13%;
right: 30.5%;
opacity:0;
}
/****** All Hex Texts and Shape *****/
.businessAgilityPage .businessAgility span, p{
font: normal normal normal 19px/30px HelveticaNeueLt;
letter-spacing: 1px;
/* color: #FFFFFF; */
color: rgb(255,255,255);
z-index: 4;
position: absolute;
}
.hexShapes{
position: absolute;
top: 4%;
left: 14%;
cursor: pointer;
/* opacity: 0; */
}
#hexLearning{
width: 65%;
margin-top: -3.3%;
margin-left: 13.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textLearning{
/* margin-top: 13%;
margin-left: -42%;
width: 5%;
text-align-last: center; */
/* margin-left: 30%; */
width: 27%;
text-align: center;
opacity: 0;
}
#hexOCM{
width: 65%;
margin-top: -8%;
margin-left: -35.5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textOCM{
/* margin-top: 18%;
margin-left: -38.5%;
width: 0%; */
width: 27%;
text-align: center;
opacity: 0;
}
#hexData{
width: 65%;
margin-top: -8%;
margin-left: 13%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textData{
/* margin-top: 13%;
margin-left: -48%; */
width: 36%;
text-align: center;
opacity: 0;
}
#hexLeadership{
width: 65%;
margin-top: -7%;
margin-left: 61%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textLeadership{
/* margin-top: 20%;
margin-left: -46%; */
width: 33%;
text-align: center;
opacity: 0;
}
#hexDevOps{
width: 65%;
margin-top: -56.5%;
margin-left: 134%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textDevOps{
/* margin-top: 21%;
margin-left: -40%; */
width: 25%;
text-align: center;
opacity: 0;
}
#hexAgile{
width: 65%;
margin-top: -106%;
margin-left: 182%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textAgile{
/* margin-top: 20%;
margin-left: -44.5%; */
width: 29%;
text-align: center;
opacity: 0;
}
#hexVSM{
width: 65%;
margin-top: -105%;
margin-left: 231%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textVSM{
/* margin-top: 20.5%;
margin-left: -36%; */
width: 15%;
text-align: center;
opacity: 0;
}
#hexVision{
width: 65%;
margin-top: -104%;
margin-left: 182%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
opacity: 0.85;
}
#textVision{
/* margin-top: 15%;
margin-left: -43%; */
width: 29%;
text-align: center;
opacity: 0;
}
.bussAgilityIcon{
background:url('../images/BusinessAgility/icon-business-agility.png') 0% 0% no-repeat padding-box;
background-size: 10.5em;
position: absolute;
height: 9em;
width: 10.5em;
top: auto;
left: 46.5%;
margin-top: 1.5%;
opacity: 0;
}
#textBussAgility{
margin-top: 33%;
margin-top: 33%;
margin-left: 32.5%;
font-size: 26px;
opacity: 0;
text-transform: uppercase;
color: #FAF7D8 !important;
}
/*******************
Animation for Business Agility
********************/
@keyframes rotateInDownLeft {
0% {
transform: rotate(-90deg);
opacity: 0
}
to {
transform: translateZ(0);
opacity: 1
}
}
.rotateButtonFrame{
animation-name: rotateInDownLeft;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes rotateInDownRight {
0% {
transform: rotate(90deg);
opacity: 0
}
to {
transform: translateZ(0);
opacity: 1
}
}
.rotateHexFrame{
animation-name: rotateInDownRight;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes slideInLeftIcons {
0% {
opacity: 0;
transform: translate3d(-900%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideInLeftIcons{
animation-name: slideInLeftIcons;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes slideInRightIcons {
0% {
opacity: 0;
transform: translate3d(500%, 0, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideInDownText{
animation-name: slideInDownText;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideInDownText {
0% {
opacity: 0;
transform: translate3d(0, -500%, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.slideInUpText{
animation-name: slideInUpText;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideInUpText {
0% {
opacity: 0;
transform: translate3d(0, 500%, 0);
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.fadeInRightText {
animation-name: fadeInRightText;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes fadeInRightText {
0% {
opacity: 0;
transform: translate3d(500%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.fadeInLeftText {
animation-name: fadeInLeftText;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes fadeInLeftText {
0% {
opacity: 0;
transform: translate3d(-500%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.slideInRightIcons{
animation-name: slideInRightIcons;
animation-duration: 2.5s;
animation-fill-mode: forwards;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.fadeInRight {
animation-name: fadeInRight;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
transform: translateZ(0)
}
}
.fadeInLeft {
animation-name: fadeInLeft;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideInUp {
0% {
transform: translate3d(0, 100%, 0);
opacity: 0;
}
to {
opacity: 1;
transform: translateZ(0);
}
}
.slideInUp {
animation-name: slideInUp;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
.textAgilityPos{
animation-name: textAgilityPos;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes textAgilityPos{
0% {
opacity: 1;
top:-79%;
}
50%{
opacity: 1;
top:-59%;
}
100% {
opacity: 1;
top:-17%;
}
}
.ZoomInAgilityIcon{
animation-name: zoomInAgilityIcon;
animation-duration: 3s !important;
animation-fill-mode: forwards;
}
@keyframes zoomInAgilityIcon {
0% {
opacity: 1;
transform: scale3d(5, 5, 5);
top:30%;
}
50% {
transform:scale3d(1, 1, 1);
opacity: 1;
top:50%;
}
100% {
transform:scale3d(1, 1, 1);
opacity: 1;
top:100%;
}
}
@keyframes slideInDownImages {
0% {
opacity: 60% ;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 60% ;
transform: translateZ(0);
}
}
.slideInDownImages{
animation-name: slideInDownImages;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.opacityLow{
opacity:50% !important;
}
.opacityHigh{
opacity:100% !important;
}
.fadeOut {
animation-name: fadeOut;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeOut {
0% {
opacity: 60%;
}
to {
opacity: 0;
}
}
.hideHeaderContent{
animation-name: hideHeaderContent;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes hideHeaderContent {
0% {
opacity: 0;
}
to {
opacity: 0;
}
}
/* END OF BUSINESS AGILITY STYLES */
/******************
Opportunities
****************/
.opportunitiesPage .opportunities{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
z-index: 3;
}
.headContent{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 80%;
margin-left: -4%;
}
.headerArrowGen{
width: 5%;
margin-top: 5%;
height: 1%;
margin-left: 1%;
opacity:0;
}
.headerTextOutcome{
font: normal normal normal 23px/30px HelveticaNeueLt;
text-align: right;
color: #FAF7D8;
letter-spacing: 1.5px;
margin-top: 5.5%;
width: 22%;
line-height: 23px;
opacity: 0;
}
.headerTextGen{
font: normal normal normal 19px/30px HelveticaNeueLt;
letter-spacing: 1px;
color: #FFFFFF;
text-align: right;
line-height: 20px;
opacity: 0;
}
.headerText1{
margin-top: 5.5%;
width:10%;
}
.headerText2{
margin-top: 5.5%;
width:10%;
}
.headerText3{
margin-top: 6%;
width: 8%;
}
.headerText4{
margin-top: 6%;
width:10%;
}
.mainContent{
display: flex;
align-items: center;
justify-content: space-between;
width: 72%;
position: absolute;
height: 53em;
width: 80%;
margin-top: 60%;
left: 9%;
/* background-color: aqua; */
}
.mainSlices{
display: flex;
align-items: center;
justify-content: center;
/* background-color: bisque; */
position: absolute;
height: 53em;
width: 30em;
left: 37%;
}
#slice1{
position: absolute;
width: 72%;
top: 6%;
opacity: 0;
}
.slice1Text{
font: normal normal normal 24px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FAF7D8;
text-align: center;
line-height: 26px;
width: 33.5%;
position: absolute;
top: 19%;
z-index: 3;
opacity: 0;
}
.slice1Click{
cursor: pointer;
}
#slice5{
position:absolute;
width: 72%;
bottom: 2%;
opacity: 0;
}
.slice5Text{
font: normal normal normal 24px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FAF7D8;
text-align: center;
line-height: 26px;
width: 25.5%;
position: absolute;
bottom: 18%;
left: 37.5%;
z-index: 3;
opacity: 0;
}
.RHSText{
font: normal normal normal 16px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align:right;
line-height: 26px;
cursor: pointer;
}
.topSlices{
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: aquamarine; */
position: absolute;
height: 12em;
width: 57em;
left: 25%;
top: 0%;
}
#slice2{
position: absolute;
width: 25%;
margin-top: 37%;
right: 13.2%;
opacity: 0;
}
.slice2Text{
width: 16%;
margin-top: 38%;
margin-left: 67%;
opacity: 0;
cursor: pointer;
z-index: 6;
}
#slice8{
position: absolute;
width: 25%;
margin-top: 37%;
left: 10.5%;
opacity: 0;
}
.slice8Text{
width: 13%;
position: absolute;
top: 126%;
left: 18%;
opacity: 0;
z-index:5;
}
.middleSlices{
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: aquamarine; */
position: absolute;
height: 12em;
width: 57em;
left: 25%;
top:21%;
}
#slice3{
position: absolute;
width: 24%;
margin-top: 35%;
right: 8.2%;
opacity: 0;
}
.slice3Text{
width: 16%;
margin-top: 35%;
margin-left: 72%;
opacity: 0;
cursor: pointer;
}
#slice7{
position: absolute;
width: 24%;
margin-top: 35%;
left: 5.3%;
opacity: 0;
}
.slice7Text{
width: 15%;
position: absolute;
margin-top: 35%;
margin-left: 11%;
opacity: 0;
}
.bottomSlices{
display: flex;
align-items: center;
justify-content: space-between;
/* background-color: aquamarine; */
position: absolute;
height: 12em;
width: 57em;
left: 25%;
bottom: 0%;
}
#slice4{
position: absolute;
width: 25%;
margin-bottom: 32.5%;
right: 13.2%;
opacity: 0;
}
.slice4Text{
width: 14%;
margin-top: -33%;
margin-left: 67.5%;
opacity: 0;
cursor: pointer;
z-index: 4;
}
#slice6{
position: absolute;
width: 25%;
margin-bottom: 32.5%;
left: 10.5%;
opacity: 0;
}
.slice6Text{
width: 10%;
position: absolute;
top: -42%;
left: 18%;
opacity: 0;
cursor: pointer;
}
.slice5Click{
cursor: pointer;
}
.LHSText{
font: normal normal normal 16px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: left;
line-height: 26px;
cursor: pointer;
}
.mainIcon{
background:url('../images/Opportunities/icon-center.png') 0% 0% no-repeat padding-box;
background-size: 100%;
position: absolute;
z-index: 0;
height: 13em;
width: 13em;
left: 45%;
top: 40%;
opacity: 0;
}
.mainIconText{
font: normal normal normal 21px/30px HelveticaNeueLt;
letter-spacing: 0.5px;
color: #FAF7D8;
text-align: center;
line-height: 26px;
cursor: pointer;
position: absolute;
z-index: 2;
width: 102%;
top: 32%;
left: 0%;
opacity: 0;
}
.iconTextGenRHS{
font: normal normal normal 16px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: left;
line-height: 26px;
}
#slice2Icon{
position: absolute;
top: 3%;
right: 17%;
width: 13%;
opacity: 0;
}
.slice2IconText{
width: 9%;
position: absolute;
top: 4%;
right: 7%;
opacity: 0;
}
#slice3Icon{
position: absolute;
margin-top: -2.5%;
/* right: 8%; */
width: 16%;
opacity: 0;
}
.slice31IconText{
width: 7%;
position: absolute;
margin-top: -8%;
margin-left: 94%;
opacity: 0;
}
.slice32IconText{
width: 4%;
position: absolute;
margin-top: 6%;
margin-left: 94%;
opacity: 0;
}
#slice4Icon{
position: absolute;
top: 79%;
left: 71%;
width: 13%;
opacity: 0;
}
.slice4IconText{
width: 9%;
position: absolute;
top: 93%;
left: 86%;
opacity: 0;
}
.iconTextGenLHS{
font: normal normal normal 16px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: right;
line-height: 26px;
}
#slice6Icon{
position: absolute;
top: 79%;
left: 21%;
width: 11%;
opacity: 0;
}
.slice6IconText{
width: 9%;
position: absolute;
bottom: 2%;
left: 10%;
opacity: 0;
}
#slice7Icon{
position: absolute;
margin-top: -10%;
margin-left: -90%;
width: 16%;
opacity: 0;
}
.slice71IconText{
width: 13%;
position: absolute;
top: 62%;
left: -5%;
opacity: 0;
}
.slice72IconText{
width: 7%;
position: absolute;
top: 36%;
left: 1%;
opacity: 0;
}
#slice8Icon{
position: absolute;
margin-top: -24%;
margin-left: -81%;
width: 13%;
opacity: 0;
}
.slice8IconText{
width: 11%;
position: absolute;
top: 4%;
left: 6%;
opacity: 0;
z-index:5;
}
/**************************
Animation for Opportunities
****************************/
.slidefromLeftArrows{
animation-name:slidefromLeftArrows ;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slidefromLeftArrows{
0% { transform: translateX(-250%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slideSlicefromRightDiv{
animation-name:slideSlicefromRight;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideSlicefromRight{
0% { transform: translateX(150%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slideSlicefromLeftDiv{
animation-name:slideSlicefromLeft;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes slideSlicefromLeft{
0% { transform: translateX(-150%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slideIcon2Div{
animation-name:slideIcon2;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon2{
from {
top: 18%;
right: 27%;
}
to {
top: 3%;
right: 17%;
opacity: 1;
}
}
.slideIcon3Div{
animation-name:slideIcon3;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon3{
0% {
top: 33%;
right: 18%;
}
100% {
top: 33%;
right: 8%;
opacity: 1;
}
}
.slideIcon4Div{
animation-name:slideIcon4;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon4{
0% {
top: 68%;
left: 62%;
}
100% {
top: 79%;
left: 71%;
opacity: 1;
}
}
.slideIcon6Div{
animation-name:slideIcon6;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon6{
0% {
top: 63%;
left: 31%;
}
100% {
top: 79%;
left: 21%;
opacity: 1;
}
}
.slideIcon7Div{
animation-name:slideIcon7;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon7{
0% {
margin-top: -10%;
margin-left: -80%;
}
100% {
margin-top: -10%;
margin-left: -90%;
opacity: 1;
}
}
.slideIcon8Div{
animation-name:slideIcon8;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slideIcon8{
0% {
margin-top: -21%;
margin-left: -75%;
}
100% {
margin-top: -24%;
margin-left: -81%;
opacity: 1;
}
}
/* END OF OPPORTUNITIES STYLES */
/******************
Product Centric
****************/
.productCentricPage .productCentric{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
z-index: 3;
height: auto;
}
.productCentricPage .productCentric .topCircles{
flex: 1;
width: 50%;
height: 25em;
}
.circle{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 81.5%;
position: absolute;
top: 1%;
left: 5%;
margin-top: 10%;
height: auto;
}
#circle1Identify{
position: absolute;
margin-top: 2%;
margin-left: 1%;
width: 25%;
z-index: -1;
opacity: 0;
}
#circle1Arrows{
margin-top: 9%;
margin-left: 5%;
width: 98%;
z-index: 1;
opacity: 0;
}
.circle1Bullets{
z-index: 2;
opacity: 0;
}
#circle1Bullet1{
position: absolute;
top: 14%;
left: 5%;
width: 2%;
}
#circle1Bullet2{
position: absolute;
top: 6%;
left: 14%;
width: 2%;
}
#circle1Bullet3{
position: absolute;
top: 18%;
left: 21%;
width: 2%;
}
.productCentricPage .productCentric span{
font: normal normal normal 18px/30px HelveticaNeueLt;
font-weight: bold;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: left;
line-height: 19px;
position:absolute;
}
.circle1Bullet1Text{
margin-top: -24%;
margin-left: -1%;
width: 5%;
}
.circle1Bullet2Text{
margin-top: -26.5%;
margin-left: 12%;
}
.circle1Bullet3Text{
margin-top: -22%;
margin-left: 24%;
width: 5%;
}
.circle1Header{
background:url('../images/ProductCentric/header-circle-01.png') 0% 0% no-repeat padding-box;
background-size: 10em;
position: absolute;
width: 8%;
height: 9%;
left: 17.8%;
top: 48%;
opacity:0;
}
#circle1HeaderText{
margin-left: 12%;
margin-top: 5%;
font-size: 24px;
}
.circle1SubHeader{
background:url('../images/ProductCentric/capsule-01.png') 0% 0% no-repeat padding-box;
background-size: 5em;
position: absolute;
width: 14%;
height: 11%;
left: 16%;
top: 59%;
opacity:0;
}
#circle1SubHeaderText{
margin-left: 6%;
margin-top: 0.7%;
font-size: 15px;
}
/*** Circle 2 ***/
#circle2Experiment{
position: absolute;
margin-top: 2%;
margin-left: 4%;
width: 25%;
z-index: -1;
opacity: 0;
}
#circle2Arrows{
margin-top: 9%;
margin-left: 20%;
width: 98%;
z-index: 1;
opacity: 0;
}
.circle2Bullets{
z-index: 2;
opacity: 0;
}
#circle2Bullet1{
position: absolute;
top: 88%;
left: 35%;
width: 2%;
}
#circle2Bullet2{
position: absolute;
top: 88.5%;
left: 46%;
width: 2%;
}
#circle2Bullet3{
position: absolute;
top: 5%;
left: 42%;
width: 2%;
}
.circle2Bullet1Text{
margin-top: -0.8%;
margin-left: 5%;
width: 7%;
}
.circle2Bullet2Text{
margin-top: -0.8%;
margin-left: 22%;
width: 5%;
}
.circle2Bullet3Text{
margin-top: -27%;
margin-left: 16.5%;
}
.circle2Header{
background:url('../images/ProductCentric/header-circle-02.png') 0% 0% no-repeat padding-box;
background-size: 10em;
position: absolute;
width: 8%;
height: 9%;
left: 46%;
top: 48%;
opacity: 0;
}
#circle2HeaderText{
margin-left: 28%;
margin-top: 9%;
font-size: 24px;
}
.circle2SubHeader{
background:url('../images/ProductCentric/capsule-02.png') 0% 0% no-repeat padding-box;
background-size: 5em;
position: absolute;
width: 14%;
height: 11%;
left: 44%;
top: 59%;
opacity: 0;
}
#circle2SubHeaderText{
margin-left: 6%;
margin-top: 0.7%;
font-size: 15px;
}
/*** Circle 3 ***/
#circle3Build{
position: absolute;
margin-top: 2%;
margin-left: 8%;
width: 26%;
z-index: -1;
opacity: 0;
}
#circle3Arrows{
margin-top: 8%;
margin-left: 34%;
width: 100%;
z-index: 1;
opacity: 0;
}
.circle3Bullets{
z-index: 2;
opacity: 0;
}
#circle3Bullet1{
position: absolute;
top: 16%;
left: 61%;
width: 2%;
}
#circle3Bullet2{
position: absolute;
top: 5%;
right: 28%;
width: 2%;
}
#circle3Bullet3{
position: absolute;
top: 19%;
right: 19%;
width: 2%;
}
#circle3Bullet4{
position: absolute;
top: 93%;
right: 23%;
width: 2%;
}
.circle3Bullet1Text{
margin-top: -23%;
margin-left: 9%;
}
.circle3Bullet2Text{
margin-top: -27.5%;
margin-left: 20%;
}
.circle3Bullet3Text{
margin-top: -22%;
margin-left: 32%;
}
.circle3Bullet4Text{
margin-top: 0.5%;
margin-left: 26%;
}
.circle3Header{
background:url('../images/ProductCentric/header-circle-03.png') 0% 0% no-repeat padding-box;
background-size: 10em;
position: absolute;
width: 8%;
height: 9%;
right: 16.5%;
top: 48%;
opacity: 0;
}
#circle3HeaderText{
margin-left: 12%;
margin-top: 9%;
font-size: 24px;
}
.circle3SubHeader{
background:url('../images/ProductCentric/capsule-03.png') 0% 0% no-repeat padding-box;
background-size: 5em;
position: absolute;
width: 14%;
height: 11%;
right: 12%;
top: 59%;
opacity: 0;
}
#circle3SubHeaderText{
margin-left: 6%;
margin-top: 0.7%;
font-size: 15px;
}
/*** Circle 4 ***/
#circle4Scale{
position: absolute;
margin-top: 2%;
margin-left: 11%;
width: 26%;
z-index: -1;
opacity: 0;
}
#circle4Arrows{
margin-top: 9%;
margin-left: 45%;
width: 100%;
z-index: 1;
opacity: 0;
}
.circle4Bullets{
z-index: 2;
opacity: 0;
}
#circle4Bullet1{
position: absolute;
top: 14%;
right: 8%;
width: 2%;
}
#circle4Bullet2{
position: absolute;
top: 12%;
right: -7%;
width: 2%;
}
#circle4Bullet3{
position: absolute;
top: 90%;
right: 6%;
width: 2%;
}
.circle4Bullet1Text{
margin-top: -24%;
margin-left: 11.5%;
}
.circle4Bullet2Text{
margin-top: -24.5%;
margin-left: 33%;
}
.circle4Bullet3Text{
margin-top: -1%;
margin-left: 14%;
}
.circle4Header{
background:url('../images/ProductCentric/header-circle-04.png') 0% 0% no-repeat padding-box;
background-size: 10em;
position: absolute;
width: 8%;
height: 9%;
right: -12%;
top: 48%;
opacity: 0;
}
#circle4HeaderText{
margin-left: 12%;
margin-top: 9%;
font-size: 24px;
}
.circle4SubHeader{
background:url('../images/ProductCentric/capsule-04.png') 0% 0% no-repeat padding-box;
background-size: 9em;
position: absolute;
width: 10%;
height: 11%;
right: -10%;
top: 59%;
opacity: 0;
}
#circle4SubHeaderText{
margin-left: 18%;
margin-top: 2.7%;
font-size: 14px;
line-height: 14px;
}
.productCentricPage .productCentric .belowBars{
flex: 2;
width: 50%;
height: 25em;
}
.bar{
display: flex;
justify-content: space-between;
width: 70%;
position: absolute;
top: 52em;
left: 5em;
height: auto;
}
.barHeaders{
font: normal normal normal 27px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FAF7D8;
text-align: left;
line-height: 19px;
position:absolute;
margin-top: -2%;
margin-left: 3%;
opacity: 0;
}
.barSubHeader{
font: normal normal normal 19px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: left;
line-height: 19px;
position:absolute;
margin-top: 3%;
margin-left: 3%;
opacity: 0;
}
#barIdentify{
position: absolute;
width: 30%;
left: 3%;
opacity: 0;
/* cursor: pointer; */
}
#barExperiment{
position: absolute;
width: 30%;
left: 36%;
opacity: 0;
/* cursor: pointer; */
}
#barBuild{
position: absolute;
width: 30%;
left: 69.5%;
opacity: 0;
/* cursor: pointer; */
}
#barScale{
position: absolute;
width: 30%;
right:-33%;
opacity: 0;
/* cursor: pointer; */
}
/**************************
Animation for Product Centric
**************************/
.SlidefromDownSubHeader {
animation-name: SlidefromDownSubHeader;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes SlidefromDownSubHeader {
0% {
transform: translateY(+450%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.SlidefromTopHeader {
animation-name: SlidefromTopHeader;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes SlidefromTopHeader {
0% {
transform: translateY(-350%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.rotateClkCircle {
animation-name: rotateClkCircle;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes rotateClkCircle {
from {
transform: rotate(-45deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
.rotateAntiClkCircle {
animation-name: rotateAntiClkCircle;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes rotateAntiClkCircle {
from {
transform: rotate(45deg);
opacity: 0;
}
to {
transform: rotate(0deg);
opacity: 1;
}
}
/* END OF PRODUCT CENTRIC STYLES */
/* ROADMAP STYLES */
.roadmapPage .roadmap{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
z-index: 3;
height: 100%;
margin-top:3%;
}
.roadmapPage .roadmap span {
font: normal normal normal 22px/30px HelveticaNeueMed;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: left;
line-height: 19px;
}
.roadmapPage .roadmap ul{
list-style-type: none;
overflow: hidden;
color: #FFFFFF;
}
.roadmapPage .roadmap li{
float: none;
font: normal normal normal 17px/30px HelveticaNeueThin;
letter-spacing: 0.5px;
z-index: 3;
line-height: 17px;
margin-bottom: 14px;
margin-left: 8.5%;
}
/**** Graphic 1 ****/
.graphicTop1{
position: absolute;
left: 21%;
top: 8%;
opacity: 0;
}
#lineTop1{
width: 65%;
margin-top: 2%;
margin-left: 3%;
/* opacity: 0; */
}
#textStart{
color: #A9A9D4;
position: absolute;
top: 16.5%;
left: 23%;
/* opacity: 0; */
}
.bulletList1{
position: absolute;
top: 21%;
left: 19%;
width: 74%;
opacity: 0;
}
/**** Graphic 2 ****/
.graphicTop2{
position: absolute;
left: 35%;
top: 10%;
opacity: 0;
}
#lineTop2{
width: 56%;
margin-top: 47%;
margin-left: 16%;
/* opacity: 0; */
}
#textTopQ2{
position: absolute;
top: 40%;
left: 36%;
/* opacity: 0; */
}
.bulletList2{
position: absolute;
top: 27%;
left: 32%;
width: 92%;
opacity: 0;
}
/**** Graphic 3 ****/
.graphicTop3{
position: absolute;
left: 45%;
top: 10%;
opacity: 0;
}
#lineTop3{
width: 63%;
margin-top: 14%;
margin-left: 65%;
/* opacity: 0; */
}
#textTopQ4{
position: absolute;
top: 23%;
left: 88%;
/* opacity: 0; */
}
.bulletList3{
position: absolute;
top: 25%;
left: 47%;
width: 92%;
opacity: 0;
}
/**** Graphic 4 ****/
.graphicTop4{
position: absolute;
right: 28%;
top: 15%;
opacity: 0;
}
#lineTop4{
width: 57%;
margin-top: 39%;
margin-left: 29%;
/* opacity: 0; */
}
#textTopQ1{
position: absolute;
top: 42%;
left: 49%;
/* opacity: 0; */
}
.bulletList4{
position: absolute;
top: 32%;
left: 61%;
width: 98%;
opacity: 0;
}
/**** Graphic 5 ****/
.graphicBottom1{
position: absolute;
left: 29%;
bottom: 19.7%;
opacity: 0;
}
#lineBottom1{
width: 60%;
margin-top: 0%;
margin-left: 0%;
/* opacity: 0; */
}
#textBottomQ1{
position: absolute;
bottom: 15%;
left: 23%;
/* opacity: 0; */
}
.bulletList5{
position: absolute;
top: 58%;
left: 27%;
width: 69%;
opacity: 0;
}
/**** Graphic 6 ****/
.graphicBottom2{
position: absolute;
left: 43.5%;
bottom: 24.5%;
opacity: 0;
}
#lineBottom2{
width: 60%;
margin-top: 26%;
margin-left: 0%;
/* opacity: 0; */
}
#textBottomQ3{
position: absolute;
bottom: 15%;
left: 23%;
/* opacity: 0; */
}
.bulletList6{
position: absolute;
top: 56%;
left: 41%;
width: 71%;
opacity: 0;
}
/**** Graphic 7 ****/
.graphicBottom3{
position: absolute;
right: 33%;
bottom: 21%;
opacity: 0;
}
#lineBottom3{
width: 60%;
margin-top: 26%;
margin-left: 0%;
/* opacity: 0; */
}
#textBottomInspect{
/* font: normal normal normal 16px/30px HelveticaNeueMed;
color: #A9A9D4;
line-height: 15px;
width: 37%;
position: absolute;
bottom: 13%;
left: 16%; */
font: normal normal normal 17px/30px HelveticaNeueLt;
color: #A9A9D4;
line-height: 21px;
width: 37%;
position: absolute;
bottom: 11%;
left: 16%;
/* opacity: 0; */
}
.bulletList7 li{
line-height: 27px !important;
}
.bulletList7{
position: absolute;
top: 58%;
left: 61%;
width: 6%;
opacity: 0;
}
/**** Graphic 8 ****/
.graphicBottom4{
position: absolute;
right: 18%;
bottom: 25%;
opacity: 0;
}
#lineBottom4{
width: 60%;
margin-top: 26%;
margin-left: 0%;
/* opacity: 0; */
}
#textBottomQ2{
position: absolute;
bottom: 15%;
left: 23%;
/* opacity: 0; */
}
.bulletList8{
position: absolute;
top: 55%;
left: 68%;
width: 100%;
opacity: 0;
}
/**** All the Lines Bullets ****/
#lineMain{
width: 77%;
margin-top: 24%;
margin-left: 0%;
opacity: 0;
}
#lineCurvy{
width: 60%;
margin-top: -32.4%;
margin-left: 0%;
opacity: 0;
}
.bulletonCurvyLine{
opacity: 0;
/* cursor:pointer; */
}
.bulletTop1{
background: url('../images/Roadmap/button-start.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 23.5%;
top: 37.5%;
z-index: 3;
}
.bulletTop2{
background: url('../images/Roadmap/button-q2-01.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 38.2%;
top: 37.4%;
z-index: 3;
}
.bulletTop3{
background: url('../images/Roadmap/button-start-1.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 52.95%;
top: 37.4%;
z-index: 3;
}
.bulletTop4{
background: url('../images/Roadmap/button-q2-01-1.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 67.5%;
top: 37.4%;
z-index: 3;
}
.bulletBottom1{
background: url('../images/Roadmap/button-start-2.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 31%;
top: 50.5%;
z-index: 3;
}
.bulletBottom2{
background: url('../images/Roadmap/button-q2-01-2.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 45.5%;
top: 50.5%;
z-index: 3;
}
.bulletBottom3{
background: url('../images/Roadmap/button-start-3.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 60%;
top: 50.5%;
z-index: 3;
/* cursor:pointer; */
}
.bulletBottom4{
background: url('../images/Roadmap/button-q2-01-3.svg') 0% 0% no-repeat padding-box;
background-size: 2em;
position: absolute;
width: 2%;
height: 3%;
left: 75%;
top: 50.5%;
z-index: 3;
/* cursor:pointer; */
}
/***********************
Animation for Roadmap
************************/
.slidefromRightDiv{
animation-name:slidefromRight ;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes slidefromRight{
0% { transform: translateX(250%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slidefromLeftBullets{
animation-name:slidefromLeftBull ;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slidefromLeftBull{
0% { transform: translateX(20%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
.slidefromLeftInspectDiv{
animation-name:slidefromLeftInspect ;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes slidefromLeftInspect{
0% { transform: translateX(120%);opacity: 0;}
100% { transform: translateX(0);opacity: 1;}
}
/* END OF ROADMAP CENTRIC STYLES */
/* CASE STUDY STYLES */
.casestudyPage .caseStudy{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 0%;
width: 100%;
z-index: 1;
top: 25%;
}
#caseStudyBkgnd{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: auto;
opacity:0;
}
#caseStudyHeader{
position: absolute;
margin-top: 14%;
left: 7%;
width: 32%;
opacity:0;
}
#caseStudyPhoto{
position: absolute;
margin-top: 34%;
left: 31.5%;
width: 69%;
opacity:0;
}
/************************
Animation for Case Study
*************************/
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
}
/* END OF CASE STUDY STYLES */
.transformationPage .transformation{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
height:auto;
z-index: 3;
}
.transformation .topScreen{
flex: 1;
width: 73%;
height: 12em;
position: absolute;
left: 12%;
}
.topScreen .topBars{
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: space-between; */
width: 100%;
margin-top: 6%;
}
.topBars #leftBar{
width: 30%;
height: 2em;
margin-left: 3%;
margin-top: 2%;
opacity: 0;
}
.topBars #centreBar{
width: 30%;
height: 2em;
padding-right: 7%;
margin-left: 1%;
margin-top: 2%;
opacity: 0;
}
.topBars #rightBar{
width: 30%;
height: 2em;
margin-left: -6%;
margin-top: 2%;
opacity: 0;
}
.transformationPage .transformation span {
font: normal normal normal 26px/30px HelveticaNeueThin;
font-weight: bold;
letter-spacing: 0.5px;
color: #FFFFFF;
}
.topText{
position: absolute;
left: 23%;
top: 40%;
width: 92%;
opacity: 0;
}
.topText .textCulture{
margin-left:2%;
}
.topText .textMindset{
margin-left:14%;
}
.topText .textLeader{
margin-left:14%;
}
.transformation .midScreen{
flex:2;
width: 73%;
height: 17em;
position: absolute;
margin-top:11%;
left: 12%;
}
.slideDevelop, .slideAgility, .slideDigital, .slideTech, .slideProcess, .slidePeople{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
position: absolute;
top: 0%;
/* opacity:0; */
}
/* .slideDigital, .slideTech, .slideProcess, .slidePeople{
opacity:0;
} */
.imageLeftText{
font: normal normal normal 26px/30px HelveticaNeueThin;
font-weight: bold;
letter-spacing: 0.5px;
color: #FAF7D8 !important;
}
.imageRightText{
font: normal normal normal 19px/30px HelveticaNeueThin !important;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: center;
width:7%;
}
#photoDevelop, #photoAgility, #photoDigital, #photoTech, #photoProcess, #photoPeople{
width:45%;
}
#leftGradient{
width:100%;
}
#rightGradient{
width:100%;
}
#developTextLeft, #agilityTextLeft, #digitalTextLeft, #techTextLeft, #processTextLeft, #peopleTextLeft{
/* position: absolute;
width: 11%;
left: 12%; */
position: absolute;
width: 49%;
/* left: 37%;
top: 27%; */
text-align: right !important;
}
/* #processTextLeft, #peopleTextLeft, #techTextLeft{
top:41%;
} */
.developLeft, .developRight, #photoDevelop, .agilityLeft, .agilityRight, #photoAgility,.digitalLeft, .digitalRight, #photoDigital,
.techLeft, .techRight, #photoTech, .processLeft, .processRight, #photoProcess,.peopleLeft, .peopleRight, #photoPeople {
opacity:0;
}
#developTextRight, #agilityTextRight, #digitalTextRight, #processTextRight{
position: absolute;
/* top: 23%;
right: 23%; */
text-align: left;
}
#techTextRight{
position: absolute;
/* top: 16%;
right: 3%; */
text-align: left;
}
#peopleTextRight{
position: absolute;
/* top: 23%;
right: 22%; */
text-align: left;
}
.transformation .bottomScreen{
flex: 3;
width: 73%;
height: 27em;
position: absolute;
margin-top: 27%;
left: 12%;
}
.hexDevelop, .hexAgility, .hexDigital, .hexTech, .hexProcess, .hexPeople{
cursor: pointer;
}
.bottomScreen .hexButtons{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 1%;
margin-left: 4%;
}
#hexButtonDevelop{
position: absolute;
margin-top: 7%;
margin-left: 2%;
width: 15%;
opacity: 0;
}
#hexButtonAgility{
position: absolute;
margin-top: 0%;
margin-left: -4%;
width: 15%;
opacity: 0;
}
#hexButtonDigital{
position: absolute;
margin-top: 8%;
margin-left: -10%;
width: 15%;
opacity: 0;
}
#hexButtonTech{
position: absolute;
margin-top: 1%;
margin-left: -16%;
width: 15%;
opacity: 0;
}
#hexButtonProcess{
position: absolute;
margin-top: 7%;
margin-left: -21%;
width: 15%;
opacity: 0;
}
#hexButtonPeople{
position: absolute;
margin-top: 0%;
margin-left: -27%;
width: 15%;
opacity: 0;
}
.bottomScreen .hexButtons span{
font: normal normal normal 20px/30px HelveticaNeueThin;
letter-spacing: 0.5px;
color: #FFFFFF;
text-align: center;
line-height: 23px;
opacity: 0;
}
#hexTextDevelop{
position: absolute;
width: 12%;
top: 58%;
left: 7.5%;
z-index: 3;
}
#hexTextAgility{
position: absolute;
width: 9%;
top: 32%;
left: 23%;
z-index: 3;
}
#hexTextDigital{
position: absolute;
width: 9%;
top: 65%;
left: 37%;
z-index: 3;
}
#hexTextTech{
position: absolute;
top: 38%;
left: 52.5%;
z-index: 3;
}
#hexTextProcess{
position: absolute;
top: 63%;
right: 27%;
z-index: 3;
}
#hexTextPeople{
position: absolute;
top: 38%;
right: 13.5%;
z-index: 3;
}
/********************************
Animation for Transformation
*********************************/
.slideUpCentreBar {
animation-name: slideUpCentreBar;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes slideUpCentreBar {
0% {
transform: translateY(+1000%);
opacity: 0;
}
100% {
transform: translateY(0%);
opacity: 1;
}
}
.zoomHexDiv{
animation-name: zoomHex;
animation-duration: 1.5s;
animation-fill-mode: forwards;
}
@keyframes zoomHex {
from {
opacity: 1;
transform: scale3d(1, 1, 1);
}
to {
transform: scale3d(1.2, 1.2, 1.2);
opacity: 1;
}
}
.zoomHexOutDiv{
animation-name: zoomHexOut;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes zoomHexOut {
100% {
opacity: 1;
}
0%{
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.fadeOutHex {
animation-name: fadeOutHex;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes fadeOutHex {
0% {
opacity: 100%;
}
to {
opacity: 50%;
}
}
.fadeOutPhoto {
animation-name: fadeOutPhoto;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes fadeOutPhoto {
0% {
opacity: 0%;
}
to {
opacity: 0;
}
}
.verticalAlignClass{
display: flex;
justify-content: center;
align-items: center;
}
/* END OF TRANSFORMATION STYLES */