@charset "utf-8";

@font-face {
    font-family: 'Camber Light';
    src: url('../fonts/Ca1000-Lg.eot');
    src: url('../fonts/Ca1000-Lg.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-Lg.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Light It';
    src: url('../fonts/Ca1000-LgItalic.eot');
    src: url('../fonts/Ca1000-LgItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-LgItalic.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Regular';
    src: url('../fonts/Ca1000-Rg.eot');
    src: url('../fonts/Ca1000-Rg.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-Rg.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Regular It';
    src: url('../fonts/Ca1000-RgItalic.eot');
    src: url('../fonts/Ca1000-RgItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-RgItalic.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Medium';
    src: url('../fonts/Ca1000-Md.eot');
    src: url('../fonts/Ca1000-Md.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-Md.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Semibold';
    src: url('../fonts/Ca1000-Sb.eot');
    src: url('../fonts/Ca1000-Sb.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-Sb.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Camber Bold';
    src: url('../fonts/Ca1000-Bd.eot');
    src: url('../fonts/Ca1000-Bd.eot?#iefix') format('embedded-opentype'), url('../fonts/Ca1000-Bd.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Decagram Semibold';
    src: url('../fonts/De1000-SmBd.eot');
    src: url('../fonts/De1000-SmBd.eot?#iefix') format('embedded-opentype'), url('../fonts/De1000-SmBd.woff') format('woff');
    font-display: swap
}

@font-face {
    font-family: 'Decagram Medium';
    src: url('../fonts/De1000-Md.eot');
    src: url('../fonts/De1000-Md.eot?#iefix') format('embedded-opentype'), url('../fonts/De1000-Md.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Decagram Light';
    src: url('../fonts/De1000-Lt.eot');
    src: url('../fonts/De1000-Lt.eot?#iefix') format('embedded-opentype'), url('../fonts/De1000-Lt.woff') format('woff');
    font-display: swap
}

@font-face {
    font-family: 'Decagram Bold';
    src: url('../fonts/De1000-Bd.eot');
    src: url('../fonts/De1000-Bd.eot?#iefix') format('embedded-opentype'), url('../fonts/De1000-Bd.woff') format('woff');
    font-display: swap
}
@font-face {
    font-family: 'Decagram VF';
    src: url('../fonts/Decagram_VR.woff2');
    src: url('../fonts/Decagram_VR.eot?#iefix') format('embedded-opentype'), url('../fonts/Decagram_VF.woff') format('woff');
    font-display: swap
}

*{margin:0;padding:0}
html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,table,th,td,form,fieldset,legend,input,textarea,button,select,a{-webkit-text-size-adjust:none}
body,input,textarea,select,button,table {font: 14px Camber Regular, Helvetica, Arial;line-height: 1.4;color:#54565b}
html,body {width: 100%;height: 100%;min-width:300px}
body{position:relative}
img,fieldset,button{border:0}
h1,h2,h3,h4,h5{font-weight:normal}
button {cursor: pointer;background:none;outline:none;border:0}
textarea {overflow: auto;vertical-align: top;resize: none;outline:none}
input[type="text"],input[type="checkbox"],input[type="radio"] {vertical-align: top}
input[type="text"], input[type="email"], input[type="tel"], input[type="submit"]{outline:none;border: none;border-radius:3px}
input[type="submit"]{cursor: pointer}
input:focus,
textarea:focus {background:#e6eded}
table {width: 100%;border-collapse:collapse;table-layout:fixed}
table th {font-weight: normal}
ul{list-style: none}
address{font-style: normal}
i,em{font-style: italic}
a{text-decoration:none;cursor: pointer;color:#000}
a:hover,a:active,a:focus {text-decoration: none}
caption,legend{display: none}
strong a:hover{color: #f7f7f7}
.noscroll {overflow: hidden}
.uppercase {text-transform: uppercase}
.lowercase {text-transform: lowercase}
.mobile-line-break {display: inline}
form input::-webkit-input-placeholder {color: #626262}
form input::-moz-placeholder {color: #626262}
form input:-ms-input-placeholder {color: #626262}
form input:-moz-placeholder {color: #626262}
form input {-webkit-appearance: none}
.indent-right{margin-right: 10px}
.no-l-margin{margin-left: 0}
.no-r-margin{margin-right: 0;padding-right: 0}
.hero-heading{font-family: Decagram Bold}
.page-heading{font-family: Decagram Bold}
.paragraph-subheading{font-family: Decagram}
.paragraph, .regCamb{font-family: Camber Regular}
.paragraph-link{font-family: Camber Semibold;color:#346c97}
.paragraph-link:hover{color:#588eb7}
.paragraph-link-white{color:#ccc}
.paragraph-link-white:hover{color:#fff}
.boldCambSemB{font-family: Camber Semibold}
.medCamb{font-family: Camber Medium}
.lightCamb{font-family: Camber Light}
.lightItCamb{font-family: Camber Light It}
.boldDecSemB{font-family: Decagram Semibold}
header,nav,main,section,article,aside,footer{display: block}
.left {float:left}
.right {float:right}
img{width: 100%;height:auto;vertical-align:top}
.line-break {display:block}
.newPara{margin-top:30px}

/*/////////////////// GRID STYLES ///////////////*/

/* no grid support? */
.card-layout{
  display: flex;
  flex-wrap: wrap
}

.card-layout{
    display:grid;
    grid-auto-rows:minmax(0px, auto)
}

.card2-wrapper, .card3-wrapper{max-width:1400px}

.narrow-content{
    max-width:1200px;
    margin: 30px auto 60px auto
}

/*------------ RESOURCES GRID ----------*/

.docs-wrapper{
  grid-auto-rows: minmax(0px, auto);
  grid-column-gap:52px;
  grid-row-gap:70px
}

.card6-wrapper{
  grid-template-columns: repeat(auto-fill, minmax(14%, 1fr));
  grid-column-gap:20px
}

.card5-wrapper{
  grid-template-columns: repeat(auto-fill, minmax(18%, 1fr));
  grid-column-gap:25px
}

.card4-wrapper{
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
}

.card3-wrapper{
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

.card2-wrapper{
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-column-gap:100px
}

.section-margins .card2-wrapper{max-width: 1300px}

/*------ Column Box -----*/
.column-box{
  margin:0 50px 60px 20px;
  flex: 1 1 350px
}

/*------ Resources Box -----*/
.card1-wrapper .document-box{max-width:350px}

.document-box{
  /* needed for the flex layout*/
  margin:0 20px 60px 20px;
  flex: 1 1 250px
}

.document-box h4 {
    font: 16px/1.3 Camber Semibold;
    color: #101820;
    margin: 12px 0
}

/* We need to set the margin used on flex items to 0 as we have gaps in grid.  */

@supports (display: grid){
  .card-layout .document-box, .card-layout .column-box{
    margin: 0
  }
}

.global-btn{
  border-radius:4px;
  padding:8px 10px 9px 12px;
  font:14px Decagram Semibold;
  background:transparent;
  border:1px solid #bfbfbf;
  color:#B7B7BA
}

.global-btn:hover{
    color:#fff;
    border:1px solid #fff
}

/*-------------------- HEADER -------------------*/
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 900
}

#main-header-wrap {
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    z-index: 1001
}

#social-header{height:40px;background:#222D38}

/*--------- NAV SEARCH BAR ------------*/
#global-search{
   position:relative;
   float:left;
   width:300px;
   display:none
}
.ss360-custom-search{padding:0 !important}
#searchButton {
    position:absolute;
    right:0;
    top:0;
    font-size:0 !important;
    margin:0;
    color:#8A99A3;
    cursor: pointer !important;
    border:0 !important;
    border-radius:0 !important;
    background-color:transparent !important;
    display:block !important;
    padding:0;
    box-shadow: none !important
}

#searchButton svg{
    margin:7px 4px 0 0;
    width:28px;
    height:28px;
    fill:#bfbfbf
}

#searchBox{
    width:100%;
    padding:0 10px;
    border:none !important;
    background:#2a4051 !important;
    border-radius:0 !important;
    box-shadow:none !important
}

#global-search input{
    font-size: 14px;
    height:40px;
}

#global-search input::-webkit-input-placeholder {color:#bfbfbf}
#global-search input::-moz-placeholder {color:#bfbfbf}
#global-search input:-ms-input-placeholder {color:#bfbfbf}
#global-search input:-moz-placeholder {color:#bfbfbf}

#unibox-suggest-box{
    position: absolute;
    left: 0 !important;
    top:40px !important;
    border-radius: 0 !important;
    min-width:auto !important;
    box-shadow:none !important
}

.unibox{padding-left: 0 !important}
.unibox__selectable-title{font:normal 14px Camber Regular !important}
#unibox-suggest-box .unibox-tc-c{font:normal 14px Camber Regular !important}

.search-open{
    -webkit-animation: .2s searchOpen;
    -moz-animation: .2s searchOpen;
    -ms-animation: searchOpen 0.2s;
    -o-animation: .2s searchOpen;
    animation: .2s searchOpen
}

@keyframes searchOpen{
    0% {
        height:0
    }
    100% {
       height:60px
    }
}

.search-close{
    -webkit-animation: .2s searchClose;
    -moz-animation: .2s searchClose;
    -ms-animation: searchClose 0.2s;
    -o-animation: .2s searchClose;
    animation: .2s searchClose;
    height:0
}

@keyframes searchClose{
    0% {
        height:60px
    }
    100% {
       height:0
    }
}

/*----------------CONNECT SOCIAL -----------------*/

#social-header .page-inner{max-width:1500px}

#connect-social{float:left}

#connect-social ul{margin-top:5px}

#connect-social li{
  position:relative;
  float:left;
  margin-right:10px;
  font:200 14px Camber Medium;
  color:#B7B7BA
}

#connect-social li:first-child{padding-top:5px}

#connect-social li a{
 position:relative;
 display:block;
 font: 13px Camber Regular;
 font-weight: 500;
 color: #fff;
 overflow: hidden;
 text-transform:uppercase;
 -webkit-transition:all 1s ease;
 -moz-transition:all 1s ease;
 -o-transition:all 1s ease;
 transition:all 1s ease;
 z-index:12
}

#connect-social .social-icon{
 border: 1px solid #B7B7BA;
 width:28px;
 height:28px;
 border-radius: 50%;
 -moz-border-radius:50%;
 -webkit-border-radius:50%;
 text-align: center
}

#connect-social svg{position:absolute}

.social-icon svg{fill:#B7B7BA}

#in-header svg{width:24px;left:2px;top:1px}
#tw-header svg{width:14px;left:7px;top:6.5px}
#yt-header svg{width:18px;left:5px;top:5px}

.social-icon svg:hover{fill:#fff}

#connect-social .social-icon:after {background: none}
#connect-social .social-icon:hover {border: 1px solid #fff}

#main-nav .tm-svg{width:14px;height:14px}
#main-nav .tm-svg svg{width:14px;height:14px}


/*----------------- NAVIGATION --------------------*/
.clear-header {background:#fff}
.dark-header, .full-header{background:#101820}
#nav-wrap {margin: 0 auto 0 auto;max-width: 1500px}
#logo-wrap {position: relative;height:auto}
#header-logo {
    position: absolute;
    opacity: 0.9;
    z-index: 1005;
    width: 210px;
    left: 0;
    top: 14px;
    min-width: 210px
}

#header-logo .cdilb01{fill:#203449}
#header-logo .cdilb02{fill:#ed2224}
/*------------ MAIN NAV -----------*/
#nav-header-bg{
    position: absolute;
    z-index:1003;
    opacity:.94;
    width:100%;
    height:65px;
    background:#fff;
    box-shadow:
    0px 2.8px 5.3px rgba(0, 0, 0, 0.042),
    0px 9.4px 17.9px rgba(0, 0, 0, 0.062),
    0px 42px 80px rgba(0, 0, 0, 0.11)
}
#main-nav-wrap{
    position:relative;
    width: 100%
}
#outer-ul{
    position: absolute;
    right:0;
    top:22.5px;
    width:1254px;
    z-index:1005
}
#main-nav li {float:left;padding-left:8px}
.main-link {padding: 0;position: relative}

.main-link .arrow-down{
    fill:#6B737B;
    width:12px;
    height:12px;
    padding-left:2px;
    vertical-align: middle
}

#main-nav ul li a {
    float:left;
    font:13.5px Camber Medium;
    text-transform:uppercase;
    color:#101820;
    padding:0 0 32px 41px
}
#main-nav ul li a:hover {color:#101820}

#current-tab {border-bottom: 4px solid #181818}
.desktop-link:hover ul {
    visibility: visible;
    opacity: 1;
    z-index: 1006;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.5s
}

#nav-bkg {
    position: absolute;
    visibility: hidden;
    width: 100%;
    top:105px;
    left: 0;
    background:#fff;
    z-index: -2;
    -webkit-transform: translateY(-2em);
    -ms-transform: translateY(-2em);
    -moz-transform: translateY(-2em);
    transform: translateY(-2em);
    transition: all 0.3s ease-in-out 0s, opacity 0.1s linear 0.2s, z-index 0s linear 0.1s
}
#main-nav-wrap:hover + #nav-bkg {
    visibility: visible;
    opacity:.92;
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -moz-transform: translateY(0%);
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.5s
}

.sub-menu {
    visibility: hidden;
    opacity: 0;
    display: grid;
    position: absolute;
    top: 60px;
    width: 1400px;
    padding: 15px 0 80px 0;
    z-index: 0;
    -webkit-transform: translateY(-2em);
    -ms-transform: translateY(-2em);
    -moz-transform: translateY(-2em);
    transform: translateY(-2em);
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.1s
}

.sub-menu ul {
    position: relative;
    display: inline-block;
    padding: 0
}

.single-menu{width:250px}

.sub-menu ul svg, .sub-menu ul img{
    position:absolute;
    border:3px solid #d4d4d4;
    border-radius:50%;
    z-index:1004
}

#main-nav .sub-menu li {
    float:left;
    position: relative;
    width: 95%;
    text-transform: none;
    color: #54565b;
    padding: 0 0 0 18px;
    margin: 5px 0 0;
    text-align: left;
    line-height: 1.1
}

#main-nav .sub-menu a {
    position: relative;
    float:left;
    padding: 0;
    margin: 2px 0 0;
    text-transform: none;
    font: 14.5px Camber Medium;
    letter-spacing: .1px;
    color: #101820;
    width: 90%
}

#main-nav .ul-with-squares li:before{top:7px;background:#346c97}
#main-nav .sub-menu a:hover{color:#181818}
#main-nav .sub-menu a:after {
    content: "";
    height: 1px;
    width: 0;
    background: #6f7934;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transition: width 0.1s linear;
    -moz-transition: width 0.1s linear;
    -ms-transition: width 0.1s linear;
    -o-transition: width 0.1s linear;
    transition: width 0.1s linear;
    z-index: 2000
}
#main-nav .sub-menu a:hover:after{width:100%}
#main-nav .sub-menu a:hover{color:#181818}

#cdi-canada-popup{
  display:none;
  position:fixed;
  z-index:-1;
  left:50%;
  top:50%;
  margin:0;
  width:50%;
  min-width:320px;
  max-width:500px;
  height:275px;
  background:#fff;
  border:0;
  border-radius:7px;
  transform:translate(-50%, -50%) /* for centering */
}

#cdi-canada-logo{
    padding:20px 0;
    background:#1f3549;
    width:100%;
    text-align:center
}

#cdi-canada-logo svg{width:55%}

.logoca0{fill:#fff}.logoca1{fill:#ed2224}

#cdi-canada-note{
    width:90%;
    margin:30px auto;
    text-align:center
}

#cdi-canada-note p{
    margin-bottom:22px;
    font:15.5px/1.3 Camber Regular;
    color:#53565a
}

#cdi-canada-popup button{width:100px}
#cdi-canada-go{margin-right:15px}
#cdi-canada-close{border:1px solid #181818;color:#181818}
#cdi-canada-close:hover{border:1px solid inherit;color:inherit}

/*------------- POSITION DROPDOWN MENUS -----------------*/
#gnb-lab-services {left:-100%}
#gnb-cro-services {left:12%}
#gnb-platforms {left:-220%}
#gnb-bioinformatics {left:16%}
#gnb-resources {left:31%}
#gnb-news {left:25.4%}
#gnb-company {left:34.7%}

/*------------- MENU WITH CATEGORY ---------------*/
.category-sub ul li:before, #main-nav .sub-menu .nav-app-heading:hover:after{display:none}
#main-nav .sub-menu .nav-app-heading{
    font:15px Camber Medium;
    margin-bottom:5px;
    color:#fff;
    border-radius:20px;
    padding:5px 19px 7px;
    width:90%
}
#main-nav .category-sub .nav-app-heading em{font:16px Camber Semibold; color:#1f3549}
#main-nav .category-sub ul li a{font:14.5px Camber Medium}
#main-nav .nav-category{font-family:Camber Light;padding-top:20px}

