/*.site-header {
    background-color: none !important;
}*/

/* thermal burn effect */
.thermal {
    filter: brightness(60%) grayscale(100%) contrast(100);
}

html {
    transition: filter 10s;
}

body, button, input, select, textarea {
    font-family: 'Simsun', serif;
}

img {
    border-radius: 0;
}

.site-branding h1 {
    font-family: 'Simsun', serif;
}

.site-branding h1 a {
    color: #000;
}

.site-main {
       margin-top: 2.618em;
       margin-bottom: 0;
}

.hentry {
    margin-bottom: 0;
}

.site-search {
    display: none;
}

header, .storefront-primary-navigation {
    /* display: none; */
}

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header, .no-wc-breadcrumb .site-header {
    margin-bottom: 0;
}

.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, a.cart-contents:hover, .site-header-cart .widget_shopping_cart a:hover, .site-header-cart:hover > li > a, .site-header ul.menu li.current-menu-item > a {
    color: #000;
    border-bottom: 2px solid black !important;
}


.dd-top {
    font-size: 18px;
    line-height: 22px;
    /*background-image: url(http://displaydistribute.com/JPEGs/Banner_1200_x_2000.jpg);
    background-size: cover;
    height: 600px;
    width: 100%;*/
}

body.home h1, body.post-type-archive-product h1, body.home header, body.home footer, body.page-id-20 h1.entry-title {
    display: none;
}

.storefront-primary-navigation {
    background: none;
    padding: 0px 80px !important;
}

.primary-navigation .menu-item {
    font-size: 16px;;
}

.dd-description {
    text-align: center;
    width: auto;
    margin: 0 auto;
}

.dd-description a {
    color: #000;
}
.col-full {
    max-width: 1280px;
}

.storefront-sorting {
    display: none;
}

.gallery-size-thumbnail .gallery-item {
    width: 15%;
}

.woocommerce-breadcrumb {
    display: none;
}


.woocommerce-breadcrumb, #reviews .commentlist li .comment_container {
    background: none;
}

.woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments {
    background: #000;
}

.single-product div.product form.cart .button {
    float: left;
    margin-left: 1em;
}

.gallery-caption {
    font-size: 10px;
}

ul.post-meta {
    margin: 0;
}
ul.post-meta li {
    list-style-type: none;
    width: 100%;
}

.post-meta-key {
    display: block;
}

.dd-courier-table article.dd-courier-table--row {
    padding: 0;
    cursor: pointer;
}

.dd-courier-table ul {
    /* padding: 2em 0; */
    margin: 0;
    display: none;
    border-bottom: 2px solid #ccc;
    background: #fff;
}


.dd-courier-table ul li {
    float: left;
    list-style-type: none;
    padding: 0 19px;
    text-align: center;
}

.dd-courier-table--cell strike {
    text-decoration-thickness: 2px;
    text-decoration-color: black;
}

.dd-courier-table--cell a {
    border-bottom: none !important;
}

.dd-courier-table--cell a:visited {
    color: inherit;
}

.dd-courier-table--cell a:hover {
    color: #00AEEF;
    border-bottom: none !important;
}


.dd-courier-table ul li.dispatch-column {
    width: 8%;
}

.dd-courier-table ul li.contents-column {
    width: 16%;
}

.dd-courier-table ul li.start-point-column {
    width: 11%;
}

.dd-courier-table ul li.end-point-column {
    width: 11%;
}

.dd-courier-table ul li.quantitative-data-column {
    width: 9%;
}

.dd-courier-table ul li.courier-column {
    width: 13%;
}

.dd-courier-table ul li.shipping-status-column {
    width: 10%;
}

.dd-courier-table ul li.notation-column {
    width: 22%;
}

body.blog article {
    border-bottom: 2px solid #ccc;
    padding: 5px 0;
    position: relative;
}

.ll-search-form .searchandfilter ul {
    display: flex;
    margin-inline: 0;
    gap: 1rem;
    width: 100%
}

.ll-search-form .searchandfilter ul > li.sf-field-search,
.ll-search-form .searchandfilter ul > li.sf-field-search label,
.ll-search-form .searchandfilter ul > li.sf-field-search label input.sf-input-text {
    width: 100%
}

