body { 
/*font-family: -apple-system, BlinkMacSystemFont, 
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
"Fira Sans", "Droid Sans", "Helvetica Neue", 
sans-serif;*/
font-family: "Space Mono","sans-serif";
font-size: 2em;
line-height: 1em;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html,body {
  padding: 0;
  margin: 0;
}

/*h1 { font-size: 24px; margin: 2em 0 1em 0; padding-bottom: 10px; border-bottom: solid 3px #000; }*/


body { background-color: #222; color: #eee; background-image: url('../greygrid.png'); background-position: 50% 50%; background-size: 128px; }


.pageSection * { font-size: 16px; line-height: 40px; }
h1,h2,h3 { font-weight: bold; text-transform: uppercase; letter-spacing: 3px; margin: 30px 0 30px 0; }
h1 { padding-bottom: 20px; border-bottom: solid 2px #eee; }

blockquote { font-size: 1.5em; border: solid 3px rgba(0,0,0,0.5); margin: 2em 0; padding: 1em 1em 0.5em 1em; position: relative; }
blockquote > span { position: absolute; top: 0.25em; left: 0.25em; box-sizing: content-box; display: inline-block; width: 100%; height: 100%; border: solid 3px rgba(0,0,0,0.25); }

hr { border-top: solid 2px rgba(0,0,0,0.25); margin: 1.5em 0; }

a { position: relative; color: #fff; cursor: pointer; }
a:after { content: " "; opacity: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; position: absolute; bottom: -10px; left: 0; width: 100%; height: 2px; }
a:after { background-color: #c44; }
a:hover:after { opacity: 1; bottom: -3px; }
a:hover { text-decoration: none; color: #a22; }

a.plain:after { background-color: transparent; }

ul, li { margin-left: 0; padding-left: 0; }
li { list-style: none; }

.delay025 { -webkit-animation-delay: 0.25s; animation-delay: 0.25s; }
.delay050 { -webkit-animation-delay: 0.50s; animation-delay: 0.50s; }
.delay100 { -webkit-animation-delay: 1.00s; animation-delay: 1.00s; }
.delay200 { -webkit-animation-delay: 2.00s; animation-delay: 2.00s; }
.delay300 { -webkit-animation-delay: 3.00s; animation-delay: 3.00s; }

/* Base Colours */
.colour1light { color: #DA291C; }
.colour2light { color: #FF6900; }
.colour3light { color: #FF9E1B; }
.colour4light { color: #9E2A2F; }
.colour5light { color: #53565A; }

/* Light Colours */
.colour_light_0 { color: #e56960; }
.colour_light_1 { color: #ff964d; }
.colour_light_2 { color: #ffbb5f; }
.colour_light_3 { color: #bb6a6d; }
.colour_light_4 { color: #87898c; }

/* Dark Colours */
.colour1dark { color: #991d14; }
.colour2dark { color: #b34a00; }
.colour3dark { color: #b36f13; }
.colour4dark { color: #6f1d21; }
.colour5dark { color: #3a3c3f; }

/* Base Backgrounds */
.bg0light { background-color: #DA291C; }
.bg1light { background-color: #FF6900; }
.bg2light { background-color: #FF9E1B; }
.bg3light { background-color: #9E2A2F; }
.bg4light { background-color: #53565A; }

/* Light Backgrounds */
.bgcolour_0.bglight { background-color: #e56960; }
.bgcolour_1.bglight { background-color: #ff964d; }
.bgcolour_2.bglight { background-color: #ffbb5f; }
.bgcolour_3.bglight { background-color: #bb6a6d; }
.bgcolour_4.bglight { background-color: #87898c; }

/* Dark Backgrounds */
.bg1dark { background-color: #991d14; }
.bg2dark { background-color: #b34a00; }
.bg3dark { background-color: #b36f13; }
.bg4dark { background-color: #6f1d21; }
.bg5dark { background-color: #3a3c3f; }

.bgMono1 { background-color: rgb(236,243,251); } /* Carol Mono1 */
.bgMono2 { background-color: rgb(211,226,244); } /* Carol Mono2 */
.bgMono3 { background-color: rgb(138,156,179); } /* Carol Mono3 */
.bgMono4 { background-color: rgb(80,99,124); } /* Carol Mono4 */

.bgGradient1 {
    background: #DA291C; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(180deg, #FF6900, #DA291C); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, #FF6900, #DA291C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, #FF6900, #DA291C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, #FF6900, #DA291C); /* Standard syntax (must be last) */
}
.bgGradient1-45 {
    background: #DA291C; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(45deg, #FF6900, #DA291C); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, #FF6900, #DA291C); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, #FF6900, #DA291C); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, #FF6900, #DA291C); /* Standard syntax (must be last) */
}
.bgGradient2 {
    background: #FF9E1B; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(180deg, #9E2A2F, #FF9E1B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, #9E2A2F, #FF9E1B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, #9E2A2F, #FF9E1B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, #9E2A2F, #FF9E1B); /* Standard syntax (must be last) */
}
.bgGradient2-45 {
    background: #FF9E1B; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(45deg, #9E2A2F, #FF9E1B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, #9E2A2F, #FF9E1B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, #9E2A2F, #FF9E1B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, #9E2A2F, #FF9E1B); /* Standard syntax (must be last) */
}
.bgGradient3 {
    background: #FF9E1B; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(180deg, #53565A, #FF9E1B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(180deg, #53565A, #FF9E1B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(180deg, #53565A, #FF9E1B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(180deg, #53565A, #FF9E1B); /* Standard syntax (must be last) */
}
.bgGradient3-45 {
    background: #FF9E1B; /* For browsers that do not support gradients */        
    background: -webkit-linear-gradient(45deg, #53565A, #FF9E1B); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, #53565A, #FF9E1B); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, #53565A, #FF9E1B); /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, #53565A, #FF9E1B); /* Standard syntax (must be last) */
}

figure { margin: 0.5em 0 1em 0; }
figure.center { text-align: center; }
figure.left { text-align: left; }
figure.right { text-align: right; }
figure img { width: 100% !important; height: auto !important; margin: 0 auto; display: inline-block; }
figure.rounded img { border-radius: 50%; width: 150px !important; }

.xs-left { text-align: left; }
.xs-center { text-align: center; }
.xs-right { text-align: right; }

.vcenter { height: 100%; width: 100%; display: table; table-layout: fixed; }
.vcenter > div { display: table-cell; vertical-align: middle; text-align: center; width: 100%; }

.coverlink { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.coverbg { background-size: cover; background-position: 50% 50%; }


.alignleft { float: left; margin-right: 30px; }
.alignright { float: right; margin-left: 30px; }

/* Video */
.videoContainer,
.iframeVideo { max-width: 1280px; max-height: 720px; }
.videoContainer { height: 0; padding-bottom: 56%; position: relative; margin: 2em 0; }
.videoContainer iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; margin: 0; }
.videoCloseOuter { display: none; }

.pageSection { position: relative; padding: 0 2em; }
.pageSectionInner { padding: 1em 0; }
.pageSection p { text-align: justify; }

#burger { position: fixed; top: 0; left: 0; display: inline-block; z-index: 150; cursor: pointer; padding: 0.5em; background-color: rgba(0,0,0,0.1); }
#burger > div { position: relative; width: 1em; height: 1em; }
.burgerline {  position: absolute; left: 0; width: 100%; }
.burgerlineTop { top: 0; }
.burgerlineMiddle { height: 100%; }
.burgerlineBottom { top: auto; bottom: 0; }

.burgerlineTop,
.burgerlineMiddle > div > div,
.burgerlineBottom {
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both;
  animation-duration: 300ms;
  animation-delay: 0;
  background-color: #fff;
  /* If you change the height, also change the margins in the animations */
  height: 2px;
}
.burgerlineTop {
  -webkit-transform-origin: 50% 50% 0; 
  transform-origin: 50% 100% 0;
}
.burgerlineMiddle > div > div {
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
}
.burgerlineBottom {
  -webkit-transform-origin: 50% 50% 0;
  transform-origin: 50% 0% 0;
}

#burger.on .burgerline {    

}
#burger.on .burgerlineTop { animation-name: burgerlineTopOn; }
#burger.on .burgerlineMiddle > div > div { animation-name: burgerlineMiddleOn; }
#burger.on .burgerlineBottom { animation-name: burgerlineBottomOn; }

#burger .burgerlineTop { animation-name: burgerlineTopOff; }
#burger .burgerlineMiddle > div > div { animation-name: burgerlineMiddleOff; }
#burger .burgerlineBottom { animation-name: burgerlineBottomOff; }

@keyframes burgerlineTopOn {
    0% { top: 0; -webkit-transform: rotate(0); transform: rotate(0); margin-top: 0; }
    50% { top: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: -1px; }
    100% { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #000; margin-top: -1px; }
}
@keyframes burgerlineMiddleOn {
    0% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0; }
    100% { opacity: 0; background-color: #000; }
}
@keyframes burgerlineBottomOn {
    0% { bottom: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: 0; }
    50% { bottom: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: -1px; }
    100% { bottom: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background-color: #000; margin-bottom: -1px; }
}
@keyframes burgerlineTopOff {
    100% { top: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: 0; }
    50% { top: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-top: -1px; }
    0% { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -1px; }
}
@keyframes burgerlineMiddleOff {
    100% { opacity: 1; }
    51% { opacity: 1; }
    50% { opacity: 0; }
    0% { opacity: 0; }
}
@keyframes burgerlineBottomOff {
    100% { bottom: 0%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: 0; }
    50% { bottom: 50%; -webkit-transform: rotate(0); transform: rotate(0); margin-bottom: -1px; }
    0% { bottom: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-bottom: -1px; }
}

#mainNav { -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-duration: 200ms; animation-delay: 0;animation-name: slideOutLeft; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 140; }
#mainNav.on { animation-name: slideInLeft; }
#mainNav ul,
#mainNav ul li { margin: 0; padding: 0; }
#mainNav ul { padding: 0.15em 2em 0.5em 2em; }
#mainNav a { font-size: 1.25em; margin: 0 0 .5em 0; padding-bottom: 0.5em; display: inline-block; }

/* Hide header etc for now */
#pageHeader, #burger, #mainNav { display: none !important; }
#headerBackground { height: 0.5em !important; }
#wrap { margin-top: 1em !important; }



.post_content { font-size: 0.7em; }
.post_content p { margin-bottom: 1em; }
.post_content ul { margin: 0 0 10px 0; }
.post_content ul { list-style-type: none; }
.post_content ul > li { position: relative; padding-left: 1em; }
.post_content ul > li:before { content: "- "; position: absolute; left: 0; top: 0; }

.post_content ol { margin: 0 0 10px 0; counter-reset: elements; padding-left: 0; }
.post_content ol { list-style-type: none; }
.post_content ol > li { position: relative; padding-left: 2em; }
.post_content ol > li:before { counter-increment: elements; content: counter(elements)'. '; position: absolute; left: 0; top: 0; }

ul.plain { margin: 0; padding: 0; }
ul.plain li { list-style-type: none; margin: 0; padding: 0; text-indent: 0; }
ul.plain li:before { content: none; }
ul.inline li { display: inline-block; }

#footer { padding: 0 1em; color: #fff; font-size: 0.75em; }
#footer > div { padding: 1em 0; }
#footer p { margin: 0; }

/* page */
#pageHeader { position: fixed; top: 0; left: 0; z-index: 145; display: inline-block; height: 2em; width: 100%; }
#pageHeader > div { padding: 0.5em; margin-left: 2em; }
#pageHeader h2 { font-size: 1em; margin: 0; text-transform: uppercase; }
#logo { height: 1em; display: block; }
#headerBackground { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; height: 2em; z-index: 145; background-color: rgba(0,0,0,0.1); }
#headerBackground { background-size: 100% 10em; }
#wrap { margin-top: 2em; position: relative; z-index: 10; padding-bottom: 10em; }
#pageFooter { position: relative; z-index: 10; background-color: #444; color: #fff; font-size: 0.8em; }
#pageFooter p { margin: 5px 0; }
#pageFooter > div { padding: 1em; }

.bracket { border-width: 2px; border-color: #aaa; border-style: solid; height: 10px; position: relative; margin: 2.5em -15px; }
.bracket > div { background-color: #aaa; width: 2px; height: 10px; position: absolute; left: 50%; margin-left: -1px; top: 0; }
.bracket.top { border-bottom: none; }
.bracket.top > div { top: -10px; }
.bracket.bottom { border-top: none; }
.bracket.bottom > div { display: none; }

.socialicons a { margin-right: 0; font-size: 1.5em; }
.socialicons a:after { background-color: transparent; }

/* Bootstrap */
.btn { font-size: inherit; text-transform: uppercase; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; background-image: none !important; border-radius: 0 !important; border: solid 2px !important; background-color: transparent; margin: 0.5em; }
.btn:after { background-color: transparent; }
.btn:hover,
.btn:focus { border-color: #000 !important; background-color: #000; color: #fff; }
.btn-white { color: #fff; border-color: #fff; }
.btn-primary { color: #6666cc; border-color: #6666cc; }
.btn-lg { font-size: 1em; margin: 10px 0; }
.xs-hidden { display: none; }
.modal-header button { position: absolute; top: 1em; right: 1em; }
/* Themify Icons */
.ti { font-size: 0.8em; }