@media (max-width: 767px) {
	#nav { width: 75%; margin: 15px auto; float: none; position: static; }
	#nav ul li, #nav ul li a { display: block; float: none; text-align: center; background: #e3f3f9; border-radius: 20px; margin: 5px; }
	.ll li a { float: none; display: block; }
	.ll li.back { display: none !important; }
}

@media (max-width: 979px) {
	#logo { float: none !important; text-align: center !important; }
}

@media (min-width: 768px) and (max-width: 979px) 
{
	/* On tablet, if we hide a column, this bit ensures the other column goes full width. */
    [class*="span"],
    .row [class*="span"] {
        display: block;
        float: none;
        width: 100%;
    }

    .row {
        margin-left: -20px;
        margin-right: 20px;
    }

    #nav { margin: 15px auto; float: none; position: static; text-align: center; }
    #nav ul li { display: inline-block; float: none; padding: 8px 0 3px; }
	.ll li a { float: none; display: block; }
	.ll li.back { display: none !important; }
}