/****************************************  Ethosh ****************************************/
.instrumentInfo .instrumentInfoContainer .ctaContainer .ctabutton{
	margin-top: 25px;
	width: max-content;
	
}

.instrumentInfo .instrumentInfoContainer .ctaContainer .ctaButton{
	font-weight: 500 !important;
    line-height: 100% !important;
    color: #ffffff !important;
	padding: 10px 20px;
	border-radius: 4px;
	border: 1px solid #ffffff;
	background-color: #0085d5;
    align-self: flex-end !important;
	font-size: 13px;
    text-transform: none !important;
    text-decoration: none !important;
	    margin-top: -15%;
}


#ngsInteractive{
	width:1170px;
	padding:0 15px;
	margin:0 auto;
	font-size: 13px;
    line-height: 17px;
	font-family: 'Roboto', Arial, sans-serif, Helvetica !important;
}

img{
	max-width:100%;
	display:block;
	height:auto;
	vertical-align: middle;
}

#productDiv ::-webkit-scrollbar {
    width: 5px;
}

#productDiv ::-webkit-scrollbar-thumb {
    background-color: #d5d2d2;
}

#productDiv ::-webkit-scrollbar-thumb:hover {
    background-color: #d5d2d2;
}

.ngsHeadline{
	color:#53575A;
	font-size: 32px;
    line-height: 40px;
	font-weight:lighter;
	margin-top: 10px;
    margin-bottom: 10px;
}

#ngslabHeadline{
	color:#0085D5 !important;
	position:absolute;
	top: 0;
	font-size:32px;
	line-height:40px;
	margin-left:15px !important;
}

#ngsWorkflowHeadline{
	font-size: 22px !important;
    line-height: 32px !important;
	margin-left:0 !important;
}

#ngsWorkflowHeadline .moreDeatils{
	float: right;
    display: block;
	font-size:12px;
	color: #0085d5 !important;
	cursor:pointer;
}

#ngsWorkflowHeadline .moreDeatils:hover {
	color: #00426a !important;
	text-decoration: underline !important;
}

#productInfo{
	position: relative;
} 

#personaPanel{
	display: flex;
    align-items: center;
    background-color: #00426A;
    color: #ffffff;
    width: 95%;
    padding: 1% 1% 1% 4%;
    background-image: url('https://www.agilent.com/cs/promotions/images/band.png');
    background-repeat: no-repeat;
    background-size: auto;
}

.bandPanel{    
	width: 3%;
    margin-right: 1%;
    float: left;
    text-align: left;
}

.personaBand{
	float: left;
    width: 50%;
	min-height:120px;
}

.personaContainer{
	display: flex;
	flex-direction:row;
	justify-content: flex-start;
    align-items: center;
	width:100%;
}

.bandContent{
	display: none;
	width:100%;
	padding:10px;
}

.title{
	width: 23%;
    margin-right: 4%;
	font-size:24px;
	line-height:30px;
	text-align:right;
	font-weight:lighter;
}

.personaBtnPanel{
	display:flex;
	flex-direction:row;
	width:73%;
}

.personaBtnPanel .personaBtn{
	width:32%;
	margin-right:2%;
	display:flex;
	align-items:center;
	justify-content:left;
	font-size:16px;
	line-height:20px;
	font-weight:500;
	cursor:pointer;
}

.personaBtnPanel .personaBtn:last-child{
	margin-right:0;
}

