@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/*
End of super helpful css reset
*/

* {
  box-sizing:border-box;
}
/*
For more intuitive size rules
*/




/*
************************************LINK Colours************************************
*/


.Project a:link {
	color: #aa949a;
	text-decoration: none;
}
.Project a:visited {
	color: #aa949a;
	text-decoration: none;
}
.Project a:hover {
	color: #ff004d;
	text-decoration: none;
}
a:link {
	color: #ff004d;
	text-decoration: none;
}
a:visited {
	color: #ff004d;
	text-decoration: none;
}
a:hover {
	color: #aa949a;
	text-decoration: none;
}


/* HOME PAGE */

#home .SmallHero {
	background-image:url(../public/MC-Website-Banner.gif);
}



/*
************************************PAGE************************************
*/

.List-Page {

		background:white;
		/*background:#f5f0e4;*/
}

.Project-Page {

		background:white;

}
.Home-Page {

		background:white;

}
.Contact-Page {
	background:white;
}
.Showreel-Page {
	background:black;
}
html {
	font-size: 2vw;
}

body {
        font-size:1em;
		font-family: 'Work Sans', Arial, sans-serif;
		font-weight: 400;
		color:black;
		/*letter-spacing: 0.02em;*/
}
AlternativeBodyCopy {
		font-family: 'Roboto', Arial, sans-serif;
		font-weight: 300;
        font-size: 100%;
        color:black;
}

/*h1 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 300; font-size:2em;letter-spacing:0.25em;line-height: 110%; }*/
h1 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 300; font-size:2em;line-height: 110%; }
h2 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 300; font-size:1.5em; }
h3 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 600; font-size:1em;text-transform:uppercase; }
h4 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 600; font-size:0.8em; text-transform:uppercase;}
p { }

