/*----------------------------------------------
	Announcement Contents Styles
----------------------------------------------*/

.announcement {
	margin: 10px 0;
	padding: 0;
	position: relative;

	a.ccm-block-page-list-rss-feed {
		padding-top: 15px;
		line-height: 1;
	    position: absolute;
	    top: 0;
	    right: 0;
	}

	.palette-heading {
		margin: 0;

		h1, h2, h3, h4, h5, h6 {
			margin-top: 10px;
			color: @main-theme-color;
			font-weight: normal;
		}

		h1 {
			font-size: 1.2em;
			font-size: 1.2rem;
		}
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none inside;

		li {
			margin: 10px 0;
			padding: 10px 0 0 0;
			color: @body-type-color;
			font-size: .8em;
			font-size: .8rem;
			line-height: 1.8;
			border-top: dotted 1px @page-background-color;
			&:first-child {
				border: none;
			}

			.ccm-block-page-list-title {
				padding-right: 0;
				font-weight: 700;

				time {
					font-weight: 400;
				}
			}

			a {
				color: @body-type-color;
				text-decoration: none;
				&:hover,
				&:focus {
					color: @body-link-hover-color;
				}
				&:before {
					margin-right: 3px;
					padding: 0;
					font-family: "Font Awesome 5 Free", sans-serif;
					font-size: 1em;
					font-size: 1rem;
					font-style: normal;
					font-weight: 900;
					font-variant: normal;
					content: "\f105";
				}
			}

			.ccm-block-page-list-page-entry-read-more {
				text-align: right;
			}

			p {
				margin: 0 0 10px 0;
				padding: 0;
				color: @body-type-color;
				font-size: .8em;
				font-size: .8rem;
				line-height: 1.8;
			}

			time {
				display: inline-block;
				width: 11em;
				padding-right: 10px;
			}

			span {
				/* font-weight: bold; */
			}
			.new {
				display: inline-block;
				margin-left: 10px;
				padding: 2px 6px;
				color: @body-text-white-color;
				font-family: @font-family-title;
				font-size: 1.2em;
				font-size: .8rem;
				line-height: 1.2;
				font-weight: bold;
				background-color: @main-theme-color;
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;
				border-radius: 2px;
			}
		}
	}

	.announcement-container {
		width: 100%;
		margin: 0;
		text-align: left;

		.centered {
			margin: 10px 0 0 0;
		}

	}

	&.topics {

		h2 {
			margin-bottom: 30px;
			font-size: 1.5em;
			font-size: 1.5rem;
			position: relative;

			&:after {
				width: 100%;
				height: 10px;
				margin: 0;
				padding: 0;
				background: -webkit-gradient(linear, left top, right bottom, from(@main-theme-color), color-stop(0.25, @main-theme-color), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, @main-theme-color), color-stop(0.75, @main-theme-color), color-stop(0.75, transparent), to(transparent));
				background: -moz-linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
				background: linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
				background-size: 4px 4px;
				content: "";
				position: absolute;
				bottom: -15px;
				left: 0;
			}

			.new {
				display: inline-block;
				margin-left: 10px;
				padding: 2px 8px;
				font-size: .8em;
				font-size: .8rem;
			}
		}

		li {
			margin-bottom: 30px;
			padding-top: 30px;
			font-size: .9em;
			font-size: .9rem;
			&:first-child {
				padding-top: 0;
			}

			.ccm-block-page-list-page-entry-read-more {
				text-align: right;

				a {
					display: inline-block;
					margin: 10px 0;
					padding: 3px 8px;
					color: @body-text-white-color;
					background-color: @main-theme-color;
					box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
						-webkit-transition: all .2s ease-in-out;
						-moz-transition: all .2s ease-in-out;
					transition: all .2s ease-in-out;

					&:hover,
					&:focus {
						background-color: darken(@main-theme-color, 6%);
						box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
					}
				}
			}

		}

		.ccm-block-page-list-pub {
			text-align: right;

			.page-date {
				width: auto;
				margin-right: 20px;
				color: @body-text-sub-color;
				&:before {
					padding-right: 2px;
					font-family: "Font Awesome 5 Free", sans-serif;
					font-style: normal;
					font-weight: 900;
					font-variant: normal;
					content: "\f017";
				}

				time {
					width: auto;
					padding-right: 0;
					color: @body-text-sub-color;
				}
			}

			.page-author {
				color: @body-text-sub-color;
				&:before {
					padding-right: 2px;
					font-family: "Font Awesome 5 Free", sans-serif;
					font-style: normal;
					font-weight: 900;
					font-variant: normal;
					content: "\f007";
				}
			}
		}
	}

	.announcement-list {
		time {
			display: block;
		}

		@media (min-width: 768px) {
			time {
				display: inline-block;
			}
		}
	}
}