.personaBtnContainer{
	width:100%;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.personaIcon{
	float:left;
	border-radius: 50%;
	background: #ffffff;
	margin-right:5%;  
	text-align: center;
}

.personaName{
	width:70%;
	float: left;
}

.perosnaInfo{
	width:100%;
	margin-top: 15px;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.perosnaInfo .personaIcon{
	margin-right:2%;
}

.commaIcon {
	width: 4%;
	float: left;
	margin-right: 2%;
}

.personaContent{
	float: left;
    width: 82%;
}
.personaHeading{
	font-weight: lighter;
    font-size: 18px;
    margin-bottom: 10px;
}

.personaHeading br{
	display:none;
}

.personaDescription{
    float: left;
}

.labContainer,.instrumentContainer{
	width: 100%;
    display: inline-block;
	position: relative;
	overflow: hidden;
}

.workflowBandContainer{
	float:left;
	width:22%;
	margin-right:3%;
	padding:2%;
	padding-top:0;
	background-color:#E6E7E8;
}

.workflowContent{
	display: flex;
    align-items: center;
}

.workflowBandDiv{
	width:100%;
}

.workflowVerticalDiv{
	width:10%;
	display: flex;
    flex-direction: column;
    align-items: center;
	transform: rotate(180deg);
}

.verticaltxt{
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
	padding: 5px;
}

.verticalArrow{
	width:1px;
	height:110px;
	background-color:#888B8D;
}

.leftArrow::before{
	content: "-";
    position: absolute;
    left: 12px;
    margin: 0 auto;
    color: #888B8D;
    line-height: 1.5px;
}

.bandContainer{
	display: flex;
    align-items: center;
	width:100%;
}

.bandTxt{
	font-size:14px;
	width: 75%;
    margin-right: 2%;
	color: #53575A;
    font-weight: bold;
	float:left;
}

.fontGrey{
	color:#888B8D;
}

.fontBlue{
	color:#2483C6;
}

.bandImg{
	width:22%;
	float:left;
	cursor:pointer;
}

.bandImg img{
	width:100%;
}

.workflowArrow{
	width: 100%;
    text-align: right;
}

.workflowArrow img{
	width: 5%;
	float: right;
    margin-right: 10%;
}

.animaImg{
	float:left;
	width:70%;
	position: relative;
}

.animaImg img{
	max-width:75%;
	margin:0 auto;
	display:block;
	height:auto;
	vertical-align: middle;
}

.labHotspot{
    padding: 6px 12px;
    position: absolute !important;
    cursor: pointer;
	text-align:center;
}

.hotspotBtn{
	width:40px;
	height:40px;
	border-radius:22px;
	border:1px solid #ffffff;
	background-repeat:no-repeat;
	background-size: contain;
	position:absolute;
	cursor:pointer;
	margin-left: 30%;
    margin-top: 5%;
}

.pulseButton{
	position: absolute;
        top: -2px;
    left: -2px;
    width: 40px;
    height: 40px;
    border-radius: 30px;
	cursor: pointer;
	border: 2px solid #0085D5;
}

.pulseButton.-pulse1 {
    animation: pulse 2s linear infinite 0s;
}
.pulseButton.-pulse2 {
    animation: pulse 2s linear infinite 1s;
}

#labHotspot1{
	top: 42%;
    left: 53%;
}

#labHotspot2{
	top:10%;
	left:50%;
}

#labHotspot3{
	top:22%;
	left:70%;
}

.labHotspotBtn{
	width:15px;
	height:15px;
	bottom: -12px;
    left: -8px;
	border-radius:22px;
	border:1px solid #0085D5;
	position:absolute;
	cursor:pointer;
}

.labHotspotBtn.-pulse1 {
    animation: pulse 2s linear infinite 0s;
}
.labHotspotBtn.-pulse2 {
    animation: pulse 2s linear infinite 1s;
}

@keyframes pulse {
	0% {
		opacity: 0;
		transform: scale(0.5)
	}

	33% {
		opacity: 1;
		transform: scale(1)
	}
	
	100% {
		opacity: 0;
		transform: scale(1.3)
	}
}

.workflowName{
	font-size: 11px;
    line-height: 15px;
    padding: 6px 12px;
	color:#ffffff;
    background-color: #0085D5;
}

.workflowContainer{
	width: 100%;
}

.selectWorkflowContainer{
	min-width: 450px;
	display: inline-block;
    position: relative;
	padding-top: 0.5em;
}

