@charset "UTF-8";
@import url("//hello.myfonts.net/count/3795f2");
@import url("fontawesome-all.min.css");
@import url("brands.min.css");
@import url("solid.min.css");
@import url("horizon-swiper/horizon-swiper.min.css");
@import url("horizon-swiper/horizon-theme.min.css");
@import url("slick.css");
@import url("perfect-scrollbar.css");
@import url("lity.min.css");
html {
  font-size: 62.5%; }

body {
  font-size: 2rem;
  font-family: "AvenirLTPro", Helvetica Neue, Helvetica, Arial, "source-han-sans-traditional", PingFang TC, Hiragino Sans GB, Microsoft Yahei, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@media screen and (max-width: 576px) {
  body {
    font-size: 1.6rem; } }

@media screen and (min-width: 577px) and (max-width: 768px) {
  body {
    font-size: 1.8rem; } }

/**
 * @license
 * MyFonts Webfont Build ID 3550198, 2018-04-01T10:11:13-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: AvenirLTPro-Book by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir/pro-45-book-115678/
 * Copyright: Copyright &#x00A9; 2014 Monotype GmbH. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3550198
 * 
 * © 2018 MyFonts Inc
*/
@font-face {
  font-family: 'AvenirLTPro';
  font-weight: 400;
  src: url("../fonts/362BF6_0_0.eot");
  src: url("../fonts/362BF6_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/362BF6_0_0.woff2") format("woff2"), url("../fonts/362BF6_0_0.woff") format("woff"), url("../fonts/362BF6_0_0.ttf") format("truetype"); }

/**
 * @license
 * MyFonts Webfont Build ID 3642866, 2018-09-17T23:00:29-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: AvenirLTPro-Black by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/avenir/pro-95-black/
 * Copyright: Copyright &#x00A9; 2014 Monotype GmbH. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3642866
 * 
 * © 2018 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: 'AvenirLTPro';
  font-weight: 700;
  src: url("../fonts/3795F2_0_0.eot");
  src: url("../fonts/3795F2_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/3795F2_0_0.woff2") format("woff2"), url("../fonts/3795F2_0_0.woff") format("woff"), url("../fonts/3795F2_0_0.ttf") format("truetype"); }

@font-face {
  font-family: 'mpwbka';
  src: url("../fonts/mpwbka.eot?lxiluz");
  src: url("../fonts/mpwbka.eot?lxiluz#iefix") format("embedded-opentype"), url("../fonts/mpwbka.ttf?lxiluz") format("truetype"), url("../fonts/mpwbka.woff?lxiluz") format("woff"), url("../fonts/mpwbka.svg?lxiluz#mpwbka") format("svg");
  font-weight: normal;
  font-style: normal; }

.icon-close:before {
  content: "\e909"; }

.icon-angle-down:before {
  content: "\e900"; }

.icon-angle-left:before {
  content: "\e901"; }

.icon-angle-up:before {
  content: "\e902"; }

.icon-arrow-down:before {
  content: "\e903"; }

.icon-arrow-left:before {
  content: "\e904"; }

.icon-arrow-right:before {
  content: "\e905"; }

.icon-arrow-up:before {
  content: "\e906"; }

.icon-angle-right:before {
  content: "\e907"; }

.icon-hashtag:before {
  content: "\e908"; }

#iconList:hover, #iconTrend:hover, #iconSearch:hover, #iconBack:hover, #iconSend:hover {
  cursor: pointer; }

/*List*/
#iconList {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconList .st0, #iconTime .st0, #iconEye .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#iconList:hover .st0 {
  stroke-dasharray: 500;
  stroke-dashoffset: 0;
  -webkit-animation: dash500 1s linear forwards;
  -o-animation: dash500 1s linear forwards;
  -moz-animation: dash500 1s linear forwards;
  animation: dash500 1s linear forwards; }

/*Trend*/
#iconTrend {
  width: 40px;
  height: 40px;
  overflow: hidden; }

#iconTrend .st0 {
  stroke: #FFF;
  fill: #FFF;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

#iconTrend:hover .st0 {
  -webkit-animation: flash 2s infinite ease-in-out;
  -o-animation: flash 2s infinite ease-in-out;
  -moz-animation: flash 2s infinite ease-in-out;
  animation: flash 2s infinite ease-in-out; }

/*TrendLoop*/
#iconTrendLoop {
  width: 40px;
  height: 40px;
  overflow: hidden; }

#iconTrendLoop .st0 {
  stroke: #FFF;
  fill: #FFF;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center;
  -webkit-animation: flash 2s infinite ease-in-out;
  -o-animation: flash 2s infinite ease-in-out;
  -moz-animation: flash 2s infinite ease-in-out;
  animation: flash 2s infinite ease-in-out; }

/*Close*/
#iconClose {
  width: 25px;
  height: 25px;
  overflow: hidden; }

#iconClose .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 48;
  stroke-height: 48;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

#iconClose:hover {
  -webkit-animation: rotate360 0.2s ease-in-out;
  -o-animation: rotate360 0.2s ease-in-out;
  -moz-animation: rotate360 0.2s ease-in-out;
  animation: rotate360 0.2s ease-in-out; }

/*Eye*/
#iconEye .st1 {
  fill: #FFF;
  stroke: none;
  stroke-width: 48;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

/*Search*/
#iconSearch {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconSearch .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#iconSearch:hover .st0 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  -webkit-animation: dash2000 0.5s ease-in-out forwards;
  -o-animation: dash2000 0.5s ease-in-out forwards;
  -moz-animation: dash2000 0.5s ease-in-out forwards;
  animation: dash2000 0.5s ease-in-out forwards; }

/*Back*/
#iconBack {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconBack .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 46;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform: scale(0.8); }

#iconBack:hover .st0 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  -webkit-animation: dash2000 0.6s ease-in-out forwards;
  -o-animation: dash2000 0.6s ease-in-out forwards;
  -moz-animation: dash2000 0.6s ease-in-out forwards;
  animation: dash2000 0.6s ease-in-out forwards; }

/*Time*/
/*#iconTime{}
#iconTime .st0{fill:none;stroke:#FFF;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;transform-origin: center center;}
#iconTime .st1{fill:none;stroke:#FFF;stroke-width:40;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;text-align: center; transform-origin:center center;
	-webkit-animation: rotation 20s infinite ease-in-out;
	-o-animation: rotation 20s infinite ease-in-out;
	-moz-animation: rotation 20s infinite ease-in-out;
	animation: rotation 20s infinite ease-in-out;
}*/
/*Time*/
#iconTime .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

#iconTime .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  text-align: center;
  transform-origin: center center;
  /*-webkit-animation: rotation 20s infinite ease-in-out;
	-o-animation: rotation 20s infinite ease-in-out;
	-moz-animation: rotation 20s infinite ease-in-out;
	animation: rotation 20s infinite ease-in-out;*/ }

/*Time*/
#iconLoopTime .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

#iconLoopTime .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  text-align: center;
  transform-origin: center center;
  -webkit-animation: rotation 20s infinite ease-in-out;
  -o-animation: rotation 20s infinite ease-in-out;
  -moz-animation: rotation 20s infinite ease-in-out;
  animation: rotation 20s infinite ease-in-out; }

/*Play*/
#iconPlay .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#iconPlay .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#iconPlay:hover .st0, #menuDrawer .menuInterviewList > .inner > .item:hover > .thumb > #iconPlay .st0, .imgWrapper.general:hover > #iconPlay .st0, .youtubeWrapper .dimmedWrapper:hover > #iconPlay .st0 {
  cursor: pointer;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  -webkit-animation: dash2000 0.8s ease-in-out forwards;
  -o-animation: dash2000 0.8s ease-in-out forwards;
  -moz-animation: dash2000 0.8s ease-in-out forwards;
  animation: dash2000 0.8s ease-in-out forwards; }

#iconPlay:hover .st1, #menuDrawer .menuInterviewList > .inner > .item:hover > .thumb > #iconPlay .st1, .imgWrapper.general:hover > #iconPlay .st1, .youtubeWrapper .dimmedWrapper:hover > #iconPlay .st1 {
  cursor: pointer;
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
  -webkit-animation: dash1800 1.5s ease-in-out forwards;
  -o-animation: dash1800 1.5s ease-in-out forwards;
  -moz-animation: dash1800 1.5s ease-in-out forwards;
  animation: dash1800 1.5s ease-in-out forwards; }

/*Crown*/
#iconCrown {
  width: 30px;
  height: 30px; }

#iconCrown .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  vertical-align: middle;
  transform-origin: center center; }

#iconCrown .st2 {
  fill: #FFF;
  stroke: none;
  vertical-align: middle;
  transform-origin: center center;
  -webkit-animation: bounce 3.5s infinite linear;
  -o-animation: bounce 3.5s infinite linear;
  -moz-animation: bounce 3.5s infinite linear;
  animation: bounce 3.5s infinite linear; }

/*#iconCrown .st1{fill:none;stroke:#FFF;stroke-width:36;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;vertical-align: middle; transform-origin: center center;
	-webkit-animation: bounce02 1s infinite ease-in-out;
	-webkit-animation-delay: bounce02 3s; 
}
#iconCrown .st2{fill:#FFF;stroke:none;vertical-align: middle;transform-origin: center center;
	-webkit-animation: bounce02 1s infinite ease-in-out;
	-webkit-animation-delay: bounce02 3s; 
}*/
/*Microphone*/
#iconMicrophone {
  width: 60px;
  height: 60px; }

#iconMicrophone .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform: scale(0.9);
  -webkit-animation: shake 2s infinite ease-in-out;
  -o-animation: shake 2s infinite ease-in-out;
  -moz-animation: shake 2s infinite ease-in-out;
  animation: shake 2s infinite ease-in-out;
  transform-origin: center bottom;
  transform-origin: center bottom; }

#iconMicrophone .st2 {
  fill: none;
  stroke: #FFF;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform: scale(0.9);
  transform-origin: center bottom; }

#iconMicrophone .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform: scale(0.9);
  -webkit-animation: speak 2s infinite ease-in-out;
  -o-animation: speak 2s infinite ease-in-out;
  -moz-animation: speak 2s infinite ease-in-out;
  animation: speak 2s infinite ease-in-out;
  transform-origin: center bottom;
  transform-origin: center bottom; }

/*Send Envelop*/
#iconSend .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#footer input[type=text]:focus ~ #iconSend .st0 {
  stroke: #fe5258; }

#footer input[type=submit]:hover + #iconSend .st0 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  -webkit-animation: dash2000 0.5s ease-in-out forwards;
  -o-animation: dash2000 0.5s ease-in-out forwards;
  -moz-animation: dash2000 0.5s ease-in-out forwards;
  animation: dash2000 0.5s ease-in-out forwards; }

/*Fire*/
#iconHot {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconHot .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 38;
  stroke-miterlimit: 10;
  transform-origin: center bottom;
  -webkit-animation: flicker 1.5s infinite linear;
  -o-animation: flicker 1.5s infinite linear;
  -moz-animation: flicker 1.5s infinite linear;
  animation: flicker 1.5s infinite linear; }

#iconHot .st1 {
  fill: none;
  stroke: none;
  stroke-width: 42;
  stroke-miterlimit: 10;
  transform-origin: center bottom;
  -webkit-animation: flicker 1s infinite linear;
  -o-animation: flicker 1s infinite linear;
  -moz-animation: flicker 1s infinite linear;
  animation: flicker 1s infinite linear; }

/*Comment*/
#iconComment {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconComment .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 32;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform-origin: center center; }

#iconComment .st1 {
  fill: none;
  stroke: #FFF;
  stroke-width: 32;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
  -webkit-animation: dash600 1.5s infinite linear;
  -o-animation: dash600 1.5s infinite linear;
  -moz-animation: dash600 1.5s infinite linear;
  animation: dash600 1.5s infinite linear;
  -webkit-animation-delay: 1.5s; }

#iconComment .st2 {
  fill: none;
  stroke: #FFF;
  stroke-width: 32;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash200 1.5s infinite linear;
  -o-animation: dash200 1.5s infinite linear;
  -moz-animation: dash200 1.5s infinite linear;
  animation: dash200 1.5s infinite linear;
  -webkit-animation-delay: 1.5s; }

/*Hash*/
#iconHash {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconHash .st0, #iconHash .st1, #iconHash .st2, #iconHash .st3 {
  fill: none;
  stroke: #FFF;
  stroke-width: 32;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transform: scale(1.2);
  transform-origin: center center; }

#iconHash:hover .st0, #iconHash:hover .st1, #iconHash:hover .st2, #iconHash:hover .st3, .hotKeyword:hover > #iconHash .st0, .hotKeyword:hover > #iconHash .st1, .hotKeyword:hover > #iconHash .st2, .hotKeyword:hover > #iconHash .st3 {
  stroke-dasharray: 700;
  stroke-dashoffset: 0; }

