/**
 * @file
 * 640px devices layout styles.
 */

/* ----------------------------------------------------------------------- ICON */
.icon-num-bg,
.icon,
.select-lang .custom-select-value:after,
.f-field .custom-select-value:after,
.header-search form input[type=submit],
.light-bg-title:after,
span.custom-radio,
.prices-block:before,
.btn-with-arrows:before,
.btn-with-arrows:after,
.block-differens.open .btn-with-arrows:before,
.block-differens.open .btn-with-arrows:after,
.product-detail-item-num,
.diagnostics-step-number span,
.footer-middle h4:after,
.btn-en-savoir:after, .btn-en-savoir:before {
  background-repeat: no-repeat;
  background-image: url(../../../images/tpl/icons-640.png) !important;
  background-size: 720px auto;
}

.icon-close-filter {
  background-position: -214px -120px;
  width: 23px;
  height: 23px;
}

.white-text .icon-close-filter,
.icon-close-filter.white-close {
  background-position: -266px -120px;
}

.icon-close-filter:hover,
.white-text .icon-close-filter:hover,
.icon-close-filter.white-close:hover {
  background-position: -240px -120px;
}

.icon-fb {
  background-position: -336px -108px;
  width: 22px;
  height: 45px;
}

.icon-tw {
  background-position: -296px -372px;
  width: 50px;
  height: 41px;
}

.icon-pin {
  background-position: -290px -416px;
  width: 42px;
  height: 55px;
}

.icon-minutes {
  background-position: -292px -108px;
  width: 42px;
  height: 42px;
}

.icon-days {
  background-position: -136px -550px;
  width: 44px;
  height: 42px;
}

.icon-present {
  background-position: -300px -240px;
  width: 42px;
  height: 42px;
}

.icon-nature {
  background-position: -280px -152px;
  width: 42px;
  height: 42px;
}

.icon-waterproof {
  background-position: -300px -284px;
  width: 42px;
  height: 42px;
}

.icon-longlive {
  background-position: -296px -328px;
  width: 46px;
  height: 42px;
}

.icon-7days {
  background-position: -280px -196px;
  width: 42px;
  height: 42px;
}

.icon-nature.white {
  background-position: 0px -516px;
  width: 34px;
  height: 34px;
}

.icon-clear {
  width: 27px;
  height: 27px;
  background-position: -266px -360px;
}

.show-own-menu .icon-clear {
  margin-top: -14px;
}

.slide-prev, .slide-next,
.products .slide-prev, .products .slide-next,
.news-sliders .slide-prev, .news-sliders .slide-next,
.actualize-items .slide-prev, .actualize-items .slide-next,
.page-block-img .slide-prev, .page-block-img .slide-next,
.products-phi .slide-prev, .products-phi .slide-next,
.page-personalize .product-detail-slider .slide-prev,
.page-personalize .product-detail-slider .slide-next {
  width: 42px;
  height: 82px;
  bottom: 50%;
  margin-bottom: -51px;
}

.product-detail-slider .icon-prev,
.product-detail-slider .icon-next,
.products .slide-prev .icon,
.products .slide-next .icon,
.news-sliders .slide-prev .icon,
.news-sliders .slide-next .icon,
.actualize-items .slide-prev .icon,
.actualize-items .slide-next .icon,
.advice-block .slide-prev .icon,
.advice-block .slide-next .icon,
.page-block-img .slide-prev .icon,
.page-block-img .slide-next .icon,
.page-block-img .slide-prev .icon,
.page-block-img .slide-next .icon,
.products-phi .slide-prev .icon,
.products-phi .slide-next .icon {
  width: 100%;
  height: 100%;
}

.products .icon-prev,
.news-sliders .icon-prev,
.actualize-items .icon-prev,
.advice-block .icon-prev,
.page-block-img .icon-prev,
.product-detail-slider .icon-prev,
.page-personalize .product-detail-slider .icon-prev {
  background-position: -144px -282px;
}

