.carousel {
		/* display: block;*/ 
		/*position: absolute;*/ 
		position: relative; 
		/*-webkit-transform: translateZ(0);*/
		  /*  for demo only */
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		/*margin: auto;*/ 
		margin-left:auto;
		margin-right:auto;
		font-size: 0;
		background: white;
		padding: 8px;
		border-radius: 6px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
		  /********************/		
		 -webkit-overflow-scrolling: touch;
		 /* for tablets */ 
	}
	.touch .carousel {
		overflow: auto; 
	}
	.carousel:before, .carousel:after {
		content: '';
		opacity: 0;
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 2;
		width: 50px;
		font-size: 80px;
		line-height: 190px;
		font-family: arial;
		color: #555;
		font-weight: bold;
		pointer-events: none;
		transition: 0.2s ease-out; 
	}
		/* Fleche */
	 .carousel:before {
		content: '\2039';
		left: 0;
		text-align: left;
		text-indent: -20px;
		box-shadow: 50px 0 20px -20px #EEE inset; 
	}
	.carousel:after {
		content: '\203A';
		right: 0;
		text-align: right;
		text-indent: 40px;
		box-shadow: -50px 0 20px -20px #EEE inset; 
	}
	.carousel1.right:after, .carousel1.left:before {
		opacity: 1; 
	}
	.carousel1.right:after {
		right: 0;
		text-indent: 60px; 
	}
	.carousel1.left:before {
		left: 0;
		text-indent: -40px; 
	}
	.carousel > a {
		position: absolute;
		margin: 0;
		top: 0;
		bottom: 0;
		color: #CCC;
		font-size: 1.5em;
		transition: 0.1s; 
	}
	.carousel > a:hover {
		  color: #FFF; 
	}
	.carousel > a.prev {
		  left: -20px; 	
        }
	.carousel > a.next {
		  right: -20px; 
	}
	.carousel > .indicator {
		pointer-events: none;
		position: absolute;
		z-index: 4;
		bottom: 0;
		left: 0;
		background: #D82B6A;
		height: 4px;
		border-radius: 10px;
		opacity: 0;
		transition: opacity 0.2s, bottom 0.2s; 
	}
	.carousel:hover > .indicator {
		opacity: 1;
		bottom: -10px;
	}
	.carousel > .wrap {
		overflow: hidden;
		border-radius: 5px; 
	}
	.carousel > .wrap > ul {
		  list-style: none;
		  white-space: nowrap;
	}
	.carousel > .wrap > ul > li {
			display: inline-block;
			vertical-align: middle;
			margin: 0 0 0 5px;
			position: relative;
			overflow: hidden;
			transition: 0.25s ease-out; 
	}
	.carousel > .wrap > ul > li:first-child {
			  margin: 0; 
	}
	.carousel > .wrap > ul > li > img {
			  display: block;
			  margin: auto;
			  vertical-align: bottom;
			  position: relative;
			  z-index: 1;
			  transition: 1s ease; 
	}
	.carousel {
		width: 55%;
		height:320px;
		min-width: 570px;
	}
	.carousel > .wrap > ul {
		  height:320px; 
	}
	.carousel > .wrap > ul > li > img {
			  height: 93%;
	}
	.carousel > .wrap > ul > li {
		height: 100%;
	}
	@media (max-width: 767px) {	
		.carousel {
			width: 95%;
			height:120px;
			min-width: 98%;
		}		
		.carousel > .wrap > ul {
			  height:120px;
		}
		.carousel > .wrap > ul > li > img {
			 height: 95%;
		}
		.carousel > .wrap > ul > li {
			height: 95%;
		}
	
	}