/*
	--------------------------
	Homepage Styles
	--------------------------
*/

div.arws a span
    { background-color: #fff; }

/*#region  Structure 
--------------------------  */
    
    header
        { margin-bottom: 1.5em; }
    header nav
        { z-index: 10; }

    main > section, main > nav
        { float: left; text-align: left; width: 100%; margin-bottom: 2.2em; padding-bottom: 2.2em; border-bottom: dotted 2px #d1d1d3; }
    main > section:last-child, main > nav:last-child
        { margin-bottom: 0; }

    main > section > h1, main > nav > h1
        { color: #3aa9dc; padding-left: 1.1em; }
    main > section > h1 a, main > nav > h1 a
        { color: #fff; display: inline-block; margin: 0 0 0 1em; background-color: #3aa9dc; padding: 0.15em 0.5em; font-size: 0.6em; line-height: 1.35em; font-family: "museo-sans", arial, sans-serif; font-weight: 300; float: right;
          -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; }
    main > section > h1 a:hover, main > nav > h1 a:hover
        { background-color: #ffa01d; color: #fff; }

    main section.ltst > div:first-child, main nav.sect > ul, main section.cmp > div, main section.cmp > span div, main section.ltst nav
        { max-width: 75em; margin: 0 auto; padding: 0 5%;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

    /*#region  Structure Responsive */
        @media screen and (max-width: 1200px) {
            main section.ltst > div:first-child, main nav.sect > ul, main section.cmp > div, main section.cmp > span div, main section.ltst nav
                { padding: 0 5%; }
        }
        @media screen and (max-width: 820px) {
            header
                { margin-bottom: 0; }
        }
        @media screen and (max-width: 580px) {
            main > section, main > nav
                { margin-bottom: 1.5em; padding-bottom: 1.5em; }
            main > section > h1, main > nav > h1
                { padding-left: 0; }
        }
    /*#endregion */

/*#endregion */

/*#region  Objectives & Future Events
    ---------------------------------  */
    /*#region  Objectives */
        main nav.obvs
            { font-family: "museo-slab", arial, sans-serif; position: relative; background-color: #3aa9dc;
                  background-image: -webkit-gradient(linear, left top, right top, from(#3aaadc), to(#004a99));
                  background-image: -o-linear-gradient(left, #3aaadc, #004A99); background-image: -moz-linear-gradient(left, #3aaadc, #004a99); 
                  background-image: -ms-linear-gradient(left, #3aaadc, #004A99); background-image: linear-gradient(to right, #3aaadc, #004a99);
                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3aaadc', endColorstr='#004a99',GradientType=0 );
                  background-image: -webkit-linear-gradient(left, #3aaadc, #004a99); }

        main nav.obvs > div:first-child
            { text-align: left; overflow: hidden; position: relative; z-index: 2;
              height: 9.375em; margin: 0; }

        main nav.obvs > div:first-child > a,  main nav.obvs > div:first-child > span
            { display: block; color: #fff; font-size: 1.5em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; line-height: 1.35em; overflow: hidden;
              -moz-transition: left ease-in-out .5s; -o-transition: left ease-in-out .5s; -webkit-transition: left ease-in-out .5s; transition: left ease-in-out .5s; }
        main nav.obvs > div:first-child > a > span,  main nav.obvs > div:first-child > span > span
            { display: block; position: relative; top: 50%; margin-left: 1.1em; width: 45%;
              -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
        main nav.obvs > div:first-child > a img,  main nav.obvs > div:first-child > span img
            { position: absolute; top: 0; right: 0; z-index: -1; max-width: none; height: 100%; }

        main nav.obvs div.arws
            { margin-top: 0.865em; } /* Height of container is 9.375 and height of arrow is 7.645 so move down by half the difference */
    /*#endregion */

    /*#region  Future Events */
        main nav.fevts
            { background-color: #004a99; position: relative; 
              background-image: -webkit-gradient(linear, left top, right top, from(#004a99), to(#3aaadc));
              background-image: -o-linear-gradient(left, #004a99, #3aaadc); background-image: -moz-linear-gradient(left, #004a99, #3aaadc); 
              background-image: -ms-linear-gradient(left, #004a99, #3aaadc); background-image: linear-gradient(to right, #004a99, #3aaadc);
              filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004a99', endColorstr='#3aaadc',GradientType=0 );
              background-image: -webkit-linear-gradient(left, #004a99, #3aaadc); }
        main nav.fevts > div:first-child
            { margin: 0; text-align: left; position: relative; height: 9.375em; overflow: hidden; z-index: 2; }

        main nav.fevts > div:first-child > a
            { display: block; color: #fff; font-size: 1.75em; position: absolute; top: 50%; left: 0; width: 100%; height: 5.36em; padding: 0; line-height: 1.35em; background-size: cover; background-repeat: no-repeat; background-position: right;
              -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%);
              -moz-transition: left ease-in-out .5s; -o-transition: left ease-in-out .5s; -webkit-transition: left ease-in-out .5s; transition: left ease-in-out .5s; }
         main nav.fevts > div:first-child > a > span
            { display: block; height: 100%; position: relative; width: 100%; }
        main nav.fevts > div:first-child > a > span > span
            { display: block; margin: 0 1.1em; position: relative; top: 50%;
              -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }

        main nav.fevts > div:first-child > a span span span
            { display: inline-block; font-size: 0.9em; }
        main nav.fevts > div:first-child > a span span span:first-child
            { display: block; font-family: "museo-slab", arial, sans-serif; font-weight: 500; font-size: 1em; }
        main nav.fevts > div:first-child > a span span span:nth-child(3)
            { margin-left: 1em; }
        main nav.fevts > div:first-child > a span span span:nth-child(3):before
            { content: "|"; color: #004a99; margin-right: 1em; }

        main nav.fevts div.arws
            { margin-top: 0.865em; } /* Height of container is 9.375 and height of arrow is 7.645 so move down by half the difference */
    /*#endregion */

    /*#region  Objectives & Future Events Responsive */
        @media screen and (max-width: 950px) {
            main nav.obvs > div:first-child
                { height: 8.5em; }
            main nav.obvs > div:first-child > a, main nav.obvs > div:first-child > span
                { font-size: 1.25em; }
            main nav.fevts > div:first-child > a > span > span
                { font-size: 0.85em; }
        }
        @media screen and (max-width: 795px) {
            main nav.fevts > div:first-child > a
                { font-size: 1.5em; height: 6.25em; }
        }
        @media screen and (max-width: 750px) {
            main nav.obvs > div:first-child
                { height: 7.5em; }
        }
        @media screen and (max-width: 690px) {
            main nav.obvs > div:first-child
                { height: 6em; }
            main nav.fevts > div:first-child
                { height: 7em; }
            main nav.fevts > div:first-child a
                { font-size: 1.25em; }
            main nav.obvs > div:first-child > a, main nav.obvs > div:first-child > span
                { font-size: 1em; }

            main nav.obvs div.arws, main nav.fevts div.arws
                { margin-top: 0.95em; }
            div.arws
                { width: 3.5em; left: auto; right: 0; margin-left: 0; z-index: 3; }
            div.arws a
                { width: 50%; }
            div.arws a span
                { left: -0.45em; }
        }
        @media screen and (max-width: 650px) {
            main nav.fevts > div:first-child > a span span span
                { font-size: 0.8em; }
        }
        @media screen and (max-width: 645px) {
            main nav.fevts > div:first-child > a
                { font-size: 1.1em; }
        }
        @media screen and (max-width: 580px) {
            main nav.obvs > div:first-child, main nav.fevts > div:first-child, main nav.obvs > div:not(:first-child), main nav.fevts > div:not(:first-child), main nav.obvs > div:not(:first-child) a, main nav.obvs > div:not(:first-child) span, main nav.fevts > div:not(:first-child) a
                { height: 6.15em; }
            main nav.obvs > div:first-child a, main nav.obvs > div:first-child span, main nav.fevts > div:first-child a
                { font-size: 1em; }

            main nav.fevts > div:first-child > a > span > span
                { font-size: 1em; }
            main nav.fevts > div:first-child > a span span span
                { font-size: 0.9em; }
            main nav.obvs div.arws, main nav.fevts div.arws
                { margin-top: 0.525em; }
        }
        @media screen and (max-width: 535px) {
            main nav.fevts > div:first-child > a span span span:nth-child(3)
                { display: block; margin-left: 0; }
            main nav.fevts > div:first-child > a span span span:nth-child(3):before
                { display: none; }
        }
        @media screen and (max-width: 500px) {
            main nav.obvs > div:first-child > a img,  main nav.obvs > div:first-child > span img
                { opacity: 0.2; }
            main nav.obvs > div:first-child > a > span, main nav.obvs > div:first-child > span > span
                { width: 75%; }
            main nav.fevts > div:first-child > a
                { background-image: none !important; }
        }
        @media screen and (max-width: 380px) {
            main nav.fevts > div:first-child a
                { width: 100%; padding-right: 0; }
        }
    /*#endregion */

/*#endregion */

/*#region  Events 
    --------------------------  */
    main section.ltst
        { position: relative; }
    main section.ltst div article
        { border-top: solid 5px #3aaadc; float: left; width: 30%; padding-top: 31.5%; margin-left: 2%; margin-bottom: 2%; position: relative; overflow: hidden; cursor: pointer;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    main section.ltst div article:before
        { display: block; content: ""; position: absolute; width: 1.75em; height: 1.75em; right: 6%; top: -1.15em; background-color: #3aaadc; z-index: 5;
          -moz-transform: rotate(23deg) skewX(-45deg); -ms-transform: rotate(23deg) skewX(-45deg); -o-transform: rotate(23deg) skewX(-45deg); -webkit-transform: rotate(23deg) skewX(-45deg); transform: rotate(23deg) skewX(-45deg); }
    main section.ltst div article > div
        { display: block; position: absolute; top: auto; left: 0; bottom: 0; right: 0; background-color: #fff; font-size: 0.9em; padding: 0.5em 1em; background-size: 100% 200%; background-position: 0 0; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#3aaadc 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #3aaadc 50%); background-image: -moz-linear-gradient(left, #fff 50%, #3aaadc 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #3aaadc 50%); background-image: linear-gradient(to right, #fff 50%, #3aaadc 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #3aaadc 50%);
          -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 section.ltst div article:hover > div
        { background-position: 0 -100%; }
    main section.ltst div article img
        { float: left; position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width: none; }
    main section.ltst div article div h1
        { font-size: 1.67em; line-height: 0.8em; margin-bottom: 0.25em; }
    main section.ltst div article div h1 a
        { font-size: 0.8em; }
    main section.ltst div article h2
        { color: #231f20; font-size: 1.25em; }
    main section.ltst div article h2 a
        { color: #231f20; }
    main section.ltst div article h3
        { color: #231f20; font-family: "museo-slab", arial, sans-serif; font-weight: 500; margin-bottom: 0.25em; }
    main section.ltst div article div p
        { margin-bottom: 0; }
    main section.ltst div article p time
        { margin-right: 0.5em; }
    main section.ltst div article div p:last-child
        { display: none; }

    main section.ltst div article:hover > div p, main section.ltst div article:hover > div p time
        { -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; }

    main section.ltst div article:hover > div h1, main section.ltst div article:hover > div h1 a, main section.ltst div article:hover > div h2, main section.ltst div article:hover > div h2 time, main section.ltst div article:hover > div p, main section.ltst div article:hover > div p time
        { color: #fff; }

    /* Main Event */
    main section.ltst div article:first-child
        { margin-left: 0; width: 48%; }
    main section.ltst div article:first-child > div
        { left: 0.5em; bottom: 0.5em; right: 0.5em; opacity: 0.9;
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#3aaadc 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #3aaadc 50%); background-image: -moz-linear-gradient(left, #fff 50%, #3aaadc 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #3aaadc 50%); background-image: linear-gradient(to right, #fff 50%, #3aaadc 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #3aaadc 50%); }
    main section.ltst div article:first-child img
        { min-width: 100%; max-width: 120%; min-height: 100%; max-height: 120%; width: auto; height: auto; }

    /* Colours */
    main section.ltst div article.monthlylecture
        { border-color: #009a96; }
    main section.ltst div article.monthlylecture:before
        { background-color: #009a96; }
    main section.ltst div article.monthlylecture > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#009a96 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #009a96 50%); background-image: -moz-linear-gradient(left, #fff 50%, #009a96 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #009a96 50%); background-image: linear-gradient(to right, #fff 50%, #009a96 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #009a96 50%); }
    main section.ltst div article.monthlylecture h1 a
        { color: #009a96; }

    main section.ltst div article.meetings
        { border-color: #004a99; }
    main section.ltst div article.meetings:before
        { background-color: #004a99; }
    main section.ltst div article.meetings > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#004a99 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #004a99 50%); background-image: -moz-linear-gradient(left, #fff 50%, #004a99 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #004a99 50%); background-image: linear-gradient(to right, #fff 50%, #004a99 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #004a99 50%); }
    main section.ltst div article.meetings h1 a
        { color: #004a99; }

    main section.ltst div article.gassummits
        { border-color: #5e4b95; }
    main section.ltst div article.gassummits:before
        { background-color: #5e4b95; }
    main section.ltst div article.gassummits > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#5e4b95 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #5e4b95 50%); background-image: -moz-linear-gradient(left, #fff 50%, #5e4b95 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #5e4b95 50%); background-image: linear-gradient(to right, #fff 50%, #5e4b95 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #5e4b95 50%); }
    main section.ltst div article.gassummits h1 a
        { color: #5e4b95; }

    main section.ltst div article.exhibitions
        { border-color: #64686a; }
    main section.ltst div article.exhibitions:before
        { background-color: #64686a; }
    main section.ltst div article.exhibitions > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#64686a 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #64686a 50%); background-image: -moz-linear-gradient(left, #fff 50%, #64686a 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #64686a 50%); background-image: linear-gradient(to right, #fff 50%, #64686a 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #64686a 50%); }
    main section.ltst div article.exhibitions h1 a
        { color: #64686a; }

    main section.ltst div article.interviews
        { border-color: #c5c6c8; }
    main section.ltst div article.interviews:before
        { background-color: #c5c6c8; }
    main section.ltst div article.interviews > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#c5c6c8 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #c5c6c8 50%); background-image: -moz-linear-gradient(left, #fff 50%, #c5c6c8 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #c5c6c8 50%); background-image: linear-gradient(to right, #fff 50%, #c5c6c8 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #c5c6c8 50%); }
    main section.ltst div article.interviews h1 a
        { color: #c5c6c8; }

    main section.ltst div article.speech
        { border-color: #fff; }
    main section.ltst div article.speech:before
        { background-color: #fff; }
    main section.ltst div article.speech > div
        { 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#fff 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #fff 50%); background-image: -moz-linear-gradient(left, #fff 50%, #fff 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #fff 50%); background-image: linear-gradient(to right, #fff 50%, #fff 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #fff 50%); }
    main section.ltst div article.speech h1 a
        { color: #fff; }

    /* globalgasoutlooks & Trends */
    main section.ltst div article.membersignin, main section.ltst div article.globalgasoutlook, main section.ltst div article.shorttermmarketreport, main section.ltst div article.longtermstrategy, main section.ltst div article.statisticsbulletin
        { width: 18%; padding-top: 6%; border-top: 0; margin-bottom: 1%; }
    main section.ltst div article.membersignin > div, main section.ltst div article.globalgasoutlook > div, main section.ltst div article.shorttermmarketreport > div, main section.ltst div article.longtermstrategy > div, main section.ltst div article.statisticsbulletin > div
        { padding: 0; 
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    main section.ltst div article.membersignin > div > div, main section.ltst div article.globalgasoutlook > div > div, main section.ltst div article.shorttermmarketreport > div > div, main section.ltst div article.longtermstrategy > div > div, main section.ltst div article.statisticsbulletin > div > div
        { padding: 0.5em 0.75em; }
    main section.ltst div article.membersignin h1, main section.ltst div article.globalgasoutlook h1, main section.ltst div article.shorttermmarketreport h1, main section.ltst div article.longtermstrategy h1, main section.ltst div article.statisticsbulletin h1
        { font-size: 1.45em; line-height: 0.8em; min-height: 0; padding: 0; }
    main section.ltst div article.membersignin h1 a, main section.ltst div article.globalgasoutlook h1 a, main section.ltst div article.shorttermmarketreport h1 a, main section.ltst div article.longtermstrategy h1 a, main section.ltst div article.statisticsbulletin h1 a
        { font-size: 0.8em; }
    main section.ltst div article.membersignin p, main section.ltst div article.globalgasoutlook p, main section.ltst div article.shorttermmarketreport p, main section.ltst div article.longtermstrategy p, main section.ltst div article.statisticsbulletin p
        { font-size: 0.9em; display: none; }

    main section.ltst div article.globalgasoutlook { padding-top: 4%; }

    main section.ltst div article.membersignin
        { padding-top: 6%; margin-bottom: 0; }
    main section.ltst div article.membersignin:before
        { top: -0.85em; }
    main section.ltst div article.membersignin > div
        { border-top: solid 5px #3aaadc; height: 100%; }
    main section.ltst div article.membersignin:hover > div
        { background-position: 0 -100%; }
    main section.ltst div article.membersignin:hover > div h1 a
        { color: #fff; }
    main section.ltst div article.membersignin div p:last-child
        { display: block; }

    main section.ltst div article.shorttermmarketreport:before
        { background-color: #a85999; top: -0.85em; }
    main section.ltst div article.shorttermmarketreport > div
        { border-top: solid 5px #a85999; height: 100%; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#a85999 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #a85999 50%); background-image: -moz-linear-gradient(left, #fff 50%, #a85999 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #a85999 50%); background-image: linear-gradient(to right, #fff 50%, #a85999 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #a85999 50%); }
    main section.ltst div article.shorttermmarketreport h1 a
        { color: #a85999; }
    main section.ltst div article.shorttermmarketreport:hover > div
        { background-position: 0 -100%; }
    main section.ltst div article.shorttermmarketreport:hover > div h1 a
        { color: #fff; }
    
    main section.ltst div article.globalgasoutlook:before
        { background-color: #e85564; top: -0.85em; }
    main section.ltst div article.globalgasoutlook > div
        { border-top: solid 5px #e85564; height: 100%; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#e85564 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #e85564 50%); background-image: -moz-linear-gradient(left, #fff 50%, #e85564 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #e85564 50%); background-image: linear-gradient(to right, #fff 50%, #e85564 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #e85564 50%); 
          -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 section.ltst div article.globalgasoutlook h1 a
        { color: #e85564; }
    main section.ltst div article.globalgasoutlook:hover > div
        { background-position: 0 -100%; }

    main section.ltst div article.longtermstrategy:before
        { background-color: #5e4b95; top: -0.85em; }
    main section.ltst div article.longtermstrategy > div
        { border-top: solid 5px #5e4b95; height: 100%; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#5e4b95 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #5e4b95 50%); background-image: -moz-linear-gradient(left, #fff 50%, #5e4b95 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #5e4b95 50%); background-image: linear-gradient(to right, #fff 50%, #5e4b95 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #5e4b95 50%); 
          -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 section.ltst div article.longtermstrategy h1 a
        { color: #5e4b95; }
    main section.ltst div article.longtermstrategy:hover > div
        { background-position: 0 -100%; }

    main section.ltst div article.statisticsbulletin:before
        { background-color: #004a99; top: -0.85em; }
    main section.ltst div article.statisticsbulletin > div
        { border-top: solid 5px #004a99; height: 100%; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#004a99 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #004a99 50%); background-image: -moz-linear-gradient(left, #fff 50%, #004a99 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #004a99 50%); background-image: linear-gradient(to right, #fff 50%, #004a99 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #004a99 50%); }
    main section.ltst div article.statisticsbulletin h1 a
        { color: #004a99; }

    /*#region  Events Responsive */
        @media screen and (max-width: 1010px) {
            main section.ltst div article.membersignin > div > div, main section.ltst div article.globalgasoutlook > div > div, main section.ltst div article.shorttermmarketreport > div > div, main section.ltst div article.longtermstrategy > div > div, main section.ltst div article.statisticsbulletin > div > div
                { padding-left: 0.5em; padding-right: 0.25em; }
        }
        @media screen and (max-width: 950px) {
            main section.ltst div article.membersignin:before, main section.ltst div article.globalgasoutlook:before, main section.ltst div article.shorttermmarketreport:before, main section.ltst div article.longtermstrategy:before, main section.ltst div article.statisticsbulletin:before
                { width: 1em; }
            main section.ltst div article.membersignin > div > div, main section.ltst div article.globalgasoutlook > div > div, main section.ltst div article.shorttermmarketreport > div > div, main section.ltst div article.longtermstrategy > div > div, main section.ltst div article.statisticsbulletin > div > div
                { padding-top: 0.25em; }
            main section.ltst div article.membersignin h1 a, main section.ltst div article.globalgasoutlook h1 a, main section.ltst div article.shorttermmarketreport h1 a, main section.ltst div article.longtermstrategy h1 a, main section.ltst div article.statisticsbulletin h1 a
                { font-size: 0.7em; line-height: 0.8em; }
        }
        @media screen and (max-width: 900px) {
            main section.ltst div article > div
                { font-size: 0.8em; }
        }
        @media screen and (max-width: 780px) {
            main section.ltst div article, main section.ltst div article:first-child
                { width: 49%; }
            main section.ltst div article > div
                { left: 0.5em; bottom: 0.5em; right: 0.5em; opacity: 0.9; }
            main section.ltst div article img
                { max-height: 120%; max-width: 120%; min-height: 100%; min-width: 100%; width: auto; height: auto; }

            main section.ltst div article.membersignin, main section.ltst div article.globalgasoutlook, main section.ltst div article.shorttermmarketreport, main section.ltst div article.longtermstrategy, main section.ltst div article.statisticsbulletin
                { width: 18.4%; padding-top: 0; margin-bottom: 0; }
            main section.ltst div article.membersignin:before, main section.ltst div article.globalgasoutlook:before, main section.ltst div article.shorttermmarketreport:before, main section.ltst div article.longtermstrategy:before, main section.ltst div article.statisticsbulletin:before
                { width: 1.25em; }
            main section.ltst div article.membersignin h1, main section.ltst div article.globalgasoutlook h1, main section.ltst div article.shorttermmarketreport h1, main section.ltst div article.longtermstrategy h1, main section.ltst div article.statisticsbulletin h1
                { font-size: 1.67em; }
            main section.ltst div article.membersignin > div, main section.ltst div article.globalgasoutlook > div, main section.ltst div article.shorttermmarketreport > div, main section.ltst div article.longtermstrategy > div, main section.ltst div article.statisticsbulletin > div
                { opacity: 1; position: static; min-height: 8em; }
            main section.ltst div article.longtermstrategy
                { margin-left: 0; }
            main section.ltst div article.membersignin > div > div, main section.ltst div article.globalgasoutlook > div > div, main section.ltst div article.shorttermmarketreport > div > div, main section.ltst div article.longtermstrategy > div > div, main section.ltst div article.statisticsbulletin > div > div
                { padding: 1.25em 0.5em 1em 0.5em; }
            main section.ltst div article.membersignin h1 a, main section.ltst div article.globalgasoutlook h1 a, main section.ltst div article.shorttermmarketreport h1 a, main section.ltst div article.longtermstrategy h1 a, main section.ltst div article.statisticsbulletin h1 a
                { font-size: 0.8em; line-height: 1em; }
            main section.ltst div article.membersignin h1 a
                { padding-right: 1em; }
            main section.ltst div article.globalgasoutlook h1 a
                { padding-right: 3em; }
        }
        @media screen and (max-width: 695px) {
            main section.ltst div article.membersignin h1, main section.ltst div article.globalgasoutlook h1, main section.ltst div article.shorttermmarketreport h1, main section.ltst div article.longtermstrategy h1, main section.ltst div article.statisticsbulletin h1
                { font-size: 1.45em; }
        }
        @media screen and (max-width: 650px) {
            main section.ltst div article, main section.ltst div article:first-child
                { padding-top: 50%; width: 100%; margin-left: 0; margin-bottom: 1em; }
            main section.ltst div article img
                { width: 100%; max-width: none; min-height: 0; max-height: none; }
            main section.ltst div article div h1
                { min-height: 0; }
            main section.ltst div article.globalgasoutlook, main section.ltst div article.membersignin, main section.ltst div article.shorttermmarketreport, main section.ltst div article.statisticsbulletin
                { margin-left: 2%; }
        }
        @media screen and (max-width: 600px) {
            main section.ltst.flt div#fltrd article p
                { display: none; }
        }
        @media screen and (max-width: 550px) {
            main section.ltst div article
                { padding-top: 70%; }
            main section.ltst div article.membersignin, main section.ltst div article.globalgasoutlook, main section.ltst div article.shorttermmarketreport, main section.ltst div article.longtermstrategy, main section.ltst div article.statisticsbulletin
                { width: 100%; padding-top: 0; }
            main section.ltst div article.membersignin > div, main section.ltst div article.globalgasoutlook > div, main section.ltst div article.shorttermmarketreport > div, main section.ltst div article.longtermstrategy > div, main section.ltst div article.statisticsbulletin > div
                { min-height: 0; }
            main section.ltst div article.globalgasoutlook, main section.ltst div article.membersignin, main section.ltst div article.shorttermmarketreport, main section.ltst div article.statisticsbulletin
                { margin-left: 0; }
            main section.ltst div article.globalgasoutlook, main section.ltst div article.shorttermmarketreport, main section.ltst div article.longtermstrategy, main section.ltst div article.statisticsbulletin
                { margin-bottom: 1em; }
        }
    /*#endregion */

/*#endregion */

/*#region  Sections
    --------------------------  */
    main nav.sect
        { position: relative; }
    main nav.sect > ul
        { list-style-type: none; padding: 0; }
    main nav.sect > ul li
        { width: 32%; float: left; margin-left: 2%; margin-bottom: 2%; font-family: "museo-slab", arial, sans-serif; font-weight: 700; font-size: 1.15em; }

    main nav.sect > ul li:nth-child(3n+1)
        { margin-left: 0; }
    main nav.sect > ul li a:hover
        { color: #fff; }
    main nav.sect > ul li img
        { float: left; width: 100%; }
    main nav.sect > ul li a span
        { display: block; float: left; padding: 1em; width: 100%; position: relative; background-size: 100% 200%; background-position: 0 0; 
            background-image: -webkit-gradient(linear, left top, right top, from(#fff 50%), to(#ffa01d 50%));
            background-image: -o-linear-gradient(left, #fff 50%, #ffa01d 50%); background-image: -moz-linear-gradient(left, #fff 50%, #ffa01d 50%); 
            background-image: -ms-linear-gradient(left, #fff 50%, #ffa01d 50%); background-image: linear-gradient(to right, #fff 50%, #ffa01d 50%);
            background-image: linear-gradient(to bottom, #fff 50%, #ffa01d 50%); 
            -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;
            -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    main nav.sect > ul li a:hover span
        { background-position: 0 -100%; }

    /*#region  Sections Responsive */
        @media screen and (max-width: 850px) {
             main nav.sect > ul li a
                { font-size: 0.85em; }
        }
        @media screen and (max-width: 720px) {
            main nav.sect > ul li a span
                { padding: 0.5em; }
        }
        @media screen and (max-width: 650px) {
            main nav.sect > ul li
                { width: 49%; line-height: 1em; }
            main nav.sect > ul li:nth-child(3n+1)
                { margin-left: 2%; }
            main nav.sect > ul li:nth-child(2n+1)
                { margin-left: 0; clear: both; }
            main nav.sect > ul li a span
                { padding: 0.75em; }
        }
        @media screen and (max-width: 520px) {
            main nav.sect > ul
                { width: 100%; padding: 0; }
            main nav.sect > ul li
                { margin-bottom: 1em; }
        }
        @media screen and (max-width: 480px) {
            main nav.sect > ul li
                { width: 100%; margin-left: 0; }
            main nav.sect > ul li:nth-child(3n+1)
                { margin-left: 0; }
        }
    /*#endregion */

/*#endregion */

/*#region  Countries Map
    --------------------------  */

    div.map
        { height: 30em; }

    main section.cmp
        { position: relative; }
    main section.cmp > span h1
        { color: #fff; font-size: 1.75em; padding: 0.75em 1.67em 0.75em 2.5em; margin: 0; background: transparent url(/_resources/files/icons/gecf-50-wht.png) no-repeat center left; }
    main section.cmp > div div#cmap
        { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding-bottom: 40% !important; }

    main section.cmp > section#cdsc
        { margin: 0; max-height: 20em; overflow: hidden;
          -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
          -moz-transition: max-height linear .2s; -o-transition: max-height linear .2s; -webkit-transition: max-height linear .2s; transition: max-height linear .2s; }
    main section.cmp > section#cdsc div
        { max-width: 67.5em; margin: 0 auto; padding: 2.2em; overflow: hidden; position: relative; cursor: pointer; background-size: 100% 200%; background-position: 0 0; 
            background-image: -webkit-gradient(linear, left top, right top, from(#f8f9f9 50%), to(#ffa01d 50%));
            background-image: -o-linear-gradient(left, #f8f9f9 50%, #ffa01d 50%); background-image: -moz-linear-gradient(left, #f8f9f9 50%, #ffa01d 50%); 
            background-image: -ms-linear-gradient(left, #f8f9f9 50%, #ffa01d 50%); background-image: linear-gradient(to right, #f8f9f9 50%, #ffa01d 50%);
            background-image: linear-gradient(to bottom, #f8f9f9 50%, #ffa01d 50%); 
            -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 section.cmp > section#cdsc:hover div
        { background-position: 0 -100%; }
    main section.cmp > section#cdsc.c
        { max-height: 0; }
    main section.cmp > section#cdsc.i /* Initlal style is i which has no animation. This stops the box jumping when first opened */
        { max-height: 0; 
          -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
    main section.cmp > section#cdsc div img
        { float: left; margin-right: 2em; }
    main section.cmp > section#cdsc div h1 span
        { font-weight: 100; color: #fff; }
    main section.cmp > section#cdsc div h1.member span
        { color: #3aaadc; }
    main section.cmp > section#cdsc div h1.observer span
        { color: #f4785a; }
    main section.cmp > section#cdsc div p
        { margin-bottom: 0; }

    /*#region  Countries Map Responsive */
        /*@media screen and (max-width: 1225px) {
            main section.cmp > span h1
                { font-size: 1.75em; padding-left: 2.5em; }
        }*/
        @media screen and (max-width: 850px) {
            main section.cmp > section#cdsc div
                { font-size: 0.9em; }
            main section.cmp > h1
                { font-size: 1.5em; }
        }
        @media screen and (max-width: 850px) {
            main section.cmp > section#cdsc div
                { font-size: 0.9em; }
            main section.cmp > h1
                { font-size: 1.5em; }
        }
        @media screen and (max-width: 650px) {
            main section.cmp > span h1    { font-size: 1.25em; background-size: 2em; }
            main section.cmp > section#cdsc div img { width: 20%; }
        }
        @media screen and (max-width: 580px) {
            div.map { height: 15em; }
            main section.cmp > section#cdsc div
                { padding: 1.1em; }
        }
    /*#endregion */
/*#endregion */