/* Main Wrappers */
#bill-explainer {position:relative}
#bill-explainer * {outline:0}

/* Intro */
.bill-explainer h1 {color:#58bfce;margin-bottom:15px}

/* Pages */
#pages {float: left;position:relative;width: 100%;}
#pages .page{width: 100%;height: 100%;float: left;}

.flip-holder{
  width: 100%;
  height: 100%;
  perspective: 15000px;
  float: left;
}

.old-browser .overlay{
  width: 100%;
  height: 100%;
  background:#FFF;
  position: absolute;
  top:0;
  left: 0;
  z-index: 30;
  display: none;
}


.flip-holder .page{backface-visibility: hidden;transition: transform 1s;transform-style: preserve-3d;transition: transform 1s;}
.flip-holder #page1{transform:rotateY(0deg);position: relative;z-index: 20}
.flip-holder.active #page1{transform:rotateY(-180deg);}
.flip-holder #page2{transform:rotateY(180deg);position: absolute;top:0;left:0;z-index: 10}
.flip-holder.active #page2{transform:rotateY(0deg);z-index: 30}

.old-browser .flip-holder .page{transform:rotateY(0deg) !important; }
.old-browser .flip-holder #page1{display: block;}
.old-browser .flip-holder #page2{position: relative;}
.old-browser .flip-holder .page.hidden{display: none !important;}
.page .section{opacity: 0;}
.columns{
  width: 100%;
  float: left;
  position: relative;
  background:#f6f7f7; 
}
.columns.bottom{padding-bottom: 5%;}
.columns .left-col{
  width: 61%;
  float: left;
}
.columns .left-col > div{position: relative !important;top:0 !important;left: 0 !important;right:auto !important;bottom:auto !important;}
.columns .left-col #name-address{margin:3% 0 0 25%; max-width: 36.4%;}
.columns .left-col #charge-details-top{
  margin:16.5% 0 0 5.5%; 
  width: auto;
}
.columns .main-logo{margin:5% 0 0 14%; }
.columns .main-logo img{max-width: 59.8%;}
.columns img{max-width: 100%;height: auto;}
.columns .left-col #charge-details-bottom{
  margin:3% 0 0 5.5%; 
  width: auto; 
}
.columns .right-col{
  width: 31.5%;
  float: right;margin-right: 4.5%;
}
.columns .right-col > div{
  position: relative;top:0 !important;left: 0 !important;
  right: 0 !important;
  bottom:auto !important;
}
.columns .pages{margin:8.8% 2.1% 0 0;float: right; width: 25%}
.columns .tax-invoice{margin:35% 0 0 0;}
.columns #account-due-date{width: 100%;margin-bottom: 2%;}
.columns #your-usage{width: 100%;}
.columns #account-summary{width: 100%;margin-bottom: 5%;}
.columns .bottom-part{padding:1.5% 4.5% 0 4%;}
.columns #post-bill-pay{
  width: 62%;
  float: left;
  margin: 2% 0 0 7%;
}
.columns #qr-code{
  width: 24%;
  float: right;
  margin: 0 1% 0 0;
}
.columns #account-due-date-footer{margin:-36% 0 0 0.9%; }
.columns #account-due-date-footer img{float: right;}
#page2 .left-col .acc-details-title{margin-left:5.5%;margin-bottom: 1.5%; }
#meter-details{margin-bottom: 6%;}
#meter-details,#account-activity{margin-left:5.5% }
.bottom-line{
  margin:1% 4.5% 1% 5.5%;
  float: left;
  clear: both;
}
#payment-options{
  margin:0 4.5% 6% 5.5%;
  clear: both;
  position: relative;
}
.columns .full .pages{margin-top:0;text-align: right;margin-right: 0; }
.columns .full .hold{width: 31.5%;float: right;margin-right: 1.5%;}
.columns .full{
  overflow: hidden;
  padding:2.5% 4.5% 1% 5.5%;
}

