/* --------------- common column settings ---------------- */
.header,
.full-col,
.col1,
.col2,
.col3,
.col4,
.footer-two,
.footer-three,
.footer-four,
.footer-bottom {
  padding:20px 3%;
  padding:2rem 3%;
  width:94%; /* 100% minus padding left and right from above */
}

/* --------------- Body styles ---------------- */
body {
  background: #003f5b;/* Colour of area below footer - should be the same as #footer-bottom-wrap */
}

/* --------------- Header styles ---------------- */
#header-wrap { /* header container to edge of screen */
  background:#fff; /* Header Background Colour*/
  min-height:50px;     /* **header-height** */
  min-height:5rem;     /* **header-height** */
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
  /* border-bottom:1px solid #666; Remove comments on IE7 & IE8 */
}

.header { /* header container to edge of display area */
  padding-top:10px;    /* reset common setting */
  padding-top:1rem;    /* reset common setting */
  padding-bottom:0;    /* reset common setting to allow dropdowns to appear direct under navigation */
}
.logo-wrap img {       /* image inside logo container */
  height:30px;         /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
  height:3rem;         /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
  padding:1px 0;       /*same as the border thickness of #menu-icon, #search-icon */
  margin-bottom: 7px;
  margin-bottom: 0.7rem;
}

/* --------------- slideshow ---------------- */
#slideshow-wrap { /* slideshow */
  background:#fff;
}

/* --------------- column container ---------------- */
#colmask-main { /* Main content container to edge of screen */
  background:#fff;
  padding-top:50px;      /* **header-height** */
  padding-top:5rem;      /* **header-height** */
}


/* --------------- 2 Column (Main Content Left) settings ---------------- */
.twocol-mainleft .colleft { /*column 1 (left column) */
  background:#fff;    /* column 1 (left column) background colour */
}
.twocol-mainleft, 
.twocol-mainleft .col2 { /*column 2 (right column) */
  background:#fff;    /* column 2 (right column) background colour */
}

/* --------------- Footer 2 Column Layout styles ---------------- */
#footer-two-wrap { /* top footer container to edge of screen */
  background: #e6ecec;   /* 2 column footer background colour */
}
/* .footer-two { 
} */
/* .footer-two-top,
.footer-two-first,
.footer-two-second,
.footer-two-bottom { 
} */
/* .footer-two-first,
.footer-two-second { 
} */
/* .footer-two-second { 
} */

/* --------------- Footer 3 Column Layout styles ---------------- */
#footer-three-wrap { /* top footer container to edge of screen */
  background: #3092BC;   /* 3 column footer background colour */
}
/* .footer-three { 
} */
/* .footer-three-top,
.footer-three-bottom { /* 3 column footer background colour */
/* } */
/* .footer-three-first,
.footer-three-second,
.footer-three-third { /* 3 column footer background colour */
/* } */
/* .footer-three-third { /* 3 column footer background colour */
/* } */

/* --------------- Footer 4 Column Layout styles ---------------- */
#footer-four-wrap { /* top footer container to edge of screen */
  background: #005579;     /* 4 column footer background colour */
}
/* .footer-four { 
} */
/* .footer-four-top,
.footer-four-bottom { /* 4 column footer top and bottom */
/* } */
/* .footer-four-left,
.footer-four-right { /* secondary footer container in footer-four-top */
/* } */
/* .footer-four-first, 
.footer-four-second,
.footer-four-third,
.footer-four-fourth { /* 4 column individual columns */
/* } */
/* .footer-four-first,
.footer-four-third { 
} */


