/********** DESKTOP ***********/
@media screen and (min-width: 1024px) {

	div#wrapper {
	    margin-left:auto;
	    margin-right :auto;
	    width:1024px;
	}  

	header h1 img {
	  width: 60%;
	  height: 60%;
	  display: block;
	  margin-left:auto;
	  margin-right :auto;
	  margin-top :5%;
	}

	div {
		margin-left:47%;
		margin-top: -10%;
	} 

	header a{
		margin-top:-13%;
		display: inline-block;	
		width:50px;
		padding-left: 15px;
		margin-left:auto;
	 	margin-right :auto;
	}

	header a img {
	  width: 40px;

	} 

	/******************** FOOTER **************************/

	footer p{
	  color : #ababab;
	  font-size: 10px;
	  width:400px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20%;
      margin-bottom: 10%;
	}

	footer p a{
	  text-decoration: none;
	  color : #8d8d8d;
	  font-size: 10px;
	}


	footer p a:link,
	footer p a:visited{
	  text-decoration: none;
	  color : #8d8d8d;
	}

	footer p a:hover,
	footer p a:active{
	  text-decoration: none;
	  color : #5b5b5b;
	  font-size: 10px;
	}


}

/********** TABLETTE paysage & portrait ***********/
@media screen and (min-width: 481px) and (max-width: 1023px) { 

	div#wrapper {
    margin-left:auto;
    margin-right :auto;
    width:1024px;
	}  

	header h1 img {
	  width: 70%;
	  height: 70%;
	  display: block;
	  margin-left:auto;
	  margin-right :auto;
	  margin-top :18%;
	} 

	div {
		margin-left:47%;
		margin-top: -10%;
	} 

	header a{
		margin-top:-13%;
		display: inline-block;	
		width:50px;
		padding-left: 10px;
		margin-left:auto;
	 	margin-right :auto;
	}

	header a img {
	  width: 30px;

	} 

	/******************** FOOTER **************************/	

	footer p{
	  color : #ababab;
	  font-size: 10px;
	  width:400px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30%;
	}

	footer p a{
	  text-decoration: none;
	  color : #8d8d8d;
	  font-size: 10px;
	}


	footer p a:link,
	footer p a:visited{
	  text-decoration: none;
	  color : #8d8d8d;
	}

	footer p a:hover,
	footer p a:active{
	  text-decoration: none;
	  color : #5b5b5b;
	  font-size: 10px;
	}


}

/********** SMARTPHONE portrait ***********/
@media screen and (max-width: 480px) { 

	*{
      margin: 0;
      padding: 0;
      box-sizing:border-box;
	}
 

	header h1 img {
	  width: 90%;
	  height: 90%;
	  display: block;
	  margin-left:auto;
	  margin-right :auto;
	  margin-top :5%;
	} 

	div {
		margin-left:26%;
		margin-top: 40px;
	} 

	header a{
		margin-top:-13%;
		display: inline-block;	
		width:50px;
		padding-left: 10px;
		margin-left:auto;
	 	margin-right :auto;
	}

	header a img {
	  width: 30px;

	} 

	footer p{
	  color : #ababab;
	  font-size: 10px;
      width:200px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 50%;
	}

	footer p a{
	  text-decoration: none;
	  color : #8d8d8d;
	  font-size: 10px;
	}


	footer p a:link,
	footer p a:visited{
	  text-decoration: none;
	  color : #8d8d8d;
	}

	footer p a:hover,
	footer p a:active{
	  text-decoration: none;
	  color : #5b5b5b;
	  font-size: 10px;
	}

}