finlabsindia/wp-content/themes/vamtam-consulting/vamtam/assets/css/shortcodes/blog/large.less

@icon-height: 20px;
@icon-offset: 0px;

.loop-wrapper {
	&.regular {
		.list-item {
			&:first-child {
				.post-row {
					padding-top: 0px;
				}
			}

			.post-content-outer {
				box-sizing: border-box;
				order: 3;
				flex: 12.5 1;
			}

			h2 {
				margin: 0px 0px 10px 0px;
			}

			.media-inner {
				> div {
					margin: 0;
				}
			}

			.post-meta {
				width: 100% !important;
				margin-top: 10px !important;


				a {
					margin-left: 5px;
					.vamtam-font(h6-);
					font-weight: normal;
					text-transform: uppercase;
				}
			}

			.post-row {
				display: flex;
				flex-wrap: wrap;
				padding-top: 60px;

				.media-inner {
					background-color: var( --vamtam-accent-color-5 );
					transition: background .4s ease-out;

					> img {
						-webkit-backface-visibility: hidden;
						transition: opacity .4s;
					}

					> img,
					> a > img.wp-post-image {
						width: 100%;
					}
				}
			}
		}

		.sticky {
			background: var( --vamtam-accent-color-5 );
			padding: 40px 40px 40px 20px;
			border-bottom: 10px solid var( --vamtam-accent-color-1 );
			border-radius: var( --vamtam-border-radius );
			box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
			box-sizing: border-box;
		}
	}

	.post-actions-wrapper {
		height: auto;
		width: 100%;
		padding-bottom: 10px;
		text-transform: uppercase;
		display: flex;
		align-items: center;

		.comment-word {
			display: none;
		}

		a {
			.vamtam-font(h6-);
			transition: all .3s ease;
			color: var( --vamtam-accent-color-6 );

			opacity: 0.5;
			border: var( --vamtam-no-border-link );

			&:hover {
				opacity: 1;
				color: var( --vamtam-body-link-hover );
				.icon {
					color: var( --vamtam-body-link-hover );
				}
			}
		}
		.author a .icon {
			display: none;
		}

		div:nth-child(2),
		div:nth-child(3) {
			&:before {
				content: "°";
				font-size: 14px;
				padding-left: 5px;
				padding-right: 1px;
				line-height: 1.0em;
				vertical-align: bottom;
				padding-bottom: 14px;
				color: var( --vamtam-accent-color-4 );
			}
		}

		.post-edit-link {
			margin-left: 10px;
		}
	}

	.layout-left-right &.regular {
		.list-item {
			.post-media {
				order: -1;
				flex-basis: 100%;
				padding-bottom: 30px;
			}

			.post-content-outer {
				max-width: 100%;
			}
		}
	}

	.post-row:hover {
		.media-inner > img {
			opacity: 0.8;
			-webkit-backface-visibility: hidden;
		}
	}

	.vamtam-meta-author {
		display: inline-block;
		padding: 0px;
	}
	.vamtam-meta-comments {
		display: inline-block;
	}

	.list-item {
		margin-bottom: 0;

		&:last-child {
			border-bottom: 0;
		}

		&:hover {
			.vamtam-meta-author,
			.vamtam-meta-comments {
				opacity: 1;
			}
		}

		.post-content-outer {
			.post-content {
				> ol, > ul {
					&:last-child {
						margin-bottom: 1em;
					}
				}
			}
		}

		.post-media {
			min-width: 37%;
			max-width: 37%;
			flex: 0 1 ;
			order: 2;
			margin: 0px;
			margin-bottom: 20px;
		    margin-top: 0px;
			padding-right: 5%;

			.media-inner {
				display: block;
			}
		}

		.post-article {
			display: block;
		}
	}

	header {
		position: relative;
	}

	.page-content {
		position: relative;
	}

	.post-article {
		display: inline-block;
		margin: 0;
		width: 100%;

		p {
			font-size: inherit;
		}

		.post-content-outer {
			.post-meta {
				overflow: hidden;
				margin: 40px 0 10px 0;
				text-align: center;
				clear: both;

				nav > div:not(.post-actions),
				.post-actions > div,
				.post-edit-link {
					.vamtam-font(h6-);
					float: left;
					padding-right: 20px;
					margin-bottom: 10px;
					min-height: 20px;
					line-height: 20px;
					text-align: left;

					> span.icon {
						color: var( --vamtam-accent-color-4 );
						font-family: "theme" !important;
					}

					&.blog-buttons {
						padding-top: 24px;
						border-right: none !important;

						a {
							position: relative;

							&:after {
								position: absolute;
								top: -25px;
								right: -20px;
								width: 1px;
								height: 300%;
								border-right: 1px solid var( --vamtam-accent-color-7 );
								content: "";
							}
						}
					}
				}

				span.icon {
					display: inline-block;
					overflow: hidden;
					text-align: center;
					width: auto;
					vertical-align: top;
					font-size: 18px;
					line-height: 18px;
				    padding-top: 2px;
					font-family: "theme" !important;
					color: var( --vamtam-accent-color-2 );
				}

				.post-actions {
					float: right;
				}
			}
		}

	}
	&.news {
		.audio-post-format {
			.post-media {
				margin: 0px;
			}
		}
		.post-media {
			max-width: 100%;
			padding: 0px;
		}
	}
}

