cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header>
	<section id="desktop-menu" class="desktop-menu">
		<nav class="sidebar flex-column-nowrap">
			<a class="sidebar__logo" href="#">
				<abbr class="logo">FB</abbr>
			</a>
			<ul class="sidebar__nav-list flex-column-nowrap" role="menubar" aria-label="Main desktop menu">
				<li class="nav-list__item about-me active fake-button flex-column-nowrap" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg height="38.095242" width="40" viewBox="0 0 44.017969 41.921879" role="img" aria-labelledby="About me"><path d="m 21.936719,23.52688 c 6.505156,0 11.781484,-5.27641 11.781484,-11.78148 C 33.718203,5.24032 28.441797,0 21.936719,0 15.431641,0 10.155234,5.27641 10.155234,11.7454 c 0,6.46898 5.276329,11.78148 11.781485,11.78148 z m 0,-20.455 c 4.77039,0 8.673515,3.90305 8.673515,8.67352 0,4.77046 -3.903125,8.67343 -8.673515,8.67343 -4.770391,0 -8.673516,-3.90304 -8.673516,-8.67351 0,-4.77047 3.903047,-8.67344 8.673516,-8.67344 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /><path d="M 1.5539844,41.92188 H 42.463984 c 0.867344,0 1.553985,-0.68664 1.553985,-1.55398 0,-8.13141 -6.613516,-14.7811 -14.781094,-14.7811 H 14.781094 C 6.6496875,25.5868 0,32.20032 0,40.3679 c 0,0.86734 0.68664062,1.55398 1.5539844,1.55398 z M 14.781094,28.69477 h 14.455781 c 5.926875,0 10.805703,4.40906 11.564688,10.11906 H 3.2164063 C 3.9753125,33.14 8.8542188,28.69477 14.781094,28.69477 Z" id="path4" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
						<span class="u-uppercase">About me</span>
					</a>
				</li>
				<li class="nav-list__item skills fake-button flex-column-nowrap" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg viewBox="0 0 32.265313 27.8375" height="34.510746" width="40" role="img" aria-labelledby="Skills"><g id="g4547"><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path2" class="path" d="M 30.702812,0 H 1.5625 C 0.69945313,0 0,0.69953 0,1.5625 v 18.28125 c 0,0.86297 0.69945313,1.5625 1.5625,1.5625 h 10.898281 v 3.54063 H 8.2199219 c -0.7969532,0 -1.4453125,0.64835 -1.4453125,1.44531 0,0.79695 0.6483593,1.44531 1.4453125,1.44531 H 24.045391 c 0.796953,0 1.445312,-0.64836 1.445312,-1.44531 0,-0.79696 -0.648359,-1.44531 -1.445312,-1.44531 h -4.24086 v -3.54063 h 10.898281 c 0.863047,0 1.5625,-0.69953 1.5625,-1.5625 V 1.5625 C 32.265312,0.69953 31.565859,0 30.702812,0 Z m -0.78125,19.0625 H 2.34375 V 2.34375 h 27.577812 z" /><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path4" class="path" d="m 5.6125953,11.58586 4.9284377,2.29187 c 0.127422,0.059 0.263047,0.0889 0.403281,0.0889 0.182656,0 0.360625,-0.0519 0.515391,-0.15031 0.277187,-0.17711 0.442656,-0.47891 0.442656,-0.80742 v -0.0252 c 0,-0.37117 -0.217578,-0.71211 -0.554375,-0.86867 L 8.2655641,10.683 11.348064,9.25065 c 0.336719,-0.15656 0.554297,-0.49758 0.554297,-0.86859 v -0.0249 c 0,-0.32899 -0.165547,-0.63078 -0.442578,-0.80735 -0.153281,-0.098 -0.331797,-0.14968 -0.516094,-0.14968 -0.138906,0 -0.278359,0.0305 -0.403125,0.0885 L 5.6125172,9.78019 C 5.2759547,9.93684 5.0585328,10.27777 5.0585328,10.64871 v 0.0686 c -7.81e-5,0.37047 0.2172656,0.71133 0.5540625,0.86852 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path6" class="path" d="m 13.723594,16.25398 c 0.179765,0.24602 0.468906,0.39289 0.773515,0.39289 h 0.02461 c 0.418125,0 0.784531,-0.26765 0.911875,-0.66531 L 18.680234,5.92219 C 18.773364,5.6318 18.721644,5.31141 18.541875,5.06484 18.362109,4.81883 18.072969,4.67187 17.768359,4.67187 h -0.02453 c -0.418281,0 -0.785,0.26766 -0.912422,0.66532 l -3.247031,10.06023 c -0.09234,0.29063 -0.04031,0.6107 0.139218,0.85656 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path8" class="path" d="m 20.362952,8.38203 c 0,0.37078 0.217343,0.71172 0.554296,0.86891 l 3.082422,1.43203 -3.082422,1.43203 c -0.336796,0.15656 -0.554375,0.4975 -0.554375,0.86867 v 0.0252 c 0,0.32851 0.165391,0.63031 0.442891,0.8075 0.154219,0.0983 0.332344,0.15023 0.515234,0.15023 0.14,0 0.275547,-0.0299 0.403829,-0.0892 l 4.928203,-2.29179 c 0.336484,-0.15696 0.553828,-0.49782 0.553828,-0.86836 v -0.0686 c 0,-0.37093 -0.217422,-0.71187 -0.554141,-0.86851 L 21.724592,7.48842 c -0.124297,-0.0577 -0.263515,-0.0884 -0.4025,-0.0884 -0.184219,0 -0.362812,0.0517 -0.515937,0.14937 -0.277657,0.17688 -0.443203,0.47868 -0.443203,0.80766 z" /></g></svg>
						<span class="u-uppercase">Skills</span>
					</a>
				</li>
				<li class="nav-list__item my-work fake-button flex-column-nowrap" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg viewBox="0 0 40 25" height="25" width="40" role="img" aria-labelledby="My work"><path d="M 20,0 C 11.276641,0 3.7155469,5.0797656 0,12.5 3.7155469,19.920234 11.276641,25 20,25 28.723125,25 36.284297,19.920234 40,12.5 36.284453,5.0797656 28.723125,0 20,0 Z m 9.861328,6.6290625 C 32.211484,8.1280469 34.202891,10.135859 35.69875,12.5 34.202969,14.864141 32.211328,16.871953 29.861328,18.370938 26.908437,20.254453 23.498359,21.25 20,21.25 16.501562,21.25 13.091563,20.254453 10.138672,18.370938 7.7886719,16.871875 5.7972656,14.864062 4.3014063,12.5 5.7971875,10.135781 7.7886719,8.1279688 10.138672,6.6290625 10.291719,6.5314062 10.446328,6.4367969 10.601875,6.3439062 10.212891,7.4114063 10,8.5635156 10,9.765625 c 0,5.522734 4.477187,10 10,10 5.522734,0 10,-4.477266 10,-10 0,-1.2021094 -0.212891,-2.3542188 -0.601797,-3.4217969 0.155313,0.092891 0.310078,0.1875781 0.463125,0.2852344 z M 20,8.515625 c 0,2.071094 -1.678906,3.75 -3.75,3.75 -2.071094,0 -3.75,-1.678906 -3.75,-3.75 0,-2.0710937 1.678906,-3.75 3.75,-3.75 2.071094,0 3.75,1.6789063 3.75,3.75 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
						<span class="u-uppercase">My work</span>
					</a>
				</li>
				<li class="nav-list__item contact fake-button flex-column-nowrap" role="menuitem">
					<a class="flex-row-wrap" href="#" tabindex="0">
						<svg height="27.213362" width="40" viewBox="0 0 18.832891 12.812657" role="img" aria-labelledby="Contact"><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path2" class="path" d="M 15.515781,2.4900782 9.4171094,7.8642188 3.3171094,2.49 C 3.0742188,2.2760156 2.7039844,2.2995313 2.4900781,2.5422656 2.27625,2.7850782 2.2995313,3.1553125 2.5424219,3.3692969 l 6.4874219,5.7155469 c 0.1107031,0.0975 0.2490625,0.14625 0.3873437,0.14625 0.1382812,0 0.2767188,-0.04875 0.3874219,-0.1463281 L 16.290703,3.3692188 C 16.533438,3.1553125 16.556797,2.785 16.342891,2.5421875 16.128828,2.2996094 15.758672,2.2761719 15.515781,2.4900782 Z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D; " id="path4" d="M 17.075078,2.5e-8 H 1.7578125 C 0.78859375,2.5e-8 0,0.78851565 0,1.7578125 v 9.2970315 c 0,0.969297 0.78859375,1.757812 1.7578125,1.757812 H 17.075078 c 0.969219,0 1.757813,-0.788515 1.757813,-1.757812 V 1.7578125 C 18.832891,0.78859378 18.044297,2.5e-8 17.075078,2.5e-8 Z M 17.661016,11.054844 c 0,0.323047 -0.262813,0.585937 -0.585938,0.585937 H 1.7578125 c -0.323125,0 -0.5859375,-0.26289 -0.5859375,-0.585937 V 1.7578125 c 0,-0.3230468 0.2628125,-0.5859375 0.5859375,-0.5859375 H 17.075078 c 0.323125,0 0.585938,0.2628907 0.585938,0.5859375 z" /></svg>
						<span class="u-uppercase">Contact</span>
					</a>
				</li>
			</ul>
			<ul class="sidebar__extra-content" role="menu">
				<li class="extra-content__language" role="menuitem">
					<svg height="39.999043" width="40.000126" viewBox="0 0 1.1718787 1.1718469" role="img" aria-labelledby="Language"><path d="M 1.1704687,0.546847 C 1.15125,0.254347 0.9175,0.020519 0.625,0.0013 V 0 H 0.5859375 0.546875 V 0.0013 C 0.254375,0.020519 0.02054688,0.254347 0.00132813,0.546847 H 0 v 0.03906 0.03906 H 0.00132813 C 0.02054688,0.917467 0.254375,1.151217 0.546875,1.170436 v 0.00141 H 0.5859375 0.625 v -0.0014 C 0.9175,1.151227 1.15125,0.917478 1.1704687,0.624978 h 0.00141 V 0.58591 0.546847 Z M 0.36679688,0.127706 c -0.0377344,0.05016 -0.0690625,0.113047 -0.091875,0.184766 H 0.15789063 C 0.20882813,0.233022 0.28117188,0.168722 0.36679688,0.127706 Z M 0.11703125,0.390597 H 0.254375 C 0.2439062,0.439967 0.2372656,0.492394 0.2351562,0.546847 H 0.07960937 C 0.08375,0.491847 0.09671875,0.439269 0.11703125,0.390597 Z M 0.07960937,0.624972 h 0.15554688 c 0.002109,0.05445 0.00875,0.106875 0.0192188,0.15625 H 0.11703125 C 0.09671875,0.73255 0.08375,0.679972 0.07960937,0.624972 Z m 0.07828126,0.234375 h 0.11695312 c 0.0228125,0.07172 0.0541406,0.134609 0.0919531,0.184766 C 0.28117188,1.003097 0.20882813,0.938878 0.15789063,0.859347 Z M 0.546875,1.088722 C 0.4665625,1.067238 0.39742188,0.980988 0.35546875,0.859347 H 0.546875 Z m 0,-0.3075 H 0.33351562 C 0.3225,0.73255 0.31554688,0.679972 0.31328125,0.624972 H 0.546875 Z m 0,-0.234375 H 0.31328125 c 0.002266,-0.055 0.009219,-0.107578 0.0202344,-0.15625 H 0.546875 Z m 0,-0.234375 H 0.35546875 C 0.39742188,0.190831 0.4665625,0.104581 0.546875,0.083175 Z m 0.4671094,0 H 0.89710938 C 0.87421878,0.240752 0.84296878,0.177863 0.80507808,0.127706 0.89062498,0.168726 0.96304683,0.233019 1.0139844,0.312472 Z M 0.625,0.083175 c 0.0802344,0.02141 0.14945312,0.107656 0.19140625,0.229297 H 0.625 Z m 0,0.307422 h 0.21328125 c 0.0110938,0.048672 0.0178906,0.10125 0.0203125,0.15625 H 0.625 Z m 0,0.234375 h 0.23359375 c -0.002266,0.055 -0.009219,0.107578 -0.0203125,0.15625 H 0.625 Z m 0,0.46375 V 0.859347 H 0.81640625 C 0.77445312,0.980988 0.70523437,1.067238 0.625,1.088722 Z m 0.18007812,-0.04461 c 0.0377344,-0.05023 0.0691406,-0.113047 0.0920313,-0.184766 H 1.0139844 C 0.9630469,0.938876 0.890625,1.003096 0.80507812,1.044112 Z M 1.0548437,0.781222 H 0.9175 C 0.9279688,0.731852 0.9346094,0.679425 0.9367188,0.624972 h 0.1554687 c -0.00406,0.055 -0.017031,0.107578 -0.037344,0.15625 z M 0.93671875,0.546847 c -0.002109,-0.05445 -0.00875,-0.106875 -0.0192188,-0.15625 H 1.0548436 c 0.020312,0.04867 0.033281,0.10125 0.037422,0.15625 z" id="path2" style="fill:#c6c6c6;stroke-width:0.078125" /></svg><svg height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z" /></g></svg>
					<span class="u-uppercase">Language</span>
					<ul class="extra-content__language-selector flex-column-nowrap" aria-label="submenu" aria-hidden="true" aria-expanded="false" aria-haspopup="true">
						<li class="language-selector__item u-uppercase ca" role="menuitem">
							<a href="#" tabindex="-1">
								<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
								<span class="u-uppercase">CAT</span>
							</a>
						</li>
						<li class="language-selector__item u-uppercase es" role="menuitem">
							<a href="#" tabindex="-1">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
								<span class="u-uppercase">ES</span>
							</a>
						</li>
						<li class="language-selector__item u-uppercase eng is-selected" role="menuitem">
							<a href="#" tabindex="-1">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
								<span class="u-uppercase">ENG</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="extra-content__share fake-button flex-row-wrap" role="menuitem">
					<a href="#" tabindex="0">
						<svg height="40" width="40" viewBox="0 0 4.53125 4.53125"><g transform="scale(0.078125)" id="g4530"><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path2" d="M 54.319,37.839 C 54.762,35.918 55,33.96 55,32 55,22.905 50.369,14.623 42.611,9.847 42.138,9.557 41.524,9.704 41.235,10.174 40.945,10.645 41.092,11.26 41.562,11.55 48.724,15.96 53,23.604 53,32 53,33.726 52.8,35.451 52.427,37.147 51.966,37.051 51.489,37 51,37 c -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 3.86,0 7,-3.141 7,-7 0,-2.659 -1.491,-4.976 -3.681,-6.161 z M 51,49 c -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6;" id="path4" d="M 38.171,54.182 C 35.256,55.388 32.171,56 29,56 22.615,56 16.473,53.425 11.983,48.908 13.229,47.643 14,45.911 14,44 c 0,-3.859 -3.14,-7 -7,-7 -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 1.226,0 2.378,-0.319 3.381,-0.875 C 15.26,55.136 21.994,58 29,58 c 3.435,0 6.778,-0.663 9.936,-1.971 0.51,-0.211 0.753,-0.796 0.542,-1.307 -0.211,-0.509 -0.797,-0.751 -1.307,-0.54 z M 2,44 c 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path6" d="m 4,31.213 c 0.024,0.002 0.048,0.003 0.071,0.003 0.521,0 0.959,-0.402 0.997,-0.93 C 5.78,20.197 12.654,11.766 22.288,8.972 23.142,11.874 25.825,14 29,14 32.86,14 36,10.859 36,7 36,3.141 32.86,0 29,0 25.149,0 22.015,3.127 22.001,6.975 11.42,9.922 3.851,19.12 3.073,30.146 3.034,30.696 3.449,31.175 4,31.213 Z M 29,2 c 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 z" /></g></svg>
						<span class="u-uppercase">Share</span>
					</a>
				</li>
			</ul>
		</nav>
	</section>
	<section id="mobile-menu" class="mobile-menu navbar flex-row-wrap">
		<a class="navbar__logo" href="#">
			<span class="logo">FB</span>
		</a>
		<div class="navbar__mobile-menu">
			<div class="menu">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<nav class="navbar__mobile-menu__nav" aria-label="Main mobile menu" aria-hidden="true">
			<ul class="navbar__mobile-menu__list flex-column-nowrap" role="menu">
				<li class="navbar__mobile-menu__item flex-row-wrap about-me u-uppercase fake-button active" role="menuitem">
					<a href="#" tabindex="-1">About me</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap skills u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">Skills</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap my-work u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">My work</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap contact u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">Contact</a>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap language u-uppercase fake-button" role="menuitem" aria-haspopup="true" aria-expanded="false">
					<a class="flex-row-nowrap">
						<span>Language</span>
						<svg class="arrow-icon" height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z"></path></g></svg>
					</a>
					<ul class="language__list flex-row-nowrap" role="submenu" aria-hidden="true" aria-expanded="false">
						<li class="language__item ca" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
								<span>CA</span>
							</a>
						</li>
						<li class="language__item es" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
								<span>ES</span>
							</a>
						</li>
						<li class="language__item eng is-selected" role="menuitem">
							<a class="flex-row-nowrap" href="#" tabindex="-2">
								<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
								<span>ENG</span>
							</a>
						</li>
					</ul>
				</li>
				<li class="navbar__mobile-menu__item flex-row-wrap share u-uppercase fake-button" role="menuitem">
					<a href="#" tabindex="-1">Share</a>
				</li>
			</ul>
		</nav>
	</section>
