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

html, body {
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
body {
	position: relative;
	text-align: left;
	font-family: "Palanquin", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 16px;
	line-height: 1.4em;
	color: #383838;
	background-color: #e5e5e5;
	overflow-x: hidden;
	animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
* {
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: 0;
	-webkit-transition: all .2s ;
	-o-transition: all .2s ;
	-moz-transition: all .2s ;
	transition: all .2s ease-in-out;
}
p {
	letter-spacing: -0.01em;
	margin: 0 0 .9em;
}
a {
	color: #424242;
}
a:hover {
	color: #905a2e;
}
.hide {
    display: none;
}





/**	HOLE *********************************/

.hole {
	display: inline-block;
	border-radius: 100%;
	box-shadow: inset -.15em .2em .2em 0 rgba(0,0,0,.25), -.05em .1em .1em rgba(255,255,255,.45), .05em -.1em .2em rgba(0,0,0,.4);
	background-color: #383838;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}





/**	CAPTION (PDF) *********************************/

.caption {
	border-radius: 2em;
	background-color: #c4c4c4;
	padding: 1.25em 1.5em;
}
body#home .caption { display: none }





/**	BUTTON *********************************/

a.button {
    display: inline-block;
    letter-spacing: .05em;
    font-weight: bold;
    min-width: 8em;
	font-size: 1.2em;
	font-weight: bold;
    text-align: center;
	border-radius: 3em;
	color: #383838; 
    background-color: #c4c4c4;
	transition: all .3s linear;
    text-decoration: none;
	padding: .35em .3em .45em;
    margin-left: -.35em;
}
a.button:hover {
	color: #e5e5e5;
    background-color: #383838;
}
.caption a.button,
a.button.inv {
	color: #c4c4c4;
    background-color: #383838;
}
.caption a.button:hover,
a.button.inv:hover {
	color: #383838;
    background-color: #e5e5e5;
}





/**	HEADER TEXT (H1-H6) *********************************/

h1, h2, h3, h4, h5, h6, blockquote {
	font-weight: normal;
	letter-spacing: normal;
	line-height: .95em;
	margin: 0;
}
h1, h5 {										/* TITLE */
	font-family: "Bebas Neue", sans-serif;
	font-size: 7em;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	line-height: 0.8em;
	word-wrap: break-word; 
 	left: -0.03em; /*ALIGN WITH TEXT */
	margin-bottom: .05em;
}
h2, h3, blockquote {
	font-family: "Pragati Narrow", sans-serif;
	font-weight: bold;
}
h2 {										/* SUBTITLE */
	font-size: 2em;
	margin-bottom: .5em;
}
h3 {										/* PARAGRAPH TITLES */
	font-size: 1.5em;
	margin: 1.25em 0 .5em;
}
h4 {										/* HANDWRITING */
	font-family: "Covered By Your Grace", cursive;
	font-size: 1.5em;
	margin-bottom: .75em;
}
h5 {										/* ALT SECONDARY TITLE (PDF) */
	font-size: 4.5em;
	margin-bottom: .3em;
}
h6 {										/* CREDIT */
	font-size: .6em;
	color: #999;
    font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.image + h6 {
	position: absolute;
	margin-top: -2.75em;
}
blockquote {								/* TEXT QUOTE */
	font-size: 1.8em;
	margin-bottom: .35em;
}





/** LANGUAGES ******************************************/

a.lang {
	position: absolute;
	display: inline-block;
	font-family: "Pragati Narrow", sans-serif;
	font-size: 1em;
	letter-spacing: .04em;
	padding: .1em .75em .05em;
	border-radius: 10em;
	background-color: #c4c4c4;
	margin: 0 0 .5em -.15em;
	text-decoration: none;
} /*
a.lang::before,
a.lang::after {
	content: "\00a0\00a0\00a0";
} */
a.lang:hover {
	color: #e5e5e5;
	background-color: #383838;
}





/**	SPLASH *********************************************/

#splash {
	position: relative;
	display: block;
	height: 85%;
	min-height: 24em;
	background-color: #383838;
	margin-bottom: 2em;
	background-size: cover;
}
@-moz-document url-prefix() {
	#splash  {
		background-color: #353535;
	}
}
#splash::before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 1em; 
	bottom: 0;
	background-image: linear-gradient(transparent,rgb(0,0,0,.4),black);
    mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	-webkit-mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	opacity: .5; z-index: 900;
}
#splash::after{
	content: '';
	position: absolute;
	display: block;
	width: 12em;
	height: 6.6em;
	left: calc(50% - 22.9em);
	bottom: -0.025em;
	background-image: url(/img/splash/_ea.png);
	background-size: contain;
	background-position: left bottom;
	background-repeat: no-repeat;
	z-index: 1000;
}
body#home #splash::after { 
	display: none 
}
body#home .wrapper {
	display: block;
	max-width: 70em;
	height: 100%;
	margin: 0 auto;
}
body#home .logo {
	position: absolute;
	text-align: center;
	width: 40%; min-width: 18em; max-width: 44em; 
	margin: 0 0 3em 2em;
	bottom: 0;
	z-index: 500;
}
body#home .logo div#row1 {
	width: 100%;
	height: 0;
	background-image: url(/img/logo.png);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 51.563%;
}
body#home .logo div#row2 {
	width: 100%;
	height: 0;
	background-image: url(/img/logo_en.png);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 5.859%;
	margin-bottom: 1em;
}
body#home .logo div#row2.fr {
	background-image: url(/img/logo_fr.png);
}
body#home .logo div#row3 {
	padding: 0 1.6em 0 .9em;
}
body#home .logo div#row3 a {
	width: 47%;
	font-size: .75em;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #787878;
	background-color: #4a4a4a;
	white-space: nowrap;
	padding: 0.2em 0; margin: 0;
}
body#home .logo div#row3 a:hover {
	color: #919191;
	background-color: #5c5c5c;
}
body#home .logo.fr {
	background-image: url(/img/home_logo_fr.png);
}
body#home .duo {
	float: right;
	width: 55%; max-width: 39em;
	height: 100%;
	background-image: url(/img/splash/duo.jpg);
	background-size: cover;
	background-position: left 93%;
	background-repeat: no-repeat;
	opacity: .75;
}
.cell .image#covers,
body#covers #splash {
	background-image: url(/img/splash/covers.jpg);
	background-position: 45% 32%;
