/*

Project: BooSign | Responsive Bootstrap One Page HTML Template
Author : Alex Ashihmin

[Table of contents]

    1.  General
    2.  Carousel
    3.  Masonry (list of posts)
    4.  Sidebar
    5.  Post content
    6.  Comments

*/

/*------------------------------------*\

    1.  General

\*------------------------------------*/

#page-container
{
    padding-top: 70px;
}

.thumbnail
{
    border-radius: 0;
}

#back-to-top
{
    position:        fixed;
    bottom:          40px;
    right:           40px;
    z-index:         9999;
    width:           32px;
    height:          32px;
    text-align:      center;
    font-size:       24px;
    line-height:     30px;
    cursor:          pointer;
    border:          0;
    border-radius:   2px;
    text-decoration: none;
    transition:      opacity 0.2s ease-out;
    opacity:         0;
    transition:      all .3s;
}

#back-to-top:hover
{
    transform: scale(1.5);
}

#back-to-top.show
{
    opacity: 1;
}

/*------------------------------------*\

    2.  Carousel

\*------------------------------------*/

.carousel-fade .carousel-inner .item
{
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
{
    opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right
{
    opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right
{
    left:      0;
    transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control
{
    z-index: 2;
}
.carousel-caption h2
{
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 50px;
}
.carousel .item .img
{
    width:           100%;
    height:          400px;

    background:      url('https://priem.dtg-svishtov.com/assets/img/bg.jpg') center no-repeat;
    background-size: cover;
}

.carousel .item .img:before
{
    position:   absolute;
    top:        0;
    left:       0;
    display:    block;
    content:    '';
    width:      100%;
    height:     100%;
    background: rgba(0, 0, 0, 0.6);
}

.carousel a
{
    text-decoration: none;
    text-shadow:     none;
}

.carousel .carousel-caption *
{
    color: #fff;
}

.masonry-container .thumbnail
{
    position: relative;
}

/*------------------------------------*\

    3.  Masonry (list of posts)

\*------------------------------------*/

.masonry-container .thumbnail:hover,
.masonry-container .thumbnail:focus
{
    text-decoration: none;
}

.masonry-container .thumbnail:before
{
    position:   absolute;
    top:        0;
    left:       0;
    content:    '';
    display:    block;
    width:      100%;
    height:     100%;
    opacity:    0;
    transition: opacity .3s linear;
}

.masonry-container .thumbnail:after
{
    position:                absolute;
    top:                     50%;
    left:                    50%;
    margin:                  -20px 0 0 -20px;
    content:                 "\e003";
    display:                 inline-block;
    font-family:             'Glyphicons Halflings', sans-serif;
    font-size:               40px;
    font-style:              normal;
    font-weight:             400;
    line-height:             1;
    color:                   #fff;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity:                 0;
    transition:              opacity .3s linear;

}

.masonry-container .thumbnail:hover:before,
.masonry-container .thumbnail:focus:before,
.masonry-container .thumbnail:hover:after,
.masonry-container .thumbnail:focus:after
{
    opacity: 1;
}

.masonry-container .thumbnail h3
{
    margin-bottom: 10px;
}

.date-rating
{
    font-size:     14px;
    margin-bottom: 10px;
}

.date-rating span
{
    float: right;
}

.date-rating span i
{
    font-size:      16px;
    vertical-align: sub;
}

hr
{
    border-top: 1px solid #ddd;
    margin:     19px 0;
}

/*------------------------------------*\

    4.  Sidebar

\*------------------------------------*/

.sidebar .input-group
{
    width: 100%;
}

.sidebar .btn-theme
{
    margin-top:    10px;
    border-radius: 0;
    font-size:     14px;
    padding:       10px 20px;
}

.sidebar .list-group a
{
    display: block;
}

.sidebar .list-group .badge
{
    float: right;
}

.sidebar .list-group-item:first-child,
.sidebar .list-group-item:last-child
{
    border-radius: 0;
}

.sidebar .social-list
{
    font-size:  24px;
    text-align: center;
}

.sidebar .label,
.post-footer .label
{
    display:       inline-block;
    font-size:     14px;
    font-weight:   400;
    color:         #ddd;
    margin:        2px;
    padding:       5px 15px;
    border:        1px solid #ddd;
    border-radius: 0;
}

.sidebar .label:hover,
.post-footer .label:hover
{
    color:           #fff;
    text-decoration: none;
}

.sidebar .sidebar-block:not(:last-child)
{
    margin-bottom: 40px;
}

/*------------------------------------*\

    5.  Post content

\*------------------------------------*/

.post-img
{
    width:           100%;
    height:          400px;
    background:      url('https://dummyimage.com/1920x1080/bbb/ddd') center no-repeat;
    background-size: cover;
}

.post-content > *
{
    margin-bottom: 30px;
}

.post-content .content-title
{
    margin-bottom: 0;
    text-indent:   0;
}

.post-content .category
{
    text-indent: 0;
}

.post-content .category a
{
    font-size: 14px;
}

.post-content .category:first-letter
{
    font-size:     14px;
    font-weight:   400;
    padding-right: 0;
}

.post-content blockquote
{
    font-size:   20px;
    line-height: 28px;
    font-style:  italic;
    font-weight: 300;
    margin:      30px;
}

.post-content blockquote span
{
    display:        block;
    margin-top:     15px;
    text-transform: uppercase;
}

.post-content, .post-content p
{
    font-size:   16px;
    line-height: 26px;
    text-indent: 20px;
}

.post-content p:first-letter
{
    font-size:     20px;
    font-weight:   700;
    padding-right: 1px;
}

.post-footer
{
    margin-bottom: 50px;
}

/*------------------------------------*\

    6.  Comments

\*------------------------------------*/

.comments-block
{
    margin-bottom: 50px;
}

.comments-block .media
{
    margin-top: 25px;
}

.comments-block .media-object
{
    width:  100px;
    height: 100px;
}

.comments-block .media-left
{
    padding-right: 20px;
}

.comments-block .media-heading span
{
    font-size:  12px;
    margin-top: 6px;
}

@media screen and (max-width: 539px)
{
    /*
    Comments
 */
    .comments-block .media-left
    {
        padding-right: 10px;
    }

    .comments-block .media-object
    {
        width:  50px;
        height: 50px;
    }

    .content
    {
        padding: 70px 0 75px;
    }
}

@media screen and (max-width: 459px)
{
    .carousel
    {
        display: none;
    }
}