/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body { 
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	color: #000;
	height:100%; 
	text-align:center;
	}
	
#wrapper	{
	height:100%;
    width:85%;
	text-align:center;
	margin:0 auto;
	}

.toprowmaker	{
	width:100%; 
	height:40vw;
	background-color:none;
    margin: 0;
    overflow:hidden;
    position:relative;
	}

#studioshm {
    position: absolute;
    top:0;
    right:0;
    z-index:10;
    }

.halftone {
    display: block;
    width: 100%;
    opacity:0.4; 
    position: absolute;
    top: 0;
    left: 0;
    }

.img.halftone { 
    height: auto; 
    }

.hero.is-active .demo { 
    display: none; 
    }
	
.bigrowmaker	{
	width:100%; 
	height:50vw;
	background-color:none;
    margin: 0;
	}

.hidethemutha	{
	display:contents;
	}

p.right img	{
	width:4vw; 
    margin-left:1vw; 
    margin-bottom:-1.5vw;
	}

.overlay {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #000;
}
.overlay-kew {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #004015;
}

.overlay-kew:hover  {
  opacity: .9;
}

.overlay-mlp {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #0e4f90;
}

.overlay-mlp:hover  {
  opacity: .9;
}
.overlay-jor {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #ec0;
}

.overlay-jor:hover  {
  opacity: .9;
}



.overlay-rua {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #632884;
}

.overlay-rua:hover  {
  opacity: .9;
}


.overlay-rub {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #5aa6b9;
}

.overlay-rub:hover  {
  opacity: .9;
}


.overlay-gtb {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #00AAA2;
}

.overlay-gtb:hover  {
  opacity: .9;
}

.overlay-lum {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #09AFF0;
}

.overlay-lum:hover  {
  opacity: .9;
}

.overlay-tdw {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #241542;
}

.overlay-tdw:hover  {
  opacity: .95;
}

.overlay-pcp {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #53AEE7;
}

.overlay-pcp:hover  {
  opacity: .9;
}

.overlay-pan {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #024793;
}

.overlay-pan:hover  {
  opacity: .9;
}

.overlay-mml {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #80A594;
}

.overlay-mml:hover  {
  opacity: .9;
}

.overlay-cit {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #000;
}

.overlay-cit:hover  {
  opacity: .9;
}

.overlay-cas {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #D1541D;
}

.overlay-cas:hover  {
  opacity: .9;
}

.overlay-mhw {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #BB1B50;
}

.overlay-mhw:hover  {
  opacity: .9;
}


.overlay-spb {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #c11;
}

.overlay-spb:hover  {
  opacity: .9;
}


.overlay-storegga {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #3e1d4a;
}

.overlay-storegga:hover  {
  opacity: .9;
}


.overlay-csp {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #1F3B60;
}

.overlay-csp:hover  {
  opacity: .9;
}


.overlay-dwm {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #E59518;
}

.overlay-dwm:hover  {
  opacity: .9;
}


.overlay-tec {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #67A890;
}

.overlay-tec:hover  {
  opacity: .9;
}


.overlay-mot {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #cc8754;
}

.overlay-mot:hover  {
  opacity: .9;
}


.overlay-mhc {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #c6076e;
}

.overlay-mhc:hover  {
  opacity: .9;
}


.overlay-lfr {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #184f9a;
}

.overlay-lfr:hover  {
  opacity: .9;
}


.overlay-mhs {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #8b0c1f;
}

.overlay-mhs:hover  {
  opacity: .9;
}



.overlay-dce {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #20a2d1;
}

.overlay-dce:hover  {
  opacity: .9;
}



.overlay-rai {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: #1A6AB7;
}

.overlay-rai:hover  {
  opacity: .9;
}


.text-overlay {
    color: white;
    font-weight: 300;
    font-size: calc(1.4vw);
    line-height: 1.6em;
    width:90%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    }

.overlay-jor .text-overlay {
    color: black;
    }

/* ------------------ ie hacks ------------------- */

/* Correct `block` display not defined in IE 8/9. */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
    }

/* Correct `inline-block` display not defined in IE 8/9. */

audio,
canvas,
video {
    display: inline-block;
    opacity:0.5;
    position: absolute;
    top:0;
    left:0;
    }

/* Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices. */

audio:not([controls]) {
    display: none;
    height: 0;
    }

/* Address styling not present in IE 8/9. */

[hidden] {
    display: none;
    }

/* Remove border when inside `a` element in IE 8/9. */

img {
    border: 0;
    }

/* Correct overflow displayed oddly in IE 9. */

