/*----------------------------------------*/
/* Custom CSS
/*----------------------------------------*/

@font-face {
    font-family: avenirBook;
    src: url('../../../../Assets/fonts/avenir_lt_45_book.otf') format('embedded-opentype'), url('../../../../Assets/fonts/avenir_lt_45_book.woff') format('woff'), url('../../../../Assets/fonts/avenir_lt_45_book.ttf') format('truetype');
}

#ContentProfilePicture {
    position: relative;
}

.bell-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.profilepicture-hover-zoom i {
    position: absolute;
    left: 66px;
    top: -52px;
}
.profilepicture-hover-zoom img {
    transform-origin: 50% 65%;
    transition: transform 1s, filter .4s ease-in-out;
}

.profilepicture-hover-zoom:hover img {
    filter: brightness(100%);
    transform: scale(1.10);
    box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.2);
}

.profiledetails-hover-zoom {
    transform-origin: 50% 65%;
    transition: transform 1s, filter .4s ease-in-out;
}

    .profiledetails-hover-zoom:hover {
        filter: brightness(100%);
        transform: scale(1.10);
    }

.clickableDiv {
    position: absolute;
    width: 110px;
    height: 40px;
}

.clickableDivSubmit {
    position: absolute;
    right: 35%;
    width: 110px;
    height: 40px;
}

.clickableDivDraft {
    position: absolute;
    width: 151px;
    height: 40px;
    left: 36%;
}

.bell {
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    display: block;
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotateZ(0);
    }

    1% {
        -webkit-transform: rotateZ(30deg);
    }

    3% {
        -webkit-transform: rotateZ(-28deg);
    }

    5% {
        -webkit-transform: rotateZ(34deg);
    }

    7% {
        -webkit-transform: rotateZ(-32deg);
    }

    9% {
        -webkit-transform: rotateZ(30deg);
    }

    11% {
        -webkit-transform: rotateZ(-28deg);
    }

    13% {
        -webkit-transform: rotateZ(26deg);
    }

    15% {
        -webkit-transform: rotateZ(-24deg);
    }

    17% {
        -webkit-transform: rotateZ(22deg);
    }

    19% {
        -webkit-transform: rotateZ(-20deg);
    }

    21% {
        -webkit-transform: rotateZ(18deg);
    }

    23% {
        -webkit-transform: rotateZ(-16deg);
    }

    25% {
        -webkit-transform: rotateZ(14deg);
    }

    27% {
        -webkit-transform: rotateZ(-12deg);
    }

    29% {
        -webkit-transform: rotateZ(10deg);
    }

    31% {
        -webkit-transform: rotateZ(-8deg);
    }

    33% {
        -webkit-transform: rotateZ(6deg);
    }

    35% {
        -webkit-transform: rotateZ(-4deg);
    }

    37% {
        -webkit-transform: rotateZ(2deg);
    }

    39% {
        -webkit-transform: rotateZ(-1deg);
    }

    41% {
        -webkit-transform: rotateZ(1deg);
    }

    43% {
        -webkit-transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: rotate(0);
    }

    1% {
        -moz-transform: rotate(30deg);
    }

    3% {
        -moz-transform: rotate(-28deg);
    }

    5% {
        -moz-transform: rotate(34deg);
    }

    7% {
        -moz-transform: rotate(-32deg);
    }

    9% {
        -moz-transform: rotate(30deg);
    }

    11% {
        -moz-transform: rotate(-28deg);
    }

    13% {
        -moz-transform: rotate(26deg);
    }

    15% {
        -moz-transform: rotate(-24deg);
    }

    17% {
        -moz-transform: rotate(22deg);
    }

    19% {
        -moz-transform: rotate(-20deg);
    }

    21% {
        -moz-transform: rotate(18deg);
    }

    23% {
        -moz-transform: rotate(-16deg);
    }

    25% {
        -moz-transform: rotate(14deg);
    }

    27% {
        -moz-transform: rotate(-12deg);
    }

    29% {
        -moz-transform: rotate(10deg);
    }

    31% {
        -moz-transform: rotate(-8deg);
    }

    33% {
        -moz-transform: rotate(6deg);
    }

    35% {
        -moz-transform: rotate(-4deg);
    }

    37% {
        -moz-transform: rotate(2deg);
    }

    39% {
        -moz-transform: rotate(-1deg);
    }

    41% {
        -moz-transform: rotate(1deg);
    }

    43% {
        -moz-transform: rotate(0);
    }

    100% {
        -moz-transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        transform: rotate(0);
    }

    1% {
        transform: rotate(30deg);
    }

    3% {
        transform: rotate(-28deg);
    }

    5% {
        transform: rotate(34deg);
    }

    7% {
        transform: rotate(-32deg);
    }

    9% {
        transform: rotate(30deg);
    }

    11% {
        transform: rotate(-28deg);
    }

    13% {
        transform: rotate(26deg);
    }

    15% {
        transform: rotate(-24deg);
    }

    17% {
        transform: rotate(22deg);
    }

    19% {
        transform: rotate(-20deg);
    }

    21% {
        transform: rotate(18deg);
    }

    23% {
        transform: rotate(-16deg);
    }

    25% {
        transform: rotate(14deg);
    }

    27% {
        transform: rotate(-12deg);
    }

    29% {
        transform: rotate(10deg);
    }

    31% {
        transform: rotate(-8deg);
    }

    33% {
        transform: rotate(6deg);
    }

    35% {
        transform: rotate(-4deg);
    }

    37% {
        transform: rotate(2deg);
    }

    39% {
        transform: rotate(-1deg);
    }

    41% {
        transform: rotate(1deg);
    }

    43% {
        transform: rotate(0);
    }

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

.arrow-up-popover {
    border: solid #FFD700;
    border-width: 0 2px 2px 0;
    padding: 5px;
    transform: rotate( -135deg );
    -webkit-transform: rotate( -135deg );
    left: 2px;
    position: absolute;
    display: block;
    top: 1px;
}

#NewFunctionality-Profile {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 200px;
    border-color: #FFD700;
    display: none;
    box-shadow: 3px 4px 5px 0px rgb(0 0 0 / 40%);
}

.ambassadorButton:hover {
    text-decoration: underline;
}

.ambassadorLink {
    color: #58595B;
}

a.ambassadorLink:hover {
    color: #58595B;
    text-decoration: underline;
}

.ambassadorpicture img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover;
    border-radius: 100%;
    margin: 0px 30px;
}

.profileUserPicture img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover;
    border-radius: 100%;
    margin: 0px 30px;
}

.unsubscription-newsletter .modal-header, .unsubscription-monthly-donation .modal-header {
    border-bottom: transparent;
}

.error-block p {
    color: #ca151a;
}

button:disabled {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

span.infostatus.ng-scope {
    font-size: 10px;
    font-weight: normal;
    background-color: lightgray;
    padding: 3px;
    border-radius: 20px;
}

span.infostatus {
    font-size: 10px;
    font-weight: normal;
    background-color: lightgray;
    padding: 3px;
    border-radius: 20px;
}

.detailproject .project-detail-navigation {
    font-size: 30px;
}

    .detailproject .project-detail-navigation .nav {
        position: fixed;
        bottom: 40%;
        z-index: 999999;
    }

        .detailproject .project-detail-navigation .nav.left {
            left: 0;
        }

        .detailproject .project-detail-navigation .nav.right {
            right: 0;
        }

    .detailproject .project-detail-navigation .nav-button {
        color: white;
        padding: 10px;
        cursor: pointer;
    }

        .detailproject .project-detail-navigation .nav-button.green {
            background-color: #ABD500;
        }

        .detailproject .project-detail-navigation .nav-button.yellow {
            background-color: #FFD700;
        }

.cardActive span.highlightedText {
    background-color: #FFD700;
}

.cardComplete span.highlightedText {
    background-color: #DF3730;
}

.image-profile-transition {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    /*background-color: white;*/
}

    .image-profile-transition.square:hover {
        border-radius: 10%;
    }

    .image-profile-transition .middle {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
        cursor: pointer;
    }

    .image-profile-transition:hover img {
        opacity: 0.3;
    }

    .image-profile-transition:hover .middle {
        opacity: 1;
    }

    .image-profile-transition .text {
        background-color: #262E38;
        color: white;
        font-size: 12px;
        padding: 10px 15px;
        width: 100%;
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

.btnBackToTop {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 0px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50px;
}

    .btnBackToTop::after {
        content: "\f077";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #FFD700;
    }

.sfPageEditor .header-section {
    position: relative !important;
}

.pwh-progressbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    z-index: 9999;
}

    .pwh-progressbar.ion-show {
        opacity: 1;
        visibility: visible;
    }

    .pwh-progressbar.ion-hide {
        opacity: 0;
        visibility: hidden;
    }

@keyframes LoadingBar {
    0% {
        transform: translateX(-102%)
    }

    45% {
        transform: translateX(0)
    }

    55% {
        transform: translateX(0)
    }

    90% {
        transform: translateX(102%)
    }

    100% {
        transform: translateX(102%)
    }
}

.loading-bar {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    overflow-x: hidden;
    background-color: #DF3730; /* use px color $primary-light */
}

    .loading-bar:before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 102%;
        background-color: white; /* use px color $primary-default */
        animation: LoadingBar 1.5s cubic-bezier(.5,.01,.51,1) infinite;
    }

:root {
    --avatar-size: 40px;
    /* change this value anything, e.g., 100px, 10rem, etc. */
}

.circle {
    background: linear-gradient(#C4c4c4, #8d8d8d);
    border-radius: 50%;
    height: var(--avatar-size);
    text-align: center;
    width: var(--avatar-size);
}

.initials {
    font-size: calc(var(--avatar-size) / 2) !important; /* 50% of parent */
    line-height: 1;
    position: relative;
    top: calc(var(--avatar-size) / 4); /* 25% of parent */
    text-transform: uppercase;
    color: white !important;
    font-weight: bold;
}

li .circle {
    margin: 0 30px;
    top: -5px;
    position: relative;
}

.cardbutton .dropdown-item {
    font-size: small;
}

.logo img {
    height: 90px;
    width: auto;
}

.edit-profile-upload-picture-button {
}

.remove-table {
    border: 0px !important;
    padding-bottom: 0px !important;
    padding-top: 2px !important;
}

th.remove-table label {
    margin-bottom: 0px !important;
    font-weight: normal !important;
}


/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/ html,
body {
    height: 100%;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111111;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    color: #58595B;
    font-weight: 400;
    margin: 0px;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a {
    text-decoration: none;
}

    a:hover,
    a:focus {
        text-decoration: none;
        outline: none;
        color: #fff;
    }

ul,
ol {
    padding: 0;
    margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
.sectionheight {
    margin-top: 78px;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

    .section-title h2 {
        font-size: 45px;
        color: #ffffff;
        font-weight: 700;
        margin-top: 14px;
    }

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 100px;
    padding-bottom: 100px;
}

.spad-2 {
    padding-top: 50px;
    padding-bottom: 70px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

.redtext {
    color: #DF3730 !important;
}

.purpletext {
    color: #812570 !important;
}

.filtersearchbg {
    background-color: #ffffff;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 78px;
    z-index: 10;
    padding-top: 25px;
}

/* buttons */

.primary-btn {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #FFD700;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: transparent;
    color: #262E38;
    transition-duration: 0.4s;
}

    .primary-btn:hover {
        transform: scale(1.1);
        transition-duration: 0.4s;
    }

.primary-btn-full {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 25px;
    text-transform: uppercase;
    border: 2px solid #FFD700;
    background-color: #FFD700;
    color: #262E38;
    transition-duration: 0.4s;
}

    .primary-btn-full:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

.cyan-btn-full {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 25px;
    text-transform: uppercase;
    border: 2px solid #4B8F8C;
    background-color: #4B8F8C;
    color: #262E38;
    transition-duration: 0.4s;
}

    .cyan-btn-full:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

.purple-btn-full {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 25px;
    text-transform: uppercase;
    border: 2px solid #812570;
    background-color: #812570;
    color: #262E38;
    transition-duration: 0.4s;
}

    .purple-btn-full:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

.second-btn {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #ABD500;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: transparent;
    color: #262E38;
    transition-duration: 0.4s;
}

    .second-btn:hover {
        transform: scale(1.1);
        transition-duration: 0.4s;
    }

.second-btn-full {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 25px;
    text-transform: uppercase;
    border: 2px solid #ABD500;
    background-color: #ABD500;
    color: #262E38;
    transition-duration: 0.4s;
}

    .second-btn-full:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

.tertiary-btn-full {
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 25px;
    text-transform: uppercase;
    border: 2px solid #CE171F;
    background-color: #CE171F;
    color: #262E38;
    transition-duration: 0.4s;
}

    .tertiary-btn-full:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

.tertiary-btn {
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #ffffff;
    box-shadow: 0px 0px 8px 0px #ffd700;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: #FFD700;
    color: #262E38;
    transition-duration: 0.5s;
    width: 100%;
    letter-spacing: 2px;
}

    .tertiary-btn:hover {
        transform: scale(1.1);
    }


.font-size-btn-bigger {
    font-size: 16px !important;
}


.quaternary-btn {
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #ffffff;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: #FFD700;
    color: #262E38;
    transition-duration: 0.5s;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.quinary-btn {
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #ffffff;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: #ABD500;
    color: #262E38;
    transition-duration: 0.5s;
}

    .quaternary-btn:hover, .quinary-btn:hover {
        transform: scale(1.1);
        box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.5);
        transition-duration: 0.5s;
        color: #262E38;
    }

.red-btn {
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #ffffff;
    padding: 5px 25px;
    text-transform: uppercase;
    background-color: #CE171F;
    color: #ffffff;
    transition-duration: 0.5s;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

    .red-btn:hover {
        box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.2);
        transform: scale(1.1);
        transition-duration: 0.5s;
        color: #ffffff;
    }

/*---------------------
  Header
-----------------------*/

.header-section {
    background: #ffffff;
    position: fixed;
    top: 0%;
    width: 100%;
    z-index: 1000;
}

.logo {
    padding: 5px 0px;
}

    .logo a {
        display: inline-block;
    }


.main-menu {
    text-align: right;
}

    .main-menu ul li {
        display: inline-block;
        list-style: none;
        position: relative;
    }

        .main-menu ul li .dropdown {
            position: absolute;
            width: 180px;
            background: #ffffff;
            z-index: 99;
            left: 0;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }

            .main-menu ul li .dropdown li {
                display: block;
                margin-right: 0;
                text-align: left;
                margin-left: 0;
            }

                .main-menu ul li .dropdown li a {
                    padding: 8px 15px 6px 15px;
                    display: block;
                    -webkit-transition: all 0.3s;
                    -o-transition: all 0.3s;
                    transition: all 0.3s;
                    text-transform: uppercase;
                    color: #191919;
                }

                    .main-menu ul li .dropdown li a:hover {
                        color: #DF3730;
                    }

        .main-menu ul li.active a {
            color: #DF3730;
        }

        .main-menu ul li:hover > a {
            color: #DF3730;
        }

        .main-menu ul li > a > i {
            -webkit-transition: -webkit-transform .8s ease-in-out;
            transition: transform .8s ease-in-out;
        }

        .main-menu ul li:hover > a > i {
            -webkit-transition: -webkit-transform .8s ease-in-out;
            transition: transform .8s ease-in-out;
        }

        .main-menu ul li:hover > a > i {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .main-menu ul li:hover .dropdown {
            opacity: 1;
            visibility: visible;
            top: 20px;
            padding-top: 30px;
        }

        .main-menu ul li a {
            text-decoration: none;
            font-size: 14px;
            color: #000000;
            font-weight: bolder;
            display: inline-block;
            padding: 2px 20px;
            -webkit-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
            text-transform: uppercase;
            border-right: 1px solid #000000;
        }

    .main-menu ul.dropdown li a {
        border: none;
    }

    .main-menu ul li:nth-last-child(-n+1) a {
        border-right: 0;
    }

.header-section img.userprofile {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100%;
    margin: 0px 30px;
}

.header-section button {
    background-color: #FFD700;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px;
    padding: 5px 20px;
    border: none;
    transition-duration: 0.4s;
}

    .header-section button:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 3px 4px 5px 0px rgba(0,0,0,0.2);
    }

.slicknav_menu {
    display: none;
}


/*---------------------
  Top Banner
-----------------------*/
.topbanner .topbanner-content {
    width: 95%;
    position: absolute;
    top: 28%;
    right: 5%;
}

    .topbanner .topbanner-content span {
        padding: 5px 10px;
        text-transform: uppercase;
        margin-right: 5px;
        font-weight: bold;
        font-size: 25px;
        border-radius: 5px;
    }

    .topbanner .topbanner-content p.bgyellow {
        color: #000000;
    }

    .topbanner .topbanner-content p.bgblack {
        color: #abd500;
    }

.topbanner .leftBanner {
    background-color: #FFD700;
    border-bottom: 4px solid #ffffff;
    border-top: 4px solid #ffffff;
    min-height: 300px;
    text-align: center;
}

.topbanner .rightBanner {
    padding: 0px;
    border: 2px solid #ffffff;
}

.topbanner .contentRightBanner {
    padding: 0px;
    border: 2px solid #ffffff;
    overflow: hidden;
    height: 200px;
}

.topbanner img {
    object-fit: cover;
}

.topbanner .img-hover-zoom--zoom-n-pan-h img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 100% 0;
}

.topbanner .img-hover-zoom--zoom-n-pan-h:hover img {
    transform: scale(1.5) translateX(30%);
}

.topbanner .img-hover-zoom--slowmo img {
    transform-origin: 50% 65%;
    transition: transform 3s, filter 1s ease-in-out;
    filter: brightness(70%);
}

.topbanner .img-hover-zoom--slowmo:hover img {
    filter: brightness(100%);
    transform: scale(1.5);
}

.topbanner .img-hover-zoom--colorize img {
    transition: transform .5s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
}

.topbanner .img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.3);
}

.topbanner .img-hover-zoom--zoom-n-pan-v img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 0 0;
}

