@import 'config';

body
{
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: @color-text;
    background: #FFF;
    line-height: 1.5;
}


.message
{
    padding: 10px;
    border: 1px solid #e9e9e9;
    background: #FFF;
    text-align: center;
    color: #000;

    &.is-success
    {
        background: #dbe7cf;
        border: 1px solid darken(#dbe7cf, 5%);
    }
}

.hhembed,
.iframe-wrapper
{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-bottom: 20px;

    iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
}


.code-block
{
    text-align: center !important;
    margin-bottom: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    &.code-block-38
    {

    }
}

.fc-consent-root .fc-stacks
{
    min-height: 125px !important;


}

/** Reklamy */
.wp-caption
{
    width: 100% !important;

    img
    {
        max-width: 100%;
        height: auto !important;
    }
}

.adv-item
{
    margin: 15px 0px;
}

.el-button, input.submit
{
    display: table;
    padding: 15px 30px;
    background: @color-yellow;
    border: 0px !important;
    outline: none !important;
    color: @color-text;
    font-weight: bold;
    text-decoration: none !important;
    .transition-duration(.3s);
    box-shadow: none;

    &:hover
    {
        background: @color;
        color: #FFF;
        box-shadow: 0px 0px 0px 3px @color;
        padding: 15px 40px;
    }

    &.is-center
    {
        margin: 20px auto;
    }
}

input.submit
{
    margin: 0px auto;
}

a
{
    color: @color;
}

@import 'admin.less';


.error-404
{
    padding: 20px;
    text-align: center;
}

#cookies
{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 10px 0px;
    background: @color;
    color: #FFF;
    font-size: 15px;
    text-align: center;
    z-index: 999999;

    button
    {
        display: table;
        margin: 10px auto 0px auto;
        background: #FFF;
        color: @color-text;
        padding: 8px 20px;
        border: 1px solid @color;
        outline: 0px;
        .rounded(20px);
    }
}

a
{
    color: @color;

    &:hover,
    &:focus
    {
        color: @color;
    }
}

img
{
    max-width: 100%;
    height: auto !important;
}

.page-numbers
{
    list-style: none;
    display: table;
    margin: 20px auto auto auto;
    width: 100%;
    text-align: center;

    > li
    {
        display: inline-block;
        line-height: 20px;
        vertical-align: middle;

        a, span
        {
            min-width: 20px;
            text-align: center;
            display: block;
            color: @color-text;
        }

        span
        {
            color: @color;
        }

        .prev
        {
            margin-right: 10px;
            width: 20px;
            height: 20px;
            background: url('../img/i-arrow-left.svg') no-repeat center center;
            background-size: 20px 20px !important;
            display: block;
        }

        .next
        {
            margin-left: 10px;
            width: 20px;
            height: 20px;
            background: url('../img/i-arrow-right.svg') no-repeat center center;
            background-size: 20px 20px !important;
            display: block;
        }
    }
}

.banners
{
    padding: 15px 0px;
    text-align: center;

    img
    {
        display: block;
        margin: 0px auto;
        border: 1px solid @color-border;
    }
}

.wrapper
{
    width: 100%;
    max-width: 1920px;
    overflow: hidden;
    margin: 0px auto;
    .relative();
}

.container
{
    .relative();
    margin: 0px auto;
    padding: 0px 15px;

    &::before,
    &::after
    {
        clear: both;
        display: block;
        content: " ";
    }

    @media (min-width: 1401px)
    {
        width: 100%;
        max-width: 1430px;
    }
}

/* Nagłówki */
h1, h2, h3, h4, h5, h6, .title,
.title-large, .title-medium
{
    font-weight: bold;
    line-height: 1.1;
    margin-top: 0px;
    padding: 0px;


}

.title-medium
{
    text-transform: uppercase;
}

h1
{
    font-weight: bold;
    margin: 0px 0px 20px 0px;
    font-size: 30px;

    &.category-title
    {
        text-transform: uppercase;
    }
}

h2
{
    font-size: 24px;
}

h3, .title-medium
{

    font-size: 20px;

    @media (max-width: 767px)
    {
        font-size: 18px;
    }
}

.yarpp-related
{
    border-top: 1px solid @color-border;
    padding: 30px 0px;

    .yarpp-thumbnails-horizontal
    {
        margin: 0px -10px;
        .display(flex);
        .align-items(flex-start);
        .justify-content(center);
        .flex-wrap(wrap);

        .yarpp-thumbnail
        {
            height: auto;
            border: 0px;
            padding: 0px 10px;
            width: 100%/4;
            margin: 0px;

            @media (max-width: 991px)
            {
                width: 100%/3;
            }

            @media (max-width: 500px)
            {
                width: 100%/2;
            }

            img
            {
                max-width: 100%;
                width: 100%;
                height: auto !important;
            }

            > span
            {
                overflow: visible;
                max-width: 100%;
                color: @color-text;
            }
        }
    }
}

blockquote
{
    padding-left: 60px;
    border: 0px;
    font-size: 1em;
    position: relative;

    &::before
    {
        content: "”";
        font-family: serif;
        position: absolute;
        z-index: -1;
        font-size: 100px;
        top: -20px;
        left: 0px;
        letter-spacing: -10px;
        color: @color-border;

    }
}

.header-sapcer
{
    height: 96px;
}

header
{
    padding: 20px 0px;
    background: #FFF;
    border-bottom: 1px solid @color-border;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;

    @media (max-width: 767px)
    {
        padding: 0px 0px 0px 0px;
    }


    .search
    {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 100%;
        background: @color;
        max-height: 0px;
        overflow: hidden;

        &.in
        {
            max-height: 60px;
        }

        form
        {
            position: relative;
            padding: 10px 0px;

            input
            {
                line-height: 36px;
                height: 36px;
                border: 0px !important;
                .rounded(2px);
                display: block;
                width: 100%;
                padding: 0px 20px;
                outline: none !important;
            }

            button
            {
                position: absolute;
                width: 36px;
                top: 0px;
                bottom: 0px;
                right: 0px;
                background: url('../img/i-search.svg') center center no-repeat;
                background-size: 18px auto !important;
                border: 0px;
                outline: none !important;
            }
        }


    }



    .languages
    {
        position: absolute;
        right: 15px;
        top: 7px;

        @media (max-width: 767px)
        {

            right: auto;
            left: 15px;
            top: 64px;
        }

        > a
        {
            padding: 2px 5px 0px;
            color: #FFF;
            display: block;
            margin: 0px 0px 4px;
            text-align: center;
            font-size: 10px;
            background: @color;
            text-decoration: none !important;

            @media (max-width: 767px)
            {
                display: inline-block;
                background: none;
                color: #000;
                font-weight: bold;
                font-size: 12px;
                padding: 0px;
                margin: 0px;

                &:after
                {
                    display: inline-block;
                    margin: 0px 10px;
                    content: "|";
                }

                &:last-child
                {
                    &:after
                    {
                        content: " ";
                    }
                }
            }
        }
    }

    .search-trigger
    {
        position: absolute;
        right: 205px;
        top: 12px;
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 0px 2px;
        background: url('../img/i-search.svg') center center no-repeat;
        background-size: 18px auto !important;
        cursor: pointer;

        @media (max-width: 767px)
        {
            top: 60px;
            right: 41px;
        }

        &.in
        {
            background: url('../img/i-close.svg') center center no-repeat;
            background-size: 18px auto !important;
        }
    }

    .socials
    {
        position: absolute;
        right: 55px;
        top: 12px;

        @media (max-width: 767px)
        {
            right: 0px;
            left: 0px;
            text-align: center;
            top: 10px;
            height: 35px;
            border-bottom: 1px solid @color-border;
        }

        > a
        {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin: 0px 2px;

            @media (max-width: 480px)
            {
                margin: 0px;
            }

            @media (max-width: 767px)
            {
                width: 25px;
                height: 25px;
                margin: 0px 6px;
            }

            &.facebook
            {
                background: url('../img/social/i_facebook.svg') no-repeat center center;
                background-size: 100% auto !important;
            }

            &.instagram
            {
                background: url('../img/social/i_instagram.svg') no-repeat center center;
                background-size: 100% auto !important;
            }

			&.telegram
            {
                background: url('../img/social/i_telegram.svg') no-repeat center center;
                background-size: 100% auto !important;
            }

            &.tiktok
            {
                background: url('../img/social/i_tiktok.svg') no-repeat center center;
                background-size: 100% auto !important;
            }
        }
    }

    .header-inside
    {
        @media (max-width: 767px)
        {
            padding-top: 50px;
        }
    }

    .logo
    {
        margin: 0px 0px;
        float: left;
        width: 200px;
        height: auto !important;

        @media (max-width: 767px)
        {
            display: table;
            float: none;
            margin: 0px auto 10px;
            width: 160px;
        }

        a
        {
            width: 200px;
            height: 55px;
            display: block;
            background: url('../img/logo.svg') no-repeat center center;
            background-size: 100% auto !important;

            @media (max-width: 767px)
            {
                width: 160px;
                height: 44px;
            }
        }

    }
}


.header-spacer
{
    height: 97px;

    @media (max-width: 991px)
    {
        height: 143px;
    }

    @media (max-width: 767px)
    {
        height: 105px;
    }
}

.admin-bar
{
    body
    {
        padding-top: 32px;
    }

    header
    {
        top: 32px;

    }
}

.author-details
{
    margin: 20px 0px;
    padding-top: 20px;
    position: relative;

    &::before
    {
        width: 100px;
        height: 2px;
        background: @color-border;
        position: absolute;
        top: 0px;
        left: 0px;
        content: " ";
    }

    &::before,
    &::after
    {
        clear: both;
        display: block;
        content: " ";
    }

    .author_details
    {
        .display(flex);
        .align-items(center);
        .justify-content(flex-start);

        img
        {
            margin-right: 20px;
        }
    }
}

footer
{
    background: fade(@color-border, 50%);
    padding: 20px 0px;

    .nav-footer
    {
        list-style: none;
        margin: 0px;
        text-align: center;
        padding: 15px 0px;

        > li
        {
            padding: 0px 10px;
            list-style: none;
            display: inline-block;

            a
            {
                color: inherit;
            }
        }
    }

    .description
    {
        text-align: center;
        font-size: 13px;
        color: #666;
    }

    .copyright
    {
        text-align: center;
        font-size: 13px;
        color: #999;
    }
}

.navbar-toggle
{
    background: #FFF;
    margin: 0px;
    position: absolute;
    right: 0px;
    top: 57px;

    *
    {
        background: @color;
    }
}


.navbar-collapse
{
    @media (max-width: 767px)
    {
        padding: 0px;
        margin: 0px -15px;
    }
}

.nav-dropdown
{
    margin-top: 20px;
    margin-right: 210px;

    @media (min-width: 768px) and (max-width: 991px)
    {
        width: 100%;
        text-align: center;
        margin: 20px 0px 0px 0px;
    }

    @media (max-width: 767px)
    {
        width: 100%;
        margin: 0px;
        background: @color;
    }

    > li
    {
        @media (min-width: 768px) and (max-width: 991px)
        {
            float: none;
            display: inline-block;
        }

        > a
        {
            text-transform: uppercase;
            font-weight: bold;
            color: @color-text;
            padding: 0px;
            font-size: 16px;
            margin-right: 15px;
            background: none !important;
            border-bottom: 2px solid transparent;

            @media (max-width: 767px)
            {
                padding: 10px;
                border-bottom: 0px !important;
                text-align: center;
                display: block;
                color: #FFF;
            }
        }

        &:hover
        {
            > a
            {
                border-bottom: 2px solid @color-border;
            }
        }

        &.active
        {
            > a
            {
                border-bottom: 2px solid @color-red;
            }
        }
    }
}

.last
{
    position: relative;
    background: @color;

    &::before
    {
        position: absolute;
        width: 1000px;
        top: 0px;
        bottom: 0px;
        content: " ";
        background: @color;
        left: -1000px;
    }

    &::after
    {
        position: absolute;
        width: 1000px;
        top: 0px;
        bottom: 0px;
        content: " ";
        background: @color;
        right: -1000px;
    }

    .last-items
    {
        margin: 0px -20px;
        padding: 40px 0px 0px 0px !important;

        @media (max-width: 600px)
        {

            overflow: auto;
            .display(flex);
            .align-items(flex-start);
            .justify-content(flex-start);
            margin: 0px;
            padding-bottom: 20px !important;

            &::-webkit-scrollbar {
              width: 10px;
              height: 10px;
            }

            /* Track */
            &::-webkit-scrollbar-track {
              background: darken(@color, 5%);
            }

            /* Handle */
            &::-webkit-scrollbar-thumb {
              background: @color-red;
            }

            /* Handle on hover */
            &::-webkit-scrollbar-thumb:hover {
              background: #555;
            }
        }

        &::before,
        &::after
        {
            clear: both;
            display: block;
            content: " ";
        }

        > div
        {
            position: relative;
            float: left;
            padding: 0px 20px 40px;

            @media (max-width: 600px)
            {
                padding: 0px 10px 20px;
            }


            @media (min-width: 992px)
            {
                width: 100%/3;
                .clear(3);
            }

            @media (min-width: 601px) and (max-width: 991px)
            {
                width: 100%/2;
                .clear(2);
            }

            @media (max-width: 600px)
            {
                min-width: 290px;
                width: 290px;
            }

            > div
            {
                position: relative;

                > .description
                {
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                    right: 0px;
                    padding: 20px;
                    background: fade(@color, 50%);

                    @media (max-width: 600px)
                    {
                        padding: 10px;
                    }

                    img
                    {
                        width: 100%;
                        max-width: none;
                    }

                    .categories
                    {
                        a
                        {
                            color: #FFF;
                        }
                    }

                    h3
                    {
                        margin: 0px;
                        font-size: 20px;
                        color: #FFF;
                        font-weight: bold;

                        @media (max-width: 767px)
                        {
                            font-size: 18px;
                        }

                        a
                        {
                            color: inherit;
                        }
                    }
                }
            }


        }
    }


}
/*
*[data-label]:not([data-label-text])
{
    &::before
    {
        content: attr(data-label);
        background: #cc1417;
        color: #FFF;
        padding: .2em .4em;
        font-size: .8em;
        margin-right: .5em;
        display: inline-block;
    }
}
*/

.label-text
{
    color: #FFF;
    padding: .2em .4em;
    font-size: .8em;
    margin-right: .5em;
    display: inline-block;
}


.content
{
    margin: 0px -20px;

    .content-body
    {
        float: left;
        padding: 20px 20px;
        width: 70%;

        @media (max-width: 767px)
        {
            padding: 10px 20px;
            width: 100%;
            float: none;
        }
    }

    .content-sidebar
    {
        float: left;
        padding: 20px 20px;
        width: 30%;

        @media (max-width: 767px)
        {
            width: 100%;
            float: none;
        }

        > div
        {
            margin-bottom: 20px;
        }
    }
}

h2.category-title
{
    font-size: 22px;
    text-transform: uppercase;
    margin: 0px 0px 30px 0px;
    font-weight: bold;

    a
    {
        color: inherit;
    }
}

.categories
{
    margin-bottom: 10px;

    a
    {
        margin-right: 5px;
        font-size: 11px;
        text-transform: uppercase;
        color: @color;
    }
}

.currency-rates
{
    .name
    {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .data
    {
        padding: 5px 10px;
        background: #f9f9f9;
    }

    table
    {
        width: 100%;

        tr
        {
            td
            {
                border-bottom: 1px solid @color-border;
                padding: 3px 0px;


            }

            &:last-child
            {
                td
                {
                    border-bottom: 0px;
                }
            }
        }
    }
}

.currency-sidebar
{
    @media (max-width: 767px)
    {
        display: none;
    }
}

.currency-home
{
    display: none;

    @media (max-width: 767px)
    {
        padding: 20px 0px;
        display: block;

        table
        {
            text-align: center;

            tr
            {
                display: inline-block;
                padding: 0px 10px;
            }

            td
            {
                border-bottom: 0px !important;
                display: inline-block;

                padding: 1px 0px !important;

                &:last-child
                {
                    font-weight: bold;

                    &:before
                    {
                        content: " - ";
                    }
                }
            }

            td:nth-child(2)
            {
                display: none;
            }
        }
    }

    @media (max-width: 480px)
    {
        font-size: 14px;
    }
}

.breadcrumbs
{
    padding: 5px 0px;
    border-bottom: 1px solid @color-border;

    a, span[aria-current]
    {
        color: inherit;
    }

    span[aria-current]
    {
        font-weight: bold;
    }
}

.items-tabs
{
    margin: 0px -5px 20px;
    border-bottom: 1px solid @color-border;

    &:before,
    &::after
    {
        clear: both;
        display: block;
        content: " ";
    }

    > div
    {
        border: 1px solid @color-border;
        padding: 8px 20px;
        margin: 0px -1px -1px 0px;
        float: left;
        border: 1px solid transparent;
        cursor: pointer;
        font-weight: bold;
        font-size: 15px;

        @media (max-width: 400px)
        {
            padding: 5px 10px;
            font-size: 14px;
        }

        &.in,
        &:hover
        {
            border: 1px solid @color-border;
            border-bottom: 1px solid #FFF;
        }

    }
}

.items
{
    margin: 0px -15px 20px;
    padding-bottom: 20px;

    @media (max-width: 767px)
    {
        margin: 0px -10px 20px;
    }

    &::before,
    &::after
    {
        clear: both;
        display: block;
        content: " ";
    }

    .adv-item
    {
        clear: both;
        .clearAll();
    }

    .item-row
    {
        .display(flex);
        .align-items(flex-start);
        padding: 0px 15px 30px;

        @media (max-width: 767px)
        {
            .align-items(center);
            padding: 0px 10px;
            margin-bottom: 15px;
        }

        & + .nest
        {
            margin-bottom: 30px;
        }

        .image
        {
            width: 315px;
            min-width: 315px;
            margin-right: 20px;

            @media (max-width: 767px)
            {
                width: 120px;
                min-width: 120px;
            }

            img
            {
                display: block;
                margin: 0px auto;
            }
        }

        h3
        {
            font-size: 22px;
            color: @color-text;
            font-weight: bold;
            padding-bottom: 20px;
            position: relative;
            margin: 0px;


            @media (max-width: 767px)
            {
                padding-bottom: 0px;
                font-size: 16px;
            }

            a
            {
                color: inherit;
            }
        }

        .description-body
        {
            @media (max-width: 767px)
            {
                display: none;
            }
        }
    }

    .item
    {
        float: left;
        padding: 0px 10px;
        margin-bottom: 20px;

        .image
        {
            margin-bottom: 10px;
        }


        h3, h4
        {
            font-size: 18px;
            color: @color-text;
            font-weight: bold;
            padding-bottom: 20px;
            position: relative;
            margin: 0px;

            @media (max-width: 767px)
            {
                font-size: 16px;
                padding-bottom: 10px;
            }

            a
            {
                color: inherit;
            }

            &::after
            {
                width: 100px;
                height: 2px;
                background: @color;
                position: absolute;
                bottom: 0px;
                left: 0px;
                content: " ";
            }
        }

        &.item-popular
        {
            h3, h4
            {
                font-size: 16px;

                @media (max-width: 380px)
                {
                    font-size: 14px;
                }

                &::after
                {
                    display: none;
                }
            }
        }
    }

    &.items-list
    {
        .item
        {
            width: 100%/3;

            @media (min-width: 581px)
            {
                .clear(3);
            }

            @media (max-width: 580px)
            {
                width: 100%/2;
                .clear(2);
            }
        }
    }

    &.items-popular
    {
        display: none;

        &.in
        {
            display: block;
        }


        .item
        {
            width: 100%/4;

            @media (min-width: 992px)
            {
                .clear(4);
            }

            @media (min-width: 581px) and (max-width: 991px)
            {
                .clear(3);
            }

            @media (max-width: 992px)
            {
                width: 100%/3;
            }

            @media (max-width: 580px)
            {
                width: 100%/2;
                .clear(2);
            }
        }
    }
}

.search-item
{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid @color-border;

    h3
    {
        font-size: 22px;
        color: @color-text;
        font-weight: bold;
        padding-bottom: 20px;
        position: relative;
        margin: 0px;

        a
        {
            color: inherit;
        }
    }
}

.title-single
{
    margin: 0px;
}

.list
{
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 15px;
    border: 1px solid @color-border;
}

.item-list
{
    .display(flex);
    .align-items(flex-start);
    padding: 5px 0px;
    border-bottom: 1px solid @color-border;
    color: @color-text;

    &:last-child
    {
        border-bottom: 0px;
    }

    &.is-important
    {
        font-weight: bold;
        padding-top: 0px;
    }

    a
    {
        color: inherit;
    }

    .image
    {
        width: 90px;
        margin: 0px 10px 0px 0px !important;

        img
        {
            margin: 0px !important;
        }
    }
}

.about-author
{
    .display(flex);
    .align-items(center);
    margin-bottom: 30px;
    padding: 30px;
    background: @color-border;

    @media (max-width: 460px)
    {
        padding: 20px;
        display: block;
    }

    .avatar
    {
        width: 150px;
        margin-right: 20px;

        @media (max-width: 460px)
        {
            margin-bottom: 15px;
        }

        img
        {
            max-width: 100%;
            .rounded(75px);
            height: auto !important;
        }
    }

    .details
    {
        font-size: 14px;

        > a
        {
            color: #000;
            font-size: 16px;
            font-weight: bold;
        }

        .info
        {
            color: #666666;

            a
            {
                color: inherit;
            }
        }
    }
}

.single-item
{

    .socials-single-icons
    {
        margin: 20px 0px;
        min-height: 47px;
    }

    .socials-single
    {
        margin: 20px 0px;
        padding: 10px 0px;
        border-top: 1px solid @color-border;
        border-bottom: 1px solid @color-border;
        .display(flex);
        .align-items(center);
        .justify-content(center);

        > span
        {
            font-weight: bold;
            margin-right: 10px;
        }
    }

    .title-single
    {
        margin-bottom: 20px;
    }

    .socials-bar
    {
        .display(flex);
        .align-items(center);
        .justify-content(space-between);
        border: 1px solid @color-border;
        padding: 15px 15px;
        font-size: 13px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);

        &.has-margin
        {
            margin: 10px 0px 30px;
        }

        .socials
        {
            > span
            {
                font-weight: bold;
                margin-right: 10px;
            }

            a
            {
                display: inline-block;
                color: inherit;
                margin-right: 10px;
                padding-left: 25px;
                line-height: 20px;

                &.facebook
                {
                    background: url('../img/i-social-facebook.svg') left center no-repeat;
                    background-size: auto 20px !important;
                }

                &.x
                {
                    background: url('../img/i-social-x.svg') left center no-repeat;
                    background-size: auto 20px !important;
                }

                &.telegram
                {
                    background: url('../img/i-social-telegram.svg') left center no-repeat;
                    background-size: auto 20px !important;
                }

                img
                {
                    height: 20px !important;
                    width: auto !important;
                    margin-right: 10px;
                }
            }
        }

        .comments
        {
            cursor: pointer;

            span
            {
                background: url('../img/i-comments.svg') right center no-repeat;
                background-size: auto 17px !important;
                padding-right: 25px;
                line-height: 20px;
                font-weight: bold;
                color: @color-red;
                display: inline-block;
            }
        }
    }

    .author-preview
    {
        .display(flex);
        .align-items(center);
        margin-bottom: 20px;


        .avatar
        {
            width: 60px;
            margin-right: 20px;

            img
            {
                max-width: 100%;
                .rounded(30px);
                height: auto !important;
            }
        }

        .details
        {
            font-size: 14px;

            > a
            {
                color: #000;
                font-size: 16px;
                font-weight: bold;
            }

            .info
            {
                color: #666666;

                a
                {
                    color: inherit;
                }
            }
        }
    }


    .image
    {
        border: 1px solid @color-border;
        margin: 20px 0px;

        span
        {
            padding: 5px 10px;
            display: block;
        }

        img
        {
            display: block;
            margin: 0px auto;
        }
    }

    h2
    {
        margin: 20px 0px;
    }

    .tags
    {
        a
        {
            margin-right: 5px;
            display: inline-block;
            background: @color-border;
            color: @color-text;
            padding: 0px 10px;
            font-size: 12px;
        }
    }
}

.single-gallery
{

    .items
    {
        margin: 20px -10px -20px -10px;

        &::before,
        &::after
        {
            clear: both;
            display: block;
            content: " ";
        }

        > div
        {
            padding: 0px 10px;
            margin-bottom: 20px;
            width: 100%/3;
            float: left;

            @media (max-width: 500px)
            {
                width: 100%/2;
            }

            img
            {
                max-width: 100%;
                height: auto !important;
            }
        }
    }
}

.zobacz-podobne
{
    .display(flex);
    .align-items(center);
    margin-bottom: 20px;

    &-image
    {
        max-width: 150px;
        margin-right: 20px;
    }
}

h3#comments
{
    margin-bottom: 20px;
}

.comment-reply-link,
#cancel-comment-reply-link
{
    display: inline-block;
    color: @color-text;
    border: 1px solid @color-border;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 12px;
    background: #FFF;
}

ol.commentlist
{
    list-style: none;
    margin: 0px;
    padding: 0px;

    .children
    {
        margin: 20px 0px;
    }

    li
    {
        list-style: none;
        margin-bottom: 20px;

        .comment-author
        {
            cite
            {
                font-weight: bold !important;
                font-style: normal !important;

                a
                {
                    color: inherit;
                }
            }


            img
            {
                .rounded(18px);
            }
        }

        .reply
        {
            text-align: left;
        }


        .comment-meta
        {
            font-size: 11px;
            margin-bottom: 5px;

            @media (min-width: 500px)
            {
                float: right;
                margin-top: -25px;
                margin-bottom: 0px;
            }

            a
            {
                color: @color-text;
            }

            & + p
            {
                padding: 10px;
                border: 1px solid @color-border;
                .rounded(5px);
                display: table;
            }
        }

        &:nth-child(odd)
        {
            .comment-meta + p
            {
                background: #f9f9f9;
            }
        }
    }
}

.comment-respond
{
    padding: 25px 15px;
    background: #f9f9f9;
    text-align: center;
    margin-bottom: 20px;

    h3
    {
        text-transform: uppercase;
        font-size: 18px;
    }

    form
    {
        max-width: 500px;
        margin: 0px auto;
    }

    .comment-reply-title
    {
        small
        {
            display: block;
        }
    }

    .comment-form-comment,
    .comment-form-author,
    .comment-form-email
    {
        label
        {
            display: block;
        }

        textarea
        {
            max-height: 100px;
        }

        textarea, input
        {
            display: block;
            border: 1px solid @color-border;
            width: 100%;
            padding: 10px 15px;
        }
    }
}


/** Elementy formularza */
.contact-form
{
    width: 100%;
    max-width: 600px;
    padding: 40px;
    background: #F9F9F9;
}

.form-group
{
    > label
    {
        text-align: left;
        display: block;

        span
        {
            color: #cc1417;
        }
    }
}

.form-control
{
    .rounded(2px);
    box-shadow: none !important;
    border: 1px solid @color-border;
    padding: 0px 20px;

    &:not(textarea)
    {
        line-height: 40px;
        height: 40px;
    }
}

.has-error
{
    .form-control
    {
        border: 1px solid @color-red;
    }

    .form-checkbox
    {
        label
        {
            &:before
            {
                border-color: @color-red;
            }
        }
    }
}

textarea.form-control
{
    padding: 20px;
}

.form-checkbox
{
    position: relative;
    font-size: 12px;

    input
    {
        position: absolute;
        top: 0px;
        right: 0px;
        opacity: 0;
    }

    label
    {
        position: relative;
        text-align: left;
        font-weight: 400;
        padding-left: 30px;

        &::before
        {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 0px;
            left: 0px;
            background: #FFF;
            content: " ";
            border: 1px solid @color-border;
        }

        span
        {
            display: block;
            font-size: 11px;
            margin-top: 5px;
        }
    }

    input:checked + label
    {
        &::before
        {
            border: 3px solid @color;
        }

    }
}