.ralentisseurs{
    padding: 0 2%;
}

.ralentisseurs h1{
    color: #09c;
    font-weight: bold;
    margin: 20px 0;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    padding: 2%;
    text-align: center;
}
    
.ralentisseurs p{
    font-size: 20px;
}

.ralentisseurs li{
    font-size: 20px;
    font-weight: bold;
}

.non-conforme{
    display: grid;
    grid-template-columns: 27.5% 67.5%;
    grid-gap: 5%;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    font-size: 20px;
}

.non-conforme h2{
    color: #b10303;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    margin: 0;
}

.non-conforme p{
    margin-bottom: 35px;
}

.B-C-gris{
    background-color: #ededed;
    padding-top: 30px;
}

.MarginAuto{
    margin: auto;
}

/************ CAROUSEL **********/

#carousel {
  height: 300px;
  overflow: hidden; 
}

#carousel div {
    position: absolute;
    transition: transform 1s, left 1s, opacity 1s, z-index 0s;
    opacity: 1; 
}

#carousel div img {
    width: 400px;
    transition: width 1s; 
}
    
#carousel div.hideLeft {
    left: 0%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%); 
}

#carousel div.hideLeft img {
    width: 200px; 
}
    
#carousel div.hideRight {
    left: 100%;
    opacity: 0;
    transform: translateY(50%) translateX(-50%); 
}
    
#carousel div.hideRight img {
    width: 200px; 
}

#carousel div.prev {
    z-index: 5;
    left: 30%;
    transform: translateY(50px) translateX(-50%); 
}
      
#carousel div.prev img {
    width: 300px; 
}
    
#carousel div.prevLeftSecond {
    z-index: 4;
    left: 15%;
    transform: translateY(50%) translateX(-50%);
    opacity: .7; 
}
      
#carousel div.prevLeftSecond img {
    width: 200px; 
}

#carousel div.selected {
    z-index: 10;
    left: 50%;
    transform: translateY(0px) translateX(-50%); 
}
    
#carousel div.next {
    z-index: 5;
    left: 70%;
    transform: translateY(50px) translateX(-50%); 
}
      
#carousel div.next img {
    width: 300px; 
}
    
#carousel div.nextRightSecond {
    z-index: 4;
    left: 85%;
    transform: translateY(50%) translateX(-50%);
    opacity: .7; 
}

#carousel div.nextRightSecond img {
    width: 200px; 
}

#carouselRemplacement{
	display: none;
}

/************ CONFORME AUX NORMES **********/

.conforme{
    display: grid;
    grid-template-columns: 30% 70%;
    grid-gap: 5%;
    max-width: 1200px;
    margin: auto;
    font-size: 20px;
    align-items: center;
    margin-bottom: 75px;
}

.conforme h2{
    color: #339933;
    font-family: 'Bebas Neue', cursive;
    font-size: 50px;
    margin: 0;
}

.conformes-normes hr{
    margin: 50px;
}

.presentation-conforme{
  display: grid;
  grid-template-columns: 30% 1fr;
  margin-bottom: 35px;
  grid-gap: 5%;
}

.conformes-normes h3{
    font-weight: bold;
    font-size: 27px;
}

.conformes-normes h4{
    font-size: 23px;
    font-weight: bold;
}

#rgpd_ralentisseur input{
	width: auto;
}

#rgpd_ralentisseur {
	font-size: 14px;
}


@media only screen and (max-width: 900px) {

    #carousel {
    	display: none;
	}

	#carouselRemplacement{
		display: block;
		width: 80%;
		margin: 25px auto;
	}

	.non-conforme, .presentation-conforme, .conforme {
 		display: flex;
    	flex-direction: column;
	}

	#BRnon-conforme, #BRconforme{
		display: none;
	}

	.non-conforme h2, .conforme h2{
	    margin: 0 0 20px ;
	}

	.non-conforme p{
	    padding: 2%;
	}

	.presentation-conforme img{
		margin: auto;
	}

	.B-C-gris{
	    padding-bottom: 30px;
	}

}