@charset "UTF-8";

/* Menu Toggle Button for Main Menu */

button#menuToggleButton {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	cursor: pointer;

	border: none;
    outline: none;
    margin: 0 auto 0.5em auto;
    font: inherit;
    font-size: inherit;

    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

	width: 7em;
	box-sizing: content-box;
}

	html[lang='de'] button#menuToggleButton {
		width: 9.4em;
	}

#menuToggleButton {
	display: inline-block;
	padding: 1em 1.5em 1em 1.5em;
	margin-bottom: 0.5em;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	line-height: 1;

	color: rgb(70,70,70);
	background-color: transparent;
	white-space: nowrap;
}

#menuToggleButton span.menuToggleButtonLabel {
	background-size: 1px 1em;
	box-shadow:
		inset 0 -0.1em white,
		inset 0 -0.22em rgba(130,190,50,1);
	
	transition: all .2s ease-in-out;
}


/* hide for non-JS users; gets set to display: block again by JS */
#menuToggleButton {
	display: none;
}

button#menuToggleButton:focus {
	outline: auto;
	outline-color: #82BE32;
}

button#menuToggleButton:hover span.menuToggleButtonLabel,
button#menuToggleButton:active span.menuToggleButtonLabel,
button#menuToggleButton:focus span.menuToggleButtonLabel {
	background-size: 1px 1em;
	box-shadow:
		inset 0 0em white,
		inset 0 -0.22em rgba(130,190,50,1);
}

button#menuToggleButton:focus {
	/*background-color: #82BE32;
	color: white;*/
}

#menuToggleButton span#menuToggleButtonIcon:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.3em;
	background-image: url(../images/menu-icon-show.svg);
	background-repeat: no-repeat;
	background-position: center 0.1em;
	background-color: transparent;
}

#menuToggleButton span.menuToggleButtonLabel {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	width: 5em;
}

	html[lang='de'] #menuToggleButton span.menuToggleButtonLabel {
		width: 7.4em;
	}

	@media only screen and (min-width: 1130px),
	only screen and (min-width: 1060px) and (-webkit-min-device-pixel-ratio: 1.25),
	only screen and (min-width: 1060px) and ( min--moz-device-pixel-ratio: 1.25),
	only screen and (min-width: 1060px) and ( -moz-min-device-pixel-ratio: 1.25),
	only screen and (min-width: 1060px) and ( -o-min-device-pixel-ratio: 1.25/1),
	only screen and (min-width: 1060px) and ( min-device-pixel-ratio: 1.25),
	only screen and (min-width: 1060px) and ( min-resolution: 200dpi),
	only screen and (min-width: 1060px) and ( min-resolution: 1.25dppx) {
		
		a#menuToggleButton {
			display: none;
		}
	}


/* main menu */

#main-menu ul.menu {
	list-style: none;
	padding: 0;
	margin: 0;
	background: rgb(70,70,70);
	text-align: left;
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-weight: 400;
}

#main-menu ul.menu > li {
	list-style: none;
	padding: 0;
	margin: 0;

	/* small screens only */
	display: block;
}

#main-menu ul.menu > li.adminonly {
	display: none;
}

.admin #main-menu ul.menu > li.adminonly {
	display: block;
}

#main-menu ul.menu > li > a {
	display: block;
	padding: 1.9em;
	line-height: 1.5;
	text-decoration: none;

	background-color: rgb(70,70,70);
	color: white;
	transition: background-color 0.2s linear;
    
    border-bottom: solid 3px white;
}

	.expertise #main-menu ul.menu > li#menuitem-our-expertise > a > span:not(.menuitem-intro),
	.coaching-german #main-menu ul.menu > li#menuitem-coaching-german > a > span:not(.menuitem-intro),
	.coaching-english #main-menu ul.menu > li#menuitem-coaching-english > a > span:not(.menuitem-intro),
    .what-we-do #main-menu ul.menu > li#menuitem-what-we-do > a > span:not(.menuitem-intro),
    .workshops #main-menu ul.menu > li#menuitem-workshops > a > span:not(.menuitem-intro),
    .who-we-are #main-menu ul.menu > li#menuitem-who-we-are > a > span:not(.menuitem-intro),
    .about-gls #main-menu ul.menu > li#menuitem-about > a > span:not(.menuitem-intro),
    .how-to #main-menu ul.menu > li#menuitem-how-to > a > span:not(.menuitem-intro),
    .contact #main-menu ul.menu > li#menuitem-contact > a > span:not(.menuitem-intro),
    .contact-and-registration #main-menu ul.menu > li#menuitem-contact-and-registration > a > span:not(.menuitem-intro),
    .info #main-menu ul.menu > li#menuitem-info > a > span:not(.menuitem-intro) {
        /* old: border-bottom: solid 2px; */
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

