/*** narrow.css ***/

/** zero **/

html { box-sizing: border-box; }
	
*, *:before, *:after { box-sizing: inherit; }

img { object-fit: contain; width: 100%; }

/** wrap and row **/

/* wrap */

.wrap { 
	display: -webkit-flex; display: flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
}

.wrap > * { -webkit-flex: 1;
                    flex: 1; }

/* row */

.row, .start, .end {
	display: -webkit-flex; display: flex;
	-webkit-flex-flow: row nowrap;
	        flex-flow: row nowrap;
}

.row { -webkit-justify-content: space-around;
               justify-content: space-around; }

.row > * { -webkit-flex: 1; flex: 1 0 0px; }

.start { -webkit-justify-content: flex-start;
                 justify-content: flex-start; }

.end { -webkit-justify-content: flex-end;
               justify-content: flex-end; }

/** defined row layouts **/

article *,
aside,
aside *,
nav,
nav * {
	-webkit-flex-flow: row wrap;
	        flex-flow: row wrap;
	width: 100%;
}

/* header & footer */

.header > *:first-child,
.footer > *:last-child { -webkit-flex-basis: 100% !important;
                                 flex-basis: 100% !important; }
 
/* reverse order */

.reverse { -webkit-flex-direction: row-reverse !important;
                   flex-direction: row-reverse !important; }

/* flex 2 */

.row.two.left > *:first-child,
.row.two.right > *:last-child,

.row.two-two.left > *:nth-child(1),
.row.two-two.left > *:nth-child(2),
.row.two-two.right > *:last-child,
.row.two-two.right > *:nth-last-child(2),

.row.two-three.left > *:first-child,
.row.two-three.right > *:last-child,

.row.two-four.left > *:first-child,
.row.two-four.right > *:last-child,

.row.two-five.left > *:first-child,
.row.two-five.right > *:last-child,

.row.two-six.left > *:first-child,
.row.two-six.right > *:last-child,

.row.two-seven.left > *:first-child,
.row.two-seven.right > *:last-child,

.row.one-two.left > *:nth-child(2),
.row.one-two.right > *:nth-last-child(2),

.row.two-three.left > *:nth-child(2),
.row.two-three.right > *:nth-last-child(2) { -webkit-flex: 2;
                                                     flex: 2 0 0px; }

/* flex 3 */

.row.three.left > *:first-child,
.row.three.right > *:last-child,

.row.one-three.left > *:nth-child(2),
.row.one-three.right > *:nth-last-child(2),

.row.two-three.left > *:nth-child(2),
.row.two-three.right > *:nth-last-child(2),

.row.three-three.left > *:nth-child(1),
.row.three-three.left > *:nth-child(2),
.row.three-three.right > *:last-child,
.row.three-three.right > *:nth-last-child(2),

.row.three-four.left > *:first-child,
.row.three-four.right > *:last-child,

.row.three-five.left > *:first-child,
.row.three-five.right > *:last-child { -webkit-flex: 3;
                                               flex: 3 0 0px; }

/* flex 4 */

.row.four.left > *:first-child,
.row.four.right > *:last-child,

.row.one-four.left > *:nth-child(2),
.row.one-four.right > *:nth-last-child(2),

.row.two-four.left > *:nth-child(2),
.row.two-four.right > *:nth-last-child(2),

.row.three-four.left > *:nth-child(2),
.row.three-four.right > *:nth-last-child(2),

.row.four-four.left > *:first-child,
.row.four-four.left > *:nth-child(2),
.row.four-four.right > *:last-child,
.row.four-four.right > *:nth-last-child(2),

.row.four-five.left > *:first-child,
.row.four-five.right > *:last-child { -webkit-flex: 4;
                                              flex: 4 0 0px; }

/* flex 5 */

.row.five.left > *:first-child,
.row.five.right > *:last-child,

.row.one-five.left > *:nth-child(2),
.row.one-five.right > *:nth-last-child(2),

.row.two-five.left > *:nth-child(2),
.row.two-five.right > *:nth-last-child(2),

.row.three-five.left > *:nth-child(2),
.row.three-five.right > *:nth-last-child(2),

.row.four-five.left > *:nth-child(2),
.row.four-five.right > *:nth-last-child(2) { -webkit-flex: 5;
                                                     flex: 5 0 0px; }

/* flex 6 */

.row.six.left > *:first-child,
.row.six.right > *:last-child,

.row.one-six.left > *:nth-child(2),
.row.one-six.right > *:nth-last-child(2),

