/*----- PRODUCTS HERO SECTION ------*/
.hero-section .product-icon{
   width:180px;
   margin-bottom:35px
}
.products-hero section{
    position:absolute;
    left:0;
    top:350px;
    margin:0;
    max-width:670px;
    z-index:5
}
.products-hero h1{font-size:29px}
.products-hero .cdilabs-watermark{
    position:absolute;
    left:-100px;
    top:110px;
    width:400px;
    z-index:4
}
.products-hero .human-icon{width:280px}

.products-hero p{width:100%}

.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
}

/*------ Text description below graph -------*/
.fig-note{
    width:70%;
    margin:45px auto;
    font:15px/1.5 Camber Regular;
    text-align:justify
}
.fig-note em{
    font:17px Camber Medium;
    color:#101820;
    text-align:justify
}

/*-------- 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:20px 0 40px
}
.section-footer h3 em{color:#fff;font:30px Decagram Semibold}
.section-footer span{margin-right:5px;vertical-align:middle}
.section-footer a img{width:25px;vertical-align:middle}

.dark-footer{background:#212B36}
.dark-footer h3{color:#ddd}
.dark-footer a{
    font-size:15px;
    border-color:#ddd;
    color:#ddd;
    padding:8px 15px 10px 11px
}
.dark-footer a:hover{border-color:#fff}

/*------ DEFAULT COLUMN STYLES ------*/
.col2 h4{font:24px Camber Regular;margin-bottom:20px}
.col2 h5{margin-bottom:20px}
.col2 h5 span{font-size:14px;margin-bottom:5px}

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

.section-margins{padding-bottom:110px} /* deafult bottom can be change in ech section id */
.dark-blue-section{color:#fff}
.dark-blue-section h2{margin-bottom:2px}
.dark-blue-section .col-wrapper p{color:#bfbfbf;margin:0 0 15px 0}
.dark-blue-section .col2{text-align:left}
.dark-blue-section .col2 p{font-family:Camber Light}

.diagrams-wrapper{width:63%}

.center-paragraph p{
    font:17px/1.7 Camber Light;
    margin:40px 0 0
}
.center-paragraph p em{
    font:normal 19px Camber Medium;
    color:#1f3549;
    padding:0 2px
}
/*//////// HuProt styles //////////*/

/*--- HuProt 1st horizontal graph -----*/
#products-1-section-1 .diagrams-wrapper{width:80%}

/*----- HuProt Reproducible Protein Distribution ----*/
#products-1-section-3 .center-paragraph img{
    width:40%;
    min-width:300px;
    margin-top:20px
}
.video-section p{margin-bottom:40px}

#products-1-section-32{background:#000;padding-top:85px}
#products-1-section-32 .col2{text-align:left}
#products-1-section-32 .col2:first-child{width:45%;padding-right:0}
#products-1-section-32 .col2 h2{
      font:36px Camber Regular;
      letter-spacing:-.3px;
      line-height:1.3
  }
#products-1-section-32 .col2:first-child img{margin-top:10px}
#products-1-section-32 .col2 p{
    font:17px/1.7 Camber Light;
    color:#fff
}

/*--- HuProt last double diagram ------*/
#products-1-section-4 .diagrams-wrapper{width:100%}
#products-1-section-4 .fig-note{margin:50px auto 20px;font:15px/1.5 Camber Regular}

/*-------- HuScan, MouseScan and VirScan diagram-------*/
.scan-wrapper{min-width:800px}

/*-------- VirD ---------*/
#products-5-section-11 .diagrams-wrapper{width:60%;min-width:750px}
#products-5-section-11 .diagrams-wrapper:nth-child(3){
    width:95%;
    margin:80px auto 0 auto
}

/*---------------- RELATED RESOURCES ---------------*/
#related-literatures{overflow-x:hidden;padding-bottom:0;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:10px;margin-left:35px}
#related-videos{background:#f0f1f2}
.docs-wrap-2col{width:100%}
.col2-docs{margin-right:7%}

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

@media all and (max-width: 1410px) {
 .products-hero section{
   top:185px
 }
}

@media all and (max-width: 1310px) {
 .products-hero section{
   top:185px
 }
}

@media all and (max-width: 1285px) {
 .hero-section h1{font-size:33px}
}

@media all and (max-width: 1150px) {
 .products-hero section{top:185px} 
  #products-1-section-1 .diagrams-wrapper{width:100%}
}

@media all and (max-width: 1080px) {
    .products-hero section h1{width:100%}
    .center-paragraph h2{width:100%}
    .scan-wrapper{width:100%;min-width:auto}
    .fig-note{width:100%}
    #products-1-section-32 .col2, #products-1-section-32 .col2:first-child{width:100%;padding:0}
    #products-1-section-32 .col2:first-child img{max-width:550px;margin-bottom:25px}
    #products-5-section-11 .diagrams-wrapper{width:80%;min-width:auto}
    #related-publications .col4-docs:nth-child(odd){margin-right:5%}
    #related-publications .col4-docs:nth-child(even){margin-right:0}
}

@media all and (max-width:736px) {
 .diagrams-wrapper, #products-1-section-1 .diagrams-wrapper, #products-1-section-4 .diagrams-wrapper,
 #products-5-section-11 .diagrams-wrapper{width:100%}
}

@media all and (max-width:700px) {
 .hero-section .product-icon{
   width:140px;
   margin-bottom:20px
 }
}

/* ---- HERO SECTION CENTERED --*/
@media all and (max-width:670px) {
   .products-hero h1{font-size:30px}
   .products-hero{height:650px}
   .products-hero section{top:115px}
   .hero-section .subtitle{line-height:1.3}
    #related-publications .col4-docs:nth-child(odd){margin-right:0}
   .docs-section img{min-width:auto}
   .docs-section h4{margin-top:12px}
}