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



/* Page load action */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
  background: #252525;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}


/* Case studies */

.rbsnatwest_image{
	    max-height: 150%;
	   	max-width: 140%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -50%;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}

.rbsnatwest_image2{
	    max-height: 120%;
	   	max-width: 90%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -10%;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}

.rbsnatwest_image3{
	    max-height: 150%;
	   	max-width: 140%;
		min-width: 112%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0%;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}


.britishmuseum_image0{
	    max-height: 120%;
	   	max-width: 140%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}

.yasisland_image0{
	    max-height: 140%;
	   	max-width: 120%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -10%;  
    	left: 0%;  
    	right: -5%;  
    	margin: auto;
	}

.hungryhouse_image1{
	    max-height: 150%;
	   	max-width: 150%;
		min-width: 105%;
	  	display: block;
	    position:absolute; 
		 top: 20%;  
   		bottom: 0%;  
    	left: -10%;  
    	right: 0%; 
		margin:auto;
	}

.hungryhouse_image2{
	    max-height: 150%;
	   	max-width: 110%;
		min-width: 105%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: 0%;  
    	left: -5%;  
    	right: 0%; 
		margin:auto;
	}

.fitnessfirst_image1{
	    max-height: 150%;
	   	max-width: 110%;
		min-width: 70%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -5%;  
    	left: -5%;  
    	right: 0%; 
		margin:auto;
	}

.fitnessfirst_image2{
	    max-height: 150%;
	   	max-width: 105%;
		min-width: 100%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -5%;  
    	left: -3.5%;  
    	right: 0%; 
		margin:auto;
	}

.fitnessfirst_image3{
	    max-height: 140%;
	   	max-width: 120%;
		min-width: 70%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -30%;  
    	left: 0%;  
    	right: -10%; 
		margin:auto;
	}





#yas_fluid_rectangle_back1{
	background-color: #F4F4F4;
}


#rbsnatwest_fluid_square_back{
	background-color: #561383;
}

#rbsnatwest_fluid_square_back2{
	background-color: #f4f4f4;	
}

#rbsnatwest_fluid_square_back3{
	background-color: #009fab;	
}

#hungryhouse_fluid_square_back1{
	background-color: #f8352f; 
}

#hungryhouse_fluid_square_back2{
	background-color: #f4f4f4; 	
}

#fitnessfirst_fluid_rectangle_back1{
	background-color: #e0093b; 
}

#fitnessfirst_fluid_square_back1{
	background-color: #f4f4f4; 
}

#fitnessfirst_fluid_square_back2{
	background-color: #2dda78; 
}






/* Link styles */

  
.sliding-u-l-r-l {
    	display: inline-block;
    	position: relative;
}

.sliding-u-l-r-l:before {
    	content: '';
    	display: block;
    	position: absolute;
    	left: 0;
    	bottom: 0;
    	height: 1px;
    	width: 0;
    	transition: width 0s cubic-bezier(0.19, 1, 0.22, 1), background .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.sliding-u-l-r-l:after {
    	content: '';
    	display: block;
    	position: absolute;
    	right: 0;
    	bottom: 0;
    	height: 1px;
    	width: 0;
    	background: #252525;
    	transition: width .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.sliding-u-l-r-l:hover:before {
    	width: 100%;
    	background: #252525;
    	transition: width .9s cubic-bezier(0.19, 1, 0.22, 1);
}

.sliding-u-l-r-l:hover:after {
    	width: 100%;
    	background: transparent;
   
}
  

  

/* main body styles */

body {
      }
	  
ul.a {
    list-style-type: disc;
	padding-left: 4%;
	  }
	
li{
	margin-bottom: 3%;
	color: #252525;
	padding-left: 3%;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #252525;
	 margin-top:5%;
    margin-left:10%;
	margin-right:85%;
    padding: 0;
}

#top {
 		width: 90%;
		max-width: 1500px;
	 	position: relative;
		top: 4vh;
		margin:auto;
		padding: auto;
}

#contact{
	background-color:transparent;
	position: fixed;
		margin: auto;
  	   	top: 0px;
		left: 0px;
		width:100%;
		height:100%;
		z-index:-1;
	}
 
#outside {
 		 position: absolute;
 		 width: 80%;
		 top: 0;
		 left: 0;
		 height: 100%;
		 padding: auto;
}

#excontainer {
		position: relative;
  		background-color: transparent;
}
	
#case_floater {
    	height: 25vh;
    	width: 100%;
		background-color: transparent;
		margin-bottom:-15.5vmin;
}



/* homepage */


#floater {
    	height: 42vh;
    	width: 100%;
		background-color: transparent;
		margin-bottom:-15.5vmin;
}

#email {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		position: relative;
		height: 4.3vmin;
	min-height: 34px;
	max-height: 45px;
}

#intro {
		width: 75%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		padding-top: 5vh;
		margin-bottom:5vh;
}

#company {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.3vmin;
	min-height: 34px;
	max-height: 45px;
}
#phone {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.3vmin;
	min-height: 34px;
	max-height: 45px;
}