.topbanner .img-hover-zoom--zoom-n-pan-v:hover img {
    transform: scale(1.25) translateY(-30%);
}

.contentRightBanner .title-block {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0px;
    padding: 5px 10px;
    width: 100%;
    height: 50px;
    text-align: right;
}

.title-block h5 {
    color: #ffffff;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 14px;
}

.title-block a {
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
    margin-bottom: 0px;
    font-style: italic;
    letter-spacing: 1px;
    cursor: pointer;
}

    .title-block a:hover {
        font-weight: bolder;
        color: #ffffff;
    }

.topbanner .left-content {
    position: absolute;
    width: 75%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .topbanner .left-content img {
        position: absolute;
        z-index: -1;
        width: 15%;
    }

    .topbanner .left-content .quote1 {
        left: -60px;
        margin-top: -40px;
    }

    .topbanner .left-content .quote2 {
        right: -40px;
        margin-top: -30px;
    }

.topbanner .leftBanner h2 {
    color: #000000;
    font-size: 40px;
    margin-bottom: 15px;
}

.topbanner .leftBanner p {
    color: #000000;
    line-height: 2;
    font-size: 20px;
}

/*---------------------
  What is PWH
-----------------------*/
.whatispwh {
    padding: 50px 15px;
}

.whatispwh-text h2 {
    font-size: 40px;
    color: #000000;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
}

.whatispwh-text b {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #000000;
}

    .whatispwh-text b.redtext {
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: #DF3730;
    }

.whatispwh-text p {
    color: #000000;
    font-size: 28px;
}

.whatispwh .left-content {
    border-right: 1px solid #000000;
    text-align: center;
}

.whatispwh .button-play, .whatispwh .button-discover {
    padding: 0px;
    text-align: center;
}

    .whatispwh .button-play img {
        width: 50px;
    }

    .whatispwh .button-discover img {
        width: 50px;
    }

    .whatispwh .button-discover span a {
        color: #444444;
    }

.whatispwh .button-discover, .whatispwh .playbutton {
    font-weight: bolder;
    color: #444444;
    cursor: pointer;
}

    .whatispwh .button-discover:hover, .whatispwh .button-discover a:hover, .whatispwh .playbutton:hover {
        color: #DF3730;
    }

/*---------------------
  Counter Number
-----------------------*/
.counternumber {
    margin-top: 5px;
}

.diagonal-box-r {
    background-color: #DF3730;
    transform: skewX(10deg);
}

.diagonal-box-y {
    background-color: #FFD700;
    transform: skewX(10deg);
    box-shadow: inset 10px 0px 6px -5px rgba(0,0,0,0.5);
}

.diagonal-box-g {
    background-color: #ABD500;
    transform: skewX(10deg);
    box-shadow: inset 10px 0px 6px -5px rgba(0,0,0,0.5);
}

.diagonal-box-b {
    background-color: #A59766;
    transform: skewX(10deg);
    box-shadow: inset 10px 0px 6px -5px rgba(0,0,0,0.5);
}

.content {
    text-align: center;
    padding: 25px 5px;
    margin: 0 auto;
    transform: skewX(-10deg);
}

    .content h2 {
        font-size: 50px;
        font-weight: bold;
        color: #ffffff;
    }

    .content p {
        font-size: 15px;
        color: #ffffff;
        text-transform: uppercase;
    }

/*---------------------
  How PWH Work
-----------------------*/
.howpwhwork {
    box-shadow: inset 0px 10px 6px -5px rgba(0,0,0,0.5);
    background-color: #EAF2F5;
    padding: 40px 0px;
}

    .howpwhwork .positionContent {
        text-align: center;
        font-weight: bold;
        margin-top: 25px;
        color: #58595B;
    }

        .howpwhwork .positionContent img {
            width: 120px;
            margin: auto;
            margin-bottom: 10px;
            transition: 0.5s;
        }

            .howpwhwork .positionContent img:hover {
                transform: scale(1.2);
            }

    .howpwhwork h4 {
        color: #000000;
        font-size: 40px;
        /*font-weight: 400;*/
        text-align: center;
    }

    /*.howpwhwork b {
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #000000;
    }*/

    .howpwhwork b.redtext {
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #DF3730;
    }
/*---------------------
  Project Card
-----------------------*/
.projectcard div.col-md-4.col-sm-6 {
    margin-top: 20px;
}

.projectcard {
    padding: 20px 0px 40px 0px;
    overflow: unset;
}

    .projectcard h4 {
        color: #000000;
        font-size: 28px;
        font-weight: 400;
        margin-bottom: 25px;
    }

    .projectcard b {
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #DF3730;
    }

    .projectcard select {
        border: 1px solid #7D7A7A;
        border-radius: 15px;
        padding: 5px 30px 5px 10px;
        width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
        font-style: italic;
    }

        .projectcard select option {
            border: 1px solid #7D7A7A;
            border-radius: 15px;
            padding: 5px 30px 5px 10px;
            width: 100%;
            margin-bottom: 5px;
            font-size: 14px;
            font-style: italic;
        }

    .projectcard input {
        border: 1px solid #7D7A7A;
        border-radius: 15px;
        padding: 5px 30px 5px 10px;
        width: 100%;
        margin-bottom: 5px;
    }

    .projectcard input {
        border: 1px solid #7D7A7A;
        border-radius: 15px;
        padding: 5px 30px 5px 10px;
        width: 100%;
        margin-bottom: 5px;
    }

        .projectcard input::placeholder {
            font-size: 14px;
            color: #7D7A7A;
            font-style: italic;
        }

    .projectcard #filtersubmit {
        position: relative;
        z-index: 1;
        left: -25px;
        top: -2px;
        color: #7B7B7B;
        cursor: pointer;
        width: 0;
    }

    .projectcard #filtercategory {
        float: right;
        color: #7B7B7B;
        cursor: pointer;
        width: 0;
        margin-right: 10px;
        margin-top: 4px;
    }

    .projectcard button.btn-filter {
        border: 1px solid #7D7A7A;
        background-color: transparent;
        border-radius: 15px;
        padding: 5px 10px;
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
        font-size: 14px;
        color: #7D7A7A;
        font-style: italic;
    }

    .projectcard .dropdown-toggle::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        font-style: normal;
    }

.cardborder {
    border: 1px solid #C4C4C4;
    text-align: center;
    height: 100%;
}

    .cardborder img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .cardborder .cardtitle {
        background-color: #FFD700;
        padding: 5px 10px;
        min-height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cardborder .cardtitleActive {
        background-color: #ABD500;
        padding: 5px;
        min-height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .cardborder .cardtitleActive p, .cardborder .cardtitle p {
            color: #000000;
            font-size: 1rem;
        }

        .cardborder .cardtitleActive span, .cardborder .cardtitle span {
            color: #000000;
            font-size: 1rem;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #000000;
            margin-right: 5px;
        }

    .cardborder .cardcontent {
        padding: 10px 15px 15px 15px;
    }

        .cardborder .cardcontent h4 {
            color: #000000;
            font-size: 12px;
            margin-bottom: 10px;
            transition: 0.5s;
            cursor: pointer;
        }

            .cardborder .cardcontent h4:hover img {
                transition: 0.5s;
                transform: scale(4);
            }

    .cardborder img.project-icon {
        height: 20px;
        width: auto;
        object-fit: contain;
        margin-right: 5px;
        margin-top: -2px;
    }

.cardcontent p.cardcontent1 {
    color: #58595B;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.cardcontent a {
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    color: #58595B;
}

    .cardcontent a:hover {
        text-decoration: underline;
    }

.cardbutton {
    margin: 0px;
    border: 1px solid #C4C4C4;
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
    padding: 5px 0px;
}

    .cardbutton .i_vote, .cardbutton .i_share, .cardbutton .i_donate {
        color: #58595B;
        font-size: 10px;
        font-weight: bold;
    }

        .cardbutton .i_vote:hover {
            color: #DF3730;
            cursor: pointer;
        }

        .cardbutton .i_share:hover {
            color: #ABD500;
            cursor: pointer;
        }

        .cardbutton .i_donate:hover {
            color: #FFD700;
            cursor: pointer;
        }

    .cardbutton .img_i_vote, .cardbutton .img_i_share, .cardbutton .img_i_donate {
        width: 30px;
        object-fit: contain;
        height: 25px;
        margin: auto;
    }

    .cardbutton span.votenumber {
        position: absolute;
    }

.projectcard img.topcorner {
    width: 50%;
    height: auto;
    position: absolute;
    right: 16px;
    opacity: 0.8;
}

.projectcard img.topcorner-x {
    width: 65%;
    height: auto;
    position: absolute;
    right: 16px;
}

.projectcard p.contenttopcorner {
    text-align: right;
    position: absolute;
    margin-top: -1px;
    right: 15px;
    width: 50%;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 10px;
}

.projectcard p.contenttopcorner-y {
    text-align: right;
    position: absolute;
    margin-top: -1px;
    right: 15px;
    width: 50%;
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 10px;
}

#idprojectcard #selectPeriodRangePanel {
    width: 100%;
    position: absolute;
    z-index: 2;
    background-color: rgba(255,255,255,0.95);
    margin-top: 40px;
    padding-top: 15px;
    text-align: right;
}

    #idprojectcard #selectPeriodRangePanel select, #idprojectcard #selectPeriodRangePanel input {
        width: 100%;
        color: #8C8C8C;
        border: 1px solid #8C8C8C;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 5px 10px;
        font-size: 14px;
        font-style: italic;
    }

    #idprojectcard #selectPeriodRangePanel button.clearall {
        color: #ffffff;
        background-color: #A7A7A7;
        border: none;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 5px 50px;
        font-size: 13px;
        text-transform: uppercase;
    }

        #idprojectcard #selectPeriodRangePanel button.clearall:hover {
            color: #ffffff;
            background-color: #7D7A7A;
        }

    #idprojectcard #selectPeriodRangePanel button.filter {
        color: #ffffff;
        background-color: #ABD500;
        border: none;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 5px 50px;
        font-size: 13px;
        text-transform: uppercase;
    }

        #idprojectcard #selectPeriodRangePanel button.filter:hover {
            color: #ffffff;
            background-color: #92B600;
        }


/*---------------------
  Testimonial
-----------------------*/
#testimonial {
    padding: 30px 15px;
    position: relative;
    height: auto;
    width: 80%;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

    #testimonial::before {
        content: "";
        background-image: url('../img/world.png');
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.1;
    }

    #testimonial h4 {
        color: #000000;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 25px;
    }

    #testimonial .item {
        text-align: center;
    }

    #testimonial .image-only {
        text-align: center;
    }

        #testimonial .image-only img {
            width: 700px;
            height: 300px;
            object-fit: cover;
            display: inline-block;
        }

        #testimonial .item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            display: inline-block;
            border-radius: 100%;
        }

        #testimonial .item i {
            font-size: 14px;
            color: #58595B;
        }

        #testimonial .item h5 {
            font-size: 18px;
        }

        #testimonial .item p {
            width: 60%;
            margin: auto;
            margin-top: 15px;
            font-size: 14px;
            font-style: italic;
            color: #000000;
        }

    #testimonial .owl-nav button.owl-prev {
        left: 0;
    }

    #testimonial .owl-nav button.owl-next {
        right: 0;
    }

    #testimonial .owl-dots {
        text-align: center;
        padding-top: 15px;
    }

        #testimonial .owl-dots button.owl-dot {
            width: 30px;
            height: 5px;
            display: inline-block;
            background: #D9D9D9;
            margin: 0 3px;
        }

            #testimonial .owl-dots button.owl-dot.active {
                background-color: #949494;
            }

            #testimonial .owl-dots button.owl-dot:focus {
                outline: none;
            }

    #testimonial .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #949494;
        background: #E3E3E3 !important;
        border-radius: 100%;
        padding: 1px 10px 5px 10px !important;
    }

        #testimonial .owl-nav button:hover {
            color: #ffffff;
            background: #949494 !important;
        }

        #testimonial .owl-nav button:focus {
            outline: none;
        }


/*---------------------
  Donation Page
-----------------------*/
.donationourconcept {
    padding: 50px 15px 60px 15px;
}

    .donationourconcept h2 {
        font-weight: bold;
        margin-bottom: 15px;
        color: #58595B;
    }

.donationbutton {
    background-color: #BEEC00;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 25px;
}

.donationpayrollbutton {
    background-color: #812570;
    padding: 30px 15px;
    text-align: center;
    margin-top: 5px;
}

    .donationpayrollbutton h3 {
        color: #ABD500;
        font-weight: bold;
    }

    .donationpayrollbutton h5 {
        color: #ffffff;
    }

    .donationpayrollbutton button {
        border-radius: 20px;
        margin-top: 25px;
        font-size: 20px;
        font-weight: bold;
        border: 2px solid #812570;
        padding: 5px 25px;
        text-transform: uppercase;
        background-color: #ffffff;
        color: #262E38;
        box-shadow: 5px 5px 5px #262E38;
        transition-duration: 0.4s;
    }

        .donationpayrollbutton button:hover {
            transform: scale(1.1);
            transition-duration: 0.4s;
        }

.donationourconcept h4 {
    font-weight: bold;
    margin-bottom: 15px;
}

.donationourconcept .borderbox {
    border: 1px solid #CCCCCC;
    background-color: #f7fbe6;
    padding: 20px 15px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
}

.borderbox img {
    height: 100px;
    margin-bottom: 20px;
}

.borderbox h5 {
    color: #58595B;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.borderbox ul {
    padding: 0px 15px;
    text-align: left;
}

.borderbox li {
    margin-bottom: 15px;
}

.donationjoin {
    background: url(../img/donationbg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 20%;
}

    .donationjoin .greenbg {
        background-color: rgba(190,236,0,0.8);
        padding: 30px 50px;
        text-align: center;
    }

        .donationjoin .greenbg p {
            line-height: 25px;
            color: #000000;
            margin: 25px 15px;
        }

    .donationjoin button {
        margin-top: 30px;
        background-color: transparent;
        border: none;
        color: #812570;
        font-weight: bolder;
        letter-spacing: 2px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #812570;
        transition: 0.5s;
    }

        .donationjoin button:hover {
            transform: scale(1.2);
        }

    .donationjoin .forminput {
        margin-bottom: 25px;
    }

        .donationjoin .forminput input {
            width: 100%;
            border: none;
            padding: 10px 15px;
        }

        .donationjoin .forminput button {
            margin: 0;
            width: 100%;
            color: #ffffff;
            font-weight: bolder;
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #ffffff;
            padding: 10px 15px;
            background-image: linear-gradient(#812570, #681B5A);
        }

        .donationjoin .forminput span {
            position: absolute;
            color: #58595B;
            font-size: 18px;
            font-style: italic;
            right: 35px;
            top: 10px;
        }

.donationjointext {
    padding: 30px 0px;
}

    .donationjointext h3 {
        color: #58595B;
    }

    .donationjointext span {
        font-weight: bolder;
        color: #84ae32;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #84ae32;
    }

.donationjoinbox {
    background: url(../img/donation-box-background.jpg) center no-repeat;
    background-position: top left;
    background-size: cover;
    padding: 30px 15px 15% 15px;
}

    .donationjoinbox .borderbox {
        text-align: center;
        background-color: #ffffff;
        border: 1px solid #000000;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        color: #58595B !important;
        padding: 25px 15px;
    }

    .donationjoinbox .donationamount .borderbutton {
        cursor: pointer;
        border-radius: 5px;
        height: 100%;
        text-align: center;
        transition-duration: 0.4s;
        padding-left: 0;
    }

    .donationjoinbox .donationamount .borderamount100 {
        padding-left: 0;
    }

    .donationjoinbox .donationamount .borderamount10000 {
        padding-left: 0%;
    }

        .donationjoinbox .donationamount .borderamount10000 > h2 {
            font-size: 35px;
        }

        .donationjoinbox .donationamount .borderamount10000.borderbutton-selected > h2 {
            font-size: 47px !important;
        }

    .donationjoinbox .donationamount .borderbutton:hover {
        transform: scale(1.1);
        transition-duration: 0.4s;
    }

    .donationjoinbox .borderbutton-selected h2 {
        font-size: 65px !important;
    }

    .donationjoinbox .donationamount h2 {
        font-size: 45px;
        font-weight: bold;
    }

    .donationjoinbox .donationamount:nth-child(4) .borderbutton:hover {
        transform: scale(1);
        transition-duration: 0.4s;
    }

    .donationjoinbox .donationamount .borderbutton:focus {
        transform: scale(1.1);
        transition-duration: 0.4s;
    }

    .donationjoinbox .donationamount:nth-child(1) {
        padding: 15px;
        border-bottom: 1px solid #cacaca;
    }

    .donationjoinbox .donationamount:nth-child(2) {
        padding: 15px;
        border-left: 1px solid #cacaca;
        border-bottom: 1px solid #cacaca;
    }

    .donationjoinbox .donationamount:nth-child(3) {
        padding: 15px;
    }

    .donationjoinbox .donationamount:nth-child(4) {
        padding: 15px;
        border-left: 1px solid #cacaca;
    }

    .donationjoinbox .borderbox p {
        font-weight: bold;
        font-size: 18px;
    }

    .donationjoinbox .donationamount p {
        font-weight: bold;
        margin-bottom: -10px;
    }

    .donationjoinbox .donationamount h2 {
        font-size: 55px;
        font-weight: bold;
    }

    .donationjoinbox .donationamount .borderbutton1 i {
        position: absolute;
        font-size: 30px;
        right: 15px;
        color: #cacaca;
        bottom: 25px;
    }

    .donationjoinbox .donationamount input {
        height: 50px;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
        width: 100%;
        border: transparent;
        color: #cacaca;
        color: #812570;
    }

        .donationjoinbox .donationamount input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #cacaca;
            font-size: 18px;
            text-align: left;
            opacity: 1; /* Firefox */
        }

        .donationjoinbox .donationamount input:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #cacaca;
            font-size: 18px;
            text-align: left;
        }

        .donationjoinbox .donationamount input::-ms-input-placeholder { /* Microsoft Edge */
            color: #cacaca;
            font-size: 18px;
            text-align: left;
        }

        .donationjoinbox .donationamount input[type=number]::-webkit-inner-spin-button,
        .donationjoinbox .donationamount input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

    .donationjoinbox .borderbox .monthlyonceoff {
        font-weight: bold;
        border-top: 1px solid #cacaca;
        padding-top: 15px;
        font-size: 20px;
    }

        .donationjoinbox .borderbox .monthlyonceoff .switch {
            width: 75px;
        }

        .donationjoinbox .borderbox .monthlyonceoff label {
            height: 30px;
        }

        .donationjoinbox .borderbox .monthlyonceoff .slider:before {
            height: 22px;
            width: 22px;
            left: 3px;
        }

        .donationjoinbox .borderbox .monthlyonceoff input:checked + .slider:before {
            -webkit-transform: translateX(47px);
            -ms-transform: translateX(47px);
            transform: translateX(47px);
        }

    .donationjoinbox .borderbox button {
        width: 90%;
        margin-bottom: 10px;
        font-size: 26px;
        border-radius: 10px;
    }

    .donationjoinbox .borderbox p.smalltext {
        font-size: 12px;
        text-align: left;
    }

