﻿/*
	--------------------------
	Global Styles
	--------------------------
*/

/*#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; }

    /*#region  Back to top button 
    --------------------------  */
        a.btb
            {  visibility: hidden; display: block; padding: 1em 1.25em; color: #fff; background-color: #808285; position: fixed; left: 50%; top: 85%; margin-left: 32.5em; opacity: 0; font-family: "museo-slab", arial, sans-serif; font-weight: 700;
              -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; }
        a.btb.l
            { margin-left: -36.6em; }
        a.btb.o
            { visibility: visible; opacity: 0.3; }
        a.btb.o:hover
            { opacity: 0.8; color: #fff; }

        /*#region  Arrows Responsive */
            @media screen and (max-width: 1190px) {
                a.btb
                    { left: auto; margin-left: 0; right: 0; }
                a.btb.l
                    { display: none; }
            }
        /*#endregion */

    /*#endregion */

    /*#region  Arrows 
    --------------------------  */
        /*
             
            outer box is 1.36 x 7.52
            arms are 70 deg & 4 wide
            When rotated arms centres will be at the top right of the above box:
                top arm needs to move down by 1.88 (quarter of 7.52)
                bottom arm needs to move down 5.64 (3 quarters of 7.52)
                both arms need to move to the left by 1.36

            These don't account for the thickness of the line so will be slightly out. Put a margin left and padding top of 0.125
        */
        div.arws
            { width: 100%; margin-left: -50%;
              position: absolute; top: 0; left: 50%; z-index: 1; }
        div.arws > div
            { position: relative; width: 97.5%; max-width: 75em; margin: 0 auto; }

        div.arws a
            { display: block; width: 1.36em; height: 7.52em; margin-left: 0.125em; padding-top: 0.125em;
              position: absolute; top: 0; right: 0; bottom: 0; }
        div.arws a:first-child
            { left: 0; right: auto; }

        div.arws a span
            { display: block; width: 4em; height: 2px; background-color: #3aaadc; 
              position: absolute; top: 5.64em; left: -1.36em; 
              -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg); }
        div.arws a span:first-child
            { top: 1.9em; /*1.88*/
              -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg); }
        div.arws a:first-child span
            { -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg); }
        div.arws a:first-child span:first-child
            { -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg); }

        div.arws a.d span
            { opacity: 0.1; cursor: default; }

        div.arws a:not(.d):hover span
            { background-color: #ffa01d; }

        /*
            Single arrows
        */
        a.arws
            { display: block; width: 1.36em; height: 7.52em; margin-left: 0.125em; padding-top: 0.125em; position: relative; }
        a.arws span
            { display: block; width: 4em; height: 2px; background-color: #3aaadc; 
              position: absolute; top: 5.64em; left: -1.36em; 
              -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg); }
        a.arws span:first-child
            { top: 1.9em; /*1.88*/
              -moz-transform: rotate(70deg); -ms-transform: rotate(70deg); -o-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg); }

        a.arws.dn
            { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
        a.arws.up
            { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

        a.arws.d span
            { opacity: 0.1; cursor: default; }

        a.arws:not(.d):hover span
            { background-color: #ffa01d; }

        /*#region  Arrows Responsive */
            /*@media screen and (max-width: 1310px) {
                div.arws
                    { width: 100%; margin-left: -50%; }
                div.arws > div
                    { position: relative; width: 97.5%; max-width: 75em; margin: 0 auto; }
            }*/
            @media screen and (max-width: 860px) {
                /* Arms now 3 wide so outer box is 1.02 x 5.64 */
                div.arws a, a.arws
                    { width: 1.02em; height: 5.64em; }
                div.arws a span, a.arws span
                    { width: 3em;
                      top: 4.23em; left: -1.02em; }
                div.arws a span:first-child, a.arws span:first-child
                    { top: 1.41em; }
            }
            @media screen and (max-width: 650px) {
                /* Arms now 2.5 wide so outer box is 0.85 x 4.7 */
                div.arws a, a.arws
                    { width: 0.85em; height: 4.7em; }
                div.arws a span, a.arws span
                    { width: 2.5em;
                      top: 3.525em; left: -0.85em; }
                div.arws a span:first-child, a.arws span:first-child
                    { top: 1.2em; }
            }
            @media screen and (max-width: 480px) {
                div.arws
                    { display: none; }
            }
        /*#endregion */

    /*#endregion */

    /*#region  Crosses 
    --------------------------  */
        a.crss
            { display: block; width: 2em; height: 2em;  position: relative;
              -moz-transition: all linear .2s; -o-transition: all linear .2s; -webkit-transition: all linear .2s; transition: all linear .2s; }
        a.crss span
            { display: block; height: 2px; width: 2em; position: absolute; top: 1em; background-color: #3aaadc; 
              -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
        a.crss span:first-child
            { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
        a.crss:hover
            { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
        a.crss:hover span
            { background-color: #ffa01d; }

        /*#region  Crosses Responsive */
            @media screen and (max-width: 680px) {
                a.crss
                    { width: 1.5em; }
                a.crss span
                    { width: 1.5em; }
            }
            @media screen and (max-width: 500px) {
                a.crss:hover
                    { -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; }
            }
        /*#endregion */
    /*#endregion */

    /*#region  Button links 
    --------------------------  */
        a.btn
            { display: inline-block; color: #fff; background-color: #4b91b1; padding: 1em; font-family: "museo-slab", arial, sans-serif; margin-right: 1em; margin-bottom: 1em; 
              -moz-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; }
        a.btn:hover, a.btn.on
            { background-color: #ffa01d; color: #fff; }

        a.pdf
            { background-image: url(/_resources/files/icons/pdf-32.png); background-repeat: no-repeat; background-position: 0.75em center; padding-left: 3.5em; }
        
        /*#region  Button links Responsive */
            @media screen and (max-width: 795px) {
                a.btn
                    { padding-top: 0.5em; padding-bottom: 0.5em; }
            }
        /*#endregion */

    /*#endregion */

    /*#region  Charms */
        main ul.chms
            { list-style-type: none; margin: -2.75em 2.2em 0 0; padding: 0; position: absolute; top: 0; right: 0; }
        main ul.chms li
            { display: inline-block; margin-left: 0.5em; }
        main ul.chms li a
            { display: block; padding: 0.5em; background-color: #3aa9dc; border-radius: 0.5em; background-size: 200% 100%; background-position: 0 0;
                background-image: -webkit-gradient(linear, left top, right top, from(#3aa9dc 50%), to(#ffa01d 50%));
                background-image: -o-linear-gradient(left, #3aa9dc 50%, #ffa01d 50%); background-image: -moz-linear-gradient(left, #3aa9dc 50%, #ffa01d 50%); 
                background-image: -ms-linear-gradient(left, #3aa9dc 50%, #ffa01d 50%); background-image: linear-gradient(to right, #3aa9dc 50%, #ffa01d 50%);
                background-image: linear-gradient(to right, #3aa9dc 50%, #ffa01d 50%); }
        main ul.chms li a.o
            { background-position: 100% 0; 
              -moz-transition: background-position 0.3s ease 0s; -o-transition: background-position 0.3s ease 0s; -webkit-transition: background-position 0.3s ease 0s; transition: background-position 0.3s ease 0s; }
        main ul.chms li a.c
            { background-position: 200% 0; 
              -moz-transition: background-position 0.3s ease 0s; -o-transition: background-position 0.3s ease 0s; -webkit-transition: background-position 0.3s ease 0s; transition: background-position 0.3s ease 0s; }
        main ul.chms li a:hover
            { background-position: -100% 0; 
              -moz-transition: background-position 0.3s ease 0s; -o-transition: background-position 0.3s ease 0s; -webkit-transition: background-position 0.3s ease 0s; transition: background-position 0.3s ease 0s; }
        main ul.chms li a.o:hover
            { background-position: 100% 0; }
        main ul.chms li a.c:hover
            { background-position: 200% 0; }
        main ul.chms li a.h
            { -moz-transition: background-position 0.3s ease 0s; -o-transition: background-position 0.3s ease 0s; -webkit-transition: background-position 0.3s ease 0s; transition: background-position 0.3s ease 0s; }

        /*#region  Charms Responsive */
            @media screen and (max-width: 795px) {
                main ul.chms
                    { margin-top: -2.25em; }
            }
            @media screen and (max-width: 580px) {
                main ul.chms
                    { margin-right: 0; }
            }
            @media screen and (max-width: 480px) {
                main ul.chms
                    { display: none; }
            }
        /*#endregion */

    /*#endregion */

/*#endregion */

/*#region  Colour Scheme 
--------------------------  */

    .blue       { color: #3aaadc; }
    .navyblue   { color: #004a99; }
    .linksblue  { color: #4b91b1; }
    .black      { color: #231f20; }
    .darkpurple { color: #5e4b95; }
    .purple     { color: #a05da5; }
    .red        { color: #f15b67; }
    .peach      { color: #f4785a; }
    .orange     { color: #ffa01d; }
    .green      { color: #009a96; }
    .grey       { color: #808285; }
    .darkgrey   { color: #5b6064; }
    .lightgrey  { color: #bcbec0; }
    .xlightgrey { color: #e6e7e8; }
    .offwhite   { color: #f1f1f2 }

/*#endregion */

/*#region  Typography 
--------------------------  */

    article, aside, figure, footer, header, main, hgroup, nav, section 
        { display: block; }
    h1 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1.75em; line-height: 1em; color: #231f20; font-weight: 500; margin: 0 0 0.75em 0; }
    h2 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1.5em; line-height: 1em; color: #000; font-weight: 500; margin: 0 0 0.25em 0; }
    h3 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1.25em; line-height: 1em; color: #000; font-weight: 500; margin: 0 0 0.5em 0; }
    h4 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1.1em; line-height: 1em; color: #000; font-weight: normal; margin: 0; }
    h5 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1em; line-height: 1em; color: #000; font-weight: normal; margin: 0; }
    h6 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1em; line-height: 1em; color: #000; font-weight: normal; margin: 0; }
    hgroup
        { margin: 0 0 1em 0; }
    hgroup h1
        { margin: 0; }
    hgroup h2
        { margin: 0; }
    hgroup h3
        { margin: 0; }

    p ~ h2
        { margin-top: 1.25em; }

    dt 
        { font-family: "museo-slab", arial, sans-serif; font-size: 1.5em; color: #000; font-weight: 500; margin: 0 0 0.15em 0; }
    p, li, td, dd, label, input, select, textarea, time
        { font-size: 1.1em; line-height: 1.35em; }
    li li, li p, li input
        { font-size: 1em; }

    p, ul
        { margin: 0 0 1em 0; }
    a
        { text-decoration: none; color: #3aaadc; 
          -moz-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; }
    a:hover
        { text-decoration: none; color: #ffa01d; }
    img
        { border: 0; max-width: 100%; }
    iframe
        { max-width: 100%; }
    input, select, textarea
        { font-family: "museo-sans",arial,sans-serif; font-weight: 300;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    table
        { width: 100%; }

    strong
        { font-weight: 500; }

    /*#region  Typography Responsive */
        @media screen and (max-width: 795px) {
            h1
                { font-size: 1.5em; }
            h2
                { font-size: 1.25em; }
            h3
                { font-size: 1em; }
            p, li, td, dd, label, input, select, textarea, time
                { font-size: 1em; }
        }
    /*#endregion */

/*#endregion */

/*#region  Structure 
--------------------------  */

    body
        { font-family: "museo-sans", arial, sans-serif; font-weight: 300; font-size: 1em; background-color: #f3f3f5; color: #231f20; float: left; width: 100%; min-width: 20em; margin: 0; text-align: center; }
    body:before
        { display: block; content: " "; background-color: #fff; position: absolute; height: 9.25em; width: 100%; }
    body > div  
        { position: relative; overflow: hidden; background-color: #f8f9f9; max-width: 65em; padding: 0; margin: 0 auto; box-shadow: 0 0 20px #777; }
    header, footer, main
        { float: left; width: 100%;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    footer > div,   main > div
        { max-width: 75em; margin: 0 auto; padding: 0 3.75em; 
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    /*#region  Structure Responsive */

    /*#endregion */

/*#endregion */

/*#region  Header 
--------------------------  */

    header
        { padding: 0 2.2em; margin-bottom: 4em; background-color: #fff; position: relative; }
    header > div > div
        { padding: 1.5em 0; float: left; width: 100%; }
    /* Logo */
    header > div > div img
        { float: left; }
    /* Social Links */
    header > div > div > ul
        { float: right; margin: 1.25em 0 0 0; padding: 0; list-style-type: none; }
    header > div > div > ul li
        { display: block; float: left; margin-left: 0.75em; font-size: 1em; }
    header > div > div > ul li:nth-child(5)
        { margin-right: 1.5em; }
    /* Navicons */
    header > div > div > ul li:nth-child(6)
        { display: none; }
    header > div > div > ul li:nth-child(6) a
        { display: block; width: 2.05em; padding: 3px 0; margin-left: 0.5em; margin-right: 0.5em; border-radius: 1px; }
    header > div > div > ul li:nth-child(6) a span
        { display: block; width: 100%; height: 2px; background-color: #3aaadc; margin-top: 11px; }
    header > div > div > ul li:nth-child(6) a span:first-child
        { margin-top: 0; }
    header > div > div > ul li:nth-child(7) a
        { display: block; width: 2.05em; padding: 3px 0; margin-left: 0.5em; margin-right: 0.5em; border-radius: 1px; }
    header > div > div > ul li:nth-child(7) a span
        { display: block; width: 100%; height: 2px; background-color: #3aaadc; margin-top: 11px; }
    header > div > div > ul li:nth-child(7) a span:first-child
        { margin-top: 0; }
    /* Search box */
    header > div > div ul li.s
        { position: relative; }
    header > div > div ul li.s div
        { margin-top: -0.5em; position: absolute; top: 0; right: 0; width: 0; background-color: #fff; border-bottom: solid 2px #3aaadc; overflow: hidden; white-space: nowrap; opacity: 0;
          -moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s; }
    header > div > div ul li.s:hover div, header > div > div ul li.s.o div
        { width: 35em; opacity: 1; }
    header > div > div ul li.s div img
        { vertical-align: middle; width: 100%; padding: 0; }
    header > div > div ul li.s div input
        { border: 0; font-size: 1.5em; width: 21.5em; vertical-align: middle; line-height: 1em; padding: 0.55em; color: #808285; }
    header > div > div ul li.s div a
            { display: inline-block; width: 2.1875em; height: 2.1875em; margin-left: 0; position: relative; vertical-align: middle; }
    /* Main nav */
    header nav
        { background-color: #004a99; float: left; width: 100%; margin-bottom: -1.5em; font-family: "museo-sans", arial, sans-serif; font-weight: 100; text-align: left; position: relative; z-index: 5;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    header nav > div > a
        { display: none; }
    header nav ul
        { list-style-type: none; margin: 0 auto; padding: 0 2.2em; }
    header nav ul li
        { float: left; margin-left: 1.875em; padding: 0; position: relative; }
    header nav ul li:first-child
        { margin-left: 0; }
    header nav ul li a
        { color: #fff; display: block; padding: 0.682em 0; }
    header nav > ul > li > a
        { border-bottom: 2px solid transparent; padding-bottom: 0.575em; font-family: "museo-slab",arial,sans-serif; }
    header nav > ul > li:hover > a
        { color: #ffa01d; }
    header nav > ul > li.selected > a
        { border-bottom-color: #ffa01d; box-shadow: 0 1px 0 0 #ffa01d; color: #ffa01d; }
    /* Main sub nav */
    header nav ul li ul
        { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: -1em; background-color: #004a99; border-top: solid 2px #ffa01d; width: 12em; padding: 1em; margin-top: 0; z-index: 3; 
          -moz-transition: all linear .2s; -o-transition: all linear .2s; -webkit-transition: all linear .2s; transition: all linear .2s; 
          -moz-transition-delay: .2s; -o-transition-delay: .2s; -webkit-transition-delay: .2s; transition-delay: .2s; }
    header nav ul li ul.w
        { width: 18em; }
    
    header nav ul li:hover ul
        { visibility: visible; opacity: 0.9875; margin-top: 0.5em; }
    header nav ul li ul li
        { font-size: 1em; float: none; margin: 0.15em 0; padding: 0; }
    header nav ul li ul li a
        { padding: 0.25em 0; }
    header nav ul li ul li a:hover, header nav ul li ul li.selected a
        { color: #ffa01d; }
    
    /* sub nav arrow */
    header nav ul li ul:before
        { content: " "; display: block; width: 1em; height: 1em; background-color: #004a99; position: absolute; left: 2em; top: -0.5em; opacity: 0.95; z-index: -1;
          -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

    /* Breadcrumb */
    header nav.bcm
        { background-color: #e6e7e8; margin-top: 1.5em; position: absolute; top: 100%; left: 2.2em; right: 2.2em; width: auto; z-index: 1; }
    header nav.bcm > a
        { position: absolute; right: 0.5em; top: 50%; margin-top: -0.875em; }
    header nav.bcm > a:first-child
        { right: 2.75em; }
    header nav.bcm ul
        { margin: 0.5em 0; overflow: hidden; white-space: nowrap;
          -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
    header nav.bcm ul li
        { font-family: "museo-slab", arial, sans-serif; font-weight: 100; font-size: 1em; padding: 0; margin-left: 1em; float: none; display: inline; }
    header nav.bcm ul li:first-child
        { margin-left: 0; }
    header nav.bcm ul li a
        { color: #3aaadc; padding: 0; border-bottom: 0; display: inline; }
    header nav.bcm ul li a:hover
        { color: #ffa01d; }
    header nav.bcm ul li:not(:first-child):before
        { content: "/"; color: #fff; margin-right: 1em; }

    /*#region  Header Responsive */
        @media screen and (max-width: 970px) {
            header nav > ul li
                { margin-left: 1.25em; }
        }
        @media screen and (max-width: 910px) {
            header nav > ul
                { font-size: 0.95em; }
        }
        @media screen and (max-width: 880px) {
            header nav > ul
                { font-size: 0.9em; }
            /* Search box */
            header > div > div ul li.s:hover div, header > div > div ul li.s.o div
                { width: 25em; }
            header > div > div ul li.s div input
                { width: 14.9em; }
        }
        @media screen and (max-width: 830px) {
            header
                { margin-bottom: 0; border-bottom: solid 1px #bcbec0; }
            header > div > div
                { padding: 1.5em 0; }
            header > div > div > a > img
                { width: 9.5em; }
            header > div > div > ul
                { width: auto; margin-top: 0.75em; }
            header > div > div > ul li
                { display: none; }
            header > div > div > ul li a,   header > div > div > ul li:last-child
                { display: block; }
            header > div > div > ul li:nth-child(6)
                { display: block; }
            header > div > div > ul li:nth-child(6) a
                { width: 2em; }
            header > div > div > ul li:nth-child(6) a span
                { margin-top: 9px; }
            header > div > div > ul li:last-child a span
                { width: 100%; height: 2px;
                  -moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s; }
            header > div > div > ul li:last-child a.o
                { padding: 35% 0; }
            header > div > div > ul li:last-child a.o span:first-child
                { margin-top: 3px;
                  -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
            header > div > div > ul li:last-child a.o span:nth-child(2)
                { display: none; }
            header > div > div > ul li:last-child a.o span:nth-child(3)
                { margin-top: -2px;
                  -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
            header > div > div > ul li > a img
                { width: 100%; }

            header nav
                { width: 100%; position: absolute; top: 6.4375em; left: 0; z-index: 5; background-color: transparent; text-align: right; visibility: hidden; overflow: hidden; }
            header nav.o
                { visibility: visible; }
            header nav > div
                { background-color: #fff; margin-left: 100%; margin-bottom: 2em; width: 100%; box-shadow: 0 5px 5px #808285; text-align: left;
                  -moz-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; transition: all ease-in-out .2s; }
            header nav.o > div
                { margin-left: 0; }
            header nav > div > a
                { display: inline-block; }
            header nav > div > a img
                { width: 1.75em; margin: 2em 0 2em 0.15em; }
            header nav > div > a:nth-of-type(4) img
                { width: 1.75em; }
            header nav > div > a:first-child
                { margin-left: 1em; }
            header nav > ul
                { width: 100%; padding: 0; background-color: #fff; margin-left: 100%;
                  -moz-transition: all ease-in-out .2s; -o-transition: all ease-in-out .2s; -webkit-transition: all ease-in-out .2s; transition: all ease-in-out .2s; }
            header nav.o > ul
                { margin-left: 0; }
            header nav ul li
                { float: none; width: 100%; margin-left: 0; font-size: 1.25em; text-align: left; }
            header nav > ul > li
                { width: 100%; }
            header nav > ul > li > a
                { color: #fff; position: relative; background-color: #004a99; padding: 0.5em 0.5em 0.5em 2.75em; }
            header nav > ul > li:not(.s)
                { border-bottom: solid 2px #fff; }
            header nav > ul > li.s > a:before
                { content: " "; display: block; width: 0.75em; height: 2px; background-color: #fff; position: absolute; top: 1.15em; left: 1em;
                  -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s; }
            header nav > ul > li.s > a:after
                { content: " "; display: block; width: 0.75em; height: 2px; background-color: #fff; position: absolute; top: 1.15em; left: 1.5em;
                  -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s; }
            header nav > ul > li.selected > a
                { border-bottom-color: transparent; box-shadow: none; color: #fff; }

            header nav > ul > li > a:hover, header nav > ul > li.o > a
                { color: #ffa01d; }
            header nav > ul > li > a:hover:after, header nav > ul > li.o > a:after, header nav > ul > li > a:hover:before, header nav > ul > li.o > a:before
                { background-color: #ffa01d; }

            header nav ul li ul::before
                { display: none; }
            header nav ul li ul
                { display: block; position: static; visibility: hidden; box-shadow: none; padding: 0; max-height: 0; overflow: hidden; width: auto; left: auto; top: auto; margin-top: 0; padding-left: 2.5em; background-color: transparent; opacity: 1; border-top-color: #fff;
                  -moz-transition: all linear .5s; -o-transition: all linear .5s; -webkit-transition: all linear .5s; transition: all linear .1s; }
            header nav ul li ul.w
                { width: auto; }
            header nav > ul > li.o > a
                { background-color: #fff; }
            header nav ul li:hover ul, header nav ul li.o ul
                { visibility: visible; margin-top: 0; }
            header nav > ul > li:hover
                { border-bottom-color: #ffa01d; }
            header nav ul li.o ul
                { display: block; max-height: 20em; width: auto; }
            header nav ul li ul li
                { font-size: 1em; margin: 0; float: left; }
            header nav ul li ul li:last-child
                { margin-bottom: 0.5em; }
            header nav ul li ul li a
                { color: #231f20; font-weight: 100; display: inline-block; padding: 0.25em; }
            header nav > ul > li.s.o > a:before
                { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
            header nav > ul > li.s.o > a:after
                { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
            header nav ul li ul li a:hover
                { background-color: transparent; color: #ffa01d; }

            header nav.bcm
                { display: none; }
        }
        @media screen and (max-width: 795px) {
            /* Search box */
            header > div > div ul li.s div
                { margin-top: -0.25em; }
            header > div > div ul li.s div input
                { font-size: 1.25em; width: 17.9em; }
        }
        @media screen and (max-width: 700px) {
            /* Search box */
            header > div > div ul li.s:hover div, header > div > div ul li.s.o div
                { width: 20em; }
            header > div > div ul li.s div input
                { width: 13.9em; }
        }
        @media screen and (max-width: 600px) {
            /* Search box */
            header > div > div ul li.s
                { position: static; }
            header > div > div ul li.s div
                { width: 90%; padding: 0 5%; top: 6.45em; z-index: 4; max-height: 0; border-bottom: 0;
                    -moz-transition: all linear .1s; -o-transition: all linear .1s; -webkit-transition: all linear .1s; transition: all linear .1s; }
            header > div > div ul li.s:hover div, header > div > div ul li.s.o div
                { width: 90%; margin-top: 0; padding: 2.5% 5%; max-height: 15em; border-bottom: 2px solid #3aaadc; }
            header > div > div ul li.s div a
                { float: right;  margin-top: -1.25em; position: absolute; top: 50%; right: 5%; }
            header > div > div ul li.s div input
                { width: 95%; }
        }
        @media screen and (max-width: 580px) {
            header 
                { padding: 0 1.1em; }
        }
        @media screen and (max-width: 440px) {
            header nav ul li
                { font-size: 1.1em; }
            header > div > div > ul
                { margin-top: 0.85em; }
        }
    /*#endregion */

/*#endregion */

/*#region   Main 
--------------------------  */

    main
        { padding: 1.75em 2.2em; }
    main > div
        { text-align: left; }
    main ul li
        { margin: 0.65em 0; }
    /*#region  Main Responsive */
        @media screen and (max-width: 580px) {
            main 
                { padding: 1.1em; }
        }
    /*#endregion */

/*#endregion */

/*#region  Footer 
--------------------------  */

    footer
        { padding: 0; }
    footer > div
        { background-color: #004a99; float: left; width: 100%; padding: 2.2em; margin-top: 2.85em; color: #fff; font-weight: 300; }
    /* Logo */
    footer div > a
        { margin: -4em auto 0 auto; position: relative; display: inline-block; }
    footer div > a:before
        { content: " "; display: block; background-color: #004a99; height: 6.25em; position: absolute; top: -1em; left: 0; right: 0; border-radius: 50%; z-index: 1; }
    footer div > a img
        { z-index: 2; position: relative; }

    /* Copyright and links */
    footer nav ul
        { list-style-type: none; margin: 2em auto 0 auto; padding: 0; }
    footer nav ul li
        { margin-left: 0.5em; font-size: 0.85em; display: inline-block; }
    footer nav ul li:first-child
        { margin-left: 0; }
    footer nav ul li a
        { color: #fff; }
    footer nav ul li a:hover
        { color: #ffa01d; }
    /* Social links */
    footer nav ul:last-child
        { margin: 1.5em 0 0 0; }
    footer nav ul:last-child li:first-child
        { padding-right: 1em; }
    footer nav ul:last-child li a
        { padding: 0 1em; border-left: solid 1px #ffa01d; }
    footer nav ul:last-child li:first-child a
        { border-left: none; }
    /* Navicon */
    footer nav ul:first-child li.nav a
        { display: block; width: 2.05em; padding: 3px 0; margin-left: 0.5em; margin-right: 0.5em; border-radius: 1px; }
    footer nav ul:first-child li.nav a span
        { display: block; width: 100%; height: 2px; background-color: #fff; margin-top: 10px; }
    footer nav ul:first-child li.nav a span:first-child
        { margin-top: 0; }

    /*#region  Footer Responsive */
        @media screen and (max-width: 910px) {
            footer nav > ul
                { font-size: 0.9em; }
        }
        @media screen and (max-width: 795px) {
            footer nav ul:first-child li.nav
                { display: none; }
        }
        @media screen and (max-width: 620px) {
            footer nav ul:last-child li:first-child
                { padding-right: 0; display: block; }
            footer nav ul:last-child li:nth-child(2)
                { margin-left: 0; }
            footer nav ul:last-child li:nth-child(2) a
                { border-left: 0; }
        }
        @media screen and (max-width: 580px) {
            footer > div
                { padding: 1.1em; }
            footer div > a
                { margin-top: -2.9em; }
        }
        @media screen and (max-width: 480px) {
            footer nav ul:last-child li:nth-child(5)
                { margin-left: 0; display:inline; }
            footer nav ul:last-child li:nth-child(5):before 
                { content:"\A"; white-space:pre; }
            footer nav ul:last-child li:nth-child(5) a
                { border-left: 0; }
        }
        @media screen and (max-width: 410px) {
            footer nav ul:last-child li:first-child
                { width: 100%; }
            footer nav ul:last-child li:nth-child(2) a
                { border-left: 0; }
        }
    /*#endregion */

/*#endregion */

/*#region  Popup Sitemap 
--------------------------  */

    nav#n-sm
        { opacity: 0; text-align: left; background-color: #0054a5; width: 75em; max-width: 100%; float: left; position: absolute; top: -100%; left: 0; margin-left: 0; z-index: 10; transition: all ease-out .2s; }
    nav#n-sm.o
        { opacity: 1; top: 0; }
    nav#n-sm.f  
        { top: auto; bottom: -100%; }
    nav#n-sm.f.o
        { opacity: 1; bottom: 0; }
    /* Logo and Social Links */
    nav#n-sm > aside
        { margin: 3.25em 6.25em 2em 6.25em; padding: 0; }
    nav#n-sm > aside ul
        { list-style-type: none; margin: 0.75em 0 0 0; padding: 0; float: right;  }
    nav#n-sm > aside ul li
        { float: left; margin-left: 0.5em; font-size: 1em; }
    nav#n-sm > aside ul li a,   nav#n-sm > aside ul li a img
        { float: left; }
    /* Close button */
    nav#n-sm > aside ul li:last-child
        { margin-left: 2em; }
    nav#n-sm > aside ul li:last-child a
        { display: block; width: 2.5em; height: 2.5em; position: relative; margin-top: -0.28125em; }
    nav#n-sm > aside ul li:last-child a span
        { display: block; width: 1.9375em; height: 3px; background-color: #fff; position: absolute; top: 50%; left: 0.3em; margin-top: -2px;
          -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
    nav#n-sm > aside ul li:last-child a span:first-child
        { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    nav#n-sm > aside ul li:last-child a:hover
        { background-color: #ffa01d; }
    nav#n-sm > aside ul li:last-child a:hover span
        { background-color: #fff; }
    /* Sitemap */
    nav#n-sm > ul
        { list-style-type: none; margin: 0 6.25em 3.25em 6.25em; padding: 0;
          -moz-column-count: 4; -moz-column-gap: 2em; -webkit-column-count: 4; -webkit-column-gap: 2em;  column-count: 4; column-gap: 2em; }
    nav#n-sm > ul > li
        { display: inline-block; width: 100%; margin-top: 0.75em; font-size: 1em;
          -webkit-column-break-inside: avoid; column-break-inside: avoid; }
    nav#n-sm > ul > li:last-child
        { margin-top: 0; }
    nav#n-sm > ul > li > span
        { display: block; color: #fff; font-weight: 700; margin-bottom: 0.25em; font-family: "museo-slab", arial, sans-serif; }
    nav#n-sm > ul > li > ul
        { list-style-type: none; margin: 0; padding: 0; }
    nav#n-sm > ul > li > ul li
        { line-height: 1.15em; margin-bottom: 0.5em; font-weight: 300; }

    /*#region  Structure Responsive */
        @media screen and (max-width: 1200px) {
            nav#n-sm > aside,   nav#n-sm > ul
                { margin-left: 5%; margin-right: 5%; }
        }
        @media screen and (max-width: 795px) {
            nav#n-sm    { display: none; }
        }
    /*#endregion */

/*#endregion */





/* Delete to reinstate Social Media icons */

header > div > div > ul li:nth-child(-n+4):not(:nth-child(2)), footer nav ul:first-child li:nth-child(-n+4):not(:nth-child(2)), header nav > div > a:nth-child(-n+4):not(:nth-child(2)), nav#n-sm > aside ul li:nth-child(-n+4):not(:nth-child(2)) 
    { display: none; }
header nav > div > a:last-child 
    { margin-left: 1em; }