/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

:root {
  --blue: #0084D4;
  --white: #ffffff;
  --text-color: #707070;
  --link-color: var(--blue);
  --link-hover-color: #4389D1;
} 
body{
	font-family: 'Roboto', sans-serif;
	color: var(--text-color);
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
}
a{
	color: var(--link-color);
	text-decoration: none;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
a:hover{
	color: var(--link-hover-color);
}
b, strong{
	font-weight: bold;
}
img{
	max-width: 100%;
}
p{
	margin: 0 0 16px 0;
}
.animation-container{
	position: relative;
}

.d-none{
	display: none !important;
}
.container{
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	max-width: 880px;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.container-lg{
	max-width: 1240px;
}
.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-right: calc(15 / -2);
    margin-left: calc(15 / -2);
}
.col{
	padding: 15px;
}
.text-center{
	text-align: center;
}
h1, h2, h3, h4, h5{
	margin: 0;
}
h2{
	font-size: 35px;
	line-height: 46px;
	color: var(--blue);
	font-weight: bold;
}
h3{
	font-size: 28px;
	line-height: 37px;
	color: var(--blue);
	font-weight: 300;
	margin-bottom: 4px;
}
h4{
	font-size: 18px;
	line-height: 24px;
	font-weight: 300;
}
h2 + h3 {
    margin-bottom: 6px;
}
.d-flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.no-wrap{
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
}
.no-wrap .col{
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}
.align-items-center{
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.bg-white{
	background-color: #fff;
}
.mb-0{
	margin-bottom: 0 !important;
}
.text-holder{
	padding-top: 20px;
	padding-bottom: 30px;
	margin-bottom: 70px;
}
.text-holder b, 
.text-holder strong{
	color: var(--blue);
}
.with-center-line{
	position: relative;
	overflow: hidden;
	padding: 80px 0;
}
.with-center-line .container{
	z-index: 1;
}
.left-border-line{
	text-align: left;
	display: inline-block;
	padding: 20px 15px;
	border-left: 2px solid var(--blue);
}
.svg img{
	width: 100%;
}
.scroll-navigation {
    position: fixed;
    right: 0;
    top: calc( 50% - 78px );
    text-align: right;
    z-index: 999;
}
.scroll-navigation ul {
	padding: 0;
	list-style: none;
}
.scroll-navigation ul li{
	padding-right: 26px;
	position: relative;
	cursor: pointer;
}
.scroll-navigation ul li:after{
	content: "";
	width: 12px;
	height: 12px;
	border: 2px solid var(--blue);
	border-radius: 50%;
	position: absolute;
	right: 4px;
	top: 4px;
}
.scroll-navigation ul li.active:after{
	background-color: var(--blue);
}
.scroll-navigation ul li p{
	color: #707070;
	font-size: 12px;
	font-weight: 300;
	margin-bottom: 0;
}
.animation-container::before {
    content: "";
    width: 2px;
    background-color: var(--blue);
    height: calc( 100% - 100px);
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
}
/*************************************************************
	Screen 0: Welcome
*************************************************************/
#welcome {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    height: 100vh;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
#welcome h1{
	color: #00A1E4;
	font-size: 52px;
	line-height: 1.115em;
	font-weight: bold;
	margin-bottom: 10px;
}
#welcome h2{
	font-size: 28px;
	line-height: 1.321;
	font-weight: 300;
	margin-bottom: 25px;
	padding-left: 67px;
	padding-right: 67px;
	color: var(--text-color);
}
#welcome .description{
	margin-bottom: 47px;
	padding-left: 67px;
	padding-right: 67px
}
#welcome .description b,
#welcome .description strong{
	color: var(--blue);
}
#welcome .scroll-down{
	line-height: 21px;
	margin-bottom: 24px;
	font-weight: bold;
}
#welcome .animation-switch{
	margin-bottom: 30px;
}
#welcome .scroll-arrow{
	width: 44px;
	height: 44px;
	border: 2px solid var(--blue);
	border-radius: 50%;
	margin: 0 auto;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #fff;
}
#welcome .scroll-arrow::before {
    content: "";
    width: 13px;
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #fff;
    margin: 0 auto;
    top: 17px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--blue);
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
.top-spacer,
.bottom-spacer{
	width: 100%;
	text-align: center;
	-webkit-box-flex: 1;
	    -ms-flex: 1 0 0%;
	        flex: 1 0 0%;
}
.bottom-spacer::after {
    content: "";
    width: 2px;
    background-color: var(--blue);
    height: 100%;
    display: block;
    margin: 0 auto;
}
.swtich-holder{
	background-color: #d3d3d3;
	width: 45px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 20px;
	margin-left: 6px;
}
.swtich-holder .switch {
    background-color: #fff;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid;
    margin-top: -2px;
    -webkit-transform-origin: 50% 50% 0px;
        -ms-transform-origin: 50% 50% 0px;
            transform-origin: 50% 50% 0px;
	-webkit-transform: translate(0);
	    -ms-transform: translate(0);
	        transform: translate(0);
}
.animation-on .swtich-holder .switch{
	background-color: var(--blue);
	border-color: var(--blue);
}
/*************************************************************
	Screen 1.0: Meet marc
*************************************************************/
#meet-marc{
	padding-top: 0;
}
#meet-marc .image-01 {
    display: none;
}
/*************************************************************
	Screen 1.2: Began career
*************************************************************/
#began-career .text-holder,
#began-career-1 .text-holder,
#began-career-2 .text-holder{
	margin-bottom: 0;
}
#began-career img{
	margin-top: -140px;
}
#began-career-1 img,
#began-career-2 img{
	margin-top: -220px;
}
.animation-on #began-career img,
.animation-on #began-career-1 img,
.animation-on #began-career-2 img{
	margin-top: -140px;
}
/*************************************************************
	Screen 1.5: meant for mark
*************************************************************/
#meant-for-mark .text-holder,
#meant-for-mark-1 .text-holder{
	margin-bottom: 0;
}
#meant-for-mark img,
#meant-for-mark-1 img{
	max-width: 484px;
	margin-top: -58px;
	max-height: 60vh;
}
/*************************************************************
	Screen 1.7: meant for mark
*************************************************************/
#closer-look-at-innovations img{
	max-width: 390px;
	max-height: 30vh;
	margin-top: -38px;
}
/*************************************************************
	Screen 2.0: Inside lab
*************************************************************/
#inside-the-clinical-laboratory .text-holder,
#inside-the-clinical-laboratory-1 .text-holder{
	margin-bottom: 0;
}
#inside-the-clinical-laboratory img,
#inside-the-clinical-laboratory-1 img{
	max-width: 515px;
	margin-top: -38px;
}
#inside-the-clinical-laboratory-2 img{
	max-width: 424px;
}
#inside-the-clinical-laboratory-2 .image img{
	margin-bottom: 8px;
}
#inside-the-clinical-laboratory-2 .image p{
	margin-bottom: 0;
	font-size: 14px;
	color: var(--blue);
}
/*************************************************************
	Screen 2.2: Inside lab
*************************************************************/
#small-footprint img,
#small-footprint-1 img{
	max-width: 345px;
	max-height: 25vh;
	width: auto;
}
#small-footprint .text-holder,
#small-footprint-1 .text-holder{
	margin-bottom: 45px;
}
.text-holder-bottom{
	margin-top: 20px;
	margin-bottom: 30px;
}
.text-block-light-bg{
	background-color: #EDEFF033 !important;
}
/*************************************************************
	Screen 2.2: being interconnected
*************************************************************/
#being-interconnected img,
#being-interconnected-1 img{
	max-width: 345px;
}
/*************************************************************
	Screen 3.0: Moving away
*************************************************************/
#moving-away .text-holder{
	margin-bottom: 0;
}
#moving-away img,
#dried-blood-spots img{
	max-width: 418px;
	margin-top: -35px;
	max-height: 50vh;
}
/*************************************************************
	Screen 4.0: Looking ahead
*************************************************************/
#looking-ahead-2 img {
    margin-top: -20px;
}
.back-to-top{
	margin-bottom: 0;
	margin-top: 80px;
	background-color: #fff;
}
.back-to-top p{
	margin-top: 12px;
	margin-bottom: 0;
	color: var(--blue);
	font-size: 12px;
	background-color: #fff;
}
.back-to-top-arrow{
	width: 44px;
	height: 44px;
	border: 2px solid var(--blue);
	border-radius: 50%;
	margin: 0 auto;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background-color: #fff;
	cursor: pointer;
}
.back-to-top-arrow::before {
    content: "";
    width: 13px;
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #fff;
    margin: 0 auto;
    top: 15px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--blue);
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}
#looking-ahead{
	padding-bottom: 0;
}
#looking-ahead img{
	background-color: #fff;
}

