/* Minification failed. Returning unminified contents.
(5,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(9,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
(156,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(165,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
(169,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-color'
(170,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-inactive-opacity'
(174,19): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-bullet-opacity'
(175,22): run-time error CSS1039: Token not allowed after unary operator: '-swiper-pagination-color'
(175,53): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(216,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(224,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(228,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-6'
(246,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(253,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(263,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
(289,37): run-time error CSS1046: Expect comma, found '220'
(289,45): run-time error CSS1046: Expect comma, found '/'
(296,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(309,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(316,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
(331,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(338,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(349,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(357,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(375,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(382,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(401,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(425,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(429,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(430,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(441,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(442,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(444,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(453,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(454,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(455,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(459,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(460,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(461,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(494,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(501,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(522,35): run-time error CSS1046: Expect comma, found '0'
(522,39): run-time error CSS1046: Expect comma, found '/'
(545,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(559,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(565,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(566,33): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(570,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(572,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(573,33): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(577,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(578,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(579,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(594,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(601,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(614,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(634,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(657,35): run-time error CSS1046: Expect comma, found '0'
(657,39): run-time error CSS1046: Expect comma, found '/'
(668,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(684,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(688,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(692,37): run-time error CSS1046: Expect comma, found '220'
(692,45): run-time error CSS1046: Expect comma, found '/'
(713,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(721,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(747,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(748,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(761,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(772,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(780,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(791,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(792,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(802,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(824,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(835,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(840,37): run-time error CSS1046: Expect comma, found '220'
(840,45): run-time error CSS1046: Expect comma, found '/'
(851,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(913,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(918,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(948,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-2'
(961,35): run-time error CSS1046: Expect comma, found '0'
(961,39): run-time error CSS1046: Expect comma, found '/'
(1027,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1038,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1058,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1063,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1114,32): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1115,41): run-time error CSS1046: Expect comma, found '220'
(1115,49): run-time error CSS1046: Expect comma, found '/'
(1211,32): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1212,41): run-time error CSS1046: Expect comma, found '220'
(1212,49): run-time error CSS1046: Expect comma, found '/'
(1349,32): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1350,41): run-time error CSS1046: Expect comma, found '220'
(1350,49): run-time error CSS1046: Expect comma, found '/'
(1443,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
(1457,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1461,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1462,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1473,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1474,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1476,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1485,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1486,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1487,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1491,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-7'
(1492,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1493,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-color-1'
(1524,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1525,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1526,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1527,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1528,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1529,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1530,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1531,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1532,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1589,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-5'
 */

@import url('../fonts/fonts.css');

body {
    background-color: var(--secondary-color-7);
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 400;
    color: var(--secondary-color-5);
}

