/** ------------------------------------------------------ **/
/** -------------------2 column layout -------------------- **/
body {
	background-color: #FFFFFF;
	color: #000000;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0px;
	text-align: center;
}

#skip-navigation{
	height:0px;	
	overflow: hidden; 
}

.container{
	/*overflow:auto;*/
	padding-left:38px;
	padding-right:38px;
	text-align: left;
}	

.wrap{
	margin: 0 auto;	
	width: 1180px;
}
* html .wrap {  /* This is the Tan hack */
	width: 1180px; 
	w\idth: 1180px; 
	}

#headerContainer{
	background-color:#ffffff;
	border-bottom: 1px solid #edeae7;
	position:sticky;
	top:0px;
	left:0px;
	width:100%;
	z-index:200;
	padding-top: 18px;
    padding-bottom: 18px;
}

#header{
	display:flex;
	justify-content: space-between;
	align-items:center;
	position: relative;
	text-align:left;	
}

#strapline{
	display:block;
	float:left;
	font-size:1.3em;
	font-weight: 600;
	padding-left:25px;
	letter-spacing: 1px;
}	

#mainContent{
	background-color:#FFFFFF;
}		

#centerc{
	display: inline;
	float:left;
	margin-left:200px;
	padding-left: 25px;
	padding-right: 15px;
	width:740px;
}
* html #centerc {  /* This is the Tan hack */
	width: 780px; 
	w\idth: 740px; 
	}

#leftc{
	float:left;
	margin-left:-980px;
	width: 200px;
}

#banner {
	position:relative;
}

#sliderhome{
	position:relative;
	list-style-type:none;
	margin: 0px;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width:100%;
}

#sliderhome li{
	padding: 0px;	
	margin: 0px;
	width:100%;
	text-align: left;
	/* uncomment below if bxslider is set to fade */
	/* bxslider applies absolute positioning when using fade causing slider to shift to the right in IE7 */
	left:0px; 
}

#sliderhome li img {
	height: auto;
	width: 100%;
	object-fit: cover;
	object-position: center;
}


#banner .bx-wrapper {
	width: auto !important;
}
#banner .bx-window {
	width: auto !important;
}

#banner .bx-controls {
	position: absolute;
	top: 90px;
	right: 5%;
	z-index: 151;
}

#banner a.bx-next:after {
	content: '';
	display: inline-block;
	border-top: 15px solid #ffffff;
	border-right: 15px solid #ffffff;
	height: 110px;
	width: 110px;
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#bannerContent{
	cursor: pointer;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 150;
}	

#banner .bannerImg, #bannerContent{
	display:block;
	height:auto;
	width: 100%;
	max-width: 100%;
}	

#bannerText{
	background: rgb(136, 133, 131), transparent;
	background: rgba(136, 133, 131, 0.71);
	position:absolute;
	top:0px;
	left:96px;
	text-align:left;
	height: 100%;
	padding-left: 40px;
	padding-right: 40px;
	width:598px;
}
* html #bannerText {
	width: 678px;
	w\idth: 598px;
}

#bannerText h1{
	border-bottom: 9px solid #ffffff;
	color:#FFFFFF;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	margin-bottom:0px;
	/*padding-top:52px;*/
}

#bannerTextInner{
	border-top: 9px solid #ffffff;
	margin-top:97px;
	padding: 0px;
	padding-bottom:52px;
	/*width:1024px;*/
}	

#bannerText h2{
	background: none;
	color: #ffffff;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 4.4em;
	margin-top:-18px;
	text-transform: uppercase;
}

#bannerText h2 span {
	border-bottom: 9px solid #ffffff;
	display: block;
	width: 100%;
}

#bannerText ol li, #bannerText p{
	color:#FFFFFF;
	font-size: 2.5em;
	line-height: 1.2em;
	padding:0px;
}	


#bannerText a.buttonLink, #bannerText a.buttonLink:visited{
	border:5px solid #FFFFFF;
	color:#FFFFFF;
	text-transform: uppercase;
}	
#bannerText a.buttonLink:hover{
	border:5px solid #eb0853;
	text-transform: uppercase;	
}

#bannerText div#pager {
	margin: 0 auto;
	width: 150px;
}

#bannerText div#pager div.bx-pager-item {
	color: #ffffff;
	display: inline-block;
	float: left;
	margin: 5px;
	box-sizing: border-box;
	border: 2px solid #ffffff;
	border-radius: 10px;
	height: 18px;
	width: 18px;
	text-align: center;
}

#bannerText div#pager div.bx-pager-item a, #bannerText div#pager div.bx-pager-item a:visited {
	color: transparent;
	text-decoration: none;
	display: block;
	box-sizing: border-box;
	border-radius: 10px;
	height: 100%;
	width: 100%;
}

#bannerText div#pager div.bx-pager-item a:hover, #bannerText div#pager div.bx-pager-item a:focus {
	background-color: #ffffff;
	text-decoration: none;
}

#bannerText div#pager div.bx-pager-item a.active {
	background-color: #ffffff;
	text-decoration: none;
}


#bannerScroll{
	background: rgba(136, 133, 131, 0.71);
	box-sizing: border-box;
	border: 3px solid #ffffff;
	cursor:pointer;
	position:absolute;
	bottom:48px;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	height: 63px;
	width:63px;
	transition: all 0.3s ease-in-out;
}

#bannerScroll:after {
	    content: '';
	    display: inline-block;
	    border-top: 3px solid #ffffff;
	    border-right: 3px solid #ffffff;
	    position: absolute;
	    right: 17px;
	    bottom: 21px;
	    height: 20px;
	    width: 20px;
	    -moz-transform: rotate(136deg);
	    -webkit-transform: rotate(136deg);
	    transform: rotate(136deg);
	    transition: all 0.3s ease-in-out;
}

#bannerScroll:hover {
	border: 3px solid #ed0f68;
}

#bannerScroll:hover::after {
	    border-top: 3px solid #ed0f68;
	    border-right: 3px solid #ed0f68;
}

#bannerContact {
	background-image: url(/images/get-touch-banner-bg.png);
	background-repeat: no-repeat; 
	height: 125px;
	position: absolute;
	right: 240px;
	top: 85px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 40px;
	width: 95px;
}
* html #bannerContact {
	height: 165px;
	he\ight: 125px;
	width: 155px;
	w\idth: 95px;
}

#bannerContact span {
	color: #ffffff;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 2.5em;
}

.bannerLogo {
	position: absolute;
	right: 103px;
	bottom: 72px;
}

/** ------------------------------------------------------ **/
/** ------------------- header --------------------------- **/

#header_graphic{
	float:left;
	position:relative;
	z-index:500;
	justify-content: center;
    align-items: center;
    display: flex;
}

#header_graphic img{
	display:block;
	float:left;
	height: auto;
	width: 117px; 
}

#header-right-container {
	display:flex;
	justify-content: center;
	align-items: center;
}

#headerContact, #header-cta-btn {
	margin-left:25px;
}
#headerContact {
    border: 2px solid #000;
    border-radius: 100%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#headerContact:hover svg {
	color: #eb0853;
	fill: #eb0853;
}
#headerContact:hover {
	border-color: #eb0853;
}
#headerContact a {
    color: #000000;
    text-decoration: none;
    line-height: 0;
}


