/*

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

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

/*** 1540 ***/

@media all and (max-width: 1540px) {
	.primary-navigation #primary-menu-list {
		column-gap:2rem;
		align-items:start;
		}
		
	.primary-navigation #primary-menu-list li > a {
		font-size: 1.6rem;
		}	
		
	.primary-navigation #primary-menu-list .sub-menu-toggle {
		height:2.1rem;
		width:2.1rem;
		margin-left:0.5rem;
		}
	
	.sub-menu-toggle span {
		width:1.5rem;
		background-position:0 40%;
		}
}

/*** 1500 ***/

@media all and (max-width: 1500px) {
	.no-widgets .site-footer, .site-footer {
		padding-left:2rem;
		padding-right:2rem;
		}
		

}

/*** 1500 LAPTOPS ***/

@media all and (max-width: 1500px) {
	.home .site-header .header-content {
		padding-left:11%;
		padding-right:6rem;
		transition:none;
		transition: all 0.1s ease-in-out;
		}
		
	#site-header .header-right .top-content {
		right:6rem;
		transition:0.3s all ease;
		}
		
	#site-header.stuck .header-right .top-content {
		right:4rem;
		}
		
	.site-header.stuck .header-content,
	body:not(.home) .site-header .header-content {
		padding-left:4rem;
		padding-right:4rem;
		}
		
	.site-header.stuck .header-content {
		transition: all 0.2s ease-in-out;
		}

}

@media all and (max-width: 1400px) {
	.home .site-header:not(.stuck) .header-content {
		padding-left:9.5%;
		padding-right:4rem;
		}
		
	#site-header .header-right .top-content {
		right:4rem;
		}
}
		
		
@media all and (max-width: 1150px) {
	.home .site-header:not(.stuck) .header-content {
		padding-left:8%;
		padding-right:4rem;
		}
}

/*** 1100 ***/

@media all and (max-width: 1100px) {
	#page .entry-content .wp-block-columns.are-vertically-aligned-center .wp-block-column {
		align-self:start;
		}
		
	.wp-block-columns.are-vertically-aligned-center.home-top .wp-block-column:last-child {
		margin-top:1rem;
		}
		
	.home-top .wp-block-column:last-child {
		padding-right:1rem;
		padding-left:1rem;
		}
		
	#page .entry-content .resource-item.horizontal {
		column-gap:2rem;
		}
		
	#page .entry-content .resource-item.horizontal .thumb {
		width:calc(40% - 1rem);
		}
	#page .entry-content .resource-item.horizontal .resource-content {
		width:calc(60% - 1rem);
		}
		
				
	.home .wp-block-column.is-vertically-aligned-center {
		align-self:start;
		}
}

/*** 1075 ***/

@media all and (max-width:1075px) {
	.site-info .footer-sections {
		flex-wrap:wrap;
		}
		
	.site-info .footer-sections .footer-left,
	.site-info .footer-sections .footer-middle {
		width:calc(50% - 4rem);
		}
		
	.footer-middle .custom-html-widget {
		justify-content:left;
		}
		
	.site-info .footer-middle .widget-title {
		justify-self:center;
		text-align:left;
		}
	
	.site-info .footer-sections .footer-right {
		width:calc(50% - 4rem);
		margin-top:3rem;
		}
		
	#page .order-buttons {
		column-gap:1.5rem;
		}
		
	#page .order-buttons .wp-block-button {
		font-size:1.7rem;
		}
		
	#page .order-buttons .wp-block-button a {
		padding-left:1.4rem;
		padding-right:1.4rem;
		}
}


@media all and (max-width:930px) {
	.home-cover.desktop {
		display:none;
		}
		
	.home-cover.mobile {
		display:flex;
		}
	
}


@media all and (max-width:900px) {
	#page .entry-content .resource-item.horizontal {
		flex-direction:column;
		row-gap:2rem;
		}
		
	#page .entry-content .resource-item.horizontal .thumb,
	#page .entry-content .resource-item.horizontal .resource-content {
		width:100%;
		}
	}

/*** 850 - MENU SWITCH ***/