@media (min-width: 768px) {

	.announcement {
		&.horizontal {
			display: flex;
			display: -webkit-flex;
				-webkit-align-items: center;
			align-items: center;

			.palette-heading {
				margin: 0;
				flex: 1;
				display: flex;
				display: -webkit-flex;
					-webkit-align-items: center;
				align-items: center;
					-webkit-justify-content: flex-start;
				justify-content: center;

				h1, h2, h3, h4, h5, h6 {
					margin: 0;
				}
			}

			p {
				margin: 10px 0;
			}

			.announcement-container {
				flex: 2;
				/* min-height: 210px; */
				width: auto;
				height: 50%;
				margin-right: 0;
				padding-left: 30px;
				display: flex;
				display: -webkit-flex;
					-webkit-align-items: center;
				align-items: center;

				.centered {
					width: 100%;
					margin: 0;
					padding: 0 0 10px;
				}
			}
		}
	}
}



/*----------------------------------------------
	Product Item List Styles
----------------------------------------------*/

.product-item-list {

	.item-grid {
		max-width: 100%;
		margin: 0 0 20px;
		padding: 0;
	}

	@media (min-width: 480px) {
		.item-grid {
			float: left;
			width: 48%;
			max-width: 48%;

			&:nth-child(even) {
				float: right;
			}
		}

	}
}

.product-item-list-full {

	.item-grid {
		max-width: 100%;
		margin: 0 0 20px;
		padding: 0;
	}

	@media (min-width: 480px) {
		.item-grid {
			float: left;
			width: 48%;
			max-width: 48%;

			&:nth-child(even) {
				float: right;
			}
		}

	}

	@media (min-width: 768px) {
		.item-grid {
			float: left;
			width: 32%;
			max-width: 32%;
			margin-right: 2%;
			padding: 0;

			&:nth-child(even) {
				float: left;
			}

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

	}
}

.product-item-list,
.product-item-list-full {

	a {
		display: block;
		height: 100%;
		padding: 20px;
		color: @body-type-color;
		text-decoration: none;
		background-color: @main-base-color;
			-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;

		img {
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
		}
		&:active {
			box-shadow: 0 0 0 0 rgba(0,0,0,0),0 0 0 0 rgba(0,0,0,0);;
		}
		&:hover {
				-webkit-box-shadow: 0 5px 12px 0 rgba(0,0,0,0.18),0 5px 16px 0 rgba(0,0,0,0.15);
			box-shadow: 0 5px 12px 0 rgba(0,0,0,0.18),0 5px 16px 0 rgba(0,0,0,0.15);
			img {
					-webkit-filter: brightness(0.8);
					-moz-filter: brightness(0.8);
					-o-filter: brightness(0.8);
					-ms-filter: brightness(0.8);
				filter: brightness(0.8);
			}
		}
		&:focus {
			color: @body-link-hover-color;
				-webkit-box-shadow: 0 5px 12px 0 rgba(0,0,0,0.18),0 5px 16px 0 rgba(0,0,0,0.15);
			box-shadow: 0 5px 12px 0 rgba(0,0,0,0.18),0 5px 16px 0 rgba(0,0,0,0.15);
		}
	}

	.gallery-card {
		display: block;
		/* height: 100%; */
		padding: 20px;
		color: @body-type-color;
		text-decoration: none;
		background-color: @main-base-color;
			-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
			-webkit-transition: all .2s ease-in-out;
			-moz-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}

	.gateaux-item {

		h3 {
			margin: 10px 0 25px;
			padding: 5px;
			font-size: 1em;
			font-size: 1rem;
			text-align: center;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, .8);
			position: relative;
			&:after {
				width: 100%;
				height: 10px;
				margin: 0;
				padding: 0;
				background: -webkit-gradient(linear, left top, right bottom, from(@main-theme-color), color-stop(0.25, @main-theme-color), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, @main-theme-color), color-stop(0.75, @main-theme-color), color-stop(0.75, transparent), to(transparent));
				background: -moz-linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
				background: linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
				background-size: 4px 4px;

				content: "";
				position: absolute;
				bottom: -15px;
				left: 0;
			}
		}

		p {
			margin-bottom: 0;
			font-size: .9em;
			font-size: .9rem;
			text-align: left;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, .8);
			line-height: 1.4;

			&.product-price {
				margin-bottom: 0;
				font-size: 1em;
				font-size: 1rem;
				font-family: @font-family-serif;
				text-align: center;
			}
		}

		 img {
			margin: 0;
				-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
				-moz-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
				-o-box-shadow: 0 0 5px rgba(255, 255, 255, .5);
			box-shadow: 0 0 5px rgba(255, 255, 255, .5);
		}
	}
}

