/*
    This File contains :-
        1.  all text styles to be used in CSD web site 
        2.  style of the topic yellow bar of for each of the header 
        3.  style of the section seperator 
        (any up coming additional styles will be appended at the bottom of the file with comments and modify to csdv2 and so on.) 
*/

@font-face {
    font-family: "montserrat-black";
    src: url(../font/montserrat-black.ttf) format('truetype');
    src: url(../font/Montserrat-Black.eot#iefix) format('embedded-opentype');
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url(../font/Montserrat-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: "mttExtraBold";
    /*src: url(../font/montserrat-extrabold.otf);*/
    src: url(../font/Montserrat-ExtraBold.ttf) format('truetype');
}

@font-face {
    /*font-family: mttBold;
    src: url(../font/Montserrat-Bold.otf);*/
}

@font-face {
    font-family: "mttMedium";
    src: url(../font/Montserrat-Medium.otf) format('opentype');
}

@font-face {
    font-family: "latoRegular";
    src: url(../font/Lato-Regular.ttf) format('truetype');
}

@font-face {
    font-family: "latoHeavy";
    src: url(../font/Lato-Heavy.ttf) format('truetype');
}

@font-face {
    font-family: "latoBold";
    src: url(../font/Lato-Bold.ttf) format('truetype');
}

@font-face {
    font-family: "latoBlack";
    src: url(../font/Lato-Black.ttf) format('truetype');
}

@font-face {
    font-family: "latoLight";
    src: url(../font/Lato-Light.ttf) format('truetype');
}

body, html {
    height: 100%;
    min-width: 320px;
    max-width: 1920px;
    margin-left: auto !important;
    margin-right: auto !important;
}

ul {
    font-family: Verdana, Arial, Helvetica, 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
}

/* Text */

/* New Added - for Chapter 6 Figures */
.mtt96ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 96px;
    font-weight: 800;
}

.mtt94ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 94px;
    font-weight: 800;
}

.mtt84ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 84px;
    font-weight: 800;
}

.ch4-mtt84ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 84px;
    font-weight: 800;
}

.mtt48ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 48px;
    font-weight: 800;
}



/* - Home - Title (Safety Custoday....) */
.mtt40ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 40px;
    font-weight: 800;
}


/* New Added - for Chapter 6 Figures */
.mtt36ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 36px;
    font-weight: 800;
}

.mtt32ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 32px;
    font-weight: 800;
}

.ch4-mtt32ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 32px;
    font-weight: 800;
}
/* - Chapter 1 -6 Paragraph Header*/
/* - Appendix 1 Header */
/* - Appendix 2 Header */
/* - Appendix 3 Header */
/* - Appendix 4 Header */
/* - Appendix 5 Header */
/* - Directorate Officers - Header */
/* - Commisioner's Foreword - Header */
/* - Commisioner's Foreword - Content Header */
/* - Home - Header  (Smart Prison Protocol Unit)  */
/* - Home - Header  (Appendices)  */
/* - Home - Header  (Chapters)  */
/* - Home - Header  (DO)  */
/* - Home - Header  (Commissioner's Foreword)  */
/* - Home - Header  (Values)  */
/* - Home - Header  (Vision & Mission )  */
.mtt41ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 41px;
    font-weight: 800;
}

.mtt36ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 36px;
    font-weight: 800;
}



.mtt28ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.ch1-mtt20ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.ch1-mtt24Bold {
    font-family: 'mttBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 700;
}

/* - Chapter 1 -6 breadcrumbs*/
/* - Sub-Footer - Title (Second Last Row of the Page )*/
/* - Home - Chapter Section Sub Header [Card Block] (O & M / Rehabilitation etc....)  */
.mtt24ExtraBold {
    font-family: "mttExtraBold", 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 800;
}




/* - Home - Title (CSD 2019 Annual Review) */
.mtt20SemiBold {
    font-family: 'Montserrat-SemiBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 20px;
    font-weight: 600;
}


.mtt24SemiBold {
    font-family: 'Montserrat-SemiBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 600;
}