/*body#app {
    background-image: url('../images/esg/footer_bg.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 20% 96%;
}*/

 .esg-bg {
        background-image: url('../images/esg/footer_bg.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 20% 103%;
    }


.ceo-collapse {
    display:none;
}


.container-fluid.fw {
    padding-left: 0;
    padding-right: 0;
}

/* Navigation */
.navigation {
    position: relative;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0px 1px 10px #999;
    z-index: 9;
}

.navigation-logo {
    margin-left: 30px;
}

.navigation-swtich {
    margin-right: 30px;
}

.switch-button {
    background: rgba(255, 255, 255, 0.56);
    border-radius: 30px;
    overflow: hidden;
    width: 80px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #155FFF;
    position: relative;
    padding-right: 40px;
    position: relative;
    border: 1px solid #808080;
}

.switch-button:before {
    content: "TH";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    color: #555555;
}

.switch-button.th:before {
    color: #fff;
}

.switch-button-checkbox {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}

.switch-button-checkbox:checked+.switch-button-label:before {
    transform: translateX(40px);
    transition: transform 300ms linear;
}

.switch-button-checkbox+.switch-button-label {
    position: relative;
    padding: 5px 0;
    display: block;
    user-select: none;
    pointer-events: none;
}

.switch-button-checkbox+.switch-button-label:before {
    content: "";
    background: #002469;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 30px;
    transform: translateX(0);
    transition: transform 300ms;
}

.switch-button-checkbox+.switch-button-label .switch-button-label-span {
    position: relative;
}

.switch-button-label {
    color: #555555;
}

/* Banner */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-banner-desktop .swiper-slide {
    position: relative;
    height: 400px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.swiper-slide .title {
    position: absolute;
    top: 60px;
    left: 140px;
    font-family: 'font_medium_65regular';
    font-weight: 800;
    color: var(--primary-color-1);
}

.swiper-slide .subtitle {
    position: absolute;
    top: 160px;
    left: 140px;
    font-size: 18px;
    font-weight: 400;
    color: var(--secondary-color-5);
}

.swiper-pagination-bullet {
    background: var(--swiper-pagination-bullet-inactive-color, #fff);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--primary-color-1))
}

.swiper-banner-mobile {
    display: none;
}

@media (max-width: 476px) {
    .swiper-banner-desktop {
        display: none;
    }

    .swiper-banner-mobile {
        display: block;
        position: relative;
        height: auto;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

/* Menu */

.carousel-menu {
    background-color: #DDDDDD;
}

.carousel-menu .item-menu {
    padding: 1rem;
    text-decoration: none;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.carousel-menu .item-menu:hover {
    background-color: #D1D1D1;
    text-decoration: none;
}

.carousel-menu .item-menu .item-description {
    color: var(--primary-color-1);
    margin-top: 20px;
    font-family: 'font_medium_65regular';
    font-weight: 800;
    text-align: center;
}

.carousel-menu .item-menu:hover {
    background-color: var(--primary-color-1);
}

.carousel-menu .item-menu:hover .item-description {
    color: var(--secondary-color-6);
}

/* Section */

#section-1.sustainable {
    padding: 2.5rem;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 20% -180px;
}

.sustainable-spacing .title {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.sustainable-spacing .title:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 40%;
    top: 5px;
    left: -25px;
}

.sustainable-spacing .description {
    font-size: 20px;
    font-weight: 400;
    color: var(--secondary-color-5);
}

.sustainable-spacing {
    margin-top: 3rem;
    margin-right: 3rem;
    margin-left: auto;
}

@media (min-width: 1441px) {
    .sustainable-spacing {
        margin-right: 3rem;
    }
}

.sustainable-menu .item-menu {
    padding: 1rem;
    margin-top: 20rem;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    border-radius: 16px;
}

.sustainable-menu .item-menu:hover {
    box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
    text-decoration: none;
}

.sustainable-menu .item-menu .item-icon {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color-1);
    border-radius: 50%;
}

.sustainable-menu .item-menu .item-icon>img {
    width: 32px;
    height: 32px;
}

.sustainable-menu .item-menu .item-title {
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color-1);
    margin-top: 20px;
}

.sustainable-menu .item-menu .item-description {
    font-size: 20px;
    font-weight: 400;
    color: var(--secondary-color-5);
}

/* Commitment */

.commitment {
    margin-top: 3rem;
    padding: 2.5rem;
}

.commitment-spacing .name {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.commitment-spacing .name:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 60%;
    top: 0;
    left: -25px;
}

.commitment-spacing .position {
    font-family: 'font_medium_65regular';
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.commitment-link {
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-decoration: none;
}

/* Investment approach */

.investment-approach {
    position: relative;
    background-color: #A0CC78;
    margin-top: 2rem;
    padding: 5.5rem 0;
}

.investment-spacing .title {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.investment-spacing .title:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 60%;
    top: 0;
    left: -25px;
}

.investment-details p {
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 5;
    -moz-line-clamp: 5;
    -ms-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    color: var(--secondary-color-7);
}

.investment-image {
    position: absolute;
    top: -160px;
    right: 40px;
}

@media (min-width: 1441px) {
    .investment-image {
        position: absolute;
        top: -140px;
        right: 60px;
    }
}

.button-container {
    position: relative;
    display: block;
    left: 5px;
    width: 200px;
    margin-top: 30px;
    padding: 30px;
    border: 1px solid var(--primary-color-1);
}

.button-container:hover {
    background-color: var(--primary-color-1);
    border: 1px solid var(--primary-color-1);
}

.button-container:active {
    border: none;
}

.button-container a {
    display: block;
    height: 60px;
    width: 199px;
    background-color: var(--primary-color-1);
    border: solid var(--primary-color-1);
    border-width: 0 1px;
    color: var(--secondary-color-7);
    font-size: 18px;
    margin: -37px 0px -25px -37px;
    padding: 15px;
    padding-left: 10px;
    text-decoration: none;
}

.button-container a:hover {
    background-color: var(--secondary-color-7);
    border: solid var(--primary-color-1);
    color: var(--primary-color-1);
}

.button-container a:active {
    background-color: var(--secondary-color-7);
    border: solid var(--primary-color-1);
    color: var(--primary-color-1);
    transform: translateY(7px) translateX(7px);
}

.button-container a:focus {
    outline: none;
}

/* ESG */

.esg {
    padding-top: 10rem;
    padding-right: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 2.5rem;
    background-position: -15rem -20rem;
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 1441px) {
    .esg {
        padding-top: 10rem;
        background-position: -25rem -28rem;
        background-size: 120%;
    }
}

.esg-spacing .title {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.esg-spacing .title:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 80%;
    top: 0;
    left: -25px;
}

.esg-spacing .details {
    width: 50%;
    max-width: 50%;
}

.esg-card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    height: 580px;
    background-color: white;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
    width: 100%;
    overflow: hidden;
    transition-duration: 172ms;
    will-change: transform, box-shadow;
}

.esg-card-image {
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.esg-card-details {
    padding: 1.5rem;
    position: relative;
}

.esg-card-details h1 {
    font-family: 'font_medium_65regular';
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-color-1);
    line-height: 34px;
}

.esg-card-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: 32px;
}

.esg-card-button a {
    padding: 0 15px;
    color: var(--secondary-color-7);
    text-decoration: none;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color-1);
    border-left: 5px solid var(--primary-color-2);
}

.esg-card-button a:hover {
    color: var(--secondary-color-7);
    text-decoration: none;
    background-color: var(--primary-color-2);
    border-left: 5px solid var(--primary-color-2);
}

.esg-card-button a:active {
    color: var(--primary-color-1);
    background-color: var(--secondary-color-7);
    border: 2px solid var(--primary-color-1);
}

/* sustainability */

.sustainability {
    margin-top: 5rem;
    padding: 2.5rem;
}

.sustainability .title {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
}

.sustainability .title:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 80%;
    top: 0;
    left: -25px;
}