@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px) { 
  /* Mobile & Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {
  /* Tablet & Medium screen, non-retina */
  
  /* --------------- common column settings ---------------- */
  .header,
  .colmask,
  .footer-two,
  .footer-three,
  .footer-four,
  .footer-bottom {
    padding:30px 2%;
    padding:3rem 2%;
    width:96%; /* 100% minus padding left and right from above */
  }
  .colmask {
    padding-top:0;
    padding-bottom:0;
  }
  .full-col,
  .col1,
  .col2,
  .col3,
  .col4 {
    padding:30px 0;
    padding:3rem 0;
    width: auto;
  }
    
  /* --------------- Header styles ---------------- */
  #header-wrap { /* header container to edge of screen */
    min-height:80px;      /* **header-height** */
    min-height:8rem;      /* **header-height** */
  }
  .fixed-header #header-wrap { /* header container to edge of screen when scrolling */
    min-height:50px;      /* **header-height** */
    min-height:5rem;       /* **header-height** */
  }
  .header { /* header container to edge of display area */
    padding-top:15px;      /* reset common setting */
    padding-top:1.5rem;    /* reset common setting */
    padding-bottom:0;
  }
  .fixed-header .header {
    padding-top:10px;  /* reset common setting to allow dropdowns to appear direct under navigation */
    padding-top:1rem;  /* reset common setting to allow dropdowns to appear direct under navigation */
  }
  .logo-wrap img { /* image inside logo container */
    height:50px; /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
    height:5rem; /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
    padding:0;
    margin-bottom: 13px;
    margin-bottom: 1.3rem;
  }
  .fixed-header .logo-wrap img {
    height:30px; /* **header-height** (.fixed-header#header-wrap {min-height} minus .fixed-header.header {padding-top} x 2) */
    height:3rem; /* *header-height** (.fixed-header#header-wrap {min-height} minus .fixed-header.header {padding-top} x 2) */
    padding:1px 0; /*same as the border thickness of #menu-icon, #search-icon */
    margin-bottom: 7px;
    margin-bottom: 0.7rem;
  }
  
  /* --------------- column container ---------------- */
  #colmask-main {/* Main content container to edge of screen */
    padding-top:79px;    /* **header-height** */
    padding-top:7.9rem;    /* **header-height** */
  }

  
  /* ----------------- 2 Column (Main Content Left) settings ------------------ */
  
  /* Tablet Layout Grid Template (Note: update figures per job for reference)   */
  
  /*   ||                             ||                       ||               */
  /*   ||            Col 1            ||         Col 2         ||               */
  /*   ||             65%             ||          35%          ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  /*   || 0% |        63%        | 2% || 2% |     33%     | 0% ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  
  .twocol-mainleft .colleft { /*column 1 (left column) */
    right:35%;          /* column 2 (right column) width */
  }
  .twocol-mainleft .col1 { /* column 1 (left column) */
    width:63%;             /* column 1 (left column) content width */
    left:35%;               /* column 2 (right column) width */
                           /* plus column 1 (left column) left padding */
  }
  .twocol-mainleft .col2 { /* column 2 (right column) */
    width:33%;             /* column 2 (right column) content width */
    left:39%;               /* column 2 (right column) width */
                           /* plus column 1 (left column) left padding */
                           /* plus column 1 (left column) right padding */
                           /* plus column 2 (right column) left padding */
  }

  /* Tablet Layout Grid Template for front page (Note: update figures per job for reference)   */
  
  /*   ||                             ||                       ||               */
  /*   ||            Col 1            ||         Col 2         ||               */
  /*   ||             50%             ||          50%          ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  /*   || 0% |        47%        | 3% || 3% |     47%     | 0% ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  
  .path-frontpage .twocol-mainleft .colleft { /*column 1 (left column) */
    right:50%;          /* column 2 (right column) width */
  }
  .path-frontpage .twocol-mainleft .col1 { /* column 1 (left column) */
    width:47%;             /* column 1 (left column) content width */
    left:50%;               /* column 2 (right column) width */
                           /* plus column 1 (left column) left padding */
  }
  .path-frontpage .twocol-mainleft .col2 { /* column 2 (right column) */
    width:47%;             /* column 2 (right column) content width */
    left:56%;               /* column 2 (right column) width */
                           /* plus column 1 (left column) left padding */
                           /* plus column 1 (left column) right padding */
                           /* plus column 2 (right column) left padding */
  }
  
  /* Tablet Layout Grid Template for Application Studies page (one column)   */
  .page-node-type-application-study .twocol-mainleft .colleft,
  .page-node-type-application-study .twocol-mainleft .col1,
  .page-node-type-application-study .twocol-mainleft .col2 {
    right:0; /* reset settings above on One Column pages only - to create full width content */
    left:0; /* reset settings above on One Column pages only - to create full width content */
    width:auto; /* reset settings above on One Column pages only - to create full width content */
    border-right: none; /* reset settings above on One Column pages only - to create full width content */
    float: none;
  }


  /* --------------- Footer 2 Column Layout styles ---------------- */
    
  /* --------------- Footer 3 Column Layout styles ---------------- */

  /* --------------- Footer 4 Column Layout styles ---------------- */
  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and (min-resolution: 192dpi) and (min-width: 700px),