.checkbox {
    display: inline-flex;
    cursor: pointer;
    position: relative;
}

    .checkbox > span {
        color: #34495E;
        padding: 0.5rem 0.25rem;
    }

    .checkbox > input {
        height: 25px;
        width: 25px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        border: 1px solid #34495E;
        border-radius: 4px;
        outline: none;
        transition-duration: 0.3s;
        background-color: transparent;
        cursor: pointer;
        position: absolute;
        z-index: 1;
    }

        .checkbox > input:checked {
            border: 1px solid #000000;
            background-color: transparent;
        }

            .checkbox > input:checked + span::before {
                content: '\2713';
                font-size: 30px;
                font-weight: bold;
                display: block;
                text-align: center;
                color: #000000;
                position: absolute;
                left: 0.2rem;
                top: -0.8rem;
            }

        .checkbox > input:active {
            border: 2px solid #34495E;
        }


.donationbottom h2 {
    font-weight: bolder;
    font-size: 28px;
    text-transform: uppercase;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #812570;
}

.donationbottom h5 {
    color: #58595B;
    line-height: 1.5;
}

.donationbottom .borderstyle {
    border: 10px solid #99a1b3;
    padding: 40px 30px;
    border-radius: 50%;
}

    .donationbottom .borderstyle h2 {
        font-size: 34px;
        font-weight: bold;
        text-transform: none;
        font-style: italic;
        -webkit-text-stroke-width: 0px;
    }

/*---------------------
  Search
-----------------------*/
#idprojectcard h5 {
    text-align: center;
    color: #A7A7A7;
    font-style: italic;
    margin: 40px 15px 30px 15px;
}

/*---------------------
  How it Works Page
-----------------------*/
.howitworks {
    background-color: #EAF2F5;
    padding: 25px 10px;
    text-align: center;
}

    .howitworks img {
        width: 100%;
    }

        .howitworks img.imgabs {
            position: absolute;
            left: 0;
            z-index: 1;
        }

    .howitworks p {
        background-color: #d8d4c0;
        padding: 15px;
    }

    .howitworks img.imginspire {
        width: 50%;
    }

    .howitworks .bgline {
        background: url("../img/linebg.png") no-repeat;
        background-size: contain;
        background-position: top;
    }

/*---------------------
  About Us Page
-----------------------*/
.visionandprinciple, .ourteam {
    padding: 30px 15px;
    background-color: #EAF2F5;
}

    .visionandprinciple h3 {
        text-align: center;
        font-weight: bolder;
        margin-bottom: 40px;
    }

    .visionandprinciple img, .ourteam img {
        width: 100%;
    }

    .visionandprinciple h4 {
        color: #DF3730;
        font-weight: bolder;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .visionandprinciple p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .visionandprinciple .rightside {
        border-left: 1px solid #000000;
        padding-left: 25px;
    }

.ambassador {
    padding: 30px 15px;
}

.timeline {
    padding: 30px 15px;
    background: url(../img/timelinebg.jpg);
    text-align: center;
}

.ambassador h3 {
    text-align: center;
    font-weight: bolder;
    color: #A7A7A7;
    margin-bottom: 25px;
}

.timeline h3 {
    text-align: center;
    font-weight: bolder;
    color: #ffffff !important;
    margin-bottom: 10px;
}

.ambassador .flagcountry img {
    width: 30px;
}

.ambassador .flagcountry p {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.ourteam h3 {
    text-align: center;
    font-weight: bolder;
    margin-bottom: 10px;
}

.ourteam p {
    text-align: center;
    margin-bottom: 30px;
}

.timelinespace {
    margin-bottom: 25px;
}

.timeline p {
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}

.timeline .toptape {
    position: absolute;
    opacity: 0.8;
    left: -5px;
    width: 70%;
    z-index: 1;
}

.timeline p.toptext {
    color: #000;
    position: absolute;
    padding: 8px;
    font-weight: bold;
    z-index: 2;
}

.timeline .bottomtape {
    position: absolute;
    bottom: 0;
    opacity: 0.8;
    right: 0px;
    width: 60%;
    z-index: 1;
}

.timeline .bottomtext {
    color: #DF3730;
    bottom: -17px;
    right: 10px;
    position: absolute;
    font-weight: bold;
    z-index: 2;
    font-size: 12px;
}

.timeline img.timelineimg {
    height: 230px;
    object-fit: cover;
    text-align: center;
}

.timeline .rotateimg {
    -ms-transform: rotate(-5deg); /* IE 9 */
    transform: rotate(-5deg);
}

.timeline .rotatetimelinecard {
    -ms-transform: rotate(5deg); /* IE 9 */
    transform: rotate(5deg);
}

.timeline .timelinecard {
    background-color: #DEDEDF;
    height: 230px;
    text-align: center;
    margin: auto;
    width: 80%;
    right: 0;
    left: 0;
}

    .timeline .timelinecard img {
        height: 150px;
        object-fit: cover;
    }

    .timeline .timelinecard p.toptext1 {
        margin-bottom: 0px;
        text-align: left;
        padding: 5px 15px;
        color: #000000;
        font-weight: bold;
    }

    .timeline .timelinecard p.bottomtext1 {
        color: #DF3730;
        text-align: right;
        font-weight: bold;
        padding: 5px 15px;
        font-size: 13px;
    }

.flip-card {
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front {
    position: absolute;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

.flip-card-back, .flip-card-back-timeline, .flip-card-back-rotate {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
    background-color: transparent;
    color: black;
    width: 100%;
}

/* Style the back side */
.flip-card-back {
    background-color: #858484;
    color: white;
    transform: rotateY(180deg);
    padding: 25px 15px;
    height: 225px;
    cursor: default;
}

.flip-card-back-timeline {
    background-color: #858484;
    color: white;
    transform: rotateY(180deg);
    padding: 25px 15px;
    height: 225px;
    margin: auto;
    width: 80%;
    right: 0;
    left: 0;
    cursor: default;
}

.flip-card-back-rotate {
    background-color: #858484;
    color: white;
    transform: rotateY(180deg);
    padding: 25px 15px;
    height: 225px;
    cursor: default;
    width: 80%;
    margin: auto;
    left: 0;
    right: 0;
}

    .flip-card-back h5, .flip-card-back-timeline h5, .flip-card-back-rotate h5 {
        color: #ffffff;
        font-size: 14px;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .flip-card-back p, .flip-card-back-timeline p, .flip-card-back-rotate p {
        font-size: 12px;
    }

.text {
    -ms-transform: rotate(-5deg); /* IE 9 */
    transform: rotate(-5deg);
    background-color: #000000;
    color: white;
    font-size: 12px;
    padding: 15px;
    width: 100%;
}

/*-----------------------
  Detail Project
------------------------*/
#feeds {
    padding: 30px 15px;
}

    #feeds h3 {
        color: #858585;
        margin-bottom: 25px;
    }

    #feeds .commentbox {
        padding: 15px;
        background-color: #FFD700;
        border-radius: 5px;
        margin-bottom: 15px;
        text-align: right;
        font-size: 14px;
    }

        #feeds .commentbox textarea {
            width: 100%;
            border: 1px solid #ffffff;
            padding: 5px;
        }

.commentbox input[type=submit] {
    border: 2px solid #ffffff;
    color: #ffffff;
    border-radius: 20px;
    background-color: transparent;
    margin-top: 5px;
    padding: 2px 30px;
}

    .commentbox input[type=submit]:hover {
        background-color: #ffffff;
        color: #FFD700;
    }

#feeds .subfeed {
    margin-top: 10px;
}

#feeds hr {
    margin-bottom: 0px;
    margin-top: 10px;
    border-top: 1px dashed #C4C4C4;
}

#feeds .feedsborder {
    border: 1px solid #C4C4C4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px;
}

#feeds img {
    width: 100%;
    border-radius: 100%;
}

#feeds .feeds-right-side {
    padding-left: 0px;
    color: #58595B;
}

    #feeds .feeds-right-side h5 {
        font-size: 14px;
        font-weight: bold;
        margin-top: 5px;
    }

    #feeds .feeds-right-side h6, #feeds .feeds-right-side span {
        font-size: 11px;
        color: #C4C4C4;
        font-weight: normal;
    }

#feeds .replybtn {
    cursor: pointer;
}

#feeds .feeds-right-side p {
    margin: 5px 0px;
    font-size: 13px;
    word-break: break-word;
}

#feeds .replybox {
    margin-top: 15px;
    display: none;
}

.replybox textarea {
    width: 100%;
    border-radius: 5px;
    font-size: 13px;
    height: 45px;
}

.replybox input[type=submit] {
    width: 100%;
    background-color: #FFD700;
    color: #ffffff;
    border-radius: 5px;
    height: 45px;
    border: transparent;
}

    .replybox input[type=submit]:hover {
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }

#detailproject {
    background: url("../img/detailbg.jpg") center no-repeat;
    background-size: cover;
    padding: 30px 0px;
}

    #detailproject .bgownerYellow {
        height: 100%;
        background-color: #FFD700;
        width: 200%;
        position: absolute;
        left: -100%;
    }

    #detailproject .bgownerGreen {
        height: 100%;
        background-color: #ABD500;
        width: 200%;
        position: absolute;
        left: -100%;
    }

    #detailproject .ownerdesc {
        padding: 15px;
    }

        #detailproject .ownerdesc h3 {
            font-size: 30px;
        }

    #detailproject img.ownerimg {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 100%;
        border: 1px solid #000000;
    }

    #detailproject h4 {
        font-weight: bold;
        font-size: 28px;
    }

    #detailproject h5 {
        font-size: 16px;
    }

    #detailproject h6 {
        font-size: 14px;
        text-transform: uppercase;
    }

    #detailproject h3 {
        font-size: 24px;
        font-weight: 600;
    }

    #detailproject ul {
        margin-top: 15px;
    }

    #detailproject a.nav-link {
        padding: 2px 10px;
        font-size: 13px;
        padding-right: 10px;
        color: #888888;
        font-weight: bold;
        background-color: transparent !important;
        border: solid 1px #888888;
    }

        #detailproject a.nav-link.active {
            color: #000000;
        }

    #detailproject .tab-content {
        height: 200px;
        overflow: auto;
        border: 1px solid #cacaca;
        padding: 0px 5px;
        background-color: #ffffff;
    }

    #detailproject .projectbtn {
        text-align: center;
        color: #58595B;
        font-size: 14px;
    }

    #detailproject img.icon {
        height: 28px;
    }

.projectbtn .img_i_vote, .projectbtn .img_i_doc, .projectbtn .img_i_share {
    transition-duration: 0.5s;
}

    .projectbtn .img_i_vote:hover, .projectbtn .img_i_doc:hover, .projectbtn .img_i_share:hover {
        transform: scale(1.3);
        transition-duration: 0.5s;
    }

    .projectbtn .img_i_vote span {
        position: absolute;
        margin-left: 5px;
        font-weight: bolder;
    }

    .projectbtn .img_i_vote img, .projectbtn .img_i_doc img, .projectbtn .img_i_share img {
        width: auto;
        object-fit: contain;
        height: 40px;
        margin: auto;
        cursor: pointer;
    }

.budgetreq h3 {
    margin-top: 0px !important;
}

.projectbtn #select_i_share {
    display: none;
    position: absolute;
    background-color: #ffffff;
    padding: 10px 10px 5px 10px;
    right: 20%;
    margin-top: 20px;
}

    .projectbtn #select_i_share button {
        width: 100%;
        background-color: #ffffff;
        border: 1px solid #cacaca;
        margin-bottom: 5px;
        border-radius: 5px;
    }

        .projectbtn #select_i_share button:hover {
            width: 100%;
            background-color: #999999;
            color: #ffffff;
            transition: 0.5s;
            border: 1px solid #999999;
            margin-bottom: 5px;
            border-radius: 5px;
        }

.projectbtn a {
    color: #58595B;
}

.projectbtn h3 {
    font-weight: bold;
    color: #000000;
    font-size: 35px;
}

#detailproject .owl-slider, #detailproject .owl-carousel, #detailproject .owl-height, #detailproject .owl-stage, #detailproject .owl-item, #detailproject .item {
    height: 100% !important;
}

    #detailproject .owl-slider img {
        height: 410px;
        width: 100%;
        object-fit: cover;
    }

#detailproject .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ABD500;
    font-size: 30px;
    line-height: 1;
    font-weight: bold;
    background-color: rgba(255,255,255,0.5);
    padding: 1px 11px 2px 12px !important;
    border-radius: 100%;
}

    #detailproject .owl-nav button:hover {
        color: #ffffff;
        background: #949494 !important;
    }

    #detailproject .owl-nav button:focus {
        outline: none;
    }

    #detailproject .owl-nav button.owl-prev {
        left: 10px;
    }

    #detailproject .owl-nav button.owl-next {
        right: 10px;
    }

#detailproject .owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
}

    #detailproject .owl-dots button.owl-dot {
        width: 8px;
        height: 8px;
        display: inline-block;
        background: #ABD500;
        border: 2px solid #ABD500;
        margin: 0 3px;
        border-radius: 100%;
    }

        #detailproject .owl-dots button.owl-dot.active {
            background-color: #ffffff;
            border: 2px solid #ABD500;
        }

        #detailproject .owl-dots button.owl-dot:focus {
            outline: none;
        }

/*---------------------
  Contact Us Page
-----------------------*/
.contactus {
    padding-bottom: 35px;
    background: url("../img/clouds.png") center no-repeat;
    background-size: cover;
    ;
}

    .contactus .headertext h1 {
        color: #ffffff;
        position: absolute;
        top: -250px;
        left: 100px;
        font-size: 60px;
    }

    .contactus .contactusform {
        margin-top: 25px;
    }

    .contactus p {
        color: #000000;
        margin-bottom: 25px;
        text-align: center;
    }

    .contactus form {
        margin-bottom: 30px;
    }

    .contactus label {
        font-size: 14px;
        font-weight: bold;
    }


/*---------------------
  FAQ
-----------------------*/
.faq {
    padding: 50px 0px;
    background-color: #FFD700;
}

    .faq h2 {
        color: #686868;
        font-size: 40px;
        font-style: italic;
        font-weight: bold;
        text-align: center;
        margin-bottom: 50px;
    }

    .faq span.third {
        color: #686868;
        font-size: 14px;
        position: absolute;
        right: 50px;
        bottom: 30px;
    }

    .faq span.first {
        font-size: 120px;
        left: -10px;
        top: -40px;
        position: absolute;
    }

    .faq span.second {
        font-size: 120px;
        right: 0px;
        bottom: -50px;
        position: absolute;
    }

    .faq input {
        border: 1px solid #7D7A7A;
        border-radius: 10px;
        padding: 5px 30px 5px 10px;
        width: 100%;
        margin-bottom: 15px;
        font-size: 14px;
    }

    .faq i.fa {
        position: relative;
        z-index: 1;
        left: -25px;
        top: -2px;
        color: #7B7B7B;
        cursor: pointer;
        width: 0;
    }

    .faq .card {
        border: none;
        border-radius: 0px;
        font-size: 14px;
        border-top: 1px solid #ffffff;
    }

        .faq .card .leftsideQ, .faq .card .leftsideA {
            background-color: #A9ABAF;
            color: #ffffff;
            font-size: 60px;
            font-weight: bolder;
        }

        .faq .card .leftsideA {
            border-left: 2px solid #FFD700;
            border-top: 1px solid #ffffff;
        }

        .faq .card .leftsideQ {
            border-left: 2px solid #CE171F;
        }

        .faq .card .rightsideQ {
            padding: 15px;
            display: flex;
            align-items: center;
            background-color: #E7E8E9;
            font-weight: bolder;
        }

        .faq .card .rightsideA {
            padding: 15px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
        }

    .faq .card-header {
        padding: 0px;
        cursor: pointer;
    }

    .faq .card-body {
        padding: 0px;
    }

        .faq .card-header .row, .faq .card-body .row {
            margin: 0px;
        }

    .faq .card:nth-child(1) {
        border-top: transparent;
    }

    .faq .accordion {
        box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
        margin-bottom: 50px;
    }

        .faq .accordion .card-header:after {
            font-family: 'FontAwesome';
            content: "\f106";
            right: 0px;
            margin-top: -5%;
            margin-right: 10px;
            z-index: 1;
            position: absolute;
            font-size: 20px;
        }

        .faq .accordion .card-header.collapsed:after {
            content: "\f107";
        }


/*---------------------
  Legal & Finance Page
-----------------------*/
.legalfinance, .legaldownloadfile {
    padding: 30px 0px;
    text-align: center;
}

    .legalfinance h3 {
        color: #58595B;
        text-transform: uppercase;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center;
    }

    .legalfinance p {
        margin-bottom: 15px;
    }