/* - Chapter 1 - 6 Photo Header */
/* - Chapter 1 - 6 Paragraph Header */
/* - Appendix 1 - Sub Header 
/* - Appendix 2 - Map Header 
/* - Appendix 2 - Detail Header 
/* - Appendix 3 - Title / Role */
/* - Appendix 4 - Sub Header */
/* - Appendix 5 - Sub Header */
/* - Appendix 5 - Accordion Header / Detail  */



.mtt29ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 29px;
    font-weight: 800;
}

.mtt20ExtraBold {
    font-family: 'mttExtraBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 20px;
    font-weight: 800;
}

/* - Commisioner's Foreword - Tab Seleceted */
/* - Sub-Footer - Squared Sub-Title (Second Last Row of the Page )*/
/* - Home - Chapter Section Header [Card Bloack] (Chapter 1 / 2 /3 etc....)  */
/* - Home - Icon Title   (Values)  */
.mtt16ExtraBold {
    font-family: "mttExtraBold", 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 800;
}


.mtt30Bold {
    font-family: 'mttBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 30px;
    font-weight: 700;
}


.mtt24Bold {
    font-family: 'mttBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 700;
}


/* - Commisioner's Foreword - Un-Seleceted */
/* - Navigation  - Sub Menu Title  */
.mtt16Medium {
    /*font-family: 'mttMedium', sans-serif;*/
    font-family: 'mttMedium', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 500;
}

/* - Appendix 4 - Table Listing Content Captial Leter*/
/* - Navigation  - Menu Title  */
.mtt36Black {
    font-family: 'montserrat-black', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 36px;
    font-weight: 900;
}

.mtt24Black {
    font-family: 'montserrat-black', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 900;
}

.mtt20Black {
    font-family: 'montserrat-black', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 20px;
    font-weight: 900;
}

.mtt16Black {
    font-family: 'montserrat-black', sans-serif, 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��;
    font-size: 16px;
    font-weight: 900;
}

/* - Home - Content (Commissioner's Foreword)  */
.lato24Reg {
    font-family: 'latoRegular', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 400;
}


/* - Appendix 5 - Learn More */
/* - Home - Read More  (Smart Prison Protocol Unit)  */
/* - Home - Read More  (Appendices)  */
/* - Home - Read More  (Chapter)  */
/* - Home - Learn More  (DO)  */
/* - Home - Read More  (Commissioner's Foreword)  */

.lato20Heavy {
    font-family: 'latoHeavy', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 20px;
    font-weight: 800; /* heavy */
    color: #34E0FF;
}


/* Foooter (Last Row of the Page)  */
.lato18Heavy {
    font-family: 'latoHeavy', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 18px;
    font-weight: 800; /* heavy */
}


/* - Appendix 1 - Title */
/* - Directorate Officers - Name */
.lato16Heavy {
    font-family: 'latoHeavy', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 800; /* heavy */
}






/* - Chapter 1 - 6 Paragraph*/
/* - Chapter 1 - 6 Photo Description */
.lato30Bold {
    font-family: 'latoBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 30px;
    font-weight: 700 /* bold */
}



.lato24Bold {
    font-family: 'latoBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 700 /* bold */
}

.lato16Bold {
    font-family: 'latoBold', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 700 /* bold */
}

/* - Chapter 1 - 6 Paragraph*/
/* - Chapter 1 - 6 Photo Description */
/* - Appendix 1 - Name */
/* - Appendix 1 - Description */
/* - Appendix 2 - bullet Description */
/* - Appendix 3 - Name */
/* - Appendix 4 - Table Listing Content */
/* - Appendix 4 - Table Listing Note */
/* - Directorate Officers - Title  */
/* - Commisioner's Foreword - Content */
/* - Commisioner's Foreword - Content */
/* - Home - Coontent (Smart Prison Protocol Unit)  */
/* - Home - Coontent (Vision & Mission)  */
.lato30Reg {
    font-family: 'latoRegular', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 30px;
    font-weight: 400 /* regular */
}

.lato24Reg {
    font-family: 'latoRegular', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 400 /* regular */
}