@media all and (max-width:850px) {
	.site-branding {
		max-width:35%;
		}
		
	.home .site-header:not(.stuck) .header-content {
		padding-left:2rem;
		padding-right:2rem;
		}
		
	#page .site-header .wp-block-social-links {
		padding-top:1.5rem;
		justify-content:center;
		}
		
	#page .site-header .wp-block-social-links .wp-social-link svg {
		color:#fff;
		}
		
	.site-header.stuck .site-branding {
		max-width:25%;
		}
		
	.site-header .header-content {
		padding-left:2rem;
		padding-right:2rem;
		}
		
	#site-header .header-right .top-content,
	#site-header.stuck .header-right .top-content {
		right:1.5rem;
		top:0;
		}

	#page .site-header .header-main,
	#page .site-header.stuck .header-main {
		position: relative;
		align-items: flex-start;
		}
		
	#page .site-header .menu-button-container {
		display: flex;
		background-color: transparent;
		position: absolute;
		top: 6rem;
		right: 1rem;
		width:50%;
		transition:all 0.2s ease;
		}

		
	.site-header .nav-container {
		margin:0;
		}
		
	.primary-navigation-open #page .site-header .menu-button-container {
		right:1rem;
		}
		
	.menu-button-container #primary-mobile-menu {
		padding:0.5rem;
		}
		
	.primary-navigation-open .menu-button-container #primary-mobile-menu .dropdown-icon.open, 
	.menu-button-container #primary-mobile-menu .dropdown-icon.close {
		display:none;	
		}
		
	.menu-button-container #primary-mobile-menu .dropdown-icon.open,	
	.primary-navigation-open .menu-button-container #primary-mobile-menu .dropdown-icon.close {
		display:flex;
		font-size:1.4rem;
		}
		
	.site-header .custom-logo {
		max-height:9rem;
		}
		
	.site-header.stuck .header-main {
		padding-top:0;
		}
		
	#page .site-header.stuck .menu-button-container {
		top:5.5rem;
		padding:0;
		}
		
	.site-header.stuck .header-content, body:not(.home) .site-header .header-content {
		padding-left:2rem;
		padding-right:2rem;
		}
	
	.primary-navigation-open .menu-button-container {
		top:0;
		}
		
	#page .site-navigation { 
		width: 100%; 
		}
	
	#page .primary-navigation {
		margin-left: 0;
		position: unset;
		width: 100%;
		background: none;
		}
		
	.primary-navigation .primary-menu-container {
		display:none;
		}
		
	.primary-navigation-open .primary-navigation > .primary-menu-container {
		display:block;
		position: fixed;
		height: 100%;
		padding-bottom: 5rem;
		top:9.2rem;
		padding-top:3rem;
		overflow:hidden;
		}
		
	.admin-bar.primary-navigation-open .primary-navigation > .primary-menu-container {
		top:12.5rem;
		overflow:hidden;
		}
		
	.primary-navigation-open .site-header.stuck .primary-navigation > .primary-menu-container {
		top:6.2rem;
		}
		
	.primary-navigation #primary-menu-list {
		justify-content: left;
		flex-direction: column;
		flex-wrap:nowrap;
		padding-left: 0;
		max-width:100%;
		width: 100%;
		background: #fff;
		margin-left: 0;
		padding-bottom: 7rem;
		padding-top: 7rem;
		}
		
	.primary-navigation #primary-menu-list ::-webkit-scrollbar {
		width: 3px;
		height: 3px;
		border-left: 0;
		background: #fff;
		}	
		
	.primary-navigation #primary-menu-list ::-webkit-scrollbar-track { 
		background: none; 
		}

	.primary-navigation #primary-menu-list ::-webkit-scrollbar-thumb {
		background: #fff;
		border-radius: 0;
		}
		
	.admin-bar .primary-navigation #primary-menu-list {
		min-height:calc(100vh - 3.2rem);
		height:100%;
		overflow-y:scroll;
		}
		
	.primary-navigation li.menu-item {
		flex-direction:column;
		padding-left:4rem;
		margin-bottom:2rem;
		min-width:100%;
		}
		
	.primary-navigation-open .primary-navigation #primary-menu-list > li:not(:first-of-type),
	#page .primary-navigation > li.menu-item:not(:first-of-type) {
		margin-top:2rem;
		}
		
	#page .primary-navigation li > a {
		font-weight: 700;
		font-size: 1.8rem;
		max-width: calc(100% - 4rem);
		}
		
	#page #primary-mobile-menu .dropdown-icon.open img {
		width: 5rem;
		height: 2.7rem;
		}
		
	#page button#primary-mobile-menu .close img {
		width:2.5rem;
		height:2.5rem;
		}
	
	#page button#primary-mobile-menu:focus,
	#page .primary-navigation li > a:focus {
		outline:2px solid #aaa !important;
		outline-offset:0.15rem !important;
		}
			
	.primary-navigation #primary-menu-list li.menu-item-has-children a {
		margin-bottom:0;
		padding-bottom:0.5rem;
		}
		
	#page .primary-navigation li ul.sub-menu {
		margin-top: 1rem;
		padding-left: 0.5rem;
		margin-bottom:0;
		padding-bottom:0;
		background:unset;
		}
		
	#page .primary-navigation li ul.sub-menu ul.sub-menu {
		margin-top:0;
		padding-left:2rem;
		margin-left:0;
		}
	
	#page .primary-navigation li ul.sub-menu li:first-child a {
		padding-top:0.75rem;
		}
	
	#page .primary-navigation li ul.sub-menu ul.sub-menu li:first-child a {
		padding-top:0.5rem;
		}
		
	.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
		display: block;
		border: none;
		position: relative;
		background-color:unset;;
		color:#000;
		padding-left:0;
		}
	
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:before, 
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
		display:none;
		}

	#page .primary-navigation li ul.sub-menu li > a {
		font-weight: 400;
		font-size: 1.8rem;
		color: #000;
		background: unset;
		padding-bottom: 0.5rem;
		max-width: fit-content;
		}
	
	.primary-navigation #primary-menu-list .sub-menu li a:hover, 
	.primary-navigation #primary-menu-list .sub-menu li a:focus {
		background: unset;
		color: #aaa;
		}
		
	.primary-navigation #primary-menu-list .sub-menu li a:focus {
		outline: 1px solid #aaa;
		outline-offset: 0;
		}

	.primary-navigation-open .site-header.stuck .menu-button-container,
	.site-header.stuck .menu-button-container { 
		top: 0.5rem; 
		}
		
	
	/******** NON-NAV STUFF **********/
	
	:root {
	--global--font-size-page-title: 3.4rem;
	--heading--font-size-page-title: 3.4rem;
	--heading--font-size-h1: 3.4rem;
	--heading--font-size-h2: 2.6rem;
	--heading--font-size-h3: 2.3rem;
	--heading--font-size-h4: 2.1rem;
	--heading--font-size-h5: 2rem;
	--heading--font-size-h6: 1.8rem;
	--heading--letter-spacing-h1: 0.2rem;
	--heading--letter-spacing-h2: 0.2rem;
	--heading--letter-spacing-h3: 0.2rem;
	--heading--letter-spacing-h4: 0.2rem;
	--global--font-size-base: 1.8rem;
	--wp--preset--font-size--normal: 1.8rem;
	--global--font-size-default: 1.8rem;
	--global--font-size-large: 2.1rem;
	--global--font-size-lg: 2.1rem;
	--wp--preset--font-size--large: 2.1rem;
	--global--font-size-larger: 2.3rem;
	--global--font-size-largest: 2.8rem;
	--global--font-size-small: 1.6rem;
	--wp--preset--font-size--small: 1.6rem;
	--global--font-size-sm: 1.6rem;
	--global--font-size-smallest: 1.5rem;
	}
	
	#page .site-main {
		max-width:100%;
		}
	
	#page .entry-content .wp-block-columns {
		flex-direction:column;	
		row-gap:2rem;
		margin-top:2rem;
		}
		
	#page .entry-content .wp-block-columns:not(:first-child) {
		margin-top:0;
		margin-bottom:0;
		}
	
	#page .wp-block-columns.reverse {
		flex-direction:column-reverse;
		}
		
	.site-info .wp-block-columns .wp-block-column:not(:last-child) {
		margin-bottom:0;
		}
		
	#page .wp-block-columns .wp-block-column {
		flex-basis:100% !important;
		width:100% !important;
		}	
		
	.wp-block-columns.are-vertically-aligned-center.home-top .wp-block-column:last-child {
		margin-top:0;
		}
		
	.home-top .wp-block-column .wp-block-spacer {
		display:none;
		}
		
	#page .order-buttons .wp-block-button a {
		padding-left:1.6rem;
		padding-right:1.6rem;
		}
	
	#page .entry-content,
	#page *.has-background {
		padding-left:2rem;
		padding-right:2rem;
		}
}

		
/*** 781 ***/