/*
************************************HEADER************************************
*/
.Header {
width:100%; background:white; padding-top:3em; padding-bottom:3em;
border: 0px dashed #f00;
}
.SpacerLeft {
	float:left;
	width:4%;
	border: 0px dashed #f00;
	min-height: 1em;
}
.HeaderImage{ float: left; width: 15%; border: 0px dashed #f00; min-height: 1em;}
.PageTitle{ display: table; width: 62%; border: 0px dashed #f00; text-align:center; float:left}
.Contact{ float: left; width: 15%; text-align:right; padding-top:0.3em; border: 0px dashed #f00; font-size: 1.05em; font-weight: 100; line-height: 90%;}
.SpacerRight {
	float:left;
	width:4%;
	border: 0px dashed #f00;
	min-height: 1em;
}
.clear {
	clear:both;
}

.HeaderImage a{
	/* background-image:url(../Images/HeaderImage.png); */
	/* background-size:3em; */
	/* width:3em; */
	/* background-repeat:no-repeat; */
	/* height:3em;
	display:block; */
} 

h1 { 
	/*color: white;*/
	text-transform: uppercase;
}
.Header a:link {
	font-family: 'Work Sans', Arial, sans-serif;
/*	font-weight: 100;*/
	/*color: #f5f0e4;*/
	text-decoration:none;
/*	font-size:0.7em;*/
}
/* visited link */
.Header a:visited {
color: black;
}
/* mouse over  */
.Contact a:hover {
color: #ff004d;
}
.PageTitle a:hover {
color: #ff004d;
}
/* selected link */
.Header a:active {
color: black;
}

/*
************************************LIST PAGE PROJECTS************************************
*/

.Container {
	border: 0px dashed #f00;
	/*	padding: 0px;*/
	margin-top: 0px;
	margin-bottom: 0%;
	width:90%;
	margin-left:5%;
	margin-right:5%;
	/*background:red;*/
	float:none;
}
.Project {
		width:49%;
		float:left;
		margin: 0.5% 0.5%;
}
.ProjectTitle h2 {
	font-size:1em;
}

/* Persistent Horizontal Rule */
	.phLine {
		border-top: 8px dotted #fafafa;
		width:100%;
		clear:both;
		margin-top:6%;
	}


@media screen and (max-width:640px) {
	.Container {
		width:100%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0%;
		margin-bottom: 0%;
		float:none;
	}
	.Project {
		width:80%;
		margin-top:6%;
		margin-bottom:6%;
		margin-left:10%;
		margin-right:10%;
	}
	.ProjectTitle h2 {
		font-size:2em;
	}
	.hLine { /* Responsive Horizontal Rule */
		border-top: 8px dotted #fafafa;
		width:100%;
		clear:both;
	}
}

@media screen and (min-width:1280px) {
	.Container {
		width:1152px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 0%;
		float:none;
		/*background:red;*/
	}
	.Project {
		width:49%;
		float:left;
		margin: 0.5% 0.5%;
	}
	.ProjectTitle h2 {
		font-size:1em;
	}
	html {
		font-size: 1.5em;
	}
}

.Project img {
	display: block;
	width:80%;
	margin: 0 auto;
	padding-top:10%;
}
.Project:hover {
	/*background:#faf7f1;*/
	background:#fafafa;
	
}
.ProjectTitle {
	width:80%;
	margin: 0 auto;
	padding-top:6%;
	padding-bottom:6%;
	text-align:center;
}

/* links */


/*
************************************PROJECT PAGE************************************
*/

.FixedHero {
	height:30em;
	display:block;
	overflow:hidden;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
}
.Hero {
	height:30em;
	background-size: cover;
    background-attachment: scroll;
    background-position: center center;	
}
.SmallHero {
	height:15em;
	background-size: cover;
    background-attachment: scroll;
    background-position: center center;	
}
.Text{
	margin-top:7em;
	margin-left:auto;
	margin-right:auto;
	width:70%;
}
.Award{
	margin-top:4em;
	margin-left:auto;
	margin-right:auto;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 1.5em;
	text-align:center;
}
.Scheme{
	margin-top:0.5em;
	margin-left:auto;
	margin-right:auto;
	font-weight: 400;
	text-transform:uppercase;
	font-size: 1.5em;
	text-align:center;
}
.Quote{
	margin-top:4em;
	margin-left:auto;
	margin-right:auto;
	font-family: 'PT Serif', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.5em;
	text-align:center;
	line-height:1.7em;
/*	background:#000;
	color:white;*/
	padding:0.5em;
}
.Attr{
	margin-top:0.5em;
	margin-left:auto;
	margin-right:auto;	
	font-weight: 600;
	text-transform:uppercase;
	font-size: 1em;
	text-align:center;
	padding:1em;
}

.Secondary{
	display:block;
	margin-top:7em;
	margin-left:auto;
	margin-right:auto;
	width:80%;
}
.Project-Page h2 {
	color: #ff004d;
	text-align:center;
}
.Project-Page h3 {
	margin-top:3em;
	text-align:center;
}
.Project-Page h4 {
	text-align:center;
}
.Project-Page p {
	margin-top:3em;
	font-size:1.2em;
	line-height:1.7em;
}
.Home-Page h2 {
	/*color: #ff004d;*/
	text-align:center;
}
.Home-Page h3 {
	margin-top:3em;
	text-align:center;
}
.Home-Page h4 {
	text-align:center;
}
.Home-Page p {
	margin-top:3em;
	font-size:1.2em;
	line-height:1.7em;
	text-align:center;
}
.Role {
	font-style:italic;
	text-transform:uppercase;
	padding-right: 0.5em;
}
.Video {
	display:block;
	margin-top:7em;
	margin-left:auto;
	margin-right:auto;
	width:80%;
	border: 0px dashed #f00;
	text-align:center;
	clear:both;
}
.VideoHero {
	width:100%;
}
.Caption {
	margin-top:0.5em;
	margin-left:auto;
	margin-right:auto;
	width:70%;
	font-size:1em;
	line-height:1.5em;
	text-align:center;
	/*font-style:italic;*/
	color: #aa949a;
	font-weight: 200;
}
.HomeCaption {
	margin-top:2em;
	margin-left:auto;
	margin-right:auto;
	width:70%;
/*	font-size:1.2em;
	line-height:1.7em;*/
	font-size:1em;
	line-height:1.7em;
	text-align:center;
}

/*
************************************CONTACT PAGE************************************
*/
.Contact-Page a:link {
	text-decoration:none;
}
/* visited link */
.Contact-Page a:visited {
}
/* mouse over  */
.Contact-Page a:hover {
/*color: #ff004d;*/
}
/* selected link */
.Contact-Page a:active {
/*color: #ff004d;*/
}
.contactCentre{
	position: relative;
}
.contactText{
	text-align:center;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	height:0em;
	border: 0px dashed #f00;
	/*color: white;*/
	/*letter-spacing:0.05em;*/
	
}
/*
************************************FOOTER************************************
*/

footer { width:100%; background:white; color:black; min-height:7em; margin-top:6em; clear:both;}




/*
************************************Hero Images - I don't know why this isn't in the html************************************
*/

#hsk .Hero {
	background-image:url(../hsk/hsk-02.jpg);
}
#prideamsterdam2019 .Hero {
	background-image:url(../prideamsterdam2019/prideamsterdam2019-02.jpg);
}
#Martin .Hero {
}
#YourKingdomDown .Hero {
}
#amsteldok .Hero {
	background-image:url(../amsteldok/amsteldok-02.jpg);
}
#beerwulf .Hero {
	background-image:url(../beerwulf/beerwulf-01.jpg);
}
#phylter .Hero {
	background-image:url(../phylter/phylter-01.jpg);
}	
#banoctopus .Hero {
	background-image:url(../banoctopus/banoctopus-01.jpg);
}
#robecosummernights .Hero {
	background-image:url(../robecosummernights/rsn-01.jpg);
}
#fraudeenderving .Hero {
}
#nuon .Hero {
}
#houseofmusic .Hero {
}
#concertgebouw .Hero {
	background-image:url(../concertgebouw/concertgebouw-01.jpg);
}
#Europride .Hero {
}
#murphyslaw .Hero {
	background-image:url(../murphyslaw/murphyslaw-01.jpg);
}
#VodafoneIntComms .Hero {
	background-image:url(../vodafoneinternalcomms/vfintcomms-01.jpg);
}
#VodafoneMusic .Hero {
	background-image:url(../vodafonemusic/vodafonemusic-01.jpg);
}
#Tutssel .Hero {
	background-image:url(../tutsselandtutssel/tutssel-01.jpg);
}
#Footwall .Hero {
}
#BrandUnion .Hero {
}
#Shell .Hero {
	background-image:url(../shell/shell-06.jpg);
}
#Limelight .Hero {
}
#KoinkWebsite .Hero {
}
#KoinkMonster .Hero {
	background-image:url(../koink/monster/monster-01.jpg);
}
#HeavenlySpheres .Hero {
	background-image:url(../heavenlyspheres/hs-01.jpg);
}
#GeekyMusic .Hero {
	background-image:url(../geekymusic/geekymusic-01.jpg);
}
#FundsNetwork .Hero {
	background-image:url(../fundsnetwork/fundsnetwork-01.jpg);
	height:15em;
}
#Cannes .Hero {
	background-image:url(../thesmallbook/cannes-08.jpg);
}
#Argos .Hero {
}
#EPM .Hero {
	/*background-image:url(../epm/epm-01.png);*/
	/* moved to HMTL!! */
}
#EPMold .Hero {
	background-image:url(../epmold/epm-01.jpg);
}
#AlienZoo .Hero {
	background-image:url(../koink/alienzoo/az-01.jpg);
}
#AEG .Hero {
	background-image:url(../aeg/aeg-05.jpg);
}
#ABLV .Hero {
	background-image:url(../ablv/ablv-01.jpg);
}
#Fidelity .Hero {
	background-image:url(../fidelity/Fidelity-01.jpg);
}
#Vodafone .Hero {
}