.legalpwhggrowth {
    padding: 30px 0px;
    background-color: #ffd700;
    text-align: center;
}

    .legalpwhggrowth h2 {
        font-weight: bolder;
        color: #2b2b2b;
    }

    .legalpwhggrowth .legalcontent {
        margin-top: 25px;
    }

.legalcontent table {
    margin-top: -130px;
}

.legalcontent .table-bordered td {
    text-align: left;
    border: 2px solid #ffffff;
}

.legalcontent h5, .legalpwhggrowth .legalicon h4, .legalpwhggrowth .legalicon p, .legaldownloadfile h4 {
    font-size: 14px;
    font-weight: bolder;
    color: #2b2b2b;
}

.legalcontent p {
    font-size: 11px;
    color: #000000;
}

.legalcontent table tr:nth-child(1) {
    background: #c9cacc;
}

.legalcontent table tr:nth-child(2) {
    background: #ffeed5;
}

.legalcontent table tr:nth-child(3) {
    background: #f5c2b8;
}

.legalcontent table tr:nth-child(4) {
    background: #b5dfe1;
}

.legalpwhggrowth .legalicon {
    margin-top: 10px;
    text-align: center;
}

.legalicon img {
    height: 75px;
    object-fit: contain;
    margin-bottom: 10px;
    margin-top: 10px;
}

.legalicon div.col-md-2.col-sm-4.col-6, .legaldownloadfile div.col-md-2.col-sm-4.col-6 {
    padding: 5px 40px;
}

.legaldownloadfile {
    background-color: #DCD5BD;
}

    .legaldownloadfile h3 {
        text-align: left;
        color: #58595B;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

    .legaldownloadfile img {
        height: 150px;
        object-fit: contain;
        margin-bottom: 15px;
        margin-top: 15px;
        transition: 0.4s;
    }

        .legaldownloadfile img:hover {
            transform: scale(1.1);
            transition: 0.4s;
        }

    .legaldownloadfile .legaltextbottom {
        margin-top: 50px;
    }

        .legaldownloadfile .legaltextbottom p {
            margin-bottom: 20px;
        }

.legaltextbottom a b {
    color: #CE171F;
}

.legaltextbottom b {
    font-weight: bolder;
    color: #303030;
}


/*---------------------
  Submit Page
-----------------------*/
#submit-project-guidelines, #submit-criteria {
    padding: 50px 15px;
}

    #submit-project-guidelines .middleside, #submit-project-guidelines .leftside, #submit-project-guidelines .rightside {
        padding: 0px 25px;
        margin-bottom: 25px;
        text-align: center;
    }

    #submit-project-guidelines .middleside {
        border-left: 1px solid #58595B;
        border-right: 1px solid #58595B;
    }

    #submit-project-guidelines h3, #submit-criteria h3 {
        color: #58595B;
        text-transform: uppercase;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 40px;
        text-align: center;
    }

    #submit-project-guidelines h5 {
        color: #58595B;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    #submit-project-guidelines h4 {
        margin-bottom: 25px;
    }

    #submit-project-guidelines span {
        color: #58595B;
        font-weight: bold;
        border: 3px solid #58595B;
        border-radius: 100%;
        padding: 5px 13px;
    }

#submit-pwh-support {
    padding: 30px 0px;
    text-align: center;
    background-color: #ABD500;
}

    #submit-pwh-support p {
        color: #272e38;
        font-weight: bold;
        font-size: 15px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    #submit-pwh-support img {
        width: 70%;
    }

#submit-criteria {
    background-color: #DBE6EB;
}

    #submit-criteria .leftside, #submit-criteria .rightside {
        padding: 0px 35px;
        margin-bottom: 45px;
    }

    #submit-criteria .leftside {
        border-right: 1px solid #58595B;
    }

    #submit-criteria h6 {
        color: #58595B;
        text-transform: uppercase;
        margin-bottom: 15px;
        font-weight: bold;
    }

    #submit-criteria p {
        color: #58595B;
        font-size: 14px;
        margin-bottom: 15px;
    }

    #submit-criteria ul li {
        margin-left: 15px;
        color: #58595B;
        font-size: 14px;
        margin-bottom: 15px;
    }

    #submit-criteria .submitnote img {
        position: absolute;
        right: 0px;
        width: 150px;
        top: -125px;
    }

.submitdownloadfile {
    background: url("../img/detailbg.jpg") no-repeat center;
    background-size: cover;
}

/*new style
.submit-multi-step {
	background: #fff;
	padding: 50px 15px;
	display: block;
	overflow: hidden;
	width: 100%;
}
.submit-multi-step h3{
	color: #58595B;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 15px;
}
.submit-multi-step #msform {
	text-align: center;
	position: relative;
	padding-top: 30px;
	margin: 0 auto;
	z-index: 1;
}
.submit-multi-step #msform fieldset {
	border: 0;
	position: relative;
	width: 100%;
	left: 0;
	right: 0;
}
.submit-multi-step #msform fieldset:not(:first-of-type) {
	display: none;
}
.submit-multi-step #msform fieldset .fg_2, .submit-multi-step #msform fieldset .fg_3 {
	padding-top: 10px;
	display: block;
	overflow: hidden;
}
.submit-multi-step #msform fieldset .fg_3 {
	padding-bottom: 70px;
}
.submit-multi-step #msform fieldset .product_select:after {
	display: none;
}
.submit-multi-step #msform fieldset .product_select:before {
	content: "\f35f";
	position: absolute;
	top: 0;
	right: 20px;
	color: #5f6771;
}
.submit-multi-step #msform fieldset .product_select .list {
	width: 100%;
}
.submit-multi-step #msform fieldset .done_text {
	padding-top: 40px;
}
.submit-multi-step #msform fieldset .done_text .don_icon {
	height: 36px;
	width: 36px;
	line-height: 36px;
	font-size: 22px;
	margin-bottom: 10px;
	background: #5cb85c;
	display: inline-block;
	border-radius: 50%;
	color: #fff;
	text-align: center;
}
.submit-multi-step #msform fieldset .done_text h6 {
	line-height: 23px;
}
.submit-multi-step #msform fieldset .code_group {
	margin-bottom: 60px;
}
.submit-multi-step #msform fieldset .code_group .form-control {
	border: 0;
	border-bottom: 1px solid #a1a7ac;
	border-radius: 0;
	display: inline-block;
	width: 30px;
	font-size: 30px;
	color: #5f6771;
	padding: 0;
	margin-right: 7px;
	text-align: center;
	line-height: 1;
}
.submit-multi-step #msform fieldset .input-group {
	padding-bottom: 40px;
}
.submit-multi-step #msform fieldset .input-group .custom-file {
	width: 100%;
	height: auto;
}
.submit-multi-step #msform fieldset .input-group .custom-file .custom-file-label {
	width: 168px;
	border-radius: 5px;
	cursor: pointer;
	font: 700 14px/40px sans-serif;
	border: 1px solid #58585A;
	text-align: center;
	transition: all 300ms linear 0s;
	color: #5f6771;
}
.submit-multi-step #msform fieldset .input-group .custom-file .custom-file-label i {
	font-size: 20px;
	padding-right: 10px;
}
.submit-multi-step #msform fieldset .input-group .custom-file .custom-file-label:hover, .submit-multi-step #msform fieldset .input-group .custom-file .custom-file-label:focus {
	background: #5cb85c;
	border-color: #5cb85c;
	color: #fff;
}
.submit-multi-step #msform fieldset .input-group .custom-file input {
	display: none;
}
.submit-multi-step #msform fieldset .file_added {
	text-align: left;
	padding-left: 190px;
	padding-bottom: 60px;
}
.submit-multi-step #msform fieldset .file_added li {
	font: 400 15px/28px 'Roboto', sans-serif;
	color: #5f6771;
}
.submit-multi-step #msform fieldset .file_added li a {
	color: #5cb85c;
	font-weight: 500;
	display: inline-block;
	position: relative;
	padding-left: 15px;
}
.submit-multi-step #msform fieldset .file_added li a i {
	font-size: 22px;
	padding-right: 8px;
	position: absolute;
	left: 0;
	transform: rotate(20deg);
}
.submit-multi-step #msform #progressbar {
	margin-bottom: 20px;
	overflow: hidden;
  padding:0;
}
.submit-multi-step #msform #progressbar li {
	list-style-type: none;
	color: #58585A;
	font-size: 9px;
	width: calc(100%/3);
	float: left;
	position: relative;
	font: 500 13px/1 sans-serif;
}
.submit-multi-step #msform #progressbar li:nth-child(2):before {
	content: "\f12f";
}
.submit-multi-step #msform #progressbar li:nth-child(3):before {
	content: "\f457";
}
.submit-multi-step #msform #progressbar li:before {
	content: "\f1fa";
	width: 30px;
	height: 30px;
	line-height: 30px;
	display: block;
	background: #D5D4D4;
	border-radius: 50%;
	margin: 0 auto 10px auto;
}
.submit-multi-step #msform #progressbar li:after {
	content: '';
	width: 100%;
	height: 10px;
	background: #D5D4D4;
	position: absolute;
	left: -50%;
	top: 11px;
	z-index: -1;
}
.submit-multi-step #msform #progressbar li:last-child:after {
	width: 150%;
}
.submit-multi-step #msform #progressbar li.active {
	color: #ABD500;
}
.submit-multi-step #msform #progressbar li.active:before
{
	background: #ABD500;
	color: white
}
 .submit-multi-step #msform #progressbar li.active:after {
	background: #ABD500;
	color: white;
}
.submit-multi-step #msform .action-button {
	background: #176db7;
	color: white;
	border: 0 none;
	border-radius: 5px;
	cursor: pointer;
	min-width: 110px;
	font: 700 14px/40px 'Roboto', sans-serif;
	border: 1px solid #176db7;
	margin: 0 5px;
	text-transform: uppercase;
	display: inline-block;
  border-radius: 3px;
}
.submit-multi-step #msform .action-button:hover, .submit-multi-step #msform .action-button:focus {
	background: #176db7;
	border-color: #176db7;
}
.submit-multi-step #msform .previous_button {
	background: transparent;
	color: #000;
	border-color: #99a2a8;
}
.submit-multi-step #msform .previous_button:hover, .submit-multi-step #msform .previous_button:focus {
	background: #000;
	border-color: #577450;
	color: #fff;
}
.submit-multi-step fieldset {
	left: 0px;
	right: 0px;
	margin: auto;
	padding: 20px 15px 15px !important;
}
*/

/*---------------------
  Events and News Page
-----------------------*/
.eventsandnews {
    padding: 50px 0px;
    text-align: center;
}

.contenteventnews {
    margin-bottom: 30px;
    padding: 0px 25px;
}

    .contenteventnews img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        margin-bottom: 15px;
    }

    .contenteventnews h5 {
        text-transform: uppercase;
    }

    .contenteventnews .ribbon {
        width: 200px;
        height: 100px;
        overflow: hidden;
        position: absolute;
    }

        .contenteventnews .ribbon span.latestnewsevent {
            position: absolute;
            display: block;
            width: 300px;
            padding: 10px 0 10px 20px;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            background-color: #CE171F;
            text-transform: uppercase;
            color: #ffffff;
            box-shadow: 0 5px 10px rgba(0,0,0,.5);
        }

        .contenteventnews .ribbon span.pastnewsevent {
            position: absolute;
            display: block;
            width: 300px;
            padding: 10px 0 10px 20px;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            background-color: #FFD700;
            text-transform: uppercase;
            color: #58595B;
            box-shadow: 0 5px 10px rgba(0,0,0,.5);
        }

        .contenteventnews .ribbon span.upcomingnewsevent {
            position: absolute;
            display: block;
            width: 300px;
            padding: 10px 0 10px 40px;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: 1px;
            background-color: #ABD500;
            text-transform: uppercase;
            color: #ffffff;
            box-shadow: 0 5px 10px rgba(0,0,0,.5);
        }

    .contenteventnews .ribbon-top-left::before, .contenteventnews .ribbon-top-left::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }

    .contenteventnews .ribbon-top-left::before {
        top: 0;
        left: 0;
    }

    .contenteventnews .ribbon-top-left::after {
        bottom: 0;
        right: 0;
    }

    .contenteventnews .ribbon-top-left span {
        left: -105px;
        top: 28px;
        transform: rotate(-25deg);
    }

.certificates {
    padding: 50px 15px;
    background-color: #EAF2F5;
    text-align: center;
}

    .certificates .certext {
        padding: 80px 0px;
    }

    .certificates h3 {
        margin-bottom: 45px;
        color: #DF3730;
        font-weight: bolder;
    }

    .certificates h6 {
        color: #DF3730;
        font-weight: bolder;
        text-align: left;
        font-size: 20px;
    }

    .certificates p {
        text-align: left;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .certificates img {
        width: 100%;
        position: absolute;
        right: -180px;
        margin-top: -75px;
    }

    .certificates button {
        margin-top: 50px;
    }

/*---------------------
  Detail NEWS, EVENT, CAMPAIGN
-----------------------*/
.detailcampaigneventnews {
    padding: 50px 15px 40px 15px;
    text-align: center;
}

.detaileventbg {
    background: url("../img/texturebg.jpg") no-repeat center center;
    background-size: cover;
}

.detailcampaigneventnews img {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
}

.detailcampaigneventnews h3 {
    color: #58595B;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

.detailcampaigneventnews p {
    margin-bottom: 15px;
    line-height: 1.75;
    text-align: left;
}

.detailcampaigneventnews .detailcontent {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -moz-column-count: 2;
    column-gap: 30px;
}


.detailcampaigneventnewsitem {
    padding: 20px 15px 0px 15px;
    margin-top: 15px;
    text-align: center;
}

.padding-top-0 {
    padding-top: 0px !important;
}

.margin-top-0 {
    margin-top: 0px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.detailcampaigneventnewsitem h3 {
    color: #58595B;
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
}

.detailcampaigneventnewsitem p {
    margin-bottom: 15px;
    line-height: 1.75;
    text-align: left;
}

/*---------------------
  Payroll Donation Page
-----------------------*/
.payrollthankyou, .payrolldonation {
    padding: 50px 0;
    background-color: #812570;
}

    .payrollthankyou img {
        width: 100%;
    }

    .payrollthankyou h4 {
        color: #ffffff;
        font-weight: 600;
    }

    .payrollthankyou p {
        color: #ffffff;
        font-weight: normal;
        font-size: 18px;
    }

    .payrollthankyou b {
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: #ffffff;
        letter-spacing: 1px;
    }

.payrollhowitworks {
    text-align: center;
    padding: 50px 0;
}

    .payrollhowitworks h2 {
        color: #58595B;
        font-weight: bolder;
    }

    .payrollhowitworks h4 {
        color: #58595B;
        font-weight: bolder;
        margin: 15px;
    }

    .payrollhowitworks p {
        font-size: 16px;
        padding: 0px 25px;
    }

    .payrollhowitworks b {
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: #58595B;
        letter-spacing: 1px;
    }

    .payrollhowitworks img {
        width: 50%;
        margin-top: 35px;
    }

.payrolldonation h2 {
    color: #ffffff;
    margin-bottom: 50px;
    font-weight: bolder;
    text-align: center;
}

.payrolldonation form label {
    color: #ffffff;
}

.payrolldonation .switch {
    position: absolute;
    margin-top: -35px;
    right: 18px;
    display: inline-block;
    width: 100px;
    height: 32px;
}

    .payrolldonation .switch input {
        display: none;
    }

.payrolldonation .slider {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cacaca;
    -webkit-transition: .4s;
    transition: .4s;
}

    .payrolldonation .slider:before {
        position: absolute;
        z-index: 2;
        content: "";
        height: 28px;
        width: 28px;
        left: 2px;
        bottom: 2px;
        background-color: darkslategrey;
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
        -webkit-transition: .4s;
        transition: all 0.4s ease-in-out;
    }

    .payrolldonation .slider:after {
        position: absolute;
        left: 0;
        z-index: 1;
        content: "ONCE OFF";
        font-size: 11px;
        text-align: left !important;
        line-height: 35px;
        padding-left: 0;
        width: 100px;
        color: #fff;
        height: 32px;
        border-radius: 100px;
        background-color: #ABD500;
        -webkit-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
        transform: translateX(-100px);
        transition: all 0.4s ease-in-out;
    }

.payrolldonation input:checked + .slider:after {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
    padding-left: 10px;
}

.payrolldonation input:checked + .slider:before {
    background-color: #fff;
}

.payrolldonation input:checked + .slider:before {
    -webkit-transform: translateX(68px);
    -ms-transform: translateX(68px);
    transform: translateX(68px);
}

.payrolldonation .slider.round {
    border-radius: 100px;
}

    .payrolldonation .slider.round:before {
        border-radius: 50%;
    }

.payrolldonation .absolute-no {
    position: absolute;
    left: 0;
    color: darkslategrey;
    text-align: right !important;
    font-size: 11px;
    width: calc(100% - 30px);
    height: 100px;
    line-height: 35px;
    cursor: pointer;
}



/*------------------------------------------------------------------------------------
                                     USER PROFILE START
--------------------------------------------------------------------------------------*/
.contentuserprofile .orangebtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
    text-transform: uppercase;
    border: 1px solid #FA9A05;
    background-color: #FA9A05;
    width: 100%;
    color: #ffffff !important;
    transition-duration: 0.4s;
}

.contentuserprofile .purplebtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #812570;
    background-color: #812570;
    min-width: 80%;
    color: #ffffff !important;
    transition-duration: 0.4s;
}

.contentuserprofile .redbtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #DF3730;
    background-color: #DF3730;
    min-width: 80%;
    color: #ffffff !important;
    transition-duration: 0.4s;
}

.contentuserprofile .greenbtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #ABD500;
    background-color: #ABD500;
    min-width: 80%;
    color: #262E38 !important;
    transition-duration: 0.4s;
}

.contentuserprofile .yellowbtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #FFD700;
    background-color: #FFD700;
    min-width: 80%;
    color: #262E38 !important;
    transition-duration: 0.4s;
}

