// main: style.scss
/*--------------------------------------------------------------
# Structure
--------------------------------------------------------------*/
.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 40px;
    clear: both;
    position: relative;
    @include media-breakpoint-down(md) {
        padding: 0 20px;
    }
}

.full-width, .page-template-full-width-page {
    .content-area {
        width: 100%;
        max-width: 100%;
    }
}

.content-area {
    float: none;
    width: 100%;
    @include rem('margin-bottom', 60px);
    @include media-breakpoint-up(md) {
        width: percentage( 720px / 1040px );
        float: left;
        max-width: 720px;
        margin-bottom: 0px;
    }
}

.sidebar {
    float: none;
    width: 100%;
    @include media-breakpoint-up(md) {
        width: percentage( 270px / 1040px );
        float: right;
    }
}
.left-layout {
    .content-area {
        @include media-breakpoint-up(md) {
            float: right;
        }
    }
    .sidebar {
        @include media-breakpoint-up(md) {
            float: left;
        }
    }
}

/* Site Topbar */
.site-topbar {
    height: 52px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.05);
    //border-bottom: 1px solid #f5f5f5;
    position: relative;
    z-index: 20;
    #site-navigation {
        float: left;
    }
    .container {
        @include media-breakpoint-down(md) {
            background: #fff;
        }
    }
    .topbar-search {
        line-height: 52px;
        border-right: 1px solid #F1F1F1;
        padding-right: 10px;
        position: absolute;
        right: 40px;
        @include media-breakpoint-down(md) {
            right: 20px;
        }
        input {
            margin: 0px;
            border: none;
            font-size: 11px;
            max-width: 120px;
            padding: 0;
        }
        .genericon {
            line-height: 52px;
            font-size: 21px;
        }
    }
}

/* Site Branding */
.site-branding {
    @include rem('padding', 50px 0px);
    text-align: center;
    position: relative;
    z-index: 1;
    .custom-logo-link {
        @include rem('margin-bottom', 30px);
        display: inline-block;
    }
    .site-title {
        margin-bottom: 0px;
        @include rem('font-size', 60px);
        @include media-breakpoint-down(md) {
            @include rem('font-size', 48px);
        }
        @include media-breakpoint-down(sm) {
            @include rem('font-size', 35px);
        }
        text-transform: uppercase;
        font-weight: 100;
        line-height: 1;
        color: #000;
        font-family: "Norwester",'Open Sans', Georgia, serif;
        letter-spacing: 1.5px;
        a {
            &:hover{
                text-decoration: none;
                color: inherit;
            }
        }
    }
    .site-description {
        @include rem('font-size', 11px);
        letter-spacing: 1.5px;
        margin: 10px 0 0 0px;
        text-transform: uppercase;
    }
}

/* Site Content */
.site-content {
    @include rem('padding', 50px 0px 80px);
    border-top: 1px solid $color__border;
}

.home.blog .site-content {
    border-top: none;
    //padding-top: 0;
}

.archive-header {
    @include rem('padding', 25px 0px);
    //background: $color__border;
    border-top: 1px solid $color__border;
    h1 {
        margin: 0px;
        @include rem('font-size', 17px);
        letter-spacing: 2px;
        text-transform: uppercase;
        font-family: $font__main;
        font-weight: normal;
    }
    .taxonomy-description {
        margin-bottom: 0px;
        margin-top: 8px;
        p {
            margin-bottom: 0px;
            color: $color__meta;
        }
    }
}

/* Site Footer */
.site-footer {
    @include rem('padding', 22px 0px);
    border-top: 1px solid $color__border;
    font-size: 12px;
    color: $color__meta;
    p {
        margin-bottom: 0px;
    }
    .site-info {
        float: left;
        @include media-breakpoint-down(sm) {
            float: none !important;
        }
    }
    .theme-info {
        float: right;
        @include media-breakpoint-down(sm) {
            float: none !important;
        }
    }
}


.site-featured-content {
    position: relative;
    .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
        display: none;
    }
    background: #fff;
    &.loading {
        .spinner {
            display: block;
        }
        .featured_posts {
            height: 250px;
            display: block;
            article {
                display: none;
            }
        }
        .featured_posts_slider {
            article {
                display: none;
                opacity: 0;
                &:first-child {
                    display: block;
                    opacity: 0;
                }
            }

        }
    }
}