@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#vitamino-color-spectrum {
    font-family: 'LOREAL_PRO';
    font-size: 18px;
	line-height: 22px;
    letter-spacing: 0;
    color: #000000;
	font-weight: normal;
    font-style: normal;
}	
@media screen and (max-width: 767px) {	
  p#vitamino-color-spectrum {
    font-size: 16px;
  }
}
h2#vitamino-color-spectrum {
    font-family: 'LOREAL_PRO';
    font-size: 57px;
	line-height: 55px;
    color: #5e1020;
    letter-spacing: 0;
    font-weight: bold;
    font-style: normal;
	margin-bottom: 15px;
	margin-top: 0;
}
@media screen and (max-width: 767px) {	
  h2#vitamino-color-spectrum {
     font-size: 54px;
     line-height: 52px;
  }
}
h3#vitamino-color-spectrum {
    font-family: 'LOREAL_PRO';
    font-size: 25px;
	line-height: 29px;
    color: #000000;
    letter-spacing: 1px;
    font-weight: bold;
    font-style: normal;
	margin-top: 0;
	margin-bottom: 10px;
}
@media screen and (max-width: 767px) {	
  h3#vitamino-color-spectrum {
     font-size: 23px;
     line-height: 27px;
  }
}
h4#vitamino-color-spectrum {
    font-family: 'LOREAL_PRO';
    font-size: 21px;
	line-height: 25px;
    color: #000000;
	font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
	margin-bottom: 20px;
}
@media screen and (max-width: 767px) {	
   h4#vitamino-color-spectrum  {
      font-size: 19px;
	  line-height: 23px;
   }
}	
h5#vitamino-color-spectrum {
    font-family: 'LOREAL_PRO';
    font-size: 20px;
	line-height: 22px;
    color: #000000;
    letter-spacing: 0.5px;
    font-weight: bold;
    font-style: normal;
	margin-bottom: 5px;
	text-align:center;
}

#vitamino-color-spectrum sup {
	font-size: 0.6em;
}

#vitamino-color-spectrum-container {
background-color: #fff;
color: #000;
max-width: 945px;
margin: 0 auto;
}
.vitamino-color-spectrum-empty-space {
	padding: 1% 0;
}
.vitamino-color-spectrum-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;
}
.vitamino-color-spectrum-btn:hover {
	color: #fff;
	background-color: #000000;
}
.vitamino-color-spectrum-btn:focus {
	color: #fff;
	text-decoration: none;
}
img.vitamino-color-spectrum {
	max-width: 100%;
    margin: 0 auto;
}
video#vitamino-color-spectrum {
    max-width: 100%;
	width: 100%;
	cursor: pointer;
	object-fit: cover;
}
@media screen and (max-width: 767px) {	
    .vitamino-color-spectrum-desktop-show {
		display: none !important;
    }
	.vitamino-color-spectrum-mobile-show {
		display: block !important;
		text-align: center;
    }
}
@media screen and (min-width: 768px) {	
    .vitamino-color-spectrum-mobile-show {
		display: none !important;
    }
}

/* LOGO */
#vitamino-color-spectrum-logo {
	background-color: #000000;
	text-align: center;
	padding: 2% 0 2.1%;
}