svg:not(:root) {
    overflow: hidden;
    }


/* Address margin not present in IE 8/9 and Safari 5. */

figure {
    margin: 0;
    }

/* ------------------------- end ------------------------ */



.rowmaker	{
	width:100%; 
	height:30vw;
	background-color:none;
    margin: 0;
	}

.colour-row	{
	width:100%; 
	height:30vw;
	background-color:none;
    margin: 0;
	}

.rowbreaker	{
	width:100%; 
	height:0;
	background-color:none;
    margin: 0;
	}

.bottomrowmaker	{
	width:100%; 
	height:40vw;
	background-color:none;
    margin: 0;
    position: relative;
	}

.bottomrowmakerc	{
	width:100%; 
	height:40vw;
	border-top:3px solid #444;
    margin: 5em 0 0;
    padding-top:3em;
    position: relative;
	}

.mydiv	{
	position: relative;
	width:100%;
	text-align:center;
	display: flex; 
	align-items: center; 
	}



/* -------------- two column floats ---------------*/


.lazy   {
    background-image: none;
    }


.adaptive	{
	float:left; 
	width:50%; 
	height:100%; 
	background-color:#555; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	}


.adaptiven	{
	float:none; 
	width:50%; 
	height:100%; 
	background-color:#555; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	}

.adaptive100	{
	float:left; 
	width:100%; 
	height:100%; 
	background-color:none; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
	}

.adaptive70	{
	float:left; 
	width:50%; 
	height:100%; 
	background-color:#fff;
	}

.adaptive30	{
	float:left; 
	width:50%; 
	height:100%; 
	background-color:#fff;
	}

.imgholder	{
	position: absolute;
  	top: 2.5vw;
    left: 50%;
    transform: translate(-50%, 55%); 
	width:100%;
	}

.floatl, .floatlastl		{
	display: table;
 	height: 100%;
  	width: 55%;
 	padding-left:3%; 
 	margin: 0px;
  	float:left;
	}

.floatlastl		{
	padding-left:0;
	}

.floatr	{
	display: table;
  	height: 100%;
  	width: 34%;
  	padding:0 3% 0 5%;
  	margin: 0px;
  	float:left;
	}

.floatlast	{
	display: table;
  	height: 100%;
  	width: 100%;
  	padding:0;
  	margin: auto;
  	float:left;
	}

.floatl h1	{
	font-weight:800;
	font-size: 1rem;
	}
	
.floatl p, .floatlastl p	{
	display: table-cell;
  	vertical-align: middle;
 	text-align: left;
    font-weight:600;
	font-size: calc(1.5vw + 3.8px);
    line-height: 125%;
    padding-bottom:5%;
    }
    
.floatr p, .floatlast p	{
	display: table-cell;
  	vertical-align: middle;
  	text-align: left;
    font-weight:600;
	font-size: calc(1.05vw);
    line-height: 120%;
    margin-bottom: 2rem;
    }

.floatlast p.centred   {
    text-align: center;
    }

.floatlast p.right   {
    text-align: right;
    padding-bottom: 4vw;
    }

h1.leftw, h1.leftwthin, h1.leftwc, h1.leftb	{
	text-align: left;
    font-weight:800;
	font-size: calc(9vw);
    color:#fff;
    position: absolute;
    margin: -1.4rem -1rem;
    letter-spacing: -0.02em;
	}

h1.leftwthin	{
	font-weight:300;
	}

h1.leftb	{
	color:#000;
	}
    
h1.leftwc	{
	color:#11AC93;
    margin: -1.4rem -0.45rem;
	}

h1.rightw,  h1.rightb	{
	text-align: right;
    font-weight:800;
	font-size: calc(8vw);
    color:#fff;
    margin: -1.2rem 0rem;
    letter-spacing: -0.02em;
	}

h1.rightb	{
	color:#000;
	}

h2.leftb	{
	text-align: left;
    font-weight:800;
	font-size: calc(4vw);
    line-height: 4.5rem;
    color:#000;
    margin: 2.5rem 0;
    letter-spacing: -0.02em;
	}



a	{
	color:#000000;
    text-decoration: none;
	}

a:hover	{
	color:#3300ff;
    text-decoration: none;
	}

a.rainbow, a.blue	{
	color:#000;
    width:3vw; 
    margin-left:1vw; 
    margin-bottom:-1vw;
	}

/*
a.leftw	{
    
    -webkit-animation: color-change 6s infinite;
        -moz-animation: color-change 6s infinite;
        -o-animation: color-change 6s infinite;
        -ms-animation: color-change 6s infinite;
        animation: color-change 6s infinite;
    }

    @-webkit-keyframes color-change {
        0% { color: white; opacity:1; }
        50% { color: white; opacity:0.4; }
        100% { color: white; opacity:1; }
    }
    @-moz-keyframes color-change {
        0% { color: white; opacity:1; }
        50% { color: white; opacity:0.4; }
        100% { color: white; opacity:1; }
    }
    @-ms-keyframes color-change {
        0% { color: white; opacity:1; }
        50% { color: white; opacity:0.4; }
        100% { color: white; opacity:1; }
    }
    @-o-keyframes color-change {
        0% { color: white; opacity:1; }
        50% { color: white; opacity:0.4; }
        100% { color: white; opacity:1; }
    }
    @keyframes color-change {
        0% { color: white; opacity:1; }
        50% { color: white; opacity:0.4; }
        100% { color: white; opacity:1; }
    }
*/
	

a.rightw, a.leftw	{
    color:#fff;
    text-decoration: none;
    }
	


a.leftw:hover, a.rightw:hover	{
	color:#aa00ff;
    text-decoration: underline;
	}


.insert-l	{
    margin: 1em 2em 1em 6em;
    padding: 1em 0;
    border-bottom: 2px dotted #999;
    float: left;
    max-width: 450px;
	}

.insert-ld	{
    margin: 3em 2em 1em 6em;
    padding: 1em 0;
    border-bottom: 2px dotted #999;
    float: left;
    max-width: 450px;
	}

.insert-r	{
    margin: 1em 6em 1em 2em;
    padding: 1em 0;
    border-bottom: 2px dotted #999;
    float: right;
    max-width: 450px;
	}

p.subhead {
    text-align: right;
    color: #fff;
    font-size: calc(0.9vw);
    letter-spacing: 0.09vw;
    line-height: 1.3;
    background: black;
    margin-top: 1.2em;
}

p.blurb {
    text-align:left;
    color:#000;
    font-size: calc(1.8vw);
    line-height: 1.5em;
    margin: 1.5em 10em 0em;
}

p.blurbtop {
    text-align:left;
    color:#000;
    font-size: calc(1.8vw);
    line-height: 1.5em;
    margin: 0em 10em 0em;
    padding-top: 8vw;
}

p.blurbhome {
    text-align:left;
    color:#000;
    font-size: calc(1.8vw);
    line-height: 1.5em;
    margin: 0em 10em 0em;
    padding-top: 10vw;
}


p.blurbh {
    text-align:left;
    font-weight:800;
    color:#000;
    font-size: calc(1.8vw);
    line-height: 1.5em;
    margin: 2em 10em -0.8em;
}


p.caption {
    text-align:center;
    color:#666;
    font-size: calc(1.2vw);
    line-height: 1.3em;
}

strong  {
    font-weight:600;
}

strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 6px solid white;
  height: 0%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  /* 1px = half the line thickness */
  width: 100%;
}
    
/* -------------- slides ---------------*/

#r00    {
	background-image: url('img/shm%20hi%201200-10%20round.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top center;
    
	}

#r01p01	{
	background-image: url('img/gtb-products.jpg');    
	}

