/* inter font 400 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap');

/* montserrat-300 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: "Light";
  font-style: normal;
  font-weight: 300;
  src: url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.woff") format("woff"),
    /* Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-300.svg#Montserrat") format("svg");
  /* Legacy iOS */
}

/* montserrat-regular - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: "Reg";
  font-style: normal;
  font-weight: 400;
  src: url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff") format("woff"),
    /* Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg#Montserrat") format("svg");
  /* Legacy iOS */
}

/* montserrat-900 - latin-ext_latin_cyrillic-ext_cyrillic */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  src: url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.eot");
  /* IE9 Compat Modes */
  src: local(""), url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.woff2") format("woff2"),
    /* Super Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.woff") format("woff"),
    /* Modern Browsers */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.ttf") format("truetype"),
    /* Safari, Android, iOS */
    url("/inline/products/23944/fonts/montserrat-v25-latin-ext_latin_cyrillic-ext_cyrillic-900.svg#Montserrat") format("svg");
  /* Legacy iOS */
}

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

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

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

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

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


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

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

@media screen and (min-width:1200px) {
  #features .margin-top-120 {
    margin-top: 90px;
  }

  #features .margin-bottom-120 {
    margin-bottom: 90px;
  }
}

@media screen and (min-width:1920px) {
  #features .margin-top-120 {
    margin-top: 120px;
  }

  #features .margin-bottom-120 {
    margin-bottom: 120px;
  }
}

/* Feature Header */
#features .section-header-wrapper {
  display: none;
}

/* Feature Classes */
.pebble-pro-p {
  font-size: clamp(14px, 1vw, 20px) !important;
  color: #262d2c;
  font-family: "Reg", sans-serif;
  line-height: 1.6 !important;
}

@media (max-width: 767px) {
  .pebble-pro-p {
    text-align: center !important;
  }
}

.slightly-larger-text {
  font-size: clamp(15px, 1.2vw, 24px) !important;
}

.table-header-text {
  font-size: clamp(10px, 1.5vw, 24px) !important;
  margin: auto;
  text-align: center;
}

.white-orange-header {
  color: white;
}

.white-orange-header:after {
  color: #f7a562;
}

.overview-sub {
  background: #263130;
  padding: 50px 180px;
  border-radius: 40px;
  margin-left: calc(-50vw + 60%) !important;
  margin-right: calc(-50vw + 60%) !important;
  margin-top: 50px;
}

@media (max-width: 1279px) {
  .overview-sub {
    padding: 25px 120px;
    margin-top: 25px;
  }
}

@media (max-width: 767px) {
  .overview-sub {
    padding: 15px 30px !important;
  }

  .slick-arrow {
    width: 30px !important;
    height: 50px !important;
  }

  .prev {
    left: -22px !important;
  }

  .next {
    right: -22px !important;
  }

  .review-slider {
    width: 100% !important;
  }

  .rgb-div {
    margin-top: 2em !important;
  }

  .breakout>.container-fluid,
  .breakout>.container {
    padding-left: 30px;
    padding-right: 30px;
  }

  .row.breakout>div[class*="col"] {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.star-img {
  background-color: #263130;
  padding: 0 20px;
}

.star-line {
  position: relative;
}

.star-line:after {
  content: "";
  background-color: white;
  position: absolute;
  width: 84%;
  height: 2px;
  left: 8%;
  top: 49%;
  z-index: -1;
}

.review-quotes {
  width: 85%;
  margin: 0 auto;
}

.overview-sub p {
  color: white;
}

.orange-text {
  color: #f8a563;
}

.dark-text {
  color: #131919;
}

.review-slider {
  display: none;
  width: 95%;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto;
}

.slick-arrow {
  position: absolute;
  display: block;
  top: 0;
  z-index: 1;
  cursor: pointer;
  transition: 0.1s all ease;
}

.prev {
  left: -60px;
}

.next {
  right: -60px;
}

.white-header {
  color: white;
}

.rgb-lighting {
  margin-bottom: 30px;
}

@media (max-width: 767px) {
  .rgb-lighting {
    margin-bottom: 0;
  }
}

.rgb-lighting-subheader {
  font-size: clamp(30px, 7vw, 150px);
  /* font-size: 150px; */
  font-family: "Montserrat", sans-serif;
  line-height: 1.1;
  margin-bottom: 30px;
  margin-top: 0.2em;
  text-align: center !important;
}

@media (max-width: 767px) {
  #feature-section-2 {
    margin-bottom: 0 !important;
  }

  .rgb-lighting-subheader {
    top: 3.5em;
    height: 0;
  }

  html[lang="de"] .rgb-lighting-subheader,
  html[lang="fr"] .rgb-lighting-subheader,
  html[lang="it"] .rgb-lighting-subheader,
  html[lang="pl"] .rgb-lighting-subheader,
  html[lang="cs"] .rgb-lighting-subheader,
  html[lang="nl"] .rgb-lighting-subheader,
  html[lang="no"] .rgb-lighting-subheader,
  html[lang="ru"] .rgb-lighting-subheader,
  html[lang="se"] .rgb-lighting-subheader {
    top: 2em;
  }
}

@media (max-width: 350px) {
  #feature-section-2 {
    margin-bottom: 0 !important;
  }

  .rgb-lighting-subheader {
    top: 2.75em;
    height: 0;
  }

  html[lang="de"] .rgb-lighting-subheader,
  html[lang="fr"] .rgb-lighting-subheader,
  html[lang="it"] .rgb-lighting-subheader,
  html[lang="pl"] .rgb-lighting-subheader,
  html[lang="cs"] .rgb-lighting-subheader,
  html[lang="nl"] .rgb-lighting-subheader,
  html[lang="no"] .rgb-lighting-subheader,
  html[lang="ru"] .rgb-lighting-subheader,
  html[lang="se"] .rgb-lighting-subheader {
    top: 1.75em;
  }
}

