/*******             *******/
/*******     All     *******/
/*******             *******/
body{

    margin: 0px; 
    font-family: arial; 
    background-color: #fff; 
    font-family: sans-serif;

}
/*******             *******/
/*******     All     *******/
/*******             *******/






/*******             *******/
/*******   Classes   *******/
/*******             *******/
.contact_us_page_container{

    width: 60%; 
    min-width: 600px; 
    margin: auto; 
    height: 600px; 
    margin-top: 50px; 
    margin-bottom: 100px;

}

.contact_us_page_container > h2{

    font-size: 30px; 
    margin-bottom: 40px; 
    color: #3f5689;

}

.contact_us_page_input_container{

    width: 700px;
    margin: auto;
    padding: 20px 0px;

}

.contact_us_page_input_container input,
.contact_us_page_input_container textarea{

    font-size: 20px; 
    color: #38444D;
    font-family: sans-serif;
    width: calc(100% - 24px);
    margin: 5px 0px;
    resize: none;
    padding: 7px 12px;
    border-radius: 5px;
    border: 1px solid #606179;

}

.contact_us_page_input_container textarea{

    height: 200px;

}
/*******             *******/
/*******   Classes   *******/
/*******             *******/






/*******            *******/
/*******    ID's    *******/
/*******            *******/
#contact_us_submit_button{

    position: relative;
    float: right;
    display: inline-block; 
    color: #606179; 
    border: 2px solid #606179; 
    width: 140px;
    height: 21px;
    border-radius: 10px; 
    padding: 10px 60px; 
    font-size: 18px; 
    font-weight: 400;
    cursor: pointer;

}

#contact_us_submit_button > span{

    position: absolute; 
    padding: 10px 0px; 
    text-align: center; 
    color: #606179; 
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;

}

#contact_us_submit_button::before{

    position: absolute;
    content: '';
    background-color: #606179;
    border-radius: 6px; 
    top: 2px; 
    left: 2px; 
    bottom: 2px;
    width: 0px;
    -webkit-transition: all ease-in-out .2s;
    -moz-transition: all ease-in-out .2s;
    transition: all ease-in-out .2s;

}

#contact_us_submit_button:hover > span{

    color: #fff;

}

#contact_us_submit_button:hover::before{

    width: calc(100% - 4px);

}

#contact_us_success_message{

    font-size: 18px; 
    margin-top: 10px; 
    color: #0ee03c; 
    text-align: center;
    display: none;

}

#contact_us_error_message{

    font-size: 18px; 
    margin-top: 10px; 
    color: #ff654e; 
    text-align: center; 
    display: none;

}
/*******            *******/
/*******    ID's    *******/
/*******            *******/



@media (pointer: coarse) or (max-width: 900px){

    #contact_us_submit_button{

        width: 250px;
        height: 48px;
        border-radius: 10px;
        padding: 10px 60px;
        font-size: 40px;

    }

    #contact_us_page_message_input{

        height: 300px;

    }



    .contact_us_page_container{

        width: 80%;
        height: auto;
        margin-top: 200px;
        margin-bottom: 400px;

    }

    .contact_us_page_container h2{

        font-size: 50px;

    }

    .contact_us_page_input_container input, #contact_us_page_message_input{

        font-size: 35px;
        width: calc(100% - 40px);
        padding: 10px 20px;

    }

}