@media all and (max-width:781px) {
	.site-header .header-content {
		align-items:end;
		}
		
	.site-branding {
		max-width:45%;
		}

	.site-info .wp-block-columns {
		flex-direction:row;
		align-items:start;
		column-gap:1rem;
		}
		
	
	.site-info .footer-sections .footer-left, 
	.site-info .footer-sections .footer-middle {
		width:calc(50% - 3rem);
		}

	.site-info .wp-block-columns .wp-block-column:first-child:not(.alignwide):not(.alignfull) {
		width: 50%;
		flex-basis: unset !important;
		display: inline-flex;
		}
	
	.site-info .wp-block-columns .wp-block-column p {
		width:100%;
		}
	
	.site-info .footer-sections .footer-left .wp-block-columns .wp-block-column:first-child:not(.alignwide):not(.alignfull) {
		width:30%;
		}

	.site-info .footer-sections .footer-left .wp-block-columns .wp-block-column:last-child:not(.alignwide):not(.alignfull) {
		width:calc(70% - 2rem);
		}
	
	.site-info .wp-block-columns .wp-block-column:last-child:not(.alignwide):not(.alignfull) {
		width: calc(50% - 1rem);
		flex-basis: unset !important;
		display: inline-flex;
		}
}


/*** 700 ***/