/*	background-position: 65% 20%; */
	filter: saturate(.85);
}
.cell .image#branding,
body#branding #splash {
	background-image: url(/img/splash/branding.jpg);
	background-position: 0% 55%;
	filter: saturate(.6);
}





/**	IMAGES ************************************************/

.column .image {
	display: inline-block;
	width: 100%; height: 0;
/*	height: 19.733em; */
	background-size: cover;
	background-position: 50% 50%;
	filter:	saturate(.75);
	padding-bottom: 70.469%;
/*	padding-bottom: 56.25%; */	
	margin: .8em 0; 
}
.column .image,
.column a.image::before {
	border-radius: .2em;
}/*
.column a.image::before {
	content: '';
	position: absolute;
	height: 100%; width: 100%;
	background-color: rgba(80,80,80,.4);
	transition: .2s ease-in-out;
}
.column a.image:hover::before {
	background-color: rgba(80,80,80,.05);	
}
.column a.image {
	box-shadow: inset 0 .5em .7em -.1em rgba(0,0,0,.6);
}*/
a.image:hover {
	opacity: .85;
}
.column .image.inv {
	padding-bottom: 150%; 
}

/**	IMAGE BGs *********************************************/

.column .image#bounty	{ background-image: url(/img/folio/bounty.jpg) }
.column .image#ec 	{ background-image: url(/img/folio/ec.jpg) }
.column .image#fero 	{ background-image: url(/img/folio/fero.jpg) }
.column .image#ff3d 	{ background-image: url(/img/folio/ff3d.jpg) }
.column .image#foc 	{ background-image: url(/img/folio/foc.jpg); background-position: 50% 40% }
.column .image#gd 	{ background-image: url(/img/folio/gd.jpg) }
.column .image#ill 	{ background-image: url(/img/folio/ill.jpg) }
.column .image#amaro 	{ background-image: url(/img/folio/amaro.jpg) }
.column .image#osjm 	{ background-image: url(/img/folio/osjm.jpg) }
.column .image#eti1 	{ background-image: url(/img/folio/eti1.jpg) }
.column .image#eti2 	{ background-image: url(/img/folio/eti2.jpg) }
.column .image#tdi 	{ background-image: url(/img/folio/tdi.jpg) }
.column .image#teeth 	{ background-image: url(/img/folio/teeth.jpg) }
.column .image#trtf 	{ background-image: url(/img/folio/trtf.jpg) }
.column .image#zaho 	{ background-image: url(/img/folio/zaho.jpg) }
.column .image#logo_sb 	{ background-image: url(/img/folio/logo_sb.jpg) }
.column .image#logo_umw 	{ background-image: url(/img/folio/logo_umw.jpg) }
.column .image#logo_mevo 	{ background-image: url(/img/folio/logo_mevo.jpg) }
.column .image#logo_fero	{ background-image: url(/img/folio/logo_fero.jpg) }





