/* GLOBAL STYLES */
html {
    height: 100%;
    width:100%;
}
body {
    margin:0;
    padding: 0;
    font-size: 18px;
    line-height: 24px;
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    color: #000000;
    -webkit-backface-visibility: visible;
    font-weight: 300;
}
.mainWrapper {
    overflow:hidden;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
img {
    border:0 none;
    max-width: 100%;
}
strong {
    font-weight: 700;
}
.wrapper {
    position: relative;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}
.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1250px;
    padding: 60px 0;
    text-align: center;
}
a {
    text-decoration: none;
    color: #000000;
}
p {
    font-size: 18px;
    color: #000000;
    font-family: 'Lato', sans-serif;
    line-height: 24px;
}
h1 {
    font-size: 32px;
    line-height: 36px;
    font-weight: normal;
    text-align: center;
    margin: 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}
.h1 {
    font-size: 36px;
    line-height: 38px;
    font-weight: normal;
    text-align: center;
    margin: 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}
h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 40px;
    line-height: 42px;
    margin-bottom: 10px;
    margin-top: 15px;
    text-transform: uppercase;
}
.h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 40px;
    line-height: 42px;
    margin-bottom: 10px;
}
h3 {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    line-height: 34px;
    font-weight: 100;
    text-align: center;
    margin: 0;
}
h4 {
    margin: 0;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    line-height: 32px;
    font-size: 22px;
}
h5 {
    margin: 0;
    padding-top: 15px;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 19px;
    line-height: 24px;
}
.h5 {
    margin: 0;
    padding-top: 15px;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}
sup, sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    position: relative;
}
sup {
    bottom: 1ex;
}
sub {
    top: .5ex;
}
hr {
    border: none;
    border-top: 3px dotted #FFFFFF;
    margin: 30px auto;
    width: 230px;
}
.footnotes {
    font-style: italic;
    font-weight: normal;
    font-size: 14px;
    margin: 0;
}
.dtable {
    display: table;
    width:100%;
    height:100%;
    vertical-align: middle;
}
.dtcell {
    display: table-cell;
    vertical-align: middle;
}
.seeMore {
    display: block;
    margin: 50px auto 0 auto;
    width:50px;
    height:50px;
    text-align: center;
    background-color: #000;
    background-color: rgba(0,0,0,.25);
    z-index: 999;
    color:#fff;
    border-radius: 100%;
    cursor: pointer;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.seeMore:hover {
    background-color: rgba(0,0,0,1);
}
.seeMore .fa {
    font-size: 30px;
    line-height: 50px;
    margin-left: 3px;
}
section {
    display: block;
}
.sepImg {
        width: 100%;
        padding-top: 7%;
        background-color: #f15a21;
        display: block;
    }
@media screen and (max-width: 960px) {
    .container {
        max-width: none;
        padding: 50px 2%;
    }
    h1 {
        font-weight: normal;
        font-size: 34px !important;
        line-height: 38px !important;
    }
    .sepImg {
        padding-top: 10%;
    }
}
@media screen and (max-width: 600px) {
        .sepImg {
            padding-top: 15%;
    }
}

/* LOADER */

#loader {
 	display:block;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: #f57b20;
	z-index: 100000;
}
#loader .loadWrapper {
    background: transparent;
    width:91px;
    height: 64px;
    position: absolute;
    left:50%;
    top:50%;
    margin: -32px 0 0 -45px;
    text-align: center;
    padding:17px 30px;
}
#loader .fa {
    color:#FFFFFF;
    font-size: 30px;
}

/* MORE BUTTON */
.more.button:before {   
  background-color: #000;
  background-color: rgba(0,0,0,.4);
  border-radius: 100%;
  font-family: 'FontAwesome';
  font-size: 35px;
  line-height: 30px;
  color: white;
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  padding: 7px 20px;
  margin: -20px;
  content: '\f105'; padding-right:17px;
}

/* NAVIGATION */
.navigation {
    position: fixed;
    z-index: 9999;
    left:0px;
    padding: 45px;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}
.logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}
.nav-toggle {
    color:#fff;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
    background-color: transparent;
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
    background-color: #000;
    background-color: rgba(0,0,0,.2);
}
.nav-toggle:hover,
.nav-toggle.active {

}
.nav-toggle .fa {
    line-height: 39px;
    width: 39px;
    text-align: center;
    cursor: pointer;
    font-size: 21px;
}
nav {
    position: fixed;
    display: block;
    left: -240px;
    top:0;
    bottom: 0;
    width:240px;
    background-color: #373737;
    -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
    overflow-y:auto;
}
nav .closeNav {
    float: right;
    padding:10px;
    background-image: url(../images/close-nav.png);
    background-repeat: no-repeat;
    background-position: center;
    width:34px;
    height: 34px;
    display: block;
    margin-top: 35px;
    margin-right: 10px;
}
nav ul {
    margin:100px 0 0 0;
    padding: 0;
    list-style-type: none;
    border-top: 1px solid #fff;
    border-color:rgba(255,255,255,.1);
}
nav ul li a {
    color:#fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 20px;
    display: block;
    padding:15px 20px;
    letter-spacing: 1px;
}
nav ul li a:hover {
    background-color:#1897df;
}
nav ul li a.active {
    background-color:#444343;
}
nav ul li {
    border-bottom: 1px solid #fff;
    border-color:rgba(255,255,255,.1);
}
.navigation.white {
    background-color: rgba(0,0,0,0.5);
}

