body {background:#e6e6e6;}
/**************************************
VIDEO
****************************************/
.hero-video {background-color:#000;}
.video-mobile-low-search {background-color:#000;}
.video-mobile {background-color:#000;}
.video-tablet {background-color:#000;}
.video-desktop {background-color:#000;}
/**** Re the below: border:0 stops horiz middle white border before video loads*****/
.video-mobile-low-search #video-mob-low {left:0 top:0; width:100vw; background-color:#000; border:0; background-image:url(images/homepage/video/video-mobile-bkgrnd-image-01.webp); min-height:100vw;} 
.hero-video .video-mobile-low-search {background-color:#000;}
.video-mobile #video-mob {left:0 top:0; width:100vw; background-color:#000; border:0; background-image:url(images/homepage/video/video-mobile-bkgrnd-image-01.webp); min-height:100vw;}
.video-tablet #video-tab {left:0 top:0; width:100vw; background-color:#000; border:0; background-image:url(images/homepage/video/video-tablet-bkgrnd.webp); min-height:100vw;}

@media only screen and (min-width: 1101px){
    .video-mobile {display:none !important;}
    .video-mobile-low-search {display:none !important;}
    .video-tablet {display:none !important;}
    }
@media only screen and (min-width: 525px) and (max-width: 1100px) {
    .video-mobile {display:none !important;}
    .video-mobile-low-search {display:none !important;}
    .video-desktop {display:none !important;}
    }
@media only screen and (min-width: 411px) and (max-width: 525px) {
    .video-tablet {display:none !important;}
    .video-desktop {display:none !important;}
    .video-mobile-low-search {display:none !important;}
    }
@media only screen and (max-width: 411px) {
    .video-tablet {display:none !important;}
    .video-desktop {display:none !important;}
    .video-mobile {display:none !important;}
    }



/***********************
Hero header text - 'Book finishing Systems' and 'In-line & Offline... binding'
***********************/
.hero-header-text-container {
    position: fixed;
    bottom: 130px; /* distance up of button from bottom of window */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:1;
}
@media (max-width: 768px) {.hero-header-text-container {bottom: 110px;}}  


/**********************
hero header text sizes
***********************/
/*** h1 ***/
.hero-header-text h1 {font-family:Questrial; text-align: center; color:#fff; font-weight:400;  text-shadow: 1px 1px 2px #000; font-size: calc(2vw + 2rem); line-height: calc(2vw + 2rem);}  /**calc(5rem); line-height: calc(4.8rem);**/

@media only screen and (max-width:1600px) {.hero-header-text h1 {font-size: calc(2.3 vw + 2.3rem); line-height: calc(2.2vw + 2.2rem);}}

@media only screen and (max-width:1000px) {
    .hero-header-text h1 {font-size: calc(2.2vw + 2.2rem); line-height: calc(2.2vw + 2.2rem);}}
@media only screen and (max-width:750px) {
    .hero-header-text h1 {font-size: calc(2vw + 2rem); line-height: calc(2vw + 2rem);}}

@media only screen and (max-width:400px) {
    .hero-header-text h1 {font-size: calc(1.8vw + 1.8rem); line-height: calc(1.8vw + 1.8rem);}}

/*** h2 ***/
.hero-header-text h2 {font-family:Questrial; text-align: center; color:#bdc1cc; font-weight:400; text-shadow: 1px 1px 1px #000; padding-top:10px; font-size: calc(1.1vw + 1.1rem); line-height: calc(1vw + 1rem);}

@media only screen and (max-width:768px) {.hero-header-text h2 {color: #fff;}}
/******************* 
Hero Links
********************/
.hero-links {
    position: fixed;
    bottom: 25px; /* distance up of button from bottom of window */
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:1;
}    
@media (max-width: 768px) {.hero-links {bottom: 6px;}}   
/*** 3 cols within 'hero-links' div ***/
    .hero-links-1, .hero-links-1-imgl {width:38%; padding:0; background:transparent;}
    .hero-links-2, .hero-links-2-imgl {width:34%; padding:0; background:transparent;}
    .hero-links-3, .hero-links-3-imgl {width:38%; padding:0; background:transparent;}
    .hero-links-3 {padding-top:0.1vw;} /***adjusts height of right hand col rel to left-hand col***/
@media only screen and (max-width: 1390px) {
    .hero-links-1, .hero-links-1-imgl {width:38%;}
    .hero-links-2, .hero-links-2-imgl {width:24%;}
    .hero-links-3, .hero-links-3-imgl {width:38%;}
     } 
@media only screen and (max-width: 700px) {
    .hero-links-1, .hero-links-1-imgl {width:38%;} /**** 35  30 35 ****/
    .hero-links-2, .hero-links-2-imgl {width:24%;}
    .hero-links-3, .hero-links-3-imgl {width:38%;}
     } 

@media only screen and (max-width:1000px).exam-br {display:none !important;} /** so test examination booklet product & wrapping, wraps after 'production' at larger screen sizes (looks better) **/

/** HERO LINKS STYLING **/
a.hero-links-styling:link, a.hero-links-styling:visited, a.hero-links-styling:active
    {
    font-family: Questrial;
    display: block; 
    color:#f0f0f0;
    text-decoration: none;
    text-align: center;
    font-weight:400;
    text-shadow: 1px 1px 2px #000;
    padding: 8px;
	}
a.hero-links-styling:hover {color: #ccc; background-color: #243272;}

@media only screen and (max-width:768px){a.hero-links-styling:link, a.hero-links-styling:visited, a.hero-links-styling:active{padding: 4px 8px;}}

/*** HERO LINKS FONT SIZES ***/
a.hero-links-styling:link, a.hero-links-styling:visited, a.hero-links-styling:active
{font-size: calc(0.9vw + 0.9rem); line-height: calc(0.8vw + 0.8rem);}

@media only screen and (max-width: 1000px) {
a.hero-links-styling:link, a.hero-links-styling:visited, a.hero-links-styling:active
{font-size: calc(0.95vw + 0.95rem); line-height: calc(0.85vw + 0.85rem);}}

@media only screen and (max-width: 950px) {
a.hero-links-styling:link, a.hero-links-styling:visited, a.hero-links-styling:active
{font-size: calc(1vw + 1rem); line-height: calc(0.9vw + 0.9rem);}}

@media only screen and (min-width:1350px){ .min-1100 {display:none !important;}} /** text in middle **/ 


 
/***************
HERO VIDEO
***************/

.videowrapper{  
    position: absolute;
    overflow:hidden;  /** I had as scroll for a while but caused a horiz scroll bar under the hero video - I previously had an issue with the 'hidden' setting, but seems OK now **/
} 
.fullScreenDiv{
    min-height: 100%; 
    height: 100vh;
    width: 100vw;
    padding:0;
    margin: 0;
    background-color: black;
    position: relative;
}
.video{    
    width: 100vw; 
    height: auto;
    margin: auto;
    display: block;
    z-index:-99999;  /** I added **/
}
@media (min-aspect-ratio: 16/9) {
  .video{
    width: 100vw; 
    height:auto;
    }
}
@media (max-aspect-ratio: 16/9) {
  .video {
    height: 100vh; 
    width:auto;
    margin-left: 50vw;
    transform: translate(-50%);
    }
}     
@media only screen and (max-width:768px) { video {filter: brightness(91%);}}

/***********************************
Smart-binder image over hero bkgrnd
************************************/
#desktop-sb, #tablet-sb, #mob-sb, #mob-low-sb {
    position: absolute;
    /* margin-top, see below */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; /* was 9999 Ensure it stays on top */
    /* 2. Setup the fade-out transition */
    opacity: 1;
    transition: opacity 1s ease-out, visibility 1s;
    }
    #mob-low-sb {margin-top:185px;}
    #mob-sb {margin-top:150px;}
    #tablet-sb {margin-top:150px;}
    #desktop-sb {margin-top:21vh;} /*** was 160px ***/

/* Class added by JS to start the smart-binder fading */
    #desktop-sb.fade-out, #tablet-sb.fade-out, #mob-sb.fade-out, #mob-low-sb.fade-out {
        opacity: 0;
        visibility: hidden;
        }
/** width of the smart-binder image in the viewport **/
    #desktop-sb img {max-width: 73%; height: auto;}
    #tablet-sb img {max-width: 73%; height: auto;}
    #mob-sb img {max-width: 93%; height: auto;}
    #mob-low-sb img {max-width: 93%; height: auto;}
    
.video-image-overlay img {
    position:absolute;
    z-index:1;
    background-position: center; /* centers image */
    height: 100vh; /* fills viewport height */
    width: 100vw; /* fills viewport width */
    background-size: cover; /* NOTE: this must be last in the tag set or cover will not work */
    }   
.video-image-overlay img {opacity: 0.6;}
    @media only screen and (max-width:510px) {.video-image-overlay img {opacity: 0.8;}}     
    
 /** Scroll down button - rest of this code in styles.css (as used on all pages with hero images) **/
 @media (max-width: 768px) {.scroll-down-btn {bottom: 15px;}}  

/******************************
Panel below hero, Intro to IBIS & IBIS at LabelExpo - blue background
*******************************/
.before-below-hero {padding-bottom:71px;}
@media only screen and (max-width:700px) {.before-below-hero {padding-bottom:51px;}}
.after-below-hero {padding-bottom:65px;}

.bkgrnd-dark-blue {background:#02223c; margin-top:82vh;}
.main-heading-white-bg h2 {margin-left:-13px;}
    @media only screen and (max-width:900px) {.main-heading-white-bg h2 {margin-left:-11px;}}
    @media only screen and (max-width:740px) {.main-heading-white-bg h2 {margin-left:-13px;}}
.smart-binder-text {margin-right:5px;}

@media only screen and (max-width:740px) {.desktop-video {display:none !important;}}
@media only screen and (min-width:740px) {.mobile-video {display:none !important;}}

/** Image link to Intro to IBIS video **/
.ibis-intro-video-link {margin-top:-40px}
@media only screen and (max-width:750px) {.ibis-intro-video-link {margin:14px 5vw;}}
.video-intro-ibis img {max-width:300px;}
    @media only screen and (max-width:740px) {.video-intro-ibis img {max-width:240px;}}
    .intro-labelexpo .f2-l--l-l .c50-2 {margin-top:-10px;}
    .intro-labelexpo .f2-l--l-l .c50-2 p {text-align:center;}
    .intro-labelexpo .f2-l--l-l .c50-2 .labelexpo-logo img {margin-top:-50px;}
    @media only screen and (max-width:740px) {.intro-labelexpo .f2-l--l-l .c50-2 .labelexpo-logo img {margin-top:10px;}}

/*** Label Expo panel ***/
.labelexpo-logo img {max-width:200px; margin: -15px auto 15px;}

/************************************* 
Panel SB and SLB - images and text -  all other css, eg flex container, in styles.css file
**************************************/
.sb-slb-col {margin:3vw 3vw 4vw;}
@media only screen and (max-width: 740px){.sb-slb-col {margin:0; padding:0;}}

.f2-l--l-l {width:100%; padding-right:1vw; padding-left:0vw;}
.c50-1 {padding-right:1vw; margin-right:1vw;}
.c50-2 {padding-left:1vw; margin-left:1vw;}

.sb-h2 h2{text-align:center; padding-bottom:5px; font-size:25px;}  
@media only screen and (max-width: 1100px){.sb-h2 h2{font-size:23px;}}
@media only screen and (max-width: 700px){.sb-h2 h2{font-size:21px;}}
/******************************************************************************
Panel: Links, Subscribe, Contact IBIS, & Request a call & Compr... Committed... and Worldwide 
 *****************************************************************************/
.bkgrnd-below-video {background:#02223c; padding-top:60px;}

/****  Compr.. committed.. worldwide.. ***/
.div-margins-3percent {margin-left:3%; margin-right:3%; margin-bottom:85px;}
@media only screen and (max-width: 800px) {.div-margins-3percent {margin-bottom:75px;}}
@media only screen and (max-width: 600px) {.div-margins-3percent {margin-bottom:65px;}}
@media only screen and (max-width: 500px) {.div-margins-3percent {margin-bottom:75px;}}

.two-links-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    flex-wrap:nowrap;
    margin-bottom:23px;
    }
.two-links {align-self:stretch;}
.two-links p {margin:6px 0 20px 0; padding:0;}
@media only screen and (min-width: 741px) {.two-links p {margin: 32px 0 32px;}}
@media only screen and (max-width: 420px) {.two-links p {margin-bottom: 29px;}}
.links-spacer {padding-left:20px;}
     @media only screen and (max-width: 370px) {.links-spacer {padding-left:8px;}}
/*** The Contact IBIS link ***/
a.links-below-header-texts:link, a.links-below-header-texts:visited, a.links-below-header-texts:active {
	color: #000;
    font-family:Questrial; 
    background:#e5e4e4; 
	text-decoration: none;
	padding: 1.8vw; 
    width:85%; 
	line-height: 38px;
    border:1px solid #e5e4e4;
   	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
    }
a.links-below-header-texts:hover {
	color: #000;
	text-decoration: none;
	background: #ccc;
	padding: 1.8vw;
	line-height: 38px;
    border:1px solid #b5b4b4;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}
@media only screen and (max-width: 850px) {a.links-below-header-texts:link, a.links-below-header-texts:visited, a.links-below-header-texts:active {font-size:14px; padding:2.8vw;}}        
@media only screen and (max-width: 370px) {a.links-below-header-texts:link, a.links-below-header-texts:visited, a.links-below-header-texts:active {font-size:14px; padding:3.2vw 1.2vw;}}   
/*** 'Subscribe' and 'Request a call' links***/
a.middle-link:link, a.middle-link:visited, a.middle-link:active {
	font-family:Questrial; 
    color: #fff;
    background:#7a94b9; /**bkgrnd colour of subscribe and request a call links **/
	text-decoration: none;
	padding: 1.8vw;
    width:85%; 
	line-height: 38px;
    border:1px solid #46566d;
   	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
    margin-bottom:20vw;
    }
a.middle-link:hover {
	color: #000;
	text-decoration: none;
	background-color: #ccc;
	padding: 1.8vw;
	line-height: 38px;
    border:1px solid #35455c;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}
@media only screen and (max-width: 850px) {a.middle-link:link, a.middle-link:visited, a.middle-link:active {font-size:14px; padding:2.8vw 2.4vw;}}        
@media only screen and (max-width: 370px) {a.middle-link:link, a.middle-link:visited, a.middle-link:active {font-size:14px; padding:3.2vw 1.2vw;}}  



.three-small-images
    {display:flex;
    flex-direction:row;
    text-align:center;
    width11:100%;
    margin:0 auto; 
    padding1:0 10px 0 10px;
    max-width:1100px;
    }
.three-small-images img {display:block; max-width:100%; text-align: center; margin: 0 auto;}
@media only screen and (max-width: 500px) {.three-small-images img {max-width:94%;}}

.three-small-images p {font-family:Questrial; text-align:center;  color:#fff; font-size:17px; line-height:17px; font-weight:400; padding-left:10px; padding-right:10px;}
@media only screen and (max-width: 740px) {
     .three-small-images {padding-top:14px;}
     .three-small-images p {font-size:13px; margin-top:0;}
     .c33-1, .c33-2, .c33-3, .c33-4, .c33-5 {width:60%;}
     .c33-2, .c33-4 {height:15px;}}    

.c33-1, .c33-3, .c33-5 {width:32%; text-align: center; background:#46566d;} /**colour of lower panel that text is in **/
     .c33-1 p, .c33-3 p, .c33-5 p {font-weight:400; padding-top:5px;}
     .c33-2, .c33-4 {width:2%; background:transparent}
     .c33-3-mobile-only {width:71%; background:#fff; margin: -7vh auto 0; border:2px solid #fff;}
     .c33-5-mobile-only {width:88%; background:#fff; margin: 0 auto; border:2px solid #fff;}
          
 @media only screen and (max-width: 1000px) {
         .three-small-images p {font-size:15px; line-height:14px; margin-bottom:5px;}
     }
  @media only screen and (max-width: 750px) {
         .three-small-images p {font-size:15.5px; line-height:14.5px; margin-top:8px; margin-bottom:5px;}
     }
 @media only screen and (max-width: 620px) {
         .three-small-images p {font-size:14px; line-height:14px;}
         }
 @media only screen and (max-width: 560px) {
         .three-small-images p {font-size:13px; line-height:13px;}
         }
 @media only screen and (max-width: 515px) {
         .three-small-images p {flex-directon:column; font-size:13px; line-height:12px; margin-bottom:4px;}
         }
 @media only screen and (max-width: 500px) {
         .three-small-images p {flex-directon:column;}
       .c33-3-mobile-only {border:0; }
     .c33-5-mobile-only {border:0;}
         }
 @media only screen and (max-width: 380px) {
         .three-small-images p {flex-directon:column; font-size:16px; line-height:16px; margin-bottom:-5px;}
         }
 @media only screen and (max-width: 330px) {
         .three-small-images p {flex-directon:column; font-size:15px; line-height:15px; margin-bottom:-5px;}
         }
/****  Comprehensive.. Committed.. Worldwide, continued... CAPTIONS ****/
.comm-compr-world-captions {width:93vw; background-color:#e6dfd3; margin-top:15px; margin-bottom:-5px; padding-top:12px; padding-bottom:15px; }
.comm-compr-world-captions p {color:#000; text-shadow: 0 0 0 #46566d; font-size:15px;}
@media only screen and (max-width:500px){.mobile500 .three-small-images .c33-3-mobile-only {width:93vw; background-color:transparent;}}      
@media only screen and (max-width:450px){.comm-compr-world-captions p {font-size:13.5px; line-height:13.5px;}}
/*** Icons to right of text re Comm Compr World ***/ #
.three-small-images-icons {padding-top:6px;}
.three-small-images-icons img {max-width:25px; padding-top:3px;} 
.three-small-images-icons p {margin-top:0; padding-top:5px;}

/************
WUFOO form
*************/    
.form-container-outer {background:#fff; width:100%;}
.form-container {max-width:900px; margin: 0 auto; padding: 60px 20px 50px 10px;}  
.contactus p {color:#fff; padding-left:6px;}

/**********************************************************************
Four link panels, quotations, sb brochure, product guide, presentations 
***********************************************************************/	
.lower-four-link-panels .bkgrnd-light-grey {padding-top:5%; padding-bottom:4%; background:#02223c; width:100%;}
@media only screen and (max-width:850px){ .lower-four-link-panels .bkgrnd-light-grey {padding-top:7%; padding-bottom:5%;}} 
@media only screen and (max-width:550px){ .lower-four-link-panels .bkgrnd-light-grey {padding-top:13%; padding-bottom:11%;}} 
.wrap {
    overflow: hidden;
      margin: 10px auto 10px;
      max-width: 1150px; /**** determines the max width of the bank of thumbnail panels ****/
      padding-left:2%;
      padding-right:2%;
     }
.wrap img {  /*---------images bright when NOT rolled over ---------*/
    -webkit-filter: brightness(100%);
}
.wrap img:hover { /*--------- making darker on roll-over ---------*/
    -webkit-filter: brightness(40%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
  .box {
      float: left;
      position: relative;
      /*---------see media query section for all box width settings ---------*/
	  padding-bottom1: 20%;
     
      }
    .boxInner {
      border: 1px solid #aaa5a5; /***********border around each box ***************/
      position: absolute;
      left: 1px;
      right: 5px;
      top: 1px;
      bottom: 7px;
      overflow: hidden;	  
    }
    .boxInner img {
      width: 100%;
     }
    .boxInner .titleBox  {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin-bottom: -1px; /*make this 1px if want the captions to remain displaying all the time, make -50px if want captions popping up*/
      background: #e8ebf4; /***** background: rgba(0, 0, 0, 0.5);  ***************background around the caption box if required **************/
      color: #333;  /****color of the captions ***** was color: #c3c3c3; ****************************/
	  line-height: 12px;  /*--added 21 july 2019 so less vert distance between lines of text within a caption--*/
      padding: 5%; /***** DETERMINES HEIGHT OF THE CAPTIONS FROM BOTTOM USE EITHER PADDING - IF WANT BACKGROUND TO CAPTION BOX, OR MARGIN, IF DON'T******/
        /**margin: 20%; **/ /***** DETERMINES HEIGHT OF THE CAPTIONS FROM BOTTOM ******/
      text-align: center;
	  font-size1111: 16px; /*--caption font size - note see media queries below for font sizes at lower resolutions--*/
        text-shadow111: 1px 1px #000;
      font-family: Arial, helvetica, "Trebuchat MS", Verdana, Arial,  sans-serif; /*--added 21 july 2019--*/
      font-weight1111: 100; /*--added 23 july 2019 after Simons feedback that wanted lighter text --*/
      -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
     }
    body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
      margin-bottom: 0;
    }
/*****Image/link thumbnails font size******/
 @media only screen and (min-width : 601px) {
     .boxInner .titleBox {font-size: 15px; line-height:13px;}
    }
 @media only screen and (min-width : 501px) and (max-width : 600px) {
       .boxInner .titleBox {font-size:13px;line-height:12px;}       
    }
 @media only screen and (min-width : 401px) and (max-width : 499px) {
       .boxInner .titleBox {font-size:12px; line-height:10px;}       
    }
  @media only screen and (min-width :1px) and (max-width : 400px) {
       .boxInner .titleBox {font-size:11px; line-height:9px; padding-top:5px; padding-bottom:3px;}       
    }
/**** Image/link thumbnails Image display and capion positioning ****/   
/* 4 columns */
       @media only screen and (min-width : 851px)  {
      .box {width: 25%; padding-bottom: 12.7%;}
    }
/* 2 column re image display and caption positioning */
    @media only screen and (min-width: 300px) and (max-width : 850px) {
     .box {width: 50%; padding-bottom: 25%;  }
     .boxInner {left:2%; right: 9%; }
     .wrap {width: 501px; margin: 0 auto;} 
    }
  @media only screen and (min-width: 401px) and (max-width : 500px) {
     .wrap {width: 400px; margin: 0 auto;} 
    }     
  @media only screen and (min-width: 300px) and (max-width : 400px) {
     .wrap {width: 300px; margin: 0 auto;} 
    }     
/* 1 column */
    @media only screen and (max-width : 299px) {
      .box {width: 100%; padding-bottom: 45%;}
      .wrap {padding-left:5%; padding-right:5%;} 
    }

/***Strap line "IBIS Customized Finishing Solutions" - White text on homepage***/
.footer-strap-line h3 {color:#fff;}