#header-cta-btn a {
    border-radius: 24px;
    font-size: 1.1rem;
    padding: 12px 15px;
    margin-bottom: 0px;
    line-height: 1em;
}

.mobileButtonText {
	display: none;
}


/** ------------------------------------------------------ **/
/** -------------------navigation ------------------------ **/

/*#nav-icon {
    background-image: url(../images/navicon.gif);
    background-position: right;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    float: right;
    height: 16px;
    margin-top: 27px;
    padding-top: 9px;
    text-decoration: none;
    text-transform: uppercase;
    width: 90px;
}
* html #nav-icon{
	height:25px;
	he\ight:16px;
}*/



#navigation{
	padding-bottom: 0px;
	/*width:800px;*/
}

#navigation ul {
	list-style: none;
	margin: 0px;
	padding: 0px;

}
#navigation ul li {
	display: inline-block;
	float: left;
	padding: 0;
	margin: 0px;
	/*width: 138px; */
}
#navigation ul li a, #navigation ul li a:visited {
	color: #000000;
	cursor: pointer;
	display: inline-flex;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.1rem; 
	font-weight:600;
	letter-spacing: 1px;
	margin-left: 12px;
	margin-right: 12px;
	text-align: center;
	text-decoration: none;
}
#navigation ul li a:hover, #navigation ul li a:active {	
	color: #eb0853;	
}

#navigation ul .Nav-icon-link {
	display:none;
}

#navigation ul li a::after, #navigation ul li a::after {
	content: "";
	display: block;
	margin-top: 2px;
	border-bottom: 2px solid #eb0853;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: transform 250ms ease-in-out;
	-moz-transition: transform 250ms ease-in-out;
	-o-transition: transform 250ms ease-in-out;
	transition: transform 250ms ease-in-out;
}

#navigation ul li a:hover:after, #navigation ul li a:hover:after {
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}

#static-navigation ul li div.subNav div.col-3 a:after, #static-navigation ul li div.subNav div.col-3 a:hover:after {
	display:none;
}

#navigation ul li a#contact{
	margin-right:0px;
}	

/*#navigation ul li div.bgPink {
	background-color: #e500a4;
	clear: both;
	height: 9px;
	margin: 0 auto;
	width: 45px;
}*/


#static-navigation ul li div.subNav {
	background: #bcbdc0;
	display: block;
	margin: 0px;
	padding-bottom:42px;
	padding-top: 45px;
	position: fixed;
	top:88px;
	left:-9999px;
	width: 100%;
	z-index: 199;
	transition: all 1s ease-in-out;

}

#static-navigation ul li:hover div.subNav{
	left:0px;
	/*top: 108px;*/
	/*display: block;*/
}

#static-navigation ul li div.subNav div.container:before {
	content: '';
    display: inline-block;
    border-top: 15px solid #ffffff;
    border-right: 15px solid #ffffff;
    position: absolute;
    left: 5%;
    top: 10%;
    height: 110px;
    width: 110px;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#static-navigation ul li div.subNav div.wrapper-inner {
	margin: 0 auto;
	max-width: 1180px;
	width: 80%;
}

#static-navigation ul li div.subNav h2 {
	color: #ffffff;
	margin-top: 0px;
}

#static-navigation ul li div.subNav div.col-3 {
	background-size: cover;
	background-repeat: no-repeat;
	box-sizing: border-box;
	float: left;
	margin-bottom: 2%;
	margin-left: 2%;
	overflow: hidden;
	padding: 2%;
	position: relative;
	width: 32%;
}

#static-navigation ul li div.subNav div.wrapper-inner div.col-3-first { 
	margin-left: 0px; 
}

#static-navigation ul li div.subNav div.col-3 div.navText {
	border-top: 9px solid #ffffff;
	float: left;
	position: absolute;
	width: 60%;
	text-align: left;
	z-index: 2;
}

#static-navigation ul li div.subNav div.col-3 a {
	height: 100%;
	width: 100%;
} 


#static-navigation ul li div.subNav div.col-3 h2 {
	background: none;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.6em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
}

#static-navigation ul li div.subNav div.col-3 h2 span {
	border-bottom: 9px solid #ffffff;
	display: block;
	width: 100%;
}

#static-navigation ul li div.subNav div.col-3:after {
	content: '';
    display: inline-block;
    border-top: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    position: absolute;
    right: 7%;
    bottom: 7%;
    height: 40px;
    width: 40px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#static-navigation ul li div.subNav div#brand-design{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812789/uc4_media/brand-design_m9bmpf.webp);
	background-repeat: no-repeat;  
}
#static-navigation ul li div.subNav div#graphic-design{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812792/uc4_media/graphic-design_wci65m.webp);
	background-repeat: no-repeat;  
}
#static-navigation ul li div.subNav div#website-design{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812792/uc4_media/website-design_bbav79.webp);
	background-repeat: no-repeat;  
}
#static-navigation ul li div.subNav div#e-commerce{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812792/uc4_media/website-design_bbav79.webp); 
	background-repeat: no-repeat; 
}
#static-navigation ul li div.subNav div#seo{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812788/uc4_media/seo_iyi5gk.webp);
	background-repeat: no-repeat;  
}
#static-navigation ul li div.subNav div#digital-marketing{
	background: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732812792/uc4_media/website-design_bbav79.webp);
	background-repeat: no-repeat;  
}
#static-navigation ul li div.subNav div.navbg {
	opacity: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;  
}

.navHover {
	opacity: 0;

}



#navigation ul li a#close-sub{
    color: #FFFFFF;
	font-size: 3.6em;	
	line-height:1.3em;
	margin:0px;
    padding: 0px;
    position: absolute;
    top: 30px;
    right: 38px;	
    width: 30px;	
}



	
/** ------------------------------------------------------ **/
/** ------------------------ menu ------------------------ **/

#menu ul {
	list-style: none;
	margin: 0px;
	margin-bottom: 8px;
	padding: 0px;	
}
#menu ul li {
	margin: 0; 
	padding: 0; 
}

#menu ul li a, #menu ul li a:visited {
	border-bottom: 1px solid #666666;
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 0px;
	padding-top: 5px;
	text-decoration: none;
	/*width avoids extra whitespace in ie5-6*/
	width: 185px;
}
* html #menu ul li a, #menu ul li a:visited {  /* This is the Tan hack */
	width: 200px; 
	w\idth: 185px; 
	}
.menu_header {
	border-bottom: 1px solid #666666;
	display: block;  
	font-weight: bold;	
	padding-bottom: 5px; 
	padding-left: 15px;	
	padding-right: 0px;	
	padding-top: 5px; 
	text-decoration: none;	
	/*width avoids extra whitespace in ie5-6*/
	width: 185px;
}
* html .menu_header {  /* This is the Tan hack */
	width: 200px; 
	w\idth: 185px; 
	}


/** ------------------------------------------------------ **/
/** ------------------- footer --------------------------- **/