.videoIcon{
    float: right;
    width: 30px;
    height: 30px;
	cursor:pointer;
    background-image: url('https://www.agilent.com/cs/promotions/images/ngs_play_icon.png');
    background-position: center;
    background-repeat: no-repeat;
}

.infoIcon{
    float: right;
    width: 30px;
    height: 30px;
    cursor: pointer;
    margin-right: 10px;
    background-image: url('https://www.agilent.com/cs/promotions/images/Sample_QC_info_close_icon.png');
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
	z-index: 11;
    position: relative;
}

.infoClose{
	background-position: 0 -29px;
}

.infoContainerDiv{
	background-color: #ffffff; 
	width:460px;
	float:right;
	top: 15px;
    right: 55px;
    z-index: 11;
    position: absolute;
	display:none;
	height: 370px;
    overflow-y: auto;
}

.contentDiv{
	color:#53575A;
	padding:4%;
}

.contentDiv:last-child{
	padding-top:0;
}

.contentDiv:first-child{
	padding-top:4%;
}

.contentDivHeader{
	display: flex;
    align-items: center;
    width: 100%;
	margin-bottom:10px;
}

.headerIcon{
	width: 10%;
    float: left;
	margin-right:2%;
}

.contentDivHeading{
	font-weight:bold;
}

.contentDivInfo ul{
	margin-left: -20px;
}

.contentDivInfo p{
	margin-bottom: 5px;
}

.workflowSelectBox{
	display: inline-block;
    width: 100%;
}

.selectWorkflow{
	font-size:16px;
	display: inline-block;
    float: left;
    margin-right: 5%;
}

.selectWorkflow br,.navigationItem br{
	display:none;
}

.navigationPanel{
	width: 100%;
	position: absolute;
	z-index: 1;
	bottom:10%;
	color:#0085D5;
	font-size:16px;
	line-height:20px;
}

.navigationBtn{
	cursor:pointer;
	font-weight: bold;
}

.navigationBtn:first-child{
	float:left;
	margin-left:2%;
}

.navigationBtn:first-child::before{
	content:url('https://www.agilent.com/cs/promotions/images/previous_btn.png'); 
	position:relative; 
	padding-right: 10px;
    left: 0;
	top: 10px;
}

.navigationBtn:last-child{
	float:right;
	margin-right:2%;
}

.navigationBtn:last-child::after{
	content:url('https://www.agilent.com/cs/promotions/images/next_btn.png');
	position:relative;
	padding-left: 10px;
    left: 0;
	top: 10px;
}

.workflowPanel{
	width: 100%;
	background-color: #ffffff;
    color: #0085D5;
    padding: 10px;
	position: absolute;
	z-index: 2;
	display: none;
    top: 32px;
}

.workflowIcon {
    float: left;
    width: 20px;
    height: 20px;
    background-image: url('https://www.agilent.com/cs/promotions/images/workflow_down_arrow.png');
    background-position: center;
    background-repeat: no-repeat;
	 cursor: pointer;
}

.workflowIconChange{
	 background-image: url('https://www.agilent.com/cs/promotions/images/workflow_up_arrow.png') !important;
}

.workflowItem{
	margin-bottom:10px;
	cursor:pointer;
}

.workflowItem:last-child{
	margin-bottom:0;
}

.instrumentlab{
	//display:none;
	position: relative;
	left:0;
}

.instrumentHotspot{
	position: absolute;
    text-align: center;
}

.workflowName{
	cursor:pointer;
}

.hotspotInfo{
	text-align: left;
}

.instrumentHotspot1 .workflowName .hotspotInfo{
	text-align: center;
}

.hotspotInfo p{
	font-size: 8px;
	line-height:12px;
	margin:0;
}

.hotspotInfo ul{
	font-size: 8px;
	line-height:10px;
    margin-left: 0px;
	padding-left:20px;
    text-align: left;
	list-style-type: none;
    padding-left: 15px;
	margin-bottom: 0;
}

.hotspotInfo ul li:before {
    content: '\2013';
    position: absolute;
    margin-left: -12px;
}

