body {
    background: transparent url(../../images/paperi.jpg) repeat 50% 50%;
    display: none;
}
#bgvideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    display: block;
}
#flipclock img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    right: 0;
    margin-top: -120px;
    display: block;
}

#giflogo {
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    display: block;
    z-index: 34;
}
#giflogo2 {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    display: block;
    z-index: 34;
}

.ellinoora-gif {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -300px;
    width: 600px;
}
.ellinoora-gif2 {
    position: absolute;
    left: 50%;
    top: 100px;
    margin-left: -200px;
    width: 400px;
}
.ellinoora-gif img,.ellinoora-gif2 img {
    width: 100%;
    object-fit: cover;
}
.badge {
    position: absolute;

}
.timantti      {top: -2px;left: 50%; margin-left: -430px; animation: swing ease-in-out 1s infinite alternate; transform-origin: center 40px;}
.peace         {top: 100px;left: 50%; margin-left: -460px; animation: swing ease-in-out 0.8s infinite alternate; transform-origin: center center;}
.smiley        {top: 270px;left: 50%; margin-left: -520px; animation: muljuu ease-in-out 1s infinite alternate; transform-origin: center center;}
.huulet        {top: 580px;left: 50%; margin-left: -490px; z-index: 10; animation: swing ease-in-out 1.6s infinite alternate; transform-origin: center center;}
.nuotti        {top: 670px;left: 50%; margin-left: 490px; animation:  muljuu ease-in-out 1.6s infinite alternate; transform-origin: center center;}
.sormet        {top: 390px;left: 50%; margin-left: -280px; animation: muljuu2 ease-in-out 1.2s infinite alternate; transform-origin: center center;}
.timantti2     {top: 100px;left: 50%; margin-left: 270px; z-index: 8; animation: muljuu ease-in 0.8s infinite alternate; transform-origin: center center;}
.planeetta     {top: 550px;left: 50%; margin-left: 340px; z-index: 10; animation: muljuu ease-in-out 0.6s infinite alternate; transform-origin: center center;}
.timantti3     {top: -30px;right: 120px; }
.kukka         {top: 20px;right: 20px; animation: muljuu ease-in 1.6s infinite alternate; transform-origin: center center;}
.kukka img     { width: 65px;}
.kulta         {top: 260px;right: 50%; margin-right: -440px; animation: muljuu ease-in 1.6s infinite alternate; transform-origin: center center;}
.pikkukulta    {top: 450px;left: 50%; margin-left: -310px; animation: muljuu2 ease-in 1.2s infinite alternate; transform-origin: center center;}
.pikkukulta2   {top: 290px;left: 50%; margin-left: 20px; animation: muljuu ease-in 1.2s infinite alternate; transform-origin: center center;}
.ilves         {top: 370px;left: 50%; margin-left: 265px; animation: muljuu ease-in 1.2s infinite alternate; transform-origin: center center; }
.ilves2        {top: 450px;left: 50%; margin-left: -355px; animation: muljuu ease-in 1.2s infinite alternate; transform-origin: center center; }
.ilves img,.ilves2 img {
    width: 100px;
}

body {
    margin: 0;
    padding: 0;
}

.wm-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}
.clockdiv-wrapper {
    /*width: 830px;
    margin: auto;*/
    position: relative;
    z-index: 10;
}
#clockdiv,#clockdiv2{
    display: flex;
    justify-content: center;
    color: white;
    text-align: center;
    font-size: 25px;
    font-family: "Skranji", system-ui;
    font-weight: 700;
    font-style: normal;
    min-height: 500px;
    position: relative;
    z-index: 9;
    padding: 90px 50px;
    top: 430px;
    background: transparent url(../../images/paperilogo02.png) no-repeat 50% 0 ;
}
#clockdiv2 {
    display: none;
}

.days,.hours,.minutes,.seconds {
    font-size: 70px;
    font-weight: 600;
}
#clockdiv > div,#clockdiv2 > div {
    padding: 10px;
    display: inline-block;
}

.stage1 {
    overflow-x: hidden;
    width: 100%;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    min-height: 990px;
}
.stage2bg {
    background: transparent url(../../images/stage2bg.jpg) no-repeat 50% 0 ;
    overflow-x: hidden;
}
.stage3bg {
    background: #f9f6f1;
}
.stage2 {
    display: none;
}
.stage3 {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
}
.stage3-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stage3 .ellinoora-tulossa {
    display: block;
    background: transparent url(../../images/Ellinoora-4ever-Liput-tulossa-1920x1005.jpg) no-repeat 50% 0 ;
    background-size: cover ;
    width: 50%;
    height: 50%;
    min-height: 50vw;
}
.stage3 .ellinoora-tulossa-mobile {
    display: none;
}


