// Set image paths
@import '_paths';

@import '_mixins';
@import "_components";
@import "_cardgroups";
@import "_adrian";

// $base : #8C006C;
$base 	: #41B54B;
$blue 	:	#1A93D1;
$green 	: #41B54B;
$red		: #E93D3D;
// Global

body {
	font-family: 'Open Sans', sans-serif;
  color: #5a5a5a;
	// background: #dadada;
	// background: whitesmoke;
	font-size: 16px;
	margin-top: 50px;
	@media screen and (min-width: 768px) {
		margin-top: 105px;
	}
}

a {
	color: $base;
	&:hover {
		color: lighten($base, 10%);
	}
}

.btn-link {
	color: #41B54B;
}

h1,h2,h3,h4,h5 {
	// font-family: 'helveticaneuebold', sans-serif;
}
* section > h1,
* section > h2,
* section > h3,
* section > h4,
* section > h5 {
	margin-top: 0;
}
i.fa {
	vertical-align: middle;
}

.checkbox * {
	vertical-align: middle;
}
input, select, textarea, optgroup {
	font-size: 16px;
}
.form-group {
	input, i.fa {
		vertical-align: middle;
	}
}

.modal {
	z-index: 1062;
}
select.form-control {
	height: 34px;
	padding: 6px 30px 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #dedede;
	border-radius: 0;
	-webkit-appearance: none;
	outline: 0;
	box-shadow: none;

	background: white url($drop-arrow) no-repeat;
	background-position: right center;
}
input {
	&.form-control {
		// height: 34px;
		// padding: 6px 30px 6px 12px;
		font-size: 16px;
		color: #555;
		background-color: #fff;
		background-image: none;
		border: 1px solid #dedede;
		border-radius: 0;
		outline: 0;
		box-shadow: none;
	}
}
p {
	a {
		vertical-align: bottom !important;
	}
	i, span {
		vertical-align: middle;
	}
}
.form-inline {
	.form-group {
			margin-right: 10px;
	}
}
hr {
	&.short {
		width: 150px;
		max-width: 100%;
		margin: 5px auto !important;
	}
}

// NAVBAR ======================================================================
.navbar {
	& {
		background: #fff;
		border: none;
		z-index: 1061;
		border-bottom: 1px solid #ddd;
	}
	.navbar-brand {
		& {
			color: $base;
			padding-top: 14px;
			padding-bottom: 2px;
			padding-left: 15px;
			padding-right: 15px;
			width: 70%;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			@media screen and (min-width: 768px) {
				width: auto;
				position: inherit;
				left: inherit;
				right: inherit;
				img {
					margin: inherit;
				}
			}

		}
		img {
			height: 100%;
			margin: auto;
			padding: 5px;
			@media screen and (min-width: 321px) {
				padding: 0;
			}
		}
	}
	.navbar-nav {
		> li {
			a {
				font-size: 10px;
				@media screen and (min-width: 1199px) {
					font-size: 14px;
				}
			}
			a.navbar-drinktype {
					color: rgb(65, 181, 75) !important;
					zfont-weight: bold !important;
					margin-top: 0px;
					font-size: 10px;
					@media screen and (min-width: 1199px) {
						margin-top: 1px;
						font-size: 12px;
					}
			}

			> a {
				color: #333;
				text-align: center;
				background: none;
				font-weight: lighter;
				& {
					padding: 15px 10px;
					@media screen and (min-width: 992px) {
						padding: 12px 12px;
					}
				}
				&:hover {

				}
				img {
					height: 18px;
					vertical-align: top;
				}
				&.notification {
					padding: 0;
			    margin: 15px 5px;
					font-size: 20px;
					display: inline-block;
					.counter {
						position: absolute;
				    left: 12px;
				    top: -6px;
				    background: #E93D3D;
				    color: white;
				    font-size: 10px;
				    line-height: normal;
				    text-align: center;
				    padding: 1px 3px;
						@include border-radius(3px);
					}
				}
				&.cart-icon {
					//font-size: 23px;
					font-size: 24px;
					@media screen and (min-width: 1199px) {
						// margin-top: 1px;
						font-size: 36px;
					}

				}
			}
			&.active {
				a {
					background: none;
					color: white;
					&:hover {
						background: none;
						color: white;
					}
				}
			}
		}
	}
	.navbar-toggle {
		border: 0;
	}
	.navbar-toggle .icon-bar {
		// background: white;
	}
	.navbar-toggle:hover, .navbar-toggle:focus {
		background: none;
	}
	.search {
		& {
			position: relative;
		}
		i {
			position: absolute;
	    left: 10px;
	    top: 8px;
		}
		input[type='text'] {
			@include box-shadow(none);
			@include border-radius(3px);
			border-color: #ddd;
			padding-left: 32px;
			@media screen and (min-width: 990px) {
				width: 400px
			}
		}
	}
	.minisite {
		& {
			@media screen and (min-width: 768px) {
				margin-left: 20px;
			}
		}
		li {
			a {
				& {
					position: relative;
					padding: 15px 10px;

					@media screen and (min-width: 992px) {
						padding: 15px 20px;
					}
				}
				&:focus {
					color: whitesmoke;
				}
				&:before {
					display: none;
				}
				.fa-stack {
					color: white;
				}
				&.dd {
					.fa-stack {
						font-size: 8px;
					}
					&:after {
						background: #1A93D1;
					}
					i:last-child {
						color: $blue;
						position: relative;
					}
				}
				&.tc {
					.fa-stack {
						font-size: 8px;
					}
					&:after {
						background: #41B54B;
					}
					i:last-child {
						color: $green;
						position: relative;
					}
				}
				&.da {
					.fa-stack {
						font-size: 8px;
					}
					&:after {
						background: #E93D3D;
					}
					i:last-child {
						color: $red;
						position: relative;
					}
				}
				&:after {
					content: "";
					width: 0;
					height: 1px;
					background: white;

					position: absolute;
					bottom: 10px;
					left: 0;
					right: 0;
					margin: auto;
					@include transition(all, .2s, ease-in-out);
				}
				&:hover {
					&:after {
						width: 70%;
					}
				}
			}

			&.active {
				a {
					&:after {
						width: 70%;
					}
					&.dd {
						& span:not(.fa-stack) {
							color: #1A93D1;
						}
					}
					&.tc {
						& span:not(.fa-stack) {
							color: #41B54B;
						}
					}
					&.da {
						& span:not(.fa-stack) {
							color: #E93D3D;
						}
					}
				}
			}
		}
	}
	.navbar-text {
		margin-left: 0;
		margin-right: 0;
		color: white;
		font-weight: lighter;
	}
	.logged-in {
		display: none;
		.info {
			img {
				width: 18px;
		    height: 18px;
		    border-radius: 50%;
		    margin-right: 5px;
		    vertical-align: middle;
			}
		}
	}
}
// =============================================================================

