/*------------------------------------------------------------------
[Table of contents]

1. GLOBAL STYLES
2. TYPOGRAPHY
3. LOADER
4. NAVIGATION BAR
5. PAGES
	5.1. BACKGROUND PAGES
6. HOMEPAGE
7. ABOUT ME
8. WORK
9. BLOG
10. CONTACT
11. FOOTER
	
/*------------------------------------------------------------------

/*------------------------------------------------------------------
1. GLOBAL STYLES
-------------------------------------------------------------------*/

html,
body {
    height: 100%;
    width: 100%;
}

body {
    background: #fff;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 14px;
    line-height: 22px;
    overflow: hidden;
    letter-spacing: 0.025em;
}

a,
a:hover,
a:focus,
a:active {
    outline: none !important;
    text-decoration: none;
    color: #000;
}

ul,
li {
    list-style: none;
}

hr {
    display: block;
    margin: 30px 0px;
}


textarea,
input,
input:hover,
input:focus,
input:active,
input[type="text"],
input[type="text"]:focus,
input[type="text"]:hover,
input[type="text"]:active,
input[type="email"],
input[type="email"]:focus,
input[type="email"]:hover,
input[type="email"]:active,
button,
button[type="submit"] {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    outline: 0px !important;
}

.no-overflow {}

.css3Animate {
    -webkit-transition: all .2s linear .1s;
    -moz-transform: all .2s linear .1s;
    -ms-transition: all .2s linear .1s;
    -o-transition: all .2s linear .1s;
    transition: all .2s linear .1s;
}

.css3AnimateSlow {
    -webkit-transition: all 1s linear 0.5s;
    -moz-transform: all 1s linear 0.5s;
    -ms-transition: all 1s linear 0.5s;
    -o-transition: all 1s linear 0.5s;
    transition: all 1s linear 0.5s;
}

#backSlider {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.backSliderOver {
    background: #000;
}

#pattern {
    width: 100%;
    height: 100%;
    position: absolute;
    /*background: url(../img/pattern.png) repeat;*/
    z-index: 1;
    opacity: 0.75;
}

section {
    padding: 75px 0px;
}

.clearfix {
    margin: 20px 0px;
}

.hide {
    display: none;
}

#gradient-1 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: -webkit-linear-gradient(135deg, #268fd0, #5f56ac);
    /* For Safari */
    background: -o-linear-gradient(135deg, #268fd0, #5f56ac);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(135deg, #268fd0, #5f56ac);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(135deg, #268fd0, #5f56ac);
    /* Standard syntax */
    Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#268fd0', endColorstr='#5f56ac');
    /* For IE */
    opacity: 0.75;
}

#gradient-2 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: -webkit-linear-gradient(135deg, #fe7259, #ffc456);
    /* For Safari */
    background: -o-linear-gradient(135deg, #fe7259, #ffc456);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(135deg, #fe7259, #ffc456);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(135deg, #fe7259, #ffc456);
    /* Standard syntax */
    Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7259', endColorstr='#ffc456');
    /* For IE */
    opacity: 1;
}

.poster-image {
    background: url('../index-dua_02.html');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    backface-visibility: hidden;
    background-position: center center;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#video-content {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#controlBar_bgndVideo,
#controlBar_video-content {
    display: none !important;
}

#fullscreen-vimeo {
    background-color: #000000;
    height: 100%;
    left: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -2;
    overflow: hidden;
}

#fullscreen-wrap {
    height: 360px;
    left: 0;
    position: absolute;
    top: 0;
    width: 640px;
}

#fullscreen-vimeo iframe {
    border: none;
    display: block;
    height: 100%;
    width: 100%;
}

.enter {
    clear: right;
    float: none;
    width: 100%;
    min-height: 100px;
    background: #000000;
    bottom: 0px;
}

/*------------------------------------------------------------------
2. TYPOGRAPHY
-------------------------------------------------------------------*/

h1 {
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 4em;
    letter-spacing: -0.05em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.05em;
}

h3 {
    font-size: 1.4em;
    font-weight: 200;
    letter-spacing: 0.025em;
    line-height: 1.45em;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.4em;
    letter-spacing: -0.05em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.35em;
    text-align: center;
}

h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.35em;
    text-transform: uppercase;
}

/*------------------------------------------------------------------
3. LOADER
-------------------------------------------------------------------*/

.loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0f1923;
    z-index: 1100;
}

#loader-content {
    border-radius: 235px;
    position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin-left: -105px;
    margin-top: -95px;
    width: 235px;
    height: 235px;
}

.loader-logo,
#loader-circle {
    position: absolute;
}

.loader-logo {
    top: 30%;
    left: 27.5%;
    margin-left: -45px;
    margin-top: -40px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 5em;
    line-height: 1em;
}

/*------------------------------------------------------------------
4. NAVIGATION BAR
-------------------------------------------------------------------*/

#mainNav {
    position: fixed;
    z-index: 9;
    width: 100%;
    top: -100px;
    padding-top: 16px;
    height: 68px;
    font-size: 0.7em;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    background: transparent;
}


#mainNav .navbar-brand {
    margin: auto;
    width: 186px;
    height: 74px;
    float: none;
    background: none;
    display: block;
    font-size: 0.6em;
}

#mainNavTop {
    top: -61px;
}

.lightNav .round-logo {
    border: 0px solid rgba(256, 256, 256, 0.5);
}

.darkNav .round-logo {
    border: 0px solid rgba(51, 51, 51, 0.5);
}

.lightNav .round-logo:hover {
    border: 0px solid rgba(256, 256, 256, 1);
}

.darkNav .round-logo:hover {
    border: 0px;
    margin-left: -65px;
    margin-top: -24px;
}

#mainNav .navbar-brand svg {
    width: 1.6em;
    margin-top: -6px;
}

#mainNav .round-logo {
    display: block;
    border-radius: 50%;
    text-align: center;
}

#mainNav .round-logo img {
    margin-left: -65px;
    margin-top: -24px;
}

#mainNav ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: end;
    -webkit-align-items: end;
    -ms-flex-align: end;
    align-items: end;
    -webkit-box-pack: end;
    -webkit-justify-content: end;
    -ms-flex-pack: end;
    justify-content: end;
    width: 100%;
    margin-top: -24px;
}

#mainNav ul li {
    text-transform: normal letter-spacing: .24em;
    margin-right: 5px;
}

#mainNav ul li: last-child {
    margin-right: 8px !important;
}

#mainNav ul li button {
    display: inline-block;
    height: 50px;
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    letter-spacing: 2px;
    font-size: 1.35em;
    color: #fff;
}

.darkNav ul li button {
    color: #fff;
}

#mainNav ul li a {
    display: inline-block;
    height: 50px;
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    letter-spacing: 2px;
    font-size: 1.35em;
    color: #fff;
}

#mainNav ul li:last-child {
    margin-right: -15px !important;
}

.darkNav ul li a {
    color: #fff;
}

#mainNav ul li button:hover,
#mainNav ul li button:active {
    background: none;
}

#mainNav ul li button.button-black {
    color: #fff;
}

#mainNav ul li button.button-color-black {
    color: #102d4c !important;
}

#mainNav ul li a.button-color-black {
    color: #102d4c !important;
}


#mainNav ul li .right-margin {
    margin-right: 4px;
}

#mainNav ul li .left-margin {
    padding-left: 0;
    margin-left: 4px;
}

#mainNav ul li button .line {
    height: 1px;
    display: block;
    width: 0px;
    margin-top: 1px;
    margin-left: 50%;
}

.lightNav ul li button .line {
    background: transparent;
}

.darkNav ul li button .line {
    background: #fff;
}

#mainNav ul li button:hover .line {
    width: 97%;
    margin-left: 0%;
    /*HIDDEN LINE HOVER*/
    /*display: none;*/
}

/* SECOND NAV */

#secondNav {
    position: fixed;
    z-index: 9;
    width: 100%;
    top: -100px;
    padding-top: 16px;
    height: 68px;
    font-size: 0.7em !important;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
    background: #fff;
}

#secondNav .navbar-brand {
    margin: auto;
    width: 159px;
    height: 61px;
    float: none;
    background: none;
    display: block;
    font-size: 0.6em;
}

#secondNav .navbar-brand svg {
    width: 1.6em;
    margin-top: -6px;
}

#secondNav .round-logo {
    display: block;
    border-radius: 50%;
    text-align: center;
}

#secondNav .round-logo img {
    margin-left: -65px;
    margin-top: -24px;
}

#secondNav ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: end;
    -webkit-align-items: end;
    -ms-flex-align: end;
    align-items: end;
    -webkit-box-pack: end;
    -webkit-justify-content: end;
    -ms-flex-pack: end;
    justify-content: end;
    width: 100%;
    margin-top: -24px;
}

#secondNav ul li {
    text-transform: normal letter-spacing: .3em;
    margin-right: 30px;
}

#secondNav ul li: last-child {
    margin-right: 8px !important;
}

#secondNav ul li button {
    display: inline-block;
    height: 50px;
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    letter-spacing: 2px;
    font-size: 1.35em;
    color: #fff;
}


#secondNav ul li a {
    display: inline-block;
    height: 50px;
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    letter-spacing: 2px;
    font-size: 1.35em !important;
    color: #0f2d4f;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

#secondNav ul li a.button-color-black {
    color: #102d4c !important;
}

/* SECOND NAV */

.space-menu-15 {
    width: 10px;
    height: 23.6px;
    float: left;
}



.navTop .round-logo,
.navTop .round-logo:hover {
    border: 0px;
}

.navTop .navbar-brand svg {
    width: 1.3em;
    margin-top: -6px;
}

.navTop ul li button {
    font-size: 0.8em;
}

.lightNav a,
.lightNav button {
    color: #0C4C8F;
}

.darkNav a,
.darkNav button {
    color: #000;
}

#mainNav a {
    /*font-size: 3.5em;*/
    font-size: 1.35em;
    opacity: 1;
    margin-top: 20px;
    margin-right: 20px;
    float: right;
}

#mainNav a:hover {
    /*font-size: 3.5em;*/
    font-size: 1.35em;
    opacity: 1;
}

#secondNav {}

#secondNav a {
    /*font-size: 3.5em;*/
    font-size: 1.35em;
    opacity: 1;
    margin-top: 8px;
    margin-right: 20px;
    float: right;
    color: #102e50;
}

#secondNav a:hover {
    /*font-size: 3.5em;*/
    font-size: 1.35em;
    opacity: 1;
    color: #102e50;
}

.menu-mobile {
    position: absolute;
    z-index: 100;
    background: rgba(0, 0, 0, 0.75);
    width: 100%;
    height: 100%;
    display: none;
}

.menu-mobile a {
    position: absolute;
    z-index: 110;
    font-size: 3em;
    right: 20px;
    top: 20px;
    opacity: 0.75;
    color: #fff;
}

.menu-mobile a:hover {
    opacity: 1;
}

.menu-mobile ul {
    list-style: none;
    text-align: center;
    width: 100%;
    height: 280px;
    margin-left: 0px;
    margin-right: 0px;
}

.menu-mobile ul li {
    display: block;
    clear: both;
    width: 100%;
}

