/* CSS Document */
/* CSS Document */
.navmenu {  
	margin: 0 auto;
	background: none;
	margin-left: 3%
/*	width: 500px;*/
}
.navlink { 
	display: flex;
	justify-content: center;
/*	padding : 10px 10px 10px 10px;*/
	}
.navlink > a { 
	padding:0.7em;
/*	text-decoration: none;*/
	color:black;
/*		opacity: 0.5;*/
	}
.navlink > a:hover { 
/*	transform: scale(1.2);*/
/*		opacity: 1;*/
		text-decoration: underline;
/*		font-weight: bold*/
	}	
.navlink > a:focus { 
		opacity: 1;
		text-decoration: underline;
	}
.nonact{
		opacity: 0.5;
	text-decoration: underline;
}
.act {
	opacity: 1;
	text-decoration: underline;
	font-size: calc(8px + 0.390625vw);
}
.nonact {
	text-decoration: none;
	font-size: calc(8px + 0.390625vw);
}
	h3 {
		color:black;
		padding-top: 10px;
	}
p {
	font-family: 'Kanit', sans-serif;
}
.image{
	width:38px;
	height:38px
}
.link{
	text-decoration: none;
	color:black;
}
.link:hover{
	text-decoration: none;
	color:black;
}
/*flex*/
* {
  box-sizing: border-box;
}

.flex-container {
  max-width: 90%;
  display: flex;
  flex-direction: row;
  font-size: auto;
  text-align: center;
/*  margin-top: 20px;*/
}

.flex-item {
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 15px;
  flex: 22.5%;
  
}
.flex-item > img {
 width:10%;
 height:auto;
}

.swiper{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-wrapper{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide{
	    width: 100%;
    height: 100%;
    display: flex;
}
.swiper-slide >img {
	    width: 100%;
    height: 300px;
    transition: .3s ease;
    object-fit: cover;
	   border-radius: 15px;
}
.text{
	max-width: 300px;
/*	margin-left: 3%;*/
	 text-align: justify;
		font-size: calc(8px + 0.390625vw);
/*  text-align-last: left;*/
}
span {
	font-family: 'Kanit', sans-serif;
}
.footer {
	height:auto;
   position: absolute;
/*   left: 0;*/
   margin-top:0.8vw;
/*   margin-left:10%;*/
/*   margin-right:10%;*/
   width: 100%;
   background-color: black;
   color: #fff;
   text-align: center;
	font-size: calc(8px + 0.390625vw);
}



.card {
    text-align: center;
/*    box-shadow: 0 1px 1px 0 #d4d4d5, 0 0 0 1px #d4d4d5;*/
	border: none;
    max-width: 400px;
	height: auto;
    margin: 1vw;
    padding-bottom: 1rem;
}
.card > img {
	width: 400px;
	height: 300px;
	object-fit: cover;
	border-radius: 15px
}
a, a:hover{
	text-decoration: none;
	color:black;
}
/*
.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}
*/

.con {
	max-width: 100%;
/*	background: #F80206;*/
	  display: flex;
  flex-wrap: wrap;
		justify-content: center
/*
	max-width: 100%;
  margin-right: 5%;
  margin-left: 5%;
*/

}

.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 {
/*  background: red;*/
	max-width: 400px;
  height: auto;

}
	.box > img {
/*  background: red;*/
  width: 300px;
  height: 300px;
  border-radius: 15px;
  object-fit: cover;
}

/*
@media(max-width:1261px){
.box > img {
	width: 400px;
	height: 250px;
}
}
*/
@media screen and (max-width: 831px) and (min-width: 600px){    /*ipad */
	.box {
/*  background: red;*/
	max-width: 300px;
  height: auto;

}
.box > img {
	width: 300px;
	height: 250px;;
}
		.grid {
    overflow: hidden;
    --grid__col-width: 600px;
    --grid__column-gap: 30px;
    --grid__row-gap: 30px;
  
  max-width: 100%;
  margin: 0 auto;
}
	.text{
		max-width: 600px;
	margin-left: 0%;
	 text-align: justify;
	font-size: calc(12px + 0.390625vw);	
}	
}

@media(max-width:1300px){
h3{
	padding-top: 0px;
	margin: 0px;
	font-size: calc(8px + 0.390625vw);				
}	
/*
.text{
		margin-left: 6%;
	 text-align: justify;
	font-size: calc(6px + 0.390625vw);	
}	
*/
.image{
	width:6vw;
	height:6vw;
}
	.flex-container {

    flex-direction: column;
	width:100%		
	}
.flex-container {
/*	flex-wrap:wrap;*/
  max-width: 100%;
}	
.flex-container > img {
/*  display: flex;*/
/*  flex-direction: row;*/
  padding-top: 10px;
	width: 100%;
	height: auto;
  font-size: auto;
  text-align: center;
/*	background-color: black;*/
font-family: 'Century Gothic', sans-serif;
/*border: 1px solid #f39535;	*/
}
	.swiper-slide > img {
		height: 35vh;
	}
.flex-item {
			flex-wrap:wrap;
  margin-top: 15px;
}
.footer{
	width:100%;
	height: 2vh;
/*	font-size: 2vw;*/
}	
}