.grey-text {
  color: #6f948d;
}

.teal-text {
  color: #556f6a;
}

.left-text {
  text-align: left !important;
}

.center-text {
  text-align: center !important;
}

@media (max-width: 767px) {
  .mobile-center-text {
    text-align: center !important;
  }
}

.rgb-div {
  text-align: center;
  margin: 0 auto;
}

#features table {
  margin-top: 30px;
}

#features table th {
  background-color: #3a534e;
  color: white;
  border: #131919 7px solid;
  padding: 14px;
}

#features table td {
  background-color: #263130;
  border: #131919 7px solid;
  padding: 0px 14px;
}

#features table td p {
  color: #f8a563;
  padding: 0px;
}

.white-text {
  color: white;
}

.teal-orange-header {
  color: #3a534e;
}

.teal-orange-header:after {
  color: #f8a563;
}

.bold-text {
  font-weight: bold !important;
}

.large-text {
  font-size: clamp(30px, 4.5vw, 100px) !important;
  /* font-size: 100px; */
  font-family: "Montserrat", sans-serif;
  line-height: 1;
}

.larger-text {
  font-size: clamp(35px, 6vw, 120px) !important;
  /* font-size: 120px; */
  font-family: "Montserrat", sans-serif;
  line-height: 1;
}

.disclaimer-text {
  font-size: 12px !important;
}

.green-text {
  color: #92aba5;
}

.adapter-img,
.pebble-img,
.link-text {
  cursor: pointer;
}

.medium-text {
  font-size: clamp(25px, 2.8vw, 60px) !important;
  /* font-size: 60px; */
  font-family: "Montserrat", sans-serif;
}

.monserrat-font {
  font-family: "Montserrat", sans-serif;
}

.light-font {
  font-family: "Light", sans-serif;
}

.light-text {
  font-size: clamp(35px, 3vw, 55px) !important;
  /* font-size: 55px; */
  font-family: "Light", sans-serif;
}

.small-medium-text {
  font-size: clamp(10px, 1.5vw, 25px) !important;
}

.source-margin {
  margin: 0.5em auto !important;
}

.btn_setting_1 {
  background: #3a534e;
  display: inline-block;
  font-size: calc(20px + (25 - 20) * ((100vw - 320px) / (1440 - 320)));
  font-weight: bold;
  line-height: 1.4em;
  border-right: 60px solid #f7a562;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  color: #fff;
  cursor: pointer;
}

.btn_setting_1:before,
.btn_setting_1:after {
  content: "";
  position: absolute;
  right: -42px;
  top: calc(50% - 2px);
  width: 25px;
  height: 1px;
  display: block;
  border-top: 3px solid #fff;
  transition: 0.4s transform ease;
  transform: rotate(0deg);
}

.table_1 {
  display: none;
}

.table_1.display {
  display: inline-table;
}

.btn_setting_2 {
  background: #617471;
  display: inline-block;
  font-size: calc(20px + (25 - 20) * ((100vw - 320px) / (1440 - 320)));
  font-weight: bold;
  line-height: 1.4em;
  border-right: 60px solid #f7a562;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  color: #fff;
  cursor: pointer;
}