// BANNER ======================================================================
.banner-static {
	// margin-top: 50px;
	@media screen and (min-width: 768px) {
		// margin-top: 105px;
	}
	img {
		width: 100%;
	}
}
.banner {
	&:not(.index) {
		min-height: auto;
		max-height: 450px;
		overflow: hidden;
		small {
			margin-top: 40px !important;
		}
		.jumbo {
			line-height: 44px !important;
			// bottom: 100px;
		}
	}
	& {
		& {
			position: relative;
			min-height: 250px;
		}
		h1 {
			&.jumbo {
				color: white;
		    text-align: center;
		    position: absolute;
		    width: 100%;
		    text-shadow: 0 0 5px #333;
		    font-size: 3vw;
				font-weight: 300;
				z-index: 4;
				//
				bottom: 50px;
				@media screen and (min-width: 768px) {
					bottom: 105px;
					// font-size: 42px;
					font-size: 2.2vw;
					line-height: 55px;
				}
				//
				i {
					margin: 0 15px;
				}
				small {
					display: block;
					margin-top: 1.1vw;
					color: white;
					font-size: 4vw;
					// font-weight: 300;
					@media screen and (min-width: 768px) {
						// margin-top: 60px;
						margin-top: 3.1vw;
						// font-size: 48px;
						font-size: 2.5vw;
					}
				}
			}
		}
		@media screen and (min-width: 768px) {
			& {
				min-height: 500px;
			}
		}
	}
	// banner root
	& {
		.gradient {
			position: absolute;
			z-index: 3;
			width: 100%;
			height: 100%;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
			background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
		}

		.action {
			& {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 20px;
				width: 90%;
				text-align: center;
				z-index: 3;
			}
			.btn {
				width: 30%;
				margin: 0 5px;
				padding: 5px 15px;
				@media screen and (min-width: 768px) {
					width: 100%;
					margin: 5px;
					padding: 10px 16px;
				}
			}
			@media screen and (min-width: 768px) {
				bottom: 50px;
				.btn {
					width: auto;
					margin: 0 5px;
				}
			}
		}
	}
	// home
	&.home {
		// background: $base url($banner-home) center center no-repeat;
		// background-size: cover;
		min-height: auto;
	}
	// drinkadvisor
	&.advisor {
		background: $base url($banner-advisor) center center no-repeat;
		background-size: cover;
	}
	// drinksdirect
	&.direct {
		background: $base url($banner-direct) center center no-repeat;
		background-size: cover;
		.gradient {
	    background: rgba(0,0,0,.6);
		}
	}
	// the circle
	&.circle {
		background: $base url($banner-circle) center center no-repeat;
		background-size: cover;
		h1 {
			&.jumbo {
				@media screen and (min-width: 768px) {
					bottom: 200px;
				}
			}
		}
		.gradient {
	    background: rgba(0,0,0,.6);
		}
	}
	&.userprofile {
		& {
			min-height: 250px;
			position: relative;
			background: #41B54B url($bg-userprofile) center center no-repeat;
			background-size: cover;
			overflow: visible;
		}
		&.seller {
			//background: #41B54B url($bg-seller) center center no-repeat;
			background: #41B54B center center no-repeat;
			background-size: cover;
		}
		&.seller.dc {
			background: #41B54B url($bg-dc) center center no-repeat;
			background-size: cover;
		}
		&.seller.ww {
			background: #41B54B url($bg-ww) center center no-repeat;
			background-size: cover;
		}
		&.seller.yh {
			background: #41B54B url($bg-yh) center center no-repeat;
		 	background-size: cover;
		}
		&.seller.ro {
			background: #41B54B url($bg-ro) center center no-repeat;
			background-size: cover;
		}
		&.seller.ar {
			background: #41B54B url($bg-ar) center center no-repeat;
			background-size: cover;
		}
		&.seller.gs {
			background: #41B54B url($bg-gs) center center no-repeat;
			background-size: cover;
		}
		&.seller.fg {
			background: #41B54B url($bg-fg) center center no-repeat;
			background-size: cover;
		}
		&.seller.fourP {
			background: #41B54B url($bg-4p) center center no-repeat;
			background-size: cover;
		}
		.gradient {
			background: none;
		}
		h1 {
			&.jumbo {
				@media screen and (min-width: 768px) {
					bottom: 200px;
				}
			}
		}
		.info {
			& {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				bottom: -45px;
				z-index: 4;
			}
			.photo {
				@include box(150px);
				margin: auto;
				position: absolute;
				bottom: 80px;
				left: 0;
				right: 0;
				box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

				& {
					@media screen and (min-width: 768px) {
						bottom: 0;
					}
				}
				.img {
					@include border-radius(50%);
					overflow: hidden;
					height: 100%;
					background: white;
					img {
						max-width: 100%;
						min-width: 100%;
					}
					&:hover a {
						display: table;
						width: 100%;
						text-decoration: none;
						i {
							display: table-cell;
							vertical-align: bottom;
						}
					}
					a {
						position: absolute;
				    bottom: 0;
				    left: 0;
				    right: 0;
				    margin: 0 auto;
				    text-align: center;
				    color: white;
				    display: none;
				    padding: 5px;
						height: 100%;
				    background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.65) 100%);
				    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.65) 100%);
				    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
					}
					&.square {
						@include border-radius(0);
						padding: 5px;
					}
				}
			}
			.name {
				font-size: 24px;
				color: white;
				font-weight: lighter;
				position: absolute;
				bottom: -32px;
				left: 0;
				right: 0;
				white-space: nowrap;
				span:first-child {
					text-shadow: 0 0 5px #333;
					font-weight: 600;
				}
				small {
					font-weight: 500;
					text-shadow: 0 0 5px #333;
				}
				& {
					@media screen and (min-width: 768px) {
						bottom: 55px;
						left: 170px;
						right: inherit;
					}
				}
				a {
					color: #eee;
					font-size: 14px;
					text-decoration: none;
					span {
						display: none;
						border-radius: 3px;
						background: #F8F8F8;
						color: #333;
						padding: 4px;
						font-size: 12px;
						margin-left: 10px;
						font-weight: bold;
						@include transition(all, .2s, ease-in-out);
					}
					&:hover span {
						display: inline;
					}
				}
			}
			.userprofilemenu {
				position: relative;
				nav {
					& {
						border-bottom: 1px solid #ddd;
						position: absolute;
						top: -45px;
						width: 100%;
						overflow-x: scroll;
						white-space: nowrap;
						@media screen and (min-width: 767px) {
							overflow-x: visible;
							white-space: normal;
						}
					}
					&.menu {
						ul {
							& {
								list-style: none;
								padding: 0;
								margin: 0;
								display: flex;
							}
							li {
								a {
									display: block;
									padding: 15px;
									text-decoration: none;
									color: #777;
									position: relative;
									&.active, &:hover {
										&:after {
											content: "";
											position: absolute;
											bottom: -2px;
											left: 0;
											right: 0;
											width: 100%;
											background: #41B54B;
											height: 2px;
										}
									}
								}
							}
						}
					}
				}
				&:after {
					content: "";
					display: table;
					clear: both;
				}
			}
		}
	}
	// util (download app inside banner)
	.util {
		text-transform: uppercase;
		font-size: 15px;
		letter-spacing: 1px;
		margin-top: 20px;
		a {
			color: white;
			vertical-align: bottom;
		}
		i {
			color: white;
			font-size: 24px;
			@include box-shadow(0 1px 2px rgba(0,0,0,0.15));
		}
	}
}
// =============================================================================

