h1,
h2,
h3,
h4,
h5,
h6 {
    color: #008357 !important;
    padding: 0 0 10px
}

.ui-datepicker select,
select {
    -webkit-appearance: none;
    -o-appearance: none
}

a,
a:focus,
a:hover. a:visited {
    text-decoration: none
}

.logo-right,
.right-hdr img,
.right-hdr ul {
    text-align: right;
    float: right
}

.btn,
.btn-more,
.connect,
.first-section .header01,
.side-menu .sidehdr,
h1 {
    text-transform: uppercase
}

.active .element,
.cube:after {
    -webkit-animation-timing-function: linear
}

@font-face {
    font-family: OpenSans-normal;
    src: url(../fonts/OpenSans.eot);
    src: local('☺'),url(../fonts/OpenSans.eot?#iefix) format('embedded-opentype'), url(../fonts/OpenSans.woff) format('woff'), url(../fonts/OpenSans.ttf) format('truetype'), url(../fonts/OpenSans.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpenSans-Light;
    src: url(../fonts/OpenSans-Light.eot);
    src: local('☺'),url(../fonts/OpenSans-Light?#iefix) format('embedded-opentype'), url(../fonts/OpenSans-Light.woff) format('woff'), url(../fonts/OpenSans-Light.ttf) format('truetype'), url(../fonts/OpenSans-Light.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpenSans-LightItalics;
    src: url(../fonts/OpenSansLight-Italic.eot);
    src: local('☺'),url(../fonts/OpenSansLight-Italic?#iefix) format('embedded-opentype'), url(../fonts/OpenSansLight-Italic.woff) format('woff'), url(../fonts/OpenSansLight-Italic.ttf) format('truetype'), url(../fonts/OpenSansLight-Italic.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpenSans-Italics;
    src: url(../fonts/OpenSans-Italic.eot);
    src: local('☺'),url(../fonts/OpenSans-Italic?#iefix) format('embedded-opentype'), url(../fonts/OpenSans-Italic.woff) format('woff'), url(../fonts/OpenSans-Italic.ttf) format('truetype'), url(../fonts/OpenSans-Italic.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpenSans-SemiBold;
    src: url(../fonts/OpenSans-Semibold.eot);
    src: local('☺'),url(../fonts/OpenSans-Semibold?#iefix) format('embedded-opentype'), url(../fonts/OpenSans-Semibold.woff) format('woff'), url(../fonts/OpenSans-Semibold.ttf) format('truetype'), url(../fonts/OpenSans-Semibold.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OpenSans-Bold;
    src: url(../fonts/OpenSans-Bold.eot);
    src: local('☺'),url(../fonts/OpenSans-Bold?#iefix) format('embedded-opentype'), url(../fonts/OpenSans-Bold.woff) format('woff'), url(../fonts/OpenSans-Bold.ttf) format('truetype'), url(../fonts/OpenSans-Bold.svg#OpenSans) format('svg');
    font-weight: 400;
    font-style: normal
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    color: #4b4b4b;
    font-size: 16px;
    line-height: 16px
}

h1 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    font-size: 1.313em !important
}

h2,
h3,
h4,
h5,
h6 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

h2 {
    font-size: 1.188em !important
}

h3 {
    font-size: 1.125em !important
}

h4 {
    font-size: 1.063em !important
}

h5 {
    font-size: 1em !important
}

h6 {
    font-size: .938em !important
}

a {
    color: #d07f00
}

    a:hover {
        color: #3e7302
    }

select::-ms-expand {
    display: none
}

select {
    background-image: linear-gradient(45deg, transparent 50%, #f99d3a 50%), linear-gradient(-45deg, transparent 50%, #f99d3a 50%);
    background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    padding: 15px;
    border: none;
    border-radius: 30px;
    color: #000;
    font-size: 1.188em;
    -moz-appearance: none;
    appearance: none
}

    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #000
    }

section {
    padding: 20px 0
}

.logo {
    width: 190px
}

.singgov {
    float: right;
    height: 35px !important
}

p {
    margin: 0 0 15px !important;
    font-size: .929em;
    line-height: 160%
}

.strong {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
}

.italic {
    font-family: OpenSans-Italics, Arial, Helvetica, sans-serif
}

.minus-btn,
.plus-btn,
.reset-btn {
    font-family: Arial, Helvetica, sans-serif;
    background: 0 0;
    font-weight: 700
}

.underline {
    text-decoration: underline
}

.pdf {
    font-size: .889em;
    font-style: italic
}

.adobe-hidden {
    display: none !important
}

img {
    border: 0
}

.img-responsive {
    max-width: 100% !important
}

.minus-btn {
    font-size: .938em;
    padding: 0 2px 0 0
}

    .minus-btn:after {
        content: "-";
        position: absolute
    }

.reset-btn {
    font-size: 1.125em;
    padding: 0 5px
}

.plus-btn {
    font-size: 1.313em;
    padding: 0 15px 0 0
}

    .plus-btn:after {
        content: "+";
        font-size: .75em;
        position: absolute;
        margin-top: 2px
    }

.body-content ul li {
    background: url(../images/icon/bullet-list.png) 0 5px no-repeat;
    padding-left: 20px;
    list-style: none;
    padding-bottom: 15px
}

ul.collapsible li .collapsible-body ul li {
    background: url(../images/icon/bullet-list.png) 0 5px no-repeat !important;
    padding-left: 20px !important;
    list-style: none !important;
    padding-bottom: 5px !important
}

    ul.collapsible li .collapsible-body ul li:after {
        content: "" !important
    }

.body-content ul {
    margin-left: -30px
}

.header-bg {
    background: url(../images/masthead-bg.jpg) no-repeat;
    background-size: cover;
    height: 135px;
    padding: 20px 0
}

.prayer-section {
    background: #023825;
    height: auto;
    color: #fff;
    padding: 10px 0;
    font-size: .875em;
    line-height: 21px
}

    .prayer-section ul li {
        display: inline-block;
        padding-right: 10px
    }

    .prayer-section ul {
        margin: 0;
        padding: 0
    }

img.img-responsive {
    min-width: 100% !important
}

img.img-responsive-mobile {
    min-width: auto
}

.dates {
    color: #fde697;
    padding-right: 10px
}

    .dates img {
        margin-right: 10px
    }

.right-hdr ul li {
    list-style: none;
    display: inline-block;
    background: 0 0;
    padding: 0 10px 0 0
}

    .right-hdr ul li:last-child {
        padding: 0
    }

.right-hdr ul {
    margin: 7px 0
}

.right-hdr a {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    color: #008457;
    font-size: 14px !important
}

.right-hdr img,
.right-hdr ul {
    clear: both;
    padding: 0
}

.right-hdr img {
    padding-bottom: 5px
}

.iam {
    padding: 10px 0;
    min-height: 100px
}

    .iam select {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
        width: 98%;
        position: absolute;
        z-index: 9999 !important;
        margin-right: 10px;
        line-height: 25px;
        height: 60px;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding-right: 40px
    }

        .iam select:before {
            content: "";
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            vertical-align: middle;
            border-top: 7px dashed;
            border-top: 7px solid;
            border-right: 7px solid transparent;
            border-left: 7px solid transparent;
            color: #f99d3a
        }

        .iam select option {
            font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
            font-size: .762em !important
        }

.person-icon {
    width: 46px;
    height: 46px;
    background: url(../images/icon/person.png) bottom center no-repeat #f3b34f;
    border-radius: 50%;
    display: inline-block
}

input:focus,
select,
textarea:focus {
    outline: 0 !important
}

.minus-btn:focus,
.plus-btn:focus,
.reset-btn:focus,
input {
    outline: 0
}

.qns {
    font-family: OpenSans-Italics, Arial, Helvetica, sans-serif;
    padding: 0 20px;
    font-size: .938em;
    color: #666;
    font-weight: unset;
    margin-bottom: unset;
}

.hr {
    border-bottom: 1px solid #ccc;
    margin: 30px 0;
    clear: both;
    width: 97%
}

.icon01,
.icon02,
.icon03 {
    width: 35px;
    height: 35px;
    margin-bottom: 10px
}

.icon01 {
    background: url(../images/icon/icons_01.png) center center no-repeat;
    background-size: cover
}

.icon02 {
    background: url(../images/icon/icons_02.png) center center no-repeat;
    background-size: cover
}

.icon03 {
    background: url(../images/icon/icons_03.png) center center no-repeat;
    background-size: cover
}

.icon01:hover {
    background: url(../images/icon/icons_01.png) center no-repeat #eaeaea;
    background-size: cover;
    border-radius: 50px
}

.icon02:hover {
    background: url(../images/icon/icons_02.png) center no-repeat #eaeaea;
    background-size: cover;
    border-radius: 50px
}

.icon03:hover {
    background: url(../images/icon/icons_03.png) center no-repeat #eaeaea;
    background-size: cover;
    border-radius: 50px
}

.first-section {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    position: relative !important;
    width: 100%
}

    #alert-icon,
    .first-section .header01 {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
    }

    .first-section .header01 {
        text-align: center;
        color: #008357;
        font-size: 1.125em;
        padding-bottom: 5px
    }

    .first-section ul {
        margin-left: -40px;
        text-align: center;
        font-size: 1em
    }

        .first-section ul li {
            background: 0 0;
            list-style: none;
            padding-bottom: 10px
        }

    .first-section a {
        color: #000
    }

.shadow-box {
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32)
}

input {
    padding: 5px 10px;
    width: 100%;
    border-radius: 20px;
    background: #eaeaea;
    border: none;
    font-size: .938em
}

#alert-icon {
    background: url(../images/icon/notification-icon.png) center center no-repeat #FBF7C6 !important;
    color: #fff;
    text-indent: -9999px;
    padding: 18px 20px;
    font-size: bold !important;
    text-decoration: none !important
}

    #alert-icon:hover,
    .breadcrumb a,
    .btn-more:hover,
    .dropdown-menu.mega > .sub-menu > li > a,
    .panel-title a,
    .sub-btn:hover {
        text-decoration: none
    }

ul.notification {
    width: auto;
    margin-top: 15px;
    margin-right: 15px
}

.notification li {
    text-align: right;
    list-style: none
}

#site-notice {
    margin-bottom: 0;
    background: #FBF7C6;
    color: #000
}

    #site-notice p {
        margin: 5px 40px 5px 15px !important
    }

.content-section {
    margin: 0 !important
}

.element {
    color: #fff;
    height: 100%;
    transition: all 2s ease;
    background: url(../images/banner/overlay-bg.png) center left no-repeat;
    width: 100%;
    background-size: cover;
    position: absolute;
    top: 0;
    text-align: left
}

@-webkit-keyframes run {
    0% {
        top: -100%
    }

    100% {
        bottom: 0
    }
}

.active .element {
    -webkit-animation-duration: 60s;
    animation: run 2s
}

.carousel-caption .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    text-align: left;
    text-shadow: none;
    color: #008357;
    margin-bottom: 10px !important
}

.carousel-caption .header02 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    font-size: 2.125em;
    text-align: left;
    text-shadow: none;
    color: #008357;
    line-height: 34px
}

.carousel-caption p {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    text-align: left;
    text-shadow: none;
    color: #000;
    font-size: 1.125em;
    line-height: 24px
}

.carousel-indicators {
    position: absolute !important;
    left: 42% !important;
    z-index: 15;
    width: 50% !important;
    padding-left: 0;
    text-align: left !important;
    list-style: none;
    border: none !important;
    bottom: 0 !important
}

.cube,
.cube2 {
    z-index: 1;
    position: absolute
}

.carousel-control.right {
    right: 0;
    left: auto;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .3) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .3) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .3)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x
}

.carousel-control.left {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .0001)));
    background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x
}

.carousel-indicators .active {
    background-color: #f3b34f !important;
    border: none !important
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #d4d4d4 !important;
    border: none !important;
    border-radius: 10px
}

.btn,
.navbar {
    border-radius: 0 !important
}

.carousel-caption {
    width: 37% !important;
    top: 0 !important;
    left: 12%
}

.btn {
    background: #f3b34f;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    font-size: 1em
}

.btn-more {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    color: #008357;
    font-size: .875em !important
}

.carousel-caption .btn,
.updateddate {
    font-size: .875em
}

.btn-more:after {
    content: "\27A1"
}

.cube2:after,
.cube:after {
    content: ''
}

.btn-more:hover {
    color: #006442
}

.cube {
    width: 219px;
    height: 224px;
    background-size: cover;
    bottom: 0 !important;
    left: 0
}

    .cube:after {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(../images/motif-left.png) bottom left no-repeat;
        -webkit-animation-duration: 100s;
        animation: myfirst 3s
    }

@-webkit-keyframes myfirst {
    0% {
        left: -100px
    }

    100% {
        left: 0
    }
}

@keyframes myfirst {
    0% {
        left: -100px
    }

    100% {
        left: 0
    }
}

@-ms-keyframes {
    0% {
        left: -100px
    }

    100% {
        left: 0
    }
}

.cube2 {
    width: 220px;
    height: 220px;
    background-size: cover;
    top: 0;
    right: 0
}

    .cube2:after {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(../images/motif-right.png) top right no-repeat;
        -webkit-animation-duration: 100s;
        -webkit-animation-timing-function: linear;
        animation: spinXX 1s
    }

@-webkit-keyframes spinXX {
    0% {
        right: -100px
    }

    100% {
        right: 0
    }
}

@keyframes spinXX {
    0% {
        right: -100px
    }

    100% {
        right: 0
    }
}

@media screen and (max-width: 1023px) {
    .cube,
    .cube2 {
        display: none !important
    }
}

@media screen and (max-width: 1199px) {
    .cube {
        left: -50px !important
    }

    .cube2 {
        right: -50px !important
    }
}

@media screen and (max-width: 1099px) {
    .cube {
        left: -80px !important
    }

    .cube2 {
        right: -80px !important
    }
}

.updateddate {
    font-family: OpenSans-Italics, Arial, Helvetica, sans-serif;
    color: #000;
    text-align: right;
    padding: 15px 0
}

#toTop {
    position: fixed;
    bottom: 15px;
    right: 15px;
    cursor: pointer;
    display: none;
    z-index: 9999
}

.btn-top {
    background: url(../images/icon/arrow-up.png) center center no-repeat #008357;
    height: 28px;
    width: 28px
}

nav {
    width: 100%
}

.nav > li > a {
    padding: 15px 25px !important
}

.navbar-default .navbar-nav > li > a {
    font-size: 14px !important;
    color: #fff !important;
    text-transform: uppercase;
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.navbar-default,
.navbar-toggle {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0
}

.dropdown-header {
    display: block;
    color: #000 !important;
    white-space: nowrap
}

.navbar-nav > li > .dropdown-menu {
    z-index: 99999 !important
}

.navbar-default {
    background-color: #008357 !important;
    border-left: none;
    border-right: none;
    border-radius: 0
}

.navbar {
    margin-bottom: 0 !important;
    border: none !important
}

.navbar-nav {
    margin-top: 0;
    margin-bottom: 0
}

.navbar-brand {
    padding-top: 2px;
    padding-bottom: 2px;
    height: 60px
}

.navbar-toggle {
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 0
}

.dropdown-menu {
    padding: 0;
    border-color: #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none
}

    .dropdown-menu > li > a {
        padding: 5px 15px
    }

.open.dropdown-menu.mega {
    display: block
}

.dropdown-menu.mega > .sub-menu {
    display: table-cell;
    border-left: 1px solid #e7e7e7;
    list-style-type: none;
    padding: 0;
    min-width: 180px
}

    .dropdown-menu.mega > .sub-menu:first-child {
        border-left: none;
        padding-left: 0
    }

    .dropdown-menu.mega > .sub-menu > li > a {
        display: block;
        padding: 5px 15px
    }

.dropdown-header {
    padding: 5px 15px;
    font-weight: 700;
    border-bottom: 1px dashed #e7e7e7;
    font-size: 15px !important;
    line-height: 18px
}

.dropdown-menu.mega > .sub-menu > li > a,
.dropdown-menu > li > a,
.navbar-nav > .active > a,
.navbar-nav > .open > a,
.navbar-nav > li > a {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    color: #000 !important;
    position: relative;
    font-size: 14px !important
}

    .dropdown-menu.mega > .sub-menu > li > a::before,
    .dropdown-menu > li > a::before,
    .navbar-nav > .active > a::before,
    .navbar-nav > .open > a::before,
    .navbar-nav > li > a::before {
        content: '';
        position: absolute;
        background: #fde697 !important;
        -webkit-transition: all .3s ease 0s;
        -moz-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }

    .navbar-nav > .active > a::before,
    .navbar-nav > .open > a::before,
    .navbar-nav > li > a::before {
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%
    }

    .dropdown-menu.mega > .sub-menu > li > a::before,
    .dropdown-menu > li > a::before {
        left: 0;
        top: 0;
        width: 2px;
        height: 100%
    }

    .dropdown-menu.mega > .sub-menu > .active > a::before,
    .dropdown-menu.mega > .sub-menu > .active > a:focus::before,
    .dropdown-menu.mega > .sub-menu > .active > a:hover::before,
    .dropdown-menu.mega > .sub-menu > li > a:focus::before,
    .dropdown-menu.mega > .sub-menu > li > a:hover::before,
    .dropdown-menu > .active > a::before,
    .dropdown-menu > .active > a:focus::before,
    .dropdown-menu > .active > a:hover::before,
    .dropdown-menu > li > a:focus::before,
    .dropdown-menu > li > a:hover::before,
    .navbar-nav > .active > a::before,
    .navbar-nav > .active > a:focus::before,
    .navbar-nav > .active > a:hover::before,
    .navbar-nav > .open > a::before,
    .navbar-nav > .open > a:focus::before,
    .navbar-nav > .open > a:hover::before,
    .navbar-nav > li > a:focus::before,
    .navbar-nav > li > a:hover::before {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    .dropdown-menu.mega > .sub-menu > .active > a,
    .dropdown-menu.mega > .sub-menu > li > a:focus,
    .dropdown-menu.mega > .sub-menu > li > a:hover,
    .dropdown-menu > .active > a,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:hover,
    .navbar-nav > .active > a,
    .navbar-nav > .active > a:focus,
    .navbar-nav > .active > a:hover,
    .navbar-nav > .open > a,
    .navbar-nav > .open > a:focus,
    .navbar-nav > .open > a:hover,
    .navbar-nav > li > a:focus,
    .navbar-nav > li > a:hover {
        background: #015539 !important;
        color: #fff !important
    }

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .dropdown .dropdown-menu {
        -webkit-transform-origin: top;
        -moz-transform-origin: top;
        -ms-transform-origin: top;
        -o-transform-origin: top;
        transform-origin: top;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transition: all .2s ease 0s;
        -moz-transition: all .2s ease 0s;
        -o-transition: all .2s ease 0s;
        transition: all .2s ease 0s;
        display: block
    }

    .dropdown.open .dropdown-menu,
    .dropdown:hover .dropdown-menu {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width: 769px) {
    .navbar-default .navbar-nav > li > a {
        font-size: 13px !important;
        color: #000 !important;
        text-transform: uppercase;
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
    }

    .navbar-nav > .active > a::before,
    .navbar-nav > .open > a::before,
    .navbar-nav > li > a::before {
        left: 0;
        height: 100%;
        width: 2px;
        top: 0
    }

    .dropdown-menu.mega > .sub-menu {
        display: block
    }

        .dropdown-menu.mega > .sub-menu > li > a {
            padding-left: 25px
        }

    nav .navbar-nav {
        border-bottom: 1px solid #ccc !important
    }

    body.out nav .navbar-collapse {
        background: #f4f1ed !important;
        box-shadow: 5px 0 10px rgba(0, 0, 0, .3)
    }

    .dropdown-menu.mega > .sub-menu > .active > a,
    .dropdown-menu.mega > .sub-menu > li > a:focus,
    .dropdown-menu.mega > .sub-menu > li > a:hover,
    .dropdown-menu > .active > a,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:hover,
    .navbar-nav > .active > a,
    .navbar-nav > .active > a:focus,
    .navbar-nav > .active > a:hover,
    .navbar-nav > .open > a,
    .navbar-nav > .open > a:focus,
    .navbar-nav > .open > a:hover,
    .navbar-nav > li > a:focus,
    .navbar-nav > li > a:hover {
        background: #f3b34f !important;
        color: #fff !important
    }

    #alert-icon {
        display: none
    }

    #site-notice p {
        margin: 5px !important
    }

    .navbar-toggle {
        position: absolute;
        float: left !important;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        border: none !important;
        background: 0 0 !important
    }

    .navbar-default .navbar-toggle {
        border-color: #fff !important
    }

    .nav > li > a {
        padding: 10px 15px !important
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: #fff !important
    }
}

