/* flip card */
.flip-card {
    --duration: 3s;
    perspective: 1000px;
    position: relative;
    width: 100%;
    height: 100%;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    padding-bottom: 100%;
}
.flip-card-side,
[data-hover="flip-card"] .home-block-shape {
  	position: absolute;
  	width: 100%;
  	height: 100%;	
  	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.flip-card-content {
    position: absolute;
    --translate-x: -50%;
    --translate-y: -50%;
    top: 50%;
    left: 50%;
    transform: translate(var(--translate-x), var(--translate-y));
    
}

.spin-disc-side.center,
.globe-side.center,
[data-text-align="center"].spin-disc-side,
[data-text-align="center"].globe-side {
    text-align: center;
}
.flip-card.turnaround .flip-card-inner {
    transform: rotateY(180deg) !important;
}
.flip-card.hoverable > .flip-card-inner,
[data-hover="flip-card"] .flip-card-inner {
    transition: transform 0.8s;
    
}
.home-block .flip-card-content {
    width: 80%;
}
[data-text-vertical-align="top"] .flip-card-content {
    top: 0;
    --translate-y: 0;
    /* left: 50%; */
}
.flip-card-front > div, 
.flip-card-back > div,
[data-hover="flip-card"] .home-block-content {
    /* transform: translate(0, -50%); */
    padding: 30px;
}

.flip-card-back,
[data-hover="flip-card"] .home-block-shape-back {
    color: #FFF;
    background-color: #000;
    transform: rotateY(180deg);
}

.flip-card.rotating .flip-card-inner,
[data-animation="flip-card"] .flip-card-inner {
    -webkit-animation: rotate-y-3d-hex var(--duration) linear infinite;
       -moz-animation: rotate-y-3d-hex var(--duration) linear infinite;
        -ms-animation: rotate-y-3d-hex var(--duration) linear infinite;
         -o-animation: rotate-y-3d-hex var(--duration) linear infinite;
            animation: rotate-y-3d-hex var(--duration) linear infinite;
}
.center .home-block-shape > .flip-card-inner,
[data-text-align="center"] .home-block-shape > .flip-card-inner {
    width: 100%;
    height: 100%;
}
#breadcrumbs .grants-icon.resetting .flip-card-inner {
    animation: none;
}
/* flip card ends */
/* spin disc */
.spin-disc {
    --duration: 5s;
    position: relative;
    /* height: 100%; */
}
.spin-disc-inner,
.static-shape-inner{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}
.spin-disc.spinning .spin-disc-inner,
[data-animation="spin-disc"] .spin-disc-inner,
[data-hover="spin-disc"]:hover .spin-disc-inner{
    -webkit-animation: rotate-z var(--duration) linear infinite;
    -moz-animation: rotate-z var(--duration) linear infinite;
     -ms-animation: rotate-z var(--duration) linear infinite;
      -o-animation: rotate-z var(--duration) linear infinite;
         animation: rotate-z var(--duration) linear infinite;
}
.viewing-grants-icon .grants-icon .spin-disc {
    --duration: 8s;
}
.spin-disc-side,
.static-shape-side {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spin-disc-content {
    padding: 30px;
    max-height: 100%;
    max-width: 100%;
}
.spin-disc-front {
    z-index: +1;
}

#breadcrumbs .grants-icon.resetting .spin-disc-inner {
    animation: none;
}
/* spin disc ends */
/* globe */
.globe {
    position: relative;
    /* border: 1pt solid #960; */
}
.globe-inner{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}
.globe-side {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../../media/gif/climate-action-badge-crop.gif);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    /* filter: brightness(7) hue-rotate(182deg); */
}

.brighter .globe-side {
    filter: brightness(5) hue-rotate(5deg);
}

.globe-content {
    padding: 30px;
    max-height: 100%;
    max-width: 100%;
}
.globe-front {
    z-index: +1;
}
/* globe ends */
/* special-initiatives */
.special-initiatives {
    --duration: 4s;
    position: relative;
}
.special-initiatives-inner{
    width: 100%;
    padding-bottom: 100%;
    position: relative;
}
.special-initiatives.dot {
    height: 100%;
}
.special-initiatives-dots {
    position: absolute;
    inset: 0;
    transform-origin: center;
    -webkit-animation: rotate-dots var(--duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
       -moz-animation: rotate-dots var(--duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
        -ms-animation: rotate-dots var(--duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
         -o-animation: rotate-dots var(--duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
            animation: rotate-dots var(--duration) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.special-initiatives-dot {
    position: absolute;
    width: 45%;
    aspect-ratio: 1;
    border-radius: 50%;
}
.special-initiatives-dot-blue {
    top: 8.75%;
    left: 46.25%;
    background: #0000FF;
}
.special-initiatives-dot-red {
    top: 46.25%;
    left: 8.75%;
    background: #FF0000;
}
.special-initiatives-side {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.special-initiatives-content {
    padding: 30px;
    max-height: 100%;
    max-width: 100%;
}
.special-initiatives-front {
    z-index: +1;
}
/* special-initiatives ends */

.bg-co-creation {
    background-color: #020;
}
.grants-icon .bg-co-creation{
    width: 100%;
    height: 100%;
    background-color: transparent;
}
@media screen and (max-width: 823px) {
    .home-block.flip-card .flip-card-inner,
    .feature-block.flip-card .flip-card-inner
    {
        transition: none;
    }
}

@media (hover:hover) {
    .flip-card.hoverable:hover > .flip-card-inner {
        transform: rotateY(180deg);
    }
}