@font-face {
    font-family: 'miso';
    src: url('../fonts/miso-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


* {padding:0; margin:0;}


a:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; font-weight:normal;}
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { }
a img,:link img,:visited img { border:none }
a:active { color:#5c3816; }
address { font-style:normal }


html {
	background-color: #f3f2f1;
}

body  {
	position:fixed;
	width:100%;
	bottom:0;
	top:0;
	text-align:left;
	font-family: "Barlow", sans-serif;
	font-style:normal;
	font-size:14px;
	font-weight:normal;
	color:#606060;
	cursor:default;
}


h1 { font-size:34px; font-family: "miso", sans-serif; font-weight: bold; color:#727272; }
h2 { font-family: "Barlow", sans-serif;	font-weight:600; line-height: 1.8em;}
h3 {font-size:1em; line-height: 1.8em;}
li { text-align:left; list-style:none; }
li li { font-size:1em; }
h4 { font-size:1em; text-align:left; letter-spacing:1px; list-style:none; }
p, p span	{ 	font-family: "Barlow Semi Condensed", sans-serif;	font-style:normal; font-size:1.1em; text-align:left; }
a, a:link, a:visited { color:inherit; text-decoration:none; outline:none; cursor:pointer; line-height:inherit; }
a:active { color:#7d5c00; }
li a:hover { color:#c28b02; }
li li:hover a { color:#ffffff; background-color: #d9003b; }

#header {
	display: block;
	position:fixed;
	top:0;
	right:0;
	left:0;
  padding: 0.6em 1.6em 2.2em 1.6em;
}

#header h1 {
  display: inline;
  position: relative;
  top: 68px;
  left:-1px;
}

#header svg {
  float: left;
  height: 115px;
  width: auto;
  background-color: #f3f2f1;
}

#header svg, #header svg * {
	transition: all 1200ms 600ms;
}

#header:hover svg, #header:hover svg * {
	transition: all 800ms 300ms;
}

#header:hover svg {
  background-color: #ebb52f;
}
/*
#header:hover svg #shadow {
  opacity: 0;
} */

.dimmed {
  filter: alpha(opacity=0);
	opacity: 0;
	transition: opacity 300ms;
}


.mainWrap {
	position:fixed;
	top:7em;
	bottom:2em;
	right:0;
	left:0;
}
.main {
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	max-height:480px;	/* 470 */
	margin:auto;
	padding:0 2em;
	text-align:left;
  z-index: 20;
}
ul.mainMenu {
	position:absolute;
	top:0;
	left:0;
	overflow:visible;
	width:30em;
	height:100%;
	margin-top:-2.4em;
}
ul.mainMenu li {
  display:block;
	height:2.05em;
	padding-left:24px;
}
ul.mainMenu h2, ul.mainMenu h3 {
	padding-left:16px;
}
ul.mainMenu > li > a {
	padding-left:6px;
}
ul.subMenu li {
  display:block;
 	width:auto;
	height:0;
	padding:0;
	color:#444;cursor: pointer;
	background-position:right center;
	opacity:0;
	transition:400ms 1600ms, opacity 400ms 1200ms;
}
ul.subMenu li.nouveau:hover {
	background: url("nouveau.png") no-repeat right center;
}
ul.subMenu li a {
	padding: 0 12px 0 16px;
}
ul.subMenu li.nouveau a {
	background: url("asterisk.png") no-repeat left center;
}
ul.mainMenu > li, ul.mainMenu li:hover ul li, ul.subMenu li.current {
  height:2.05em;
	line-height:2.05em;
	opacity:.99;
	transition:400ms, opacity 400ms 400ms;
}
ul.mainMenu > li:last-child {
	position:absolute;
	top:100%;
	padding-top:2em;
}
/* ul.mainMenu li.current a {
	color:black;
} */


section {
	display:block;
	height:0;
	margin:auto 0 auto 30em;
	max-height:450px;
	background:#f3f2f1;
	overflow:hidden;
}
section.current {
	height:100%;

}
section img {
	height:inherit;
	margin-right:.85em;
}
.textArea {
	display:block;
	margin:0 3em 0 1em;
	overflow-y:auto;
}
.textArea p {
	margin-bottom:1em;
}

#gallery {
	max-height:470px;
	white-space: nowrap;
	overflow-x:auto;
	overflow-y:visible;
}

#intro {
	display:block;
	float:left;
	max-height:450px;
	margin-right:15%;
}
#intro div {
	display:block;
	height:inherit;
/* 	overflow:hidden; */
/* 	padding:0 -1.4em 0 -50%; */
}
#gallery ul li {
	display:none;
	visibility:hidden;
	margin-right:0;
	opacity:0;
}
#gallery.current ul li.current {
	display:inline-block;
	visibility:visible;
	min-width:4em;
	opacity:.99;
	transition:margin 500ms, opacity 400ms 500ms;
}
#gallery ul li.current:last-child {
	margin-right:0;
}
#intro img {
	visibility:hidden;
	margin-right:.85em;
}
#desc {
	display:block;
	position:absolute;
	top:100%;
	right:2em;
	left:32em;
	overflow-y:visible;
}
#desc p {
	display:block;
	margin:0;
	/*
	opacity:0;*/
	transition:0 300ms, opacity 300ms;
}
#desc p.current {
	line-height:1.5em;
	opacity:.99;
	transition:0, opacity 2400ms 1800ms;
}
#gallery::-webkit-scrollbar {
	height: 10px;
	opacity:.2;
}
#gallery:hover::-webkit-scrollbar {
	opacity:.99;
}
.scrollable::-webkit-scrollbar-track {
	border:2px solid #aaa;
	background-color: #aaa;
}
.scrollable::-webkit-scrollbar-thumb:horizontal {
	border:2px solid #aaa;
	background-color: #f3f2f1;
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #ccc;
}


.image-slider {
  position:relative;
  display: inline-block;
  line-height: 0;
}

.image-slider > div {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 50%;
  max-width: 100%;
  overflow: hidden;
  resize: horizontal;
  border-right: 2px solid rgba(255,255,255,0.4);
  margin-right: -2px;
}

.image-slider > div:before {
  content: '';
  position: absolute;
  right: -2px; bottom: 0;
  width: 13px; height: 13px;
  padding: 0;
  background: linear-gradient(-45deg, white 50%, transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
}

.image-slider img {
  user-select: none;
  max-height: 450px;
}



ul.social-button-container {
    overflow: auto;
    float: right;
    /* background-color: white;
    border: #777 solid 1px; */
    margin-top: 58px;
    padding: 6px 0;
    display: none;
}

ul.social-button-container li {
    list-style-type: none;
    float: right;
}

ul.social-button-container li a i {
    background: rgba(235,181,47,0);
    color: #999;
    width: 50px;
    height: 38px;
    border-radius: 2px;
    font-size: 32px;
    text-align: center;
    padding-top: 11%;
    margin: 0 6px;
    transition: background 0.8s ease-in-out, color 0.15s ease-in-out;
}

ul.social-button-container li a i:hover {
    background: rgba(235,181,47,1);
    color: #f3f2f1;
}



#info {
	position:fixed;
	bottom:50px;
	right:50px;
	color:red;
}