#up-arrow {
  		background-color:white;
		width:15vmax;
		height: 8vmin;
}

.up-arrow{
		fill: #e3e3e3;
		width: 5vmin;
	}
	
.up-arrow:hover{
		fill: #252525;
		width: 5vmin;
	}


#title {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.3vmin;
		min-height: 34px;
	max-height: 45px;
}

#linkedin {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		height: 4.3vmin;
		min-height: 34px;
		max-height: 45px;
}

.notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		position: relative;
		font-size: 16px; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em; 
}

.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 26px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em; 
		
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 26px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em;  
		
}

.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 25px; 
		text-decoration: none;
		cursor:pointer;
		letter-spacing: 0.05em; 
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		font-size: 25px; 
		letter-spacing: 0.05em; 
		-webkit-text-fill-color: #252525;
}
	

.start{
	background-color:transparent;
  	   	top: 0px;
		left: 0px;
		max-width: 1500px;
	}
	

.container{
		background-color:transparent;
	  	position: absolute;
  	   	top: 80%;
		left: 5%;
		right: 5%;
		width:90%;
	}

.container-back{
		background-color:white;
		width:100%;
		margin: auto;
		max-width: 1500px;
	
	}
	
#svg {
		position: relative;
		max-width: 1200px;
		float: left;
		top: -60px;
		width: 230px;
}

#svg1 {
		position: relative;
		max-width: 1200px;
		top: 10px;
		max-height: 50px;
}



.svg {
			fill: #252525;
}


	.clients {
	position:relative;
	width:30vh;
	height:3vh;

}

	.clients1 {
	background-color:white;
	width:30vh;
	height:3vh;
	z-index:2;

}


.case5{
		background-color:white;
  		float:left;
		width:100%;
		margin-bottom:5%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}

	
.case4{
		background-color:white;
  		float:left;
		width:100%;
		margin-bottom:5%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}

	
.case1{
		background-color:white;
  		float:left;
		width:100%;
		margin-top: -50px;
		margin-bottom:5%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}


.case2{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:5%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); 
	}
	
.case3{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:5%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}


.case-image1{
    	max-height: 150%;
	   	max-width: 200%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0;  
    	left: -40%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image2{
     	max-height: 150%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: -20%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image3{
     	max-height: 150%;
	   	max-width: 150%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image4{
     	max-height: 130%;
	   	max-width: 120%;
	  	display: block;
	    position: absolute; 
	    top: -15%;  
    	bottom: 0;  
    	left: -5%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image5{
 		max-height: 150%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0%;  
    	left: 0%;  
    	right: 0%;  
    	margin: auto;
	}
	
	
	
.logo-image{
	 	max-width: 60%;
     	max-height: 60%;
	  	display: block;
      	position: absolute;  
    	top: 0;  
    	bottom: 0;  
    	left: 0;  
    	right: 0;  
    	margin: auto;
}

	
.logos{
		background-color:white;
		float:left;
		width:80%;
		padding-bottom:5%;
		margin-left:10%;
	}
	

.bottom{
		background-color:white;
		width:100%;
		padding-bottom:8%;
		text-align: center;
	}


.logo {
		background-color:white;
		position:relative;
		width:25%;
		float:left;
		height:100px;
		margin-bottom:2%;
}


.tile1 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 700px;
		min-height:500px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile2 {
		background-color:#252525;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile3 {
		background-color:#000;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile4 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile5 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile6 {
		background-color:#04df7a;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:left;
		height:80vh;
 		overflow: hidden;
 		text-align: center;
}

.tile7 {
		background: rgb(32,80,160);
        background: -moz-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(32,80,160,1)), to(rgba(231,3,5,1)));
        background: -o-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile8 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:left;
		height:80vh;
 		overflow: hidden;
}


.tile9 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile10 {
		background-color:#f0eff7;
		position:relative;
		width:50%;
		max-height: 700px;
	min-height:500px;
		float:right;
		height:80vh;
 		overflow: hidden;
}



.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size: 26px; 
		padding-left:10%;
		padding-right:10%;
		padding-top:26vmin;
		letter-spacing: 0.01em;
		text-decoration:none;
}

.tile-header:hover {
		text-decoration:none;
}
	
.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:18px;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
		letter-spacing: 0.01em;
		text-decoration: none; 
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:18px;
		margin-left:10%;
		padding-top:22px;
		line-height:150%;
		letter-spacing: 0.01em;
		float: left;
}

.svg_tile{
		fill: #252525
		margin-top: 21px;
		margin-left: 2%;
		float:left;
	width:24px; 
	height:24px;
}

.svg_tile:hover{
		fill: #252525;
}

.tile-bullets {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:2vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
}


/* case template */



.svg_home {
  		background-color: transparent;
		margin-left:5vw;
		margin-bottom: 3vh;
  		width: 24px;
		heght:24px;
	
}


.svg_home:hover{
		fill: #252525;
}


.case_notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 12px; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em;
}


.case_notes_2 {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 12px; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em;
		margin-left: 5px;
}