@media screen and (max-width: 959px) {
    .navigation {
        padding: 15px 30px;
    }
}
@media screen and (max-width: 767px) {
    .navigation {
        padding: 10px 20px;
    }
}

@media screen and (max-width: 480px) {
    .navigation {
        right:0;
        top:0;
        z-index: 999;
        text-align: center;
        width:100%;
        padding: 10px;
        background-color: #6f6f6f;
    }
    .navigation .logo {
        display: block;
        margin: 0;
    }
    .navigation .logo img {
        height: 40px;
        width: auto;
        padding-top: 3px;
    }
    .navigation .nav-toggle {
        position: absolute;
        left:25px;
        top: 13px;
    }
}

/* HERO BANNER */

.hero-banner {
    background-image: url(../images/splash.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
	background-position:center bottom;
}
.borderdots {
    letter-spacing: 5px;
    font-size: 10px;
}
.hero-container {
    display: table;
    height: 100%;
    width:100%;
}
.bigtitle {
    font-size:85px;
    line-height: 90px;
    display: block;
    padding-bottom: 10px;
}
.hero-container .text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    text-align: center;
}
.hero-container h3 {
    font-size: 34px;
    color: #fff;
    margin: 0;
    padding-top: 80px;
}
.hero-container h3 .singledot {
    font-size: 10px;
    font-style: normal;
    vertical-align: middle;
}
.hero-banner .building {
    position: absolute;
    z-index: 1;
    bottom:0;
    left:10%;
    right:10%;
    text-align: center;
}
.hero-banner .building img {
    display: block;
    margin: 0 auto;
}
/* Animation for scroll */

@-webkit-keyframes scroll-down-anim {
    0%{ bottom: 30px; }
    50%{ bottom: 20px; }
    100%{ bottom: 30px; }
}
@-moz-keyframes scroll-down-anim {
    0%{ bottom: 30px; }
    50%{ bottom: 20px; }
    100%{ bottom: 30px; }
}
@-o-keyframes scroll-down-anim {
    0%{ bottom: 30px; }
    50%{ bottom: 20px; }
    100%{ bottom: 30px; }
}
@keyframes scroll-down-anim {
    0%{ bottom: 30px; }
    50%{ bottom: 20px; }
    100%{ bottom: 30px; }
}

.hero-banner .scrollMore {
    position: absolute;
    left:50%;
    margin-left: -25px;
    bottom:25px;
    width:50px;
    height:50px;
    text-align: center;
    background-color: #000;
    background-color: rgba(0,0,0,.25);
    z-index: 999;
    color:#fff;
    border-radius: 100%;
    cursor: default;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -webkit-animation: scroll-down-anim 1s infinite;
    -moz-animation: scroll-down-anim 1s infinite;
    -o-animation: scroll-down-anim 1s infinite;
    animation: scroll-down-anim 1s infinite;
}
.hero-banner .scrollMore:hover {
    background-color: rgba(0,0,0,1);
}
.hero-banner .scrollMore .fa {
    font-size: 30px;
    line-height: 50px;
}
@media screen and (max-width: 1024px) {
	.hero-banner {
		background-attachment: scroll;
		background-position: center bottom!important;
	}
}
@media screen and (max-width: 768px) {
    .hero-container .bigtitle {
        font-size: 80px;
        line-height: 85px;
    }
    .hero-container h2 {
        font-size: 28px;
        line-height: 50px;
    }
}
@media screen and (max-width: 580px) {
    .hero-container .bigtitle {
        font-size: 60px;
        line-height: 65px;
    }
    .hero-container  h1 {
        font-size: 30px;
        line-height: 32px;
    }
    .hero-container  h2 {
        font-size: 24px;
        line-height: 26px;
    }
}
@media screen and (max-width: 580px) {
    .hero-container .text {
        padding-top:76px;
    }
}

/* We Are One Gas */
#about {
    border-top: 14px solid #f15a21;
    display: table;
}
.triangle {
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-top: 40px solid #f15a21;
    border-right: 60px solid transparent;
    margin: 0 auto;
    background-attachment: fixed;
    position: absolute;
    left: 50%;
    margin-left: -60px;
}
#about .text {
    width: 54%;
    padding: 4% 6% 5% 4%;
    vertical-align: bottom;
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}
#about .imgContainer {
    background: url(../images/about.jpg) center top no-repeat;
    background-size: cover;
    width: 46%;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}
