#offcanvas-sidebar{
width:250px;
height:100%;
position:fixed;
top:0;
overflow-x:hidden;
overflow-y:auto;
transition:all 400ms ease;


}

#page-wrap{
background:
#fff;
transition:all 400ms ease
}

#offcanvas-navicon{
margin-top:155px;
position:fixed;
top:8px;
right:0;
z-index:102;
height:48px;
width:48px;
padding:10px 6px;
background:rgba(255,255,255,0.5);
border-radius:50%;
transition:all 400ms ease
}

#offcanvas-navicon:after,
#offcanvas-navicon:before,
#offcanvas-navicon span{
	display:block;
	content:'';
	display:block;
	height:4px;
	margin:4px;
	border-radius:2px;
	transition:all 400ms ease;
	background-color: #333333;
}

#offcanvas-navicon:hover{
cursor:pointer
}
.offcanvas-open 
#offcanvas-navicon:before{
transform:translate3d(0, 8px, 0) rotate(135deg)
}
.offcanvas-open 
#offcanvas-navicon:after{
transform:translate3d(0, -8px, 0) rotate(-135deg);
}
.offcanvas-open 
#offcanvas-navicon span{
transform:scale(0)
}

#offcanvas-sidebar{
	padding-top:100px;
	background-image: url(../images/escheresque_@2X.jpg);
	background-repeat: repeat;
	z-index:100000;
}

#offcanvas-sidebar h4{
margin:24px 0 0;
color:#333333;
padding:8px 16px
}

#offcanvas-sidebar h4 a{
margin:-8px -16px
}

#offcanvas-sidebar ul{
width:190px;
margin:0;
list-style-type:none;
padding:0
}

#offcanvas-sidebar li{
}

#offcanvas-sidebar a{
display:block;
padding:8px 16px;
color:#333333;
text-decoration:none;
transition:all 0.25s ease
}

#offcanvas-sidebar a:hover{
color:#ccc;
cursor:pointer
}

#offcanvas-sidebar ul ul{
display:none;
position:absolute;
float:right;
margin-top:-41px;
margin-left:250px
}

#offcanvas-sidebar div{
transition:all 400ms ease
}

#offcanvas-sidebar.offcanvas-child-open>div{
margin-left:-250px
}

#offcanvas-sidebar.offcanvas-child-open>div .offcanvas-child-visible{
display:block
}
.offcanvas-child-link{
position:absolute;
display:inline-block;
width:44px;
height:40px;
margin-top:-40px;
margin-left:206px;
border-left:1px solid #999;
padding:6px 16px;
background:#111;
color:#aaa;
text-decoration:none;
transition:all 0.25s ease
}
.offcanvas-child-link:hover{
color:#ccc;
background:#444;
cursor:pointer
}
.offcanvas-child-back-link{
position:absolute;
display:block;
width:100%;
margin-top:-42px;
border-top:1px solid #999;
padding:8px 16px;
color:#aaa;
text-decoration:none;
transition:all 0.25s ease
}
.offcanvas-child-back-link:hover{
color:#ccc;
background:#444;
cursor:pointer
}
body 
#offcanvas-navicon{
right:8px
}
body 
#offcanvas-sidebar{
right:0;
z-index:101;
margin-right:-250px
}
body.offcanvas-open 
#page-wrap{
margin-left:-250px;
margin-right:250px
}
body.offcanvas-open 
#offcanvas-sidebar{
margin-right:0
}

/**Custom by xyla**/
.col-md-2{
	width: 20%;
}
.col-md-3{
	width: 25%;

	
}
.col-md-4{
	width: 30%;
}
.col-md-5{
	width: 42%;
}
.col-md-7{
	width: 58%;
}
.col-md-6 {
    padding: 0 12px;
}
.col-md-9{
	width: 75%;
}
.col-md-3,
.col-md-9{
	padding-left: 15px;
	padding-right: 15px;
}

