/*#region default*/
/*@media (min-width: 450px)
/* @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } */

:root {
  --devHeight: 86vh;
  --offset-top: 58px;
}

.clear {
  clear: both;
}

#container-soundblaster .md-select-value>span:not(.md-select-icon) {
  padding-left: 25px;
}

.no-focus-border {
  border: none;
  outline: none;
}

div.line-horizontal {
  width: 100vw;
  height: 2px;
  z-index: 2;
  background-color: #fff;
}

div.line-vertical {
  width: 100vw;
  height: 2px;
  z-index: 2;
  background-color: #fff;
}

div.line-short {
  display: none;
}

.text-black {
  color: #000;
}

.text-light {
  color: #9cb7ff;
}

.text-white {
  color: #fff;
}

.bg-blue {
  background-color: #4b69b8;
}

.bg-gray {
  background-color: #f2f2f2;
}

#container-soundblaster,
#container-soundblaster button {
  color: #161b39;
  font-family: 'gill-sans-nova', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

body #container-soundblaster .md-text {
  font-size: 1em;
  font-family: 'gill-sans-nova', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

html[lang="JA-JP"] #container-soundblaster .product-info-container {
  font-size: 14px;
}

#container-soundblaster .product-info-container {
  font-size: 16px;
}

#container-soundblaster p {
  font-size: 1em;
  font-weight: 400;
}

#container-soundblaster p.thinner {
  font-weight: 400;
}

#container-soundblaster p.small {
  font-size: 0.9em;
  font-weight: 400;
}

#container-soundblaster p.bold {
  font-weight: 600;
}

#container-soundblaster p.footnote {
  font-size: 0.8em;
  font-weight: 400;
  font-style: italic;
}
html[lang="JA-JP"] #container-soundblaster h2{
  font-size: 2.5em;
}

#container-soundblaster h2{
  line-height: 1em;
  margin-top: 0;
  font-size: 2.75em;
  font-weight: 400;
}

#container-soundblaster h3{
  line-height: 1em;
  margin-top: 0;
  font-size: 2em;
  font-weight: 400;
}

#container-soundblaster h3.bold {
  font-weight: 700;
}

b {
  font-weight: 700;
}

#container-soundblaster h4{
  font-size: 1em;
  font-weight: 600;
}

#container-soundblaster h5{
  font-size: 1.4em;
  font-weight: 600;
}

#container-soundblaster [role=button] {
  outline: none;
}

#banner .left-image,
#banner .right-image {
  position: absolute;
  height: 100%;
}

#banner .left-image {
  top: 45px;
  left: 0;
}

#banner .right-image {
  right: 0;
  top: 0;
  text-align: right;
}

#banner .left-image img,
#banner .right-image img {
  height: 200%;
}

#banner .btn {
  text-align:center;
}

#banner .btn a {
  margin-top:20px;
  padding:10px 20px;
  background-color:#90acf4;
  color:#2a1948;
  border-radius:32px;
  display:inline-block;
  font-weight:400;
}

#banner .btn a + a {
  margin-left:8px;
}

#buying-guide {
  position: relative;
}

#buying-guide .footnote a{
  color: inherit;
  border-bottom: 1px solid;

}

#buying-guide .stage-list,
#buying-guide .device-list,
#buying-guide .price-list {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 20px auto;
}

#buying-guide .stage-list li {
  display: inline-block;
  width: 32%;
  text-transform: uppercase;
}

#buying-guide .btn-find {
  margin: 5px;
  padding: 0.5em 0.9em;
  border-radius: 1.5em;
  background-color: #351948;
  text-transform: uppercase;
  font-weight: 300;
  color: #fff;
  width: 40%;
  display: inline-block;
  cursor: pointer;
}

#buying-guide .stage-list span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius:  15px;
  background-color: #d0d0d0;
  color: #fff;
  text-align: centr;
  margin-right: 10px;
}

#buying-guide .stage-list .selected span {
  background-color: #2d2c6c;
}

#buying-guide .device-list li,
#buying-guide .price-list li {
  display: inline-block;
  width: 12%;
  height: auto;
  margin: 20px;
  outline: none;
  width: 33%;
}



#buying-guide .price-list li {
  width: 33%;
}

#buying-guide .stage h3{
  margin: 0;
}

#buying-guide svg {
  width: 100%;
  height: 100%;
  overflow: inherit;
}

