.contact{
    /*min-width: 200px;*/
    width: 100%;
    max-width: 600px;
}
.contact input,
.contact textarea{
    position: relative;
    transform: translateY(100px);
    left: 0;
    animation: drop-up 300ms forwards;
    background-color: #2b2c31 !important;
    opacity: 0;
    color: white !important;
}
.contact input[type=submit]{
    background-color: #227DC7 !important;
}
.contact .form-group .input-group-text{
    /*background-color: #1b1e21;*/
}
.contact .form-group i{
    /*color: white;*/
}

#input2{
    animation-delay: 200ms !important;
}
#input3{
    animation-delay: 400ms !important;
}
#input4{
    animation-delay: 600ms !important;
}
#input5{
    animation-delay: 800ms !important;
}

@keyframes drop-up {
    0%{
        opacity: 0;
        transform: translateY(100px);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}

.message-icon{
    font-size: 98pt;
    display: flex;
    flex-direction: column;
    /*width: 50%;*/
    /*height: 100%;*/
    justify-content: center;
    align-items: center;
    color: #f5f;
    padding: 20px;
}
.message-icon i{
    position: relative;
    top: 100%;
    left: -50%;
    animation: anim-message-icon 1500ms forwards ease-in;
    font-weight: 100;
}
.message-icon h4 span{
    color: white;
}
@keyframes anim-message-icon {
    0%{
        top: 100%;
        left: -50%;
    }
    100%{
        top: 0;
        left: 0;
    }
}

@media only screen and (max-width: 768px) {
    h4 {
        font-size: 14pt !important;
    }

    .message-icon {
        font-size: 50pt !important;
    }
}