.category-sub .line-break{
    font:13px Camber Light;
    margin-top:15px;
    padding-left:3px;
    line-height:1.5
}

.category-sub a em.p-number{display:block;font:17px Camber Semibold}

#main-nav .middle-note{
    position: absolute;
    bottom:30px;
    width:100%;
    text-align:center;
    z-index:50
}

/*-------------- LAB SERVICES SUBMENU ------------ */
#gnb-lab-services{
    grid-template-columns:300px 380px 400px 220px
}
#gnb-lab-services .ul-with-circles:first-child{
    padding-right:44px
}
#gnb-lab-services .ul-with-circles:nth-child(2){
    padding-right:35px
}
#gnb-lab-services .ul-with-circles:nth-child(3){
    padding-right:33px
}

#gnb-lab-services ul li, #gnb-lab-services ul li a{width:100px}

#main-nav #gnb-lab-services ul:first-child .nav-app-heading{background:#222933}
#main-nav #gnb-lab-services ul:nth-child(2) .nav-app-heading{background:#425032}
#main-nav #gnb-lab-services ul:nth-child(3) .nav-app-heading{background:#503E32}
#main-nav #gnb-lab-services ul:nth-child(4) .nav-app-heading{background:#4B3150}

#main-nav .cat-with-heading ul li{padding-left:35px}
#main-nav .cat-with-heading .nav-app-heading:hover{color:#fff}
.cat-with-heading .ul-with-circles li:before{display:block}
#main-nav .cat-with-heading ul li:first-child:before{display:none}

/*------------- SPECIALIZED CRO SERVICES -------------------*/
#gnb-cro-services{width: 400px}
#main-nav #gnb-cro-services .nav-app-heading{background:#503E32}

/*------------- PLATFORMS SUBMENU ----------------*/
#gnb-platforms{padding-top:15px;padding-bottom:110px}

#main-nav #gnb-platforms .nav-app-heading{
    display:block;
    margin-bottom:10px;
    padding:0 0 3px 2px;
    border-radius:10px;
    font:14.3px Camber Regular;
    color: #181818;
    border-bottom:1px solid #777;
    border-radius: 0
}
#main-nav #gnb-platforms ul li, #main-nav #gnb-platforms ul li a{width:100%}
#main-nav #gnb-platforms ul li a:after{display:none}
#main-nav #gnb-platforms ul li .nav-app-heading{width:70%}

#gnb-platforms ul svg{width:50px;left:-40px;top:-10px}

#main-nav #gnb-platforms .middle-note li{width:88%;text-align:center}

#main-nav .sub-menu .menu-note{
    font: 200 13px Camber Light;
    color: #979797;
    padding:30px 0 18px 0
}

#main-nav .sub-menu .menu-note:before{display:none}

/*--// Products Menu Icons Styles DO NOT EDIT //--*/
#gnb-platforms .ms-icon{fill:#fff}

/*---------------- BIOINFORMATICS -------------*/
#main-nav #gnb-bioinformatics{width:auto}
#main-nav #gnb-bioinformatics .nav-app-heading{background:#503E32}

/*------------------------------*/
.is-active {display:block}
.mobile-contact{display:none}

/*----------------------------- HERO SECTION ---------------------------*/
.hero-section {
    position:relative;
    float:left;
    overflow:hidden;
    width:100%;
    height:935px;
    border-bottom:5px solid #346c97;
    background-color:#000
}

.hero-section section{
    position:relative;
    width:80%;
    margin-top:520px;
}

