Blog Roll

To get a better understanding of aluminum extrusions it's important to understand the different shapes and sizes, and the step-by-step process before choosing your supplier. Learn more about custom aluminum extrusions.

Read More

Корисні посилання


PHP
<section class="blog">
	<div class="wrapper">
		<div class="blog_wrap">
			<main class="blog_content">
				<article class="blog_article">
					<div class="title_wrap">
						<h2><a href="#">A Better Understanding of Aluminum Extrusions</a></h2>
						<p>Posted on <strong class="title_link">October 07, 2019</strong> by <strong class="title_link"><a href="#">Admin</a></strong></p>
					</div>
					<div class="sharethis-inline-share-buttons"></div>
					<div class="row_f">
						<div class="col_5">
							<a class="img_wrap" href="#">
								<img src="/img/blog_img_1.jpg" alt="A Better Understanding of Aluminum Extrusions">
							</a>
						</div>
						<div class="content || short_desc || col_7">
							<p>To get a better understanding of aluminum extrusions it's important to understand the different shapes and sizes, and the step-by-step process before choosing your supplier. Learn more about custom aluminum extrusions.</p>
							<a href="#" class="button">Read More</a>
						</div>
					</div>
				</article>
				
				<article class="blog_article">
					<div class="title_wrap">
						<h2><a href="#">Outsourcing Plastic Injection Molding: Save Time, Reduce Cost and Increase Efficiency</a></h2>
						<p>Posted on <strong class="title_link">November 15, 2019</strong> by <strong class="title_link"><a href="#">Publisher</a></strong></p>
					</div>
					<div class="sharethis-inline-share-buttons"></div>
					<div class="row_f">
						<div class="col_5">
							<a class="img_wrap" href="#">
								<img src="/img/blog_img_2.jpg" alt="Outsourcing Plastic Injection Molding: Save Time, Reduce Cost and Increase Efficiency">
							</a>
						</div>
						<div class="content || short_desc || col_7">
							<p>For companies to effectively meet the highest standards of product quality and on-time delivery it’s necessary to outsource services to a trusted plastic injection molding company</p>
							<a href="#" class="button">Read More</a>
						</div>
					</div>
				</article>
				
				<article class="blog_article">
					<div class="title_wrap">
						<h2><a href="#">Why Aluminum Extrusion is Excellent for Housing Construction</a></h2>
						<p>Posted on <strong class="title_link">October 07, 2019</strong> by <strong class="title_link"><a href="#">Admin</a></strong></p>
					</div>
					<div class="sharethis-inline-share-buttons"></div>
					<div class="row_f">
						<div class="content || short_desc || col_12">
							<p>For architects, engineers, and builders planning a new construction project, custom aluminum extrusion components should be top-of-mind.</p>
							<a href="#" class="button">Read More</a>
						</div>
					</div>
				</article>
				
				<!-- <h2 class="empty_heading || tc">Nothing Found</h2>-->
				
				<!-- Blog Pagination -->
				<ul class="pagination">
					<li class="pagination_arrow || pagination_arrow_prev">
						<a href="#"><?= svg('iconFastForward2','')?></a>
					</li>
					<li class="active"><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li class="pagination_arrow">
						<a href="#"><?= svg('iconFastForward2','')?></a>
					</li>
				</ul>
			</main>
			
			<!-- Blog Sidebar -->
			<aside class="blog_sidebar">
				<div class="aside_form_wrapper">
					<!-- modal_contact -->
					<div class="image_wrap">
						<?= svg('iconChat2','zoomIn') ?>
					</div>
					
					<form action="" method="POST" class="contact_form || validate_form" autocomplete="off" novalidate>
						<div class="modal_text">
							<h3 class="modal_title"><?=(isset($modal_title) ? $modal_title : 'Contact Us Today')?></h3>
						</div>
						
						<?php if(isset($data['locationInput']) && !empty($data['locationInput'])):?>
							<input type="hidden" name="location_url" value="<?= $data['locationInput']?>" >
						<?php elseif(isset($locationInput) && !empty($locationInput)):?>
							<input type="hidden" name="location_url" value="<?= $locationInput?>" >
						<?php endif;?>
						
						<div class="form_item">
							<span class="pre_input">Your Name</span>
							<label>
								<input type="text" name="name" class="input || validate" autocomplete="off">
							</label>
						</div>
						
						<div class="form_item">
							<span class="pre_input">Your Phone</span>
							<label>
								<input type="tel" name="phone" class="input || phone_us || validate_tel" inputmode="numeric" autocomplete="off">
							</label>
						</div>
						
						<div class="form_item">
							<span class="pre_input">Your Email</span>
							<label>
								<input name="email" type="email" class="input || validate_email" autocomplete="off">
							</label>
						</div>
						
						<div class="form_item">
							<span class="pre_input">Your Message</span>
							<label>
								<textarea name="message" class="input || validate" autocomplete="off"></textarea>
							</label>
						</div>
						
						<div class="row_f || captcha_submit_block">
							<div class="col_4">
								<div class="form_item">
									<span class="pre_input">Please Answer</span>
									<label>
										<input type="number" name="a" class="input || validate_cap" inputmode="numeric" placeholder="<?= $firstCaptchaNumber ?>+<?= $secondCaptchaNumber ?>=" autocomplete="off">
									</label>
								</div>
							</div>
							<div class="col_8">
								<button type="submit" class="button">Submit</button>
							</div>
						</div>
					</form>
				</div>
				
				<a href="#" class="button || aside_mobile_btn" data-location-input="ref=blog">Contact Us</a>
				
				<div class="aside_block">
					<h3 class="aside_title">Search Blog</h3>
					<form action="/blog-search" method="get" class="validate || blog_search" rel="search">
						<label for="blogSearch">
							<input type="search" name="word" id="blogSearch" class="input || validate" placeholder="<?=(isset($word) && $word != '' ? $word : 'Search')?>" onkeydown="this.form.submit">
						</label>
						<button><?=svg('icon_search', '')?></button>
					</form>
				</div>
				
				<div class="aside_block">
					<h3 class="aside_title">Categories</h3>
					<ul>
						<li class="active"><a href="#">Featured Articles</a></li>
						<li><a href="#">General Interest</a></li>
						<li><a href="#">Tips & Tricks</a></li>
					</ul>
				</div>
				
				<div class="aside_block">
					<h3 class="aside_title">Tags</h3>
					<ul class="aside_tags">
						<li class="active"><a href="#" rel="tag">Aluminum</a></li>
						<li><a href="#" rel="tag">Aluminum Extrusions</a></li>
						<li><a href="#" rel="tag">Extrusions</a></li>
						<li><a href="#" rel="tag">Material</a></li>
						<li><a href="#" rel="tag">Weight Reduction</a></li>
						<li><a href="#" rel="tag">DIY Project</a></li>
					</ul>
				</div>
				
				<div class="aside_block">
					<h3 class="aside_title">Recent Posts</h3>
					<ul class="recent">
						<li class="active">
							<a href="#">
								<strong>A Better Understanding of Aluminum Extrusions</strong>
							</a>
							<span>November 16, 2020</span>
						</li>
						<li>
							<a href="#">
								<strong>Outsourcing Plastic Injection Molding: Save Time, Reduce Cost and Increase Efficiency</strong>
							</a>
							<span>October 26, 2020</span>
						</li>
						<li>
							<a href="#">
								<strong>Why Aluminum Extrusion is Excellent for Housing Construction</strong>
							</a>
							<span>September 7, 2020</span>
						</li>
					</ul>
				</div>
				
				<div class="aside_block">
					<h3 class="aside_title">Authors</h3>
					<ul class="aside_authors">
						<li class="active">
							<a href="#" rel="author">
								<img src="/img/avatar.jpg" alt="admin">
								<span>Admin</span>
							</a>
						</li>
						<li>
							<a href="#" rel="author">
								<img src="/img/avatar.jpg" alt="publisher">
								<span>Publisher</span>
							</a>
						</li>
					</ul>
				</div>
				
				<div class="aside_block">
					<h3 class="aside_title">Archive</h3>
					<ul class="aside_archive">
						<li class="active"><a href="#">September 2020 (1)</a></li>
						<li><a href="#">August 2020 (3)</a></li>
						<li><a href="#">July 2020 (4)</a></li>
						<li><a href="#">June 2020 (5)</a></li>
						<li><a href="#">May 2020 (1)</a></li>
						<li><a href="#">April 2020 (1)</a></li>
						<li><a href="#">March 2020 (1)</a></li>
						<li><a href="#">February 2020 (1)</a></li>
						<li><a href="#">January 2020 (1)</a></li>
						<li><a href="#">December 2019 (1)</a></li>
						<li><a href="#">November 2019 (1)</a></li>
						<li><a href="#">August 2019 (1)</a></li>
					</ul>
				</div>
			</aside>
		</div>
	</div>
