﻿
.blog-article-wrapper .ws-block-padding {padding: 0 0;}

.ql-cursor {display: none !important;}

.blog-banner {height: 60vh; background-size: cover; background-position: center center;}
.blog-banner h1 {font-size: 42px; margin: 0 0; padding: 50px 20px; text-align: center; text-transform: uppercase; color: #fff; text-shadow: 0 0 5px #aaa;}
.blog-banner h1 span {font-weight: 700;}

.blog-items, .blog-article-title, .blog-article-copy p {font-family: Georgia, 'Times New Roman', sans-serif;}
.blog-items {margin: 0 0 40px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
.blog-items > li { width: calc(33.333% - 40px); margin-bottom: 40px; margin: 20px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 4px rgba(0,0,0,0.1); transition: all 0.3s;}
.blog-items > li:hover {box-shadow: 0 0 8px rgba(0,0,0,0.3); transition: all 0.3s;}
.blog-header-picture-wrapper { padding-bottom: 65%; position: relative; border-bottom: 1px solid #eee;}
.blog-header-picture { display: block; background-size: cover; background-position: center center; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.blog-item-wrapper {font-size: 14px; background: #fff; }
.blog-item-wrapper a {text-decoration: none;}
.blog-item-wrapper .image {}
.blog-item-wrapper .image img {width: 100%;}
.blog-item-wrapper .header {background: none; z-index: unset; letter-spacing: 1px; text-align: left; padding: 20px 15px 10px 15px; margin-bottom: 0;}
.blog-item-wrapper .header > div {height: auto;}
.blog-item-wrapper .header .category {color: #999; font-size: 9px;  padding-bottom: 10px; min-height: 24px; font-family: Raleway; text-transform: uppercase; letter-spacing: 2px;} /*for no category*/
.blog-item-wrapper .header .title {font-size: 24px; font-weight: bold; }
.blog-item-wrapper .header .title a {color: #111; transition: all 0.3s;}
.blog-item-wrapper .header .title a:hover { text-decoration: underline; }
.blog-item-wrapper .copy {font-size: 18px; line-height: 24px; letter-spacing: 1px; padding: 0 15px 20px 15px; color: #888;}
.blog-item-wrapper .copy a {color: #555; }
.read-more { text-align: center; margin: 30px 0 50px 0;}
.read-more a {padding: 8px 12px; border: 1px solid #ddd; text-transform: uppercase; color: #555; display: inline-block; font-size: 12px;}
.blog-item-wrapper .footer { padding: 10px 20px; border-top: 1px dashed #ddd ; color: #aaa; font-size: 0;}
.blog-item-wrapper .footer > div {width: 50%; display: inline-block; font-size: 14px; vertical-align: top;} 
.blog-item-wrapper .footer > div:last-child {text-align: right;}
.blog-item-wrapper .footer .social  {margin: 0; padding: 0;}
.blog-item-wrapper .footer .social li {margin-left: 12px; list-style: none; display: inline-block;}
.blog-item-wrapper .footer .social a {color: #aaa; font-size: 18px;}

.blog-menu-block {margin-bottom: 50px; text-align: left; color: #888;}
.blog-menu-block h5 {font-size: 12px; font-weight: bold; color: #aaa; letter-spacing: 2px; text-transform: uppercase; }
.blog-menu-block a {color: #555;}

.blog-menu-recent {margin: 0; padding: 0; list-style: none;}
.blog-menu-recent li { padding: 10px 0; border-bottom: 1px solid #ddd;}
.blog-menu-recent li:first-child {border-top: 1px solid #ddd;} 

.blog-menu-labels {margin: 0; padding: 50px 0 30px 0; list-style: none;}
.blog-menu-labels li { display: inline-block; border-radius: 15px; text-transform: uppercase; padding: 5px 18px; margin: 0 10px 10px 0; font-size: 12px; letter-spacing: 1px;}
.blog-menu-labels li a {color: #888; font-weight: bold;}

.blog-article-wrapper > div {max-width: 800px; margin: 0 auto;}
.blog-article-banner { height: 20vw; width: 100%; max-width: none !important; margin: 60px 0 0 0 !important;}
.blog-article-banner-caption {
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0,0,0,.68);
    font-weight: 400;
    letter-spacing: 0;
    font-style: italic;
    margin: .5em 0 10px 0 !important;
}
.blog-article-header {text-align: center; margin: 0 0 80px 0;}
.blog-article-subhead {text-align: center; margin-bottom: 60px !important; margin-top: 60px !important;}
.blog-article-category {font-size: 12px; color: #aaa; margin: 0 0 50px 0; text-transform: uppercase;}
.blog-article-title {font-size: 48px !important; font-weight: 400; color: #111; margin: 0 0 10px 0 !important;}
.blog-article-date {font-size: 14px; color: #333; margin: 0 0 10px 0;}
.blog-article-author-portrait img {width: 70px; border-radius: 50%; border: 3px solid #ccc;}
.blog-article-copy { text-align: left; margin: 0 0 40px 0; }
.blog-article-copy h3 { font-size: 36px; line-height: 1.15; color: #222; margin-top: 50px; font-weight: 600; letter-spacing: -0.015em; font-family: Poppins; }
.blog-article-copy h4 { font-size: 26px; line-height: 1.22; color: #222; margin-top: 31px; font-weight: 600; letter-spacing: -0.012em; font-family: Georgia; }
.blog-article-copy p, .blog-article-copy ul li {font-size: 20px; line-height: 1.8; font-family: 'Georgia';}
.blog-article-image { margin-bottom: 40px;}
.blog-article-image img {width: 100%;}

.blog-article-social {text-align: left; padding: 20px 0; font-size: 24px;}
.blog-article-social ul {list-style: none; margin: 0; padding: 0;}
.blog-article-social ul li {display: inline-block; margin-right: 10px;}

.blog-article-footer {font-size: 0; text-align: left;}
.blog-article-footer > div {font-size: 16px; width: 50%; display: inline-block;}
.blog-article-footer > div:last-child {text-align: right;} 

.blog-recommended {text-align: left; margin: 60px 0 20px 0; border-top: 1px solid #ddd;}
.blog-recommended h5 {font-size: 14px; font-weight: bold; text-transform: uppercase;}
.blog-recommended ul {display: flex; padding: 0; margin: 0;}
.blog-recommended ul li {list-style: none; width: 33%; padding: 10px 20px 10px 0;  }
.blog-recommended .blog-header-picture-wrapper {margin-bottom: 10px; border: 1px solid #ddd;}
.blog-recommended ul li a {color: #555;}

.blog-popular {}
.blog-popular ul { margin: 0; padding-left: 20px;}
.blog-popular ul li { list-style: none; padding: 10px 0; display: flex; text-align: left;}
.blog-popular .row-number { flex: 0 0 40px; font-size: 28px; text-align: center; color: #aaa; font-family: Georgia, serif;}
.blog-popular ul li a { color: #555; font-size: 14px; padding-top: 5px;}

.blog-article-comments {padding-top: 50px;}

.pquote {
    float: right;
    width: 50%;
    background: url(/content/blog/openquote.png) top left no-repeat;
    background-size: 80px;
    color: #030;
    font-size: 36px;
    line-height: 1.3;
    font-style: italic;
    padding: 15px 0 15px 30px;
}

blockquote {
    margin: 0 ; border-left: none; padding: 20px 0;
}

.pquote p:first-letter {
    font-size: 42px;
    font-weight: 800;
}

.ws-body.medium-editor-element h3 { font-size: 36px; line-height: 1.15; color: #222; margin-top: 50px; font-weight: 600; letter-spacing: -0.015em; font-family: Poppins; }
.ws-body.medium-editor-element h4 { font-size: 26px; line-height: 1.22; color: #222; margin-top: 31px; font-weight: 600; letter-spacing: -0.012em; font-family: Georgia; }
.ws-body.medium-editor-element p { font-size: 21px; line-height: 1.58; color: #222; margin-top: 6px; font-weight: 400; letter-spacing: -0.003em; font-family: Georgia; }
.ws-body.medium-editor-element a { color: #ddac58;}
.ws-body .medium-insert-images figure figcaption { font-size: 14px; line-height: 1.4; color: rgba(0,0,0,.68); font-weight: 400; letter-spacing: 0; margin: 0 0 10px 0; }
.ws-body .medium-insert-images.medium-insert-images-grid figure, .ws-body .medium-insert-images-grid.mediumInsert figure {width: 50%; }

.ws-body .medium-insert-images figure img {margin-top: 1em !important; margin-bottom: .5em;}


.ws-body.medium-editor-element blockquote{
    display:block;
    padding: 15px 20px 15px 55px !important;
    margin: 20px 0 20px !important;
    position: relative;
  
    /*Font*/    
    color: #333;
    text-align: justify;
    font-style: italic;
    font-family: Georgia, Cambria, 'Times New Roman', serif;
    font-size: 20px;
    line-height: 1.2;
            
  
    /*Borders - (Optional)*/
    border-left: 10px solid #eee !important;
}
.ws-body.medium-editor-element blockquote p {margin: 0 !important;}

.ws-body.medium-editor-element blockquote::before{
    content: "\201C" !important; /*Unicode for Left Double Quote*/
  
    /*Font*/  
    color: #555;
    font-family: Georgia, serif;
    font-size: 72px;
    font-weight: bold;
  
    /*Positioning*/
    position: absolute;
    left: 10px;
    top: 0;
}

.ws-body.medium-editor-element blockquote::after{
    /*Reset to make sure*/
    content: "";
}

.medium-editor-list {margin-left: 30px; font-size: 21px;}
.medium-editor-list li {list-style: disc;}

@media only screen and (max-width: 900px) {
    .blog-article-wrapper {padding: 0 20px;}
    .blog-items, .blog-menu-block {padding: 0 20px;}
}

@media only screen and (max-width: 480px) {
    .blog-items {padding: 0 10px;}
    .blog-items li {width: 100%; margin-bottom: 20px;}
    .blog-item-wrapper .category {text-align: center;}
    .blog-item-wrapper .header {padding: 10px 10px;}
    .blog-item-wrapper .header .title {font-size: 14px; text-align: center;}
    .blog-item-wrapper .copy {font-size: 12px; padding: 0 10px 10px 10px;}
    

    .blog-article-wrapper {padding: 0 10px;}
    .blog-article-category {margin-bottom: 15px;}
    .blog-article-banner {margin: 10px 0 !important; height: 60vw;}
    .blog-article-header {margin-bottom: 5px;}
    .blog-article-author-portrait img {width: 55px; border-width: 1px;}
    .blog-article-author, .blog-article-date {font-size: 12px;}
    .blog-article-subhead {margin-bottom: 10px !important;}
    .blog-article-title { font-size: 24px !important;}
    .blog-article-copy p, .blog-article-copy ul li {font-size: 14px !important;}

    .ws-body.medium-editor-element h3 {font-size: 24px;}
    .ws-body.medium-editor-element h4 {font-size: 18px;}


    .ws-image-caption {font-size: 14px;}
    .ws-image .image {padding-bottom: 0;}
    .ws-block-padding {display: block !important;}
    .ws-col-half:last-child {margin-left: 0 !important;}

    .ws-block blockquote {border-left-width: 5px !important;
                          padding-left: 30px !important; font-size: 16px; padding-right: 0 !important;
    }
    .ws-block blockquote::before {left: 5px; font-size: 36px; }

    .blog-item-wrapper .footer .social li {margin-left: 8px;}

    .blog-recommended ul {display: block;}
    .blog-recommended ul li {width: 100%; padding: 10px 0; margin-bottom: 20px;}

    .medium-editor-list {margin-left: 0;}
}

