body{font-family: 'Questrial', sans-serif;}
#topup
{
    border: 1px solid #707070;
    -webkit-box-shadow: 10px 10px 15px -11px rgba(110,110,110,1);
    -moz-box-shadow: 10px 10px 15px -11px rgba(110,110,110,1);
    box-shadow: 10px 10px 15px -11px rgba(110,110,110,1);
}
#heroqr
{
    border-bottom: 1px solid #707070;
}
#qrcode
{
    border-bottom: 1px solid #707070;
}
#heroqr .btn-warning
{
    border-radius: 11px 11px 11px 11px;
    -moz-border-radius: 11px 11px 11px 11px;
    -webkit-border-radius: 11px 11px 11px 11px;
    border: 0px solid #000000;
    background: #F9A819;
    color: #fff;
    font-size:22px;
}
#heroqr h3
{
    font-size: 42px;
}
.margin-top
{
    margin-top:40%;
}
.margin-bottom
{
    margin-bottom:8%;
}
#howitworks
{
    background:url(../images/bg-works.png);
    background-repeat: no-repeat;
    background-position: left top;
    border-bottom: 1px solid #707070;
    background-size: auto;
}
#howitworks h3
{
    color: #00056A;
}
.workbox
{
    color: #00056A;
    font-size:32px;
}
.workbox h4{
    font-weight:500;
}
#qrcode .btn-success
{
    border-radius: 11px 11px 11px 11px;
    -moz-border-radius: 11px 11px 11px 11px;
    -webkit-border-radius: 11px 11px 11px 11px;
    border:0px solid #000000;
}

#qrcode .btn-outline-secondary
{
    border-radius: 11px 11px 11px 11px;
   -moz-border-radius: 11px 11px 11px 11px;
   -webkit-border-radius: 11px 11px 11px 11px;

}
#qrcode .btn-warning
{
    background: #F9A819;
    color: #fff;
    font-size:22px;
    border-radius: 11px 11px 11px 11px;
    -moz-border-radius: 11px 11px 11px 11px;
    -webkit-border-radius: 11px 11px 11px 11px;
}
#qrcode h3
{
    font-size:40px;
}
.txtblue
{
    color: #00056A;
}

/*=================== Responsive ==============================*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #howitworks{background-image:none;}
    .margin-top {margin-top:20%;}
    .savetime-img{width:100%!important;}
    #heroqr h3 {font-size:30px;}
    #qrcode h3 {font-size: 27px;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .margin-top {margin-top:30%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}