.products .icon-next,
.news-sliders .icon-next,
.actualize-items .icon-next,
.advice-block .icon-next,
.page-block-img .icon-next,
.product-detail-slider .icon-next,
.page-personalize .product-detail-slider .icon-next {
  background-position: -190px -282px;
}

.products-phi .icon-prev {
  background-position: -70px -372px;
}

.products-phi .icon-next {
  background-position: -116px -372px;
}

.product-detail-slider .slide-prev, .product-detail-slider .slide-next {
  width: 21px;
  height: 41px;
  margin-bottom: -31px;
}

.product-detail-slider .icon-prev {
  background-position: -144px -302px;
}

.product-detail-slider .icon-next {
  background-position: -211px -302px;
}

#Ritual1 .product-detail-slider .slide-prev, #Ritual1 .product-detail-slider .slide-next {
  width: 42px;
  height: 82px;
}
#Ritual1 .product-detail-slider .icon-prev {
  background-position: -144px -282px;
}
#Ritual1 .product-detail-slider .icon-next {
  background-position: -190px -282px;
}

.icon-facebook.icon-white {
  background-position: -244px 0px;
  width: 24px;
  height: 52px;
}

.icon-youtube.icon-white {
  background-position: -220px -64px;
  width: 52px;
  height: 54px;
}

.icon-instagram.icon-white {
  background-position: -400px -60px;
  width: 52px;
  height: 54px;
}

.icon-cultes {
  width: 50px;
  height: 50px;
  background-position: -228px -202px;
}

.icon-new {
  width: 50px;
  height: 50px;
  background-position: -228px -148px;
}

.icon-karite {
  width: 50px;
  height: 50px;
  background-position: 0 -440px;
}

.toggle-filter .icon-toggle {
  width: 15px;
  height: 8px;
  background-position: -90px -356px;
  margin-top: -4px;
}

.filter-block.active .toggle-filter.current .icon-toggle {
  background-position: -46px -136px;
}

.icon-watch-small, .icon-watch {
  width: 80px;
  height: 80px;
  background-position: -52px -456px;
}

.icon-update {
  width: 78px;
  height: 106px;
  background-position: -274px 0;
}

.icon-email-large {
  width: 79px;
  height: 48px;
  background-position: -134px -500px;
  margin-bottom: 1.5em;
}

.icon-quote-open {
  width: 20px;
  height: 19px;
  background-position: -76px -126px;
}

.icon-quote-close {
  width: 20px;
  height: 19px;
  background-position: -98px -126px;
}

.icon-qoute-open-green {
  width: 20px;
  height: 19px;
  background-position: -122px -112px;
  margin-bottom: 2em;
}

.icon-qoute-close-green {
  width: 20px;
  height: 19px;
  background-position: -144px -112px;
  margin-top: 2em;
}
/*
span.custom-checkbox {
  background-position: -136px -550px;
  width: 31px;
  height: 31px;
}

span.custom-checkbox.active {
  background-position: -136px -584px;
}*/

.prices-block:before {
  width: 44px;
  height: 24px;
  margin-left: -22px;
  background-position: -75px -101px;
}

.prices-block:before,
.border-bg-title:after {
  background-position: -168px -110px;
}

.icon-tm-white {
  width: 66px;
  height: 66px;
  background-position: -68px -566px;
}

.icon-tm-border-white {
  width: 66px;
  height: 66px;
  background-position: 0 -566px;
}

/* ----------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- HEADER */
/*~~~~~~~~~~~~~~~~~~~~~~~ Header top */
.header-top {
  height: 100px;
}

/*.scrolled .header-top {*/
  /*height: 60px;*/
/*}*/

/* ~~~~~~~~~~~~~~~~~~~~~~~ logo */
.header-logo,
.scrolled .header-logo {
  margin: -29px 0 0 0 !important;
  width: 239px !important;
  height: 60px !important;
  left: 3%;
  top: 50%;
}

.lnk-logo .icon.icon-logo {
  background-position: 0px 0px;
}