.instrumentHotspot .line{
	position: absolute;
    left: 50%;
    width: 1px;
    background-color: #4183C4;
    height: 70px;
	margin: 0 auto;
}

.instrumentHotspot .line:after { 
	position:absolute; 
	bottom:-10px; 
	left:0; 
	height:10px; 
	width:10px; 
	transition: background 0.25s ease;
	background-color: #00426A;
    border: 1px solid #ffffff;
	content:"";
	border-radius:5px;
	right:0;
	left:-5.3px;
}

#instrumentHotspot10{
	left:5.5%;
	top: 18%;
	display: none;
}

#instrumentHotspot11{
	left:13.5%;
	top: 7%;
}

#instrumentHotspot11 .line{
	height:102px;
}

#instrumentHotspot12{
	left:25%;
	top: 18%;
}

#instrumentHotspot12 .line{
	height:50px;
}

#instrumentHotspot13{
    left: 40%;
	top: 7%;
}

#instrumentHotspot14{
	left:68.3%;
	top: 4%;
}

#instrumentHotspot15{
	left:84.5%;
	top: 14%;
}

#instrumentHotspot15 .line{
	height:23px;
	left:63%;
}

/**************** Library prep hotspots ************/


#instrumentHotspot20{
	left:9.8%;
	top:24%;
}

#instrumentHotspot21{
    left: 45.5%;
    top: 18%;
}

#instrumentHotspot22{
    left: 62%;
    top: 1%;
}

#instrumentHotspot22 .line{
	height:50px;
}

#instrumentHotspot23{
	left:82.5%;
	top:1%;
}

#instrumentHotspot23 .line{
	height:45px;
}

.instrumentHotspotWorkflow22 .line{
	height:38px !important;
} 

.instrumentHotspotWorkflow23 .line{
	height:34px !important;
} 

/**************** data analysis hotspots ************/

#instrumentHotspot30{
	left:24.5%;
	top:14%;
}

#instrumentHotspot31{
	left:57.5%;
	top:14%;
}


/******************** Instrument overlay ****************************/
.instrumentOverlay,.infoOverlay,.videoOverlay{
	text-align: center;
	position: absolute; 
	display: none; 
	width: 100%; 
	height: 100%; 
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); 
	z-index: 12;
	animation-name: fadeInDown;
}

.videoPopupContainer{
	background-color: #fff;
    width: 55%;
    margin: 0 auto;
    margin-top: 5%;
    padding: 20px;
}

.videoPopup{
	//display:none;
}

.videoHeading{
	float:left;
	font-size:20px;
	line-height:24px;
	font-weight:lighter;
	color:#1A1818;
}

.videoHeading br{
	display:none;
}

.videoClose{
	width: 20px;
    height: 20px;
    float: right;
    margin-right: 0;
    background-image: url('https://www.agilent.com/cs/promotions/images/close_button.png');
    background-repeat: no-repeat;
    background-size: contain;
	cursor:pointer;
}

.videoHeaderContainer{
	display: inline-block;
    width: 100%;
    margin-bottom: 15px;
}

.videoPopup video{
	max-width:100%;
}

.goToContainer{
	width:100%;
	text-align:left;
	margin-top:10px;
}

.go-to-txt{
	margin-bottom:10px;
	font-size:15px;
	line-height:20px;
	font-weight:lighter;
	color:#1A1818;
}

.cta-go{
    display: inline-block;
    background-color: #0085d5;
}

.cta-go:hover,.cta-contact:hover{
	background-color:#00426A;
}

.cta-contact{
	right: 30px;
    bottom: 30px;
    position: absolute;
}

.cta-contact a:link,
.cta-contact a:visited,
.cta-contact a:active,.cta-go a:link,
.cta-go a:visited,
.cta-go a:active {
	font-family: "Roboto", Arial, sans-serif, Helvetica;
	font-weight: 400 !important;
	line-height: 100% !important;
	color: #ffffff !important;
	background-color: #0085d5;
	align-self: flex-end !important;
	padding: 12px 15px;
	display: block;
	text-transform: none !important;
	text-decoration: none !important;
}