#foot{
	background-color:#353839;
	clear: both;
	padding-top:60px;
}

#foot h2{
	background-image:url(../images/h2foot.gif);
	background-position: left bottom;
	color:#FFFFFF;
	font-size:1.2em;	
    margin: 0px;
    margin-bottom: 24px;
    padding: 0px;
    padding-bottom: 35px;
}

#foot ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

#foot ul li{
	color:#b0b8bc;
	font-size:1.1em;
	line-height:2.4em;
}

#foot ul li a, #foot ul li a:visited{
	color:#b0b8bc;
	text-decoration:none;
}
#foot ul li a:hover{
	text-decoration:underline;
}	

#foot p{
	color:#b0b8bc;
	line-height: 2.2em;
    padding-top: 7px;
}


#copyright{
	color:#b0b8bc;
	padding-top:38px;
	padding-bottom:42px;
	text-align:right;
}
#copyright p{
	line-height: 1.6em;
}

#facebook{
	display:block;
	float:left;
	margin-top: 6px;
	padding-left:19px;
	width:25px;
}
* html #facebook{
	width:44px;
	w\idth:25px;
}	

#twitter{
	border-right:1px solid #FFFFFF;
	display:block;
	float:left;
	margin-top: 6px;
	padding-right:23px;
	width:25px;
}
* html #twitter{
	width:49px;
	w\idth:25px;
}



/** ------------------------------------------------------ **/
/** ------------------- HTML elements -------------------- **/

img {
	border: 0px;
}

th {
	font-weight: bold;
	text-align: left;	
}

table {
	margin-bottom:20px;
}
table, td {
    border: solid 1px #000000;
    border-collapse: collapse;
	font-size:1em;
    padding: 8px;
    vertical-align: top;
}

table .cookiesTableHead{
	background-color:#000000;
	color:#ffffff;
}

/** ------------------------------------------------------ **/
/** ------------------- form ------------------------- **/

form {
  margin: 0px;
  padding: 0px;
  }
fieldset {
  border: 0px;
  margin:0px;
  padding: 0px;
  width: auto;
  }
legend {
  font-weight: bold;
  padding-bottom: 10px;
  }
input {
  float: left;
  margin-right: 10px
  }
select {
  float: left;
  margin-right: 10px
  }
input.buttons {
  float: none;
}
form fieldset div {
  padding-bottom: 0px;
  clear: both;
  overflow:auto;
  }
form fieldset p {
  padding-bottom: 10px;
  margin: 0px;
  clear: both;
  }
label {
  display:block;
  float: left;
  width: 150px;
  margin-right: 10px;
  padding-bottom: 10px;
  }
.nofloat{
	float:none;
	margin-right:0px;
}	
/* hide anti spam box */
.sec-form-field {
	display: none;
}

.inputBox{
	border:1px solid #636363;
	color: #636363;
	font-style:italic;
	margin-bottom:26px;
	margin-left:4px;
	margin-right:4px;
	padding-top:24px;
	padding-bottom:8px;
	padding-left:8px;
	padding-right:8px;
	width:444px;
}
* html .inputBox{
	width:462px;
	w\idth:444px;	
}

.pinkButton{
	background-color:#eb0853;
	border:0px;
	clear:both;
	color:#FFFFFF;
	display:block;
	float:none;
	font-style:italic;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:14px;
	padding-top:14px;
	width:190px;
}	


#subscribeform{
	margin-left:auto;
	margin-right:auto;
	width:940px;
}

.clearboth {
	clear:both;
}
  
/** ------------------------------------------------------ **/
/** ------------------- bespoke -------------------------- **/

a.buttonLink, a.buttonLink:visited{
	border-radius: 24px;
    color: #ffffff;
	display: flex;
    justify-content: center;
    align-items: center;
	font-size: 1.2em;
    font-weight: 500;
	letter-spacing:1px;
	padding-left:26px;
	padding-right:26px;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom:34px;
	text-decoration:none;
	text-transform: capitalize;
	width:fit-content;
}

/*looking to add an arrow to the right of the button link*/
a.buttonLink:after, a.buttonLink:visited:after, a.button:after, a.button:visited:after,
#archive-link a:after, #archive-link a:visited:after, #all-projects-link a:after, #all-projects-link a:visited:after, 
.contact-submit:after {
	background-repeat:no-repeat;
	content: "";
	display: inline-block;
	height: 16px;
	width: 16px;
	margin-left: 10px;
}

a.buttonLink:after, a.buttonLink:visited:after {
	/* background-image:url("/images/arrow-right.svg"); */
	/* svg for the after */
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" class="bi bi-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg>');
}

a.button:after, a.button:visited:after, 
.homeWhatWeDo a.buttonLink:after, .homeWhatWeDo a.buttonLink:visited:after,
.caseStudyOverlay a.buttonLink:after, .caseStudyOverlay a.buttonLink:visited:after,
#bannerText a.buttonLink:after, #bannerText a.buttonLink:visited:after,
#about-text .buttonLink:after, #about-text .buttonLink:visited:after,
#about-get-in-touch a:after, #about-get-in-touch a:visited:after,
#archive-link a:after, #archive-link a:visited:after, #all-projects-link a:after, #all-projects-link a:visited:after,
.btn-primary:after, .btn-primary:after{
	/* background-image:url("/images/arrow-right.svg"); */
	/* svg for the after */
	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23ffffff" class="bi bi-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg>') !important;
	transition: transform 0.2s ease;
  display: inline-block; /* transform needs a box that isn't purely inline/static */
}

a.button:hover:after, 
.homeWhatWeDo a.buttonLink:hover:after, 
.caseStudyOverlay a.buttonLink:hover:after, 
#bannerText a.buttonLink:hover:after,
#about-text .buttonLink:hover:after,
#about-get-in-touch a:hover:after,
#archive-link a:hover:after, 
#all-projects-link a:hover:after,
.btn-primary:hover:after {
  transform: translateX(4px);
}

.littleSpace{
	padding-top:38px;
	padding-bottom:38px;
}
.littleSpaceTop{
	padding-top:38px;
}
.littleSpaceBottom{
	padding-top:38px;
	padding-bottom:38px;
}

.littleSpaceTop h2, .littleSpaceBottom h2{
	margin-top:0px;
}

.littleSpace ul {
	margin-top:0px;
	margin-bottom:42px;
}
.littleSpace ul li{
	color: #2b2b2b;
    font-size: 1.1em;
    line-height: 1.6em;
    margin-bottom: 10px;
}

.bigSpace{
	padding-top:90px;
	padding-bottom:78px;
}
.bigSpaceBottom{
	padding-bottom:78px;
}

.col1{
	box-sizing: border-box;
	width: 100%;
}		

.col2{
	float:left;
	width:50%;
}	
.col3{
	float:left;
	width:33.33%;
}
.col2-3{
	float:left;
	width:66.66%;
}		
.col4{
	float:left;
	width:25%;
}

.col3 h2{
	background-image:none;
	font-size:1.8em;
	margin-bottom:48px;
	margin-top:0px;
	padding-top:0px;
}

