/* все стили, совпадающие с оформлением главной страницы, подключаются из файла index.css */

/* импорт стилей слайдера */
@import url('slider.css');

.articles-header:hover{
    text-decoration: none;
    cursor: unset;
}

.film{
    /* margin:10px auto 0 auto; */
    margin-top:10px;
    width:100%;
    height:auto;
}


body{
    position:relative;
}

/* блок aside */
.sidebar{
    position:sticky;
    position:-webkit-sticky;
    top: 10px;
}

    .headers-list{
        list-style:none;
        margin:0;
        padding:0;
        width:100%;
    }

        .headers-list-item{
            box-sizing: border-box;
            width:100%;
            /* height:40px; */
            background: #f1f1f1;
            color: var(--dark-gray);
            margin-bottom:5px;
            font-size:15px;
            line-height:15px;
            padding-left:10px;
            padding-right:10px;
            padding-top:calc((40px - 15px) / 2);
            padding-bottom:calc((40px - 15px) / 2);
            font-weight: normal;
            cursor: pointer;
            transition-property: background;
            transition-duration: 0.3s;
        }

            .headers-list-item a{
                text-decoration:none;
                color:inherit;
                font-size:inherit;
                line-height:inherit;
                
            }

        .selected-item{
            background-color: var(--orange);
            font-weight: bold;
        }

.up-button{
    width:50px;
    height:50px;
    position: fixed;
    bottom:50px;
    right:var(--page-hor-padding);
    opacity: 0.6;
    z-index: 10;
    background-color: var(--orange);
    border-radius:50%;
    box-sizing: border-box;
    background-image: url("../img/up-arrow2.svg");
    background-repeat:  no-repeat;
    background-position: center;
    background-size:30px auto;
    padding:10px;
    -webkit-box-shadow: 1px 1px 16px 0px rgba(50, 50, 50, 0.6);
    -moz-box-shadow:    1px 1px 16px 0px rgba(50, 50, 50, 0.6);
    box-shadow:         1px 1px 16px 0px rgba(50, 50, 50, 0.6);
    display:none;
    transition-property:opacity;
    transition-duration: 0.3s;;
}

.up-button:hover{
    opacity:0.9;
    cursor:pointer;

}

@media (max-width:1100px){
    .up-button{
        right:3%;
    }
}

@media (max-width:900px){
    .up-button{
        /* width:40px;
        height: 40px; */
        right:50px;
        background-size:24px auto;
    }
}

@media (max-width:1035px){

    .headers-list-item{
        font-size:14px;
    }

}

@media (max-width:900px){
    .content{
        flex-direction:column-reverse;
        flex-wrap: nowrap;
    }

        .sidebar{
            position:static;
        }

                .headers-list-item{
                    font-size:16px;
                }
}