#intro {
	background: #f7e17c;
	padding: 65px 40px 50px 40px;
	margin: 0 auto;
	display: grid;
}

@media (max-width: 575px) {
	#intro {
		grid-template-columns:10% 90%;
	}
		.texteFixe, #listeMots {
  		font-size:20px;
	}
	
		#listeMots li {
	grid-template-columns:100%;
	}
	
	#listeMots li img {
		display: none;
	}
	.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 20px;
	}
}


@media (min-width: 576px) {
	#intro {
		grid-template-columns:10% 90%;
	}
		.texteFixe, #listeMots {
  		font-size:24px;
	}
	
		#listeMots li {
	grid-template-columns:75% 25%;
	}
	
	
	.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 30px;
	}
}

@media (min-width: 768px) {
	#intro {
		grid-template-columns:10% 90%;
	}
		.texteFixe, #listeMots {
  		font-size:30px;
	}
	
		#listeMots li {
	grid-template-columns:75% 25%;
	}
	.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 40px;
	}
}

@media (min-width: 992px) {
	#intro {
		grid-template-columns:10% 90%;
	}
		.texteFixe, #listeMots {
  		font-size:45px;
	}
	
		#listeMots li {
	grid-template-columns:80% 20%;
	}
		.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 50px;
	}
}

@media (min-width: 1200px) {
	#intro {
		grid-template-columns:15% 85%;
	}
	
	.texteFixe, #listeMots {
  		font-size:60px;
	}
		#listeMots li {
	grid-template-columns:80% 20%;
	}
		.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 60px;
	}
}

@media (min-width: 1400px) {
	#intro {
		grid-template-columns:25% 75%;
	}
	
	.texteFixe, #listeMots {
  		font-size:60px;
	}
	
	#listeMots li {
	grid-template-columns:80% 20%;

	}
	
		.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 60px;
	}
}

@media (min-width: 1700px) {
	#intro {
		grid-template-columns:30% 70%;
	}
	
	.texteFixe, #listeMots {
  		font-size:60px;
	}
	
	#listeMots li {
	grid-template-columns:80% 20%;

	}
	
	
	.texteFixe, #listeMots, #flipImage, #listeMots li img, #flip {
		height: 60px;
	}

}
.texteFixe {
  color:#fff;
  font-weight: bold;
  text-transform: uppercase;
  margin:0;
  padding:0;
  padding-right: 20px;
  justify-self:end;
}

#flip {
  overflow:hidden;
  position:relative;
}

#listeMots {
  position: absolute;
  color:#000; 
  animation: defil 7s linear infinite;
  list-style: none;
  text-transform: uppercase;
  margin:0;
  padding:0;
}

#flipImage {
  overflow:hidden;
  position:relative;
}

#listeMots {
	width:100%;
}

#listeMots li {
	display: grid;
	justify-items: start;
	align-items: start;
}

#listeMots li img {
	justify-self:start;
}


@keyframes defil {
  0% {top:0px;}
  28% {top:0px;}
  33% {top:-100%;}
  61% {top:-100%;}	
  66% {top:-200%;}	
  95% {top:-200%;}	
  100% {top:-0px;}	
}