/*

Theme Name: FOURWINNER Theme PG Design

Theme URI: https://designbypg.com/

Author: the WordPress team

Author URI: https://designbypg.com/

Description: designbypg

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

License URI: http://www.gnu.org/licenses/gpl-2.0.html

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;

  overflow-x: hidden;

       height: 100%!important;

   -ms-flex-direction: column!important;

    flex-direction: column!important;

    display: -ms-flexbox!important;

    display: flex!important;

}





html{

  margin: 0 !important;

}



img{

  max-width: 100%;

  height: auto;

}































/*

    DEMO STYLE

*/





a,

a:hover,

a:focus {

    color: white;

    text-decoration: none;

    transition: all 0.3s;

}



.navbar {

    padding: 15px 10px;

    background: #fff;

    border: none;

    border-radius: 0;

    margin-bottom: 40px;

    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}



.navbar-btn {

    box-shadow: none;

    outline: none !important;

    border: none;

}



.line {

    width: 100%;

    height: 1px;

    border-bottom: 1px dashed #ddd;

    margin: 40px 0;

}



/* ---------------------------------------------------

    SIDEBAR STYLE

----------------------------------------------------- */



#sidebar {

    width: 250px;

    position: fixed;

    top: 0;

    left: -250px;

    height: 100vh;

    z-index: 999;

    background:#12121bb0;

    color: #fff;

    transition: all 0.3s;

    overflow-y: scroll;

    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);

}



#sidebar.active {

    left: 0;

}



#dismiss {

    width: 35px;

    height: 35px;

    line-height: 35px;

    text-align: center;

    background: black;

    border-radius: 20px;

    position: absolute;

    top: 10px;

    right: 10px;

    z-index: 999999999;

    cursor: pointer;

    -webkit-transition: all 0.3s;

    -o-transition: all 0.3s;

    transition: all 0.3s;

}



#dismiss:hover {

    background: #fff;

    color: #565656;

}



.overlay {

    display: none;

    position: fixed;

    width: 100vw;

    height: 100vh;

    background: rgba(0, 0, 0, 0.7);

    z-index: 998;

    opacity: 0;

    transition: all 0.5s ease-in-out;

}

.overlay.active {

    display: block;

    opacity: 1;

}



#sidebar .sidebar-header {

    padding: 15px;

    background: #212121;

}



#sidebar ul.components {

    border-bottom: 1px solid #ffc705;

}



#sidebar ul p {

    color: #fff;

    padding: 10px;

}



#sidebar ul li a {

    padding: 10px;

    font-size: .9em;

    display: block;

}



#sidebar ul li a:hover {

    color: gold;

    background: #333;

}



a[data-toggle="collapse"] {

    position: relative;

}



.dropdown-toggle::after {

    display: block;

    position: absolute;

    top: 50%;

    right: 20px;

    transform: translateY(-50%);

}



ul ul a {

    font-size: 0.9em !important;

    padding-left: 30px !important;

    background: #6d7fcc;

}



ul.CTAs {

    padding: 20px;

}



ul.CTAs a {

    text-align: center;

    font-size: 0.9em !important;

    display: block;

    border-radius: 5px;

    margin-bottom: 5px;

}



.download {

    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),

                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);

    color: white;

    font-size: 20px !important;

    font-weight: bold;

}

.download:hover {

     background:  radial-gradient(ellipse farthest-corner at left top, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),

                radial-gradient(ellipse farthest-corner at right bottom, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%)  !important;

    color: white !important;

    font-size: 17px !important;



}







a.article{

    background-color: #262626;

    color: white;

    font-weight: bold;

}

a.article:hover {

    background: #565656 !important;

    color: #fff !important;

        font-size: 17px !important;

}



/* ---------------------------------------------------

    CONTENT STYLE

----------------------------------------------------- */



#content {

    width: 100%;

    min-height: 100vh;

    transition: all 0.3s;

    position: absolute;

    top: 0;

    right: 0;

}

        .wrapper-menu {

  background-color: transparent;

  border: none;

  cursor: pointer;

  display: flex;

  padding: 0;

  outline: none;

  position: absolute;

  left: 10px;

  top: 17px;

  z-index: 1000;

  transition: all .5s;

  display: none;

}

@media (max-width:991px){

          .wrapper-menu {

  display: block;

}

}

.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: 5px;

  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: 5px;

   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: 5px;

   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: 5px;

  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%{

    }

}









/* Nav Bar */





