@media only screen and (min-width: 1380px)
{
	.nav{
		opacity: 1;
		position: fixed;
		display: inline-block;
		top: 7.5%;
		right: 4%;
		pointer-events: auto;
		z-index: 3;
		text-decoration: none;
	}
	.menu{
		opacity: 1;
		width: 2vw;
  		height: 0.3vw;
  		background-color: white;
  		margin: 0.4vw;
		pointer-events: none;
		text-decoration: none;
	}
	#menu2{
		width: 1.5vw; 
	}
	#navbg{
		position: fixed;
		display: inline-block;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 100%;
		background-color: black;
		opacity: 0.85;
		z-index: 2;
		transition: 0.6s;
	}
	
	#nav{
		opacity: 0;
		position: fixed;
		display: inline-block;
		z-index: 3;
		color: white;
		transition-duration: 1.2s;
		text-decoration: none;
	}
	#ul1id{
		position: fixed;
		display: inline-block;
		left: 5%;
		top: 50%;
		transform: translate(0%, -50%);
		list-style-type: none;
		padding-left: 0%;
		pointer-events: none;
		opacity: 0;
		text-decoration: none;
	}
	.li1{
		padding: 1vw;
		font-size: 7vw;
		color: white;
	}
	.li1:hover{
		color: #5882f5;
		text-decoration: none;
	}
}

/*phone*/
@media only screen and (orientation: portrait)
{

		.nav{
		opacity: 1;
		position: fixed;
		display: inline-block;
		top: 7.4%;
		right: 7%;
		pointer-events: auto;
		z-index: 3;
		text-decoration: none;
	}
	.menu{
		opacity: 1;
		width: 5vw;
  		height: 0.6vw;
  		background-color: white;
  		margin: 0.9vw;
		pointer-events: none;
		text-decoration: none;
	}
	#menu2{
		width: 3vw; 
	}
	#navbg{
		position: fixed;
		display: inline-block;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 100%;
		background-color: black;
		opacity: 0.85;
		z-index: 2;
		transition: 0.6s;
	}
	
	#nav{
		opacity: 0;
		position: fixed;
		display: inline-block;
		z-index: 3;
		color: white;
		transition-duration: 1.2s;
		text-decoration: none;
	}
	#ul1id{
		position: fixed;
		display: inline-block;
		left: 1%;
		top: 50%;
		transform: translate(0%, -50%);
		list-style-type: none;
		padding-left: 0%;
		pointer-events: none;
		opacity: 0;
		text-decoration: none;
	}
	.li1{
		padding: 4vw;
		font-size: 9vw;
		color: white;
	}
	.li1:hover{
		color: #5882f5;
		text-decoration: none;
	}

}


@media only screen and (orientation: landscape) and (max-width: 1385px)
{
	
	.nav{
		opacity: 1;
		position: fixed;
		display: inline-block;
		top: 7.4%;
		right: 7%;
		pointer-events: auto;
		z-index: 3;
		text-decoration: none;
	}
	.menu{
		opacity: 1;
		width: 3vw;
  		height: 0.5vw;
  		background-color: white;
  		margin: 0.9vw;
		pointer-events: none;
		text-decoration: none;
	}
	#menu2{
		width: 2vw; 
	}
	#navbg{
		position: fixed;
		display: inline-block;
		left: 0;
		bottom: 0;
		width: 0%;
		height: 100%;
		background-color: black;
		opacity: 0.85;
		z-index: 2;
		transition: 0.6s;
	}
	
	#nav{
		opacity: 0;
		position: fixed;
		display: inline-block;
		z-index: 3;
		color: white;
		transition-duration: 1.2s;
		text-decoration: none;
	}
	#ul1id{
		position: fixed;
		display: inline-block;
		left: 5%;
		top: 50%;
		transform: translate(0%, -50%);
		list-style-type: none;
		padding-left: 0%;
		pointer-events: none;
		opacity: 0;
		text-decoration: none;
	}
	.li1{
		padding: 3vw;
		font-size: 6vw;
		color: white;
	}
	.li1:hover{
		color: #5882f5;
		text-decoration: none;
	}

}