body{
	font-family: 'Kanit', sans-serif;
}
.main{
	background: #282262;
	padding: 15px;
}
.main img {
	width:100%;
	max-width: 250px;
	height:100%;
	max-height: 250px;
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: rgba(142, 136, 255, .4);	
  z-index: 999;	
}
.slider_css ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider_css ul li {
  background-size: cover;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  position: absolute;	
  z-index: 999;
  margin:auto;
  animation-iteration-count: infinite;
  animation-duration: 40s;
}

.slider_css ul li:nth-child(1) {
/*  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal1.jpg");*/
  animation-name: slider-zoomin;
  animation-delay: -3s;
	
}
.slider_css ul li:nth-child(2) {
/*  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal2.jpg");*/
  animation-name: slider-zoomin;
  opacity: 0;
  animation-delay: 5s;
}
.slider_css ul li:nth-child(3) {
/*  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal3.jpg");*/
  animation-name: slider-zoomin;
  opacity: 0;
  animation-delay: 13s;
}
.slider_css ul li:nth-child(4) {
/*  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal4.jpg");*/
  animation-name: slider-zoomin;
  opacity: 0;
  animation-delay: 21s;
}
.slider_css ul li:nth-child(5) {
/*  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal5.jpg");*/
  animation-name: slider-zoomin;
  opacity: 0;
  animation-delay: 29s;
}
.slider_css ul li img {
  object-fit: cover;
  width: 100%;
/*  max-width: 1000px;*/
  height: 100%;
/*  background-size: cover;*/
  background-repeat: no-repeat;
  background-position: 50% 50%;
/*	position: absolute;	*/
z-index:999;
/*  top: 0;*/
/*  left: 0%;*/
	margin:auto;
  animation-iteration-count: infinite;
  animation-duration: 40s;	
/*	background: linear-gradient(90deg, rgba(40,34,98,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);*/
}
  .content p{
    width: 100%;
    height: 100%;
	padding: 190px 0;
	text-align: center;
  }

  p {
  font-size: calc(55px + 0.390625vw);  
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(142, 136, 255, .4);
  color:#8bc43f;
	  -webkit-text-stroke: 1.5px white;
  }
.content > span{
	font-size: calc(35px + 0.390625vw); 
	width:100%;
/*  	position: absolute;*/
  	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#f49328;
	-webkit-text-stroke: 1.5px white;
}
.contents{
 height: auto;
  background: linear-gradient(rgba(255, 190, 83, .8), rgba(255, 190, 83, .8)), url("img/tour/te_5.jpg");
}
.contents h1{
	color : #282262;
}

/* CSS Document */


.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center
}

	.grid {
    overflow: hidden;
    --grid__col-width: 400px;
    --grid__column-gap: 30px;
    --grid__row-gap: 30px;
  
  max-width: 100%;
  margin: 0 auto;
}

.grid__outer-grid {
    display: grid;
    margin: 0 calc(var(--grid__column-gap) * -1);
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    --grid__column-gap-double: calc(var(--grid__column-gap) * 2);
    --grid__column-gap-half: calc(var(--grid__column-gap) / 2);
    --grid__row-gap-half: calc(var(--grid__row-gap) / 2);
    --grid__inner-grid: repeat(auto-fit, minmax(min(var(--grid__col-width), calc(100% - var(--grid__column-gap-double))), var(--grid__col-width)));
    grid-template-columns: minmax(0, 1fr) [grid-start] var(--grid__inner-grid) [grid-end] minmax(0, 1fr);
}

.grid__inner-grid {
    display: grid;
    
    grid-column-start: grid-start;
    grid-column-end: grid-end;
    
    column-gap: var(--grid__column-gap);
    row-gap: var(--grid__row-gap);
    
    grid-template-columns: var(--grid__inner-grid);
}

.box {
	margin-top: 7%; 
	max-width: 400px;
  	height: auto;
	background-color: #282262;
	color: white;
	border-radius: 15px
}
	.box > img {
	padding: 10px;	
/*  background: red;*/
  	width: 400px;
  	height: 300px;
  	border-radius: 15px
}

.text{
	padding: 10px;	
	max-width: 400px;
/*	margin-left: 3%;*/
	 text-align: justify;
		font-size: calc(8px + 0.390625vw);
/*  text-align-last: left;*/
}
span {
	font-family: 'Kanit', sans-serif;
}

@media only screen and (max-width: 768px) {
  .slider_css {
    height: 400px;
  }
  .slider_css ul li {
    background-size: contain;
    background-repeat: no-repeat;
  }
  .main img {
	width:100%;
	max-width: 150px;
	height:100%;
	max-height: 150px;
}
	.overlay-text {
  font-size: 1.5em;  
}
	  p {
  font-size: calc(20px + 0.390625vw);  
 -webkit-text-stroke: 1px white;   
  }
	span{
	font-size: calc(14px + 0.390625vw); 
	-webkit-text-stroke: 1px white;
}
.box {
	margin-top: 3%; 
	max-width: 100%;
/*  	height: auto;*/
/*	background-color: #282262;*/
/*	color: white;*/
	border-radius: 0px;
}
	.box > img {
/*	padding: 0px;	*/
/*  background: red;*/
		max-width: 98%;
/*  	width: 400px;*/
  	height: auto;
/*  	border-radius: 15px*/
}	

}

@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}