/*
Theme Name: PhotoblogTheme_2
Theme URI: https://photoblog.hk/
Author: Photoblog
Author URI: https://photoblog.hk/
Description: 2018 Photoblog theme
Version: 1.0
*/


@font-face {
    font-family: 'Harabara';
    src: url("69f1400361a215519d385199118a34aa.ttf") format('truetype');
}

body {
    margin: 0;
    color: #333;
    font: normal 14px PingFang HK,Noto Sans TC,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,sans-serif;
}
* {
     box-sizing: border-box;
}

.container {
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    order: 1;
    padding-bottom: 20px;
}

#page {
    min-height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: stretch;
}
@media (max-width: 47.99em) {
    .container {
        overflow-y: hidden;
    }
    .desktop, .desktopBanner {
        display: none;
    }
}
/*
header
 */

.header {
    z-index: 95;
    position: fixed;
    height: 80px;
    background: #fff;
    top: 0;
    left: 0;
    width: calc(100% - (300px + 80 * ((100% - 768px) / 512)));
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 48em) {
    .desktop, .desktopBanner {
        display: block;
    }
}

@media (min-width: 67.5em) {
    .header .innerHeader {
        width: calc(100vw - (320px + 230 * ((100vw - 768px) / 512)));
    }
}

@media (min-width: 48em) {
    .header .innerHeader {
        min-width: 728px;
    }
}
.feature-slider {
    background: #fff;
    height: 320px;
    width: 100%;
    margin: 20px 0;
    overflow-y: hidden;
}

.mobile-search {
    max-width: 100%;
    font-size: 16px;
}
.mobile-search .search-bar {
    display: none;
    position: absolute;
    top: 28%;
    width: 80%;
    margin: 0 5% 0 15%;
    float: none;
    z-index: 1000;
}
.eQdiUA {
    margin-bottom: 1em;
}
@media (min-width: 48em) {
    .search-bar {
        max-width: 300px;
    }
}
.search-bar input {
    height: 36px;
    width: 100%;
    background: #fff;
    padding: 11px;
    box-shadow: inset 0 1px 3px 0 #f2f2f2;
    border: 1px solid #979797;
}
.search-bar .fa {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
    opacity: .5;
}
.mobile-search .search-toggle {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    padding: 10px 15px;
    margin: auto 0;
    font-size: 1.5em;
    opacity: .6;
    top: 12px;
    right: 0;
    z-index: 100;
}
.mobile-search.show-search .fa {
    cursor: pointer;
}
@media (max-width: 47.99em) {
    .mobile-search.show-search .search-bar {
        display: inline-block;
        transition: all .5s ease-in;
        z-index: 1000;
    }
}
@media (min-width: 48em) {
    .mobile-search .search-toggle {
        display: none;
    }
}
@media (max-width: 47.99em) {
    .mobile-search.show-search .search-toggle {
        display: none;
        transition: all .5s ease-in;
    }
}

.header .innerHeader {
    background: #fff;
    z-index: 80;
    margin: 0 auto;
    max-width: 728px;
    width: auto;
    display: block;
    position: relative;
    overflow: visible;
    height: 80px;
}

.post.scrolled .socials {
    display: none;
    position: relative;
}

.post.scrolled .adj-posts {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    float: right;
    display: inline-block;
}
@media (max-width: 47.99em) {
    .post iframe {
        width: 100% !important;
    }
}
.adj-posts {
    display: none;
    height: 100%;
    width: calc(100% - 150px);
    padding-left: 2em;
    overflow: hidden;
}
@media (max-width: 67.49em) and (min-width: 48em) {
    .adj-posts {
        width: calc(100% - 200px);
    }
}
@media (max-width: 47.99em) {
    .post.scrolled .adj-posts {
        display: block;
        z-index: 1000;
        background: #fff;
        width: 90%;
        top: -5px;
    }
}
.adj-posts .diagonal {
    position: fixed;
    display: inline-block;
    height: 100%;
    width: 10px;
    background: linear-gradient(270deg,hsla(0,0%,80%,.4),hsla(0,0%,80%,0));
    -webkit-transform: skewX(190deg);
    transform: skewX(190deg);
}
.adj-posts .next, .adj-posts .previous {
    top: 0;
    color: #333;
    height: 100%;
    width: 46%;
    line-height: 1.4;
    display: inline-block;
    padding: 0 1.5em;
    margin: 0 auto;
}

.adj-posts .previous .fa {
    float: left;
}
.adj-posts .next .fa {
    float: right;
}
.adj-posts .next .fa, .adj-posts .previous .fa {
    position: relative;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: inline-block;
    font-size: 1.5em;
    opacity: .2;
    padding: 0 10px;
    top: 50%;
}
@media (max-width: 47.99em) {
    .adj-posts .next .fa, .adj-posts .previous .fa {
        padding: 0 2px;
    }
}
.adj-posts .next .adj-title, .adj-posts .previous .adj-title {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 8vmax;
    margin-left: 10px;
    top: 40px;
    display: -webkit-inline-box;
    line-height: 1.4;
    font-size: 12px;
    max-height: 33.6px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    font-weight: 500;
    overflow: hidden;
}
@media (max-width: 47.99em) {
    .adj-posts .next .adj-title, .adj-posts .previous .adj-title {
        width: 100%;
        max-width: 65%;
    }
}
.adj-posts .previous .adj-title {
    text-align: left;
}

