.gyan-button { transition: all 0.3s ease-in-out; } .gyan-button:active, .gyan-button:focus, .gyan-button { border: 0; outline: none; cursor: pointer; } .gyan-post-grid-content { padding: 41px 45px 33px 45px; } .gyan-post-grid-date { text-transform: uppercase; font-weight: 700; margin-right: 40px; } .gyan-post-list-excerpt { margin-bottom: 23px; } .gyan-post-grid-c-button { float: right; width: 26px; height: 26px; border-radius: 100%; position: relative; display: block; } .gyan-post-grid-c-button span:before, .gyan-post-grid-c-button span:after { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 2px; display: block; margin-top: 12px; margin-left: 9px; } .gyan-post-grid-format { display: block; position: relative; overflow: hidden; } .gyan-post-grid-c-button span:after { height: 8px; width: 2px; margin-left: 12px; margin-top: 9px; } .gyan-post-grid-c-button a { width: 100%; height: 100%; display: block; } .gyan-post-grid-meta { width: 100%; height: 110px; display: table; padding-bottom: 9px; background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); position: absolute; bottom: 0; left: 0; opacity: 0; z-index: 1; } .gyan-post-grid-meta ul { display: table-cell; text-align: center; vertical-align: bottom; } .gyan-post-grid-meta ul li { list-style: none; display: inline; font-size: 85%; font-weight: 700; margin: 5px 10px; padding: 0; } .gyan-post-grid-meta ul li span i, .gyan-post-grid-meta ul li a i { margin-right: 5px; } .swm-site-content .gyan-post-grid-meta ul li, .swm-site-content .gyan-post-grid-meta ul li a, .swm-site-content .gyan-post-grid-meta ul li a:hover { color: #fff; } .gyan-post-grid-category-item { position: relative; } .gyan-post-grid-category-item, a.gyan-post-grid-image:before { position: relative; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } .gyan-post-grid-item:hover .gyan-post-grid-meta { opacity: 1; } .gyan-post-grid-item-holder { border-radius: 5px; display: block; overflow: hidden; } .gyan-post-grid-category { margin-bottom: 15px; margin-top: -5px; } .gyan-post-image { position: relative; } .gyan-post-grid-s2 .gyan-post-image, .gyan-post-grid-s2 .gyan-post-content-block { width: 50%; height: 100%; display: table-cell; vertical-align: text-top; } .gyan-post-grid-s2 .gyan-post-grid-content { padding: 40px 33px 33px 33px; } .gyan-post-grid-s2 .gyan-post-grid-item-holder { display: table; } .gyan-post-grid-s2 .gyan-post-grid-content, .gyan-post-grid-s2 .gyan-post-grid-format { float: left; } .gyan-post-grid-s2 .gyan-post-grid-format { display: none; } .gyan-post-grid-pf-bg { display: none; } .gyan-post-grid-s2 .gyan-post-grid-pf-bg { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-size: cover; background-repeat: no-repeat; background-position: center center; } @media only screen and (max-width: 767px) { .gyan-post-grid-s2 .gyan-post-image, .gyan-post-grid-s2 .gyan-post-content-block { width: auto; height: auto; display: block; } .gyan-post-grid-s2 .gyan-post-grid-format { display: block; } .gyan-post-grid-s2 .gyan-post-grid-pf-bg, .gyan-post-grid-s2 .gyan-post-image > .gyan-post-grid-meta { display: none; } .gyan-post-grid-s2 .gyan-post-grid-content, .gyan-post-grid-s2 .gyan-post-grid-format { float: none; } } .gyan-grid-metas-item { list-style: none; padding: 0; margin: 0 20px 5px 0; font-weight: 400; display: inline-block; font-size: 14px; position: relative; } .gyan-grid-metas-item i { font-weight: 400; margin-right: 7px; } .gyan-grid-metas-item i.fa-heart:not(.fas-regular) { font-weight: 700; } .gyan-grid-metas-item .gyan-postmetas-icon, .gyan-post-grid-metas:not(.gyan-post-grid-separator-icon) .gyan-grid-metas-item .gyan-love.loved > i { display: none; } .gyan-post-grid-separator-icon .gyan-grid-metas-item .gyan-postmetas-icon, .gyan-post-grid-separator-icon .gyan-grid-metas-item .gyan-love { display: inline-block; } span.gyan-love { cursor: pointer; } .gyan-post-grid-meta-separator { width: 22px; text-align: center; display: inline-block; position: relative; } .gyan-post-grid-separator-vline .gyan-post-grid-meta-separator:before { content: '|'; } .gyan-post-grid-separator-slash .gyan-post-grid-meta-separator:before { content: '/'; } .gyan-post-grid-separator-dash .gyan-post-grid-meta-separator:before { content: '-'; } .gyan-grid-metas-item { margin: 0; } .gyan-post-grid-metas .gyan-grid-metas-item:last-child .gyan-post-grid-meta-separator { display: none; } .gyan-post-grid-metas.gyan-post-grid-separator-none .gyan-grid-metas-item:last-child, .gyan-post-grid-metas.gyan-post-grid-separator-icon .gyan-grid-metas-item:last-child { margin-right: 0; } .gyan-post-grid-separator-none .gyan-grid-metas-item, .gyan-post-grid-separator-icon .gyan-grid-metas-item { margin: 0 20px 5px 0; } .gyan-post-grid-category-item { list-style: none; padding: 0; margin: 0 20px 5px 0; display: inline-block; } .gyan-post-grid-category-before-metas { margin-right: 10px; } .gyan-post-grid-button-icon.gyan-icon i { line-height: 1em; } a.gyan-post-grid-button { align-items: center; justify-content: center; } a.gyan-post-grid-button i, a.gyan-post-grid-button svg { float: left; } .gyan-post-grid-button-wrap { display: block; margin: 0 0 45px 45px; } .gyan-post-grid-button-holder { display: inline-block; } .gyan-post-grid-button-justify .gyan-post-grid-button-holder { display: block; width: 100%; } .gyan-post-grid-format { position: relative; display: block; } .gyan-post-grid-img-cat { position: absolute; display: inline-block; } .gyan-post-grid-category { display: inline-block; } .gyan-post-grid-img-cat.gyan-position-top-center, .gyan-post-grid-img-cat.gyan-position-center-center, .gyan-post-grid-img-cat.gyan-position-bottom-center { text-align: center; } .gyan-post-grid-img-cat.gyan-position-top-right, .gyan-post-grid-img-cat.gyan-position-center-right, .gyan-post-grid-img-cat.gyan-position-bottom-right { text-align: right; } .gyan-post-content-block { position: relative; display: block; z-index: 1; overflow: hidden; transition: .3s; } a.gyan-post-grid-image { position: relative; display: block; overflow: hidden; } a.gyan-post-grid-image:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; } a.gyan-post-grid-image:hover:before { opacity: 1; visibility: visible; } .gyan-post-grid-image-effect-zoom { overflow: hidden; position: relative; display: block; } .gyan-post-grid-item:hover .gyan-post-grid-image-effect-zoom img { transform: scale(1.1); } .gyan-post-grid-item:hover .gyan-post-grid-image-effect-zoom-rotate img { transform: scale(1.1) rotate(2deg); }