.menu-mobile ul li button {
    background: none;
    font-size: 2.5em;
    font-weight: 200;
    width: 300px;
    text-align: center;
    line-height: 2em;
    border: 0px;
    box-shadow: none;
    text-shadow: none;
    opacity: 0.75;
    color: #fff;
}

.menu-mobile ul li button:hover {
    opacity: 1;
}

.navTop {
    padding-top: 12px !important;
    height: 102px !important;
    background: #fff !important;
}

.pt-wrapper {
    width: 100%;
    height: auto;
    /*overflow: hidden;*/
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-chapter {
    margin-top: -3.5px;
    margin-right: -98px;
    color: #102d4c;
    width: 360px;
    padding-top: 24px;
    border: 0px;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
}

.dropdown-chapter a {
    color: #102d4c !important;
    line-height: 24px !important;
    margin-bottom: 0px !important;
    height: auto !important;
    /*letter-spacing: 1.4px !important;*/
    font-size: 0.9em !important;
    color: #102d4c;
    font-weight: 600;
    /*font-family: "Myriad Pro", sans-serif*/
    margin-bottom: 10px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    display: block;

}

/* NEW NAVIGATION 2019 */


hr.blue-line {
    border: 2px solid #1867B1;
    border-radius: 5px;
    margin: 10px 0px 10px 0px;
  }

#main-2019 {
    position: fixed;
    z-index: 9 !important;
    top: -100px;
    width: 100% !important;
    padding-top: 12px;
    height: 102px;
    font-weight: 700;
    background: transparent;
}

#second-main-2019 {
    position: fixed;
    z-index: 9 !important;
    top: 0px;
    width: 100% !important;
    padding-top: 12px;
    height: 102px;
    font-weight: 700;
    background: #fff;
    box-shadow: 0 1px 10px rgba(151, 164, 175, 0.1);
}

.navbar-brand-biofin {
    height: auto;
}

.navbar-brand-biofin img {
    width: 185px;
    margin-top: 0px;
}

.new-nav-center {
    height: auto;
}

.new-nav-center li {
    margin-right: 30px;
}

.new-nav-center li a {
    /*height: 50px;*/
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    /*letter-spacing: 2px;*/
    font-size: 1.2em;
    color: #fff;
    font-weight: 600;
    /*font-family: "Myriad Pro", sans-serif;*/
    white-space: normal;
    /* line-height: normal !important;*/
    padding-bottom: 37px;
    padding-top: 39.5px;
    white-space: normal;
}

.new-nav-center li a.button-color-black {
    color: #102d4c !important;
}

.second-new-nav-center {
    height: auto;
}

.foot-note-bottom {
    font-weight: 400;
}

.foot-note-bottom span {
    font-weight: 400 !important;
    margin-bottom: 28px !important;
}

.second-new-nav-center li {
    margin-right: 30px;
}

.second-new-nav-center li a {
    /*height: 50px;*/
    position: relative;
    background: none;
    border: 0px;
    text-transform: normal;
    /*letter-spacing: 2px;*/
    font-size: 1.2em;
    color: #102d4c;
    font-weight: 600;
    /*font-family: "Myriad Pro", sans-serif;*/
    padding-bottom: 37px;
    padding-top: 39.5px;
    white-space: normal;
    /*line-height: normal !important;*/
}

.second-new-nav-center li a.button-color-black {
    color: #102d4c !important;
}

.next-prev-navigation {
    width: 100%;
    height: auto;
    padding: 10px 0px;
    display: block;
    overflow: hidden;
    z-index: 2 !important;
    position: relative;
}

.prev-page-nav {
    float: left;
    border: 1px solid #0c141c;
    padding: 10px 32px;
    /*font-family: "Myriad Pro", sans-serif;*/
    font-size: 15px;
    letter-spacing: 2.5px;
    font-weight: 600;
    border-radius: 5px;
    min-width: 135px;
    text-align: center;
}

.next-page-nav {
    float: right;
    border: 1px solid #0c141c;
    padding: 10px 32px;
    /*font-family: "Myriad Pro", sans-serif;*/
    font-size: 15px;
    letter-spacing: 2.5px;
    font-weight: 600;
    border-radius: 5px;
    min-width: 135px;
    text-align: center;
}


/* NEW NAVIGATION 2019 */


/*------------------------------------------------------------------
5. PAGES
-------------------------------------------------------------------*/

.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    overflow: auto;
    /*padding-top: 50px;*/
}

.pt-page-current,
.no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

.pt-page a {
    padding: 10px 15px;
    border: 1px solid #ddd;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}

.pt-page a:hover {
    color: #fff;
    background: #000;
    border: 1px solid #000;
}

/*------------------------------------------------------------------
5.1. BACKGROUND PAGES
-------------------------------------------------------------------*/

.homepage-background {
    background: #000;
}

.aboutme,
.work,
.single-work,
.blog,
.navTop .aboutmeNav,
.navTop .workNav,
.navTop .blogNav {
    background: #fff;
}

.contact,
.navTop .contactNav {
    background: #fff;
}

.navTop .pt-trigger-container {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/*------------------------------------------------------------------
6. HOMEPAGE
-------------------------------------------------------------------*/

.homepage {
    opacity: 0;
    padding: 0px;
    overflow: hidden;
    min-height: 768px;
}

.homepage section {
    padding: 0px;
}

.homepage .messages {
    text-align: left;
    color: #fff;
    background: #12a79d;
    right: 0px;
    float: right;
    height: 100%;
    margin-top: 83px !important;
    padding-right: 180px;
    padding-left: 48px;

}

.table-of-list {
    clear: right;
    width: 100%;
    display: block;
    overflow: hidden;
    background: #0f1923;
}

.homepage-custom .messages {
    text-align: left;
    color: #fff;
    background: #12a79d;
    right: 0px;
    float: right;
    height: 730px;
    margin-top: 0px !important;
    padding-right: 180px;
    padding-left: 48px;
    position: relative;
    padding-bottom: 64px;
}

.khusus-hompepage {
    padding: 0px;
    background-size: 100% !important;
    background: #0f1923 url(../homepage-bg.html) top center no-repeat;
    position: relative;
    overflow-x: hidden;
}

.link-top-logo {
    margin-right: 40px;
}

.funded-by {
    width: 100%;
    min-height: 64px;
    padding: 15px 0px;
    background: #fff;
}

.logo-white-footer {
    margin-top: 24px;
    margin-bottom: 32px;
}

.european-union {
    padding-right: 25px;
    padding-left: 45px;
    margin-top: 14px;
}

.left-table-content-footer {
    width: 170px;
    float: left;
    height: auto;
}

.table-of-content-footer {
    height: auto;
}

.table-of-content-footer span {
    margin-right: 12px;
}

.table-of-content-footer h5 {
    color: #fff;
    font-size: 14px;
    text-transform: unset;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
    margin-bottom: 0px;
    margin-top: 5px;
}

.arrow-v-middle {
    /*background-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);*/
    width: 120px;
    height: 100%;
    display: table;
    position: absolute;
    right: 0px;
    top: 0px;
}

.v-middle-arrow {
    width: 64px;
    height: 64px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.arrow-v-middle a {
    text-decoration: none;
    outline: none;
    border: none;
}

.arrow-v-middle a:hover {
    outline: none;
    text-decoration: none;
    border: none;
    background: transparent;
}

.arrow-v-middle a:focus {
    outline: none;
    text-decoration: none;
    border: none;
}

.v-middle-arrow img {
    max-width: 100%;
    width: 64px;
}

.undp-biofin {
    width: 152px;
    height: 48px;
    background: transparent;
    border: none;
    margin-top: -10px;
}

.undp-biofin img {
    max-width: 100%;
    height: auto;
    margin-bottom: -12px;
    position: relative;
}

.homepage .messages h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2.2em;
    letter-spacing: -0.04em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.45em;
}

.caption-case {
    margin-top: 64px;
}

.caption-case span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.7em;
    letter-spacing: -0.04em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.45em;
}

.caption-case p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 1.3em;
    letter-spacing: -0.05em;
    margin: 0px;
    line-height: 1.45em;
    margin-top: 12px;
}

.caption-case a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 1.3em;
    letter-spacing: -0.04em;
    margin: 0px;
    line-height: 1.45em;
    margin-top: 12px;
    color: #fff;
}

.caption-case a:hover {
    background: #ed3c43;
    border: 1px solid #ed3c43;
}

/* EDITED BY AGUS SUSILO */

.caption-case-edited {
    margin-top: 100px;
    float: right;
    overflow: hidden;
    background: transparent none;
    height: 100vh;
    right: 0px;
    padding-right: 40px;
    padding-left: 48px;
    top: 0px;
    padding-top: 95px;
    color: #fff;
    text-align: right;
}

.biofin-funded-center {
    height: auto;
    color: #1867b1;
}

.biofin-funded-center h5 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.35em;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 20px;
}



.caption-case-edited h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 3.65em;
    letter-spacing: -0.05em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.15em;
}

.caption-case-edited span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.7em;
    letter-spacing: -0.04em;
    margin: 0px;
    text-transform: uppercase;
    line-height: 1.45em;
    color: #fff;
}

.caption-case-edited h4 {
    text-align: right;
    font-size: 54px;
    letter-spacing: 0.4px;
}

.caption-case-edited p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 2em;
    margin: 0px;
    margin-bottom: 12px;
    line-height: 1.45em;
    margin-top: 12px;
    color: #fff;
}

.caption-case-edited a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 1.3em;
    margin: 0px;
    line-height: 1.45em;
    margin-top: 12px;
    color: #fff;
    background: #151924;
}

.caption-case-edited a:hover {
    background: #0c141c;
    border: 1px solid #ddd;
}

p.special-paragraph:first-letter {
    font-size: 680%;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    float: left;
    color: #12A79D;
    margin-top: 10px;
    margin-right: 6px;
}

h3.green-tagline {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    float: left;
    margin-top: 10px;
    margin-right: 6px;
    font-size: 22px;
    color: #12A79D;
    line-height: 34px;
    margin-top: 48px;
    margin-bottom: 40px;
}

/* EDITED BY AGUS SUSILO */

/*------------------------------------------------------------------
7. ABOUT ME
-------------------------------------------------------------------*/

.aboutme .section-author-image,
.aboutme .section-author-image-2 {
    padding-top: 100px;
}

.aboutme a {
    margin-top: 20px;
    margin-bottom: 0px;
}

.aboutme .author-image-content {
    text-align: center;
}

.aboutme .author-image {
    display: inline-block;
    padding: 25px;
    border: 1px solid #ddd;
    overflow: hidden;
    width: 400px;
    height: 400px;
    border-radius: 50%;
}

.aboutme .section-author-image-2 {
    padding-bottom: 0px;
}

.aboutme .section-author-image ul {
    padding-left: 0px;
}

