@import url("https://fonts.googleapis.com/css?family=Prompt:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");
@import url("https://fonts.googleapis.com/css?family=Mitr:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=thai");
@import url("https://fonts.googleapis.com/css?family=Asap:400,700|Roboto");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
@import url('https://rsms.me/inter/inter-ui.css');
@import url("https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap");
:root {
  --size: 400px;
  --word-length: 6;
  --animation-duration: 2400ms;
  --animation-timing-function: ease-in-out;
  --animation-iteration-count: infinite;
  --font-size: 10rem;
  --background: #afafaf;
  --shadow-color: #9a9a9a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background: #2D2F36;
}
::-webkit-selection {
  background: #2D2F36;
}
::-moz-selection {
  background: #2D2F36;
}
html, body{font-family: 'Kanit',sans-serif;background-color: transparent !important; height: auto; color: #333;}
html{ font-size: 100%; }
body{ 
cursor: url('../icon/point.cur'),auto;
 background: white;
  font-family: 'Inter UI', sans-serif;
  margin: 0;

}
a:link{
	cursor: url('../icon/link.cur'),auto;
	text-decoration:none;
	outline:0 !important;
}
a:visited{
	text-decoration:none;
	outline:0 !important;
}
a:hover{
	text-decoration:none;
	outline:0 !important;
}
a:active{
	text-decoration:none;
	outline:0 !important;
}
/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 1rem;
    z-index: 3;
    margin-top: -30px;
	scale: 0.8;
	}

		#wrapper:before {
			content: '';
			display: block;
		}

/* BG */
#particles-js {
	position: absolute;
	width: 100%;
    height: 100%;
	top: 79px;
	background-image: url('');
	background-repeat: repeat;
	background-size: cover;
	background-position: 50% 50%;
	z-index: 2;
	pointer-events: none;
}

	#bg {
		-moz-transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
		-webkit-backface-visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

		#bg:before, #bg:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#bg:before {
			-moz-transition: background-color 2.5s ease-in-out;
			-webkit-transition: background-color 2.5s ease-in-out;
			-ms-transition: background-color 2.5s ease-in-out;
			transition: background-color 2.5s ease-in-out;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			
			z-index: 2;
		}

		#bg:after {
			-moz-transform: scale(1.125);
			-webkit-transform: scale(1.125);
			-ms-transform: scale(1.125);
			transform: scale(1);
			-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
			-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
			-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image:  linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)),url("../images/town7bg.png");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}

		body.is-article-visible #bg:after {
			-moz-transform: scale(1.0825);
			-webkit-transform: scale(1.0825);
			-ms-transform: scale(1.0825);
			transform: scale(1.0825);
			-moz-filter: blur(0.2rem);
			-webkit-filter: blur(0.2rem);
			-ms-filter: blur(0.2rem);
			filter: blur(0.2rem);
		}

.result {
		font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 20px;
	  text-align: left;
	  color:#fff;
}
.mb-3 {
		font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 20px;
	  text-align: left;
	  color:#fff;
	
}
.text-muted {
    color: #000!important;
}

.card-title {
	font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 12px;
	  text-align: center;
}
.w-100 {
	font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 12px;
	  text-align: center;
	  background: #b1b1b1;
	  border: 1px dashed #f5f5f5;
		  
}
.ww-100 {
	font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 12px;
	  text-align: center;
	  background: #FCD891;
	  border: 1px dashed #f5f5f5;
	  max-width: 150px;margin-top:5px; color:#0E0A72;
		  
}
.w-100:hover {
	font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 12px;
	  text-align: center;
	  background: #000;
	  border: 1px dashed #f5f5f5;
}
.ww-100:hover {
	font-family: 'Prompt';
	 font-weight: 600;
	 font-size: 12px;
	  text-align: center;
	  background: #FC9191;
	  border: 1px dashed #f5f5f5;
}
/* animation text */
.icons2 {
  display: none;
}