.stage3 .right-wrapper {
    text-align: center;
    width: 50%;
    font-family: "Public Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 20px;
    padding: 0 20px;
}
.stage3 .right-wrapper h1 {
    font-size: 70px;
    line-height: 80px;
    margin-bottom: 0;
    margin-top: 0;

}
.stage3 .right-wrapper h2 {
    font-size: 50px;
    line-height: 60px;
    margin-top: 0;
    margin-bottom: 20px;
}
.stage3 .right-wrapper p {
    margin: 0px 0 10px 0;
}
.stage3 .right-wrapper .logos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.stage3 .right-wrapper .logos img {
    max-width:85px;
}
.stage3 .right-wrapper h1,.stage3 .right-wrapper h2 {
    font-family: "Public Sans", sans-serif;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
}
.stage3 .right-wrapper .button {
    background: black;
    padding: 10px 20px;
    color: #edb5d0;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 400;
    text-transform: none;
}
.stage3 .right-wrapper .button:before {
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    position: relative;
    top: 2px;
    left:-3px;
    background: transparent url(../../images/link-svgrepo-com.svg) no-repeat 0 0;
    background-size: cover;
}
@media screen and (max-width: 550px) {
    .days,.hours,.minutes,.seconds {
        font-size: 60px;
    }
    #clockdiv > div,#clockdiv2 > div{
        padding: 10px 5px;
    }
}


#clockdiv div > span,#clockdiv2 div > span{
    padding: 0;
    display: inline-block;
}
@media screen and (max-width: 1024px) {
    .ilves2 {
        top: 380px;
    }
    .ilves {
        top: 320px;
    }
    #clockdiv,#clockdiv2{
        width: 100%;
        font-size: 18px;
        background-size: cover;
        min-width: 100%;
        min-height: 450px;
        padding: 90px 0 0 0;
        top: 360px;
    }
    .days,.hours,.minutes,.seconds {
        font-size: 50px;
    }
    .planeetta {
        display: none;
    }
    .timantti2 {
        z-index: 7;
    }
    .timantti2 img {
        width: 300px;
    }
    .ellinoora-gif {
        width: 100%;
        left: 0;
        margin-left: 0;
        text-align: center;
        z-index: 8;
        position: absolute;
    }
    .ellinoora-gif img {
        max-width: 600px;
        margin: auto;
    }
    .ellinoora-gif2 {
        width: 100%;
        left: 0;
        margin-left: 0;
        text-align: center;
        z-index: 8;
        position: absolute;
    }
    .ellinoora-gif2 img {
        max-width: 400px;
        margin: auto;
    }

    .wm-badge img {
        max-width: 100px;
    }
    .timantti {
        margin-left: 0;
        left: -50px;
    }
    .peace {
        margin-left: 0;
        left: -50px;
    }
    .peace img {
        width: 180px;
    }
    .smiley {
        margin-left: 0;
        left: -50px;
    }
    .smiley img {
        width: 170px;
    }
    .nuotti {
        display: none;
    }
    .stage3 .right-wrapper .logos img {
        max-width:100%;
    }

}
@media (max-width: 768px) {
    .stage3 .ellinoora-tulossa {
        display: none;
    }
    .stage3 .ellinoora-tulossa-mobile img {
        width: 100%;
    }
    .stage3 .ellinoora-tulossa-mobile {
        min-height: 100vw;
        width: 100%;
        display: block;
    }
    .stage3 .right-wrapper {
        width: 100%;
        padding: 0 20px 30px;
    }
    .stage3-wrapper {
        flex-wrap: wrap;
    }
    .stage3 .right-wrapper h1 {
        font-size: 45px;
        line-height: 55px;
    }
    .stage3 .right-wrapper h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .stage3 .right-wrapper p {
        font-size: 13px;
    }
    .stage3 .right-wrapper .button:before {
        width: 15px;
        height: 15px;
        position: relative;
        top: 2px;
        left:-2px;
    }
}
@media screen and (max-width: 710px) {

    .ilves,.ilves2 {
        /*display: none;*/
    }
    .ilves {
        margin-left: 0;
        right: 0;
        left: auto;
        top: 290px;
        z-index: 9;

    }
    .ilves2 {
        margin-left: 0;
        left: 0;
        top: 360px;
        z-index: 9;
    }
}
@media screen and (max-width: 600px) {
    .timantti2 img {
        width: 160px;
    }
    .sormet {
        top: 280px;
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}


@keyframes swing {
    0% { transform: rotate(3deg); transform: scale(1);}
    100% { transform: rotate(-3deg); transform: scale(0.9);}
}
@keyframes muljuu {
    0% { transform: rotate(1deg);  }
    100% { transform: rotate(-1deg); }
}
@keyframes muljuu2 {
    0% { transform: rotate(5deg);  }
    100% { transform: rotate(-5deg); }
}