@charset "UTF-8";
/* UTF-8 before doing anything */

/**
 * ROCSSTI: a CSS base by Nicolas Hoffmann https://rocssti.net/
 * inspired by http://www.knacss.com/
 *
 * ROCSSTI is under CC-BY licence: http://creativecommons.org/licenses/by/3.0/
 *
 * this CSS is provided "as is", without any warranty of any type,
 * author can't be responsible of anything you might do with RÖCSSTI
 *
 * convention (adapt if needed)
 *  .parent
 *  .parent__child
 *  .parent--modifier  
 * 
 *
 * summary
 * 01 -- reset
 * 02 -- webfonts + Hx structure
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 * 04 -- links + icons
 * 05 -- layout & modules
 * 06 -- structure (page / skip links / header / main content / footer)
 * 07 -- forms
 * 08 -- inside content
 * 09 -- minor breakpoints between desktop and tablets
 * 10 -- tablets - major breakpoint
 * 11 -- minor breakpoints between tablets and mobile
 * 12 -- mobile - major breakpoint
 * 13 -- minor breakpoints for very small mobiles
 * 14 -- print
 * 15 -- fix viewport
 * 16 -- state classes
 * 17 -- bonus : Fixes IE
 */




/*
 *****************************************************************
 * 1 -- reset
 *****************************************************************
 */

/* for HTML 5 */
article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; }
audio, canvas, progress, video { display: inline-block; }
abbr, eventsource, mark, meter, time, output, bb { display: inline; }

/* to comment/fallback if you care about IE<8 */
html { box-sizing: border-box; }
*, *:before, *:after {
  box-sizing: inherit;
}

/* reset minimum */
html, body, blockquote, ul, ol, form, button { margin: 0; padding: 0; }
button { border: 0; }
p, ul, ol, dl, blockquote, pre, td, th, label, textarea {
  font-size: 1em; /* equiv 14px */
  line-height: 1.5;
  margin: 1.5em 0;
}

/* fix display img/iframe */
img,
iframe { vertical-align: middle; }

ul, ol { padding-left: 2em; }

.unstyled {
  padding-left: 0;
  list-style-type: none;
}



/* base font size at 10px */
html { 
  font-size: 62.5%;
  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
  /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */
  font-size: calc(1em * 0.625);
}
body {
  background: /*#fff*/#3c3b3f;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 1.4em; /* font-size equiv to 14px */
  line-height: 1.5; /* to update if needed */
  
}




/*
 *****************************************************************
 * 02 -- webfonts + Hx structure 
 *****************************************************************
 */ 

/*@font-face {

}*/

/* calculated by http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil */

h1,
.h1 {
  display: block;
  font-size: 1.85714em; /* equiv 26px */
  line-height: 1.61538;
  margin: 0 0 .80769em 0;
}
h2,
.h2 {
  display: block;
  font-size: 1.71429em; /* equiv 24px */
  line-height: 1.75;
  margin: 0 0 .875em 0;
}
h3,
.h3 {
  display: block;
  font-size: 1.57143em;  /* equiv 22px */
  line-height: 1.90909;
  margin: 0 0 .95455em 0;
}
h4,
.h4 {
  display: block;
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 0 0 1.05em 0;
}
h5,
.h5 {
  display: block;
  font-size: 1.28571em;  /* equiv 18px */
  line-height: 1.16667;
  margin: 0 0 1.16667em 0;
}
h6,
.h6 {
  display: block;
  font-size: 1.14286em;  /* equiv 16px */
  line-height: 1.3125;
  margin: 0 0 1.3125em 0;
}

.uppercase {
  text-transform: uppercase;
}

/*  other useful classes */
.smaller {
  font-size: .71429em; /* equiv 10px */
  line-height: 2.1;
  margin: 2.1em 0;
}
.small {
  font-size: .85714em; /* equiv 12px */
  line-height: 1.75;
  margin: 1.75em 0;
}
.big {
  font-size: 1.14286em; /* equiv 16px */
  line-height: 1.3125;
  margin: 1.3125em 0;
}
.bigger {
  font-size: 1.28571em; /* equiv 18px */
  line-height: 1.16667;
  margin: 1.16667em 0;
}
.biggest {
  font-size: 1.42857em; /* equiv 20px */
  line-height: 1.05;
  margin: 1.05em 0;
}

.strong {
  font-weight: bold;
}

.color-grey {
  color: #666;
}
.color-redalert {
  color: #e24747;
}

.lh110 {
  line-height: 1.1;
}



/*
 *****************************************************************
 * 03 -- useful classes (utils) + typo fix + styles for "fixed tags"
 *****************************************************************
 */

.noborder,
iframe { border: 0; }

table {
  table-layout: fixed;
}

/*
 * taken from http://tinytypo.tetue.net/ made by @tetue
 * tuned with the help of http://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php
 *
 * see http://en.wikipedia.org/wiki/International_variation_in_quotation_marks for reference
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
  font-style: italic;
}
:lang(fr) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
}
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
/*:lang(es) > q {
  quotes: "\00AB" "\00BB" "\201C" "\201D";
}
:lang(it) > q {
  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
}
:lang(de) > q {
  quotes: "\201e" "\201c" "\201a" "\2018";
}*/
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

/* avoid ugly line-height */
sup,
sub {
  vertical-align: 0;
  position: relative;
}
sup {
  bottom: 1ex;
}
sub {
  top: .5ex;
}


/* avoid margin on nested elements */
li p,
li ul {
  margin-bottom: 0;
  margin-top: 0;
}
/* Thou shalt not pass (Moïse or Gandalf, don't remember) */
/*textarea,
table,
td,
th,
code,
pre,
samp,
div,
p,*/
.cut {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
}
/* remove hyphenation if needed */
.nocut {
  word-wrap: normal;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none;
}

code,
pre,
samp {
  white-space: pre-wrap;
}
code {
  line-height: 1;
}
kbd {
  border: solid 1px;
  border-top-left-radius: .5em;
  border-top-right-radius: .5em;
  padding: 0 .25em;
}
table {
  margin-bottom: 1.5em;
}
/* important, abbr are good */
/* only those with a title are shown */
abbr[title] {
  border-bottom: dotted 1px; 
  cursor: help;
  text-decoration: none;
  /* color inherited from text */
} 

/* text aligns */
.alignright  { text-align: right; }
.aligncenter { text-align: center; }
.alignleft   { text-align: left; }





/*
 *****************************************************************
 * 04 -- links + icons
 *****************************************************************
 */

/* links */
a {
  color: #2573be;
  cursor: pointer;
}
/* remember focus */
a:focus,
a:hover,
a:active {
  color: #000;
}
a:focus {
  outline: 1px dotted;
}

.current_link,
.current_link:focus,
.current_link:hover,
.current_link:active {
  color: #d1d1d1;
}


