/* XS */
@media (max-width: 767px) {

	#catalogueHeader {
		margin-bottom: 20px;
	}

	#heroCarousel .piggy img {
		height: 42px;
	}

	#heroCarousel .piggy .savings {
		font-size: 22px;
		line-height: 38px;
	}

	#heroCarousel .piggy .savings .amount {
		font-size: 32px;
	}

	#heroCarousel .item {
		height: 500px;
	}

	#heroCarousel .item .item-image {
		height: 300px;
	}

	#heroCarousel .item .amazonLogo {
		float: left;
	}

	#heroCarousel .item .amazonPrice {
		float: right;
	}

	#heroCarousel .item .amazonPriceDate {
		clear: both;
		width: 100%;
	}

	#heroCarousel .item .item-image h2 {
		height: 36px;
		overflow: hidden;
	}

	#heroCarousel .item .item-image img {
		max-height: 240px;
		width: auto;
	}

	.border-top-xs {
		border-top: 1px solid #EEEEEE !important;
	}

	.no-border-left-xs {
		border-left: none !important;
	}

	.no-border-right-xs {
		border-right: none !important;
	}
}

/* SM */
@media (min-width: 768px) {

	.wrapper {
		padding-top: 100px;
	}

	.wrapper.content {
		margin-bottom: 40px;
	}

	.wrapper.landing, .wrapper.content {
		padding-top: 80px !important;
	}

	.wrapper.results .border-right {
		min-height: calc(100vh - 120px);
	}

	#topBar {
		height: 80px;
	}

	#topBar a.btn-extension {
		margin-top: 0;
	}

	#topBar .navbar-subheader {
		display: inherit;
		width: auto;
	}

	#topBar .navbar-brand > img {
		height: 60px;
	}

	#topBar ul.navbar-nav {
		margin: 7.5px -15px
	}

	#topBar ul.navbar-nav > li > a {
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 20px;
	}

	#subTopBar {
		margin-top: 0;
	}

	#landing .hero {
		max-height: calc(100vh - 130px); /* 180px = #frmSearchContainer / 2 height */
	}

	#heroCarousel h1 {
		font-size: 36px;
	}

	#frmSearch {
		float: left;
		width: 40%;
		margin-top: 9px;
	}

	.no-padding-xs {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	table.dataTable .description {
		width: 50%;
	}

	table.dataTable .base_price, table.dataTable .amazon_price {
		width: 15%;
	}

	table.dataTable .diff, table.dataTable .diff_percent {
		width: 10%;
	}

	article h1 {
		font-size: 3em;
	}

	.panel-analysis .panel-footer {
		display: inline-block;
		float: right;
		padding: 0px 8px 0px 32px;
	}

	.panel-analysis .panel-section img.brand-logo {
		max-height: 100px;
		margin-bottom: 0;
	}

	.piggy {
		position: relative;
		background: #F7A525;
		padding: 0 !important;
		margin: auto;
		width: 100px;
		text-align: center;
	}

	.piggy .pretext {
		left: 0;
		top: 36px;
	}

	.piggy .percent {
		left: 20px;
		bottom: 16px;
		font-size: 24px;
	}

	#landingTeasers h1 {
		font-size: 36px;
	}

	#catalogGrid .carousel-caption h1 {
		color: rgba(255, 255, 255, 1);
		font-size: 36px;
	}

	#catalogGrid a:hover {
		border: 2px solid #F7A525;
	}

	#catalogGrid .carousel-caption {
		background: rgba(0, 0, 0, 0.4);
		opacity: 0.7;
		display: none;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
	}

}