.lato16Reg {
    font-family: 'latoRegular', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 400 /* regular */
}

/* - Appendix 2 - Detail Sub Header */
/* - Appendix 4 - Table Listing Header */
/* - Appendix 4 - Table Listing Total */
.lato36Black {
    font-family: 'latoBlack', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 36px;
    font-weight: 900; /* Black */
}


.lato16Black {
    font-family: 'latoBlack', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 900; /* Black */
}

/*.lato24Black {
    font-family: 'latoBlack', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 24px;
    font-weight: 900; /* Black
}

*/
/* - Home - Icon Content (Values) */
.lato16Light {
    font-family: 'latoLight', 'Microsoft JhengHei', 敺株��迤暺煾��, 敺株�罸�暺煾��, sans-serif;
    font-size: 16px;
    font-weight: 300; /* Light  */
}

.homepage-videoclip-blank {
    background-color: #1A2534;
    height: 0px;
}

.home-title1, .home-title2 {
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.8));
}

.webarea {
    display: block;
}

.printarea {
    display: none;
}

.custom-toggler {
    border: none;
}

.custom-toggler-icon {
    background-image: url(../image/icon_toggle_menu.png) !important;
    background-size: 30px 26px;
}

.custom-toggler-icon-black {
    background-image: url(../image/icon_toggle_menu-black.png) !important;
    background-size: 30px 26px;
}

/* Yellow Bar for each of the Header */
.TopicBar {
    width: 48px;
    height: 8px;
    background-color: #EDBB12;
}

.seperatorBlack {
    background-color: black;
    height: 32px;
}

.seperatorBlue {
    background-color: #EAF2F8;
    height: 48px;
}

.csd-bg-Darkblue {
    background-color: #1A2534;
}

.csd-bg-Lightblue {
    background-color: #EAF2F8;
}

.csd-bg-blue {
    background-color: #0076C7;
}

/* overlay image  */
.card-img-overlay {
    background-color: rgba(6,6,6, 0.8);
}


.csd-hide {
    opacity: 0;
}


/* Language Buttons */
.lang-btn-mobile {
    display: none;
}


/* Share Buttons */
.header-nav__tool.is-active .header-nav__tools-sub-holder {
    display: block;
}

.header-nav__tool-trigger.is-active {
    color: #eb6100;
}

.header-nav__tools-holder {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    font-size: 0;
    margin-right: 20px;
}

    .header-nav__tools-holder:last-child {
        margin-right: 0;
    }

.header-nav__tools-sub-holder {
    display: none;
    position: absolute;
    top: 100%;
    left: 100%;
    padding: 8px 15px 12px;
    text-align: left;
    z-index: 5;
    min-width: 80px;
    left: -50px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: -20px;
    background: #FFF;
    box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2);
}

    .header-nav__tools-sub-holder:after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        left: 0;
        top: 0;
        position: absolute;
        /*background: #eb6100;*/
        background: #EDBB12;
    }

.header-nav__tools-sublink {
    display: block;
    color: #000;
    font-size: 14px;
    text-align: center;
}

    .header-nav__tools-sublink:hover {
        opacity: 1;
        color: #eb6100;
    }

.header-nav__tool {
    width: 20px;
    height: 100%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    background: url() no-repeat center center;
    background-size: 100% auto;
    z-index: 5;
}

    .header-nav__tool.is-hidden {
        display: none !important;
    }

    .header-nav__tool.header-nav__tool--share {
        z-index: 6;
        background-image: url(../image/icon_share.png);
    }

.header-nav__tool--share-trigger {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
}
/* ------------------------------------------ */
/* Style for share-btns */
/* ------------------------------------------ */
.share-btns {
    position: relative;
    margin-top: 15px;
}

.mob-nav__control {
    display: none;
}

.header-nav__tool--share .share-btns {
    white-space: nowrap;
}

.share-btns__btn {
    display: inline-block;
    vertical-align: top;
    width: 34px;
    height: 34px;
    margin-right: 5px;
    position: relative;
    transition: 0.2s;
}

