@import url("https://use.typekit.net/son7sot.css");

/*fix outer col width for 24 col*/
section#features > .container > .row > .col-xs-12 {
  width: 100% !important;
}
section#features .product-info-container-light {
  color: black;
  background-color: #e6f3f5;
}
section#features .product-info-container-dark {
  color: white;
  background-color: #24324c;
}

.product-hero-container {
  background: #16191e url(./img/hero-trio-ls-mobile.jpg) no-repeat top center;
  background-size: 100% auto;
  padding-top: calc(100vw * 713 / 828);
}
.product-hero-container .product-name-large {
  font-family: rift, sans-serif;
  font-weight: 600;
  font-size: calc(30px + (72 - 30) * ((100vw - 320px) / (2560 - 320)));
}
#features .section-header-wrapper,
.hero-wrapper {
  display: none;
}
.triols .feature-header:after {
  background: none repeat scroll 0 0 currentColor;
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.triols .feature-header {
  margin-bottom: 30px;
}

.triols .feature-subheader {
  font-family: rift, sans-serif;
  font-size: calc(36px + (100 - 36) * ((100vw - 320px) / (2560 - 320)));
  line-height: 1.02;
  font-weight: 600;
  color: #c5e2e6;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
}

body.storepage_21 .triols .feature-subheader {
  font-size: calc(28px + (100 - 28) * ((100vw - 320px) / (2560 - 320)));
}

body.storepage_21 .triols .feature-subheader {
  font-family: sans-serif !important;
  font-weight: 700;
}

body.storepage_21 p {
  font-family: sans-serif;
}

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

.triols h4 {
  font-family: rift, sans-serif;
  font-weight: 600;
}

.product-info-container,
.product-info-container-light p,
.product-info-container-dark p,
.product-review-container {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

html[lang="en"] .product-info-container,
html[lang="en"] .product-info-container-light p,
html[lang="en"] .product-info-container-dark p,
html[lang="en"] .product-review-container {
  font-weight: 100;
}

section#features .feature-subheader,
section#features p,
section#features .feature-header {
  text-align: center;
}

section#features .feature-header {
  font-size: calc(18px + (22 - 18) * ((100vw - 1200px) / (2560 - 1200)));
  font-weight: 600;

  color: #c5e2e6;
}

section#features .box {
  padding: calc(20px + (60 - 20) * ((100vw - 320px) / (2560 - 320)));
  text-align: center;
}

.triols video {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  border: 0;
}

.triols img {
  width: 100%;
  height: auto;
}

.triols .breakout {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  overflow: hidden;
}

.triols .row,
.triols .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* ===================== OVERVIEW SECTION========================== */

.triols .section_overview .feature-header {
  color: black !important;
}

.section_overview .feature-header:after {
  right: 0%;
}

.triols .section_overview .icon .item:last-of-type:before {
  display: none;
}

.triols .section_overview .icon {
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (calc(100% / 2)) [2];
  grid-template-columns: repeat(2, calc(100% / 2));
}

.triols .section_overview .img {
  max-width: 50%;
  height: auto;
}

.triols .section_overview .icon .item {
  position: relative;
  padding: 10px;
}

.triols .section_overview .icon .txt {
  text-align: center;
  color: #333;
  line-height: 1.3;
  font-weight: 400;
  font-size: 14px;
}

.triols .section_overview .box {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  text-align: center !important;
}

/* ======================= AUDIO SECTION =========================== */
.triols .section_audio {
  background-color: black !important;
}

.triols .section_audio h3 {
  color: #c5e2e6;
}

.triols .section_audio .video-audio {
  display: block;
  width: 100%;
  height: auto;
}

.triols .section_audio .video {
  display: flex;
  justify-items: center;
}
/* ====================== DESIGN SECTION ============================== */

.triols .section_design .img {
  background: url(./img/design-lifestyle.jpg) no-repeat center;
  background-size: auto 100%;
}
/* ====================== IMAGE SECTION ============================== */

.triols .section_image .img {
  background: #000000 url(./img/design.jpg) no-repeat;
  background-size: auto 100%;
}

.triols .section_image .product-info-row {
  margin: 0px;
}

/* ====================== COMMS SECTION ============================== */
.triols .section_comms .bg {
  background: #24324c url(./img/control-spider-mobile.jpg) no-repeat bottom;
  background-size: 100% auto;
  padding-bottom: calc((37.5vw / 828 * 342) + 160px) !important;
  /* padding-left: calc(
    50px + (120) * ((100vw - 320px) / (2560 - 320))
  ) !important;
  padding-right: calc(
    50px + (120) * ((100vw - 320px) / (2560 - 320))
  ) !important; */
}

.triols .section_comms .img {
  background: #000000 url(./img/control.jpg) no-repeat center;
  background-size: auto 100%;
}

.triols .section_comms .header-para-image-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-height: 100vh;
  padding-left: 20px;
  padding-right: 20px;
}

/* ====================== CERTIFIED SECTION ============================== */

