/* ОСНОВНЫЕ */
.not-auth {
	overflow: hidden;

	.top-block {
		width: -moz-fit-content;
		width: -webkit-fit-content;
		width: fit-content;
		margin: 0 auto;
		padding: 60px 25px 40px 25px;

		.logo {
			display: block;
			margin: 0 auto;
			width: -moz-fit-content;
			width: -webkit-fit-content;
			width: fit-content;
			img {
				width: 158px;
			}
		}
		h2 {
			line-height: 112%;
			text-align: center;
			margin: 12px 0 24px 0;
		}
		ul.advantages {
		 	list-style: none;
			padding: 0;
			margin: 0;
		}
		ul.advantages li {
		 	position: relative;
		 	padding-left: 24px;
		 	font-size: 16px;
		 	margin-bottom: 8px;
		}
		ul.advantages li::before {
		 	content: "";
		 	position: absolute;
		 	left: 0;
		 	top: 3px;
		 	width: 16px;
		 	height: 16px;
		 	background-image: url(/main-page/images/check.svg);
		 	background-repeat: no-repeat;
		 	background-size: contain;
		}
		.btn-enter {
			width: 100%;
			background: white;
			border: 0;
			padding: 0;
			margin: 40px 0 0 0;
			font: inherit;
			cursor: pointer;
			outline: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;

			font-size: 16px;
			line-height: 24px;
			padding: 12px 0;
			border-radius: 100px;
			-webkit-transition: .2s ease;
			-moz-transition: .2s ease;
			transition: .2s ease;
		}
		.btn-enter:hover {
			cursor: pointer;
		  	background: #fffc;
		}
		.btn-enter:active {
			cursor: pointer;
		  	background: #fff9;
		}
	}
}

@media (max-width: 425px) {
	.not-auth .top-block .logo img {
		width: 158px;
	}
	.not-auth .top-block h2 {
		font-size: 28px;
	}
	.not-auth .top-block .btn-enter {
		margin-top: 32px;
	}
	.not-auth .top-block ul.advantages li {
		font-size: 14px;
	}
	.not-auth .top-block ul.advantages li:last-child {
		margin: 0;
	}
}

/* АНИМИРОВАННАЯ ГАЛЕРЕЯ */
.not-auth {
	.perspective {
		-webkit-perspective: 3000px;
		-moz-perspective: 3000px;
		perspective: 3000px;
		-webkit-transform: scale(.7);
		-moz-transform: scale(.7);
		transform: scale(.7);
		opacity: 0;
		-webkit-animation: show-perspective 1.5s .4s ease-out forwards;
		-moz-animation: show-perspective 1.5s .4s ease-out forwards;
		animation: show-perspective 1.5s .4s ease-out forwards;
	}
	.products {
		height: 500px;
		width: 50px;
		margin: 0 auto;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-animation: rotation 25s linear infinite;
		-moz-animation: rotation 25s linear infinite;
		animation: rotation 25s linear infinite;

		.card {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-backface-visibility: hidden;
			-moz-backface-visibility: hidden;
			backface-visibility: hidden;
			-webkit-transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(calc(var(--shift) + 50px));
			-moz-transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(calc(var(--shift) + 50px));
			transform: translate(-50%, -50%) rotateY(var(--angle)) translateZ(calc(var(--shift) + 50px));
		}
	}
}

@media (max-width: 425px) {
	.not-auth .perspective {
		-webkit-transform: scale(.66);
		-moz-transform: scale(.66);
		transform: scale(.66);
	}
}

@-webkit-keyframes rotation {
	0% {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	100% {
		-webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
}
@-moz-keyframes rotation {
	0% {
		-moz-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
	100% {
		-moz-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}
}
@keyframes rotation {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(-180deg);
	}
}

@-webkit-keyframes show-perspective {
	0% {
		opacity: 0;
		-webkit-perspective: 1400px;
		perspective: 1400px;
	}
	100% {
		opacity: 1;
		-webkit-perspective: 3000px;
		perspective: 3000px;
	}
}
@-moz-keyframes show-perspective {
	0% {
		opacity: 0;
		-moz-perspective: 1400px;
		perspective: 1400px;
	}
	100% {
		opacity: 1;
		-moz-perspective: 3000px;
		perspective: 3000px;
	}
}
@keyframes show-perspective {
	0% {
		opacity: 0;
		perspective: 1400px;
	}
	100% {
		opacity: 1;
		perspective: 3000px;
	}
}