/* Styling for vRack and portrait devices */

/*

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

.stackingMode .tile_quarter {
	width: 50%;
	height: 25%;
}
.stackingMode .tile_half {
	width: 100%;
	height: 18.75%;
}
.stackingMode .tile_quarter.home[data-tile="title"] {
	top: 18.75%;
}
.stackingMode .tile_quarter.home[data-tile="why"] {
	top: 18.75%;
	left: 50%;
}
.stackingMode .tile_quarter.home[data-tile="workloads"] {
	top: 43.75%;
	left: 0%;
}
.stackingMode .tile_quarter.home[data-tile="solutions"] {
	top: 68.75%;
	left: 50%;
}
.stackingMode .tile_half.home[data-tile="images_1"] {
	top: 0%;
	left: 0%;
}
.stackingMode .tile_quarter.home[data-tile="images_2"] {
	top: 43.75%;
}
.stackingMode .tile_quarter.home[data-tile="images_3"] {
	left: 0%;
	top: 68.75%;
}

.stackingMode .home_title {
	bottom: auto;
	top: 6%;
    left: 36%;
}
.stackingMode .home_tile_content {
	top: 46%;
}
.stackingMode .home_nav_button {
    margin-bottom: 5%;
}

/*

███████╗ ██████╗ ██╗     ██╗   ██╗████████╗██╗ ██████╗ ███╗  ██╗███████╗
██╔════╝██╔═══██╗██║     ██║   ██║╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝
███████╗██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██╔██╗██║███████╗
╚════██║██║   ██║██║     ██║   ██║   ██║   ██║██║   ██║██║╚████║╚════██║
███████║╚██████╔╝███████╗╚██████╔╝   ██║   ██║╚██████╔╝██║ ╚███║███████║
╚══════╝ ╚═════╝ ╚══════╝ ╚═════╝    ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚══╝╚══════╝
                                                                                                                                                                              
*/
/* Also WHY and WORKLOADS */


.stackingMode .why_topImg,
.stackingMode .workloads_topImg,
.stackingMode .solutions_topImg {
	height: 18.75vh;
}

/* Left Panel */
.stackingMode .leftPanel {
	top: 18.75vh;
	left: 0;
	width: 100%;
}
.stackingMode .whyIcon,
.stackingMode .workloadsIcon,
.stackingMode .solutionsIcon,
.stackingMode .whyIcon svg,
.stackingMode .workloadsIcon svg,
.stackingMode .solutionsIcon svg {
	width: 13vw;
    height: 7vh;
}
.stackingMode .whyIcon,
.stackingMode .workloadsIcon,
.stackingMode .solutionsIcon {
	left: 3.6vw;
}
.stackingMode .why_title,
.stackingMode .workloads_title,
.stackingMode .solutions_title {
	left: 20%;
	top: 5%;
	width: 29%;
    font-size: 3vmin !important;
}
.stackingMode .why_content,
.stackingMode .workloads_content,
.stackingMode .solutions_content {
	width: calc(50% - 7.2vw);
	height: 10.1vh;
	left: 3.6vw;
	bottom: 73.4%;
	font-size: 0.1em;
}
.stackingMode .workloads_content[data-seq-num="1"] {
	height: 10.1vh;
	bottom: 73.4% !important;
}
.stackingMode .quote_container {
	width: calc(50% - 7.2vw);
	height: 5%;
	left: 3.6vw;
	bottom: 70%;
}
.stackingMode .page[data-page="workloads"] .quote_container[data-seq-num="1"] {
	bottom: 70% !important;
}
.stackingMode .accordionMenu {
	width: 49.5%;
	height: 25vh;
}
.stackingMode .pathwayMenuItem,
.stackingMode .accordian_option {
	height: calc(2.778vh - 2px);
}
.stackingMode .accordian_bottom {
	height: 25vh;
}
.stackingMode .page[data-page="why"] .accordian_bottom,
.stackingMode .page[data-page="workloads"] .accordian_bottom {
    height: 11.111vh;
}
.stackingMode .left_bottomPanel {
	width: 50vw;
}
.stackingMode .solutions_bottomImg {
	background-size: cover;
}
.stackingMode .solutions_bottomImg[data-product="ac922"] {
	background-size: 100%;
}

/* Right Panel */
.stackingMode .rightPanel {
	width: 100%;
	height: 50vh;
	bottom: 6.25vh;
	z-index: 1;
	background-color: unset;
}
.stackingMode .whyContentCards,
.stackingMode .workloadsContentCards,
.stackingMode .solutionsContentCards {
	height: 50%;
	width: 100%;
	background-color: white;
}
.stackingMode .contentScroll .x-scrollable__scroll-container {
    top: unset !important;
    height: 14.8vh !important;
    bottom: 0.7vh;
}
.stackingMode .overviewContent .contentScroll .x-scrollable__scroll-container {
    top: unset !important;
    bottom: -13vh !important;
    height: 12.9vh !important;
}
.stackingMode .contentScroll .x-gradient.top {
	top: 36% !important;
}
.stackingMode .contentScroll .x-gradient.bottom {
	bottom: 0.3vh;
}
.stackingMode .overviewContent .contentScroll .x-gradient.top {
	top: 102%;
}
.stackingMode .overviewContent .contentScroll .x-gradient.bottom {
	bottom: -13vh;
}
.stackingMode .collateralItem .shareIcon {
	width: 3vw;
	height: 3vw;
}
.stackingMode .collateralShare x-share-item-badge {
	width: 1.2vw;
    height: 1.2vw;
}
.stackingMode .tabMenu {
    width: 12.5vw;
	height: 25vh;
}
.stackingMode .tab {
    height: calc(6.25vh - 1px);
}
.stackingMode .tab .icon svg {
	width: 4.5vw;
	height: 4.5vw;
}
.stackingMode x-share-item-badge {
	width: 1.6vw;
    height: 1.6vw;
    top: 43%;
    left: 33%;
}
.stackingMode .right_bottomPanel {
	left: 50vw;
}
.stackingMode .solutionsBottom[data-seq-num="2"] {
	font-size: 0.16em;
}

