@charset "utf-8";
/* google fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?g9e1ny');
  src:  url('../fonts/icomoon.eot?g9e1ny#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?g9e1ny') format('truetype'),
    url('../fonts/icomoon.woff?g9e1ny') format('woff'),
    url('../fonts/icomoon.svg?g9e1ny#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-soundbar_logo {
	color:#fff;
	font-size:62px;
}
.icon-soundbar_logo:before {
  content: "\e900";
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
  height: 100%;
  min-height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif; font-size:18px;
	background-color:#000;
}
#hero  {
  position: relative;
 background-position:center bottom;
background-size:cover;
background-repeat:no-repeat;
color:#fff;
height:100vh;
}
.hero-nav {
	    padding:15px 15px 0;
			margin-bottom:3%
}
#hero .icon-soundbar_logo {
	display:inline-block;
	font-size:72px;
	margin-bottom:15px;
}
#hero .hero-concent {
	padding:0 30%;
}
#hero .product-select {
	padding-top:6px;
	color:#333;
}
#hero .product-select a {
	display:inline-block;
	vertical-align:middle;
	color:#888;
	padding:0 5px;
}
#hero .product-select a:hover, #hero .product-select a:active, #hero .product-select a:focus {
	text-decoration:none;
	outline:none;
	color:#fff;
}
#hero .product-img {
	margin:5% auto 0;
	width:70%
}
#hero .product-img:after { content: ""; display: table; clear: both; }
#hero .product-img figure {
display:block;	
float:left;
width:33.33333333333333%;
}
#hero .product-img figure img {
	display:inline-block;	
}
#avermedia-logo {
	display:inline-block;
}
#avermedia-logo img {
      width: 167px;
    height: 35px;
}
section .container {
	position:relative;
	height:100%;
}
section {
position:relative;
border-bottom:1px solid #333;
background-position:center top;
background-size:cover;
background-repeat:no-repeat;
height:100%;
overflow:hidden;
min-height:670px;
}
.section-inner {
	display:block;
	text-align:center;
	position:absolute;
}
section h2 {
	font-weight:bold;
	color:red
}
.section-inner .gs-name {
	font-weight:400
}
.section-copy {
	color:#fff;
}
.section-one {
	padding:60px 0;
}
.section-two, .section-three, .section-four {
	height:100%
}
.section-two .section-inner {
	text-align:left;
	right:0;
	bottom:60px;
	padding-left:65%;
}
.section-four, .section-ten {
padding:60px 0;
height:auto;
min-height:auto;
}
.section-three .section-inner, .section-five .section-inner  {
	top:5.5%
}
.section-three, .section-four h2, .section-five h2 {
margin-top:0
}
.section-four figcaption {
	display:block;
	height:130px
}
.section-four figure {
	display:inline-block;
	width:50%;
}
.section-five {
	background-position:center 45%;
	background-size:100% auto;
	height: 90%;
	min-height:570px;
}
.section-six figure {
	position:absolute;
	right:0;
	top:5.5%;
	padding-left:50%
}
.section-six, .section-seven {
	height: 80%;
	max-height:100%;
	background-position:center;
}
.section-six .section-inner {
	text-align:left;
	left:0;
	bottom:60px;
	padding-right:40%;
}
.section-seven figure {
	position:absolute;
	right:0;
	top:5.5%;
	padding-left:30.5%
}
.section-seven .section-inner {
	text-align:left;
	left:0;
	bottom:60px;
	padding-right:40%;
}
.section-eight figure {
	position:absolute;
	right:0;
	top:5%;
	padding-left:77.5%
}
.section-eight .section-inner {
	text-align:left;
	top:13%;
	left:0;
	padding-right:70%;
}
.section-nine .section-inner {
	text-align:left;
	top:60px;
	padding:0 20%;
}
.section-nine {
	background-position:center 50px;
	height: 90%;
	max-height:90%;
}
.section-ten {
	position:relative;
background-position:center top;
background-size:cover;
background-repeat:no-repeat;
padding:60px 0 65px;
}
.section-ten h2 {
	color:#fff;
	font-size:48px;
	font-weight:bold;
margin-top:0
}
.section-ten h3 {
	font-weight:bold;
	padding:1rem 0;
	background-color:#fff;
	margin:0;
}
.section-ten figure {
	margin:0;
	display:block;
	width:100%;
	height:auto;
	padding-bottom:2em;
	background-color:#000
}
.section-ten figure div:nth-of-type(1) {
	margin-bottom:10px
}
.section-ten a {
	display:inline-block;
	transition: all 0.1s ease-in-out;
}
.section-ten a:hover {
text-decoration:none
}
.section-ten .learn-more {
	color:red;
}
.section-ten .learn-more:hover {
	color:#F60;
}
.section-ten .buy-now { 
color:#fff;
background-color:red;
padding:0.5rem 1.2rem;
}
.section-ten .buy-now:hover {
	background-color:#F90
}
footer {
	font-size:1.5rem;
	padding:1rem;
	color:#999;
}
#pageup {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  background-image:url(//www.avermedia.com/event/4Kseries/img/up.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  display: none;
  cursor: pointer;
  z-index: 99;
}
@media only screen and (min-width:1215px){
.section-four figcaption {
	height:auto
}
}
@media only screen and (max-width:1366px){
#hero .hero-concent {
	padding:0 25%;
}
#hero {
	height:auto
}
}
@media only screen and (max-width:1280px){
#hero .hero-concent {
	padding:0 20%;
}
	#hero .product-img {
    margin: 5% auto 3.5%;
}
}
@media only screen and (max-width:1024px){

.section-five {
	height: 70%;
	min-height:570px;
}
}
@media only screen and (max-width:768px){
#hero .hero-concent {
	padding:0 5%;
}
#hero .product-img {
    margin: 5% auto 3%;
		width: 100%;
		padding:0 15px
}
#hero .hero-content .hero-inner {
    top: 50px;
}
section .container {
    height:inherit;
}
section {
    border-bottom: 1px solid #333;
    background-position:center top;
    background-size:110% auto;
    height:auto;
    min-height:auto;
}
.section-two, .section-three, .section-four, .section-six, .section-seven {
    height:auto;
}
.section-inner {
    text-align: left;
    position:inherit;
}
.section-two .section-inner, .section-three .section-inner, .section-five .section-inner, .section-six .section-inner, .section-seven .section-inner, .section-eight .section-inner, .section-nine .section-inner {
	padding:60% 0 6%;
	top:inherit;
	right:inherit;
    right:inherit;
    bottom:inherit;
    padding-left:0;
		padding-right:0;
}

.section-five {
    height:auto;
    min-height:auto;
		background-position:center -30px;
}
.section-six, .section-seven {
    background-position:center 15%;
		background-size:130% auto;
}
.section-six figure {
  padding:0 18%;
}
.section-seven figure {
  padding:0 6%;
}
.section-nine {
    height:auto;
   max-height:inherit;
	 background-position:center top;
}
.section-ten img {
	display:inline-block
}
.section-four .col-sm-6:first-child {
	margin-bottom:15px
}
.section-eight {
background-position:-90px top;
}
.section-eight figure {
    right:5%;
    padding-left: 72.5%;
}
.section-nine .section-inner {
    padding: 50% 0 6%;
}
}

@media only screen and (max-width:450px){
	body {
		font-size:15px
	}
.icon-soundbar_logo {
    font-size: 38px;
}
.section-ten h2 {
    font-size: 32px;
}
h2 {
    font-size:26px;
}
#hero .icon-soundbar_logo {
    font-size: 54px;
}
#hero figure {
    padding: 0 15px;
}
}
@media only screen and (max-width:430px){
.section-ten {
    padding: 6% 0;
}
.hero-nav {
    padding:0;
    margin-bottom: 3%;
}
#hero .product-select {
	text-align:center;
	padding:5px 0;
	float:none !important;
	width:100%;
	background-color:#333
}
#avermedia-logo {
width:100%;
padding:10px 0;
text-align:center;
}
}