@font-face {
    font-family: 'sofia_sans_condensedblack';
    src: url('./fonts/sofiasanscondensed-black-webfont.woff2') format('woff2'),
        url('./fonts/sofiasanscondensed-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofia_sans_condensedbold';
    src: url('./fonts/sofiasanscondensed-bold-webfont.woff2') format('woff2'),
        url('./fonts/sofiasanscondensed-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sofia_sans_condensedregular';
    src: url('./fonts/sofiasanscondensed-regular-webfont.woff2') format('woff2'),
        url('./fonts/sofiasanscondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    padding: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background-repeat: no-repeat;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main-content {
    position: absolute;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url('../assets/fondo.png');
}

.content-coins {
    overflow: hidden;
    position: absolute;
    z-index: 3;
    width: 1920px;
    height: 1080px;
}

.coin_1 {
    position: absolute;
    top: 1019px;
    left: 1724px;
    animation: slide-in-top-1 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.coin_3 {
    position: absolute;
    top: 276px;
    left: -258px;
    animation: slide-in-top-3 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.coin_2 {
    position: absolute;
    top: 38px;
    left: 1470px;
    animation: slide-in-top 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.coin_4 {
    position: absolute;
    top: 1035px;
    left: 882px;
    animation: slide-in-top-4 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.coin_5 {
    position: absolute;
    top: 426px;
    left: 1879px;
    animation: slide-in-top-5 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.coin_6 {
    position: absolute;
    top: 990px;
    left: -8px;
    animation: slide-in-top-6 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 0.8s;
}

.content-head {
    height: 200px;
    width: 1920px;
    overflow: hidden;
    position: absolute;
}

.content-logo {
    position: relative;
    width: 304px;
    height: 152px;
    top: 21px;
    left: 115px;
}

.content-date {
    position: absolute;
    text-align: center;
    width: 630px;
    height: 202px;
    top: 0px;
    left: 525px;
}

p .content-date {
    text-align: center;
    line-height: 216px;
}

.date {
    font-family: 'sofia_sans_condensedblack';
    color: #015953;
    font-size: 71px;
    letter-spacing: 2px;
    padding-top: 70px;
}

.circle-green {
    position: relative;
    background-color: #015953;
    height: 1000px;
    width: 1000px;
    border-radius: 50%;
    top: -1146px;
    left: 1068px;
    z-index: 1;
    animation: slide-in-top-circle 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.content-year {
    position: relative;
    width: 509px;
    height: 509px;
    top: -151px;
    left: 1054px;
    z-index: 2;
    animation: slide-in-top-year 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.containet-loteria {
    position: relative;
    top: 200px;
    width: 1920px;
    height: 880px;
}

.double-play {
    top: 242px;
    left: 125px;
    position: absolute;
    font-family: 'sofia_sans_condensedregular';
    font-size: 37px;
    color: #FFF;
    animation: slide-in-top-next 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 1s;
}

.date-lotery {
    top: -56px;
    left: 125px;
    position: absolute;
    font-family: 'sofia_sans_condensedregular';
    font-size: 37px;
    color: #FFF;
    animation: slide-in-top-next 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-delay: 1s;
}

.numbers {
    margin-top: 94px;
    margin-left: 119px;
    width: 1436px;
    height: 510px;
    display: flex;
    flex-wrap: wrap;
}

.number {
    overflow: hidden;
    line-height: 218px;
    text-align: center;
    width: 210px;
    height: 210px;
    color: wheat;
    font-family: 'sofia_sans_condensedbold';
    font-size: 126px;
}

.number p {

    margin-left: 51px;
    width: 119px;
    height: 158px;
    overflow: hidden;
    letter-spacing: 6px;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 35px;
}

.inner-row {
    margin-top: 92px;
}

.content-awards {
    display: flex;
    margin-left: 126px;
    margin-top: 102px;
    width: 892px;
    height: 121px;
}

.awards-2 {
    color: #CB3A60;
    font-family: 'sofia_sans_condensedbold';
    font-size: 79px;
    letter-spacing: 6px;
    padding: 15px;
    animation: slide-in-top-awards 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.awards-1 {
    color: #CB3A60;
    font-family: 'sofia_sans_condensedbold';
    font-size: 102px;
    letter-spacing: 7px;

}

.neon-text {
    color: #CB3A60;
    text-shadow: 0px 0px 15px #CB3A60;
    animation:
        sutil-resplandor 1.5s infinite alternate,
        slide-in-top-span 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards;
}

.content-date-next {
    font-family: 'sofia_sans_condensedregular';
    color: white;
    font-size: 22px;
    padding-top: 30px;
    padding-left: 73px;
    letter-spacing: 1px;
    animation: slide-in-top-next 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.line {
    position: absolute;
    top: 626px;
    left: 653px;
    background-color: #FFF;
    height: 78px;
    width: 2px;
    animation: scale-up-ver-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 0.3s;
}

.x3 {
    color: #CB3A60;
    font-size: 129px;
    font-family: 'sofia_sans_condensedbold';
    position: absolute;
    top: 41px;
    left: 1643px;
    letter-spacing: -5px;
}

/** Coin 1 **/
@keyframes slide-in-top-1 {
    0% {
        transform: translateX(150px) translateY(-500px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** Coin 2 **/
@keyframes slide-in-top {
    0% {
        transform: translateY(-1000px) rotate(-120deg);

        opacity: 0;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
}

/** Coin 3 **/
@keyframes slide-in-top-3 {
    0% {
        transform: translateX(100px) translateY(-700px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** Coin 4 **/
@keyframes slide-in-top-4 {
    0% {
        transform: translateY(-1300px);

        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/** Coin 5 **/
@keyframes slide-in-top-5 {
    0% {
        transform: translateX(-180px) translateY(-700px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** Coin 6 **/
@keyframes slide-in-top-6 {
    0% {
        transform: translateX(-420px) translateY(-400px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** img year **/
@keyframes slide-in-top-year {
    0% {
        transform: translateX(100px) translateY(0px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** circle green**/
@keyframes slide-in-top-circle {
    0% {
        transform: translateX(0px) translateY(200px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** awards**/
@keyframes slide-in-top-awards {
    0% {
        transform: translateX(0px) translateY(1000px);

        opacity: 1;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** next date**/
@keyframes slide-in-top-next {
    0% {
        transform: translateX(0px) translateY(0px);

        opacity: 0;
    }

    100% {
        transform: translateX(0px) translateY(0);
        opacity: 1;
    }
}

/** line awards **/
@keyframes scale-up-ver-bottom {
    0% {

        transform: scaleY(0);
        transform-origin: 0% 100%;
    }

    100% {

        transform: scaleY(1);
        transform-origin: 0% 100%;
    }
}

/** price neon **/
@keyframes sutil-resplandor {
    0% {
        text-shadow: 0px 0px 0px #CB3A60;
    }

    100% {
        text-shadow: 0px 0px 14px #CB3A60;
    }
}

@keyframes slide-in-top-span {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}