@import url('https://use.typekit.net/fgv7kbq.css');

/* global */
html span.nowrap {
  white-space: nowrap;
}


.product-hero-container h1{
  font-family: 'proxima-nova', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
}


.product-hero-container .productname{
  font-family: 'kallisto', 'proxima-nova', sans-serif;
  font-size: clamp(24px, 4vw, 120px);
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}


#features table.border {
  width: 100%;
  color: #000;
}

#features .product-info-container-dark table.border {
  color: #fff;
}

#features table.border th {
  font-size: 18px;
  line-height: 1.1;
  font-weight: bold;
  padding: 10px 10px 10px 0;
}

#features table.border td {
  vertical-align: middle;
  padding: 10px;
  border: 2px solid #000;
  font-size: 12px;
}

#features .product-info-container-dark table.border td {
  border: 2px solid #fff;
}

#features table .bullet {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 5px;
  display: inline-block;
}

#features table .bullet.purple {
  background-color: purple;
}

#features table .bullet.white {
  background-color: white;
}

#features table .bullet.blue {
  background-color: blue;
}

#features table .bullet.green {
  background-color: green;
}

.green-text{
  color: #20f3d3;
}

#features table .bullet.red {
  background-color: red;
}

#features table .bullet.flash {
  animation: flash .5s linear infinite;
}

#features table .bullet.pulse {
  animation: pulse 1.2s linear infinite;
}

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

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

@media screen and (min-width: 768px) {
  #features table.border td {
    font-size: 16px;
  }
}


#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 {
  color: #4e4f60;
}
#features .product-info-container-dark .feature-header::after {
  color: #20F3D3;
}

#features h5 {
  font-family: 'graphie', 'proxima-nova', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3vw, 48px);
  color: #897766;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

#features p{
  text-align: center !important;
}

@media screen and (min-width: 768px) {
  #features p{
    text-align: left !important;
  }
}

#features .feature-subheader {
  font-family: 'kallisto', 'proxima-nova', sans-serif;
  font-size: clamp(24px, 3vw, 100px);
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
}

html[lang="en"] #features .feature-subheader {
  font-size: clamp(24px, 3vw, 80px);
}

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

#features p {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.4;
  font-weight: 400;
  margin: 0.5em 0;
}

#features p.smallfont {
  font-size: clamp(14px, 1.3vw, 18px);
}

#features p.footnote {
  color: #999;
  font-size: clamp(14px, 1.3vw, 18px);
}

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

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

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

#features .product-info-container-dark p {
  color: #fff;
}

#features .green_txt,
.product-hero-container .green_txt {
  color: #2be1b8 !important;
}

#features .white_txt {
  color: #fff !important;
}

#features .darkgrey_txt,
.product-hero-container .darkgrey_txt {
  color: #2e3033 !important;
}

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

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

#features .wrapper_button_control {
  text-align: left !important;
}

#features .product-info-container-light .button_control {
  border: 2px solid black;
  color: black;

  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 11px 40px 10px 20px;
  text-transform: uppercase;
}

#features .product-info-container-dark .button_control {
  border: 2px solid white;
  color: #fff;

  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 11px 40px 10px 20px;
  text-transform: uppercase;
}

@-webkit-keyframes flash {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes flash {
  0% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.1;
  }

  100% {
    opacity: 1.0;
  }
}

@-webkit-keyframes pulse {
  0% {
    opacity: 1.0;
  }

  20% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.1;
  }

  80% {
    opacity: 1.0;
  }

  100% {
    opacity: 1.0;
  }
}

@keyframes pulse {
  0% {
    opacity: 1.0;
  }

  20% {
    opacity: 1.0;
  }

  50% {
    opacity: 0.1;
  }

  80% {
    opacity: 1.0;
  }

  100% {
    opacity: 1.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 .flex-valign-middle {
    flex-direction: column;
  }
}

@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;
  }
}

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

.product-hero-container {
  padding-bottom: calc(100vw * 838 / 828);
  background: #000 url('./watcher_mobileMHL.jpg') no-repeat bottom;
  background-size: 100% auto;
  padding-top: 0;
}

.product-hero-container .product-tagline {
  font-size: clamp(19px, 1.8vw, 30px);
  color: #fff;
}

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

/* .product-hero-container .product-name-large {
  font
} */

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

.gallery-thumbnail>ul {
  margin: 0 !important;
}