.info_text{
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		font-size: 12px; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		margin-left:10vw;
		text-align:left;
		letter-spacing: 0.05em; 
}

.case_container{
		background-color:white;
	  	position: absolute;
  	   	top: 60%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	
.fluid_rectangle{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:5%;
		max-height: 800px;
	}
	
.fluid_square{
		background-color:white;
		width:100%;
		margin-bottom:5%;
		max-height: 800px;
	}
	
.bottom1{
		background-color:white;
		width:100%;
		padding-bottom:7vmax;
		text-align: center;
	}

#bottom_case {
		background-color:white;
		position: relative;
		width: 100%;
		margin-bottom: 200px;
	}
	
.bottom_next{
		background-color:transparent;
		text-align: right;
		float: right;
		max-width:30%;
		margin-right: 2%;
	}

.bottom_previous{
		background-color:transparent;
		float: left;
		width:30%;
		margin-left: 2%;
	}
	

.svg_previous{
		float: left;
		fill: #252525;
		margin-left: 5%;
		margin-top: 2px;
}
	
.svg_next{
		float: right;
		fill: #252525;
		margin-right: 5%;
		margin-top: 2px;
}
	
.next a{
		background-color:transparent;
		text-align: right;
		font-family: 'Gothic A1', san-serif;
		letter-spacing: 0.05em; 
		font-weight : 400;
		font-size: 26px; 
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.next a:hover{
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		font-size: 26px;  
		-webkit-text-fill-color: #252525;
	}
	
.previous a{
		background-color:transparent;
		text-align: left;
		font-family: 'Gothic A1', san-serif;
		letter-spacing: 0.05em; 
		font-weight : 400;
		font-size: 26px; 
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.previous a:hover{
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		font-size: 26px;  
		-webkit-text-fill-color: #252525;
	}

.casetext {
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
	}

.fluid_rectangle_back {
		background-color:#252525;
		position:relative;
		height:80vh;
 		overflow: hidden;
		max-height: 800px;
}

.fluid_square_back {
		background-color:#252525;
		position:relative;
		height:80vh;
 		overflow: hidden;
		max-height: 800px;
}

.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:18px;
		line-height:150%;
		letter-spacing: 0.01em; 

}

.fixed_width{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:5%;
	}


.fixed_width_back {
		background-color:#252525;
		position:relative;
 		overflow: hidden;
}


.fixed_width_image{
	  	display: block; 
    	margin: auto;
		width: 100%;
	}

.boxes{
		background-color:#efefef;
  		float:left;
		width:100%;
		margin-bottom:5%;
		max-height: 800px;
		overflow: hidden;
	}


.box_top {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:80vh;
 		overflow: hidden;
		max-height: 800px;
		text-align: center;
}

.box_bottom {
		background-color:#efefef;
		position:relative;
		width:50%;
		float:left;
		height:80vh;
 		overflow: hidden;
		max-height: 800px;
		text-align: center;
}

.box_image{
	object-fit: cover;
	text-align: center;
	min-width: 100%;
	max-height: 500%;
	max-width: 100%;
	height: 100%;
	  	display: block;
	    position: absolute;  
    	float:center;
		overflow: hidden;
	}

@media (max-width: 1500px) {

.container{
		background-color:transparent;
	  	position: absolute;
  	   	top: 85%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	
	.case_container{
		background-color:white;
	  	position: absolute;
  	   	top: 75%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	
	
#floater {
    	height: 45vh;
    	width: 100%;
		background-color: transparent;
		margin-bottom:-15.5vmin;
}
	
.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 26px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em; 
		
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 26px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em;  
		
}

.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 25px; 
		text-decoration: none;
		cursor:pointer;
		letter-spacing: 0.05em; 
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		font-size: 25px; 
		letter-spacing: 0.05em; 
		-webkit-text-fill-color: #252525;
}

#email {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		position: relative;
		height: 4.5vmin;
		min-height: 29px;
	
}


#company {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 29px;
}
#phone {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 29px;
}


#linkedin {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		height: 4.5vmin;
	min-height: 29px;
}
	
#title {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 29px;
}

.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size: 22px; 
		padding-left:10%;
		padding-right:10%;
		padding-top:26vmin;
		letter-spacing: 0.01em;
		text-decoration:none;
}

.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:16px;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
		letter-spacing: 0.01em;
		text-decoration: none; 
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:16px;
		margin-left:10%;
		padding-top:22px;
		line-height:150%;
		letter-spacing: 0.01em;
		float: left;
}
	
	
.svg_tile{
		fill: #252525;
		margin-top: 20px;
		margin-left: 2%;
		float:left;
	width:24px; 
	height:24px;
}
	
	.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:16px;
		line-height:150%;
}
	
}