.cta-contact a:hover,.cta-go a:hover {
	background-color: #00426a !important;
	text-decoration: none !important;
}

@keyframes fadeInDown {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
} 

.infoOverlay{
	z-index: 1; 
}

.popUpDataContainer{
	background-color: #ffffff; 
	display:inline-block;
	position: relative;
    top: 50%;
    transform: translateY(-50%);
	width: 90%; 
	margin:0 auto;
}

.instrumentInfo{
	width:28%;
	float:left;
	background-color:#0085D5;
	text-align:left;
	color:#ffffff;
}

.instrumentInfoContainer{
    width: 80%;
    float: left;
    padding: 5%;
}

.instrumentInfoContainer .infoContainer{
	height: 200px;
	overflow: hidden;
    overflow-y: auto;
	padding: 7px;
}

.teaser830{
	height: 360px;
    overflow: hidden;
    overflow-y: auto;
	position: relative;
}

.instrumentInfo .instrumentInfoContainer .imgContainer{
	text-align: center;
	margin:15px;
}

.instrumentInfo .instrumentInfoContainer .imgContainer img{
	max-width:100%;
}

.instrumentInfo .instrumentInfoContainer .imgContainer .labelimg {
	max-width:45%;
}


.band{
	float:right;
	width:10px;
	min-height:540px;
}

.lightblueband{
	background-color:#00A8DF;
}

.darkblueband{
	background-color:#0B436A;
}

.instrumentTabInfo{
	text-align: left;
    width: 68%;
    padding: 2%;
    float: left;
}


.headingContainer,.mainTabContainer {
    display: flex;
    align-items: center;
    text-align: left;
	margin-bottom:3%;
}

.mainTabContainer{
	margin-bottom:0;
}

.mainTabs{
	width: 100%;
	display: flex;
    align-items: center;
}

.instrumentHeading{
	float:left;
	width:98%;
	font-size:20px;
	line-height:24px;
	color:#2282C5;
}

.closePopupBtn {
    width: 25px;
    height: 25px;
    float: right;
    margin-right: 0;
    background-image: url('https://www.agilent.com/cs/promotions/images/close_button.png');
    background-repeat: no-repeat;
    background-size: contain;
	cursor:pointer;
}

.mainTabCaption{
	position: relative;
    width: 33%;
	margin-right:1%;
    float: left;
    padding: 0.8em 0.5em;
	color:#0B436A;
	cursor:pointer;
}

.mainTabCaption:last-child{
	margin-right:0;
}

.mainTabCaptionselected{
	color: #0085D5;
	font-size:15px;
	line-height:20px;
}


#popUpData{
	color: #53575A;
    font-size: 13px;
    line-height: 17px;
}

#popUpData .tabList {
    display: inline-block;
    width: 100%;
    text-align: center;
	border-bottom: 1px solid #0085D5;
}

#popUpData .tabList .tabCaption {
    position: relative;
    width: 17%;
	margin-right:1%;
    float: left;
    padding: 1.5% 0.8%;
    color: #2282C5;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
	background-color:#E5E5E5;
    cursor: pointer;
    border: none;
    outline: none;
}

#popUpData .tabList .tabCaption:nth-child(2){
	 width: 20%;
}

#popUpData .tabList .tabCaption:last-child{
	margin-right:0;
}

#popUpData .tabList .tabCaptionselected {
    background-color: #0085D5;
	color:#ffffff;
}

.dataContainer{
	width:100%;
	margin-top:20px;
}

.dataContainer ul{
	 list-style-type: none;
	padding-left: 20px;
}

.dataContainer ul li{
	margin-bottom:5px;
}

.dataContainer ul li:before {
  content: '\2013';
  float:left;
  margin-left: -20px;
}

