@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600,700);

body
{
	width: 100%;
	min-width: 1024px;
	min-height: 670px;
	height: 100%;
	overflow-y: hidden;

	font-family: 'Titillium Web', sans-serif;
	-webkit-tap-highlight-color: rgba(0,0,0,0);

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

body, p
{
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}


#logo
{
	position: fixed;
	top: 33px;
	width: 92px;
	height: 25px;
	margin-left: -46px;
	background-image: url('/content/img/logo.svg');
	z-index: 2;
}

#menu-left
{
	position: fixed;
	left: -50px;
	top: 50%;
	margin-top: -110px;
	height: 220px;
	pointer-events: none;
	z-index: 2;
}

	.menu-left-each
	{
		width: 32px;
		height: 32px;
		background-color: rgba(0,0,0,.1);
		margin-bottom: 30px;
		padding: 8px 6px;
		cursor: pointer;

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

	#menu-left-facebook
	{
		padding-left: 5px;
	}

		.menu-left-each i
		{
			font-size: 15px;
			color: #fff;
		}



#menu-button
{
	position: fixed;
	left: -66px;
	top: 15px;
	width: 56px;
	height: 47px;
	background-color: rgba(0,0,0,.1);
	cursor: pointer;
	z-index: 10;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

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

#menu-button.hover
{
	background-color: rgba(0,0,0,0);
}
	
	#menu-button-line1, #menu-button-line2, #menu-button-line3
	{
		position: absolute;
		left: 15px;
		top: 13px;
		width: 27px;
		height: 4px;
		background-color: #fff;

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

	#menu-button-line2
	{
		top: 21px;
	}

	#menu-button-line3
	{
		top: 29px;
	}


	#menu-button.hover #menu-button-line1,
	#menu-button.hover #menu-button-line2,
	#menu-button.hover #menu-button-line3
	{
		-webkit-transition: -webkit-transform .2s .2s, top .2s, background-color .3s;
		-moz-transition: -moz-transform .2s .2s, top .2s, background-color .3s;
		transition: transform .2s .2s, top .2s, background-color .3s;
	}

	#menu-button.hover #menu-button-line1,
	#menu-button.hover #menu-button-line3
	{
		top: 21px;

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

	#menu-button.hover #menu-button-line2
	{
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(4-5deg);
	}


#menu
{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	background-color: #1b1b1b;
	z-index: 10;
	display: none;
}

	#menu-bg
	{
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		opacity: .06;
	}

		#menu-bg #menu-bg-video
		{
			position: absolute;
		}


	#menu-top
	{
		position: absolute;
		top: 15%;
		left: 50%;
		width: 840px;
		height: 94px;
		margin-left: -420px;
		margin-top: -47px;
		opacity: 0;

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

	#menu.open #menu-top
	{
		opacity: 1;

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

		.menu-top-each, #menu-top-social
		{
			display: table-cell;
			float: left;
			margin: 20px;
			padding: 15px;

			font-size: 20px;
			letter-spacing: .25px;
			color: #fff;
		}

			.menu-top-social-each
			{
				margin: 0px 5px;
				float: left;
			}

	#menu-center
	{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 1280px;
		margin-left: -640px;
		margin-top: -240px;
	}

		.menu-center-button
		{
			position: relative;
			float: left;
			margin: 10px;
			width: 300px;
			height: 197px;
			background-color: #1b1b1b;
			cursor: pointer;
			opacity: 0;

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

			.menu-center-button-bg
			{
				position: absolute;
				top: 0px;
				right: 0px;
				bottom: 0px;
				left: 0px;
				opacity: .25;

				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				filter: grayscale(100%);

				background-size: 100% 100%;
			}

			#menu-center-button1 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-01.jpg'); }
			#menu-center-button2 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-02.jpg'); }
			#menu-center-button3 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-03.jpg'); }
			#menu-center-button4 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-04.jpg'); }
			#menu-center-button5 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-05.jpg'); }
			#menu-center-button6 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-06.jpg'); }
			#menu-center-button7 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-07.jpg'); }
			#menu-center-button8 .menu-center-button-bg { background-image: url('/content/img/menu/menu-center-button-08.jpg'); }

			.menu-center-button-line1, .menu-center-button-line2, .menu-center-button-line3, .menu-center-button-line4
			{
				position: absolute;
				opacity: 0;
			}

			.menu-center-button-line1
			{
				top: 15px;
				right: 15px;
				bottom: 15px;
				left: 15px;
				border-top: 1px solid #fff;
			}

			.menu-center-button-line2
			{
				top: 15px;
				right: 15px;
				bottom: 15px;
				border-right: 1px solid #fff;
			}

			.menu-center-button-line3
			{
				right: 15px;
				bottom: 15px;
				left: 15px;
				border-bottom: 1px solid #fff;
			}

			.menu-center-button-line4
			{
				top: 15px;
				bottom: 15px;
				left: 15px;
				border-left: 1px solid #fff;
			}

			.menu-center-button-play
			{
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -11px;
				margin-left: -8px;

				width: 0;
				height: 0;
				border-style: solid;
				border-width: 11px 0 11px 16px;
				border-color: transparent transparent transparent #979797;
			}


			.menu-center-button-text1, .menu-center-button-text2
			{
				position: absolute;
				top: 50%;
				left: 0px;
				right: 0px;
				margin-top: -35px;
				opacity: 0;

				-webkit-transform: translateY(20px);
				-moz-transform: translateY(20px);
				transform: translateY(20px);

				font-weight: 300;
				font-size: 22px;
				letter-spacing: .25px;
				text-align: center;
				line-height: 150%;
				color: #fff;
			}

			.menu-center-button-text2
			{
				margin-top: 0px;

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


	#menu-center-button1
	{
		-webkit-transition-delay: .4s;
		-moz-transition-delay: .4s;
		transition-delay: .4s;
	}

	#menu-center-button2, #menu-center-button5
	{
		-webkit-transition-delay: .5s;
		-moz-transition-delay: .5s;
		transition-delay: .5s;
	}

	#menu-center-button3, #menu-center-button6
	{
		-webkit-transition-delay: .6s;
		-moz-transition-delay: .6s;
		transition-delay: .6s;
	}

	#menu-center-button4, #menu-center-button7
	{
		-webkit-transition-delay: .7s;
		-moz-transition-delay: .7s;
		transition-delay: .7s;
	}

	#menu-center-button8
	{
		-webkit-transition-delay: .8s;
		-moz-transition-delay: .8s;
		transition-delay: .8s;
	}


	#menu.open .menu-center-button
	{
		opacity: 1;
	}



	#menu-top-bottom
	{
		position: absolute;
		bottom: 12%;
		left: 50%;
		width: 650px;
		height: 90px;
		margin-left: -325px;
		margin-top: -45px;
		opacity: 0;

		font-weight: 200;
		font-size: 50px;
		letter-spacing: .4px;
		text-align: center;
		line-height: 100%;
		color: rgba(255,255,255,.5);

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

	#menu.open #menu-top-bottom
	{
		opacity: 1;

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

		#menu-top-bottom span
		{
			font-weight: 700;
			font-size: 13px;
			letter-spacing: .25px;
		}



	#menu-bottom-left
	{
		position: absolute;
		left: 20px;
		bottom: 22px;
	}

		#menu-bottom-left-logo
		{
			float: left;
			width: 82px;
			height: 39px;
			background: url('../content/img/menu/logo-hd.png') 50% 50% / cover;
		}

		

		#menu-bottom-left-text
		{
			float: left;
			opacity: .5;

			font-weight: 700;
			letter-spacing: .25px;
			font-size: 12px;
			color: #fff;
		}

			#menu-bottom-left-text span
			{
				float: left;
				margin-top: 13px;
			}

			#menu-bottom-left-text .menu-bottom-left-text-copy
			{
				margin-left: 18px;
				margin-top: 7px;
				margin-right: 3px;

				font-weight: 300;
				font-size: 25px;
			}

	#menu-bottom-right
	{
		position: absolute;
		right: 20px;
		bottom: 20px;
	}

		#menu-bottom-right-creative-supply
		{
			float: left;
			width: 158px;
			height: 38px;
			padding: 10px;
			margin-right: 7px;
			margin-top: 9px;
			background: url('../content/img/menu/logo-creative-supply.png') no-repeat 50% 50% / 138px 18px;
			opacity: .5;
		}

		#menu-bottom-right-bloquo
		{
			float: left;
			width: 43px;
			height: 51px;
			padding: 10px;
			background: url('../content/img/menu/logo-bloquo.png') no-repeat 50% 50% / 23px 31px;
			opacity: .5;
		}



	#menu-right
	{
		position: fixed;
		top: 50%;
		margin-top: -200px;
		height: 360px;
		margin-left: 90px;
		pointer-events: none;
		z-index: 2;
	}
	
		#menu-right-buttons
		{
			position: absolute;
			top: 75px;
			right: 10px;
		}

			#menu-right-buttons-bg
			{
				position: absolute;
				top: -5px;
				right: 0px;
				width: 34px;
				height: 272px;
				background-color: rgba(0,0,0,.1);

				-webkit-border-radius: 25px;
				-moz-border-radius: 25px;
				border-radius: 25px;
			}

			.menu-right-buttons-each
			{
				position: relative;
				float: right;
				height: 34px;
				padding: 10px 52px 10px 22px;
				margin-bottom: 4px;
				background-color: rgba(0,0,0,0);
				cursor: pointer;

				-webkit-border-radius: 25px;
				-moz-border-radius: 25px;
				border-radius: 25px;
			}

				.menu-right-buttons-each p
				{
					font-weight: 700;
					font-size: 12px;
					letter-spacing: .25px;
					text-align: right;
					white-space: nowrap;
					opacity: 0;
					color: rgba(255,255,255,1);
				}

				.menu-right-buttons-each-ball
				{
					position: absolute;
					right: 14px;
					top: 13px;
					border: 3px solid #fff;

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

				.menu-right-buttons-each.selected .menu-right-buttons-each-ball
				{
					right: 10px;
					top: 10px;
					width: 14px;
					height: 14px;
					border-width: 4px;
				}

@-webkit-keyframes scaleout { 0% { -webkit-transform:scale(0) } 100% { -webkit-transform: scale(1); opacity:0 } }
@-moz-keyframes scaleout { 0% { -moz-transform:scale(0) } 100% { -moz-transform: scale(1); opacity:0 } }
@keyframes scaleout { 0% { transform:scale(0) } 100% { transform: scale(1); opacity:0 } }

.image-preloader
{
	position: absolute;
    width: 32px;
    height: 32px;
    background-color: rgba(0,0,0,.5);
    opacity: 0;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: scaleout 1s infinite ease-in-out;
    -moz-animation: scaleout 1s infinite ease-in-out;
    animation: scaleout 1s infinite ease-in-out;
}

.image-preloader.show
{
	opacity: 1;
}				


#footer
{
	height: 87px;
}

	#footer #menu-bottom-left-logo
	{
		background: url('../content/img/logo-hd.png') 50% 50% / cover;
	}

	#footer #menu-bottom-left-text
	{
		color: #000;
	}

	#footer #menu-bottom-right-creative-supply
	{
		background: url('../content/img/logo-creative-supply.png') no-repeat 50% 50% / 138px 18px;
	}

	#footer #menu-bottom-right-bloquo
	{
		background: url('../content/img/logo-bloquo.png') no-repeat 50% 50% / 23px 31px;
	}




@media screen and (max-height: 835px) {
	
	#menu-top
	{
		top: 18%;
	}

	#menu-center
	{
		top: 57%;
	}

	#menu-top-bottom
	{
		display: none;
	}
}

@media screen and (max-width: 1400px), screen and (max-height: 720px) {

	#menu-top
	{
		top: 45%;
	}

	#menu-center, #menu-top-bottom
	{
		display: none;
	}	
}