.animate-charcter {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg, #ffffff 0%, #ffffff 29%, #f8e1ac 67%, #f8e9bf 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #5e3814;
    animation: textclip 3s linear infinite;
    display: inline-block;
    font-size: 190px;
}



/* body {
    min-height: 100%;
}*/

.bg {
    background-image: url("https://reg1.pwa.co.th/khatin/asset/images/bg1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 110;
    position: relative;
}

.btn-kathin1{
    background-color: #5e3814;
}
.btn-kathin2{
    background:linear-gradient(-145deg,#BF953F, #FCF6BA, #B38728,  #AA771C );
}

.main-landing p {
    position: absolute;
    color: #ffb600;
    top: 18%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: calc(.1em + 4vw);
}
.main-landing .landing-subtitle {
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    font-size: calc(.1em + 2vw);
    color: white;
    font-weight: bold;
}
.main-landing .landing-subtitle2 {
    position: absolute;
    top: 35%;
    left: 50%;
    font-size : 30px;
    transform: translate(-50%,-50%);
    color: white;
    font-size: calc(.3em + 1vw);
}

.main-landing .landing-subtitle3 {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size : 30px;
    transform: translate(-50%,-50%);
    color: white;
    font-size: calc(.3em + 1vw);
}
.main-landing .landing-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: calc(.1em + 2vw);
}
.main-landing .inner {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
}


.bg-opacity{
    position: relative;
    background-color: #000;
}

.main-landing img {
    width: 100%;
    background-color: #000;
    opacity: 0.6;
    max-height: 100%;
    height: inherit !important;
}

section {
    width: 100%;
    padding: 0;
    display: table;
    margin: 0;
    max-width: none;
    background-color: #fff;
}
.group-main-menu {
    display: table-cell;
    vertical-align: middle;
}
.btn-group-main-menu {
    height: calc(20vh - 8vw);
}
.li-countdown {
    display: inline-block;
    font-size: 30px;
    list-style-type: none;
    padding: 1em;
    text-transform: uppercase;
}
.li-countdown span {
    display: block;
    font-size: 30px;
}
.text-colorkathin{
    background:linear-gradient(-145deg,#BF953F, #7e761e, #B38728,  #AA771C );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-kathin-grad{
    font-size: calc(.5em + 4vw);
    background:linear-gradient(-145deg,#BF953F, #FCF6BA, #B38728,  #AA771C );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-kathin1{
    background : #e39e42;
    font-size: 1.8vw;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mainmenu1{
    position: absolute;
    color: #ffb600;
    top: calc(65% - 15px);
    left : 23%;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: calc(.1em + 1vw);
    text-align: center;
}
.mainmenu2{
    position: absolute;
    color: #ffb600;
    top: calc(65% - 15px);
    left : 37%;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: calc(.1em + 1vw);
    text-align: center;
}
.mainmenu3{
    position: absolute;
    color: #ffb600;
    top: calc(65% - 15px);
    left : 53%;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: calc(.1em + 1vw);
    text-align: center;
}
.mainmenu4{
    position: absolute;
    color: #ffb600;
    top: calc(65% - 15px);
    left : 67%;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    font-size: calc(.1em + 1vw);
    text-align: center;
}  
footer {
	display: grid;
	place-items: center;
	position: absolute;
	width: 100%;
	height: 70px;
	background: linear-gradient(to right,#BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C );
	font-weight: bold;
    font-size: calc(.1em + 1vw);
	color: #3b2601;
	z-index: 100;
}

.section {
    position: relative;
    height:100%;
    width:100%;
}
.s2 {
    background: #fff;
    background: linear-gradient(-145deg,#ffd37a, #FCF6BA, #c4a052,  #ffe6bc );
}
.s3 {
    align-items: center;
    /*background: linear-gradient(-145deg,#ffd37a, #FCF6BA, #c4a052,  #ffe6bc );*/
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
   opacity:0;  /* make things invisible upon start */
   animation:fadeIn ease-in 1;
   animation-fill-mode:forwards;
   animation-duration:1.4s;
  }
 
.fade-in.delayed {
  animation-delay: 0.5s;
}
.fade-in.delayed2 {
  animation-delay: 0.7s;
}
.fade-in.delayed3 {
  animation-delay: 0.9s;
}

.fade-in.delayed4 {
    animation-delay: 1.1s;
  }
  .card:hover {
    transform: scale(1.1);
  }
  .card {
    transition: transform 0.5s;
  }

.menu-hover:hover{
    transform: scale(1.1);
}
.menu-hover{
    transition: transform 0.5s;
}