/*
Theme Name: newsbaccara
Theme URI: https://newsbaccara.net/
Author: newsbaccara
Author URI: https://newsbaccara.net/
Description: Test
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;800;900&display=swap');
body {
    font-family: 'Kanit', sans-serif;
    position: relative;
    color: white;
    height: 100% !important;
    overflow-x: hidden;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.wrapper-menu {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    outline: none;
    position: absolute;
    left: 10px;
    top: 8px;
    z-index: 1000;
    transition: all .5s;
}

.wrapper-menu2 {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
    outline: none;
}

.wrapper-menu.hamopen {
    position: fixed;
    left: 200px;
    top: 8px;
}

.line {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
    animation: lineone 2s ease 0s infinite normal none;
}

@keyframes lineone {
    0.0% {}
    50.1% {
        transform: scale3d(1.2, 1, 1) translate(-10px);
    }
}

.line2 {
    stroke-dasharray: 60 60;
    stroke-width: 3;
    animation: linetwo 2s ease 0s infinite normal none;
}

@keyframes linetwo {
    0.0% {}
    50.1% {
        transform: scale3d(.8, 1, 1) translate(10px);
    }
}

.line3 {
    stroke-dasharray: 60 207;
    stroke-width: 3;
    animation: linetree 2s ease 0s infinite normal none;
}

@keyframes linetree {
    0.0% {}
    50.1% {
        transform: scale3d(1.2, 1, 1) translate(-10px);
    }
}

.open .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
    animation: yourAnimation 3s ease 0s infinite normal none;
}

.open .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 3;
    animation: yourAnimation 3s ease 0s infinite normal none;
}

.open .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 3;
    animation: yourAnimation 3s ease 0s infinite normal none;
}

@keyframes yourAnimation {
    0.0% {}
    50.1% {}
}

/* Single Page */

.containpage {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 21px;
    margin-bottom: 20px;
    padding: 10px;
    background: #00000066;
    color: white;
    transition: .3s;
    border-radius: 10px;
}

.containpage.page {
    max-width: 100%;
    background: #23232300;
    margin: 0;
    margin-top: 175px;
    padding: 0;
    border-radius: 0;
}

@media (max-width:991px) {
    .containpage {}
    .containpage.page {}
}

@media (max-width:767px) {
    .containpage {}
    .containpage.page {}
}

.headsingle h1 {
    font-size: 30px;
}

.headsingle b {
    font-weight: 200;
}

.headsingle span {
    font-weight: 100;
    font-size: 13px;
}

.headsingle p {
    margin-top: 10px;
    font-weight: 200;
}

.headsingle a {
    padding: 0 5px;
    display: inline-block;
    background: #3b3b3b;
    color: white;
    border-radius: 5px;
    margin: 0 3px;
}

/* Single Page */

html {
    height: 100%;
    padding: 0;
}

body {
    padding: 0;
    margin: 0;
    font-family: 'Kanit', sans-serif;
    position: relative;
    color: white;
    height: 100% !important;
    overflow-x: hidden;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

div#page {
    height: 100%;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

footer {
    margin-top: auto !important;
}

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: absolute;
        top: -46px;
    }
}

/* AllPost */

/*Post*/

.containpage .category-post h2 {
    display: none;
}

.containpage .category-post ul {
    padding: 0;
    margin: 0;
}

.containpage .category-post li {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}

.containpage .category-post li.current-cat a {
    background: linear-gradient( 90deg, rgb(216 33 33) 0%, rgb(101 0 2) 100%);
    color: #ffd349;
    font-weight: 300;
}

.containpage .category-post ul li a {
    padding: 11px 3px;
    margin-bottom: 9px;
    display: block;
    color: #fff;
    background: #00000063;
    border-radius: 9px;
    text-decoration: none;
}

