@font-face { font-family: 'Sawasdee'; 
        src: url('Sawasdee.ttf') format('ttf'), 
        url('Sawasdee.woff2') format('woff2'),
        url('Sawasdee.woff') format('woff'); 
} 

@font-face { font-family: 'Chewy'; 
        src: url('Chewy-Regular.ttf') format('ttf'); 
} 


html {}

body {text-align: center; font-family: Sawasdee; margin: 0px; background-color: #00E375; }

header {height: 99%; background-color: #00E375; display: flex;
		justify-content: center; align-items: center; flex-direction: column;
			font-family: Chewy;
	color: white;
	letter-spacing: 2px;
	font-size: 30px;text-shadow: 2px 2px #333;}
	
	#imageindex {
height: 180px;
width: 180px;
}

#mobile_title, #logo_image {display: none;}

#logo {font-style: italic;}

#logo_image_image2 {height: 100px; width: 100px;}

#title {display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;font-size: 30;
text-transform: uppercase;
letter-spacing: .2em; margin-top: 10px;}	

#about {background-color: white; padding-bottom: 35px;}

#abouttitle, #deantitle, #contacttitle {font-size: 18; letter-spacing: 4px; font-family: chewy; color: white;}

#subheadinga {font-size: 18; letter-spacing: 12px; font-family: chewy; color: #48D18F; padding: 12px 0px; text-shadow: 2px 2px #333;}

#subheadingb {font-size: 18; letter-spacing: 8px; font-family: chewy; color: white; padding-top: 4px; text-shadow: 2px 2px #333;}

#abouttitle {padding-top: 5px;}

#abouttitle2 {font-weight: bold; font-size: 18px;}

#about2 {display: flex;
flex-direction: row; align-items: center;}

		#box_imageMD2 {
			width: 750px;
			height: 560px;
			background-image: url("sing2.jpg");
			background-size: cover;
			background-position: center center;
			border-radius: 4px;
			}
			
#abouttext {width: 45%; margin: 0px auto; padding: 5px;}

#aboutimg {width: 45%; margin: 0px auto; padding: 5px; display: flex; justify-content: center;}

#dean {background-color: #00E375; padding-bottom: 35px;}

#dean2 {
display: flex;
flex-direction: row;  align-items: center;}

		#box_imageMD {
			width: 540px;
			height: 630px;
			background-image: url("18.jpg");background-size: cover;
			background-position: center center;
			border-radius: 4px;}

#deantext {width: 45%; margin: 0px auto; padding: 5px;}

#deanimg {width: 45%; margin: 0px auto; padding: 5px; display: flex; justify-content: center;}

#dean3 {background-color: white; padding-bottom: 15px;}

#contact {background-color: white;margin: 0px auto; padding: 5px 0px 15px 0px;}

footer {background-color: #00E375;}


		#box_imageMD3 {
			width: 630px;
			height: 630px;
			background-image: url("11C.jpg");background-size: cover;
			background-position: center center;
			border-radius: 4px;}
			
				#box_imageMD4 {
			width: 540px;
			height: 630px;
			background-image: url("unnamed.jpg");background-size: cover;
			background-position: center center;
			border-radius: 4px;}




form {
margin: 0px auto; width: 99%; font-family: Sawasdee; 
}	

	input {
	min-width: 330px;
	max-width: 330px;
	margin: 2px;border-radius: 5px;font-size: 14px;  font-family: Sawasdee; 
	}

	input:focus {
	min-width: 330px;
	max-width: 330px;
	}

	textarea {
	min-width: 330px;
	max-width: 330px;
	height: 230px;margin: 2px; border-radius: 5px;font-size: 14px;  font-family: Sawasdee; 
	}

	textarea:focus {
	min-width: 330px;
	max-width: 330px;
	}

#ContactSent {
    min-height: 200px;
    padding: 20px;
    display:flex;
    align-items: center;
    justify-content: center;
    
}

#ContentSentText{
    
    padding-bottom: 50px;
    font-size: 18px;
}


a {text-decoration: none; font-style: italic; color: inherit}

a:hover {font-style: normal;}

@media all and (max-width: 1500px) {
#title {	align-items: center;font-size: 20;
letter-spacing: .2em;}	

header {height: 99%;}
}

@media all and (max-width: 960px) {


#title {display: none}
		
#mobile_title, #logo_image {display: block;}

#mobile_title {height: 50px;}

#logo_image_image {height: 100px; width: 100px;}

#about2, #dean2 {flex-direction: column;}

#aboutimg, #deanimg {order: 1; width: 90%;}
#abouttext, #deantext {order: 2; width: 90%;}

#box_imageMD2 {width: 520px;height: 360px;}

#box_imageMD, #box_imageMD4 {width: 360px;height: 420px;}

#box_imageMD3 {width: 390px;height: 390px;}

}

@media all and (max-width: 600px) {

form {
margin: 0px auto; width: 99%; font-family: Sawasdee; 
}	

	input {
	min-width: 230px;
	max-width: 230px;
	margin: 2px;border-radius: 5px;font-size: 14px;  font-family: Sawasdee; 
	}

	input:focus {
	min-width: 230px;
	max-width: 230px;
	}

	textarea {
	min-width: 230px;
	max-width: 230px;
	height: 230px;margin: 2px; border-radius: 5px;font-size: 14px;  font-family: Sawasdee; 
	}

	textarea:focus {
	min-width: 230px;
	max-width: 230px;
	}

#box_imageMD2 {width: 360px;height: 250px;}

}




@media all and (max-width: 420px) {


header {height: 99%;}

#mobile_title {height: 90px;}

}