body {
    margin: 0px;
    padding: 0px;
}
form {
    margin: 0;
    padding: 0;
}
label {
    display: block;
    margin: 0px;
    padding: 5px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: medium;
    font-weight: inherit;
}
@media screen and (max-width: 599px){
    .grp {
        width: 100%;
    }
    hr{
        width: 75%;
    }
}
@media screen and (min-width: 600px){
    .grp {
        width: 75%;
    }
    hr{
        width: 65%;
    }
}
@media screen and (min-width: 800px){
    .grp {
        width: 60%;
    }
    hr{
        width: 60%;
    }
}
@media screen and (min-width: 1080px){
    .grp {
        width: 55%;
    }
    hr{
        width: 50%;
    }
}

.box-img {
    width: max-content;
    margin: 0 auto;
}
.img {
    width: 75px;
    margin: 0 auto;
}

#form-contact h3 {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.main-contact-mini {
    margin: 0px;
    padding: 10px 0px;
    width: 100%;
    background-color: #ffffff;
}

.main-contact {
    margin: 0px;
    padding: 10px 0px;
    width: 100%;
    box-shadow: 2px 3px 10px rgb(100, 100, 100);
    background-color: #f8f9fa;
}

.frm-grp {
    margin: 2px 0px;
    padding: 2px 0px;
	text-align:left;
}
.grp{
    margin: 0px auto;
}
.mid {
    margin: 0px 10px;
    padding: 5px 0px;
	text-align:left;
}
/*-----------------Champs-----------------*/
.frm-grp .frm{
    display: block;
    padding: 2px 10px;
    margin: 0px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    outline: none;
    font-family: 'Segoe UI';
}
.frm::-webkit-input-placeholder {
    font-family: 'Segoe UI';
}
.frm-nrml {
    border: 2px solid rgb(96 184 216);
}
.frm-invalid{
    border: 1px solid rgb(248, 77, 77);
    box-shadow: 0px 3px 4px rgba(172, 78, 78, 0.911), 0px -3px 4px  rgba(172, 78, 78, 0.911);
}
.frm-valid {
    border: 1px solid rgb(104, 201, 100);
    box-shadow: 0px 3px 4px rgba(157, 204, 153, 0.911), 0px -3px 4px rgba(157, 204, 153, 0.911);
}
textarea {
    overflow: auto;
    resize: none;
}
.frm-grp .frm:focus {
    border: 1px solid rgb(181, 219, 255);
    box-shadow: 0px 3px 7px rgba(118, 118, 255, 0.788), 0px -3px 7px rgba(118, 118, 255, 0.788);
    border-radius: 5px;
    transition-duration: 0.35s;
}
input {
    height: 45px;
}
/*-----------------Buttons-----------------*/
.butt-box {
    margin: 0 auto;
    padding: 10px 0px;
}
.butt {
    width: 100%;
    display: block;
    color: white;
	height:60px;
    font-weight: bold;
    padding: 10px 20px;
    margin: 10px 0px;
    border-radius: 3px;
    border: none;
    outline: none;
}
.butt:hover{
    cursor: pointer;
    transition-duration: 0.7s;
}
.butt:active {
    border: 1px solid black;
}
.butt:focus {
    border: 2px solid rgb(148, 148, 148);
}
.butt:not(:hover){
    transition-duration: 0.7s;
}
.butt-reset {
    border: 1px solid burlywood;
    background-color: burlywood;
}
.butt-reset:hover{
    background-color: rgb(190, 132, 56);
}
.butt-send {
    border: 1px solid  rgb(25, 152, 255);
    background-color: rgb(25, 152, 255);

}
.butt-send:hover {
    background-color: rgb(39, 48, 163);
}
/*---------------Box result---------------*/
.succ-msg{
    margin: 5px auto;
    padding: 10px 5px;
    width: 100%;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    border-radius: 1px;
    text-align: center;
    color: #000000;
}
#close {
    width: max-content;
    display: inline-block;
    top: 5px;
    right: 5px;
    font-family: Segoe UI, Arial;
    color: #06cc08;
	font-weight: 200;
    cursor: pointer;
}
.hid {
    display: none;
}
.fail-msg{
    margin: 5px auto;
    padding: 10px 5px;
    width: 60%;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    text-align: center;
    color: #721c24;
}