.my-viberate {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	overflow-y: auto;
	overflow-x: hidden;

	&.show {

		//@media @bp_768 {
			.animation(transition-color-in .5s linear 0s forwards);
			display: block;

			.my-viberate-content,
			.header {
				.animation(transition-slide-in 0.6s ease-out 0s forwards);
			}

			&.open {
				.animation(transition-color-in 0s linear 0s forwards);

				.my-viberate-content,
				.header {
					.animation(transition-slide-in 0s ease-out 0s forwards);
				}
			}
		//}
	}

	&.hide {
		display: block;
		.animation(transition-color-out 0s linear 0s forwards);
		.prevent-click();
		overflow-y: hidden;

		.my-viberate-content,
		.header {
			.animation(transition-slide-out 0.3s ease-out 0s forwards);
		}
	}

	> .page {
		overflow-x: hidden;
		position: relative;
		max-width: none;
		padding-left: 40px;
		padding-right: 0;

		@media @bp_768 {
			padding-left: 70px;
		}

		@media @bp_1200 {
			padding-left: 70px;
		}
	}

	.header {
		background-color: #f6f6f5;
		z-index: 3;
		position: relative;

		&.v2 {

			a {
				color: @black;
			}

			.profile {
				background-image: none;
				background-color: transparent;
				color: @black;

				&:hover {

					//@media @bp_768 {
						background-color: @white;
						color: @black;

						.my-profile {
							background-color: @black;
							color: @white;
						}
					//}
				}
			}

			.menu-sys {

				.btn-menu.my-profile {
					color: @white;
					background-color: @black;
				}
			}

			.my-viberate-menu {
				background-image: none;
				background-color: @white;

				a {
					color: @black;
				}
			}

			.hamburger {

				a {
					color: @white;
				}
			}

			.profile {

				.expand {
					color: @black;
				}
			}
		}

		.navigation-primary {
			float: none;
			display: inline-block;
		}

		.menu {
			float: left;

			@media @bp_1024 {
				display: none;
			}

			@media @bp_1200 {
				display: table;
			}

			li {

				&.active {
					

					a {
						color: @black;
					}
				}
			}

			a {
				color: #999;

				&:hover {
					color: @black;
				}
			}
		}

		.menu-sys {

			&:after {
				background-image: url(../images/gif/noise-animated-dark.gif);
			}

			> li {

				&:first-child {
					display: none;
				}
			}

			.btn-menu {

				&.profile {
					background-image: url('../images/svg/user.svg');
				}

				&.search {
					background-image: url('../images/svg/search.svg');
				}

				&.more {
					background-image: url('../images/svg/burger-menu.svg');
				}

				&.my-profile {
					background-color: @white;
					color: @black;
				}

				&.my-feed {
					background-color: @white;
					color: @black;
				}
			}
		}

		.profile {
			color: @white;
			background-image: url(../images/gif/noise-animated-dark.gif);

			a {
				color: @white;
			}

			.expand {
				background-image: url(../images/svg/dropdown-white.svg);
			}
		}

		.my-viberate-menu {
			.box-sizing();
			color: @white;
			background-image: url(../images/gif/noise-animated-dark.gif);
		}
	}

	.my-viberate-content {
		.box-sizing();
		.transition(transform, 300ms, ease-our);
		.translate(110%, 0);
		background-color: #f6f6f5;
		margin: 0 0 0 -40px;
		min-height: calc(~'100vh - 40px');  //subtract header height

		@media @bp_768 {
			min-height: calc(~'100vh - 70px');  //subtract header height
			margin: 0 0 0 -70px;
			display: flex;
			flex-direction: column;
			//justify-content: center;
			//width: 100%;
		}

		&:before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			width: 40px;
			background-color: @white;
			z-index: 2;

			@media @bp_768 {
				width: 70px;
			}
		}

		> .page {
			.box-sizing();
			text-align: left;
			min-height: 100%;
			padding: 0 20px 0 60px;
			width: 100%;

			@media @bp_768 {
				padding-right: 20px;
				padding-left: 90px;
			}

			@media @bp_1024 {
				padding-right: 40px;
				padding-left: 110px;
			}

			@media @bp_1500 {
				padding-right: 90px;
				padding-left: 90px;
			}

			.page {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

	.btn-close-my-viberate {
		.rotate(-90.1);
		.transform-origin(left, top);
		position: absolute;
		top: 400px;
		left: 0px;
		height: 40px;
		line-height: 40px;
		z-index: 3;

		@media @bp_768 {
			height: 70px;
			line-height: 70px;
		}
	}

	a.btn-close-my-viberate {
		line-height: 40px;

		@media @bp_768 {
			height: 70px;
			line-height: 70px;
		}
	}

	h1 {
		.font-size(30);
		line-height: 36px;
		font-weight: 500;
		padding-bottom: 30px;

		@media @bp_768 {
			.font-size(80);
			line-height: 90px;
			padding-bottom: 90px;
		}
	}

	h2 {
		.font-size(22);
		font-weight: 500;
		line-height: 30px;
		padding-bottom: 20px;

		@media @bp_768 {
			.font-size(42);
			line-height: 50px;
			padding-bottom: 30px;
		}
	}

	.row-submit {
		text-align: right;
	}

	.zero-state {

		@media @bp_768 {
			padding-left: 50px;
		}

		&.black {
			color: @white;
			background-color: @black;
		}

		&.cube {
			.box-sizing();
			max-width: 400px;
			min-height: 400px;
			display: flex;
			flex-direction: column;
			padding: 20px;
			justify-content: flex-end;
			align-items: flex-start;

			@media @bp_768 {
				padding: 50px;
			}
		}

		h1 {
			
			@media @bp_768 {
				padding-bottom: 10px;
				line-height: 49px;
			}
		}

		p {
			.font-size(18);
			line-height: 24px;
			font-weight: 500;
			max-width: 75%;

			@media @bp_768 {
				.font-size(24);
				line-height: 30px;
			}

			@media @bp_1200 {
				max-width: 50%;
			}
		}

		.btn-solid,
		.btn-text {
			margin-top: 30px;
		}

		.btn-solid {
			width: 292px;
		}

		.grid {
			.clearfix;
			margin: -15px;
			padding-top: 40px;

			@media @bp_768 {
				padding-top: 90px;
			}

			@media @bp_1024 {
				padding-top: 120px;
			}

			.grid-item {
				.box-sizing();
				padding: 15px;
				width: 100%;

				@media @bp_768 {
					width: 50%;
					float: left;
				}

				@media @bp_1200 {
					width: 25%;
				}

				&:nth-child(2n+1) {

					@media @bp_768 {
						clear: both;
					}

					@media @bp_1200 {
						clear: none;
					}
				}
			}
		}

		.btn-card-add {
			max-width: 290px;
		}
	}

	.section-start-contributing {
		height: auto;

		.selectors {

			.selector {

				h2 {
					padding: 10px 0 0 0;
					margin: 10px 0 30px 0;
				}
			}
		}
	}
}