#about h3 {
    margin-left: -9%;
    background: #00a5df;
    padding: 4%;
    padding-left: 9%;
    color: #FFFFFF;
    margin-bottom: 5%;
    text-align: left;
    position: relative;
}
#about h3:before {
    background: rgba(0,100,195,0.6);
    width: 39%;
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    left: -39%;
}
#about p {
    font-style: italic;
}
#about .h5 {
    font-weight: 300;
}

@media screen and (max-width: 768px) {
    #about .imgContainer {
        display: none;
    }
    #about .text {
        width: 100%;
    }
    #about h3 {
        margin-left: 0;
        padding-left: 0;
        background: none;
        color: #020202;
        padding-top: 30px;
    }
    #about h3:before {
        display: none;
    }
}

/* Our Mission - slider */

#mission {
    background-color: #00a5df;
}
#mission .container {
    padding: 5% 8%;
    max-width: none;
    text-align: center;
}
#mission hr {
    width: 25px;
}
#mission .slick-slider {
    margin-bottom: 0px;
}
#mission .slick-carousel {
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    color: #FFFFFF;
    max-width: 1250px;
    margin: 0 auto;
}
#mission .slick-carousel p {
    color: #ffffff;
    margin: 0;
    line-height: 30px;
    font-size: 20px;
}


/* Slick Carousel - Arrows and Dots */
.slick-prev, .slick-next {bottom: 50px; line-height: 0; font-size: 0; cursor: pointer; padding: 0 4%; border: none; outline: none; width:60px; height:60px; margin-top: -30px;}
.slick-prev:focus, .slick-next:focus { outline: none; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }

.slick-prev:before, .slick-next:before {  
  font-family: 'FontAwesome';
  font-size: 35px;
  line-height: 30px;
  color: #
  opacity: 0.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin: -20px;
  content: '\f105'; padding-right:17px;
}
.slick-prev:before { 
    content: '\f104'; 
    padding-left:17px;
}
.slick-next:before { 
    content: '\f105'; 
    padding-right:17px;
}
.slick-dots {
    bottom: 0;
    padding-bottom: 4%;
    text-align: center;
    position: relative;
    margin-top: 20px;
}
.slick-dots li {
    margin: 0 10px;
}
.slick-dots li button {
    width: 15px;
    height: 15px;
}
.slick-dots li.slick-active button {
  color: #FFFFFF;
  background-color: #FFFFFF;
}
@media screen and (max-width: 960px) {
    #mission .slick-carousel {
        font-size: 15px;
        line-height: 18px;
    }
}
@media screen and (max-width: 768px) {
    #mission {
        padding: 50px 2%;
    }
}

/* Infographics */


#infographics {
    background-image: url(../images/infographicsBg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
}
#infographics .container {
    padding: 0;
}
#infographics h1 br {
    display: none;
}
#infographics .tabs-menu {
    text-align: center;
    margin: 0;
    list-style: none;
    padding: 0;
    display: inline-block;
}
#infographics .tab-content {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
#infographics .tab-content {
    display: block;
}
#infographics .tab-content li {
    display: inline-block;
    float: left;
    width: 33.33%;
    padding: 5%;
    margin: 0;
    color: #FFFFFF;
}
#infographics .tab-content li.center {
    background: rgba(0,0,0,0.5);
}
#infographics .labelInfo {
    line-height: 24px;
}
#infographics .labelInfo:before {
    width: 40%;
    border-top: 2px solid #bfc0c2;
    content: "";
    display: block;
    margin: 25px auto;
}
#infographics .tab-content li span {
    display: block;
}
#infographics .titleInfo {
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 2px;
}
#infographics .value {
    font-size: 100px;
    line-height: 120px;
    letter-spacing: -5px;
}
#infographics .subtitle {
    font-size: 18px;
}
#infographics .titleInfo .bigger {
    font-size: 72px;
    line-height: 104px;
    margin-top: 25px;
}
#infographics .timer {
    display: inline !important;
    font-size: 125px !important;
}


@media screen and (max-width: 1280px) {
    #infographics .value {
        font-size: 80px;
        line-height: 100px;
    }
    #infographics .titleInfo .bigger {
        font-size: 52px;
        line-height: 84px;
    }
    #infographics .timer {
        font-size: 105px !important;
    }
    #infographics .labelInfo {
        line-height: 20px;
    }
}

@media screen and (max-width: 959px) {
    #infographics .titleInfo {
        font-size: 26px;
    }
    #infographics .value {
        font-size: 60px;
        line-height: 80px;
    }
    #infographics .titleInfo .bigger {
        font-size: 36px;
        line-height: 64px;
    }
    #infographics .timer {
        font-size: 85px !important;
    }
    #infographics .tab-content li {
        padding: 40px 5%;
    }
}
  