.hero-section h1 {
    font:32px/1.3 Camber Semibold;
    letter-spacing:-.2px;
    background-image:linear-gradient(rgb(250,250,250) 15%, 
        rgb(200,200,200) 75%,
        rgb(195,195,195) 10%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin:0 0 20px 0
}

.hero-section h3 {
    font: 300 19px Camber Regular;
    color: #A4A4A4;
    padding-bottom: 5px
}

.hero-section p {
    font: 18px Camber Light;
    line-height: 1.4;
    color: #bbb;
    margin: 20px 0 60px 0
}

.hero-section .subtitle, .hero-section .subheading{
    font: 20px Camber Light;
    line-height: 1.4;
    color: #bfbfbf;
    margin:0 0 5px 0
}

/*------- Left Aligned Hero ------*/
.left-hero-content {
    float: left;
    width: 50%;
    text-align:left
}
.left-hero-content p{
    width: 65%
}

/*------- Center Aligned Hero ------*/
.hero-section .center-hero-content{
    width:60%;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

/*------- Right Aligned Hero ------*/
.right-hero-content {
    float: right;
    width: 50%;
    text-align:right
}

.hero-section ul{margin-bottom:60px}

.hero-section li{
    font: 400 18px Camber;
    margin-bottom:5px;
    color:#fff
}
.hero-section li:last-child {margin-bottom:0}

.hero-section .global-btn {
    padding:10px 20px 12px 22px;
    width:108px;
    font:15px Camber Medium;
    outline:none
}

/*------ skinny hero --------*/
.short-hero{height: 585px}
.short-hero section{
    margin-top: 310px;
    margin-left: 0px;
    position: relative
}
.short-hero h1{font-size: 30px}
.short-hero h3{font-style:italic}

/*-------- WHITE BG HERO --------*/
.white-bg h1, .white-bg p, .white-bg .subtitle{color: #181818}
.white-bg h1{
    background-image: linear-gradient(rgb(0, 0, 0) 15%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 10%);
}
.white-bg .global-btn{
    color: #181818;
    border:1px solid #181818;
}

/*--------------------------- PAGE SECTION ---------------------------*/
.wide-section {
    position: relative;
    float: left;
    width: 100%;
    margin: 30px 0 40px 0
}
.page-inner {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px
}

.narrow-section{max-width:1200px}

.center-paragraph {
    width:71%;
    margin:0 auto;
    text-align:center
}

.center-paragraph h2 {
    margin: 85px 0 20px;
    width: 100%;
    font: 36px Camber Regular;
    letter-spacing:-.3px;
    line-height: 1.3;
    color:#346c97
}

.heading-title h2{margin:80px 0 30px 0}

.center-paragraph h4 {
    font: 24px/1.3 Camber Medium;
    color:#101820
}

.center-paragraph h5 {
    margin-bottom: 20px;
    padding-top: 10px
}

.wide-section h3 {
    margin-bottom:20px;
    font: 20px/1.5 Camber Light It;
    color: #101820
}
.wide-section h5 {font:200 18px Camber Regular}

.center-icon{
    width: 10%;
    margin: 0 auto;
    min-width: 100px
}

.center-paragraph p, .left-paragraph p, .text-paragraph p{
    margin-bottom: 40px;
    font: 16px/1.7 Camber Regular;
    color: #54565b
}
.left-paragraph {
    float: left;
    text-align: left;
    position: relative
}
.text-paragraph {
    width: 45%;
    position: relative
}
.text-paragraph h3 {
    margin:0;
    font: 32px Camber Regular
}
.text-paragraph h4 {
    font: 25px Camber Regular;
    color: #282828;
    margin-top:30px
}

.right-paragraph {
    float:right;
    position:relative;
    text-align:left
}

.footnote p{margin-bottom:10px;font-size:18px;line-height:1.3}
.footnote p small{font-style:normal}
.footnote svg{width:15px;vertical-align:middle;margin-right:8px}
/*---Canadian flag -------*/
.caf1{fill:#ee2331}.caf2{overflow:visible;fill:#fff}.caf3{overflow:visible}.caf4{clip-path:url(#CAFID_00000019663224982801303200000007939510897080060301_)}

/*--------------- START SECTIONS ---------------*/
.section-margins{margin:0}
/*--------------- BLUE AND DARK BLUE SECTION -----------*/
.blue-section h2, .blue-section h3, .blue-section p, .black-section h2, .black-section p{color:#fff}
.blue-section{background:#1f3549}

.blue-section .center-paragraph p{font:200 18px/1.6 Camber Regular;color:#ddd;padding-bottom:15px}
.blue-section .center-paragraph a{color:#fff;border-color:#fff;padding:12px 18px 13px 19px}

.dark-blue-section{
    padding-top:10px;
    padding-bottom:100px;
    background:#101820;
    /*background: linear-gradient(180deg, rgba(33,43,54,1) 0%, rgba(25,36,41,1) 51%, rgba(14,18,23,1) 100%);*/
}

.dark-blue-section h2{color:#fff}
.dark-blue-section p, .video-section p{color:#bfbfbf}

.black-section{background:#101820}

.gray-section{background:#f7f7f7}

/*--------------- VIDEO SECTION -------------*/
.video-section{
    margin-bottom:0;
    background: linear-gradient(180deg, rgba(31,52,72,1) 0%, rgba(45,81,107,1) 51%, rgba(12,28,36,1) 100%);
}
.video-section .center-paragraph{width:73%}
.video-section h3{
    color:#bfbfbf;
    font:30px Camber Light;
    margin-bottom:35px
}

/*--------------- SAMPLE REQUIREMENTS ------------------*/
.sample-req{
    margin:10px 0 0;
    padding:35px 0 50px
}

.sample-req h3{
  font:18px Camber Semibold
}
.sample-req h3 span{
    margin-bottom:25px;
    font:16.5px Camber Light
}
.sample-req .column-box a{font-family:Camber Semibold; color:#fff}
.sample-req .card-layout .column-box{
    text-align:left;
    border-left:1px solid #555;
    padding-left:15px
}

.sample-req .card-layout .column-box h4{
   margin:0 0 5px;
   font:14px Camber Medium;
   color:#4a8ab4
}

.sample-req .card-layout .column-box p{
   color:#eee;
   font-family:Camber Semibold;
   margin-bottom:0
}

.sample-req .card-layout .column-box p span{
    font:13px Camber Light
}

#huprot-sample-req .card-layout{
    grid-template-columns:14% 14% 19% 20% 12% 12%
}

.sample-req .card4-wrapper{
    grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
    grid-column-gap: 30px
}

/*--------------- PAGE WITH RIGHT SIDEBAR ---------------*/

.section-with-sidebar{
 margin:0;
 background:linear-gradient(to right, #fff 70%, #f0f1f2 30%)
}

#left-sidebar{
  position:relative;
  float:left;
  margin:60px 0 0 0;
  width:68%;
  min-height:1200px
}

#right-sidebar{
 position:absolute;
 right:0;
 top:0;
 background:#f0f1f2;
 min-width:277px;
 width:28%;
 height:100%;
 z-index:200
}

#right-sidebar div{
    margin-top:60px;
    float:left;
    padding-left:40px
}
#right-sidebar h4{
    font:28px Camber Light;
    margin-bottom:30px;
    padding-bottom:5px;
    border-bottom:3px solid #e0e0e0
}
#right-sidebar ul{margin-bottom:25px;border-bottom:solid 1px #aaa}
#right-sidebar li{margin-bottom:10px}
#right-sidebar .featured-publisher{color:#101820;font:14px Decagram Semibold}
#right-sidebar .featured-title{font:15px Camber Semibold;color:#1f3549}
#right-sidebar .featured-link{font:15px Camber Medium;color:#346c97}
#right-sidebar li em{
    color:#54565b;
    display:block;
    font-style:italic
}

.small-left-arrow, .small-right-arrow{width:22px;vertical-align:middle}

#content-footer{
 position:relative;
 clear:both;
 width:100%
}

#right-sidebar .pdf-icon{width:26px}

/*------------------ QUOTES SVG ---------------*/
.wide-section .quote{position:absolute;fill:white;top:-5px}
.left-quote{transform:rotate(180deg) scaleX(1)}

/*----------------- CUSTOM STICKER ------------- */

.press-row {
  float: left;
  margin:0;
  display: none
}
.press-row{
    height:70px;
    background:#f0f1f2
}
#press-date {
    float: left;
    display: block;
    width:18%;
    padding:24px 0 25px 0;
    min-width:245px;
    background: #dadada
}
#press-date:before {
    content: "";
    position: absolute;
    background: #dadada;
    height:69px;
    width:10000px;
    left:-10000px;
    top:0
}
#press-release p {
    color: #181818;
    font: 15px Camber Semibold;
    padding-left: 0px
}
#press-release p span{margin-left:6px;font-family:Camber Light}
.press-row ul {
    left:135px;
    top:0;
    width:80%;
    height:50px;
    padding-top:24px;
    background:none
}
.press-row li{font:15px Camber Medium}

.press-row li span{
    font-weight:normal;
    display: inline-block;
    width: 100px
}

.press-row li a em{
    font-family:Camber Semibold;
    font-style:normal;
    text-transform:uppercase;
    margin-left:40px
}

.press-row li a{color:#53565a}

.press-row li a span:first-child, #static-ticker li{
    font: 15px Camber Regular;
    white-space: nowrap;
    text-overflow: ellipsis
}
.press-row li a:hover{color:#000}

#static-ticker ul{margin:0 auto;max-width:900px}
#static-ticker li{float:left}
#static-ticker li span{
    font:19px Camber Medium;
    margin-left:0;
    color: #181818
}
#static-ticker li a{
    color:#fff;
    margin-left:1px;
    padding: 8px 18px 10px 18px;
}

#press-release .article-source{
    color:#346c97;
    margin-left:5px;
    font-weight:500;
    font-size:17px
}

#press-release .view-all {
    position: absolute;
    top: 25px;
    right:2%;
    font: 15px Camber Medium;
    min-width: 74px;
    color: #346c97;
    z-index:20
}

#press-release .view-all svg {position:absolute;top: -1px}

#save-with-cdilabs h3{
 margin-top:60px;
 font-size:24px
}

#press-release .slider-arrow{display:none}
.slider-arrow{background-repeat:no-repeat;background-size:100%}
.hero-section .prev-arrow{background-image:url('../img/main/slider-arrow-left-dark.png')}
.hero-section .next-arrow{background-image:url('../img/main/slider-arrow-right-dark.png')}

