// out: false

/**
 * --------------------------------------------------------------------------------
 * TYPOGRAPHY
 * --------------------------------------------------------------------------------
*/

* {
    margin: 0;
}


// h1 {
//     line-height  : 1;
//     font-weight  : 500;
//     margin-bottom: @font-size*2;
// }

// h2 {
//     font-size    : 3.2rem;
//     font-weight  : 700;
//     line-height  : 1.2;
//     margin-bottom: @font-size;
// }

// h3 {
//     font-size  : 2.2rem;
//     font-weight: 600;
//     line-height: 1.2;
// }

// h4 {
//     color        : var(--color-primary);
//     font-size    : 1.8rem;
//     font-weight  : 700;
//     margin-bottom: 1rem;
// }

/**
 * Default Styles
 */

.single,
.page {

    img,
    video {
        height: auto;
        max-width: 100%;
    }
}

figure {
    margin: 0;
}

.alignnone {
    max-width: 100%;
    height: auto;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5rem;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5rem;
}

.wp-caption-text {
    font-size: 1.4rem;
    font-style: italic;
}

div:not(.has-post-thumbnail)>.post-single>.post-date {
    left: 0;
    right: unset;
}

div:not(.has-post-thumbnail)>.post-single>.entry-title {
    margin-top: 2rem;
}

.button {
    background-color: var(--color-primary);
    color: @white-color;
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-primary);
    border-radius: .2rem;
    cursor: pointer;
    .shadow;
    transition: .2s all ease;

    &:hover {
        color: var(--color-primary);
        background-color: @white-color;
    }
}

.reverse-button {
    background-color: @white-color;
    color: var(--color-primary);
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-primary);
    border-radius: .2rem;
    cursor: pointer;
    .shadow;
    transition: .2s all ease;

    &:hover {
        color: var(--color-primary);
        background-color: var(--color-primary);
    }
}

.next-post-wrap,
.previous-post-wrap {

    position: relative;

    &:before {
        color: var(--color-primary);
        font-size: 2rem;
        font-weight: 300;
        font-family: Fontawesome;
        line-height: .65;
        position: absolute;
        top: -2rem;
        width: 32px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .2s;
        transition: all .2s;
    }

    &:hover {
        &:before {
            opacity: 1;
            visibility: visible;
            right: 0;
        }
    }

}

.next-post-wrap {

    &:before {
        content: '\f178';
        right: 2rem;
    }

}

.previous-post-wrap {

    &:before {
        content: '\f177';
        left: 2rem;
    }

    &:hover {
        &:before {
            opacity: 1;
            visibility: visible;
            left: 0;
        }
    }

}

/**
 * --------------------------------------------------------------------------------
 * Masonry Section
 * --------------------------------------------------------------------------------
*/

.masonry-layout {
    padding: @theme-margin 0 0 0;
}

.grid-item {
    padding: 0;

    .post-wrap {
        background-color: #ffffff;
        position: relative;
        border-bottom: 1px solid @white-color;
        margin: 0 1.5rem 3rem 1.5rem;
        padding: 0;
        transition: .2s all ease;

        >a {
            display: block;
            position: relative;
        }

        >a::before {
            content: "";
            position: absolute;
            top: 4px;
            right: 4px;
            left: 4px;
            bottom: 4px;
            border: 2px solid #fff;
        }

        &:hover {
            .shadow;
            border-bottom: 1px solid var(--color-primary);
        }
    }

    a {
        color: var(--color-primary);
    }
}

