@charset "utf-8";
/* CSS Document 
Loading time too long if downloaded the css and fonts in our server.
Import google https css instead.
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

html { overflow-x:hidden }
body { 
	font-family: "Noto Sans TC","Open sans","Microsoft JhengHei",Tahoma,Helvetica,"Microsoft Yahei","微軟雅黑體",Arial,sans-serif;
  	font-size:15px;
	color:#505050;
	font-weight:300; 
	padding: 0;
  	margin:0;
  	line-height:normal!important
}

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('fonts/glyphicons-halflings-regular.eot');
  src: url('fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('fonts/glyphicons-halflings-regular.woff') format('woff'), url('fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

img { display:block; border:none; max-width:100%; vertical-align:middle }

ul { margin:0; padding:0 }

li { list-style-type:none }
a:link, a:active, a:visited { 
	color:#505050;
	text-decoration:none
}
a:hover { color:#ec9729 }

h1, h2, h3, h4, h5, h6 {
	font-family: "Noto Sans TC","Open sans","Microsoft JhengHei",Tahoma,Helvetica,"Microsoft Yahei","微軟雅黑體",Arial,sans-serif!important;
	margin:0
}

.clearfix { clear:both }
.text-break { word-wrap: break-word; }
.text-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow:hidden }
.text-center { text-align:center }
.container { width: 100%; }

/*
==============================================
Top Banner
==============================================
#top-banner { height:90px; }
*/	

#top-banner img { 
	display:inline-block; 
	width:100%; 
	max-width:728px;
	max-height:90px; 
	text-align:center;
}

@media (max-width: 1004px) {
#top-banner,#ul-menu { display:none; }
}

.adv-02 { display:none }

.fb-btm img{display:block; margin:0 auto;}

/*
==============================================
ul menu
==============================================
*/	
#ul-menu {
	padding:0; 
}
#ul-menu > div { display:table; }
#ul-menu .ul-logo {
	margin:8px 20px 8px 0; 
	display:table-cell;
	width:100px;
	padding:4px 0; 
	vertical-align:middle
}
#ul-menu .ul-logo img {
	width:auto; 
	height:20px; 
	display:inline-block; 
	vertical-align:middle
}
#ul-menu .v-line {
    background-color: #dfdfdf;
    height: 20px;
    margin: 0 0 5px 0;
    padding: 0;
    width: 1px;
	display:inline-block; 
	vertical-align:middle
}
#ul-menu .all-channels { display:table-cell }
#ul-menu .all-channels .channel {
	display:inline-block;
    height: 100%;
    padding: 8px 15px; 
	vertical-align:middle;
}
#ul-menu .all-channels div:nth-child(6) { 
	background:url(../../images/ul-menu-indicator.png) no-repeat;
	background-position:center 30px; 
}
#ul-menu > div > div:last-child { display:table-cell; text-align:right }
#ul-menu a:link, #ul-menu a:visited, #ul-menu a:active {
    color: #9FA0A0;
	font-size:13px;
    text-decoration: none;
}
#ul-menu a:hover { color: #848484 }
#ul-menu-movehere .container > div:last-child { display:block }

#ul-menu-movehere { display:none }

/*
==============================================
channel fixed menu
==============================================
*/	
.basic-sticky { background-color:#ec9729!important }
.basic-sticky .container { height:45px }
.basic-sticky .col-xs-4, 
.basic-sticky .col-xs-12, 
.basic-sticky .col-sm-4, 
.basic-sticky .col-sm-12, 
.basic-sticky .col-md-4, 
.basic-sticky .col-lg-3, 
.basic-sticky .col-lg-5 { padding:0px; }
.btn-search { float:right; margin-right:5px }
.btn-search img { vertical-align:inherit; margin-top:4px }
.btn-search .navbar-toggle-r {
	display:block; 
	background-color:transparent; 
	border:none; 
	outline:none; 
	height:45px; 
}
.basic-sticky .navbar-collapse { padding: 0; }
.basic-sticky > div > div:last-child { background-color:#ec9729 } 
.stuck {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index:999
}

/* hamburger menu icon */	
#nav-icon3 {
	width: 18px;
	height: 14px;
	position: relative;
	margin: auto;
	cursor: pointer;
}

#nav-icon3 span {
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: #ffffff;
	border-radius: 9px;
}

#nav-icon3 span:nth-child(1) { top: 0px }

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 6px }

#nav-icon3 span:nth-child(4) {
  	top: 12px;
}
/* hamburger menu icon */

.channel-logo {
	position:absolute;
	left:50%;
	margin-left:-84px;
	width:auto;
	height:45px;
	line-height:45px; 
}
.channel-logo img  {
	width:auto;
	display:inline-block!important;
	height:33px;
	margin-left:30px;
}

/*
==============================================
page left and right
==============================================
*/
.button-1, .button-1-s {
	border-radius:5px; 
	background-color:#f9d400; 
	width:100%; 
	height:60px; 
	line-height:60px; 
	text-align:center; 
	cursor:pointer
}

.button-1 span,
.button-1-s span, 
.button-2 span,
.button-2-s span { 
	color:#fff; 
	font-size:20px; 
	font-weight:400 
}

.button-2, .button-2-s {
	border-radius:5px; 
	background-color:#197cbc; 
	width:100%; 
	height:60px; 
	line-height:60px; 
	text-align:center; 
	position:relative;
	cursor:pointer
}
.buttons .col-xs-6, .buttons .col-sm-6, .buttons .col-md-6, .buttons .col-lg-6 { padding:0 5px } 
.buttons { display:none }

