@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{ 
 background: white;
  font-family: 'Inter UI', sans-serif;
  margin: 0;

}
/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
		width: 100%;
		padding: 4rem 2rem;
		z-index: 3;
	}

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

		@media screen and (max-width: 1680px) {

			#wrapper {
				padding: 3rem 2rem;
			}

		}

		@media screen and (max-width: 736px) {

			#wrapper {
				padding: 2rem 1rem;
			}

		}

		@media screen and (max-width: 480px) {

			#wrapper {
				padding: 1rem;
			}

		}
/* BG */
#particles-js {
	position: absolute;
	width: 100%;
	height: 150%;
	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: 100vh;
		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), rgba(19, 21, 25, 0.4)),url("../images/bg.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 {
	opacity: 0.95;
}
.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/logo.png);
	width: 379px;
	height: 158px;
	position: absolute;
	z-index: 99;
    top: 20em;
    left: 3em;
	-webkit-animation: 3s heart infinite linear;
	-moz-animation:  3s heart infinite linear;
	animation: 3s heart infinite linear;
}
@-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;
}

@media (max-device-width: 1200px) {
.testsize{
	margin-left:100px;
}
}
@media (max-device-width: 975px) {
.testsize{
	margin-left:150px;
}
.testsize2{
    margin-left: 40px;
    margin-top: 80px;
    scale: 0.8;
}
}
@media (max-device-width: 760px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 100px;
    margin-top: 40px;
}
.testsize2{
    margin-left: 40px;
    margin-top: 80px;
    scale: 0.7;
}
}
@media (max-device-width: 540px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 150px;
    margin-top: 40px;
}
.testsize2{
    margin-left: 10px;
    margin-top: 80px;
    scale: 0.7;
}
}
@media (max-device-width: 420px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 200px;
    margin-top: 40px;
}
.testsize2{
    margin-left: 40px;
    margin-top: 80px;
    scale: 0.6;
}
}
@media (max-device-width: 390px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 230px;
    margin-top: 40px;
}
.testsize2{
    margin-left: 0px;
    margin-top: 80px;
    scale: 0.5;
}
}
@media (max-device-width: 375px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 250px;
    margin-top: 40px;
}
}

@media (max-device-width: 360px) {
.testsize{
	    margin-bottom: 20px;
    margin-left: 250px;
    margin-top: 40px;
}
}
@media (max-device-width: 359px) {
.testsize2{
	   display:none;
}
}