// SECTION =====================================================================
section {
	& {
		padding: 45px 0;
		// margin-top:
	}
	&.simple {
		& {
			margin-top: 50px;
		}
		.title {

		}
	}
	h2 {
		margin-top: 0;
	}
	&.site {
		h2 {
			// font-weight: lighter;
			text-align: center;
	    margin-bottom: 20px;
	    // font-family: 'helveticaneuethin',sans-serif;
	    font-size: 36px;
	    font-weight: lighter;
		}
		.brief {
			text-align: center;
			margin-bottom: 30px;
			@media screen and (min-width: 768px) {
				margin-bottom: 0;
			}
			p {
				// font-weight: lighter;
				line-height: 26px;
			}
			i {
				color: #ccc;
				vertical-align: middle;
				position: absolute;
				bottom: 5px;
				right: -34px;
			}
			span {
				vertical-align: bottom;
				position: relative;
			}
			img {
				max-height: 80px;
			}
			h4 {
				font-size: 33px;
			}
			& {
				> a {
					// color: inherit;
					clear: both;
					margin-top: 10px;
					display: inline;
					padding: 5px 15px;
					background: white;
					border-radius: 5px;
					text-decoration: none;
					border-width: 1px;
				}
			}
			&.dd {
				// a,
				h4 span {
					a {
						color: #5a5a5a;
						&:hover {
							color: #1A93D1;
						}
					}
					i {
						color: $blue;
					}
				}
			}
			&.c {
				// a,
				h4 span {
					a {
						color: #5a5a5a;
						&:hover {
							color: #41B54B;
						}
					}
					i {
						color: $green;
					}
				}
			}
			&.di {
				// a,
				h4 span {
					a {
						color: #5a5a5a;
						&:hover {
							color: #E93D3D;
						}
					}
					i {
						color: $red;
					}
				}
			}
		}
		.action {
			text-align: center;
			margin-top: 20px;
		}
	}
	&.activity {
		& {
			padding-top: 0;
		}
		.type {
			& {
				@include box-shadow(0 1px 2px rgba(0, 0, 0, .15));
				background: white;
				font-size: 14px;
				margin-bottom: 30px;
				// max-height: 395px;
				overflow: hidden;
				position: relative;
			}
			&.story {
				& {
					position: relative;
				}
				> img {
					min-width: 100%;
					max-width: 100%;
				}
				.caption {
					position: absolute;
			    bottom: 122px;
			    width: 100%;
					text-align: center;
					color: white;
					h1 {
						font-size: 34px;
					}
					.action {
						margin-top: 20px;
						a {
							color: white;
							border: 1px solid white;
							padding: 5px 20px;
							border-radius: 3px;
							text-decoration: none;
						}
					}
				}
				&.guide {
					.caption {
						bottom: 157px;
						h1 {
					    text-shadow: 0 0 5px #333;
						}
					}
				}
			}
			&.categories {
				@media screen and (min-width: 1024px) {
					height: 391px;
				}
				.title {
					text-align: center;
					padding: 15px 0 0px;
					margin-bottom: 12px;
					font-size: 21px;
				}
				.cat-thumb {
					// padding: 0 5px 15px;
					padding: 0 0px 8px;
					@media screen and (max-width: 1199px) {
						padding: 0 0px 9px;
					}
					text-align: center;
					img {
						// max-width: 79%;
						max-width: 58%;
						width: 87px;
						@media screen and (max-width: 1199px) {
							max-width: 64%;
						}
					}
					small {
						display: block;
						// font-weight: bold;
						font-size: 16px;
					}
				}
			}
			&.post {
				.caption.post {
					position: absolute;
			    bottom: 95px;
			    width: 100%;
					text-align: center;
					color: white;
					background: none;
					h1 {
						font-size: 34px;
					}
					.action {
						margin-top: 20px;
						a {
							color: white;
							border: 1px solid white;
							padding: 5px 20px;
							border-radius: 3px;
							text-decoration: none;
						}
					}
				}
				&.offset-bottom {
					.shared {
						> img {
							position: relative;
							//top: -22px;
						}
					}
				}
			}
			&._1 {
				header, footer {
					position: absolute;
					text-align: center;
					width: 100%;
				}
				header {
					top: 20px;
					left: 0;
					color: white;
					h1 {
						// font-size: 38px;
						&.xs {
							font-size: 28px;
						}
						&.sm {
							font-size: 26px;
						}
						&.md {
							font-size: 42px;
						}
					}
					h2 {
						margin-top: 20px;
					}
				}
				footer {
					bottom: 0;
					left: 0;
					background: white;
					padding: 2px 0 0;
					border: 0;
					padding-bottom: 2px;
					h3 {
						font-size: 22px;
						margin: 0;
					}
					a {
						font-size: 12px;
						color: #41B54B;
					}
				}
				.action-btn {
					color: #333;
					border: 1px solid #333;
					padding: 5px 20px;
					border-radius: 3px;
					text-decoration: none;
				}
				&.offset-img {
					img {
						position: relative;
						top: -65px;
					}
				}
			}
			&._2 {
				header, footer {
					position: absolute;
					text-align: center;
					width: 100%;
				}
				header {
					top: auto;
					bottom: 115px;
					left: 0;
					color: white;
					h1 {
						font-size: 38px;
					}
					h2 {
						margin-top: 20px;
					}
				}
			}
			&._3 {
				header, footer {
					position: absolute;
					text-align: center;
					width: 100%;
				}
				header {
					top: auto;
					bottom: 75px;
					left: 0;
					color: white;
					h1 {
						// font-size: 38px;
						&.xs {
							font-size: 28px;
						}
						&.sm {
							font-size: 26px;
						}
						&.md {
							font-size: 42px;
						}
						p {
							font-size: 22px;
							color: white;
						}
					}
					h2 {
						margin-top: 20px;
					}
				}
				footer {
					bottom: -1px;
					left: 0;
					background: white;
					padding: 22px;
					border: 0;
					h3 {
						font-size: 22px;
						margin: 0;
					}
					a {
						font-size: 12px;
						color: #41B54B;
					}
				}
				.action-btn {
					color: #41B54B;
					border: 1px solid #41B54B;
					padding: 8px 20px;
					border-radius: 3px;
					text-decoration: none;
					display: inline-block;
					line-height: 13px;
					font-size: 16px;
					font-weight: 600;
				}
				&.offset-img {
					img {
						position: relative;
						top: -65px;
						@media screen and (min-width: 768px) {
							top: 0;
						}
					}
				}
			}
			&._4 {
				header, footer {
					position: absolute;
					text-align: center;
					width: 100%;
				}
				header {
					top: auto;
					bottom: 150px;
					left: 0;
					color: white;
					h1 {
						font-size: 38px;
					}
					h2 {
						margin-top: 20px;
					}
				}
			}
			&._5 {
				header, footer {
					position: absolute;
					text-align: center;
					width: 100%;
				}
				header {
					top: auto;
					bottom: 95px;
					left: 0;
					color: white;
					h1 {
						// font-size: 38px;
						&.xs {
							font-size: 28px;
						}
						&.sm {
							font-size: 26px;
						}
						&.md {
							font-size: 42px;
						}
						p {
							font-size: 22px;
							color: white;
						}
					}
					h2 {
						margin-top: 20px;
					}
				}
				footer {
					bottom: 0;
					left: 0;
					background: white;
					padding: 22px;
					border: 0;
					h3 {
						font-size: 22px;
						margin: 0;
					}
					a {
						font-size: 12px;
						color: #41B54B;
					}
				}
				.action-btn {
					color: #41B54B;
					border: 1px solid #41B54B;
					padding: 8px 20px;
					border-radius: 3px;
					text-decoration: none;
					display: inline-block;
					line-height: 13px;
					font-size: 16px;
					font-weight: 600;
				}
				&.offset-img {
					position: relative;
					top: -65px;
					@media screen and (min-width: 768px) {
						top: 0;
					}
				}
			}
			a.block {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 3;
			}
		}

		.loadmore {
			text-align: center;
			a {
				padding: 10px 20px;
		    border: 1px solid #ccc;
		    background: white;
		    border-radius: 4px;
		    color: #777;
				text-decoration: none;
				&:hover {
					background: #eee;
				}
			}
		}
	}
	&.profile {
		& {
			background: #EEEEEE;
			border-bottom: 1px solid #ddd;
		}
		.form-group {
			margin-bottom: 0;
		}
		img.photo {
			max-width: 165px;
			margin: -140px auto auto;
			position: relative;
			display: block;
		}
		h2 {
			// font-weight: lighter;
			text-align: center;
	    margin-bottom: 42px;
			@media screen and (min-width: 991px) {
				margin-bottom: 16px;
			}
	    // font-family: 'helveticaneuethin',sans-serif;
	    font-size: 36px;
			span {
				font-weight: normal;
			}
			i {
				margin-left: 10px;
			}
			&.direct {
				i {
					color: #1A93D1;
				}
			}
			&.advisor {
				i {
					color: #E93D3D;
				}
			}
			&.circle {
				i {
					color: #41B54B;
					font-weight: 800;
				}
				small {
					display: block;
					line-height: 36px;
					margin-top: 20px;
				}
			}
		}
		.brief {
			text-align: center;
			margin-bottom: 30px;
			@media screen and (min-width: 768px) {
				margin-bottom: 0;
			}
			p {
				// font-weight: lighter;
				line-height: 26px;
			}
			i {
				font-size: 80px;
				color: #ADADAD;
			}
			img {
				max-width: 80px;
				transform: rotate(24deg);
			}
			h4 {
				font-size: 33px;
			}
		}
	}
	&.dd {
		h4, a {
			color: #41B54B;
		}
		padding: 30px 0;
	}
	&.c, &.tc {
		h4, a {
		color: #41B54B;
		}
	}
	&.di {
		h4, a {
		color: #FFC42D;
		}
	}
	& {
		.icon_search {
			& {
				position: relative;
			}
			i {
				position: absolute;
				top: 15px;
				right: 10px;
			}
		}
		&.da {
			.icon_search {
				i {
					color: #E93D3D;
				}
			}
		}
		&.dd {
			.icon_search {
				i {
					color: #41B54B;
				}
			}
		}
		&.tc {
			.icon_search {
				i {
					color: #41B54B;
				}
			}
		}
	}
	&.userprofile {
		.intro {
			& {
		    background: white;
		    border: 1px solid #eee;
		    outline: 1px solid whitesmoke;
				margin-top: 8px;
				padding: 15px;
				font-size: 14px;
			}
			&.sibling {
				margin-top: 20px;
			}
			.info {
				p {
					i {
						margin-right: 5px;
					}
					span.text-muted {
						color: #41B54B;
					}
				}
			}
			.livecircles {
				text-align: center;
				h4 {
					padding: 0;
					.count {
						font-size: 28px;
					}
				}
			}
		}
		.timeline {
			& {
		    background: white;
		    border: 1px solid #eee;
		    outline: 1px solid whitesmoke;
				margin-top: 20px;
			}
			.head {
				margin-bottom: 10px;
				.img {
					overflow: hidden;
					display: inline-block;
					margin-right: 5px;
					vertical-align: middle;
					@include border-radius(50%);
					@include box(30px);
					img {
						max-width: 100%;
					}
				}
				a {
					margin: 0 8px;
					font-size: 14px;
					i {
						margin-right: 5px;
					}
					&:hover {
						color: #ccc;
					}
				}
				.user {
					display: inline-block;
				}
				.more {
					float: right;
					a {
						margin: 0;
					}
				}
			}
			.content {
				padding: 15px;
				img {
					max-width: 100%;
				}
				.inner {
					font-size: 14px;
					color: #777;
				}
			}
			.controls {
				padding: 10px 15px;
				border-top: 1px solid #eee;
				font-size: 12px;
				a {
					color: #777;
					margin: 0 8px;
					text-decoration: none;
					i {
						margin-right: 5px;
					}
					&.post {
						float: right;
						font-weight: normal;
					}
					&:hover {
						color: #ccc;
					}
				}
			}
			.footer {
				border-top: 1px solid whitesmoke;
				.comments {
					margin-top: 15px;
					padding-right: 5px;
					.input-group {
						padding-bottom: 0;
					}
					.input-group-addon {
						vertical-align: top;
					}
					.form-control {
						border: 0;
						box-shadow: none;
						padding: 0;
						height: auto;
						p {
							margin-top: 5px;
							a {
								font-size: 12px;
								margin-right: 5px;
							}
							small {
								color: #aaa;
							}
						}
						strong:first-child {
							display: inline-block;
							margin-right: 5px;
						}
					}
					.indent {
						margin-left: 35px;
						margin-bottom: 15px;
						padding-top: 10px;
    				border-left: 2px solid gainsboro;
					}
				}
				.comment {
					.input-group {
						input[type='text'] {
							margin: 7px 0;
						}
					}
				}
				.input-group {
					padding: 0px 5px 15px 5px;
					input {
						box-shadow: none;
					}
					.input-group-addon {
						@include border-radius(0);
						background: none;
						border: 0;
						padding: 4px 10px;
						.img {
							@include box(40px);
							// @include border-radius(50%);
							// overflow: hidden;
							position: relative;
							img {
								@include box(40px);
								@include border-radius(50%);
								max-width: 100%;
						    position: absolute;
						    left: 0;
						    right: 0;
						    margin: auto;
						    bottom: 0;
						    top: 0;
							}
							a {
								text-decoration: none;
								display: block;
								position: absolute;
								bottom: -22px;
								font-size: 10px;
								white-space: normal;
							}
						}
					}
					strong {
						a {
							&, &:hover {
								color: #41B54B;
							}
						}
					}
					a {
						color: #777;
						&:hover {
							color: #ccc;
						}
					}
				}
			}
		}
	}
	&.circles {
		.categories {
			margin-top: 20px;
			.icons {
				img {
					max-height: 130px;
					max-width: 100%;
					margin: auto;
					display: block;
					@include border-radius(50%);
				}
				.text {
					position: absolute;
			    text-align: center;
			    left: 0;
			    right: 0;
			    margin: auto;
			    top: 50%;
			    bottom: 0;
			    font-weight: 600;
			    color: white;

					font-size: 24px;
			    margin-top: calc(-35px/2);

					@media screen and (min-width: 767px) {
						font-size: 18px;
						margin-top: calc(-25px/2);
					}
					@media screen and (min-width: 990px) {
						font-size: 24px;
						margin-top: calc(-35px/2);
					}
				}
			}
		}

	}
}
// =============================================================================