@media screen and (max-width: 700px) {
    #infographics .titleInfo {
        font-size: 22px;
        line-height: 10px;
    }
    #infographics .value {
        font-size: 50px;
        line-height: 60px;
    }
    #infographics .titleInfo .bigger {
        line-height: 51px;
        margin-top: 15px;
    }
    #infographics .timer {
        font-size: 65px !important;
    }
    #infographics .subtitle {
        font-size: 16px;
        line-height: 40px;
    }
    #infographics .labelInfo:before {
        width: 50%;
        margin: 10px auto;
    }
}

@media screen and (max-width: 600px) {
    #infographics .tab-content li {
        width: 100%;
        padding: 10%;
    }
    #infographics .titleInfo, #infographics .subtitle {
        line-height: 30px;
    }
    #infographics li > span.titleInfo > br {
        display: none;
    }
    #infographics .container {
        padding: 0;
    }
}

/* Financial Overview */

#financial .container {
    max-width: 800px;
}
#financial h1 img {
    width: 45%;
}
#financial h1 + h3 {
    margin: 30px 0 25px 0;
}
.CustomTable td, .CustomTable th {
    font-size: 16px;
    padding: 6px 3px;
    font-weight: 400;
    text-align: left;
}
.CustomTable th + th, .CustomTable td + td {
    padding-left: 3%;
    text-align: right;
}
.CustomTable th + th {  
    white-space: nowrap;
}
.CustomTable th + th, td.tableSubtitle {
    font-weight: bold;
}
#financial .summary {
    background-color: #e9e9e9;
    text-align: center;
}
#financial .summary .container {
    max-width: 960px;
}
#financial .summary h3 {
   color: #00a5df;
}
#financial .summary hr {
    width: 10%;
    border-color: #272727;
}
tr.tableSpacer td {
    line-height: 1px;
    padding: 2px;
}

@media screen and (max-width: 600px) {
    .financialTable {
        width: 100%;
        overflow: scroll;
        overflow-y: hidden;
        padding-bottom: 20px;
    }
    .CustomTable th, .CustomTable td {  
        white-space: nowrap;
    }
}

/* Significant Scale */

#significant .container {
    max-width: 800px;
}
#significant h4 {
    margin: 5px 0 25px 0;
}
#significant .graphs img {
    width: 49%;
    margin: 15px 0;
}
.graphLegend p:first-child {
    font-weight: bold;
    margin-bottom: 5px;
}
.graphLegend .item1 {
    color: #00a5de;
}
.graphLegend .item2 {
    color: #804987;
}
.graphLegend .item3 {
    color: #f15a22;
}
.graphLegend .footnotes {
    font-size: 16px;
}
#significant .financialTable {
    margin: 30px 0;
    text-align: left;
}
#significant .CustomTable {
    border-top: 1px solid #464343;
    font-weight: bold;
    border-collapse: collapse; 
}
#significant .CustomTable tr {
    border-bottom: 2px dotted #464343;
}
#significant .CustomTable th {
    font-weight: normal;
    font-size: 22px;
}
#significant .CustomTable td {
    position: relative;
}
#significant .CustomTable td {
    font-weight: bold;
}
#significant .CustomTable td:first-child {
    width: 30%;
}
#significant .CustomTable td:first-child span {
    font-weight: normal;
}
#significant .CustomTable td + td, #significant .CustomTable th + th {
    text-align: center;
    width: 19%;
    padding: 10px 5px;
}
#significant .avgTotal {
    font-size: 20px;
    font-style: italic;
    font-family: 'Merriweather', serif;
}
#significant .avgTotal > span {
    font-size: 12px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}
@media screen and (max-width: 959px) {
    #significant .CustomTable img {
        max-width: 130%;
    }
}
@media screen and (max-width: 600px) {
    #significant .CustomTable {
        width: 600px;
    }
    #significant .CustomTable th, #significant .CustomTable td {
        white-space: normal;
    }
}
@media screen and (max-width: 500px) {
    #significant .graphs img {
        width: 80%;
    }
}


/* To My Fellow Shareholders and Employees */
#letter {
    position: relative;
    display: table;
    width:100%;
}
#letter h1 {
    text-align: left;
}
#letter .photo {
    display: table-cell;
    vertical-align: middle;
    width: 34.375%;
    position: relative;
    height: 100%;
}
#letter .content {
    color: #FFFFFF;
    background-color: #00a5df;
    display: table-cell;
    vertical-align: middle;
    width:65.625%;
    padding:3.125% 8% 3.125% 8%;
    height: 100%;
    font-weight: 400;
}
#letter .content p {
    color: #FFFFFF;
    line-height: 22px;
}
#letter img.CEO {
    display: block;
    width:100%;
}
#letter i {
    color: #f15a21;
    font-size: 32px;
    font-weight: bold;
}
#letter a:hover i {
    color: #FFFFFF;
}


