@font-face {
    font-family: 'regular-font';
    font-style: normal;
    font-weight: 100;
    src: url(../font/FBELECTRONCONHEB-EXTRALIGHT.OTF) format('opentype');
}

@font-face {
    font-family: 'regular-font';
    font-style: normal;
    font-weight: 400;
    src: url(../font/FBELECTRONCONHEB-REGULAR.OTF) format('opentype');
}

@font-face {
    font-family: 'regular-font';
    font-style: normal;
    font-weight: 600;
    src: url(../font/FBELECTRONCONHEB-MEDIUM.OTF) format('opentype');
}

@font-face {
    font-family: 'regular-font';
    font-style: normal;
    font-weight: 700;
    src: url(../font/FBELECTRONCONHEB-BOLD.OTF) format('opentype');
}

@font-face {
    font-family: 'regular-font';
    font-style: normal;
    font-weight: 900;
    src: url(../font/FBELECTRONCONHEB-BLACK.OTF) format('opentype');
}

@font-face {
    font-family: 'special-font';
    font-style: normal;
    font-weight: bold;
    src: url(../font/BA-PLATFORMA-REGULAR.OTF) format('opentype');
}

:root{

    --dark-blue: #07101e;
    --light-blue: #5b8193;
    --dark-gold: #482524;
    --light-gold: #f8ab86;
    --background: url(../images/bg.jpg) center/cover no-repeat;
    background: var(--background);
}

/* אנימציה לדרגות הגבוהות */
.sparkle {
    position: fixed;
    width: 15rem;
    height: 15rem;
    background: #fff7ee;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 8px #cba279;
    animation: sparkleAnim 3s ease-out forwards,
    move 3s linear  ;
}

@keyframes sparkleAnim {
    0%   { scale: 0; opacity: 1; }
    50%  { scale: 1; opacity: 1; }
    100% { scale: 0; opacity: 0; }
}

@keyframes move {
    100%  { transform: var(--move); }
}

[data-level = "most"] #new_cont_sum,
[data-level = "higher"] #new_cont_sum{
    animation: moveShadow 4s ease-in-out infinite;
}

@keyframes moveShadow {
    0% {
        text-shadow:
                2px 2px 0 rgba(0,0,0,0.15),
                4px 4px 0 rgba(0,0,0,0.12),
                6px 6px 0 rgba(0,0,0,0.09);
    }
    50% {
        text-shadow:
                -2px 2px 0 rgba(0,0,0,0.18),
                -4px 4px 0 rgba(0,0,0,0.14),
                -6px 6px 0 rgba(0,0,0,0.1);
    }
    100% {
        text-shadow:
                2px 2px 0 rgba(0,0,0,0.15),
                4px 4px 0 rgba(0,0,0,0.12),
                6px 6px 0 rgba(0,0,0,0.09);
    }
}
#popup_bg{
    background: url(../images/large_screen_bg.png) center no-repeat;
    background-size: contain;
    width: 56vw;
    height: 31vw;
    overflow: hidden;
    padding-top: 10.2%;
    padding-bottom: 1.6%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#fixed_layer_header {
    padding: 2vw 0 6vw;
}
.fixed_layer img {
    width: auto;
    height: 18vw;
}

#new_cont {
    animation: shadow 2s alternate infinite;
}

@keyframes shadow {
    to {
        text-shadow: 0 0 2vw #D9BD9F
    }
}

.new_cont_level {
    font-size: 7vw;
}

#new_cont_name {
    font-size: 5vw;
    font-weight: 700;
    width: 80%;
    margin: 0 auto 0;
}

#new_cont_name:before {
    content: 'הר"ר';
}

#new_cont_name:after {
    content: 'שליט"א';
}
#new_cont_name:before, #new_cont_name:after{
    font-size: 60%;
    /* display: block; */
    font-weight: normal;
}
#new_cont_sum {
    font-size: 6vw;
    color: #fff;
    font-family: var(--special-font);
    font-weight: 400;
    display: flex;

}
#new_cont_sum:before, #new_cont_sum:after{
    content: '';
    width: 4vw;
    background-image: url(../images/decor.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 1vw;
}
#new_cont_sum:after{
    transform: scaleX(-1);
}
.col text {
    fill: var(--dark-gold);
    font-size: 3.2vw;
}

#meyasdim text {
    font-size: 4vw;
}

#meyasdim .inner_wrap {
    margin-top: 5.5vw;
    height: auto;
    margin-bottom: 5vw;
    --duration: 28s;
}


#meyasdim {
    height: 20.5vw;
    overflow: hidden;
    margin-bottom: -2.9vw;
    background-image: url(../images/meyasdim.png);
    background-size: 100% 100%;
    /* --c-font-size: 36rem; */
}

#meyasdim .col_title {
    font-size: 90rem;
    margin-top: 0;
}

#meyasdim .contributor {
    /* font-weight: 900; */
}

#status_inner {
    font-size: 4vw;
    font-weight: bold;
    width: 100%;
    display: block;
    color: #fff;
    line-height: 1.2;
    border-radius: 500px;
    position: relative;
    overflow: hidden;
}

#status_number_bg {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 50%;
    height: 100%;
    transition: width 1s;
    background: linear-gradient(60deg, var(--dark-gold), #E8D26B, var(--light-gold));
    background-size: 300% 300%;
    background-position: 0 50%;
    animation: moveGradient 5s infinite alternate;
}
.contributor span {
    display: block;
}

.contributor span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contributor span:last-child {
    position: absolute;
    left: 0;
    background: var(--dark-blue);
    border-radius: 0.4em;
    width: 4.3em;
    font-size: 76%;
    line-height: 1.2;
    min-height: 1.3em;
    padding: 0 1%;
    text-align: center;
    direction: ltr;
    font-weight: 600;
    transform: translate(-50%, -50%);
    top: 50%;
    border: 0.08em solid var(--light-gold);
}


.header_square {
    flex: 0 0 30%;
    margin: 0 auto;
    /* height: 7vw; */
    font-size: 4vw;
    font-weight: 600;
    color: var(--light-gold);
    overflow: hidden;
    z-index: 0;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-shadow: 0 0 1vw #000;
}

.col {
    font-size: 29rem;
    text-align: center;
    position: relative;
    flex: 1 0 0;
    background-image: url(../images/col.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    color: #000;
    display: flex;
    flex-direction: column;
}

.col_title{
    font-size: 61rem;
    font-family: var(--special-font);
    color: var(--dark-gold);
    margin-top: 98rem;
    margin-bottom: 20rem;
    flex: 0 0 auto;
}
.inner_wrap {
    width: 82%;
    margin: 0 auto;
    overflow: hidden;
    flex-grow: 1;
}
.contributor span{
    font-weight: bold;
}

#list .contributor {
    /* border-bottom: 1rem solid var(--dark-gold); */
}
.contributor {
    /* transition: all 1s; */
    line-height: 1.2;
    padding-bottom: 7rem;
    /* letter-spacing: 2rem; */
    margin-bottom: 1rem;
    position: relative;
    font-family: var(--simple-font);
    font-weight: 600;
    font-size: var(--c-font-size, 42rem);
}

.contributor:before{
    content: var(--name-prefix);
    font-weight: 400;
}


header {
    display: flex;
    padding: 0vw 3.6vw 0;
    align-items: center;
    font-family: var(--special-font);
    gap: 1vw;
    --c-font-size: 33rem;
}

#sum_parent {
    flex: 3 0 0;
    align-self: center;
    font-family: var(--simple-font);
    font-size: 60rem;
}

.sum_large {
    display: block;
    line-height: 1;
}