/*на новой студии помер терминал, препроцессоров не будет*/

@font-face {
    font-family: Tagir;
    src: url(https://cdn.specialist.ru/content/file/fonts/tagir/tagirdpnormal.woff2) format("woff2"),url(https://cdn.specialist.ru/content/file/fonts/tagir/tagirdpnormal.woff) format("woff"),url(https://cdn.specialist.ru/content/file/fonts/tagir/tagirdpnormal.ttf) format("truetype")
}

@font-face {
    font-family: Baloo;
    src: url(https://cdn.specialist.ru/content/file/fonts/baloo/baloo-cyrillic.woff2) format("woff2"),url(https://cdn.specialist.ru/content/file/fonts/baloo/baloo-cyrillic.woff) format("woff"),url(https://cdn.specialist.ru/content/file/fonts/baloo/baloo-cyrillic.ttf) format("truetype")
}

.container-for-background {
    background-image: url("https://cdn.specialist.ru/content/image/advent-calendar2023/snowback.png"), linear-gradient(to bottom, #002063 3%, #3FA7FF 68%);
    background-repeat: no-repeat, repeat;
    background-position: top center;
    background-size: cover, auto;
}

.container {
    max-width: 1270px;
    margin: 0 auto;
    min-width: 320px;
    padding-top: 40px;
    margin-bottom: -190px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1270px) {
    .container {
        padding: 20px
    }
}

p.breadcrumbs {
    display: none;
}

.page-content-section {
    background: rgba(12,129,193,.8);
    border-radius: 16px;
    padding: 40px;
    background: linear-gradient(148deg, rgba(98, 217, 243, 0.20) 15%, rgba(203, 225, 238, 0.20) 56%, rgba(134, 248, 255, 0.20) 98%);
    box-shadow: 1px 1px 1px 1px rgba(203, 225, 238, 0.20);
    backdrop-filter: blur(27px);
}

.page-header {
    color: #FFF;
    font-family: Montserrat;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 52.8px */
    margin-bottom: 44px;
}

@media (max-width: 550px) {
    .page-header {
        font-size: 40px
    }
}

.breadcrumbs-section {
    margin: 0 auto 36px;
    max-width: 1240px;
    padding: 0 20px
}

.breadcrumbs-list {
    display: flex
}

.breadcrumb-item {
    padding: 0 5px
}

    .breadcrumb-item:first-child {
        padding-left: 0
    }

    .breadcrumb-item:after {
        content: " >";
        display: inline-block;
        position: relative;
        left: 3px
    }

    .breadcrumb-item:last-child:after {
        display: none
    }

    .breadcrumb-item, .breadcrumb-item a {
        color: #fff;
        font-family: Montserrat;
        font-weight: 400;
        font-size: 17px
    }

.calendar-item-header {
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #003755;
    margin-bottom: 12px;
    z-index: 1;
    position: relative;
    display: none
}

.calendar-item:nth-child(2n) .calendar-item-header {
    font-size: 18px;
    margin-bottom: 6px
}

.calendar-item-content {
    margin-bottom: 5px;
    max-height: 84px;
    display: none
}

    .calendar-item-content p {
        font-family: Montserrat,sans-serif;
        font-weight: 500;
        font-size: 15px;
        line-height: 1.2;
        color: #003755
    }

    .calendar-item-content img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 100%
    }

#day23 .calendar-item-content {
    margin-top: -10px
}

#day25 .calendar-item-content {
    margin-top: -5px;
    transform: translateX(10px)
}

.calendar-item-link-wrapper {
    margin-bottom: 0;
    margin-top: auto;
    display: none
}

#day25 .calendar-item-link-wrapper {
    margin-top: 0
}