.fb-icon,
.ig-icon,
.tw-icon,
.yt-icon {
    height: 17px;
    display: block
}

.connect,
.owl-carousel .hdr {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
}

.center {
    text-align: center !important
}

.footer-left,
.left {
    text-align: left !important
}

.footer-right a,
.right {
    text-align: right !important
}

.fb-icon {
    background: url(../images/social-media.png) no-repeat;
    background-size: cover;
    width: 18px
}

    .fb-icon:hover {
        opacity: .9
    }

.yt-icon {
    background: url(../images/social-media.png) -20px 0 no-repeat;
    background-size: cover;
    width: 18px
}

.ig-icon,
.tw-icon {
    width: 25px
}

.yt-icon:hover {
    opacity: .9
}

.tw-icon {
    background: url(../images/social-media.png) -40px 0 no-repeat;
    background-size: cover
}

    .tw-icon:hover {
        opacity: .9
    }

.ig-icon {
    background: url(../images/social-media.png) -65px 0 no-repeat;
    background-size: cover
}

    .ig-icon:hover {
        opacity: .9
    }

.connect {
    font-size: 16px !important
}

ul.connect li {
    list-style: none
}

    ul.connect li:after {
        content: "" !important
    }

.connect-txt {
    margin-right: 10px !important
}

.connect p {
    margin-bottom: 0 !important;
    line-height: 21px !important
}

.owl-carousel .hdr {
    font-size: 1em;
    color: #000;
    min-height: 50px
}

.highlight-icon {
    width: 40px;
    height: 40px;
    position: absolute;
    background: #f3b34f;
    padding: 10px
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    background: #fff;
    font-family: OpenSans-Italics, Arial, Helvetica, sans-serif;
    font-size: .938em;
    color: #727272;
    border: 1px solid #ccc;
    padding: 4px 15px 4px 10px;
    width: 230px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
    display: none
}

input[type=search]:focus {
    width: 230px;
    background-color: #fff;
    border-color: #66CC75;
    -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
    -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
    box-shadow: 0 0 5px rgba(109, 207, 246, .5)
}

.search-btn {
    position: absolute !important;
    right: 20px !important;
    top: 77px !important;
    color: #fff !important;
    font-size: 0 !important;
    height: 17px;
    width: 17px;
    border: none
}

input:-moz-placeholder {
    color: #999
}

input::-webkit-input-placeholder {
    color: #999
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    border: 0;
    background: url(../images/icon/search-btn.png) no-repeat
}

.gcsc-branding,
.gsc-search-box,
.gsc-search-box-tools {
    display: none !important
}

.gsc-result-info {
    text-align: left;
    color: #676767;
    font-size: .813em;
    padding-left: 0 !important;
    margin: 10px 0
}

.gsc-cursor-box {
    margin: 20px 0
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    cursor: default;
    color: #fff !important;
    background: #ccc !important;
    font-weight: 700;
    text-decoration: none;
    padding: 5px 10px
}

.button,
.button img,
.openers-container p {
    cursor: pointer
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
    cursor: pointer;
    color: #007950 !important;
    text-decoration: none !important;
    margin-right: 8px;
    display: inline
}

.gsc-cursor-current-page {
    color: #fff
}

@media screen and (min-width: 1199px) {
    .carousel-caption {
        padding-top: 50px !important
    }

    .carousel-inner {
        height: 402px
    }
}

@media screen and (max-width: 991px) {
    .search-btn {
        position: absolute !important;
        right: 20px !important;
        top: 77px !important;
        color: #fff !important;
        font-size: 0 !important;
        height: 17px;
        width: 17px;
        border: none
    }

    input[type=search] {
        border: 1px solid #ccc;
        padding: 4px 15px 4px 10px;
        width: 170px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        transition: all .5s
    }

        input[type=search]:focus {
            width: 170px;
            background-color: #fff;
            border-color: #66CC75;
            -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
            -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
            box-shadow: 0 0 5px rgba(109, 207, 246, .5)
        }

    .carousel-caption .header01 {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        font-size: 1.188em !important;
        text-align: left;
        text-shadow: none;
        color: #008357;
        margin-bottom: 10px !important
    }

    .carousel-caption .header02 {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
        font-size: 1.313em !important;
        text-align: left;
        text-shadow: none;
        color: #008357;
        line-height: 21px
    }

    .carousel-caption p {
        text-align: left;
        text-shadow: none;
        color: #000;
        font-size: 1em
    }

    .footer-left,
    .footer-left ul,
    .footer-right,
    .text-right {
        text-align: center !important;
        font-size: .875em
    }

    .connect {
        text-align: center
    }



    .first-bx,
    .fourth-bx,
    .second-bx,
    .third-bx {
        background-size: cover !important
    }

    .iam select {
        position: relative !important
    }
}

@media screen and (max-width: 767px) {
    .element,
    img.img-responsive-mobile {
        width: 100% !important
    }

    .left-hdr,
    .logo,
    .logo img,
    .right-hdr {
        text-align: center !important
    }

    .pull-right {
        float: left;
        position: absolute;
        top: 22px;
        right: 50px
    }

    .carousel-caption,
    .element {
        position: relative !important
    }

    .prayer-section ul {
        padding-left: 0 !important
    }

    .element {
        background: #f4f1ed;
        height: auto !important;
        transition: none !important
    }

    .carousel-caption {
        width: 70% !important
    }

    .carousel-indicators {
        left: 45% !important
    }

    .logo {
        width: 150px;
        margin-bottom: 10px
    }

    .right-hdr img,
    .right-hdr ul {
        text-align: center !important;
        float: none !important;
        clear: both
    }

    input[type=search] {
        border: 1px solid #ccc;
        padding: 4px 15px 4px 10px;
        width: 0;
        position: absolute !important;
        right: 0;
        top: 40px;
        background: url(../images/icon/search-btn.png) right 6px center no-repeat #fff;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        -webkit-transition: all .5s;
        -moz-transition: all .5s;
        transition: all .5s;
        z-index: 999 !important
    }

        input[type=search]:focus {
            width: 170px;
            background-color: #fff;
            border-color: #66CC75;
            -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
            -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
            box-shadow: 0 0 5px rgba(109, 207, 246, .5)
        }

    .search-btn {
        display: none !important
    }

    .search-btn2 {
        position: absolute !important;
        right: 3px !important;
        top: 45px !important;
        color: #fff !important;
        font-size: 0 !important;
        height: 17px;
        width: 17px;
        border: none;
        z-index: 9999 !important
    }

    .carousel-caption .header01 {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        font-size: 1.188em !important;
        text-align: left;
        text-shadow: none;
        color: #008357;
        margin-bottom: 10px !important
    }

    .carousel-caption .header02 {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
        font-size: 1.313em !important;
        text-align: left;
        text-shadow: none;
        color: #008357;
        line-height: 21px
    }

    .carousel-caption p {
        text-align: left;
        text-shadow: none;
        color: #000;
        font-size: 1em
    }

    .carousel-control.right {
        right: -25px !important
    }

    .prayer-section ul li:first-child {
        width: 100%
    }

    .iam .col-md-1 {
        text-align: center;
        padding-bottom: 10px
    }

    .first-section {
        margin: 0
    }

    .hr {
        margin: 10px 0
    }

    .qns {
        padding: 5px 20px;
        text-align: center
    }

    .iam p {
        padding: 0
    }
}

.bordered {
    border: 1px solid #000
}

.orange-bg {
    background: #fff1e3 !important;
    padding: 15px 30px;
    margin: 0 -15px
}

    .orange-bg h1 {
        color: #000 !important
    }

.enhancement-section {
    padding: 15px 0
}

.openers-container {
    display: flex;
    text-align: center;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2rem 0
}

    .openers-container p {
        display: inline-block;
        width: 50%;
        margin: 1rem 0;
        padding: 2rem;
        background: #5d3dea;
        color: #eee;
        font-size: 1.5rem;
        font-weight: 700;
        border-radius: 10px;
        transition: background .2s ease-out
    }

        .openers-container p:hover {
            background: #226ee8
        }

#modal-iframe .modal-content {
    padding: 0;
    overflow: hidden
}

.modal-content iframe {
    width: 100%;
    height: 100%;
    border: none
}

.button {
    border-radius: 30px;
    border: 3px solid #fff
}

    .button:hover {
        border: 3px solid #ccc
    }

.breadcrumb {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    font-size: .875em !important;
    color: #023825;
    background-color: #fff !important;
    margin-bottom: 0 !important;
    padding: 8px 15px 0
}

    .breadcrumb ul {
        background: url(../images/icon/pin-icon.png) left center no-repeat;
        padding-left: 20px
    }

        .breadcrumb ul li {
            display: inline-block;
            background: 0 0;
            line-height: 30px
        }

            .breadcrumb ul li:after {
                content: " › ";
                font-size: 1.313em
            }

            .breadcrumb ul li:last-child:after {
                content: ""
            }

    .breadcrumb a {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
        color: #008357
    }

.breadcrumb-line {
    background: url(../images/breadcrumb-line.jpg) no-repeat;
    background-size: contain;
    height: 50px;
    width: 100%
}

.sub-btn {
    background: #a75c0c;
    color: #fff;
    font-size: 1.111em;
    font-weight: 700;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px
}

    .sub-btn:hover {
        background: #944f06;
        color: #fff !important
    }

.sub-banner {
    padding-bottom: 10px
}

.collapse-btn,
.expand-btn {
    color: #a91117;
    padding-right: 20px;
    cursor: pointer !important
}

    .collapse-btn:after,
    .collapsible li .active:before,
    .collapsible li:before,
    .expand-btn:after {
        color: #fff;
        width: 12px !important;
        background: #a91117;
        border-radius: 6px;
        position: absolute;
        line-height: 12px;
        margin-top: 3px;
        height: 12px;
        text-align: center
    }

    .collapse-btn:after,
    .expand-btn:after {
        margin-left: 5px
    }

    .expand-btn:after {
        content: "+"
    }

    .collapse-btn:after,
    .collapsible li .active:before {
        content: "-"
    }

.collapsible li .active:before,
.collapsible li:before {
    margin-left: -20px
}

.collapsible li:before {
    content: "+"
}

.panel-group > .panel:first-child .panel-heading,
.panel:first-child .collapsed {
    border-radius: 4px 4px 0 0 !important
}

ul.collapsible {
    margin-left: -35px
}

    ul.collapsible li {
        background-image: none !important;
        padding: 10px 10px 10px 20px !important
    }

.collapsible-header {
    font-weight: 700;
    color: #000;
    cursor: pointer;
    padding-bottom: 5px
}

.collapsible-body {
    padding: 5px 0
}

.expand-collapse {
    padding: 10px 0
}

.panel {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: #fff;
    background: 0 0;
    box-shadow: none
}

    .panel:last-child {
        border-bottom: none
    }

    .panel .collapsed {
        background: #fdfdfd !important;
        border-right: 1px solid #ccc !important;
        border-left: 1px solid #ccc !important;
        border-bottom: 1px solid #ccc !important;
        margin-top: -2px
    }

    .panel:first-child .collapsed {
        border-top: 1px solid #ccc !important
    }

.panel-group > .panel .panel-heading {
    border-radius: 0
}

.panel-group .panel + .panel {
    margin-top: 0 !important
}

.panel-heading {
    background-color: #008357;
    border: none;
    color: #000;
    padding: 0 !important;
    border-radius: 0 !important
}

.panel-title a.collapsed {
    color: #000 !important
}

.panel-title a {
    display: block;
    padding: 15px 15px 15px 25px;
    position: relative;
    font-weight: 700;
    color: #fff !important
}

.sidebar li a:hover,
.sidebar li p:hover {
    text-decoration: none !important
}

.panel-title {
    margin-top: -2px !important;
    margin-bottom: 0;
    font-size: 1em !important;
    color: inherit
}

.panel-body {
    background: #fff;
    border: 1px solid #ccc !important
}

    .panel-body ul.collapsible li .collapsible-body ol li:before,
    .panel-body ul.collapsible li .collapsible-body ul li:before {
        content: "" !important;
        background: 0 0 !important
    }

    .panel-body ul {
        margin-left: -40px !important
    }

    .panel-body ol {
        margin-left: -23px !important
    }

    .panel-body ul.collapsible li .collapsible-body ul li {
        background: url(../images/icon/bullet-list.png) 0 15px no-repeat !important
    }

    .panel-body ul.collapsible li .collapsible-body ol li {
        background: 0 0 !important;
        list-style: decimal !important;
        padding: 10px 5px !important
    }

    .panel-body ol,
    .panel-body ul {
        padding-bottom: 15px
    }

.panel:last-child .panel-body {
    border-radius: 0 0 4px 4px
}

.panel:last-child .panel-heading {
    border-radius: 0 !important;
    transition: border-radius .3s linear .2s
}

    .panel:last-child .panel-heading.active {
        border-radius: 0;
        transition: border-radius linear 0s;
        background: #000 !important
    }

.panel-group .panel {
    margin-bottom: 0;
    border-radius: 0 !important
}

.oom .info p.dates,
.sidebar li.active p {
    margin-bottom: 5px !important
}

.panel-group .panel-heading + .panel-collapse > .list-group,
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border: none;
    background: #f9f9f9
}

.panel-group > .panel:first-child .panel-heading a:before,
.panel-heading a:before {
    content: '-';
    position: absolute;
    left: 5px;
    transition: all .5s;
    transform: scale(1);
    width: 12px;
    height: 12px;
    background: #fff;
    text-align: center;
    line-height: 9px;
    border-radius: 6px;
    font-weight: 400 !important;
    color: #008357;
    font-size: 1.5em;
    margin-top: 4px
}

#bs-collapse .panel-heading a:after,
.panel-heading.active a:before {
    content: ' ';
    transform: scale(0);
    transition: all .5s
}

#bs-collapse .panel-heading a:after {
    position: absolute;
    font-family: 'Material Icons';
    right: 5px;
    top: 10px
}

#bs-collapse .panel-heading.active a:after {
    content: '\e909';
    transform: scale(1);
    transition: all .5s
}

#accordion .panel-heading .collapsed:before {
    content: '+';
    width: 12px;
    left: 5px;
    transform: rotate(180deg);
    transition: all .5s;
    height: 12px;
    border-radius: 6px;
    background: #757575;
    color: #fff;
    font-size: 1em;
    text-align: center;
    font-weight: 700 !important;
    line-height: 12px;
    margin-top: 4px
}

.sidebar {
    padding-left: 0;
    margin-top: 25px;
    font-size: .944em;
    color: #000
}

.in ul li.active {
    background: #ebf1fa !important
}

.sidebar .panel-body {
    border: none !important
}

.sidebar li.active .panel-body ul {
    visibility: visible !important;
    display: block !important
}

.sidebar li.active p {
    border-radius: 6px !important
}

.side-menu #dropdown .panel-body li a {
    background: 0 0 !important
}

.side-menu #dropdown .panel-body li p {
    margin: 0 !important;
    padding: 0 !important
}

.sidebar li p {
    padding: 13px 30px 13px 13px !important;
    background: inherit !important;
    margin-bottom: 0 !important
}

    .sidebar li p:hover {
        background: #ebeae7 !important;
        color: #000 !important
    }

.side-menu .sidehdr {
    background: #fbfaf8;
    font-size: 1.125em;
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    clear: both
}

    .side-menu .sidehdr .icon {
        background: #f3b34f;
        width: 40px;
        height: 40px;
        float: left;
        margin-right: 10px;
        padding: 10px;
        text-align: center
    }

.side-menu li ul {
    padding: 0;
    width: 100%;
    margin-left: 5px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important
}

.side-menu ul li {
    padding-bottom: 0 !important;
    list-style: none;
    border-bottom: 2px solid #fff !important
}

    .side-menu ul li:first-child {
        border-bottom: 0 !important
    }

.side-hdr {
    color: #000;
    font-weight: 700;
    width: 100%;
    font-size: 1.1em
}

.sidebar .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 7px dashed;
    border-top: 7px solid;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    color: #f99d3a
}

.sidebar .panel .collapsed {
    border: none !important;
    background: inherit !important
}

.side-menu {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 32px
}

.sidebar ul li {
    background-image: none
}

.side-menu #dropdown {
    border: 0;
    margin-bottom: 0;
    border-radius: 0;
    background: #fbfaf8;
    box-shadow: none
}

    .side-menu #dropdown .caret {
        position: absolute;
        right: 10px;
        margin: 9px 5px 0
    }

    .side-menu #dropdown .indicator {
        float: right
    }

    .side-menu #dropdown .panel-body {
        padding: 0;
        width: 100%
    }

        .side-menu #dropdown .panel-body li {
            padding: 8px 0 10px 10px !important;
            font-size: 1em !important
        }

            .side-menu #dropdown .panel-body li a {
                color: #000
            }

        .side-menu #dropdown .panel-body .panel > a {
            color: #000;
            margin-left: -20px;
            padding-left: 35px
        }

        .side-menu #dropdown .panel-body .panel-body {
            margin-left: -15px
        }

            .side-menu #dropdown .panel-body .panel-body li {
                padding-left: 30px
            }

                .side-menu #dropdown .panel-body .panel-body li:last-child {
                    border-bottom: 1px solid #e7e7e7
                }

.side-menu #search-trigger {
    background-color: #f3f3f3;
    border: 0;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px 18px
}