@media screen and (max-width: 1280px) {
    #letter .photo img {
        display: none;
    }
    #letter .photo {
        background: url(../images/ceo-letter-preview.jpg) left bottom no-repeat;
        background-size: cover;
    }
}
@media screen and (max-width: 959px) {
     #letter .photo {
        background-position: -20px;
    }
    #letter .content {
        padding:50px 5% 50px 5%;
    }
}
@media screen and (max-width: 768px) {
    #letter .photo {
        display: none;
    }
    #letter .content {
        width:auto;
        display: block;
    }
}

/* Our primary touchpoints */


#touchpoints {
    background-image: url(../images/touchpoints.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
}
#touchpoints .container {
    padding: 7.5% 4%;
    max-width: 1200px;
}
#touchpoints hr {
    width: 104px;
}
#touchpoints h2 {
    margin: 0;
}
#touchpoints ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
#touchpoints li {
    display: inline-block;
    float: left;
    width: 25%;
    padding: 2% 5%;
    margin: 0;
    color: #FFFFFF;
}
#touchpoints h4 {
    font-size: 24px;
    line-height: 28px;
    padding-top: 7.5%;
}
@media screen and (max-width: 768px) {
    #touchpoints li {
        width: 50%;
        padding: 15px;
    }
    #touchpoints h4 {
        padding-top: 50px;
    }
    #touchpoints .container {
        padding: 50px 5%;
    }
}
@media screen and (max-width: 500px) {
    #touchpoints li {
        width: 100%;
        padding: 20px;
    }
}


/* Transitioning a New Company  */
#transitioning {
    background-image: url(../images/transitioning.jpg);
    background-repeat: no-repeat;
    background-position: 0 -100px;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
}
#transitioning h3 {
    padding-bottom: 7%;
}
#transitioning .container {
    padding: 7.5% 4%;
    max-width: 1200px;
}
@media screen and (max-width: 768px) {
    #transitioning {
        background-position: center;
    }
}

/* Following Our Strategic Map */
#following {
    background-color: #e9e9e9;
    overflow: hidden;
    border-bottom: 2px solid #e9e9e9;
}
#following .container {
    width: 50%;
    float: left;
} 
#following div.container:first-child { 
    background-color: #FFFFFF;
}
#following div.container + div { 
    background-color: #e9e9e9;
}
#following h2, #following h5 {
    color: #f15a21;
}
@media screen and (max-width: 768px) {
    #following .container {
        padding: 50px 5%;
    }
}
@media screen and (max-width: 500px) {
    #following .container {
        width: 100%;
    }
}

/* Valuing Safety */
#valuingSafety {
    background-image: url(../images/valuingsafety.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
}
#valuingSafety .container {
    padding: 12% 0 8% 0;
}
#valuingSafety .seeMore {
    color: #f15a21;
    background-color: rgba(255,255,255,0.5);
}
#valuingSafety .seeMore:hover {
    color: #ffffff;
    background-color: rgba(0,0,0,1);
}
@media screen and (max-width: 768px) {
    #valuingSafety .container {
        padding: 50px 5%;
    }
}

/* Our Service Territories - slider */
#servTerritories h2 {
    color: #f15a21;
    text-align: center;
    padding-top: 35px;
}
#servTerritories hr {
    border-color: #f15a21;
}
#servTerritories .slick-carousel {
  max-width: 1250px;
  margin: 0 auto;
}
#servTerritories .container {
    max-width: 980px;
    padding: 0 10px;
    color: #000000;
    font-family: 'Open Sans Condensed', sans-serif;
}
#servTerritories .slick-prev:before, #servTerritories .slick-next:before {
    color: #272727;
}
#servTerritories .slick-dots li button {
    background-color: #e8e7ea;
}
#servTerritories .slick-dots li.slick-active button {
    background-color: #d3d3d3;
}
#servTerritories .imgleft {
    width: 38%;
    display: inline-block;
    vertical-align: middle;
}
#servTerritories .text {
    width: 61%;
    display: inline-block;
    vertical-align: middle;
    padding-right: 10%;
}
#servTerritories .slideTitle {
    text-align: left;
    border-bottom: 1px solid #000000;
    padding-bottom: 12px;
}
#servTerritories .slideTitle:before {
    background: url(../images/territories-oklahoma-bullet.jpg) left bottom no-repeat;
    content: "";
    width: 17px;
    height: 17px;
    padding-right: 20px;
    display: inline-block;
    margin-bottom: -21px;
    vertical-align: bottom;
}
#servTerritories .kansas .slideTitle:before {
    background: url(../images/territories-kansas-bullet.jpg) left bottom no-repeat;
}
#servTerritories .texas .slideTitle:before {
    background: url(../images/territories-texas-bullet.jpg) left bottom no-repeat;
}
#servTerritories .text ul {
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
    margin: 10px 0 0 0;
    padding-left: 35px;
    float: left;
}
#servTerritories .text ul.col2  {
    margin-left: 30px;
}
#servTerritories .value {
    font-size: 32px;
    line-height: 34px;
    color: #00a5df;
}
#servTerritories .kansas .value {
    color: #f15a21;
}
#servTerritories .texas .value {
    color: #7e4885;
}
#servTerritories p {
    margin-top: 5px;
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
}
@media screen and (max-width: 959px) {
    #servTerritories .text {
        padding-right: 0;
    }
}
@media screen and (max-width: 768px) {
    #servTerritories {
        padding: 50px 2%;
    }
    #servTerritories .container {
        padding: 0;
    }
    #servTerritories .imgleft {
        width: 100%;
        display: block;
    }
    #servTerritories .imgleft img {
        margin: 0 auto;
    }
    #servTerritories .text {
        width: 90%;
        display: block;
        margin: 0 auto;
    }
}
@media screen and (max-width: 580px) {
    #servTerritories .text {
        width: 100%;
        display: block;
    }
}
@media screen and (max-width: 500px) {
    #servTerritories .container {
        padding: 0 10%;
    }
    #servTerritories .text ul  {
        width: 100%;
        display: block;
        padding: 0;
    }
    #servTerritories .text ul.col2  {
        margin: 0;
    }
}