#main-menu ul.menu > li > a.active {
	background-color: #82BE32;
	color: white;
}

#main-menu ul.menu > li > a:hover,
#main-menu ul.menu > li > a:focus,
#main-menu ul.menu > li > a:active {
	background-color: #82BE32;
	color: white;
	outline: solid 4px transparent;
}

#main-menu ul.menu > li span.menuitem-intro {
	font-size: 80%;
	margin-bottom: 0.1em;
	
	display: block;
}

#main-menu ul.menu > li span.menuitem-intro.empty,
#main-menu ul.menu > li span.menuitem-intro.menuitem-intro-hide {
	display: none;
}

/* Submenu */

ul.menu > li > ul.submenu {
    transition: opacity 3s ease;
	color: white;
    list-style: none;
    padding: 0;
    text-align: left;
	line-height: 1.2;
    
    border-bottom: solid 3px white;
}

.expertise #main-menu ul.menu > li#menuitem-our-expertise ul.submenu,
.coaching-german #main-menu ul.menu > li#menuitem-coaching-german ul.submenu,
.coaching-english #main-menu ul.menu > li#menuitem-coaching-english ul.submenu,
.about-gls #main-menu ul.menu > li#menuitem-about ul.submenu,
.contact-and-registration #main-menu ul.menu > li#menuitem-contact-and-registration ul.submenu,
.what-we-do #main-menu ul.menu > li#menuitem-what-we-do ul.submenu,
.how-to #main-menu ul.menu > li#menuitem-how-to ul.submenu,
.workshops #main-menu ul.menu > li#menuitem-workshops ul.submenu,
.info #main-menu ul.menu > li#menuitem-info ul.submenu {
    display: block;
}

ul.menu > li > ul.submenu > li {
    padding: 0;
}

ul.menu > li > ul.submenu > li > a {
    display: block;
    text-decoration: none;
    padding: 1.4em 0.9em;
    transition: background-color 0.2s linear;
    padding-left: 2em;
}

ul.menu > li > ul.submenu > li > a > span {
    padding-left: 0.5em;
    border-left: solid 2px white;
}

/*
ul.menu > li > ul.submenu > li > a:before {
    content: '';
    display: inline-block;
    color: white;
    width: 1em;
    height: 1em;
    background-image: url("../images/bullet-submenu.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 1em;
    padding-right: 0.5em;
}*/

    .golikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-gls > a span:not(.menuitem-intro),
    .speaklikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-sls > a span:not(.menuitem-intro),
    .writelikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-wls > a span:not(.menuitem-intro),
    .writelikesilk-de #main-menu ul.menu > li > ul.submenu > li#menuitem-wls-de > a span:not(.menuitem-intro),
    .writelikesilk-en #main-menu ul.menu > li > ul.submenu > li#menuitem-wls-en > a span:not(.menuitem-intro),
    .knowlikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-kls > a span:not(.menuitem-intro),
    .readlikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-rls > a span:not(.menuitem-intro),
    .professionallikesilk #main-menu ul.menu > li > ul.submenu > li#menuitem-pls > a span:not(.menuitem-intro),
    .dates #main-menu ul.menu > li > ul.submenu > li#menuitem-dates > a span:not(.menuitem-intro),
    .individualsessions #main-menu ul.menu > li > ul.submenu > li#menuitem-is > a span:not(.menuitem-intro),
    .individualsessions-de #main-menu ul.menu > li > ul.submenu > li#menuitem-is-de > a span:not(.menuitem-intro),
    .individualsessions-en #main-menu ul.menu > li > ul.submenu > li#menuitem-is-en > a span:not(.menuitem-intro),
    .howtoflowinenglish #main-menu ul.menu > li > ul.submenu > li#menuitem-how-to-flow-in-english > a span:not(.menuitem-intro),
    .howtoflowingerman #main-menu ul.menu > li > ul.submenu > li#menuitem-how-to-flow-in-german > a span:not(.menuitem-intro),
    .howwedoit #main-menu ul.menu > li > ul.submenu > li#menuitem-how-we-do-it > a span:not(.menuitem-intro),
    .faq #main-menu ul.menu > li > ul.submenu > li#menuitem-faq > a span:not(.menuitem-intro),
    .rules #main-menu ul.menu > li > ul.submenu > li#menuitem-rules > a span:not(.menuitem-intro),
    .legal #main-menu ul.menu > li > ul.submenu > li#menuitem-legal > a span:not(.menuitem-intro),
    .covid #main-menu ul.menu > li > ul.submenu > li#menuitem-covid > a span:not(.menuitem-intro),
    .accessibility #main-menu ul.menu > li > ul.submenu > li#menuitem-accessibility > a span:not(.menuitem-intro),
    .adulteducation #main-menu ul.menu > li > ul.submenu > li#menuitem-ae > a span:not(.menuitem-intro),
    .kindness-communication #main-menu ul.menu > li > ul.submenu > li#menuitem-kc > a span:not(.menuitem-intro),
    .relational-reading #main-menu ul.menu > li > ul.submenu > li#menuitem-rr > a span:not(.menuitem-intro),
    .train-the-trainers #main-menu ul.menu > li > ul.submenu > li#menuitem-tt > a span:not(.menuitem-intro),
    .targetgroups #main-menu ul.menu > li > ul.submenu > li#menuitem-tg > a span:not(.menuitem-intro),
    .cooperations #main-menu ul.menu > li > ul.submenu > li#menuitem-co > a span:not(.menuitem-intro),
    .office #main-menu ul.menu > li > ul.submenu > li#menuitem-where-we-work > a span:not(.menuitem-intro),
    .michele-and-michael #main-menu ul.menu > li > ul.submenu > li#menuitem-who-we-are > a span:not(.menuitem-intro),
    .mission-statement #main-menu ul.menu > li > ul.submenu > li#menuitem-mission-statement > a span:not(.menuitem-intro),
    .contact #main-menu ul.menu > li > ul.submenu > li#menuitem-contact > a span:not(.menuitem-intro),
    .quote #main-menu ul.menu > li > ul.submenu > li#menuitem-quote > a span:not(.menuitem-intro),
    .registration #main-menu ul.menu > li > ul.submenu > li#menuitem-registration > a span:not(.menuitem-intro) {
		text-decoration: underline;
    }

