@mixin mid-devices($border-color) { 
	.offers--wrap {
		width: 100%;

		.offer__image {
			width: 100px;
			height: 100px;
			border: 1px solid $border-color;
			float: left;
			display: inline-block;
			vertical-align: top;
			text-align: center;
    		padding: 2px;
			img {
				width: auto;
				height: 100%
			}
		}
		.offer--detail-wrap {
			width: calc(100% - 100px);
			display: inline-block;
			height: auto;
		}
		.offer--detail {
			width: 100%;
			height: 59px;
			padding: 10px 10px;
			border-top: 1px solid $border-color;
			border-left: none; 

			.offer-title {
				font-size: 14px;
				line-height: 16px;
				margin: 0px;
			}
			
		}
		.offer--footer {
			width: 100%;
			padding: 5px 10px;
			text-align: right;
			border-left: none; 
			.detail-btn {
				font-size: 12px;
			}
			.price {
				float: left;
				.amount {
					font-size: 12px;
				}
			}
		}

		.ribbon {
			font-size: 12px;
		}

	}
	.provider__logo {
		display: none;
	}
	.offer--detail {
		.offer-desc {
			display: none;
		}
	}
}


@mixin small-devices($border-color) { 
	.offers--wrap {	
		.offer__image {
			width: 100%;
			text-align: center;
			border: 1px solid $border-color;
			border-bottom: none;
			img {
				width: 100%;
				height: auto;
			}
		}
		.offer--detail-wrap {
			width: 100%;
		}
	}
}


/**
* Card Theme1
*/

.offerstack-widget {

	$primary-color: #4cbb63;
	$border-color: #a9a8a9;

	background: lighten( $primary-color, 42% );
	padding: 80px 10px;
	text-align: center;


	.offers--wrap {
		position: relative;
		width: 32%;
		height: auto;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		border: 3px solid transparent;
		text-align: left;
		margin: 5px 0px; 


		&:hover {
			border: 3px solid $primary-color;			
			box-shadow: 0px 4px 14px 0px lighten( $primary-color, 10% );
		}
		
		.offer__image {
			width: 100%;
			height: 130px;
			overflow: hidden;
			background: #fff;
			border: 1px solid $border-color;
			img {
				width: 100%
			}
		}
		.provider__logo {
			position: absolute;
			left: 20px;
			top: 88px;
			width: 65px;
			height: 65px;
			border: 1px solid $border-color;
			background: #fff;
			padding: 5px;
			vertical-align: middle;
			img {
				width: 100%;
				margin-top: 15px;
			}
		}	
		

		.offer--detail {
			padding: 35px 15px 15px 15px;
			height: 300px;
			background: #fff;
			border-right: 1px solid $border-color;
			border-left: 1px solid $border-color;
			overflow: hidden;

			.offer-title {
				color: $primary-color;
				font-size: 16px;
				line-height: 18px;
				margin-bottom: 12px;
			}
			.offer-desc {
				font-size: 14px;
				line-height: 20px;
				color: #686868;	
			}
		}

		.offer--footer {
			width: 100%;
			background: lighten( $primary-color, 44% );
			padding: 5px;
			border: 1px solid $border-color;
			padding: 10px;
			text-align: center;
			white-space: nowrap;

			div {
				text-align: center;
				display: inline-block;
				white-space: nowrap;
			}
			.price {
				color: #8d8d8d;
				font-size: 12px;
				.amount {
					color: $primary-color;
					font-weight: 400;
					font-size: 16px;
				}
			}
			.detail-btn {
				background: $primary-color;
				color: #fff;
				font-size: 12px;
				padding: 0px 10px;
				margin-left: 1%;
			}
		}
		

		.ribbon {
			position: absolute;
			left: -5px;
			top: 10px;
			background: $primary-color; 
			color: #fff;
			width: 80px;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			white-space: nowrap;
			
			&:after {
				content: "";
			    position: absolute;
			    top: 0px;
				right: -15px;
			    display: block;
			    border: 10px solid $primary-color;
			    border-right-color: transparent;

			}
			&:before {
				content: '';
			    position: absolute;
			    left: 0;
			    top: -6px;
			    width: 0;
			    height: 0;
			    border: 3px solid $primary-color;
			    border-top-color: transparent;
			    border-left-color: transparent;
			    white-space: normal;
			}
			
		}
	}

	@media only screen and (max-width: 700px) {
		
		@include mid-devices($border-color);

	}

	@media only screen and (max-width: 300px) {
		@include small-devices($border-color);
	}




	&.offerstack-widget-sidebar {
		padding: 0px;
		@include mid-devices($border-color);
		/*@include small-devices($border-color);*/
	}

	&.offerstack-slider {
		padding: 0px;

		.offer-nested-slides {
			display: none;
		}

		.offer-slide-hide {
			display: none;
		}
		.offer-slide-show {
			display: inline-block;
		}

	}


	.offer-pagination {
		display: block;
		text-align: center;

		li.offer-slide-no {
			display: inline-block;
			text-decoration: none;
			width: 10px;
			height: 10px;
			background: darken( $primary-color, 5% );;
			border-radius: 50%;
			margin: 15px 1px!important;
			cursor: pointer;

			&.selected-slide {
				background: gray;
			}
		}
	}

}