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

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	text-align: left;
	font-family: "Palanquin", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-size: 1em;
	letter-spacing: -0.05em;
	line-height: 1.35em;
	color: rgba(0,0,0,.65);
	background-color: #FFF;
	background-image: radial-gradient(transparent 50%, rgba(0,0,0,.25));
	background-attachment: fixed;
	background-size: cover;
	overflow-x: hidden;
}
* {
	box-sizing: border-box;
	position: relative;
/*	margin: 0; */
	padding: 0;
}
p {
	margin: 0.7em 0;
}
b {
	letter-spacing: -0.02em;
}
a {
	color: rgba(0,0,0,.6);
	text-decoration: none;
}
ul {
	padding-left: 1.4em;
}
li {
	margin-left: -.5em;
}

.center {
	text-align: center;
}
.spacer {
	height: 2em;
}
.spacer.sm {
	height: 1em;
}
.spacer.xsm {
	height: .25em;
}
.spacer.l {
	height: 3em;
}





/**	MINIMUM SITE WIDTH *********************************/

#top, #navbar, .main /*, .folio, .referral */ {
	min-width: 240px; 
}
.main, #footer .txt {
	max-width: 40em; /* 640px */
}
.referral {
	max-width: 45em; /* 720px */
}





/**	H1-H6 *********************************/

h1, h2, h3, h4, h5, h6 { 
	margin: 0;
}
h1 {
	font-family: "Pathway Gothic One";
	text-transform: uppercase;
	font-size: 5em;
	font-weight: normal;
	letter-spacing: -0.05em;
	line-height: 0.77em;
	margin-bottom: .15em;
	margin-left: -.05em; /* font align correction */
}
h2, .box blockquote {
	font-family: "Oswald";
	font-size: 1.9em;
	font-weight: normal;
	letter-spacing: -0.05em;
	line-height: 1.05em;
}
h3 {
	margin-bottom: .5em;
}
h4 {
	margin-bottom: 0;
}





/**	ANIMATIONS *********************************/

a { 
	-webkit-transition: all .2s ;
	-o-transition: all .2s ;
	-moz-transition: all .2s ;
	transition: all .2s;
}





/** HOLE OBJECTS *********************************/

.hole {
	display: inline-block;
	border-radius: 100%;
	box-shadow: inset -2px 3px 6px 3px rgba(0,0,0,.5), -2px 2px 4px 1px rgba(255,255,255,.8), 1px -2px 5px 1px rgba(0,0,0,.4);
	background-color: #4d4d4d, #333;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.hole.sm {
	box-shadow: inset -1px 2px 3px 1px rgba(0,0,0,.4), -1px 1px 2px 1px rgba(255,255,255,.25), 1px -1px 2px 1px rgba(0,0,0,.4);
}

.hole#lang-en				{ background-image: url(/img/holes/lang_en.jpg) }
.hole#lang-fr				{ background-image: url(/img/holes/lang_fr.jpg) }
.hole#trans					{ background-image: url(/img/holes/trans.png) }
.hole#ware					{ background-image: url(/img/holes/ware.png) }
.hole#phone					{ background-image: url(/img/holes/phone.png) }

a.hole:hover,
a.hole:hover {
	filter: brightness(115%);
}





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

div.shade {
	position: absolute;
	display: block;
	z-index: 1000;
	width: 100%;
	height: 2em;
	background: url(/img/shade/shade.png);
	background-size: cover;
	opacity: 1;
}
div.shade.inv {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
	margin-top: -2em;
}
div.shade.viewport {
	position: fixed;
}
div.shade.viewport.inv {
	bottom: 0;
}





/** TOP (DARK AREA)  ******************************************************************/

#top {
	overflow: hidden;
	height: 32em;
	vertical-align: bottom;
	background: url(/img/top.jpg) 73% 90% no-repeat;
	background-size: cover;
}
#top .box {
	position: absolute;
	z-index: 100; 
	width: 18.5em;
	left: 1.5em; bottom: 1.5em;
	color: rgba(255,255,255,.6);
}
#top .box h1 {
	font-size: 5.3em;
	text-transform: none;
	letter-spacing: -0.045em;
	margin-bottom: .04em;
}
#top .box h2 {
	letter-spacing: -0.015em;
}
#top .box h3 {
	letter-spacing: .01em;
}
#top .box a {
	color: rgba(255,255,255,.6);	
}
#top .box a:hover {
	color: rgba(255,255,255,1);	
}

