/* Top inner button */

@-webkit-keyframes topPanelCloseButtonBefore {
	0% {
		-webkit-transform: rotate(45deg);
	}
	50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(45deg);
	}
}
@-moz-keyframes topPanelCloseButtonBefore {
	0% {
		-moz-transform: rotate(45deg);
	}
	50% {
		-moz-transform: rotate(0);
	}
	100% {
		-moz-transform: rotate(45deg);
	}
}
@-o-keyframes topPanelCloseButtonBefore {
	0% {
		-o-transform: rotate(45deg);
	}
	50% {
		-o-transform: rotate(0);
	}
	100% {
		-o-transform: rotate(45deg);
	}
}
@keyframes topPanelCloseButtonBefore {
	0% {
		transform: rotate(45deg);
	}
	50% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(45deg);
	}
}
@-webkit-keyframes topPanelCloseButtonAfter {
	0% {
		-webkit-transform: rotate(-45deg);
	}
	50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(-45deg);
	}
}
@-moz-keyframes topPanelCloseButtonAfter {
	0% {
		-moz-transform: rotate(-45deg);
	}
	50% {
		-moz-transform: rotate(0);
	}
	100% {
		-moz-transform: rotate(-45deg);
	}
}
@-o-keyframes topPanelCloseButtonAfter {
	0% {
		-o-transform: rotate(-45deg);
	}
	50% {
		-o-transform: rotate(0);
	}
	100% {
		-o-transform: rotate(-45deg);
	}
}
@keyframes topPanelCloseButtonAfter {
	0% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-45deg);
	}
}

@-webkit-keyframes topPanelCloseButtonBefore2 {
	0% {
		-webkit-transform: rotate(45deg);
	}
	50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(45deg);
	}
}
@-moz-keyframes topPanelCloseButtonBefore2 {
	0% {
		-moz-transform: rotate(45deg);
	}
	50% {
		-moz-transform: rotate(0);
	}
	100% {
		-moz-transform: rotate(45deg);
	}
}
@-o-keyframes topPanelCloseButtonBefore2 {
	0% {
		-o-transform: rotate(45deg);
	}
	50% {
		-o-transform: rotate(0);
	}
	100% {
		-o-transform: rotate(45deg);
	}
}
@keyframes topPanelCloseButtonBefore2 {
	0% {
		transform: rotate(45deg);
	}
	50% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(45deg);
	}
}
@-webkit-keyframes topPanelCloseButtonAfter2 {
	0% {
		-webkit-transform: rotate(-45deg);
	}
	50% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(-45deg);
	}
}
@-moz-keyframes topPanelCloseButtonAfter2 {
	0% {
		-moz-transform: rotate(-45deg);
	}
	50% {
		-moz-transform: rotate(0);
	}
	100% {
		-moz-transform: rotate(-45deg);
	}
}
@-o-keyframes topPanelCloseButtonAfter2 {
	0% {
		-o-transform: rotate(-45deg);
	}
	50% {
		-o-transform: rotate(0);
	}
	100% {
		-o-transform: rotate(-45deg);
	}
}
@keyframes topPanelCloseButtonAfter2 {
	0% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-45deg);
	}
}

.top-inner-page {
	position: absolute;
	top: 50%;
	right: 0px;
	.block();
	width: 12px;
	height: 40px;
	margin-top: -20px;
	.opacity(1);
	visibility: visible;
	
	span {
		@s: 5px;
		
		.block();
		width: @s;
		height: @s;
		.abs();
		left: 0;
		top: 50%;
		margin-top: -10px;
		background: @menu_titles-color;
		.rounded(50%);
		.transition(background .3s ease-in-out);
		
		&:before,
		&:after {
			content: " ";
			.block();
			width: @s;
			height: @s;
			.abs();
			left: 0;
			background: @menu_titles-color;
			.rounded(50%);
		}
		&:before {
			top: 7px;
			.transition(background .3s ease-in-out .1s);
		}
		&:after {
			top: 14px;
			.transition(background .3s ease-in-out .2s);
		}
	}
	&:hover {
		span {
			background: @second-site-light-color;
			&:before {
				background: @second-site-light-color;
			}
			&:after {
				background: @second-site-light-color;
			}
		}
	}
}