#iconHash:hover .st0, .hotKeyword:hover > #iconHash .st0 {
  -webkit-animation: dash700 0.5s ease-in-out forwards;
  -o-animation: dash700 0.5s ease-in-out forwards;
  -moz-animation: dash700 0.5s ease-in-out forwards;
  animation: dash700 0.5s ease-in-out forwards; }

#iconHash:hover .st1, .hotKeyword:hover > #iconHash .st1 {
  -webkit-animation: dash700 0.7s ease-in-out forwards;
  -o-animation: dash700 0.7s ease-in-out forwards;
  -moz-animation: dash700 0.7s ease-in-out forwards;
  animation: dash700 0.7s ease-in-out forwards; }

#iconHash:hover .st2, .hotKeyword:hover > #iconHash .st2 {
  -webkit-animation: dash700 0.9s ease-in-out forwards;
  -o-animation: dash700 0.9s ease-in-out forwards;
  -moz-animation: dash700 0.9s ease-in-out forwards;
  animation: dash700 0.9s ease-in-out forwards; }

#iconHash:hover .st3, .hotKeyword:hover > #iconHash .st3 {
  -webkit-animation: dash700 1.1s ease-in-out forwards;
  -o-animation: dash700 1.1s ease-in-out forwards;
  -moz-animation: dash700 1.1s ease-in-out forwards;
  animation: dash700 1.1s ease-in-out forwards; }

/*Book*/
#iconBook {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconBook .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

/*Arrow - Left arrow*/
#iconArrowLeft {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconArrowLeft .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#moreBloggerModule > .moreLink:hover > #iconArrowLeft {
  -webkit-animation: moveLeft 0.5s ease-in-out forwards;
  -o-animation: moveLeft 0.5s ease-in-out forwards;
  -moz-animation: moveLeft 0.5s ease-in-out forwards;
  animation: moveLeft 0.5s ease-in-out forwards; }

/*Arrow - Back arrow*/
#iconArrowBack {
  width: 35px;
  height: 35px;
  overflow: hidden; }

#iconArrowBack .st0 {
  fill: none;
  stroke: #FFF;
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10; }

#moreBloggerModule > .moreLink:hover > #iconArrowBack, #pageHd > .moreLink:hover > #iconArrowBack {
  -webkit-animation: moveLeft 0.5s ease-in-out forwards;
  -o-animation: moveLeft 0.5s ease-in-out forwards;
  -moz-animation: moveLeft 0.5s ease-in-out forwards;
  animation: moveLeft 0.5s ease-in-out forwards; }

/*Loading*/
#iconLoading {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  overflow: hidden; }

#iconLoading .st0, #iconLoading .st1, #iconLoading .st2, #iconLoading .st3, #iconLoading .st4 {
  fill: #FFF;
  -webkit-animation: bling 1s infinite ease-in-out forwards;
  -o-animation: bling 1s infinite ease-in-out forwards;
  -moz-animation: bling 1s infinite ease-in-out forwards;
  animation: bling 1s infinite ease-in-out forwards; }

#iconLoading .st0 {
  animation-delay: 0.2s; }

#iconLoading .st1 {
  animation-delay: 0.4s; }

#iconLoading .st2 {
  animation-delay: 0.6s; }

#iconLoading .st3 {
  animation-delay: 0.8s; }

#iconLoading .st4 {
  animation-delay: 1s; }

