body
{
	min-width: 320px; 
	font-weight: 400;
	color: #fff;
	opacity: 0;

	-webkit-tap-highlight-color: rgba(0,0,0,0);

	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	transition: opacity .5s;
}

body, p, input, textarea
{
	font-family: "lft-etica",sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

::selection
{
    background: rgba(0,0,0,.05);
}

.remove-selection, .remove-selection *
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul
{
	list-style-type: none;
}

input:focus, textarea:focus, select:focus, a, a:active, a:focus
{
	outline: none;
}


#preloader
{
	display: none;
}


/* Menu */

#header
{
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	min-width: 320px;
	width: 100%;
	height: 100px;
	background-color: rgba(255,255,255,0);
	z-index: 99;

	-webkit-transition: background-color .1s, height .2s;
	-moz-transition: background-color .1s, height .2s;
	transition: background-color .1s, height .2s;
}

body.menu-scroll #header
{
	height: 60px;
	background-color: rgba(255,255,255,1);

	-webkit-transition: background-color .3s, height .2s;
	-moz-transition: background-color .3s, height .2s;
	transition: background-color .3s, height .2s;

    -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
}

	#header-logo
	{
		position: fixed;
		left: 20px;
		top: 20px;
		padding: 10px;
		width: 151px;
		height: 54px;
		cursor: pointer;
		z-index: 100;

		-webkit-transition: left .2s, top .2s, opacity .2s;
		-moz-transition: left .2s, top .2s, opacity .2s;
		transition: left .2s, top .2s, opacity .2s;
	}

	body.menu-scroll #header-logo
	{
		left: 5px;
		top: 2px;
	}

		#header-logo path
		{
			fill: #fff;

			-webkit-transition: all .3s;
			-moz-transition: all .3s;
			transition: all .3s;
		}

		body.menu-scroll #header-logo path { fill: #453483; }
		body.menu-scroll[data-cat="1"] #header-logo path { fill: #ff6969; }
		body.menu-scroll[data-cat="2"] #header-logo path { fill: #453483; }
		body.menu-scroll[data-cat="3"] #header-logo path { fill: #eebe4c; }
		body.menu-scroll[data-cat="4"] #header-logo path { fill: #0cb889; }

	#header-right
	{
		position: fixed;
		top: 35px;
		right: 20px;
		z-index: 100;

		-webkit-transition: right .3s, top .3s, color .3s;
		-moz-transition: right .3s, top .3s, color .3s;
		transition: right .3s, top .3s, color .3s;
	}

		#header-right-submenu
		{
			float: left;
			margin-top: -5px;
			padding: 10px;
			cursor: pointer;
		}

			#header-right-submenu-text
			{
				float: left;
				margin-right: 15px;

				font-weight: 800;
				font-size: 13px;
				text-transform: uppercase;
				letter-spacing: .2px;
			}

			#header-right-submenu-right
			{
				float: left;
				margin-top: -4px;
			}

				.header-right-submenu-right
				{
					margin: 2px 0px 3px;
					width: 4px;
					height: 4px;
					background-color: #fff;

					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;

					-webkit-transition: background-color .3s;
					-moz-transition: background-color .3s;
					transition: background-color .3s;
				}

				body.menu-scroll .header-right-submenu-right { background-color: #453483; }
				body.menu-scroll[data-cat="1"] .header-right-submenu-right { background-color: #ff6969; }
				body.menu-scroll[data-cat="2"] .header-right-submenu-right { background-color: #453483; }
				body.menu-scroll[data-cat="3"] .header-right-submenu-right { background-color: #eebe4c; }
				body.menu-scroll[data-cat="4"] .header-right-submenu-right { background-color: #0cb889; }

				body.menu-scroll[data-cat="1"] .header-right-submenu-back1, body.menu-scroll[data-cat="1"] .header-right-submenu-back2, body.menu-scroll[data-cat="1"] .header-right-submenu-back3 { background-color: #ff6969; }
				body.menu-scroll[data-cat="2"] .header-right-submenu-back1, body.menu-scroll[data-cat="2"] .header-right-submenu-back2, body.menu-scroll[data-cat="2"] .header-right-submenu-back3 { background-color: #453483; }
				body.menu-scroll[data-cat="3"] .header-right-submenu-back1, body.menu-scroll[data-cat="3"] .header-right-submenu-back2, body.menu-scroll[data-cat="3"] .header-right-submenu-back3 { background-color: #eebe4c; }
				body.menu-scroll[data-cat="4"] .header-right-submenu-back1, body.menu-scroll[data-cat="4"] .header-right-submenu-back2, body.menu-scroll[data-cat="4"] .header-right-submenu-back3 { background-color: #0cb889; }


	body.menu-scroll #header-right
	{
		top: 18px;
		right: 3px;
	}

	body.menu-scroll #header-right { color: #453483; }
	body.menu-scroll[data-cat="1"] #header-right { color: #ff6969; }
	body.menu-scroll[data-cat="2"] #header-right { color: #453483; }
	body.menu-scroll[data-cat="3"] #header-right { color: #eebe4c; }
	body.menu-scroll[data-cat="4"] #header-right { color: #0cb889; }

		.header-right-each
		{
			float: left;
			padding: 5px;
			cursor: pointer;
		}

		#header-right-each-instagram, #header-right-each-facebook, #header-right-each-vimeo
		{
			-webkit-transition: opacity .3s;
			-moz-transition: opacity .3s;
			transition: opacity .3s;
		}

		#header-right-each-facebook
		{
			padding: 1px 3px 5px;
		}

		#header-right-each-vimeo
		{
			padding-top: 2px;
		}

			.header-right-each i.icon-facebook
			{
				font-size: 21px;
			}

			.header-right-each i.icon-vimeo
			{
				font-size: 20px;
			}

			/*.header-right-each i.icon-instagram
			{
				font-size: 19px;
			}*/

		#header-menu-button
		{
			position: relative;
			float: left;
			padding: 10px;
			margin: -8px 6px 0px 35px;
			cursor: pointer;
		}

			html.menu-mobile-open #header-menu-button
			{
				pointer-events: none;
			}

			#header-menu-button:after
			{
				position: absolute;
				left: -18px;
				top: 4px;
				content: '';
				border-right: 1px solid rgba(255,255,255,.5);
				height: 31px;

				-webkit-transition: border-right-color .3s;
				-moz-transition: border-right-color .3s;
				transition: border-right-color .3s;
			}

			body.menu-scroll #header-menu-button:after { border-right-color: rgba(69,52,131,.5); }
			body.menu-scroll[data-cat="1"] #header-menu-button:after, body.menu-scroll[data-cat="1"] #header-right-submenu-back:after { border-color: rgba(255,105,105,.5); }
			body.menu-scroll[data-cat="2"] #header-menu-button:after, body.menu-scroll[data-cat="2"] #header-right-submenu-back:after { border-color: rgba(69,52,131,.5); }
			body.menu-scroll[data-cat="3"] #header-menu-button:after, body.menu-scroll[data-cat="3"] #header-right-submenu-back:after { border-color: rgba(238,190,76,.5); }
			body.menu-scroll[data-cat="4"] #header-menu-button:after, body.menu-scroll[data-cat="4"] #header-right-submenu-back:after { border-color: rgba(12,184,137,.5); }

			#header-menu-button-text
			{
				float: left;
				margin-top: 3px;
				margin-right: 17px;

				font-weight: 700;
				font-size: 13px;
			}

			#header-menu-button-right
			{
				float: left;
			}

				.header-menu-button-each
				{
					margin-bottom: 4px;
					width: 23px;
					height: 4px;
					background-color: #fff;

					-webkit-transition: background-color .3s;
					-moz-transition: background-color .3s;
					transition: background-color .3s;
				}

				body.menu-scroll .header-menu-button-each { background-color: #453483; }
				body.menu-scroll[data-cat="1"] .header-menu-button-each { background-color: #ff6969; }
				body.menu-scroll[data-cat="2"] .header-menu-button-each { background-color: #453483; }
				body.menu-scroll[data-cat="3"] .header-menu-button-each { background-color: #eebe4c; }
				body.menu-scroll[data-cat="4"] .header-menu-button-each { background-color: #0cb889; }

#menu
{
	position: fixed;
	display: none;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	cursor: default;
	z-index: 100;
}

	#menu-inside
	{
		position: absolute;
		 overflow: visible;
		white-space: nowrap;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
	}

		.menu-each
		{
			position: relative;
			display: inline-block;
			vertical-align: top;
			overflow: hidden;
			width: 20%;
			height: 100%;

			-webkit-transition: width .3s;
			-moz-transition: width .3s;
			transition: width .3s;
		}


		#menu.close-menu .menu-each
		{
			vertical-align: bottom;
		}

		#menu-each1 
		{
			background-color: #ffffff; 
			color: #463582; 
		}
		
		#menu-each2 
		{ 
			background-color: #ff6969; 
		}
		
		#menu-each3 
		{ 
			background-color: #463582; 
		}
		
		#menu-each4 
		{ 
			background-color: #eebe4c; 
		}
		
		#menu-each5, #menu-each-aux
		{
			background-color: #0cb889; 
		}

			#menu-logo
			{
				position: absolute;
				left: 20px;
				top: 20px;
				padding: 10px;
				width: 61px;
				height: 54px;
				cursor: pointer;

				-webkit-transition: left .2s, top .2s, opacity .2s;
				-moz-transition: left .2s, top .2s, opacity .2s;
				transition: left .2s, top .2s, opacity .2s;
			}

			#menu.close-menu #menu-logo
			{
				top: auto;
			}

			body.menu-scroll #menu-logo
			{
		    	left: 5px;
				top: 2px;
			}

			#menu-close
			{
				position: fixed;
				top: 28px;
				margin-top: 0px;
				right: 28px;
				width: 40px;
				height: 40px;
				padding: 10px;
				cursor: pointer;

				-webkit-transition: right .2s, margin-top .2s, opacity .2s;
				-moz-transition: right .2s, margin-top .2s, opacity .2s;
				transition: right .2s, margin-top .2s, opacity .2s;
			}

			#menu.close-menu #menu-close
			{
				position: absolute;
				top: auto;
			}

			body.menu-scroll #menu-close
			{
				margin-top: -17px;
				right: 11px;
			}

				.menu-close-each
				{
					position: absolute;
					left: 8px;
					width: 32px;
					height: 4px;
					background-color: #443b64;

					-webkit-transform-origin: 0% 50%;
					-moz-transform-origin: 0% 50%;
					transform-origin: 0% 50%;
				}

				.menu-close-each:nth-child(1)
				{
					top: 7px;

					-webkit-transform: rotate(45deg);
					-moz-transform: rotate(45deg);
					transform: rotate(45deg);
				}

				.menu-close-each:nth-child(2)
				{
					top: 29px;

					-webkit-transform: rotate(-45deg);
					-moz-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}

			.menu-each-title
			{
				position: absolute;
				left: 0px;
				top: 50%;
				right: 0px;
				overflow: hidden;
				margin-top: -70px;

				text-align: center;
				letter-spacing: .2px;
			}

				.menu-each-title-text
				{
					margin-top: 14px;

					font-weight: 800;
					font-size: 28px;
				}

			.menu-each-line
			{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -32px;
				margin-top: -57px;
				width: 64px;
				border-bottom: 3px solid #fff;
				opacity: 0;
			}

			#menu-each1 .menu-each-line
			{
				border-color: #463582;
			}


			.menu-each-middle
			{
				position: absolute;
				left: 0px;
				right: 0px;
				top: 50%;
				margin-top: -30px;

				font-weight: 200;
				font-size: 20px;
				letter-spacing: .2px;
				text-align: center;
			}
				.menu-each-middle-link
				{
					margin-bottom: 20px;
					opacity: 0;
				}



 /*Page */

#container
{	
	display: none;
	min-height: 640px;
}

.page-each
{
	position: relative;
	overflow: hidden;
	width: 100%;
}

	.page-each-inside
	{
		margin: 0 auto;
		overflow: hidden;
		width: 100%;
		max-width: 1300px;
	}

		.page-elements
		{
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%; 
			height: 100%; 
			pointer-events: none;
		}

			@-webkit-keyframes page-elements-rotation-animation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
			@-moz-keyframes page-elements-rotation-animation { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } }
			@keyframes page-elements-rotation-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

			@-webkit-keyframes page-elements-rotation-animation2 { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); } }
			@-moz-keyframes page-elements-rotation-animation2 { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); } }
			@keyframes page-elements-rotation-animation2 { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

			.page-elements-each-inside
			{
				-webkit-animation: page-elements-rotation-animation 20s linear infinite;
				-moz-animation: page-elements-rotation-animation 20s linear infinite;
				animation: page-elements-rotation-animation 20s linear infinite;
			}

			.page-elements-each.stroke .page-elements-each-inside,
			.page-elements-each.stroke2 .page-elements-each-inside
			{
				-webkit-animation: page-elements-rotation-animation2 20s linear infinite;
				-moz-animation: page-elements-rotation-animation2 20s linear infinite;
				animation: page-elements-rotation-animation2 20s linear infinite;
			}

				.page-elements-each img
				{
					-webkit-transform: scale(0);
					-moz-transform: scale(0);
					transform: scale(0);

					-webkit-transition: -webkit-transform .3s;
					-moz-transition: -moz-transform .3s;
					transition: transform .3s;
				}

	#page-explore
	{
		position: absolute;
		left: 50%;
		bottom: 20px;
		width: 52px;
		height: 52px;	
		margin-left: -26px;
		z-index: 1;
		cursor: pointer;
	}
					
		.page-arrow
		{
			position: relative;
			width: 52px;
			height: 52px;
			background-color: #fff;
			cursor: pointer;

			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}

		.page-arrow.shadow .page-arrow-bg
		{
			-webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.25);
			-moz-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.25);
			box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.25);
		}

		.page-arrow.left
		{
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		.page-arrow.right
		{
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}

		.page-arrow.top
		{
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			transform: rotate(180deg);
		}

			.page-arrow-bg
			{
				display: none;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 68px;
				height: 68px;
				margin-left: -34px;
				margin-top: -34px;
				background-color: #fff;

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;

				-webkit-transform: scale(.75);
				-moz-transform: scale(.75);
				transform: scale(.75);
			}
		
			.page-arrow-line1
			{
				position: absolute;
				left: 25px;
				top: 13px;
				width: 3px;
				height: 26px;
				background-color: #392779;
			}

			.page-arrow-line2, .page-arrow-line3
			{
				position: absolute;
				width: 13px;
				height: 3px;
				background-color: #392779;

				-webkit-transform-origin: 100% 50%;
				-moz-transform-origin: 100% 50%;
				transform-origin: 100% 50%;
			}

			.page-arrow-line2
			{
				left: 22px;
				top: 28px;

				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				transform: rotate(-45deg);
			}

			.page-arrow-line3
			{
				left: 14px;
				top: 37px;

				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				transform: rotate(45deg);
			}


		.page-circle-plus
		{
			position: relative;
			width: 26px;
			height: 26px;
			border: 3px solid #fff;

			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
		}

		.page-circle-plus.blue
		{
			border-color: #392779;
		}

			.page-circle-plus-line
			{
				position: absolute;
				background-color: #fff;
			}

			.page-circle-plus.blue .page-circle-plus-line
			{
				background-color: #392779;
			}

			#page-circle-plus-line1
			{
				left: 9px;
				top: 5px;
				width: 2px;
				height: 10px;
			}

			#page-circle-plus-line2
			{
				left: 5px;
				top: 9px;
				width: 10px;
				height: 2px;
			}

.page-category-menu
{
	display: none;
	position: fixed;
	top: 90px;
	right: 35px;
	background-color: #fff;
	z-index: 100;

	-webkit-box-shadow: 3px 5px 16px 0px rgba(0, 0, 0, 0.43);
	-moz-box-shadow: 3px 5px 16px 0px rgba(0, 0, 0, 0.43);
	box-shadow: 3px 5px 16px 0px rgba(0, 0, 0, 0.43);
}

	.page-category-menu:after
	{
		content: '';
		position: absolute;
		width: 15px;
		height: 15px;
		top: -8px;
		right: 128px;
		background-color: #fff;

		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);

		-webkit-transition: right .3s;
		-moz-transition: right .3s;
		transition: right .3s;
	}

	body.menu-scroll .page-category-menu:after
	{
		right: 111px;
	}

	.page-category-menu-each
	{
		position: relative;
		float: left;
		width: 307px;
		height: 360px;
		text-align: center;
	}

		.page-category-menu-each:before
		{
			content: '';
			position: absolute;
			left: 0px;
			top: 30px;
			bottom: 30px;
			border-left: 1px solid #e3e3e3;
		}

		.page-category-menu a:nth-child(1) .page-category-menu-each:before
		{
			content: '';
			display: none;
		}

			.page-category-menu-each-border
			{
				position: absolute;
				left: 50%;
				top: 58px;
				width: 122px;
				height: 122px;
				margin-left: -61px;

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;

				-webkit-transform: scale(.3);
				-moz-transform: scale(.3);
				transform: scale(.3);

				-webkit-transition: -webkit-transform .3s cubic-bezier(0.600, 0, 0.735, 0.045);
				-webkit-transition: -webkit-transform .3s cubic-bezier(0.600, -0.280, 0.735, 0.045); 
				-moz-transition: -webkit-transform .3s cubic-bezier(0.600, -0.280, 0.735, 0.045); 
				transition: -webkit-transform .3s cubic-bezier(0.600, -0.280, 0.735, 0.045); /* easeInBack */
			}

			.page-category-menu-each:hover .page-category-menu-each-border
			{
				-webkit-transform: scale(1);
				-moz-transform: scale(1);
				transform: scale(1);

				-webkit-transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.320, 1);
				-webkit-transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.320, 1.275); 
				-moz-transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.320, 1.275); 
				transition: -webkit-transform .3s cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
			}

			.page-category-menu-each-image
			{
				position: relative;
				margin: 66px auto 22px;
				width: 106px;
				height: 106px;
				overflow: hidden;

				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
			}

				.page-category-menu-each-image-inside
				{
					position: relative;
					width: 100%;
					height: 100%;
					opacity: 0;

					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;

					-webkit-transition: opacity .3s;
					-moz-transition: opacity .3s;
					transition: opacity .3s;
				}

				.page-category-menu-each:hover .page-category-menu-each-image-inside
				{
					opacity: 1;
				}

			.page-category-menu-each-header
			{
				font-size: 15px;
			}

			.page-category-menu-each-text
			{
				margin-top: 6px;

				font-weight: 800;
				font-size: 25px;
			}
	
	#page-back-to-top
	{
		position: fixed;
		right: 17px;
		bottom: 17px;
		opacity: 0;
		pointer-events: none;

		-webkit-transition: opacity .3s;
		-moz-transition: opacity .3s;
		transition: opacity .3s;
	}

	#page-back-to-top.show
	{
		opacity: 1;
		pointer-events: auto;
	}

		#page-back-to-top.page-arrow
		{
			background-color: rgba(0,0,0,.2);

			-webkit-transition: background-color .25s;
			-moz-transition: background-color .25s;
			transition: background-color .25s;
		}

			#page-back-to-top .page-arrow-line
			{
				background-color: #fff;
			}

			#page-back-to-top .page-arrow-line1 { left: 24px; }
			#page-back-to-top .page-arrow-line2 { left: 21px; }
			#page-back-to-top .page-arrow-line3 { left: 13px; }


#footer
{
	padding: 46px 37px;
	height: 106px;
	background-color: #fff;

	font-size: 13px;
	letter-spacing: .2px;
	color: #222;
}

	#footer-left
	{
		float: left;
	}

		#footer-left:after
		{
			content: ' . Todos os direitos reservados';
		}

	#footer-right
	{
		float: right;
	}

	#footer-right-pianofuzz
	{
		float: right;
		margin-left: 20px;
		margin-top: -20px;
		margin-right: -10px;
		width: 42px;
		height: 50px;
		background: url('../img/pianofuzz.png') center no-repeat;
		background-size: 22px 30px;
	}

	#footer-right-pianofuzz.black
	{
		background-image: url('../img/pianofuzz-black.png')
	}

#menu-mobile
{
	display: none;
}

@media screen and (max-width: 1675px)
{
	.menu-each-title-text
	{
		font-size: 22px;	
	}
}

@media screen and (max-width: 1620px)
{
	.page-category-menu-each
	{
		width: 237px;
		height: 290px;
	}
		.page-category-menu-each-border
		{
			top: 28px;
		}

		.page-category-menu-each-image
		{
			margin-top: 36px;
		}

		.page-category-menu-each-text
		{
			font-size: 23px;
		}
}

@media screen and (max-width: 1300px)
{
	.menu-each-middle
	{
		font-size: 18px;
	}

	.menu-each-title-text
	{
		font-size: 17px;	
	}
}

@media screen and (max-width: 1268px)
{
	.page-category-menu-each
	{
		width: 188px;
		height: 280px;
	}

		.page-category-menu-each-header
		{
			font-size: 13px;
		}

		.page-category-menu-each-text
		{
			font-size: 21px;
		}
}

@media screen and (min-width: 1025px)
{
	#header-menu-button-text, #header-menu-button-right, #header-right-submenu, #header-right-submenu-back-inside
	{
		-webkit-transition: opacity .3s;
		-moz-transition: opacity .3s;
		transition: opacity .3s;
	}

	#header-logo:hover, .header-right-each:hover, #header-menu-button:hover #header-menu-button-text, #header-menu-button:hover #header-menu-button-right, 
	#menu-logo:hover, #menu-close:hover, #header-right-submenu:hover, #header-right-submenu-back:hover #header-right-submenu-back-inside
	{
		opacity: .5;
	}

	.page-arrow, .page-arrow-bg
	{
		display: block;

		-webkit-transition: -webkit-transform .2s, background-color .2s;
		-moz-transition: -moz-transform .2s, background-color .2s; 
		transition: transform .2s, background-color .2s;
	}

	.page-arrow:hover .page-arrow-bg
	{
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		transform: scale(1);
	}

	#page-back-to-top:hover
	{
		background-color: rgba(0,0,0,.5);
	}
}

@media screen and (max-width: 1024px)
{
	#header
	{
		position: fixed !important;
		height: 60px;
		background-color: rgba(255,255,255,1);

	    -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
	    -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
	    box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.15);
	}

		#header-logo
		{
			left: 5px;
			top: 2px;
		}

			#header-logo path { fill: #453483; }
			body[data-cat="1"] #header-logo path { fill: #ff6969; }
			body[data-cat="2"] #header-logo path { fill: #453483; }
			body[data-cat="3"] #header-logo path { fill: #eebe4c; }
			body[data-cat="4"] #header-logo path { fill: #0cb889; }

				.header-right-submenu-right { background-color: #453483; }
				body[data-cat="1"] .header-right-submenu-right { background-color: #ff6969; }
				body[data-cat="2"] .header-right-submenu-right { background-color: #453483; }
				body[data-cat="3"] .header-right-submenu-right { background-color: #eebe4c; }
				body[data-cat="4"] .header-right-submenu-right { background-color: #0cb889; }

		#header-right
		{
			top: 18px;
			right: 3px;
			color: #453483;
		}

		body[data-cat="1"] #header-right { color: #ff6969; }
		body[data-cat="2"] #header-right { color: #453483; }
		body[data-cat="3"] #header-right { color: #eebe4c; }
		body[data-cat="4"] #header-right { color: #0cb889; }

			#header-menu-button:after
			{
				border-right-color: rgba(69,52,131,.5);
			}

			body[data-cat="1"] #header-menu-button:after { border-color: rgba(255,105,105,.5); }
			body[data-cat="2"] #header-menu-button:after { border-color: rgba(69,52,131,.5); }
			body[data-cat="3"] #header-menu-button:after { border-color: rgba(238,190,76,.5); }
			body[data-cat="4"] #header-menu-button:after { border-color: rgba(12,184,137,.5); }

				.header-menu-button-each
				{
					background-color: #453483;
				}

				body[data-cat="1"] .header-menu-button-each { background-color: #ff6969; }
				body[data-cat="2"] .header-menu-button-each { background-color: #453483; }
				body[data-cat="3"] .header-menu-button-each { background-color: #eebe4c; }
				body[data-cat="4"] .header-menu-button-each { background-color: #0cb889; }


			#menu-logo
			{
		    	left: 5px;
				top: 2px;
			}

			#menu-close
			{
				margin-top: -17px;
				right: 11px;
			}

	html.menu-mobile-open
	{
		height: 100%;
	}

		html.menu-mobile-open body
		{
			overflow-y: hidden;
		}

			html.menu-mobile-open #container
			{
				min-height: 0px;
				height: 100%;
			}

				html.menu-mobile-open #header-right-each-facebook, 
				html.menu-mobile-open #header-right-each-vimeo
				{
					opacity: 0;
				}

				html.menu-mobile-open #header-menu-button
				{
					pointer-events: auto;
				}

				#header-right-submenu
				{
					display: none;
				}

					html.menu-mobile-open #header-menu-button:after
					{
						border-right: 1px solid rgba(255,255,255,.5);
					}

					.menu-mobile-open #header-menu-button-text
					{
						opacity: 0;
					}

				#menu
				{
					display: none !important;
				}

				#menu-mobile
				{
					display: none;
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					overflow-x: hidden;
					overflow-y: scroll;
					z-index: 98;
					text-align: center;
				}

					#menu-mobile-inside
					{
						position: relative;
					}

						.menu-mobile
						{
							position: relative;
							width: 100%;
							padding: 32px 27px 52px;
						}

						#menu-mobile1 
						{
							padding-top: 100px;
							background-color: #ffffff;

							color: #463582; 
						}
						
						#menu-mobile2 
						{ 
							background-color: #ff6969; 
						}
						
						#menu-mobile3 
						{ 
							background-color: #463582; 
						}
						
						#menu-mobile4 
						{ 
							background-color: #eebe4c; 
						}
						
						#menu-mobile5
						{
							background-color: #0cb889; 
						}

							.menu-mobile-title
							{
								margin-bottom: 20px;

								font-weight: 800;
								font-size: 16px;
								letter-spacing: .2px;
							}

							.menu-mobile-middle
							{
								
							}

								.menu-mobile-each
								{
									font-weight: 200;
									font-size: 25px;
									margin: 3px 0px;
								}

	.page-category-menu
	{
		display: none !important;
	}
}

@media screen and (min-width: 769px)
{
	.menu-each.hover { width: 30%; }
	.menu-each.not-hover { width: 17.5%; }

	.menu-each-bg
	{
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		background-position: center;
		background-size: cover;
		opacity: 0;

		-webkit-transition: opacity .2s;
		-moz-transition: opacity .2s;
		transition: opacity .2s;
	}

	.menu-each.hover .menu-each-bg { opacity: 1; }
		
		#menu-each1 .menu-each-bg { background-image: url('/img/menu-bg-1.jpg'); }
		#menu-each2 .menu-each-bg { background-image: url('/img/menu-bg-2.jpg'); }
		#menu-each3 .menu-each-bg { background-image: url('/img/menu-bg-3.jpg'); }
		#menu-each4 .menu-each-bg { background-image: url('/img/menu-bg-4.jpg'); }
		#menu-each5 .menu-each-bg { background-image: url('/img/menu-bg-5.jpg'); }
}

@media screen and (max-width: 980px)
{
	#footer-right
	{
		display: none;
	}

	#footer-left
	{
		display: table;
		float: none;
		margin: 0 auto;
	}
}

@media screen and (max-width: 768px)
{
	#container
	{
		min-height: 460px;
	}

	#page-explore
	{
		margin-left: -14px;
		width: 28px !important;
		height: 28px !important;
	}

		.page-arrow
		{
			width: 28px;
			height: 28px;
			border: 3px solid #fff;
			background-color: transparent;
		}

			.page-arrow-line
			{
				background-color: #fff;
			}

			.page-arrow-line2, .page-arrow-line3
			{
				width: 8px;
				height: 2px;
			}

			.page-arrow-line1
			{
				width: 2px;
				height: 16px;
				left: 10px;
				top: -2px;
			}

			.page-arrow-line2
			{
				top: 9px;
				left: 8px;
			}

			.page-arrow-line3
			{
				top: 14px;
				left: 3px;
			}

			#page-back-to-top
			{
				float: right;
				position: relative;
				right: auto;
				bottom: auto;
				margin-top: -67px;
				margin-right: 20px;
				opacity: 1;
				pointer-events: auto;
			}

			#page-back-to-top .page-arrow-line1 { left: 10px; }
			#page-back-to-top .page-arrow-line2 { left: 8px; }
			#page-back-to-top .page-arrow-line3 { left: 3px; }

	#footer-left
	{
		font-size: 12px;
	}

		#footer-left:after
		{
			content: '';
		}
}

@media screen and (max-width: 520px)
{
	#header-menu-button-text
	{
		display: none;
	}

	#header-logo svg path:not(:last-child) 
	{
		display: none;
	}
}