/* avoid border on images in links + fix border image IE */
a:link img,
a:visited img, 
img {
  border-style: none;
}

.nodecoration {
  text-decoration: none;
}

/* links with icons, may use DATA-URI */

/* external links */
/*a[href^="http://"],
a[href^="https://"] {

}*/
/* if full URL of the website in an internal link, remove icon */
/*a[href^="http://www.mydomaine.com"] {

}*/
/* contact, mailto links */
/*.mail,
a[href^="mailto:"] {

}*/
/* if URL ends with .pdf or whatever */
/*a[href$=".pdf"] {

}*/

/* facto icons */
/*[class*=icon-30] {
display: inline-block;
width: 30px;
height: 30px;
}*/





/*
 *****************************************************************
 * 05 -- layout & modules
 *****************************************************************
 */

/**
 * layout
 */

/* it depends, it exceeds (french joke) */
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
svg {
  height: auto;
  max-width: 100%;
}
/* no reset on embed, object & video, some players don't like */

/* useful to manage floats */
/* containing floats */
.mod {
  overflow: auto;
}
.mod--hidden {
  overflow: hidden;
}

/* some floattings */
.left {
  float: left;
}
.right {
  float: right;
}

/* clear floats */
.clear {
  clear: both;
}
.clearleft {
  clear: left;
}
.clearright {
  clear: right;
}
.clearhidden {
  clear: both;
  margin: 0;
  padding: 0;
  visibility: hidden;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}


/* gut : "spacing" empty div */
.gut {
  height: 1px;
}

/* table-design in CSS */
.row {
  display: table;
  table-layout: fixed;
}
.line {
  display: table-row;
}
.col {
  display: table-cell;
  vertical-align: top;
}
.col-noalign {
  display: table-cell;
}

/* alignments */
.aligntop    { vertical-align: top; }
.alignbottom { vertical-align: bottom; }
.alignmiddle { vertical-align: middle; }

/* block */
.bl {
  display: block;
}

/* inline-block, useful for grids, and not only */
.inbl,
.grid {
  display: inline-block;
}

/* grid = element of inline-grid */
.grid {
  vertical-align: top;
}

/* to relativize */
.relative {
  position: relative;
}

/* centered block */
.center {
  margin-left: auto;
  margin-right: auto;
}

/* hardware-acceleration activation */
.hardware-accelerated {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}



/* block widths */
.w1   { width: 1%; }
.w2   { width: 2%; }
.w3   { width: 3%; }
.w5   { width: 5%; }
.w10  { width: 10%; }
.w20  { width: 20%; }
.w25  { width: 25%; }
.w30  { width: 30%; }
.w33  { width: 33.333%; }
.w40  { width: 40%; }
.w45  { width: 45%; }
.w49  { width: 49%; }
.w50  { width: 50%; }
.w60  { width: 60%; }
.w66  { width: 66.666%; }
.w70  { width: 70%; }
.w75  { width: 75%; }
.w80  { width: 80%; }
.w90  { width: 90%; }
.w100 { width: 100%; }

/* here you may add em widths */
/*.w960e { width: 60em; }*/
.w2e { width: 2em; }
.w21e{ width: 21em; }


/* here you may add pixel widths */
/*.w500p { width: 500px; }*/
.w210p { width: 210px; }
.w250p { width: 250px; }
.w270p { width: 270px; }
.w290p { width: 290px; }

/* here you may add em max-widths */
/*.mw960e { max-width: 60em; }*/
.mw480e { width: 34.28em; }

/* here you may add pixel max-widths */
/*.mw960p { max-width: 960px; }*/

.mh300p {
  min-height: 300px;
}


.vh100 {
  height: 100vh;
}


/* margins */
.mt-5 { margin-top: -5em; }
.mt0 { margin-top: 0; }
.mt0-5{ margin-top: .5em; }
.mt1 { margin-top: 1em; }
.mt2 { margin-top: 2em; }
.mt5 { margin-top: 5em; }
.mr0 { margin-right: 0; }
.mr1 { margin-right: 1em; }
.mr2 { margin-right: 2em; }
.mr3 { margin-right: 3em; }
.mb0 { margin-bottom: 0; }
.mb0-25{ margin-bottom: .25em; }
.mb1 { margin-bottom: 1em; }
.mb2 { margin-bottom: 2em; }
.ml0 { margin-left: 0; }
.ml1 { margin-left: 1em; }
.ml2 { margin-left: 2em; }
.ml3 { margin-left: 3em; }
.m0  { margin: 0; }
.m1  { margin: 1em; }
.m2  { margin: 2em; }


/* paddings */
.pt0 { padding-top: 0; }
.pt1 { padding-top: 1em; }
.pt2 { padding-top: 2em; }
.pt4 { padding-top: 4em; }
.pr0 { padding-right: 0; }
.pr1 { padding-right: 1em; }
.pr2 { padding-right: 2em; }
.pr3 { padding-right: 3em; }
.pr4 { padding-right: 4em; }
.pb0 { padding-bottom: 0; }
.pb0-5 { padding-bottom: .5em; }
.pb1 { padding-bottom: 1em; }
.pb2 { padding-bottom: 2em; }
.pb4 { padding-bottom: 4em; }
.pl0 { padding-left: 0; }
.pl1 { padding-left: 1em; }
.pl2 { padding-left: 2em; }
.p0  { padding: 0; }
.p1  { padding: 1em; }
.p2  { padding: 2em; }


/* for 1px-high hr */
hr {
  background-color: #000;
  border: 0;
  color: #000;
  height: 1px;
  margin: 0 0 1em;
  padding: 0;
}

/* to hide text with accessibility… a11y */
.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.hidden    { display: none; } /* hidden everywhere */
.nodesktop { display: none; } /* hidden on desktop */
/*.noprint   {} /* hidden on print */
/*.notablet  {} /* hidden on tablets */
/*.nomobile  {} /* hidden on mobile */


/**
 * modules
 */