/* Improving Safety */
#improvingSafety {
    background-color: #7e4885;
    color: #FFFFFF;
}
#improvingSafety p {
    color: #FFFFFF;
    margin: 5px 0;
}
#improvingSafety .h5.small {
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    padding: 0;
}
#improvingSafety ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#improvingSafety ul li {
    width: 50%;
    float: left;
    padding: 0 8%;
}
#improvingSafety ul li img { 
    margin: 15px 0;
}
#improvingSafety ul li:first-child {
    border-right: 1px solid #FFF;
}
#improvingSafety .text {
    width: 50%;
    margin: 0 auto;
} 
#improvingSafety .h2 {
    padding-top: 15px;
    font-size: 20px;
    line-height: 28px;
}
#improvingSafety .h5 {
    font-size: 16px;
    line-height: 24px;
}
@media screen and (max-width: 768px) {
    #improvingSafety ul li {
        padding: 0 5%;
        width: 100%;
    }
    #improvingSafety ul li:first-child {
        padding-bottom: 25px;
        margin-bottom: 25px;
        border-bottom: 1px solid #FFF;
        border-right: none;
    }
    #improvingSafety .text {
        width: 90%;
    }
}
@media screen and (max-width: 500px) {
    #improvingSafety ul li:first-child {
        padding-bottom: 20px;
    }
}



/* Giving back to communities - slider on desktop*/
#givingBack {
    background-color: #e9e9e9;
}
#givingBack .container {
  max-width: 900px;
  margin: 0 auto;
  padding-bottom: 0
}
.slick-carousel-desk {
    max-width: 1250px;
    margin: 0 auto;
}
#givingBack h2 {
    color: #f15a21;
}
#givingBack hr {
    border-color: #f15a21;
}
#givingBack .h2 {
    font-size: 20px;
    line-height: 26px;
}
#givingBack > .container > p {
    width: 80%;
    margin: 0 auto;
    font-size: 20px;
    line-height: 26px;
    margin-top: 10px;
}
#givingBack > .container ul {
    list-style-type: none;
    margin: 50px auto 0 auto;
    padding: 0;
    display: inline-block;
}
#givingBack > .container ul li {
    display: inline;
    float: left;
    background-color: #b4b4b4;
    padding: 15px 10px 15px 45px;
    color: #FFFFFF;
    position: relative;
}
#givingBack .triangleright {
  width: 0;
  height: 0;
  border-left: 30px solid #e9e9e9;
  border-top: 27px solid transparent;
  border-bottom: 27px solid transparent;
  margin: 0 auto;
  background-attachment: fixed;
  position: absolute;
  margin-left: -45px;
  top: 0;
}
#givingBack > .container ul li i {
    color:#e9e9e9;
  font-size: 115px;
  line-height: 49px;
    position: absolute; 
    left: 0;
    top: 0;
}
#givingBack > .container ul li.last {
    background-color: #7e4885;
}
#givingBack > .container ul li.last .triangleright  {
    border-left: 30px solid #b4b4b4;
}
#givingBack .color {
    color: #7e4885;
    font-size: 24px;
    line-height: 20px;
}
#givingBack ul li.h2 {
    font-size: 18px;
    line-height: 24px;
}
#givingBack .slide .container {
   padding: 20px 0;
}
#givingBack .slick-prev:before, #givingBack .slick-next:before {
    color: #272727;
}
#givingBack .slick-dots li button {
    background-color: #c1c1c1;
}
#givingBack .slick-dots li.slick-active button {
    background-color: #898989;
}
#givingBack .imgleft {
    width: 40%;
    vertical-align: middle;
    display: table;
    float: left;
    min-height: 300px;
}
#givingBack .imgleft.fleft {
    float: right;
}
#givingBack .imgContainer {
    display: table-cell;
    vertical-align: middle;
}
#givingBack .text {
    vertical-align: middle;
    padding-right: 10%;
    display: table;
    min-height: 300px;
}
#givingBack .slide{
    margin-bottom: 0;
}
#givingBack .slide .h1 {
    color: #7e4885;
}
#givingBack .slide1 .h2 {
    margin: 0;
    color: #7e4885;
}
#givingBack .slide1 .text {
    padding-right: 0;
}
#givingBack .slide p {
    margin: 0;
    font-size: 22px;
    line-height: 34px;
}
#givingBack .slide3 .text {
    padding: 40px;
}
#givingBack .slide3 .h2 {
    font-size: 32px;
    line-height: 32px;
    margin: 0;
    color: #7e4885;
}
#givingBack .slide3 p {
    font-size: 24px;
    line-height: 32px;
    margin: 0;
}