.page-right .button-1 { margin-top:20px; }

.page-right .button-2 { margin-top:10px; }

.pin {
	width: 25px;
	height: 25px;
	border-radius: 50% 50% 50% 0;
	background: #ffffff;
	position: absolute;
	transform: rotate(-45deg);
	left: 70px;
	top: 50%;
	margin: -20px 0 0 -20px;
	z-index: 2
}

.pin:after {
    content: '';
    width: 13px;
    height: 13px;
    margin: 6px 0 0 -6px;
    background: #197cbc;
    position: absolute;
	border-radius: 50%
}	

.pulse {
	background: rgba(0,0,0,0.2);
	border-radius: 50%;
	height: 14px;
	width: 14px;
	position: absolute;
	left: 56px;
	top: 60%;
	margin: 0;
	transform: rotateX(55deg);
	z-index: 1
}
  
.pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -20px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0.0;
    box-shadow: 0 0 1px 2px #ffffff;
    animation-delay: 1.1s
}

@keyframes pulsate {
0% {
	transform: scale(0.1, 0.1);
	opacity: 0.0
}
50% {
	opacity: 1.0
}
100% {
	transform: scale(1.2, 1.2);
	opacity: 0
}
}

@keyframes bounce {
  0% {
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg) 
	}
  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg)
  }
  80% {
    transform: translateY(-10px) rotate(-45deg)
  }
  100% {
    transform: translateY(0) rotate(-45deg)
  }
}

#page-right .adv-01 img, 
#page-right .adv-02 img { width:300px!important }

/* right col sticky style*/
.stick {
    position:fixed;
    bottom:0px;
	width: 300px;
}


/*
==============================================
Tags and KOL
==============================================
*/
.tags-bar .col-xs-4,
.tags-bar .col-xs-8, 
.tags-bar .col-sm-6, 
.tags-bar .col-md-6, 
.tags-bar .col-lg-6 { 
    padding:0 !important
}

.tags-bar .tags {
	float:left; 
	text-align:center; 
	margin:0 10px 0 0; 
	width:32px; 
	height:32px; 
	border-radius:50%; 
	font-size:17px; 
	line-height:29px; 
	color:#212121; 
	box-shadow:0 1px 1px #c8c8c8; 
	border:1px solid #dfdfdf
}
.tags-bar .tags a:hover { text-decoration:none }
.tags-bar .kol { padding-left:10px }
.tags-bar .kol img {
	width:45px; 
	height:45px; 
	border-radius:50%; 
	font-size:17px; 
	line-height:29px; 
	color:#212121; 
	border:1px solid #dfdfdf;
}

.article-header {
	font-size:19px; 
	line-height:25px;
}

/*
==============================================
Content
==============================================
*/
.section-title { 
	border-bottom:4px solid #ec9729; 
	overflow:hidden; 
	margin-top:8px; 
	padding:0 0 5px 0; 
	font-size:26px; 
	font-weight:500; 
	color:#ec9729;
}
.section-title .more { 
	float:right; 
	font-size:15px; 
	font-weight:300;
	margin-top:15px;
}

.more { 
	float:left; 
	font-size:15px; 
	font-weight:300;
	margin-top:15px;
}