.video-box {
    position: relative;
    display: block;
    left: 5px;
    width: 570px;
    padding: 35px;
    background-color: var(--primary-color-1);
}

.video-box iframe {
    display: block;
    margin: -37px 0px -25px -37px;
}

/* fund */

.fund {
    margin-top: 3rem;
    padding: 2.5rem;
}

.fund-title {
    position: relative;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    text-transform: uppercase;
    text-align: center;
}

.fund-title2 {
    position: relative;
    font-family: 'font_medium_65regular';
    font-weight: 800;
    color: #009ad9;
    text-transform: uppercase;
    /*text-align: center;*/
    font-size: 32px;
    margin-bottom: 3rem;
}

.fund-card {
    position: relative;
    height: 280px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
}

.fund-card-text {
    position: absolute;
    width: 90%;
    bottom: 20px;
    left: 20px;
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
}

.fund-card-filter {
    position: absolute;
    background: rgb(2, 0, 36);
    background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 1) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
}

.fund-grid.comment .fund-card {
    height: 400px;
    box-shadow: none;
    background-color: var(--secondary-color-7);
}

.fund-grid.comment .fund-card .fund-card-text {
    color: var(--secondary-color-7);
}

.row.fund-grid.comment .col-12:hover {
    box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
    text-decoration: none;
}

/* appoach */

#appoach-1 {
    margin: 0;
    padding: 2.5rem;
}

#appoach-1 img {
    max-width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.appoach-1-title {
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    margin-bottom: 30px;
}

.appoach-1-td {
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color-1);
    margin-bottom: 30px;
}

.appoach-banner {
    /*height: 600px;*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.accordion-item {
    margin-bottom: 15px;
    border: none;
}

.accordion-button:focus {
    border: none;
    box-shadow: none;
}

.accordion-button {
    border: 1px solid rgba(0, 0, 0, .125);
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-color-1);
    color: var(--secondary-color-7);
}

.article-banner {
    height: 400px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.article-header {
    margin-top: -80px;
    padding: 2.5rem;
    background-color: var(--secondary-color-7);
}

.article-details {
    padding: 2.5rem;
}

.article-title {
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 800;
    color: var(--primary-color-1);
    margin-bottom: 30px;
}

.article-td {
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-color-1);
    margin-bottom: 30px;
}

.article-information h3 {
    margin-bottom: 1.5px;
}

.article-notice {
    padding: 2.5rem;
    margin: 2.5rem;
    background-color: var(--primary-color-1);
    color: var(--secondary-color-7);
    border-radius: 10px;
    text-align: center;
    font-family: 'font_medium_65regular';
    font-size: 32px;
    font-weight: 800;
}

.article-line {
    height: 3px !important;
    background-color: var(--primary-color-1);
    opacity: 1;
}

/* ETF */
.etf-banner {
    position: relative;
    height: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.etf-banner .title {
    position: absolute;
    width: 70%;
    max-width: 70%;
    top: 80px;
    left: 140px;
    font-family: 'font_medium_65regular';
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--secondary-color-7);
}

.etf-banner .subtitle {
    position: absolute;
    width: 20%;
    max-width: 20%;
    top: 180px;
    left: 140px;
    font-size: 2rem;
    font-weight: 400;
    color: var(--secondary-color-7);
}

.sustainable-menu.etf .item-menu {
    margin: 0 .5rem;
    box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
}


.what-etf h6.text-center {
    margin-bottom: 30px;
}

.what-etf .name.text-center:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 60%;
    top: 0;
    left: calc(50% - 100px);
}