ul.menu > li > ul.submenu > li > a:hover,
ul.menu > li > ul.submenu > li > a:focus,
ul.menu > li > ul.submenu > li > a:active {
    background-color: #82BE32;
}

ul.menu > li > ul.submenu > li span.emphasis-golikesilk {
    font-size: 1.2em;
    line-height: 2;
}

ul.menu > li > ul.submenu.hide-submenu {
    visibility: hidden;
}

/* Page Bottom Menu */

.adulteducation ul#page-bottommenu-expertise > li#bottommenu-menuitem-ae,
.kindness-communication ul#page-bottommenu-expertise > li#bottommenu-menuitem-kc,
.relational-reading ul#page-bottommenu-expertise > li#bottommenu-menuitem-rr,
.train-the-trainers ul#page-bottommenu-expertise > li#bottommenu-menuitem-tt,
.targetgroups ul#page-bottommenu-expertise > li#bottommenu-menuitem-tg,
.cooperations ul#page-bottommenu-expertise > li#bottommenu-menuitem-co {
	display: none;
}

/* Footer */

ul#footer-menu {
	list-style: none;
	padding-left: 0;
	margin: 0 auto;
	width: 90%;
	text-align: right;
}

ul#footer-menu li {
	display: block;
	margin-right: 1em;
    margin-bottom: 1em;
}

ul#footer-menu li.list-item-left {
	display: inline-block;
	float: left;
}

ul#footer-menu li > a {
	display: inline;
	text-decoration: none;
	
	transition: all .2s ease-in-out;
	
	background-size: 1px 1em;
	box-shadow:
		inset 0 -0.1em rgb(70,70,70),
		inset 0 -0.22em white;
}

ul#footer-menu li > a:hover,
ul#footer-menu li > a:active,
ul#footer-menu li > a:focus {
	background-size: 1px 1em;
	box-shadow:
		inset 0 0em rgb(70,70,70),
		inset 0 -0.22em white;
}

@media only screen and (min-width: 770px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 760px) and ( min-resolution: 200dpi),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx) {

    ul#footer-menu li {
        display: inline-block;
    }
}


