﻿

#captcha{
    padding:5px;
}
.captcha-box {
    border: 1px solid;
    padding:5px 10px;
    max-width: 300px;
    margin: 10px 0;
    height:120px !important;
}

#canvas {
    width: 110px;
    height: 30px;
    background-color:#fff !important;
}
#captcha #valid{
    margin:5px;
}
/* for mandatory fields*/
 .mandate {
    color: red !important;
}
label .mandate {
    color: red !important;
}
/*QR code*/
.qr p{font-weight:600 !important;padding:5px 2px; text-align:center;}
.QrCode{margin:15px 20px;}
.QrCode img{width:120px; height:120px;}
.leadheader h1{text-align:center; font-family:fangsong; font-weight:700; font-size:48px; padding:1%; width:70%; margin:auto;}
.leadheader h2{text-align:center; font-size:36px; font-family:fangsong; width:60%; margin:auto; margin-bottom:40px;}
.subh{text-align:center; font-family:serif; font-weight:600; font-size:28px;}
.hs{font-family:'Segoe UI Emoji';}
.clear{clear:both}
#agen{margin:3% 10% !important;}
#leftdiv {
    float: left;
}

#rightdiv {
    float: right;
}

.aginfo p {
    color: #fff;
}

.aginfo {
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}
.overlay {
            height: auto;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.34);
        }
@media (max-width: 320px) {
     .he{position:relative !important; margin:10px !important}
     #con{width:100% !important;}
     #agen #leftdiv, #rightdiv{float:none;text-align:center; margin:2% 0}
    .leadheader h2{font-size:25px !important;padding-top:10px;}
    .leadheader h1, h2{width:100% !important;}
}
@media (min-width: 321px) and (max-width:480px)
{ .he{position:relative !important; margin:10px !important}
   #con{width:100% !important;}
    #agen #leftdiv, #rightdiv{float:none;text-align:center; margin:2% 0}
    .leadheader h2{font-size:28px !important; padding-top:10px;}
    .leadheader h1, h2{width:100% !important;}
}
@media (min-width: 481px) and (max-width:768px) 
{
    .he {
        position: relative !important; margin:10px !important
    }
    #con{width:100% !important;}
      .leadheader h2{font-size:30px !important; padding-top:10px;}
    .leadheader h1, h2{width:100% !important;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .he {
        position: relative !important;
        margin: 10px !important
    }#con{width:50% !important}
}