/* Start:/local/templates/vp_main/components/bitrix/news.list/list_projec/style.css?16804282944052*/
div.news-list
{
	word-wrap: break-word;
}
div.news-list img.preview_picture
{
	float:left;
	margin:0 4px 6px 0;
}
.news-date-time {
	color:#486DAA;
}



/**
* Title
**/
.title {
  text-align: center;
  transform: translateY(20px);
  font-size: 45px;
  color: coral;
  text-transform: uppercase;
}

/**
* CARD
**/
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) translateZ(0);
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.5s;
  border: 0px solid #ddd!important;
}
.card a {
  color: inherit;
  text-decoration: none;
}

.card:hover {
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}



/**
* THUMB
**/
.card__thumb {
  /* height: 340px; */
  /* overflow: hidden; */
  background-color: #000;
  transition: height 0.5s;
}


.card:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 400px;
    content: '';
    background: -webkit-gradient(linear, left top, left bottom, color-stop(41%, rgba(0, 0, 0, 0)), color-stop(92%, rgba(0, 0, 0, 0.62)));
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.62) 92%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0.62) 92%);
}
.card:hover:after {
    opacity: 0;
}
.card__thumb img {
	display: block;
	opacity: 1;
	object-fit: cover;
	width: 101%;
	height: 100%;
	transform: scale(1);
	transition: opacity 0.5s, transform 0.5s;
}


.card:hover .card__thumb img {
  opacity: 0.6;
  transform: scale(1.2);
}

/**
* BODY
**/
.card__body {
  position: relative;
  height: 70px;
  margin-top: -70px;
  padding: 20px;
  transition: height 0.5s;
}
.card:hover .card__body {
  height: 185px;
}


.card__title {
  margin: 0;
  padding: 0 0 15px 0;
  color: #000;
	display: flex;
	height: 80px;
	align-items: flex-end;
  /* font-size: 22px; */
  /* font-weight: bold; */
  /* text-transform: uppercase; */
}

.card__title a{
	color: #fff!important;
}


.card:hover .card__title {
  /* opacity: 1; */
  /* transform: translateY(-90px); */
  /* transition-delay: 0.2s; */
}
.card__description {
  position: absolute;
  left: 20px;
  right: 20px;
      bottom: -20px;
  margin: 0;
  padding: 0;
  color: #fff;
  line-height: 27px;
  opacity: 1;
  z-index: 1;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  transition-delay: 0s;
  line-height: 20px!important;
  height: 120px;
}
.card__description p{
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    box-orient: vertical;
	bottom: -50px;
	
}
.card:hover .card__description{
  transform: translateY(-80px);
  transition-delay: 0.2s;
}
.card:hover .card__description p{
  opacity: 1;
}


.card__description div a{
	overflow: hidden;
    text-overflow: ellipsis;
    display: -moz-box;
    -moz-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    box-orient: vertical;
    color: #fff!important;
	opacity: 0;
}

.card:hover .card__description div a{
opacity: 1;
}

.card__description a:hover{
	
	text-decoration: revert;
}
.main_projec .wrap_card{
	position:relative;
	width:100%;
	padding-bottom:54%;
}
.main_projec .wrap_card > div{
	position:absolute;
	width:100%;
	height:100%;
	left: 0;
	top: 0;
}
@media (max-width: 991px){
	.card .card__description div a{
		opacity: 1!important;
		line-height: 2rem!important;
		text-decoration: auto!important;
	}

	.card .card__description{
		transform: translateY(-160px)!important;
		transition-delay: 0.2s!important;
	}
	.card .card__description p{
		opacity: 1!important;
	}
	.card .card__body {
		height: 185px!important;
	}
	.card__thumb {
		background-color: #000;
		transition: height 0.5s;
	}
	.card .card__thumb img {
		opacity: 0.6!important;
	}

}
/* End */
/* /local/templates/vp_main/components/bitrix/news.list/list_projec/style.css?16804282944052 */