#features img.img-icon{
  margin-left: 0;
  float: left;
  max-height:72px;
}

#features img.img-icon:not(:last-of-type) {
  margin-right: 10px;
}

.section_audio {
  background: url('./bg_audio.jpg') no-repeat;
  background-size: cover;
  height: calc(100vw * 1096 / 2560);
  max-height: 1096px;
}

.section_audio.section_overlay > div {
  background: rgba(7, 200, 200, 0.92);
}

.section-battery {
  background: #13a8b7;
  margin-top: -1px;
}

.section-battery p {
  color: #000;
}

.section-connectivity {
  background: #fff url('./bg_connectivity.jpg') no-repeat top left;
  background-size: 70% auto;
  min-height: calc(70vw * 1130 / 1904);
}

.section-connectivity p {
	color: #000 !important;
}

.section-connectivity .icon {
  float: left;
  margin-left: 10px;
  text-align: center;
}

.section-connectivity .icon p {
  margin-top:10px;
}

.section-CrossSell {
  background: url('/inline/products/23164/footer_metallixplus.jpg') no-repeat;
  background-size: cover;
  height: calc(100vw * 710 / 2560);
  max-height: 710px;
}

.section-CrossSell .button.button-medium {
  background: #1BAABA !important;
  color: #fff !important;
  width: auto;
}

.section-siri {
  position:relative;
  background: url('./siri-bg1.jpg') no-repeat right bottom;
  background-size: auto 104%;
  height: calc(110vw * 915 / 2300);
}

/*use to full fill the siri section, easier to flex align the content*/
.section-siri .container-fluid,
.section-siri .row{
  height:100%;
}

.section-siri.ready .slick-siri,
.section-siri .text{
  display: -ms-flexbox;
    display: flex;
    -ms-align-self: flex-end;
    align-self: flex-end;
}
.section-siri .slick-siri,
.section-siri .text{
    margin:70px 0;
}

.section-siri .slick-siri{
  max-width:609px;
}

/*to hide the second image when the slick haven finish */
#features .section-siri .slick-siri > img:last-of-type {
  display:none;
}

.section-mp3 {
  background: url('./bg_mp3.jpg') no-repeat top;
  background-size: cover;
  min-height: calc(100vw * 1306 / 2560);
}

.section-stereo {
  background: url('./bg_stereo.jpg') no-repeat top;
  background-size: cover;
  min-height: calc(100vw * 1074 / 2560);
}