.column-overview-container, .column-responsivedesign-container, .column-responsiveseo-container, .column-responsiveretargeting-container, 
.column-responsiveppc-container, .column-responsiveemailcampaign-container, .column-responsivefrontend-container, .column-responsivedesign-container {
	position:relative;
}

.column-image-container {
	bottom:0;
	position:absolute;
	left:0;
	width:100%;
}
.column-image-container img {
	display:block;
	margin-bottom:0px;
}
#column-overview-text .button {
	margin-bottom: 34px;
}

.inner-div {
	background-size: cover;
	background-position: center center;
	height: 100%;
 	width: 100%;
 	transition: all 800ms ease;
 	position: absolute;
}

.inner-div:hover {
	transform: scale(1.2);
}

#home-main-heading, .borderContainer {
	position:relative;
}
#home-main-heading .bgRed, .borderContainer .border {
	left: 0;
    top: 0;
    height: 7px;
    width: 70px;
}
#home-main-heading h2 {
	background-image:none;
	margin-top:0px;
	text-transform: uppercase;
}
#home-main-content p {
	font-size:1.4em;
}

#home-link {
	margin-bottom: 20px;
}

.homeWhatWeDo {
	box-sizing: border-box;
	overflow:hidden;
	position:relative;
}
.homeWhatWeDoContent {
	box-sizing: border-box;
	padding: 4%;
	width: 100%;
}
.homeWhatWeDoText {
	border-top: 9px solid #ffffff;
	float: left;
	width: 405px;  
}

.homeWhatWeDoText h2 {
	background: none;
	color: #ffffff;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 4.4em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
	text-align: left;
}

.homeWhatWeDoText h2 span {
	border-bottom: 9px solid #ffffff;
	display: block;
    width: 100%;
}

.homeWhatWeDo a.buttonLink, .homeWhatWeDo a.buttonLink:visited {
	/* border: 5px solid #ffffff; */
	color: #ffffff;
	float: left;
	margin-top: 173px;
	margin-bottom: 0px;
}

.border-transparent {
	border-bottom-color: transparent !important;
}

.textBGLeft a.buttonLink, .textBGLeft a.buttonLink:visited {
	position: absolute;
    right: 5%;
    bottom: 5%
}

/*.textBGRight {
	background-image: url(/images/homepage/what-we-do-right-bg.png);
	background-position: 95% 95%;
	background-repeat: no-repeat;
}*/

.textBGRight:after {
	content: '';
	display: inline-block;
	border-top: 15px solid #ffffff;
	border-right: 15px solid #ffffff;
	position: absolute;
    right: 7%;
    bottom: 10%;
	height: 110px;
	width: 110px;
	-moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*.textBGLeft {
	background-image: url(/images/homepage/what-we-do-left-bg.png);
	background-position: 5% 95%;
	background-repeat: no-repeat;
}*/

.textBGLeft:after {
	content: '';
	display: inline-block;
	border-top: 15px solid #ffffff;
	border-right: 15px solid #ffffff;
	position: absolute;
    left: 7%;
    bottom: 10%;
	height: 110px;
	width: 110px;
	-moz-transform: rotate(-138deg);
    -webkit-transform: rotate(-138deg);
    transform: rotate(-138deg);
}

/*.textBGBottom {
	background-image: url(/images/homepage/what-we-do-bottom-bg.png);
	background-position: 95% 95%;
	background-repeat: no-repeat;
}*/

.textBGBottom:after {
	content: '';
	display: inline-block;
	border-top: 15px solid #ffffff;
	border-right: 15px solid #ffffff;
	position: absolute;
    right: 7%;
    bottom: 10%;
	height: 110px;
	width: 110px;
	-moz-transform: rotate(136deg);
    -webkit-transform: rotate(136deg);
    transform: rotate(136deg);
}

/*.textBGTop {
	background-image: url(/images/homepage/what-we-do-top-bg.png);
	background-position: 95% 8%;
	background-repeat: no-repeat;
}*/

.textBGTop:after {
	content: '';
	display: inline-block;
	border-top: 15px solid #ffffff;
	border-right: 15px solid #ffffff;
	position: absolute;
    right: 9%;
    top: 10%;
	height: 110px;
	width: 110px;
	-moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.whatImage h2 {
	background: none;
	color: #ffffff;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 7em;
	margin: 0px;
	padding: 0px;
	position: absolute;
	right: 5%;
	text-transform: lowercase;
}

.homeCaseStudy{
	box-sizing: border-box;
	float: left;
	overflow:hidden;
	position:relative;
}

.homeCaseStudyDescription {
	padding: 3%;
}

.homeCaseStudy img, .pageCaseStudy img{
	display:block;
	
	width:100%;
}
.homeCaseStudy img {
	height:100%;
	object-fit:cover;
}
.pageCaseStudy img{
	height:auto;
}

.pageCaseStudy{
	margin-bottom:28px;
	overflow:hidden;
	position:relative;
}

.pageCaseStudyText{
	/* background-image:url(../images/casestudies/casestudiesbg.png); */
	color: #000000;
	cursor:pointer;
	/*height:100%;
	 position:absolute; */
	top:0px;
	left:0px;
	padding-bottom: 30px;
	text-align:left;
	width:100%;
}

.caseStudyOverlay {
	background: rgb(70, 70, 70), transparent;
    background: rgba(70, 70, 70, 0.71);
    box-sizing: border-box;
	cursor:pointer;
    padding: 5%;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	opacity: 0;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   text-align: left;
}

.caseStudyOverlay p {
	color: #ffffff;
	font-size: 1.4em;
}

.caseStudyOverlay a.buttonLink, .caseStudyOverlay a.buttonLink:hover, .caseStudyOverlay a.buttonLink:visited {
	border: 5px solid #ffffff;
	color: #ffffff;
}


.homeCaseStudy:hover > .caseStudyOverlay {
	opacity: 1;
}

.homeCaseStudy h2 {
	background: none;
	color: #ffffff;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 4.4em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
	text-align: left;
}

.homeCaseStudy h3 {
	color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

#homeCaseStudyTitle {
	border-top: 9px solid #ffffff;
	float: left;
	width: 280px; 
}

.homeCaseStudy h2 span {
	border-bottom: 9px solid #ffffff;
	display: block;
    width: 100%;
}

.homeCaseStudy h2 a, .homeCaseStudy h2 a:hover, .homeCaseStudy h2 a:visited{
	color: #ffffff;
	text-decoration: none;
}

.homeCaseStudyText, .whatWeDoText{
	/* background-image:url(../images/casestudies/casestudiesbg.png); */
	color: #000000;
	/*height:100%;
	 position:absolute; */
	top:0px;
	left:0px;
	padding-bottom: 30px;
	text-align:left;
	width:100%;
}

.homeCaseStudyText h3, .homeCaseStudyText p, .pageCaseStudyText h3, .pageCaseStudyText p, .whatWeDoText h3, .whatWeDoText p{
	color:#000000;
}

.homeCaseStudyText h3, .pageCaseStudyText h3, .whatWeDoText h3{
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	padding-top:46px;
}
.homeCaseStudyText ul, .whatWeDoText ul{
	/*color: #000000;
    font-size: 1.1em;
    line-height: 1.6em;
    list-style: none;
    margin: 0px;
    padding: 0px;*/
	display:block;
}


.homeCaseStudyText a.buttonLink, .homeCaseStudyText a.buttonLink:visited, .pageCaseStudyText a.buttonLink, .pageCaseStudyText a.buttonLink:visited, .whatWeDoText a.buttonLink, .whatWeDoText a.buttonLink:visited {
	/*display:block;*/
	position: absolute;
    bottom: 0px;
	margin-bottom: 0px;
}



.homeServices{
	margin-bottom:90px;
	margin-left:38px;
	margin-right:64px;
	position: relative;
	text-align:left;
}

.border {
	height: 18px;
	width: 162px;
	position: absolute;
	left: 5%;
	top: 5%;
}

.borderRight {
	left: auto;
	right: 5%;
}

#homeBrandBuilders {
	/*/transform: rotate(90deg); /* Equal to rotateZ(45deg) */
}

#makingBrands {
	box-sizing: border-box;
    float: left;
    width: 100%;
	background-image: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732811877/uc4_media/robots_tlmwbk.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 3%;
	padding-bottom: 3%;
}

