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

#campaign-page .headerBanner h1 {
	font-family: 'Roboto', Arial, sans-serif, Helvetica !important;
	font-size: 32px;
	line-height: 44px;
	margin: auto 24px auto 48px;
	padding: 24px 0px;
	color: #000000 !important;
	width: 100%;
	display: block;
	vertical-align: middle;
}
#campaign-page .headerBanner h1 span {
	font-size: 20px;
	line-height: 44px;
}
#campaign-page .headerBanner span {
	font-size: 18px;
	margin-top: 12px;
	display: block;
}
#campaign-page .header-img {
	animation: headerimg 2500ms normal forwards;
}
#campaign-page .header-img-crop {
	width: 470px !important;
	object-fit:cover;
	overflow: hidden;
}
#campaign-page .left-band,
#campaign-page .mid-band,
#campaign-page .mid-band2,
#campaign-page .right-band {
	height: 600px;
	top: 0;
	right: 0;
	display: block;	
	position: absolute;
	z-index: 1;
}
#campaign-page .left-band {
	animation: leftmove 1200ms ease 500ms forwards;
}
#campaign-page .mid-band {
	animation: midmove 1000ms ease 500ms forwards;
}
#campaign-page .mid-band2 {
	animation: midmove2 1200ms ease 1000ms forwards;
}
#campaign-page .right-band {
	animation: rightmove 1000ms ease 0ms forwards;
}

@keyframes headerimg {
	from {clip-path:inset(0% 0% 0% 100%)}
	to {clip-path:inset(0% 0% 0% 0%)}
}
@keyframes leftmove {
	from {width:20px; background: rgba(242,169,0,0.1); right:-50px;}
	to {width:48px; background: rgba(242,169,0,0.6); right:48px;}
}
@keyframes midmove {
	from {width:10px; background: rgba(242,169,0,1); right:-30px;}
	to {width:24px; background: rgba(242,169,0,1); right:24px;}
}
@keyframes midmove2 {
	from {width:800px; background: rgba(0,66,106,0.8); right:-800px;}
	to {width:48px; background: rgba(0,66,106,0.6); right:398px;}
}
@keyframes rightmove {
	from {width:0px; background: rgba(0,66,106,0.1);}
	to {width: 24px; background: rgba(0,66,106,1);}
}

/* Seahorse SubOx Diagram Callout */
#campaign-page .product-callout {
	background-image: url("https://www.agilent.com/cs/promotions/images/seahorse-subox-diagram-cn.svg"); 
	background-size: 700px 534px;
	background-position: 120px 70px;
	background-repeat: no-repeat;
	width: auto;
	height: 650px;
	
}
#campaign-page .product-callout a,
#campaign-page .product-callout a:visited {
	color: rgba(0,133,213,1) !important;
	text-decoration: underline;
	display: block;
	border-right: solid 1px;
	border-color: rgba(0,169,224,0);
	padding: 0px 15px 0px 0px;
	font-size: 19px !important;
	line-height: 22px !important;
	font-weight: 400 !important;
	opacity: .7;
	transition: opacity .3s ease;
	position:absolute; 
	
}
#campaign-page .product-callout a:hover {
	color: rgba(0,66,106,1) !important;
	text-decoration: none !important;
	opacity: 1;
}
#campaign-page .subhead-bottomline {
	font-weight: 500;
	font-size: 13px !important; 
	line-height: 18px !important;
	border-bottom: solid 1px;
	border-color:#d6001c;
	padding: 0px 0px 10px 0px;
	margin-top: 3px;
	display: block;
}
#cancer-div div {	
	width: 400px;
	left: 260px;
	margin-top: 30px;	
}

.cancer-a {	
	margin-left:370px;
	margin-top: -5px
}

#immunology-div div {	
	width: 440px;
	left: 275px;
	margin-top: 0px;	
}
.immunology-a {	
	margin-left:140px;
	margin-top:70px
}
#drug-div div {	
	width: 440px;
	left: 170px;
	margin-top: 13px;	
}
.drug-a {	
	margin-left:620px;
	margin-top:70px
}
#others-div div {	
	width: 340px;
	left: 282px;
	margin-top: 160px;
}
.others-a2 {	
	margin-left:110px;
	margin-top:255px
}
.others-a1 {	
	margin-left:615px;
	margin-top:255px
}
.others-a3 {	
	margin-left:210px;
	margin-top:415px
}
.others-a4 {	
	margin-left:520px;
	margin-top:415px
}
#cancer-div div,
#immunology-div div,
#others-div div,
#drug-div div {
	display: none;
	background-color: rgba(255,255,255,.95);
	padding: 18px 25px 25px 25px;
	color: #53565a;
	position: absolute;
	z-index: 100;
}
#cancer-div:hover div,
#immunology-div:hover div,
#others-div:hover div,
#drug-div:hover div {
	display: block;	
}