.calendar-item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff6505;
    border-radius: 5px;
    padding: 10px;
    font-family: Montserrat,sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .02em;
    color: #fff;
    position: relative;
    z-index: 3;
    white-space: nowrap;
    transition: all,.3s
}

    .calendar-item-link:after {
        display: block;
        content: "";
        width: 22px;
        height: 22px;
        background: url(https://cdn.specialist.ru/content/image/advent-calendar/right-small.png) 50% no-repeat;
        flex-shrink: 0;
        margin-left: 5px
    }

    .calendar-item-link:hover {
        background: #d15000;
        transition: all,.3s
    }

.js-can-open {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2
}

.calendar-list {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(5, 1fr); 
    gap: 15px;
    justify-items: center;
}

.calendar-item {
    width: 220px;
    height: 220px;
    border-radius: 25px;
    position: relative;    
}

@media (max-width: 1360px){
    .calendar-list {       
       grid-template-columns: repeat(4, 1fr);
       
    }
}

@media (max-width: 1040px) {
    .calendar-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 850px) {
    .calendar-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .calendar-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

.calendar-item span {
    position: absolute;
    font-family: Baloo,sans-serif;
    display: block
}

.calendar-item:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-position: 50%;
    background-repeat: no-repeat
}

.calendar-item:nth-child(2n) {
    background: url(https://cdn.specialist.ru/content/image/advent-calendar/snowflake.png) top 10px left 10px no-repeat,url(https://cdn.specialist.ru/content/image/advent-calendar/snowflake.png) bottom 10px left 10px no-repeat,url(https://cdn.specialist.ru/content/image/advent-calendar/snowflake.png) top 40px right 10px no-repeat,#00649a
}

    .calendar-item:nth-child(2n) span {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-weight: 400;
        font-size: 125px;
        color: #c6e1f8
    }

    .calendar-item:nth-child(2n).can-open:hover {
        transition: all,.3s;
        box-shadow: 0 0 10px 5px #1aa5f0
    }

    .calendar-item:nth-child(2n-1) {
        border-radius: 16px;
        border: 1.113px solid rgba(255, 255, 255, 0.70);
        background: linear-gradient(334deg, rgba(255, 255, 255, 0.40) 9%, rgba(176, 236, 255, 0.12) 88%);
        box-shadow: 1px 1px 1px 0px rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(28px);
    }

    .calendar-item:nth-child(2n-1).can-open:hover {
        transition: all,.3s;
        background-color: #1aa5f0;
        box-shadow: 0 0 10px 5px #1aa5f0
    }

    .calendar-item:nth-child(2n-1) span {
        top: 10px;
        left: 10px;
        font-weight: 400;
        font-size: 52px;
        color: #3377b1;
        background: #fff;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center
    }

.calendar-item#day1:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/dragon.png)
}

.calendar-item#day3:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/snowman.png)
}

.calendar-item#day5:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/ipb.png)
}

.calendar-item#day7:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/mountains.png)
}

.calendar-item#day9:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/ball.png)
}

.calendar-item#day11:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/termometr.png)
}

.calendar-item#day13:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/gift.png)
}

.calendar-item#day15:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/cert.png)
}

.calendar-item#day17:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/ball17.png)
}

.calendar-item#day19:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/snake.png);
    top: 60%
}

.calendar-item#day21:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/gift21.png)
}

.calendar-item#day23:before {
    width: 200px;
    height: 200px;
    background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/gift23.png)
}

    .calendar-item#day25 {
        background: linear-gradient(334deg, #FFF 9%, rgba(255, 255, 255, 0.30) 88%);
        
    }

    .calendar-item#day25:before {
        width: 200px;
        height: 200px;
        background-image: url(https://cdn.specialist.ru/content/image/advent-calendar2023/day25.png)
    }