#r02p01	{
	background-image: url('img/kew-bottles.jpg');    
	}
	
#r02p02	{
	background-image: url('img/kew-logo.png');
	}
	
#r03p01	{
	background-color: #0e9ed3;
    color:#fff;
	}
	
#r03p02	{
	background-image: url('img/mlp-mix-2.jpg');
	}
	
#r04p01	{
	background-image: url('img/ej10-large.jpg');
	}
	
	
#r05p01	{
	background-image: url('img/talwar.jpg');
	}
	
#r05p02	{
	background-image: url('img/air-supply-1200.jpg');
	}

#r06p01	{
	background-color: #6969c7;
    color:#fff; 
	}
	
#r06p02	{
	background-image: url('img/bodyclocks.jpg');
	}
	
#r07p01	{
	background-image: url('img/dw-interior-2400.jpg');
	}
	
#r08p01	{
	background-image: url('img/doulton.jpg');
	}
	
#r08p02	{
	background-image: url('img/bae.jpg');
    background-color: #902;
    color:#fff;
	}

#r09p01	{
	background-image: url('img/www-mma.jpg');
	}
	
#r09p02	{
	background-image: url('img/www-cfn.jpg');
	}
	
#r10p01	{
	background-image: url('img/www-csap.jpg');
	}
	
#r10p02	{
	background-image: url('img/www-mhc.jpg');
	}
	