.more a:link,
.more a:active,
.more a:visited,
.more a:hover { color:#ec9729; }

.section-title .more a:link,
.section-title .more a:active,
.section-title .more a:visited,
.section-title .more a:hover { color:#ec9729; }

.section-header img { vertical-align:middle; height:28px; display:inline-block }
.section-header span { vertical-align:middle }
.section-header { 
	float:left;
	font-size:26px; 
	font-weight:700;  
	color:#ec9729;
	max-height:38px
}

.section-header a {
	
color:#ec9729;
	}

.content-top {
	box-shadow:1px 2px 6px 1px rgba(0, 0, 0, 0.25);
	overflow:hidden
}

.content-top .col-xs-5, 
.content-top .col-xs-7, 
.content-top .col-xs-12, 
.content-top .col-sm-2, 
.content-top .col-sm-5, 
.content-top .col-sm-7, 
.content-top .col-sm-10, 
.content-top .col-md-2, 
.content-top .col-md-5, 
.content-top .col-md-7, 
.content-top .col-md-10, 
.content-top .col-lg-2, 
.content-top .col-lg-4, 
.content-top .col-lg-8, 
.content-top .col-lg-10 { padding:0 }

.content-top .brackets { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif }
.content-top > div { 
	min-height:113px; 
	max-height:300px
}
.content-top .btn-on-map { display:none; }
.content-container { padding:20px!important }
.content-container .edit-top { text-align:right }
.content-top .icon-location {
	vertical-align:middle; 
	display:inline-block
}
.content-top-buttons { 
	float:right; 
	min-height:auto!important;
	max-height:auto!important;
}
.content-top-buttons > div { 
	float:left; 
	margin-left:10px 
}
.content-container .edit-btm { display:none; }
.content-container .header { 
	font-size:20px; 
	line-height:25px
}
.content-top-buttons .btn {
	padding:0 20px;
	width:140px;
	height:40px;
	line-height:40px; 
	font-size:17px;
	vertical-align:middle;
	color:#fff;
}
.content-top-buttons .btn:hover {
	color:#000
}
.content-top-buttons .btn img { 
	display:inline-block;
	margin-top:-4px; 
}
.content-detail { height:44px; overflow:hidden }




/*
==============================================
Content fixed menu
==============================================
*/
.content-fixed-menu { min-height: 45px; max-height:100%!important}
.content-fixed-menu .col-xs-12 { padding:0 }
.content-fixed-menu a { padding:0 20px 0 0 }
.content-fixed-menu-l a { margin:0 10px }
.content-fixed-menu-l a:link, 
.content-fixed-menu-l a:active, 
.content-fixed-menu-l a:visited { 
	font-size:21px;
	color:#757575; 
	text-decoration:none;
}
.content-fixed-menu-l a:hover { text-decoration:underline }
.content-fixed-menu-l .activated:link, 
.content-fixed-menu-l .activated:active, 
.content-fixed-menu-l .activated:visited { 
	font-size:21px;
	color:#5a83c2; 
	text-decoration:underline 
}
.content-fixed-menu-l .activated:hover { text-decoration:underline }
.content-fixed-menu-r { float:right; }
.content-fixed-menu-r .tags {
	float:left; 
	text-align:center; 
	margin:0 10px 0 0;
	padding:0; 
	width:32px; 
	height:32px; 
	border-radius:50%; 
	font-size:17px; 
	line-height:29px; 
	color:#212121; 
	box-shadow:0 1px 1px #c8c8c8; 
	border:1px solid #dfdfdf
}

.arrow:after, .arrow[aria-expanded="false"]:after {
   content: "►";
   position:absolute;
   right:20px;
   font-size:9px;
   color:#424242;
      Top:16px;
}

.arrow[aria-expanded="true"] {
	text-decoration:none;
	font-weight:500; 
	color:#424242;
}

.arrow[aria-expanded="true"] > #hover{display:inline-block!important}
.arrow[aria-expanded="true"] > #normal{display:none!important}

.arrow[aria-expanded="true"]:after {
   content: "▼";
   position:absolute;
   right:20px;
   font-size:9px;
   color:#FFFFFF;
   Top:16px;
}
.content-fixed-menu a { padding: 0; }
.dropdown-menu > li > a {
  display: block;
  padding: 9px 0;   
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  text-align:center;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.panel-title:hover {
  color: #333;
  text-decoration: none;
  background-color: rgba(252, 206, 14, 1);
}
.dropdown-menu .divider {
  height: 1px;
  margin: 0;
  overflow: hidden;
  background-color: #424242;
}
.panel {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-title {
  padding:9px 0;
  font-size: 14px;
  text-align:center;
}
.panel-title a, .panel-title a:hover { color:#333; text-decoration:none; width:100%; display:inline-block }

.panel-group {
  margin-bottom: 0;
}
.panel-group .panel { border-radius:0 }
.panel-body { padding:0; }
.panel-body ul { padding:0px;margin-left:30px!important; }
.panel-body li a, .hk-favorite .panel-body li a:hover { display:block; padding:8px 0; color:#333; text-decoration:none }
.panel-collapse  { background-color:#F2F2F2; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 0px 0;
  margin: 0px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: rgba(252, 206, 14, .8); 
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu-left {
  right: 0;
  left: auto;
}




/*
==============================================
card
==============================================
*/
.card { 
	box-shadow:0px 0px 3px 0.5px rgba(0, 0, 0, 0.2);
	border-radius:4px;
	background-color:#FAFAFA;
}
.card:hover { 
	box-shadow:0px 0px 3px 0.5px rgba(0, 0, 0, 0.2);
	border-radius:4px 
}
.card img { border-radius:4px 4px 0 0 }
.card .caption-bg {
    bottom: 0;
    color: #5a83c2;
    left: 0;
    position: absolute;
   	width: 100%;
	text-align: left;
    z-index: 10;
	
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
    background-image: -o-linear-gradient(top,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));
    background-image: linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%);
}
.card .kol img {
	width:55px; 
	height:55px; 
	border-radius:50%; 
	font-size:17px; 
	line-height:29px; 
	color:#212121; 
	border:1px solid #dfdfdf;
}


/*
==============================================
伸延閱讀
==============================================
*/
#extend-topic .card > div { padding:0 10px 5px 10px }
#extend-topic .card .header {
	text-overflow: ellipsis;
    white-space: nowrap;
	overflow:hidden
}
#extend-topic .card .detail { 
	height:44px;
	max-height:44px; 
	overflow:hidden 
}

/*
==============================================
本周最新餐廳
==============================================
*/
.top-restaurant { 
	margin-top:10px;
	box-shadow:0px 0px 3px 0.5px rgba(0, 0, 0, 0.2);
	border-radius: 4px ;
	background-color:#FAFAFA;
}
.top-restaurant ul {
	margin:0; 
	padding:0
}
.top-restaurant li {
	overflow:hidden;
	border-bottom:1px solid #f2f2f2; 
	margin:0 10px
}
.top-restaurant li:first-child { padding:5px 0 0 0; }

.top-restaurant li td:first-child div {
	margin-left:8px ;
}
.top-restaurant li td { 
	padding:5px 10px 5px 2px ;
}
.top-restaurant li:last-child td { 
	border-bottom:none;
	padding-right:10px;
}

.top-restaurant li:last-child { border:none; padding:0 0 5px 0; }

.top-restaurant .restaurant-img
{
	float:left; 
	min-width:60px;
	width:60px!important;
	height:60px!important;
	display:block;
	background-position: 50% 50%;   background-repeat: no-repeat; background-size:cover;
}

.top-restaurant .restaurant-rank{
	font-size:18px;
	font-weight:900;
	color:#28a838;	
}

.top-restaurant td
{
	vertical-align: middle;
}

.top-restaurant h2
{
 font-size:15px;	
}

/*
==============================================
最新食訊
==============================================
*/
.hot-news { 
	margin-top:10px;
	box-shadow:0px 0px 3px 0.5px rgba(0, 0, 0, 0.2);
	border-radius: 4px ;
	background-color:#FAFAFA;
}
.hot-news ul {
	margin:0; 
	padding:0
}
.hot-news li {
	overflow:hidden;
	border-bottom:1px solid #f2f2f2; 
	margin:0 10px
}

.hot-news #title{padding-left:10px;}
.hot-news #tag{padding-left:10px;}
.hot-news #title a{min-height:44px; height:44px;}

.hot-news #tag a{color:#28a838; font-weight:700;}  
.hot-news #tag a:hover{color:#128c21; font-weight:700;}

.hot-news li{
	padding:5px 0;	
}

.hot-news li:first-child { padding:10px 0 5px 0; }

.hot-news li:last-child { border:none; padding:5px 0 10px 0; }

.hot-news .restaurant-img
{
	float:left; 
	min-width:60px;
	width:60px!important;
	height:60px!important;
	display:block;
	background-position: 50% 50%;   background-repeat: no-repeat; background-size:cover;
}

/*
==============================================
標籤
==============================================
*/
.tag-list ul { 
	margin: 5px 0; 
	padding:0;
	overflow:hidden
}
.tag-list li {
   	float: left;
	border:1px solid #f2f2f2;
    height: 28px;
    line-height: 28px;
    margin: 5px 3px;
    overflow: hidden;
    padding: 0px 10px;
    text-align: center;
    width: auto;
	border-radius:3px;
}
.tag-list a:link, .tag-list a:active, .tag-list a:visited { color:#28A838; }
.tag-list a:hover { text-decoration:none;	color:#ffffff!important;
	font-weight:500;  }

.tag-list li:hover {
	background-color:#28A838;
	cursor:pointer;
			-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;
}

.tag-list li:hover  a  {
	color:#ffffff;
	font-weight:500;
}

.fb, .adv-02, .adv-03, .adv-04 { margin:20px 0 }

.navbar-nav input {
	display:inline-block;
	height:26px; 
	vertical-align:middle
}

.collapse { display: none; }
.collapse.in { display: block; }
.navbar-collapse {
	padding-right: 15px;
	padding-left: 15px;
	overflow-x: visible;
	-webkit-overflow-scrolling: touch;
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in { overflow-y: hidden; }

/*
==============================================
mobimenu
==============================================
*/  
.navigation {
	width:100%;
	height:45px;
	color:#ec9729;
}
.navigation ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	overflow-y: auto;
}
.navigation ul li { 
	display: block; 
	width: 100%; 
	height:auto; 
}
.navigation ul li a {
	display: inline-block;
	background:none;
	color:#ec9729!important;
	font-size:18px;
	text-decoration: none;
	width:100%;
	height:auto;
	line-height:auto;
	padding: 15px 20px;
	transition: 0.2s;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
		border-left: 4px solid #ffffff;
}
.navigation ul li a:hover {  
	background: #fcb253; 
	text-decoration:none;
	font-weight:500; 
	border-left: 4px solid #28a838;
	color:#FFFFFF!important;
}

.panel-body ul li a {
	border-left: none!important;
}

.panel-body ul li a:hover {
	background: transparent; 
	text-decoration:none;
	font-weight:500; 
	border-left: none!important;
	color:#28A838!important;
}

.smobitrigger { display: inline-block; }
.smobitrigger span {
	font: 0/0 a;
	text-shadow: none;
	color: transparent;
}
.mnuclose {
	display:none;
	font-size: 20px;
	padding: 10px 20px;
	width: 100%;
	background: rgba(0, 0, 0, 0.18);
}


.mobimenu { overflow-y:auto }

.mobimenu {
	list-style: none;
  	margin: 0px;
  	width: 100%;
  	position: fixed;
  	height: 100%;
  	top: 0px;
  	left: -100%;
}

.mobimenu li { line-height:normal; }
.mobimenu li img { display:inline-block; }
.mobimenu ul li:not(:first-child) img { padding-right:20px }
.mobimenu-bg-img { 
	background:url(../../images/shutterstock_218166550.jpg) no-repeat;
	background-size:cover
}
.mobimenu-bg-img > div { 
	position:relative; 
	overflow:hidden; 
	min-height:240px;
}

.mobimenu-bg-img .alpha-bg {
	position:absolute; 
	top:0; 
	left:0; 
	z-index:10; 
	width:100%; 
	height:100%;
	padding:20px;
	background: #000; /* Old browsers */  
  	background: -moz-linear-gradient(top,  rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); /* FF3.6+ */ 
  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0)), color-stop(100%,rgba(0, 0, 0, 0.6))); /* Chrome,Safari4+ */  
  	background: -webkit-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.6) 100%); /* Chrome10+,Safari5.1+ */  
  	background: -o-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.6) 100%); /* Opera 11.10+ */  
  	background: -ms-linear-gradient(top,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.6) 100%); /* IE10+ */  
  	background: linear-gradient(to bottom,  rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.6) 100%); /* W3C */  
  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0,0)', endColorstr='rgba(0, 0, 0, 0.6)',GradientType=0 ); /* IE6-9 */ 
}
.mobimenu-container {
	position:absolute; 
	top:100px; 
	left:0; 
	z-index:50; 
	overflow:hidden; 
	padding:0 20px; 
	width:100%;
} 
.mobimenu-bg-w {
	padding:10px 20px; 
	background-color:#FFFFFF; 
	border-radius:2px; 
	height:auto; 
	overflow:hidden
}
.mobimenu-bg-w .location span { font-size:18px; }
.mobimenu-bg-w .location span, .mobimenu-bg-w .location img { vertical-align:middle }
.mobimenu-bg-w .location a:link, .mobimenu-bg-w .location a:active, .mobimenu-bg-w .location a:visited {
	width:auto; 
	padding:0; 
}
.mobimenu-bg-w .location a:hover, .mobimenu-profile a:hover { background:none!important }
.mobimenu-bg-w .weather .icon-weather {
	float:left; 
	width:20%;
	padding-right:10px; 
}

