html {
  scroll-behavior: smooth;
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
#section1{
/* height: 1500px;*/
	
/*  font-size: auto;*/
}
#section2 {
/* height: 1500px;*/
	
  font-size: auto;
}
#section3 {
}
body {
  width: auto;
	height: auto;
/*	font-family: 'Kanit', sans-serif;*/
 background-image: url("img/bg.jpg");
	background-repeat : no-repeat ;
}
.logo_lante{
position: absolute;
margin-top: 10px;
z-index: 1;
}
.logo_lante > img{
  width: 100%;
  max-width: 18%;
  height: auto;
}
footer{
		font-size: calc(8px + 0.390625vw);
}
.footer{
	background: #414143;
	width:100%;
	height:auto;
	color:#fff;
	text-align: center;
	font-size: auto;	
}
.bgfooter{
 background-image: url("img/bg.jpg");	
}
.logofoot{
	max-width:100%
}
.logofoot > img{
 	max-width:15%;
  	margin-left: auto;
  	margin-right: auto;
  	padding-top: 10px;		
}

.content{
padding-left: 5%;
padding-right: 5%;	
font-size: calc(8px + 0.390625vw);
}
.lineheight{
line-height: 100%;
margin-top: 20px;
}
.th{
	font-family: 'Kanit', sans-serif;
}
h3, h2{
	color:black;
 	font-weight: bold;
	font-size: calc(10px + 0.390625vw);
}
span{
	color:black;
	font-size: calc(10px + 0.390625vw);
}


.test.black{
/*  overflow: hidden;*/
/*  position: absolute;*/
  position: fixed;
	  color: #f2f2f2;
  background-color:none;
  text-align: center;
  width: 100%;
/* height: auto;*/
/* padding: 10px;*/
/*  z-index: 999;*/
  margin-top:-4vh;
}
.test{
/*	position: relative;*/
  overflow: hidden;
  position: absolute;
/*  position: fixed;*/
	  color: #f2f2f2;
  background-color:none;
  text-align: center;
  width: 100%;
 height: auto;
  z-index: 100;
  margin-top:75vh;
  font-family: 'Kanit', sans-serif;
}
.test > a{
 font-size: calc(8px + 0.390625vw);
color: #f2f2f2;
background-color: rgba(60, 60, 60, 0.6);
text-align: center;
display: inline-block;
padding: 8px;
margin:-1.85px;
text-decoration: none;
/*  border-radius: 25px;*/
}
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.test a:hover {
  background-color: orange;
  color: black;
}

.test a.active {
  background-color: orange;
  color: white;
}
.contactus{
	max-width:100%;
	text-align:center
}
.contactuss{
	width:50%;
	margin:0 auto;
	text-align: justify;
	font-size: calc(8px + 0.390625vw);		
}
iframe{
	width:80%
}
@media (min-height: 1100px)  {
	.test.black{
  margin-top:-2vh;
}
}
@media (min-width: 200px) and (max-width: 1024px)  {
.contactuss{
	width:80%;
	margin:0 auto;
	text-align: justify
}	
.logo_lante > img{
  width: 100%;
  max-width: 20%;
  height: auto;
}
.logofoot > img{
 	max-width:20%;
  	margin-left: auto;
  	margin-right: auto;
  	padding-top: 10px;		
}	
}
@media(max-width:1200px){
.logo_lante > img{
  width: 100%;
  max-width: 30%;
  height: auto;
}
.logofoot > img{
 	max-width:30%;
  	margin-left: auto;
  	margin-right: auto;
  	padding-top: 10px;		
}
.content{
max-width:80%;
font-size: calc(12px + 0.390625vw);
}	
.footer{
	font-size: 3.5vw;
}	
h1{
 font-size:5vw;
/* color:black;*/
}
.content{
/*font-size:3.5vw;	*/
}	
span{
/*font-size:3.5vw;	*/
}
.test > a{
/*  font-size: 3vw;*/
}	
}