html, body{
	margin: 0;
	scroll-behavior: smooth;
}
@font-face{
	font-family: Oswald-bold;
	src: url(font/Oswald-Bold.ttf);
}
@font-face{
	font-family: Oswald-medium;
	src: url(font/Oswald-Medium.ttf);
}
@font-face{
	font-family: Oswald-regular;
	src: url(font/Oswald-Regular.ttf);
}
section{
	width: 100%;
}
@media(max-width: 1400px){
	header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 90px;
		box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		-webkit-box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		-moz-box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		z-index: 2;
	}
	#menuBtn{
		position: fixed;
		z-index: 11;
		right: 25px;
		height: 35px;
		top: 28px;
	}
	#header{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #0804ff;
		height: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}
	#header img{
		width: 40%;
		max-height: 85%;
		object-fit: contain;
	}
	#slideMenu{
		width: 100%;
		height: calc(100% - 90px);
		position: fixed;
		top: 90px;
		left: -100%;
		background-color: #afd8ff;
		transition: 0.3s;
	}
	#nav{
		z-index: 1;
	}
	#nav ul{
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#nav ul li{
		list-style: none;
		margin: 15px auto;
		padding: 10px;
		border-bottom: 3px solid #0804ff;
		width: 80%;
	}
	#nav ul li a{
		color: #0804ff;
		font-size: 26px;
		text-decoration: none;
		font-family: Oswald-bold;
		transition: 0.3s;
	}
	#nav ul li a:hover{
		color: #ff0804;
	}
	#profile{
		display: flex;
		justify-content: center;
		align-items: center;
	    z-index: 1;
	}
	#profile input{
		width: 40%;
		margin: 25px auto;
		background-color: #0804ff;
		border-radius: 30px;
		font-family: Oswald-medium;
		font-size: 24px;
		color: #fff;
		border: 2px solid #fff;
		transition: 0.3s;
	}
	#profile input:hover{
		color: #ff0804;
		border: 2px solid #ff0804;
	}
	.w40, .w60, .w50, .w44, .w80, .w35{
		width: 90%;
	}
	.vr{
		width: 90%;
		margin: 0;
		border: 0;
		border-bottom: 1px solid #fff8;
	}
	section{
		 scroll-margin-top: 100px;
	}
	footer{
		margin-top: 40px;
		background-color: #444;
		width: 100%;		
	}
	footer img{
		width: 200px;
	}
	footer p, footer a{
		font-size: 20px;
		font-family: Oswald-bold;
		color: #fff;
		text-align: center;
		margin: 0;
		padding: 10px;
	}

}
@media(min-width: 1400px){
	header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 125px;
		box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		-webkit-box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		-moz-box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.71);
		z-index: 1;
	}
	#menuBtn{
		display: none;
	}
	#header{
		width: 15%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #0804ff;
		height: 125px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	#header img{
		width: 70%;
		max-height: 85%;
		object-fit: contain;
	}
	#nav{
		width: 85%;
		position: fixed;
		top: 0;
		left: 15%;
		background-color: #0804ff;
		height: 125px;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}
	#nav ul{
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: end;
		width: 80%;
		margin-right: 20%;
	}
	#nav ul li{
		list-style: none;
		margin: auto 3%;
	}
	#nav ul li a{
		color: #fff;
		font-size: 24px;
		text-decoration: none;
		font-family: Oswald-bold;
		transition: 0.3s;
	}
	#nav ul li a:hover{
		color: #ff0804;
	}
	#profile{
		width: 15%;
		position: fixed;
		top: 0;
		left: 85%;
		background-color: #afd8ff;
		height: 125px;
		display: flex;
		justify-content: center;
		align-items: center;
		clip-path: polygon(
	        30% 0%, 
	        100% 0%, 
	        100% 100%, 
	        0% 100%
	    );
	    z-index: 2;
	}
	#profile input{
		width: 50%;
		margin-left: 20%;
		background-color: #0804ff;
		border-radius: 30px;
		font-family: Oswald-medium;
		font-size: 22px;
		color: #fff;
		border: 2px solid #fff;
		transition: 0.3s;
	}
	#profile input:hover{
		color: #ff0804;
		border: 2px solid #ff0804;
	}
	.w35{
		width: 35%;
	}
	.w40{
		width: 40%;
	}
	.w44{
		width: 45%;
	}
	.w50{
		width: 50%;
	}
	.w60{
		width: 60%;
	}
	.w80{
		width: 80%;
	}
	.vr{
		width: 0;
		margin: 0;
		border: 0;
		border-left: 1px solid #fff8;
	}
	section{
		 scroll-margin-top: 135px;
	}
	footer{
		margin-top: 40px;
		background-color: #444;
		width: 100%;		
	}
	footer img{
		width: 200px;
	}
	footer p, footer a{
		font-size: 20px;
		font-family: Oswald-bold;
		color: #fff;
		text-align: center;
		margin: 0;
		padding: 10px;
	}
}