body{
  overflow-x: hidden;
  background-attachment:fixed;
  background-size: 100%;
  background-image: url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-9/50177533_229069691362141_2101978113016594432_n.jpg?_nc_cat=109&_nc_ht=scontent-cdt1-1.xx&oh=7d1a9a1bd1245a592c62c946399b352f&oe=5CB9AB21");
  background-repeat: no-repeat;
  overflow: scroll;
  font: 30px/1.1em Arial;
}

body {
  margin:60px; /* marges par défuat */
  padding:30px;
  height: 100%;
}

body
{
width:100%;
}



#banner1{
  display:block;
  background-color: green;
  opacity: 0.3;
  height: 40px;
  width: 100%;
}

#menu{
  width: 100%;
  height:110px;
  position:relative;
  background-color: #2f3e2d;
  opacity: 0.8;
}


#menu ul {
  float: left;
  left: 52%;
  position: relative;
  padding-top: 15px;
  margin-left: -650px;
}


#menu ul li {
  margin-left:30px;
  float :inherit;
  list-style-type:none;
  position: relative;
  Left: 70px;
}

#menu ul li a {
  display: inline-block;
  background-color:#e0ce7d;
  height: 50px;
  width:300px;
  color: #2f3e2d ;
  text-decoration: none;
  font-family: cursive;
}

#menu ul li :hover {
  color:white;
  background-color: green;
}


#footer{
  padding-top: 10px;
  text-align:center;
  display:block;
  background-color:#2f3e2d;
  height: 250px;
  opacity: 0.7;
  font-family: cursive;
  font-size: 12px;
  color: #e0ce7d;
  width: 100%;
}


#banner2{
  display: block;
  opacity: 0.3;
  background-color: green;
  height: 40px;
  width: 100%;
}

#contenuprincipal{
  width: 100%;
}


figure {
  margin-left: auto;
}


section {
    border:0px solid #325036;
  border-radius: 20px;
  font-family: verdana;
  font-size: 13px;
}


h2
{
  font-size: medium;
  font-family: cursive;
  font-size: 16px;
  color: black;
  background-color: #b0a545;
  opacity: 0.4;
}


body {
  margin: 0;
}

body {
  padding-top: 50px;
  border-top: 10px solid  #e0ce7d;
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.5;

  .wf-active & {
     font-family: "freight-text-pro", Georgia, serif;
  }
}


.moby {
  max-width: 750px;
  position: relative;
  padding-left: 150px;
  padding-top: 50px;
}

h6 {
  padding-top: 30px;
  writing-mode: vertical-rl;
  position: absolute;
  left: -80px;
  top: 0;
  line-height: 1;
  color:  #e0ce7d;
  font-size: 80px;
  font-weight: 800;

  .wf-active & {
     font-family: "freight-big-pro", Georgia, serif;
  }
}


h1
{
   font-size: xx-large;
  color: black;
  font-family: verdana;
  font-style: italic;
    background-color: #e0ce7d;
    color: #496146;
    opacity: 0.6;
}



h3{
  font-size:x-small;
}

h4
{ font-size:x-large;
  font-family: cursive;
  font-size: 30px;
color:#496146
}

h5
{
  font-size: x-large;
  font-family: verdana;
  font-size: 25px;
  color: black;
  background-color: #b0a545;
  opacity: 0.4;
}



}
table
{
    border: 3px solid #496146;
    border-collapse: collapse;
    background-color:#c7c3a3;
    width: 100%;
    font-family: cursive;
    font-size: 15px;
}

td
{
    border: 2px solid #496146;
}

