#body-flex {
	display: flex; 
	flex-direction: column;
	min-height: 100vh;
}

#page-flex {
	flex: 1;
	width: 100%;
	max-width: 1356px;
	margin: 0 auto;
	padding: 0 10px;
	display: flex;
}

#content-wrapper {flex: 1;}
#content {}

#promo-wrapper {display: none; flex: 0 0 300px; margin-left: 25px;}

#promo .block {width: 300px; min-height: 150px; margin: 15px 0;	background-color: #eee; position: relative; left: 0; top: 0;}
#promo .block .over-link {display: block; position: absolute; left: 0; top: 0; z-index: 1000;}

#site-footer {background-color: #344; color: #fff; padding: 10px 20px; text-align: center;}

.button {background-color: #fc0; padding: 10px 20px; border: 0 none; font-size: 18px; cursor: pointer; text-align: center; color: #000; text-decoration: none; border-radius: 8px;}
.button:hover {background-color: #fd0; }

#footer-links {background-color: #566; padding: 0 20px;}
#footer-links h3 {color: #ccc; text-align: center;}
#footer-links ul {display: flex; flex-wrap: wrap; justify-content: flex-start; list-style-type: square; margin: 15px; padding: 0;}
#footer-links li { flex: 0 1 100%; padding-right: 10px; }

#footer-links li a {display: block; color: #fff; padding: 3px 5px;}
#footer-links li a:hover {color: #fd0;}
#footer-links li a.active {color: #fd0; text-decoration: none; font-weight: bold;}

@media (min-width: 420px) { 
	#footer-links li { flex: 0 1 50%;}
}

@media (min-width: 640px) { 
	#footer-links li { flex: 0 1 33.3%;}
}

@media (min-width: 800px) { 
	/*#page-flex {padding: 0 15px;}*/
}

@media (min-width: 920px) { 
	#footer-links li { flex: 0 1 25%;}
}

@media (min-width: 1024px) { 

	#content {min-height: 50vh;}

	#promo-wrapper {display: block;}

	#page-flex {padding: 0 25px;}
}

@media (min-width: 1156px) { 

	#footer-links li { flex: 0 1 20%;}

}