/** 
    Project Name: ADCB
    File Name: Layout-rtl.css
    Support: Right To Left
**/

/*********************************
    Common Css Starts Here
**********************************/

body {
    font-family: 'DINNextLTArabic-Light' !important;
    letter-spacing: 0 !important;
}

h1,
h2,
h4,
h6,
ul,
li,
a,
span,
p,
div {
    font-family: 'DINNextLTArabic-Light' !important;
}

h3 {
    font-family: 'DINNextLTArabic-Medium' !important;
}

h5 {
    font-family: 'DINNextLTArabic-Medium' !important;
}

.large-title {
    font-family: 'DINNextLTArabic-UltraLight' !important;
}

.font-light {
    font-family: 'DINNextLTArabic-UltraLight' !important;
}

.font-regular {
    font-family: 'DINNextLTArabic-Light' !important;
}

.font-md {
    font-family: 'DINNextLTArabic-Medium' !important;
}

.font-bold {
    font-family: 'DINNextLTArabic-Regular' !important;
}

.font-italic {
    font-family: 'DINNextLTArabic-Light' !important;
    font-style: italic !important;
}

.fa {
    font: normal normal normal 14px/1 FontAwesome !important;
}

/** Header **/

.navbar-brand {
    direction: ltr;
}

.language-download-block .language-link {
    float: right;
}

.language-download-block .download-link {
    float: left;
    font-size: 12px;
}

.navbar-nav > li {
    padding-left: 0;
    padding-right: 33px;
}

.navbar-nav > li > .dropdown-menu {
    text-align: left;
}

.dropdown-menu > li {
    padding-left: 0;
    padding-right: 22px;
}

.navbar-collapse-close {
    text-align: left;
}

.download-menu li a {
    padding-right: 0 !important;
    padding-left: 20px !important;
}

.download-menu li a span {
    right: inherit;
    left: 0;
}

.download-list {
    right: inherit;
    left: -390px;
}

.download-list.download-list-slide {
    right: inherit;
    left: 0;
}

.download-list .download-list-header {
    text-align: left;
}

.download-list .download-list-body ul li a span {
    right: inherit;
    left: 0;
}

/** Footer **/

.ribbon:after {
    left: inherit;
    right: 15px;
}

/*********************************
    Leadership Page Css
*********************************/

.leadership-message-contet h1 {
    font-size: 26px;
}

.leadership-message.ceo-message blockquote p {
    font-family: 'ZapfinoArabic-Regular' !important;
    font-size: 35px;
}

.leadership-message.chairman-message blockquote p {
    font-family: 'ZapfinoArabic-Regular' !important;
}

.leadership-message.cfo-message blockquote p {
    font-family: 'ZapfinoArabic-Regular' !important;
    font-size: 35px;
}

/*********************************
    Board Round Table Page Css
*********************************/

.profile-list {
    text-align: right;
}

.banner-block .banner-content .top-blockquote {
    padding-right: 0;
    padding-left: 15px;
}

/*********************************
    Board Of Directors Css
*********************************/

.profile-list figure:before {
    left: inherit;
    right: 0;
}

.profile-list:hover figure:before {
    left: inherit;
    right: -10px;
}

/*********************************
Sustainability Page Css
*********************************/

.sustain-menu {
    right: inherit;
    left: 0;
}

.sustain-menu.slide-right {
    right: inherit;
    left: -211px;
}

.sustain-arrow {
    right: inherit;
    left: 36px;
    transform: rotate(270deg);
}

.sustain-menu ul {
    padding-left: 50px;
    padding-right: 20px;
    margin-right: 10px;
    margin-left: 0;
}

.sustain-menu ul:after {
    left: inherit;
    right: 0;
}

.sustain-menu ul .mCSB_outside + .mCSB_scrollTools {
    right: inherit !important;
    left: 0 !important;
}

.icon img {
    transform: translate(0, 0);
    */
}

/*********************************
    Corparate Governance Page Css
*********************************/

.agenda-item-list h6:before {
    left: inherit;
    right: -11px;
}

.committee-message ul li:after {
    left: inherit;
    right: -15px;
}

.fixed-pay ul,
.variable-pay ul,
.retention-scheme ul {
    padding-left: 0;
    padding-right: 20px;
}

