/*******************************
	Last Updated: 2016-01-24
*******************************/
/*******************************
	Desktop
*******************************/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	outline: none;
	-webkit-font-smoothing: antialiased;
}

ol,ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
}
body {
	width: 100%;
	height: 100%;
	min-width: 320px;
	min-height: 100%;
	background: #fff;
	font-family: 'Helvetica Neue', 'Pingfang SC', 'Lantinghei SC', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 140%;
	color: #333;
}


#wrapper {
	width: 100%;
	height: 100%;
}

#content {
	width: 100%;
	height: auto; /* parallax requires 'auto' here */
}
#content:after {
	clear: both;
	content: '';
	display: block;
	width: 128px;
	height: 2px;
	background: #ccc;
	margin: 40px auto 0;
}





#cover {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	/* fixes Safari performance issue */
	webkit-backface-visibility: hidden; 
	-moz-backface-visibility: hidden;
}

#cover #title {
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 8%;
	width: 100%;
	text-align: center;
	/* fixes Safari performance issue */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
#cover #title h1 {
	visibility: hidden;
}

.headline {
	width: 100%;

}
.headline img {
	width: 100%;
	max-width: 600px;
}

.meta {
	width: 100%;
	text-align: center;
}
.meta .byline {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
}
.meta .pubdate {
	font-size: 12px;
}
.summary {
	max-width: 540px;
	text-align: justify;
	margin: 20px auto 0;
}

.share {
	clear: both;
	
	height: 24px;
	margin: 40px auto 0;
	display: block;
}
.share a {
	display: inline-block;
	height: 24px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: 0 0;
	opacity: 0.6;
	transition: all .2s ease-in-out;
}
.share a:hover {
	opacity: 1;
}
.share a.twitter {
	width: 28px;
	background-size: 28px 24px;
	background-image: url('./share_twitter.svg');
}
.share a.facebook {
	width: 22px;
	background-size: 22px 22px;
	background-image: url('./share_facebook.svg');
}




video.cover-video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(polina.jpg) no-repeat;
	background-size: cover;
}

#content {
	clear: both;
	margin-top: 40px;
}

.article {
	max-width: 720px;
	margin: 0 auto;
	overflow: hidden;
}
.article p {
	text-align: justify;
	margin-bottom: 20px;
}

.separator:before {
	content: '';
	display: block;
	width: 100%;
	max-width: 128px;
	height: 2px;
	background: #ccc;
	margin: 10px auto 40px;
}

.sub-title {
	clear: both;
	overflow: hidden;
	width: 100%;
	max-width: 720px;
	margin: 20px auto 20px;
	position: relative;
	height: 260px;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: 100%;
	border-radius: 12px;
}

img.sub-title-txt {
	width: auto;
	position: absolute;
	right: 60%;
	bottom: 20%;
	transition: .2s all ease;
}

#lok-ma-chou {
	background-image: url('./map-lmc.jpg');
}
#sha-tau-kok {
	background-image: url('./map-stk.jpg');
}
#lin-ma-hang {
	background-image: url('./map-lmh.jpg');
}

.sub-title h3 {
	visibility: hidden;
}
.sub-title .txt {
	font-size: 12px;
	font-weight: 300;
	color: #666;
	text-shadow: 0 0 1px #fff;
	position: absolute;
}
.sub-title .dot {
	position: absolute;
	width: 8px;
	height: 8px;
	display: block;
	border-radius: 50%;
	background-color: #f24055;
}
.sub-title .ico-hk {
	width: 16px;
	height: 16px;
	background: transparent url('./hksar.svg');
}
#lok-ma-chou .dot-ft {
	left: 490px;
	top: 86px;
}
#lok-ma-chou .ico-hk {
	left: 514px;
	bottom: 64px;
}
#lok-ma-chou .txt-ft {
	left: 502px;
	top: 78.5px;
}
#lok-ma-chou .txt-lmc {
	left: 532px;
	bottom: 61.5px;
}
#sha-tau-kok .dot-stk {
	left: 466px;
	top: 62.5px;
}
#sha-tau-kok .txt-stk {
	left: 478px;
	top: 56px;
}
#sha-tau-kok .dot-str {
	left: 524px;
	top: 134.5px;
}
#sha-tau-kok .txt-str {
	left: 536px;
	top: 128px;
}
#sha-tau-kok .ico-hk {
	left: 512px;
	bottom: 25px;
}
#sha-tau-kok .txt-sea {
	left: 530px;
	bottom: 21.55px;
}
#lin-ma-hang .dot-hm {
	left: 424px;
	top: 30.5px;
}
#lin-ma-hang .txt-hm {
	left: 436px;
	top: 24px;
}
#lin-ma-hang .ico-hk {
	left: 490px;
	bottom: 25.5px;
}
#lin-ma-hang .txt-lmh {
	left: 508px;
	bottom: 22px;
}


