/*reset*/
input[type="button"], 
input[type="submit"], 
input[type="reset"] {
    -webkit-appearance: none;
}
::placeholder {
    color: rgba(var(--blackFull_tr),1);
    opacity: 1;
  }
form *{
    font-family: 'Ubuntu';
}
.animationForm{
    background: rgba(var(--whiteFull_tr),1);
    position: relative;
    margin: 30px auto;
    width: 100%;
    z-index: 2;
    padding: 50px;
    box-sizing: border-box;
    box-shadow: 0 0 0 10px rgba(var(--whiteFull_tr),.4);
}

/*.animationForm::before,*/
/*.animationForm::after{
    content: '\f674';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;

    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    font-size: 3000%;
    transform: translate(-50%,-50%);
    color: rgba(var(--blackFull_tr),.04);
}
/*.animationForm::after{
    left: auto;
    right: 0%;
    transform: translate(-50%,-50%);
}*/

.animationForm .animationInput{
    height: 60px;
    text-align: left;
    position: relative;
    width: 100%;  
    overflow: hidden;
    margin-bottom: 10px;
}
.animationForm .animationMessage{
    height: calc(100% - 10px);
}

.animationForm .animationInput input,
.animationForm .animationInput textarea{
    max-width: auto;
    width: 100%;
    height: 100%;
    color: rgba(var(--blackFull_tr),.5);
    padding-top: 20px;
    border: none;
    outline: none;
    font-size: 1em;
    background: transparent;
}
.animationForm .animationInput textarea{
    height: 195px;
}
.animationForm .animationInput label{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-bottom: rgba(var(--blackFull_tr),.2) 1px solid;
}


.animationForm .animationInput label::after{
    content: "";
    position: absolute;
    bottom: -1px;   
    left: 0;
    height: 100%;
    width: 100%;
    border-bottom: rgba(var(--primary_tr),1) 3px solid;
    transform: translateX(-100%);
    transition: transform ease .3s;
}

.animationForm .animationInput .content-name{
    position: absolute;
    bottom: 5px;
    left: 0;
    transition: all ease-in-out .3s;
}

/*
.animationForm .animationMessage label{
    bottom: auto;
    top: 0;
}
.animationForm .animationMessage .content-name{
    bottom: auto;
    top: 0;
}*/

.animationForm .animationInput input:focus + .label-name .content-name,
.animationForm .animationInput input:valid + .label-name .content-name,
.animationForm .animationInput textarea:focus + .label-name .content-name,
.animationForm .animationInput textarea:valid + .label-name .content-name{
     transform: translateY(-150%);
     font-size: 14px;
     color: rgba(var(--primary_tr),1);
}

.animationForm .animationInput textarea:focus + .label-name .content-name,
.animationForm .animationInput textarea:valid + .label-name .content-name{
     transform: translateY(-170px);
}

.animationForm .animationInput input:focus + .label-name::after,
.animationForm .animationInput input:valid + .label-name::after,
.animationForm .animationInput textarea:focus + .label-name::after,
.animationForm .animationInput textarea:valid + .label-name::after{
    transform: translateX(0%);
}

@media (max-width: 1081px) {
    .animationForm{
        width: 100%;
        padding: 10px;
    }
  }