.p-0{
	padding: 0;
}
.px-0{
	padding-left: 0;
	padding-right: 0;
}
.py-10{
	padding-top: 10px;
	padding-bottom: 10px;
}
.py-30{
	padding-top: 30px;
	padding-bottom: 0px;
}
.pb-30{
	padding-bottom: 30px;
}
.pr-0{
	padding-right: 0;
}
.pl-10{
	padding-left: 10px;
}
.p-10-30{
	padding: 10px 30px;
}
.mb-0{
	margin-bottom: 0;
}
.mb-15{
	margin-bottom: 15px;
}
.mb-30{
	margin-bottom: 30px;
}
.my-30{
	margin-top: 30px;
	margin-bottom: 30px;
}
.float-left{
	float: left !important;
	padding-left: -20px;
	margin-left: 0px;
}
.float-left-2{
	float: left !important;
	padding-left: 0px;
	margin-left: 0px;
}
.float-left-new{
	float: left !important;
	padding-left: -20px;
	margin-left: -6px;
}
.float-center-new{
	float: center !important;
	align-content: center; !important;
	margin-left: 50px;
	padding-left: 50px;
}
.align-items-center{
	align-items: center;
}
.align-items-start{
	align-items: flex-start;
}
.noto{
	font-family: 'Noto Sans TC', sans-serif;
}
.heading-2{
	font-size: 22px;
}
.text-left{
	text-align: left;
}
.brown{
    color: #993300 !important;
}
.light-brown{
	color: #c77f19;
}
.gray{
	color: #878786;
}
.green{
	color: #87be4a;
}
.light-green{
	background-color: #f0f5de;
}
.white{
	color: #fff;
}
.blue{
	color: #4B5BD8;
}
.dark-blue{
	color: #004f9f;
}
.amber{
	color: #CC651B;
}
.red{
	color: #e03561;
}
.purple{
	color: #5b4c9a;
}
.dark-purple{
	color: #211d70;
}
.orange{
	color: #f08223;
}
.orange1{
	color: #f37539;
}
.pink{
	color: #ed70a1;
}
.light-pink{
	background-color: #fceaec;
}
.red-v{
	color: #d072c9;
}
.blue-green{
	color: #007675;
}
.dark-green{
	color: #0B653A;
}
.dark-red{
	color: #BC332A;
}
.gold{
	color: #846c36;
}
.light-blue{
	color: #30bbd2;
}
.break{
	word-break: break-all;
}
.margin-auto{
	margin: auto;
}
.d-block{
	display: block !important;
	padding-left: -20px;
	margin-left: 0px;
}
.bg-yellow{
	background: #FFE49F;
}
.bg-light-yellow{
	background: #fdfcf6;
}
.blue-bg{
	background-color: #0095db;
}
.bg-light-green{
	background-color: #EAF9D2;
}
.bg-green{
	background-color: #d4edcf;
}
.bg-light-blue{
	background-color: #CBFEFB;
}
.border-rad-30{
	border-radius: 30px;
	padding: 30px 20px;
}
.font-weight-700{
	font-weight: 700;
}
.w-100{
	width: 100%;
}
.h-100{
	height: 100%;
}
.m-auto{
	margin: auto;
}
.step-up .inner-row{
	padding: 30px;
}
.step-up p{
    line-height: 1.4;
}

