/*
Common stylesheet for menu bar
Author: Elemental Films
Version: 1.0
*/

/*********************
MENU BAR
*********************/

#modal-fill {
	height: 70px;
	width: 100%;
	background-color: #FFFFFF;
}

#modal-burger {
	position: absolute;
	z-index: 100;
	top: 0;
	height: 70px;
	width: 70px;
	mix-blend-mode: darken;
}
#modal-burger img {
	height: 70px;
	width: 70px;
}

#modal-grnd {
	position: fixed;
	z-index: 10;
	top: 0;
	width: 100%;
	height: 70px;
	background-color: #FFFFFF;
	overflow: hidden;
}
#modal-menu {
	position: relative;
	margin: 0 auto;
	top: 0;
	width: calc(100% - 140px);
	max-width: 1040px;
	height: 70px;
	padding: 0 70px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 15px;
}
/* fallback for no 'column-gap' support on iOS<14 */
@supports not (inset: 0) {
	#modal-menu .link {
	  margin-right: 15px;
	}
}

.link {
	position: relative;
	z-index: 20;
	height: 70px;
	font-size: calc(0.9 * 24px);
	font-family: 'Asap', Helvetica, Arial, sans-serif;
	color: #2d2d2d;
	letter-spacing: -1px;
	line-height: 1;
	word-spacing: normal;
	text-align: center;
	font-weight: 500;
	margin: 0;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
}

.modal-blank {
	position: relative;
	z-index: 19;
	height: 70px;
	flex-basis: 100%;
	top: -70px;
	background-color: #FFFFFF;
}
.link:nth-child(6), .link:nth-child(7), .link:nth-child(8), .link:nth-child(9) {
	flex-basis: 100%;
}
.link:nth-child(7), .link:nth-child(8), .link:nth-child(9) {
	height: 46px;
	align-items: flex-start;
}

/* films */
.link:nth-child(3) {
	cursor: pointer;
}

/* bullets */
.link:nth-child(4) {
	display: none;
}

/* voyageuse */
.link:nth-child(6) {
	z-index: 18;
	top: -140px;
}
/* devils plantation */
.link:nth-child(7) {
	z-index: 17;
	top: -186px;
}
/* solid air */
.link:nth-child(8) {
	z-index: 16;
	top: -232px;
}
/* one life stand */
.link:nth-child(9) {
	z-index: 15;
	top: -278px;
}

.link a {
	color: #2d2d2d;
	text-decoration: none;
}

.the {
	display: none;	
}

/*********************
MEDIA QUERIES
*********************/
@media screen and (min-width:340px) {
	.the {
		display: inline;	
	}
}

@media screen and (min-width: 630px) {
	#modal-menu {
		height: 140px;
		justify-content: center;
	}
	.link:nth-child(6), .link:nth-child(7), .link:nth-child(8), .link:nth-child(9) {
		position: initial;
		height: 70px;
		width: auto;
		z-index: auto;
		align-items: center;
		background-color: transparent;
		flex-basis: auto;
	}
	.modal-blank {
		height: 0;
		z-index: auto;
		background-color: transparent;
	}
	.the {
		display: none;	
	}
}

@media screen and (min-width: 768px) {
	#modal-menu {
		height: 100%;
		flex-wrap: nowrap;
		column-gap: normal;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		padding: 0 5%;
	}
	.link {
		height: auto;
	}
	.link:nth-child(3), #modal-burger {
		display: none;
	}

	.link:nth-child(4) {
		display: block;
		width: 6%;
	}
	.modal-blank {
		display: none;
	}
}
@media screen and (min-width: 900px) {
	.link:nth-child(4) {
		width: 15%;
	}
	.the {
		display: inline;
	}
}