@media screen and (max-width: 959px) {
    #givingBack ul li {
        margin-bottom: 10px;
    }
    #givingBack .slide .container {
        padding: 30px;
        max-width: none;
    }
    #givingBack > .container ul {
        padding: 0 3.2%;
    }
}

@media screen and (max-width: 600px) {
    #givingBack .imgleft {
        width: 50%;
    }
    #givingBack .slide .container {
        padding: 0 5%;
    }
    #givingBack > .container ul {
        display: block;
        margin-bottom: 30px;
    }
}
@media screen and (max-width: 500px) {
    #givingBack .imgleft {
        width: 100%;
        display: block;
        min-height: 0;
        float: none !important;
    }
    #givingBack .imgContainer {
        display: block;
    }
    #givingBack .imgleft img {
        margin: 0 auto;
    }
    #givingBack .text {
        width: 100%;
        padding: 25px 0 !important;
        display: block;
        padding-right: 0;
        min-height: 0;
    }
    #givingBack > .container ul li {
        padding-left: 15px;
        display: block;
        clear: both;
    }
    #givingBack .triangleright, #givingBack > .container ul li i {
        display: none;
    }
}


/* Efficiency */

#efficiency .container {
    padding: 7% 5% 2% 5%;
    max-width: 1200px;
}
#efficiency hr {
    border-color: #f15a21;
}
#efficiency hr {
    width: 204px;
}
#efficiency h2, #efficiency h5 {
    color: #f15a21;
}
#efficiency h5 {
    padding: 0;
}
#efficiency .slick-carousel {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 2%;
}
#efficiency .slide .container {
    padding-top: 0;
    padding-bottom: 0;
}
#efficiency .slide hr {
    width: 130px;    
    border-top: 2px dotted #272727;
}
#efficiency ul.tab-content {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}
#efficiency ul.tab-content li {
    display: inline-block;
    float: left;
    width: 25%;
    margin: 0;
    color: #00a5df;
}
#efficiency ul.tab-content.tab2 li {
    width: 33.33%;
}
#efficiency li img {
    margin: 0 auto;
}
#efficiency .slide h2 {
    font-size: 28px;
    line-height: 32px;
    text-transform: none;
}
#efficiency .slide .h2 {
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 40px;
    margin: 0;
}
#efficiency .slide h2, #efficiency .slide h5 {
    color: #000000;
}
#efficiency .slick-prev:before, #efficiency .slick-next:before {
    color: #272727;
}
#efficiency .slick-dots li button {
    background-color: #c1c1c1;
}
#efficiency .slick-dots li.slick-active button {
    background-color: #898989;
}
#efficiency .value.h2 {
   background: url(../images/arrowup.jpg) 1px 15px no-repeat;
   padding-left: 20px;
   font-size: 40px;
   line-height: 50px;
   cursor: default;
}
#efficiency .value.timer {
   background: none;
   padding-left: 0;
}
@media screen and (max-width: 768px) {
    #efficiency ul.tab-content li, #efficiency ul.tab-content.tab2 li {
        width: 50%;
        padding: 15px;
    }
    #efficiency .container {
        padding: 20px 5% 0 5%;
    }
    #efficiency .slick-carousel {
        margin: 30px 2%;
    }
}
@media screen and (max-width: 500px) {
    #efficiency ul.tab-content li, #efficiency ul.tab-content.tab2 li {
        width: 100%;
        padding: 20px;
    }
}

/* Our Board of Directors */

#directors {
    background-image: url(../images/board-of-directors.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    #directors .container {
        padding: 50px 5%;
    }
}


/* Downloads */

#downloads {
    background-image: url(../images/downloadsbg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
    padding: 20px 0;
    text-align: center;
    position: relative;
    color: #FFFFFF;
    overflow: hidden;
}
#downloads .container {
    width: 50%;
    float: left;
} 
#downloads .h2 {
    font-size: 24px;
}
#downloads img {
    border: 2px solid #000000;
}
@media screen and (max-width: 768px) {
    #downloads .container {
        padding: 50px 5%;
    }
}
@media screen and (max-width: 500px) {
    #downloads .container {
        width: 100%;
    }
}


/* Details pages - globals */

