/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:0}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}


/*! reset */
html, button, input, select, textarea { color: #000; }
body { font-size: 1em; line-height: 1.4; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
a { text-decoration: none; outline:0;}

@-ms-viewport {
  max-zoom: 1;
  zoom: 1;
  width: device-width;
}

/* ==========================================================================
   Author's custom styles : Clément CAILLARD
   ========================================================================== */
html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: abchanel-couture, Arial, Helvetica, sans-serif;
}
html.zh_HK, .zh_HK body, html.zh_CN, .zh_CN body {
	font-family: abchanel-couture, '华文细黑', STXiHei, '微软雅黑', 'Microsoft Yahei', '华文黑体', 'ST Heiti', 'MS黑体', 'MS Hei', sans-serif;
}
html.ja_JP, .ja_JP body {
	font-family: abchanel-couture, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', 'Roboto', 'Droid Sans', sans-serif;
}
html.zh_TW, .zh_TW body {
	font-family: abchanel-couture, '微軟正黑體', 'Microsoft JhengHei', '儷黑 Pro', 'LiHei Pro', 'Arial Unicode MS', sans-serif;
}
html.ru_RU, .ru_RU body {
	font-family: abchanel-couture, sans-serif;
}
html.ko_KR, .ko_KR body {
	font-family: abchanel-couture, '맑은고딕', 'Malgun Gothic', 'Apple Gothic', '돋움', Dotum, '굴림', Gulim, sans-serif;
}

#bg-fixed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	-ms-touch-action: none;
}

#container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background: url(blank.gif)/*tpa=http://www.chanel.com/img/blank.gif*/ repeat 0 0; /* TO SCROLL OVER TRANSPARENT AREA */
	z-index: 50;
	/*-webkit-overflow-scrolling: touch;*/
	-ms-touch-action: none;
}

#offscroll {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(blank.gif)/*tpa=http://www.chanel.com/img/blank.gif*/ repeat 0 0;
	z-index: 80;
	display: none;
}

#media-controller {
	position: absolute;
	bottom: 65px;
	left: 0px;
	z-index: 45;
	/*display: none;*/
	width: 98%;
	margin: 0 1%;
}

#bg-ghost-area { /* TRANSPARENT AREA CORRESPONDANT TO #bg-fixed */
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.no-js #bg-ghost-area {
	margin-top: -60px;
}
.lt-ie8 #bg-fixed, 
.lt-ie8 #bg-ghost-area {
	margin-top: 0px;
    height: expression(document.body.offsetHeight - 60 + "px");
}

#ccpanel-container {
	border-top: 7px solid #000 !important;
}


/* ==========================================================================
   $JSCROLL
   ========================================================================== */
#container .jscroll-content-wrap {
	position: relative;
    height: auto;
    width: 100%;
    visibility: hidden;
}
#container .jscroll-scrollbar{
    position: absolute;
    background: none;
    display: none;
    cursor: pointer;
    z-index: 65;
}
#container .jscroll-scrollbar.vertical{
    width: 7px;
    height: 98%;
    top: 1%;
    left: 100%;
    margin-left: -12px;
    margin-top: 0px;
}
.touch #container .jscroll-scrollbar.vertical{
    opacity: 0;
}
#container .jscroll-handler {
    background: #cccccc;
    position: absolute;
    top: 0;
    left: 0; 
}
#container .jscroll-scrollbar.vertical .jscroll-handler {
    width: 7px;
    height: 50px;
}


/* ==========================================================================
   $SLIDESHOW
   ========================================================================== */
#bg-fixed .slideshow {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#bg-fixed .slideshow .slide {
	display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    list-style-type: none;
	opacity: 0;
    filter: alpha(opacity=0);
    
    border-style: solid;
    border-color: #fff;
    border-width: 0;
    
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	z-index: 1;
}
#bg-fixed .slideshow .video-slide {
	top: 30px;
	bottom: 30px;
}

#bg-fixed .slideshow .slide.active {
	z-index: 2;
}

#bg-fixed .slide.default {
	opacity: 1;
	filter: alpha(opacity=100);
}
.lt-ie8 #bg-fixed .slideshow .slide {
	height: 100%;
}
.ie8 #bg-fixed .slide * { /* IE8 ANIMATE OPACITY BUG : http://bugs.jquery.com/ticket/11188 */
    filter: inherit;
}