/*
$i: 0;
@while $i <= 100 { 
  [data-fade_to="#{$i*1}"] { opacity: #{$i/100} ; }
  $i: $i + 1; 
}
*/
[data-fade_to="0"]{opacity:0}[data-fade_to="1"]{opacity:.01}[data-fade_to="2"]{opacity:.02}[data-fade_to="3"]{opacity:.03}[data-fade_to="4"]{opacity:.04}[data-fade_to="5"]{opacity:.05}[data-fade_to="6"]{opacity:.06}[data-fade_to="7"]{opacity:.07}[data-fade_to="8"]{opacity:.08}[data-fade_to="9"]{opacity:.09}[data-fade_to="10"]{opacity:.1}[data-fade_to="11"]{opacity:.11}[data-fade_to="12"]{opacity:.12}[data-fade_to="13"]{opacity:.13}[data-fade_to="14"]{opacity:.14}[data-fade_to="15"]{opacity:.15}[data-fade_to="16"]{opacity:.16}[data-fade_to="17"]{opacity:.17}[data-fade_to="18"]{opacity:.18}[data-fade_to="19"]{opacity:.19}[data-fade_to="20"]{opacity:.2}[data-fade_to="21"]{opacity:.21}[data-fade_to="22"]{opacity:.22}[data-fade_to="23"]{opacity:.23}[data-fade_to="24"]{opacity:.24}[data-fade_to="25"]{opacity:.25}[data-fade_to="26"]{opacity:.26}[data-fade_to="27"]{opacity:.27}[data-fade_to="28"]{opacity:.28}[data-fade_to="29"]{opacity:.29}[data-fade_to="30"]{opacity:.3}[data-fade_to="31"]{opacity:.31}[data-fade_to="32"]{opacity:.32}[data-fade_to="33"]{opacity:.33}[data-fade_to="34"]{opacity:.34}[data-fade_to="35"]{opacity:.35}[data-fade_to="36"]{opacity:.36}[data-fade_to="37"]{opacity:.37}[data-fade_to="38"]{opacity:.38}[data-fade_to="39"]{opacity:.39}[data-fade_to="40"]{opacity:.4}[data-fade_to="41"]{opacity:.41}[data-fade_to="42"]{opacity:.42}[data-fade_to="43"]{opacity:.43}[data-fade_to="44"]{opacity:.44}[data-fade_to="45"]{opacity:.45}[data-fade_to="46"]{opacity:.46}[data-fade_to="47"]{opacity:.47}[data-fade_to="48"]{opacity:.48}[data-fade_to="49"]{opacity:.49}[data-fade_to="50"]{opacity:.5}[data-fade_to="51"]{opacity:.51}[data-fade_to="52"]{opacity:.52}[data-fade_to="53"]{opacity:.53}[data-fade_to="54"]{opacity:.54}[data-fade_to="55"]{opacity:.55}[data-fade_to="56"]{opacity:.56}[data-fade_to="57"]{opacity:.57}[data-fade_to="58"]{opacity:.58}[data-fade_to="59"]{opacity:.59}[data-fade_to="60"]{opacity:.6}[data-fade_to="61"]{opacity:.61}[data-fade_to="62"]{opacity:.62}[data-fade_to="63"]{opacity:.63}[data-fade_to="64"]{opacity:.64}[data-fade_to="65"]{opacity:.65}[data-fade_to="66"]{opacity:.66}[data-fade_to="67"]{opacity:.67}[data-fade_to="68"]{opacity:.68}[data-fade_to="69"]{opacity:.69}[data-fade_to="70"]{opacity:.7}[data-fade_to="71"]{opacity:.71}[data-fade_to="72"]{opacity:.72}[data-fade_to="73"]{opacity:.73}[data-fade_to="74"]{opacity:.74}[data-fade_to="75"]{opacity:.75}[data-fade_to="76"]{opacity:.76}[data-fade_to="77"]{opacity:.77}[data-fade_to="78"]{opacity:.78}[data-fade_to="79"]{opacity:.79}[data-fade_to="80"]{opacity:.8}[data-fade_to="81"]{opacity:.81}[data-fade_to="82"]{opacity:.82}[data-fade_to="83"]{opacity:.83}[data-fade_to="84"]{opacity:.84}[data-fade_to="85"]{opacity:.85}[data-fade_to="86"]{opacity:.86}[data-fade_to="87"]{opacity:.87}[data-fade_to="88"]{opacity:.88}[data-fade_to="89"]{opacity:.89}[data-fade_to="90"]{opacity:.9}[data-fade_to="91"]{opacity:.91}[data-fade_to="92"]{opacity:.92}[data-fade_to="93"]{opacity:.93}[data-fade_to="94"]{opacity:.94}[data-fade_to="95"]{opacity:.95}[data-fade_to="96"]{opacity:.96}[data-fade_to="97"]{opacity:.97}[data-fade_to="98"]{opacity:.98}[data-fade_to="99"]{opacity:.99}[data-fade_to="100"]{opacity:1}

.js-fadebg_to {
  -webkit-transition: opacity .015s linear;
          transition: opacity .015s linear;
}



.csstransitions .transition-opacity1,
.csstransitions .transition-opacity2,
.csstransitions .transition-opacity3 {
  opacity: 0;
  -webkit-transition:opacity 2s ease;
     -moz-transition:opacity 2s ease;
       -o-transition:opacity 2s ease;
          transition:opacity 2s ease;
}
.csstransitions .transition-opacity1--active,
.csstransitions .transition-opacity2--active,
.csstransitions .transition-opacity3--active {
  opacity: 1;
}


.csstransitions .transition-pop1,
.csstransitions .transition-pop2,
.csstransitions .transition-pop3,
.csstransitions .transition-pop4,
.csstransitions .transition-pop5,
.csstransitions .transition-pop6,
.csstransitions .transition-pop7,
.csstransitions .transition-pop8 {
   -webkit-transform: scale(0);
      -moz-transform: scale(0);
        -o-transform: scale(0);
           transform: scale(0);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.455, 0.705, 0.795, 1.310),
                      opacity .5s ease ;
     -moz-transition: -moz-transform 1s cubic-bezier(0.455, 0.705, 0.795, 1.310),
                      opacity .5s ease ;
       -o-transition: -o-transform 1s cubic-bezier(0.455, 0.705, 0.795, 1.310),
                      opacity .5s ease ;
          transition: transform 1s cubic-bezier(0.455, 0.705, 0.795, 1.310),
                      opacity .5s ease ;
}
.csstransitions .transition-pop--active {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}



.transition-bottom-container {
  overflow: hidden;
}

.csstransitions .transition-bottom {
  position: relative;
  top: 200px;
  opacity: 0;
  -webkit-transition: top .5s ease,
                      opacity .25s ease ;
     -moz-transition: top .5s ease,
                      opacity .25s ease ;
       -o-transition: top .5s ease,
                      opacity .25s ease ;
          transition: top .5s ease,
                      opacity .25s ease ;
}
.csstransitions .transition-bottom--active {
  top: 0;
  opacity: 1;
}




.parallax__transition {
  -webkit-transition: background-position .15s linear;
  transition: background-position .15s linear;
}

/* parallax effect */

/*
$i: 0;
@while $i <= 100 { 
  [data-parallax="+#{$i*1}"] { top: #{$i}px ; }
  [data-parallax="-#{$i*1}"] { top: -#{$i}px ; }
  $i: $i + 5; 
}
*/