/* teaser content */
#campaign-page div.few-left {width: 300px;}
#campaign-page div.few-right {width: 410px}
#campaign-page div.great-one {width: 560px; text-align: left}
#campaign-page div.great-left {width: 365px;}
#campaign-page div.great-right {width: 365px}
#campaign-page div.more-left {width: 260px;}
#campaign-page div.more-right {width: 470px}

#campaign-page .more-left, #campaign-page .more-right {
	
}

#campaign-page ul {padding: 0 0 0 15px;}
#campaign-page li {margin: 0 0 5px 0;}
#campaign-page .tab-img {align-self: center; margin: 0 auto}



/*** Base ***/

#campaign-page {
	font-family: 'Roboto', Arial, sans-serif, Helvetica !important;
	font-size: 16px;
	line-height: 26px;
	color: #53565a;
	text-transform: none;
	text-decoration: none;
	width: 940px !important;
	background-color: #f1f1f0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#campaign-page .headerBanner {
	margin: 0 !important;
	padding: 0 !important;
	height: auto !important;
	position: relative;
	overflow: hidden !important;
	background-color: #ffffff;
	align-items: center;
}
#campaign-page * img {display: block !important; border:0 !important; outline:none !important; text-decoration:none !important; -ms-interpolation-mode:bicubic !important;}
#campaign-page .headline,
#campaign-page .sub-headline,
#campaign-page .teaserbox span,
#campaign-page .teaserboxwide span {
	display: block;
	overflow: auto;
	word-wrap: break-word;
}
#campaign-page .headline {
	margin: 0 0 15px 0;
	font-size: 24px !important;
	line-height: 36px !important;
}
#campaign-page .sub-headline {
	margin: 30px 0 15px;
	font-size: 17px !important;
	line-height: 24px !important;
}
#campaign-page .flex-container,
#campaign-page .cta-button,
#campaign-page .teaserbox,
#campaign-page .teaserboxwide,
#campaign-page .teaserboxfull,
#campaign-page .headerBanner {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
}
#campaign-page .flex-container {
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	flex-wrap: wrap;
	align-items: stretch;
}
#campaign-page .flex-items {flex: 1 1 auto}
#campaign-page .flex-column1 {
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-ms-flex: 1;
	-webkit-flex: 1;
	flex-grow: 1;
}
#campaign-page .flex-column2 {
	-webkit-box-flex: 2;
	-moz-box-flex: 2;
	-ms-flex: 2;
	-webkit-flex: 2;
	flex-grow: 2;
}
#campaign-page .flex-column3 {
	-webkit-box-flex: 3;
	-moz-box-flex: 3;
	-ms-flex: 3;
	-webkit-flex: 3;
	flex-grow: 3;
}
#campaign-page .flex-column4 {
	-webkit-box-flex: 4;
	-moz-box-flex: 4;
	-ms-flex: 4;
	-webkit-flex: 4;
	flex-grow: 4;
}
#campaign-page .flex-column5 {
	-webkit-box-flex: 5;
	-moz-box-flex: 5;
	-ms-flex: 5;
	-webkit-flex: 5;
	flex-grow: 5;
}
#campaign-page .flex-column1,
#campaign-page .flex-column2,
#campaign-page .flex-column3,
#campaign-page .flex-column4,
#campaign-page .flex-column5, 
#campaign-page .teaserbox,
#campaign-page .teaserboxwide,
#campaign-page .customtabs { 
	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
  	-webkit-flex-direction: column;
  	-moz-box-orient: vertical;
  	-moz-box-direction: normal;
  	-ms-flex-direction: column;
  	flex-direction: column;
	flex-wrap: wrap !important;
	align-items: stretch;
	justify-content: space-between;
}

#campaign-page .teaserwide::before {
	display: block;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to right, #0085d5 52%, #00a9e0 52%, #00a9e0 76%, #00426a 76%, #00426a 84%, #0085d5 84%);
	z-index: 1;
}

