.reveal div.left-20 { float: left; z-index: -10; width: 20%; text-align: left; }
.reveal div.left-30 { float: left; z-index: -10; width: 30%; text-align: left; }
.reveal div.left-40 { float: left; z-index: -10; width: 40%; text-align: left; }
.reveal div.left-50 { float: left; z-index: -10; width: 50%; text-align: left; }
.reveal div.left-60 { float: left; z-index: -10; width: 60%; text-align: left; }
.reveal div.left-70 { float: left; z-index: -10; width: 70%; text-align: left; }
.reveal div.left-80 { float: left; z-index: -10; width: 80%; text-align: left; }
.reveal div.right-20 { float: right; z-index: -10; width: 20%; text-align: right }
.reveal div.right-30 { float: right; z-index: -10; width: 30%; text-align: right }
.reveal div.right-40 { float: right; z-index: -10; width: 40%; text-align: right }
.reveal div.right-50 { float: right; z-index: -10; width: 50%; text-align: right }
.reveal div.right-60 { float: right; z-index: -10; width: 60%; text-align: right }
.reveal div.right-70 { float: right; z-index: -10; width: 70%; text-align: right }
.reveal div.right-80 { float: right; z-index: -10; width: 80%; text-align: right }

.li-nested-item { margin-left: 1em !important; }

.midpoint { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); position: fixed; text-align: center; }
.north { position: fixed; top: 25px; left: 50%; transform: translateX(-50%); text-align: center; }
.south { position: fixed; bottom: 35px; left: 50%; transform: translateX(-50%); text-align: center; }
.east { position: fixed; right: 0px; top: 49%; transform: translateY(-50%); text-align: right; }
.north-east { position: fixed; top: 25px; right: 0px; text-align: right; }
.south-east { position: fixed; bottom: 35px; right: 0px; text-align: right; }
.west { position: fixed; left: 0px; top: 49%; transform: translateY(-50%); text-align: left; }
.north-west { position: fixed; top: 25px; left: 0px; text-align: left; }
.south-west { position: fixed; bottom: 35px; left: 0px; text-align: left; }