.calendar-item.opened {
    background: #e0eff7;
    border: 3px solid #17638c;
    padding: 25px 20px;
    border-radius: 25px;
    display: flex;
    flex-direction: column
}

    .calendar-item.opened.can-open:hover {
        transition: none !important;
        background-color: #e0eff7 !important;
        box-shadow: none !important
    }

    .calendar-item.opened span {
        display: none
    }

    .calendar-item.opened strong {
        font-weight: 700
    }

    .calendar-item.opened:before {
        display: none
    }

    .calendar-item.opened:nth-child(2n) {
        border: 2px solid transparent;
        background-clip: padding-box;
        background-image: url(https://cdn.specialist.ru/content/image/advent-calendar/border-blue.png);
        background-size: 100% 100%;
        background-position: 50%;
        background-repeat: no-repeat;
        border-radius: 30px
    }

    .calendar-item.opened#day3 {
        background-image: url(https://cdn.specialist.ru/content/image/advent-calendar/actions/day3back.png);
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain
    }

    .calendar-item.opened#day6 {
        background-color: #d0ecea !important
    }

        .calendar-item.opened#day6 .calendar-item-header {
            font-size: 16px;
            margin-top: -12px;
            margin-bottom: 1px
        }

    .calendar-item.opened#day9 {
        background: #3da100 !important
    }

        .calendar-item.opened#day9 .calendar-item-header {
            color: #fff
        }

        .calendar-item.opened#day9 .calendar-item-link {
            color: #182b3d;
            background: #fff
        }

            .calendar-item.opened#day9 .calendar-item-link:after {
                background: url(https://cdn.specialist.ru/content/image/advent-calendar/right-small-blue.png) 50% no-repeat
            }

            .calendar-item.opened#day9 .calendar-item-link:hover {
                background: #182b3d;
                color: #fff
            }

                .calendar-item.opened#day9 .calendar-item-link:hover:after {
                    background: url(https://cdn.specialist.ru/content/image/advent-calendar/right-small.png) 50% no-repeat
                }

    .calendar-item.opened#day12 .calendar-item-header {
        margin-bottom: 15px
    }

    .calendar-item.opened#day13 {
        background: #f9d6d7 !important
    }

    .calendar-item.opened#day16 .calendar-item-header {
        margin-bottom: 15px
    }

    .calendar-item.opened#day17 .calendar-item-header {
        margin-bottom: 5px
    }

    .calendar-item.opened#day17 .calendar-item-content{
        max-height: 102px;
    }

    .calendar-item.opened#day23 {
        background-image: url(https://cdn.specialist.ru/content/image/advent-calendar/actions/fir-branch.png);
        background-repeat: no-repeat
    }

    .calendar-item.opened#day20 .calendar-item-content {
        max-height: 112px
    }

    .calendar-item.opened#day24 {
        background-image: url(https://cdn.specialist.ru/content/image/advent-calendar/actions/create.png);
        background-repeat: no-repeat;
        background-position: 50%;
        padding-left: 0;
        padding-right: 0
    }

        .calendar-item.opened#day24 .calendar-item-header {
            color: #fff;
            background-color: rgba(5,83,133,.9);
            padding: 8px;
            padding-left: 18px;
            padding-right: 14px;
            font-size: 18px
        }

        .calendar-item.opened#day24 .calendar-item-link-wrapper {
            width: 100%
        }

        .calendar-item.opened#day24 .calendar-item-link {
            width: 184px;
            margin-left: auto;
            margin-right: auto
        }

    .calendar-item.opened#day22 .calendar-item-header {
        margin-bottom: 20px
    }

    .calendar-item.opened#day22 .calendar-item-content {
        max-height: 138px
    }

    .calendar-item.opened#day21 {
        background: url(https://cdn.specialist.ru/content/image/advent-calendar/border-blue.png) 50% no-repeat,url(https://cdn.specialist.ru/content/image/advent-calendar/actions/stars.png) top no-repeat,#e0eff7
    }

    .calendar-item.opened#day25 {
        background: #e0eff7;
        border: 3px solid #17638c;
        padding: 15px 20px;
        border-radius: 25px
    }

        .calendar-item.opened#day25:before {
            display: none
        }

    .calendar-item.opened#day2 .calendar-item-header, .calendar-item.opened#day4 .calendar-item-header, .calendar-item.opened#day8 .calendar-item-header, .calendar-item.opened#day16 .calendar-item-header {
        font-size: 20px
    }

    .calendar-item.opened .calendar-item-content, .calendar-item.opened .calendar-item-header, .calendar-item.opened .calendar-item-link-wrapper {
        display: block
    }

.santa-section {
    height: 900px;
    background: url(https://cdn.specialist.ru/content/image/advent-calendar2023/bottom-back.png) no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;   
}

    .santa-section:before {
        display: block;
        content: "";
        position: absolute;
        bottom: -150px;
        left: 50%;
        transform: translateX(-50%);
        width: 1322px;
        max-width: 100%;
        height: 692px;
        background: url(https://cdn.specialist.ru/content/image/advent-calendar2023/gift-bottom.png) bottom left no-repeat;
        background-size: contain;
    }


@media (max-width: 972px) {
    .santa-section:before {
        bottom: 0;
    }
}


    @media (max-width: 968px) {
        .container {
            margin-bottom: -20px;
        }
    }