.content-secondary,
.block-sidebar-wrapped {
	.ccm-block-page-list-wrapper {
	 	margin: 0 0 50px;

	 	.ccm-block-page-list-header {
		 	padding: 0;

		 	h5 {
				margin: 0 0 15px;
				padding: 0;
				color: @header-site-title-type-color;
				font-family: @font-family-title;
				font-size: 1.1em;
				font-size: 1.1rem;
				position: relative;
				&:after {
					width: 100%;
					height: 8px;
					margin: 0;
					padding: 0;
					background: -webkit-gradient(linear, left top, right bottom, from(@main-theme-color), color-stop(0.25, @main-theme-color), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, @main-theme-color), color-stop(0.75, @main-theme-color), color-stop(0.75, transparent), to(transparent));
					background: -moz-linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
					background: linear-gradient(-45deg, @main-theme-color 25%, transparent 25%, transparent 50%, @main-theme-color 50%, @main-theme-color 75%, transparent 75%, transparent);
					background-size: 4px 4px;
					content: "";
					position: absolute;
					bottom: -10px;
					left: 0;
				}
			}
		}

		.ccm-block-page-list-page-entry {
			margin-bottom: 0;

			.ccm-block-page-list-page-entry-text {
		    	margin: 0;
		    	line-height: 1.4;

		    	.ccm-block-page-list-title {
					margin-bottom: 0;
					padding-right: 0;
					padding-bottom: 0;
					font-size: .9em;
					font-size: .9rem;
					font-weight: normal;
					border: none;

					a {
						display: block;
						padding: 0;
						color: @body-text-sub-color;
						background-color: none;
						/* border-bottom: solid 1px @main-base-color; */
						&:before {
							margin-right: 3px;
							padding: 0;
							font-family: "Font Awesome 5 Free", sans-serif;
							font-size: 1em;
							font-size: 1rem;
							font-style: normal;
							font-weight: 900;
							font-variant: normal;
							content: "\f105";
						}
					}
				}
			}
			@media only screen and (min-width: 480px) {
				.ccm-block-page-list-page-entry-text {
					margin-bottom: 5px;

					.ccm-block-page-list-title {
						margin-bottom: 0;
						margin-left: 2em;
						text-indent: -1em;

						a {
							padding: 0;
							color: @body-text-sub-color;
							background: none;
							border: none;
							&:before {
								margin-right: 3px;
								padding: 0;
							}
							&:hover {
								color: @body-link-hover-color;
								text-decoration: none;
							}
							&:focus {
								color: @body-link-hover-color;
							}
						}
					}
				}
			}
			.ccm-block-page-list-description {
				font-size: .9em;
				font-size: .9rem;
			}

			.ccm-block-page-list-date {
				margin-bottom: 10px;
				color: @body-link-color;
				font-size: .9em;
				font-size: .9rem;
			}
		}
		@media only screen and (min-width: 480px) {
			.ccm-block-page-list-page-entry {
			}
		}

		&.sidebar {

			.ccm-block-page-list-page-entry {
				margin: 0;
				padding: 10px 0 0 0;
				border-top: dotted 1px @page-background-color;
				&:first-child {
					padding-top: 0;
					border: none;
				}

				.ccm-block-page-list-page-entry-text {

				    .ccm-block-page-list-title {

						a {
							display: inline-block;
						}

						.new {
							margin-left: 10px;
							padding: 2px 8px;
							color: @body-text-white-color;
							font-family: @font-family-title;
							font-size: .8em;
							font-size: .8rem;
							line-height: 1.2;
							background-color: @main-theme-color;
								-webkit-border-radius: 2px;
								-moz-border-radius: 2px;
							border-radius: 2px;
						}
					}
				}

				time {
					display: inline-block;
					width: 11em;
					margin: 0;
					padding-right: 10px;
					font-size: .8em;
					font-size: .8rem;
					color: @body-type-color;
				}
			}
		}
	}
}

