@media all and (max-width:778.9px) {
    #joint{
        transform: translateX(15px);
    }
    
}
.nav-link .f-15-5:hover{
    color: #feaa6e !important;
    transition: all .25s;
}

@media screen and (max-width:631px){
.vmm1 {

font-family: Arial, Helvetica, sans-serif;
background-image: url("logomiiel.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
background-size: 75%;
color: white;
text-align: left;
margin-top: -200px;
margin-left: -4px;
margin-right: 0px;
height: 812px; 
}
.vmm2 {
background: rgba(0,0,0,0.8);
padding-top: 50%;
padding-left: 5%;
height: 985px;
}
h1{
height: 17%;
font-size: 40px;
margin-left: 25px;
}
.veri {
font-size:2rem;
padding-left: 20px;

}
.Vfier{
background: rgb(254, 170, 110);
color: #000;
padding: 3px 4px;
font-size: 19px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
z-index: 1;
position: absolute;
}
.Vfier:hover{
background: rgb(196, 129, 84);
padding: 3px 4px;
font-size: 19px;
border-radius: 12px;
border: 2px solid rgb(196, 129, 84);
color: #fff;
}
.sid{
font-size: 20px;
color: white;
z-index: 1;
position: absolute;
margin-top: 35px; 

}
.ipt{
background: rgba(0,0,0,0.1);
color: #fff;
padding: 3px 4px;
font-size: 19px;
font-weight: bolder;
border-radius: 12px;
border: 2px solid rgb(255,255,255);
z-index: 1;
    position: absolute;
}
.ipt:hover{
background: rgba(0,0,0,0.1);
padding: 3px 4px;
font-size: 19px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
color: white;
}
.ipt{
margin-left: -1px;
margin-top: 80px;
}
.Vfier{
margin-left: 170px;
margin-top: 80px;
}
.td{
padding-left: 25px;
}
.td2{
padding-left: 10px; 
}
.caractere{
position: absolute;
margin-top: 115px;
margin-left: 8px;
color: white;
font-size: 13px;
}


@keyframes tipsy {
    0%{
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.vmm {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
font-size: 25px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1px;
margin: 0;
position: absolute;
top: 35%;
left: 35%;
transform: translateX(-30%) translateY(-75%);
}

.vmm:before,
.vmm:after {
content: '';
padding: 2.5em .8em;
position: absolute;
left: 50%;
width: 115%;
top: 50%;
border: 15px solid rgb(254, 170, 110);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out tipsy;
}

.vmm:before {
border-color: rgb(254, 170, 110) rgb(254, 170, 110) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.vmm:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(254, 170, 110) rgb(254, 170, 110);
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);

}
}

@media screen and (min-width:632px) AND (max-width:827px){
.vmm1 {

font-family: Arial, Helvetica, sans-serif;
background-image: url("logomiiel.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
background-size: 80%;
color: white;
text-align: left;
margin-top: -200px;
margin-left: -4px;
margin-right: 0px;
height: 980px; 
}
.vmm2 {
background: rgba(0,0,0,0.8);
padding-top: 40%;
padding-left: 5px;
height: 985px;
}
h1{
height: 17%;
font-size: 40px;
margin-left: 25px;
}
.veri {
font-size:1rem;
padding-left: 20px;

}
.Vfier{
background: rgb(254, 170, 110);
color: #000;
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
z-index: 1;
position: absolute;
}
.Vfier:hover{
background: rgb(196, 129, 84);
padding: 4px 10px;
border-radius: 12px;
border: 2px solid rgb(196, 129, 84);
color: #fff;
}
.sid{
font-size: 25px;
color: white;
z-index: 1;
position: absolute;
margin-top: 35px;
margin-left: 50px;

}
.ipt{
background: rgba(0,0,0,0.1);
color: #fff;
padding: 4px 15px;
font-size: 25px;
font-weight: bolder;
border-radius: 12px;
border: 2px solid rgb(255,255,255);
z-index: 1;
    position: absolute;
}
.ipt:hover{
background: rgba(0,0,0,0.1);
padding: 4px 15px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
color: white;
}
.ipt{
margin-left: 90px;
margin-top: 95px;
}
.Vfier{
margin-left: 320px;
margin-top: 95px;
}
.td{
padding-left: 25px;
}
.td2{
padding-left: 10px; 
}
.caractere{
position: absolute;
margin-top: 140px;
margin-left: 115px;
color: white;
    
}



@keyframes tipsy {
0%{
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.vmm {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
font-size: 30px;
font-weight: bold;
text-decoration: none;
letter-spacing: 1px;
margin: 0;
position: absolute;
top: 30%;
left: 35%;
transform: translateX(-40%) translateY(-50%);
}

.vmm:before,
.vmm:after {
content: '';
padding: 1.9em .8em;
position: absolute;
left: 50%;
width: 110%;
top: 50%;
border: 15px solid rgb(254, 170, 110);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out tipsy;
}

.vmm:before {
border-color: rgb(254, 170, 110) rgb(254, 170, 110) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.vmm:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(254, 170, 110) rgb(254, 170, 110);
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);

}
}

@media screen and (min-width:828px) AND (max-width:1400px){
.vmm1 {

font-family: Arial, Helvetica, sans-serif;
background-image: url("logomiiel.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
color: white;
text-align: left;
margin-top: -200px;
margin-left: -4px;
margin-right: 0px;
height: 980px; 
}
.vmm2 {
background: rgba(0,0,0,0.8);
padding-top: 20%;
padding-left: 15%;
height: 985px;
}
h1{
height: 17%;
font-size: 40px;
margin-left: 25px;
}
.veri {
font-size:2rem;
padding-left: 20px;

}
.Vfier{
background: rgb(254, 170, 110);
color: #000;
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
z-index: 1;
position: absolute;
}
.Vfier:hover{
background: rgb(196, 129, 84);
padding: 4px 10px;
border-radius: 12px;
border: 2px solid rgb(196, 129, 84);
color: #fff;
}
.sid{
font-size: 25px;
color: white;
z-index: 1;
position: absolute;
margin-top: 155px; 

}
.ipt{
background: rgba(0,0,0,0.1);
color: #fff;
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border-radius: 12px;
border: 2px solid rgb(255,255,255);
z-index: 1;
    position: absolute;
}
.ipt:hover{
background: rgba(0,0,0,0.1);
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
color: white;
}
.ipt{
margin-left: 290px;
margin-top: 150px;
}
.Vfier{
margin-left: 525px;
margin-top: 150px;
}
.td{
padding-left: 25px;
}
.td2{
padding-left: 10px; 
}
.caractere{
position: absolute;
margin-top: 199px;
margin-left: 310px;
color: white;
    
}



@keyframes tipsy {
    0%{
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.vmm {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
font-size: 34px;
font-weight: bold;
text-decoration: none;
letter-spacing: -2px;
margin: 0;
position: absolute;
top: 40%;
left: 35%;
transform: translateX(-40%) translateY(-50%);
}

.vmm:before,
.vmm:after {
content: '';
padding: .9em .4em;
position: absolute;
left: 50%;
width: 108%;
top: 50%;
border: 15px solid rgb(254, 170, 110);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out tipsy;
}

.vmm:before {
border-color: rgb(254, 170, 110) rgb(254, 170, 110) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.vmm:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(254, 170, 110) rgb(254, 170, 110);
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);

}
}

@media screen and (min-width:1401px){

.vmm1 {

font-family: Arial, Helvetica, sans-serif;
background-image: url("logomiiel.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right;
color: white;
text-align: left;
margin-top: -200px;
margin-left: -4px;
margin-right: 0px;
height: 980px; 
}
.vmm2 {
background: rgba(0,0,0,0.8);
padding-top: 20%;
    padding-left: 15%;
height: 985px;
}
h1{
height: 17%;
font-size: 40px;
margin-left: 25px;
}
.veri {
font-size:2rem;
padding-left: 20px;

}
.Vfier{
background: rgb(254, 170, 110);
color: #000;
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;

z-index: 1;
position: absolute;
}
.Vfier:hover{
background: rgb(196, 129, 84);
padding: 4px 10px;
border-radius: 12px;
border: 2px solid rgb(196, 129, 84);
color: #fff;
}
.sid{
font-size: 25px;
color: white;
z-index: 1;
position: absolute;
margin-top: 5px; 

}
.ipt{
background: rgba(0,0,0,0.1);
color: #fff;
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border-radius: 12px;
border: 2px solid rgb(255,255,255);
z-index: 1;
    position: absolute;
}
.ipt:hover{
background: rgba(0,0,0,0.1);
padding: 4px 10px;
font-size: 25px;
font-weight: bolder;
border: 2px solid rgb(254, 170, 110);
border-radius: 12px;
color: white;
}
.ipt{
margin-left: 290px;
}
.Vfier{
margin-left: 510px;
}
.td{
padding-left: 25px;
}
.td2{
padding-left: 10px; 
}
.caractere{
position: absolute;
margin-top: 50px;
margin-left: 310px;
color: white;
    
}

@keyframes tipsy {
0%{
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
    }
}

.vmm {
color: #fffbf1;
text-shadow: 0 20px 25px #2e2e31, 0 40px 60px #2e2e31;
font-size: 50px;
font-weight: bold;
text-decoration: none;
letter-spacing: -3px;
margin: 0;
position: absolute;
top: 40%;
left: 35%;
transform: translateX(-50%) translateY(-50%);
}

.vmm:before,
.vmm:after {
content: '';
padding: .9em .4em;
position: absolute;
left: 50%;
width: 108%;
top: 50%;
border: 15px solid rgb(254, 170, 110);
transform: translateX(-50%) translateY(-50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out tipsy;
}

.vmm:before {
border-color: rgb(254, 170, 110) rgb(254, 170, 110) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}

.vmm:after {
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(254, 170, 110) rgb(254, 170, 110);
box-shadow: 25px 25px 25px rgba(46, 46, 49, .8);

}
}

@media all and (max-width:778.9px) {
    #joint{
        transform: translateX(15px);
    }
    
}
.nav-link .f-15-5:hover{
    color: #feaa6e !important;
    transition: all .25s;
}