@font-face {
    font-family: 'LOREAL_PRO';
    src: url(fonts/LOREAL_PRO-2-Book.woff2) format('woff2'),
        url(fonts/LOREAL_PRO-2-Book.woff) format('woff'),
        url(fonts/LOREAL_PRO-2-Book.ttf) format('truetype'),
		url(fonts/LOREAL_PRO-2-Book.svg#LOREAL_PRO-2-Book) format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LOREAL_PRO';
    src: url(fonts/LOREAL_PRO-3-Medium.woff2) format('woff2'),
        url(fonts/LOREAL_PRO-3-Medium.woff) format('woff'),
        url(fonts/LOREAL_PRO-3-Medium.ttf) format('truetype'),
		url(fonts/LOREAL_PRO-3-Medium.svg#LOREAL_PRO-3-Medium) format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LOREAL_PRO';
    src: url(fonts/LOREAL_PRO-4-SemiBold.woff2) format('woff2'),
        url(fonts/LOREAL_PRO-4-SemiBold.woff) format('woff'),
        url(fonts/LOREAL_PRO-4-SemiBold.ttf) format('truetype'),
		url(fonts/LOREAL_PRO-4-SemiBold.svg#LOREAL_PRO-4-SemiBold) format('svg');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LOREAL_PRO';
    src: url(fonts/LOREAL_PRO-5-Bold.woff2) format('woff2'),
        url(fonts/LOREAL_PRO-5-Bold.woff) format('woff'),
        url(fonts/LOREAL_PRO-5-Bold.ttf) format('truetype'),
		url(fonts/LOREAL_PRO-5-Bold.svg#LOREAL_PRO-5-Bold) format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
html {
    -webkit-text-size-adjust: 100%;
}
p#loreal-arm {
    font-family: 'LOREAL_PRO';
    font-size: 23px;
	line-height: 25px;
    letter-spacing: 0.3px;
    color: #000000;
	font-weight: 500;
    font-style: normal;
}	
@media screen and (min-width: 768px) and (max-width: 991px) {	
  p#loreal-arm {
    font-size: 20px;
	line-height: 22px;
  }
}
@media screen and (max-width: 767px) {	
  p#loreal-arm {
    font-size: 17px;
  }
}
h2#loreal-arm {
    font-family: 'LOREAL_PRO';
    font-size: 29px;
	line-height: 29px;
    color: #ffffff;
    letter-spacing: 0.5px;
    font-weight: bold;
    font-style: normal;
	margin-bottom: 0;
	margin-top: 0;
}
@media screen and (min-width: 768px) and (max-width: 991px) {	
  h2#loreal-arm {
    font-size: 27px;
	line-height: 27px;
  }
}
@media screen and (max-width: 767px) {	
  h2#loreal-arm {
     font-size: 25px;
     line-height: 25px;
  }
}
h3#loreal-arm {
    font-family: 'LOREAL_PRO';
    font-size: 36px;
	line-height: 40px;
    color: #000000;
    letter-spacing: 0.5px;
    font-weight: bold;
    font-style: normal;
	margin-top: 0;
	margin-bottom: 15px;
}
@media screen and (min-width: 768px) and (max-width: 991px) {	
  h3#loreal-arm {
    font-size: 34px;
	line-height: 38px;
  }
}
@media screen and (max-width: 767px) {	
  h3#loreal-arm {
     font-size: 32px;
     line-height: 36px;
  }
}	
h5#loreal-arm {
    font-family: 'LOREAL_PRO';
    font-size: 9px;
	line-height: 13px;
    color: #000000;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-style: normal;
	margin-bottom: 5px;
}

#loreal-arm sup {
	font-size: 0.6em;
}