.section-palm {
  background: url('./palm2.jpg') no-repeat top;
  background-size: cover;
  min-height: calc(100vw * 1165 / 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 .section-getintouch .bg {
  background: #a1c6d8 url('/inline/products/23164/need_help.png?crop=(0,408,616,614)') no-repeat;
  background-size: 100% auto;  
  opacity:0.5;  
}

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

@media(max-width:1660px) {
  .section-siri .slick-siri,
  .section-siri .text {
    margin:30px 0;
  }
}

@media (max-width: 1440px) {
  .section-CrossSell-header {
    margin-bottom: 0;
  }
}

@media(max-width:1340px) {
  .section-siri {
    padding-bottom: calc(100vw * 915 / 2300);
    height: auto;
    background-size: 100% auto;
    background-position:left bottom;
    background-color:#000;
  }
}

@media(max-width:1199px) {
  .section-connectivity {
    background-size: 100% auto;
    padding-top: calc(100vw * 1130 / 1904);
    min-height: auto;
  }
  .section-mp3 {
    background-size: 100% auto;
    padding-top: calc(100vw * 1306 / 2560);
    min-height: auto;
  }
  .section-mp3.product-info-container-dark .feature-subheader {
    color: #000;
  }
  .section-mp3 p {
    color: #595959;
  }
  .section-stereo {
    background-size: 100% auto;
    padding-top: calc(100vw * 1074 / 2560);
    min-height: auto;
  }
  .section-palm {
    background-size: 100% auto;
    padding-top: calc(100vw * 1165 / 2560);
    min-height: auto;
  }
  .section-CrossSell {
    padding-top: calc(160vw * 710 / 2560);
    height: auto;
    background-size: 160% auto;
    background-position: 100% 0;
  }
}

@media(max-width:991px) {
  .section_audio {
    padding-top: calc(100vw * 1096 / 2560);
    height: auto;
    background-size: 100% auto;
  }  
  .section-siri.ready .slick-siri,
  .section-siri .text {
    -ms-align-self: flex-end;
      align-self: flex-end;
  }
  .sm-top-margin {
    margin-top: 60px;
  }
  .section-CrossSell.product-info-container-light.section_overlay > div {
    background: #fff;
  }
}

@media(max-width:767px) {
  .product-hero-container > .container {
    padding:0;
  }

  .hero-wrapper img {
    margin-bottom:0;
  }
  /*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;
  }
  .section-siri {
    padding-bottom: calc(110vw * 915 / 2300);
    background-size: 140% auto;
    background-position:left bottom;
  }
  .section-siri .row {
    margin-bottom:30px;
  }
  .section-siri .col-xs-12 + .col-xs-12 {
    margin-top:0;
  }
  .section-siri .slick-siri {
    margin-left:auto;
    margin-right:auto;
  }
  .section-siri .slick-siri,
  .section-siri .text {
    display:block;
  }
  section#features .section-conversion .txt p:last-of-type {
    text-align:right;
  }
}

@media(min-width:768px) {
  .product-hero-container {
    background: url('/images/products/hero/creative-metallix/hero-metallix.jpg') no-repeat center;
    background-size: cover;
  }
  .hero-wrapper img {
    display: none !important;
  }
  .section-conversion .txt {
    padding-bottom: 80px;
  }
  .section-conversion .txt p:last-of-type{
    position:absolute;
    right:20px;
    bottom:20px;
  }
  .breakout.section-siri .row img {
    max-height:calc(110vw * 915 / 2300);
  }
  .section-siri .text {
    right: 20%;
  }
  .section-siri .slick-siri {
    left: 58.33333333%;
  }
}

@media(min-width:992px) {
  .section_audio p {
    color: #fff;
  }
  .section_audio.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-stereo {
    text-align: center;
  }
  .section-battery .row {
    margin-bottom: 0;
  }
  .section-battery .row.breakout > div.col-xs-12:nth-of-type(2) {
    padding-left: 2%;
    padding-right: 3%;
  }
  .section-mp3 .text {
    padding: 30px 30px;
  }
  .section-mp3 .feature-subheader {
    margin-top: 0;
  }
  .section_audio.section_overlay > div {
    width: 46%;
  }
  .section-CrossSell.product-info-container-light .feature-subheader,
  .section-CrossSell.product-info-container-light p {
    color: #fff !important;
  }
  .section-CrossSell .col-lg-4 {
    max-width: 600px;
  }
}

@media(min-width: 1441px) {
  .section-CrossSell-header {
    margin-bottom: -145px;
    margin-top: -71px;
    position: relative;
    z-index: 1;
  }
}

@media(min-width:1800px) {
  .section_audio.section_overlay > div {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .section-battery .col-xs-12:nth-of-type(1) {
    width: 75%;
  }
  .section-battery .col-xs-12:nth-of-type(2) {
    width: 25%;
  }
  .section-battery .row.breakout > div.col-xs-12:nth-of-type(2) {
    padding-left: 3%;
    padding-right: 4%;
  }
  .section-connectivity .col-lg-3 {
    width: 16.66666667%;
  }
  .section-palm .container-fluid:not(.absolute-container) .col-xs-12 {
    margin-top: 6vw;
  }
}

@media(min-width: 1920px) {
  .section-mp3 .product-info-row > .col-xs-12 {
    width: 50%;
  }
  .section_audio.section_overlay > div {
    width: 40% !important;
  }
}

@media(min-width:2100px) {
  .section-siri .text {
    margin-bottom: 6vw;
    width: 24%;
    right: 11%;
  }
}

@media(min-width: 1200px) and (max-width: 1799px) {
  .lg-align-top {
    top: -30px;
  }
}

@media(min-width:1200px) and (max-width:1919px) {
  .section-mp3 {
    background-size: 140vw auto !important;
    background-position: left bottom !important;
  }
}

@media(min-width:1200px) and (max-width:2000px) {
  .section-mp3 .text {
    background: rgba(76, 25, 110, 0.85);
  }
}

/*no-top-margin css start*/
@media(min-width:768px) and (max-width:991px) {
  .sm-no-top-margin {
    margin-top: 0;
  }
  .section-CrossSell h4,
  .section-CrossSell p {
    text-align: center !important;
  }
}

@media(min-width:992px) and (max-width:1199px) {
  .md-no-top-margin {
    margin-top: 0;
  }
}
/*no-top-margin css end*/

/*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;
  }
}
/*section flex-valign css end*/

/*video section*/
.section-driver {
  background:#000;
  position:relative;
}
.section-driver.video_ready .container {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 90%;
  left: 5%;
}
#video_23164_driver {
  display: block;
  width: 100vw;
  margin: 0 auto;
}

.features-contents #video_23164_driver {
  display: block;
}

@media(min-width:1200px) {
  #video_23164_driver {
    max-height:87vh !important
  }
  .features-contents #video_23164_driver {
    min-width: 150%;
  }
  .section-driver.video_ready #img_driver{
    display:none !important;
  }
}

@media(min-width:1800px) {
  .section-driver.video_ready .container{
    top:3%;
    width: 50%;
    left: 25%;
  }
}
/*end video section*/

/*special tweak for slide on screen 768 to 991*/
@media(min-width:768px) and (max-width:1340px){
  .section-siri .slick-siri {
    bottom: 0;
    position: absolute;
    right: 0;
  }
  .section-siri .text {
    width:100%;
    right: auto;
    margin-top:0;
  }
}
@media(min-width:991px) and (max-width:1340px){
  .section-siri .text {
    width:80%;
    right: auto;
    margin-top:0;
    left:10%;
  }
}