@media (max-width: 67.49em) and (min-width: 48em) {
    .header .innerHeader .brand-logo-link {
        padding-left: 5vmin;
    }
}
@media (max-width: 47.99em) {
    .header .innerHeader .brand-logo-link svg {
        margin: 0 auto;
    }
}

.mobileMenu {
    position: relative;
}
.mobileMenu {
    display: none;
}
.mobileMenu .Videobloghk:before {
    content: none !important;
}
@media (max-width: 47.99em) {
    .mobileMenu {
        display: block;
    }
}

.fixed-cat-menu .separator {
    position: absolute;
    display: inline-block;
    height: 100%;
    width: 10px;
    background: linear-gradient(270deg,hsla(0,0%,80%,.4),hsla(0,0%,80%,0));
    -webkit-transform: skewX(160deg);
    transform: skewX(160deg);
}
.cat-menu .Mobile-Videobloghk:after, .fixed-cat-menu .Mobile-Videobloghk:after {
    color: #cd1f26;
    content: "hk";
}

.cat-menu .Mobile-Videobloghk:before, .fixed-cat-menu .Mobile-Videobloghk:before {
    content: "Vb";
}


.cat-menu .Mobile-Nikon-Channel, .cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Mobile-Nikon-Channel, .fixed-cat-menu .Mobile-Videobloghk {
    display: none;
}
.cat-menu .Mobile-Videobloghk, .cat-menu .Videobloghk, .fixed-cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Videobloghk {
    font-family: Harabara;
    color: #333;
}
.cat-menu .Mobile-Nikon-Channel, .cat-menu .Mobile-Videobloghk, .cat-menu .Nikon-Channel, .cat-menu .Videobloghk, .fixed-cat-menu .Mobile-Nikon-Channel, .fixed-cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Nikon-Channel, .fixed-cat-menu .Videobloghk {
    float: right;
    line-height: 20px;
}
@media (max-width: 47.99em) {
    .cat-menu .Mobile-Nikon-Channel, .cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Mobile-Nikon-Channel, .fixed-cat-menu .Mobile-Videobloghk {
        display: inline-block;
    }
}

/*.cat-menu .list, .fixed-cat-menu .list {*/
    /*padding: 0;*/
    /*margin: 0;*/
    /*overflow-x: auto;*/
/*}*/
/*.cat-menu, .fixed-cat-menu {*/
    /*white-space: nowrap;*/
    /*overflow-x: auto;*/
    /*-webkit-overflow-scrolling: touch;*/
    /*border-bottom: 1px solid #eee;*/
/*}*/

.hamburger {
    padding: 10px 15px;
    display: inline-block;
    margin: auto 0;
    position: absolute;
    top: 20px;
    left: -65px;
    cursor: pointer;
    z-index: 1000;
    outline: none;
    transition-property: opacity,filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
@media (max-width: 67.49em) and (min-width: 48em) {
    .hamburger {
        left: -3vw;
    }
}
@media (max-width: 47.99em) {
    .hamburger {
        left: 0;
    }
}
.hamburger:hover {
    opacity: .7;
}

.hamburger--collapse.is-active .hamburger-inner:before {
    top: 0;
    transform: rotate(-90deg);
    background: #fff;
    transition: top .12s cubic-bezier(.33333,0,.66667,.33333) .18s,transform .15s cubic-bezier(.215,.61,.355,1) .42s;
}
.hamburger--collapse.is-active .hamburger-inner:after {
    top: 0;
    opacity: 1;
    background: #fff;
    transition: top .3s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .07s;
}
.hamburger--collapse.is-active .hamburger-inner {
    transform: rotate(-45deg);
    transition-delay: .32s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
}

.hamburger-box {
    width: 23px;
    height: 13px;
    display: inline-block;
    position: relative;
}

.hamburger--collapse .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: .05s;
    transition-delay: .05s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    width: 23px;
    height: 1px;
    background-color: #979797;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .1s;
    transition-timing-function: ease;
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -.5px;
}
.hamburger--collapse .hamburger-inner:before {
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .3s,transform .05s cubic-bezier(.55,.055,.675,.19);
}
.hamburger-inner:before {
    top: -6px;
}
.hamburger-inner:after, .hamburger-inner:before {
    background-color: #979797;
    content: "";
    display: block;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    width: 23px;
    height: 1px;
    background-color: #979797;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .1s;
    transition-timing-function: ease;
}
*, :after, :before {
    box-sizing: inherit;
}
.hamburger--collapse .hamburger-inner:after {
    top: -12px;
    transition: top .3s cubic-bezier(.33333,.66667,.66667,1) .3s,opacity .1s linear;
}
.hamburger-inner:after {
    bottom: -6px;
}
.hamburger-inner:after, .hamburger-inner:before {
    background-color: #979797;
    content: "";
    display: block;
}
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
    width: 23px;
    height: 1px;
    background-color: #979797;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .1s;
    transition-timing-function: ease;
}