.side-menu .brand-name-wrapper {
    min-height: 50px
}

    .side-menu .brand-name-wrapper .navbar-brand {
        display: block
    }

.side-menu #search {
    position: relative;
    z-index: 1000
}

    .side-menu #search .panel-body {
        padding: 0
    }

        .side-menu #search .panel-body .navbar-form {
            padding: 0 50px 0 0;
            width: 100%;
            margin: 0;
            position: relative;
            border-top: 1px solid #e7e7e7
        }

.side-menu .in ul li.active {
    background: #fff !important;
    font-weight: 700
}

.side-body {
    margin-left: 310px
}

@media (max-width: 768px) {


    @-moz-keyframes slidein {
        0% {
            left: -300px
        }

        100% {
            left: 10px
        }
    }

    @-webkit-keyframes slidein {
        0% {
            left: -300px
        }

        100% {
            left: 10px
        }
    }

    @keyframes slidein {
        0% {
            left: -300px
        }

        100% {
            left: 10px
        }
    }

    @-moz-keyframes slideout {
        0% {
            left: 0
        }

        100% {
            left: -300px
        }
    }

    @-webkit-keyframes slideout {
        0% {
            left: 0
        }

        100% {
            left: -300px
        }
    }

    @keyframes slideout {
        0% {
            left: 0
        }

        100% {
            left: -300px
        }
    }

    .side-menu-container > .navbar-nav.slide-in {
        -moz-animation: slidein .3s forwards;
        -o-animation: slidein .3s forwards;
        -webkit-animation: slidein .3s forwards;
        animation: slidein .3s forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d
    }

    .side-menu-container > .navbar-nav {
        position: fixed;
        left: -300px;
        width: 300px;
        top: 43px;
        height: 100%;
        border-right: 1px solid #e7e7e7;
        background-color: #f8f8f8;
        overflow: auto;
        -moz-animation: slideout .3s forwards;
        -o-animation: slideout .3s forwards;
        -webkit-animation: slideout .3s forwards;
        animation: slideout .3s forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d
    }

    @-moz-keyframes bodyslidein {
        0% {
            left: 0
        }

        100% {
            left: 300px
        }
    }

    @-webkit-keyframes bodyslidein {
        0% {
            left: 0
        }

        100% {
            left: 300px
        }
    }

    @keyframes bodyslidein {
        0% {
            left: 0
        }

        100% {
            left: 300px
        }
    }

    @-moz-keyframes bodyslideout {
        0% {
            left: 300px
        }

        100% {
            left: 0
        }
    }

    @-webkit-keyframes bodyslideout {
        0% {
            left: 300px
        }

        100% {
            left: 0
        }
    }

    @keyframes bodyslideout {
        0% {
            left: 300px
        }

        100% {
            left: 0
        }
    }

    .side-body {
        margin-left: 5px;
        margin-top: 70px;
        position: relative;
        -moz-animation: bodyslideout .3s forwards;
        -o-animation: bodyslideout .3s forwards;
        -webkit-animation: bodyslideout .3s forwards;
        animation: bodyslideout .3s forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d
    }

    #dropdown .panel-body .navbar-nav,
    #search .panel-body .navbar-form .form-group {
        margin: 0
    }

    .body-slide-in {
        -moz-animation: bodyslidein .3s forwards;
        -o-animation: bodyslidein .3s forwards;
        -webkit-animation: bodyslidein .3s forwards;
        animation: bodyslidein .3s forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d
    }

    .navbar-toggle-sidebar {
        border: 0;
        float: left;
        padding: 18px;
        margin: 0;
        border-radius: 0;
        background-color: #f3f3f3
    }

    #search .panel-body .navbar-form {
        border-bottom: 0
    }

    .side-menu .navbar-header {
        position: fixed;
        z-index: 3;
        background-color: #f8f8f8
    }

    .carousel-control.right {
        right: 0 !important
    }
}

footer {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    height: auto;
    background: #232323;
    padding: 20px 0;
    font-size: 16px !important
}

    #footer ol,
    footer ul {
        margin: 5px 0;
        padding: 0
    }

    footer .hr {
        border-bottom: 1px solid #ccc;
        clear: both;
        width: 100%;
        margin: 10px 0
    }

.footer-section {
    color: #fff;
    width: 100%
}

    .footer-section ul li {
        display: inline-block
    }

        .footer-section ul li:after {
            content: " | ";
            display: inline-block;
            padding-left: 10px
        }

        .footer-section ul li:last-child:after {
            content: ""
        }

.footer-left ul li {
    padding-right: 5px;
    font-size: .929em
}

.table,
table {
    font-size: 90%
}

.footer-right p {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important
}

footer a {
    color: #fff;
    text-decoration: none
}

    footer a:hover {
        color: #f1f1f1;
        text-decoration: underline
    }

table.table th a {
    color: #fff;
    text-decoration: underline
}

table.table th {
    background: #008357;
    text-align: center;
    color: #fff;
    border-bottom: 2px solid #fff !important
}

table.table {
    border: none !important;
    clear: both;
    padding-bottom: 20px
}

    table.table tr td,
    table.table tr th {
        border-right: 2px solid #fff !important;
        border: none
    }

        table.table tr td:last-child,
        table.table tr th:last-child {
            border: none !important
        }

    table.table tr td {
        background: #f1f1f1 !important
    }

        table.table tr td.highlight {
            font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
            background: #ffe6ce !important;
            color: #000
        }

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0 !important
}

.table {
    width: 100%;
    max-width: 100%;
    margin: 10px 0 !important
}

table tr td,
table tr th {
    padding: 8px
}

table {
    margin-bottom: 20px
}

@media screen and (max-width: 991px) {
    table tr,
    table.table tr {
        margin-bottom: 25px !important
    }

    table td,
    table.table td {
        font-size: inherit;
        text-align: left
    }

        table td:before,
        table.table td:before {
            content: attr(data-label);
            float: left;
            width: 100%;
            font-weight: 700;
            color: #008357 !important;
            padding-right: 10px !important;
            padding-bottom: 10px
        }

    .table > tbody > tr > td,
    .table > tbody > tr > th,
    .table > tfoot > tr > td,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > thead > tr > th {
        border-top: none !important;
        text-transform: inherit !important;
        border: 1px solid #fff
    }

    table.table {
        border: 0
    }

        table.table thead {
            display: none
        }

        table.table tr {
            display: block;
            background: #f1f1f1;
            border: 0
        }

        table.table td {
            display: block;
            border-bottom: 1px dotted #fff
        }

            table.table td:last-child {
                border-bottom: 0
            }

            table.table td:before {
                text-transform: uppercase
            }

    table > tbody > tr > td,
    table > tbody > tr > th,
    table > tfoot > tr > td,
    table > tfoot > tr > th,
    table > thead > tr > td,
    table > thead > tr > th {
        border-top: none !important;
        text-transform: inherit !important;
        border: 1px solid #fff
    }

    table,
    table tr {
        border: 0
    }

        table thead {
            display: none
        }

        table tr {
            display: block
        }

        table td {
            display: block;
            border-bottom: 1px dotted #fff
        }

            table td:last-child {
                border-bottom: 0
            }

            table td:before {
                text-transform: uppercase
            }
}

.btm-logo ul li,
.sm-logo ul li {
    display: inline-block
}

.glyphicon-chevron-right:before,
.mosque .glyphicon-chevron-right:before {
    content: "\e080"
}

.glyphicon-chevron-left:before,
.mosque .glyphicon-chevron-left:before {
    content: "\e079"
}

.btm-logo {
    margin: 30px 0
}

    .btm-logo ul {
        margin: 0;
        padding: 0
    }

.sm-logo ul {
    padding: 0;
    margin: 30px 0;
    vertical-align: top
}

    .sm-logo ul li {
        padding-right: 1%;
        width: 19%;
        vertical-align: top;
        text-align: center;
        border: none
    }

        .sm-logo ul li img {
            padding-bottom: 10px;
            margin: auto
        }

.menu-txt {
    color: #fff;
    padding-top: 10px
}

.padding {
    padding: 7px 0
}

.right-header a {
    color: #000
}

.mobile-show,
.share-show {
    display: none !important
}

@media screen and (max-width: 767px) {
    .mobile-show {
        display: block !important
    }

    .share-show {
        display: inline-block !important
    }

    .mobile-hide {
        display: none !important
    }

    ul.sm-menu {
        margin: 10px 0 10px -40px
    }

    .sm-menu li {
        display: inline-block !important;
        font-size: 12px !important
    }

    .footer-left ul {
        padding-bottom: 15px !important
    }

    .cube,
    .cube2,
    .singgov {
        display: none
    }
}

.glyphicon-chevron-left:before,
.glyphicon-chevron-right:before {
    font-size: 22px !important;
    text-shadow: none !important
}

@media screen and (max-width: 540px) {
    .yt-size {
        width: 100%;
        height: 200px
    }
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important
}

.hidden {
    display: none
}

nav {
    height: auto
}

.sub-section nav {
    height: auto;
    width: 100%;
    min-height: 20px
}

.sub-section .nav > li > a {
    padding: 10px 20px !important
}

.sub-section .navbar-default .navbar-nav > li > a {
    font-size: 16px !important;
    color: #033826 !important;
    text-transform: capitalize;
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.sub-section .navbar {
    border-radius: 0 !important
}

.sub-section .navbar-default,
.sub-section .navbar-toggle {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0
}

.sub-section .dropdown-header {
    display: block;
    color: #000 !important;
    white-space: nowrap
}

.sub-section ul li li:last-child {
    padding-bottom: 0 !important
}

.sub-section .navbar-nav > li > .dropdown-menu {
    z-index: 99999 !important
}

.sub-section .navbar-default {
    background-color: transparent !important;
    border-left: none;
    border-right: none;
    border-radius: 0
}

.sub-section .navbar {
    margin-bottom: 0 !important;
    border: none !important
}

.sub-section .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: -30px
}

.sub-section .navbar-brand {
    padding-top: 2px;
    padding-bottom: 2px;
    height: 30px
}

.sub-section .navbar-toggle {
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 0
}

.sub-section .dropdown-menu {
    padding: 0;
    border-color: #e7e7e7;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none
}

    .sub-section .dropdown-menu > li > a {
        padding: 5px 15px
    }

.sub-section .open.dropdown-menu.mega {
    display: block
}

.sub-section .dropdown-menu.mega > .sub-menu {
    display: table-cell;
    border-left: 1px solid #e7e7e7;
    list-style-type: none;
    padding: 0;
    min-width: 180px
}

    .sub-section .dropdown-menu.mega > .sub-menu:first-child {
        border-left: none;
        padding-left: 0
    }

    .sub-section .dropdown-menu.mega > .sub-menu > li > a {
        display: block;
        padding: 5px 15px;
        text-decoration: none
    }

.halal .grey-bg a:hover,
.oom .second-section a:hover {
    text-decoration: underline
}

.sub-section .dropdown-header {
    padding: 5px 15px;
    font-weight: 700;
    border-bottom: 1px dashed #e7e7e7;
    font-size: 15px !important
}

.sub-section .dropdown-menu.mega > .sub-menu > li > a,
.sub-section .dropdown-menu > li > a,
.sub-section .navbar-nav > .active > a,
.sub-section .navbar-nav > .open > a,
.sub-section .navbar-nav > li > a {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    color: #000 !important;
    position: relative;
    font-size: 14px !important
}

    .dropdown-menu > li > a::before,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a::before,
    .sub-section .navbar-nav > .active > a::before,
    .sub-section .navbar-nav > .open > a::before,
    .sub-section .navbar-nav > li > a::before {
        content: '';
        position: absolute;
        background: #fde697 !important;
        -webkit-transition: all .3s ease 0s;
        -moz-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0)
    }

    .sub-section .navbar-nav > .active > a::before,
    .sub-section .navbar-nav > .open > a::before,
    .sub-section .navbar-nav > li > a::before {
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%
    }

    .sub-section .dropdown-menu.mega > .sub-menu > li > a::before,
    .sub-section .dropdown-menu > li > a::before {
        left: 0;
        top: 0;
        width: 2px;
        height: 100%
    }

    .dropdown-menu.mega > .sub-menu > .active > a:focus::before,
    .navbar-nav > .active > a::before,
    .navbar-nav > .active > a:focus::before,
    .navbar-nav > .active > a:hover::before,
    .navbar-nav > .open > a:hover::before,
    .sub-section .dropdown-menu.mega > .sub-menu > .active > a::before,
    .sub-section .dropdown-menu.mega > .sub-menu > .active > a:hover::before,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:focus::before,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:hover::before,
    .sub-section .dropdown-menu > .active > a::before,
    .sub-section .dropdown-menu > .active > a:focus::before,
    .sub-section .dropdown-menu > .active > a:hover::before,
    .sub-section .dropdown-menu > li > a:focus::before,
    .sub-section .dropdown-menu > li > a:hover::before,
    .sub-section .navbar-nav > .open > a::before,
    .sub-section .navbar-nav > .open > a:focus::before,
    .sub-section .navbar-nav > li > a:focus::before,
    .sub-section .navbar-nav > li > a:hover::before {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    .sub-section .dropdown-menu.mega > .sub-menu > .active > a,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:focus,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:hover,
    .sub-section .dropdown-menu > .active > a,
    .sub-section .dropdown-menu > li > a:focus,
    .sub-section .dropdown-menu > li > a:hover,
    .sub-section .navbar-nav > .active > a,
    .sub-section .navbar-nav > .active > a:focus,
    .sub-section .navbar-nav > .active > a:hover,
    .sub-section .navbar-nav > .open > a,
    .sub-section .navbar-nav > .open > a:focus,
    .sub-section .navbar-nav > .open > a:hover,
    .sub-section .navbar-nav > li > a:focus,
    .sub-section .navbar-nav > li > a:hover {
        background: #015539 !important;
        color: #fff !important
    }

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    margin: 0 -15px
}

@media (max-width: 990px) {
    .sub-section .nav > li > a {
        padding: 10px !important
    }
}

@media (min-width: 768px) {
    .sub-section .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .sub-section .dropdown .dropdown-menu {
        -webkit-transform-origin: top;
        -moz-transform-origin: top;
        -ms-transform-origin: top;
        -o-transform-origin: top;
        transform-origin: top;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transition: all .2s ease 0s;
        -moz-transition: all .2s ease 0s;
        -o-transition: all .2s ease 0s;
        transition: all .2s ease 0s;
        display: block
    }

    .sub-section .dropdown.open .dropdown-menu,
    .sub-section .dropdown:hover .dropdown-menu {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }
}

@media (max-width: 769px) {
    .sub-section .navbar-default .navbar-nav > li > a {
        font-size: 13px !important;
        color: #000 !important;
        text-transform: uppercase;
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
    }

    .sub-section .navbar-nav > .active > a::before,
    .sub-section .navbar-nav > .open > a::before,
    .sub-section .navbar-nav > li > a::before {
        left: 0;
        height: 100%;
        width: 2px;
        top: 0
    }

    .sub-section .dropdown-menu.mega > .sub-menu {
        display: block
    }

        .sub-section .dropdown-menu.mega > .sub-menu > li > a {
            padding-left: 25px
        }

    .sub-section nav .navbar-nav {
        border-bottom: 1px solid #ccc !important
    }

    .sub-section body.out nav .navbar-collapse {
        background: #f4f1ed !important;
        box-shadow: 5px 0 10px rgba(0, 0, 0, .3)
    }

    .sub-section .dropdown-menu.mega > .sub-menu > .active > a,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:focus,
    .sub-section .dropdown-menu.mega > .sub-menu > li > a:hover,
    .sub-section .dropdown-menu > .active > a,
    .sub-section .dropdown-menu > li > a:focus,
    .sub-section .dropdown-menu > li > a:hover,
    .sub-section .navbar-nav > .active > a,
    .sub-section .navbar-nav > .active > a:focus,
    .sub-section .navbar-nav > .active > a:hover,
    .sub-section .navbar-nav > .open > a,
    .sub-section .navbar-nav > .open > a:focus,
    .sub-section .navbar-nav > .open > a:hover,
    .sub-section .navbar-nav > li > a:focus,
    .sub-section .navbar-nav > li > a:hover {
        background: #f3b34f !important;
        color: #fff !important
    }

    .sub-section .navbar-toggle {
        position: absolute;
        float: left !important;
        padding: 9px 10px;
        margin-top: 8px;
        margin-right: 15px;
        margin-bottom: 8px;
        border: none !important;
        background: 0 0 !important
    }

    .sub-section .navbar-default .navbar-toggle {
        border-color: #000 !important
    }

    .sub-section .nav > li > a {
        padding: 10px 15px !important
    }

    .sub-section .navbar-default .navbar-toggle .icon-bar {
        background-color: #000 !important
    }

    .sub-section .hr,
    .sub-section button {
        display: none
    }

    .sub-section {
        height: auto !important
    }

    body.out .sub-section nav .navbar-collapse {
        overflow: scroll !important
    }

    #navbar2 ul:nth-child(2) {
        background: #f5e7d3;
        padding-left: 0;
        padding-right: 15px
    }

    .sub-section nav {
        height: auto;
        width: 100%;
        min-height: 0 !important
    }

    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        margin: 0 !important
    }
}

.sm ul li,
.sm ul li a {
    color: #033826
}

.sm ul li,
.subheader div {
    display: inline-block
}

.subpage {
    min-height: 500px
}

.subcontentarea section {
    margin: 0
}

.sub-section {
    background: #f0efed;
    width: 100%;
    height: auto;
    clear: both
}

    .sub-section img {
        margin: 15px 0;
        border-right: 1px solid #ccc;
        padding-right: 15px;
        height: 50px
    }

.subheader {
    margin: 0 20px
}

.sm {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    text-align: right;
    text-transform: none;
    font-size: 16px
}

