@import url("additional.css");
@import url("additional3.css");
@import url("additional-ja.css");
@import url("additional2.css");
@import url("additional2-ja.css");
@import url("global_additonal.css");
@import url("additional-d-and-r.css");
@import url("additional-g-edit.css");
@import url("additional-smk.css");
@import url("japan_additonal.css");
@import url("additional-point.css");
@import url("additional-lp-nishijincollection.css");
@import url("additional-clp.css");
@import url("additional-clp-ja.css");
@import url("additional-plp.css");
@import url("additional-d-and-r-ja.css");
@import url("additional-lp-pico.css");
@import url("additional-lp-dandrcaravan.css");
@import url("additional-home.css");

footer .layer-2 .col-left {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

footer .layer-2 .accordion_title {
	font-family: "ReaderRegular", Arial, sans-serif;
	color: #ffffff;
	text-transform: uppercase;
}


footer .layer-2 .accordion_title.open {
	padding-bottom: 4.3999999999999995VW;
}
footer .layer-2 .accordion_description {
	padding: 0 20px 12px;
}

footer .layer-2 .accordion_description a {
	margin-bottom: 4.3999999999999995VW;
	display: inline-block;
	font-family: "ReaderRegular", Arial, sans-serif;
	font-size: 1.5rem;
	color: #666666;
}

footer .layer-2 .accordion_description h5 {
	display: none;
}


footer .layer-2 .col-right {
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	margin-top: 10.666666666666668VW;
}

footer .layer-2 .col-right.footer-link-content-off {
	margin-top: 0;
}


footer .layer-2 .social-links {
	padding: 0 3%;
	display: -ms-flexbox;
	display: flex;
	list-style: none;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

footer .layer-2 .col-right .social-links a {
	color: #666666;
	font-size: 1.625rem;;
}



.country-selector-container .ui-selectmenu-button .ui-icon {
	display: inline-block;
	background: url("../icons/country-select-arrow.png?$staticlink$") no-repeat;
}

.country-selector-container .ui-selectmenu-button .ui-icon {
	position: relative;
}



 footer .layer-3 label {
    float: left;
}
 .country-selector-container {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.country-selector-container .ui-selectmenu-button {
	border: none;
	height: auto;
	float: left;
	display: -ms-flexbox;
	display: flex;
	position: relative;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.country-selector-container .ui-selectmenu-button {
	padding: 0 20px 0 15px;
}


 .country-selector-container .ui-selectmenu-text {
     color: #666666;
}

 .copyright-container {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

 .copyright-container p {
	color: #666666;
}

.product-listing .pagination-buttons{
	margin-top:0;
	margin-bottom:20px;	
}


/* Responsive code goes here */

/* Desktop View */

@media (min-width: 769px) {
	footer .newsletter .register-success p {
		font-size : 16px;
	}

	footer .layer-2 {
		padding-top: 4.027777777777778VW;
		padding-bottom: 3.6111111111111107VW;
	}

	footer .layer-2 .col-left {
		-ms-flex: 0 0 68.75%;
		flex: 0 0 68.75%;
		max-width: 68.75%;
	}

	footer .layer-2 .accordion {
		border: none;
	}

	footer .layer-2 .accordion_title {
		display: none;
	}

	footer .layer-2 .accordion_description {
		padding: 0 10px;
		float: left;
		width: 27%;
		display: inline-block !important;
	}
	footer .layer-2 .accordion_description.about {
		padding-left: 0;
	}
	footer .layer-2 .accordion_description.services {
		margin-left: 9%;
	}
	footer .layer-2 .accordion_description.contact {
		margin-left: 10%;
	}

	footer .layer-2 .accordion_description a {
		margin-bottom: 9px;
		font-size: 16px;
	}

	footer .layer-2 .accordion_description h5 {
		display: block;
		padding-bottom: 30px;
		font-family: "ReaderRegular", Arial, sans-serif;
		font-size: 16px;
		color: #ffffff;
		text-transform: uppercase;
	}

	footer .layer-2 .accordion_description ul {
		padding-right: 10px;
	}


	footer .layer-2 .col-right {
		-ms-flex: 0 0 18.75%;
		flex: 0 0 18.75%;
		max-width: 18.75%;
		margin-top: 0;
	}

	footer .layer-2 .col-right .social-links {
		padding: 0 0 0 10%;
	}

	footer .layer-2 .col-right .social-links a {
		font-size: 18px;
	}


	.country-selector-container .ui-selectmenu-button .ui-icon {
		top: 6px;
		margin: 0;
		right: -12px;
		width: 23px;
		height: 8px;
		background-size: 97%;
	}


	footer .layer-3 {
        padding-bottom: 87px;
    }


	.country-selector-container {
		margin-left: 6.25%;
		-ms-flex: 0 0 18.75%;
		flex: 0 0 18.75%;
		max-width: 18.75%;
	}


	.country-selector-container .ui-selectmenu-button {
		padding: 0 42px 0 15px;
    }

	.copyright-container {
		-ms-flex: 0 0 68.75%;
		flex: 0 0 68.75%;
		max-width: 68.75%;
		text-align: right;
	}

    .copyright-container p {
		font-size: 14px;
   }

}


/* Mobile View */

@media screen and (max-width: 768px) {
    footer .layer-2 {
		margin-bottom: 10.666666666666668VW;
	}

	footer .layer-2 .accordion_title  {
		font-size: 1.5rem;
	}


	.country-selector-container .ui-selectmenu-button .ui-icon {
		top: 12px;
		width: 45px;
		height: 16px;
		right: -12px;
	}

	footer .layer-3 {
        padding-bottom: 13.5%;
	}
	
	.copyright-container p {
		font-size: 1.25rem;
   }

   .copyright-container p {
		padding: 0 15px;
		margin-top: 10.3%;
	}
}


/* This MQ is for font responsive rfs mixin as we need to keep design font px intact */
@media (max-width: 750px) {

	footer .layer-2 .col-right .social-links a {
		font-size: calc(0.7185rem + 1.9338666667vw);
	}

	footer .layer-2 .accordion_description a,
	footer .layer-2 .accordion_title {
		font-size: calc(0.716rem + 1.6725333333vw);
	}

	.copyright-container p{
		font-size: calc(0.5rem + 1.1498666667vw);
  }  

}


/* Custom MQ */
@media (min-width: 1440px) {
    footer .layer-2 {
		padding-top: 58px;
		padding-bottom: 52px;
	}
}

/* Exclusive Promo Beauty is a gift */
.beauty-is-a-gift .headline {
	text-transform: none !important;
	font-family: "ReaderBold", Arial, sans-serif !important;
}
@media (min-width: 769px) {
	.beauty-is-a-gift .headline {
		padding-right: 28%;
	}
	.beauty-is-a-gift .shop {
		font-size: 16px !important;
	}
}


/* Styles for contact us submenu */

.contact-short-information h3 {
  white-space: nowrap;
  position: relative;
  margin-bottom: 15px; }

.utility-nav ul li .contact-short-information a {
  color: #000000; }

.contact-short-information .contact-info-row {
  padding-top: 15px;
  margin-bottom: 15px; }
  .contact-short-information .contact-info-row .icon {
    float: left;
    margin-right: 25px;
    font-size: 1.5rem;
    color: #c8102e;
    position: relative;
    top: auto;
    left: auto;
    min-width: 1.5vw;
    line-height: 1;
    text-align: center; }
    @media (max-width: 750px) {
      .contact-short-information .contact-info-row .icon {
        font-size: calc(0.2013rem + 2.77056vw) ; } }
    @media screen and (max-width: 768px) {
      .contact-short-information .contact-info-row .icon {
        margin-top: 0;
        margin-right: 3.33333vw;
        margin-bottom: 0;
        margin-left: 0; } }
    @media (min-width: 769px) {
      .contact-short-information .contact-info-row .icon {
        margin: 0 25px 0 0; } }
    .contact-short-information .contact-info-row .icon-smartphone {
      font-size: 1.875rem; }
      @media (max-width: 750px) {
        .contact-short-information .contact-info-row .icon-smartphone {
          font-size: calc(0.20168rem + 3.56976vw) ; } }
      @media (max-width: 768.98px) {
        .contact-short-information .contact-info-row .icon-smartphone {
          line-height: 1.9; } }
  .contact-short-information .contact-info-row p,
  .contact-short-information .contact-info-row a {
    overflow: hidden;
    font-size: 1.25rem;
    line-height: 1.5; }
    @media (max-width: 750px) {
      .contact-short-information .contact-info-row p,
      .contact-short-information .contact-info-row a {
        font-size: calc(0.20105rem + 2.23776vw) ; } }
    @media (min-width: 769px) {
      .contact-short-information .contact-info-row p,
      .contact-short-information .contact-info-row a {
        font-size: 1rem;
        line-height: normal; } }
  @media (min-width: 769px) and (max-width: 750px) {
    .contact-short-information .contact-info-row p,
    .contact-short-information .contact-info-row a {
      font-size: calc(0.2008rem + 1.70496vw) ; } }
	  
/* End Styles for contact us submenu */




/* styles for exclusive offer category */
.half-cat-promo-slot .content-left {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px; }

.half-cat-promo-slot .content-right {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.half-cat-promo-slot img {
  max-width: 100%;
  height: auto; }

.half-cat-promo-slot .heading {
  display: -ms-flexbox;
  display: flex; }

.half-cat-promo-slot .heading h1 {
  float: left; }

.half-cat-promo-slot .heading h1 span {
  display: inline-block;
  width: 100%;
  text-align: right;
  font-weight: normal; }

.half-cat-promo-slot .body-content h3 {
  line-height: 1;
  letter-spacing: 1.6px; }

.half-cat-promo-slot .body-content .cta-link {
  margin: 8.3% 0 13%; }

@media screen and (max-width: 768px) {
  .half-cat-promo-slot {
    padding-top: 10.5VW;
    padding-bottom: 16VW; }
  .half-cat-promo-slot .content-left {
    margin-left: 13.5%; }
  .half-cat-promo-slot .content-right {
    padding-right: 0; }
  .half-cat-promo-slot .content-right .main-image {
    margin: 0 7% 0 6%; }
  .half-cat-promo-slot .heading h1 {
    width: 70vw;
	letter-spacing: 4px;
    line-height: 0.88; }
  .half-cat-promo-slot .body-content {
    margin: 0 15% 0 0; }
  .half-cat-promo-slot .body-content h3 {
    margin: 14% 0 5%;
	font-size: calc(0.20155rem + 3.90336vw);
	letter-spacing: 2px;
    line-height: 1.05; }
  .half-cat-promo-slot .body-content p {
    line-height: 1.4;
    letter-spacing: 0.4px; } 
  footer .layer-2 .social-links{
    justify-content: space-evenly;
  } }

@media screen and (min-width: 769px) {
  .half-cat-promo-slot {
    padding-top: 90px;
    padding-bottom: 8.333333333333332VW; }
  .half-cat-promo-slot .content-left {
    -ms-flex: 0 0 43.75%;
    flex: 0 0 43.75%;
    max-width: 43.75%;
    padding-right: 0; }
  .half-cat-promo-slot .content-left-inner {
    margin-left: 25.4%;
    position: relative;
    top: 50%;
    transform: translate(0, -50%); }
  .half-cat-promo-slot .content-right {
    -ms-flex: 0 0 56.25%;
    flex: 0 0 56.25%;
    max-width: 56.25%; }
  .half-cat-promo-slot .content-right .main-image {
    text-align: right;
    margin-left: 11.4%; }
  .half-cat-promo-slot .heading h1 {
    line-height: 1; }
  .half-cat-promo-slot .body-content {
    width: 64%; }
  .half-cat-promo-slot .body-content .btn {
    width: 100%;
    min-width: auto; }
  .half-cat-promo-slot .body-content h3 {
    margin: 35.5% 0 8%; }
  .half-cat-promo-slot .body-content p {
    line-height: 1.33;
    letter-spacing: 0.3px; }
  .half-cat-promo-slot .body-content .cta-link {
    margin: 15% 0; } }

.top-banner-cnt {
  position: relative; }
  @media (max-width: 768.98px) {
    .top-banner-cnt {
      background: #000000; } }
  @media (max-width: 768.98px) {
    .top-banner-cnt .banner-body {
      padding: 13% 10% 15% 10%;
      text-align: center; } }
  @media (min-width: 769px) {
    .top-banner-cnt .banner-body {
      position: absolute;
      top: 50%;
      left: 0px;
      width: 50%;
      padding: 0 0 0 11%;
      transform: translate(0, -50%); } }
  .top-banner-cnt .banner-body h1 {
    color: #ffffff;
    letter-spacing: 1.5px;
    line-height: 1;
    margin-bottom: 4%; }
  .top-banner-cnt .banner-body p {
    color: #ffffff;
    margin-bottom: 10px; }
    @media (max-width: 768.98px) {
      .top-banner-cnt .banner-body p {
        margin: 0 10% 0 10%; } }

.favourite-products {
  padding-top: 16vw;
  padding-bottom: 16vw; }
  @media (min-width: 769px) {
    .favourite-products {
      padding-top: 120px;
      padding-bottom: 120px; } }
  .favourite-products .image-wrapper {
    margin-left: -10px;
    padding-right: 10%; }
    @media (min-width: 769px) {
      .favourite-products .image-wrapper {
        -ms-flex: 0 0 55.5%;
        flex: 0 0 55.5%;
        max-width: 55.5%;
        padding: 0 0 0 5.5%;
        margin: 0px; } }
  .favourite-products .text-container {
    padding: 0 10.5% 0 9.5%; }
    @media (min-width: 769px) {
      .favourite-products .text-container {
        -ms-flex: 0 0 44.5%;
        flex: 0 0 44.5%;
        max-width: 44.5%;
        padding: 0 6% 0 6%; } }
    .favourite-products .text-container a.primary {
      display: inline-block;
      margin-top: 4.5%; }
      @media (max-width: 768.98px) {
        .favourite-products .text-container a.primary {
          width: 100%;
          margin-top: 2%; } }
    @media (min-width: 769px) {
      .favourite-products .text-container .text-container-inner {
        position: relative;
        top: 50%;
        left: 0;
        transform: translate(0, -50%); } }
    .favourite-products .text-container h2 {
	  line-height: 1.2;
	  letter-spacing: 0.3px;
      margin-bottom: 3.5%; }
      @media (max-width: 768.98px) {
        .favourite-products .text-container h2 {
          margin-top: 11%; } }
    .favourite-products .text-container li {
      position: relative;
      list-style: none;
      padding: 0 10% 0 4.5vw;
      margin-bottom: 7%; }
      @media (min-width: 769px) {
        .favourite-products .text-container li {
          padding-left: 34px;
          margin-bottom: 5%; } }
      .favourite-products .text-container li::before {
        content: '';
        position: absolute;
        font-size: 1.25rem;
        line-height: 0;
        top: 10px;
        left: 11px;
        transform: translate(-50%, 0) rotate(-50deg);
        border: 1px solid #c61633;
        border-width: 0 0 1px 1px;
        width: 1em;
        height: 0.5em; }
        @media (max-width: 750px) {
          .favourite-products .text-container li::before {
			top: 1.2vw;
			left: 2vw;
            font-size: calc(0.20105rem + 2.23776vw) ; } }
        @media (min-width: 769px) {
          .favourite-products .text-container li::before {
            width: 16px;
            height: 8px;
            top: 6px; } }

/* End styles for exclusive offer category */
/* Start of Hero banner on home page and article listing page common part */
.hero-banner {
	position: relative;
	text-align: center;
}
.hero-banner .banner-cta {
    position: absolute !important;
    z-index: 99;
}
.hero-banner.video-content #hero-video {
	height: 100%;
	vertical-align: top;
}
.hero-banner.video-content:hover .video-control {
	display: block;
}
.hero-banner.video-content .video-control {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 9999;
	width: 13.33333vw;
	height: 13.33333vw;
	border: 0;
	cursor: pointer;
	background: transparent;
	line-height: 1;
	color: #ffffff;
	padding: 0;
	font-size: 6.25rem;
	transform: translate(-50%, -50%);
}
.hero-banner.video-content .video-control .icon-play-rounded-button {
	display: none;
}
.hero-banner.video-content .video-control.paused  .icon-round-pause-button {
	display: none;
}
.hero-banner.video-content .video-control.paused  .icon-play-rounded-button {
	display: inline-block;
}
.hero-banner .video-control {
  display: none;
}

@media screen and (max-width: 768px) {
    .hero-banner .banner-cta {
        display: none;
    }
    .hero-banner.video-content #hero-video{
     width:100%;
    }
}

@media (min-width: 320px) and (max-width: 667px) {
    .hero-banner .banner-cta {
        display: none;
    }
}

@media (max-width: 750px) {
	.hero-banner.video-content .video-control {
        font-size: calc(0.811rem + 9.3032vw);
    }
}

@media screen and (min-width: 769px) {

    .hero-banner .banner-cta {
        left: calc(17% - 7%);
		top: 75%;
		
    }
    .hero-banner.video-content .video-control{
        font-size: 100px;
    }
}

 .hero-banner picture img{
    height:calc(100vh - 100px);
    width:100vw;
}
@media (min-width: 1440px) {

.hero-banner.video-content .video-control {
		width: 100px;
		height: 100px;
	}
}
/* End of Hero banner on home page and article listing page common part*/