/* Small resolutions */
@media screen and (max-width: 63em) {
	/*Basic Layout*/
	#interface {
		width: 97.959%;
		margin-left:1.0705%;
		margin-right:1.0705%;
	}
	
	/*Page techniques*/
	.left {
		font-size:0.9em;
	}
	.left ol {
		font-size:1.1em;
	}
	
	/*Pages galleries*/
	#gallerybig {
		width:70%;
	}
	#imagewrap {
		width:96%;
		height:auto;
		max-width:96%;
	}
	#imagewrap.height img {
		height:auto;
	}
	.thumbnails {
		width:25%;
	}
	.thumb, .thumb div, .thumb:hover, .thumb:hover div, #selected.thumb, #selected.thumb div {
		border:none;
		padding:0px;
	}
	.thumb {
		width:46.6%;
		background-color:inherit;
	}
	.endgallery {
		margin-bottom:3em;
	}
}

/* Mobile devices */
@media screen and (max-width: 780px) {
	
	/*Basic Layout*/
	#interface {
		width: 100%;
		margin:0px;
	}
	#nav {
		width:100%;
		margin:auto;
		margin-bottom:1.5em;
		padding:0px;
	}
	#nav li a {
		margin-top:0.5em;
	}
	#nav li {
		height:2em;
		padding:0%;
		margin:auto;
		width:50%;
		float:left;
		border:none;
		border-width:0px;
	}
	#banner {
		width:90%;
	}
	#banner p {
		font-size:0.7em;
		width:50%;
		height:80px;
		margin:0;
		line-height:80%;
		text-align:left;
		text-indent:0;
		position:absolute;
		left:135px;
		top:45px;
		bottom:0;
	}
	#language .name_language {
		display:none;
	}
	#language {
		right:1em;
		width:30px;
	}
  
	/*Menu behaviour for touch screens*/
	#nav .notlink a {
		cursor: pointer;
	}
	#nav .notlink a:hover {
		color: #FFFF00;
	}
	
	#nav li:hover .MenuLv2,  #nav li.sfhover .MenuLv2 {
		display:none;
	}
	#nav li li:hover .MenuLv3, #nav li li.sfhover .MenuLv3 {
		display:none;
	}
	
	/*Page techniques*/
	.right, .left {
		float:none;
		width:98%;
		margin:auto;
		margin-bottom:1em;
		border-bottom:thin dotted #55E;
	}
	
	.left ol {
		text-align:center;
		font-size:1.2em;
		margin-top:2em;
		margin-bottom:2em;
	}
	.right ul h2 {
		margin-left:-1em;
	}
	
	/*Page Expédition*/
	#tarifsmse {
		width: 100%;
		margin-left:-25px;
	}
	.prixmse {
		float:none;
	}
	
	/*Page Clients*/
	.client {
		height:auto;
		margin-bottom:30px;
	}
	.linkimage {
		float:none;
		height:auto;
		margin:auto;
		width:auto;
	}
	.linktext {
		margin-top:4px;
		float:none;
		width:auto;
		height:auto;
		text-align:center;
	}
	.clienttext {
		position:relative;
		transform:none;
	}
	.linkimage img {
		float:none;
		margin:auto;
		display:block;
	}
	
	/*Page tarifs*/
	#currency {
		font-size:0.9em;
		display:inline-block;
		position:static;
		width:12em;
		float:none;
	}
	#currency p {
		float:left;
		width:auto;
	}
	#currency li {
		padding:0;
	}
	.tarifs3col {
		width:100%;
		margin-top:0;
	}
	.tarifs5col {
		width:100%;
	}
	#tarifs ul.tarifs {
		height:auto;
		clear:none;
		border:none;
		padding:0;
	}
	.produit {
		margin-top:2em;
		border:none;
		padding:0;
	}
	.produit div {
		padding:0.2em;
	}
	.volume {
		float:left;
		width:50%;
	}
	.prix {
		float:right;
		width:50%;
	}
	#tarifs ul.col3 li {
		float:none;
		width:auto;
		padding:0.15em;
	}
	#tarifs ul.col5 li {
		float:none;
		width:auto;
		padding:0.15em;
	}
	#tarifs ul.col7 li {
		float:none;
		width:auto;
		padding:0.15em;
	}
  
  /*Page nuancier*/
  	#nuancier {
		width:90%;
		margin:auto
	}
	#nuancier .row {
		display:block;
		margin:auto;
		width:100%;
		margin-bottom:2%;
	}
	 #nuancierfluo {
		width:90%;
		margin:auto
	}
	#nuancierfluo .row {
		display:block;
		margin:auto;
		width:100%;
		margin-bottom:2%;
	}
	.color_name {
		width:40%;
	}
	.mobile {
		display:none;
	}
	.dilution {
		margin-top:4%;
		margin-bottom:-4%;
	}
	/*Page gallerie clients*/
	.gallerycategory {
		float:none;
		margin:auto;
		height:auto;
		width:80%;
	}
	.gallerycategory img {
		max-width:196px;
	}
	
	/*Pages galleries*/
	#gallerybig {
		float:none;
		margin:auto;
		height:auto;
		width:90%;
	}
	.thumbnails {
		max-width:290px;
		width:90%;
		height:520px;
		float:none;
		margin:auto;
		margin-bottom:2em;
	}
	.rows2 {
		margin-bottom:-14em;
	}
	.rows3 {
		margin-bottom:-10em;
	}
	.rows4 {
		margin-bottom:-2em;
	}
	.rows5 {
		margin-bottom:6em;
	}
	.thumb {
		height:19%;
		width:49%;
		margin:0;
	}
	.thumb:hover {
		height:19%;
		width:49%;
		margin:0;
	}
	.thumb div:hover {
	
	}
	#selected .thumb {
		height:19%;
		width:49%;
		margin:0;
	}
	.thumbimage img {

	}
	
	/*Page astuces*/
	.list li {
	margin-left:-1em;
}

/* Ultra narrow screen */
@media screen and (max-width: 300px) {
	.thumbnails {
		overflow:auto;
	}
	.rows2, .rows3, .rows4, .rows5 {
		margin-bottom:-2em;
	}
	#banner img {
		display:none;
	}
	#banner p {
		line-height:110%;
		top:20px;
		left:10%;
		text-indent:10%;
	}
}