@charset "UTF-8";
/* CSS Document */

#campaign-page .headerBanner h1 {
	font-family: 'Roboto', Arial, sans-serif, Helvetica !important;
	font-size: 32px !important;
	line-height: 40px !important;
	margin: auto 24px auto 48px;
	color: #ffffff !important;
	width: 100%;
	display: block;
	vertical-align: middle;
}
#campaign-page .headerBanner span {
	font-size: 18px;
	margin-top: 12px;
	display: block;
}
#campaign-page .header-img {
	animation: headerimg 2500ms normal forwards;
}
#campaign-page .left-band,
#campaign-page .mid-band,
#campaign-page .mid-band2,
#campaign-page .right-band {
	height: 200px;
	top: 0;
	right: 0;
	display: block;	
	position: absolute;
	z-index: 1;
}
#campaign-page .left-band {
	animation: leftmove 2500ms ease 0ms forwards;
}
#campaign-page .mid-band {
	animation: midmove 2000ms ease 1000ms forwards;
}
#campaign-page .mid-band2 {
	animation: midmove2 1150ms ease 1000ms forwards;
}
#campaign-page .right-band {
	animation: rightmove 1000ms ease 2000ms forwards;
}

@keyframes headerimg {
	from {clip-path:inset(0% 0% 0% 100%)}
	to {clip-path:inset(0% 0% 0% 0%)}
}
@keyframes leftmove {
	from {width:1000px; background: rgba(0,66,106,1); right:-1000px;}
	to {width:24px; background: rgba(0,66,106,1); right:446px;}
}
@keyframes midmove {
	from {width:180px; background: rgba(132,189,0,0,6); right:-180px;}
	to {width:24px; background: rgba(132,189,0,1); right:422px;}
}
@keyframes midmove2 {
	from {width:800px; background: rgba(132,189,0,1); right:-800px;}
	to {width:48px; background: rgba(132,189,0,0.75); right:398px;}
}
@keyframes rightmove {
	from {width:0px; background: rgba(214,0,28,0.5);}
	to {width: 24px; background: rgba(214,0,28,0.85);}
}


/* Slider: Discovery Translation Production */

/* Tabs */
#campaign-page .customtabs {
	flex-wrap: row nowrap;
	background-color: #ffffff;
	color: #53565a!important;
	font-size: 14px !important;
	line-height: 20px !important;
	padding: 25px 30px !important;
	margin-bottom: 10px !important;
	position: relative;
}
#campaign-page .customtabs a,
#campaign-page .customtabs a:visited{
	color: rgba(0,133,213,1.00);
	text-decoration: none;
}
#campaign-page .customtabs a:hover {
	color: #00426a;
	text-decoration: none !important;
}
#campaign-page .customtab-btn, #campaign-page .customtab-btn-tool  {
	color: rgba(0,133,213,1.00);
	text-decoration: none;
	display: inline-block;
	padding: 0px 0px 10px 0px;
	font-weight: 300;	
	margin-bottom: 30px;
	cursor: pointer;
}
#campaign-page .customtab-btn {
	font-size: 19px; 
	line-height: 26px; 	
	margin-right: 80px;
}
#campaign-page .customtab-btn-selected, #campaign-page .customtab-btn-selected-tool {
	color: rgba(0,0,0,1.00) !important;
	border-bottom: rgba(214,0,28,1.00) solid 2px;
}
#campaign-page .customtab-btn-tool {
	width: 120px;
	margin-right: 72px;
	font-size: 16px;
	line-height: 23px;
}
#campaign-page .customtab-btn-tool span {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400 !important;
	margin: 5px 0px;
	display: block;
}
#campaign-page .customtab-btn-tool img {margin: 0px 0px 10px 0px}
#campaign-page .customtab-btn-selected-tool span {
	color: rgba(136,139,141,1.00);
}
#campaign-page .discovery-tab::after,
#campaign-page .translation-tab::after {
	content: "";
	display: block;
	width: 16px;
	height: 27px;
	position: absolute;
	top: 26px;
	background:url("/cs/promotions/images/20190820-immunotheraphy-angle-right-agilent.svg") no-repeat;
	z-index: 1;
}
#campaign-page .discovery-tab::after {left: 143px;}
#campaign-page .translation-tab::after {left: 318px;}

		
/* Slider */
#campaign-page .customslider {
	width: 790px;
	display: flex;
	overflow-x: hidden;
/*	overflow-x: auto; */
}
#campaign-page .customslide {
	width: 790px;
	flex-shrink: 0;
	height: 100%;	
	position: relative;
	overflow-x: hidden;
}
#campaign-page .customslides {
	display: flex;
	overflow-x: hidden;
	/* overflow-x: auto; */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}
#campaign-page .customslides > div {scroll-snap-align: start;} 
#campaign-page .customslide span {
	font-weight: 500; 
	display: block; 
	margin-bottom: 1px; 
	color: rgba(0,0,0,1);
	font-size: 13px;
	line-height: 19px;
}

/* List */

#campaign-page .discoveryslide ul, #campaign-page .translationslide ul, #campaign-page .productionslide ul {padding: 0 0 0 15px;}
#campaign-page .discoveryslide li, #campaign-page .translationslide li, #campaign-page .productionslide li {margin: 0 0 15px 0;}
#campaign-page .discoveryslide ul {width: 345px;}
#campaign-page .translationslide ul {width: 345px;}
#campaign-page .productionslide ul {width: 295px;}