.single-masonry {
    img {
        display: block;
        width: 100%;
        height: auto;
    }

    .post-excerpt {
        background-color: @white-color;
        position: relative;
        padding: @base-margin;
    }

    .post-date {
        position: absolute;
        top: -13px;
        left: -16px;
        background-color: var(--color-primary);
        border-radius: 4px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;

        span {
            color: @white-color;
            font-size: 1.6rem;
            font-weight: 500;
            line-height: 1.5;
            padding: 0 1rem;
        }
    }

    .excerpt-footer {
        padding-top: 1rem;

        .excerpt-author,
        .excerpt-category {
            float: left;
        }

        .excerpt-comments {
            float: right;
        }

        .excerpt-author {
            position: relative;
            display: inline-block;

            img {
                width: 3.6rem;
                height: 3.6rem;
                border-radius: 100%;
            }

            &:hover {
                .author-name {
                    bottom: 4.4rem;
                    opacity: 1;
                }
            }
        }

        .excerpt-category {
            display: inline-block;
            margin-left: 1rem;
            line-height: 2.2;

            a {
                font-weight: 500;
            }
        }

        .comments-count,
        .author-name {
            color: @white-color;
            background-color: @dark-color;
            font-size: .9rem;
            font-weight: 500;
            text-align: center;
            position: absolute;
            left: -111%;
            bottom: 4.8rem;
            padding: 0 .5rem;
            border-radius: .3rem;
            width: 75px;
            opacity: 0;
            transition: .1s all ease-in-out;

            &:after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -.5rem;
                width: 0;
                height: 0;
                border-top: solid .5rem @dark-color;
                border-left: solid .5rem transparent;
                border-right: solid .5rem transparent;
            }
        }

        .author-name {
            left: -55%;
        }

        .comments-count {
            bottom: 4.2rem;
        }

        .excerpt-comments {
            position: relative;
            text-align: end;
            display: inline-block;
            flex-shrink: 0;
            flex-grow: 1;

            &:hover {
                .comments-count {
                    bottom: 3.8rem;
                    opacity: 1;
                }
            }

            &:after {
                content: "\f086";
                font-family: Fontawesome;
                font-size: @font-size*1.5;
            }
        }

        .fa {
            color: @white-color;
            background-color: @dark-color;
            padding: .5rem;
            border-radius: 100%;
        }
    }
}

.post-single {
    padding: @base-margin;
}

.link-pages {
    float: right;
}

.display-meta {
    padding-top: @font-size;
}

.display-category,
.display-tag {
    display: inline-block;
}

.display-tag {
    float: right;
}

.author-info {
    .entry-author-label {
        color: #999;
        font-size: @font-size/1.1;
    }

    img {
        border-radius: 50%;
    }

    .author-details {
        margin-left: @font-size;
    }
}

/**
 * --------------------------------------------------------------------------------
 * Pagination
 * --------------------------------------------------------------------------------
*/


.pagination {
    padding: @line-height 0;

    .nav-links {
        text-align: center;
    }

    .page-numbers {
        padding: .6rem;
    }

    .page-numbers.next::after {
        content: '\f178';
        right: 0;
    }

    .page-numbers.prev::before {
        content: '\f177';
        left: 0;
    }

    .prev,
    .next {
        position: relative;
    }

    .prev {
        padding-left: 3.3rem;

        &:hover::before {
            left: -1rem;
        }
    }

    .next {
        padding-right: 3.3rem;

        &:hover::after {
            right: -1rem;
        }
    }

    .page-numbers.prev::before,
    .page-numbers.next::after {
        font-size: 2rem;
        font-weight: 300;
        font-family: Fontawesome;
        line-height: .65;
        position: absolute;
        top: .8rem;
        width: 32px;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .screen-reader-text {
        display: none;
    }
}

.featured-single-image {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        border: 2px solid #fff;
        right: 4px;
        bottom: 4px;
    }

    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

.single-post-content {
    box-shadow: 0 14px 28px -4px rgba(14, 17, 20, 0.1);
}

.fs-top {
    border-top: 2px solid var(--color-primary);
}

.single-post-content,
.single-page-content {
    position: relative;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
        margin-bottom: 2.5rem;
    }

    ul {
        li {
            list-style-type: none;
            padding-left: 3rem;
            position: relative;
            margin-bottom: 1.2rem;

            &::before {
                content: '\f111';
                font: normal normal normal 14px/1 FontAwesome;
                font-size: 14px;
                text-rendering: auto;
                -moz-osx-font-smoothing: grayscale;

                color: #ccc;

                position: absolute;
                top: 6px;
                left: 8px;
                line-height: 1;
            }
        }
    }

    ol {
        counter-reset: counter;

        li {
            list-style-type: none;
            counter-increment: counter;
            margin-bottom: 2.5rem;
            padding-left: 5.5rem;
            position: relative;

            &::before {
                content: counter(counter);
                position: absolute;
                top: -0.5rem;
                left: 0;
                width: 30px;
                height: 30px;
                counter-increment: list-number;
                border: 2px solid #e5e5e5;
                border-radius: 30px;
                text-align: center;
                line-height: 30px;
                font-weight: bold;
                font-size: 1.5rem;
            }
        }
    }

    .post-date {
        background-color: var(--color-primary);
        position: absolute;
        top: -2.7rem;
        right: 0;
        border: 1rem solid var(--color-primary);
        outline: 2px solid @white-color;
        outline-offset: -1.2rem;
        padding: .4rem 1.2rem;

        span {
            color: @white-color;
            font-family: "Lora", serif;
            text-align: center;
        }
    }

    .post-date-2 {
        background: var(--color-primary);
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        margin-bottom: 15px;
        color: #fff;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        font-size: 14px;
    }

    .display-category {
        &:before {
            content: "\f07b";
            font-family: Fontawesome;
            font-size: @font-size*1.2;
            margin-right: .5rem;
        }
    }
}

