/* Html Box-sizing */

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* List reset */

header, footer, .responsive-nav, section.widget { ol, ul, li { margin: 0; padding: 0; list-style: none; } }

/* Main */

body, html { height: 100%; overflow: visible; }
body { font-size: @body-font-size; -webkit-font-smoothing: antialiased; }
a { color: #000; cursor: pointer; text-decoration: none; }
p, center { line-height: 170%; }

/* Headings styling and typography */

h1, h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; line-height: 140%; }
h1 { font-size: 46px; }
h2 { font-size: 36px; }
h3 { font-size: 30px; }
h4 { font-size: 26px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; }

/* Fit elements in blocks */

figure {	margin: 0; padding: 0; -webkit-margin-before:0em; -webkit-margin-after:0em; }
img, iframe { max-width: 100%; }
iframe {	display: block; img { max-width: none; } }
pre { white-space: pre-wrap; }
table { border-collapse: collapse; }

.screen-reader-text { display: none; }

/* Input, select, textarea */

button, input[type='submit'] {
	cursor: pointer;
	outline: none;
	&:hover, &:active, &:focus {
		outline: none;
	}
}

button {	padding: 0;	border: 0; }

textarea, input, select {
	border: 0;
	padding: 15px 15px;
	vertical-align: middle;
	font-size: @input-font-size;
	line-height: 100%;
	border-radius: 5px;
	.animate;
	&:focus {
		outline: none;
	}
	&:disabled {
		opacity: 0.3 !important;
		cursor: default !important;
	}
}

textarea {
	line-height: 170%;
}

textarea, input:not([type="submit"]), select {
	border: 3px solid transparent;
}

input[type='submit'], a.button, .default-button, button.button, .wp-block-button .wp-block-button__link:not( .has-text-color ) {
	color: #fff !important;
	&:hover {
		color: #fff !important;
	}
}

input[type='submit'], a.button, .default-button, button.button, .wp-block-button .wp-block-button__link {
	.text-shadow;
	font-size: @button-font-size;
	font-weight: 600;
	display: inline-block;
	border: 0;
	padding: 12px 24px;
	border-radius: @input-border-radius;
	margin: 0 0 5px 0;
	width: auto;
	text-decoration: none !important;
	line-height: 1.8;
	position: relative;
	.animate;

	&:hover {
		opacity: 0.8;
	}

	&:focus {
		outline: none;
		border: 0;
	}

	.fa {
		margin: 0 5px 0 0;
	}
}

.default-button-small, button.default-button-small, a.default-button-small {
	padding: 8px 22px;
}

/* Body Background */

.body-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 130%;
	will-change: transform;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Wrapper */

