/*
reference
https://css-tricks.com/books/volume-i/scale-typography-screen-size/
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
check align self and justify self keyword on ie
and use -ms-grid-columns , to divide the percentage of each row from total to set for ie
*/

/* === Overview Section === */
.section_overview .txt1 {
  max-width: 1300px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none;
}

.section_overview h3 {
  font-family: atrament-web, Arial Narrow, sans-serif;
  font-size: calc(24px + (60 - 24) * ((100vw - 300px) / (2560 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(2560 - 300)));
  color: #000 !important;
  font-weight: bold;
}

.section_overview h3::after {
  display: none;
}

.section_overview .wrapper_icon {
  width: 94%;
  max-width: 768px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (50%)[2];
  grid-template-columns: repeat(2, 50%);
}

.section_overview .wrapper_icon>div {
  display: -ms-grid;
  display: grid;
  -ms-justify-items: center;
  justify-items: center;
  padding: 0px 12px 20px 12px;
  -ms-grid-rows: (50%)[2];
  grid-template-rows: repeat(2, 50%);
  -ms-grid-column-align: center;

}

.section_overview .wrapper_icon>div>div {
  display: -ms-grid;
  display: grid;
  height: 70px;
  align-items: center;
  justify-content: center;
  -ms-grid-column-align: center;
}

.section_overview .wrapper_icon img {
  max-height: 30px;
  max-width: 60px;
}

section#features .section_overview .wrapper_icon p,
.features-contents .section_overview .wrapper_icon p {
  font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (2560 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(2560 - 300)));
  color: #333;
  font-weight: 300;
  align-self: flex-start;
  text-align: center;
  margin-top: 10px;
}

/* === Waterproof Section === */
.section_waterproof {
  background: url('./water-splash-black.jpg') no-repeat;
  background-size: 140%;
  background-position: left bottom;
  padding-bottom: calc(140% / 2560 * 2248);
}

.section_waterproof h4.feature-subheader {
  float: left;
}

.section_waterproof h4.feature-subheader:after {
  background-color: #83f1ff;
}

.section_waterproof p {
  clear: both;
}

/* === Portable Section === */
.section_portable {
  background: url('./everywhere-orange-ls.jpg') no-repeat;
  background-size: 120%;
  background-position: bottom right;
  padding-bottom: calc(108% / 2560 * 1966);
  transition: all .2s ease;
}

.section_portable h4.feature-subheader {
  float: left;
}

.section_portable h4.feature-subheader:after {
  background-color: #ffee84;
}

.section_portable p {
  clear: both;
}

/* === Audio Section === */
.img_skate_board {
  position: absolute;
  -webkit-transform: rotate(-17deg);
  transform: rotate(-17deg);
  overflow: hidden;
  z-index: 0;
  width: 85%;
  height: auto;
  top: -34%;
  left: -28%;
}

.section_audio {
  position: relative;
  height: calc(120% * 1200 / 1600);
  overflow: hidden;
}

.section_audio:before {
  transition: .2s all ease;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #5e87c4 url('./orange-animation-bg.jpg') left top no-repeat;
  background-size: 120% auto;
  z-index: 0;
}

.section_audio .txt1 *,
.section_audio .txt2 * {
  z-index: 2;
}

.section_audio .txt2 {
  padding-bottom: 20px;
}

.section_audio h4.feature-subheader {
  float: left;
}

section#features .section_audio h4.feature-subheader,
.features-contents .section_audio h4.feature-subheader {
  margin-bottom: 3em;
}

.section_audio h4.feature-subheader:after {
  background-color: #f58e3f;
}

.section_audio h4.feature-subheader .txt_border_deg20 {
  position: absolute;
  bottom: calc(-1.1em - 30px);
  left: .9em;
  z-index: -1;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
  color: #fff;
  font-size: calc(23px + (57 - 23) * ((100vw - 300px) / (2560 - 300)));
  /*82% of origin h4*/
  width: 130%;
}

.section_audio h4.feature-subheader:before {
  content: '';
  position: absolute;
  top: calc(28px + (70 - 28) * ((100vw - 300px) / (2560 - 300)));
  left: 0;
  width: 120%;
  height: 180%;
  border: 4px solid #5593f5;
  z-index: -1;
}

.section_audio p {
  clear: both;
}

/* === Design Section === */
.section_design {
  position: relative;
  background: url('./black-ls.jpg') no-repeat bottom;
  background-size: 100% auto;
}

.section_design .wrapper_spider img.hidden-lg {
  max-width: 600px;
  width: 100%;
  height: auto;
  float: right;
  margin: 0 auto;
  display: block;
}