#makingBrandsText {
	border-top: 9px solid #ff0058;
	float: left;
	width: 280px; 
}
#makingBrandsText h2 {
	background: none;
	color: #ff0058;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 4.4em;
	margin: 0px;
	padding: 0px;
	text-transform: uppercase;
	text-align: left;
}

#makingBrandsText a.buttonLink, #makingBrandsText a.buttonLink:visited, #makingBrandsText a.buttonLink:hover {
	margin-top: 165px;
}

#makingBrandsText h2 span {
	border-bottom: 9px solid #ff0058;
	display: block;
    width: 100%;
}

#footerTop {
	cursor: pointer;
	padding-bottom: 18px;
	padding-top: 150px;
	position: relative;
}

#footerContact {
	background-image: url(/images/get-touch-banner-bg.png);
    background-repeat: no-repeat;
    cursor: pointer;
    height: 125px;
    position: absolute;
    right: 28%;
    top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;
    width: 95px;
}
#footerContact span {
	color: #ffffff;
    font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
    font-size: 2.5em;
}

#footerTopLogo {
	margin: 0 auto;
	width: 700px;
	text-align: center;
}

#footerTopLogo h2 {
	background: none;
	color: #ffffff;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 5em;
	font-style: italic;
	margin-top: 0px;
}

#footerTopLogo h3 {
	background: none;
	color: #ffffff;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 2.4em;
	text-transform: uppercase;
}

#graphic-design-advertising {
	background-image: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732894881/uc4_media/graphic-design-advertising-bg_ss4kga.webp);
    background-repeat: no-repeat;
	background-position: center;
}
/*#graphic-design-advertising h2, #responsivedigital-container h2, #responsiveecommerce-container h2 {
    background-image: url(../images/h2topwhite.gif);
    background-repeat: no-repeat;
}

#graphic-work {
	box-sizing: border-box;
	float: left;
	width: 100%;
}*/

#brandingBanner {
	position: relative;
	overflow: hidden;
	width: 100%;
}

#brandingBanner img#brandingBannerImg {
	object-fit: cover; 
	object-position: center;
	max-width: 100%;
    height: 100%;
    width: 100%;
}
#brandingBanner div#bannerContact {
	background-image: url(/images/get-touch-banner-bg.png);
    background-repeat: no-repeat;
    cursor: pointer;
    height: 125px;
    position: absolute;
    right: 4%;
    top: 21px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;
    width: 95px;
}



#brandingBannerText {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	padding: 2%;
	text-align: left;
	width: 33.33%;
}

#brandingBannerText div {
	border-top: 9px solid #ffffff;
	float: left;
	padding-top: 16px;
	width: 280px;
}

#brandingBannerText h1 {
	color: #ffffff;
    font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
    font-size: 4.4em;
    margin-top: -18px;
    text-transform: uppercase;
}

#brandingBannerText h1 span {
	border-bottom: 9px solid #ffffff;
    display: block;
    width: 100%;
}
.brandingWrapper {
	text-align: left;
	padding: 2%;
}
.brandingHeading {
	border-top: 9px solid #ff3077;
	float: left;
	text-align: left;
	width: 280px; 
}
.brandingHeading h2 {
	background: none;
	color: #ff3077;
    font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
    font-size: 3.6em;
    margin-top: -18px;
    text-transform: uppercase;
}

.brandingHeading h2 span {
	border-bottom: 9px solid #ff3077;
    display: block;
    width: 100%;
}

.brandingText {
	float: right;
	margin-right: 6%;
	text-align: left;
	width: 33%;
}

.brandingText p {
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 2.1em;
}

.brandingImage {
	float: right;
	margin-right: 5%;
}

#branding-1 {
	padding-bottom: 120px;
}

#branding-1 .brandingText img {
	margin-bottom: 40px;
}

#branding-1 .brandingText, #branding-1 .brandingImage {
	margin-top: 82px;
}

#branding-3 {
	padding-bottom: 70px;
}

.branding2col {
	box-sizing: border-box;
	text-align: left;
	padding: 2%;
}

.branding2col .brandingTop {
	position: relative;
}

.branding2col .brandingTop .textBGBottom:after {
    content: '';
    display: inline-block;
    border-top: 15px solid #ff3077;
    border-right: 15px solid #ff3077;
    position: absolute;
    right: 7%;
    top: -10%;
    height: 110px;
    width: 110px;
    -moz-transform: rotate(136deg);
    -webkit-transform: rotate(136deg);
    transform: rotate(136deg);
}

.branding2col .brandingText {
	float: left;
	margin-right: 0px;
	width: 55%;
}
.branding2col .brandingImage {
	margin-right: 0px;
}

#brandingLeft .brandingText {
	margin-bottom: 60px;
	margin-top: 40px;
}

#brandingRight .brandingText {
	margin-top: 150px
}

#brandingRight h3 {
	color: #ffffff;
	font-family: 'Press Start 2P', cursive;
	font-size: 4.4em;
	text-transform: lowercase;
}

#brandsListWrapper {
	background-image: url(https://res.cloudinary.com/hotqvqab/image/upload/v1732882024/uc4_media/brands-list-bg_kzswnq.webp);
	background-repeat: repeat;
	box-sizing: border-box;
	padding: 2%;
	width: 100%;
}

#brandsListWrapper h2 {
	background: none;
	color: #ff3077;
	font-family: 'GibsonRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 3em;
	margin-top: 0px;
}

#brandsListWrapper p {
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size: 2.1em;
}

#brandsList {
	justify-content: space-between;
	display: flex;
	flex-direction: row;
  	flex-wrap: wrap;
	margin: 0 auto;
	margin-top: 70px;
	width: 96%;
}

#brandsList div {
	display: flex;
	float: left;
	justify-content: center;
	margin-bottom: 40px;
	margin-left: 35px;
	margin-right: 35px;
	text-align: center;
	vertical-align: bottom;
}

#brandsList div img, #brandsList div a {
	display: block;
	align-self: center;
}
			