@media screen and (max-width:1920px) {
/* Entre 1280px et 1920px */
/* iMac 21.5" paysage = 1920px */

.container{
  display:inline;
  grid-template-columns:1000px;
  grid-template-rows:150px 150px 150px 150px 150px 150px 150px 150px 150px;
  grid-gap: auto;
  margin:20%;
}

div.item{
  border: 5px double green;
  background: #ddd9b3;
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 18px;
  font-family:cursive;
  font-style: italic;
}


body {
background: url(url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-0/p280x280/49587703_803068670044991_2968901533543956480_n.png?_nc_cat=110&_nc_ht=scontent-cdt1-1.xx&oh=008f09af9b6adccb69f079e6dd494de2&oe=5CCA85A3");
}
} /* responsive */


@media screen and (max-width:1280px) {
/* Entre 1024px et 1280px */
/* Notebook */


.container{
  display:inline;
  grid-template-columns:900px;
  grid-template-rows:150px 150px 150px 150px 150px 150px 150px 150px 150px;
  grid-gap: auto;
  margin:6%;
}

div.item{
  border: 5px double green;
  background: #ddd9b3;
  display: flex;
  justify-content: center;
  align-items:center;
  font-size: 18px;
  font-family:cursive;
  font-style: italic;
}

body {
background:url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-0/p280x280/49587703_803068670044991_2968901533543956480_n.png?_nc_cat=110&_nc_ht=scontent-cdt1-1.xx&oh=008f09af9b6adccb69f079e6dd494de2&oe=5CCA85A3");
}
} /* responsive */

@media screen and (max-width:1024px) {
/* Entre 768px et 1024px */
/* iPad portrait & landscape */
/* iPhone 6+ paysage = 960px */

body {
background-image: url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-0/p280x280/49798859_637196606696401_9205194665811247104_n.jpg?_nc_cat=100&_nc_ht=scontent-cdt1-1.xx&oh=b06e9e33ea256bc2507d5fb43942ff92&oe=5CD61967");
}
.container{
  display: grid;
  grid-template-columns:700px;
  grid-template-rows:80px 80px 80px 80px 80px 80px 80px 80px 80px;
  grid-gap:auto;
  margin:15%;
}
div.item{
  border: 5px double green;
  display: flex;
  background: #ddd9b3;
  justify-content: center;
  align-items:center;
  font-size: 17px;
  font-family:cursive;
  font-style: italic;
}



} /* responsive */

@media screen and (max-width:768px) {
/* Entre 667px et 768px */
/* iPad portrait = 768px */

.container{
  display: grid;
  grid-template-columns:800px;
  grid-template-rows:80px 80px 80px 80px 80px 80px 80px 80px 80px;
  grid-gap:auto;
  margin:30%;
}
div.item{
  border: 5px double green;
  display: flex;
  background: #ddd9b3;
  justify-content: center;
  align-items:center;
  font-size: 11px;
  font-family:cursive;
  font-style: italic;
}




body {
background-image: url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-0/p280x280/49798859_637196606696401_9205194665811247104_n.jpg?_nc_cat=100&_nc_ht=scontent-cdt1-1.xx&oh=b06e9e33ea256bc2507d5fb43942ff92&oe=5CD61967");
}
} /* responsive */

@media screen and (max-width:667px) {
/* Entre 375px et 667px */
/* Mobiles paysage */
/* iPhone 6 paysage = 667px */
/* iPhone 5s paysage = 568px */
/* iPhone 4 paysage = 468 px */

.container{
  display: grid;
  grid-template-columns:600px;
  grid-template-rows:80px 80px 80px 80px 80px 80px 80px 80px 80px ;
  grid-gap:auto;
  margin:20%;
}
div.item{
  border: 5px double green;
  display: flex;
  background:#ddd9b3;
  justify-content: center;
  align-items:center;
  font-size: 11px;
  font-family:arial;
  font-style: italic;
}


body {
background-image: url("https://scontent-cdt1-1.xx.fbcdn.net/v/t1.15752-0/p280x280/49798859_637196606696401_9205194665811247104_n.jpg?_nc_cat=100&_nc_ht=scontent-cdt1-1.xx&oh=b06e9e33ea256bc2507d5fb43942ff92&oe=5CD61967");
}
} /* responsive */