// BTN =========================================================================
.btn {
	& {
		@include border-radius(3px);
		// padding: 10px 25px;
	}
	&.btn-success {
		border: 0;
		background: $base;
		&:hover {
			background: darken($base,10%);
		}
	}
	&.btn-info {
		border: 0;
		background: #1A93D1;
		&:hover {
			background: darken(#1A93D1,10%);
		}
	}
}
.card {
	// @include box-shadow(0 1px 2px rgba(0, 0, 0, .15));
	padding: 15px;
	background: white;
	border: 1px solid #eee;
	outline: 1px solid whitesmoke;
}

.product-wrap {

}
// =============================================================================

// PRODUCTS LIST ===============================================================
section {
	&.drinks {
		.product {
			.thumb {
				.ctr {
					@include box(110px);
					.count {
						padding-top: 26px;
						font-size: 54px;
						span {
							margin-top: 13px;
						}
					}
					.pointContainer {
						display: block;
						padding-top: 4px;
						font-size: 11px;
						line-height: 12px;
						font-weight: normal;
					}
					.first-rating {
						font-size: 17px;
						margin-top: 18px;
						font-weight: normal;
						line-height: normal;
						a {
							//color: #5a5a5a !important;
							color: #41B54B !important;
						}
						a:hover {
							text-decoration: none;
						}
					}
					.first-rating-small {
						margin-top: 11px;
						font-size: 13px;
						line-height: 120%;
						font-weight: normal;
					}
				}
			}
		}
		@media screen and (min-width: 768px) {
			&.results {
				.product {
					.thumb {
						.ctr {
							@include box(80px);
							border: 6px solid #41B54B;

							.count {
								font-size: 32px;
								padding-top: 12px;
								span {
									margin-top: 0px;
								}
							}
						}
					}
				}
				.product .thumb .pricing .buy.drop>ul>li:not(.drop) a.thumb-action {
					width: 65px;
					border-width: 1px;
				}
				.product .thumb .pricing .buy.drop>ul>li:not(.drop) a {
					padding: 3px 2px;
				}
				.product .thumb .pricing .buy.drop>ul>li.drop {
					margin: 0px 8px;
					a {
						line-height: 23px;
					}
				}
			}
		}
	}
}
.product {
	& {
		// @include box-shadow(0 1px 2px rgba(0, 0, 0, .15));
		// background: white;
		// margin-bottom: 30px;
	}
	.stats {
		a {
			color: inherit;
		}
	}
	.thumb {
		position: relative;
		margin-bottom: 20px;
		.ctr {
			position: absolute;
			top: 15px;
			right: 15px;
			@include box(140px);
			background: white;
			border: 8px solid #41B54B;
			background-size: 100% 100%;
			@include border-radius(50%);
			img {
				position: absolute;
				width: 75px;
			}
			.count {
				display: block;
				width: 100%;
				text-align: center;
				padding-top: 30px;
				font-size: 70px;
				font-weight: bold;
				line-height: 21px;
				span {
					font-size: 14px;
			    font-weight: normal;
			    display: block;
			    margin-top: 17px;
				}
				small {
					font-size: 14px;
			    font-weight: normal;
			    display: block;
			    margin-top: 0px;
				}
			}
			&.silver {
				background-image: url($bg-ctr-silver);
			}
			&.bronze {
				background-image: url($bg-ctr-bronze);
			}
		}
		> a {
			display: block;
			min-height: 330px;
		}
		img.img-prod {
			max-width: 100%;
			max-height: 360px;
			min-height: 360px;
			// min-width: 100%;
			// padding: 35px;
			padding: 15px;
			background: white;
		}
		.details {
			padding: 0 5px 15px;
			position: relative;
			// border-top: 1px solid #eee;
			.name {
				font-weight: 400;
				font-size: 16px;
				padding-bottom: 10px;
				padding-top: 10px;
				// padding-left: 50px;
				// padding-right: 50px;
				line-height: 1.1;
				overflow: hidden;
				text-overflow: ellipsis;
				small {
					font-size:16px;
			    font-weight:300;
					white-space: nowrap;
					text-transform: capitalize;
				}
				a {
					color: #3E3E3E;
				}
			}
			.price {
				small {

				}
				&.direct {
					min-height: 130px;
				}
			}
			.stats {
				// font-size: 12px;
				// background: whitesmoke;
				text-align: center;
				font-size: 14px;
				big {
					font-size: 14px;
				}
				.reviews {
					// float: right;
					color: #2794ce;
				}
				small {
					// color: gray;
				}
				a {
					// color: inherit;
				}
			}
			.rate {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
		    right: 0;
		    margin: auto;
			}
			.progress {
				margin-bottom: 10px;
				height: 10px;
			}
			.progress-info {
				margin-bottom: 15px;
			}
		}
		&:hover {
			// -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5);
			// -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.5);
			// box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.5);
			// cursor: pointer;
		}
		.pricing {
			.buy {
				&.card {
				}
				&.drop {
					& {
				    // margin: 10px 0;
					}
					.thumb-action {
					}
					ul li a small {
						font-size: 14px;
					}
					> ul {
						margin: 0;
						padding: 0;
						list-style: none;
						> li {
							display: inline-block;
							vertical-align: bottom;
							a.thumb-action {
								color: inherit;
						    text-decoration: none;
						    font-size: 16px;
								padding-top: 5px;
								padding-bottom: 5px;
								padding-left: 0px;
								padding-right: 0px;
						    //padding: 5px 8px;
						    background: #fff;
						    border-radius: 5px;
						    border: 2px solid #41B54B;
						    vertical-align: bottom;
								display: inline-block;
								width: 80px;
							}
						}
						> li:not(.drop) {
							a {
								font-size: 14px;
							}
						}
						> li.price {
							font-size: 23px;
							line-height: 24px;
							margin: 0 6px;
							margin-bottom: 5px;
						}
						> li.drop {
							position: relative;
							vertical-align: middle;
							margin: 0 22px;
							@media screen and (max-width: 375px) {
								margin: 0 2px;
							}
							a {
								border: 0;
								background: none;
								font-size: 24px;
								width: auto;
								padding: 0;
								line-height: normal;
							}
							> a:first-child + a {
								display: block;
								margin-top: 5px;
							}
							&:hover ul {
								// display: block;
							}
							ul:not(.cost) {
								display: none;
								margin: 0;
								padding: 0;
								list-style: none;
								position: absolute;
								z-index: 1;
								top: 44px;
								left: 0;
								width: 100%;
								-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.2);
								-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.2);
								box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.2);
								li {
									& {
										padding: 0;
										background: #fff;
									}
									a {
										& {
											display: block;
											text-align: left;
											color: #183446;
										}
										&:hover {
											background: whitesmoke;
										}
										span {
											vertical-align: middle;
										}
										span.qty {
											display: inline-block;
											font-size: 12px;
											line-height: 15px;
											text-align: center;
											padding: 2px 5px;
											width: 45px;
											border-right: 1px solid #eee;
											// background: #A2AEBB;
											color: black;
										}
										span.price {
											margin-left: 10px;
										}
									}
								}
							}
						}
					}
				}
				&._1 {

				}
				&._2 {

				}
				&._3 {

				}
			}
		}
	}
}
.seller-categories {
	h3 {
		margin-bottom: 20px;
	}
	a {
		line-height: 32px;
		color: inherit;
		&:hover {
			color: gray;
			text-decoration: none;
		}
	}
}
// =============================================================================

// COLORS ======================================================================
.color {
	&.black {
		color: #868686;
	}
	&.blue {
		color: #1A93D1;
	}
	&.green {
		color: #41B54B;
	}
	&.red {
		color: #E93D3D;
	}
	&.inherit {
		color: inherit;
	}
}
.heading-center {
	text-align: center;
	letter-spacing: 6px;
	font-size: 20px;
}
// =============================================================================

// FOOTER ======================================================================
footer {
	& {
		padding: 50px 0;
		text-align: center;
		border-top: 1px solid #eee;
		line-height: 26px;
		background: white;
	}
	a {
		color: #5a5a5a;
		&:hover {
			color: lighten(gray,10%);
		}
	}
	p {
		color: $base;
		img {
			height: 20px;
		}
	}
}
// =============================================================================


.shared {
	& {
		position: relative;
		display: inline-block;
		width: 100%;
		border: 1px solid #eee;
		@media screen and (min-width: 768px) {
			height: 406px;
		}
		@media screen and (min-width: 991px) {
			height: 373px;
		}
		@media screen and (min-width: 1024px) {
			height: 391px;
		}

	}
	> a {
		display: block;
		img {
			width: 100%;
		}
	}
	> img {
		min-width: 100%;
		max-width: 100%;
		cursor: pointer;
	}
	.caption {
		position: absolute;
		width: 100%;
		bottom: -1px;
		padding: 0 10px;
		// background: rgba(255,255,255,.9);
		background: white;
	}
	.input-group {
    padding: 5px 0;
		.input-group-addon {
			border-radius: 0;
			background: none;
			border: 0;
			padding: 4px 8px 4px 2px;
	    vertical-align: middle;
			.img {
				overflow: hidden;
				position: relative;
				width: 35px;
				height: 35px;
		    border-radius: 50%;
				img {
					max-width: 100%;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 0;
					top: 0;
				}
			}
		}
		.form-control {
			border: 0;
			box-shadow: none;
			padding: 8px 0;
			height: auto;
			font-size: 12px;
			background: none;
			h3 {
				margin-top: 0;
			}
		}
	}
}


.search {
	& {
		position: relative;
		input {
			box-shadow: none;
			padding-left: 30px;
		}
	}
	&.circle {
		margin-top: 27px;
		a {
			position: absolute;
	    left: 10px;
	    top: 6px;
	    color: #777;
	    text-decoration: none;
		}
	}
	&.page {
		margin-top: 20px;
		a {
			position: absolute;
	    left: 10px;
	    top: 6px;
	    color: #777;
	    text-decoration: none;
		}
	}
}


a.rate {
	font-size: 18px;
	.fa {
		&:hover:before {
			content: "\f005";
		}
	}
	i {
		&:before {
			vertical-align: middle;
		}
	}
}