.link-pages>.page-numbers {
    background-color: @white-color;
    color: var(--color-primary);
    padding: .6rem 1.5rem;
    border: 1px solid var(--color-primary);
    border-radius: .2rem;
    cursor: pointer;
    .shadow;
    transition: .2s all ease;
}

.entry-footer {
    background-color: @white-color;
    border-top: 2px solid var(--color-primary);
    margin-top: @base-margin;
    padding: @font-size;
    .shadow;
}

.pagination-single {
    margin-top: @font-size*2.5;

    .pagination-nav {
        font-size: @font-size*1.2;

        .previous-post-wrap {
            width: 50%;
            display: inline-block;

            .previous-post {
                font-size: @font-size/1.1;
                font-weight: 500;
            }
        }

        .next-post-wrap {
            width: 50%;
            text-align: right;
            float: right;

            .next-post {
                font-size: @font-size/1.1;
                font-weight: 500;
            }
        }
    }
}

/**
 * --------------------------------------------------------------------------------
 * Sidebar & Widgets
 * --------------------------------------------------------------------------------
*/

.widgetarea {
    margin-bottom: 2rem;

    li {
        list-style-type: none;
    }

    h3 {
        margin-bottom: .6rem;
    }

    img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    select {
        max-width: 100%;
    }
}

.widgetarea {
    ul {
        li {
            &:before {
                content: "\f0c1";
                font-family: Fontawesome;
                font-size: @font-size*1.2;
                margin-right: .6rem;
            }
        }
    }

    .wp-block-latest-comments__comment-link {
        line-height: 1.2;
    }
}

input[type="search"].search-field,
input[type="search"].wp-block-search__input {
    background: #ffffff;
    min-width: auto;
    display: table-cell;
    margin-bottom: 0;
    padding: 0 1rem;
    font-weight: 400;
    width: 100%;
    height: 4rem;
    border: 1px solid #ffffff;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-color: #309cf4;
    box-sizing: border-box;
}

.search-submit,
.wp-block-search__button {
    background-color: #ffffff;
    font-size: 1.5rem;
    margin: 0;
    padding: 0 1.5rem;
    width: 40%;
    height: 4rem;
    text-align: center;
    position: relative;
    border: 1px solid #ffffff;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-color: #309cf4;
    box-sizing: border-box;
}

#wp-calendar {
    table-layout: fixed;
    width: 100%;

    th,
    td {
        padding: 5px 0;
    }

    #next {
        text-align: right;
    }
}

/**
 * --------------------------------------------------------------------------------
 * Miscellaneous
 * --------------------------------------------------------------------------------
*/

.archive-title,
.search-title {
    padding-top: 5.2rem;
    padding-bottom: 0;

    h1 {
        margin-bottom: 0;
    }
}