.scroll-text {
    margin-bottom: 70px;
}
.scroll-text .text-holder{
	margin-bottom: 0;
	padding-bottom: 0;
}
.scroll-text .text-holder:last-child {
    padding-bottom: 20px;
}
#began-career-1 .scroll-text {
	margin-bottom: -70px;
}
#began-career-1 .scroll-text .text-holder{
	padding-bottom: 20px;
	display: block;
	max-width: 40%;
}
#meant-for-mark .image,
#inside-the-clinical-laboratory .image{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background-color: #fff;
}
#inside-the-clinical-laboratory .image img{
	max-height: 362px;
}
/*************************************************************
	When animation switch is on
*************************************************************/
.animation-on .scroll-text {
    margin-bottom: 0;
}
.animation-on .scroll-text .text-holder{
	padding-bottom: 30px;
	margin-bottom: 70px;
}
.animation-on #began-career .text-holder, 
.animation-on #began-career-1 .text-holder, 
.animation-on #began-career-2 .text-holder {
    margin-bottom: 0;
    position: absolute;
    top: 60px;
}
.animation-on #began-career-1 .scroll-text {
	margin-bottom: 0;
}
.animation-on #meant-for-mark .image,
.animation-on #inside-the-clinical-laboratory .image{
	display: block;
	background-color: transparent;
}
.animation-on #inside-the-clinical-laboratory img, 
.animation-on #inside-the-clinical-laboratory-1 img {
    max-width: 515px;
    margin-top: 0;
    max-height: 40vh;
}

