html {
	height: 100%;	
	width: 100%;
	overflow:hidden;		
}

body {
	width:100%;
	height: 100%;
	display:block;
}

body:before {
	position:fixed;
	height: 100%;	
	width: 100vw;
	content:"";

	filter: grayscale(100%) brightness(45%);
}






@media only screen and (orientation:portrait){
  html {
    height: 100vw;
    width: 100vh;	

    transform: rotate(90deg);
	transform-origin:0% 0%;	
	
	position: absolute;
	left: 100%;
	
  }
  
  
body:before {
	height: 100vw;	
	width: 100vh;
}  

  
}










header
{
	position:relative;

	height:87px;
	padding-top:10px;
}
	
	header span
	{
		width: 156px;
		height: 63px;
		margin-left: 0;
		margin-right: 20px;	
				
		position:relative;
		
		display:block;
				
		text-indent:9999999999999999999px;
		white-space: nowrap;
		overflow:hidden;		
		
		background:url(../img/wpc_logo.png) top left no-repeat;
		background-size:100% auto;

		filter: grayscale(100%) contrast(0%) brightness(310%);
		float:left;
		
		z-index:3;

	}
	
	header h1
	{
		float:left;
		display:block;


		color:#fff;
		
		font-size: 24px;
		margin-top: 10px;
		line-height: 1;		
	}

		
	header h1:first-line
	{
		font-size: 14px;
		letter-spacing:7px;
		margin-top:20px;		
	}

	header h1+h1
	{
		margin-left:10px;
	}		


@media only screen and (min-width: 62em) {
	/* 992px */	
 
	header h1
	{
		font-size: 31px;
		margin-top: 10px;
		line-height: 1;		
	}

		
	header h1:first-line
	{
		font-size: 14px;
		letter-spacing:7px;
		margin-top:20px;		
	}

	header h1+h1
	{
		margin-left:5%;
	}		
 
 
}		




nav
{
	position:fixed;
	width:84px;
	height:100%;
	top:0px;
	right:0px;
	border-left:4px solid #ccc;
	background: rgba(0,0,0,0.76);
	z-index:999;
}

	nav a.nav
	{
		position:relative;
		display:block;
		width:84px;
		height:100%;
	}
	
	nav.menuon a.nav
	{
		position:absolute;
		display:block;
		width:84px;
		height:100%;
		left:-75px;
	}
	
		nav a.nav span
		{
			position:absolute;
			z-index:2;
			
			top: 142px;
			left: 27px;
			font-size:24px;			
		
			overflow:hidden;
			

			color:#fff;	
			
			transform-origin: left top;	
			
			transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			-moz-transform: rotate(-90deg);
			-o-transform: rotate(-90deg);
			-ms-transform: rotate(-90deg);		
		}
		
			nav a.nav:before
			{
				position:fixed;
				display:block;
				
				content:"+";
		
				width:34px;
				height:34px;
				top:50%;
				margin-left:22px;
				margin-top:-13px;
			
				font-size:43px;
				color:#fff;		
				line-height:25px;
				font-weight:900;
				z-index:2;
			}
			
			
			nav.menuon a.nav:before
			{
			transform-origin: center;	
			
			transform: rotate(-45deg);
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			-ms-transform: rotate(-45deg);
			}			
			
			
		nav a.nav span.open,
		nav.menuon a.nav span.close		
		{
			display:block;
		}			

		nav a.nav span.close,
		nav.menuon a.nav span.open				
		{
			display:none;
		}			

			

nav.menuon
{
	position:fixed;
	width:50%;
	height:100%;
	top:0px;
	right:0px;
	border-left:4px solid #ccc;
	background: rgba(0,0,0,0.76);
	z-index:3;	
}
	
	
header.menuon
{
	float:left;
	width:50%;	
	height:100%;
	z-index:3;

}

nav.menuon:before,
header.menuon:before
{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;	
	height:100%;
	display:block;
	

	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
	
	filter: grayscale(100%) brightness(40%);
	z-index:1;
}

header.menuon:before
{
	background-image:url(../img/bg/1-min.jpg);
}


