style.css

/*
Theme Name:Sierra
Theme URI: https://colorlib.com/sierra/
Author: the Colorlib
Author URI: https://colorlib.com/
Description: Sierra is a WordPress startup website template that gives your project a boost. If you are just about to launch a website but have not executed it yet, speed things up with an astonishing, professional and elegant predesigned template. Sierra has the assets of a premium template but does not cost you a single penny. It is just a click away, and you can begin using it.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sierra
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*----------------------------------------------
        Table of content
        1. Admin Bar
        2. embed,iframe,object,video
        3. screen readers
        4. sticky post
        5. Post Pagination
        6. table
        7. Search Widget
        8. Calender Widget
        9. Image Alignments and Captions
        10. Gallery
        11. Widget
        12. Comment Styles
        14. Post Content

------------------------------------------------*/

/*----------------*/
blockquote{
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eeeeee;
}
/*--------------- Admin Bar --------------*/

/* Make sure videos and embeds fit their containers. */
embed,
iframe,
object,
video {
    max-width: 100%;
}
/*************** sticky post **************/

.sticky {
    border: 1px solid #6999EB;
}
/*****************Post Pagination**********************/

/************* Table *************/
table {
    width: 100%;
    background: #fff;border-collapse: collapse;border-spacing:0;
    margin: 10px 0 20px;
}

table td,
table th {
    padding: 8px;
    border: 1px solid #e6e6e6;
    text-align: left;
    color:#333;
}

table th {
    background: #f9f9f9;
    font-weight: bold;
}

table caption {
    padding: 1em 0;
    text-align: center;
}

dt {
    font-weight: bold;
}

dd {
    line-height: 1.4;
    margin: 4px 0 15px;
    padding: 0 0 .5em 0;
}
/* ------------Image Alignments and Captions -------------- */

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 20px auto;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 20px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-post-image{
    margin-bottom: 30px;
    float: none;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}
.wp-caption {
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    max-width: 100%;
    padding: 10px;
    text-align: center;
}

.wp-caption-text {
    margin-top: 8px;
    font-size: small;
}

.wp-caption.alignnone {
    margin: 5px 0px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 100%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 12px;
    margin: 0;
    padding: 5px;
    color: #5d5d5d;
}
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}
/* ----------------------------------------
Gallery
---------------------------------------- */

.gallery {
    display:block;
    float:left;
    width:100%;
    clear: both;
    margin-bottom: 20px;
}
.gallery + h1,
.gallery + h2,
.gallery + h3,
.gallery + h4,
.gallery + h5,
.gallery + h6{
    clear: both;
}
.blog_post .gallery {
    padding:0 0 20px;
}
.gallery .gallery-item {
    display:block;
    margin: 0 auto 4px;
    position:relative;
    overflow:hidden;
    text-align: center;
}
.gallery .gallery-item .gallery-icon{
    display: inline-block;
}

.gallery-columns-2 .gallery-item {
    width: 50%;
    float: left;
}

.gallery-columns-3 .gallery-item{
    width: 33.333333%;
    float: left;
}

.gallery-columns-4 .gallery-item{
    width: 25%;
    float: left;
}
.gallery-columns-5 .gallery-item{
    width: 20%;
    float: left;
}
.gallery-columns-6 .gallery-item{
    width: 16.666666%;
    float: left;
}
.gallery-columns-7 .gallery-item{
    width: 14.285714%;
    float: left;
}
.gallery-columns-8 .gallery-item{
    width: 12.5%;
    float: left;
}
.gallery-columns-9 .gallery-item{
    width: 11.111111%;
    float: left;
}
.gallery-columns-10 .gallery-item{
    width: 10%;
    float: left;
}

.gallery-caption {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0;
    color: #FFFFFF;
    font-size: 14px;
    left: 0;
    line-height: 1.3;
    margin: 0;
    max-height: 50%;
    opacity: 0;
    padding: 2px 8px;
    position: absolute;
    text-align: left;
    -webkit-transition: opacity 400ms ease;
    transition:         opacity 400ms ease;
    width: 100%;
    font-style: italic;
    font-weight: 300;
}


.gallery-caption:before {
    box-shadow: 0 -10px 15px #000000 inset;
    content: "";
    height: 100%;
    left: 0;
    min-height: 49px;
    position: absolute;
    top: 0;
    width: 100%;
}

.gallery .gallery-item .gallery-icon a {
    float:left;
}