.fund-info-card {
    padding: 25px;
    border: 2px solid #eaeaea;
    border-color: #6A92E2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.fund-info-card:hover {
    background-color: #3679FF;
    color: #ffffff;
}

.fund-info-card h1 {
    padding: 5px 25px;
    font-size: 24px;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-color: #1E58C9;
    color: #ffffff;
    border-radius: 20px;
    margin-bottom: 15px;
    font-weight: 800;
}

.fund-info-card:hover h1 {
    background-color: #3679FF;
    color: #ffffff;
}

.fund-info-card h5 {
    font-size: 18px;
}

.break-point {
    position: relative;
    height: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.break-point .commitment-spacing {
    position: absolute;
    left: 120px;
    top: 100px;
}

.break-point .commitment-spacing .name {
    font-size: 3.5rem;
    color: var(--secondary-color-7);
}

.break-point .commitment-spacing h6 {
    font-size: 2.5rem;
    color: var(--secondary-color-7);
    width: 40%;
    max-width: 40%;
}

.etf-video {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.etf-video iframe {
    width: 100%;
}

.etf-video .margin-top-50 {
    margin-top: 50px;
}

.row.fund-grid.comment {
    margin-top: 3rem;
}

.etf-comment {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.etf-comment .name.text-center:before {
    content: '';
    position: absolute;
    background-color: var(--primary-color-2);
    width: 10px;
    height: 60%;
    top: 0;
    left: calc(50% - 120px);
}

.contact-card {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 2.5rem;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%);
}

.footer {
    background-color: #002469;
    color: #fff;
    font-size: 18px;
}

.footer p {
    padding: 2.5rem;
    text-align: center;
    color: #A1DCED;
}

.footer h3, .footer h5 {
    margin-bottom: 0;
}

.footer .text-blue {
    color: #009AD9;
    font-weight: 800;
}

.footer-bottom {
    border-top: 2px solid #335087;
}

.footer-bottom .copyright {
    padding: 1.5rem;
}

.footer .btn.btn-secondary.dropdown-toggle {
    background-color: #002469;
}

#section-1 .scroll {
    padding-top: 50px;
}

#section-2 .scroll {
    padding-top: 100px;
}

#section-3 .scroll {
    padding-top: 100px;
}

#section-5 .scroll {
    padding-top: 60px;
}

@media (max-width: 426px) {
    .sustainable-menu.etf .item-menu {
        margin: 1rem .5rem;
    }

    .etf-banner .title {
        position: absolute;
        width: 70%;
        max-width: 70%;
        top: 80px;
        left: 50px;
        font-family: 'font_medium_65regular';
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--secondary-color-7);
    }

    .etf-banner .subtitle {
        position: absolute;
        width: 40%;
        max-width: 40%;
        top: 180px;
        left: 50px;
        font-size: 1.5rem;
        font-weight: 400;
        color: var(--secondary-color-7);
    }

    .break-point {
        position: relative;
        height: 400px;
        background-image: url('/assets/images/etf-mobile-1.png') !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .break-point .commitment-spacing {
        position: absolute;
        left: 40px;
        top: 80px;
    }

    .break-point .commitment-spacing .name {
        font-size: 1.5rem;
        color: var(--secondary-color-7);
    }

    .break-point .commitment-spacing h6 {
        font-size: 1.5rem;
        color: var(--secondary-color-7);
        width: 100%;
        max-width: 100%;
    }

    .etf-video .margin-top-50 {
        margin-top: 0;
    }

    .footer .col-12 {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

@media (max-width: 2560px) and (min-width: 1024px) {
    .social-icon .col-md-3 {
        width: 8.666667%;
    }
}

/* Mobile */

@media (max-width: 769px) and (min-width: 427px) {
    .swiper-slide .title {
        top: 40px;
        left: 40px;
    }

    .swiper-slide .subtitle {
        top: 160px;
        left: 40px;
    }

    section.carousel-menu {
        display: none !important;
    }

    #section-1.sustainable {
        background-position: 50% -150px;
    }

    .sustainable-spacing {
        margin-top: 20rem !important;
        margin-left: 45px;
    }

    .sustainable-menu .item-menu {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        margin-right: 15px;
        background-color: var(--secondary-color-7);
        box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
        max-width: 200px;
    }

    #section-2.commitment {
        margin-top: 0 !important;
    }


    .commitment-spacing {
        margin-top: 30px;
    }

    img {
        max-width: 100%;
    }

    .video-box {
        width: 100%;
    }

    .video-box iframe {
        width: 320px;
        height: auto;
    }

    .investment-image {
        position: relative;
        margin-top: 30px;
        top: initial;
        right: initial;
    }

    .esg {
        background-position: -5em -10rem;
        padding-top: 5rem;
    }

    .esg-card {
        margin-bottom: 30px;
    }

    #section-5.sustainability {
        margin-top: 0 !important;
    }

    #section-6.fund {
        margin-top: 0 !important;
    }

    #appoach-1 img {
        max-width: 50%;
    }
}