.contentuserprofile .brownbtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #A9995F;
    background-color: #A9995F;
    min-width: 80%;
    color: #262E38 !important;
    transition-duration: 0.4s;
}

.contentuserprofile .borderbtn {
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
    padding: 5px 10px;
    text-transform: uppercase;
    border: 1px solid #262E38;
    background-color: #ffffff;
    min-width: 80%;
    color: #262E38 !important;
    transition-duration: 0.4s;
}

    .contentuserprofile .purplebtn:hover, .contentuserprofile .redbtn:hover, .contentuserprofile .greenbtn:hover, .contentuserprofile .yellowbtn:hover, .contentuserprofile .brownbtn:hover, .contentuserprofile .borderbtn:hover {
        transition-duration: 0.4s;
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.5);
    }

.contentuserprofile .greenbtn.twocol, .contentuserprofile .yellowbtn.twocol, .contentuserprofile .redbtn.twocol {
    min-width: 30%;
    width: 30%;
}

.userprofiledetail {
    padding: 10px 0px;
    border-top: 6px solid #ffffff;
    background: -webkit-linear-gradient(45deg, rgba(219,230,235,1) 55%, rgba(39,46,56,1) 0%);
}

    .userprofiledetail .leftside h4 {
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .userprofiledetail .leftside p {
        color: #878889;
        font-size: 13px;
    }

    .userprofiledetail .userimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .userprofiledetail .userimg.ambassadorborder .contentuserimg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
    }

    .userprofiledetail .userimg.ambassadorborder img.ambassadoricon {
        position: absolute;
        z-index: 1;
        width: auto;
        height: 38px;
        object-fit: contain;
        top: 10px;
        right: 10px;
    }

    .userprofiledetail .userimg.ambassadorborder .square {
        position: relative;
        margin-top: -70%;
        background-color: #ffffff;
        padding: 2%;
        width: 100%;
        -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
        clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
    }

    .userprofiledetail .square {
        position: relative;
        margin-top: -70%;
        border: 5px solid #ffffff;
        width: 100%;
    }

        .userprofiledetail .square:after {
            content: "";
            display: block;
            padding-bottom: 100%;
        }

    .userprofiledetail .contentuserimg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .userprofiledetail .rightside p {
        text-transform: uppercase;
        color: #ffffff;
        font-size: 11px;
        text-align: center;
    }

    .userprofiledetail .rightside button {
        font-size: 10px;
        width: 100%;
        padding: 5px 10px;
    }

    .userprofiledetail .rightside div.col-6 {
        padding-left: 0px;
    }

    .userprofiledetail hr {
        position: absolute;
        border: none;
        height: 50px;
        width: 100%;
        height: 50px;
        margin-bottom: 0;
        left: 0;
        border-bottom: 2px solid transparent;
        box-shadow: 0 10px 10px -10px #a7a7a7;
        z-index: 5;
    }

/************* content page ************/
#wrapper {
    overflow-x: hidden;
}

#sidebar-wrapper {
    min-height: 60vh;
    background-color: #EAF0F3;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

    #sidebar-wrapper .sidebar-heading {
        padding: 0.875rem 1.25rem;
        font-size: 1.2rem;
    }

    #sidebar-wrapper .list-group {
        /*width: 20rem;*/
    }

.contentuserprofile .buttonsidebarbottom {
    padding-left: 10%;
    padding-right: 10%;
}

.contentuserprofile .list-group-item-action {
    padding-left: 10%;
    padding-right: 10%;
    background-color: #EAF0F3;
    text-transform: uppercase;
    color: #878889;
    font-size: 14px;
    border: none;
}

    .contentuserprofile .list-group-item-action.active {
        color: #000000;
        font-weight: bolder;
    }

    .contentuserprofile .list-group-item-action span.rednotif {
        display: inline-block;
        margin-left: 5px;
        margin-bottom: 5px;
        border-radius: 100%;
        height: 8px;
        width: 8px;
        top: -5px;
        background-color: #FF0000;
    }

span.indicator-rednotif {
    display: inline-block;
    margin-left: -8px;
    border-radius: 100%;
    height: 6px;
    width: 6px;
    margin-top: 8px;
    background-color: #FF0000;
}

#page-content-wrapper {
    width: 100%;
    padding-left: 50px;
    margin-bottom: 25px;
}

    #page-content-wrapper h3 {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 26px;
    }

    #page-content-wrapper .managenotif {
        font-size: 14px;
    }

    #page-content-wrapper .listcontent {
        width: 100%;
        font-size: 14px;
        color: #797979;
        border-bottom: 1px solid #E2E2E2;
    }

        #page-content-wrapper .listcontent:last-child {
            border: none;
        }

        #page-content-wrapper .listcontent.active {
            color: #000000;
            font-weight: bold;
        }

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

#page-content-wrapper .donationjoinbox {
    background: none;
    padding: 0px;
}

    #page-content-wrapper .donationjoinbox .borderbox {
        border: none;
        box-shadow: none;
        border-radius: 10px;
        color: #58595B !important;
        padding: 25px 15px;
    }

/* Shadow Lifted corners */
.drop-shadow {
    position: relative;
    width: 500px;
    padding: 15px;
    margin: 30px auto;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

    .drop-shadow:before, .drop-shadow:after {
        content: "";
        position: absolute;
        z-index: -2;
    }

    .drop-shadow img {
        width: 100%;
        object-fit: cover;
    }

    .drop-shadow p {
        text-align: center;
        font-weight: bold;
        font-style: italic;
        color: #EE1C25;
    }

.lifted {
    -moz-border-radius: 4px;
    border-radius: 4px;
}

    .lifted:before, .lifted:after {
        bottom: 15px;
        left: 10px;
        width: 50%;
        height: 20%;
        max-width: 300px;
        max-height: 100px;
        -webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        transform: rotate(-3deg);
    }

    .lifted:after {
        right: 10px;
        left: auto;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -ms-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        transform: rotate(3deg);
    }

.switch {
    margin-bottom: 0;
    position: relative;
    display: inline-block;
    width: 50px;
    height: 27px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

.borderbox .slider {
    background-color: #f58420;
}

input:checked + .slider {
    background-color: #ABD500;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ABD500;
}

.borderbox input:checked + .slider {
    background-color: #FFD700;
}

.borderbox input:focus + .slider {
    box-shadow: 0 0 1px #FFD700;
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

.slider.round {
    border-radius: 30px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/*donation*/
.donationcard .borderstyle {
    padding: 10px 15px 0px 15px;
    border: 1px solid #DADADA;
}

    .donationcard .borderstyle .top {
        color: #AAAAAA;
        font-size: 12px;
    }

    .donationcard .borderstyle .bottom {
        color: #ffffff;
        font-size: 12px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    .donationcard .borderstyle.cancelled .bottom {
        background-color: #FFD700;
    }

    .donationcard .borderstyle.cancelled .middle h2 {
        color: #FFD700;
        font-weight: bold;
        font-size: 40px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

    .donationcard .borderstyle.success .bottom {
        background-color: #ABD500;
    }

    .donationcard .borderstyle.success .middle h2 {
        color: #ABD500;
        font-weight: bold;
        font-size: 40px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    }

.hr-dotted {
    border-top: 3px dotted;
}

.delete-button {
    border: 0px;
    padding: 0px;
    transition-duration: 0.4s;
}

    .delete-button:hover {
        transition-duration: 0.4s;
        transform: scale(1.1);
        box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    }
/*---------------------
  Submit Form Page
-----------------------*/
.submitform {
    padding: 35px 15px;
    background: url("../img/clouds.png") center no-repeat;
    background-size: cover;
}

.submitformbg {
    background-color: rgba(255,255,255,0.85);
    border: 3px solid #ABD500;
    box-shadow: 5px 5px 10px #868686;
}

    .submitformbg span.star {
        color: red;
    }

    .submitformbg label, .submitformbg input, .submitformbg textarea, .submitformbg select {
        font-size: 14px;
        color: #58595B;
    }

#datepicker input, #datepicker > span:hover {
    cursor: pointer;
}

.submitformbg h3 {
    font-weight: bold;
    color: #58595B;
}

.submitformbg form > h4 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: bold;
    color: #58595B;
    margin-bottom: 15px;
}

.submitformbg #signature canvas {
    background: #fff;
    display: block;
    border-radius: 5px;
    border: 1px solid #ced4da;
    cursor: crosshair;
}

.submitformbg #signature button {
    border: 1px solid #ced4da;
    margin-top: 10px;
    font-size: 12px;
    border-radius: 5px;
}

.submit-form .uploadfiles .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.submit-form .uploadfiles .btn-success, .btn.btn-success.fileinput-button {
    color: #858484;
    background-color: #ffffff;
    border-color: #ced4da;
    width: 90%;
}

.submit-form .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
    color: #858484;
    background-color: #ced4da;
    border-color: #ced4da;
}

.submit-form .uploadfiles .fileinput-button, .btn.btn-success.fileinput-button {
    position: relative;
    overflow: hidden;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background-color: #ffffff;
    color: #858484;
    width: 100%;
    min-height: 125px;
    display: flex;
    align-items: center;
}

    .submit-form .uploadfiles .fileinput-button div, .btn.btn-success.fileinput-button > div {
        margin: 30px 15px;
    }

    .submit-form .uploadfiles .fileinput-button input, .btn.btn-success.fileinput-button > input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        -ms-filter: "alpha(opacity=0)";
        font-size: 200px;
        direction: ltr;
        cursor: pointer;
    }

.submitformbg .uploadfiles .thumb {
    height: 60px;
    width: 80px;
    border: 1px solid #ced4da;
    object-fit: contain;
}

.submitformbg .uploadfiles ul.thumb-Images li {
    width: 95px;
    float: left;
    display: inline-block;
    vertical-align: top;
    height: 80px;
    margin-top: 10px;
}

.submitformbg .uploadfiles .img-wrap {
    position: relative;
    display: inline-block;
    font-size: 0;
}

    .submitformbg .uploadfiles .img-wrap .btnclose {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 100;
        background-color: #d0e5f5;
        padding: 5px 2px 2px;
        color: #000;
        font-weight: bolder;
        cursor: pointer;
        opacity: 0.5;
        font-size: 20px;
        line-height: 10px;
        border-radius: 50%;
    }

    .submitformbg .uploadfiles .img-wrap:hover .btnclose {
        opacity: 1;
        background-color: #ff0000;
    }

.submitformbg .uploadfiles .FileNameCaptionStyle {
    font-size: 10px;
    line-height: 1;
}

.submitformbg .accordion-head i {
    font-size: 16px;
    color: #777777;
    float: right;
}

.submitformbg .accordion-head > .collapsed > i:before {
    content: "\f107";
    font-size: 16px;
    color: #777777;
}

.submitformbg .accordion-head h4 {
    margin: 0px;
    color: #575556;
    font-size: 14px;
    width: 100%;
}

.submitformbg .comment_card {
    margin-bottom: 5px;
    border-radius: 0;
    border-left: 10px solid #C4C4C4;
}

    .submitformbg .comment_card .card-header {
        background-color: #fff;
        border-bottom: transparent;
    }

.submitformbg #accordion .card-block {
    border-top: 1px solid rgba(0,0,0,.125);
    padding: 10px 20px;
    font-size: 16px;
}

.submitformbg #accordion p {
    font-size: 14px;
    color: #777777;
}


/* modal project request */

#page-content-wrapper .modal-header {
    border-bottom: transparent;
}

#page-content-wrapper .modal .projectreview {
    max-width: 50%;
}

#page-content-wrapper .modal .reviewdesc {
    height: 125px;
    overflow-y: scroll;
    text-align: left;
    border: 1px solid #ced4da;
    font-size: 14px;
    padding: 5px;
}

#page-content-wrapper .modal .projectreview h3 {
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}

#page-content-wrapper .modal .projectreqdialog {
    max-width: 85%;
}

#page-content-wrapper .modal .imgvidprojectreq img {
    width: 150px;
    height: 100px;
    vertical-align: inherit;
    object-fit: cover;
}

#page-content-wrapper .modal .imgvidprojectreq video {
    width: 150px;
    height: 100px;
}

#page-content-wrapper .modal .docprojectreq a {
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-right: 15px;
    border-bottom: 1px solid #000000;
}

#page-content-wrapper .modal img.signature {
    width: 200px;
    height: 150px;
    object-fit: contain;
}

/*------------------------------------------------------------------------------------
                                     USER PROFILE END
-------------------------------------------------------------------------------------*/


/*---------------------
  Footer
-----------------------*/

.footer-section {
    background: #262E38;
    padding-top: 80px;
}

    .footer-section.fo-logo {
        margin-bottom: 30px;
    }

    .footer-section ul {
        margin-bottom: 12px;
    }

        .footer-section ul li {
            list-style: none;
            font-size: 16px;
            color: #b3b3b3;
            line-height: 30px;
        }

.footer-widget {
    margin-bottom: 30px;
}

    .footer-widget h5 {
        text-transform: uppercase;
        color: #FFD700;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .footer-widget button {
        background-color: transparent;
        border: 2px solid #FFD700;
        color: #FFD700;
        padding: 10px 30px;
        margin-bottom: 15px;
    }

        .footer-widget button:hover {
            background-color: #FFD700;
            border: 2px solid #FFD700;
            color: #000000;
            font-weight: bolder;
            transition: 0.5s;
        }

    .footer-widget ul li {
        list-style: none;
    }

        .footer-widget ul li a {
            font-size: 14px;
            color: #ffffff;
            line-height: 36px;
        }

            .footer-widget ul li a:hover {
                color: #FFD700;
            }

        .footer-widget ul li p {
            font-size: 14px;
            color: #ffffff;
            line-height: 25px;
        }

    .footer-widget p {
        margin-bottom: 18px;
    }

.copyright-text img {
    width: 30px;
}

.copyright-text {
    border-top: 1px solid #707070;
    padding: 20px 15px;
}

    .copyright-text .rightside p {
        text-align: right;
        text-transform: uppercase;
        color: #707070;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .copyright-text .leftside p {
        text-align: left;
        text-transform: capitalize;
        color: #FFE700;
        font-size: 11px;
        letter-spacing: 1px;
    }

.footer-section .modal-dialog {
    width: 500px;
}

.footer-section .modal-content, .footer-section .modal-header, .footer-section .modal-footer {
    justify-content: unset;
    display: unset;
    border: none;
    text-align: center;
}

.footer-section .modal-header {
    padding: 0px;
}

.footer-section button {
    margin: 0px 5px;
    margin-bottom: 25px;
}

    .footer-section button.btn-primary {
        background-color: #ABD500;
        border: 1px solid #ABD500;
    }

    .footer-section button:hover {
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    }

.footer-section .modal img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: .3rem .3rem 0 0;
}

.footer-section button.close {
    right: 5px;
    color: #000000;
    transition: 0.4s;
}

    .footer-section button.close:hover {
        box-shadow: none;
        transform: scale(1.3);
        transition: 0.4s;
    }

.footer-section .contentpopup {
    position: absolute;
    bottom: 0px;
    color: #ffffff;
    background-color: rgba(63,63,63,0.8);
    padding: 10px 15px;
}

.contentpopup button {
    text-transform: uppercase;
    color: #262E38;
    background-color: #cacaca;
    font-weight: bold;
    padding: 2px 10px;
    font-size: 14px;
    margin: 0;
    margin-top: 10px;
}
/**checkbox**/

/************ BEST WORK USER PROFILE **********/
.best-work-line {
    border-top: 1px solid #cccccc;
}

.best-work p {
    margin-bottom: 10px;
}

.best-work .currently, .best-work .target {
    border-left: 1px solid #cccccc;
}

.best-work h3 {
    text-align: center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.best-work .bestwork-left {
    padding-right: 0;
}

    .best-work .bestwork-left div img {
        width: 100%;
    }

.best-work .bestwork-right-border {
    border: 2px solid #878889;
    padding: 10px 15px 10px 50px;
    margin-left: -45px;
    position: absolute;
    width: 100%;
    z-index: -1;
    top: 50%;
    -webkit-transform: translateY(-50%) skewX(-20deg);
    transform: translateY(-50%) skewX(-20deg);
    -ms-transform: translateY(-50%) skewX(-20deg);
    border-radius: 10px;
}

    .best-work .bestwork-right-border .right-border-content {
        transform: skewX(20deg);
    }

        .best-work .bestwork-right-border .right-border-content .bg-success {
            background-color: #abd500 !important;
        }

        .best-work .bestwork-right-border .right-border-content .bg-warning {
            background-color: #ffd800 !important;
        }

        .best-work .bestwork-right-border .right-border-content .bg-poor {
            background-color: #ce171f !important;
        }

.best-work .star-rate {
    margin-top: 10px;
}

    .best-work .star-rate .fa.fa-star {
        color: #cccccc;
        font-size: 16px;
    }

        .best-work .star-rate .fa.fa-star.checked {
            color: #a9995f;
        }

.best-work .pointerbestwork {
    cursor: pointer;
    transition: ease-in-out 0.8s;
}

    .best-work .pointerbestwork:hover {
        cursor: pointer;
        transition: ease-in-out 0.8s;
        transform: scale(1.1);
    }

/* BEST WORK FILTER */
.filter-best-work {
    border: 1px solid #7D7A7A;
    background-color: transparent;
    border-radius: 15px;
    padding: 5px 10px;
    width: 100%;
    margin-bottom: 5px;
    text-align: left;
    font-size: 14px;
    color: #7D7A7A;
    font-style: italic;
}

/* BEST WORK MODAL */
.detailbestwork .modal-header {
    background-image: url("../img/confetti.png"), linear-gradient(#ffd800, #ffd800);
    min-height: 100px;
    padding: 0 5px;
}

.detailbestwork .borderimg {
    background-color: #ffd800;
    padding: 25px;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    margin: auto;
    margin-top: -75px;
}

.detailbestwork h4 {
    font-weight: bold;
}

.detailbestwork .borderimg img {
    width: 100%;
}

.detailbestwork table {
    margin: auto;
    font-size: 12px !important;
}

    .detailbestwork table tr td, .detailbestwork table tr th {
        padding: 5px;
    }

        .detailbestwork table tr td.achieved {
            font-weight: bolder;
            color: #abd500;
        }

.detailbestwork small.desc {
    color: #abd500;
}
/* END BEST WORK MODAL */

/*---------------------
  About Us Page
-----------------------*/
/** new Ambassador**/
.doinggood {
    background-color: #ffe033;
    padding: 30px 15px;
}

    .doinggood h4 {
        font-weight: bolder;
        margin-bottom: 15px;
    }

    .doinggood p {
        margin-bottom: 15px;
        font-size: 12px;
    }

    .doinggood img {
        width: 100%;
    }

    .doinggood button {
        font-size: 18px;
        font-weight: bolder;
        border: 2px solid #000000;
        border-radius: 10px;
        background-color: transparent;
    }

.modal#becomeambassador h4 {
    color: #DF3730;
    margin-bottom: 0;
    line-height: 1;
    font-weight: bolder;
}

.modal#becomeambassador p {
    font-size: 9px;
}