/* Teaser Box */
#campaign-page .teaserbox p, .teaserbox span {width: 200px !important;}
#campaign-page .teaserboxwide p, .teaserboxwide span {width: 340px !important;}
#campaign-page .teaserboxfull p, .teaserboxfull span {width: 850px !important;}
#campaign-page .teaserboxfull {flex-wrap: row nowrap !important;} 
#campaign-page .teaserbox::before,
#campaign-page .teaserboxwide::before,
#campaign-page .teaserboxfull::before,
#campaign-page .customtabs::before {
	content: "";
	display: block;
	height: 4px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to right, #0085d5 52%, #00a9e0 52%, #00a9e0 76%, #00426a 76%, #00426a 84%, #0085d5 84%);
	z-index: 1;
}
#campaign-page .teaserbox,
#campaign-page .teaserboxwide,
#campaign-page .teaserboxfull {
	background-color: #ffffff;
	color: rgba(83,86,90,0.85) !important;
	font-size: 13px !important;
	line-height: 18px !important;
	padding: 25px 30px !important;
	margin-bottom: 10px !important;
	position: relative;
}
#campaign-page .teaserbox span,
#campaign-page .teaserboxwide span,
#campaign-page .teaserboxfull span {
	font-size: 19px;
	line-height: 26px;
	margin-bottom: 15px;
}
#campaign-page .teaserbox img,
#campaign-page .teaserboxwide img,
#campaign-page .teaserboxfull img {
	margin: 5px 0 15px;
	padding: 0px;
}

/* Links and buttons */
#campaign-page a:link,
#campaign-page a:visited,
#campaign-page a:active {
	color: #0085d5;
	text-decoration: none;
	transition: background 0.6s ease;
}
#campaign-page a:hover {
	color: #00426a;
	text-decoration: underline;
}
#campaign-page .cta-10px * {font-size: 10px; padding: 12px 16px;}
#campaign-page .cta-11px *, #campaign-page .comingsoon {font-size: 11px; padding: 13px 18px;}
#campaign-page .cta-12px * {font-size: 12px; padding: 14px 19px;}
#campaign-page .cta-13px * {font-size: 13px; padding: 15px 21px;}
#campaign-page .cta-14px * {font-size: 14px; padding: 16px 22px;}
#campaign-page .cta-15px * {font-size: 15px; padding: 18px 24px;}
#campaign-page .cta-16px * {font-size: 16px; padding: 19px 26px;}
#campaign-page .cta-button a:link,
#campaign-page .cta-button a:visited,
#campaign-page .cta-button a:active,
#campaign-page .comingsoon {
	font-family: "Roboto", Arial, sans-serif, Helvetica;
	font-weight: 400 !important;
	line-height: 100% !important;
	color: #ffffff !important;	
	align-self: flex-end !important;
	margin: 5px auto !important;
	text-transform: none !important;
	text-decoration: none !important;
}
#campaign-page .cta-button a:link,
#campaign-page .cta-button a:visited,
#campaign-page .cta-button a:active {
	background-color: #0085d5;
}
#campaign-page .cta-button a:hover {
	background-color: #00426a !important;
	text-decoration: none !important;
}

/* Misc */
#campaign-page .mediaspecs, #campaign-page .captions {
	color: #888b8d !important;
	font-weight: 400 !important;
}
#campaign-page .mediaspecs {
	font-size: 12px !important;
	line-height: 16px !important;
	margin: 0px 0px 15px 0px;
}
#campaign-page .captions {
	font-size: 13px !important;
	line-height: 20px !important;
	margin: 10px 0px 50px 0px !important;
}
#campaign-page .mediaspecs span {
	color: #53565a !important;
	margin: 0 5px;
}