@media (max-width:767px) {
    .containpage .category-post ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .containpage .category-post ul li a {
        padding: 10px 5px;
        margin: 0 5px;
        margin-bottom: 10px;
        height: 100%;
        display: flex;
        text-align: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

.containpage .pages-post {
    text-align: center;
    margin-top: 10px;
}

.containpage .pages-post a,
.containpage .pages-post span {
    display: inline-block;
    background: linear-gradient(180deg, #505050 30%, #262626);
    padding: 10px;
    border-radius: 10px;
    color: white;
}

.containpage .pages-post span {
    background: linear-gradient( 90deg, rgb(216 33 33) 0%, rgb(101 0 2) 100%);
    color: #ffd349;
}

/*POST*/

.postcontainer {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.posthead {}

.nav-link {
    font-size: 16px;
}

.p-post {
    padding: 0 5px !important;
}

.nav-link {
    line-height: 25px;
    padding: 20px 0;
}

.nav-link i {
    width: 40px;
}

.nav-pills .nav-link {
    border-radius: .25rem;
    margin-top: 5px;
    font-size: 18px;
    background: #0000005e;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background: linear-gradient(180deg, #f52867 30%, #bf001d);
    text-shadow: 0 0 5px white;
}

.gridpost {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ingridpost {
    padding: 5px;
    text-align: center;
    font-size: 18px;
    width: 100%;
}

.iningridpost {
    width: 100%;
    background: #00000045;
    padding: 5px;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    height: 100%;
    padding-bottom: 13px;
    color: white;
}

.ingridpost img {
    width: 100%;
    height: auto;
    padding-bottom: 5px;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .p-post {
        padding: 0 5px !important;
    }
}

@media (max-width: 768px) {
    .gridpost {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .nav-pills .nav-link {
        border-radius: .25rem;
        margin-top: 5px;
        background: #2626266e;
    }
    .postmenu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .nav-link {
        padding: 10px 0 !important;
    }
    .gridmenu {
        padding: 3px;
    }
    .nav-link .inpostmenu {
        width: 100%;
        height: 100%;
        padding-top: 10px;
        border-radius: 5px;
    }
    .nav-link.active .inpostmenu {
        width: 100%;
        height: 100%;
        background: transparent;
        padding-top: 10px;
        border-radius: 5px;
    }
}

.head06 img {
    width: 90px;
    -webkit-filter: drop-shadow(0px 0px 7px #b59951);
    filter: drop-shadow(0px 0px 7px #b59951);
}

.head06 {
    padding-top: 15px;
    font-size: 26px;
    white-space: nowrap;
    text-align: center;
}

/*END POST*/

/* AllPost */

/* SECTION 4*/

.containsec04 {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.headersec04 {
    padding: 5px 0;
    font-size: 20px;
    font-weight: bold;
}

.gridleft04 .gridmain04 {
    margin-top: 15px;
    background: #0e0e0e00;
    border-radius: 10px;
}

.gridsec04 {
    position: relative;
    padding: 10px;
}

.ingreid04 {
    background: #0000005e;
    border-radius: 10px;
}

.ingreid04 img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.detail04 {
    position: absolute;
    width: 98%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media(max-width: 767px) {
    .detail04 {
        position: relative;
        padding: 10px 0px 10px 10px !important;
    }
}

.gridright04 {
    background: #00000052;
    border-radius: 10px;
    padding: 10px !important;
}

@media (max-width:1200px) {
    .gridright04 {
        background: #00000052;
        border-radius: 10px;
        padding: 10px !important;
        margin-top: 20px;
    }
}

.gridleftsec04 {
    background: red;
}

.detailsec04 p {
    margin-top: 10px;
    font-size: 15px;
}

.sidebar04 {
    position: -webkit-sticky;
    position: sticky;
    top: 64px;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 5px #00000014, 0 0 15px #000000a1;
    background: #1313134a;
}

@media (max-width:1199px) {
    .sidebar04 {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 850px) {
    .headersec04 {
        padding: 5px 0;
        font-size: 2.4vw;
        font-weight: bold;
    }
    .detailsec04 {
        font-size: 1.5vw;
    }
    .sidebar04 {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .headersec04 {
        padding: 5px 0;
        font-size: 3vw;
        font-weight: bold;
    }
    .detailsec04 {
        font-size: 2vw;
    }
}

@media (max-width: 530px) {
    .headersec04 {
        padding: 5px 0;
        font-size: 4.3vw;
        font-weight: bold;
    }
    .detailsec04 {
        font-size: 3vw;
    }
}

@media (max-width: 678px) {
    .gridleft04 td:nth-child(1) {
        width: 100%;
        padding: 5px;
    }
    .gridleft04 td:nth-child(2) {
        width: 100%;
        padding: 0 10px;
    }
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #ef182d;
    border-color: #ef182d;
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    margin: 3px;
    border-radius: 10px !important;
    color: #ffffff;
    background-color: #252525;
    border: none;
    box-shadow: 0 0 5px #000000;
}

.page-link:hover {
    z-index: 2;
    color: #ffffff;
    text-decoration: none;
    background-color: #2f2f2f;
    border-color: #313131;
}

/*END SECTION 4*/

/* Page Number */

.page-numbers {
    margin: 0 3px;
    padding: 8px;
    background: #313131;
    border-radius: 5px;
    color: white;
}

.page-numbers:hover {
    color: white;
    text-shadow: 0 0 5px white, 0 0 10px white;
}

.page-numbers.current {
    background: #3131317d;
    text-shadow: 0 0 5px white, 0 0 10px white;
}

/* Page Number */

/* News Custom Categort */

.containpage .category-post ul {
    margin-bottom: 10px;
}

.containpage .category-post li.current-cat a {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}

@media (max-width:767px) {
    .containpage .category-post ul li {
        display: none;
    }
    .containpage .category-post ul {
        display: grid;
        grid-template-columns: 1fr;
        transition: all .3s;
    }
    .containpage .category-post li.current-cat {
        display: block;
    }
    .containpage .category-post li.current-cat a {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        position: relative;
        margin: 0;
        padding: 0;
    }
    .containpage .category-post li.current-cat::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.7em solid white;
        border-right: 0.9em solid #ffffff00;
        border-bottom: 0;
        border-left: 0.9em solid transparent;
    }
    .containpage .category-post ul:hover li {
        display: block;
    }
    .containpage .category-post ul:hover li a {
        padding: 10px 5px;
        margin-bottom: 9px;
    }
    .containpage .category-post ul:hover li.current-cat::after {
        display: none;
    }
}

/* News Custom Categort */

/* LOGIN Mobile */

.footermobile {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 55px;
    background: linear-gradient(180deg, #141315, #282828);
    padding-bottom: 3px;
    z-index: 10;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}

.footermobile:before {
    content: "";
    position: absolute;
    left: 0;
    top: -1.5px;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ecbd7b 30%, #ecbd7b 70%, transparent);
}

.footermobile table {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    height: 100%;
}

.footermobile a {
    color: white;
    font-size: 14px;
    text-decoration: none;
    display: block;
    font-weight: 200;
}

.footermobile h5 {
    font-weight: 100;
    font-size: 19px;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    order: 2;
}

.footermobile td {
    width: 20%;
    white-space: nowrap;
    border-right: 1px solid #464646;
    transition: all .3s;
    cursor: pointer;
    position: relative;
    vertical-align: top;
}

.footermobile td .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.footermobile td:last-child {
    border: none;
}

.footermobile td:hover {
    background: #00000099;
    border-radius: 10px;
}

.footermobile img {
    width: 33px !important;
    height: 33px !important;
    max-width: initial !important;
    margin: 0 auto;
    display: block;
    margin-right: 5px;
}

@media (max-width:767px) {
    .footermobile {
        height: 65px;
    }
    .footermobile td .menu {
        flex-direction: column;
    }
    .footermobile img {
        margin-right: auto;
    }
}

@media (max-width:425px) {
    .footermobile a {
        font-size: 3vw;
        margin-top: 3px;
    }
}

/* LOGIN Mobile */