:root{

    --primary-color: #611320;
    --secondary-color: #7e303d;
    --dark-grey: #c6c6c6;
    --light-grey: #d0d0d0;
    --white-color: #ffffff;
    --black-color: #000000;
}

* { box-sizing: border-box; }
a {text-decoration: none !important;}



.custom-blog .post-item { margin:50px 2%; width: 96%; }
.custom-blog .post-item.col-2 { margin: 2%; width: 45%; display: inline-block; vertical-align: top; }
/*.custom-blog .post-item:first-child { margin-top:0;}*/


.full-blog-post { position: relative;}
.full-blog-post  .full-post-img { position: relative;}
.full-blog-post  .full-post-img .full-post-title { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;    padding: 50px; background: rgba(0, 0, 0, .5);}
.full-post-date {
    color: #888888;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    width: 95%;
    position: relative;
    margin: -40px auto auto auto;
    padding-top:10px;
}
.col-2-post-date { color:#888888; font-size:14px;  } 


.full-post-date img {margin: 0px 9px -4px 0px;}
.pagination { padding: 10px;  text-align: center;}
.pagination button { background-color: var(--primary-color); color: var(--white-color); padding: 10px 20px; border: none; cursor: pointer; border-radius: 5px;}
.pagination button:hover { background-color: var(--secondary-color);}
.directory-list-wrap .search-form-wrapp { position: relative;}
.directory-list-wrap .search-form-wrapp .clear-btn { background: var(--light-grey); border-radius: 10px; cursor: pointer; width: 30px; height: 30px;  border: none; position: absolute; right: 10px; top: 15px;}
.directory-list-wrap .search-form-wrapp .clear-btn:hover { background-color: var(--primary-color); color: var(--white-color);}

.full-post-title h3, .col-2-blog-post h3 { font-weight: 600; }
.full-post-title h3 {color:#fff; font-size: clamp(1rem, 2vw, 2.5rem); text-align: center; text-transform: uppercase; position:relative;}
.full-post-title h3:before{ content: ""; position: absolute; width: 100px; height: 2px; background: #fff; display: block; bottom: -5px; left: 50%; margin-left: -50px;}
.col-2-blog-post h3 {color:#000; font-size: clamp(0.8rem, 1.5vw, 1rem)}
/* Loader */ 
.directory-list-wrap .loader-line { width: 100%; height: 5px; position: relative; overflow: hidden; background-color: #ddd; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
.directory-list-wrap .loader-line:before {  background-color: var(--primary-color);  content: ""; position: absolute; left: -50%; height: 100%; width: 40%; -webkit-animation: lineAnim 1s linear infinite; -moz-animation: lineAnim 1s linear infinite; animation: lineAnim 1s linear infinite; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}

@media only screen and (min-width: 600px) {
    .full-post-title h3{ line-height: 35px; }
    .col-2-blog-post h3 { line-height: 24px; }
}

@keyframes lineAnim {
    0% { left: -40%;}
    50% { left: 20%; width: 80%; }
    100% { left: 100%; width: 100%; }
}