.stackingMode .stack_mode_divider {
	display: initial;
	position: absolute;
	width: 50vw;
	height: 2px;
	right: 0;
	bottom: 50vh;
	background-color: #dcdcdc;
}

/*

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

/* Bottom bar, homepage */
.stackingMode .side_menu {
	width: 100%;
	height: 6.25%;
	top: 93.75%;
	flex-direction: row;
	align-items: center;
	background-color: white;
}
.stackingMode .side_menu .side_menu_button {
	width: 12.5vw;
	height: 100%;
	margin-top: 0;
}
.stackingMode .menuIcon {
	width: 4.6vw;
	height: 4.6vw;
}
.stackingMode .menuIcon rect {
	fill: #1d44ff !important;
}
.stackingMode .side_menu .side_menu_button[data-button="share"] svg .st2 {
	stroke: #1d44ff !important;
}
.stackingMode .shareIcon {
	width: 4.1vw;
	height: 4.1vw;
}
.stackingMode x-share-cart-badge {
	width: 2.1vw;
	height: 2.1vw;
    left: 4.3vw;
    top: calc(50% - 1.3vw);
}

/* Bottom bar, pathways */
.stackingMode .navMenu {
	height: 6.25vh;
    width: 100%;
    top: 93.75vh;
    position: absolute;
}
.stackingMode .navMenu.right {
	display: none;
}
.stackingMode .navBox {
	height: 100%;
    width: 18.75vw;
}
.stackingMode .navButton_container {
	flex-direction: row;
    width: 81.25vw;
    height: 100%;
    left: 18.75vw;
}
.stackingMode .catalog_arrow {
	right: 1em;
	bottom: 0;
    height: 100%;
    justify-content: center;
}
.stackingMode .catalog_arrow .catalog_arrow_text {
	width: 7vw;
}
.stackingMode .navButton {
	width: 12.5vw;
	height: 100%;
	margin-bottom: 0;
}
.stackingMode .page[data-view="why"] x-share-cart-badge, 
.stackingMode .page[data-view="workloads"] x-share-cart-badge, 
.stackingMode .page[data-view="solutions"] x-share-cart-badge {
	height: 2.3vw;
    width: 2.3vw;
    left: 3.5vw;
}
.stackingMode .back_button {
	top: 12.5vh;
	width: 12.5vw;
	height: 6.25vh;
}

/* Side-menu */
.stackingMode x-side-menu .x-side-menu__side-menu.animating-element {
	position: absolute;
	width: 50vw;
	max-height: 56.25vh;
	bottom: 0;
}
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__close-button,
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__bottom-right-content .x-side-menu__home-button,
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__bottom-right-content .x-side-menu__more-info-button {
	width: 12.5vw;
}
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__close-button .x-side-menu__close-button-icon {
	width: 0.38em;
	height: 0.38em;
}
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__bottom-right-content .x-side-menu__home-button .x-side-menu__home-button-icon {
	width: 0.39em;
    height: 0.39em;
}
.stackingMode x-side-menu .x-side-menu__side-menu .x-side-menu__bottom-bar .x-side-menu__bottom-right-content .x-side-menu__more-info-button .x-side-menu__more-info-icon {
    width: 0.145em;
    height: 0.335em;
}

/* Sharecart */
.stackingMode x-share-cart .share_cart_container {
	width: 50vw;
	left: 0;
    top: auto;
    bottom: -93.75vh;
}
#body[data-page="why"].stackingMode x-share-cart .share_cart_container, 
#body[data-page="workloads"].stackingMode x-share-cart .share_cart_container, 
#body[data-page="solutions"].stackingMode x-share-cart .share_cart_container {
	left: 0vw;
}

/*

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

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

/* Pathway Transitions */
.stackingMode .page:not(.show)[data-view="why"] .rightPanel, 
.stackingMode .page:not(.show)[data-view="workloads"] .rightPanel, 
.stackingMode .page:not(.show)[data-view="solutions"] .rightPanel {
    transform: translate(-100vw, 0%);
}
.stackingMode .page.show[data-view="why"] .rightPanel,
.stackingMode .page.show[data-view="workloads"] .rightPanel,
.stackingMode .page.show[data-view="solutions"] .rightPanel {
	transition-delay: 0.3s;
}
.stackingMode .page.show[data-view="why"] .leftPanel, 
.stackingMode .page.show[data-view="workloads"] .leftPanel, 
.stackingMode .page.show[data-view="solutions"] .leftPanel {
	transition-delay: 0.7s;
}