.backButton, .hamburger.mobile {
    display: none;
}
@media (max-width: 47.99em) {
    .hamburger.desktop {
        display: none;
    }
}
@media (max-width: 47.99em) {
    .hamburger.mobile {
        display: inline-block;
    }
}
@media (max-width: 47.99em) {
    .second .mobile.is-active .backButton, .third .mobile.is-active .backButton {
        display: inline-block;
    }
}
@media (max-width: 47.99em) {
    .second .mobile.is-active .hamburger-inner, .third .mobile.is-active .hamburger-inner {
        display: none;
    }
}
@media (max-width: 47.99em) {
    .second .mobile.is-active .backButton, .third .mobile.is-active .backButton {
        display: inline-block;
    }
}

.backButton {
    color: #fff;
    z-index: 105;
    font-size: 1.25em;
    opacity: .6;
    margin: 5px;
}
*, :after, :before {
    box-sizing: inherit;
}
@media (max-width: 67.49em) {
    .header {
        width: 100vw;
    }
}
.header .innerHeader .brand-logo-link {
    display: flex;
    float: left;
    z-index: 105;
    max-width: 50%;
    margin: 0 auto;
}
@media (max-width: 47.99em) {
    .header .innerHeader .brand-logo-link {
        float: none;
    }
    .header.headerHidden {
        display: none;
    }
}

.socials {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 40px;
    display: inline-block;
    float: right;
}
@media (max-width: 47.99em) {
    .socials {
        display: none;
    }
}
.socials a {
    padding-right: .5em;
}
.header .innerHeader .brand-logo-link, .header .innerHeader .socials {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.header .innerHeader. {
    margin: 0 80px;
    max-width: calc(95vw - 399px);
    width: auto;
}
/*@media (max-width: 47.99em) {*/
    /*.header.scrolled #Logo {*/
        /*display: none;*/
    /*}*/
/*}*/
.header.scrolled {
    box-shadow: -4px 3px 8px 0 hsla(0,0%,80%,.5);
    transition: box-shadow .5s ease-in-out;
}

/*
sidebar
 */
aside.sidebar {
    z-index: 90;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
@media (min-width: 20em) {
    aside.sidebar {
        background-color: #f6f6f6;
        float: right;
        min-height: 100%;
        width: calc(300px + 80 * ((100vw - 768px) / 512));
        max-width: calc(300px + 80 * ((100vw - 768px) / 512));
        padding: 24px calc(4px + 36 * ((100vw - 768px) / 512));
        box-shadow: inset 0 0 8px 0 hsla(0,0%,80%,.5);
        font: normal 12px;
        order: 1;
    }
}
@media (max-width: 67.49em) {
    aside.sidebar {
        max-width: 0;
        visibility: hidden;
    }
}
@media (max-width: 67.49em) and (min-width: 20em) {
    aside.sidebar {
        max-width: 0;
        visibility: hidden;
        overflow: hidden;
    }
}
.sidebar .post-slider {
    background: #fff;
    height: 250px;
    max-width: 300px;
    margin: 30px 0;
    font-size: 14px;
    position: relative;
}

.content .post-slider {
    background: #fff;
    height: 250px;
    max-width: 300px;
    font-size: 14px;
    clear: both;
    margin: 0 auto;
}
.post-slider .slider-header {
    text-align: center;
    padding: 8px;
    font-size: 16px;
    font-weight: 500;
    background: #fff;
}
.post-slider .slick-slide img {
    max-height: 159px;
    width: 100%;
}
.post-slider .slick-prev {
    left: 5%;
    top: 75%;
    opacity: 1;
    z-index: 1000;
}
.post-slider .slick-list {
    min-height: 159px;
}
.post-slider .slick-arrow.slick-next {
    left: 88%;
    top: 75%;
    z-index: 1000;
}
.post-slider .slide-title {
    display: block;
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    height: 42px;
    margin: 6px auto;
    text-align: center;
    max-width: 180px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    color: #333;
}
.post-slider .slick-arrow:before {
    color: #333;
    opacity: .1;
}

.sidebar .list section {
    margin-top: 15px;
}

aside.sidebar.pushed {
    visibility: visible;
    max-width: 439px;
    width: 439px;
    overflow: visible;
    display: block;
    z-index: 500;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}
aside.sidebar.pushed .sidebar-close {
    padding: 10px 15px 10px 10px;
    display: inline-block;
    margin: auto 0;
    cursor: pointer;
    z-index: 1000;
    outline: none;
    transition-property: opacity,filter;
    transition-duration: .15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}
aside.sidebar.pushed .close-box {
    width: 23px;
    height: 13px;
    display: inline-block;
    position: relative;
}
aside.sidebar.pushed .sidebar-close.is-active .close-inner {
    transform: translate3d(0,-6px,0) rotate(-45deg);
    transition-delay: .32s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
aside.sidebar.pushed .close-inner, aside.sidebar.pushed .close-inner:after, aside.sidebar.pushed .close-inner:before {
    width: 23px;
    height: 1px;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .1s;
    transition-timing-function: ease;
}
aside.sidebar.pushed .sidebar-close .close-inner:before {
    transition: top .1s cubic-bezier(.33333,.66667,.66667,1) .3s,transform .05s cubic-bezier(.55,.055,.675,.19);
}
aside.sidebar.pushed .close-inner:before {
    top: -6px;
}
aside.sidebar.pushed .sidebar-close.is-active .close-inner:before {
    top: 0;
    transform: rotate(-90deg);
    background: #979797;
    transition: top .12s cubic-bezier(.33333,0,.66667,.33333) .18s,transform .15s cubic-bezier(.215,.61,.355,1) .42s;
}
aside.sidebar.pushed .sidebar-close.is-active .close-inner:after {
    top: 0;
    opacity: 1;
    background: #979797;
    transition: top .3s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .07s;
}
aside.sidebar.pushed .sidebar-close .close-inner:after {
    top: -17px;
    transition: top .3s cubic-bezier(.33333,.66667,.66667,1) .3s,opacity .1s linear;
}
aside.sidebar.pushed .close-inner:after {
    bottom: -6px;
}
aside.sidebar.pushed .close-inner:after, aside.sidebar.pushed .close-inner:before {
    background-color: #979797;
    content: "";
    display: block;
}
aside.sidebar.pushed .sidebar-close .close-inner {
    top: auto;
    bottom: 0;
    transition-duration: .05s;
    transition-delay: .05s;
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
}
aside.sidebar.pushed .close-inner, aside.sidebar.pushed .close-inner:after, aside.sidebar.pushed .close-inner:before {
    width: 23px;
    height: 1px;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: .1s;
    transition-timing-function: ease;
}
aside.sidebar.pushed .close-inner {
    display: block;
    top: 50%;
    margin-top: -.5px;
}
aside.sidebar.pushed .search-bar {
    width: 80%;
    display: inline-block;
}
aside.sidebar #fieldEmail {
    width: 80%;
}

.content .top-post {
    padding: 0 18px 18px 18px;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    width: 33.3333%;
    /*transition: 0.3s;*/
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    width: 100%;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.tabcontent.active {
    display: inline-block;
}

.top-post {
    border-top: 1px solid #eee;
}
.top-post .top-post-item {
    list-style: none;
    padding-bottom: 5px;
}
.top-post .top-post-item-thumbnail, .top-post .top-post-item-title {
    display: table-cell;
}
.top-post .top-post-item-thumbnail {
    padding-right: 10px;
}
.top-post .top-post-item-title {
    margin-left: 10px;
    vertical-align: top;
}



* {
    box-sizing: border-box;
}
a, a:active, a:focus, a:hover {
    color: #1073b9;
    text-decoration: none;
}
.header .innerHeader svg {
    top: 40px;
}
svg:not(:root) {
    overflow: hidden;
}
#Logo {
    font-family: Harabara;
}
#Logo #Photobloghk {
    font-size: 28px;
    font-weight: 400;
}
#Logo #Photobloghk #Photoblog {
    fill: #333;
}
#Logo #Photobloghk #dot {
    fill: #000;
}
#Logo #Photobloghk #hk {
    fill: #1073b9;
}
#Logo #Photobloghk-Chinese {
    font-size: 14px;
    font-weight: 400;
    fill: #9b9b9b;
}
#Logo.white #Photobloghk #dot, #Logo.white #Photobloghk #hk, #Logo.white #Photobloghk #Photoblog, #Logo.white #Photobloghk-Chinese {
    fill: #fff;
}
[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
}

