/* Контентная часть */

#title {padding: 0; color: #fff;}

#title:before {
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: rgb(0 0 0 / 60%);
}

#content {position: relative; align-self: self-start;}

.post-content {background: #fff; box-shadow: 1px 1px 12px rgb(0 0 0 / 10%); min-height: 555px;}

.title {margin-bottom: 15px; font-size: 2rem;}
.title i {color: #2195f3;}

.descript {margin-bottom: 30px;}

@media screen and (max-device-width: 800px) { #content {width: 100%;} }

@media screen and (max-device-width: 480px) { 
	.post-content {box-shadow: none;}
	.title {font-size: 1.6rem;}
}



/* Страница, Запись */

.area {font-size: 1.1rem; text-align: left;}

.area a {text-decoration: underline;}
.area a:hover {text-decoration: none;}

.area h2, #post-content h2 {margin-bottom: 30px;}

.area > h2:after, #post-content > h2:after {
    position: absolute;
    top: 50%;
    margin-top: 3px;
    content: '';
    height: 1px;
    background: #2096f3;
    margin-left: 40px;
    width: 100%;
}

.area p {margin-bottom: 30px; line-height: 1.5;}

.area > img, .area > div {margin-bottom: 30px;}

.area > ul, .area > ol {display: inline-block; margin-bottom: 15px; width: 100%; padding-left: 20px;}
.area ul li, .area ol li {width: 100%; margin-bottom: 15px; list-style: square; position: relative; line-height: 1.5;}
.area ul li::marker {color: #2196f3;}

.area table {border-spacing: 3px; margin-bottom: 30px;}
.area th {text-align: center; background: #50aaff; padding: 10px 12px; border: 1px solid #ccc; color: #fff; font-weight: 600;}
.area td {padding: 5px 12px; border: 1px solid #ccc;}
.area tr:nth-child(2n) {background: whitesmoke;}
.area table h2 {margin: 10px 0;}

blockquote {font-style: italic; border-left: 2px solid #80c7ff; padding-left: 30px; margin-bottom: 30px; color: #555;}
  
.alignleft {display: inline; float: left; margin-right: 30px; margin-bottom: 15px;}
.alignright {display: inline; float: right; margin-left: 30px; margin-bottom: 15px;}
.aligncenter {display: block; margin-right: auto; margin-left: auto; margin-bottom: 15px;}

@media screen and (max-device-width: 1280px) { img.alignleft, img.alignright {max-width: 400px;} }

@media screen and (max-device-width: 480px) { 
	.area table {font-size: 0.9rem; overflow-x: scroll; display: inline-block;} 
	.area img {display: block;}
	.area > h2:after, .post-content > h2:after {display: none;}
}

@media screen and (max-device-width: 330px) { 
	.area h2, #post-content h2, .area p, .area table, .area > img, .area > div {margin-bottom: 20px;}
	.area > ul, .area > ol {margin-bottom: 5px;}
	.post-buttons > * {padding: 0;}
}


/* Записи в архивах */

.posts-archive {display: -webkit-flex; display: flex; flex-wrap: wrap; margin-bottom: 30px;}

.posts-tiles {margin-left: -15px; margin-right: -15px;}
.posts-tiles .hentry {position: relative; width: 33.33%; margin-bottom: 30px; padding: 0 15px;}
.posts-tiles .hentry a {display: block; height: 100%; color: #000; background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; text-decoration: none;}
.posts-tiles .hentry a:hover {color: #2196f3;}
.posts-tiles .hentry img {display: block; width: 100%;}
.posts-tiles .hentry .post-title {text-align: center; font-size: 1.1rem; padding: 30px; margin: 0; font-weight: 400;}
.posts-tiles .hentry .excerpt {display: none;}	

@media screen and (max-device-width: 1024px) { .posts-tiles .hentry .post-title {padding: 20px 15px;} }  

@media screen and (max-device-width: 800px) { .posts-tiles .hentry {width: 50%; margin-bottom: 20px;} }  

@media screen and (max-device-width: 480px) {
	.posts-tiles {margin-left: -10px; margin-right: -10px;}
	.posts-tiles .hentry {padding: 0 10px;}
}

@media screen and (max-device-width: 380px) { .posts-tiles .hentry {width: 100%; margin-bottom: 30px;} }