#buying-guide svg .st0,
#buying-guide svg .st1,
#buying-guide svg .st2,
#buying-guide svg .st3,
#buying-guide svg .st4,
#buying-guide svg .st5,
#buying-guide svg .st6 {
  fill: none !important;
  stroke: #777;
  stroke-width: 2px;
}

#buying-guide svg rect.st0,
#buying-guide svg rect.st1,
#buying-guide svg rect.st2,
#buying-guide svg rect.st3,
#buying-guide svg rect.st4,
#buying-guide svg rect.st5,
#buying-guide svg rect.st6 {
  fill: none !important;
  stroke: #eeeeee;
  stroke-width: 0px;
}


#find-modal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 120vh;
  left: 0;
  background: #fff;
  z-index: 30;
  transition: top 300ms ease-in-out;
  overflow: hidden;
}

#find-modal md-select{
  width: 80%;
  margin: 0 auto;
}

#find-modal md-select:focus md-select-value {
  border-bottom: 2px solid #9cb7ff;
}

#find-modal .md-select-icon {
  color: #9cb7ff;
}

#find-modal md-select-value {
  color: #fff;
  border-bottom: 2px solid #9cb7ff;
}

#find-modal.show {
  top: 0;
  transition: top 300ms ease-in-out;
}

#find-modal .close-popup {
  position: absolute;
  top: var(--offset-top);
  right: 1em;
  z-index: 50;
}

#find-modal .close-panel {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 31;
}

#find-modal .modal-mask {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 32;
  top: 0;
  left: 0;
}

#find-modal .modal-sort {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 32;
  background-color: #fff;
}

#find-modal .modal-sort {
  color: white;
  background-color: #161b39;
  padding: 6px 5px 12px 10px;
}

#find-modal .find-panel {
  background-color: #13204a;
  height: calc(100vh - var(--offset-top));
  color: #fff;
  text-align: center;
  position: absolute;
  left: -70vw;
  margin-top: var(--offset-top);
  z-index: 33;
  transition: all 300ms ease-in-out
}

#find-modal .find-panel.show {
  left: 0;
  width: 70vw;
  transition: all 300ms ease-in-out
}

#find-modal .result-list {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: calc(100vh - var(--offset-top));
  margin-top: var(--offset-top);
}

#find-modal .find-results {
  display: flex;
  flex-flow: row wrap;
  padding-bottom: 60px;
}

#find-modal .find-result {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
  margin: 20px auto 40px 0;
}
#find-modal .find-result p {
  max-width: 800px;
  margin-right: auto;
}

#find-modal .result-summary {
  margin-bottom: 60px;
}

#find-modal .result-mark {
  position: absolute;
  top: 1em;
  left: 1em;
  background-color: #351948;
  border-radius: 2.5em;
  height: 5em;
  width: 5em;
}
#find-modal .result-mark p {
  line-height: 1em;
  margin: 0;
  color: white;
  font-weight: bold;
  margin-top: 1.5em;
}

#find-modal .result-features {
  padding: 0px 15px;
}

#find-modal .button {
  margin-top: 20px;
  background: #351948;
  border-radius: 1.5em;
  font-size: inherit;
}



#why {
  background-position: center center;
  background-size: cover;
}

#why .image-head {
  padding: 0;
}

#why .why-audio {
  text-align: center;
}


#why .audio-list {
  list-style: none;
  max-width: 500px;
  padding: 0;
  margin: 60px auto;
}

#why .audio-list li {
  display: inline-block;
  width: 43%;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}


#why .audio-list li.isActived {
  font-weight: 400;
}


#why .audio-list li img {
  width: 50%;
  display: block;
  margin: 0 auto 10px;;
}

#banner a {
  color: inherit;
  border-color: inherit;
}

#series .item-list {
  display: flex;
  flex-wrap: wrap;
}

#series .item {
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  text-align: center;
}

#series .item p,
#series .item h3,
#series .item h4 {
  padding: 0 20px;
}

#series .item h3 {
  margin-top: 60px;
}

#series .item h4 {
  margin-bottom:0;
}

#series .item p {
  text-align: justify;
}

#series a {
  margin-top: auto;
}

#series button {
  width: 100%;
  margin-top: auto;
  height: 3em;
  background: none;
  border: 1px solid;
  font-weight: 600;
}

