.rest-container {/*загрузка всей статьи*/
margin-top: 15px;
animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {/*анимация загрузки статьи*/
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
.btn-collapse, .btn-read-more{/*кнопки читать и свернуть*/
width: fit-content;
padding: 5px;
margin: 0 auto;
font-size: 20px;
border: 1px solid white;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
#button-wrapper-articles{/*весь блок*/
 position: relative;
}
#slideLeftArticles{
 display:none;
 position:absolute;
 top:0%;
 left:5%;
 height:50px;
 width:50px;
 font-size:30px;
 font-weight:600;
 border:none;
 background-color:red;
 cursor:pointer;
} 
#slideRightArticles{
  position:absolute; 
  top:0%;
  right: 5%;
  height:50px;
  width:50px;
  font-size: 30px;
  font-weight:600;
  border:none;
  background-color:red;
  cursor:pointer;
}
#container-articles{
  margin: 60px auto;
  padding: 0px;
  width: 90%;
  height: fit-content;
  overflow: hidden;
}
#container-all-row{
  display: flex;
  justify-content:space-between;
  flex-wrap: nowrap;
  width:fit-content; 
  background-color:  #7f7c7c;
}
.wrapper-articles-row{/*контейнер 1 статьи*/
 position: relative;
 margin: 0 10px;
 width: 661px;
 height: fit-content;
 border-left: 5px solid #7f7c7c;
 border-right: 5px solid #7f7c7c;
}
.title-articles{
  margin: 0px auto;
  padding:15px;
  width:100%;
  background-color: #7f7c7c;
  text-align: center;
  font-size: 23px;
  color:white; 
}
.articles-row{/*контейнер контента статьи*/
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  max-height: 600px;
  background-color: wheat;
  overflow-y: scroll;
}
.text-articles p  {
  padding:5px;  
  text-align:justify;
  text-indent: 10px;
  font-size: 18px;
  line-height: 1.4;  
}
.articles-row img {/*изображения статей*/
  width:100%;
  height: 100%; 
  object-fit:cover; 
}
.date-article{ 
  margin:10px;
  text-align: right;
}
.like-comments-flex{/*контейнер футера статей*/
  display: flex;
  align-items: center; 
  width: 100%;
  height: fit-content;
  background-color:#7f7c7c;
}
.like-comments{/*комментарий*/
  flex-basis: 50%;
  padding: 5px;
  text-align:center;
  cursor: pointer;
  font-size: 22px;
  color:white;
}
.like-container{/*сердце*/
 flex-basis: 50%;
 padding: 15px;
 text-align: center;
 font-size: 25px;
 color:white; 
}
.like-comments button {
padding:5px;
font-size:27px;
border:none;
background-color: #7f7c7c;
}
.like-comments button span {/*иконка комментариев*/
color:white;
}
.like-comments span {/*счётчик комментариев*/
  font-size: 25px;
}
/* оформление лайка */
.like-btn {
  color: white;
  cursor: pointer;
}
.like-btn.liked {
  color: red;
}
.counter-span{
  color:white;
}
  /*блок вывода комментариев*/
.input-comm-title p{
  font-size: 25px;
  text-align: center;
  color:blue;
}
.scroll-art{
  height: fit-content;
  max-height: 300px;
  overflow-y: auto;
 border-radius: 10px;
  padding: 10px;
  overflow-wrap: break-word;
  font-size: 16px;
  background-color: bisque;
}
.flex-comm{
  margin: 20px 0;
  padding:10px;
}
.author-name{
  margin-bottom: 5px;
  font-size: 20px;
  color: green;
}
.date-author-comment{
color: rgb(223, 121, 37);
margin-bottom: 10px;
padding: 5px;
font-size: 15px;
}
.text-comments-art{
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  background-color: wheat;
}
/*скрытая форма для комментариев*/
#comment-article{
 cursor: pointer;
}
.form-input-comment{
  display:none;
  position:absolute;
  bottom: 0%;
  left:0;
  margin:0px;
  width:100%;
  height:fit-content;
  background-color: #636161;
  color:white;
  cursor:pointer;
}
.close-form{
  color:white;
  text-align: right;
  font-size: 25px;
  margin: 10px;
}
.form-input-comment label{
 display: block;
 margin: 10px;
 text-align: center;
 font-size: 20px;
}
.form-input-comment input{
  display: block;
  width: 100%;
  margin: 10px auto;
  font-size: 20px;
  border-radius: 10px;
}
.form-input-comment textarea{
 display: block;
 font-size: 20px;
 border-radius: 10px;
}
.form-input-comment #articleid{
 display: none;
}
@media(max-width:1368px){
#container-articles{
width: 100%;
}
#slideLeftArticles{
 left:0px; 
} 
#slideRightArticles{
right:0px;
}
}
@media(max-width:1024px){ 
.container-all{
 margin: 0px;
}
#slideLeftArticles, #slideRightArticles{
opacity: 0%;
}
#container-articles{
 margin: 30px 0;
 width: 100%;
}
#container-all-row{
 width:100%; 
 background-color:  #7f7c7c;
 overflow-x: scroll;
 scroll-snap-type: x mandatory;
}
.wrapper-articles-row{
 margin:0px;
 /*display:none;*/
 /*width: 100%;*/
 display: block;
 min-width: 100%;
 scroll-snap-align: center;
}
.title-articles{
 
 padding:15px 20px;
 width: 100%;  
 font-size: 29px;
}
.text-articles p { 
  font-size: 21px;
}
.like-comments-flex{
  width:100%;
  justify-content: space-between;
}
.like-comments{
  font-size: 20px;
}
.form-input-comment{
width:60%;
}
}
@media(max-width:768px){
  .form-input-comment{
width:100%;
}
}
@media(max-width:478px){
#container-articles{
margin: 0px auto;
margin-bottom: 20px;
}
.articles-row{
  height: 480px;
}
.title-articles{
 padding:10px 10px;
 width: 100%;  
 font-size: 20px;
}
.text-articles p { 
text-align:left;
font-size: 16px;   
}
.like-comments-flex{
  height: 40px;
}
.like-comments{/*комментарий*/
  flex-basis: 50%;
  padding: 5px;
  text-align:center;
  cursor: pointer;
  font-size: 22px;
  color:white;
}
.like-comments-flex{
  /*padding: auto 0px;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; 
  width: 100%;
  /*height: 40px;*/
  height: fit-content;
  background-color:#7f7c7c;
}
.like-comments{/*комментарий*/
  flex-basis: 50%;
  padding: 5px;
  text-align:center;
  cursor: pointer;
  font-size: 22px;
  color:white;
}
.like-container{/*сердце*/
 flex-basis: 40%;
 padding: 15px;
 text-align: center;
 font-size: 25px;
 color:white; 
}
 .like-comments button {
  font-size:25px;
  color:white;
  border:none;
}
.count-like{
 padding: 15px;
 text-align: center;
 font-size: 20px;
}
}