.btn_setting_2:before,
.btn_setting_2:after {
  content: "";
  position: absolute;
  right: -42px;
  top: calc(50% - 2px);
  width: 25px;
  height: 1px;
  display: block;
  border-top: 3px solid #fff;
  transition: 0.4s transform ease;
  transform: rotate(0deg);
}

.btn_setting_3 {
  background: #617471;
  display: inline-block;
  font-size: calc(20px + (25 - 20) * ((100vw - 320px) / (1440 - 320)));
  font-weight: bold;
  line-height: 1.4em;
  border-right: 60px solid #f7a562;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  color: #fff;
  cursor: pointer;
}

.btn_setting_3:before,
.btn_setting_3:after {
  content: "";
  position: absolute;
  right: -42px;
  top: calc(50% - 2px);
  width: 25px;
  height: 1px;
  display: block;
  border-top: 3px solid #fff;
  transition: 0.4s transform ease;
  transform: rotate(0deg);
}

.smartcomms_steps {
  display: none;
}

.smartcomms_steps.display {
  display: block;
}

.smartcomms_steps .close-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  left: calc(50% - 15px);
  top: auto;
  right: auto;
  font-size: 20px;
  font-weight: 400;
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000;
  padding: 0;
  border: 2px solid #000;
  border-radius: 40px;
}

@media (min-width: 768px) {
  .smartcomms_steps .close-btn {
    width: 44px;
    height: 44px;
    left: calc(50% - 22px);
    font-size: 30px;
  }
}

.smartcomms_steps .container {
  padding-bottom: 30px;
}

.smartcomms_steps .image {
  position: relative;
}

.smartcomms_steps .image img {
  width: 100%;
  height: auto;
  max-width: none;
}

.smartcomms_steps .image div[num="1"] {
  content: "1";
  left: 0;
  top: 7%;
  height: 7%;
  width: 30%;
}

.smartcomms_steps .image div[num="2"] {
  content: "2";
  left: 0;
  top: 21%;
  height: 7%;
  width: 85%;
}

.smartcomms_steps .image div[num="3"] {
  content: "3";
  left: 0;
  top: 37%;
  height: 7%;
  width: 85%;
}

.smartcomms_steps .image div[num="4"] {
  content: "4";
  left: 0;
  top: 50%;
  height: 13%;
  width: 78%;
}

.smartcomms_steps .image div[num="5"] {
  content: "5";
  left: 0;
  top: 69%;
  height: 7%;
  width: 85%;
}

.smartcomms_steps .image div[num="6"] {
  content: "6";
  right: 9%;
  top: 9%;
  height: 7%;
  width: 24%;
}

.smartcomms_steps .image div[num="7"] {
  content: "7";
  left: 0;
  top: 14%;
  height: 15%;
  width: 36%;
}

.smartcomms_steps .image div[num="8"] {
  content: "8";
  left: 0;
  top: 42%;
  height: 16%;
  width: 53%;
}

.smartcomms_steps .image div[num="9"] {
  content: "9";
  right: 6%;
  top: 40%;
  height: 18%;
  width: 24%;
}

.smartcomms_steps .image div[num="10"] {
  content: "10";
  left: 0;
  top: 17%;
  height: 15%;
  width: 33%;
}

.smartcomms_steps .image div[num="11"] {
  content: "11";
  left: 0;
  top: 45%;
  height: 16%;
  width: 51%;
}

.smartcomms_steps .image div[num="12"] {
  content: "12";
  right: 6%;
  top: 44%;
  height: 18%;
  width: 25%;
}

.smartcomms_steps .image div[num] {
  position: absolute;
  cursor: pointer;
}

.smartcomms_steps .image div[num] div {
  position: relative;
  width: 100%;
  height: 100%;
}

.smartcomms_steps .image div[num] div.left:before {
  left: -7px;
}

.smartcomms_steps .image div[num] div.left:before,
.smartcomms_steps .image div[num] div.right:after {
  position: absolute;
  top: calc(50% - 4px);
  width: 14px;
  height: 14px;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #f8a563;
  border-radius: 7px;
  font-size: 12px;
  animation: pulse 2s infinite;
}

@media (min-width: 768px) {
  .smartcomms_steps .image div[num] div.left:before {
    left: -15px;
  }
}

@media (min-width: 768px) {

  .smartcomms_steps .image div[num] div.left:before,
  .smartcomms_steps .image div[num] div.right:after {
    top: calc(50% - 10px);
    width: 30px;
    height: 30px;
    border-radius: 15px;
    font-size: 15px;
  }
}