/* HEADER */
#vitamino-color-spectrum-header {
	background-image: url(media/vitamino-color-spectrum-header.jpg);
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	padding: 5% 18% 5% 5%;
	text-align: left;
}
@media screen and (max-width: 767px) {	
    #vitamino-color-spectrum-header {
        background-position: calc(100% + 50px) center;
		padding: 5%;
    }
}
@media screen and (max-width: 480px) {	
    #vitamino-color-spectrum-header {
        background-position: calc(100% + 70px) center;
    }
}
#vitamino-color-spectrum-header * {
	color: #ffffff !important;
}
#vitamino-color-spectrum-header h2#vitamino-color-spectrum {
    font-size: 65px;
	line-height: 62px;
	letter-spacing: 2px;
    margin-bottom: 25px;
}
#vitamino-color-spectrum-header h3#vitamino-color-spectrum {
	font-size: 24px;
    letter-spacing: 1px;
	line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
	padding-bottom: 45px;
}
#vitamino-color-spectrum-header h4#vitamino-color-spectrum {
    font-size: 26px;
	line-height: 30px;
	letter-spacing: 1.3px;
	font-weight: 500;
	text-transform: none;
	padding-bottom: 10px;	
}
@media screen and (max-width: 767px) {	
    #vitamino-color-spectrum-header h2#vitamino-color-spectrum {
        font-size: 62px;
	    line-height: 59px;
    }
    #vitamino-color-spectrum-header h3#vitamino-color-spectrum {
        font-size: 22px;
	    line-height: 18px;
    }	
	#vitamino-color-spectrum-header h4#vitamino-color-spectrum {
        font-size: 24px;
	    line-height: 28px;
    }
}
@media screen and (max-width: 600px) {	
    #vitamino-color-spectrum-header h2#vitamino-color-spectrum {
        font-size: 60px;
	    line-height: 57px;
    }
	#vitamino-color-spectrum-header h3#vitamino-color-spectrum {
        font-size: 20px;
	    line-height: 16px;
    }
	#vitamino-color-spectrum-header h4#vitamino-color-spectrum {
        font-size: 22px;
	    line-height: 26px;
    }
}
@media screen and (max-width: 480px) {	
    #vitamino-color-spectrum-header h2#vitamino-color-spectrum {
        font-size: 58px;
	    line-height: 55px;
    }
	#vitamino-color-spectrum-header h3#vitamino-color-spectrum {
        font-size: 18px;
	    line-height: 14px;
    }
	#vitamino-color-spectrum-header h4#vitamino-color-spectrum {
        font-size: 20px;
	    line-height: 24px;
    }
}
 
/* INTRO */
#vitamino-color-spectrum-intro {
   display: flex;
	width: 100%;
	justify-content: space-around;
	padding: 30px;
}
#vitamino-color-spectrum-intro-col-1 {
    width: 47%;
	padding: 25px 25px 25px 15px;
}
#vitamino-color-spectrum-intro-col-2 {
    width: 53%;
}
@media screen and (max-width: 767px) {	
    #vitamino-color-spectrum-intro {
        display: block;
    }
	#vitamino-color-spectrum-intro-col-1, #vitamino-color-spectrum-intro-col-2 {
        width: 100%;
		padding: 30px 0px;
		text-align: center;
    }
}
	
/* AVANT - APRES */
#vitamino-color-spectrum-avant-apres {
	background-color: #000000;
	display: flex;
	width: 100%;
	padding: 4% 5%;
}
#vitamino-color-spectrum-avant-apres * {
	color: #ffffff !important;
}
#vitamino-color-spectrum-avant-apres h2#vitamino-color-spectrum {
	font-size: 38px;
    line-height: 40px;
}
#vitamino-color-spectrum-avant-apres h4#vitamino-color-spectrum {
    margin-bottom: 40px;
}
#vitamino-color-spectrum-avant-apres h4#vitamino-color-spectrum span{
	font-size: 22px;
	color: #000000 !important;
	background-color: #ffffff;
	text-transform: uppercase;
}
#vitamino-color-spectrum-avant-apres-col-1 {
	width: 61%;
	position: relative;
}
#vitamino-color-spectrum-avant-apres-col-2 {
	width: 39%;
	position: relative;
}
@media screen and (max-width: 767px) {
    #vitamino-color-spectrum-avant-apres {
	     display: block;
	}	
	#vitamino-color-spectrum-avant-apres-col-1, #vitamino-color-spectrum-avant-apres-col-2 {
        width: 100%;
		padding: 20px 10px;
    }
}
ul#vitamino-color-spectrum {
	list-style: none;
    padding-left: 0;
}
ul#vitamino-color-spectrum li {
	font-family: 'LOREAL_PRO';
	font-size: 18px;
    line-height: 22px;
    position: relative;
    margin-bottom: 8px;
}
.lp-square {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ffffff;
    margin-right: 6px;
    margin-bottom: 2px;;
}

