.wgbc-banner-sub {

    --main-bg-color: rgba(19, 43, 69, .1);
    --border-color: rgba(19, 43, 69, .5);
    --color: rgba(19, 43, 69, 1);
    --btn-background: rgba(19, 43, 69, 1);
    --btn-color: #fff;
    border: 1px solid var( --border-color );
    border-radius: .25rem;
    padding: 0;
    background: var( --main-bg-color );
    color: var( --color );
}
.wgbccopform {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: relative;
}
.wgbccopform .wgbcoverlay {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(84, 100, 114, .01);
    color: #fc0;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}
.wgbccopform .wgbcoverlay.show {
    display: flex;
}
.wgbccopform .wgbcoverlay span {
    display: inline-block;
    padding: .5rem 1rem;
    background-color: #000;
    color: #fc0;
}
.wgbccopform label {
    display: block;
    margin-top: 1rem;
}
.wgbccopform input{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color );
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid  var( --border-color );
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box;
    min-height: calc(1.5em + (1rem + 2px));
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}
.wgbccopform select {

    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color );
    background-color: #fff;
    background-image: url(https://worldgbc.org/wp-content/plugins/wgbccop/public/css/arrow_down.svg);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 24px 24px;
    border: 1px solid var( --border-color );
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
}
.wgbccopform small {
    font-size: .7rem;
    color: var(--color );
    display: block;
}
.wgbc-banner-sub .btnx {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color );
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box;

    background-color: var( --btn-background );
    color: #fff !important;

    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
    margin-top: 1rem;
}
.wgbccopform p.agree {
    font-size: small;
    color: var(--color );
    margin: 0 1rem 0 0;
}

