#caption{
    background: rgb(26, 60, 182);
    text-align: center;
    padding: 2% 0;
}


#caption-contact{
    border: 1px solid #5D70D5;
    width: 25%;
    margin: 2% auto;
    padding: 0.5% 1%;
    text-align: left;
}

#caption-contact p, #caption-contact a{
    text-decoration: none;
    margin: 6% 0;
    display: block;
}

#caption-contact p i, #caption-contact a i{
    border-right: 2px solid rgb(112, 130, 231);
    padding: 2% 4%;
    margin: 0 2%;
}

#contact-form{
    padding: 2% 0;
}

#contact-form p:first-child{
    text-align: center;
}

form{
    width: 30%;
    margin: 2% auto;
}

.form-input {
    margin: 4% 0;
}

.form-input label{
    display: block;
}

.form-input input{
    width: 100%;
    border: none;
    background: none;
    outline-width: 0;
    border: 2px solid rgba(128, 128, 128, 0.233);
    border-bottom: 2px solid rgb(13, 29, 117);
    margin-top: 1%;
    padding: 0.5% 1%;
    transition: 0.2s ease border;
}

.form-input input:focus{
    border: 2px solid rgb(128, 128, 128);
    transition: 0.2s ease border;
}


textarea{
    width: 100%;
    border: 2px solid rgba(128, 128, 128, 0.514);
    padding: 0.5% 1%;
    margin-top: 1%;
}

#submit{
    border: none;
    background: none;
    width: 35%;
    border: 1px solid rgb(13, 29, 117);
    text-align: left;
}

#submit i{
    background: rgb(19, 32, 102);
    padding: 6%;
}

#submit span{
    padding-left: 15%; 
}

#submit:hover{
    background: rgb(47, 56, 134);
    color: white;
    cursor: pointer;
}

/*1025 to 1440*/
@media only screen and (min-width: 1024px) and (max-width: 1439px){
    form{
        width: 40%;
        margin: 3% auto;
    }
}

/*768 to 1024*/
@media only screen and (min-width: 768px) and (max-width: 1023px){
    #caption-contact{
        width: 40%;
        margin: 3% auto;
    }
    
    form{
        width: 60%;
        margin: 3% auto;
    }

    .form-input {
        margin: 5% 0;
    }
}

/*425 to 767*/
@media only screen and (min-width: 425px) and (max-width: 767px){
    #caption{
        padding: 4% 0;
    }
    
    #caption-contact{
        width: 50%;
        margin: 4% auto;
    }

    #contact-form{
        padding: 4% 0;
    }
    
    form{
        width: 70%;
        margin: 4% auto;
    }

    .form-input {
        margin: 6% 0;
    }
}

/*375 to 424*/
@media only screen and (min-width: 375px) and (max-width: 424px){
    #caption{
        padding: 4% 0;
    }
    
    #caption-contact{
        width: 60%;
        margin: 4% auto;
    }

    #contact-form{
        padding: 4% 0;
    }
    
    form{
        width: 80%;
        margin: 4% auto;
    }

    .form-input {
        margin: 6% 0;
    }
}

/*320 to 374*/
@media only screen and (min-width: 320px) and (max-width: 374px){
    #caption{
        padding: 5% 0;
    }
    
    #caption-contact{
        width: 70%;
        margin: 5% auto;
    }

    #contact-form{
        padding: 5% 0;
    }
    
    form{
        width: 90%;
        margin: 5% auto;
    }

    .form-input {
        margin: 8% 0;
    }
}