/* FORMULE */
#vitamino-color-spectrum-formule {
	background-color: #000000;
	display: flex;
	width: 100%;
	padding: 0 4% 4%;
}
#vitamino-color-spectrum-formule * {
	color: #ffffff !important;
}
#vitamino-color-spectrum-formule h3#vitamino-color-spectrum {
	font-size: 29px;
	text-align: left;
	margin-bottom: 15px;
	letter-spacing: 0;
}
#vitamino-color-spectrum-formule-col {
	width: 50%;
	position: relative;
	text-align: left;
}
@media screen and (min-width: 768px) {
	#vitamino-color-spectrum-formule-col:nth-child(1) {
		border-right: 9px solid transparent;
   		border-image: url(media/points.svg) 9 repeat;
	}
}
#vitamino-color-spectrum-formule-col:nth-child(1) {
	padding: 0 25px 0 10px;
}
#vitamino-color-spectrum-formule-col:nth-child(1) #vitamino-color-spectrum-formule-col-content{
	position: relative;
    padding: 90px 0 0;
	max-width: 395px;
	margin: 0 auto;
}
#vitamino-color-spectrum-formule-col:nth-child(2){
	padding: 0 10px 0 30px;
}
#vitamino-color-spectrum-formule-col:nth-child(2) #vitamino-color-spectrum-formule-col-content{
	position: relative;
    padding: 80px 0 90px;
	max-width: 395px;
	margin: 0 auto;
}
#vitamino-color-spectrum-formule-col p#vitamino-color-spectrum.formule-titre {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}
.parfum-fruite {
	position: absolute;
	top: 25px;
	left: 0;
	text-align: left;
}
.parfum-floral {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
}
.parfum-ambre {
	position: absolute;
	bottom: 25px;
	right: 0;
	text-align: right;
}
.a-ferulique {
	position: absolute;
	top: 7px;
	left: 0;
	text-align: left;
}
.a-citrique {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: right;
}
@media screen and (max-width: 767px) {
    #vitamino-color-spectrum-formule {
	     display: block;
	}	
	#vitamino-color-spectrum-formule-col {
        width: 100%;
    }
}


/* ROUTINE */
#vitamino-color-spectrum-routine {
	text-align: center;
	padding: 2% 4.5% 6%;
}
#vitamino-color-spectrum-routine h3#vitamino-color-spectrum{
	font-size: 27px;
    margin-bottom: 30px;
}
#vitamino-color-spectrum-routine-row {
	background-color: #ffffff;
    display: flex;
	width: 100%;
	justify-content: space-around;
}
#vitamino-color-spectrum-routine-col {
    width: 23.8%;
	background-color: #ffffff;
	text-align: center;
	padding: 10px 0px 30px;
	border: 1px solid #000000;
	position: relative;
}
#vitamino-color-spectrum-routine-col>div {
    margin-top: -25px;
}
#vitamino-color-spectrum-routine-col p#vitamino-color-spectrum {
	text-align: left;
	padding: 0 15px;
}
span.vitamino-color-spectrum-benefices {
    font-family: 'LOREAL_PRO';
    font-size: 14px;
	line-height: 22px;
    color: #ffffff;
	background-color: #5e1020;
    letter-spacing: 0;
    font-weight: bold;
    font-style: normal;
	text-transform: none;
	text-align:center;
	padding: 1px 8px 0;
	margin-top: 10px;
	display: inline-block;
}
#vitamino-color-spectrum-routine-col ul#vitamino-color-spectrum {
	padding: 0 14px;
}
#vitamino-color-spectrum-routine-col ul#vitamino-color-spectrum li {
	font-size: 15px;
    line-height: 18px;
    text-align: left;
}
#vitamino-color-spectrum-routine-col .lp-square {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #000000;
    margin-right: 5px;
    margin-bottom: 1px;;
}

@media screen and (max-width: 767px) {
	#vitamino-color-spectrum-routine-row {
         display: block;
	}
	#vitamino-color-spectrum-routine-col {
         width: 100%;
		 margin-bottom: 50px;
	}
}

#vitamino-color-spectrum-footer {
    padding: 1% 5%;
}
#vitamino-color-spectrum-footer p#vitamino-color-spectrum {
    font-size: 11px;
    line-height: 16px;
}