@media all and (max-width:700px) {
	.site-info .footer-sections {
		row-gap:1rem;
		}
		
	.site-info .break {
		height:1rem;
		}
		
	#page .site-info h3.widget-title {
		margin-bottom:1rem;
		margin-top:0;
		text-align:left;
		}
	
	.site-info .footer-sections .footer-left,
	.site-info .footer-sections .footer-middle {
		width: 100%;
		align-items: start;
		justify-content: left;
		display: flex;
		flex-direction: column;
		}	
	
	
	.site-info .footer-sections .footer-right {
		width:60%;
		margin-top:3rem;
		}
		
	.site-info .footer-bottom,
	.site-info .footer-sections .footer-middle {
		margin-top:2rem;
		}
		
	.site-info .footer-left .widget_block {
		width:100%;
		}
		
	.site-info .footer-sections .footer-middle .wp-block-columns .wp-block-column:first-child:not(.alignwide):not(.alignfull) p.has-text-align-right {
		text-align:left;
		}
		
	.site-info .footer-sections .footer-middle .wp-block-columns .wp-block-column:first-child:not(.alignwide):not(.alignfull) {
		width:30%;
		}
}


/*** 650 ***/

@media all and (max-width:650px) {
	.site-header .header-content {
		flex-direction:column;
		align-items:normal;
		row-gap:0;
		min-height:unset;
		}
		
	.site-branding {
		display:flex;
		position:relative;
		max-width:60%;
		margin:0;
		width:100%;
		}
		
	.site-header.stuck .site-branding {
		max-width:45%;
		}
			
	.primary-navigation-open #page .site-header .menu-button-container,
	#page .site-header .menu-button-container {
		top:3rem;
		}
		
	#page .site-header.stuck .menu-button-container {
		top:2.75rem;
		}
		
	.site-header.stuck .header-content {
		min-height:6.35rem;
		}
		
	#site-header .header-right .top-content {
		display:none;
		}
		
	.primary-navigation-open #site-header .header-right .top-content { 
		display:flex;
		flex-direction:column;
		row-gap:2.5rem;
		top:0;
		padding-bottom:3rem;
		margin-top: 2rem;
		}

	#page .site-header .wp-block-search .wp-block-search__input, 
	#page .site-header .wp-block-search .wp-block-search__input:focus {
		font-size:1.6rem;
		width:calc(100% - 2rem);
		margin:0;
		border-bottom: 1px solid #364B79;
		}
		
	#page .site-header .wp-block-search .tooltiptext {
		display:none;
		}
		
	.site-header.stuck .nav-container {
		margin:0;
		}
		
	#site-header .header-right .widget a {
		font-size:1.5rem;
		}
	
	#site-header .header-right .widget a:not(.custom-cart-link) {
		color:#545454;
		}

	.site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
		display:flex;
		position:relative;
		padding-top:0;
		max-width:unset;
		max-height:unset;
		}
		
	#site-header .header-right .top-content {
		width:100%;
		right:0;
		position:relative;
		z-index:999;
		}
		
	.site-header .custom-logo {
		max-height:8rem;
		}
	
	.primary-navigation-open .primary-navigation > .primary-menu-container {
		top:8rem;
		}
		
	#site-header .header-right .widget {
		width:100%;
		}
		
	#site-header .wp-block-columns {
		width:100%;
		}
		
	#site-header .wp-block-columns .wp-block-column {
		margin-bottom:1rem;
		}
		
	.wp-block-columns .wp-block-column:not(:last-child) {
		margin-bottom:0;
		}
		
	.home-top .wp-block-column:first-child img {
		max-height:calc(100vh - 15rem);
		}
		
	#page header.entry-header {
		margin:12rem auto 3rem auto;
		}

		
	#main .wp-block-image .alignleft, 
	#main .wp-block-image .alignright {
		max-width:100%;
		width:100%;
		margin:0 0 1.5rem 0;
		padding:0;
		}
}


/*** 600 ***/