.search-results {
    .grid-item.page {
        .excerpt-footer {
            display: none !important;
            /** Overrides vertical-align class display properties **/
        }
    }
}

.sticky {
    .post-wrap {
        border-bottom: 1px solid var(--color-primary);
    }
}

.says,
.edit-link .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.edit-link::before {
    content: '\f040';
    font-family: Fontawesome;
    font-size: 1.7rem;
    margin-right: .5rem;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    max-width: 33.33%;
    width: 100%;
}

iframe {
    max-width: 100%;
}

.post,
.page {
    blockquote {
        position: relative;
        margin: 3rem 4rem;
        padding: 3rem;
        border: 10px solid #f5f5f5;

        p {
            margin-bottom: 1.5rem;
            font-weight: bold;
            font-size: 2rem;
        }

        cite {
            font-style: normal;
            color: rgba(0, 0, 0, 0.3);
        }
    }
}

.entry-title {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

ol,
ul {

    ol,
    ul {
        margin-left: @base-margin;
    }
}

/* For devices smaller than 991.98px */
@media (max-width: 991.98px) {
    .widgetarea {
        margin-top: 2rem;
    }
}

/**
 * --------------------------------------------------------------------------------
 * Footer Section
 * --------------------------------------------------------------------------------
*/

.footer {
    width: 100%;
    border-top: 2px solid var(--color-primary);
    background-color: @white-color;

    .widget-title {
        font-size: @font-size*1.4;
        font-weight: 700;
    }

    .widgetarea {
        margin-bottom: 0;

        ul li {
            &::before {
                content: '';
            }
        }
    }

    ul {
        list-style-position: inside;

        li {
            list-style-type: none;
        }
    }

    a {
        color: @dark-color;

        &:hover {
            color: var(--color-primary);
        }
    }

    .fa {
        font-size: @font-size*1.5;
        margin-right: @font-size;
    }

    .mc4wp-form {
        margin-top: @font-size;
    }

    .footer-site-info {
        text-align: center;
        font-size: 1.4rem;
        border-top: 1px solid var(--color-primary);
        padding: 1rem 0;
    }
}


.input-newsletter {
    display: table;
    width: 100%;

    input {
        transition: border-bottom-color .2s ease;
    }

    >input {
        background: @white-color;
        min-width: auto;
        display: table-cell;
        padding: 0 1rem 1px;
        font-weight: 400;
        width: 100%;
        height: 4rem;
        border: 1px solid #ffffff;
        border-bottom-color: var(--color-primary);
        box-sizing: inherit;
    }

    .input-newsletter-button {
        width: auto;
        display: table-cell;

        >input {
            background-color: @white-color;
            font-size: 1.5rem;
            margin: 0;
            padding: 0 1.5rem;
            height: 4rem;
            text-align: center;
            position: relative;
            border: 1px solid #ffffff;
            border-bottom-color: var(--color-primary);
            box-sizing: inherit;
        }
    }

    &:hover {
        input {
            border-bottom: 1px solid #e3e5e6;
            ;
        }
    }
}

::-webkit-input-placeholder {
    font-size: 10px;
}

::-moz-placeholder {
    font-size: 10px;
}

:-ms-input-placeholder {
    font-size: 10px;
}

::placeholder {
    font-size: 10px;
}

.blog .post-excerpt h3 {
    margin-bottom: 10px;
}

#cancel-comment-reply-link {
    margin-left: 10px;
}

.status-sticky i {
    display: none;
}

// input,
// textarea {
//     outline: none;
// }

.sub-menu .menu-item {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.sub-menu .menu-item:last-child {
    border-bottom: unset;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -50px !important;
    left: 10px;

    background-color: @white-color;
    color: var(--color-primary);

    border: 2px solid var(--color-primary);
    border-radius: 3px;
    padding: 6px 10px;
    z-index: 9999999999;

    &:focus {
        top: 0 !important;
    }
}

.post-content a,
.comment-list .comment-content a,
.widget_text a,
blockquote a {
    text-decoration: underline;
}

// Extra
input[type="checkbox"] {
    height: 1.6rem;
    width: 16px;
}

.blog .post-excerpt h3 {
    line-height: 1.4;
}

#submit {
    margin-bottom: 1.6rem !important;
}