.slideshow .slide a {
	position: relative;
    display: block;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   $COVER
   ========================================================================== */
.cover {
	z-index: 10;
	visibility: hidden;
}
.no-js .cover {
	position: absolute;
	visibility: visible;
}
.no-crop {
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
}
.no-js .no-crop {
	top: 0;
	left: 0;
}

.img-fill {
	width: 100%;
	height: auto;
}
.img-width-fixed {
	width: 100%;
	height: auto;
}
.img-height-fixed {
	width: auto;
	height: 100%;
}
.crop-valign-top {
	top: 0;
}
.crop-valign-middle {
	top: 50%;
}
.no-js .crop-valign-middle {
	top: 0;
}
.crop-valign-bottom {
	bottom: 0;
}
.crop-halign-left {
	left: 0;
}
.crop-halign-center {
	left: 50%;
}
.no-js .crop-halign-center {
	left: 0;
}
.crop-halign-right {
	right: 0;
}


/* ==========================================================================
   $VIDEO
   ========================================================================== */
.buffer-video,
.play-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	margin-left: -50px;
	z-index: 20;
}
.play-video {
	display: none;
	background: url(btn_play_white.png)/*tpa=http://www.chanel.com/img/btn_play_white.png*/ no-repeat center center;	
}
.play-video.black {
	background: url(btn_play_black.png)/*tpa=http://www.chanel.com/img/btn_play_black.png*/ no-repeat center center;	
}
.touch .play-video {
	background: url(btn_play_white.png)/*tpa=http://www.chanel.com/img/btn_play_white.png*/ no-repeat center center;	
}
.touch .play-video.black {
	background: url(btn_play_black.png)/*tpa=http://www.chanel.com/img/btn_play_black.png*/ no-repeat center center;	
}
.wrapper-video {
	position: absolute;
	/*top: 0;
	left: 0;
	width: 100%;
	height: 100%;*/
	/*background: #fff;*/
	z-index: 5;
	top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.wrapper-video object.OoyalaVideoPlayer, 
.wrapper-video .OoyalaHtml5VideoPlayer {
	position: absolute;
	/*top: 50%;
	left: 50%;
	width: 1px;
	height: 1px;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.wrapper-video video {
	width: 100%;
	height: 100%	
}

.video-liseret-fix-left {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 2px !important;
	height: 100% !important;
	background: #fff !important;
}
.video-liseret-fix-right {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 2px !important;
	height: 100% !important;
	background: #fff !important;
}
.video-liseret-fix-top {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 2px !important;
	background: #fff !important;
}
.video-liseret-fix-bottom {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 2px !important;
	background: #fff !important;
}

.no-lisere-vertical .video-liseret-fix-top,
.no-lisere-vertical .video-liseret-fix-bottom,
.no-lisere-horizontal .video-liseret-fix-left,
.no-lisere-horizontal .video-liseret-fix-right {
	display: none;
}

.oo_start_button {
	display: none !important;
}


/* ==========================================================================
   $MEDIACONTROLLER
   ========================================================================== */
.sound-button {
	display: inline-block;
	margin: 0 5px;
    width: 20px;
    height: 20px;
    background: url("btn_sound_white.gif")/*tpa=http://www.chanel.com/img/btn_sound_white.gif*/ no-repeat 0 0;
}
.sound-button.black {
    background-image: url("btn_sound_black.gif")/*tpa=http://www.chanel.com/img/btn_sound_black.gif*/;
}
.sound-button.off {
    background-position: 0 -20px;
}
.sound-button:hover {
	background-position: 1px 1px;
}
.sound-button.off:hover {
	background-position: 1px -19px;
}
.tablet .sound-button,
.mobile .sound-button  {
	display: none;
}

.replay-button {
	display: inline-block;
	margin: 0 5px;
    width: 20px;
    height: 20px;
    background: url("btn_replay.png")/*tpa=http://www.chanel.com/img/btn_replay.png*/ no-repeat 0 0;
    visibility: hidden;
}
.replay-button:hover {
    background-position: 1px 1px;
}

.credit-button {
	display: inline-block;
	color: #999;
	font-size: 12px;
	line-height: 20px;
	vertical-align: top;
	margin-left: 10px;
}
.credit {
	display: block;
	color: #999;
	visibility: hidden;
	font-size: 10px;
	line-height: 20px;
	height: 20px;
	margin: -25px 200px 0 200px;
	vertical-align: top;
	overflow: hidden;
	padding: 0 10px;
}
.credit-button:hover + .credit {
	visibility: visible;
}
.mobile .credit-button {
	display: none;	
}
.js-credit {
	white-space: nowrap;
}

/* ==========================================================================
   BOUTON SCROLL
   ========================================================================== */
#btn-scroll {
	position: absolute;
	top: 18px;
	right: 20px;
	color: #4c4c4c;
	font-size: 13px;
	font-weight: 300;
	padding-right: 15px;
	background: url(arrow_top_bottom.gif)/*tpa=http://www.chanel.com/img/arrow_top_bottom.gif*/ no-repeat right 0px;
	visibility: hidden;
}
#btn-scroll:hover {
	color: #000;
}
#btn-scroll.tobottom {
	background-position: right -20px;
}
.ar_ME #btn-scroll {
	left: 10px;
	right: auto;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */
