.services-hero section{
   position:absolute;
    left:0;
    top:350px;
    margin:0;
    max-width:740px;
    z-index:5
}
.services-hero h1{
    font-size:33px;
    line-height:1.3
}
.services-hero p{width:100%}

.services-hero .cdilabs-watermark{
    position:absolute;
    left:-100px;
    top:100px;
    width:400px;
    z-index:4
}
#antibody-development .cdilabs-watermark{width:600px}
#antibody-development section{top:500px}

.services-hero .human-icon{width:280px}

.hero-section .services-icon{
   width:180px;
   margin-bottom:35px
}

.hero-section video{
    position: absolute;
    top: -60px;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    min-width: 100%;
    margin: auto;
    overflow: hidden;
    pointer-events: none;
    opacity: 1;
    object-fit: cover;
    z-index: 0
}

.video-section p{margin-bottom:40px}

/*------ Text description below graph -------*/
.fig-note{
    margin-top:30px;
    font:15px Camber Light;
    text-align:justify
}
.fig-note em{
    font:16px Camber Medium;
    color:#101820;
    text-align:justify
}

/*//////////// SECTIONS STYLES //////////*/

.section-margins{padding-bottom:100px} /* deafult bottom can be change in ech section id */

.diagrams-wrapper{
    width:90%;
    margin:40px auto 80px auto
}
.diagrams-wrapper h4{padding:20px 0 15px}
.center-paragraph p{
    font:17px/1.6 Camber Light;
    margin:30px 0 45px
}
.center-paragraph p em{
    font:19px Camber Medium;
    color:#1f3549;
    padding:0 2px
}
/*-------- SECTION FOOTER OR HEADER -----------*/
.section-footer{
	position:relative;
	padding:40px 0 60px 0;
	width:100%;
    text-align:center;
    background:#fff
}
.section-footer:before, .section-footer:after{
	content:'';
	position:absolute;
	top:0;
	width:3000px;
	height:100%;
    background:#fff
}
.dark-footer:before, .dark-footer:after{background:#212B36}
.section-footer:before{left:-3000px}
.section-footer:after{right:-3000px}
.section-footer h3{
	font:24px Decagram Medium;
	margin-bottom:40px
}
.section-footer h3 em{color:#fff;font:34px Camber Medium;padding:0 5px}
.section-footer span{margin-right:5px;vertical-align:middle}
.section-footer a img{width:25px;vertical-align:middle;padding-bottom:3px}

.dark-footer{background:#212B36;margin-top:60px}
.dark-footer h3{color:#bfbfbf}
.dark-footer em{font-size:28px}
.dark-footer a{
    font-size:16px;
	border-color:#ddd;
	color:#ddd;
	padding:11px 16px 13px 16px
}
.dark-footer a:hover{border-color:#fff}

/*------ DEFAULT COLUMN STYLES ------*/
.column-box h4{font:28px Camber Light;margin:35px 0 15px}
.column-box h5{margin-bottom:35px;font:21px Camber Light}
.column-box h5 a{color:#fff}
.column-box h5 span{font:16px Camber Medium;margin-bottom:5px;color:#839fb5}

/*------------ DARK BLUE SECTION WITH DOWNLOAD BUTTON ------*/
.dark-blue-section{color:#fff}
.dark-blue-section h2{margin-bottom:20px}
.dark-blue-section .column-box p{
    font:16px/1.6 Camber Light;
    color:#bfbfbf;
    margin:0 0 15px 0
}
.dark-blue-section .column-box{text-align:left}

/*-------- HuProt Microarray ---------*/
#services-16-section-30{overflow-x:hidden;padding-bottom:0}
#services-16-section-30 .diagrams-wrapper{width:95%}
#services-16-section-30 p{padding-bottom:25px}
#services-16-section-31 h2{font:300 35px Decagram VF;margin-top:45px}

/*-------- HuScan PhIP-Seq ---------*/
#services-14-section-27{overflow-x:hidden;padding-bottom:0}
#services-14-section-28 h2{font:300 35px Decagram VF;margin-top:45px}

/*-------- MouseScan PhIP-Seq ---------*/
#services-17-section-33{overflow-x:hidden;padding-bottom:0}
#services-17-section-37 h2{font:300 35px Decagram VF;margin-top:45px}

/*-------- VirScan PhIP-Seq ---------*/
#services-18-section-34{overflow-x:hidden;padding-bottom:0}
#services-18-section-39 h2{font:300 35px Decagram VF;margin-top:45px}

/*-------- VirD Array ---------*/
#services-19-section-35{overflow-x:hidden;padding-bottom:0}
#services-19-section-38 h2{font:300 35px Decagram VF;margin-top:45px}

/*-------- Antibody Development ---------*/
#services-20-section-36 .diagrams-wrapper, #services-20-section-40 .diagrams-wrapper{
    width:100%;
    margin:40px auto 0 auto
}
#services-20-section-36 .diagrams-wrapper p{margin-bottom:60px}
#services-20-section-40 .diagrams-wrapper{margin:0 auto}

.card6-wrapper .column-box{
    text-align:center;
    position:relative;
    color:#101820
}
#services-20-section-36 .column-box:after{
    content:'';
    position:absolute;
    width:20px;
    height:40px;
    right:-20px;
    top:60px;
    background: url("../img/main/customer-arrow-right.svg") no-repeat left top;
}
#services-20-section-36 .column-box:last-child:after{background:none}
.col6-header{
    margin-bottom:25px;
    background:#1f3549;
    border-radius:5px;
    padding:8px 0;
    color:#fff
}
.column-box .col6-header h4{
    margin:0;
    font:20px Camber Medium;
    padding-bottom:2px
}
.card6-wrapper .column-box h5{font:18px Decagram Medium;margin-bottom:15px}
.card6-wrapper .column-box h6{font:16px Camber Medium;margin-bottom:15px}
.card6-wrapper .column-box p{color:#54565b;font:15px/1.5 Camber Regular}

/*---------------- RELATED RESOURCES ---------------*/
#related-literatures{overflow-x:hidden;background:#f0f1f2}
#related-literatures .doc-type, #related-literatures .support-file{float:left}
#related-literatures .doc-type{margin-right:5px}
.related-resources .doc-type img{width:25px;vertical-align:bottom;margin-right:5px}
.related-resources .doc-type .pdf-icon{width:22px}
.related-resources .doc-type .film-icon{width:26px}
.doc-type{margin-bottom:0}
.support-file{margin-top:7px;margin-left:35px}
#related-videos{background:#f0f1f2}
 .related-resources h3{margin:35px 0 80px 0}
 .docs-wrapper{margin:30px auto 60px auto}

/*//////////// RESIZE MEDIA STYLES ///////////*/
@media all and (max-width: 1600px) {
 .services-hero section{
    top:325px
 }
 .hero-section .subtitle{padding-top:5px}
}

@media all and (max-width: 1410px) {
 #antibody-development section{top:365px}
 .services-hero section{
   top:185px
 }
}

@media all and (max-width: 1310px) {
 .services-hero section{
   top:185px
 }
}
@media all and (max-width: 1285px) {
 .hero-section h1{font-size:33px}
}
@media all and (max-width: 1150px) {
 .services-hero section{top:185px} 
  #services-20-section-36 .column-box:nth-child(3):after{background:none}
  .center-paragraph .line-break{display:inline}
}

@media all and (max-width: 980px){
  .hero-section section{width:100%}
}
@media all and (max-width: 945px) {
 #antibody-development section{top:325px}
}
@media all and (max-width: 850px) {
 .hero-section .line-break{display:inline-block}
 #antibody-development section{top:365px}
}

@media all and (max-width:736px) {
 .hero-section section{width:100%}
 #services-20-section-36 .column-box:after{right:-20px}
 #services-20-section-36 .column-box:nth-child(2):after,
 #services-20-section-36 .column-box:nth-child(4):after{background:none}
 #services-20-section-36 .column-box:nth-child(3):after{
    background: url("../img/main/customer-arrow-right.svg") no-repeat left top
 }
 .diagrams-wrapper, #services-16-section-30 .diagrams-wrapper, #services-20-section-36 .diagrams-wrapper{width:100%}
}

@media all and (max-width:700px) {
 #antibody-development section{top:265px}
 .hero-section .service-icon{
   width:140px;
   margin-bottom:20px
 }
}

@media all and (max-width:670px) {
   .services-hero h1{font-size:30px}
   .services-hero{height:650px}
   .services-hero section{top:115px}
   .hero-section .line-break{display:inline}
   #services-20-section-36 .column-box:after{right:-17px}
}
@media all and (max-width:330px) {
   .dark-footer a{font-size:14px;padding:7px 12px 9px 12px}
}