@font-face {
    font-family: 'MyriadPro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Regular.woff') format('woff'),
    url('../fonts/MyriadPro-Regular.ttf')  format('truetype'),
    url('../fonts/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'MyriadPro-It';
    src: url('../fonts/MyriadPro-It.eot');
    src: url('../fonts/MyriadPro-It.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-It.woff') format('woff'),
    url('../fonts/MyriadPro-It.ttf')  format('truetype'),
    url('../fonts/MyriadPro-It.svg#MyriadPro-It') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'MyriadPro';
    src: url('../fonts/MyriadPro-Bold.eot');
    src: url('../fonts/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/MyriadPro-Bold.woff') format('woff'),
    url('../fonts/MyriadPro-Bold.ttf')  format('truetype'),
    url('../fonts/MyriadPro-Bold.svg#MyriadPro-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: Grotesk;
    src: url('../fonts/Typo_Grotesk_Demo.otf') format("opentype");
}
@font-face {
    font-family: AvenirLTStd-Light;
    src: url('../fonts/AvenirLTStd_35_Light.woff2') format("woff2");
}
@font-face {
    font-family: AvenirLTStd;
    /*src: url('fonts/AvenirLTStd_45_Book.woff2') format("woff2");*/
    src: url('../fonts/AvenirLTStd-Book.otf') format("opentype");
}
@font-face {
    font-family: AvenirLTStd-Bold;
    src: url('../fonts/AvenirLTStd_95_Black.woff2') format("woff2");
}
@font-face {
    font-family: AvenirNextCon;
    src: url('../fonts/AvenirNext_Condensed.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: AvenirNext;
    src: url('../fonts/AvenirNext_Medium.woff') format("woff");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: AvenirNext;
    src: url('../fonts/AvenirNext_DemiBold.woff') format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: AvenirNext;
    src: url('../fonts/AvenirNext_Bold.woff') format("woff");
    font-weight: bold;
    font-style: normal;
}



body {
    font-family: 'MyriadPro';
    font-weight: 400;
    font-size: 18px;
    color: #050000;
}

h1.page-title {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 3.3rem;
    font-weight: 800;
    color: #28ACB4;
}

h2 {
    font-family: 'MyriadPro';
    color: #EE7437;
    font-size: 3rem;
    letter-spacing: 2.5px;
}

h3 {
    font-family: 'MyriadPro';
    color: #004F86;
    letter-spacing: 1px;
}

h4 {
    font-size: 2rem;
    padding: 6px 12px;
}

h5 {
    font-size: 18px;
    color: #13AE67;
}

h6 {
    font-size: 18px;
    font-weight: 800;
}


a,a:hover {
    text-decoration: none;
    color: #006CAB;
}

.btn-download {
    font-size: 18px !important;
    line-height: 18px !important;
    border-color: #006CAB !important;
    color: #016cab !important;
    background: transparent !important;
    border-radius: 20px;
}

.sm-text {
    font-size: 12px;
    line-height: 20px;
}

.lg-text {
    font-size: 20px;
    line-height: 24px;
}

.text-purple {
    color: #B8427F;
}

.text-blue {
    color: #007BC7;
}

.nav-link {
    font-family: 'MyriadPro';
    color: #004E7C !important;
    font-size: 20px;
    line-height: 22px;
    padding: 10px 9px 0px !important;
}

.no-arrow:after {
    display: none;
}

ul.sub-nav {
    border: none;
    background: #C2E2D2;
    border-radius: 0;
}

ul.sub-nav a {
    font-family: 'MyriadPro';
    color: #298F9C;
    font-size: 20px;
}

ul.sub-nav a:hover {
    /*font-family: 'AvenirNext';*/
    background: #C2E2D2;
    color: #004E7C;
    font-weight: 900;
}

.navbar-toggler {
    border: none;
    padding: 11px;
    vertical-align: middle;
    margin: 0px 12px;
    background: #ee7438;
    color: #FFF;
    font-size: 18px !important;
    line-height: 18px !important;
}

.btn {
    border: none;
}

.btn-primary {
    background: #016cab;
}

.btn-more, .btn-more:hover {
    display: block;
    font-weight: 800;
    font-size: 21px;
    background: #28ACB4;
    color: #FFFFFF;
    min-width: 120px;
}

div#header {
    padding: 12px 0px;
}

.person {
    position: relative;
}

.name-tag {
    background: url(../images/EMSD-cuts_trapezoid1.png);
    padding: 15px 33px 15px 45px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100% 100%;
    width: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 321px;
}

.name-tag .name {
    font-size: 1.5rem;
    margin-bottom: 7px;
    line-height: 30px !important;
}

.name-tag .title {
    font-weight: 400;
    font-size: 14px !important;
    line-height: 18px !important;
}

body.sm-text {
    font-size: 12px;
}

body.lg-text {
    font-size: 23px;
    line-height: 30px;
}

/*--------------- Home -------------------*/
div#slider-container {
    position: relative;
    padding-bottom: 80px;
}

