/*------------------------------

	STYLESHEET

	FF. Font Faces
	Gen. General 
	Full. Full Width Case
	1900. Responsive Cases - Scale Down below 1900px
	1700. Responsive Cases - Scale Down below 1700px
	1440. Responsive Cases - Scale Down below 1440px
	1300. Responsive Cases - Scale Down below 1300px
	1024. Responsive Cases - Scale Down below 1024px
	M. Responsive Cases - Scale Down below 768px
	M-425. Responsive Cases - Scale Down below 425px
	1920+. Responsive Cases - Account for larger than 1080p resolution
 
	COLOURS
		Pink: 
			#e30390
			rgba(227,3,144,1)
		Blue:
			#19c3df
			rgba(25,195,223,1)

------------------------------*/

/*------------------------------
    FF. FONT FACES 
------------------------------*/
	
	@font-face {
	    font-family: 'MarkPro';
	    src: url('../fonts/MarkPro.woff2') format('woff2'),
	         url('../fonts/MarkPro.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;
		}
	@font-face {
		font-family: 'MarkPro-Black';
		src: url('../fonts/MarkPro-Black.woff2') format('woff2'),
				url('../fonts/MarkPro-Black.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		}
		
/*------------------------------
    Gen. GENERAL 
------------------------------*/
	
	* {
		box-sizing: border-box;		
		--webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		--webkit-text-size-adjust: none;
		}
	
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
		}

	body {
		font-family: 'MarkPro', arial, sans-serif;	
		font-size: 18px;
		line-height: 36px;
		color: rgba(0,0,0,0.7);	
		overflow:auto;
		}
	
	img {
		border: 0;
		vertical-align: top;
		}	
	
	p, h1, h2, h3, h4, h5 {
		margin: 0 0 30px 0;
		padding: 0;
		font-weight: normal;
		font-style: normal;
		}	

	a {
		color: #e30390;
		transition: all 0.25s ease-out;
		text-decoration: none;
		}
	a:hover {
		color: #19c3df;
		}

	hr {
		height: 2px;
		border: none;
		background: #19c3df;
		margin: 80px 0 30px 0;
		clear: both;
	}
	
	
/*------------------------------
    Full. LAYOUTS
------------------------------*/
	
	header .logoGL {
		position: fixed;
		z-index: 5;
		display: block;
		top: 0;
		left: 50px;
		padding: 45px 50px;
		background: #e30390;
		}			
	/*
	header .logoGL:hover {
		padding-top: 60px;
		background: #19c3df;
		}
		*/
		.logoGL img {
			width: 55px;
			height: auto;
			}	
	header .menuButton {
		position: fixed;
		z-index: 5;
		display: block;
		top: 60px;
		right: 60px;
		width: 37px;
		height: 22px;
		cursor: pointer;
		}
		header .menuButton-hamburger {
			position: absolute;
			left: 0;
			right: 0;
			width: 37px;
			height: 3px;
			margin: auto;
			background: #e30390;
			border-radius: 3px;
			transition: all .25s ease-out;
			}
		header .menuButton-hamburger.bar1 {
			top: 0;
			}
		header .menuButton-hamburger.bar2 {
			top: 10px;
			}
		header .menuButton-hamburger.bar3 {
			top: 20px;
			}

			/* ACTIVE STATE */

			header .menuButton.open .menuButton-hamburger.bar1 {
				top: 4px;
				transform: rotate(45deg) translateX(6px) translateY(5px);
				background: #fff;
				}
			header .menuButton.open .menuButton-hamburger.bar2 {
				width: 0;
				background: #fff;
				}
			header .menuButton.open .menuButton-hamburger.bar3 {				
				transform: rotate(-45deg) translateX(6px) translateY(-6px);
				background: #fff;
				}

	/* MENU */

	header .menu {
		display: block;
		position: fixed;
		z-index: 4;
		top: 0;
		right: -600px;
		width: 600px;
		height: 100%;
		background: rgba(227,3,144,0.95);
		text-align: center;
		padding: 150px 150px 0 150px;
		transition: all 0.7s ease-out;
		}
	header .menu.open {
		right: 0;
		}

		/* MENU - LEVEL 1 */

		header .menu ul {
			padding: 0;
			margin: 0 0 60px 0;
			}			
			header .menu ul li {
				padding: 0;
				margin: 0 0 40px 0;
				list-style: none;
				}
				header .menu ul li {
					display: block;
					position: relative;
					top: 50px;					
					opacity: 0;
					transition: all 0.3s ease-out;
					}					
				header .menu ul li:nth-child(1) {
					transition-delay: 0.5s;
					}						
				header .menu ul li:nth-child(2) {
					transition-delay: 0.6s;
					}						
				header .menu ul li:nth-child(3) {
					transition-delay: 0.7s;
					}						
				header .menu ul li:nth-child(4) {
					transition-delay: 0.8s;
					}	
				header .menu.open ul li {
					opacity: 1;
					top: 0;
					}					
					header .menu ul li a {
						display: block;
						position: relative;
						font-family: 'MarkPro-Black', arial, sans-serif;	
						font-size: 55px;
						line-height: 55px;
						text-transform: uppercase;
						color: #fff;	
						cursor: pointer;
						transform: rotate(0);
						transition: all 0.25s ease-out;
						}				
					header .menu ul li a:hover {
						transform: rotate(-3deg);
						}					
						header .menu ul li a:before {
							content: "";
							display:block;
							position:absolute;
							bottom: -10px;
							left: 0;
							right: 0;
							width: 0;
							height: 3px;
							margin: 0 auto;
							background: #fff;
							transition: all 0.25s ease-out;
							}						
						header .menu ul li a:hover:before {
							width: 50%;
							}				
					header .menu ul li.hasSub > a:after {
						content: "";
						position: absolute;
						top: 12px;
						right: 20px;
						width: 25px;
						height: 25px;
						background: url('../images/icon-plus-white.svg') no-repeat center center;	
						background-size: 100% auto;
						transition: all 0.25s ease-out;
						}			
					header .menu ul li.hasSub > a.open:after {
						transform: rotate(45deg);
						}

					/* MENU - LEVEL 2 */
		
					header .menu ul li ul {
						height: 0;
						padding: 0;
						margin: 0;
						overflow: hidden;
						transition: all 0.5s ease-out;
						}	
					header .menu ul li ul.open {						
						height: 130px;
						}		
						header .menu ul li ul li {
							padding: 0;
							margin: 0 0 20px 0;
							list-style: none;
							}	
						header .menu ul li ul li:first-child {
							margin-top: 30px;
							}
							header .menu ul li ul li a {
								font-family: 'MarkPro-Black', arial, sans-serif;	
								font-size: 18px;
								line-height: 18px;
								text-transform: uppercase;
								color: #fff;	
								}
								header .menu ul li ul li a:hover:before {
									display:none;
									}
	
		header .menu .menu-logo {	
			position: relative;
			opacity: 0;
			bottom: -30px;
			transition: all 0.3s ease-out;
			}	
		header .menu.open .menu-logo {		
			opacity: 1;
			bottom: 0;		
			transition-delay: 0.9s;
			}		
		header .menu-socialIcon {
			position: relative;
			opacity: 0;
			bottom: -30px;
			transition: all 0.3s ease-out;			
			}	
		header .menu.open .menu-socialIcon {		
			opacity: 1;
			bottom: 0;		
			transition-delay: 0.9s;
			}	
		header .menu-socialIcon img {
			transition: all 0.3s ease-out;
			height: auto;
			transform: scale(1);
			}			
		header .menu-socialIcon img:hover {
			transform: scale(1.15);
			}	
		header .menu-socialIcon.instagram img {
			margin-right: 15px;
			}

	.logo {
		position: relative;
		z-index: 2;
		display: block;
		width: 285px;
		height: auto;
		margin: 250px auto 0 auto;
		}		
	.colourBomb {
		position: fixed;
		z-index: 0;
		top: 50px;
		left: 0;
		right: 0;
		width: 955px;
		height: auto;
		margin: 0 auto;
		}			
			
	.arrow {
		position: fixed;
		z-index: 4;
		top: 700px;
		left: 0;
		right: 0;
		width: 45px;
		height: auto;
		margin: 0 auto;
		opacity: 1;
		transition: all 0.25s ease-out;
		}
	.scrolled .arrow {		
		opacity: 0;
		}
		
	.overlay {
		position: relative;
		z-index: 3;
		width: 100%;
		height: auto;
		margin-top: -200px;
		overflow: hidden;
		}	
		.overlay img {			
			width: 100%;
			height: auto;
			}	

	.body {
		position: relative;
		z-index: 3;
		width: 100%;
		margin-top: -2px;
		background: #fff;
		}

		.intro {
			width: 800px;
			margin: 0 auto;
			padding: 100px 0;
			text-align:center;
			}
			.intro h1 {
				font-family: 'MarkPro', arial, sans-serif;	
				font-size: 30px;
				line-height: 40px;
				letter-spacing: 1px;
				color: #e30390;
				}

		.about {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: right;
			align-items: stretch;
			width: 1400px;
			margin: 0 auto;
			padding-bottom: 125px;
			}		
		.about.amanda {
			padding-bottom: 50px;
			}				
			.about-text {
				width: 50%;
				flex: 0 50%;
				flex-basis: auto;
				flex-grow: 0;
				flex-shrink: 0;
				padding-right: 60px;
				}					
				.about-text h2 {
					margin-bottom: 0;
					font-family: 'MarkPro-Black', arial, sans-serif;	
					font-size: 367px;
					line-height: 367px;
					text-transform: uppercase;
					color: #e30390;	
					}
				.about-text-indent {					
					margin-left: 185px;
					}					
					.about-text-indent h3 {
						font-family: 'MarkPro-Black', arial, sans-serif;	
						font-size: 43px;
						line-height: 53px;
						text-transform: uppercase;
						letter-spacing: 2px;
						color: #19c3df;	
						}					
					.about-text-indent p {
						margin-bottom: 40px;
						}				
					.about-text-indent p span {
						color: #19c3df;	
						}		
			.about-photo {
				width: 50%;
				flex: 0 50%;
				flex-basis: auto;
				flex-grow: 0;
				flex-shrink: 0;						
				}
				.about-photo img {
					width: 110%;
					height: auto;					
					}

	.work {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: right;
		align-items: stretch;
		width: 1400px;
		margin: 0 auto;
		}
		.work-text {
			position: relative;
			width: 69%;
			flex: 0 69%;
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 0;
			padding: 380px 190px 380px 0;
			text-align: right;
			}					
			.work-text h2 {
				position: relative;
				z-index: 2;
				margin-bottom: 0;
				font-family: 'MarkPro-Black', arial, sans-serif;	
				font-size: 87px;
				line-height: 87px;
				text-transform: uppercase;
				color: #e30390;	
				}					
				.work-text h2 span {
					color: #fff;	
					}						
				.work-text h2 br {	
					display: none;
					}					
			.work-text-colourBomb {
				position: absolute;
				z-index: 1;
				top: 0;
				right: 0;
				}
		.work-buttons {
			position: relative;
			z-index: 2;
			width: 31%;
			flex: 0 31%;
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 0;
			padding-top: 315px;
			}	
			.work-buttons .button {
				width: 230px;
				text-align: center;
				margin-bottom: 25px;
				}	

	footer {
		position: relative;
		z-index: 3;
		width: 100%;
		background: #fff;
		}

		.contact {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: right;
			align-items: stretch;
			width: 1400px;
			margin: -2px auto 0 auto;
			padding: 25px 0 100px 0;
			}
			.contact-text {
				position: relative;
				width: 45%;
				flex: 0 45%;
				flex-basis: auto;
				flex-grow: 0;
				flex-shrink: 0;
				padding: 125px 230px 0 0;
				}					
				.contact-text h2 {
					margin-bottom: 35px;
					font-family: 'MarkPro-Black', arial, sans-serif;	
					font-size: 54px;
					line-height: 56px;
					text-transform: uppercase;
					color: #e30390;	
					}					
					.contact-text h2 span {
						color: #19c3df;	
						}					
				.contact-text h3 {
					margin-bottom: 45px;
					font-family: 'MarkPro-Black', arial, sans-serif;	
					font-size: 40px;
					line-height: 42px;
					text-transform: uppercase;
					color: #94BE16;	
					}					
					.contact-text h3 br {
						display: none;
						}	
				.contact-text ul {
					margin: 0;
					padding: 0;
					}		
					.contact-text ul li {
						margin: 0;
						padding: 3px 0 15px 65px;
						list-style: none;
						}	
					.contact-text ul li:first-child {
						background: url('../images/icon-phone.svg') no-repeat 0 0;
						}
					.contact-text ul li:last-child {
						background: url('../images/icon-email.svg') no-repeat 0 5px;
						}	
						.contact-text ul li a {
							font-size: 21px;
							line-height: 21px;
							}
			.contact-photo {
				position: relative;
				width: 55%;
				flex: 0 55%;
				flex-basis: auto;
				flex-grow: 0;
				flex-shrink: 0;
				}
				.contact-photo img {
					width: 100%;
					height: auto;
					}
		
		.foot {
			padding: 100px;
			font-size: 16px;
			line-height: 20px;
			text-align: center;
			color: #fff;
			background: #e30390;
			}
			.foot-logo {
				width: 150px;
				height: auto;
				margin-bottom: 50px;
				}	
			.foot-copyright {
				margin-bottom: 30px;
				}			
			.foot-socialIcon img {
				width: 40px;
				height: auto;
				transition: all 0.25s ease-out;
				transform: scale(1);
				}			
			.foot-socialIcon img:hover {
				transform: scale(1.15);
				}	
				.foot-socialIcon.instagram img {
					margin-right: 15px;
					}

	/* PAGE HEADING EXPLOSION */

	.headingExplosion {
		width: 90%;
		max-width: 750px;
		margin: 0 auto;
		padding: 300px 150px 300px 150px;
		background: url('../images/colour-bomb-blue-pink.jpg') no-repeat center center;
		background-size: contain;
		}
	.headingExplosion.bluePinkPurple {
		background: url('../images/colour-bomb-blue-pink-purple.jpg') no-repeat center center;
		background-size: contain;
		}
	.headingExplosion.bluePinkPurple2 {
		background: url('../images/colour-bomb-blue-pink-purple-2.jpg') no-repeat center center;
		background-size: contain;
		}
	.headingExplosion.bluePinkSoft {
		background: url('../images/colour-bomb-blue-pink-soft.jpg') no-repeat center center;
		background-size: contain;
		}
	.headingExplosion.blueGreenYellow {
		background: url('../images/colour-bomb-blue-green-yellow.jpg') no-repeat center center;
		background-size: contain;
		}
		.headingExplosion h1 {
			font-family: 'MarkPro-Black', arial, sans-serif;	
			font-size: 75px;
			line-height: 65px;
			text-transform: uppercase;
			text-align: center;
			color: #fff;
			}
			.headingExplosion h1 span {	
				display: block;
				margin-bottom: 10px;
				font-size: 25px;
				line-height: 35px;
				}

	/* PAGE - INTRO */

	.body-intro {
		display: block;
		width: 80%;
		max-width: 800px;
		margin: 0 auto 100px auto;
		text-align: center;
		}	
		.body-intro h2 {
			padding: 0 40px;
			font-size: 30px;
			line-height: 40px;
			letter-spacing: 1px;
			color: #e30390;
			}	

	/* PAGE - ABOUT */

	.body-about {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: right;
		align-items: stretch;
		width: 80%;
		max-width: 1400px;
		margin: 0 auto;
		padding-bottom: 100px;
		}	
	.body-about.amanda  {
		padding-bottom: 150px;
		}				
		.body-about-text {
			width: 50%;
			flex: 0 50%;
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 0;
			padding-top: 70px;
			padding-right: 100px;
			}					
		.amanda .body-about-text {
			padding-left: 100px;
			padding-right: 0;
			}					
			.body-about-text img {
				display: none;
				}					
			.body-about-text h2 {
				margin-bottom: 15px;
				font-family: 'MarkPro-Black', arial, sans-serif;	
				font-size: 50px;
				line-height: 50px;
				text-transform: uppercase;
				color: #e30390;	
				}					
			.body-about-text h3 {
				margin-bottom: 40px;	
				font-size: 35px;
				line-height: 42px;
				color: #19c3df;	
				}					
			.body-about-text p {
				margin-bottom: 25px;
				}		
			.body-about-text p:last-of-type {
				margin-bottom: 50px;
				}				
			.body-about-text .button {
				margin-right: 15px;	
				}				
			.body-about-text .button:last-of-type {
				margin-right: 0;	
				}		
		.body-about-photo {
			width: 50%;
			flex: 0 50%;
			flex-basis: auto;
			flex-grow: 0;
			flex-shrink: 0;						
			}
			.body-about-photo img {
				width: 100%;
				height: auto;					
				}
	
	.body-services {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		width: 90%;
		max-width: 1400px;
		margin: 0 auto;
		text-align: center;
		}
		.body-services-box {
			width: 23%;
			flex: 0 23%;
			margin-bottom: 60px;
			}
			.body-services-box img {
				width: auto;
				height: 130px;
				margin-bottom: 45px;
				}
			.body-services-box h2 {
				position: relative;
				margin-bottom: 65px;
				font-family: 'MarkPro-Black', arial, sans-serif;
				font-size: 45px;
				line-height: 50px;
				text-transform: uppercase;
				color: #e30390;
				}
				.body-services-box h2:after {
					content: "";
					position: absolute;
					left: 0;
					right: 0;
					bottom: -20px;
					width: 100px;
					height: 2px;
					margin-left: auto;
					margin-right: auto;
					background: #19c3df;
					border-radius: 4px;
					}
			.body-services-box ul {
				margin: 0;
				padding: 0;
				}
				.body-services-box ul li {
					margin: 0;
					padding: 0 0 12px 0;
					list-style: none;
					line-height: 24px;
					}

	/* PAGE - WEB */

	a.work-web,
	div.work-web {
		display: block;
		position: relative;
		width: 80%;
		max-width: 1100px;
		margin: 0 auto 80px auto;
		overflow: hidden;
		}
		a.work-web:before,
		div.work-web:before {
			content: "Visit Website";
			display: block;
			position: absolute;
			z-index: 2;
			top: -60px;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 180px;
			padding: 21px 30px 20px 30px;
			margin-bottom: 10px;
			font-family: 'MarkPro-Black', arial, sans-serif;	
			font-size: 16px;
			line-height: 16px;
			text-transform: uppercase;
			text-align: center;
			letter-spacing: 2px;
			color: #fff;
			background: #e30390;
			border-radius: 100px;
			transition: all 0.25s ease-out;
			}
			div.work-web:before {
				width: 200px;
				content: "Website Pending";				
				color: rgba(0,0,0,0.7);
				background: #fff;
				}
		a.work-web:hover:before,
		div.work-web:hover:before {
			top: 15px;
			}
		a.work-web .work-web-image,
		div.work-web .work-web-image {
			width: 100%;
			height: auto;
			}
		
	/* PAGE - WEB, ASSET & BRAND */

	.work-more {
		display: block;
		width: 80%;
		max-width: 1100px;
		padding: 60px 0 0 0;
		margin: 0 auto 40px auto;
		text-align: center;
		}
		.work-more h2 {
			position: relative;
			margin-bottom: 65px;
			/*padding-bottom: 15px;*/
			font-family: 'MarkPro-Black', arial, sans-serif;
			font-size: 54px;
			line-height: 56px;
			text-transform: uppercase;
			color: #e30390;
			}
			/*.work-more h2:after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: -20px;
				width: 30%;
				height: 2px;
				margin-left: auto;
				margin-right: auto;
				background: #19c3df;
				border-radius: 4px;
				}*/
		.work-more .button {
			margin-left: 15px; 
			margin-right: 15px; 
			}
	
	/* PAGE - ASSET & BRAND */

	.work-image {
		display: block;
		position: relative;
		width: 80%;
		max-width: 1100px;
		margin: 0 auto 40px auto;
		}

	/* SLICK SLIDER GALLERY */

	.gallery {
		width: 1100px;
		height: auto;
		margin: 0 auto;
		border: 1px solid rgba(0,0,0,0.1);
		cursor: grab;
		}
		.gallery img {
			display: block;
			width: 100%;
			height: auto;
			background-repeat: no-repeat;
			background-position: top center;
			background-size: cover;
			}	
	.gallery-single {
		display: block;
		width: 1100px;
		height: auto;
		margin: 0 auto 40px auto;
		}

		/* SLIDER OVERRIDES */

		.gallery .slick-dotted.slick-slider {
			margin-bottom: 0;
			}
		.gallery .slick-dots {
			position: absolute;
			left: 0;
			right: 0;			
			width: 200px;
			z-index: 2;
			bottom: 20px;
			margin-left: auto;	
			margin-right: auto;	
			}	
			.gallery .slick-dots li button:before {
				padding-top: 1px;
				color: rgba(0,0,0,0.2);
				opacity: 1;
				font-size: 14px;
				line-height: 14px;
				}
			.gallery .slick-dots li.slick-active button:before {
				color: #000;
				}

	/* TESTIMONIAL  */

	.testimonial {
		display: block;
		width: 80%;
		max-width: 1100px;
		margin: 100px auto 40px auto;
		text-align: center;
		}
		.testimonial img {
			width: 150px;
			height: auto;
			margin-bottom: 45px;
			}
		.testimonial h2 {
			position: relative;
			margin-bottom: 35px;
			/*padding-bottom: 15px;*/
			font-family: 'MarkPro-Black', arial, sans-serif;
			font-size: 54px;
			line-height: 56px;
			text-transform: uppercase;
			color: #e30390;
			}
			/*.testimonial h2:after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				bottom: -20px;
				width: 30%;
				height: 2px;
				margin-left: auto;
				margin-right: auto;
				background: #19c3df;
				border-radius: 4px;
				}*/
		.testimonial h2 span {
			color: #19c3df;
			}
		.testimonial p.author {
			color: #19c3df;
			}

	.button {
		display: inline-block;
		position: relative;
    	top: 0;
		padding: 21px 30px 20px 30px;
		margin-bottom: 10px;
		font-family: 'MarkPro-Black', arial, sans-serif;	
		font-size: 16px;
		line-height: 16px;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #fff;
		background: #e30390;
		border-radius: 100px;
		}
	.button:hover {
		top: -5px;
		color: #fff;
		box-shadow: 0 5px 0 0 #19c3df;
		}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1900. RESPONSIVE CASES - SCALES DOWN BELOW 1900
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1900px) {

	header .logoGL {
		left: 35px;
		padding: 35px 40px;
		}	
		.logoGL img {
			width: 40px;
			}	
					
	header .menu ul li a {	
		font-size: 45px;
		line-height: 45px;
		}	
		header .menu ul li.hasSub > a:after {
			top: 8px;
			}

	.about {
		width: 100%;
		padding-left: 200px;
		padding-right: 200px;
		}
		.about-text h2 {
			margin-bottom: 0;	
			font-size: 300px;
			line-height: 300px;	
			}	
		.about-text-indent {					
			margin-left: 155px;
			}	

	.work {
		width: 100%;
		padding-left: 200px;
		padding-right: 200px;
		}
		.work-text {
			width: 75%;
			flex: 0 75%;
			padding-top: 370px;
			}					
			.work-text h2 {	
				font-size: 90px;
				line-height: 90px;
				}	
			.work-text-colourBomb {
				width: 780px;
				height: auto;
				right: 20px;
				}
		.work-buttons {
			width: 25%;
			flex: 0 25%;
			}

	.contact {
		width: 100%;
		padding-left: 200px;
		padding-right: 200px;
		}
		.contact-text {
			padding-right: 100px;
			}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1700. RESPONSIVE CASES - SCALES DOWN BELOW 1700
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1700px) {
							
	.about-text {
		padding-top: 50px;
		padding-right: 50px;
		}					
		.about-text h2 {
			margin-bottom: 0;	
			font-size: 250px;
			line-height: 250px;	
			}		
		.about-text-indent {					
			margin-left: 12px;
			}	
	.about-photo img {
		width: 115%;
		height: auto;					
		}


	.work-text {
		width: 75%;
		flex: 0 75%;
		padding-top: 320px;
		padding-right: 180px;
		padding-bottom: 320px;
		}					
		.work-text h2 {	
			font-size: 70px;
			line-height: 70px;
			}	
		.work-text-colourBomb {
			width: 660px;
			height: auto;
			}
	.work-buttons {
		width: 25%;
		flex: 0 25%;
		padding-top: 240px;
		}
	
	.contact-photo img {
		width: 115%;
		height: auto;
		}

	/* PAGE - ABOUT */

	.body-about {
		max-width: 1000px;
		}					
		.body-about-text {
			width: 100%;
			flex: 0 100%;
			padding-top: 0;
			padding-right: 0;
			}	
		.amanda .body-about-text {
			padding-left: 0;
			}				
			.body-about-text img {
				display: block;
				float: right;
				width: 100%;
				max-width: 500px;
				margin: 0 0 50px 50px;
				}						
				.body-about-text h2 {
					padding-top: 50px;
					}				
		.body-about-photo {
			display: none;
			}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1440. RESPONSIVE CASES - SCALES SITE DOWN BELOW 1440px
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1439px) {

	header .logoGL {
		left: 25px;
		padding: 25px 30px;
		}	
		.logoGL img {
			width: 30px;
			}	
	header .menuButton {
		top: 35px;
		right: 35px;
		}
					
	header .menu {
		right: -500px;
		width: 500px;
		padding: 100px 130px 0 130px;
		}
		header .menu ul li {
			margin-bottom: 30px;
			}
			header .menu ul li a {	
				font-size: 35px;
				line-height: 35px;
				}	
				header .menu ul li.hasSub > a:after {
					top: 8px;
					width: 20px;
					height: 20px;
					}

	.logo {
		width: 200px;
		margin-top: 200px;
		margin-bottom: 65px;
		}		
	.colourBomb {
		width: 700px;
		}				
	.arrow {
		top: 515px;
		width: 35px;
		}

	.work-text {
		width: 75%;
		flex: 0 75%;
		padding-top: 290px;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 320px;		
		text-align: center;
		}					
		.work-text h2 {	
			line-height: 65px;
			color: #fff;
			text-align: center;
			}					
			.work-text h2 a {	
				color: #fff;
				}					
			.work-text h2 a:hover {	
				color: #fff;
				}
		.work-text-colourBomb {
			width: 660px;
			height: auto;
			}

	.contact-text {
		padding-top: 50px;
		}

}
	
/*----------------------------------------------------------------------------------------------------------------------------------------
   	1300. RESPONSIVE CASES - SCALES SITE DOWN BELOW 1300px
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1300px) {

	.overlay img {
		width: 120%;
		margin-left: -10%;
		}

	.intro {
		width: 700px;
		padding-bottom: 50px;
		}

	.about-text {
		width: 100%;
		flex: 0 100%;
		order: 2;	
		padding-right: 0;	
		}		
	.about-photo {
		width: 100%;
		flex: 0 100%;	
		order: 1;		
		padding-left: 20px;		
		text-align: center;
		}	
		.about-photo img {
			max-width: 600px;			
			}			
	.about-text {				
		text-align: center;
		}				
		.about-text h2 {	
			font-size: 200px;
			line-height: 200px;	
			}
		.about-text span {				
			display: block;
			}

	.work-text {
		width: 100%;
		flex: 0 100%;
		padding-top: 260px;
		padding-right: 0;
		padding-bottom: 230px;
		padding-left: 0;
		}					
		.work-text h2 {	
			font-size: 60px;
			line-height: 57px;
			}						
			.work-text h2 br {	
				display: block;
				}	
		.work-text-colourBomb {
			width: 600px;
			height: auto;
			left: 0;
			right: 0;
			margin: 0 auto;
			}
	.work-buttons {
		width: 100%;
		flex: 0 100%;
		padding-top: 0;
		padding-bottom: 50px;
		text-align: center;
		}
		.work-buttons br {
			display: none;
			}
		.work-buttons .button:first-child {
			margin-right: 20px;
			}

	/* SLICK SLIDER GALLERY */

	.gallery {
		width: 800px;
		}	
	.gallery-single {
		width: 800px;
		}

	.contact-text {
		width: 100%;
		flex: 0 100%;
		order: 2;
		padding-right: 0;
		text-align: center;
		}		
		.contact-text h2 {
			font-size: 40px;
			line-height: 45px;
			}					
		.contact-text h3 {
			font-size: 30px;
			line-height: 35px;
			}					
			.contact-text h3 br {
				display: block;
				}	
		.contact-text ul {
			margin: 0 auto;
			text-align: center;
			}		
			.contact-text ul li {
				padding: 0 0 5px 0;
				}		
				.contact-text ul li:first-child {
					background: none;
					}
				.contact-text ul li:last-child {
					background: none;
					}
	.contact-photo {
		width: 100%;
		flex: 0 100%;	
		order: 1;				
		text-align: center;
		padding-left: 30px;
		}	
		.contact-photo img {
			max-width: 600px;			
			}	
		
	.foot-logo {
		width: 100px;
		}

	/* PAGE - INTRO */
		
	.body-intro p {
		padding: 0 50px;
		}

	/* PAGE - ABOUT */

	.body-about {
		max-width: 700px;
		}					
		.body-about-text {
			text-align: center;
			}				
			.body-about-text img {
				float: none;
				margin: 0 auto;
				padding-left: 50px;
				}					
			.amanda .body-about-text img {
				padding-left: 0;
				padding-right: 30px;
				}						
			.body-about-text h2 {
				padding-top: 50px;
				}							
			.body-about-text .button {
				margin-left: 7px;	
				margin-right: 7px;	
				}				
			.body-about-text .button:last-of-type {
				margin-right: 7px;	
				}			
		.body-about-photo {
			display: none;
			}

	/* PAGE - SERVICES */

	.body-services-box {
		width: 47%;
		flex: 0 47%;
		}
		.body-services-box:nth-child(1) {
			order: 1;
			}
		.body-services-box:nth-child(2) {
			order: 3;
			}
		.body-services-box:nth-child(3) {
			order: 4;
			}
		.body-services-box:nth-child(4) {
			order: 2;
			}

	/* PAGE - WEB */

	a.work-web,
	div.work-web {
		margin-bottom: 120px;
		overflow: visible;
		}
		a.work-web:before,
		div.work-web:before {
			top: auto;
			bottom: -40px;
			width: 160px;
			padding: 16px 20px 15px 20px;
			font-size: 14px;
			line-height: 14px;
			}
		div.work-web:before {
			width: 180px;
			background: #e5e5e5;
			}
		a.work-web:hover:before,
		div.work-web:hover:before {
			top: auto;
			}

	/* PAGE - WEB, ASSET & BRAND */

	.work-more {
		padding-top: 50px;
		margin-bottom: 50px;
		}
		.work-more h2 {
			font-size: 40px;
			line-height: 45px;
			}
		.work-more .button {
			margin-left: 10px; 
			margin-right: 10px; 
			}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1024. RESPONSIVE CASES - SCALES SITE DOWN BELOW 1024
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 1023px) {
	
	header {
		overflow: hidden;
		}
		header .logoGL {
			position: absolute;
			}	
		header .menuButton {
			position: absolute;
			}
		header .menu {
			position: absolute;
			height: auto;
			right: auto;
			top: -800px;
			width: 100%;
			padding: 100px 250px;
			}
			header .menu.open {
				top: 0;
				}

	.home {
		background: url('../images/colour-bomb.jpg') no-repeat top center;
		background-size: 700px auto;	
		}

	.logo {
		width: 200px;
		margin-top: 100px;
		margin-bottom: 0;
		padding-top: 160px;
		padding-bottom: 190px;
		}	
	.colourBomb {
		display: none;
		}						
	.arrow {
		display: none;
		}
	.overlay {
		display: none;
		}

	.intro {
		width: 100%;
		padding-top: 0;
		padding-left: 100px;
		padding-right: 100px;
		}
		.intro h1 br {
			display: none;
			}

	.about {
		width: 100%;
		padding-top: 0;
		padding-left: 100px;
		padding-right: 100px;
		}				
		.about-text h2 {	
			font-size: 200px;
			line-height: 200px;	
			}
		.about-photo img {
			max-width: 500px;			
			}

	.work {
		width: 100%;
		padding-top: 0;
		padding-left: 100px;
		padding-right: 100px;
		}	
	
		/* SLICK SLIDER GALLERY */

		.gallery {
			width: 700px;
			}
		.gallery-single {
			width: 700px;
			}

	.contact {
		width: 100%;
		padding-top: 0;
		padding-left: 100px;
		padding-right: 100px;
		}
		.contact-photo img {
			max-width: 500px;			
			}	

	/* PAGE - INTRO */
	
	.body-intro h2 {
		padding-left: 0;
		padding-right: 0;
		}
	.body-intro p {
		padding-left: 0 !important;
		padding-right: 0 !important;
		}
		
}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	M. RESPONSIVE CASES - SCALES SITE DOWN BELOW 768
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 767px) {

	body {
		line-height: 28px;	
		}

	.home {
		background-size: 600px auto;
		}

	header .menu {
		padding: 130px 50px;
		}

	.logo {
		width: 170px;
		margin-top: 100px;
		margin-bottom: 0;
		padding-top: 130px;
		padding-bottom: 150px;
		}
	.colourBomb {
		width: 700px;
		}
	.overlay img {
		width: 180%;
		margin-left: -40%;
		}

	.intro {
		padding-top: 20px;
		padding-left: 50px;
		padding-right: 50px;
		}
		.intro h1 {
			font-size: 25px;
			line-height: 30px;
			}
			.intro h1 br {
				display: none;
				}
	.about {
		padding-left: 0;
		padding-right: 0;
		}	
		.about-text {		
			padding-top: 30px;		
			padding-left: 40px;
			padding-right: 40px;
			}		
			.about-text h3 {	
				font-size: 30px;
				line-height: 30px;	
				}
		.about-photo img {
			width: 90%;
			}

	.work {
		padding-left: 0;
		padding-right: 0;
		}
		.work-text {
			height: 430px;
			padding-top: 190px;
			padding-bottom: 0;
			background: url('../images/colour-bomb-blue-pink.jpg') no-repeat center center;
			background-size: contain;
			}
			.work-text h2 {
				font-size: 40px;
				line-height: 40px;
				}
			.work-text-colourBomb {
				display: none;
				}
		.work-buttons {
			padding-left: 50px;
			padding-right: 50px;
			}
			.work-buttons .button {
				display: block;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 15px;
				}
			.work-buttons .button:first-child {
				margin-right: auto;
				}

		/* SLICK SLIDER GALLERY */

		.gallery {
			width: 87%;
			}
		.gallery-single {
			width: 87%;
			}
			.gallery .slick-dots {
				bottom: 10px;	
				}
				.gallery .slick-dots li {
					width: 10px;
					height: 10px;
					padding: 0;
					}	
					.gallery .slick-dots li button {
						width: 10px;
						height: 10px;
						padding: 0;
						}
						.gallery .slick-dots li button:before {
							font-size: 10px;
							line-height: 10px;
							}

	.contact {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 60px;
		}
		.contact-text {		
			padding-top: 30px;		
			padding-left: 50px;
			padding-right: 50px;
			}	
			.contact-text h2 {
				margin-bottom: 30px;
				font-size: 30px;
				line-height: 35px;
				}
			.contact-text h3 {
				margin-bottom: 30px;
				font-size: 25px;
				line-height: 30px;
				}
			.contact-text ul li {
				padding-bottom: 0;
				}
			.contact-text ul li a {
				font-size: 18px;
				line-height: 18px;
				}
		.contact-photo img {
			width: 90%;
			}

	.foot {
		padding: 90px;
		}

	/* PAGE HEADING EXPLOSION */

	.headingExplosion {
		margin-top: 80px;
		padding: 160px 80px 160px 80px;
		}
		.headingExplosion h1 {	
			font-size: 50px;
			line-height: 45px;
			}
			.headingExplosion h1 span {	
				font-size: 20px;
				line-height: 25px;
				}

	/* PAGE - INTRO */
	
	.body-intro {
		margin-bottom: 50px;
		}
		.body-intro h2 {
			font-size: 25px;
   			line-height: 30px;
			}

	/* PAGE - ABOUT */
	
	.body-about {
		padding-bottom: 70px;
		}	
	.body-about.amanda  {
		padding-bottom: 70px;
		}	
		.body-about-text h2 {
			padding-top: 30px;
			font-size: 30px;
			line-height: 30px;
			}
		.body-about-text h3 {
			font-size: 25px;
			line-height: 32px;
			}

	/* PAGE - SERVICES */
	
	.body-services-box {
		width: 100%;
		flex: 0 100%;
		margin-bottom: 60px;
		}
		.body-services-box:nth-child(1) {
			order: 1;
			}
		.body-services-box:nth-child(2) {
			order: 2;
			}
		.body-services-box:nth-child(3) {
			order: 3;
			}
		.body-services-box:nth-child(4) {
			order: 4;
			margin-bottom: 0;
			}
		.body-services-box img {
			margin-bottom: 30px;
			}
		.body-services-box h2 {
			margin-bottom: 45px;
			font-size: 35px;
			line-height: 40px;
			}

	/* PAGE - WEB */

	a.work-web:before,
	div.work-web:before {
		bottom: -60px;
		}

	/* PAGE - WEB, ASSET & BRAND */

	.work-more {
		padding-top: 30px;
		}
		.work-more h2 {
			margin-bottom: 35px;
			font-size: 30px;
			line-height: 30px;
			}
		.work-more .button {
			margin-left: 10px; 
			margin-right: 10px; 
			}
	
	/* TESTIMONIAL  */
	
	.testimonial h2 {
		font-size: 30px;
    	line-height: 30px;
		}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	M-425. RESPONSIVE CASES - SCALES SITE DOWN BELOW 425
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 425px) {
	
	.home {
		background-size: 470px auto;
		}

	.logo {
		width: 140px;
		margin-top: 100px;
		margin-bottom: 0;
		padding-top: 105px;
		padding-bottom: 90px;
		}

	/* PAGE HEADING EXPLOSION */

	.headingExplosion {
		width: 100%;
		margin-top: 100px;
		padding: 130px 60px 110px 60px;
		}
		.headingExplosion h1 {	
			font-size: 40px;
			line-height: 38px;
			}
			.headingExplosion h1 span {	
				margin-bottom: 5px;
				font-size: 15px;
				line-height: 20px;
				}
			
	/* PAGE - ABOUT */

	.body-about-text img {
		padding-left: 20px;
		}					
	.amanda .body-about-text img {
		padding-left: 0;
		padding-right: 10px;
		}

	/* PAGE - WEB */

	a.work-web,
	div.work-web {
		margin-bottom: 140px;
		}
		a.work-web:before,
		div.work-web:before {
			bottom: -80px;
			}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	M-320. RESPONSIVE CASES - SCALES SITE DOWN BELOW 320
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (max-width: 320px) {
	
	.intro {			
		padding-left: 35px;
		padding-right: 35px;
		}
	.about-text {			
		padding-left: 35px;
		padding-right: 35px;
		}

}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	1920+. RESPONSIVE CASES - ACCOUNTS FOR LARGER THAN 1080p RESOLUTION
----------------------------------------------------------------------------------------------------------------------------------------*/
					
@media screen and (min-width: 1921px) {

	

}