.fixed-pay ul li:after,
.variable-pay ul li:after,
.retention-scheme ul li:after {
    left: inherit;
    right: -15px;
}

.directors-share-holding ul li:after {
    left: inherit;
    right: -15px;
}

.sustain-mob-dropdown .dropdown-menu {
    left: 0;
}

/** Bootstrap Select plugin css overwriting for RTL **/

.bootstrap-select > .dropdown-toggle {
    padding-left: 25px;
    padding-right: 12px;
}

.sustain-mob-dropdown .bootstrap-select.btn-group .dropdown-toggle .filter-option {
    text-align: right;
}

.sustain-mob-dropdown .bootstrap-select.btn-group .dropdown-toggle .caret {
    left: 40px;
    right: inherit;
}

.strategic-table .table thead tr th:first-child,
.strategic-table .table tbody tr td:first-child {
    text-align: right;
}

/*********************************
    Financial Overview Page Css
*********************************/

.financial-overview-table .table tr th:first-child,
.financial-overview-table .table tr td:first-child {
    text-align: right;
    padding-left: 10px;
    padding-right: 0;
}

.financial-overview-table .table tr th.text-right {
    text-align: left;
}

/*********************************
    Risk Management Page Css
*********************************/

.counter-list li {
    margin-right: 0;
    margin-left: 60px;
}

/*********************************
    Home Page Css
*********************************/

.slider-desc {
    left: inherit;
    right: 35px;
}

.home-slider-wrapper {
    direction: ltr;
    overflow-x: hidden;
}

#slide-counter-mob {
    left: inherit;
    right: 65px;
}

.bx-wrapper .bx-prev {
    left: inherit;
    right: 91px;
}

.bx-wrapper .bx-next {
    left: inherit;
    right: 20px;
}

.home-overlay .overlay-inner:before {
    left: inherit;
    right: 0;
}

.overlay-content {
    left: inherit;
    right: 30px;
}

.slider-desc {
    direction: rtl;
}
.index-filler-image{
    background-size: cover !important;
    width: 100%;
    display: block;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
}

/*********************************
    Work Page Css
*********************************/

#sync2 .owl-stage-outer {
    width: 100%;
}

.work-page-slider .owl-carousel .owl-stage {
    padding-right: 0px !important;
}

.work-page-slider .owl-theme .owl-nav .owl-next {
    right: inherit;
    left: 5px;
}

.work-page-slider .owl-theme .owl-nav button span {
    line-height: 13px;
}

.slide-popup-content {
    text-align: right;
}

/**************************************************************************************************
    Responsive Css Starts Here
**************************************************************************************************/

/*****************************************************************
    This Media Only for mobile ( < 991)
*****************************************************************/

@media only screen and (max-width: 991px) {
    .navbar-collapse {
        left: -100%;
        right: inherit;
    }
    .navbar-collapse.navbar-collapse-slide {
        left: 0;
        right: inherit;
    }
    .navbar-nav > li {
        padding: 0;
    }
    .navbar-default .navbar-nav > li > a span.fa {
        margin-right: 0;
        margin-left: 10px;
        transform: rotate(180deg);
    }
    .navbar-default .navbar-nav > li > a[aria-expanded="true"] span {
        transform: rotate(90deg);
    }
    .dropdown-menu > li {
        padding: 0;
        text-align: right;
    }
    .navbar-header .mbl-language-link {
        right: inherit;
        left: 55px;
    }
}

/*****************************************************************
    This Media for Tablet ( >= 768)
*****************************************************************/