nav.menuon:before
{
	background-image:url(../img/bg/fft99_mf9276979.jpg);	
}
	




	nav ul
	{
		display:none;
	}
	
	
	header.menuon h1
	{
		position:relative;
		float:left;
		width:100%;
		margin-left: 5%;
		z-index:3;		
	}
	
	header.menuon h1:first-of-type
	{
		margin-top:15%;
	}
	
	
	nav.menuon ul
	{
		position:relative;
		display:flex;
		width:100%;
		height:100%;
		flex-direction:column;
		background: rgba(0,0,0,0.50);		
		z-index:2;
	
	}
	
	nav.menuon ul li
	{
		width:100%;
		flex:1;
		display:flex;		
		
		background: repeating-linear-gradient(
		  45deg,
		  rgba(0,0,0,0),
		  rgba(0,0,0,0) 4px,
		  rgba(30,30,30,1) 4px,
		  rgba(30,30,30,1) 8px
		);		
		
		
	}
	
	nav.menuon ul li:hover,
	nav.menuon ul li:active
	{
		background: repeating-linear-gradient(
		  45deg,
		  rgba(0,0,0,0.75),
		  rgba(0,0,0,0.75) 4px,
		  rgba(30,30,30,0.75) 4px,
		  rgba(30,30,30,0.75) 8px
		);		
	}
	
	
	nav.menuon ul li:first-child,
	nav.menuon ul li:nth-child(2) 
	{
		border-bottom: 4px solid #ccc;	
	}
	
	
/*	nav.menuon ul li:last-child
	{
		border-top: 4px solid #ccc;	
	}*/

	nav.menuon ul li.judge_menu_link
	{
		border-top: 4px solid #ccc;	
	}

	
	
	
	
	nav.menuon ul li a
	{
		flex:1;
		color:#fff;
		text-align:left;
	}
	
	nav.menuon ul li a:hover,
	nav.menuon ul li a:active
	{
	/*	background: repeating-linear-gradient(
		  45deg,
		  rgba(0,0,0,0.75),
		  rgba(0,0,0,0.75) 4px,
		  rgba(30,30,30,0.75) 4px,
		  rgba(30,30,30,0.75) 8px
		);	*/	
	}
	
	nav.menuon ul li a h1
	{
		font-size:32px;
		padding-bottom:10px;
		
	}
	nav.menuon ul li a span
	{
		display:none;
	}


.judge_menu_link
{
	position: absolute;
	left: calc(-100% - 8px);
	bottom: 0px;
	height: calc(33% + 4px);
	width: calc(100% + 4px) !important;
}



	


@media only screen and (min-height: 38em) {
	/* 608 */
	
	nav.menuon ul li a span
	{
		display:block;
		font-size:12px;
		
	}	
	
	nav a.nav span
	{
		
	}
	
}

@media only screen and (min-height: 44em) {
	/* 704 */
	
	
	
	

	
	header
	{
		height:120px;
	}
		
		header span
		{
			width: 220px;
			height: 103px;
			margin-right:5%;
		}
		
		header h1
		{
			font-size: 31px;
			margin-top: 10px;
		    line-height: 39px;
		}
	
			
		header h1:first-line
		{
			font-size: 20px;
		}
	

		
		nav.menuon ul li a h1
		{
			font-size:52px;
			padding-bottom:10px;
			
		}	
		nav.menuon ul li a span
		{
			font-size:15px;
		}
		

						
}

@media only screen and (min-height: 50em) {
	/* 896 */
	
	nav a.nav span
	{
	
		top:182px;
		left:20px;
		font-size:33px;	
	}
	
			nav a.nav:before
			{
				width:34px;
				height:34px;
				top:50%;
				margin-left:22px;
				font-size:63px;
				line-height:35px;
				margin-top:-18px;
			}	
	
}

@media only screen and (min-height: 60em) {
	/* 1040 */
	
	

		
	
header
{
	height:167px;
	padding-top:28px;
}

	
	header span
	{
		width:306px;
		height:121px;
		
		margin-left:69px;
		margin-right:7%;		
	}
	
	header h1
	{
		font-size:35px;
		margin-top:20px;
		line-height:46px;
	}

		
	header h1:first-line
	{
		font-size:24px;
		letter-spacing:7px;
		margin-top:20px;		
	}

		
	
}






@media only screen and (min-width: 48em) {
	/* 768px */
/*	.section_2 .row h1 {
		min-width: 120px;
	}*/	
}

@media only screen and (min-width: 62em) {
	/* 992px */	
 
}

@media only screen and (min-width: 75em) {
	/* 1200px */

}