@media screen and (max-width: 500px){
	@keyframes shake {
	0% { transform: translate(1px, 0px)}
  	10% { transform: translate(2px, 0px)}
  	20% { transform: translate(1px, 0px) }
 	30% { transform: translate(0px, 0px)}
 	40% { transform: translate(-1px, 0px) }
 	50% { transform: translate(-2px, 0px) }
 	60% { transform: translate(-1px, 0px)}
	70% { transform: translate(0px, 0px)}
	80% { transform: translate(1px, 0px)}
	90% { transform: translate(2px, 0px)}
	100% { transform: translate(1px, 0px)}
	}
	.headImg{
		background-color: #06a;
		padding-top: 1px;
	}
	#formWrap{
		width: 75%;
		margin: 20px auto 30px auto;
		background-color: #fff;
		border: solid 2px #eee0;
		padding: 30px 30px 20px 30px;
		border-radius: 10px;
		border: solid 1px #ccc;
	}
	h1{
		margin: 0px;
		margin-bottom: 10px;
		font-size: 30px;
		font-family: serif;
		font-weight: bold;
		color: #06a;
	}
	.RightCol{
		width: 100%;
		height: 70px;
	}
	.LeftCol{
		width: 100%;
		height: 70px;
	}
	.textInput{
		height: 25px;
		width: 95%;
		font-size: 20px;
		color: #333;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: solid 1px #333;
		background-color: #fff0;
	}
	.textInput:focus{
		outline: none;
	}
	.inputLabel{
		text-transform: capitalize;
		font-size: 25px;
		font-family: sans-serif;
		color: #1544ad;
	}
	.inputLabel.text{
		position: relative;
		top: -30px;
	}
	.textInput:focus + .inputLabel{
		font-size: 12px;
		top: -40px;
	}
	input[data-state="invalid"] {
		background-color: #009;
	}
	.asterisk{
		font-size: 15px;
		position: relative;
		top: 1px;
	}
	textarea{
		width: 97%;
		height: 100px;
		background-color: unset;
	}
	.btn{
		width: 200px;
		height: 40px;
		background-color: #06e;
		font-size: 18px;
		letter-spacing: 2px;
		color: #fff;
		border: solid 1px #1544ad;
		text-transform: uppercase;
		margin-top: 15px;
		border-radius: 10px;
		margin-left: 17%;
	}
	.btn:hover{
		background-color: #1544ad;
		cursor: pointer;
	}
	.btn:active{
		outline: none;
		border: solid 2px;
		font-size: 17.4px;
		border-radius: 3px;
	}
	.box1{
		background-color: #fff;
		width: 62%;
		margin: auto;
		font-family: sans-serif;
		font-size: 16px;
		border: solid 1px #ccc;
		border-radius: 10px;
		padding: 20px 20px 20px 35px;
	}
	.box1 a{
		letter-spacing: 2px;
		color: #333;
		text-decoration: none; 
	}
	.box1 a:hover{
		color: #06a;
	}
	h2{
		margin-bottom: 30px;
		text-transform: unset;
		font-size: 28px;
		font-family: serif;
		margin: 0px;
		letter-spacing: 0;
		color: #06a;
	}
	#schedule{
		color: #444;
		margin: 0;
		font-family: sans-serif;
		font-size: 14px;
	}
	td{
		padding-bottom: 10px;
	}
	.rightTd{
		padding-left: 20px;
	}
	.phone{
		width: 18px;
		position: relative;
		top: 3px;
		margin-right: 11px;
	}
	.negative{
		filter: invert(1);
	}
	.socials{
		width: 120px;
		margin: 10px auto;
	}
	.facebook{
		width: 50px;
		height: 50px;
		border-radius: 50px;
		background-image: url(../images/facebook-logo.png);
		background-size: 100%;
	}
	.facebook:hover{
		animation: shake 0.3s;
		animation-iteration-count: infinite;
	}
	.instagram{
		width: 50px;
		height: 50px;
		border-radius: 50px;
		background-image: url(../images/instagram-logo.png);
		background-size: 100%;
	}
	.instagram:hover{
		animation: shake .3s;
		animation-iteration-count: infinite;
	}
	#map{
		margin: 0 0 0 10%;
	}
}
@media screen and (min-width: 501px){
	@keyframes shake {
	0% { transform: translate(1px, 0px)}
  	10% { transform: translate(2px, 0px)}
  	20% { transform: translate(1px, 0px) }
 	30% { transform: translate(0px, 0px)}
 	40% { transform: translate(-1px, 0px) }
 	50% { transform: translate(-2px, 0px) }
 	60% { transform: translate(-1px, 0px)}
	70% { transform: translate(0px, 0px)}
	80% { transform: translate(1px, 0px)}
	90% { transform: translate(2px, 0px)}
	100% { transform: translate(1px, 0px)}
	}
	.headImg{
		width: 100%;
		padding-top: 30px;
		position: relative;
		background-image: url(../images/contact.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 80vh;
	}
	#formWrap{
		width: 45%;
		background-color: #fffffff0;
		border: solid 2px #eee0;
		padding: 30px 30px 20px 30px;
		border-radius: 10px;
		box-shadow: 5px 5px 10px 0px #3335, -5px -5px 10px #3335;
		position: absolute;
		margin-left: 44px;
	}
	h1{
		margin: 0px;
		margin-bottom: 10px;
		font-size: 30px;
		font-family: serif;
		font-weight: bold;
		color: #06a;
	}
	.RightCol{
		width: 40%;
		height: 60px;
		float: right;
	}
	.LeftCol{
		width: 60%;
		height: 60px;
	}
	.textInput{
		height: 25px;
		width: 90%;
		font-size: 16px;
		color: #333;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: solid 1px #333;
		background-color: #fff0;
	}
	.textInput:focus{
		outline: none;
	}
	.inputLabel{
		text-transform: capitalize;
		font-size: 18px;
		font-family: sans-serif;
		color: #1544ad;
	}
	.inputLabel.text{
		position: relative;
		top: -22px;
	}
	.textInput:focus + .inputLabel{
		font-size: 12px;
		top: -40px;
	}
	input[data-state="invalid"] {
		background-color: #009;
	}
	.asterisk{
		font-size: 15px;
		position: relative;
		top: 1px;
	}
	textarea{
		width: 97%;
		height: 100px;
		background-color: unset;
	}
	.btn{
		width: 200px;
		height: 40px;
		background-color: #06e;
		font-size: 18px;
		letter-spacing: 2px;
		color: #fff;
		border: solid 1px #1544ad;
		text-transform: uppercase;
		margin-top: 15px;
		border-radius: 10px;
		margin-left: 35%;
	}
	.btn:hover{
		background-color: #1544ad;
		cursor: pointer;
	}
	.btn:active{
		outline: none;
		border: solid 2px;
		font-size: 17.4px;
		border-radius: 3px;
	}
	.box1{
		position: absolute;
		top: 6%;
		right: 23%;
		width: 18%;
		font-family: sans-serif;
		font-size: 16px;
		background-color: #fdfdfe;
		box-shadow: 5px 5px 5px #3335;
		border-radius: 10px;
		padding: 20px 20px 20px 35px;
	}
	.box1 a{
		letter-spacing: 2px;
		color: #333;
		text-decoration: none; 
	}
	.box1 a:hover{
		color: #06a;
	}
	h2{
		margin-bottom: 30px;
		text-transform: unset;
		font-size: 28px;
		font-family: serif;
		margin: 0px;
		letter-spacing: 0;
		color: #06a;
	}
	#schedule{
		color: #444;
		margin: 0;
		font-family: sans-serif;
		font-size: 14px;
	}
	td{
		padding-bottom: 10px;
	}
	.rightTd{
		padding-left: 20px;
	}
	.phone{
		width: 18px;
		position: relative;
		top: 3px;
		margin-right: 11px;
	}
	.negative{
		filter: invert(1);
	}
	.socials{
		width: 120px;
		float: right;
		position: absolute;
		left: 24%;
		bottom: 4%;
	}
	.facebook{
		width: 50px;
		height: 50px;
		border-radius: 50px;
		background-image: url(../images/facebook-logo.png);
		background-size: 100%;
	}
	.facebook:hover{
		animation: shake 0.3s;
		animation-iteration-count: infinite;
	}
	.instagram{
		width: 50px;
		height: 50px;
		border-radius: 50px;
		background-image: url(../images/instagram-logo.png);
		background-size: 100%;
	}
	.instagram:hover{
		animation: shake .3s;
		animation-iteration-count: infinite;
	}
	#map{
		position: absolute;
		top: 67%;
		left: 54.7%;
	}
}