div#mail div.form_area{
  padding: 0.5em;
}
div#mail div.link, div#mail div.rechts{
  width: 48.75%;
}
div#mail form input, div#mail form textarea{
  display: block;
  /*line-height: 1.4;
  font-weight: normal;*/
  box-sizing: border-box;
  text-overflow: ellipsis;
  color: #000;
  background-color: #eee;
  padding: 1.25em;
  margin: 1.2em auto;
  resize: none;
  width: 100%;
  outline: 0;
  border: none;
  /*border-top: none;
  border-right: none;
  border-left: solid 0.3em #000 ;
  border-bottom: solid 0.3em #000;*/
}
div#mail form input:focus, div#mail form textarea:focus{
  border-bottom: solid 0.2em #add8e6;
}
div#mail textarea::-webkit-scrollbar{
  width: 0.3em;
}
div#mail textarea::-webkit-scrollbar-track{

}
div#mail textarea::-webkit-scrollbar-thumb{
  background-color: #000;
}
div#mail textarea::-webkit-resizer{
  /* bil?*/
}
div#mail form textarea{
  height: 18em;
  text-overflow: inherit;
  resize: vertical;
  transition: none;
}
div#senden_area{
  text-align: right;
  margin: 0.5em 0;
}
button.submit{
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  border: 0;
  padding: 0.5em;
  text-align: center;
  background-color: transparent;
  cursor: pointer;
}
button.submit:hover{
  background-color: #000;
}
button.submit i{
  font-size: 2em;
}
button.submit:hover i{
  color: #fff;
}
p#mail_leer{
  color: #cc0000;
}
p#mail_gesendet{
  color: #00cc00;
}

@media screen and (max-width: 420px){
  div#mail div.links, div#mail div.rechts{
    float: none;
    width: 100%;
  }
}



              /* Neues */

div#mail{
  position: relative;
  overflow: hidden;
}
div#mail button{
  overflow: hidden;
}
div#mail div#ant div.vertical_align{
  height: 35em;
}

/*button*/
i#load_ico{
  display: none;
  position: absolute;
}
i#send_ico{
  transition: left 0.2s ease-in-out;
  left: 0;
}
div#mail button:hover i#send_ico{
  position: relative;
  animation: leave_left 1s 0.3s ease-in-out;
}
@keyframes leave_left {
  15%{left: -0.2em;}
  70%{left: 5em;}
  71%{left: -5em;}
  100%{left: 0em;}
}
button i.ico_show{
  display: inline-block!important;
}
button i#load_ico{
  animation: load_spin 1.2s cubic-bezier(0.95, 0.21, 0.65, 0.9) infinite;
}
@keyframes load_spin {
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}


div#mail div.ant{
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 5;
  opacity: 0;
  transition: all 0.3s 1s ease-in-out;
  text-align: center;
}
div#mail div.ant p#status{
  color: #000;
}

div.error_alert p#error_alert{
  color: #cc0000;
}

div#mail div.display{
  opacity: 1;
}
form#my_form{
  position: relative;
  z-index: 10;
  transition: all 0.01s 0.8s ease-in-out;
  opacity: 1;
}
form#my_form.senden{
  animation: senden 0.8s 0.5s ease-in;
  opacity: 0;
}
@keyframes senden {
  0%{top: 0;}
  25%{top: 1em;}
  100%{top: -38em;}
}