.halal .carousel-caption p.header01,
.sub-section .sub-title {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.sm ul {
    padding: 10px 0;
    margin-right: 30px
}

    .sm ul li {
        padding: 0 3px !important
    }

.sub-section .sub-title {
    color: #00724c;
    font-size: 40px;
    padding-left: 10px;
    vertical-align: middle;
    line-height: 50px
}

.sub-title p {
    padding: 0;
    margin: 0 !important
}

.sub-section .hr {
    margin: 0 20px
}

.sub-section .first-section {
    margin: 10px 0 !important
}

.sub-section .fb-icon {
    background: url(../images/sub-social-media.png) no-repeat;
    background-size: cover;
    width: 9px;
    height: 14px;
    display: block
}

    .sub-section .fb-icon:hover {
        opacity: .5
    }

.sub-section .yt-icon {
    background: url(../images/sub-social-media.png) -16px 0 no-repeat;
    background-size: cover;
    width: 14px;
    height: 14px;
    display: block
}

    .sub-section .yt-icon:hover {
        opacity: .5
    }

.sub-section .tw-icon {
    background: url(../images/sub-social-media.png) -38px 0 no-repeat;
    background-size: cover;
    width: 15px;
    height: 14px;
    display: block
}

    .sub-section .tw-icon:hover {
        opacity: .5
    }

.sub-section .ig-icon {
    background: url(../images/sub-social-media.png) -60px 0 no-repeat;
    background-size: cover;
    width: 13px;
    height: 14px;
    display: block
}

    .sub-section .ig-icon:hover {
        opacity: .5
    }

.subcontentarea .breadcrumb ul {
    margin-left: 0;
    background: url(../images/icon/pin-icon.png) left 7px no-repeat;
    padding-left: 20px;
    margin-top: 7px
}

.sub-logo {
    min-height: 50px !important
}

.left-content p {
    color: #000;
    font-size: .875em
}

.left-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

.left-content ul li {
    list-style: none;
    padding-bottom: 10px;
    font-size: .87em;
    color: #000
}

    .left-content ol li ol li,
    .left-content ol li ul li,
    .left-content ul li ol li,
    .left-content ul li ul li {
        font-size: 1em
    }

.left-content ol li {
    padding-bottom: 10px;
    font-size: .875em;
    color: #000
}

.left-content ul li:before {
    content: "\2022";
    position: absolute;
    left: 15px;
    color: #279c86
}

.left-content ol,
.left-content ul {
    margin-left: 0 !important;
    padding-left: 20px !important;
    padding-bottom: 15px;
    line-height: 160%
}

@media screen and (max-width: 991px) {
    .setht {
        height: auto !important
    }
}

@media screen and (max-width: 768px) {
    .sub-section .sub-title {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        color: #00724c;
        font-size: 2em;
        text-transform: capitalize;
        padding-left: 0;
        vertical-align: middle;
        line-height: 50px
    }

    .subheader div {
        display: inline-block;
        text-align: center;
        width: 100%
    }

    .sub-section img {
        margin: 15px 0 0;
        border-right: 0;
        padding-right: 15px;
        height: 50px
    }
}

.halal .black-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, .2);
    color: #fff !important
}

.black-overlay p,
.halal .carousel-caption,
.halal .header01,
.halal .header02 {
    color: #fff !important;
    text-align: center !important
}

.halal .carousel-caption {
    width: 76% !important
}

    .halal .carousel-caption p.header01 {
        font-size: 41px;
        padding: 15px 0;
        line-height: 43px;
        text-shadow: 2px 2px rgba(0, 0, 0, .3)
    }

    .halal .carousel-caption p {
        font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
        font-size: 18px;
        padding-bottom: 15px;
        text-align: center !important;
        line-height: 26px;
        text-shadow: 2px 2px rgba(0, 0, 0, .3)
    }

.halal .first-section .hr {
    display: none
}

.halal .grey-bg {
    background: #3a3a3a;
    color: #fff !important;
    padding: 40px 0 !important
}

.grey-bg h1 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    color: #fff !important;
    text-transform: capitalize;
    font-size: 1.75em !important;
    margin: 0 0 15px
}

.halal .grey-bg a,
.halal .grey-bg a:hover {
    color: #fff
}

.halal .btn {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    padding: 10px 30px;
    background: #2ea08b;
    margin-bottom: 17px;
    border: 1px solid #ccc;
    text-transform: none !important;
    font-size: 16px
}

.halal .grey-bg .btn p,
.halal .qns {
    margin: 0 !important
}

.halal .btn:hover {
    color: #fff;
    background: #1c8672
}

.halal .grey-bg .btn:hover {
    background: #218b77;
    color: #fff;
    text-decoration: none !important
}

.halal .grey-bg .btn p.hdr01 {
    font-family: OpenSans-LightItalics, Arial, Helvetica, sans-serif;
    font-size: 18px !important;
    padding-bottom: 5px
}

.halal .grey-bg .btn p.hdr02 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    font-size: 19px !important;
    text-transform: none
}

.halal .iam select {
    position: relative !important
}

.halal .qns {
    padding: 0 20px 15px
}

.halal .person-icon {
    background: url(../images/halal/icons/person.png) bottom center no-repeat #2ea08b
}

.halal .grey-bg ul {
    margin-left: -25px
}

    .halal .grey-bg ul li {
        font-size: 1em;
        padding-bottom: 20px;
        list-style: outside
    }

.halal .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 75% !important;
    text-align: center !important;
    bottom: 15px !important
}

    .halal .carousel-indicators .active {
        background-color: #b0d0c1 !important;
        border: none !important
    }

    .halal .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 1px;
        text-indent: -999px;
        cursor: pointer;
        background-color: transparent !important;
        border-radius: 10px;
        border: 1px solid #b0d0c1 !important
    }

.round01,
.round02,
.round03 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 10px
}

.halal select {
    background-image: linear-gradient(45deg, transparent 50%, #2ea08b 50%), linear-gradient(-45deg, transparent 50%, #2ea08b 50%)
}

.round01 {
    background: url(../images/halal/icons/icon01.png) center center no-repeat #7eb99d
}

.round02 {
    background: url(../images/halal/icons/icon02.png) center center no-repeat #7eb99d
}

.round03 {
    background: url(../images/halal/icons/icon03.png) center center no-repeat #7eb99d
}

.halal .btn02 {
    padding: 15px;
    margin-bottom: 17px;
    border: 1px solid #ccc;
    height: auto;
    vertical-align: middle
}

    .halal .btn02 div {
        display: inline-block !important;
        vertical-align: middle
    }

        .halal .btn02 div:first-child {
            vertical-align: top
        }

    .halal .btn02 p {
        margin: 0;
        padding: 0
    }

        .halal .btn02 p.hdr01 {
            font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
            font-size: 18px !important
        }

        .halal .btn02 p.btn-more {
            margin-bottom: 0 !important;
            font-size: 12px !important
        }

    .halal .btn02 .btn-more {
        color: #85d1ac
    }

        .halal .btn02 .btn-more:hover {
            color: #93d1b3
        }

    .halal .btn02:hover {
        border: 1px solid #6d6d6d
    }

.line {
    border-right: 1px solid #777
}

.quicklink {
    padding-left: 35px
}

.halal .side-menu .sidehdr .icon {
    background: #2ea08b
}

.halal .left-content .grey-bg {
    padding: 25px 25px 35px !important
}

.halal .side-menu,
.halal .sidebar {
    margin-top: 0 !important
}

.halal .left-content .grey-bg input {
    font-family: OpenSans-Italics, Arial, Helvetica, sans-serif;
    width: 86%;
    padding: 12px 15px;
    border: none;
    border-radius: 30px 0 0 30px;
    color: #000 !important;
    font-size: 1em;
    position: relative !important;
    background: #fff
}

.halal .grey-bg select.within-sites-dropdown {
    width: auto !important;
    float: right !important;
    margin-right: 14.2%;
    padding: 12px 40px 14px 10px;
    margin-top: -46px;
    border-radius: 0;
    background-position: auto !important
}

.halal .left-content .grey-bg p {
    padding-bottom: 10px;
    color: #fff !important
}

    .halal .left-content .grey-bg p.hdr01 {
        font-size: 1.071em
    }

.halal .left-content .btn02 {
    padding: 15px;
    border: 1px solid #2ea08b;
    height: auto;
    width: 100%;
    vertical-align: middle
}

    .halal .left-content .btn02 p.hdr01 {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        font-size: 1.143em !important;
        margin-bottom: 10px !important;
        color: #000;
        margin-top: 10px !important
    }

    .halal .left-content .btn02 div {
        vertical-align: middle;
        display: inline-block;
        line-height: 20px
    }

    .halal .left-content .btn02:hover {
        border: 1px solid #6d6d6d
    }

.halal .left-content .round01,
.halal .left-content .round02 {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-right: 10px
}

.halal .left-content .round01 {
    background: url(../images/halal/icons/icon01.png) center center no-repeat #2ea08b
}

.halal .left-content .round02 {
    background: url(../images/halal/icons/icon02.png) center center no-repeat #2ea08b
}

.halal .left-content .grey-bg .btn {
    font-size: 1em !important;
    padding: 12px 25px !important;
    width: auto !important;
    background: #2ea08b;
    color: #fff !important;
    float: right !important;
    border-radius: 0 30px 30px 0 !important;
    margin-top: -46px
}

.halal .left-content .grey-bg .reset {
    background: #5e5e5e
}

.halal .left-content .grey-bg .search {
    margin-right: 15px
}

.halal .left-content .grey-bg .reset:hover {
    background: #535353 !important
}

.halal .search-result .location {
    margin-bottom: 30px
}

.halal .search-result .result {
    padding-bottom: 15px;
    font-family: OpenSans-Italic, Arial, Helvetica, sans-serif !important
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    z-index: 3;
    color: #fff !important;
    cursor: default;
    background-color: #008357;
    border-color: #008357
}

.halal .left-content select,
.oom .iam select {
    border: none;
    position: relative;
    z-index: 9999 !important;
    line-height: 20px
}

.halal .left-content ul.pagination li:before {
    content: "" !important;
    list-style: none !important
}

.halal .left-content select {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    width: 100%;
    background-image: linear-gradient(45deg, transparent 50%, #13a2aa 50%), linear-gradient(-45deg, transparent 50%, #13a2aa 50%);
    background-position: auto;
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    padding: 3px 15px;
    border-radius: 30px;
    color: #003d40;
    font-size: .813em;
    margin-right: 10px
}

.halal .left-content .search-result select {
    background-position: calc(100% - 23px) calc(5px + 4px), calc(100% - 15px) calc(5px + 4px)
}

.halal .left-content select option {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif
}

.halal table.table th {
    background: #2ea08b !important
}

.halal .sub-section ul li {
    padding-bottom: 0 !important
}

    .halal .sub-section ul li li {
        padding-bottom: 10px !important
    }

.halal .panel-heading {
    background-color: #2ea08b !important
}

    .halal .panel-group > .panel:first-child .panel-heading a:before,
    .halal .panel-heading a:before {
        color: #2ea08b
    }

@media screen and (max-width: 1199px) {
    .halal .grey-bg select.within-sites-dropdown {
        width: auto !important;
        float: right !important;
        margin-right: 18%;
        padding: 12px 40px 13px 10px;
        margin-top: -45px;
        border-radius: 0;
        background-position: auto !important
    }

    .halal .left-content .grey-bg input {
        font-family: OpenSans-Italics, Arial, Helvetica, sans-serif;
        width: 84%;
        padding: 12px 15px;
        border: none;
        color: #000 !important;
        font-size: 1em;
        position: relative !important;
        background: #fff
    }
}

@media screen and (max-width: 991px) {
    .halal .carousel-inner {
        height: 323px !important
    }

        .halal .carousel-inner > .item > a > img,
        .halal .carousel-inner > .item > img,
        .halal .img-responsive,
        .halal .thumbnail a > img,
        .halal .thumbnail > img {
            display: block;
            max-width: auto !important;
            height: 323px !important
        }

    .halal .carousel-caption p.header01 {
        font-size: 1.714em !important
    }

    .halal .carousel-caption p {
        font-size: 1em
    }

    .halal .left-content .grey-bg input {
        top: 0;
        background-image: none;
        border-radius: 30px;
        width: 100% !important
    }

    .halal .qns {
        padding: 10px 20px
    }

    .halal .grey-bg select.within-sites-dropdown {
        width: 100% !important;
        float: none !important;
        margin-right: 12%;
        padding: 12px 40px 13px 10px;
        margin-top: 20px;
        border-radius: 30px;
        background-position: auto !important
    }

    .halal .left-content .grey-bg .btn {
        font-size: 1em !important;
        padding: 12px 20px 12px 30px !important;
        width: 100% !important;
        background: #2ea08b;
        color: #fff !important;
        float: none !important;
        border-radius: 30px !important;
        margin-top: 20px
    }
}

@media screen and (max-width: 767px) {
    .line {
        border-right: none;
        border-bottom: 1px solid #6d6d6d;
        margin: 20px 0
    }

    .quicklink {
        padding-left: 15px
    }

    .halal .carousel-caption {
        position: relative !important;
        padding: 0 !important
    }

    .halal .black-overlay {
        position: relative !important;
        background: #000;
        color: #fff !important;
        padding-bottom: 50px
    }

    .halal .carousel-indicators {
        bottom: 0 !important
    }

    .halal .carousel-inner {
        height: auto !important
    }

        .halal .carousel-inner > .item > a > img,
        .halal .carousel-inner > .item > img,
        .halal .img-responsive,
        .halal .thumbnail a > img,
        .halal .thumbnail > img {
            display: block;
            max-width: 100% !important;
            height: auto !important
        }
}

.haj .dates ul li,
.oom .carousel-indicators li,
.zoomimg {
    display: inline-block
}

.oom .first-section {
    background: url(../images/oom/teal-bg.jpg) no-repeat;
    background-size: cover;
    color: #fff;
    padding: 50px 0
}

.oom .table > tbody > tr > td {
    color: #000 !important
}

.oom .iam {
    padding: 10px
}

    .oom .iam select {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        width: 100%;
        background-image: linear-gradient(45deg, transparent 50%, #13a2aa 50%), linear-gradient(-45deg, transparent 50%, #13a2aa 50%);
        background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
        background-size: 8px 8px, 8px 8px;
        background-repeat: no-repeat;
        background-color: #fff;
        padding: 10px 15px;
        border-radius: 30px;
        color: #003d40;
        font-size: .875em;
        margin-right: 10px;
        height: auto
    }

.zoomimg,
.zoomimg:after {
    background-color: rgba(0, 0, 0, .3)
}

.oom .iam select option {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: 1em !important
}

.oom .first-section .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    text-align: left;
    color: #fff;
    font-size: 1.188em;
    padding: 0 0 0 20px;
    text-transform: none
}

.ars .btn-more,
.ars .carousel-caption .btn,
.ars .left-content h1,
.ars h1,
.cat,
.madrasah .btn,
.madrasah .carousel-caption .btn,
.madrasah h1,
.oom .carousel-caption .btn,
.oom .first-section .btn-more,
.oom .info .btn-more,
.scwo .info .btn-more,
.scwo .info .title,
.wakaf .btn,
.wakaf h1,
.zakat .content-section h1,
.zakat h1 {
    text-transform: uppercase
}

.oom .first-section .btn-more,
.oom .info .btn-more,
.oom .info .title {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
}

.oom .first-section .btn-more {
    color: #fff;
    font-size: .875em !important;
    line-height: 40px !important
}

    .oom .first-section .btn-more:hover {
        color: #f1f1f1
    }

.oom .info {
    padding: 15px;
    position: absolute;
    bottom: 0
}

    .oom .info .dates {
        color: #fff;
        font-size: .75em
    }

    .oom .info .title {
        color: #fff;
        font-size: 1em
    }

    .oom .info .btn-more {
        color: #bdf3ed;
        vertical-align: middle;
        font-size: .75em !important
    }

.fb-widget {
    width: 100%;
    height: 400px;
    border: none
}

.zoom-banner {
    padding-top: 50px
}

.zoomimg {
    width: 100%;
    min-height: 190px;
    background-size: cover;
    background-repeat: noz-repeat;
    transition: all .5s ease;
    position: relative;
    border: 1px solid #fff;
    background-position: 50% 20%
}

    .cat,
    .oom .black-overlay,
    .zoomimg:after {
        position: absolute;
        top: 0;
        left: 0
    }

    .zoomimg:hover {
        cursor: pointer;
        background-size: 150% 150%
    }

.first-bx {
    background-image: url(../images/oom/bg01.jpg)
}

.second-bx {
    background-image: url(../images/oom/bg02.jpg)
}

.third-bx {
    background-image: url(../images/oom/bg03.jpg)
}

.zoomimg:after {
    font-family: sans-serif;
    padding-top: 250px;
    font-size: 2em;
    color: #fff;
    width: 260px;
    height: 375px;
    opacity: 0;
    transition: opacity .5s linear;
    box-sizing: border-box
}

.zoomimg:hover:after {
    opacity: 1
}

.cat {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    background: #0a604f;
    padding: 10px 20px;
    font-size: .75em;
    color: #fff
}

.oom .second-section {
    padding: 50px 0 20px !important
}

    .oom .second-section,
    .oom .second-section a {
        color: #000
    }

        .oom .second-section .btn {
            font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
            background: 0 0;
            border: 1px solid #5EFDDD;
            font-size: .813em;
            color: #0a604f
        }

            .oom .second-section .btn:hover {
                border: 1px solid #000;
                color: #000;
                text-decoration: none
            }

        .oom .left-content h1,
        .oom .left-content h2,
        .oom .left-content h3,
        .oom .left-content h4,
        .oom .left-content h5,
        .oom .left-content h6,
        .oom .second-section h1 {
            color: #0a604f !important;
            font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
        }

        .oom .left-content h1,
        .oom .second-section h1 {
            font-size: 1.188em !important;
            margin-top: 0 !important;
            margin-bottom: 15px
        }

.oom .black-overlay {
    bottom: 0;
    right: 0;
    color: #fff !important;
    background: #000;
    background: -webkit-linear-gradient(left, transparent, transparent, transparent, #000, #000, #000);
    background: -o-linear-gradient(left, transparent, transparent, transparent, #000, #000, #000);
    background: -moz-linear-gradient(left, transparent, transparent, transparent, #000, #000, #000);
    background: linear-gradient(to left, transparent, transparent, transparent, #000, #000, #000)
}

.oom .carousel-caption .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    font-size: 1.75em !important;
    text-align: left !important;
    text-shadow: none;
    color: #73c6b6 !important;
    margin-bottom: 20px !important
}

.oom .carousel-caption p {
    font-family: OpenSans-Light, Arial, Helvetica, sans-serif;
    text-align: left !important;
    text-shadow: none;
    color: #fff !important;
    font-size: 1em;
    padding-bottom: 10px
}

.oom .carousel-caption .btn,
.oom .left-content .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.oom .second-section p {
    font-size: .875em !important
}

.oom .carousel-indicators {
    position: absolute !important;
    left: 42% !important;
    z-index: 15;
    width: 50% !important;
    padding-left: 0;
    text-align: left !important;
    list-style: none;
    border: none !important;
    bottom: 50px !important
}

.oom .carousel-caption .btn {
    background: 0 0;
    padding: 10px 20px;
    text-align: center;
    color: #d8f0f2;
    border-radius: 0 !important;
    font-size: .75em !important;
    border: 1px solid #d8f0f2
}

.oom .glyphicon-chevron-right:before {
    padding-right: 7px
}

.oom .glyphicon-chevron-left:before {
    padding-left: 7px
}

.oom .carousel-caption .btn:hover {
    border: 1px solid #fff;
    color: #fff
}

.oom .carousel-control.left span,
.oom .carousel-control.right span {
    background: #73c6b6 !important;
    opacity: 1 !important;
    line-height: 20px
}

    .oom .carousel-control.left span:hover,
    .oom .carousel-control.right span:hover {
        background: #4da392 !important;
        opacity: 1 !important;
        line-height: 20px
    }

.oom .carousel-control {
    opacity: 1 !important
}

.oom .carousel-indicators .active {
    background-color: #b5d4b7 !important;
    border: none !important
}

.oom .carousel-indicators li {
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent !important;
    border: 1px solid #b5d4b7 !important;
    border-radius: 10px
}

.haj .carousel-indicators,
.scwo .carousel-control {
    display: none
}

.oom .carousel-caption {
    width: 35% !important;
    text-align: left !important;
    left: 12% !important;
    top: 50px !important
}

.oom .glyphicon-chevron-left:before,
.oom .glyphicon-chevron-right:before {
    font-size: 18px !important
}

.oom .side-menu .sidehdr .icon {
    background: #279c86
}

.oom .left-content p {
    font-size: .875em
}

.oom .left-content a {
    color: #0a604f
}

.oom .left-content ul li {
    list-style: none !important;
    padding-bottom: 10px;
    font-size: .875em
}

    .oom .left-content ul li:before {
        content: "\2022";
        position: absolute;
        left: 15px;
        color: #279c86
    }

.oom .left-content ul {
    margin-left: 0 !important;
    padding-left: 20px !important;
    padding-bottom: 15px
}

.oom .left-content .iam select {
    background-color: #eaeaea;
    margin-bottom: 30px
}

.oom .left-content .iam p {
    text-align: left;
    padding: 10px 0
}

.oom .left-content .header01 {
    font-size: 1em !important;
    color: #000
}

.oom table.table th {
    background: #279c86 !important
}

.oom .panel-heading {
    background-color: #279c86 !important
}

    .oom .panel-group > .panel:first-child .panel-heading a:before,
    .oom .panel-heading a:before {
        color: #279c86
    }

@media screen and (max-width: 991px) {
    .fb-widget {
        width: 100%
    }

    .oom .carousel-caption {
        top: 0 !important
    }

    .oom .carousel-indicators {
        bottom: 0 !important
    }

    .oom .iam select {
        padding: 10px 40px 10px 15px
    }
}

@media screen and (max-width: 767px) {
    .oom .black-overlay,
    .oom .carousel-caption {
        position: relative !important
    }

    .zoom-banner {
        padding-top: 15px
    }

    .zoomimg {
        margin-bottom: 20px
    }

    .oom .iam p {
        text-align: center
    }

    .oom .carousel-inner {
        background: #343434
    }

    .oom .carousel-caption {
        width: 77% !important;
        text-align: left !important;
        left: 12% !important;
        top: 0 !important
    }

    .oom .carousel-indicators {
        bottom: 0 !important
    }

    .oom .first-section {
        padding: 20px 0 !important
    }

    .oom .glyphicon-chevron-right:before {
        padding-right: 0
    }

    .oom .glyphicon-chevron-left:before {
        padding-left: 0
    }

    .oom .carousel-control.left span,
    .oom .carousel-control.right span {
        padding: 5px
    }
}

.nopad {
    margin: 0;
    padding: 0
}

.haj-bg {
    background: #f7f0dd !important
}

    .haj-bg .right-main {
        position: relative;
        background: url(../images/haj/pattern.png) no-repeat;
        text-align: center;
        background-size: contain;
        height: 402px
    }

.haj .carousel-caption .header01,
.haj .carousel-caption p {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    text-align: left !important;
    text-shadow: none
}

.haj .haj-content {
    padding: 40px 15px 0
}

.haj p {
    font-size: .875em;
    color: #000
}

.haj .carousel-caption .header01 {
    font-size: 1.75em;
    color: #008357;
    margin-bottom: 20px !important
}

.haj .carousel-caption p {
    color: #000;
    font-size: 1em;
    line-height: 20px;
    padding-bottom: 10px
}

.haj .carousel-caption {
    width: 300px !important;
    background-color: rgba(0, 0, 0, .6);
    margin: 50px 0;
    height: 300px;
    text-align: left;
    padding: 20px
}

.haj .carousel-control {
    position: absolute;
    left: 9%;
    font-size: 20px;
    color: #9b9994;
    text-align: center;
    opacity: 1
}

    .haj .carousel-control:hover {
        color: #e7b63b
    }

    .carousel-control .icon-next,
    .haj .carousel-control .glyphicon-chevron-right {
        margin-right: -35%
    }

.haj h1 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    color: #000 !important;
    font-size: 1.375em !important
}

.haj h2,
.haj h3,
.haj h4,
.haj h5,
.haj h6 {
    color: #b5732f !important
}

.haj .btn {
    background: #bd8701;
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: .813em
}

    .haj .btn:hover {
        background: #9f7100;
        color: #fff
    }

.haj .right-main .updateddate {
    text-align: center;
    position: absolute;
    bottom: initial;
    width: 100%
}

.haj div.dates {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    color: #b5732f;
    font-size: 1.5em;
    padding: 20px 20px 0
}

.wakaf .btn,
.wakaf .carousel-caption .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.haj .hline:after {
    content: ' ';
    position: absolute;
    display: block;
    width: 30px;
    margin: 12px 2%;
    border: 2px solid #b5732f;
    border-radius: 1px;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    left: 46%;
    transform: translateX(-50%)
}

.rotate,
.wakaf .left-main {
    position: relative
}

.scwo .zoomimg,
.wakaf .zoomimg {
    -webkit-box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2);
    box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2)
}

.haj .side-menu .sidehdr .icon {
    background: #bd8702
}

.haj .left-content ul,
.haj-bg ul {
    margin-left: -20px;
    color: #000
}

    .haj .left-content ul li,
    .haj-bg ul li {
        padding-bottom: 10px;
        font-size: .875em
    }

.haj table.table th {
    background: #8b541c !important
}

.haj .panel-heading {
    background-color: #8b541c !important
}

    .haj .panel-group > .panel:first-child .panel-heading a:before,
    .haj .panel-heading a:before {
        color: #8b541c
    }

@media screen and (max-width: 1199px) {
    .carousel-control .icon-next,
    .haj .carousel-control .glyphicon-chevron-right {
        margin-right: -45%
    }
}

@media screen and (max-width: 991px) {
    .haj .right-main .updateddate {
        text-align: center;
        position: relative;
        bottom: 0;
        width: 100%
    }

    .haj .right-main {
        padding: 20px !important
    }

    .haj .carousel-control {
        bottom: -150px
    }

    .haj table.table td:before {
        color: #8b541c !important
    }
}

@media screen and (max-width: 767px) {
    .carousel-control .icon-next,
    .haj .carousel-control .glyphicon-chevron-right {
        margin-right: -20%
    }

    .haj .carousel-indicators {
        bottom: 0 !important
    }

    .haj .carousel-caption {
        width: 100% !important;
        background-color: rgba(0, 0, 0, 1);
        margin: 0;
        height: auto;
        text-align: left;
        padding: 25px 25px 35px;
        left: 0
    }

    .haj .carousel-control .glyphicon-chevron-left,
    .haj .carousel-control .icon-prev {
        left: 50%;
        margin-left: -30px
    }

    .haj .right-main {
        min-height: auto;
        position: relative;
        background: url(../images/haj/pattern.png) no-repeat;
        text-align: center;
        padding: 20px 20px 60px;
        margin-right: -15px !important
    }

    .haj .carousel-control {
        top: 96%;
        bottom: auto;
        left: 15px
    }
}

.rotate {
    width: 28px;
    height: 28px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.haj .dates img {
    margin-right: 0
}

.haj .dates ul {
    margin-left: 0;
    padding-left: 0
}

p.pdf {
    font-size: .75em;
    font-style: normal;
    color: #000
}

.wakaf-bg {
    background: #977844 !important
}

.wakaf .carousel-caption {
    width: 100% !important;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    bottom: 0 !important;
    min-height: 100px !important;
    top: auto !important;
    left: 0 !important;
    padding: 20px !important
}

.wakaf .carousel-inner {
    height: auto !important
}

.wakaf .row .left-main {
    margin: 0 !important
}

.wakaf .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 20% !important;
    text-align: center !important;
    list-style: none;
    border: none !important;
    bottom: 10px !important;
    margin: 0 auto
}

    .wakaf .carousel-indicators .active {
        background-color: #b3925b !important;
        border: none !important
    }

    .wakaf .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 1px;
        text-indent: -999px;
        cursor: pointer;
        background-color: transparent !important;
        border: 1px solid #b3925b !important;
        border-radius: 10px
    }

.wakaf .btn {
    background: 0 0;
    padding: 10px 20px;
    text-align: center;
    color: #daba84;
    border-radius: 0 !important;
    font-size: 1em;
    border: 1px solid #daba84
}

    .wakaf .btn:hover {
        color: #efce96;
        border: 1px solid #efce96
    }

.black-overlay p,
.wakaf .carousel-caption,
.wakaf .header01,
.wakaf .header02 {
    color: #fff !important;
    text-align: left !important
}

    .wakaf .carousel-caption .header01 {
        font-size: 1.25em;
        text-align: left !important;
        text-shadow: none;
        color: #008357;
        margin-bottom: 10px !important
    }

    .wakaf .carousel-caption p {
        font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
        font-size: .875em
    }

.scwo .info .title,
.scwo .second-section h1,
.scwo .third-section h1,
.wakaf .line-box p,
.wakaf h1,
.wakaf h2,
.wakaf h3,
.wakaf h4,
.wakaf h5,
.wakaf h6 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.wakaf .line-box {
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    border: 1px solid #fff;
    position: absolute;
    font-size: 1.188em;
    color: #FFFFFD;
    text-align: center;
    line-height: 24px
}

    .wakaf .line-box p {
        top: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        width: 100%;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, .5)
    }

