html,body
{
    background: #151515;
}

#body
{
    main
    {
        nav
        {
            margin-bottom: 100px;
            ul
            {
                display: flex;
                justify-content:center;
                li
                {
                    border-right: 1px solid $main-color;
                    &:last-child
                    {
                        border-right: 0px;
                    }
                    a
                    {
                        color:$main-color;
                        font-size:1.2em;
                        letter-spacing: 4px;
                        transition-duration:.5s;
                        &:hover
                        {
                            text-shadow: 0 0 2px $main-color;
                        }
                        display: inline-block;
                        padding:0 20px;
                    }
                    &.active
                    {
                        a
                        {
                            color:#fff;
                        }
                    }
                }
                @media(max-width:767px)
                {
                    li
                    {
                        a
                        {
                            font-size:1em;
                            padding:0 10px;
                        }
                    }
                }
            }
        }

        article
        {
            ul
            {
                display: flex;
                flex-wrap:wrap;
                @media(min-width:979px)
                {
                    li
                    {
                        width: calc((100% - 120px) / 3);
                        margin:0 20px 40px 20px;
                        &:nth-child(3n)
                        {
                            margin-right: 0px;
                        }
                        &:nth-child(3n + 1)
                        {
                            margin-left:0px;
                        }
                    }
                }
                a
                {
                    display: block;
                    position: relative;
                    &::after
                    {
                        position: absolute;
                        left:10px;
                        top:15px;
                        content: ' ';
                        width: calc(100% - 20px);
                        height: calc(100% - 20px);
                        border:1px solid $main-color;
                        opacity:.5;
                        transition-duration:.5s;
                    }
                    span
                    {
                        display: inline-block;
                        margin-left: 20px;
                        padding:0 10px;
                        line-height: 30px;
                        background: #151515;
                        position: relative;
                        z-index:3;
                        color:$main-color;
                        transition-duration:.5s;
                    }
                    div
                    {
                        padding:10% 5%;
                        background: #fff;
                        position: relative;
                        z-index:1;
                        picture
                        {
                            display: block;
                            position: relative;

                            padding-top:73%;
                            width: 100%;
                            overflow: hidden;
                            img
                            {
                                display: block;
                                position: absolute;
                                top:0px;
                                left: 0px;
                                width: 100%;

                            }
                        }
                    }
                    &:hover
                    {
                        span
                        {
                            text-shadow: 0 0 2px $main-color;
                        }
                        &::after
                        {
                            z-index: 2;
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
}