@media only screen and (max-width: 1920px) {
    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1680px) {
    .box {
        width: 220px;
    }

    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1440px) {
    .store-img {
        width: 120px;
        padding-bottom: 10px;
        padding-right: 10px;
    }

    .box {
        width: 200px;
    }

    .lSPager.lSpg {
        display: none;
    }
}

@media only screen and (max-width: 1240px) {
    .box {
        width: 200px;
        height: 500px;
    }

    .lSPager.lSpg {
        display: none;
    }

    .card-category {
        margin-top: 10px;
        margin-bottom: 10px;
    }

}

@media only screen and (min-width: 1240px) {
    .temperatura,
    .temperatura-kartica {
    font-size: 52px;
    text-align: left;
    font-weight: 999;
    letter-spacing:-4px;
    z-index: 0;
    }

    .temperatura-kartica {
    font-size: 40px !important;
    text-align: right!important;
    }

}

@media only screen and (max-width: 840px) {
    .weather-card #weather-animations {
        display: inline-block;
        width: 60% !important;
        margin-left: 30px;
    }

    .temperatura {
        text-align: left !important;
        margin-left: 20px !important;
    }

    .temperatura-kartica {
        text-align: center !important;
        margin-left: 0px !important;
    }

    .temperatura-kartica {
        height: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .box {
        width: 230px;
    }

    .lSPager.lSpg {
        display: block;
    }

    .desktop-card {
        display: none;
    }

    #rays {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 25%;
    }

    #rays::after {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 0px;
    }

    #sun {
        width: 55px;
        height: 55px;
        top: 0px;
        left: 25%;
    }

    .star {
        margin: 50px 0;
        position: relative;
        display: block;
        width: 0px;
        height: 0px;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #ECD555;
        -webkit-transform: rotate(35deg);
        -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
        transform: rotate(35deg);
        -webkit-transform: scale(0.15);
        -moz-transform: scale(0.15);
        -ms-transform: scale(0.15);
        -o-transform: scale(0.15);
        transform: scale(0.15);
    }

    .star::before {
        content: "";
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 80px solid #ECD555;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -60px;
        display: block;
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
        transform: rotate(-35deg);
    }

    .star::after {
        content: "";
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #ECD555;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }

    #miniRays {
        width: 75px;
        height: 75px;
        top: 25px;
        left: 75px;
    }

    #miniRays::after {
        height: 75px;
        width: 75px;
        top: 0px;
        left: 0px;
    }

    #miniSun {
        width: 75px;
        height: 75px;
        top: 25px;
        left: 75px;
    }

    #miniCloud {
        background-color: #DBE4EE;
        width: 75px;
        height: 75px;
        top: 40px;
        animation: cloudFloat 5s infinite linear;
    }

    #miniCloud::before {
        background-color: #DBE4EE;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #miniCloud::after {
        background: -webkit-linear-gradient(#DBE4EE, #A9BBCF);
        background: -moz-linear-gradient(#DBE4EE, #A9BBCF);
        background: -ms-linear-gradient(#DBE4EE, #A9BBCF);
        background: -o-linear-gradient(#DBE4EE, #A9BBCF);
        background: linear-gradient(#DBE4EE, #A9BBCF);
        width: 140px;
        height: 60px;
        top: 40px;
        left: -15px;
    }

    #miniDarkCloud {
        background-color: #90A7BF;
        width: 75px;
        height: 75px;
        top: -10px;
        left: 75px;
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        animation: cloudFloatOpposite 5s infinite linear;
    }

    #miniDarkCloud::before {
        background-color: #90A7BF;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #miniDarkCloud::after {
        background: -webkit-linear-gradient(#90A7BF, #7792AF);
        background: -moz-linear-gradient(#90A7BF, #7792AF);
        background: -ms-linear-gradient(#90A7BF, #7792AF);
        background: -o-linear-gradient(#90A7BF, #7792AF);
        background: linear-gradient(#90A7BF, #7792AF);
        width: 110px;
        height: 50px;
        top: 40px;
        left: -15px;
    }



    #cloud {
        background-color: #DBE4EE;
        width: 60px;
        height: 60px;
        top: -70px;
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
        transform: scale(0.75);
        animation: cloudFloat 5s infinite linear;
    }

    .rain #miniDarkCloud {
        top: -55px;
    }

    .rain #cloud {
        top: -115px;
    }

    .snow #miniDarkCloud {
        top: -65px;
    }

    .snow #cloud {
        top: -115px;
    }

    #cloud::before {
        background-color: #DBE4EE;
        width: 30px;
        height: 35px;
        top: 17px;
        left: 45px;
    }

    #cloud::after {
        background: -webkit-linear-gradient(#DBE4EE, #A9BBCF);
        background: -moz-linear-gradient(#DBE4EE, #A9BBCF);
        background: -ms-linear-gradient(#DBE4EE, #A9BBCF);
        background: -o-linear-gradient(#DBE4EE, #A9BBCF);
        background: linear-gradient(#DBE4EE, #A9BBCF);
        width: 90px;
        height: 35px;
        top: 40px;
        left: -10px;
    }

    #raindrop1 {
        left: 110px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop5 {
        left: 90px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop2 {
        left: 70px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop6 {
        left: 50px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop3 {
        left: 30px;
        animation: raindrop 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop4 {
        left: 10px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #raindrop7 {
        left: 0px;
        animation: raindropAlt 2s infinite linear, raindropFade 2s infinite linear;
    }

    #darkCloud {
        background-color: #90A7BF;
        width: 75px;
        height: 75px;
        top: 0px;
        animation: cloudFloat 5s infinite linear;
    }

    #darkCloud::before {
        background-color: #90A7BF;
        width: 50px;
        height: 50px;
        top: 17px;
        left: 55px;
    }

    #darkCloud::after {
        background: -webkit-linear-gradient(#90A7BF, #7792AF);
        background: -moz-linear-gradient(#90A7BF, #7792AF);
        background: -ms-linear-gradient(#90A7BF, #7792AF);
        background: -o-linear-gradient(#90A7BF, #7792AF);
        background: linear-gradient(#90A7BF, #7792AF);
        width: 140px;
        height: 60px;
        top: 40px;
        left: -15px;
    }

    #moon {
        width: 85px;
        height: 85px;
        top: -200px;
        left: 40%;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        border-radius: 50px;
        position: relative;
        box-shadow: 30px 15px 0 0 #ECD555;
        -webkit-transform: rotate(130deg);
        -moz-transform: rotate(130deg);
        -ms-transform: rotate(130deg);
        -o-transform: rotate(130deg);
        transform: rotate(130deg);
        animation: moonSwing 3s infinite linear;
    }

    #star1 {
        top: 0;
        left: -80px;
        animation: starFadeIn 5s infinite linear;
    }

    #star2 {
        top: -330px;
        left: -15px;
        animation: starFadeOut 6s infinite linear;
    }

    #star3 {
        top: -390px;
        left: 0;
        animation: starFadeIn 7s infinite linear;
    }

    .snowflake {
        position: absolute;
        font-size: 25px;
        color: #DBE4EE;
        height: 50%;
        animation: snow infinite;
    }


    .stormy:before {
        animation: stormy_thunder 2s steps(1, end) infinite;
        border-left: 0px solid transparent;
        border-right: 7px solid transparent;
        border-top: 43px solid yellow;
        box-shadow: yellow -7px -32px;
        content: '';
        display: block;
        height: 0;
        width: 0;
        position: absolute;
        left: 90px;
        top: 75px;
        transform: rotate(14deg);
        transform-origin: 50% -60px;
    }

    #weather-animations .row .weather {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }

    #weather-animations {
        width: 25%;
    }

    .weather-small-number {
        font-size: 16px;
        margin-bottom: 0;
    }

    .weather-medium-number {
        font-size: 28px;
        font-weight: 600;
        color: var(--text-gray);
        margin-bottom: 0;
    }

    #weather-animations .row {
        margin: auto;
    }

    .weather-small-description {
        margin-bottom: 7px;
        font-size: 13px;
    }

    .show-table-mobile {
        overflow: hidden;
        padding: 10px;
        margin: 5px 0;
    }


}

@media only screen and (max-width: 768px) {

    .vremenska-opis {
        font-size: 17px;
        margin-bottom: 0;

    }

    .vremenska-datum, .vremenska-datum p {
        margin-bottom: 0;
    }

}