#press-release .slide-btn{display:none}

.hide-section{opacity:0;visibility:hidden}
.section-fadein{
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 100ms
}

/*-------------------- DEFAULT SLIDER ---------------------*/
.slide {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0;
    background: no-repeat center center;
    background-size: cover;
    z-index:-1
}

.swap{z-index:3}
.slide.playing {z-index:3}

.slide-nav-wrap{
    position:absolute;
      left: 0; 
      right: 0; 
      margin-left: auto; 
      margin-right: auto;
      bottom:30px;
    width:214px;
    min-width: 214px;
    z-index:10
}

.slide-nav{
    float: right;
    margin: 0 0 20px
}

.slide-btn{
  display: inline-block;
  width:40px;
  height:18px;
  margin-right:18px;
  border-radius:3px;
  background:#7c878e;
  cursor:pointer
}

.slide-btn:last-child{margin-right:0}

.slide-btn.playing {background:#346c97}

.slider-arrow{
   position:absolute;
   width:60px;
   height:60px;
   z-index:50;
   bottom:250px;
   cursor:pointer;
   display:none
}

.prev-arrow{left:-2%}
.next-arrow{right:-2%}

/*---------- SECTION SLIDER -----------*/
.section-slider .slider-arrow{top:50%}

/*----------- Customer Quotes Slider ------------*/
#customer-slide{height:475px;margin-top:70px}
#customer-slide .page-inner{height:400px}
#customer-slide img{
    width:30%;
    margin-bottom:30px;
    margin-top:20px;
    min-width:250px
}
#customer-slide h3{font:29px Camber Medium;margin-bottom:50px}
#customer-slide h4{font:300 26px/1.4 'rocky';color:#54565b}
#customer-slide p{
    margin-top:45px;
    font:22px/1.4 Camber Semibold;
    color:#346c97
}
#customer-slide p span{
    display:block;
    font:17px/1.3 Camber Light;
    color:#54565b
}
#customer-slide p span-1{
    display:block;
    margin-top:10px;
    font:15px Camber Light It;
    color:#54565b
}

.section-slider .prev-arrow{ background:url('../img/main/customer-arrow-left.svg')}
.section-slider .next-arrow{ background:url('../img/main/customer-arrow-right.svg')}

.section-slider .slide-btn{opacity:0}
.section-slider .slider-arrow{display:block}
.section-slider .slider-arrow{width:20px}

/*------------------ YouTube iframe ------------------*/
.iframe-video {
    position: relative;
    padding-bottom: 56.2%;
    height: 0;
    overflow: hidden
}
.iframe-video iframe,
.iframe-video object,
.iframe-video embed {
    position: absolute;
    top: 0;
    left: 2px;
    width: 98%;
    height: 98%;
    border: solid 5px #444
}

/*------------------ LISTS with Arrows, Circles and Squares --------------*/

.ul-with-arrows li {
    width: 100%;
    padding-left: 15px;
    font: 18px/1.4 slatemed;
    margin-bottom: 10px;
    color: #000
}
.ul-with-arrows li:before {
    content: "";
    border-color: transparent #7c878e;
    border-style: solid;
    border-width: 6px 0 6px 7px;
    display: block;
    height: 0;
    width: 0;
    left: -13px;
    top: 0.95em;
    position: relative
}
.ul-right-arrows li {
    position: relative;
    width: 100%;
    padding-right: 15px
}
.ul-right-arrows li:after {
    content: "";
    border-color: transparent #7c878e;
    border-style: solid;
    border-width: 6px 7px 6px 0;
    display: block;
    height: 0;
    width: 0;
    right: 0;
    top: 7px;
    position: absolute
}
.ul-with-circles li {
    padding:0 0 10px 30px
}
.ul-with-circles li:before {
    content: "";
    background:#7c878e;
    border-radius: 50%;
    display: block;
    height:6px;
    width:6px;
    left:-15px;
    top:15px;
    position:relative
}
.ul-with-squares li {
    position: relative;
    width:100%;
    padding-left:18px
}
.ul-with-squares li:before {
    content: "";
    background:#7c878e;
    display: block;
    height: 6px;
    width: 6px;
    position: absolute;
    left: 2px;
    margin-top: 2px
}

ol.ul-with-squares{padding-left:20px}
ol.ul-with-squares li{padding-left:5px}
ol.ul-with-squares li:before{
    display:none
}

/*//////////// COLUMNS //////////////*/
.col-wrapper{
    position: relative;
    width: 100%;
    float:left   
}
/*------------------ 2 COLUMNS -----------------*/
.col4-wrapper, .col5-wrapper{
    position: relative;
    width: 100%;
    float:left
}

.column-list li{
    font:15px/1.5 Camber Light;
    color:#ccc; 
    padding-bottom:15px
}

.column-list li:before{margin-top:8px}

/*------------- COLUMN BOTTOM BOX BUTTON---------*/
.col-bottom{position:absolute;bottom:35px;width:93%;text-align:center}
.col-bottom a{font:16px Camber Medium}

/*-------------- KEY BENEFITS ---------------*/
.key-benefits{width:100%}
.key-benefits ul li {float:left;color:#346c97}
.key-benefits ul li:first-child{padding-left:0}
.key-benefits ul li:last-child{margin-right:0}

/*------------- GRAY BOXES --------------------*/

.light-gray-box{
     background:-webkit-linear-gradient(top, #F6F7F8, #fff); 
     background:-moz-linear-gradient(top, #F6F7F8,#fff); 
     background:-ms-linear-gradient(top, #F6F7F8, #fff); 
     background:-o-linear-gradient(top, #F6F7F8, #fff)
}
.light-gray-box h3{
    font: 400 16px lft-etica;
    color: #000;
    line-height: 1.3
}

.light-gray-box h4{
color: #346c97;
font-size: 30px;
line-height: 1
}

.light-gray-box h5{
color: #111921;
font: 19px Decagram;
padding: 0 0 20px;
line-height: 1
}

.light-gray-box .small-text{font: 26px Camber Regular}

.white-box{
box-shadow: 0px 5px 5px 0px rgba(150,151,152,.35) inset;
-webkit-box-shadow: 0px 5px 5px 0px rgba(150,151,152,0.35) inset;
-moz-box-shadow: 0px 5px 5px 0px rgba(150,151,152,0.35) inset
}

/*------------- Services Icons (DO NOT EDIT) -----------*/
.serv-svg-in{fill:#fff}.serv-svg-off{fill:none}.serv-svg-op{fill:#fff;opacity:.15}
.icon-ls-gradient{fill:url(#ls-gradient)}.icon-as-gradient{fill:url(#ser-gradient)}.icon-tid-gradient{fill:url(#tid-gradient)}.icon-da-gradient{fill:url(#da-gradient)}.icon-cro-gradient{fill:url(#cro-gradient)}

/*------------- GENERIC FORM -------------*/

.form-section{padding-top:60px}
.form-section form{position:relative}
.form-section #form-note{margin:0 0 20px}

.visually-hidden {
    border-width: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important
}

.form-section fieldset .card4-wrapper{
  max-width:100%;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-column-gap:40px
}

.fieldset-heading{margin-bottom:20px}

.form-section input[type="text"], .form-section input[type="email"], 
.form-section input[type="tel"]{
    width: 94%;
    padding:3px 3% 5px 3%;
    height: 25px;
    font: 14px Camber Medium;
    color: #1f3549;
    border:1px solid #ccc;
    border-radius:3px
}
.form-section input[type="tel"]{width:60%;float:left}
.form-section #zip-code-field{width:25%;float:right;padding:3px 2% 5px 3%}

.form-section textarea{
    width: 96.4%;
    padding: 10px 1.5%;
    color: #1f3549;
    border-radius:3px;
    border:1px solid #ccc
}

.form-section textarea::-moz-placeholder {
    color: #626262;
    font: 15px Camber Medium;
}
.form-section textarea:-ms-input-placeholder {
    color: #626262;
    font: 15px Camber Medium;
}
.form-section textarea:-moz-placeholder {
    color: #626262;
    font: 15px Camber Medium;
}
.form-section textarea::-webkit-input-placeholder {
    color: #626262;
    font: 15px Camber Medium;
}

/*---- Select Dropdwon boxes -----*/

.form-section .select-box{
    position: relative;
    width: 99.6%;
    border-radius: 3px;
    height: 25px;
    margin-bottom: 40px
}

.form-section .select-box select{display: none}

.form-section .select-box label, .form-section .fieldset-heading{font:13px Decagram Semibold}
.form-section .select-selected{
    background:#fff;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:3px
}

.form-section .select-selected:after {
  position: absolute;
  content: "";
  top:49px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #7c878e transparent transparent transparent;
  z-index: 100
}
.form-section .select-selected.select-arrow-active:after {
  border-color:transparent transparent #7c878e transparent;
  top:42px
}

.select-items div,.select-selected {
  color: #626262;
  font: 15px Camber Medium;
  padding: 10px 10px 12px 10px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(229, 229, 229) transparent;
  cursor: pointer
}

.select-items div:first-child{
  padding-top: 10px;
  border-top: 1px solid #E5E5E5
}
.select-items {
  position: absolute;
  background: #fff;
  left: 0;
  right: 0;
  z-index:101;
  -webkit-box-shadow: 0 8px 23px -11px #000;
  -moz-box-shadow: 0 8px 23px -11px #000;
  box-shadow: 0 8px 23px -16px #000
}
.select-hide {display:none}
.select-items div:hover, .same-as-selected{background:#ddd}

/*------ CHECKBOXES ------*/
.request-checkboxes {float:left;width:100%}
.request-checkboxes input, #request-checkboxes label{float:left}
.form-section .request-checkboxes input {
    width: 20px;
    height: 22px;
    margin-top: -2px;
    margin-right:10px;
    outline: none;
    -webkit-appearance: checkbox;
    border-radius: 20px
}

.form-section #request-checkboxes label{
    float:none;
    margin-left:5px;
    color:#101820;
}
.checkboxes-wrapper .fieldset-heading{margin-bottom:27px}
.checkbox-div{
    float:left;
    width:40%
}
.checkbox-div:last-child{width:60%}
.checkbox-div div{margin-bottom:20px}
.form-section .checkbox-div label{margin-left:0}

/*----- SUBMIT FORM ------*/

.form-section .submit-consent{
    font: 200 13px Camber Regular;
    color: #bfbfbf;
    margin-bottom:30px
}
.form-section .submit-consent a{color:#fff}

#submit-fieldset{
    display:block;
    width:50%;
    margin-top:20px
}

#form-disclaimer{
    display:block;
    margin-top:40px
}

#form-disclaimer .bold{font-family:Decagram Semibold}

/*//////////// CONTACT FORM ///////////*/
#contact-form-section{
    padding-bottom:80px;
    background: #222b37;
    background-image: url("../img/common/bg-array-pattern-3.svg");
    color:#fff
}

#contact-form .card2-wrapper{
    grid-template-columns: 52% 48%;
    grid-column-gap:55px;
    max-width:100%
}

#contact-form #field-one .card2-wrapper{
    grid-template-columns: 48.5% 48.5%;
    grid-column-gap:20px
}

#contact-form .fieldset-heading{margin:40px 0 0}
#contact-form h4{color:#fff}
#contact-form label{font-size:15px}
#contact-form input[type="text"], #contact-form input[type="email"], 
#contact-form input[type="tel"]{
    margin-bottom: 20px;
    border:0
}

#contact-form .checkbox-div{width:43%}
#contact-form .checkbox-div:nth-child(2){width:55%;margin-top:92px}

#contact-form #select-platform label{font-size:14px}
#select-platform label, #request-checkboxes label{
    margin-left: 10px;
    display: block;
    color: #fff
}
#select-platform p{
    clear:left;
    font: 16px Decagram Semibold;
    color: #fff;
    padding: 0 0 30px 0;
}
#select-platform label em{font:15px Decagram Semibold}
#select-platform p small{color:#bfbfbf}

#contact-form textarea{
    width:97%;
    height:138px;
    margin-bottom:20px;
    border:0
}

