.img-icon {
  width: auto;
  height: 11vw;
  max-height: 170px !important;
}

.show {
  /*-webkit-transition: all 2s ease;
  transition: opacity 2s ease;*/
  opacity: 1 !important;
}

.flex-container {
  display: flex;
  flex-direction: column;
}

.background-animation > div {
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100vw;
}




/*goodlooks container*/

.goodlooks {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}


/*first image, pdt body*/

.goodlooks .body {
  max-width: 100%;
  width: 100%;
  height: auto;
}


/*second image, pdt cover*/

.goodlooks .cover {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 2px solid #fff;
  width: 15px;
  height: 100%;
  overflow: hidden;
}

.goodlooks .cover video {
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
}

.goodlooks .cover img {
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
  max-width: none;
}


/*last image, arrow*/

.goodlooks .arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: calc(50% - 15px) !important;
  right: 0;
  cursor: pointer;
}


.section_stayconnected.section_overlay > div {
  background: rgba(54, 57, 66, 0.6);
  width: 40%;
  height: 100%;
}

.section_stayconnected_content {
  display: flex;
  align-items: center;
}


.section_portability.section_overlay > div {
  width: 100%;
  height: 100%;
  background: rgba(42, 51, 78, 0.6);
}

.section_portability_content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-IPX5 {
  background: #2D3434;
  /*margin-top: -1px;*/
  padding-bottom: 1px;
}

.section-IPX5 p {
  color: #fff;
}


.section-smartassistant {
  height: calc(100vw * 961 / 2560);
  max-height: 961px;
  position: relative;
}

.section-smartassistant-content {
  height: calc(100vw * 961 / 2560);
}


/*reduce side spacing for conversion section*/

.section-conversion .container-fluid {
  padding: 0;
  max-width: 1000px;
}

.section-conversion .row {
  margin-left: 0;
  margin-right: 0;
}

.section-conversion .row > div {
  padding: 0;
}

.section-conversion h4,
.section-conversion p {
  color: #000 !important;
}

.section-conversion h4 {
  font-weight: 700;
  font-size: 19px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}

.section-conversion a {
  background: #000;
  color: #fff;
}


/*relative txt box to make it in front of the bg layer*/

.section-conversion .txt {
  position: relative;
  padding: 20px;
}


/*relative all element inside the txt box and not the div*/

.section-conversion .txt > *:not(div) {
  position: relative;
}

.section-conversion .section-learnhow .bg {
  background-color: #ffd202;
}

.section-conversion .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

@media(max-width:1199px) {
  .section-connectivity .row.breakout {
    margin-top: 0 !important;
    margin-bottom: 60px !important;
  }
  .section-connectivity {
    background-size: 100% auto;
    padding-top: calc(100vw * 818 / 2560);
    height: auto;
  }
  .section-smartassistant {
    height: auto;
  }
  .section-smartassistant-content {
    background-size: 100% auto;
    padding-top: calc(100vw * 961 / 2560);
    height: auto;
    margin-bottom: 40px;
  }
  .section-connectivity .feature-subheader,
  .section-connectivity p,
  .section-smartassistant-content .feature-subheader,
  .section-smartassistant-content p {
    color: #000;
  }
  .section-portability p,
  .section-stayconnected p,
  .section-portability .feature-subheader,
  .section-stayconnected .feature-subheader {
    color: #000 !important;
  }
  .flex-container > .flex-item-1 {
    order: 2;
  }
  .flex-container > .flex-item-2 {
    order: 1;
  }
}

@media(max-width:991px) {
  .mobile-custom {
    width: 100%;
  }
  .section_overlay > div {
    width: auto !important;
  }
  .section_overlay_h3 .row {
    margin-top: 0 !important;
  }
  .section_stayconnected {
    padding-top: calc(100vw * 1410 / 2560);
    height: auto;
    background-size: 100% auto;
  }
  .section_portability {
    padding-top: calc(100vw * 642 / 2560);
    height: auto;
    background-size: 100% auto;
  }
  .section_portability.section_overlay > div,
  .section_stayconnected.section_overlay > div {
    background: #fff !important;
  }
  .section_portability.section_overlay > div,
  .section_stayconnected.section_overlay > div {
    padding-top: 0;
  }
}

@media(max-width: 768px) {
  #features .row p + img,
  #features .row img + img {
    float: left;
    margin-left: 0;
  }
  .section-smartassistant .feature-subheader,
  .section-smartassistant p {
    padding: 0 4%;
  }
}