#newsletter h2{
	background-position:bottom;
	margin:0px;
	margin-bottom:48px;
	margin-top:38px;
	padding:0px;
	padding-bottom:48px;
	text-align:center;
}


#pageBanner{
	padding-bottom: 50px;
	padding-top: 50px;
	position:relative;
}
#pageBanner img{
	display:block;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}	
#pageBanner h1{
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 4.4em;
	margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding: 0px;
	text-align:center;
	width: auto;
}
#pageBanner p {
	color: #ffffff;
	font-size: 2em;
	margin-top: 20px;
	margin-bottom: 0px;
	padding-left: 20px;
	padding-right: 20px;
}

#pageBannerText {
	border-bottom: 5px solid #ffffff;
	border-top: 5px solid #ffffff;
	text-transform: uppercase;
	width: auto;
}

/*#pageBanner:after {
	content: '';
	display: inline-block;
	border-top: 10px solid #ffffff;
	border-right: 10px solid #ffffff;
	margin-top: 50px;
	height: 80px;
	width: 80px;
	-moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}*/

#solidBanner{
	background-color:#efefef;
	padding-bottom:74px;
	padding-top:62px;
	
}
#solidBanner h1{
	background-image: url(../images/header-line.gif);
    background-position: bottom;
    background-repeat: no-repeat;
	color:#2b2b2b;
	margin-bottom:0px;
	text-align:center;
}

#solidBanner.blogBanner{
	background-color:#efefef;
	padding-bottom:74px;
	padding-top:62px;
	
}
#solidBanner.blogBanner h1{
	background-image: none;
	padding-bottom: 26px;
}
#solidBanner.blogBanner p{
	background-image: url(../images/header-line.gif);
    background-position: bottom;
    background-repeat: no-repeat;
	color:#2b2b2b;
	margin-bottom:0px;
	padding-bottom:54px;
	text-align:center;
}

#pageBannerBlog {
	position: relative;
}



#caseStudyTop, #solutionContainer{
	position:relative;
}
#caseStudyTop {
	padding-top:44px;
}

#caseStudyTop:after {
	content: '';
    display: inline-block;
    border-top: 6px solid #ffffff;
    border-right: 6px solid #ffffff;
    position: absolute;
    left: 1%;
    top: 193px;
    height: 35px;
    width: 35px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#solutionContainer:after {
	content: '';
    display: inline-block;
    border-top: 6px solid #eb0853;
    border-right: 6px solid #eb0853;
    position: absolute;
    left: 1%;
    top: 60px;
    height: 35px;
    width: 35px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

#solutionTitle {
	position:relative;
}
#caseStudyTop #block1, #solutionTitle{
	float:left;
	margin-right:30px;
	width:250px;
}
#caseStudyTop #block2{
	display: none;
	float:left;
	margin-right:20px;
	width:220px;
}
#caseStudyTop #block3{
	float:left;
	width:900px;
}

#caseStudyTop h1{
	font-size:2.2em;
	padding-bottom: 0px;
	margin-top:0px;
    margin-bottom: 32px;
}	
#caseStudyTop h2, #solutionTitle h2 {
	background-image:none;
	display:block;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 3em;
    font-weight: 700;
	float:left;
	line-height:1.2em;
	margin-top:0px;
	margin-bottom:32px;
	padding:0px;
	padding-top: 10px;
    text-transform: uppercase;
}
#caseStudyTop h2 {
	border-top: 5px solid #ffffff;
	color:#FFFFFF;
}
#solutionTitle h2 {
	border-top: 5px solid #eb0853;
	color:#eb0853;
}

#caseStudyTop h3, #caseStudyTop span {
	border-top: 5px solid #ffffff;
	color: #FFFFFF;
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
	font-size:1.5em;
	font-weight: 700;
	line-height: 1.4em;
	padding-top:10px;
	padding-right:20px;
	text-transform: uppercase;
	width:340px;
}

#caseStudyTop p{
	color:#FFFFFF;
}
#caseStudyTop a, #caseStudyTop a:visited{
	color:#FFFFFF;
	display: block;
	font-size:1.2em;
	margin-bottom: 30px; 
}

#caseStudyTop ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#caseStudyTop ul li{
	color:#ffffff;
	font-size: 1.1em;
    line-height: 1.6em;
}

#caseStudyImages, #caseStudyImages2, #caseStudyImages3{
	padding-top:16px;
}
#caseStudyQuote {
	padding-bottom: 36px;
	padding-top: 36px;
}
#quote {
	background-image: url(../images/casestudies/left-quote.png), url(../images/casestudies/right-quote.png);
	background-position: left top, right bottom;
	background-repeat: no-repeat, no-repeat;
	padding-bottom: 21px;
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 21px;
}

#quote p {
	color: #44606c;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size:2em;
	font-style:italic;
	line-height: 1.6em;
	margin-bottom: 16px;
}

#signature {
	margin-top: 40px;
	padding-right: 40px;
	text-align: right;
}

#signature p {
	color: #44606c;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
}

#signature span.quoteName {
	font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;	
}

#signature a {
	float:right;
}

#caseStudyContainer, #blogContainer{
	margin-left:auto;
	margin-right:auto;
	margin-top: 30px;
	width:2004px;
}

#blogContainer{
	margin-top:38px;
}

.blog {
	background-color:#f5f5f5;
}

.caseStudy, .blog{
	float:left;
	margin-bottom:25px;
	margin-left:10px;
	margin-right:10px;
	overflow:hidden;
	position:relative;
	width:648px;
}
.caseStudy img, .blog img{
	display:block;
}


.blogText{
	background-color:#f5f5f5;
	padding-left:32px;
	padding-right:32px;
	text-align:left;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}	
.blogText h2{
	background-image:none;
	margin-top:0px;
	text-transform: none;
}	

.blogText a.button, .blogText a.button:visited{
	position: relative;
    bottom: 5%;
}

.blog-btn-container {
	background-color:#f5f5f5;
	padding-top:20px;;
	padding-bottom:20px;
	padding-left: 32px;
    padding-right: 32px;
}	

#blogBannerContainer{
	background-color:#999999;
}
#blogBanner{
	margin-left:auto;
	margin-right:auto;
	width:648px;
}

#blogStory{
	padding-top:38px;
}	
#blogStory h1{
	color:#000000;
	font-size:2.0em;
	margin-bottom:38px;
	padding-bottom:0px;
}
#blogStory h2, #blogStory h3, #blogStory h4{
	background-image:none;
	font-family: 'GibsonLightBold', Arial, Verdana, Helvetica, sans-serif;
	font-size: 1.2em;
    line-height: 1.6em;
	margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
	text-transform:none;
}