.modal#becomeambassador label {
    font-size: 10px;
    font-weight: 600;
}

.modal#becomeambassador button.second-btn-full {
    background-color: #ce181f;
    border: none;
    color: #ffffff;
}

.ambassador {
    padding: 30px 15px;
}

.timeline {
    padding: 30px 15px;
    background: url(../img/timelinebg.jpg);
    text-align: center;
}

.ambassador h3 {
    text-align: center;
    font-weight: bolder;
    color: #A7A7A7;
    margin-bottom: 25px;
}

.ambassador .countrydetail {
    border: 1px solid #000000;
    border-radius: 10px;
    width: 200px;
    background-color: #ffffff;
    position: inherit;
    display: block;
    z-index: 1;
}

    .ambassador .countrydetail .title {
        background-color: #dedede;
        border-radius: 10px 10px 0 0;
        padding: 5px;
    }

        .ambassador .countrydetail .title img.icon {
            width: 25px;
        }

    .ambassador .countrydetail h5 {
        color: #002995;
        font-size: 12px;
        font-weight: 600;
    }

    .ambassador .countrydetail p {
        font-size: 10px;
        color: #9c9fa5;
    }

    .ambassador .countrydetail .border-line {
        border-left: 1px solid #000000;
    }

    .ambassador .countrydetail .row {
        border-bottom: 1px solid #000000;
    }

        .ambassador .countrydetail .row:nth-last-child(1) {
            border: none;
        }

.timeline h3 {
    text-align: center;
    font-weight: bolder;
    color: #ffffff !important;
    margin-bottom: 10px;
}

.ambassador .flagcountry img {
    width: 30px;
}

.ambassador .flagcountry p {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
}

.projectcard img.usertracking {
    height: 50px;
    width: auto;
    position: absolute;
    opacity: 0.8;
    left: 5px;
}

/* BEST WORK FILTER */
.filter-profile-dashboard {
    border: 1px solid #7D7A7A;
    background-color: transparent;
    border-radius: 15px;
    padding: 5px 10px;
    margin-bottom: 5px;
    text-align: left;
    font-size: 14px;
    color: #7D7A7A;
    font-style: italic;
}

select.filter-profile-dashboard:disabled {
    background-color: #d3d3d3;
}

.userprofiledetail .userimg.ambassadorborder img.ambassadoricon {
    position: absolute;
    z-index: 1;
    width: auto;
    height: 38px;
    object-fit: contain;
    top: 10px;
    right: 10px;
}

.userprofiledetail .userimg.ambassadorborder .contentuserimg img {
    width: 96%;
    height: 96%;
    object-fit: cover;
    -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
}

.userprofiledetail .userimg.ambassadorborder .square {
    position: relative;
    margin-top: -70%;
    background-color: #ffffff;
    padding: 2%;
    width: 100%;
    -webkit-clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
    clip-path: polygon(0 0, 0 100%, 50% 100%, 100% 65%, 100% 0);
    border: 0px;
}


/* START TAX receipt*/
.taxreceipt {
    padding-top: 80px;
}

    .taxreceipt img {
        margin-bottom: 15px;
    }

        .taxreceipt img.thankyou {
            width: 60%;
        }

    .taxreceipt p {
        color: #757575;
        font-size: 16px;
    }

    /*.taxreceipt b {
        font-weight: bolder;
    }*/

    .taxreceipt .receiptdetail, .taxreceipt .totalreceiptdetail, .taxreceipt {
        margin-top: 100px;
    }


        .taxreceipt .receiptdetail .redblock {
            background-color: #b42122;
            width: 10px;
        }

        .taxreceipt .totalreceiptdetail .greyblock {
            background-color: #595959;
            width: 10px;
        }

        .taxreceipt .linefooter .yellowblock {
            background-color: #fde602;
        }

        .taxreceipt .linefooter .gradientYellow {
            background-image: linear-gradient(to right, rgba(255,255,255,0), #fde602);
            height: 60px;
        }

        .taxreceipt .footer {
            margin-top: 20px;
            display: grid;
            grid-template-columns: 25% 5% 40% 30%;
        }

        .taxreceipt .textquote {
            margin-top: 70px;
            margin-left: 40px !important;
        }

            .taxreceipt .textquote p {
                font-size: 15px;
            }

        .taxreceipt .footer p {
            font-size: 12px;
        }

        .taxreceipt .footer .col-sm-4 {
            padding: 10px 50px;
            border-right: 1px solid #808080;
        }

            .taxreceipt .footer .col-sm-4:nth-last-child(1) {
                border-right: none;
            }

        .taxreceipt h4.greycolor, .taxreceipt h3.greycolor {
            text-transform: none !important;
            color: #808080;
        }

        .taxreceipt .footer .verticalLine {
            border-left: 3px solid #b7b7b7;
            height: 60px;
        }
/* END TAX receipt*/
/* END TAX RECIEPT*/
/* donation history popup*/
#detaildonationhistory, #detaildonationhistory p {
    font-size: 11px;
    margin-bottom: 0px;
}

    #detaildonationhistory .modal-header {
        border: none;
    }

        #detaildonationhistory .modal-header .close {
            margin: -1rem -1.5rem -1rem auto;
        }

    #detaildonationhistory table tr th, #detaildonationhistory table tr td {
        text-align: center;
        padding: 5px;
    }

    #detaildonationhistory table tr > td img {
        width: 50px;
    }

    #detaildonationhistory span.desc {
        background-color: #DFDFDF;
        border-radius: 10px;
        color: #58595B;
        font-size: 9px;
        letter-spacing: 0.5px;
        margin-left: 5px;
        margin-top: -8px;
        padding: 2px 5px;
        font-weight: 600;
    }

    #detaildonationhistory .footer-sec .address {
        padding-left: 4px;
    }

    #detaildonationhistory table tbody {
        display: block;
        max-height: 160px;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        #detaildonationhistory table tbody::-webkit-scrollbar {
            display: none;
        }

        #detaildonationhistory table thead, #detaildonationhistory table tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

    #detaildonationhistory table thead {
        width: 100%;
    }

    #detaildonationhistory table {
        width: 100%;
    }

        #detaildonationhistory table th.qty, #detaildonationhistory table td.qty {
            width: 10%;
        }

        #detaildonationhistory table th.detail-prod, #detaildonationhistory table td.detail-prod {
            width: 40%;
            text-align: left;
        }

/*---------------------
  Top Banner
-----------------------*/
.topbanner .topbanner-content {
    width: 95%;
    position: absolute;
    top: 28%;
    right: 5%;
}

    .topbanner .topbanner-content span {
        padding: 5px 10px;
        text-transform: uppercase;
        margin-right: 5px;
        font-weight: bold;
        font-size: 25px;
        border-radius: 5px;
    }

    .topbanner .topbanner-content p.bgyellow {
        color: #000000;
    }

    .topbanner .topbanner-content p.bgblack {
        color: #abd500;
    }

.topbanner .leftBanner {
    background-color: #FFD700;
    border-bottom: 4px solid #ffffff;
    border-top: 4px solid #ffffff;
    min-height: 300px;
    text-align: center;
}

.topbanner .rightBanner {
    padding: 0px;
    border: 2px solid #ffffff;
}

.topbanner .contentRightBanner {
    padding: 0px;
    border: 2px solid #ffffff;
    overflow: hidden;
    height: 200px;
}

.topbanner img {
    object-fit: cover;
}

.topbanner .img-hover-zoom--zoom-n-pan-h img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 100% 0;
}

.topbanner .img-hover-zoom--zoom-n-pan-h:hover img {
    transform: scale(1.5) translateX(30%);
}

.topbanner .img-hover-zoom--slowmo img {
    transform-origin: 50% 65%;
    transition: transform 3s, filter 1s ease-in-out;
    filter: brightness(70%);
}

.topbanner .img-hover-zoom--slowmo:hover img {
    filter: brightness(100%);
    transform: scale(1.5);
}

.topbanner .img-hover-zoom--colorize img {
    transition: transform .5s, filter 1.5s ease-in-out;
    filter: grayscale(100%);
}

.topbanner .img-hover-zoom--colorize:hover img {
    filter: grayscale(0);
    transform: scale(1.3);
}

.topbanner .img-hover-zoom--zoom-n-pan-v img {
    transition: transform .5s ease-in-out;
    transform: scale(1.4);
    transform-origin: 0 0;
}

.topbanner .img-hover-zoom--zoom-n-pan-v:hover img {
    transform: scale(1.25) translateY(-30%);
}

.contentRightBanner .title-block {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    bottom: 0px;
    padding: 5px 10px;
    width: 100%;
    height: 50px;
    text-align: right;
}

.title-block h5 {
    color: #ffffff;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 14px;
}

.title-block a {
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
    margin-bottom: 0px;
    font-style: italic;
    letter-spacing: 1px;
    cursor: pointer;
}

    .title-block a:hover {
        font-weight: bolder;
        color: #ffffff;
    }

.topbanner .left-content {
    position: absolute;
    width: 75%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .topbanner .left-content img {
        position: absolute;
        z-index: -1;
        width: 15%;
    }

    .topbanner .left-content .quote1 {
        left: -60px;
        margin-top: -40px;
    }

    .topbanner .left-content .quote2 {
        right: -40px;
        margin-top: -30px;
    }

.topbanner .leftBanner h2 {
    color: #000000;
    font-size: 40px;
    margin-bottom: 15px;
}

.topbanner .leftBanner p {
    color: #000000;
    line-height: 2;
    font-size: 20px;
}


/* new how it works - make difference & what we support */
.make-difference h5 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #000000;
    font-weight: 600;
    font-size: 20px;
}

.what-we-support h5 {
    text-align: center;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #000000;
    font-weight: bold;
    font-size: 20px;
}

.what-we-support h6 {
    font-size: 20px;
}

.make-difference p {
    text-align: center;
    color: #000000;
    font-size: 18px;
}

.what-we-support p {
    text-align: center;
    color: #000000;
    font-size: 18px;
    padding-left: 15px;
    padding-right: 15px;
}

.make-difference p span {
    font-style: italic;
    font-weight: bold;
}

.make-difference img {
    width: 70%;
}

.what-we-support img {
    width: 100%;
}

.make-difference .poin1, .make-difference .poin2, .make-difference .poin3,
.make-difference .poin4, .make-difference .poin5, .make-difference .poin6, .make-difference .poin7 {
    height: 100%;
    padding: 20px 25px;
    text-align: center;
}

.what-we-support .poin1, .what-we-support .poin2, .what-we-support .poin3,
.what-we-support .poin4, .what-we-support .poin5, .what-we-support .poin6 {
    height: 100%;
    padding: 0px;
    padding-bottom: 25px;
    text-align: center;
}

.make-difference .poin1 {
    background-color: #cc7059;
}

.make-difference .poin2 {
    background-color: #fbed82;
}

.make-difference .poin3 {
    background-color: #d9d9d9;
}

.make-difference .poin4 {
    background-color: #938bba;
}

.make-difference .poin5 {
    background-color: #d5bc91;
}

.make-difference .poin6 {
    background-color: #a1bebb;
}

.make-difference .poin7 {
    background-color: #a6a6a6;
}

    .make-difference .poin7 p {
        text-align: right;
    }

    .make-difference .poin7 .col-md-4:nth-child(2), .what-we-support .poin6 .col-md-6:nth-child(1) {
        border-right: 10px solid #ffffff;
        padding-right: 30px;
    }

    .make-difference .poin7 .share img {
        width: 25%;
        margin: 0px 15px;
        cursor: pointer;
    }

.make-difference .new-content p, .make-difference ul {
    font-size: 16px;
}

.make-difference ul {
    margin-left: 40px;
    margin-top: 5px;
}

.make-difference .new-content h5 {
    color: #FF0000;
}

.what-we-support .poin1 {
    background-color: #b5e1f5;
}

.what-we-support .poin2 {
    background-color: #f8d5c6;
}

.what-we-support .poin3 {
    background-color: #f79a6c;
}

.what-we-support .poin4 {
    background-color: #f7f9f9;
}

.what-we-support .poin5 {
    background-color: #fefadc;
}

.what-we-support .poin6 {
    background-color: #98c8c3;
    padding: 25px
}

    .what-we-support .poin6 h5, .what-we-support .poin6 h6 {
        text-align: left;
    }


/*-------------------------------- Respinsive Media Styles --------------------------------*/
@media only screen and (min-width: 768px) {
    .userprofiledetail .leftside, .userprofiledetail .rightside {
        background-color: transparent;
        text-align: left;
    }

    #sidebar-wrapper {
        margin-left: 0;
    }

        #sidebar-wrapper .list-group {
            width: 20rem;
        }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -20rem;
    }

    .profilepicture-hover-zoom i {
        left: 41px;
    }
}

@media only screen and (max-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }

    .userprofiledetail .square {
        margin-top: -50%;
    }

    .userprofiledetail .leftside h4 {
        font-size: 16px;
    }

    .userprofiledetail .leftside p {
        font-size: 11px;
    }

    .userprofiledetail .rightside p, .userprofiledetail .rightside button {
        font-size: 9px;
    }


    .clickableDivSubmit {
        right: 25%;
    }

    .clickableDivDraft {
        left: 26%;
    }

    .whatispwh-text h2 {
        font-size: 28px;
    }

    .whatispwh-text p {
        font-size: 20px;
    }

    .right-content h2 {
        margin-top: 30px;
        font-size: 28px !important;
    }

    .right-content p {
        font-size: 20px !important;
    }

    .howpwhwork h4 {
        font-size: 28px !important;
    }
    .howpwhwork .positionContent img {
        width: 100px;
    }
    .howpwhwork .positionContent a {
        font-size: 24px;
    }
}

@media only screen and (min-width: 280px) and (max-width: 560px) {
    #sidebar-wrapper {
        margin-left: 0;
    }

        #sidebar-wrapper .list-group {
            width: 10rem;
        }

    #page-content-wrapper {
        min-width: 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

        #page-content-wrapper .listcontent {
            font-size: 11px;
        }

        #page-content-wrapper h3 {
            font-size: 18px;
        }

    #wrapper.toggled #sidebar-wrapper {
        margin-left: -10rem;
    }

    .userprofiledetail .square {
        width: 50%;
        margin: auto;
        right: 0;
        left: 0;
        margin-top: -40%;
        margin-bottom: 15px;
    }

    .userprofiledetail .userimg.ambassadorborder .square {
        width: 50% !important;
        margin: auto;
        right: 0;
        left: 0;
        margin-top: -40% !important;
        margin-bottom: 15px;
    }

    .userprofiledetail {
        background: transparent;
        padding: 0;
    }

        .userprofiledetail .leftside {
            background-color: #DBE6EB;
            text-align: center;
            padding-bottom: 15px;
        }

        .userprofiledetail .rightside {
            background-color: #272E38;
            text-align: center;
            padding: 10px 15px;
        }

            .userprofiledetail .rightside div.col-6 {
                padding-left: 15px;
            }

            .userprofiledetail .rightside button {
                margin-top: 10px;
            }

    .contentuserprofile .list-group-item-action, .contentuserprofile .buttonsidebarbottom {
        /*padding-left: 15px;
        padding-right: 5px;*/
        font-size: 10px;
    }

    .contentuserprofile .purple-btn-full, .contentuserprofile .primary-btn-full, .contentuserprofile .second-btn-full, .contentuserprofile .tertiary-btn-full {
        font-size: 10px;
        padding: 5px 10px;
    }

    .contentuserprofile .purplebtn, .contentuserprofile .redbtn, .contentuserprofile .greenbtn, .contentuserprofile .yellowbtn, .contentuserprofile .brownbtn, .contentuserprofile .borderbtn {
        margin-top: 10px;
        width: 40%;
    }

    #page-content-wrapper .modal .projectreqdialog {
        max-width: 100%;
    }

    #page-content-wrapper .modal .imgvidprojectreq img {
        width: 100px;
        height: 60px;
    }

    .topbanner-content {
        background-color: #bcaf82;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%;
        position: relative;
    }

        .topbanner-content span {
            padding: 4px;
            text-transform: uppercase;
            margin-right: 1px;
            font-size: 9px;
            font-weight: bolder;
            border-radius: 2px;
        }

        .topbanner-content p.bgblack {
            color: #ffffff;
        }

    .userprofiledetail .contentuserimg {
        position: absolute;
        width: 92%;
        height: 92%;
    }

    .userprofiledetail .userimg.ambassadorborder img.ambassadoricon {
        position: absolute;
        z-index: 1;
        width: auto !important;
        height: 38px;
        object-fit: contain;
        top: -15px !important;
        right: 25% !important;
    }

    .visionandprinciple .rightside {
        border: none;
        padding-left: 15px;
        padding-top: 25px;
    }

    .modal#becomeambassador h4 {
        font-size: 22px;
    }

    .logo img {
        height: auto;
        width: auto;
    }

    .clickableDivSubmit {
        right: 19% !important;
    }

    .clickableDivDraft {
        left: 20% !important;
    }

    .whatispwh-text h2 {
        font-size: 24px;
    }

    .whatispwh-text p {
        font-size: 17px;
    }

    .right-content h2 {
        margin-top: 30px;
        font-size: 24px !important;
    }

    .right-content p {
        font-size: 17px !important;
    }

    .howpwhwork h4 {
        font-size: 22px !important;
    }

    .howpwhwork .positionContent img {
        width: 90px;
    }

    .howpwhwork .positionContent a {
        font-size: 20px;
    }

    #homebanner img {
        height: 25vh !important;
    }

    #homebanner {
        margin-top: 90px;
    }
}