.mobimenu-bg-img .profile {
	float:left; 
	padding:15px 0 0 0;
	color:#ffffff;
	font-size:18px
}
.mobimenu-bg-img .profile a:link, .mobimenu-bg-img .profile a:active, .mobimenu-bg-img .profile a:visited {
	width:auto; 
	padding:0;
	color:#fff!important; 
	font-size:18px;
	background:none;
		border:none!important; 
}
.mobimenu-bg-img .profile a:hover { 
	background:none; 
	color:#70D17C!important;
	font-weight:700;
	text-decoration:none 
}
.mobimenu-bg-img .profile-pic {
	float:left; 
	width:60px;
	height:auto; 
	margin-right:10px;
}
.mobimenu-bg-img .profile-pic img {
	display:inline-block;
	width:100%; 
	border-radius:50%;
}

.mobimenu .member { padding:5px 20px 5px 20px; font-size:13px!important; color:#898989; }
.ovrActv {
  	position: fixed;
  	top:0;
  	left:0;
  	background: rgba(0, 0, 0, 0.7);
  	width: 100%;
  	height: 100%;
  	z-index: 9998;
  	transition: 0.2s;
  	-webkit-transition: 0.2s;
  	-moz-transition: 0.2s;
  	-ms-transition: 0.2s;
  	-o-transition: 0.2s;
}
.navwrp {
	float:left;
	height:45px; 
	line-height:45px
}
.navwrp a { padding:0 10px }
.navwrp ul { padding:0 }
.navwrp ul a { padding:15px 20px }
.mnuopn { left: 0px !important; }
.mnuopn {
	background-color:transparent;
  	transition: 0.2s!important;
  	-webkit-transition: 0.2s!important;
  	-moz-transition: 0.2s!important;
  	-ms-transition: 0.2s!important;
  	-o-transition: 0.2s!important;
}
#navbar > div { height:45px }

#navbar .data { display:table; width:100%; height:100%; padding:0 0 0 10px }
#navbar .data div { display:table-cell; color:#fff; vertical-align:middle }
#navbar .icon-data { display:table-cell; vertical-align:middle; padding-right:10px }
#navbar .icon-data img { display:inline-block; vertical-align:middle }
#navbar .detail-data div { display:block }
#navbar .detail-data div:first-child { font-size:19px; font-weight:400 }
#navbar .search { padding:0 10px}
#navbar .search table div:first-child { background-color:#fff; border:1px solid #C9CACA; border-radius:2px; overflow:hidden }
#navbar .search table div:first-child input {
	float:left;
	padding:0 5px; 
	border:none;
	line-height:24px; 
	background-color:#ffffff; 
	width:85%; 
	outline:none;
}
#navbar .search table div:first-child div { float:right; background-color:#28a838; width:15%; height:26px; border-radius:0 2px 2px 0; vertical-align:middle; text-align:center;  }
#navbar .search table div:first-child div:hover 
{ 
	background-color:#46BA54; 		
	-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;
	}
