/* document css pages and posts styles */

.page-description{ margin: 20px 0; flex-basis: 100%; }
.post-index{ position: relative; background-color: rgba(255, 255, 255, 0.7); width: 96%; margin: 10px 2%; border-radius: 3px; }
.post-index h2{ position: absolute; top: 5px; left: 5px; text-shadow: 2px 2px 2px black; color: #FBFBF9; margin: 0; width: 48%; }
.post-index figure{ width: 48%; margin-right: 10px; float: left; border-radius: 3px; line-height: 0; display: inline; }
.post-index p{ color: #777; font-size: 0.9em; margin: 0; line-height: initial; text-indent: 0; padding: 5px; text-align: left; }
.post-index p a{ color: #777; text-decoration: none; }
.post-index p a.button{ color: #060; }

.post-content-figure-left figure{ text-align: center; }
.post-content-figure-right figure{ text-align: center; }

.post-article-figure { text-align: center; }
.post-article-figure { line-height: 0; }
.post-article-figure figcaption{ line-height: normal; background-color: rgba(0,0,0,0.5); color: white; font-style: italic; font-size: 85%; padding: 3px; }

.post-article-background-paper, .background-article-paper { background-color: rgba(255,255,255,0.7); padding: 3px 1%; margin-bottom: 15px; color: #555; width: 98%; }
.post-article-background-paper a.button, .background-article-paper a.button { color: inherit; font-size: 85%; }

.webPage { display: flex; flex-wrap: wrap; justify-content: space-around; }
.webPage article { overflow: hidden; }
.webPage article p { text-align: justify; text-indent: 15px; margin: 1em 0.5em; }
.webPage .figure-inContent { line-height: 0; text-align: center; }
.webPage .figure-inContent a { line-height: 0; }
.webPage .figure-inContent figcaption { line-height: normal; background-color: rgba(0,0,0,0.3); padding: 3px; color: #FBFBF9; font-size: 85%; font-style: italic; }
.webPage .figure-inContent img { margin: 0; padding: 0; line-height: 0; }

/* MEDIA QUERIES
============================================================== */
@media (min-width:480px){
    .post-index h2{ font-size: 2em; width: 50%; }
    .post-index p{ font-size: 1em; line-height: 1.8; padding: 5px; }
    .post-index figure{ width: 50%; }
    .post-index--flex50{ width: 47%; margin: 10px 1%; }
    .post-index--flex50 h2{ width: 100%; }
    .post-index--flex50 figure{ width: 100%; }
    .page-description{ margin: 0 20px 20px; }
}
@media (min-width: 550px){
    figure.post-content-figure-left{ float: left; margin-right: 10px; width: 50%; }
    figure.post-content-figure-right{ float: right; margin-left: 10px; width: 50%; }
    .article-figure-inContent-right .figure-inContent { float: right; margin-left: 10px; width: 50%; }
    .article-figure-inContent-left .figure-inContent { float: right; margin-left: 10px; width: 50%; }
}
@media (min-width:768px){
    .posts{ margin-left: 12px; }
    .post-index h2{ width: 39%; }
    .post-index figure{ width: 40%; }
    .post-index p{ line-height: 1.6; }
    .post-index--flex50 h2{ width: 100%; }
    .post-index--flex50 figure{ width: 100%; }
    .post-index--flex50 p{ line-height: 1.8; }   
    .post dl{ padding-left: 15px; } 
    .post-article-figure-right-40{ float: right; width: 40%; margin-left: 10px; }
    
}
@media (min-width: 900px){
    .webPage-article-gallery { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }
    /*.webPage .figure-inContent { float: right; max-width: 50%; margin: 0.7em 0.5em 0 1em; }
    .box-index--figureText .figure-inContent { float: left; margin: 0em 0.5em 0; }*/
    .figure-inGallery { width: 48%; margin-bottom: 1%; }
    .box-index--figureText-square .figure-inContent { float: none; max-width: none; margin: 0; }
}
@media (min-width: 990px){ 
    .posts dl{ padding-left: 20px; }
}