#contact-form .select-box{width:auto}
#contact-form .select-selected{border:0}
#contact-form #select-assay-goal .select-items{top:40px}
#contact-form #select-assay-goal .select-selected:after{top:18px}
#contact-form #select-assay-goal .select-selected.select-arrow-active:after{top:10px}

#contact-form #hear-about{width:45%;margin:20px 0 0 0}
#contact-form #hear-about label{
    font:16px Decagram Semibold;
    margin:0 0 10px 0;
    float:none
}


#contact-form #submit-fieldset{margin-top:-80px;width:52%;max-width:725px}
#contact-form #request-checkboxes label{color:#fff}
#contact-form a{color: #fff;text-decoration:underline}
#contact-form #submit-fieldset .request-checkboxes{margin-bottom:15px}

/*------------ Registration Form --------*/
#reg-form .card2-wrapper{
    grid-template-columns: 52% 48%;
    grid-column-gap:20px
}

.form-2col{
    grid-column: col 3 / span 2;
    grid-row: row 2;
    display: grid;
    grid-gap:20px;
    grid-template-columns: 1fr 1fr
}

#reg-submit{margin-top:40px;width:100%}
#reg-form textarea{height:118px}
#reg-form input[type="tel"]{width:94%}

#register-note{font:14px/1.2 Camber Regular;margin-bottom:30px}
#reg-form #request-checkboxes label{color:#fff;margin-bottom:20px}
#reg-form .global-btn{
  border:1px solid #fff;
  color:#fff
}
#register-privacy{
    width:50%;
    font:200 13px Camber Regular;
    margin-bottom:30px
}

/*------------ DIAGRAM WRAPPER AND ITS MOBILE NAV -----------*/
.diagrams-wrapper{
    margin:60px auto 0 auto;
    text-align: center
}

.diagrams-wrapper h4{
    font:21px/1.3 Camber Semibold;
    padding:15px 0;
    color:#101820
}
.diagrams-wrapper p{
    font:16px/1.5 Camber Regular;
    margin-bottom:30px
}

.diagram-mobile-nav {
    display: none;
    position:relative;
    width:100%;
    height:30px;
    float:left
}
.diagram-mobile-nav li{position:relative;cursor:pointer}
.diagram-mobile-nav li:nth-child(1) {
    float:left
}
.diagram-mobile-nav li:nth-child(2) {float:right}
.diagram-mobile-nav svg{
    position:absolute;
    fill:#ccc;
    width:35px
}
.mobile-wrap{transition:transform .3s cubic-bezier(0, .52, 0, 1)}

/*---------------------- TABLE -----------------------*/
.data_table {position: relative}
.data_table th {
    height: 28px;
    font:14px Camber Semibold;
    color: #fff;
    padding: 4px 10px 7px 10px;
    border-left: 4px solid #fff
}
.data_table th:first-child {
    border-left: 0
}
.data_table th.td_green {
    background-color:#93C267
}
.data_table th.td_blue {
    background-color:#346c97
}
.data_table th.td_gray {
    background-color: #a2a2a2;
    color: #181818
}
.data_table td {
    height: 30px;
    padding: 6px 10px 10px 10px;
    text-align:center;
    border-left: 4px solid #fff;
    font: 14px Camber Regular;
    vertical-align: top;
    color: #181818
}
.data_table td:first-child{
    text-align:left;
    font: 14px Camber Regular;
    border-left: 0
}
.data_table tr:nth-child(even) td {
    background: #f1f2f3
}

.table-specs{
    margin:30px 0;
    text-align: left
}

.table-specs ul{
    margin-bottom: 30px
}

.table-specs li{
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.3
}

.table-specs li:first-child{
    font-size: 18px;
    font-weight: 500;
    padding-top: 20px
}

.table-specs b{margin-right:5px}

.table-specs p{
    font-size: 12px;
    font-style: italic
}

.table-break-mobile {display: inline}

/*------------------------------*/
.dropdown-wrap {
    position: relative;
    margin-bottom: 20px;
    height: 20px;
    float: left;
    height: 60px;
    width: 100%
}

.thmb-with-shadow {
    position: relative;
    float: left;
    width: 100%
}

.hover-thmb:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000;
    background-image: linear-gradient(to bottom, #5b5b5b 0%, #000 100%);
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out
}
.hover-thmb img{border:1px solid #ccc}
.hover-thmb:hover:before {
    opacity: 0.7;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out
}
.hover-thmb:hover .download-hover {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out
}
.download-hover {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center
}
.download-hover em {
    border: 1px solid #fff;
    padding: 10px 5%;
    font: 14px Camber Regular;
    color: #fff;
    border-radius:5px
}

.shadow-bg{
    position: relative;
    display: block;
    width: 94%;
    height: 94%;
    padding: 3%;
    -webkit-box-shadow: 1px 1px 3px 2px #ddd;
    -moz-box-shadow: 1px 1px 3px 2px #ddd;
    box-shadow: 1px 1px 3px 2px #ddd
}

/*------------------- PAGINATION -----------------*/
#pagination-section .center-paragraph{width:100%}
.pagination {margin: 0 auto 85px auto}
.pagination .first, .pagination .last{color:#346c97;font-size:16px}
.pagination .first {margin-right:0}
.pagination .last {
    font-size: 16px;
    margin-left: 5px
}
.pagination p {
    display: inline-block;
    font: 500 17px/25px Camber Regular;
    height: 25px;
    margin:0 10px 20px 0;
    padding: 4px 8px;
    text-align: center;
    border-radius: 7px
}
.pagination .prev {
    padding: 0;
    margin: 0 8px;
    font-size: 18px
}

.pagination a {
    font: 17px/32px Camber Regular;
    color: #bfbfbf;
    display: inline-block;
    vertical-align: top
}
.pagination a:hover {
    color: #fff
}
.pagination .first:hover,
.pagination .prev:hover,
.pagination .last:hover,
.pagination .next:hover {
    color: #377476
}
.pagination .numbers {
    display: inline-block;
    margin: 0 10px 0 5px
}
.pagination .numbers a {
    width: 18px;
    height: 20px;
    margin-right: 10px;
    padding: 6px 7px;
    text-align: center;
    line-height: 20px;
    border:1px solid #7c878e;
    border-radius:7px;
    color:#7c878e
}
.pagination .numbers a:last-child {
    margin-right: 0
}
.pagination .numbers a.is-active,
.pagination span a:hover {
    background: #588eb7
}
.pagination .numbers p.is-active {
    background:#346c97;
    color: #fff;
    width: 20px;
    height:26px
}

.page-left-arrow, .page-right-arrow{width:30px;fill:#346c97;vertical-align:middle}
.page-left-arrow{ -webkit-transform: scaleX(-1);transform: scaleX(-1)}

/*----------- BUTTONS -----------*/

.blue-btn, .gray-btn{
    border:0;
    padding:11px 15px 13px 18px;
    color:#fff
}

.blue-btn{background: #346c97}
.gray-btn{background:#53565a}

.blue-btn:hover, .gray-btn:hover{
    color: #fff;
    border:0
}

.blue-btn:hover{background: #588eb7}

.gray-btn:hover{background:#7c878e}

.smooth-hover {
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s
}

/*/////// Resources navigation and Resources styles ///////*/

.docs-nav{margin-bottom:50px}

.docs-nav li{
 display: inline;
 margin-right:20px
}

.docs-nav li:last-child{margin-right:0}

.docs-nav a{font-size:16px;color:#101820;position:relative}

.docs-nav a:hover, .docs-nav .current{color:#346c97}

.docs-nav .arrow-down{
    display: none;
    position: absolute;
    bottom:10px;
    right: 7px;
    fill:#bfbfbf;
    width:15px;
    height:15px;
    vertical-align: middle
}

.related-resources:last-child{margin-bottom:50px}

.related-altbg{background:#f0f1f2}
.related-resources h3 {
    font:30px Camber Regular;
    text-align:center;
    color:#101820;
    margin:35px 0 50px
}

.support-file{
    color: #54565b;
    margin: 25px 0 0 0
}
.doc-type{margin-bottom:10px}

.related-resources .doc-abstract{margin-bottom:30px;color:#54565b}
.document-box .global-btn{
    border:1px solid #346c97;
    border-radius:4px;
    padding:7px 10px 8px 12px;
    font-size:13px;
    color:#346c97
}
.document-box .global-btn:hover{border-color:#588eb7;color:#588eb7}

.document-box .shadow-bg{position:static;box-shadow:1px 1px 10px 2px #ddd;padding:0}

/*-------------------------- SEARCH PAGE --------------------*/
#search-section{
    padding-top:130px;
    padding-bottom:100px
}
#search-section h3{font:normal 20px Camber Medium}
#search-section .left-paragraph, #search-results{
       width: 100%
}
#search-results{
    float: left;
    border-top: 3px solid #346c97;
    padding-top: 30px
}

#search-results section{padding: 0}

.ss360-layer__heading{font:normal 20px Camber Medium}
.ss360-highlight, .ss360-highlight{font:normal 20px Camber Medium}
.ss360-suggests__snippet{font:18px Camber Regular}

/*--------- 404 Page ------*/

#not-found {
    padding-top: 250px;
    padding-bottom: 200px;
    background:url('../img/common/bg-cdi-404-01g.jpg') no-repeat left top;
    background-size: cover
}
#not-found h2{
    font: 118px Camber Regular;
    color: #fff;
    opacity: 0.75
}
#not-found h3{
    font: 20px Camber Light;
    font-style: italic;
    color: #828282
}

/*--------------------- FOOTER -----------------------*/

#page-footer {
    position: relative;
    float: left;
    width: 100%;
    background-image: url('../img/common/Icon-CDI-Labs-Watermark-15.svg');
    background-repeat: no-repeat;
    background:-webkit-linear-gradient(top, #3a434e,#00000f); 
    background:-moz-linear-gradient(top, #3a434e,#00000f); 
    background:-ms-linear-gradient(top, #3a434e,#00000f); 
    background:-o-linear-gradient(top,#3a434e,#00000f);
    padding-bottom: 10px
}

#page-footer::before{
    content: "";
    background-image: url(../img/common/Icon-CDI-Labs-Watermark-15.svg);
    background-repeat: no-repeat;
    background-size:95%;
    position: absolute;
    top: 50px;
    right:0; /* right has to stay 0 */
    bottom: 0;
    left: 56%;
    opacity: .3
}

#page-footer .page-inner{max-width:1500px}

#page-footer .card2-wrapper{
    padding-top:40px;
    grid-template-columns:38% 60%;
    grid-column-gap:90px;
}

#footer-logo{float:left}
#footer-logo svg{
    width: 81%;
    max-width: 300px;
    opacity:.65
}

#footer-logo .cdifl01{fill:#FFFFFF}
#footer-logo .cdifl02{fill:#ED2224}

#footer-subscribe {
    float: left;
    width: 100%;
    margin-top: 50px
}
#subscribe-form{float:left}
#subscribe-form p{
    margin-bottom: 40px;
    font: 16px / 1.7 Camber Regular;
    color: #bfbfbf
}
#subscribe-form h4{
    font: 18px Camber Medium;
    color: #bfbfbf;
    margin-bottom: 10px
}
#subscribe-form #form-error{color:red}
#subscribe-form form{margin-top:20px}
#subscribe-form fieldset{
 position: relative;
 float: left;
 border: 0;
 width: 47%;
 margin-bottom: 9px
}
#subscribe-form fieldset:first-child{margin-right: 3.8%}
#subscribe-form fieldset:nth-child(3){width: 100%}
#subscribe-form label{color:#fff;font-size:14px}
#subscribe-form input[type="text"], #subscribe-form input[type="email"]{
 float:left;
 border-radius:3px;
 width:96%;
 padding:5px 10px;
 height:22px;
 font:14px Camber Medium;
 color:#346c97
}
#subscribe-form span{color:red}

#footer-form p{float:left;padding-top:10px;margin-bottom:0}

#subscribe-btn{
    font: 14px Camber Medium; 
    width: 90px; 
    padding:7px 5px 8px 6px;
    margin-top: 10px;
    background: transparent;
    border: 1px solid #bfbfbf;
    outline: none
}
#subscribe-btn:hover{border: 1px solid #fff}

/*----- Footer Sitemap -------*/

#page-footer .card4-wrapper{
    padding-top:5px;
    grid-template-columns:260px 280px 170px 170px;
    grid-column-gap:0
}