.wakaf .right-main {
    ext-align: center;
    min-height: auto;
    position: relative;
    text-align: center;
    padding-top: 0;
    background: url(../images/wakaf/donate-bg.jpg) center center no-repeat;
    height: 400px;
    color: #fff !important
}

    .wakaf .right-main .info {
        margin: 90px 0
    }

    .wakaf .right-main h1 {
        color: #fff !important;
        line-height: 24px
    }

.wakaf .info h2 {
    color: #fff !important;
    font-size: 1.375em !important
}

.wakaf .info p {
    color: #fff !important;
    font-size: 1em !important;
    line-height: 21px
}

.wakaf .info {
    padding: 10px 20px
}

.wakaf .btn-more {
    color: #d6ab63;
    position: absolute;
    bottom: 20px;
    font-size: .75em !important
}

    .wakaf .btn-more:hover {
        color: #efce96
    }

.wakaf .zoomimg {
    min-height: 350px;
    border: none
}

.wakaf .first-bx {
    background-image: url(../images/wakaf/bg01.jpg)
}

.wakaf .second-bx {
    background-image: url(../images/wakaf/bg02.jpg)
}

.wakaf .third-bx {
    background-image: url(../images/wakaf/bg03.jpg)
}

.wakaf h1 {
    font-size: 1.188em !important;
    color: #3b0000 !important;
    padding: 0 0 10px
}

.wakaf h2,
.wakaf h3,
.wakaf h4,
.wakaf h5,
.wakaf h6 {
    color: #6e4603 !important
}

.wakaf .left-content ul li:before,
.wakaf .panel-group > .panel:first-child .panel-heading a:before,
.wakaf .panel-heading a:before {
    color: #6e4603
}

.wakaf .side-menu .sidehdr .icon {
    background: #6e4603;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.wakaf table.table th {
    background: #6e4603
}

.wakaf .panel-heading {
    background-color: #6e4603 !important
}

@media screen and (max-width: 1199px) {
    .wakaf .carousel-inner > .item > a > img,
    .wakaf .carousel-inner > .item > img,
    .wakaf .img-responsive,
    .wakaf .thumbnail a > img,
    .wakaf .thumbnail > img {
        display: block;
        max-width: inherit;
        height: 434px
    }
}

@media screen and (max-width: 991px) {
    .carousel-inner > .item > a > img,
    .carousel-inner > .item > img,
    .img-responsive,
    .thumbnail a > img,
    .thumbnail > img {
        display: block;
        max-width: 100%;
        height: auto
    }

    .wakaf .right-main {
        height: 400px !important
    }

        .wakaf .right-main .info {
            padding: 50px 0 0 !important;
            margin: 0 !important
        }

    .wakaf table.table td:before {
        color: #6e4603 !important
    }
}

@media screen and (max-width: 767px) {
    .wakaf .line-box {
        left: 20px;
        top: 20px;
        bottom: 20px;
        right: 20px;
        border: 1px solid #fff;
        position: absolute;
        font-size: 1.286em;
        color: #FFFFFD;
        text-align: center;
        padding: 10px;
        line-height: 21px
    }

    .wakaf .carousel-control .glyphicon-chevron-left,
    .wakaf .carousel-control .icon-prev {
        left: 50%;
        margin-left: 0
    }

    .wakaf .carousel-inner > .item > a > img,
    .wakaf .carousel-inner > .item > img,
    .wakaf .img-responsive,
    .wakaf .thumbnail a > img,
    .wakaf .thumbnail > img {
        height: auto !important
    }
}

.scwo .second-section h1,
.scwo .third-section h1 {
    font-size: 1.188em !important
}

.scwo .carousel-caption {
    width: 35% !important;
    top: 20px !important;
    left: 61% !important;
    color: #000
}

.scwo .black-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: #fff !important;
    background: #fff;
    background: -webkit-linear-gradient(left, transparent, transparent, transparent, #fff, #fff, #fff);
    background: -o-linear-gradient(right, transparent, transparent, transparent, #fff, #fff, #fff);
    background: -moz-linear-gradient(right, transparent, transparent, transparent, #fff, #fff, #fff);
    background: linear-gradient(to right, transparent, transparent, transparent, #fff, #fff, #fff)
}

.scwo .second-section {
    background: #fde3c3;
    padding-bottom: 40px
}

    .scwo .second-section h1 {
        color: #000 !important
    }

.scwo .third-section h1 {
    color: #00724c !important
}

.scwo .third-section {
    background: url(../images/scwo/services.jpg) no-repeat;
    background-size: cover;
    min-height: 440px
}

.scwo .zoom-banner {
    padding-top: 0
}

.scwo .zoomimg {
    border: none
}

.academy .zoomimg,
.muis50 .zoomimg,
.zakat .zoomimg {
    -webkit-box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2)
}

.academy .zoomimg,
.zakat .zoomimg {
    -moz-box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2);
    box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2)
}

.scwo .first-bx {
    background-image: url(../images/scwo/bg01.jpg)
}

.scwo .second-bx {
    background-image: url(../images/scwo/bg02.jpg)
}

.scwo .third-bx {
    background-image: url(../images/scwo/bg03.jpg)
}

.scwo .info {
    background: rgba(0, 0, 0, .6);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    color: #fff
}

    .scwo .info .title {
        font-size: 1.063em
    }

    .scwo .info .hr {
        border-bottom: 1px solid #f3b34f;
        margin: 10px 0;
        clear: both;
        width: 100%
    }

.scwo .carousel-indicators .active {
    background-color: #3d918b !important;
    border: none !important
}

.scwo .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent !important;
    border: 1px solid #3d918b !important;
    border-radius: 10px
}

.scwo .info .btn-more {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    color: #f3b34f;
    font-size: .813em !important
}

.scwo .carousel-caption .header01 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    font-size: 1.75em;
    text-align: center;
    text-shadow: none;
    color: #00724c !important;
    margin-bottom: 15px !important;
    line-height: 30px
}

.scwo .carousel-indicators {
    position: absolute !important;
    left: 6% !important;
    width: 104% !important;
    padding-left: 0;
    text-align: right !important;
    list-style: none;
    border: none !important;
    bottom: 30px !important
}

.scwo .btn {
    background: #f99932;
    font-size: .813em !important
}

    .scwo .btn:hover {
        background: #e18522;
        color: #fff
    }

.scwo .carousel-caption p {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    text-align: center !important;
    text-shadow: none;
    color: #000 !important;
    font-size: 1em;
    line-height: 20px
}

.scwo .side-menu .sidehdr .icon {
    background: #f99932;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.scwo .left-content .updateddate {
    position: relative !important
}

.scwo .left-content ul li::before {
    color: #f99932
}

.scwo table.table th {
    background: #ffe6ce;
    text-align: center;
    color: #000;
    border-bottom: 2px solid #fff !important
}

.scwo .panel-heading {
    background-color: #ffe6ce !important
}

    .scwo .panel-group > .panel:first-child .panel-heading a:before,
    .scwo .panel-heading a:before {
        color: #ffe6ce
    }

.scwo .panel-title a {
    color: #000 !important
}

@media screen and (max-width: 991px) {
    .scwo .carousel-caption {
        width: 52% !important;
        top: 0 !important;
        left: 48% !important;
        color: #000
    }

    .scwo .carousel-indicators {
        bottom: 0 !important;
        left: 2% !important
    }

    .scwo table.table td:before {
        color: #000 !important
    }
}

@media screen and (max-width: 767px) {
    .scwo .carousel-indicators {
        width: 100% !important;
        left: 0 !important;
        bottom: 10px !important;
        margin: 0 auto;
        text-align: center !important
    }

    .scwo .third-section {
        background: url(../images/scwo/services.jpg) no-repeat;
        background-size: cover;
        min-height: auto
    }

    .scwo .black-overlay {
        position: relative !important
    }

    .scwo .carousel-caption {
        width: 100% !important;
        top: 20% !important;
        left: 0 !important;
        color: #000;
        padding: 50px 20px 20px
    }
}

.madrasah .second-section {
    background: #ddddd4;
    padding: 50px 0
}

.madrasah .sub-banner {
    border: 2px solid #fff;
    background: rgba(255, 255, 255, .5);
    margin: 0;
    padding: 0
}

    .madrasah .sub-banner p {
        font-size: .875em
    }

    .madrasah .sub-banner .btn {
        font-size: .75em
    }

.madrasah .info {
    padding: 20px 20px 0
}

.madrasah .carousel-caption .header01 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    font-size: 1.625em;
    text-align: left;
    text-shadow: none;
    color: #fff;
    margin-bottom: 10px !important;
    line-height: 28px
}

.madrasah .carousel-caption p {
    font-family: OpenSans-Light, Arial, Helvetica, sans-serif;
    text-align: left;
    text-shadow: none;
    color: #fff;
    font-size: 1em;
    line-height: 20px
}

.madrasah h1,
.madrasah h2,
.madrasah h3,
.madrasah h4,
.madrasah h5,
.madrasah h6 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif !important
}

.madrasah .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 76% !important;
    padding-left: 0;
    text-align: center !important;
    list-style: none;
    border: none !important;
    bottom: 0 !important
}

.madrasah .carousel-caption .btn {
    background: 0 0;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    border-radius: 0 !important;
    font-size: .75em;
    border: 1px solid #fff
}

.madrasah .carousel-indicators .active {
    background-color: #76c1b1 !important;
    border: none !important
}

.madrasah .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #f0efed !important;
    border: none !important;
    border-radius: 10px
}

.madrasah h1 {
    font-size: 1.188em !important;
    color: #066843 !important;
    padding: 0 0 10px
}

.madrasah h2,
.madrasah h3,
.madrasah h4,
.madrasah h5,
.madrasah h6 {
    color: #1a9579 !important
}

.madrasah .btn {
    background: #2ca88c;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    border-radius: 0 !important;
    font-size: .813em
}