[data-parallax] {
  position: relative;
}
[data-parallax="+0"],[data-parallax="-0"]{top:0}[data-parallax="+5"]{top:5px}[data-parallax="-5"]{top:-5px}[data-parallax="+10"]{top:10px}[data-parallax="-10"]{top:-10px}[data-parallax="+15"]{top:15px}[data-parallax="-15"]{top:-15px}[data-parallax="+20"]{top:20px}[data-parallax="-20"]{top:-20px}[data-parallax="+25"]{top:25px}[data-parallax="-25"]{top:-25px}[data-parallax="+30"]{top:30px}[data-parallax="-30"]{top:-30px}[data-parallax="+35"]{top:35px}[data-parallax="-35"]{top:-35px}[data-parallax="+40"]{top:40px}[data-parallax="-40"]{top:-40px}[data-parallax="+45"]{top:45px}[data-parallax="-45"]{top:-45px}[data-parallax="+50"]{top:50px}[data-parallax="-50"]{top:-50px}[data-parallax="+55"]{top:55px}[data-parallax="-55"]{top:-55px}[data-parallax="+60"]{top:60px}[data-parallax="-60"]{top:-60px}[data-parallax="+65"]{top:65px}[data-parallax="-65"]{top:-65px}[data-parallax="+70"]{top:70px}[data-parallax="-70"]{top:-70px}[data-parallax="+75"]{top:75px}[data-parallax="-75"]{top:-75px}[data-parallax="+80"]{top:80px}[data-parallax="-80"]{top:-80px}[data-parallax="+85"]{top:85px}[data-parallax="-85"]{top:-85px}[data-parallax="+90"]{top:90px}[data-parallax="-90"]{top:-90px}[data-parallax="+95"]{top:95px}[data-parallax="-95"]{top:-95px}[data-parallax="+100"]{top:100px}[data-parallax="-100"]{top:-100px}



/* ------------------ Carrousel ------------------ */
.carrousel__content[aria-hidden=true] {
  display: none;
}
.carrousel__content[aria-hidden=true] {
  white-space: normal;
}

.mw_carrousel {
  max-width: 42em;
}

/* exemple styles */
.watches-carrousel__container,
.watches-detail-carrousel__container {
  white-space: nowrap;
}
.watches-carrousel__control__list,
.watches-detail-carrousel__control__list {
  position: absolute;
  list-style-type: none;
  top: 100%;
  right: 0;
  left: 0;
  margin-top: -0.5em;
  padding-left: 0;
  text-align: center;
  display: none;
}
.watches-carrousel__control__list__item,
.watches-detail-carrousel__control__list__item {
  display: inline-block;
  margin: 0 .5em;
}
.watches-carrousel__control__list__link,
.watches-detail-carrousel__control__list__link {
  display: inline-block;
  width: .5em;
  height: .5em;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: .5em;
}

.watches-carrousel__button-container,
.watches-detail-carrousel__button-container {
  position: absolute;

}
.watches-carrousel__button__previous,
.watches-detail-carrousel__button__previous {
  top: 40%;
  margin-top: -18px;
  left: 0;
  /**margin-left: -35px;**/
}
.watches-carrousel__button__next,
.watches-detail-carrousel__button__next {
  top: 40%;
  margin-top: -18px;
  right: 0;
  /*margin-right: -35px;*/
}
.watches-carrousel__button__button,
.watches-detail-carrousel__button__button {
  margin: 0;
  padding: 0;
  background: transparent;
}
.watches-detail-carrousel__button__button:focus,
.watches-detail-carrousel__button__button:active {
  outline: 1px dotted #666;
}