@media screen and (min-width:768px) {
  .product-hero-container {
    background: #000 url('./watcher_MHL.jpg') no-repeat 30% 50%;
    background-size: cover;
    min-height: calc(130vw * 1000 / 2560);
    padding-bottom: 0;
  }
  .product-hero-container .container {
    width: 40vw;
    margin: 0;
    left: calc(10vw - 15px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .product-hero-container h2 {
    width: 100%;
    max-width: 850px;
  }
  .product-hero-container .pdtname-logo {
    margin: 20px 0;
    width: 100%;
  }

  .product-hero-container .pdtname-logo img {
    width: 100%;
    max-width: 1023px;
  }

  .gallery-thumbnail {
    margin-bottom: 0;
    width: 280px;
  }

  .gallery-thumbnail>ul {
    margin-top: 20px;
    margin-bottom: 0;
  }
}

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

  h3.feature-header {
    text-align: left;
  }
  #features .flex-custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #features .flex-custom-valign-top {
    align-items: flex-start;
  }
}

@media screen and (min-width: 1920px) {
  .product-hero-container {
    min-height: calc(100vw * 1192 / 2560);
  }
  #features .max-1920 {
    width: 100vw;
    max-width: 1920px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* section overview */
#features .section_overview {
  background: #121319;
}

#features .section_overview h3.feature-header {
  color: #434f60;
}
#features .section_overview h3.feature-header::after{
  color: #20F3D3;
}

#features .section_overview p {
  color: #bcc6e3;
  font-weight: lighter;
}

#features .section_overview .logo-descriptors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
}

#features .section_overview .logo-descriptors>div {
  background-color: #121319;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#features .section_overview .logo-descriptors p {
  text-align: center !important;
}

#features .section_overview .logo-descriptors>div img {
  max-height: 46px;
  width: auto;
  height: 100%;
  object-fit: contain;
}

#features .section_overview .logo-descriptors img.scale-down20 {
  transform: scale(0.8);
}

#features .section_overview .logo-descriptors img.scale-down40 {
  transform: scale(0.6);
}

#features .section_overview .row.breakout{
  margin-bottom: 0px;
}

#features .section_overview .text-overview>p {
  text-align: center !important;
}

@media screen and (min-width: 768px) {
  #features .section_overview .container {
    width: 90%;
    max-width: 1440px;
  }

  #features .section_overview .text-overview>p {
    text-align: center !important;
  }

  #features .section_overview .row.breakout{
    display: flex;
    flex-direction: column;
  }

  #features .section_overview .logo-descriptors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    background-color: #121319;
    grid-gap: 1px;
  } 
}

@media screen and (min-width: 1200px) {
  #features .section_overview .logo-descriptors {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

/* section performance */
#features .section_performance {
  background: linear-gradient(to bottom, #1b1e26, #0c0d11);
}

#features .section_performance h6 {
  font-size: clamp(24px, 3vw, 48px);
  color: #fff;
  line-height: 1.2;
  text-align: center !important;
}

#features .section_performance h4 {
  text-align: center !important;
}


#features .section_performance p {
  color: #bcc6e3;
  font-weight: lighter;
  text-align: center !important;
}

#features .section_performance h3 {
  margin-bottom: 30px !important;
}

@media screen and (min-width: 992px) {
  #features .section_performance .container .text_container {
    z-index: 1;
  }

  #features .section_performance .container-fluid .row {
    overflow: visible;
  }

  #features .section_performance .row.breakout{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #features .section_performance p {
    text-align: left !important;
  }
  #features .section_performance h6 {
    text-align: left !important;
  }

  #features .section_performance p.feature-subtext {
    text-align: center !important;
  }

  #features .section_performance .container-fluid img {
    width: 100%;
    object-fit: cover;
    object-position: left bottom;
  }

  #features .section_performance .row.performance-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1920px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #features .section_performance .details{
    display: flex;
    flex-direction: row-reverse;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    gap: 2.5vw;
    flex-wrap: nowrap;
  }
  #features .section_performance .details div {
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
  #features .section_performance .details:nth-child(1) div,
  #features .section_performance .details:nth-child(3) div {
    left: -2vw;
  }
  #features .section_performance .details:nth-child(2) div {
    left: 2vw;
  }
  #features .section_performance p {
    margin-bottom: 0;
  }
  /* #features .section_audio h3::after {
    width: 65%;
    margin: 0;
  } */
}