.madrasah .carousel-caption {
    background: url(../images/madrasah/motif.png) center left no-repeat !important;
    background-size: contain !important;
    padding: 20px;
    top: 0;
    bottom: 0;
    height: 400px
}

.madrasah .box {
    color: #fff !important;
    padding: 20px;
    width: 260px;
    margin: 3% 50px
}

.madrasah .info .title {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    color: #066843;
    font-size: 1.188em
}

.madrasah .side-menu .sidehdr .icon {
    background: #2ca88c;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.madrasah .left-content h1 {
    color: #066843 !important
}

.madrasah .left-content h2 {
    color: #1a9579 !important
}

.madrasah .left-content a {
    color: #008357
}

.madrasah table.table th {
    background: #2ca88c !important
}

.madrasah .panel-heading {
    background-color: #2ca88c !important
}

    .madrasah .panel-group > .panel:first-child .panel-heading a:before,
    .madrasah .panel-heading a:before {
        color: #2ca88c
    }

@media screen and (max-width: 1199px) {
    .madrasah .carousel-caption {
        background: url(../images/madrasah/motif.png) center left no-repeat !important;
        background-size: contain !important;
        padding: 20px;
        top: 0;
        bottom: 0;
        height: auto !important
    }

    .madrasah .box {
        color: #fff !important;
        padding: 20px;
        width: 260px;
        margin: 12% 50px
    }
}

@media screen and (max-width: 1099px) {
    .madrasah .box {
        color: #fff !important;
        padding: 20px;
        width: 255px;
        margin: 9% 39px
    }
}

@media screen and (max-width: 991px) {
    .madrasah .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 340px !important
    }

        .madrasah .carousel-inner > .item > img {
            height: 100% !important;
            width: auto !important
        }

    .madrasah .carousel-caption {
        background: url(../images/madrasah/motif.png) center left no-repeat !important;
        padding: 20px;
        top: 0;
        bottom: 0;
        background-size: cover !important;
        height: 344px !important;
        width: 350px !important
    }
}

@media screen and (max-width: 767px) {
    .madrasah .carousel-inner > .item {
        background: #2ca88c !important
    }

        .madrasah .carousel-inner > .item > img {
            height: auto !important;
            width: 100% !important
        }

    .madrasah .carousel-inner {
        height: auto !important
    }

    .madrasah .box {
        color: #fff !important;
        padding: 20px;
        width: 100%;
        margin: 0
    }

    .madrasah .carousel-caption {
        background: 0 0 !important;
        padding: 0;
        top: 0;
        bottom: 0;
        height: auto !important
    }

    .madrasah .sub-banner {
        margin-bottom: 20px
    }
}

.ars .arrowleft,
.ars .arrowright {
    position: absolute;
    width: 300px;
    height: 200px
}

.ars .first-section {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    background: url(../images/ars/first-bg.jpg) no-repeat;
    background-size: cover;
    padding: 50px 0
}

.ars .arrowleft h1,
.ars .arrowright h1,
.ars .btn-more {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
}

.ars .arrowleft {
    background: url(../images/ars/left-arrow.png) right top no-repeat;
    top: 0;
    right: 0;
    margin-top: -20px;
    margin-right: 20px;
    padding-left: 80px
}

.ars .arrowright {
    background: url(../images/ars/right-arrow.png) left top no-repeat;
    bottom: 0;
    left: 0;
    margin-bottom: -20px;
    margin-left: -20px;
    padding-right: 80px;
    text-align: right
}

.ars .arrowleft:hover {
    margin-right: 40px
}

.ars .arrowright:hover {
    margin-left: 0
}

.ars .arrowleft:hover,
.ars .arrowright:hover {
    color: #ca6d00
}

.ars .arrowleft h1,
.ars .arrowright h1 {
    color: #000 !important;
    font-size: 1.188em !important;
    padding-top: 25px
}

.ars .btn-more {
    color: #e08213;
    font-size: .813em !important
}

.ars .carousel-caption .header01,
.ars h1 {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif
}

.ars .second-section {
    background: url(../images/ars/second-bg.jpg) no-repeat #03563b;
    background-size: cover;
    color: #fff
}

    .ars .second-section .btn {
        width: 100%;
        padding: 15px;
        border: 1px solid #e3f7e2 !important;
        background: 0 0;
        margin-bottom: 10px;
        font-size: .875em;
        color: #e3f7e2
    }

        .ars .second-section .btn:hover {
            color: #fff;
            border-color: #fff !important
        }

    .ars .second-section p {
        color: #fff
    }

        .ars .second-section p .pdf {
            margin: 0
        }

.ars h1 {
    font-size: 1.188em !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 0 0 10px
}

.ars .carousel-caption .header01 {
    font-size: 1.75em !important;
    text-align: left !important;
    text-shadow: none;
    color: #c3eacc !important;
    margin-bottom: 20px !important
}

.ars .carousel-caption p {
    font-family: OpenSans-Light, Arial, Helvetica, sans-serif;
    text-align: left !important;
    text-shadow: none;
    color: #fff !important;
    font-size: 1em;
    line-height: 20px;
    padding-bottom: 10px
}

.ars .carousel-indicators {
    position: absolute !important;
    left: 42% !important;
    z-index: 15;
    width: 50% !important;
    padding-left: 0;
    text-align: left !important;
    list-style: none;
    border: none !important;
    bottom: 50px !important
}

.ars .carousel-caption .btn {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    background: 0 0;
    padding: 10px 20px;
    text-align: center;
    color: #d8f0f2;
    border-radius: 0 !important;
    font-size: .813em !important;
    border: 1px solid #c3eacc
}

    .ars .carousel-caption .btn:hover {
        border: 1px solid #fff;
        color: #fff
    }

.ars .carousel-control.left span,
.ars .carousel-control.right span {
    opacity: 1 !important;
    line-height: 20px
}

.ars .carousel-control {
    opacity: 1 !important
}

.ars .carousel-indicators .active {
    background-color: #c3eacc !important;
    border: none !important
}

.ars .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    cursor: pointer;
    background-color: transparent !important;
    border: 1px solid #c3eacc !important;
    border-radius: 10px
}

.ars .carousel-caption {
    width: 35% !important;
    text-align: left !important;
    left: 12% !important;
    top: 50px !important
}

.ars .black-overlay {
    background: url(../images/ars/banner/overlay.png) no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-size: cover
}

.ars .glyphicon-chevron-left:before,
.oom .glyphicon-chevron-right:before {
    font-size: 18px !important
}

.ars .side-menu .sidehdr .icon {
    background: #03573f
}

.ars .subheader {
    height: 80px;
    line-height: 80px
}

.ars .left-content h1 {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: 1.188em !important;
    color: #03553d !important;
    font-weight: 700 !important;
    padding: 0 0 10px
}

.ars .sidebar .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 7px dashed;
    border-top: 7px solid;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    color: #90d8ca !important
}

@media screen and (max-width: 767px) {
    .ars .carousel-caption {
        width: 80% !important;
        text-align: left !important;
        left: 12% !important;
        top: 0 !important
    }

    .ars .carousel-indicators {
        bottom: 0 !important
    }

    .ars .black-overlay {
        background: #000;
        position: relative
    }

    .ars .arrowleft,
    .ars .arrowleft:hover {
        margin-right: -10px
    }

    .ars .arrowright,
    .ars .arrowright:hover {
        margin-left: -10px
    }
}

.zakat .left-main {
    position: relative
}

.zakat .right-main {
    min-height: auto;
    position: relative;
    margin-left: -15px;
    padding-left: 15px;
    text-align: left;
    padding-top: 0;
    color: #000 !important
}

.zakat-bg {
    background: #f3f3f3
}

.zakat .carousel-caption {
    width: 100% !important;
    background: rgba(0, 0, 0, .7);
    position: absolute;
    bottom: 0 !important;
    min-height: 100px !important;
    top: auto !important;
    left: 0 !important;
    padding: 20px !important
}

.zakat .first-bx,
.zakat .fourth-bx,
.zakat .second-bx,
.zakat .third-bx {
    background-position: top
}

.zakat .carousel-inner {
    height: auto !important
}

.zakat .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 20% !important;
    text-align: center !important;
    list-style: none;
    border: none !important;
    bottom: 10px !important;
    margin: 0 auto
}

    .zakat .carousel-indicators .active {
        background-color: #b3925b !important;
        border: none !important
    }

    .zakat .carousel-indicators li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 1px;
        text-indent: -999px;
        cursor: pointer;
        background-color: transparent !important;
        border: 1px solid #b3925b !important;
        border-radius: 10px
    }

.zakat .btn {
    padding: 10px 20px
}

.black-overlay p,
.zakat .carousel-caption,
.zakat .header01,
.zakat .header02 {
    color: #fff !important;
    text-align: left !important
}

    .zakat .carousel-caption .header01 {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        font-size: 1.375em;
        text-align: left !important;
        text-shadow: none;
        color: #008357;
        margin-bottom: 10px !important
    }

.zakat .line-box,
.zakat .line-box p {
    text-align: center;
    position: absolute
}

.zakat .black-overlay p {
    color: #fff !important;
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: .875em
}

.zakat .line-box {
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    border: 1px solid #fff;
    font-size: 1.429em;
    color: #FFFFFD;
    line-height: 24px
}

    .zakat .line-box p {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%
    }

.zakat .right-main .info {
    margin: 15px 0
}

.zakat .right-main h1 {
    color: #fff !important;
    line-height: 24px
}

.zakat .info h2 {
    color: #fff !important;
    font-size: 1.286em !important
}

.zakat .info p {
    color: #fff !important;
    font-size: 1em !important;
    line-height: 21px
}

.zakat .btn-more {
    color: #d6ab63;
    position: absolute;
    bottom: 20px
}

    .zakat .btn-more:hover {
        color: #efce96
    }

.zakat .zoomimg {
    min-height: 350px;
    border: none
}

.zakat .first-bx {
    background-image: url(../images/zakat/bg01.jpg)
}

.zakat .second-bx {
    background-image: url(../images/zakat/bg02.jpg)
}

.zakat .third-bx {
    background-image: url(../images/zakat/bg03.jpg)
}

.zakat .fourth-bx {
    background-image: url(../images/zakat/bg04.jpg)
}

.zakat .zoom-banner {
    padding-top: 0
}

.zakat .zoomimg .black-overlay {
    background: rgba(0, 0, 0, .5);
    position: absolute;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    padding: 15px;
    min-height: 70px
}

    .zakat .zoomimg .black-overlay p {
        font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
        font-size: 1em !important;
        text-align: center !important;
        margin: 0 !important;
        line-height: 21px
    }

.zakat .btn,
.zakat .third-section .btn,
.zakat .third-section ul li {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    text-align: center
}

.zakat .second-section {
    padding: 50px 0
}

.zakat .third-section {
    background: url(../images/zakat/zakat-bg.jpg) bottom no-repeat #f3f3f3;
    background-size: cover;
    padding: 50px 0
}

    .zakat .third-section ul li {
        font-size: 1em;
        display: inline-block;
        width: 170px;
        height: 170px;
        border-radius: 170px;
        border: 10px solid
    }

        .zakat .third-section ul li:nth-child(odd) {
            margin-top: 10px !important;
            vertical-align: 70px
        }

        .zakat .third-section ul li p {
            padding-top: 40%;
            line-height: 18px
        }

        .zakat .third-section ul li a {
            color: #000 !important
        }

            .zakat .third-section ul li a:hover,
            .zakat .third-section ul li:hover {
                color: #000 !important;
                opacity: .8;
                text-decoration: none
            }

    .zakat .btn,
    .zakat .third-section .btn {
        background: #7c5e04;
        color: #fff;
        text-transform: uppercase
    }

    .zakat .third-section .btn {
        border-radius: 0 !important;
        font-size: .875em;
        border: none;
        width: auto !important
    }

.zakat .btn {
    border-radius: 0 !important;
    font-size: 1em;
    border: none
}

.zakat .fourth-section p {
    font-family: OpenSans-Light, Arial, Helvetica, sans-serif
}

.zakat .btn2 p,
.zakat .nisab {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.zakat .btn2 {
    background: #9f873f;
    padding: 15px;
    margin-bottom: 15px
}

    .zakat .btn2 p {
        font-size: 1.188em !important
    }

    .zakat .btn2 .btn-more {
        color: #eed185 !important;
        position: relative !important;
        bottom: 0;
        font-size: .75em !important
    }

.zakat .nisab {
    background: url(../images/zakat/nisab-bg.png) left bottom no-repeat;
    text-align: center !important;
    color: #365f3a !important;
    height: 100px;
    padding-top: 20px;
    margin-bottom: 15px
}

    .zakat .nisab p {
        font-size: 1.188em !important;
        color: #365f3a !important
    }

        .zakat .nisab p.amt {
            font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
            font-size: 1.75em !important
        }

.zakat .iam select,
.zakat h1 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.zakat .btn:hover {
    background: #654c00 !important;
    border: none;
    color: #fff
}

.zakat .yellow {
    border-color: #ffc95c !important
}

.zakat .orange {
    border-color: #fd912c !important
}

.zakat .red {
    border-color: #e24856 !important
}

.zakat .maroon {
    border-color: #8b103e !important
}

.zakat .dblue {
    border-color: #065381 !important
}

.zakat .blue {
    border-color: #34b2e4 !important
}

.zakat .fb-widget {
    height: 610px;
    border: none
}

.zakat h1 {
    font-size: 1.188em !important;
    color: #3b0000 !important;
    padding: 0 0 10px
}

.zakat .fourth-section {
    padding: 50px 0
}

    .zakat .fourth-section h1 {
        margin-top: 0
    }

.zakat .iam select {
    background-image: linear-gradient(45deg, transparent 50%, #9f873f 50%), linear-gradient(-45deg, transparent 50%, #9f873f 50%);
    background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    width: 98%;
    background-color: #eaeaea;
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    color: #000;
    font-size: .875em;
    position: relative !important;
    z-index: 9999 !important;
    margin-right: 10px;
    height: auto
}

    .zakat .iam select option {
        font-size: 1em !important
    }

.zakat .iam {
    padding: 0
}

.zakat .content-section h1 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    font-size: 1.188em !important;
    color: #7c5e04 !important;
    padding: 0 0 10px
}

.zakat .content-section h2,
.zakat .content-section h3,
.zakat .content-section h4,
.zakat .content-section h5,
.zakat .content-section h6 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    color: #9f873f !important
}

.zakat .content-section h2 {
    font-size: 1.188em !important;
    font-style: italic;
    padding: 0 0 10px
}

.zakat .left-content ul li:before {
    color: #7c5e04 !important
}

.zakat .left-content a {
    color: #9f873f
}

.zakat .zakat-form {
    margin: 20px 0;
    min-height: 30px;
    font-size: .875em
}

    .zakat .zakat-form table tr td {
        min-height: 20px;
        padding: 10px 0
    }

    .zakat .zakat-form .title {
        font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
        vertical-align: middle
    }

    .zakat .zakat-form input {
        padding: 15px;
        border-radius: 30px;
        width: 90%
    }

.zakat .reset,
.zakat .search {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    width: 150px;
    text-transform: none;
    color: #fff !important
}

.zakat .search {
    background: #9f873f
}

.zakat .reset {
    background: #5e5e5e
}

.zakat .side-menu .sidehdr .icon {
    background: #7c5e04;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.zakat .content-section .hr {
    border-bottom: 1px solid #9f873f;
    margin: 50px 0 0;
    clear: both;
    width: 100%
}

.zakat .total-bg {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    background: url(../images/zakat/total-bg.png) no-repeat;
    width: 100%;
    min-height: 110px;
    background-size: cover;
    padding-top: 40px;
    text-align: center;
    font-size: 1em
}

    .zakat .total-bg .amt {
        font-size: 1.375em !important
    }

