/******************************************************************************\
	FONTS
\******************************************************************************/
@font-face {
	font-family:'ITC Book';
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01B731069.eot#iefix');
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01B731069.eot#iefix') format('eot'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01B731069.woff') format('woff'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01B731069.ttf') format('truetype'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01B731069.svg#AvantGardeGothicITCW01B731069') format('svg');
}
@font-face {
	font-family:'ITC Demi';
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01D731075.eot#iefix');
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01D731075.eot#iefix') format('eot'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01D731075.woff') format('woff'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01D731075.ttf') format('truetype'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01D731075.svg#AvantGardeGothicITCW01D731075') format('svg');
}
@font-face {
	font-family:'ITC XLight';
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01X.eot#iefix');
	src:url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01X.eot#iefix') format('eot'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01X.woff') format('woff'),url('http://yslexperience.com/or-rouge/assets/fonts/AvantGardeGothicITCW01X.ttf') format('truetype'),url('../fonts/AvantGardeGothicITCW01X.svg') format('svg');
}

.ff-itc-book {
	font-family:'ITC Book', Arial, Helvetica, sans-serif;
}
.ff-itc-demi {
	font-family:'ITC Demi', Arial, Helvetica, sans-serif;
}
.ff-itc-xlight {
	font-family:'ITC XLight', Arial, Helvetica, sans-serif;
}
.ff-times {
	font-family:'Times New Roman', Times, serif;
}

/******************************************************************************\
	SEQUENCE CONTAINER
\******************************************************************************/
.sequence-container {
	width:840px; height:525px;
}
.sequence-mobile .sequence-container {
	width:560px; height:350px;
}

/******************************************************************************\
	SEQUENCE ITEMS
\******************************************************************************/
.sequence-item {
	line-height:1.2;
}
.sequence-item,
.sequence-item p,
.sequence-item h1 {
	margin:0;
}
a.sequence-item {
	outline:none;
	color:#fff;
	text-decoration:none;
}
.sequence-item img[src$='svg'] {
	display:block;
	width:100%; height:100%;
}

