@charset "UTF-8";

#body {
    background-color: white;
}

b {
  font-family: AppFontBold;
}

/*


 ██████╗██╗   ██╗███████╗████████╗ ██████╗ ███╗   ███╗      ██████╗ ██████╗ ███╗   ███╗███████╗  ██████╗ ███╗  ██╗███████╗███╗  ██╗████████╗███████╗
██╔════╝██║   ██║██╔════╝╚══██╔══╝██╔═══██╗████╗ ████║     ██╔════╝██╔═══██╗████╗ ████║██╔═══██╗██╔═══██╗████╗ ██║██╔════╝████╗ ██║╚══██╔══╝██╔════╝
██║     ██║   ██║███████╗   ██║   ██║   ██║██╔████╔██║     ██║     ██║   ██║██╔████╔██║███████╔╝██║   ██║██╔██╗██║█████╗  ██╔██╗██║   ██║   ███████╗
██║     ██║   ██║╚════██║   ██║   ██║   ██║██║╚██╔╝██║     ██║     ██║   ██║██║╚██╔╝██║██╔════╝ ██║   ██║██║╚████║██╔══╝  ██║╚████║   ██║   ╚════██║
╚██████╗╚██████╔╝███████║   ██║   ╚██████╔╝██║ ╚═╝ ██║     ╚██████╗╚██████╔╝██║ ╚═╝ ██║██║      ╚██████╔╝██║ ╚███║███████╗██║ ╚███║   ██║   ███████║
 ╚═════╝ ╚═════╝ ╚══════╝   ╚═╝    ╚═════╝ ╚═╝     ╚═╝      ╚═════╝ ╚═════╝ ╚═╝     ╚═╝╚═╝       ╚═════╝ ╚═╝  ╚══╝╚══════╝╚═╝  ╚══╝   ╚═╝   ╚══════╝
                                                                                                                                                                              
*/
/* line 16, ../sass/custom.scss */


.stack_mode_divider {
  display: none;
}

.navMenu{
  height: 100%;
  width: 6.25vw;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: white;
}
.navMenu.right {
  left: auto;
  right: 0%;
}

.navBox{
  height: 14%;
  background-color: #044ada;
  top: 0;
  left: 0;  
}

.navText{
  font-size: 1.6vmin;
  color:white;
  left: 11%;
  top: 34%;
  position: relative;
  width: 85%;
}
.navButton_container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 86%;
  left: 0%;
  bottom: 0%;
}

.navButton {
  width: 100%;
  height: 6%;
  margin-bottom: 5%;
  position: relative;
}