.lnk-logo .icon.icon-small-logo {
  background-position: 0 -65px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~/logo */

/* ~~~~~~~~~~~~~~~~~~~~~~~ search */
.header-search {
  right: 80px;
  width: 52px;
  height: 62px;
  margin-top: -31px;
}

.header-search form input[type=submit] {
  top: 5px;
  width: 52px;
  height: 52px;
  border-width: 5px;
  background-position: -125px -65px;
}

.header-search form input[type=text] {
  height: 62px;
  line-height: 100% !important;
  font-size: 18px;
}

.ui-autocomplete a, .ui-autocomplete.ui-menu .ui-menu-item a {
font-size: 18px;
  line-height: 30px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~ menu */
.icon-toggle-menu {
  width: 42px;
  height: 42px;
  background-position: -172px -65px;
  border-width: 19px;
  border-bottom-width: 28px;
}

/*.scrolled .icon-toggle-menu {*/
  /*border-bottom-width: 9px;*/
  /*border-top-width: 0;*/
/*}*/

.open-menu .icon-toggle-menu {
  background-position: 0 -100px;
}

.header-menu ul li,
.header-menu ul li a {
  font-size: 40px;
  line-height: 1em !important;
}

.header-menu ul li a {
  padding-top: 36px;
}

@media screen and (orientation: landscape) {
  .header-menu ul li,
  .header-menu ul li a {
    font-size: 24px;
    line-height: 1em !important;
  }
}

#content {
  border-top-width: 100px;
}

.scrolled #content {
  border-top-width: 60px;
}

/* ---------------------------------------------------------------------- FOOTER */
.footer-middle {
  padding: 51px 0 14px 0;
}

.footer-middle .centered-title {
  padding: 0 0 64px 0;
}

.icon-footer-logo {
  width: 155px;
  height: 128px;
  background-position: 0 -149px;
}

.footer-middle h4, .footer-middle .h4 {
  font-size: 38px;
  line-height: 1em;
}

.footer-middle h4:after {
  margin-right: -23px;
  margin-top: -7px;
  width: 23px;
  height: 13px;
  background-position: -47px -118px;
}

.active > h4:after {
  background-position: -47px -100px;
}

.footer-middle .centered-title h2 span:after, .footer-middle .centered-title h2 span:before,
.footer-middle .centered-title .text_title span:after, .footer-middle .centered-title .text_title span:before {
  margin-top: 64px;
}

.footer-middle-left,
.footer-middle-right {
  margin-bottom: 55px;
}

.footer-middle-center {
  margin-bottom: 54px;
}

ul.footer-menu {
  padding-top: 31px;
}

ul.footer-menu li {
font-size: 40px;
  min-height: 90px;
  line-height: 1em;
}

.footer-bottom-right form {
  padding-top: 46px;
}

.footer-bottom-right .f-field label {
  font-size: 33px;
  line-height: 1em;
  margin-bottom: 25px;
}

.footer-bottom-right .f-field input[type=text] {
  height: 47px;
  line-height: 47px;
font-size: 35px;
}

.footer-bottom-right input[type=submit] {
  top: 56px;
  font-size: 30px;
  line-height: 49px;
  height: 47px;
}

.footer-bottom-right .f-field.f-field-lang label {
  line-height: 48px;
}

.footer-bottom-right .f-field.f-field-lang select,
.footer-bottom-right .f-field.f-field-lang .custom-select-over {
  height: 48px;
  margin-left: 0;
}

.footer-bottom-right .f-field.f-field-lang .custom-select-value {
font-size: 34px;
  line-height: 38px;
  height: 38px;
}

.footer-bottom-right .show-in-mobile {
  padding: 30px 0 42px 0;
}

.footer-bottom-right .show-in-mobile a {
  margin: 0 24px;
}

/* ----------------------------------------------------------------------/FOOTER */

/* ---------------------------------------------------------------------- pre FOOTER:subscribe */
.subscribe-form .centered-title {
  padding: 50px 0 4px 0;
}

