.comment-form-comment {
display: grid;
}
.post-categories {
list-style: none;
padding: 5px 15px;
margin: 0px;
}
.post-categories li a{
text-decoration: none;
color: var(--color-white);
}
.blog-col {
position: relative;
}
.blog-col figure {
background-color: var(--color-white);
margin: 10px;
}
.blog-col img:hover{
opacity: .7;
-moz-transition: .4s;
-webkit-transition: .4s;
transition: all .4s;
}
.blog-col figure figcaption{
padding: 0 20px 10px;
}
.category {
background-color: var(--color-primary);
position: absolute;
z-index: 1;
}  .back-to-top {
position: fixed;
background: #00bb2d;
color: #fff;
display: inline-block;
text-align: center;
line-height: 1;
font-size: 16px;
border-radius: 50%;
right: 15px;
bottom: 15px;
-webkit-transition: .5s;
transition: .5s;
z-index: 101;
}  .modal, .modal2 {
display: none; position: fixed; z-index: 999; padding-top: 100px; left: 0;
top: 0;
width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); } .modal-content,.modal-content2 {
position: relative;
background-color: var(--bg-light);
margin: auto;
padding: 0;
border: 1px solid #888;
width: 90%;
max-width: 1000px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
} @-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
} .close, .close2 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus,
.close2:hover,
.close2:focus  {
color: var(--color-text);
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: var(--color-primary);
color: white;
}
.modal-body {
padding: 20px 16px 50px;
}
.modal-footer {
padding: 2px 16px;
background-color: #fff;
color: var(--color-text);
min-height: 50px;
}  .search-items img,
.post-thumbnail img {
width: 100%;
height: auto;
}