@media(max-width:767px) {
  .product-hero-container > .container {
    padding: 0;
  }
  .hero-wrapper img {
    margin-bottom: 0;
  }
  .product-hero-container.product-hero-container-dark {
    background: #fff !important;
  }
  .product-hero-container-dark .product-name-large {
    color: #000 !important;
  }
  .product-hero-container-dark .product-tagline {
    color: #595959 !important;
  }
  /*to create more space on mobile view so the button not so close to the nx section*/
  .section-conversion .row > div {
    margin: 0 auto 60px auto;
    max-width: 500px;
  }
}

@media(min-width:768px) {
  .section-connectivity-header {
    margin-bottom: -145px;
    margin-top: -71px;
    position: relative;
    z-index: 1;
  }
  .hero-wrapper img {
    display: none !important;
  }
  .section-conversion .section-learnhow .bg,
  .section-conversion .section-getintouch .bg {
    min-height: 240px;
  }
  .section-conversion .txt {
    padding-bottom: 80px;
  }
  .section-conversion .txt p:last-of-type {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}

@media(min-width:992px) {
  .section_stayconnected p,
  .section_portability p {
    color: #fff;
  }
  .section_stayconnected.section_overlay .feature-subheader,
  .section_portability.section_overlay .feature-subheader {
    margin-top: 0;
  }
}

@media(min-width:1060px) {
  .section-conversion .section-learnhow {
    left: -1%;
  }
  .section-conversion .section-getintouch {
    right: -1%;
  }
}

@media(min-width:1200px) {
  .section-IPX5 .row {
    margin-bottom: 0;
  }
  .section-IPX5 .row.breakout > div.col-xs-12:nth-of-type(2) {
    padding-left: 2%;
    padding-right: 3%;
  }
  .section_stayconnected.section_overlay > div {
    width: 40%;
    height: 100%;
  }
  .section-smartassistant-content {
    background-color: rgba(43, 29, 17, 0.6);
    width: 35%;
  }
  .section-smartassistant-content p {
    color: #fff;
  }
  .section-smartassistant .feature-subheader,
  .section-smartassistant p {
    padding: 0 10%;
  }
  .section_portability.section_overlay > div {
    padding: 5% 35% 0 35%;
  }
}

@media(min-width:1500px) {
  .section-connectivity p {
    padding: 0 20%;
  }
}

@media(min-width:1800px) {
  .section_stayconnected.section_overlay > div {
    padding: 0 8%;
  }
  .section-IPX5 img {
    margin: 0 !important;
  }
  .section-IPX5 .col-xs-12:nth-of-type(1) {
    width: 60%;
  }
  .section-IPX5 .col-xs-12:nth-of-type(2) {
    width: 40%;
  }
  .section-IPX5 .row.breakout > div.col-xs-12:nth-of-type(2) {
    padding-left: 5%;
    padding-right: 12%;
  }
  .section-connectivity .col-lg-3 {
    width: 16.66666667%;
  }
}

@media(min-width: 1920px) {
  .section_stayconnected.section_overlay > div {
    width: 40% !important;
  }
}

@media(min-width:769px) and (max-width:1199px) {
  .section-connectivity-header {
    margin-bottom: 0;
  }
  .section-connectivity-header h3 {
    color: #000 !important;
  }
}

@media(min-width:992px) and (max-width:1199px) {
  .section_portability.section_overlay > div {
    padding: 5% 15% 0 15%;
  }
}


/*section flex-valign css start*/

@media(min-width:1200px) {
  .breakout.md-valign-middle,
  .breakout.md-valign-bottom {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  .breakout.md-valign-middle {
    -ms-align-items: center;
    align-items: center;
  }
  .breakout.md-valign-bottom {
    -ms-align-items: flex-end;
    align-items: flex-end;
  }
  .breakout.md-valign-middle .absolute-container,
  .breakout.md-valign-bottom .absolute-container {
    position: absolute;
    top: 120px;
    left: 30%;
    display: block;
    width: 40%;
  }
  .breakout.md-valign-middle > div > .row {
    margin-top: 0;
    margin-bottom: 0;
  }
  .breakout.md-valign-bottom > div > .row {
    margin-top: 0;
    margin-bottom: 60px;
  }
}

@media(min-width:2000px) {
  .breakout.lg-valign-middle,
  .breakout.lg-valign-bottom {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  .breakout.lg-valign-middle {
    -ms-align-items: center;
    align-items: center;
  }
  .breakout.lg-valign-bottom {
    -ms-align-items: flex-end;
    align-items: flex-end;
  }
  .breakout.lg-valign-middle .absolute-container,
  .breakout.lg-valign-bottom .absolute-container {
    position: absolute;
    top: 120px;
    left: 30%;
    display: block;
    width: 40%;
  }
  .breakout.lg-valign-middle > div > .row {
    margin-top: 0;
    margin-bottom: 0;
  }
  .breakout.lg-valign-bottom > div > .row {
    margin-top: 0;
    margin-bottom: 60px;
  }
}