.brown-table-striped th{
    padding: 8px 15px !important;
    background: #993300;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c7b39f;
}
.brown-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c7b39f;
}
.brown-table-striped tr:nth-child(even) {
	background-color: #F2DFCC;
	color: #993300;
}
.brown-table-striped.no-header-table.center-table-bigger{
	max-width: 710px;
    margin: auto;
}
.brown-table-striped.no-header-table.center-table-bigger td{
	background-color: #fefaee;
}
.brown-table-striped.no-header-table.center-table-bigger tr:nth-child(even) td{
	background-color: #f2dfcc;
}
.green-table-striped th{
	padding: 8px 15px !important;
    background: #6f9c3d;
    font-weight: 700;
    color: #fff;
    border: 1px solid #6f9c3d;
}
.green-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.green-table-striped tr:nth-child(even) {
	background-color: #f6faf0;
	color: #000;
}
.red-table-striped th{
	padding: 8px 15px !important;
    background: #e03561;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c5c0c2;
}
.red-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c5c0c2;
}
.red-table-striped tr:nth-child(even) {
	background-color: #fdeaea;
	color: #000;
}
.light-red-table-striped th{
	padding: 8px 15px !important;
    background: #fccd9e;
    font-weight: 700;
    color: #e30613;
    border: 1px solid #fccd9e;
}
.light-red-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #fccd9e;
}
.light-red-table-striped tr:nth-child(even) {
	background-color: #fef1e3;
	color: #000;
}
.purple-table-striped th{
    padding: 8px 15px !important;
    background: #BA6133;
    font-weight: 700;
    color: #fff;
    border: 1px solid #f0dfee;
}
.purple-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.purple-table-striped tr:nth-child(even) {
	background-color: #FFF7C7;
}
.darkblue-table-striped th{
    padding: 8px 15px !important;
    background: #024E7F;
    font-weight: 700;
    color: #fff;
    border: 1px solid #f0dfee;
}
.darkblue-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.darkblue-table-striped tr:nth-child(even) {
	background-color: #FFF7C7;
}
.maroon-table-striped th{
    padding: 8px 15px !important;
    background: #8C236F;
    font-weight: 700;
    color: #fff;
    border: 1px solid #f0dfee;
}
.maroon-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.maroon-table-striped tr:nth-child(even) {
	background-color: #FFF7C7;
}
.pink-table-striped th{
    padding: 8px 15px !important;
    background: #cf027f;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c6c6c6;
}
.pink-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.pink-table-striped tr:nth-child(even) {
	background-color: #fdebdb;
	color: #000;
}
.orange-table-striped th{
    padding: 8px 15px !important;
    background: #BA6133;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c5c0c2;
}
.orange-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.orange-table-striped tr:nth-child(even) {
	background-color: #FFF7C7;
}
.blue-table-striped th{
    padding: 8px 15px !important;
    background: #0E81C5;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c5c0c2;
}
.blue-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c5c0c2;
}
.blue-table-striped tr:nth-child(even) {
	background-color: #e4ebf8;
	color: #000;
}
.dark-blue-table-striped th{
    padding: 8px 15px !important;
    background: #43358c;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c5c0c2;
}
.dark-blue-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c5c0c2;
}
.dark-blue-table-striped tr:nth-child(even) {
	background-color: #efedf7;
	color: #000;
}
.gold-table-striped th{
    padding: 8px 15px !important;
    background: #BA6133;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c6c6c6;
}
.gold-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c6c6c6;
}
.gold-table-striped tr:nth-child(even) {
	background-color: #FFF7C7;
	color: #000;
}
.light-blue-table-striped th{
    padding: 8px 15px !important;
    background: #009fe3;
    font-weight: 700;
    color: #fff;
    border: 1px solid #c5c0c2;
}
.light-blue-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #c5c0c2;
}
.light-blue-table-striped tr:nth-child(even) {
	background-color: #eaf6fe;
	color: #000;
}
.red-green-table-striped th{
	padding: 8px 15px !important;
    background: #ea5179;
    font-weight: 700;
    color: #fff;
    border: 1px solid #fff;
}
.red-green-table-striped td{
	padding: 8px 15px !important;
    border: 1px solid #ea5179;
}
.red-green-table-striped tr:nth-child(even) {
}
table .no-border{
	background-color: transparent !important;
}
table .no-border td{
	border: none !important;
	padding-left: 0 !important;
}
.center-table{
	max-width: 500px;
    margin: auto;
}
.padded-heading{
	padding: 60px 30px;
	margin: auto;
}
.main-content{
	max-width: 1300px;
    margin: auto;
    float: none;
	max-height: inherit; !important;
}
.step-up [class*="col-"], .bgrid{
	float: unset;
	display: flex;
}
.sidebar .list ul{
	list-style: none;
    padding-top: 90px;
	padding-bottom: 90px;
	margin-bottom: 0;
	margin-left: 0;
}
.sidebar .list ul li{
	padding: 15px 0;
    border-bottom: 1px solid #ccc;
   
}
footer{
	padding-top: 10px;
    padding-bottom: 10px;
}
.divider{
	height: 80px;
    width: 100%;
    float: left;
}
.check-ul ul{
	list-style-image: url('../images/Vector.png');
	margin-left: 40px;
}
.check-ul ul li{
	padding: 12px 10px;
    line-height: 1.4;
}
@media (max-width: 767px){
	.step-up [class*="col-"], .bgrid {
		float: unset;
    	display: block;
	}
	.col-md-9,
	.col-md-3,
	.col-md-4,
	.col-md-2,
	.col-md-7,
	.col-md-5{
		width: 100% !important;
	}
	.col-md-3, .col-md-6, .col-md-9{
		padding-left: 0;
		padding-right: 0;
	}
	.sidebar{
		padding-left: 25px;
		padding-right: 25px;
	}
	.p-10-30 {
		padding: 10px 10px;
	}
	.border-rad-30 {
		border-radius: 15px;
		padding: 20px 10px;
	}
	.col-md-3.sidebar{
		display: none;
	}
	.step-up .inner-row{
		padding: 20px;
	}
}
@media (max-width: 991px){
	table th.mobile-50{
		width: 50% !important;
	}
	table th.mobile-25{
		width: 25% !important;
	}
	.purple-table-striped td,
	.blue-green-table-striped td{
		padding: 8px 5px !important;
	}
	p{
		padding-left: 0;
		padding-right: 0;
	}
}