/*Animations*/
@keyframes dash500 {
  from {
    stroke-dashoffset: 500; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash600 {
  from {
    stroke-dashoffset: 600; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash700 {
  from {
    stroke-dashoffset: 700; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash300 {
  from {
    stroke-dashoffset: 300; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash200 {
  from {
    stroke-dashoffset: 200; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash2000 {
  from {
    stroke-dashoffset: 2000; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dash1800 {
  from {
    stroke-dashoffset: 1800; }
  to {
    stroke-dashoffset: 0; } }

@keyframes move {
  0% {
    transform: translateY(0px); }
  25% {
    transform: translateX(40px) rotate(15deg) scale(1.1, 1.1); }
  50% {
    transform: translateY(0px); }
  75% {
    transform: translateX(0px); }
  100% {
    transform: translateY(0px); } }

@keyframes rotate360 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(180deg); } }

@keyframes rotation {
  0% {
    transform: rotate(0deg); }
  20% {
    transform: rotate(72deg);
    /*animation-delay: 0.1s;*/ }
  40% {
    transform: rotate(144deg);
    /*animation-delay: 0.1s;*/ }
  60% {
    transform: rotate(216deg);
    /*animation-delay: 0.1s;*/ }
  80% {
    transform: rotate(288deg);
    /*animation-delay: 0.1s;*/ }
  100% {
    transform: rotate(359deg);
    /*animation-delay: 0.1s;*/ } }

@keyframes flash {
  0% {
    opacity: 1;
    transform: scale(1); }
  10% {
    opacity: 0.1; }
  20% {
    opacity: 1;
    animation-delay: 0.5s;
    transform: scale(1.05); }
  30% {
    opacity: 0.5; }
  40% {
    opacity: 1;
    animation-delay: 0.5s;
    transform: scale(1.05); }
  50% {
    opacity: 0.8; }
  60% {
    opacity: 1;
    animation-delay: 0.6s;
    transform: scale(1.05); }
  70% {
    opacity: 0.1; }
  100% {
    opacity: 1;
    animation-delay: 3s;
    transform: scale(1); } }

@keyframes bounce {
  0% {
    transform: translate(0px, 50px);
    opacity: 0; }
  10% {
    transform: translate(0px, -15px);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    opacity: 1; }
  80% {
    transform: translate(0px, -15px);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    opacity: 1; }
  100% {
    transform: translate(0px, 50px);
    opacity: 0; } }

@keyframes bounce02 {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1) perspective(1px) translateZ(0);
    transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); }
  100% {
    transform: scale(1); } }

@keyframes shake {
  0% {
    transform: scale(0.9); }
  25% {
    transform: scale(1) perspective(1px) rotate(5deg); }
  50% {
    transform: scale(0.9) perspective(0px) rotate(-5deg); }
  75% {
    transform: scale(0.9) perspective(1px) rotate(5deg); }
  100% {
    transform: scale(0.9); } }

@keyframes speak {
  0% {
    transform: scale(0.9);
    opacity: 0; }
  25% {
    transform: scale(1) perspective(1px) rotate(5deg);
    opacity: 1; }
  50% {
    transform: scale(0.9) perspective(0px) rotate(-5deg);
    opacity: 0; }
  75% {
    transform: scale(0.9) perspective(1px) rotate(5deg);
    opacity: 1; }
  100% {
    transform: scale(0.9);
    opacity: 0; } }

@keyframes flicker {
  0% {
    transform: rotate(-1deg); }
  20% {
    transform: rotate(1deg); }
  40% {
    transform: rotate(-1deg); }
  60% {
    transform: rotate(1deg) scaleY(1.04); }
  80% {
    transform: rotate(-2deg) scaleY(0.92); }
  100% {
    transform: rotate(-1deg); } }

@keyframes moveLeft {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(-10px, 0px); }
  100% {
    transform: translate(0, 0); } }

@keyframes bling {
  0% {
    opacity: 1; }
  50% {
    opacity: 0.5; }
  70% {
    opacity: 0.7; }
  90% {
    opacity: 0.9; }
  100% {
    opacity: 1; } }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./../images/loading@2x.gif") 30px 30px center center no-repeat; }

/* Icons */
@font-face {
  font-family: "slick";
  src: url("../fonts/slick.eot");
  src: url("../fonts/slick.eot?#iefix") format("embedded-opentype"), url("../fonts/slick.woff") format("woff"), url("../fonts/slick.ttf") format("truetype"), url("../fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
  .slick-prev:before,
  .slick-next:before {
    font-family: "mpwbka";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: '\e901'; }
    [dir="rtl"] .slick-prev:before {
      content: '\e907'; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: '\e907'; }
    [dir="rtl"] .slick-next:before {
      content: '\e901'; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }

body {
  color: black;
  min-width: 768px;
  overflow-x: hidden;
  overflow-y: visible; }

body.hiddenY {
  overflow-y: hidden; }

body.hiddenBody {
  overflow: hidden; }

body.unhiddenBody {
  overflow-y: visible;
  overflow-x: hidden; }

/*==========Backgrounds==========*/
/*starting color - the rest of the colors defined in JS*/
.bgLoop {
  background-color: #FF2424; }

.bgHome01 {
  background-color: #FF2424; }

.bgHome02 {
  background-color: #FF838B; }

.bgHome03 {
  background-color: #FF8561; }

.bgHome04 {
  background-color: #E7903A; }

.bgHome05 {
  background-color: #51B2BD; }

.bgHome06 {
  background-color: #3388A9; }

.bgHome07 {
  background-color: #5A73A4; }

.bgHome08 {
  background-color: #3388A9; }

.bgCatLocal {
  background-color: #ed853e; }

.bgCatAsia {
  background-color: #7E6181; }

.bgCatEurope {
  background-color: #5c8bac; }

.bgCatSports {
  background-color: #78c4ba; }

.bgGeneralOne {
  background-color: #FF838B; }

.bgGeneralTwo {
  background-color: #51B2BD; }

.bgGeneralThree {
  background-color: #FF8561; }

.bgGeneralFour {
  background-color: #ffbd34; }

.bgBlogTheme01 {
  background-color: #FF838B; }

.bgBlogTheme02 {
  background-color: #AD8F5E; }

.bgBlogTheme03 {
  background-color: #5A6D8D; }

.bgBlogTheme04 {
  background-color: #7C6C76; }

.bgBlogTheme05 {
  background-color: #FFB000; }

.bgBlogTheme06 {
  background-color: #689E64; }

.bgBlogTheme07 {
  background-color: #3C6FBA; }

.bgBlogTheme08 {
  background-color: #FE5B50; }

.bgArticle01 {
  background-color: #51B2BD; }

.bgArticle02 {
  background-color: #CB8085; }

.bgArticle03 {
  background-color: #515F8C; }

.bgArticle04 {
  background-color: #D3AF8F; }

.bgArticle05 {
  background-color: #DC7C60; }

.bgArticle06 {
  background-color: #AD8F5E; }

.bgArticle07 {
  background-color: #7BA591; }

.bgArticle08 {
  background-color: #8B7382; }

.bgMagazine {
  background-color: #A89C98; }

.bgBlog {
  background-color: #B7B5BF; }

body.bgLoop #svgOuterGradientRect {
  fill: #FF2424; }

body.bgHome01 #svgOuterGradientRect {
  fill: #FF2424; }

body.bgHome02 #svgOuterGradientRect {
  fill: #FF838B; }

body.bgHome03 #svgOuterGradientRect {
  fill: #FF8561; }

body.bgHome04 #svgOuterGradientRect {
  fill: #E7903A; }

body.bgHome05 #svgOuterGradientRect {
  fill: #51B2BD; }

body.bgHome06 #svgOuterGradientRect {
  fill: #3388A9; }

body.bgHome07 #svgOuterGradientRect {
  fill: #5A73A4; }

body.bgHome08 #svgOuterGradientRect {
  fill: #3388A9; }

body.bgCatLocal #svgOuterGradientRect {
  fill: #ed853e; }

body.bgCatAsia #svgOuterGradientRect {
  fill: #7E6181; }

body.bgCatEurope #svgOuterGradientRect {
  fill: #5c8bac; }

body.bgCatSports #svgOuterGradientRect {
  fill: #78c4ba; }

body.bgGeneralOne #svgOuterGradientRect {
  fill: #FF838B; }

body.bgGeneralTwo #svgOuterGradientRect {
  fill: #51B2BD; }

body.bgGeneralThree #svgOuterGradientRect {
  fill: #FF8561; }

body.bgGeneralFour #svgOuterGradientRect {
  fill: #ffbd34; }

body.bgBlogTheme01 #svgOuterGradientRect {
  fill: #FF838B; }

body.bgBlogTheme02 #svgOuterGradientRect {
  fill: #AD8F5E; }

body.bgBlogTheme03 #svgOuterGradientRect {
  fill: #5A6D8D; }

body.bgBlogTheme04 #svgOuterGradientRect {
  fill: #7C6C76; }

body.bgBlogTheme05 #svgOuterGradientRect {
  fill: #FFB000; }

body.bgBlogTheme06 #svgOuterGradientRect {
  fill: #689E64; }

body.bgBlogTheme07 #svgOuterGradientRect {
  fill: #3C6FBA; }

body.bgBlogTheme08 #svgOuterGradientRect {
  fill: #FE5B50; }

body.bgArticle01 #svgOuterGradientRect {
  fill: #51B2BD; }

body.bgArticle02 #svgOuterGradientRect {
  fill: #CB8085; }

body.bgArticle03 #svgOuterGradientRect {
  fill: #515F8C; }

body.bgArticle04 #svgOuterGradientRect {
  fill: #D3AF8F; }

body.bgArticle05 #svgOuterGradientRect {
  fill: #DC7C60; }

body.bgArticle06 #svgOuterGradientRect {
  fill: #AD8F5E; }

body.bgArticle07 #svgOuterGradientRect {
  fill: #7BA591; }

body.bgArticle08 #svgOuterGradientRect {
  fill: #8B7382; }

body.bgMagazine #svgOuterGradientRect {
  fill: #A89C98; }

body.bgBlog #svgOuterGradientRect {
  fill: #B7B5BF; }

/*==========Images==========*/
img {
  max-width: 100%;
  height: auto; }

@media \0screen {
  img {
    width: auto;
    /* for ie 8 */ } }

/*==========Firefox: remove the dotted outline==========*/
a:focus, a:active, button,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  outline: none !important; }

*:focus {
  outline: none !important; }

a, a:link, a:hover, a:active, a:visited {
  text-decoration: none !important; }

a {
  color: black;
  -moz-transition: color 0.3s;
  -ms-transition: color 0.3s;
  -o-transition: color 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s; }

a:hover {
  color: rgba(0, 0, 0, 0.5); }

a#btnBackToTop {
  position: fixed;
  z-index: 10;
  display: block;
  opacity: 0;
  width: 30px;
  height: 30px;
  bottom: -35px;
  right: 50px;
  /*@include transition (all 0.5s);*/
  color: white !important;
  font-family: 'mpwbka';
  font-size: 3rem; }

a#btnBackToTop:before {
  content: '\e902'; }

a#btnBackToTop:hover {
  cursor: pointer; }

a#btnBackToTop.is-shown {
  opacity: 1;
  bottom: 35px; }

a#btnBackToTop.mdOpened, a#btnBackToTop.tdOpened {
  opacity: 0; }

a#btnLoadMore {
  position: absolute;
  z-index:99;
  bottom: 10px;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  border: 2px solid white;
  color: white;
  text-align: center;
  font-size: 1.6rem;
  padding: 5px 0;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-transition: background-color 0.3s ease-in-out;
  -ms-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out; }

a#btnLoadMore:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2); }

/*==========Serif fonts==========*/
.serif {
  font-family: "AvenirLTPro", Helvetica Neue, Helvetica, Arial, "source-han-serif-tc", Songti TC, serif; }

.bold {
  font-weight: 700; }

/*==========Highlight colors==========*/
/*::selection {background: $colorWhite;}
::-moz-selection {background: $colorWhite;}*/
/*==========Gaps==========*/
.noPaddingLeft {
  padding-left: 0; }

.noPaddingRight {
  padding-right: 0; }

.noMarginLeft {
  margin-left: 0; }

.noMarginRight {
  margin-right: 0; }

/*==========Loading==========*/
/*#loading{display:block; width:30px; height:30px; margin:100px auto; background-image:url(../images/loading@2x.gif); background-size:30px 30px;}*/
/*==========Gaps==========*/
.gapTop {
  margin-top: 30px; }

.gapTop10 {
  margin-top: 10px; }

.gapTop20 {
  margin-top: 20px; }

.gapTop30 {
  margin-top: 30px; }

.gapTop45 {
  margin-top: 45px; }

.gapBtm10 {
  margin-bottom: 10px; }

.gapBtm20 {
  margin-bottom: 20px; }

.gapBtm30 {
  margin-bottom: 30px; }

.gapBtm45 {
  margin-bottom: 45px; }

/*==========Home==========*/
#bodyWrap {
  position: relative;
  right: 0;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out; }

#bodyWrap.tdOpened {
  -moz-transform: translateX(-400px);
  -ms-transform: translateX(-400px);
  -o-transform: translateX(-400px);
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px); }

#bodyWrap.mdOpened {
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

#blackOverlay {
  position: fixed;
  z-index: 20;
  top: -100vh;
  right: 0;
  width: 100%;
  height: 100vh;
  background: -webkit-linear-gradient(0deg, rgba(78, 177, 187, 0) 0%, rgba(252, 107, 107, 0.9) 100%);
  background: -o-linear-gradient(0deg, rgba(78, 177, 187, 0) 0%, rgba(252, 107, 107, 0.9) 100%);
  background: -moz-linear-gradient(0deg, rgba(78, 177, 187, 0) 0%, rgba(252, 107, 107, 0.9) 100%);
  background: -ms-linear-gradient(0deg, rgba(78, 177, 187, 0) 0%, rgba(252, 107, 107, 0.9) 100%);
  background: linear-gradient(0deg, rgba(78, 177, 187, 0) 0%, rgba(252, 107, 107, 0.9) 100%);
  -moz-transition: top 0.8s ease-in-out, transform 0.5s ease-in-out;
  -ms-transition: top 0.8s ease-in-out, transform 0.5s ease-in-out;
  -o-transition: top 0.8s ease-in-out, transform 0.5s ease-in-out;
  -webkit-transition: top 0.8s ease-in-out, transform 0.5s ease-in-out;
  transition: top 0.8s ease-in-out, transform 0.5s ease-in-out; }

#blackOverlay:hover {
  cursor: pointer; }

#blackOverlay.tdOpened {
  top: 0;
  -moz-transform: translateX(-400px);
  -ms-transform: translateX(-400px);
  -o-transform: translateX(-400px);
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px); }

#blackOverlay.mdOpened {
  top: 0;
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

/*==========Menu bar==========*/
#menuBar {
  position: fixed;
  z-index: 10;
  bottom: auto;
  top: 0;
  right: 0;
  width: 100%;
  height: 80px;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out; }

#menuBar.home {
  position: absolute;
  top: auto;
  background-color: inherit;
  bottom: 0; }

@media screen and (max-width: 768px) {
  #menuBar.home {
    bottom: 45vh; } }

/*#menuBar > .outergradient{position:absolute; bottom:-120px; width:100%; height:120px; @include transition(transform 0.5s ease-in-out);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));}*/
#menuBar #menuBarBg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 200px;
  overflow: hidden; }

#menuBar.home #menuBarBg {
  height: 260px; }

#menuBar #logo:hover {
  cursor: pointer; }

/*Logo*/
#iconLogo {
  position: absolute;
  z-index: 12;
  top: -25px;
  left: 50%;
  width: 120px;
  margin-left: -60px;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

#menuBar.sticky #iconLogo {
  top: -10px; }

#menuBar.sticky #iconLogo.is-hidden, #menuBar #iconLogo.is-hidden {
  top: -150px; }

#menuBar.sticky {
  position: fixed;
  top: 0;
  z-index: 10; }

#menuBar.tdOpened {
  -moz-transform: translateX(-400px);
  -ms-transform: translateX(-400px);
  -o-transform: translateX(-400px);
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px); }

#menuBar.mdOpened {
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

#menuBar > .inner {
  position: relative;
  padding: 25px 0 0 20px;
  z-index: 11; }

#menuBar #btnMenuDrawer {
  position: absolute;
  top: 20px;
  left: 30px; }

#menuBar #btnMenuDrawer:hover {
  cursor: pointer; }

#menuBar #btnTrendDrawer {
  position: absolute;
  top: 20px;
  right: 30px;
  -moz-transition: top 0.5s ease-in-out;
  -ms-transition: top 0.5s ease-in-out;
  -o-transition: top 0.5s ease-in-out;
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out; }

#menuBar #btnTrendDrawer:hover {
  cursor: pointer; }

#menuBar #btnTrendDrawer.is-hidden {
  top: -80px; }

#menuBar #btnSearch {
  position: absolute;
  top: 22px;
  right: 90px;
  -moz-transition: top 0.5s ease-in-out;
  -ms-transition: top 0.5s ease-in-out;
  -o-transition: top 0.5s ease-in-out;
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out; }

#menuBar #btnSearch:hover {
  cursor: pointer; }

#menuBar #btnSearch.is-hidden {
  top: -80px; }

#menuBar #simpleNav {
  position: absolute;
  left: 90px;
  color: white;
  -moz-transition: top 0.5s ease-in-out;
  -ms-transition: top 0.5s ease-in-out;
  -o-transition: top 0.5s ease-in-out;
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out;
  top: 24px; }

#menuBar #simpleNav.is-hidden {
  top: -60px; }

#menuBar #shareNav {
  position: absolute;
  right: 30px;
  top: 20px;
  -moz-transition: top 0.5s ease-in-out;
  -ms-transition: top 0.5s ease-in-out;
  -o-transition: top 0.5s ease-in-out;
  -webkit-transition: top 0.5s ease-in-out;
  transition: top 0.5s ease-in-out; }

#menuBar #shareNav.is-hidden {
  top: -60px; }

#menuBar #shareNav > .btn {
  width: 40px;
  height: 40px;
  display: inline-block;
  font-size: 1.6rem;
  border: 2px solid white;
  color: white;
  background-color: transparent;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: 5px;
  transition: background-color color 0.3s linear;
  overflow: hidden; }

#menuBar #shareNav > .btn.facebook {
  padding-top: 7px; }

#menuBar #shareNav > .btn.whatsapp {
  font-size: 2.2rem;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0; }

#menuBar #shareNav > .btn.whatsapp i {
  position: relative;
  top: 7px;
  left: 1px; }

#menuBar #shareNav > .btn.link {
  font-size: 1.3rem;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0; }

#menuBar #shareNav > .btn.link i {
  position: relative;
  top: 12px; }

#menuBar #shareNav > .btn:hover {
  background-color: white;
  color: #51B2BD;
  border-color: white; }

body.bgArticle01 #menuBar #shareNav > .btn:hover {
  color: #51B2BD; }

body.bgArticle02 #menuBar #shareNav > .btn:hover {
  color: #CB8085; }

body.bgArticle03 #menuBar #shareNav > .btn:hover {
  color: #515F8C; }

body.bgArticle04 #menuBar #shareNav > .btn:hover {
  color: #D3AF8F; }

body.bgArticle05 #menuBar #shareNav > .btn:hover {
  color: #DC7C60; }

body.bgArticle06 #menuBar #shareNav > .btn:hover {
  color: #AD8F5E; }

body.bgArticle07 #menuBar #shareNav > .btn:hover {
  color: #7BA591; }

body.bgArticle08 #menuBar #shareNav > .btn:hover {
  color: #8B7382; }

#btnCloseMenuDrawer {
  position: absolute;
  top: 25px;
  right: 30px; }

#btnCloseMenuDrawer:hover {
  cursor: pointer; }

#btnCloseTrendDrawer {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 10; }

#btnCloseTrendDrawer:hover {
  cursor: pointer; }

/*==========Menu drawer==========*/
#menuDrawer {
  z-index: 11;
  position: fixed;
  top: 0;
  left: -400px;
  width: 400px;
  height: 100vh;
  padding-bottom: 100px;
  overflow: hidden;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out; }

#menuDrawer.mdOpened {
  -webkit-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
  -moz-transform: translateX(400px);
  -ms-transform: translateX(400px);
  -o-transform: translateX(400px);
  -webkit-transform: translateX(400px);
  transform: translateX(400px); }

#menuDrawer > .inner {
  padding: 25px 30px 25px 30px; }

#menuDrawer .menuItemsWrapper {
  position: relative;
  top: 70px;
  width: 100%;
  z-index: 12; }

#menuDrawer .menuItemsWrapper > .item {
  display: inline-block;
  width: 33.3%;
  float: left;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  padding: 0 0 20px 0;
  -moz-transition: color 0.3s linear;
  -ms-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  -webkit-transition: color 0.3s linear;
  transition: color 0.3s linear; }

#menuDrawer .menuItemsWrapper > .item.active {
  color: white; }

#menuDrawer .menuItemsWrapper > .item:hover {
  cursor: pointer;
  color: white; }

#menuDrawer .menuInterviewList {
  position: relative;
  top: 70px;
  width: 100%; }

#menuDrawer .menuInterviewList #iconMicrophone {
  position: absolute;
  top: 100px;
  left: -36px; }

#menuDrawer .menuInterviewList > .title {
  position: relative;
  top: 25px;
  left: 30px;
  font-size: 1.8rem;
  color: white; }

#menuDrawer .menuInterviewList > .title > .en {
  position: relative;
  top: -2px;
  left: 6px;
  font-weight: 700;
  font-size: 1.2rem; }

#menuDrawer .menuInterviewList .divLine {
  position: relative;
  top: 8px;
  left: 160px;
  width: 180px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8); }

#menuDrawer .menuInterviewList > .inner {
  margin-top: 40px; }

