/*#region  Custom Classes 
--------------------------  */

.hidden { display: none; }
.invisible { visibility: hidden; }
.clear { clear: both; }

.centre { text-align: center; }
.left { float: left; }
.right { float: right; }

img.left { margin-right: 1em; }
img[style*="left"] { margin-right: 1em; }
img[style*="right"] { margin-left: 1em; }

.blue { color: #0039a6; }
.red { color: #ff003e; }

#greyout { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0px; padding: 0px; background-color: #000; text-align: center; }

/*#endregion */

/*#region  Typography 
--------------------------  */

a { color: #fff; text-decoration: underline; }
img { border: 0px; }
a:hover { color: #fff; text-decoration: none; }
p { color: #fff; font-size: 1em; margin: 1em 0px; padding: 0px; }

/*#endregion */

/*#region  Structure 
--------------------------  */

div.outer section a.mnu { visibility: visible; position: absolute; top: 1em; right: 1em; z-index: 3; }
div.outer section aside { display: block; position: absolute; top: -1em; right: -1em; z-index: 2; opacity: 0; text-align: left; width: 17.5em; height: 100%; padding: 1em; box-shadow: 0 0 15px #000; background: transparent url("../files/template/opaque-90.png") repeat; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    div.outer section aside.o { visibility: visible; opacity: 1; }
div.outer section a.mnu img[alt="Close"], div.outer section a.mnu.o img[alt="Menu"] { display: none; }
div.outer section a.mnu.o img[alt="Close"] { display: block; }

div.outer section aside ul { list-style-type: none; margin: 4em 2em 2em 3em; padding: 0; }
    div.outer section aside ul ul { margin: 0.5em 0 0 0.5em; }
    div.outer section aside ul li { margin-bottom: 0.25em; }

div.body ul { list-style-type: none; font-family: arial, helvetica, sans-serif; margin: 2.1875em 0px 1.75em 0px; padding: 0px; float: left; width: 100%; }
    div.body ul li { float: left; }
        div.body ul li a { display: block; padding: 0.46875em 0.625em; margin: 0.53125em; width: 4.125em; height: 1.234375em; border-radius: 3px; text-decoration: none; background: transparent url(../files/template/button-opaque.png) repeat; }
        div.body ul li:nth-child(6n) a { margin-right: 0px; }
        div.body ul li:nth-child(6n+1) a { margin-left: 0px; }
        div.body ul li a:hover { background: #ff003e; }
        div.body ul li a span { font-size: 0.8125em; line-height: 1.5em; }

        div.body ul li:first-child a { margin-left: 0px; }
        div.body ul li:first-child + li + li + li + li + li a { margin-right: 0px; }
        div.body ul li:first-child + li + li + li + li + li + li a { margin-left: 0px; }
        div.body ul li:first-child + li + li + li + li + li + li + li + li + li + li + li a { margin-right: 0px; }
        div.body ul li:first-child + li + li + li + li + li + li + li + li + li + li + li + li a { margin-left: 0px; }

div.body p.g { text-transform: uppercase; clear: both; font-size: 1.25em; margin-bottom: 1.25em; margin-top: 0px; }

div.body div.hp p { clear: both; font-size: 1.4em; line-height: 1.5em; margin: 2.25em 0 2.25em 0; }
div.body div.hp.us p { margin: 1.5em 0 1.5em 0; }
div.body div.h p:first-child { clear: both; font-size: 1.4em; line-height: 1.5em; margin: 1.15em 0 0.5em 0; }
div.body div.h p:last-child { clear: both; font-size: 1.4em; line-height: 1.5em; margin: 0.75em 0 1.15em 0; }

div.body a.f { display: inline-block; width: 28px; height: 28px; background: transparent url(../files/template/social-sprite.png) 0px 0px; text-decoration: none; }
    div.body a.f:hover { background: transparent url(../files/template/social-sprite.png) 0px -28px; }
div.body a.t { display: inline-block; width: 28px; height: 28px; background: transparent url(../files/template/social-sprite.png) -28px 0px; text-decoration: none; }
    div.body a.t:hover { background: transparent url(../files/template/social-sprite.png) -28px -28px; }
div.body a.i { display: inline-block; width: 28px; height: 28px; background: transparent url(../files/template/social-sprite.png) -56px 0px; text-decoration: none; }
    div.body a.i:hover { background: transparent url(../files/template/social-sprite.png) -56px -28px; }

div.body p.cr { font-family: arial, helvetica, sans-serif; font-size: 0.75em; color: #666; }

header { visibility: visible; top: 0px; left: 0px; right: 0px; text-align: center; background: transparent url(../files/template/opaque.png) repeat; padding: 1em; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; height: 1.5625em; overflow: hidden; position: fixed; z-index: 99; }
    header[style="opacity: 0;"], header[style="filter: alpha(opacity = 0);"] { display: none; }
    header:hover, header:focus { height: 6em; outline: none; }
    header > a { display: inline-block; }
    header nav { display: block; margin-top: 1em; }
        header nav h1 { font-size: 0.85em; text-transform: uppercase; margin-bottom: 0.5em; margin-top: 1em; font-weight: normal; }
        header nav ul { list-style-type: none; margin: 0px; padding: 0px; }
            header nav ul li { display: inline; margin-right: 0.5em; }
                header nav ul li a { text-decoration: none; font-size: 0.85em; }

footer { visibility: visible; text-align: center; }
    footer nav { font-family: arial,helvetica,sans-serif; font-size: 0.75em; color: #666; }
        footer nav a { margin: 0px; text-decoration: none; color: #666; }

/* Dialogues */
section.dialogue { text-align: left; display: none; width: 48em; height: 33em; min-height: 33em; margin: -1em 0px 0px -2em; padding: 3.125em; font-family: arial, helvetica, sans-serif; background: #fff; color: #000; box-shadow: 0px 0px 15px #000000; transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; z-index: 251; }

    section.dialogue > div { margin: 0px; width: 100%; height: 100%; padding: 1em; overflow: auto; font-size: 0.85em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    section.dialogue h1 { text-transform: uppercase; }
    section.dialogue h2 { font-size: 1em; }
    section.dialogue p { color: #000; }
    section.dialogue a { color: #000; }
        section.dialogue a:hover { color: #000; }
        section.dialogue a.close { position: absolute; top: -0.75em; right: -0.75em; text-decoration: none; background: #0039a6; border-radius: 50%; padding: 0.25em 0.5em; color: #fff; font-weight: bold; }
            section.dialogue a.close:hover { background: #ff003e; }
#termsconditions ol { list-style-type: lower-alpha; }
#statement ul { margin: 0px 0px 0px 2em; float: none; list-style-type: disc; width: auto; }
    #statement ul li { float: none; }

section.dialogue form { margin-top: 2em; }
    section.dialogue form div div { margin-bottom: 0.75em; }
    section.dialogue form div label { display: block; float: left; width: 10em; text-align: right; margin-right: 2.5em; font-weight: bold; }
    section.dialogue form div input { width: 25em; font-family: arial, helvetica, sans-serif; font-size: 1.25em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    section.dialogue form div textarea { width: 25em; font-family: arial, helvetica, sans-serif; font-size: 1.25em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    section.dialogue form div input[type=submit] { width: 10em; margin-left: 10em; }

/* footer history bar */
div.outer div.ftr { visibility: visible; position: absolute; bottom: 0px; left: 0px; right: 0px; pointer-events: none; }
    div.outer div.ftr div { background-color: #f9f9f9; height: 1.125em; }
    div.outer div.ftr p { margin-bottom: 1.5em; text-transform: uppercase; }
    div.outer div.ftr div img { margin-top: -1.125em; pointer-events: auto; }

/*#region  Media Queries 
--------------------------  */

@media screen and (max-width: 850px) {
    section.dialogue form div label {width: 20%; }
    section.dialogue form div input, section.dialogue form div textarea { width: 70%; }
}

@media screen and (max-width: 850px) {
    section.dialogue form div label { width: 100%; text-align: left; }
    section.dialogue form div input, section.dialogue form div textarea { width: 100%; }
        section.dialogue form div input[type=submit] { margin-left: 0; }
}

@media screen and (max-width: 680px), screen and (max-height: 600px) {
    div.body div.hp p, div.body div.h p:first-child, div.body div.h p:last-child { font-size: 1.2em; }
}

@media screen and (max-width: 450px), screen and (max-height: 485px) {
    div.body div.hp p, div.body div.h p:first-child, div.body div.h p:last-child { font-size: 1.1em; }
}

@media screen and (max-height: 600px) {
    div.body div.hp p { margin: 1.5em 0; }
}

@media screen and (max-width: 400px), screen and (max-height: 425px) {
}

@media screen and (max-width: 630px) and (max-height: 300px) {
    div.body div.hp p, div.body div.h p:first-child, div.body div.h p:last-child { font-size: 0.9em; }
    div.body div.hp p { margin: 0.5em 0; }
}

@media screen and (max-height: 490px) {
    div.outer section aside ul { margin-top: 3em; }
}

@media screen and (max-height: 460px) {
    div.outer section aside { top: -0.5em; right: 0; bottom: -1em; height: auto; overflow: auto; }
    div.outer section aside ul { margin: 2em; font-size: 0.9em; }
}

@media screen and (max-height: 425px) {
    div.outer section aside { width: 15em; }
        div.outer section aside ul { margin: 0; }
}

@media screen and (max-width: 980px), screen and (max-height: 665px) {
    div.outer section.dialogue { left: 2em; top: 2em; right: 2em; bottom: 2em; width: auto; height: auto; min-height: 10em; min-width: 10em; margin: 0; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; }
}

@media screen and (max-width: 450px), screen and (max-height: 350px) {
    div.outer section.dialogue { left: 1.5em; top: 1.5em; right: 1.5em; bottom: 1.5em; padding: 1em; }
}

@media screen and (max-height: 425px) and (-webkit-device-pixel-ratio: 3),screen and (max-width: 710px) and (-webkit-device-pixel-ratio: 3) {
    div.body p.cr, footer nav { font-size: 0.5em; }
    div.outer div.ftr p { display: none; }
}

/*#endregion */

/*#endregion */

/*#region  History 
--------------------------  */
div.history { visibility: visible; position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; z-index: 99; }
    div.history.ind { top: 0%; }
div.historyitem { position: relative; width: 100%; height: 100%; min-width: 20em; min-height: 37.5em; }
    div.historyitem div.outer { position: relative; }
        div.historyitem div.outer:not(:first-child) { position: absolute; top: 0px; left: 100%; }
        div.historyitem div.outer:nth-child(3) { position: absolute; top: 0px; left: 200%; }
        div.historyitem div.outer:nth-child(4) { position: absolute; top: 0px; left: 300%; }

    div.historyitem section.full div.body { padding: 1.25em; }
    div.historyitem div.outer section { width: 40.625em; height: 26.5em; min-height: 21.43em; }
        div.historyitem div.outer section.full { margin-top: -11.965em; }
    div.historyitem div.body iframe { margin: -1em -5em; max-width: 100%; }
    div.historyitem section h1 { font-size: 3em; font-weight: normal; margin: 1em 0px 0.25em 0px; }
    /*div.historyitem section h1:before    { content: "-"; font-family: arial, helvetica, sans-serif; margin-right: 0.25em; }
div.historyitem section h1:after    { content: "-"; font-family: arial, helvetica, sans-serif; margin-left: 0.25em; }*/
    div.historyitem section h2 { font-size: 1.5em; text-transform: uppercase; font-weight: normal; margin: 0.5em 0px; }

div.slides { width: 100%; height: 100%; min-width: 20em; min-height: 37.5em; z-index: 1; }

/* Paging */
div.paging { width: 50.625em; height: 36.5em; min-height: 21.43em; position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: none; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
div.historyitem ul { position: absolute; bottom: 2em; left: 50%; padding: 0px; z-index: 3; list-style-type: none; pointer-events: auto; }
    div.historyitem ul.b2 { margin-left: -16px; }
    div.historyitem ul.b3 { margin-left: -26px; }
    div.historyitem ul li { display: inline; margin: 0px 5px 0px 0px; padding: 0px; float: left; }
        div.historyitem ul li a { display: inline-block; text-decoration: none; background: transparent url(../files/template/dots.png) no-repeat right top; padding: 0px; width: 14px; height: 14px; float: left; }
            div.historyitem ul li a.c { background-position: left top; }

div.historyitem a.ar { position: absolute; top: 50%; left: 50%; z-index: 2; pointer-events: auto; }
    div.historyitem a.ar img { visibility: hidden; }
    div.historyitem a.ar:hover, div.historyitem a.ar:hover { background-position: -2.9375em top; }

    div.historyitem a.ar.u { margin-left: -1.46875em; top: 0; background: url(../files/template/arrow-up-red-sprite.png) no-repeat top left; }
    div.historyitem a.ar.d { margin-left: -1.46875em; top: auto; bottom: -1em; background: url(../files/template/arrow-down-red-sprite.png) no-repeat top left; }
    div.historyitem a.ar.l { left: 0; background: url(../files/template/arrow-left-blue-sprite.png) no-repeat top left; }
    div.historyitem a.ar.r { left: auto; right: 0; background: url(../files/template/arrow-right-blue-sprite.png) no-repeat top left; }

/*#region  Media Queries 
--------------------------  */

@media screen and (max-width: 855px) {
    div.historyitem div.outer section { width: calc(100% - 10em); }
    
    div.historyitem section h1 { margin-top: 0; }

    div.historyitem a.ar.l { margin-left: auto; left: 1em; }
    div.historyitem a.ar.r { margin-left: auto; left: auto; right: 1em; }

    div.paging { width: 100%; }
}

@media screen and (max-width: 680px) {
    div.historyitem div.outer section { height: auto; min-height: 10em; }
}

@media screen and (max-width: 580px), screen and (max-height: 415px) {
    div.historyitem section h1 { font-size: 2em; }
    div.historyitem section h2 { font-size: 1.25em; }
}

@media screen and (max-width: 520px), screen and (max-height: 530px) {
    div.historyitem div.outer section { width: 95%; }
    div.historyitem a.ar.l { top: auto; bottom: 0; }
    div.historyitem a.ar.r { top: auto; bottom: 0; }
}

@media screen and (max-width: 520px), screen and (max-height: 700px) {
    div.paging { height: calc(100% - 5em); top: auto; bottom: 0.5em; -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

    div.historyitem a.ar.u { top: auto; bottom: -0.5em; margin-left: -4.96875em; }
    div.historyitem a.ar.d { margin-left: 2.03125em; bottom: -0.5em; }
    div.historyitem ul { bottom: -0.1em; }
}

@media screen and (max-height: 600px) {
    div.historyitem, div.historyitem div.outer section, div.slides, div.paging { min-height: 12.5em; }
        div.historyitem div.outer section { height: auto; } 
}

@media screen and (max-height: 425px) and (-webkit-device-pixel-ratio: 3) {
    div.body div.hp p { font-size: 0.9em; }
    div.historyitem section p { font-size: 0.5em; }
}

@media screen and (max-height: 345px) {
    div.historyitem section h1 { font-size: 1.5em; }
    div.historyitem section h2 { font-size: 1em; }
}

@media screen and (max-width: 400px) and (max-height: 325px) {
    div.historyitem a.ar.u, div.historyitem a.ar.d { display: none; }
    div.historyitem ul { bottom: -1.5em; }
}

@media screen and (max-width: 800px), screen and (max-height: 600px) {
    div.outer { background-position: 50% 50% !important; }
}

/*#endregion */

/*#endregion */

/*#region  WebCharge 
--------------------------  */
body#wcCMSBody div.history, body#wcCMSBody div.historyitem, body#wcCMSBody div.outer { position: static; }
div#ocms_cphbody.editable, section#ocms_cphbody.editable { -moz-box-sizing: content-box; box-sizing: content-box; }
/*#endregion */