#series .viewall a {
  border-bottom: 1px solid;
  color:inherit;
  font-weight:400;
}

#software .breakout {
  width: 100vw;
}

#software .content-area {
  text-align: center;
}

#reddit .content-area a {
  color: inherit;
  outline: none;
  border-bottom: 1px solid;
  font-weight: bold;
}

#reddit .content-area .text {
  align-self: center;
}

#reddit .content-area .text img,
#reddit .content-area .text div {
  display: inline-block;
  vertical-align: middle;
}

#reddit .content-area .text div {
  width: calc(100% - 138px);
}

#reddit .bg-image img {
  min-height: 250px;
  width: auto;
}

#video-carousell .gallery-wrapper {
  margin-bottom: 60px;
}

@media (max-width: 768px) {
  #find-modal .find-panel {
    width: 70vw;
  }
  body.dibounce {
    position: fixed;;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width:375px) {
  #banner .btn a + a {
    margin-left:20px;
  }
}

@media (min-width: 768px) {
  #banner .btn a {
    padding:10px 40px;
  }

  #buying-guide .device-list li,
  #buying-guide .price-list li {
    width: 19%;
  }

  #find-modal .button:hover {
    color: #fff;
  }

  #buying-guide .device-list li:hover,
  #buying-guide .price-list li:hover {
    color: #4b69b8;
  }

  #why .audio-list li:hover {
    font-weight: 400;
  }

  #buying-guide svg:hover .st0,
  #buying-guide svg:hover .st1,
  #buying-guide svg:hover .st2,
  #buying-guide svg:hover .st3,
  #buying-guide svg:hover .st4,
  #buying-guide svg:hover .st5,
  #buying-guide svg:hover .st6 {
    stroke: #4b69b8;
  }
}


@media (min-width: 992px) {

  html[lang="JA-JP"] #container-soundblaster .product-info-container {
    font-size: 16px;
  }

  #container-soundblaster p.thinner {
    font-weight: 300;
  }

  #container-soundblaster .product-info-container {
    font-size: 18px;
  }

  #banner .left-image, #banner .right-image {
    position: absolute;
    height: 80%;
  }

  .gallery-wrapper {
    margin-bottom:  120px;
  }

  #find-modal .find-panel {
    position: relative;
    left: 0;
  }

  #find-modal .modal-sort {
    display: none;
  }

  #find-modal .close-panel {
    display: none;
  }

  #why .image-head{
    margin-top: auto;
    margin-left: auto;
    padding: 0;
  }

  #why .image-head img {
    max-width: none;
    width: auto;
    height: 65vw;
    max-height: 1200px;
    display: block;
    margin-left: auto;
    margin-top: 60px;
    left: -10vw;
    position: relative;
  }

  #why .content-area {
    padding-left: 30px;
    align-self: center;
    z-index: 1;
  }

  #why .content-area h4 {
    margin-top: 2em;
  }

  #why .why-audio {
    text-align: left;
    margin-left: -0 !important;
  }

  #why .audio-list {
    margin: 60px 0;
  }

  #why .not-all {
    width: 80%;
  }

  #why .not-all a {
    color: inherit;
    border-bottom: 1px solid;
  }

  #software .content-area {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    display: flex;
    text-align: left;
  }

  #software .content-area .text {
    color: #fff;
    align-self: center;
    padding-right: 5vw;
    padding-left: 30px;
  }
}

@media screen and (min-width: 1024px) {
  #buying-guide {
    display: flex;
  }

  #find>.container,
  #sb>.container,
  #reddit>.container {
    width: 90%;
    max-width: 2000px;
  }

  #buying-guide .btn-find {
    width: auto;
  }

  #buying-guide .stage-list li {
    width: 300px;
  }

  #buying-guide .device-list li,
  #buying-guide .price-list li {
    width: 11%;
  }

  #buying-guide .price-list li {
    width: 11%;
    min-width: 120px;
  }

  #buying-guide .container {
    align-self: center;
  }
}

@media screen and (min-width: 1200px) {
  #find-modal .result-features {
    padding: 0px 15px;
    height: calc(100% - 500px)
  }
}

@media screen and (min-width: 1920px) {
  #banner .left-image, #banner .right-image {
    position: absolute;
    height: 100%;
  }
  #container-soundblaster .product-info-container {
    font-size: 1vw;
  }
}