.top-inner-page-close {
	@s: 16px;
	@line-s: 2px;
	.block();
	.abs();
	top: auto;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 50px;
	margin: 0;
	background: @third-site-dark-color;

	span {
		.abs();
		.block();
		width: @line-s;
		height: @s;
		top: 50%;
		left: 50%;
		margin-top: -@s / 2;
		margin-left: -@line-s / 2;
		background: transparent;
		&:before,
		&:after {
			content: "";
			.abs();
			.block();
			width: @line-s;
			height: @s;
			top: 0;
			left: 50%;
			margin-left: -1px;
			background-color: @main-site-dark-color;
			.rounded(0);
		}
		&:before {
			.rotate(45deg);
		}
		&:after {
			.rotate(-45deg);
		}
	}
	&.hovered {
		span {
			background: @main-site-dark-color;
			//.transition(~"background .3s ease-in-out");
			&:before,
			&:after {
				height: @s - 5;
				.transition(~"width .3s ease-in-out, margin-left .3s ease-in-out, margin-top .3s ease-in-out .2s");
			}
			&:before {
				margin-left: -5px;
				-webkit-animation: topPanelCloseButtonBefore .3s ease;
				-moz-animation: topPanelCloseButtonBefore .3s ease;
				-o-animation: topPanelCloseButtonBefore .3s ease;
				animation: topPanelCloseButtonBefore .3s ease;
			}
			&:after {
				margin-left: 3px;
				-webkit-animation: topPanelCloseButtonAfter .3s ease;
				-moz-animation: topPanelCloseButtonAfter .3s ease;
				-o-animation: topPanelCloseButtonAfter .3s ease;
				animation: topPanelCloseButtonAfter .3s ease;
			}
		}
	}
	&.lost-hover {
		span {
			background: transparent;
			.transition(~"background .3s ease-in-out .15s");
			&:before,
			&:after {
				height: @s;
				margin-left: -1px;
				.transition(~"width .3s ease-in-out, margin-left .3s ease-in-out");
			}
			&:before {
				-webkit-animation: topPanelCloseButtonBefore2 .3s ease;
				-moz-animation: topPanelCloseButtonBefore2 .3s ease;
				-o-animation: topPanelCloseButtonBefore2 .3s ease;
				animation: topPanelCloseButtonBefore2 .3s ease;
			}
			&:after {
				-webkit-animation: topPanelCloseButtonAfter2 .3s ease;
				-moz-animation: topPanelCloseButtonAfter2 .3s ease;
				-o-animation: topPanelCloseButtonAfter2 .3s ease;
				animation: topPanelCloseButtonAfter2 .3s ease;
			}
		}
	}
}
/**
 * Top inner container
 */

body.animated--body {
	#top-panel-inner {
		&.dfd-panel-animated {
			.top-panel-inner-wrapper {
				overflow: hidden;
				.transition-property(~"-webkit-transform, -moz-transform, -o-transform, transform, opacity");
				.transition-duration(1s);
				.transition-timing-function(cubic-bezier(0.7,0,0.3,1));
			}
		}
	}
	#header-container + #menu-fixer {
		.hide();
	}
	#main-wrap {
	}
	&:not(.moved) {
		#top-panel-inner {
			.rel();
			top: auto;
			bottom: auto;
			left: auto;
			right: auto;
			.top-panel-inner-wrapper {
				.opacity(1);
				.transform(translateY(0) scale(1));
			}
		}
		#header-container {
			.opacity(0);
			visibility: hidden;
			.transition(~"visibility 0s ease 0s, opacity 0s ease 0s");
		}
		#main-wrap {
			padding-top: 500px;
			.opacity(0);
			.transition(~"padding-top 1s ease 0s, opacity .5s ease 0s");
		}
	}
	&.moved {
		#top-panel-inner {
			.abs();
			top: 0;
			left: 0;
			right: 0;
			height: 0;
			.top-panel-inner-wrapper {
				.opacity(.5);
				.transform(translateY(-100%) scale(.9));
			}
		}
		#header-container {
			.opacity(1);
			visibility: visible;
			.transition(~"visibility .3s ease 1s, opacity .3s ease 1s");
		}
		#main-wrap {
			padding-top: 0;
			.opacity(1);
			.transition(~"padding-top .3s ease .7s, opacity .7s ease .7s");
		}
	}
}
#top-panel-inner {
	.absolute(1000);
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	
	&.dfd-panel-animated {
		.top-inner-page-close {
			.hide();
		}
	}
	
	.top-panel-inner-wrapper {
		.rel();
		background: @top-panel-inner-bg-option;
		.transform(translateY(-100%));
		.transition-transform(.4s linear);
		
		> div.mvb_content {
			overflow: hidden;
			max-width: 100%;
			.opacity(0);
			.transition(opacity .2s .3s linear);
		}
	}
	&.open {
		.top-panel-inner-wrapper {
			.transform(translateY(0%));
			
			&:after {
				visibility: visible;
				border-bottom: 1px solid @border-color;
			}
			> div.mvb_content {
				.opacity(1);
				.transition(opacity .2s ease-in);
			}
		}
		.top-inner-page {
			.opacity(0);
			visibility: hidden;
		}
	}
}

//body.admin-bar #top-panel-inner { top: 32px; }