.container2 {
scale:0.3;
    margin-left: -270px;
}
.container2 .text-container,
.container2 .shadow-container {
  position: relative;
  width: 20%;
  height: 20%;
  display: grid;
  place-items: center;
}
.container2 .text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size);
  font-family: "Bebas Neue";
  font-weight: bold;
  user-select: none;
  pointer-events: none;
  margin-left: calc(-1 * var(--margin-left));
  
}
.container2 .text .char {
  text-transform: uppercase;
  margin: 0 4px;
}
.container2 .text-container {
  z-index: 1;
}
.container2 .text-container .text .char:nth-child(1) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 1));
}
.container2 .text-container .text .char:nth-child(2) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 2));
}
.container2 .text-container .text .char:nth-child(3) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 3));
}
.container2 .text-container .text .char:nth-child(4) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 4));
}
.container2 .text-container .text .char:nth-child(5) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 5));
}
.container2 .text-container .text .char:nth-child(6) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 6));
}
.container2 .text-container .text .char:nth-child(7) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 7));
}
.container2 .text-container .text .char:nth-child(8) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 8));
}
.container2 .text-container .text .char:nth-child(9) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 9));
}
.container2 .text-container .text .char:nth-child(10) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 10));
}
.container2 .text-container .text .char:nth-child(11) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 11));
}
.container2 .text-container .text .char:nth-child(12) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 12));
}
.container2 .text-container .text .char:nth-child(13) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 13));
}
.container2 .text-container .text .char:nth-child(14) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 14));
}

.container2 .text-container .text .char:nth-child(15) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 15));
}
.container2 .text-container .text .char:nth-child(16) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 16));
}
.container2 .text-container .text .char:nth-child(17) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 17));
}
.container2 .text-container .text .char:nth-child(18) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 18));
}
.container2 .text-container .text .char:nth-child(19) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 19));
}
.container2 .shadow-container {
  margin-top: calc(-1 * (var(--size) - 8px));
  z-index: -1;
}
.container2 .shadow-container .text {
  color: var(--shadow-color);
}

@keyframes upDown {
  0%, 100% {
    opacity: 1;
    transform: translateY(20%);
  }
  50% {
    transform: translateY(-20%);
  }
}
@keyframes scaleUpdown {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4) rotate(90deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
  }
}
.support {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}
.support a {
  margin: 0 10px;
  color: #333333;
  font-size: 1.8rem;
  backface-visibility: hidden;
  transition: all 150ms ease;
}
.support a:hover {
  transform: scale3d(1.1);
}
label {
    font-family: 'Prompt';	
}
.form-control {
	    font-family: 'Prompt';
}
.page-link {
	color:#000;
}
.page-link:hover {
	color:#000;
}

.page-item.active .page-link {
	background-color: #000;
	border-color: #000;
}
#search::placeholder {
  color: red;
}
.header_logo {
	background: url(../images/townhaltext.png);
	width: 500px;
	height: 100px;
	position: relative;
	-webkit-animation: 3s heart infinite linear;
	-moz-animation:  3s heart infinite linear;
	animation: 3s heart infinite linear;
	margin-bottom:-60px;
	margin-top: 15px;
}
@-webkit-keyframes heart {
  0%, 100% {
    -webkit-transform: scale(1);opacity:0.95;
    transform: scale(1);opacity:0.95; }
  30%, 80% {
    -webkit-transform: scale(1.15);opacity:1;
    transform: scale(1.15);opacity:1; } 
  40%, 60% {
    -webkit-transform: scale(1);opacity:0.95;
    transform: scale(1);opacity:0.95; } 
  50%, 70% {
    -webkit-transform: scale(0.8);opacity:1;
    transform: scale(0.8);opacity:1; } 
}

@keyframes heart {
  0%, 100% {
    -webkit-transform: scale(1);opacity:0.95;
    transform: scale(1);opacity:0.95; }
  30%, 80% {
    -webkit-transform: scale(1.15);opacity:1;
    transform: scale(1.15);opacity:1; } 
  40%, 60% {
    -webkit-transform: scale(1);opacity:0.95;
    transform: scale(1);opacity:0.95; } 
  50%, 70% {
    -webkit-transform: scale(0.8);opacity:1;
    transform: scale(0.8);opacity:1; } 
}