#navbar .search table div:first-child img {
	display:inline-block;
}
#navbar .search table div:last-child a:link,
#navbar .search table div:last-child a:visited,
#navbar .search table div:last-child a:active {
	font-size:12px;
	color:#128C21;
	text-decoration:none
}
#navbar .search table div:last-child a:hover {
	color:#026E0F;
}


@media (max-width : 1920px) { 
	.mobimenu-bg-img > div { min-height:220px; } 
}

@media (max-width: 992px) { 
	#ul-menu-movehere { display:block }
}

@media (max-width: 992px) { 
    .comment-box .comment div > div { margin-bottom:10px }
    .comment-box .comment textarea {
        width:100%; 
        margin-bottom:10px; 
        vertical-align:middle
    }
    
    .tag-list { margin-bottom:20px }
    
   	.fb, .adv-01, .adv-02, .adv-03, .adv-04, #adv-03-movehere, #adv-04-movehere {
        width:100%; 
        text-align:center; 
        margin:20px 0 0 0
    }
    .fb img, .adv-01 img, .adv-02 img, .adv-03 img, .adv-04 img, #adv-03-movehere img, #adv-04-movehere img { display:inline-block }
	
    .navigation #ul-menu-movehere div {
        float:inherit; 
        width:auto;
        display:inline-block;
	}
	.navigation #ul-menu-movehere .container > div:last-child { display:none }
    .navigation #ul-menu-movehere .menu-bar { 
        text-align:center; 
        padding:0px 10px 10px 10px 
    }
    .navigation #ul-menu-movehere .channel { 
        padding:2px 0 0 0; 
        vertical-align:middle 
    }
    .navigation .mobimenu-footer { 
        background-color:#000000; 
        line-height:normal;
        padding:10px
    }
    .navigation .ul-menu-movehere-bg { background-color:#000000 }
    .navigation #ul-menu-movehere td { width:100% }
    .navigation #ul-menu-movehere .ul-logo  { width:auto; }
    .navigation #ul-menu-movehere .ul-logo a { padding:0 0 10px 0!important; }
    .navigation #ul-menu-movehere .ul-logo img  { 
        width:100%;
        display:inline-block;
        vertical-align:middle
    }
    .navigation #ul-menu-movehere a:link, .navigation #ul-menu-movehere a:active, .navigation #ul-menu-movehere a:visited {
        display: inline-block;
        background:none;
        color:#fff!important;
        font-weight: normal;
        font-size:13px;
        text-decoration: none;
        width:auto;
        height:auto;
        line-height:auto;
        padding: 15px 10px 10px 10px;
        transition: 0.2s;
        -webkit-transition: 0.2s;
        -moz-transition: 0.2s;
        -ms-transition: 0.2s;
        -o-transition: 0.2s;
    }
}