/* XS-horizontal Exception */
@media (min-width: 468px) and (max-width: 767px) {

	#landing {
		padding-top: 0;
	}

	#heroCarousel h1 {
		font-size: 24px;
	}

	.hidden-xs-horizontal {
		display: none !important;
	}

	.visible-xs-horizontal {
		display: block !important;
	}

	.col-xs-horizontal-1, .col-xs-horizontal-2, .col-xs-horizontal-3, .col-xs-horizontal-4, .col-xs-horizontal-5, .col-xs-horizontal-6, .col-xs-horizontal-7, .col-xs-horizontal-8, .col-xs-horizontal-9, .col-xs-horizontal-10, .col-xs-horizontal-11, .col-xs-horizontal-12 {
		float: left;
		position: relative;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}

	.col-xs-horizontal-12 {
		width: 100%;
	}

	.col-xs-horizontal-11 {
		width: 91.66666667%;
	}

	.col-xs-horizontal-10 {
		width: 83.33333333%;
	}

	.col-xs-horizontal-9 {
		width: 75%;
	}

	.col-xs-horizontal-8 {
		width: 66.66666667%;
	}

	.col-xs-horizontal-7 {
		width: 58.33333333%;
	}

	.col-xs-horizontal-6 {
		width: 50%;
	}

	.col-xs-horizontal-5 {
		width: 41.66666667%;
	}

	.col-xs-horizontal-4 {
		width: 33.33333333%;
	}

	.col-xs-horizontal-3 {
		width: 25%;
	}

	.col-xs-horizontal-2 {
		width: 16.66666667%;
	}

	.col-xs-horizontal-1 {
		width: 8.33333333%;
	}

	.col-xs-horizontal-pull-12 {
		right: 100%;
	}

	.col-xs-horizontal-pull-11 {
		right: 91.66666667%;
	}

	.col-xs-horizontal-pull-10 {
		right: 83.33333333%;
	}

	.col-xs-horizontal-pull-9 {
		right: 75%;
	}

	.col-xs-horizontal-pull-8 {
		right: 66.66666667%;
	}

	.col-xs-horizontal-pull-7 {
		right: 58.33333333%;
	}

	.col-xs-horizontal-pull-6 {
		right: 50%;
	}

	.col-xs-horizontal-pull-5 {
		right: 41.66666667%;
	}

	.col-xs-horizontal-pull-4 {
		right: 33.33333333%;
	}

	.col-xs-horizontal-pull-3 {
		right: 25%;
	}

	.col-xs-horizontal-pull-2 {
		right: 16.66666667%;
	}

	.col-xs-horizontal-pull-1 {
		right: 8.33333333%;
	}

	.col-xs-horizontal-pull-0 {
		right: auto;
	}

	.col-xs-horizontal-push-12 {
		left: 100%;
	}

	.col-xs-horizontal-push-11 {
		left: 91.66666667%;
	}

	.col-xs-horizontal-push-10 {
		left: 83.33333333%;
	}

	.col-xs-horizontal-push-9 {
		left: 75%;
	}

	.col-xs-horizontal-push-8 {
		left: 66.66666667%;
	}

	.col-xs-horizontal-push-7 {
		left: 58.33333333%;
	}

	.col-xs-horizontal-push-6 {
		left: 50%;
	}

	.col-xs-horizontal-push-5 {
		left: 41.66666667%;
	}

	.col-xs-horizontal-push-4 {
		left: 33.33333333%;
	}

	.col-xs-horizontal-push-3 {
		left: 25%;
	}

	.col-xs-horizontal-push-2 {
		left: 16.66666667%;
	}

	.col-xs-horizontal-push-1 {
		left: 8.33333333%;
	}

	.col-xs-horizontal-push-0 {
		left: auto;
	}

	.col-xs-horizontal-offset-12 {
		margin-left: 100%;
	}

	.col-xs-horizontal-offset-11 {
		margin-left: 91.66666667%;
	}

	.col-xs-horizontal-offset-10 {
		margin-left: 83.33333333%;
	}

	.col-xs-horizontal-offset-9 {
		margin-left: 75%;
	}

	.col-xs-horizontal-offset-8 {
		margin-left: 66.66666667%;
	}

	.col-xs-horizontal-offset-7 {
		margin-left: 58.33333333%;
	}

	.col-xs-horizontal-offset-6 {
		margin-left: 50%;
	}

	.col-xs-horizontal-offset-5 {
		margin-left: 41.66666667%;
	}

	.col-xs-horizontal-offset-4 {
		margin-left: 33.33333333%;
	}

	.col-xs-horizontal-offset-3 {
		margin-left: 25%;
	}

	.col-xs-horizontal-offset-2 {
		margin-left: 16.66666667%;
	}

	.col-xs-horizontal-offset-1 {
		margin-left: 8.33333333%;
	}

	.col-xs-horizontal-offset-0 {
		margin-left: 0;
	}

}

/* SM */
@media (min-width: 768px) and (max-width: 991px) {
	#heroCarousel .piggy img {
		height: 42px;
	}

	#heroCarousel .piggy .savings {
		font-size: 22px;
		line-height: 38px;
	}

	#heroCarousel .piggy .savings .amount {
		font-size: 32px;
	}

	#heroCarousel .item {
		height: 340px;
	}

	#heroCarousel .item .item-image img {
		max-height: 240px;
	}

	#landingTeasers img.under {
		margin-top: 20px;
	}

}

/* MD */

@media (min-width: 992px) and (max-width: 1199px) {
	body {
		font-size: 16px;
	}

	#index {
		margin-top: 20px;
		position: fixed;
	}

	#heroCarousel .piggy img {
		height: 42px;
	}

	#heroCarousel .piggy .savings {
		font-size: 22px;
		line-height: 38px;
	}

	#heroCarousel .piggy .savings .amount {
		font-size: 32px;
	}

	#heroCarousel .item {
		height: 340px;
	}

	#heroCarousel .item .item-image img {
		max-height: 240px;
	}


	.well.collapse, .well.collapsing {
		padding: 0;
	}

	table.dataTable tbody td {
		font-size: 1em;
	}

	#landing h1.title {
		font-size: 24px;
	}

	#landing .panelsContainer {
		margin-top: -40px;
	}

	#landing .panel {
		width: 80%;
		margin-top: 20px;
	}

	#landing .panelsContainer {
		max-width: 90%;
	}

	#landingTeasers .teaser img.under {
		position: relative;
		bottom: -100px;
	}

}

/* LG */
@media (min-width: 1200px) {
	body {
		font-size: 16px;
	}

	.modal-lg {
		max-width: 80%;
		width: 1280px;
	}

	#landing .hero {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#heroCarousel .item {
		height: 340px;
	}

	#heroCarousel .item .item-image img {
		max-height: 240px;
	}


	.wrapper.content .hero {
		margin-bottom: 40px;
	}

	#heroCarousel .piggy img {
		height: 56px;
	}

	#heroCarousel .piggy .savings {
		font-size: 24px;
		line-height: 52px;
	}

	#heroCarousel .piggy .savings .amount {
		font-size: 36px;
	}

	#landingTeasers img.under {
		position: relative;
		bottom: -100px;
	}

}