/**
 * --------------------------------------------------------------------------------
 * Topbar Section
 * --------------------------------------------------------------------------------
*/

.site-topbar {
    transition: visibility 0s 0.2s, opacity 0.2s linear, height 0.2s;
    background-color: var(--color-primary);

    .container {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .item-icon {
        font-size: 1.4rem;

        a {
            &:hover {
                color: #fff;
            }
        }

        .fa {
            margin-right: 5px;
        }
    }

    * {
        color: #fff;
    }

    .topbar-right-align {
        text-align: right;
        float: right;
    }
}

.has-topbar {
    padding: 0;
}

.has-topbar>.container {
    padding: 1rem 0;
}

.ct-phone-no,
.ct-email-addr {
    display: inline-block;
}

.ct-email-addr {
    margin-left: 10px;
}

/*--------------------------------------------------------------
	Social Menu
--------------------------------------------------------------*/
#menu-social-items a {
    color: @white-color;
}

.menu-social {
    z-index: 2;
    display: inline-block;
}

#menu-social,
#menu-social-items {
    margin-left: 0px;
    vertical-align: top;
}

#menu-social-items li {
    padding: 0;
    text-align: center;
    font-size: 0.8em;
    position: relative;
    list-style-type: none;
    display: inline-block;
    height: 3rem;
    margin-left: .6rem;
}

.menu-social li a:before {
    display: inline-block;
    padding: 0;
    vertical-align: top;
    font-family: 'FontAwesome';
    font-size: 1.4em;
    color: @white-color;
    -webkit-font-smoothing: antialiased;
}

.social-media-icons li:hover {
    background-color: #444;
}

.social-media-icons li:hover>a {
    color: #1ED3A4;
}

/* Menu uses Font Awesome icons */
.menu-social li a[href*="facebook.com"]::before {
    content: '\f09a';
}

.menu-social li a[href*="twitter.com"]::before {
    content: '\f099';
}

.menu-social li a[href*="github.com"]::before {
    content: '\f09b';
}

.menu-social li a[href*="linkedin.com"]::before {
    content: '\f0e1';
}

.menu-social li a[href*="wordpress.com"]::before,
.menu-social li a[href*="wordpress.org"]::before {
    content: '\f19a';
}

.menu-social li a[href*="tumblr.com"]::before {
    content: '\f173';
}

.menu-social li a[href*="plus.google.com"]::before {
    content: '\f0d5';
}

.menu-social li a[href*="dribbble.com"]::before {
    content: '\f17d';
}

.menu-social li a[href*="instagram.com"]::before {
    content: '\f16d';
}

.menu-social li a[href*="vimeo.com"]::before {
    content: '\f194';
}

.menu-social li a[href*="youtube.com"]::before {
    content: '\f167';
}

.menu-social li a[href*="pinterest.com"]::before {
    content: '\f0d2';
}

.menu-social li a[href*="flickr.com"]::before {
    content: '\f16e';
}

.menu-social li a[href*="bitbucket.com"]::before {
    content: '\f171';
}

.menu-social li a[href*="digg.com"]::before {
    content: '\f1a6';
}

.menu-social li a[href*="reddit.com"]::before {
    content: '\f1a1';
}

.menu-social li a[href*="codepen.io"]::before {
    content: '\f1cb';
}

.menu-social li a[href*="behance.com"]::before {
    content: '\f1b4';
}

.menu-social li a[href*="slideshare.net"]::before {
    content: '\f1e7';
}

.menu-social li a[href*="/feed"]::before {
    content: '\f413';
}

.menu-social li a[href*="subscribe"]::before {
    content: '\f410';
}

.menu-social li a span::before {
    width: 20px;
    height: 20px;
    color: #999;
    border-radius: 20px;
}

// Media Queries
@media (max-width: 991px) {
    .site-topbar {
        display: none;
    }
}