#r11p01	{
	background-image: url('img/spirals-spreads.jpg');
	}
	
#r12p01	{
	background-image: url('img/pc-danger.jpg');
	}
	
#r12p02	{
	background-color: #bc292e;
    color:#fff;
	}
	
#r13p01	{
	background-image: url('img/diageo-fm-r.jpg');
	}
	
#r13p02	{
	background-image: url('img/panadol-3.jpg');
    }
	
#r14p01	{
	background-image: url('img/deasons-deet.jpg');
	}
	
#r14p02	{
	background-image: url('img/latymer-fundraising.jpg');
	}
	
#r15p01	{
	background-image: url('img/snake.jpg');
	}
	
#r15p02	{
	background-image: url('img/reunion-stats.jpg');
	}
	
#r16p01	{
	background: #fff;
	}
	
#r16p02	{
	background: #fff;
	}
	
#r17p01	{
	background-image: url('img/storegga-swatch.jpg');
	}
	
#r17p02	{
	background-image: url('img/storegga-splash.jpg');
	}
	
#r18p01	{
	background-image: url('img/tech-data-large.jpg');
	}

	
#logo	{
	width:30vw;
	}

svg {
    width: 3vw;
    height: 3vw; 
    margin-left:1vw; 
    margin-bottom:-1vw;
    fill: #999;
    }
svg.insta:hover {
    fill: #fF0072;
    }
svg.twata:hover {
    fill: rgb(29, 161, 242);
    }


/*------------ responsive -------------*/

@media only screen 
and (min-device-width : 568px) 
and (max-device-width : 980px) {

#wrapper	{
	width:95%;
	}

.toprowmaker, .bottomrowmaker	{
	height:46vw;
	}
}
   		 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    
.hidethemutha	{
	display:none;
	}

#wrapper	{
	width:95%;
	}

.toprowmaker, .bottomrowmaker	{
	height:46vw;
	}
    
.rowmaker	{
	width:100%; 
	height:80%;
	background-color:#fff;
	}
    
.colour-row	{
	height:30%;
	}
    
.bigrowmaker	{
	height:40%;
    }


.adaptive	{
	float:none;
	width:100%;
	height:50%;
	}

.adaptive70	{
	width:70%;
	}

.adaptive30	{
	width:30%;
	}
    
.insert-ld {
    margin: 3em 2em 1em 2em;
    border-bottom: 2px dotted #14313a;
    }
    
.insert-l {
    margin: 1em 1em 2em 2em;
    border-bottom: 2px dotted #14313a;
    }
    
.insert-r {
    margin: 1em 2em 1em 2em;
    border-bottom: 2px dotted #14313a;
    }
    
h1.leftw, h1.leftwthin, h1.leftb, h1.rightw, h1.rightb	{
	font-size: calc(12vw);
    margin: -0.8rem -0.6rem;
	}
    
h1.leftwc	{
	font-size: calc(12vw);
    margin: -0.5rem -0.19rem;
	}

.floatl p, .floatlastl p	{
	font-size: calc(3.5vw + 3.8px);
    }
    
.floatr p, .floatlast p	{
	font-size: calc(2.5vw);
    }
    
.text-overlay {
    font-size: calc(2.0vw);
    line-height: 1.4em;
    }
    
h2.leftb {
    font-size: calc(5vw);
    }
    
p.blurbhome {
    font-size: calc(3.5vw);
    margin: 0em 3em 0em;
    padding-top: 12vw;
}
    
p.blurb, p.blurbh {
    font-size: calc(4vw);
    margin: 1.5em 3em 0em;
}
    
p.caption {
    text-align: center;
    color: #14313a;
    font-size: calc(3vw);
    line-height: 1.3em;
    margin-top: 0.4em;
    }
    
svg {
    width: 8vw;
    height: 8vw; 
    margin-left:1vw; 
    margin-bottom:-1vw;
    }
    
    p.right img	{
	width:8vw; 
    margin-left:3vw; 
    margin-bottom:-1vw;
	}
   		 
}
   		 

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)
and (orientation: landscape)    {
    
.hidethemutha	{
	display:none;
	}

#wrapper	{
	width:95%;
	}

.toprowmaker, .bottomrowmaker	{
	height:46vw;
	}
    
.rowmaker	{
	width:100%; 
	height:180%;
	background-color:#fff;
	}
    
.colour-row	{
	height:60%;
	}
    
.bigrowmaker	{
	height:90%;
    }


.adaptive	{
	float:none;
	width:100%;
	height:50%;
	}
    
.text-overlay {
    font-size: calc(2.1vw);
    }
    
}