@media (max-width: 1200px) {

	
/* Case studies */

.fitnessfirst_image2{
	    max-height: 150%;
	   	max-width: 105%;
		min-width: 100%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -5%;  
    	left: -3.5%;  
    	right: 0%; 
		margin:auto;
	}
	
.fluid_rectangle{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:5%;
		max-height: 600px;
	}
	
.fluid_square{
		background-color:white;
		width:100%;
		margin-bottom:5%;
		max-height: 600px;
	}
	
.boxes{
		background-color:#efefef;
  		float:left;
		width:100%;
		margin-bottom:5%;
		max-height: 600px;
		overflow: hidden;
	}


.box_top {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:80vh;
 		overflow: hidden;
		max-height: 600px;
		text-align: center;
}

.box_bottom {
		background-color:#efefef;
		position:relative;
		width:50%;
		float:left;
		height:80vh;
 		overflow: hidden;
		max-height: 600px;
		text-align: center;
}
	
	.fluid_rectangle_back {
		background-color:#252525;
		position:relative;
		height:80vh;
 		overflow: hidden;
		max-height: 600px;
}

.fluid_square_back {
		background-color:#252525;
		position:relative;
		height:80vh;
 		overflow: hidden;
		max-height: 600px;
}

	
	

/* homepage */
	
.container{
		background-color:transparent;
	  	position: absolute;
  	   	top: 90%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	

.tile1 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 600px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile2 {
		background-color:#252525;
		position:relative;
		width:50%;
		max-height: 600px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile3 {
		background-color:#000;
		position:relative;
		width:50%;
		max-height: 600px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile4 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 600px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile5 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 600px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile6 {
		background-color:#04df7a;
		position:relative;
		width:50%;
		max-height: 600px;
		float:left;
		height:80vh;
 		overflow: hidden;
 		text-align: center;
}

.tile7 {
		background: rgb(32,80,160);
        background: -moz-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(32,80,160,1)), to(rgba(231,3,5,1)));
        background: -o-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
		position:relative;
		width:50%;
		max-height: 600px;
		float:right;
		height:80vh;
 		overflow: hidden;
}

.tile8 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 600px;
		float:left;
		height:80vh;
 		overflow: hidden;
}


.tile9 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		max-height: 600px;
		float:left;
		height:80vh;
 		overflow: hidden;
}

.tile10 {
		background-color:#f0eff7;
		position:relative;
		width:50%;
		max-height: 600px;
		float:right;
		height:80vh;
 		overflow: hidden;
}


	
#svg {
		position: relative;
		max-width: 1360px;
		float: left;
		top: -60px;
		width: 230px;
}	

	
	
.notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		position: relative;
		font-size: 16px; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em; 
}

.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 26px;
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em; 
		
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 26px;
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em;  
		
}

.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 25px;
		text-decoration: none;
		cursor:pointer;
		letter-spacing: 0.05em; 
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		font-size: 25px;
		letter-spacing: 0.05em; 
		-webkit-text-fill-color: #252525;
}
	

.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size: 22px; 
		padding-left:10%;
		padding-right:10%;
		padding-top:22vmin;
}

.tile-header:hover {
		text-decoration:none;
}

.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:14px;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
		text-decoration: none;
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:14px;
		margin-left:10%;
		padding-top:20px;
		line-height:150%;
		letter-spacing: 0.01em;
		float:left;
}

.svg_tile{
		fill: #252525;
		margin-top: 18px;
		margin-left: 2%;
		float:left;
	width:24px; 
	height:24px;
}

.svg_tile:hover{
		fill: #252525;
}

.tile-bullets {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:1.7vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
}
	


/* case template */
	
.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:14px;
		line-height:150%;
}

.next a{
		background-color:transparent;
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 24px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.next a:hover{
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 24px;
		-webkit-text-fill-color: #252525;
	}
	
.previous a{
		background-color:transparent;
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 24px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.previous a:hover{
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 24px;
		-webkit-text-fill-color: #252525;
	}

	
.svg_previous{
		float: left;
		fill: #252525;
		margin-left: 5%;
		margin-top: 1px;
}

	
.svg_next{
		float: right;
		fill: #252525;
		margin-right: 5%;
		margin-top: 1px;
}	
	
	
.boxes{
		background-color:#efefef;
  		float:left;
		width:100%;
		margin-bottom:5%;
	}


.box_top {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:60vh;
 		overflow: hidden;
}

.box_bottom {
		background-color:#efefef;
		position:relative;
		width:50%;
		float:right;
		height:60vh;
 		overflow: hidden;
}

.case_notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 1.7vh; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em;
}


.case_notes_2 {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 1.7vh; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		letter-spacing: 0.05em;
		margin-left: 5px;
}

.info_text{
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		font-size: 1.7vh; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		margin-left:10vw;
		text-align:left;
		letter-spacing: 0.05em; 
}
	
	
	.case_container{
		background-color:white;
	  	position: absolute;
  	   	top: 75%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	
	
}




@media (max-width: 960px) {
	
#svg {
		position: relative;
		max-width: 1360px;
		float: left;
		top: -60px;
		width: 250px;
}	
	
	

/* Case studies */


	
.rbsnatwest_image2{
	    max-height: 120%;
	   	max-width: 120%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -10%;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}

	.rbsnatwest_image3{
	    max-height: 150%;
	   	max-width: 200%;
		min-width: 132%;
	  	display: block;
	    position: absolute; 
	    top: 0%;  
   		bottom: 0%;  
    	left: -30%;  
    	right: 0;  
    	margin: auto;
	}

.hungryhouse_image1{
	    max-height: 130%;
	   	max-width: 150%;
		min-width: 105%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: 0%;  
    	left: -20%;  
    	right: 0%; 
		margin:auto;
	}

	
.hungryhouse_image2{
	    max-height: 110%;
	   	max-width: 150%;
		min-width: 105%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: 0%;  
    	left: -20%;  
    	right: 0%; 
		margin:auto;
	}

.fitnessfirst_image2{
	    max-height: 150%;
	   	max-width: 130%;
		min-width: 100%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -5%;  
    	left: -20%;  
    	right: 0%; 
		margin:auto;
	}
	
.fitnessfirst_image3{
	    max-height: 150%;
	   	max-width: 130%;
		min-width: 70%;
	  	display: block;
	    position:absolute; 
		 top: 0%;  
   		bottom: -0%;  
    	left: -10%;  
    	right: 0%; 
		margin:auto;
	}

	

/* homepage */

.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 26px;
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em; 
		
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 26px;
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em;  
		
}

