html{ height:auto }
body{ height:auto }

.WRAPPER{
	width : 100%;
	margin : 0;
}

header{
	
}
header > .WRAPPER > h1{
	position : static;
	width : auto;
	height : 1.6rem;
	padding : 1.2rem 0;
	margin : 0 1.2rem;
	background-image : url("/images/ci_60_color.png");
	background-repeat : no-repeat;
	background-size : auto 1.6rem;
	background-position : left;
}
header > .WRAPPER > h1 > a#MAINLOGO{
	display : block;
	width : 12rem;
	height : 1.6rem;
	padding : 0;
	margin : 0;
}

nav#MAINMENU{
	bottom : 0;
	left : auto;
	width : 50%;
	height : 100%;
	margin-right : -50%;
	background-color : transparent;
	overflow : visible;
	transition :
		background-color .3s ease-in-out
}
nav#MAINMENU:hover{
	height : 100%;
	background-color : inherit;
	transition : none
}
nav#MAINMENU > .WRAPPER{
	position : fixed;
	top : 0;
	right : 0;
	bottom : 0;
	width : 50vw;
	margin-right : -50vw;
	background-color : rgba(0,0,0,.75);
	transition : margin-right .3s ease-in-out
}
nav#MAINMENU > .WRAPPER > a#MOBILE-CALLMENU{
	display : block;
	position : absolute;
	top : 1rem;
	left : -3rem;
	width : 2rem;
	height : 2rem;
	font-size : 0;
	background-color : rgba(0,0,0,.75);
	background-image : url("/images/icon-mobile-callmenu.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.2rem;
	border-radius : 1rem;
	transition : transform .5s ease-in-out
}
nav#MAINMENU > .WRAPPER > ul{
	width : 100%;
	height : 100%;
	text-align : left;
	overflow : auto
}
nav#MAINMENU > .WRAPPER > ul > li{
	display : block;
	width : auto;
}
nav#MAINMENU > .WRAPPER > ul > li > a{
	width : auto;
	height : 3rem;
	padding : 0 1rem;
	font : normal 1rem/3rem normal;
	text-align : left
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a{
	width : auto;
	height : 2rem;
	padding : 0 1rem;
	margin : 1rem;
	border-radius : 1rem;
	background-color : rgba(0,115,213,.75);
	font : normal .8rem/2rem normal;
	color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE > a:hover{
	background-color : rgba(0,115,213,.75);
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a{
	background-color : rgba(255,102,102,.75);
	color : #FFF
}
nav#MAINMENU > .WRAPPER > ul > li.SINGLE.SHOP > a:hover{
	background-color : rgba(255,102,102,.75);
}
nav#MAINMENU > .WRAPPER > ul > li > ul{
	padding : 0;
	margin : 0 1rem;
}
nav#MAINMENU > .WRAPPER > ul > li > ul:before{
	display : none
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li{
	margin-bottom : .7rem
}
nav#MAINMENU > .WRAPPER > ul > li > ul > li > a{
	color : #AAA;
	font : normal .75rem/normal normal
}

body.MENUON{ overflow : hidden }
body.MENUON > nav#MAINMENU{
	width : 100%;
	margin-right : 0;
	background-color : rgba(33,66,99,.5);
	transition :
		background-color .3s ease-in-out
}
body.MENUON > nav#MAINMENU > .WRAPPER{
	margin-right : 0
}
body.MENUON > nav#MAINMENU > .WRAPPER > a#MOBILE-CALLMENU{
	transform : rotate(45deg)
}