div#home-slider svg {
    max-height: 70vh;
}

div#home-slider img {
    max-width: 750px;
    width: 100%;
}

div#hand {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
}

span.cube {
    top: -5px;
    position: relative;
    font-size: 11px;
}

/*---------------- Profile -------------------*/
.profile-page #section-1 {
    background: url(../images/EMSD-cuts_img15.jpg);
    background-position: top center;
    min-height: 75vh;
    background-repeat: no-repeat;
}

img.signature {
    max-height: 240px;
}

/*---------------- Message -------------------*/
/*.message-page #section-1 {*/
/*    background: url(../images/EMSD-cuts_img13.jpg);*/
/*    background-position: right bottom;*/
/*    background-repeat: no-repeat;*/
/*}*/

.scroll-content {
    /*max-width: 75%;*/
    background: #6363630d;
    text-shadow: 0px 0px 2px #fff;
    padding: 40px 20px;
    border-radius: 30px;
    overflow: scroll;
    /*min-height: 60vh;*/
    max-height: 60vh;
}

.message-page #section-1 > div:first-child {
    background: url(../images/EMSD-cuts_img13-2.jpg);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.message-page h1.page-title {
    position: relative;
    top: 18%;
}

.scroll-content h6 {
    color: #27acb4;
    margin-top: 10px;
}

.scroll-content h5 {
    font-weight: 800;
    color: #2973ba;
}


/*-------- Regulatory -------------*/
.regulatory-page #section-1 {
    min-height: 80vh;
    background: url(../images/EMSD-cuts_img16.jpg);
    background-position: right top;
    background-repeat: no-repeat;
}

/*-------- Trading -------------*/
.trading-page #section-1 {
    min-height: 80vh;
    background: url(../images/EMSD-cuts_img14.jpg);
    background-position: center;
    background-repeat: no-repeat;
}

/*-------- Management -------------*/
.management-page .name-list-container {
    background: #005188;
}
.group-pic {
    padding-top: 100px;
    background: url(../images/EMSD-cuts_img18.jpg) #005188;
    background-position: bottom 30px center;
    background-size: cover;
    background-repeat: no-repeat;
}

.name-list.director {
    position: relative;
    max-width: 500px;
    width: 100%;
    text-align: left;
    z-index: 99;
    margin: 0 auto;
}

.name-list.director:before {
    content: "";
    position: absolute;
    top: 6px;
    width: 100%;
    height: 15px;
    background: #97CBE8;
    z-index: -1;

}

.name-list.director .num-box {
    text-align: center;
    background: #007D9B;
    width: 30px;
    line-height: 30px;
    margin: 0 auto;
}

.name-list.director .row-name {
    background: #003553;
    padding: 3px 25px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.name-list.director .row-title {
    background: #75AAB5;
    padding: 3px 25px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.name-card {
    position: relative;
}

.row-name {
    background: #013453;
    padding-left: 64px;
}

.row-title {
    padding-left: 64px;
    font-weight: 400;
}

.row-num {
    position: absolute;
    background: #007d9b;
    width: 30px;
    text-align: center;
    line-height: 30px;
    top: -3px;
    left: 12px;
}

/*------------ Service ------------*/
div#breadcrumb {
    position: relative;
    z-index: 99;
}
div#breadcrumb:before {
    content: "";
    width: 100%;
    height: 20px;
    background: #28ACB4;
    position: absolute;
    top: 40%;
    z-index: -1;
}

div#breadcrumb a.active {
    padding: 16px;
    font-size: 25px;
}

div#breadcrumb a {
    padding: 10px;
    display: inline-block;
    border-radius: 10px;
}

.service-page #breadcrumb:before {
    background: #acc8d6;
}

.service-page #section-1 {
    min-height: 100vh;
    background: url(../images/EMSD-cuts_img10.png) top left;
    background-size: cover;
    /*background-attachment: fixed;*/
    background-repeat: no-repeat;
}

.clear {
    clear: both;
}

