#contact-form .btn {
    display: block !important;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    width: 160px;
    height: 40px;
    line-height: 38px;
    transition-duration: 300ms;
}

#contactMsg {
    transition: all 1.5s ease-in-out;
    height: 0;
    opacity: 0;
}

#contact-form .btn.success {
    animation: submitted 1s;
    animation-fill-mode: forwards;
    -webkit-animation: submitted 1s;
    -webkit-animation-fill-mode: forwards;
}

#contact-form .btn:after {
    content: "";
    width: 0%;
    height: 4px;
    position: absolute;
    background: #22c55e;
    top: calc(50% - 2px);
    transition: all 3s;
    -webkit-transition: all 3s;
    left: 0;
}

#contact-form .btn svg {
    position: absolute;
    top: 0px;
    left: 0;
}

#contact-form .btn svg rect {
    fill: none;
    stroke: #22c55e;
    stroke-width: 16;
    stroke-dasharray: 20, 200;
    stroke-dashoffset: 20;
    -webkit-transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
    opacity: 0;
}

#contact-form .btn.success svg rect {
    opacity: 1;
    stroke-width: 4;
    stroke-dasharray: 170, 0;
    stroke-dashoffset: 500;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

#contact-form .btn span:nth-of-type(1) { opacity: 1; }
#contact-form .btn.sending span:nth-of-type(1),
#contact-form .btn.success span:nth-of-type(1) { transition: opacity 0.1s; opacity: 0; display: none; }
#contact-form .btn span:nth-of-type(3) { opacity: 0; }
#contact-form .btn span:nth-of-type(2) { opacity: 0; display: block; }
#contact-form .btn.sending span:nth-of-type(2) { animation: load 1s; -webkit-animation: load 1s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; }
#contact-form .btn.success span:nth-of-type(3) { opacity: 1; transition: opacity 3s; -webkit-transition: opacity 3s; margin-top: -40px; display: block; }
#contact-form .btn.sending:after { animation: loadingBar 3s infinite; -webkit-animation: loadingBar 3s infinite; }
#contact-form .btn.sending { animation: loadingBtn 3s; animation-fill-mode: forwards; -webkit-animation: loadingBtn 3s; -webkit-animation-fill-mode: forwards; }

@keyframes loadingBar {
    0% { left: 0; width: 0%; }
    50% { width: 100%; left: 0; }
    51% { right: 0; left: auto; width: 100%; }
    100% { width: 0%; right: 0; left: auto; }
}

@keyframes loadingBtn {
    0% { height: 40px; margin-top: 0; border-radius: 4px; }
    10% { height: 48px; margin-top: -4px; background: #22c55e; border-color: transparent; border-width: 0; }
    20% { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
    100% { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
}

@keyframes submitted {
    0% { height: 4px; margin-top: 20px; background: #ddd; border-radius: 0; border-width: 0; }
    100% { height: 40px; margin-top: 2px; border-radius: 4px; background: none; color: #60d591; border-color: transparent; border-width: 0; }
}

@keyframes load {
    from { opacity: 1; }
    to { opacity: 0; display: table-cell; }
}