.reagentsContent{
	display: flex;
    align-items: center;
	margin-bottom:20px;
}

.reagentsContent:last-child{
	margin-bottom:0;
}

.dataContainer .imgContainer{
	float: left;
    margin-right: 2%;
}

.dataContainer .imgContainer img{
    max-width: 100%;
}

.dataContainer .txtContainer{
	width: 68%;
	float: left;	
}

.dataContainer  a:link,
.dataContainer  a:visited,
.dataContainer  a:active {
	color:#0070BA;
	text-decoration:none;
}

.dataContainer  ul{
	color:#424648;
}

.dataContainer  ul li{
	margin-bottom:10px;
}

.dataContainer ul li p{
	margin-top:0;
}

.dataContainer a:hover {
	color: #00426a !important;
	text-decoration: underline !important;
}

.txtContent{
	margin-bottom:10px;
}

.dataContainer p,.txtContent p{
	margin:0;
	margin-top:5px !important;
	margin-bottom:3px !important;
}

.headingBold{
	font-weight:600;
}

#warning-message{
	display:none;
}

.disclaimerTxt{
	font-size: 10px;
	line-height:12px;
	position: absolute;
    bottom: 0;
}

/******************** Media query start ****************************/

@media screen and (max-width:640px) and (orientation:portrait){
	body{
		margin:0;
	}
	
	#ngsInteractive{
		width:100%;
		height: 100vh;
		padding:0;
	}
	
    #productDiv { 
       display:none !important; 
    }
	
    #warning-message { 
		width:100%;
		height:100%;
		color:#ffffff;
        font-size: 20px;
		line-height: 30px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color:#0085D5;
    }
	
	.rotateImg{
		margin-bottom:20px;
	}
	
	.rotatetxt{
		text-align:center;
		padding: 10px;
	}
}

*{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

:after, :before {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

@media (max-width: 1400px) and (orientation: landscape) {
	.workflowArrow{
		width: 100%;
		text-align: right;
	}

	.workflowArrow img{
		width: 5%;
		margin-right: 10%;
	}
}

@media (max-width: 1024px) and (orientation: landscape) {
	#ngsInteractive{
		width:100%;
		padding: 0;
	}
	
	.workflowName {
		font-size:10px;
	}
	
	.infoContainerDiv{
		height:220px !important;
	}
	
	#instrumentHotspot10{
		left: 5.1%;
		top:14%;
	}
	
	#instrumentHotspot11{
		left: 13.1%;
		top:2%;
	}
	
	#instrumentHotspot12 {
		left: 24.5%;
		top: 15%;
	}
	
	#instrumentHotspot13{
		top:3%;
	}
	
	#instrumentHotspot14 {
		left: 67.5%;
		top: 2%;
	}
	
	#instrumentHotspot14 .line{
		height: 62px;
	}

	#instrumentHotspot15 {
		left: 84%;
		top: 11%;
	}
	
	.instrumentInfoContainer .infoContainer {
		height: 180px;
	}
	
	.band {
		min-height: 430px;
	}
	
	.teaser830 {
		height: 290px;
	}
}


