@charset "UTF-8";
/* CSS Document */

html {
    font-family: "museo-sans", sans-serif;
    -webkit-font-smoothing: antialiased;
	
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch;
	

}

body{
	height: 100%;
	overflow: auto;
	background-color: #262626;
		scroll-behavior: smooth;
}

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

.scroll-section{
	position: static;
	overflow-y:visible;
	max-height: none;
}

.central-wrapper{
	margin: 0 auto;
	width: 100vw;
	max-width: 100%;
}

.lazy-hidden{opacity:0}.lazy-loaded{-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-ms-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s;opacity:1}

/* Overall */
h1 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h2{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h3{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h4{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h5{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

h6{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

p{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

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

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}



.anchor{
	position: absolute;
	top: 0px;
	left: 0px;
}

/* Background Colours */

.grey-background{
	
	background-color: #262626;
}

.white-background{
	background-color: #ffffff;
}

.blue-background{
	background-color: #3399FF;
}

/* Font Colours */

.white-text{
	color: #ffffff;
}

.black-text{
	color: #000000;
}

.grey-text{
	color: #66665f;
}

.green-text{
	color: #bcd700;
}

/* Font styles */

.font-times{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}

.font-museo{
font-family: "Museo Sans", sans-serif;
}

.light{
	font-weight: 100;
}

.normal{
	font-weight: 300;
}

.bold{
	font-weight: 500;
}

.bold-700{
	font-weight: 700;
}

.extra-bold{
	font-weight: 900;
}

.uppercase{
	text-transform:  uppercase;
}

.letter-spacing-0p8vw{
	letter-spacing: 0.8vw;
}

.letter-spacing-3px{
	letter-spacing: 3px;
}

.letter-spacing-3t2px{
	letter-spacing: 3px;
}

/* Font Aligns */

.text-align-left{
	text-align: left;
}

.text-align-centre{
	text-align: center;
}

.vertical-align-top{
	vertical-align:  top;
}

/* Font Sizes */
.font-size-0p6{
	font-size: 0.6vw;
}
.font-size-0p8{
	font-size: 0.8vw;
}

.font-size-1p2vw{
	font-size: 1.2vw;
}

.font-size-address{
	font-size: 1.2vw;
}

.font-size-1p2t2vw{
	font-size: 1.2vw;
}

.font-size-1p3vw{
	font-size: 1.3vw;
}

.font-size-1p4vw{
	font-size: 1.4vw;
}

.font-size-1p8vw{
	font-size: 1.8vw;
}

.font-size-2vw{
	font-size: 2vw;
}

.font-size-2p6vw{
	font-size: 2.6vw;
}

.font-size-2p8vw{
	font-size: 2.8vw;
}

.font-size-3p6vw{
	font-size: 3.6vw;
}

.font-size-4vw{
	font-size: 4vw;
}

.font-size-7vw{
	font-size: 7vw;
}

.font-size-8vw{
	font-size: 8vw;
}

/* Line Heights */

.line-height-0p9em{
	line-height: 0.9em;
}

.line-height-1p2em{
	line-height: 1.2em;
}

.line-height-9vw{
	line-height: 9vw;
}

.line-height-120percent{
	line-height: 120%;
}

.line-height-120percentt3vw{
	line-height: 120%;
}

.line-height-100percent{
	line-height: 100%;
}

.fill{
	height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
object-fit: cover;
top: 0;
left: 0%; 
-webkit-transform: translate(0%, 0); 
}

.position-relative{
	position: relative;	
	margin: 0px 0px -4px 0px;
	overflow: hidden;
}	

.right-23-img {
	width: 66vw;
	max-width: 66%;
	position: relative;

}

.sd-text-box-left{
	position: relative;
	margin: 0vw 4vw 0vw 6vw;
	overflow: hidden;
	

}

.width-100{
	width: 100%;
}

.flex-container {
  display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
  
  /*min-height: 100vh;*/
	justify-content: flex-end;
	-ms-flex-align: flex-end;
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;

    align-items: stretch;
  align-content: space-around;
	
		margin: 0px 0px -4px 0px;
	overflow: hidden;
}

.flex-container-left {
  display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
  
  /*min-height: 100vh;*/
	justify-content: flex-start;
	-ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;

    align-items: stretch;
  align-content: space-around;
	
		margin: 0px 0px -4px 0px;
	overflow: hidden;
}

.bg-shape-smarties-02{
	position: absolute;
	transform:translate(-84%, 24%); 
	width: 38vw;
	overflow: hidden;
}

/* Subscription Box */

.subscribe-container{
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 100vw;
	max-width: 100%;
	max-height: 100%;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.6);
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	visibility: hidden;
	opacity: 0;
}

.subscribe-active{
	opacity: 1;
	visibility: visible;
}

.subscribe-box{
	width: 40vw;
	height: 40vw;
	background-color: #f7e5db;
	border-radius: 2%;
	
	position: relative;
	margin: 0 auto;
	top: 50%;
	
  transform:  translateY(-50%);
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

}

.subscribe-form{
	position: relative;
  top: 50%;
  transform: translateY(-50%);
	
	border-style: none;
	padding: 0 2vw 0 2vw;
	height: 100%
}



.subscribe-title{
	padding: 1vw 0 0 0;
}

.subscribe-tboid{
	position: relative;
	top: -1.8vw;
}

.subscribe-title-02{
	margin: 0vw 0 2vw 0;
	
	
}

.subscribe-su-title{
	margin: 0vw 0 1.2vw 0;


	
}

.su-border{
	border-top: solid;
	border-top-width: 2px;
	width: 7vw; 
	margin: 0.6vw 0 0.6vw 0;
}


.subscription-text{
	margin: 0 0 1.4vw 0;
}

.subscription-text span{
	display: block;
	margin: 1vw 0 1vw 0;
}


.subscribe-email{
	width: 20vw;
	background-color: #efeee7;
	border: none;
	height: 30px;
	border-radius: 0px;
	
}

.subscribe-button{
	position: absolute;
	border: none;
	height: 30px;
	width: 6vw;
	background-color: #4d4d4c;
	color: #ffffff;
	border-radius: 0px;
}

.subscription-sub{
	
}

.subscription-logo{
position: absolute; 
	bottom: 1vw;
	right: 1vw;
	align-items: center;
    display: flex;
	
	display: -webkit-flex;
    -webkit-align-items: center;

}

.subscription-logo svg{
	width: 5vw;
	vertical-align: middle;
	margin-left: 4px;
}

.subscribe-close{
	position: absolute;
	top: 1vw;
	right: 1vw;
	width: 1.6vw;
}

/* Header */
.header{
	position: fixed;
	left: 50%;
    top: 0%;
    transform: translateX(-50%);
	z-index: 4;
	width: 100vw;
	max-width: 100%;


}
.header-remove{
	z-index: 0;
}

.header-container{
	width: 100%;
	height: 100%;
	
	align-items: center;
    display: flex;
	
	display: -webkit-flex; 
    -webkit-align-items: center;
}

.header-background{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	background-color: #ffffff;
	
}

.header-background-active{
	opacity: 1;
}

.header-image{
	width: 5.6vw;
	height: 3.1vw;
	margin: 8px 0 8px 14px;
	position: relative;
	opacity: 0;
}

.header-image-active{
	opacity: 1;
}




.menu-button{
	position: absolute;
	right: 4px;

	width: 34px;
	height: 34px;
	pointer-events: none;
	transition: 0.1s;
	
	z-index: 6;
	
}

.menu-button.scaled{
    transform: scale(0.5);
}

.menu-button svg{
    position: absolute;
    top: -33px;
    left: -33px;
}

.menu-icon-path{
	 stroke: #000000;
    stroke-width: 4px;
    stroke-linecap: square;
    fill: transparent;
	
	transition:stroke linear 0.3s;
	-webkit-transition: stroke linear 0.3s;
	-moz-transtion: stroke linear 0.3s;
	-ms-transistion: stroke linear 0.3s;
	-o-transition: stroke linear 0.3s;
	
}

.menu-button .menu-icon-trigger{
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
	z-index: 100;
}

 /*.toggle-nav {
     padding: 0px;
	 margin: 0 14px 0 0;
	 font-size: 2.6vw;
	z-index: 4;
	 vertical-align: middle;
	 
     transition:color linear 0.15s;
	 -webkit-transition: color linear 0.15s;
	-moz-transtion: color linear 0.15s;
	-ms-transistion: color linear 0.15s;
	-o-transition: color linear 0.15s;
}
 
.toggle-nav:hover, .toggle-nav.active {
    text-decoration:none;
    color:#a6b4c4;
}*/

/* Introduction Panel */
.intro-panel 
{
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
	max-width:100%; 
	max-height: 100%;
	overflow: hidden;
}




.canvas, .video {
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 50%; 
-webkit-transform: translate(-50%, 0); 

z-index: 0;
}



.canvas img {
	width: 100%;
	height: 100%;
}


.intro-text-container{
	position: relative;
	display: block;
	margin: 0vw 0 0 8vw;
  top: 50%;
}

.lfe-text-box{
	position: absolute;
	transform: translateY(-50%);
	
}

.intro-text-word{
position: relative;
}

.intro-text{
	/*top: 48%;
	 left: 50%; 
    -webkit-transform: translate(-50%, -50%); */
    position: absolute;
	transform: translateY(-50%);
}

.intro-sd-logo{
	 position: relative;
  	top: 50%;
 	transform: translateY(-50%);
	margin: 0 auto;
	width: 20vw;
	opacity: 1;
	
	transition:opacity linear 1s;
	-webkit-transition: opacity linear 1s;
	-moz-transtion: opacity linear 1s;
	-ms-transistion: opacity linear 1s;
	-o-transition: opacity linear 1s;
}

.intro-sd-logo-hide{
	opacity: 0;
}

.intro-text-01{
	-webkit-animation: 	txt-animation1 12s infinite ease-in-out;
	-moz-animation: 	txt-animation1 12s infinite ease-in-out;
	-o-animation: 		txt-animation1 12s infinite ease-in-out;
	-ms-animation: 		txt-animation1 12s infinite ease-in-out;
	animation: 			txt-animation1 12s infinite ease-in-out;
}

.intro-text-02{
	-webkit-animation: 	txt-animation2 12s infinite ease-in-out;
	-moz-animation: 	txt-animation2 12s infinite ease-in-out;
	-o-animation: 		txt-animation2 12s infinite ease-in-out;
	-ms-animation: 		txt-animation2 12s infinite ease-in-out;
	animation: 			txt-animation2 12s infinite ease-in-out;
}

.intro-text-03{
	-webkit-animation: 	txt-animation3 12s infinite ease-in-out;
	-moz-animation: 	txt-animation3 12s infinite ease-in-out;
	-o-animation: 		txt-animation3 12s infinite ease-in-out;
	-ms-animation: 		txt-animation3 12s infinite ease-in-out;
	animation: 			txt-animation3 12s infinite ease-in-out;
}


/* WebKit Animations */
@-webkit-keyframes txt-animation1 {
	0% {opacity: 0;}
	5%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@-webkit-keyframes txt-animation2 {
	0%, 5% {opacity: 0;}
	10%, 25%  {opacity: 1;}
	70%, 100% {opacity: 0;}
}

@-webkit-keyframes txt-animation3 {
	0%, 10% {opacity: 0;}
	15%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}



/* FireFox Animations */
@-moz-keyframes txt-animation1 {
	0% {opacity: 0;}
	5%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes txt-animation2 {
	0%, 5% {opacity: 0;}
	10%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes txt-animation3 {
	0%, 10% {opacity: 0;}
	15%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}






/* Opera Animations */
@-o-keyframes txt-animation1 {
	0% {opacity: 0;}
	5%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes txt-animation2 {
	0%, 5% {opacity: 0;}
	10%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes txt-animation3 {
	0%, 10% {opacity: 0;}
	15%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

/* Animations */
@keyframes txt-animation1 {
	0% {opacity: 0;}
	5%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes txt-animation2 {
	0%, 5% {opacity: 0;}
	10%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes txt-animation3 {
	0%, 10% {opacity: 0;}
	15%, 70%  {opacity: 1;}
	100% {opacity: 0;}
}

.invisible{
	visibility: hidden;
}

.intro-slideshow{
	width: 100vw;
	height: 100vh;
	max-height: 100%;
	max-width: 100%;
	
}

.intro-vid-ss{
	width: 100vw;
	height: 100vh;
	max-height: 100%;
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	opacity: 0;
	
	 -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.intro-ss-02{
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
left: 50%; 
-webkit-transform: translate(-50%, 0); 
	overflow: hidden;
	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	opacity: 0;
	z-index: 1;
}

.bcu-container{
	position: relative;
	
}

.bcu-bg-img{
	height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
object-fit: cover;
top: 0;
left: 0%; 
-webkit-transform: translate(0%, 0); 
}

.bcu-text{
	position: absolute;
	top: 0;
}

.bcu-left-text{
	
	float: left;
	width: 36vw;
	margin: 10vw 0 0 8vw;
	
	
}

.bcu-left-text img{
	width: 8vw;
	margin-top: 1vw;
}

.bcu-left-text span{
	display: block;
}

.bcu-right-text{
	float: left;
	width: 42vw;
	margin: 10vw 0vw 0 8vw;
	
}

.bcu-right-text span{
	display: block;
}

.bcu-updates{
	margin-top: 2vw;
}

.bcu-svg{
	opacity: 0.7;
	width: 50vw;
	float: right;
	position: relative;
	left: 60px;
	margin-top: 5vw
}


.intro-ss-03{
	width: 100vw;
	height: 100vh;
	max-height: 100%;
	max-width: 100%;
	background-color: #bbd700;
	position: absolute;
	top: 0;
	left: 0;
	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	opacity: 0;
	z-index: 1;
}

.ss-active{
	opacity: 1;
}

.intro-button-container{
	position: absolute;
	bottom: 5%;
	left: 50%;
	z-index: 2;
}

.ss-button-pos{
	position: relative;
	left: -50%;
}

.ss-button-rect{
	fill: #efeee7;
	width: 100%;
	height: 100%;
	
	transition: fill linear 0.15s;
	-webkit-transition: fill linear 0.15s;
	-moz-transtion: fill  linear 0.15s;
	-ms-transistion: fill  linear 0.15s;
	-o-transition: fill  linear 0.15s;
	
}

.ss-button-rect-reveal{
	opacity: 1;
}

.ss-button-svg{
	width: 30px;
	height: 6px;
	margin: 0 0.7vw 0 0.7vw;
	transition: opacity linear 1s;

	
}

.intro-button-01.active {
	
	fill: #A6b4c4;
}

.intro-button-02.active {
	
	fill: #A6b4c4;
}

.intro-button-03.active {
	
	fill: #A6b4c4;
}

.intro-button-01.inactive {
	
	fill: #efeee7;
}

.intro-button-02.inactive {
	
	fill: #efeee7;
}

.intro-button-03.inactive {
	
	fill: #efeee7;
}

.intro-button-01:hover {
	
	fill: #A6b4c4;
}

.intro-button-02:hover {
	
	fill: #A6b4c4;
}

.intro-button-03:hover {
	
	fill: #A6b4c4;
}

/* Text Panels */

.sd-text-container{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0% 0 0% 0;
	overflow: hidden;
}

.sd-text-box{
	position: relative;
 float: left;
	margin: 14vw 0 14vw 8vw;
}

.hello-text{
	width: 50%;
}

.lfe-text {
	width: 50%;
	
}

.innovation-text{
	width: 50%;
}

.tribe-text{
	width: 50%;
}

.trusted-text{
	width: 50%;
}

.sd-text-box-right{
	position: relative;
	float: right;
	margin: 14vw 10vw 14vw 0vw;
	overflow: hidden;
}

.sd-text-box-brands{
	position: relative;
	float: right;
	margin: 14vw 10vw 4vw 0vw;
	overflow: hidden;
}

.sd-text-box-capabilities{
	position: relative;
	float: right;
	margin: 14vw 10vw 6vw 0vw;
	overflow: hidden;
}

.sd-text-heading{
	padding: 0px 0 0px 0;
	
}
.sd-text-title{
	padding: 0px 0 0px 0;

}
.sd-text-paragraph{
	padding: 2vw 0 0px 0;
}

.sd-text-paragraph span{
	display: block;
}

.sd-text-sub{
	padding: 2vw 0 0px 0;
}

.bg-shape-01{
	position: relative;
	float: right;
	transform:translate(38%, 24%); 
	width: 28vw;
	overflow: hidden;
	
}

.bg-shape-02{
	position: absolute;
	float: left;
	transform:translate(-84%, 24%); 
	width: 38vw;
	overflow: hidden;
}

.bg-shape-03{
	position: relative;
	float: left;
	transform:translate(-44%, 35%); 
	width: 20vw;
	overflow: hidden;
}

.bg-shape-04{
	position: relative;
	float: right;
	transform:translate(62%, 84%); 
	width: 34vw;
	overflow: hidden;
	
}

.bg-shape-05{
	position: relative;
	float: left;
	transform:translate(-44%, 34%); 
	width: 30vw;
	overflow: hidden;
}

/* Work Panel */

.work-container{
	position: relative;
	width: 100%;
}

.work-title{
	margin: 2vw 0 0 8vw;
	position: absolute;
	z-index: 1;
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
}

.work-title-hide{
	opacity: 0;
}

.work {
	width: 50vw;
	max-width: 50%;
	height: 33vw;
	float: left;
	position: relative;
}

.work-large {
	width: 50vw;
	max-width: 50%;
	height: 66vw;
	float: left;
	position: relative;
}

.work-right {
	width: 50vw;
	max-width: 50%;
	height: 33vw;
	float: right;
	position: relative;
}

.work-right-large {
	width: 50vw;
	max-width: 50%;
	height: 66vw;
	float: right;
	position: relative;
}

.work img {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.work-right img {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.work-large img {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.work-right-large img {
	width: 100%;
	height: 100%;
	vertical-align: top;
}



.work-overlay{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
z-index: 2;
}

.squashd-work-overlay{
	opacity: 0;
  transition: .5s ease;
}

.tequila-work-overlay{
	opacity: 0;
  transition: .5s ease;
}

.rtu-work-overlay{
	opacity: 0;
  transition: .5s ease;
}

.goldie-work-overlay{
	opacity: 0;
  transition: .5s ease;
}

.work-overlay-active {
  opacity: 1;
}



.overlay-box{
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #ffffff;
	width: 100%;
	height: 7vw;
}

.overlay-category{
	margin: 5vw 6vw 1% 6vw;
}

.overlay-title{
	margin: 1% 6vw 2% 6vw;
	
}

.overlay-text{
	margin: 0% 6vw 0% 6vw;
}

.overlay-text-list{
	padding-top: 1vw;
}

.overlay-logo{
	display: inline-block;

}

.overlay-britvic{
		padding-left: 9vw;
		width: 27%;
	transform: translateY(26%);
}

.overlay-bs{
	width: 27%;
	transform: translateY(26%);
	padding-left: 9vw;
}

.overlay-nne{
	width: 7vw;
	transform: translateY(26%);
	padding-left: 9vw;
}


.overlay-op{
	width: 6vw;
	transform: translateY(20%);
	padding-left: 1vw;
}

.overlay-pg{
	width: 9vw;
	transform: translateY(20%);
	padding-left: 9vw;
}

.overlay-gold{
	width: 18%;
	transform: translateY(20%);
}

.overlay-grazia{
	width: 6vw;
	transform: translateY(12%);
	padding-left: 1vw;
}

.overlay-highcom{
	width: 10vw;
	transform: translateY(10%);
	padding-left: 1vw;
}

.overlay-cross{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 7vw;
	width: 7vw;
}

.overlay-cross-svg{
	position: relative;
	top: 30%;
	left: 30%;
	height: 40%;
	width: 40%;
	
	transform-origin: center;
	
	-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
	
}

.overlay-cross-spin{
 -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg); 
    -o-transform:rotate(135deg);
}

.squashd-overlay-box{
	background-color: #bbd700;
}

.tequila-overlay-box{
	background-color: #bbd700;
}

.rtu-overlay-box{
	background-color: #e13213;
}

.goldie-overlay-box{
	background-color: #e13213;
}

/* Brands Panel */
.brands-container{
	width: 100%;
	position: relative;
}

.brands-images-container{
	position: relative;
	width: 84vw;
	margin: 0 auto;
	margin-bottom: 6vw;
}
.brands-image{
	display: inline-block;
	width: 10vw;
	height: 10vw;
maximum-width:10%;
	padding: 1vw 3vw 0 3vw;
}

.brands-image img{
	width: 100%;
	height: 100%;
}

.brands-title{
	position: relative;
	margin: 0vw 0 1vw 8vw;
	padding-top: 4vw;
}

/* Capabilities Panel */

.capabilities-container{
	position: relative;
	padding:  2vw 0 8vw 0;	
}

.capabilities-title{
	margin: 0 0 0vw 8vw;
	
}

.capabilities-text{
	margin: 2.4vw 0 0 0;
	
}

.capabilities-text span{
	display: block;
}

.capabilities-ani {
	width: 84vw;
	position: relative;
	top: 30%;
	margin: 0 auto;
	
}

.grey-wiggle {
	width: 100%;
	height: auto;
	position: relative;
}

.grey-wiggle-inverse{
	position: absolute;
	width: 100%;
	height: auto;
	vertical-align: top;
	opacity: 0;
	top:  0;
	left: 0;
	
}

.capabilities-images {
	width: 100%;
	height: auto;
	position: absolute;
	top:  0;
	left: 0;
}

.colour-wiggle {
	position: absolute;
	width: 100%;
	height: auto;
	vertical-align: top;
	visibility: hidden;
	top:  0;
	left: 0;
}

.circles{
	position: absolute;
	width: 100%;
	height: auto;
	vertical-align: top;
	opacity: 0;
	top:  0;
	left: 0;
}

.capabilities-opacity-transition{
	transition:opacity linear 0.5s;
	-webkit-transition: opacity linear 0.5s;
	-moz-transtion: opacity linear 0.5s;
	-ms-transistion: opacity linear 0.5s;
	-o-transition: opacity linear 0.5s;
}

.opacity-one{
	opacity: 1;
}

.ani-titles-container{
	position: relative;
	display: flex;
	justify-content: space-between;
	
	display: -webkit-flex;
	-webkit-justify-content: space-between; 

}

.ani-titles{
	 display: block;
	align-items: center;
	    -webkit-align-items: center;
	padding-top: 2%;
	justify-content: center;
	-webkit-justify-content: center; 
	
	cursor: pointer;
}

.inspire-title{
	position: relative;
	left: 6vw;
}

.ideate-title{
	position: relative;
	left: 7vw;
}

.develop-title{
	position: relative;
	left: 7vw;
}

.activate-title{
	position: relative;
	left: 5vw;
}

.capabilities-dropdown-container{
	
	
}

.dropdown-content{
	margin: 4vw 0 0 8vw;
	width: 60%;
	
	
}

.dropdown-content ul{
	list-style: none;	
}

.dropdown-content-inspire{
	display: none;

}

.dropdown-content-ideate{
	display: none;
}

.dropdown-content-develop{
	display: none;
}

.dropdown-content-activate{
	display: none;
}

.inspire-cross{
	fill: #bbd700;
}

.ideate-cross{
	fill: #e13213;
}

.develop-cross{
	fill: #6b3159;
}

.activate-cross{
	fill: #3c516c;
}

.inspire-lm-text{
	color: #bbd700;
}

.ideate-lm-text{
	color: #e13213;
}

.develop-lm-text{
	color: #6b3159;
}

.activate-lm-text{
	color: #3c516c;
}

.capabilities-title-cross{
	z-index: 2;
	height: 1.2vw;
	width: 1.2vw;
	
	padding: 0;
	margin: 0;
}

.capabilities-cross-svg{
	transform-origin: center;
	
	-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
	
}

.capabilities-learn-more-container{
	display: inline-flex;
	display: -webkit-inline-flex;
	
	align-items: center;
	-webkit-align-items: center;
	
	
	
	-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
	
}

.capabilities-learn-more{
	padding: 0;
	margin-left: 3px;
	
}

/* Contact Panel */

.map-container{
	width: 50vw;
	height: 56.25vw;
	float: left;
	position: relative;	
	max-width:50%; 
	max-height: 100%;
}

#gmap{
	height: 100%;
        width: 100%;
}

.contact-container{
	background-color: #262626;
	width: 100%;
	position: relative;
	
	margin: 0px 0px -4px 0px;
	overflow: hidden;
}

.studio-picture{
	width: 50vw;
	max-width: 50%;
	height: 28.125vw;
	max-height: 28%;
	float: left;
	position: relative;
}

.studio-picture img{
	width: 100%;
}

.contact-text{
	width: 50%;
	position: relative;
	float: left;
}

.contact-text span {
	display: block;
}

.contact-details{
	display: block;
	padding: 0 0 0 2%;
}


.contact-address{
	display: block;
	padding: 1% 0 0 2%;
	margin-bottom: 2%;
}

.phone{
	
}

.email{
	
}

.legal {
	
	position: absolute;
	bottom: -0px;
	right: 1%;
	padding: 0 0 0% 0%;
}

.legal span{
	display: block;
	text-align: right;
}

.contact-subscribe{
	padding: 10% 0 0 1%;
}

.contact-sub-title div{
	display: inline-block;
	margin: 0 0 0 0.6vw;
}

.contact-sub-email{
	width: 22vw;
	padding: 0;
	margin:  0 0 0 1%;
	border-style: none;
	background-color: #565656;
	height: 30px;
	border-radius: 0px;
}

.contact-sub-button{
	padding: 0;
	margin:  0 0 0 0;
	border-style: none;
	height: 30px;
	width: 6vw;
	position: absolute;
	background-color: #bbd700;
	border-radius: 0px;
}

/* Menu Panel */
.menu-container{
	position: absolute;
	bottom: 0px;
}

 .menu {
    padding: 0;
	margin: 0 auto;
}
 
.menu-box {
    display: block;
	padding: 0;
	position: fixed;
	left: 50%;
    top: 0%;
    transform: translateX(-50%);
	 width: 100vw;
    height: 100vh;
	max-width:100%; 
	max-height: 100%;
	background:#bbd700;
	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	visibility: hidden;
	opacity: 0;
	z-index: 3;
}

.menu-box ul{
	position: relative;
	top: 25vh;
	margin: 0 auto;
	padding: 0;
}

.menu-active{
	visibility: visible;
	opacity: 1;
}

.menu-home, .menu-hello, .menu-work, .menu-brands, .menu-capabilities, .menu-contact {
	color:#ffffff;
    transition:color linear 0.15s;
	-webkit-transition: color linear 0.15s;
	-moz-transtion: color linear 0.15s;
	-ms-transistion: color linear 0.15s;
	-o-transition: color linear 0.15s;
}

.menu-home:hover, .menu-home.active{
    text-decoration:none;
    color: #a6b4c4;
}
 
.menu-hello:hover, .menu-hello.active{
    text-decoration:none;
    color: #a6b4c4;
}

.menu-work:hover, .menu-work.active{
    text-decoration:none;
    color: #a6b4c4;
}

.menu-brands:hover, .menu-brands.active{
    text-decoration:none;
    color: #a6b4c4;
}

.menu-capabilities:hover, .menu-capabilities.active{
    text-decoration:none;
    color: #a6b4c4;
}

.menu-contact:hover, .menu-contact.active{
    text-decoration:none;
    color: #a6b4c4;
}

.menu li {
    display: block;
    list-style:none;
}


.menu-selection{
	text-decoration:none;
    color: #ffffff;
}

.close-menu{
	position: absolute;
	top: 2%;
	right: 2%;
	width: 3vw;
}

/*Legal*/
.text-container{
	margin: 5vw 10vw 0 10vw;
}

.legal-title{
	margin: 2vw 2vw 1vw 0;
}

.text-container span{
	display: block;
	margin: 1vw 0 1vw 0;
}

.legal-image{
	width: 20vw;
	margin: 10vw 0 0 10vw;
}


/* Mobile */
@media (max-width : 480px ){
	
/* Font Sizes */
.font-size-0p6{
	font-size: 2vw;
}

.font-size-0p8{
	font-size: 2vw;
}

.font-size-1p2vw{
	font-size: 2.4vw;
}

.font-size-address{
	font-size: 4vw;
}
	
.font-size-1p2t2vw{
	font-size: 2vw;
}
	
.font-size-1p3vw{
		font-size: 3vw;
}
	
	.font-size-1p4vw{
		font-size: 3vw;
	}

	
.font-size-1p8vw{
	font-size: 3vw;
}	
	
.font-size-2vw{
	font-size: 4vw;
}
	
.font-size-2p6vw{
	font-size: 5.6vw;
}

.font-size-2p8vw{
	font-size: 5vw;
}
	
.font-size-3p6vw{
	font-size: 8vw;
}
	
.font-size-4vw{
	font-size: 12vw;
}
	
.font-size-7vw{
	font-size: 16vw;
}
	
.font-size-8vw{
	font-size: 18vw;
}

/* Font styles */
	
.letter-spacing-3px{
	letter-spacing: 1px;
}
	
.letter-spacing-3t2px{
	letter-spacing: 2px;
}

/* Line Heights */
	
.line-height-0p9em{
	line-height: 0.9em;
}	

.line-height-1p2em{
	line-height: 1.2em;
}

.line-height-9vw{
	line-height: 22vw;
}

.line-height-120percent{
	line-height: 4vw;
}

.line-height-120percentt3vw{
	line-height: 3vw;
}
	
/*Subscribe*/
	
.subscribe-box{
	width: 80vw;
	height: 64vh;
}	
	
.subscribe-title{
	padding: 3vw 0 0 0vw;
}
	
.subscribe-tboid{
	top: -5vw;
}
	
.su-border{
	border-top-width: 1px;
	width: 16vw; 
	margin: 2vw 0 2vw 0;
}

.subscription-text{
	margin: 0 0 4vw 0;
	line-height: 140%;
}
	
.subscribe-email{
	margin-top: 0.4vw;
	width: 40vw;
}

.subscribe-button{
	margin-top: 1vw;
	width: 20vw;

	
}
	
.subscribe-close{
	top: 2%;
	right: 2%;
	width: 5vw;
}
	
.subscription-logo{

	bottom: 1vw;
	right: 1vw;

}

.subscription-logo svg{
	width: 14vw;

}
	
/* Header */
	
.header{

	}
	
.header-image{
	width: 20vw;
	height: 11.1vw;
	margin: 3px 0 4px 8px;

	
	 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
}
	
	.header-background{

		
		 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	}
	
.toggle-nav {
	 margin: 0 6px 0 0;
     font-size: 12vw;
}
	
/* Intro Panel */
	
.intro-sd-logo{
		width: 40vw;
		top: 50%;
}

.intro-text{

	width: 80%;
	margin: 0 0 0 0vw;
	
}
	
.ss-button{

	

	margin: 0 1.4vw 0 1.4vw;
}
	

	
	.bcu-left-text{
		width: 80vw;
		margin: 20vw 0 0 8vw;
	}
	.bcu-right-text{
		width: 80vw;
	}
/* Text Panels */
.sd-text-paragraph{
	padding: 5vw 0 0px 0;
}

.sd-text-box-right{
	margin: 14vw 0vw 14vw 8vw;
	float: left;
}
	
.hello-text{
	width: 80%;
}

.lfe-text {
	padding-top: 10px;
	width: 80%;
	
}
	
.innovation-text{
	padding-top: 10px;
	width: 80%;	
}
	
.tribe-text{
		width: 80%;
}
	
.trusted-text{
padding-top: 10px;
width: 80%;
	}

.bg-shape-03{

	transform:translate(-44%, 44%); 
	width: 20vw;
}
	
.bg-shape-04{

	transform:translate(62%, -60%); 
	width: 34vw;

	
}
	
	.bg-shape-05{
	transform:translate(-44%, 34%); 
	width: 30vw;
}
	
/* Work Panel */
.work {
	width: 100vw;
	max-width: 100%;
	height: 66vw;
	float: left;
	position: relative;
}
	
.work-large {
	width: 100vw;
	max-width: 100%;
	height: 133vw;
	float: left;
	position: relative;
}
	
.work-right {
	width: 100vw;
	max-width: 100%;
	height: 66vw;
	float: left;
	position: relative;
}

.work-right-large {
	width: 100vw;
	max-width: 100%;
	height: 133vw;
	float: left;
	position: relative;
}
	
.work-title{
	margin: 10px 0 0 8vw;
	
}
	
.overlay-category{
	margin: 8vw 2% 0% 8vw;
}

.overlay-title{
	margin: 0% 0% 0% 8vw;
	
}
	
.overlay-text{
	margin: 1% 6% 0% 8vw;
}

.overlay-text-list{
	padding-top: 2vw;
}
	
.overlay-cross{
	height: 12vw;
	width: 12vw;
}

.overlay-box{
	height: 12vw;
	
}
	
.overlay-britvic{
	width: 27%;
	transform: translateY(20%);
	padding-left: 14vw;
}
	
.overlay-bs{
	width: 27%;
	transform: translateY(20%);
	padding-left: 14vw;
}
	
.overlay-nne{
	width: 14vw;
	transform: translateY(16%);
	padding-left: 14vw;
}
	
.overlay-pg{
	width: 14vw;
	transform: translateY(22%);
	padding-left: 14vw;
}

.overlay-gold{
	width: 18%;
	transform: translateY(12%);
	padding: 0;
}
	
.overlay-op{
	width: 10vw;
	transform: translateY(16%);
	padding-left: 1vw;
}
	
.overlay-grazia{
	width: 10vw;
	transform: translateY(16%);
	padding-left: 1vw;
}
	
.overlay-highcom{
	width: 15vw;
	transform: translateY(14%);
	padding-left: 1vw;
}

/* Brands Panel */
.brands-images-container{
	width: 77vw;
}
.brands-image{
	width: 18vw;
	height: 18vw;
	maximum-width: 18vw;
	maximum-height: 18vw;
}

.brands-title{
	margin: 0vw 0 16px 8vw;
	padding-top: 0vw;
}
	
/* Capabilities Panel */
.capabilities-title{
	margin: 10px 0 16px 8vw;	
}
	
.capabilities-title-cross{
	height: 6vw;
	width: 6vw;
}
	
	
	
.ani-titles-container{

	width: 100vw;
	max-width: 100%;
	left: 0vw;
}

.ani-titles{
	padding-top: 2%;

}

.ani-titles div{
	margin: 1px;
	
}

.inspire-title{

	left: 0%;
}

.ideate-title{

	left: 1%;
}

.develop-title{

	left: 1%;
}

.activate-title{
	
	left: 1%;
}

	.dropdown-content{
		width: 82vw;
		max-width: 82%;
	}
	
.capabilities-title-cross{
	width: 3vw;
	height: 3vw;
		padding: 0;
	margin: 0;
}
.capabilities-learn-more{
	padding: 0;
	margin: 0 auto;
}
	
/* Contact Panel */

.map-container{
	width: 100vw;
	height: 80vh;
	max-width: 100%;
	max-height: 80%;
}
	
.studio-picture{
	width: 100vw;
	max-width: 100%;
	height: 56.25vw;
	max-height: 56%;
}
	
.contact-text{
	width: auto;
	float: left;
	position: relative;
	margin: 1vw 0 20vw 1vw;
}

.contact-sub-email{
	width: 50vw;
	height: 30px;
}

.contact-sub-button{
	width: 20vw;	
}
	
/* Menu Panel */
	
	.menu-box ul{
		
	}

.menu li {

}
	
.close-menu{
	width: 12vw;
}

	
}
/* Small Tablets */
@media (min-width: 481px)and (max-width: 768px) {

/* Header */	
	
.header{

		}	
	
.header-image{
	width: 14vw;
	height: 7.75vw;
	padding: 3px 0 4px 8px;
	
		 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
}
	
.header-background{
		 transition:opacity linear 0.15s;
	-webkit-transition: opacity linear 0.15s;
	-moz-transtion: opacity linear 0.15s;
	-ms-transistion: opacity linear 0.15s;
	-o-transition: opacity linear 0.15s;
	}
	
.toggle-nav {
	 margin: 0 6px 0 0;
	
     font-size: 8vw;
}
	
/* Header */	
.header-image{
	width: 14vw;
	margin: 3px 0 2px 8px;
}
	
.toggle-nav {
	 margin: 0 6px 0 0;
     font-size: 8vw;
}

.ss-button{


	margin: 0 1.4vw 0 1.4vw;
}
	
/* Capabilities Section */
	

	
}
/* Small Desktops */
@media (min-width: 769px) and (max-width: 1096px) {

.font-size-1p2vw{
	font-size: 1.5vw;
}
	
	
}