#menuDrawer .menuInterviewList > .inner > .item {
  display: block;
  width: 100%;
  height: 130px;
  background-color: rgba(255, 255, 255, 0.8);
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
  color: black; }

#menuDrawer .menuInterviewList > .inner > .item > .thumb {
  position: relative;
  width: 50%;
  height: 130px;
  float: left;
  background-size: cover;
  background-position: center center;
  overflow: hidden; }

#menuDrawer .menuInterviewList > .inner > .item > .thumb > .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); }

#menuDrawer .menuInterviewList > .inner > .item > .thumb > #iconPlay {
  position: absolute;
  z-index: 12;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px; }

#menuDrawer .menuInterviewList > .inner > .item > .cnt {
  width: 50%;
  float: left;
  padding: 5px 15px; }

#menuDrawer .menuInterviewList > .inner > .item > .cnt > .time {
  position: relative;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.4);
  margin-right: 6px; }

#menuDrawer .menuInterviewList > .inner > .item > .cnt > .time #iconTime {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: 3px;
  margin-right: 4px; }

#menuDrawer .menuInterviewList > .inner > .item > .cnt > .time #iconTime .st0, #menuDrawer .menuInterviewList > .inner > .item > .cnt > .time #iconTime .st1 {
  stroke: rgba(0, 0, 0, 0.3); }

#menuDrawer .menuInterviewList > .inner > .item > .cnt > .title {
  font-size: 1.4rem;
  margin-top: 8px; }

/*==========Trending drawer==========*/
#trendingDrawer {
  z-index: 11;
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  overflow: hidden;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out; }

#trendingDrawer.tdOpened {
  -webkit-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  -moz-transform: translateX(-400px);
  -ms-transform: translateX(-400px);
  -o-transform: translateX(-400px);
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px); }

/*photo item*/
#trendingDrawer .photoItem {
  display: block;
  position: absolute;
  right: -400px;
  z-index: 6;
  width: 150px;
  height: 150px;
  overflow: hidden;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid #FFF;
  background-size: cover; }

/*keyword item*/
#trendingDrawer .keywordItem {
  display: block;
  position: absolute;
  left: -400px;
  z-index: 5;
  white-space: nowrap;
  font-size: 3rem;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  padding: 10px 25px 0 25px;
  background-color: white;
  color: rgba(0, 0, 0, 0.7);
  border: 2px solid white;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25); }

#trendingDrawer > .item {
  opacity: 0;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -webkit-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out; }

/*animations*/
#trendingDrawer > .item.play:nth-child(1) {
  opacity: 1;
  -webkit-animation: moveX 4s linear infinite alternate, moveY 5.4s linear infinite alternate;
  animation: moveX 4s linear infinite alternate, moveY 5.4s linear infinite alternate;
  animation-delay: -1s; }

#trendingDrawer > .item.play:nth-child(2) {
  opacity: 1;
  -webkit-animation: moveX-reverse 4.5s linear infinite alternate, moveY-reverse 4.8s linear infinite alternate;
  animation: moveX-reverse 4.5s linear infinite alternate, moveY-reverse 4.8s linear infinite alternate; }

#trendingDrawer > .item.play:nth-child(3) {
  opacity: 1;
  -webkit-animation: moveX 4s linear infinite alternate, moveY-keyword 5.8s linear infinite alternate;
  animation: moveX 4s linear infinite alternate, moveY-keyword 5.8s linear infinite alternate;
  animation-delay: -2s; }

#trendingDrawer > .item.play:nth-child(4) {
  opacity: 1;
  -webkit-animation: moveX-reverse 5s linear infinite alternate, moveY-keyword-reverse 6.4s linear infinite alternate;
  animation: moveX-reverse 5s linear infinite alternate, moveY-keyword-reverse 6.4s linear infinite alternate; }

#trendingDrawer > .item.play:nth-child(5) {
  opacity: 1;
  -webkit-animation: moveX 6s linear infinite alternate, moveY-keyword 7s linear infinite alternate;
  animation: moveX 6s linear infinite alternate, moveY-keyword 7s linear infinite alternate;
  animation-delay: -1s; }

#trendingDrawer > .item.play:nth-child(1):hover, #trendingDrawer > .item.play:nth-child(2):hover, #trendingDrawer > .item.play:nth-child(3):hover, #trendingDrawer > .item.play:nth-child(4):hover, #trendingDrawer > .item.play:nth-child(5):hover {
  cursor: pointer;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused; }

/*new*/
#trendingDrawer > #iconTrendLoop {
  position: absolute;
  z-index: 4;
  top: 15px;
  left: 20px;
  width: 55px;
  height: 55px; }

#trendingDrawer > .title {
  position: absolute;
  z-index: 4;
  top: 30px;
  left: 70px;
  font-size: 1.8rem;
  color: white; }

#trendingDrawer > .title > .en {
  position: relative;
  top: -2px;
  left: 6px;
  font-weight: 700;
  font-size: 1.2rem; }

/*==========Trending animations==========*/
@-webkit-keyframes moveX {
  from {
    left: 0; }
  to {
    left: 250px; } }

@keyframes moveX {
  from {
    left: 0; }
  to {
    left: 250px; } }

@-webkit-keyframes moveY {
  from {
    top: 0; }
  to {
    top: 88%; } }

@keyframes moveY {
  from {
    top: 0; }
  to {
    top: 88%; } }

@-webkit-keyframes moveX-reverse {
  from {
    left: 250px; }
  to {
    left: 0; } }

@keyframes moveX-reverse {
  from {
    left: 250px; }
  to {
    left: 0; } }

@-webkit-keyframes moveY-reverse {
  from {
    top: 88%; }
  to {
    top: 0; } }

@keyframes moveY-reverse {
  from {
    top: 88%; }
  to {
    top: 0; } }

@-webkit-keyframes moveY-keyword {
  from {
    top: 95%; }
  to {
    top: 0; } }

@keyframes moveY-keyword {
  from {
    top: 95%; }
  to {
    top: 0; } }

@-webkit-keyframes moveY-keyword-reverse {
  from {
    top: 0; }
  to {
    top: 95%; } }

@keyframes moveY-keyword-reverse {
  from {
    top: 0; }
  to {
    top: 95%; } }

/*Landing page - Featured Content*/
/**replaced by #ajax-load-more  in page styles by falcon**/
/*
.landingFeature {
  position: relative;
  top: 100vh;
  width: 96%;
  max-width: 1400px;
  padding-top: 120px;
  padding-bottom: 100px;
  margin: 0 auto 40px auto;
  overflow: hidden; }
*/
@media screen and (max-width: 768px) {
  .landingFeature {
    top: 52vh;
    /*recalculate using JS - for mobile device*/ } }

.landingFeature > .item {
  display: block;
  float: left;
  width: 48%;
  margin: 0 1% 2% 1%;
  background-color: rgba(255, 255, 255, 0.9);
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden; }

@media screen and (max-width: 576px) {
  .landingFeature > .item {
    margin: 0 15px 20px; } }

/*.landingFeature > .inner > .item:nth-child(odd){width:60%;}
.landingFeature > .inner > .item:nth-child(even){width:30%;}*/
.landingFeature > .item > .imgWrapper {
  position: relative;
  width: 101%; }

.landingFeature > .item > .imgWrapper img {
  width: 101%;
  object-fit: contain; }

.landingFeature > .item > .imgWrapper .postCat {
  position: absolute;
  bottom: -15px;
  left: 20px; }

.landingFeature > .item > .cntWrapper {
  position: relative;
  padding: 30px 20px 50px 20px; }

.landingFeature > .item > .cntWrapper > .title {
  /*font-weight:700;*/ }

.landingFeature > .item > .cntWrapper > a.title:hover {
  cursor: pointer; }

.landingFeature > .item > .cntWrapper > .infoWrapper {
  margin: 0 0 20px 0; }

.landingFeature > .item > .cntWrapper > .shareWrapper {
  position: absolute;
  right: 15px;
  bottom: 15px; }

.landingFeature #iconPlay {
  z-index: 0; }

/*Category Landing Content*/
.catLandingGrid > .item > .imgWrapper {
  position: relative;
  width: 101%; }

.catLandingGrid > .item > .imgWrapper img {
  width: 101%;
  object-fit: contain; }

.catLandingGrid > .item > .imgWrapper .postCat {
  position: absolute;
  bottom: -15px;
  left: 20px; }

.catLandingGrid > .item > .cntWrapper {
  position: relative;
  padding: 30px 20px 50px 20px; }

.catLandingGrid > .item > .cntWrapper > .title {
  /*font-weight:700;*/ }

.catLandingGrid > .item > .cntWrapper > a.title:hover {
  cursor: pointer; }

.catLandingGrid > .item > .cntWrapper > .infoWrapper {
  margin: 0 0 20px 0; }

.catLandingGrid > .item > .cntWrapper > .shareWrapper {
  position: absolute;
  right: 15px;
  bottom: 15px; }

.catLandingGrid #iconPlay {
  z-index: 0; }

/*General Grid Content*/
.generalGrid > .item > .imgWrapper {
  position: relative;
  width: 101%; }

.generalGrid > .item > .imgWrapper img {
  width: 101%;
  object-fit: contain; }

.generalGrid > .item > .imgWrapper .postCat {
  position: absolute;
  bottom: -15px;
  left: 20px; }

.generalGrid > .item > .cntWrapper {
  position: relative;
  padding: 30px 20px 50px 20px; }

.generalGrid > .item > .cntWrapper > .title {
  /*font-weight:700;*/ }

.generalGrid > .item > .cntWrapper > a.title:hover {
  cursor: pointer; }

.generalGrid > .item > .cntWrapper > .infoWrapper {
  margin: 0 0 20px 0; }

.generalGrid > .item > .cntWrapper > .shareWrapper {
  position: absolute;
  right: 15px;
  bottom: 15px; }

.generalGrid #iconPlay {
  z-index: 0; }

/*Cover story and Ranking*/
.landingFeature .item .cntWrapper .iconCoverStory {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -65px;
  right: 20px;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #193db4;
  text-align: center;
  color: white;
  line-height: 1.3;
  font-size: 1.3rem;
  padding-top: 28px; }

.landingFeature .item .cntWrapper .iconCoverStory:after {
  content: 'COVER STORY'; }

/*Ranking*/
.rankWrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  z-index: 1;
  overflow: hidden; }

.rankWrapper.small {
  width: 40px;
  height: 40px;
  z-index: 1;
  overflow: hidden; }

.rankWrapper .ranking {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 80px solid #f4c146;
  border-bottom: 80px solid transparent;
  border-left: 80px solid transparent; }

.rankWrapper.small .ranking {
  border-top: 40px solid #f4c146;
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent; }

/*#top5module.local .rankWrapper.small .ranking{border-top-color:$colorCatLocalRanking;}
#top5module.asia .rankWrapper.small .ranking{border-top-color:$colorCatAsiaRanking;}
#top5module.europe .rankWrapper.small .ranking{border-top-color:$colorCatEuropeRanking;}
#top5module.sport .rankWrapper.small .ranking{border-top-color:$colorCatSportRanking;}*/
.rankWrapper .icon {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 3; }

.rankWrapper .num {
  position: absolute;
  top: 6px;
  right: 7px;
  z-index: 3;
  color: white;
  font-size: 1.2rem;
  font-weight: 700; }

/*Image wrapper general*/
.imgWrapper.general:hover {
  cursor: pointer; }

.imgWrapper.general > .postCat {
  z-index: 2; }

.imgWrapper.general > .postCat:hover {
  cursor: pointer; }

.imgWrapper.general > .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); }

.imgWrapper.general > #iconPlay {
  position: absolute;
  z-index: 2;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px; }

/*Info wrapper general*/
.infoWrapper.general > .time {
  position: relative;
  top: 5px;
  float: left;
  font-size: 1.2rem;
  color: #fe5258;
  margin-right: 20px; }

.infoWrapper.general > .time #iconTime {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: 3px;
  margin-right: 3px; }

.infoWrapper.general > .time #iconTime .st0, .infoWrapper.general > .time #iconTime .st1 {
  stroke: #fe5258; }

.infoWrapper.general > .viewCount {
  position: relative;
  top: 3px;
  float: left;
  font-size: 1.2rem;
  color: #fe5258; }

.infoWrapper.general > .viewCount #iconEye {
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
  top: 5px;
  margin-right: 4px; }

.infoWrapper.general > .viewCount #iconEye .st0 {
  stroke: #fe5258; }

.infoWrapper.general > .viewCount #iconEye .st1 {
  fill: #fe5258; }

/*Info wrapper article*/
.infoWrapper.article {
  position: relative;
  height: 35px;
  top: 4px;
  display: inline-block;
  text-align: center; }

