
/* TRIANGLE */

.nav-triangle {
	display : block;
	position : fixed;
	right : calc(100% - 65px);
	top : 50%;
	width : 400vw;
	height : 400vw;
	transform-origin : 100% 0;
    -webkit-transform : rotate(45deg) skew(-7deg, -7deg);
	   -moz-transform : rotate(45deg) skew(-7deg, -7deg);
		-ms-transform : rotate(45deg) skew(-7deg, -7deg);
		 -o-transform : rotate(45deg) skew(-7deg, -7deg);
			transform : rotate(45deg) skew(-7deg, -7deg);
	background : #adadad;
	background-image : url('../img/bg.jpg');
	-webkit-transition : right 0.5s ease;
       -moz-transition : right 0.5s ease;
		 -o-transition : right 0.5s ease;
			transition : right 0.5s ease;
	cursor : pointer;
	overflow : hidden;
	z-index : 100;
	}
	
.nav-triangle:hover {
	right : -400px;
	background : #e10085;
	box-shadow : 0 0 50px rgba(0, 0, 0, 0.25);
	}



/* NAV */

nav {
	position : relative;
	top : 0;
	right : 0;
	margin : auto;
	width : 70.5%;
	height : 141%;
	transform-origin : 110.5% 37.5%;
	-webkit-transform : translate(0, -50%) rotate(-45deg) skew(0deg, 0deg);
	   -moz-transform : translate(0, -50%) rotate(-45deg) skew(0deg, 0deg);
		-ms-transform : translate(0, -50%) rotate(-45deg) skew(0deg, 0deg);
		 -o-transform : translate(0, -50%) rotate(-45deg) skew(0deg, 0deg);
			transform : translate(0, -50%) rotate(-45deg) skew(0deg, 0deg);
	}



/* ICON */

.nav-icon {
	display : block;
	position : absolute;
	left : calc(100.2% - 58px);
	top : 50%;
	-webkit-transform : translate(0, -50%) scaleX(0.7);
	   -moz-transform : translate(0, -50%) scaleX(0.7);
		-ms-transform : translate(0, -50%) scaleX(0.7);
		 -o-transform : translate(0, -50%) scaleX(0.7);
			transform : translate(0, -50%) scaleX(0.7);
	cursor : pointer;
	z-index : 101;
	}
	
.nav-triangle:hover  .nav-icon {
	color : white;
	}
	
a.navicon {
	display: inline-block;
	position: relative;
	padding: 0;
	text-align: right;
	cursor: pointer;
	height: 30px;
	width: 30px;
	}

a.navicon:before {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 34px;
	height: 4px;
	background: #e10085;
	box-shadow: 
	0 12px 0 0 #e10085,
	0 24px 0 0 #e10085;
	}

a.navicon:hover:before {
	background: white;
	box-shadow: 
	0 12px 0 0 white,
	0 24px 0 0 white;
	}
	
	
	
/* LIST */
	
nav > ul {
	position : absolute;
	top : 50%;
	right : calc(88.5vw + 325px);
	-webkit-transform : translate(100%, -50%);
	   -moz-transform : translate(100%, -50%);
		-ms-transform : translate(100%, -50%);
		 -o-transform : translate(100%, -50%);
			transform : translate(100%, -50%);
	max-height : 100vh;
	overflow-y: auto;
	z-index : 101;
	}
	
nav ul {
	list-style : none;
	font-size : 1.3rem;
	font-weight : 600;
	font-style : italic;
	letter-spacing : 0;
	color : white;
	}
	
nav > ul > li {
	margin : 15px 0;
	}

nav > ul > li > ul {	
	display : inline-block;
	}

nav ul li > ul li {
	display : inline-block;
	padding-right : 0.3rem;
	font-size : 0.75rem;
	font-weight : 600;
	text-transform : uppercase;
	}
	
nav ul li > ul li:after {
	content : "\00A0/";
	}
	
nav ul li > ul li:last-child:after {
	content : "";
	}

nav li a {
	display : inline-block;
	color : white;
	text-decoration : none;
	-webkit-transition : all 0.25s ease;
       -moz-transition : all 0.25s ease;
		 -o-transition : all 0.25s ease;
			transition : all 0.25s ease;
	}

nav ul a:hover {
	text-shadow : 0px 0px 2px #ff80df, 0px 0px 5px #ff80df, 0px 0px 10px #ff80df, 0px 0px 12px #ff80df, 0px 0px 15px #ff80df;
	}
	

	
@media screen and (max-width: 600px){

	nav > ul > li > ul {	
	display : block;
	}

}

@media screen and (max-width: 400px){

	nav > ul {	
	width : calc(100vw - 65px);
	}

	nav > ul > li > ul {	
	display : block;
	}

	nav ul li > ul li {
	display : block;
	}
	
	nav ul li > ul li:after {
	content : "";
	}

}