/* Blog page*/ .blog-page { padding:20px 0 !important; } .page.with-sidebar.right .left-box { margin-right: -20px; } .single-blog-post { -webkit-transition: all .4s ease; transition: all .4s ease; margin-top: 8px; } .single-blog-post .blockquote p{ margin-top:0 !important;} .blog-page .single-blog-post + .single-blog-post { margin-top:60px; } .blog-page .single-blog-post .img-holder { position: relative; margin-bottom: 50px; background: #000; } .blog-page .single-blog-post .img-holder .img-post { overflow: hidden; } .blog-page .single-blog-post .img-holder .img-post > img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: -webkit-transform .4s ease, opacity .4s ease; transition: transform .4s ease, opacity .4s ease; max-width: 100%; } .blog-page .single-blog-post .img-holder .img-post:hover > img { -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); opacity: .7; } .blog-page .single-blog-post .img-holder .date-box { width: 85px; height: 85px; text-align: center; position: absolute; bottom: -20px; left: 0; padding: 15px 0; margin-left: 20px; font-size: 16px; line-height: 25px; color: #fff; } .blog-page .single-blog-post .img-holder .date-box:before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px solid #fff; } .blog-page .single-blog-post .img-holder .date-box span { font-size: 30px; } .single-blog-post h3 { font-size: 16px; font-weight: bold; color: #282828; line-height: 26px; -webkit-transition: color .4s ease; transition: color .4s ease; } .blog-page .single-blog-post h3 a { font-size: 20px; font-weight: bold; color: #242424; text-decoration: none; } .blog-page .single-blog-post p { margin-top: 13px; font-size: 16px; line-height: 26px; } .list-inline>li { display: inline-block; padding-right: 5px; padding-left: 5px; } .blog-page .single-blog-post ul.meta li a { font-style: italic; color: #959595; line-height: 37px; text-decoration: none; font-size: 16px; } .blog-page .single-blog-post ul.meta li a i { font-size: 16px; color: #30373e; margin-right: 6px; } .blog-page .right-box { padding-left: 50px; } .blog-page .single-sidebar-widget + .single-sidebar-widget { margin-top: 50px; } .blog-page .right-box .title { margin: 0 0 14px 0; } .blog-page .right-box .title h2 { margin: 0; font-size: 17px; font-weight: 700; color:#30373e; line-height: 26px; text-transform: uppercase; position: relative; top: -5px; } .blog-page .right-box .title .decor-line { background:#999; width: 45px; height: 3px; display: inline-block; vertical-align: top; margin-top: 5px; } .blog-page .right-box .categories ul { padding: 0; } .blog-page .right-box .categories ul li { margin: 0; padding: 0; list-style: none; } .blog-page .right-box .categories ul li a { padding-left: 15px; font-weight: 400; color: #575757; display: block; line-height: 36px; position: relative; -webkit-transition: color .4s ease; transition: color .4s ease; font-size: 16px; text-decoration:none; } .blog-page .right-box .categories ul li a:hover { text-decoration: none; color: #1f91f3; } .blog-page .right-box .categories ul li a:before { content: "\f2ee"; font-family: 'Material-Design-Iconic-Font'; color: #C8C8C8; font-size: 14px; position: absolute; left: 0; } .blog-page .right-box .tag-clouds ul { margin: 0; padding: 0; } .blog-page .right-box .tag-clouds ul li { list-style: none; display: inline-block; margin: 5px; } .blog-page .right-box .popular ul { margin: 0; padding: 0; } .blog-page .right-box .popular ul li { margin: 10px 0; padding: 0; list-style: none; } .blog-page .right-box .popular ul li .icon-box { width: 110px; background: #78b83e; display: table-cell; vertical-align: top; } .blog-page .right-box .popular ul li .icon-box img { width: 100%; } .blog-page .right-box .popular ul li .text-box { padding-left: 30px; display: table-cell; vertical-align: top; } .blog-page .right-box .popular ul li .text-box h3 { font-size: 13px; line-height: 20px; text-transform: uppercase; margin-top: -3.5px; font-weight: 600; } .blog-page .right-box .popular ul li .text-box h3 a { text-decoration: none; color: #666; } .blog-page .right-box .popular ul li .text-box span { color: #1f91f3; font-size: 13px; line-height: 10px; } /**/ blockquote { border-left-color: #1f91f3; padding: 0px 20px; } blockquote p { font-style: italic; } .left-box .comment-box h2 { font-size: 26px; font-weight: 400; } .left-box .single-comment-box > ul { margin: 0; padding: 0; } .left-box .single-comment-box > ul > li { border-top: 1px solid #EEEEEE; padding: 25px; padding-bottom: 18px; list-style: none; } .left-box .single-comment-box ul li .icon-box { width: 110px; background: #78b83e; display: table-cell; vertical-align: top; } .left-box .single-comment-box ul li .icon-box img { width: 100%; } .left-box .single-comment-box ul li .text-box { padding-left: 30px; display: table-cell; vertical-align: top; } .left-box .single-comment-box ul li .text-box h3 { font-size: 13px; line-height: 20px; text-transform: uppercase; margin-top: -3.5px; font-weight: 600; } .left-box .single-comment-box ul li .text-box h3 a { text-decoration: none; color: #666; } .left-box .single-comment-box ul li .text-box span { color: #78b83e; font-size: 13px; line-height: 10px; } .left-box .comment-form h4 { font-weight: 700; color: #555; } .text-widget h5{ font-size: 16px; font-weight: 400; line-height: 30px;} /* end Blog page*/ @media all and (min-width: 1200px) and (max-width: 1500px){ .section.blog-page > .container{ width:100%;} } @media (max-width: 1200px){ .blog-page .right-box {padding-left: 30px;} } @media (max-width: 767px){ } @media (max-width: 414px){ .section.blog-page{ padding:20px 0;} .blog-page .single-blog-post + .single-blog-post{margin-top:40px;} .blog-page .single-blog-post ul.meta li a{line-height: 26px;font-size: 14px;} .left-box .single-comment-box > ul > li{padding: 25px 0;} .left-box .single-comment-box ul li .icon-box {display: inline-block;} .left-box .single-comment-box ul li .text-box{ display:block; padding-left:0; margin-top:10px;} .blog-page .right-box{ padding-left:0px;} }