@media (min-width: 1920px) {
  .smartcomms_steps .image div[num] div.left:before {
    left: -20px;
  }
}

@media (min-width: 1920px) {

  .smartcomms_steps .image div[num] div.left:before,
  .smartcomms_steps .image div[num] div.right:after {
    top: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
}

.smartcomms_steps .image div[num="1"] div:before {
  content: "1";
}

.smartcomms_steps .image div[num="2"] div:before {
  content: "2";
}

.smartcomms_steps .image div[num="3"] div:before {
  content: "3";
}

.smartcomms_steps .image div[num="4"] div:before {
  content: "4";
}

.smartcomms_steps .image div[num="5"] div:before {
  content: "5";
}

.smartcomms_steps .image div[num="6"] div:after {
  content: "6";
}

.smartcomms_steps .image div[num="7"] div:before {
  content: "7";
}

.smartcomms_steps .image div[num="8"] div:before {
  content: "8";
}

.smartcomms_steps .image div[num="9"] div:after {
  content: "9";
}

.smartcomms_steps .image div[num="10"] div:before {
  content: "10";
}

.smartcomms_steps .image div[num="11"] div:before {
  content: "11";
}

.smartcomms_steps .image div[num="12"] div:after {
  content: "12";
}

.smartcomms_steps .borderline.on {
  display: block;
}

.smartcomms_steps .borderline {
  background-color: white;
  padding: 10px 10px;
  margin: 0px 0 30px;
  display: none;
}

@media screen and (min-width: 768px) {
  .smartcomms_steps .borderline {
    padding: 40px 40px;
  }
}

.smartcomms_steps .borderline .desc.on {
  display: block;
}

.smartcomms_steps .borderline .desc {
  font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (2560 - 320)));
  color: #000;
  display: none;
  text-align: center;
}

.smartcomms_steps .image div[num] div.right:after {
  right: -20px;
}

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

  .smartcomms_steps .image div[num] div.left:before,
  .smartcomms_steps .image div[num] div.right:after {
    top: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }
}

.plus:before {
  transform: rotate(-180deg);
}

.plus:after {
  transform: rotate(-90deg);
}

.table_2 {
  display: none;
}

.table_2.display {
  display: inline-table;
}

.table_2 th {
  background-color: #263130;
  border: #e4e5e7 7px solid;
}

.table_2 td {
  background-color: #617471;
  border: #e4e5e7 7px solid;
}

.flex-div {
  display: flex;
}

.flex-div-child {
  display: flex;
  align-items: center;
}

.normal-text {
  font-weight: 100;
}

.underline-text {
  text-decoration: underline;
}

@media (min-width: 1200px) {
  .usb-adapter-img {
    margin-top: 50px;
  }

  .usb-adapter-section {
    top: -50px;
    height: 105%;
  }

  html[lang="ja"] .usb-adapter-section {
    top: 0px;
  }
}

.usb-adapter-section>div {
  width: 90%;
  margin: auto;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .col-sm-6.col-md-6.col-lg-5.col-lg-push-1.no-padding.usb-adapter-img.col-xs-12 {
    background: #263130;
  }
}

#features .table_family {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}

#features .table_family .row_title,
#features .table_family .row_desc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
}

#features .table_family .row_title>div,
#features .table_family .row_desc>div {
  float: left;
  margin: 2px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#features .table_family .row_title>div:nth-of-type(n + 2),
#features .table_family .row_desc>div:nth-of-type(n + 2) {
  width: calc(33.33% - 4px);
}

#features .table_family .row_title .col_blank,
#features .table_family .row_desc .col_blank {
  display: none;
}

#features .table_family .highlighted_title {
  background: #f7a562 !important;
}

#features .table_family .title {
  background: #99a5a4;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 5px 10px;
  margin-top: 100px;
  font-size: clamp(12px, 1vw, 18px);
}

#features .table_family .title>div {
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

#features .table_family .row_desc div.desc_title {
  background: #3b4a48;
  color: #fff;
  font-weight: 300;
  align-items: center;
  padding: 10px 10px;
  width: 100%;
  justify-content: center;
  font-size: clamp(12px, 1vw, 18px);
}

#features .table_family .desc {
  background: #fff;
  color: #000;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 10px 10px;
  font-size: clamp(10px, 2vw, 18px);
}

html[lang="dk"] #features .table_family .desc {
  font-size: clamp(9px, 2vw, 18px);
}

#features .table_family .learn-more a {
  background: #f7a562;
  color: white;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 10px;
  font-size: clamp(10px, 2vw, 18px);
  width: 100%;
}

