/* =========================================================
   Saitebi.Net Contact Page
========================================================= */


.contact-page {

    width: 888px;

    margin: 0 auto;

    padding: 18px 0 40px;

}



.contact-box {

    width: 600px;

    max-width: 100%;

    margin: 25px auto;

    padding: 30px;

    background: #b5b5b5;

    border: 1px solid #888888;

    border-radius: 3px;

    box-shadow: 0 2px 5px rgba(0,0,0,.25);

}




.contact-box form {

    width: 100%;

}



.contact-box input,
.contact-box textarea {


    width: 100%;

    box-sizing: border-box;

    padding: 12px;

    margin-bottom: 15px;


    background: #ffffff;


    border: 1px solid #999;

    border-radius: 3px;


    color: #222;

    font-family: Arial, Sylfaen, "DejaVu Sans", sans-serif;

    font-size: 14px;


}



.contact-box textarea {

    resize: vertical;

}



.contact-box input:focus,
.contact-box textarea:focus {


    outline: none;

    border-color: #5c2d1a;


}



.contact-box button {


    width: 100%;


    padding: 13px;


    background: #5c2d1a;


    color: #ffffff;


    border: none;


    border-radius: 3px;


    font-size: 15px;


    font-weight: bold;


    cursor: pointer;


}



.contact-box button:hover {


    background: #7a3d22;


}


.contact-box button:disabled {

    opacity: .6;

    cursor: default;

}



.bot-field {

    display: none;

}



/* =========================
   FORM MESSAGE
========================= */


.form-message {

    display: none;

    margin-bottom: 15px;

    padding: 12px;

    border-radius: 3px;

    font-family: Arial, Sylfaen, "DejaVu Sans", sans-serif;

    font-size: 14px;

    font-weight: bold;

    text-align: center;

}


.form-message.success {

    display: block;

    background: #dff0d8;

    color: #2d6a1f;

    border: 1px solid #a3d18f;

}


.form-message.error {

    display: block;

    background: #f8d7da;

    color: #8a1f2b;

    border: 1px solid #e0a3aa;

}





/* =========================
   MOBILE
========================= */


@media screen and (max-width:950px){


.contact-page {


    width: calc(100% - 24px);

}


.contact-box {


    width:100%;

    padding:20px;


}



}



@media screen and (max-width:420px){


.contact-page {


    width: calc(100% - 16px);

}



.contact-box {


    padding:15px;


}


}