html { height:100%; -webkit-tap-highlight-color:transparent; min-width:320px }
body {
height:100%; margin:0; padding:0; border:0; color:#000;
background-color:#fff; font:16px Gotham, Arial, "Sans-Serif";
-webkit-text-size-adjust:none;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color:#c7af61; text-decoration:underline }
a, embed, object, input, label { outline:0 }
a img { border:0; text-decoration:none }
p { margin:0; padding:0 }
form { padding:0; margin:0 }
table { border:0; border-collapse:collapse }
table td { padding:0 }
iframe { margin:0; padding:0; border:none }
img { display:inline-block; -ms-interpolation-mode:bicubic }
p, div, li { background: url('') } /* Correction d'un bug Android sur la largeur des DIV, P et LI */
.table { display:table }
.tr { display:table-row }
.td { display:table-cell }
.clear { clear:both }
.fullFX { transition:all 600ms; -webkit-transition:all 600ms }
.menuFX { transition:font-size 600ms, margin 600ms, opacity 600ms; -webkit-transition:font-size 600ms, margin 600ms, opacity 600ms }
.cols { display:table; width:100% }
.row { display:table-row }
.col { display:table-cell; text-align:left; vertical-align:middle }
@font-face {
font-family: 'Gotham';
src: url('../fonts/gotham-medium.eot');
src: url('../fonts/gotham-medium.woff') format('woff'),
url('../fonts/gotham-medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham-bold';
src: url('../fonts/gotham-bold.eot');
src: url('../fonts/gotham-bold.woff') format('woff'),
url('../fonts/gotham-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham-light';
src: url('../fonts/gotham-light.eot');
src: url('../fonts/gotham-light.woff') format('woff'),
url('../fonts/gotham-light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'felt_that';
src: url('../fonts/felt_that.eot');
src: url('../fonts/felt_that.woff') format('woff'),
url('../fonts/felt_that.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.page { position:relative; margin:0 auto; padding:0 2%; width:96%; max-width:1500px; min-height:100%;
background-color:#fff; border-top:1px solid #fff }
.logo { display:block; margin:29px 0 37px 0; width:200px; height:auto }
.logo img { width:100%; height:auto }
.flag { position:absolute; top:20px; right:20px }
.flag img { width:50px; height:auto }
.topmenu { float:left; width:230px }
.topmenu a { display:inline-block; padding:48px 0 5px 0; color:#000; text-decoration:none;
text-transform:uppercase; font-weight:normal; border-bottom:1px solid #fff;
letter-spacing:3px }
.topmenu a.first { }
.topmenu a.last { }
.topmenu a.active { border-bottom:1px solid #c7af61 }
.menu-2 { display:none; position:absolute; top:20px; right:10px; width:35px; height:auto; border:0 }
.content { position:relative; float:left; padding:48px 0 0 7%; width:calc(93% - 232px);
font-family:Gotham-light, Arial, Sans-Serif }
.content.mentions { max-width:800px }
#goTop { position:fixed; top:50%; right:0; margin-top:-37px; width:50px; height:50px; padding-top:21px;
text-align:center; color:#fff; font-size:35px; line-height:100%; font-weight:bold;
-moz-user-select:none;
background-color:rgba(0, 0, 0, 0.4); border-radius:10px 0 0 10px; cursor:pointer; z-index:100;
opacity:0; visibility:hidden;
transition:background-color 600ms, opacity 600ms;
-webkit-transition:background-color 600ms, opacity 600ms;
}
#goTop:hover { background-color:rgba(0, 0, 0, 0.7) }
#goTop.visible { visibility:visible; opacity:1 }
/* footer */
#footer { padding:70px 0 20px 0; clear:both; color:#555 }
#footer a { text-transform:uppercase }
/* Animations */
.anim { opacity:0 }
#anim { opacity:1 }
/* Wysiwyg editor */
.content h1 { margin:0 0 0 0; padding:0 0 20px 0; font:55px felt_that, Gotham-bold, Arial, Sans-Serif; font-weight:normal; line-height:50px }
.content h2 { margin:0 0 0 0; padding:50px 0 10px 0; font-weight:normal; text-transform:uppercase;
font-size:120% }
.content p { margin:10px 0 0 0; padding:0 }
.content ul { list-style:none; padding:0 0 10px 0; margin:5px 0 0 5px }
.content ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color:#c7af61; /* Change the color */
font-weight: bold; /* If you want it to be bold */
display: inline-block; /* Needed to add space between the bullet and the text */
width: 1em; /* Also needed for space (tweak if needed) */
}
.jaune { font-family:Gotham-bold, Arial, Sans-Serif; color:#c7af61 }
@media screen and (max-width:1280px) {
body { font-size:90% }
}
@media screen and (max-width:1000px) {
body { font-size:80% }
.topmenu { width:200px }
.topmenu a { padding:28px 0 5px 0; letter-spacing:1px }
.content { padding:28px 0 0 0; width:calc(100% - 202px) }
}
/* switch to the hamburger menu */
@media screen and (max-width:835px) {
#footer { font-size:80% }
.logo { margin:10px 0; width:180px }
.flag { top:18px; right:60px }
.flag img { width:30px }
.menu-2 { display:block }
.topmenu { float:none; position:absolute; z-index:10; top:70px; right:2%; background-color:#c7af61; width:auto }
.topmenu br { display:none }
.topmenu a { position:relative; display:block; padding:8px 30px 7px 40px; color:#fff }
.topmenu span { display:none } /* hide pageSep */
.topmenu a.first { }
.topmenu a.last { }
.topmenu a.active { color:#000; background-color:#d9c993; border-bottom:1px solid #fff }
.topmenu a.active::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
color:#000; /* Change the color */
font-weight: bold; /* If you want it to be bold */
position:absolute; /* Needed to add space between the bullet and the text */
left:15px;
top:4px;
font-size:150%;
}
.content { display:block; padding-left:0; width:100% }
/* menu open/close FX */
.topmenu { overflow:hidden }
.topmenu-content { margin-top:-150%; opacity:0 }
.topmenu.ouvert .topmenu-content { margin-top:0; opacity:1 }
}