@media (max-width: 920px) and (orientation: landscape) {
	html {
		-webkit-text-size-adjust: 100%;
		-moz-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	
	#ngsInteractive {
		width: 100%;
		padding: 0;
	}
	
	#productDiv{
		font-size:12px;
	}
	
	#productDiv .ngsHeadline{
		font-size: 20px;
		line-height: 24px;
	}
	
	#ngsWorkflowHeadline{
		font-size: 14px !important;
		line-height: 17px !important;
	}
	
	#personaPanel{
		width: 94%;
		padding: 1% 1% 1% 5%;
	}
	
	.title{
		font-size: 18px;
		line-height: 20px;
		width: 14%;
		margin-right: 1%;
	}
	
	.personaBtnPanel{
		 width: 85%;
	}
	
	.personaBtnPanel .personaBtn{
		font-size: 13px;
		line-height: 17px;
	}
	
	.animaImg img {
		max-width: 82%;
	}
	
	.workflowBandContainer {
		padding: 2%;
	}
	
	.bandTxt{
		font-size:10px;
		line-height: 12px;
	}
	
	.verticalArrow {
		height: 60px;
	}
	
	.verticaltxt {
		padding: 5px 0;
		font-size: 10px;
	}
	
	.hotspotBtn {
		width: 25px;
		height: 25px;
	}
	
	.pulseButton {
		top: -4px;
		left: -4px;
		width: 30px;
		height: 30px;
	}

	#labHotspot1 {
		top: 42%;
		left: 50%;
	}
	
	#labHotspot2{
		top:2%;
		left: 48%;
	}
	
	#labHotspot3 {
		top: 18%;
		left: 71%;
	}
	
	.infoContainerDiv{
		height: 230px;
		overflow-y: auto;
	}
	
	.instrumentHeading {
		font-size: 18px;
		line-height: 20px;
	}
	
	.instrumentInfoContainer {
		width: 72%;
	}
	
	.mainTabCaption{
		font-size:12px;
		padding: 0.6em 0.5em;
	}
	
	.mainTabCaption:first-child{
		width:34%;
	}
	
	#popUpData{
		font-size:12px;
	}
	
	#popUpData .tabList .tabCaption{
		width:15%;
		padding:0.4em;
		font-size: 11px;
	}
	
	#popUpData .tabList .tabCaption:nth-child(2) {
		width: 23%;
	}
	
	.instrumentInfoContainer .infoContainer{
		font-size:13px;
		height: 130px;
	}
	
	.band{
		min-height: 326px;
	}
	
	.teaser830 {
		height: 220px;
	}
	
	.navigationPanel{
		font-size: 12px;
		line-height: 16px;
	}
	
	.navigationBtn:first-child::before ,.navigationBtn:last-child::after{
		top: 12px;
	}
	
	.workflowName {
		font-size: 9px;
	}
	
	#instrumentHotspot10 {
		left: 1.5%;
		top: 24%;
	}
	
	#instrumentHotspot10 .line{
		height: 18px;
		left: 63%;
	}
	
	#instrumentHotspot11 {
		left:6.5%;
		top: 2%;
	}
	
	#instrumentHotspot11 .line {
		height: 60px;
		left: 75%;
	}
	
	#instrumentHotspot12 {
		left: 23%;
		top: 15%;
	}
	
	#instrumentHotspot12 .line {
		height: 28px;
	}
	
	#instrumentHotspot13 {
		top: 2%;
		left: 36.5%;
	}
	
	#instrumentHotspot13 .line {
		height: 48px;
	}
	
	#instrumentHotspot14 {
		top: 2%;
		left: 65.5%;
	}
	
	#instrumentHotspot14 .line {
		height: 22px;
		left: 70%;
	}
	
	#instrumentHotspot15 {
		top: 2%;
	}
	
	#instrumentHotspot15 .line {
		height: 22px;
	}
	
	.hotspotInfo ul,.hotspotInfo p{
		display:none;
	}
}

@media (max-width: 820px) and (orientation: landscape) {
	#instrumentHotspot10 {
		left: 2%;
		top: 22%;
	}

	#instrumentHotspot11{
		top:4%;
		left: 6.5%;
	}

	#instrumentHotspot12{
		top:15%;
	}
	
	#instrumentHotspot13{
		top:4%;
		left: 38.5%;
	}
	
	#instrumentHotspot13{
		top:4%;
	}

	#instrumentHotspot14{
		top:8%;
		left: 59.5%;
	}
	
	#instrumentHotspot14 .line {
		left: 81%;
	}

	#instrumentHotspot15 {
		top: 8%;
		left: 82%;
	}
	
	#instrumentHotspot20 {
		left: 7.8%;
		top: 8%;
	}
	
	#instrumentHotspot21 {
		left: 43.5%;
		top: 4%;
	}
	
	#instrumentHotspot30{
		left: 23.5%;
	}
	
	#instrumentHotspot31 {
		left: 55.5%;
	}
}

