textarea,
input {
  border: none;
  outline: none;
  border-radius: 0;
  text-align: center;
  background: none;
  font-size: 16px;
  color: rgba(0, 0, 0, 1);
  max-width: 90%;
  min-width: 40%;
  padding: 1rem;
  border: 2px dashed rgba(0, 0, 0, 0);
  box-sizing: border-box;
  cursor: text;
}

textarea {
  text-align: left;
  resize: none;
  width: 90%;
  min-height: 80px;
  max-height: 80%;
  border-color: rgba(255, 255, 255, 0)
}

textarea:focus {
  background-color: rgba(0, 0, 0, 0.2);
  border: 2px dashed rgba(0, 0, 0, 1);
}

textarea:focus:required:valid {
  border: 2px solid rgba(0, 0, 0, 0);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

textarea:required:valid {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input {
  border-bottom: 2px dashed rgba(0, 0, 0, 0.5);
}

input:required,
textarea:required {
  border-bottom: 2px dashed rgba(0, 0, 0, 0.5);
}

input:focus {
  border-bottom: 2px dashed rgba(0, 0, 0, 1);
  background-color: rgba(0, 0, 0, 0.2);
}

input:required:valid {
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

input:required:invalid {
  color: rgba(0, 0, 0, 0.5);
}

::-webkit-input-placeholder {

  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-moz-placeholder {
  /* Firefox 18- */
  
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-weight: 400;
}

::-moz-placeholder {
  /* Firefox 19+ */
  
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-weight: 400;
}

:-ms-input-placeholder {
    
  text-align: left;
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
  font-weight: 400;
}

.expanding {
  vertical-align: top;
}

.send-icn {
  fill: rgba(0, 0, 0, 1)
}

.send-icn:hover {
  fill: rgba(51, 51, 51, 1);
  cursor: pointer;
}

button {
  background: none;
  border: none;
  outline: none;
  /*margin: 2vmax;*/
}

button:hover small {
  opacity: 1;
}

small {
  display: block;
  opacity: 0;
}


/* lg */
@media (min-width: 1200px) {
     div#contact-form-container { 
        right: 5%;
        bottom: 90px;
        color: #000000;
        position: fixed;
        top: 100px;
    }
    
    #contact-form {
      background-color: rgba(255, 255, 255, 0.9);
      max-width: 90%;
      height: 95%;
      margin: 0 auto;
      padding: 20px;
    }   
}

/* md */
@media (min-width: 992px) and (max-width: 1199px) {

     div#contact-form-container {
        /*right: 5%;*/
        /*bottom: 90px;*/
        color: #000000;
        position: relative;
        width: 90%;
        margin: 10px;
        /*top: 100px;*/
    }
    
    #contact-form {
      background-color: rgba(255, 255, 255, 0.9);
      max-width: 90%;
      height: 95%;
      margin: 0 auto;
      padding: 20px;
    } 
    
}

/* sm */
@media (min-width: 768px) and (max-width: 991px) {

     div#contact-form-container {
        /*right: 5%;*/
        /*bottom: 90px;*/
        color: #000000;
        position: relative;
        width: 90%;
        margin: 10px;
        /*top: 100px;*/
    }
    
    #contact-form {
      background-color: rgba(255, 255, 255, 0.9);
      max-width: 90%;
      height: 95%;
      margin: 0 auto;
      padding: 20px;
    } 
}

/* xs */
@media (max-width: 767px) {
   
   
}

/* XS PORTRAIT */
@media (max-width: 640px) {
   
   
}