/*=========================================
    TABLET (1024px)
=========================================*/


@media (max-width:1024px){

.container{
    width:95%;
}

/* Layout */
.content-wrapper{
    display:block;
}

.sidebar{
    margin-top:40px;
}

/* Hero */
.hero-grid{
    display:block;
}

.hero-right{
    margin-top:25px;
}

.hero-image img{
    height:260px;
}

.hero-title{
    font-size:28px;
}

/* Grids */
.latest-grid,
.category-grid,
.popular-grid,
.related-grid,
.footer-grid{
    grid-template-columns:repeat(2,1fr);
}

/* Single */
.single-content-wrapper{
    grid-template-columns:1fr;
}

.single-sidebar{
    position:static;
    order:-1;
    margin-bottom:30px;
}

}

/*=========================================
    MOBILE (768px)
=========================================*/
@media (max-width:768px){

.container{
    width:94%;
}

/* Header */
.header-wrapper{
    height:65px;
}

.site-logo a{
    font-size:22px;
}


/* Posts */
.post-card{
    margin-bottom:25px;
}

.post-title{
    font-size:22px;
}

/* Hero */
.hero-image img{
    height:220px;
}

.hero-title{
    font-size:24px;
}

/* All grids */
.latest-grid,
.category-grid,
.popular-grid,
.related-grid,
.footer-grid{
    grid-template-columns:1fr;
}

/* Newsletter */
.newsletter-box{
    padding:40px 25px;
}

.newsletter-box h2{
    font-size:28px;
}

.newsletter-form{
    flex-direction:column;
}

.newsletter-form input,
.newsletter-form button{
    width:100%;
}

/* Author */
.author-box{
    flex-direction:column;
    align-items:center;
    text-align:center;
}

/* Navigation */
.post-navigation{
    grid-template-columns:1fr;
}

/* Share Buttons */
.share-links{
    flex-direction:column;
}

.share-links a{
    width:100%;
}

/* Floating Share */
.floating-share{
    left:0;
    right:0;
    bottom:0;
    top:auto;
    transform:none;
    flex-direction:row;
    justify-content:center;
    padding:12px;
    background:rgba(17,24,39,.95);
}

}

/*=========================================
    SMALL MOBILE (480px)
=========================================*/
@media (max-width:480px){

body{
    font-size:15px;
}

.site-logo a{
    font-size:20px;
}

.post-title{
    font-size:19px;
}

.hero-title{
    font-size:22px;
}

.hero-image img{
    height:190px;
}

.newsletter-box{
    padding:30px 20px;
}

.newsletter-box h2{
    font-size:24px;
}

}

@media (max-width:768px){

	.header-wrapper{
		height:auto;
		padding:15px 0;
		flex-wrap:wrap;
	}

#primary-navigation{
	display:none;
	width:100%;
	order:3;
	margin-top:15px;
}

#primary-navigation.active{
	display:block;
}
	.primary-menu{
		display:flex;
		flex-direction:column;
		gap:15px;
		padding:20px 0;
	}

	.header-actions{
		margin-left:auto;
	}

	.menu-toggle{
	display:flex;
}

}