.widget {
	@include flex;
	background: $white;
	padding: $card-spacer-y $card-spacer-x;
	border-radius: $card-border-radius;
	margin: 30px 0;
	align-items: center;

	.icon-wrapper {
		width: 40px;
		padding: 0 5px;
		margin-right: 10px;
		font-size: 30px;
		opacity:.8;
	}

	.infos-wrapper {
		flex-grow: 1;
		padding: 10px;

		h4 {
			margin: 0;
			margin-bottom: 4px;
		}

		p {
			margin: 0;
		}
	}
}


.textmonial-item {
	@include flex;
	align-items: center;

	.avatar {
		min-width: 150px;
		max-width: 150px;
		min-height: 150px;
		max-height: 150px;
		border-radius: 50%;
		margin-right: 40px;
	}

	.des {
		flex-grow: 1;
		padding: 20px 0;
	}

	.line {
		width: 70px;
		height: 2px;
		border-radius: 2px;
		background: $primary;
		margin-bottom: 7px;
		margin-top: -5px;
	}

	.name {
		margin-bottom: 3px;
	}
}
@include media-breakpoint-down(sm) {

	.textmonial-item {
		.avatar {
			max-width: 80px;
			min-width: 80px;
			max-height: 80px;
			min-height: 80px;
			margin-right: 20px;
		}
	}
}


.blog-wrapper {
	@include flex;
	align-items: center; 

	.img-wrapper {
		min-width: 350px;
		max-width: 350px;
		position: relative;
		margin-right: 30px;

		img {
			width: 100%;
			border-radius: $card-border-radius;
			box-shadow: 0 0 25px rgba($gray-600, .2);
		}

		.date-container	{
			position: absolute; 
			top: 20px;
			left: 20px;		
			color: white;
			text-align: center;
			font-weight: bold;
			border-radius: $card-border-radius;
			overflow: hidden;

			.day {
				font-size: 25px;
				background: lighten($primary, 15%);
				margin: 0;
				width: 50px;
				height: 50px;
				line-height: 50px;
				margin: 0;
			}  

			.mun {
				font-size: 20px;
				background: lighten($primary, 7%);		
				margin: 0;
				padding: 5px 0;		
			}  
		}
	}
	.txt-wrapper {
		flex-grow: 1; 
		padding-right: 20px;

		.badge {
			margin: 15px 0 0;
		}

		.blog-footer {
			margin-top: 15px;
			color: $gray-700;
			font-size: 14px;
			opacity: .8;
			a {
				display: inline-block;
				margin: 0 10px;
				color: $gray-700;	

				i {
					display: inline-block;
					width: 15px;
				}

				&:first-child {
					margin-left: 0;
				}		
			}
		}
	}
}
@include media-breakpoint-down(sm) {

	.blog-wrapper {
		flex-direction: column;

		.img-wrapper {
			margin-right: 0;
			min-width: 100%;
			max-width: 100%;
			margin-bottom: 10px;

			img {
				width: 100%;
			}
		}
	}
}