</header>
            
          
!
            
              // Variables
$c-main: hsla(0, 100%, 100%, .75);
$c-secondary: hsla(200, 5%, 11%, 1);
$c-secondary-complementary: hsla(0, 0%, 13%, 1);
$c-third: hsla(180, 4%, 36%, 1);
$c-malabars: hsla(178, 40%, 49%, 1);
$c-shadow-main: hsla(240, 3%, 19%, 1);
$c-shadow-secondary: hsla(0, 0%, 0%, .26);
$bg-main: hsla(210, 3%, 15%, 1);
$media550: 550px;
$media768: 768px;

// Fonts
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");

// General
* {
  box-sizing: border-box;
}

body {
  font-size: 12px;
  font-family: "Josefin Sans", "Roboto", sans-serif;
  background-color: $bg-main;
  color: $c-main;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

li {
  width: 100%;
}

svg {
  width: 100%;
  max-width: 30px;
  transition: all .3s ease;
}

.u-uppercase {
  text-transform: uppercase;
}

.fake-button {
  &::active {
    transform: scale(.95);
  }
}

.flex-column-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

.flex-row-wrap {
  display: flex;
  flex-flow: row wrap;
}

.flex-row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

// Specifics
.sidebar__logo,
.navbar__logo {
  position: relative;
  margin-top: .5rem;
  padding-top: .4rem;
  z-index: 10;
  .logo {
    top: 50%;
    left: 50%;
    color: $c-main;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: -4px;
    text-shadow: 0 .2rem .4rem $c-shadow-main, 0 .2rem .4rem $c-shadow-main;
    transform: translate(-50%, 100%);
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 2rem;
    padding: 1rem;
    border: 5px solid $c-malabars;
    transform: translate(-50%, -50%) rotate(0deg);
    animation: 10s infinite alternate ease-in-out spin;
  }
  &::before {
    border-color: $c-malabars $c-malabars transparent transparent;
    z-index: -1;
  }
  &::after {
    border-color: transparent transparent $c-malabars $c-malabars;
    z-index: 1;
    box-shadow: 4px 2px 1px $c-shadow-main;
  }
  @media screen and (max-width: $media768) {
    margin: 0 0 0 1.5rem;
  }
  @media screen and (max-width: $media550) {
    margin: 0 0 0 2.5rem;
  }
}

.desktop-menu {
  display: flex;
  position: relative;
  .sidebar {
    position: fixed;
    width: 100%;
    max-width: 75px;
    height: 100vh;
    justify-content: space-between;
    align-content: center;
    text-align: center;
    z-index: 10;
    background-color: $c-secondary;
    box-shadow: 0 2px 5px $c-shadow-secondary;
    @media screen and (max-width: $media768) {
      width: 100%;
      max-width: 100vw;
      height: 100%;
      max-height: 75px;
      flex-flow: row nowrap;
      align-items: center;
    }
  }
  .sidebar__nav-list {
    .nav-list__item {
      margin-bottom: 2rem;
      opacity: .5;
      cursor: pointer;
      transition: all .3s ease;
      a {
        position: relative;
        justify-content: center;
        align-items: center;
        transition: transform .15s ease;
        @media screen and (max-width: $media768) {
          height: 100%;
        }
        svg {
          @media screen and (max-width: $media768) {
            align-self: flex-end;
            margin-top: .5rem;
          }
        }
        span {
          display: block;
          flex-basis: 100%;
          padding-top: .25rem;
          transform: translateX(-200px);
          transition: all .15s ease;
          @media screen and (max-width: $media768) {
            transform: translateY(-200px);
            align-self: flex-end;
            padding-bottom: .5rem;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
        @media screen and (max-width: $media768) {
          margin-right: 0;
        }
      }
      &.active, &:hover {
        opacity: 1;
        span {
          transform: translateX(0);
          color: $c-malabars;
          font-weight: bold;
        }
        svg {
          transform: scale(1.1);
          stroke-dasharray: 1000;
          stroke-dashoffset: 1000;
          animation: dash 12s ease alternate;
        }
      }
      @media screen and (max-width: $media768) {
        height: 100%;
        margin: 0;
      }
    }
    @media screen and (max-width: $media768) {
      flex-flow: row nowrap;
      align-items: center;
      width: 100%;
      max-width: 45%;
      height: 100%;
    }
    @media screen and (max-width: $media550) {
      display: none;
    }
  }
  @media screen and (max-width: $media550) {
    display: none;
  }
  .sidebar__extra-content {
    display: flex;
    flex-flow: column nowrap;
    span {
      display: block;
      width: 100%;
      text-align: center;
      color: $c-malabars;
      font-weight: bold;
      transition: all .15s ease;
      transform: translateX(-200px);
      @media screen and (max-width: $media768) {
        align-self: flex-end;
        padding-bottom: .5rem;
        transform: translateY(-200px);
      }
    }
    .extra-content__language {
      display: flex;
      position: relative;
      flex-flow: row wrap;
      justify-content: center;
      margin-bottom: 1rem;
      cursor: pointer;
      transition: all .15s ease;
      svg {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          margin-top: .5rem;
        }
      }
      .extra-content__language-selector {
        position: absolute;
        top: 0;
        right: -200px;
        left: 75px;
        width: 130px;
        padding-left: 1.5rem;
        visibility: hidden;
        z-index: 1;
        transition: visibility 0ms ease-out 600ms;
        .language-selector__item {
          margin-bottom: 0;
          padding: .5rem 0;
          border-bottom: 1px solid $c-main;
          background-color: $c-secondary;
          opacity: 0;
          transform: translateX(-200px);
          a {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
          }
          span {
            width: 25px;
            height: 6px; // Set to center vertically the span (because scale modifies it)
            align-self: center;
            color: $c-main;
            transform: scale(1);
          }
          svg {
            @media screen and (max-width: $media768) {
              margin: 0;
            }
          }
          &:nth-of-type(1) {
            border-top: 1px solid $c-main;
          }
          @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
              transition: transform .15s ease #{-($i - 3 - 1) * .1}s, opacity 100ms ease-out #{-($i - 3 - 1) * .1}s;
            }
          }
          &.is-selected {
            background-color: $c-third;
            font-weight: bold;
            a span {
              color: $c-malabars;
            }
          }
          &:hover {
            background-color: $c-third;
          }
          @media screen and (max-width: $media768) {
            transform: translateX(200px);
          }
        }
        @media screen and (max-width: $media768) {
          left: -17px;
          top: 83px
        }
      }
      svg:nth-of-type(2) {
        position: absolute;
        top: 50%;
        right: 2rem;
        width: 1.1rem;
        opacity: 0;
        transform: translateY(-85%);
        transition: all .15s ease;
        @media screen and (max-width: $media768) {
          transform: translateY(-130%) rotate(90deg);
        }
      }
      &:hover {
        transform: translateX(-1rem);
        span {
          transform: translateX(1rem);
        }
        svg:nth-of-type(2) {
          opacity: 1;
          right: -.5rem;
        }
      }
      &.is-open {
        transform: translateX(-1rem);
        .extra-content__language-selector {
          visibility: visible;
          transition: visibility 0ms ease-out 0ms;
          @for $i from 1 through 3 {
            li:nth-of-type(#{$i}) {
              opacity: 1;
              transform: none;
              transition: transform .15s ease #{$i * .1}s, opacity .1s ease-out #{$i * .1}s;
            }
          }
        }
        span {
          transform: scale(.95) translateX(1rem);
        }
        svg {
          transform: scale(.95);
          &:nth-of-type(2) {
            right: -.5rem;
            opacity: 1;
            transform: translateY(-85%) scale(.90) rotate(180deg);
            @media screen and (max-width: $media768) {
              transform: translateY(-130%) scale(.90) rotate(-90deg);
            }
          }
        }
      }
      @media screen and (max-width: $media768) {
        margin-bottom: 0;
      }
    }
    .extra-content__share {
      justify-content: center;
      margin-bottom: .5rem;
      cursor: pointer;
      transition: all .3s ease;
      svg {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          margin-top: .5rem;
        }
      }
      span {
        @media screen and (max-width: $media768) {
          align-self: flex-end;
          padding-bottom: .5rem;
        }
      }
      &:hover span {
        transform: translateX(0);
      }
      @media screen and (max-width: $media768) {
        margin-bottom: 0;
      }
    }
    @media screen and (max-width: $media768) {
      flex-flow: row nowrap;
      height: 100%;
    }
    @media screen and (max-width: $media550) {
      display: none;
    }
  }
}