@media (max-width: 440px) and (min-width: 375px) {
    .esg-card-image {
        height: 240px;
    }

    section#section-1, section#section-2, section#section-3, section#section-4, section#section-5, section#section-6, .article-details {
        padding: 1rem !important;
    }

    .swiper-slide .title {
        top: 20px;
        left: 0px;
        text-align: center;
    }

    .swiper-slide .subtitle {
        top: 160px;
        left: 0px;
        text-align: center;
    }

    section.carousel-menu {
        display: none !important;
    }

    #section-1.sustainable {
        background-position: 50% -70px;
    }

    .sustainable-spacing {
        margin-top: 12rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sustainable-menu .item-menu {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        background-color: var(--secondary-color-7);
        box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
    }

    #section-2.commitment {
        margin-top: 0 !important;
    }

    .commitment-spacing {
        margin-top: 30px;
    }

    img {
        max-width: 100%;
    }

    .video-box {
        width: 100%;
    }

    .video-box iframe {
        width: 310px;
        height: auto;
    }

    .investment-image {
        position: relative;
        margin-top: 30px;
        top: initial;
        right: initial;
    }

    .esg {
        background-position: 50% -250px;
        background-size: 250%;
    }

    .esg-spacing {
        padding-top: 15rem;
    }

    .esg-card {
        margin-bottom: 30px;
    }

    #section-5.sustainability {
        margin-top: 0 !important;
    }

    #section-6.fund {
        margin-top: 0 !important;
    }

    .sustainable-spacing .title:before {
        left: -10px !important;
    }

    .commitment-spacing .name:before {
        left: -15px !important;
    }

    .investment-spacing .title:before {
        left: -15px !important;
    }

    .esg-spacing .title:before {
        left: -15px !important;
    }

    .sustainability .title:before {
        left: -15px !important;
    }

    .article-notice {
        margin: 1.5rem;
        padding: 1.5rem;
        font-size: 20px;
    }

    /* Appoach */
    .appoach-banner {
        height: 180px;
    }

    #appoach-1 {
        margin-top: 0;
        padding: 1.5rem;
    }

    #appoach-1 img {
        max-width: 90%;
    }
}

