@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,300,600);
@charset "utf-8";
/* CSS Document */

 body{background-image:none;background-color: #F7FBFA;  font-family: 'Open Sans', arial, sans-serif;} 
 a {color: #2BB571;}

 .wrapper { border: 0; box-shadow: none; background-color: #fff;} 
 .container{min-width:404px;}
  
 /*Header*/
 .header-index {background: url(../Images/bg-top-index.jpg);}
.header-expertise {
  background-image: url(../Images/bg-top-expertise.jpg); }
.header-partner {
  background-image: url(../Images/bg-top-sales-partner.jpg); }
.header-gas {
  background-image: url(../Images/bg-top-gas.jpg); }
.header-wholesale {
  background-image: url(../Images/bg-top-wholesale.jpg); }
.header-customer-service {
  background-image: url(../Images/bg-top-customer-service.jpg); }
.header-contact-us {background-image: url(../Images/bg-top-contact-us.jpg); }

.headerTopText { background-color:#18925A;color: #ffffff; font-size:11px;text-align:right;padding:2px 15px; margin: 0 -15px;}
    .headerTopText a {color: #ffffff;}

.headerImage { background-color: #FFF; background-position: center top; background-repeat:no-repeat;background-size: 100%; margin: 0 -15px; border-top:3px solid #2BB571; position:relative;opacity: 0; 
               filter: alpha(opacity=0);min-height:180px;}
.headerImage .logo {position: absolute;top:15%;left:5%;background: url(../Images/company-logo.png) no-repeat; background-size:contain; } 
.headerImage .headerMSG{position: absolute;top:40%;left:15%;}
.headerMSG .headerText {color: #FFF; font-size: 40px;line-height: 40px; font-weight: 100;  }
.headerMSG .btn {border-radius: 24px; padding: 8px 12px; margin-top:10px; color: #ffffff; border:2px solid #2BB673;
  background: rgba(43, 181, 113, 0.7); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);}
.headerMSG .btn:hover,.headerImage .btn:active {background-color:#2BB673;}
.headerImage .wave {position: absolute; right: 0; bottom: 0; width:218px; height:183px }

.navbar-inverse { background-color: transparent;z-index:200;position: absolute; top: 0; right:-15px}
.dropdown-menu { background-color: #2FAA74}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #FFFFFF}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse {border:0px}
.navbar-inverse .navbar-nav>li>a { color: #ffffff; font-size:14px;  background-color: transparent }
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #ffffff; border-top:4px solid #2BB571;border-bottom:1px solid #ffffff;
    background: rgb(43, 181, 113); background: rgba(43, 181, 113, 0.5); }
.navbar-inverse .navbar-nav>.active>a { color: #FFFFFF;background-color: transparent;border-top:4px solid #2BB571;border-bottom:1px solid #ffffff;}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #ffffff; background: rgb(43, 181, 113); background: rgba(43, 181, 113, 0.5); }
.dropdown-menu>li>a { color: #0E8BD3}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #084D75}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #0E8BD3}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #0E8BD3}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #0E8BD3}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #0E8BD3} 
.navbar-inverse .navbar-toggle {color: #fff; background-color: transparent;border-color: #18925A;}
.navbar-nav>li>a {padding-top:15px; padding-bottom: 5px;}
.navbar-nav { margin: 0;}
.nav>li>a {position: relative; display: block; padding: 15px 10px 5px 10px;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {background-color: #18925A;}

.subheader { text-align: center; font-size:28px;margin:15px;color:#2BB673;}
.subheader strong { font-size:48px;text-shadow:2px 1px 0px #fff, 5px 4px 0px rgba(0,0,0,0.15); }
.subheader span {font-size: 22px;}
.subheader a:link,  .subheader a:visited {color:#2BB673; border-bottom:1px solid #2BB673; display:inline; text-decoration:none;}
.subheader a:hover, .subheader a:active {color: #ffffff; background-color:#2BB673;}

.inputerror {border: solid 2px #C33; background-color: #FEE; color: #000;}
.form-group .btn {border:2px solid #2BB673; background: rgba(43, 181, 113, 0.7); color:#fff; font-size: 16px;border-radius: 24px; padding: 8px 24px; border:2px solid #2BB673; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);}
.form-group .btn:hover { background-color:#2BB673;
}

.divFooterText {padding-bottom: 20px;}
.divFooterText span {line-height: 20px;color: #ABABAD; background-color: #F7FBFA; z-index: 10;}
.divFooterText strong { color: #5add9c;font-weight: normal;}


.col-green {
    border-top: #18925a solid 8px;
    margin-top: 10px;
}
.col-teal {
    border-top: #20bdbe solid 8px;
    margin-top: 10px;
}
.col-blue {
    border-top: #0e76bc solid 8px;
    margin-top: 10px;
}
.col-green h1 {
    color: #2bb673;
        text-transform: uppercase;
        _margin-top:10px;
        font-size: 30px;
    }

.col-green h1 span{
     font-size: 22px; 
    } 
.col-green h3 span,  .col-blue h3 span, .col-teal h3 span{
     font-size: 18px; 
    } 
.col-green h4, .col-green a {
    color: #2bb673;
}
.col-teal h4, .col-teal a {
    color: #20bdbe;
}
.col-blue h4, .col-blue a {
    color: #0e76bc;
}
.col-solidgreen{
    padding: 10px;
     
    background: #2bb673;
    color: #FFF;
  }
.col-solidgreen a {
    color: #fff;
    }

.glyphicon-hardhat {height:18px;width:18px;background: url(../Images/hardhat.png) no-repeat; background-size:contain}
.pic100 {
    width: 100%;  background-color: #ffffff;
    border: 1px solid #cdcdcd;
    padding: 5px;    
    margin-top:20px;
}

.mainLinks {
    border-top: 1px solid #0e76bc;
    border-bottom: 1px solid #0e76bc;
    margin: 20px 0;
    padding: 10px;
}
.mainLinks  .btnShadow {
    -webkit-box-shadow: 5px 5px 10px 0 #8A8A8A;
    box-shadow: 2px 2px 5px 0 #8A8A8A;
    -webkit-border-radius: 5px;
   border-radius: 24px;
  padding: 8px 12px; margin:10px;
    border: solid 1px #fff;
}

.enroll_pricelock {
    background: url(../Images/btn-small.jpg) center center no-repeat; padding:10px; height:164px; width:100%;cursor:pointer;      
}

.marginT10 {
    margin-top: 10px !important;
}
.marginT20 {
    margin-top: 20px;
}
.marginB20 {
    margin-bottom: 20px;
}
.marginB15 {
    margin-bottom: 15px;
}
.marginB10 {
    margin-bottom: 10px !important;
}
.padding5 {
    padding: 5px;
}
.width100 {
    width: 100%;
}
.inline-box {
    display: inline-block;
}

.red {
    color: #C33;
}
.green {
  color: #2bb673; }

.bg-white {
    background-color: #ffffff;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}
.wordNoBreak {
    word-break: keep-all;
}
.wordBreakAll {
    word-break: break-all;
}

.divErrorSummary {
    margin: 10px auto;
}



/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
    }

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

.headerImage { height:206px; }
.headerImage .logo { width:300px; height:46px; }  
.headerMSG .headerText {font-size: 16px; line-height: 20px;} 
.headerMSG .btn {font-size: 16px; }
.headerImage .wave {display:none;}

.divFooterText { position: relative; padding: 20px 0;}
.divFooterText span { line-height: 20px; color: #ABABAD;}
.divFooterText strong { color: #5add9c; font-weight: normal; }
.divFooterLine { border-top: 0; } 
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.wrapper {box-shadow: 12px 0 15px -2px rgba(6, 68, 38, 0.5), -12px 0 8px -2px rgba(6, 68, 38, 0.5); } 
 
.headerImage { height:276px; }
.headerImage .logo {width:300px; height:46px; }  
.headerMSG .headerText {font-size: 24px; line-height: 28px;} 
.headerMSG .btn {font-size: 20px; }
.headerImage .wave { width:100px; height:83px}

.divFooterText {position: relative; padding: 20px 0; width: 740px; margin: auto; } 
.divFooterText strong {color: #5add9c; font-weight: normal;}
.divFooterLine { border-top: 1px solid #5add9c; position: absolute;top: 30px; height: 10px;width: 100%;z-index: 8; }
.divFooterText span {position: absolute; width: 300px; left: 220px; line-height: 20px; color: #ABABAD; background-color: #F7FBFA; z-index: 10;}     
.enroll_pricelock {
    background: url(../Images/pricelock_enroll.jpg) center right no-repeat; padding:10px; height:164px; width:100%; cursor:pointer;}

}

/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {

body {background: url(../Images/html_bk.jpg) 50% 0% no-repeat;background-size: 140%; background-color: #F7FBFA;} 
.headerImage { height:357px; } 
.headerImage .logo {width:442px; height:68px; }

.headerImage .headerMSG{}
.headerMSG .headerText {font-size: 28px; line-height: 30px;} 
.headerMSG .btn {font-size: 20px; }
.headerImage .wave { width:150px; height:126px}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1201px) {
.headerImage { height:430px;}
.headerMSG .btn {font-size:24px;}
    
.divFooterText {position: relative; padding: 20px 0; width: 920px; margin: auto; }
.divFooterText strong {color: #5add9c; font-weight: normal;}
.divFooterLine { border-top: 1px solid #5add9c; position: absolute;top: 30px; height: 10px;width: 100%;z-index: 8; }
.divFooterText span {position: absolute; width: 300px; left: 310px; line-height: 20px; color: #ABABAD; background-color: #F7FBFA; z-index: 10;}

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
.headerImage .logo {width:300px; height:46px; }  
.headerMSG .headerText {font-size: 16px; line-height: 20px;} 
.headerMSG .btn {font-size: 16px; }
.headerImage .wave {display:none}
}

@media only screen and (max-width : 768px) {
.wrapper {border-bottom: 1px solid #e8eaea;}
.navbar-inverse {right:0}
.navbar-inverse .navbar-nav > li > a {text-shadow: 0 0 0 rgba(0,0,0,0); } 
.navbar-inverse .navbar-collapse { border: 0;}
.navbar-inverse .navbar-nav>li>a { color: #ffffff; font-size:14px; background-color: #2BB571;   border-bottom:1px solid #ffffff;  }
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #2BB571; background-color: #ffffff;border-top:0;border-bottom:1px solid #2BB571; /*opacity: 1; filter: alpha(opacity=1);*/}
.navbar-inverse .navbar-nav>.active>a { color: #2BB571;background-color:#FFFFFF;border-top:0;border-bottom:1px solid #ffffff;}
}
/* Medium Devices, Desktops */ @media only screen and (max-width : 992px) {
}