blog page v2

htdocs/wp-content/themes/lawcarta/assets/css/main-page.css

@@ -3026,13 +3026,17 @@ footer {
     color: #10417E;
     font-weight: bold; }
   .blog-page-single .blog-body {
-    padding: 30px 0 50px; }
+    padding: 0 0 50px; }
     .blog-page-single .blog-body .cont {
-      max-width: 800px; }
+      max-width: 960px; }
+      @media (min-width: 992px) {
+        .blog-page-single .blog-body .cont {
+          padding-left: 85px; } }
   .blog-page-single .blog-page-social {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    position: relative;
     padding-bottom: 20px; }
     .blog-page-single .blog-page-social .left, .blog-page-single .blog-page-social .right {
       -webkit-box-flex: 1;
@@ -3042,7 +3046,105 @@ footer {
       text-align: right; }
     .blog-page-single .blog-page-social .email {
       display: inline-block;
-      width: 63px;
       height: 30px; }
       .blog-page-single .blog-page-social .email img {
         max-height: 100%; }
+    .blog-page-single .blog-page-social .social {
+      display: block;
+      width: 30px;
+      height: 30px;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover; }
+      .blog-page-single .blog-page-social .social:hover {
+        opacity: 0.7; }
+      .blog-page-single .blog-page-social .social.twitter {
+        background-image: url("../img/blog-social/twitter.svg"); }
+      .blog-page-single .blog-page-social .social.linkedin {
+        background-image: url("../img/blog-social/linkedin.svg"); }
+      .blog-page-single .blog-page-social .social.facebook {
+        background-image: url("../img/blog-social/facebook.svg"); }
+    @media (min-width: 992px) {
+      .blog-page-single .blog-page-social {
+        display: block;
+        padding: 0; }
+        .blog-page-single .blog-page-social .left, .blog-page-single .blog-page-social .right {
+          -webkit-box-flex: 0;
+              -ms-flex: none;
+                  flex: none; }
+        .blog-page-single .blog-page-social .left {
+          position: absolute;
+          right: 100%;
+          top: 0;
+          margin-right: 20px; }
+        .blog-page-single .blog-page-social .right {
+          position: absolute;
+          left: 100%;
+          top: 0;
+          margin-left: 10px; }
+        .blog-page-single .blog-page-social .email {
+          height: 48px; }
+        .blog-page-single .blog-page-social .social {
+          display: block;
+          width: 40px;
+          height: 40px; }
+          .blog-page-single .blog-page-social .social + .social {
+            margin-top: 10px; } }
+
+.read-next {
+  display: block; }
+  .read-next .rn-head {
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 30px;
+    text-align: center;
+    color: #10417E;
+    margin-bottom: 30px;
+    padding: 0 15px; }
+    @media (min-width: 768px) {
+      .read-next .rn-head {
+        font-size: 36px;
+        line-height: 40px; } }
+    @media (min-width: 992px) {
+      .read-next .rn-head {
+        font-size: 43.9444px;
+        line-height: 58px; } }
+  .read-next .rn-body {
+    background: #E6EBF2;
+    text-align: center;
+    overflow: hidden;
+    padding: 15px 0 15px; }
+    .read-next .rn-body .cont {
+      height: 293px;
+      overflow: hidden; }
+    @media (min-width: 768px) {
+      .read-next .rn-body {
+        padding: 35px 0 65px; } }
+  .read-next .rn-block {
+    display: inline-block;
+    vertical-align: top;
+    width: 230px;
+    height: 273px;
+    background: #FFFFFF;
+    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 19px;
+    padding: 30px 18px;
+    text-align: left;
+    color: #678AB2;
+    font-size: 15.62px;
+    line-height: 20.7px;
+    margin: 10px 7px; }
+    .read-next .rn-block .head {
+      font-size: 17.5777px;
+      line-height: 23px;
+      margin-bottom: 20px;
+      display: block; }
+    .read-next .rn-block .text {
+      overflow: hidden;
+      max-height: 184px; }
+    .read-next .rn-block:hover {
+      text-decoration: none;
+      background: #efefef;
+      color: #666;
+      cursor: pointer; }