.infoWrapper.article > .divLine {
  position: relative;
  display: inline-block;
  top: 4px;
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.5);
  float: left;
  margin-right: 15px; }

.infoWrapper.article > .time {
  position: relative;
  top: 5px;
  float: left;
  font-size: 1.2rem;
  color: white;
  margin-right: 20px; }

.infoWrapper.article > .time #iconTime {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: 3px;
  margin-right: 3px; }

.infoWrapper.article > .time #iconTime .st0, .infoWrapper.article > .time #iconTime .st1 {
  stroke: white; }

.infoWrapper.article > .viewCount {
  position: relative;
  top: 3px;
  float: left;
  font-size: 1.2rem;
  color: white; }

.infoWrapper.article > .viewCount #iconEye {
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
  top: 5px;
  margin-right: 4px; }

.infoWrapper.article > .viewCount #iconEye .st0 {
  stroke: white; }

.infoWrapper.article > .viewCount #iconEye .st1 {
  fill: white; }

/*Share wrapper general*/
.shareWrapper.general > .btn {
  width: 40px;
  height: 40px;
  display: inline-block;
  font-size: 1.6rem;
  border: 2px solid #fe5258;
  color: #fe5258;
  background-color: transparent;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: 5px;
  transition: background-color color 0.3s linear;
  overflow: hidden; }

.shareWrapper.general > .btn.facebook {
  padding-top: 7px; }

.shareWrapper.general > .btn.whatsapp {
  font-size: 2.2rem;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0; }

.shareWrapper.general > .btn.whatsapp i {
  position: relative;
  top: 7px;
  left: 1px; }

.shareWrapper.general > .btn.link {
  font-size: 1.3rem;
  position: relative;
  margin: 0;
  padding: 0;
  line-height: 0; }

.shareWrapper.general > .btn.link i {
  position: relative;
  top: 12px; }

.shareWrapper.general > .btn:hover {
  background-color: #fe5258;
  color: white; }

/*==========Page Headings==========*/
#pageHd {
  position: relative;
  top: 180px;
  font-size: 3rem;
  font-weight: 700;
  color: white;
  text-align: center; }

#pageHd > .subhd {
  font-size: 1.6rem;
  font-weight: 400;
  padding-bottom: 5px; }

#pageHd > .keyword {
  display: inline-block;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  line-height: normal;
  padding: 14px 30px 14px 30px;
  color: white;
  font-weight: 700;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 6px);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 auto;
  transition: background-color 0.3s linear; }

#pageHd > .keyword > #iconHash {
  position: relative;
  top: 6px;
  left: -2px; }

#pageHd > .moreLink {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 1.6rem; }

#pageHd > .moreLink > #iconArrowBack {
  position: relative;
  width: 30px;
  height: 30px;
  top: 8px;
  margin-right: 5px; }

/*==========Category page==========*/
#catColWrapper {
  position: relative;
  /*display:block; overflow-y:auto; overflow-x:hidden; height:auto;*/
  clear: both;
  top: 220px;
  width: 90vw;
  margin: 0 auto;
  overflow: hidden;
  /*height:3000px;*/
  /*border:1px solid #CCC;*/ }

/*Grid*/
/** replace by " #catColWrapper > #ajax-load-more" in page by falcon **/
/*#catColWrapper  .catLandingGrid {*/
  /*position: relative;*/
  /*width: calc(100% - 350px);*/
  /*float: left;*/
  /*padding-bottom: 100px;*/
  /*overflow: hidden; }*/

#catColWrapper  .catLandingGrid > .item {
  display: inline-block;
  width: calc((100% - 75px)/3);
  min-width: 320px;
  /*(100% - margins)*/
  margin: 0 15px 20px 10px;
  float: left;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

@media screen and (min-width: 1221px) and (max-width: 1640px) {
  #catColWrapper  .catLandingGrid > .item {
    width: calc((100% - 50px)/2); } }

@media screen and (max-width: 1220px) {
  #catColWrapper  .catLandingGrid > .item {
    width: calc(100% - 25px); } }

/*==========Sidebar==========*/
#sidebar {
  position: relative;
  float: left;
  width: 350px;
  /*will-change: min-height;*/ }

#sidebar > .inner {
  position: relative;
  padding: 0 0 0 30px;
  /*height:3000px;*/
  /*border:1px solid #000;*/
  /*transform: translate(0, 0); transform: translate3d(0, 0, 0);will-change: position, transform;*/ }

/*==========General Listing page==========*/
#generalColWrapper {
  position: relative;
  clear: both;
  top: 220px;
  width: 90vw;
  margin: 0 auto;
  overflow: hidden; }

#generalColWrapper  .generalGrid {
  position: relative;
  width: 100%;
  float: left;
  padding-bottom: 100px;
  overflow: hidden; }

#generalColWrapper  .generalGrid > .item {
  display: inline-block;
  width: calc((100% - 100px)/4);
  min-width: 320px;
  /*(100% - margins)*/
  margin: 0 15px 20px 10px;
  float: left;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

@media screen and (min-width: 1245px) and (max-width: 1665px) {
  #generalColWrapper  .generalGrid > .item {
    width: calc((100% - 75px)/3); } }

@media screen and (max-width: 1244px) {
  #generalColWrapper  .generalGrid > .item {
    width: calc((100% - 50px)/2); } }

/*==========Article page==========*/
#articleColWrapper {
  position: relative;
  clear: both;
  top: 180px;
  width: 1200px;
  margin: 0 auto 160px auto;
  overflow: hidden;
  /*border:1px solid #000;*/ }

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  #articleColWrapper {
    width: 980px; } }

@media screen and (min-width: 991px) and (max-width: 1023px) {
  #articleColWrapper {
    width: 940px; } }

@media screen and (max-width: 990px) {
  #articleColWrapper {
    width: 680px; } }

/*Grid*/
#articleColWrapper > #singleArticleTitle {
  width: 100%;
  clear: both;
  text-align: center;
  color: white;
  font-size: 3.4rem;
  margin-bottom: 40px;
  padding-top: 10px; }

@media screen and (max-width: 990px) {
  #articleColWrapper > #singleArticleTitle {
    font-size: 2.8rem; } }

#articleColWrapper > #singleArticleTitle .title {
  font-weight: 700; }
/*for seo ,div replaced to h1*/
#articleColWrapper > #singleArticleTitle >h1.title {
    font-size: 3.4rem;
     }


#articleColWrapper > #singleArticleTitle .postCat {
  display: inline-block;
  position: relative;
  top: -10px;
  /*border:1px solid $colorWhite50;*/
  text-align: center;
  /*margin-bottom:20px;*/
  margin-right: 3px; }

#articleColWrapper > #singleArticleCnt {
  position: relative;
  width: calc(100% - 350px);
  float: left;
  padding: 30px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9); }

@media screen and (max-width: 990px) {
  #articleColWrapper > #singleArticleCnt {
    width: 100%; } }

#articleColWrapper > #singleArticleTitle > .shareWrapper {
  position: relative; }

#articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  border-color: white;
  background-color: transparent;
  color: white; }

#articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  border-color: white;
  color: #51B2BD;
  background-color: white !important; }

#articleColWrapper > #singleArticleTitle > .credits {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 10px; }

#articleColWrapper > #singleArticleTitle > .credits > .item {
  padding: 0 10px; }

#articleColWrapper > #singleArticleTitle > .blogTitleWrapper {
  display: block;
  padding: 10px 0 15px 0; }

#articleColWrapper > #singleArticleTitle > .blogTitleWrapper > .title {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.8); }

#articleColWrapper > #singleArticleTitle > .blogTitleWrapper > .avatar {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: cover;
  background-position: center center;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

body.bgGeneralThree #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  border-color: white;
  background-color: #FF8561;
  color: white; }

body.bgGeneralThree #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  border-color: white;
  color: #FF8561;
  background-color: white; }

/*spacing*/
#articleColWrapper > #singleArticleCnt > .inner p {
  line-height: 1.8;
  margin-top: 20px;
  margin-bottom: 35px; }

#articleColWrapper > #singleArticleCnt > .inner p a {
  color: #51B2BD;
  border-bottom: 1px solid #51B2BD; }

#articleColWrapper > #singleArticleCnt > .inner h2 {
  font-size: 3rem;
  color: #51B2BD;
  /*font-weight:700;*/
  line-height: 1.8;
  margin-bottom: 35px; }

/**added by falcon**/
#articleColWrapper > #singleArticleCnt > .inner  img{
    cursor: zoom-in;
}

#articleColWrapper > #singleArticleCnt > .inner > img {
  margin-bottom: 40px; }

#articleColWrapper > #singleArticleCnt > .inner a.img {
  display: block;
  margin-bottom: 40px; }

#articleColWrapper > #singleArticleCnt > .inner .imgWrapper {
  margin-bottom: 40px; max-width: 100%;}/**added by falocon**/

#articleColWrapper > #singleArticleCnt > .inner .imgWrapper > img {
  margin-bottom: 15px; }

#articleColWrapper > #singleArticleCnt > .inner .imgWrapper > a.img {
  display: block;
  margin-bottom: 15px; }

#articleColWrapper > #singleArticleCnt > .inner .imgWrapper > .caption {
  font-size: 1.6rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: center; }

#articleColWrapper > #singleArticleCnt #hotKeywordWrapper {
  display: block;
  position: relative;
  padding: 0 0 40px 0;
  overflow: auto; }

#articleColWrapper > #singleArticleCnt .hotKeyword {
  background-color: #ffc507;
  background-image: none;
  font-size: 1.6rem;
  padding: 12px 16px 10px 24px; }

#articleColWrapper > #singleArticleCnt .hotKeyword:hover {
  background-color: #fe5258; }

#articleColWrapper > #singleArticleCnt .hotKeyword > #iconHash {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 6px;
  top: 28%; }

#articleColWrapper > #singleArticleCnt #relatedArticles {
  display: block;
  position: relative;
  padding: 20px 0 60px 0;
  overflow: auto; }

#articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  font-size: 1.6rem;
  color: #51B2BD;
  padding-bottom: 10px; }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner {
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item {
  display: block;
  width: 100%;
  clear: both;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  overflow: auto; }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item > .title {
  font-size: 1.6rem;
  width: 80%;
  float: left; }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item > .time {
  float: right;
  padding-left: 2%;
  width: 18%;
  text-align: right;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.6); }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item > .time #iconTime {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: 3px;
  margin-right: 3px; }

#articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item > .time #iconTime .st0, #articleColWrapper > #singleArticleCnt #relatedArticles > .inner > .item > .time #iconTime .st1 {
  stroke: rgba(0, 0, 0, 0.6); }

#articleColWrapper > #singleArticleCnt > .inner .credits {
  font-size: 1.6rem;
  color: rgba(0, 0, 0, 0.5); }

@media screen and (max-width: 990px) {
  #articleColWrapper > #sidebar {
    display: none; } }

/*---Article YouTube embed video---*/
#articleColWrapper > #singleArticleCnt .youtubeWrapper {
  width: 100%;
  margin: 0 auto 60px auto; }

#articleColWrapper > #singleArticleCnt .youtubeWrapper .youtubeEmbedVideo {
  position: relative;
  padding-bottom: 53%;
  /* 16:9 */
  padding-top: 25px;
  height: 0; }

#articleColWrapper > #singleArticleCnt .youtubeWrapper .youtubeEmbedVideo iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#articleColWrapper > #singleArticleCnt .youtubeWrapper .youtubeOverlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

#articleColWrapper > #singleArticleCnt .youtubeWrapper .youtubeOverlay .dimmedWrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
  text-align: center; }

#articleColWrapper > #singleArticleCnt .youtubeWrapper:hover .youtubeOverlay .dimmedWrapper {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.2); }

#articleColWrapper > #singleArticleCnt .youtubeWrapper .youtubeOverlay .dimmedWrapper #iconPlay {
  position: absolute;
  z-index: 2;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px; }

/*Article Themes*/
body.bgArticle01 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #51B2BD; }

body.bgArticle02 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #CB8085; }

body.bgArticle03 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #515F8C; }

body.bgArticle04 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #D3AF8F; }

body.bgArticle05 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #DC7C60; }

body.bgArticle06 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #AD8F5E; }

body.bgArticle07 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #7BA591; }