#campaign-page .dividerline {
	padding: 0 !important;
	margin: 10px 0px;
	border-top: 1px solid #d0d0ce;
	height: 0px;
}
#campaign-page .dividerlinesml {
	padding: 10px 0 !important;
	margin: 0 0 15px 0 !important;
	border-bottom: 1px solid #d0d0ce;
}
#campaign-page .dividerlineinnen {
	margin: 0px;
	background-color: rgba(0,66,106,0.05);
	border-bottom: 1px solid #d0d0ce;
}
#campaign-page .product-label {
	font-size: 12px;
	line-height: 16px;
	margin: 0 !important;
	padding: 0 0 35px !important;
	min-width: 800px !important;
}
#campaign-page * p {
    margin: 0 0 15px 0;
}
#campaign-page .container-wrapper {padding: 30px 45px !important;}
#campaign-page .first-container-wrapper {padding: 40px 45px 30px !important;}
#campaign-page .workshop-wrapper {padding: 0 45px 25px !important;}
#campaign-page .sml-wrapper {padding: 0 45px !important;}
#campaign-page .centerme {margin: 10px auto !important;}
#campaign-page .middleme {align-items: center;}
#campaign-page .reset {clear:both}
#campaign-page .resetspace {padding-top: 30px !important;}
#campaign-page .resetwidth {width: 100% !important;}
#campaign-page .stretch {align-content: flex-start !important; justify-content: space-between !important;}
#campaign-page .endme {align-self: end !important; margin: 0 auto !important;}
#campaign-page .rightalign {text-align: right !important;}
#campaign-page .type-regular {font-weight: 400 !important;}
#campaign-page .type-light {font-weight: 300 !important;}
#campaign-page .type-medium {font-weight: 500 !important;}
#campaign-page .type-bold {font-weight: 700 !important;}
#campaign-page .type-11 {font-size: 11px !important; line-height: 16px !important;}
#campaign-page .type-12 {font-size: 12px !important; line-height: 16px !important;}
#campaign-page .type-13 {font-size: 13px !important; line-height: 18px !important;}
#campaign-page .type-14 {font-size: 14px !important; line-height: 22px !important;}
#campaign-page .type-15 {font-size: 15px !important; line-height: 23px !important;}
#campaign-page .type-16 {font-size: 16px !important; line-height: 26px !important;}
#campaign-page .type-17 {font-size: 17px !important; line-height: 27px !important;}
#campaign-page .type-18 {font-size: 18px !important; line-height: 28px !important;}
#campaign-page .black {color: #000000 !important;}
#campaign-page .white {color: #ffffff !important;}
#campaign-page .darkblue {color: #00426a !important;}
#campaign-page .bg-red {background-color: #d6001c !important;}
#campaign-page .bg-black{background-color: #000000 !important;}
#campaign-page .bg-darkblue {background-color: #00426a !important;}
#campaign-page .bg-coolgray11 {background-color: #53565a !important;}
#campaign-page .bg-coolgray18 {background-color:rgba(83,86,90,.15) !important;}
#campaign-page .coolgray11 {color: #53565a !important;}
#campaign-page .coolgray8 {color: rgba(83,86,90,0.85) !important;}
#campaign-page .coolgray2 {color: #d0d0ce !important;}
#campaign-page .gapr10 {padding-right: 10px !important;}
#campaign-page .gapr15 {padding-right: 15px !important;}
#campaign-page .gapr25 {padding-right: 25px !important;}
#campaign-page .gapr40 {padding-right: 40px !important;}
#campaign-page .gapr60 {padding-right: 60px !important;}
#campaign-page .gapl45 {padding-left: 45px !important;}
#campaign-page .gapr45 {padding-right: 45px !important;}
#campaign-page .marginr5 {margin-right: 5px !important;}
#campaign-page .marginr10 {margin-right: 10px !important;}
#campaign-page .marginr20 {margin-right: 20px !important;}
#campaign-page .marginr25 {margin-right: 25px !important;}
#campaign-page .marginr40 {margin-right: 40px !important;}
#campaign-page .marginl70 {margin-left: 70px !important;}
#campaign-page .marginr50 {margin-right: 50px !important;}
#campaign-page .marginr60 {margin-right: 60px !important;}
#campaign-page .marginr70 {margin-right: 70px !important;}
#campaign-page .marginr80 {margin-right: 80px !important;}
#campaign-page .marginr100 {margin-right: 100px !important;}
#campaign-page .marginb0 {margin-bottom: 0px !important;}
#campaign-page .marginb5 {margin-bottom: 5px !important;}
#campaign-page .marginb10 {margin-bottom: 10px !important;}
#campaign-page .marginb15 {margin-bottom: 15px !important;}
#campaign-page .marginb20 {margin-bottom: 20px !important;}
#campaign-page .marginb25 {margin-bottom: 25px !important;}
#campaign-page .marginb30 {margin-bottom: 30px !important;}
#campaign-page .marginb40 {margin-bottom: 40px !important;}
#campaign-page .margint0 {margin-top: 0px !important;}
#campaign-page .margint5 {margin-top: 5px !important;}
#campaign-page .margint10 {margin-top: 10px !important;}
#campaign-page .margint15 {margin-top: 15px !important;}
#campaign-page .margint20 {margin-top: 20px !important;}
#campaign-page .margint30 {margin-top: 30px !important;}
#campaign-page .margint40 {margin-top: 40px !important;}
#campaign-page .margint45 {margin-top: 45px !important;}
#campaign-page .margint50 {margin-top: 50px !important;}