*-- Ed's inserted styles -------------------*/ .container3x3-1 { margin: 10px 1.4% 10px 0%; float: left; width: 32%; min-width: 80px; height: 250px; min-height: 195px; background-color: #FFF; font-family: Arial; border: 1px solid #999; } .container3x3-2 { margin: 10px 0% 10px 0%; float: left; width: 32%; min-width: 80px; height: 250px; min-height: 195px; background-color: #FFF; font-family: Arial; border: 1px solid #999; } .container3x3-3 { margin: 10px 0% 10px 1.2%; float: right; width: 32%; min-width: 80px; height: 250px; min-height: 195px; background-color: #FFF; font-family: Arial; border: 1px solid #999; } .header3x3 { background-color: rgb(0, 102, 153); height: 33px; padding: 5px; text-align: center; color: #FFF; padding-top: 15px; font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.4em; font-weight: 500; } .content3x3 { margin-top: 0; overflow: auto; } .text3x3 { padding: 10px 0px 10px 0px; margin: 0px 12px 0px 12px; font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; font-size: 1.01535em !important; line-height: 1.1695em; color: #999; } @media screen and (max-width: 560px) { .container3x3-1,.container3x3-2,.container3x3-3 { /*float: none; --*/ width: 100%; height: auto !important; min-height: 0px !important; } .text3x3 { padding: 10px; } } /*------- end of ed's styles------------------------------*/ /*=RESET STYLES ---------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} /*=HTML5 DISPLAY-ROLE RESET ---------------------------*/ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height:1;} ol, ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after,q:before, q:after {content:'';content: none;} table {border-collapse: collapse;border-spacing: 0;} /*=PAGE STRUCTURE -----------------*/ body {font-family: Arial, Helvetica, sans-serif;color:#999;font-size:100%;background:#fff;border-top:4px solid #0067a4} #logo-print {display:none} #wrap {margin:0 auto;max-width:62.5em;} header[role="banner"] {text-align:center;background:#626367 url(../images/nav-line.png) bottom left repeat-x;} header[role="banner"] #header-inner {display:inline-block;width:100%;background:#fff;} header[role="banner"] #header-inner-sub {margin:0 auto;max-width:61.375em;display:inline-block;width:100%;} #container {float:left;width:100%;} main#container #gutter-frame {margin:0 auto;max-width:61.375em;padding:2em .5625em 1em .5625em} footer[role="contentinfo"] {clear:both;} nav.pagination p i {position:absolute;left:-9999px;} .pagination p a {background-color:#0067A4;display:block;padding:0 .5em;border:none;border-radius:2px} a#go-lft, a#go-rgt {color:#fff;font-size:1.8em;text-decoration:none;} a#go-lft:after {content:'\f060';font-family:'fontawesome';speak: none;} a#go-rgt:after {content:'\f061';font-family:'fontawesome';speak: none;} .pagination p a:hover {background-color:#025181} .introbulletblue{font-size:2.5em; color:#0067A6;} .bluetext{font-size:100%; color:#0067A6;} .clear {clear:both;overflow:hidden;width:0;height:0;} .move, .hide {position:absolute;left:-9999px;} .show {position:relative;left:0;display:inline;} .clear-lft {clear:left} .group:after {visibility:hidden;display:block;content:"";clear:both;height:0;} * html .group {zoom:1;} /* IE6 */ *:first-child+html .group {zoom:1;} /* IE7 */ /*=TYPOGRAPHY -------------*/ h1,h2,h3,h4,h5,h6 {font-family: Arial, Helvetica, sans-serif;font-weight:normal;} h1, h2 {text-transform:uppercase;} h1 {font-size:1em;color:#25519C;margin-bottom:.5em} h2 {font-size:1.2em;font-weight:bold;color:#000;margin-bottom:.5em} h3 {font-size:1em;font-weight:bold;color:#0067a4;margin-bottom:.5em} h4 {font-size:.875em;color:#0067a4;font-weight:bold; margin-top:.75em; margin-bottom:.5em} h5 {font-size:1em;font-weight:bold;padding-bottom:.5em;} h6 {font-size:.8125em;font-weight:bold;color:#5F97EB} sup {vertical-align: super;font-size:80%} b, strong {font-weight:bold;} i, em {font-style:italic;} /*=TYPOGRAPHY -------------*/ /*=NAVIGATION ------------*/ .menu-link {display:none;text-decoration:none;outline:none;float:right;margin:1em;} .menu-link span {text-decoration:none;padding:.5em;color:#fff;background:#000;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;} /* general ul style */ .menu {margin:0 auto;max-width:61.375em;} .menu > ul {float:left;width:100%;background:#626367 url(../images/nav-line.png) bottom left repeat-x;position:relative;z-index:99;top:0} /* first level ul style */ .menu > ul, .menu .menu-sub-inner {} .menu ul li {} .menu ul li a {display:block;text-decoration:none;} .menu > ul > li {text-align:center;float:left} .menu > ul > li > a {text-transform:uppercase;font-weight:bold;padding:.8125em 0;font-size:.75em;color:#fff;line-height:1;border-left:1px solid transparent;border-right:1px solid transparent;} .menu ul li li {text-transform:none;font-weight:normal;text-align:left} .menu ul > li:hover {color:#fff;background:#0067a4;} .menu ul > li:hover a {border-color:#fff;border-bottom-color:#0067a4} .menu > ul > li > a:hover {color:#fff;background-color:#0067a4;border-color:#a6c8e1;border-bottom-color:#a6c8e1} .menu li a i {position:absolute;left:-9999px;} /*Move Home label*/ .menu a.home {padding:.6em .8125em} .menu a.home:after {content:'\f015';font-family:'fontawesome';speak:none;font-size:1.4em} /*Home icon*/ .menu figure img {display:block;margin-top:.5em;border:3px solid #fff;max-width:100%;height:auto !important} /* body#home li.tab1 a {color:#a6c8e1} */ body#home li.tab1 a:hover {color:#fff;border-color:#fff; background:#0067a4;border-bottom-color:#fff} body#home li.tab1 a, body#about li.tab2 a, body#sectorsa li.tab3 a, body#businesses li.tab4 a, body#sustainability li.tab5 a, body#careers li.tab6 a, body#ir li.tab7 a, body#bus li.tab8 a, body#corporate li.tab9 a, body#newsa li.tab10 a, body#contact li.tab11 a {background:#0067a4;border-color:#fff;border-bottom-color:#0067a4} body#home li.tab1 a {background:#0067a4;border-color:#fff;border-bottom-color:#fff;} .menu li.tab1 a:hover, .menu li.tab1:hover {color:#a6c8e1;background:#0067a4;border-color:#fff;border-bottom-color:#fff} /*.menu li.tab10 a:hover, .menu li.tab10:hover {color:#fff;border:transparent;background-color:transparent !important}*/ .menu li.menu-tab a:hover {background:#0067a4;border-color:#a6c8e1;border-bottom-color:#fff} .tab1 {width:5%;} .tab2 {width:9%;} .tab3 {width:9%;} .tab4 {width:9%;} .tab5 {width:12%;} .tab6 {width:8%;} .tab7 {width:6%;} .tab8 {width:13%;} .tab9 {width:13%;} .tab10 {width:8%;} .tab11 {width:8%;} .menu p {font-size:.75em;line-height:1.5;padding-left:.5em;} /* sub-menu */ .menu .menu-sub {display:none;position:absolute;left:0;background:#0067a6;width:99.796334%;border:1px solid #a6c8e1;min-height:324px; border-top: 0;} /*980 divide 982 = 99.796334%*/ /*.menu .menu-sub {display:none;position:absolute;left:0;background:#0067a6;width:99.796334%; border-left:1px solid #a6c8e1;border-right:1px solid #a6c8e1;border-bottom:1px solid #a6c8e1;min-height:324px}*/ /*980 divide 982 = 99.796334%*/ body#home .menu .menu-sub {min-height:296px} .menu .menu-sub-inner ul {background:#0067a6;} .menu ul li:hover > .menu-sub {display:block;} .menu .menu-sub-inner ul {margin-bottom:0} .menu .menu-sub-inner > div {width:23%;float:left;text-align:left;padding-left:1%;padding-right:1%;margin-top:.5em} .menu .menu-sub-inner > div a {color:#fff;line-height:1.6; padding:.25em 0;background:transparent;padding-left:0 !important} .menu .menu-sub-inner > div li a {border-bottom:1px solid #1975ad !important} .menu .menu-sub h4 {font-size:1em;padding:.5em;background:#025181;color:#fff;} .menu .menu-sub-inner > div a:hover {color:#000;text-decoration:underline;background-color:transparent} .menu .menu-sub-inner li {position:relative;padding-left:.5em;font-size:.75em;background:transparent !important;} .menu .menu-sub-inner a {border:none !important} /* breadcrumb */ #breadcrumb {color:#fff;background:#0067a4;border-bottom:1px solid #fff;padding:.5em 0;} #breadcrumb .gutter {margin:0 auto;max-width:61.375em;} #breadcrumb p {font-size:.75em;} /*=HEADER CONTENT -----------------*/ header[role="banner"] h1 {text-indent:-9999px;background:#fff url(../images/Group-Five-logo.png) top left no-repeat;float:left;width:238px;height:56px;margin:1.5em 0 1.2em .5626em} header[role="banner"] h1 a {display:block;width:238px;height:56px;overflow:hidden;} header[role="banner"] #logo-print {display:none} header[role="banner"] #utility {float:right;width:60%;} /**/ header[role="banner"] #utility #tipoffs {float:left;width:44%;margin-top:.5em;text-align:left;font-size:.875em} header[role="banner"] #utility #tipoffs .phone-box {padding:.75em;border:1px solid #e4e4e4;-webkit-border-radius:9px;-moz-border-radius:9px;-ms-border-radius:9px;-o-border-radius:9px;border-radius:9px;} header[role="banner"] #utility #tipoffs .phone-box p.phone:before {content:'\f098';font-family:'fontawesome';speak: none;padding-right:.25em;color:#f30} header[role="banner"] #utility #tipoffs p.phone {font-size:1.5625em;font-weight:bold;margin:.25em 0 0 0} header[role="banner"] #utility #tools {float:right;width:35%;margin-top:.5em} /**/ header[role="banner"] #utility #tools ul {float:right;} header[role="banner"] #utility #tools ul.icons ul {width:9em;} header[role="banner"] #utility #tools ul.icons li {float:left;text-align:center;font-size:1.25em;line-height:1;} header[role="banner"] #utility #tools ul.icons li:last-of-type a {padding-right:0} header[role="banner"] #utility #tools ul.icons li a {display:block;padding:.25em .5em;color:#a6c8e1} header[role="banner"] #utility #tools ul.icons li a:hover {color:#0067a4} header[role="banner"] #utility #search {position:relative;margin-top:0} header[role="banner"] #utility #search input {width:100%;padding:.5em 0;border-width:0;border:1px solid #e4e4e4;} header[role="banner"] #utility #search .fa-search {position:absolute;top:.5em;right:.5em;font-size:15px;color:#d0d0d0} /*=HOMEPAGE -----------*/ #slider-container {background:#e4e4e4;} .slider {margin:0 auto;max-width:61.375em} /*max-width:61.375em*/ .slider ul {margin:0 auto;} .slider-content {position:absolute;top:0;bottom:0;height:8%;right:6%;width:45%;margin:auto 0;color:#fff;top:-32px} .slider-content .gutter {padding:1em;margin:.5em;background:rgba(0,0,0,.4);} .slider-content .gutter2 {padding:1em;margin:.5em;background:#0066A4;} .slider-content h3 {font-size:1.6em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:1.5em;color:#fff;line-height:1.2} #reporting {margin:1.75em 0 1.5em 0} #reporting .gutter {margin:0 auto;max-width:61.375em;padding:0} #reporting .financials h2 {color:#0067a4;padding-bottom:.5em;border-bottom:1px solid #bfd9e8;} #reporting .financials ul li {font-size:.75em;margin-bottom:.5em;width:100%;} #reporting .financials ul li a {display:block;padding:.5em 1em .5em 1em;background:#ddd; text-decoration:none} #reporting .financials ul li a:hover {color:#fff;background:#0067a4} #reporting .share-graph {box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);} #reporting .share-graph .share-head {margin:.25em;vertical-align:bottom;border-bottom:1px solid #cbcbcb} #reporting .share-graph .share-head h2, #reporting .share-graph .share-head p {display:inline-block} #reporting .share-graph .share-head p {color:#000;text-align:right;} #reporting .share-graph figure img {padding:1em 0;margin:0 auto;} .grid3-a, .grid3-b, .grid3-c {float:left;width:28.7535642%;margin-right:4.5%;background:#fff; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);min-height: 23.9375em;} /*302 divide 982 = 30.7535642%, 38 divide 982 = 3.8696538%*/ .grid3-a, .grid3-b ,.grid3-c {padding: .25em} .last {margin-right:0} #news {background:#e4e4e4 url(../images/box-line.png) top left repeat-x;margin-bottom:2.5em;} #news .gutter {margin:0 auto;max-width:61.375em;padding:0 .5625em} #news .gutter h2 {font-weight:bold;font-size:2.1em;margin-top:1.1em;} #news .news-company {float:left;width:49.898167%;} /*490 divide 982 = 49.898167%*/ #news .news-company p i {margin-left:2em;margin-right:.5em;background:#ff7900;color:#fff;padding:.25em .4em;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;} #news .news-company h2 {color:#0066a4;} #news .news-company li {margin-bottom:1.1875em;position:relative;} #news .news-company li .news-intro {position:absolute;bottom:3px;left:127px;border-bottom:1px dotted #797979} #news .news-company li .news-intro h3 {font-size:1.2em;font-weight:bold;color:#000;line-height:1.2} #news .news-company li .news-intro p {font-size:1em;} #news .news-company li .news-intro span {width:8em;display:inline-block;} #news .news-company li img {margin-right:.8125em;} #news .news-company li a.img-link img {border:3px solid #fff} #news .news-company li a.img-link:hover img {border-color:#0067a4;} #news .news-media {float:right;width:40.9368635%;} /*402 divide 982 = 40.9368635%*/ #news .news-media h2 {color:#545454;text-align:right} #news .news-media p {text-align:right} #news .news-media ul li {text-align:right;padding:.5625em 0;border-bottom:1px dotted #797979} #associations {margin:0 auto;max-width:61.375em;border:1px solid #ccc;margin-bottom:2.5em;padding:.5em 0;box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.2);width:98.2%;} /*982 divide 1000 = 98.2%*/ #associations ul {width:98%;margin:0 auto;} #associations ul li {float:left;line-height:122px;text-align:center;} #associations ul li img {vertical-align:middle;display:inline-block;max-width:100%; height:auto !important} #associations li.logo1 {width:20%} #associations li.logo2 {width:26%} #associations li.logo3 {width:22%} #associations li.logo4 {width:30%} #associations li.logo5 {width:24%} /*=BODY CONTENT ---------------*/ main[role="main"] p {font-size:.8125em;margin-bottom:1em;line-height:1.4} main[role="main"] ul, main[role="main"] ol {margin-bottom:.5em;} main[role="main"] li {font-size:.8125em;line-height:1.2;} main[role="main"] li li, main[role="main"] li p {font-size:100%} main[role="main"] li h4 {font-size:100%} ul.list {list-style:disc;margin-left:1.75em} ul.list li, ol.list li {padding-bottom:.5em;} ul.list ul {margin-left:1.5em;list-style:circle} ol.list {list-style:decimal;margin-left:2.5em} li.pdf:before {content:'\f1c1';font-family:'FontAwesome';speak: none;} ul.intro li {line-height:1.9} ul.list-icons {margin-left:0.25em; } ul.list-icons li {line-height:1.6;margin-left:1.1em; margin-right:0.1em} ul.list-icons i {font-size:120%;padding-right:.2em;margin-left:-1.15em} ul.docs li {margin-left:0;} ul.docs i {margin-left:.2em; padding-right:.5em;} ul.list-icons ul {list-style:circle} .grid2-a {float:left;width:48%;display:inline;margin-right:1%;} .grid2-b {float:right;width:48%;display:inline;margin-left:1%;} .rgt {float:right;margin-left:1em; margin-top: 15px;} .lft {float:left; margin-top: 15px;} .obj-c {margin-left:auto;margin-right:auto;display:block;text-align:center} #container figure img {display:block;max-width:100%;height:auto !important} .container{margin: 0 auto;} .container img{ max-width:100%; /* img is responsive thanks to it*/ display:block; /*imgs are inline element, to center it I need to swtich to the block display mode*/ margin: 0 auto; /*center the image correctly*/} .container2{margin: 0 auto;} .container2 img{ max-width:100%; /* img is responsive thanks to it*/ display:block; /*imgs are inline element, to center it I need to swtich to the block display mode*/ } .img-border {border:1px solid #d7d7d7} #page-banner {background:#edece8} #page-banner figure {margin:0 auto;max-width:61.375em;position:relative;overflow:hidden;} #page-banner figcaption {position:absolute;bottom:0;width:100%;padding:.5em 0;font-size:.875em;text-align:right;color:#fff;font-style:italic;background:rgba(0,0,0,0.5);} #page-banner figcaption span {padding-right:1em} div#intro {font-weight:bold;color:#0067a4;padding-bottom:.25em;margin-bottom:2em;border-bottom:1px solid #ccc;} div#intro-new {color:#0067a4;padding-bottom:.10em;/* margin-bottom: 2em; */border-bottom:1px solid #ccc;font-size: 1.7em; } div#intro-new span{color:#0067a4;padding-bottom:.10em;/* margin-bottom: 2em;border-bottom:1px solid #ccc; */font-size: 33px;text-align: justify;} figure#structure-container {padding:1em 0;margin-bottom:1em;background-color:#fff} figure#sectors {padding:1em 0;margin-bottom:1em;background-color:#fff} .vision-animation {display:block; } .vision-text {display:none; } .vision-heading {padding:4px; background-color: #0067A6; color:#fff; font-size:1.0em; margin:5px 0px 3px 0px; } .vision-text-block {padding:4px; background-color: #CCCCCC; color:#444; font-size:0.83em; margin-bottom:5px; padding:7px; } .vision-text-intro {padding:4px; background-color: #808184; color:#fff; font-size:1.0em; margin-bottom:5px; padding:7px; } /* Added by Sean */ ul.team li {float:left;font-size:100%} /*219 divide 944 = 23.19915%, 13.6 divide 944 = 1.44067%*/ ul.team li {width:28.5714286%;margin-left:3.5714286%;} ul.team li.team4, ul.team li.team7, ul.team li.team10, ul.team li.team13, ul.team li.team16 {clear:both} ul.team li.team3, ul.team li.team6, ul.team li.team9, ul.team li.team12, ul.team li.team15, ul.team li.team18 {margin-right:3.5714286%} ul.team li article {padding:1em} ul.team li article h3 {font-size:.75em;color:#0067a4; margin-top:.5em;} ul.team li article h4 {font-size:.80em;color:#7c7c7c; margin-bottom:1em;} ul.team li article h5 {font-size:.68em;color:#000; font-weight:normal} ul.team li article p {font-size:.8125em;} ul.team li a {display:block;overflow:hidden;outline:none;text-decoration:none;color:#636363} ul.team li:hover {box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} ul.team li header {text-align:center} ul.team li header img {margin:0 auto} .cols2block1 {float:left; width:48%; margin-top: 1em; margin-right: 1%; } .cols2block2 {float:right;width:48%; margin-top: 1em; } .cols2block60 {float:left; width:58%; margin-top: 1em; margin-right: 1%; } .cols2block40 {float:right;width:38%; margin-top: 1em; } .cols2block1One3rd {float:left; width:31%; margin-top: 1em; margin-right: 1%; } .cols2block2Two3rd, .cols2block2Two3rdHead {float:right;width:62%; margin-top: 1em; } .cols2block1Two3rd {float:left; width:62%; margin-top: 1em; margin-right: 2%; } .cols2block2One3rd, .cols2block2One3rdHead {float:right;width:33%; margin-top: 1em; text-align:right} .descrip-width {width: 100px; } .cols2block1fin {float:left; width:99%; margin-top: 1em; margin-right: 2%; } .floatRightOneThird {float:right; width:30%; margin-top: 1em; margin-bottom: .8em; margin-left: 2%; } .floatLeftOneThird {float:left; width:30%; margin-top: 1em; margin-bottom: .8em; margin-right: 2%; } .floatLeftOneQuarter {float:left; width:24%; margin-top: 1em; margin-bottom: .8em; margin-right: 2%; } .headingFloat h2 {color:#0965AD; border-top:1px solid #939185; border-bottom: 2px solid #BDBBB6; margin-bottom:.5em;padding:.5em 0;text-transform:uppercase;} .headingFloat h2 i {color:#B1AFA8;font-style:normal;} .headingFloatNoBorder h2 {color:#0965AD; margin-bottom:.5em;padding:.5em 0;text-transform:normal;font-size:1.3125em;color:#005DAA} .headingFloatNoBorder h2 i {color:#B1AFA8;font-style:normal;padding-top:.5em;} .cols3block1 {float:left; width:31.2%; margin-right: 1.5%; } .cols3block2 {float:left; width:31.2%; margin-right: 1.5%; border-left: 1px solid #CCC;border-right: 1px solid #CCC; } .cols3block3 {float:left; width:31.2%; } .cols4block1 {float:left; width:23%; margin-right: 1.5%;} .cols4block2 {float:left; width:23%; margin-right: 1.5%;} .cols4block3 {float:left; width:23%; margin-right: 1.5%;} .cols4block4 {float:left; width:23%;} .colouredBlock {background:#EEEFF1; } .tableHeadBG{background-color: #0067A4; color:#fff; } ul.blocks-six { margin: 0 auto; width: 100%; } ul.blocks-six li { background: url("../images/sector-borders.png") repeat-y scroll left top, url("../images/sector-borders.png") repeat-y scroll right top, url("../images/sector-borders.png") repeat-x scroll left top, url("../images/sector-borders.png") repeat-x scroll left bottom rgba(0, 0, 0, 0); color: #fff; display: block; float: left; overflow: hidden; width: 16.66%; background-color: #0067a4; min-height: 180px; position: relative; } ul.blocks-six li h3 { background-color: transparent; background-image: url("../images/sector-numbers.png"); background-position: center top; background-repeat: no-repeat; color: #fff; font-size: 0.95em; line-height: 1.4; font-weight: bold; margin: 0.5em 0.5em 0; padding: 75px 10px 15px 10px; text-align: center; } ul.blocks-six li h3#blocks-six-1 { background-position: 50% 10px; } ul.blocks-six li h3#blocks-six-2 { background-position: 50% -140px; } ul.blocks-six li h3#blocks-six-3 { background-position: 50% -290px; } ul.blocks-six li h3#blocks-six-4 { background-position: 50% -440px; } ul.blocks-six li h3#blocks-six-5 { background-position: 50% -590px; } ul.blocks-six li h3#blocks-six-6 { background-position: 50% -740px; } /*=SECTORS ----------*/ #g5-blocks {margin:0 auto;max-width:61.125em;position:relative;margin-bottom:1em;background:#eee;padding:2px} #g5-blocks h2 {position:absolute;top:27px;left:27px;z-index:9;color:#0067a4;font-size:2.8em;font-weight:bold;margin-top:0;padding-top:0;} ul#blocks {width:100%;margin:0 auto} ul#blocks li {width:25%;display:block;float:left;color:#fff;overflow:hidden;background: url(../images/sector-borders.png) top left repeat-y, url(../images/sector-borders.png) top right repeat-y, url(../images/sector-borders.png) top left repeat-x, url(../images/sector-borders.png) bottom left repeat-x} /*245.5 divide 978 = 25%*/ ul#blocks li.block4, body#home ul#blocks li.block8 {margin-right:0 !important} ul#blocks li.block1 {background-color:#ddddd5;} ul#blocks li {position:relative;min-height:244px;background-color:#0067a4;} ul#blocks li div.block-content {position:absolute;top:60px;left:0;color:#fff;width:100%;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease} ul#blocks li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#blocks.sectors li h3 {background-image:url(../images/sector-numbers.png);} ul#blocks.sustainability li h3 {background-image:url(../images/structure-icons.png);} ul#blocks.vision li h3 {background-image:url(../images/vision-icons.png);} ul#blocks li h3#head-1 {background-position:50% 0} ul#blocks li h3#head-2 {background-position:50% -150px} ul#blocks li h3#head-3 {background-position:50% -300px} ul#blocks li h3#head-4 {background-position:50% -450px} ul#blocks li h3#head-5 {background-position:50% -600px} ul#blocks li h3#head-6 {background-position:50% -750px} ul#blocks li h3#head-7 {background-position:50% -900px} ul#blocks li:hover, ul#blocks li:focus {background:#333;} ul#blocks li:first-of-type:hover, ul#blocks li:first-of-type:focus {background:#ddddd5;} ul#blocks li:hover div.block-content, ul#blocks li:focus div.block-content {top:0;height:100%;} ul#blocks li:hover div.block-content h3, ul#blocks li:focus div.block-content h3 {text-align:left;padding:20px 0 20px 64px;background-position:left center;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} /*remove this transition for number animation*/ ul#blocks li:hover div.block-content h3#head-1, ul#blocks li:focus div.block-content h3#head-1 {background-position:0% 0;} ul#blocks li:hover div.block-content h3#head-2, ul#blocks li:focus div.block-content h3#head-2 {background-position:0% -150px;} ul#blocks li:hover div.block-content h3#head-3, ul#blocks li:focus div.block-content h3#head-3 {background-position:0% -300px;} ul#blocks li:hover div.block-content h3#head-4, ul#blocks li:focus div.block-content h3#head-4 {background-position:0% -450px;} ul#blocks li:hover div.block-content h3#head-5, ul#blocks li:focus div.block-content h3#head-5 {background-position:0% -600px;} ul#blocks li:hover div.block-content h3#head-6, ul#blocks li:focus div.block-content h3#head-6 {background-position:0% -750px;} ul#blocks li:hover div.block-content h3#head-7, ul#blocks li:focus div.block-content h3#head-7 {background-position:0% -900px;} ul#blocks li div.block-content div.sector-copy {opacity:0;height:100%;bottom:-100px;color:#b3d3e2;} ul#blocks li:hover div.block-content div.sector-copy, ul#blocks li:focus div.block-content div.sector-copy {opacity:1;bottom:0;color:#ccc;} ul#blocks li div.block-content div.sector-copy p {font-size:.9em;padding:0 1em;} ul#blocks li div.block-content div.sector-copy p.more-button {margin-bottom:0} ul#blocks li div.block-content div.sector-copy p.more-button a {display:block;background:transparent url(../images/arrow.png) top left no-repeat;width:17px;height:11px;} /*=SECTORS ----------*/ #sector-focus {margin:0 auto;max-width:61.125em;position:relative;margin-bottom:1em;background:#eee;padding:2px} #sector-focus h2 {position:absolute;top:70px;left:27px;z-index:9;color:#0067a4;font-size:2.4em;font-weight:bold;margin-top:0;padding-top:0;} /*#sector-focus span {position:absolute;top:27px;left:27px;z-index:9;color:#0067a4;font-size:2.0em;font-weight:bold;margin-top:0;padding-top:0;text-transform:uppercase;}*/ ul#sectors {width:100%;margin:0 auto} ul#sectors li {width:25%;display:block;float:left;color:#fff;overflow:hidden;background: url(../images/sector-borders.png) top left repeat-y, url(../images/sector-borders.png) top right repeat-y, url(../images/sector-borders.png) top left repeat-x, url(../images/sector-borders.png) bottom left repeat-x} /*245.5 divide 978 = 25%*/ ul#sectors li.block4, body#home ul#sectors li.block8 {margin-right:0 !important} ul#sectors li.block1 {background-color:#ddddd5;} ul#sectors li {position:relative;min-height:244px;background-color:#0067a4;} ul#sectors li div.block-content {position:absolute;top:60px;left:0;color:#fff;width:100%;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease} ul#sectors li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-image:url(../images/sector-numbers.png);background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#sectors li h3#sf-1 {background-position:50% 0} ul#sectors li h3#sf-2 {background-position:50% -150px} ul#sectors li h3#sf-3 {background-position:50% -300px} ul#sectors li h3#sf-4 {background-position:50% -450px} ul#sectors li h3#sf-5 {background-position:50% -600px} ul#sectors li h3#sf-6 {background-position:50% -750px} ul#sectors li h3#sf-7 {background-position:50% -900px} ul#sectors li:hover, ul#sectors li:focus {background:#333;} ul#sectors li:first-of-type:hover, ul#sectors li:first-of-type:focus {background:#ddddd5;} ul#sectors li:hover div.block-content, ul#sectors li:focus div.block-content {top:0;height:100%;} ul#sectors li:hover div.block-content h3, ul#sectors li:focus div.block-content h3 {text-align:left;padding:20px 0 20px 64px;background-position:left center;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} /*remove this transition for number animation*/ ul#sectors li:hover div.block-content h3#sf-1, ul#sectors li:focus div.block-content h3#sf-1 {background-position:0% 0;} ul#sectors li:hover div.block-content h3#sf-2, ul#sectors li:focus div.block-content h3#sf-2 {background-position:0% -150px;} ul#sectors li:hover div.block-content h3#sf-3, ul#sectors li:focus div.block-content h3#sf-3 {background-position:0% -300px;} ul#sectors li:hover div.block-content h3#sf-4, ul#sectors li:focus div.block-content h3#sf-4 {background-position:0% -450px;} ul#sectors li:hover div.block-content h3#sf-5, ul#sectors li:focus div.block-content h3#sf-5 {background-position:0% -600px;} ul#sectors li:hover div.block-content h3#sf-6, ul#sectors li:focus div.block-content h3#sf-6 {background-position:0% -750px;} ul#sectors li:hover div.block-content h3#sf-7, ul#sectors li:focus div.block-content h3#sf-7 {background-position:0% -900px;} ul#sectors li div.block-content div.sector-copy {opacity:0;height:100%;bottom:-100px;color:#b3d3e2;} ul#sectors li:hover div.block-content div.sector-copy, ul#sectors li:focus div.block-content div.sector-copy {opacity:1;bottom:0;color:#ccc;} ul#sectors li div.block-content div.sector-copy p {font-size:.9em;padding:0 1em;} ul#sectors li div.block-content div.sector-copy p.more-button {margin-bottom:0} ul#sectors li div.block-content div.sector-copy p.more-button a {display:block;background:transparent url(../images/arrow.png) top left no-repeat;width:17px;height:11px;} .nav {display:block;background:transparent url(../images/arrow.png) top left no-repeat; left:10px} /* sustainability ----*/ #sustainability-focus {margin:0 auto;max-width:61.125em;position:relative;margin-bottom:1em;background:#eee;padding:2px} #sustainability-focus h2 {position:absolute;top:27px;left:27px;z-index:9;color:#0067a4;font-size:2.8em;font-weight:bold;margin-top:0;padding-top:0;} #sustainability-focus span {position:absolute;top:27px;left:27px;z-index:9;color:#0067a4;font-size:2.0em;font-weight:bold;margin-top:0;padding-top:0;text-transform:uppercase;} ul#sustainability {width:100%;margin:0 auto} ul#sustainability li {width:25%;display:block;float:left;color:#fff;overflow:hidden;background: url(../images/sector-borders.png) top left repeat-y, url(../images/sector-borders.png) top right repeat-y, url(../images/sector-borders.png) top left repeat-x, url(../images/sector-borders.png) bottom left repeat-x} /*245.5 divide 978 = 25%*/ ul#sustainability li.block4, body#home ul#sustainability li.block8 {margin-right:0 !important} ul#sustainability li.block1 {background-color:#ddddd5;} ul#sustainability li {position:relative;min-height:244px;background-color:#0067a4;} ul#sustainability li div.block-content {position:absolute;top:60px;left:0;color:#fff;width:100%;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease} ul#sustainability li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-image:url(../images/structure-icons.png);background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#vision li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-image:url(../images/vision-icons.png);background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#sustainability li h3#head-1 {background-position:50% 0} ul#sustainability li h3#head-2 {background-position:50% -150px} ul#sustainability li h3#head-3 {background-position:50% -300px} ul#sustainability li h3#head-4 {background-position:50% -450px} ul#sustainability li h3#head-5 {background-position:50% -600px} ul#sustainability li h3#head-6 {background-position:50% -750px} ul#sustainability li h3#head-7 {background-position:50% -900px} ul#sustainability li:hover, ul#sectors li:focus {background:#333;} ul#sustainability li:first-of-type:hover, ul#sustainability li:first-of-type:focus {background:#ddddd5;} ul#sustainability li:hover div.block-content, ul#sustainability li:focus div.block-content {top:0;height:100%;} ul#sustainability li:hover div.block-content h3, ul#sustainability li:focus div.block-content h3 {text-align:left;padding:20px 0 20px 64px;background-position:left center;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} /*remove this transition for number animation*/ ul#sustainability li:hover div.block-content h3#head-1, ul#sustainability li:focus div.block-content h3#sf-1 {background-position:0% 0;} ul#sustainability li:hover div.block-content h3#head-2, ul#sustainability li:focus div.block-content h3#sf-2 {background-position:0% -150px;} ul#sustainability li:hover div.block-content h3#head-3, ul#sustainability li:focus div.block-content h3#sf-3 {background-position:0% -300px;} ul#sustainability li:hover div.block-content h3#head-4, ul#sustainability li:focus div.block-content h3#sf-4 {background-position:0% -450px;} ul#sustainability li:hover div.block-content h3#head-5, ul#sustainability li:focus div.block-content h3#sf-5 {background-position:0% -600px;} ul#sustainability li:hover div.block-content h3#head-6, ul#sustainability li:focus div.block-content h3#sf-6 {background-position:0% -750px;} ul#sustainability li:hover div.block-content h3#head-7, ul#sustainability li:focus div.block-content h3#sf-7 {background-position:0% -900px;} ul#sustainability li div.block-content div.sustainability-copy {opacity:0;height:100%;bottom:-100px;color:#b3d3e2;} ul#sustainability li:hover div.block-content div.sustainability-copy, ul#sustainability li:focus div.block-content div.sustainability-copy {opacity:1;bottom:0;color:#ccc;} ul#sustainability li div.block-content div.sustainability-copy p {font-size:.9em;padding:0 1em;} ul#sustainability li div.block-content div.sustainability-copy p.more-button {margin-bottom:0} ul#sustainability li div.block-content div.sustainability-copy p.more-button a {display:block;background:transparent url(../images/arrow.png) top left no-repeat;width:17px;height:11px;} /* end sustainability ----*/ /* vision ----*/ #vision-focus {margin:0 auto;max-width:61.125em;position:relative;margin-bottom:1em;background:#eee;padding:2px} #vision-focus h2 {position:absolute;top:100px;left:27px;z-index:9;color:#0067a4;font-size:2.8em;font-weight:bold;margin-top:0;padding-top:0;} #vision-focus span {position:absolute;top:27px;left:27px;z-index:9;color:#0067a4;font-size:2.0em;font-weight:bold;margin-top:0;padding-top:0;text-transform:uppercase;} ul#vision {width:100%;margin:0 auto} ul#vision li {width:25%;display:block;float:left;color:#fff;overflow:hidden;background: url(../images/sector-borders.png) top left repeat-y, url(../images/sector-borders.png) top right repeat-y, url(../images/sector-borders.png) top left repeat-x, url(../images/sector-borders.png) bottom left repeat-x} /*245.5 divide 978 = 25%*/ ul#vision li.block4, body#home ul#vision li.block8 {margin-right:0 !important} ul#vision li.block1 {background-color:#ddddd5; vertical-align:middle;} ul#vision li {position:relative;min-height:244px;background-color:#0067a4;} ul#vision li div.block-content {position:absolute;top:60px;left:0;color:#fff;width:100%;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease} ul#vision li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-image:url(../images/structure-icons.png);background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#vision li h3 {font-size:1.6em;font-weight:bold;color:#fff;padding-top:74px;margin:.5em .5em 0 .5em;text-align:center;background-image:url(../images/vision-icons.png);background-repeat:no-repeat;background-color:transparent;background-position:top center } ul#vision li h3#head-1 {background-position:50% 0} ul#vision li h3#head-2 {background-position:50% -150px} ul#vision li h3#head-3 {background-position:50% -300px} ul#vision li h3#head-4 {background-position:50% -450px} ul#vision li h3#head-5 {background-position:50% -600px} ul#vision li h3#head-6 {background-position:50% -750px} ul#vision li h3#head-7 {background-position:50% -900px} ul#vision li:hover, ul#sectors li:focus {background:#78d3fb;} ul#vision li:first-of-type:hover, ul#vision li:first-of-type:focus {background:#ddddd5;} ul#vision li:hover div.block-content, ul#vision li:focus div.block-content {top:0;height:100%;} ul#vision li:hover div.block-content h3, ul#vision li:focus div.block-content h3 {text-align:left;padding:20px 0 20px 64px;background-position:left center;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} /*remove this transition for number animation*/ ul#vision li:hover div.block-content h3#head-1, ul#vision li:focus div.block-content h3#sf-1 {background-position:0% 0;} ul#vision li:hover div.block-content h3#head-2, ul#vision li:focus div.block-content h3#sf-2 {background-position:0% -150px;} ul#vision li:hover div.block-content h3#head-3, ul#vision li:focus div.block-content h3#sf-3 {background-position:0% -300px;} ul#vision li:hover div.block-content h3#head-4, ul#vision li:focus div.block-content h3#sf-4 {background-position:0% -450px;} ul#vision li:hover div.block-content h3#head-5, ul#vision li:focus div.block-content h3#sf-5 {background-position:0% -600px;} ul#vision li:hover div.block-content h3#head-6, ul#vision li:focus div.block-content h3#sf-6 {background-position:0% -750px;} ul#vision li:hover div.block-content h3#head-7, ul#vision li:focus div.block-content h3#sf-7 {background-position:0% -900px;} ul#vision li div.block-content div.vision-copy {opacity:0;height:100%;bottom:-100px;color:#b3d3e2;} ul#vision li:hover div.block-content div.vision-copy, ul#vision li:focus div.block-content div.vision-copy {opacity:1;bottom:0;color:#FFF;} ul#vision li div.block-content div.vision-copy p {font-size:.9em;padding:0 1em;} ul#vision li div.block-content div.vision-copy p.more-button {margin-bottom:0} ul#vision li div.block-content div.vision-copy p.more-button a {display:block;background:transparent url(../images/arrow.png) top left no-repeat;width:17px;height:11px;} /* end vision ----*/ /*=TABLES ---------*/ .fin-table {width:100%;border-collapse:separate;border-spacing:4px 0;font-size:.8125em;margin-bottom:1em;background:#fff} .fin-table col {width:20%;margin:1px} .fin-table col.column-1, .fin-table col.column-3, .fin-table col.column-5 {background:#f2f2f2;} .fin-table thead {font-weight:bold;color:#000} .fin-table thead th {text-align:center;border-bottom:1px solid #ccc;background:#fff;} .fin-table thead tr.header th {text-align:center;font-size:1.2em;background:#eee;} .fin-table th, .fin-table td {padding:.5em} .fin-table tbody tr td {text-align:left;vertical-align:top} .countries {width:100%;border-collapse:separate;border-spacing:4px 0;font-size:.8125em;margin-bottom:1em;background:#fff} .countries col {width:25%;margin:1px} .countries col.col-1, .countries col.col-3 {background:#eee} .countries thead {font-weight:bold;color:#000} .countries thead th {text-align:center;border-bottom:1px solid #ccc;background:#fff;} .countries thead tr.header th {text-align:center;font-size:1.2em;background:#eee;} .countries th, .countries td {padding:.5em} .countries tbody tr th, .countries tbody tr td {text-align:left;border-bottom:1px solid #ccc} .countries tbody tr td {text-align:center;} .countries td span {display:inline-block;vertical-align:middle;width:10px;height:10px;background:#ccc;border-radius:50%;} .countries td span.operational {background:#0067A5} .countries td span.active {background:#add790} .countries td span.potential {background:#58585b} .table-scrollable { font-size:0.83em; width:100%; } table.table-scrollable tr:nth-of-type(odd) { background: #EDECE8; } table.table-scrollable th {background: #626367;color: white;font-weight: bold;text-align:left;} table.table-scrollable td, table.table-scrollable th {padding: 6px;border: 1px solid #ccc;} /*=TABLES - RESPONSIVE TABLES - ON SMALL DEVICE TABLE COLUMN HEADINGS ARE CONVERTED TO ROWS ---------*/ /* BEGIN: .table-responsive DEFINITIONS */ .table-responsive { width: 100%; border-collapse: collapse; font-size:0.83em; } /* Zebra striping */ table.table-responsive tr:nth-of-type(odd) { background: #EDECE8; } table.table-responsive tr:nth-of-type(odd) .white{ background: #fff; } table.table-responsive tr:nth-of-type(even) .grey{ background: #EDECE8; } table.table-responsive th {background: #626367;color: white;font-weight: bold;text-align:left;} table.table-responsive td, table.table-responsive th {padding: 6px;border: 1px solid #ccc;} .td-align-right {text-align:right; } .th-align-right {text-align:right !important } .tableNoBorder tr td {border:0px;padding: 5px;font-size: 0.8125em;line-height:15px;} /*=GRID -------*/ ul.grid-list {margin-bottom:0} ul.grid-list li {display:block;float:left;margin-bottom:1em;} ul.grid-list li img {display:block;max-width:100%;height:auto !important} ul.grid-list li a {display:block;} ul.grid-two li {width:49.1578947%;margin-left:1.6842105%} /*467 divide 950 = 49.1578947%, 16 divide 950 = 1.6842105%*/ ul.grid-list li li {width:100%} ul.grid-two li.grid1, ul.grid-two li.grid3, ul.grid-two li.grid5, ul.grid-two li.grid7 {margin-left:0 !important} ul.grid-three li {width:30.7535642%;margin-right:3.8696538%;} /*302 divide 982 = 30.7535642%, 38 divide 982 = 3.8696538%*/ ul.grid-three li.grid-3 {margin-right:0 !important} ul.grid-four li {width:22.0977597%;margin-right:3.8696538%;} /*217 divide 982 = 22.0977597%, 38 divide 982 = 3.8696538%*/ ul.grid-four li.grid-4 {margin-right:0 !important} ul.grid-five li {width:19.40928270042194%;margin-left:0.73839662447257%;margin-bottom:0.5em;} /*184 divide 948 = 19.40928270042194%, 7 divide 948 = 0.73839662447257%*/ ul.grid-five li.grid1, ul.grid-five li.grid6, ul.grid-five li.grid11 {margin-left:0 !important} .gallery a {border:1px solid #ddd; padding:5px; background-color:#fff;} .gallery a:hover {-moz-box-shadow: 0 0 7px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.5); box-shadow: 0 0 7px rgba(0,0,0,0.5);cursor:pointer;} ul.quick-links { margin-top:1em;} ul.quick-links li {background:#edece8;} ul.quick-links li .gutter {padding:1em;min-height:219px} ul.quick-links h3 {font-weight:bold;color:#626365;margin-bottom:1em;background:transparent url(../images/arrow.png) right bottom no-repeat;} ul.quick-links h3 a {display:block;color:#626365;text-decoration:none} ul.quick-links h3 a:hover {color:#0067a6;text-decoration:none} ul.quick-links .block-copy {padding-top:1em;border-top:1px dotted #79777a;} ul.reports li {width:24.0506329%;margin-left:1.2658228%} /*228 divide 948 = 24.0506329%, 12 divide 948 = 1.2658228%*/ ul.reports li.grid1, ul.reports li.grid5, ul.reports li.grid9 {margin-left:0 !important} ul.reports li li {width:100%} .accordion-tabs .archive ul.reports li h4 {border-bottom:1px solid #ccc} ul.strategy {background:transparent url(../images/strategy-circle-2.png) center center no-repeat;} ul.strategy li {background:#eee} ul.strategy li.grid1 .gutter {padding:0 0 0 1em;} ul.strategy li.grid2 .gutter {padding:0 1em 0 0} ul.strategy li.grid3 .gutter {padding:0 1em 0 0} ul.strategy li.grid4 .gutter {padding:0 0 0 1em} ul.strategy li .strategy-heading {width:40%;text-align:center;background-color:#0067a6;min-height:230px;position:relative;} ul.strategy li .grid-copy {width:57%;} ul.strategy li .grid-copy ul.list li {display:list-item;} ul.strategy li h3 {font-size:160%;line-height:1.2;color:#fff;position:absolute;margin:auto;top:30%;left:0;right:0;} ul.strategy li h4 {font-size:1.1em;color:#0067a4;text-transform:uppercase;margin-bottom:.5em} ul.strategy li li {width:95%;margin-bottom:0;padding:.25em 0;border-bottom:1px dotted #ccc;background:transparent} ul.strategy li .strategy-heading {background-repeat: no-repeat;} ul.strategy li.grid1 .strategy-heading {background-image:url(../images/number-1.png);background-position:95% 95%;} ul.strategy li.grid2 .strategy-heading {background-image:url(../images/number-2.png);background-position:5% 95%;} ul.strategy li.grid3 .strategy-heading {background-image:url(../images/number-3.png);background-position:5% 5%;} ul.strategy li.grid4 .strategy-heading {background-image:url(../images/number-4.png);background-position:95% 5%;} ul.strategy li.grid3 {float:right} ul.strategy li.grid4 {margin-left:0} /*MATERIAL ISSUES*/ #riskMap {display:block;} #riskTable {display:none;} /*=ACCORDION ------------*/ .accordion {margin-bottom:1em;} .accordion h3 {font-size:.9em;} .tab-content .gutter {padding:0em 1em 0 1em;} .tab-content ul.sector .gutter {padding:1em 0 0 1em} .tab-content .gutter figure {float:left;margin-bottom:1em} .tab-content .gutter .grid-content {padding-bottom:1em} .tab-content .sector figure {width:22%;} .tab-content .sector .grid-content {margin-left:25%;} .tab-content .sector h4 {padding-bottom:0.5em;border-bottom:1px solid #eee;} .tab-content .structure figure {width:20%;} .tab-content .structure .grid-content {margin-left:24%;} h3.expand a {padding:.5em} .expand a {display:block;} .expand a:link, .expand a:visited {color:#fff;text-decoration:none;background:#edece8;color:#0067a6;} .expand a:hover, .expand a:active, .expand a:focus {background:#ccc;color:#fff} .expand a.open:link, .expand a.open:visited {background:#0067a6;color:#fff;} .expand a:before {content:'\f0fe';font-family:'fontawesome';speak: none;padding-right:.5em} .expand a.open:before {content:'\f146';font-family:'fontawesome';speak: none;padding-right:.5em} .accordion.graphic-head .tab-content {margin-bottom:2.6em} .accordion.graphic-head h3 {position:relative;line-height:3;margin-bottom:3.8em;} .accordion.graphic-head h3 span {float:right;display:block;position:absolute;height:120px;top:-40px;} .accordion.graphic-head h3.expand a.open span {-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;} .accordion.graphic-head .tab-content .gutter {background:.eee;} .accordion.graphic-head .expand a.open:link, .accordion.graphic-head .expand a.open:visited {background:.ccc;color:.0067a6;} .accordion.graphic-head h3.sa span {width:163px;left:80%;background:transparent url(../images/South-Africa-map-sml.png) 100% 0 no-repeat;} .accordion.graphic-head h3.expand.sa a.open span {left:15%;} .accordion.graphic-head h3.africa span {width:135px;left:82%;background:transparent url(../images/Africa-map-sml.png) 100% 0 no-repeat;} .accordion.graphic-head h3.expand.africa a.open span {left:15%;} .accordion.graphic-head h3.europe span {width:222px;left:75%;background:transparent url(../images/Eastern-Europe-map-sml.png) 100% 0 no-repeat;} .accordion.graphic-head h3.expand.europe a.open span {left:15%;} .accordion.group-structure h3.engineering span {width:63px;left:88%;background:transparent url(../images/Group-Structure-Engineering.png) 100% 0 no-repeat;} .accordion.graphic-head h3.expand.engineering a.open span {left:25%;} .accordion.group-structure h3.manufacturing span {width:135px;left:82%;background:transparent url(../images/Group-Structure-Manufacturing.png) 100% 0 no-repeat;} .accordion.graphic-head h3.expand.manufacturing a.open span {left:15%;} .accordion.group-structure h3.investments span {width:220px;height:150px;left:85%;background:transparent url(../images/Group-Structure-Investments.png) 0 0 no-repeat;} .accordion.graphic-head h3.expand.investments a.open span {left:25%;} .accordion.graphic-head .expand.quad-1 a.open:link, .accordion.graphic-head .expand.quad-1 a.open:visited {background:#c9a833;color:#fff} .accordion.graphic-head .expand.quad-2 a.open:link, .accordion.graphic-head .expand.quad-2 a.open:visited {background:#568ac2;color:#fff} .accordion.graphic-head .expand.quad-3 a.open:link, .accordion.graphic-head .expand.quad-3 a.open:visited {background:#bb6128;color:#fff} .accordion.graphic-head .expand.geo-1 a.open:link, .accordion.graphic-head .expand.geo-1 a.open:visited {background:#A7A9AC;color:#fff} .accordion.graphic-head .expand.geo-2 a.open:link, .accordion.graphic-head .expand.geo-2 a.open:visited {background:#A7A9AC;color:#fff} .accordion.graphic-head .expand.geo-3 a.open:link, .accordion.graphic-head .expand.geo-3 a.open:visited {background:#A7A9AC;color:#fff} .accordion.footprint h4 {padding:.5em;color:.fff} .accordion.footprint h4.one {background:.b96026;} .accordion.footprint h4.two {background:.b5a237;} .accordion.footprint h4.three {background:.568ac2;} .accordion.footprint h4.four {background:.57bbb5;} ul.tabs {float:left;width:100%;padding:1em 0 0 0;background:transparent url(../images/nav-year-bg.png) left bottom repeat-x;margin-bottom:0 !important; font-size: 15px;} ul.tabs li {float:left;cursor: pointer;margin:0 0 0 .5em;padding:4px 10px;border:1px solid #ccc;border-bottom:none;text-decoration:none;color:#333} ul.tabs li:first-of-type {margin:0} ul.tabs li:hover {background:#eee} ul.tabs li.active {padding-bottom:5px;background:#fff;border-color:#0067a4;color:#0067a4;font-weight:bold} .tab_container {border:1px solid #0067a4;border-top:none;clear:both;float:left;width:99.796334%;background:#fff;overflow:auto;} /*980 divide 982 = 99.796334%*/ .tab_content {padding:1em;display:none;} .tab_drawer_heading {display:none;} /*=ICONS --------*/ .fa-file-pdf-o {color:#c11e07} .fa-file-excel-o {color:#549f3a} .fa-file-o {color:blue} /*=VIDEO --------*/ #containingBlock {max-width:480px;margin:0 auto} .videoWrapper {position: relative;padding-top:0;padding-bottom: 56.25%;height: 0;} * html .videoWrapper {margin-bottom: 45px;margin-bot\tom: 0;} .videoWrapper video, .videoWrapper object {position:absolute;width:100%;height:100%;left:0;top:0;} /*=FOOTER ---------*/ #footer {background:#281c22;color:#8f8f8f} #footer .gutter {margin:0 auto;max-width:61.375em;padding:0 .5625em} .grid3-footer-a, .grid3-footer-b, .grid3-footer-c, .grid3-footer-d, .grid3-footer-e {float:left;display:inline;} .grid3-footer-a {width:32.586558%;} /*320 divide 1000 = 32%; 320 divide 982 = 32.586558%*/ .grid3-footer-b {width:22.4032587%;margin-left:11.3034623%;} /*220 divide 982 = 22.4032587%; 111 divide 982 = 11.3034623*/ .grid3-footer-c {width:22.4032587%;float:right;} /*220 divide 1000 = 22%*/ .grid3-footer-d {width:22.4032587%;margin-right:11.3034623%;} /*220 divide 982 = 22.4032587%; 111 divide 982 = 11.3034623*/ .grid3-footer-e {width:66.293279%;float:right;} /*651 divide 982 = 66.293279%*/ #footer a:link, #footer a:visited {color:#8f8f8f;text-decoration:none;} #footer a:hover {color:#fff;text-decoration:underline;} #footer h5 {font-size:1em;font-weight:bold;text-transform:uppercase;color:#fff;border-bottom:1px solid #605f5d;padding:1.5em 0 .5em 0;margin-bottom:1em} #footer ul.social-media {margin-top:2em;margin-bottom:4em} #footer ul.social-media ul li {float:left;width:25%;text-align:center;} #footer ul.social-media ul li a {background:#3b3b3b;font-size:22px;padding:8px;margin:0 auto;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;} #footer ul.social-media ul li.youtube a {background:#bb0000} #footer ul.social-media ul li.rss a {background:#ff7900} #footer ul.social-media ul li.twitter a {background:#00aced} #footer ul.social-media ul li.linkedin a {background:#007bb6} #footer ul.social-media ul li a:link, ul.social-media ul li a:visited {color:#fff !important} #footer ul.social-media ul li a:hover {color:#fff;background:; background:-webkit-linear-gradient(#a6c8e1,#0067a6);background: -moz-linear-gradient(#a6c8e1,#0067a6);background: -ms-linear-gradient(#a6c8e1,#0067a6);background: -o-linear-gradient(#a6c8e1,#0067a6);background: linear-gradient(#a6c8e1,#0067a6);} #footer ul#site-links {margin:2em 0 2em 0} #footer ul#site-links li {display:inline;padding:0 1em;border-left:1px solid #605f5d} #footer .phone-box {padding:1em;border:1px solid #fff;-webkit-border-radius:9px;-moz-border-radius:9px;-ms-border-radius:9px;-o-border-radius:9px;border-radius:9px;} #footer .phone-box p.phone:before {content:'\f098';font-family:'fontawesome';speak: none;padding-right:.25em;color:#f30} #footer p.phone {font-size:1.5625em;font-weight:bold;color:#fff;margin-bottom:0} body#home #footer h5 {padding:3.9375em 0 1.5625em 0;} body#home #footer ul.social-media ul li {margin-bottom:2.5em} body#home #footer ul#site-links {margin-top:0;} body#home #footer ul#site-links li {display:list-item;padding:.75em 0;border-left:none;border-bottom:1px dotted #605f5d;vertical-align:middle;font-size:.75em} body#home #footer ul#site-links li a {display:block;} body#home footer[role="contentinfo"] p {left:0;} footer[role="contentinfo"] {background:#281c22;color:#8f8f8f;} footer[role="contentinfo"] .gutter {margin:0 auto;max-width:61.375em;position:relative;} footer[role="contentinfo"] p {font-size:.75em;position:absolute;top:-40px;left:0;line-height:1.5;} footer[role="contentinfo"] p.legal b {font-weight:bold;color:#fff;text-transform:uppercase;} footer[role="contentinfo"] p.legal br.rwd-line {display:none} body#home footer[role="contentinfo"] p {top:-60px} body#home footer[role="contentinfo"] p.legal br.rwd-line {display:block} /*=LINKS --------*/ a {outline:none} a:link {color:#0067a4;text-decoration:underline;} a:visited {color:#0067a4} a:hover {text-decoration:none} a.img-link img {border:1px solid #333;} a.img-link:hover img {border:1px solid red;} ul.featured {float:left;width:100%;padding-top:1.4104372%;margin-bottom:1em} ul.featured li {width:47.8138223%;display:block;float:left;margin-left:1.4104372%;margin-bottom:1.4104372%;} /*339 divide 709 = 47,8138223%, 10 divide 709 = 1,4104372%*/ ul.featured li img {display:block;max-width:100%;box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3);height:auto !important} ul.featured li.asset2, ul.featured li.asset4 {margin-left:1.551481%;} /*11 divide 709 = 1,4104372%*/ ol.asset-data-list {float:left;width:100%;border-bottom:1px solid #ccc;} ol.asset-data-list li {float:left;width:15%;padding-top:.2em;margin-right:2%;font-weight:bold;border-top:1px solid #ccc;} .slider-content h3 a:link {color:#FFF;text-decoration:underline;} .slider-content h3 a:visited {color:#FFF} .slider-content h3 a:hover {text-decoration:none} a:slider-content h3 link {color:#FFF;text-decoration:underline;} a:slider-content h3 visited {color:#FFF} a:slider-content h3 hover {text-decoration:none; color:#000} /* up arrow */ #back-to-top {position:fixed;bottom:2em;right:10%;text-decoration:none;font-size:2.4em;width:44px;height:44px;display:block;text-align:center;vertical-align:middle;border-radius:999px;color:#fff;background-color:#0067a4;-webkit-transition:all 0.6s ease;-moz-transition:all 0.6s ease;-ms-transition:all 0.6s ease;-o-transition:all 0.6s ease;transition:all 0.6s ease} #back-to-top:after {content:'\f106';font-family:'fontawesome';speak: none;} #back-to-top:hover {background:#a6c8e1;} /*=RESPONSIVE -------------*/ @media screen and (max-width: 1380px) { #back-to-top {bottom:-2em} } @media screen and (max-width: 980px) { ul.blocks-six li { width: 33.33%; min-height: 160px; } } @media screen and (max-width: 970px) { /*slider content*/ .slider-content h3 span {font-size:1.4em;color:#fff;line-height:1.2} } @media screen and (max-width: 930px) { header[role="banner"] #utility {width:60%} ul#sectors li {min-height:226px} ul#sustainability li {min-height:226px} ul#vision li {min-height:226px} ul.strategy li h3 {font-size:120%;} ul.strategy li .grid-copy {width:55%;} } @media screen and (max-width: 910px) { /*slider content*/ .slider-content h3 {font-size:1.3em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:1.4em;color:#fff;line-height:1.2} } @media screen and (max-width: 880px) { #sustainability-focus h2 {font-size:2.4em;} #sustainability-focus span {font-size:2.4em;} #sustainability-focus h2 {font-size:2.4em;} #sustainability-focus span {font-size:2.4em;} #vision-focus h2 {font-size:2.4em;} #vision-focus span {font-size:2.4em;} #vision-focus h2 {font-size:2.4em;} #vision-focus span {font-size:2.4em;} .slider-content h3 {font-size:1.1em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:1.4em;color:#fff;line-height:1.2} } @media screen and (max-width: 860px) { #footer ul#site-links {margin-top:0;margin-bottom:2em} #footer ul#site-links li {display:list-item;padding:.75em 0;border-left:none;border-bottom:1px dotted #605f5d;vertical-align:middle;font-size:.75em} #footer ul#site-links li a {display:block;} } @media screen and (max-width: 840px) { header[role="banner"] #utility {width:65%} #sector-focus h2 {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #sector-focus span {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #sector-focus br.rwd-line {display:none} ul#sectors li.block1 {display:none;} ul#sectors li {width:33.3333%;} #sustainability-focus h2 {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #sustainability-focus span {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #sustainability-focus br.rwd-line {display:none} ul#sustainability li.block1 {display:none;} ul#sustainability li {width:33.3333%;} #vision-focus h2 {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #vision-focus span {position:relative;top:0;left:0;margin:0;padding:0 0 0 .2em} #vision-focus br.rwd-line {display:none} ul#vision li.block1 {display:none;} ul#vision li {width:33.3333%;} } @media screen and (max-width: 800px) { .tab1, .tab2, .tab3, .tab4, .tab5, .tab6, .tab7, .tab8, .tab9, .tab10 {width:100%;} .menu figure img {display:none;} .menu li a i {position:relative;left:0;display:inline;font-style:normal;} .menu li.first, .menu li.last {width:100%;} .menu a.home:after {content:' '} /*Don't show menu icons*/ a.menu-link {display:block;} .menu {min-width:inherit;float:none;clear:both;} .menu, .menu > ul ul {overflow:hidden;max-height:0;} .menu > ul > li {float:none;display:inline-block;} .menu .menu-sub {position:relative;width:100%;margin-left:0;} .menu .menu-sub-inner > div {width:auto;float:none; margin-top:0;} .menu .menu-sub-inner > li {position:inherit;} .menu.active {max-height:155em;} .menu ul {display:inline;text-align:left;} .menu ul > li:hover {background:transparent} .menu ul li:hover div.menu-sub {display:none;} /*.menu li #s1:target + div.menu-sub, .menu li #s2:target + div.menu-sub, .menu li #s3:target + div.menu-sub, .menu li #s4:target + div.menu-sub {display:block;padding-bottom:1em;}*/ .menu li #s1:target + div.menu-sub, .menu li #s2:target + div.menu-sub, .menu li #s3:target + div.menu-sub, .menu li #s4:target + div.menu-sub, .menu li #s5:target + div.menu-sub, .menu li #s6:target + div.menu-sub, .menu li #s7:target + div.menu-sub, .menu li #s8:target + div.menu-sub {display:block;padding-bottom:1em; } .menu > ul, .menu .menu-sub-inner {width:100%; border-top: 1px solid #fff;} .menu > ul > li {display:block;float:none;border-bottom: 1px solid #fff;} .menu > ul > li > a {display:block;text-align:left;color:#fff;padding:1em;margin-left:0} .menu > ul > li > a:hover {color:#fff;background:#0067a6} .menu p span{display:none;} #reporting .financials, #reporting .share-graph {float:none;width:auto} #reporting .share-graph {margin:0 auto;max-width:377px} #reporting .share-head h2 {margin-top:.5em} #reporting figure.ar-cover {display:none} #reporting .financials ul li {width:auto} #footer .grid3-footer-a, #footer .grid3-footer-b, #footer .grid3-footer-c {float:none;width:auto} #footer h5 {padding:.5em 0} #footer .grid3-footer-a h5 {padding-top:1em} body#home #footer h5 {padding:1em 0 .5em 0;} body#home footer[role="contentinfo"] p.legal br.rwd-line {display:none} body#home footer[role="contentinfo"] p {top:0} footer[role="contentinfo"] p {position:relative;text-align:center;top:0;left:0;padding:1em 0} .scrollable {position:relative;overflow:hidden;} .scrollable:after {position:absolute;top:0;left:100%;width:50px;height:100%;border-radius:10px 0 0 10px / 50% 0 0 50%;box-shadow:-5px 0 10px rgba(0, 0, 0, 0.25);content:'';} .scrollable > div {overflow-x:auto;} .scrollable > div::-webkit-scrollbar {height:12px;} .scrollable > div::-webkit-scrollbar-track {box-shadow:0 0 2px rgba(0,0,0,0.15) inset;background:#f0f0f0;} .scrollable > div::-webkit-scrollbar-thumb {border-radius:6px;background:#ccc;} .accordion.footprint h3 span {left:60%;} ul.reports li {width:32.4894515%;margin-left:1.2658228%} /*308 divide 948 = 32.4894515%, 12 divide 948 = 1.2658228%*/ ul.reports li.grid1, ul.reports li.grid5, ul.reports li.grid9 {margin-left:0 !important} ul.reports li.grid5 {clear:none} ul.reports li.grid4, ul.reports li.grid7 {clear:left} ul.grid-five li.grid6, ul.grid-five li.grid11 { margin-left:0.73839662447257%;} ul.grid-five li.grid5, ul.grid-five li.grid9, ul.grid-five li.grid13 {margin-left:0 !important} ul.grid-five li.grid6, ul.grid-five li.grid11 {clear:none} ul.grid-five li.grid5, ul.grid-five li.grid9, ul.grid-five li.grid13 {clear:left} ul.grid-five li, {width:24.59893048128342%; margin-left:0.53475935828877%;} /*184 divide 748 = 24.59893048128342%, 4 divide 748 = 0.53475935828877%*/ .grid3-a, .grid3-b, .grid3-c {float:none; clear:both; width: auto; margin: 3.8696538%; min-height:auto} } @media screen and (max-width: 780px) { header[role="banner"] #utility {clear:left;float:none;width:auto} header[role="banner"] #utility #tipoffs, header[role="banner"] #utility #tools {width:49%} .grid-two div {float:none;width:auto} #footer ul.social-media ul li {width:50%;margin-bottom:2.5em} body#home #footer ul.social-media ul li {width:25%;margin-bottom:0} ul.strategy {background:none} ul.strategy li.grid1 .strategy-heading, ul.strategy li.grid2 .strategy-heading, ul.strategy li.grid3 .strategy-heading, ul.strategy li.grid4 .strategy-heading {background-image:none} ul.strategy li .grid-copy {min-height:220px} ul.strategy li .strategy-heading, ul.strategy li .grid-copy {float:none;width:auto} ul.strategy li .strategy-heading {min-height:55px;margin:0;padding:0} ul.strategy li.grid1 .gutter, ul.strategy li.grid2 .gutter, ul.strategy li.grid3 .gutter, ul.strategy li.grid4 .gutter {padding:0 !important} ul.strategy li div.grid-copy.lft {margin-left:1em} .text3x3 {padding: 10px 0px 10px 0px; margin: 0px 12px 0px 12px; font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; font-size: .9em !important; line-height: 1.1695em; color: #999;} } @media only screen and (max-width: 760px) { .td-align-left {text-align:left; font-weight: } /* Force table to not be like tables anymore */ table.table-responsive, table.table-responsive thead, table.table-responsive tbody, table.table-responsive th, table.table-responsive td, table.table-responsive tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ table.table-responsive thead tr { position: absolute; top: -9999px; left: -9999px; text-align: left; } table.table-responsive tr { border: 1px solid #ccc; } table.table-responsive td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; text-align: left; } table.table-responsive td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; } } /* END: .table-responsive DEFINITIONS */ @media screen and (max-width: 740px) { /* Sean added */ div.grid-two div.grid1, div.grid-two div.grid2,div.grid-two div.grid3, div.grid-two div.grid4,div.grid-two div.grid5, div.grid-two div.grid6 {float:none; clear:both; width: 100%; } /* End: Sean added */ } @media screen and (max-width: 720px) { ul.quick-links li.grid-2 {margin-right:0 !important} ul.quick-links li.grid-3 {clear:left} ul.quick-links li {margin-bottom:.5em;margin-right:2%;width:49%;} .accordion.graphic-head h3.expand.sa a.open span {left:30%;} .accordion.graphic-head h3.expand.africa a.open span {left:30%;} .accordion.graphic-head h3.expand.europe a.open span {left:30%;} .accordion.graphic-head h3.expand.engineering a.open span {left:50%;} .accordion.graphic-head h3.expand.manufacturing a.open span {left:50%;} .accordion.graphic-head h3.expand.investments a.open span {left:50%;} ul.blocks-six li { width: 50.0%; min-height: 160px; } } @media screen and (max-width: 700px) { #riskMap {display:none;} #riskTable {display:block;} } @media screen and (max-width: 690px) { #news .news-company, #news .news-media {float:none;width:auto} #news .news-company h2 {padding-top:.5em} #news .news-media h2, #news .news-media ul li {text-align:left} #news .news-media p {text-align:left} .grid2-a, .grid2-b {float:none;width:auto} .cols3block1 {float:none; width:99%; margin-right: 0; } .cols3block2 {float:none; width:99%; margin-right:0; border:0px; } .cols3block3 {float:none; width:99%; } .cols4block1 {float:none; width:99%; margin-right: 0; } .cols4block2 {float:none; width:99%; margin-right:0; border:0px; } .cols4block3 {float:none; width:99%; margin-right:0; border:0px; } .cols4block4 {float:none; width:99%; } .text3x3 {padding: 10px 0px 10px 0px; margin: 0px 12px 0px 12px; font-family: Arial, Gotham, "Helvetica Neue", Helvetica, sans-serif; font-size: .8em !important; line-height: 1.1695em; color: #999;} } @media screen and (max-width: 660px) { /*ul.grid-list li {float:none;width:auto;margin-left:0 !important}*/ /*ul.strategy li .strategy-heading {width:40%;float:left;min-height:220px;font-size:120%} ul.strategy li .grid-copy {width:57%;float:right} ul.strategy li.grid3 {float:none !important}*/ ul.reports li {width:49%;margin-left:0 !important} /**/ ul.reports li.grid4, ul.reports li.grid7 {clear:none !important} ul.reports li.grid1, ul.reports li.grid3, ul.reports li.grid5, ul.reports li.grid7, ul.reports li.grid9 {float:left !important} ul.reports li.grid2, ul.reports li.grid4, ul.reports li.grid6, ul.reports li.grid8 {float:right !important} ul.reports li.grid3, ul.reports li.grid5, ul.reports li.grid7, ul.reports li.grid9 {clear:left !important} .tabs {display: none;} .tab_drawer_heading {background:#edece8;color:#0067a6;border-top:1px solid #0067a6;margin:0;padding:.5em;display: block;cursor: pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .d_active {background-color:#0067a4;color: #fff;} .tab_drawer_heading:before {content:'\f0fe';font-family:'fontawesome';speak: none;padding-right:.25em} .d_active:before {content:'\f146';font-family:'fontawesome';speak: none;padding-right:.25em} .slider-content h3 {font-size:1.1em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:1.2em;color:#fff;line-height:1.2} } @media screen and (max-width: 640px) { ul#sectors li {width:50%} ul#sustainability li {width:50%} ul#vision li {width:50%} #associations li.logo4 {clear:left;width:49%} #associations li.logo1, #associations li.logo2, #associations li.logo3 {width:33.33%} #associations li.logo5 {width:49%} ul.grid-five li.grid5, ul.grid-five li.grid6, ul.grid-five li.grid9,ul.grid-five li.grid11, ul.grid-five li.grid13 {margin-left:3.14091680814941% !important} ul.grid-five li.grid4, ul.grid-five li.grid7, ul.grid-five li.grid10, ul.grid-five li.grid13 {margin-left:0 !important} ul.grid-five li.grid5, ul.grid-five li.grid9, ul.grid-five li.grid13 {clear:none;} ul.grid-five li.grid4, ul.grid-five li.grid7, ul.grid-five li.grid10, ul.grid-five li.grid13 {clear:left;} ul.grid-five li {width:31.23938879456706%; margin-left:3.14091680814941% !important} /*184 divide 589 = 31.23938879456706%, 18.5 divide 589 = 0.314091680814941%*/ ul.grid-five li.grid6 {margin-left:3.14091680814941% !important} .floatRightOneThird {float:none; width:99%; margin-top: 1em; margin-bottom: 1em; margin-left: 0; } .floatLeftOneThird {float:none; width:99%; margin-top: 1em; margin-bottom: 1em; margin-left: 0; } .cols2block1 {display: block; float: none; width:98%; margin-top: 1em; } .cols2block2 {display: block; float: none; width:98%; margin-top: 1em; } .cols2block60 {display: block; float: none; width:98%; margin-top: 1em; } .cols2block40 {display: block; float: none; width:98%; margin-top: 1em; } .cols2block1One3rd {float:none; display: block; width:99%; margin-top: 1em; } .cols2block2Two3rd {float:none; display: block; width:99%; margin-top: 1em; } .cols2block1Two3rd {float:none; display: block; width:99%; margin-top: 1em; } .cols2block2One3rd {float:none; display: block; width:99%; margin-top: 1em; text-align:left } } @media screen and (max-width: 600px) { header[role="banner"] #utility #tipoffs, header[role="banner"] #utility #tools {float:none;margin:0 1em} header[role="banner"] #utility #tools {width:auto} header[role="banner"] #utility #tipoffs {min-width:16em;margin:0 auto !important} #footer .grid3-footer-d, #footer .grid3-footer-e {float:none;width:auto} #footer ul.social-media ul li {width:25%;margin-bottom:0} #footer ul#site-links {margin-bottom: 0} .accordion.footprint h3 span {left:40%;} .accordion.footprint h3.expand a.open span {left:25%;} ul.team li.team1,ul.team li.team3, ul.team li.team5, ul.team li.team7, ul.team li.team9, ul.team li.team11, ul.team li.team13, ul.team li.team15, ul.team li.team17 {clear:both; width:40%;} ul.team li.team2,ul.team li.team4, ul.team li.team6, ul.team li.team8, ul.team li.team10, ul.team li.team12, ul.team li.team14, ul.team li.team16 {clear:none; float:left; width:40%;} ul.team li.team1,ul.team li.team3, ul.team li.team5, ul.team li.team7, ul.team li.team9, ul.team li.team11, ul.team li.team13, ul.team li.team15, ul.team li.team17{margin-right:5.5714286%} } @media screen and (max-width: 580px) { .slider-content h3 {font-size:1.0em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:1.1em;color:#fff;line-height:1.2} } @media screen and (max-width: 550px) { .vision-text {display:block; } .vision-animation {display:none; } } @media screen and (max-width: 540px) { #associations li {width:50% !important} #associations li.logo4 {clear:none} #associations li.logo3, #associations li.logo5 {clear:left} } @media screen and (max-width: 530px) { .slider-content h3 {font-size:.90em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:0.999999em;color:#fff;line-height:1.2} } @media screen and (max-width: 500px) { .slider-content h3 {font-size:.89em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {font-size:0.999999em;color:#fff;line-height:1.2;} } @media screen and (max-width: 450px) { .slider-content h3 {font-size:.74em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {color:#fff;line-height:1.2;} } @media screen and (max-width: 480px) { ul#sectors li {width:100%;/*min-height:316px*/} ul#sustainability li {width:100%;/*min-height:316px*/} ul#vision li {width:100%;/*min-height:316px*/} ul.quick-links li {float:none;width:auto;margin-right:0} ul.quick-links li br.rwd-line {display:none} ul.quick-links li .gutter {min-height:inherit;} .accordion.graphic-head h3 {position:relative;line-height:3;margin-bottom:.8em;} /*ul.strategy li .strategy-heading, ul.strategy li .grid-copy {float:none;width:auto} ul.strategy li .grid-copy {min-height:inherit;} ul.strategy li .strategy-heading {font-size:100%;min-height:inherit !important} ul.strategy li .strategy-heading h3 {position:relative;vertical-align:middle;padding:1em}*/ .accordion.footprint h3 {line-height:1;margin-bottom:.5em;} .accordion.footprint h3 span {display:none} .accordion.group-structure h3 span {display:none} .tab-content .structure figure {display:none;} .tab-content .structure .grid-content {margin-left:0;} ul.reports li {float:none;width:100%;} #associations ul {margin:0 auto;width:auto} #associations ul li {float:none;width:100%;margin:0 auto !important} ul.grid-five li {width:42.89044289044289%; margin-left:14.21911421911422% !important} /*184 divide 429 = 42.89044289044289%, 61 divide 429 = 1.421911421911422%*/ ul.grid-five li.grid4, ul.grid-five li.grid7, ul.grid-five li.grid10, ul.grid-five li.grid13 {margin-left:0 !important; clear:none;} ul.grid-five li.grid3, ul.grid-five li.grid5, ul.grid-five li.grid7, ul.grid-five li.grid9, ul.grid-five li.grid11, ul.grid-five li.grid13, ul.grid-five li.grid15 {margin-left:0 !important; clear:left;} ul.grid-five li.grid4, ul.grid-five li.grid7, ul.grid-five li.grid10, ul.grid-five li.grid13 {clear:none;} ul.grid-five li.grid4, ul.grid-five li.grid6, ul.grid-five li.grid10 {margin-left:14.21911421911422% !important} } @media screen and (max-width: 420px) { ul.blocks-six li { width: 100.0%; min-height: auto; } } @media screen and (max-width: 400px) { .slider-content h3 {font-size:0.675em;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} .slider-content h3 span {color:#fff;line-height:1.2;} ul.grid-list li {float:none;width:auto;margin-left:0 !important} ul.grid-list li img {margin:0 auto;} ul.gallery {width:184px; margin:0 auto;} ul.grid-five li.grid4, ul.grid-five li.grid6, ul.grid-five li.grid10 {margin-left:0 !important} ul.grid-two li.grid1,ul.grid-two li.grid2,ul.grid-two li.grid3,ul.grid-two li.grid4 {float:none;width:100%;margin-left:0 !important; } ul.strategy li .grid-copy { min-height: auto; padding-bottom: 10px; } ul.team li.team1,ul.team li.team3, ul.team li.team5, ul.team li.team7, ul.team li.team9, ul.team li.team11,ul.team li.team2,ul.team li.team4, ul.team li.team6, ul.team li.team8, ul.team li.team10, ul.team li.team12, ul.team li.team13, ul.team li.team14, ul.team li.team15, ul.team li.team16, ul.team li.team17 {clear:both; float:none; width:95%; margin:1%} } @media screen and (max-width: 380px) { .slider-content h3 {font-size:8.5px;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} } @media screen and (max-width: 360px) { header[role="banner"] h1 {float:none;margin-left:auto;margin-right:auto;} #news .news-company li img {display:none} #news .news-company li .news-intro {position:relative;top:0;left:0} /*ul.grid-list li {float:none;width:auto;margin-left:0 !important}*/ /*ul.grid-list li img {margin:0 auto;} ul.gallery {width:184px; margin:0 auto;} ul.grid-five li.grid4, ul.grid-five li.grid6, ul.grid-five li.grid10 {margin-left:0 !important}*/ body#home footer[role="contentinfo"] p.legal br.rwd-line, footer[role="contentinfo"] p.legal br.rwd-line {display:block} .slider-content h3 {font-size:6.5px;text-transform:none;color:#fff; text-shadow: 1px 1px #000;} }