/*

Theme Name: TwentyTwentyone Mobile

Author: Vancouver Web Dev - child theme dev

Author URI: https://jenweb/dev

Template: twentytwentyone

Version: 1.3

*/


/* =Theme customization starts here

-------------------------------------------------------------- */

@media all and (max-width:1500px) {
	.blog .site-main,
	.archive .site-main {
		padding-left:2rem;
		padding-right:2rem;
		}
}


@media all and (max-width:1350px) {
	.blog-item {
		width:calc(33% - 1.7rem);
		}
}


@media all and (max-width:1190px) {
	.site-header {
		max-width:100%;
		padding-left:1rem;
		padding-right:1rem;
		}
}


@media all and (max-width:1130px) {
	#page .primary-navigation ul {
	column-gap:1rem;
	}
}


@media all and (max-width:1100px) {
	.site-content {
		padding-left:2rem;
		padding-right:2rem;
		}
		
	#page .entry-content,
	.blog .site-main,
	.archive .site-main,
	#page header.entry-header,
	#page #comments {
		padding-left:0;
		padding-right:0;
		}
		
	.blog-item {
		width:calc(50% - 1.5rem);
		}
		
   .singular h1.entry-title {
	   font-size:3rem;
   }
}


@media all and (max-width:1040px) {
	.site-branding {
		max-width:33%;
		}
}

@media all and (max-width:940px) {
	.site-branding {
		max-width:30%;
		}
}


@media all and (max-width:900px) {
	.site-header {
		padding-top:1rem;
		align-items:start;
		}
			 
	#page .site-navigation { width: 100%; }
	
	#page .primary-navigation {
		margin-left: 0;
		position: unset;
		width: 100%;
		background: none;
		}
		
	.menu-button-container,
	.primary-navigation-open .menu-button-container {
		display: flex;
		background-color: transparent;
		position: absolute;
		top: 5rem;
		right: 0.5rem;
		}
		
.primary-navigation .primary-menu-container { display: none; }

.primary-navigation-open .site-header .primary-navigation > .primary-menu-container {
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		max-width: 100%;
		min-width: unset;
		z-index: 999;
		top: 10rem;
		}

	#page .primary-navigation li.menu-item:first-of-type,
	#page .primary-navigation li.menu-item {
		max-width:98%;
		}
		
	#page .site-header .menu-button-container { padding-top: 0.5rem; }
	
	#primary-mobile-menu span {
		font-size: 1.6rem;
    	text-transform: uppercase;
		}

.site-header .primary-navigation > div > .menu-wrapper {
		justify-content: left;
		flex-direction: column;
		padding-left: 0;
		width: 100%;
		background: #e4e6df;
		padding-bottom: 3rem;
		padding-top: 2rem;
		}
		
	.site-header .primary-navigation > div > .menu-wrapper li {
		padding-left:2rem;
		}
		
	#page .primary-navigation ul {
		border-bottom:1px solid #000;
		padding-bottom:1rem;
		padding-top:0;
		}
		
	.site-branding {
		max-width:38%;
		}
}


@media all and (max-width:670px) {
	.header-social .widget_search {
			display:none;
			}
		
	.header-social {
		padding-right:0;
		}
	
	.site-branding {
		max-width:50%;
		}
}


@media all and (max-width:610px) {
	.blog-item {
		width:100%;
		}
		
	.blog-item img,
	.blog-item img.attachment-post-thumbnail {
		min-height:100%;
		max-height:unset;
		max-width:100%;
		max-height:100%;
		width:100%;
		height:auto;
		}
}


@media all and (max-width:481px) {
	.site-logo .custom-logo {
		padding-top:1rem;
		max-width:80%;
		position:relative;
		z-index:999;
		}
		
	.primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
		display:block;
		}
		
	.primary-navigation-open .site-header .primary-navigation > .primary-menu-container {
		padding-top:0;
		text-align:left;
		}
		
	.site-header .primary-navigation > div > .menu-wrapper li {
		padding-left:0;
		}
	#page .entry-content figure.alignnone,
	figcaption, .wp-caption, .wp-caption-text, 
	.wp-block-embed figcaption,
	.entry-content img {
		max-width:100%;
		}
		figcaption, .wp-caption, .wp-caption-text {
		margin:0.5rem 0 2rem 0;
		
		}
}