.links-menu {
    .content {
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
    }

    &.links-menu-colored,
    &.links-menu-transparent{
        display:none;
    }

    &.links-menu-inside{
        .intro{
            display:block;
            margin:20px 0 10px 10px;
        }

        .restrict-menu,
        .social-menu{
            .flex(12);

            a{
                margin-left:0;
                padding:10px;
            }
        }

        .restrict-menu {
            display:block;
            margin:10px 0;
            border-top:1px solid @color-white;
            border-bottom:1px solid @color-white;
            padding-bottom:10px;

            a{
                font-size:15px;
                display:block;
            }
        }

        .social-menu{
            justify-content:flex-start;
        }

        .facebook-ico,
        .instagram-ico,
        .twitter-ico,
        .youtube-ico{
            width:20px;
            height:21px;
        }

    }

    @media screen {
        @media (min-width:960px) {
            &.links-menu-colored,
            &.links-menu-transparent{
                display:block;
            }

            &.links-menu-colored {
                margin-bottom: 35px;
                background: @color-graygreen;

                .content {
                    padding: 12px 15px;
                }
            }

            &.links-menu-transparent {
                margin-bottom: 21px; //1px to border

                .content {
                    padding: 0 15px;
                    position: relative;

                    &:after {
                        content: '';
                        position: absolute;
                        left: 15px;
                        right: 15px;
                        bottom: -1px;
                        height: 1px;
                        background: @color-white;
                    }
                }
            }
        }
    }
}

.restrict-menu {
    .flex(6);
    display: flex;
    align-items: center;

    .intro,
    a {
        display: block;
        color: @color-white;
        text-transform: uppercase;
        line-height: 1em;
    }

    .intro {
        font-size: 10px;
    }

    a {
        font-size: 12px;
        font-weight: 700;
        margin-left: 30px;

        &:hover{
            text-decoration:underline;
        }
    }
}

.social-menu {
    .flex(2);
    display: flex;
    align-items: center;
    justify-content: flex-end;

    &:hover{
        a{
            opacity:0.3;
        }
    }

    a {
        display: block;
        padding: 10px 0;
        transition:.3s;

        & + a {
            margin-left: 14px;
        }

        &:hover{
            opacity:1;
        }
    }
}

.link-side-side{
    @media screen{
        @media (max-width:469px){
            display:flex;

            a{
                text-align:center;
            }
        }
    }
}