/* 
Breakpoints are at :
	2660 max (400 nav + 2260+padding main)
	1200 - nested columns collapse
	1024 - nav collapse
	768  - all columns collapse

*/


	* {
	  transition: all 0.4s ease-in-out;
	}

	/* padding above any anchor when scrolling */
	:target { padding-top: calc(75px + var(--topbar-height) ); } 



	/* Scaling font */
	html{
		font-size:16px;
		scroll-behavior: smooth;
	}
	@media (max-width: 1200px) { html{font-size:14px}}
	@media (max-width: 1024px) { html{font-size:12px}}
	@media (max-width: 768px) { html{font-size:10px}}


	body{
		font-family: "Foundry Sterling";
		color:#666;
	}




	nav{
		position: fixed;
		left: 64px;
		top: 0;
		right: 64px;
		padding-left:32px;
		padding-right:32px;
		height:var(--navbar-height);
		background-color:rgba(255, 255, 255, 0.8);
		overflow: auto;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		filter: drop-shadow(0px 188px 75px rgba(176, 176, 176, 0.01)) drop-shadow(0px 106px 64px rgba(176, 176, 176, 0.05)) drop-shadow(0px 47px 47px rgba(176, 176, 176, 0.09)) drop-shadow(0px 12px 26px rgba(176, 176, 176, 0.1));
		border-radius: 0px 0px 10px 10px;
	}


	/* Top level items */
	nav>a>img{
		max-width:237px;
	}

	nav>div>a{
		color:var(--mll-primary);
		font-size:1.2rem;
		text-decoration: none;
		margin-left:32px;
	}


	.noNav nav{
		display: none;
	}


	/* Add styles for the scrolling content */
	main {
		z-index: 99;
		margin-left: auto;
		margin-right: auto;
		padding: 0px 0px 0 0px;
		background-color: #fff;
		max-width: 1920px;
		position: relative;
		top:var(--navbar-height);
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - var(--navbar-height) - 16px);
	}

	main>footer{
		align-self: flex-end;
		text-align: right;
		width:calc(100% - 64px);
		position: relative;
		padding:16px 32px;
		font-size:0.75rem;
		color:#999;
	}


	main>footer>div{
		float: left;
		padding-right:20px;
	}



	#mobileMenu{
		position: fixed;
		left:0;
		top:0;
		bottom:100%;
		right:0;
		background-color:#fff;
		z-index: 998;
		opacity: 0;
		pointer-events: none;
	}

	#mobileMenu div{
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-size:2.5rem;
	}

	#mobileMenu div a{
		text-decoration: none;
	}

	#menuMobileBurger, #menuMobileClose{display: none;}

	/* Add styles to hide the left navigation bar on mobile */
	@media (max-width: 1024px) {

		:root {
		  --navbar-height: 74px;
		}

		nav{
			left: 32px;
			right: 32px;
			padding-left:32px;
			padding-right:32px;
			height:74px;
		}


		/* Top level items */
		nav>a>img{
			max-width:170px;
		}
	}

	@media (max-width: 767px) {
		:root {
		  --navbar-height: 48px;
		}

		nav{
			left: 16px;
			right: 16px;
			padding-left:16px;
			padding-right:16px;
			height:46px;
		}


		/* Top level items */
		nav>a>img{
			max-width:123px;
		}


		#desktopMenu{
			display: none;
		}
		#menuMobileBurger{
			display: block;
			cursor: pointer;
			font-size:2.5rem;
			color:var(--mll-primary);
		}

		.mobileMenu #menuMobileBurger{
			display:none;
		}

		.mobileMenu #menuMobileClose{
			display: block;
			cursor: pointer;
			font-size:2.5rem;
			color:var(--mll-primary);
		}

		.mobileMenu #mobileMenu{
			bottom:0;
			opacity: 1;
			pointer-events: all;
		}

	}





	/* Admin Panel */

	body.admin nav{
		top:var(--topbar-height); /* move the nav bar down */ 
	}

	body.admin main{
		top:calc(var(--navbar-height) + var(--topbar-height)); 
		min-height: calc(100vh - var(--navbar-height) - 16px - var(--topbar-height));
	}


	body.noNav.admin main{
		top:calc(var(--topbar-height)); /* 16px + 32px */
		min-height: calc(100vh - 16px - var(--topbar-height));
	}



	body.admin > div:first-child{
		position: fixed;
		text-align: center;
		height: calc( var(--topbar-height) - 1px);
		line-height:23px;
		width:calc(100% - 20px);
		padding:0 10px;
		z-index:99999;
		color:#fff;
		background: var(--error);
		border-bottom: 1px solid var(--mll-primary);
		overflow: hidden;
	}















	/* STANDARD STYLES */

	h1{
		font-family: "Foundry Sterling";
		font-weight:300;
		font-size:6rem;
		line-height: 6rem;
		margin-bottom: 26px;
		margin-top:0;
		color:var(--mll-primary);
	}

	h2{
		font-family: "Foundry Sterling";
		font-weight:normal;
		font-size:3.5rem;
		line-height: 4rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
		color:var(--mll-primary);
	}

	h3{
		font-family: "Foundry Sterling";
		font-weight:normal;
		font-size:2.5rem;
		line-height: 3rem;
		margin-top: 2rem;
		margin-bottom: 2rem;
		color:var(--mll-primary);
	}

	h4{
		font-size:2.25rem;
		font-family: "Foundry Sterling Bold";
		font-weight:normal;
		color:var(--mll-primary);
		margin-top:0;
		display: inline-block;
		margin-bottom: 1.5rem;
	}
	h5{
		font-size:2rem;
		font-weight:normal;
		color:var(--mll-primary);
		margin-top:0;
		display: inline-block;
		margin-bottom: 1.5rem;
	}


	a{
		color:var(--mll-primary);
	}




	/* Buttons */
	.button{
		margin-bottom:24px;
		background-color: var(--mll-primary);
		color:#fff;
		padding:1rem 2rem 1.1rem 2rem;
		font-size:1.25rem;
		font-family: "Foundry Sterling Bold";
		font-weight:normal;
		display: inline-block;
		text-decoration: none;
		border:1px solid var(--mll-primary);
		cursor: pointer;
	}

	.button:hover{
		background-color: #fff;
		color:var(--mll-primary);
	}


	.altButton{
		background-color: #fff;
		color:var(--mll-primary);
	}

	.altButton:hover{
		background-color: var(--mll-primary);
		color:#fff;
	}

	.fixedWidth14{
		width:14rem;
	}

	.button.spaced{
		margin-left: 1em;
		margin-right: 1em;
	}

	.button i{
		margin-right:0.3em;
		position:relative;
		top:0.15em;
		font-size:1.5rem;
	}



	.button.activated{
		
	}

	.button.deactivated{
		pointer-events: none;
	}






/* Assorted helper classes */


.padded{
	padding-left:4rem;	
	padding-right:4rem;
}

.padded-left{
	padding-left:4rem;	
}

.padded-right{
	padding-right:4rem;
}

@media (max-width: 1024px) {

	.padded-left, .padded-right{
		padding-left:0rem;	
		padding-right:0rem;
	}
}

.left{
	text-align: left;
}
.right{
	text-align: right;
}

.center{
	text-align: center !important;
}

.clickable{
	cursor: pointer;
}


.large{
    font-family: 'Foundry Sterling';

	font-size: 1.4rem;
	line-height: 2rem;
}

.mobileOnly{
	display: none;
}
@media (max-width: 768px) {
	.mobileOnly{
		display: unset;
	}
}