@media (min-width: 48em) {
    .desktop, .desktopBanner {
        display: block;
    }
}


.socials .fa {
    color: #333;
    padding: .25em;
    font-size: 1.5em;
}
/*.fa {*/
    /*display: inline-block;*/
    /*font: normal normal normal 14px/1 FontAwesome;*/
    /*font-size: inherit;*/
    /*text-rendering: auto;*/
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
/*}*/
/*.fa-2x {*/
    /*font-size: 2em;*/
/*}*/

.socials .fa-ellipsis-h {
    font-size: 1.25em;
    colour: #777;
    cursor: pointer;
    padding-left: 40px;
    opacity: .4;
}
@media (min-width: 67.5em) {
    .socials .fa-ellipsis-h {
        display: none;
    }
}

/*
content
 */

.content {
    margin-top: 80px;
    position: relative;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
}
@media (min-width: 48em) {
    .content {
        min-width: 728px;
    }
}
.nonMobileMenu {
    display: none;
}
@media (min-width: 48em) {
    .nonMobileMenu {
        display: block;
    }
}
/**
menu
 */
.cat-menu .menu-selected, .fixed-cat-menu .menu-selected {
    background: #eee;
}

.fixed-cat-menu {
    position: absolute;
    right: 0;
    top: 0;
}
.cat-menu, .fixed-cat-menu {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #eee;
}

