@media(min-width: 768px) and (max-width: 3000px)
{

body{
margin: 0px; 
font-family: 'Georgia', serif; /*'Georgia-Bold',*/
color: black;
line-height: 1.5em;
background-image: url("../images/FFV_Site background.jpg");

}

#all {
width: 60%;
margin-left: auto;
margin-right: auto;
}

#header {
width: 100%;
height: 200px;
/*background-image: url("../images/test.png");*/
background-color: white;
}

#hl {
float: left;
margin-left: 7%;
width: 20%;
text-align: left;
padding-top: 2%;
}    

#hc {
float: left;
width: 45%;
font-size: 30px;
font-weight: bold;
text-align: center;
padding-top: 5%; 
}  

#hr {
float: left;
width: 20%;
text-align: right;
padding-top: 2%;      
}  

#menu {
width: 100%;
height: 55px;
padding-top: 10px;
background-color: white;
}

#container11 {
float: left;
width: 100%;
min-height: 739px;
background-color: white;
}

#footer {
float: left;
width: 100%;
height: 30px;
text-align: center;
padding-top: 10px;
background-color: #ECDCCF;
}

div.titre {
width: 98%;
height: 25px;
box-shadow: 5px 5px 5px black;
padding-top: 5px;
text-align: center;
}

/* Menu */ 
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}

li {
float: left;
padding-left: 8%;
}

li.actif a {
text-decoration: underline #3365FF;
color: #000000;
}

li a {
text-decoration:none;
color: #000000; 
}

li a:hover {
text-decoration: underline;
color: #000000;
}

/* barre menu */ 
hr {
margin-left: auto;
margin-right: auto;
width: 99%;
border: 0;
height: 1px;
background: rgb(218, 216, 216);
}

/* h */ 
h1 {
text-align: center;
color: #CB1009;
}

/* Liens */ 
a {
text-decoration:none;
color: black;
}

a:hover {
text-decoration:none;
color: black;
}

a.accueil {
text-decoration:none;
color: black;
}

a.accueil:hover {
text-decoration:none;
color: #CB1009;
}

/* Tables */
td.membres {
height: 40px;
border-bottom: 1px solid;
border-color: #D3D3D3;
}

/* formulaire */
input.contact {
width: 250px;
height: 30px;
border:1px solid #ECDCCF;
border-radius: 3px;
}

textarea.contact {
width: 550px;
height: 100px;
resize: none;
border:1px solid #ECDCCF;
border-radius: 3px;
}

button.contact {
width: 200px;
height: 30px;
background-color: #ECDCCF;
border: none;
color: gray;
}
button.contact:hover {
width: 200px;
height: 30px;
background-color: #ECDCCF;
border: none;
color: black;
cursor: pointer;
}

img.acc {
width: 200px;
height: 200px;
object-fit: cover;
float: left;
margin-right: 50px;
}

} 

/* ---------------------------------------------------------- */ 

@media(max-width: 767px)
{ 

body{
margin: 0px; 
font-family: 'Georgia-Bold', 'Georgia', serif;
color: black;
background-image: url("../images/FFV_Site background.jpg");
}

#all {
width: 100%;
}

#header {
width: 100%;
height: 170px;
background-color: white;
}

#hl {
float: left;
margin-left: 7%;
width: 20%;
text-align: left;
padding-top: 2%;
}    

#hc {
float: left;
width: 45%;
font-size: 30px;
font-weight: bold;
text-align: center;
padding-top: 5%; 
}  

#hr {
float: left;
width: 20%;
text-align: right;
padding-top: 2%;      
}  

#menu {
width: 100%;
height: 100px;
padding-top: 10px;
background-color: white;   
}

#container11 {
float: left;
width: 100%;
min-height: 749px;
padding-top: 1%; 
padding-left: 1%;
background-color: white;
}

#footer {
float: left;
width: 100%;
height: 55px;
text-align: center;
background-color: #ECDCCF;
}

div.titre {
width: 98%;
height: 25px;
box-shadow: 5px 5px 5px black;
padding-top: 5px;
text-align: center;
}

/* Menu */ 
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #3165FA;
}

li {
float: left;
padding-left: 7%;
}

li.actif a {
color: #F7F619;	
}

li a {
text-decoration:none;
color: white; 
}

li a:hover {
color: #F7F619;
}

/* barre menu */ 
hr {
margin-left: auto;
margin-right: auto;
width: 99%;
border: 0;
height: 1px;
background: rgb(218, 216, 216);
}

/* h */ 
h1 {
text-align: center;
color: #CB1009;
}

/* Liens */ 
a {
text-decoration:none;
color: black;
}

a:hover {
text-decoration:none;
color: black;
}

a.accueil {
text-decoration:none;
color: black;
}

a.accueil:hover {
text-decoration:none;
color: #CB1009;
}

/* Tables */
td.membres {
height: 40px;
border-bottom: 1px solid;
border-color: #D3D3D3;
}

/* formulaire */
input.contact {
width: 150px;
height: 30px;
border:1px solid #ECDCCF;
border-radius: 3px;
}

textarea.contact {
width: 350px;
height: 100px;
resize: none;
border:1px solid #ECDCCF;
border-radius: 3px;
}

button.contact {
width: 100px;
height: 30px;
background-color: #ECDCCF;
border: none;
color: gray;
}
button.contact:hover {
width: 100px;
height: 30px;
background-color: #ECDCCF;
border: none;
color: black;
cursor: pointer;
}

img.acc {
width: 200px;
height: 200px;
object-fit: cover;
float: left;
margin-right: 50px;
}

}