.subscribe-form .centered-title h2,
.subscribe-form .centered-title .text_title {
  font-size: 47px;
}

.subscribe-form .centered-title h2 span:before,
.subscribe-form .centered-title .text_title span:before,
.subscribe-form .centered-title h2 span:after,
.subscribe-form .centered-title .text_title span:after {
  margin: -2px 20px;
}

.page-institut #INSTITUT .centered-title h1 > span:before,
.page-institut #INSTITUT .centered-title h1 > span:after,
.page-institut #CAPILLISCOPE .centered-title .text_title > span:before,
.page-institut #CAPILLISCOPE .centered-title .text_title > span:after,
.page-institut #LETAGE .centered-title .text_title > span:before,
.page-institut #LETAGE .centered-title .text_title > span:after{
  margin-left: 0.15em;
  margin-right: 0.15em;
}

.subscribe-field {
  margin-right: 20px;
}

.subscribe-form .link-border-salad {
  font-size: 29px;
  line-height: 28px;
  padding: 14px 19px 10px;
  margin: 0 0 19px;
}

.subscribe-field input[type=text],
.subscribe-field .custom-select-over .custom-select-value {
font-size: 18px;
  font-family: 'LegacySansITCPro-Book', 'sans-serif';
}

.subscribe-field label, .subscribe-field h2 {
font-size: 30px;
  line-height: 1em;
}

.subscribe-field .custom-select-over,
.subscribe-field input[type=text] {
  margin-bottom: 16px;
}

.subscribe-form input[type=submit], .subscribe-form input[type=button] {
  font-size: 14px;
  height: 30px;
  line-height: 28px;
  vertical-align: top;
}

/* ---------------------------------------------------------------------- pre FOOTER:crumbs */
.pre-footer {
  padding: 52px 3% 26px;
  font-size: 18px;
}

.pre-footer > .dec-link, .links-left, .crumbs-link {
  margin-top: 102px;
  max-width: 63%;
}

.icon-back {
  width: 86px;
  height: 86px;
  background-position: 0px -282px;
}

.retour-link .icon {
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------------- Slider */
.icon-video {
  width: 49px;
  height: 49px;
  background-position: -90px -282px;
  margin: -25px !important;
}

.slider-text {
  font-size: 22px;
  line-height: 1.2em;
}

.slider .slider-text {
  padding-top: 47px;
  padding-bottom: 50px;
}

.slider, .img-text-item {
  height: 1031px;
}

/*.slider-img img, .slider-img iframe {*/
  /*height: 740px;*/
/*}*/

.slider-navi-thumbs {
  bottom: 76px;
}

.slider-navi-thumbs a {
  width: 53px;
  height: 4px;
}

/* ---------------------------------------------------------------------- TITLES */
.centered-title {
  font-size: 22px;
  line-height: 1.23em;
}

body, #main {
  font-size: 20px;
}

/* ----------------------------------------------------------------------/TITLES */

/* ----------------------------------------------------------------------PRODUCT */
.products {
    font-size: 23px;
}

/*.product-item .link-border-salad {
  width: 263px;
  margin-left: -132px;
}*/

.products .slider-navi-thumbs a {
  margin: 0 4px;
}

/* ----------------------------------------------------------------------/PRODUCT */

/* ---------------------------------------------------------------------- HOME: philosophie  */
.icon-num-bg {
  width: 65px;
  height: 65px;
  background-position: 0 -372px;
  line-height: 65px;
}

/* ----------------------------------------------------------------------/HOME: philosophie  */
/* ---------------------------------------------------------------------- HOME: actualize  */
#main.index-page .actualize-items .icon-prev {
  background-position: -70px -372px;
}

#main.index-page .actualize-items .icon-next {
  background-position: -116px -372px;
}

.actualize-items-over-type1 .actualize-items .slide-prev,
.actualize-items-over-type1 .actualize-items .slide-next {
  margin-top: -51px;
}