@media only screen and (min-width: 1030px),
only screen and (min-width: 760px) and (-webkit-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min--moz-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -moz-min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( -o-min-device-pixel-ratio: 1.25/1) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-device-pixel-ratio: 1.25) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 200dpi) and (orientation: landscape),
only screen and (min-width: 760px) and ( min-resolution: 1.25dppx)  and (orientation: landscape) {

	#main-menu ul.menu {
		display: flex;
		align-content: center;
        position: relative;
        text-align: left;
		font-size: 0.95em;
	}
	
	.front #main-menu ul.menu {
		justify-content: center;
	}
	
	.not-front #main-menu ul.menu {
		text-align: left;
		padding-left: 10em;
	}

	#main-menu ul.menu > li {
		display: flex;
		align-items: stretch;
	}
	
	.admin #main-menu ul.menu > li.adminonly {
		display: flex;
	}

	#main-menu ul.menu > li > a {
		text-align: center;
		padding: 1em 1.2em 1.2em 1.2em;
        border-top: none;
        border-bottom: none;
	}
    
    ul.menu > li > a:before {
        content: '';
        display: none;
    }

	.not-front #main-menu ul.menu > li:first-of-type > a {
		padding-left: 7.7em;
	}
    
	#main-menu ul.menu > li span.menuitem-intro,
	#main-menu ul.menu > li span.menuitem-intro.empty {
		display: block;
	}
	
	#main-menu ul.menu > li span.menuitem-intro.menuitem-intro-hide {
		display: none;
	}
	
    /* Submenu */
    
    ul.menu > li ul.submenu {
        background-color: #82BE32;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-sizing: border-box;
        min-height: 2.2em;
        border-top: solid 2px white;
        text-align: left;
        
        display: none;
    }
    
    .not-front ul.menu > li ul.submenu {
        left: 11em;
        padding-left: 6.9em;
    }
    
    ul.menu > li > ul.submenu > li > a:hover,
    ul.menu > li > ul.submenu > li > a:focus,
    ul.menu > li > ul.submenu > li > a:active {
        background-color: rgb(70,70,70);
    }

    .expertise #main-menu ul.menu > li#menuitem-our-expertise ul.submenu,
	.coaching-german #main-menu ul.menu > li#menuitem-coaching-german ul.submenu,
	.coaching-english #main-menu ul.menu > li#menuitem-coaching-english ul.submenu,
	.about-gls #main-menu ul.menu > li#menuitem-about ul.submenu,
	.contact-and-registration #main-menu ul.menu > li#menuitem-contact-and-registration ul.submenu,
	.what-we-do #main-menu ul.menu > li#menuitem-what-we-do ul.submenu,
	.how-to #main-menu ul.menu > li#menuitem-how-to ul.submenu,
	.workshops #main-menu ul.menu > li#menuitem-workshops ul.submenu,
	.info #main-menu ul.menu > li#menuitem-info ul.submenu {
        display: flex;
        align-content: center;
        z-index: 10;
    }
    
    #main-menu ul.menu > li:hover ul.submenu,
    #main-menu ul.menu > li:focus ul.submenu,
    #main-menu ul.menu > li:active ul.submenu {
        display: flex;
        align-content: center;
        z-index: 11;
    }
    
    .front #main-menu ul.menu > li:hover ul.submenu,
    .front #main-menu ul.menu > li:focus ul.submenu,
    .front #main-menu ul.menu > li:active ul.submenu {
        justify-content: center;
        padding-left: 0;
    }

    ul.menu li ul.submenu > li {
        display: flex;
        align-items: stretch;
        vertical-align: middle;
		text-align: center;
    }
    
    ul.menu > li > ul.submenu > li > a {
        display: flex;
		align-items: center;
		min-height: 2.5em;
        padding-top: 0.15em;
        padding-bottom: 0.4em;
        padding-left: 1.2em;
        padding-right: 1.2em;
    }
    
    ul.menu > li > ul.submenu > li > a:before {
        content: '';
        display: none;
    }
    
    ul.menu > li > ul.submenu > li > a > span {
        border-left: none;
        padding-left: 0;
    }
    
    .not-front ul.menu > li > ul.submenu > li:first-of-type > a {
        margin-left: -6.9em;
        padding-left: 5.4em;
    }
    
    /* footer menu */

	ul#footer-menu li.back-to-top {
		display: none;
	}

}


@media only screen and (minw-width: 1150px),
only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1000px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 1000px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1000px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 1000px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 1000px) and ( min-resolution: 200dpi),
only screen and (min-width: 1000px) and ( min-resolution: 1.25dppx) {

	#main-menu ul.menu > li > a {
		padding: 1.3em 0.8em;
	}
    
}

@media only screen and (min-width: 1400px),
only screen and (min-width: 1300px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( min--moz-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( -moz-min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and (min-width: 1300px) and ( min-device-pixel-ratio: 1.25),
only screen and (min-width: 1300px) and ( min-resolution: 200dpi),
only screen and (min-width: 1300px) and ( min-resolution: 1.25dppx) {

	.not-front #main-menu ul.menu {
		text-align: left;
		padding-left: 13em;
		font-size: 1.05em;
	}

	#main-menu ul.menu > li > a {
		padding: 1em 1.2em 1.2em 1.2em;
	}

	.not-front #main-menu ul.menu > li:first-of-type > a {
		padding-left: 5.4em;
	}
    
    ul.menu > li ul.submenu {
        padding-left: 8.4em;
    }
    
    .not-front ul.menu > li > ul.submenu > li:first-of-type > a {
        margin-left: -6.9em;
        padding-left: 6.9em;;
    }

}