#canvasContainer {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.noselect .headerIcon {
	width: 144.77px;
	height: 35.8px;
	position: absolute;
	top: 19px;
	left: 34px;
}

@font-face {
	font-family: "Gotham-Book";
	src: url("fonts/gotham_book/Gotham-Book.eot");
	src: url("fonts/gotham_book/Gotham-Book.eot") format("embedded-opentype"), 
	url("fonts/gotham_book/Gotham-Book.woff") format("woff"), 
	url("fonts/gotham_book/Gotham-Book.ttf") format("truetype"), 
	url("fonts/gotham_book/Gotham-Book.svg#MyriadProLight") format("svg");
}

@font-face {
	font-family: "Gotham-Bold_gdi";
	src: url("fonts/Gotham-Bold_gdi.eot");
	src: url("fonts/Gotham-Bold_gdi.eot") format("embedded-opentype"), 
	url("fonts/Gotham-Bold_gdi.woff") format("woff"), 
	url("fonts/Gotham-Bold_gdi.ttf") format("truetype"), 
	url("fonts/Gotham-Bold_gdi.svg") format("svg");
}

html,body {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #bfbec3;
	-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
	font-family: "Gotham-Book";
	color: #000;
}

body {
	color: #3b4652;
	padding: 0px;
	font-family: "Gotham-Book";
	margin: 0px;
	overflow: hidden;
	background-color: #fff;
	font-size: 16px;
}

#close {
	position: absolute;
	top: -531px;
	left: 1145px;
	display: none;
}

#reset {
	right: 40px;
	bottom: 90px;
	visibility: hidden;
	z-index: 1005;
}

#home {
	position: absolute;
	left: 1225px;
	top: 18px;
	display: block;
	z-index: 1008;
}

.cur {
	cursor: pointer;
	z-index: 10;
	display: none;
}

#loader {
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: left;
	padding: 0px 0px;
	margin: 0px;
	z-index: 0;
}

#loader1 {
	z-index: 3050;
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: left;
	padding: 0px 0px;
	margin: 0px;
}

#loader2 {
	z-index: 5030;
	position: absolute;
	left: -300px;
	top: -11px;
	text-align: left;
	padding: 0px 0px;
	margin: 0px;
}

#loaderbar {
	position: absolute;
	left: 300px;
	top: 78px;
	width: 1px;
	outline: none;
	overflow: hidden;
}

#scenediv {
	text-align: left;
	padding: 0px 0px;
	margin: 0;
	width: 1286px;
	height: 723px;
	visibility: visible;
	border: 1px solid rgb(128, 128, 128);
	overflow: hidden;
	position: absolute;
}

#scenediv #accordion {
	left: 0px;
    top: 134px;
    padding: 0px;
    position: absolute;
    width: 235px;
    height: 100%;
    z-index: 1001;
    overflow-y: auto;
    scrollbar-width: thin;
    visibility: visible;
}

#lenovo_logo {
	position: absolute;
	bottom: 136px;
	right: 0px;
	z-index: 0;
	height: 119.86px;
}

#rightAnim {
	position: absolute;
	top: 80px;
	right: -235px;
	z-index: 9999;
	cursor: pointer;
	color: #fff;
}

#right_txt li {
	list-style: none;
}

#righttxt1 {
	list-style: none;
	position: absolute;
	top: 44px;
	left: 28px;
	font-size: 12px;
	font-family: "Gotham-Book";
	line-height: 70px;
}

#righttxt2 {
	list-style: none;
	position: absolute;
	top: 10px;
	left: 41px;
	font-size: 11px;
	font-family: "Gotham-Book";
}

#rightAnim ul li:before {
	background-color: rgba(113, 112, 115, 0);
}

.greyOutBox {
	position: absolute;
	top: 3px;
	left: 5px;
	height: 15px;
	width: 15px;
	background-color: #707072;
	z-index: 0;
	display: inline-block;
}

.redOutBox {
	background-color: #ff0000;
}

.productName {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
    font-size: 20px;
    color: #ededed;
    width: 400px;
    height: 74px;
    contain: layout paint;
}
 
.productName .productBarBg {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 0;
}

.productName span {
	display: inline-block;
	position: absolute;
	top: 12px;
    left: 22px;
	width: 267px;
	font-family: "Gotham-Book";
}

.autoPlayImg {
	height: 14px;
}

span#pauseplayImg {
	display: inline-block;
	position: absolute;
	right: 12px;
	top: 12px;
}

span#pauseplayImg2 {
	display: none;
	position: absolute;
	right: 12px;
	top: 12px;
}

.sub-heading-text {
	position: absolute;
	left: 87px;
	top: 110px;
	z-index: 0;
	font-size: 22px;
	color: #464646;
	display: block;
}

.animPlayBtns, .animPlayBtns1 {
	position: relative;
	top: 0;
	left: 0;
	margin: 15px 15px 15px -15px;
	width: 215px;
	cursor: pointer;
}

.animPlayBtns img {
	width: 65px;
	height: 43px;
	z-index: 11111111;
}

