/* Start:/bitrix/templates/aspro_max_new/components/bitrix/news.list/sertifikaty/style.css?178420315810161*/
/*==================================================
DOCUMENTS
==================================================*/

.documents {}

/*==================================================
GRID
==================================================*/

.documents .documents-list {

	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));

	gap: 24px;
}

/*==================================================
CARD
==================================================*/

.documents .documents-item {

	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 390px;

	background: #FFFFFF;

	border: 1px solid #EDF2F7;

	border-radius: 22px;

	overflow: hidden;

	box-shadow:
		0 4px 12px rgba(15, 23, 42, .03),
		0 12px 30px rgba(15, 23, 42, .05);

	transition:
		transform .22s cubic-bezier(.2, .8, .2, 1),
		box-shadow .22s cubic-bezier(.2, .8, .2, 1),
		border-color .22s cubic-bezier(.2, .8, .2, 1),
		filter .22s cubic-bezier(.2, .8, .2, 1);
}

.documents .documents-item:hover {

	transform: translateY(-4px);

	border-color: #DCE5F0;

	box-shadow:
		0 18px 40px rgba(20, 40, 80, .10);

	filter: brightness(1.01);
	scale(1.005)
}

/*==================================================
TOP
==================================================*/

.documents .documents-item-image {

	padding:
		16px 20px 18px;

	height: 255px;

	display: flex;

	justify-content: center;

	align-items: flex-start;
}

/*==================================================
IMAGE
==================================================*/

.documents .documents-item-image img {

	display: block;

	width: 185px;

	max-width: 100%;

	max-height: 250px;

	object-fit: contain;

	border-radius: 6px;

	box-shadow:
		0 10px 26px rgba(20, 40, 80, .12);

	transition:
		transform .22s cubic-bezier(.2, .8, .2, 1),
		box-shadow .22s cubic-bezier(.2, .8, .2, 1);
}

.documents .documents-item:hover .documents-item-image img {

	transform: scale(1.02);

	box-shadow:
		0 14px 34px rgba(20, 40, 80, .14);
}

/*==================================================
TITLE
==================================================*/

.documents .documents-item-title {
    margin-top: 32px;
    margin-bottom: 16px;
    padding: 0 10px;
    min-height: 48px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    text-align: center;
    color: #333333;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -.01em;
}

/*==================================================
BOTTOM PANEL
==================================================*/

.documents .documents-item-buttons {

	margin-top: auto;

	height: 50px;

	background: #FBFCFE;

	border-top: 1px solid #F2F4F7;

	display: flex;

	justify-content: space-evenly;

	align-items: center;

	padding-top: 8px;

	padding-bottom: 8px;
}

/*==================================================
BUTTON
==================================================*/

.documents .documents-btn {

	width: 44px;

	height: 44px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: transparent;

	border: none;

	border-radius: 12px;

	color: #6D7D93;

	text-decoration: none;

	cursor: pointer;

	transition:
		color .18s ease,
		background .18s ease,
		transform .18s ease;
}

.documents .documents-btn:hover {

	color: #2b60ad;

	background: #EEF4FD;

	transform: scale(1.08);
}

.documents .documents-btn:focus {

	outline: none;

	color: #2b60ad;

	background: #EEF4FD;
}

/*==================================================
SVG
==================================================*/

.documents .documents-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}


/*==================================================
BOOTSTRAP FIX
==================================================*/

.documents .documents-item::before,
.documents .documents-item::after {

	display: none;

	content: none;
}

.documents .documents-btn::before,
.documents .documents-btn::after {

	display: none;

	content: none;
}

/*==================================================
BOTTOM BLOCK
==================================================*/

.documents .documents-bottom {

	margin-top: 36px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 30px;

	padding: 28px 34px;

	background: #FFFFFF;

	border: 1px solid #EDF2F7;

	border-radius: 22px;

	box-shadow:
		0 8px 24px rgba(20, 40, 80, .05);
}

/*==================================================
LEFT
==================================================*/

.documents .documents-bottom-left {

	display: flex;

	align-items: center;

	gap: 18px;
}

.documents .documents-bottom-left span {

	color: #66758A;

	font-size: 18px;

	font-weight: 500;

	line-height: 28px;
}

/*==================================================
ICON
==================================================*/

.documents .documents-bottom-icon {

	width: 54px;

	height: 54px;

	flex-shrink: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 14px;

	background: #F4F7FB;

	transition:
		background .22s ease,
		transform .22s ease;
}

.documents .documents-bottom-icon svg {

	width: 28px;

	height: 28px;

	display: block;
}

.documents .documents-bottom-icon svg path,
.documents .documents-bottom-icon svg circle {

	stroke: #2b60ad;

	transition: .22s;
}

.documents .documents-bottom:hover .documents-bottom-icon {

	background: #EEF4FD;

	transform: scale(1.04);
}