.animation-on #meet-marc{
	padding-top: 80px;
}
.animation-on #meet-marc .image-01 {
    display: block;
}
#scene-2 section .image {
    padding-top: 60px;
}
.animation-on #scene-1 section,
.animation-on #scene-9 section{
	-ms-flex-line-pack: end;
	    align-content: flex-end;
}
.animation-on #scene-2 section,
.animation-on #scene-3 section,
.animation-on #scene-4 section,
.animation-on #scene-5 section,
.animation-on #scene-6 section,
.animation-on #scene-7 section,
.animation-on #scene-8 section{
	-ms-flex-line-pack: center;
	    align-content: center;
}

.animation-on #scene-1 .image,
.animation-on #scene-1 .scroll-text,
.animation-on #scene-2,
.animation-on #scene-2 .scroll-text ,
.animation-on #scene-3 .image,
.animation-on #scene-5 .image,
.animation-on #scene-8 .scroll-text,
.animation-on #scene-9 .scroll-text{
	display: -ms-grid;
	display: grid;
}
.animation-on #scene-1 .image img,
.animation-on #scene-1 .scroll-text .text-holder,
.animation-on #scene-2 section,
.animation-on #scene-2 .scroll-text .text-holder,
.animation-on #scene-3 .image img,
.animation-on #scene-5 .image img,
.animation-on #scene-8 .scroll-text .text-holder,
.animation-on #scene-9 .scroll-text .text-holder{
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: 1 / 1;	
}
.animation-on #scene-1 .image img:nth-child(2),
.animation-on #scene-3 .image img:nth-child(2),
.animation-on #scene-5 .image img:nth-child(2){
	opacity: 0;
}

.animation-on #scene-3 .image,
.animation-on #scene-5 .image{
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
/*.animation-on #scene-6{
	opacity: 0;
}
.animation-on #scene-6 .image{
	opacity: 0;
}*/
.animation-on #scene-2 section img,
.animation-on #scene-7 section img,
.animation-on #scene-8 section img,
.animation-on #scene-9 section img{
	position: relative;
	z-index: 1;
}
.animation-on #scene-1 .text-holder,
.animation-on #scene-8 .text-holder{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}

.animation-on #scene-9 .text-holder{
	padding: 20px;
	margin-bottom: 20px;
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}
.animation-on #scene-9 img{
	background-color: #fff;
}

