/* Style pour les écrans plus petits que 800 pixels */
@media all and (max-width: 800px){
	@viewport{
		width:device-width;
	}
	
	#titre{
	  font-size:0.7em;
	  text-align:center;
	  font-family:Roboto;
	}
	
	h1{
		text-decoration:underline;
		font-family:Roboto;
	}
	
	.list {
	  font-family:Roboto;
	  width:100%;
	  
	 
	  
	}
	
	box{
	width:100%;	
		}
	
	
	td, th {
	  padding:4px; 
	  border:solid 1px #eee;
	}
	
	th{
		background-color:black;
		color:white;
	}

	input {
	  border:solid 1px #ccc;
	  border-radius: 5px;
	  padding:7px 7px;
	  margin-bottom:10px
	}
	input:focus {
	  outline:none;
	  border-color:#aaa;
	}
	.sort {
	  padding:8px 10px;
	  border-radius: 6px;
	  border:none;
	  display:inline-block;
	  color:#fff;
	  text-decoration: none;
	  background-color: #28a8e0;
	  height:30px;
	  margin-right:1px;
	  margin-bottom:1px;
	}
	.sort:hover {
	  text-decoration: none;
	  background-color:#1b8aba;
	}
	.sort:focus {
	  outline:none;
	}
	.sort:after {
	  display:inline-block;
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid transparent;
	  content:"";
	  position: relative;
	  top:-10px;
	  right:-5px;
	}
	.sort.asc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-top: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:4px;
	  right:-5px;
	}
	.sort.desc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:-4px;
	  right:-5px;
	}
	.start, .end, .cylindre, .moteur, .cacheMobile{
	  display:none;
	}
}

/* Style pour les écrans plus petits que 550 pixels */
@media all and (max-width: 550px){
	@viewport{
		width:device-width;
	}
	.list {
	  font-family:Roboto;
	  font-size:0.8em;
	  width:100%;
	}
	td, th {
	  padding:4px; 
	  border:solid 1px #eee;
	}
	
	th{
		font-size:0.6em;
		background-color:black;
		color:white;
	}

	input {
	  border:solid 1px #ccc;
	  border-radius: 5px;
	  padding:7px 7px;
	  margin-bottom:10px
	}
	input:focus {
	  outline:none;
	  border-color:#aaa;
	}
	.sort {
	  border-radius: 6px;
	  border:none;
	  display:inline;
	  color:#fff;
	  text-decoration: none;
	  background-color: #28a8e0;
	  height:30px;
	  font-size:0.7em;
	  margin-bottom:1px;
	}
	.sort:hover {
	  text-decoration: none;
	  background-color:#1b8aba;
	}
	.sort:focus {
	  outline:none;
	}
	.sort:after {
	  display:inline-block;
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid transparent;
	  content:"";
	  position: relative;
	  top:-10px;
	  right:-5px;
	}
	.sort.asc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-top: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:4px;
	  right:-5px;
	}
	.sort.desc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:-4px;
	  right:-5px;
	}
	.start, .end, .cylindre, .moteur, .conseil, .cacheMobile, .cachePetitMobile{
	  display:none;
	}
	h1{
		text-decoration:underline;
		font-family:Roboto;
	}
}

/* Style pour les écrans plus grands que 800 pixels */
@media all and (min-width: 801px){
	#titre{
	  text-align:center;
	  font-family:Roboto
	}
	h1{
		text-decoration:underline;
		font-family:Roboto
	}
	.list {
	  font-family:Roboto;
	  width:100%;
	}
	td, th {
	  padding:4px; 
	  border:solid 1px #eee;
	}
	
	th{
		background-color:black;
		color:white;
	}

	input {
	  border:solid 1px #ccc;
	  border-radius: 5px;
	  padding:7px 7px;
	  margin-bottom:10px
	}
	input:focus {
	  outline:none;
	  border-color:#aaa;
	}
	.sort {
	  padding:8px 10px;
	  border-radius: 6px;
	  border:none;
	  display:inline-block;
	  color:#fff;
	  text-decoration: none;
	  background-color: #28a8e0;
	  height:30px;
	}
	.sort:hover {
	  text-decoration: none;
	  background-color:#1b8aba;
	}
	.sort:focus {
	  outline:none;
	}
	.sort:after {
	  display:inline-block;
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid transparent;
	  content:"";
	  position: relative;
	  top:-10px;
	  right:-5px;
	}
	.sort.asc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-top: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:4px;
	  right:-5px;
	}
	.sort.desc:after {
	  width: 0;
	  height: 0;
	  border-left: 5px solid transparent;
	  border-right: 5px solid transparent;
	  border-bottom: 5px solid #fff;
	  content:"";
	  position: relative;
	  top:-4px;
	  right:-5px;
	}
}

/* Style pour les écrans plus grands que 800 pixels */
@media all and (min-width: 1050px){
	body{
		margin-left:10%;
		margin-right:10%;
	}
}