html {
    overflow-x: hidden;
}


body {
	/* Act as position parent */
	position: relative;

	/* Fill the available space at least */
	min-height: 100%;

    overflow-x:hidden;

}

@media screen and (min-aspect-ratio: 3/1) {
	/* Enforce an aspect ration of max 3:1 (which should comfortably
	   accomodate 16:9 screens minus URL/status bars) */
	body {
		min-height: 33.3333vw;
	}
}

body > header {
    position: relative;
    z-index: 3;
}

body > header,
body > footer,
body > section {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

body > nav {
    position: absolute;
    top: 3.75rem;
    left: auto;
    right: 0;
    z-index: 2;
}

@media (min-width: 51.25rem) {
    body > nav {
        top: 9.375rem;
        left: 0;
        z-index: 3;
        max-width: none;
    }
}


/* Extend bootstrap grid to give cols that wrap a vertical gutter */

.row > * {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.row > hr {
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 51.25em) {
    /* Fight the tendency of floats of unknown heights to shunt one another
       to the right by forcing every nth to break row. Could be dangerous –
       that there aren't other, non-col children is a bit of a tall
       assumption. */
    .row > .col-md-4:nth-child(3n + 1) {
        clear: left;
    }

    /*
    .row > .col-md-3:nth-child(4n) {
        clear: left;
    }
    */
}