/* Container holding the image and the text */
.container_contact {
  position: relative;
  text-align: center;
  width: 100%;
margin-top: -1px;
/*	justify-content: center;*/
  
}
.container_contact > img {
 width: 80%; 
 object-fit: cover; 
/* padding: 10px;*/
 height: 50vh;
}
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, -50%);	
}
.centered > h3 {
 color:black;
 font-size: 2vw;
 font-weight: bold;
 width: 100%;	
}
.centered-left {
  color: #f59326;
  position: absolute;
  top: 45%;
  left: 30%;
  text-align: justify;		
  transform: translate(-50%, -50%);	
}

.flex-container {
  display: flex;
  flex-direction: row;
	width:80%;
  font-size: auto;
  text-align: center;
	background-color: black;
font-family: 'Kanit', sans-serif;
/*border: 1px solid #f39535;	*/
}
.f1{
  color:white;
  padding: 10px;
  flex: 50%;
  border: 3px solid #f39535;
  font-size: auto;
}
.f2{
   color:white;
  padding: 10px;
  flex: 50%;
  border: 3px solid #f39535;
  font-size: auto;
/*  font-family: 'Kanit', sans-serif;*/
}
.f22{
  font-family: 'Kanit', sans-serif;
}
.contact1{
justify-content: center;
/*padding-left:32%;*/
}
.line{
color:black;
}

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.header {
  
  width: 100vw;
  height: 100vh;
/*  background-color: black;*/
/*  display: flex;*/
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  letter-spacing: 2px;
}

.header-text1, .header-text2, .header-text3, .header-text4, .header-text5 {
/*  font-family: 'Lobster', cursive;*/
/*  font-size: 60px;*/
  color: wheat;
/*  margin: 40px;*/
  position: relative;
  letter-spacing: 5px;
  font-weight: bold;
}

.header-text1::before{
  content: "WE";
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 3s linear infinite;
  -webkit-animation:slide 12s linear infinite;
  overflow: hidden;
}

.header-text2::before{
  content: "WILL";
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 3s linear infinite;
  -webkit-animation:slide 12s linear infinite;
  overflow: hidden;
}

.header-text3::before{
  content: "RESPONSE";
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 3s linear infinite;
  -webkit-animation:slide 12s linear infinite;
  overflow: hidden;
}

.header-text4::before{
  content: "AS..SOON";
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 3s linear infinite;
  -webkit-animation:slide 12s linear infinite;
  overflow: hidden;
}
.header-text5::before{
  content: "AS..POSSIBLE";
  color:black;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 3s linear infinite;
  -webkit-animation:slide 12s linear infinite;
  overflow: hidden;
}

@keyframes slide {
 0%{
   width: 0%;
 }
 50%{
   width: 100%;
 }
 100%{
   width: 0%;
 }

}

.footer {
	height:auto;
/*   position: fixed;*/
   left: 0;
/*   bottom: 0;*/
   width: 80%;
   background-color: black;
   color: #fff;
   text-align: center;
	font-size: auto;
}
@media (max-width:400px) {

}
@media(max-width:1200px){
	.container_contact > img {
   object-position: right 75%;
		width: 100%;
}
.centered > h3 {
 font-size: 3.5vw;	
}	
	.header-text1, .header-text2, .header-text3, .header-text4, .header-text5 {
font-size: 3.5vw;
	}
	  .flex-container {
    flex-direction: column;
	width:100%
  }	
.footer{
	width:100%;
	height: 2vh;
	font-size: 2vw;
}		
}