@media screen and (max-width: 1024px) {

	header {
		flex-direction: column;
		padding-top: calc(var(--header-height) - 2px);
	}

	header .logo { 
	    position: absolute;
	    top: 0.5em;
		left: 1em;
	}

	header i#menu.icons {
		display: block;
		cursor: pointer;
		color: #ffffff;
		font-size: 2.5em;
		position: absolute;
		right: 0.5em;
		top: 0.5em;
	}

	header nav {
		width: 100%;
		height: calc(100vh - var(--header-height));
		background: var(--accent-color);
		position: absolute;
		overflow-y: scroll;
		right: -100%;
		opacity: 0;
		transition: .2s;
	}

	header nav .menu {
		display: flex;
		flex-direction: column;	
		width: 100%;
		line-height: 3.5em;
		border-bottom: 0.063em solid rgba(255, 255, 255, 0.2);
	}
	
	header nav .menu:first-child { border-top: 0.063em solid rgba(255, 255, 255, 0.2); }

	header nav .submenu {
		display: block;
		width: 100%;
		position: relative;
		box-shadow: none;	
		line-height: 3.5em;
	}

	header nav .submenu a,
	header nav .menu a {
		font-size: 0.875em;
		padding-left: 3em;
	}

	header nav .submenu a:first-child { border-top: 0.063em solid rgba(255, 255, 255, 0.2); }

	header nav.active {  
		right: 0%; 
		opacity: 1; 
	}

	body.no-scroll { 
		position: fixed; 
		overflow: hidden; 
	}

	page columns { margin-top: 4em; }

	page columns .column.left { display: none; }

	page columns .column.right { display: none; }
	
	page columns .column.middle { padding: 0em 0.5em; }
	
}

@media screen and (max-width: 768px) {
	
	footer { flex-direction: column; }

	footer nav { display: none; }

	footer .phones { text-align: center; }

	footer .phones img {
	    vertical-align: middle;
	    min-width: 15em;
	    margin-bottom: 1em;
	}

}