.cat-menu .list, .fixed-cat-menu .list {
    padding: 0;
    margin: 0;
    overflow-x: auto;
}
.cat-menu .menu-item, .fixed-cat-menu .menu-item {
    background: #fff;
    padding: 12px 10px;
    margin: 0;
    display: inline-block;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    text-align: left;
}
.cat-menu .menu-selected, .fixed-cat-menu .menu-selected {
    background: #eee;
}

.cat-menu .menu-item:last-child {
    background: #B2977C;
}

.cat-menu .menu-item:last-child a {
    color: #FFFFFF;
}

.cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Mobile-Videobloghk {
    padding-left: 25px;
    -webkit-clip-path: polygon(28% 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(28% 0,100% 0,100% 100%,0 100%);
}
.nonMobileMenu .cat-menu .Videobloghk:after {
    color: #cd1f26;
    content: ".hk";
}
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.cat-menu .Videobloghk:before, .fixed-cat-menu .Videobloghk:before {
    content: "Videoblog";
}
.cat-menu .Mobile-Nikon-Channel, .cat-menu .Mobile-Videobloghk, .cat-menu .Nikon-Channel, .cat-menu .Videobloghk, .fixed-cat-menu .Mobile-Nikon-Channel, .fixed-cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Nikon-Channel, .fixed-cat-menu .Videobloghk {
    float: right;
    line-height: 20px;
}
.cat-menu .menu-item:hover{
    background: #eee;
}
.cat-menu .menu-item:last-child:hover{
    background: #B2977C;
}
.cat-menu a {
    color: #333;
}
.cat-menu .Mobile-Videobloghk, .cat-menu .Videobloghk, .fixed-cat-menu .Mobile-Videobloghk, .fixed-cat-menu .Videobloghk {
    font-family: Harabara;
    color: #333;
}



article, aside, footer, header, nav, section {
    display: block;
}

aside.sidebar .sidebar-close {
    display: none;
    float: left;
}
.eQdiUA {
    margin-bottom: 1em;
}
@media (min-width: 48em) {
    .search-bar {
        max-width: 300px;
    }
}
.search-bar {
    position: relative;
}
.search-bar input {
    height: 36px;
    width: 100%;
    background: #fff;
    padding: 11px;
    box-shadow: inset 0 1px 3px 0 #f2f2f2;
    border: 1px solid #979797;
}
.dALZPB {
    outline: none;
    border-bottom: 1px dotted #999;
}
.search-bar .fa {
    position: absolute;
    top: 10px;
    left: auto;
    right: 10px;
    opacity: .5;
}
@media (min-width: 48em) {
    .desktop, .desktopBanner {
        display: block;
    }
}
@media (min-width: 48em) {
    .mobile, .mobileBanner {
        display: none;
    }
}
@media (max-width: 47.99em) {
    .feature-slider {
        display: none;
    }
}
@media (min-width: 48em) {
    .mobile, .mobileBanner {
        display: none;
    }
}

/*
postlist
 */
div.redux-infinite-scroll li div {
    width: 100%;
}
.lgfEea {
    width: 100%;
    min-height: 3em;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    border-top: 1px solid #eee;
}
.iVyEwx {
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    /* align-items: center; */
}
.post-list-item {
    float: left;
    width: 100%;
    margin: 17px 0 8px 0;
}
.post-list-item .post-details {
    position: relative;
    /*margin-left: 15px;*/
    display: block;
    float: left;
    max-width: 500px;
    max-width: 70%;
    min-height: 92px;
    float: right;
}
.post-list-item .post-details * {
    width: auto;
}
.post-list-item .categories .category {
    display: inline-block;
    padding: 2px 4px;
    margin-bottom: 5px;
    color: #fff;
    font-size: calc(8px + 3 * ((100vw - 320px) / 960));
    font-weight: 400;
    margin-right: 5px;
    background-color: #808080;
    cursor: pointer;
}
.post-list-item .post-details .title {
    display: block;
    margin: 4px 0;
    font-size: calc(14px + 6 * ((100vw - 320px) / 960));
    font-weight: 500;
    color: #333;
}
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}
.post-list-item .post-details .details {
    margin: .4em 0;
    color: #aaa;
    font-size: calc(8px + 3 * ((100vw - 320px) / 960));
}
.post-list-item .post-details .details div, .post-list-item .post-details .details i, .post-list-item .post-details .details span {
    line-height: calc(8px + 4 * ((100vw - 320px) / 960));
    margin: .2em .4em;
    float: left;
}
.post-list-item .post-details .fb-like {
    display: inline-block;
}
@media (max-width: 47.99em) and (min-width: 20em) {
    .post-list-item .post-details .fb-like {
        display: none;
    }
}
.fb_iframe_widget span {
    display: inline-block;
    position: relative;
    text-align: justify;
}
.fb_iframe_widget iframe {
    position: absolute;
}
.post-list-item .post-details .excerpt p {
    margin: 4px;
    padding: 0;
    border: none;
    width: auto;
    font-size: 12px;
    font-size: calc(9px + 4 * ((100vw - 320px) / 960));
}
.post-list-item img {
    display: inline-block;
    float: left;
    width: 25%;
}
img {
    border-style: none;
}