.list-group {
	width: 200px;
    margin: 0 auto;
	margin-top:20px;
	margin-bottom:20px;
}
.test {
	margin-bottom:20px;
}
.text-container,
.shadow-container {
  position: relative;
  width: 20%;
  height: 20%;
  display: grid;
  place-items: center;
}
.text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size);
  font-family: "Bebas Neue";
  font-weight: bold;
  user-select: none;
  pointer-events: none;
  margin-left: calc(-1 * var(--margin-left));
  
}
.text .char {
  text-transform: uppercase;
  margin: 0 4px;
}
 .text-container {
  z-index: 1;
}
 .text-container .text .char:nth-child(1) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 1));
}
 .text-container .text .char:nth-child(2) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 2));
}
 .text-container .text .char:nth-child(3) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 3));
}
 .text-container .text .char:nth-child(4) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 4));
}
 .text-container .text .char:nth-child(5) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 5));
}
 .text-container .text .char:nth-child(6) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 6));
}
 .text-container .text .char:nth-child(7) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 7));
}
 .text-container .text .char:nth-child(8) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 8));
}
 .text-container .text .char:nth-child(9) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 9));
}
 .text-container .text .char:nth-child(10) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 10));
}
 .text-container .text .char:nth-child(11) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 11));
}
 .text-container .text .char:nth-child(12) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 12));
}
 .text-container .text .char:nth-child(13) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 13));
}
 .text-container .text .char:nth-child(14) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 14));
}

 .text-container .text .char:nth-child(15) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 15));
}
 .text-container .text .char:nth-child(16) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 16));
}
 .text-container .text .char:nth-child(17) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 17));
}
 .text-container .text .char:nth-child(18) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 18));
}
 .text-container .text .char:nth-child(19) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 19));
}
 .text-container .text .char:nth-child(20) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 20));
}
 .text-container .text .char:nth-child(21) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 21));
}
 .text-container .text .char:nth-child(22) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 22));
}
 .text-container .text .char:nth-child(23) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 23));
}
 .text-container .text .char:nth-child(24) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 24));
}
 .text-container .text .char:nth-child(25) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 25));
}
 .text-container .text .char:nth-child(26) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 26));
}
 .text-container .text .char:nth-child(27) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 27));
}
 .text-container .text .char:nth-child(28) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 28));
}
 .text-container .text .char:nth-child(29) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 29));
}
 .text-container .text .char:nth-child(30) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 30));
}
 .text-container .text .char:nth-child(31) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 31));
}
 .text-container .text .char:nth-child(32) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 32));
}
 .text-container .text .char:nth-child(33) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 33));
}
 .text-container .text .char:nth-child(34) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 34));
}
 .text-container .text .char:nth-child(35) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 35));
}
 .text-container .text .char:nth-child(36) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 36));
}
 .text-container .text .char:nth-child(37) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 37));
}
 .text-container .text .char:nth-child(38) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 38));
}
 .text-container .text .char:nth-child(39) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 39));
}
 .text-container .text .char:nth-child(40) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 40));
}
 .text-container .text .char:nth-child(41) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 41));
}
 .text-container .text .char:nth-child(42) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 42));
}
 .text-container .text .char:nth-child(43) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 43));
}
 .text-container .text .char:nth-child(44) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 44));
}
 .text-container .text .char:nth-child(45) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 45));
} .text-container .text .char:nth-child(46) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 46));
}
 .text-container .text .char:nth-child(47) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 47));
}
 .text-container .text .char:nth-child(48) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 48));
}
 .text-container .text .char:nth-child(49) {
  opacity: 0;
  animation: upDown var(--animation-duration) var(--animation-timing-function) var(--animation-iteration-count);
  animation-delay: calc(var(--delay) + (0.15s * 49));
}

 .shadow-container {
  margin-top: calc(-1 * (var(--size) - 8px));
  z-index: -1;
}
 .shadow-container .text {
  color: var(--shadow-color);
}

@keyframes upDown {
  0%, 100% {
    opacity: 1;
    transform: translateY(20%);
  }
  50% {
    transform: translateY(-20%);
  }
}
@keyframes scaleUpdown {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.4) rotate(90deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(180deg);
  }
}

.list-group-item {
    text-align: left;
}
.item-container {
display: flex;
flex-wrap: wrap;
}

