/********************************************** Shared ********************************************/

.nxtVideo{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1024px;
	height: 768px;
}
span.smaller{

    font-size: 70%;
    vertical-align: text-top;
    /* padding-top: 5px; */
    margin-bottom: -5px;
    line-height: 164%;
}
#buttonGoHome{
    position: absolute;
    top: 20px;
    left: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 21px;
    background-image: url(../images/btn_back@3x.png);
    width: 60px;
    height: 60px;
    background-color: white;
    cursor: pointer;
    border-radius: 30px;
}
#buttonDocLib{
	position: absolute;
	top: 20px;
	right: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    background-image: url(../images/btn_library@3x.png);
    width: 60px;
    height: 60px;
    background-color: white;
    cursor: pointer;
    border-radius: 30px;
}
#laborieLogo,
.laborieIcon{
    position: absolute;
    bottom: 15px;
    right: 40px;
    width: 200px;
    height: 50px;
    background-image: url(../images/logo_lab@3x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}
.nxtIcon{
    position: absolute;
    bottom: 15px;
    left: 40px;
    width: 200px;
    height: 50px;
    background-image: url(../images/logo_nxt@3x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}
/********************************************** Landing Screen ***************************************/
.landingBG{    
    background-image: url(../images/TitleRender.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.landingLeftSide{
    position: absolute;
    top: 100px;
    left: 100px;
}
.landingLeftSide .title{
    font-size: 32px;
    color: #ed5e1b;
}
.landingLeftSide .body{
    width: 366px;
    font-size: 20px;
    color: #0b52a2;
    margin-top: -7px;
}
#buttonGoToMain{
    margin-top: 87px;
    line-height: 50px;
    font-size: 24px;
    color: #3b85ca;
    padding-left: 60px;
    cursor: pointer;
    position: relative;
}
#buttonGoToMain .icon{
    background-image: url(../images/landing_features_icon@3x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    background-color: #3f86c9;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    pointer-events: none;
    margin-left: -60px;
    margin-top: -2px;
}
#buttonMediaLibrary{
    margin-top: 50px;
    line-height: 50px;
    font-size: 24px;
    color: #3b85ca;
    padding-left: 60px;
    cursor: pointer;
    position: relative;
}
#buttonMediaLibrary .icon{
    background-image: url(../images/landing_lib_icon@3x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    background-color: #3f86c9;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    pointer-events: none;
    margin-left: -60px;
    margin-top: -2px;
}
#buttonValueProp{
    position: absolute;
    left: 100px;
    bottom: 30px;
    color: #0b52a2;
    border: 1px solid #3b85ca;
    line-height: 40px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 20px;
    cursor: pointer;
}
#goodDesignLogo{
    position: absolute;
    bottom: 18px;
    left: calc(50% - 100px);
    padding-top: 61px;
    background-image: url(../images/good_design.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 52px 52px;
    font-size: 12px;
    width: 200px;
    text-align: center;
}

/********************************************** Value Proposition Screen ****************************/
.valuePropBG{
    background-image: url(../images/TitleRender.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.valuePropLeftSide{
    position: absolute;
    top: 100px;
    left: 100px;
    width: 379px;
}
.valuePropLeftSide .title{
    color: #0b52a2;
    font-size: 19px;
    margin-bottom: 6px;
}
.valuePropLeftSide .body{
    color: black;
    width: 396px;
    font-size: 14px;

}
.valuePropLeftSide .list1{
    color: #ed5e1b;
    font-size:14px;
}
.valuePropLeftSide .list1 li{
    margin-left: -20px;
    margin-top: 10px;
    cursor: pointer;
    list-style-image: url('../images/carrot_closed.png');
}
.valuePropLeftSide .list1 li.selected{
    list-style-image: url('../images/carrot_open.png');
}
.valuePropLeftSide .list2{
    color: black;
    max-height: 0;
    overflow: hidden;
}
.valuePropLeftSide .list1 li.selected .list2{
    max-height: 768px;
}
.valuePropLeftSide .list2 li{
    font-size: 11px;
    margin-left: -20px;
    padding-top: 5px;
    margin-top: 0px;
    list-style-image: none;
    cursor: auto;
}
.valuePropLeftSide .large{
    font-size:14px;
}
.valuePropDisclaimer{
    color: #3b85ca;
    width: 386px;
    position: absolute;
    left: 100px;
    bottom: 40px;
    font-size: 13px;
}

/********************************************** Main Screen ***************************************/
.mainBG{
    background-image: url(../images/Full_Render_Sample.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: contain;
}
#hotspotArea{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1024px;
	height: 768px;
    background-image: url(../images/hotspots@3x.png);
    background-repeat: no-repeat;
    background-size: 670px;
    background-position: 225px 86px;
}

#hotspotArea .hotspot{
	position: absolute;
	cursor: pointer;
	text-align: left;
	line-height: 30px;
    font-size: 18px;
	color: #3b86c9;
    left: 90px;
}
#hotspotArea .hotspot.multi{
    line-height: 20px;
}

#hotspotInfusionHook.hotspot{
    top: 129px;
    width: 242px;
    padding-left: 15px;
}
#hotspotRoamNXT.hotspot{
    top: 188px;
    margin-left: 40px;
    width: 205px;
}
#hotspotConsumableScanner.hotspot{
    top: 217px;
    margin-left: -44px;
    width: 341px;
}
#hotspotInfusionPumpNXT.hotspot{
    top: 285px;
    margin-left: -28px;
    width: 303px;
}
#hotspotUrocapNXT.hotspot{
    top: 518px;
    margin-left: 29px;
    width: 229px;
}
#hotspotTouchscreen.hotspot{
    left: auto;
    right: 128px;
    top: 132px;
    margin-left: 20px;
    width: 280px;
    text-align: right;
}
#hotspotFlexibleHoop.hotspot{
    left: auto;
    right: 114px;
    top: 187px;
    margin-left: 20px;
    width: 487px;
    text-align: right;
}
#hotspotWorksurface.hotspot{
    left: auto;
    right: 130px;
    top: 270px;
    margin-left: 20px;
    width: 244px;
    text-align: right;
}
#hotspotTDOCNXTCatheters.hotspot{
    top: 366px;
    left: auto;
    right: 166px;
    width: 300px;
}
#hotspotCatheterConnection.hotspot{
    top: 408px;
    left: auto;
    right: 92px;
    width: 369px;
}
#hotspotSynergySoftware.hotspot{
    left: auto;
    right: 90px;
    top: 79px;
    margin-left: 20px;
    width: 313px;
    text-align: right;
}

