/*
	--------------------------
	Sub Home Page Styles
	--------------------------
*/

/* Body sections */
main > div > div > section, main > div.bw > section { margin: 0px 0px 3em 0px; float: left; width: 100%; }
main > div.bw { width: 100%; }
    main > div.bw > section > div, main > div.bw > section > form { max-width: 67.5em; width: 90%; margin: 0 auto; }

    main > div.bw > section.w > div, main > div.bw > section.w > form { margin-top: 3em; }

section.w > h1 { font-family: "acumin-pro-condensed", helvetica, arial, sans-serif; font-weight: 800; font-size: 2.25em; margin: 0px; position: relative; font-weight: 600; color: #1d1d1b; }
    section.w > h1:before { content: " "; display: block; background-color: #ffdf43; position: absolute; top: 0; left: 0; bottom: 0; width: 50%; z-index: -1; }
    section.w > h1 > span { display: block; max-width: 33.75em; margin: 0 auto; background-color: #fff; }
        section.w > h1 > span > span { display: inline-block; padding: 0.25em 0; margin-right: 0.5em; background-color: #ffdf43; min-width: 7em; }
        section.w > h1 > span a { font-size: 0.5em; color: #1d1d1b; border-bottom: solid 4px #fff; }
            section.w > h1 > span a:hover { background-color: #fff; border-bottom-color: #ffdf43; }

/*  Events
--------------------------  */

section.e > h1 { width: 96%; padding: 2%; background-color: #00acaf; color: #fff; text-align: center; margin: 0px; font-size: 2em; }
div#evl { overflow: hidden; position: relative; width: 100%; }

article.e { width: 100%; padding: 0px; margin: 0px; position: relative; float: left; }

    article.e div h1 { color: #fff; line-height: 1.25em; margin: 0px 0px 0.15em 0px; }
        article.e div h1 a { color: #fff; }
    article.e div h2 { color: #fff; }
    article.e div h3 { color: #fff; }
    article.e time, article.e h2:first-of-type, article.e h3:first-of-type { font-size: 1.35em; color: #fff; }
    article.e section p { clear: left; }
    article.e p.l { line-height: normal; margin-left: 1em; font-size: 1.35em; }
    article.e div ol { color: #fff; }
    article.e > section:first-child > div time { color: #fff; text-align: center; }
    article.e > section nav ul li a { color: #fff; }
    article.e p, article.e li { color: #fff; }
    article.e > section div aside p { font-size: 1em; }
    article.e > section div aside span { color: #fff; }

    article.e div a { transition: all .1s ease-in-out; color: #00acaf; }
        article.e div a:hover { color: #fff; background-color: #00acaf; }

    article.e section { position: relative; float: left; width: 100%; height: 0px; background-color: #00434f; overflow: hidden; }
    article.e.o section { height: auto; }
    article.e > section:first-child { margin-top: 0px; height: auto; padding-top: 0px; cursor: pointer; position: relative; }
        article.e > section:first-child:after { content: url(/_resources/files/events/more-arrow.png); text-align: center; padding-top: 5%; padding-left: 2%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; background: transparent url(/_resources/files/template/opaque-datagreen.png); transition: opacity .1s ease-in-out; filter: alpha(opacity=0); opacity: 0; }
    article.e.o > section:first-child:after { content: normal; }
    article.e > section:first-child:hover:after { filter: alpha(opacity=100); opacity: 1; }

    article.e > section:first-child > span:first-child { padding-top: 34.65%; display: block; }
    article.e > section:first-child > span.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; font-size: 0px; line-height: 0px; background: #fff; }
        article.e > section:first-child > span.b span { display: inline-block; vertical-align: middle; height: 100%; float: left; }
    article.e > section:first-child > span img { vertical-align: middle; display: inline-block; width: 100%; border-bottom: solid 1px #00434f; }


    article.e > a > img { float: right; }
    article.e section > img { float: left; width: 100%; margin-left: 0px; }
    article.e section img.l { position: absolute; top: -1px; left: -1px; z-index: 99; width: auto; }

    article.e > section div { padding: 2%; width: 96%; }

        article.e > section div aside { color: #fff; margin-top: -1em; }

    article.e > section:first-child > div { padding: 1% 2%; width: 96%; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); position: absolute; bottom: 0px; left: 0px; z-index: 99; text-align: center; }
    /*article.e>section:first-child:hover>div     { background: transparent; }*/
    article.e.o > section:first-child > div { z-index: auto; }
    article.e.o > section:first-child:hover > div { background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); }
    article.e > section:first-child > div h1 { padding: 0px; }
        article.e > section:first-child > div h1 a { background: none; }
    article.e > section:first-child > div time { margin: 0px; display: inline; }
    article.e > section:first-child > div p { display: inline; }

    article.e > section nav { float: left; width: 100%; border-top: solid 1px #b2b5b4; padding: 1em 0px; }
    article.e > section:not(:first-child) nav h1 { margin-bottom: 0.5em; }
    article.e > section nav ul { float: left; width: 100%; list-style-type: none; margin: 0px; padding: 0px; }
        article.e > section nav ul li { float: left; width: 45%; margin-right: 5%; }
            article.e > section nav ul li a { display: block; padding: 0.5em 0.5em 0.5em 2.375em; transition: all .1s ease-in-out; background: transparent url(/_resources/files/events/documents-60-white.png) no-repeat 0.15em center; }
    article.e > section nav.g ul li a:hover { background-image: none; }

    article.e nav.g { display: none; }
    article.e.o nav.g { display: block; }
    article.e nav.g ul li { width: 18.4%; padding: 8% 0px; margin: 0px 0px 0px 2%; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; }
        article.e nav.g ul li:first-child { margin-left: 0px; }
        article.e nav.g ul li a { position: absolute; width: 100%; height: 100%; background: none; top: 0px; left: 0px; padding: 0px; }
            article.e nav.g ul li a:hover:after { content: "View gallery"; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); }

    article.e footer { background: #fff; float: left; width: 100%; padding: 2.6%; border: solid 1px #00434f; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
        article.e footer ul { list-style-type: none; margin: 0px; padding: 0px }
            article.e footer ul li { float: left; margin-right: 1.35%; font-size: 1em; position: relative; }
                article.e footer ul li:first-child { float: right; margin-right: 0px; }
                    article.e footer ul li:first-child a { display: block; float: left; width: 100%; background: transparent url(/_resources/files/events/minus-45.png) no-repeat top left; transition: opacity .2s ease-in-out; filter: alpha(opacity=100); opacity: 1; }
                        article.e footer ul li:first-child a:hover { background-image: url(/_resources/files/events/minus-on-45.png); }
                article.e footer ul li:nth-child(2) { float: right; }
                    article.e footer ul li:nth-child(2) a { display: block; float: left; width: 100%; background: transparent url(/_resources/files/events/openpage-45.png) no-repeat top left; }
                        article.e footer ul li:nth-child(2) a:hover { background-image: url(/_resources/files/events/openpage-on-45.png); }
                article.e footer ul li img { float: left; }
                article.e footer ul li:first-child a img, article.e footer ul li:nth-child(2) a img { transition: opacity .2s ease-in-out; filter: alpha(opacity=100); opacity: 1; }
                article.e footer ul li:first-child a:hover img, article.e footer ul li:nth-child(2) a:hover img { filter: alpha(opacity=0); opacity: 0; }

/* Pop up gallery */
div#pug { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: #000; z-index: 9999; }
    div#pug > div { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; background: #00434f; }

    div#pug div.io { position: absolute; top: 0px; right: 25em; bottom: 0px; left: 0px; overflow: hidden; }
    div#pug ul#puglist { list-style-type: none; padding: 0px; margin: 0px; width: 100%; height: 100%; }
        div#pug ul#puglist li { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
            div#pug ul#puglist li img { max-width: 100%; max-height: 100%; }

    div#pug div.d { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 25em; background: #fff; }
        div#pug div.d > div { padding: 0px 1em; text-align: left; overflow: auto; width: 100%; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
        div#pug div.d h1 { font-size: 1.45em; background: #00434f; color: #fff; padding: 0.15em 2em 0.15em 0.5em; position: absolute; top: 0px; left: 0px; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }

    div#pug h1 a.c { position: absolute; top: 0px; right: 0px; padding: 0.15em 0.5em; color: #fff; }
        div#pug h1 a.c:hover { background: #00acaf; color: #fff; }

    div#pug img.la { position: absolute; left: 1em; top: 50%; padding: 1em; background: transparent url(/_resources/files/template/opaque-darkblue.png); cursor: pointer; opacity: 0; }
    div#pug img.ra { position: absolute; right: 1em; top: 50%; padding: 1em; background: transparent url(/_resources/files/template/opaque-darkblue.png); cursor: pointer; opacity: 0; }
        div#pug img.la:hover, div#pug img.ra:hover { background: #a3d7d9; }
    div#pug img.la, div#pug img.ra, div#pug ul#pugthumbs { transition: opacity .3s ease-in-out; }

    div#pug ul#pugthumbs { opacity: 0; list-style-type: none; margin: 0px; padding: 0.5em 0px 0px 0.5em; position: absolute; left: 0px; bottom: 0px; right: 0px; background: transparent url(/_resources/files/template/opaque-datadarkgreen.png); overflow: auto; max-height: 30%; }
        div#pug ul#pugthumbs li { width: 10%; padding: 4% 0px; margin: 0px 0.5em 0.5em 0px; float: left; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; border: solid 1px #333; }
            div#pug ul#pugthumbs li a { position: absolute; width: 100%; height: 100%; background: none; top: 0px; left: 0px; padding: 0px; }
                div#pug ul#pugthumbs li a:hover:after { content: " "; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; border: solid 5px #00acaf; }
                div#pug ul#pugthumbs li a.c:after { content: " "; padding-top: 35%; text-align: center; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; border: solid 5px #00acaf; }

    div#pug div.io:hover img.la, div#pug div.io:hover img.ra, div#pug div.io:hover ul#pugthumbs { opacity: 100; }

/*  News
--------------------------  */

section.n { background-color: #00434f; float: left; width: 100%; position: relative; }
    section.n > h1 { width: 96%; padding: 2%; background-color: #00acaf; color: #fff; text-align: center; margin: 0px; font-size: 2em; }
    section.n > div { position: relative; float: left; width: 94%; height: 12em; margin: 2% 3% 0px 3%; }
div#nl { overflow: hidden; position: absolute; top: 0px; bottom: 0px; left: 0px; width: 100%; margin: 0px; text-align: center; }
section.n footer { background-color: #00434f; float: left; width: 94%; margin: 0px 3% 2% 3%; text-align: center; }
    section.n footer a { margin-right: 1em; }
        section.n footer a img { vertical-align: middle; }
        section.n footer a.m { float: right; font-size: 1em; background-color: #00acaf; color: #fff; padding: 1% 2%; border-radius: 0.25em; float: none; }
            section.n footer a.m:first-child { float: none; }
        section.n footer a:hover { background-color: transparent; }
        section.n footer a.m:hover { background-color: #00acaf; color: #fff; }
article.n { position: absolute; top: 0px; left: 0px; background-color: #00434f; width: 100%; }
    article.n h1 { margin-bottom: 0.25em; line-height: 1em; }
        article.n h1 a { color: #fff; }
    article.n time, article.n p a { color: #fff; }
        article.n p a:hover { color: #fff; }
        article.n p a:hover { background-color: transparent; }

/*section.n aside                     { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 31%; margin: 1% 3%; padding: 2% 0px 2% 3%; border-left: solid 3px #fff; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
section.n aside h1                  { margin-bottom: 1.5em; color: #00434f; }
section.n aside label               { display: none; }
section.n aside input               { font-size: 1em; border: 0px; background-color: #fff; margin: 0px 0px 1em; padding: 5%; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
section.n aside input[type=submit]  { background-color: #00434f; color: #00acaf; margin: 0px; width: auto; text-align: left; }*/

/*  Interactive map
--------------------------  */
section.d > h1 { width: 96%; padding: 2%; background-color: #00434f; color: #fff; text-align: center; margin: 0px; font-size: 2em; }
#imap { width: 100%; height: 28.125em; position: relative; }
#imapdata { background-color: #00acaf; padding: 2%; text-align: center; }
    #imapdata h2 { margin-bottom: 0px; color: #fff; }
    #imapdata p { margin-bottom: 0px; color: #fff; }
    #imapdata a { background-color: #00434f; color: #00acaf; font-size: 1em; padding: 1.5% 2.5%; border-radius: 0.75em; display: inline-block; margin: 1em 2% 0px 2%; }

/*  World Data Update
--------------------------  */

section.wdu { text-align: left; width: 100%; background-color: #00acaf; }
    section.wdu div { padding: 2% 3%; }
    section.wdu > h1 { width: 96%; padding: 2%; background-color: #00434f; color: #fff; text-align: center; margin: 0px; font-size: 2em; }
    section.wdu p { color: #fff; }
        section.wdu p a { color: #fff; }
            section.wdu p a:hover { text-decoration: underline; }
    section.wdu ul li, section.wdu ul li a { color: #fff; }
        section.wdu ul li a:hover { text-decoration: underline; }
    section.wdu nav { padding: 0px 3% 2% 3%; text-align: center; }
        section.wdu nav a { background-color: #00434F; border-radius: 0.75em; color: #00ACAF; font-size: 1em; padding: 1.5% 2.5%; display: inline-block; width: 27%; margin-left: 1%; text-align: center; }
            section.wdu nav a:first-child { margin-left: 0px; }
    section.wdu footer { background-color: #00434f; padding: 2% 3%; }
        section.wdu footer p { padding: 0px; margin: 0px; text-align: center; }

section.wdb { text-align: center; width: 100%; }
    section.wdb > h1 { width: 96%; padding: 2%; background-color: #00acaf; color: #fff; text-align: center; margin-bottom: 1.5em; font-size: 2em; }
    section.wdb > a { margin: 0px 5%; }
        section.wdb > a:hover { background: none; }
        section.wdb > a img { max-width: 40%; }

/*  Manuals
--------------------------  */

section.m { text-align: center; float: left; width: 100%; margin-bottom: 6em; }
    section.m > h1 { width: 96%; padding: 2%; background-color: #00acaf; color: #fff; text-align: center; margin-bottom: 1.5em; font-size: 2em; }
    section.m img { width: 30.46%; float: left; }
    section.m > img { margin: 0px 4.31%; }

/*  Infographic
--------------------------  */

section.g > h1 { width: 96%; padding: 2%; background-color: #b2c400; color: #fff; text-align: center; margin: 0px; font-size: 2em; }
section.g > a { display: block; overflow: hidden; padding-top: 37.5%; position: relative; width: 100%; height: 0px; border: solid 2px #b2c400; border-top: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; }
    section.g > a img { position: absolute; top: 0px; }

    section.g > a:after { content: url(/_resources/files/events/more-arrow.png); text-align: center; padding-top: 9%; padding-left: 2%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 98; background: transparent url(/_resources/files/template/opaque-gasgreen.png); transition: opacity .1s ease-in-out; filter: alpha(opacity=0); opacity: 0; }
    section.g > a:hover:after { filter: alpha(opacity=100); opacity: 1; }
    section.g > a.o:after { filter: alpha(opacity=0); opacity: 0; }

/*  975px  */
@media screen and (max-width: 975px) {

    /* Events */
    div#pug div.io { right: 15em; }
    div#pug div.d { width: 16.67em; font-size: 0.9em; }
    article.e > section:first-child:after { padding-top: 3%; }

    /* Infographic */
    section.g > a:after { padding-top: 6%; }
}

/*  905px  */
@media screen and (max-width: 905px) {

    /* Events */
    article.e h1 { font-size: 1.75em; }
    article.e div h1 { font-size: 1.35em; }
    article.e div h2 { font-size: 1.5em; }
    article.e > section div a.jodibadge { width: 7em; }
    article.e > section:first-child:after { font-size: 2.5em; padding-top: 2%; }
    article.e time, article.e h2:first-of-type, article.e h3:first-of-type { font-size: 1.35em; }
    article.e p.l { font-size: 1.35em; }
    article.e li p { font-size: 1em; }

    article.e > section nav ul li { font-size: 1em; }

    /*  Interactive map  */
    #imap { height: 22.5em; }

    /* News */
    section.n > h1 { font-size: 1.75em; }
    article.n h1 { font-size: 1.35em; margin-bottom: 0px; }
    section.n footer img { width: 2.35em; }
    div#nl footer a { margin-right: 0.75em; }

    /* Manuals */
    section.m h1 { font-size: 1.75em; }
    section.d > h1 { font-size: 1.75em; }

    /* Infographic */
    section.g > a:after { padding-top: 4%; }

    /* World Data Update */
    section.wdu h1, section.wdb h1 { font-size: 1.75em; }
}


/*  710px  */
@media screen and (max-width: 710px) {

    /* Events */
    article.e > section:first-child { background: transparent; }
        article.e > section:first-child > div { text-align: left; }
            article.e > section:first-child > div h1 { color: #00acaf; text-align: left; line-height: 1em; }
            article.e > section:first-child > div time { color: #1d1d1b; line-height: 1em; }
    article.e p.l { color: #1d1d1b; line-height: 1em; }

    article.e > section:first-child > div h1 { margin-bottom: 0.25em; }
    article.e > section:first-child:hover > div h1, article.e > section:first-child:hover > div time, article.e > section:first-child:hover > div p.l { color: #fff; }
    article.e.o > section:first-child:hover > div h1 { color: #00acaf; }
    article.e.o > section:first-child:hover > div time, article.e.o > section:first-child:hover > div p.l { color: #1d1d1b; }
    article.e time, article.e h2, article.e h2:first-of-type, article.e div h3, article.e h3:first-of-type { color: #1d1d1b; font-size: 1.15em; }

    article.e div h2 { color: #1d1d1b; text-transform: none; }
    article.e section p, article.e li { color: #1d1d1b; }
    article.e div ol li { color: #1d1d1b; }
    article.e > section:not(:first-child) nav h1, article.e > section nav ul li a { color: #1d1d1b; }
    article.e div.smbox h2:first-of-type, article.e section div.smbox p { color: #fff; }

    article.e > section:first-child > div h1 { font-size: 1.5em; }
    article.e > section:first-child > div time { font-size: 1em; }
    article.e p.l { font-size: 1em; }

    article.e div h2 { font-size: 1.35em; }
    article.e section p { font-size: 1em; }
    article.e div li { font-size: 1em; }

    article.e > section div a.jodibadge { width: 25%; margin-top: 0px; }

    article.e:first-child section:first-child:before { content: ""; display: none; }

    article.e > section:first-child > div { padding: 2% 2% 0px 2%; width: 96%; background: transparent; position: relative; bottom: auto; left: auto; float: left; z-index: 99; }

    article.e > section:first-child:hover > div { background: #00acaf; }
    article.e > section:first-child:after { content: " "; background: none; }

    article.e section { background: transparent; }
    article.e > section nav { border-top: solid 1px #1d1d1b; }

    article.e.o > section:first-child:hover > div { background: none; }

    article.e > section nav ul li { width: 100%; margin: 0px; }
        article.e > section nav ul li a { background-image: url(/_resources/files/events/documents-60-datagreen.png); }
            article.e > section nav ul li a:hover { background-image: url(/_resources/files/events/documents-60-white.png); }

    article.e > section:first-child > span:first-child { display: none; }
    article.e > section:first-child > span.b { position: static; }

    article.e footer { border-left: 0px; border-right: 0px; }
        article.e footer ul li { width: 10%; margin-left: 0.5%; }
            article.e footer ul li:first-child { margin-left: 0px; }
            article.e footer ul li img { max-width: 100%; }
            article.e footer ul li:first-child a { background-size: contain; }
            article.e footer ul li:nth-child(2) a { background-size: contain; }

    article.e > section div.smbox { left: -10em; }

    article.e > section div aside { margin-top: -0.5em; }

        article.e > section div aside p { font-size: 0.85em; }

    /*  Interactive map  */
    #imap { height: 18.5em; }

    /* News */
    div#nl footer a.m, section.n aside input[type="submit"] { font-size: 0.9em; }
}

/*  650px  */
@media screen and (max-width: 650px) {

    div#pug div.io { width: 100%; }
    div#pug div.d { width: 100%; bottom: auto; overflow: visible; }

    div#pug > div { overflow: auto; top: 10px; right: 10px; bottom: 10px; left: 10px; }

    div#pug ul#pugthumbs { display: none; }
    div#pug div.io > div > img { display: none; }

    /* News */
    div#nl footer a { margin-right: 0.5em; }

    /* Infographic */
    section.g > a:after { content: normal; }
}

/*  600px */
@media screen and (max-width: 600px) {

    /* News */
    div#nl { width: 95%; }
    section.n footer { width: 95%; }
    section.n aside { display: none; }
}

/*  550px */
@media screen and (max-width: 550px) {

    article.e > section div.smbox { left: -14em; bottom: 2.25em; }
    article.e nav.g ul li a:hover:after { font-size: 0.85em; line-height: 1em; }

    /*  Interactive map  */
    #imap { height: 14em; }
    #imapdata p a { float: none; display: block; }
}

/*  500px  */
@media screen and (max-width: 500px) {

    article.e > section:first-child > div h1, article.e > section h1, article.e div h2, article.e div h3 { font-size: 1.25em; }

    article.e time, article.e h2:first-of-type, article.e h3:first-of-type { font-size: 1em; }

    /* News */
    section.n h1, section.e h1, section.d h1, section.m h1 { font-size: 1.35em; }

    /* World Data Update */
    section.wdu h1, section.wdb h1 { font-size: 1.35em; }
    section.wdu nav a { font-size: 0.9em; width: 26.5%; }
}

/*  450px  */
@media screen and (max-width: 450px) {

    /* News */
    section.n footer a { display: none; }
        section.n footer a.m { display: block; }
}

/*  400px  */
@media screen and (max-width: 400px) {

    article.e > section:first-child > div h1, article.e > section h1 { font-size: 1.15em; }
    article.e div h2 { font-size: 1em; }

    article.e time, article.e h2:first-of-type, article.e h3:first-of-type { font-size: 1em; }

    /*  Manuals  */
    section.m img { width: 75%; float: none; }
    section.m > img { margin: 1em auto; }

    /* World Data Update */
    section.wdb > a img { max-width: 75%; }
    section.wdb > a:last-child img { margin-top: 1.5em; }
}