#loreal-arm-container {
   background-color: #fff;
   color: #000;
   max-width: 945px;
   margin: 0 auto;
   text-align: center;
}
.loreal-arm-empty-space {
	padding: 1% 0;
}
.loreal-arm-btn {
	position: absolute;
    transform: translateX(-50%);
    bottom: -15px;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    font-family: 'LOREAL_PRO';
    font-weight: bold;
    font-style: normal;
    text-transform: uppercase;
    font-size: 19px;
    line-height: 22px;
    padding: 4px 12px;
    border-radius: 0;
    border: none;
    white-space: nowrap;
    letter-spacing: 1px;
    margin: 0;
    text-decoration: none;
    width: max-content;
}
.loreal-arm-btn:hover {
	color: #fff;
	background-color: #000000;
}
.loreal-arm-btn:focus {
	color: #fff;
	text-decoration: none;
}
img.loreal-arm {
	max-width: 100%;
    margin: 0 auto;
}
video#loreal-arm {
    max-width: 100%;
	width: 100%;
	cursor: pointer;
	object-fit: cover;
	display: block;
}
@media screen and (max-width: 767px) {	
    .loreal-arm-desktop-show {
		display: none !important;
    }
	.loreal-arm-mobile-show {
		display: block !important;
		text-align: center;
    }
}
@media screen and (min-width: 768px) {	
    .loreal-arm-mobile-show {
		display: none !important;
    }
}

/* TITLE */
#loreal-arm-title {
	background-image: url(media/loreal-arm-title-background.jpg);
	background-size: cover;
    background-position: left center;
	background-repeat: no-repeat;
	min-height: 105px;
	align-content: center; 
}
/* INTRO */
#loreal-arm-intro-l1 {
   display: flex;
	width: 100%;
	justify-content: space-around;
	text-align: left;
}
#loreal-arm-intro-l1-col-1 {
    width: 50%;
}
#loreal-arm-intro-l1-col-2 {
    width: 50%;
	background-image: url(media/loreal-arm-intro-l1-bg.jpg);
	background-size: contain;
    background-position: right center;
	background-repeat: no-repeat;
	padding: 3.5% 2% 0 2%;
	position: relative;
}
#loreal-arm-intro-l1-col-2 h3#loreal-arm {
	padding-bottom: 7%;
}
#loreal-arm-intro-l1-col-2 p#loreal-arm {
	padding-bottom: 5%;
}
#loreal-arm-intro-l1-col-2 h5#loreal-arm {
	position: absolute;
	left: 3.7%;
	bottom: 5%;
}
@media screen and (min-width: 768px) and (max-width: 991px) {	
	#loreal-arm-intro-l1-col-2 h3#loreal-arm {
		padding-bottom: 5%;
	}
	#loreal-arm-intro-l1-col-2 p#loreal-arm {
		padding-bottom: 3%;
	}
}
@media screen and (max-width: 767px) {	
    #loreal-arm-intro-l1 {
        display: block;
    }
	#loreal-arm-intro-l1-col-1, #loreal-arm-intro-l1-col-2 {
        width: 100%;
		text-align: left;
    }
    #loreal-arm-intro-l1-col-2 {
        padding: 4% 3%;
    }		
	#loreal-arm-intro-l1-col-2 h3#loreal-arm , #loreal-arm-intro-l1-col-2 p#loreal-arm {
		padding-bottom: 2%;
	}
	#loreal-arm-intro-l1-col-2 h5#loreal-arm {
		position: relative;
        left: 0;
	}
}
#loreal-arm-intro-l2 {
   display: flex;
	width: 100%;
	justify-content: space-around;
	text-align: left;
}
#loreal-arm-intro-l2-col-1 {
    width: 50%;
	background-image: url(media/loreal-arm-intro-l2-bg.jpg);
	background-size: cover;
    background-position: right center;
	background-repeat: no-repeat;
	padding: 8% 1% 0 5%;
	position: relative;
}
#loreal-arm-intro-l2-col-1 span#loreal-arm-tech {
	color: #000000;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #ffffff;	
	padding: 0 5px;
}
#loreal-arm-intro-l2-col-1 h3#loreal-arm {
	font-size: 33px;
	line-height: 40px;
	color: #ffffff;
}
#loreal-arm-intro-l2-col-1 p#loreal-arm {
	color: #ffffff;
	font-weight: 400;
}
#loreal-arm-intro-l2-col-1 span#loreal-arm-phases {
	position: absolute;
	right: 3%;
	bottom: 6%;
	border-left: 1px solid #ffffff;
	padding-left: 10px;
}
#loreal-arm-intro-l2-col-2 {
    width: 50%;
	
}
@media screen and (min-width: 768px) and (max-width: 991px) {	
	#loreal-arm-intro-l2-col-1 {
		padding: 3% 1% 5% 3%;
	}
	#loreal-arm-intro-l2-col-1 span#loreal-arm-phases {
		bottom: 3%;
	}
}	
@media screen and (max-width: 767px) {	
    #loreal-arm-intro-l2 {
        display: block;
    }
	#loreal-arm-intro-l2-col-1, #loreal-arm-intro-l2-col-2 {
        width: 100%;
    }
	#loreal-arm-intro-l2-col-1 {
        padding: 4% 4%;
	}
	#loreal-arm-intro-l2-col-1 span#loreal-arm-phases {
		position: relative;
		display: block;
		left: 0;
	}
}


