
	 
.form-wrap-inner{
	
	display: flex;
	justify-content: center;
	text-align: center;
	 
	width: 400px;
	height: 500px;
    max-width: 85vw;
	}
	

#contact-form{
	width: 400px;
	height: 500px;
	}
		
.expand {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 5px; 
  max-height: 26px;
  animation: popIn 1s both;
} 

.success{
  background: #04c986;
  border: 1px solid #157c59;
  color: #157051;

  }
  
.error{
	background: #c90410;
	border: 1px solid #7c1414;
	color: #701515; 
  }

 .pop-in {
	animation: popIn 1s both;
  }

@keyframes popIn {
  0% { transform: scale(0);}
  60% { opacity: 1; transform: scale(1.05)}
  80% { transform: scale(0.95);}
  100% {opacity: 1; transform: scale(1)} 
  }


input[type=text], input[type=password]{
  background: var(--color01);
  border: 0;
  border: 1px solid var(--color03);
  /* color: var(--color03); */
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
  outline: none;
  padding: 10px 15px;
  width: 100%;
  font-family:  Arial;
  /* width: 500px; */
  border-radius: 4px; 
}

textarea {
  /* color: var(--color03); */
  background: var(--color01);
  border: 0px;
  border: 1px solid var(--color03);
  border-radius: 4px; 
  margin-bottom: 3px;
  outline: none;
  padding: 10px 15px;
  width: 100%;
  margin-bottom: 5px;
  min-height: 150px;
  font-family: Arial;
  font-size: 16px; 
  resize: none;
  }
  
  
#email{
  background: var(--color01);
  color: var(--color01);
  outline: none;
  border: var(--white);
  /* display: none; */
}

form > label{
  display: none;
}

.submit{

  background-color:  var(--color04);
  color: var(--color01);
  float: right;
  font-size: 16px;
  margin: 5px 0 0 0;
  outline: 0;
  padding: 5px 30px;
  border: 1px solid var(--color04);
  cursor: pointer;
  transition: all 0.5s;
  /* font-weight: lighter; */
  

	 letter-spacing: 1px;  
  
  
  }

.submit:hover {
  /* background-color:  var(--color04); */
  background: transparent;
  color:   var(--color04);
  border: 2px solid   var(--color04);
  }




		
		
	
  
  
		
		  
	

