/* import font css if needed. sometimes designer uses new adobe font */
@import url("https://use.typekit.net/son7sot.css");

/* global css, this css usually caters for any pdt page, add ur own css if needed. */
html span.nowrap {
  white-space: nowrap;
}

#features * {
  font-family: "graphie", "proxima-nova", sans-serif;
}

#features .text-center,
#features .text-center * {
  text-align: center !important;
}

#features .breakout>.container-fluid,
#features .breakout>.container {
  padding-left: 15px;
  padding-right: 15px;
}

#features .flex-valign-middle {
  margin-left: 0;
  margin-right: 0;
}

#features .product-info-container-light .feature-header,
#features .product-info-container-light .feature-header::after {
  color: #000;
}

#features .product-info-container-dark .feature-header,
#features .product-info-container-dark .feature-header::after,
#features .product-info-container-dark .feature-subheader {
  color: #ab9989;
}

#features .max-1440 {
  max-width: 1440px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

#features .max-1920 {
  max-width: 1920px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

#features .max-1600 {
  max-width: 1600px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

#features .max-1170 {
  max-width: 1170px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

#features h3.feature-header {
  font-size: clamp(16px,1.7vw,18px);
  font-weight: 500;
}

#features h4.feature-subheader {
  font-weight: 400;
  font-size: clamp(28px, 7vw, 62px);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

#features h4.feature-subheader+p {
  margin-top: 20px;
}

#features h4.feature-subheader.bigger {
  font-size: clamp(28px, 3.5vw, 72px);
}

#features .center-all * {
  text-align: center !important;
}

#features p {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.4;
  font-weight: 300;
  margin: 0.5em 0;
  letter-spacing: 0.04em;
}

#features p.medium {
  font-size: clamp(20px, 2.2vw, 30px);
}

#features p.large {
  font-size: clamp(26px, 5vw, 48px);
}

#features p.large span {
  font-size: clamp(32px, 8vw, 72px);
}

#features p.smallfont {
  font-size: clamp(12px, 1.5vw, 16px);
}

#features p.footnote {
  font-size: clamp(12px, 1.5vw, 16px);
  /* sometimes marketer will request to be smaller, compared to mock css. if they do, just use 12px */
}

#features strong {
  font-weight: bold !important;
}

#features .section-header-wrapper {
  display: none;
}

#features .product-info-container-light p,
#features .product-info-container-light h5 {
  color: #000;
}

#features .product-info-container-dark p,
#features .product-info-container-dark h5 {
  color: #ccc;
}

#features .button_control.open::after {
  content: "\2D";
}

#features .button_control::after {
  content: "\2B";
  position: absolute;
  right: 28px;
  font-size: 18px;
  top: calc(50% - 13px);
}

#features .btn_expand {
  color: #000;
  border: 1px solid #000;
  padding: 15px 50px 15px 30px;
  line-height: 1.1;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-size: clamp(12px, 3vw, 16px);
  letter-spacing: 0.05em;
  font-weight: 400;
  border-radius: 24px;
}

#features .product-info-container-dark .btn_expand {
  color: #fff;
  border: 1px solid #fff;
}

#features .btn_expand:before {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #fff;
  right: 24px;
  width: 10px;
  height: 1px;
  font-size: 10px;
  line-height: 1;
  display: block;
}

#features .btn_expand:after {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 1px solid #fff;
  right: 24px;
  width: 10px;
  height: 1px;
  transform: rotate(90deg);
  font-size: 10px;
  line-height: 1;
  display: block;
}

#features .btn_expand.minus:after {
  display: none;
}

@media screen and (min-width: 992px) {
  #features .feature-header.align-left {
    margin-bottom: 40px;
  }

  #features .feature-header.align-left::after {
    margin: 0;
  }
}

@media screen and (max-width: 1919px) {
  #features .product-info-row {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 991px) {
  #features .mobile-center-all * {
    text-align: center !important;
  }
  #features .mobile-margin-top-30 {
    margin-top: 30px;
  }
}

@media screen and (max-width: 767px) {
  #features .row.breakout>div[class*="col"] {
    padding-left: 15px;
    padding-right: 15px;
  }

  #features .product-info-row {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  #features .margin-top-60 {
    margin-top: 30px;
  }

  #features .margin-bottom-60 {
    margin-bottom: 30px;
  }

  #features .mobile-no-bottom-margin {
    margin-bottom: 0 !important;
  }
}

/* =================================== hero section =================================== */

.product-hero-container {
  display: none;
}

