.blog{
    .blog-highlight{
        border-top:4px solid $yellow;
        margin-bottom: 56px;
        .item{
            @include flexbox();
            
            img{
                max-width: 650px;
                width: 100%;
                height: 100%;
            }
            article{
                padding:30px;
                position: relative;
                width: 100%;
                .date{
                    font-size: 1.2rem;
                    color:$black-light;
                    display: block;
                    margin-bottom: 23px;
                    i{
                        color:$yellow;
                        font-size: 1.5rem;
                        margin-right: 5px;
                    }
                }
                h1{
                    font-size: 3.2rem;
                    color:$black;
                    font-weight: 500;
                }
                a{
                    position: absolute;
                    bottom:30px;
                    left: 30px;
                    font-size: 1.4rem;
                    color:$black;   
                    i{
                        @include transition();
                        color:$black;
                        margin-left: 20px;
                    }
                    &:hover{
                        color:$yellow;
                        i{
                            margin-left: 30px;
                        }
                    }
                }
            }
        }
        .owl-dots{
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
            text-align: center;
            padding: 10px 20px;
            background: $yellow;
            .owl-dot{
                display: inline-block;
                margin-right:10px;
                span{
                    display: block;
                    width:14px;
                    height: 14px;
                    border:2px solid $white;
                    border-radius: 50%;
                    @include transition();
                }
                &.active{
                    span{
                        background:$black;
                        border-color: $black;
                    }
                }
                &:last-child{
                    margin:0;
                }
            }
        }
    }
    .list-posts{
        h2{
            font-size: 3.6rem;
            color:$black;
            font-weight: 500;
            margin-bottom:40px;
        }
        .thumbnail{
            margin-bottom: 30px;
            .link{
                &:hover{
                    article{
                        .more{
                            background: $black;
                            i{
                                color: $yellow;
                            }
                        }
                    }
                }
            }
            figure{
                display: block;
                img{
                    display: block;
                    width: 100%;
                }
            }
            article{
                padding:20px 15px;
                position: relative;
                border:1px solid $gray;
                padding-bottom:100px;
                height: 257px;
                &:before{
                    content:'';
                    display: block;
                    width: calc(100% - 30px);
                    height: 4px;
                    background:$yellow;
                    position: absolute;
                    top:-2px;
                    left: 50%;
                    transform:translate(-50%, 0);
                }
                .date{
                    font-size: 1.2rem;
                    color:$black-light;
                    display: block;
                    margin-bottom: 23px;
                    i{
                        color:$yellow;
                        font-size: 1.5rem;
                        margin-right: 5px;
                    }
                }
                h3{
                    font-size: 2.4rem;
                    color:$black;
                    font-weight: 500;
                }
                .more{
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    bottom:0;
                    left: 15px;
                    font-size: 1.2rem;
                    color:$black;   
                    padding:12px;
                    border:1px solid $gray;
                    border-bottom:none;
                    @include flexbox();
                    @include align-items(center);
                    i{
                        @include transition();
                        color:$black;
                    }
                    &:hover{
                        background: $black;
                        i{
                            color:$yellow;
                        }
                    }
                }
            }
        }
    }
    .post-detail{
        @include flexbox();
        @include flex-wrap(wrap);
        max-width: 750px;
        width: 100%;
        margin:0 auto;
        .post-header{
            order: 0;
            width:100%;
            h1{
                font-size: 3.2rem;
                font-weight: 500;
                color: $black;
                margin-bottom:20px;
            }
            ul{
                @include flexbox();
                @include flex-wrap(nowrap);
                margin-bottom:30px;
                li{
                    text-transform: uppercase;
                    font-size: 1.2rem;
                    color:$black-light;
                    margin-right: 10%;
                    @include flexbox();
                    @include align-items(center);
                    letter-spacing: 2px;
                    i{
                        font-size: 1.8rem;
                        margin-right: 5px;
                        color:$yellow;
                    }
                }
            }
        }
        figure{
            order: 1;
            margin-bottom:30px;
        }
        article{
            order: 2;
            p{
                font-size: 1.6rem;
                margin-bottom: 30px;
                line-height: 1.8;
                color: #666666;
                font-family: 'Roboto', sans-serif;
            }
        }
        .share{
            @include flexbox();
            @include flex-wrap(wrap);
            @include justify-content(space-between);
            @include align-items(center);
            width: 100%;
            order: 3;
            margin: 20px 0;
            .title{
                @include flexbox();
                @include align-items(center);   
                padding-left: 20px;
                font-size: 1.8rem;
                color:$black;
                border-top:1px solid $gray;
                border-left:1px solid $gray;
                border-bottom:1px solid $gray;
                width: calc(100% - 300px);
                height: 70px;
            }
            .social-icons{
                @include flexbox();
                li{
                    a{
                        @include flexbox();
                        @include align-items(center);   
                        @include justify-content(center);
                        width:100px;
                        height: 70px;
                        color:$white;
                        font-size: 2.2rem;
                        &.facebook{
                            background:$blue;
                        }
                        &.gplus{
                            background:$red;
                        }
                        &.twitter{
                            background:$blue-light;
                        }
                    }
                }
            }
            .comments{
                width: 100%;
                margin-top: 40px;
                margin-bottom: 20px;
                p{
                    font-size: 2rem;
                    font-weight: 500;
                    color: $black;
                }
            }
        }
    }
    &.internal{
        .owl-dots{
            width: 100%;
            text-align: center;
            margin-top:20px;
            .owl-dot{
                display: inline-block;
                margin-right:10px;
                span{
                    display: block;
                    width:14px;
                    height: 14px;
                    border:2px solid $gray;
                    background: $gray;
                    border-radius: 50%;
                    @include transition();
                }
                &.active{
                    span{
                        background:$white;
                        border-color:$black;
                    }
                }
                &:last-child{
                    margin:0;
                }
            }
        }
    }
}

@include breakpoint(970px){
    .blog{
        .blog-highlight{
            margin-bottom: 0;
            .item{
                @include flex-wrap(wrap);
                img{
                    max-width: 100%;
                }
                article{
                    width: 100%;
                    padding:30px 0;
                    h1{
                        margin-bottom: 20px;
                    }
                    a{
                        position: relative;
                        left: 0;
                        bottom:0;
                    }
                }
            }
        }
    }
}

@include breakpoint(768px){
    .blog{
        .post-detail{
            .post-header{
                order: 1;
            }
            figure{
                order: 0;
            }
        }
    }
}

@include breakpoint(470px){
    .blog{
        .post-detail{
            .post-header{
                ul{
                    @include flex-wrap(wrap);
                    li{
                        width: 100%;
                        display: block;
                        margin-bottom: 10px;
                    }
                }
            }
            .share{
                .title{
                    width: 100%;
                    border-top:1px solid $gray;
                    border-left:1px solid $gray;
                    border-right:1px solid $gray;
                    border-bottom:none;
                    @include justify-content(center);   
                    padding-left: 0;
                }
                .social-icons{
                    width: 100%;
                    li{
                        width: 33.333%;
                        a{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}