.collapse-row {
    position: relative;
    width: 50%;
    background: #02507f;
    color: #FFF;
    display: inline-block;
    float: right;
    border-radius: 10px;
    margin-bottom: 30px;
}

.collapse-row:after {
    content: "";
    background: url(../images/EMSD-cuts_arw1.png);
    width: 50px;
    height: 50px;
    position: absolute;
    background-size: cover;
    right: 5%;
    bottom: -15%;
    transform: rotate(180deg);
}

.collapse-row.collapsed:after{
    transform: rotate(0deg);
}

.collapse-row .icon {
    position: absolute;
    width: 150px;
}

.collapse-row .title {
    padding: 30px 30px 30px 160px;
}

.collapse-content {
    margin-bottom: 20px;
}

.collapse-content .card {
    background: #a5daec;
    font-weight: 400;
    color: #005095;
}



/*------------ Fund ------------*/
#fund-sub-title {
    position: relative;
    background: url('../images/EMSD-cuts_img19.jpg');
    border-radius: 20px;
}

#fund-sub-title img.fund-icon {
    position: absolute;
    top: -20%;
    right: 5%;
    width: 160px;
    transform: rotate(-15deg);
}

#fund-sub-title h3 {
    margin: 10px 0px;
    /*border: 1px solid #FFF;*/
    /*border-radius: 20px;*/
}

.fund-page .card {
    border: none;
}

.fund-page .card-body {
    background: url('../images/EMSD-cuts_img19.jpg');
    border-radius: 15px;
}

.fund-page .card-text {
    background: #FFF;
    color: #ad3a5e;
    margin: 0 5px 5px;
    padding: 25px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}


/* the slides */
.slider-centre-thumbnail .slick-slide {
    margin: 0 5px;
}

/* the parent */
.slider-centre-thumbnail .slick-list {
    margin: 0 -5px;
}


.slider-centre-thumbnail .slick-slide.slick-current {
    margin: 0 3px;
    border: 2px solid #FFF;
}

.slider-nav.slick-slider {
    margin: 20px 0px;
}

.slider-nav .slick-slide.slick-current {
    margin: 0 3px;
    border: 2px solid #2ab673;
}
.slider-nav .slick-slide {
    margin: 0 5px;
}


/*------------ Concerted ------------*/
.concerted-page #breadcrumb:before {
    background: #ed7e96;
}

.concerted-page #section-1 {
    background: url(../images/EMSD-cuts_img19.jpg);
    border-radius: 20px;
    background-size: contain;
}

hr.white-line {
    border-color: #FFF;
    border-width: 3px;
    opacity: 1;
}

.concerted-page .slider-centre .slick-slide {
    margin: 0px 10px;
    padding: 33px;
    background: #f7f7f759;
    border-radius: 20px;
}







.bg-deepblue {
    background: #005188;
}

.bg-pink {
    background: #F3A6B0;
}

.bg-darkpink {
    background: #ad3a5e;
}

.bg-green {
    background: #2ab673;
}

.bg-light-green {
    background: #e4f0d5;
}

.text-white {
    color: #FFFFFF !important;
}

.text-darkpink {
    color: #ad3a5e;
}


/*---------------- Awards --------------*/
.awards-page #section-1 > div:nth-child(even) > .award-box {
    border: 3px solid #acd36a;
}

.award-box {
    position: relative;
    border: 3px solid #23ab38;
    padding: 15px;
    border-radius: 20px;
    height: 100%;
}

.award-name {
    min-height: 100px;
    vertical-align: middle;
    display: table;
    width: 100%;
}

.award-name div {
    font-weight: 400;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    color: #13AE67;
}

.award-box .btn-modal, .award-box .btn-modal:hover {
    background: #13AE67;
    color: #FFFFFF;
}

.awards-page .modal-content {
    position: relative;
    border: 4px solid #8cc322;
    border-radius: 20px;
    font-weight: 400;
}

.btn-modal-close {
    position: relative;
    display: block;
    max-width: 35px;
    margin: 0 auto;
    z-index: 99;
}

.modal-body .row {
    position: relative;
    top: -12px;
}