.aboutme .author-image-2 {
    padding-bottom: 100px;
    background: url(../../external.html?link=http://placehold.it/715x1106&text=Author+image) top left no-repeat;
    background-size: 55%;
    position: relative;
}

.aboutme ul li {
    clear: both;
    position: relative
}

.aboutme ul li label {
    display: inline-block;
    background: #ddd;
    padding: 5px 10px;
    float: left;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.aboutme ul li span {
    padding: 5px 0px;
    /*position: absolute;*/
    left: 110px;
}

.aboutme .skills {
    background: url('../../external.html?link=http://placehold.it/1280x1213&text=Skills+background+image');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
}


.table-of-list-wrapper {
    background: #fff;
    width: 100%;
    overflow: hidden;
}

.homepage-custom {
    overflow-x: hidden;
}

.aboutme .skills h3,
.aboutme .services h3 {
    margin-bottom: 0px;
    text-align: center;

}

.aboutme .skills h5 {
    margin-bottom: 20px;
}

.aboutme .skills span {
    font-size: 1.6em;
    color: #aaa;
    vertical-align: -20%;
    margin-right: 15px;
}

.aboutme .skills .skill {
    margin-bottom: 30px;
}

.aboutme .bar-graph {
    position: relative;
    margin-bottom: 25px;
}

.aboutme .bar-graph .main-layer {
    background-color: #ddd;
    height: 3px;
    position: relative;
    z-index: 1;
}

.aboutme .bar-graph .percent-layer {
    height: 3px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.aboutme .bar-graph .general_bg {
    background-color: #000;
}

.percent-1 {
    width: 60%;
}

.percent-2 {
    width: 80%;
}

.percent-3 {
    width: 40%;
}

.percent-4 {
    width: 75%;
}

.easyPieChart {
    position: relative;
    text-align: center;
}

.easyPieChart canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.pie-chart {
    margin-bottom: 10px;
    margin: 0px 15px 15px 0px;
    padding: 0px;
    float: left;
    position: relative;
}

.pie-chart .percentage,
.pie-chart .percentage-title {
    width: 100%;
    text-align: center;
    position: absolute;
}

.pie-chart .percentage {
    font-size: 2em;
    font-weight: 200;
    top: 5px;
}

.pie-chart .percentage-title {
    top: 10px;
}

.pie-chart .percentage {
    opacity: 0;
}

.pie-chart:hover .percentage-title {
    opacity: 0;
}

.pie-chart:hover .percentage {
    opacity: 1;
}

.experience {
    border: 0px;
    background: none;
    box-shadow: none;
    border-bottom: 1px dotted #bcbcbc;
    padding: 20px 0px;
}

.experience a {
    width: 100%;
    margin: 0px;
    border-radius: 0px;
    border: 0px;
    padding: 0px 20px;
}

.experience a:hover {
    background: none;
    color: #333;
    border: 0px;
}

.panel-group {
    border-top: 1px dotted #bcbcbc;
}

.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border: 0px;
    border-left: 1px dotted #bcbcbc;
    margin-left: 174px;
}

.experience .panel-body {
    padding: 20px;
}

.experience p {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0px;
}

.experience .panel-heading {
    padding: 0px;
}

.experience hr {
    margin: 0px 0px 10px 0px;
    border-color: #aaa;
    border-width: 2px;
    width: 25px;
}

.experience .panel-heading {
    background: none;
    border: 0px;
}

.experience .date {
    width: 150px;
}

.experience .job {
    border-left: 1px dotted #bcbcbc;
    padding-left: 20px;
}

.experience .arrow-down {
    float: right;
    vertical-align: middle;
    font-size: 2em;
    opacity: 0;
}




.experience a:hover .arrow-down {
    opacity: 1;
}

.testimonials {
    background: url('../../external.html?link=http://placehold.it/1280x853&text=Skills+background+image');
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    color: #fff;
    text-align: center;
    position: relative;
    padding: 0px;
}

.testimonials-over-image {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: 0.9;
    z-index: 1;
}

.testimonials-messages {
    padding: 100px 0px;
    z-index: 2;
    height: 330px;
}

.testimonials-messages .comment {
    font-weight: 700;
    font-size: 3em;
    margin: 0px;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 20px;
}

.testimonials-messages .comment-author {
    font-weight: 200;
    font-size: 1.4em;
    margin: 0px;
    line-height: 1.35;
    text-align: center;
}

.services {
    padding-bottom: 0px;
}

.services h4 {
    margin-bottom: 10px;
}

.services .media a {
    padding: 20px;
    margin-top: 0px;
    margin-right: 5px;
    font-size: 2em;
}

.services .media {
    margin-bottom: 30px;
}

.services .twitter-content {
    text-align: center;
}

.services .twitter-content a {
    font-weight: 700;
    padding: 0px;
    border: 0px;
    background: none;
}

.services .twitter-content a:hover {
    color: #000;
    background: none;
    text-decoration: underline;
}

.services .twitter-content .twitter-heading {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.75em;
    opacity: 0.5;
}

.services .twitter-content .twitter-heading span {
    display: inline-block;
    position: relative;
}

.services .twitter-content .twitter-heading span {
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 18px 20px;
}

.services .twitter-content .twitter-heading span i {
    color: #000;
}

.services .twitter-content .twitter-heading span::after,
.services .twitter-content .twitter-heading span::before {
    margin-top: 28px;
}

.services .twitter-content .twitter-heading span:before,
.services .twitter-content .twitter-heading span:after {
    content: "";
    position: absolute;
    height: 5px;
    border-top: 1px solid #ddd;
    top: 0;
    width: 350px;
}

.services .twitter-content .twitter-heading span:before {
    right: 100%;
    margin-right: 15px;
}

.services .twitter-content .twitter-heading span:after {
    left: 100%;
    margin-left: 15px;
}

.services #twitter-feed {
    height: 80px;
    line-height: 1em;
    overflow: hidden;
}

.services #twitter-feed a {
    margin: 0px;
    padding: 0px;
}


/* START  DETAIL PAGE 2019  */

.custom-container-70 {
    margin: 0 auto;
    max-width: 920px;
    display: block;
    /*border:1px solid #cf0000;*/
    height: auto;
    overflow: unset;
}

.custom-container-70 p:first-child {
    margin-top: 32px;
}

.strong-blue {
    color: #0068b1;
    font-weight: 600;
}

.set-relative {
    position: relative;
    /*min-height: 320px;*/
    min-height: 60.5vh;
    overflow: unset;
}

.cover-page {
    background: #f1f1f1;
    /*min-height: 850px;*/
    min-height: 300px;
    overflow-y: hidden !important;
    position: relative;
    /*background-size: cover;*/
    background-attachment: fixed!important;
/*    padding-bottom: 550px!important;
    overflow: unset!important;    */
    background-size: 100%!important;
}

.chapter-relative {
    height: 120vh;
}


.cover-page img {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 0px !important;
    height: unset!important;
}

.wrapper-cover {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 220px;
}

.title-cover-image {
    height: auto;
    position: absolute;
    bottom: 6.5%;
    right: 0;
    z-index: 3;
}

.right-title {
    right: 0;
}

.grey-box-content-1 {
    background: #e6e7e9;
    height: auto;
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 10px;
    padding-bottom: 18px;
    position: relative;
    /*border-left: 29px solid #fff;*/
    margin-top: 32px;
}

.ask-icon {
    position: absolute;
    top: -15px;
    left: -18px;
    width: 45px;
    height: 45px;
}

.grey-list-text {
    color: #43494c;
    font-size: 14px;
    font-family: "Myriad Pro", sans-serif;
    line-height: 19px;
    padding-left: 12px;
}

.grey-list-text li {
    list-style: disc !important;
    padding-left: 10px;
}

.span-line-blue-enter {
    background: #0068b1;
    width: 36px;
    height: 1.6px;
    display: block;
    margin-top: 8px;
    margin-bottom: 20px;
}

.grey-box-content-1 h5 {
    color: #0068b1;
    font-family: "Myriad Pro", sans-serif;
    line-height: normal;
    font-size: 16.5px;
    font-weight: 600;
    margin-top: 22px;
    margin-bottom: 8px;
}

.title-cover-image h2 {
    text-transform: unset !important;
    color: #fff;
    font-size: 48px;
    line-height: 52px;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 0.9px;
}


.content-detail-biofin {
    height: auto;
    width: 100%;
    /*padding:56px 0px;*/
    background: #fff;
    margin-top: 0px;
    padding-bottom: 64px;
}

.chapter-relative {
    height: 100vh;
    width: 100%;
    position: relative;
}

.two-col {
    height: auto;
    display: block;
    margin-top: 24px;
    margin-bottom: 30px;
    float: left;
}

.chapter-number {
    color: #fff;
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    margin-top: 15px;
    right: 96px;
}

.chapter-number h3 {
    font-size: 2.3em;
    font-weight: 200;
    letter-spacing: 0.025em;
    line-height: 2.1em;
    letter-spacing: 1px;
    color: #fff;
    font-family: "Myriad Pro", sans-serif;
}

.line-number {
    width: 370px;
    height: 1px;
    display: block;
    background: #f9f9f9;
    position: absolute;
    bottom: 0px;
    right: 0px;
    margin-top: 10px;
    margin-bottom: 5px;
}


.next-arrow-chapter {
    display: table;
    height: 100vh;
    position: relative;
    /*border:1px solid #cf0000;*/
    width: 64px;
    z-index: 2;
    float: right;
}

.position-unset {
    height: auto;
}

.position-unset img {
    position: unset;
}

.v-middle-arrow {
    width: 64px !important;
    height: 64px !important;
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: center !important;
}

.title-cover-chapter h2 {
    font-family: "Myriad Pro", sans-serif !important;
    font-size: 3.9em !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1em !important;
    text-transform: unset !important;
    color: #fff !important;
}

.arrow-chapter-link {
    z-index: 3;
    outline: none !important;
}

.arrow-chapter-link a img {
    margin-top: 36px;
}

.navbar-nav .dropdown-menu {
    position: static;
    float: none;
}


.content-with-list-number-abc {
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px !important;
    counter-reset: li;
    list-style-type: none;
    font-size: 22px;
    line-height: 24px;
    padding-left: 8px;
    margin-top: 32px;
}


ul.content-with-list-number-abc li {
    margin-bottom: 10px;
    position: relative;
    padding: 8px 12px 8px 48px;
}

ul.content-with-list-number-abc li::before {
    content: "";
    counter-increment: li;
    height: 32px;
    width: 32px;
    background: #0068b1;
    border-radius: 50%;
    color: #d85448;
    text-align: center;
    position: absolute;
    left: 0;
    top: 12px;
    font-family: 'Roboto', sans-serif;
}

ul.content-with-list-number-abc li.class-a {
    position: relative;
}

ul.content-with-list-number-abc li.class-a span {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 19px;
    left: 12px;
}

ul.content-with-list-number-abc li.class-b {
    position: relative;
}

ul.content-with-list-number-abc li.class-b span {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 12px;
}

ul.content-with-list-number-abc li.class-c {
    position: relative;
}

ul.content-with-list-number-abc li.class-c span {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 19px;
    left: 12px;
}

ul.content-with-list-number-abc li.class-d {
    position: relative;
}

ul.content-with-list-number-abc li.class-d span {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 20px;
    left: 11.5px;
}