@media (max-width: 768px) and (orientation: landscape) {
	#ngsWorkflowHeadline,.personaHeading{
		font-size: 14px !important;
		line-height: 17px !important;
	}
	
	#ngsWorkflowHeadline .moreDeatils,.personaDescription{
		font-size: 10px;
		line-height: 15px;
	}
	
	.videoPopupContainer{
		width:42%;
	}
	
	.videoHeading,.go-to-txt{
		font-size: 15px;
		line-height: 20px;
	}
	
	.cta-go{
		padding: 5px;
	}
	
	.workflowName{
		padding: 5px 5px;
	}
	#instrumentHotspot10 {
		left: 1%;
		top: 22%;
	}
	
	#instrumentHotspot11{
		top:4%;
		left: 5.5%;
	}
	
	#instrumentHotspot11 .line {
		left: 80%;
	}
	
	#instrumentHotspot12{
		top:15%;
	}
	
	#instrumentHotspot13{
		top:2%;
		left: 38.5%;
	}
	
	#instrumentHotspot15{
		top:4%;
	}

	#instrumentHotspot14{
		top:8%;
		left: 59.5%;
	}
	
	#instrumentHotspot14 .line {
		left: 80%;
	}

	#instrumentHotspot15 {
    left: 82%;
	}
	
	
}


@media (max-width: 680px) and (orientation: landscape) {
	.workflowIcon{
		width: 15px;
		height: 15px;
	}
	#ngsWorkflowHeadline, .personaHeading {
		font-size: 12px !important;
		line-height: 17px !important;
	}

	.animaImg img {
		max-width: 86%;
	}
	
	.instrumentInfoContainer .infoContainer {
		height: 150px;
	}
	
	.instrumentInfoContainer {
		width: 78%;
		padding: 2%;
	}
	
	.band {
		min-height: 305px;
	}
	
	.teaser830 {
		height: 190px;
	}
	
	.instrumentHeading {
		font-size: 16px;
		line-height: 20px;
	}
	
	.mainTabCaption {
		font-size: 11px;
	}
	
	#popUpData {
		color: #53575A;
		font-size: 12px;
	}
	
	#popUpData .tabList .tabCaption{
		width:13%;
		font-size: 11px;
	}
	
	#popUpData .tabList .tabCaption:nth-child(1) {
		width: 20%;
	}
	
	#popUpData .tabList .tabCaption:nth-child(2) {
		width: 25%;
	}
	
	#instrumentHotspot10 {
		left: 2.5%;
		top: 17%;
	}
	
	#instrumentHotspot10 .line{
		height: 25px;
		left: 53%;
	}
	
	#instrumentHotspot11 {
		left: 3.5%;
		top: 2%;
	}
	
	#instrumentHotspot11 .line {
		height: 52px;
		left: 79%;
	}

	#instrumentHotspot12 {
		left: 22%;
		top: 15%;
	}
	
	#instrumentHotspot12 .line {
		height: 20px;
	}
	
	#instrumentHotspot13 {
		top: 2%;
		left: 37%;
	}
	
	#instrumentHotspot13 .line {
		height: 32px;
	}
	
	#instrumentHotspot14 {
		top: 7%;
		left: 59.5%;
	}
	
	#instrumentHotspot14 .line {
		height: 15px;
		left: 70%;
	}

	#instrumentHotspot15 {
		top: 2%;
		left: 79%;
	}

	#instrumentHotspot15 .line {
		height: 25px;
		left: 74%;
	}

	.hotspotInfo{
		text-align:center;
	}
}


@media (max-width: 640px) and (orientation: landscape) {
	.instrumentInfoContainer .infoContainer {
		height: 110px;
	}
	
	.band {
		min-height: 250px;
	}
	
	.teaser830 {
		height: 150px;
	}
	
	#popUpData .tabList .tabCaption {
		font-size: 9px;
	}
}