@media all and (max-width:600px) {
	#page h1, 
	#page h1.entry-title {
		font-size:3rem;
		line-height:1.4em;
		}
		
	#page h2 {
		font-size:2.6rem;
		}
		
	#page .entry-content p {
		text-align:left;
		line-height:1.6em;
		}
}


/*** 481 ***/

@media all and (max-width:481px) {
	.site-header .header-content {
		padding:2rem;
		}
	
	.site-header.stuck .header-content {
		padding:1rem 2rem;
		}
		
	#page header.entry-header {
		padding:0 1rem;
		}
	
	.primary-navigation #primary-menu-list {
		background:transparent;
		padding-top:5rem;
		}

	#page header.entry-header {
		margin-bottom:1rem;
		margin-top:12.5rem;
		}
	
	.primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
		display:flex;
		}
		
	#page .primary-navigation li.menu-item:first-of-type, 
	#page .primary-navigation li.menu-item, 
	#page .primary-navigation li ul.sub-menu li {
		display:flex;
		}
		
	#page .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle {
		right:1rem;
		}
		
	.primary-navigation-open #page .primary-navigation .sub-menu-toggle[aria-expanded="true"] + .sub-menu {
		margin-left:0;
		}
		
	#page .primary-navigation li.menu-item {
		padding-left:0;
		}
		
	.primary-navigation-open .primary-navigation > .primary-menu-container {
		top:12rem;
		padding-top:4rem;
		} 
		
	#page.repertoire .entry-content .mep_event_list {
		margin:3rem auto 0 auto;
		}
		
	.site-header.stuck .site-branding {
		max-width:60%;
		}
		
	#page .order-buttons .wp-block-button {
		font-size:1.6rem;
		}
		
		#page .order-buttons .wp-block-button a {
		padding-left:1.6rem;
		padding-right:1.6rem;
		}
		
	.site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img {
		max-height:8rem;
		}
		
	.home-top .wp-block-column:last-child {
		padding-left:0;
		padding-right:0;
		}
		
	

	#page .home-top {
		padding-left:1.5rem;
		padding-right:1.5rem;
		}
		

}

@media all and (max-width:300px) {

	#page header.entry-header {
		margin-bottom:1rem;
		}
		

	#page .entry-content, #page *.has-background,
	#page .home-top, 
	#page .slider {
		padding-left:1rem;
		padding-right:1rem;
		}
		
	.home-top .wp-block-column:last-child {
		padding-left:0;
		padding-right:0;
		}
		
	.home-top {
		padding-top:0;
		}
		
	#page .order-buttons .wp-block-button a {
        font-size: 1.4rem;
        padding-left: 1rem;
        padding-right: 1rem;
		}
		
	#site-header .header-content {
		padding-left:0.5rem;
		padding-right:0.5rem;
		}
		
	.menu-button-container #primary-mobile-menu .dropdown-icon.open, .primary-navigation-open .menu-button-container #primary-mobile-menu .dropdown-icon.close {
		flex-direction:column-reverse;
		}

	.primary-navigation #primary-menu-list {
		padding-top:3.5rem;
		}
		
	.primary-navigation-open #site-header .header-right .top-content {
		padding-bottom:0;
		}
		
	#page .entry-content * {
		word-wrap:break-word;
		}
		

	#page .site-header.stuck .header-content {
		padding-top:0.25rem;
		padding-bottom:0.25rem;
		}
		
	.primary-navigation-open #page .site-header .menu-button-container, 
	#page .site-header .menu-button-container {
		top:2.25rem;
		right:0.5rem;
		}
		
	#page .site-header.stuck .menu-button-container {
		top:1.75rem;
		}
}

@media all and (max-width:250px) {

		
	.primary-navigation-open #page .site-header .menu-button-container, 
	#page .site-header .menu-button-container {
		top:1rem;
		right:0.5rem;
		}
		
	#site-header .header-right .top-content ul {
		column-gap:2rem;
		padding-left:0;
		padding-top:0;
		}

	.primary-navigation-open .primary-navigation > .primary-menu-container {
		padding:0 0.5rem;
		}
	

		
	.wp-block-social-links .wp-social-link {
		width:2.4rem;
		height:2.4rem;
		margin-bottom:0;
		}
		
	#page .wp-block-social-links .wp-social-link svg {
		width:1.675rem;
		height:1.675rem;
		}
	
	#page .site-header.stuck .menu-button-container {
		top:0.5rem;
		}
		
	#page .lSSlideOuter .lSPager.lSpg {
		column-gap:0.5rem;
		padding-left:0;
		}

}

@media all and ( max-width:250px ) {
		.primary-navigation #primary-menu-list {
		padding-top:2.5rem;
		}
	}