#blogLeft{
	float:left;
	margin-left:-1180px;
	margin-right:120px;
	padding-bottom:34px;
	width:280px;
}
#blogLeft #author{
	background-color:#efefef;
	font-style:italic;	
	margin-bottom:38px;
	padding-left:25px;
	padding-right:25px;
	padding-bottom:30px;
	padding-top:28px;
}
#blogLeft #author p{
	margin-bottom:0px;
}
#blogLeft #latestPosts{	
	color:#000000;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size:2.0em;
	margin-bottom:22px;
	padding-bottom:0px;
}
#blogLeft ul{	
	list-style:none;
	margin:0px;
	margin-bottom:38px;
	padding:0px;
}
#blogLeft ul li{
	margin:0px;
}
#blogLeft ul li a, #blogLeft ul li a:visited{	
	border-bottom:1px solid #000000;
	color:#000000;
	display:block;
	padding-top:12px;
	padding-bottom:12px;
	padding-right:12px;
	text-decoration:none;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
}
#blogLeft ul li a:hover{	
    color: #eb0853;
}

#blogRight{
	float:left;
	margin-left:400px;
	padding-bottom:34px;
	width:780px;
}

#blogRight ul li{
	margin-bottom:20px;
}

.imagesLeft {
	float: left;
	margin-right: 20px;
	width: 580px;
}
.imagesRight {
	float: left;
	width: 580px;
}	

#allProjects{
	margin:0 auto;
}
#nextProject{
	color:#353839;
	display:block;
	float:right;
	font-size:1.1em;
	font-style:italic;
	text-decoration:none;
	/*width:100px;*/
}

a.button, a.button:visited{
	border: 1px solid #eb0853;
	background-color: #eb0853;
	color:#ffffff;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	font-size:1.1em;
	padding-left:52px;
	padding-right:52px;
	padding-top:12px;
	padding-bottom:12px;
	margin-bottom: 34px;
	text-decoration:none;
	text-align:center;
	/*width:95px;*/
}

a.button:hover {
    border: 1px solid #eb0853;
}

#archive-link{
	margin-top:13px;
	text-align:center;
}
#all-projects-link{
	margin-top:22px;
	text-align:center;
}
#archive-link a, #archive-link a:visited, #all-projects-link a, #all-projects-link a:visited{
	display: inline-flex;
}

#blogArchive {
	padding: 38px;
}
#blogArchive ul{
	list-style:none;
	padding: 0;
}	

#blogArchive ul li {
    color: #2b2b2b;
    font-size: 1.1em;
    line-height: 1.6em;
    margin-bottom: 10px;
}

/* Initial body */
body {
  right: 0;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}



/* Initial menu */
.menu {
  background-color: #353839;
  right: -390px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  text-align:left;
  width: 390px;
}


.menu ul {
  font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
  list-style: none;
  margin: 0px;
  padding: 0px;
  padding-left:22px;
  padding-right:22px;
}

.menu li {
  border-bottom: 1px dotted #FFFFFF;
  display:block;
}

.menu li a, .menu li a:visited {
  color: #FFFFFF;
  font-size:1.0em;
  display:block;
  padding-top:24px;
  padding-bottom:24px;
  text-decoration: none;
  text-transform: uppercase;
}

.menu li a:hover{
	color:#eb0853;
}

.menu li ul{
	margin-bottom:12px;
}	
.menu li ul li{
	border-bottom: 0px;
}
.menu li ul li a, .menu li ul li a:visited {
	font-size:0.8em;
	padding-top:10px;
	padding-bottom:10px;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-right:22px;
  padding-top: 10px;
  text-align:right;
}

#overlay{
	background-color:#000000;
	cursor: -webkit-image-set(url(../images/close.png) 1x,url(../images/close.png) 2x),pointer;
	display:none;
	position:absolute;
	left:0px;
	top:0px;
	height:0px;
	width:0px;
	z-index:600;
}

#userExperience{
	background-color:#e5000c;
	/*background-image:url(../images/user-experience.jpg);*/
	background-position:top;
	background-repeat:no-repeat;
}
#userExperience h2, #userExperience p{
	color:#FFFFFF;
}
/*#userExperience h2{
    background-image: url(../images/h2topwhite.gif);
}*/

#creative p, #seo p, #evolve p, .snippet p{
	margin-bottom:48px;
	padding-left:55px;
	padding-right:55px;
}
#creative .button, #seo .button, #evolve .button, .snippet .button{
	display:block;
	width:250px;
}

#seoImage{
	margin-top:	140px;
}	
#searchImage{
	margin-bottom:56px;
}	

#grapesImage{
	margin-top:	80px;
}	
#evolveImage{
	margin-bottom:34px;
}

#caseStudyFilter, #blogFilter{
	padding-bottom:62px;
}	
#caseStudyFilter h2, #blogFilter h2{
	background-image:none;
	margin-bottom:44px;
}

#filterContainer{
	border-bottom:1px solid #000000;
	margin-left:auto;
	margin-right:auto;
	width:280px;
}

#m_id, #filter{
	border:0px;
	display:block;
	float:none;
	margin-left:auto;
	margin-right:auto;
	padding:6px;
	width:250px;
}

.stageNumber{
	border-bottom:1px dotted #000000;
	color:#6f757a;
	font-family: 'GibsonLightRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size:82px;
	margin-bottom:34px;
	padding-bottom:36px;
}

.stageText h3{
	color:#eb0853;
	margin-bottom:26px;
}

/*#aboutBrand{
	border-bottom:1px dotted #000000;
}*/	

.clientLogo{
	margin-bottom:70px;
}	


.column{
	float:left;
	margin-right:0px;
}
.col-5-7{
	width:480px;
}
.col-7-5{
	width:680px;
}
.col-6-6{
	width:580px;
}

.col-5{
	margin-right:20px;
	width:220px;
}

.col-9-3{
	width:880px;
}
.col-3-9{
	width:280px;
}


.columnLast{
	margin-right:0px;
}



.openQuote{
	background-image:url(../images/quote-open.png);
	background-position:left top;
	background-repeat:no-repeat;
	padding-top:48px;
}	
.closeQuote{
	background-image:url(../images/quote-closed.png);
	background-position:right bottom;
	background-repeat:no-repeat;
	height:19px;
}

.contactMessage{
	padding-left:100px;
	padding-right:80px;
}	
.contactDirector{
	text-align:right;
	margin-bottom:0px;
	margin-top:32px;
	padding-right:46px;
}	

#contact-subject-container {
	margin-top:40px;
}
.contact-subject {
	float:left;
	margin-right:20px;
	width:380px;
}
.contact-subject-last {
	margin-right:0px !important;
}
.contact-subject img {
	display:block;
	margin:0 auto;
	width:230px;
}
.contact-subject p {
	/*color:#5ed7c6;*/
	color:#2b2b2b;
	font-size: 2em;
    font-family: 'GibsonRegular', Arial, Verdana, Helvetica, sans-serif;
	line-height: 1.4em;
	text-align:center;
	margin-top:20px;
	margin-bottom:0px;
	margin-right: auto;
    margin-left: auto;
	width: 280px;
}

#addressBox{
	border-right:1px solid #969696;
	font-size:1.2em;
	margin-right:32px;
	padding-bottom:42px;
	padding-right:46px;
}
#addressBox a, #addressBox a:visited{
	color:#2b2b2b;
	text-decoration:none;
}

#testimonailBox{
	border-left:1px solid #969696;
	margin-left:32px;
	padding-left:46px;
}
#testimonailBox #quote {
	Padding-left:60px;
	padding-right:60px;
}