.actualize-items .icon-plus {
  width: 78px;
  height: 78px;
  margin-top: 3.2em !important;
}

/* ----------------------------------------------------------------------/HOME: actualize  */
/* ---------------------------------------------------------------------- page DIAGNOSTIC */
.diagnostics-step-number {
  width: 62px;
}

.diagnostics-step-number span {
  width: 62px;
  height: 62px;
  background-position: -236px -256px;
  line-height: 62px;
  margin-top: -31px;
}

.diagnostics-step.unactive .diagnostics-step-number span {
  background-position: -162px -368px;
}

.sub-step:before {
  left: 2.17em;
}

#sublist-31:after {
  margin-left: -15px;
}

span.custom-radio,
.form-block ul.justify-inner-text > li > label span.custom-radio {
  background-position: -226px -360px;
  width: 38px;
  height: 38px;
  margin-top: -19px;
}

span.custom-radio.active,
.sub-step ul li label:hover span.custom-radio,
.form-block ul.justify-inner-text > li > label:hover span.custom-radio,
.form-block ul.justify-inner-text > li > label span.custom-radio.active {
  background-position: -236px -320px;
}

.sub-step ul li li span.custom-radio {
  background-position: -112px -334px;
  width: 20px;
  height: 20px;
}

.sub-step ul li li label:hover span.custom-radio,
.sub-step ul li li label span.custom-radio.active {
  background-position: -90px -334px;
}

/* ----------------------------------------------------------------------/page DIAGNOSTIC */

/* ---------------------------------------------------------------------- page Rituels personnalisé */
.product-detail-item-num {
  width: 66px;
  height: 66px;
  line-height: 66px;
  background-position: -160px -432px;
}

.page-personalize .product-detail-item {
  background-image: url(../../../images/tpl/rep-product-inner-mobil-640.png);
  height: 860px;
}

.page-personalize .product-detail-slider .slide-next, .page-personalize .product-detail-slider .slide-prev {
  bottom: 57%;
}

.form-email-body-sex span.custom-radio {
  width: 22px;
  height: 22px;
  background-position: 0 -492px;
  vertical-align: -0.2em;
}

.form-email-body-sex span.custom-radio.active {
  background-position: -24px -492px;
}

.form-field {
  min-height: 40px;
  margin-bottom: 1em;
}

.form-field input[type=text], .form-field input[type=email],
.form-field input[type=tel], .form-field input[type=password] {
  height: 40px;
  line-height: 40px;
font-size: 20px;
}

.form-field label {
  line-height: 40px;
}

.form-email-body input[type="submit"] {
font-size: 30px;
  line-height: 28px;
  padding: 10px 19px 12px 19px;
  height: 45px;
  width: 200px;
  vertical-align: top;
}

/* ----------------------------------------------------------------------/page Rituels personnalisé */

/* ---------------------------------------------------------------------- PRODUITS */
.btn-with-arrows:before, .btn-with-arrows:after {
  width: 22px;
  height: 12px;
  background-position: -136px -456px;
}

.block-differens.open .btn-with-arrows:before, .block-differens.open .btn-with-arrows:after {
  background-position: -136px -470px;
}

.advice-block .slide-prev {
  margin: 0 0 -51px 0px;
}

.advice-block .slide-next {
  margin: 0 0px -51px 0;
}

.video-maniere .play-video-link {
  margin: -83px -33px;
}

.video-maniere .play-video-link .icon-video {
  width: 134px;
  height: 134px;
  background-position: -216px -472px;
}

/* ----------------------------------------------------------------------/PRODUITS */

/* ---------------------------------------------------------------------- fiche PRODUITS */
.btn-en-savoir:after, .btn-en-savoir:before {
  width: 23px;
  height: 12px;
  background-position: -122px -133px;
}

.light-variant.products .product-image-bg {
  height: 340px;
  top: -340px;
  margin: 0 0 -340px 0;
}

#AUSSI .light-variant.products .product-image-bg {
    top: 390px;
}

