/**
 * #.# Responsive Stylesheet
 */


.pw- .secondary { display:none; } /* Gemini 79147 - hide secondary container on mobile, quick fix, no time to look into how it was in previous versions before reskin for comparison as fix required today */


/**
 * Infinite scroll and nav
 * -----------------------------------------------------------------------------
 */
.paged-nav { display:none; }
body div.infinite-loading { clear:both; text-align:center; padding:20px 0; }
body div.infinite-loading img { width:40px; height:40px; margin-bottom:10px; }
body div.infinite-loading .more { text-transform:uppercase; }



/**
 * Common elements - Icon sprites
 * -----------------------------------------------------------------------------
 */
.ui-icon { display:block; background-image:url('../img/icons-sprite.png'); background-repeat:no-repeat; }
.ret-screen .ui-icon { background-image:url('../img/icons-sprite-retina.png'); background-repeat:no-repeat; background-size:500px 500px; }

.icon-video { width:80px; height:80px; background-position:-330px 0px; } /* large video icon */

.icon-more-1 { width:40px; height:40px; background-position:-410px 0px; } /* rounded bordered plus */
.icon-close-1 { width:28px; height:28px; background-position:-192px -150px; } /* rounded bordered 'x' */
.icon-info-1 { width:28px; height:28px; background-position:-192px -178px; } /* rounded bordered 'i' */
.icon-share-1 { width:28px; height:28px; background-position:-192px -206px; } /* rounded bordered arrow */

.icon-arrows-1.prev { width:35px; height:60px; background-position:0px -269px; cursor:pointer; } /* white brackets, turn light grey on hover */
.icon-arrows-1.next { width:35px; height:60px; background-position:-35px -269px; cursor:pointer; } /* white brackets, turn light grey on hover */
.icon-arrows-1.prev:hover { background-position:-70px -269px; }
.icon-arrows-1.next:hover { background-position:-105px -269px; }

.icon-arrows-2.prev { width:40px; height:40px; background-position:-410px -40px; cursor:pointer; } /* round background, 80% opacity */
.icon-arrows-2.next { width:40px; height:40px; background-position:-450px -40px; cursor:pointer; } /* round background, 80% opacity */
.icon-arrows-2.prev:hover { background-position:-410px -80px; }
.icon-arrows-2.next:hover { background-position:-450px -80px; }

.icon-arrows-3.prev { width:35px; height:60px; background-position:-140px -269px; cursor:pointer; } /* dark grey brackets, black on hover */
.icon-arrows-3.next { width:35px; height:60px; background-position:-175px -269px; cursor:pointer; } /* dark grey brackets, black on hover */
.icon-arrows-3.prev:hover { background-position:-210px -269px; }
.icon-arrows-3.next:hover { background-position:-245px -269px; }

.icon-scroll-down-1 { width:100px; height:35px; background-position:0px -234px; } /* white */
.icon-scroll-down-2 { width:100px; height:35px; background-position:-100px -234px; } /* light grey */
.icon-scroll-down-3 { width:100px; height:35px; background-position:-200px -234px; } /* mid grey */
.icon-scroll-down-4 { width:100px; height:35px; background-position:-300px -234px; } /* dark grey */
.icon-scroll-down-5 { width:100px; height:35px; background-position:-400px -234px; } /* black */



/**
 * Temp code for special author article enhancement
 * -----------------------------------------------------------------------------
 */