.content-with-list-number-345 {
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px !important;
    counter-reset: li;
    list-style-type: none;
    font-size: 22px;
    line-height: 24px;
    padding-left: 8px;
    padding-right: 10px;
    margin-top: 32px;
}


ul.content-with-list-number-345 li {
    margin-bottom: 10px;
    position: relative;
    padding: 8px 12px 8px 48px;
}

.content-with-list-number-345 li p {
    margin-top: 0px;
}

ul.content-with-list-number-345 li::before {
    content: "";
    counter-increment: li;
    height: 32px;
    width: 32px;
    background: #fff;
    border: 2px solid #0068b1;
    border-radius: 50%;
    color: #d85448;
    text-align: center;
    position: absolute;
    left: 0;
    top: 12px;
    font-family: 'Roboto', sans-serif;
}

ul.content-with-list-number-345 li.class-3 {
    position: relative;
}

ul.content-with-list-number-345 li.class-3 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 19px;
    left: 12px;
}

ul.content-with-list-number-345 li.class-4 {
    position: relative;
}

ul.content-with-list-number-345 li.class-4 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 20px;
    left: 12px;
}

ul.content-with-list-number-345 li.class-5 {
    position: relative;
}

ul.content-with-list-number-345 li.class-5 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 19px;
    left: 12px;
}

ul.content-with-list-number-345 li.class-6 {
    position: relative;
}

ul.content-with-list-number-345 li.class-6 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 20px;
    left: 11.5px;
}

ul.content-with-list-number-345 li.class-7 {
    position: relative;
}

ul.content-with-list-number-345 li.class-7 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 20px;
    left: 11.5px;
}

ul.content-with-list-number-345 li.class-8 {
    position: relative;
}

ul.content-with-list-number-345 li.class-8 span {
    font-size: 14.5px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 20px;
    left: 11.5px;
}

.list-content-table {
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px !important;
    counter-reset: li;
    list-style-type: none;
}

ul.list-content-table li.class-3 {
    position: relative;
}

ul.list-content-table li.class-3 span {
    font-size: 14.2px;
    font-weight: 600;
    color: #0068b1;
    position: absolute;
    top: 7px;
    left: -30px;
}


ul.list-content-table li::before {
    content: "" !important;
    counter-increment: li !important;
    height: 28px !important;
    width: 28px !important;
    background: #fff;
    border: 2px solid #0068b1 !important;
    border-radius: 50% !important;
    color: #d85448 !important;
    text-align: center !important;
    position: absolute !important;
    left: -40px !important;
    top: 0.65px !important;
    line-height: 38px !important;
}

ul.list-content-table li {
    margin-bottom: 6px;
    position: relative;
    padding: 5px 12px 8px 4px;
}

.list-content-table p {
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: -1px !important;
}

ol.oredered-list-content-table {
    height: auto;
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: -1px !important;
    list-style-type: decimal;
    padding-left: 14px;
}

ol.oredered-list-content-table li {
    list-style-type: decimal;
    padding-left: 8px;
    font-weight: bold;
}

ol.oredered-list-content-table p {
    height: auto;
    color: #43494c !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 20px !important;
    margin-top: -1px !important;

}

.text-center-img {
    width: 100%;
    display: block;
    text-align: center !important;
    float: left;
}

.text-center-img p {
    text-align: center !important;
    float: left;
    margin-top: 6px;
    margin-bottom: 4px;
    display: block;
    width: 100%;
}

.text-center-img p img {
    text-align: center !important;
    width: 48px;
    float: none;
}

.three-col-content-text {
    text-align: center !important;
    height: auto;
    width: 100%;
    display: block;
    position: relative;
    float: left;
    margin-top: 45px;
}

.three-col-content-text p {
    text-align: center !important;
    float: left;
    margin-bottom: 10px;
    margin-top: 5px;
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 14.5px !important;
    line-height: 23px !important;
    margin-top: 10px !important;
}

.three-col-content-text h5 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15.6px !important;
    color: #0068b1 !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 5px !important;
}

.three-col-content-text span.line-strip-right {
    width: 4px;
    height: 24px;
    background: #0068b1;
    position: absolute;
    right: 0px;
    top: 76px;
}

.content-with-list-color-black {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px;
    letter-spacing: -0.05em;
    letter-spacing: 0.0099em;
    margin: 0px;
    margin-top: 20px;
    margin-bottom: 48px;
    text-transform: none !important;
    line-height: 31.9px;
    color: #43494c;
    text-align: left;
    padding-left: 15px;

}

.content-with-list-color-black li {
    list-style: disc !important;
    padding-left: 10px;
}

.content-with-list-color-black li p {
    margin-top: 2px !important;
    color: color: #43494c !important;
    font-weight: 400 !important;
}

/* LIST NUMBER CIRCLE*/

ul.content-with-list-number-circle {
    counter-reset: li;
    list-style-type: none;
    font-size: 15.6px;
    line-height: 28px;
    padding-left: 8px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    color: #43494c;
    margin-top: 18px;
}

ul.content-with-list-number-circle li {
    position: relative;
    padding: 8px 12px 8px 46px;
}

ul.content-with-list-number-circle li::before {
    content: counter(li);
    counter-increment: li;
    height: 32px;
    width: 32px;
    background: transparent;
    border: 2px solid #0068b1;
    border-radius: 50%;
    color: #0068b1;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 9px;
    font-weight: 600;
}

.content-with-list-number-circle li p {
    margin-top: 0px !important;
}

/* COVER CHAPTER  */



/* LIST WITH CIRCLE BLUE BG WHITE COLOR */


ul.content-with-list-number-circle-blue-white {
    counter-reset: li;
    list-style-type: none;
    font-size: 15.6px;
    line-height: 28px;
    padding-left: 8px;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    color: #0068b1;
    margin-top: 18px;
}

ul.content-with-list-number-circle-blue-white li {
    position: relative;
    padding: 8px 12px 8px 46px;
}

ul.content-with-list-number-circle-blue-white li::before {
    content: counter(li);
    counter-increment: li;
    height: 32px;
    width: 32px;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 9px;
    font-weight: 600;
}

.content-with-list-number-circle-blue-white li p {
    margin-top: 0px !important;
    color: #fff;
}

/* LIST WITH CIRCLE BLUE BG WHITE COLOR */

.title-with-logo {
    float: left;
    width: 186px;
    height: auto;
    margin-right: 20px;
    margin-left: -12px;
}

.title-with-logo img {
    margin-top: 36px !important;
    margin-bottom: 0px !important;
}

.line-un-logo {
    width: 1.5px;
    height: 90px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: -38px;
    left: -1px;
}

.righ-caption-with-logo {
    float: left;
    width: 75%;
    height: auto;
    color: #fff;
    font-family: "Open Sans", Myriad Pro;
    font-weight: 400;
    font-size: 15.6px;
    line-height: 31px;
}

.righ-caption-with-logo p {
    color: #fff;
    font-family: "Open Sans", Myriad Pro;
    font-weight: 400;
    font-size: 15.6px;
    line-height: 28px !important;
}

.wrap-timeline {
    width: 100%;
    height: auto;
    clear: left;
    border-left: 1.5px solid #0068b1;
    position: relative;
}

.wrap-timeline span.white-balok {
    width: 45px;
    height: 36px;
    background: #fff;
    position: absolute;
    left: -22px;
    top: -24.5px;
    z-index: 2;
}

.title-cover-chapter-image {
    height: auto;
    position: absolute;
    top: 4%;
    /*right: 0;*/
    left: 0%;
    z-index: 2;
}

.card-body-white {
    padding-top: 0px;
}

.cardboard-last-white {
    height: auto;
}

.cardboard-last-white::after {
    content: " ";
    background: #fff;
    width: 3px;
    height: 100%;
    position: absolute;
    left: -2px;
    top: 90%;
    z-index: 1;
}

.balok {
    width: 10px;
    height: 10px;
    background: #0068b1;
    position: absolute;
    left: -25px;
    top: 12px;
    z-index: 2;
}

.title-cover-chapter {
    height: auto;
    color: #fff;
    padding-right: 96px;
}

.title-cover-chapter h2 {
    font-family: "Myriad Pro", sans-serif !important;
    font-size: 2em !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1em !important;
    text-transform: unset !important;
    margin-left: 40px;
}

.opening-chapter {
    margin-top: -32px;
}

.isi-chapter {
    padding-top: 15px;
}

.isi-chapter ul.inner {}

.isi-chapter > ul.inner {
    padding-left: 0px;
}

.isi-chapter ul.inner li {}

.isi-chapter ul.inner li a:link,
.isi-chapter ul.inner li a:visited,
.isi-chapter ul.inner li a:hover {
    color: white;
    font-size: 15px;
    font-weight: 400;
    line-height: 25px;
}

.isi-chapter ul.inner li a:hover {
    text-decoration: underline;
}

a.tombol-cover,
a.tombol-cover:hover,
a.tombol-cover:visited {
    color: white;
    display: block;
    border: 1px solid #fff;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 400;
    font-size: 16px;
    padding: 10px 20px;
    text-transform: uppercase;
}


.title-my-sidebar {
    height: auto;
    color: #fff !important;
    padding-left: 20px;
    padding-bottom: 10px;
}

.title-my-sidebar h5 {
    color: #fff !important;
    letter-spacing: 2.1px;
    text-transform: uppercase;
    font-family: "Myriad Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.content-publication-detail h2:first-child {
    margin-top: 20px;
}

.title-with-icon {
    height: auto;
    position: relative;
}

.title-with-icon p.line-before-paragraph {
    margin-top: 0px;
    padding-left: 36px;
    font-weight: 600;
    color: #43494c;
    font-size: 16.5px;
}

.title-with-icon small.line-small {
    position: absolute;
    height: 2px !important;
    background: #0067B1 !important;
    top: 45px;
    width: 400px;
    left: 0px;
}

.title-with-icon i {
    left: 0px;
    top: -5px;
}

.title-with-icon i img {
    width: 28px;
    line-height: 16px;
    margin-top: 4px;
    margin-bottom: 0px;
    position: absolute;
    left: -4px;
}

.title-with-icon span.strip-bold {
    position: absolute;
    top: 40px;
    left: 0px;
    background: #0067B1;
    width: 45px;
    height: 6px;
}

.wrap-super-custom-list {
    height: auto;
    padding-top: 36px;
    margin-top: 8px;
    margin-left: 10px;
    border-left: 1.5px solid #0067B1 !important;
    padding-left: 18px;
}

.wrap-super-custom-list p {
    margin-top: 0px !important;
}



.wrap-super-custom-list h5 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600 !important;
    font-size: 15.6px !important;
    color: #0067B1 !important;
    position: relative !important;
    line-height: 21.5px !important;
}

.wrap-super-custom-list h5 span.dot-tl {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    left: -23px !important;
    top: 4px !important;
    background: #0067B1 !important;
    z-index: 2;
}

.super-custom-list {
    padding-left: 14px;
    padding-right: 18px;
}

.super-custom-list li {
    list-style: disc !important;
    padding-left: 8px;
}

.super-custom-list li p {
    margin-top: 0px !important;
}

.list-style-type-roman {
    padding-left: 14px;
    padding-right: 18px;
}

