@media only screen and (max-width:800px), only screen and (max-device-width:800px){
	.grid_1_1_1_1{
		grid-template-columns:1fr 1fr;
	}
}

@media only screen and (max-width:750px), only screen and (max-device-width:750px){
	#menu a{
		font-size:1rem !important;
	}
}

@media only screen and (max-width:700px), only screen and (max-device-width:700px){

	.grid_1_1_1_1, .grid_1_1_1{
		grid-template-columns:initial;
		place-content:start stretch;
		place-items:start stretch;
	}

	#header{
		grid-template-rows: 1px 1fr 1fr 1px;
		place-content:center center;
		place-items:start center;
	}
	
	#logo{
		align-self:center;
		align-content:center;
		margin:40px auto;
	}
	
	header.small{
		place-content:center stretch;
		padding-left:15px;
		padding-right:15px;
		box-sizing:border-box;
	}
	
	
	#menu > a, #menu > .submenu_wrapper{
		display:none !important;
	}

	#menu{
		width:auto;
		min-width:auto;
	}
	
	#menu_icon{
		display:inline-block;
		cursor:pointer;
		justify-self:center;
		position:absolute;
		height:45px;
		border-radius:var(--border-radius);
		filter: var(--shadow);
		align-self:start;
		margin-bottom:0px;
		vertical-align:top;
	}
	
	.small #menu{
		display:block;
		text-align:right;
	}
	
	.small #menu #menu_icon{
		position:relative;
		top:auto;
		right:auto;
	}
	
	#menu_icon div{
		background:white;
		width:30px;
		height:3px;
		margin:9px;
		border-radius:1px;
		transition:all 1.5s;
	}
	#menu_icon div:nth-of-type(2){
		height:3px;
	}
	#menu_icon:hover{
		background:var(--menu-highlight);
	}
	
	#mobile_menu #menu_icon{
		position:relative;
		top:auto;
		right:auto;
		filter:none;
	}
	#mobile_menu #menu_icon div{
		background:rgb(var(--theme-color));
	}
	#mobile_menu #menu_icon div:nth-of-type(1){
		transform:rotate(45deg);
		margin-top:20px;
	}
	#mobile_menu #menu_icon div:nth-of-type(2){
		opacity:0;
	}
	#mobile_menu #menu_icon div:nth-of-type(3){
		transform:rotate(-45deg);
		margin-top:-24px;
	}
	
	#mobile_menu{
		display:block;
		position:fixed;
		height:100vh;
		width:100vw;
		top:0px;
		left:0px;
		overflow:auto;
		background:rgba(var(--glass-color), .95);
		backdrop-filter:blur(var(--glass-blur));
		z-index:9999;
		padding: 0px;
		box-sizing:border-box;
		animation:slide_out_mobile;
		animation-duration:.75s;
	}
	
	@keyframes slide_out_mobile{
		0%{margin-left:100vw;}
		100%{margin-left:0vw;}
	}
	
	#mobile_menu a{
		display:block;
		padding:20px 75px;
		border-top:solid rgba(var(--theme-color), .2) 1px;
		color:rgb(var(--theme-color));
	}
	
	#mobile_menu a:hover{
		color:rgb(var(--theme-color));
		background:rgb(230,230,230);
	}
	
	#mobile_menu .submenu{
		height:0px;
		overflow:hidden;
		transition:height .5s;
	}
	
	#mobile_menu .submenu_wrapper:hover .submenu, #mobile_menu .submenu_wrapper[data-expanded="expanded"] .submenu{
		height:initial;
	}
	
	#mobile_menu .submenu a{
		padding-left:100px;
		font-size:1rem;
		border:0px;
	}

	#mobile_menu.collapsed{
		margin-left:100vw;
		animation:slide_away_menu;
		animation-duration:.5s;
	}
	
	@keyframes slide_away_menu{
		0%{margin-left:0vw;}
		100%{left-left:100vw;}
	}

	h1.page_title, h1.title{
		font-size:3.5rem;
	}

}

@media only screen and (max-width: 625px), only screen and (max-device-width:625px){
	:root{
		--content-width:100%;
		--content-min-width:auto;
		
	}	
	
	.mobile_padding{
		padding-left:15px;
		padding-right:15px;
	}
	
	html{
		font-size:11pt;
	}
	
	.padded{
		padding-right:15px;
		padding-left:15px;
	}
	
	h1.page_title, h1.title{
		font-size:3rem;
	}	
	
	.grid_2_1, .grid_1_2, .grid_1_1, .grid_3_1, .grid_1_3, .grid_1_1_1, .grid_1_1_1_1{
		grid-template-columns:initial;
		place-content:start stretch;
		place-items:start stretch;
	}
	
	section > .glass:first-child, section > div:first-child > .glass:first-child{
		margin-top:calc(var(--grid-gap) * -1.5);
	}
	
	#section_menu + section > .glass:first-child, #section_menu + section > div:first-child > .glass:first-child, #section_menu + script + section > .glass:first-child, #section_menu + script + section > div:first-child > .glass:first-child{
		margin-top:0px;
	}
	
	#section_menu a{
		padding:10px 7px;
		margin-right:2px;
	}
	
	section > .glass:last-child, section > div:last-child > .glass:last-child{
		margin-bottom:calc(var(--grid-gap) * -1.5);
	}
	
	.chart{
		width:100%;
	}
	
	#footer_grid{
		grid-gap:50px;
	}
	
	#footer_grid div{
		text-align:center;
	}
	
	.small #logo{
		justify-self:start;
	}
}

@media only screen and (max-width:350px), only screen and (max-device-width: 350px){
	.small #logo{
		height:45px;
		justify-self:start;
	}
}