.footer-nav{padding-right:50px}
.footer-nav:nth-child(3){padding-right:20px}
.footer-nav:last-child{padding:0}

.footer-nav h3{
    color: #f7f7f7;
    font: 15px Camber Semibold;
    margin-bottom: 15px
}

.footer-nav ul li {
    color: #f2f2f2;
    margin-bottom: 11px
}

.footer-nav ul li:last-child{margin-bottom:0}

.footer-nav ul li a {
    color: #bfbfbf;
    font: 14px Camber Regular
}
.footer-nav a:hover {color: #fff}

.footer-nav em{
    font: 14px Camber Semibold
}
.footer-nav span{
    font: 14px Camber Regular
}

.footer-nav .footer-nav-btn{margin-top:35px}
.footer-nav .blue-btn {
    font: 14px Decagram Semibold;
    color:#fff;
    padding: 11px 15px 12px 17px
}

.footer-nav .sitemap-note{
 width: 210px; 
 padding-top: 10px; 
 font-size: 13px; 
 color: #7c878e; 
 line-height: 1.3
}

.footer-nav .sitemap-note span{padding-left:9px}

/*---------- footer bottom -----------*/

#footer-middle{margin-top:30px}

#footer-address{color:#bfbfbf}

#footer-address ul li{
    color:#bfbfbf;
    margin-bottom:5px;
    line-height:1
}

#footer-address ul li:first-child{
    font:15px Camber Semibold;
    margin-bottom:10px;
    color:#f7f7f7
}

#footer-address ul li:last-child{margin-bottom:0}

#footer-address ul li a{color:#bfbfbf}
#footer-address ul li a:hover{color:#fff}

#footer-address .footer-address-phone{
    font:14px Camber Medium;
    margin-top: 10px
}

#footer-address .footer-address-btn{margin-top:35px}
#footer-address ul .global-btn{
    font: 12px Decagram Bold;
    color:#bfbfbf;
    padding: 9px 10px 10px 11px
}
#footer-address ul .global-btn:hover{color:#fff}

#footer-social{
    float: left;
    color: #fff;
    margin-top: 0px
}

#footer-social a:hover{
  color: #97E878
}

#footer-social li{
 float: left;
 margin-left: 15px
}

#footer-social li:first-child{
 font: 17px Camber Medium;
 color: #bfbfbf;
 padding-top: 9px;
 margin-left: 0
}

#footer-social li a {
    display: block;
    float: left;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align: center;
    border: 1px solid #bfbfbf
}

#footer-social svg{fill:#bfbfbf}
#tw-footer svg{width:22px;margin-top:8px}
#yt-footer svg{width:27px;margin-top:6px}
#footer-social svg:hover{fill:#fff}

#footer-copyright {
    float:left;
    width:100%;
    font: 13px Camber Light;
    padding: 25px 0 25px 0;
    color: #bfbfbf
}
#footer-copyright em {
    font: 13px Camber Semibold;
    color: #bfbfbf
}
#footer-copyright p {
    display: block;
    padding-bottom: 8px;
    color: #bfbfbf;
    font-weight: 300
}

#footer-legal{
    float: right;
    padding-top:20px;
}
#footer-legal li {
    float: left;
    position: relative;
    margin-right:20px
}
#footer-legal li:last-child {
    margin-right: 0
}
#footer-legal li{
  margin-top: 2px
}
#footer-legal a, #footer-legal li {
    font-size: 14px;
    color: #bfbfbf
}

#footer-legal a:hover {
    color: #fff
}

.grecaptcha-badge{display:none}

/*------------- FORM ERRORS -------------*/
#form-error{
    background: #e66b63;
    padding: 8px 10px;
    color:#fff
}

#error-box {
    float: left;
    width: 100%;
    margin:20px 0;
    color:red
}
#error-box li,
#error-box p {
    font: 16px/1.3 Camber Regular;
    margin:0;
    color: red
}
#error-box li a {color: #1eb0e9}

.no-margin {
    margin-bottom: 0;
    padding: 0;
    margin-top: 0
}
.mobile-nav {
    display: none
}
#last-paragraph {
    margin-bottom: 70px
}
.bottom-space {
    padding-bottom: 20px
}

/*---------------- HAMBURGER BUTTON --------------*/
.hamburger {
    position: absolute;
    padding: 10px 16px 11px 15px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    left: 0;
    top: 50px;
    overflow: visible
}
.hamburger-box {
    width: 45px;
    height: 40px;
    display: inline-block;
    position: relative
}
.hamburger-inner {
    display: block;
    margin-top: -2px
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 46px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease
}
.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block
}
.hamburger-inner::before {
    top: -10px
}
.hamburger-inner::after {
    bottom: -10px
}
.hamburger--collapse .hamburger-inner {
    top: 32px;
    bottom: 0;
    transition-duration: 0.15s;
    transition-delay: 0.15s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear
}
.hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19)
}
.hamburger--collapse.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.32s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
}
.hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear
}
.hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1)
}
#hamburger-btn {
    display: none;
    background: #000
}
.slide-in {
    -webkit-animation: slideIn 0.5s forwards;
    -moz-animation: slideIn 0.5s forwards;
    animation: slideIn 0.5s forwards
}

#sticky-btn{
 position:fixed;
 display:block;
 left:0;
 bottom:25px;
 z-index:601;
 width:106px;
 height:20px;
 padding:10px 10px 12px 18px;
 background:#346c97;
 font:15px Camber Semibold;
 color:#fff;
 text-align:left;
 border-radius:0 25px 25px 0
}

#sticky-btn a{color:#fff}

@-moz-keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.slide-back {
    -webkit-animation: slideBack 0.5s forwards;
    -moz-animation: slideBack 0.5s forwards;
    animation: slideBack 0.5s forwards
}
@-webkit-keyframes slideBack {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@-moz-keyframes slideBack {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes slideBack {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
.reset-outer-ul {
    float: right;
    left: 0
}
#loader {
    position: absolute;
    left: 45%;
    top: 300px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #7d868c;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.zoom-img {
    overflow: hidden;
    float: left;
    margin-bottom: 15px;
}
.zoom-img img {
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}
.zoom-img:hover img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.1);
    transform: scale(1.05);
}

.show-it{display:block}
.hide-it{display:none}