/*play buttons*/
.sequence-item-play {
	overflow:hidden;
	width:84px; height:84px;
	background:url(http://yslexperience.com/or-rouge/assets/img/btn-play.svg) no-repeat;
	background-size:contain;
}
.sequence-item-play:hover {
	background-image:url(http://yslexperience.com/or-rouge/assets/img/btn-play-hover.svg);
}
.sequence-item-play span {
	position:absolute; left:-2000px;
	background:url(http://yslexperience.com/or-rouge/assets/img/btn-play-hover.svg) no-repeat;/*for preloading*/
}

/*read more buttons*/
.sequence-item-more {
	position:static;
	display:table;
	margin:0 auto; padding:8px 15px; border:3px solid #fff;
	font-size:12px;
	letter-spacing:normal;
	text-transform:uppercase;
}
.sequence-item-more span:before {
	margin-right:7px;
	font-family:Arial, Helvetica, sans-serif;
	content:'+';
}

/*specific items*/
.sequence-item-logo {
	width:762px; height:135px;
}
.sequence-item-presents {
	color:#b19f8b;
	font-size:24px;
}
.sequence-item-morocco,
.sequence-item-quest {
	font-size:24px;
	letter-spacing:0.125em;
	text-align:center; text-transform:uppercase;
}
.sequence-item-quest > .sequence-item-play {
	position:static;
	display:table;
	margin:0 auto 1em;
}
.sequence-item-saffron,
.sequence-item-glycan {
	font-size:30px;
	letter-spacing:0.1em;
	text-align:center; text-transform:uppercase;
}
.sequence-item-saffron-gift {
	display:block;
	margin:0.8em 0;
	color:#e59f25;
}
.sequence-item-research {
	font-size:24px;
	line-height:1;
	text-align:center; text-transform:uppercase;
}
.sequence-item-research > .ff-times {
	font-size:2.92em;
}
.sequence-item-research > .sequence-item-play {
	position:static;
	display:table;
	margin:1em auto 0;
}
.sequence-item-glycan-name {
	color:#73090d;
}
.sequence-item-glycan > .sequence-item-more,
.sequence-item-textures > .sequence-item-more {
	margin-top:2em;
}
.sequence-item-process {
	font-size:14px;
	letter-spacing:0.07em;
	text-align:center; text-transform:uppercase;
}
.sequence-item-textures {
	color:#f3d2b1;
	font-size:28px;
	letter-spacing:0.07em;
	text-align:center; text-transform:uppercase;
}
.sequence-item-or-rouge {
	font-size:72px; font-weight:normal;
	letter-spacing:0.08em;
	text-transform:uppercase;
}
.sequence-item-or-rouge-sub {
	font-size:24px;
	letter-spacing:0.08em;
	text-align:center; text-transform:uppercase;
}
.sequence-item-or-rouge-logo {
	width:300px; height:355px;
}
.sequence-item-or-rouge-logo img {
	position:static;
	display:block;
	width:100%; height:100%;
}
.sequence-item-quote {
	font-size:18px;
}
.sequence-item-quote > p:before {
	display:block;
	color:#d67a0a;
	font-family:'Times New Roman', Times, serif; font-size:90px;
	line-height:1;
	content:'“';
}
.sequence-item-quote > p {
	line-height:1.67;
}
.sequence-item-quote > cite {
	display:block;
	margin-top:1em;
	color:#d67a0a;
	font-size:0.78em; font-style:normal;
	text-transform:uppercase;
}
.sequence-item-quote > .sequence-item-more {
	margin:3em 0 0;
}

/******************************************************************************\
	SEQUENCE FOOTER
\******************************************************************************/
.sequence-footer {
	position:absolute; bottom:0; left:0; z-index:11;
	overflow:hidden;
	width:100%; height:0;
}
.sequence-footer-wrapper {
	padding:80px 10px;
	background:rgba(0, 0, 0, 0.9);
}
.sequence-footer-content {
	margin:0 auto;
	display:table;
}
.sequence-footer-shop,
.sequence-footer-code {
	display:table-cell;
	margin:0; padding:0;
	width:47.5%;
	vertical-align:middle;
}
.sequence-footer-or {
	display:table-cell;
	width:5%;
	vertical-align:middle;
}
.sequence-footer-shop {
	padding-right:100px;
}
.sequence-footer-code {
	padding-left:100px;
}
.sequence-footer-shop-link {
	display:block;
	color:#d4ac3d;
	font-size:40px;
	text-align:center; text-decoration:none; text-transform:uppercase;
}
.sequence-footer-shop-link:hover,
.sequence-footer-shop-link:focus {
	color:#fff;
}
.sequence-footer-or-inner {
	position:relative;
	display:block;
	height:100%;
	text-align:center; text-transform:uppercase;
}
.sequence-footer-or-inner:before,
.sequence-footer-or-inner:after {
	position:absolute; left:50%;
	width:1px; height:300%;
	background:#4f4f4f;
	content:'';
}
.sequence-footer-or-inner:before { top:-350%; }
.sequence-footer-or-inner:after { top:150%; }
.sequence-footer-code label {
	display:block;
	padding-bottom:1em;
	font-size:14px;
	text-align:center; text-transform:uppercase;
}
.sequence-footer-code input {
	display:block;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:0;
	margin:0 0 10px; padding:10px; border:none;
	width:100%;
	background:#fff; color:#000;
	font-size:20px;
}
.sequence-footer-btn button {
	display:block;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0; padding:7px 10px; border:none;
	background:#000; color:#fff;
	width:100%;
	cursor:pointer;
	font-size:18px;
	line-height:1.5;
	text-align:center; text-transform:uppercase;
}
.sequence-footer-btn button::-moz-focus-inner {
	border:none;
}
.sequence-footer-btn button:hover,
.sequence-footer-btn button:focus {
	background:#333;
}
.sequence-mask {
	position:absolute; top:0; left:0; z-index:10;
	width:100%; height:100%;
	background:#000;
	opacity:0;
}

/******************************************************************************\
	POPINS
\******************************************************************************/
.popin-wrapper {
	position:absolute; top:0; left:0; z-index:15;
}
.popin-mask {
	background:#000;
	opacity:0.92;
}
.popin {
	position:absolute; top:0; left:0; z-index:16;
	border:5px solid #fff;
	outline:none;
	background:#000;
	max-width:860px;
}
.popin-header {
	position:relative;
}
.popin-close {
	position:absolute; top:10px; right:10px; z-index:1;
	overflow:hidden;
	margin:0;
	width:30px; height:30px;
	background:#000 url(http://yslexperience.com/or-rouge/assets/img/popin-close.png) no-repeat;
}
.popin-close span {
	opacity:0;
}
.popin-close:hover,
.popin-close:focus {
	background-position:0 -30px;
}
.popin-core-scrollable {
	position:relative;
	overflow-y:hidden;
}
.popin-core-scrollbar {
	position:absolute; top:0; right:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:3px;
	height:200px;
}
.popin-core-scrollbar-face {
	border-radius:3px;
	width:6px; height:100%;
	background:rgba(255, 255, 255, 0.5);
}
.popin-core-wrapper {
	font-size:12px;
}
.popin-core-inner {
	display:table;
}
.popin-core p {
	margin:0 0 1em;
}
.popin-core a {
	color:#fff;
	text-decoration:underline;
}
.popin-core a:hover,
.popin-core a:focus {
	text-decoration:none;
}
.popin-youtube-iframe {
	display:block;
	border:none;
	width:100%;
}
.popin-visual {
	display:table-cell;
	width:352px;
	vertical-align:top;
}
.popin-text {
	display:table-cell;
	padding:0 30px;
	vertical-align:middle;
}
.popin-title {
	margin:0 0 1em;
	font-size:24px; font-weight:normal;
	letter-spacing:0.125em;
	text-transform:uppercase;
}
#popin-video {
	max-width:none;
}
#popin-video .popin-header {
	padding:0 60px 15px 30px;
}
#popin-video .popin-title {
	margin-bottom:0;
}
#popin-video .popin-close {
	top:10px; right:30px; left:auto;
}
#popin-video .popin-core-wrapper {
	padding-bottom:0;
}
#popin-video .popin-core-inner {
	display:block;
}


.sequence-item-presents.sequence-item.ff-itc-xlight:after {
    background: url("http://yslexperience.com/or-rouge/assets/img/scroll-down.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    color: #FFD700;
    content: " ";
    display: block;
    font-size: 28px;
    height: 39px;
    margin: 0.5em auto;
    position: absolute;
    transform: scale(1, 0.7);
    width: 88px;
}