*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
nav ul{
	list-style: none;
}

header{
	position: absolute;
	width: 100%;
	padding: 40px 0;
	
}
.cont{
	max-width: 960px;
	margin: 0 auto;
}
nav{
	position: relative;
	
	

}
.logo{
	display: block;
	position: absolute;
	top: -25px;
	left: 52%;
  
	transform: translateX(-50%) rotate(0deg) scale(1);
	z-index: 1;
	transition: .5s;
}
.logo img{
	width: 145px;
	height: 145px;
}
.logo:hover{
	transform: translateX(-50%) rotate(360deg) scale(1.1);
}
nav > ul{
	width: min-content;
	display: flex;
	z-index: 20;
	margin-left:30px;
	margin-left:10px;
	/*transform: skew(-17deg);*/
}
nav > ul li{
	position: relative;
	margin-right: 5px;
	z-index: 10;
 
}
nav > ul > li:nth-child(3){
	margin-right: 270px;
}
nav > ul li a{
	display: block;
	color: black;
   /*background: pink;*/
   background: rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
	font:16px/20px Great Vibe;
	padding: 10px 15px 10px 15px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all .3s ease;
	border-radius: 5px;
}
li a:hover{
	background: black;
	color: pink;
}
nav > ul li > a i.fa{
	position: absolute;
	top: 15px;
	left: 12px;
	font-size: 18px;
}

/*====SUB MENU=====*/
nav li ul{
	position: absolute;
	min-width: 150px;
	border-top: 1px solid #000;
	display: none;
}
nav li > ul li a{
	padding: 10px;
	text-transform: none;
	border-bottom: 1px solid #000;
}
nav li > ul li ul{
	position: absolute;
	right: -150px;
	top: 0;
}
nav li:hover > ul{
	display: block;
}
input[type="checkbox"],
label.toggleSubmenu{
	display: none;
}
nav label.toggleMenu{
	color: #fff;
	padding: 15px 40px;
	text-transform: uppercase;
	position: relative;
	cursor: pointer;
	display: none;
}
nav label.toggleMenu .fa{
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 18px;
}
/*====Mobile=====*/

@media (max-width: 960px){
	header{
		margin: 0;
		padding: 0;
    height:55px;
	}
	
	nav > ul{
		margin-left:0px;
		margin-bottom:0px;
		transform: skew(0deg);
	}
	nav{
		overflow: hidden;
		/*background: #000;*/
		/*background: rgba(255,255,255,0.5);*/
	/*backdrop-filter: blur(5px);*/
	   
		width: 100%;
	
	
		
    
	}				
	.logo{
		top: 0;
		/*left: 90%;*/
		padding: 2px 0;
	}
	.logo img{
		width: 115px;
		height: 115px;
	}
	nav ul{
		display: block;
		max-height: 0;
		transition: max-height 0.3s;
		width: 100%;
		background-color: black;
		
	}
	nav > ul li a{
	
		display: block;
		color: pink;
	   background: black;
	  /* background: rgba(255,255,255,0.5);*/
		backdrop-filter: blur(5px);
		font-size: 14px;
		padding: 15px 30px 15px 40px;
		text-decoration: none;
		text-transform: uppercase;
		transition: all .3s ease;
		border-radius: 5px;
	}

	nav > ul li ul li a{
	
		padding-left:20%;
		background-color: black;
		color:white;
		padding-bottom:0%;
		font-size:18px;
	}
	nav label.toggleMenu{
		display: block;
		height:115px;
	}
	input:checked ~ ul{
		display: block;
		position: relative;
		max-height: 5000px;
		transition: max-height 2s ease;
	}
	nav label.toggleSubmenu{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		display: block;
		cursor: pointer;
	}
	nav > ul > li{
		margin: 0 !important;
	}
	nav li > ul li ul{
		position: absolute;
		right: auto;
		top: auto;
	}
	input:checked ~ a{
		background: pink;
		color:black;
		/*color: pink;*/
	}
	nav label.toggleSubmenu .fa::before{
		content: "\f0d7";
		color: #000;
	}
	nav label.toggleSubmenu .fa{
		position: absolute;
		top: 15px;
		right: 30px;
	}
	nav input:checked ~ label.toggleSubmenu .fa::before{
		content: "\f0d8";
	}
}