/*==================================================
CONTACT
==================================================*/

.documents .documents-contact {

	display: flex;

	align-items: center;

	gap: 16px;
}

/*==================================================
BUTTON
==================================================*/

.documents .documents-contact .open-modal {

	height: 50px;

	padding: 0 30px;

	border: none;

	border-radius: 12px;

	background: #2b60ad;

	color: #fff;

	font-size: 16px;

	font-weight: 600;

	letter-spacing: .01em;

	cursor: pointer;

	transition:
		background .22s cubic-bezier(.2, .8, .2, 1),
		transform .22s cubic-bezier(.2, .8, .2, 1),
		box-shadow .22s cubic-bezier(.2, .8, .2, 1);

	box-shadow:
		0 8px 20px rgba(43, 96, 173, .18);
}

.documents .documents-contact .open-modal:hover {

	background: #25579F;

	transform: translateY(-2px);

	box-shadow:
		0 14px 28px rgba(43, 96, 173, .26);
}

.documents .documents-contact .open-modal:active {

	transform: translateY(0);
}

.documents .documents-contact .open-modal:focus {

	outline: none;
}

/*==================================================
≤ 1399 px
==================================================*/

@media (max-width:1399px) {

	.documents .documents-list {

		grid-template-columns: repeat(4, minmax(0, 1fr));

		gap: 20px;
	}

	.documents .documents-item {

		min-height: 380px;
	}

	.documents .documents-item-image {

		height: 245px;
	}

	.documents .documents-item-image img {

		width: 175px;

		max-height: 235px;
	}

}

/*==================================================
992–1199 px
==================================================*/

@media (max-width:1199px) {

	.documents .documents-list {

		grid-template-columns: repeat(3, minmax(0, 1fr));

		gap: 24px;
	}

	.documents .documents-item {

		min-height: 385px;
	}

	.documents .documents-item-title {

		font-size: 16px;

		line-height: 23px;
	}

}

/*==================================================
768–991 px
==================================================*/

@media (max-width:991px) {

	.documents {

		padding: 0;
	}

	.documents .documents-list {

		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 20px;
	}

	.documents .documents-item {

		min-height: 370px;
	}

	.documents .documents-item-image {

		height: 235px;
	}

	.documents .documents-item-image img {

		width: 170px;

		max-height: 220px;
	}

	.documents .documents-bottom {

		flex-direction: column;

		align-items: flex-start;

		gap: 24px;

		padding: 24px;
	}

	.documents .documents-contact {

		width: 100%;
	}

	.documents .documents-contact .open-modal {

		width: 100%;
	}

}

/*==================================================
≤ 576 px
==================================================*/

@media (max-width:576px) {

	.documents .documents-list {

		grid-template-columns: 1fr;

		gap: 18px;
	}

	.documents .documents-item {

		min-height: auto;
	}

	.documents .documents-item-image {

		height: 220px;

		padding: 16px 18px 18px;
	}

	.documents .documents-item-image img {

		width: 165px;

		max-height: 210px;
	}

	.documents .documents-item-title {

		font-size: 16px;

		line-height: 23px;

		margin-bottom: 14px;
	}

	.documents .documents-item-buttons {

		height: 54px;
	}

	.documents .documents-btn {

		width: 46px;

		height: 46px;
	}

	.documents .documents-btn svg {

		width: 28px;

		height: 28px;
	}

	.documents .documents-bottom {

		padding: 20px;

		border-radius: 18px;
	}

	.documents .documents-bottom-left {

		gap: 14px;
	}

	.documents .documents-bottom-left span {

		font-size: 15px;

		line-height: 22px;
	}

	.documents .documents-bottom-icon {

		width: 48px;

		height: 48px;
	}

	.documents .documents-contact {

		width: 100%;
	}

	.documents .documents-contact .open-modal {

		width: 100%;

		height: 48px;

		font-size: 15px;
	}

}

/*==================================================
Micro interactions
==================================================*/

.documents .documents-item,
.documents .documents-btn,
.documents .documents-item-image img,
.documents .documents-bottom-icon,
.documents .documents-contact .open-modal {

	will-change: transform;
}

.documents .documents-item:hover .documents-item-title {

	color: #2b60ad;
}

.documents .documents-item:hover .documents-item-buttons {

	background: #FCFDFE;
}

.documents .documents-item:hover .documents-btn {

	color: #2b60ad;
}

.documents .documents-btn:active {

	transform: scale(.96);
}

.documents .documents-contact .open-modal:active {

	transform: translateY(0) scale(.98);
}

.documents .documents-item {

	backface-visibility: hidden;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;
}
/* End */
/* /bitrix/templates/aspro_max_new/components/bitrix/news.list/sertifikaty/style.css?178420315810161 */