/*------------------ Staff -----------------*/
.slide-title {
    border-radius: 10px;
}
.slide-content {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.slick-prev, .slick-next {
    width: 30px;
    height: 30px;
}

.slick-prev {
    left: 0px;
    z-index: 999;
}

.slick-next {
    right: 10px;
    z-index: 999;
}

.slick-prev:before, .slick-next:before {
    font-size: 30px;
    opacity: 1;
    color: #FFFFFF;
}


/*------------------- Environmental ---------------*/
.green-outline-box {
    position: relative;
    border: 3px solid #39b54a !important;
    border-radius: 20px;
}

.box-bg-1 {
    background: url(../images/EMSD-cuts_trapezoid4.png);
    padding: 20px 20px 20px 100px;
    background-size: cover;
    background-repeat: no-repeat;
}

.box-title-tag {
    position: absolute;
    right: -20px;
    bottom: -50px;
}

.box-bg-2 {
    background: url(../images/EMSD-cuts_trapezoid5.png);
    padding: 20px 20px 20px 100px;
    background-size: cover;
    background-repeat: no-repeat;
}

img.sdg-icons {
    max-width: 110px;
}

/*--------------- environmental  -----------------*/
.accordion-header {
    position: relative;
    margin-bottom: 30px;
    border-radius: 10px;
}

.accordion-row .accordion-title span {
    position: relative;
    top: -20px;
    left: 15px;
    display: inline-block;
    color: #FFF;
    padding: 5px 20px;
    font-size: 25px;
    border-radius: 10px;
}

.accordion-row .accordion-icon {
    position: relative;
    top: -15px;
    right: 15px;
}

.accordion-row:after {
    content: "";
    background: url(../images/EMSD-cuts_arw1.png);
    width: 50px;
    height: 50px;
    position: absolute;
    background-size: cover !important;
    left: 5%;
    bottom: -5%;
    transform: rotate(180deg);
    border: 5px solid #8ed2e8;
    border-radius: 100%;
}

.accordion-row.collapsed:after {
    transform: rotate(0deg);
}

#accordion-item-1 .accordion-header {
    background: #8ED2E8;
}

#accordion-item-2 .accordion-header {
    background: #D2BAD7;
}

#accordion-item-1 .accordion-title span {
    background: #00AC97;
}

#accordion-item-2 .accordion-title span {
    background: #8B4493;
}

#accordion-item-1 .accordion-row:after {
    background: url(../images/EMSD-cuts_arw1.png) #8ed2e8;
    border: 5px solid #8ed2e8;
}

#accordion-item-2 .accordion-row:after {
    background: url(../images/EMSD-cuts_arw1.png) #D2BAD7;
    border: 5px solid #D2BAD7;
}

#accordion-item-1 .accordion-collapse {
    padding: 20px;
    border-radius: 10px;
    background: #85CCCD;
}

.accordion-body {
    border: 1px solid #FFF;
    border-radius: 10px;
}

.box {
    padding: 20px;
    background: #B0DCDD;
    border-radius: 10px;
}

#accordion-item-1 {
    color: #00776F;
}

.accordion-body .count {
    font-size: 5rem;
    color: #00A9AE;
    line-height: 5rem;
    font-weight: 800;
}

#accordion-item-1 .unit {
    color: #6F6E6F;
    font-size: 15px;
}

#box-1 {
    position: relative;
}

#box-1-icon {
    position: absolute;
    right: 15px;
    bottom: 10px;
}

.accordion-collapse hr.white-line {
    border-width: 1px;
    margin: 10px 0px;
}


#accordion-item-2 .accordion-collapse {
    padding: 20px;
    border-radius: 10px;
    background: #D2BAD7;
}

#accordion-item-2 .box {
    background: #d9cae2;
}

#accordion-item-2 {
    color: #FFFFFF;
}

#accordion-item-2 .fs-4 {
    color: #8B4493;
    font-weight: 800;
}

#accordion-item-2 .text-deepred {
    color: #5D0000;
}

#accordion-item-2 .accordion-body .count {
    color: #A95B86;
}

#accordion-item-2 .unit {
    color: #6F6E6F;
}

.border-right {
    border-right: 1px solid #FFFFFF;
}

.sm-text.environmental-page .fs-4 {
    font-size: 20px !important;
}

.lg-text.environmental-page .fs-4 {
    font-size: 30px !important;
}

.sm-text .accordion-row .accordion-title span {
    font-size: 20px;
}

.lg-text .accordion-row .accordion-title span {
    font-size: 32px;
}

/*--------------------- Smart ----------------*/
.smart-page .green-outline-box {
    border-radius: 10px;
    border-color: #156b3e !important;
}
.content-title, .content-field {
    background: #f2f3f4;
    border-radius: 0;
}

.content-title {
    color: #37b447;
}

.smart-page .icons {
    max-width: 120px;
}


.wellbeing-tag img {
    max-height: 300px;
    width: auto;
    vertical-align: bottom;
}