.navbarmain {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 75px;
    background: linear-gradient(182deg, #0a0138, #0d004e),url(https://fourwinner.com/wp-content/uploads/2023/10/007.jpg)center center;
    background-size: cover;
    flex-direction: column;
    display: flex;
    box-shadow: 0 0 10px black;
}

@media (max-width:991px){

  .navbarmain{}

}

.navbarmain .logo{

      width:100%;

      max-width: 187px;

      height: auto;

      position: absolute;

      left: 27px;

      top: 50%;

      transition:all .3s;

      transform: translateY(-50%);

}

@media (max-width:991px){

  .navbarmain .logo{left: 50px;max-width: 170px;}

}

@media (max-width:440px){

  .navbarmain .logo{

  width: 35vw;

}



}

.navbarmain .logo img{

  width:75%;

  height:auto;

    -webkit-filter: drop-shadow(0px 0px 5px rgb(0 0 0));

  filter: drop-shadow(0px 0px 5px rgb(0 0 0));

}

.menuicon {
    display: flex;
    justify-content: center;
    align-items: center; /* ถ้าอยากให้อยู่กึ่งกลางแนวตั้งด้วย */
    transition: all 0.3s;
}

.menuicon.animate__slideInDown {
    --animate-duration: 0.5s;
}

.menuicon ul {
    margin: 0;
    padding: 0;
    display: flex;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

.menuicon ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menuicon ul li a {
    width: fit-content;
    padding: 0 15px;
    max-width: 95px;
    height: 90px;
    padding: 0 2px 2px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-color: #af0066;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    transition: all .3s;
}

a {
    color: #ffffff !important;
    text-decoration: none;
    background-color: transparent;
}

.menuicon ul li a:hover,
.menuicon ul li.current_page_item a {
    background-color: #ff009d;
}

.menuicon ul li img {
    width: 45px;
    display: block;
    margin: 0 13px;
    transition: all .3s;
    padding: 0 !important;
    -webkit-filter: drop-shadow(0px 0px 5px rgb(0 0 0));
    filter: drop-shadow(0px 0px 5px rgb(18 18 18));
}

.menuicon ul li a .menu-image-title-after.menu-image-title {
    padding: 0 !important;
}

@media (max-width:1120px) {
    .menuicon ul li a {
        margin-right: 5px;
    }
    .menuicon ul li img {
        width: 3.6vw;
    }
}

.overlaymenu {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    background: #000000c9;
    z-index: -1;
    display: none;
}

.overlaymenu.active {
    display: block;
}

@media (min-width:992px) {
    .overlaymenu.active {
        display: none;
    }
}

@media (max-width:991px) {
    .menuicon {
        display: none;
    }
    .menuicon.active {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        margin-left: 0;
        z-index: 1;
        margin: 0;
    }
    .menuicon ul {
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .menuicon ul li {
        margin: 10px auto;
    }
    .menuicon ul li a {
        border-radius: 20px;
        max-width: 150px;
    }
    .menuicon ul li a img {
        width: 50px;
        margin: 0 20px;
    }
}

@media (max-width:440px) {
    .menuicon ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.loginregishead{

    position: absolute;

    right: 0;

    margin: 2px;

    display: flex;

}

@media (max-width:991px){

  .loginregishead{

    right: 10px;

    top:15px;

}

}



.btn-primary {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    position: relative;
    -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
    border-radius: 5px;

    border: 2px solid transparent;
    background-color: #e10ae3;
    background-image: none;
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding: 0!important;
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
    line-height: 22px;
    transition: all .3s;
}

@media (max-width:991.86px){

  .btn-primary {

    margin:0px 10px;

  }

  .btn-primary:nth-child(2) {

    margin:0px 0px;

  }

}

@media (max-width:390.86px){

  .btn-primary{

    font-size: 3.2vw;

  }

}

.btn-primary:hover {

  -webkit-filter: saturate(2);

  filter: saturate(2);

  border-color: #ed02a6;

  background-image: radial-gradient(100% 100% at 50% 0, #ff00ea 0, #d400ff 44%, #ff00ea 100%), linear-gradient(125deg, #ff00bf, #a400f0 31.53%, #ff00c8 64.87%, #ff0095);

  text-shadow: 0 0 5px white, 0 0 15px white, 0 0 35px white;

}

.loginregishead .btn-primary:nth-child(2) {
    background-image: radial-gradient(100% 100% at 50% 0,#ff00bf 0,#cc00ff 44%,#ff00dd 100%), linear-gradient(180deg, #ed029f, #9702ed);
}

.btn-primary:after {
    background: linear-gradient( 270deg, rgba(234, 182, 113, 0), #250f6600 50.8%, rgba(234, 182, 113, 0));
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "";
    mix-blend-mode: screen;
    bottom: -4px;
}

.btn-primary:before {
    background: linear-gradient( 270deg, rgba(234, 182, 113, 0), #02ed4800 50.8%, rgba(234, 182, 113, 0));
    width: 100%;
    height: 2px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: "";
    mix-blend-mode: screen;
    top: -4px;
}

.btn-primary a{

  display: block;

  padding: 8px;

  color: #ffffff;

  text-decoration: none !important;

}

/* Nav Bar */



















/* ✅ ส่วนของ Side Game Bar */
.sidegamebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    background: linear-gradient(93deg, #080437, #3b1880);
    padding-top: 85px;
    transition: all .3s;
}

.sidegamebar::before,
.sidegamebar::after {
    background: linear-gradient(45deg, transparent 0%, #ff00a9 50%, transparent 100%);
    width: 2px;
    position: absolute;
    right: 0;
    top: 50%;
    height: 100%;
    transform: translateY(-50%);
    content: "";
}

/* ✅ ซ่อนไปเลยในมือถือ */
@media (max-width: 767px) {
    .sidegamebar {
        display: none !important;
    }
}

/* ✅ Container หลัก */
.fixedcontain {
    display: flex;
    position: fixed;
    top: 55px;
    bottom: 0;
    left: 0;
    right: 0;
    padding-top: 20px;
    overflow: auto;
}

/* ✅ PC Layout */
.fixedleft {
    width: 200px;
    position: relative;
}
.fixedright {
    width: calc(100% - 200px);
    position: relative;
}

/* ✅ Layout สำหรับมือถือ */
@media (max-width: 767px) {
    .fixedleft {
        display: none !important;
    }

    .fixedright {
        width: 100% !important; /* ขยายให้เต็มหน้าจอ */
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        left: 0;
        right: 0;
    }

    .fixedcontain {
        flex-direction: column !important;
        top: 75px; /* หรือปรับตาม header ของคุณ */
    }
}

/* ====== มุมโค้งหัวข่าวด้านบน (News Box) ====== */
.newsboxhead {
    width: 100%;
    height: 40px;
    background: #ff0098;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 10px #00000078;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.newsboxhead .-icon-container {
    position: absolute;
    background: #22164e00;
    padding: 0 10px;
    z-index: 1;
}
.newsboxhead {
    width: 100%;
    height: 40px;
    background: #ff0098;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 10px #00000078;
    
    /* เพิ่มมุมโค้งด้านล่าง */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width:767px){

  .sidegamebar{

  width: 110px;

  position:relative;

  padding-bottom:40px;

  height: 100%;
	background: linear-gradient(93deg, #030232, #02011f73);  

  border-bottom-right-radius:20px;

  margin-top: 36vw;

  z-index: 1;


}

  .sidegamebar::before {

    display:none;

}

.sidegamebar::after {

    display:none;

}

.sidegamebar.hide{

  display:none;

}

}

.fixedcontain{

  display:flex;

  position:fixed;

  top: 55px;

  bottom: 0;

  left: 0;

  right:0;

  padding-top: 20px;

  overflow: auto;

}

@media (max-width:767px){

  .fixedcontain{top: 75px;}

}

.fixedleft{

  width: 200px;

  position: relative;

}

.fixedright{

  width:calc(100% - 200px);

}

@media (max-width:767px){

  .fixedleft{

  width: 110px;

  position: relative;

  background: #0000007a;

  box-shadow: 0 0 10px black;

  border-radius: 20px;

}

.fixedright{

  width: 100%;

  position: absolute;

  top: 0;

}

}

@media (max-width: 991px){

  .sidegamebar{

  padding-top: 80px;

}

}

@media (max-width: 767px){

  .sidegamebar{

  padding-top: 20px;

}

}

.tabgamemenu ul {
    margin: 0;
    padding: 0 10px;
}

.tabgamemenu ul li {
    list-style: none;
}

.tabgamemenu ul li a {
    list-style: none;
    margin: 0;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: radial-gradient(100% 100% at 50% 0,#db08eb 0,#ff2fc1 44%,#db08eb 100%);
    position: relative;
    box-shadow: 0 5px 10px #000000b0;
    border-radius: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .3s;
    font-size: 14px;
    position: relative;
    z-index: 11;
}

@media (max-width:767px) {
    .tabgamemenu ul li a {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        text-align: center;
    }
}

.tabgamemenu ul li.current_page_item a {
    background: radial-gradient(100% 100% at 50% 0,#00972e 0,#00972e 44%,#00972e 100%);
    border: 1px solid #00972e;
}

.tabgamemenu ul li.current_page_item a img {
    -webkit-animation: x-floating-tab 1.5s ease-in-out infinite;
    animation: x-floating-tab 1.5s ease-in-out infinite;
}
@keyframes x-floating-tab {
    0% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
    50% {
        -webkit-transform: translateY(-5px) rotate( -1deg);
        transform: translateY(-5px) rotate( -1deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(0);
        transform: translateY(0) rotate(0);
    }
}
.tabgamemenu ul li a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 3px;
    height: 55%;
    background: hsla(0, 0%, 100%, .3);
    border-radius: 0 20px 20px 0;
}

.tabgamemenu ul li img{

  width: 60px;

  margin-right: 5px;

  padding: 0 !important;

}

@media (max-width:767px){

  .tabgamemenu ul li img{

  width: 40px;

  margin:0 auto;

}

}

.tabgamemenu ul li span {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}








/* Alert */





  /* ALERT */



  .swiper-container-2 {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto;
    padding: 30px 10px;
    overflow: auto;
    overflow: hidden;
    margin-top: -17px;
}

  .swiper-container-2 .swiper-slide{

    width: 100%;

    max-width: 650px;

    height: auto !important;

    box-shadow: 0 0 0;

    background-size: 100%;

    margin-top: 0 !important;

  }

  @media (max-width:767px){

      .swiper-container-2 .swiper-slide{

    width: 90%;

  }

  }

  .swiper-container-2 .swiper-slide img{

    width: 100%;

    height: auto;

    border-radius: 10px;

  }



  .swiper-container-2 .swiper-button-next, .swiper-button-prev {

    transform: scale(.6);

    font-weight: bold;

    color: white;

    text-shadow: 0 0 10px black,0 0 15px black;

  }

  .swiper-pagination-bullet{

    background-color: #ffffff;

    padding: 5px;

  }

  .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 0 6px;

  }

  .swiper-container-2 .swiper-button-next{

    right: 5px;

  }

  .swiper-container-2 .swiper-button-prev{

    left: 5px;

  }

  @media (max-width: 500px){

    .swiper-container-2 .swiper-slide{

      width: 85%;

      height: auto !important;

      box-shadow: 0 0 0;

      background-size: 100%;

      margin-top: 0 !important;

    }

  }

  /* END ALERT*/





/* Alert */











/* Game */

.ingridgame button{

  position: absolute;

  z-index: 2;

  display: none;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

  padding: 0;

  -webkit-filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));

  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));

  border-radius: 12px;

  border: 2px solid transparent;

  background-image: linear-gradient(

180deg

,#3a3a3a,#101010), linear-gradient(

90deg

, #9c6727, #fdf6ae 31.53%, #bd8d42 64.87%, #fdf6ae);

  background-origin: border-box;

  background-clip: content-box, border-box;

  color: white;

  transition: all .3s;

}

.ingridgame button span{

  display:block;

  padding:5px;

}

.headergame{

  text-align:center;

}

.headergame h1{

  font-size: clamp(25px, 4vw, 35px);

  margin: 0;

      display: inline-block;

    background: linear-gradient(

180deg

, #ffe29b 20%, #e8da9b 50%, #b38c2c 80%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}





.containmain{

  

  margin-left: auto;

  margin: 0 auto;

}

.containmain.othertabs{

  width:100%;

}

@media (max-width:767px){

  .containmain{

  margin-right:0;

  width: calc(100% - 110px);

  min-height: 600px;

  }

}



.gridgame{

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;

  width: 100%;

}



@media (max-width:1099px){

  .gridgame{

  display: grid;

  grid-template-columns:  1fr 1fr 1fr;

  width: 100%;

}

}

.gridgame.second{

  grid-template-columns: 1fr 1fr;

  

}

@media (max-width:991px){

  .gridgame.second{

  grid-template-columns: 1fr;

  

}

}

.gridgame.alone{

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

}

@media (max-width:1199px){

  .gridgame.alone{

  grid-template-columns:  1fr 1fr 1fr 1fr;

}

}

@media (max-width:991px){

  .gridgame.alone{

  grid-template-columns:  1fr 1fr 1fr;

}

}

@media (max-width:550px){

  .gridgame.alone{

  grid-template-columns:   1fr 1fr;

}

}

.gridgame.full{

  grid-template-columns: 1fr 1fr;

}

@media (max-width:991px){

  .gridgame.full{

  grid-template-columns: 1fr;

}

}

.gridgame.full .ingridgame{

  width:100%;

  max-width:600px;

  margin:0 auto;

}

.gridgame.full .ingridgame{

  padding:9px 5px;

}

.gridgame.full .ingridgame button{

  position: relative;

  transform: none;

  display: block;

  top: auto;

  left: auto;

  border: none;

  padding: 5px 0;

  background: linear-gradient(180deg, #ff3a3a, #6a1a1a);

}

.ingridgame{

  width: 100%;

  padding: 5px;

  position: relative;

}

.iningridgame{

  width: 100%;

  position:relative;

  z-index:1;

}



.gridgame.alone .iningridgame:before {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index:-1;

    border: 4px solid transparent;

    border-radius: 10px;

    background-image: linear-gradient( 

169deg

 , #2c2c2c, #141414), linear-gradient( 

155deg

 , #ff9797 -30%, #ff3f3f 22%, #5a1515 72%, #b91313 112%);

    background-origin: border-box;

    background-clip: content-box, border-box;

}

.ingridgame.second{

  grid-column-start: 1;

  grid-column-end: 3;

}

.ingridgame.third{

grid-column-start: 1;

  grid-column-end: 4;

}

.iningridgame img{

  width: 100%;

  transition: all .3s;

  cursor: pointer;

  border-radius:10px;

 

}

.iningridgame.pro img{

  transform:none !important;

  border-radius:0;

}

.ingridgame.second .iningridgame img{

  max-width: 404px;

  display:block;

  margin:0 auto;

}

@media (max-width:1099px){

  .ingridgame.second .iningridgame img{max-width: 414px;}

}

@media (max-width:767px){

  .ingridgame.second .iningridgame img{

    max-width:100%;

  }

}

.ingridgame:hover{

  position: relative;

  z-index: 10;

}

.ingridgame:hover img{

  transform: scale(1.05);



}

.ingridgame:hover button{

  display: block;

}

@media (max-width: 767px){

  .customgametab.nav-pills .nav-link {

    border-radius: .25rem;

    margin-bottom: 10px;

    box-shadow: 0 5px 7px 0 #000000;

    background: linear-gradient(to bottom, #393939, #292929);

    font-size: 15px;

    width: 100%;

}

  .gridgame{

  display: grid;

  grid-template-columns: 1fr 1fr;

  width: 100%;

}

}

.headertab{

  text-align: center;

  margin: 10px 0;

  margin-top: 15px;

}

.headertab h2{

  font-size: 30px;

  display: inline-block;

    background: linear-gradient( 

180deg, #b38c2c 20%, #e8da9b 50%, #b38c2c 80%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: bold;

}

.tabmainbox{

  display: none;

  animation: fadeEffect 1s; /* Fading effect takes 1 second */

}



/* Go from zero to full opacity */

@keyframes fadeEffect {

  from {opacity: 0;}

  to {opacity: 1;}

}

/* Game */

















/* How To Play Content */

.section02{

  margin-top: 10px;

  padding: 10px 50px;

  background: url(images/bg/13.jpg)center center;

  background-size: cover;

  position: relative;

}

.section02:before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 4px;

    background: white;

    box-shadow: 0 0 5px #f19696, 0 0 15px #eb6363, 0 0 20px #ff1919;

}

.section02:after {

  content: "";

  position: absolute;

  left: 0;

  width: 100%;

  height: 4px;

  background: white;

  box-shadow: 0 0 5px #f19696, 0 0 15px #eb6363, 0 0 20px #ff1919;

  bottom: 0;

}

.howtoplay{

  position: relative;

  width: 100%;

  max-width: 1000px;

  margin: 0 auto !important;

}

.howtoplay img{

  width: 100%;

  height: auto;

  -webkit-filter: drop-shadow(0px 0px 12px rgb(0 0 0));

  filter: drop-shadow(0px 0px 12px rgb(0 0 0));

}

.inhowtoplay{

  display: flex;

  flex-direction: column;

  flex-wrap: nowrap;

  align-content: center;

  justify-content: center;

  padding: 10px !important;

}





/* How To Play Content */



/* Type Games */

.section03{

  padding: 20px;

  background: linear-gradient(45deg, #00000061, transparent),url(images/bg/04.jpg);

  background-size: cover !important;

  padding-bottom: 40px;

}

.headergametype{

  text-align: center;

}

.headergametype h1{

  font-size: clamp(25px, 4vw, 35px);

}

.allgametype{

  width: 100%;

  max-width: 1300px;

  margin: 0 auto;

}

.inallgametype{

  padding: 0 5px;

}

.inallgametype img{

  width: 100%;

}

/* Type Games */





/* Section04 */







/*Section03*/

.section04{

    background: linear-gradient(45deg, black, transparent),url(images/bg/08.jpg);

    background-size: cover !important;

    padding: 30px 0;

    position:relative;

}

.section04:before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg,#00000000,#d8533c 30%,#c71e0b 70%,#00000000);

}

.logosec4 img{

    width: 250px;

    height: auto;

}

.colorrightsec4{

  background: rgb(25 61 110);

  background: radial-gradient(circle, rgb(0 0 0 / 42%) 0%, rgb(66 66 66 / 28%) 100%);

  padding: 0;

  padding-top: 50px;

  border-top-left-radius: 20px;

  border-bottom-left-radius: 20px;

  border-bottom-right-radius: 5px;

  border-top-right-radius: 5px;

  box-shadow:5px 5px 15px #00000045;

  display: flex;

  flex-direction: column;

  flex-wrap: nowrap;

  align-content: center;

  justify-content: center;

}



.leftsec04{

  text-align: center;

}

.leftsec03{

  display:flex;

  flex-direction: column;

  flex-wrap: nowrap;

  align-content: center;

  justify-content: center;

}

.imgleftsec04 img{

  width: 110%;

  height: auto;

  position: relative;

  z-index: 1;

}

.containsec04{

  margin-top: 15px;

  width: 100%;

  max-width: 1150px;

  margin: 0 auto;

}

.headersec4{

  margin-top:10px;

  font-size: 27px;

  font-weight: 400;

  background: linear-gradient( 

180deg

 , #e93536 20%, #ff8e7c 50%, #700c01 80%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.detailsec4{

  font-size: 20px;

  color: #d4d4d4;

  font-weight: 200;

}

.imgdetailsec4{

  white-space: nowrap;

  display: inline;

}

.imgdetailsec4 img{

  width: 120px;

  margin: 0 10px;

  margin-top: 15px;

}



@media (max-width: 991px){

  .headersec4{

  text-align: center;

  margin:15px;

}

  .-text {

    display: inline-block;

    color: #fff;

    background: #e9d761 -webkit-gradient(linear, 100% 0, 0 0, from(#e5bb58), color-stop(.5, #fff), to(#e5bb58));

    background-position: -200px top;

    background-repeat: no-repeat;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-animation-name: x-shimmer;

    animation-name: x-shimmer;

    -webkit-animation-duration: 2s;

    animation-duration: 2s;

    -webkit-animation-iteration-count: infinite;

    animation-iteration-count: infinite

  }

  .imgleftsec04 img {

    height: auto;

    opacity: 1;

    width: 100%;

    max-width: 300px;

    margin: 0 auto;

    display: block;

  }

  .colorrightsec34{

    display: none;

  }

  .colorrightsec4{

    background: #00000069;

    padding-bottom: 20px !important;

    box-shadow: none;

    border-radius: 20px;

    height: auto;

  }

  .tcentersec04{

    text-align: center;

  }

  .leftsec04{

    text-align: left;

  }

}

@media (max-width:700px){



  .headersec4{

  margin-top:10px;

  font-size: 5vw;

}

.detailsec4 {

    font-size: 3.5vw;

    word-break:break-word;

    color: #d4d4d4;

}

}

@media (max-width:670px){

  .-item-1{

    left:5%;

    width: 90px;

  }

  .imgdetailsec4 img {

    width: 20vw;

    margin: 0 10px;

    margin-top: 15px;

}

}



/*END Section03*/



/* Section04 */























/*Tab Racommed*/

.tagcontainer {

    text-align: center;

}

.tagcontainer span {

    display: inline-block;

}

.tagcontainer a{

  color:white;

  text-decoration:none;

}

.tagfooter {

    background: linear-gradient(117deg, #da573f, #aa1201);

    margin: 5px 2px;

    display: inline-block;

    padding: 2px 10px;

    border-radius: 5px;

    transition: all .3s;

}

.tagfooter:hover{

  background: linear-gradient(117deg, #dd543b, #b31806);

  text-shadow:0 0 5px white, 0 0 10px white;

}



/*Tab Racommed*/

















/*Footer*/



footer{

  background: #00000080;

  color: white;

  position:relative;

  width: 100%;

  margin: 0 auto;

  margin-top: 20px;

}

footer{

  position:relative;

}



@media (max-width: 767px){



footer{

}

}

.footercontain {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

}

.disfooterct {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));

}

.infootergrid {

    display: flex;

    word-break: break-word;

    flex-direction: column;

    flex-wrap: nowrap;

    align-content: center;

    justify-content: center;

}

.infootergrid:empty {

  display:none;

}





.fotterctn{

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

}

.footercontain img{

  display:block;

}

.infootergrid:empty {

  display:none;

}

.rightmenu{

  font-size: 30px;

}

  }

  .infootergrid{

    text-align: center;

  }

  .infootergrid img{

    margin: 0 auto;

    width: 100%;

    max-width: 250px !important;

  }

  .infootergrid h2{

    font-weight:bold;

    background-image: linear-gradient(180deg, #ff0000 0, #ff8c8c 50%, #ae1807 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

  .infootergrid ul{

    padding:none;

    margin:0;

    display: flex;

    padding:0;

    padding-left:10px;

    justify-content: center;

  }

  .infootergrid  li{

    list-style:none;

    font-size: 23px;

    padding: 8px;

    padding-bottom:4px;

  }



.trueimg img{

  display: block;

  width: 250px;

  max-width: 100%;

  margin: 0 auto;

  margin-bottom: 10px;

}

.headerbt{

  display: inline-block;

  font-size: 25px;

  background-image: linear-gradient(173deg, #ff4343 0, #ffe8a6 50%, #ae1807 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight:500;

}

.bankcontainer{

  text-align: center;

}

.bankcontainer img{

  width: 40px;

  margin: 5px;

  height: auto;

}

@media (max-width: 440px){

  .bankcontainer img{

  width: 10vw;

  margin: 5px;

  height: auto;

}

.infootergrid li {

    list-style: none;

    font-size: 5vw;

    padding: 8px;

    padding-bottom: 4px;

}



}

@media (max-width:991px){



.bankcontainer img{

  width: 40px;

  margin: 5px;

  height: auto;

}

.disfooterct {

    display: grid;

    grid-template-columns: 1fr;

    text-align: center;

}

.infootergrid h2{

  margin-top:20px;

}



}

/*Footer*/









/* Line */

.linechatfixed img{

  width: 100%;

  max-width: 150px !important;

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

}

@media (max-width: 767px){

  .linechatfixed{

    display: none;

  }

}



@media (max-height: 575px){

  .linechatfixed img{

    position:relative;

    margin-top:30px;

  }

}





/* Line */

















/* Footer Mobile */
#account-actions-mobile {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 11;
    width: 100%
}
@media (min-width:768px) {
    #account-actions-mobile {
        display: none
    }
}
#account-actions-mobile .-register-btn {
    width: 100%;
    font-size: 1.25rem;
    font-weight: 500;
    background: linear-gradient(180deg, #56ccf2, #2f80ed);
    border-radius: 15px 15px 0 0;
    text-align: center
}
#account-actions-mobile .-register-btn span {
    display: inline-block;
    color: #fff;
    background: #fff -webkit-gradient(linear, 100% 0, 0 0, from(#fff), color-stop(.5, #2f80ed), to(#fff));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@media (max-width:991.98px) {
    #account-actions-mobile .-register-btn span {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
}
@media (max-width:767.98px) {
    #account-actions-mobile .-register-btn span {
        width: 100%
    }
}
#account-actions-mobile .-outer-wrapper {
    display: flex;
    align-items: flex-end
}
#account-actions-mobile .-left-wrapper,
#account-actions-mobile .-right-wrapper {
    display: flex;
    align-items: flex-end;
    flex: 1;
    z-index: 2;
    height: 70px;
    padding-bottom: 6px;
    background: linear-gradient(182deg, #7b39ce, #22164e),url(images/bg/007.jpg)center center;
    border-top: 3px solid #dabf3c;
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
}
#account-actions-mobile .-center-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    width: 74px;
    height: 74px;
    margin: 0 8px 16px;
    padding-bottom: 8px;
    color: #fff;
    background: linear-gradient(182deg, #7b39ce, #22164e);
    border-radius: 50%;
    box-shadow: 0 0 10px hsla(0, 0%, 100%, .4);
    animation: x-jello-horizontal 3s infinite both;
}
@keyframes x-jello-horizontal {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
    
    5% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1);
    }
    
    7.5% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1);
    }
    
    10% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1);
    }
    
    15% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1);
    }
    
    20% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1);
    }
    
    25%,
    100% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
#account-actions-mobile .-center-wrapper .-selected,
#account-actions-mobile .-center-wrapper .-selecting {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center
}
#account-actions-mobile .-center-wrapper .-selected {
    transition: all .4s;
    background-size: 450px;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-position: 0 0;
    border-radius: 50%
}
.-selected img {
    width: 77px !important;
    max-width: 77px !important;
    height: auto;
    position: absolute;
}
#account-actions-mobile .-center-wrapper .-selected.-slot {
    background-position: -93px 0
}
#account-actions-mobile .-center-wrapper .-selected.-skill-game {
    background-position: -188px 0
}
#account-actions-mobile .-center-wrapper .-selected.-sport {
    background-position: -282px -2px
}
#account-actions-mobile .-center-wrapper .-selected.-fishing-game {
    background-position: -378px 0
}
#account-actions-mobile .-center-wrapper .-selected .-text {
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    text-shadow: 0 6px 5px rgba(0, 0, 0, .4);
    white-space: nowrap;
}
#account-actions-mobile .-center-wrapper .-selecting {
    display: none
}
#account-actions-mobile .-center-wrapper .-selecting .-text {
    font-size: .875rem;
    line-height: 16px;
    text-shadow: 0 6px 5px rgba(0, 0, 0, .4)
}
#account-actions-mobile .-center-wrapper .-selecting .-mark {
    position: relative;
    margin-top: 5px;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 20px
}
#account-actions-mobile .-center-wrapper:hover {
    color: #fff;
    text-decoration: none
}
#account-actions-mobile .-fake-center-bg-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 50px;
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
    overflow: hidden
}
#account-actions-mobile .-fake-center-bg-wrapper svg {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 108px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}
#account-actions-mobile .-fake-center-bg-wrapper svg path {
    fill: url(#rectangleGradient)
}
#account-actions-mobile .-left-wrapper {
    border-top-left-radius: 10px;
    border-top-right-radius: 22px
}
#account-actions-mobile .-right-wrapper {
    border-top-right-radius: 10px;
    border-top-left-radius: 22px
}
#account-actions-mobile .-sub-menu-lobby-wrapper {
    position: absolute;
    flex-direction: row;
    justify-content: center;
    visibility: hidden;
    top: -75px;
    left: 50%;
    z-index: 3;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(200px) scaleY(2.5) scaleX(.2);
    transform: translateX(-50%) translateY(200px) scaleY(2.5) scaleX(.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    transition: all .2s
}
#account-actions-mobile .-sub-menu-lobby-wrapper .nav-item .-text {
    display: inline-block;
    font-size: 10px;
    line-height: 12px;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px)
}
@media (max-width:991.98px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-casino .-nav-icon-bg {
        background-position: 3px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-casino .-nav-icon-bg {
        background-position: 0
    }
}
@media (max-width:991.98px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-slot .-nav-icon-bg {
        background-position: -73px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-slot .-nav-icon-bg {
        background-position: -75px
    }
}
@media (max-width:991.98px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-skill-game .-nav-icon-bg {
        background-position: -147px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-skill-game .-nav-icon-bg {
        top: -12px;
        background-position: -150px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-skill-game .-text {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }
}
@media (max-width:991.98px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-sport .-nav-icon-bg {
        background-position: -221px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-sport .-nav-icon-bg {
        background-position: -224px
    }
}
@media (max-width:991.98px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-fishing-game .-nav-icon-bg {
        background-position: -300px
    }
}
@media (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item.-fishing-game .-nav-icon-bg {
        background-position: -303px
    }
}
#account-actions-mobile .-sub-menu-lobby-wrapper .nav-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 66px;
    height: 66px;
    margin: 0 3px;
    padding: 0;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, #393854, #131228);
    border: 1px solid hsla(0, 0%, 100%, .6);
    border-radius: 50%;
    box-shadow: 0 0 10px hsla(0, 0%, 100%, .6)
}
#account-actions-mobile .-sub-menu-lobby-wrapper .nav-link .-nav-icon-bg {
    background-size: 360px;
    background-repeat: no-repeat;
    width: 100%;
    height: 40px;
    top: -15px;
    position: relative
}
#account-actions-mobile .-sub-menu-lobby-wrapper .nav-link:focus {
    outline: none;
    text-decoration: none
}
@media screen and (max-width:360px) {
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-item .-img {
        margin-top: -15px;
        width: 54px
    }
    
    #account-actions-mobile .-sub-menu-lobby-wrapper .nav-link {
        width: 60px;
        height: 60px;
        margin: 0 2px
    }
}
#account-actions-mobile .-item-wrapper {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    position: relative;
}
.-ic-img img {
    width: 34px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 20px;
    position: relative;
}
#account-actions-mobile .-item-wrapper .-textfooter {
    font-size: .875rem;
    color: #ffffff;
    transition: color .2s;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    margin: 0 auto;
    margin-top: .25rem;
}
@media (max-width:575.98px) {
    #account-actions-mobile .-item-wrapper .-textfooter {
        font-size: .8rem
    }
}
#account-actions-mobile .-item-wrapper:active,
#account-actions-mobile .-item-wrapper:hover {
    text-decoration: none
}
#account-actions-mobile .-item-wrapper:active .-text,
#account-actions-mobile .-item-wrapper:hover .-text {
    color: #f7d18e
}
#account-actions-mobile .-item-wrapper.-shimmer .-text {
    display: inline-block;
    color: #fff;
    background: #97a7c1 -webkit-gradient(linear, 100% 0, 0 0, from(#97a7c1), color-stop(.5, #fff), to(#97a7c1));
    background-position: -200px top;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation-name: x-shimmer;
    animation-name: x-shimmer;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: x-shimmer-shorter;
    animation-name: x-shimmer-shorter
}
@media (max-width:991.98px) {
    #account-actions-mobile .-item-wrapper.-shimmer .-text {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-duration: 2.5s;
        animation-duration: 2.5s
    }
}
#account-actions-mobile .-fully-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, .6)
}
#account-actions-mobile.-active .-fake-center-bg-wrapper,
#account-actions-mobile.-active .-left-wrapper,
#account-actions-mobile.-active .-right-wrapper {
    -webkit-filter: brightness(.5);
    filter: brightness(.5)
}
#account-actions-mobile.-active .-fake-center-bg-wrapper a,
#account-actions-mobile.-active .-left-wrapper a,
#account-actions-mobile.-active .-right-wrapper a {
    pointer-events: none
}
#account-actions-mobile.-active .-center-wrapper {
    background: linear-gradient(0deg, rgba(251, 200, 68, .85), rgba(248, 128, 18, .85))
}
#account-actions-mobile.-active .-center-wrapper .-selected {
    display: none
}
#account-actions-mobile.-active .-center-wrapper .-selecting {
    display: flex
}
#account-actions-mobile.-active .-sub-menu-lobby-wrapper {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    transform: translateX(-50%) translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}
#account-actions-mobile.-active .-fully-overlay {
    display: block
}