.fade-in {
    -webkit-animation: .7s fadein;
    -moz-animation: .7s fadein;
    -ms-animation: fadein 0.7s;
    -o-animation: .7s fadein;
    animation: .7s fadein;
    opacity: 1
}
@keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.fade-out {
    -webkit-animation: .7s fadeout;
    -moz-animation: .7s fadeout;
    -ms-animation: fadeout 0.7s;
    -o-animation: .7s fadeout;
    animation: .7s fadeout;
    opacity:0
}
@keyframes fadeout {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

/*------------------------------------------------------------------------
------------------------ TABLET & MOBILE STARTS HERE ----------------------------
-------------------------------------------------------------------------*/

@media all and (max-width: 1600px) {
    #social-header,
    #nav-header,
    .hero-section,
    .wide-section,
    #news-trending,
    #page-footer{
        padding-left: 2.5%;
        padding-right: 2.5%;
        width: 95%
    }
    .hero-section .subtitle{padding-top:120px}
    .tall-hero{height:900px}
    .tall-hero section{margin-top:500px}
    .prev-arrow{left:-3%}.next-arrow{right:-3%}

    #page-footer .card2-wrapper{grid-column-gap:70px}
    #page-footer .card4-wrapper{grid-template-columns:240px 250px 160px 150px}
    .footer-nav{padding-right:0}
}

@media all and (max-width: 1550px) {
    #social-header,
    #nav-header,
    .hero-section,
    .wide-section,
    #news-trending,
    #page-footer{
        padding-left: 5%;
        padding-right: 5%;
        width: 90%
    }
    .tall-hero{height:820px}
    .tall-hero section{margin-top:250px}
    .hero-section .subtitle, .hero-section .subheading{padding-top:50px}
    .hero-section .center-hero-content{width:70%}
    
    #logo-wrap{float:left}
    #hamburger-btn {display: block;margin-top:-51px}
    #main-header-wrap {
        position: fixed;
        top: 0;
        opacity: 1;
        filter: alpha(opacity=100)
    }
    #social-header{
        float: none;
        position: fixed;
        height:55px
    }
    #connect-social{float:right}
    #connect-social ul{margin-top:12px}
    #connect-social li:last-child{margin-right:0}

    #global-search{float:none;margin-top:50px}
    #searchBox{
        position: absolute;
        right:0;
        height:60px !important;
        top:71px !important;
        min-width: 100%;
        border-radius:0 !important;
        padding-left:20px
    }
    #unibox-suggest-box{top:133px !important}

    #searchButton{background-size: 90% !important;right:0;top:7px}
    #searchButton svg{
        margin:16px 0 0 0;
        height:30px;
        width:auto;
        fill:#222D38
    }

    #nav-header-bg{display:none}
    #nav-header{
        height:65px;
        margin-top:55px;
        background: #fff;
        box-shadow: 0px 2.8px 5.3px rgba(0, 0, 0, 0.042), 0px 9.4px 17.9px rgba(0, 0, 0, 0.062), 0px 42px 80px rgba(0, 0, 0, 0.11)
    }
    #logo-wrap {
        position: fixed;
        width:50%;
        min-width:350px;
        height:65px;
        left: 0;
        top:55px;
        z-index:2002
    }
    #header-logo {
        margin-left:20%;
        width:230px;
        min-width:230px
    }
    #main-nav {
        position: fixed;
        left: -345px;
        top: 120px;
        width: 345px;
        height: 100%;
        overflow: hidden;
        background: #fff;
        z-index: 1003;
        margin: 0
    }
    #main-nav-wrap{position:static}
    #outer-ul {
        left:0;
        top:0;
        width: auto;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto
    }
    #main-nav li {float:none;padding:0}
    #main-nav ul li a {
        position: relative;
        float: none;
        padding: 15px 30px 17px 20px;
        display: block;
        font-size: 15px
    }
    #main-nav ul li a:hover {
        background: none;
        color: #181818
    }
    .main-link .arrow-down{
        position: absolute;
        right:8%;
        top:20px;
        padding:0;
        width:15px;
        height:15px
    }
    .main-nav-link{border-bottom: 1px solid #53565a}
    .main-link .ul-with-circles a{border:0}
    #current-tab {background:#181818;border-bottom:0}
    #nav-bkg {visibility:hidden;opacity:0}
    #main-nav ul:hover + #nav-bkg {
        visibility: hidden;
        opacity: 0;
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important
    }
    .desktop-link:hover ul {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -ms-transition: none !important;
        -o-transition: none !important;
        transition: none !important
    }
    .sub-menu {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-column-gap:0;
        margin:0;
        padding: 0;
        top: 30px;
        width:343px;
        position: relative;
        visibility:visible;
        opacity:1;
        background: #fff;
        border-bottom: 1px solid #53565a;
        z-index: 1005;
        -webkit-transition: height .8s ease;
        transition: height .8s ease
    }
    .sub-menu:after{display:none}
    .sub-menu ul {
        display: block;
        float: left;
        width: 290px;
        padding: 6px 0 22px 16px
    }
    .single-menu{width:auto}
    #main-nav .sub-menu a:after{display:none}
    #main-nav .sub-menu a {font-size:14px}
    #main-nav .sub-menu a em{font-size:14px}

    #gnb-lab-services,
    #gnb-cro-services,
    #gnb-platforms,
    #gnb-bioinformatics,
    #gnb-resources,
    #gnb-news,
    #gnb-company{
        left:0;
        padding: 0;
        text-align: left
    }
    #gnb-lab-services{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-column-gap:0
    }
    #gnb-lab-services .ul-with-circles:first-child, #gnb-lab-services .ul-with-circles:nth-child(2),
    #gnb-lab-services .ul-with-circles:nth-child(3){padding-right:0}

    #gnb-cro-services{width:auto}

    #main-nav .cat-with-heading ul{padding-top:20px}
    #main-nav .cat-with-heading .nav-app-heading{margin-left:3px}

    #main-nav .ul-with-circles li:before{left:-13px}
    .category-sub ul li:before{display:block}
    #main-nav .cat-with-heading ul:first-child li:before{
        position:relative;
        top:14px;
        left:-15px
    }
    .category-sub .line-break{display:none}
    .sub-menu ul svg, .sub-menu ul img{display:none}
    .category-sub ul{margin:0;padding:5px 0 0 16px}
    .cat-with-heading ul:last-child{padding-bottom:25px}
    #gnb-lab-services ul:last-child{padding:15px 0 15px 16px}

    #main-nav .sub-menu .nav-app-heading, #main-nav #gnb-platforms .nav-app-heading{
        margin-bottom:0;
        border:0
    }
    #main-nav .category-sub ul li, .category-sub ul li a{width:100%;margin:0}
    #main-nav .cat-with-heading ul li{margin:5px 0}

    #main-nav .middle-note{
        position: relative;
        bottom:0;
        width:auto;
        text-align:left
    }
    #main-nav #gnb-platforms .middle-note li, 
    #main-nav #gnb-cro-services .middle-note li{
        width:90%;
        padding:10px 0 20px 5px;
        text-align:left;
    }
    #main-nav .sub-menu .menu-note{
        width:auto;
        padding:0 0 0 22px
    }

    /*--------- OPEN - CLOSE MOBILE SUBMENU ------*/
    .slide-up{
      height:0;
      visibility:hidden;
      opacity:0
    }

    .mobile-contact{
        position:relative;
        display: block;
        margin: 35px 10px 0 10px
    }
    #main-nav .mobile-contact a{
        font: 14px Decagram Medium;
        padding: 9px 0 10px 1px; 
        text-align: center; 
        min-width: 100px; 
        width: 110px;
        border:1px solid #54565b
    }
    #main-nav .mobile-contact a:hover{border:1px solid #181818}

    #contact-form #submit-fieldset{width:52%}

    #page-footer .card2-wrapper{grid-column-gap:40px}
}

@media all and (max-width: 1440px) {
    #page-footer .card2-wrapper{
        grid-template-columns:35% 55%
    }
    #footer-legal{
        float:left;
        width:100%;
        margin-bottom:50px
    }
}

@media all and (max-width: 1365px) {
    #press-release{
       background:#F0F1F2;
       height:100%;
       text-align: center
    }
    #press-date{
     min-width:auto;
     border-top-right-radius:0;
     border-bottom-right-radius:0
    }
    #press-release p{padding:0}
    #press-date:before, #press-release p span{display:none}

    #press-date, #press-release .view-all{
     position:relative;
     float:left;
     width:100%;
     padding:0;
     margin-top:30px;
     height:auto;
     text-align:center;
     background:#F0F1F2
    }

    #press-release ul{left:0;top:40px;width:100%}
    #press-release li a{font-size:17px;padding:0}
    .press-row li span{width:auto}
    .press-row li a em{margin-left:20px}
    #press-release li a span:first-child{padding:0}
    #press-release .view-all{top:0;min-width:auto;right:5px;margin:50px 0 35px 0}

    #huprot-sample-req .card6-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
        grid-row-gap: 30px;
    }

    #page-footer .card2-wrapper{
      grid-template-columns:repeat(auto-fill, minmax(100%, 1fr));
      grid-row-gap:0
    }
    #subscribe-form{width:60%;margin-bottom:50px}
    #footer-middle{margin-top:50px}
    #page-footer .card4-wrapper{
      grid-template-columns:300px 320px 220px 200px;
    }
}

@media all and (max-width: 1285px) {
   .short-hero{height:400px;background-size:cover}
   .short-hero section{margin-top:210px}
   .hero-section h1 {font-size:30px}
   .hero-section .subtitle {font-size:20px;padding-top:0px}
   .hero-section p {font-size:17px}
   #static-ticker ul{width:90%;max-width:100%}
   .section-margins .card5-wrapper {
      grid-template-columns: repeat(auto-fill, minmax(25%, 1fr))
   }

    #not-found {
        margin: 0;
        height:500px;
        padding-top:150px;
        padding-bottom:0
    }

    .center-paragraph, .video-section .center-paragraph{width:80%}

    .sample-req .card4-wrapper{
      grid-column-gap:25px
    }

    #contact-form .card2-wrapper{grid-template-columns:60% 39%}
    #contact-form .checkbox-div, #contact-form .checkbox-div:nth-child(2)
    {width:100%;float:none}
    #contact-form #hear-about{width:70%}
    #contact-form #submit-fieldset{width:60%;margin-top:-200px}
}

@media all and (max-width: 1170px) {
    #page-footer::before{background-size:100%}
    #footer-social{margin-top:50px}
}