.ui-datepicker {
    background: #fff;
    font-size: .75em;
    padding: 10px;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .32);
    z-index: 9999 !important;
    max-height: 295px
}

    .ui-datepicker select {
        background-image: linear-gradient(45deg, transparent 50%, #f99d3a 50%), linear-gradient(-45deg, transparent 50%, #f99d3a 50%);
        background-position: calc(100% - 13px) calc(5px + 4px), calc(100% - 5px) calc(5px + 4px);
        background-size: 8px 8px, 8px 8px;
        background-repeat: no-repeat;
        background-color: #eaeaea;
        padding: 5px 30px 5px 5px;
        border: none;
        border-radius: 30px;
        color: #000;
        font-size: 1em !important;
        -moz-appearance: none;
        appearance: none
    }

.note {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif !important;
    font-size: .938em !important;
    color: #d84f1e !important
}

.zakat table.table th {
    background: #7c5e04;
    text-align: center;
    color: #fff;
    border-bottom: 2px solid #fff !important
}

.zakat .panel-heading {
    background-color: #7c5e04 !important
}

    .zakat .panel-group > .panel:first-child .panel-heading a:before,
    .zakat .panel-heading a:before {
        color: #7c5e04
    }

.fidyahCalculator table.table td,
.zakat table.table td {
    vertical-align: middle;
    padding: 5px
}

.zakat .content-section h3 {
    color: #9f873f !important
}

.fidyahCalculator input,
.zakat-form input {
    width: 90% !important
}

.fidyahCalculator select,
.zakat-form select {
    background-image: linear-gradient(45deg, transparent 50%, #9f873f 50%), linear-gradient(-45deg, transparent 50%, #9f873f 50%);
    background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    width: 90%;
    background-color: #eaeaea;
    padding: 15px !important;
    border: none;
    border-radius: 30px;
    color: #000;
    font-size: .938em !important;
    position: relative !important;
    z-index: 9999 !important;
    margin-right: 10px
}

.fidyahCalculator table.table td,
.zakat-form table.table td {
    vertical-align: middle;
    padding: 5px !important
}

    .fidyahCalculator table.table td input,
    .zakat-form table.table td input {
        padding: 5px !important;
        border-radius: 30px;
        width: 90%;
        background: #fff
    }

@media screen and (max-width: 1199px) {
    .zakat .third-section ul li {
        display: inline-block;
        width: 140px;
        height: 140px;
        border-radius: 140px;
        border: 10px solid;
        text-align: center
    }

    .zakat .carousel-inner > .item > a > img,
    .zakat .carousel-inner > .item > img,
    .zakat .img-responsive,
    .zakat .thumbnail a > img,
    .zakat .thumbnail > img {
        display: block;
        max-width: inherit;
        height: 455px
    }
}

.academy .carousel-indicators li,
.islamic .carousel-indicators li,
.mosque .carousel-indicators li {
    display: inline-block;
    text-indent: -999px;
    cursor: pointer
}

@media screen and (max-width: 991px) {
    .zakat .third-section ul li {
        display: inline-block;
        width: 110px;
        height: 110px;
        border-radius: 110px;
        border: 10px solid;
        text-align: center
    }

        .zakat .third-section ul li p {
            padding-top: 30%;
            line-height: 18px
        }

        .zakat .third-section ul li:first-child p {
            padding-top: 13% !important;
            line-height: 18px
        }

    .zakat .right-main {
        padding-top: 1px
    }

    .zakat table td:before {
        color: #7c5e04 !important
    }
}

@media screen and (max-width: 767px) {
    .zakat .reset,
    .zakat .search {
        margin-bottom: 15px
    }

    .zakat .zakat-form table tr td {
        min-height: auto;
        padding: 0
    }

    .zakat .third-section ul li:nth-child(odd) {
        vertical-align: 0
    }

    .zakat .line-box {
        left: 20px;
        top: 20px;
        bottom: 20px;
        right: 20px;
        border: 1px solid #fff;
        position: absolute;
        font-size: 1.286em;
        color: #FFFFFD;
        text-align: center;
        padding: 10px;
        line-height: 21px
    }

    .zakat .carousel-inner > .item > a > img,
    .zakat .carousel-inner > .item > img,
    .zakat .img-responsive,
    .zakat .thumbnail a > img,
    .zakat .thumbnail > img {
        height: auto !important
    }

    .zakat .carousel-caption {
        background: rgba(0, 0, 0, 1)
    }

    .zakat .iam select {
        padding: 10px 40px 10px 15px
    }
}

.mosque .black-overlay,
.mosque .info,
.motif-overlay {
    position: absolute;
    bottom: 0
}

.mosque .carousel-caption {
    width: 26% !important;
    top: 4% !important;
    left: 60% !important;
    color: #000;
    text-align: center;
    z-index: 9999
}

    .mosque .carousel-caption p.header02 {
        display: none
    }

.mosque .black-overlay {
    top: 0;
    right: 0;
    left: 0;
    color: #fff !important;
    background: url(../images/mosque/motif.png) right top no-repeat #fff;
    background: -webkit-linear-gradient(left, transparent, transparent, transparent, #fff, #fff, #fff);
    background: -o-linear-gradient(right, transparent, transparent, transparent, #fff, #fff, #fff);
    background: -moz-linear-gradient(right, transparent, transparent, transparent, #fff, #fff, #fff);
    background: linear-gradient(to right, transparent, transparent, transparent, #fff, #fff, #fff)
}

.motif-overlay {
    background: url(../images/mosque/motif.png) right top no-repeat;
    background-size: contain;
    width: 100%;
    z-index: 9999 !important;
    top: 0
}

.mosque .second-section h1 {
    color: #000 !important;
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: 1.188em !important
}

.mosque .zoom-banner {
    padding-top: 0
}

.mosque .info {
    background: rgba(0, 0, 0, .6);
    width: 100%;
    padding: 15px;
    color: #fff
}

    .mosque .info .title {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        font-size: 1.214em;
        text-transform: uppercase
    }

    .mosque .info .hr {
        border-bottom: 1px solid #f3b34f;
        margin: 10px 0;
        clear: both;
        width: 100%
    }

.mosque .carousel-indicators .active {
    background-color: #3d918b !important;
    border: none !important
}

.mosque .carousel-indicators li {
    width: 10px;
    height: 10px;
    margin: 1px;
    background-color: transparent !important;
    border: 1px solid #3d918b !important;
    border-radius: 10px
}

.mosque .info .btn-more {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif;
    color: #f3b34f;
    text-transform: uppercase;
    font-size: .857em !important
}

.mosque .carousel-caption .header01 {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    font-size: 1.6em;
    text-align: center !important;
    text-shadow: none;
    color: #000 !important;
    margin-bottom: 12px !important;
    line-height: 30px
}

.mosque .carousel-indicators {
    position: absolute !important;
    left: 0 !important;
    width: 104% !important;
    padding-left: 0;
    text-align: right !important;
    list-style: none;
    border: none !important;
    bottom: 25px !important
}

.mosque .btn {
    background: #4a8824;
    font-size: .875em
}

    .mosque .btn:hover {
        background: #366d15;
        color: #fff
    }

.mosque .carousel-caption p,
.mosque .left-content h1 {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    color: #000 !important
}

.mosque .carousel-caption p {
    text-align: center !important;
    text-shadow: none;
    font-size: 1em;
    line-height: 20px;
    padding-bottom: 12px
}

.mosque .glyphicon-chevron-left:before,
.mosque .glyphicon-chevron-right:before {
    font-size: 22px !important;
    text-shadow: none !important;
    background: #e9ac1c;
    padding: 10px 12px;
    opacity: 1
}

.mosque .carousel-control {
    opacity: 1;
    background-image: none
}

.mosque .left-content h1 {
    font-size: 1.188em !important;
    font-weight: 700 !important;
    padding: 0 0 10px;
    text-transform: uppercase
}

.mosque .left-content h2,
.mosque .left-content h3,
.mosque .left-content h4,
.mosque .left-content h5,
.mosque .left-content h6 {
    color: #000;
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.mosque .left-content h2 {
    padding: 10px 0;
    text-transform: uppercase
}

.mosque .left-content a {
    color: #00724c
}

.mosque .side-menu .sidehdr .icon {
    background: #e9ac1c;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.email,
.faq,
.location,
.person,
.phone,
.website {
    padding-left: 30px
}

.mosque table.table th {
    background: #c88d01 !important
}

.mosque .left-content ul li::before {
    content: "\2022";
    position: absolute;
    left: 15px;
    color: #f99d3a
}

.mosque .panel-heading {
    background-color: #c88d01 !important
}

    .mosque .panel-group > .panel:first-child .panel-heading a:before,
    .mosque .panel-heading a:before {
        color: #c88d01
    }

.location {
    background: url(../images/mosque/location-icon.png) no-repeat
}

.phone {
    background: url(../images/mosque/phone-icon.png) no-repeat
}

.faq {
    background: url(../images/mosque/faq-icon.png) no-repeat
}

.email {
    background: url(../images/mosque/email-icon.png) no-repeat
}

.person {
    background: url(../images/mosque/person-icon.png) no-repeat
}

.website {
    background: url(../images/mosque/clip-icon.png) no-repeat
}

.legend {
    float: right;
    margin-top: -200px;
    z-index: 1 !important
}

    .legend p {
        font-size: .8em;
        font-weight: 700
    }

    .legend img {
        height: 17px;
        width: auto
    }

.distribution-map .description {
    max-width: 600px;
    margin: 0 auto;
    color: #000
}

.distribution-map div,
.distribution-map footer,
.distribution-map img {
    position: relative;
    box-sizing: border-box
}

.centered {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.centered-y {
    position: absolute;
    width: 100%;
    top: 20%;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.distribution-map,
.distribution-map footer,
.distribution-map img {
    position: relative;
    box-sizing: border-box
}

.distribution-map {
    width: 100%;
    margin: 0 auto;
    z-index: 9999 !important
}

    .distribution-map .content h2 {
        color: #007ba4 !important;
        margin: 10px 0 0
    }

    .distribution-map .map-point {
        cursor: pointer;
        outline: 0;
        z-index: 0;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 20px;
        color: #000;
        background: none;
    }

        .distribution-map .map-point .content img {
            height: 17px;
            width: auto
        }

        .distribution-map .map-point .content {
            display: none;
            width: 100%;
            height: auto;
            left: 40%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            overflow: overlay;
            text-align: left;
            padding: 15px;
            border-radius: 20px;
            background: url(../images/mosque/half-motif.png) no-repeat rgba(236, 236, 236, 1);
            box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .2);
            margin-top: -180px !important;
            min-width: 300px;
            z-index: 9999 !important
        }

        .distribution-map .map-point:active .content a:active,
        .distribution-map .map-point:active .content a:hover,
        .distribution-map .map-point:focus .content a:active,
        .distribution-map .map-point:focus .content a:hover {
            color: #afe1fa
        }

.animatemapbox {
    -webkit-transition: opacity .25s ease-in-out, width .25s ease-in-out, height .25s ease-in-out;
    transition: opacity .25s ease-in-out, width .25s ease-in-out, height .25s ease-in-out
}

.distribution-map .map-point .content p {
    padding-bottom: 2px;
    margin: 0 0 5px !important;
    font-size: .85em
}

.centered-y img {
    width: inherit !important
}

.map-point:nth-child(6) h2 {
    color: #d4b210 !important
}

.map-point:nth-child(2) h2 {
    color: #d99700 !important
}

.map-point:nth-child(3) h2 {
    color: #d4b210 !important
}

.map-point:nth-child(4) h2 {
    color: #96ac05 !important
}

.map-point:nth-child(5) h2 {
    color: #007ba4 !important
}

@media screen and (max-width: 1199px) {
    .legend {
        float: right;
        margin-top: -150px
    }
}

@media screen and (max-width: 991px) {
    .legend {
        float: none;
        margin-top: 0
    }

        .legend img {
            width: auto !important
        }

    .mosque .carousel-indicators {
        bottom: 10px !important
    }
}

@media screen and (max-width: 767px) {
    .mosque .black-overlay {
        position: relative !important;
        background: #ecece9;
        border: none
    }

    .mosque .carousel-caption {
        width: 100% !important;
        top: 20% !important;
        left: 0 !important;
        color: #000;
        padding: 50px 85px
    }

    .mosque .carousel-indicators {
        bottom: 10px !important;
        margin: 0 auto;
        text-align: center !important;
        width: 100%
    }
}

.islamic h1,
.islamic h2,
.islamic h3,
.islamic h4,
.islamic h5,
.islamic h6 {
    color: #005d25
}

.islamic h1 {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    margin-top: 0;
    font-size: 1.188em !important
}

.islamic p {
    font-family: OpenSans-Light, Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding-bottom: 10px
}

.islamic .second-section {
    background: url(../images/islamic-education/motif-bg01.png) right bottom no-repeat #f0f0f0;
    padding: 50px 0
}

.islamic .third-section {
    background: url(../images/islamic-education/motif-bg02.png) right top no-repeat #095b82;
    color: #fff;
    text-align: center;
    padding: 50px 0
}

    .islamic .third-section h1 {
        color: #fff !important
    }

    .islamic .third-section .btn {
        border: 1px solid #fff;
        background: 0 0 !important
    }

        .islamic .third-section .btn:hover {
            border: 1px solid #f1f1f1;
            background: 0 0 !important;
            color: #f1f1f1
        }

.islamic .fourth-section {
    padding: 50px 0
}

.islamic .sub-section .sub-title p {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0 !important
}

.islamic .carousel-caption .header01,
.islamic .carousel-caption p {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: none
}

.islamic .carousel-caption .header01 {
    font-size: 1.75em;
    color: #005d25;
    margin-bottom: 10px !important;
    line-height: 28px
}

.islamic .carousel-caption p {
    color: #000;
    font-size: 1em;
    line-height: 20px
}

.academy .carousel-caption .header01,
.academy .line-box p,
.academy .second-section .btn,
.academy h1,
.academy h2,
.academy h3,
.academy h4,
.academy h5,
.academy h6,
.islamic .btn {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif
}

.academy .carousel-caption p,
.islamic .left-content p {
    font-family: OpenSans-normal, Arial, Helvetica, sans-serif
}

.islamic .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 76% !important;
    padding-left: 0;
    text-align: center !important;
    list-style: none;
    border: none !important;
    bottom: 0 !important
}

.islamic .btn {
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    border-radius: 0 !important;
    font-size: .813em;
    text-transform: uppercase;
    background: #d59d01
}

    .islamic .btn:hover {
        background: #ac7f00
    }

.islamic .carousel-indicators .active {
    background-color: #d59d01 !important;
    border: none !important
}

.islamic .carousel-indicators li {
    width: 10px;
    height: 10px;
    margin: 1px;
    background-color: #f0efed !important;
    border: none !important;
    border-radius: 10px
}

.islamic .carousel-caption {
    background: url(../images/islamic-education/motif.png) center right no-repeat !important;
    background-size: contain !important;
    padding: 20px;
    top: 0;
    bottom: 0;
    height: 400px;
    width: 75% !important
}

.islamic .box {
    width: 280px;
    right: 0;
    position: absolute;
    color: #000;
    margin: 60px 100px 40px 30px
}

.islamic .left-content p {
    font-size: .875em
}

.islamic .side-menu .sidehdr .icon {
    background: #d59d01;
    width: 40px;
    height: 40px;
    float: left;
    margin-right: 10px;
    padding: 10px;
    text-align: center
}

.islamic table.table th {
    background: #d59d01 !important
}

.islamic .panel-heading {
    background-color: #d59d01 !important
}

    .islamic .panel-group > .panel:first-child .panel-heading a:before,
    .islamic .panel-heading a:before {
        color: #d59d01
    }

@media screen and (max-width: 1199px) {
    .islamic .carousel-caption {
        background: url(../images/islamic-education/motif.png) center right no-repeat !important;
        background-size: contain !important;
        padding: 20px;
        top: 0;
        bottom: 0;
        right: 0;
        height: auto !important
    }

    .islamic .box {
        width: 280px;
        right: 0;
        position: absolute;
        color: #000;
        margin: 80px 100px 40px 30px
    }
}

@media screen and (max-width: 1099px) {
    .islamic .box {
        width: 250px;
        right: 0;
        position: absolute;
        color: #000;
        margin: 55px 90px 40px 30px
    }
}

@media screen and (max-width: 991px) {
    .islamic .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 340px !important
    }

        .islamic .carousel-inner > .item > img {
            height: 100% !important;
            width: auto !important
        }

    .islamic .carousel-caption {
        background: url(../images/islamic-education/motif.png) center right no-repeat !important;
        background-size: contain !important;
        padding: 20px;
        top: 0;
        bottom: 0;
        height: 344px !important;
        right: 0 !important
    }

    .islamic .box {
        margin: 60px 85px 60px 30px;
        width: 250px
    }

    .islamic .carousel-caption p {
        font-size: .857em
    }
}

@media screen and (max-width: 767px) {
    .islamic .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: auto !important
    }

        .islamic .carousel-inner > .item > img {
            width: 100% !important
        }

    .islamic .carousel-caption {
        background-size: cover !important;
        width: auto !important
    }

    .islamic .carousel-inner > .item {
        background: #fff !important
    }

    .islamic .carousel-caption {
        background: 0 0 !important;
        padding: 0;
        top: 0;
        bottom: 0;
        height: auto !important;
        position: relative !important
    }

    .islamic .box {
        width: 77%;
        right: 0;
        position: relative;
        color: #000;
        margin: 20px 0 40px
    }

    .islamic .carousel-indicators {
        width: 70% !important
    }
}

.academy .second-section {
    background: url(../images/muis-academy/brown-bg.jpg) no-repeat #351409;
    background-size: cover;
    color: #fff;
    padding: 50px 0
}

    .academy .second-section h1 {
        color: #fff !important
    }

    .academy .second-section .btn {
        background: #83613f;
        padding: 5px 10px;
        text-align: center;
        color: #fff;
        border-radius: 0 !important;
        font-size: .643em;
        text-transform: uppercase;
        border: 1px solid #fff;
        margin-left: 10px
    }

.academy .category {
    color: #aeaeae;
    font-size: .875em
}

.academy .btn-more {
    color: #cc9f72;
    position: absolute;
    font-size: .813em !important
}

    .academy .btn-more:hover {
        color: #ddb388
    }

.academy .fb-widget {
    height: 700px
}

.academy .third-section {
    background: #f0efed !important;
    padding: 50px 0
}

.academy .fourth-section {
    background: url(../images/muis-academy/background.jpg) no-repeat #fff;
    background-size: cover;
    min-height: 808px;
    padding: 50px 0
}

.academy h1 {
    margin-top: 0;
    color: #83613f !important;
    font-size: 1.188em !important
}

.academy h2,
.academy h3,
.academy h4,
.academy h5,
.academy h6 {
    color: #000 !important
}

.academy .line-box {
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    border: 1px solid #fff;
    position: absolute;
    font-size: 1.188em;
    color: #FFFFFD;
    text-align: center;
    line-height: 24px
}

    .academy .line-box p {
        top: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        width: 100%
    }

.academy .updateddate {
    margin: 10px 0 0;
    clear: both
}

.academy .zoom-banner {
    padding-top: 0
}

.academy .zoomimg {
    min-height: 350px;
    border: none
}

.academy .first-bx {
    background-image: url(../images/muis-academy/bg01.png)
}

.academy .second-bx {
    background-image: url(../images/muis-academy/bg02.png);
    background-position: bottom
}

.academy .third-bx {
    background-image: url(../images/muis-academy/bg03.png)
}

.academy .fourth-bx {
    background-image: url(../images/muis-academy/bg04.png)
}

.academy .carousel-caption .header01 {
    font-size: 1.75em;
    text-align: center;
    text-shadow: none;
    color: #5f4022;
    margin-bottom: 10px !important;
    line-height: 28px
}

.academy .carousel-caption p {
    text-align: center;
    text-shadow: none;
    color: #000;
    font-size: 1em;
    line-height: 20px
}

.academy .carousel-indicators {
    position: absolute !important;
    z-index: 15;
    width: 76% !important;
    padding-left: 0;
    text-align: center !important;
    list-style: none;
    border: none !important;
    bottom: 0 !important
}

.academy .btn {
    background: #83613f;
    font-size: .875em
}

    .academy .btn:hover {
        background: #6b4825;
        color: #fff
    }

.academy .carousel-indicators .active {
    background-color: #dccba0 !important;
    border: none !important
}

.academy .carousel-indicators li {
    width: 10px;
    height: 10px;
    margin: 1px;
    background-color: transparent !important;
    border: 1px solid #dccba0 !important
}

.academy .carousel-caption {
    background: url(../images/muis-academy/motif.png) top left no-repeat !important;
    background-size: cover !important;
    padding: 20px;
    top: 0;
    bottom: 0;
    left: 0;
    height: 400px;
    width: 590px !important
}

.academy .box {
    width: 300px;
    left: 210px;
    position: absolute;
    color: #000;
    margin-top: 80px
}

.academy .iam select {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    background-image: linear-gradient(45deg, transparent 50%, #83613f 50%), linear-gradient(-45deg, transparent 50%, #83613f 50%);
    background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    background-color: #eaeaea;
    width: 98%;
    padding: 10px 15px;
    border: none;
    border-radius: 30px;
    color: #000;
    font-size: 1em;
    position: relative !important;
    z-index: 9999 !important;
    margin-right: 10px;
    line-height: 20px;
    height: auto
}

    .academy .iam select option {
        font-family: OpenSans-normal, Arial, Helvetica, sans-serif;
        font-size: 1em !important
    }

.academy .title {
    font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
    font-size: 1em;
    min-height: 60px
}

.muis50 .first-section .mf-content h2,
.wakaflocation select {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif
}

.academy .name {
    min-height: 70px
}

.academy .side-menu .sidehdr .icon,
.academy table.table th {
    background: #83613f !important
}

.academy .left-content ul li:before {
    content: "\2022";
    position: absolute;
    left: 15px;
    color: #83613f
}

.academy .panel-heading {
    background-color: #83613f !important
}

    .academy .panel-group > .panel:first-child .panel-heading a:before,
    .academy .panel-heading a:before {
        color: #83613f
    }

@media screen and (max-width: 1199px) {
    .academy .box {
        width: 280px;
        left: 230px;
        position: absolute;
        color: #000;
        margin-top: 80px
    }
}

@media screen and (max-width: 991px) {
    .academy table td:before {
        color: #83613f !important
    }

    .academy .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 340px !important
    }

        .academy .carousel-inner > .item > img {
            height: 100% !important;
            width: auto !important
        }

    .academy .carousel-caption {
        background: url(../images/muis-academy/motif.png) top left no-repeat !important;
        background-size: contain !important;
        padding: 20px;
        top: 0;
        bottom: 0;
        left: 0;
        height: 340px;
        width: 600px !important
    }

    .academy .box {
        margin: 60px 0;
        width: 200px;
        left: 210px
    }

    .academy .carousel-caption p {
        font-size: .857em
    }
}

@media screen and (max-width: 767px) {
    .academy .line-box {
        left: 20px;
        top: 20px;
        bottom: 20px;
        right: 20px;
        border: 1px solid #fff;
        position: absolute;
        font-size: 1.286em;
        color: #FFFFFD;
        text-align: center;
        padding: 10px;
        line-height: 21px
    }

    .academy .carousel-inner > .item {
        background: #dccba0 !important
    }

    .academy .carousel-inner {
        height: auto !important
    }

    .academy .carousel-caption {
        width: 100% !important;
        height: auto !important
    }

    .academy .box {
        left: 0;
        position: relative !important;
        height: auto;
        width: 100%;
        margin: 0
    }

    .academy .carousel-inner > .item > img {
        height: auto !important;
        width: 100% !important
    }

    .academy .second-section .btn {
        margin-bottom: 15px
    }

    .academy p.category {
        margin-top: 10px !important
    }
}

.new-label {
    background: #2ea08b;
    color: #FFF;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 2px
}

.plus-btn:hover,
.reset-btn:hover {
    opacity: .7
}

.mobile-subtitle {
    color: #008357 !important;
    font-size: 1.3em !important;
    text-transform: uppercase;
    margin-bottom: 0;
    margin-left: 20px
}

.strategicflow h1,
.strategicsteps h1 {
    color: #333 !important;
    text-align: center
}

.mobilehomeicon {
    background-image: url(../images/home-icon-mobile.png);
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    float: left
}

.strategicflow,
.strategicsteps {
    background: #f9f9f9;
    border: 1px solid #2ea08b;
    margin-bottom: 30px;
    padding: 15px;
    vertical-align: middle
}

.mobileheader {
    margin-left: 15px
}

.strategicflow {
    padding: 8px;
    vertical-align: center
}

.strategicsteps h1 {
    font-size: 1em !important
}

.strategicflow h1 {
    font-size: .94em !important;
    text-transform: none
}

.muis50 .sectionone h2,
.muis50 .sectionthree h2,
.muis50 .third-section h2,
.muis50 .zoom-banner h2 {
    text-transform: uppercase
}

.strategicarrow {
    width: 100%;
    height: 5px;
    background: #008357;
    vertical-align: middle;
    margin-top: 45%
}

    .strategic-longarrow:before,
    .strategicarrow:after {
        width: 0;
        border-top: 12px solid transparent;
        right: 0;
        content: "";
        position: absolute
    }

    .strategicarrow:after {
        margin-top: -8px;
        height: 0;
        border-bottom: 10px solid transparent;
        border-left: 12px solid #008357;
        margin-right: 10px
    }

.strategic-longarrow {
    border-left: 5px solid #008357;
    border-bottom: 5px solid #008357;
    height: 100%;
    min-height: 608px;
    margin-top: 40px
}

    .strategic-longarrow:before {
        margin-top: -8px;
        height: 0;
        border-bottom: 10px solid transparent;
        border-left: 12px solid #008357;
        margin-right: 1px
    }

    .strategic-longarrow:after {
        position: absolute;
        content: "";
        width: 30px;
        height: 5px;
        background: #008357
    }

.oom .second-section {
    background: url(../images/oom/oom-motifbg.jpg) no-repeat #fff;
    background-size: cover
}

.oom .faqbtn {
    padding: 15px 25px;
    color: #FFF;
    border: 1px solid #FFF;
    text-decoration: none
}

    .oom .faqbtn:hover {
        background: #0a604f
    }

.zoomimg {
    overflow: hidden
}

    .zoomimg > img {
        -moz-transition: -moz-transform .3s ease-in;
        -webkit-transition: -webkit-transform .3s ease-in;
        -o-transition: -o-transform .3s ease-in;
        max-width: 100%;
        display: block
    }

    .zoomimg:hover img {
        transform: scale(1.3)
    }

.muis-council p {
    text-align: center
}

.muis-council img {
    display: grid;
    margin: 0 auto 20px
}

.mbmfmosque h2,
.mbmfmosque h3 {
    margin-bottom: 0;
    color: #FFF !important
}

.pagination li:before {
    content: "" !important
}

.removelp {
    padding-left: 0 !important
}

.ctr p {
    text-align: center !important
}

.cpe-trainings h2 {
    font-size: 1em !important;
    margin-top: 0
}

.halal .grey-bg .btn {
    width: 56%
}

.halal .btn02 {
    width: 66%
}

.zakat .btn,
.zakat .btn2 {
    width: 100%
}

.zakat .left-content .btn,
.zakat .left-content .btn2 {
    width: auto
}

.zakat .info {
    padding: 10px 0 10px 15px
}

.zakat .nisab {
    width: 100%;
    background-size: 100%
}

.highlights-dropdown {
    padding: 0 !important;
    min-height: 70px
}

.mbmfmosque h2 {
    margin-top: 1px;
    padding-top: 8px;
    background: #054d35;
    text-align: center
}

.mbmfmosque h3 {
    margin-top: 0;
    padding-top: 7px;
    background: #008357;
    text-align: center;
    font-size: .95em !important
}

.mbmfmosque p {
    padding: 7px 20px;
    background: #f0f0f0;
    margin-bottom: 0 !important
}

.mbmfmosque {
    margin-top: 30px;
    display: block;
    width: 48%;
    padding-right: 30px
}

.removebullet li:before {
    left: auto !important;
    margin-left: -15px !important
}

.zakat table.table th p {
    color: #FFF
}

ul li {
    font-size: .929em
}

.left-content ul li ul li:before {
    left: 35px;
    content: "\2022";
    color: #279c86
}

.haj .subpage {
    min-height: auto
}

.pagination .page-link:hover,
.pagination > a:hover {
    cursor: pointer
}

.left-content ul li p {
    margin: 0 !important;
    font-size: .97em
}

.modalclose,
.ui-datepicker-title {
    margin-top: 10px
}

.wakaflocation {
    min-height: 65px
}

    .wakaflocation select {
        width: 100%;
        position: absolute;
        z-index: 9999 !important;
        margin-right: 10px;
        height: 44px;
        font-size: 1em;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding-right: 40px
    }

.ui-datepicker-trigger {
    margin-left: 5px
}

.widget--facebook--container {
    padding: 10px
}

.widget-facebook {
    height: 500px
}

    .widget-facebook .facebook_iframe {
        border: none
    }

#PrayerTimeControl1_lblSubuh {
    margin-left: 3px
}

.modalclose {
    background: url(../images/icon/close-icon.png);
    width: 19px !important;
    height: 19px !important;
    margin-right: 28px;
    float: right;
    z-index: 2;
    zoom: .85
}

    .modalclose:hover {
        opacity: .65
    }

.distribution-map .content h2 {
    width: 87%
}

.muis50 .first-section {
    background: url(../images/muis50/side-motif.png) no-repeat #f9f9f9;
    background-size: 100%;
    min-width: 100%;
    min-height: 100%
}

    .muis50 .first-section .mf-content {
        padding: 30px;
        text-align: center
    }

        .muis50 .first-section .mf-content h2 {
            font-size: 1.3em !important
        }

.muis50 p {
    font-size: .92em;
    text-align: justify
}

.muis50 .tile-row {
    margin-top: 30px
}

.muis50 .tile-item {
    background: #9f873f;
    padding: 15px;
    margin-bottom: 15px;
    min-height: 136px
}

    .muis50 .tile-item:hover {
        opacity: .8;
        cursor: pointer
    }

.tile-item h3 {
    color: #FFF !important;
    font-size: 1.1em !important;
    line-height: 22px
}

.tile-item a:hover {
    text-decoration: none;
    opacity: .95
}

.muis50 .sub-title p {
    text-align: center
}

.muis50logo img {
    width: 100%
}

.muis50 .second-section {
    background: #b59b64;
    padding: 30px 30px 50px
}

.muis50 .zoom-banner h2 {
    margin-bottom: 20px;
    text-align: center
}

.muis50 .line-box {
    left: 20px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    border: 1px solid #fff;
    position: absolute;
    font-size: 1.188em;
    color: #FFFFFD;
    text-align: center;
    line-height: 24px
}

    .muis50 .line-box p {
        font-family: OpenSans-Semibold, Arial, Helvetica, sans-serif;
        top: 50%;
        position: absolute;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        width: 100%;
        text-shadow: 0 1px 2px rgba(0, 0, 0, .3)
    }

.madrasah .gallery-section .sectionone h1,
.muis50 .sectionone h2,
.muis50 .sectionthree h2,
.muis50 .third-section h2,
.muis50 .zoom-banner h2 {
    font-family: OpenSans-Bold, Arial, Helvetica, sans-serif !important
}

.muis50 .updateddate {
    margin: 10px 0 0;
    clear: both;
    text-align: right
}

div.line-box {
    vertical-align: middle !important;
    display: table-cell !important
}

.muis50 .zoom-banner {
    padding-top: 0;
    margin-top: 30px
}

.muis50 .zoomimg {
    min-height: 350px;
    -moz-box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2);
    box-shadow: -1px -1px 10px 0 rgba(0, 0, 0, .2);
    border: none
}

.muis50 .sectionone,
.muis50 .sectionthree,
.muis50 .sectiontwo {
    min-width: 100%;
    min-height: 100%
}

.muis50 .third-section {
    margin-top: 30px
}

    .muis50 .third-section .mf-content {
        padding: 0 14px
    }

.muis50 .sectionone {
    background: url(../images/muis50/motifbg.jpg) no-repeat #FFF;
    background-size: 100%
}

    .muis50 .sectionone .container {
        padding: 25px 0
    }

.muis50 .zoom-banner h2 {
    color: #FFF !important
}

.muis50 .sectiontwo {
    padding: 45px 0;
    background: url(../images/muis50/side-motif2.png) no-repeat #079b80;
    background-size: 100%
}

.muis50 .sectionthree {
    background: url(../images/muis50/motif-bottom.png) no-repeat #f9f9f9;
    background-size: 100%
}

    .muis50 .sectionthree .container {
        margin-top: 50px
    }

.muis50 .cat {
    bottom: 0;
    width: 100%;
    text-align: center;
    top: inherit;
    font-size: 1em;
    text-transform: none;
    line-height: 20px;
    min-height: 80px;
    background: rgba(10, 96, 79, .85)
}

.muis50dropdown {
    float: right;
    margin-top: 18px;
    padding: 15px 40px 15px 30px;
    font-size: 14px;
    font-weight: 700;
    color: #033826;
    background-image: linear-gradient(45deg, transparent 50%, #f99d3a 50%), linear-gradient(-45deg, transparent 50%, #f99d3a 50%);
    background-position: calc(100% - 23px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px);
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    background-color: #f9f9f9
}

.madrasah .gallery-section {
    padding: 0
}

    .madrasah .gallery-section .sectionone {
        background: #f9f9f9;
        margin-bottom: 40px;
        text-align: center;
        padding: 35px 0 10px
    }

        .madrasah .gallery-section .sectionone h1 {
            padding: 0;
            margin: 0;
            font-size: 1.5em !important;
            font-weight: 700
        }

        .madrasah .gallery-section .sectionone h2 {
            margin-top: 15px
        }

#gallery-slidecounter {
    font-size: .9em;
    font-weight: 700;
    padding: 18px;
    background: #f2f2f2
}

.gallery-section select {
    margin: 10px 0 30px;
    padding: 15px 25px;
    font-size: .96em
}

.madrasah .gallery-section .carousel-control {
    opacity: 1 !important
}

    .madrasah .gallery-section .carousel-control:hover {
        opacity: .7 !important
    }

.wakaf .carousel-control.left {
    width: 3%;
    margin-left: 6.2%;
    background-image: none;
    height: 63%;
    margin-top: 10%
}

.ars .carousel-control.left {
    width: 12%
}

.oom .carousel-control.left {
    width: 11%
}

.oom .contentarea {
    background: url(../images/oom/oom-subpgmotif.jpg) no-repeat;
    color: #FFF;
    background-size: contain;
    padding: 50px 0
}

    .oom .contentarea .breadcrumb {
        width: 65%
    }

.haj .carousel-control {
    bottom: 0;
    height: 10%;
    margin-top: 37%
}

.zakat .carousel-control.left {
    width: 2.5%;
    margin-left: 7%;
    background-image: none;
    height: 75%;
    margin-top: 7.1%
}

.zakat .readmorebtn {
    background: 0 0;
    padding: 10px 20px;
    text-align: center;
    color: #daba84;
    border-radius: 0 !important;
    font-size: 1em;
    border: 1px solid #daba84
}

    .zakat .readmorebtn:hover {
        text-decoration: none;
        color: #efce96;
        border: 1px solid #efce96
    }

@media only screen and (max-width: 1280px) {
    .scwo .carousel-indicators {
        bottom: 20px;
        left: 6.2%
    }

    .scwo .carousel-caption {
        left: 61%
    }
}

@media only screen and (max-width: 1140px) {
    .scwo .info {
        min-height: 207px
    }

    .scwo .carousel-caption {
        top: 40px
    }

        .scwo .carousel-caption .header01 {
            font-size: 1.42em;
            line-height: 26px
        }
}

@media only screen and (max-width: 991px) {
    .strategic-longarrow,
    .strategicarrow:after {
        display: none
    }

    .distribution-map footer,
    .distribution-map img,
    table.table td {
        width: 100%
    }

    .strategicarrow {
        height: 1px;
        margin-top: 0
    }

    .strategicsteps {
        margin-bottom: 0
    }

    .strategicflow,
    .strategicsteps {
        padding: 0 15px
    }

    .ctr p {
        text-align: left !important
    }

    .ui-datepicker-calendar td {
        display: inline-table
    }

    #tblShare thead {
        display: block !important
    }

        #tblShare thead tr th {
            display: block
        }

    .ui-datepicker-calendar tr {
        margin-bottom: 0 !important
    }

    .zakat .fourth-section img {
        max-width: 100%
    }
}

@media only screen and (max-width: 768px) {
    .halal .btn02,
    .halal .grey-bg .btn,
    .navbar-nav > li {
        width: 100%
    }

    .navbar-toggle {
        display: block
    }

        .navbar-toggle .icon-bar {
            margin-left: 6px
        }

    .ars .arrowleft,
    .ars .arrowleft:hover,
    .ars .arrowright,
    .ars .arrowright:hover {
        margin-left: 0
    }

    input[type=search] {
        top: 42px
    }

    .header-bg {
        height: 165px
    }

    .search-btn2 {
        top: 46px !important;
        background: 0 0 !important
    }

    .halal .left-content select {
        margin-bottom: 20px
    }

    .sub-section img {
        padding-right: 7px;
        padding-left: 7px
    }

    .ars .arrowleft,
    .ars .arrowright {
        background-size: 100%;
        width: 50%;
        height: 90%
    }

    .ars .arrowright {
        padding-right: 45px
    }

        .ars .arrowleft h1,
        .ars .arrowright h1 {
            font-size: .8em !important;
            padding-top: 7px;
            padding-bottom: 5px;
            margin-bottom: 5px
        }

    .ars .arrowleft {
        top: 27%;
        right: 3%;
        padding-left: 45px
    }

    .cpe-trainings h2 {
        margin-top: 20px
    }

    .mbmfmosque {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px
    }

    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: rgba(0, 0, 0, .2);
        box-shadow: 0 0 1px rgba(255, 255, 255, .4)
    }

    .wakaf .carousel-control.left {
        width: 15%;
        height: 100%;
        margin-top: 0;
        margin-left: 0;
        background-image: webkit-linear-gradient(left, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
        background-image: -o-linear-gradient(left, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
        background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .3)), to(rgba(0, 0, 0, .0001)));
        background-image: linear-gradient(to right, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .0001) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
        background-repeat: repeat-x
    }

    .ars .carousel-control.left {
        width: 15%
    }

    .browsertxt p {
        font-size: .78em;
        text-align: center;
        padding: 0 35px
    }

    .muis50dropdown {
        float: none;
        width: 100%;
        margin-bottom: 25px !important
    }
}