.mob-nav__control .share-btns__btn {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.share-btns__btn:before {
    content: '';
    width: 26px;
    height: 26px;
    left: 4px;
    top: 4px;
    display: block;
    position: absolute;
    background: url() center top;
    background-size: 100% auto;
    transition: 0.2s;
}

.header-nav__tool--share .share-btns__btn:before {
    background-position-y: -26px;
}

.mob-nav__control .share-btns__btn:before {
    background-position-y: -22px;
}

.mob-nav__control .share-btns__btn:before {
    width: 22px;
    height: 22px;
    left: 4px;
    top: 4px;
}

.share-btns__btn:hover:before {
    background-position-y: -26px;
}

.mob-nav__control .share-btns__btn:hover:before {
    background-position-y: -22px;
}

.share-btns__btn.share-btns__btn--pr:before {
}

.white-print-icon {
    background-image: url(../image/icon_printer.png);
    background-size: 30px 30px;
}

.black-print-icon {
    background-image: url(../image/icon_printer-black.png);
    background-size: 30px 30px;
}

.share-btns__btn.share-btns__btn--email:before {
    background-image: url(../image/icons/icon-social-email-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--email, .header-nav__tool--share .share-btns__btn.share-btns__btn--email, .share-btns__btn.share-btns__btn--email:hover {
    background-color: yellowgreen;
}

.share-btns__btn.share-btns__btn--fb:before {
    background-image: url(../image/icons/icon-social-facebook-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--fb, .header-nav__tool--share .share-btns__btn.share-btns__btn--fb, .share-btns__btn.share-btns__btn--fb:hover {
    background-color: #3b5998;
}

.share-btns__btn.share-btns__btn--wa:before {
    background-image: url(../image/icons/icon-social-whatsapp-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--wa, .header-nav__tool--share .share-btns__btn.share-btns__btn--wa, .share-btns__btn.share-btns__btn--wa:hover {
    background-color: #1bd741;
}

.share-btns__btn.share-btns__btn--wb:before {
    background-image: url(../image/icons/icon-social-weibo-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--wb, .header-nav__tool--share .share-btns__btn.share-btns__btn--wb, .share-btns__btn.share-btns__btn--wb:hover {
    background-color: #df2029;
}

.share-btns__btn.share-btns__btn--wc:before {
    background-image: url(../image/icons/icon-social-wechat-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--wc, .header-nav__tool--share .share-btns__btn.share-btns__btn--wc, .share-btns__btn.share-btns__btn--wc:hover {
    background-color: #09b83e;
}

.share-btns__btn.share-btns__btn--tw:before {
    background-image: url(../image/icons/icon-social-twitter-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--tw, .header-nav__tool--share .share-btns__btn.share-btns__btn--tw, .share-btns__btn.share-btns__btn--tw:hover {
    background-color: #00aff0;
}

.share-btns__btn.share-btns__btn--ig:before {
    background-image: url(../image/icons/icon-social-ig-white.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--ig, .header-nav__tool--share .share-btns__btn.share-btns__btn--ig, .share-btns__btn.share-btns__btn--ig:hover {
    background-color: #bc2a8d;
}

.share-btns__btn.share-btns__btn--rss:before {
    background-image: url(../image/icons/icon-rss.png);
}

.mob-nav__control .share-btns__btn.share-btns__btn--rss, .header-nav__tool--share .share-btns__btn.share-btns__btn--rss, .share-btns__btn.share-btns__btn--rss:hover {
    background-color: #f26522;
}

.share-btns__btn:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .header-nav__tool.header-nav__tool--share {
        height: 25px;
        display: none;
    }

    .header-nav__tools-sub-holder {
        left: 100px;
        display: none;
    }

    .mob-nav__control {
        display: inline-block;
    }

    .header-nav-print {
        display: none;
    }
    /*.header-nav-printer {
        display: none;
    }*/
}
/* END Style share-btns */
/* ------------------------------------------ */
/* Style for wc-qrcode */
/* ------------------------------------------ */
.wc-qrcode {
    padding: 30px;
    background: #FFF;
    display: none;
}

    .wc-qrcode.is-active {
        display: block;
    }

    .wc-qrcode p {
        font-size: 14px;
        color: #000;
        margin: 0 0 10px;
    }

footer, .footer__top, .footer__bottom {
    position: relative;
    font-size: 0;
    color: #FFF;
}

@media screen and (max-width: 991px) {
    footer, .footer__top, .footer__bottom {
        text-align: center;
    }
}

footer a:hover, .footer__top a:hover, .footer__bottom a:hover {
    color: #eb6100;
    opacity: 1;
}

.footer__backtotop {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    right: 3%;
    background: url(../image/icons/icon-cir-arrow.png) no-repeat center center;
    background-size: cover;
    z-index: 10;
}

    .footer__backtotop:hover {
        background-image: url(../image/icons/icon-cir-arrow-yellow.png);
    }

.breadcrumb-item + .breadcrumb-item::before {
    font-size: 24px;
    font-weight: 900;
    color: #FFF;
}

.white-navbar {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2);
}

    .white-navbar > #collapsibleNavbar > .main-content-menu > .nav-item > .nav-link > span {
        color: #000000;
    }

.hoverdropdownspan {
    color: #EDBB12 !important;
}

.main-content-menu-link-commissoner:hover,
.main-content-menu-link-DO:hover,
.main-content-menu-link-CH:hover,
.main-content-menu-link-appendices:hover {
    color: #EDBB12 !important;
}

.selectedMenuPage {
    color: #EDBB12 !important;
}

/*.dropdown-toggle:after {
    content: "�";
}*/

.chapter-sub-menu {
    border-radius: 0px;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0px 3px 4px rgba(150, 150, 150, 0.2);
    border: none;
}

#navbarchapters:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    left: 0;
    bottom: -2px;
    position: absolute;
    background: #EDBB12;
    transition: 0s;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}

#navbarchapters:hover:after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    transition: 0.3s 0.1s;
}

.show #navbarchapters:after, #navbarchapters:hover:after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    transition: 0.3s 0.1s;
}

/*----- CH1-7 -----*/
.chapter-youtube-blank {
    background-color: #000000;
    height: 65px;
}

#topYoutubeVideo {
    max-height: 90vh;
}

/*----- CH3 -----*/
.box-center {
    align-items: center;
    justify-content: center;
}

/*----- Commissioner -----*/
.commissioner-banner-img {
    width: 100%;
    background-image: url('../image/Foreword/ccs_header_web.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*----- Directorate Officers -----*/
.directorateOfficers-banner-img {
    width: 100%;
    background-image: url('../image/Officers/directorate_officer.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*@media screen and (max-width:1200px) {
    .directorateOfficers-banner-img {
        background-image: url('../image/Officers/directorate_officer_M.jpg');
        height: 480px;
    }
}*/

.d-officer-photo {
    width: 192px;
    height: 192px;
}

/*----- Appendices -----*/
.appendices-banner-img {
    width: 100%;
    height: 600px;
    background-image: url(../image/Home_Appendices.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.app3linkbtn {
    color: black;
    text-decoration: none;
}

    .app3linkbtn:hover {
        color: black;
        text-decoration: none;
    }

.left-arrow, .right-arrow, .animate-img, .animate-top-img, .animate-officer-top-img,
.animate-left-to-right, .animate-left-to-right2, .animate-left-to-right3, .animate-left-to-right4,
.animate-left-to-right5, .animate-left-to-right6, .animate-left-to-right7, .animate-left-to-right8,
.appendix2mapDiv, .animate-show-leftbar-img {
    opacity: 0;
}

/* Animations */
@keyframes fade-in-from-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-15%);
        -ms-transform: translateY(-15%);
        transform: translateY(-15%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.tool-animation {
    -webkit-animation: fade-in-from-top 0.8s 1.2s ease-out;
    animation: fade-in-from-top 0.8s 1.2s ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    will-change: transform;
}

.tool-animation-end {
    opacity: 1;
    -webkit-animation: none;
    animation: none;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    will-change: transform;
}

/*----- Appendices Animation -----*/

@keyframes ripple_large {
    /*0% {
            transform: scale(1);
        }

        75% {
            transform: scale(3);
            opacity: 0.4;
        }

        100% {
            transform: = scale(4);
            opacity: 0;
        }*/
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.map-enlarge {
    animation: ripple_large 0.25s linear 0s normal;
    opacity: 1;
}

.fade-from-top {
    animation: fade-in-from-top 0.5s linear 0s normal;
    opacity: 1;
}

#appendix2map {
    width: 100%;
    height: 100%;
}

@keyframes slide-in {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(0%);
    }
}

.slide-in {
    animation: slide-in 0.5s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in2 {
    animation: slide-in 1s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in3 {
    animation: slide-in 1.2s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in4 {
    animation: slide-in 1.4s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in5 {
    animation: slide-in 1.6s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in6 {
    animation: slide-in 1.8s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in7 {
    animation: slide-in 2s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.slide-in8 {
    animation: slide-in 2.2s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.left-silde {
    animation: slide-in 1.2s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

.right-silde {
    animation: slide-out 1.2s forwards;
    opacity: 1;
    /*-webkit-animation: slide-in 0.5s forwards;*/
}

@keyframes showHide {
    /*0% {
            width: 100%
        }

        40% {
            width: 0%
        }

        60% {
            width: 0%;
        }

        100% {
            width: 100%;
        }*/
    0% {
        width: 100%
    }

    100% {
        width: 0%;
    }
}

.sentence {
    position: relative;
    line-height: 2em;
    overflow: hidden;
}

.fade-sentence {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: white;
    /*animation: showHide 5s ease-in alternate infinite;*/
    animation: showHide 2s ease-in normal forwards;
}

@keyframes fade-display {
    /*0% {
            width: 100%
        }

        40% {
            width: 0%
        }

        60% {
            width: 0%;
        }

        100% {
            width: 100%;
        }*/
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animate-appendix5-display {
    opacity: 0;
}

.appendix5-display {
    opacity: 1;
    animation: fade-display 1s ease-in normal forwards;
}

@keyframes show-bar-from-left {
    0% {
        width: 0%;
    }

    100% {
        width: 100%
    }
}

.animate-show-bar-left {
    animation: show-bar-from-left 0.5s forwards;
    opacity: 1;
}

/*
    Commissioner Foreword
*/

.commissioner-banner-img {
    width: 100%;
    height: 100vh;
    background-image: url('../image/Foreword/Banner.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
}


.imageCap-dark {
    background-color: #1A2534;
    color: white;
}

.imageCap-blue {
    background-color: #0076C7;
    color: white;
}

.commissionerSecShow {
    display: inline;
}

.commissionerSecHide {
    display: none;
}

/*Ch1 */
.Ch1-img {
    width: 100%;
    height: 816px;
    /*background-image: url('../image/Ch1/Ch1_Photo9.png');*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*Ch4 */
.Ch4-img {
    width: 100%;
    height: 630px;
    background-image: url('../image/Ch4/Ch4_Photo6.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width:1200px) {
    .nav-justified .nav-item {
        flex-basis: auto;
    }
}

.chapter5_web {
}

.chapter5_mobile {
    display: none;
}

@media screen and (max-width:1200px) {
    .chapter5_web {
        display: none;
    }

    .chapter5_mobile {
        display: inline;
    }
}


/* 
    CH5
*/
.ch5-sso {
    color: red;
    margin-left: 13rem;
    margin-right: 13rem;
}

.ch5-iasus-flex-table {
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 3rem;
    margin-right: 3rem;
}


/*
    Home
*/
.home-cf-img {
    width: 100%;
    /*height: 816px;*/
    height: 600px;
    background-image: url('../image/Home_CF_Banner.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#DirectorateOfficersBanner {
    height: 600px;
    background-image: url('../image/home/officer.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}



.home-ch-card {
    /*width: 320px;*/
    height: 425px;
    /*width: 100%;
    height: 100%;*/
    flex-basis: 50%;
    border: none;
    background-color: #0076C7;
}

    .home-ch-card img {
        height: 55%;
    }