/********************************************/
/*	common.css
/*
/*  latest update: 10/07/2015
/*******************************************/
@import 'reset';
@import 'vars';
@import 'mixin';
@import 'fontface';

/********************/
/* ===[ COMMON ]=== */
/********************/
*::-webkit-selection { background: $red; color: $white; text-shadow: none; }
::-moz-selection { background: $red; color: $white; text-shadow: none; }
::selection { background: $red; color: $white; text-shadow: none; }

[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;

	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;

	/* you can be more comfortable with increased icons size */
	/* font-size: 120%; */

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

/********************/
/* ===[ LAYOUT ]=== */
/********************/
html {
	font-smooth:always; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; height: 100%;
	&.noscroll {
		overflow: initial; height: 100%;
		body {
			overflow: hidden; height: 100%;
		}
	}
	body {
		background: $white; color: $black; font: 75%/1.3em 'bebas_neueregular', Arial, sans-serif; font-smooth:always; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; height: 100%;
		.loading {
			position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); z-index: 99; display: none;
		}
		&.teaser {
			.cover {
				background: url(../../static/gfx/bkg/cover.jpg) center center no-repeat; @include crossproperty('background-size', 'cover'); height: 100%; position: relative; top: 0; min-height: 490px; @include opacity(0); @include transition(opacity .5s $default-transition-easing);
				&:after {
					position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../../static/gfx/img/cover.png) center center no-repeat; content: " "; display: block; @include crossproperty('background-size', 'contain');
				}
				&.show {
					@include opacity(1);
				}
				&.video {
					overflow: hidden;
					&:after {
						display: none;
					}
					iframe {
						display: block; height: 100%; position: absolute; top: 50%; left: 50%; border: none;
					}
				}
			}
			.cta-go {
				background: $white url(../../static/gfx/bkg/cta-go.gif) center bottom no-repeat; height: 185px; margin: 0; @include crossproperty('box-shadow', 'inset 0px 6px 102px -18px rgba(145, 145, 145, 0.86)');
				a {
					display: block; height: 100%; width: 100%; text-align: center; text-transform: uppercase; text-decoration: none; color: $black; font-size: 3.25em; line-height: 1em; position: relative; @include crossproperty('box-shadow', 'inset 0px 6px 6px 0px rgba(50, 50, 50, 0.55)');
					em {
						font-style: normal; position: absolute; width: 100%; left: 0; top: 50%; @include crossproperty('transform', 'translateY(-50%)');
						span {
							display: block; font-size: 1.33em; line-height: .8em; color: $red;
						}
					}
				}
			}
			.register {
				overflow: hidden; margin: 0 0 45px;
				.wrapper {
					width: 1000px; position: relative; margin: 0 auto;
					.banner {
						display: inline; float: left; position: absolute; left: 0; top: 0; width: 642px; height: 767px; background: url(../../static/gfx/bkg/banner.png) center center no-repeat;
					}
					aside {
						display: inline; float: right; width: 500px; height: 780px; position: relative; z-index: 2;
						.form {
							h2 {
								text-transform: uppercase; font-size: 3.25em; font-weight: normal; line-height: 1em; text-align: center; letter-spacing: -0.5px; background: url(../../static/gfx/bkg/form-divisor.png) center bottom no-repeat; padding: 0 0 30px;
							}
							form {
								fieldset {
									border: none;
									legend {
										display: none;
									}
									.row {
										display: block; margin: 0 0 7px;
										label {
											display: block; text-align: center; text-transform: uppercase; font-size: 2.25em; line-height: 2.07em;
										}
										input {
											&[type="text"],
											&[type="email"] {
												display: block; background: #eee; width: 304px; height: 25px; border: none; border-top: 1px #666 solid; text-align: center; font-family: reklame_scriptmedium; font-size: 2.05em; line-height: 1.3em; padding: 12px 0 13px; color: #666; @include transition(color .5s $default-transition-easing); @include allrounded(6px); margin: 0 auto; @include crossproperty('box-shadow', 'inset 0 1px 0 rgba(255, 255, 255, 0.86)');
												&:focus {
													color: #333;
												}
											}
											&[type="submit"] {
												width: 142px; height: 49px; line-height: 49px; background: $black; color: $white; border: none; text-transform: uppercase; margin: 0 auto; padding: 0; display: block; font-size: 2.16em; @include transition(background-color .5s $default-transition-easing);
												&:hover {
													background: $red;
												}
											}
											&:focus {
												outline: none;
											}
										}
										.fieldWrap {
											position: relative; display: block;
											.select {
												display: block; background: #eee; position: absolute; top: 0; left: 50%; width: 304px; height: 25px; border: none; border-top: 1px #666 solid; text-align: center; font-family: reklame_scriptmedium; font-size: 2.05em; line-height: 1.3em; padding: 12px 0 13px; color: #666; @include transition(color .5s $default-transition-easing); @include allrounded(6px); margin: 0 auto; @include crossproperty('box-shadow', 'inset 0 1px 0 rgba(255, 255, 255, 0.86)'); @include crossproperty('transform', 'translateX(-50%)');
												&:after {
													position: absolute; top: 50%; right: 23px; border-style: solid; display: block; border-width: 9px 9px 0 9px; border-color: $red transparent transparent transparent; content: " "; width: 0; height: 0; @include crossproperty('transform', 'translateY(-50%)');
												}
											}
											select {
												display: block; background: #eee; position: relative; z-index: 2; @include opacity(0); width: 304px; height: 49px; border: none; border-top: 1px #666 solid; text-align: center; font-family: reklame_scriptmedium; font-size: 2.05em; line-height: 1.3em; padding: 13px 0 14px; color: #666; @include transition(color .5s $default-transition-easing); @include allrounded(6px); margin: 0 auto; @include crossproperty('box-shadow', 'inset 0 1px 0 rgba(255, 255, 255, 0.86)');
											}
										}
										&.row-radio {
											width: 284px; height: 25px; margin: 25px auto 25px; padding: 0 0 65px 40px; position: relative;
											&:after {
												display: block; content: " "; position: absolute; bottom: 0; left: 50%; width: 454px; height: 10px; @include crossproperty('transform', 'translateX(-50%)'); background: $white url(../../static/gfx/bkg/form-divisor.png) center bottom no-repeat; @include crossproperty('background-size', 'contain');
											}
											p {
												display: inline; float: left; margin: 0;
												.fieldWrap {
													width: 25px; height: 25px; display: inline; float: left; margin: 0 10px 0 0;
													input {
														width: 25px; height: 25px; position: absolute; top: 0; left: 0; z-index: 0; @include opacity(0);
													}
													.radio {
														display: block; width: 25px; height: 24px; background: #999; @include allrounded(100%); border-top: 1px #666 solid;
														&.selected {
															&:after {
																position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: $white; display: block; content: " "; @include allrounded(100%); border-bottom: 1px #666 solid; @include crossproperty('transform', 'translateX(-50%) translateY(-50%)');
															}
														}
													}
												}
												label {
													display: inline; float: left; text-align: left; font-size: 1.6em; line-height: 1.25em; width: 95px;
												}
											}
										}
										&.row-privacy {
											width: 304px; margin: 0 auto 82px;
											a {
												display: block; text-align: center; color: $black; font-family: latoregular; font-size: 1.16em; line-height: 1em; margin: 0 0 16px;
												&:hover {
													text-decoration: none;
												}
											}
											.fieldWrap {
												display: inline; float: left; width: 40px; height: 40px; position: relative;
												input {
													width: 25px; height: 25px; position: absolute; top: 0; left: 0; z-index: 2; @include opacity(0);
												}
												.checkbox {
													display: block; width: 23px; height: 23px; position: relative; background: $white; border: 1px #e7e7e7 solid; border-top: 1px #666 solid; @include crossproperty('box-shadow', 'inset 0 1px 0 rgba(231, 231, 231, 1)');
													&.selected {
														&:before {
															content: '\e800'; color: $red; margin: 0; padding: 0; font-size: 1.5em; position: absolute; top: 50%; left: 50%; width: 100%; @include crossproperty('transform', 'translateX(-50%) translateY(-50%)');
														}
													}
												}
											}
											label {
												font-size: 1.16em; line-height: 1.1em; font-family: latoregular; text-transform: none; text-align: left; display: inline; float: left; width: 264px;
											}
										}
									}
								}
							}
						}
						.registered {
							text-align: center; position: absolute; top: 0; left: 0; width: 100%; display: none;
							h2 {
								text-transform: uppercase; font-size: 7.5em; line-height: .8em; color: $red; margin: 0; padding: 40px 0 0; font-weight: normal;
							}
							h3 {
								text-transform: uppercase; font-size: 3.8em; line-height: .8em; margin: 0 0 33px; font-weight: normal;
								span {
									font-size: .84em; display: block;
								}
							}
							.intro {
								font-size: 1.5em; line-height: 1.33em; font-family: latoregular; margin: 0 0 40px;
							}
							.go-to-code {
								font-size: 3.3em; line-height: 1em; margin: 0 0 20px;
							}
							.code {
								font-size: 3.83em; font-family: reklame_scriptmedium; height: 104px; line-height: 104px; color: $red; background: url(../../static/gfx/bkg/code-shadow.png) center center no-repeat; margin: 0 0 40px;
							}
							.hint {
								font-size: 1.16em; line-height: 1.6em; font-family: latoregular; margin: 0;
								span {
									color: $red;
								}
							}
						}
					}
				}
			}
		}
		header {
			&#sp {
				position: fixed; top: 0; left: 0; z-index: 10; width: 100%;
				.wrapper {
					h1 {
						margin: 0;
					}
					nav {
						ul {
							li {
								a {
									&.active {
										color: $red;
									}
								}
								&.wallpaper {
									display: none;
								}
							}
						}
					}
				}
			}
		}
		.body {
			width: 100%; height: 100%; margin: 130px 0 0; position: relative; @include crossproperty('perspective', '1000px'); @include transition(height .3s $default-transition-easing); z-index: 2;
			section {
				width: 100%; position: absolute; top: 0; @include crossproperty('transform', 'translate3d(0, 0, 100px)'); @include opacity(0);
				&.show {
					@include crossproperty('transform', 'translate3d(0, 0, 0)'); top: 0; @include opacity(1); @include transition(opacity .5s $default-transition-easing, transform .5s $default-transition-easing, top .5s $default-transition-easing);
				}
				&.hide {
					@include crossproperty('transform', 'translate3d(0, 0, -100px)'); @include opacity(0); @include transition(opacity .1s $default-transition-easing, transform .1s $default-transition-easing, top .1s $default-transition-easing); top: 0; position: absolute !important;
				}
				&.shop-by-look {
					overflow: hidden; width: 100%; height: 100%;
					.scroller {
						.content {
							position: absolute; left: 0; width: 100%; @include transition(left 1s $default-transition-easing);
							&.hide {
								left: -100%;
							}
							.filter {
								ul {
									position: relative; top: 0; left: 50%; margin: 0 0 30px; padding: 0; display: inline; float: left;
									li {
										position: relative; right: 50%; display: inline; float: left; margin: 0 20px;
										a {
											text-decoration: none;
											&.active {
												text-decoration: underline;
											}
										}
									}
								}
							}
							.grid {
								.square {
									display: inline; float: left; overflow: hidden; width: 200px; height: 300px; background: #eee; position: relative; @include opacity(0); @include crossproperty('transform', 'translate3d(0, 35px, 0)');
									&.enter {
										@include opacity(1); @include crossproperty('transform', 'translate3d(0, 0, 0)');
									}
									.detail {
										display: block; width: 100%; height: 100%; position: relative; z-index: 1;
									}
									.items {
										position: absolute; top: 50%; left: 50%; width: 180px; padding: 0; margin: 0; z-index: 2; @include crossproperty('transform', 'translateX(-50%) translateY(-50%)');
										li {
											display: block; height: 40px; background: $white; @include opacity(0); @include transition(opacity .5s $default-transition-easing, transform .5s $default-transition-easing, top .5s $default-transition-easing); @include crossproperty('transform', 'rotateX(90deg)'); @include crossproperty('transform-origin', '0 0');
											&:nth-child(1) {
												@include crossproperty('transition-delay', .4s );
											}
											&:nth-child(2) {
												@include crossproperty('transition-delay', .3s );
											}
											&:nth-child(3) {
												@include crossproperty('transition-delay', .2s );
											}
											&:nth-child(4) {
												@include crossproperty('transition-delay', .1s );
											}
											a {
												display: block; width: 100%; height: 100%; position: relative; text-decoration: none;
												span {
													&.buy {
														text-decoration: underline;
													}
												}
											}
										}
									}
									&:hover {
										.items {
											@include opacity(1);
											li {
												@include opacity(1); @include crossproperty('transform', 'rotateX(0deg)');
												&:nth-child(1) {
													@include crossproperty('transition-delay', '0 !important' );
												}
												&:nth-child(2) {
													@include crossproperty('transition-delay', .1s );
												}
												&:nth-child(3) {
													@include crossproperty('transition-delay', .2s );
												}
												&:nth-child(4) {
													@include crossproperty('transition-delay', .3s );
												}
											}
										}
									}
								}
							}
						}
						.look-detail {
							position: absolute; top: 0; left: 100%; width: 100%; @include transition(left 1s $default-transition-easing);
							&.show {
								left: 0;
							}
							.look-detail-wrapper {
								.basic-infos {
									h3 {
										color: $red;
									}
									.gender {
										li {
											@include opacity(.5);
											&.selected {
												color: $red; @include opacity(1);
											}
										}
									}
								}
								.look-image {
									height: 600px;
									.look-wrapper {
										width: 600px; height: 480px; margin: 0 auto; position: relative; background: #ccc;
										.slider {
											height: 100% !important; position: relative; overflow: hidden; background: #333;
											.handle {
												position: absolute; top: 0; left: 0; width: 100%; height: 100%; @include crossproperty('perspective', 'none !important');

												article {
													display: inline; float: left; overflow: hidden; width: 100%; height: 100%; position: relative; overflow: hidden;

													iframe {
														border: none;
													}
													.content {
														position: relative; left: 0; width: 100%; position: absolute; top: 50%; z-index: 2; margin: -170px 0 0;
														h2 {
															font-size: 1.5em; line-height: 1.55em; width: 55%; height: 4.8em; @include crossproperty('transition-delay', .5s); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing); @include opacity(0); font-weight: normal; text-transform: none; z-index: 10; text-align: center; margin: 0 auto 4em; padding: 0;
														}
													}
													&.from-right {
														.content {
															h2 {
																@include crossproperty('transform', 'translateZ(0) translateX(350px)');
															}
														}
													}
													&.from-left {
														.content {
															h2 {
																@include crossproperty('transform', 'translateZ(0) translateX(-350px)');
															}
														}
													}
													&.selected {
														.background {
															img {
																@include crossproperty('transform', 'translate3d(0, 0, 0)'); @include transition(transform 3s $default-transition-easing, opacity 2.5s $default-transition-easing);
																&.enter {
																	@include opacity(1);
																}
															}
														}
														.content {
															h2 {
																@include opacity(1); @include crossproperty('transform', 'translateZ(0) translateX(0)');
															}
														}
													}
												}
											}
										}
										.pager {
											position: absolute; bottom: 70px; left: 50%; display: inline; float: left; margin: 0; z-index: 21;
											&.hidden {
												@include opacity(0); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing);
											}
											li {
												display: inline; float: left; margin: 0 8px; position: relative; right: 50%; width: 12px; height: 12px; list-style: none;
												a {
													display: block; width: 14px; height: 14px; position: relative; font-size: 0; line-height: 0; text-decoration: none; @include crossproperty('transform-style', 'preserve-3d');
													&:after {
														content: " "; display: block; z-index: 20; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; @include allrounded(50%); background: #e1e1e1; @include crossproperty('transform', 'translate3d(0, 0, 0) scale(.33)'); @include crossproperty('transform-style', 'preserve-3d'); @include transition(background .5s $default-transition-easing, transform .5s $default-transition-easing); font-size: 0; line-height: 0;
													}
													&:hover {
														&:after {
															background: $white;
														}
													}
													&.active {
														&:after {
															background: $white; @include crossproperty('transform', 'translate3d(0, 0, 0) scale(1)');
														}
													}
												}
											}
										}
										.arrows {
											z-index: 20; margin: 0;
											&.hidden {
												@include opacity(0); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing);
											}
											li {
												position: absolute; top: 0; width: 10%; height: 100%; z-index: 20; list-style: none;
												&.prev {
													left: 0;
												}
												&.next {
													right: 0;
												}
												a {
													display: block; width: 100%; height: 100%;
													svg {
														fill: $white; @include transition(fill .5s $default-transition-easing);
													}
													&:hover {
														svg {
															fill: $red;
														}
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
				&.shop-by-items {
					.scroller {
						.content {
							.filter {
								ul {
									position: relative; top: 0; left: 50%; margin: 0 0 30px; padding: 0; display: inline; float: left;
									li {
										position: relative; right: 50%; display: inline; float: left; margin: 0 20px;
										a {
											text-decoration: none;
											&.active {
												text-decoration: underline;
											}
										}
									}
								}
							}
							.grid {
								.square {
									display: inline; float: left; overflow: hidden; width: 200px; height: 300px; background: #eee; position: relative; @include opacity(0); @include crossproperty('transform', 'translate3d(0, 35px, 0)');
									&.enter {
										@include opacity(1); @include crossproperty('transform', 'translate3d(0, 0, 0)');
									}
									.quick-buy {
										display: block; width: 100%; height: 100%; position: relative; z-index: 1;
									}
								}
							}
						}
					}
				}
				&.fashion {
					.scroller {
						.content {
							height: 500px;
							.slider {
								height: 100% !important; position: relative; overflow: hidden; background: #333;
								.handle {
									position: absolute; top: 0; left: 0; width: 100%; height: 100%; @include crossproperty('perspective', 'none !important');

									article {
										display: inline; float: left; width: 100%; height: 100%; position: relative; overflow: hidden;

										iframe {
											border: none;
										}
										.content {
											position: relative; left: 0; width: 100%; position: absolute; top: 50%; z-index: 2; margin: -170px 0 0;
											h2 {
												font-size: 1.5em; line-height: 1.55em; width: 55%; height: 4.8em; @include crossproperty('transition-delay', .5s); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing); @include opacity(0); font-weight: normal; text-transform: none; z-index: 10; text-align: center; margin: 0 auto 4em; padding: 0;
											}
										}
										&.from-right {
											.content {
												h2 {
													@include crossproperty('transform', 'translateZ(0) translateX(350px)');
												}
											}
										}
										&.from-left {
											.content {
												h2 {
													@include crossproperty('transform', 'translateZ(0) translateX(-350px)');
												}
											}
										}
										&.selected {
											.background {
												img {
													@include crossproperty('transform', 'translate3d(0, 0, 0)'); @include transition(transform 3s $default-transition-easing, opacity 2.5s $default-transition-easing);
													&.enter {
														@include opacity(1);
													}
												}
											}
											.content {
												h2 {
													@include opacity(1); @include crossproperty('transform', 'translateZ(0) translateX(0)');
												}
											}
										}
									}
								}
							}
							.pager {
								position: absolute; bottom: 70px; left: 50%; display: inline; float: left; z-index: 21;
								&.hidden {
									@include opacity(0); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing);
								}
								li {
									display: inline; float: left; margin: 0 8px; position: relative; right: 50%; width: 12px; height: 12px; list-style: none;
									a {
										display: block; width: 14px; height: 14px; position: relative; font-size: 0; line-height: 0; text-decoration: none; @include crossproperty('transform-style', 'preserve-3d');
										&:after {
											content: " "; display: block; z-index: 20; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; @include allrounded(50%); background: #e1e1e1; @include crossproperty('transform', 'translate3d(0, 0, 0) scale(.33)'); @include crossproperty('transform-style', 'preserve-3d'); @include transition(background .5s $default-transition-easing, transform .5s $default-transition-easing); font-size: 0; line-height: 0;
										}
										&:hover {
											&:after {
												background: $white;
											}
										}
										&.active {
											&:after {
												background: $white; @include crossproperty('transform', 'translate3d(0, 0, 0) scale(1)');
											}
										}
									}
								}
							}
							.arrows {
								z-index: 20;
								&.hidden {
									@include opacity(0); @include transition(opacity 1.5s $default-transition-easing, transform 1.5s $default-transition-easing);
								}
								li {
									position: absolute; top: 0; width: 10%; height: 100%; z-index: 20;
									&.prev {
										left: 0;
									}
									&.next {
										right: 0;
									}
									a {
										display: block; width: 100%; height: 100%;
										svg {
											fill: $white; @include transition(fill .5s $default-transition-easing);
										}
										&:hover {
											svg {
												fill: $red;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		.back-top {
			display: block; margin: 0 0 52px;
			a {
				display: block; text-decoration: none; color: $black; text-transform: uppercase; text-align: center; font-size: 3em; line-height: 1em; background: $white url(../../static/gfx/bkg/back-top.png) center 5px no-repeat; padding: 35px 0 0; @include transition(background .5s $default-transition-easing);
				&:hover {
					background-position: center top;
				}
			}
		}
		footer {
			&#siteFooter {
				#footerBottom {
					&.footerExperience {
						display: block;
					}
				}
			}
		}

		img {
			&[data-action="preload"] {
				@include opacity(0); @include transition(opacity .5s $default-transition-easing);
				&.show {
					@include opacity(1);
				}
			}
		}

		.quick-buy-ovl {
			position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;
			.btn-close {
				position: absolute; top: 10px; right: 10px; z-index: 999;
			}
			.layer {
				position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .7); @include opacity(0); @include transition(opacity .5s $default-transition-easing);
			}
			iframe {
				position: fixed; top: 50%; left: 50%; width: 900px; height: 400px; border: none; @include crossproperty('transform', 'translateX(-50%) translateY(-50%)'); @include opacity(0); @include transition(opacity .5s $default-transition-easing);
			}
			&.show {
				.layer,
				iframe {
					@include opacity(1);
				}
			}
		}
	}
}

/**************************/
/* ===[ MEDIAQUERIES ]=== */
/**************************/
@media only screen and (max-width: 1680px),
only screen and (max-device-width: 1680px) {

}

@media only screen and (max-width: 1280px),
only screen and (max-device-width: 1280px) {

}

@media only screen and (max-width: 1024px),
only screen and (max-device-width: 1024px) {

}

@media only screen and (max-width: 768px),
only screen and (max-device-width: 768px) {

}

@media only screen and (max-width: 767px),
only screen and (max-device-width: 767px) {

}