@media (min-width: 768px) {
    body.blog article:after {
        content: "";
          left: 0;
          bottom: 0;
          position: absolute;
          z-index: -1;
    }

    body.blog article:hover:after {
        content: "⇣";
          left: 0;
          bottom: 0;
          position: absolute;
        z-index: -1;
        color: #000;
        font-size: 1em;
        background: #000;
        color: #fff;
        padding: 3px 8px;
        text-align: center;
    }
}

ul.post-meta li a {
    font-weight: 300;
    /* text-decoration: underline; */
    border-bottom: 1px solid #ccc;
    padding-bottom: 1px;
}
ul.post-meta li a:hover {
    border-bottom: 1px solid #00aeef;
    padding-bottom: 1px;
}

.gallery .gallery-item .gallery-caption {
    display: none;
}

#slb_viewer_wrap .slb_theme_slb_baseline .slb_viewer_overlay {
    background: none;
}

.clear {
    clear: both;
}

.hide {
    height: 90px;
    overflow: hidden;
}

.show {
    height: auto;
    overflow: none;
}

#hugeit-contact-wrapper_3  .hugeit-contact-column-block {
    padding-top: 0 !important;
}

.bottom-apply {
        margin-top: 3em;
    }


@media (min-width: 768px) {
    .post-meta-key {
        display: none;
    }
    ul.post-meta li {
        float: left;
        width: 12.25%;    
        text-align: center;
    }

    aside.entry-meta {
        display: inline-block;
        width: 90%;
        font-size: 0.8em;
    }

    .hentry.type-post .entry-meta {
        margin-right: 0;
    }

    body.blog .entry-content {
        width: 10% !important;
        display: inline-block;
        float: right;
    }
    
    .site-header-cart .cart-contents {
        padding-top: 0;
    }
    .blog .site-header-cart .cart-contents {height: 50px; display: none;}
    .blog .site-header-cart {height: 51px}
    
    .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
        padding: 0;
        margin: 0 1em;
    }

    .content-area, .widget-area {
        margin-bottom: 0;
    }
    .dd-courier-table h4.dd-courier-table--title {
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }
    
    .dd-courier-table table, .dd-courier-table thead, .dd-courier-table tbody, .dd-courier-table th, .dd-courier-table td, .dd-courier-table tr {
         display: auto;
    }
    .dd-courier-table table {
      width: 100%;
      border-collapse: collapse;
    }
    /* Zebra striping */
    .dd-courier-table tr:nth-of-type(odd) {
      background: #eee;
    }
    .dd-courier-table th {
      background: #000;
      color: white;
      font-weight: bold;
    }
    .dd-courier-table td, th {
      padding: 6px;
      border: 1px solid #ccc;
      text-align: left;
    }

    .dd-top {
        font-size: 36px;
        line-height: 46px;
    }

    .dd-description {
        width: 80%;
    }

    .dd-description img {
        /* width: 80px; */
        display: inline-block;
    }

    .dd-description a.mail-icon {
        font-size: 1.75em;
        vertical-align: sub;
    }

    .single-product div.product .woocommerce-tabs {
        clear: none;
    }

    .woocommerce-tabs ul.tabs {
        display: none;
        width: 20%;
        float: left;
        margin-right: 5.8823529412%;
    }

    .woocommerce-tabs .panel {
        width: 60%;
        float: left;
    }

    .content-area {
        width: 100% !important;
    }

    .single-product div.product .images {
        width: 30%;
    }

    .single-product div.product .summary {
        width: 64%;
    }

    .dd-courier-table ul {
        display: block;
    }

    

    .contact-info {
        width: 48%;
        float: left;
    }
    .contact-form {
        width: 48%;
        float: right;
    }


}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    .contact-info {
        width: 100%;
    }

    .contact-form {
        width: 100%;
    }

    /* Force table to not be like tables anymore */
    .dd-courier-table table, .dd-courier-table thead, .dd-courier-table tbody, .dd-courier-table th, .dd-courier-table td, .dd-courier-table tr {
        display: block;
    }
    

    /* Hide table headers (but not display: none;, for accessibility) */
    .dd-courier-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .dd-courier-table tr { border: 1px solid #ccc; }
    
    .dd-courier-table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-top: 36px;
        padding-left: 8px;
        text-align: left;
    }
    
    .dd-courier-table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    
    /*
    Label the data
    */
    .dd-courier-table td:nth-of-type(1):before { content: "緩件號 DISPATCH NO."; font-size: 11px;}
    .dd-courier-table td:nth-of-type(2):before { content: "內容 CONTENTS"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(3):before { content: "出發點 START POINT"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(4):before { content: "到達點 END POINT"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(5):before { content: "定量信息 QUANTITATIVE DATA"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(6):before { content: "慢遞人員 COURIER"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(7):before { content: "物流情況 SHIPPING STATUS"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(8):before { content: "附注 NOTATION"; font-size: 11px;}
    .dd-courier-table td:nth-of-type(9):before { content: "媒體記錄 TRACKING"; font-size: 11px;}

    
    .woocommerce-breadcrumb {
        padding-bottom: 0;
    }

    footer {
        text-align: center;
    }

}

/*
    Additions by Sam 👖👖👖👖👖
*/

/*
    make list of light logistics more readable
*/
@media (max-width: 768px) {
    .dd-courier-table-list article {
        font-size: 14px;
        padding-right: 12px!important;
        margin-bottom: 20px;
        /* border-bottom: 2px solid grey !important; */
    }

    body.blog .dd-courier-table-list article.hide {
        height: 36px;
    }

    body.blog .dd-courier-table-list article.hide:after {
        content: "⇣";
        height: 100%;
        display: block;
    top: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    font-size: 1.8em;
    background: black;
    color: white;
    text-align: center;
    padding: 0;
    }

    body.blog .dd-courier-table-list article.show:after {
        content: "⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡⇡";
        width: 12px;
        height: 100%;
        display: block;
    top: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    font-size: 1.4em;
    background: black;
    color: white;
    text-align: center;
    overflow: hidden;
    }

    .post-meta-key {
        display: inline-block;
        background: gainsboro;
    }

    .post-meta li {
        margin-bottom: 14px;
    }

    #hugeit-contact-wrapper_3 .hugeit-contact-column-block > div .field-block {
        display: block !important;
    }

    #hugeit-contact-wrapper_3 {
        min-width: inherit !important;
    }

    #hugeit-contact-wrapper_3 .hugeit-contact-column-block {
        width: 94% !important;
    }

    #hugeit-contact-wrapper_3 .hugeit-contact-column-block {
        min-width: inherit !important;
    }

    #hugeit-contact-wrapper_3 .buttons-block {
        text-align: left !important;
    }

    #hugeit-contact-wrapper_3 .hugeit-contact-column-block > div .field-block {
        width: 98% !important;
    }
}