#campaign-page .discoveryslide div, #campaign-page .translationslide div, #campaign-page .productionslide div {float:left}
#campaign-page .discoveryslide p {width: 370px}
#campaign-page .translationslide p {width: 370px}
#campaign-page .productionslide p {width: 320px}


/*  #discover, #translation, #production {content: ""; padding-top: 150px; margin-top: -150px;}
#xcelligence, #seahorsexf, #novocyte, #sureguide {content: ""; padding-top: 300px; margin-top: -300px;} */

#campaign-page .toolslide {float:left;}
#campaign-page .toolslide-subhead {display: block; font-weight: 700; margin-bottom: 2px}
#campaign-page .toolslide-img {align-self: center; margin: 0 auto 15px}
#campaign-page .toolslide-teaser-xcell, 
#campaign-page .toolslide-teaser-seahorse, 
#campaign-page .toolslide-teaser-novo, 
#campaign-page .toolslide-teaser-sureguide {
	padding: 15px; 
	background-color: rgba(0,66,106,0.05);
	color: rgba(136,139,141,1);
	font-size: 11px;
	line-height: 16px;
	font-weight: 400;
}
#campaign-page .toolslide-teaser-xcell-title, 
#campaign-page .toolslide-teaser-seahorse-title, 
#campaign-page .toolslide-teaser-novo-title, 
#campaign-page .toolslide-teaser-sureguide-title {
	color: rgba(0,0,0,1) !important;
	font-size: 14px !important;
	line-height: 20px !important;
	font-weight: 300 !important;
	display: block;
	margin-bottom: 15px;
}
#campaign-page .toolslide-teaser-alt {background-color: rgba(0,66,106,0.1);}
#campaign-page .toolslide-teaser-head {
	padding: 8px 15px 5px;
	color: #ffffff;
	background-color: rgba(0,66,106,1);
	font-size: 11px;
	line-height: 15px;
	font-weight: 400;
	margin-top: 20px;
}

#campaign-page .xcell-left, #campaign-page .xcell-left p {width: 440px;}
#campaign-page .xcell-right, #campaign-page .xcell-right p {width: 310px}
/* #campaign-page .toolslide-teaser-xcell, 
#campaign-page .toolslide-teaser-xcell-head, 
#campaign-page .toolslide-teaser-xcell-title p {width: 280px !important;} */
#campaign-page .toolslide-teaser-xcell p {width: 210px;}

#campaign-page .seahorse-left, #campaign-page .seahorse-left p {width: 440px;}
#campaign-page .seahorse-right, #campaign-page .seahorse-right p {width: 310px}
/* #campaign-page .toolslide-teaser-seahorse, 
#campaign-page .toolslide-teaser-seahorse-head, 
#campaign-page .toolslide-teaser-seahorse-title p {width: 280px !important;} */
#campaign-page .toolslide-teaser-seahorse p {width: 210px}

#campaign-page .novo-left, #campaign-page .novo-left p {width: 500px;}
#campaign-page .novo-right {width: 250px}
/* #campaign-page .toolslide-teaser-novo, 
#campaign-page .toolslide-teaser-novo-head,
#campaign-page .toolslide-teaser-novo-title p {width: 220px !important;} */
#campaign-page .toolslide-teaser-novo p {width: 150px;}

#campaign-page .sureguide-left, #campaign-page .sureguide-left p {width: 500px;}
#campaign-page .sureguide-right {width: 250px}
/* #campaign-page .toolslide-teaser-sureguide, 
#campaign-page .toolslide-teaser-sureguide-head,
#campaign-page .toolslide-teaser-sureguide-title p {width: 220px !important;} */
#campaign-page .toolslide-teaser-sureguide p {width: 150px;}

/* Modal */
#panelimg {
	cursor: pointer;
	transition: 0.3s;
}
#panelimg:hover {opacity: 0.7;}
.panelmodalme {
	display: none; 
  	position: fixed; 
  	z-index: 1; 
  	padding-top: 150px; 
  	left: 0;
  	top: 0;
  	width: 100%; 
  	height: 100%;
  	overflow: auto; 
  	background-color: rgb(0,0,0);
  	background-color: rgba(0,0,0,0.85); 
}
.panelmodal-content {
  	margin: auto;
  	display: block;
  	width: 80%;
  	max-width: 860px;
	cursor: pointer;
}
#panelcaption {
  	margin: auto;
  	display: block;
  	width: 80%;
  	max-width: 860px;
  	text-align: left;
  	color: #d0d0ce;
  	padding: 15px 0;
  	height: 300px;
	font-size: 15px;
	line-height: 22px;
}
.panelmodal-content, #panelcaption {  
  	-webkit-animation-name: zoom;
  	-webkit-animation-duration: 0.6s;
  	animation-name: zoom;
  	animation-duration: 0.6s;
}
@keyframes zoom {
  	from {transform:scale(0)} 
  	to {transform:scale(1)}
}
.closepanel {
  	position: absolute;
  	top: 150px;
  	right: 50px;
  	color: #0085d5 !important;
  	font-size: 42px !important;
  	font-weight: 500 !important;
  	transition: 0.3s;
}

.closepanel:hover,
.closepanel:focus {
  	color: #0085d5 !important;
	opacity: 0.6;
  	text-decoration: none;
 	cursor: pointer;
}