.mobile-menu {
  display: none;
  position: relative;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px $c-shadow-secondary;
  background-color: $c-secondary;
  transition: all .3s ease;
  .navbar__mobile-menu {
    display: none;
    position: relative;
    height: 100%;
    .menu {
      position: relative;
      width: 50px;
      height: 40px;
      margin: 1.55rem 1.55rem 0 1.55rem;
      text-align: left;
      cursor: pointer;
      transition: all .5s ease;
      span {
        display: inline-block;
        position: absolute;
        height: 3px;
        width: 50px;
        background: $c-main;
        border-radius: 2px;
        transition: all .5s ease;
        &:nth-of-type(1) {
          transition: width .15s .15s, top .15s, right .15s, transform .15s;
        }
        &:nth-of-type(2) {
          top: 10px;
          transition: transform .15s;
        }
        &:nth-of-type(3) {
          top: 20px;
          right: 0;
          transition: width .15s .15s, top .15s, right .15s, transform .15s;
        }
      }
    }
    @media screen and (max-width: $media550) {
      display: block;
    }
  }
  .navbar__mobile-menu__nav {
    display: block;
    position: absolute;
    left: 100%;
    top: 64px;
    height: calc(100vh - 65px);
    min-height: calc(100vh - 65px);
    width: 100vw;
    background: $c-secondary;
    overflow-x: hidden;
    transition: all .3s ease #{.10 * 5}s;
    .navbar__mobile-menu__list {
      margin-top: 1rem;
      font-size: 1.5rem;
      justify-content: center;
      .navbar__mobile-menu__item {
        padding: 1rem 0;
        justify-content: center;
        cursor: pointer;
        transition: all .3s ease;
        width: 75%;
        margin: 0 auto;
        border-bottom: 1px solid $c-main;
        transform: translateX($media550);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform .15s ease #{-($i - 3 - 1) * .1}s;
          }
        }
        &.active {
          color: $c-malabars;
          border-bottom-color: $c-malabars;
        }
        &:active a {
          transition: all .3s ease;
          transform: scale(.95);
        }
      }
    }
  }
  &.is-open {
    box-shadow: unset;
    .menu {
      span {
        &:nth-of-type(1) {
          top: 2%;
          left: 7%;
          width: 50%;
          transform: rotate(45deg);
          transition: width .15s, top .15s .15s, left .15s .15s, transform .15s .15s;
        }
        &:nth-of-type(2) {
          transform: rotate(-45deg);
          transition: transform .15s .15s;
        }
        &:nth-of-type(3) {
          width: 50%;
          right: 7%;
          top: 47%;
          transform: rotate(45deg);
          transition: width .15s, top .15s .15s, right .15s .15s, transform .15s .15s;
        }
      }
    }
    .navbar__mobile-menu__nav {
      left: 0;
      z-index: -10;
      transition: all .3s ease;
      .navbar__mobile-menu__item {
        transform: translateX(0);
        @for $i from 1 through 6 {
          &:nth-child(#{$i}) {
            transition: transform .15s ease #{$i * .1}s;
          }
        }
      }
      .language {
        position: relative;
        margin-top: 2rem;
        a {
          width: 100%;
          justify-content: center;
        }
        .arrow-icon {
          position: absolute;
          transform: rotate(90deg);
          right: 1rem;
        }
        .language__list {
          width: 100%;
          max-width: 75%;
          height: 0;
          align-items: center;
          justify-content: space-between;
          font-size: 1rem;
          visibility: hidden;
          opacity: 0;
          transition: all .3s ease;
          .language__item {
            a {
              align-items: center;
            }
            &.is-selected span {
              color: $c-malabars;
            }
          }
        }
        &.is-open {
          .arrow-icon {
            transform: rotate(-90deg);
          }
          .language__list {
            display: flex;
            height: 30px;
            visibility: visible;
            opacity: 1;
            padding-top: 1rem;
          }
        }
      }
    }
  }
  @media screen and (max-width: $media550) {
    display: flex;
  }
}

// SVG stroke animation
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

// Logo spin animation
@keyframes spin {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}
            
          
!
            
              $(document).ready(function () {
    // DOM variables
    let document = $(document),
        languageDesktopButton = $(".extra-content__language"),
        hamburguerMenu = $(".menu"),
        languageMobileButton = $(".language"),
        languageSelector = ".extra-content__language-selector";

    languageDesktopButton.on("click", function () {
        $(this).toggleClass("is-open");

        toggleARIA($(this).find(languageSelector), "aria-expanded");
        toggleARIA($(this).find(languageSelector), "aria-hidden");
    });
    hamburguerMenu.on("click", function () {
        $(this).parent().parent().toggleClass("is-open");

        toggleARIA($(this).parent().parent(), "aria-hidden");
    });

    languageMobileButton.on("click", function () {
        $(this).toggleClass("is-open");

        toggleARIA($(this), "aria-expanded");
    });
});

// Toggle ARIA attributes
function toggleARIA(selector, ARIA) {
    selector.attr(ARIA, function (i, attr) {
        return attr == 'true' ? 'false' : 'true';
    });
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console