/* === Spider SVG Section Begin === */
.section_design .wrapper_spider {
  top: 5vw;
  transition: 3s all ease;
  background-color: transparent;
  overflow: auto;
}

.section_design .wrapper_spider.active {
  top: 0;
}

.section_design .wrapper_spider .svg-map polyline,
.section_design .wrapper_spider .svg-map line {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
}

.section_design .wrapper_spider .svg-map .st1,
.section_design .wrapper_spider .svg-map .st2_1,
.section_design .wrapper_spider .svg-map .st2_2,
.section_design .wrapper_spider .svg-map .st3,
.section_design .wrapper_spider .svg-map .st4,
.section_design .wrapper_spider .svg-map .st5,
.section_design .wrapper_spider .svg-map .st_dash_bottom,
.section_design .wrapper_spider .svg-map .st_dash_right {
  stroke-dasharray: 600;
  stroke-dashoffset: -600;
  stroke-width: 1;
}

.section_design .wrapper_spider .bluetooth {
  font-style: italic;
}

.section_design .wrapper_spider.active .svg-map .st1 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 1s;
  animation: map-st1 1s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st2_1 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 1.2s;
  animation: map-st1 1.2s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st2_2 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 2s;
  animation: map-st1 2s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st3 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 2.5s;
  animation: map-st1 2.5s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st4 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 3s;
  animation: map-st1 3s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st5 {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 3.5s;
  animation: map-st1 3.5s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st_dash_bottom {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 3s;
  animation: map-st1 3s;
  /*infinite*/
}

.section_design .wrapper_spider.active .svg-map .st_dash_right {
  stroke-dashoffset: 0;
  -webkit-animation: map-st1 3s;
  animation: map-st1 3s;
  /*infinite*/
}

@-webkit-keyframes map-st1 {
  from {
    stroke-dashoffset: -600;
  }

  25% {
    stroke-dashoffset: -600;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes map-st1 {
  from {
    stroke-dashoffset: -600;
  }

  25% {
    stroke-dashoffset: -600;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.section_design .wrapper_spider .svg-map text {
  opacity: 0;
  filter: alpha(opacity=0);
  transition: 2s all ease;
}

.section_design .wrapper_spider .svg_title {
  font-family: atrament-web, Arial Narrow, sans-serif;
  font-size: calc(28px + (70 - 28) * ((100vw - 300px) / (2560 - 300)));
  line-height: calc(1.1em + (1.4 - 1.2) * ((100vw - 300px)/(2560 - 300)));
  font-weight: 700;
}

.section_design .wrapper_spider .svg-map text.no-animation,
.section_design .wrapper_spider.active .svg-map text {
  opacity: 1;
  filter: alpha(opacity=100);
}

/* === Spider SVG Section End === */

/* === Connect Section === */
.section_connect {
  padding-bottom: calc(110% / 2560 * 1636);
  position: relative;
  overflow: hidden;
}

.section_connect .img1 {
  position: relative;
  margin: 0 auto;
  display: block;
}

.section_connect h4.feature-subheader {
  float: none;
  display: inline-block !important;
}

.section_connect h4.feature-subheader.subheader1:after {
  background-color: #73920f;
}

.section_connect h4.feature-subheader.subheader2:after {
  background-color: #5d509c;
}

.section_connect p {
  clear: both;
}

.section_connect .img-icon {
  max-width: 100px;
}

.section_connect .wrapper_icon {
  display: none;
}

.section_connect .wrapper_icon>div {
  display: -ms-grid;
  display: grid;
  align-items: center;
  justify-items: left;
  padding: 20px 12px 0 12px;
  -ms-grid-column-align: stretch;
  justify-self: stretch;
  -ms-grid-rows: (50%)[2];
  grid-template-rows: repeat(2, 50%);
}

.section_connect .wrapper_icon>div>div {
  display: -ms-grid;
  display: grid;
  height: 70px;
  align-items: center;
  justify-content: center;
  -ms-grid-column-align: center;
}

.section_connect .wrapper_icon p {
  align-self: flex-start;
  text-align: center;
}

.section_connect .img-pdt {
  position: absolute;
  right: 60px;
  width: 20%;
  bottom: calc(17vw * 2560 / 1636);
  transition: all 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.section_connect .img-pdt.active {
  bottom: calc(27vw * 2560 / 1636);
  padding-left: 0;
  background: none;
}

.section_connect .img-bg {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: auto;
}

.section_connect .btn_connect1 {
  position: relative;
  border: 1px solid #000;
  border-radius: 10px;
  font-size: calc(13px + (24 - 13) * ((100vw - 300px) / (2560 - 300)));
  font-weight: bold;
  color: #58585a;
  padding: 10px 50px 10px 10px;
  display: inline-block;
  cursor: pointer;
}

.section_connect .btn_connect1 i {
  position: absolute;
  right: 0;
  top: 10%;
  font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (2560 - 300)));
}

.section_connect .btn_connect1 i.i-arr-u-dbl,
.section_connect .btn_connect1.open i.i-angle-double-down {
  display: none;
}

.section_connect .btn_connect1.open i.i-arr-u-dbl,
.section_connect .btn_connect1 i.i-angle-double-down {
  display: block;
}

.section_connect .txt_connect1 {
  height: auto;
  max-height: 0;
  transition: all .8s ease;
  overflow: hidden;
  opacity: 0;
}

.section_connect .txt_connect1.open {
  max-height: 1080px;
  opacity: 1;
}

.section_connect .txt4 p:first-of-type {
  margin-top: 0;
}

.section_connect .txt_connect1 .video-muvoplay {
  width: 100%;
  height: auto;
  max-width: 650px;
  text-align: center;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: 1s opacity ease;
}

.section_connect .txt_connect1.open .video-muvoplay {
  opacity: 1;
  filter: alpha(opacity=100);
}

/* === Speakerphone Section === */
.section_speakerphone {
  background: url('./orange-ls.jpg') no-repeat;
  background-size: 100% auto;
  padding-top: calc(100% / 2560 * 1403);
}

.section_speakerphone .container-fluid {
  background: #0A1416;
  position: relative;
  height: 100%;
  padding-bottom: 10px;
}

.section_speakerphone h4.feature-subheader {
  float: left;
}

.section_speakerphone h4.feature-subheader:after {
  background-color: #e33f08;
}

.section_speakerphone p {
  clear: both;
}

.section_speakerphone .txt2 p:first-of-type {
  margin-top: 0;
}

@media screen and (min-width:425px) {
  .section_connect .wrapper_icon {
    justify-items: right;
    grid-auto-flow: column;
    width: 350px;
    float: right;
  }

  .section_connect .wrapper_icon>div {
    justify-items: center;
    padding: 20px 12px;
  }
}

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

  .section_waterproof h4.feature-subheader,
  .section_portable h4.feature-subheader,
  .section_audio h4.feature-subheader,
  .section_speakerphone h4.feature-subheader {
    left: 30px;
  }

  .section_overview .wrapper_icon img {
    max-height: 50px;
    max-width: 90px;
  }

  .section_audio .txt2 {
    /*padding-bottom:0;*/
  }

  .section_audio h4.feature-subheader .txt_border_deg20 {
    bottom: calc(-1.4em - 30px);
  }

  .section_waterproof {
    background-size: 100%;
    padding-bottom: calc(100% / 2560 * 2248);
  }

  .section_portable {
    background-size: 100%;
    padding-bottom: calc(98% / 2560 * 1966);
  }

  .section_speakerphone {
    background: url('./orange-ls.jpg') no-repeat;
    background-size: cover;
    height: calc(100vw / 2560 * 1403);
    padding-top: 0;
  }

  .section_speakerphone .container-fluid {
    background: rgba(0, 0, 0, 0.5);
    padding-bottom: 0;
  }

  .section_speakerphone .col-xs-12 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .section_connect .wrapper_icon {
    display: -ms-grid;
    display: grid;
    justify-items: left;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
  }

  .section_connect .wrapper_icon img {
    max-height: 50px;
    max-width: 90px;
  }
}

@media screen and (min-width:992px) {
  .section_audio {
    display: -ms-grid;
    display: grid;
    height: calc(200vw * 1200 / 1600);
    -ms-grid-rows: (33%)[2];
    grid-template-rows: repeat(2, 33%);
  }

  .section_audio:before {
    -webkit-clip-path: polygon(0 37%, 100% 2%, 100% 100%, 0 75%);
    clip-path: polygon(0 37%, 100% 2%, 100% 100%, 0 75%);
    z-index: 1;
  }

  .section_audio h4.feature-subheader:before {
    height: 170%;
  }

  .section_portable {
    background-size: cover;
    background-position: top;
    padding-bottom: 0;
    height: calc(130vw / 2560 * 1966);
  }

  .section_connect .txt2 {
    margin-top: -14vw;
  }
}


/* === LG === */
@media screen and (min-width:1200px) {
  .section_overview .wrapper_icon {
    max-width: 1600px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (14.28%)[7];
    grid-template-columns: repeat(7, 14.28%);
    justify-items: center;
    grid-auto-flow: column;
  }

  .storepage_2 .section_overview .wrapper_icon {
    -ms-grid-columns: (16.66%)[6];
    grid-template-columns: repeat(6, 16.66%);
  }

  .section_audio h4.feature-subheader:before {
    height: 160%;
  }

  .section_waterproof {
    background-size: cover;
    background-position: top;
    padding-bottom: 0;
    height: calc(100vw / 2560 * 2248);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .section_waterproof .txt2 .col-xs-12 {
    left: 54%;
    max-width: 720px;
  }

  .section_design {
    position: relative;
    margin-top: -120px;
    background: url('./black-ls.jpg') no-repeat bottom;
    background-size: 100% auto;
    display: -ms-grid;
    display: grid;
  }

  .section_design .bg1 {
    padding-top: 120px;
  }

  .section_design .wrapper_spider {
    position: relative;
    width: 56%;
    margin-right: 60px;
    padding: 2% 11% 9.5% 51px;
    background-color: #5ca9bc;
    -ms-grid-column-align: right;
    justify-self: right;
    align-self: flex-end;
    transition: all 1s ease;
  }

  .storepage_1 .section_design .wrapper_spider,
  .storepage_3 .section_design .wrapper_spider,
  .storepage_4 .section_design .wrapper_spider,
  .storepage_7 .section_design .wrapper_spider,
  .storepage_12 .section_design .wrapper_spider,
  .storepage_15 .section_design .wrapper_spider,
  .storepage_19 .section_design .wrapper_spider,
  .storepage_36 .section_design .wrapper_spider {
    width: 52%;
    padding: 2% 9% 9.5% 50px;
  }

  .section_design .wrapper_spider img {
    display: block;
    width: 60%;
    height: auto;
    margin: 0 0 auto auto;
  }

  .storepage_1 .section_design .wrapper_spider img,
  .storepage_3 .section_design .wrapper_spider img,
  .storepage_4 .section_design .wrapper_spider img,
  .storepage_7 .section_design .wrapper_spider img,
  .storepage_12 .section_design .wrapper_spider img,
  .storepage_15 .section_design .wrapper_spider img,
  .storepage_19 .section_design .wrapper_spider img,
  .storepage_36 .section_design .wrapper_spider img {
    display: block;
    width: 65%;
    height: auto;
    margin: 0 0 auto auto;
  }

  .section_design .wrapper_spider .svg-map {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 16px;
  }

  .section_connect {
    padding-bottom: calc(100vw / 2560 * 1636);
  }

  .section_connect .img-icon {
    max-width: 130px;
  }

  .section_portable {
    height: calc(110vw / 2560 * 1966);
  }

  .section_speakerphone .container-fluid {
    background: none;
  }

  .section_speakerphone .col-xs-12 {
    padding-left: 15px;
    padding-right: 15px;
  }

  .section_speakerphone .txt1,
  .section_speakerphone .txt2,
  .section_speakerphone .txt3 {
    position: absolute;
    left: 20px;
    width: 100%
  }

  .section_speakerphone .txt1 {
    bottom: 14%;
  }

  .section_speakerphone .txt2 {
    top: 14%;
  }

  .section_speakerphone .txt3 {
    bottom: 20px;
  }
}

/* === XL === */
@media screen and (min-width:1423px) {
  .section_portable {
    height: calc(100vw / 2560 * 1966);
  }

  .section_speakerphone .txt1,
  .section_speakerphone .txt2,
  .section_speakerphone .txt3 {
    left: 40px;
  }
}

/* === XL === */
@media screen and (min-width:1600px) {
  .section_audio h4.feature-subheader:before {
    height: 153%;
  }

  .section_speakerphone .txt2 {
    top: 24%;
  }

  .section_speakerphone .txt2 .col-xs-12 {
    width: 20%;
  }

  .section_connect {
    padding-bottom: calc(90vw / 2560 * 1636);
  }
}

/* === 2K === */
@media screen and (min-width:1920px) {
  .section_audio .txt2 .col-xs-12 {
    width: 25%;
  }

  .section_waterproof .txt2 .col-xs-12 {
    left: 61%;
  }

  .section_speakerphone .txt1,
  .section_speakerphone .txt2,
  .section_speakerphone .txt3 {
    left: 60px;
  }

  .section_speakerphone .txt2 {
    top: 30%;
  }
}

/*temp. fix*/
.storepage_2 .section_connect .btn_connect1 {
  display: inline-block;
}

.txt_connect1 iframe {
  display: block;
  margin-left: auto;
  margin-right: auto;
}