/*----- PRODUCTS HERO SECTION ------*/
.hero-section .products-icon{
   width:180px;
   margin-bottom:35px
}
.tall-hero section{
    position:absolute;
    left:0;
    top:350px;
    margin:0;
    max-width:670px;
    z-index:5
}

.short-hero section{margin-top:180px}

.products-hero h1{font-size:28px;line-height:1.3}
.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
}

.press-row li span{width:auto;margin-right:15px}

/*------ 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 ------*/
.column-box h4{font:24px Camber Regular;margin-bottom:20px}
.column-box h5{margin-bottom:20px}
.column-box 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 .column-box p{color:#bfbfbf;margin:0 0 15px 0;font-family:Camber Light}
.dark-blue-section .column-box{text-align:left}

.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%}
#products-1-section-1 #legend-container{
  margin-left:180px;
  padding-bottom:50px;
}
#products-1-section-1 li{
  float: left;
  position: relative;
  padding-left:40px;
  text-align:left;
  font:14px Camber Medium
}
#products-1-section-1 li:first-child{margin-right:50px}
#products-1-section-1 li .hp-lbox{
    display:inline-block;
    position: absolute;
    left:0;
    top:0;
    width:30px;
    height:30px
}
#products-1-section-1 li .line-break{
    font:14px Camber Light
}

/*----- 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}

/*----- Full length proteins... ------*/
#products-1-section-32{background:#000;padding-top:85px}
#products-1-section-32 .column-box{text-align:left}
#products-1-section-32 .column-box h2{
      font:36px Camber Regular;
      letter-spacing:-.3px;
      line-height:1.3;
      margin-bottom:25px
  }

#products-1-section-32 .column-box 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-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}
 .docs-wrapper{margin:30px auto 60px auto}

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

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

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

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

@media all and (max-width: 1150px) {
 .tall-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-5-section-11 .diagrams-wrapper{width:80%;min-width:auto}
}

@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
 }
 .section-margins .card2-wrapper{grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))}
}

/* ---- HERO SECTION CENTERED --*/
@media all and (max-width:670px) {
   .products-hero h1{font-size:30px}
   .tall-hero{height:650px}
   .tall-hero section{top:115px}
   .hero-section .subtitle{line-height:1.3}
}