#navigation {
  display:block;
  width:173px;
  float:right;
}

.toggle {
  height: 30px;
  width: 37px;
  cursor: pointer;
  position: relative;
  margin: 0 0 8px 136px;
}

.ligne {
  margin-bottom: 5px;
  background: #fff;
  width: 37px;
  height: 5px;
  cursor: pointer;
}

.menu {
  display:none;
      width: 305px;
    margin-left: -142px;
}

.menu li {
  list-style-type:none;display:inline;
}

.menu a {
  text-align:center;
  display:block;
  width:100%;
  height:35px;
  text-decoration:none;
  padding-top:6px;
  background-color:#fff;
  border-top:1px solid #FFF;
}

.menu a:hover {
  color:#000;
}

@media (max-width: 320px) and (min-width: 300px){
	
	.menu {
  display:none;
      width: 384px;
    margin-left: -150px;
	background-color: #fff;
	    height: 250px;
}
}


@media (max-width: 375px) and (min-width: 321px) {
	
	.menu {
  display:none;
      width: 384px;
    margin-left: -177px;
	background-color: #fff;
	    height: 250px;
}
}

@media (min-width: 376px) and (max-width: 500px) {
	
	.menu {
  display:none;
      width: 421px;
    margin-left: -218px;
	background-color: #fff;
	    height: 250px;
}
}

@media (min-width: 501px){
	
	.menu {
  display:none;
      width: 785px;
    margin-left: -564px;
	background-color: #fff;
	    height: 250px;
}
}