@charset "utf-8";
/* CSS Document */
body { font-family: 'Open Sans', sans-serif; }
#topbar { background-color: #616161; height: 30px; }
#herobar { background-color: #E6EBF2; }
#herocontent { width: 860px; margin: 0 auto; padding: 20px; }
#logobox { background-color: #F2F4F7; padding: 20px; }
#content { width: 860px; margin: 0 auto; padding: 20px; }
h1 { font-size: 42px; font-weight: normal; color: #53749F; text-align: center; line-height: 1.2; }
.highlight { color: #FFFFFF; background-color: #53749F; }
h2 { color: #333333; font-size: 24px; font-weight: normal; margin-top: 0; }
h3 { color: #333333; font-size: 14px; font-weight: bold; margin-top: 0; margin-bottom: 0px; }
#footer { margin: 40px 0 20px 0; font-size: 12px; }


/******************************responsive css****************************************/
@media screen and (max-width:899px) {
* { box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box }
img { width: auto; height: auto; max-width: 100% }
#content,
#herocontent { width: 100%; }
h1 { font-size: 35px; line-height: 40px; }
h2 { line-height: 28px; }
h3 { line-height: 20px; }
.left_side { width: 50% !important; }
.right_side { width: 50% !important; }
.right_side img { max-width: 90% !important; }
#content { padding: 0 20px; overflow-x: hidden }
}
 @media screen and (max-width:767px) {
.top_right,
.top_left { width: 100% !important; float: left; }
.about_heading { padding-left: 0 !important; }
.about_content { margin-left: 0 !important; margin-bottom: 0px !important; }
h1 { font-size: 25px; line-height: 30px; }
h2 { font-size: 20px; line-height: 24px; }
h3 { font-size: 14px; line-height: 18px; }
.highlight { display: inline-block; vertical-align: top; }
.padding1 { padding: 20px 0 30px !important; }
#content table td { width: 100% !important; float: left; text-align: left }
.right_side img { max-width: 100% !important; }
.height100 { height: 30px !important; }
.copyright { width: 100%; float: left; display: block; text-align: center; }
#footer { text-align: center; }
#footer a { display: inline-block; vertical-align: middle; margin: 0 5px !important; }
#footer div { float: none; width: 100%; display: block; text-align: center }
h1 { font-size: 21px; }
#content > div { padding-bottom: 40px!important }
}
@media only screen and (max-width:479px) {
.col3 { float: left; width: 100% !important }
table td { width: 100% !important; float: left; text-align: left }
}