section.productdetails {
	padding-top: 20px;
}
.productdetails {
	@media screen and (min-width: 991px) {
		// overflow: hidden;
	}
	.product-detail-wrap {
		@media screen and (min-width: 991px) {
			// overflow: scroll;
		}
	}
	h1, p {
		a {
			vertical-align: middle !important;
		}
	}
	hr {
		border-color: #ddd;
	}
	.stage {
		text-align: center;
		img {
			max-height: 100%;
			max-width: 100%;
			width: 100%;
		}
	}
	.shortsummary {
		& {
			position: relative;
		}
		.sold {
			position: absolute;
			left: 10px;
			top: 52px;
			font-weight: bold;
		}
		.left {
			position: absolute;
			right: 10px;
			top: 52px;
			font-weight: bold;
		}
		p {
			margin-bottom: 0;
		}
		p.lead {
			line-height: 24px;
			margin-top: 5px;
			small {
				font-size: 13px;
			}
		}
		// &:not(.cases-left) {
		// 	p.lead * {
		// 		color: inherit;
		// 		font-weight: bold;
		// 		font-size: 24px;
		// 	}
		// }
		.cases-left * {
			font-weight: bold;
		}
		.cases-left {
			p {
				span {
					font-size: 24px;
				}
			}
		}
	}
	.infos {
		font-size: 14px;
		display: inline-block;
		position: relative;
		width: 100%;
		//max-height: 900px;
		.img-responsive {
	    display: block;
	    width: auto;
			//height: 300px;
	    max-height: 800px;
			margin-left: auto;
	    margin-right: auto;
		}
		.card_rounded {
			hr {
				margin: 10px 0;
			}
			border-color: #41B54B;
			background: whitesmoke;
			margin: 15px 0;
			@media screen and (min-width: 768px) {
				margin: 0;
			}
		}
		.shortsummary {
			text-align: center;
			p {
				& {
					margin-bottom: 0;
				}
				&.lead {
					margin-bottom: 0;
					small {
						font-size: 10px;
						display: block;
						// line-height: 5px;
					}
				}
			}
		}
		.stats {
			& {
				text-align: center;
				position: absolute;
				right: 20px;
				top: 10px;
			}
			a {
				color: #fff;
			}
			.rate-counter {
				margin-top: 30px;
				@media screen and (min-width: 991px) {
					margin-top: 0;
				}
				.ring {
					position: relative;
					display: inline-block;
					margin-bottom: 5px;
					border-radius: 50%;
			    border: 8px solid #41B54B;
					background: white;
					@include box(112px);
					img {
						min-width: 112px;
						max-width: 112px;
					}
					.count {
						position: absolute;
						width: 100%;
						text-align: center;
						padding-top: 24px;
						top: 0;
						font-size: 54px;
						font-weight: 700;
						line-height: 28px;
						span {
							display: block;
							padding-top: 11px;
							font-size: 12px;
							line-height: 12px;
							font-weight: normal;
						}
					}
					.first-rating {
						font-size: 17px;
						margin-top: -8px;
						font-weight: normal;
						line-height: normal;
						a {
							//color: #5a5a5a;
							color: #41B54B !important;
						}
						a:hover {
							text-decoration: none;
						}
					}
				}
			}
			.actions {
				// margin-top: 20px;
				@media screen and (min-width: 991px) {
					// margin-top: 100px;
				}
			}
		}
		.inventory {
			text-align: center;
			h1 {
				margin-top: 0;
				margin-bottom: 10px;
				line-height: 30px;
				font-size: 28px;
				span, a {
					vertical-align: middle;
				}
			}
			.circlebuy-pricebox {
				// box-sizing: padding-box;
				border-radius: 0px;
				border-style: solid;
				border-width: 1px;
				border-color: rgb(221, 221, 221);
				background-color: whitesmoke;
				padding-top: 5px;
				padding-bottom: 5px;
				padding-left: 10px;
				padding-right: 10px;
				// margin-right: 1px;
				// margin-bottom: 1px;
				//color: #5a5a5a;


				.deal-qty {
					font-size: 14px;
					line-height: 150%;
					//color: #5a5a5a;
				}
				.deal-unit-price {
					font-size: 15px;
					line-height: 150%;
					//color: #5a5a5a;
				}
				.deal-our-price {
					//color: #5a5a5a;
					font-size: 17px;
					line-height: 150%;
					font-weight: bold;
				}
				.deal-num-circlebuys {
					font-size: 12px;
					line-height: 150%;
				}
				.deal-saving {
					font-size: 12px;
					color: #aaa;
					line-height: 150%;
				}
			}
			.pricing {
				table {
					width: 100%;
					td {
						padding: 8px;
						.btn {
							padding: 5px 10px;
							font-weight: bolder;
						}
						.num {
							font-size: 18px;
							font-weight: normal;
						}
					}
				}
				strong {
					&.price {
						font-size: 22px;
					}
				}
				.label-quantity {

				}
			}
			span.avl {
				font-size: 14px;
			}
			span.pb {
				font-size: 14px;
			}
			.lnk-learn-about-circlebuying {
		    font-size: 12px;
		    top: auto !important;
				//position: absolute;
				//right: 0px;
		    bottom: 0;
			}
			.circlebuy-button-wrap {
				padding: 5px;
			}
		}
		.active-circles {
			margin-bottom: 20px;
			.list_groups {
				padding-top: 0;
				background: none;
				border: 0;
				outline: 0;
				margin-top: 0;
				a:not(.request) {
					color: #555;
				}
				.form-control {
					.request {
						position: absolute;
				    right: 5px;
				    top: 30px;
				    text-decoration: none;
						@media screen and (min-width: 400px) {
							top: 40px;
						}
					}
				}
				.input-group {
					border-top: 0;
			    border-bottom: 1px solid #ddd;
					&:before {
						content: "";
				    position: absolute;
				    width: 40px;
				    background: #F8F8F8;
				    height: 3px;
				    bottom: -2px;
				    z-index: 1;
				    left: 0;
					}
				}
				.content {
					max-height: auto;
					overflow: visible;
				}
			}
		}
		.avatar {
			position: relative;
			// margin-bottom: 30px;
			.img {
				img {
					padding: 35px;
				}
			}
			.countdown {
				position: absolute;
				width: 100%;
				bottom: -26px;
				p {
					&.lead {
						margin-bottom: 0;
						line-height: 18px;
					}
				}
				span, small {
					vertical-align: middle;
				}
				span {
					// font-size: 18px;
					// transform:scale(.8,1.5);
					display: inline-block;
				}
			}
		}
	}
	.button {
		font-size: 12px;
	}
	.about {
		p.desc {
			margin-bottom: 15px;
		}
		.share {
			a {
				color: #999;
				margin-right: 10px;
				&:hover {
					color: lighten(#999, 5%);
				}
			}
		}
	}

	#pDetails {
		min-height: 200px;
	}
	#pTastingNotes {
		min-height: 200px;
	}
	#pWineryInfo {
		min-height: 200px;
	}
	.reviews {
		padding: 15px 0;
		border-top: 1px solid #ddd;
		.btn-review-wrap {
			text-align: left;
			a {
				margin: 0 5px;
			}
			@media screen and (min-width: 768px) {
				text-align: right;
			}
		}
		.review {
			.content {
				position: relative;
				.counter {
					position: absolute;
					right: 5px;
					top: 5px;
					@media screen and (min-width: 425px) {
						right: 10px;
						top: 10px;
					}
					img {
						width: 25px;
						@media screen and (min-width: 425px) {
							width: 50px;
						}
					}
					.count {
						padding: 3px;
						font-weight: bold;
						font-size: 12px;
						@media screen and (min-width: 425px) {
							padding: 8px;
    						font-size: 2vh;
						}
					}
				}
			}
			.list_groups {
				padding-top: 0;
				margin-top: 20px;
				background: #eee;
				border: 0;
				outline: 0;
				@include border-radius(10px);
				.input-group-addon {
					vertical-align: top;
				}
				.form-control {
					font-size: 14px;
					p.comment {
						margin-top: 15px;
					}
				}
				.footer {
					border-top: 1px solid #ddd;
					padding: 10px;
					> .comment {
						margin-left: 5px;
						border-left: 2px solid #ccc;
						@media screen and (min-width: 768px) {
							margin-left: 85px;
							border-left: 0;
						}
					}
				}
				.content {
					max-height: none;
					overflow: visible;
				}
			}
		}
	}
	&.search {
		.avatar {
			.img {
				img {
					padding: 36px;
				}
			}
		}
		.card_rounded {
			margin-bottom: 30px;
			border-color: #41B54B;
			p.lead {
				margin-bottom: 0;
				// margin-top: 5px;
			}
			hr {
				margin: 5px 0;
			}
			.countdown {
				position: relative;
				top: -6px;
				line-height: 8px;
				hr {
					margin-top: 15px;
				}
			}
		}
	}
}


.button {
	& {
		font-size: 16px;
		border-radius: 5px;
		font-weight: 600;
		padding: 2px 6px;
		min-width: 100%;
		white-space: nowrap;
		border: 2px solid;
		text-align: center;
		display: inline-block;
	}
	&.inline {
		min-width: inherit;
		vertical-align: middle;
	}
	&:hover {
		text-decoration: none;
	}
	&.v1 {
		border-color: #65B5E0;
		color: #65B5E0;
		&:hover {
	    border-color: #2794ce;
		}
	}
	&.v2 {
		border-color: #65B5E0;
		background: #65B5E0;
		color: white;
		&:hover {
			color: white;
			background: #36a0d9;
			border-color: #36a0d9;
		}
	}
	&.v3 {
		color: white;
    background: #2794ce;
		border-color: #2794ce;
		&:hover {
			color: white;
			background: #36a0d9;
			border-color: #36a0d9;
		}
	}
	&.v4 {
		border-color: #65B5E0;
		color: #65B5E0;
		border-radius: 8px;
		padding: 3px 15px;
		&:hover {
	    border-color: #2794ce;
		}
	}
	&.v5 {
		border-color: #41B54B;
		color: #41B54B;
		border-radius: 8px;
		padding: 3px 15px;
		&:hover {
	    border-color: darken(#41B54B, 5%);
		}
	}
	&.v6 {
		border-color: #65B5E0;
		color: #65B5E0;
		padding: 2px 8px;
		&:hover {
	    border-color: #2794ce;
		}
	}
	&.v7 {
		color: white;
    background: #41B54B;
		border-color: #41B54B;
		&:hover {
			color: white;
			background: #348f3b;
			border-color: #348f3b;
			cursor: pointer;
		}
	}
	&.thin-line {
		border-width: 1px;
	}
}


.bread a {
	font-size: 14px;
	color: inherit;
}
.expand {
	// text-align: right;
	padding: 5px;
	a {
		color: #41B54B !important;
	}
}

.counter {
	.ring {
		display: inline-block;
		position: relative;
		@include box(50px);
		border-radius: 50%;
		border: 5px solid #41B54B;
		.count {
			position: absolute;
			text-align: center;
			width: 100%;
			top: 0;
			padding: 6px 4px !important;
		}
	}
}

.basecolor, .basecolor a {
	color: inherit;
}

.right-to-center {
	text-align: center;
	@media screen and (min-width: 768px) {
		text-align: right;
	}
}

.commentbox {
	// border-top: 1px solid #ddd;
	.composer {
		margin-top: 0;
		border: 0;
		outline: 0;
	}
}


.drawer {
	background: white;
	border: 1px solid #eee;
	// outline: 1px solid whitesmoke;
	border-radius: 8px;
	margin-bottom: 15px;
	@media screen and (min-width: 768px) {
		// margin-bottom: 0;
	}
	.heading {
		padding: 10px;
		border-bottom: 1px solid #ddd;
		font-size: 14px;
		.count {
			float: right;
		}
	}
	.foot {
		padding: 10px;
		border-top: 1px solid #ddd;
		text-align: center;
		a {
			font-size: 12px;
		}
	}
	.list_groups {
		border: 0;
		outline: 0;
		margin-top: 0;
		padding-top: 0;
		a.name {
			color: inherit;
		}
	}
	.button {
		font-size: 10px;
		font-weight: normal;
		padding: 3px 5px;
		position: absolute;
		// top: 35px;
		bottom: 10px;
		right: 8px;
		z-index: 3;
		// @media screen and (min-width: 1200px) {
		// 	top: 31px;
		// }
	}
}

.discussions {
	.discussion-row + .discussion-row {
		border-top: 1px solid #d8d8d8 !important;
	}
}

.likedbypage {
	.form-control {
		margin-top: 25px;
	}
}


.form-icon {
	position: relative;
	a.icon {
		position: absolute;
		left: 10px;
		top: 3px;
		color: #777;
		text-decoration: none;
	}
	&.left {
	 	input {
			padding-left: 30px;
		}
	}
}

// SHOPPING CART ======================================================================
.shopping-cart-menu {
	margin-top: 20px;
	&.card {
		padding: 0;
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				height: 80px;
				position: relative;
				cursor: pointer;
				// border: solid 1px #41b54b;
				border: solid 1px #555;
				background-color: #f0f0f0;
				box-sizing: content-box;
				padding: 2px;

				// .not-current-order {
				// 	opacity: 0.4;
				// 	filter: alpha(opacity=40); /* For IE8 and earlier */
				// }
				.image-container {
					display: inline-block;
					width: 80px;
					height: 80px;
					background-color: #ffffff;
					float: left;
					margin-right: 8px;
					padding: 0px;
				}
				img {
					display: inline-block !important;
					max-height: 80px;
					max-width: 80px;
					width: 80px !important;
					// margin-left: 0px;
					// margin-right: 10px;
					// float: left;
					cursor: pointer;
				}
				a {
					//color: #a6a6a6;
					//color: red;
					display: block;
					// padding: 15px 25px;
					text-decoration: none;
					cursor: pointer;
				}
				.supplier-name {
					// display: inline-block !important;
					//color: black;
					// background-color: pink;
					font-weight: bold;
					padding-top: 5px;
					font-size: 13px;
				}
				&:hover a, &.active a {
					color: gray;
					background: #f5f5f5;
					cursor: pointer;
				}
				// &.active:after {
				// 	font-family: FontAwesome;
				// 	content: "\f054";
				// 	position: absolute;
				// 	top: 15px;
				// 	right: -22px;
				// }
			}
			li.not-current-order {
				opacity: 0.5;
				filter: alpha(opacity=40); /* For IE8 and earlier */
				background-color: #ffffff;
				border-left: none;
				border-top: none;
				border-right: none;
				// border-bottom: solid 1px #f5f5f5;
				border-bottom: solid 1px #ccc;
			}
		}
	}
}