.temp-mens-open .screen-cover { position:relative; z-index:50; background-position:center; background-repeat:no-repeat; background-size:cover; }
.temp-mens-open .screen-cover .title-box { display:table; width:100%; height:100%; }
.temp-mens-open .screen-cover .title-text { display:table-cell; vertical-align:middle; color:#fff; text-align:center; padding-bottom:110px; }
.temp-mens-open .screen-cover h1 span { display:block; letter-spacing: 0.1em; }
.temp-mens-open .screen-cover h1 em { display:block; margin:0 auto; }
.temp-mens-open .screen-cover h2 { font-size:29px; }

.temp-mens-open .below-cover { background:none; border:none; }

.temp-mens-open .article-meta { clear:both; }
.temp-mens-open .article-meta .icon { float:none; display:inline-block; vertical-align:middle; }
.temp-mens-open .article-meta .text { float:none; display:inline-block; color:#fff; vertical-align:middle; }
@media screen and (max-width:720px) {
	.temp-mens-open .screen-cover { margin:0 -4%; padding:0 8%; }
	.temp-mens-open .screen-cover h1 span { font-size:36px; margin-top:20px; }
	.temp-mens-open .screen-cover h1 em { font-size:20px; }
	.temp-mens-open .screen-cover .scroll-below-cover { display:none; }

	.temp-mens-open .add-to-links { display:block; width:100%; margin:20px auto; }

	.temp-mens-open .guest-author { padding:30px 0; }
	.temp-mens-open .guest-author p { font-size:30px; line-height:32px; }

	.temp-mens-open .primary p { font-size:15px; line-height:21px; margin-bottom:21px; color:#666; }
	.temp-mens-open .primary em { font-size:16px; line-height:18px; }
	.temp-mens-open .primary h3 { font-size:18px; line-height:normal; border-bottom:2px solid #ccc;  display:block; padding:0 0 10px; margin:0 0 10px; }

	.temp-mens-open .primary img.ly-small { display:block; width:50%; height:auto; margin:0 auto; }
}
@media screen and (min-width:721px) {
	.temp-mens-open .screen-cover h1 { width:430px; margin:0 auto; }
	.temp-mens-open .screen-cover .scroll-below-cover { position:absolute; bottom:20px; left:50%; margin-left:-50px; }
	.temp-mens-open .screen-cover h1 span { font-size:65px; }
	.temp-mens-open .screen-cover h1 em { font-size:29px; }

	.temp-mens-open .add-to-links { display:block; width:160px; margin:20px auto; }

	.temp-mens-open .below-cover { padding-top:50px; }

	.temp-mens-open .post { padding:0; }

	.temp-mens-open .guest-author img { float:left; width:70px; height:70px; }
	.temp-mens-open .guest-author p { font-size:16px; line-height:22px; }
	.temp-mens-open .guest-author p.name { width:100px; padding:20px 0 0 20px; }
	.temp-mens-open .guest-author hr { border:none; border-top:1px solid #999; clear:both; margin:20px 0 10px; }

	.temp-mens-open .primary p { font-size:16px; line-height:24px; }
	.temp-mens-open .primary em { font-size:17px; }
	.temp-mens-open .primary h3 { font-size:17px; line-height:24px; color:#000; margin-bottom:0; }
	.temp-mens-open .article-single blockquote p { font-size:22px; }

	.temp-mens-open .article-single li { list-style:none; }
}



/**
 * RC Carousel + Related Product
 * -----------------------------------------------------------------------------
 */
.rc-wrapper-outer { overflow: hidden; position: relative; width: 100%; }
.rc-item { float: left; }

.related-products { position: relative; margin-bottom: 30px; overflow: hidden; }
.related-products h4,
.related-products span { font-size: 13px; }
.related-products .swiper-slide { width: 100%; text-align: center; color: #333; }
.related-products .product-brand,
.related-product .product-brand { letter-spacing: 0.1em; word-break: break-word; text-transform: uppercase; font-weight: normal; }
.related-products .product-title,
.related-product .product-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 23px; }
.related-products .product-price,
.related-product .product-price { display:block; font-size: 13px; letter-spacing: 0.05em; line-height: 24px; }

#related-products .swiper-slide { width:100%; text-decoration: none; }

.single-item-carousel { padding-bottom:50px; }
.single-item-carousel .rc-controls,
.single-item-carousel .rc-prev,
.single-item-carousel .rc-next { display:none; }

@media screen and (max-width:719px) {
	.rc-prev,
	.rc-next { position: absolute; display: block; top: 35%; height: 50px; width: 50px; line-height: 10rem; font-size: 35px; z-index: 3; color: #999; text-align: center; font-family:ico; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; }
	.rc-prev { left: 0; }
	.rc-next { right: 0; }
	.rc-prev:before { content: '\e601'; }
	.rc-next:before { content: '\e602'; }

	.related-products { padding-top: 10px; }
	.related-products img { width: 80% !important; }
}
@media screen and (min-width:720px) {
	.rc-prev,
	.rc-next { display: block; position: absolute; top: 48%; width: 48px; padding: 5px; cursor: pointer; font-family: "ico"; font-size: 45px; text-align: center; color: #999; }
	.rc-prev:hover,
	.rc-next:hover { color: #333; }
	.rc-prev { left: 0; }
	.rc-next { right: 0; }
	.rc-prev:before { content: '\e601'; }
	.rc-next:before { content: '\e602'; }

	.rc-carousel { position: relative; }
	.rc-slide { width: 100%; }
	.rc-slide img { display: block; width: 100%; }
	.ie7 .rc-pagination .rc-page { display: inline; }

	#related-products .swiper-container {}
	#related-products .swiper-slide {}
	#related-products .swiper-slide .title {}
	#related-products .swiper-slide .price {}
	#related-products .swiper-slide img { display: block; margin: 0 auto; width: 282px; }

	.related-product .product-brand { line-height: 17px; }

	.related-products-sm { float:left; overflow:hidden; width:300px; margin-bottom:0; }
	.related-products-sm img { width:250px; height:auto; margin:18px 0; }
}


/**
 * Hero Video
 * -----------------------------------------------------------------------------
 */
.hero-window { padding-bottom:40px; }
.hero-window .gallery-wrapper {}

#hero-gallery .rc-next, #hero-gallery .rc-prev { z-index:1; }

.hero-video .hero-video-icon { position:absolute; width:100%; height:100%; top:0; left:0; z-index:3; background:url('../img/icon-hero-video.png') no-repeat center center; cursor:pointer; }
.hero-video .hero-video-image { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; overflow:hidden; }
.hero-video .hero-video-filter { position:absolute; width:100%; height:100%; top:0; left:0; z-index:1; }
@media screen and (max-width:719px) {
	.hero-box { position:relative; }
	.hero-window iframe { width:100%; height:100%; }
	.hero-video .hero-video-icon { background-size:20%; }
}
@media screen and (min-width:720px) {
	.hero-border { position:relative; }
	.hero-box { float:left; width:980px; margin-bottom: 25px; }
	.hero-window { display:block; width:980px; height:551px; }
	.hero-video .hero-video-image { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; overflow:hidden; }
}



/**
 * Responsive elements
 * -----------------------------------------------------------------------------
 * used to merge deskstop SS with mobile SS
 */
.filter-stick,
.footer-container,
.popup,
.pagination-stick { -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); }
@media screen and (max-width:719px) {
	.pw- { margin:0 4%; clear:both; }
	.fw- { margin-right:-4.347826087%; margin-left:-4.347826087%; }

	a.button { display: block; background-color: #999; color: #fff;  font-size: 16px; letter-spacing: 0.1em; line-height: 50px; text-transform: uppercase; text-align: center; box-sizing: border-box; }

	.add-to-links .button { clear: left; width: 100%; background-color: #fff; border: 1px solid #ccc; color: #666; display: block; float: left; font-size: 14px; height: 52px; line-height: 34px; letter-spacing: 0.1em; margin: 10px 0 15px; padding:8px 0; text-align:center; }

	.footer-container { display: none; }
}
@media screen and (min-width:720px) { }



/**
 * Misc
 * -----------------------------------------------------------------------------
 */
span.text.post-date,
.featured-article .summary .hidden-landing { display:none; }



/**
 * Store amend/fixes
 * -----------------------------------------------------------------------------
 */
.store-en-hk .filter.food { display: none; }



/**
 * Utitlity classes
 * -----------------------------------------------------------------------------
 */
.ly-small {}
.ly-medium {}
.ly-large { display:none; }
@media screen and (min-width:720px) {
	.ly-small { display:none; }
	.ly-medium {}
	.ly-large { display:block; }
}