/* =================================== audio section =================================== */
#features .section_audio {
  background: #000 url('./mobile/driver-mobile.jpg') no-repeat bottom center;
  background-size: 100% auto;
  padding-bottom: 90vw;
}
body.storepage_2 #features .section_audio {
  background: #000 url('./mobile/driver-mobile-jp.jpg') no-repeat bottom center;
  background-size: 100% auto;
}
  body.storepage_3 #features .section_audio,
  body.storepage_29 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-tw.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_8 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-fr.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_9 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-de.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_10 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-it.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_11 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-es.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_20 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-cn.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_21 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-ru.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_22 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-nl.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_23 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-se.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_24 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-no.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_26 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-fi.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_27 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-cs.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_28 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-dk.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }
  body.storepage_37 #features .section_audio {
    background: #000 url('./mobile/driver-mobile-pl.jpg') no-repeat bottom center;
    background-size: 100% auto;
  }

@media screen and (min-width: 992px) {
  #features .section_audio {
    background: #000 url('./driver.jpg') no-repeat top center;
    background-size: auto 100%;
    height: clamp(900px, calc(100vw * 1318 / 2560), 1318px);
    padding-bottom: 0;
  }
  body.storepage_2 #features .section_audio {
    background: #000 url('./driver-jp.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_3 #features .section_audio,
  body.storepage_29 #features .section_audio {
    background: #000 url('./driver-tw.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_8 #features .section_audio {
    background: #000 url('./driver-fr.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_9 #features .section_audio {
    background: #000 url('./driver-de.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_10 #features .section_audio {
    background: #000 url('./driver-it.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_11 #features .section_audio {
    background: #000 url('./driver-es.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_20 #features .section_audio {
    background: #000 url('./driver-cn.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_21 #features .section_audio {
    background: #000 url('./driver-ru.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_22 #features .section_audio {
    background: #000 url('./driver-nl.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_23 #features .section_audio {
    background: #000 url('./driver-se.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_24 #features .section_audio {
    background: #000 url('./driver-no.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_26 #features .section_audio {
    background: #000 url('./driver-fi.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_27 #features .section_audio {
    background: #000 url('./driver-cs.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_28 #features .section_audio {
    background: #000 url('./driver-dk.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
  body.storepage_37 #features .section_audio {
    background: #000 url('./driver-pl.jpg') no-repeat bottom center;
    background-size: auto 90%;
  }
}

@media screen and (min-width: 1200px) {
  html:not([lang="en"]) #features .section_audio {
    background-size: auto 95% !important;
  }
}
#features .section_immersive {
  background: #000 url('./mobile/audio-mobile.jpg') no-repeat top center;
  background-size: 100% auto;
  padding-top: 85vw;
  display: flex;
  align-items: flex-end;
}

@media screen and (min-width: 992px) {
  #features .section_immersive {
    background: #000 url('./audio.jpg') no-repeat top center;
    background-size: cover;
    height: clamp(800px, calc(100vw * 1664 / 2560), 1664px);
    padding-top: 200px;
  }
}

#features .section_noisecontrol {
  background: #000;
  display: flex;
  align-items: center;
}

#features .section_noisecontrol .row {
  background: #111;
  padding: 0 15px;
  padding: 15px;
  border-radius: 60px;
  overflow: hidden;
}

#features .section_noisecontrol .img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#features .section_noisecontrol .img video {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
}

#features .section_noisecontrol .img video.on {
  opacity: 1;
}

#features .section_noisecontrol .video_ambient {
  position: absolute;
  top: 0;
  left: 0;
}

#features .section_noisecontrol .txt {
  display:flex;
  flex-direction:column;
  justify-content: center;
  padding:30px;
}
#features .section_noisecontrol .wrapper_txt {
  position: relative;
}
#features .section_noisecontrol .txt_anc {
  position: absolute;
  top:-10px;
  left:0;
  width:100%;
}
#features .section_noisecontrol .txt_anc,
#features .section_noisecontrol .txt_ambient {
  opacity:0;
  visibility:hidden;
}
#features .section_noisecontrol .txt_anc.on,
#features .section_noisecontrol .txt_ambient.on {
  opacity:1;
  visibility:visible;
}

/* toggle button */
#features .section_noisecontrol .wrapper_btn {
  width: 100%;
  margin: 30px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 30px;
}

#features .section_noisecontrol .wrapper_btn .switch {
  order: 1;
  width: 100%;
  padding: 0 30%;
}

#features .section_noisecontrol .wrapper_btn .label {
  display: flex;
  align-items: center;
  order: 2;
  width: 41%;
}

#features .section_noisecontrol .wrapper_btn .label:first-of-type {
  justify-content: flex-end;
}

#features .section_noisecontrol .wrapper_btn .label:last-of-type {
  justify-content: flex-start;
}

#features .section_noisecontrol .wrapper_btn .label span {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

