
/********** section manirelatedarticles start ***********/ 
#manirelatedarticles {
  position: relative; 
}
#manirelatedarticles > h3.title{
    line-height: normal; 
    position: relative;
    margin: 0 0 5px;
    clear: both;
    padding: 0;
    text-align: right;
}
#manirelatedarticles > h3.title span {
  display: inline-block;
  padding: 10px 0 10px 10px;
  background: #fff;
  position: relative;
  z-index: 1;
  color: #333;
  font-size: 22px;
}
#manirelatedarticles {
  margin-top: 60px;
}
#manirelatedarticles > h3.title::after {
  content: '';
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background: #eee;
  height: 1px;
  margin: auto;
  right: 0;
}
#manirelatedarticles .image_box {
  overflow: hidden;
  position: relative;    
}
#manirelatedarticles.rows .image_box{
  padding: 0 !important
}

#manirelatedarticles .image_box img{ 
  width: 100%;
  -webkit-transition: all 1.5s cubic-bezier(0,0,.2,1);
  transition: all 1.5s cubic-bezier(0,0,.2,1); 
}
#manirelatedarticles .swiper-slide:hover img {
  -webkit-transform: scale3d(1.1,1.1,1.1);
  transform: scale3d(1.1,1.1,1.1);
} 
#manirelatedarticles .info{
  padding: 15px ;
}
#manirelatedarticles .info h3 {
  margin: 0;
  font-size: 15px;
  font-family: 'iransanmedium'; 
}
#manirelatedarticles h3 a {
  color: #4b566b;
  display: block;
  line-height: 28px;
}
#manirelatedarticles .slider_content{
  position: relative;
  display: none;
}  
#manirelatedarticles .swiper-container{
  overflow: hidden; 
  margin: 0 -10px;
} 
#manirelatedarticles .swiper-slide > div {
  padding: 10px !important;
  height: 100%;
}
#manirelatedarticles .swiper-slide { 
  width: 50%;   
}
#manirelatedarticles .each_related {
  margin-bottom: 24px;
}
#manirelatedarticles .each_related > div { 
    display: flex;
  flex-wrap: wrap;
}
@media (max-width:768px) {
  #manirelatedarticles .each_related .image {
    width: 60%;
    padding-left: 10px;
  }
  #manirelatedarticles .each_related h3 {
    width: 40%;
  }
}
@media (min-width:993px) {
  #manirelatedarticles .each_related .image {
    width: 26%;
    padding-left: 15px;
  }
}

#manirelatedarticles .each_related h3 {
  margin: 0;
  font-size: 16px;
  line-height: 21px;
}
#manirelatedarticles.col .each_related .info h3 { 
  width: 100%; 
}
#manirelatedarticles .each_related h3 a {
  display: block;
  font-size: inherit;
  color: #4b566b;
  line-height: 21px;
}
@media only screen  and (max-width : 620px) { 
  
  #manirelatedarticles.rows .info {
    padding: 5px; 
  }
  #manirelatedarticles.rows .info h3 {
    font-size: 12px;
  }
  #manirelatedarticles.rows .info h3 a { 
    line-height: 23px;
  }
  #manirelatedarticles .manirelatedarticles_desktop {
    display: none;
  }
  #manirelatedarticles .slider_content{
    position: relative;
    display: block;
  }  

  #manirelatedarticles .swiper-slide { 
      width: 80%;  
  } 
  #manirelatedarticles{
      margin-bottom:0 !important;
  }
  /* #manirelatedarticles .swiper_buttons {
      display: none;
  } */
}
#manirelatedarticles .each_related.row_layout h3 { 
  height: 44px;
  overflow: hidden;
  margin: 0 !important;
  width: 100% !important;
}
#manirelatedarticles .each_related.row_layout .text {
  font-size: 13px;
  color: #7d879c;
  height: 42px;
  overflow: hidden;
  margin: 0 ;
}
#manirelatedarticles .each_related.row_layout .created_date{
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
#manirelatedarticles .each_related.row_layout .mobile_text {
  font-size: 13px;
  color: #7d879c;  
  margin: 10px 0 0;
  border-bottom: solid 1px #eee;
  padding-bottom: 10px;
  display: none;
}
@media only screen  and (max-width : 768px) { 
  #manirelatedarticles .each_related.row_layout .mobile_text {
    display: block;
  }
  #manirelatedarticles .each_related.row_layout .text{
    display: none;
  }
  #manirelatedarticles .each_related.row_layout h3{
    height: 63px; 
  }
  #manirelatedarticles .each_related.row_layout .info_box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

/********** section manirelatedarticles end ***********/ 
  