@media (max-width : 966px) { 
	.mobimenu-bg-img > div { min-height:210px; } 
	.pin {
		left: 50%;
		margin-left:-34%;
		top: 50%;
	}
	.pulse {
		left: 50%;
		margin-left:-32%;
		top: 60%;
	}
	  
	
	
}

@media (max-width:959px){
/*
==============================================
page left and right
==============================================
*/    
    .buttons { display:block }
	.buttons .col-xs-6.button-1, .buttons .col-xs-6.button-1-s { 
		width:49%; 
		height:55px;
		line-height:55px; 
		margin:2% 1% 0 0;
	}
	
	.buttons .col-xs-6.button-2, .buttons .col-xs-6.button-2-s { 
		width:49%; 
		height:55px;
		line-height:55px; 
		margin:2% 0 0 1%;
	}
	.buttons .button-1 span, .buttons .button-2 span, .buttons .button-1-s span, .buttons .button-2-s span { font-size:20px } 
	.adv-02 { display:block }
	.page-left {
        float:left; 
        width:100%;
    }
    .page-right {
        float:right; 
        width:100%;
    }
	.page-right .button-1, .page-right .button-2 { display:none }
}

@media (max-width: 800px) {
	.pin {
		margin-left:-15%;
	}
	
	.pulse {
		margin-left:-14.3%;
	}
}

@media (max-width: 767px) {
	#navbar .detail-data div:first-child { font-size:17px; font-weight:400 }

    .content-container .read-more { text-align:left }
    .content-container .edit-top { display:none }
    .content-container .edit-btm { display:block; }
    .content-top-buttons { display:none }
    .content-top .btn-on-map {
        display:block;
        position:absolute; 
        top:10px; 
        left:10px; 
        z-index:99
    }
    .content-top .btn-on-map .btn { 
        display:block; 
        opacity:1;
        margin-bottom:5px;
        padding:0
    }
    .content-top .btn-recommend { 
        display:block;
        width:45px;
        height:45px;
        background:url(../../images/star_45.png) no-repeat 0 0;
    }
    .content-top .btn-bookmark { 
        display:block;
        width:45px;
        height:45px;
        background:url(../../images/heart_45.png) no-repeat 0 0;
    }
	.content-fixed-menu a { padding:0 10px 0 0 }
    .content-fixed-menu-l { margin-bottom:10px }
    .content-fixed-menu-l a:link, 
    .content-fixed-menu-l a:active, 
    .content-fixed-menu-l a:visited, 
    .content-fixed-menu-l .activated:link, 
    .content-fixed-menu-l .activated:active, 
    .content-fixed-menu-l .activated:visited { font-size:19px; }
    .content-fixed-menu-r { float:left }
    .bookmark a { padding:0 0 0 20px; }
	
	.pin {
		margin-left:-15%;
	}
	
	.pulse {
		margin-left:-14.3%;
	}
}


@media (max-width: 640px) {
    .comment-box .comment { padding:0 10px }
    .bookmark a { padding:0 0 0 20px; }
    .mobimenu-bg-img > div { min-height:210px; }
    
    .navigation #ul-menu-movehere a:link, 
    .navigation #ul-menu-movehere a:active, 
    .navigation #ul-menu-movehere a:visited {
	   padding: 0px 10px 0px 10px;
    }
	
	.navigation .all-channels div:nth-child(2) a:link, 
    .navigation .all-channels div:nth-child(2) a:active, 
    .navigation .all-channels div:nth-child(2) a:visited {
	   padding: 0px 10px 0px 0!important;
    }
/*
==============================================
nav bar
==============================================
*/
	#navbar .navbar-collapse { padding:0 }
	#navbar .icon-data { padding-right:2px; }
	#navbar .icon-data img { width:auto; height:30px }
	#navbar .detail-data div { font-size:9px }
	#navbar .detail-data div:first-child { font-size:15px; font-weight:400 }
	#navbar .search table div:first-child { height:24px }
	#navbar .search table div:first-child input {
		float:left;
		padding:0 5px; 
		border:none;
		line-height:22px; 
		background-color:#ffffff; 
		width:85%; 
		outline:none;
		font-size:13px
	}
	#navbar .search table div:last-child a { vertical-align:top }
	
	
	
	.pin {
		margin-left:-20%;
	}
	
	.pulse {
		margin-left:-19%;
	}	
}