.wrapper-valign-fix {
	display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
    font-size: 0px;
}
/*.valign-fix:after,
.lt-ie8*/ .after {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
    height: 100%;
    content: "";
}
/*.after {
	display: none;
}*/

.mobile-display {
	display: none;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media all and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1px) and (max-width: 640px),
 all and (-o-min-device-pixel-ratio: 3/2) and (min-width: 1px) and (max-width: 640px),
 all and (min--moz-device-pixel-ratio: 1.5) and (min-width: 1px) and (max-width: 640px),
 all and (min-device-pixel-ratio: 1.5) and (min-width: 1px) and (max-width: 640px) {  
  	.recent #btn-scroll {
		background-image: url(arrow_top_bottom@2x.png)/*tpa=http://www.chanel.com/img/arrow_top_bottom@2x.png*/;
		background-size: 13px 40px;
	}
}

/*@media all and (min-width: 361px) and (max-width: 640px) {*/
@media all and (max-width: 640px) {
	.iphone #media-controller {
		visibility: hidden;
		width: 0px;
		height: 0px;
		overflow: hidden;
		opacity: 0;
		clip: rect(0,0,0,0);
		display: none;
	}
	
	#container .jscroll-scrollbar.vertical{
	    width: 5px;
	    margin-left: -10px;
	}
	#container .jscroll-scrollbar.vertical .jscroll-handler {
	    width: 5px;
	}

	.mobile-show {
		display: block;
	}
	
	#btn-scroll {
		position: absolute;
		top: 10px;
		left: 0;
		right: auto;
		width: 100%;
		height: 20px;
		font-size: 0px;
		padding-right: 0px;
		background: url(arrow_top_bottom.png)/*tpa=http://www.chanel.com/img/arrow_top_bottom.png*/ no-repeat center 0;
	}
	#btn-scroll.tobottom {
		background-position: center -20px;
	}
	#btn-scroll span {
		display: none;
	}
	.ar_ME #btn-scroll {
	    left: 0;
	}
}
@media all and (min-width: 641px) and (max-width: 768px) {
	#btn-scroll {
		display: inline-block;
		*display: inline;
		zoom: 1;
		width: 9px;
		height: 20px;
		top: 70px;
		left: 50%;
		right: auto;
		margin-left: -5px;
		font-size: 0px;
		padding-right: 0;
	}
	.touch #btn-scroll.tobottom {
		visibility: hidden;
	}
	#btn-scroll span {
		display: none;
	}
	.ar_ME #btn-scroll {
	    right: 50%;
	    left: auto;
	    margin-left: 0px;
	    margin-right: -5px;
	    top: 65px;
	}
}
@media all and (min-width: 769px) and (max-width: 960px) {
	#btn-scroll {
		display: inline-block;
		*display: inline;
		zoom: 1;
		width: 9px;
		height: 20px;
		top: 70px;
		left: 50%;
		right: auto;
		margin-left: -5px;
		font-size: 0px;
		padding-right: 0;
	}
	.touch #btn-scroll.tobottom {
		visibility: hidden;
	}
	#btn-scroll span {
		display: none;
	}
	.ar_ME #btn-scroll {
	    right: 50%;
	    left: auto;
	    margin-left: 0px;
	    margin-right: -5px;
	    top: 60px;
	}
}
@media all and (min-width: 961px) and (max-width: 1152px) {
	#btn-scroll { 
		top: 19px; 
		font-size: 12px; 
	}
}
@media all and (min-width: 1153px) and (max-width: 1280px) {
	#btn-scroll { 
		top: 19px; 
		font-size: 12px; 
	}

}
@media all and (min-width: 1281px) and (max-width: 1440px) {
	#btn-scroll { 
		top: 19px; 
		font-size: 11px; 
	}
}