#enquiry-pages #enquiry-form, #enquiry-pages #message-form {
	margin-right:0px;
	width:100%;
}

#enquiry-pages #contactForm .contact-textbox, #enquiry-pages #contactForm .contact-textarea {
	box-sizing: border-box;
	width:100%;
}

#mapLink a, #mapLink a:visited{
	background-image:url(../images/map.gif);
	background-position:left;
	background-repeat:no-repeat;
	color:#eb0853;
	margin-bottom:34px;
	padding-left:26px;
	padding-top:4px;
	padding-bottom:4px;
	text-decoration:none;
}
#mapLink a:hover{
	text-decoration:underline;
}

#enquiry-form{
	clear:none;
	float:left;
	margin-right:20px;
	width:350px;
}
#message-form{
	clear:none;
	float:left;
	width:510px;
}

#contactForm .contact-textbox, #contactForm .contact-textarea{
	border: 1px solid #edeae7;
	float:none;
	font-family: 'GibsonRegular', Arial, Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	margin:0px;
	margin-bottom:20px;
	margin-right:0px;
	padding:0px;
	padding-left:10px;
	padding-right:10px;	
	padding-top:16px;
	padding-bottom:10px;
	width:328px;
}
#contactForm .contact-textarea{
	height:138px;
	margin-bottom:17px;
	width:488px;
}	

#contactForm .contact-submit{
						  
	border:2px solid #eb0853;
	border-radius: 24px;
	color:#ffffff;
	cursor:pointer;
	display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 1px;
	margin:0px;
	padding-left: 26px;
    padding-right: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
   	width: 100%;
	line-height: 1em;
}

#enquiry-pages {
	background-color: #f9faf9;
    box-sizing: border-box;
    border: 1px solid #edeae7;
    padding: 30px;
}

#enquiry-pages p.largetext {
    background-image: none;
    font-size: 2rem;
    font-family: 'GibsonSemiBold', Arial, Verdana, Helvetica, sans-serif;
    padding-top: 0px;
    margin-bottom: 12px;
}

#solutionBlock{
	float:left;
	width:900px;
}

.brandingBottom{
	clear:both;
}

.caseStudyBanner{
	margin-bottom:22px;
}

#divMapCanvas {
	height: 550px;
	width: 100%;
}

#job-vacancies h3 {
    font-size: 1.4em;
    font-weight: 700;
}
#job-vacancies h4 {
	font-size:1.2em;
}

.job-box {
	border-bottom: 1px dashed #000000;
    margin-bottom: 34px;
}

.about-block{
	float:left;
	overflow:hidden;
	padding-top:20px;
	position:relative;
	text-align:left;	
	width:33.333%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-transform: none;
}

.about-block img{
	display:block;
	height:auto;
	width:100%;
}

#about-robot-image{
	background-image:url(https://res.cloudinary.com/hotqvqab/image/upload/v1732873064/uc4_media/about-robot_xxcqyt.webp);
	background-position:left bottom;
	background-repeat:no-repeat;
	background-size: contain;

}	

#about-robot{
	height:0px;
}	
#about-robot .container{
	margin-left:38px;
	margin-right:38px;
	padding-left:0px;
	padding-right:0px;	
}

.about-block h2{
	background-image:none;
	color:#FFFFFF;
	font-size:3.4em;
	margin-top:40px;
	padding-top:0px;
}	

#about-project p{
	color:#FFFFFF;
	font-size:1.4em;
}
#about-approach p, #about-approach ul li{
	color:#FFFFFF;
	font-size:1.4em;
}

#about-approach{
	clear:both;
}

#about-heading{
	background-color:#f9f8f6;
	color:#537f7d;
	font-size:6.4em;
	padding-bottom:20px;
}	
#about-text{
	background-color:#537f7d;	
	padding-top:60px;
}	
#about-text p{
	color:#FFFFFF;
	font-size:1.4em;
}
#about-text p.about-large, #about-project p.about-large, #about-approach p.about-large{
	font-size:2.0em;
}

#about-text .buttonLink{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:170px;
}


.background-light-grey{
	background-color:#f3f3f3;
}	

#studio-image{
	background-image:url(https://res.cloudinary.com/hotqvqab/image/upload/v1732873133/uc4_media/studio_vdkigy.webp);
	background-repeat:no-repeat;
	background-position:bottom left;
	background-size: cover;
	padding-top:0px;
}
#studio-image img{

}
#about-approach{
	background-color:#d6aa41;
}		
#about-project{
	background-color:#db3469;
}

#project-process-diagram img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:60px;
}

.project-process{
	float:left;
	padding-bottom:20px;
	padding-top:20px;
	position:relative;
	text-align:left;	
	width:16.666%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}	

.process-heading{
	height:145px;
	position:relative;
}
.process-heading:before {
    content: '';
    display: inline-block;
    border-top: 4px solid #ff0058;
    border-right: 4px solid #ff0058;
    position: absolute;
    left: 8px;
    top: 0px;
    height: 26px;
    width: 26px;
    -moz-transform: rotate(136deg);
    -webkit-transform: rotate(136deg);
    transform: rotate(136deg);
}

.project-process h2{
	background-image:none;
	color: #ff0058;
	font-size:1.7em;
	padding-top:22px;
	position:absolute;
	bottom:0px;
	left:0px;
	text-transform: none;
}

.project-process p{
	font-size:1.1em;
	margin-bottom:16px;
}	

#about-get-in-touch{
	background-color:#537f7d;
	padding-top:20px;
	padding-bottom:30px;
}
#about-get-in-touch p, #about-get-in-touch a, #about-get-in-touch a:visited{
	color:#FFFFFF;
	text-align:center;
}
#about-get-in-touch p{
	margin-bottom:0px;
}
#about-get-in-touch a, #about-get-in-touch a:visited{
	margin: 0 auto;
	text-align:center;
}
#about-get-in-touch p#about-get-in-touch-text{
	color:#ffffff;
	font-size:2.4em;
	margin-bottom:36px;
	text-align:center;
}

#notice{
	background-color:#303032;
	/*margin-top:5px;
	margin-bottom:5px;*/
	padding:0px;
	position: absolute;
	width:100%;
	z-index:180;
}
#notice h2{
	background-image: none;
	color:#ffffff;
	float:left;
	font-size:1.8em;
	margin:0px;
	margin-bottom: 8px;
	margin-top:8px;
	margin-left:2%;
	padding: 0px;
	text-transform:uppercase;
	width:12%;
}
#notice p{
	background-color:#e5000c;
	color:#FFFFFF;
	float:right;
	font-size:1.8em;
	margin:0px;
	padding-left:2%;
	padding-right:2%;
	padding-top:6px;
	padding-bottom:6px;
	width:81%;
}
* html #notice p{
	width:85%;
	w\idth:81%;
}

#notice a, #notice a:hover, #notice a:visited {
		color: #ffffff;
}

.g-recaptcha {
	clear:none;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	width: 350px;
}
.contact-submit-container {
	clear:none;
	float:left;
	width: 510px;
}