@media (max-width: 480px) {
	
/*
==============================================
content
==============================================
*/     
    .content-top .map {
        min-width:113px;
        min-height:113px;
        max-width:200px;
        max-height:200px;    
    }
    .content-top .map img { 
        min-width:113px;
        min-height:113px;
        max-width:200px;
        max-height:200px;   
    }
    .content-container { padding:10px!important }
    .content-container .header { 
        font-size:16px; 
        line-height:21px;
        margin-bottom:10px
    }
    .content-container .add { 
        font-size:13px; 
        line-height:18px
    }
    .content-container .read-more { 
        text-align:left; 
        font-size:13px 
    }
    .content-container .edit-btm {
        display:block;
        font-size:13px 
    }
    .content-top-buttons {
        position:absolute; 
        right:10px; 
        bottom:10px;
    }
    .content-top .btn-recommend { 
        display:block;
        width:35px;
        height:35px;
        background:url(../../images/star.png) no-repeat 0 0;
    }
    .content-top .btn-bookmark { 
        display:block;
        width:35px;
        height:35px;
        background:url(../../images/heart.png) no-repeat 0 0;
    }
    
/*
==============================================
mobimenu
==============================================
*/    
    .mobimenu-bg-img > div { min-height:190px; }
    
    .mobimenu-container { top:100px; }
    
    .mobimenu-bg-img .profile {
        padding:8px 0 0 0;
        font-size:15px
    }
    
    .mobimenu-bg-img .profile-pic { width:54px }
    .mobimenu-bg-img .profile div:last-child div:first-child {
		margin-bottom:2px; 
		font-size:15px 
	}
/*
==============================================
nav bar
==============================================
*/
	#navbar .navbar-collapse { padding:0 }
	#navbar .icon-data { padding-right:2px; }
	#navbar .icon-data img { width:auto; height:30px }
	#navbar .detail-data div { font-size:9px }
	#navbar .detail-data div:first-child { font-size:15px; font-weight:400 }
	#navbar .search table div:first-child { height:24px }
	#navbar .search table div:first-child input {
		float:left;
		padding:0 5px; 
		border:none;
		line-height:22px; 
		background-color:#ffffff; 
		width:85%; 
		outline:none;
		font-size:13px
	}
	#navbar .search table div:last-child a { vertical-align:top }
	.pin { margin-left:-28% }
	.pulse { margin-left:-26.5% }	
}

@media (max-width: 375px) {
	.buttons .button-1 span, .buttons .button-2 span, .buttons .button-1-s span, .buttons .button-2-s span { font-size:15px }	
	
/*
==============================================
channel logo
==============================================
*/  
	.channel-logo {
		position:absolute;
		left:50%;
		margin-left:-65px;
		line-height:45px; 
	}
	.channel-logo img  {
		width:95px;
		display:inline-block!important;
		height:auto;
		margin-left:18px;
	}

	
/*
==============================================
Tags and KOL
==============================================
*/    
    .tags-bar .tags { 
        font-size:15px; 
        margin:0 5px 0 0; 
    }

/*
==============================================
content
==============================================
*/     
    .content-top .map {
        min-width:113px;
        min-height:113px;
        max-width:164px;
        max-height:164px;    
    }
    .content-top .map img { width:100%; height:100% }
    .content-detail { display:none }
    
/*
==============================================
mobimenu
==============================================
*/     
    .mobimenu-bg-img > div { min-height:176px; }
    .mobimenu-container { top:92px; }
    .mobimenu-bg-w { padding:5px 10px; }
    .mobimenu-bg-w .location {margin-bottom:0}
    .mobimenu-bg-w .location span { font-size:15px; }
    .mobimenu-bg-w .weather .icon-weather {
        float:left; 
        width:20%;
        margin-bottom:10px
    }
    .mobimenu-bg-w .weather { font-size:13px!important }
    
    .navigation #ul-menu-movehere .ul-logo img  { width:90% }
    .navigation #ul-menu-movehere .ul-logo a { padding:0!important }
    .navigation #ul-menu-movehere a:link, 
    .navigation #ul-menu-movehere a:active, 
    .navigation #ul-menu-movehere a:visited {
        padding: 5px;
        font-size:13px;
    }
/*
==============================================
nav bar
==============================================
*/
	#navbar .detail-data div:first-child { font-size:15px; font-weight:400 }
	#navbar .search table div:first-child input { font-size:13px }
	.pin { margin-left:-30% }
	.pulse { margin-left:-28% }
}


@media (max-width: 320px) {
	.buttons .button-1 span, .buttons .button-2 span, .buttons .button-1-s span, .buttons .button-2-s span { font-size:13px }	
	
/*
==============================================
mobimenu
==============================================
*/     
    .mobimenu-bg-img > div { min-height:160px }
    .mobimenu-bg-img .profile {
        padding:7px 0 0 0;	
        font-size:14px 
    }
    .mobimenu-bg-img .profile-pic { width:42px }
    .mobimenu-bg-img .profile a:link, 
    .mobimenu-bg-img .profile a:active, 
    .mobimenu-bg-img .profile a:visited { font-size:14px!important }
    .mobimenu-bg-img .profile div:last-child div:first-child { 
        margin-bottom:0px; 
        font-size:14px
    }
	.pin { margin-left:-34% }
	.pulse { margin-left:-32% }
	  
	
/*
==============================================
content
==============================================
*/    
    .content-container .header { margin-bottom:20px }
    .content-container .add { display:none }
}

@media (min-width: 320px) {
    .uk-sticky-placeholder { height:48px!important; }
    .basic-sticky { box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25); background-color:#ffffff}
    .basic-sticky .container { height:48px; }
    .navigation ul li a { font-size:15px;     padding: 12px 20px; }
    .navwrp a { padding:0 10px }
    .navwrp ul a { padding:15px 10px }
    #navbar > div { height:55px; }
    #navbar .search { height:55px }
}