@media only screen and (min-width: 768px) {
    /** Header **/
    .navbar-right {
        margin-left: 0;
    }

    /*********************************
        Home Page Css
    *********************************/
    .slider-desc {
        left: inherit;
        right: 35px;
    }
    #slide-counter {
        left: inherit;
        right: 80px;
    }
    /*********************************
        Work Page Css
    *********************************/
    .overlay-content {
        left: inherit;
        right: 70px;
    }
    .work-img {
        background-position: top left -190px;
    }
    #sync1 .owl-item .item:after {
        right: inherit;
        left: 0;
    }
    .work-page-slider .owl-theme .owl-nav .owl-next {
        right: inherit;
        left: 20px;
    }
    /*********************************
        Chairman Message Page Css
    *********************************/
    .leadership-message-contet .leadership-profile-pic {
        right: inherit;
        left: 0;
    }

    /*********************************
        Corparate Governance Page Css
    *********************************/
    .committee-statements-con {
        background: -moz-linear-gradient(right, #333d47 0%, #333d47 39%, #f5f5f6 39%, #f5f5f6 100%);
        background: -webkit-gradient(right top, left top, color-stop(0%, #333d47), color-stop(39%, #333d47), color-stop(39%, #f5f5f6), color-stop(100%, #f5f5f6));
        background: -webkit-linear-gradient(right, #333d47 0%, #333d47 39%, #f5f5f6 39%, #f5f5f6 100%);
        background: -o-linear-gradient(right, #333d47 0%, #333d47 39%, #f5f5f6 39%, #f5f5f6 100%);
        background: -ms-linear-gradient(right, #333d47 0%, #333d47 39%, #f5f5f6 39%, #f5f5f6 100%);
        background: linear-gradient(to left, #333d47 0%, #333d47 39%, #f5f5f6 39%, #f5f5f6 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333d47', endColorstr='#f5f5f6', GradientType=1)
    }

}

/*****************************************************************
    This Media for Mini Desktop ( >= 992)
*****************************************************************/

@media only screen and (min-width: 992px) {
    /** Header **/
    .navbar-default .navbar-nav > li:nth-child(2) .dropdown-menu {
        padding-right: 15px;
        padding-left: 92px;
    }
    /*********************************
        Home Page Css
    *********************************/
    .slider-desc {
        left: inherit;
        right: 50px;
    }
    .bx-wrapper .bx-prev {
        left: inherit;
        right: 106px;
    }
    .bx-wrapper .bx-next {
        left: inherit;
        right: 35px;
    }
    .overlay-content {
        left: inherit;
        right: 100px;
    }
    /*********************************
        Work Page Css
    *********************************/
    .work-img {
        background-position: top right -235px;
    }
    #sync2 {
        left: inherit;
        right: 55.5%;
    }
    #sync2.owl-carousel.owl-theme.owl-rtl.owl-loaded.owl-drag{
        padding: 0px 32px;
    }
    /*********************************
        Chairman Message Page Css
    *********************************/
    .leadership-message-contet .leadership-profile-pic {
        right: -15px;
        left: inherit;
    }

    /*********************************
        Board Round Table Page Css
    *********************************/
    .banner-block .banner-content .top-blockquote {
        padding-right: 0;
        padding-left: 100px;
    }

    /*********************************
        Corparate Governance Page Css
    *********************************/
    .committee-statements-con {
        background: #333d47;
        background: -moz-linear-gradient(right, #333d47 0%, #333d47 35%, #f5f5f6 35%, #f5f5f6 100%);
        background: -webkit-gradient(right top, left top, color-stop(0%, #333d47), color-stop(35%, #333d47), color-stop(35%, #f5f5f6), color-stop(100%, #f5f5f6));
        background: -webkit-linear-gradient(right, #333d47 0%, #333d47 35%, #f5f5f6 35%, #f5f5f6 100%);
        background: -o-linear-gradient(right, #333d47 0%, #333d47 35%, #f5f5f6 35%, #f5f5f6 100%);
        background: -ms-linear-gradient(right, #333d47 0%, #333d47 35%, #f5f5f6 35%, #f5f5f6 100%);
        background: linear-gradient(to left, #333d47 0%, #333d47 35%, #f5f5f6 35%, #f5f5f6 100%);
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#333d47', endColorstr='#f5f5f6', GradientType=1);
    }

}

/*****************************************************************
    This Media for Desktop ( >= 1200)
*****************************************************************/

@media only screen and (min-width: 1200px) {
    /*********************************
        Work Page Css
    *********************************/
    .work-img {
        background-position: top right -200px;
    }
    #sync2 {
        left: inherit;
        right: 61%;
    }
    /*********************************
        Chairman Message Page Css
    *********************************/
    .leadership-message-contet .leadership-profile-pic {
        right: -30px;
    }
}


/*****************************************************************
    This Media for Large Desktop ( >= 1366)
*****************************************************************/

@media only screen and (min-width: 1366px) {
    .work-img {
        background-position: center left 230px;
    }
}