@import url("reset.css");

.parallax_fixer {position: fixed; z-index: -10; width: 0; height: 0;}

/*-----clearfix------*/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;  }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/**/

body{background: #fff; font-family:arial, helvetica, sans-serif}
body.modal_open{overflow: hidden;}
/*--clases genéricas--*/
.left{float:left;}
.right{float:right;}
.v_center1{display:table; width:100%; height:100%;}
.v_center2{display:table-cell; vertical-align:middle;}
.text-right{text-align: right;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.img_full{width: 100%;}
.transition{transition:0.6s all cubic-bezier(.165,.84,.44,1); -webkit-transition:0.6s all cubic-bezier(.165,.84,.44,1);}
.main_content{max-width: 785px; margin: auto; padding: 0 20px;}
.btn_over{position: relative; cursor: pointer; }
.btn_over:before{position: absolute; transition:all 0.4s cubic-bezier(.18,.32,.17,.99); top: 0; left: 0; width:0; height: 100%; content: ''; background: rgba(255,255,255,0.2);}
.btn_over:hover:before{width: 100%;}
.main_content2{max-width: 1200px; padding: 0 20px; margin: auto;}
/*-//-*/

.container{padding-bottom: 30px}
.main_info_p{text-align: center; padding: 10px 0; font-size: 19px;}
.info_consumo{padding: 10px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.info_consumo h2{font-size: 25px; color: #fff; background: #135bf6; padding: 5px 20px;}
.info_kw h3{display: inline-block; vertical-align:  middle; font-size: 24px; color: #1c1c1c; border: 5px solid #135bf6; padding: 6px 25px}
.info_kw h3 span{font-size: 20px; color: #135bf6;}
.info_periodo{display: inline-block; vertical-align: middle; font-size: 14px; margin: 0 12px;}
.info_periodo p{color: #1a1a1a;}
.info_periodo h4{display: block; color:#135bf6; }
.content_info_factura{padding: 0 10px;}

.content_line_chart{padding-bottom: 20px; border-bottom: 1px solid; margin-bottom: 20px}
#line_chart{width: 100%; height: 400px;}
.info_dia{padding: 15px 0;}
.info_dia h2{padding: 5px 12px; color:#1a1a1a; border: 2px solid #135bf6; display: inline-block; vertical-align: middle; }
.info_dia h3{display: inline-block; vertical-align: middle; padding-left: 30px; color:#135bf6; background: url(http://www.codensa.com.co/static/img/modules/components/icons/icon_chart1.png/icon_chart1.png) left no-repeat; line-height: 22px; margin-left: 20px;}
.info_puesto{width: 50%; box-sizing: border-box; padding-right: 10px;}
.main_info_puesto p{float: left; box-sizing:border-box; width: calc(100% - 78px); border: 2px solid #135bf6; padding: 5px; font-size: 12px;}
.main_info_puesto h3{width: 75px; color: #fff; background:#135bf6; font-size: 20px; text-align: center; float: right; line-height: 42px; }
.info_puesto_p{margin-top:20px; font-size: 13px; margin-bottom: 15px; }
.compare_neighbors{width: 100%;}

.fact_info h3{margin-bottom: 5px; line-height: 35px; padding: 0 10px;  font-size: 13px; color: #fff; min-width: 72px; box-sizing: border-box; width: 0; transition: all 0.7s; }

.fact_info p{ font-size: 10px;}
.your_info h3{ background: #fc5a24; }
.neighbors_info{margin-top: 12px}
.neighbors_info h3{background: #59bc5f;}
.average_info{margin-top: 12px}
.average_info h3{ background: #135bf6;}

.info_promedio{width: 40%; background:#135bf6; color: #fff; text-align: center; box-sizing: border-box; padding: 10px; }
.info_promedio p{ font-size: 11px; padding-bottom: 7px; border-bottom: 1px solid}
.info_promedio h4{padding: 20px 0 5px; font-size: 22px; }
.info_semana{width: 50%; box-sizing: border-box; padding-left: 10px;}
.info_semana h2{position: relative; font-size: 13px;}
.info_semana h2 span{display: inline-block; padding: 5px 10px; border: 2px solid #fc4584;}
.info_semana:before{width: 22px; height: 22px; position: absolute; top: 3px; right: 0; background: url(http://www.codensa.com.co/static/img/modules/components/icons/icon_chart2.png/icon_chart2.png); content: ''}
.content_bar_chart{margin-top: 20px;}
.content_second_info{position: relative;}
.content_second_info:before{position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background: #6b6b6b; content: '';margin-left:-1px; }
.info_conoce{text-align: center; margin-top:50px; }
.info_conoce p{font-size: 14px;}
.info_conoce a{display: inline-block; margin-top: 12px; background: #135bf6; color: #fff; font-size: 14px; letter-spacing: 0.1em; padding: 12px 50px; font-weight: bold;}