.list-style-type-roman li {
    list-style-type: upper-roman !important;
    padding-left: 8px;
    font-weight: 400;
}

.list-style-type-roman li p {
    margin-top: 0px !important;
}

.list-style-arrow {
    padding-left: 14px;
    padding-right: 18px;
}

.list-style-arrow li {
    list-style-image: url('../svg/list-style-arrow.svg') !important;
}

.super-custom-list-lower-alpha {
    height: auto;
    list-style: lower-alpha !important;
    font-weight: 400 !important;
}

.super-custom-list-lower-alpha li {
    list-style: lower-alpha !important;
    font-weight: 400 !important;
}

.title-level-case {
    position: relative;
}

.title-level-case h3 {
    font-weight: 600 !important;
    font-size: 16.5px !important;
    color: #0067B1 !important;
    position: relative !important;
    line-height: 22.5px !important;
}

.title-level-case span.title-level-case-line {
    position: absolute;
    height: 2px !important;
    right: 0px !important;
    top: 14px !important;
    background: #0067B1 !important;
}

.title-level-case span.title-level-case-line-27 {
    width: 27.5% !important;
}

.title-level-case span.title-level-case-line-83 {
    width: 83.5% !important;
}

.table {
    font-weight: 400 !important;
    font-family: "Open Sans", Myriad Pro;
}

.table-color-black tr td {
    color: #43494c;
    font-size: 14px !important;
}

.three-col-content-text-left {
    font-weight: 400;
    font-size: 14.5px !important;
    line-height: 23px !important;
    margin-top: 0px !important;
    margin-bottom: 0px;
    width: 100% !important;
    ;
    display: block !important;
    ;
    clear: left !important;
    float: left !important;
}


.three-col-content-text-left .img-64 {
    text-align: center !important;
    height: auto;
    width: 60px;
    height: auto;
    position: relative;
    float: left;
    margin-top: 4px;
    float: left;
    margin-right: 10px !important;
}

.three-col-content-text-left .img-48 {
    text-align: center !important;
    height: auto;
    width: 48px;
    height: auto;
    position: relative;
    float: left;
    margin-top: 20px;
    float: left;
    margin-right: 10px !important;
}

.add-bb-white {
    border-bottom: 1.5px solid #ffff;
    padding-bottom: 24px;
    position: relative;
    width: 80% !important;
    margin-left: 15px;
}

.judul-konten-icon {
    height: auto;
    padding-top: 64px;
    padding-bottom: 10px;
    color: #fff !important;
    background: #0067b1;
    position: relative;
    overflow: unset !important;
}

.judul-konten-icon img {
    position: absolute;
    left: 42%;
    top: -24px;
}

.judul-konten-icon h4 {
    text-align: center !important;
    ;
    text-transform: unset !important;
    ;
    color: #fff !important;
    font-family: "Myriad Pro", sans-serif !important;
    ;
    font-weight: 600 !important;
    ;
    font-size: 1.85em !important;
    ;
    letter-spacing: 0.01em !important;
    ;
}


.span-strip-bottom-white {
    width: 28px;
    height: 5px;
    background: #fff;
    position: absolute;
    bottom: 0px;
    left: 0px;
    margin-top: 15px;
}

.wrap-text-three-col-fr {
    text-align: left !important;
    float: left !important;
    margin-bottom: 10px;
    margin-top: 5px;
    width: 73% !important;
    font-weight: 400;
}

.wrap-text-three-col-fr p {
    text-align: left !important;
    margin-bottom: 10px;
    margin-top: 5px;
    font-weight: 400;
    font-size: 14.5px !important;
    line-height: 23px !important;
    margin-top: 10px !important;
}

.wrap-text-three-col-fr-100 {
    text-align: left !important;
    float: left !important;
    margin-bottom: 10px;
    margin-top: 5px;
    width: 99% !important;
    font-weight: 400;
}

.wrap-text-three-col-fr-100 p {
    text-align: left !important;
    margin-bottom: 10px;
    margin-top: 5px;
    font-weight: 400;
    font-size: 14.5px !important;
    line-height: 23px !important;
    margin-top: 10px !important;
}

.wrap-text-three-col-fr-100 p img {
    margin-right: 12px !important;
    margin-bottom: 10px !important
}

.add-rp-border {
    border-right: 2px solid #0068b1;
}

/* COVER CHAPTER  */

.wrap-super-custom-list-white {
    height: auto;
    /*    padding-top: 36px;
    margin-top: 8px;*/
    margin-left: 22px;
    border-left: 1.5px solid #fff !important;
    padding-left: 32px;
    color: #fff;
    float: left;
    width: 100%;
    display: block;
}

.wrap-super-custom-list-white p {
    color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    overflow: unset;
}

.wrap-super-custom-list-white span.dot-tl-white {
    position: absolute !important;
    width: 10px !important;
    height: 10px !important;
    left: -37px !important;
    top: 11px !important;
    background: #fff !important;
    z-index: 2;
}


.sub-heading-bg-number {
    height: auto;
    overflow: hidden;
    position: relative;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px;
    line-height: 31.9px;
    color: #43494c;
    padding-left: 10px;
    overflow: unset;
}

.sub-heading-bg-number p {
    z-index: 2;
    position: relative;
}

.sub-heading-bg-number span.bg-number-1 {
    font-size: 48px;
    color: #dcddde;
    position: absolute;
    top: 30px;
    left: -8px;
    z-index: 1;
    font-weight: 600;
    font-style: italic;
}

.sub-heading-bg-number span.bg-number-2 {
    font-size: 48px;
    color: #dcddde;
    position: absolute;
    top: 30px;
    left: -4px;
    z-index: 1;
    font-weight: 600;
    font-style: italic;
}

.sub-heading-bg-number span.bg-number-3 {
    font-size: 48px;
    color: #dcddde;
    position: absolute;
    top: 30px;
    left: -4px;
    z-index: 1;
    font-weight: 600;
    font-style: italic;
}


.col-two-half-1{
    width: 20%;
    height: auto;
    flex: 20%!important;;
    padding-right: 10px !important;
    max-width: 20%!important;
    float: left;
}

.circle--with-span-1 {
    width: 6px;
    height: 6px;
    font-size: 12px !important;
    line-height: 19px;
    color: #0068b1;
    background: #fff;
    border: 2.5px solid #0068b1;
    border-radius: 20px;
    padding: 3px 8px;
    margin-right: 6px !important;
}

.circle--with-span-2 {
    width: 6px;
    height: 6px;
    font-size: 12px !important;
    line-height: 19px;
    color: #0068b1;
    background: #fff;
    border: 2.5px solid #0068b1;
    border-radius: 20px;
    padding: 3px 8px;
    margin-right: 6px !important;
    margin-left: 4px !important;
}

.circle--with-span-3 {
    width: 6px;
    height: 6px;
    font-size: 12px !important;
    line-height: 19px;
    color: #0068b1;
    background: #fff;
    border: 2.5px solid #0068b1;
    border-radius: 20px;
    padding: 3px 8px;
    margin-right: 6px !important;
    margin-left: 4px !important;
}


.figure-title-blue {
    font-family: "Open Sans", Myriad Pro;
    color: #0068b1 !important;
    font-size: 15.6px;
    font-weight: 400 !important;
}

.two-column {
    width: 100%;
    height: auto;
    overflow: hidden;
    display: block;
    float: left;
}

.grey-background-card {
    background: #e6e7e9;
    height: auto;
    overflow: hidden;
    display: block;
}

.grey-background-card h4 {
    text-align: center;
    text-transform: unset;
    color: #0068b1;
    font-family: "Myriad Pro", sans-serif;
    font-weight: 600;
    font-size: 1.85em;
    letter-spacing: 0.01em;
}

.two-column {
    width: 100%;
    height: auto;
    overflow: hidden;
    float: left;
    margin-top: 50px;
}

.p-left-0 {
    padding-left: 0px;
}

.p-right-0 {
    padding-right: 0px;
}

.content-publication-detail {
    overflow: hidden;
    width: 100%;
    margin-top: 132px;
}

.content-publication-detail-24 {
    margin-top: 36px;
}

.content-publication-detail-24 h2 {
    font-family: 'Myriad Pro', sans-serif;
    font-weight: 600;
    font-size: 1.85em;
    letter-spacing: 0.01em;
    margin: 0px;
    margin-top: 0px;
    text-transform: unset !important;
    line-height: 1.25em;
    color: #0068b1;
    text-align: left;
    margin-top: 35px;
}

.presiden-frame {
    width: 90%;
    display: block;
    float: right;
    margin-top: 24px;
    padding-right: 6px;
}

.presiden-column {
    text-align: right !important;
    height: auto;
}

.presiden-column h5 {
    text-align: right !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.4em !important;
    color: #fff !important;
    margin-top: 10px !important;
    margin-bottom: 2px !important;
}

.presiden-column p {
    text-align: right !important;

}

.judul-konten-center-h4 {
    height: auto;
    display: block;
    width: 100%;
    color: #fff !important;
}

.judul-konten-center-h4 h4 {
    font-family: 'Myriad Pro', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.85em !important;
    line-height: 1.05em;
    margin-bottom: 0px !important;
    text-transform: normal !important;
    color: #fff !important;
    text-align: center !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 0px;
    padding-top: 34px;
    padding-bottom: 36px;
}


.circle-people {
    width: 135px;
    height: 135px;
    overflow: hidden;
    border-radius: 50%;
    float: left;
}

.right-text-champion {
    width: 83%;
    padding-left: 32px;
    float: right;
}

.label-with-border-blue {
    height: auto;
    display: block;
    position: relative;
    margin-top: 50px;
}

.label-with-border-blue p.paragraph-bg-white {
    background: #fff;
    padding: 2px 18px 2px 0px;
    z-index: 2;
    position: relative;
    display: unset;
    color: #0068b1 !important;
    font-family: "Open Sans", sans-serif !important;
    font-weight: 600;
    font-size: 1.25em !important;
}

.span-liner-line-full {
    position: absolute;
    width: 100%;
    display: block;
    height: 3px;
    background: #0068b1;
    top: 49%;
    z-index: 1;
}

.three-col-content-text span.line-strip-right-top-0 {
    width: 4px;
    height: 24px;
    background: #0068b1;
    position: absolute;
    right: 0px;
    top: 0px;
}

.sub-heading-bg-number span.bg-number-top-0 {
    font-size: 48px;
    color: #dcddde;
    position: absolute;
    top: -9px;
    left: -8px;
    z-index: 1;
    font-weight: 600;
    font-style: italic;
}

.v-midle-icon {
    display: table;
    float: left;
    width: 100%;
    margin-top: 45px;
}

.v-midle-icon img {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 32px;
    height: auto;
    margin-bottom: 0px;
    margin-right: 20px;
    margin-top: -4px;
}

.v-midle-icon p {
    display: table-cell !important;
    vertical-align: middle !important;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px;
    letter-spacing: 0.01em !important;
    line-height: 1.4em !important;
    color: #0068b1 !important;
}

.wrap-three-column-content {
    width: 100%;
    display: block;
    height: auto;
    float: left;
}