.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 25px;
		text-decoration: none;
		cursor:pointer;
		letter-spacing: 0.05em; 
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		font-size: 25px;
		letter-spacing: 0.05em; 
		-webkit-text-fill-color: #252525;
}

	
#title {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
		min-height: 29px;
}

#linkedin {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		height: 4.5vmin;
	min-height: 29px;
}	
	
#company {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 29px;
}
#phone {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 29px;
}
	
#email {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		position: relative;
		height: 4.5vmin;
	min-height: 29px;
}


.case-image1{
     	max-height: 150%;
	   	max-width: 200%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: -40%;  
    	right: 0;  
    	margin: auto;
	}
	

.case-image2{
     	max-height: 150%;
		max-width: 150%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: -30%;  
    	right: 0;  
    	margin: auto;
}
	
.case-image3{
     	max-height: 150%;
	   	max-width: 200%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image4{
    	max-height: 130%;
	   	max-width: 140%;
	  	display: block;
	    position: absolute; 
	    top: -10%;  
    	bottom: 0;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image5{
     	max-width: 200%;
		min-width: 100%;
		min-height: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0%;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}

.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:20px;
		padding-left:10%;
		padding-right:10%;
		padding-top:20vmin;
		text-decoration:none;
}

.tile-header:hover {
		text-decoration:none;
}


.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:14px;
		padding-left:10%;
		padding-right:10%;
		padding-top:3%;
		line-height:150%;
		text-decoration: none;
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:12px;
		margin-left:10%;
		padding-top:20px;
		line-height:150%;
		letter-spacing: 0.01em;
		float:left;
}

.svg_tile{
		fill: #252525;
		margin-top: 18px;
		margin-left: 2%;
		float:left;
	width:22px; 
	height:22px;
}

.svg_tile:hover{
		fill: #252525;
}

.tile-bullets {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:1.5vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:3%;
		line-height:150%;
}


.tile1 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:right;
		height:60vmin;
		min-height:400px;
 		overflow: hidden;
}

.tile2 {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:60vmin; 
	min-height:400px;
		overflow: hidden;
}

.tile3 {
		background-color:#000;
		position:relative;
		width:50%;
		float:left;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile4 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile5 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:right;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile6 {
		background-color:#04df7a;
		position:relative;
		width:50%;
		float:left;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile7 {
		background: rgb(32,80,160);
        background: -moz-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(32,80,160,1)), to(rgba(231,3,5,1)));
        background: -o-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
		position:relative;
		width:50%;
		float:right;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile8 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile9 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:60vmin;
	min-height:400px;
 		overflow: hidden;
}

.tile10 {
		background-color:#f0eff7;
		position:relative;
		width:50%;
		float:right;
		height:60vmin; 
	min-height:400px;
		overflow: hidden;
}



/* case template */

.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		-webkit-text-fill-color: #252525;
		font-size:12px;
		line-height:150%;
}

#intro {
		width: 75%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		padding-top: 5vh;
		margin-bottom:5vh;
}

.case_container{
		background-color:white;
	 	 position: absolute;
  	   	top: 85%;
		left: 5%;
		right: 5%;
		width:90%;
	}
	
.box_top {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:50vmin; 
		overflow: hidden;
}

.box_bottom {
		background-color:#efefef;
		position:relative;
		width:50%;
		float:right;
		height:50vmin;
 		overflow: hidden;
}

	
.next a{
		background-color:transparent;
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.next a:hover{
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		-webkit-text-fill-color: #252525;
	}
	
.previous a{
		background-color:transparent;
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.previous a:hover{
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		-webkit-text-fill-color: #252525;
	}

	
.svg_previous{
		float: left;
		fill: #252525;
		margin-left: 5%;
		margin-top: -1px;
}

	
.svg_next{
		float: right;
		fill: #252525;
		margin-right: 5%;
		margin-top: -1px;
}	
		
}



@media (max-width: 780px) {
	

#svg {
		position: relative;
		max-width: 1360px;
		float: left;
		top: -60px;
		width: 140px;
}	
	
#svg1 {
		position: relative;
		max-width: 1200px;
		top: 10px;
		max-height: 40px;
}