#main .light-variant.products .slide-next, #main .light-variant.products .slide-prev {
  margin-bottom: -41px;
}

.fiche-product-img {
  background-size: auto 195px;
}

/* ----------------------------------------------------------------------/fiche PRODUITS */

/* ---------------------------------------------------------------------- 07-ACTUALITES */
.page-actualites .light-bg-title:after,
.page-institut #LETAGE .light-bg-title:after,
.page-institut #INSTITUT .light-bg-title:after {
  background-position: -167px -110px;
}

#main .page-actualites .ai-img .over-actualize.over-light .over-actualize-more .icon-plus {
  width: 56px;
  height: 56px;
  margin-top: -28px !important;
}

.page-actualites .ai-img .over-actualize.over-light .over-actualize-more {
  margin-right: 12% !important;
  margin-left: 3% !important;
}

.page-actualites .ai-img .over-actualize.over-light .over-actualize-title {
  line-height: 1.3em;
  margin-right: 12% !important;
  margin-left: 3% !important;
}

/*.page-institut .bg-green .page-text-left{background-size:auto 244px;}*/
.page-institut #LETAGE + .prices-block:before {
  background-position: -36px -540px;
}

.diagnostics-validation input[type=submit] {
  min-width: 390px;
}

.centered-title h1,
.centered-title h2,
.centered-title .text_title {
  font-weight: 700;
  font-size: 43px;
  line-height: normal;
  font-family: 'LegacySansITCPro-Book', 'sans-serif';
}

.services-page-block .link-bg-salad {
  font-size: 28px;
  padding-left: 0.8em;
  padding-right: 0.8em;
}

/* Footer newsletter */
.f-field-email {
  width: 100%;
}

.f-field-email .pf-common-footer-email-form {
  text-align: center;
  padding: 5px 10px;
}

.f-field-email .pf-common-footer-email-form label[for="edit-email"] {
  display: block;
}

.f-field-email .pf-common-footer-email-form input {
  width: unset;
}

.f-field-email-text {
  float: left;
  width: unset;
  padding: 10%;
  height: unset;
  text-align: center;
}

.f-field.f-field-email-text span, 
.f-field.f-field-email-text a {
    font-size: 11px !important;
    color: #fff;
}

.slide-prev {
  left: 13px;
}
.slide-next {
  right: 13px;
}

#Promo .slider-item .link-border-salad {
  padding: 0.6em 0.7em 0.5em;
}

#Promo .icon-prev {
  width: 45px;
  height: 80px;
  background-position: -70px -374px;
}
#Promo .slide-prev {
  display: block;
  margin-bottom: -143px;
}
#Promo .slide-next {
  display: block;
  margin-bottom: -143px;
}
#Promo .icon-next {
  width: 45px;
  height: 80px;
  background-position: -113px -374px;
}

.section-diagnostic-cheveux-rene-furterer .centered-title h1 {
  line-height: 1.2em;
}

.sub-step:before {
  left: 3.1em;
}

.diagnostics-validation input[type=submit] {
  min-width: 349px;
  font-size: 29px;
  height: 51px;
}
.page-personalize .product-detail-item-additional-name{
  margin-bottom: -4px;
  margin-top: 0;
}

.show-in-mobile.pane-pf-locator-locator .link-border-salad {
  margin-top: 0.3em;
  margin-bottom: 2.5em;
}

.header-search-focus .header-top{
  height: 170px;
}

.header-search-focus .header-menu .icon-toggle-menu {
  border-bottom-width: 19px;
  margin-bottom: 80px;
}

.header-search-focus .header-search form input[type=submit] {
  top: -76px;
  right: 70px;
}

#ACTIFS .slider-mobile-only {
    height: 670px;
}

#ACTIFS .slider-mobile-only.expanded {
    height: 900px;
}

#RITUAL_AUSSI .slider-mobile-only, #AUSSI .slider-mobile-only {
    height: 730px;
}

#ACTIFS .products-actifits div.product-item h3 strong {
    line-height: 2em;
}