.watches-detail-carrousel__button__previous {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.watches-detail-carrousel__button__next {
  top: 140px;
}


/* ------------------ transition fade ------------------ */
.fade .carrousel__content {
  -webkit-animation: fadein 1s;
  -moz-animation:    fadein 1s;
  -o-animation:      fadein 1s;
  -ms-animation:     fadein 1s;
  animation:         fadein 1s;
  white-space: normal;
}
.fade .carrousel__content[aria-hidden=true] {
  -webkit-animation: fadeout 1s;
  -moz-animation:    fadeout 1s;
  -o-animation:      fadeout 1s;
  -ms-animation:     fadeout 1s;
  animation:         fadeout 1s;
}

@-webkit-keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-o-keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@-ms-keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeout {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-ms-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ------------------ State rules ------------------ */
.watches-carrousel__control__list__link:focus,
.watches-carrousel__control__list__link:hover,
.watches-carrousel__control__list__link:active,
.watches-carrousel__control__list__link[aria-selected=true] {
  background: #d1d1d1;
}


.watches-carrousel__button__button:focus,
.watches-carrousel__button__button:hover,
.watches-carrousel__button__button:active {
  outline: 1px dotted;
}





/* expandmore */
.animwatches-expandmore__button {
  background: transparent;
}
.animwatches-expandmore__button:focus,
.animwatches-expandmore__button:active {
  border: 0;
  outline: 0;
}
.animwatches-expandmore__to_expand {
  display: block;
  overflow: hidden;
  opacity: 1;
 -webkit-transition: visibility 0s ease, opacity 2s ease ;
          transition: visibility 0s ease, opacity 2s ease ;
  visibility: visible;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
/* This is the hidden state */
[data-hidden=true].animwatches-expandmore__to_expand {
  display: block;
  opacity: 0;
  visibility: hidden;
  -webkit-transition-delay: 2s, 0s;
          transition-delay: 2s, 0s;
}


/* legal */
.mw-content-legal {
  max-width: 66em;
}


/* tabs */
.mw-content-tabs {
  max-width: 78em;
}




/* 
  styles without JS = tabs*
  styles with JS = more-tabs
 */

.tabs__list {
  display: table;
  margin: 0 auto 1em auto;
}

.tabs__item {
  display: table-cell;
  padding-right: 1em;
}
.tabs__item--last {
  padding-right: 0;
}
.tabs__link {
  color: #d1d1d1;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: .2em .5em;
}
.tabs__link:focus,
.tabs__link:hover,
.tabs__link:active {
  background: #000;
  color: #d1d1d1;
}


.tabs__content {
  background: #000;
  background: rgba(0, 0, 0, .5);
  padding: 2em 0;
  color: #d1d1d1;
}



.js-tabcontent[aria-hidden=true] {
  display: none;
}
.more-tabs__link[aria-selected=true] {
  background: #000;
  color: #888;
}
.more-tabs__content {
  min-height: 25em;
}



.content-tabs {
  padding: 0 1em;
  border-left: 1px solid #666;
}
.content-tabs:first-child {
  border-left: 0;
}
.content-tabs__minh {
  min-height: 21em;
}





/* Modal dialog tooltip */
/*
.simple-tooltip__button {
  background: transparent;
  font-family: inherit;
  font-size: 1em;
}
.simple-tooltip__button:focus {
  outline: 1px dotted;
}
 
.simple-tooltip-tooltip {
  position: absolute;
  z-index: 666;
  top: 80%;
  left: 0;
  right: 0;
  background: #fff;
  background: rgba(255, 255, 255, .9);
  padding: 1em;
  text-align: left;
  font-size: 1em;
}
.simple-tooltip-tooltip__title {
  margin: 0;
  line-height: 1;
  font-size: 1.2em;
  font-weight: bold;
}
.simple-tooltip-tooltip p {
  margin: .5em 0;
}
.simple-tooltip-tooltip__close {
  float: right;
  font-family: inherit;
  font-size: 1em;
  background: transparent;
  width: 20px;
  height: 20px;
  background: url(../images/close.svg) 0 0 no-repeat;
  outline: 1px dotted;
}*/

.simple-tooltip__button {
  background: transparent;
  font-family: inherit;
  font-size: 1em;
}

.watch-container {
  display: inline-block;
  width: 300px;
  height: 365px;
  /*background-position: 0 -10px;*/
  background-position: 0 -470px;
  background-repeat: no-repeat;
  cursor: pointer;
  outline: 0;
  position: relative;
  /*opacity: .25;*/
}

.watch-container__mh-fix {
  min-height: 3em;
}

/*.watch-container:focus,
.watch-container:hover,
.watch-container:active {
  /*background-position: 0 -470px;*/
  /*opacity: 1;*/
/*}*/
.watch-container--onyx,
.watch-container--onyx .watch-container__inner {
  background-image: url(../images/watch-CB_Onyx.png?v=2);
  /*background-image: url(../images/watch-CB_Onyx-02.png);*/
}
.watch-container--stellaire,
.watch-container--stellaire .watch-container__inner {
  background-image: url(../images/watch-Chrys_Stellaire_Jade.png?v=2);
}
.watch-container--obsgr,
.watch-container--obsgr .watch-container__inner {
  background-image: url(../images/watch-Obs_GR_PR.png?v=2);
}
.watch-container--obsrepet,
.watch-container--obsrepet .watch-container__inner {
  background-image: url(../images/watch-Obs_repet.png?v=2);
}

.watch-container__inner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 4;
  background-position: 0 -10px;
  opacity: 1;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

.watch-container__inner--goforit {
  opacity: 0;
  /*transition: opacity 1s ease;
  transition-delay: 2s;*/
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-name: fadeinfadeout;
          animation-name: fadeinfadeout;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes fadeinfadeout {
  0%  { opacity: 1; filter: alpha(opacity=100); }
  100% { opacity: 0; filter: alpha(opacity=0); }
}
@keyframes fadeinfadeout {
  0%  { opacity: 1; filter: alpha(opacity=100); }
  100% { opacity: 0; filter: alpha(opacity=0); }
}





.text-intro-carrousel {
  position: absolute; 
  left: 0; 
  right: 0;
  top: 390px;
  -wbkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}



/*.watch-container--detail {
  background-position: 0 -460px;
  cursor: auto;
}*/



/* timeline */
.mw-timeline {
  max-width: 60em;
}
.arrow-l,
.arrow-r {
  width: 16px;
  height: 16px
}
.arrow-c {
  height: 16px;
}
.arrow-l {
  background: url(../images/arrow-left.svg) 0 0 no-repeat;
}
.arrow-c {
  background: url(../images/arrow-middle.svg) 0 0 repeat-x;
}
.arrow-r {
  background: url(../images/arrow-right.svg) 0 0 no-repeat;
}

.timeline-bg,
.black-bg {
  background: #000;
  background: rgba(0,0,0,.5);
}

.timeline-element,
.timeline-date {
  color: #fff;
  font-size: .92857142857em;
}
.timeline-element {
  padding: 1.5em .25em;
}
/*.timeline-date {
  width: 4em;
}*/


.link_tabs {
  background: #000;
  background: rgba(0, 0, 0, .6);
  color: #d1d1d1;
  padding: 1em;
  margin: .25em .25em;
  text-decoration: none;
  text-transform: uppercase;
}
.link_tabs:focus,
.link_tabs:hover,
.link_tabs:active {
  background: #000;
  color: #fff;
}






/*
 *****************************************************************
 * 06 -- structure (page / skip links / header / main content / footer)
 *****************************************************************
 */

 
 
/* === page === */
.page {
  margin: 0 auto;
  position: relative;
}

/* --- skip links --- */
/*.skip {

}*/
/* .skip__link = 1 skip link  */
/* they should be visible not only on focus */
/*.skip__link {

}*/
/* anyway remember making them visible on focus */
/*.skip__link:focus,
.skip__link:hover,
.skip__link:active {

}*/


/* --- header --- */
.mobile-detect {
  display: none;
}

.banner-polo {
  position: absolute;
  position: relative;
  z-index: 66;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: 2em;
  
  color: #fff;
  /*
  opacity: 0;
  animation:         fadein .75s;
  animation-delay: 4s;
  animation-fill-mode: forwards;*/
}
.banner-polo__link,
.banner-polo__link:focus,
.banner-polo__link:hover,
.banner-polo__link:active {
  color: #fff;
  font-size: 1.3em;
}

.switchlang {
  position: absolute;
  top: 0;
  right: 2em;
  background: rgba(0, 0, 0, 0.5);
  padding: .8em 1em;
  z-index: 666;
}

.news {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  padding: .5em;
  color: #fff;
}

.news__link,
.news__link:focus,
.news__link:hover,
.news__link:active {
  color: #fff;
  text-decoration: none;
}


/* --- main content --- */

.slide_bg1,
.slide_bg2,
.slide_bg3,
.slide_bg4,
.slide_bg2nd,
.splash_screen_mouvement {
  position: fixed;
  
}

.slide_bg1 {
  background: url(../images/background-01.jpg?v=2) 0 0 no-repeat;
  background-size: cover;

}
.slide_bg2 {
  /*background: url(../images/background-04_20160203.jpg) 0 0 no-repeat;*/
  background: url(../images/background-04.jpg?v=2) 0 0 no-repeat;
  background-size: cover;
}
.slide_bg3 {
  background: url(../images/background-03.jpg?v=2) 0 0 no-repeat;
  background-size: cover;
}
.slide_bg4 {
  background: url(../images/background-03.jpg?v=2) 50% 0 no-repeat;
  background-size: cover;
}
.slide_bg2nd {
  background: url(../images/background-02.jpg?v=2) 0 0 no-repeat;
  background-size: cover;

}

.splash_screen_mouvement {
  background: url(../images/background-05.jpg) 0 0 no-repeat;
  background-size: cover;
  z-index: 666;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-name: fadeoutsplash;
          animation-name: fadeoutsplash;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
} 


@-webkit-keyframes fadeoutsplash {
  0%  { opacity: 1; filter: alpha(opacity=100); }
  100% { opacity: 0; filter: alpha(opacity=0);
         z-index: -2; }
}
@keyframes fadeoutsplash {
  0%  { opacity: 1; filter: alpha(opacity=100); }
  100% { opacity: 0; filter: alpha(opacity=0);
         z-index: -2; }
}


.bg-map {
  background: url(../images/bg-worldmap.png) 50% 0 no-repeat;
  min-height: 280px;
}


.slide_bg1__video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	    -ms-transform: translateX(-50%) translateY(-50%);
	        transform: translateX(-50%) translateY(-50%);
}


.slide1,
.slide2,
.slide3 {
  min-height: 100vh;
  position: relative;
}


/*.logo {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -175px;
  z-index: 10;
}
.logopetit {
  position: absolute;
  top: 1em;
  left: 50%;
  margin-left: -100px;
  z-index: 10;
}*/

.mwtext-cool {
  /*max-width: 60%;*/
  max-width: 42em;
}

.text-cool,
.text-intro,
.text-intro--mini {
  font-size: 1.3em;
  display: inline-block;
  color: #d1d1d1;
}
.text-intro--mini {
  font-size: 1em;
}
.text-cool:before,
.text-cool:after {
  content: '';
  display: inline-block;
  position: relative;
  top: -0.5ex;
  border-bottom: 1px solid #d1d1d1;
  width: 3em;
  height: 1px;
}
.text-cool:before {
  margin-right: 1em;
}
.text-cool:after {
  margin-left: 1em;
}
.button_more {
  position: absolute;
  bottom: 2.5em;
  left: 50%;
  margin-left: -22px;
}




.animation-goodbye {
   -webkit-animation-delay: 0;
           animation-delay: 0;
   -webkit-animation-duration: 1s;
           animation-duration: 1s;
   -webkit-animation-name: goodbye;
           animation-name: goodbye;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
}


@-webkit-keyframes goodbye {
   0% {
	 top: 50%;
	 opacity: 1;
   }
   80% {
   top: 15%;
	 opacity: 0;
   }
   100% {
   top: 15%;
	 opacity: 0;
   }
}


@keyframes goodbye {
   0% {
	 top: 50%;
	 opacity: 1;
   }
   80% {
   top: 15%;
	 opacity: 0;
   }
   100% {
   top: 15%;
	 opacity: 0;
  }
}


.animation-coucou {
   -webkit-animation-delay: 0;
           animation-delay: 0;
   -webkit-animation-duration: 1s;
           animation-duration: 1s;
   -webkit-animation-name: coucou;
           animation-name: coucou;
   -webkit-animation-iteration-count: 1;
           animation-iteration-count: 1;
}

@-webkit-keyframes coucou {
   0% {
	 opacity: 0;
   }
   70% {
	 opacity: 0;
   }
   100% {
 	 opacity: 1;
   }
}

@keyframes coucou {
   0% {
	 opacity: 0;
   }
   70% {
	 opacity: 0;
   }
   100% {
 	 opacity: 1;
   }
}



.logos,
.logo__center,
.logo__center_mobile,
.logo__top,
.logo__top--nofixed {
  position: fixed;
  left: 0;
  right: 0;
  text-align: center;
}
.logo__center {
  top: 50%;
  margin-top: -100px;
  z-index: 666;
}
.logo__center_mobile {
  top: 50%;
  margin-top: -125px;
}
.logo__top,
.logo__top--nofixed {
  top: 1em;
  z-index: 666;
}
.logos--nofixed,
.logo__top--nofixed {
  position: relative;
}







/* --- footer --- */
.footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  padding: 1.5em 0;
}
.footer__container {
  color: #fff;
}
.footer__link,
.footer__link:focus,
.footer__link:hover,
.footer__link:active {
  color: #fff;
  text-decoration: none;
}




/*
 *****************************************************************
 * 07 -- forms
 *****************************************************************
 */

/* makes you want to click on */
label,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* avoid dummy resize */
textarea {
  resize: vertical;
}

label,
button,
input,
select {
  vertical-align: middle;
}

/** fix typo inputs **/
input,
select,
textarea,
button {
  font: inherit;
  margin: 0;
}

/* to adapt to your design */
input,
select,
textarea {
  border: 1px solid #808080;
  width: 340px;
  padding: .5em;
  background: #333;
  color: #fff;
}

/* for field texts */
.label {
  display: inline-block;
}

/* to adapt to your design */
.button {
  background: #808080;
  color: #fff;
  -webkit-transition: background-color .5s ease;
  transition: background-color .5s ease;
}
.button:focus,
.button:hover,
.button:active {
  background: #595959;  
}
.form_cont {
  background: #000;
  background: rgba(0, 0, 0, .5);
  padding: 2em 0;
  color: #d1d1d1;
}

/*.custom_select option {

  border-left: 0;
}
.custom_select option::selection {
  background: #666;
}*/
/* simili-combobox for categories */
.expandcontainer {
  display: block;
  width: 15em;
  position: relative;
}
.mini-combo-expandmore__button {
  background: #333 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjY2NjIiBkPSJNOS4yOTIgMTUuNDJsLTguNjctOC4zMzUgMi4wNzktMi4xNjMgNi41OTEgNi4zMzYgNy4yMjctNi45NDYgMi4wNzggMi4xNjN6Ii8+PC9zdmc+) 95% .6em no-repeat;
  padding: .5em 5em .5em 1em;
  color: #d1d1d1;
  border: 1px solid #808080;
  width: 100%;
  text-align: left;
}
.mini-combo-expandmore__button:focus,
.mini-combo-expandmore__button:hover,
.mini-combo-expandmore__button:active {
   background-color: #666; 
}
[data-hidden=true].mini-combo-expandmore__to_expand {
  display: none;
}
[data-hideshow-prefix-class=mini-combo] {
  margin-bottom: 0;
}
.mini-combo-expandmore__to_expand {
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -2px;
  padding-left: 0;
  list-style-type: none;
  border: 0;
  background: #fff;
  z-index: 666;
  border-bottom: 1px solid #808080;
}
.mini-combo-expandmore__buttonchoice {
  background: #333;
  padding: .5em 5em .5em 1em;
  color: #d1d1d1;
  width: 100%;
  border-left: 1px solid #808080;
  border-right: 1px solid #808080;
  text-align: left;
}
.mini-combo-expandmore__buttonchoice:focus,
.mini-combo-expandmore__buttonchoice:hover,
.mini-combo-expandmore__buttonchoice:active {
  background: #666;
}

/*
* avoids dimensioning for radio, checkboxes and images
* and a different display on IE
*/
input[type="radio"],
input[type="checkbox"],
input[type="image"] {
  background-color: transparent;
  border: 0;
  width: auto;
}

/* to cancel input sizing or other if needed */
.auto {
  width: auto;
}

.alert .check + .check_custom:before {
  background-position: 0 -104px;
}

.check + .check_custom:before {
  content: '';
  speak: none;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIxMzAiIHZpZXdCb3g9IjAgMCAyNiAxMzAiPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0wIDhoMjB2MjBoLTIwdi0yMHoiLz48cGF0aCBmaWxsPSIjODA4MDgwIiBkPSJNMjEgMjhoLTIxdi0yMWgyMXYyMXptLTIwLTFoMTl2LTE5aC0xOXYxOXoiLz48cGF0aCBmaWxsPSIjNzczQTNBIiBkPSJNMCAxMTBoMjB2MjBoLTIwdi0yMHoiLz48cGF0aCBmaWxsPSIjQTM1MjUyIiBkPSJNMjEgMTMwaC0yMXYtMjFoMjF2MjF6bS0yMC0xaDE5di0xOWgtMTl2MTl6Ii8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTAgNjAuMDU2aDIwdjIwaC0yMHYtMjB6Ii8+PHBhdGggZmlsbD0iIzgwODA4MCIgZD0iTTIxIDgwLjA1N2gtMjF2LTIxaDIxdjIxem0tMjAtMWgxOXYtMTloLTE5djE5eiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMS41MjUgNzUuMzQ4bC02LjY1OS05LjE0NiAyLjQyNi0xLjc2NiA0LjA1MSA1LjU2NCA5LjQ2Ny0xNS4wNTcgMi41MzkgMS41OTUtMTEuODI0IDE4LjgxeiIvPjwvc3ZnPg==") 0 -2px no-repeat;
  display: inline-block;
  width: 26px;
  height: 26px;
  position: relative;
  /*top: -2px;*/
}
.check:checked + .check_custom:before {
  content: '';
  speak: none;
  background-position: 0 -54px !important;
}

/* error or confirmation messages */
/*.alert,*/
.alert .container,
.alert .mini-combo-expandmore__button,
.alert input,
.alert textarea,
.alert select {
  background-color: #773a3a !important;
  border: 1px solid #a35252;
  /*font-weight: bold;*/
}
/* .redborder is only used to debug */
.alert input,
.alert textarea,
.alert select,
.redborder {
  border: 1px solid #a35252;
}
/*
.alert img {
  border: 0;
}*/
/*.ok {

}*/

/* can be completed with HTML5 required attribute
* example with a color, remember not only displaying information with it
*/
/*select:required:invalid,
input:required:invalid,
input:focus:invalid,
textarea:required:invalid,
textarea:focus:invalid {
  background: #fef6f6;
  -moz-box-shadow: none;
}

input:focus:required:valid,
textarea:focus:required:valid,
select:focus:required:valid {
  background: #efe;
  -moz-box-shadow: none;
}*/





/*
 *****************************************************************
 * 08 -- inside content (other styles for pages)
 *****************************************************************
 */

/* home */





/*
 *****************************************************************
 * 09 -- minor breakpoints between desktop and tablets
 *****************************************************************
 */


@media only screen and (min-width: 125em) { /* equiv 2000px */
  body {
    font-size: 1.8em; /* font-size equiv to 14px */
  }
}


/*@media only screen and (max-width: 71em) {  

  .slide_bg4 {
    background-size: 1650px;
  }
}*/

/*/@media only screen and (min-height: 65em) {  
  .slide_bg4 {
    background-size: 2550px;
  }
}
@media only screen and (min-height: 65em) {
  .slide_bg4 {
    background-size: 2550px;
  }
}
*/


@media only screen and (max-width: 65em) { /* equiv 1040px */

  .mobile-detect {
    display: block;
  }

  
}

@media only screen and (min-width: 100em) { 

  .slide_bg4 {
    background-position: 50% -400px;
    background-size: 2550px;
  }

}

/*@media only screen and (max-width: 65em) and (orientation:portrait) { 

  .slide_bg4 {
    background-size: 1650px;
  }
  
}*/
 
/*@media only screen and (max-width: 65em) {  
 .slide_bg4 {
  background-position: 50% -200px;
}
}
*/
 



@media only screen and (max-width: 56.25em) { /* equiv 900px */

  .autopiecehorlogere {
    float: none;
    display: block;
    width: auto;
  }
  .autopiecehorlogere.col {
    padding-bottom: 2em;
  }
  .autopiecehorlogere.content-tabs {
    border-left: 0;
  }
  .autopiecehorlogere > .content-tabs__minh {
    min-height: 0;
  }
  
  .banner-polo {
    padding: 1em;
  }
  
}





/*
 *****************************************************************
 * 10 -- tablets - major breakpoint
 *****************************************************************
 */ 

@media only screen and (max-width: 54em), only screen and (max-height: 35em) { /* was 48em => 768px */
   
  /**
   * layout/modules
   */

  /* display elements */
  .nodesktop,
  .mobile-detect { display: block; }

  /* hide unnecessary elements */
  .notablet { display: none; }
  
  /* linearization of floating content/table-layout */
  .autotablet {
    float: none;
    display: block;
    width: auto;
  }
  
  .ontablet-pt2-5 { padding-top: 2.5em; } 
  .ontablet-pb2 { padding-bottom: 2em; } 

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
   
  
   
  .logo__top img {
     max-height: 20vh;
  }
  .slide/*,
  .slide .vh100*/ {
    height: auto;
    background-position: 0 50%;
  }
  .slide .vh100 {
    padding: 4em 0;
    /*max-height: 80vh;*/
    min-height: 70vh;
  }
  .button_more--currents {
    position: static;
    display: block;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .footer {
    position: static;
  }
  
  /*.watch-container,
  .watch-container__inner {
    width: 130px;
    height: 180px;
    background-position: 0 -199px;
    background-size: cover;
  }
  .watch-container__inner {
    background-position: 0 0;
  }*/
  
  
  /*.text-intro-carrousel {
    top: 200px;
  }*/
  
  .content-tabs__minh {
    min-height: 0;
  }
  /*
  .watch-container--detail,
  .watch-container--detail:focus,
  .watch-container--detail:hover,
  .watch-container--detail:active {
    background-position: 0 -460px;
    width: 300px;
    height: 350px;
  }*/
  
  /**
   * inside content (other styles for pages)
   */
  .banner-polo {
    font-size: .9em;
  }

}




/*
 *****************************************************************
 * 11 -- minor breakpoints between tablets and mobile
 *****************************************************************
 */







/*
 *****************************************************************
 * 12 -- mobile - major breakpoint
 *****************************************************************
 */

@media (max-width: 40em) { /* equiv 640px */

  /**
   * layout/modules
   */

  .simple-tooltip-container {
    position: static;
	
  }
  .simple-tooltip-tooltip {
    /*position: static;
	  width: auto;
	  margin-top: 1em;*/
  }

  /* display elements */
  .notablet { display: block; }

  /* hide unnecessary elements */
  .nomobile,
  .notablet.hidden { display: none; }

  /* linearization of floating content/table-layout */
  .automobile {
    float: none;
    display: block;
    width: auto;
  }
  .onmobile-aligncenter {
    text-align: center;
  }
  .onmobile-center {
    margin: 0 auto;
  }
  .onmobile-alignleft {
    text-align: left;
  }
  .onmobile-pr1 {
    padding-right: 1em;
  }
  .onmobile-pl1 {
    padding-left: 1em;
  } 
  .onmobile-pb0 {
    padding-bottom: 0;
  }
  .onmobile-pb1 {
    padding-bottom: 1em;
  }
  .onmobile-pt2 { padding-top: 2em; }

  /**
   * global structure adaptation (page / skip links / header / main content / footer)
   */
  .content-tabs {
    border-left: 0;
  }

  
  .tabs__item {
    display: table-cell;
    padding-right: .5em;
  }
  
  /*.watches-carrousel__button__previous,
  .watches-detail-carrousel__button__previous,
  .watches-carrousel__button__next,
  .watches-detail-carrousel__button__next {
    top: 80px;
  }*/
  
  .watches-detail-carrousel__button__next {
    top: 140px;
  }
  
  /**
   * inside content (other styles for pages)
   */
  .banner-polo {
    font-size: .8em;
    line-height: 1.2;
  }


}




/*
 *****************************************************************
 * 13 -- minor breakpoints for very small mobiles
 *****************************************************************
 */

@media (max-height: 25em) { /* equiv 400px */

  .logo__center_mobile img {
    max-width: 60vh;
  }
  .nosmallmobile,
  .js-element_disappear_faster {
    display: none;
  }
  .js-element_disappear_faster:first-child {
    display: block;
  }
  .text-cool, .text-intro, .text-intro--mini {
    font-size: 1.1em;
  }

  .watches-carrousel__button__previous,
  .watches-detail-carrousel__button__previous,
  .watches-carrousel__button__next,
  .watches-detail-carrousel__button__next {
    top: 80px;
  }
  .watch-container {
    margin-bottom: 0;
  }
  
}


@media (max-width: 31em) { /* equiv 490px */
  
  .tabs__list,
  .tabs__item {
    display: block;
    margin-bottom: .5em;
  }


}


@media (max-width: 28em) { /* equiv 448px */
  
  /*.timeline__time {
    display: none;
  }*/
  .nosmallmobile,
  .js-element_disappear_faster {
    display: none;
  }
  .js-element_disappear_faster:first-child {
    display: block;
  }


}



@media (max-width: 23.4375em) { /* equiv 375px */
  
  .watches-carrousel__button__previous,
  .watches-carrousel__button__next {
    top: 78%;
    z-index: 666;
  }
  .watches-carrousel__button__previous {
    left: 30%;
  }
  .watches-carrousel__button__next {
    right: 35%;
  }
  .carrousel__button__img {
    width: 35px;
  }
  
}





/*
 *****************************************************************
 * 14 -- print
 *****************************************************************
 */

@media print {

  /**
   * add in this all elements which need to be hardly reseted for print
   */
  body,
  html,
  #page,
  .reset4print,
  .text-intro,
  .footer__container,
  .footer__link {
    background-color: #fff;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: #000;
    float: none;
    height: auto;
    margin: 0;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    position: static;
    width: auto;
  }
  .timeline-bg,
  .timeline-element,
  .current_link {
    background-color: #fff;
    background-image: none;  
    color: #000;
  }

  body {
    padding: .5em;
  }

  /* hide unnecessary elements */
  .noprint,
  .button_more,
  .slide_n1,
  .logo__center,
  .logo__center_mobile {
    display: none;
  }
  
  /* display specific elements for print */
  .onprint {
    display: block;
  }
  
  /* avoid problematic page break */
  blockquote, ul, ol {
    page-break-inside: avoid;
  }
  h1, h2, h3, caption {
    page-break-after: avoid;
  }
  
  .csstransitions .transition-pop1,
  .csstransitions .transition-pop2,
  .csstransitions .transition-pop3,
  .csstransitions .transition-pop4,
  .csstransitions .transition-pop5,
  .csstransitions .transition-pop6,
  .csstransitions .transition-pop7,
  .csstransitions .transition-pop8 {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  .transition-bottom-container {
    overflow: auto;
  }
  .csstransitions .transition-bottom {
    top: 0;
    opacity: 1;
  }
  
  /* display links, except for those containing images */
  /* warning, remember checking the result & think to limitate
   * this option only for inside content links */
  /*a:after {
    content: " (" attr(href) ") ";
  }
  a:after img {
    content: "";
  }*/

  /* fix particular properties */
  .logo__top {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    top: 1em;
    z-index: 666;
    opacity: 1;
  }
  .slide_n4,
  .slide_n4 .vh100,
  .slide_n5,
  .slide_n5 .vh100 {
    height: 45vh;
  }
  .slide_n5 .vh100 .col {
    vertical-align: top;
  }
  
  .footer {
    bottom: 5em;
    background: #fff;
  }
  
  

} /* end print */




/*
 *****************************************************************
 * 15 -- fix viewport
 *****************************************************************
 */

/* fix viewport for Win8 (snap mode) and preparing day
 * when viewport will be supported by all render engines
 *
 * Examples : http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
 * width=device-width => width: device-width;
 * height=device-height => height: device-height;
 * initial-scale=2 => zoom: 2;
 * maximum-scale=2 => max-zoom: 2;
 * minimum-scale=0.5 => min-zoom: 0.5;
 * user-scalable=no => user-zoom: fixed;
 *
 * for Win8 snap mode => only width: device-width; works for the moment
 */

@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}




/*
 *****************************************************************
 * 16 -- state classes
 *****************************************************************
 */

/*
 * State classes = put here to take priority on all classes
 *
 */

/*
.is-hidden,
[aria-hidden=true] {
  display: none;
}
*/




/*
 *****************************************************************
 * 17 -- Bonus: Fixes IE
 *****************************************************************
 */

/*
 * based on conditional classes on HTML element
 *
 * to be used only if there are not to many fixes &
 * small impact on webperfs for other browsers
 *
 */

/* less than IE 9 */
.oldies .nooldies {
  display: none;
}

.ie6 .noie6 {
  display: none;
}
.ie7 .noie7 {
  display: none;
}
.ie8 .noie8 {
  display: none;
}
.ie9 .noie9 {
  display: none;
}

.ie7 .col,
.ie7 .col-noalign,
.ie6 .col,
.ie6 .col-noalign {
  float: left;
}
.ie7 .row,
.ie6 .row {
  overflow: auto;
}