/* Compare Hopper */
 .compare-hopper {
	 position: fixed;
	 padding: 1em;
	 width: 320px;
	 right: 50%;
	 bottom: 0;
	 background: #fff;
	 margin-right: -160px;
	 -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
	 box-shadow: 1px 5px 30px 0 rgba(0, 0, 0, 0.3);
	 z-index: 8000;
}
 .compare-item {
	 border: 1px solid #f6f6f6;
	 position: relative;
	 display: inline-block;
	 text-align: left;
	 padding: 0.5em;
	 width: 100%;
}
 .compare-item:hover {
	 cursor: pointer;
	 border-color: #b8b8b8;
}
 .compare-item > * {
	 vertical-align: top;
}
 .compare-item .item-name {
	 display: inline-block;
	 padding-left: 1em;
	 width: 60%;
}
 .compare-item img {
	 display: inline-block;
	 width: 15%;
}
 @media all and (min-width: 768px) {
	 .compare-item img {
		 display: inline-block;
		 width: 100%;
	}
}
 a.compare-remove {
	 width: 2em;
	 height: 2em;
	 line-height: 2em;
	 padding: 0;
	 text-indent: -99999px;
	 position: absolute;
	 top: 0;
	 right: 0;
	 text-align: center;
	 background: #fff;
}
 a.compare-remove:before {
	 content: "\e000";
	 font-size: 0.7em;
	 font-family: 'good-oatmeal-v2';
	 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;
	 display: inline;
	 width: auto;
	 height: auto;
	 line-height: inherit;
	 vertical-align: baseline;
	 background-image: none;
	 background-position: 0 0;
	 background-repeat: repeat;
	 text-indent: 0;
	 position: absolute;
	 width: 100%;
	 top: 0;
	 left: 0;
}
 .compare-tray {
	 background: #e0e0e0;
	 float: left;
	 clear: both;
	 width: 100%;
	 padding: 0.5em;
	 font-weight: bold;
	 margin-bottom: 0.5em;
	 border: 2px solid transparent;
}
 .compare-tray:hover, .compare-tray:focus {
	 background: #e5e5e5;
	 border-color: #d8d8d8;
}
 .compare-container {
	 display: none;
}
 .compare-hopper.showtray .compare-container {
	 display: inline-block;
}
 @media all and (max-width: 768px) {
	 .compare-hopper .compare-container {
		 width: 100%;
	}
}
 .compare-container div.compare-item:first-child {
	 margin-left: 0;
}
 .compare-buttons {
	 float: right;
	 width: 100%;
	 text-align: left;
	 padding: 0 1%;
}
 .modal-wrap .compare-buttons {
	 text-align: center;
}
 .modal-wrap.compare-wrap {
	 text-align: center;
}
 .compare-buttons .btn-compare, .compare-buttons .btn-clear {
	 font-size: 0.875em;
	 padding: 0.5em 0.75em;
	 position: relative;
	 display: inline-block;
	 text-decoration: none;
	/* color: #fff;
	 */
	 width: 48%;
	 height: 30px;
}
 .compare-buttons .btn-clear {
	 line-height: 1em;
	 padding: 0.25em 0;
}
 .product-list .compare-buttons .btn-compare:before, .compare-buttons .btn-compare:before {
	 content: "\e60b";
	 font-family: 'good-oatmeal-v2';
	 font-style: normal;
	 font-weight: normal;
	 font-variant: normal;
	 text-transform: none;
	 line-height: 1rem;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
	 width: auto;
	 height: auto;
	 vertical-align: sub;
	 background-image: none;
	 background-position: 0 0;
	 background-repeat: repeat;
	 padding-right: 0.5em;
	 font-size: 1rem;
}
 @media all and (min-width: 768px) {
	 .compare-hopper {
		 bottom: 0;
		 width: 60%;
		 margin-right: -225px;
		 background: #fff;
		 max-width: 450px;
		 padding: 1em;
		 white-space: nowrap;
	}
	 .compare-container, .compare-buttons {
		 display: inline-block;
		 vertical-align: top;
	}
	 .compare-tray {
		 display: none;
	}
	 .compare-container {
		 width: 100%;
		 float: left;
		 white-space: nowrap;
		 vertical-align: top;
		 margin-bottom: 1em;
	}
	 .compare-item {
		 width: 13.2%;
		 margin-left: 3.5%;
		 padding: 0.25em;
	}
	 .compare-item .item-name {
		 display: none;
	}
	 a.compare-remove {
		 width: 1em;
		 height: 1em;
		 line-height: 1em;
	}
	 .compare-buttons {
		 width: 40%;
		 display: inline-block;
		 min-width: 300px;
	}
	 .compare-buttons a {
		 float: right;
		 width: 48%;
		 margin-left: 2%;
	}
	 .modal-wrap .compare-buttons {
		 width: 100%;
	}
	 .compare-buttons .btn-compare {
		 margin-bottom: 7px;
		 margin-left: 0;
		 float: left;
		 width: 100%;
	}
	 .compare-buttons .btn-clear {
		 float: left;
		 width: 100%;
		 text-align: center;
		 margin-bottom: 0;
	}
}
 .modal-wrap .compare-buttons .btn-compare {
	 text-align: center;
	 float: none;
	 max-width: 200px;
	 min-width: 100px;
}