@media all and (max-width: 1150px) {
    .sample-req .card4-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(45%, 1fr));
        grid-row-gap: 50px
    }
}

@media all and (max-width: 1120px) {
    .hero-section .center-hero-content{width:100%}
    .form-section fieldset .card4-wrapper{grid-column-gap:20px}
    #submit-fieldset{width:100%}

    .section-with-sidebar {background: #fff}
    #left-sidebar {width: 100%;min-height:auto}
    #right-sidebar {
        position: relative;
        float: left;
        width: 100%;
        padding-bottom: 10%
    }
    #right-sidebar:after, #right-sidebar:before {
        content: '';
        position: absolute;
        background: #f0f1f2;
        width: 5.5%;
        height: 100%
    }
    #right-sidebar:before {left:-5.5%}
    #right-sidebar:after {right:-5.5%}
    #right-sidebar div {margin-top:5%;padding:0}

    .card6-wrapper{
      grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
      grid-row-gap:30px
    }
    #main-nav .sub-menu{
      grid-template-columns: repeat(1, minmax(100%, 1fr));
      grid-row-gap:0
    }

    .pagination{margin-bottom:0}

    #page-footer .card4-wrapper{
        grid-template-columns:30% 30% 23% 17%;
        grid-column-gap:0
    }
    .footer-nav{padding-right:50px}
    .footer-nav:nth-child(3){padding-right:80px}
}

@media all and (max-width: 1080px) {
    .hero-section h1 {font-size:30px}
    #static-ticker{height:135px}
    #static-ticker ul{width:100%;text-align: center}
    #static-ticker li{float:none;white-space:normal;margin-bottom:20px}

    #contact-form .card2-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
    #contact-form #field-one .card2-wrapper {
        grid-template-columns: 35% 35%
    }
    #contact-form #hear-about, #contact-form #submit-fieldset{width:72%}
    #contact-form #submit-fieldset{margin-top:70px;max-width:100%}

    .card2-wrapper .column-box:first-child img{
        max-width: 550px;
        margin-bottom: 25px
    }

    #page-footer::before{left:35%}
    #page-footer .card4-wrapper{grid-template-columns:30% 30% 20% 20%}
    .footer-nav, .footer-nav:nth-child(3){padding-right:30px}
}

@media all and (max-width: 1024px) {
    #press-release li a span:first-child{
        display:block;
        line-height:26px;
        padding:0;
        margin-top: 10px;
        white-space:normal
    }
    #press-release li span{margin-left:0}
    #press-release li em{display:block;margin-left:0}
    #press-release .view-all{
        top:70px;
        margin:50px 0 110px 0
    }
    .form-section fieldset .card4-wrapper{grid-column-gap:20px}
    #register-privacy{width:100%}
    #customer-slide{height:500px}
    #customer-slide .page-inner{height:445px}
}

@media all and (max-width: 910px) {
    #header-logo {margin-left:90px}
    #customer-slide{height:580px}
    #contact-form #field-one .card2-wrapper{
        grid-template-columns:48.7% 48.7%
    }
    #contact-form #hear-about, #contact-form #submit-fieldset{width:100%}

    #huprot-sample-req .card6-wrapper{grid-column-gap:40px}

    #reg-form .card2-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-column-gap:0
    }
    #reg-inquiry{margin-top:20px}
    #reg-form textarea{width:97%}

    #subscribe-form{width:80%}
    #page-footer .card4-wrapper{grid-template-columns:50% 50%}
    .footer-nav, .footer-nav:nth-child(3){padding:0 0 50px}
    .footer-nav .sitemap-note{width:auto}
    #footer-middle{margin-top:30px}
}

@media all and (max-width: 845px) {
    .hero-section .left-hero-content p{width:80%}
    .hero-section .global-btn {
        padding: 8px 18px 10px 20px;
        width: 95px;
        font: 13px Camber Medium;
        outline: none
    }
    .hero-section video {display: none}
    #static-ticker{height:170px}
    #static-ticker li span:first-child, #static-ticker li span:last-child{display:block}

    .section-margins .card5-wrapper {
      grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
      grid-column-gap:0
    }

    #customer-slide{height:600px}
    .text-paragraph, .right-paragraph{width:100%;float:left}
    .text-paragraph h3, .text-paragraph h4{margin: 3% 0}

    #footer-legal{float:left;width:100%}

}

@media all and (max-width: 770px) {
    .short-hero{background-position:center top}
    #not-found {height: 400px}
    #not-found h2{font-size: 70px;padding-top: 10px}
    #not-found h3{font-size: 18px}

    .form-section .card3-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(50%, 1fr))
    }
    .form-section fieldset .card4-wrapper{
      grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
      grid-column-gap:20px
    }
    .form-section input[type="text"], .form-section input[type="email"],
    .form-section input[type="tel"], .form-section #zip-code-field{
        width:95%;
        padding: 3px 2.2% 5px 2.5%
    }
    .form-section #zip-code-field{float:none}
    .form-section .select-box{width:100%}
    .form-section .select-items div, .form-section .select-selected{
        padding-left:2%;
        padding-right:2%
    }

    #contact-form #field-one .card2-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
}

@media all and (max-width: 736px) {
    .short-hero section{margin-top:180px}
    #social-header{background:#fff}
    #connect-social{display:none}
    #nav-header{margin-top:0}
    #logo-wrap{top:0}
    #global-search{
        position: fixed !important;
        right:0px;
        top:0;
        z-index: 2004;
        margin-top:0;
        width: 100%
    }
    #searchButton{width:40px}
    #searchButton svg{margin-top:10px}
    #searchBox{top:65px !important}
    #unibox-suggest-box{top:125px !important}
    #main-nav{top:65px}

    .hero-section p{width:100%}
    #press-release .view-all{top:100px;margin-bottom:135px}
    #customer-slide h4{font:300 26px/1.3 'rocky';color:#54565b}

    .center-paragraph, .video-section .center-paragraph{width:95%}

    .card6-wrapper{
      grid-template-columns: repeat(auto-fill, minmax(40%, 1fr))
    }

    #subscribe-btn{margin: 10px auto 0 auto}
    .diagram-mobile-nav{display:block}
    .diagrams-wrapper{width:100%}
    .mobile-fig-wrapper{overflow:hidden;width:100%;position:relative}
    .mobile-wrap{min-width:770px;width:100%;position:relative;margin-top:50px}
}

@media all and (max-width: 670px) {
    .hero-section {
        text-align: center;
        height: auto;
        margin: 0;
        max-height:750px;
        overflow: hidden
    }
    .hero-section section {
        font-size:29px;
        margin:30% 0;
        text-align: center;
        width:100%
    }
    .hero-section h1{text-align:center;margin-bottom:5%}
    .hero-section .left-hero-content p, .hero-section p{width:100%}
    .line-break{display:inline}
    .mobile-line-break{display:block}
    .short-hero section{margin-bottom:20%;width:100%}
    .short-hero, #contactcdi-form, #contactcdi-form h1{
        text-align: center;
        margin-bottom:0
    }
    #customer-slide{height:640px}

    .card2-wrapper, 
    .section-margins .card2-wrapper{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
    .card2-wrapper .line-break{display:block}

    .sample-req .card4-wrapper, #huprot-sample-req .card6-wrapper{
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        grid-column-gap:0
    }

    .data_table th {font-size:16px}
    .data_table td, .data_table td:first-child {font-size: 14px}

    #pagination-section{padding:0}
    #not-found {
     height: auto;
     max-height: 600px;
     padding-top:10%;
     padding-bottom:20%
    }
    
    #subscribe-form{width:100%}
}

@media all and (max-width: 620px) {
    #main-nav .nav-heading a{width: 80%}
    .center-paragraph h2 {font-size: 32px;line-height: 1.3}
    .form-2col{grid-template-columns:repeat(auto-fill, minmax(100%, 1fr))}
    #reg-form input[type="tel"]{width:95%}
}

@media all and (max-width: 570px) {
    #social-header,
    #nav-header,
    .hero-section,
    .wide-section,
    #news-trending,
    #page-footer {
        padding-left: 5%;
        padding-right: 5%;
        width: 90%
    }
    #static-ticker li span:last-child{display:inline}
    #customer-slide{height:730px}
    #customer-slide .page-inner{height:690px}
    #subscribe-form fieldset {width: 100%}
    .hero-section section{margin-top:45%}
    .hero-section h1 {font-size:28px}
    .prev-arrow{left:-3%} .next-arrow{right:-3%}
    .card1-wrapper .document-box{max-width:100%}
}

@media all and (max-width: 530px) {
    #main-nav ul li a {font-size:14px}
    .hero-section {height: auto}
    #contact-form #hear-about{width:100%}
    #contact-form .request-checkboxes label{font-size:13px}
    #contactcdi-form .request-checkboxes label{font-size:13px}
    #request-checkboxes input{padding:0}
}

@media all and (max-width: 500px) {
    .data_table th {font-size: 15px}
    .data_table td, .data_table td:first-child {font-size: 14px}
}

@media all and (max-width: 470px) {
    #header-logo {
        margin-left:85px;
        padding-top:3px;
        width:200px;
        min-width:200px
    }
    #searchButton svg{margin:14px -10px 0 0}
    .hero-section .left-hero-content p{line-height:1.3;margin-bottom:25px}
    .mobile-line-break{display:block;padding-top:8px}
    #customer-slide{height:880px}
    #page-footer .card4-wrapper{grid-template-columns:repeat(auto-fill, minmax(100%, 1fr))}
    .footer-nav, .footer-nav:nth-child(3){padding:0 0 35px}
    #footer-middle{margin-top:80px}
}

@media all and (max-width: 436px) {
    .data_table th {font-size: 17px}
    .data_table th, .data_table td {text-align:left;padding: 11px 4px}
    #request-checkboxes label{
        margin-left:0;
        font-size: 13px;
        float:none;
        text-align:left
    }
    #request-checkboxes input{padding:0;margin-right:10px}
    #request-checkboxes{margin-bottom:10%}
}

@media all and (max-width: 340px) {
    #header-logo {margin-left:85px;padding-top:5px;width:175px;min-width:165px}
    .hero-section h1 {margin-left: -5%}
}

@media only screen and (min-device-width: 320px) and (max-device-width: 736px) {
    .col2 p, .col4 p{font-size:16px}
}