/*
    make single post page of logistics more readable
*/

main .post > .post-meta {
    display: none;
}

.post .gallery .gallery-item {
    margin-bottom: 20px;
}

.post .gallery .gallery-item .gallery-caption {
    display: block;
    font-size: .857em;
    margin-top: 10px;
}


@media (min-width: 768px) {
    main .post {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

    }

    main .post {
        border: 4px solid black;
        padding: 30px 40px;
    }

    main .post aside {
        order: 2;
        width: 100% !important;
    }

    main .post .entry-content {
        display: block;
        width: 100% !important;
        order: 3;
    }

    main .post aside .post-meta {
        display: flex;
        flex-wrap: wrap;
    }

    main .post aside .post-meta li {
        width: 50%;
        margin-bottom: 40px;
        text-align: left;
        padding: 0 10px;
    }
    main .post aside .post-meta li:nth-child(5), main .post aside .post-meta li:nth-child(6), main .post aside .post-meta li:nth-child(7) {
        width: 33%;
        margin-bottom: 40px;
        text-align: left;
        padding: 0 10px;
    }
        main .post aside .post-meta li:first-child {
        text-align: right;
        width: 100%;
        margin-bottom: 100px;
        font-size: 38px;
    }
        main .post aside .post-meta li:nth-child(2) {
        text-align: left;
        width: 100%;
        margin-bottom: 40px;
    }

    main .post aside .post-meta li:last-child {
        text-align: left;
        width: 100%;
        padding-bottom: 20px;
    }

    main .post aside .post-meta .post-meta-key {
        border-bottom: 1px dashed gray;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 10px;
    }
}

.hugeit_form {
    font-family: 'Simsun', serif;
}

.hugeit_form label {
    font-family: 'Simsun', serif !important;
}

.logistics-page-description {
    font-size: 18px;
    color: black;
    padding-block: 1em;
}