@media (min-width: 640px) {
    .uk-sticky-placeholder { height:65px!important }	
    .basic-sticky .container { height:65px }
    .channel-logo {
        margin-left:-84px;
        height:65px;
        line-height:65px
    }
    .channel-logo img {
        width:auto;
        height:45px;
	}
    .btn-search .navbar-toggle-r { height:65px }
    
    .content-container .header { margin-bottom:10px } 
    .content-top .map {
        min-width:250px;
        min-height:250px;
        max-width:300px;
        max-height:300px;    
    }
    .content-top .map img { 
        min-width:113px;
        min-height:113px;
        max-width:300px;
        max-height:300px;   
    }
    
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: none !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: auto !important;
    }
    .navbar-collapse.in { overflow-y: auto; }
    .collapse { display: none!important; }
    .collapse.in { display: block!important; }
    
    .navigation {
        width:100%;
        height:auto;
    }
    .navwrp {
        height:65px; 
        line-height:65px
    }
    #navbar > div { height:65px }
}

@media (min-width: 660px) {
	.stuck {
		width: 100%;
		margin:0 auto;
		padding-left: 0;
		padding-right: 0; 
	} 
}

@media (min-width: 768px) {
    .content-container .read-more { margin-bottom:10px }	
    .content-top-buttons {
        position:absolute; 
        right:20px; 
        bottom:20px;
    }
    .content-top-buttons .btn {
        padding:0 15px;
        width:130px;
        height:35px;
        line-height:35px; 
        font-size:15px;
        vertical-align:middle;
        color:#fff;
    }
    #navbar .search { height:65px }
}

@media (min-width: 927px) {
    .content-top { min-height:250px }
}


@media (min-width: 960px) {
/*
==============================================
page left and right
==============================================
*/    
    .page-left {
        float:left;  
        width: calc(100% - 315px);
    }
    .page-right {
        float:left; 
        width:300px;
        margin-left:15px;
	}
    .article-header {
        font-size:26px; 
        line-height:30px
    }
}

@media (min-width: 970px) {
    .btn-search .navbar-toggle-r { display:none; }
    .channel-logo {
        position:inherit;
        margin-left:10px;
        float:left;
        width:auto
    }
    .channel-logo img  {
        width:auto;
        display:inline-block!important;
		margin-left:0px;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .navbar-collapse.in { overflow-y: visible }
    .navbar-nav input {
        height:26px; 
        vertical-align:middle
    }
    .navbar-toggle-r { display:none }
    
    
    .navigation ul table tr:last-child { display:none }
    .navigation ul li a { font-size:18px }
}

@media (min-width: 992px)  {
	#ul-menu .all-channels div:nth-child(6) a:link,
	#ul-menu .all-channels div:nth-child(6) a:active,
	#ul-menu .all-channels div:nth-child(6) a:visited,
	#ul-menu .all-channels div:nth-child(6) a:hover { color:#ec9729; font-weight:500 }
}

@media (min-width: 1000px)  {
    .mobimenu {
        list-style: none;
        margin: 0px;
        width: 35%;
        max-width: 60%;
        position: fixed;
        height: 100%;
        top: 0px;
        left: -35%;
    }
		.mobimenu-bg-img > div {  
    min-height: 140px;
	    border-bottom: 6px solid #ec9729;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
}
.mobimenu-container {  
    top: 25px;
}
}

@media (min-width: 1004px) {
	.navbar-nav input {
		height:26px; 
		vertical-align:middle
	}
}

@media (min-width: 1240px) {
	.container { width: 1220px }
	.navbar-nav input {
		width:100%;
		height:26px; 
		vertical-align:middle
	}
	.content-detail { height:auto }
}



@media (min-width: 360px) and (max-width: 480px) {
    .content-container .header { 
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden;
        margin-bottom:5px!important
    }
    .section-header { 
        font-size:23px!important;  
        color:#ec9729;
        height:45px; 
        line-height:45px 
    }
}

@media (min-width : 481px) and (max-width : 1000px)  {
	.mobimenu {
		list-style: none;
		margin: 0px;
		width: 60%;
		max-width: 85%;
		position: fixed;
		height: 100%;
		top: 0px;
		left: -60%;
	}
}

@media (max-width: 968px) {
	.col-md-3 { width:100% }
}

@media (min-width: 927px) and (max-width: 1007px) {
    .content-container .header { 
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow:hidden;
        margin-bottom:5px!important
    }
}



/*
==============================================
NEW ON 19/Jan ****************
==============================================
*/  

.data a:hover > div 
{
	font-weight:500;
	opacity: 0.9;
		-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;
}

a:hover
{
		-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	transition:all 0.15s ease-in-out;
}

@media (max-width: 968px)
 {
	.channel-icons { display:none; }
}

.headerSearchIcon
{
	cursor: pointer;
}

.article-card .card:hover { 
	box-shadow:0px 0px 3px 1.5px rgba(0, 0, 0, 0.2);
	border-radius:4px ;
	background-color:#FFFFFF;
}

.article-theme-selecter-search {
    height: 35px;
    border-bottom: 1px solid #E5E5E5;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.quick-search-button:link, .quick-search-button:visited, .quick-search-button:active {
    background-color: #ec9729;;
    font-size: 18px;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
        margin-left: 10px;
        margin-top: 5px;
        display: inline-block;
}