.pagination .page-numbers{
    color: #FFF;
    padding: 8px;
    border: 1px solid #1073b9;
    background: #1073b9;
}
.pagination .page-numbers.current{
    color: #000;
    background: #d0d0d0;
    border: 1px solid #d0d0d0;
    box-shadow: none;
}



/**
post
 */
.post .title {
    font-size: 24px;
    text-align: left;
    margin: 4px 8px;
}
.post .post-details {
    margin: 4px 0 6px;
    color: #aaa;
    font-size: 12px;
    float: left;
    width: 100%;
    display: block;
    height: auto;
}
.post .post-details div, .post .post-details i, .post .post-details span {
    line-height: 17px;
    margin: 2px 4px;
    float: left;
}
.post .post-details i {
    margin-left: 16px;
    font-size: 1.5em;
}
.post .post-content {
    display: block;
    width: 100%;
}
.post .post-content p {
    margin: 2em 8px;
}
.post .post-content img {
    max-width: 100%;
    object-fit: contain;
    height: auto;
}
.post .author-box {
    display: -ms-flexbox;
    display: flex;
    padding: 18px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height: auto;
}
.post .author-box img {
    float: left;
    display: inline-block;
    padding-right: 8px;
    height: 100px;
    object-fit: contain;
}
.post .author-box .details {
    padding: 0;
    max-width: 500px;
    float: left;
}

.post .author-box .title {
    display: block;
    margin: 0;
}
.post .author-box .socials {
    display: block;
}
.post .related-posts {
    border-top: 1px solid #eee;
    padding: 0 18px 18px 18px;
}
.post .related-posts .related-post-item {
    list-style: none;
    padding-bottom: 5px;
}
.post .related-posts .related-post-item-thumbnail, .post .related-posts .related-post-item-title {
    display: table-cell;
}
.post .related-posts .related-post-item-thumbnail {
    padding-right: 10px;
}
.post .related-posts .related-post-item-title {
    margin-left: 10px;
    vertical-align: top;
}
.clear {
    clear: both;
}
@media (max-width: 47.99em) {
    .post .fb-like.desktop {
        display: none;
    }
}
@media (min-width: 47.99em) {
    .post .fb-like.mobile {
        display: none;
    }
}


/**
overlay
 */
/*.overlay-menu {*/
    /*display: none;*/
/*}*/
.overlay-menu .is-active {
    height: 100%;
}

.overlay {
    width: 100%;
    height: 0;
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.9);
    overflow-y: auto;
    transition: all .3s cubic-bezier(.165,.63,.14,.82);
}

.overlay .overlay-content {
    z-index: 1000;
    position: relative;
    top: 25%;
    width: auto;
    margin-top: 30px;
    margin: 0 5%;
}
.overlay .overlay-content .column {
    width: 32%;
    float: left;
    overflow-y: auto;
}

.overlay .menuItems {
    cursor: pointer;
    color: #777;
    padding: 8px;
    text-decoration: none;
    font-size: 28px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    display: block;
    transition: .3s;
    vertical-align: bottom;
    overflow-x: hidden;
}
.overlay .menuItems .title {
    margin: 0 20px;
    vertical-align: bottom;
    border-bottom: 1px solid #777;
}
.overlay .menuItems .title .fa {
    float: right;
    font-size: 16px;
    padding: .4em;
    line-height: auto;
    vertical-align: middle;
    display: inline;
}
.overlay.second .secondary, .overlay.third .tertiary {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
}
@media (max-width: 47.99em) {
    .overlay.main .main, .overlay.second .secondary, .overlay.third .tertiary {
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: block;
    }
}
@media (max-width: 47.99em) {
    .overlay .overlay-content .column {
        margin: 0 auto;
        width: 90%;
    }
}
@media (max-width: 47.99em) {
    .overlay .column {
        display: none;
    }
}


/*course page*/
.basic-course-type, .basic-course-type-mobile {
    background: #bbb9b7;
}

.vision-course-type, .vision-course-type-mobile {
    background: #ad9072;
}


.course-level-info {
    padding: 20 40;
    border-bottom: 2px solid #bbb9b7; 
    margin-bottom: 20px
}
.course-level-info-mobile {
    border-bottom: 1px solid #bbb9b7; 
    padding-bottom: 20px;
    margin-bottom: 20px
}

.course-level-info .course-level-item {
    width: 25%;
    float: left;
    position: relative;
    padding: 0 5;
}

.course-level-info .course-level-item .course-level-desc-wrapper{
    position: absolute;
    width: 100%;
    padding-right: 10;
}

.course-level-info .course-level-item .course-level-desc-wrapper .course-level-desc{
    position: relative;
    text-align: center;
    color: #FFF
}
.course-level-info .course-level-item .course-level-desc-wrapper .course-level-desc p{
    margin-bottom: 0;
    font-size: 12px;
    line-height: 15px;
    padding: 0 10;
}

.course-level-info .course-level-item .course-level-desc-wrapper-1{
    top: 70%;
}

.course-level-info .course-level-item .course-level-desc-wrapper-2{
    top: 60%
}

.course-level-info .course-level-item .course-level-desc-wrapper-3{
    top: 55%
}