@media (max-width: 374px) and (min-width: 0px) {

    .esg-card-image {
        height: 240px;
    }

    /* Appoach */
    .appoach-banner {
        height: 180px;
    }

    section#section-1, section#section-2, section#section-3, section#section-4, section#section-5, section#section-6, .article-details {
        padding: 1rem !important;
    }

    .swiper-slide .title {
        top: 20px;
        left: 0px;
        text-align: center;
    }

    .swiper-slide .subtitle {
        top: 180px;
        left: 0px;
        text-align: center;
    }

    section.carousel-menu {
        display: none !important;
    }

    #section-1.sustainable {
        background-position: 50% -70px;
    }

    .sustainable-spacing {
        margin-top: 10rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .sustainable-menu .item-menu {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        background-color: var(--secondary-color-7);
        box-shadow: 0 10px 20px rgb(220 220 220 / 50%);
    }

    #section-2.commitment {
        margin-top: 0 !important;
    }

    .commitment-spacing {
        margin-top: 30px;
    }

    img {
        max-width: 100%;
    }

    .video-box {
        width: 100%;
    }

    .video-box iframe {
        width: 265px;
        height: auto;
    }

    .investment-image {
        position: relative;
        margin-top: 30px;
        top: initial;
        right: initial;
    }

    .esg {
        background-position: 50% -200px;
        background-size: 250%;
    }

    .esg-spacing {
        padding-top: 15rem;
    }

    .esg-card {
        margin-bottom: 30px;
    }

    #section-5.sustainability {
        margin-top: 0 !important;
    }

    #section-6.fund {
        margin-top: 0 !important;
    }

    .sustainable-spacing .title:before {
        left: -15px !important;
    }

    .commitment-spacing .name:before {
        left: -15px !important;
    }

    .investment-spacing .title:before {
        left: -15px !important;
    }

    .esg-spacing .title:before {
        left: -15px !important;
    }

    .sustainability .title:before {
        left: -15px !important;
    }

    .article-notice {
        margin: 1.5rem;
        padding: 1.5rem;
        font-size: 20px;
    }

    #appoach-1 img {
        max-width: 50%;
    }
}


.esg-card-details h3 {
    overflow: hidden;
    height: 60px;
}

.esg-card-details a, .esg-card-details span, .esg-card-details p, .esg-card-details h2, .esg-card-details h4, .esg-card-details h5, .esg-card-details h6 {
    font-family: 'font_medium_65regular' !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: var(--secondary-color-5) !important;
}

.esg-card-details img {
    display: none !important;
}

.find-out-more-container {
    position: relative;
    display: block;
    left: 5px;
    width: 200px;
    margin-top: 30px;
    padding: 30px;
    border: 1px solid var(--primary-color-1);
}

.find-out-more-container:hover {
    background-color: var(--primary-color-1);
    border: 1px solid var(--primary-color-1);
}

.find-out-more-container:active {
    border: none;
}

.find-out-more-container button {
    display: block;
    height: 60px;
    width: 199px;
    background-color: var(--primary-color-1);
    border: solid var(--primary-color-1);
    border-width: 0 1px;
    color: var(--secondary-color-7);
    font-size: 18px;
    margin: -37px 0px -25px -37px;
    padding: 15px;
    padding-left: 10px;
    text-decoration: none;
}

.find-out-more-container button:hover {
    background-color: var(--secondary-color-7);
    border: solid var(--primary-color-1);
    color: var(--primary-color-1);
}

.find-out-more-container button:active {
    background-color: var(--secondary-color-7);
    border: solid var(--primary-color-1);
    color: var(--primary-color-1);
    transform: translateY(7px) translateX(7px);
}

.find-out-more-container button:focus {
    outline: none;
}

.commitment-link:hover {
    cursor: pointer;
}

.what-etf {
    margin-top: 3rem;
    padding: 2.5rem;
}

.btn-form {
    background-color: #002469;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 20px;
}

.btn-form:hover {
    color: #ffffff;
}

/* Global Setup */