@media screen and (min-width:992px) {
  #features .section_noisecontrol .wrapper_btn {
    justify-content: flex-start;
  }
}

@media screen and (min-width:992px) {
  #features .section_noisecontrol .wrapper_btn {
    gap: 10px;
  }

  #features .section_noisecontrol .wrapper_btn .switch {
    width: 22%;
    max-width: 100px;
    order: 1;
    padding: 0;
  }

  #features .section_noisecontrol .wrapper_btn .label {
    order: 1;
    width: auto;
  }
}

@media screen and (min-width:2560px) {
  #features .section_noisecontrol .wrapper_btn .switch {
    width: 16%;
  }
}

/* toggle switch */
#features .section_noisecontrol .cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

#features .section_noisecontrol .cmn-toggle+label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
  margin-bottom: 0;
}

#features .section_noisecontrol input.cmn-toggle-round-flat+label {
  padding: 0;
  width: 100%;
  max-width: 100px;
  margin: 0 auto;
  height: 40px;
  border-radius: 60px;
}

#features .section_noisecontrol input.cmn-toggle-round-flat+label:before,
#features .section_noisecontrol input.cmn-toggle-round-flat+label:after {
  display: block;
  position: absolute;
  content: "";
}

#features .section_noisecontrol input.cmn-toggle-round-flat+label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background: linear-gradient(135deg, #AA9989 10%, #71665B 90%);
  border-radius: 60px;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#features .section_noisecontrol input.cmn-toggle-round-flat+label:after {
  top: 8px;
  left: 8px;
  bottom: 8px;
  margin-left: 0;
  width: calc(40px - (8px * 2));
  background-color: #fff;
  border-radius: 52px;
  transition: margin 0.4s;
}

#features .section_noisecontrol input.cmn-toggle-round-flat:checked+label:after {
  margin-left: calc(100% - 40px);
}

#features .section_noisecontrol input.cmn-toggle-round-flat:checked+label:before {
  opacity: .6;
}

@media screen and (min-width: 992px) {
  #features .section_noisecontrol .row {
    display: flex;
    align-items: center;
    padding: 0 2vw 0 0;
  }
}

#features .section_sxfi_expand {
  background: #AA9989;
}

#features .section_expand.product-info-container-light p,
#features .section_expand.product-info-container-dark p {
  font-size: clamp(13px, 1.5vw, 16px);
}

#features .section_sxfi_expand p.title {
  font-weight: bold;
  margin-top: 10px;
}

#features .section_communications {
  background: #000;
  display: flex;
  align-items: center;
}

#features .section_communications img {
  border-radius: 35px;
}
@media screen and (min-width: 992px) {
  #features .section_communications .row {
    display: flex;
    align-items: center;
  }
}

#features .section_battery {
  background: #000;
}

#features .section_battery .row {
  background: #111111 url('./mobile/battery-mobile.jpg') no-repeat top left;
  background-size: 100% auto;
  padding: calc(100vw * 848 / 914) 15px 30px 15px;
  border-radius: 60px;
}

#features .section_battery .text_container p.medium,
#features .section_battery .text_container p.large {
  margin: 0;
  line-height: 1.2;
  color: #ab9989;
}

@media screen and (min-width: 992px) {
  #features .section_battery .row {
    background: #111111 url('./battery.jpg') no-repeat;
    background-position: -210px 0;
    background-size: auto 100%;
    padding: 60px 2vw;
    border-radius: 60px;
  }
}

@media screen and (min-width: 1440px) {
  #features .section_battery .row {
    background-position: top left;
  }
}

#features .section_design {
  background: #000;
}
#features .section_design video {
  width: 100%;
  height: auto;
}

#features .section_design .row {
  align-items: center;
}

#features .section_design p.medium {
  color: #ab9989;
  margin-top: 0;
}
#features .section_design p.footnote {
  margin-bottom: 0;
}

#features .section_design .icon_container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
}
#features .section_design .icon_container img {
  width: 20%;
  max-width: 140px;
}
#features .section_design .icon_container div {
  max-width: 450px;
}

#features .section_downloads {
  background: #000;
}

#features .section_downloads .row {
  background: #111;
  padding: 30px 15px;
  border-radius: 60px;
}

#features .section_downloads .text_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

#features .section_downloads .text_container p.medium {
  margin: 0;
  line-height: 1.2;
  color: #ab9989;
}

#features .section_downloads .text_container .app_container {
  display: flex;
  margin-top: 15px;
  gap: 20px;
}

#features .section_downloads .text_container img.icon {
  width: 30%;
  max-width: 100px;
}

@media screen and (min-width: 992px) {
  #features .section_downloads .row {
    padding: 30px 4vw;
  }
}