body.bgArticle08 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn {
  background-color: #8B7382; }

body.bgArticle01 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #51B2BD; }

body.bgArticle02 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #CB8085; }

body.bgArticle03 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #515F8C; }

body.bgArticle04 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #D3AF8F; }

body.bgArticle05 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #DC7C60; }

body.bgArticle06 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #AD8F5E; }

body.bgArticle07 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #7BA591; }

body.bgArticle08 #articleColWrapper > #singleArticleTitle > .shareWrapper > .btn:hover {
  color: #8B7382; }

body.bgArticle01 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #51B2BD;
  border-color: #51B2BD; }

body.bgArticle02 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #CB8085;
  border-color: #CB8085; }

body.bgArticle03 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #515F8C;
  border-color: #515F8C; }

body.bgArticle04 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #D3AF8F;
  border-color: #D3AF8F; }

body.bgArticle05 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #DC7C60;
  border-color: #DC7C60; }

body.bgArticle06 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #AD8F5E;
  border-color: #AD8F5E; }

body.bgArticle07 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #7BA591;
  border-color: #7BA591; }

body.bgArticle08 #articleColWrapper > #singleArticleCnt > .inner p a {
  color: #8B7382;
  border-color: #8B7382; }

body.bgArticle01 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #51B2BD; }

body.bgArticle02 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #CB8085; }

body.bgArticle03 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #515F8C; }

body.bgArticle04 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #D3AF8F; }

body.bgArticle05 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #DC7C60; }

body.bgArticle06 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #AD8F5E; }

body.bgArticle07 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #7BA591; }

body.bgArticle08 #articleColWrapper > #singleArticleCnt > .inner h2 {
  color: #8B7382; }

body.bgArticle01 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #51B2BD; }

body.bgArticle02 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #CB8085; }

body.bgArticle03 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #515F8C; }

body.bgArticle04 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #D3AF8F; }

body.bgArticle05 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #DC7C60; }

body.bgArticle06 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #AD8F5E; }

body.bgArticle07 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #7BA591; }

body.bgArticle08 #articleColWrapper > #singleArticleCnt #relatedArticles > .subhd {
  color: #8B7382; }

/*---Article Slick carousel styles--*/
#articleColWrapper #imageSlider {
  position: relative;
  margin-top: 30px; }

#articleColWrapper #imageSlider .num {
  position: absolute;
  color: rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0.8);
  line-height: normal;
  padding: 8px 7px 5px 7px;
  z-index: 2;
  font-size: 1.2rem;
  text-align: center;
  top: 30px;
  left: 10px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; }

#articleColWrapper #imageSlider .controls {
  position: absolute;
  top: 38%;
  left: 25px;
  z-index: 5;
  width: 90%;
  color: rgba(0, 0, 0, 0.7); }

#articleColWrapper #imageSlider .controls .slick-prev:before, #articleColWrapper #imageSlider .controls .slick-next:before {
  color: white; }

#articleColWrapper #imageSlider .controls .slick-prev, #articleColWrapper #imageSlider .controls .slick-next {
  padding: 20px;
  /*border:1px solid #000;*/ }

#articleColWrapper #imageSlider .controls .slick-prev {
  left: -40px; }

#articleColWrapper #imageSlider .slideArticleGallery {
  /*top:-35px;*/
  overflow: hidden; }

#articleColWrapper #imageSlider .slideArticleGallery .slideWrapper {
  margin: 0; }

#articleColWrapper #imageSlider .slideArticleGallery .slideWrapper:focus {
  outline: none; }

#articleColWrapper #imageSlider .slideArticleGallery .slideWrapper .imgWrapper {
  text-align: center;
  margin-top: 20px; }

#articleColWrapper #imageSlider .slideArticleGallery .slideWrapper .imgWrapper img {
  display: inline-block;
  /*max-height:580px;*/ }

#articleColWrapper #imageSlider .slideArticleGallery .slick-dots {
  bottom: 15px; }

/*---Facebook comment module--*/
#commentWrapper {
  position: relative;
  width: 100%;
  padding: 0 0 50px 0; }

#commentWrapper > .btnWrapper {
  display: block;
  position: relative;
  width: 100%;
  height: 60px; }

#commentWrapper > .btnWrapper > .divLine {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: rgba(0, 0, 0, 0.1); }

#commentWrapper > .btnWrapper > .btnComment {
  position: absolute;
  left: 50%;
  margin-left: -30px;
  display: block;
  width: 60px;
  height: 60px;
  background-color: #504C8D;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  transition: background-color 0.3s linear;
  z-index: 2; }

#commentWrapper > .btnWrapper > .btnComment:hover {
  cursor: pointer;
  background-color: #4266b2; }

#commentWrapper > .btnWrapper > .btnComment > #iconComment {
  position: relative;
  top: 12px; }

#commentWrapper > .fbCommentWrapper {
  display: none;
  width: 100%; }

#commentWrapper > .fbCommentWrapper.is-shown {
  display: block;
  /*margin-bottom:40px;*/ }

/*==========Recommended Articles==========*/
#recommendedArticles {
  display: block;
  position: relative;
  margin-bottom: 10px;
  width: 100%;
  overflow: auto; }

#recommendedArticles > .subhd {
  font-size: 1.6rem;
  color: #51B2BD; }

#recommendedArticles > .list {
  margin-top: 10px; }

#recommendedArticles > .list > .item {
  position: relative;
  width: 49%;
  float: left;
  background-color: rgba(255, 255, 255, 0.4);
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 1% 0 0;
  transition: background-color 0.3s linear; }

#recommendedArticles > .list > .item:hover {
  background-color: white; }

#recommendedArticles > .list > .item > .inner {
  padding: 0 5px; }

#recommendedArticles > .list > .item > .inner > .infoWrapper {
  position: relative;
  top: -3px;
  display: block;
  width: 100%;
  height: auto;
  clear: both;
  overflow: auto;
  padding-bottom: 5px; }

#recommendedArticles > .list > .item > .inner > .infoWrapper > .time {
  margin-right: 0;
  color: rgba(0, 0, 0, 0.5); }

#recommendedArticles > .list > .item > .inner > .infoWrapper > .viewCount {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.5); }

#recommendedArticles > .list > .item > .inner > .infoWrapper > .time #iconTime .st0, #recommendedArticles > .list > .item > .inner > .infoWrapper > .time #iconTime .st1 {
  stroke: rgba(0, 0, 0, 0.5); }

#recommendedArticles > .list > .item > .inner > .infoWrapper > .viewCount #iconEye .st0 {
  stroke: rgba(0, 0, 0, 0.5); }

#recommendedArticles > .list > .item > .inner > .infoWrapper > .viewCount #iconEye .st1 {
  fill: rgba(0, 0, 0, 0.5); }

#recommendedArticles > .list > .item > .inner > .cntWrapper {
  display: block;
  width: 100%;
  height: auto;
  clear: both;
  overflow: auto;
  padding: 5px 0; }

#recommendedArticles > .list > .item > .inner > .cntWrapper:hover {
  color: black; }

#recommendedArticles > .list > .item > .inner > .cntWrapper > .imgWrapper {
  width: 40%;
  height: 100px;
  background-size: cover;
  background-position: top center;
  float: left;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 0 !important; }

#recommendedArticles > .list > .item > .inner > .cntWrapper > .titleWrapper {
  width: 57%;
  float: left;
  font-size: 1.5rem;
  margin: 0 0 0 3%;
  line-height: 1.4; }

/*Article Themes*/
body.bgArticle01 #recommendedArticles > .subhd {
  color: #51B2BD; }

body.bgArticle02 #recommendedArticles > .subhd {
  color: #CB8085; }

body.bgArticle03 #recommendedArticles > .subhd {
  color: #515F8C; }

body.bgArticle04 #recommendedArticles > .subhd {
  color: #D3AF8F; }

body.bgArticle05 #recommendedArticles > .subhd {
  color: #DC7C60; }

body.bgArticle06 #recommendedArticles > .subhd {
  color: #AD8F5E; }

body.bgArticle07 #recommendedArticles > .subhd {
  color: #7BA591; }

body.bgArticle08 #recommendedArticles > .subhd {
  color: #8B7382; }

/*==========Triggers==========*/
#sidebarTrigger01 {
  position: absolute;
  top: 100vh;
  right: 20px;
  width: 100px;
  height: 3px;
  /*background-color:#000;*/ }

/*==========Top 5 module==========*/
.top5module {
  position: relative;
  /*position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top:150px;*/
  padding-bottom: 80px;
  width: 100%;
  /*border:1px solid #CCC;*/ }

.top5module #iconCrown {
  position: absolute;
  top: 15px;
  left: -10px;
  width: 35px;
  height: 35px; }

.top5module #iconLoopTime {
  position: absolute;
  top: 15px;
  left: -10px;
  width: 35px;
  height: 35px; }

.top5module > .title {
  position: relative;
  top: 25px;
  left: 30px;
  font-size: 1.8rem;
  color: white; }

.top5module > .title > .en {
  position: relative;
  top: -2px;
  left: 6px;
  font-weight: 700;
  font-size: 1.2rem; }

.top5module .divLine {
  position: relative;
  top: 8px;
  left: 160px;
  width: 160px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8); }

.top5module .divLine.long {
  position: relative;
  top: 8px;
  left: 110px;
  width: 210px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8); }

.top5module > .list {
  margin-top: 50px; }

.top5module > .list > .item {
  position: relative;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  transition: background-color 0.3s linear; }

.top5module > .list > .item:hover {
  background-color: white; }

.top5module > .list > .item > .inner {
  padding: 0 5px; }

.top5module > .list > .item > .inner > .infoWrapper {
  position: relative;
  top: -3px;
  display: block;
  width: 100%;
  height: auto;
  clear: both;
  overflow: auto;
  padding-bottom: 5px; }

.top5module > .list > .item > .inner > .infoWrapper > .time {
  margin-right: 0;
  color: rgba(0, 0, 0, 0.5); }

.top5module > .list > .item > .inner > .infoWrapper > .viewCount {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  padding-left: 10px;
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.5); }

.top5module > .list > .item > .inner > .infoWrapper > .time #iconTime .st0, .top5module > .list > .item > .inner > .infoWrapper > .time #iconTime .st1 {
  stroke: rgba(0, 0, 0, 0.5); }

.top5module > .list > .item > .inner > .infoWrapper > .viewCount #iconEye .st0 {
  stroke: rgba(0, 0, 0, 0.5); }

.top5module > .list > .item > .inner > .infoWrapper > .viewCount #iconEye .st1 {
  fill: rgba(0, 0, 0, 0.5); }

.top5module > .list > .item > .inner > .cntWrapper {
  display: block;
  width: 100%;
  height: auto;
  clear: both;
  overflow: auto;
  padding: 5px 0; }

.top5module > .list > .item > .inner > .cntWrapper:hover {
  color: black; }

.top5module > .list > .item > .inner > .cntWrapper > .imgWrapper {
  width: 40%;
  height: 100px;
  background-size: cover;
  background-position: top center;
  float: left;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px; }

.top5module > .list > .item > .inner > .cntWrapper > .titleWrapper {
  width: 57%;
  float: left;
  font-size: 1.5rem;
  margin: 0 0 0 3%;
  line-height: 1.4; }

/*==========Hot Keywords Wrappers============*/
.sidebarHotKeywordWrapper {
  display: block;
  position: relative;
  clear: both;
  /*position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top:200px;*/
  /*margin-top:1000px;*/
  width: 100%;
  overflow: auto;
  padding: 40px 0 60px 0; }

/*==========Hot Keywords============*/
.hotKeyword {
  position: relative;
  display: inline-block;
  float: left;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  line-height: 1;
  padding: 18px 20px 14px 30px;
  /*height:56px;*/
  color: white;
  font-size: 2rem;
  font-weight: 700;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 6px);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 10px 10px 0;
  transition: background-color 0.3s linear; }

.hotKeyword:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
  cursor: pointer; }

.hotKeyword > #iconHash {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 28%; }

/*==========Blog - Index page==========*/
#allBlogIndex {
  position: relative;
  clear: both;
  top: 220px;
  width: 1200px;
  margin: 0 auto 50px auto;
  overflow: hidden;
  /*border:1px solid #000;*/ }

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  #allBlogIndex {
    width: 980px; } }

@media screen and (min-width: 991px) and (max-width: 1023px) {
  #allBlogIndex {
    width: 940px; } }

@media screen and (max-width: 990px) {
  #allBlogIndex {
    width: 96%; } }

#allBlogIndex > .grid {
  position: relative;
  clear: both;
  left: 2%;
  /*center the center 96%*/ }

/*#allBlogIndex > .grid > .grid-sizer{width:22%;}*/
#allBlogIndex > .grid > .item {
  position: relative;
  float: left;
  width: 44%;
  margin: 0 2% 20px 2%;
  padding: 10px 0 25px 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

#allBlogIndex > .grid > .item:nth-child(1), #allBlogIndex > .grid > .item:nth-child(2) {
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.3); }

#allBlogIndex > .grid > .item > .portrait {
  width: 120px;
  height: 120px;
  float: left;
  background-size: cover;
  background-position: center center;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-right: 20px; }

#allBlogIndex > .grid > .item > .inner {
  position: relative;
  padding: 15px; }