/* Footer Mobile */

/* POST ARCHIVE */

/*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 1fr;
}
@media (max-width:1199px) {
    .gridpost {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width:991px) {
    .gridpost {
        width: 100%;
        display: grid;
        grid-template-columns: 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;
}
.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;
}
.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: 4px 12px;
    border-radius: 10px;
    color: white;
    font-weight: 200;
}
.containpage .pages-post span {
    background: linear-gradient( 90deg, rgb(117 208 114) 0%, rgb(46 91 44) 100%);
}
.header-post {
    text-align: center;
    margin: 10px auto;
    width: 100%;
    max-width: 300px;
    padding: 10px 0;
    background: #0000007a;
    border-radius: 10px;
}
.header-post h1 {
    font-size: 25px;
    font-weight: 400;
    background: linear-gradient(180deg, #fcf9b1 20%, #fcf9ac 50%, #f3921a 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

/*END POST*/

/* AllPost */

/* POST ARCHIVE */
.fixedtopmobile {
    width: calc(100% - 200px);
    margin-left: auto;
    margin-top: 75px;
}
@media (max-width: 767px) {
    .fixedtopmobile {
        width: 100%;
        margin-top: 75px;
    }
}
.fixedtopmobile.wpadmin {
    margin-top: 107px;
}
@media (max-width:782px) {
    .fixedtopmobile.wpadmin {
        margin-top: 121px;
    }
}
.facebook-mobile {
    display: none;
    z-index: 11;
}
@media (max-width:767px) {
    .facebook-mobile {
        position: fixed;
        right: 12px;
        bottom: 73px;
        display: flex;
        flex-direction: column-reverse;
        text-align: center;
    }
}
.facebook-mobile img {
    width: 100px;
    height: auto;
    -webkit-filter: drop-shadow(0px 0px 5px rgb(0 0 0));
    filter: drop-shadow(0px 0px 5px rgb(0 0 0));
}
.facebook-mobile h2 {
    font-size: 17px;
}