@media only screen and (max-width: 1199px) {
    .distribution-map .map-point:nth-of-type(2) {
        left: 74% !important;
        top: 49% !important
    }

    .distribution-map .map-point:nth-of-type(4) {
        left: 26% !important
    }

    .map-point .content:nth-of-type(2) {
        left: -40px
    }
}

@media only screen and (max-width: 420px) {
    .zakat .third-section ul {
        margin-left: 40px
    }

    .ui-datepicker {
        padding: 5px
    }

    .prayer-section ul {
        margin-left: 22px;
        text-align: center
    }

        .prayer-section ul li {
            min-width: 106px
        }

    .qns {
        margin-top: 10px !important
    }

    .removebullet li:before {
        right: auto !important;
        left: 0 !important;
        margin-left: 25px !important
    }

    .removebullet li:first-child:before {
        margin-top: 25px
    }

    .distribution-map .map-point .content {
        min-width: 220px
    }

    .distribution-map .map-point:nth-of-type(1) {
        left: 42% !important
    }

    .distribution-map .map-point:nth-of-type(2) {
        left: 70% !important;
        top: 37% !important
    }

    .distribution-map .map-point:nth-of-type(3) {
        left: 44% !important
    }

    .distribution-map .map-point .content:nth-of-type(3) {
        left: 100%
    }

    .distribution-map .map-point:nth-of-type(4) {
        left: 20% !important
    }

    .map-point .content:nth-of-type(2) {
        left: -40px
    }

    .table > tbody > tr > td {
        width: 100% !important
    }

    .insert img {
        margin: 0;
        height: auto;
        padding-left: 0
    }

    .modalclose {
        margin-top: 0;
        zoom: .75
    }

    .academy .fb-widget {
        height: 500px
    }

    .muis50logo img {
        width: 100%
    }

    .gallery-section select {
        padding: 12px;
        font-size: .85em
    }

    .gallery-section .gallery-desc h3 {
        line-height: 24px
    }
}

@media only screen and (max-width: 380px) {
    .zakat .third-section ul {
        margin-left: 20px
    }

    .browsertxt p {
        font-size: .73em
    }
}

.legend {
    margin: 0;
    float: none;
    text-align: center;
}

@media (min-width: 768px) {
    .legend {
        margin-top: -100px;
        float: right;
        text-align: left;
    }
}

@media (min-width: 1200px) {
    .legend {
        margin-top: -200px;
    }
}

.side-menu-container > ul {
    padding: 0 !important;
}

td:not([data-label]):before {
    display: none;
}