#allBlogIndex > .grid > .item > .inner > .name {
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8); }

#allBlogIndex > .grid > .item > .inner > .title {
  font-size: 1.6rem;
  color: rgba(0, 0, 0, 0.6); }

#allBlogIndex > .grid > .item > .inner > .count {
  position: relative;
  top: 0;
  right: 0;
  font-size: 1.2rem;
  color: white; }

#allBlogIndex > .grid > .item > .inner > .count #iconBook {
  position: relative;
  top: 4px;
  margin-right: 4px;
  width: 18px;
  height: 18px; }

#allBlogIndex > .grid > .item > .inner > .count #iconBook .st0 {
  stroke: white; }

/*==========Blogger - The holding page==========*/
#bloggerHoldingWrapper {
  position: relative;
  clear: both;
  top: 200px;
  width: 1200px;
  margin: 0 auto 160px auto;
  overflow: hidden;
  /*border:1px solid #000;*/ }

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  #bloggerHoldingWrapper {
    width: 980px; } }

@media screen and (min-width: 991px) and (max-width: 1023px) {
  #bloggerHoldingWrapper {
    width: 940px; } }

@media screen and (max-width: 990px) {
  #bloggerHoldingWrapper {
    width: 680px; } }

#bloggerHoldingWrapper #masthead {
  position: relative;
  width: 100%;
  height: 90px;
  z-index: 1;
  /*border:1px solid #000;*/
  -moz-border-top-left-radius: 10px;
  -ms-border-top-left-radius: 10px;
  -o-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -o-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px; }

#bloggerHoldingWrapper #masthead.cover {
  height: 400px;
  background-size: cover;
  background-position: top center; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper {
  position: absolute;
  bottom: -100px;
  z-index: 2;
  display: block;
  clear: both;
  padding: 0 0 0 30px;
  overflow: auto;
  /*border:1px solid #CCC;*/
  width: 100%; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .titleWrapper {
  position: relative;
  float: left;
  top: 85px;
  left: 20px; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .titleWrapper > .name {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 8px; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .titleWrapper > .title {
  font-size: 1.8rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.7); }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .avatar {
  position: relative;
  display: inline-block;
  float: left;
  width: 160px;
  height: 160px;
  background-size: cover;
  background-position: center center;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .count {
  position: absolute;
  top: 80px;
  right: 80px;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.5); }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .count #iconBook {
  position: relative;
  top: 4px;
  margin-right: 8px;
  width: 20px;
  height: 20px; }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .count #iconBook .st0 {
  stroke: rgba(0, 0, 0, 0.5); }

#bloggerHoldingWrapper #masthead .blogTitleWrapper > .postCat {
  position: absolute;
  top: 80px;
  right: 20px; }

#bloggerHoldingWrapper #cntList {
  position: relative;
  top: -10px;
  z-index: 0;
  background-color: rgba(255, 255, 255, 0.8);
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }

#bloggerHoldingWrapper #cntList > .inner {
  padding: 140px 30px 80px 30px; }

#bloggerHoldingWrapper #cntList > .inner  .item {
  position: relative;
  display: block;
  padding: 35px 0 25px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  color: black;
  padding-bottom: 10px;
  transition: color 0.3s linear; }

body.bgBlogTheme01 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #FF838B; }

body.bgBlogTheme02 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #AD8F5E; }

body.bgBlogTheme03 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #5A6D8D; }

body.bgBlogTheme04 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #7C6C76; }

body.bgBlogTheme05 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #FFB000; }

body.bgBlogTheme06 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #689E64; }

body.bgBlogTheme07 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #3C6FBA; }

body.bgBlogTheme08 #bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .title {
  color: #FE5B50; }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper:hover > .title {
  color: #fe5258 !important; }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .excerpt {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.7); }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .excerptWrapper {
  clear: both;
  width: 100%;
  overflow: auto; }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .excerptWrapper > .excerpt {
  float: left;
  width: calc(100% - 240px);
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.7); }

#bloggerHoldingWrapper #cntList > .inner  .item > .linkWrapper > .excerptWrapper > .thumb {
  float: left;
  display: inline-block;
  width: 220px;
  height: 150px;
  margin-right: 20px;
  background-size: cover;
  background-position: center center;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

#bloggerHoldingWrapper #cntList > .inner  .item > .infoWrapper {
  display: inline-block;
  padding: 10px 0 0 0; }

#bloggerHoldingWrapper #cntList > .inner  .item > .shareWrapper {
  position: absolute;
  bottom: 15px;
  right: 5px; }

/*==========More bloggers module==========*/
#moreBloggerModule {
  position: relative;
  clear: both;
  top: 140px;
  width: 1200px;
  margin: 0 auto 20px auto;
  overflow: hidden;
  /*border:1px solid #000;*/ }

@media screen and (min-width: 1024px) and (max-width: 1300px) {
  #moreBloggerModule {
    width: 980px; } }

@media screen and (min-width: 991px) and (max-width: 1023px) {
  #moreBloggerModule {
    width: 940px; } }

@media screen and (max-width: 990px) {
  #moreBloggerModule {
    width: 680px; } }

#moreBloggerModule .hd {
  color: white;
  font-size: 1.6rem;
  text-align: center;
  padding-bottom: 40px; }

#moreBloggerModule > .grid {
  clear: both; }

#moreBloggerModule > .grid > .item {
  position: relative;
  width: 49%;
  height: 80px;
  float: left;
  background-color: rgba(255, 255, 255, 0.4);
  -moz-border-top-left-radius: 60px;
  -ms-border-top-left-radius: 60px;
  -o-border-top-left-radius: 60px;
  -webkit-border-top-left-radius: 60px;
  border-top-left-radius: 60px;
  -moz-border-bottom-left-radius: 60px;
  -ms-border-bottom-left-radius: 60px;
  -o-border-bottom-left-radius: 60px;
  -webkit-border-bottom-left-radius: 60px;
  border-bottom-left-radius: 60px;
  -moz-border-top-right-radius: 10px;
  -ms-border-top-right-radius: 10px;
  -o-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  -ms-border-bottom-right-radius: 10px;
  -o-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 2%;
  transition: background-color 0.3s linear; }

#moreBloggerModule > .grid > .item:hover {
  background-color: white; }

#moreBloggerModule > .grid > .item:nth-child(odd) {
  margin-right: 1%; }

#moreBloggerModule > .grid > .item:nth-child(even) {
  margin-left: 1%; }

#moreBloggerModule > .grid > .item > .inner {
  padding: 15px 20px 0 95px; }

#moreBloggerModule > .grid > .item > .inner > .avatar {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: cover;
  background-position: center center;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%; }

#moreBloggerModule > .grid > .item > .inner > .name {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8); }

#moreBloggerModule > .grid > .item > .inner > .title {
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.6); }

#moreBloggerModule > .grid > .item > .inner > .count {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.4); }

#moreBloggerModule > .grid > .item > .inner > .count #iconBook {
  position: relative;
  top: 4px;
  margin-right: 4px;
  width: 18px;
  height: 18px; }

#moreBloggerModule > .grid > .item > .inner > .count #iconBook .st0 {
  stroke: rgba(0, 0, 0, 0.4); }

#moreBloggerModule > .moreLink {
  display: block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 1.6rem; }

#moreBloggerModule > .moreLink > #iconArrowBack {
  position: relative;
  width: 30px;
  height: 30px;
  top: 8px;
  margin-right: 5px; }

/*==========Featured video on home page==========*/
#homeFeaturedVideo {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-image: url(../images/pattern04.png);
  background-repeat: repeat;
  background-position: center center;
  /*set 90vh instead of 100vh for iPad*/ }

@media screen and (max-width: 768px) {
  #homeFeaturedVideo {
    height: 45vh;
    /*recalculate using JS - for mobile device*/ } }

#homeFeaturedVideo > .inner {
  padding: 25px 0 0 40px; }

#homeFeaturedVideo #introVideo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

#homeFeaturedVideo #introVideo video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

/*#homeFeaturedVideo #introVideo > .overlay{position:absolute; top:0; left:0; z-index:9; width:100%; height:100%; background-color:rgba(0,0,0,0.2);}*/
#homeFeaturedVideo #introVideo > .topOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 300px;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: -o-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: -ms-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }

#homeFeaturedVideo #introVideo > .btmOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 40vh;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); }

#homeFeaturedVideo #introVideo > .titleWrapper {
  position: absolute;
  width: 85%;
  left: 30px;
  top: 20px;
  /*font-weight:700;*/
  z-index: 10;
  /*width:70%; min-width:450px;*/ }

#homeFeaturedVideo #introVideo > .titleWrapper > .postCat {
  position: relative;
  z-index: 11;
  margin-bottom: 10px;
  float: left;
  margin-right: 15px; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #homeFeaturedVideo #introVideo > .titleWrapper > .postCat {
      /* IE10+ */
      top: 8px; } }
  @supports (-ms-ime-align: auto) {
    #homeFeaturedVideo #introVideo > .titleWrapper > .postCat {
      /* IE Edge */
      top: 5px; } }
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    #homeFeaturedVideo #introVideo > .titleWrapper > .postCat {
      /* Chrome*/
      top: 3px; } }

#homeFeaturedVideo #introVideo > .titleWrapper > .title {
  position: relative;
  z-index: 10;
  top: 4px;
  font-size: 2.2rem;
  color: white;
  margin-right: 150px; }

#homeFeaturedVideo #introVideo > .infoWrapper {
  position: absolute;
  right: 40px;
  top: 20px;
  z-index: 10; }

#homeFeaturedVideo #introVideo > .infoWrapper > .time {
  position: relative;
  top: 5px;
  float: left;
  font-size: 1.2rem;
  color: white;
  margin-right: 20px; }

#homeFeaturedVideo #introVideo > .infoWrapper > .time #iconTime {
  position: relative;
  width: 16px;
  height: 16px;
  overflow: hidden;
  top: 3px;
  margin-right: 6px; }

#homeFeaturedVideo #introVideo > .infoWrapper > .time #iconTime .st0, #homeFeaturedVideo #introVideo > .infoWrapper > .time #iconTime .st1 {
  stroke: white; }

#homeFeaturedVideo #introVideo > .infoWrapper > .viewCount {
  position: relative;
  top: 2px;
  float: right;
  font-size: 1.2rem;
  z-index: 10;
  color: white; }

#homeFeaturedVideo #introVideo > .infoWrapper > .viewCount #iconEye {
  position: relative;
  width: 20px;
  height: 20px;
  overflow: hidden;
  top: 5px;
  margin-right: 6px; }

#homeFeaturedVideo #introVideo > .infoWrapper > .viewCount #iconEye .st0 {
  stroke: white; }

#homeFeaturedVideo #introVideo > .infoWrapper > .viewCount #iconEye .st1 {
  fill: white; }

#homeFeaturedVideo #introVideo > #iconPlayVideo {
  position: absolute;
  width: 60px;
  z-index: 12;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out;
  transform-origin: center center;
  opacity: 0.8; }

#homeFeaturedVideo #introVideo > a#iconPlayVideo:hover {
  cursor: pointer;
  /*transform: translate(-50%, -46%) scale(1.8);*/
  opacity: 1; }

/*==========Post item: General styles==========*/
a.postCat {
  display: inline-block;
  line-height: normal;
  padding: 5px 10px 5px 10px;
  font-size: 1.2rem;
  font-weight: 700;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: white !important;
  /*letter-spacing: 1px;*/ }

.postCat.local {
  background-color: #ff6032; }

.postCat.asia {
  background-color: #914b7b; }

.postCat.europe {
  background-color: #2b71b6; }

.postCat.sports {
  background-color: #41b398; }

.postCat.blog {
  background-color: #ff8561; }

#singleArticleTitle .postCat.local {
  color: #ff6032 !important;
  background-color: white; }

#singleArticleTitle .postCat.asia {
  color: #914b7b !important;
  background-color: white; }

#singleArticleTitle .postCat.europe {
  color: #2b71b6 !important;
  background-color: white; }

#singleArticleTitle .postCat.sports {
  color: #41b398 !important;
  background-color: white; }

#singleArticleTitle .postCat.blog {
  color: #ff8561 !important;
  background-color: white; }

/*#singleArticleTitle .postCat.local, #singleArticleTitle .postCat.asia, #singleArticleTitle .postCat.europe, #singleArticleTitle .postCat.sport{background-color:transparent;}
#singleArticleTitle .postCat.local:hover, #singleArticleTitle .postCat.asia:hover, #singleArticleTitle .postCat.europe:hover, #singleArticleTitle .postCat.sport:hover{background-color:white; color:$colorBlack60!important;}*/
/*==========Magazine==========*/
#magazineWrapper {
  position: relative;
  clear: both;
  top: 220px; }

#currentIssueWrapper {
  text-align: center;
  padding-bottom: 80px; }