.row.two-six.left > *:nth-child(2),
.row.two-six.right > *:nth-last-child(2),

.row.three-six.left > *:nth-child(2),
.row.three-six.right > *:nth-last-child(2) { -webkit-flex: 6;
                                                     flex: 6 0 0px; }

/* flex 7 */

.row.seven.left > *:first-child,
.row.seven.right > *:last-child,

.row.one-seven.left > *:nth-child(2),
.row.one-seven.right > *:nth-last-child(2),

.row.two-seven.left > *:nth-child(2),
.row.two-seven.right > *:nth-last-child(2) { -webkit-flex: 7;
                                                     flex: 7 0 0px; }

/* flex 8 */

.row.eight.left > *:first-child,
.row.eight.right > *:last-child { -webkit-flex: 8;
                                          flex: 8 0 0px; }

/** one column **/

main.one.left > *:nth-child(n),
main.one.right > *:nth-child(n),
article.one.left > *:nth-child(n),
article.one.right > *:nth-child(n) { min-width: 100%; }

article.one { display: block; }

.one {
	display: -webkit-flex; display: flex;
	-webkit-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-justify-content: flex-end;
	        justify-content: flex-end;
}

.one.right { -webkit-flex-direction: row-reverse;
                     flex-direction: row-reverse; }

.one.ninth > *:first-child { -webkit-flex-basis: calc(100% / 9);
                                     flex-basis: calc(100% / 9); }

.one.ninth > * ~ *,
.one.ninth.local.nav > *:first-child { -webkit-flex-basis: calc(100% / 9 * 8);
                                               flex-basis: calc(100% / 9 * 8); }

.one.eighth > *:first-child { -webkit-flex-basis: 12.5%;
                                      flex-basis: 12.5%; }

.one.eighth > * ~ *,
.one.eighth.local.nav > *:first-child { -webkit-flex-basis: 87.5%;
                                                flex-basis: 87.5%; }

.one.seventh > *:first-child { -webkit-flex-basis: calc(100% / 7);
                                       flex-basis: calc(100% / 7); }

.one.seventh > * ~ *,
.one.seventh.local.nav > *:first-child { -webkit-flex-basis: calc(100% / 7 * 6);
                                                 flex-basis: calc(100% / 7 * 6); }

.one.sixth > *:first-child { -webkit-flex-basis: calc(100% / 6);
                                     flex-basis: calc(100% / 6); }

.one.sixth > * ~ *,
.one.sixth.local.nav > *:first-child { -webkit-flex-basis: calc(100% / 6 * 5);
                                              flex-basis: calc(100% / 6 * 5); }

.one.fifth > *:first-child { -webkit-flex-basis: 20%;
                                     flex-basis: 20%; }

.one.fifth > * ~ *,
.one.fifth.local.nav > *:first-child { -webkit-flex-basis: 80%;
                                               flex-basis: 80%; }

.one.fourth > *:first-child { -webkit-flex-basis: 25%;
                                      flex-basis: 25%; }

.one.fourth > * ~ *,
.one.fourth.local.nav > *:first-child { -webkit-flex-basis: 75%;
                                                flex-basis: 75%; }

.one.third > *:first-child { -webkit-flex-basis: calc(100% / 3);
                                     flex-basis: calc(100% / 3); }

.one.third > * ~ *,
.one.third.local.nav > *:first-child { -webkit-flex-basis: calc(100% / 3 * 2);
                                               flex-basis: calc(100% / 3 * 2); }

.one.half > *:first-child,
.one.half > * ~ * { -webkit-flex-basis: 50%;
                            flex-basis: 50%; }

/** navigation **/

body.bottom.nav > div { margin-bottom: 3.5em; }

body.bottom.nav > nav:last-child {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
}

body.bottom.nav > nav:last-child li { -webkit-flex: 1;
                                              flex: 1 0 0px; }

body.bottom.nav > nav:last-child > * {
	width: 100%;
	display: -webkit-flex; display: flex;
	-webkit-flex-flow: row nowrap;
	        flex-flow: row nowrap;
}

/* IE and WebKit hacks, sorry about that! */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	
	/* https://philipnewcomer.net/2014/04/target-internet-explorer-10-11-css/ */
	
	.ninths,
	.eighths,
	.sevenths,
	.sixths,
	.fifths,
	.fourths,
	.thirds,
	.halves,
	.phi { display: block; }
	
}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    img { height: 100%; }
}