.shopping-cart-logo {
	max-height: 192px;
	max-width: 192px;
	padding-bottom: 10px;
}

.shopping-cart-view-more {
	// float: right;
	font-size: 12px;
	margin-left: -0px !important;
	// cursor: pointer;
}

.shopping-cart-quantity {
	width: 33px;
}
.shipto_address_card .alert {
	min-height: 175px;
}


// MY PROFILE ======================================================================

section.myprofile {
	.actions-wrap {
		text-align: right;
	}
}
.myprofile-menu {
	&.card {
		padding: 0;
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			li {
				position: relative;
				a {
					color: #a6a6a6;
					display: block;
					padding: 15px 25px;
					text-decoration: none;
				}
				&:hover a, &.active a {
					color: gray;
					background: #f5f5f5;
				}
				&.active:after {
					font-family: FontAwesome;
					content: "\f054";
					position: absolute;
					top: 15px;
					right: -22px;
				}
			}
		}
	}
}
.myprofile-addresses {
	address {
		position: relative;
		border: 1px dashed orange;
		padding: 15px;
		background: cornsilk;
		.name {
			font-weight: bold;
		}
		.delete-address {
			display: inline-block;
			color: gray;
			font-size: 18px;
			line-height: normal;
			vertical-align: middle;

			position: absolute;
			top: 5px;
			right: 10px;

			&:hover {
				color: lightgray;
			}
		}
		.actions {
			margin-top: 15px;
			i {
				font-size: 14px;
				color: gray;
			}
		}
	}
}
#myprofile-add-new-address,
#myprofile-add-new-work,
#myprofile-add-new-education {
	margin-top: 15px;
}

.tab-pane {
	.media {
		overflow: visible;
	}
	.media-body {
		position: relative;
		overflow: visible;
		.more-options {
			position: absolute;
			right: 0;
			.dropdown-toggle {
				background: none;
				border: none;
			}
			.dropdown-menu {
				right: 0;
				left: auto;
			}
		}
	}
}

// WORK
.myprofile-work,
.myprofile-education {
	.media + .media {
		padding: 15px 0 0;
		border-top: 1px solid #ddd;
	}
}

// MY PROFILE END ==================================================================

// EVENTS ======================================================================

section {
	.composer {
		#composer-tab-events {
			.form-group {
				label {
					font-weight: normal;
					font-size: 12px;
				}
			}
		}
		.drop-photo {
			padding: 10px;
			border: 2px dashed #ddd;
			text-align: center;
			margin-bottom: 15px;
			i {
				font-size: 72px;
				color: #ddd;
			}
			span {
				color: #ccc;
			}
		}
	}
}
.event-tile {
	& {
		margin: 8px 0;
		border: 1px solid #eee;
	}
	.event-photo {
		img {
			min-width: 100%;
			max-width: 100%;
		}
	}
	.event-thumb-info {
		& {
			padding: 8px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		small {
			color: gray;
		}
	}
}

// EVENTS END ==================================================================

// ADD FRIEND ==================================================================

.btn-add-interests {
	padding: 3px 8px;
	float: right;
	margin-top: 5px;
	i {
		margin-right: 5px;
	}
}

// ADD FRIEND END ==============================================================

.btn-add-friend {
	padding: 3px 8px;
	position: absolute;
	top: 14px;
	right: 0;
	i {
		margin-right: 5px;
	}
}

// FRIEND REQUEST LIST =========================================================

section {
	&.request-list {
		table tr td {
			vertical-align: middle;
			.dropdown {
				display: inline-block;
			}
		}
	}
}

// FRIEND REQUEST LIST END =====================================================

// FRIEND REQUEST LIST =========================================================

section {
	&.friends-list {
		.event-tile {
			& {
				position: relative;
			}
			.delete {
				position: absolute;
				top: 5px;
				right: 10px;
			}
		}
	}
}

// FRIEND REQUEST LIST END =====================================================

// COVER PHOTO =================================================================
.coverPhotoBtn {
	label {
		cursor: pointer;
	}
	.tooltip {
		 white-space: nowrap;
 	}
}
// END COVER PHOTO =============================================================

// HELPER CLASSES
.blue {
	color: #1A93D1;
}
.green {
	color: #41B54B;
}
.noborder {
	border: 0 !important;
}
.linetop {
  border-top: 1px solid #eee;
	padding-top: 15px;
}
.inline {
	display: inline;
	width: auto;
}
.nomtop {
	margin-top: 0 !important;
}
.block {
	display: block;
}
.banner-btn-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	.btns {
		top: 15px;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		text-align: center;
		position: absolute;
		@media screen and (min-width: 768px) {
			width: auto;
	    position: absolute;
	    right: 15px;
	    bottom: 15px;
	    z-index: 3;
	    top: initial;
	    left: initial;
		}
		a {
			margin-left: 5px;
		}
	}
}


.loader {
	& {
		// position: fixed;
		// width: 100%;
		// height: 100%;
		// z-index: 3;
		// background: rgba(255,255,255,.8);
	}
	&:before {
		display: block;
		content: '';
		@include box(50px);
		background: url($bg-avatar-ring);
		background-size: 100%;
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;

		-webkit-animation: fa-spin 1.5s infinite linear;
		animation: fa-spin 1.5s infinite linear;
	}
}


.dc-filters {
	& {
		position: relative;
	}
	.search-dropdown {
		& {
			background: white;
			-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.3);
			-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.3);
			box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.3);
			border-radius: 4px;
			margin-top: 5px;
			position: absolute;
			top: 45px;
			left: 0;
			z-index: 2;
			width: 100%;
			// max-height: 400px;
			overflow-y: scroll;
			big {
				margin-bottom: 5px;
				display: block;
				small {
					font-size: 14px;
				}
			}
		}
		.dropdown-wrap {
			padding: 15px;
		}
		.close {
			position: absolute;
			padding: 5px 15px;
			top: 0;
			right: 0;
			color: #000;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			margin-bottom: 5px;
			border-bottom: 0;
			max-height: 100px;
	    overflow: scroll;
	    border-left: 2px solid #ececec;
	    padding-left: 10px;
	    margin-left: 4px;
			li {
				& {
					font-size: 12px;
				}
				input {
					margin-right: 10px;
				}
			}
		}
	}
	.input-group-btn {
		a {
			color: white;
			border-radius: 0;
		}
	}
	.arrow {
		padding: 8px;
    position: absolute;
    top: 3px;
    right: 100px;
    color: gray;
    z-index: 9;
    display: block;
    vertical-align: top;
	}
}
.search-dropdown {
	.dropdown-wrap {
		& {
			padding-left: 15px;
		}
		> strong {
		 margin-left: 23px;
		 display: block;
		 margin-bottom: 5px;
		 cursor: pointer;
		 &:hover {
			 color: gray;
		 }
		 &:after {
			 font-family: FontAwesome;
			 content: "\f077";
			 float: right;
			 font-size: 12px;
			 margin-top: 5px;
			 color: #ccc;
		 }
		 &.collapsed {
			 &:after {
				 content: "\f078";
			 }
		 }
	 }
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-bottom: 5px;
		border-bottom: 1px solid #ddd;
		padding-bottom: 15px;
		li {
			& {
				font-size: 12px;
			}
			input {
				margin-right: 10px;
			}
		}
	}
}



.nav-with-icon {
	.fa-stack {
		font-size: 16px;
		margin-right: 5px;
	}
	a {
		padding-top: 9px !important;
		padding-bottom: 9px !important;
	}
}
.all-search {
	position: relative;
	margin: 5px 10px;
	@media screen and (min-width: 768px) {
		margin: 8px 0;
	}
	input {
		padding-left: 30px;
		@media screen and (min-width: 768px) {
			width: 265px;
		}
		@media screen and (min-width: 991px) {
			width: 480px;
		}
		@media screen and (min-width: 1199px) {
			width: 560px;
		}
	}
	i {
		position: absolute;
		left: 9px;
		top: 9px;
		color: #ccc;
	}
	.save-search {
		position: absolute;
		top: 8px;
		right: 10px;
		@media screen and (min-width: 768px) {
			right: -85px;
		}
		@media screen and (min-width: 992px) {
			right: -85px;
		}
		@media screen and (min-width: 1199px) {
			right: -110px;
		}
		i {
			position: initial;
			margin-right: 5px;
		}
	}
}