@media (max-width:1200px) {
    .clickableDivSubmit {
        right: 32% !important;
    }

    .clickableDivDraft {
        left: 33% !important;
    }
}

@media (max-width:1024px) {
    .sectionheight {
        margin-top: 70px;
    }

    .main-menu ul li a {
        font-size: 11px;
        padding: 0px 25px;
    }
}

@media (max-width:992px) {
    .sectionheight {
        margin-top: 54px;
    }

    .main-menu ul li a {
        font-size: 11px;
        padding: 0px 10px;
    }

    .main-menu ul li button {
        font-size: 11px;
        padding: 5px 10px;
    }

    .header-section img.userprofile {
        margin: 2px 10px;
    }

    .contenteventnews img {
        height: 225px;
    }

    .clickableDivSubmit {
        right: 24% !important;
    }

    .clickableDivDraft {
        left: 25% !important;
    }
}

@media (max-width:429px) {
    .clickableDivSubmit {
        right: 14% !important;
    }

    .clickableDivDraft {
        left: 16% !important;
    }
}

@media (max-width:388px) {
    .clickableDivSubmit {
        right: 12% !important;
    }

    .clickableDivDraft {
        left: 14% !important;
    }
}

@media (max-width:356px) {
    .clickableDivSubmit {
        right: 5% !important;
    }

    .clickableDivDraft {
        left: 7% !important;
    }
}

/* IPAD only */
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
    .donationjoinbox .donationamount .borderbutton {
        padding-left: 20%;
    }

    .donationjoinbox .donationamount .borderamount100 {
        padding-left: 0;
    }

    .donationjoinbox .donationamount .borderbutton1 i {
        font-size: 15px;
        bottom: 30px;
    }

    .donationjoinbox .donationamount input {
        font-size: 18px;
    }

    .donationjoinbox .donationamount h2 {
        font-size: 20px;
        margin-top: 10px;
        font-weight: bold;
    }

    .donationjoinbox .donationamount input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font-size: 14px;
    }

    .donationjoinbox .donationamount input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        font-size: 14px;
    }

    .donationjoinbox .donationamount input::-ms-input-placeholder { /* Microsoft Edge */
        font-size: 14px;
    }

    .donationjoinbox .borderbox .monthlyonceoff {
        font-size: 16px;
    }

    .best-work p {
        margin-bottom: 15px;
    }

    .topbanner .topbanner-content {
        position: absolute;
        top: 8%;
        right: 5%;
        z-index: 1;
    }

        .topbanner .topbanner-content span {
            padding: 2px 5px;
            font-size: 20px;
            border-radius: 2px;
        }

    .userprofiledetail .userimg.ambassadorborder img.ambassadoricon {
        position: absolute;
        z-index: 1;
        height: 30px;
        width: auto;
        object-fit: contain;
        top: 5px;
        right: 0px;
    }

    .ordersummary .content-block .product-img {
        width: 90%;
        text-align: center;
    }

    .ordersummary .content-block .detail-product p {
        font-size: 12px;
        line-height: 1;
    }

    #homebanner {
        margin-top: 100px;
    }
    #homebanner img {
        height: 20vh !important;
    }
    .profilepicture-hover-zoom i {
        left: 40px;
    }
}

/* IPAD PRO only */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .topbanner .topbanner-content {
        position: absolute;
        top: 10%;
        right: 5%;
        z-index: 1;
    }

        .topbanner .topbanner-content span {
            padding: 2px 5px;
            font-size: 24px;
            border-radius: 2px;
        }

    #homebanner {
        margin-top: 100px;
    }

        #homebanner img {
            height: 20vh !important;
        }
}

@media only screen and (min-width: 1025px) and (max-width: 1057px) {
    .main-menu ul li a {
        font-size: 10px;
        padding: 0px 15px;
    }
}

/* Large Mobile: 480px */
@media only screen and (max-width: 767px) {
    .logo img {
        width: 50%;
    }

    .main-menu {
        text-align: right;
        display: none;
    }

    .slicknav_nav button {
        background-color: #FFD700;
        color: #000000;
        font-size: 14px;
        font-weight: bold;
        border-radius: 10px;
        padding: 5px 20px;
        border: none;
        margin: 8px 30px;
    }

        .slicknav_nav button:hover {
            box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
        }

    .slicknav_nav img.userprofile {
        margin-left: 30px;
    }

    .slicknav_btn {
        margin: 0;
        border-radius: 0;
        background-color: #666;
        position: absolute;
        right: 15px;
        top: 20px;
        display: inline-block;
        float: none;
    }

    .slicknav_nav {
        background: #666;
        display: block;
    }

    .slicknav_menu {
        display: block;
        background: transparent;
        padding: 0;
    }

    .header-section .container {
        position: relative;
    }

    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        padding: 8px 30px;
        margin: 0;
    }

    .slicknav_nav ul {
        margin: 0;
    }

    .diagonal-box-r, .diagonal-box-y, .diagonal-box-g, .diagonal-box-b {
        transform: none;
        box-shadow: none;
    }

    .content {
        transform: none;
    }

    .slicknav_nav a:hover {
        border-radius: 0;
        background: #FFD700;
        color: #ffffff;
    }

    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: #FFD700;
        color: #ffffff;
    }

    .slicknav_nav .slicknav_item a .fa {
        display: none;
    }

    .topbanner .left-content .quote1 {
        left: -20px;
        margin-top: -10px;
    }

    .topbanner .left-content .quote2 {
        right: -20px;
        margin-top: -10px;
    }

    .topbanner .leftBanner h2 {
        font-size: 30px;
    }

    .topbanner .leftBanner p {
        padding-left: 15px;
        color: #3F3E40;
        font-size: 20px;
        font-style: italic;
    }

    #idprojectcard #selectPeriodRangePanel {
        margin-top: 80px;
    }

    .howitworks .bgline {
        background: transparent;
    }

    #detailproject .bgowner {
        width: 100%;
    }

    #detailproject .ownerdesc {
        padding-top: 20px;
        text-align: center;
    }

        #detailproject .ownerdesc h3 {
            font-size: 20px;
        }

    #detailproject h4 {
        font-weight: bold;
    }

    #detailproject h5 {
        margin-top: 0px;
        font-size: 13px;
    }

    #detailproject img.ownerimg {
        width: 20%;
    }

    #detailproject a.nav-link {
        padding: 2px 10px;
        font-size: 10px;
        padding-right: 10px;
        color: #888888;
        font-weight: bold;
    }

    #detailproject .tab-content {
        margin-bottom: 15px;
    }

    .projectbtn .img_i_vote, .projectbtn .img_i_doc, .projectbtn .img_i_share, .projectbtn .budgetreq {
        margin-top: 20px;
    }

    .projectbtn #select_i_share {
        display: none;
        position: absolute;
        background-color: #ffffff;
        padding: 10px 10px 5px 10px;
        left: 20%;
        margin-top: 100px;
    }

    #submit-project-guidelines .middleside {
        border: none;
    }

    #submit-criteria .leftside, #submit-criteria .rightside {
        padding: 0px 15px;
    }

    #submit-criteria .leftside {
        border: none;
    }

    #submit-criteria .submitnote {
        text-align: center;
    }

        #submit-criteria .submitnote img {
            position: relative;
            width: 150px;
            top: 15px;
        }

    .faq .card .leftsideQ, .faq .card .leftsideA {
        font-size: 30px;
        display: flex;
        align-items: center;
    }

    .faq h2 {
        font-size: 30px;
        margin-bottom: 50px;
    }

    .faq span.third {
        right: 45px;
        font-size: 12px;
        bottom: 30px;
    }

    .faq span.first {
        font-size: 70px;
        left: 5px;
        top: -25px;
    }

    .faq span.second {
        font-size: 70px;
        right: 15px;
        bottom: -10px;
    }

    .faq .accordion .card-header:after {
        margin-top: -11%;
        margin-right: 5px;
        font-size: 14px;
    }

    .contactus .headertext h1 {
        font-weight: bolder;
        top: -70px;
        left: 50px;
        font-size: 20px;
    }

    .legalcontent table {
        margin-top: 15px;
    }

    .legalpwhggrowth h2 {
        font-size: 24px;
    }

    .certificates .certext {
        padding: 30px 0px 0px 0px;
    }

    .certificates img {
        width: 100%;
        position: relative;
        right: 0px;
        margin-top: 0px;
    }

    .detailcampaigneventnews .detailcontent {
        column-count: 1;
        -webkit-column-count: 1;
        -moz-column-count: 1;
        -moz-column-count: 1;
        column-gap: 30px;
    }

    .payrollthankyou img {
        width: 50%;
        margin-bottom: 15px;
    }

    .donationjoinbox .donationamount input {
        font-size: 18px;
        background-color: rgba(255,255,255,0.5);
    }

    .donationjoinbox .donationamount .borderbutton1 i {
        right: 5px;
    }

    .donationjointext h3 {
        font-size: 22px;
    }

    .donationjoinbox .borderbox {
        background-color: rgba(255,255,255,0.95);
    }

    .donationbottom .borderstyle h2 {
        font-size: 28px;
    }

    .donationjoinbox .donationamount .borderbutton {
        padding-left: 0;
    }

    .donationjoinbox .donationamount .borderamount100 {
        padding-left: 0;
    }

    .donationjoinbox .donationamount h2 {
        font-size: 25px;
        margin-top: 10px;
        font-weight: bold;
    }

    .copyright-text .rightside p {
        text-align: center;
        padding-top: 25px;
    }

    .copyright-text .leftside p {
        text-align: center;
    }

    .footer-section .modal-dialog {
        width: 90%;
    }

    .best-work .star-rate .fa.fa-star {
        font-size: 10px;
    }

    .best-work h3 {
        font-size: 14px !important;
        font-weight: bold;
    }

    .best-work p {
        font-size: 6px;
        font-weight: bold;
    }

    .detailbestwork p {
        font-size: 12px;
        font-weight: normal;
    }

    .best-work .bestwork-right-border {
        border: 1px solid #878889;
        padding: 5px 5px 5px 15px;
        margin-left: -15px;
        position: absolute;
        width: 100%;
        z-index: -1;
        top: 50%;
        -webkit-transform: translateY(-50%) skewX(-10deg);
        transform: translateY(-50%) skewX(-10deg);
        -ms-transform: translateY(-50%) skewX(-10deg);
        border-radius: 5px;
    }

        .best-work .bestwork-right-border .right-border-content {
            transform: skewX(10deg);
        }

    .best-work .star-rate {
        margin-top: 5px;
        line-height: 0.5;
    }

        .best-work .star-rate .fa.fa-star {
            font-size: 6px;
            letter-spacing: 0px;
        }
    /* BEST WORK FILTER */
    .filter-best-work {
        padding: 2px 5px;
        font-size: 12px;
    }

    .ordersummary .content-block .detail-product {
        position: relative;
        bottom: auto;
    }

    .ordersummary .content-block .product-img {
        width: 100%;
    }
    /* DONATION HISTORY MODAL*/
    #detaildonationhistory, #detaildonationhistory p {
        font-size: 9px;
        margin-bottom: 0px;
    }

    /* new how it works - make difference */
    .make-difference .poin7 .col-md-4:nth-child(2) {
        border-right: 10px solid #ffffff;
        padding-right: 10px;
    }
}

/*---------------------
  Detail NEW CAMPAIGN
-----------------------*/
.newcampaigns {
    padding: 40px 15px;
    text-align: center;
    color: #000000;
}

    .newcampaigns h3 {
        font-weight: bolder;
        margin-bottom: 15px;
    }

    .newcampaigns p {
        color: #000000;
        text-align: justify;
        font-size: 16px;
        margin-bottom: 15px;
    }

    .newcampaigns video {
        width: 100%;
        object-fit: cover;
    }

.temp1, .temp2, .temp4 {
    background-color: #ddddde;
    text-align: left;
}

.temp3 {
    background-color: #ffffff;
}

.temp4 .detailcontent div {
    column-count: 2;
    column-gap: 40px;
}

.temp1 img {
    width: 100%;
    margin-bottom: 15px;
    height: 325px;
    object-fit: cover;
}

.temp2 img {
    width: 100%;
    height: 215px;
    object-fit: cover;
}

.temp2 .three-images .leftside .col-6 img {
    height: 150px;
}

.temp2 .three-images .leftside .col-12 img {
    height: 250px;
}

.temp2 .one-images img {
    height: 300px;
}

.temp3 img {
    margin-bottom: 15px;
}

.temp4 img {
    width: 100%;
    margin-bottom: 15px;
}

.temp4 video {
    width: 100%;
}

.card-columns.onlytwo, .card-columns.onlyone {
    column-count: 1;
}

    .card-columns.onlytwo img {
        width: 40%;
        text-align: center;
        margin: 0px 10px;
    }

    .card-columns.onlyone img {
        width: 50%;
        text-align: center;
        margin: 0px 10px;
    }

@media (min-width: 576px) {
    .card-columns {
        column-count: 2;
    }
}

@media (min-width: 768px) {
    .card-columns {
        column-count: 3;
    }
}

@media (min-width: 1200px) {
    .card-columns.morethanfour {
        column-count: 4;
    }

    .card-columns.onlythree {
        column-count: 3;
    }
}


/* footage carousel & ongoing projects carousel */
.footage-carousel, .ongoing-project-carousel {
    background-color: #272e38;
    padding: 30px 15px 20px 15px;
}

    .footage-carousel h3, .ongoing-project-carousel h3 {
        font-weight: bolder;
        margin-bottom: 15px;
        text-align: center;
        color: #ffe700;
    }

.slider-footage, .slider-projects {
    margin-bottom: 30px;
    position: relative;
}

    .slider-footage .owl-item.active.center .slider-card, .slider-projects .owl-item.active.center .slider-card {
        transform: scale(1.3);
        opacity: 1;
    }

    .slider-footage .slider-card, .slider-projects .slider-card {
        padding: 0px 0px;
        margin: 40px 10px 50px 10px;
        transform: scale(0.9);
        opacity: 0.5;
        transition: all 0.3s;
    }

        .slider-footage .slider-card img, .slider-footage .slider-card video {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border: 2px solid #ffffff;
        }

    .slider-projects .projectcard .cardborder img {
        height: 125px;
    }

    .slider-projects .projectcard img.topcorner {
        width: 50%;
        height: auto;
        position: absolute;
        right: 0px;
        opacity: 0.8;
    }

    .slider-projects .projectcard p.contenttopcorner {
        text-align: right;
        position: absolute;
        margin-top: -1px;
        right: 5px;
        width: 50%;
        color: #ffffff;
        font-size: 10px;
        font-weight: bold;
        padding: 10px 10px;
    }

    .slider-projects .projectcard .cardborder .cardtitleActive {
        font-size: 12px;
        line-height: 1;
        min-height: 35px;
        color: #000000;
    }

    .slider-projects .projectcard .cardborder .cardtitle {
        font-size: 12px;
        line-height: 1;
        min-height: 35px;
        color: #000000;
    }

    .slider-footage .owl-nav .owl-prev, .slider-projects .owl-nav .owl-prev {
        position: absolute;
        top: calc(50% - 25px);
        left: 0;
        opacity: 1;
        font-size: 30px !important;
        z-index: 1;
    }

    .slider-footage .owl-nav .owl-next, .slider-projects .owl-nav .owl-next {
        position: absolute;
        top: calc(50% - 25px);
        right: 0;
        opacity: 1;
        font-size: 30px !important;
        z-index: 1;
    }

    .slider-footage .fa, .slider-projects .fa {
        color: #ffe700;
    }

    .slider-footage .owl-dots, .slider-projects .owl-dots {
        text-align: center;
    }

        .slider-footage .owl-dots .owl-dot, .slider-projects .owl-dots .owl-dot {
            height: 10px;
            width: 10px;
            border-radius: 10px;
            background: none;
            border: 2px solid #cccccc;
            margin-left: 3px;
            margin-right: 3px;
        }

            .slider-footage .owl-dots .owl-dot.active, .slider-projects .owl-dots .owl-dot.active {
                background: #ffe700 !important;
                border: 2px solid #ffe700;
            }

/* campaign footer */
.campaign-footer {
    color: #000;
    padding: 20px 5px 30px 5px;
}

    .campaign-footer .row div:nth-child(3) {
        border-left: #808285 2px solid;
        border-right: #808285 2px solid;
    }

    .campaign-footer img.mail-icon {
        width: 100%;
    }

/* modal video footage */
.modal-dialog.videoftg .modal-content {
    background-color: transparent;
}

.modal-dialog.videoftg .modal-body {
    padding: 0;
    width: 600px;
}

.modal-dialog.videoftg button.close {
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

@media (max-width: 576px) {
    .newcampaigns h3 {
        font-size: 24px;
        font-weight: bolder;
    }

    .card-columns.onlytwo img, .card-columns.onlyone img {
        width: 100%;
        margin: 0;
        margin-bottom: 15px;
    }

    .temp4 .detailcontent div {
        column-count: 1;
    }

    .temp4 video {
        width: 100%;
    }

    .campaign-footer img.mail-icon {
        width: 30%;
    }

    .campaign-footer .row div:nth-child(3) {
        border-left: none;
        border-right: #808285 2px solid;
    }

    .slider-footage .slider-card img, .slider-footage .slider-card video {
        height: 175px;
    }

    .modal-dialog.videoftg button.close {
        right: 0px;
    }

    .modal-dialog.videoftg .modal-body {
        width: 100%;
    }

    .contentuserprofile .greenbtn.twocol, .contentuserprofile .yellowbtn.twocol, .contentuserprofile .redbtn.twocol {
        width: 31%;
    }
}

select.filter-user-profile {
    width: 100%;
    display: inline;
    margin-bottom: 4px;
}

.search-box button.input-group-text {
    border-radius: 0 0.25rem 0.25rem 0;
    background-color: #ced4da;
}

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

    select.filter-user-profile {
        width: 100%;
    }
}