video.span-video {
	width: 100%;
	max-width: 720px;
	margin-bottom: 20px;
	border-radius: 8px;
}

figure.span-photo,
figure.twin-photo {
	clear: both;
	width: 100%;
	max-width: 1440px;
	margin: 20px auto;
}
figure.twin-photo {
	overflow: hidden;
}
figcaption {
	width: 100%;
	font-size: 12px;
	text-align: center;
	margin-top: 5px;
	color: #666;
}

figure.twin-photo .twin-left {
	float: left;
	width: 50%;
	max-width: 700px;
}
figure.twin-photo .twin-right {
	float: right;
	width: 50%;
	max-width: 700px;
}

.ratio-box {
	position: relative;
	height: 0;
	overflow: hidden;
	border-radius: 10px;
	padding-bottom: 66.66%;
	background-color: #f8f8f8;
}

.ratio-box:before {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
	background-image: url('./loading.svg');
	background-size: 64px 64px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	opacity: 0.5;
	-webkit-animation: spin 2s infinite;
	animation: spin 2s infinite;
	zoom: 0.8;
}
@-webkit-keyframes spin {
    0%   {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

.ratio-box img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 8px;
}

.lazy {
	opacity: 0;
	transition: opacity .5s ease;
	-webkit-transition: opacity .5s ease-in-out;
}


/*	ALBUM	*/

ul.album {
	overflow: hidden;
	clear: both;
	width: 80vw;
	max-width: 1440px;
	height: auto;
	margin: 20px auto 0;
}
	
ul.album li {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin-bottom: 40px;
}
/*
ul.album li:after {
	content: '';
	display: block;
	width: 96px;
	margin: 25px auto 0;
	border-top: 2px solid #222;
}
*/



#credits {
	clear: both;
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #eee;
	color: #fff;
	margin-top: 60px;
	padding: 40px 0;
	/* fixes Safari performance issue */
	webkit-backface-visibility: hidden; 
	-moz-backface-visibility: hidden;
}

.credits-bg {
	width: 100%;
	height: 200px;
/*	background-size: cover;
	background-image: url('borderless-16.jpg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	*/
	background-color: #fff;
	/* fixes Safari performance issue */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}

ul.credit-list {
	width: 100%;
	max-width: 760px;
	display: block;
	margin: 0 auto;
	text-align: center;
}
ul.credit-list li {
	width: auto;
	font-size: 14px;
	display: inline-block;
	text-align: center;
	margin: 0 20px;
	color: #333;
}
ul.credit-list li span {
	display: inline;
	font-weight: 500;
}
ul.credit-list li span.item {
	font-size: 12px;
	font-weight: 700;
	display: block;
}
ul.credit-list li span.item:after {
	content: '';
	display: block;
	width: 28px;
	height: 1px;
	background: #ccc;
	margin: 0 auto 5px;
}

.credits-bg-caption {
	position: absolute;
	right: 5px;
	bottom: 5px;
	width: auto;
	font-size: 12px;
	text-align: center;
	opacity: 0.5;
}



#footer {
	clear: both;
	display: block;
	width: 100%;
	font-family: Palatino, Times, serif;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	letter-spacing: 0.4px;
	color: #666;
	padding: 20px 0 40px;
}

.mobile-only {
	display: none;
}




/*******************************
	iPhone
*******************************/
@media only screen
and (min-width: 320px)
and (max-width: 480px) {
body {
}

#cover {
	background-image: url('./mobile-cover.jpg');
	
}

video#cover-video {
	display: none;
}

.headline {
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
}
.summary {
	max-width: 80vw;
}

.sub-title {
	height: 160px;
	border-radius: 0;
}
.sub-title .dot,
.sub-title .txt {
	display: none;
}
img.sub-title-txt {
	width: 50%;
	max-width: 110px;
	left: 2%;
	right: auto;
	bottom: 10%;
}

.share {
	display: none;
}

.article {
	padding: 0 16px;
}



figure.twin-photo {
	margin-top: 0;
}
figure.twin-photo .twin-left,
figure.twin-photo .twin-right {
	width: 100%;
	float: none;
	margin-bottom: 20px;
}
figcaption {
	line-height: 140%;
	padding: 0 16px;
	text-align: left;
}
.ratio-box img {
	border-radius: 0;
}

.mobile-only {
	display: block;
}

#credits {
	height: auto;
	padding: 20px 0;
}

ul.credit-list li {
	width: 100%;
	display: block;
	margin: 0 0 20px 0;
}
ul.credit-list li:last-child {
	margin-bottom: 0;
}
#footer {
	padding: 40px 0;
}


}