.menuIcon{
  width: 2.6vw;
  height: 2.6vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.shareIcon{
  width: 2.1vw;
  height: 2.1vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.collateralItem .shareIcon {
  width: 2.6vmin;
  height: 2.6vmin;
  left: 50%;
  position: relative;
}
[data-view="home"] .shareIcon {
  left: 56%;
}


.mainContainer{
  width:100vw;
  height: 100vh;
}

.tab{
  position:relative;
  height: calc(12.5vh - 1px);
}
.tab .icon {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.tab .icon svg {
  width: 3vw;
  height: 3vw;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overviewTab,
.collateralTab,
.shareTab {
  border-bottom-color: #dcdcdc;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

/* Top Images */

.why_topImg{
  background-image: url(../img/why_IBM_top.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 25%;
  position: relative;
}
.workloads_topImg{
  background-image: url(../img/why_images1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 25%;
  position: relative;
}
.solutions_topImg{
  background-image: url(../img/product_solutions_top.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 25%;
  position: relative;
}
.solutions_topImg[data-product]:not([data-product="default"]) {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  transition-delay: 0s !important;
}
.solutions_topImg[data-product="ac922"] {
  opacity: 0;
  background-image: url(../img/specific_products/ac922.jpg);
}
.solutions_topImg[data-product="s914"] {
  opacity: 0;
  background-image: url(../img/specific_products/s914.jpg);
}
.solutions_topImg[data-product="s922"] {
  opacity: 0;
  background-image: url(../img/specific_products/s922.jpg);
}
.solutions_topImg[data-product="s924"] {
  opacity: 0;
  background-image: url(../img/specific_products/s924.jpg);
}
.solutions_topImg[data-product="e950"] {
  opacity: 0;
  background-image: url(../img/specific_products/e950.jpg);
}
.solutions_topImg[data-product="e980"] {
  opacity: 0;
  background-position: left;
  background-image: url(../img/specific_products/e980.jpg);
}
.solutions_topImg.active {
  opacity: 1;
}
.solutions_topImg.not_active {
  opacity: 0;
}

.why_bottomImg{
  background-image: url(../img/why_ibm_bottom_left.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  position: relative;
}
.workloads_bottomImg{
  background-image: url(../img/why_images2.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  position: relative;
}
.solutions_bottomImg{
  background-image: url(../img/products_bottom_left.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  position: relative;
  transition: opacity 0.5s ease-out;
}
.solutions_bottomImg[data-product="default"] {
  background-position: left;
}
.solutions_bottomImg[data-product]:not([data-product="default"]) {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  transition-delay: 0s !important;
}
.solutions_bottomImg[data-product="ac922"] {
  opacity: 0;
  background-image: url(../img/specific_products/ac922_bottom_left.jpg);
  background-size: 90%;
}
.solutions_bottomImg[data-product="s914"] {
  opacity: 0;
  background-image: url(../img/specific_products/s914_bottom_left.jpg);
  background-position: left;
}
.solutions_bottomImg[data-product="s922"] {
  opacity: 0;
  background-image: url(../img/specific_products/s922_bottom_left.jpg);
}
.solutions_bottomImg[data-product="s924"] {
  opacity: 0;
  background-image: url(../img/specific_products/s924_bottom_left.jpg);
  background-position: right;
}
.solutions_bottomImg[data-product="e950"] {
  opacity: 0;
  background-image: url(../img/specific_products/e950_bottom_left.jpg);
}
.solutions_bottomImg[data-product="e980"] {
  opacity: 0;
  background-image: url(../img/specific_products/e980_bottom_left.jpg);
}
.solutions_bottomImg.active {
  opacity: 1;
}
.solutions_bottomImg.not_active {
  opacity: 0;
}

.leftPanel{
  background-color:#dcdcdc;
  height:75vh;
  top:25%;
  width: 37.5%;
  left: 6.25%;
  float: left;
  position:absolute;
}

.whyIcon{
  height:9vw;
  width: 9vw;
  position: relative;
  left:1vw;
  top:2vh;
  overflow: visible;
}
.whyIcon svg {
  position: absolute;
  top: 0;
  left: 0;
  height:9vw;
  width: 9vw;
  max-height: 1.5em;
  overflow: visible;
}
.workloadsIcon{
  height:9vw;
  width: 9vw;
  position: relative;
  left:1vw;
  top:2vh;
  overflow: visible;
}
.workloadsIcon svg {
  position: absolute;
  top: 0;
  left: 0;
  height:9vw;
  width: 9vw;
  max-height: 1.5em;
  overflow: visible;
}
.solutionsIcon{
  height:9vw;
  width: 9vw;
  position: relative;
  left:1vw;
  top:2vh;
  overflow: visible;
}
.solutionsIcon svg {
  position: absolute;
  top: 0;
  left: 0;
  height:9vw;
  width: 9vw;
  max-height: 1.5em;
  overflow: visible;
}

.whyPowerIcon,
.workloadsPowerIcon,
.solutionsPowerIcon {
  height:100%;
  width:8vw;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left:9%;
  transform: translateY(-50%);
}
.whyPowerIcon svg,
.workloadsPowerIcon svg,
.solutionsPowerIcon svg {
  position: relative;
  width: 100%;
  height: 100%;
}
.workloadsPowerIcon[data-seq-num="1"] svg {
  transform: scale(0.7);
}

.left_bottomPanel{
  background-color:#f5f5f5;
  bottom: 0%;
  left: 0%;
  height:25vh;
  width: 100%;
  position:absolute;
}

.rightPanel{
  background-color:white;
  height:75%;
  width: 56.25%;
  right: 0%;
  bottom: 0%;
  float: left;
  position: absolute;
  }

.right_bottomPanel{
  background-color: #dcdcdc;
  bottom: 0%;
  width:50vw;
  left:0%;
  height:25vh;
  position:absolute;
  z-index: 10;
}
 .workloads_title,
 .solutions_title {
  font-size: 3.5vmin;
  left: 31%;
  top: 8%;
  width: 33%;
  position: absolute;
 }
 .why_title {
  font-size: 3.5vmin;
  left: 31%;
  top: 4%;
  width: 33%;
  position: absolute;
 }

 .why_content,
 .workloads_content,
 .solutions_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.5vmin;
  width: calc(66% - 3.2em);
  height: 20vh;
  left: 1.6vw;
  bottom: 50%;
  position: absolute;
 }

 .whyBottom, 
 .workloadsBottom,
 .solutionsBottom {
  font-size: 2.7vmin;
  width: 65%;
  height: 100%;
  left: 31%;
  position: absolute;
  transform: translate(0, 0);
  opacity: 1;
 }
 .whyBottom .i18n,
 .workloadsBottom .i18n,
 .solutionsBottom .i18n {
  top: 50%;
  transform: translate(0%, -50%);
  position: absolute;
 }

.accordionMenu{
  background-color: white;
  right: 0.5%;
  top: 0%;
  width: 33%;
  height: 50.2vh;
  position: absolute;
}

.tabMenu{
  right: 0%;
  top: 0%;
  width: 6.25vw;
  height: 50vh;
  position: absolute;
  text-align: center;
  background-color: white;
  z-index: 2;
}

.tab.tabHighlight{
  background-color: #dcdcdc;
}

.whyContentCards{
  left: 0%;
  top: 0%;
  height: 67%;
  position: absolute;
  width: 50vw;
}

.collateralTouchable {
  position: relative;
  display: flex;
  align-items: center;
  width: 90%;
}

.collateralIcon{
  position: relative;
  left:0%;
  margin-right: 5%;
  width: 3em;
  height: 1.2em;
}
.collateralIcon svg {
  position: absolute;
  width: 1.3em;
  height: 1.6em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.collateralLabel{
  font-size: 1.6vmin;
  max-width: 80%;
}

.collateralShare{
  position: absolute !important;
  top: 0%;
  right: 4%;
  width: 4vmin;
}
.collateralShare .icon {
  height: 2.5vmin;
}
.collateralShare x-share-item-badge {
  position: absolute;
  width: 0.8vw;
  height: 0.8vw;
  left: 15%;
  top: 22%;
}

.collateralIcon svg {
  fill: black !important;
}
.shareTab svg .st2,
.collateralShare svg .st2 {
  stroke: black !important;
}
.share_Icon{
  height: 3vh;
}

.overviewBody{
  font-size: 1.9vmin;
  margin-top: 1%;
  width: 90%;
  margin-left: 5%;
}

.overviewSubBody {
  font-size:1.5vmin;
}

.x-scrollable__scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.x-scrollable__scroll-container::-webkit-scrollbar {
     display: none;
}

.contentScroll .x-scrollable__scroll-container {
  margin-top: 2vh;
  width: 90%;
  top: 12.2vh;
  height: 34vh;
  margin-left: 5%;
  background-color: white;
  justify-content: start !important;
}
.contentScroll .x-gradient.top {
  top: 13.8vh;
  height: 1em;
}
.contentScroll .x-gradient.bottom {
  bottom: 2vh;
  height: 1em;
}
.overviewContent .contentScroll .x-scrollable__scroll-container {
  top: 5.2vh;
  height: 29vh;
}
.overviewContent .contentScroll .x-gradient.top {
  top: 6.8vh;
}
.overviewContent .contentScroll .x-gradient.bottom {
  bottom: -33vh;
}

/* Specific content cases for longer subtitles */
.page[data-page="why"] .subpage[data-view="menuItem2"] .contentScroll .x-scrollable__scroll-container,
.page[data-page="why"] .subpage[data-view="menuItem4"] .contentScroll .x-scrollable__scroll-container,
.page[data-page="why"] .subpage[data-view="menuItem5"] .contentScroll .x-scrollable__scroll-container,
.page[data-page="workloads"] .subpage[data-view="workloadsItem5Sub1"] .contentScroll .x-scrollable__scroll-container,
.page[data-page="solutions"] .subpage[data-view="solutionsItem1"] .contentScroll .x-scrollable__scroll-container,
.page[data-page="solutions"] .subpage[data-view="solutionsSub1"] .contentScroll .x-scrollable__scroll-container {
  top: 14.2vh;
  height: 32vh;
}
.page[data-page="why"] .subpage[data-view="menuItem2"] .contentScroll .x-gradient.top,
.page[data-page="why"] .subpage[data-view="menuItem4"] .contentScroll .x-gradient.top,
.page[data-page="why"] .subpage[data-view="whyItem6Sub2"] .contentScroll .x-gradient.top,
.page[data-page="workloads"] .subpage[data-view="workloadsItem5Sub1"] .contentScroll .x-gradient.top,
.page[data-page="solutions"] .subpage[data-view="solutionsItem1"] .contentScroll .x-gradient.top,
.page[data-page="solutions"] .subpage[data-view="solutionsSub1"] .contentScroll .x-gradient.top {
  top: 15.8vh;
}
.page[data-page="solutions"] .subpage[data-view="solutionsItem2Sub1"] .overviewContent.item0 .contentScroll .x-scrollable__scroll-container,
.page[data-page="solutions"] .subpage[data-view="solutionsItem2Sub4"] .overviewContent.item2 .contentScroll .x-scrollable__scroll-container {
  top: 6.2vh;
  height: 29vh;
}
.page[data-page="solutions"] .subpage[data-view="solutionsItem2Sub1"] .overviewContent.item0 .contentScroll .x-gradient.top,
.page[data-page="solutions"] .subpage[data-view="solutionsItem2Sub4"] .overviewContent.item2 .contentScroll .x-gradient.top {
  top: 7.8vh;
}

/* Even longer subtitles */
.page[data-page="why"] .subpage[data-view="menuItem5"] .contentScroll .x-scrollable__scroll-container {
    top: 16.2vh;
    height: 30vh;
}
.page[data-page="why"] .subpage[data-view="menuItem5"] .contentScroll .x-gradient.top {
    top: 17.8vh;
}

.overviewTitle {
  position: relative;
  width: 95%;
  height: 11.5%;
  margin-left: 5%;
  margin-top: 1%;
}
.overviewTitle .i18n {
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}

.overviewContent {
  position: absolute;
  top: 25%;
  left: 0%;
  width: 100%;
  transition: transform 0.6s;
  background-color: white;
}
.overviewContent.prev {
  z-index: 1;
}
.subpage[data-item="0"] .overviewContent.item0 {
  transform: translate(0%, 0%);
  z-index: 1;
}
.subpage[data-item]:not([data-item="0"]) .overviewContent.item0 {
  transform: translate(-100%, 0%);
}
.subpage[data-item="1"] .overviewContent.item1 {
  transform: translate(0%, 0%);
  z-index: 1;
}
.subpage[data-item="0"] .overviewContent.item1 {
  transform: translate(100%, 0%);
}
.subpage[data-item="2"] .overviewContent.item1,
.subpage[data-item="3"] .overviewContent.item1,
.subpage[data-item="4"] .overviewContent.item1 {
  transform: translate(-100%, 0%);
}
.subpage[data-item="2"] .overviewContent.item2 {
  transform: translate(0%, 0%);
  z-index: 1;
}
.subpage[data-item="0"] .overviewContent.item2,
.subpage[data-item="1"] .overviewContent.item2  {
  transform: translate(100%, 0%);
}
.subpage[data-item="3"] .overviewContent.item2,
.subpage[data-item="4"] .overviewContent.item2  {
  transform: translate(-100%, 0%);
}
.subpage[data-item="3"] .overviewContent.item3 {
  transform: translate(0%, 0%);
  z-index: 1;
}
.subpage[data-item="0"] .overviewContent.item3,
.subpage[data-item="1"] .overviewContent.item3,
.subpage[data-item="2"] .overviewContent.item3  {
  transform: translate(100%, 0%);
}
.subpage[data-item="4"] .overviewContent.item3 {
  transform: translate(-100%, 0%);
}
.subpage[data-item="4"] .overviewContent.item4 {
  transform: translate(0%, 0%);
  z-index: 1;
}
.subpage[data-item]:not([data-item="4"]) .overviewContent.item4 {
  transform: translate(100%, 0%);
}

.overviewItems {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 95%;
  height: 12.5%;
  color: #268dff;
  font-size: 1.7vmin;
  margin-left: 5%;
}
.overviewItem {
  position: relative;
  height: 100%;
  width: 25%;
}
.overviewItem .i18n {
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
  text-align: center;
  font-size: 1.5vmin;
}
.overviewItem.highlight {
  color: white;
  background-color: #268dff;
}

.subpageInfoContent{
  font-size: 2.5vmin;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 87.5%;
  height: 100%;
}

/* Pathway CSS*/
.pathwayMenu{
  font-size:2.3vmin;
}

.pathwayMenu .x-scrollable__content {
  background-color: #dcdcdc;
}

.pathwayMenuItem {
  position: relative;
  font-size: 1.6vmin;
  padding-left: 10%;
  height: calc(5.556vh - 2px);
  background-color: white;
  border-style: solid;
  border-top-color: #dcdcdc;
  border-width: 2px 0px 0px 0px;
}
.pathwayMenuItem .i18n {
  pointer-events: none;
}

.pathwayMenuItem.highlight {
  background-color: #268dff;
  color: white;
}
.pathwayMenuItem.highlight.child_highlight {
  background-color: #989898;
}

.touchable {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.tile_quarter {
  position: absolute;
  width: 25%;
  height: 50%;
  font-size: 1.5vmin;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* line 26, ../sass/custom.scss */
.tile_quarter .icon {
  height: 32%;
  margin-left: 7%;
  margin-top: 10%;
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
/* line 38, ../sass/custom.scss */
.tile_quarter.home[data-tile="title"] {
  top: 0%;
  left: 0%;
  color: white;
  background-color: #1e44ff;
}
/* line 46, ../sass/custom.scss */
.tile_quarter.home[data-tile="why"] {
  top: 0%;
  left: 25%;
  color: black;
  background-color: #e0e0e0;
}
/* line 58, ../sass/custom.scss */
.tile_quarter.home[data-tile="workloads"] {
  top: 50%;
  left: 50%;
  color: black;
  background-color: #e0e0e0;
}
/* line 70, ../sass/custom.scss */
.tile_quarter.home[data-tile="solutions"] {
  top: 0%;
  left: 75%;
  color: black;
  background-color: #e0e0e0;
}
/* line 81, ../sass/custom.scss */
.tile_quarter.home[data-tile="images_2"] {
  top: 0%;
  left: 50%;
  background-color: white;
  background-image: url(../img/home_images2_1.jpg);
}
/* line 88, ../sass/custom.scss */
.tile_quarter.home[data-tile="images_3"] {
  top: 50%;
  left: 75%;
  background-color: white;
  background-image: url(../img/home_images3_1.jpg);
}

/* line 97, ../sass/custom.scss */
.tile_half {
  position: absolute;
  width: 50%;
  height: 50%;
  font-size: 1.5vmin;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* line 108, ../sass/custom.scss */
.tile_half.home[data-tile="images_1"] {
  top: 50%;
  left: 0%;
  background-color: white;
  background-image: url(../img/home_images1_1.jpg);
}

.quote_container {
  position: absolute;
  width: calc(67% - 3.2em);
  height: 10%;
  bottom: 42%;
  left: 1.6vw;
  font-size: 1.5vmin;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.quote_title {
  font-size: 1.5vmin;
  font-family: AppFontBold;
  color: black;
}
.quote_subtitle {
  font-size: 1.3vmin;
}
.quote_icon {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  margin-top: 2%;
  height: 30%;
}
.quote_icon[data-company="olcf"] {
  background-image: url(../img/company_icon_olcf.png);
}
.quote_icon[data-company="google"] {
  background-image: url(../img/company_icon_google.png);
}

/* Collateral Rows */
.collateralTitle {
  position: relative;
  width: 95%;
  height: 12.5%;
  margin-left: 5%;
}
.collateralTitle .i18n {
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}

.collateralItems {
  position: relative;
  width: 95%;
  margin-top: 2%;
  margin-left: 5%;

}
.collateralItem {
  position: relative;
  margin-bottom: 0.4em;
  display: flex;
  align-items: center;
}

/*

██╗  ██╗ ██████╗ ███╗   ███╗███████╗███████╗  █████╗  ██████╗ ███████╗
██║  ██║██╔═══██╗████╗ ████║██╔════╝██╔═══██╗██╔══██╗██╔════╝ ██╔════╝
███████║██║   ██║██╔████╔██║█████╗  ███████╔╝███████║██║ ████╗█████╗  
██╔══██║██║   ██║██║╚██╔╝██║██╔══╝  ██╔════╝ ██╔══██║██║ ╚═██║██╔══╝  
██║  ██║╚██████╔╝██║ ╚═╝ ██║███████╗██║      ██║  ██║╚██████╔╝███████╗
╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝╚═╝      ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                                                                                                                                                              
*/

.bodyFlex {
  background: white !important;
}

.page[data-page="home"] {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}

/* line 128, ../sass/custom.scss */
.home_title {
  position: absolute;
  font-size: 3.5vmin;
  bottom: 23%;
  margin: 7%;
}

/* line 135, ../sass/custom.scss */
.home_page_title {
  position: absolute;
  font-size: 5vmin;
  bottom: 48%;
  margin-left: 18%;
  margin-right: 18%;
}

/* line 143, ../sass/custom.scss */
.home_subtitle {
  position: absolute;
  font-size: 3.5vmin;
  top: 52%;
  margin-left: 18%;
  margin-right: 18%;
}

/* line 151, ../sass/custom.scss */
.home_tile_content {
  position: absolute;
  font-size: 1.7vmin;
  top: 73%;
  margin: 7%;
}

/* line 158, ../sass/custom.scss */
.home_nav_button {
  position: absolute;
  height: 15%;
  width: 20%;
  bottom: 0%;
  right: 0%;
}
/* line 165, ../sass/custom.scss */
.home_nav_button .icon {
  height: 100%;
  width: 3em;
  margin-top: 0%;
  margin-bottom: 0%;
  margin-left: auto !important;
  margin-right: auto;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/icon_arrow_right.png) !important;
}

.tile_quarter[data-tile="why"] .icon,
.tile_quarter[data-tile="workloads"] .icon,
.tile_quarter[data-tile="solutions"] .icon {
  overflow: visible;
}
.tile_quarter.home .icon rect,
.tile_quarter.home .icon circle,
.tile_quarter.home .icon polygon,
.tile_quarter.home .icon path,
.tile_quarter.home .icon line,
.whyIcon polygon,
.whyIcon line,
.whyIcon circle,
.workloadsIcon rect,
.workloadsIcon circle,
.workloadsIcon path,
.solutionsIcon rect,
.solutionsIcon line {
  stroke: black !important;
}
.tile_quarter[data-tile="why"] .icon circle,
.tile_quarter[data-tile="why"] .icon polygon,
.tile_quarter[data-tile="why"] .icon line,
.whyIcon .icon circle,
.whyIcon .icon polygon,
.whyIcon .icon line {
  stroke-width: 5px !important;
}

/* WHY START ANIMATION */

@keyframes spokesStart {
  0% {
    stroke-dashoffset: 18;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.tile_quarter[data-tile="why"] .icon.start #spokes line,
.whyIcon.start #spokes line {
  stroke-dashoffset: 18;
  stroke-dasharray: 18;
  animation-name: spokesStart;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes whyCirclesStart {
  0% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.tile_quarter[data-tile="why"] .icon.start #circles,
.whyIcon.start #circles {
  opacity: 0;
  transform: scale(1.2);
  transform-origin: center;
  animation-name: whyCirclesStart;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}
@keyframes outsidePathStart {
  0% {
    stroke-dashoffset: 22;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.tile_quarter[data-tile="why"] .icon.start #outside_path line,
.whyIcon.start #outside_path line {
  stroke-dashoffset: 22;
  stroke-dasharray: 22;
  animation-name: outsidePathStart;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

/* WHY LOOPING ANIMATION */

@keyframes spokesLoop {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 12;
  }
  65% {
    stroke-dashoffset: 12;
  }
  85% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.tile_quarter[data-tile="why"] .icon:not(.start) #spokes line,
.whyIcon:not(.start) #spokes line {
  stroke-dashoffset: 0;
  stroke-dasharray: 18;
  animation-name: spokesLoop;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.tile_quarter[data-tile="why"] .icon:not(.start) #spokes line:nth-child(even),
.whyIcon:not(.start) #spokes line:nth-child(even) {
  animation-delay: 2s;
}

/* WORKLOADS START ANIMATION */

@keyframes workloadsCircleStart1 {
  0% {
    opacity: 0;
    transform: translate(0%, -15%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}
@keyframes workloadsCircleStart2 {
  0% {
    opacity: 0;
    transform: translate(0%, 15%);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%);
  }
}
.tile_quarter[data-tile="workloads"] .icon.start #circles circle,
.workloadsIcon.start #circles circle {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.tile_quarter[data-tile="workloads"] .icon.start #circles circle:nth-child(1),
.workloadsIcon.start #circles circle:nth-child(1) {
  animation-name: workloadsCircleStart2;
  animation-delay: 1s;
}
.tile_quarter[data-tile="workloads"] .icon.start #circles circle:nth-child(4),
.workloadsIcon.start #circles circle:nth-child(4) {
  animation-name: workloadsCircleStart1;
  animation-delay: 1s;
}
.tile_quarter[data-tile="workloads"] .icon.start #circles circle:nth-child(2),
.workloadsIcon.start #circles circle:nth-child(2) {
  animation-name: workloadsCircleStart2;
  animation-delay: 1.5s;
}
.tile_quarter[data-tile="workloads"] .icon.start #circles circle:nth-child(3),
.workloadsIcon.start #circles circle:nth-child(3) {
  animation-name: workloadsCircleStart1;
  animation-delay: 1.5s;
}
@keyframes workloadsPathStart {
  0% {
    stroke-dashoffset: 34;
  }
  100% {
    stroke-dashoffset: 68;
  }
}
.tile_quarter[data-tile="workloads"] .icon.start #line path,
.workloadsIcon.start #line path {
  stroke-dashoffset: 34;
  stroke-dasharray: 34;
  animation-name: workloadsPathStart;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* WORKLOADS LOOPING ANIMATION */

@keyframes workloadsPathLoop {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 34;
  }
  70% {
    stroke-dashoffset: 34;
  }
  100% {
    stroke-dashoffset: 68;
  }
}
.tile_quarter[data-tile="workloads"] .icon:not(.start) #line path,
.workloadsIcon:not(.start) #line path {
  stroke-dashoffset: 0;
  stroke-dasharray: 34;
  animation-name: workloadsPathLoop;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}

/* SOLUTIONS START ANIMATION */

@keyframes solutionsRectStart {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.tile_quarter[data-tile="solutions"] .icon.start #external_rectangle,
.solutionsIcon.start #external_rectangle {
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  animation-name: solutionsRectStart;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes solutionsSpikeStart {
  0% {
    stroke-dashoffset: 7;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.tile_quarter[data-tile="solutions"] .icon.start #top_and_bottom_spikes line,
.solutionsIcon.start #top_and_bottom_spikes line {
  stroke-dashoffset: 7;
  stroke-dasharray: 7;
  animation-name: solutionsSpikeStart;
  animation-delay: 1.7s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.tile_quarter[data-tile="solutions"] .icon.start #left_and_right_spikes line,
.solutionsIcon.start #left_and_right_spikes line {
  stroke-dashoffset: 7;
  stroke-dasharray: 7;
  animation-name: solutionsSpikeStart;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

/* SOLUTIONS LOOPING ANIMATION */

@keyframes solutionsSpikeLoop {
  0% {
    stroke-dashoffset: 0;
  }
  20% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 7;
  }
  80% {
    stroke-dashoffset: 7;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.tile_quarter[data-tile="solutions"] .icon:not(.start) #top_and_bottom_spikes line,
.tile_quarter[data-tile="solutions"] .icon:not(.start) #left_and_right_spikes line,
.solutionsIcon:not(.start) #top_and_bottom_spikes line,
.solutionsIcon:not(.start) #left_and_right_spikes line {
  stroke-dashoffset: 0;
  stroke-dasharray: 7;
  animation-name: solutionsSpikeLoop;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-delay: 0s;
}
.tile_quarter[data-tile="solutions"] .icon:not(.start) #top_and_bottom_spikes line:nth-child(2),
.tile_quarter[data-tile="solutions"] .icon:not(.start) #top_and_bottom_spikes line:nth-child(3),
.tile_quarter[data-tile="solutions"] .icon:not(.start) #left_and_right_spikes line:nth-child(1),
.tile_quarter[data-tile="solutions"] .icon:not(.start) #left_and_right_spikes line:nth-child(3),
.solutionsIcon:not(.start) #top_and_bottom_spikes line:nth-child(2),
.solutionsIcon:not(.start) #top_and_bottom_spikes line:nth-child(3),
.solutionsIcon:not(.start) #left_and_right_spikes line:nth-child(1),
.solutionsIcon:not(.start) #left_and_right_spikes line:nth-child(3) {
  animation-delay: 0.5s;
}

/*

██╗     ██╗██╗  ██╗██╗   ██╗
██║     ██║██║  ██║╚██╗ ██╔╝
██║ ██╗ ██║███████║ ╚████╔╝ 
██║ ██║ ██║██╔══██║  ╚██╔╝  
╚████████╔╝██║  ██║   ██║   
 ╚═══════╝ ╚═╝  ╚═╝   ╚═╝   
                                                                                                                                                                              
*/

.page[data-page="why"] {
  position: absolute;
  top: 0%;
  left: 0%;
}

.page[data-page="why"] .accordian_bottom {
  height: calc(22.224vh - 8px);
}
.page[data-page="why"] .accordian_bottom.other_open4 {
  transform: translate(0%, 103.3%);
}

.accordionMenu .x-gradient.bottom {
  bottom: 0.1em;
}

/* Make quote text bigger for first quote */
.why_content[data-seq-num="0"] {
  font-size: 2.2vmin;
}

/*

██╗     ██╗ ██████╗ ██████╗ ██╗  ██╗██╗      ██████╗  █████╗ ███████╗ ███████╗
██║     ██║██╔═══██╗██╔══██╗██║ ██╔╝██║     ██╔═══██╗██╔══██╗██╔═══██╗██╔════╝
██║ ██╗ ██║██║   ██║██████╔╝█████╔╝ ██║     ██║   ██║███████║██║   ██║███████╗
██║ ██║ ██║██║   ██║██╔══██╗██╔═██╗ ██║     ██║   ██║██╔══██║██║   ██║╚════██║
╚████████╔╝╚██████╔╝██║  ██║██║  ██╗███████╗╚██████╔╝██║  ██║███████╔╝███████║
 ╚═══════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝ ╚═════╝ ╚═╝  ╚═╝╚══════╝ ╚══════╝
                                                                                                                                                                              
*/

.page[data-page="workloads"] {
  position: absolute;
  top: 0%;
  left: 0%;
}

.page[data-page="workloads"] .accordian_bottom {
  height: calc(23.224vh - 8px);
}
.page[data-page="workloads"] .accordian_bottom.other_open4 {
  transform: translate(0%, 102.3%);
}
.page[data-page="workloads"] .accordian_bottom.other_open3 {
  transform: translate(0%, 74.3%);
}
.page[data-page="workloads"] .accordian_bottom.other_open2 {
  transform: translate(0%, 49.3%);
}

.page[data-accordion="ai"] .accordian_top[data-product="hpc"].other_open3,
.page[data-accordion="ai"] .accordian_top[data-product="big_data"].other_open3,
.page[data-accordion="ai"] .accordian_top[data-product="sap_hana"].other_open3,
.page[data-accordion="ai"] .accordian_top[data-product="sas_viya"].other_open3,
.page[data-accordion="ai"] .accordian_top[data-product="hybrid_cloud"].other_open3 {
  transform: translate(0%, 300%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.page[data-accordion="hpc"] .accordian_top[data-product="big_data"].other_open2,
.page[data-accordion="hpc"] .accordian_top[data-product="sap_hana"].other_open2,
.page[data-accordion="hpc"] .accordian_top[data-product="sas_viya"].other_open2,
.page[data-accordion="hpc"] .accordian_top[data-product="hybrid_cloud"].other_open2 {
  transform: translate(0%, 200%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.page[data-accordion="big_data"] .accordian_top[data-product="sap_hana"].other_open2,
.page[data-accordion="big_data"] .accordian_top[data-product="sas_viya"].other_open2,
.page[data-accordion="big_data"] .accordian_top[data-product="hybrid_cloud"].other_open2 {
  transform: translate(0%, 200%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.page[data-accordion="sap_hana"] .accordian_top[data-product="hybrid_cloud"].other_open3,
.page[data-accordion="sap_hana"] .accordian_top[data-product="sas_viya"].other_open3 {
  transform: translate(0%, 300%);
  transition-property: transform;
  transition-duration: 0.5s;
}

/* Make quote text bigger for first quote */
.workloads_content[data-seq-num="0"] {
  font-size: 2.2vmin;
}

/* Make quote text bigger for third quote */
.workloads_content[data-seq-num="2"] {
  font-size: 1.4vmin;
}


/*

███████╗ ██████╗ ██╗     ██╗   ██╗████████╗██╗ ██████╗ ███╗  ██╗███████╗
██╔════╝██╔═══██╗██║     ██║   ██║╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝
███████╗██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██╔██╗██║███████╗
╚════██║██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██║╚████║╚════██║
███████║╚██████╔╝███████╗╚██████╔╝   ██║   ██║╚██████╔╝██║ ╚███║███████║
╚══════╝ ╚═════╝ ╚══════╝ ╚═════╝    ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚══╝╚══════╝
                                                                                                                                                                              
*/

.page[data-page="solutions"] {
  position: absolute;
  top: 0%;
  left: 0%;
}

.accordian_button {
  position: absolute;
  right: 0%;
  top: 0%;
  height: 100%;
  width: 18%;
}

.accordian_top {
  transform: translate(0%, 0%);
  transition-property: transform;
  transition-duration: 0.5s;
  overflow: visible !important;
}
.accordian_top .icon {
  position: absolute;
  right: 21%;
  top: 20%;
  height: 50%;
  width: 56%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/icon_caret_down.png);
}
.accordian_top .i18n {
  max-width: 70%;
}
.accordian_top .accordian_option .i18n {
  max-width: 95%;
}
.accordian_top.highlight .icon {
  background-image: url(../img/icon_caret_down_selected.png);
}
.pathwayMenuItem.open .icon {
  transform: rotate(180deg);
}

.accordian_bottom {
  position: relative;
  width: 100%;
  height: 50vh;
  background-color: white;
  transform: translate(0%, 0%);
  transition-property: transform;
  transition-duration: 0.5s;
  border-top-color: #dcdcdc;
  border-top-style: solid;
  border-top-width: 2px;
}

.accordian_container {
  position: absolute;
  width: 100%;
  height: 625%;
  left: 0%;
  top: 100%;
  color: black;
  background-color: white;
}
.page[data-accordion="hardware"] .accordian_top[data-product]:not([data-product="hardware"]).other_open6 {
  transform: translate(0%, 600%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.page[data-accordion="software"] .accordian_top[data-product="operating_system"].other_open6 {
  transform: translate(0%, 600%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.page[data-accordion="software"] .accordian_top[data-product="operating_system"].other_open4 {
  transform: translate(0%, 400%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.accordian_bottom.other_open6 {
  transform: translate(0%, 66.5%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.accordian_bottom.other_open4 {
  transform: translate(0%, 44.3%);
  transition-property: transform;
  transition-duration: 0.5s;
}
.accordian_bottom.other_open3 {
  transform: translate(0%, 33.1%);
  transition-property: transform;
  transition-duration: 0.5s;
}

.accordian_option {
  position: relative;
  width: 100%;
  height: calc(5.556vh - 2px);
  left: 0%;
  text-align: center;
  border-style: solid;
  border-width: 2px 0px 0px 0px;
  border-color: #dcdcdc;
}
.accordian_option.highlight {
  color: white;
  background-color: #268dff; 
}
.accordian_option.child_highlight {
  color: white;
  background-color: #989898;
}
.pathwayMenuItem .i18n {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}
.pathwayMenuItem .accordian_option .i18n {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

/* Make quote text bigger for first quote */
.solutions_content[data-seq-num="0"] {
  font-size: 2.2vmin;
}

/*

███╗  ██╗ █████╗ ██╗   ██╗██╗ ██████╗  █████╗ ████████╗██╗ ██████╗ ███╗  ██╗
████╗ ██║██╔══██╗██║   ██║██║██╔════╝ ██╔══██╗╚══██╔══╝██║██╔═══██╗████╗ ██║
██╔██╗██║███████║╚██╗ ██╔╝██║██║ ████╗███████║   ██║   ██║██║   ██║██╔██╗██║
██║╚████║██╔══██║ ██║ ██║ ██║██║ ╚═██║██╔══██║   ██║   ██║██║   ██║██║╚████║
██║ ╚███║██║  ██║ ╚████╔╝ ██║╚██████╔╝██║  ██║   ██║   ██║╚██████╔╝██║ ╚███║
╚═╝  ╚══╝╚═╝  ╚═╝  ╚═══╝  ╚═╝ ╚═════╝ ╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚══╝
                                                                                                                                                                              
*/
/* line 191, ../sass/custom.scss */
.side_menu {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 3.125%;
  height: 100%;
  top: 0%;
  left: 0%;
}
/* line 201, ../sass/custom.scss */
.side_menu .side_menu_button {
  width: 100%;
  height: 3.125vw;
  margin-top: 20%;
  position: relative;
}
/* line 206, ../sass/custom.scss */
.side_menu .side_menu_button .icon {
  height: 100%;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
/* line 218, ../sass/custom.scss */
.side_menu .side_menu_button[data-button="share"] svg .st2 {
  stroke: white !important;
}
.navButton svg .st2 {
  stroke: #044ada !important;
}
.navButton[data-button="menu"] svg rect {
  fill: #044ada !important;
}

/* line 225, ../sass/custom.scss */
.back_button {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 6.25%;
  height: 12.5%;
  background-color: #ffffffe0;
  z-index: 2;
}
/* line 233, ../sass/custom.scss */
.back_button .icon {
  height: 100%;
  width: 30%;
  margin-left: auto;
  margin-right: auto;
  background-image: url(../img/close_icon.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.share_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  opacity: 0;
  pointer-events: none;
  background-color: black;
}
.share_overlay.show {
  z-index: 1;
  opacity: 0.5;
  pointer-events: auto;
}

/* Share Cart */
.shareCart {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
x-share-cart .share_cart_container { /* Container on homepage */
  left: 3.125vw;
  top: 0%;
  bottom: auto;
}
#body[data-page="why"] x-share-cart .share_cart_container,
#body[data-page="workloads"] x-share-cart .share_cart_container,
#body[data-page="solutions"] x-share-cart .share_cart_container { /* Container on other pathways */
  left: 6.25vw;
}
x-share-cart .share_cart_container .share_cart {
  background-color: #1e44ff;
}
x-share-cart .close_button {
  background-color: transparent;
}
x-share-cart .share_cart_container .share_cart {
  transform: translateY(-101%); /* Make cart come down from top instead of bottom */
}
x-share-cart .share_cart_container .share_cart .inner_content {
  width: 100%;
}
x-share-cart .share_cart_container .share_cart .inner_content .entry_list .share_list_entry {
  height: 0.4em;
}
x-share-cart .share_cart_container .share_cart .inner_content .entry_list .share_list_entry .share_entry_left_side,
x-share-cart .share_cart_container .share_cart .inner_content .entry_list .share_list_entry .share_entry_icon_area {
  background-color: white;
}
x-share-cart .share_cart_container .share_cart .inner_content .entry_list .share_list_entry .share_entry_icon_area .share_entry_inner_icon_area {
  width: 0.25em;
  height: 0.25em;
  background-color: #1e44ff;
}
x-share-cart .share_cart_container .share_cart .inner_content .entry_list .share_list_entry .share_entry_icon_area .share_entry_inner_icon_area .share_entry_inner_icon svg {
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}
x-share-cart .share_cart_container .share_cart .inner_content .share_all_button .share_text {
  color: #1e44ff;
}
x-share-cart .share_cart_container .share_cart .inner_content .share_all_button .share_button_icon svg path, x-share-cart .share_cart_container .share_cart .inner_content .share_all_button .share_button_icon svg polygon {
  fill: #1e44ff !important;
}

/* Share badge on homepage */
x-share-cart-badge {
  background-color: #1e44ff;
  border-color: white;
  left: 0.3vw;
  top: 0.8vw;
  height: 1.1vw;
  width: 1.1vw;
}
x-share-cart-badge .share_cart_badge_num {
  color: white;
}
.page[data-view="why"] x-share-cart-badge,
.page[data-view="workloads"] x-share-cart-badge,
.page[data-view="solutions"] x-share-cart-badge {
  height: 1.3vw;
  width: 1.3vw;
  left: calc(50% - 0.23em);
}

/* Share item badge */
x-share-item-badge {
  background-color: #1e44ff;
  width: 1.3vw;
  height: 1.3vw;
  top: 40%;
  left: 23%;
}
x-share-item-badge svg {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
}
x-share-item-badge svg path {
  fill: white !important;
  stroke: #ffffff !important;
  stroke-width: 4px;
}

/* Side menu animation */
@keyframes menuSlideIn {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes menuBGFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
x-side-menu.show .x-side-menu__side-menu.animating-element {
  animation-name: menuSlideIn;
  animation-duration: 0.5s;
  width: 25vw;
}
x-side-menu.show .x-side-menu__darken-bg {
  animation-name: menuBGFadeIn;
  animation-duration: 0.5s;
}

/* Side menu styling */
x-menu-item {
  height: 6.25vh;
  font-size: 1.5em;
}
x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar {
  background-color: #044ada;
  height: 6.25vh;
}

.version {
  position: absolute;
  color: white;
  font-size: 0.14em;
  bottom: 7vh;
  right: 0.3vh;
  z-index: 100;
}

x-menu .x-menu__scrolling-container .x-menu__inner-container {
  margin-top: 0.2em;
}

/* Back To Catalog */
.catalog_arrow {
  font-size: 1.5vmin;
  position: absolute;
  bottom: 1vh;
  display: flex;
  flex-direction: column;
  padding-left: 1vw;
}
.catalog_arrow .catalog_arrow_text {
  width: 5vw;
}
.catalog_arrow .catalogIcon {
  transform: rotate(180deg);
  width: 2.3vw;
  height: 2.3vw;
}

/*

 █████╗ ███╗  ██╗██╗███╗   ███╗ █████╗ ████████╗██╗ ██████╗ ███╗  ██╗███████╗
██╔══██╗████╗ ██║██║████╗ ████║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝
███████║██╔██╗██║██║██╔████╔██║███████║   ██║   ██║██║   ██║██╔██╗██║███████╗
██╔══██║██║╚████║██║██║╚██╔╝██║██╔══██║   ██║   ██║██║   ██║██║╚████║╚════██║
██║  ██║██║ ╚███║██║██║ ╚═╝ ██║██║  ██║   ██║   ██║╚██████╔╝██║ ╚███║███████║
╚═╝  ╚═╝╚═╝  ╚══╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚══╝╚══════╝
                                                                                                                                                                              
*/

/* Home page transition-in */
.page.show[data-view="home"] .tile_quarter[data-tile="images_2"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.3s;
}
.page.show[data-view="home"] .tile_quarter[data-tile="why"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.7s;
}
.page.show[data-view="home"] .tile_quarter[data-tile="images_3"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.3s;
}
.page.show[data-view="home"] .tile_quarter[data-tile="solutions"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.7s;
}
.page.show[data-view="home"] .tile_half[data-tile="images_1"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.3s;
}
.page.show[data-view="home"] .tile_quarter[data-tile="workloads"] {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.7s;
}

/* Home page transition-out */
.page:not(.show)[data-view="home"] .tile_quarter[data-tile="images_2"],
.page:not(.show)[data-view="home"] .tile_quarter[data-tile="why"] {
  transition: transform 0.5s;
  transform: translate(0%, -100%);
}
.page:not(.show)[data-view="home"] .tile_quarter[data-tile="images_3"],
.page:not(.show)[data-view="home"] .tile_quarter[data-tile="solutions"] {
  transition: transform 0.5s;
  transform: translate(100%, 0%);
}
.page:not(.show)[data-view="home"] .tile_half[data-tile="images_1"],
.page:not(.show)[data-view="home"] .tile_quarter[data-tile="workloads"] {
  transition: transform 0.5s;
  transform: translate(0%, 100%);
}

/* Why, Workloads, Solutions transition-in */
.page.show[data-view="why"] .why_topImg,
.page.show[data-view="workloads"] .workloads_topImg,
.page.show[data-view="solutions"] .solutions_topImg {
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  transform: translate(0%, 0%);
  transition-delay: 0.3s;
}
.page.show[data-view="why"] .leftPanel,
.page.show[data-view="workloads"] .leftPanel,
.page.show[data-view="solutions"] .leftPanel {
  transition: transform 0.5s;
  transform: translate(0%, 0%);
  transition-delay: 0.3s;
}
.page.show[data-view="why"] .rightPanel,
.page.show[data-view="workloads"] .rightPanel,
.page.show[data-view="solutions"] .rightPanel {
  transition: transform 0.7s;
  transform: translate(0%, 0%);
  transition-delay: 0.7s;
}

/* Why, Workloads, Solutions transition-out */
.page:not(.show)[data-view="why"] .why_topImg,
.page:not(.show)[data-view="workloads"] .workloads_topImg,
.page:not(.show)[data-view="solutions"] .solutions_topImg {
  transition: transform 0.5s;
  transform: translate(0%, -100%);
}
.page:not(.show)[data-view="why"] .leftPanel,
.page:not(.show)[data-view="workloads"] .leftPanel,
.page:not(.show)[data-view="solutions"] .leftPanel {
  transition: transform 0.5s;
  transform: translate(-100%, 0%);
}
.page:not(.show)[data-view="why"] .rightPanel,
.page:not(.show)[data-view="workloads"] .rightPanel,
.page:not(.show)[data-view="solutions"] .rightPanel {
  transition: transform 0.5s;
  transform: translate(-93.75vw, 0%);
}

/* Sliding animation for value phrases */
@keyframes valueChange {
  0% {
    transform: translate(-2vw, 0);
    opacity: 0;
  }
  5% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(0, 0);
    opacity: 1;
  }
  30% {
    transform: translate(2vw, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-2vw, 0);
    opacity: 0;
  }
}
.whyBottom,
.workloadsBottom,
.solutionsBottom,
.whyPowerIcon,
.workloadsPowerIcon,
.solutionsPowerIcon {
  animation-name: valueChange;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.whyBottom[data-seq-num="1"],
.workloadsBottom[data-seq-num="1"],
.solutionsBottom[data-seq-num="1"],
.whyPowerIcon[data-seq-num="1"],
.workloadsPowerIcon[data-seq-num="1"],
.solutionsPowerIcon[data-seq-num="1"] {
  opacity: 0;
  animation-delay: 6.66s;
}
.whyBottom[data-seq-num="2"],
.workloadsBottom[data-seq-num="2"],
.solutionsBottom[data-seq-num="2"],
.whyPowerIcon[data-seq-num="2"],
.workloadsPowerIcon[data-seq-num="2"],
.solutionsPowerIcon[data-seq-num="2"] {
  opacity: 0;
  animation-delay: 13.33s;
}

/* Sliding animation for industry quotes */
@keyframes quoteChange {
  0% {
    transform: translate(-1vw, 0);
    opacity: 0;
  }
  2% {
    transform: translate(0, 0);
    opacity: 1;
  }
  30% {
    transform: translate(0, 0);
    opacity: 1;
  }
  32% {
    transform: translate(1vw, 0);
    opacity: 0;
  }
  100% {
    transform: translate(-1vw, 0);
    opacity: 0;
  }
}
.why_content,
.workloads_content,
.solutions_content,
.quote_container {
  animation-name: quoteChange;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-delay: 0s;
}
.why_content[data-seq-num="1"],
.workloads_content[data-seq-num="1"],
.solutions_content[data-seq-num="1"],
.quote_container[data-seq-num="1"] {
  opacity: 0;
  animation-delay: 20s;
}
.why_content[data-seq-num="2"],
.workloads_content[data-seq-num="2"],
.solutions_content[data-seq-num="2"],
.quote_container[data-seq-num="2"] {
  opacity: 0;
  animation-delay: 40s;
}
/*.quote_container[data-seq-num="1"] .quote_title,
.quote_container[data-seq-num="2"] .quote_title {
  color: black;
}
.quote_container[data-seq-num="1"] .quote_subtitle,
.quote_container[data-seq-num="2"] .quote_subtitle {
  color: #268dff;
}*/

/*# sourceMappingURL=custom.css.map */