@import 'components/00_mixins';
/* VARIABLES
   ========================================================================== */
//web page width
$row: 1170px;
// Defaul fonts
$regular: 'font_regular',  Helvetica, Arial, sans-serif;
//default italic font
$italic: 'font_italic', Helvetica, Arial, sans-serif;
//default bold font
$bold: 'font_bold', Helvetica, Arial, sans-serif;
/* COLOR
   ========================================================================== */
//main color
$a: #132228;
//second color
$b: #132228;
//mobile menu color
$menu: $a;
// color og link
$link: $a;
// buttons color
$btn: $b;
$border: #ccc;
$text: #333;
/* LOAD ORDER
   ========================================================================== */
// reset
@import 'components/01_reset';
// wordpress
@import 'components/10_wordpress';
// woocommerce
// @import 'components/11_woocommerce';
// global elements (buttons, etc..)
@import 'components/20_global';
// style for custom page
@import 'components/21_pages';
// style for js plugins
@import 'components/30_vendors';
//icon fonts
@import 'components/98_i';
// responsive
@import 'components/99_responsive';
/* FONT */
//custom icon fonts
@include declare-font('i', 'i', 400);
@include declare-font('fauna', 'faunaone-regular-webfont', 400);
@include declare-font('newbaskerville', 'newbaskervilleexpodc-webfont', 400);
@include declare-font('newbaskerville_bold', 'newbaskervillec-bold-webfont', 400);
.blog, .archive, .single{
    background: transparent url('../img/index.jpg') left top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.index_style{
    h1{
        font-family: 'newbaskerville';
        font-size: 60px;
        line-height: 100px;
        text-align: center;
        color: #fff;
    }
    .scroll_container{
        float: left;
    }
    .blogpost{
        position: relative;
        min-height: 300px;
        margin-bottom: 30px;
        padding: 20px;
        background: rgba(0, 0, 0, .7);
        *{
            color: #fff;
        }
        .excerpt{
            // float: left;
            padding-left: 275px;
        }
        .post_content{
            min-height: 207px;
        }
        .alignleft{
            position: absolute;
            top: 20px;
            left: 20px;
            padding-right: 25px;
        }
        .blogtitle{
            font-family: 'newbaskervilleexpodc';
            font-size: 24px;
            line-height: 28px;
            display: block;
            padding-bottom: 20px;
        }
        .more{
            font-family: 'fauna';
            font-size: 18px;
            line-height: 53px;
            display: block;
            width: 215px;
            height: 55px;
            text-align: center;
            border: 2px solid #fff;
            &:hover{
                color: #222;
                background: #fff;
            }
        }
    }
}
.social-likes{
    position: absolute;
    right: 20px;
    bottom: 20px;
    li{
        display: inline-block;
        // border:1px solid #fff;
        width: 26px;
        height: 26px;
        margin: 0 5px;
        list-style-type: none;
        cursor: pointer;
        @include transition(all, .2s, ease-in-out);
        &:hover{
            opacity: .8;
        }
    }
}
.social-likes__widget_facebook{
    background: transparent url('../img/fb.png') center no-repeat;
}
.social-likes__widget_twitter{
    background: transparent url('../img/tw.png') center no-repeat;
}
.social-likes__widget_plusone{
    background: transparent url('../img/g+.png') center no-repeat;
}
.search_box{
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, .7);
    input{
        font-family: 'newbaskervilleexpodc';
        font-size: 16px;
        height: 30px;
        color: #fff !important;
        border: none;
        border-bottom: 1px solid #22201f;
        // background: rgba(0, 0, 0, .7);
        background: transparent url('../img/search_img.png') 95% 2px no-repeat;
        @include placeholder{
            font-family: 'newbaskervilleexpodc';
            font-size: 16px;
            color: #4f5051;
        }
    }
}
.aside-col{
    padding-left: 15px;
}
.archive{
    .blog_title{
        display: none;
    }
}
.black_box{
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(0, 0, 0, .7);
    *{
        color: #fff;
    }
    li{
        list-style-type: none;
    }
    h3{
        font-family: 'newbaskervilleexpodc';
        font-size: 16px;
        line-height: 1;
        margin-bottom: 15px;
        padding-bottom: 10px;
        text-transform: uppercase;
        color: #fff;
        border-bottom: 1px solid #32302d;
    }
    a{
        font-size: 14px;
        padding-left: 5px;
        &:hover{
            color: #ccc;
        }
    }
    ul{
        >li{
            font-size: 0;
            padding-bottom: 5px;
        }
    }
}
.single{
    .scroll_container{
        float: left;
    }
    h1{
        font-family: 'newbaskerville';
        font-size: 35px;
        line-height: 1.2;
        padding-top: 20px;
        padding-bottom: 30px;
        text-align: left!important;
        color: #fff;
    }
    .wysiwyg{
        img{
            margin: 0 auto 20px;
        }
    }
    .wp-image-342 {
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 990px){
    .blog, .archive, .single{
        .scroll_container{
            float: none;
            width: 100%;
            height: auto !important;
            margin-right: 0;
        }
        .aside-col{
            float: none;
            width: 100%;
            max-width: 400px;
            margin: 0 auto!important;
            padding-left: 0;
        }
    }
}
@media screen and (max-width: 720px){
    .index_style .blogpost .post_content{
        min-height: 2px;
    }
    .index_style h1{
        font-size: 30px;
        line-height: 1.2;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .more{
        width: 130px !important;
        margin-top: 20px;
    }
    .index_style .blogpost .alignleft{
        position: relative;
        top: 0;
        left: 0;
        float: none;
        // margin-bottom: 10px;
        margin: 0 auto 10px !important;
        padding-right: 0;
        text-align: center;
        a{
            display: block;
            width: 100%;
            text-align: center;
            img{
                margin: 0 auto;
            }
        }
    }
    .index_style .blogpost .excerpt{
        padding-left: 0;
    }
}

.index_style{
    .excerpt{
        .social_link{
            position: absolute;
            right: 10px;
            bottom: 20px;
        }
    }
}