/* CRASH TESTS */
#loreal-arm-crash-tests {
   display: flex;
	width: 100%;
	justify-content: space-around;
	text-align: left;
}
#loreal-arm-crash-tests-col-1 {
    width: 50%;
}
#loreal-arm-crash-tests-col-2 {
    width: 50%;
}
@media screen and (max-width: 767px) {	
    #loreal-arm-crash-tests {
        display: block;
    }
	#loreal-arm-crash-tests-col-1, #loreal-arm-crash-tests-col-2 {
        width: 100%;
		text-align: center;
    }
}

/* NOTES */
#loreal-arm-notes {
   display: flex;
	width: 100%;
	justify-content: space-around;
	text-align: left;
}
#loreal-arm-notes-col-1 {
    width: 33%;
	align-content: end;
}
#loreal-arm-notes-col-2 {
    width: 67%;
	text-align: center;
	position: relative
}
#loreal-arm-notes-col-2 span#loreal-arm-note-bergamote {
    position : absolute;	
	left : 5%;
	top : 37%;
	border-bottom: 1px solid #000000;
	font-weight: 600;
	text-align: left;
	padding-right: 4.5%; 
    padding-bottom: 5px;	
}
#loreal-arm-notes-col-2 span#loreal-arm-note-vanille {
    position : absolute;	
	right : 9%;
	top : 28%;
	border-bottom: 1px solid #000000;
	font-weight: 600;
	text-align: right;
	padding-left: 5%;  
	padding-bottom: 5px;
}
#loreal-arm-notes-col-2 span#loreal-arm-note-fleur {
    position : absolute;	
	right : 9%;
	top : 70%;
	border-top: 1px solid #000000;
	font-weight: 600;
	text-align: right;
	padding-left: 5%;  
	padding-top: 5px;
}
@media screen and (min-width: 768px) and (max-width: 910px) {	
	#loreal-arm-notes-col-2 span#loreal-arm-note-bergamote {
        left: 2%;
        line-height: 19px;
        top: 41%;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-vanille {
 	   right: 2%;
	   line-height: 19px;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-fleur {
        right: 2%;
		line-height: 19px;
	}
}
@media screen and (max-width: 767px) {	
    #loreal-arm-notes {
        display: block;
    }
	#loreal-arm-notes-col-1, #loreal-arm-notes-col-2 {
        width: 100%;
    }
	#loreal-arm-notes-col-2 {
        padding: 0 15%;
    }
}
@media screen and (max-width: 601px) and (max-width: 767px) {		
	#loreal-arm-notes-col-2 span#loreal-arm-note-bergamote {
        left: 7%;
        line-height: 19px;
        top: 40%;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-vanille {
 	   right: 10%;
 	   top: 30%;
	   line-height: 19px;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-fleur {
        right: 10%;
		line-height: 19px;
	}
}
@media screen and (max-width: 550px) and (max-width: 600px) {		
	#loreal-arm-notes-col-2 span#loreal-arm-note-bergamote {
        left: 4%;
        line-height: 19px;
        top: 40%;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-vanille {
 	   right: 6%;
 	   top: 30%;
	   line-height: 19px;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-fleur {
        right: 6%;
		line-height: 19px;
	}
}
@media screen and (max-width: 550px) {		
	#loreal-arm-notes-col-2 span#loreal-arm-note-bergamote {
        left: 2%;
        line-height: 19px;
        top: 40%;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-vanille {
 	   right: 2%;
 	   top: 30%;
	   line-height: 19px;
	}
	#loreal-arm-notes-col-2 span#loreal-arm-note-fleur {
        right: 2%;
		line-height: 19px;
	}
}

/* PRODUITS */
#loreal-arm-produits {
   display: flex;
	width: 100%;
	justify-content: space-around;
	text-align: left;
}
#loreal-arm-produits-col {
    width: 25%;
	height: 237px;
	padding: 1%;
	position: relative;
}
#loreal-arm-produits p#loreal-arm {
	font-size: 18px;
	line-height: 18px;
}
#loreal-arm-produits-col:nth-child(1) {
	background-image: url(media/loreal-arm-shampoing.jpg);
	background-size: contain;
    background-position: right bottom;
	background-repeat: no-repeat;
}
#loreal-arm-produits-col:nth-child(2) {
	background-image: url(media/loreal-arm-serum.jpg);
	background-size: contain;
    background-position: right bottom;
	background-repeat: no-repeat;
}
#loreal-arm-produits-col:nth-child(3) {
	background-image: url(media/loreal-arm-masque.jpg);
	background-size: contain;
    background-position: right bottom;
	background-repeat: no-repeat;
}
#loreal-arm-produits-col:nth-child(4) {
	background-image: url(media/loreal-arm-huile.jpg);
	background-size: contain;
    background-position: right bottom;
	background-repeat: no-repeat;
}
#loreal-arm-produits span#loreal-arm-produits-etape {
	position: absolute;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	background-color: #000000;
	border-radius: 15px;
	padding: 4px 16px 6px;
	left: 9%;
	bottom: 5%;
}