/*ppp form*/
.wgbccop-ppp-form {
    display: flex;
    justify-content: center;
    --main-bg-color: rgba(19, 43, 69, .1);
    --border-color: rgba(19, 43, 69, .5);
    --color: rgba(19, 43, 69, 1);
    --btn-background: rgba(19, 43, 69, 1);
    --btn-color: #fff;
}
.wgbccop-ppp form.post-password-form {
    border: 1px solid var(--border-color);
    padding: 1rem;
    background-color: var( --main-bg-color );
    border-radius: .25rem;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    color: var( --color );
}
.wgbccop-ppp form.post-password-form input[name="post_password"]{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color );
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var( --border-color );
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box;
    min-height: calc(1.5em + (1rem + 2px));
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
    width: 100%;
}
.wgbccop-ppp form.post-password-form input[type="submit"]{
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color );
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box;

    background-color: var( --btn-background );
    color: #fff;

    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.wgbccop-social {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
    display: none;
}
.wgbccop-social .row{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.wgbccop-social .row .col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.wgbccop-social .row .col-6 div {
    padding: 1rem;
}
.wgbccop-social .img-fluid {
    max-width: 100%;
    height: auto;
}

/*counter */
.wgbccop-counter {
    --main-bg-color: rgba(19, 43, 69, .1);
    --border-color: rgba(19, 43, 69, .5);
    --color: rgba(19, 43, 69, 1);
    --btn-background: rgba(19, 43, 69, 1);
    --btn-color: #fff;
    border: 1px solid var( --border-color );
    background: var( --main-bg-color ) url( https://worldgbc.org/wp-content/plugins/wgbccop/public/img/WORLDGBC_COP28_Campaign_Landscape_Hero_STATIC_BG5d.jpg) bottom center no-repeat;
    background-size: cover;
    color: var( --color );
    padding: 1rem;
    border-radius: .25rem;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.wgbccop-counter .left {
    width: 100%;
    height: 100%;
    
}
.wgbccop-counter .right {
    width: 100%;
    height: 100%;
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: column;
}
#wgbccop28subs {
    font-size: 3.5rem;
    display: block;
    text-align: center;
    font-weight: bold;
    color:#fff;
    margin: 20px 0;
}
.wgbccop-counter .right .txt {
    margin-left: 1em;
    font-size: 1.7rem;
    font-weight: bold;
    display: block;
    text-align: center;
    margin: 20px 0;
}
.wgbccop-counter .right .txt span {
    display: block;
    margin: .15rem;
}
.wgbccop-counter .act {
    display: flex;
    justify-content: space-around
}
.wgbccop-counter .act a {
    display: inline-block;
    padding: 1rem 1rem;
    background-color: rgba(255,255,255,1 );
    border: #ec5b4a solid 3px;
    text-decoration: none;
    color: #03354c !important;
    border-radius: .25rem;
    font-size: 1.35rem;
    font-weight: bold;
}
@media (min-width: 992px) {
    .wgbccop-counter {
        height: auto;
        flex-direction: row;
        align-items: center
    }
    .wgbccop-counter .left {
        width: 45%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .wgbccop-counter .right {
        width: 55%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }
    #wgbccop28subs {
        font-size: 8.5rem;
        letter-spacing: -5px;
        margin-right: 10px;
    }
    .wgbccop-counter .right .txt {
        text-align: left;
    }
    .wgbccop-counter .act a {
        margin-left: 10px;
    }

}




/*list*/

:root {
    --cardmenu-gap: 1rem;
    --cardmenu-columns: 1;
}
@media (min-width: 992px) {
    :root {
        --cardmenu-columns: 3;
    }
}
.card-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.card-menu-item-rand {
    --cardmenu-columns: 2;
    width: calc((100% / var(--cardmenu-columns)) - (var(--cardmenu-gap) * (var(--cardmenu-columns) - 1)) / var(--cardmenu-columns));
}

@media (min-width: 992px) {
    .card-menu-item-rand {
        --cardmenu-columns: 7;
        width: calc((100% / var(--cardmenu-columns)) - (var(--cardmenu-gap) * (var(--cardmenu-columns) - 1)) / var(--cardmenu-columns));
    }
    
}

.card-menu-item {
    width: calc((100% / var(--cardmenu-columns)) - (var(--cardmenu-gap) * (var(--cardmenu-columns) - 1)) / var(--cardmenu-columns));
}

.card-menu-item .card, .card-menu-item-rand .card {
    height: 100%;
}
.card {

    --main-bg-color: rgba(19, 43, 69, .1);
    --border-color: rgba(19, 43, 69, .5);
    --color: rgba(19, 43, 69, 1);
    --btn-background: rgba(19, 43, 69, 1);
    --btn-color: #fff;

    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: var(--border-color);
    --bs-card-border-radius: 0.375rem;
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(0.375rem - 1px);
    --bs-card-cap-padding-y: 0.75rem;
    --bs-card-cap-padding-x: 1.5rem;
    --bs-card-cap-bg: rgba(0, 0, 0, 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #ffffff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
    color: var( --color );
}
.card .rowx{
    display: flex;
    flex-wrap: wrap;
}
.card .rowx .col-4{
    width: 100px;
    min-width: 100px;
    margin-right: 10px;
}
.card .rowx .col-8 {
    width: calc( 100% - 110px);
}
.card .logo, .card .no-logo {
    min-height: 100px;
    height: 100px;
    margin: 1rem 0 0 1rem;
}
.card .no-logo {
    background-image: url( 'https://worldgbc.org/wp-content/plugins/wgbccop/public/css/no-photo.svg' );
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
}
.card .logo img{
    border-bottom-left-radius: var(--bs-border-radius)!important;
    border-top-left-radius: var(--bs-border-radius)!important;
}
.card .card-body {
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    height: 100%;
}
.card .card-title {
    font-size: large;
    font-weight: bold;
}

.fadeOut {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 300ms, opacity 300ms;
  }
.fadeIn {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s linear 0s, opacity 300ms;
}

.btn-emily {
    color: #fff !important;
    background-color: #132b45;
    border-color: #132b45;
}