#button360{
    position: absolute;
    bottom: 15px;
    left: calc(50% - 50px);
    background-color: #3b86c9;
    color: white;
    background-image: url(../images/icon_rotate@3x.png);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 30px;
    width: 100px;
    padding: 20px;
    line-height: 7px;
    font-size: 21px;
    text-align: right;
    border-radius: 42px;
}

/********************************************** Rotation Screen ************************************/
#imageSequence{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
#buttonReturnToFeatures{
    position: absolute;
    bottom: 15px;
    left: calc(50% - 100px);
    background-color: #3b86c9;
    color: white;
    background-image: url(../images/icon_backtofeatures@3x.png);
    background-position: 14px center;
    background-repeat: no-repeat;
    background-size: 30px;
    width: 200px;
    padding: 20px;
    line-height: 7px;
    font-size: 21px;
    text-align: right;
    border-radius: 42px;
}

/********************************************** Detail Screens ************************************/

.detailsPopup{
    position: absolute;
    max-width: 400px;
    max-height: 900px;
    padding: 40px;
    background-color: rgba(0,103,177,8);
    color: white;
    font-size: 18px;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    background-size: 20px 18px;
    background-image: url(../images/btn_open@3x.png);
    left: 0px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 0px;
    overflow: hidden;
}
.detailsPopup.off{
    left: -480px;
}
.detailsPopup.right{
	background-position: 395px 10px;
    background-image: url(../images/btn_close@3x.png);
    left: auto;
    right: 0px;
}
.detailsPopup.right.off{
    right: -480px;
}
.detailsPopup .title{
    font-size: 20px;
    font-weight: bold;
    opacity: 1;
    width: 360px;
}
.detailsPopup .body{
    font-size: 16px;
    opacity: 1;
    width: 360px;
}
.detailsPopup.closed{
    border-radius: 20px;
    padding: 20px;
    background-image: url(../images/btn_close@3x.png); 
    margin-left: -40px;
   /* width: 50px;*/
    max-width: 50px;
    max-height: 0px;
    background-position: 49px 10px;
}
.detailsPopup.closed.right{
    background-image: url(../images/btn_open@3x.png);
    margin-left: auto;
    margin-right: -40px;
    background-position: 20px 10px;

}
.detailsPopup.closed .title{
    opacity: 0;
}
.detailsPopup.closed .body{
    opacity: 0;
}
.singleHotspot{
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../images/hotspot.png);
    width: 30px;
    height: 30px;
    pointer-events: none;
}
.singleHotspot.touchscreen{
    top: 200px;
    left: 200px;
}

.detailsPopup.consumableScanner{
    top: 451px;
}
.detailsPopup.flexibleHoop{
    top: 309px;;
}
.detailsPopup.flexibleHoop .body{
    width: 400px;
}
.detailsPopup.infusionHook{
    top: 274px;
}
.detailsPopup.infusionPumpNXT{
    top: 459px;
}
.detailsPopup.touchscreen{
    top:200px;
}
.detailsPopup.synergySoftware{
    top:200px;
}
.detailsPopup.urocapNXT{
	top:200px;
}
.detailsPopup.roamNXT{
	top:200px;
}
.detailsPopup.workSurface{
    top: 428px;
    background-position: 440px 10px;
}
.detailsPopup.workSurface .body{
    width: 400px;
}
.detailsPopup.tdocCatheters{
    top: 146px;
}
.detailsPopup.tdocCatheters .body{
    width: 400px;
}
.detailsPopup.catheterConnection{
    top: 524px;
}