@charset "utf-8";
/* CSS Document */

#defile-des-marques {
    --defile-height: 150px;
    --img-width: 150px;
    --img-separation: 20px;
    --img-padding-y: 5px;
    
    width: 100%;
    overflow: hidden;
}

.md-col-fullwidth {
   padding: 0px 5px 10px 5px;
}

#defile-des-marques #defile-zone {
  height: calc(var(--defile-height) + var(--img-padding-y) * 2);
  position: relative;
  background-color: white;
	overflow: hidden;
	width: 120%;
}


#defile-des-marques li img:hover {
    box-shadow: 0 0 5px #888888;
    opacity: 1;
}
@media (min-width: 1200px){
	#defile-des-marques #defile-zone::before,
	#defile-des-marques #defile-zone::after {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		height: 100%;
		width: 200px;
		background-color: transparent;
		z-index: 10;
	}
	#defile-des-marques #defile-zone::before {
		left: 0;
		background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	}
	#defile-des-marques #defile-zone::after {
		left: calc(100% * 5 / 6 - 200px); /* 5/6 x 120% = 100% */
		background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
		background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	}
}
#defile-des-marques li {
    height: var(--defile-height);
    margin-top: var(--img-padding-y);
    margin-bottom: var(--img-padding-y);
    display: block;
    float: left;
}

#defile-des-marques li img {
    height: var(--defile-height);
    width: var(--img-width);
    margin: 0 calc(var(--img-separation) / 2);
    object-fit: contain;
    opacity: 0.9;
}