.calculator{background:#333333; color:#939393; font-family: "sofia-pro",sans-serif;}
.calculator .inner{padding:0px 20px;}
.calculator h1{color:#bcbcbc; font-size:38px; margin-bottom:80px; margin-top:60px; padding-bottom:30px; border-bottom:1px solid #5c5c5c; text-transform:capitalize; font-weight:normal;}
.calculator h1 span{color:#fff;}
.calculator h2{ color:#fff; font-size:28px; margin-top:0px;}
.calculator p{color:#939393; padding:20px 0px; font-size:12px;}
.calculator .calculate-btn{ background:#ef8200; color:#fff; border-radius:0; font-size:20px;}
.calculator .bootstrap-select .btn-default{ border:2px solid #999 !important; border-radius:0; background:#333333 !important; color:#fff !important; font-size:18px;}
.calculator .bootstrap-select > .dropdown-toggle { padding-right:40px;}
.calculator .caret {border-bottom: medium none !important; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px dashed;}

.calculator .dropdown-toggle .filter-option{background:url(line.jpg) right center no-repeat;}
.calculator .dropdown-menu { border-radius:0px; background:#333333 !important; color:#fff !important;}
.calculator .dropdown-menu > li > a { color:#fff;}
.calculator .dropdown-menu > li > a:hover, .calculator .dropdown-menu > li > a:focus {color:#000;}

.calculator1{background:#b51e3e; color:#939393; font-family: "sofia-pro",sans-serif;}
.calculator1 h1{color:#fff; margin:100px 0px 60px 0px; text-transform:capitalize;}
.calculator1 h1 span{color:#041824;}
.calculator1 .text{ color:#fff; font-size:16px;}
.calculator1 input{ border-radius:0px; background:#9a1935; margin:60px auto 80px auto; border:none; outline:none; color:#fff;}
.calculator1 .form-control::-moz-placeholder {color:#fff;}
.calculator1 .form-control:-moz-placeholder {color:#fff;}
.calculator1 .form-control::-webkit-input-placeholder {color:#fff;}
.calculator1 .form-control:-ms-input-placeholder {color:#fff;}
.calculator1 .form-control::placeholder {color:#fff;}


.chart {zoom: 1; width: 90%; padding:0px 0px 60px 0px;}
.chart .space { padding:10px 0px; width:100%; display:inline-block;}
.chart .text{color:#fff; float:left; width:40%; text-align:right; padding-right:10px; font-size:14px; line-height:40px;}
.chart .bar1{float:left; width:60%;}
.chart:after {clear: both; content: '.'; display: block; height: 0; visibility: hidden;}
.chart li {display: block; height: 40px; margin-top: 14px; position: relative}
.chart li:before {color: #fff; content: attr(title); padding-right:5px;	/*left: 5px; position: absolute*/}
.chart li.title:before {color: black; font-weight: bold; left: 0}
/*.chart li:first-child {margin-top: 0}*/
.chart li .bar {background: #f78d00; height: 100%; /*width:80%;*/}
.chart li .number {color: #fff; font-size: 16px; padding-left: 5px; position: absolute; /*right:0;*/	left:inherit !important;
	top: -2px; line-height:40px;}
.chart li.pink .bar {background: #b51e3e;}
.chart li.pink .number {color: #fff;}

/*@media screen and (max-width: 480px) {*/
@media screen and (max-width: 767px) {
.chart{ padding:0px;}	
.chart .space { padding:20px 0px; width:100%; display:inline-block;}
.chart li {height: auto; margin-top:inherit;}
.chart li:before {color: black; display: block;	left: 0; position: relative}
.chart li.title:before {border-bottom: 1px solid}
.chart li:first-child {margin-top: 30px;}
.chart li .bar {height: 30px}
.chart .bar1 {margin-top:5px !important;}
.chart li .number {display: block; left: 0 !important; padding-left: 0;	position: relative;	top: -8px; margin-top:5px !important; line-height: inherit;}
.chart .text{width:100%; text-align:left; line-height:inherit;}
.chart .bar1{float:left; width:100%;}
.calculator1 .form-control{width:80% !important;}
}
@media (min-width: 768px) and (max-width: 1023px) {
.chart{padding:0px 0px 30px 30px;}	
.chart .space { padding:20px 0px; width:100%; display:inline-block;}
.chart li {height: auto; margin-top:inherit;}
.chart li:before {color: black; display: block; left: 0; position: relative;}
.chart li.title:before {border-bottom: 1px solid}
.chart li .bar {height: 30px}
.chart .bar1 {margin-top:5px !important;}
.chart li .number {display: block; left: 0 !important; padding-left: 0;	position: relative;	top: -8px;margin-top:5px !important;line-height: inherit;}
.chart .text{width:100%; text-align:left; line-height:inherit;}
.chart .bar1{float:left; width:100%;}
.calculator1 .form-control{width:80% !important;}
	}