.content-publication-detail-cover {
    overflow: hidden;
    width: 100%;
    margin-top: 76px;
}

.table-border-blues th {
    border-top: 2.5px solid #0068b1;
    border-bottom: 2px solid #0068b1;
}


.table-border-blues td {
    border-top: 1.5px solid #0068b1;
}

.white-color-table {
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 1.1em !important;
}

.white-color-table tr td {
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 1.03em !important;
}

.media-left-cirle {
    width: 84px;
    height: auto;
    float: left;
    clear: both;
    position: relative;
    min-height: 160px;
}

.media-left-cirle img {
    position: unset;
    margin-bottom: 15px;
    top: 0px !important;
    left: 0px !important;
}

.media-body-circle {
    float: left;
    line-height: 31.9px;
    color: #43494c;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px;
    letter-spacing: 0.0099em;
    padding-left: 24px;
    position: relative;
    padding-bottom: 15px;
    width: 80%;
}

.media-body-circle h5 {
    line-height: 31.9px;
    color: #43494c !important;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400;
    font-size: 16.5px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.media-body-circle p {
    margin-top: 15px !important;
    line-height: 29px !important;
}

.span-liner-circle {
    position: absolute;
    bottom: -10px;
    left: 24px;
    width: 60px;
    height: 3px;
}

.media-full {
    width: 100%;
    display: block;
    height: auto;
    overflow: hidden;
    padding-bottom: 24px;
    padding-top: 15px;
    float: left;
}

.greycard-wrapper {
    background: #f5f5f5;
    height: auto;
    width: 100%;
    display: block;
    overflow: hidden;
}

.card-body-text h6 {
    font-size: 1.2em;
    line-height: normal;
    text-align: left;
    font-weight: 600;
    color: #43494c;
}

.card-body-text-bg-blue {
    padding: 52px 24px 36px 24px;
    position: relative;
    background: #0068b1 !important;
}

.blue-wrapper {
    background: #0068b1 !important;
    height: auto;
    width: 100%;
    display: block;
    overflow: hidden;
}

.media-body-circle-color-white {
    float: left;
    line-height: 31.9px;
    color: #43494c;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15.6px;
    letter-spacing: 0.0099em;
    padding-left: 24px;
    position: relative;
    padding-bottom: 15px;
    width: 89.5%;
}

.media-body-circle-color-white h5 {
    line-height: 31.9px;
    color: #fff !important;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400;
    font-size: 16.5px !important;
    display: block !important;
    margin-bottom: 10px !important;
}

.media-body-circle-color-white p {
    margin-top: 15px !important;
    color: #fff !important;
    line-height: 29px !important;
    margin-top: 0px !important;
}

.card-body-text-bg-blue {}

.title-cardboard-eith-icon-left {
    padding-left: 36px;
    padding-top: 6px;
    min-height: 30px;
    width: 80%;
}

.title-cardboard-eith-icon-left h5 {
    font-family: 'Myriad Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.85em !important;
    color: #fff !important;
}

.icon-key-message {
    min-height: 32px;
    width: 84px;
    padding-left: 15px;
    margin-bottom: 15px;
}

.icon-key-message img {
    margin-bottom: 0px !important;
}

.title-h2 {
    width: 100%;
    display: block;
    margin-top: 48px;
    clear: left;
}

.title-h2 h2 {
    font-family: 'Myriad Pro', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.85em !important;
    line-height: 1.05em;
    font-family: 'Open Sans', sans-serif !important;
    margin-bottom: 10px !important;
    color: #0068b1 !important;
}

.title-h2 h2 span {
    font-family: 'Myriad Pro', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.05em;
    font-family: 'Open Sans', sans-serif !important;
    margin-bottom: 10px !important;
    color: #0068b1 !important;
}

.foot-note-bottom-ol {
    height: auto;
    width: 100%;
    display: block;
    clear: left;
}

.foot-note-bottom-ol ol {
    margin-top: 10px;
    padding-left: 18px;
}

.foot-note-bottom-ol ol li {
    list-style: decimal !important;
    font-weight: 600;
    color: #43494c;
    padding-left: 11px;
    padding-right: 11px;
}

.foot-note-bottom-ol ol li p {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    /*font-size: 1.1em!important;*/
    font-size: 15.2px;
    letter-spacing: -0.05em;
    letter-spacing: 0.004em;
    margin-top: 10px !important;
    margin-bottom: 4px;
    text-transform: none !important;
    line-height: 1.45em;
    color: #43494c !important;
    text-align: left;
}

.foot-note-bottom-ol ol li p span {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1.1em;
    letter-spacing: -0.05em;
    letter-spacing: 0.004em;
    margin-top: 10px !important;
    margin-bottom: 4px;
    text-transform: none !important;
    line-height: 1.45em;
    color: #43494c !important;
    text-align: left;
}

.set-delay-0koma3s {
    animation-delay: 0.3s !important;
}

.set-delay-0koma6s {
    animation-delay: 0.5s !important;
}

.set-delay-0koma8s {
    animation-delay: 0.7s !important;
}



  .wrapper-ask-icon-question{
    width: 100%;
    display: block;
    height: auto;
    clear: both;
    margin-top: 14px;
  }

.left-icon-ask-32{
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 20px;
}  

.right-text-question-transparent{
  float: left;
  width: 93%;
}

.right-text-question-transparent h6{
  font-weight: 600;
  margin-bottom: 0px;
  line-height: normal;
  color: #43494c!important;
}

.right-text-question-transparent p{
  margin-top: 4px!important;
  margin-bottom: 10px!important;
}


/* END  DETAIL PAGE 2019  */

/*------------------------------------------------------------------
8. WORK
-------------------------------------------------------------------*/

.work h2 {
    margin-top: 0px;
}

.work h3 {
    margin-bottom: 0px;
    font-weight: 200;
}

.work h2,
.work h3 {
    text-align: center;
}

#filters {
    text-align: center;
    margin-bottom: 40px;
}

#filters button {
    padding: 7px 15px;
    border: 1px solid #ddd;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    background: none;
    font-size: 0.9em;
    margin: 0px 3px;
}

#filters button:hover,
#filters button.checked {
    background: #000;
    color: #fff;
}

#gallery {
    margin-bottom: 20px;
    display: block;
}

#gallery:after {
    content: '';
    display: block;
    clear: both;
}

.item,
#gallery .grid-sizer {
    width: 50%;
    /* juse a lil under  47 */
    margin: 0px;
    float: left;
    border-radius: 0px;
    clear: none;
    overflow: hidden;

}

#gallery .grid-sizer {
    position: absolute;
}

.item,
#gallery .grid-sizer {
    width: 50%;
    position: relative;
}

.item.w2 {
    width: 100%;
}


.item img {
    max-width: 105%;
}

.item:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.item .item-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
}

.item:hover .item-content {
    opacity: 1;
}

.item .item-content a {
    border-radius: 0px;
    border: 0px;
    width: 100%;
    height: 100%;
    padding: 30px;
    background: rgba(0, 0, 0, 0.5)
}

.item:hover .item-content a {
    border-radius: 0px;
    border: 0px;
}

.item .item-content a h4,
.item .item-content a p {
    color: #fff;
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
}

.item .item-content a h4 {
    font-size: 1.5em;
    margin-bottom: 10px;
    text-align: left;
}

.item .item-content a p {
    font-size: 1.1em;
    line-height: 1em;
    text-align: left;
}

.item:hover .item-content a h4,
.item:hover .item-content a p {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/*------------------------------------------------------------------
	8.1 WORK CONTENT
	-------------------------------------------------------------------*/
.single-work section {
    padding-top: 0px;
    position: relative;
}

.work-container {
    position: relative;
}

.work-container button {
    position: absolute;
    top: 10px;
    right: 0px;
    width: 50px;
    height: 50px;
    border: 1px solid #333;
    border-radius: 50%;
    background: none;
    font-size: 1.7em;
    z-index: 100;
}

.work-container button:hover {
    background: #333;
    color: #fff;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

#work-content h4 {
    text-align: left;
}

#work-content img {
    margin-bottom: 20px;
}

#work-content .tags li {
    display: inline-block;
    background: #eee;
    margin-right: 10px;
    margin-top: 10px;
    padding: 5px 10px;
    text-transform: uppercase;
}

#work-content .video-content {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#work-content .video-content iframe {
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 20px;
    border: 0px;
    min-height: 450px;
}

/*------------------------------------------------------------------
9. BLOG
-------------------------------------------------------------------*/

.blog section {
    padding-bottom: 0px;
}

.blog h2 {
    margin-top: 0px;
}

.blog h3 {
    margin-bottom: 0px;
    font-weight: 200;
}

.blog h2,
.blog h3 {
    text-align: center;
}

.blog .post {
    margin-bottom: 50px;
    position: relative;
}

.blog .post .post-left {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 65px;
}

.blog .post .post-right {
    margin-left: 60px;
}

.blog .post .post-image {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    max-height: 210px;
    overflow: hidden;
}

.blog .post .post-image iframe {
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: -6px;
    border: 0px;
}

.blog .post .post-quote {
    color: #fff;
    padding: 24px;
    text-align: left;
    background: url('../quote.html') #000 top left no-repeat;
}

.blog .post-right .post-quote h3 {
    text-align: left;
    margin-top: 0px;
    font-size: 1.4em;
    color: #ddd;
}

.blog .post .post-quote p {
    margin-top: 20px;
}

.blog .post .post-image .carousel {
    max-height: 210px;
}

.blog .post .post-image .carousel-indicators {
    margin-left: 0px;
    left: 25px;
    float: left;
    text-align: left;
    bottom: 0px;
}

