.fights-circle-container {
    position: relative;
    height: 675px;
    margin: 0 auto;
    padding: 100px 0 0;
    overflow: hidden;
    background-color: #424242;
    background: linear-gradient(0deg,#f5f5f5 90%,#FFFFFF 90%);
}
.fights-circle-container.images-loaded {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 70px;
    background-image: url(/wp-content/themes/fww-theme-twentytwenty-child/images/fights-water-bg.png);
    transition: background-image 200ms ease-out;
}

.fights-circle-container.images-loaded.climate { 
    background-image: url(/wp-content/themes/fww-theme-twentytwenty-child/images/fights-bg.png); 
}
.fights-circle-container.images-loaded.food { 
    background-image: url(/wp-content/themes/fww-theme-twentytwenty-child/images/fights-food-bg.png); 
}

.fights-circle {
  width: 900px;
  height: 900px;
  margin: 10px auto;
  border: 3px solid #ffe643;
  position: relative;
  border-radius: 50%;
}
.fights-circle > div:first-child {
    position: absolute;
    background: #ffffff;
    width: 98%;
    height: 98%;
    border-radius: 50%;
    top: 1%;
    left: 1%;
}
.fights-circle .item {
  width: 225px;
  height: 225px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  display: flex;
  align-items: center;
  background: transparent;
}
.fights-circle .item > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffe643;
    border: 3px solid #ffe643;
    border-radius: 50%;
    box-sizing: border-box;
}
.fights-circle .item > div:nth-child(1) { opacity: .5; }
.fights-circle .item > div:nth-child(2) { 
    opacity: .7;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}
.fights-circle .item > div:nth-child(3) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 135px;
    height: 135px;
    background: url(/wp-content/themes/fww-theme-twentytwenty-child/images/icon-globe.png) no-repeat;
    background-size: cover;
    border: none;
    color: #ffffff;
    font-weight: bold;
}
.fights-circle .item > div div {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0057B8;
    opacity: .7;
}
.fights-circle .item.active > div div { display: none; }
.fights-circle .item > div span { 
    z-index: 1; 
    opacity: 1;
}
.fights-circle .item.food > div:nth-child(3) { background-image: url(/wp-content/themes/fww-theme-twentytwenty-child/images/icon-food.png);}
.fights-circle .item.water > div:nth-child(3) { background-image: url(/wp-content/themes/fww-theme-twentytwenty-child/images/icon-water.png);}
.fights-circle .item.active > div:nth-child(1),
.fights-circle .item.active > div:nth-child(2) { 
    opacity: .5;
    border: 3px solid #ffe643;
    background: transparent;
}
.fights-circle .item.item.active > div:nth-child(2) { 
    width: 88%;
    height: 88%;
    left: 6%;
    top: 6%; 
}
.fights-circle .item.active > div:nth-child(3) { 
    width: 170px;
    height: 170px
}
.fights-circle .item.active > div:nth-child(3) span { display: none; }

.fight-description-container {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 250px;
    left: 0;
}
.fights-circle-container.images-loaded .fight-description-container { display: block; }
.fight-description-container .fight {
    margin: 0 auto;
    width: 490px;
    text-align: center;
}
.fight-description-container .wp-block-button { width: 200px; }

.fights-circle-container.spin .fights-circle { animation: spin 5s linear reverse; animation-iteration-count: .16;}
.fights-circle .item.spin { animation: spin 5s linear; animation-iteration-count: .16; }
.fights-circle .item.spin:nth-child(4):not(.active) > div:nth-child(1),
.fights-circle .item.spin:nth-child(4):not(.active) > div:nth-child(2) { animation: spin-inner 1s infinite; }
.fights-circle .item.spin:nth-child(4) > div:nth-child(3) { animation: spin-icon 1s infinite; }
.fights-circle .item.spin.active > div:nth-child(1),
.fights-circle .item.spin.active > div:nth-child(2) { animation: spin-inner-active 1s infinite; }
.fights-circle .item.spin.active > div:nth-child(3) { animation: spin-icon-active 1s infinite; }
.fights-circle .item.spin:nth-child(4) > div span,
.fights-circle-container.spin .fight { animation: spin-fight .9s ease-in-out; }
.fights-circle .item.spin:nth-child(4) > div div { animation: spin-bg .9s ease-in-out; }
.fights-circle .item.spin.active > div div { 
    display: block;
    animation: spin-bg .9s ease-in-out reverse; 
}
.fights-circle .item.spin.active > div span { 
    display: initial;
    animation: spin-fight .9s ease-in-out reverse; 
}
.loader {
    position: absolute;
    width: 100% !important;
    height: 100%;
}
.loader div {
    border: 16px solid #f5f5f5; /* Light grey */
    border-top: 16px solid #89d6ed; /* Blue */
    border-radius: 50%;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    animation: spin-loader 2s linear infinite;
}

@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spin-bg {
    0% { opacity: .7; }
    100% { opacity: 0; }
}
@keyframes spin-fight {
    0% { opacity: initial; }
    100% { opacity: 0; }
}
@keyframes spin {
  100% { transform: rotate(1turn); }
}
@keyframes spin-inner {
    0% { background-color: #ffe643; }
    100% { background-color: transparent; }
}
@keyframes spin-icon {
    100% { 
        width: 170px; 
        height: 170px;
    }
}
@keyframes spin-inner-active {
    0% { background-color: transparent; }
    100% { background-color: #ffe643; }
}
@keyframes spin-icon-active {
    100% { 
        width: 135px; 
        height: 135px;
    }
}

@media (max-width: 999px){
    .images-loaded .fights-circle { visibility: hidden; }
    .images-loaded .fight-description-container > div {
        width: 90%;
        padding: 2rem;
        background: #ffffff;
        border-radius: 5%;
    }
    .images-loaded .fight-description-container > div .globe,
    .images-loaded .fight-description-container > div .food,
    .images-loaded .fight-description-container > div .water {
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        height: 20rem;
        background: url(/wp-content/themes/fww-theme-twentytwenty-child/images/icon-globe.png) no-repeat top center;
        background-size: 100px;
    }
}