.ccm-block-page-list-thumbnail-grid-wrapper {
	margin-left: -15px;
	margin-right: -15px;

	.ccm-block-page-list-page-entry-grid-item {
 	 	position: relative;
 	 	min-height: 1px;
 	 	padding-left: 15px;
 	 	padding-right: 15px;
 	 	margin-bottom: 30px;
 	 	overflow: hidden;

		.ccm-block-page-list-page-entry-grid-thumbnail {

 	 		a {
 	 			display: table;
 	 			width: 100%;
	 	 		margin-top: 20px;
	 	 		color: @body-text-sub-color;
	 	 		position: relative;
	 	 		&:hover {
		 	 		opacity: 1;

		 	 		.ccm-block-page-list-page-entry-grid-thumbnail-hover {
			 	 		opacity: 1;
			 	 	}
	 	 		}

	 	 		.ccm-block-page-list-page-entry-grid-thumbnail-hover {
		 	 		position: absolute;
		 	 		top: 0;
		 	 		left: 0;
			 	 	width: 100%;
			 	 	height: 100%;
			 	 	background-color: rgba(0,0,0,0.7);
			 	 	z-index: 2;

			 	 	opacity: 0;
		 	 			-webkit-transition: opacity 0.2s;
		 	 			-moz-transition: opacity 0.2s;
		 	 			-ms-transition: opacity 0.2s;
		 	 			-o-transition: opacity 0.2s;
		 	 		transition: opacity 0.2s;



		 	 		.ccm-block-page-list-page-entry-grid-thumbnail-title-wrapper {
			 	 		display: table;
			 	 		width: 100%;
			 	 		height: 100%;

			 	 		.ccm-block-page-list-page-entry-grid-thumbnail-title {
			 	 			display: table-cell;
			 	 			width: 100%;
			 	 			height: 100%;
			 	 			color: @main-theme-color;
			 	 			text-align: center;
			 	 			vertical-align: middle;
			 	 			text-align: center;

			 	 			i {
			 	 				display: none;
			 	 				&.ccm-block-page-list-page-entry-grid-thumbnail-icon {
					 	 			display: block;
					 	 			margin: 0 auto 10px auto;
					 	 			&:before {
										font-family: "Font Awesome 5 Free", sans-serif;
										font-weight: 900;
						 	 			content: "\f064";
						 	 		}
						 	 	}
						 	}
						}
					}
			 	}
			}

 	 		.ccm-block-page-list-title {
		 		margin: 10px 0;
		 		font-size: @h4-type-font-size;
		 		color: @body-type-color;
		 		font-weight: 700;

		 		a {
					color: @body-link-hover-color;
				}
			}
	 	}
	}

	.ccm-block-page-list-header {
		padding-left: 15px;
		padding-right: 15px;
		font-size: 1.1em;
	}

	.ccm-block-page-list-no-pages {
		/* display: inline-block; */
		width: 30%;
		margin: 50px auto;
		padding: 30px;
		font-size: @h2-type-font-size;
		text-align: center;
		border: solid 2px @main-background-sub-color;
	}
}

@media (min-width: 767px) {
	.ccm-block-page-list-page-entry-grid-item {
		float: left;
		width: 33.33333333%;
		min-height: 147px;

		img {
			width: 100%;
			height: 147px;
		}
	}
}


@media (min-width: 992px) {
	.ccm-block-page-list-page-entry-grid-item {
		min-height: 193px;

		img {
			width: 100%;
			height: 193px;
		}
	}
}


@media (min-width: 1200px) {
	.ccm-block-page-list-page-entry-grid-item {
		min-height: 240px;

		img {
			width: 100%;
			height: 240px;
		}
	}
}

.ccm-block-page-list-page-entry,
.ccm-block-page-list-page-entry-horizontal {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: solid 1px @main-border-color;

	.ccm-block-page-list-title {
		margin-bottom: 10px;
		font-weight: 700;
	}

	a {
		&.ccm-block-page-list-read-more {
			display: inline-block;
			margin: 10px 0;
			padding: 3px 8px;
			color: @body-text-white-color;
			background-color: @main-theme-color;
			box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
			transition: all .2s ease-in-out;
			&:hover,
			&:focus {
				outline-offset: -3px;
				background-color: darken(@main-theme-color, 6%);
				box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
			}
		}
	}

	.ccm-block-page-list-page-entry-thumbnail {
		margin-bottom: 15px;
	}
}

.ccm-block-page-list-title {
	padding-right: 20px;
}