<!-- @format -->


<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
<!--Links-->
<!-- CSS NOS to test -->
<!-- <link rel="stylesheet" href="/css-nos/print.min.css" />
    <link rel="stylesheet" href="/css-nos/screen.min.css" /> 
    <link rel="stylesheet" href="/css-nos/footer.min.css" />-->
<!-- Main CSS -->
<link rel="stylesheet" href="https://galeria.nos.pt/Style%20Library/5G/css/main.css">


<main>
	<nav class="mainNav">
		<!-- Top Bar -->
		<section class="mainNav__topBar">
			<div class="mainNav__wrapper">
				<div class="mainNav__linksLeft">

				</div>
				<div class="mainNav__linksRight">

				</div>
			</div>
		</section>
		<!-- Menu Bar -->
		<section class="mainNav__menuBar">
			<div class="mainNav__wrapper">
				<div class="mainNav__barContent">
					<a href="" class="mainNav__logo">
						<img src="https://galeria.nos.pt/Style%20Library/5G/images/logo-nos.svg">
					</a>
					<!-- Main Menu Links -->
					<ul class="mainNav__menuBarLinks">

					</ul>
					<!-- Side Icons -->
					<aside class="mainNav__sideIcons" style="display:none">
						<div class="mainNav__menuIcon">
							<span class="mainNav__icon mainNav__icon--menu">
								<i class="icon-bra-033"></i>
							</span>
							<p>Menu</p>
						</div>

						<div class="mainNav__secondaryIcons">
							<div class="mainNav__language">

							</div>
							<span style="display: none;" class="mainNav__icon mainNav__icon--search"><i class="icon-bra-001"></i></span>
							<span style="display: none;" class="mainNav__icon mainNav__icon--shopping shoppingFull"><i
									class="icon-bra-008"></i></span>
							<span style="display: none;" rel="nofollow" class="mainNav__icon mainNav__icon--profile profileLogged"><i
									class="icon-bra-002"></i></span>

						</div>
					</aside>
				</div>

			</div>
		</section>
		<!-- Menu Levels content -->
		<section class="mainNav__innerLevels">
			<div class="mainNav__levelsContent">
				<span class="mainNav__icon mainNav__icon--close"><i class="icon-bra-007"></i></span>
				<!-- Levels -->
				<div class="mainNav__levelOne">
					<div class="mainNav__levelOneContentBg"></div>
					<ul class="mainNav__levelOneContent">
						<li class="mainNav__segments">
							<div class="mainNav__dropdown">
								<p class="mainNav__dropSelection"></p>
								<ul class="mainNav__dropContent">
								</ul>
							</div>
						</li>						
						<ul class="mainNav__secondaryLinks">

						</ul>
					</ul>
				</div>
				<div class="mainNav__levelTwo">
					<ul class="mainNav__levelTwoContent" id='navLink1'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink2'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink3'>

					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink4'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink5'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink6'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink7'>
						
					</ul>
					<ul class="mainNav__levelTwoContent" id='navLink8'>
						
					</ul><span class='mainNav__icon mainNav__icon--back iconBackLevel1'><i
							class='icon-bra-005'></i></span>
				</div>

				<!-- If Level 3 is needed uncomment this section -->
				<div class="mainNav__levelThree">
					<ul class="mainNav__levelThreeContent" id='navLink1-section3'>
						
					</ul>
					<ul class="mainNav__levelThreeContent" id='navLink1-section4'>
						
					</ul><span class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i
							class='icon-bra-005'></i></span><span
						class='mainNav__icon mainNav__icon--back iconBackLevel2'><i class='icon-bra-005'></i></span>
				</div>

			</div>
		</section>
		<!-- Search Modal -->
		<section class="mainNavModal mainNavModal--search">
			<span class="mainNavModal__iconClose"><i class="icon-bra-007"></i></span>
			<div class="mainNavModal__content">

				<span class="mainNavModal__title">Pesquisa</span>
				<div class="mainNavModal__searchInput">
					<input type="text">
				</div>
			</div>
		</section>
		<!-- Profile Modal -->
		<section class="mainNavModal mainNavModal--profile">
			<span class="mainNavModal__iconClose"><i class="icon-bra-007"></i></span>
			<div class="mainNavModal__content">

				<ul class="mainNavModal__personalLinks">

				</ul>
			</div>
		</section>
	</nav>
	<script src="https://galeria.nos.pt/Style%20Library/5G/scripts/mainNav.js"></script>

</main>