only screen and (min-resolution: 2dppx) and (min-width: 700px) { 
  /* Tablet & Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1024px) {
  /* Desktop & Large screen, non-retina */
  
  /* --------------- Header styles ---------------- */
  #header-wrap { /* header container to edge of screen */
    min-height:100px;      /* **header-height** */
    min-height:10rem;      /* **header-height** */
  }
  .fixed-header #header-wrap { /* header container to edge of screen when scrolling */
    min-height:50px;      /* **header-height** */
    min-height:5rem;       /* **header-height** */
  }
  .header { /* header container to edge of display area */
    padding-top:15px;      /* reset common setting */
    padding-top:1.5rem;    /* reset common setting */
    padding-bottom:0;
  }
  .fixed-header .header {
    padding-top:10px;  /* reset common setting to allow dropdowns to appear direct under navigation */
    padding-top:1rem;  /* reset common setting to allow dropdowns to appear direct under navigation */
  }
  .logo-wrap img { /* image inside logo container */
    height:70px; /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
    height:7rem; /* **header-height** (#header-wrap{min-height} minus .header{padding-top} x2) */
    padding:0;
  }
  .fixed-header .logo-wrap img {
    height:30px; /* **header-height** (.fixed-header#header-wrap {min-height} minus .fixed-header.header {padding-top} x 2) */
    height:3rem; /* *header-height** (.fixed-header#header-wrap {min-height} minus .fixed-header.header {padding-top} x 2) */
    padding:1px 0; /*same as the border thickness of #menu-icon, #search-icon */
  }
  
  /* --------------- slideshow ---------------- */
  .slideshow { /* slideshow */
    margin:0 auto;        /* Centres the webpage left to right */
  }
  .page-node-type-page .slideshow,
  .page-node-type-product-category .slideshow,
  .page-node-type-webform .slideshow {
    max-width: 1280px;
  }
  .path-frontpage .slideshow {
    max-width: none;
  }
  
  /* --------------- column container ---------------- */
  #colmask-main { /* Main content container to edge of screen */
    padding-top:100px;    /* **header-height** */
    padding-top:10rem;    /* **header-height** */
  }
  .colmask { /* Main content container to edge of display area */
    max-width:1280px;
    margin:0 auto;        /* Centres the webpage left to right */
    /* *padding-left:0; - remove comment for IE7 (leave * before padding) */
    /* *padding-right:0; - remove comment for IE7 (leave * before padding) */
  }
  
  /* --------------- common column settings - no need to adjust ---------------- */

  /* ----------------- 2 Column (Main Content Left) settings ------------------ */
  
  /* Tablet Layout Grid Template (Note: update figures per job for reference)   */
  
  /*   ||                             ||                       ||               */
  /*   ||            Col 1            ||         Col 2         ||               */
  /*   ||             65%             ||          35%          ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  /*   || 0% |        63%        | 2% || 2% |     33%     | 0% ||               */
  /*   ||    |                   |    ||    |             |    ||               */
  
  /* .twocol-mainleft .colleft { /*column 1 (left column) */
  /* } */
  /* .twocol-mainleft .col1 { /* column 1 (left column) */
  /* } */
  /* .twocol-mainleft .col2 { /* column 2 (right column) */
  /* } */
  
  /* --------------- Common Footer settings - no need to adjust ---------------- */
  .footer-two,
  .footer-three,
  .footer-four,
  .footer-bottom { /* main footer container in each footer-***-wrap  */
    max-width:1280px;
    margin:0 auto;        /* Centres the webpage left to right */
  }

  /* --------------- Footer 2 Column Layout styles ---------------- */

  /* --------------- Footer 3 Column Layout styles ---------------- */

  /* --------------- Footer 4 Column Layout styles ---------------- */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min-resolution: 192dpi) and (min-width: 1024px),
only screen and (min-resolution: 2dppx) and (min-width: 1024px) { 
  /* Desktop & Extra Large screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1280px) {
  /* Desktop & Extra Large screen, non-retina */
  
  /* --------------- Header styles ---------------- */
  #header-wrap { /* header container to edge of screen */
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
    /* border-bottom:1px solid #666; Remove comments on IE7 & IE8 */
  }
  .fixed-header #header-wrap { /* header container to edge of screen when scrolling */
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.5);
    /* border-bottom:1px solid #666; Remove comments on IE7 & IE8 */
  }
  /* --------------- slideshow ---------------- */
  
  /* --------------- column container ---------------- */
  #colmask-main { /* Main content container to edge of screen */
    padding-top:130px;    /* **header-height** */
    padding-top:13rem;    /* **header-height** */
  }
  
  /* --------------- common column settings - no need to adjust ---------------- */

  /* ----------------- 2 Column (Main Content Left) settings ------------------ */
  
  /* --------------- Common Footer settings - no need to adjust ---------------- */

  /* --------------- Footer 2 Column Layout styles ---------------- */

  /* --------------- Footer 3 Column Layout styles ---------------- */

  /* --------------- Footer 4 Column Layout styles ---------------- */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1280px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1280px),
only screen and (min-resolution: 192dpi) and (min-width: 1280px),
only screen and (min-resolution: 2dppx) and (min-width: 1280px) { 
  /* Desktop & Large screen, retina, stuff to override above media query */

}