.course-level-info .course-level-item .course-level-desc-wrapper-4{
    top: 50%
}
.course-type-logo {
    padding: 15 100 15 60;
    width: 40%;
    float: left;
}

.course-type-logo-mobile {
    padding: 40 30 40 30;
    width: 50%;
    float: left;
}

.course-type-logo-mobile img {
    width: 100%;
}

.course-type-logo img {
    width: 100%;
}

.course-type-description {
    width: 60%;
    font-size: 12px;  
    line-height: 20px;
    letter-spacing: 2px; 
    position: absolute;
    color: #FFF;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
}

.course-type-description-mobile {
    width: 50%;
    font-size: 12px;  
    line-height: 13px;
    letter-spacing: 1px; 
    position: absolute;
    color: #FFF;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}

.course-ad-banner {
    margin-bottom: 20px;
}


.course-grid .read-more {
    cursor: pointer;
    margin: 0 auto;
    width: 10%;
    padding-top: 20px;
}
.course-grid .read-more:hover {
    opacity: 0.5;
}

.course-grid .course-type-banner {
    margin-bottom: 10px;
}

/* .course-grid  .course-item-basic .course-cover {
    background: #bbb9b7
}
.course-grid  .course-item-vision .course-cover {
    background: #ad9072
} */
.course-grid  .course-item {
    margin-top: 10px;
    margin-bottom: 10px;

}

.course-grid  .course-item:hover {
}

.course-grid  .course-start-date {
    font-size: 15px;
    letter-spacing: 5px;
    border-bottom: 1px solid;
}
.course-grid  .course-start-time {
    font-size: 13px;
    letter-spacing: 5px;
}

.course-grid  .course-info-left {
    max-width: 68%;
}

.course-grid  .course-info-right {
    text-align: center;
}

.course-grid .course-item .level-icon {
    position: absolute;
    bottom: 15px;
    right: 25px;
    width: 20%;
    font-size: 12px;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    color: #FFF
}

.course-grid .course-item .course-desc {
    position: absolute;
    opacity: 0;
    width: 100%;
    color: #FFF;
    font-size: 13px;
    z-index: 999;
    word-break: break-all;
    transition: opacity 0.3s ease-in-out;
    top: 50%;
    transform: translate(0, -50%);
}

.course-grid .course-item .course-desc .course-desc-top {
    text-align:center;
    width: 18%;
    padding-top: 15%;
    margin: 0 auto;
    font-size: 12px;
}

.course-grid .course-item .course-desc .course-desc-content {
    padding: 5% 10% 0 10%;
    font-size: 12px;
}

.course-grid .course-item .course-desc .course-desc-top img {
    width: 100%;
}

.course-grid .course-item .level-icon img{
    width: 100%;
}

.course-grid .course-item .course-hover {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: black;
}
.course-grid .course-item .course-desc:hover {
    display: block;
    opacity: 1;
}
.course-grid .course-item .course-desc:hover + .course-hover {
    display: block;
    opacity: 0.5;
}
.course-grid .course-item .course-desc:hover ~ .level-icon {
    opacity: 0;
}

.course-grid  .course-item-basic .course-cover-side {
    width: 15px;
    height: 45px;
    position: absolute;
    background-color: #bbb9b7;
}

.course-grid  .course-item-vision .course-cover-side {
    width: 15px;
    height: 45px;
    position: absolute;
    background-color: #ad9072;
}

.course-grid  .course-item-vision .course-cover-side-top {
    width: 100%;
    height: 15px;
    position: absolute;
    background-color: #ad9072;
}

.course-grid  .course-item-basic .course-cover-side-top {
    width: 100%;
    height: 15px;
    position: absolute;
    background-color: #bbb9b7;
}

.course-grid  .course-item-basic .course-cover-side-top {
    top: 0;
}
.course-grid  .course-item-vision .course-cover-side-top {
    top: 0;
}
.course-grid  .course-item-basic .course-cover-side-left {
    top: 0;
}
.course-grid  .course-item-vision .course-cover-side-left {
    top: 0;
}
.course-grid  .course-item-basic .course-cover-side-right {
    right:0;
    top: 0;
}
.course-grid  .course-item-vision .course-cover-side-right {
    right:0;
    top: 0;
}
.course-grid  .course-item-basic .course-info {
    color: #FFF;
    padding: 15px;
    background-color: #bbb9b7;
}
.course-grid  .course-item-vision .course-info {
    color: #FFF;
    padding: 15px;
    background-color: #ad9072;
}
.course-grid  .course-info .course-lecturer {
    font-size: 20px;
    letter-spacing: 5px;
}
.course-grid  .course-info .course-title {
    font-size: 14px;
    letter-spacing: 2px;
}

.course-grid  .course-info .course-date-remark {
    font-size: 12px;
    letter-spacing: 2px;
}

.course-grid .course-item .course-item-vision {
    /* background: #ac8f72 */
}

.course-list .course-item .course-date-remark {
    font-size: 12px;
}

.course-list .course-item-mobile .course-item-top-section {
    padding: 15px;
}

.course-list .course-item-mobile .course-level-icon {
    width: 25%;
}

.course-list .course-item-basic .course-level {
    color: #bbb9b7;
}

.course-list .course-item-vision .course-level {
    color: #ad9072;
}

.course-list .course-item .course-level {
    width: 15%;
}
.course-list .course-item .course-level img {
    width: 100%;
}

.course-type-banner {
    margin-bottom: 10px;
    margin-top: 20px;
    position: relative;
}

.course-type-banner-mobile {
    margin-bottom: 10px;
    margin-top: 20px;
    position: relative;
}

.course-list .course-item {
    margin-bottom: 10px;
    position: relative;
}

.course-list .course-item-mobile {
    margin-bottom: 10px;
    position: relative;
}

.course-list .course-item .course-lecturer {
    font-size: 25px;
    letter-spacing: 4px;
    font-weight: 400;
}

.course-list .course-item-mobile .course-lecturer {
    font-size: 14px;
    font-weight: 450;
}

.course-list .course-item .course-title {
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 500;
}

.course-list .course-item-mobile .course-title {
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 500;
}

.course-list .course-item .sign-up-btn {
    border: 1px solid;
    padding: 5px 20px;
    letter-spacing: 5px;
    cursor: pointer;
}
.course-list .course-item-mobile .sign-up-btn {
    border: 1px solid;
    padding: 2 5;
    letter-spacing: 1px;
    cursor: pointer;
}
.course-list .course-item-mobile .sign-up-btn:hover {
    background: #000;
    cursor: pointer;
}

.course-list .course-item-mobile .sign-up-btn:hover > a {
    color: #FFF;
}

.course-list .course-item-mobile .sign-up-btn a {
    color: #000;
}

.course-list .course-item .sign-up-btn:hover {
    background: #000;
    cursor: pointer;
}

.course-list .course-item .sign-up-btn:hover > a {
    color: #FFF;
}

.course-list .course-item .sign-up-btn a {
    color: #000;
}

.course-list .course-item .course-description {
    font-size: 12px;
    padding: 10px 4px;
    word-break: break-word;
}

.course-list .course-item-mobile .course-description {
    font-size: 12px;
    padding: 5 0;
    word-break: break-word;
}


.course-list .course-item-basic .bottom-border {
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 10px solid #bab9b7;
}

.course-list .course-item-basic-mobile .bottom-border {
    bottom: 0;
    right: 0;
    border-bottom: 10px solid #bab9b7;
}

.course-list .course-item-vision-mobile .bottom-border {
    bottom: 0;
    right: 0;
    border-bottom: 10px solid #ad9072;
}

.course-list .course-item-vision .bottom-border {
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom: 10px solid #ad9072;
}


.course-list .course-item-basic,.course-list .course-item-basic-mobile {
    background-color: #F5F5F5;
    /* border-bottom: 10px solid #bbb9b7; */
}

.course-list .course-item-vision, .course-list .course-item-vision-mobile {
    background-color: #F6F1EB;
    /* border-bottom: 10px solid #ad9072; */
}


.course-list .course-item .course-info {
    /* height: 100%; */
    padding: 20px;
}

.course-list .course-item .course-info-top {
    border-bottom: #bab9b7 solid 2px;
    padding-bottom: 10px;
}
.course-list .course-item-mobile .course-info-top {
    border-bottom: #bab9b7 solid 1px;
    padding-bottom: 5;
}

.course-list .course-item-mobile .course-info-top .float-left {
    width: 65%;
    word-break: break-all;
}

.course-list .course-item .course-info-bottom {
    width: 65%;
    position: absolute;
    right: 0;
    padding: 20px;
    bottom: 0;
}

.course-list .course-item-mobile .course-info-bottom {
    right: 0;
    padding: 5;
    bottom: 0;
    font-size: 12px;
}

.course-cover {
    position: relative;
}

.course-cover-side { 
    z-index: 3;
}

.course-cover .course-cover-1 { 
    z-index: 1;
}

.course-cover .course-cover-2 { 
    z-index: 2;
}

.course-list .course-cover .course-cover-2 {
    position: absolute;
    top: 0;
    transition: opacity 1s;
    opacity: 0;
}


.course-grid .course-cover .course-cover-2 {
    position: absolute;
    top: 15px;
    transition: opacity 1s;
    opacity: 0;
}
.course-cover .course-cover-2:hover {
    z-index: 2;
    opacity: 1;
}


.bottom-banner {
    height: 60px;
    background: #00939e;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}
.bottom-banner .banner-desc {
    position: absolute;
    color: #FFF;
    padding: 20;
    width: 60%;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
}
.bottom-banner .banner-btn {
    position: absolute;
    text-align: center;
    top: 50%;
    right: 30;
    width: 20%;
    transform: translate(0, -50%);
}

.bottom-banner .banner-btn button {
    color: #00939e;
    background: #FFF;
    border: none;
    border-radius: 3px;
}

.bottom-banner .close-btn {
    position: absolute;
    right: 0;
}
.bottom-banner .close-btn button {
    color: #FFF;
    background: #00939e;
    border: none;
}