</section>
	
<script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5d77c6fdab6f1000123c86fe&product=inline-share-buttons' async='async'></script>
CSS
.blog .blog_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.blog main{width:75%;padding:0 6rem 0 0}
.blog aside{width:25%}
.blog .blog_article{border-bottom:.1rem solid #d9d9d9;padding:0 0 3.5rem;margin:0 0 3rem}
.blog .blog_article .title_wrap h1{color:#066978;font-size:4rem;line-height:1.2;font-weight:700;text-transform:uppercase;margin:0}
.blog .blog_article .title_wrap h2{font-size:3rem;line-height:1.2;font-weight:700;text-transform:uppercase;margin:0}
.blog .blog_article .title_wrap h2 a{color:#066978;-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.blog .blog_article .title_wrap p{margin:1rem 0}
.blog .blog_article .title_wrap p a{-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.blog .blog_article .img_wrap{position:relative;display:block;width:100%;padding-top:66%;overflow:hidden}
.blog .blog_article .img_wrap img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;\A	';-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.blog .blog_article .short_desc p{font-size:1.6rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.blog.blog_post .blog_article{padding:0;margin:0;border-bottom:none}
.blog .sharethis-inline-share-buttons{margin:0 0 1.5rem;z-index:2!important}
.blog .blog_post_img{float:right;margin:0 0 1rem 2rem;max-width:40%;width:40%}
.blog_sidebar{padding:.4rem 0 0 4rem;position:relative}
.blog_sidebar::after{content:"";display:block;position:absolute;top:.6rem;left:0;height:-webkit-calc(100% - .6rem);height:-moz-calc(100% - .6rem);height:calc(100% - .6rem);border-left:.1rem solid #d9d9d9;z-index:-1}
.blog_sidebar .aside_mobile_btn{display:none}
.blog_sidebar .aside_form_wrapper{margin:0 0 3rem;background-color:#f5f5f5;padding:1.5rem}
.blog_sidebar .aside_form_wrapper .image_wrap{display: none}
.blog_sidebar .contact_form .pre_input{font-size:1.4rem}
.blog_sidebar .contact_form .input{height:3rem;border:.1rem solid #cdcdcd}
.blog_sidebar .contact_form textarea.input{min-height:5rem}
.blog_sidebar .contact_form .button{display:block;width:12rem;font-size:1.4rem;margin:1.5rem auto 0;min-width:unset}
.blog_sidebar .contact_form .row_f [class*='col_']{width:-webkit-calc(100% - 3.01rem);width:-moz-calc(100% - 3.01rem);width:calc(100% - 3.01rem)}
.blog_sidebar .modal_title,.blog_sidebar .aside_title{font-size:2rem;font-weight:700;line-height:1;color:#09a5be;margin:0 0 1.2rem;text-transform:capitalize}
.blog_sidebar .modal_title{text-align:center}
.blog_sidebar .blog_search{position:relative;margin-bottom:2rem}
.blog_sidebar .blog_search .input{background-color:transparent;border:.1rem solid #cdcdcd;color:#000;padding:0 1rem 0 3.2rem;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;border-radius:.3rem;height:3rem;font-size:1.4rem}
.blog_sidebar .blog_search .input::-webkit-input-placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search .input:-moz-placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search .input::-moz-placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search .input:-ms-input-placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search .input::-ms-input-placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search .input::placeholder{font-size:1.4rem;color:#626262}
.blog_sidebar .blog_search button{position:absolute;top:.8rem;left:1.2rem;background-color:transparent;border:none;cursor:pointer}
.blog_sidebar .blog_search button svg{display:block;width:1.3rem;height:1.3rem;color:#8c8c8c}
.blog_sidebar .aside_block{margin-bottom:3rem}
.blog_sidebar .aside_block:last-child{margin-bottom:0}
.blog_sidebar .aside_block p{font-size:1.8rem;color:#f4f4f4;text-transform:uppercase;margin:0}
.blog_sidebar .aside_block a{-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear}
.blog_sidebar .aside_block li{padding:.7rem 0;border-bottom:.1rem solid #d9d9d9}
.blog_sidebar .aside_block li:first-child{padding:0 0 .7rem}
.blog_sidebar .aside_block li.active a{color:#066978;pointer-events:none}
.blog_sidebar .aside_block li a{display:inline-block;font-size:1.6rem;color:#8c8c8c}
.blog_sidebar .aside_tags li{display:inline-block;vertical-align:middle;margin:0 .5rem 1rem 0;padding:0;border-bottom:none}
.blog_sidebar .aside_tags li:first-child{padding:0}
.blog_sidebar .aside_tags li.active a{background:#09a5be;color:#fff}
.blog_sidebar .aside_tags li a{display:block;color:#fff;font-size:1.4rem;text-transform:capitalize;font-weight:700;background:#066978;padding:.6rem .7rem .5rem;border-bottom:none}
.blog_sidebar .recent li{color:#626262;border-bottom:.1rem solid #d9d9d9;line-height:1.2;padding:1rem 0 .7rem}
.blog_sidebar .recent li:first-child{padding:0 0 1rem}
.blog_sidebar .recent li a{display:inline-block;color:#000;border-bottom:none;line-height:1.3;padding:0}
.blog_sidebar .recent li a strong{font-weight:600}
.blog_sidebar .recent li span{display:block;font-size:1.4rem;color:#8c8c8c}
.blog_sidebar .aside_authors li a{font-size:0}
.blog_sidebar .aside_authors li a img{display:inline-block;vertical-align:middle;margin:0 1rem 0 0;width:3.5rem;height:3.5rem;-o-object-fit:cover;object-fit:cover;font-family:'object-fit: cover;\A	';-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:.2rem solid #fff;-webkit-box-shadow:0 0 0 .2rem rgba(217,217,217,0.4);-moz-box-shadow:0 0 0 .2rem rgba(217,217,217,0.4);box-shadow:0 0 0 .2rem rgba(217,217,217,0.4)}
.blog_sidebar .aside_authors li a span{display:inline-block;vertical-align:middle;font-size:1.6rem}
.blog_sidebar .aside_archive{max-height:25.2rem;overflow-y:auto}
.empty_heading{font-size:4rem;line-height:1.2;text-transform:uppercase;margin:1rem 0 2rem;color:#09a5be}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.aside_block li a:hover{color:#066978}
	.aside_tags li a:hover{background-color:#09a5be;color:#fff}
	.blog .blog_article .title_wrap p a:hover{color:#066978}
	.blog .blog_article .title_wrap h2 a:hover{color:#09a5be}
	.blog .blog_article .img_wrap:hover img{-webkit-transform:translate(-50%,-50%) scale(1.1);-moz-transform:translate(-50%,-50%) scale(1.1);-ms-transform:translate(-50%,-50%) scale(1.1);-o-transform:translate(-50%,-50%) scale(1.1);transform:translate(-50%,-50%) scale(1.1)}
}

@media only screen and (max-width: 1200px) {
	.blog_sidebar{padding:.4rem 0 0 2.5rem}
}

@media only screen and (max-width: 992px) {
	.blog main{width:70%;padding:0 3.5rem 0 0}
	.blog aside{width:30%}
	.blog .blog_article .title_wrap h1{font-size:3rem}
	.blog .blog_article .title_wrap h2{font-size:2.4rem}
	.blog_sidebar .aside_block li a,.blog_sidebar .aside_authors li a span{font-size:1.4rem}
	.blog .blog_article .short_desc p{font-size:1.4rem;-webkit-line-clamp:3}
	.blog .blog_article .title_wrap p{font-size:1.4rem}
	.blog_sidebar .sub_title,.blog_sidebar .aside_title{font-size:1.8rem}
	.blog_sidebar .aside_archive {max-height: 26.5rem}
	.empty_heading{font-size:3rem}
}

@media only screen and (max-width: 767px) {
	.blog main{width:100%;padding:0}
	.blog aside{width:45rem;padding:0;margin:1.5rem auto 0}
	.blog.blog_post .blog_article{border-bottom:.1rem solid #d9d9d9;padding:0 0 2rem;margin:0 0 2rem}
	.blog_sidebar::after{display:none}
	.blog_sidebar .aside_authors li a{padding:.7rem 0 .7rem .2rem}
}

@media only screen and (max-width: 550px) {
	.blog .blog_article .row_f [class*='col_']{width:-webkit-calc(100% / 1 - 3.01rem);width:-moz-calc(100% / 1 - 3.01rem);width:calc(100% / 1 - 3.01rem)}
	.blog .blog_article .img_wrap{margin:0 0 2rem}
	.blog .blog_article .short_desc p{display:block;overflow:unset}
	.blog .blog_article .title_wrap h1{font-size:2.6rem}
	.blog .blog_article .title_wrap h2{font-size:2.2rem}
	.blog .blog_post_img{margin:0 0 1rem 1rem}
}

@media only screen and (max-width: 450px) {
	.blog_sidebar .aside_form_wrapper{display:none}
	.blog_sidebar .aside_mobile_btn{display:block;max-width:16rem;margin: 0 auto 3rem}
	.blog .blog_post_img{float:none;margin:0 0 2rem;max-width:100%;width:100%}
}
SCSS
/* Vars */
$main:            #09a5be;
$dark:            #066978;
$white:           #ffffff;
$cb:              #000000;

.blog {
	
	.blog_wrap {
		display: flex;
		flex-wrap: wrap;
	}
	
	main {
		width: 75%;
		padding: 0 6rem 0 0;
	}
	
	aside {
		width: 25%;
	}
	
	.blog_article {
		border-bottom: 0.1rem solid #d9d9d9;
		padding: 0 0 3.5rem;
		margin: 0 0 3rem;
		
		.title_wrap {
			h1 {
				color: $dark;
				font-size: 4rem;
				line-height: 1.2;
				font-weight: 700;
				text-transform: uppercase;
				margin: 0;
			}
			
			h2 {
				font-size: 3rem;
				line-height: 1.2;
				font-weight: 700;
				text-transform: uppercase;
				margin: 0;
				
				a {
					color: $dark;
					transition: .3s linear;
				}
				
			}
			
			p {
				margin: 1rem 0;
				
				a {
					transition: .3s linear;
				}
			}
		}
		
		.img_wrap {
			position: relative;
			display: block;
			width: 100%;
			padding-top: 66%;
			overflow: hidden;
			
			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				font-family: 'object-fit: cover;';
				transition: .3s linear;
			}
		}
		
		.short_desc {
			p {
				font-size: 1.6rem;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
				overflow: hidden;
			}
		}
	}
	
	&.blog_post {
		.blog_article {
			padding: 0;
			margin: 0;
			border-bottom: none;
		}
	}
	
	.sharethis-inline-share-buttons {
		margin: 0 0 1.5rem;
		z-index: 2 !important;
	}
	
	.blog_post_img {
		float: right;
		margin: 0 0 1rem 2rem;
		max-width: 40%;
		width: 40%;
	}
}

.blog_sidebar {
	padding: 0.4rem 0 0 4rem;
	position: relative;
	
	&::after {
		content: "";
		display: block;
		position: absolute;
		top: .6rem;
		left: 0;
		height: calc(100% - .6rem);
		border-left: 0.1rem solid #d9d9d9;
		z-index: -1;
	}
	
	.aside_mobile_btn {
		display: none;
	}
	
	.aside_form_wrapper {
		margin: 0 0 3rem;
		background-color: #f5f5f5;
		padding: 1.5rem 1.5rem 1.5rem;
		
		.image_wrap {
			display: none;
		}
	}
	
	.contact_form {
		.pre_input {
			font-size: 1.4rem;
		}
		
		.input {
			height: 3rem;
			border: .1rem solid #cdcdcd;
		}
		
		textarea.input {
			min-height: 5rem;
		}
		
		.button {
			display: block;
			width: 12rem;
			font-size: 1.4rem;
			margin: 1.5rem auto 0;
			min-width: unset;
		}
		
		.row_f {
			[class*='col_'] {
				width: calc(100% - 3.01rem);
			}
		}
	}
	
	.modal_title, .aside_title {
		font-size: 2rem;
		font-weight: 700;
		line-height: 1;
		color: $main;
		margin: 0 0 1.2rem;
		text-transform: capitalize;
	}
	
	.modal_title {
		text-align: center;
	}
	
	.blog_search {
		position: relative;
		margin-bottom: 2rem;
		
		.input {
			background-color: transparent;
			border: 0.1rem solid #cdcdcd;
			color: #000000;
			padding: 0 1rem 0 3.2rem;
			border-radius: .3rem;
			height: 3rem;
			font-size: 1.4rem;
			
			&::placeholder {
				font-size: 1.4rem;
				color: #626262;
			}
		}
		
		button {
			position: absolute;
			top: .8rem;
			left: 1.2rem;
			background-color: transparent;
			border: none;
			cursor: pointer;
			
			svg {
				display: block;
				width: 1.3rem;
				height: 1.3rem;
				color: #8c8c8c;
			}
		}
	}
	
	.aside_block {
		margin-bottom: 3rem;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		p {
			font-size: 1.8rem;
			color: #f4f4f4;
			text-transform: uppercase;
			margin: 0;
		}
		
		a {
			transition: .3s linear;
		}
		
		li {
			padding: .7rem 0;
			border-bottom: 0.1rem solid #d9d9d9;
			
			&:first-child {
				padding: 0 0 .7rem;
			}
			
			&.active a {
				color: $dark;
				pointer-events: none;
			}
			
			a {
				display: inline-block;
				font-size: 1.6rem;
				color: #8c8c8c;
			}
		}
	}
	
	.aside_tags {
		li {
			display: inline-block;
			vertical-align: middle;
			margin: 0 .5rem 1rem 0;
			padding: 0;
			border-bottom: none;
			
			&:first-child {
				padding: 0;
			}
			
			&.active {
				a {
					background: $main;
					color: $white
				}
			}
			
			a {
				display: block;
				color: $white;
				font-size: 1.4rem;
				text-transform: capitalize;
				font-weight: 700;
				background: $dark;
				padding: .6rem .7rem .5rem;
				border-bottom: none;
			}
		}
	}
	
	.recent {
		li {
			color: #626262;
			border-bottom: 0.1rem solid #d9d9d9;
			line-height: 1.2;
			padding: 1rem 0 0.7rem;
			
			&:first-child {
				padding: 0 0 1rem;
			}
			
			a {
				display: inline-block;
				color: #000;
				border-bottom: none;
				line-height: 1.3;
				padding: 0;
				
				strong {
					font-weight: 600;
				}
			}
			
			span {
				display: block;
				font-size: 1.4rem;
				color: #8c8c8c;
			}
		}
	}
	
	.aside_authors {
		li {
			a {
				font-size: 0;
				
				img {
					display: inline-block;
					vertical-align: middle;
					margin: 0 1rem 0 0;
					width: 3.5rem;
					height: 3.5rem;
					object-fit: cover;
					font-family: 'object-fit: cover;';
					border-radius: 50%;
					border: 0.2rem solid white;
					box-shadow: 0 0 0 .2rem rgba(217, 217, 217, 0.4);
				}
				
				span {
					display: inline-block;
					vertical-align: middle;
					font-size: 1.6rem;
				}
			}
		}
	}
	
	.aside_archive {
		max-height: 25.2rem;
		overflow-y: auto;
	}
}

.empty_heading {
	font-size: 4rem;
	line-height: 1.2;
	text-transform: uppercase;
	margin: 1rem 0 2rem;
	color: $main;
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.aside_block {
		li {
			a {
				&:hover {
					color: $dark;
				}
			}
		}
	}
	.aside_tags li {
		a {
			&:hover {
				background-color: $main;
				color: $white;
			}
		}
	}
	.blog .blog_article .title_wrap p a:hover {
		color: $dark;
	}
	.blog .blog_article .title_wrap h2 a:hover {
		color: $main;
	}
	.blog .blog_article .img_wrap:hover img {transform:translate(-50%, -50%)scale(1.1);}
}

@media only screen and (max-width: 1200px) {
	.blog_sidebar {padding: 0.4rem 0 0 2.5rem;}
}

@media only screen and (max-width: 992px) {
	.blog main {width: 70%;padding: 0 3.5rem 0 0;}
	.blog aside {width: 30%;}
	.blog .blog_article .title_wrap h1 {font-size: 3rem}
	.blog .blog_article .title_wrap h2 {font-size: 2.4rem;}
	.blog_sidebar .aside_block li a, .blog_sidebar .aside_authors li a span {font-size: 1.4rem;}
	.blog .blog_article .short_desc p {font-size: 1.4rem;-webkit-line-clamp: 3;}
	.blog .blog_article .title_wrap p {font-size: 1.4rem}
	.blog_sidebar .sub_title, .blog_sidebar .aside_title {font-size: 1.8rem}
	.blog_sidebar .aside_archive {max-height: 26.5rem;}
	.empty_heading {font-size: 3rem}
}

@media only screen and (max-width: 767px) {
	.blog main {width: 100%;padding: 0;}
	.blog aside {width: 45rem;padding: 0;margin: 1.5rem auto 0}
	.blog.blog_post .blog_article {border-bottom: 0.1rem solid #d9d9d9;padding: 0 0 2rem;margin: 0 0 2rem;}
	.blog_sidebar::after{display: none}
	.blog_sidebar .aside_authors li a {padding: 0.7rem 0 .7rem 0.2rem;}
}

@media only screen and (max-width: 550px) {
	.blog .blog_article .row_f [class*='col_'] {width: calc(100% / 1 - 3.01rem);}
	.blog .blog_article .img_wrap {margin:0 0 2rem}
	.blog .blog_article .short_desc p {display: block;overflow: unset;}
	.blog .blog_article .title_wrap h1 {font-size: 2.6rem}
	.blog .blog_article .title_wrap h2 {font-size: 2.2rem;}
	.blog .blog_post_img{margin: 0 0 1rem 1rem;}
}

@media only screen and (max-width: 450px) {
	.blog_sidebar .aside_form_wrapper {display: none;}
	.blog_sidebar .aside_mobile_btn {display: block;max-width: 16rem; margin: 0 auto 3rem}
	.blog .blog_post_img {float: none;margin: 0 0 2rem;max-width: 100%;width: 100%;}
}

Please, enter a valid value