.gallery .gallery-item .gallery-icon a img.attachment-thumbnail {
    display: block;
    float: left;
    max-width: 100%;
    width: 100%;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

.gallery-columns-1 .gallery-item, .gallery-columns-2 .gallery-item, .gallery-columns-3 .gallery-item {
    text-align: center;
}

.gallery.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery.gallery-columns-9 .gallery-item:nth-of-type(9n) {
    margin: 0 0 4px 0;
}
/*----------------Widget-------------*/
.widget {
    -webkit-hyphens: auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
    margin: 0 0 24px;
    word-wrap: break-word;
    clear: both;
    overflow: hidden;
}
.widget-title{
    font-size: 18px;
    font-weight: 500;
    font-family: "Roboto", sans-serif;
    color: #0b1033;
    padding-bottom: 25px;
    margin: 0;
}
.widget_recent_entries ul li {
    margin-bottom: 10px;
}
.widget_recent_entries ul li a {
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: #7c8d93;
    -webkit-transition: all 400ms linear 0s;
    -o-transition: all 400ms linear 0s;
    transition: all 400ms linear 0s;
}
.widget_recent_entries ul li:last-child {
    margin-bottom: 0px;
}
.widget_recent_entries ul li:hover a {
    color: #70a7e4;
}

/********  Calender Widget ********/

#wp-calendar {
    width: 100%;
}
#wp-calendar caption {
    text-align: right;
    color: #333;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 15px;
}
#wp-calendar thead {
    font-size: 10px;
}
#wp-calendar thead th {
    padding-bottom: 10px;
}
#wp-calendar tbody {
    color: #aaa;
}
#wp-calendar tbody td {
    background: #f5f5f5;
    border: 1px solid #fff;
    text-align: center;
    padding:8px;
}
#wp-calendar tbody td:hover {
    background: #fff;
}
#wp-calendar tbody .pad {
    background: #f5f5f5;
}
#wp-calendar tfoot #next {
    font-size: 10px;
    text-transform: uppercase;
    text-align: right;
}
#wp-calendar tfoot #prev {
    font-size: 10px;
    text-transform: uppercase;
    padding-top: 10px;
}

/*---------------- widgets Categories --------------*/
.widget_categories ul {
    list-style: none;
    padding: 0;
}
.widget_categories ul li {
    padding-left: 1.5em;
}
.widget_categories ul li:before {
    content: "\f101";
    font-family: FontAwesome;
    font-size: 14px;
    display: inline-block;
    margin-left: -1.3em;
    width: 1.3em;color: #888888;
}

/*-------------- Comment Styles ------------ */
input[type="email"] {
    height: 50px;
}
#respond {
    margin: 5% 0;
}
.comments{
    list-style: none;
    margin: 0;
    padding: 0;
}
.comment{
    margin-bottom: 25px;
}
.comment-thumb{
    position: relative;
}
#comments {
    display: inline-block;
    clear: both;
    width: 100%;
    font-size: 0.8em;
}
ol.commentlist {
    padding: 0;
    margin: 5% 0;
    list-style-type: none;
}
ul.children {
    list-style-type: none;
    padding-left: 5%;
}

article.comment {
    margin: 5% 0;
    padding-left: 80px;
}
.children article.comment {
    padding-left: 60px;
}

.comment footer { font-size: 0.8em; }

.comment p {
    margin:  0 0 20px;
    line-height: 1.2;
    color: #000;
    font-family: chaparral-pro, serif;
}
.comment-meta > p{
    margin-bottom: 15px;
}
.comment-wrap:after{
    content: "";
    display: table;
    clear: both;
}

.comment-thumb {
    float: left;
    margin-right: 25px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.comment-body{
    float: left;
    width: 100%;
}
.comment-thumb + .comment-body{
    width: calc(100% - 105px);
}
.children article.comment img.avatar {
    margin-left: -60px;
}
.comment table {
    margin-bottom: 25px;
}
.comment ul,
.comment ol {
    padding-left: 17px;
    margin-bottom: 20px;
}
.comment ul ul,
.comment ul ol,
.comment ol ol,
.comment ol ul{
    margin-bottom: 0;
}

.form-allowed-tags {
    display: none;
}
#commentform label {
    display: none;
}
p.comment-subscription-form {
    clear: both;
}

.comment-subscription-form label {
    display: inline-block !important;
}
input#subscribe_comments {
    padding: 0!important;
    margin: 0!important;
    margin-right: 0.5em!important;
    float: none !important;
}
#commentform p {margin: 0; }
#commentform input, #commentform textarea {
    margin-bottom: 40px;
}
.comment-reply a{
    padding: 2px 10px;
    font-size: 14px;
    border-radius: 3px;
}
.bypostauthor {
    display: block;
}
/******** Search Widget*********/
.search-form{
    position: relative;
}
.search-field {
    background: #fbfbfb;
    height: 36px;
    padding-left: 15px;
    border: none;
}
.search-field:focus {
    box-shadow: none;
    border: 2px solid transparent;
    outline: none;
}
.search-submit {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
    background: transparent;
    outline: none;
    border: 0;
    padding: 4px 10px;
}
.search-submit:hover ,  .search-submit:focus{
    color: #000;
    outline: none;
}
/*------------------------------------------------
        Post Content
-------------------------------------------------*/
.blog_author .media .d-flex > .avatar{
    border-radius: 50%!important;
}
.post-entry:after,
.comment-content:after {
    clear: both;
    content: "";
    display: table;
}
.post-entry table{
    margin-bottom: 20px;
}
.post-entry ol{
    padding-left: 22px;
}