﻿
#contact-form {
  max-width: 90%;
  margin: 0 auto;
}

#contact-form p{
    margin-bottom:20px;
}
#contact-form textarea,
#contact-form input {
  border: none;
  outline: none;
  border-radius: 0;
  text-align: left;
  background: none;
  font-weight: 300;
  font-family: 'Lato', sans-serif;
  font-size: 2.25em;
  color: rgba(255, 255, 255, 1);
  /*max-width: 90%;*/
  padding: 1rem;
  border: 2px dashed rgba(255, 255, 255, 0);
  box-sizing: border-box;
  cursor: text;
}



.icon-close {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    top: 3.5%;
    right: 5%;
}

.icon-close::before,
.icon-close::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 30px;
    left: 50%;
	right: 5%;
	border-radius: 3px;
	opacity: 0.8;
	background: #fff;
}



.icon-close::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.icon-close::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#contact-form textarea {
  text-align: left;
  /* overflow:hidden; */
  
  resize: none;
  width: 100%;
  border-color: rgba(255, 255, 255, 0)
}

#contact-form textarea:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px dashed rgba(255, 255, 255, 1);
}

#contact-form textarea:focus:required:valid {
  border: 2px solid rgba(255, 255, 255, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

#contact-form textarea:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

#contact-form input {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

#contact-form input:required,
#contact-form textarea:required {
  border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

#contact-form input:focus {
  border-bottom: 2px dashed rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.2);
}

#contact-form input:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

#contact-form input:required:invalid {
  color: rgba(255, 255, 255, 0.5);
}

#contact-form ::-webkit-input-placeholder {
  text-align: left;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 300;
}

#contact-form :-moz-placeholder {
  /* Firefox 18- */
  
  text-align: left;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 300;
}

#contact-form ::-moz-placeholder {
  /* Firefox 19+ */
  
  text-align: left;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 300;
}

#contact-form :-ms-input-placeholder {
  text-align: left;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  font-weight: 300;
}

#contact-form .expanding {
  vertical-align: top;
}

#contact-form .send-icn {
  fill: rgba(255, 255, 255, 1)
}

#contact-form .send-icn:hover {
  fill: rgba(0, 0, 0, 1);
  cursor: pointer;
}

#contact-form button {
  border:2px solid white;
  color:white
}
#contact-form button:hover {
  border:2px solid white;
  color:#6d6d6d
}
#contact-form button:hover small {
  opacity: 1;
}

#contact-form small {
  display: block;
  opacity: 0;
  color:white
}


