/***   CSS FOR WIDGETS THEME PRO   **/


/*---------------------------	wgt-grid-list --------------------------------*/

.wgt-grid-list { 
    padding-top: 15px; 
    border-top: 1px solid var(--color-border);
}
.dark .wgt-grid-list { 
    border-top: 1px solid var(--dark-border);
}
.wgt-grid-list h2 {
	padding: 0 10px 15px 10px;
	color:var(--color-hd);
	font-weight: normal;
}
.dark .wgt-grid-list h2 {
    color: var(--dark-hd);
}
.wgt-grid-list .grid-list-1 h2 {border: 0;}
.wgt-grid-list .grid-list-1 h2.title-blank {
    display: none;
}
.wgt-grid-list .grid-list-2 h2 {
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}
.dark .wgt-grid-list .grid-list-2 h2 {
    border-top: 1px solid var(--dark-border);
}
.wgt-grid-list .grid-list-2 h2.title-blank {
    display: none;
}
.wgt-grid-list .grid-list-3 h2 {
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}
.dark .wgt-grid-list .grid-list-3 h2 {
    border-top: 1px solid var(--dark-border);
}
.wgt-grid-list .grid-list-3 h2.title-blank {
    display: none;
}

.wgt-grid-list .posts-grid-one {
	margin: 0 10px 20px 10px; 
}
.posts-grid-one .post-grid-list-one{
    border: 0;
    margin-bottom: 20px;
}
.post-grid-list-one .img {
    height: 180px;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 5px ;
    margin-bottom: 8px;
}
.dark .post-grid-list-one .img {
    border: 1px solid var(--dark-border);
}
.post-grid-list-one .img img {
	width: 100%;
	height: auto;
    min-height: 180px;
}
.post-grid-list-one .tl {
	margin-bottom: 10px;
    font-size: 1.2em;
}
.post-grid-list-one .tl a{
	color: var(--color-text);	
    text-decoration: none;
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.dark .post-grid-list-one .tl a{
    color: var(--dark-text);
    text-decoration: none;
}
.post-grid-list-one .tl a:hover{
    color: var(--color-hover);
}
.dark .post-grid-list-one .tl a:hover{
    color: var(--dark-hover)
}
.post-grid-list-one .user-date {
	font-size: var(--small-size);
	color: var(--color-small);
}
.dark .post-grid-list-one .user-date {
    color: var(--dark-small);
}
.post-grid-list-one .user-date span::after{
    content: "\2022";
    padding-left:5px;
}
.post-grid-list-one .user-date span:last-child::after{
    content: "";
}

.posts-grid-one .post-grid-list-one2 {
	margin-bottom: 20px;
	position: relative;
}
.posts-grid-one .post-grid-list-one2::after {
    content: "";
    clear: both;
    display: table;
}
.post-grid-list-one2 img {
	width: 100px; 
	height: auto;
	border-radius: 5px;
	float: left;
	margin-right: 10px;
	border: 1px solid var(--color-border);
}
.dark .post-grid-list-one2 img {
	border: 1px solid var(--dark-border);
}
.post-grid-list-one2 .tl {
	padding-top: 0;
    margin-bottom: 15px;
}
.post-grid-list-one2 .tl a {
	color: var(--color-text);
    text-decoration: none;
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.dark .post-grid-list-one2 .tl a {
	color: var(--dark-text);
    text-decoration: none;
}
.post-grid-list-one2 .tl a:hover {
    color: var(--color-hover);
}
.dark .post-grid-list-one2 .tl a:hover {
    color: var(--dark-hover);
}
.post-grid-list-one2 .user-date {
	color: var(--color-small);
	font-size: var(--small-size);
	/* position: absolute; */
	/* bottom: 0; */
	margin-left: 110px;
}
.dark .post-grid-list-one2 .user-date {
	color: var(--dark-small);
}
.post-grid-list-one2 .user-date span::after{
    content: "\2022";
    padding-left:5px;
}
.post-grid-list-one2 .user-date span:last-child::after{
    content: "";
}

.wgt-grid-list .posts-grid-three {
	margin: 0 10px 20px 10px;
}
.posts-grid-three .post-grid-list-three {
	margin-bottom: 20px;
	position: relative;
}
.posts-grid-three .post-grid-list-three::after {
    content: "";
    clear: both;
    display: table;
}
.post-grid-list-three img {
	width: 100px; 
	height: auto;
	border-radius: 5px;
	float: left;
	margin-right: 10px;
	border: 1px solid var(--color-border);
}
.dark .post-grid-list-three img {
	border: 1px solid var(--dark-border);
}
.post-grid-list-three .tl {
	padding-top: 0;
    margin-bottom: 15px;
}
.post-grid-list-three .tl a {
	color: var(--color-text);
    text-decoration: none;
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.dark .post-grid-list-three .tl a {
	color: var(--dark-text);
    text-decoration: none;
}
.post-grid-list-three .tl a:hover {
    color: var(--color-hover);
}
.dark .post-grid-list-three .tl a:hover {
    color: var(--dark-hover);
}
.post-grid-list-three .user-date {
	color: var(--color-small);
	font-size: var(--small-size);
	/* position: absolute; */
	/* bottom: 0; */
	margin-left: 110px;
}
.dark .post-grid-list-three .user-date {
	color: var(--dark-small);
}
.post-grid-list-three .user-date span::after{
    content: "\2022";
    padding-left:5px;
}
.post-grid-list-three .user-date span:last-child::after{
    content: "";
}

.wgt-grid-list .posts-grid-five {
	margin: 0 10px 20px 10px;
}
.posts-grid-five .post-grid-list-five { 
    margin-bottom: 20px;
    position: relative;
}
.posts-grid-five .post-grid-list-five::after {
    content: "";
    clear: both;
    display: table;
}
.post-grid-list-five img {
	width: 100px; 
	height: auto;
	border-radius: 5px;
	float: left;
	margin-right: 10px;
	border: 1px solid var(--color-border);
}
.dark .post-grid-list-five img {
    border: 1px solid #333;
}
.post-grid-list-five .tl {
    border: 0;
    margin-bottom: 15px;
}
.post-grid-list-five .tl a {
	color: var(--color-text);	
    text-decoration: none;    
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.dark .post-grid-list-five .tl a {
    color: var(--dark-text);
    text-decoration: none;

}
.post-grid-list-five .tl a:hover {
	color: var(--color-hover);
}
.dark .post-grid-list-five .tl a:hover {
	color: var(--dark-hover);
}
.post-grid-list-five .user-date {
	color: var(--color-small);
	font-size: var(--small-size);
	/* position: absolute; */
	/* bottom: 3px; */
	margin-left: 110px;
}
.dark .post-grid-list-five .user-date {
	color: var(--dark-small);
}
.post-grid-list-five .user-date span::after{
    content: "\2022";
    padding-left:5px;
}
.post-grid-list-five .user-date span:last-child::after{
    content: "";
}

.wgt-grid-list .grid-list-banner {border: 0;}
.grid-list-banner h2 {
    display: none;
}
.grid-list-banner .post-grid-list-banner {
    background-color: var(--color-bg-3);    
}
.dark .grid-list-banner .post-grid-list-banner {
    background-color: var(--dark-bg-3);    
}
.grid-list-banner .post-grid-list-banner .banner-image {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content:center;
    text-align: center;
}
.grid-list-banner .post-grid-list-banner img {
    width: 100%;
}
.grid-list-banner .post-grid-list-banner .banner-label {
    opacity: 0.6;
    text-align: right;
    padding: 2px 10px;
    font-size: 0.6em;
    line-height: 1;
}
.grid-list-banner .post-grid-list-banner .banner-label .icon{
    border-radius: 50%;
    border: 1px solid var(--color-link);
    display: inline-block;
    padding: 0 3px;
    color: var(--color-link);
}
.grid-list-banner .post-grid-list-banner.none {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content:center;
}
.grid-list-banner .post-grid-list-banner.none .banner-label {
    opacity: 0.5;
    font-size: var(--small-size);
}


/*--------------------------	wgt-grid-thumb -------------------------------*/

.wgt-grid-thumb {
    background-image: linear-gradient(to right, var(--top-bg), var(--top-bg-2));
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
}
.dark .wgt-grid-thumb {
    background-image: linear-gradient(to right, var(--dark-bg-2), var(--dark-bg));
    border-top: 1px solid var(--dark-border);
}
.wgt-grid-thumb .grid-thumb {
    overflow-x: scroll;
}
.wgt-grid-thumb .grid-thumb .block{
    width: 100%;
}
.wgt-grid-thumb .row {
    padding: 0 5px;
}
.wgt-grid-thumb [class*="col-xs-"] {
    padding: 0 5px;
}

.wgt-grid-thumb h2{
    font-weight: normal;
    color: var(--top-hd);
    padding:0 10px 10px 10px;
}
.dark .wgt-grid-thumb h2{
    color: var(--dark-text);
}
.wgt-grid-thumb .post-grid-thumb {
    margin-bottom: 20px;
    height: 200px;
    position: relative;
}
.post-grid-thumb .img {
    border: 1px solid var(--top-link);
    border-radius: 5px;
    width: 100%;
    height: 100px;
    overflow: hidden;
    margin-bottom: 10px;
}
.dark .post-grid-thumb .img {
    border: 1px solid var(--dark-border);
}
.post-grid-thumb .img img {
    width: 100%;
    min-height: 100px;
    height: auto;
}
.post-grid-thumb .tl {
    margin-bottom: 10px;
}
.post-grid-thumb .tl a{    
    color: var(--top-link);
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
}
.dark .post-grid-thumb .tl a{    
    color: var(--dark-text);
}

.post-grid-thumb .tl a:hover{
    color: var(--top-hover);
    text-decoration: none;
}
.dark-theme .wgt-grid-thumb .post-grid-thumb .tl a:hover{
    color: var(--dark-hover);
    text-decoration: none;
}

.post-grid-thumb .cat-date {
    font-size: var(--small-size);
    line-height: var(--small-height);
    bottom: 0;
    color: var(--top-text);
    position: absolute;

    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.dark .post-grid-thumb .cat-date {
    color: var(--dark-small);
}
.post-grid-thumb .cat-date span::after{
    content: "\2022";
    padding: 0 3px 0 8px;
}
.post-grid-thumb .cat-date span:last-child::after{
    content: "";
}

.post-grid-thumb .cat-date a {
    color: var(--top-hover);
    display: none;
}
.post-grid-thumb .cat-date a:first-child {
    display: inline-block;
}
.dark .post-grid-thumb .cat-date a{
    color: var(--dark-link);
}


@media screen and (min-width: 768px) {  /*768 or 992 or 1280 */

    .wgt-grid-list { border-radius: 0;}
    .wgt-grid-list .row {
        padding: 0;
        margin: 0 -10px;
    }
    .wgt-grid-list h2 {
        padding: 0 0 10px 0;
    }
    .wgt-grid-list .grid-list-1 h2 {border: 0;}
    .wgt-grid-list .grid-list-1 h2.title-blank {
        display: block;
    }
    .wgt-grid-list .grid-list-2 h2 {
        padding-top: 0;
        border: 0;
    }
    .wgt-grid-list .grid-list-2 h2.title-blank {
        display: block;
    }
    .wgt-grid-list .grid-list-3 h2 {
        padding-top: 0;
        border: 0;
    }
    .wgt-grid-list .grid-list-3 h2.title-blank {
        display: block;
    }

    .wgt-grid-list .posts-grid-one {
        margin: 0; 
    }
    .posts-grid-one .post-grid-list-one{
        margin-bottom: 15px;
    }
    .post-grid-list-one .img {
        height: 200px;
    }
    .post-grid-list-one .img img {
        width: 100%;
        height: auto;
        min-height: 200px;
    }
    .post-grid-list-one .tl{
        font-size: 1.4em;
    }
    .post-grid-list-one .tl a{    
        overflow: hidden; 
        display: -webkit-box; 
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
    }

	.post-grid-list-one2 img {
        width: 90px; 
        height: auto;
    }
    .post-grid-list-one2 .tl {
        margin-bottom: 10px;
    }
    .post-grid-list-one2 .user-date{
        margin-left: 100px;
    }

    .wgt-grid-list .posts-grid-three{
        margin: 0; 
        margin-bottom: 20px;
    }
	.post-grid-list-three img {
        width: 90px; 
        height: auto;
    }
    .post-grid-list-three .tl {
        margin-bottom: 10px;
    }
    .post-grid-list-three .user-date{
        margin-left: 100px;
    }

    .wgt-grid-list .posts-grid-five{
        margin: 0; 
        margin-bottom: 20px;
    }
    .posts-grid-five .post-grid-list-five {
        margin-bottom: 5px;
    }
    .post-grid-list-five img {
        width: 52px;
    }
    .post-grid-list-five .tl a {  
        overflow: hidden; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
    .post-grid-list-five .user-date{
        font-size: var(--small-size);
        margin-left: 62px;
        display: none;
    }

    .wgt-grid-list .grid-list-none {
        display: none;
    }

    .grid-list-banner h2 {
        display: block;
    }


    /*--------------------------	wgt-grid-thumb ------------------------*/

    .wgt-grid-thumb {
        border-radius: 5px;
        padding: 15px 0 0 0;
    }
    .dark .wgt-grid-thumb {
        border: 1px solid var(--dark-border);
    }
    .wgt-grid-thumb h2 {
        padding: 0 20px 10px 20px;
    }
    .wgt-grid-thumb .grid-thumb {
        margin: 0 20px;
    }    
    .wgt-grid-thumb .grid-thumb .block{
        width: 135%; 
    }
    .wgt-grid-thumb .row {
        padding: 0;
    }
    .wgt-grid-thumb [class*="col-sm-"] {
        padding: 0 10px;
    }
    .wgt-grid-thumb [class*="col-sm-"]:first-child {
        padding-left: 0;
    }
    .wgt-grid-thumb [class*="col-sm-"]:last-child {
        padding-right: 0;
    }
    
    .wgt-grid-thumb .post-grid-thumb {
        height: 210px;
    }
    .post-grid-thumb .img {
        height: 120px;
    }
    .post-grid-thumb .img img {
        min-height: 120px;
    }


}    


@media screen and (min-width: 992px) {  /*768 or 992 or 1280 */

    /*--------------------------	wgt-grid-thumb ------------------------*/
    .wgt-grid-list { 
        padding-top: 15px; 
    }
    /* .wgt-grid-list .grid-list-1 h2 {border: 0;} */
    /* .wgt-grid-list .grid-list-2 h2 {padding-bottom: 5px;} */
    /* .wgt-grid-list .grid-list-3 h2 {padding-bottom: 5px;} */

    .wgt-grid-list .grid-list-none {
        display: inline-block;
    }
    .posts-grid-one .post-grid-list-one{
        margin-bottom: 20px;
    }
    .post-grid-list-one .img {
        height: 200px;
    }
    .post-grid-list-one .img img {
        width: 100%;
        height: auto;
        min-height: 200px;
    }
    .post-grid-list-one .tl{
        margin-bottom: 10px;
    }
    .post-grid-list-one .tl a{    
        overflow: hidden; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }

    .post-grid-list-one2 img {
        width: 80px; 
        height: auto;
    }  
    .post-grid-list-one2 .user-date{
        margin-left: 90px;
    }

    .post-grid-list-three img {
        width: 80px; 
        height: auto;
    }
    .post-grid-list-three .user-date{
        margin-left: 90px;
    }
    
    .wgt-grid-thumb .grid-thumb {
        overflow-x: hidden;
    }
    .wgt-grid-thumb .grid-thumb .block{
        width: 100%;
    }

}