a#lang-en,
a#lang-fr {
	position: absolute;
	left: 1.6em; top: 1.4em;
	width: 5em;
	height: 5em;
	transition: all .3s;
	z-index: 900;
}
a#lang-en::before,
a#lang-fr::before {
	position: absolute;
	content: "français";
	font-size: .6em;
	color: rgba(0,0,0,.5);
	text-transform: uppercase;
	letter-spacing: .3em;
	text-align: center;
	margin: 8.4em 0 0 .9em;
	font-weight: bold;
}
a#lang-en::before {
	content: "english";
	margin-left: 1.3em;
}





/** JUMPMENU ******************************************************************/

#jumpmenu {
	display: flex;
	text-align: center;
	margin-top: -2em;
	margin-left: -.2em;
	z-index: 1010;
}
#jumpmenu a {
	flex: 1 1 auto;
	font-family: "Oswald";
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 1em;
	padding: .4em 1em;
	margin-right: .6em;
	background: linear-gradient(#fff,#ccc);
	box-shadow: 0 .2em .25em .06em rgba(0,0,0,.4);
}
#jumpmenu a:hover {
	color: rgba(0,0,0,.7);
	text-decoration: none;
	background: linear-gradient(#fff4cf, #CDB05C);
	box-shadow: 0 .05em .1em .05em rgba(0,0,0,.3);
}





/** MAIN (LIGHT AREA) ******************************************************************/

.main {
	margin: 0 auto;
	padding: 1.6em 1em 1.8em; 
}
.box {
	width: 18em;
	margin: 0 auto 0; 
}
.multi {
	display: flex; 
	justify-content: space-between; 
	flex-wrap: wrap;
}
.multi .box {
	margin: 0;
}


.wide {
	width: 100%;
}
.hole#trans,
.hole#ware,
.hole#phone {
	height: 6em;
	width: 6em;
}
.main p a {
	font-weight: bolder;
	color: #bf9b69;
	transition: all .2s;
}
.main a:hover,
.main a:focus {
	color: peru;
	text-decoration: underline; 
}
.main .box blockquote {
	float: right;
	max-width: 8em;
	margin: .1em -4em .35em 1.7em;
}
.main .box blockquote::before {
	content: "\201C";
	position: absolute;
	font-size: 3.5em;
	margin: .25em 0 0 -.42em;
	color: rgba(0,0,0,.15);
}
.main p.sm { 		/* Smaller Print */
	font-size:75%;
	line-height: 1.5em;
} /*
.main .drop {
	position: absolute;
	z-index: 0;
	height: 2.2em;
	background-image: url('/img/shade/drop.png');
	background-size: 100% 100%;
	margin-top: -.85em;
	left: 4%; right: 4%;
	opacity: 1;
} */
span.mirror {
	unicode-bidi:bidi-override;
	direction: rtl;
}

.caption {
	border-radius: 3em;
	padding: .8em;
	background: linear-gradient(#CDB05C, #a18d52);
	box-shadow: inset -.2em .2em .5em .1em rgba(0,0,0,.4);
}
.caption .box {
	width: 17em;
	margin: 0 auto .8em;
}

.caption table {
	width: 100%;
	border-spacing: .15em;
}
.caption table th,
.caption table td {
	border-radius: .3em;
	padding: .08em;
}
.caption table th {
	font-weight: normal;
	text-align: center;
	line-height: 1em;
	padding: .4em;
}
.caption table th b {
	font-size: 1.4em;
}
.caption table tr:first-child {
	background: rgba(255,255,255,.4);
}
.caption table td {
	background: rgba(255,255,255,.6);
	font-size: .9em;
}
.caption table td.col1 {
	font-weight: bold;
	padding: .6em;
}
.caption table td.col2 {
	text-align: center;
	line-height: 1em;
}
.caption table td.col2 b {
	font-size: .85em;
}
.caption table td.nobg {
	color: rgba(0,0,0,.3);
	background: rgba(255,255,255,.2);
}





/** GALLERY ******************************************************************/

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2em auto 1.5em;
}
.gallery a {
	flex: 0 0 auto;
	width: 11em;
	height: 11em;
	margin: 0 .6em 1em;
	background: url(/img/fero/01.jpg) no-repeat center center; 
	background-size: cover;
}
.gallery a:hover {
	border: 1em solid #a18d52;
}

