/* --------------------------------------------------------------------------------- */
/* BLOG (index.php) ---------------------------------------------------------------- */
/* --------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');


/* blog title */
#leftsuiteBlogContent h1 { padding-top: 0px; margin: 40px auto 40px auto !important; text-align: center !important; }
#leftsuiteBlogContent h1::first-letter { font-size: 140px; margin-right: -7px }
@media screen and ( max-width: 781px ) { 
   #leftsuiteBlogContent h1 { font-size: 70 !important; } 
   #leftsuiteBlogContent h1::first-letter { font-size: 90px !important; } 
}
@media screen and ( max-width: 400px ) { 
   #leftsuiteBlogContent h1 { font-size: 50px !important; }
   #leftsuiteBlogContent h1::first-letter { font-size: 80px !important; }
}

/* Blog Content and Sidebar */
#leftsuiteBlogContent { width: 70%; padding: 20px 0 60px 0; margin-right: 40px; margin-top: 0px; float:left; overflow: hidden }
#leftsuiteBlogContent.nosidebar { width: 100%; }
#leftsellBlogSideBar { width: calc( 30% - 40px ); padding: 20px 0 20px 0; float:right; overflow: hidden; opacity: .7 }
#leftsellBlogSideBar:hover { opacity: 1; }
#leftsellBlogSideBar img.custom-logo { width: 80%; margin: 0 auto 20px auto; height:auto; display: block; max-width:200px }

@media screen and ( max-width: 781px ) { 
   #leftsuiteBlogContent, #leftsellBlogSideBar { width:100%; float:none; padding: 0px 0px 40px 0px; margin-right: 0 } 
} 
@media screen and ( max-width: 500px ) { 
   #leftsuiteBlogContent { padding-top: 0 !important; margin-top: -20px }
}

/* ---------------------------------------------------------------------------------- */
/* blog home with previews ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
.leftsuite_bloghome { margin-bottom: 30px;
                     display:flex; flex-wrap:wrap; gap: 40px }
.leftsuite_bloghome .leftsuiteBlogPost { 
                     display:flex; align-self: flex-end; background:rgb(237, 237, 236); 
                     flex-basis: calc(33% - 25px); flex-grow: 0; 
                     width: calc( 100% - 20px); background-size: cover; background-position: center center; 
                     height: 40vh; padding: 30px 0 0 0; cursor:pointer; }
.leftsuite_bloghome .leftsuite_blogpreviewlink { 
                     margin-top: auto; border-left: 8px solid #B01F22;
                     padding: 8px 10px 20px 10px; text-align: left; font-size: small; 
                     background-image: radial-gradient(100% 100% at left bottom, rgba(31, 31, 31, 0.75), rgba(31, 31, 31, 0.75) 60%, rgba(31, 31, 31, 0)); }
.leftsuite_bloghome .leftsuiteBlogPost:hover > .leftsuite_blogpreviewlink { opacity: .95 }
.leftsuite_bloghome .leftsuite_blogpreviewlink h2  { font-size:22px; line-height: 1.2em; }
.leftsuite_bloghome .leftsuite_blogpreviewlink h2 a { 
                     font-family: 'Archivo Black'; letter-spacing: 0;
                     color:white; font-weight: normal; overflow-wrap: break-word;
                     text-shadow: rgb(31, 31, 31) 0px 0px 8px, rgb(31, 31, 31) 0px 0px 8px;
                     font-size:22px; line-height: 1; text-align:left; }

@media screen and ( max-width: 782px ) { 
   .leftsuite_bloghome .leftsuiteBlogPost { flex-basis: calc(50% - 20px);  }
   .leftsuite_bloghome .leftsuiteBlogPost { height: 40vh }
   .leftsuite_bloghome .leftsuite_blogpreviewlink h2  { font-size:18px;  }
   .leftsuite_bloghome .leftsuite_blogpreviewlink h2 a { font-size:18px; line-height: 1.2em; }
}
@media screen and ( max-width: 500px ) { 
   .leftsuite_bloghome .leftsuiteBlogPost { height: 20vh }
   .leftsuite_bloghome .leftsuite_blogpreviewlink { padding-bottom: 5px }
   .leftsuite_bloghome .leftsuite_blogpreviewlink h2  { font-size:14px;  }
   .leftsuite_bloghome .leftsuite_blogpreviewlink h2 a { font-size:14px; line-height: 1.2em; }
}

/* ---------------------------------------------------------------------------------- */
/* blog post  ----------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
.leftsuite_blogpost { margin-top: -60px }
#leftsuiteBlogContent .leftsuite_blogpost > h1.leftsuite_posttitle { font-size: 80px; 
                  padding-top: 0px; margin: 0px 0 40px 0 !important; text-align: center; }
#leftsuiteBlogContent .leftsuite_blogpost > h1.leftsuite_posttitle::first-letter { font-size: 100px; margin-right: -7px }
.leftsuite_blogpost p.leftsuite_postdescription { text-align:center; font-style: italic; 
         border-bottom: 1px solid lightgray; padding-bottom: 15px; font-size: 14px }
.leftsuite_postcontent { margin-top: 60px; }
.leftsuite_postcontent img { max-width: 100%; }
.leftsuite_categlink { color: black; font-weight: normal; }
@media screen and ( max-width: 500px ) { 
   .leftsuite_blogpost { padding-top: 20px }
}


/* ---------------------------------------------------------------------------------- */
/* blog categories  ----------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
.lefsuite_blogcategories h1 { padding-top: 0px; margin: 60px 0 40px 0 !important; text-align: center; }
.leftsuitecategorydescription { text-align: center; margin-bottom: 40px }

/* -------------------------------------------------------------------------------------------- */
/* blog navis --------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------- */
.leftsuite_bloglinknavi { margin-bottom: 20px; min-height: 20px; width:100%; 
                          text-align: center; color:transparent !important}