.svg_home {
  		background-color: transparent;
		margin-left:5vw;
		margin-bottom: 3vh;
  		width: 16px;
		heght:16px;
	
}
	

/* homepage */

	
.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		position: relative;
		font-size: 16px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em; 
		
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 16px; 
		-webkit-text-fill-color: #252525; 
		letter-spacing: 0.01em;  
		
}

.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		position: relative;
		font-size: 16px; 
		text-decoration: none;
		cursor:pointer;
		letter-spacing: 0.05em; 
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		font-size: 16px; 
		letter-spacing: 0.05em; 
		-webkit-text-fill-color: #252525;
}
	
#title {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
		min-height: 25px;
}

#linkedin {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		height: 4.5vmin;
	min-height: 25px;
}	
	
#company {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 25px;
}
#phone {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		height: 4.5vmin;
	min-height: 25px;
}
	
#email {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		position: relative;
		height: 4.5vmin;
	min-height: 25px;
}


.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:14px;
		padding-left:10%;
		padding-right:10%;
		padding-top:26vmin;
		text-decoration:none;
}

.tile-header:hover {
		text-decoration:none;
}


.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:10px;
		padding-left:10%;
		padding-right:10%;
		padding-top:3%;
		line-height:150%;
		text-decoration: none;
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:10px;
		margin-left:10%;
		padding-top:16px;
		line-height:150%;
		letter-spacing: 0.01em;
		float:left;
}

.svg_tile{
		fill: #252525;
		margin-top: 15px;
		margin-left: 2%;
		float:left;
		width:16px; 
	height:16px;
}

.svg_tile:hover{
		fill: #252525;
}


.tile1 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:right;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile2 {
		background-color:#252525;
		position:relative;
		width:50%;
		float:right;
		height:70vmin; 
	min-height:300px;
		overflow: hidden;
}

.tile3 {
		background-color:#000;
		position:relative;
		width:50%;
		float:left;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile4 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile5 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:right;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile6 {
		background-color:#04df7a;
		position:relative;
		width:50%;
		float:left;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile7 {
		background: rgb(32,80,160);
        background: -moz-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(32,80,160,1)), to(rgba(231,3,5,1)));
        background: -o-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
		position:relative;
		width:50%;
		float:right;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile8 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile9 {
		background-color:#ffffff;
		position:relative;
		width:50%;
		float:left;
		height:70vmin;
	min-height:300px;
 		overflow: hidden;
}

.tile10 {
		background-color:#f0eff7;
		position:relative;
		width:50%;
		float:right;
		height:70vmin; 
	min-height:300px;
		overflow: hidden;
}



/* case template */

.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		-webkit-text-fill-color: #252525;
		font-size: 2vmin;  /* this is the fucker*/
}

#intro {
		width: 75%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		padding-top: 5vh;
		margin-bottom:5vh;
}

.case_container{
		background-color:white;
	 	 position: absolute;
  	   	top: 85%;
		left: 5%;
		right: 5%;
		width:90%;
	}

	
.next a{
		background-color:transparent;
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.next a:hover{
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		-webkit-text-fill-color: #252525;
	}
	
.previous a{
		background-color:transparent;
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.previous a:hover{
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 20px;
		-webkit-text-fill-color: #252525;
	}

	
.svg_previous{
		float: left;
		fill: #252525;
		margin-left: 5%;
		margin-top: -1px;
}

	
.svg_next{
		float: right;
		fill: #252525;
		margin-right: 5%;
		margin-top: -1px;
}	

}

@media (max-width: 400px) {
	


/* homepage */

#title {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:5vw;
		text-wrap:unrestricted;
		height: 8vmin;
}

#linkedin {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:5vw;
		height: 8vmin;
}


#tile-bullet1 { display: none; }
#tile-bullet2 { display: none; }
#tile-bullet3 { display: none; }
.mobile-hide{ display: none; }


#email {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:5vw;
		position: relative;
		height: 8vmin;
}

#company {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:5vw;
		text-wrap:unrestricted;
		height: 8vmin;
}

#phone {
		width: 100%;
  		background-color: transparent;
  		text-align:left;
		margin-left:5vw;
		text-wrap:unrestricted;
		height: 8vmin;
}

.svg_home{
		fill: #252525;
		margin-left:10vw;
  		width: 24px;
		heght:24px;
	
}

.svg_home:hover{
		fill: #252525;
}


.notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		position: relative;
		font-size: 14px; 
	 margin-left:20px;
		text-decoration:none;
		-webkit-text-fill-color: #252525;
}


.nolinkbold {
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		position: relative;
		font-size: 5vmin; 
		-webkit-text-fill-color: #252525; 
}

.nolink {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		position: relative;
		font-size: 5vmin; 
		-webkit-text-fill-color: #252525; 
}


.link a {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		position: relative;
		font-size: 5vmin; 
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
}