:root {
    --primary-color-1: #002469;
    --primary-color-2: #E1091D;
    --secondary-color-1: #045762;
    --secondary-color-2: #4AA96C;
    --secondary-color-3: #A0CC78;
    --secondary-color-4: #BFDCAE;
    --secondary-color-5: #1C1C1C;
    --secondary-color-6: #DDDDDD;
    --secondary-color-7: #FFFFFF;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

h1 {
    font-family: 'font_medium_65regular';
    font-size: 40px;
    font-weight: 400;
}

h2 {
    font-family: 'font_medium_65regular';
    font-size: 30px;
    font-weight: 400;
}

h3 {
    font-family: 'font_medium_65regular';
    font-size: 24px;
    font-weight: 400;
}

img {
    -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

hidden {
    display: none;
    visibility: hidden;
}

.fund-card-text h1, .fund-card-text p {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

@media (max-width: 426px) {
    /* Appoach */
    .appoach-banner {
        height: 180px;

    }
    p, h1, h2, h3, h4, h5, h6, span, div, input, textarea, button {
        line-height: 1.2 !important;
    }
}

.item-menu a {
    color: var(--secondary-color-5);
}

@media (max-width: 426px) {
    /* Appoach */
    .appoach-banner {
        height: 180px;

    }
    .esg-spacing .details {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.row.fund-grid {
    position: relative;
}

.fund-grid-bg {
    position: absolute;
    background-image: url('../images/esg/fund-grid-bg.PNG');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 112px;
    height: 156px;
    top: -120px;
    left: -60px;
    z-index: -1;
}

/* RESPONSIVE */
@media screen and (min-width: 1366px) and (max-width: 2560px) {
    #section-1.sustainable {
        padding: 2.5rem;
        position: relative;
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 20% -98px;
    }
}

@media (max-width: 426px) {

    .esg-card-image {
        height: 240px;
    }

    /* Appoach */
    .appoach-banner {
        height: 180px;

    }
    .commitment .col-12.mb-5, .commitment .col-12.mt-5 {
        margin: 15px 0 !important;
    }

    .commitment-link {
        margin-bottom: 0 !important;
    }

    #section-3.investment-approach {
        margin: 0 !important;
    }

    #article.row.justify-content-around.mt-5 {
        margin-top: 0 !important;
    }
}

.gallery.gallery-fw .gallery-item {
    margin: 0 !important;
    padding: 0 !important;
}

.item-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: cover;
}

.item-icon.icon-1 {
    background-image: url('../images/esg/icon/1-primary.svg');
}

.item-menu:hover .icon-1 {
    background-image: url('../images/esg/icon/1-hover.svg');
}

.item-icon.icon-2 {
    background-image: url('../images/esg/icon/2-primary.svg');
}

.item-menu:hover .icon-2 {
    background-image: url('../images/esg/icon/2-hover.svg');
}

.item-icon.icon-3 {
    background-image: url('../images/esg/icon/3-primary.svg');
}

.item-menu:hover .icon-3 {
    background-image: url('../images/esg/icon/3-hover.svg');
}

.item-icon.icon-4 {
    background-image: url('../images/esg/icon/4-primary.svg');
}

.item-menu:hover .icon-4 {
    background-image: url('../images/esg/icon/4-hover.svg');
}

.item-icon.icon-5 {
    background-image: url('../images/esg/icon/5-primary.svg');
}

.item-menu:hover .icon-5 {
    background-image: url('../images/esg/icon/5-hover.svg');
}

.item-icon.icon-6 {
    background-image: url('../images/esg/icon/6-primary.svg');
}

.item-menu:hover .icon-6 {
    background-image: url('../images/esg/icon/6-hover.svg');
}

.item-icon.icon-7 {
    background-image: url('../images/esg/icon/7-primary.svg');
}

.item-menu:hover .icon-7 {
    background-image: url('../images/esg/icon/7-hover.svg');
}

.item-icon.icon-8 {
    background-image: url('../images/esg/icon/8-primary.svg');
}

.item-menu:hover .icon-8 {
    background-image: url('../images/esg/icon/8-hover.svg');
}

.item-icon.icon-9 {
    background-image: url('../images/esg/icon/9-primary.svg');
}

.item-menu:hover .icon-9 {
    background-image: url('../images/esg/icon/9-hover.svg');
}

.item-icon.icon-10 {
    background-image: url('../images/esg/icon/10-primary.svg');
}

.item-menu:hover .icon-10 {
    background-image: url('../images/esg/icon/10-hover.svg');
}

.accordion-button {
    font-size: 20px;
    font-weight: 800;
}

@media screen and (min-width: 1560px) and (max-width: 1990px) {
    #section-1.sustainable {
        padding: 2.5rem;
        position: relative;
        background-size: 65%;
        background-repeat: no-repeat;
        background-position: 40% -250px;
    }

    .investment-approach {
        padding: 8rem 0;
    }

    .investment-image {
        right: 130px;
        top: -60px;
    }

    .esg {
        background-position: -20rem -30rem;
        background-size: 100%;
    }
}


@media screen and (min-width: 1367px) and (max-width: 1440px) {
    #section-1.sustainable {
        padding: 2.5rem;
        position: relative;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: -10% -160px;
    }

    .investment-image {
        /*right: -70px;*/
    }

    .esg {
        background-position: -25rem -25rem;
        background-size: 120%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    #section-1.sustainable {
        padding: 2.5rem;
        position: relative;
        background-size: 60%;
        background-repeat: no-repeat;
        background-position: 0% -60px;
    }

    .sustainable-spacing {
        margin-top: 2rem;
        margin-right: 2rem;
        margin-left: auto;
    }

    .sustainable-menu .item-menu {
        margin-top: 10rem;
    }

    .commitment {
        margin-top: 0;
        padding: 2.5rem;
    }

    .investment-image {
        top: -50px;
        right: 10px;
        width: 100%;
        max-width: 100%;
    }

    .investment-image img {
        width: 100%;
    }

    .esg {
        padding-top: 7rem;
        background-position: -25rem -25rem;
        background-size: 150%;
    }

    .video-box {
        width: 100%;
    }

    .video-box iframe {
        width: 125%;
    }
}