.columns .see{
  text-align: center;
  padding-top: 8%;
  clear: both;
}
.section.half-hidden{opacity: 0.5 !important;}
/* Explainer */
.explainer {position:absolute;top:0;left:-320px;right:-320px;height:100%;width:240px;padding:0 30px;background:#FFF;z-index:51}
#explainer-right {right:-320px;left:auto;transition:right 350ms linear;}
#explainer-left {left:-320px;transition:left 350ms linear;right:auto}
#explainer-right.active {right:0}
#explainer-left.active {left:0}
.explainer ul {list-style:disc;margin:0 0 1em 18px}
.explainer li {list-style:disc;margin-bottom:5px}
.explainer .desc,.explainer .controls {
/*animation-delay: 0.2s;*/
    /*-webkit-animation-delay: 0.2s;*/
  -webkit-animation-duration:1.5s;animation-duration:1.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
.explainer .desc p {margin-bottom:1em}
.explainer.active .desc,.explainer .controls {display:block;-webkit-animation-name:changeOpacity;animation-name:changeOpacity;-moz-animation-name:changeOpacity}
.explainer.active .fixed-pane {display:block}
.explainer .fixed-pane {display:none;padding:15px 0;top:0;width:240px}
.explainer .back {display:none}
.explainer .close {background:url(../images/UserUploadedImages/558/ico-close.svg) no-repeat;height:40px;width:40px;display:inline-block;margin-bottom:25px;text-indent:-1000em}

/* Misc Items */
#flip {background:url(../images/UserUploadedImages/558/ico-flip.svg) no-repeat;display:block;height:25px;margin:10px auto 10px;text-indent:-1000em;width:100px}
#fallback {color:#fff; background:#3ebfd2;border:1px solid #188c9e;font-size:16px;margin:15px 30px 15px;padding:10px;text-align:center}
#fallback a {color:#FFF;text-decoration:underline}



/* Bill Sections */
.section {cursor:pointer;transition:all .2s ease-in-out;z-index:10}
.section img {width:100%;height:auto}
.page .section:not(.half-hidden):hover, .page.active .section.active,.page .section.mobile-active {transform:scale(1.1);opacity:1 !important}
.page .section:not(.half-hidden):hover,.page .section.active,.page .section.active span.tooltip,.section.mobile-active .tooltip{z-index: 30 !important}
.section:not(.half-hidden):hover .tooltip,
.section.active .tooltip,
.page.active .section.active .tooltip,
.page.active .section:not(.half-hidden):hover .tooltip,.section.mobile-active .tooltip {opacity:1 !important;z-index:11}
.desc {display:none}
.tooltip {cursor: pointer; background:url(../images/UserUploadedImages/558/ico-tooltip.svg) no-repeat;height:40px;width:40px;right:-20px;top:-20px;opacity:0;position:absolute;transition:all .2s ease-in-out}
img.desc-mobile{display: none;}
.flip-holder.popup-opened {perspective: none}
.section.half-hidden{pointer-events:none;}
/* Responsive Rules */
@media screen and (max-width:1023px) {
	#back {display:block}
  .flip-holder .page{transform:rotateY(0deg) !important; }
  .flip-holder #page1{display: block;}
  .flip-holder .page.hidden{display: none !important;}
  .flip-holder #page2{position: relative !important;}
  .overlay{
    width: 100%;
    height: 100%;
    background:#FFF;
    position: absolute;
    top:0;
    left: 0;
    z-index: 30;
    display: none;
  }
  .explainer#explainer-left{position: absolute; visibility: hidden; top:0; left: 0;right:auto; width: calc(100% + 60px);padding: 0;z-index: -1;margin:0 -30px;}
  .explainer#explainer-right{position: absolute; visibility: hidden; top:0; left: 0;right:auto;width: calc(100% + 60px);padding: 0;z-index: -1;margin:0 -30px;}
  .explainer.active{z-index: 100 !important;}
  .explainer .fixed-pane{
    width: 100%;
    box-sizing: border-box;
    padding:0 30px;
  }
  img.desc-mobile{max-width: 100%;margin:0 auto 30px;display: block;clear: both;}
  .explainer .close{margin-bottom: 10px;position: relative;z-index: 1000}
  img.desc-mobile{display: block;}
  
  .explainer.active {visibility: visible !important;background:#f6f7f7 !important; }
  .section:hover,.section.active,
  .section:hover img,.section.active img{transform:none !important;transition:none !important;}
  span.tooltip{opacity: 1 !important;z-index: 30 !important;}
  .fixed-pane{position: static !important;}
  .explainer .back{float: right;display: block;padding-top: 4px;}
  .explainer .close{
    float: right;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 5px;
    margin-top: 3px;
  }
  .controls{
    float: right;
    position: relative;
    z-index: 200;
    cursor: pointer;
    padding: 10px 0 0;
  }
  .sticky-wrapper{
    height: 100% !important;
  }
  .fixed-pane{height: 96%;overflow: auto;}
  
  .flip-holder #page2{position: relative;}
}

@media screen and (max-width:767px) {
  .tooltip{
    width: 20px;
    height: 20px;
    right: -10px;
    top:-10px;
  }
  
}

@media screen and (max-width:500px) {
  img.desc-mobile{max-width: 100%;}
}


@keyframes changeOpacity {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
 }

@-webkit-keyframes changeOpacity {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
 }