@keyframes growAndShrink {
  0% {transform: scale(0);}
  50% {transform: scale(0.7);}
  100% {transform: scale(0);}
}
@keyframes growAndShrinkHover {
  0% {transform: scale(0.6);}
  50% {transform: scale(0.7);}
  100% {transform: scale(0.6);}
}
@keyframes growAndShrinkMobile {
  0% {transform: scale(1);}
  50% {transform: scale(1.4);}
  100% {transform: scale(1);}
}
.btn-cover-link {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: #a1d55d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-border-color: #a1d55d;
}
    
.block--site-cover {
    position: relative;
    background-position: center;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

.block--site-cover .wp-block-cover__image-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.block--site-cover__inner-container {
    width: 450px;
    z-index: 1;
    color: #fff;
    background-color: rgb(0 53 83 / 50%) !important;
    padding: 3em;
    margin-top: 25em;
    margin-bottom: 25em;
    margin-left: 25%;
}

.block--site-cover__inner-container h2 {
    color: #fff;
}
.block--site-cover__animation-container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.hover-link-marker {
    width: 0.5rem;
    height: 0.5rem;
    position: absolute;
    display: block;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s all ease-in;
    transform-origin: center;
    animation: growAndShrinkMobile 3s ease-in-out infinite alternate;
}
@media (min-width: 660.99px) {
    .wp-block-site-cover__background {
        position: absolute;
        z-index: 8;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(90deg, transparent calc(100% - 30em), #121207 calc(100% - 20em));
    }
    .block--site-cover {
        font-size: 0.75vw;
        overflow: hidden;
        height: 65em;
        min-height: unset;
    }
    .block--site-cover__inner-container {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 60em;
        z-index: 15;
        width: 350px;
    }
    .block--site-cover__inner-container p {
        font-size: 16px;
    }
    .block--site-cover .wp-block-cover__image-background {
        top: 0;
        left: 0;
        transform: unset;
        height: 80em;
        width: auto;
        z-index: 5;
    }
    .site-cover-ani-spot {
        width: 2.5em;
        height: 2.5em;
    }
    .site-cover-ani-spot {
        width: 2.2em;
        height: 2.2em;
        position: absolute;
        display: block;
        border: 2px solid #fff;
        border-radius: 50%;
        transition: 0.2s all ease-in;
        transform-origin: center;
    }

    .site-cover-ani-spot#hover-circle-01 {
        top: 18em;
        left: 17em;
    }

    .site-cover-ani-spot#hover-circle-02 {
        top: 26em;
        left: 17em;
    }

    .site-cover-ani-spot#hover-circle-03 {
        top: 31.5em;
        left: 17em;
    }

    .site-cover-ani-spot#hover-circle-04 {
        top: 21em;
        left: 39em;
    }

    .site-cover-ani-spot#hover-circle-05 {
        top: 26em;
        left: 39em;
    }

    .site-cover-ani-spot#hover-circle-06 {
        top: 36em;
        left: 39em;
    }

    .site-cover-ani-spot#hover-circle-07 {
        top: 55em;
        left: 37em;
    }

    .site-cover-ani-link {
        transition: 0s all ease-in;
        opacity: 0;
        position: relative;
    }

    /*
    .site-cover-ani-link:before {
        content: '';
        background: var(--bs-secondary);
        width: 1.6em;
        height: 1.6em;
        position: absolute;
        border-radius: 50%;
        top: -0.075em;
        left: -0.075em;
        transform: scale(0);
        transform-origin: center;
        transition: .2s all linear 0s;
    }
    */

    .site-cover-ani-link:after {
        content: '';
        background: var(--bs-secondary);
        width: 3.45em;
        height: 0.4em;
        position: absolute;
        top: 0.75em;
        left: 0.5em;
        transform: scaleX(0);
        transition: .2s all linear 0s;
        transform-origin: left;
    }

    .site-cover-ani-spot--inner-container {
        left: 0;
        position: absolute;
        top: 0.2rem;
        transform-origin: left top;
        opacity: 0;
    }

    .site-cover-ani-spot--inner-container h3,
    .site-cover-ani-spot--inner-container a {
        white-space: nowrap;
        line-height: 0.8;
    }
    .site-cover-ani-spot--inner-container h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
        color: var(--bs-body-color);
        opacity: 0;
        transition: .2s all linear 0s;
    }
    .site-cover-ani-spot--inner-container a {
        color: var(--bs-tertiary);
        opacity: 0;
        transition: .2s all linear 0s;
        font-size: 1.15rem;
    }

    .site-cover-ani-spot--inner-container .panel {
        background-color: #fff;
        border: 5px solid #fff;
        padding: 0.8rem 1.4rem 0.6rem;
        transform-origin: left top;
        transition: .2s all ease-in-out;
        transform: scale(0.5) translateX(7.65em);
        opacity: 0;
    }

    .site-cover-ani-spot:hover {
        transform: scale(1.7);
    }

    .site-cover-ani-spot:hover .site-cover-ani-link {
        opacity: 1;
    }

    .hover-link-marker {
        content: '';
        background: var(--bs-secondary);
        width: 1.6em;
        height: 1.6em;
        position: absolute;
        border-radius: 50%;
        top: -0.07em;
        left: -0.07em;
        transform: scale(0);
        transform-origin: center;
        transition: .2s all linear 0s;
        animation: growAndShrink 3s ease-in-out infinite alternate;
    }
    .site-cover-ani-spot:hover .hover-link-marker {
        transform: scale(0.6);
        transition: .3s transform ease-in, .2s background-color linear 1.4s;
        animation: growAndShrinkHover 4s ease-in-out infinite alternate;
    }

    .site-cover-ani-spot:hover .site-cover-ani-link:after {
        transform: scaleX(1);
        transition: .3s transform linear .5s, .2s background-color linear 1.4s;
    }

    .site-cover-ani-spot:hover .site-cover-ani-spot--inner-container {
        transition: .125s opacity linear .765s;
        opacity: 1;
    }

    .site-cover-ani-spot:hover .site-cover-ani-spot--inner-container .panel {
        border-color: var(--bs-secondary);
        transition: .2s all ease-in-out;
        opacity: 1;
    }

    .site-cover-ani-spot:hover .site-cover-ani-spot--inner-container h3,
    .site-cover-ani-spot:hover .site-cover-ani-spot--inner-container a {
        opacity: 1;
        transition: .3s opacity ease-in 1.125s;
    }
}
@media (min-width: 1199.99px) {
    .site-cover-ani-spot {
        width: 2.2em;
        height: 2.2em;
    }
    .hover-link-marker {
        width: 2em;
        height: 2em;
        top: -0.08em;
        left: -0.08em;
    }
    .block--site-cover__inner-container {
        margin-left: 40em;
        width: 450px;
    }
}
@media (min-width: 1399.99px) {
    .block--site-cover__inner-container {
        width: 650px;
    }
}
/*
@media (max-width: 1100px) and (min-width: 660px) {
    .block--site-cover {
        display: block;
    }
    .block--site-cover__inner-container {
        width: 100%;
        margin-left: 0;
    }
    .block--site-cover .wp-block-cover__image-background {
        position: relative;
        top: unset;
        left: unset;
    }
}
*/
@media (max-width: 660px) {
    .block--site-cover {
        min-height: 450px!important;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;
    }
    .block--site-cover .wp-block-cover__image-background {
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        height: 400px;
        width: auto;
        max-width: unset;
    }
    .block--site-cover__inner-container {
        width: unset;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding: 1em;
    }
    .block--site-cover__animation-container {
        position: unset;
        top: unset;
        left: unset;
        width: 100%;
        padding: 1em;
        font-size: 1.45rem;
        line-height: 1;
    }
    .site-cover-ani-spot:not(.active) .site-cover-ani-link {
        display: none;
    }
    .site-cover-ani-spot.active .site-cover-ani-link {
        display: block;
    }
    .site-cover-ani-spot h3 {
        margin-bottom: 0.1em;
        font-size: 1.25rem;
        font-weight: 700;
    }
    .site-cover-ani-spot a {
        font-size: 1rem;
    }
    .hover-link-marker {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        display: block;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s all ease-in;
        transform-origin: center;
        cursor: pointer;
        z-index: 100;
    }
    .site-cover-ani-spot.active .hover-link-marker {
        background: var(--bs-secondary);
        width: 0.75rem;
        height: 0.75rem;
    }

    .site-cover-ani-spot#hover-circle-01 .hover-link-marker {
        top: 4.5em;
        left: 3.7em;
    }
    .site-cover-ani-spot#hover-circle-02 .hover-link-marker {
        top: 6.3em;
        left: 3.7em;
    }
    .site-cover-ani-spot#hover-circle-03 .hover-link-marker {
        top: 7.6em;
        left: 3.7em;
    }

    .site-cover-ani-spot#hover-circle-04 .hover-link-marker {
        top: 4.9em;
        left: 8.4em;
    }
    .site-cover-ani-spot#hover-circle-05 .hover-link-marker {
        top: 6.1em;
        left: 8.4em;
    }
    .site-cover-ani-spot#hover-circle-06 .hover-link-marker {
        top: 8em;
        left: 8.4em;
    }
    .site-cover-ani-spot#hover-circle-07 .hover-link-marker {
        top: 12.3em;
        left: 7.9em;
    }
}
@media (max-width: 475px) {
    .hover-link-marker {
        opacity: 0.7;
        width: 1.25rem;
        height: 1.25rem;
    }
    .site-cover-ani-spot.active .hover-link-marker {
        opacity: 0.7;
        width: 1.25rem;
        height: 1.25rem;
    }
}