/* Sticky Header Style */	
body.sticky-header header {height:85px;}
body.sticky-header header .lucky-draw-banner {@include scale(0);}
body.sticky-header header nav {position:fixed;bottom:unset;top:0;}
body.sticky-header header .banner-main {display:none;}


/* menu desktop */
header {width:100%;position:relative;overflow:visible;z-index:10;font-family:"IBM Plex Sans Thai", sans-serif;@include transition(all .5s ease);}
header .lucky-draw-banner {width:100%;}
header .lucky-draw-banner img {width:100%;height:auto;}
header nav {position:absolute;top:0;height:85px;width:100%;background:#fff;z-index:88;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow: rgb(0 0 0 / 16%) 0px 3px 15px 0px;}
header ul.desktop {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;list-style:none;padding-left:0!important;margin:0;}
header ul.desktop li {padding:30px 0;margin-top:0!important;}
header ul.desktop li:last-child {border-right:1px solid #E8E8E8;}
header ul.desktop li + li {border-left:1px solid #E8E8E8;}
header ul.desktop li a {font-size:16px;color: #000;display:inline;text-decoration:none;font-weight:600;padding:23px 20px;-webkit-transition:none;transition:none;}
header ul.desktop li a.active {border-bottom:6px solid #156082}
header .flex-btn-menu {display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto;}
header .btn-menu + .btn-menu {margin-left:10px;}
header .btn-menu:last-child {padding-right:20px;}
header .btn-menu a {font-size:16px;color: #fff !important;padding: 15px 25px;border-radius:30px;font-weight:600;}
header .btn-menu a.blue {background:#0088D5;}
header .btn-menu a.pink {background:#EA0988;}
header .btn-menu a.greeen {background:#17A2B8;}
header .btn-menu svg {margin-right:5px;}
header .btn-menu svg .a {fill:#fff;stroke:#fff;stroke-width: 0.3px;}
header .btn-menu a:hover {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}

/* menu responsive */
.header-burger {display:none;}
.burger-menu {display:block;width:35px;height:23px;position: relative;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.25s;transition: 0.25s;cursor: pointer;opacity: 1;}
.burger-menu span {display:block;position: absolute;width: 35px;height: 3px;background: #616161;border-radius: 0;opacity: 1;left: 0;right: 0;margin-left: auto;margin-right: auto;z-index: 9;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.25s ease-in-out;transition: 0.25s ease-in-out;}
.burger-menu span {background-color:#616161;}
.burger-menu span:nth-child(1) {top:0px;}
.burger-menu span:nth-child(2), .burger-menu span:nth-child(3) {top:10px;}
.burger-menu span:nth-child(4) {top:20px;}
.burger-menu:focus, .burger-menu:active, .burger-menu:visited {opacity: 1;}
.burger-menu.open span:nth-child(1) {top: 0;width: 0%;left: 0;right: 0;}
.burger-menu.open span:nth-child(2) {-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.burger-menu.open span:nth-child(3) {-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.burger-menu.open span:nth-child(4) {top: 20px;width: 0%;left: 0;right: 0;}
.menu-responsive {opacity: 1;position: fixed;top: 0;left: 0;z-index: 11;width: 100%;height: 100vh;padding-top: 100px;display:none;background: #def0ff;-webkit-transition: all 0.5s;transition: all 0.5s;}
.menu-responsive.active {opacity: 1;visibility: visible;}
.menu-responsive .content-mb {width: 100%;height: 100%;overflow: auto;text-align:center;padding-left:2%;padding-right:2%;}
.menu-responsive .content-mb ul {list-style: none;margin: 0;padding-left: 0!important;}
.menu-responsive .content-mb ul li {position: relative;padding-top:30px;margin-top:0}
.menu-responsive .content-mb ul li a {display: table;width: 100%;font-size: 25px;color: #000}
.menu-responsive .content-mb ul li a:hover {color:#0088D5;}





body{margin:0;font-family: "IBM Plex Sans Thai", sans-serif!important;@include transition(padding-top .5s ease);}
body.one-page section {padding:100px 0;}
p, ol, ul {font-size:16px;}
ul {margin-bottom:0;}
ul li {color:#474747;}
a  {text-decoration:none!important;outline: none;-webkit-transition: all 0.5s;transition: all 0.5s;}
h1 {font-size:60px!important;color: #0088D5;font-weight:600!important;margin-bottom:0!important;}
h1 span {display: block;color:#EE7E22;}
h1 span.fzsmall {font-size:40px;line-height:1.9}
h2 {font-size:40px!important;color:#474747;font-weight:600!important;margin-bottom:0!important;}
h3 {font-size: 30px!important;color:#0088D5;font-weight:600!important;margin-bottom:0!important;}
h4 {font-size:25px!important;margin-bottom:0!important;}
.bg-color {background:#F3F9FE}
.bg-white {background:#fff;}
.bg-colorful {background: url(../images/bg-main-inner.svg) no-repeat top left #F3F9FE;}
.cl-blue {color:#0088D5!important;}
.cl-gray {color:#616161!important;}
.fz25 {font-size:25px!important}

.content-1440 { width: 90%;max-width: 1440px;margin: 0 auto;}
.close-absolute {position:absolute;right:0;top:-50px}
.close-absolute a:hover {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}
.close-absolute.top-external {top:52px;}
.box-margin-50 {margin-bottom:50px;}
.box-margin-30 {margin-bottom:30px;}
.box-margin-20 {margin-bottom:20px;}
.content-pad {padding: 0 100px;}
.center {text-align:center;}
.col-width-100 {width:100%;}
.col-width-100 img {width:100%;}
.border-dotted {border-top:2px dotted #BFBFBF;margin-top:50px;padding-bottom:50px;width:80%;margin-left:auto;margin-right:auto;}
input[type=file].textbox {appearance: none;-moz-appearance: none;-webkit-appearance: none;outline: none;position: relative;padding-left: 25px;}
input[type=file].textbox::after {content: "อัพโหลดไฟล์";color: #fff;font-size: 14px;font-weight: 500;position: absolute;top: 0;bottom: 0;left: 0;z-index: 9;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;background: #156082;border-radius: 25px;padding: 12px 25px;;-webkit-transition: all 0.5s;transition: all 0.5s;}
input[type=file].textbox:hover::after {opacity: 0.9;color:#fff;-webkit-transition: all 0.5s;transition: all 0.5s;}
::placeholder {color: #9A9A9A!important;opacity: 1!important;}
::-ms-input-placeholder {color: #9A9A9A!important;}


.banner-main {width:100%;}
.banner-main img {width:100%;}
.flex-gift {margin-top:50px;display: -webkit-box;display: -ms-flexbox;display: flex;}
.flex-gift.left {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.flex-gift.left .text-gift {padding-left: 40px;} 
.flex-gift.right {-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.flex-gift.right .text-gift {padding-right: 40px;}
.flex-gift.middle {display:block;}
.flex-gift.middle .img-gift {display:block;margin:0 auto;}
.flex-gift.middle .text-gift {width:100%;margin-top:40px;}
.col-width100 {width:100%;}
.img-gift {width:50%;}
.img-gift img {width:100%;}
.text-gift {width:50%;}
.pad-top-bottom {padding:100px 0;}
.pad-top {padding-top:100px;}

.flex-join {display:-webkit-box;display:-ms-flexbox;display:flex;}
.flex-join.left {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content:space-between;}
.flex-join.left .text-howto {padding-left: 50px;} 
.flex-join.right {-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction:row-reverse;}
.flex-join.right .text-howto {padding-right: 40px;}
.flex-join.middle {display:block;}
.flex-join.middle .img-howto {display:block;margin:0 auto;}
.flex-join.middle .text-howto {width:100%;margin-top:40px;}
.flex-join + .flex-join {margin-top:50px;}
.img-howto {width:50%;}
.img-howto img {width:100%}
.text-howto {width:50%;}


.sticky-header h2 {color:#0088D5;margin-bottom:30px!important;}
.sticky-header h3 {color:#616161;margin-bottom:15px!important;}
.sticky-header h4 {font-size:18px!important;margin-bottom:8px!important;}
.sticky-header ol, .sticky-header ul {padding-left:30px!important;margin-bottom:0;}
.sticky-header ol li + li, .sticky-header ul li + li {margin-top:8px;}
.sticky-header ul + p, .sticky-header ol + p {margin-top:10px;}
.sticky-header p.red {color:#FF0000;margin-bottom:0;font-weight:500}
.sticky-header p  {color:#474747;margin-bottom:0}
.sticky-header p + p {margin-top:10px;}
.sticky-header p +  ul {margin-top:40px;}
.sticky-header p + h3, .sticky-header ul + h3, .sticky-header ol + h3 {margin-top:40px;}
.sticky-header p + h4, .sticky-header ol + h4, .sticky-header ul + h4,.sticky-header p.red + h4 {margin-top:25px}
.sticky-header a {color:#0088D5}


#intro p {font-size:18px;}


/* calendar */
.overflow-calendar {overflow: hidden;position: relative;border-radius: 25px;}
.calendar {width: 100%;padding: 15px 10px;margin-left:auto;margin-right:auto;background: #fff;border-radius: 25px;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.calendar .calendar-top {width: 100%;padding: 15px 10px;  text-align: center;}
.calendar .calendar-top .icons {border: none;font-size: 30px;transition: color .3s;background-color: transparent;}
.calendar .calendar-top #prev {float: left;}
.calendar .calendar-top #next {float: right;}
.calendar .calendar-top .icons:hover {cursor: pointer;}
.calendar .calendar-top .icons:focus {outline: none;}
.calendar .calendar-top .top {display: inline-block;}
.calendar .calendar-top .top h3 {font-size: 35px;}
.calendar .calendar-bottom {border: 1px solid var(--red);}
.calendar .calendar-bottom .days-of-week {width: 100%;color: #fff;display: -webkit-box;display: -ms-flexbox;display: flex;}
.calendar .calendar-bottom .days-of-week .col-num {width: 14.28%;padding: 5px 0;text-align: center;background: #085588;}
.calendar .calendar-bottom .days-of-week .col-num:first-child {/* background: #f16a6a; */border-radius: 10px 0 0 0;}
.calendar .calendar-bottom .days-of-week .col-num:last-child {/* background: #f1a06a; */border-radius: 0 10px 0 0;}
.calendar .calendar-bottom .days-of-week p {font-size: 20px;color:#fff;margin: 0;display: inline-block;}
.calendar .calendar-bottom .days-of-week p:last-child {border-right: none;}
.calendar .calendar-bottom .days {/* font-size: 0px; */display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.calendar .calendar-bottom .days .one-day {border: 1px solid #ebebeb;display: inline-block;width: 14.28%;min-height: 280px;margin: 0;padding: 0;position: relative;background: #F4F0FB;}
/* .calendar .calendar-bottom .days .one-day:nth-child(1), 
.calendar .calendar-bottom .days .one-day:nth-child(8),
.calendar .calendar-bottom .days .one-day:nth-child(15),
.calendar .calendar-bottom .days .one-day:nth-child(22),
.calendar .calendar-bottom .days .one-day:nth-child(29),
.calendar .calendar-bottom .days .one-day:nth-child(36) {
    color:#FF0000;
} */
/* .calendar .calendar-bottom .days .one-day:nth-child(7), 
.calendar .calendar-bottom .days .one-day:nth-child(14),
.calendar .calendar-bottom .days .one-day:nth-child(21),
.calendar .calendar-bottom .days .one-day:nth-child(28),
.calendar .calendar-bottom .days .one-day:nth-child(35) {
    color:#3333CC;
} */
.calendar .calendar-bottom .days .one-day .number {/* height: 30px; */font-size: 35px;font-weight: 400;text-align: center;}
.calendar .calendar-bottom .days .one-day p.number {margin-bottom:0;}
.calendar .calendar-bottom .days .one-day.today {background: #DEF0FA; border: 1px solid #0088D5;}
.calendar .calendar-bottom .days .one-day .branch {color: #fff;padding: 2px 10px;margin: 0 5px;text-align: center;border-radius: 25px;background: #8abce9;-webkit-transition: all 0.5s;transition: all 0.5s;}
.calendar .calendar-bottom .days .one-day .branch  + .branch {margin-top: 7px;}
.calendar .calendar-bottom .days .one-day .branch a {color: #fff;display: block;}
.calendar .calendar-bottom .days .one-day .branch:hover {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}
.calendar .calendar-bottom .days .one-day .branch.bg-transparent {background: transparent;}
ul.dot {list-style: none;padding-left:5px!important;margin: 5px 0 0 0!important}
ul.dot li {position: relative;padding-left: 15px;}
ul.dot li::before {content: "";position: absolute;top:7px;left:0;z-index:8;width:7px;height:7px;border-radius: 100%;background-color: #2CA5EA;}
ul.dot li a {color:#686868!important}
#modal-pokemon .modal-body {padding: 25px;}
#modal-pokemon h4 {color: #0088D5;margin-bottom: 20px!important;text-align: center;}




#registration .main-table {overflow-x:auto;position:relative;border-radius:25px;}
#registration table {text-align:center;margin-bottom:0;}
#registration table thead {background:#6D8DA2;color:#fff;font-size:16px;}
#registration table tbody tr {background:#fff;color:#575757;font-size:14px;}
#registration table tbody tr:nth-of-type(odd) {background:#F2F2F2;}
#registration table td {padding:13px 15px}
#registration table tr {border-style: hidden;}
#registration table tr td:first-child {border-bottom-left-radius: 25px;border-top-left-radius: 25px;}
#registration table tr td:last-child {border-bottom-right-radius: 25px;border-top-right-radius: 25px;}
#registration .step {font-size:18px;margin-top:50px;font-weight:500;margin-bottom:10px;}
#registration ul {margin-bottom:0;}
#registration ul li {color:#474747}
#registration br.show1080 {display:none;}
#registration .main-table.active::after {opacity: 0;visibility: hidden;}
#registration.active::after {opacity: 0;visibility: hidden;}
#registration .main-table::after {opacity: 0;visibility: hidden;content: "แตะ 1 ครั้ง แล้วเลื่อนดู";position: absolute;top: 0;left: 0;z-index: 8;width: 100%;height: 100%;background-image: url("../images/drag-table.svg");background-repeat: no-repeat;background-position: center 100px;background-size: 61px 75px;background-color: rgba(255, 255, 255, 0.6);font-size:25px;font-weight:500;color:#707070;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}


#registration {padding:100px 0;}
#registration p.red {font-size:18px;color:#D44B4B;}
#registration p.red a {color:#D44B4B;}
#registration p.info-text {font-size:20px;color:#000;font-weight:500;margin-bottom:20px;}
#registration .col-width-100 .info-text {margin-top:50px;}
#registration .info-member {margin-top:50px;width:60%;margin-left: auto;margin-right: auto;}
#registration form .col-width-100 + .col-width-100 {margin-top:15px;}
#registration form .col-width-50 {width:50%;}
#registration form .col-width-100 + .row {margin-top:15px;}
#registration form .row + .col-width-100 {margin-top:15px;}
#registration form .row + .row {margin-top:15px;}
#registration label, #event-pokemon label {font-size:16px;color:#000;font-weight:500;margin-bottom:5px;}
#registration label span {font-size:14px;color:#000;}
#registration label a {font-size:14px;color:#156082;}
#registration .form-check-input {position: absolute;}
#registration .text-accept {margin-left:27px;margin-bottom:0}
#registration .form-control, #registration .form-select, #event-pokemon .form-control, #event-pokemon .form-select {border:1px solid #DBDBDB;padding: 12px 20px;border-radius: 25px;}
#registration .flex-howto {display:-webkit-box;display:-ms-flexbox;display:flex;}
#registration .flex-howto .example {margin-left: auto;}
#registration .flex-howto .example a {font-size: 14px;color:#156082;font-weight:500;text-decoration: underline !important;}
#registration .remark {font-size:14px;color:#D44B4B;margin-top:5px;font-weight:500}
#registration .remark a {color:#D44B4B;}
#registration .pl-remark {padding-left:145px}
#registration .regis {width:100%;font-size:18px;background:#156082;color:#fff!important;font-weight: 500;margin-top:50px;padding:12px 0;border-radius:25px;-webkit-transition: all 0.5s;transition: all 0.5s;}
#registration .regis:hover {opacity: 0.8;color:#fff;-webkit-transition: all 0.5s;transition: all 0.5s;}
#registration .box-btn-add {margin-top: 30px;text-align: center;}
#registration .btn-add {border:none;outline:none;background:transparent;font-size:14px;color:#156082;font-weight: 600;}
#RowReceipt #inputReceipt {border-top: 1px solid #156082;margin-top: 50px;padding-top: 50px;}
#registration .btn-remove {border:none;outline:none;background:transparent;color:#D44B4B;font-size: 14px;font-weight: 600;}
#registration form, #event-pokemon form {margin-bottom:100px;}
#registration form .col-branch {width:40%;}
#registration form .col-round {width:30%;}
#registration form .col-age-group {width:20%;}
#registration form .col-search, #event-pokemon form .col-search {width:10%;}
#registration .filter-search, #event-pokemon .filter-search {margin-top: 50px;}
#registration .main-table + .box-margin-30 {margin-top: 100px;}
#registration .attach-receipt + .attach-receipt {margin-top:50px;}
.btn-form-blue {width:100%;background: #156082;color: #fff !important;font-size: 16px;font-weight: 500;text-align: center;border: none;outline: none;padding: 12px 20px;border-radius: 25px;display: inline-block;}
.btn-form-blue:hover {opacity: 0.8;outline: none;color: #fff;-webkit-transition: all 0.5s;transition: all 0.5s;}

#event-pokemon {padding: 100px 0;background: url(../images/bg-main-inner.svg) no-repeat top left #F3F9FE;}
#event-pokemon form .col-activity-type {width: 30%;}
#event-pokemon form .col-age-group {width: 25%;}

/* history */
.box-history {padding: 25px;border-radius: 25px;background: #fff;box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.box-history h2 {font-size: 25px!important;}
.history-details {margin-top:30px;display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-wrap: wrap;flex-wrap: wrap;}
.history-details .col-title:first-child {margin-top:0;}
.history-details .col-details:nth-child(2) {margin-top:0;}
.history-details + .history-details {margin-top: 25px;padding-top: 25px;border-top: 1px solid #CFCFCF;}
.col-title {width: auto;margin-top:5px;}
.col-details {width:90%;margin-top:5px;padding-left: 10px;}



/* footer */
.footer-pokemon {width: 100%;padding:100px 0;background-image: url(../images/bg-footer.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;}
.content-pokemon {width: 90%;max-width: 1600px;margin: 0 auto;}
.logo-center {text-align: center;}
.flex-footer img {max-width: 100%;height:auto;}
.between-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
.open-chat {width:595px;height:auto;max-width:100%;}
.all-social {margin-top: 25px;}
.all-social ul {margin:0;padding:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content: center;}
.all-social ul li + li { margin-top: 0;margin-left: 8px;}
p.copyright {color: #000;font-size: 15px;margin: 20px 0 0 0;text-align:center;}
p.copyright a {color: #000;}
.all-social  ul li a img {-webkit-transition: all 0.5s;transition: all 0.5s; }
.all-social  ul li a:hover img {opacity: 0.8;-webkit-transition: all 0.5s;transition: all 0.5s;}

.hide-block {display: none;margin-top:25px;}
.show-more, .show-less {margin-top: 25px;text-align:center;}
.text-more {display: inline-block; font-size: 16px;font-weight: 500;color: #000;cursor:pointer;}
.arrow-container {margin-top: 10px;animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);cursor: pointe;}
@keyframes bounce {50% {transform: translateY(-15px);}}
.check-list {margin-top:25px;}
.check-list a.btn-form-blue {width:auto;padding: 15px 25px;}
.show-few-lines{display: -webkit-box;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 8;-webkit-box-orient: vertical;}

.select2-results__option {margin-top: 0 !important;}
.select2-container--default .select2-results>.select2-results__options {padding-left:6px !important;}
.select2-dropdown {border: 1px solid #DBDBDB!important;border-radius: 25px!important}
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #DBDBDB;border-radius: 20px;}
.select2-container--default .select2-selection--single {padding: 12px 20px;height: 50px!important;border: 1px solid #DBDBDB!important;border-radius: 25px !important;}
.select2-container .select2-selection--single .select2-selection__rendered {padding-left: 0!important;padding-right: 0!important;}
.select2-container--default .select2-selection--single .select2-selection__arrow {top: 18px!important;right: 13px!important;width: 17px!important;background: url(../images/icon-select.svg);background-repeat: no-repeat;background-size: 16px 12px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {display:none;}
.select2-search--dropdown .select2-search__field {padding: 10px!important;}

.tab-headline {background:#156082;margin-top: 100px;}
.tab-headline h2 {color:#fff!important;text-align:center!important;margin-bottom:0!important;padding: 15px 0;}

@media only screen and (max-width:1600px) {
    h1 {font-size:50px!important;}
    h2 {font-size: 35px !important;}
    h3 {font-size: 30px !important;}
    header .btn-menu +.btn-menu {padding-right:10px;}
    header .btn-menu a {padding:10px 25px;font-size: 16px;}
    header nav{position:absolute;bottom:-80px;}
    header ul.desktop li a {padding: 23px 12px;}
    .open-chat {width:495px;}
}

@media only screen and (max-width:1536px) {
    body.one-page section, #registration, .pad-top-bottom, #event-pokemon {padding: 80px 0;}
    header nav {bottom:-70px;}
    .close-absolute.top-external {top: 30px;}
    .pad-top {padding-top:80px;}
    .tab-headline {margin-top:80px;}
}

@media only screen and (max-width:1440px) {
    .footer-pokemon {padding: 80px 0 200px 0;}
    h2 {font-size: 30px!important;}
    h3 {font-size: 25px!important;}
    header ul.desktop li a, header .btn-menu a {font-size: 14px;}
}

@media only screen and (max-width:1366px) {
    body.one-page section, .pad-top-bottom, #event-pokemon {padding: 60px 0;}
    .all-social ul li a img {width: 35px;height: auto;}
    h1 {font-size: 45px!important;}
    .box-margin-30 {margin-bottom: 15px;}
    .footer-pokemon {padding: 60px 0;}
    h1 span.fzsmall {font-size: 30px}
    br.none1366 {display:none;}
    #registration p.red {font-size: 16px;}
    #registration .form-control, #registration .form-select, #event-pokemon .form-control, #event-pokemon .form-select {padding:8px 20px}
    #registration .regis {padding:8px 0}
    header  ul.desktop {display:none;}
    header  .flex-btn-menu {margin-left:0;margin-right:auto;}
    header nav {padding: 0 2%;}
    header .btn-menu a {font-size: 16px;}
    header .btn-menu +.btn-menu {padding-right:0;}
    .btn-form-blue {padding: 8px 0;}
    .header-burger {display: block;}
    .close-absolute {top:-30px;}
    ::placeholder {font-size:14px!important;}
    ::-ms-input-placeholder {font-size:14px;color: #9A9A9A!important;}
    .open-chat {width:445px;}
    .tab-headline {margin-top:60px;}
    .pad-top {padding-top:60px}
}

@media only screen and (max-width:1280px) {
    #registration .info-member {width:80%;}
    header nav {bottom:-100px;}
    .col-title {width: 12%;}
    .col-details {width: 88%;}
}

@media only screen and (max-width:1180px) {
    .btn-form-blue {margin-top: 15px;}
    #registration form, #event-pokemon form {margin-bottom: 60px;}
    .col-title {width: 15%;}
    .col-details {width: 85%;}
    .calendar .calendar-bottom .days .one-day .branch a {font-size: 14px;}
    #event-pokemon form .col-activity-type {width: 40%;}
    #event-pokemon form .col-age-group {width: 30%;}
}

@media only screen and (max-width:1080px) {
    #registration br.show1080 {display:block;}
}

@media only screen and (max-width:1024px) {
    #registration .info-member {width: 100%;}
    .between-footer {display: block;}
    .col-open-chat {margin-bottom:50px;text-align: center;}
}

@media only screen and (max-width:980px) {
    .calendar { min-width: 1000px;}
    .overflow-calendar {overflow-x: auto;position: relative;border-radius: 25px;}
    .overflow-calendar::after {opacity: 0;visibility: hidden;content: "แตะ 1 ครั้ง แล้วเลื่อนดู";position: absolute;top: 0;left: 0;z-index: 8;width: 100%; height: 100%;background-image: url(../images/drag-table.svg);background-repeat: no-repeat;background-position: center 180px;background-size: 61px 75px;background-color: rgba(255, 255, 255, 0.8);font-size: 25px;font-weight: 500;color: #707070;text-align: center;margin: 0 auto; display: block;padding-top: 120px;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
    .overflow-calendar::after  {opacity: 1;visibility: visible;}
    .overflow-calendar.active {overflow: auto;}
    .overflow-calendar.active::after {opacity: 0;visibility: hidden;}
}

@media only screen and (max-width:960px) {
    .flex-gift {display:block;}
    .text-gift, .img-gift {width: 100%;}
    .img-gift {margin-bottom:30px}
    .flex-gift {margin-top: 30px;}
    .flex-gift.left .text-gift {padding-left:0}
    .flex-gift.right .text-gift {padding-right: 0;}
    .flex-join {display: block;}
    .text-howto , .img-howto {width: 100%;}
    .img-howto {margin-bottom: 30px;}
    .flex-join.left .text-howto {padding-left:0;}
    .flex-join.right .text-howto {padding-right:0;}
    .col-title {width: 18%;}
    .col-details {width: 82%;}
}

@media only screen and (max-width:820px) {
    .content-pad {padding: 0 50px;}
    #registration form .col-branch, #registration form .col-round, #registration form .col-age-group {width: 50%;margin-top: 15px;}
    #registration .main-table + .box-margin-30 {margin-top: 70px;}
    #registration form .col-search, #event-pokemon form .col-search { width:18%;}
    #event-pokemon form .col-activity-type {width: 50%;}
}

@media only screen and (max-width:768px) {
    h1 span.fzsmall {line-height: 1.5;}
    h1 {font-size: 40px !important;}
    h2 {font-size: 25px !important;}
    h3 {font-size: 22px !important;}
    #registration .main-table::after {opacity: 1;visibility: visible;}
    #registration .main-table.active {overflow: auto;}
    .box-margin-50 {margin-bottom:35px;}
    #registration .regis {margin-top:35px}
    .close-absolute a img {width:25px;}
    .col-title {margin-top: 15px;}
    .col-details {padding-left:0;margin-top: 0;}
    .history-details {display:block;}
    .col-title,.col-details  {width: 100%;}
}

@media only screen and (max-width:736px) {
    #registration label, #event-pokemon label {font-size:14px;}
    #registration .flex-howto .example {margin-bottom: 5px;}
    #registration .flex-howto .example a {font-size: 12px;}
    #registration form .col-width-50 {width:100%;}
    #registration form .col-width-50 + .col-width-50 {margin-top:15px;}
}

@media only screen and (max-width:640px) {
    #registration .flex-howto {display:block;}
    #registration .btn-remove {margin-top:20px;}
    #RowReceipt #inputReceipt {margin-top: 40px;padding-top: 40px;}
    header nav {padding: 0 3%;}
    header .btn-menu a {display: block;}
    header .flex-btn-menu {display:none;}
    .group-btn-menu {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;margin-top:50px;}
    .header-burger {margin-left: auto;}
    #event-pokemon form .col-activity-type, #event-pokemon form .col-age-group, #event-pokemon form .col-search  {width:100%;}
    #event-pokemon form .col-age-group {margin-top: 15px;}
    #event-pokemon .btn-form-blue {margin-top:30px;}
}

@media only screen and (max-width:568px) {
    ul {padding-left: 20px;}
    .box-margin-50 {margin-bottom: 35px;}
    h1 {font-size: 30px !important;}
    h1 span.fzsmall {font-size:20px;margin-top: 10px;}
    #registration .pl-remark {padding-left: 0;}
    #registration form .col-branch, #registration form .col-round, #registration form .col-age-group, #registration form .col-search{width: 100%;}
    #registration form .col-branch {margin-top: 0;}
    .btn-form-blue {margin-top: 30px;}
    #registration .filter-search, #event-pokemon .filter-search {margin-top: 0;}
    .calendar .calendar-bottom .days .one-day .number {font-size: 25px;}
    .calendar .calendar-bottom .days-of-week p {font-size:18px;}
    .calendar .calendar-bottom .days .one-day .branch a {font-size: 12px;}
    .calendar {min-width: 700px;}
    br.none-check-list {display:none;}
}

@media only screen and (max-width:480px) {
    .content-pad {padding: 0 40px;}
    #registration form .col-width-100 + .col-width-100 {margin-top: 20px;}
    #registration .regis {font-size:16px;}
    .btn-form-blue {font-size:16px;}
    .history-details {margin-top: 20px;}
    .box-history h2 {font-size: 20px!important;}
    .group-btn-menu {display:block;}
    header .btn-menu +.btn-menu {margin-top:10px;}
    header .btn-menu {width:260px;margin-left:auto!important;margin-right:auto!important;}
    .open-chat {width: 100%;}
}

@media only screen and (max-width:430px) {
    #registration .main-table::after{background-position: center 120px;}
    header .btn-menu a {font-size:14px;padding: 10px 20px;}
    header .btn-menu + .btn-menu {margin-left:5px;}
    
}

@media only screen and (max-width:414px) {
    h3 {font-size: 25px!important;}
}

@media only screen and (max-width:390px) {
    #registration .form-control, #registration .form-select, #event-pokemon .form-control, #event-pokemon .form-select {padding: 8px 15px;}
    #registration .main-table::after {font-size:22px;}
    header .btn-menu a {padding: 10px 12px;}
    .menu-responsive .content-mb ul li a {font-size:22px;}
    .menu-responsive .content-mb ul li {padding-top:25px;}
}

@media only screen and (max-width:375px) {
    input[type=file].textbox::after {padding: 12px 23px;}
    .menu-responsive .content-mb ul li a {font-size: 20px;}
}


@media only screen and (max-width:360px) {
    header .btn-menu a {font-size:12px;padding:10px 10px;}
    #registration .main-table::after {font-size: 18px;}
    .burger-menu span {width:30px;}
}