.item-display {
flex: 1;
text-align: center;
margin: 5px;
}
.custom-btn {
  width: 180px;
  height: 40px;
  color: #000;
  border-radius: 5px;
  padding: 10px 25px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.modal-btn {
  width: 80px;
  height: 30px;
  color: #000;
  border-radius: 5px;
  padding: 5px 20px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.btn-modal {
  background: rgb(0,204,204);
  border: none;
  z-index: 1;
  color: #fff;
  width:auto;
}
.btn-modal:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #fff 0%, #7f00ff 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  color: #fff;
}
.btn-modal:hover {

    font-weight: 800;
	color: #fff;

}
.btn-modal:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-modal:active {
  top: 2px;
}
/* Btn-login */
.btn-login {
  background: rgb(51,51,255);
  border: none;
  z-index: 1;
  color: #fff;
}
.btn-login:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #fff 0%, #b266ff 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  color: #fff;
}
.btn-login:hover {

    font-weight: 800;
	color: #fff;

}
.btn-login:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-login:active {
  top: 2px;
}
/* 14 */
.btn-14 {
  background: rgb(255,151,0);
  border: none;
  z-index: 1;
  color: #fff;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 5px;
  background-color: #eaf818;
  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  color: #fff;
}
.btn-14:hover {

    font-weight: 800;
	color: #fff;

}
.btn-14:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-14:active {
  top: 2px;
}

.boardname {
	background: url(../images/card.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 200px;
	height: 100px;
	margin-left: 150px;
    margin-top: -20px;
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:18px;
	font-family:prompt;
	font-weight:500;
	color:#fff;
}

.boardname2 {
	background: url(../images/Username.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 200px;
	height: 100px;
	margin-left: 150px;
    margin-top: -20px;
	margin-bottom: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:18px;
	font-family:prompt;
	font-weight:500;
	 text-transform: uppercase;
	color:#fff;
}


  .responsive-table {
    width: 100%;
    margin: auto;
    font-size: 15px;
    table-layout: fixed;
  }

  .responsive-table td, .responsive-table th {
    text-align: center;
  }

  .responsive-table img {

  }
  
  
    .responsive-table2 {

    margin: auto;
    font-size: 15px;
    table-layout: fixed;
  }

  .responsive-table2 td, .responsive-table2 th {
    text-align: center;
  }

  .responsive-table2 img {

  }



.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
		}
/*Loading*/
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align:center;
	background-color:transparent;
	z-index: 999999999;
}
#status {
	font-family:'Kanit',sans-serif;
	font-size: 24px;
	width: 100%;
	min-height:150px;
	position: relative;
	left: 0%;
	top: 30%;
	background-image: url(../../images/icon/poli_body.png);
	background-repeat: no-repeat;
	background-position: center;
	margin: 0 auto;
	padding-top: 9em;
	-webkit-animation:poli_sky 1s infinite alternate ease-in-out;
	animation:poli_sky 1s infinite alternate ease-in-out;
}
@keyframes poli_sky {
	0%{transform: translate(0,30px)}
	100%{transform: translate(0,-20px)}
}
.text-loading {
	color: #fff;
    font-size: 28px;
    font-weight: 200;
    letter-spacing: 3px;
	-webkit-text-shadow: 0 0 5px #00d0ff;
	text-shadow: 0 0 5px #00d0ff;
}
.sky_poli {
    width: 100%;
	height: 0;
    position: absolute;
    z-index: 3;
}
.poli_wing1 {
	background:url(../../images/icon/poli_wing_right.png);
	width:80px;
	height:83px;
	position:absolute;
	margin-top: -3em;
	margin-left: 2em;
	z-index:99;
	transform-origin:left 30%;
	-webkit-animation:w1 0.3s alternate infinite ease-in-out;
	animation:w1 0.3s alternate infinite ease-in-out;
}
@keyframes w1{
	0%{transform: rotate(10deg)}
	100%{transform: rotate(-10deg)}
}
.poli_wing2 {
	background:url(../../images/icon/poli_wing_left.png);
	width:60px;
	height:72px;
	position:absolute;
	margin-left: -4.5em;
    margin-top: -5.5em;
	z-index:99;
	transform-origin:right 50%;
	-webkit-animation:w2 0.3s alternate infinite ease-in-out;
	animation:w2 0.3s alternate infinite ease-in-out;
}
@keyframes w2{
	0%{transform: rotate(-10deg)}
	100%{transform: rotate(10deg)}
}