/**	TEXT ********************************************************/

.column {
	max-width: 28em; /* 448px */
	padding: 0 1em;
	margin: 0 auto;
}

/* ADJUSTMENTS */

/*.column #welcome {
    display: block;
	font-family: "Covered By Your Grace", cursive;
    font-size: 4.5em;
    font-weight: normal;
    text-transform: none;
    margin: .5em 0 .55em -.75em;
    transform: rotate(-5deg);
}*/
.column .shift {	/* SHIFT GROUP LEFT */
	margin-left: -5.25em;
}
.column h3 {
	margin: 1.25em 0 .5em;
}
.column h3 span.num {
	position: absolute;
	font-family: "Bebas Neue";
	font-size: 4.2em;
	letter-spacing: -0.03em;
	text-align: right;
	width: 2em;
	overflow: visible;
	left: -2.15em;
}
.column h3 span.pre {
	position: absolute;
	font-size: .5em;
	text-transform: uppercase;
    font-weight: normal;
	letter-spacing: .05em;
}
.column h3 span.pre {
	top: -1.85em;
}
.column blockquote {
	float: right;
	max-width: 9em;
	margin: -.025em -5.5em .35em 1.2em;
}
.column blockquote::before {
	position: absolute;
	font-size: 3.1em;
	font-weight: normal;
	margin-top: .205em;
	content: "\201C";
	margin-left: -.32em;
} 
.column blockquote h6 {
	text-align: right;
	font-size: .6em;
	font-weight: normal;
	text-transform: none;
	margin-top: .35em;
}
.column blockquote h6::before {
	content: "\2013\00A0";
}
.column blockquote h6::after {
	content: "\00A0";
}
.column span.note {
	position: absolute;
	display: inline-block;
	font-family: "Covered By Your Grace";
	font-size: 1.15em;
	line-height: 1.05em;
	text-align: center;
	width: 6em;
	left: -6.6em;
	transform: rotate(-11deg); 
}
.column span.note::after {
	display: block;
	height: .9em;
	margin-top: .35em;
	background: url(/img/note_arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 85% center;
	content: "";
}
.column span.note.inv {
	left: auto;
	right: -6em;
	transform: rotate(2deg); 
}
.column span.note.inv::after {
    transform: scaleX(-1) rotate(5deg); 
}


/* MISC ELEMENTS */

div.spacer {
    border: none !important;
    height: 3.5em;
}
div.spacer.sm {
    height: 1.5em;
}
div.divider {
    position: relative;
    display: block;
    border-radius: .15em;
    height: .7em;
    margin: 2em 0;
    background-color: #383838;
}
div.divider.sm {
    height: .35em;
}
.image + .divider {
    margin: 1em 0 0;
}
.easig {
	height: 4em;
	background: url(/img/sig.png) right center no-repeat;
	background-size: contain;
	margin-top: 1em;
}
#pen {
    position: absolute;
    display: block;
    width: 4em;
    height: 40em;
    top: -5.5em;
    right: -14em;
    background: url(/img/pen.png) no-repeat center center;
    background-size: contain;
    z-index: 1000;
}
.icon-pdf {
	position: absolute;
	width: 4.5em; height: 6em;
	left: -5.5em;
	background: url(/img/icon_pdf.png) no-repeat right bottom;
	background-size: contain; 
}
.smile {
	position: absolute;
    margin-left: .3em;
	transform: rotate(60deg);
}
.smile::after {
	content: "=)";
}





/**	WIDE ************************************************/

.column .wide {
	display: block;
	width: calc(100% + 20em);
    left: -10em; /* half of width excess */
}
.column .wide .cell {
	margin: 0;
}
.column .image.wide {
/*	height: 33.829em; */
	padding-bottom: 124%;
	background-size: cover;
	background-position: 50% 50%;
	margin: 1.8em 0;
}

/**	SEMIWIDE ************************************************/

.semiwide {
	width: calc(100% + 10em); /*
	background-color: #c4c4c4;
	padding: 1em; */
	border-radius: .7em;
}
.semiwide#pdf {
	padding-right: 16em;
}

/**	GRID ************************************************/