.blog .carousel-inner > .item {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

.blog .carousel-inner > .item:hover img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.blog .post-left .post-date {
    width: 65px;
    background: #000;
    float: left;
    text-align: center;
    display: block;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding: 15px 0px;
}

.blog .post-left .post-date .month {
    font-size: 0.6em;
    clear: both;
    line-height: 1.7em;
    padding-top: 5px;
    margin-top: 5px;
    border-top: 1px solid #fff;
}

.blog .post-left .post-date .day {
    letter-spacing: 1.5px;
    line-height: 1.5em;
}

.blog .post-left .post-title h5 {
    font-size: 1.2em;
    line-height: 1.3em;
    margin-top: 10px;
    margin-bottom: 5px;
}

.blog .post-left a {
    display: block;
    width: 65px;
    background: #555;
    color: #fff;
    float: left;
    border-radius: 0px;
    margin-top: 5px;
    padding: 13px 5px;
    text-align: center;
    font-size: 1.5em;
    border: 0px;
}

.blog .post-left a:hover {
    background: #000;
    border: 0px;
}

.blog .post-content em {
    color: #aaa;
}

.blog .post-right .info-post {
    font-size: 0.8em;
    font-weight: 200;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.blog .post-right .post-image {
    margin-bottom: 20px;
}

.blog .post-right .info-post a {
    padding: 0px;
    border: 0px;
}

.blog .post-right .info-post a:hover {
    background: #fff;
    color: #000;
    text-decoration: underline;
}

.blog .post-right a.read-more {
    margin-top: 10px;
}



/*------------------------------------------------------------------
10. CONTACT
-------------------------------------------------------------------*/

.contact {
    text-align: center;
    color: #fff;
}

.contact h2 {
    margin-top: 0px;
}

.contact h3 {
    margin-bottom: 0px;
    font-weight: 200;
}

input.form-control,
textarea.form-control {
    background: none;
    background-color: none;
    box-shadow: none;
    border: 0px;
    border-bottom: 1px solid rgba(256, 256, 256, 0.25);
    border-radius: 0px;
    color: rgba(256, 256, 256, 0.75);
    padding: 20px 30px
}

input.form-control:focus,
input.form-control:active,
textarea.form-control:focus,
textarea.form-control:active {
    outline: none;
    border: none;
    border-bottom: 2px solid #DEDEDE;
    color: #fff;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}

input.form-control:-moz-placeholder,
textarea.form-control:-moz-placeholder {
    color: white;
    opacity: 0.7;
}

input.form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
    color: white;
    opacity: 0.7;
}

input.form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {
    color: white;
    opacity: 0.7;
}

input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
    color: white;
    opacity: 0.7;
}

.send-div {
    margin-top: 40px;
}

.send-div button {
    border-color: rgba(256, 256, 256, 0.25);
    background: none;
    padding: 10px 45px;
    color: #fff;
    text-shadow: none;
    text-transform: uppercase;
}

.send-div button:hover {
    border-color: #fff;
    background: #fff;
    color: #000;
}

.success-message,
.error-message {
    height: 30px;
}

#map {
    height: 500px;
}

#map .gm-style-cc {
    display: none;
}

#map a {
    display: none !important;
}

.contact footer hr {
    margin-top: 0px;
}

#cd-zoom-in,
#cd-zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 30px;
    opacity: .7;
    font-size: 1.3em
}

#cd-zoom-in span,
#cd-zoom-out span {
    width: 100%;
    float: left;
    margin-top: 7px;
}

.no-touch #cd-zoom-in:hover,
.no-touch #cd-zoom-out:hover {
    opacity: 1;
}

#cd-zoom-in:hover,
#cd-zoom-out:hover {
    opacity: 1;
}

#cd-zoom-in {
    background-position: 50% 0;
    margin-top: 400px;
    margin-bottom: 1px;
}

#cd-zoom-out {
    background-position: 50% -32px;
}

#cd-zoom-in,
#cd-zoom-out {
    background-color: #000;
}

/*------------------------------------------------------------------
11. FOOTER
-------------------------------------------------------------------*/

footer hr {
    opacity: 0.2;
    margin: 50px 0px;
}

footer.darkFooter hr {
    border-color: #000;
}

footer.lightFooter hr {
    border-color: #fff;
}

footer {
    text-align: center;
    bottom: 0px;
    width: 100%;
    /*padding-bottom: 20px;*/
    position: relative;
}

footer a {
    border: 0px;
}

.info {
    font-size: 2em;
}

footer.lightFooter,
footer.lightFooter a {
    color: #fff;
}

footer.darkFooter,
footer.darkFooter a {
    color: #000;
}

footer .footer-social {
    margin: 20px 0px;
}

footer .footer-social li {
    display: inline-block;
    margin: 0px 10px;
}

footer .footer-social li a {
    padding: 15px;
    font-size: 1.5em;
    opacity: 0.5;
    border-radius: 4px;
    border: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
}

footer .footer-social li a:hover {
    opacity: 0.8;
    color: #fff;
    border: 0px;
}

footer .footer-social a.facebook:hover {
    background: #3b5998;
}

footer .footer-social a.twitter:hover {
    background: #00aced;
}

footer .footer-social a.instagram:hover {
    background: #3f729b;
}

footer .footer-social a.pinterest:hover {
    background: #cb2027;
}

footer .footer-social a.googleplus:hover {
    background: #dd4b39;
}

footer .copyright a {
    border: 0px;
    padding: 0px;
}

footer a.toTop {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 2.5em;
    z-index: 100;
    padding: 10px;
    border-radius: 50%;
    border: 0px;
}

footer.lightFooter a.toTop {
    color: #ddd;
}

footer.darkFooter a.toTop {
    color: #aaa;
}

footer a:hover.toTop {
    border: 0px;
}

footer.lightFooter a:hover.toTop {
    color: #fff;
    background: #ed3c43;
}

footer.darkFooter a:hover.toTop {
    color: #fff;
    background: #ed3c43;
}

footer .copyright a:hover {
    background: none;
    border: 0px;
}

footer.darkFooter .copyright a:hover {
    color: #000;
}

.grade-transparent {
    -webkit-box-shadow: inset -8px -193px 77px 0px rgba(0, 0, 0, 0.59);
    -moz-box-shadow: inset -8px -193px 77px 0px rgba(0, 0, 0, 0.59);
    box-shadow: inset -8px -193px 77px 0px rgba(0, 0, 0, 0.59);
    z-index: 1;
    position: absolute;
    bottom: -32px;
    height: 100%;
    width: 100%;
    display: block;
}

.last-of-page {
    width: 100%;
    height: 64px;
    display: block;
    background: #fff;
}



    .blue-icon-center-circle{
        background: #0768b1;
        padding-top: 68px;
        padding-bottom: 20px;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 48px;
        color: #fff!important;
        position: relative;
        overflow: unset;
        clear: both;
        float: left;
    }

    .bolam-center{
        position: absolute;
        z-index: 2;
        left: 45%;
        width: 74px;
        top:-36px;
    }

    .center-title-blue-two-line{
        color: #fff;
    }

    .left-text-two-col-white{
        color: #fff!important;
        padding-left: 15px;
        height: 95%;
        border-right: 2px solid #fff;
        padding-right: 15px;
        
    }

    .left-text-two-col-white p{
        color: #fff!important;
        line-height: 30.9px!important;
        margin-top: 15px!important;
    }

    .left-text-two-col-white p img{
        margin-bottom: 6px !important;
    }

    .right-text-two-col-white{
        color: #fff!important;
        padding-right: 15px;

    }

    .right-text-two-col-white p{
        color: #fff!important;
        line-height: 30.9px!important;
        margin-top: 15px!important
    }

    .right-text-two-col-white p img{
        margin-bottom: 6px !important;
    }   


    .center-title-blue-two-line h3{
        font-weight: 600 !important;
        font-size: 1.85em !important;
        line-height: 1.05em;
        font-family: 'Open Sans', sans-serif !important;
        margin-bottom: 10px !important; 
        color:#fff!important;   
        text-transform: unset!important;
        text-align: center!important;
        letter-spacing: 0.45px!important;
        margin-top: 10px !important;
        margin-bottom: 32px !important;       
    }

    .center-title-blue-two-line h4{
        font-weight: 300 !important;
        font-size: 1.85em !important;
        line-height: 1.05em;
        font-family: 'Open Sans', sans-serif !important;
        margin-bottom: 10px !important; 
        color:#fff!important;   
        text-transform: unset!important;
        text-align: center!important;
        letter-spacing: 0.32px!important;
    }



/* MEDIA QUERY 2019 */

/* MACBOOK 1680*/

/*MacBook Pro 2016 Resolution. 2560 x 1600 PX*/

@media only screen and (device-width : 2560px) and (device-height: 1600px) {

}

@media only screen and (device-width : 1680px) and (device-height: 1050px) {
    .set-relative {
        position: relative;
        /* min-height: 320px; */
        min-height: 49.5vh;
    }

}


@media only screen and (device-width : 1280px) and (device-height: 800px) {
    .set-relative {
        position: relative;
        /* min-height: 320px; */
        min-height: 47.5vh;
    }

}

@media only screen and (device-width : 1920px) and (device-height: 1080px) {
    .cover-page {
        background: #f1f1f1;
        min-height: 400px!important;
        overflow: hidden;
    }

    .cover-page img {
        position: absolute;
        top: -40px;
    }

    .title-cover-image {
        top: 46vh;
    }

    .set-relative {
    position: relative;
    min-height: 51vh!important;
    }

    .title-cover-image {
        top: 41vh;
    }    
   
}

@media (min-width: 1441px) and (max-width: 1920px) { 

    .cover-page {
        background: #f1f1f1;
        min-height: 400px!important;
        overflow: hidden;
    }

    body {
        font-size: 1em!important;
    }

}


@media only screen and (device-width : 1920px) and (device-height: 1080px) {

}


@media only screen and (device-width : 1680px) and (device-height: 1050px) {}



/*MacBook Pro 2016 Resolution. 2560 x 1600 PX*/


@media only screen and (device-width : 1440px) and (device-height: 900px) {
    .set-relative {
        min-height: 50vh;
    }

    .title-cover-image {
        bottom: 14.5%;
    }

    .cover-page {
        background: #f1f1f1;
        min-height: 380px;
        overflow: hidden;
    }    

    .grade-transparent {
        -webkit-box-shadow: inset -8px -103px 77px 0px rgba(0, 0, 0, 0.59);
        -moz-box-shadow: inset -8px -103px 77px 0px rgba(0, 0, 0, 0.59);
        box-shadow: inset -8px -103px 77px 0px rgba(0, 0, 0, 0.59);
    }

}

@media (min-width: 1367px) and (max-width: 1440px) { 

    .cover-page {
        background: #f1f1f1;
        min-height: 320px!important;
        overflow: hidden;
    }

    .set-relative {
    position: relative;
    min-height: 44vh;
    }
    
    .wrapper-cover {
        padding-bottom: 10px;
    }

}


@media only screen and (device-width : 1280px) and (device-height: 800px) {}

@media screen and (min-width: 1440px) {
    .wrapper-cover {
    padding-bottom: 10px;
    }
}


@media screen and (max-width: 1200px) {

    .wrapper-cover {
        padding-bottom: 10px;
    }

    .cover-page {
            background-size: cover!important;
    }    


}


/* IPAD */


@media only screen and (device-width : 1024px) and (device-height: 1366px) {
    .set-relative {
    min-height: 52.5vh;
    }
}

@media only screen and (device-width : 1024px) and (device-height: 768px) {

    .khusus-hompepage {
        padding: 0px;
        background-size: 125% !important;
    }   
    
    .table-of-list {
        padding-top: 10px;

    } 

    .cover-page {
        background: #f1f1f1;
        min-height: 210px!important;
        overflow: hidden;
    }    

    .cover-page img {
        position: absolute;
        top: 102px;
    }

    .set-relative {
    min-height: 52.5vh;
    }    

    .paging-footer-fixed {
    background: -webkit-linear-gradient(left, rgb(24, 103, 177) 0%, rgb(24, 103, 177) 69%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 86%, rgb(12, 86, 151) 100%)!important;
    background: -o-linear-gradient(left, rgb(24, 103, 177) 0%, rgb(24, 103, 177) 69%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 86%, rgb(12, 86, 151) 100%)!important;
    background: linear-gradient(to right, rgb(24, 103, 177) 0%, rgb(24, 103, 177) 69%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 76%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 77%, rgb(12, 86, 151) 86%, rgb(12, 86, 151) 100%)!important;        
    }

    .pagging-list-numb {
        flex: 53%;
        max-width: 53%;        
    }

    .grid {
        min-height: 115px!important;
    }

    


}

