/* page main subtitle styles */
#instruction {
   font-size: 30px;
   padding-left: 10%;
   padding-right: 10%;
   margin-top: 50px;
   margin-bottom: 30px;
}

/* contact information text styles */
#description {
   font-size: 18px;
   width: 80%;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   text-indent: 40px;
}

/* email link style */
.contact{
   color: rgb(0, 163, 0);
}

/* contact form styles */
#contact-form {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 50px;
   width: 70%;
}

/* input group styles */
.wrap-input {
   width: 100%;
   position: relative;
   border-bottom: 2px solid #adadad;
   margin-bottom: 37px;
}
input, textarea {
   outline: none;
   border: none;
   font-family: 'Open sans', serif;
}
input {
   display: block;
   width: 100%;
   font-size: 17px;
}
.label {
   font-size: 17px;
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   pointer-events: none;
}
.label::before {
   content: "";
   display: block;
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 2px;
   transition: all 0.5s;
   background: rgb(152, 251, 152);
}
.label::after {
   content: attr(data-placeholder);
   display: block;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0;
   line-height: 1;
   transition: all 0.4s;
}
.input {
   height: 30px;
}
textarea.input {
   width: 100%;
   min-height: 115px;
   padding-top: 13px;
   padding-bottom: 13px;
   font-size: 17px;
}
.input + .label::after {
   top: 8px;
   left: 0;
}
.input:focus + .label::after {
   top: -18px;
}
.input:focus + .label::before {
   width: 100%;
}


/* send button styles */
#submit {
   position: relative;
   display: inline-block;
   width: 100px;
   margin-top: 30px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 20px;
   padding: 10px;
   background-color: rgb(152, 251, 152);
   transition: 0.4s;
   cursor: pointer;
}
#submit:hover {
   color: white;
   background-color: #199300;
}
#submit::after {
   color:white;
   background-color: PaleGreen;
}

/* stylization of inputs with values */
.hasValue + .label::after {
   top: -18px;
}

/* email status message styles */
.mail-message {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 50px;
   width: 70%;
   font-size: 20px;
   padding: 15px;
   border-radius: 5px;
}
.mail-success {
   background-color: rgb(175, 254, 175);
   border: rgb(111, 223, 111) solid 2px;
}
.mail-error {
   background-color: rgb(255, 126, 126);
   border: rgb(208, 48, 48) solid 2px;
}
.contact-error {
	font-weight: bold;
}