.gallery a.hole#a0 { background-image: url(/img/fero/00.jpg) }
.gallery a.hole#a1 { background-image: url(/img/fero/01.jpg) }
.gallery a.hole#a2 { background-image: url(/img/fero/02.jpg) }
.gallery a.hole#a3 { background-image: url(/img/fero/03.jpg) }
.gallery a.hole#a4 { background-image: url(/img/fero/04.jpg) }
.gallery a.hole#a5 { background-image: url(/img/fero/05.jpg) }





/** CONTACTS (STAFF) ******************************************************************/

.multi#staff {
	justify-content: center;
	max-width: 30em; 
	margin: 1em auto 2em;
}
.staff {
	display: inline-block;
	text-align: center;
	white-space: nowrap;
	max-width: 12em;
	margin: .8em;
}
.staff h3 {
	margin-bottom: .1em;
}
#logo {
	width: 13em;
	height: 13em;
	background-image: url(/img/logo.png);
	background-size: cover;
	margin-bottom: 1.4em;
	filter: drop-shadow(0 .2em .2em rgba(0,0,0,.5)); 
}





/** LANGUAGE ******************************************************************/

div.language {
	position: relative;
	display: block;
	width: 13em;
	text-align: center;
	border-radius: 10em;
	padding: .7em 1em .3em;
	margin: 0 auto 3em;
	background: linear-gradient(#CDB05C, #a18d52);
	box-shadow: inset -.2em .2em .5em .1em rgba(0,0,0,.4);
}
div.language a:hover {
	color: #fff;
}





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

#footer {
	background: linear-gradient(#CDB05C, #a18d52);
	text-align: center;
}#footer .main {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#footer .box {
	line-height: 1.2em;	
	margin: 0 2em;
}
#footer .box h2 {
	line-height: .9em;
	margin-bottom: .2em;
}
#footer #copy {
	font-size: .7em;
	letter-spacing: .17em;
	margin-top: .5em;
} 
#footer .main a:hover,
#footer .main a:focus {
	color: #fff;
	text-decoration: none; 
}





/** 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;
}





/** RESIZE *********************************************************************/

@media screen and (max-width: 639px) {	 					/* 40em = 640px */
	a#lang-en,
	a#lang-fr 							{ width: 4.5em; height: 4.5em; left: 1rem; top: 1.3rem; }
	
	a#lang-en::before,
	a#lang-fr::before					{ letter-spacing: .12em;
										  margin-top: 7.5em; } 
	#jumpmenu							{ margin-top: -1.85em; } 
	#jumpmenu a							{ font-size: .7em; }
	.hole#ware 							{ margin-top: 1.2em; }

	#top								{ height: 100% }
	#top h3								{ font-size: 1.5em }
	.main h1							{ font-size: 3.65em } 
	.multi								{ align-items: center; }
	.main .box							{ max-width: 24.5em; margin-left: auto; margin-right: auto; }
	.multi .box							{ width: 100% }
	.gallery							{ padding-left: .3em; padding-right: .3em; } /*
	.gallery a 							{ width: 8em; height: 8em; } */
}
@media screen and (min-width: 1px) {
	#top 	{ font-size: 28% } 
}
@media screen and (min-width: 240px) {
	#top 	{ font-size: 40% }
}
@media screen and (min-width: 320px) {
	#top 	{ font-size: 52% }
}
@media screen and (min-width: 400px) {
	#top 	{ font-size: 64% } 
}
@media screen and (min-width: 480px) {
	#top 	{ font-size: 76% } 
}
@media screen and (min-width: 560px) {
	#top 	{ font-size: 88% } 
}
@media screen and (min-width: 640px) {
	#top 	{ font-size: 100% } 
}
@media screen and (min-width: 800px)		{ body { font-size: 110% } }		/* 50em = 800px */
@media screen and (min-width: 960px)		{ body { font-size: 120% } }		/* 60em = 960px */
@media screen and (min-width: 1120px)		{ body { font-size: 130% } }		/* 70em = 1120px */
@media screen and (min-width: 1280px)		{ body { font-size: 140% } }		/* 80em = 1280px */