.tabsnav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

.tabsnav--hidden {
	/*pointer-events: none;*/
	visibility: hidden;
}

.tabsnav__item {
	height: 50px;
	position: relative;
	cursor: pointer;
	justify-content: center;
	-webkit-justify-content: center;
	display: flex;
	display : -webkit-flex;
	display: -ms-flexbox;
  
}

.tabsnav__item > a{
	width: 100%;
	height: 100%;
	align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	display: flex;
	display: -ms-flexbox;
	display : -webkit-flex;
}

.tabsnav__bar {
	background: currentColor;
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	top:0;
}

.tabsnav__title {
	position: relative;
	cursor: pointer;
	margin: 0;
	width: 100%;
	height: 100%;
	font-weight: normal;
	line-height: 1;

	display: flex;	
  	display: -ms-flexbox;
  	display : -webkit-flex;

	flex-direction: column;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	pointer-events: none;
}

.menu{
	top: 0;
	position: relative;
    left: 10vw;
    width: 70vw;
    opacity: 0;

    display: flex;
 	display: -ms-flexbox;
 	display : -webkit-flex;
    
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-content: center;
    align-items: center;
    -webkit-align-items: center;
    z-index: 1002;
    align-content: center;
    margin-top: 1rem;
}
.menu span{
	margin: 1rem;
	color: #fff;
}
.menu .tabsnav__number{
	position: relative;	
	top: 0;
	margin: 2rem;
}
.tabsnav__number {
	position: absolute;
  	top: 1.5rem;
  	color: #fff;
  	width: 2rem;
  	height: 2rem;
  	border: 2px solid;
  	border-radius: 6px;
  	transform: rotate(-45deg);

  	display: flex;
 	display: -ms-flexbox;
 	display : -webkit-flex;
    
 	justify-content: center;
 	-webkit-justify-content: center;
  	align-items: center;
  	-webkit-align-items: center;
}
.tabsnav__number.current{
	background: #fff;
}

.tabsnav__number.current p{
	color: #ffa661;
}

.tabsnav__number p{
	transform: rotate(45deg);
}

.tabsnav__title span {
	position: relative;
	width: 100vh;
	text-align: center;
	font-size: 14px;
	color: #ffaf72;
	font-family: 'RobotoLight';
	font-weight: 500;
	letter-spacing: 1.44px;
	line-height: 24px;
}

/* Vertical Menu */
.tabsnav--vertical {
	
	display: flex;
	display: -ms-flexbox;
	display : -webkit-flex;
	
	width: auto;
	height: 100%;
}

.tabsnav--vertical .tabsnav__item {
	flex: none;
	width: 50px;
	height: 100%;
}

.tabsnav--vertical .tabsnav__title {
	transform: rotate(-90deg);
}

/* Individual menu styles (Basque names) */

/* Ander */
.tabsnav--ander {
	left: 45px;
}

.tabsnav--ander .tabsnav__bar {
	background: #232220;
	/*background: transparent;*/
}

.tabsnav--ander .tabsnav__item.current .tabsnav__bar {
	background: transparent;
}

.tabsnav--ander .tabsnav__title {
	color: #ffaf72;
}

.tabsnav--ander .tabsnav__item:not(:last-child) {
	margin: 0 10px 0 0;
}

/* Zeru */
.tabsnav--zeru {
	background: #222525;
}

.tabsnav--zeru .tabsnav__item:first-child .tabsnav__bar {
	background: #161919;
}

.tabsnav--zeru .tabsnav__item:nth-child(2) .tabsnav__bar {
	background: #222525;
}

.tabsnav--zeru .tabsnav__item:nth-child(3) .tabsnav__bar {
	background: #2e3131;
}

.tabsnav--zeru .tabsnav__title {
	color: #fff;
}

/* Ibai */
.tabsnav--ibai {
	top: 50%;
	margin-top: -115px;
}

.tabsnav--ibai .tabsnav__item {
	height: 70px;
}

.tabsnav--ibai .tabsnav__bar {
	background: #414a52;
}

.tabsnav--ibai .tabsnav__title {
	color: #fc0;
}

.tabsnav--ibai .tabsnav__item:not(:last-child) {
	margin: 0 0 10px 0;
}

@media screen and (max-width: 40em) {
	/* don't show a background if on mobile */
	.tabsnav {
		background: none;
	}
}

@media screen and (max-width: 1366px) {
	.menu .tabsnav__number {
	    margin: 1rem;
	}
}