.nav-category {
	margin-top: 5px;
	text-transform: uppercase;
	> li {
		&:hover {
			outline: 1px solid #eee;
		}
		@media screen and (min-width: 768px) {
			&:hover > a {
				&:before {
					content: '';
					height: 3px;
					width: 100%;
					background: #41B54B;

					position: absolute;
					top: -2px;
					left: 0;
				}
			}
		}
		&:hover ul {
			display: block;
		}
		ul {
			left: 0;
			top: 50px;
			padding: 0;
			list-style: none;
			margin: 0;
			white-space: nowrap;
			background: white;
			li {
				a {
					display: block;
					text-decoration: none;
					color: inherit;
					font-size: 14px;
					padding: 5px 20px;
					text-align: center;
					@media screen and (min-width: 768px) {
						padding: 0;
						text-align: left;
					}
				}
			}
			@media screen and (min-width: 768px) {
				display: none;
				position: absolute;
				padding: 5px 20px;
				border-left: 1px solid #eee;
				border-right: 1px solid #eee;
				border-bottom: 1px solid #eee;
			}
		}
	}
}

.super-action-button {
	padding-left: 50px;
	padding-right: 50px;
	&._white {
		background: white;
		border: 1px solid #41B54B;
		color: #41B54B;
	}
}

.countdown {
	text-align: center;
	margin-bottom: 0;
}

.drinktype {
	margin-bottom: 22px;
}

.floating-text {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 4;
	color: white;
	.left {
		position: absolute;
		top: 60px;
		left: 150px;
		text-align: center;
		h2 {
			margin-bottom: 20px;
			font-size: 46px;
		}
		h3 {
			line-height: 30px;
		}
	}
	.right {
		position: absolute;
		top: 90px;
		right: 0;
		text-align: center;
		h2 {
			margin-bottom: 120px;
			font-size: 46px;
		}
		h3 {
			line-height: 30px;
		}
	}
	.center {
		text-align: center;
		h2 {
			margin-bottom: 20px;
			font-size: 46px;
		}
		h3 {
			line-height: 30px;
		}
	}
}

.maker-filters {
	margin: 25px auto;
	width: 100%;
	@media screen and (min-width: 768px) {
		width: 50%;
	}
}

.maker-list {
	margin-bottom: 10px;

	.maker-description {
		//max-height: 240px !important;
		//height: 160px !important;
		//width: 300px !important;
		padding-right: 5px;
		//overflow: scroll;


		.summary-frame {

			$font-size : 14px;
			$line-height: 1.4;

			//border: solid 1px #ddd;
			//background-color: yellow;

			font-size: $font-size;
			line-height: $line-height;

			&.initial-fixed-size {
				height: 115px;
				overflow: visible;
			}
			$lines-to-show: 6;

			.summary {
				&.constrained {
					display: block; /* Fallback for non-webkit */
					display: -webkit-box;
					//height: 100px;
					//max-width: 400px;
					height: $font-size*$line-height*$lines-to-show - 2; /* Fallback for non-webkit */
					margin: 0 auto;
					font-size: $font-size;
					line-height: $line-height;
					-webkit-line-clamp: $lines-to-show;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					//background-color: red;
				}
			}
		}
		.maker-more {
			margin-top: 0px;
			cursor: pointer;
			font-size: 12px;
		}

		.summaryZ {
			display:inline-block;
			text-overflow: ellipsis;
			background-color: green;
			height: 100px !important;
			width: 300px !important;
			overflow: hidden;
			//white-space: nowrap;
		}
	}

	font-size: 14px;
	> .row {
		& {
			margin-top: 15px;
		}
		img {
			&.maker {
				width: 100%;
			}
		}
		.media-right {
			float: right;
		}
		.address {
			margin-top: 10px;
		}
	}
}

.about-info {
	& {
		font-size: 14px;
	}
	table tr td {
		padding: 5px;
		vertical-align: top;
	}
}

.map {
  & {
    position: relative;
		font-size: 14px;
  }
  &.about {
    & {
      margin-bottom: 15px;
    }
    img {
      width: 100%;
    }
		.map-info {
			position: absolute;
			left: 15px;
			top: 15px;
			table tr td {
				padding: 5px;
				vertical-align: top;
			}
		}
  }
}


.ratings-content {
	.nav-tabs {
		& {
			background: white;
			border: 1px solid #ddd;
			padding: 5px 0;
		}
		li {
			a {
				border-radius: 0;
				color: inherit;
			}
		}
		> li {
			margin: 0;
			a {
				&, &:focus, &:active, &:hover {
					border: 0;
					background: none;
				}
			}
		}
		li {
			&.active {
				a {
					color: #41B54B;
				}
				&:after {
					content: '';
					position: absolute;
					bottom: -5px;
					left: 0;
					width: 100%;
					height: 4px;
					background: #41B54B;
				}
			}
		}
	}
	.timeline {
		.badge {
			background: #41B54B;
			color: white;
		}
	}
}

.stats {
	table {
		width: 100%;
		td {
			vertical-align: top;
			.progress {
				width: 80%;
				height: 10px;
				float: left;
				margin-top: 5px;
			}
			.count {
				float: right;
			}
		}
	}
}


table {
	&.filter {
		width: 100%;
		td {
			padding: 5px 10px;
			border: 1px solid #dedede;
			border-top: 0;
			vertical-align: middle;
			text-align: center;
			& + td {
				border-right: 1px solid #dedede;
			}
			.topic-search {
				position: relative;
				i {
					position: absolute;
					left: 10px;
					top: 8px;
				}
				input {
					width: 100%;
					height: 34px;
					padding-left: 30px;
					border: 0;
					outline: 0;
				}
			}
		}
		.following {
			color: #ccc;
		}
	}
}

.interest-thumb {
	margin-top: 15px;
	margin-bottom: 15px;
	position: relative;
	img {
		width: 100%;
	}
	.label {
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px 10px;
    font-size: 16px;
    font-weight: 400;

		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

	}
}


.compare-summary {
	.alert {
		& {
			position: relative;
		}
		a {
			&.close {
				position: absolute;
				right: 0;
				top: 0;
				padding: 10px;
			}
		}
	}
}


.modal-body {
	h1,h2,h3,h4,h5 {
		&:first-child {
			margin-top: 0;
		}
	}
}

.modal_article {
	.modal-body {
		> img {
			width: 100%;
		}
	}
}


.joinfb {
	span {
		vertical-align: middle;
	}
	img {
		height: 14px;
		display: inline-block;
		vertical-align: middle;
	}
}

#modal_signup {
	.modal-dialog {
		width: 320px;
	}
	table {
		width: 100%;
		tr {
			td {
				vertical-align: top;
			}
		}
	}
	small {
		font-size: 12px;
		a {
			font-size: 12px;
		}
	}
}

#modal_edit_toppicks {
	.preview {
		max-width: 80px;
	}
	.points {
		text-align: center;
    background: white;
    @include box(60px);
    border-radius: 50%;
    border: 3px solid #41B54B;
    font-weight: bold;
    font-size: 34px;
		span, small {
			display: block;
	    line-height: 18px;
		}
		span {
	    margin-top: 13px;
		}
		small {
	    font-size: 10px;
		}
	}
}
.list_groups {
	&.toppicks {
		.media {
			padding: 15px 0;
			margin: 0;
		}
		.media + .media {
			border-top: 1px solid #eee;
		}
		.media-left {
			h4 {
				position: absolute;
			}
			img {
				max-width: 50px;
				margin-left: 25px;
			}
		}
		.media-body {
			& {
				position: relative;
				overflow: visible;
			}
			.points {
				position: absolute;
				bottom: -8px;
		    right: 2px;
				text-align: center;
				background: white;
				@include box(40px);
				border-radius: 50%;
				border: 3px solid #41B54B;
				font-weight: bold;
				font-size: 16px;
				span, small {
					display: block;
					line-height: 12px;
				}
				span {
					margin-top: 6px;
				}
				small {
					font-size: 7px;
				}
			}
		}
	}
}

.joincirclebuy {
	padding: 2px 15px;
	margin: 0 5px 0;
	display: inline-block;
}

.cbprice {
	margin-bottom: 0;
	font-size: 26px;
	line-height: 24px;
	margin-top: 5px;
	small {
		font-size: 14px;
	}
}
.cbpromo-price {
	margin-bottom: 0;
}

.totalcbcount {
	font-size: 16px;
}

// CIRCLEBUY on PROFILE
.list_groups {
	.content {
		.productdetails {
			& {
				border-top: 1px solid #eee;
				margin-top: 15px;
			}
			.shortsummary .sold,
			.shortsummary .left {
				// top: 10px;
				// font-size: 8px;
				p.lead {
					span {
						// font-size: 16px;
					}
				}
			}
			.infos {
				> .row {
					> div {
						padding: 0 5px;
						&:first-child {
							border-right: 1px solid #eee;
						}
					}
				}
				.card_rounded {
					background: none;
					border: 0;
					outline: 0;
					padding-left: 3px;
					padding-right: 3px;
				}
				.row {
					margin: 0;
				}
				.joincirclebuy {
					padding: 2px 8px;
					margin: 0 10px;
					font-size: 10px;
				}
			}
			.avatar {
				& {
					width: 100%;
					margin-bottom: 18px;
				}
				// rodan123
				.img {
					// width: 100%;
					// height: 100px;
					// @include box(50px);
					margin: auto;
					img {
						// padding: 12px;
					}
				}
				.countdown {
					& {
						bottom: -25px;
						font-size: 12px;
					}
				}
			}
			.shortsummary {
				font-size: 70%;
				> div {
					padding: 0;
				}
			}
			.cbprice {
				font-size: 14px;
				small {
					font-size: 11px;
				}
			}
		}
	}
}

.pagenav {
	border-bottom: 1px solid #ddd;
	padding: 0;
	margin-bottom: -25px;
	background: white;
}
nav {
	&.page {
		& {
			text-align: center;
		}
		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			li {
				& {
					display: inline-block;
				}
				a {
					position: relative;
					padding: 15px 12px;
					display: block;
					color: inherit;
					text-transform: uppercase;
					text-decoration: none;
					&.green {
						color: $green;
					}
				}
				&:hover {
					a {
						&:before {
							content: '';
							height: 3px;
							width: 100%;
							background: #41B54B;
							position: absolute;
							top: -2px;
							left: 0;
						}
					}
				}
			}
		}
	}
}

