:root{
	--client-width: 100vw;
	--client-width-max: 1520px;
	--notification-padding: 20px;
	--notification-shift: 100px;

	--notification-width: calc(var(--client-width) - var(--notification-padding)*2 - var(--notification-shift));
	--notification-width-max: calc(var(--client-width-max) - var(--notification-padding)*2 - var(--notification-shift));
	--notification-width-single: calc(var(--client-width) - var(--notification-padding)*2);
	--notification-width-single-max: calc(var(--client-width-max) - var(--notification-padding)*2);
}

@media screen and (max-width: 767px){
	:root{
		--notification-shift: 60px;
	}
}

.notifications{
	display: block;
	overflow: hidden;

    max-width: calc(1520px - var(--notification-padding)*2);
	width: calc(100% - var(--notification-padding)*2);
    margin: 20px auto;
}
	.notifications-wrap {
		display: block;
		overflow: hidden;
	}
	.notifications-wrap > div{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: stretch;

		width: max-content;
	}

		.notifications .notification {
			display: block;
			padding: 35px 40px;
			width: var(--notification-width);
			max-width: var(--notification-width-max);
		
			background: #F9F3E6;
			border-radius: 12px;
		}
			.notifications .notification-single {
				width: var(--notification-width-single);
				max-width: var(--notification-width-single-max);
			}
			.notifications .notification:not(:first-child){
				margin-left: 20px;
			}

			.notification-header {
				display:flex;
				align-items:flex-start;
				justify-content:space-between
			}
			
				.notification-title{
					font-weight:600;
					font-size:20px;
					line-height:26px;
					color:#3E3E59
				}
				
				.notification-close{
					min-width:30px;
					max-width:30px;
					margin:0 0 0 10px
				}
				
				.notification-close svg {
					width:30px;
					height:30px;
					fill:rgba(92,92,115,1);
					transition:fill 0.35s
				}
				
				.notification-close:hover svg {
					fill:rgba(232,102,48,1);
				}
			
			.notification-text {
				margin:8px 0 0 0;
				font-size:15px;
				line-height:21px;
				color:#3E3E59
			}
			
				.notification-text strong {
					font-weight:bold;
					white-space:nowrap
				}
				
				.notification-text strong a {
					color:#3E3E59
				}

	.notifications-pagination{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;

		width: 100%;
		padding: 20px 0 0 0;
	}
		.notifications-pagination svg{
			height: 30px; width: 25px;
			fill: var(--secondary-color-1);
		}
			.notifications-pagination svg:hover{
				fill: var(--secondary-color-1);
				opacity: 1;
				cursor: pointer;
			}
		.notifications-pagination_toleft{display: flex; opacity: 0.5;}
		.notifications-pagination_toright{display: flex; opacity: 0.5;}
		.notifications-pagination_points{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;

			margin: 0 15px;
		}
			.notifications-pagination_points_point{
				width: 7px; height: 7px;
				margin: 0 10px;

				border-radius: 4px;
				background: var(--secondary-color-1);
				opacity: 0.25;
				cursor: pointer;
			}
				.notifications-pagination_points_point_active{
					width: 30px;
					background: var(--primary-color-2);
					opacity: 0.5;

					animation: notifications-pagination_points_point_active 0.25s cubic-bezier(0, 0.5, 0.8, 1);
				}

/* -- Анимация, переходы -- */

	.notifications-pagination_action:hover{
		opacity: 1;
	}

	.notifications-pagination_action{
		transition: opacity 0.25s ease-in-out;
	}

	.notification-closed {
		animation: notification-closed 0.75s cubic-bezier(0, 0.5, 0.8, 1);
	}

	@keyframes notification-closed {
		100% {
			transform: translateX(-100px);
			width: 0;
			max-width: 0;
			opacity: 0;
		}
		0% {
			transform: translateX(0px);
			opacity: 1;
		}
	}

	@keyframes notifications-pagination_points_point_active {
		100% {
			width: 30px;
			background: var(--primary-color-2);
			opacity: 0.5;
		}
		0% {
			width: 7px;
			background: var(--primary-color-2);
			opacity: 0.25;
		}
	}

/* -- конец -- */

@media screen and (max-width: 767px){

	.notifications .notification {
		padding: 25px 30px;
		width: var(--notification-width);
	}
		.notifications .notification-single {
			width: var(--notification-width-single);
		}
	.notifications-pagination{
		/*display: none;*/
	}

}