.triols .section_certified img {
  max-width: 40vw;
  height: auto;
}
.triols .section_certified {
  background-color: #30353b !important;
  background: url(./img/super-xfi-mobile.jpg) no-repeat bottom;
  padding-bottom: calc(100vw / 828 * 1027);
  background-size: 100% auto;
}
/* ====================== BACKGROUND SECTION ============================== */
.triols .section_background .logo {
  display: flex;
  justify-content: center;
}

.triols .section_background .logo img {
  max-width: 35vw;
  height: auto;
}

.triols .section_background h4 {
  color: #24324c;
}

.triols .section_background a {
  color: #333333;
  text-decoration: underline;
}

.triols .section_background h4 {
  text-align: center !important;
}

/* ========================================================================= */
section#features .triols .text-center p {
  text-align: center;
}

/* ==================== MEDIA QUERIES ==================== */
@media screen and (min-width: 425px) {
  .triols .section_overview .icon {
    -ms-grid-columns: (calc(100% / 2)) [2];
    grid-template-columns: repeat(2, calc(100% / 2));
    margin-bottom: 0;
  }
  .triols .section_overview .icon .item {
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .product-hero-container {
    background: #16191e url(./img/hero-trio-ls.jpg) no-repeat top center;
    background-size: auto 100%;
    padding-top: 0;
  }
  .product-hero-container .container {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
  }
  .product-hero-container .gallery-thumbnail {
    margin-bottom: 0;
  }
  .triols .section_comms .bg {
    padding-bottom: calc((37.5vw / 906 * 351) + 250px) !important;
    background: #24324c url(./img/control-spider.jpg) no-repeat bottom;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 992px) {
  .triols .section_design .img img {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .triols .section_image .img img {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .triols .section_comms .img img {
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .product-hero-container h1,
  .product-hero-container h2,
  .product-hero-container h3 {
    width: 40%;
  }
}

@media screen and (min-width: 1200px) {
  /* ================== GENERAL STYLING ==================*/
  section#features .feature-subheader,
  section#features p,
  section#features .feature-header {
    text-align: left;
  }

  section#features .feature-subheader {
    font-size: calc(36px + (100 - 36) * ((100vw - 1200px) / (2560 - 1200)));
  }

  body.storepage_21 section#features .feature-subheader {
    font-size: calc(28px + (84 - 28) * ((100vw - 1200px) / (2560 - 1200)));
  }

  body.storepage_37 section#features .feature-subheader {
    line-height: 115%;
  }

  section#features .box {
    text-align: left;
  }

  .triols p {
    font-size: calc(18px + (22 - 18) * ((100vw - 1200px) / (2560 - 1200)));
  }

  .triols p.footnote {
    font-size:14px;
    line-height:18px;
  }

  /* This styles the line below h3 header */
  .feature-header:after {
    background: none repeat scroll 0 0 currentColor;
    bottom: -10px;
    content: "";
    display: block;
    height: 2px;
    position: relative;
    width: 80%;
    margin: 0 auto;
    right: 10%;
  }
  /* ================== OVERVIEW ================== */
  .triols .section_overview .icon .item:nth-of-type(odd):before {
    display: block;
    content: "";
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: #aebdc5;
  }
  .triols .section_overview .icon {
    max-width: 750px;
    -ms-grid-columns: (calc(100% / 4)) [];
    grid-template-columns: repeat(4, calc(100% / 4));
  }

  .triols .section_overview .icon .item:nth-of-type(-n + 3):before {
    display: block;
    content: "";
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: #aebdc5;
  }
  .triols .section_overview .icon .item:nth-of-type(3),
  .triols .section_overview .icon .item:nth-of-type(4) {
    left: auto;
  }
  /* ================== AUDIO ==================  */
  .triols .section_audio .video-audio {
    width: auto;
    height: 100%;
  }

  /* ================== COMMS ================== */
  .triols .section_comms .bg {
    background: #24324c url(./img/control-spider.jpg) no-repeat bottom;
    background-size: 100% auto;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 60px;
    padding-bottom: calc((37.5vw / 906 * 351) + 20px) !important;
  }

  /* ================== CERTIFIED ================== */
  .triols .section_certified img {
    max-width: 15vw;
    height: auto;
  }

  .triols .section_certified {
    padding-bottom: 0;
    background: #30343b url(./img/super-xfi.jpg) no-repeat right top !important;
    background-size: auto 90% !important;
    background-position: right center !important;
  }

  section#features .triols .section_certified .col-lg-push-4 {
    left: 0% !important;
  }

  .triols .section_background .logo img {
    max-width: 15vw;
    height: auto;
  }
}

@media screen and (min-width: 1600px) {
  section#features .box {
    padding: calc(20px + (100 - 20) * ((100vw - 320px) / (2560 - 320)));
  }

  .triols .section_certified {
    background-size: auto 100% !important;
  }
}

@media screen and (min-width: 2000px) {
  .triols .section_certified {
    background-size: auto 120% !important;
    background-position: right top !important;
  }
}

@media screen and (max-width: 1199px) {
  section#features .box {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  section#features .section_comms .box {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media screen and (max-width: 479px) {
  .product-info-container,
  .product-info-container-light p,
  .product-info-container-dark p,
  .product-review-container {
    font-size: 16px;
  }
}