@media only screen and (device-width : 1024px) and (device-height: 640px) {}


@media only screen and (device-width : 768px) and (device-height: 1024px) {
    .european-union {
        padding-right: 10px;
        padding-left: 10px;
    }    

    .cover-page{
        min-height: 240px!important;
    }

    .title-cover-image h2 {
    text-transform: unset !important;
    color: #fff;
    font-size: 45px;
    }

    .cover-page img {
        position: absolute;
        top: 100px;
    }

    .set-relative {
        position: relative;
        min-height: 320px;
        min-height: 33vh;
    }

    .navbar-brand-biofin img {
        width: 164px;
    }

    .link-top-logo {
        margin-right: 24px;
    }    

    .navbar-settingan{
        display: none!important;
    }

    .wrapper-for-table-of-content {
        padding-left: 6px;
    }

    .grid {
        min-height: 775px!important;
    }

    .left-table-content-footer {
    width: 65.4%!important;
    }
}



@media only screen and (device-width : 1366px) and (device-height: 1024px) {
    .set-relative {
    min-height: 40.5vh;
    }
}

@media only screen and (device-width : 1024px) and (device-height: 1366px) {
    .set-relative {
    min-height: 23.8vh;
    }
}


/* IPAD */





@media screen and (max-width:992px) {

    .european-union {
        padding-right: 10px!important;
        padding-left: 10px!important;
    }


    .collapse:not(.show) {
        display: none;
    }


    .navbar-brand-biofin img{
        display: none;
    }

    .navbar-brand-biofin{
        width: 215px!important;
        background: url(../png/logo-mobile-version.png);
        background-size: 100%;
        height: 70px!important;
        background-repeat: no-repeat;
        background-position-y: 10px;
    }

    #collapsingNavbar22 {
        height: 98vh;
        overflow-y: scroll !important;
        margin-left: -24px!important;
        margin-right: -24px!important;
    }

    #collapsingNavbar2 {
        height: 98vh;
        overflow-y: scroll !important;
        margin-left: -24px!important;
        margin-right: -24px!important;
    }


    .navbar-nav .dropdown-menu {
        width: 106%!important;
        padding-left: 180px!important;
        padding-right: 160px!important;
    }

    .caption-case-edited {
        padding-right: 45px!important;
    }

    .khusus-hompepage {
        padding: 0px;
        background-size: 124% !important;
        background-position-y: 95px;
        background-position-x: -5px;
    }    

    .arrow-v-middle {
        top: 86px!important;
        right: 0px!important;
    }    

    .navbar-settingan{
        display: none!important;
    }

    .right-official-logo {
        overflow: hidden;
        padding-left: 10px!important;
        padding-right: 10px!important;
    }

    .navbar-settingan{
        display: none!important;
    }

#collapsingNavbar22 {
    height: 97.5vh;
}

#collapsingNavbar2 {
    height: 97.5vh;
}

}

@media screen and (max-width: 768px) {
    .custom-container-70 {
        max-width: 90.8%;
    }

    .media-left-cirle {
        width: 70px;
    }

    .media-body-circle {
        width: 79.2%;
    }

    .circle-people {
        margin-bottom: 36px;
    }

    .right-text-champion {
        width: 100%;
        padding-left: 4px;
        float: right;
    }

    .left-text-two-col-white{
        border-right: 0px!important;
        padding-left: 0px;
        margin-bottom: 40px;
        margin-top: 20px;
    }

    .right-text-two-col-white{

    }

    .bolam-center {
        left: 40%;
    }

    .col-two-half-1{
        width: 100%!important;
        max-width: 100%!important;
        flex: 100%!important;
        float: left;
        margin-bottom: 32px!important;
    }


    .caption-case-edited {
        margin-top: 150px!important;
    }

    .arrow-v-middle {
        top:-64px;
        right: 36px;
    }    

    .arrow-v-middle a {
     width: 82px;
    }   

    .caption-case-edited h4 {
        text-align: right;
        font-size: 48px; 
    }

    .khusus-hompepage {
        padding: 0px;
        background-size: 170% !important;
        background-position-y: 95px;
        background-position-x: -5px;        
    }    

    .caption-case-edited {
        padding-right: 36px;
    }

    .introduction-content-container {
        padding: 5px 24px 36px 15px!important;
    }

    .title-h2 h2 {
        line-height: 1.35em!important;
    }

    #main-2019{
        background: #fff!important;
    }

    .isi-chapter {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    }

    .title-cover-chapter {
    height: auto;
    color: #fff;
    padding-right: 10px;
    padding-left: 15px;
    }

    .wrapper-cover {
        margin-bottom: 0px;
    }

    #my-sidebar-detail {
        padding-top: 136px!important;
    }

    .title-cover-image {
        bottom: 8.5%;
    }

    .title-cover-chapter h2 {
    font-family: "Myriad Pro", sans-serif !important;
    font-size: 1.75em !important;
    }

    .flex-nowrap li{
        display: none!important;
    }


    .gorightitle {
    float: right;
    padding-right: 32px;
    }

    .icon-key-message {
        min-height: 32px;
        width: 52px;
        margin-top: 10px;
    }

    .figure-title-blue{
        line-height: 1.6em!important;
    } 


    .media-left-cirle{
        width: 52px!important;
    }

    .media-body-circle-color-white {
        width: 80%;
        padding-left: 20px;
    }

    .caption-case-edited a {
        font-size: 1.12em;   
        background: #0f1923;
    }

    .pagging-list-numb{
    display: none;
    }

    .right-official-logo {
    overflow: hidden;
    padding-left: 30px;
    padding-right: 30px;
    }   

    .wrapper-for-table-of-content {
        overflow: hidden;
        padding-right: 0px; 
        padding-bottom: 32px;
        padding-left: 15px;
    }    

    .wrapper-for-table-of-content h4 {
        margin-left: 10px;
    }

    ul.subtree li li a {
        padding-left: 24px;
    }


    ul.subtree li li li a {
        padding-left: 40px;
    }


    .right-socmed {
        padding-left: 5px!important;
        padding-right: 5px!important;
        width: 45%!important;
        padding-bottom: 9px!important;
    }    

    .footer-button-fixed a span {
        top: 2px !important;
        position: relative!important;
        font-size: 14px!important;
    }

    .footer-button-fixed li a {
        padding-left: 8px!important;
        padding-right: 8px!important;      
        right: -10px !important;
        position: relative;  
    }

    #collapsingNavbar2{
        height: 98vh;
        overflow-y: scroll!important;
        margin-left: -16px;
        margin-right: -16px;
    }

    .second-new-nav-center{
        background: #fff!important;
        height: 78.5vh !important;
        overflow-y: scroll;

    }

    .second-new-nav-center li a {
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .second-new-nav-center li:first-child a {
        margin-top: px!important;
    }

    #collapsingNavbar22{
        height: 90vh;
        overflow-y: scroll!important;
        margin-left: -16px;
        margin-right: -16px;
    }

    .new-nav-center{
        background: #fff!important;
        height: 100vh !important;        
    }

    .new-nav-center li:first-child a {
        margin-top: 15px!important;
    }    

    .new-nav-center li a{
        color: #102d4c;
        padding-bottom: 12px;
        padding-top: 12px;        
    }

    .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,104,177, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important;
    }    

    .set-relative {
        position: relative;
        min-height: 30vh!important;
    }

    .cover-page {
        background: #f1f1f1;
        min-height: 230px;
    }    

    .cover-page img {
        top: 96px;
        max-width: 124%!important;
    }

    .title-cover-image h2 {
        text-transform: unset !important;
        color: #fff;
        font-size: 28px;
        line-height: 32px;
    }

    .grade-transparent {
        bottom: -194px;
    }

    .navbar-brand-biofin img{
        display: none;
    }

    .navbar-brand-biofin{
        width: 185px;
        background: url(../png/logo-mobile-version.png);
        background-size: 100%;
        height: 75px!important;
        background-repeat: no-repeat;
        background-position-y: 10px;
    }

    .navbar-nav .dropdown-menu {
        width: 100%;
        padding-left: 15px!important;
        padding-right: 15px!important;
    }

    .grid {
        min-height: 340px!important;
        height: auto!important;
    }

    .circle-pager li > a {
        padding: 6px 11px !important;
    }

  


}

@media screen and (max-width: 480px) {

    .navbar-brand-biofin img{
        display: none;
    }

    .navbar-brand-biofin{
        width: 185px!important;
        background: url(../png/logo-mobile-version.png);
        background-size: 100%;
        height: 75px!important;
        background-repeat: no-repeat;
        background-position-y: 10px;
    }



    .pagging-list-numb {
        width: 100%!important;
    }

    .table-of-content-footer {
        padding-left: 15px;   
    }

    .table-of-content-footer h5 {
        color: #fff;
        font-size: 13px;
    }

    .custom-container-70 {
        max-width: 90.8%;
    }

    .media-left-cirle {
        width: 64px;
    }

    .media-body-circle {
        width: 81%;
    }

    .circle-people {
        margin-bottom: 36px;
    }

    .right-text-champion {
        width: 100%;
        padding-left: 4px;
        float: right;
    }

    .navbar-nav .dropdown-menu {
        width: 106%;
        padding-left: 10px!important;
        padding-right: 10px!important;
        padding-top: 5px;

    }

.arrow-v-middle {
    top: -68px !important;
    right: 24px !important;
}

.caption-case-edited {
    height: 435px!important;
}

/*.dropdown{
    height: 400px;
    overflow-y: scroll;
}
*/

}

@media screen and (max-width: 320px) {

.caption-case-edited {
    height: 390px!important;
}    

#collapsingNavbar2 {
    height: 74.5vh;
    overflow-y: scroll !important;
    margin-left: -16px;
    margin-right: -16px;
    padding-bottom: 150px;
}

.second-new-nav-center li a {
    padding-bottom: 12px;
    padding-top: 12px;
}

.second-new-nav-center li a {
    font-size: 1.10em;
    padding-bottom: 10px;
    padding-top: 10px;

}


.second-new-nav-center {
    padding-bottom: 0px;
}

.new-nav-center li a {
    font-size: 1.10em;
}

#collapsingNavbar22 {
    height: 74.5vh;
    margin-right: -27.5px !important;
}

#collapsingNavbar2 {
    height: 74.5vh;
    margin-right: -27.5px !important;

}

.caption-case-edited p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 1.5em;
    }

.caption-case-edited {
    margin-top: 139px !important;
    height: 409px;
}

.arrow-v-middle {
    top: -59px !important;
}

.caption-case-edited h4 {
    text-align: right;
    font-size: 40px;
}

.arrow-v-middle a {
    width: 74px;
}
    

}


/* MEDIA QUERY 2019 */

/**
 * Simple fade transition,
 */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* hover icon overlay */
.popup-iframe {
    background-color: black;
    display: block;
}

.popup-iframe:hover {
    cursor: zoom-in;
    background-color: black;
}

.popup-iframe:hover img {
    opacity: 0.5;
}