nav > input, .nav-button {
	display: none;
	}




nav a {
	text-decoration: none;
	/*font-weight: bold;*/
	color: #000;
	}


nav a:hover {
	color: #e62133;
	}


nav a.select {
	color: #e62133;
	}




@media (max-width: 767px) {
	nav a {
		display: block;
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
		padding-right: 1rem;
		padding-left: 1rem;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		}

	nav a.lang {display: inline-block;}


	nav a:before {content:"";}
	nav a:after {content:"";}
	nav a:hover:before {content:"";}
	nav a:hover:after {content:"";}


	.nav-inner {
		z-index: 10;
		background-color: rgba(180,180,180,0.9);
		position: absolute;
		left: 0px;
		/* width: 70vw;   */
		transform: translateX(-100%) translateZ(0);
		transition: transform .2s;
		will-change: transform;
		}

	/* here's goes the slide effect */
	input:checked ~ .nav-inner {
		transform: translateX(0);
		}

	/* Button deco */
	.nav-button {
		display: block;
		position: absolute;
		top: 1rem; right: 1rem;
		z-index: 1;
		height: 3.5rem; width: 3.5rem;
		background-color: transparent;
		background-image: linear-gradient(to right, #333, #333), linear-gradient(to right, #333, #333), linear-gradient(to right, #333, #333);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		background-size: 3.5rem .9rem;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		}



	}




@media (min-width: 768px) {

	nav a {
		line-height: 1.5;
		white-space:nowrap;
		margin-right: 1rem;
		margin-left: 1rem;
		}

	nav a.lang {display: none;}

	nav a.login {float: right;}


	nav a:before { 
		color: #fff;
		content:"[";
		}

	nav a:after { 
		color: #fff;
		content:"]";
		}



	nav a:hover:before { 
		color: #e62133;
		content:"[";
		}

	nav a:hover:after { 
		color: #e62133;
		content:"]";
		}

	nav a.select:before { 
		color: #e62133;
		content:"[";
		}

	nav a.select:after { 
		color: #e62133;
		content:"]";
		}
	}