body{
background-color: #8cc43f;
}
.content{
	max-width: 80%;
}
.content2, .content2 >h3 {
	max-width: 80%;
	font-size: auto;
	color: black;
   font-family: 'Kanit', sans-serif;		
}
.content > h5, .content > h3{
	color:black;
	font-family: 'Kanit', sans-serif;
	font-size:1vw;
}
span{
	font-family: 'Century Gothic', sans-serif;	
}
.flex {
/*  border-radius: 25px;*/
margin-top:-7px;
  display: flex;
  flex-direction: row;
	max-width:50%;
  font-size: auto;
  text-align: center;
/*	background-color: orange;*/
font-family: 'Kanit', sans-serif;
/*font-size: auto;*/
/*border: 3px solid #000000;	*/
}
.flex-container {
/*  border-radius: 25px;*/
/*margin-top:-7px;*/
  display: flex;
  flex-direction: row;
	width:100%;
  font-size: auto;
  text-align: center;
ffont-family: 'Kanit', sans-serif;
/*	background-color: green;*/
/*font-size: auto;*/
/*border: 3px solid #000000;	*/
}
.test1{
	max-width: 80%;
	background:white;
	border-top-left-radius:15px;
	border-top-right-radius:15px
/*	padding: 10px*/	
}
.tony{
	max-width:50%;
/*	background-color: orange;*/
}
.tony > img{
	max-width:30%;
	width:100%
}
.test{
	border-style: solid;	
border-width: 2px 2px 2px 2px;	
}
.f1{
/*  background: url("img/tony.png");*/
  background-repeat: no-repeat;
  color:black;
  padding: 10px;
  flex: 25%;
/*border-style: solid;*/
/*border-width: 2px 0px 2px 2px;*/
  font-size: auto;
 text-align: center

}
.f1 > img{
	position:relative;
	top: 2%;
  width: 40%;
}
.f2 {
/*  margin-top:5%;*/
/*	padding:1em;*/
   color:black;
  padding: 10px;
  flex: 25%;
  text-align: center;
/*border-style: solid;	*/
/*border-width: 0px 3px 0px 0px;*/
/*  border: 3px solid #060606;*/
  font-size: auto;
/*  font-family: 'Kanit', sans-serif;*/
}
.f3 > img{
	position:relative;
	top: 10%;
/*	  display: block;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
  width: 40%;
/*  margin-top: 5%;	*/
}
.f3{
   color:black;
  padding: 10px;
  flex: 25%;
/*  border: 3px solid #060606;*/
  font-size: auto;
/*  font-family: 'Kanit', sans-serif;*/
}
.f4{
   color:black;
  padding: 10px;
  flex: 25%;
/*  border: 3px solid #060606;*/
  font-size: auto;
/*  font-family: 'Kanit', sans-serif;*/
}
p {
	padding-top: 10%;
	max-width:100%
}
p1 {
	padding-top: 0%;
}
h3, p, p1, .content > h5{
	font-size: calc(10px + 0.390625vw);
}
.footer{
	background: black;
	width:80%;
	height:25px;
	color:#fff;
	text-align: center;
	font-size: auto;
	bottom:0%;
/*	margin-top: 10%;*/
}
@media(max-width:1200px){
.tony{
	max-width:80%
}
.tony > img{
	max-width:40%;
	width:100%
}	
		  .flex-container, .tony {
    flex-direction: column;
	width:100%
  }	
.content{
	max-width: 85%;
/*	font-size: auto;*/
}
p {
	padding-top: 0%;
}
	.content2, .content2 >h3 {
	max-width: 100%;
	font-size: auto;
}
.content > h5, .content > h3{
	font-size:3vw;
	text-align: center
}	
h3, p, p1, .content > h5{
	font-size: calc(14px + 0.390625vw);
}
.footer{
	width:100%;
	height: 2vh;
	font-size: 2vw;
}
}