/**
Theme Name: MUSEF
Author: Kanyarut R.
Author URI: https://www.kanyarut.com
Description: Theme for MUSEF Project
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: musef
Template: astra
*/
html,body {
    padding: 0;
    margin: 0;
    background: #F6F6F6;
}
hr {
    background-color: #F6F6F6;
    margin: 1em 0;
}
p {margin-bottom: 1em;}
img {
    max-width: 100%;
}
.entry-content ul,
.entry-content ol,
.entry-content[ast-blocks-layout] ul,
.entry-content[ast-blocks-layout] ol {
    margin: 0 0 1.5em 2.5em;

}
.home .site-main > article{
    padding: 0 !important;
}
.ast-search-box.full-screen {
    background: #0035AD;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-full-megamenu-wrapper {
    border-top: 1px solid #F6F6F6;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-full-megamenu-wrapper .astra-megamenu {
    padding: 0 !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item {
    text-align: center;
    padding: 0;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu.astra-megamenu-focus.sub-menu>.menu-item {
    /* padding: 0;
    margin: 0; */
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-full-megamenu-wrapper .astra-megamenu {
    justify-content: center;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item {
    padding: 1.2em 0 0.9em;
    margin: 0 1.2em;
    border-bottom: 4px solid transparent;
    transition: all 0.4s ease-in-out;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item img {
    filter: grayscale(100%);
    transition: all 0.4s ease-in-out;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item:hover {
    color: var(--ast-global-color-0);
    border-bottom: 4px solid var(--ast-global-color-0);
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item:hover img {
    filter: none;
}
.main-header-menu .sub-menu .menu-link {
    padding: 0;
    margin: 0;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li:hover .astra-megamenu>.menu-item,
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li .astra-megamenu>.menu-item {
    flex: 0 0 auto !important;
    padding-right: 0!important;
    padding-left: 0!important;
}
.site-header .falang-menu-item .menu-text {
    display: none;
}

@media screen and (max-width: 920px) {
    .site-header li.trp-language-switcher-container {
        display: inline-block;
        width: 28px !important;
    }
}
.ast-header-break-point .ast-builder-menu-3 {
    border: none;
    width: 90px;
}
.ast-header-break-point .ast-builder-menu-3 .main-header-menu {
    gap: 5px;
    background-color: #fff;
    justify-items: center;
    align-items: center;
}
.ast-header-break-point .ast-builder-menu-3 .main-header-menu li {
    line-height: 0;
}
.site-header .trp-language-switcher-container a.menu-link {
    width: 32px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    margin: 0 2px;
    border-radius: 50%;
    background: #f6f6f6;
    color: #2D312F;
    display: inline-block;
    font-family: Kanit, sans-serif;
}
.site-header .trp-language-switcher-container a.menu-link {
    font-size: 13px;
    height: 28px;
    width: 28px;
    line-height: 28px;
    padding: 0;
    text-align: center;
    border-radius: 50%;
    justify-content: center;
    background-color: #F6F6F6;
    color: #2D312F;
}
.site-header .trp-language-switcher-container.current-language-menu-item a.menu-link {
    background: var(--ast-global-color-0);
    color: #fff;
}
.site-header .trp-language-switcher-container.menu-item-742 .trp-ls-language-name {
    display: none;
}
.site-header .trp-language-switcher-container.menu-item-742 .menu-link:after {
    content: "ไทย";
}
.site-header .trp-language-switcher-container .menu-text {

}
.trp-ls-language-name {

}
.site-header .trp-language-switcher-container .menu-link {
    padding: 0 !important;
}
.single-post .site-content {
    background: #fff;
}
.single-post .site-content .content-area {
    /* padding: 40px 0; */
    max-width: 950px;
    margin: 40px auto !important;
}
.single-post-header {
    border-bottom: 1px solid #C7C7C7;
    margin: 0 0 15px;
    padding: 0 0 15px;
}
.single-post-header h1 {
    margin: 10px 0;
}
.single-post-category {
    font-family: Kanit, sans-serif;
    line-height: 1.6em;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
}
.single-post-category-seperator {
    width: 1px;
    height: 1em;
    display: inline-block;
    background: #C7C7C7;
}
.single-post .post {
    font-size: 1.1em;
    line-height: 1.6em;
}
.single-post-credits-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    font-size: 1rem;
    line-height: 1.4em;
}
@media screen and (max-width: 560px) {
    .single-post-credits-list {
        grid-template-columns: repeat(1, 1fr);
    }
}
.single-post-credits-list > li {
    display: flex;
    gap: 10px;
}
.single-post-credit-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
}
.single-post-credit-image img {
    object-fit: cover;
}
.single-post-credit-content {
    flex: 1;
}
.single-post-credit-contact-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    display: flex;
    gap: 5px;
}
.single-post-credit-contact-list img {
    width: 24px;
    max-width: 100%;
}
.page-footer-wrapper {
    font-family: Kanit, sans-serif;
    position: relative;
    overflow: hidden;
    clip-path: polygon(calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%, 0 0);
}
.page-footer-wrapper:after {
    content: "";
    width: 20px;
    height: 20px;
    background: #DBE6FF;
    position: absolute;
    top: 0;
    right: 0;
}
.page-footer-wrapper a {
    color: #2D312F;
    font-weight: normal;
    text-decoration: none;
}
.page-footer-wrapper a:hover {
    color: var(--ast-global-color-0);
}
.page-footer-wrapper div.wp-block-uagb-taxonomy-list div.uagb-layout-list ul.uagb-list-wrap {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-footer-wrapper div.wp-block-uagb-taxonomy-list ul.uagb-list-wrap div.uagb-tax-link-wrap {
    margin-bottom: 0;
}
.submenu-content {
    background: #fff;
    height: 60px;
    line-height: 60px;
    width: 100%;
    text-align: center;
}
.content-box-wrapper {
    flex: 1;
    width: 100%;
}
.content-box {
    flex: 1;
    width: 100%;
    margin: 32px 0;
    padding: 32px;
    background: #fff;
}

@media screen and (max-width: 560px) {   
    .content-box {
        padding: 16px;
    }
}
.content-box-title {
    color: var(--ast-global-color-0);
    margin: 0 0 0.5em;
}
.article-single-wrapper {
    flex: 1;
}
.article-related-post {
    background: #DBE6FF;
    padding: 1px 0;
}
.article-featured-post {
    background: #F6F6F6;
    padding: 1px 0;
}
.article-featured-post-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px 16px;
}
.related-post-list {
    margin: 16px 0 0 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px 16px;
}
.crafty-post-loop-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px 16px ;
}
@media screen and (max-width: 1200px) {
    .article-featured-post-list ,
    .related-post-list,
    .crafty-post-loop-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 768px) {
    .article-featured-post-list ,
    .related-post-list,
    .crafty-post-loop-list {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 560px) {
    .article-featured-post-list,
    .related-post-list,
    .crafty-post-loop-list{
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
}
.crafty-loop-item-image {
    margin: 0 0 10px;
}
h3.crafty-loop-item-title {
    margin: 3px 0 5px;
    font-size: 1.2rem;
    line-height: 1.3em;
}
h3.crafty-loop-item-title a {
    color: #2D312F;
    text-decoration: none !important;
}
h3.crafty-loop-item-title a:hover {
    color: var(--ast-global-color-0);
}
.crafty-loop-item-excerpt {
    font-size: 0.9rem;
    line-height: 1.4em;
}
.crafty-loop-item-tags {
    display: flex;
    gap: 5px;
}
.crafty-loop-item-tag {
    background: #f6f6f6;
    border-radius: 15px;
    font-size: 0.8rem;
    line-height: 1.3em;
    padding: 5px 8px 2px;
    margin: 10px 0 0;
    white-space: nowrap;
    text-decoration: none !important;
    color: #000;
}
.crafty-loop-item-tag:hover {
    background: var(--ast-global-color-0);
    color: #fff;
}
.crafty-loop-item .read-more {
    display: none;
}
.crafty-loop-content-item-title {
    font-size: 1.3em;
    color: var(--ast-global-color-0);
    font-weight: bold;
}
.post-search-result .crafty-loop-item {
    display: flex;
    gap: 16px;
    margin: 16px 0 0;
}
.post-search-result .crafty-loop-item .crafty-loop-item-image {
    width: 300px;
}
.post-search-result .crafty-loop-item .crafty-loop-item-image img {
    width: 100%;
}
.post-search-result .crafty-loop-item .crafty-loop-item-content {
    flex: 1;
}

@media screen and (max-width: 560px) {
    .post-search-result .crafty-loop-item {
        flex-direction: column;
        gap: 0;
        margin: 0 0 30px;
    }
    .post-search-result .crafty-loop-item .crafty-loop-item-image {
        width: 100%;
    }
}

.all-posts {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px 16px;
}

@media screen and (max-width: 768px) {
    .all-posts {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width: 560px) {
    .all-posts {
        grid-template-columns: repeat(1,1fr);
        gap: 30px;
    }
}


.post-search-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1em;
}
.post-search-wrapper label {
    font-size: 0.9em;
    display: block;
}
.post-search-wrapper-item {
    flex: 1;
}
.post-search-wrapper select {
    appearance: none;
    background: #fff url(images/arrow-down.svg) no-repeat center right 10px;
    border-radius: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
}
.post-search-result {
    margin: 60px 0 0;
}
.post-search-category {
    width: 100%;
}
.post-search-sort {
    width: 50%;
}
.post-load-more {
    border-radius: 50px;
    height: 50px;
    line-height: 50px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
    background: #fff;
    color: var(--ast-global-color-0);
}

#post-archive-slider {
    margin: 0 0 36px;
}
#post-archive-slider .slick-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
#post-archive-slider .slick-dots > li {
    width: 60px;
    height: 50px;
}
#post-archive-slider .slick-dots > li button {
    background: #F6F6F6;
    border-radius: none;
    font-size: 1rem;
    overflow: hidden;
    color: #2D312F;
    padding: 0;
    margin: 0;
    height: 50px;
    width: 60px;
    line-height: 50px;
}
#post-archive-slider .slick-dots > li button:hover {
    background-color: var(--ast-global-color-0);
    color: #fff;
}
#post-archive-slider .slick-dots > li.slick-active button {
    font-weight: bold;
    color: #2D312F;
    background-color: #fff;
}
#post-archive-slider .crafty-loop-item-content {
    position: relative;
}
#post-archive-slider .crafty-loop-item-image img {
    width: 100%;
}
#post-archive-slider .crafty-loop-item-tags {
    position: absolute;
    top: 0;
    right: 0;
}
.page-about {
    background: #EDF3FF;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.loader {
    margin: 40px auto;
    border: 10px solid #EAF0F6;
    border-radius: 50%;
    border-top: 10px solid var(--ast-global-color-0);
    width: 50px;
    height: 50px;
    animation: spinner 1s linear infinite;
}
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.ast-single-post.ast-page-builder-template .site-main > article, .woocommerce.ast-page-builder-template .site-main {
    padding: 0;
}
.musef-events-page {
    width: 100%;
}
.musef-events-header {
    color: var(--ast-global-color-0);
    margin: 0 0 10px;
}
.musef-events-page-banner {
    width: 100%;
    margin: 0 0 20px;
}
.musef-events-page-banner img {
    width: 100%;
}
.musef-events-page .musef-events-page-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
}
.musef-events-page-detail {
    background: #fff;
    padding: 20px;
    margin: 0 0 20px;
}
.musef-activities-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    border-bottom: 1px solid #ddd;
    padding: 0 0 20px;
    margin: 0 0 20px;
    line-height: 1.3em;
}
@media screen and (max-width: 860px) {
    .musef-events-page-detail {
        padding: 10px;
    }
    .musef-activities-list {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width: 560px) {
    .musef-events-page-detail {
        padding: 0;
    }
    .musef-activities-list {
        grid-template-columns: repeat(1,1fr);
    }
}
.musef-activities-list h6 {
    font-size: 1em;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.musef-activities-list time {
    font-size: 0.9em;
    display: block;
    margin: 10px 0 5px;
    color: var(--ast-global-color-0);
}
.musef-activities-list .no-event {
    width: 100%;
    padding: 30px 0 20px 0;
    text-align: center;
    color: #999;
    font-weight: 1.4em;
    font-style: italic;
    grid-column: 1/4;
}
.musef-activities-header small {
    font-weight: normal;
    font-size: 1.1em;
    color: #ccc;
    padding: 0 5px;
}
.musef-event-btn {
    text-align: center;
}
.btn-musef {
    display: inline-block;
    border-radius: 50px;
    height: 40px;
    line-height: 40px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
    background: var(--ast-global-color-0);
    font-size: 1.1rem;
    color: #fff;
    text-decoration: none;
}
.btn-musef:hover {
    background: #222;
    color: #fff;
}
.musef-btn-white {
    display: inline-block;
    border-radius: 50px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
    background: #fff;
    font-size: 1.1rem;
    color: var(--ast-global-color-0);
}
.musef-btn-white:hover {
    background: #000;
    color: #fff
}
.musef-events-page-registered {
    padding: 100px 40px;
    background: var(--ast-global-color-0);
    color: #fff;
    width: 100%;
}
.musef-events-page-registered-content {
    max-width: 500px;
    margin: 0 auto;
}
.musef-events-page-registered h2 {
    color: #fff;
}
.musef-event-image-board {
    display: grid;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
    grid-template-columns: repeat(4,1fr);
}
@media screen and (max-width: 860px) {
    .musef-event-image-board {
        grid-template-columns: repeat(3,1fr);
    }
}
@media screen and (max-width: 560px) {
    .musef-event-image-board {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width: 380px) {
    .musef-event-image-board {
        grid-template-columns: repeat(1,1fr);
    }
}
.musef-event-image-board > div {
    position: relative;
    padding: 56.2% 0 0 0;
    width: 100%;
    overflow: hidden;
}
.musef-event-image-board img {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.musef-events-form-content {
    background: #fff;
    padding: 20px;
    margin: 0 auto 20px;
    flex-direction: column;
}
@media screen and (max-width: 560px) {
    .musef-events-form-content {
        padding: 0;
    }
}
.musef-events-form-detail {
    background: #fff;
    padding: 20px;
    margin: 0 0 10px;
}

@media screen and (max-width: 560px) {
    .musef-events-form-detail {
        padding: 0;
    }
}
.musef-activities-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px 20px;
    border-bottom: 1px solid #ddd;
    padding: 0 0 20px;
    line-height: 1.3em;
}
.musef-activities-date {
    border-bottom: 1px solid #ddd;
    margin: 0 0 20px;
}
.musef-activities-date:last-child {
    border: none;
}
.musef-activities-date .musef-activities-form {
    border: none;
}
@media screen and (max-width:768px) {
    .musef-activities-form {
        grid-template-columns: repeat(2,1fr);
    }
}
@media screen and (max-width:480px) {
    .musef-activities-form {
        grid-template-columns: repeat(1,1fr);
    }
}

.musef-activities-form h6 {
    font-size: 1em;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.musef-activities-form .activity-detail-link {
    color: var(--ast-global-color-0);
}
.musef-activities-form-slot {
    position: relative;
    padding: 0 0 0 20px;
    margin: 10px 0;
}
.musef-activities-select-slot {
    position: absolute;
    top: 3px;
    left: 0;
}
.musef-activities-form-slot label {
    display: block;
}
.musef-activities-form-slot small {
    display: block;
    margin: 0.5em 0;
}
.musef-activities-form-slot time {
    display: block;
    font-size: 0.95em;
    vertical-align: middle;
}
.musef-activities-form-slot a {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    margin: 0.5em 0 0 0;
}
.musef-activities-form .no-event {
    width: 100%;
    padding: 30px 0 20px 0;
    text-align: center;
    color: #999;
    font-weight: 1.4em;
    font-style: italic;
    grid-column: 1/4;
}
.musef-booking-page-banner {
    width: 100%;
    background-color: var(--ast-global-color-0);
    color: #fff;
    font-size: 1.2em;
    margin: 0 0 20px;
}
.musef-booking-page-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding-bottom: 20px;
}
.musef-booking-page-banner-image {
    padding: 40px 60px;
    max-width: 400px;
}
.musef-booking-page-banner h2 {
    color: #fff;
}
.musef-booking-page-banner h3 {
    color: #fff;
    font-weight: normal;
}
.musef-booking-page-banner h5 {
    color: #fff;
    margin: 20px 0 10px;
    font-size: 1.1em;
}
.musef-booking-page-banner p {
    color: #fff;
    margin: 0;
}
.musef-events-form-info label {
    display: block;
}
.musef-events-form-info .field-wrapper {
    display: block;
    margin: 20px 0;
}
.musef-events-form-info select {
    appearance: none;
    background: #fff url(images/arrow-down.svg) no-repeat center right 10px;
    border-radius: 46px;
    height: 46px;
    line-height: 46px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
    width: 300px;
    max-width: 100%;
}
@media screen and (max-width:560px) {
    .musef-events-form-info select {
        width: 100%;
    }
}
.musef-events-form-info input {
    appearance: none;
    border-radius: 46px;
    height: 46px;
    line-height: 46px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px;
    font-family: "Kanit", sans-serif;
    width: 500px;
    max-width: 100%;
}
.musef-events-form-info .select2-container {
    width: 500px !important;
    max-width: 100% !important;

}
.musef-events-form-info .select2-container--default .select2-selection--multiple {
    appearance: none;
    background: #fff url(images/arrow-down.svg) no-repeat center right 10px;
    border-radius: 46px;
    height: 46px;
    line-height: 46px;
    border: 1px solid var(--ast-global-color-0);
    padding: 0 20px 0 2px;
    font-family: "Kanit", sans-serif;
    max-width: 100%;
    width: 100%;
}
.musef-events-form-info .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid var(--ast-global-color-0) !important;
}
.musef-events-form-info .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 23px 23px 0 0 !important;
}
.musef-events-form-info .select2-container--open .select2-dropdown--below {
    border-radius: 0 0 23px 23px !important;
    border: 1px solid var(--ast-global-color-0) !important;
    overflow: hidden;
}
.musef-events-form-info .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 20px;
}
.musef-events-form-info .select2-container--default .select2-selection--multiple .select2-selection__choice {
    line-height: 32px;
    background-color: #fff;
    border-radius: 20px !important;
    position: relative;
    padding-left: 24px !important;
    padding-right: 10px !important;
}
.musef-events-form-info .select2-selection__choice__remove {
    font-size: 30px;
    line-height: 0;
    position: absolute;
    top: 13px;
    left: 6px;
}
.activity-detail-modal-content {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.activity-detail-modal-detail {
    flex: 1;
}
.activity-detail-modal-image {
    flex: 1;
    width: 40%;
}
@media screen and (max-width:560px) {
    .activity-detail-modal-content {
        flex-direction: column-reverse;
        gap: 0;
    }
    .activity-detail-modal-image {
        width: 100%;
    }
}

.musef-social-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}
.musef-social-share strong {
    padding: 0;
    color: #2D312F;
}
.musef-social-share a {
    background: #F6F6F6;
    color: var(--ast-global-color-0);
    padding: 5px 10px 5px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

.blocker {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    overflow: auto;
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.75);
    text-align: center;
  }
  .blocker:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
  }
  .blocker.behind {
    background-color: transparent;
  }
  .modal {
    display: none;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    max-width: 600px;
    box-sizing: border-box;
    width: 90%;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 10px #000;
    text-align: left;
  }
  
  .modal a.close-modal {
    position: absolute;
    top: -30px;
    right: -8px;
    display: block;
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(images/x.svg);

  }
  
  .modal-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 12px 16px;
    border-radius: 5px;
    background-color: var(--ast-global-color-0);
    height: 20px;
  }
  
  .modal-spinner > div {
    border-radius: 100px;
    background-color: #fff;
    height: 20px;
    width: 2px;
    margin: 0 1px;
    display: inline-block;
  
    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
    animation: sk-stretchdelay 1.2s infinite ease-in-out;
  }
  
  .modal-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }
  
  .modal-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }
  
  .modal-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }
  
  @-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.5) }
    20% { -webkit-transform: scaleY(1.0) }
  }
  
  @keyframes sk-stretchdelay {
    0%, 40%, 100% {
      transform: scaleY(0.5);
      -webkit-transform: scaleY(0.5);
    }  20% {
      transform: scaleY(1.0);
      -webkit-transform: scaleY(1.0);
    }
  }

  #ast-hf-mobile-menu {
    position: fixed;
    width: 100%;
  }

  
.article-single-wrapper .content-area {
    padding: 0 20px !important;
}

.crafty-contenthead-nav {

}
.crafty-contenthead-nav ul {
    display: flex;
    background: #fff;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* border-top: 1px solid #ddd; */
}
.crafty-contenthead-nav a  {
    display: block;
    height: 62px;
    line-height: 62px;
    color: #2D312F;
    font-size: 16px;
    margin: 0 1.2em;
    border-bottom: 4px solid transparent;
    font-family: Kanit, sans-serif;
}
/* @media screen and (max-width: 1200px) {
    .crafty-categoryhead-nav-item {
        font-size: 16px;
        margin: 0 10px;
    }
} */
.crafty-contenthead-nav .current-menu-item  a{
    border-bottom: 4px solid var(--ast-global-color-0);
}
.crafty-contenthead-nav a {
    color: #2D312F;
    /* font-weight: bold; */
    text-decoration: none;
}
.crafty-contenthead-nav .current-menu-item a {
    color: var(--ast-global-color-0);
}