.wellbeing-tag {
    background: url(../images/EMSD-cuts_trapezoid6.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

.wellbeing-tag * {
    top: -10px;
    position: relative;
}


/*------------- Social --------------*/
.social-page #section-1 {
    background: url(../images/EMSD-cuts_img17.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.social-page #section-2 a {
    background: url(../images/EMSD-cuts_trapezoid3.png);
    background-size: 100% 100%;
    padding: 10px;
    margin: 0px 10px 10px;
    width: 100%;
}

.social-page #section-2 {
    position: relative;
    top: -60px;
}

/*------------- Staff ------------*/
.slider-for {
    max-width: 800px;
    margin: 0 auto;
}





.w-85 {
    width: 85%!important;
}

div#content-bottom {
    color: #004F86;
    z-index: 99;
    position: relative;
}

div#content-bottom a {
    color: #EE7437;
}


div#copyright {
    font-family: 'MyriadPro';
    background: #C2E2D2;
    color: #427673;
    font-weight: 400;
    font-size: 14px;
}

div#copyright a {
    color: #427673;
}


@media only screen and (max-width: 1200px)  {
    /*.message-page #section-1 {*/
    /*    background: none;*/
    /*    min-height: auto;*/
    /*}*/

    /*.message-page #section-1 .scroll-content {*/
    /*    max-width: 100%;*/
    /*}*/

    .message-page #section-1 > div:first-child {
        background-size: contain;
    }

    .regulatory-page #section-1 {
        background-position: center;
        background-size: contain;
    }

    nav.navbar {
        position: absolute;
        background: #f9f9f9 !important;
        width: 100%;
        top: 80px;
        right: 0;
        z-index: 9999;
    }

    ul.navbar-nav li {
        border-bottom: 1px solid #CCC;
        padding: 3px 0px 5px 0px;
    }

    ul.navbar-nav li ul li {
        border: none;
    }

    ul.navbar-nav li a {
        font-size: 18px !important;
    }

    .navbar-collapse.show {
        border-top: 1px solid #CCC;
    }




}


@media only screen and (max-width: 992px)  {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 100%;
    }

    .profile-page #section-1 {
        background: none;
        min-height: auto;
    }

    .trading-page #section-1 {
        background-position: center;
        background-size: contain;
    }

    .collapse-row {
        width: 100%;
    }

    .fund-page .card-text {
        padding: 25px 10px;
    }

    .concerted-page .slider-centre .slick-slide {
        padding: 10px;
        margin: 1px;
    }

    .accordion-body {
        padding: 5px;
    }

    #accordion-item-1 .accordion-collapse,
    #accordion-item-2 .accordion-collapse {
        padding: 5px;
    }

    .social-page .page-title {
        width: 50% !important;
    }

    .accordion-row .accordion-icon {
        right: -10px;
    }

    .border-right {
        border: none;
    }
}


@media only screen and (max-width: 768px) {
    body {
        font-size: 15px;
    }

    h1.page-title {
        font-size: 2rem;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    h2 {
        font-size: 2rem;
    }

    .logo {
        max-width: 170px;
    }

    .btn-download {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .navbar-toggler {
        margin: 0px 2px 0px 0px;
    }

    h4 {
        font-size: 18px;
    }

    div#home-slider img {
        width: 80%;
    }

    .breadcrumb-items a {
        margin-left: 10px !important;
    }

    div#breadcrumb a.active {
        font-size: 18px;
    }

    .service-page #section-1 {
        padding: 3rem 0px !important;
    }

    .message-page h1.page-title {
        top: unset;
    }

    div#fund-sub-title h3 {
        padding: 25px !important;
        z-index: 9999 !important;
        position: relative;
    }

    #fund-sub-title img.fund-icon {
        position: absolute;
        top: -20%;
        right: 6%;
        width: 120px;
        transform: rotate(-15deg);
    }

    .accordion-body .count {
        font-size: 45px;
        display: block !important;
    }

    .wellbeing-tag > div {
        color: #039341;
    }

    .social-page #section-1 {
        height: 50vh!important;
        background-position: top center !important;
    }

    .social-page .page-title {
        width: 100% !important;
    }

    .accordion-row .accordion-title span {
        font-size: 20px;
        left: 10px;
    }



    /*.environmental-page .fs-4 {*/
    /*    font-size: 20px !important;*/
    /*}*/

    div#hand {
        bottom: 40px;
    }

    .slider-centre-thumbnail .slick-dots {
        bottom: -50px;
    }

}