.pushQuote, .pushQuote h1 {
    text-align: left;
}
.pushQuote h1, .pushQuote h5 {
    color: #00a5df;
    margin-bottom: 40px;
}
.pushQuote h2 {
    padding: 30px 0 20px 0;
    color: #00a5df;
    font-size: 36px;
}
.detailsPage .container {
    max-width: 960px;
    padding: 100px 3% 70px 3%;
}
.quote {
    float: left;
    width:200px;
    text-align: right;
    background-color: #00a5df;
}
.quote h5 {
    color: #FFFFFF;
    padding: 15px;
    line-height: 30px;
}
.quote + .pushQuote {
    margin-left: 240px;
}
.detailsPage h1 + p,
.detailsPage h2 + p {
    font-weight: bold;
}
.topBack {
    position: fixed;
    left:0;
    top:0;
}
.BackHome {
    display: inline-block;
    font-size: 18px;
    line-height: 27px;
    padding:14px 25px;
    color:#fff;
    background-color: #00a5df;
    margin-top: 20px;
}
.topBack .BackHome {
    margin-top: 0;
}
.BackHome .fa {
    margin-right: 5px;
}
@media screen and (max-width: 959px) {
    .quote img.cloud {
        display: inline-block;
        vertical-align: middle;
        padding-right: 25px;
        width:20%;
        max-width: 90px;
    }
    .quote h2 {
        margin: 0;
        display: inline-block;
        vertical-align: middle;
        max-width: 79%;
    }
    .quote {
        float: left;
        width:180px;
        text-align: right;
        overflow: visible;
    }
    .quote + .pushQuote {
        margin-left: 240px;
        clear: none;
    }
}
@media screen and (max-width: 640px) {
    .quote {
        float: none;
        margin-bottom: 20px;
        width:auto;
        text-align: left;
        margin: 0 -15px 30px -15px;
    }
    .quote img, .pushQuote {
        width:100%;
    }
    .quote + .pushQuote {
        margin-left: 0;
    }
}
@media screen and (max-width: 480px) {
    .story-quote .quote {
        display: none;
    }
    .topBack .BackHome span {
        display: none;
    }
}

.story .pushQuote h5, .story .pushQuote h2 {
    color: #f15a21;
    padding-top: 0;
}
.story .BackHome, .story .quote {
    background-color: #f15a21;
}
.story .pushQuote p + h5 {
  font-size: 20px;
  margin-bottom: 20px;
  margin-top: 40px;
}


/* Detail page - Improving Safety */

.safetydetails .pushQuote h5, .safetydetails .pushQuote h2 {
    color: #7e4885;
    padding-top: 0;
}
.safetydetails .BackHome, .safetydetails .quote {
    background-color: #7e4885;
}
.safetydetails .h5.small {
    font-size: 13px;
    line-height: 18px;
    font-weight: normal;
    padding: 0;
}
.safetydetails ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.safetydetails ul li {
    border-top: 1px solid #272727;
    padding: 15px 0;
}
.safetydetails ul li img { 
    margin: 15px 0;
    width: 80%;
}
.safetydetails .h1 {
    text-align: left;
}
.safetydetails .h2 {
    padding-top: 15px;
    font-size: 20px;
    line-height: 28px;
}
.safetydetails .h5 {
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 30px 0;
}
@media screen and (max-width: 768px) {
    .safetydetails ul li:first-child {
        padding-bottom: 30px;
    }
    .safetydetails .text {
        width: 90%;
    }
    .safetydetails ul li img { 
        width: auto;
    }
}
@media screen and (max-width: 500px) {
    .safetydetails ul li:first-child {
        padding-bottom: 20px;
    }
}

/* Detail page - Our Board of Directors */
.directorsDetails .whitespace {
    margin-top: -45px;
    background-color: #FFFFFF;
    position: absolute;
    left: 50%;
    height: 42px;
    padding-right: 50%;
    margin-left: 40px;
}
.directorsDetails .whitespace2 {
    margin-top: -45px;
    background-color: #FFFFFF;
    position: absolute;
    right: 50%;
    height: 42px;
    padding-left: 50%;
    margin-right: 40px;
}
.directorsDetails .triangle {
    border-left: 40px solid #FFFFFF;
    border-top: 40px solid transparent;
    border-right: 40px solid #FFFFFF;
    background-attachment: fixed;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    margin-top: -45px;
    padding-bottom: 3px;
}
.directorsDetails .container {
    padding-top: 0;
}
.directorsDetails h2, .directorsDetails h5 {
    padding: 0;
    margin: 10px 0;
}
.directorsDetails h2 {
    margin-bottom: 40px;
}
.directorsDetails ul {
    list-style-type: none;
    font-weight: normal;
    padding: 0;
    margin-top: 15px;
}
.directorsDetails ul li .h2 {
    font-size: 22px;
    line-height: 26px;
    font-style: normal;
    margin: 10px 0;
}
.directorsDetails .pushQuote ul + h5 {
    font-size: 24px;
    margin: 40px 0;
}
.directorsDetails ul.exec li {
    padding-bottom: 10px;
}