/* Loading Meta */
body {
    background: #000;
}
.loadercontain {
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 11111;
    width: 100%;
    overflow: hidden;
}
.loadercontain img {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
    margin-top: -115px;
    max-width: 217px;
    height: auto;
    transform: scale(1);
    animation: logotopanimate 10s ease 0s infinite normal none;
    -webkit-filter: drop-shadow(0px 0px 2px #fe2828);
    filter: drop-shadow(0px 0px 2px #fe2828);
    z-index: 1;
}
#loadmeta {
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: visible;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    position: fixed;
    background: #000000ba;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}
@keyframes logotopanimate {
    0.0% {
        transform: scale(1);
        -webkit-filter: drop-shadow(0px 0px 2px #fe2828);
        filter: drop-shadow(0px 0px 2px #fe2828);
    }
    
    50.0% {
        transform: scale(1.3);
        -webkit-filter: drop-shadow(0px 0px 7px #fe2828);
        filter: drop-shadow(0px 0px 7px #fe2828);
    }
    
    100.0% {
        transform: scale(1);
        -webkit-filter: drop-shadow(0px 0px 2px #fe2828);
        filter: drop-shadow(0px 0px 2px #fe2828);
    }
}
#loadmeta span {
    text-align: center;
    display: block;
}
#loadmeta div {
    width: 100%;
    height: auto;
    opacity: 1;
    font-family: Helvetica, Arial, sans-serif;
    color: #ffffff;
    animation: textzoom 2s linear infinite;
    -o-animation: movetextzoom2s linear infinite;
    -moz-animation: textzoom 2s linear infinite;
    -webkit-animation: textzoom 2s linear infinite;
    text-shadow: 0 0 10px white, 0 0 20px #fb2828, 0 0 20px #fe2828, 0 0 20px #fe2828, 0 0 10px #ffffff;
    text-align: center;
}
@keyframes textzoom {
    0.0% {
        transform: scale(1);
    }
    
    50.0% {
        transform: scale(1.3);
    }
    
    100.0% {
        transform: scale(1);
    }
}
#loadmeta div:nth-child(2) {
    animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#loadmeta div:nth-child(3) {
    animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}
#loadmeta div:nth-child(4) {
    animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
#loadmeta div:nth-child(5) {
    animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
#loadmeta div:nth-child(6) {
    animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
#loadmeta div:nth-child(7) {
    animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
}
.spincontain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 10px;
    z-index: 1;
}
.boxload {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: conic-gradient(#ff3a3a, transparent, transparent, transparent, transparent);
    position: relative;
    display: grid;
    place-items: center;
    animation: loader 0.7s linear infinite;
    z-index: 1;
}
.boxload::before,
.boxload::after {
    content: '';
    position: absolute;
}
.boxload::before {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: #1e0303ab;
}
.boxload::after {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #ff3a3a;
    border-radius: 50%;
}
@keyframes loader {
    0% {
        transform: rotate(0);
        background: conic-gradient(#ff3a3a, transparent, transparent, transparent, transparent);
    }
    
    25% {
        background: conic-gradient(#ff0000, transparent, transparent, transparent);
    }
    
    50% {
        background: conic-gradient(#c91818, transparent, transparent);
    }
    
    100% {
        transform: rotate(-360deg);
        background: conic-gradient(#460000, transparent, transparent);
    }
}

/* Loading Meta */

/* ANIMATION */
.-bg-container {
    display: block;
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
}
.-bg-container img {
    height: auto;
}
.-bg-container img:nth-child(1) {
    position: absolute;
    -webkit-animation: x-bg-1 8s ease infinite;
    animation: x-bg-1 8s ease infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    width: 22%;
    left: 25%;
    top: 0%;
}
.-bg-container img:nth-child(2) {
    position: absolute;
    -webkit-animation: x-bg-2 8s ease infinite;
    animation: x-bg-2 8s ease infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    width: 252px;
    left: unset;
    right: 18%;
    top: 55%;
}
.-bg-container img:nth-child(3) {
    position: absolute;
    -webkit-animation: x-bg-3 8s ease infinite;
    animation: x-bg-3 8s ease infinite;
    width: 50%;
    left: 15%;
    top: 15%
}
.-bg-container img:nth-child(4) {
    position: absolute;
    right: 20%;
    top: 30%;
    z-index: 0;
    width: 50%;
    -webkit-animation: x-bg-3 8s ease infinite;
    animation: x-bg-3 8s ease infinite;
}
@media (max-width:1199.98px) {
    .-bg-container img:nth-child(2) {
        right: 5%
    }
}
@media (max-width:991.98px) {
    .-bg-container img:nth-child(1) {
        width: 29%;
        left: 20%
    }
    
    .-bg-container img:nth-child(2) {
        width: 151px;
        right: 3%;
        top: 62%
    }
    
    .-bg-container img:nth-child(3) {
        width: 60%;
        left: 35%;
        top: 12%
    }
    
    .-bg-container img:nth-child(4) {
        right: 24%;
        top: 15%;
        width: 500px
    }
}
@media (max-width:767.98px) {
    .-bg-container img:nth-child(1) {
        -webkit-animation: x-bg-1 8s ease infinite;
        animation: x-bg-1 8s ease infinite;
        -webkit-animation-delay: 1s;
        animation-delay: 1s
    }
    
    .-bg-container img:nth-child(2) {
        -webkit-animation: x-bg-2 8s ease infinite;
        animation: x-bg-2 8s ease infinite;
        -webkit-animation-delay: 2s;
        animation-delay: 2s
    }
    
    .-bg-container img:nth-child(3) {
        -webkit-animation: x-bg-3 8s ease infinite;
        animation: x-bg-3 8s ease infinite
    }
    
    .-bg-container img:nth-child(1) {
        top: 20%;
        left: 15%
    }
    
    .-bg-container img:nth-child(4) {
        right: 5%;
        top: 18%
    }
}
@media (max-width:575.98px) {
    .-bg-container img:nth-child(1),
    .-bg-container img:nth-child(3) {
        width: 202px;
    }
}
@-webkit-keyframes x-bg-1 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(-30px, 15px) rotate(-1deg);
        transform: translate(-30px, 15px) rotate(-1deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}
@keyframes x-bg-1 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(-30px, 15px) rotate(-1deg);
        transform: translate(-30px, 15px) rotate(-1deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}
@-webkit-keyframes x-bg-2 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(30px, -5px) rotate(-5deg);
        transform: translate(30px, -5px) rotate(-5deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}
@keyframes x-bg-2 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(30px, -5px) rotate(-5deg);
        transform: translate(30px, -5px) rotate(-5deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}
@-webkit-keyframes x-bg-3 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(-30px, -15px) rotate(-1deg);
        transform: translate(-30px, -15px) rotate(-1deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}
@keyframes x-bg-3 {
    0% {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
    
    50% {
        -webkit-transform: translate(-30px, -15px) rotate(-1deg);
        transform: translate(-30px, -15px) rotate(-1deg)
    }
    
    to {
        -webkit-transform: translate(0) rotate(0);
        transform: translate(0) rotate(0)
    }
}

/* ANIMATION */


/* ให้เนื้อหาฝั่งขวาเต็มจอในมือถือ */
@media (max-width: 767px) {
    .containmain {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* หาก container หรือ elementor ยังไม่ได้ขยายเต็มจอ */
    .elementor-2473 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* เพิ่มความมั่นใจว่าไม่ให้มีการแบ่งหน้าจอ */
    .fixedright {
        width: 100% !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}