main .container{flex-direction:column;}
#posts{width:100%; padding:0; margin:0; display:flex; flex-direction:column;}
#posts li{width:100%; text-align:left; display:flex; flex-direction:column;}
#posts li .pic, #posts span{width:100%; display:flex; flex-direction:column;}
#posts li .pic{min-height:380px; position:relative;}
#posts li h2{width:100%; display:flex;}
#posts li a{width:100%; display:flex;}
#posts li span{height:197px; padding:24px;}
#posts li h2{font-size:22px; line-height:1.4; margin:0 0 18px 0; font-weight: 400;}
#posts li p{font-size:14px; line-height:1.5; margin:0;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
#posts li a:hover{color:#000;}
#posts li .pic img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;}


.btn-fillter{display:flex; justify-content:center; align-items:center; line-height:1;  outline:none; margin-top:4px; height:50px; font-family: "Open Sans", sans-serif; font-size:14px; color:#FFF; background:rgb(212, 156, 89); border:0; cursor:pointer; margin-bottom:50px; border-radius:8px;}

.ctrl{width:100%; margin:16px 0 30px; display:flex; justify-content:center; align-items:center;}
.ctrl a{min-width:36px; min-height:36px; font-size:14px; margin:0 3px; display:flex; justify-content:center; align-items:center;}
.ctrl .active{color:rgb(212, 156, 89); pointer-events:none;}
.ctrl .no-active{opacity:.4; pointer-events:none;}

.right-side{ flex-direction:column;}
.right-side .contact{width:100%; display:flex; flex-direction:column;}
.right-side .contact h2{font-size:15px; font-weight:400; line-height: 1.5em; letter-spacing: 0.1em; margin:20px 0 8px 0; display:flex; align-items:center;}
.right-side .contact .pic{margin-bottom:31px;}
.right-side .contact .pic img{width:100%;}
.right-side .contact span{margin-bottom:11px; display:flex; flex-direction:column;}
.right-side .contact span p{ margin:0 0 7px 0; text-align:left; align-self:start; justify-self:start; display:flex; flex-direction:column;}
.right-side .contact span a{align-self:start; justify-self:start; display:flex;}
.right-side .about{display:flex; padding-top:18px; margin-bottom:68px; position:relative;}
.right-side .about::before{content:""; width:30px; height:5px; background:#000; position:absolute; top:0; left:0;}
.right-side .about a{display:flex; line-height:1; font-size:15px; text-decoration:underline;}

.recent{display:flex; margin-bottom:50px; flex-direction:column;}
.recent .topic{display:flex; font-size:17px; letter-spacing: 0.1em; font-weight:400; padding-top:18px; margin-bottom:24px; position:relative;}
.recent .topic::before{content:""; width:30px; height:5px; background:#000; position:absolute; top:0; left:0;}
.recent ul{width:100%; padding:0; margin:0; display:flex; flex-direction:column;}
.recent li{width:100%; text-align:left; display:flex; flex-direction:column;}
.recent li .pic, .recent span{width:100%; display:flex; flex-direction:column;}
.recent li .pic img{width:100%;}
.recent li a{width:100%; display:flex;}
.recent li span{height:auto; padding:24px;}
.recent li h2{width:100%; display:flex; font-size:14px; line-height:1.4; margin:0; font-weight: 400;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent li .avatar{display:flex; margin-bottom:12px;}
.recent li .avatar em{width:32px; border-radius:50%; overflow:hidden; display:flex;}
.recent li .avatar em img{width:100%;}
.recent li .avatar p{font-size:12px; line-height:1.4; padding:0 0 0 12px; display:flex; justify-self:center; align-self:center;}

.sub-email{display:flex; flex-direction:column;}
.sub-email .topic{display:flex; font-size:17px; letter-spacing: 0.1em; font-weight:400; padding-top:18px; margin-bottom:24px; position:relative;}
.sub-email .topic::before{content:""; width:30px; height:5px; background:#000; position:absolute; top:0; left:0;}
.sub-email form{display:flex; margin-bottom:40px; flex-direction:column;}
.sub-email form input{outline:none; height:40px; padding:3px 5px; border:2px solid #000; font-family: "Open Sans", sans-serif; display:flex; font-size:14px; color:#000; background:#E6E6E6;}
.sub-email form input::placeholder{color:#666;}
.sub-email form input:focus{outline:none;}
.sub-email form button{display:flex; justify-content:center; align-items:center; -webkit-font-smoothing: antialiased; line-height:1;  outline:none; margin-top:4px; height:40px; font-family: "Open Sans", sans-serif; font-size:14px; color:#FFF; background:#000; border:0; cursor:pointer;}

.archive{display:flex; flex-direction:column;}
.archive .topic{display:flex; font-size:20px; letter-spacing: 0.1em; font-weight:400; margin-bottom:10px; }
.archive span{display:flex; padding:5px 0; flex-direction:column; background:#DBDBDB;}
.archive span a{display:flex; padding:0 5px; font-size: 14px; line-height: 1.5; justify-self:end; align-self:end;}
.archive span a:hover, .archive span a:visited{color:#000;}

@media (max-width: 974px) {
  .right-side .about{justify-self:start; align-self:start;}
}
@media (max-width: 698px) {
  #posts li span{height:auto; padding-bottom:50px; margin-bottom:20px;}
  #posts li span{border-bottom:1px solid rgba(0, 0, 0, .2);}
}
@media (max-width: 500px) {
#posts li .pic{min-height:300px;}
}
@media (max-width: 414px) {
#posts li .pic{min-height:260px;}
}
@media (max-width: 320px) {
#posts li .pic{min-height:210px;}
}