.change-currency {
    position: sticky;
    top: 90px;
    background-color: #ffffff;
    z-index: 2;
    padding: 10px 0px;
    margin-bottom: 5px;
}

    .change-currency select {
        padding: 5px;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        color: #58595B;
    }

.approval-result-message {
    text-align: center;
    color: #A7A7A7;
    font-style: italic;
    margin: 40px 15px 30px 15px;
}

/**** CAMPAIGN CARBON - ECOMMERCE ****/
.content-offset {
    background-color: #EDECEC;
    text-align: center;
}

    .content-offset h2 {
        -webkit-text-stroke: 1.5px #111111;
        text-shadow: 0px 0px 1px #111111;
        font-weight: bold;
        margin-bottom: 25px;
    }

        .content-offset h2 span {
            -webkit-text-stroke: 1.5px #00B3B3;
            color: #00B3B3;
            text-transform: uppercase;
        }

    .content-offset .ecommerce-head {
        background-color: #ffffff;
        border-radius: 50px 50px 0px 0px;
        padding: 10px 30px;
    }

#ecommerce {
    overflow-x: hidden;
    padding-top: 30px;
    padding-bottom: 30px;
}

#sidebar-ecommerce {
    min-height: 60vh;
    margin-left: -15rem;
    background-color: transparent;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

    #sidebar-ecommerce .list-group {
        width: 20rem;
    }


.content-ecommerce .list-group-item-action {
    padding-left: 30%;
    background-color: transparent;
    text-transform: uppercase;
    color: #878889;
    font-size: 14px;
    border: none;
}

    .content-ecommerce .list-group-item-action.active {
        color: #000000;
        font-weight: bolder;
    }

.page-content-ecommerce {
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 25px;
    text-align: left;
}

    .page-content-ecommerce .block-e-card {
        margin-bottom: 25px;
    }

        .page-content-ecommerce .block-e-card .e-card {
            border-bottom: 5px solid transparent;
            border-image: linear-gradient(to right, #00D1D1, #ffffff) 1 100%;
            border-image-slice: 1;
            width: 100%;
            box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
            padding-bottom: 15px;
        }

            .page-content-ecommerce .block-e-card .e-card img {
                margin-bottom: 15px;
                height: 250px;
                width: 100%;
                object-fit: cover;
            }

            .page-content-ecommerce .block-e-card .e-card .price-tag {
                background-color: #00D2D3;
                font-weight: bold;
                color: #ffffff;
                padding: 5px 10px;
                width: fit-content;
                text-align: center;
                position: absolute;
                right: 15px;
                top: 0;
            }

            .page-content-ecommerce .block-e-card .e-card h3 {
                font-weight: bolder;
                font-size: 28px;
                width: fit-content;
                display: inline-block;
                word-break: break-word;
            }

            .page-content-ecommerce .block-e-card .e-card .grey-stock {
                padding-left: 5px;
                text-align: center;
                border-left: 1.5px solid #cccccc;
                margin-left: 5px;
                color: #cccccc;
                display: inline-block;
                line-height: 1;
                font-size: 8px;
            }

                .page-content-ecommerce .block-e-card .e-card .grey-stock span.stock {
                    font-size: 13px;
                    font-weight: bold;
                }

            .page-content-ecommerce .block-e-card .e-card .product-opt {
                display: inline-block;
                border: 1px solid #00D2D3;
                color: #58585A;
                padding: 2px 5px;
                min-width: 35px;
                background-color: #ffffff;
                margin: 2px;
                font-size: 14px;
                cursor: pointer;
            }

                .page-content-ecommerce .block-e-card .e-card .product-opt.active {
                    background-color: #00D2D3;
                    border: 1px solid #00D2D3;
                    color: #ffffff;
                }

            .page-content-ecommerce .block-e-card .e-card input[type=number] {
                text-align: center;
                border: none;
                -moz-appearance: textfield;
            }

            .page-content-ecommerce .block-e-card .e-card input::-webkit-outer-spin-button,
            .page-content-ecommerce .block-e-card .e-card input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            .page-content-ecommerce .block-e-card .e-card .btnincrementers {
                background-color: #000000;
                color: #ffffff;
                border-radius: 100%;
                border: none;
                font-size: 16px;
                font-weight: bold;
                width: 30px;
                height: 30px;
                line-height: 1;
            }

            .page-content-ecommerce .block-e-card .e-card .primary-btn {
                background-color: #000000;
                border-radius: 0px;
                border: none;
                color: #ffffff;
                padding: 5px 0px;
            }

#ecommerce {
    display: flex;
}

    #ecommerce.toggled #sidebar-ecommerce {
        margin-left: 0;
    }

.content-ecommerce .category-mobile ul.list-group {
    white-space: nowrap;
    overflow-x: auto;
}

    .content-ecommerce .category-mobile ul.list-group::-webkit-scrollbar {
        display: none;
    }

.content-ecommerce .category-mobile .list-group-item {
    border: none;
    border-radius: 0;
    width: fit-content;
    display: inline-block;
    white-space: nowrap;
    float: none;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #878889;
}

    .content-ecommerce .category-mobile .list-group-item.active {
        background-color: transparent;
        font-weight: bold;
        color: #000000;
        border-bottom: 5px solid;
    }

.ecommerce-modal .modal-title {
    font-weight: bold;
    font-size: 22px;
}

.ecommerce-modal .price-tag {
    background-color: #00D2D3;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 10px;
    width: fit-content;
    text-align: center;
    margin-left: 15px;
}

.ecommerce-modal .modal-body img {
    height: 250px;
    width: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}


@media only screen and (min-width: 767px) {
    #sidebar-ecommerce {
        margin-left: 0;
    }

        #sidebar-ecommerce .list-group {
            width: 20rem;
        }

    .page-content-ecommerce {
        min-width: 0;
        width: 100%;
    }

    #ecommerce.toggled #sidebar-ecommerce {
        margin-left: -20rem;
    }
}

@media only screen and (max-width: 768px) {
    #sidebar-ecommerce {
        margin-left: 0;
    }

    .page-content-ecommerce {
        min-width: 0;
        width: 100%;
    }

    #ecommerce {
        display: block;
    }
}

@media only screen and (min-width: 280px) and (max-width: 576px) {
    #sidebar-ecommerce {
        margin-left: 0;
    }

    #ecommerce {
        padding-top: 0px;
    }

    #sidebar-ecommerce .list-group {
        width: 10rem;
    }

    .page-content-ecommerce {
        min-width: 0;
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    #ecommerce.toggled #sidebar-ecommerce {
        margin-left: -10rem;
    }

    .content-offset h2 {
        font-size: 38px;
    }

    .content-offset .ecommerce-head {
        border-radius: 20px 20px 0px 0px;
        padding: 10px;
        font-size: 14px;
    }

    .page-content-ecommerce .block-e-card .e-card h3 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .page-content-ecommerce .block-e-card .e-card .leftside {
        text-align: center;
    }

    .page-content-ecommerce .block-e-card .e-card input[type=number] {
        padding: 0;
        font-size: 12px;
    }

    .page-content-ecommerce .block-e-card .e-card .btnincrementers {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }

    .page-content-ecommerce .block-e-card .e-card img {
        height: 100px;
        width: 100%;
        object-fit: cover;
    }

    .page-content-ecommerce .block-e-card .e-card .product-opt {
        padding: 3px;
        font-size: 8px;
    }

    .page-content-ecommerce .block-e-card .e-card .grey-stock {
        display: none;
    }

    .ecommerce-modal .modal-body img {
        height: 250px;
        width: 100%;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .page-content-ecommerce .block-e-card {
        margin-bottom: 15px;
        padding: 0px 5px;
    }

        .page-content-ecommerce .block-e-card .e-card .price-tag {
            position: absolute;
            right: 5px;
            top: 0;
            font-size: 12px;
            padding: 5px;
        }

    .primary-btn {
        font-size: 9px;
    }
}

/*** CLICK HERE TO OTHER DRAFTS ***/
#click-me {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
    position: fixed;
    z-index: 1;
    right: 50px;
    bottom: 40px;
    height: 70px;
    width: 70px;
    line-height: 1;
    font-size: 20px;
    padding: 0px;
    border: 0;
    text-align: center;
    background: #FFD700;
    cursor: pointer;
    border: 1px solid #FFD700;
    -moz-animation: shakeme 3s infinite;
    -o-animation: shakeme 3s infinite;
    -webkit-animation: shakeme 3s infinite;
    animation: shakeme 3s infinite;
}

    #click-me h3 {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    #click-me p {
        font-size: 10px;
        color: #000000;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    #click-me i.fa {
        position: absolute;
        font-size: 40px;
        left: 50%;
        transform: translateX(-50%);
        top: -30px;
        color: #FFD700;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out;
        transition: all 0.35s ease-in-out;
    }

    #click-me:hover {
        font-size: 24px;
        background: #DF3730;
        border: 1px solid #DF3730;
    }

        #click-me:hover i.fa {
            color: #DF3730;
        }

        #click-me:hover h3, #click-me:hover p {
            color: #ffffff;
        }

@keyframes shakeme {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    5% {
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
    }

    10% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
    }

    15% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
        -o-transform: scale(1.4);
    }

    30% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
    }
}

@media only screen and (max-width: 576px) {
    #click-me {
        right: 20px;
        bottom: 20px;
    }
}

/* NOTIFICATION TO DRAFT PAGE */
.notification-box {
    background-color: rgba(255, 215, 0, 0.7);
    color: #6C6C6C;
    padding: 10px 15px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    letter-spacing: 1px;
    font-weight: bold;
    border-radius: 3px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.3);
    z-index: 1;
}

    .notification-box a {
        color: #6C6C6C;
        text-decoration: underline;
        -webkit-text-stroke: 0.5px #6C6C6C;
    }


    .notification-box button.close {
        position: absolute;
        top: 5px;
        right: 8px;
        font-size: 1rem;
        z-index: 1;
    }

@media only screen and (max-width: 576px) {
    .notification-box {
        max-width: 250px;
        letter-spacing: 0px;
        font-size: 12px;
    }
}

.active-list-email {
    display: block;
    max-height: 200px;
    overflow-y: auto;
    /* display: block; */
    position: absolute;
    z-index: 10000;
}

/*** AMBASSADOR EVENT *****/
#ambassador-event .linegreen, #ambassador-allevent .linegreen {
    height: 8px;
    width: 40px;
    background-color: #ABD500;
    margin: auto;
}

#ambassador-event hr {
    border: 1px dashed rgba(0,0,0,.1);
}

#ambassador-event, #ambassador-event p, #ambassador-event h5, #ambassador-event .form-control {
    font-size: 14px;
}

    #ambassador-event h3, #ambassador-allevent h3 {
        font-size: 20px;
        padding-bottom: 20px;
    }

    #ambassador-event .modal-header,
    #ambassador-allevent .modal-header {
        padding: 0 5px;
    }

#detailbestwork-event p.all-events {
    font-size: 14px;
    color: #B9B9B9;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

    #detailbestwork-event p.all-events:hover {
        transform: scale(1.2);
        transition: ease-in-out 0.5s;
    }

#ambassador-allevent .table-all-events .table th,
#ambassador-allevent .table-all-events .table td {
    font-size: 13px;
}

#ambassador-allevent .table-all-events {
    height: 350px;
    overflow-y: scroll;
    width: 100%;
    display: block;
}

    #ambassador-allevent .table-all-events .table th {
        text-align: center;
        position: sticky;
        top: -1px;
    }

.bootstrap-datetimepicker-widget ul li.picker-switch {
    display: none;
}

.ambassador-event .modal-header {
    border-bottom: transparent;
}

@media only screen and (min-width: 576px) {
    #ambassador-event .modal-dialog, #ambassador-allevent .modal-dialog, .detailbestwork .modal-dialog {
        max-width: 550px;
    }
}

/*Ckeditor*/
.ck-editor__editable_inline {
    min-height: 300px !important;
}

#notification-message a:hover {
    color: red;
}

/*Lifeline Section*/
.lifeline-section .lifeline-header, .lifeline-section .lifeline-body .red-text {
    color: #ff0000;
}

.lifeline-section .lifeline-body{
    text-align: center;
}

.lifeline-section .lifeline-body p{
    font-size: 18px;
}

#homebanner {
    position: relative;
    height: auto;
    margin-bottom: 4px;
}

    #homebanner::before {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        opacity: 0.1;
    }

    #homebanner h4 {
        color: #000000;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 25px;
    }

    #homebanner .item {
        text-align: center;
        height: 100%;
    }

    /*    #homebanner .owl-carousel .owl-item {
        height: 50vh;
    }*/

    #homebanner img {
        width: 100%;
        height: 50vh;
        object-fit: cover;
        display: inline-block;
    }

    #homebanner .item i {
        font-size: 14px;
        color: #58595B;
    }

    #homebanner .item h5 {
        font-size: 18px;
    }

    #homebanner .item p {
        width: 60%;
        margin: auto;
        margin-top: 15px;
        font-size: 14px;
        font-style: italic;
        color: #000000;
    }

    #homebanner .owl-nav button.owl-prev {
        left: 0;
    }

    #homebanner .owl-nav button.owl-next {
        right: 0;
    }

    #homebanner .owl-dots {
        text-align: center;
        padding-top: 15px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

        #homebanner .owl-dots button.owl-dot {
            width: 30px;
            height: 5px;
            display: inline-block;
            background: #D9D9D9;
            margin: 0 3px;
        }

            #homebanner .owl-dots button.owl-dot.active {
                background-color: #949494;
            }

            #homebanner .owl-dots button.owl-dot:focus {
                outline: none;
            }

    #homebanner .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #949494;
        background: #E3E3E3 !important;
        border-radius: 100%;
        padding: 1px 10px 5px 10px !important;
    }

        #homebanner .owl-nav button:hover {
            color: #ffffff;
            background: #949494 !important;
        }

        #homebanner .owl-nav button:focus {
            outline: none;
        }

.whatispwh .quote1 {
    left: 5px;
    margin-top: -35px;
}

.whatispwh .quote2 {
    right: -10px;
    margin-top: -15px;
}

.right-content {
    text-align: center;
}

    .right-content img {
        position: absolute;
        width: 10%;
    }

    .right-content h2 {
        color: #000000;
        font-size: 40px;
        margin-bottom: 15px;
    }

    .right-content p {
        color: #000000;
        line-height: 2;
        font-size: 28px;
    }

    .howpwhwork a {
        font-size: 1.5rem;
    }
    .contact-us-container {
        position: fixed;
        right: 10px;
        top: 50%;
        z-index: 99;
    }

.sfContentBlock .contact-us-btn {
    border-radius: 100%;
    border: none;
    display: inline-block;
    height: 75px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 75px;
}

    .sfContentBlock .contact-us-btn img {
        width: 100%;
        display: block;
        position: relative;
        border-radius: 100%;
    }

.menu-list, .menu-profile {
    display: inline-block;
}

@media only screen and (max-width: 767px) and (max-width: 873px) {
    .menu-list, .menu-profile {
        display: block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 778px) {
    .main-menu {
        display: inline-block;
        width: 100%;
    }

        .main-menu ul li:nth-last-child(-n+2) a {
            border-right: 0;
        }

    .menu-list {
        width: 420px;
        font-size: 10px;
        text-align: left;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }

    .menu-profile {
        float: right;
    }
}

@media only screen and (min-width: 779px) and (max-width: 842px) {
    .main-menu {
        display: inline-block;
        width: 100%;
    }

        .main-menu ul li:nth-last-child(-n+2) a {
            border-right: 0;
        }

    .menu-list {
        width: 420px;
        font-size: 10px;
        text-align: left;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }

    .menu-profile {
        float: right;
    }
}

@media only screen and (min-width: 843px) and (max-width: 873px) {
    .main-menu {
        display: inline-block;
        width: 100%;
    }

        .main-menu ul li:nth-last-child(-n+2) a {
            border-right: 0;
        }

    .menu-list {
        width: 490px;
        font-size: 10px;
        text-align: left;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }

    .menu-profile {
        float: right;
    }
}

@media only screen and (min-width: 874px) and (max-width: 1025px) {
    .main-menu {
        display: inline-block;
        width: 100%;
        text-align: left;
    }

        .main-menu ul li:nth-last-child(-n+2) a {
            border-right: 0;
        }

    .menu-list {
        width: 525px;
        font-size: 10px;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }

    .menu-profile {
        float: right;
    }
}

@media only screen and (min-width: 1026px) and (max-width: 1352px) {
    .main-menu {
        display: inline-block;
        width: 100%;
        text-align: unset;
    }

    .menu-list {
        font-size: 10px;
        width: 600px;
    }

    .menu-profile {
        float: right;
        display: inline-block;
    }

    .header-section img.userprofile {
        width: 50px;
        height: 50px;
        margin: 0 5px;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 1352px) and (max-width: 1518px) {
    .main-menu {
        display: inline-block;
        width: 100%;
        /*text-align: unset;*/
    }

        .main-menu ul li a {
            font-size: 10px;
            padding: 2px 10px;
        }

    .menu-profile {
        float: right;
        display: inline-block;
    }

    .header-section img.userprofile {
        width: 50px;
        height: 50px;
        margin: 0 5px;
    }

    .main-menu ul li a {
        margin-top: 10px;
    }
}

@media only screen and (min-width: 1518px) {
    .profilepicture-hover-zoom i {
        left: 66px;
    }
}