#katalog-content-wrapper
{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

#controllers
{
    width:171px;
    margin-left: 30px;
    margin-bottom:53px;
    flex-wrap: wrap;
    z-index: 10;
}

#katalog-content
{
    position: relative;
    display: inline-block;
}

#katalog-logo
{
    margin-top: 20px;
    background:#262626;
    padding:10px 32px;
    z-index: 10;
}

#katalog h1
{
    text-align: left;
    font-size:16px;
    line-height:20px;
    color: #D1D1D1;
    font-weight: normal;
    padding-top:15px;
}

#service-list-block
{
    margin-top:82px;
    background:#262626;
    width:380px;
    padding-left:44px;
    z-index: 10;
    padding-bottom:10px;
}

#service-list-block a
{
    text-decoration: none;
}

#katalog #service-list h2
{
    font-size:16px;
    line-height:20px;
    font-weight: normal;
    color: #9B9B9B;
    margin:0;
    padding:0;
    display: block;
    cursor: pointer;
}

#katalog #service-list h2.active, #katalog #service-list h2:hover
{
    color:white;
}

#katalog #service-list ul
{
    max-height: calc(100vh - 350px);
    overflow: auto;
}

#katalog #service-list li
{
    padding:5px 0;
}

.map-point
{
    /*width:16px;
    height:16px;
    margin-left:-10px;
    margin-top:-10px;
    border-radius:10px;*/
    width:31px;
    height:31px;
    margin-left:-17px;
    margin-top:-17px;
    border-radius:35px;
    border: 2px solid white;
    background: #565656;
    cursor: pointer;
}

.point-title
{
    color:#FFFFFF;
    font-size: 16px;
    line-height: 20px;
    margin-top:20px;
    margin-left: -20px;
    position: absolute;
    z-index: 2;
    text-wrap: nowrap;
}

.point-content
{
    display: block;
    background: #000000CC;
    padding:20px 16px 0;
    position: absolute;
    /*z-index:3;*/
    /*left:25px;
    top:-10px;*/
    z-index:-1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.point-content.active
{
    z-index: 3;
    opacity: 1;
}

.point-content h2
{
    color:#9B9B9B;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    text-wrap: nowrap;
    margin: 0 0 10px;
}

.point-content h3
{
    font-size: 16px;
    line-height: 20px;
    color: white;
    font-weight: 700;
}

.point-content h3 a
{
    color: white;
    text-decoration: none;
}


.point-content h3 a:hover
{
    text-decoration: underline;
}

.point-content ul
{
    padding-left: 0;
}

.map-point:hover
{
    background: #00A84E;
}

.map-point.active
{
    animation: blinkColor 1s infinite;
    transition: background-color 0.3s ease;
}

@keyframes blinkColor {
    0% {
        background-color: #565656;
    }
    50% {
        background-color: #00A84E;
    }
    100% {
        background-color: #565656;
    }
}



.arrow-button
{
    width: 53px;
    height: 53px;
    cursor: pointer;
    margin:2px;
    background: #414141 url('../images/katalog/arrows.svg') no-repeat center;
    transition: background-position 0.3s ease;
}

.arrow-button:hover {
    animation: moveUp 0.5s linear infinite;
}

@keyframes moveUp {
    0% {
        background-position: center;
    }
    100% {
        background-position: center calc(50% - 5px) ;
    }
}

#arrow-down
{
    transform: rotate(180deg);
}

#arrow-left
{
    transform: rotate(270deg);
}

#arrow-right
{
    transform: rotate(90deg);
}

.arrow-button:first-child
{
    margin-left:59px;
    margin-right: 59px;
}

#katalog-detail-content
{
    position:fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#katalog
{
    background: #101010;
}

#katalog-content
{
    width:100%;
    height:100%;
}


@media(max-width:768px)
{
    #katalog-logo
    {
        margin-top:0;
    }

    #katalog-logo:before
    {
        content: '';
        width:100vw;
        height:54px;
        position: fixed;
        top:0;
        left:0;
        background: #262626;
        z-index: -1;
    }

    #service-list-block
    {
        margin-top:54px;
        width:100%;
        right: 0;
        padding-right:44px;
    }

    #service-list
    {
        display: none!important;
    }

    #katalog-content
    {
        height:calc(100vh - 108px);
        margin-top:108px;
    }

    #controllers
    {
        display: none!important;
    }

    #swipe-me
    {
        position:fixed;
        bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        left:0;
        right:0;
        z-index: 1000;
    }

    #swipe-me.showing
    {
        display: block!important;
    }
}

#swipe-me
{
    position:fixed;
    bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    display: none;
}

#service-list-block>a:before
{
    content: '';
    width: 10px;
    height: 2px;
    background: #9B9B9B;
    display: block;
    position: absolute;
    right:29px;
    top:25px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

#service-list-block>a:after
{
    content: '';
    width: 10px;
    height: 2px;
    background: #9B9B9B;
    display: block;
    position: absolute;
    right:22px;
    top:25px;transform: rotate(0deg);
    transition: transform 0.3s ease;
}

#service-list-block>a.collapsed:after
{
    transform: rotate(-45deg);
}

#service-list-block>a.collapsed:before
{
    transform: rotate(45deg);
}


/*******  scrollbar  *******/
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #00000028;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #00A84E;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #00A84E;
}