@import "../../assets/less.lib/variables.less";
@import "../../assets/less.lib/sb_mixins.less";
@import "../../assets/less.lib/layouts/style_mixins.less";

/* Example wrapper */
.news-page-slider-wrap {
    position: relative;
    padding: 0 0 ;
}

@media only screen and (max-width: 800px) {
	.news-page-slider .item .entry-title {
		font-size: 10px;
	}
}

.news-page-slider-wrap {
	.news-page-slider {
		.rel();
		max-width: 100%;
		margin: 0 auto;
		.item {
			.entry-thumb {
				.rel();
				&:before {
					content: "";
					.block();
					width: 100%;
					height: 100%;
					.abs();
					top: 0;
					left: 0;
					background: fade(@forth-site-dark-color, 20%);
					z-index: 1;
				}
				img {
					.block();
				}
			}
			.news-slider-entry-hover {
				.abs();
				left: 0;
				bottom: 120px;
				.block();
				width: 100%;
				overflow: hidden;
				z-index: 2;
				> * {
					padding: 0 110px;
				}
				h3.widget-title {
					color: @main-site-dark-color;
					a {
						color: inherit;
					}
				}
				.entry-meta {
					margin-bottom: 20px;
					color: fade(@main-site-dark-color, 50%);
					.byline {
						color: @main-site-dark-color;
						&:hover {
							color: @second-site-light-color;
						}
					}
				}
				.entry-content {
					.rel();
					min-height: 6em;
					margin-bottom: -6.5em;
					background: transparent;
					.opacity(0);
					z-index: 1;
					.transition(~"opacity .3s ease-in-out, margin-bottom .3s ease-in-out");
					p {
						width: 50%;
						color: @main-site-dark-color;
					}
					.dfd-animate-first-last {
						span.dfd-last {
							color: @main-site-dark-color;
						}
					}
				}
			}

			&:hover {
				.news-slider-entry-hover {
					.entry-content {
						margin-bottom: 0;
						.opacity(1);
					}
				}
			}
		}
	}
	.dfd-navbar-container {
		padding: 0 110px;
		.dfd-news-slider-navbar {
			.abs();
			left: 100px;
			bottom: 30px;
			width: 400px;
			.thumbnail-item {
				.rel();
				&:before {
					content: "";
					.block();
					.abs();
					top: 0; bottom: 0;
					left: 8px; right: 8px;
					background: transparent;
					border: 2px solid fade(@main-site-dark-color, 40%);
					cursor: pointer;
					visibility: hidden;
					.opacity(0);
					z-index: -1;
					.transition(~"visibility .3s ease, opacity .3s ease");
				}
				&:hover {
					&:before {
						.opacity(1);
						visibility: visible;
					}
				}
			}
			img {
				.block();
				padding: 2px 10px;
			}
		}
	}
}