#features .section_modes {
  background-color: #0c0d11;
}

#features .section_modes h1{
  color: #fff;
  text-align: center !important;
  font-weight: bold;
}

#features .section_modes h4{
  text-align: center !important;
}

#features .section_modes .iframeitem {
  display: block;
  width: 100%;
  height: 85%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  max-height: 440px;
}

#features .section_modes p{
  font-weight: bold;
}

#features .section_modes .modes {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap:20px;
}

.storepage_20 #features .section_modes .modes {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap:20px;
}

@media screen and (min-width: 768px) {
  #features .section_modes .modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 40px;
  }   

  .storepage_20 #features .section_modes .modes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-gap: 40px;
  }   
}



/* section customisable */
#features .section_customisable {
  background: #0c0d11;
}

#features .section_customisable h1{
  color: #fff;
  text-align: center !important;
  font-weight: bold;
}

#features .section_customisable h4 {
  text-align: center !important;
}

#features .section_customisable p {
  color: #bcc6e3;
  font-weight: lighter;
}

#features .section_customisable .row.breakout{
  margin-bottom: 0px;
}

#features .section_customisable .text-2ndcustomisable{
  padding: 0 !important;

}

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

  #features .section_customisable h1{
    text-align: left !important;
  }

  #features .section_customisable h4 {
    text-align: left !important;
  }

  #features .section_customisable .row.breakout{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
  }

  #features .section_customisable .text-customisable{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #features .section_customisable .text-2ndcustomisable{
    padding-left: 15px !important;
    padding-right: 15px !important;
  
  }
}


/* section sensors */
#features .section_sensors {
  background: #14161d;
}

#features .section_sensors h1{
  color: #fff;
  text-align: center !important;
  font-weight: bold;
}

#features .section_sensors p {
  color: #bcc6e3;
  font-weight: lighter;
}

#features .section_sensors h4 {
  text-align: center !important;
}


#features .section_sensors .row.breakout{
  margin-bottom: 0px;
}

#features .section_sensors .text-2ndsensor{
  padding: 0 !important;
}

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

  #features .section_sensors h1{
    color: #fff;
    text-align: left !important;
    font-weight: bold;
  }

  #features .section_sensors h4 {
    text-align: left !important;
  }

  #features .section_sensors .text-sensor{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #features .section_sensors .row.breakout{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  #features .section_sensors .text-2ndsensor{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
}

/* section controls */
#features .section_controls {
  background: #14161d;
}

#features .section_controls h1{
  color: #fff;
  text-align: center !important;
  font-weight: bold;
}

#features .section_controls h4 {
  text-align: center !important;
}

#features .section_controls p {
  color: #bcc6e3;
  font-weight: lighter;
}

#features .section_controls .row.breakout{
  margin-bottom: 0px;
}


/* section camera */
#features .section_camera {
  background: #e0e1e5;
}

#features .section_camera .row.breakout{
  display: flex;
  align-items: center;
  flex-direction: column;
}

#features .section_camera h1{
  color: #000;
  text-align: center !important;
  font-weight: bold;
}

#features .section_camera  .feature-subheader{
  color: #000;
}

#features .section_camera p {
  color: #000;
  font-weight: lighter;
}

#features .section_camera ul{
  margin-bottom: 10px;
}

#features .section_camera .row.breakout{
  margin-bottom: 0px;
}

@media screen and (min-width: 768px) {
  #features .section_camera .camrow{
    display: flex; 
    gap: 4em;
    max-width: 70%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 1200px){
  #features .section_camera .camrow{
    max-width: 60%;
  }
}


/* section box */
#features .section_box {
  background: #f6f7f6;
}

#features .section_box h3.feature-header{
  color: #a0a1ab !important;
}

#features .section_box h3.feature-header::after{
  color: #20F3D3;
}

#features .section_box h1{
  color: #fff;
  text-align: center !important;
  font-weight: bold;
}

#features .section_box .product-info-row{
  margin-bottom: 0px !important;
}

#features .section_box p {
  color: #000;
  font-weight: lighter;
}

#features .section_box ul{
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  #features .section_box .row.breakout{
    display: flex;
    justify-content: center;
    max-width: 1920px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (min-width: 992px) {
  .clear-desktop-margin {
    margin: 0 !important;
  }
}