/* Responsive full page*/
@media screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 1024px) and (max-height: 1024px) {
	#wrapper {
	scale:1;
	top:9em;
}
}
@media screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 1366px) and (max-height: 1366px) {
	.card{
		    scale: 1.2!important;
    margin-top: 10em!important;
		}
		.header_logo{
	   scale:1.2!important;
	   top:1em!important;
	   }
}
@media screen and (min-width: 912px) and (max-width: 912px){
	#wrapper {
    top: 10em !important;
    scale: 0.9 !important;
}
.header_logo{
scale: 1.1!important;
    top: 0.5em!important;
}
}
@media screen and (min-width: 820px) and (max-width: 820px){
	#wrapper {
    top: 0px !important;
    scale: 0.9 !important;
}
.header_logo{
scale: 1.1!important;
    top: 0.5em!important;
}
}
@media screen and (min-width: 800px) and (max-width: 800px) and (min-height: 600px) and (max-height: 600px) {
	#wrapper {
    top: -60px !important;
    scale: 0.8 !important;
}
.header_logo{
	scale:0.6 !important;
}
}
@media screen and (min-width: 768px) and (max-width: 768px){
	#wrapper {
    top: 2em !important;
}
}
@media screen and (min-width: 540px) and (max-width: 540px) {
	#wrapper {
    scale: 0.7 !important;
    top: -6em !important;
		}
		.header_logo {
			top:1em!important;
			}
		
}
@media screen and (min-width: 411px) and (max-width: 414px) {
	#wrapper {
    scale: 0.8 !important;
    top: 3em !important;
		}
		
}
@media screen and (min-width: 393px) and (max-width: 393px) {
	#wrapper {
    scale: 0.8 !important;
    top: 3em !important;
		}
		
}
@media screen and (min-width: 390px) and (max-width: 390px) {
	#wrapper {
    scale: 0.8 !important;
    top: 3em !important;
		}
}
@media screen and (min-width: 375px) and (max-width: 375px) {
	#wrapper {
	scale:0.7 !important;
     top:-2em !important;
		}
		
}
@media screen and (min-width: 375px) and (max-width: 375px) and (min-height: 700px) and (max-height: 820px)  {
		.header_logo{
    scale: 0.7!important;
		}
		.card{
margin-top: -10em !important;
    scale: 0.75 !important;
}
		}
}
@media screen and (min-width: 360px) and (max-width: 360px) {
	#wrapper {
	scale:0.7 !important;
     top:-2em !important;
		}
		
}
@media screen and (min-width: 280px) and (max-width: 280px) {
	#wrapper {
	scale:0.7 !important;
     top:-2em !important;
	 
		}
		
}

/* Responsive in box */

@media screen and (max-width: 1171px) and (max-height: 620px){
#wrapper {
        top: -130px;
    scale: 0.6;
}
}
@media screen and (max-width: 862px){
	#wrapper {
	scale: 0.65;
    top: -8em;
			}
	.header_logo{
		  scale: 1.1;
    top: -0.5em;
		}
}
@media screen and (max-width: 770px){
#wrapper {
	scale: 0.8;
    top: -5em;
			}
	.header_logo{
		   scale: 0.9;
    top: 0.1em;
		}
}
@media screen and (max-width: 965px) and (max-height: 400px) {
	#wrapper {
	scale: 0.48;
    top: -14em;
			}
}
@media screen and (max-width: 770px) and (max-height: 400px){
	#wrapper {
	scale: 0.4;
   top: -17em;
			}
}
@media screen and (max-width: 490px){
	#wrapper {
	    scale: 0.55;
    top: -11em;
			}
}
@media screen and (max-width: 366px){
	#wrapper {
	    scale: 0.8;
    top: -2em;
			}
	.header_logo{
		    scale: 0.6;
    top: -2em;
		}
}

@media screen and (max-width: 327px){
	#wrapper {
	scale: 1;
    top: 3em;
			}
	.header_logo{
		scale: 0.4;
    top: -1.2em;
		}
}
@media screen and (max-width: 310px){
	#wrapper {
	    scale: 0.8;
    top: -4em;
			}
}
@media screen and (max-width: 270px){
	#wrapper {
	    scale: 0.55;
    top: -8em;
    left: -1em;
			}
			.header_logo{
		scale: 0.3;
    top: -2.4em;
    left: -2.2em;
		}
}
@media screen and (max-width: 230px){
	#wrapper {
	      scale: 0.5;
    top: -9em;
    left: -1em;
			}
			.header_logo{
		scale: 0.3;
    top: -2.4em;
    left: -2.2em;
		}
}