.grid {
	width: calc(100% - .9em);
	display: grid;
	grid-template-columns: 50% 50%; /*
	grid-template-rows: 50% 50%; */
	grid-column-gap: .9em;
	grid-row-gap: .9em;
}
body#home .grid {
	width: calc(100% - 1.75em);
	grid-column-gap: 1.75em;
}
.wide > .grid {
	margin: 2em 0;
}
.grid h3 { 
	font-weight: normal; 
	padding-right: 1.1em;
}
.grid .image { 
/*	height: 9.602em; */
	margin: 0;
}
.grid + .divider {
	margin: 1em 0;
}

/**	CELL ************************************************/

.cell h5 { margin: 0 }
.cell h3 { margin-top: .15em }
.cell .button { margin-top: .15em; margin-bottom: .15em; }
.cell .image { 
	width: 100%; 
	margin: 0 0 .8em !important;
	background-size: cover;
}

/* LIGHTER COLOUR */

.column h3::before, 
.column h3 span.num,
.column blockquote::before,
.column blockquote::after {
	color: #c4c4c4;
}





/** OPTIONS ******************************************************************/

a.option {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	line-height: 1.05em;
	width: 8em;
	padding: .8em .4em;
	border-radius: .75em;
}
a.option:hover,
a.option:focus { 
	background-color: #c4c4c4;
}
a.option .icon {
	display: flex;
	width: 5em; 
	height: 5em;
	margin-bottom: 1.1em;
	filter: saturate(0);
}
a.option h1 {
	font-size: 2em;
	line-height: .82em;
	margin: 0 0 .08em;
}
a.option p {
	font-size: .65em; 
	letter-spacing: .05em;
	line-height: 1.1em;
	text-transform: uppercase;
	padding: 0 .2em;
	margin: 0;
}

.icon.index		{ background-image: url(/img/holes/icon_ea.jpg) }
.icon.portfolio	{ background-image: url(/img/holes/icon_portfolio.jpg) }
.icon.faq		{ background-image: url(/img/holes/icon_faq.jpg) }
.icon.metal		{ background-image: url(/img/holes/icon_metal.jpg) }

.icon.covers	{ background-image: url(/img/holes/page_covers.jpg); } 
.icon.branding	{ background-image: url(/img/holes/page_branding.jpg); } 
.icon.pdf		{ background-image: url(/img/holes/icon_pdf.jpg) }
.icon.contact	{ background-image: url(/img/holes/icon_contact.jpg) }
.icon.ea		{ background-image: url(/img/holes/icon_ea.jpg) }





/** SHADING *******************************/

.dark div.shade,
div.shade.dark {
	opacity: 1;
}
div.shade {
	position: absolute;
	display: block;
	z-index: 900;
	width: 100%;
	height: 1.3em; 
	background-image: linear-gradient(black,rgb(0,0,0,.4),transparent);
    mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	-webkit-mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	opacity: .5;
}
div.shade.inv {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
	margin-top: -1.3em;
}
body > .shade	{ position: fixed; }





/** REFERAL *****************/

.referral {
	padding: 1em 0 .9em 2em;
	margin: 0 auto;
}
.referral td {
	display: table-cell;
	line-height: 1.2em;
	vertical-align: middle;
}
.referral blockquote {
	font-size: .9em;
	padding-left: 2.5em;
	padding-right: 1.5em;
}
.referral blockquote::before {
	font-family: "Oswald";
	content: "\201C";
	position: absolute;
	font-size: 7em;
	margin: .19em 0 0 -.45em;
	color: rgba(0,0,0,.15);
}
.referral .credit {
	font-size: .64em;
	line-height: 1.2em;
	text-align: right;
	margin-top: 1em;
}
.referral .credit b {
	font-size: 1.4em;
}
.referral span.hole {
	display: inline-block;
	float: right;
	width: 9.6em;
	height: 9.6em;
	margin: 0 1.7em;
	background-position: cover;
}





/** FOOTER ******************************************************************/

#footer {
	position: relative;
	text-align: center;
	padding: 1.2em 0 2em;
	background-color: #383838;
}
#footer::before {
	content: '';
	position: absolute;
	display: block;
	z-index: 900;
	width: 100%;
	height: 1.3em;
	top: 0;
	background-image: linear-gradient(black,rgb(0,0,0,.4),transparent);
    mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	-webkit-mask-image: linear-gradient(to right,black,rgb(0,0,0,.5),black);
	opacity: .5;
}
#footer a {
	text-decoration: none;
}
#footer a.lang {
	position: relative;
	margin: .8em 0 1.4em;
}
.small {
	font-size: .65em;
	letter-spacing: .17em;
	line-height: 1.5em;
}