@media screen and (min-width: 426px) and (max-width: 520px) {
    #section-1.sustainable {
        background-position: 50% -10px;
    }

    .sustainable-spacing {
        margin-top: 15rem !important;
        margin-left: 45px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .investment-image {
        top: -25px;
        left: 400px;
        width: 100%;
        max-width: 100%;
    }

        .investment-image img {
            width: 60%;
        }

    .esg-spacing .details {
        width: 100%;
        max-width: 100%;
    }
}
.chocolat-zoomable.chocolat-zoomed {
    cursor: zoom-out;
}

.chocolat-open {
    overflow: hidden;
}

.chocolat-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #fff;
    display: none;
    opacity: 1;
}

.chocolat-wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    z-index: 16;
    color: #fff;
}

.chocolat-zoomable .chocolat-img {
    cursor: zoom-in;
}

.chocolat-loader {
    height: 32px;
    width: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 11;
    background: url(../images/loader.gif);
    display: none;
}

.chocolat-content {
    position: fixed;
    width: 0px;
    height: 0px;
    left: 50%;
    top: 50%;
    z-index: 14;
    text-align: left;
}

.chocolat-content .chocolat-img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.chocolat-wrapper .chocolat-left {
    position: absolute;
    left: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(../images/left.png) 50% 50% no-repeat;
    z-index: 17;
    display: none;
}

.chocolat-wrapper .chocolat-right {
    position: absolute;
    right: 0;
    width: 50px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    cursor: pointer;
    background: url(../images/right.png) 50% 50% no-repeat;
    z-index: 17;
    display: none;
}

.chocolat-wrapper .chocolat-right.active {
    display: block;
}

.chocolat-wrapper .chocolat-left.active {
    display: block;
}

.chocolat-wrapper .chocolat-top {
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    z-index: 17;
    margin-bottom: 10px;
}

.chocolat-wrapper .chocolat-close {
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: url('../chocolat/close.png') 50% 50% no-repeat;
}

.chocolat-wrapper .chocolat-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 40px;
    height: 40px;
    font-size: 12px;
    z-index: 17;
    padding-left: 15px;
    padding-right: 15px;
    background: rgba(0, 0, 0, 0.2);
    text-align: right;
    margin-top: 10px;
}

.chocolat-wrapper .chocolat-set-title {
    display: inline-block;
    padding-right: 15px;
    line-height: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.chocolat-wrapper .chocolat-pagination {
    float: right;
    display: inline-block;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 15px;
    /*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
}

.chocolat-wrapper .chocolat-fullscreen {
    width: 16px;
    height: 40px;
    background: url(../images/fullscreen.png) 50% 50% no-repeat;
    display: block;
    margin: auto;
    cursor: pointer;
    float: right;
}

.chocolat-wrapper .chocolat-description {
    display: inline-block;
    float: left;
}

/* no container mode*/

body.chocolat-open>.chocolat-overlay {
    z-index: 15;
}

body.chocolat-open>.chocolat-loader {
    z-index: 15;
}

body.chocolat-open>.chocolat-content {
    z-index: 17;
}

/* container mode*/

.chocolat-in-container .chocolat-wrapper, .chocolat-in-container .chocolat-content, .chocolat-in-container .chocolat-overlay {
    position: absolute;
}

.chocolat-in-container {
    position: relative;
}

/* Custom */

.gallery .gallery-item {
    float: left;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    margin-right: 7px;
    margin-bottom: 7px;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
}

.gallery.gallery-fw .gallery-item {
    width: 100%;
    margin-bottom: 15px;
}

/* .gallery .gallery-item {
    border: 2px dashed #e9eaec;
} */

.chocolat-overlay {
    background-color: #fff!important;
}

.chocolat-wrapper {
    z-index: 9999!important;
}

/* uncomment to hide controls when zoomed-in*/

/*
.chocolat-zoomable .chocolat-top,
.chocolat-zoomable .chocolat-bottom,
.chocolat-zoomable .chocolat-right,
.chocolat-zoomable .chocolat-left {
    transition: opacity .3s ease, visibility 0s .3s;
   opacity: 1;
}

.chocolat-zoomable.chocolat-zoomed .chocolat-top,
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
    visibility: hidden;
    opacity: 0;
}
*/