﻿.sound-blaster-e5 {
background:url('http://img.creative.com/images/products/hero/sound-blaster-e5/mhl-bg-e5.jpg') top left no-repeat #000;
background-size: cover;
background-position:center;
}

.product-info-container .section-header-wrapper {
  background: #f2f2f2;
}

/* Chart */
[class*="chart"]>p {
  display: block;
  margin-left: 7px;
  height: 90px;
  font-size: 14px;
}

[class*="chart-label"] {
	float: left;
	letter-spacing: 1px;
	padding-left: 17px;
}

[class*="chart-"] {
	line-height: 1.5em;
}

.chart-main {
	float: left;
	letter-spacing: 1px;
	margin-left: 7px;
	margin-right: 105px;
	text-transform: uppercase;

}
.chart1 img, .chart2 img, .chart3 img {
	height: 301px;
}

.chart-label1 {
	background: url("dots_3color.png") no-repeat 2px 2px;
	margin-right: 60px;
}

.chart-label2 {
	background: url("dots_3color.png") no-repeat 2px -18px;
	margin-right: 40px;
}

.chart-label3 {
	background: url("dots_3color.png") no-repeat 2px -38px;
	margin-right: 0px;
}

.button-medium {
  text-transform: none;
}

/* Gain */
[class*="gain"]>div {
  clear: both;
}

.dual-gain {
  width: 1170px;
  height: auto;
  margin: 0 auto;
}

.gain-l {
  	height: 325px;
	position:absolute;
	text-align: center;
	margin:0 auto;
}

.gain-h {
  	height: auto;
	position:absolute;
}

.gain-l>div {
  float:left;
  padding-left: 100px;
}

.gain-h>div {
  padding-left: 400px;
  background-color: #fff;
}
/* .gain-l img, .gain-h img {
  margin:0 auto;	
} */

.nano {
  font-size: 13px;
}

.impedance {
    margin: auto;
    display: block;
    position: absolute;
    bottom: 0;
}

@media (max-width:767px) {
	[class*="gain"] {
		float: left;
	}
	
	[class*="gain"]>img {
		max-width: 100%;
	}

	.dual-gain {
  	  width: 100%;
  	  max-width: 100%;
  	  height: auto;
  	  max-height: 200px;
	}
	.gain-l {
	  width: auto;
  	  height: 325px;
  	  display: block;
	  position: absolute;
	  text-align: center;
	}
	.gain-l>div {
		padding-left: 0;
	}
	.gain-h>div {
		padding-left: 0;
	}
	.chart1, .chart2, .chart3 {
		margin-bottom: 0;
	}
	.chart1 > p, .chart2 > p, .chart3 > p {
		margin-top: 10px;
		margin-left: 0;
	}
	.chart1 > img, .chart2 > img, .chart3 > img {
		margin: 0;
		height: auto;
	}
	.margin-bottom-20 {
		margin-top: 0 !important;
		margin-bottom: 10px;
	}
	.chart-main, .chart-label1, .chart-label2, .chart-label3 {
		width: 50%;
		min-width: 140px;
		margin: 0;
		text-align: left;
	}
}