/** DARK ******************************************************************/

.dark {
	background: #383838;
}
.dark,
.dark a {
	color: #727272;
}
.dark a:hover {
	color: #808080;
	background: rgb(255,255,255,.08);
}
.dark a.option:hover {
	background-color: #474747;
}

.dark a.lang {
	color: #808080;
	background-color: #474747;
	
}
.dark a.lang:hover {
	color: #b3b3b3;
	background-color: #595959;
} 





/** CUSTOMIZE LIGHTBOX *******************************/

.fancybox-toolbar { 
	border-radius: 0 0 0 .4em 
}
.fancybox-button--close {
	background-color: #666;
	border-radius: 2em;
	margin: .5em .5em 0 0 
}
.fancybox-inner { 
	border-radius: 1em 
}
.fancybox-caption__body {
	overflow: hidden;
}




















@media screen and (max-width: 885px) { #pen { display: none } }
@media screen and (max-width: 785px) { #splash::after { left: .75em; } }
@media screen and (min-width: 640px) and (max-width: 785px) { 
	.column .wide { 
		width: calc(100% + 12em); 
		left: -6em; /* half of width excess */
	}
	.column .image.wide { 
		padding-bottom: 28.19em;
	}
	.column blockquote {
		width: 7em;
		margin-right: -3.33em; 
	}
}
@media screen and (max-width: 720px) { 
	.column span.note { display: none } 
	.column #welcome { margin-left: -.15em }
}
@media screen and (max-width: 650px) { /*
@media screen and (max-aspect-ratio: 3/4) and (max-width: 640px) { */
	body#home #splash { height: 100% }
	body#home .splash::before { 
		display: none;
	}
	body#home .logo { 
		width: 100%;
		text-align: center;
		max-width: none;
		padding: 0 1.5em 2em 2em;
		margin: 0 auto;
	}
	body#home .logo div#row3 a { 
		font-size: .65em;
	}
	body#home .duo {
	float: left;
	width: 90%;
	height: 60%;
	background-position: center bottom;
}
	.column .shift {
		margin-left: 0;
	}
    .hide { display: block; }
	a.lang { position: relative; }
	h1 { font-size: 5em; }
	h2 { font-size: 1.75em;	}
	h6 { font-size: .6em; margin-top: -.4em; }
	body#home .grid {
		width: calc(100% - 1em);
		grid-template-columns: 50% 50%;
		grid-column-gap: 1em;
	}
	body#home .cell h5 {
		font-size: 3em;
	}
	.column h3 span.num {
		position: relative;
		display: inline-block;
		font-size: 1.9em;
		width: auto;
		overflow: visible;
		left: -.03em;
		top: -.12em;
		float: left;
		margin-right: .15em;
	}
	.column h3 span.pre {
		top: -1.6em;
 	}
	.column blockquote {
		position: relative;
		display: block;
		max-width: 100%;
		float: none;
		font-size: 1.7em;
		margin: 0 3em .35em .9em;
	}
	blockquote h6 { 
		text-align: left;
		margin: auto; 
		}
	.column .wide {
		width: 100%;
		left: auto;
    }
	.column .image.wide {
		width: 100%;
		height: 0;
		padding-bottom: 70.469%;
		left: auto;
    }
	.column .semiwide {
		width: 100%;
	}
	.icon-pdf { 
		position: relative;
		width: 6em; height: 6em;
		left: auto; float: right;
		background-position: right top;
		margin-left: .5em;
		margin-bottom: .5em;
	}
	#footer {
		font-size: .75em;
	}
}
@media screen and (max-aspect-ratio: 3/4) and (max-width: 320px) {
	h2, h3, blockquote		{ letter-spacing: -0.02em; }
	body#home .cell h5		{ font-size: 2em; }
	body#home .cell h3 		{ font-size: 1.1em; }
	body#home .cell .button	{ font-size: .9em; }
}

@media screen and (min-width: 1000px) { body { font-size: 1.15em } }
@media screen and (min-width: 1200px) { body { font-size: 1.3em } }
@media screen and (min-width: 1400px) { body { font-size: 1.45em } }
@media screen and (min-width: 1600px) { body { font-size: 1.6em } }
@media screen and (min-width: 1800px) { body { font-size: 1.75em } } /*
@media screen and (min-width: 1920px) { body { font-size: 1.82em } } */