.input-group-btn {
	a {
		border-radius: 0;
	}
}

[data-expand-items] {
	display: none;
}


.el {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.photos {
	.prev {
		padding: 0;
		height: 250px;
		max-height: 300px;
		position: relative;
		overflow: hidden;
		img {
			position: absolute;
			max-width: none !important;
			max-height: none;
		}
	}
	.more-photos {
		position: absolute;
		color: white;
		font-size: 34px;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		display: table;
		width: 100%;
	}
}


p.lead {
	a {
		vertical-align: middle;
	}
}


section {
	&.drinks {
		& {
			font-size: 14px;
		}
		&.results {
			.search-dropdown {
				@media screen and (max-width: 990px) {
					position: absolute;
					z-index: 1;
					background: white;
					top: 0;
					left: 0;
					width: 100%;
					padding: 15px;
					border: 1px solid #eee;
					max-height: 400px;
					overflow: scroll;
			    box-shadow: 0px 0px 5px 0px rgba(50,50,50,0.3);
				}
			}
		}
	}
}


.btn-action-1 {
	margin-top: 5px;
	display: inline-block;
	color: #41B54B;
	white-space: nowrap;
	border: 1px solid #41B54B;
	text-align: center;
	font-size: 16px;
	border-radius: 5px;
	font-weight: 600;
	padding: 2px 6px;
	background: white;
}

.relative {
	position: relative;
}
.absolute {
	position: absolute;
	&._right {
		top: 0;
		right: 0;
	}
	&._left {
		top: 0;
		left: 0;
	}
}


.product-detail-wrap {
	.avatar .img {
		// @include box(100px);
	}
	.shortsummary .sold,
	.shortsummary .left {
		// top: 28px;
	}
	.joincirclebuy {
		// padding: 3px 10px;
	}
	.infos > hr {
		border-color: #41B54B;
	}
}


.pdetail-info-text {
	font-size: 22px;
	margin-top: 5px;}

@media screen and (min-width: 768px) {
	.product-detail-wrap h1 {
		margin-top: 0px;
	}
}

.see-all-drinks {
	top: 50px !important;
	background-color: white;
	margin-left: 5px;
}


.prod-details {
	text-align: left;
	display: flex;
	.cols {
		flex-grow: 1;
		align-self: center;
		a {
			display: inline-block;
		}
	}
	.qty {
		width: 130px;
	}
	.price {
		width: 215px;
	}
	.savings {
		width: 115px;
	}
	.more-actions {
		width: 475px;
		flex-grow: 2;
		text-align: left;
		a {
			margin-left: 10px;
			&.buynow {
				// float: left;
			}
		}
	}
	.label-qty {
		width: 110px;
		text-align: center;
	}
	.label-pack {
		width: 110px;
		text-align: center;
	}
	.label-savings {
		width: 110px;
		text-align: center;
		.lead {
			font-weight: bold;
			color: #41B54B;
			margin: 0;
		}
	}
	.label-bottle {
		width: 110px;
		text-align: center;
		.lead {
			font-weight: bold;
		}
	}
}

// FOR CIRCLEBUY SECTION
.circlebuy-table {
	padding: 10px 0 5px 0;
	.prod-details {
		padding: 0;
		.cols {
			align-self: baseline;
		}
		.label-qty {
			width: 50px;
		}
		.label-savings {
			strong.middle {
				vertical-align: middle;
			}
		}
		.label-bottle {
			width: 80px;
		}
		&.tr {
			.label-qty, .label-pack, .label-bottle {
				font-size: 16px;
			}
			.label-savings {
				.lead {
					font-size: 24px;
				}
			}
		}
	}
	.prod-details + .prod-details {
		padding-top: 0;
	}
}

.super-customized {
	.joincirclebuy + .joincirclebuy {
		margin-left: 35px;
	}
	.img {
		@include box(180px);
		img {
    	padding: 43px !important;
		}
	}
	.sold, .left {
		top: 100px !important;
	}
	.sold {
		left: 6px !important;
		p:not(.lead) {
			font-size: 16px;
		}
		.lead {
			span {
				font-size: 36px !important;
			}
		}
	}
	.left {
		right: 6px !important;
		p:not(.lead) {
			font-size: 16px;
		}
		.lead {
			span {
				font-size: 36px !important;
			}
		}
	}
}


.font12 {
	font-size: 12px;
}

.user-photo {
	& {
		display: inline-block;
		vertical-align: middle;
		margin-right: 8px;
	}
	img {
		vertical-align: middle;
		border-radius: 50%;
	}
}

.circlebuy-product-photo {
	img {
		max-height: 200px;
		display: block;
		margin: auto;
		@media screen and (min-width: 991px) {
			margin: 0 0 0 auto;
		}
	}
}
.circlebuys-info {
	text-align: center;
}
.circlebuys {
	text-align: center;
	margin-bottom: 5px;
}
.circlebuy-members {
	& {
		text-align: center;
	}
	> div {
		margin: 5px 0;
	}
}

.productdetails {
	.card_rounded {
		padding: 5px 5px 0 5px;
	}
}

// Added during philChristmas
.shared-order-calc-field {
	width: 60px;
	text-align: right;
}


body {
	// font-family: 'Roboto', sans-serif;
	font-family: 'Open Sans', sans-serif;
}


$stepper-height: 40px;
$stepper-value-width: 40px;
$stepper-button-width: 40px;
$stepper-border-width: 1px;
$stepper-button-bg: #3FB64B;
$stepper-value-bg: #eee;
div[rn-stepper] {
    border:1px solid #bbb;
    display:inline-block;
    height:$stepper-height + ($stepper-border-width * 2);
    box-sizing:border-box;
    button {
        appearance:none;
        -webkit-appearance:none;
        margin:0;
        border:0;
        width: $stepper-button-width;
        height:$stepper-height;
        box-sizing:border-box;
        background: $stepper-button-bg;
        color: white;
        font-weight:bold;
        font-size:20px;
         outline: none;
        &:active {
            box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.25);
            background: darken($stepper-button-bg, 5%);
       }
    }
    div {
        vertical-align:top;
        width:$stepper-value-width;
        background:$stepper-value-bg;
        text-align:center;
        display:inline-block;
        height:$stepper-height;
        line-height:$stepper-height;
        box-sizing:border-box;

    }
}


.gauge {
	width: 160px;
	height: 190px;
	position: relative;
	img {
		position: absolute;
		z-index: 1;
    left: 0;
    right: 0;
    top: -12px;
    bottom: 0;
    @include box(70px);
    margin: auto;
    border-radius: 50%
	}
	.circlebuyGauge {
		position: relative;
		&:after {
			font-family: 'FontAwesome';
			content: "\f017";
			position: absolute;
			bottom: 4px;
			left: 28px;
			font-size: 17px;
		}
		.dxg-range-container {
			min-height: 160px;
		}
		.dxg-title {
    		transform: translate(90px, 177px);
		}
	}
}

.drinks_result .count {
	padding-bottom: 10px;
}

.compare .count {
	padding-bottom: 10px;
}

circlebuy-widget {
	.bottle-price {
    margin-left: 50px;
	}
}






// ADMIN, SUPPLIER PANE ======================================================================

#tab-supplier-directory .drop-photo {
	padding: 10px;
	border: 2px dashed #ddd;
	text-align: center;
	margin-bottom: 15px;
	i {
		font-size: 72px;
		color: #ddd;
	}
	span {
		color: #ccc;
	}
}


.btn-admin1 {
	// See http://charliepark.org/bootstrap_buttons/
	background-color: hsl(36, 100%, 40%) !important;
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffad32", endColorstr="#cc7a00");
	background-image: -khtml-gradient(linear, left top, left bottom, from(#ffad32), to(#cc7a00));
	background-image: -moz-linear-gradient(top, #ffad32, #cc7a00);
	background-image: -ms-linear-gradient(top, #ffad32, #cc7a00);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffad32), color-stop(100%, #cc7a00));
	background-image: -webkit-linear-gradient(top, #ffad32, #cc7a00);
	background-image: -o-linear-gradient(top, #ffad32, #cc7a00);
	background-image: linear-gradient(#ffad32, #cc7a00);
	border-color: #cc7a00 #cc7a00 hsl(36, 100%, 35%);
	color: #333 !important;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.33);
	-webkit-font-smoothing: antialiased;
}

.btn-admin {
	// See http://charliepark.org/bootstrap_buttons/
  background-color: hsl(0, 97%, 37%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb2626", endColorstr="#b90202");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fb2626), to(#b90202));
  background-image: -moz-linear-gradient(top, #fb2626, #b90202);
  background-image: -ms-linear-gradient(top, #fb2626, #b90202);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fb2626), color-stop(100%, #b90202));
  background-image: -webkit-linear-gradient(top, #fb2626, #b90202);
  background-image: -o-linear-gradient(top, #fb2626, #b90202);
  background-image: linear-gradient(#fb2626, #b90202);
  border-color: #b90202 #b90202 hsl(0, 97%, 32%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
  -webkit-font-smoothing: antialiased;
}


//$admin 	: #d9534f;
$admin-highlight 	: #d9534f;
$admin-color 	: #555;
$admin-font-size 	: 14px;


.admin-colors {
	color: $admin-color !important;
	font-size: $admin-font-size;

	h2 {
		color: #d9534f;
	}

	// Input fields
	input {
		color: $admin-color !important;
		font-size: $admin-font-size;
	}
	select {
		color: $admin-color !important;
		font-size: $admin-font-size;
	}

	// tabs and anchors
	a {
		//color: #d9534f !important;
		//color: #666 !important;
		//color: #999 !important;
	}

	li.active a {
		//color: $admin-highlight !important;
		font-weight: bold;
		//color: orange !important;

	}

	// Placeholder
	::-webkit-input-placeholder { /* Chrome */
	  color: #999;
	}
	:-ms-input-placeholder { /* IE 10+ */
	  color: #999;
	}
	::-moz-placeholder { /* Firefox 19+ */
	  color: #999;
	  opacity: 1;
	}
	:-moz-placeholder { /* Firefox 4 - 18 */
	  color: #999;
	  opacity: 1;
	}
}