.page-content {
	label[for|=pwbox] {
		position: relative;
		top: -3px;
		display: inline-block !important;
		font-size: 0 !important;

		input {
			font-size: var( --vamtam-primary-font-font-size ) !important;

			&[type=password] {
				padding: 14px;
				top: -1px;
				margin: 0;
				font-size: 8px;
				line-height: 17px;
			}
		}
	}
}

.post-article {
	header {

		&.sep-text.single {
			.content {
				text-align: left;
				white-space: normal;
			}

			.sep-text-after {
				display: none;
			}
		}

		h4 {
			margin: 0px 0px 10px 0px;
		}
	}
	.vamtam-button-wrap {
		margin: 0px 0px 30px 30px;
	}

	.post-subheader {
		display: table;
		width: 100%;
		font-size: 14px;

		.post-date {
			display: table-cell;
			margin: 0;
			padding-right: 1em;
			text-transform: uppercase;
			white-space: nowrap;
			font-size: 11px;
			line-height: 1;
		}

		.post-date-after {
			display: table-cell;
			overflow: visible;
			width: 100%;
			vertical-align: top;
			white-space: nowrap;

			&:after {
				display: inline-block;
				width: 100%;
				height: 1ex;
				border-bottom: 1px solid var( --vamtam-default-line-color );
				content: "";
				vertical-align: top;
			}
		}
	}

	.post-media {
		text-align: center;
		max-width: 1120px;
		margin: auto;

		.media-inner {
			position: relative;
			min-height: @icon-height + @icon-offset * 2;

			> div {
				max-width: none !important;
				width: auto !important;
			}

			> img,
			> a img {
				transition: all .3s;
				width: 100%;
			}
		}
	}

	.blog-buttons {
		text-align: center;

		&:after {
			display: block;
			clear: both;
			content: "";
		}

		a {
			display: inline-block;
			margin: 0 auto;

			.icon {
				margin: 0 8px 0 0;
				padding: 0;
				color: var( --vamtam-accent-color-1 );
				font-size: 16px;
			}
		}
	}

	///////////////////
	//  media posts  //
	///////////////////

	.audio-post-format {
		.media-inner {
			display: block;
		}
	}

	/* Quote Post ----------------------------------------------------------- */
	.quote-post-format {
		blockquote.large {
			padding: 0;
			overflow: visible;
			text-align: left;

			.quote-text {
				&, p {
					.vamtam-font(h3-);
				}
			}
		}

		.cite {
			img {
				border-bottom: 1px solid var( --vamtam-accent-color-7 );
				padding-bottom: 10px;
				margin-bottom: 10px;

				+ .quote-author {
					display: block;
				}
			}
		}
	}

	/* Aside Post ----------------------------------------------------------- */
	.aside-post-format {
		.post-content-outer {
			padding-top: 0;
		}
	}

	/* Status Post ----------------------------------------------------------- */
	.status-post-format {
		.the-content {
			padding-right: calc( var( --vamtam-small-padding ) + 16px ) !important;
		}
	}

	/* Gallery Post --------------------------------------------------------- */
	.gallery-post-format {
		.post-media {
			position: relative;
			text-align: center;

			.button {
				position: absolute;
				bottom: var( --vamtam-horizontal-padding );
				left: 50%;
				z-index: 5;
				margin-left: -var( --vamtam-horizontal-padding );
				padding: 0.7em 0.7em 0.75em;

				span {
					&:after {
						border: none !important;
					}
				}

				&:hover {
					text-decoration: none;
				}
			}

			.media-inner {
				display: block;
			}
		}
	}

	.excerpt-more {
		float: left;
		margin-top: -.6em;
	}

	.status-post-format,
	.aside-post-format,
	.link-post-format {
		.post-subheader {
			margin-bottom: 0 !important;
		}

		.post-media {
			margin-top: var( --vamtam-small-padding );
		}
	}

	.link-post-format {
		.post-media {
			margin-top: 0;
		}
	}

	.video-post-format {
		.media-inner {
			iframe {
				height: 360px;
			}
		}
	}
}

.vamtam-related-content {
	clear: both;
	position: relative;
	padding-top: 40px;
	padding-bottom: 50px;
	border-top: solid 1px var( --vamtam-default-line-color );

	&.related-portfolios .excerpt {
		display: none;
	}
	&.related-posts {
		padding-bottom: 35px;

		.related-content-title {
			padding-bottom: 25px;
		}
	}
}

.header-middle {
	.limit-wrapper {
		.news.scroll-x  {
			padding-top: 10px !important;
		}
	}
}