body:not(.single):not(.page) {
	.theme-body.has-gradient {
		.wrapper {
			padding-left: @pad;
			padding-right: @pad;
			@media (max-width: 740px) {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}
}

.theme-body:not(.has-gradient) {
	header.header-main, footer.footer-main, .top-nav, .content-feed {
		padding-left: @pad;
		padding-right: @pad;
		@media (max-width: 740px) {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

.wrapper {
	position: relative;
	@media (max-width: 740px) {
		header.header-main, footer.footer-main, .top-nav {
			padding-left: 15px;
			padding-right: 15px;
		}
	}
}

/* Social icons */

.social-wrap {
	font-size: @social-icons-font-size;
	a {
		.animate;
		display: inline-block;
		margin: 0 7px 10px 7px;
		&:last-child {
			margin-right: 0px;
		}
		&:first-child {
			margin-left: 0px;
		}
		@media (max-width: 700px) {
			margin: 0 10px 10px 10px;
		}
	}
} /* social icons */

/* Post Title */

.post-title {
	word-wrap: break-word;
}

/* Empty category */

.empty-cat-wrap {
	min-height: 400px;
	width: 100%;
	@media (max-width: 740px) {
		min-height: none;
		padding-top: 50px; 
		padding-bottom: 50px;
	}
	display: flex;
	align-items: center;
	justify-content: center;
}

.empty-cat {
	text-align: center;
	flex: 1;
	h2 {
		padding: 0;
		margin: 0 0 20px 0;
	}
	.searchform {
		margin: 0 0 20px 0;
		input {
			margin-top: 50px;
			margin-bottom: 50px;
			max-width: 700px;
			width: 80%;
			text-align: center;
		}
	}
}

.fourofour {
	font-size: 160px;
	line-height: 100%;
	margin: 50px 0;
	padding: 0;
	@media (max-width: 500px) {
		font-size: 140px;
	}
}

/* Required password */

article.post-password-required {
	.comments-count {
		display: none;
	}
	input[type='submit'] {
		display: block;
		margin: 15px 0 30px 0;
	}
}

/* Post category & tags */

.post-tags, .widget_tag_cloud, .post-category {
	a {
		.animate;
		.text-shadow;
		display: inline-block;
		font-size: @post-tags-font-size !important;
		margin: 0 3px 5px 3px;
		font-weight: 600;
		border-radius: 36px;
		padding: 8px 15px;
		line-height: 1;
		&:first-child {
			margin-left: 0;
		}
		&:last-child {
			margin-right: 0;
		}
		&:hover {
			opacity: 0.8;
		}
	}
}

.theme-body.colored_categories {
	.post-tags, .widget_tag_cloud, .post-category {
		a {
			color: #fff !important;
		}
	}
}

.theme-body:not(.colored_categories) {
	.post-tags, .widget_tag_cloud, .post-category {
		a {
			padding: 0;
			background: transparent !important;
			margin-left: 7px;
			margin-right: 7px;
			&:first-child {
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.content {
		.post-tags, .widget_tag_cloud, .post-category {
			a {
				text-shadow: none;
			}
		}
	}
}

/* Post-meta */

.post-meta {
	line-height: 170%;
	font-size: @meta-font-size;
	a {
		.animate;
	}
	.post-date-min {
		display: inline;
	}
	.post-date {
		display: none;
	}
	> div > span {
		&:before {
			content: ' \2012 ';
			margin-left: 5px;
			margin-right: 5px;
		}
		&:first-child:before {
			content: '';
			margin-right: 0;
			margin-left: 0;
		}
	}
}

/* Default paginator (Older posts, newer posts) */

nav.navigation {
	font-size: @pagination-font-size;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: right;

	@media (max-width: 740px) {
		text-align: center;
	}

	.nav-links {
		width: 100%;
		margin-top: 50px;
		margin-bottom: 50px;
		padding-top: 20px;
	}

	.current {
		color: #fff;
	}

	.next, .prev {
		margin-left: 10px;
	}

	@nav-size: 40px;

	.current, span, a:not( .next ):not( .prev ) {
		display: inline-block;
		width: @nav-size;
		height: @nav-size;
		line-height: @nav-size;
		vertical-align: middle;
		text-align: center;
	}
}

/* Author-bio */

.author-bio {
	.people {
		position: relative;
		z-index: 1;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}
	.person {
		flex: 0 0 49%;
		margin-bottom: @padb;
		display: flex;
		.picture {
			width: 150px;
			height: 150px;
			border-radius: 50%;
			background-size: cover;
			background-position: center center;
		}
		.text {
			flex: 1 1 50%;
			margin-left: 25px;
			margin-right: 15px;
		}
		.name {
			margin: 0 0 15px 0;
			padding: 0;
			font-size: @author-heading-font-size;
			a {
				.animate;
			}
		}
		&:nth-child(even) {
			flex-direction: row-reverse;
			text-align: right;
		}
		&:nth-child(even) .text {
			margin-right: 25px;
			margin-left: 15px;
		}
		&:only-child {
			margin-left: auto;
			margin-right: auto;
			flex-direction: row;
			align-items: center;
			text-align: left;
			max-width: @post;
			flex: 1;
			.text {
				margin-right: 0;
				margin-left: 25px;
			}
		}
		.social-wrap {
			a {
				margin: 0 10px;
				&:last-child {
					margin-right: 0px;
				}
				&:first-child {
					margin-left: 0px;
				}
			}
		}
	}
	@media (max-width: 930px) {
		.person {
			display: block;
			margin-bottom: @pad + @pad / 2;
			&:last-child {
				margin-bottom: @padb;
			}
			.picture {
				margin-bottom: @pad;
			}
			.text {
				margin-left: 0;
				margin-right: 0;
			}
			&:nth-child(even) {
				.picture {
					margin-left: auto;
				}
			}
			&:nth-child(even), &:nth-child(odd), &:only-child {
				.text {
					margin-left: 0;
					margin-right: 0;
				}
			}
		}
	}
	@media (max-width: 740px) {
		.person {
			flex: 1 1 100%;
			&:nth-child(even), &:nth-child(odd), &:only-child {
				text-align: center;
				.text {
					margin-right: auto;
					margin-left: 0;
				}
				.picture {
					margin-right: auto;
					margin-left: auto;
				}
			}
		}
	}
} /* author-bio */

@spinner-border-width: 10px; //width of spinners border
@basic-spinner-dimensions: 100px; //width and height of spinner
@main-spinner-dimensions: @basic-spinner-dimensions - @spinner-border-width * 2; //width and height of bigger circle
@small-spinner-dimensions: @main-spinner-dimensions * 0.7; //width and height of smaller circle

.infinite-scroll-spinner  {
	position: fixed;
	bottom: @pad;
	left: 50%;
	transform: translate(-50%, 0);
	width: @basic-spinner-dimensions;
	height: @basic-spinner-dimensions;
	margin-left: auto;
	margin-right: auto;

	&:before,
	&:after {
		content: "";
		display: block;
		position: absolute;
		border-width: @spinner-border-width;
		border-style: solid;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		width: @main-spinner-dimensions;
		height: @main-spinner-dimensions;
		transform: translate(-50%, -50%);
	}
	@keyframes scale-2 {
		0% {
			transform: translate(-50%, -50%) scale(0);
			opacity: 0;
		}

		50% {
			transform: translate(-50%, -50%) scale(0.7);
			opacity: 1;
		}

		100% {
			transform: translate(-50%, -50%) scale(1);
			opacity: 0;
		}
	}

	&:before {
		animation: scale-2 1s linear 0s infinite;
	}

	&:after {
		opacity: 0;
		animation: scale-2 1s linear 0.5s infinite;
	}
}

.meta-over-image {
	font-size: @meta-font-size;
	transition: all 300ms ease-in-out;
	opacity: 0;
	text-align: center;
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translate(-50%, 50%);
	line-height: 28px;
	border-radius: @meta-border-radius;
	white-space: nowrap;
	pointer-events: none;
	padding: 0 10px;
	i {
		margin-right: 1px;
	}
	span {
		margin: 0 5px;
	}
}