@media screen and (max-width: 767px) {	
    #loreal-arm-produits {
        display: block;
    }
	#loreal-arm-produits-col {
        width: 100%;
		padding: 7% 5%;
		max-width: 550px;
		margin: 0 auto 5%;
    }
}

	
/* NOTRE ENGAGEMENT */
#loreal-arm-engagement {
	background-image: url(media/loreal-arm-engagement.jpg);
	background-size: cover;
    background-position: right center;
	background-repeat: no-repeat;
	text-align: left;
	padding: 3% 5%;
}
#loreal-arm-engagement-inner {
   display: flex;
	width: 100%;
	justify-content: space-around;
	padding: 1% 0;
}
#loreal-arm-engagement-inner p#loreal-arm {
	display: inline-flex;
	align-items: center;
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	max-width: 280px;
}

#loreal-arm-engagement-inner img.loreal-arm {
	height: 100%;
	padding: 5px;
}
#loreal-arm-engagement-col-1 {
    width: 50%;
	text-align: left;
}
#loreal-arm-engagement-col-1 p#loreal-arm {
	justify-self: start;
}
#loreal-arm-engagement-col-2 {
    width: 50%;
	text-align: right;
	position: relative;
}
#loreal-arm-engagement-col-2 p#loreal-arm {
	justify-self: end;
}
#loreal-arm-engagement-col-2 h5#loreal-arm {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: left;
    max-width: 240px;
}

@media screen and (min-width: 768px) {	
	img.loreal-arm#loreal-arm-engagement-mobile {
		display: none;
	}
}
@media screen and (max-width: 767px) {	
    #loreal-arm-engagement{
		padding: 8% 3%;
	    background-image: none;
    }
	#loreal-arm-engagement-inner{
        display: block;
		text-align: center;
    }
	#loreal-arm-engagement-col-1, #loreal-arm-engagement-col-2 {
        width: 100%;
		padding: 3%;
    }
	#loreal-arm-engagement-col-2 h5#loreal-arm {
		position: relative;
		max-width: none;
        padding-top: 5%;
	}
	#loreal-arm-engagement-col-1 {
        max-width: 450px;
	}	
	#loreal-arm-engagement-col-2 {
        max-width: 580px;
    	margin-left: auto;
	}
}