@-webkit-keyframes appear {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes appear {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@-webkit-keyframes fade-in-out {
    0%, to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@keyframes fade-in-out {
    0%, to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
@-webkit-keyframes rumble {
    50% {
        -webkit-transform: translateY(-.2em);
        transform: translateY(-.2em)
    }
}
@keyframes rumble {
    50% {
        -webkit-transform: translateY(-.2em);
        transform: translateY(-.2em)
    }
}
@-webkit-keyframes shudder {
    50% {
        -webkit-transform: translateX(0.2em);
        transform: translateX(0.2em)
    }
}
@keyframes shudder {
    50% {
        -webkit-transform: translateX(0.2em);
        transform: translateX(0.2em)
    }
}
@-webkit-keyframes box-flash {
    0% {
        background-color: #fff;
        color: #fff
    }
}
@keyframes box-flash {
    0% {
        background-color: #fff;
        color: #fff
    }
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0)
    }
    20% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }
    40% {
        -webkit-transform: scale(0.9, .9);
        transform: scale(0.9, .9)
    }
    60% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
    80% {
        -webkit-transform: scale(0.925, .925);
        transform: scale(0.925, .925)
    }
    to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale(0, 0);
        transform: scale(0, 0)
    }
    20% {
        -webkit-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2)
    }
    40% {
        -webkit-transform: scale(0.9, .9);
        transform: scale(0.9, .9)
    }
    60% {
        -webkit-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05)
    }
    80% {
        -webkit-transform: scale(0.925, .925);
        transform: scale(0.925, .925)
    }
    to {
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }
}
@-webkit-keyframes shudder-in {
    0%, to {
        -webkit-transform: translateX(0em);
        transform: translateX(0em)
    }
    25%,
    45%,
    5% {
        -webkit-transform: translateX(-1em);
        transform: translateX(-1em)
    }
    15%,
    35%,
    55% {
        -webkit-transform: translateX(1em);
        transform: translateX(1em)
    }
    65% {
        -webkit-transform: translateX(-.6em);
        transform: translateX(-.6em)
    }
    75% {
        -webkit-transform: translateX(0.6em);
        transform: translateX(0.6em)
    }
    85% {
        -webkit-transform: translateX(-.2em);
        transform: translateX(-.2em)
    }
    95% {
        -webkit-transform: translateX(0.2em);
        transform: translateX(0.2em)
    }
}
@keyframes shudder-in {
    0%, to {
        -webkit-transform: translateX(0em);
        transform: translateX(0em)
    }
    25%,
    45%,
    5% {
        -webkit-transform: translateX(-1em);
        transform: translateX(-1em)
    }
    15%,
    35%,
    55% {
        -webkit-transform: translateX(1em);
        transform: translateX(1em)
    }
    65% {
        -webkit-transform: translateX(-.6em);
        transform: translateX(-.6em)
    }
    75% {
        -webkit-transform: translateX(0.6em);
        transform: translateX(0.6em)
    }
    85% {
        -webkit-transform: translateX(-.2em);
        transform: translateX(-.2em)
    }
    95% {
        -webkit-transform: translateX(0.2em);
        transform: translateX(0.2em)
    }
}
.debug-mode tw-expression[type=hookref] {
    background-color: rgba(114, 123, 140, .15)
}
.debug-mode tw-expression[type=hookref]::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "?" attr(name)
}
.debug-mode tw-expression[type=variable] {
    background-color: rgba(140, 127, 114, .15)
}
.debug-mode tw-expression[type=variable]::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "$" attr(name)
}
.debug-mode tw-expression[type=macro]:nth-of-type(4n+0) {
    background-color: rgba(135, 153, 102, .15)
}
.debug-mode tw-expression[type=macro]:nth-of-type(2n+1) {
    background-color: rgba(102, 153, 102, .15)
}
.debug-mode tw-expression[type=macro]:nth-of-type(4n+2) {
    background-color: rgba(102, 153, 136, .15)
}
.debug-mode tw-expression[type=macro][name=display] {
    background-color: rgba(0, 169, 255, .1)!important
}
.debug-mode tw-expression[type=macro][name=else],
.debug-mode tw-expression[type=macro][name=else]+tw-hook:not([name]),
.debug-mode tw-expression[type=macro][name=elseif],
.debug-mode tw-expression[type=macro][name=elseif]+tw-hook:not([name]),
.debug-mode tw-expression[type=macro][name=if],
.debug-mode tw-expression[type=macro][name=if]+tw-hook:not([name]),
.debug-mode tw-expression[type=macro][name=unless],
.debug-mode tw-expression[type=macro][name=unless]+tw-hook:not([name]) {
    background-color: rgba(0, 255, 0, .1)!important
}
.debug-mode tw-expression[type=macro].false {
    background-color: rgba(255, 0, 0, .2)!important
}
.debug-mode tw-expression[type=macro].false+tw-hook:not([name]) {
    display: none
}
.debug-mode tw-expression[type=macro][name="a"],
.debug-mode tw-expression[type=macro][name=array],
.debug-mode tw-expression[type=macro][name=color],
.debug-mode tw-expression[type=macro][name=colour],
.debug-mode tw-expression[type=macro][name=datamap],
.debug-mode tw-expression[type=macro][name=dataset],
.debug-mode tw-expression[type=macro][name=num],
.debug-mode tw-expression[type=macro][name=number],
.debug-mode tw-expression[type=macro][name=print],
.debug-mode tw-expression[type=macro][name=text] {
    background-color: rgba(254, 255, 0, .2)!important
}
.debug-mode tw-expression[type=macro][name=put],
.debug-mode tw-expression[type=macro][name=set] {
    background-color: rgba(255, 127, 0, .2)!important
}
.debug-mode tw-expression[type=macro][name=script] {
    background-color: rgba(255, 191, 0, .2)!important
}
.debug-mode tw-expression[type=macro][name=style] {
    background-color: rgba(184, 197, 197, .2)!important
}
.debug-mode tw-expression[type=macro][name^=click],
.debug-mode tw-expression[type=macro][name^=link],
.debug-mode tw-expression[type=macro][name^=mouseout],
.debug-mode tw-expression[type=macro][name^=mouseover] {
    background-color: rgba(127, 223, 31, .2)!important
}
.debug-mode tw-expression[type=macro][name^=append],
.debug-mode tw-expression[type=macro][name^=prepend],
.debug-mode tw-expression[type=macro][name^=remove],
.debug-mode tw-expression[type=macro][name^=replace] {
    background-color: rgba(223, 95, 31, .2)!important
}
.debug-mode tw-expression[type=macro][name=live] {
    background-color: rgba(31, 95, 223, .2)!important
}
.debug-mode tw-expression[type=macro]::before {
    content: "(" attr(name) ":)";
    padding: 0 .5rem;
    font-size: 1rem;
    vertical-align: middle;
    line-height: normal;
    background-color: inherit;
    border: 1px solid rgba(255, 255, 255, .5)
}
.debug-mode tw-hook {
    background-color: rgba(0, 84, 255, .1)!important
}
.debug-mode tw-hook::before {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "["
}
.debug-mode tw-hook::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "]"
}
.debug-mode tw-hook[name]::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "]<" attr(name) "|"
}
.debug-mode tw-pseudo-hook {
    background-color: rgba(255, 170, 0, .1)!important
}
.debug-mode tw-collapsed::before {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content:"{"
}
.debug-mode tw-collapsed::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "}"
}
.debug-mode tw-verbatim::after,
.debug-mode tw-verbatim::before {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: "`"
}
.debug-mode tw-align[style*="text-align: center"] {
    background: linear-gradient(to right, rgba(255, 204, 188, 0) 0, rgba(255, 204, 188, .25) 50%, rgba(255, 204, 188, 0) 100%)
}
.debug-mode tw-align[style*="text-align: left"] {
    background: linear-gradient(to right, rgba(255, 204, 188, .25) 0, rgba(255, 204, 188, 0) 100%)
}
.debug-mode tw-align[style*="text-align: right"] {
    background: linear-gradient(to right, rgba(255, 204, 188, 0) 0, rgba(255, 204, 188, .25) 100%)
}
.debug-mode p {
    background-color: rgba(255, 212, 0, .1)
}
.debug-mode tw-enchantment {
    animation: enchantment .5s infinite;
    -webkit-animation: enchantment .5s infinite;
    border: 1px solid
}
.debug-mode tw-broken-link::after,
.debug-mode tw-link::after {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: attr(passage-name)
}
.debug-mode tw-include {
    background-color: rgba(204, 127, 50, .1)
}
.debug-mode tw-include::before {
    font-size: .8rem;
    padding-left: .2rem;
    padding-right: .2rem;
    vertical-align: top;
    content: attr(type) " \"" attr(title) "\""
}
@keyframes enchantment {
    0%, to {
        border-color: #ffb366
    }
    50% {
        border-color: #6fc
    }
}
@-webkit-keyframes enchantment {
    0%, to {
        border-color: #ffb366
    }
    50% {
        border-color: #6fc
    }
}
tw-debugger {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999999;
    min-width: 10em;
    min-height: 1em;
    padding: 1em;
    font-size: 1.5em;
    border-left: solid #000 2px;
    border-top: solid #000 2px;
    border-top-left-radius: .5em;
    background: #fff;
    transition: opacity .2s;
    -webkit-transition: opacity .2s;
    opacity: .8
}
@media screen and (max-width: 1280px) {
    tw-debugger {
        font-size: 1.25em
    }
}
@media screen and (max-width: 960px) {
    tw-debugger {
        font-size: 1em
    }
}
@media screen and (max-width: 640px) {
    tw-debugger {
        font-size: .8em
    }
}
tw-debugger:hover {
    opacity: 1
}
.show-invisibles {
    border-radius: 3px;
    border: 1px solid #999;
    background-color: #fff;
    font-size: inherit
}
.debug-mode .show-invisibles {
    background-color: #eee;
    box-shadow: inset #ddd 3px 5px .5em
}
.link,
tw-icon,
tw-link {
    cursor: pointer
}
.enchantment-link,
tw-link {
    color: #4169E1;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease-in-out
}
.enchantment-link:hover,
tw-link:hover {
    color: #00bfff
}
.enchantment-link:active,
tw-link:active {
    color: #DD4B39
}
.visited {
    color: #6941e1
}
.visited:hover {
    color: #E3E
}
tw-broken-link {
    color: #933;
    border-bottom: 2px solid #933;
    cursor: not-allowed
}
.enchantment-hover {
    border-bottom: 1px dashed #666
}
.enchantment-mouseout {
    border: rgba(63, 148, 191, .25) solid
}
.enchantment-mouseout:hover {
    background-color: rgba(63, 148, 191, .25);
    border: 1px solid transparent;
    border-radius: .2em
}
html {
    /*font: 100% Georgia, serif;*/
    font: 100% Open Sans, san-serif;
    margin: 0;
    background-color: transparent;
    color: #000;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box
}
*,
:after,
:before {
    position: relative;
    box-sizing: inherit
}
body {
    margin: 0;
    background-color: transparent
}
tw-storydata {
    display: none
}
tw-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 80%;
    font-size: 1em;
    line-height: 1.5em;
    margin: 5% auto;
    font-family: Open Sans,Arial,Century gothic, sans-serif;
    height: 100%;
    width: 100%;
    background: url('images/examroom-new.jpg') no-repeat center center cadetblue;
    background-size: cover !important;
    margin: auto;
}
@media screen and (max-width: 1024px) {
    tw-story {
        /*font-size: 1.2em;*/
        margin: 5% 2% 5% 11%;
        width: 87%;
    }
}
@media screen and (max-width: 896px) {
    tw-story {
        /*font-size: 1.05em*/
    }
}
@media screen and (max-width: 768px) {
    tw-story {
        /*font-size: .9em*/
    }
}
tw-passage {
    display: block;
    padding: 0 0 1.5em 0em;
    height: 100%;
    background: rgba(0, 170, 213, 0.1);
    /*background: rgba(0, 170, 213, 0.2);*/
    overflow-y: hidden;
}
tw-sidebar {
    width: 3em;
    position: absolute;
    text-align: center;
    display: block;
    left: 0;
    top: 1.5em;
    z-index: 10;
}
tw-icon {
    display: block;
    margin: .5em 0;
    font-size: 2.75em;
    /*color: #fff;*/
    color: transparent;
    opacity: .6;
    background: url(images/back.png) no-repeat center center;
    background-size: 58% !important;
}
tw-icon.redo {
    transform: rotate(180deg);
}
tw-icon:hover {
    opacity: 1;
}
tw-error {
    display: inline-block;
    border-radius: .2em;
    padding: .2em;
    font-size: 1rem;
    cursor: help
}
tw-error.error {
    background-color: rgba(222, 57, 189, .4);
    color: #000
}
tw-error.warning {
    background-color: rgba(222, 140, 57, .4);
    color: #000;
    display: none
}
.debug-mode tw-error.warning {
    display: inline
}
tw-error-explanation {
    display: block;
    font-size: .8rem;
    line-height: 1rem
}
tw-error-explanation-button {
    cursor: pointer;
    line-height: 0;
    border-radius: 1px;
    border: 1px solid #000;
    font-size: .8rem;
    margin: 0 .4rem;
    opacity: .5
}
tw-error-explanation-button .folddown-arrowhead {
    display: inline-block
}
tw-notifier {
    border-radius: .2em;
    padding: .2em;
    font-size: 1rem;
    background-color: rgba(222, 181, 57, .4);
    display: none
}
.debug-mode tw-notifier {
    display: inline
}
tw-notifier::before {
    content: attr(message)
}
tw-colour {
    border: 1px solid #000;
    display: inline-block;
    width: 1em;
    height: 1em
}
h1 {
    font-size: 3em
}
h2 {
    font-size: 2.25em
}
h3 {
    /*font-size: 1.75em*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1em;
    margin: .6em 0
}
pre {
    font-size: 1rem
}
small {
    font-size: 70%
}
big {
    font-size: 120%
}
mark {
    color: rgba(0, 0, 0, .6);
    background-color: #ff9
}
ins {
    color: rgba(0, 0, 0, .6);
    background-color: rgba(254, 242, 204, .5);
    border-radius: .5em;
    box-shadow: 0 0 .2em #ffe699;
    text-decoration: none
}
del {
    background-color: #000;
    text-decoration: none
}
center {
    text-align: center;
    margin: 0 auto;
    width: 60%
}
blink {
    text-decoration: none;
    animation: fade-in-out 1s steps(1, end) infinite alternate;
    -webkit-animation: fade-in-out 1s steps(1, end) infinite alternate
}
tw-align {
    display: block
}
tw-outline {
    color: #fff;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000
}
tw-shadow {
    text-shadow: .08em .08em .08em #000
}
tw-emboss {
    text-shadow: .08em .08em 0 #000;
    color: #fff
}
tw-condense {
    letter-spacing: -.08em
}
tw-expand {
    letter-spacing: .1em
}
tw-blur {
    color: transparent;
    text-shadow: 0 0 .08em #000
}
tw-blurrier {
    color: transparent;
    text-shadow: 0 0 .2em #000
}
tw-blurrier::selection {
    background-color: transparent;
    color: transparent
}
tw-blurrier::-moz-selection {
    background-color: transparent;
    color: transparent
}
tw-smear {
    color: transparent;
    text-shadow: 0 0 .02em rgba(0, 0, 0, .75), -.2em 0 .5em rgba(0, 0, 0, .5), .2em 0 .5em rgba(0, 0, 0, .5)
}
tw-mirror {
    display: inline-block;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1)
}
tw-upside-down {
    display: inline-block;
    transform: scaleY(-1);
    -webkit-transform: scaleY(-1)
}
tw-fade-in-out {
    text-decoration: none;
    animation: fade-in-out 2s ease-in-out infinite alternate;
    -webkit-animation: fade-in-out 2s ease-in-out infinite alternate
}
tw-rumble {
    -webkit-animation: rumble linear .1s 0s infinite;
    animation: rumble linear .1s 0s infinite;
    display: inline-block
}
tw-shudder {
    -webkit-animation: shudder linear .1s 0s infinite;
    animation: shudder linear .1s 0s infinite;
    display: inline-block
}
tw-shudder-in {
    animation: shudder-in 1s ease-out;
    -webkit-animation: shudder-in 1s ease-out
}
.transition-in {
    -webkit-animation: appear 0ms step-start;
    animation: appear 0ms step-start
}
.transition-out {
    -webkit-animation: appear 0ms step-end;
    animation: appear 0ms step-end
}
.transition-in[data-t8n^=dissolve],
[data-t8n^=fade-in].transition-in {
    -webkit-animation: appear .8s;
    animation: appear .8s
}
[data-t8n^=dissolve].transition-out {
    -webkit-animation: appear .8s reverse;
    animation: appear .8s reverse
}
.transition-in[data-t8n^=shudder],
[data-t8n^=shudder-in].transition-in {
    display: inline-block;
    -webkit-animation: shudder-in .8s;
    animation: shudder-in .8s
}
.transition-out[data-t8n^=shudder],
[data-t8n^=shudder-out].transition-out {
    display: inline-block;
    -webkit-animation: shudder-out .8s;
    animation: shudder-out .8s
}
[data-t8n^=boxflash].transition-in {
    -webkit-animation: box-flash .8s;
    animation: box-flash .8s
}
[data-t8n^=pulse].transition-in {
    -webkit-animation: pulse .8s;
    animation: pulse .8s
}
[data-t8n^=pulse].transition-out {
    -webkit-animation: pulse .8s reverse;
    animation: pulse .8s reverse
}
[data-t8n$=fast] {
    animation-duration: .4s;
    -webkit-animation-duration: .4s
}
[data-t8n$=slow] {
    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s
}
.navigation{
        animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transform: none !important;
    transition: none !important;
}