.animPlayBtns span, .animPlayBtns1 span {
	margin-left: 37px;
	display: inline-block;
	color: #4a555d;
	font-size: 14px;
}

li {
	list-style-type: disc;
}

.pointSubText {
	position: absolute;
    top: 70px;
    left: 330px;
	width: 850px;
    z-index: 11;
}

.pointSubText .text {
	text-align: left;
	display: inline-block;
	font-family: "Gotham-Book";
}

#HeadingText {
    position: absolute;
    top: 20px;
    left: calc(50% + 118px);
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 40px);
    text-align: center;
    font-size: 25px;
    font-family: "Gotham-Bold_gdi";
    white-space: normal;
    overflow-wrap: break-word;
}

.cptextWrapper {
    position: absolute;
    width: 890px;
    text-align: center;
}

#onloadCopy {
	position: absolute;
	display: block;
	top: 70px;
	left: 330px;
	width: 913px;
	z-index: 11;
}

/***----- Subheading and Hotspot CSS START -----***/

.plusLine {
	position: relative;
	border-style: dotted;
	border-color: #eb140a;
	border-width: 0;
}

.plusText {
	position: absolute;
	margin: 0;
	text-align: center;
	line-height: 1.1;
}

.hotspot-vj {
	position: absolute;
	pointer-events: none;
}

.hotspot-vj p {
	font-size: 15px !important;
}

/***----- Subheading and Hotspot CSS END -----***/

#nvidiaLogo {
	position: absolute;
	opacity: 1;
	left: 247px;
	bottom: 25px;
}

/* Liquid Cooling Rack */
#liquidcoolingHotspot1 {
    position: absolute;
    top: 235px;
    right: 360px;
}

#liquidcoolingHotspotLine1 {
    border-width: 2px 2px 0 0;
    width: 164px;
    top: 2px;
    right: 143px;
}

.liquidcoolingHotspot1_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    top: -15px;
    left: 20px;
}

#liquidcoolingHotspotText1 {
    top: -4px;
    width: 112px;
    right: 304px;
    text-align: left;
}

#liquidcoolingHotspot2 {
    position: absolute;
    top: 176px;
    left: 806px;
}

#liquidcoolingHotspotLine2 {
    border-width: 2px 2px 0px 0px;
    width: 40px;
    height: 400px;
    left: 18px;
    bottom: 15px;
}

#liquidcoolingHotspotLine2_1 {
    border-width: 2px 2px 0 0;
    width: 32px;
    top: -14px;
    left: 26px;
}

#liquidcoolingHotspotLine2_2 {
	border-width: 2px 2px 0 0;
    width: 36px;
    top: -215px;
    left: 58px;
}

.liquidcoolingHotspot2_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    top: -32px;
    left: 14px;
}

.liquidcoolingHotspot2_1_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    top: 371px;
    left: 23px;
}

#liquidcoolingHotspotText2 {
	width: 215px;
    top: 177px;
    left: 82px;
    text-align: left;
}

#liquidcoolingHotspot3 {
    position: absolute;
    top: 613px;
    right: 348px;
}

#liquidcoolingHotspotLine3 {
    border-width: 2px 2px 0 0;
    width: 188px;
    bottom: 39px;
    right: 141px;
}

.liquidcoolingHotspot3_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    bottom: 22px;
    left: 46px;
}

#liquidcoolingHotspotText3 {
    top: -11px;
    width: 70px;
    right: 188px;
    text-align: left;
}
/* Liquid Cooling Rack */

/* Liquid Cooling Node  */
#liquidcoolingnodeHotspot1 {
    position: absolute;
    top: 117px;
    right: 141px;
}

#liquidcoolingnodeHotspotLine1 {
    border-width: 2px 2px 0 0;
    height: 56px;
    top: 0px;
    right: 0px;
}

.liquidcoolingnodeHotspot1_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    top: 40px;
    left: -2px;
}

#liquidcoolingnodeHotspotText1 {
    top: -18px;
    left: -55px;
    width: 90px;
    text-align: center;
}

#liquidcoolingnodeHotspot2 {
    position: absolute;
    top: 538px;
    right: 141px;
}

#liquidcoolingnodeHotspotLine2 {
    border-width: 2px 2px 0 0;
    height: 56px;
    top: 0px;
    right: 0px;
}

.liquidcoolingnodeHotspot2_Circle {
    position: absolute;
    border: 3px solid red;
    border-radius: 50%;
    bottom: 40px;
    left: -2px;
}

#liquidcoolingnodeHotspotText2 {
    top: 57px;
    width: 100px;
    left: -56px;
    text-align: center;
}
/* Liquid Cooling Node  */

/*** Video CSS START ***/
#playVideos {
	position: absolute;
    overflow: hidden;
    width: 71%;
    height: 71%;
    top: 16%;
    left: 23%;
    z-index: 1;
}

#playVideos1 {
	position: absolute;
    overflow: hidden;
    width: 71%;
    height: 71%;
    top: 14%;
    left: 23%;
    z-index: 1;
}
/*** Video CSS END ***/