/* .animation-on #scene-2 .text-holder{
	position: absolute;
	top: 8%
}
.animation-on #scene-2 .scroll-text{
	max-width: 40%;
}*/
/*.animation-on #scene-5 .image img {
    max-height: 70%;
}*/
.animation-on #scene-2 .scroll-text .text-holder{
	display: block;
}
.animation-on #began-career-1{
	opacity: 0;
}
/* .animation-on #scene-8{
	margin-top: -800px;
} */
.animation-on #scene-6 section{
	min-height: 50vh;
	padding-bottom: 0;
}
.animation-on .back-to-top {
	margin: 0;
	padding: 0 0 60px;
}
.animation-on #looking-ahead{
	min-height: 100vh;
}
.animation-on #looking-ahead img{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: 0;
}
#inside-the-clinical-laboratory .image .image-01 {
    margin-left: -22px !important;
}
/*@media only screen and (max-width: 1600px){
	.scroll-navigation ul li{
		min-height: 26px;
	}
	.scroll-navigation ul li p{
		display: none;
	}
}*/

@media only screen and (max-width: 767px){
	.container {
		padding: 0 30px;
	}
	.scroll-navigation ul li{
		min-height: 26px;
	}
	.scroll-navigation ul li p{
		/*transform: translateX(150%);*/
		display: none;
	}
	h3{
		font-size: 24px;
		line-height: 1.321em;
	}
	h4{
		font-size: 16px;
	}
	#welcome h1{
		font-size: 35px;
	}
	#welcome h2{
		padding: 0;
		font-size: 20px;
	}
	#welcome .description{
		padding: 0;
	}
	.text-holder br{
		display: none;
	}
	.with-center-line{
		padding: 40px 0;
	}
	#scene-2 section .image{
		padding-top: 0;
	}
	#began-career img{
		margin-top: 0;
	}
	#began-career-1 .scroll-text .text-holder{
		max-width: 100%;
	}
	#began-career-1 img, #began-career-2 img {
    	margin-top: 60px;
	}
	#meant-for-mark img, #meant-for-mark-1 img{
		margin-top: -40px;
	}
	#closer-look-at-innovations img{
		max-width: 70%;
	}
	#inside-the-clinical-laboratory .image img.image-02 {
    	display: none;
	}
	#inside-the-clinical-laboratory-2 .row.no-wrap,
	#scene-7 .row.no-wrap {
	    -ms-flex-wrap: wrap !important;
	        flex-wrap: wrap !important;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	    -ms-flex-direction: column;
    	        flex-direction: column;
	}
	#inside-the-clinical-laboratory-2 .image{
		background-color: #fff;
	}
	#small-footprint .col{
		-webkit-box-ordinal-group: 2;
		    -ms-flex-order: 1;
		        order: 1;
	}
	#small-footprint .image {
		-webkit-box-ordinal-group: 1;
		    -ms-flex-order: 0;
		        order: 0;
	}
	#small-footprint .text-holder, #small-footprint-1 .text-holder {
	    text-align: center;
	    border: none;
	    padding: 0;
	}
	#scene-9 .image{
		padding: 0;
	}
	.animation-on #began-career img, .animation-on #began-career-1 img, .animation-on #began-career-2 img {
    	margin-top: 0;
	}
	.animation-on #began-career-1 .scroll-text {
    	margin-bottom: 0;
	}
	#scene-2 {
		min-height: 100vh;
	}
	.animation-on #inside-the-clinical-laboratory .image img.image-02 {
    	display: block;
	}
	#small-footprint .text-holder.text-01{
		margin-bottom: 0;
	}
	#small-footprint .text-holder.text-03,
	#small-footprint .text-holder.text-04{
    	display: none;
	}
/* 	.animation-on #scene-8{
		margin-top: -200px;
	} */
	#small-footprint .col,
	#scene-6 .col,
	.animation-on #scene-9 .text-holder{
		padding-left: 0;
		padding-right: 0;
	}
	.text-block-light-bg {
    	background-color: #fff !important;
	}
	.animation-on #began-career .text-holder, 
	.animation-on #began-career-1 .text-holder, 
	.animation-on #began-career-2 .text-holder {
	    margin-bottom: 0;
	    position: relative;
	    top: 0px;
	}
}