.link a:hover {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		font-size: 5vmin; 
		-webkit-text-fill-color: #252525;
}


.case-image1{
     	max-height: 200%;
	   	max-width: 170%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: -10%;  
    	left: -30%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image2{
    	max-height: 150%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image3{
     	max-height: 150%;
	   	max-width: 150%;
		min-height: 100%;
		min-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0%;  
    	left: -10%;  
    	right: 0;  
    	margin: auto;
	}


.case-image4{
     	max-height: 150%;
	   	max-width: 170%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0;  
   		left: -5%;  
    	right: 0;  
    	margin: auto;
	}
	
.case-image5{
     	max-height: 150%;
	   	max-width: 150%;
		min-width: 100%;
		min-height: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0%;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}
	
	
.case1{
		background-color:white;
  		float:left;
		width:100%;
		margin-top: -40px;
		margin-bottom:7%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
}
	
	
.case2{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:7%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}
	
.case3{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:7%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}
	
.case4{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:20%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}
	

.case5{
		background-color:white;
  		float:left;
		width:100%;
		margin-bottom:7%;
		-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
		box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
	}




.logo {
		background-color:white;
		position:relative;
		width:50%;
		float:left;
		height:10vh;
}

.logos{
	background-color:white;
	float:left;
	width:80%;
	padding-bottom:10%;
	margin-left:10%;
	}
	

.bottom{
	background-color:white;
	width:100%;
	padding-bottom:25%;
	text-align: center;
	}

.tile-header {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:5vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:70px;
		text-decoration:none;
}

.tile-header:hover {
		text-decoration:none;
}

.tile-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:4vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
		line-height:150%;
		text-decoration: none;
}

.tile-copy-button {
		font-family: 'Gothic A1', san-serif;
		font-weight : 400;
		-webkit-text-fill-color: #252525;
		font-size:3.7vmin;
		margin-left:10%;
		padding-top:20px;
		line-height:150%;
		letter-spacing: 0.01em;
		float:left;
}

.svg_tile{
		fill: #252525;
		height: 20px;
		margin-top: 18px;
		margin-left: 2%;
		float:left;
		width:20px; 
}

.svg_tile:hover{
		fill: #252525;
}

.tile-bullets {
		font-family: 'Gothic A1', san-serif;
		font-weight : 200;
		-webkit-text-fill-color: #252525;
		font-size:1.5vmin;
		padding-left:10%;
		padding-right:10%;
		padding-top:5%;
}


.tile1 {
		background-color:#ffffff;
		position:relative;
		width:100%;
		float:none;
		height:87vw;

}

.tile2 {
		background-color:#252525;
		position:relative;
		width:100%;
		float:none;
		height:70vw;
}

.tile3 {
		background-color:#000;
		position:relative;
		width:100%;
		float:none;
		height:70vw;
}

.tile4 {
		background-color:#ffffff;
		position:relative;
		width:100%;
		float:none;
		height:87vw;
}

.tile5 {
		background-color:#ffffff;
		position:relative;
		width:100%;
		float:none;
		height:87vw;
}

.tile6 {
		background-color:#04df7a;
		position:relative;
		width:100%;
		float:none;
		height:70vw;
}

.tile7 {
		background: rgb(32,80,160);
        background: -moz-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(32,80,160,1)), to(rgba(231,3,5,1)));
        background: -o-linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
        background: linear-gradient(90deg, rgba(32,80,160,1) 0%, rgba(231,3,5,1) 100%);
		position:relative;
		width:100%;
		float:none;
		height:70vw;
}

.tile8 {
		background-color:#ffffff;
		position:relative;
		width:100%;
		float:none;
		height:87vw;
}


.tile9 {
		background-color:#ffffff;
		position:relative;
		width:100%;
		float:none;
		height:87vw;
}

.tile10 {
		background-color:#f0eff7;
		position:relative;
		width:100%;
		float:none;
		height:70vw;
}



#svg {
	
		position: relative;
		float: left;
		max-width: 1200px;
		top: -50px;
		width: 200px;
}
	
	#svg1 {
		position: relative;
		max-width: 1200px;
		top: 30px;
		max-height: 40px;
}


#floater {
    	height: 34vh;
    	width: 100%;
		background-color: transparent;
		margin-bottom:-15.5vmin;
}

#up-arrow {
  		background-color:white;
		width:20vmax;
		height: 15vmin;
}

.up-arrow{
		fill: #e3e3e3;
		width: 5vmin;
	}
	
.up-arrow:hover{
		fill: #252525;
		width: 5vmin;
	}



/* case template */



.boxes{
		background-color:transparent;
		width:100%;
		margin-bottom:15%;
		max-height:145vw;
}

.box_top {
		background-color:#252525;
		position:relative;
		width:100%;
		height:70vw;
		margin-bottom:5vw;
}

.box_bottom {
		background-color:#efefef;
		position:relative;
		width:100%;
		height:70vw;
}

	
	
.image-copy {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		-webkit-text-fill-color: #252525;
		font-size:3.5vmin;
		line-height:150%;
}
	
