@charset "utf-8";
/* CSS Document */


html{height:100%;}
body {height:100%;font-family: "OpenSans-Regular";background:url(../images/bg.jpg) no-repeat center center;background-attachment: fixed; background-size:cover;margin:0;padding:0;height:100%; background-color:#0C4E9A;}
a {outline:none !important; color:#06C; text-decoration:none;}
a:hover, a:active, a:focus {outline:none !important; text-decoration:none;}
ul {margin:0; padding:0;}
ul li {list-style:none;}
h1, h2, h3, h4, h5, h6, p {margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; padding:0; margin:0;}

@font-face {
    font-family: "OpenSans-Bold";
    src: url(../fonts/OpenSans-Bold.ttf);
}
@font-face {
    font-family: "OpenSans-Semibold";
    src: url(../fonts/OpenSans-Semibold.ttf);
}
@font-face {
    font-family: "OpenSans-Regular";
    src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
    font-family: "OpenSans-Light";
    src: url(../fonts/OpenSans-Light.ttf);
}

.border {border:1px solid #f00;}
.bor-none {border:none !important;}
.bor-grey {border:1px solid #ccc;}
.bor-black {border:1px solid #000;}
.bor-tb-black {border-top:1px solid #000;border-bottom:1px solid #000;}
.bor-dotted {border:1px dotted #ccc;}
.bor-l-dashed {border-left:1px dashed #ccc !important;}
.bor-rl-none {border-left: none !important; border-right:none !important;}
.bor-l-none {border-left: none !important;}
.bor-r-none {border-right: none !important;}
.bor-t-none {border-top: none !important;}
.bor-l-grey {border-left:1px solid #ccc;}
.bor-r-grey {border-right:1px solid #ccc;}
.bor-b-grey {border-bottom:1px solid #ccc;}
.bor-b-red-2p {border-bottom:2px solid #f00;}
.bor-b-grey-2p {border-bottom:1px solid #353535; width:100%; height:1px;display:block; position:relative;}

.bold {font-weight:bold;}
.dotted-line {width:100%; height:2px; display:block; position:relative;border-top:1px dotted #ccc;}
.dotted-line-4p {width:100%; height:4px; display:block; position:relative;border-top:4px dotted #ccc;}
.solid-line {width:100%; height:2px; display:block; position:relative;border-top:1px solid #ccc;}
.solid-line-wh {width:100%; height:2px; display:block; position:relative;border-top:1px solid #fff;}
.grey-line {width:100%; height:2px; display:block; position:relative;border-top:1px solid #ccc;}
.red-solid-line {width:100%; height:5px; display:block; position:relative;border-top:5px solid #CA0001;}

.wrapper   {width:100%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}
.wrapper60 {width:60%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}
.wrapper75 {width:75%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}
.wrapper80 {width:80%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}
.wrapper90 {width:90%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}
.wrapper96 {width:96%; height:auto; display:block; position:relative; margin-left:auto; margin-right:auto;}


.txt-italic {font-style:italic;}
.mar-t-0 {margin-top:0px !important;}
.mar-t-5 {margin-top:5px;}
.mar-t-10 {margin-top:10px !important;}
.mar-t-15 {margin-top:15px !important;}
.mar-t-20 {margin-top:20px !important;}
.mar-t-30 {margin-top:30px !important;}
.mar-t-50 {margin-top:50px !important;}
.mar-b-5 {margin-bottom:5px;}
.mar-b-10 {margin-bottom:10px;}
.mar-b-30 {margin-bottom:30px;}
.mar-b-200 {margin-bottom:200px;}
.mar-l-0 {margin-left:0px !important;}
.mar-l-5 {margin-left:5px;}
.mar-l-10 {margin-left:10px;}
.mar-l-15 {margin-left:15px;}
.mar-l-25 {margin-left:25px;}

.mar-l-30 {margin-left:30px;}
.mar-r-5 {margin-right:5px;}
.mar-r-10 {margin-right:10px;}
.margin-rl-5 {margin-right:5px; margin-left:5px;}

.pad0 {padding:0px !important;}
.pad5 {padding:5px !important;}
.pad10 {padding:10px !important;}
.pad15 {padding:15px !important;}
.pad20 {padding:20px !important;}
.pad-t-0 {padding-top:0px !important;}
.pad-t-5 {padding-top:5px !important;}
.pad-t-15 {padding-top:15px !important;}
.pad-t-35 {padding-top: 35px !important;}
.pad-t-75 {padding-top:75px !important;}
.pad-b-10 {padding-bottom:10px;}
.pad-b-20 {padding-bottom:20px;}
.pad-b-30 {padding-bottom:30px;}
.pad-b-50 {padding-bottom:50px;}
.pad-b-200 {padding-bottom:200px;}
.pad-l-0 {padding-left:0px !important;}
.pad-l-1 {padding-left:1px !important;}
.pad-l-5 {padding-left:5px !important;}
.pad-l-10 {padding-left:10px !important;}
.pad-l-20 {padding-left:20px !important;}
.pad-r-0 {padding-right:0px !important;}
.pad-r-1 {padding-right:1px !important;}
.pad-r-5 {padding-right:5px !important;}
.pad-r-10 {padding-right:10px !important;}
.pad-r-15 {padding-right:15px !important;}
.pad-r-20 {padding-right:20px !important;}
.pad-rl-0 {padding-right:0px !important;padding-left:0px !important;}
.pad-rl-5 {padding-right:5px !important;padding-left:5px !important;}
.pad-rl-10 {padding-right:10px !important;padding-left:10px !important;}
.pad-t-bot-10 {padding-top:10px; padding-bottom:10px;}
.pad-tb-15 {padding-top:15px; padding-bottom:15px;}

.minHeight660 {min-height:660px;}

.color-white {color:#fff !important;}
.color-grey {color:#999;}
.color-black {color:#000;}
.color-blue {color:#03F;}
.color-red {color:#f00;}
.color-orange {color:#F7932E;}

.bg-white {background-color:#fff;}
.bg-blue {background-color:#00f;}
.bg-red {background-color:#f00;}
.bg-yellow {background-color:#CF0;}
.bg-grey {background-color:#F4F3F3;}
.bg-black {background-color:#000;}
.bg-darkGrey {background-color:#151515;}


.font9 {font-size:9px;}
.font10 {font-size:10px;}
.font11 {font-size:11px;}
.font12 {font-size:12px;}
.font13 {font-size:13px;}
.font14 {font-size:14px;}
.font15 {font-size:15px;}
.font16 {font-size:16px;}
.font18 {font-size:18px;}
.font20 {font-size:20px;}
.font22 {font-size:22px;}
.font24 {font-size:24px;}
.font28 {font-size:28px;}

.fontWeight400 {font-weight:400;}
.fontWeight600 {font-weight:600;}

.full-width {width:100% !important;}
.hide {display:none;}
.dashedLine {width:100%; height:10px; border-top:1px dashed #777;  padding-right: 15px;padding-left: 15px;}


.displayInline {display:inline-block;}
.displayBlock {display:block;}
.lineHeight-16 {line-height:16px !important;}
.lineHeight-18 {line-height:18px !important;}
.lineHeight-20 {line-height:20px !important;}
.lineHeight-30 {line-height:30px;}


/*----------------------Main Style Start-------------------------*/

.main-container {width: auto; height: 100% !important;min-height:100%; display: block;position: relative;margin: auto; float: none;}
.middle-content {width: auto; max-width: 1140px; height: auto;min-height:100%; display: block;position: relative;margin: auto; float: none;}

header {padding:70px 0px 20px;}
header img {float:right;}
.curve-wrapper {background-color: #FFF;
width: 47%;
height: auto;
max-width: 225px;
display: block;
position: relative;
border-top-right-radius: 90px;
border-bottom-left-radius: 90px;
padding: 50px 0px;}
.curve-wrapper h4 {font-size:30px; color:rgb(13,43,136); line-height:36px; text-align:center;}
.body-wrapper {padding-bottom:5px;}
.login-wrapper {width:52%; height:auto; display:block; position:relative; margin:auto; margin-top:20px;}
.login-wrapper label {color:#fff; float:right; line-height:37px;}
.login-wrapper .form-control {border-radius:14px; height:42px;}
.login-wrapper form a {color:#fff; text-decoration:underline; font-size:16px; line-height:32px;}
.login-wrapper form .btn {padding: 6px 52px;font-size: 17px;line-height: 28px; color:#fff;border: 1px solid #fff;border-radius: 12px; /*background-color:rgb(188,53,38);*/ background-color: #666; float:right;}
.login-wrapper form .btn:hover {/*background-color:#D94F40;*/ background-color: #777;}


.balance-wrapper {width:100%; height:auto; margin-left:auto; margin-right:0px; display:block; position:relative;}
.balance-wrapper .fa-file-o {font-size:30px; padding-top:0px; line-height:40px;}
.balance-wrapper h4 {vertical-align:middle; line-height:20px; font-size:20px;}
.balance-wrapper h4 img {display:inline-block; margin-right:10px;}
.nav-wrapper {width: 100%; height: auto; display: block; position: relative; float: right; text-align: right;}
.nav-wrapper .nav-btn {padding: 6px 0px; width:120px;font-size: 17px;line-height: 28px;border: 1px solid #fff;border-radius: 12px; background-color:#666; display:inline-block; margin-left:10px;}
.nav-wrapper .nav-btn a {/*text-shadow: 1px 1px 1px #000;*/text-align: center !important;line-height: 30px; color: #fff; text-align: center; display: block;}
.nav-wrapper .nav-btn:hover {background-color:#777;}
h3.company-title {color:#fff; font-weight:bold; border-bottom:3px solid #fff; padding-bottom:5px; display:inline-block;}

.balance-wrapper ul li {margin-bottom: 10px; color: #eee; line-height:24px;}
.balance-wrapper ul li a {text-decoration: underline; color: #eee; line-height:24px; vertical-align:top; font-size: 16px;}
.balance-wrapper ul li a:hover {color: #fff;}
.balance-wrapper ul li .fa {margin-right: 10px; color: #eee; font-size:26px; font-weight:bold;}
.balance-wrapper h4 {text-transform: uppercase; color: #eee;}
.balance-wrapper h4 .fa {margin-right: 10px; padding-top: 20px;}
.amount-wrapper {width: 100%; height: auto; display: block;position: relative; margin-top: 30px;}
.amount-wrapper .bill-wrapper {width: 100%; height: auto; display: block;position: relative; background-color:rgb(13,43,136); margin-bottom: 10px; border-radius:15px; border:2px solid #fff; padding:5px;}
.amount-wrapper .bill-wrapper p {line-height: 26px; font-size:16px; color: #fff;}
.amount-wrapper .due-wrapper {width: 100%; height: auto; display: block;position: relative;background-color:rgb(188,53,38); border-radius:15px; border:2px solid #fff; padding:5px;}
.amount-wrapper .due-wrapper p {line-height: 26px; font-size:16px; color: #fff;}
.amount-wrapper .due-wrapper p .fa {margin-right: 5px;}
.balance-wrapper .title ul li, .title-wrapper ul li {display:inline-block; float:left;}
.underline-leaf {width:15px; height:15px; border-top-right-radius:7px; border-bottom-left-radius:7px; background-color:#fff; display:inline-block; position:absolute; bottom:-2px;}
.title-wrapper .underline-leaf {width:15px; height:15px; border-top-right-radius:7px; border-bottom-left-radius:7px; background-color:#fff; display:inline-block; position:absolute; bottom:-12px;}

.request-service {margin-top: 30px; width: 100%; height: auto;display: block;position: relative;}
.request-service form label {font-size: 16px; color: #fff; line-height: 24px; font-weight: 400;}
.request-service form .btn-primary {padding: 6px 0px;width:120px;font-size: 17px;line-height: 28px;border: 1px solid #fff;border-radius: 12px; background-color:rgb(188,53,38); float:right;}
.request-service form .btn-primary:hover {background-color:#D94F40;}
.request-service form textarea {resize:none;}


/*----------------Schedule Services Page Design----------------*/
	li.width18 {width: 18% !important;}
	li.width16 {width: 16% !important;}
	li.width10 {width: 10% !important;}
	li.width5 {width: 5% !important;}
	.text-right {text-align: right !important;}
	.services-wrapper .services-body ul li.text-right a {color: #eee;}

	#responsive-example-table {border:1px solid #11519B; margin-top: 30px;}
	#responsive-example-table tbody tr {padding:0px 5px;font-size: 13px;line-height: 16px;}
	#responsive-example-table tbody tr th {padding: 5px; font-size: 12px; padding: 10px 0px 10px 5px; background-color: rgb(188,53,38); color: #fff;}
	#responsive-example-table tbody tr th .fa {margin-left: 10px;}
	#responsive-example-table tbody tr td {padding: 5px; font-size: 13px;background-color:#fff; border-bottom: 1px solid #666; color: #333;}
	#responsive-example-table tbody tr td a {color: #333; text-decoration: underline;}


		.stacktable { width: 100%; }
		.st-head-row { padding-top: 1em; }
		.st-head-row.st-head-row-main { font-size: 14px; padding-top: 0; width: 100%; }
		.st-key { width: 29%; text-align: left; padding-right: 1%; padding-left: 10px; }
		.st-val { width: 69%; padding-left: 1%;}



		/* RESPONSIVE EXAMPLE */

		.stacktable.large-only { display: table; }
		.stacktable.small-only { display: none; }

		@media (max-width: 800px) {
		  .st-head-row.st-head-row-main {background-color:rgb(188,53,38); color: #fff; padding: 10px;}
		  .stacktable.large-only { display: none; }
		  .stacktable.small-only { display: table;background-color: #fff; padding: 10px; color: #333; font-size: 13px; margin-top: 30px; padding-bottom: 20px !important;}
		  .stacktable.small-only td a {color: #333; text-decoration: underline; padding-bottom: 10px;}
		  .st-head-row {padding-left: 10px;}
		  #responsive-example-table tbody {}
		}

	.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {background-color:rgb(188,53,38);border-color:rgb(188,53,38);}
	/*----------------Schedule Services Page Design----------------*/



footer p.text-center {color:#fff; margin:50px 0px; text-align:center; font-size:16px; line-height:18px;}
/*footer {width:100%;height:240px;position:absolute;left:0;}*/
footer p {color:#fff; text-align:left; margin:10px 0px;}
footer ul li {display:inline-block; margin-right:5px;}
/*----------------------Main Style End-------------------------*/


.ms-options-wrap > button:focus, .ms-options-wrap > button {border:none; border-radius: 5px; box-shadow: none;}

@media screen and (min-width:1365px) {
	.middle-content {max-width: 1140px;}
	.curve-wrapper h4 {font-size: 34px;line-height: 40px;}
	h3.company-title {font-size: 32px;}
	.balance-wrapper h4 {line-height: 28px;font-size: 26px;}
	.balance-wrapper ul li {margin-bottom: 13px;}
	.balance-wrapper ul li .fa {font-size: 36px; margin-right:15px;}
	.balance-wrapper ul li a {font-size: 20px;}
	footer p.text-center {font-size: 22px;}
	footer a img {width:100%; height:auto;}
	footer p {font-size: 18px;}
	header img {width:350px;}
	.login-wrapper label {font-size: 18px; padding-right:10px;}
	.login-wrapper form a {font-size: 20px;}
	.login-wrapper {width:55%;}
	.underline-leaf {bottom: 1px;}
	.request-service form label {font-size: 20px; line-height: 24px;}
}

@media screen and (max-width:1290px) {
}
@media screen and (max-width:1250px) {
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1150px) {
}
@media screen and (max-width:1080px) {
}
@media screen and (max-width:1030px) { 
	.main-container {padding-left:10px; padding-right:10px;}
	.login-wrapper {width: 52%;}
}
@media screen and (max-width:1000px) {
}

@media screen and (max-width:991px) { 
	.curve-wrapper h4 {font-size: 32px;line-height: 34px;}
	.login-wrapper {width: 60%;}
}
@media screen and (max-width:900px) { 
	.balance-wrapper {width: 82%;}
}
@media screen and (max-width:890px) { 
	.curve-wrapper h4 {font-size: 30px;line-height: 32px;}
}
@media screen and (max-width:820px) { 
	.curve-wrapper h4 {font-size: 26px;line-height: 26px;}
	.login-wrapper {width: 65%;line-height: 28px;}
	.balance-wrapper {width: 100%; margin-right:auto;}
}
@media screen and (max-width:767px) { 
	.curve-wrapper {width: 50%;padding: 40px 0px;}
	.curve-wrapper h4 {font-size: 26px;line-height: 30px;}
	.login-wrapper label {float:left;}
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width: 50%; margin:auto; margin-bottom:10px;}
	.nav-wrapper {margin-top: -50px;}
	.balance-wrapper h4 {margin-top: 30px;}	
	footer p.text-center {margin: 30px 0px;font-size: 16px;line-height: 26px;}
	footer p {text-align: center;}
	footer ul {text-align:center; float:none;}
}
@media screen and (max-width:740px) {
	.curve-wrapper {width: 52%;}
}
@media screen and (max-width:700px) {
	.curve-wrapper {width:180px; height:180px;}
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width: 55%;}
	.nav-wrapper {text-align:left; margin-top:-120px;}
	.balance-wrapper .title {padding-top:90px;}
	.nav-wrapper .nav-btn { margin-left:0px; margin-right:10px;}
}
@media screen and (max-width:680px) { 
	.curve-wrapper h4 {font-size: 26px;line-height: 32px;}
}
@media screen and (max-width:630px) { 
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width:60%;}
}
@media screen and (max-width:590px) { 
}
@media screen and (max-width:570px) { 
	.login-wrapper {width: 75%;}
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width:70%;}
}
@media screen and (max-width:540px) {
	.curve-wrapper {width:150px; height:150px; padding:30px 0px;border-top-right-radius: 80px;border-bottom-left-radius: 80px;}
	.curve-wrapper h4 {font-size: 21px;line-height: 25px;}
}
@media screen and (max-width:520px) { 
	.login-wrapper {width: 85%;}
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width:80%;}
}
@media screen and (max-width:490px) {
}
@media screen and (max-width:480px) {
	.login-wrapper form .btn {padding: 6px 42px;}
}
@media screen and (max-width:440px) { 
	.curve-wrapper {width:120px; height:120px; padding:25px 0px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;}
	.curve-wrapper h4 {font-size: 18px;line-height: 22px;}
	.login-wrapper {width: 95%;}
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width:90%;}
	.body-wrapper {padding-bottom:150px;}
	footer {height:150px;}
}
@media screen and (max-width:400px) {
	.amount-wrapper .bill-wrapper, .amount-wrapper .due-wrapper {width: 100%;}
}
@media screen and (max-width:380px) {
}
@media screen and (max-width:370px) {
}
@media screen and (max-width:340px) {
}
@media screen and (max-width:320px) {
}
@media screen and (max-width:300px) {
}