.leftsuite_bloglinknavi a:first-child { float:left }
.leftsuite_bloglinknavi a:last-child { float:right }
.leftsuite_bloglinknavi::after { clear:both; }

.leftsuite_blognavi_nextprev { width: 100%; height: 60px; color:var(--leftsuite_var_linkcolor); }
.leftsuite_blognavi_nextprev a { font-size: 40px; color:var(--leftsuite_var_linkcolor); }
.leftsuite_blognavi_nextprev a:first-child, .nav-previous { float:left }
.leftsuite_blognavi_nextprev a:nth-child(2), nav-next  { float:right }



/* -------------------------------------------------------------------------------------------- */
/* blog comments ------------------------------------------------------------------------------ */
/* -------------------------------------------------------------------------------------------- */
.leftsuite_postcomments .logged-in-as { display: none }
.leftsuite_postcomments textarea { max-width: calc( 100% - 10px ) }
.leftsuite_postcomments input { margin: 10px 0 20px 0; width: fit-content; border-radius: 4px; background: var(--leftsuite_var_buttons); border:0; 
             color: var(--leftsuite_var_button_color); white-space: nowrap; -webkit-box-shadow: 4px 3px 7px -2px rgba(0,0,0,0.6); -moz-box-shadow: 4px 3px 7px -2px rgba(0,0,0,0.6); box-shadow: 4px 3px 7px -2px rgba(0,0,0,0.6); 
             padding: 10px 20px 10px 20px; cursor:pointer; line-height: 1.6em; text-align:center; font-weight: normal; font-size: 14px; }
.leftsuite_postcomments .cauthor { font-style: italic; font-size: 12px;}
.leftsuite_postcomments .leftsuiteComment { margin-top: 0}
.leftsuite_postcomments p.comment_title { margin-top: 40px; font-weight: bold; margin-bottom: 10px }
#leftsuiteContent .leftsuite_postcomments ul li::before { content: ""; width: 0; margin:0; padding:0; display: none }
#leftsuiteContent .leftsuite_postcomments ul  { padding:0; margin:0  }
#leftsuiteContent .leftsuite_postcomments ul li { list-style-type: none; padding:0 0 10px 0; margin-bottom: 20px; 
              line-height: 1em; border-bottom: 1px solid lightgray }


/* ---------------------------------------------------------------------------------- */
/* blog content corrections  -------------------------------------------------------- */
/* ---------------------------------------------------------------------------------- */
#leftsuiteBlogContent td {padding: 10px }
#leftsuiteBlogContent td.backimage { background-size: cover; padding: 0}
#leftsuiteBlogContent .blackmirror { background-color: rgba(0,0,0,0.6); color:white; padding: 10px }
#leftsuiteBlogContent .blackmirror a { color:white;}