/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,600,900&subset=latin');

/* ############# UNIVERSAL ELEMENTS  ########### */

html {
  font-size: 62.5%; 
}


body {
  background-color: white;
	color: #1d1d1d; /* default text color for all text */
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat','Arial', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
}

div {
	box-sizing: border-box;
}	

a {
	color: inherit;
	text-decoration: none;
}

.textlink {
		text-decoration: none;
		color: inherit;
		box-shadow: inset 0 -3px 0 #FCEE21;
		transition: all 0.1s linear;
	}
	
.textlink:hover {box-shadow: inset 0 -6px 0 #FCEE21; padding: 0 4px;}

.linkAnim {
	transition: all 0.1s linear;
}

.link_yellow { box-shadow: 0 -3px #fff600 inset; }
.link_yellow:hover { box-shadow: 0 -6px #fff600 inset;}

.link_cyan { box-shadow: 0 -3px #00ebeb inset; }
.link_cyan:hover { box-shadow: 0 -6px #00ebeb inset; }

.link_red { box-shadow: 0 -3px #ff0000 inset; }
.link_red:hover { box-shadow: 0 -6px #ff0000 inset; }

h1 {
	font-size: 36px;
	line-height: 28px;
	font-weight: 900;
	display: block;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 15px;
	box-sizing: border-box;
}

h4 {
	font-size: 21px;
	line-height: 26px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}

h4 strong {
	font-weight: 900;
}

.copyBig {
	font-size: 18px;
	line-height: 26px;
	letter-spacing: -0.2px;
}

.copyBig strong, strong {
	font-weight: 600;
}

.patternBox {
	position: relative;
	background-image: url('WebImages/Pattern2.png');
	background-size: 50px;
	background-position: bottom;
	margin: 0px;
	box-shadow: inset 0 -3px 4px rgba(0,0,0,0.07);
}

.topBox {
	height: 30px;
}

.ponyCorner {
	position: absolute;
	top: 7px;
	left: 5px;
	width: 36px;
	background-image: url('Webimages/Pony_Colour.png');
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	opacity: .6;
}

.ponyCorner:hover {
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	opacity: 1;
}

.Logo {
	display: block;
	margin: 28px auto 18px;
	width: 75px;
}

.workIntro {
	width: calc(100% - 16px);
	margin: 0 auto 30px;
	padding: 0;
	text-align: center;
	b/order: 1px solid red;
}

.workIntroImage {
	position: relative;
	display: block;
	padding: 12px 0 0;
}

.workIntroImageBG {
	position: absolute;
	z-index: -2;
	display: block;
	width: 100%;
	height: 85%;
	top: -12px;
	left: 0;
	background-color: #ebebeb;
	background-position: 40% 100%;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: 1px solid #cccccc;
	}
	
.workIntro p {
	width: 82%;
	text-align: left;
	margin: 0px auto 15px;
}

.workContainer {
	width: calc(100% - 16px);
	max-width: 800px;
	margin: 0 auto;
}

.workContainerLarge {
	width: calc(100% - 16px);
	max-width: 1600px;
	margin: 0 auto;
}	

.workContainer p {
	margin: -10px 0 20px;
}

.workContainerDark {
	margin: 0;
	background: #101010;
	padding: 16px 0;
}

p.spacer {
	margin-top: 30px;
}

.workVideo {
	text-align: center;
}

.workVideo p {
	margin: 3px 0 10px;
}

.videoContainer {
	margin: auto;
	padding: 0;
	position: relative;
	padding-bottom: 56.25%;
	background-color: #cccccc;
	box-sizing: border-box;
}

.videoContainer9x16 {
	width: 320px;
	height: 568px;
	margin: 0 10px 20px;
	padding: 0;
	position: relative;
	background-color: #cccccc;
	box-sizing: border-box;
}

.videoPlayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	

.dividerImg {
	display: block;
	width: 36%;
	max-width: 200px;
	margin: 32px auto;
}

.dividerSmall {
	height: 1px;
	margin: 30px auto 0px;
}

.dividerTiny {
	display: block;
	height: 15px;
	margin: 0;
}

.imageIntro {
	margin: 0 auto;
	width: 100%;
	max-width: 971px;
	display: block;
}

.imageBig, .imageSmall {
	width: 100%;
	margin: 0 auto 15px;
	display: block;
	border-bottom: 1px solid #cccccc;
}

.imageRound {
	border-radius: 8px;
}

.imageShadow {
	//box-shadow: 0 5px 5px rgba(0,0,0,0.15);	
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.15));
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.15));
}

.videoSmall {
	width: 100%;
	max-width: 360px;
	margin: 0 auto 15px;
	display: block;
}

.Award {
	width: 44px;
}

.footerBox {
	box-shadow: inset 0 5px 10px rgba(0,0,0,0.15);
	margin: 32px 0 0 0;
	background-position: top left;
	padding: 36px 0 64px;
	text-align: center;
}	


ul.footerLinks {
	list-style: none;
	margin: 0;
	padding: 0;
}	

ul.footerLinks li {
	display: block;
	margin: 0 0 18px;
	font-weight: 600;
}

.footerImg {
	display: block;
	height: 34px;
	margin: 0 auto;
}

.contactImg {
	display: block;
	width: 26px;
	margin: 15px auto 0px;
}

.endPony {
	display: block;
	width: 54px;
	margin: 0 auto;
}	

.backTop {
	position: absolute;
	width: 30px;
	opacity: .40;
	right: 10px;
	bottom: 12px;
}

.backTop:hover {
	opacity: 1.0;
}

.noBorder {
	border: 0px;
}

 /*  ^^^^^^^^^^^^^^^ 380px ^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 380px) { 
		h1 {
			padding: 0 20px;
		}
}

		
 /*  ^^^^^^^^^^^^^^^ 450px ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 450px) { 
	
	h1 {
		font-size: 40px;
		line-height: 32px;
		font-size: 7.8vw;
		line-height: 6.3vw;
	}
	
	h4 {
		font-size: 24px;
		line-height: 28px;
	}
	
	.copyNormal {
		font-size: 15px;
		line-height: 24px;
	}
	
	.Logo {width: 15vw; min-width: 85px;}
	
	.workIntroImage {padding: 12px 0 0;}
	
	.workIntroImageBG {top: -2vw;}
		
	.workIntro p {
		width: 90%;
		text-align: center;
		margin: 0px auto 22px;
	}
	
	.videoContainer9x16 {
		display: inline-block;
		vertical-align: top;
		width: 180px;
		height: 320px;
	}
		
}


 /*  ^^^^^^^^^^^^^^^ 600px ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 599px) { 
	
	h1 {
		font-size: 42px;
		line-height: 34px;
		font-size: 7.8vw;
		line-height: 6.3vw;
	}
	
	.workIntroImage {padding: 15px 0 0;}
		
	.workIntro p {
		margin: 0px auto 25px;
	}
	
	.imageIntro {
		max-width: 680px;
		margin: 0 auto 28px;
	}
		
	.workContainer {
		max-width: 600px;
	}
	
	.dividerImg {
		width: 25%;
		margin: 42px auto;
	}
	
	.dividerSmall {margin: 45px auto 0;}
	
	.imageSmall, .videoSmall {
		width: calc(50% - 7px);
		max-width: 390px;
		display: inline-block;
		margin: 0 0 14px 0;
		vertical-align: top;
	}
	
	.videoContainer9x16 {
		display: inline-block;
		vertical-align: top;
		width: 270px;
		height: 480px;
	}
	
	
	.imageLeft {
		margin: 0 14px 0 0;
	}
	
	.videoLeft {
		margin-right: 7px;
	}
	
	.footerImg {height: 42px;}

	
	ul.footerLinks li {
		display: inline-block;
		margin: 0 16px;
	}
	
	.backTop {
		right: 16px;
		bottom: 18px;
	}
		
}

 /*  ^^^^^^^^^^^^^^^ 768px ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 760px) { 
	
	body {
	 font-size: 16px;
	 line-height: 24px;
	}
	
	h1 {
		font-size: 60px;
		line-height: 48px;
		font-size: 7.8vw;
		line-height: 6.3vw;
	}
	
	h4 {
		font-size: 28px;
		line-height: 33px;
	}
	
	.copyBig {
		font-size: 21px;
		line-height: 30px;
		letter-spacing: -0.2px;
	}
	
	.patternBox {
		background-size: 80px;
	}
	
	.ponyCorner {
		top: 10px;
		left: 8px;
		width: 40px;
	}
	
	.Logo {margin: 40px auto 22px; width: 100px; width: 11.7vw; min-width: 100px;}
	
	
	.workIntro {
		width: calc(100% - 24px);
		margin: 0 auto 40px;
	}
		
	.workIntro p {
		margin: 0px auto 25px;
	}
	
	.imageIntro {
		max-width: 800px;
	}
	
	.imageRound {
		border-radius: 12px;
	}
	
	.workContainer {
		width: calc(100% - 24px);
		max-width: 700px;
	}
	
	.workContainerLarge {
		width: calc(100% - 24px);
	}
	
	.workContainerDark {
		padding: 24px 0;
	}
	
	.videoContainer9x16 {
		width: 360px;
		height: 640px;
	}
	
	.workVideo p {
		margin: 6px 0 24px;
	}
	
	.Award {
		width: 58px;
	}
	
	.dividerImg {
		margin: 48px auto;
	}
	
	.dividerSmall {margin: 50px auto 0;}
	
	.dividerTiny {height: 20px;}
		
}


/*  ^^^^^^^^^^^^^^^ 1024px ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 1000px) { 
	
	h1 {
		font-size: 78px;
		line-height: 63px;
		font-size: 7.8vw;
		line-height: 6.3vw;
	}
	
	.copyNormal {
		font-size: 16px;
		line-height: 26px;
	}
	
	.ponyCorner {
		left: 11px;
		width: 40px;
	}
	
	.workIntro {
		width: calc(100% - 32px);
		margin: 0 auto 50px;
	}
		
	.workIntro p {
		width: 84%;
		max-width: 1000px;
		margin: 0px auto 30px;
	}
	
	.workIntroImage {padding: 18px 0 0;}
	
	.imageIntro {
		max-width: 920px;
	}
	
	.workContainer {
		width: calc(100% - 32px);
		max-width: 800px;
	}
	
	.workContainerLarge {
		width: calc(100% - 32px);
	}
	
	.workContainerDark {
		padding: 48px 0;
	}
	
	
	.dividerImg {
		margin: 56px auto;
	}
	
	.imageBig {
		margin: 0 auto 20px;
	}
	
	.imageSmall {
		width: calc(50% - 10px);
		display: inline-block;
		margin: 0 0 20px 0;
		vertical-align: top;
	}
	
	.videoSmall {
		width: calc(50% - 10px);
		display: inline-block;
		margin: 0 0 20px 0;
		vertical-align: top;
	}


	.imageLeft {
		margin: 0 20px 0 0;
	}
	
	.videoLeft {
		margin-right: 10px;
	}
	
	.contactImg {	width: 32px; margin: 15px auto 3px; }
	
	.backTop {
		width: 40px;
		right: 20px;
		bottom: 30px;
	}
		
}




 /*  ^^^^^^^^^^^^^^^ 1280px ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */ 
@media (min-width: 1280px) { 
	
	h1 {
		font-size: 100px;
		line-height: 80px;
		padding: 0 20px;
	}
	
	h4 {
		font-size: 36px;
		line-height: 42px;
	}
	
	.copyBig {
		font-size: 24px;
		line-height: 36px;
		letter-spacing: -0.2px;
	}
	
	.ponyCorner {
		left: calc((100% - 1200px) / 2 - 8px);
		width: 44px;
	}
	
	.Logo {margin: 50px auto 30px; width: 150px;}
	
	.workIntro {
		max-width: 1200px;
		margin: 0 auto 60px;
	}	
	
	.workIntroImage {padding: 20px 0 0;}
	
	.workIntroImageBG {top: -28px;}
	
	.workVideo p {
		margin: 6px 0 20px;
	}
	
	.imageIntro {
		max-width: 971px;
	}
	
	.imageRound {
		border-radius: 16px;
	}
	
	.Award {
		width: 80px;
	}
	

}