.case_container{
		background-color:white;
	  	position: absolute;
  	   	top: 85%;
		left: 5%;
		right: 5%;
		width:90%;
}
	
.case_notes {
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		position: relative;
		font-size: 3vmin;
		text-decoration:none;
		-webkit-text-fill-color: #252525;
}
	
.case_notes_2 {
		font-family: 'Gothic A1', san-serif;
		font-weight : 300;
		position: relative;
		font-size: 3vmin;
		text-decoration:none;
		-webkit-text-fill-color: #252525;
}
	
.info_text{
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 3vmin; 
		text-decoration:none;
		-webkit-text-fill-color: #252525;
		margin-left:10vw;
		text-align:left;
		letter-spacing: 0.05em; 
}
	

.bottom1{
		background-color:white;
		width:100%;
		padding-bottom:6vmax;
		text-align: center;
	}

#bottom_case {
		background-color:white;
		position: relative;
		width: 100%;
		margin-bottom: 200px;
	}
	
.bottom_next{
		background-color:transparent;
		float: right;
		margin-right: 3%;
		max-width: 30%;
	}
	
.bottom_previous{
		background-color:transparent;
		float: left;
		margin-left: 3%;
		max-width: 30%;
	}
	
#case_floater {
    	height: 15vh;
    	width: 100%;
		background-color: transparent;
		margin-bottom:-15.5vmin;
}

#svg_home {
  		background-color: transparent;
		margin-left:5vw;
		margin-bottom: 3vh;
}

#intro {
		width: 75%;
  		background-color: transparent;
  		text-align:left;
		margin-left:10vw;
		text-wrap:unrestricted;
		padding-top: 3vh;
		margin-bottom:4vh;
}

.casetext {
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 15%;
}

.fixed_width{
		margin-bottom:15%;
	}
	

.fluid_rectangle_back {
		background-color:#252525;
		position:relative;
		height:70vh;
 		overflow: hidden;
}

.fluid_square_back {
		background-color:#252525;
		position:relative;
		height:90vw;
 		overflow: hidden;
}

.fluid_rectangle{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:15%;
	}
	
.fluid_square{
		background-color:white;
		float:left;
		width:100%;
		margin-bottom:15%;
	}
	
.next a{
		background-color:transparent;
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 16px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.next a:hover{
		float: left;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 16px;
		-webkit-text-fill-color: #252525;
	}
	
.previous a{
		background-color:transparent;
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 16px;
		text-decoration: none;
		cursor:pointer;
		-webkit-background-clip: text;
  		-webkit-text-fill-color: #252525;
	}
	
.previous a:hover{
		float: right;
		font-family: 'Gothic A1', san-serif;
		font-weight : 500;
		font-size: 16px;
		-webkit-text-fill-color: #252525;
	}

	
.svg_previous{
		float: left;
		fill: #252525;
		margin-left: 5%;
		margin-top: -1px;
}

	
.svg_next{
		float: right;
		fill: #252525;
		margin-right: 5%;
		margin-top: -1px;
}
	
	
/* Case studies */

	
	.rbsnatwest_image{
		 	max-height: 120%;
	   	max-width: 100%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: -25%;  
    	left: 0%;  
    	right: 0;  
    	margin: auto;
	}
	
	
.rbsnatwest_image2{
	    max-height: 140%;
	   	max-width: 130%;
		min-width: 117%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0%;  
    	left: -15%;  
    	right: 0;  
    	margin: auto;
	}
	
.rbsnatwest_image3{
	    max-height: 150%;
	   	max-width: 220%;
	  	display: block;
	    position: absolute; 
	    top: -10%;  
   		bottom: 0%;  
    	left: -35%;  
    	right: 0;  
    	margin: auto;
	}
		
		

	.britishmuseum_image0{
		 	max-height: 250%;
	   	max-width: 250%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 0%;  
    	left: -75%;  
    	right: 0;  
    	margin: auto;
	}
	

.yasisland_image0 {
     	max-height: 200%;
	   	max-width: 180%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
    	bottom: 5%;  
    	left: -30%;  
    	right: 0;  
    	margin: auto;
	}

.hungryhouse_image1{
	    max-height: 150%;
	   	max-width: 150%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -10%;  
    	left: -22%;  
    	right: 0;  
    	margin: auto;
	}
	
.hungryhouse_image2{
	    max-height: 95%;
	   	max-width: 250%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0%;  
    	left: -30%;  
    	right: 0;  
    	margin: auto;
	}
	
.fitnessfirst_image1{
	    max-height: 135%;
	   	max-width: 150%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -0%;  
    	left: -15%;  
    	right: 0;  
    	margin: auto;
	}
	
.fitnessfirst_image2{
	    max-height: 110%;
	   	max-width: 250%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: -10%;  
    	left: -50%;  
    	right: 0;  
    	margin: auto;
	}
	
.fitnessfirst_image3{
	    max-height: 170%;
	   	max-width: 150%;
	  	display: block;
	    position: absolute; 
	    top: 0;  
   		bottom: 0%;  
    	left: -22%;  
    	right: 0;  
    	margin: auto;
	}

}