#features .table_family .desc ul {
  hyphens: auto;
  list-style-position: inside;
  padding-left: 0;
  text-align: left;
  width: 100%;
  margin: 0;
}

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

  #features .table_family .row_title>div,
  #features .table_family .row_desc>div {
    margin: 4px;
  }

  #features .table_family .row_title>div:nth-of-type(1),
  #features .table_family .row_desc>div:nth-of-type(1),
  #features .table_family .row_desc div.desc_title,
  #features .table_family .row_title>div:nth-of-type(n + 2),
  #features .table_family .row_desc>div:nth-of-type(n + 2) {
    width: calc(16.66% - 8px);
  }

  #features .table_family .row_title .col_blank,
  #features .table_family .row_desc .col_blank {
    display: -ms-flexbox;
    display: flex;
  }

  #features .table_family .row_desc div.desc_title,
  #features .table_family .row_desc div.desc {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: initial;
  }
}

.half-img {
  margin-top: -25px;
}

@media (min-width: 768px) {
  .half-img {
    margin-top: -50px;
  }
}

@media (min-width: 992px) {
  .half-img {
    margin-top: -75px;
  }
}

.product-hero-container {
  background: #131919 url(https://img.creative.com/inline/products/23944/slice/PebblePRO_mobileMHL.jpg) bottom no-repeat;
  background-size: 100% auto;
}

body.storepage_1 .product-hero-container,
body.storepage_2 .product-hero-container,
body.storepage_3 .product-hero-container,
body.storepage_4 .product-hero-container,
body.storepage_7 .product-hero-container,
body.storepage_8 .product-hero-container,
body.storepage_9 .product-hero-container,
body.storepage_10 .product-hero-container,
body.storepage_11 .product-hero-container,
body.storepage_12 .product-hero-container,
body.storepage_15 .product-hero-container,
body.storepage_20 .product-hero-container,
body.storepage_37 .product-hero-container,
body.storepage_38 .product-hero-container,
body.storepage_39 .product-hero-container,
body.storepage_41 .product-hero-container,
body.storepage_42 .product-hero-container {
  background: #131919 url(https://img.creative.com/inline/products/23944/slice/PebblePRO_white_mobileMHL.jpg) bottom no-repeat;
  background-size: 100% auto;
}

@media (max-width: 350px) {
  .gallery-thumbnail ul {
    margin-bottom: 14em;
  }
}

@media (max-width: 767px) and (min-width: 351px) {
  .product-hero-container .container {
    margin-bottom: 18em;
  }
}