#currentIssueWrapper > .magazineCover {
  display: block;
  width: 480px;
  height: 624px;
  background-size: cover;
  background-position: top center;
  margin: 0 auto 30px auto;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); }

#currentIssueWrapper > .magazineCover:hover {
  cursor: pointer; }

#currentIssueWrapper > .infoWrapper {
  padding: 20px 30px 0 30px;
  color: white; }

#currentIssueWrapper > .infoWrapper > .issue {
  font-size: 1.8rem; }

#currentIssueWrapper > .infoWrapper > .title {
  font-size: 3rem;
  font-weight: 700; }

#currentIssueWrapper > .publishedDate {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8); }

#currentIssueWrapper > .btnBuy {
  display: inline-block;
  padding: 20px 30px 18px 30px;
  margin-top: 30px;
  font-size: 1.8rem;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  background-color: #fe5258;
  color: white;
  transition: background-color 0.3s ease-in-out; }

#currentIssueWrapper > .btnBuy:hover {
  cursor: pointer;
  background-color: #51B2BD; }

#currentIssueWrapper > .remarks {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.4);
  padding: 40px 30px 0 30px; }

/*Back issues*/
#backIssueWrapper {
  background-color: rgba(255, 255, 255, 0.6);
  width: 100%;
  overflow: auto; }

#backIssueWrapper > .inner {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 120px 0 0 0;
  clear: both; }

@media screen and (min-width: 991px) and (max-width: 1199px) {
  #backIssueWrapper > .inner {
    width: 800px; } }

@media screen and (max-width: 990px) {
  #backIssueWrapper > .inner {
    width: 680px; } }

#backIssueWrapper > .inner > .subhd {
  font-size: 2.2rem;
  font-weight: 700;
  color: #A89C98;
  padding-bottom: 60px; }

#backIssueWrapper > .inner > .item {
  width: 50%;
  float: left; }

#backIssueWrapper > .inner > .item > .inner {
  padding: 0 20px 100px 20px; }

#backIssueWrapper > .inner > .item > .inner > .magazineCover {
  display: block;
  width: 300px;
  height: 390px;
  background-size: cover;
  background-position: top center;
  margin: 0 auto 20px auto;
  -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); }

#backIssueWrapper > .inner > .item > .inner > .magazineCover:hover {
  cursor: pointer; }

#backIssueWrapper > .inner > .item > .inner > .infoWrapper {
  padding: 10px 10px 3px 10px;
  color: rgba(0, 0, 0, 0.6);
  min-height: 160px;
  overflow: hidden; }

/*#backIssueWrapper > .inner > .item > .inner > .infoWrapper > .issue{font-size:1.4rem; padding-bottom:3px;}*/
#backIssueWrapper > .inner > .item > .inner > .infoWrapper > .title {
  font-size: 2rem;
  font-weight: 700; }

#backIssueWrapper > .inner > .item > .inner > .infoWrapper > .publishedDate {
  font-size: 1.2rem;
  padding-bottom: 6px;
  color: rgba(0, 0, 0, 0.4); }

#backIssueWrapper > .inner > .item > .inner > .infoWrapper > .btnBuy {
  display: inline-block;
  padding: 10px 15px 8px 15px;
  margin-top: 10px;
  font-size: 1.4rem;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  background-color: #fe5258;
  color: white;
  transition: background-color 0.3s ease-in-out; }

#backIssueWrapper > .inner > .item > .inner > .infoWrapper > .btnBuy:hover {
  cursor: pointer;
  background-color: #51B2BD; }

/*==========Pagination==========*/
.pagination {
  width: 100%;
  font-size: 1.4rem !important;
  text-align: center;
  margin-bottom: 50px; }

.pagination > .pages > .item {
  display: inline-block;
  font-size: 1.4rem !important;
  padding: 8px 10px;
  margin: 0 5px; }

.pagination > .pages > .item.active {
  border-bottom: 2px solid rgba(0, 0, 0, 0.6);
  cursor: default; }

.pagination .btnPrevNext {
  position: relative;
  font-size: 2rem;
  display: inline-block;
  width: 100%;
  padding-bottom: 20px; }

.pagination .btnPrevNext.inactive {
  opacity: 0.2; }

.pagination .btnPrevNext.inactive:hover {
  cursor: default; }

.pagination .btnPrevNext.prev:before {
  font-family: mpwbka;
  content: '\e901';
  left: 0; }

.pagination .btnPrevNext.next:before {
  font-family: mpwbka;
  content: '\e907';
  right: 0; }

/*==========Footer==========*/
#footer {
  display: block;
  position: relative;
  top: 250px;
  width: 100vw;
  text-align: center;
  padding: 50px 0 30px 0;
  overflow: hidden; }

#footer.home {
  top: 100vh; }

@media screen and (max-width: 768px) {
  #footer.home {
    top: 55vh; } }

#footer.fixed {
  position: fixed;
  top: auto;
  bottom: 0; }

#footer > .inner {
  /*padding:25px 0 0 40px;*/ }

#footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important; }

#footer > .inner .copyright {
  text-align: center;
  font-size: 1.2rem;
  color: white;
  padding: 20px 0 0 0; }

#footer > .inner .social {
  text-align: center;
  padding: 0;
  font-size: 2rem; }

#footer > .inner .social a {
  padding: 0 15px;
  color: white; }

#footer > .inner .social a:hover {
  color: rgba(255, 255, 255, 0.7); }

#footer > .inner .footerLinks {
  text-align: center;
  font-size: 1.4rem;
  padding: 20px 0; }

#footer > .inner .footerLinks a {
  color: white;
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.4); }

#footer > .inner .footerLinks a:last-child {
  border-right: none; }

#footer > .inner .footerLinks a:hover {
  color: rgba(255, 255, 255, 0.7); }

/*==========Footer Subscription==========*/
#footer .footerSubscription {
  margin-bottom: 40px; }

#footer .formSubscription {
  display: inline-block;
  position: relative; }

#footer input[type=text] {
  border: 2px solid white;
  background-color: transparent;
  color: white;
  font-size: 1.6rem;
  padding: 15px 50px 15px 12px;
  width: 360px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px; }

#footer input[type=text]:focus {
  background-color: white;
  border-color: white;
  outline: none;
  color: black; }

#footer input[type=submit] {
  position: absolute;
  z-index: 2;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  left: 305px;
  top: 8px; }

#footer input[type=submit]:focus {
  outline: none; }

#footer input[type=checkbox] {
  display: none; }

#footer input[type="checkbox"] + label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -2px 3px 0 0;
  vertical-align: middle;
  background-image: url(../images/checkbox.png);
  background-size: 37px 19px;
  background-position: left top;
  background-repeat: no-repeat;
  cursor: pointer; }

#footer input[type="checkbox"]:checked + label span {
  background-image: url(../images/checkbox.png);
  background-size: 37px 19px;
  background-position: -20px top;
  background-repeat: no-repeat; }

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  #footer input[type="checkbox"] + label span {
    background-image: url(../images/checkbox@2x.png); }
  #footer input[type="checkbox"]:checked + label span {
    background-image: url(../images/checkbox@2x.png); } }

#footer .formSubscription #iconSend {
  position: absolute;
  top: 15px;
  left: 315px;
  width: 25px;
  height: 25px; }

#footer .formSubscription .subsFormLabel {
  position: absolute;
  top: 18px;
  left: 22px;
  font-size: 1.6rem;
  color: white;
  pointer-events: none;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }

#footer .formSubscription .subsFormInputText:focus + .subsFormLabel, #footer .formSubscription .subsFormInputText.has-content + .subsFormLabel {
  font-size: 1.2rem !important;
  top: -22px !important;
  left: 12px !important; }

#footer .formSubscription .wrapperAgreement {
  padding: 10px 1px;
  font-size: 1.4rem;
  color: white; }

#footer .formSubscription .wrapperAgreement a {
  color: white; }

/*==========Search Panel==========*/
#searchPanel {
  display: block;
  position: fixed;
  z-index: 20;
  opacity: 0;
  top: -300vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: -webkit-linear-gradient(0deg, #4eb1bb 0%, rgba(252, 107, 107, 0.85) 100%);
  background: -o-linear-gradient(0deg, #4eb1bb 0%, rgba(252, 107, 107, 0.85) 100%);
  background: -moz-linear-gradient(0deg, #4eb1bb 0%, rgba(252, 107, 107, 0.85) 100%);
  background: -ms-linear-gradient(0deg, #4eb1bb 0%, rgba(252, 107, 107, 0.85) 100%);
  background: linear-gradient(0deg, #4eb1bb 0%, rgba(252, 107, 107, 0.85) 100%);
  /*border:8px solid #FFF;*/
  transform: scale3d(1.3, 1.3, 1);
  -moz-transition: transform 0.5s;
  -ms-transition: transform 0.5s;
  -o-transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s; }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #searchPanel {
      /* IE10+ */
      transform: scale3d(1, 1, 1); } }

#searchPanel.is-shown {
  top: 0;
  opacity: 1;
  transform: scale3d(1, 1, 1); }

#searchPanel .formSearch {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -35vw; }

#searchPanel .formSearch input[type=text] {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 3px solid white;
  background-color: transparent;
  color: white;
  font-size: 3rem;
  padding: 15px 120px 15px 12px;
  width: 70vw; }

#searchPanel .formSearch input[type=submit] {
  position: absolute;
  z-index: 2;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  right: 60px;
  top: 15px; }

#searchPanel .formSearch input[type=submit]:focus {
  outline: none; }

#searchPanel .formSearch #iconSearch {
  position: absolute;
  top: 15px;
  right: 60px;
  width: 40px;
  height: 40px; }

#searchPanel #btnCloseSearchPanel {
  position: absolute;
  top: 18px;
  right: 5px; }

#searchPanel #btnCloseSearchPanel #iconClose {
  width: 30px;
  height: 30px; }

#searchPanel #btnCloseSearchPanel:hover {
  cursor: pointer; }

#searchPanel .searchHotKeywordWrapper {
  position: absolute;
  width: 100%;
  top: 58%;
  text-align: center; }

#searchPanel .searchHotKeywordWrapper > .hotKeyword {
  float: none; }

/*==========YouTube: LITY==========*/
.lity-close:before {
  display: block;
  width: 25px;
  height: 25px;
  content: ' ';
  background-image: url(../icons/icon_close_static.svg);
  background-size: 25px 25px; }

/*==========Advertisement==========*/
.advertWrapper {
  position: relative;
  width: 100%;
  margin: 80px auto 0 auto;
  padding: 15px 0 35px 0;
  background-image: url(../images/pattern.slash.png);
  background-repeat: repeat;
  background-size: 30px 30px;
  background-color: transparent !important;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
    .advertWrapper {
      background-image: url(../images/pattern.slash@2x.png); } }

.advertWrapper.noGap {
  margin: 0 auto; }

.advertWrapper.btmGap {
  margin: 0 auto 60px auto; }

.advertWrapper .subhd {
  text-align: center;
  font-size: 1.2rem;
  color: white;
  padding-top: 2px;
  padding-bottom: 20px; }

.advertWrapper .inner {
  text-align: center; }

.advertWrapper .inner .adItem {
  display: inline-block;
  width: 300px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0;
  margin: 0 auto 10px auto; }

.advertWrapper .closeAd {
  position: absolute;
  top: -1px;
  right: -8px;
  display: inline-block;
  width: 40px;
  height: 40px;
  z-index: 10;
  overflow: hidden;
  font-family: 'mpwbka';
  font-size: 1.4rem;
  color: white !important;
  padding-top: 16px; }

.advertWrapper .closeAd:before {
  content: '\e909'; }

.advertWrapper a.closeAd:hover {
  cursor: pointer; }

.landingFeature > .item.showAd {
  background-color: transparent; }

/*========== for ajax loading more btn by falcon============*/
#iconLoading {
  display: none; }

.alm-loading #iconLoading {
  display: block; }

.alm-loading #btnLoadMore {
  cursor: pointer;
  display: none; }

a#btnLoadMore.done {
  display: none; }

/* photoswipe gallery */
.psgal .row > figure {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.2;
  padding: 0.3rem 0.3rem;
}
.psgal .row > figure figcaption {
  display: none;
}
.psgal.show_caption .row > figure figcaption {
  margin-top: 8px;
  display: block;
}
.psgal .row > figure > a {
  display: block;
  position: relative;
}
.psgal .row a .more {
  top: 0;
  left: 0;
  color: #fff;
  width: 100%;
  height: 100%;
  font-size: 3rem;
  position: absolute;
  font-family: system-ui, sans-serif;
  background: rgba(0, 0, 0, 0.5);
}
iframe.youtube_embed_iframe {
  min-height: 400px;
  border: none;
}