/*******************************************************
*
Theme Name:		Cosmetic studio homepage
Theme URI:		https://www.kosmetikstudio-zell.de
Description:	Homepage of the cosmetic studio "Zeit f�r mich"
Version:      	2.1
Author:        	KPN
License:       	none (public domain)
Tags:          	

*
*******************************************************/

/*******************************************************
*
	Definitions for menu elements
*
*******************************************************/

.menuFrameGrid{
	display: none;
	position: relative;
	grid-template-columns: 100%;
	grid-template-rows: repeat(13, auto);
	grid-row-gap: 5px;
	width: 100%;
	height: 100%;
	margin-top: 20px;
	background-color: transparent;
	align-content: start;
	justify-content: right;
	grid-column: 1;
	grid-row: 3;
	z-index: 2;
}

.menuButton {
	position: -webkit-sticky;
	position: sticky;
	margin: 0px;
	background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
	width: 100%;
	height: auto;
	font-size: 1.2em;
	font-family: "Arial";
	padding: 5px;
	color: #fbf7ef;
	text-align: right;
	border: none;
    white-space: nowrap;
}

.menuBarHorizontal {
	background-color: #ba903e;
	width: 100%;
	height: 100%;
	border: 1px solid #ba903e;
	border-radius: 2px;
	margin: 0px;
	padding: 0px;
    display: block;
    grid-column: 1;
    grid-row: auto;
}

.menuBarVertical {
	background-color: #ba903e;
	width: 100%;
	height: 100%;
	border: 1px solid #ba903e;
	border-radius: 2px;
	margin: 0px;
	padding: 0px;
    display: block;
    grid-row: 1;
    grid-column: auto;
}

.menuBarOpenClass {
	position: -webkit-sticky;
	position: sticky;
	color: #fbf7ef;
	top: 5px;
	left: 2px;
	width: 2em;
	height: 2em;
	background-color: transparent;
	z-index: 99;
	border: none;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    display: block;
    justify-self: start;
}

.menuBarHorizontalClass {
    display: none;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 100%;
    grid-gap: 3px 0px;
}

.menuBarVerticalClass {
    display: none;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100%;
    grid-gap: 0px 3px;
}

.menuBarCloseClass {
	position: -webkit-sticky;
	position: sticky;
	color: #fbf7ef;
	top: 5px;
	left: 2px;
	width: 2em;
	height: 2em;
	background-color: transparent;
	z-index: 99;
	display: none;
	border: none;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
}

@media screen and (min-width: 680px){
	.menuFrameGrid{
		display: grid;
		grid-column: 1;
		grid-row: 2;
	}
}

.menuButton:nth-of-type(1){
	top: 0px;
}
.menuButton:nth-of-type(2){
	top: 1.5em;
}
.menuButton:nth-of-type(3){
	top: 3em;
}
.menuButton:nth-of-type(4){
	top: 4.5em;
}
.menuButton:nth-of-type(5){
	top: 6em;
}
.menuButton:nth-of-type(6){
	top: 7.5em;
}
.menuButton:nth-of-type(7){
	top: 9em;
}
.menuButton:nth-of-type(8){
	top: 10.5em;
}
.menuButton:nth-of-type(9){
	top: 12em;
}
.menuButton:nth-of-type(10){
	top: 13.5em;
}
.menuButton:nth-of-type(11){
	top: 15em;
}
.menuButton:nth-of-type(12){
	top: 16.5em;
}
.menuButton:nth-of-type(13){
	top: 18em;
}

.menuButton:hover {
	color: white;
	cursor: pointer;
}

.menuBarOpenClass:hover {
	color: white;
	cursor: pointer;
}

.menuBarCloseClass:hover {
	color: white;
	cursor: pointer;
}