@media (min-width: 768px) {
  .product-hero-container {
    background: url(https://img.creative.com/inline/products/23944/slice/PebblePRO_MHL.jpg) top no-repeat;
    background-size: cover;
  }

  body.storepage_1 .product-hero-container,
  body.storepage_2 .product-hero-container,
  body.storepage_3 .product-hero-container,
  body.storepage_4 .product-hero-container,
  body.storepage_7 .product-hero-container,
  body.storepage_8 .product-hero-container,
  body.storepage_9 .product-hero-container,
  body.storepage_10 .product-hero-container,
  body.storepage_11 .product-hero-container,
  body.storepage_12 .product-hero-container,
  body.storepage_15 .product-hero-container,
  body.storepage_20 .product-hero-container,
  body.storepage_37 .product-hero-container,
  body.storepage_38 .product-hero-container,
  body.storepage_39 .product-hero-container,
  body.storepage_41 .product-hero-container,
  body.storepage_42 .product-hero-container {
    background: url(https://img.creative.com/inline/products/23944/slice/PebblePRO_white_MHL.jpg) top no-repeat;
    background-size: cover;
  }
}

.rgb-bg {
  background: linear-gradient(to bottom, #2a3131 30%, #121918 30%);
}

.toggle-rgb-bg {
  background: linear-gradient(to bottom, #2a3131 20%, #121918 20%);
}

.overview-bg {
  background: #99a5a4 url(/inline/products/23944/slice/1_bg.jpg) top no-repeat;
}

@media (min-width: 768px) {
  .rgb-bg {
    background: #121918 url(/inline/products/23944/slice/2_bg.jpg) top no-repeat;
    background-size: contain;
  }

  #features.showwhite .rgb-bg {
    background: #121918 url(/inline/products/23944/slice/2_bg_white.jpg) top no-repeat;
    background-size: contain;
  }
}

@media (min-width: 1920px) {
  .product-hero-container {
    min-height: calc(100vw / 2560 * 1000);
  }
}

.hero-wrapper {
  display: none;
}

.medium-large-text {
  font-size: clamp(30px, 2vw, 50px) !important;
  /* font-size: 50px; */
  font-family: "Montserrat", sans-serif;
}

.dark-teal-text {
  color: #3b4a48;
}

.caption-text {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -95%);
}

@media (min-width: 768px) and (max-width: 899px) {
  .caption-text {
    top: 42%;
    transform: translate(-50%, -42%);
  }

  html[lang="de"] .caption-text,
  html[lang="es"] .caption-text,
  html[lang="cs"] .caption-text {
    top: 36%;
    transform: translate(-50%, -36%);
  }

  html[lang="fr"] .caption-text,
  html[lang="nl"] .caption-text {
    top: 34%;
    transform: translate(-50%, -34%);
  }

  html[lang="it"] .caption-text {
    top: 38%;
    transform: translate(-50%, -38%);
  }

  html[lang="pl"] .caption-text {
    top: 37%;
    transform: translate(-50%, -37%);
  }

  html[lang="cn"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 57%;
    transform: translate(-50%, -57%);
  }

  html[lang="ru"] .caption-text {
    top: 39%;
    transform: translate(-50%, -39%);
  }
}

@media (min-width: 900px) and (max-width: 991px) {
  .caption-text {
    top: 64%;
    transform: translate(-50%, -64%);
  }

  html[lang="de"] .caption-text,
  html[lang="nl"] .caption-text {
    top: 54%;
    transform: translate(-50%, -54%);
  }

  html[lang="es"] .caption-text,
  html[lang="it"] .caption-text {
    top: 55%;
    transform: translate(-50%, -55%);
  }

  html[lang="fr"] .caption-text {
    top: 51%;
    transform: translate(-50%, -51%);
  }

  html[lang="pl"] .caption-text {
    top: 56%;
    transform: translate(-50%, -56%);
  }

  html[lang="cn"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 80%;
    transform: translate(-50%, -80%);
  }

  html[lang="cs"] .caption-text,
  html[lang="fi"] .caption-text,
  html[lang="se"] .caption-text {
    top: 62%;
    transform: translate(-50%, -62%);
  }

  html[lang="ru"] .caption-text {
    top: 57%;
    transform: translate(-50%, -57%);
  }
}

@media (min-width: 992px) and (max-width: 1049px) {
  .caption-text {
    top: 70%;
    transform: translate(-50%, -70%);
  }

  html[lang="de"] .caption-text {
    top: 62%;
    transform: translate(-50%, -62%);
  }

  html[lang="es"] .caption-text {
    top: 57%;
    transform: translate(-50%, -57%);
  }

  html[lang="fr"] .caption-text {
    top: 58%;
    transform: translate(-50%, -58%);
  }

  html[lang="it"] .caption-text {
    top: 61%;
    transform: translate(-50%, -61%);
  }

  html[lang="pl"] .caption-text,
  html[lang="nl"] .caption-text {
    top: 60%;
    transform: translate(-50%, -60%);
  }

  html[lang="cn"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 91%;
    transform: translate(-50%, -91%);
  }

  html[lang="no"] .caption-text,
  html[lang="se"] .caption-text {
    top: 72%;
    transform: translate(-50%, -72%);
  }

  html[lang="ru"] .caption-text {
    top: 64%;
    transform: translate(-50%, -64%);
  }
}

@media (min-width: 1050px) and (max-width: 1099px) {
  .caption-text {
    top: 81%;
    transform: translate(-50%, -81%);
  }

  html[lang="de"] .caption-text,
  html[lang="pl"] .caption-text,
  html[lang="nl"] .caption-text {
    top: 70%;
    transform: translate(-50%, -70%);
  }

  html[lang="es"] .caption-text {
    top: 68%;
    transform: translate(-50%, -68%);
  }

  html[lang="fr"] .caption-text {
    top: 62%;
    transform: translate(-50%, -62%);
  }

  html[lang="it"] .caption-text,
  html[lang="ru"] .caption-text {
    top: 71%;
    transform: translate(-50%, -71%);
  }

  html[lang="cn"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 95%;
    transform: translate(-50%, -95%);
  }

  html[lang="cs"] .caption-text,
  html[lang="fi"] .caption-text,
  html[lang="se"] .caption-text {
    top: 77%;
    transform: translate(-50%, -77%);
  }
}

@media (min-width: 1100px) and (max-width: 1199px) {
  .caption-text {
    top: 70%;
    transform: translate(-50%, -70%);
  }
}

@media (min-width: 1200px) and (max-width: 1299px) {
  .caption-text {
    top: 78%;
    transform: translate(-50%, -78%);
  }

  html[lang="de"] .caption-text {
    top: 68%;
    transform: translate(-50%, -68%);
  }

  html[lang="es"] .caption-text {
    top: 66%;
    transform: translate(-50%, -66%);
  }

  html[lang="fr"] .caption-text {
    top: 62%;
    transform: translate(-50%, -62%);
  }

  html[lang="it"] .caption-text,
  html[lang="pl"] .caption-text,
  html[lang="nl"] .caption-text,
  html[lang="ru"] .caption-text {
    top: 69%;
    transform: translate(-50%, -69%);
  }

  html[lang="cn"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 90%;
    transform: translate(-50%, -90%);
  }

  html[lang="cs"] .caption-text {
    top: 73%;
    transform: translate(-50%, -73%);
  }

  .usb-adapter-section>div {
    margin-top: 8%;
  }
}

@media (min-width: 1300px) and (max-width: 1499px) {
  .caption-text {
    top: 85%;
    transform: translate(-50%, -85%);
  }

  html[lang="de"] .caption-text {
    top: 82%;
    transform: translate(-50%, -82%);
  }

  html[lang="es"] .caption-text {
    top: 73%;
    transform: translate(-50%, -73%);
  }

  html[lang="fr"] .caption-text {
    top: 69%;
    transform: translate(-50%, -69%);
  }

  html[lang="it"] .caption-text {
    top: 72%;
    transform: translate(-50%, -72%);
  }

  html[lang="pl"] .caption-text {
    top: 77%;
    transform: translate(-50%, -77%);
  }

  html[lang="cn"] .caption-text,
  html[lang="no"] .caption-text,
  html[lang="tw"] .caption-text {
    top: 90%;
    transform: translate(-50%, -90%);
  }

  html[lang="cs"] .caption-text {
    top: 87%;
    transform: translate(-50%, -87%);
  }

  html[lang="nl"] .caption-text {
    top: 81%;
    transform: translate(-50%, -81%);
  }

  html[lang="ru"] .caption-text {
    top: 76%;
    transform: translate(-50%, -76%);
  }

  .usb-adapter-section>div {
    margin-top: 8%;
  }
}

@media (min-width: 1500px) {
  .caption-text {
    top: 90%;
    transform: translate(-50%, -90%);
  }

  html[lang="es"] .caption-text {
    top: 80%;
    transform: translate(-50%, -80%);
  }

  html[lang="fr"] .caption-text {
    top: 77%;
    transform: translate(-50%, -77%);
  }

  html[lang="it"] .caption-text {
    top: 81%;
    transform: translate(-50%, -81%);
  }

  html[lang="ru"] .caption-text {
    top: 85%;
    transform: translate(-50%, -85%);
  }
}

@media (min-width: 1200px) {
  .p-width {
    width: 90%;
  }

  html[lang="ja"] .usb-adapter-section>div {
    margin-top: 8%;
    margin-bottom: 8%;
  }
}

.power-adapter-subheader {
  margin-bottom: 0.4em;
}

html[lang="ja"] .power-adapter-subheader {
  margin-top: 0;
}

@media screen and (min-width: 992px) {
  .product-hero-container h1 {
    width: 60%;
  }
}

@media screen and (min-width: 768px) {
  .creative-pebble-pro .container {
    margin-left: 10%;
  }
}

@media (min-width: 768px) {
  .desktop-left-img {
    margin-left: 0 !important;
  }
}

.capitalise-text {
  text-transform: uppercase;
}

html[lang="de"] .table_1 tr td p {
  font-size: clamp(13px, 1vw, 20px) !important;
}

html[lang="de"] .table_2 tr td p {
  font-size: clamp(10px, 1vw, 20px) !important;
}

html[lang="pl"] .large-text {
  font-size: clamp(25px, 4.5vw, 70px) !important;
  font-weight: 800 !important;
}

html[lang="pl"] .medium-text,
html[lang="pl"] .rgb-lighting-subheader,
html[lang="pl"] .larger-text {
  font-weight: 800 !important;
}

html[lang="pl"] .light-text {
  font-size: clamp(25px, 3vw, 55px) !important;
}

html[lang="pl"] .disclaimer-text {
  font-size: 10px !important;
}

html[lang="it"] .rgb-lighting-subheader {
  font-size: clamp(23px, 7vw, 110px);
}

html[lang="it"] .light-text {
  font-size: clamp(25px, 3vw, 55px) !important;
}

html[lang="cs"] .rgb-lighting-subheader {
  font-size: clamp(30px, 7vw, 120px);
}

html[lang="dk"] .rgb-lighting-subheader {
  font-size: clamp(23px, 7vw, 110px);
}

html[lang="dk"] .medium-text {
  font-size: clamp(23px, 2.8vw, 60px) !important;
}

html[lang="nl"] .medium-text {
  font-size: clamp(21px, 2.8vw, 60px) !important;
}

html[lang="de"] .large-text,
html[lang="it"] .large-text,
html[lang="fr"] .large-text,
html[lang="es"] .large-text,
html[lang="cn"] .large-text,
html[lang="cs"] .large-text,
html[lang="dk"] .large-text,
html[lang="fi"] .large-text,
html[lang="nl"] .large-text,
html[lang="no"] .large-text,
html[lang="se"] .large-text,
html[lang="tw"] .large-text {
  font-size: clamp(25px, 4.5vw, 70px) !important;
}

html[lang="ru"] .large-text {
  font-size: clamp(25px, 3.5vw, 70px) !important;
}

@media (min-width: 1200px) {
  .custom-lg-push {
    left: 4%;
  }
}

@media (min-width: 768px) {
  .no-top-margin-desktop {
    margin-top: 0;
  }
}

.small-header-text {
  font-size: clamp(20px, 3vw, 35px) !important;
}

@media (min-width: 768px) {
  .comms-margin-top {
    margin-top: 60px !important;
  }

  .noise-clean-img-div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .noise-clean-container {
    display: flex;
  }
}

@media (max-width: 767px) {
  .mobile-breakout {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .padding-15 {
    padding: 15px !important;
  }
}

.dark-teal-bg {
  background-color: #263130 !important;
}

.bottom-margin-5 {
  margin-bottom: 0.5em !important;
}

.step-margin {
  margin-top: 3em !important;
}

.step-last-margin {
  margin-bottom: 3em !important;
}

.slightly-larger-text-2 {
  font-size: clamp(16px, 1.3vw, 25px) !important;
}

.comms-header-text {
  font-size: calc(20px + (30 - 20) * ((100vw - 1200px) / (2560 - 1200))) !important;
  text-align: center;
}

/* HK/AU/MY */
.storepage_3 .hide-adapter-section,
.storepage_4 .hide-adapter-section,
.storepage_38 .hide-adapter-section {
  display: none;
}

/* hero icon - for jp only */
.storepage_2 .product-hero-container {
  padding-bottom: 50vw;
}

.storepage_2 .product-hero-container.creative-pebble-pro .gallery-thumbnail ul {
  margin-bottom: 30px;
}

.storepage_2 .product-hero-container.creative-pebble-pro .hero-icon1 {
  width: 100%;
  max-width: 90px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (min-width: 351px) and (max-width: 767px) {
  .storepage_2 .product-hero-container .container {
    margin-bottom: 0;
  }
}

@media screen and (min-width:768px) {
  .storepage_2 .product-hero-container {
    padding-bottom: 0;
  }

  .storepage_2 .product-hero-container.creative-pebble-pro .hero-icon1 {
    margin-left: 0;
    margin-bottom: 30px;
    max-width: 120px;
  }
}

@media screen and (min-width:1200px) {
  .storepage_2 .product-hero-container.creative-pebble-pro .hero-icon1 {
    max-width: 170px;
  }
}




/* pebblexplus image */
.product-hero-container.pebblexplusbanner_ready {
  display: flex;
  flex-direction: column;
}

.product-hero-container.pebblexplusbanner_ready {
  padding-bottom: 55vw;
}

.product-hero-container.pebblexplusbanner_ready .container {
  margin-bottom: 0;
}

.product-hero-container.pebblexplusbanner_ready .gallery-thumbnail,
.product-hero-container.pebblexplusbanner_ready .gallery-thumbnail>ul {
  margin-bottom: 0;
}

.pebblexplus-banner {
  padding-right: 15px;
  padding-left: 15px;
  margin: 20px auto;
  text-align: center;
}

.pebblexplus-banner img {
  width: 80%;
  max-width: 335px;
}

@media screen and (min-width: 768px) {
  .product-hero-container.pebblexplusbanner_ready {
    padding-bottom: 0;
  }

  .pebblexplus-banner {
    width: 750px;
    margin-left: 10%;
    text-align: left;
  }

  .pebblexplus-banner img {
    width: 100%;
  }
}

@media screen and (min-width:992px) {
  .pebblexplus-banner {
    width: 970px;
  }
}

@media screen and (min-width:1200px) {
  .pebblexplus-banner {
    width: 1170px;
  }
}