@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
body{font-family: 'Roboto', sans-serif; font-size:14px; color:#fff; line height:18px; height:100%; background:url(../images/bg.jpg) no-repeat center top ; background-size: cover;
    background-attachment: fixed;     padding-bottom: 20px;}
    background-attachment: fixed;     padding-bottom: 20px;}
	*{outline:none!important;}
.background{background:rgba(0, 0, 0, .85); position:fixed; left:0px; top:0px; width: 100%; height: 100%; z-index:1;}
.container{position:relative;  z-index:2;}
.logo h2{ font-weight:500; text-align:center;}
.logo{padding:15px 0 10px}
.chart{padding:15px 0 30px;}
.chart .col-md-5{padding-left:0px;}
h3{font-weight:500;}
h3{font-weight:400; background: rgba(0, 0, 0, 0.30);
    margin: 0 -15px;
    font-size: 24px;
    height: 48px;
    line-height: 48px;}
h4{font-size:22px; font-weight:400;}
.chart-details{}
.chart-details p{    padding-top: 10px;
    margin-bottom: 5px;}
.chart .col-md-7{background:rgba(43, 120, 194, .5);}
.form{    padding-top: 50px;}
.result{padding: 15px;
    border: 1px solid #284a6b; background:rgba(43, 120, 194, .35);
    margin-top: 20px;}
.result p{    line-height: 22px;}
.result h2{ color: #ff6464; font-size:20px; font-weight:400;}
.result p span{font-weight:500; font-size:16px}
.chart img{width:100%; max-width:450px;}	


@media (max-width: 767px) {
	.chart{text-align:center; }
	.chart .col-md-5{margin-bottom:20px;}
	
}
@media (max-width: 579px) {
	html{min-height:100%;}
	body{ background-size: auto 100%;
   }
	.chart .col-md-5 {
    padding-left: 15px;
}
.chart .col-md-7{display:none;}
.form {
    padding-top: 0px;
}
.form-control{font-size:14px;}
.logo h2 {
    font-size: 28px;
}
}